mirror of
https://github.com/apache/cloudstack.git
synced 2025-10-26 08:42:29 +01:00
1f1e38f3a8
* Support to list templates in ready state (new API parameter 'isready', similar to list ISOs), and UI to display Templates/ISOs in ready state wherever applicable
957 lines
40 KiB
Vue
957 lines
40 KiB
Vue
// 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>
|
|
<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="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 > 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 && 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'
|
|
|
|
export default {
|
|
name: 'CreateKubernetesCluster',
|
|
mixins: [mixinForm],
|
|
components: {
|
|
TooltipLabel,
|
|
ResourceIcon,
|
|
UserDataSelection
|
|
},
|
|
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
|
|
}
|
|
},
|
|
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()
|
|
this.fetchKeyPairData()
|
|
this.fetchCksTemplates()
|
|
this.fetchCKSNetworkOfferingName()
|
|
this.fetchCniConfigurations()
|
|
},
|
|
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.fetchNetworkData()
|
|
this.fetchZoneHypervisors()
|
|
this.fetchZoneASNumbers()
|
|
},
|
|
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
|
|
}
|
|
})
|
|
},
|
|
isAdminOrDomainAdmin () {
|
|
return ['Admin', 'DomainAdmin'].includes(this.$store.getters.userInfo.roletype)
|
|
},
|
|
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
|
|
}
|
|
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 = {}
|
|
this.keyPairLoading = true
|
|
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 (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 (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
|
|
}
|
|
|
|
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.cluter') + ' ' + 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>
|