mirror of https://github.com/rancher/dashboard.git
159 lines
4.2 KiB
Vue
159 lines
4.2 KiB
Vue
<script>
|
|
import { _VIEW } from '@/config/query-params';
|
|
import LabeledSelect from '@/components/form/LabeledSelect';
|
|
import UnitInput from '@/components/form/UnitInput';
|
|
|
|
export default {
|
|
components: { LabeledSelect, UnitInput },
|
|
|
|
props: {
|
|
mode: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
types: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
type: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
value: {
|
|
type: Object,
|
|
default: () => {
|
|
return {};
|
|
}
|
|
}
|
|
},
|
|
|
|
data() {
|
|
return { };
|
|
},
|
|
|
|
computed: {
|
|
isView() {
|
|
return this.mode === _VIEW;
|
|
},
|
|
|
|
typed() {
|
|
return this.types.find(type => type.value === this.type);
|
|
},
|
|
isUnitless() {
|
|
return this.typed?.units === 'unitless';
|
|
},
|
|
|
|
isCpu() {
|
|
return this.typed?.units === 'cpu';
|
|
},
|
|
|
|
isMemory() {
|
|
return this.typed?.units === 'memory';
|
|
},
|
|
|
|
isStorage() {
|
|
return this.typed?.units === 'storage';
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
updateType(type) {
|
|
if (typeof this.value.spec.resourceQuota.limit[this.type] !== 'undefined') {
|
|
this.$delete(this.value.spec.resourceQuota.limit, this.type);
|
|
}
|
|
|
|
if (typeof this.value.spec.namespaceDefaultResourceQuota.limit[this.type] !== 'undefined') {
|
|
this.$delete(this.value.spec.namespaceDefaultResourceQuota.limit, this.type);
|
|
}
|
|
|
|
this.$emit('type-change', type);
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
<template>
|
|
<div class="row">
|
|
<LabeledSelect class="mr-10" :value="type" :options="types" :label="t('resourceQuota.resourceType.label')" @input="updateType($event)" />
|
|
|
|
<UnitInput
|
|
v-if="isUnitless"
|
|
v-model="value.spec.resourceQuota.limit[type]"
|
|
class="mr-10"
|
|
:mode="mode"
|
|
:suffix="false"
|
|
:label="t('resourceQuota.projectLimit.label')"
|
|
:placeholder="t('resourceQuota.projectLimit.unitlessPlaceholder')"
|
|
/>
|
|
<UnitInput
|
|
v-if="isUnitless"
|
|
v-model="value.spec.namespaceDefaultResourceQuota.limit[type]"
|
|
:mode="mode"
|
|
:suffix="false"
|
|
:label="t('resourceQuota.namespaceDefaultLimit.label')"
|
|
:placeholder="t('resourceQuota.namespaceDefaultLimit.unitlessPlaceholder')"
|
|
/>
|
|
|
|
<UnitInput
|
|
v-if="isCpu"
|
|
v-model="value.spec.resourceQuota.limit[type]"
|
|
class="mr-10"
|
|
:suffix="t('suffix.milliCpus')"
|
|
:mode="mode"
|
|
:label="t('resourceQuota.projectLimit.label')"
|
|
:placeholder="t('resourceQuota.projectLimit.cpuPlaceholder')"
|
|
/>
|
|
<UnitInput
|
|
v-if="isCpu"
|
|
v-model="value.spec.namespaceDefaultResourceQuota.limit[type]"
|
|
:suffix="t('suffix.milliCpus')"
|
|
:mode="mode"
|
|
:label="t('resourceQuota.namespaceDefaultLimit.label')"
|
|
:placeholder="t('resourceQuota.namespaceDefaultLimit.cpuPlaceholder')"
|
|
/>
|
|
|
|
<UnitInput
|
|
v-if="isMemory"
|
|
v-model="value.spec.resourceQuota.limit[type]"
|
|
class="mr-10"
|
|
:suffix="t('suffix.mib')"
|
|
:mode="mode"
|
|
:label="t('resourceQuota.projectLimit.label')"
|
|
:placeholder="t('resourceQuota.projectLimit.memoryPlaceholder')"
|
|
/>
|
|
<UnitInput
|
|
v-if="isMemory"
|
|
v-model="value.spec.namespaceDefaultResourceQuota.limit[type]"
|
|
:suffix="t('suffix.mib')"
|
|
:mode="mode"
|
|
:label="t('resourceQuota.namespaceDefaultLimit.label')"
|
|
:placeholder="t('resourceQuota.namespaceDefaultLimit.memoryPlaceholder')"
|
|
/>
|
|
|
|
<UnitInput
|
|
v-if="isStorage"
|
|
v-model="value.spec.resourceQuota.limit[type]"
|
|
class="mr-10"
|
|
:suffix="t('suffix.gb')"
|
|
:mode="mode"
|
|
:placeholder="t('resourceQuota.projectLimit.storagePlaceholder')"
|
|
:label="t('resourceQuota.projectLimit.label')"
|
|
/>
|
|
<UnitInput
|
|
v-if="isStorage"
|
|
v-model="value.spec.namespaceDefaultResourceQuota.limit[type]"
|
|
:suffix="t('suffix.gb')"
|
|
:mode="mode"
|
|
:label="t('resourceQuota.namespaceDefaultLimit.label')"
|
|
:placeholder="t('resourceQuota.namespaceDefaultLimit.storagePlaceholder')"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang='scss' scoped>
|
|
.row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-evenly;
|
|
}
|
|
</style>
|