mirror of https://github.com/rancher/dashboard.git
667 fixes
This commit is contained in:
parent
5df4b3e34c
commit
73d72e2ed9
|
|
@ -1,40 +1,42 @@
|
||||||
<script>
|
<script>
|
||||||
import LabeledInput from '@/components/form/LabeledInput';
|
import LabeledInput from "@/components/form/LabeledInput";
|
||||||
import LabeledSelect from '@/components/form/LabeledSelect';
|
import LabeledSelect from "@/components/form/LabeledSelect";
|
||||||
export default {
|
export default {
|
||||||
components: { LabeledInput, LabeledSelect },
|
components: { LabeledInput, LabeledSelect },
|
||||||
props: {
|
props: {
|
||||||
value: {
|
value: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: () => {
|
default: () => {
|
||||||
return {};
|
return {};
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
certs: {
|
certs: {
|
||||||
type: Array,
|
type: Array,
|
||||||
default: () => []
|
default: () => [],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
const defaultCert = {
|
const defaultCert = {
|
||||||
label: this.t('ingress.certificates.defaultCertLabel'),
|
label: this.t("ingress.certificates.defaultCertLabel"),
|
||||||
value: null,
|
value: null,
|
||||||
};
|
};
|
||||||
const { hosts = [''], secretName = defaultCert.value } = this.value;
|
const { hosts = [""], secretName = defaultCert.value } = this.value;
|
||||||
|
|
||||||
return {
|
return {
|
||||||
defaultCert, hosts, secretName
|
defaultCert,
|
||||||
|
hosts,
|
||||||
|
secretName,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
certsWithDefault() {
|
certsWithDefault() {
|
||||||
return [this.defaultCert, ...this.certs];
|
return [this.defaultCert, ...this.certs];
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
addHost(ev) {
|
addHost(ev) {
|
||||||
ev.preventDefault();
|
ev.preventDefault();
|
||||||
this.hosts.push('');
|
this.hosts.push("");
|
||||||
this.update();
|
this.update();
|
||||||
},
|
},
|
||||||
remove(ev, idx) {
|
remove(ev, idx) {
|
||||||
|
|
@ -48,9 +50,9 @@ export default {
|
||||||
if (this.secretName !== this.defaultCert) {
|
if (this.secretName !== this.defaultCert) {
|
||||||
out.secretName = this.secretName;
|
out.secretName = this.secretName;
|
||||||
}
|
}
|
||||||
this.$emit('input', out);
|
this.$emit("input", out);
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
@ -63,20 +65,38 @@ export default {
|
||||||
:options="certsWithDefault"
|
:options="certsWithDefault"
|
||||||
:label="t('ingress.certificates.certificate.label')"
|
:label="t('ingress.certificates.certificate.label')"
|
||||||
required
|
required
|
||||||
@input="e=>{secretName = e; update()}"
|
@input="
|
||||||
|
(e) => {
|
||||||
|
secretName = e;
|
||||||
|
update();
|
||||||
|
}
|
||||||
|
"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="col span-5">
|
<div class="col span-5">
|
||||||
<div v-for="(host, i) in hosts" :key="i" class="row mb-10">
|
<div v-for="(host, i) in hosts" :key="i" class="row mb-10">
|
||||||
<div :style="{'margin-right': '0px'}" class="col span-11">
|
<div :style="{ 'margin-right': '0px' }" class="col span-11">
|
||||||
<LabeledInput :value="host" :label="t('ingress.certificates.host.label')" :placeholder="t('ingress.certificates.host.placeholder')" @input="e=>$set(hosts, i, e)" />
|
<LabeledInput
|
||||||
|
:value="host"
|
||||||
|
:label="t('ingress.certificates.host.label')"
|
||||||
|
:placeholder="t('ingress.certificates.host.placeholder')"
|
||||||
|
@input="(e) => $set(hosts, i, e)"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<button class="btn btn-sm role-link col" @click="e=>remove(e, i)">
|
<button
|
||||||
{{ t('ingress.certificates.removeHost') }}
|
class="btn btn-sm role-link col"
|
||||||
|
@click="(e) => remove(e, i)"
|
||||||
|
style="line-height: 40px;"
|
||||||
|
>
|
||||||
|
{{ t("ingress.certificates.removeHost") }}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<button :style="{'padding':'0px 0px 0px 5px'}" class="bn btn-sm role-link" @click="addHost">
|
<button
|
||||||
{{ t('ingress.certificates.addHost') }}
|
:style="{ padding: '0px 0px 0px 5px' }"
|
||||||
|
class="bn btn-sm role-link"
|
||||||
|
@click="addHost"
|
||||||
|
>
|
||||||
|
{{ t("ingress.certificates.addHost") }}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="col span-1">
|
<div class="col span-1">
|
||||||
|
|
@ -88,17 +108,17 @@ export default {
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang='scss' scoped>
|
<style lang="scss" scoped>
|
||||||
.close{
|
.close {
|
||||||
float:right;
|
float: right;
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -10px;
|
top: -10px;
|
||||||
right: -10px;
|
right: -10px;
|
||||||
}
|
}
|
||||||
.cert:not(:last-of-type) {
|
.cert:not(:last-of-type) {
|
||||||
padding-bottom: 10px;
|
padding-bottom: 10px;
|
||||||
margin-bottom:30px;
|
margin-bottom: 30px;
|
||||||
border-bottom: 1px solid var(--border);
|
border-bottom: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,27 +1,29 @@
|
||||||
<script>
|
<script>
|
||||||
import RulePath from '@/edit/networking.k8s.io.ingress/RulePath';
|
import RulePath from "@/edit/networking.k8s.io.ingress/RulePath";
|
||||||
import LabeledInput from '@/components/form/LabeledInput';
|
import LabeledInput from "@/components/form/LabeledInput";
|
||||||
import { random32 } from '../../utils/string';
|
import { random32 } from "../../utils/string";
|
||||||
export default {
|
export default {
|
||||||
components: { RulePath, LabeledInput },
|
components: { RulePath, LabeledInput },
|
||||||
props: {
|
props: {
|
||||||
value: {
|
value: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: () => {
|
default: () => {
|
||||||
return {};
|
return {};
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
serviceTargets: {
|
serviceTargets: {
|
||||||
type: Array,
|
type: Array,
|
||||||
default: () => []
|
default: () => [],
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
const { host = '', http = {} } = this.value;
|
const { host = "", http = {} } = this.value;
|
||||||
const { paths = [{ id: random32(1) }] } = http;
|
const { paths = [{ id: random32(1) }] } = http;
|
||||||
|
|
||||||
return {
|
return {
|
||||||
host, paths, ruleMode: this.value.asDefault ? 'asDefault' : 'setHost'
|
host,
|
||||||
|
paths,
|
||||||
|
ruleMode: this.value.asDefault ? "asDefault" : "setHost",
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
@ -34,7 +36,7 @@ export default {
|
||||||
} else {
|
} else {
|
||||||
delete out.host;
|
delete out.host;
|
||||||
}
|
}
|
||||||
this.$emit('input', out);
|
this.$emit("input", out);
|
||||||
},
|
},
|
||||||
addPath(ev) {
|
addPath(ev) {
|
||||||
ev.preventDefault();
|
ev.preventDefault();
|
||||||
|
|
@ -47,9 +49,9 @@ export default {
|
||||||
this.paths = neu;
|
this.paths = neu;
|
||||||
},
|
},
|
||||||
removeRule() {
|
removeRule() {
|
||||||
this.$emit('remove');
|
this.$emit("remove");
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
@ -57,10 +59,13 @@ export default {
|
||||||
<div class="rule" @input="update">
|
<div class="rule" @input="update">
|
||||||
<div class="row mb-20">
|
<div class="row mb-20">
|
||||||
<div id="host" class="col span-6">
|
<div id="host" class="col span-6">
|
||||||
<LabeledInput v-model="host" :label="t('ingress.rules.requestHost.label')" :placeholder="t('ingress.rules.requestHost.placeholder')" />
|
<LabeledInput
|
||||||
</div>
|
v-model="host"
|
||||||
<div id="host" class="col span-5">
|
:label="t('ingress.rules.requestHost.label')"
|
||||||
|
:placeholder="t('ingress.rules.requestHost.placeholder')"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
<div id="host" class="col span-5"></div>
|
||||||
<div class="col span-1">
|
<div class="col span-1">
|
||||||
<button class="btn role-link close" @click="removeRule">
|
<button class="btn role-link close" @click="removeRule">
|
||||||
<i class="icon icon-2x icon-x" />
|
<i class="icon icon-2x icon-x" />
|
||||||
|
|
@ -69,13 +74,13 @@ export default {
|
||||||
</div>
|
</div>
|
||||||
<div class="rule-path-headings row mb-0">
|
<div class="rule-path-headings row mb-0">
|
||||||
<div class="col span-4">
|
<div class="col span-4">
|
||||||
{{ t('ingress.rules.path.label') }}
|
<label>{{ t("ingress.rules.path.label") }}</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="col span-4">
|
<div class="col span-4">
|
||||||
{{ t('ingress.rules.target.label') }}
|
<label>{{ t("ingress.rules.target.label") }}</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="col span-3" :style="{'margin-right': '0px'}">
|
<div class="col span-3" :style="{ 'margin-right': '0px' }">
|
||||||
{{ t('ingress.rules.port.label') }}
|
<label>{{ t("ingress.rules.port.label") }}</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="col" />
|
<div class="col" />
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -86,31 +91,37 @@ export default {
|
||||||
:value="path"
|
:value="path"
|
||||||
:rule-mode="ruleMode"
|
:rule-mode="ruleMode"
|
||||||
:service-targets="serviceTargets"
|
:service-targets="serviceTargets"
|
||||||
@input="e=>$set(paths, i, e)"
|
@input="(e) => $set(paths, i, e)"
|
||||||
@remove="e=>removePath(i)"
|
@remove="(e) => removePath(i)"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
<button v-if="ruleMode === 'setHost'" :style="{'padding':'0px 0px 0px 5px'}" class="btn btn-sm role-link" @click="addPath">
|
<button
|
||||||
{{ t('ingress.rules.addPath') }}
|
v-if="ruleMode === 'setHost'"
|
||||||
|
:style="{ padding: '0px 0px 0px 5px' }"
|
||||||
|
class="btn btn-sm role-link"
|
||||||
|
@click="addPath"
|
||||||
|
>
|
||||||
|
{{ t("ingress.rules.addPath") }}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang='scss' scoped>
|
<style lang="scss" scoped>
|
||||||
.rule {
|
.rule {
|
||||||
background: var(--tabbed-container-bg);
|
background: var(--tabbed-container-bg);
|
||||||
border: 1px solid var(--tabbed-border);
|
border: 1px solid var(--tabbed-border);
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
}
|
margin-top: 20px;
|
||||||
#host {
|
}
|
||||||
align-self: center
|
#host {
|
||||||
}
|
align-self: center;
|
||||||
.close{
|
}
|
||||||
float:right;
|
.close {
|
||||||
padding: 0px;
|
float: right;
|
||||||
position: relative;
|
padding: 0px;
|
||||||
top: -20px;
|
position: relative;
|
||||||
right: -20px;
|
top: -10px;
|
||||||
}
|
right: -10px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue