| // Licensed to the Apache Software Foundation (ASF) under one | |
| // or more contributor license agreements. See the NOTICE file | |
| // distributed with this work for additional information | |
| // regarding copyright ownership. The ASF licenses this file | |
| // to you under the Apache License, Version 2.0 (the | |
| // "License"); you may not use this file except in compliance | |
| // with the License. You may obtain a copy of the License at | |
| // | |
| // http://www.apache.org/licenses/LICENSE-2.0 | |
| // | |
| // Unless required by applicable law or agreed to in writing, | |
| // software distributed under the License is distributed on an | |
| // "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY | |
| // KIND, either express or implied. See the License for the | |
| // specific language governing permissions and limitations | |
| // under the License. | |
| <template> | |
| <div class="form-layout" v-ctrl-enter="handleSubmit"> | |
| <a-spin :spinning="loading"> | |
| <a-form | |
| :ref="formRef" | |
| :model="form" | |
| :rules="rules" | |
| @finish="handleSubmit" | |
| layout="vertical"> | |
| <a-form-item name="name" ref="name"> | |
| <template #label> | |
| <tooltip-label :title="$t('label.name')" :tooltip="apiParams.name.description"/> | |
| </template> | |
| <a-input | |
| v-model:value="form.name" | |
| :placeholder="apiParams.name.description" | |
| v-focus="true" /> | |
| </a-form-item> | |
| <a-form-item name="description" ref="description"> | |
| <template #label> | |
| <tooltip-label :title="$t('label.description')" :tooltip="apiParams.description.description"/> | |
| </template> | |
| <a-input | |
| v-model:value="form.description" | |
| :placeholder="apiParams.description.description"/> | |
| </a-form-item> | |
| <a-form-item name="zoneid" ref="zoneid"> | |
| <template #label> | |
| <tooltip-label :title="$t('label.zoneid')" :tooltip="apiParams.zoneid.description"/> | |
| </template> | |
| <a-select | |
| id="zone-selection" | |
| v-model:value="form.zoneid" | |
| showSearch | |
| optionFilterProp="label" | |
| :filterOption="(input, option) => { | |
| return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 | |
| }" | |
| :loading="zoneLoading" | |
| :placeholder="apiParams.zoneid.description" | |
| @change="val => { handleZoneChange(this.zones[val]) }"> | |
| <a-select-option v-for="(opt, optIndex) in zones" :key="optIndex" :label="opt.name || opt.description"> | |
| <span> | |
| <resource-icon v-if="opt.icon" :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/> | |
| <global-outlined v-else style="margin-right: 5px" /> | |
| {{ opt.name || opt.description }} | |
| </span> | |
| </a-select-option> | |
| </a-select> | |
| </a-form-item> | |
| <ownership-selection v-if="isAdmin()" @fetch-owner="fetchOwnerOptions"/> | |
| <a-form-item ref="hypervisor" name="hypervisor"> | |
| <template #label> | |
| <tooltip-label :title="$t('label.hypervisor')" :tooltip="apiParams.hypervisor.description"/> | |
| </template> | |
| <a-select | |
| v-model:value="form.hypervisor" | |
| :loading="hypervisorLoading" | |
| :placeholder="apiParams.hypervisor.description" | |
| showSearch | |
| optionFilterProp="label" | |
| @change="val => { handleZoneHypervisorChange(val) }"> | |
| :filterOption="(input, option) => { | |
| return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 | |
| }" > | |
| <a-select-option v-for="(opt, optIndex) in selectedZoneHypervisors" :key="optIndex" :label="opt.name || opt.description"> | |
| {{ opt.name || opt.description }} | |
| </a-select-option> | |
| </a-select> | |
| </a-form-item> | |
| <a-form-item name="kubernetesversionid" ref="kubernetesversionid"> | |
| <template #label> | |
| <tooltip-label :title="$t('label.kubernetesversionid')" :tooltip="apiParams.kubernetesversionid.description"/> | |
| </template> | |
| <a-select | |
| id="version-selection" | |
| v-model:value="form.kubernetesversionid" | |
| showSearch | |
| optionFilterProp="label" | |
| :filterOption="(input, option) => { | |
| return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 | |
| }" | |
| :loading="kubernetesVersionLoading" | |
| :placeholder="apiParams.kubernetesversionid.description" | |
| @change="val => { handleKubernetesVersionChange(kubernetesVersions[val]) }"> | |
| <a-select-option v-for="(opt, optIndex) in kubernetesVersions" :key="optIndex" :label="opt.name || opt.description"> | |
| {{ opt.name || opt.description }} | |
| </a-select-option> | |
| </a-select> | |
| </a-form-item> | |
| <a-form-item name="serviceofferingid" ref="serviceofferingid"> | |
| <template #label> | |
| <tooltip-label :title="$t('label.serviceofferingid')" :tooltip="apiParams.serviceofferingid.description"/> | |
| </template> | |
| <a-select | |
| id="offering-selection" | |
| v-model:value="form.serviceofferingid" | |
| showSearch | |
| optionFilterProp="label" | |
| :filterOption="(input, option) => { | |
| return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 | |
| }" | |
| :loading="serviceOfferingLoading" | |
| :placeholder="apiParams.serviceofferingid.description"> | |
| <a-select-option v-for="(opt, optIndex) in serviceOfferings" :key="optIndex" :label="opt.name || opt.description"> | |
| {{ opt.name || opt.description }} | |
| </a-select-option> | |
| </a-select> | |
| </a-form-item> | |
| <a-form-item name="noderootdisksize" ref="noderootdisksize"> | |
| <template #label> | |
| <tooltip-label :title="$t('label.noderootdisksize')" :tooltip="apiParams.noderootdisksize.description"/> | |
| </template> | |
| <a-input | |
| v-model:value="form.noderootdisksize" | |
| :placeholder="apiParams.noderootdisksize.description"/> | |
| </a-form-item> | |
| <a-form-item name="networkid" ref="networkid"> | |
| <template #label> | |
| <tooltip-label :title="$t('label.networkid')" :tooltip="apiParams.networkid.description"/> | |
| </template> | |
| <a-select | |
| id="network-selection" | |
| v-model:value="form.networkid" | |
| showSearch | |
| optionFilterProp="label" | |
| :filterOption="(input, option) => { | |
| return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 | |
| }" | |
| :loading="networkLoading" | |
| :placeholder="apiParams.networkid.description"> | |
| <a-select-option v-for="(opt, optIndex) in networks" :key="optIndex" :label="opt.name || opt.description"> | |
| {{ opt.name || opt.description }} | |
| </a-select-option> | |
| </a-select> | |
| </a-form-item> | |
| <a-form-item name="haenable" ref="haenable" v-if="selectedKubernetesVersion != null && selectedKubernetesVersion !== undefined && selectedKubernetesVersion.supportsha === true"> | |
| <template #label> | |
| <tooltip-label :title="$t('label.haenable')" :tooltip="apiParams.haenable?.description || ''"/> | |
| </template> | |
| <a-switch v-model:checked="form.haenable" /> | |
| </a-form-item> | |
| <a-form-item v-if="form.haenable" name="controlnodes" ref="controlnodes"> | |
| <template #label> | |
| <tooltip-label :title="$t('label.controlnodes')" :tooltip="apiParams.controlnodes.description"/> | |
| </template> | |
| <a-input | |
| v-model:value="form.controlnodes" | |
| :placeholder="apiParams.controlnodes.description"/> | |
| </a-form-item> | |
| <a-form-item v-if="form.haenable && !selectedZone.isnsxenabled" name="externalloadbalanceripaddress" ref="externalloadbalanceripaddress"> | |
| <template #label> | |
| <tooltip-label :title="$t('label.externalloadbalanceripaddress')" :tooltip="apiParams.externalloadbalanceripaddress.description"/> | |
| </template> | |
| <a-input | |
| v-model:value="form.externalloadbalanceripaddress" | |
| :placeholder="apiParams.externalloadbalanceripaddress.description"/> | |
| </a-form-item> | |
| <a-form-item name="size" ref="size"> | |
| <template #label> | |
| <tooltip-label :title="$t('label.cks.cluster.size')" :tooltip="apiParams.size.description"/> | |
| </template> | |
| <a-input | |
| v-model:value="form.size" | |
| :placeholder="apiParams.size.description"/> | |
| </a-form-item> | |
| <a-form-item name="keypair" ref="keypair"> | |
| <template #label> | |
| <tooltip-label :title="$t('label.keypair')" :tooltip="apiParams.keypair.description"/> | |
| </template> | |
| <a-select | |
| id="keypair-selection" | |
| v-model:value="form.keypair" | |
| showSearch | |
| optionFilterProp="label" | |
| :filterOption="(input, option) => { | |
| return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 | |
| }" | |
| :loading="keyPairLoading" | |
| :placeholder="apiParams.keypair.description"> | |
| <a-select-option v-for="(opt, optIndex) in keyPairs" :key="optIndex" :label="opt.name || opt.description"> | |
| {{ opt.name || opt.description }} | |
| </a-select-option> | |
| </a-select> | |
| </a-form-item> | |
| <!-- Advanced configurations --> | |
| <a-form-item name="advancedmode" ref="advancedmode"> | |
| <template #label> | |
| <tooltip-label :title="$t('label.isadvanced')" /> | |
| </template> | |
| <a-switch v-model:checked="form.advancedmode" /> | |
| </a-form-item> | |
| <a-form-item v-if="form.advancedmode" name="enablecsi" ref="enablecsi" :label="$t('label.enable.csi')"> | |
| <template #label> | |
| <tooltip-label :title="$t('label.enable.csi')" :tooltip="apiParams.enablecsi.description"/> | |
| </template> | |
| <a-switch v-model:checked="form.enablecsi" /> | |
| </a-form-item> | |
| <a-form-item v-if="form.advancedmode" name="controlofferingid" ref="controlofferingid"> | |
| <template #label> | |
| <tooltip-label :title="$t('label.cks.cluster.control.nodes.offeringid')" :tooltip="$t('label.cks.cluster.control.nodes.offeringid')"/> | |
| </template> | |
| <a-select | |
| id="control-offering-selection" | |
| v-model:value="form.controlofferingid" | |
| showSearch | |
| optionFilterProp="label" | |
| :filterOption="(input, option) => { | |
| return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 | |
| }" | |
| :loading="serviceOfferingLoading" | |
| :placeholder="$t('label.cks.cluster.control.nodes.offeringid')"> | |
| <a-select-option v-for="(opt, optIndex) in serviceOfferings" :key="optIndex" :label="opt.name || opt.description"> | |
| {{ opt.name || opt.description }} | |
| </a-select-option> | |
| </a-select> | |
| </a-form-item> | |
| <a-form-item v-if="form.advancedmode" name="controltemplateid" ref="controltemplateid"> | |
| <template #label> | |
| <tooltip-label :title="$t('label.cks.cluster.control.nodes.templateid')" :tooltip="$t('label.cks.cluster.control.nodes.templateid')"/> | |
| </template> | |
| <a-select | |
| id="control-template-selection" | |
| v-model:value="form.controltemplateid" | |
| showSearch | |
| optionFilterProp="label" | |
| :filterOption="(input, option) => { | |
| return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 | |
| }" | |
| :loading="serviceOfferingLoading" | |
| :placeholder="$t('label.cks.cluster.control.nodes.templateid')"> | |
| <a-select-option v-for="(opt, optIndex) in templates" :key="optIndex" :label="opt.name || opt.description"> | |
| {{ opt.name || opt.description }} | |
| </a-select-option> | |
| </a-select> | |
| </a-form-item> | |
| <a-form-item v-if="form.advancedmode" name="workerofferingid" ref="workerofferingid"> | |
| <template #label> | |
| <tooltip-label :title="$t('label.cks.cluster.worker.nodes.offeringid')" :tooltip="$t('label.cks.cluster.worker.nodes.offeringid')"/> | |
| </template> | |
| <a-select | |
| id="worker-offering-selection" | |
| v-model:value="form.workerofferingid" | |
| showSearch | |
| optionFilterProp="label" | |
| :filterOption="(input, option) => { | |
| return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 | |
| }" | |
| :loading="serviceOfferingLoading" | |
| :placeholder="$t('label.cks.cluster.worker.nodes.offeringid')"> | |
| <a-select-option v-for="(opt, optIndex) in serviceOfferings" :key="optIndex" :label="opt.name || opt.description"> | |
| {{ opt.name || opt.description }} | |
| </a-select-option> | |
| </a-select> | |
| </a-form-item> | |
| <a-form-item v-if="form.advancedmode" name="workertemplateid" ref="workertemplateid"> | |
| <template #label> | |
| <tooltip-label :title="$t('label.cks.cluster.worker.nodes.templateid')" :tooltip="$t('label.cks.cluster.worker.nodes.templateid')"/> | |
| </template> | |
| <a-select | |
| id="worker-template-selection" | |
| v-model:value="form.workertemplateid" | |
| showSearch | |
| optionFilterProp="label" | |
| :filterOption="(input, option) => { | |
| return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 | |
| }" | |
| :loading="serviceOfferingLoading" | |
| :placeholder="$t('label.cks.cluster.worker.nodes.templateid')"> | |
| <a-select-option v-for="(opt, optIndex) in templates" :key="optIndex" :label="opt.name || opt.description"> | |
| {{ opt.name || opt.description }} | |
| </a-select-option> | |
| </a-select> | |
| </a-form-item> | |
| <a-form-item v-if="form.advancedmode" name="etcdnodes" ref="etcdnodes"> | |
| <template #label> | |
| <tooltip-label :title="$t('label.cks.cluster.etcd.nodes')" :tooltip="apiParams.etcdnodes.description"/> | |
| </template> | |
| <a-input | |
| v-model:value="form.etcdnodes" | |
| :placeholder="apiParams.etcdnodes.description"/> | |
| </a-form-item> | |
| <a-form-item v-if="form.advancedmode && form.etcdnodes && form.etcdnodes > 0" name="etcdofferingid" ref="etcdofferingid"> | |
| <template #label> | |
| <tooltip-label :title="$t('label.cks.cluster.etcd.nodes.offeringid')" :tooltip="$t('label.cks.cluster.etcd.nodes.offeringid')"/> | |
| </template> | |
| <a-select | |
| id="etcd-offering-selection" | |
| v-model:value="form.etcdofferingid" | |
| showSearch | |
| optionFilterProp="label" | |
| :filterOption="(input, option) => { | |
| return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 | |
| }" | |
| :loading="serviceOfferingLoading" | |
| :placeholder="$t('label.cks.cluster.etcd.nodes.offeringid')"> | |
| <a-select-option v-for="(opt, optIndex) in serviceOfferings" :key="optIndex" :label="opt.name || opt.description"> | |
| {{ opt.name || opt.description }} | |
| </a-select-option> | |
| </a-select> | |
| </a-form-item> | |
| <a-form-item v-if="form.advancedmode && form.etcdnodes && form.etcdnodes > 0" name="etcdtemplateid" ref="etcdtemplateid"> | |
| <template #label> | |
| <tooltip-label :title="$t('label.cks.cluster.etcd.nodes.templateid')" :tooltip="$t('label.cks.cluster.etcd.nodes.templateid')"/> | |
| </template> | |
| <a-select | |
| id="etcd-template-selection" | |
| v-model:value="form.etcdtemplateid" | |
| showSearch | |
| optionFilterProp="label" | |
| :filterOption="(input, option) => { | |
| return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 | |
| }" | |
| :loading="serviceOfferingLoading" | |
| :placeholder="$t('label.cks.cluster.etcd.nodes.templateid')"> | |
| <a-select-option v-for="(opt, optIndex) in templates" :key="optIndex" :label="opt.name || opt.description"> | |
| {{ opt.name || opt.description }} | |
| </a-select-option> | |
| </a-select> | |
| </a-form-item> | |
| <a-form-item v-if="form.advancedmode" name="controlaffinitygroupids" ref="controlaffinitygroupids"> | |
| <template #label> | |
| <tooltip-label :title="$t('label.cks.cluster.control.nodes.affinitygroupid')" :tooltip="$t('label.cks.cluster.control.nodes.affinitygroupid')"/> | |
| </template> | |
| <a-select | |
| v-model:value="controlAffinityGroups" | |
| mode="multiple" | |
| showSearch | |
| optionFilterProp="label" | |
| :filterOption="(input, option) => option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0" | |
| :loading="affinityGroupLoading" | |
| :placeholder="$t('label.cks.cluster.control.nodes.affinitygroupid')"> | |
| <a-select-option v-for="opt in affinityGroups" :key="opt.id" :label="opt.name"> | |
| {{ opt.name }} | |
| </a-select-option> | |
| </a-select> | |
| </a-form-item> | |
| <a-form-item v-if="form.advancedmode" name="workeraffinitygroupids" ref="workeraffinitygroupids"> | |
| <template #label> | |
| <tooltip-label :title="$t('label.cks.cluster.worker.nodes.affinitygroupid')" :tooltip="$t('label.cks.cluster.worker.nodes.affinitygroupid')"/> | |
| </template> | |
| <a-select | |
| v-model:value="workerAffinityGroups" | |
| mode="multiple" | |
| showSearch | |
| optionFilterProp="label" | |
| :filterOption="(input, option) => option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0" | |
| :loading="affinityGroupLoading" | |
| :placeholder="$t('label.cks.cluster.worker.nodes.affinitygroupid')"> | |
| <a-select-option v-for="opt in affinityGroups" :key="opt.id" :label="opt.name"> | |
| {{ opt.name }} | |
| </a-select-option> | |
| </a-select> | |
| </a-form-item> | |
| <a-form-item v-if="form.advancedmode && form.etcdnodes && form.etcdnodes > 0" name="etcdaffinitygroupids" ref="etcdaffinitygroupids"> | |
| <template #label> | |
| <tooltip-label :title="$t('label.cks.cluster.etcd.nodes.affinitygroupid')" :tooltip="$t('label.cks.cluster.etcd.nodes.affinitygroupid')"/> | |
| </template> | |
| <a-select | |
| v-model:value="etcdAffinityGroups" | |
| mode="multiple" | |
| showSearch | |
| optionFilterProp="label" | |
| :filterOption="(input, option) => option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0" | |
| :loading="affinityGroupLoading" | |
| :placeholder="$t('label.cks.cluster.etcd.nodes.affinitygroupid')"> | |
| <a-select-option v-for="opt in affinityGroups" :key="opt.id" :label="opt.name"> | |
| {{ opt.name }} | |
| </a-select-option> | |
| </a-select> | |
| </a-form-item> | |
| <a-form-item v-if="form.advancedmode && isASNumberRequired() && !form.networkid" name="asnumber" ref="asnumber"> | |
| <template #label> | |
| <tooltip-label :title="$t('label.asnumber')" :tooltip="apiParams.asnumber.description"/> | |
| </template> | |
| <a-select | |
| v-model:value="form.asnumber" | |
| showSearch | |
| optionFilterProp="label" | |
| :filterOption="(input, option) => { | |
| return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 | |
| }" | |
| :loading="asNumberLoading" | |
| :placeholder="apiParams.asnumber.description" | |
| @change="val => { handleASNumberChange(val) }"> | |
| <a-select-option v-for="(opt, optIndex) in asNumbersZone" :key="optIndex" :label="opt.asnumber"> | |
| {{ opt.asnumber }} | |
| </a-select-option> | |
| </a-select> | |
| </a-form-item> | |
| <a-form-item v-if="form.advancedmode" name="cniconfigurationid" ref="cniconfigurationid"> | |
| <template #label> | |
| <tooltip-label :title="$t('label.cniconfiguration')" :tooltip="$t('label.cniconfiguration')"/> | |
| </template> | |
| <user-data-selection | |
| :items="cniConfigurationData" | |
| :row-count="cniConfigurationData.length" | |
| :zoneId="zoneId" | |
| :loading="cniConfigLoading" | |
| :preFillContent="dataPreFill" | |
| :showSearch="false" | |
| @select-user-data-item="($event) => updateCniConfig($event)" | |
| @handle-search-filter="($event) => handleSearchFilter('userData', $event)" | |
| /> | |
| <div v-if="cniConfigParams.length > 0"> | |
| <a-input-group> | |
| <a-table | |
| size="small" | |
| style="overflow-y: auto" | |
| :columns="userDataParamCols" | |
| :dataSource="cniConfigParams" | |
| :pagination="false" | |
| :rowKey="record => record.key"> | |
| <template #bodyCell="{ column, record }"> | |
| <template v-if="column.key === 'value'"> | |
| <div v-if="record.key === 'AS_NUMBER'"> | |
| <a-input style="width: 100%;text-wrap: wrap;" :disabled="true" value="Value is obtained from the network or is automatically obtained at the time of cluster creation" /> | |
| </div> | |
| <a-input v-else v-model:value="cniConfigValues[record.key]" /> | |
| </template> | |
| </template> | |
| </a-table> | |
| </a-input-group> | |
| </div> | |
| </a-form-item> | |
| <!-- Experimentation Features --> | |
| <div v-if="$store.getters.features.kubernetesclusterexperimentalfeaturesenabled"> | |
| <a-form-item name="privateregistry" ref="privateregistry" :label="$t('label.private.registry')"> | |
| <template #label> | |
| <tooltip-label :title="$t('label.private.registry')" :tooltip="apiParams.keprivateregistryypair.description"/> | |
| </template> | |
| <a-switch v-model:checked="form.privateregistry" /> | |
| </a-form-item> | |
| <div v-if="form.privateregistry"> | |
| <a-form-item name="dockerregistryusername" ref="dockerregistryusername"> | |
| <template #label> | |
| <tooltip-label :title="$t('label.username')" :tooltip="apiParams.dockerregistryusername.description"/> | |
| </template> | |
| <a-input | |
| v-model:value="form.dockerregistryusername" | |
| :placeholder="apiParams.dockerregistryusername.description"/> | |
| </a-form-item> | |
| <a-form-item name="dockerregistrypassword" ref="dockerregistrypassword"> | |
| <template #label> | |
| <tooltip-label :title="$t('label.password')" :tooltip="apiParams.dockerregistrypassword.description"/> | |
| </template> | |
| <a-input-password | |
| v-model:value="form.dockerregistrypassword" | |
| :placeholder="apiParams.dockerregistrypassword.description"/> | |
| </a-form-item> | |
| <a-form-item name="dockerregistryurl" ref="dockerregistryurl"> | |
| <template #label> | |
| <tooltip-label :title="$t('label.url')" :tooltip="apiParams.dockerregistryurl.description"/> | |
| </template> | |
| <a-input | |
| v-model:value="form.dockerregistryurl" | |
| :placeholder="apiParams.dockerregistryurl.description"/> | |
| </a-form-item> | |
| </div> | |
| </div> | |
| <div :span="24" class="action-button"> | |
| <a-button @click="closeAction">{{ $t('label.cancel') }}</a-button> | |
| <a-button :loading="loading" ref="submit" type="primary" @click="handleSubmit">{{ $t('label.ok') }}</a-button> | |
| </div> | |
| </a-form> | |
| </a-spin> | |
| </div> | |
| </template> | |
| <script> | |
| import { ref, reactive, toRaw } from 'vue' | |
| import { getAPI, postAPI } from '@/api' | |
| import { mixinForm } from '@/utils/mixin' | |
| import ResourceIcon from '@/components/view/ResourceIcon' | |
| import TooltipLabel from '@/components/widgets/TooltipLabel' | |
| import UserDataSelection from '@views/compute/wizard/UserDataSelection' | |
| import OwnershipSelection from '@/views/compute/wizard/OwnershipSelection' | |
| export default { | |
| name: 'CreateKubernetesCluster', | |
| mixins: [mixinForm], | |
| components: { | |
| TooltipLabel, | |
| ResourceIcon, | |
| UserDataSelection, | |
| OwnershipSelection | |
| }, | |
| props: {}, | |
| data () { | |
| return { | |
| zones: [], | |
| zoneLoading: false, | |
| selectedZone: {}, | |
| kubernetesVersions: [], | |
| kubernetesVersionLoading: false, | |
| selectedKubernetesVersion: {}, | |
| serviceOfferings: [], | |
| serviceOfferingLoading: false, | |
| networks: [], | |
| networkLoading: false, | |
| keyPairs: [], | |
| keyPairLoading: false, | |
| loading: false, | |
| templates: [], | |
| templateLoading: false, | |
| selectedZoneHypervisors: [], | |
| hypervisorLoading: false, | |
| configLoading: false, | |
| cniConfigurationData: [], | |
| cniConfigLoading: false, | |
| cniConfigParams: [], | |
| cniConfigValues: {}, | |
| userDataParamCols: [ | |
| { | |
| title: this.$t('label.key'), | |
| dataIndex: 'key' | |
| }, | |
| { | |
| title: this.$t('label.value'), | |
| dataIndex: 'value', | |
| key: 'value' | |
| } | |
| ], | |
| cksNetworkOfferingName: null, | |
| cksNetworkOffering: null, | |
| asNumbersZone: [], | |
| asNumberLoading: false, | |
| selectedAsNumber: 0, | |
| affinityGroups: [], | |
| affinityGroupLoading: false, | |
| controlAffinityGroups: [], | |
| workerAffinityGroups: [], | |
| etcdAffinityGroups: [], | |
| owner: {} | |
| } | |
| }, | |
| beforeCreate () { | |
| this.apiParams = this.$getApiParams('createKubernetesCluster') | |
| }, | |
| created () { | |
| this.emptyEntry = { | |
| id: null, | |
| name: '' | |
| } | |
| this.networks = [this.emptyEntry] | |
| this.keyPairs = [this.emptyEntry] | |
| this.initForm() | |
| this.fetchData() | |
| }, | |
| methods: { | |
| initForm () { | |
| this.formRef = ref() | |
| this.form = reactive({ | |
| controlnodes: 3, | |
| size: 1, | |
| noderootdisksize: 8, | |
| hypervisor: null | |
| }) | |
| this.rules = reactive({ | |
| name: [{ required: true, message: this.$t('message.error.kubecluster.name') }], | |
| zoneid: [{ required: true, message: this.$t('message.error.zone.for.cluster') }], | |
| kubernetesversionid: [{ required: true, message: this.$t('message.error.version.for.cluster') }], | |
| serviceofferingid: [{ required: true, message: this.$t('message.error.serviceoffering.for.cluster') }], | |
| noderootdisksize: [ | |
| { | |
| validator: async (rule, value) => { | |
| if (value && (isNaN(value) || value < 8)) { | |
| return Promise.reject(this.$t('message.validate.min').replace('{0}', '8GB')) | |
| } | |
| return Promise.resolve() | |
| } | |
| } | |
| ], | |
| size: [ | |
| { | |
| required: true, | |
| message: this.$t('message.error.size.for.cluster') | |
| }, | |
| { type: 'number', validator: this.validateNumber } | |
| ], | |
| dockerregistryusername: [{ required: true, message: this.$t('label.required') }], | |
| dockerregistrypassword: [{ required: true, message: this.$t('label.required') }], | |
| dockerregistryurl: [{ required: true, message: this.$t('label.required') }], | |
| controlnodes: [ | |
| { required: true, message: this.$t('message.error.input.value') }, | |
| { | |
| validator: async (rule, value) => { | |
| if (value && (isNaN(value) || value < 2)) { | |
| return Promise.reject(this.$t('message.validate.number')) | |
| } | |
| return Promise.resolve() | |
| } | |
| } | |
| ] | |
| }) | |
| }, | |
| fetchData () { | |
| this.fetchZoneData() | |
| if (!this.isAdmin()) { | |
| this.fetchKeyPairData() | |
| } | |
| this.fetchCksTemplates() | |
| this.fetchCKSNetworkOfferingName() | |
| this.fetchCniConfigurations() | |
| }, | |
| fetchAffinityGroups () { | |
| this.affinityGroups = [] | |
| this.controlAffinityGroups = [] | |
| this.workerAffinityGroups = [] | |
| this.etcdAffinityGroups = [] | |
| const params = {} | |
| if (!this.isObjectEmpty(this.selectedZone)) { | |
| params.zoneid = this.selectedZone.id | |
| } | |
| if (this.owner.account) { | |
| params.account = this.owner.account | |
| params.domainid = this.owner.domainid | |
| } else if (this.owner.projectid) { | |
| params.projectid = this.owner.projectid | |
| } | |
| this.affinityGroupLoading = true | |
| getAPI('listAffinityGroups', params).then(json => { | |
| const groups = json.listaffinitygroupsresponse.affinitygroup | |
| if (this.arrayHasItems(groups)) { | |
| this.affinityGroups = groups.filter(group => group.type !== 'ExplicitDedication') | |
| } | |
| }).finally(() => { | |
| this.affinityGroupLoading = false | |
| }) | |
| }, | |
| isValidValueForKey (obj, key) { | |
| return key in obj && obj[key] != null | |
| }, | |
| isASNumberRequired () { | |
| return !this.isObjectEmpty(this.cksNetworkOffering) && this.cksNetworkOffering.specifyasnumber && this.cksNetworkOffering.routingmode && this.cksNetworkOffering.routingmode.toLowerCase() === 'dynamic' | |
| }, | |
| arrayHasItems (array) { | |
| return array !== null && array !== undefined && Array.isArray(array) && array.length > 0 | |
| }, | |
| isObjectEmpty (obj) { | |
| return !(obj !== null && obj !== undefined && Object.keys(obj).length > 0 && obj.constructor === Object) | |
| }, | |
| isUserAllowedToListCniConfig () { | |
| console.log(Boolean('listCniConfiguration' in this.$store.getters.apis)) | |
| return Boolean('listCniConfiguration' in this.$store.getters.apis) | |
| }, | |
| fetchZoneData () { | |
| const params = {} | |
| this.zoneLoading = true | |
| params.showicon = true | |
| getAPI('listZones', params).then(json => { | |
| var listZones = json.listzonesresponse.zone | |
| if (listZones) { | |
| listZones = listZones.filter(x => x.allocationstate === 'Enabled') | |
| this.zones = this.zones.concat(listZones) | |
| } | |
| }).finally(() => { | |
| this.zoneLoading = false | |
| if (this.arrayHasItems(this.zones)) { | |
| this.form.zoneid = 0 | |
| this.handleZoneChange(this.zones[0]) | |
| } | |
| }) | |
| }, | |
| handleZoneChange (zone) { | |
| this.selectedZone = zone | |
| this.fetchKubernetesVersionData() | |
| this.fetchZoneHypervisors() | |
| this.fetchZoneASNumbers() | |
| if (!this.isAdmin()) { | |
| this.fetchNetworkData() | |
| this.fetchAffinityGroups() | |
| } | |
| }, | |
| handleASNumberChange (selectedIndex) { | |
| this.selectedAsNumber = this.asNumbersZone[selectedIndex].asnumber | |
| this.form.asnumber = this.selectedAsNumber | |
| }, | |
| fetchKubernetesVersionData () { | |
| this.kubernetesVersions = [] | |
| const params = {} | |
| if (!this.isObjectEmpty(this.selectedZone)) { | |
| params.zoneid = this.selectedZone.id | |
| } | |
| this.kubernetesVersionLoading = true | |
| getAPI('listKubernetesSupportedVersions', params).then(json => { | |
| const versionObjs = json.listkubernetessupportedversionsresponse.kubernetessupportedversion | |
| if (this.arrayHasItems(versionObjs)) { | |
| for (var i = 0; i < versionObjs.length; i++) { | |
| if (versionObjs[i].state === 'Enabled' && versionObjs[i].isostate === 'Ready') { | |
| this.kubernetesVersions.push(versionObjs[i]) | |
| } | |
| } | |
| } | |
| }).finally(() => { | |
| this.kubernetesVersionLoading = false | |
| if (this.arrayHasItems(this.kubernetesVersions)) { | |
| this.form.kubernetesversionid = 0 | |
| this.handleKubernetesVersionChange(this.kubernetesVersions[0]) | |
| } | |
| }) | |
| }, | |
| handleKubernetesVersionChange (version) { | |
| this.selectedKubernetesVersion = version | |
| this.fetchServiceOfferingData() | |
| }, | |
| fetchServiceOfferingData () { | |
| this.serviceOfferings = [] | |
| const params = {} | |
| this.serviceOfferingLoading = true | |
| getAPI('listServiceOfferings', params).then(json => { | |
| var items = json.listserviceofferingsresponse.serviceoffering | |
| var minCpu = 2 | |
| var minMemory = 2048 | |
| if (!this.isObjectEmpty(this.selectedKubernetesVersion)) { | |
| minCpu = this.selectedKubernetesVersion.mincpunumber | |
| minMemory = this.selectedKubernetesVersion.minmemory | |
| } | |
| if (items != null) { | |
| for (var i = 0; i < items.length; i++) { | |
| if (items[i].iscustomized === false && | |
| items[i].cpunumber >= minCpu && items[i].memory >= minMemory) { | |
| this.serviceOfferings.push(items[i]) | |
| } | |
| } | |
| } | |
| }).finally(() => { | |
| this.serviceOfferingLoading = false | |
| if (this.arrayHasItems(this.serviceOfferings)) { | |
| this.form.serviceofferingid = 0 | |
| this.form.controlofferingid = undefined | |
| this.form.workerofferingid = undefined | |
| this.form.etcdofferingid = undefined | |
| } | |
| }) | |
| }, | |
| isAdmin () { | |
| return this.$store.getters.userInfo.roletype === 'Admin' | |
| }, | |
| isAdminOrDomainAdmin () { | |
| return ['Admin', 'DomainAdmin'].includes(this.$store.getters.userInfo.roletype) | |
| }, | |
| fetchOwnerOptions (ownerOptions) { | |
| this.owner = {} | |
| if (ownerOptions.selectedAccountType === 'Account') { | |
| if (!ownerOptions.selectedAccount) { | |
| return | |
| } | |
| this.owner.account = ownerOptions.selectedAccount | |
| this.owner.domainid = ownerOptions.selectedDomain | |
| } else if (ownerOptions.selectedAccountType === 'Project') { | |
| if (!ownerOptions.selectedProject) { | |
| return | |
| } | |
| this.owner.projectid = ownerOptions.selectedProject | |
| } | |
| this.fetchNetworkData() | |
| this.fetchKeyPairData() | |
| this.fetchAffinityGroups() | |
| }, | |
| fetchCksTemplates () { | |
| var filters = [] | |
| if (this.isAdminOrDomainAdmin()) { | |
| filters = ['all'] | |
| } else { | |
| filters = ['self', 'featured', 'community'] | |
| } | |
| var ckstemplates = [] | |
| for (const filtername of filters) { | |
| const params = { | |
| templatefilter: filtername, | |
| forcks: true, | |
| isready: true | |
| } | |
| this.templateLoading = true | |
| getAPI('listTemplates', params).then(json => { | |
| var templates = json?.listtemplatesresponse?.template || [] | |
| ckstemplates.push(...templates) | |
| }).finally(() => { | |
| this.templateLoading = false | |
| }) | |
| } | |
| this.templates = ckstemplates | |
| }, | |
| fetchNetworkData () { | |
| const params = {} | |
| if (!this.isObjectEmpty(this.selectedZone)) { | |
| params.zoneid = this.selectedZone.id | |
| } | |
| if (this.owner.account) { | |
| params.account = this.owner.account | |
| params.domainid = this.owner.domainid | |
| } else if (this.owner.projectid) { | |
| params.projectid = this.owner.projectid | |
| } | |
| this.networkLoading = true | |
| this.networks = [] | |
| getAPI('listNetworks', params).then(json => { | |
| var listNetworks = json.listnetworksresponse.network | |
| if (this.arrayHasItems(listNetworks)) { | |
| listNetworks = listNetworks.filter(n => n.type !== 'L2') | |
| this.networks = listNetworks | |
| } | |
| }).finally(() => { | |
| this.networkLoading = false | |
| this.networks = [this.emptyEntry].concat(this.networks) | |
| if (this.arrayHasItems(this.networks)) { | |
| this.form.networkid = 0 | |
| } | |
| }) | |
| }, | |
| fetchKeyPairData () { | |
| const params = {} | |
| if (this.owner.account) { | |
| params.account = this.owner.account | |
| params.domainid = this.owner.domainid | |
| } else if (this.owner.projectid) { | |
| params.projectid = this.owner.projectid | |
| } | |
| this.keyPairLoading = true | |
| this.keyPairs = [this.emptyEntry] | |
| getAPI('listSSHKeyPairs', params).then(json => { | |
| const listKeyPairs = json.listsshkeypairsresponse.sshkeypair | |
| if (this.arrayHasItems(listKeyPairs)) { | |
| for (var i = 0; i < listKeyPairs.length; i++) { | |
| this.keyPairs.push({ | |
| id: listKeyPairs[i].name, | |
| description: listKeyPairs[i].name | |
| }) | |
| } | |
| } | |
| }).finally(() => { | |
| this.keyPairLoading = false | |
| if (this.arrayHasItems(this.keyPairs)) { | |
| this.form.keypair = 0 | |
| } | |
| }) | |
| }, | |
| fetchZoneHypervisors () { | |
| const params = { | |
| zoneid: this.selectedZone.id | |
| } | |
| this.hypervisorLoading = true | |
| getAPI('listHypervisors', params).then(json => { | |
| const listResponse = json.listhypervisorsresponse.hypervisor || [] | |
| this.selectedZoneHypervisors = listResponse.filter(hypervisor => hypervisor.name !== 'External') | |
| }).finally(() => { | |
| this.hypervisorLoading = false | |
| }) | |
| }, | |
| handleZoneHypervisorChange (index) { | |
| this.form.hypervisor = index | |
| }, | |
| fetchCKSNetworkOfferingName () { | |
| const params = { | |
| name: 'cloud.kubernetes.cluster.network.offering' | |
| } | |
| this.configLoading = true | |
| getAPI('listConfigurations', params).then(json => { | |
| if (json.listconfigurationsresponse.configuration !== null) { | |
| const config = json.listconfigurationsresponse.configuration[0] | |
| if (config && config.name === params.name) { | |
| this.cksNetworkOfferingName = config.value | |
| } | |
| } | |
| }).then(() => { | |
| this.fetchCKSNetworkOffering(this.cksNetworkOfferingName) | |
| }).finally(() => { | |
| this.configLoading = false | |
| }) | |
| }, | |
| fetchCKSNetworkOffering (offeringName) { | |
| return new Promise((resolve, reject) => { | |
| const args = { | |
| name: offeringName | |
| } | |
| getAPI('listNetworkOfferings', args).then(json => { | |
| const listNetworkOfferings = json.listnetworkofferingsresponse.networkoffering || [] | |
| resolve(listNetworkOfferings) | |
| this.cksNetworkOffering = listNetworkOfferings[0] || {} | |
| }).catch(error => { | |
| resolve(error) | |
| }) | |
| }) | |
| }, | |
| fetchZoneASNumbers () { | |
| const params = {} | |
| params.zoneid = this.selectedZone.id | |
| params.isallocated = false | |
| getAPI('listASNumbers', params).then(json => { | |
| this.asNumbersZone = json.listasnumbersresponse.asnumber | |
| }) | |
| }, | |
| fetchCniConfigurations () { | |
| this.cniConfigLoading = true | |
| getAPI('listCniConfiguration', {}).then( | |
| response => { | |
| const listResponse = response.listcniconfigurationresponse.cniconfig || [] | |
| if (listResponse) { | |
| this.cniConfigurationData = listResponse | |
| } | |
| }).finally(() => { | |
| this.cniConfigLoading = false | |
| }) | |
| }, | |
| updateCniConfig (id) { | |
| if (id === '0') { | |
| this.form.cniconfigurationid = undefined | |
| return | |
| } | |
| this.form.cniconfigurationid = id | |
| this.cniConfigParams = [] | |
| getAPI('listCniConfiguration', { id: id }).then(json => { | |
| const resp = json?.listcniconfigurationresponse?.cniconfig || [] | |
| if (resp) { | |
| var params = resp[0].params | |
| if (params) { | |
| var dataParams = params.split(',') | |
| } | |
| var that = this | |
| dataParams.forEach(function (val, index) { | |
| that.cniConfigParams.push({ | |
| id: index, | |
| key: val | |
| }) | |
| }) | |
| } | |
| }) | |
| }, | |
| handleSubmit (e) { | |
| e.preventDefault() | |
| if (this.loading) return | |
| this.formRef.value.validate().then(() => { | |
| const formRaw = toRaw(this.form) | |
| const values = this.handleRemoveFields(formRaw) | |
| this.loading = true | |
| const params = { | |
| name: values.name, | |
| description: values.description, | |
| zoneid: this.zones[values.zoneid].id, | |
| kubernetesversionid: this.kubernetesVersions[values.kubernetesversionid].id, | |
| serviceofferingid: this.serviceOfferings[values.serviceofferingid].id, | |
| size: values.size, | |
| clustertype: 'CloudManaged' | |
| } | |
| if (this.owner.account) { | |
| params.account = this.owner.account | |
| params.domainid = this.owner.domainid | |
| } else if (this.owner.projectid) { | |
| params.projectid = this.owner.projectid | |
| } | |
| if (values.hypervisor !== null) { | |
| params.hypervisor = this.selectedZoneHypervisors[values.hypervisor].name.toLowerCase() | |
| } | |
| var advancedOfferings = 0 | |
| if (this.isValidValueForKey(values, 'advancedmode') && values.advancedmode && this.isValidValueForKey(values, 'controlofferingid') && this.arrayHasItems(this.serviceOfferings) && this.serviceOfferings[values.controlofferingid].id != null) { | |
| params['nodeofferings[' + advancedOfferings + '].node'] = 'control' | |
| params['nodeofferings[' + advancedOfferings + '].offering'] = this.serviceOfferings[values.controlofferingid].id | |
| advancedOfferings++ | |
| } | |
| if (this.isValidValueForKey(values, 'advancedmode') && values.advancedmode && this.isValidValueForKey(values, 'workerofferingid') && this.arrayHasItems(this.serviceOfferings) && this.serviceOfferings[values.workerofferingid].id != null) { | |
| params['nodeofferings[' + advancedOfferings + '].node'] = 'worker' | |
| params['nodeofferings[' + advancedOfferings + '].offering'] = this.serviceOfferings[values.workerofferingid].id | |
| advancedOfferings++ | |
| } | |
| if (this.isValidValueForKey(values, 'advancedmode') && values.advancedmode && this.isValidValueForKey(values, 'etcdnodes') && values.etcdnodes > 0) { | |
| params.etcdnodes = values.etcdnodes | |
| if (this.isValidValueForKey(values, 'etcdofferingid') && this.arrayHasItems(this.serviceOfferings) && this.serviceOfferings[values.etcdofferingid].id != null) { | |
| params['nodeofferings[' + advancedOfferings + '].node'] = 'etcd' | |
| params['nodeofferings[' + advancedOfferings + '].offering'] = this.serviceOfferings[values.etcdofferingid].id | |
| advancedOfferings++ | |
| } | |
| } | |
| var advancedTemplates = 0 | |
| if (this.isValidValueForKey(values, 'advancedmode') && values.advancedmode && this.isValidValueForKey(values, 'controltemplateid') && this.arrayHasItems(this.templates) && this.templates[values.controltemplateid].id != null) { | |
| params['nodetemplates[' + advancedTemplates + '].node'] = 'control' | |
| params['nodetemplates[' + advancedTemplates + '].template'] = this.templates[values.controltemplateid].id | |
| advancedTemplates++ | |
| } | |
| if (this.isValidValueForKey(values, 'advancedmode') && values.advancedmode && this.isValidValueForKey(values, 'workertemplateid') && this.arrayHasItems(this.templates) && this.templates[values.workertemplateid].id != null) { | |
| params['nodetemplates[' + advancedTemplates + '].node'] = 'worker' | |
| params['nodetemplates[' + advancedTemplates + '].template'] = this.templates[values.workertemplateid].id | |
| advancedTemplates++ | |
| } | |
| if (this.isValidValueForKey(values, 'advancedmode') && values.advancedmode && this.isValidValueForKey(values, 'etcdnodes') && values.etcdnodes > 0) { | |
| params.etcdnodes = values.etcdnodes | |
| if (this.isValidValueForKey(values, 'etcdtemplateid') && this.arrayHasItems(this.templates) && this.templates[values.etcdtemplateid].id != null) { | |
| params['nodetemplates[' + advancedTemplates + '].node'] = 'etcd' | |
| params['nodetemplates[' + advancedTemplates + '].template'] = this.templates[values.etcdtemplateid].id | |
| advancedTemplates++ | |
| } | |
| } | |
| if (values.advancedmode) { | |
| let affinityIndex = 0 | |
| const addAffinityGroups = (nodeType, groups) => { | |
| if (groups && groups.length > 0) { | |
| params[`nodeaffinitygroups[${affinityIndex}].node`] = nodeType | |
| params[`nodeaffinitygroups[${affinityIndex}].affinitygroup`] = groups.join(',') | |
| affinityIndex++ | |
| } | |
| } | |
| addAffinityGroups('control', this.controlAffinityGroups) | |
| addAffinityGroups('worker', this.workerAffinityGroups) | |
| if (values.etcdnodes > 0) { | |
| addAffinityGroups('etcd', this.etcdAffinityGroups) | |
| } | |
| } | |
| if (this.isValidValueForKey(values, 'noderootdisksize') && values.noderootdisksize > 0) { | |
| params.noderootdisksize = values.noderootdisksize | |
| } | |
| if (this.isValidValueForKey(values, 'haenable') && values.haenable && | |
| this.isValidValueForKey(values, 'controlnodes') && values.controlnodes > 0) { | |
| params.controlnodes = values.controlnodes | |
| } | |
| if (this.isValidValueForKey(values, 'externalloadbalanceripaddress') && values.externalloadbalanceripaddress !== '') { | |
| params.externalloadbalanceripaddress = values.externalloadbalanceripaddress | |
| } | |
| if (this.isValidValueForKey(values, 'networkid') && this.arrayHasItems(this.networks) && this.networks[values.networkid].id != null) { | |
| params.networkid = this.networks[values.networkid].id | |
| } | |
| if (this.isValidValueForKey(values, 'keypair') && this.arrayHasItems(this.keyPairs) && this.keyPairs[values.keypair].id != null) { | |
| params.keypair = this.keyPairs[values.keypair].id | |
| } | |
| if (values.privateregistry) { | |
| params.dockerregistryusername = values.dockerregistryusername | |
| params.dockerregistrypassword = values.dockerregistrypassword | |
| params.dockerregistryurl = values.dockerregistryurl | |
| } | |
| if (values.cniconfigurationid) { | |
| params.cniconfigurationid = values.cniconfigurationid | |
| } | |
| if (values.enablecsi) { | |
| params.enablecsi = values.enablecsi | |
| } | |
| var idx = 0 | |
| if (this.cniConfigValues) { | |
| for (const [key, value] of Object.entries(this.cniConfigValues)) { | |
| params['cniconfigdetails[' + idx + '].' + `${key}`] = value | |
| idx++ | |
| } | |
| } | |
| if ('asnumber' in values && this.isASNumberRequired()) { | |
| params.asnumber = values.asnumber | |
| } | |
| postAPI('createKubernetesCluster', params).then(json => { | |
| const jobId = json.createkubernetesclusterresponse.jobid | |
| this.$pollJob({ | |
| jobId, | |
| title: this.$t('label.kubernetes.cluster.create'), | |
| description: values.name, | |
| loadingMessage: `${this.$t('label.kubernetes.cluster.create')} ${values.name} ${this.$t('label.in.progress')}`, | |
| catchMessage: this.$t('error.fetching.async.job.result'), | |
| successMessage: this.$t('message.success.create.kubernetes.cluster') + ' ' + values.name | |
| }) | |
| this.closeAction() | |
| }).catch(error => { | |
| this.$notifyError(error) | |
| }).finally(() => { | |
| this.loading = false | |
| }) | |
| }).catch(error => { | |
| this.formRef.value.scrollToField(error.errorFields[0].name) | |
| }) | |
| }, | |
| closeAction () { | |
| this.$emit('close-action') | |
| }, | |
| async validateNumber (rule, value) { | |
| if (value && (isNaN(value) || value <= 0)) { | |
| return Promise.reject(this.$t('message.validate.number')) | |
| } | |
| return Promise.resolve() | |
| } | |
| } | |
| } | |
| </script> | |
| <style scoped lang="less"> | |
| .form-layout { | |
| width: 80vw; | |
| @media (min-width: 700px) { | |
| width: 550px; | |
| } | |
| } | |
| </style> |