mirror of https://github.com/rancher/dashboard.git
106 lines
3.1 KiB
Vue
106 lines
3.1 KiB
Vue
<script>
|
|
import LabeledInput from '@/components/form/LabeledInput';
|
|
import RadioGroup from '@/components/form/RadioGroup';
|
|
import { _CREATE } from '@/config/query-params';
|
|
|
|
export default {
|
|
components: { LabeledInput, RadioGroup },
|
|
props: {
|
|
value: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
mode: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
},
|
|
data() {
|
|
const volumeTypeOptions = [
|
|
{
|
|
label: this.t('storageClass.gce-pd.volumeType.standard'),
|
|
value: 'pd-standard'
|
|
},
|
|
{
|
|
label: this.t('storageClass.gce-pd.volumeType.ssd'),
|
|
value: 'pd-ssd'
|
|
}
|
|
];
|
|
|
|
const availabilityZoneOptions = [
|
|
{
|
|
label: this.t('storageClass.gce-pd.availabilityZone.automatic'),
|
|
value: null
|
|
},
|
|
{
|
|
label: this.t('storageClass.gce-pd.availabilityZone.manual'),
|
|
value: 'manual'
|
|
}
|
|
];
|
|
const replicationTypeOptions = [
|
|
{
|
|
label: this.t('storageClass.gce-pd.replicationType.zonal'),
|
|
value: null
|
|
},
|
|
{
|
|
label: this.t('storageClass.gce-pd.replicationType.regional'),
|
|
value: 'regional-pd'
|
|
}
|
|
];
|
|
|
|
if (this.mode === _CREATE) {
|
|
this.$set(this.value.parameters, 'type', this.value.parameters.type || volumeTypeOptions[0].value);
|
|
}
|
|
|
|
return {
|
|
volumeTypeOptions,
|
|
availabilityZoneOptions,
|
|
replicationTypeOptions,
|
|
|
|
volumeType: volumeTypeOptions[0].value,
|
|
availabilityZone: this.value.parameters.zones ? availabilityZoneOptions[1].value : availabilityZoneOptions[0].value,
|
|
replicationType: replicationTypeOptions[0].value,
|
|
filesystemType: '',
|
|
manualfilesystemType: ''
|
|
};
|
|
},
|
|
};
|
|
</script>
|
|
<template>
|
|
<div>
|
|
<div class="row mb-20">
|
|
<div class="col span-6">
|
|
<RadioGroup
|
|
v-model="value.parameters.type"
|
|
name="volumeType"
|
|
:label="t('storageClass.gce-pd.volumeType.label')"
|
|
:mode="mode"
|
|
:options="volumeTypeOptions"
|
|
/>
|
|
<LabeledInput v-model="value.parameters.fsType" class="mt-10" :placeholder="t('storageClass.gce-pd.filesystemType.placeholder')" :label="t('storageClass.gce-pd.filesystemType.label')" :mode="mode" />
|
|
</div>
|
|
<div class="col span-6">
|
|
<RadioGroup
|
|
v-model="availabilityZone"
|
|
name="availabilityZone"
|
|
:label="t('storageClass.gce-pd.availabilityZone.label')"
|
|
:mode="mode"
|
|
:options="availabilityZoneOptions"
|
|
/>
|
|
<LabeledInput v-if="availabilityZone === 'manual'" v-model="value.parameters.zones" class="mt-10" :placeholder="t('storageClass.gce-pd.availabilityZone.placeholder')" :mode="mode" />
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col span-6">
|
|
<RadioGroup
|
|
v-model="value.parameters['replication-type']"
|
|
name="replicationType"
|
|
:label="t('storageClass.gce-pd.replicationType.label')"
|
|
:mode="mode"
|
|
:options="replicationTypeOptions"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|