mirror of https://github.com/rancher/dashboard.git
137 lines
2.9 KiB
Vue
137 lines
2.9 KiB
Vue
<script>
|
|
import Mount from '@shell/edit/workload/storage/Mount';
|
|
import { mapGetters } from 'vuex';
|
|
import PersistentVolumeClaim from '@shell/edit/workload/storage/persistentVolumeClaim/persistentvolumeclaim.vue';
|
|
import { PVC } from '@shell/config/types';
|
|
import { _VIEW } from '@shell/config/query-params';
|
|
import ArrayListGrouped from '@shell/components/form/ArrayListGrouped';
|
|
|
|
export default {
|
|
components: {
|
|
ArrayListGrouped,
|
|
Mount,
|
|
PersistentVolumeClaim
|
|
},
|
|
|
|
props: {
|
|
mode: {
|
|
type: String,
|
|
default: 'create'
|
|
},
|
|
|
|
namespace: {
|
|
type: String,
|
|
default: null
|
|
},
|
|
|
|
value: {
|
|
type: Object,
|
|
default: () => {
|
|
return {};
|
|
}
|
|
},
|
|
},
|
|
|
|
data() {
|
|
return { templates: this.value.volumeClaimTemplates, name: '' };
|
|
},
|
|
|
|
computed: {
|
|
isView() {
|
|
return this.mode === _VIEW;
|
|
},
|
|
|
|
...mapGetters({ t: 'i18n/t' })
|
|
},
|
|
|
|
watch: {
|
|
namespace(neu) {
|
|
this.pvc.metadata.namespace = neu;
|
|
},
|
|
},
|
|
|
|
methods: {
|
|
update() {
|
|
this.value['volumeClaimTemplates'] = this.templates;
|
|
},
|
|
|
|
updatePVC(pvc) {
|
|
const storage = pvc?.spec?.resources?.requests?.storage;
|
|
|
|
if (storage) {
|
|
if (!storage.toString().match(/[0-9]*[a-zA-Z]+$/)) {
|
|
pvc.spec.resources.requests.storage += 'Gi';
|
|
}
|
|
}
|
|
this.name = pvc?.metadata?.name;
|
|
this.update();
|
|
},
|
|
|
|
addPVC() {
|
|
if (!this.value.volumeClaimTemplates) {
|
|
this.value['volumeClaimTemplates'] = [];
|
|
}
|
|
this.templates = this.value.volumeClaimTemplates;
|
|
|
|
const namespace = this.namespace || this.$store.getters['defaultNamespace'];
|
|
|
|
const data = { type: PVC };
|
|
|
|
data.metadata = { namespace };
|
|
|
|
this.$store.dispatch('cluster/create', data).then((pvc) => {
|
|
pvc.applyDefaults();
|
|
this.templates.push(pvc);
|
|
this.update();
|
|
});
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div>
|
|
<ArrayListGrouped
|
|
v-model:value="templates"
|
|
class="mb-20"
|
|
@input="update()"
|
|
>
|
|
<template #default="props">
|
|
<div class="bordered-section">
|
|
<PersistentVolumeClaim
|
|
v-if="props.row.value.metadata"
|
|
:value="props.row.value"
|
|
:mode="mode"
|
|
@input="updatePVC(props.row.value)"
|
|
/>
|
|
</div>
|
|
<Mount
|
|
:name="props.row.value.metadata.name"
|
|
:mode="mode"
|
|
:container="value.template.spec.containers[0]"
|
|
/>
|
|
</template>
|
|
<template #add>
|
|
<button
|
|
v-if="!isView"
|
|
type="button"
|
|
class="btn role-tertiary add"
|
|
@click="addPVC"
|
|
>
|
|
{{ t('volumeClaimTemplate.add.label') }}
|
|
</button>
|
|
</template>
|
|
</ArrayListGrouped>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang='scss' scoped>
|
|
.remove-btn{
|
|
position: absolute;
|
|
top:0px;
|
|
right:0px;
|
|
}
|
|
</style>
|