667 fixes

This commit is contained in:
lvuch 2020-07-28 15:56:33 -07:00
parent 5df4b3e34c
commit 73d72e2ed9
2 changed files with 109 additions and 78 deletions

View File

@ -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>

View File

@ -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>