mirror of
https://github.com/apache/cloudstack.git
synced 2025-10-26 08:42:29 +01:00
ui: refactor labels with tooltip in forms (#5133)
* ui: refactor labels with tooltip in forms Adds new Vue component TooltipLabel for easier re-use Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com> * changes Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com> * changes Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com> * changes Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com> * changes Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com> * changes Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com> * moved component in widgets Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com> * moved TooltipButton in widgets Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com> * missing change in previous commit Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com> * changes Signed-off-by: Abhishek Kumar <abhishek.kumar@shapeblue.com> * fix Signed-off-by: Abhishek Kumar <abhishek.kumar@shapeblue.com> * form improvements Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com> * tooltip icon class fix Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com> * fix Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com> * Update ui/src/views/storage/UploadLocalVolume.vue Co-authored-by: Pearl Dsilva <pearl1594@gmail.com> * Update ui/src/views/storage/CreateVolume.vue Co-authored-by: davidjumani <dj.davidjumani1994@gmail.com> * fix Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com> Co-authored-by: Pearl Dsilva <pearl1594@gmail.com> Co-authored-by: davidjumani <dj.davidjumani1994@gmail.com>
This commit is contained in:
Abhishek Kumar
GitHub
parent
9678c7bd1e
commit
041948c04f
@ -110,7 +110,7 @@
|
||||
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import TooltipButton from './TooltipButton.vue'
|
||||
import TooltipButton from '@/components/widgets/TooltipButton'
|
||||
|
||||
export default {
|
||||
components: { TooltipButton },
|
||||
|
||||
@ -699,7 +699,7 @@ import { api } from '@/api'
|
||||
import Console from '@/components/widgets/Console'
|
||||
import OsLogo from '@/components/widgets/OsLogo'
|
||||
import Status from '@/components/widgets/Status'
|
||||
import TooltipButton from '@/components/view/TooltipButton'
|
||||
import TooltipButton from '@/components/widgets/TooltipButton'
|
||||
|
||||
export default {
|
||||
name: 'InfoCard',
|
||||
|
||||
@ -326,7 +326,7 @@ import OsLogo from '@/components/widgets/OsLogo'
|
||||
import Status from '@/components/widgets/Status'
|
||||
import InfoCard from '@/components/view/InfoCard'
|
||||
import QuickView from '@/components/view/QuickView'
|
||||
import TooltipButton from '@/components/view/TooltipButton'
|
||||
import TooltipButton from '@/components/widgets/TooltipButton'
|
||||
|
||||
export default {
|
||||
name: 'ListView',
|
||||
|
||||
@ -112,7 +112,7 @@
|
||||
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import TooltipButton from '@/components/view/TooltipButton'
|
||||
import TooltipButton from '@/components/widgets/TooltipButton'
|
||||
|
||||
export default {
|
||||
name: 'SearchView',
|
||||
|
||||
@ -72,7 +72,7 @@
|
||||
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import TooltipButton from './TooltipButton.vue'
|
||||
import TooltipButton from '@/components/widgets/TooltipButton'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
||||
52
ui/src/components/widgets/TooltipLabel.vue
Normal file
52
ui/src/components/widgets/TooltipLabel.vue
Normal file
@ -0,0 +1,52 @@
|
||||
// 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>
|
||||
<span>
|
||||
{{ title }}
|
||||
<a-tooltip v-if="tooltip" :title="tooltip" :placement="tooltipPlacement">
|
||||
<a-icon type="info-circle" class="tooltip-icon" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'TooltipLabel',
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
tooltip: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
tooltipPlacement: {
|
||||
type: String,
|
||||
default: 'top'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.tooltip-icon {
|
||||
color: rgba(0,0,0,.45);
|
||||
}
|
||||
</style>
|
||||
@ -159,12 +159,7 @@
|
||||
:v-bind="field.name"
|
||||
v-if="!(currentAction.mapping && field.name in currentAction.mapping && currentAction.mapping[field.name].value)"
|
||||
>
|
||||
<span slot="label">
|
||||
{{ $t('label.' + field.name) }}
|
||||
<a-tooltip :title="field.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.' + field.name)" :tooltip="field.description"/>
|
||||
|
||||
<span v-if="field.type==='boolean'">
|
||||
<a-switch
|
||||
@ -352,6 +347,7 @@ import ListView from '@/components/view/ListView'
|
||||
import ResourceView from '@/components/view/ResourceView'
|
||||
import ActionButton from '@/components/view/ActionButton'
|
||||
import SearchView from '@/components/view/SearchView'
|
||||
import TooltipLabel from '@/components/widgets/TooltipLabel'
|
||||
|
||||
export default {
|
||||
name: 'Resource',
|
||||
@ -362,7 +358,8 @@ export default {
|
||||
ListView,
|
||||
Status,
|
||||
ActionButton,
|
||||
SearchView
|
||||
SearchView,
|
||||
TooltipLabel
|
||||
},
|
||||
mixins: [mixinDevice],
|
||||
provide: function () {
|
||||
|
||||
@ -23,12 +23,7 @@
|
||||
@submit="handleSubmit"
|
||||
layout="vertical">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.name') }}
|
||||
<a-tooltip :title="apiParams.name.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.name')" :tooltip="apiParams.name.description"/>
|
||||
<a-input
|
||||
v-decorator="['name', {
|
||||
rules: [{ required: true, message: $t('message.error.kubecluster.name') }]
|
||||
@ -37,12 +32,7 @@
|
||||
autoFocus />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.description') }}
|
||||
<a-tooltip :title="apiParams.description.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.description')" :tooltip="apiParams.description.description"/>
|
||||
<a-input
|
||||
v-decorator="['description', {
|
||||
rules: [{ required: true, message: $t('message.error.cluster.description') }]
|
||||
@ -50,12 +40,7 @@
|
||||
:placeholder="apiParams.description.description"/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.zoneid') }}
|
||||
<a-tooltip :title="apiParams.zoneid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.zoneid')" :tooltip="apiParams.zoneid.description"/>
|
||||
<a-select
|
||||
id="zone-selection"
|
||||
v-decorator="['zoneid', {
|
||||
@ -75,12 +60,7 @@
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.kubernetesversionid') }}
|
||||
<a-tooltip :title="apiParams.kubernetesversionid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.kubernetesversionid')" :tooltip="apiParams.kubernetesversionid.description"/>
|
||||
<a-select
|
||||
id="version-selection"
|
||||
v-decorator="['kubernetesversionid', {
|
||||
@ -100,12 +80,7 @@
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.serviceofferingid') }}
|
||||
<a-tooltip :title="apiParams.serviceofferingid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.serviceofferingid')" :tooltip="apiParams.serviceofferingid.description"/>
|
||||
<a-select
|
||||
id="offering-selection"
|
||||
v-decorator="['serviceofferingid', {
|
||||
@ -124,12 +99,7 @@
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.noderootdisksize') }}
|
||||
<a-tooltip :title="apiParams.noderootdisksize.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.noderootdisksize')" :tooltip="apiParams.noderootdisksize.description"/>
|
||||
<a-input
|
||||
v-decorator="['noderootdisksize', {
|
||||
rules: [{
|
||||
@ -144,12 +114,7 @@
|
||||
:placeholder="apiParams.noderootdisksize.description"/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.networkid') }}
|
||||
<a-tooltip :title="apiParams.networkid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.networkid')" :tooltip="apiParams.networkid.description"/>
|
||||
<a-select
|
||||
id="network-selection"
|
||||
v-decorator="['networkid', {}]"
|
||||
@ -169,12 +134,7 @@
|
||||
<a-switch v-decorator="['haenable', {initialValue: this.haEnabled}]" :checked="this.haEnabled" @change="val => { this.haEnabled = val }" />
|
||||
</a-form-item>
|
||||
<a-form-item v-if="this.haEnabled">
|
||||
<span slot="label">
|
||||
{{ $t('label.controlnodes') }}
|
||||
<a-tooltip :title="apiParams.controlnodes.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.controlnodes')" :tooltip="apiParams.controlnodes.description"/>
|
||||
<a-input
|
||||
v-decorator="['controlnodes', {
|
||||
initialValue: '2',
|
||||
@ -192,23 +152,13 @@
|
||||
:placeholder="apiParams.controlnodes.description"/>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="this.haEnabled">
|
||||
<span slot="label">
|
||||
{{ $t('label.externalloadbalanceripaddress') }}
|
||||
<a-tooltip :title="apiParams.externalloadbalanceripaddress.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.externalloadbalanceripaddress')" :tooltip="apiParams.externalloadbalanceripaddress.description"/>
|
||||
<a-input
|
||||
v-decorator="['externalloadbalanceripaddress', {}]"
|
||||
:placeholder="apiParams.externalloadbalanceripaddress.description"/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.cks.cluster.size') }}
|
||||
<a-tooltip :title="apiParams.size.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.cks.cluster.size')" :tooltip="apiParams.size.description"/>
|
||||
<a-input
|
||||
v-decorator="['size', {
|
||||
initialValue: '1',
|
||||
@ -226,12 +176,7 @@
|
||||
:placeholder="apiParams.size.description"/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.keypair') }}
|
||||
<a-tooltip :title="apiParams.keypair.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.keypair')" :tooltip="apiParams.keypair.description"/>
|
||||
<a-select
|
||||
id="keypair-selection"
|
||||
v-decorator="['keypair', {}]"
|
||||
@ -253,12 +198,7 @@
|
||||
</a-form-item>
|
||||
<div v-if="usePrivateRegistry">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.username') }}
|
||||
<a-tooltip :title="apiParams.dockerregistryusername.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.username')" :tooltip="apiParams.dockerregistryusername.description"/>
|
||||
<a-input
|
||||
v-decorator="['dockerregistryusername', {
|
||||
rules: [{ required: true, message: $t('label.required') }]
|
||||
@ -266,12 +206,7 @@
|
||||
:placeholder="apiParams.dockerregistryusername.description"/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.password') }}
|
||||
<a-tooltip :title="apiParams.dockerregistrypassword.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.password')" :tooltip="apiParams.dockerregistrypassword.description"/>
|
||||
<a-input-password
|
||||
v-decorator="['dockerregistrypassword', {
|
||||
rules: [{ required: true, message: $t('label.required') }]
|
||||
@ -279,12 +214,7 @@
|
||||
:placeholder="apiParams.dockerregistrypassword.description"/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.url') }}
|
||||
<a-tooltip :title="apiParams.dockerregistryurl.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.url')" :tooltip="apiParams.dockerregistryurl.description"/>
|
||||
<a-input
|
||||
v-decorator="['dockerregistryurl', {
|
||||
rules: [{ required: true, message: $t('label.required') }]
|
||||
@ -292,12 +222,7 @@
|
||||
:placeholder="apiParams.dockerregistryurl.description"/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.email') }}
|
||||
<a-tooltip :title="apiParams.dockerregistryemail.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.email')" :tooltip="apiParams.dockerregistryemail.description"/>
|
||||
<a-input
|
||||
v-decorator="['dockerregistryemail', {
|
||||
rules: [{ required: true, message: $t('label.required') }]
|
||||
@ -317,9 +242,13 @@
|
||||
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import TooltipLabel from '@/components/widgets/TooltipLabel'
|
||||
|
||||
export default {
|
||||
name: 'CreateKubernetesCluster',
|
||||
components: {
|
||||
TooltipLabel
|
||||
},
|
||||
props: {},
|
||||
data () {
|
||||
return {
|
||||
|
||||
@ -23,12 +23,7 @@
|
||||
@submit="handleSubmit"
|
||||
layout="vertical">
|
||||
<a-form-item>
|
||||
<span slot="label" :title="apiParams.volumeid.description">
|
||||
{{ $t('label.volumeid') }}
|
||||
<a-tooltip>
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.volumeid')" :tooltip="apiParams.volumeid.description"/>
|
||||
<a-select
|
||||
showSearch
|
||||
allowClear
|
||||
@ -46,32 +41,17 @@
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label" :title="apiParams.name.description">
|
||||
{{ $t('label.name') }}
|
||||
<a-tooltip>
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.name')" :tooltip="apiParams.name.description"/>
|
||||
<a-input
|
||||
v-decorator="['name']"
|
||||
:placeholder="apiParams.name.description"/>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="isQuiesceVm">
|
||||
<span slot="label" :title="apiParams.quiescevm.description">
|
||||
{{ $t('label.quiescevm') }}
|
||||
<a-tooltip>
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.quiescevm')" :tooltip="apiParams.quiescevm.description"/>
|
||||
<a-switch v-decorator="['quiescevm', { initialValue: false }]"/>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="!supportsStorageSnapshot">
|
||||
<span slot="label" :title="apiParams.asyncbackup.description">
|
||||
{{ $t('label.asyncbackup') }}
|
||||
<a-tooltip>
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.asyncbackup')" :tooltip="apiParams.asyncbackup.description"/>
|
||||
<a-switch v-decorator="['asyncbackup', { initialValue: false }]"/>
|
||||
</a-form-item>
|
||||
<div :span="24" class="action-button">
|
||||
@ -85,9 +65,13 @@
|
||||
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import TooltipLabel from '@/components/widgets/TooltipLabel'
|
||||
|
||||
export default {
|
||||
name: 'CreateSnapshotWizard',
|
||||
components: {
|
||||
TooltipLabel
|
||||
},
|
||||
props: {
|
||||
resource: {
|
||||
type: Object,
|
||||
|
||||
@ -162,12 +162,7 @@
|
||||
<template slot="description">
|
||||
<div v-if="zoneSelected">
|
||||
<a-form-item v-if="zoneSelected && templateConfigurationExists">
|
||||
<span slot="label">
|
||||
{{ $t('label.configuration') }}
|
||||
<a-tooltip :title="$t('message.ovf.configurations')">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.configuration')" :tooltip="$t('message.ovf.configurations')"/>
|
||||
<a-select
|
||||
showSearch
|
||||
optionFilterProp="children"
|
||||
@ -285,12 +280,7 @@
|
||||
v-for="(nic, nicIndex) in templateNics"
|
||||
:key="nicIndex"
|
||||
:v-bind="nic.name" >
|
||||
<span slot="label">
|
||||
{{ nic.elementName + ' - ' + nic.name }}
|
||||
<a-tooltip :title="nic.networkDescription">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="nic.elementName + ' - ' + nic.name" :tooltip="nic.networkDescription"/>
|
||||
<a-select
|
||||
showSearch
|
||||
optionFilterProp="children"
|
||||
@ -377,12 +367,7 @@
|
||||
v-for="(property, propertyIndex) in props"
|
||||
:key="propertyIndex"
|
||||
:v-bind="property.key" >
|
||||
<span slot="label" style="text-transform: capitalize">
|
||||
{{ property.label }}
|
||||
<a-tooltip :title="property.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" style="text-transform: capitalize" :title="property.label" :tooltip="property.description"/>
|
||||
|
||||
<span v-if="property.type && property.type==='boolean'">
|
||||
<a-switch
|
||||
@ -510,12 +495,7 @@
|
||||
</a-switch>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.dynamicscalingenabled') }}
|
||||
<a-tooltip :title="$t('label.dynamicscalingenabled.tooltip')">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.dynamicscalingenabled')" :tooltip="$t('label.dynamicscalingenabled.tooltip')"/>
|
||||
<a-form-item>
|
||||
<a-switch
|
||||
v-decorator="['dynamicscalingenabled']"
|
||||
@ -585,9 +565,7 @@
|
||||
v-for="(license, licenseIndex) in templateLicenses"
|
||||
:key="licenseIndex"
|
||||
:v-bind="license.id">
|
||||
<span slot="label" style="text-transform: capitalize">
|
||||
{{ 'Agreement ' + (licenseIndex+1) + ': ' + license.name }}
|
||||
</span>
|
||||
<tooltip-label slot="label" style="text-transform: capitalize" :title="$t('label.agreement' + ' ' + (licenseIndex+1) + ': ' + license.name)"/>
|
||||
<a-textarea
|
||||
:value="license.text"
|
||||
:auto-size="{ minRows: 3, maxRows: 8 }"
|
||||
@ -669,6 +647,7 @@ import NetworkSelection from '@views/compute/wizard/NetworkSelection'
|
||||
import NetworkConfiguration from '@views/compute/wizard/NetworkConfiguration'
|
||||
import SshKeyPairSelection from '@views/compute/wizard/SshKeyPairSelection'
|
||||
import SecurityGroupSelection from '@views/compute/wizard/SecurityGroupSelection'
|
||||
import TooltipLabel from '@/components/widgets/TooltipLabel'
|
||||
|
||||
export default {
|
||||
name: 'Wizard',
|
||||
@ -684,7 +663,8 @@ export default {
|
||||
InfoCard,
|
||||
ComputeOfferingSelection,
|
||||
ComputeSelection,
|
||||
SecurityGroupSelection
|
||||
SecurityGroupSelection,
|
||||
TooltipLabel
|
||||
},
|
||||
props: {
|
||||
visible: {
|
||||
|
||||
@ -24,22 +24,12 @@
|
||||
@submit="handleSubmit"
|
||||
layout="vertical">
|
||||
<a-form-item v-if="$store.getters.userInfo.roletype === 'Admin' || $store.getters.features.allowuserexpungerecovervm">
|
||||
<span slot="label">
|
||||
{{ $t('label.expunge') }}
|
||||
<a-tooltip placement="bottom" :title="apiParams.expunge.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.expunge')" :tooltip="apiParams.expunge.description"/>
|
||||
<a-switch v-decorator="['expunge']" :auto-focus="true" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item v-if="volumes.length > 0">
|
||||
<span slot="label">
|
||||
{{ $t('label.delete.volumes') }}
|
||||
<a-tooltip placement="bottom" :title="apiParams.volumeids.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.delete.volumes')" :tooltip="apiParams.volumeids.description"/>
|
||||
<a-select
|
||||
v-decorator="['volumeids']"
|
||||
:placeholder="$t('label.delete.volumes')"
|
||||
@ -64,9 +54,13 @@
|
||||
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import TooltipLabel from '@/components/widgets/TooltipLabel'
|
||||
|
||||
export default {
|
||||
name: 'DestroyVM',
|
||||
components: {
|
||||
TooltipLabel
|
||||
},
|
||||
props: {
|
||||
resource: {
|
||||
type: Object,
|
||||
|
||||
@ -23,33 +23,18 @@
|
||||
:form="form"
|
||||
@submit="handleSubmit">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.name') }}
|
||||
<a-tooltip :title="apiParams.name.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.name')" :tooltip="apiParams.name.description"/>
|
||||
<a-input
|
||||
v-decorator="['name', { initialValue: resource.name || '' }]"
|
||||
autoFocus />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.displayname') }}
|
||||
<a-tooltip :title="apiParams.displayname.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.displayname')" :tooltip="apiParams.displayname.description"/>
|
||||
<a-input
|
||||
v-decorator="['displayname', { initialValue: resource.displayname || '' }]" />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.ostypeid') }}
|
||||
<a-tooltip :title="apiParams.ostypeid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.ostypeid')" :tooltip="apiParams.ostypeid.description"/>
|
||||
<a-select
|
||||
showSearch
|
||||
optionFilterProp="children"
|
||||
@ -64,35 +49,20 @@
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.isdynamicallyscalable') }}
|
||||
<a-tooltip :title="apiParams.isdynamicallyscalable.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.isdynamicallyscalable')" :tooltip="apiParams.isdynamicallyscalable.description"/>
|
||||
<a-switch
|
||||
:default-checked="resource.isdynamicallyscalable"
|
||||
v-decorator="['isdynamicallyscalable']"
|
||||
:disabled="!canDynamicScalingEnabled()" />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.haenable') }}
|
||||
<a-tooltip :title="apiParams.haenable.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.haenable')" :tooltip="apiParams.haenable.description"/>
|
||||
<a-switch
|
||||
:default-checked="resource.haenable"
|
||||
v-decorator="['haenable']" />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.group') }}
|
||||
<a-tooltip :title="apiParams.group.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.group')" :tooltip="apiParams.group.description"/>
|
||||
<a-auto-complete
|
||||
v-decorator="['group', { initialValue: resource.group }]"
|
||||
:filterOption="(input, option) => {
|
||||
@ -111,9 +81,13 @@
|
||||
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import TooltipLabel from '@/components/widgets/TooltipLabel'
|
||||
|
||||
export default {
|
||||
name: 'EditVM',
|
||||
components: {
|
||||
TooltipLabel
|
||||
},
|
||||
props: {
|
||||
action: {
|
||||
type: Object,
|
||||
|
||||
@ -261,7 +261,7 @@ import DetailsTab from '@/components/view/DetailsTab'
|
||||
import DetailSettings from '@/components/view/DetailSettings'
|
||||
import NicsTable from '@/views/network/NicsTable'
|
||||
import ListResourceTable from '@/components/view/ListResourceTable'
|
||||
import TooltipButton from '@/components/view/TooltipButton'
|
||||
import TooltipButton from '@/components/widgets/TooltipButton'
|
||||
|
||||
export default {
|
||||
name: 'InstanceTab',
|
||||
|
||||
@ -23,12 +23,7 @@
|
||||
@submit="handleSubmit"
|
||||
layout="vertical">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.storageid') }}
|
||||
<a-tooltip :title="apiParams.storageid.description" v-if="!(apiParams.hostid && apiParams.hostid.required === false)">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.storageid')" :tooltip="apiParams.storageid ? apiParams.storageid.description : ''"/>
|
||||
<a-select
|
||||
:loading="loading"
|
||||
v-decorator="['storageid', {
|
||||
@ -51,9 +46,13 @@
|
||||
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import TooltipLabel from '@/components/widgets/TooltipLabel'
|
||||
|
||||
export default {
|
||||
name: 'MigrateVMStorage',
|
||||
components: {
|
||||
TooltipLabel
|
||||
},
|
||||
props: {
|
||||
resource: {
|
||||
type: Object,
|
||||
|
||||
@ -27,12 +27,7 @@
|
||||
@submit="handleSubmit"
|
||||
layout="vertical">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.cks.cluster.size') }}
|
||||
<a-tooltip :title="apiParams.size.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.cks.cluster.size')" :tooltip="apiParams.size.description"/>
|
||||
<a-input
|
||||
v-decorator="['size', {
|
||||
initialValue: originalSize,
|
||||
@ -49,12 +44,7 @@
|
||||
autoFocus />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.serviceofferingid') }}
|
||||
<a-tooltip :title="apiParams.serviceofferingid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.serviceofferingid')" :tooltip="apiParams.serviceofferingid.description"/>
|
||||
<a-select
|
||||
id="offering-selection"
|
||||
v-decorator="['serviceofferingid', {}]"
|
||||
@ -82,9 +72,13 @@
|
||||
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import TooltipLabel from '@/components/widgets/TooltipLabel'
|
||||
|
||||
export default {
|
||||
name: 'ScaleKubernetesCluster',
|
||||
components: {
|
||||
TooltipLabel
|
||||
},
|
||||
props: {
|
||||
resource: {
|
||||
type: Object,
|
||||
|
||||
@ -28,12 +28,7 @@
|
||||
layout="vertical">
|
||||
<div v-if="this.$store.getters.userInfo.roletype === 'Admin'">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.podid') }}
|
||||
<a-tooltip :title="apiParams.podid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.podid')" :tooltip="apiParams.podid.description"/>
|
||||
<a-select
|
||||
v-decorator="['podid', {}]"
|
||||
showSearch
|
||||
@ -51,12 +46,7 @@
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.clusterid') }}
|
||||
<a-tooltip :title="apiParams.clusterid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.clusterid')" :tooltip="apiParams.clusterid.description"/>
|
||||
<a-select
|
||||
id="cluster-selection"
|
||||
v-decorator="['clusterid', {}]"
|
||||
@ -74,12 +64,7 @@
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.hostid') }}
|
||||
<a-tooltip :title="apiParams.hostid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.hostid')" :tooltip="apiParams.hostid.description"/>
|
||||
<a-select
|
||||
id="host-selection"
|
||||
v-decorator="['hostid', {}]"
|
||||
@ -98,12 +83,7 @@
|
||||
</div>
|
||||
|
||||
<a-form-item v-if="resource.hypervisor === 'VMware'">
|
||||
<span slot="label">
|
||||
{{ $t('label.bootintosetup') }}
|
||||
<a-tooltip :title="apiParams.bootintosetup.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.bootintosetup')" :tooltip="apiParams.bootintosetup.description"/>
|
||||
<a-switch
|
||||
v-decorator="['bootintosetup']">
|
||||
</a-switch>
|
||||
@ -120,9 +100,13 @@
|
||||
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import TooltipLabel from '@/components/widgets/TooltipLabel'
|
||||
|
||||
export default {
|
||||
name: 'StartVirtualMachine',
|
||||
components: {
|
||||
TooltipLabel
|
||||
},
|
||||
props: {
|
||||
resource: {
|
||||
type: Object,
|
||||
|
||||
@ -27,12 +27,7 @@
|
||||
@submit="handleSubmit"
|
||||
layout="vertical">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.kubernetesversionid') }}
|
||||
<a-tooltip :title="apiParams.kubernetesversionid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.kubernetesversionid')" :tooltip="apiParams.kubernetesversionid.description"/>
|
||||
<a-select
|
||||
id="version-selection"
|
||||
v-decorator="['kubernetesversionid', {
|
||||
@ -63,9 +58,13 @@
|
||||
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import TooltipLabel from '@/components/widgets/TooltipLabel'
|
||||
|
||||
export default {
|
||||
name: 'UpgradeKubernetesCluster',
|
||||
components: {
|
||||
TooltipLabel
|
||||
},
|
||||
props: {
|
||||
resource: {
|
||||
type: Object,
|
||||
|
||||
@ -74,7 +74,7 @@
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import { timeZoneName } from '@/utils/timezone'
|
||||
import TooltipButton from '@/components/view/TooltipButton'
|
||||
import TooltipButton from '@/components/widgets/TooltipButton'
|
||||
|
||||
export default {
|
||||
name: 'BackupSchedule',
|
||||
|
||||
@ -20,12 +20,7 @@
|
||||
<a-spin :spinning="loading">
|
||||
<a-form :form="form" :loading="loading" @submit="handleSubmit" layout="vertical">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.role') }}
|
||||
<a-tooltip :title="apiParams.roleid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.role')" :tooltip="apiParams.roleid.description"/>
|
||||
<a-select
|
||||
v-decorator="['roleid', {
|
||||
initialValue: selectedRole,
|
||||
@ -39,12 +34,7 @@
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.username') }}
|
||||
<a-tooltip :title="apiParams.username.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.username')" :tooltip="apiParams.username.description"/>
|
||||
<a-input
|
||||
v-decorator="['username', {
|
||||
rules: [{ required: true, message: $t('message.error.required.input') }]
|
||||
@ -54,12 +44,7 @@
|
||||
<a-row :gutter="12">
|
||||
<a-col :md="24" :lg="12">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.password') }}
|
||||
<a-tooltip :title="apiParams.password.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.password')" :tooltip="apiParams.password.description"/>
|
||||
<a-input-password
|
||||
v-decorator="['password', {
|
||||
rules: [{ required: true, message: $t('message.error.required.input') }]
|
||||
@ -69,12 +54,7 @@
|
||||
</a-col>
|
||||
<a-col :md="24" :lg="12">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.confirmpassword') }}
|
||||
<a-tooltip :title="apiParams.password.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.confirmpassword')" :tooltip="apiParams.password.description"/>
|
||||
<a-input-password
|
||||
v-decorator="['confirmpassword', {
|
||||
rules: [
|
||||
@ -87,12 +67,7 @@
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.email') }}
|
||||
<a-tooltip :title="apiParams.email.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.email')" :tooltip="apiParams.email.description"/>
|
||||
<a-input
|
||||
v-decorator="['email', {
|
||||
rules: [{ required: true, message: $t('message.error.required.input') }]
|
||||
@ -102,12 +77,7 @@
|
||||
<a-row :gutter="12">
|
||||
<a-col :md="24" :lg="12">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.firstname') }}
|
||||
<a-tooltip :title="apiParams.firstname.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.firstname')" :tooltip="apiParams.firstname.description"/>
|
||||
<a-input
|
||||
v-decorator="['firstname', {
|
||||
rules: [{ required: true, message: $t('message.error.required.input') }]
|
||||
@ -117,12 +87,7 @@
|
||||
</a-col>
|
||||
<a-col :md="24" :lg="12">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.lastname') }}
|
||||
<a-tooltip :title="apiParams.lastname.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.lastname')" :tooltip="apiParams.lastname.description"/>
|
||||
<a-input
|
||||
v-decorator="['lastname', {
|
||||
rules: [{ required: true, message: $t('message.error.required.input') }]
|
||||
@ -132,12 +97,7 @@
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-form-item v-if="this.isAdminOrDomainAdmin()">
|
||||
<span slot="label">
|
||||
{{ $t('label.domain') }}
|
||||
<a-tooltip :title="apiParams.domainid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.domainid')" :tooltip="apiParams.domainid.description"/>
|
||||
<a-select
|
||||
:loading="domainLoading"
|
||||
v-decorator="['domainid', {
|
||||
@ -150,21 +110,11 @@
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.account') }}
|
||||
<a-tooltip :title="apiParams.account.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.account')" :tooltip="apiParams.account.description"/>
|
||||
<a-input v-decorator="['account']" :placeholder="apiParams.account.description" />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.timezone') }}
|
||||
<a-tooltip :title="apiParams.timezone.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.timezone')" :tooltip="apiParams.timezone.description"/>
|
||||
<a-select
|
||||
showSearch
|
||||
v-decorator="['timezone']"
|
||||
@ -176,12 +126,7 @@
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.networkdomain') }}
|
||||
<a-tooltip :title="apiParams.networkdomain.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.networkdomain')" :tooltip="apiParams.networkdomain.description"/>
|
||||
<a-input
|
||||
v-decorator="['networkdomain']"
|
||||
:placeholder="apiParams.networkdomain.description" />
|
||||
@ -191,12 +136,7 @@
|
||||
<a-switch v-decorator="['samlenable']" @change="checked => { this.samlEnable = checked }" />
|
||||
</a-form-item>
|
||||
<a-form-item v-if="samlEnable">
|
||||
<span slot="label">
|
||||
{{ $t('label.samlentity') }}
|
||||
<a-tooltip :title="apiParams.entityid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.samlentity')" :tooltip="apiParams.entityid.description"/>
|
||||
<a-select
|
||||
v-decorator="['samlentity', {
|
||||
initialValue: selectedIdp,
|
||||
@ -220,9 +160,13 @@
|
||||
import { api } from '@/api'
|
||||
import { timeZone } from '@/utils/timezone'
|
||||
import debounce from 'lodash/debounce'
|
||||
import TooltipLabel from '@/components/widgets/TooltipLabel'
|
||||
|
||||
export default {
|
||||
name: 'AddAccountForm',
|
||||
components: {
|
||||
TooltipLabel
|
||||
},
|
||||
data () {
|
||||
this.fetchTimeZone = debounce(this.fetchTimeZone, 800)
|
||||
return {
|
||||
|
||||
@ -20,12 +20,7 @@
|
||||
<a-spin :spinning="loading">
|
||||
<a-form :form="form" :loading="loading" @submit="handleSubmit" layout="vertical">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.username') }}
|
||||
<a-tooltip :title="apiParams.username.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.username')" :tooltip="apiParams.username.description"/>
|
||||
<a-input
|
||||
v-decorator="['username', {
|
||||
rules: [{ required: true, message: $t('message.error.required.input') }]
|
||||
@ -36,12 +31,7 @@
|
||||
<a-row :gutter="12">
|
||||
<a-col :md="24" :lg="12">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.password') }}
|
||||
<a-tooltip :title="apiParams.password.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.password')" :tooltip="apiParams.password.description"/>
|
||||
<a-input-password
|
||||
v-decorator="['password', {
|
||||
rules: [{ required: true, message: $t('message.error.required.input') }]
|
||||
@ -51,12 +41,7 @@
|
||||
</a-col>
|
||||
<a-col :md="24" :lg="12">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.confirmpassword') }}
|
||||
<a-tooltip :title="apiParams.password.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.confirmpassword')" :tooltip="apiParams.password.description"/>
|
||||
<a-input-password
|
||||
v-decorator="['confirmpassword', {
|
||||
rules: [
|
||||
@ -69,12 +54,7 @@
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.email') }}
|
||||
<a-tooltip :title="apiParams.email.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.email')" :tooltip="apiParams.email.description"/>
|
||||
<a-input
|
||||
v-decorator="['email', {
|
||||
rules: [{ required: true, message: $t('message.error.required.input') }]
|
||||
@ -84,12 +64,7 @@
|
||||
<a-row :gutter="12">
|
||||
<a-col :md="24" :lg="12">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.firstname') }}
|
||||
<a-tooltip :title="apiParams.firstname.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.firstname')" :tooltip="apiParams.firstname.description"/>
|
||||
<a-input
|
||||
v-decorator="['firstname', {
|
||||
rules: [{ required: true, message: $t('message.error.required.input') }]
|
||||
@ -99,12 +74,7 @@
|
||||
</a-col>
|
||||
<a-col :md="24" :lg="12">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.lastname') }}
|
||||
<a-tooltip :title="apiParams.lastname.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.lastname')" :tooltip="apiParams.lastname.description"/>
|
||||
<a-input
|
||||
v-decorator="['lastname', {
|
||||
rules: [{ required: true, message: $t('message.error.required.input') }]
|
||||
@ -114,12 +84,7 @@
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-form-item v-if="this.isAdminOrDomainAdmin() && !domainid">
|
||||
<span slot="label">
|
||||
{{ $t('label.domain') }}
|
||||
<a-tooltip :title="apiParams.domainid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.domainid')" :tooltip="apiParams.domainid.description"/>
|
||||
<a-select
|
||||
:loading="domainLoading"
|
||||
v-decorator="['domainid']"
|
||||
@ -130,12 +95,7 @@
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="!account">
|
||||
<span slot="label">
|
||||
{{ $t('label.account') }}
|
||||
<a-tooltip :title="apiParams.account.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.account')" :tooltip="apiParams.account.description"/>
|
||||
<a-select
|
||||
v-decorator="['account', {
|
||||
rules: [{ required: true, message: $t('message.error.required.input') }]
|
||||
@ -148,12 +108,7 @@
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.timezone') }}
|
||||
<a-tooltip :title="apiParams.timezone.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.timezone')" :tooltip="apiParams.timezone.description"/>
|
||||
<a-select
|
||||
showSearch
|
||||
v-decorator="['timezone']"
|
||||
@ -168,12 +123,7 @@
|
||||
<a-switch v-decorator="['samlenable']" @change="checked => { this.samlEnable = checked }" />
|
||||
</a-form-item>
|
||||
<a-form-item v-if="samlEnable">
|
||||
<span slot="label">
|
||||
{{ $t('label.samlentity') }}
|
||||
<a-tooltip :title="apiParams.entityid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.samlentity')" :tooltip="apiParams.entityid.description"/>
|
||||
<a-select
|
||||
v-decorator="['samlentity', {
|
||||
initialValue: selectedIdp,
|
||||
@ -198,9 +148,13 @@
|
||||
import { api } from '@/api'
|
||||
import { timeZone } from '@/utils/timezone'
|
||||
import debounce from 'lodash/debounce'
|
||||
import TooltipLabel from '@/components/widgets/TooltipLabel'
|
||||
|
||||
export default {
|
||||
name: 'AddUser',
|
||||
components: {
|
||||
TooltipLabel
|
||||
},
|
||||
data () {
|
||||
this.fetchTimeZone = debounce(this.fetchTimeZone, 800)
|
||||
return {
|
||||
|
||||
@ -23,12 +23,7 @@
|
||||
@submit="handleSubmit"
|
||||
layout="vertical">
|
||||
<a-form-item v-if="!this.isAdminOrDomainAdmin()">
|
||||
<span slot="label">
|
||||
{{ $t('label.currentpassword') }}
|
||||
<a-tooltip :title="apiParams.currentpassword.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.currentpassword')" :tooltip="apiParams.currentpassword.description"/>
|
||||
<a-input-password
|
||||
v-decorator="['currentpassword', {
|
||||
rules: [{ required: true, message: $t('message.error.current.password') }]
|
||||
@ -37,12 +32,7 @@
|
||||
autoFocus />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.new.password') }}
|
||||
<a-tooltip :title="apiParams.password.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.new.password')" :tooltip="apiParams.password.description"/>
|
||||
<a-input-password
|
||||
v-decorator="['password', {
|
||||
rules: [{ required: true, message: $t('message.error.new.password') }]
|
||||
@ -50,12 +40,7 @@
|
||||
:placeholder="$t('label.new.password')"/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.confirmpassword') }}
|
||||
<a-tooltip :title="apiParams.password.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.confirmpassword')" :tooltip="apiParams.password.description"/>
|
||||
<a-input-password
|
||||
v-decorator="['confirmpassword', {
|
||||
rules: [
|
||||
@ -82,9 +67,13 @@
|
||||
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import TooltipLabel from '@/components/widgets/TooltipLabel'
|
||||
|
||||
export default {
|
||||
name: 'ChangeUserPassword',
|
||||
components: {
|
||||
TooltipLabel
|
||||
},
|
||||
props: {
|
||||
resource: {
|
||||
type: Object,
|
||||
|
||||
@ -23,39 +23,24 @@
|
||||
@submit="handleSubmit"
|
||||
layout="vertical">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.name') }}
|
||||
<a-tooltip :title="createRoleApiParams.name.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.name')" :tooltip="apiParams.name.description"/>
|
||||
<a-input
|
||||
v-decorator="['name', {
|
||||
rules: [{ required: true, message: $t('message.error.required.input') }]
|
||||
}]"
|
||||
:placeholder="createRoleApiParams.name.description"
|
||||
:placeholder="apiParams.name.description"
|
||||
autoFocus />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.description') }}
|
||||
<a-tooltip :title="createRoleApiParams.description.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.description')" :tooltip="apiParams.description.description"/>
|
||||
<a-input
|
||||
v-decorator="['description']"
|
||||
:placeholder="createRoleApiParams.description.description" />
|
||||
:placeholder="apiParams.description.description" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item v-if="'roleid' in createRoleApiParams">
|
||||
<span slot="label">
|
||||
{{ $t('label.based.on') }}
|
||||
<a-tooltip :title="$t('label.based.on.role.id.or.type')">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-form-item v-if="'roleid' in apiParams">
|
||||
<tooltip-label slot="label" :title="$t('label.based.on')" :tooltip="$t('label.based.on.role.id.or.type')"/>
|
||||
<a-radio-group
|
||||
v-decorator="['using', {
|
||||
initialValue: this.createRoleUsing
|
||||
@ -72,17 +57,12 @@
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item v-if="this.createRoleUsing === 'type'">
|
||||
<span slot="label">
|
||||
{{ $t('label.type') }}
|
||||
<a-tooltip :title="createRoleApiParams.type.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.type')" :tooltip="apiParams.type.description"/>
|
||||
<a-select
|
||||
v-decorator="['type', {
|
||||
rules: [{ required: true, message: $t('message.error.select') }]
|
||||
}]"
|
||||
:placeholder="createRoleApiParams.type.description">
|
||||
:placeholder="apiParams.type.description">
|
||||
<a-select-option v-for="role in defaultRoles" :key="role">
|
||||
{{ role }}
|
||||
</a-select-option>
|
||||
@ -90,17 +70,12 @@
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item v-if="this.createRoleUsing === 'role'">
|
||||
<span slot="label">
|
||||
{{ $t('label.role') }}
|
||||
<a-tooltip :title="createRoleApiParams.roleid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.role')" :tooltip="apiParams.roleid.description"/>
|
||||
<a-select
|
||||
v-decorator="['roleid', {
|
||||
rules: [{ required: true, message: $t('message.error.select') }]
|
||||
}]"
|
||||
:placeholder="createRoleApiParams.roleid.description">
|
||||
:placeholder="apiParams.roleid.description">
|
||||
<a-select-option
|
||||
v-for="role in roles"
|
||||
:value="role.id"
|
||||
@ -121,9 +96,13 @@
|
||||
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import TooltipLabel from '@/components/widgets/TooltipLabel'
|
||||
|
||||
export default {
|
||||
name: 'CreateRole',
|
||||
components: {
|
||||
TooltipLabel
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
roles: [],
|
||||
@ -138,9 +117,9 @@ export default {
|
||||
beforeCreate () {
|
||||
this.form = this.$form.createForm(this)
|
||||
this.apiConfig = this.$store.getters.apis.createRole || {}
|
||||
this.createRoleApiParams = {}
|
||||
this.apiParams = {}
|
||||
this.apiConfig.params.forEach(param => {
|
||||
this.createRoleApiParams[param.name] = param
|
||||
this.apiParams[param.name] = param
|
||||
})
|
||||
},
|
||||
watch: {
|
||||
|
||||
@ -46,12 +46,7 @@
|
||||
:v-bind="field.name"
|
||||
v-if="!(action.mapping && field.name in action.mapping && action.mapping[field.name].value)"
|
||||
>
|
||||
<span slot="label">
|
||||
{{ $t('label.' + field.name) }}
|
||||
<a-tooltip :title="field.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.' + field.name)" :tooltip="field.description"/>
|
||||
|
||||
<span v-if="field.type==='boolean'">
|
||||
<a-switch
|
||||
@ -136,9 +131,13 @@
|
||||
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import TooltipLabel from '@/components/widgets/TooltipLabel'
|
||||
|
||||
export default {
|
||||
name: 'DomainActionForm',
|
||||
components: {
|
||||
TooltipLabel
|
||||
},
|
||||
props: {
|
||||
action: {
|
||||
type: Object,
|
||||
|
||||
@ -20,12 +20,7 @@
|
||||
<a-spin :spinning="loading">
|
||||
<a-form :form="form" :loading="loading" @submit="handleSubmit" layout="vertical">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.username') }}
|
||||
<a-tooltip :title="apiParams.username.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.username')" :tooltip="apiParams.username.description"/>
|
||||
<a-input
|
||||
v-decorator="['username', {
|
||||
rules: [{ required: true, message: $t('message.error.required.input') }]
|
||||
@ -34,12 +29,7 @@
|
||||
autoFocus />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.email') }}
|
||||
<a-tooltip :title="apiParams.email.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.email')" :tooltip="apiParams.email.description"/>
|
||||
<a-input
|
||||
v-decorator="['email', {
|
||||
rules: [{ required: true, message: $t('message.error.required.input') }]
|
||||
@ -49,12 +39,7 @@
|
||||
<a-row :gutter="12">
|
||||
<a-col :md="24" :lg="12">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.firstname') }}
|
||||
<a-tooltip :title="apiParams.firstname.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.firstname')" :tooltip="apiParams.firstname.description"/>
|
||||
<a-input
|
||||
v-decorator="['firstname', {
|
||||
rules: [{ required: true, message: $t('message.error.required.input') }]
|
||||
@ -64,12 +49,7 @@
|
||||
</a-col>
|
||||
<a-col :md="24" :lg="12">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.lastname') }}
|
||||
<a-tooltip :title="apiParams.lastname.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.lastname')" :tooltip="apiParams.lastname.description"/>
|
||||
<a-input
|
||||
v-decorator="['lastname', {
|
||||
rules: [{ required: true, message: $t('message.error.required.input') }]
|
||||
@ -79,12 +59,7 @@
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.timezone') }}
|
||||
<a-tooltip :title="apiParams.timezone.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.timezone')" :tooltip="apiParams.timezone.description"/>
|
||||
<a-select
|
||||
showSearch
|
||||
v-decorator="['timezone']"
|
||||
@ -107,9 +82,13 @@
|
||||
import { api } from '@/api'
|
||||
import { timeZone } from '@/utils/timezone'
|
||||
import debounce from 'lodash/debounce'
|
||||
import TooltipLabel from '@/components/widgets/TooltipLabel'
|
||||
|
||||
export default {
|
||||
name: 'EditUser',
|
||||
components: {
|
||||
TooltipLabel
|
||||
},
|
||||
props: {
|
||||
resource: {
|
||||
type: Object,
|
||||
|
||||
@ -23,12 +23,7 @@
|
||||
@submit="handleSubmit"
|
||||
layout="vertical">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.rules.file') }}
|
||||
<a-tooltip :title="$t('label.rules.file.to.import')">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.rules.file')" :tooltip="$t('label.rules.file.to.import')"/>
|
||||
<a-upload-dragger
|
||||
:multiple="false"
|
||||
:fileList="fileList"
|
||||
@ -52,44 +47,29 @@
|
||||
</a-upload-dragger>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.name') }}
|
||||
<a-tooltip :title="importRoleApiParams.name.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.name')" :tooltip="apiParams.name.description"/>
|
||||
<a-input
|
||||
v-decorator="['name', {
|
||||
rules: [{ required: true, message: $t('message.error.required.input') }]
|
||||
}]"
|
||||
:placeholder="importRoleApiParams.name.description"
|
||||
:placeholder="apiParams.name.description"
|
||||
autoFocus />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.description') }}
|
||||
<a-tooltip :title="importRoleApiParams.description.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.description')" :tooltip="apiParams.description.description"/>
|
||||
<a-input
|
||||
v-decorator="['description']"
|
||||
:placeholder="importRoleApiParams.description.description" />
|
||||
:placeholder="apiParams.description.description" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.type') }}
|
||||
<a-tooltip :title="importRoleApiParams.type.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.type')" :tooltip="apiParams.type.description"/>
|
||||
<a-select
|
||||
v-decorator="['type', {
|
||||
rules: [{ required: true, message: $t('message.error.select') }]
|
||||
}]"
|
||||
:placeholder="importRoleApiParams.type.description">
|
||||
:placeholder="apiParams.type.description">
|
||||
<a-select-option v-for="role in defaultRoles" :key="role">
|
||||
{{ role }}
|
||||
</a-select-option>
|
||||
@ -97,12 +77,7 @@
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.forced') }}
|
||||
<a-tooltip :title="importRoleApiParams.forced.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.forced')" :tooltip="apiParams.forced.description"/>
|
||||
<a-switch
|
||||
v-decorator="['forced', {
|
||||
initialValue: false
|
||||
@ -120,9 +95,13 @@
|
||||
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import TooltipLabel from '@/components/widgets/TooltipLabel'
|
||||
|
||||
export default {
|
||||
name: 'ImportRole',
|
||||
components: {
|
||||
TooltipLabel
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
fileList: [],
|
||||
@ -134,9 +113,9 @@ export default {
|
||||
beforeCreate () {
|
||||
this.form = this.$form.createForm(this)
|
||||
this.apiConfig = this.$store.getters.apis.importRole || {}
|
||||
this.importRoleApiParams = {}
|
||||
this.apiParams = {}
|
||||
this.apiConfig.params.forEach(param => {
|
||||
this.importRoleApiParams[param.name] = param
|
||||
this.apiParams[param.name] = param
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
|
||||
@ -110,7 +110,7 @@ import { api } from '@/api'
|
||||
import draggable from 'vuedraggable'
|
||||
import PermissionEditable from './PermissionEditable'
|
||||
import RuleDelete from './RuleDelete'
|
||||
import TooltipButton from '@/components/view/TooltipButton'
|
||||
import TooltipButton from '@/components/widgets/TooltipButton'
|
||||
|
||||
export default {
|
||||
name: 'RolePermissionTab',
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TooltipButton from '@/components/view/TooltipButton'
|
||||
import TooltipButton from '@/components/widgets/TooltipButton'
|
||||
|
||||
export default {
|
||||
name: 'RuleDelete',
|
||||
|
||||
@ -68,7 +68,7 @@
|
||||
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import TooltipButton from '@/components/view/TooltipButton'
|
||||
import TooltipButton from '@/components/widgets/TooltipButton'
|
||||
|
||||
export default {
|
||||
name: 'SSLCertificate',
|
||||
|
||||
@ -23,12 +23,7 @@
|
||||
@submit="handleSubmit"
|
||||
layout="vertical">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.semanticversion') }}
|
||||
<a-tooltip :title="apiParams.semanticversion.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.semanticversion')" :tooltip="apiParams.semanticversion.description"/>
|
||||
<a-input
|
||||
v-decorator="['semanticversion', {
|
||||
rules: [{ required: true, message: $t('message.error.kuberversion') }]
|
||||
@ -37,12 +32,7 @@
|
||||
autoFocus />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.name') }}
|
||||
<a-tooltip :title="apiParams.name.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.name')" :tooltip="apiParams.name.description"/>
|
||||
<a-input
|
||||
v-decorator="['name', {
|
||||
rules: [{ message: $t('message.error.name') }]
|
||||
@ -50,12 +40,7 @@
|
||||
:placeholder="$t('label.name')"/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.zoneid') }}
|
||||
<a-tooltip :title="apiParams.zoneid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.zoneid')" :tooltip="apiParams.zoneid.description"/>
|
||||
<a-select
|
||||
id="zone-selection"
|
||||
v-decorator="['zoneid', {
|
||||
@ -83,12 +68,7 @@
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.url') }}
|
||||
<a-tooltip :title="apiParams.url.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.url')" :tooltip="apiParams.url.description"/>
|
||||
<a-input
|
||||
v-decorator="['url', {
|
||||
rules: [{ required: true, message: $t('message.error.binaries.iso.url') }]
|
||||
@ -96,12 +76,7 @@
|
||||
:placeholder="apiParams.url.description" />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.checksum') }}
|
||||
<a-tooltip :title="apiParams.checksum.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.checksum')" :tooltip="apiParams.checksum.description"/>
|
||||
<a-input
|
||||
v-decorator="['checksum', {
|
||||
rules: [{ required: false, message: $t('message.error.required.input') }]
|
||||
@ -109,12 +84,7 @@
|
||||
:placeholder="apiParams.checksum.description" />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.mincpunumber') }}
|
||||
<a-tooltip :title="apiParams.mincpunumber.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.mincpunumber')" :tooltip="apiParams.mincpunumber.description"/>
|
||||
<a-input
|
||||
v-decorator="['mincpunumber', {
|
||||
rules: [{ required: true, message: $t('message.please.enter.value') },
|
||||
@ -131,12 +101,7 @@
|
||||
:placeholder="apiParams.mincpunumber.description"/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.minmemory') }}
|
||||
<a-tooltip :title="apiParams.minmemory.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.minmemory')" :tooltip="apiParams.minmemory.description"/>
|
||||
<a-input
|
||||
v-decorator="['minmemory', {
|
||||
rules: [{ required: true, message: $t('message.please.enter.value') },
|
||||
@ -164,10 +129,13 @@
|
||||
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import TooltipLabel from '@/components/widgets/TooltipLabel'
|
||||
|
||||
export default {
|
||||
name: 'AddKubernetesSupportedVersion',
|
||||
props: {},
|
||||
components: {
|
||||
TooltipLabel
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
zones: [],
|
||||
|
||||
@ -123,7 +123,7 @@
|
||||
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import TooltipButton from '@/components/view/TooltipButton'
|
||||
import TooltipButton from '@/components/widgets/TooltipButton'
|
||||
|
||||
export default {
|
||||
name: 'IsoZones',
|
||||
|
||||
@ -132,7 +132,7 @@
|
||||
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import TooltipButton from '@/components/view/TooltipButton'
|
||||
import TooltipButton from '@/components/widgets/TooltipButton'
|
||||
|
||||
export default {
|
||||
name: 'TemplateZones',
|
||||
|
||||
@ -20,12 +20,7 @@
|
||||
<a-spin :spinning="loading">
|
||||
<a-form :form="form" layout="vertical">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.scope') }}
|
||||
<a-tooltip :title="apiParams.scope.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.scope')" :tooltip="apiParams.scope.description"/>
|
||||
<a-select
|
||||
v-decorator="['scope', { initialValue: 'cluster' }]"
|
||||
@change="val => { this.scope = val }"
|
||||
@ -36,12 +31,7 @@
|
||||
</a-form-item>
|
||||
<div v-if="this.scope === 'zone'">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.hypervisor') }}
|
||||
<a-tooltip :title="apiParams.hypervisor.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.hypervisor')" :tooltip="apiParams.hypervisor.description"/>
|
||||
<a-select
|
||||
v-decorator="['hypervisor', { initialValue: hypervisors[0]}]"
|
||||
@change="val => this.selectedHypervisor = val">
|
||||
@ -52,12 +42,7 @@
|
||||
</a-form-item>
|
||||
</div>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.zoneid') }}
|
||||
<a-tooltip :title="apiParams.zoneid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.zoneid')" :tooltip="apiParams.zoneid.description"/>
|
||||
<a-select
|
||||
v-decorator="['zone', { initialValue: this.zoneSelected, rules: [{ required: true, message: `${$t('label.required')}`}] }]"
|
||||
@change="val => changeZone(val)">
|
||||
@ -68,12 +53,7 @@
|
||||
</a-form-item>
|
||||
<div v-if="this.scope === 'cluster' || this.scope === 'host'">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.podid') }}
|
||||
<a-tooltip :title="apiParams.podid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.podid')" :tooltip="apiParams.podid.description"/>
|
||||
<a-select
|
||||
v-decorator="['pod', { initialValue: this.podSelected, rules: [{ required: true, message: `${$t('label.required')}`}] }]"
|
||||
@change="val => changePod(val)">
|
||||
@ -83,12 +63,7 @@
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.clusterid') }}
|
||||
<a-tooltip :title="apiParams.clusterid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.clusterid')" :tooltip="apiParams.clusterid.description"/>
|
||||
<a-select
|
||||
v-decorator="['cluster', { initialValue: this.clusterSelected, rules: [{ required: true, message: `${$t('label.required')}`}] }]"
|
||||
@change="val => fetchHypervisor(val)">
|
||||
@ -110,21 +85,11 @@
|
||||
</a-form-item>
|
||||
</div>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.name') }}
|
||||
<a-tooltip :title="apiParams.name.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.name')" :tooltip="apiParams.name.description"/>
|
||||
<a-input v-decorator="['name', { rules: [{ required: true, message: `${$t('label.required')}` }] }]"/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.protocol') }}
|
||||
<a-tooltip :title="$t('message.protocol.description')">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.protocol')" :tooltip="$t('message.protocol.description')"/>
|
||||
<a-select
|
||||
v-decorator="['protocol', { initialValue: this.protocols[0], rules: [{ required: true, message: `${$t('label.required')}`}] }]"
|
||||
@change="val => this.protocolSelected = val">
|
||||
@ -137,23 +102,13 @@
|
||||
v-if="protocolSelected === 'nfs' || protocolSelected === 'SMB' || protocolSelected === 'iscsi' || protocolSelected === 'vmfs'|| protocolSelected === 'Gluster' ||
|
||||
(protocolSelected === 'PreSetup' && hypervisorType === 'VMware') || protocolSelected === 'datastorecluster'">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.server') }}
|
||||
<a-tooltip :title="$t('message.server.description')">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.server')" :tooltip="$t('message.server.description')"/>
|
||||
<a-input v-decorator="['server', { rules: [{ required: true, message: `${$t('label.required')}` }] }]" />
|
||||
</a-form-item>
|
||||
</div>
|
||||
<div v-if="protocolSelected === 'nfs' || protocolSelected === 'SMB' || protocolSelected === 'ocfs2' || (protocolSelected === 'PreSetup' && hypervisorType !== 'VMware') || protocolSelected === 'SharedMountPoint'">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.path') }}
|
||||
<a-tooltip :title="$t('message.path.description')">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.path')" :tooltip="$t('message.path.description')"/>
|
||||
<a-input v-decorator="['path', { rules: [{ required: true, message: `${$t('label.required')}` }] }]" />
|
||||
</a-form-item>
|
||||
</div>
|
||||
@ -178,31 +133,16 @@
|
||||
</div>
|
||||
<div v-if="protocolSelected === 'vmfs' || (protocolSelected === 'PreSetup' && hypervisorType === 'VMware') || protocolSelected === 'datastorecluster'">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.vcenterdatacenter') }}
|
||||
<a-tooltip :title="$t('message.datacenter.description')">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.vcenterdatacenter')" :tooltip="$t('message.datacenter.description')"/>
|
||||
<a-input v-decorator="['vCenterDataCenter', { rules: [{ required: true, message: `${$t('label.required')}` }] }]"/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.vcenterdatastore') }}
|
||||
<a-tooltip :title="$t('message.datastore.description')">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.vcenterdatastore')" :tooltip="$t('message.datastore.description')"/>
|
||||
<a-input v-decorator="['vCenterDataStore', { rules: [{ required: true, message: `${$t('label.required')}` }] }]"/>
|
||||
</a-form-item>
|
||||
</div>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.providername') }}
|
||||
<a-tooltip :title="apiParams.provider.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.providername')" :tooltip="apiParams.provider.description"/>
|
||||
<a-select
|
||||
v-decorator="['provider', { initialValue: providerSelected, rules: [{ required: true, message: `${$t('label.required')}`}] }]"
|
||||
@change="updateProviderAndProtocol">
|
||||
@ -213,79 +153,39 @@
|
||||
</a-form-item>
|
||||
<div v-if="this.providerSelected !== 'DefaultPrimary' && this.providerSelected !== 'PowerFlex'">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.ismanaged') }}
|
||||
<a-tooltip :title="apiParams.managed.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.ismanaged')" :tooltip="apiParams.managed.description"/>
|
||||
<a-checkbox-group v-decorator="['managed']" >
|
||||
<a-checkbox value="ismanaged"></a-checkbox>
|
||||
</a-checkbox-group>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.capacitybytes') }}
|
||||
<a-tooltip :title="apiParams.capacitybytes.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.capacitybytes')" :tooltip="apiParams.capacitybytes.description"/>
|
||||
<a-input v-decorator="['capacityBytes']" />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.capacityiops') }}
|
||||
<a-tooltip :title="apiParams.capacityiops.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.capacityiops')" :tooltip="apiParams.capacityiops.description"/>
|
||||
<a-input v-decorator="['capacityIops']" />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.url') }}
|
||||
<a-tooltip :title="apiParams.url.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.url')" :tooltip="apiParams.url.description"/>
|
||||
<a-input v-decorator="['url']" />
|
||||
</a-form-item>
|
||||
</div>
|
||||
<div v-if="this.providerSelected === 'PowerFlex'">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.powerflex.gateway') }}
|
||||
<a-tooltip :title="$t('label.powerflex.gateway')">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.powerflex.gateway')" :tooltip="$t('label.powerflex.gateway')"/>
|
||||
<a-input v-decorator="['powerflexGateway', { rules: [{ required: true, message: `${$t('label.required')}` }] }]"/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.powerflex.gateway.username') }}
|
||||
<a-tooltip :title="$t('label.powerflex.gateway.username')">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.powerflex.gateway.username')" :tooltip="$t('label.powerflex.gateway.username')"/>
|
||||
<a-input v-decorator="['powerflexGatewayUsername', { rules: [{ required: true, message: `${$t('label.required')}` }] }]"/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.powerflex.gateway.password') }}
|
||||
<a-tooltip :title="$t('label.powerflex.gateway.password')">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.powerflex.gateway.password')" :tooltip="$t('label.powerflex.gateway.password')"/>
|
||||
<a-input-password v-decorator="['powerflexGatewayPassword', { rules: [{ required: true, message: `${$t('label.required')}` }] }]"/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.powerflex.storage.pool') }}
|
||||
<a-tooltip :title="$t('label.powerflex.storage.pool')">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.powerflex.storage.pool')" :tooltip="$t('label.powerflex.storage.pool')"/>
|
||||
<a-input v-decorator="['powerflexStoragePool', { rules: [{ required: true, message: `${$t('label.required')}` }] }]"/>
|
||||
</a-form-item>
|
||||
</div>
|
||||
@ -313,12 +213,7 @@
|
||||
</a-form-item>
|
||||
</div>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.storagetags') }}
|
||||
<a-tooltip :title="apiParams.tags.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.storagetags')" :tooltip="apiParams.tags.description"/>
|
||||
<a-select
|
||||
mode="tags"
|
||||
v-model="selectedTags"
|
||||
@ -338,9 +233,13 @@
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import _ from 'lodash'
|
||||
import TooltipLabel from '@/components/widgets/TooltipLabel'
|
||||
|
||||
export default {
|
||||
name: 'AddPrimaryStorage',
|
||||
components: {
|
||||
TooltipLabel
|
||||
},
|
||||
props: {
|
||||
resource: {
|
||||
type: Object,
|
||||
|
||||
@ -51,12 +51,7 @@
|
||||
|
||||
<a-form @submit.prevent="handleSslFormSubmit" ref="sslForm" :form="form">
|
||||
<a-form-item :required="true">
|
||||
<span slot="label">
|
||||
{{ $t('label.root.certificate') }}
|
||||
<a-tooltip placement="bottom" :title="apiParams.name.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.root.certificate')" :tooltip="apiParams.name.description" tooltipPlacement="bottom"/>
|
||||
<a-textarea
|
||||
id="rootCert"
|
||||
rows="2"
|
||||
@ -75,12 +70,7 @@
|
||||
v-for="(item, index) in intermediateCertificates"
|
||||
:key="`key-${index}`"
|
||||
class="intermediate-certificate">
|
||||
<span slot="label">
|
||||
{{ $t('label.intermediate.certificate') + ` ${index + 1} ` }}
|
||||
<a-tooltip placement="bottom" :title="apiParams.id.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.intermediate.certificate') + ` ${index + 1} `" :tooltip="apiParams.id.description" tooltipPlacement="bottom"/>
|
||||
<a-textarea
|
||||
:id="`intermediateCert${index}`"
|
||||
rows="2"
|
||||
@ -102,12 +92,7 @@
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item :required="true">
|
||||
<span slot="label">
|
||||
{{ $t('label.server.certificate') }}
|
||||
<a-tooltip placement="bottom" :title="apiParams.certificate.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.server.certificate')" :tooltip="apiParams.certificate.description" tooltipPlacement="bottom"/>
|
||||
<a-textarea
|
||||
id="serverCert"
|
||||
rows="2"
|
||||
@ -121,12 +106,7 @@
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item :required="true">
|
||||
<span slot="label">
|
||||
{{ $t('label.pkcs.private.certificate') }}
|
||||
<a-tooltip placement="bottom" :title="apiParams.privatekey.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.pkcs.private.certificate')" :tooltip="apiParams.privatekey.description" tooltipPlacement="bottom"/>
|
||||
<a-textarea
|
||||
id="pkcsKey"
|
||||
rows="2"
|
||||
@ -140,12 +120,7 @@
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item :required="true">
|
||||
<span slot="label">
|
||||
{{ $t('label.domain.suffix') }}
|
||||
<a-tooltip placement="bottom" :title="apiParams.domainsuffix.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.domain.suffix')" :tooltip="apiParams.domainsuffix.description" tooltipPlacement="bottom"/>
|
||||
<a-input
|
||||
id="dnsSuffix"
|
||||
:placeholder="$t('label.domain.suffix')"
|
||||
@ -194,12 +169,14 @@ import router from '@/router'
|
||||
|
||||
import Breadcrumb from '@/components/widgets/Breadcrumb'
|
||||
import ChartCard from '@/components/widgets/ChartCard'
|
||||
import TooltipLabel from '@/components/widgets/TooltipLabel'
|
||||
|
||||
export default {
|
||||
name: 'InfraSummary',
|
||||
components: {
|
||||
Breadcrumb,
|
||||
ChartCard
|
||||
ChartCard,
|
||||
TooltipLabel
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
@ -134,7 +134,7 @@
|
||||
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import TooltipButton from '@/components/view/TooltipButton'
|
||||
import TooltipButton from '@/components/widgets/TooltipButton'
|
||||
|
||||
export default {
|
||||
name: 'DedicatedVLANTab',
|
||||
|
||||
@ -20,12 +20,7 @@
|
||||
<a-spin :spinning="loading">
|
||||
<a-form :form="form" :loading="loading" @submit="handleSubmit" layout="vertical">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.traffictype') }}
|
||||
<a-tooltip :title="apiParams.id.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.traffictype')" :tooltip="apiParams.id.description"/>
|
||||
<a-select
|
||||
autoFocus
|
||||
v-decorator="['id', {
|
||||
@ -40,12 +35,7 @@
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.kvmnetworklabel') }}
|
||||
<a-tooltip :title="apiParams.kvmnetworklabel.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.kvmnetworklabel')" :tooltip="apiParams.kvmnetworklabel.description"/>
|
||||
<a-input
|
||||
v-decorator="['kvmnetworklabel', {
|
||||
initialValue: trafficResource.kvmnetworklabel
|
||||
@ -53,12 +43,7 @@
|
||||
:placeholder="$t('label.network.label.display.for.blank.value')" />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.vmwarenetworklabel') }}
|
||||
<a-tooltip :title="apiParams.vmwarenetworklabel.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.vmwarenetworklabel')" :tooltip="apiParams.vmwarenetworklabel.description"/>
|
||||
<a-input
|
||||
v-decorator="['vmwarenetworklabel', {
|
||||
initialValue: trafficResource.vmwarenetworklabel
|
||||
@ -66,12 +51,7 @@
|
||||
:placeholder="$t('label.network.label.display.for.blank.value')" />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.xennetworklabel') }}
|
||||
<a-tooltip :title="apiParams.xennetworklabel.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.xennetworklabel')" :tooltip="apiParams.xennetworklabel.description"/>
|
||||
<a-input
|
||||
v-decorator="['xennetworklabel', {
|
||||
initialValue: trafficResource.xennetworklabel
|
||||
@ -79,12 +59,7 @@
|
||||
:placeholder="$t('label.network.label.display.for.blank.value')" />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.hypervnetworklabel') }}
|
||||
<a-tooltip :title="apiParams.hypervnetworklabel.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.hypervnetworklabel')" :tooltip="apiParams.hypervnetworklabel.description"/>
|
||||
<a-input
|
||||
v-decorator="['hypervnetworklabel', {
|
||||
initialValue: trafficResource.hypervnetworklabel
|
||||
@ -92,12 +67,7 @@
|
||||
:placeholder="$t('label.network.label.display.for.blank.value')" />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.ovm3networklabel') }}
|
||||
<a-tooltip :title="apiParams.ovm3networklabel.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.ovm3networklabel')" :tooltip="apiParams.ovm3networklabel.description"/>
|
||||
<a-input
|
||||
v-decorator="['ovm3networklabel', {
|
||||
initialValue: trafficResource.ovm3networklabel
|
||||
@ -115,9 +85,13 @@
|
||||
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import TooltipLabel from '@/components/widgets/TooltipLabel'
|
||||
|
||||
export default {
|
||||
name: 'EditTrafficLabel',
|
||||
components: {
|
||||
TooltipLabel
|
||||
},
|
||||
props: {
|
||||
resource: {
|
||||
type: Object,
|
||||
|
||||
@ -123,7 +123,7 @@
|
||||
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import TooltipButton from '@/components/view/TooltipButton'
|
||||
import TooltipButton from '@/components/widgets/TooltipButton'
|
||||
|
||||
export default {
|
||||
name: 'IpRangesTabManagement',
|
||||
|
||||
@ -205,7 +205,7 @@
|
||||
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import TooltipButton from '@/components/view/TooltipButton'
|
||||
import TooltipButton from '@/components/widgets/TooltipButton'
|
||||
|
||||
export default {
|
||||
name: 'IpRangesTabPublic',
|
||||
|
||||
@ -117,7 +117,7 @@
|
||||
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import TooltipButton from '@/components/view/TooltipButton'
|
||||
import TooltipButton from '@/components/widgets/TooltipButton'
|
||||
|
||||
export default {
|
||||
name: 'IpRangesTabStorage',
|
||||
|
||||
@ -116,7 +116,7 @@
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import Status from '@/components/widgets/Status'
|
||||
import TooltipButton from '@/components/view/TooltipButton'
|
||||
import TooltipButton from '@/components/widgets/TooltipButton'
|
||||
|
||||
export default {
|
||||
name: 'ProviderListView',
|
||||
|
||||
@ -55,12 +55,7 @@
|
||||
@submit="handleGetHealthChecksSubmit"
|
||||
layout="vertical">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.perform.fresh.checks') }}
|
||||
<a-tooltip :title="apiParams.performfreshchecks.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.perform.fresh.checks')" :tooltip="apiParams.performfreshchecks.description"/>
|
||||
<a-switch
|
||||
v-decorator="[$t('performfreshchecks')]"
|
||||
:placeholder="apiParams.performfreshchecks.description"
|
||||
@ -76,11 +71,13 @@
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import Status from '@/components/widgets/Status'
|
||||
import TooltipLabel from '@/components/widgets/TooltipLabel'
|
||||
|
||||
export default {
|
||||
name: 'RouterHealthCheck',
|
||||
components: {
|
||||
Status
|
||||
Status,
|
||||
TooltipLabel
|
||||
},
|
||||
props: {
|
||||
resource: {
|
||||
|
||||
@ -142,7 +142,7 @@
|
||||
</template>
|
||||
<script>
|
||||
|
||||
import TooltipButton from '@/components/view/TooltipButton'
|
||||
import TooltipButton from '@/components/widgets/TooltipButton'
|
||||
import { mixinDevice } from '@/utils/mixin.js'
|
||||
|
||||
export default {
|
||||
|
||||
@ -166,7 +166,7 @@
|
||||
</template>
|
||||
<script>
|
||||
|
||||
import TooltipButton from '@/components/view/TooltipButton'
|
||||
import TooltipButton from '@/components/widgets/TooltipButton'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
||||
@ -198,7 +198,7 @@
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import draggable from 'vuedraggable'
|
||||
import TooltipButton from '@/components/view/TooltipButton'
|
||||
import TooltipButton from '@/components/widgets/TooltipButton'
|
||||
|
||||
export default {
|
||||
name: 'AclListRulesTab',
|
||||
|
||||
@ -24,12 +24,7 @@
|
||||
layout="vertical"
|
||||
@submit="handleSubmit">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.name') }}
|
||||
<a-tooltip :title="apiParams.name.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.name')" :tooltip="apiParams.name.description"/>
|
||||
<a-input
|
||||
v-decorator="['name', {
|
||||
rules: [{ required: true, message: $t('message.error.name') }]
|
||||
@ -38,12 +33,7 @@
|
||||
autoFocus/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.displaytext') }}
|
||||
<a-tooltip :title="apiParams.displaytext.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.displaytext')" :tooltip="apiParams.displaytext.description"/>
|
||||
<a-input
|
||||
v-decorator="['displaytext', {
|
||||
rules: [{ required: true, message: $t('message.error.display.text') }]
|
||||
@ -51,12 +41,7 @@
|
||||
:placeholder="this.$t('label.display.text')"/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.zoneid') }}
|
||||
<a-tooltip :title="apiParams.zoneid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.zoneid')" :tooltip="apiParams.zoneid.description"/>
|
||||
<a-select
|
||||
v-decorator="['zoneid', {
|
||||
rules: [
|
||||
@ -80,12 +65,7 @@
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="this.isAdminOrDomainAdmin()">
|
||||
<span slot="label">
|
||||
{{ $t('label.domain') }}
|
||||
<a-tooltip :title="apiParams.domainid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.domainid')" :tooltip="apiParams.domainid.description"/>
|
||||
<a-select
|
||||
v-decorator="['domainid', {}]"
|
||||
showSearch
|
||||
@ -102,12 +82,7 @@
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.networkofferingid') }}
|
||||
<a-tooltip :title="apiParams.networkofferingid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.networkofferingid')" :tooltip="apiParams.networkofferingid.description"/>
|
||||
<a-select
|
||||
v-decorator="['networkofferingid', {
|
||||
rules: [
|
||||
@ -131,12 +106,7 @@
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="!this.isObjectEmpty(this.selectedNetworkOffering) && this.selectedNetworkOffering.specifyvlan">
|
||||
<span slot="label">
|
||||
{{ $t('label.vlan') }}
|
||||
<a-tooltip :title="apiParams.vlan.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.vlan')" :tooltip="apiParams.vlan.description"/>
|
||||
<a-input
|
||||
v-decorator="['vlanid', {
|
||||
rules: [{ required: true, message: $t('message.please.enter.value') }]
|
||||
@ -144,12 +114,7 @@
|
||||
:placeholder="this.$t('label.vlanid')"/>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="!this.isObjectEmpty(this.selectedNetworkOffering) && this.selectedNetworkOffering.forvpc">
|
||||
<span slot="label">
|
||||
{{ $t('label.vpcid') }}
|
||||
<a-tooltip :title="apiParams.vpcid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.vpcid')" :tooltip="apiParams.vpcid.description"/>
|
||||
<a-select
|
||||
v-decorator="['vpcid', {
|
||||
rules: [
|
||||
@ -173,56 +138,31 @@
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.externalid') }}
|
||||
<a-tooltip :title="apiParams.externalid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.externalid')" :tooltip="apiParams.externalid.description"/>
|
||||
<a-input
|
||||
v-decorator="['externalid', {}]"
|
||||
:placeholder="$t('label.externalid')"/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.gateway') }}
|
||||
<a-tooltip :title="apiParams.gateway.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.gateway')" :tooltip="apiParams.gateway.description"/>
|
||||
<a-input
|
||||
v-decorator="['gateway', {}]"
|
||||
:placeholder="this.$t('label.gateway')"/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.netmask') }}
|
||||
<a-tooltip :title="apiParams.netmask.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.netmask')" :tooltip="apiParams.netmask.description"/>
|
||||
<a-input
|
||||
v-decorator="['netmask', {}]"
|
||||
:placeholder="this.$t('label.netmask')"/>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="!this.isObjectEmpty(this.selectedNetworkOffering) && !this.selectedNetworkOffering.forvpc">
|
||||
<span slot="label">
|
||||
{{ $t('label.networkdomain') }}
|
||||
<a-tooltip :title="apiParams.networkdomain.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.networkdomain')" :tooltip="apiParams.networkdomain.description"/>
|
||||
<a-input
|
||||
v-decorator="['networkdomain', {}]"
|
||||
:placeholder="this.$t('label.networkdomain')"/>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="this.accountVisible">
|
||||
<span slot="label">
|
||||
{{ $t('label.account') }}
|
||||
<a-tooltip :title="apiParams.account.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.account')" :tooltip="apiParams.account.description"/>
|
||||
<a-input
|
||||
v-decorator="['account']"
|
||||
:placeholder="this.$t('label.account')"/>
|
||||
@ -248,9 +188,13 @@
|
||||
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import TooltipLabel from '@/components/widgets/TooltipLabel'
|
||||
|
||||
export default {
|
||||
name: 'CreateIsolatedNetworkForm',
|
||||
components: {
|
||||
TooltipLabel
|
||||
},
|
||||
props: {
|
||||
loading: {
|
||||
type: Boolean,
|
||||
|
||||
@ -24,12 +24,7 @@
|
||||
layout="vertical"
|
||||
@submit="handleSubmit">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.name') }}
|
||||
<a-tooltip :title="apiParams.name.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.name')" :tooltip="apiParams.name.description"/>
|
||||
<a-input
|
||||
v-decorator="['name', {
|
||||
rules: [{ required: true, message: $t('message.error.name') }]
|
||||
@ -38,12 +33,7 @@
|
||||
autoFocus/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.displaytext') }}
|
||||
<a-tooltip :title="apiParams.displaytext.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.displaytext')" :tooltip="apiParams.displaytext.description"/>
|
||||
<a-input
|
||||
v-decorator="['displaytext', {
|
||||
rules: [{ required: true, message: $t('message.error.display.text') }]
|
||||
@ -51,12 +41,7 @@
|
||||
:placeholder="this.$t('label.displaytext')"/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.zoneid') }}
|
||||
<a-tooltip :title="apiParams.zoneid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.zoneid')" :tooltip="apiParams.zoneid.description"/>
|
||||
<a-select
|
||||
v-decorator="['zoneid', {
|
||||
rules: [
|
||||
@ -80,12 +65,7 @@
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="this.isAdminOrDomainAdmin()">
|
||||
<span slot="label">
|
||||
{{ $t('label.domain') }}
|
||||
<a-tooltip :title="apiParams.domainid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.domainid')" :tooltip="apiParams.domainid.description"/>
|
||||
<a-select
|
||||
v-decorator="['domainid', {}]"
|
||||
showSearch
|
||||
@ -102,12 +82,7 @@
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.networkofferingid') }}
|
||||
<a-tooltip :title="apiParams.networkofferingid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.networkofferingid')" :tooltip="apiParams.networkofferingid.description"/>
|
||||
<a-select
|
||||
v-decorator="['networkofferingid', {
|
||||
rules: [
|
||||
@ -131,12 +106,7 @@
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="!this.isObjectEmpty(this.selectedNetworkOffering) && this.selectedNetworkOffering.specifyvlan">
|
||||
<span slot="label">
|
||||
{{ $t('label.vlan') }}
|
||||
<a-tooltip :title="apiParams.vlan.description" v-if="'vlan' in apiParams">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.vlan')" :tooltip="apiParams.vlan ? apiParams.vlan.description : null"/>
|
||||
<a-input
|
||||
v-decorator="['vlanid', {
|
||||
rules: [{ required: true, message: $t('message.please.enter.value') }]
|
||||
@ -144,21 +114,11 @@
|
||||
:placeholder="this.$t('label.vlanid')"/>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="!this.isObjectEmpty(this.selectedNetworkOffering) && this.selectedNetworkOffering.specifyvlan">
|
||||
<span slot="label">
|
||||
{{ $t('label.bypassvlanoverlapcheck') }}
|
||||
<a-tooltip :title="apiParams.bypassvlanoverlapcheck.description" v-if="'bypassvlanoverlapcheck' in apiParams">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.bypassvlanoverlapcheck')" :tooltip="apiParams.bypassvlanoverlapcheck ? apiParams.bypassvlanoverlapcheck.description : null"/>
|
||||
<a-switch v-decorator="['bypassvlanoverlapcheck']" />
|
||||
</a-form-item>
|
||||
<a-form-item v-if="!this.isObjectEmpty(this.selectedNetworkOffering) && this.selectedNetworkOffering.specifyvlan">
|
||||
<span slot="label">
|
||||
{{ $t('label.isolatedpvlantype') }}
|
||||
<a-tooltip :title="apiParams.isolatedpvlantype.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.isolatedpvlantype')" :tooltip="apiParams.isolatedpvlantype.description"/>
|
||||
<a-radio-group
|
||||
v-decorator="['isolatedpvlantype', {
|
||||
initialValue: this.isolatePvlanType
|
||||
@ -180,23 +140,13 @@
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="this.isolatePvlanType=='community' || this.isolatePvlanType=='isolated'">
|
||||
<span slot="label">
|
||||
{{ $t('label.isolatedpvlanid') }}
|
||||
<a-tooltip :title="apiParams.isolatedpvlan.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.isolatedpvlanid')" :tooltip="apiParams.isolatedpvlan.description"/>
|
||||
<a-input
|
||||
v-decorator="['isolatedpvlan', {}]"
|
||||
:placeholder="this.$t('label.isolatedpvlanid')"/>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="this.accountVisible">
|
||||
<span slot="label">
|
||||
{{ $t('label.account') }}
|
||||
<a-tooltip :title="apiParams.account.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.account')" :tooltip="apiParams.account.description"/>
|
||||
<a-input
|
||||
v-decorator="['account']"
|
||||
:placeholder="this.$t('label.account')"/>
|
||||
@ -222,9 +172,13 @@
|
||||
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import TooltipLabel from '@/components/widgets/TooltipLabel'
|
||||
|
||||
export default {
|
||||
name: 'CreateL2NetworkForm',
|
||||
components: {
|
||||
TooltipLabel
|
||||
},
|
||||
props: {
|
||||
loading: {
|
||||
type: Boolean,
|
||||
|
||||
@ -23,13 +23,8 @@
|
||||
:form="form"
|
||||
layout="vertical"
|
||||
@submit="handleSubmit">
|
||||
<a-form-item :label="$t('label.name')">
|
||||
<span slot="label">
|
||||
{{ $t('label.name') }}
|
||||
<a-tooltip :title="apiParams.name.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-form-item>
|
||||
<tooltip-label slot="label" :title="$t('label.name')" :tooltip="apiParams.name.description"/>
|
||||
<a-input
|
||||
v-decorator="['name', {
|
||||
rules: [{ required: true, message: $t('message.error.name') }]
|
||||
@ -38,12 +33,7 @@
|
||||
autoFocus />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.displaytext') }}
|
||||
<a-tooltip :title="apiParams.displaytext.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.displaytext')" :tooltip="apiParams.displaytext.description"/>
|
||||
<a-input
|
||||
v-decorator="['displaytext', {
|
||||
rules: [{ required: true, message: $t('message.error.display.text') }]
|
||||
@ -51,12 +41,7 @@
|
||||
:placeholder="this.$t('label.display.text')"/>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="this.isObjectEmpty(this.zone)">
|
||||
<span slot="label">
|
||||
{{ $t('label.zoneid') }}
|
||||
<a-tooltip :title="apiParams.zoneid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.zoneid')" :tooltip="apiParams.zoneid.description"/>
|
||||
<a-select
|
||||
v-decorator="['zoneid', {
|
||||
rules: [
|
||||
@ -80,12 +65,7 @@
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="this.isObjectEmpty(this.zone)">
|
||||
<span slot="label">
|
||||
{{ $t('label.physicalnetworkid') }}
|
||||
<a-tooltip :title="apiParams.physicalnetworkid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.physicalnetworkid')" :tooltip="apiParams.physicalnetworkid.description"/>
|
||||
<a-select
|
||||
v-decorator="['physicalnetworkid', {}]"
|
||||
showSearch
|
||||
@ -102,12 +82,7 @@
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.vlan') }}
|
||||
<a-tooltip :title="apiParams.vlan.description" v-if="'vlan' in apiParams">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.vlan')" :tooltip="apiParams.vlan.description"/>
|
||||
<a-input
|
||||
v-decorator="['vlanid', {
|
||||
rules: [{ required: true, message: $t('message.please.enter.value') }]
|
||||
@ -115,21 +90,11 @@
|
||||
:placeholder="this.$t('label.vlanid')"/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.bypassvlanoverlapcheck') }}
|
||||
<a-tooltip :title="apiParams.bypassvlanoverlapcheck.description" v-if="'bypassvlanoverlapcheck' in apiParams">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.bypassvlanoverlapcheck')" :tooltip="apiParams.bypassvlanoverlapcheck.description"/>
|
||||
<a-switch v-decorator="['bypassvlanoverlapcheck']" />
|
||||
</a-form-item>
|
||||
<a-form-item v-if="!this.isObjectEmpty(this.selectedNetworkOffering) && this.selectedNetworkOffering.specifyvlan">
|
||||
<span slot="label">
|
||||
{{ $t('label.isolatedpvlantype') }}
|
||||
<a-tooltip :title="apiParams.isolatedpvlantype.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.isolatedpvlantype')" :tooltip="apiParams.isolatedpvlantype.description"/>
|
||||
<a-radio-group
|
||||
v-decorator="['isolatedpvlantype', {
|
||||
initialValue: this.isolatePvlanType
|
||||
@ -151,12 +116,7 @@
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="this.isolatePvlanType=='community' || this.isolatePvlanType=='isolated'">
|
||||
<span slot="label">
|
||||
{{ $t('label.isolatedpvlanid') }}
|
||||
<a-tooltip :title="apiParams.isolatedpvlan.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.isolatedpvlanid')" :tooltip="apiParams.isolatedpvlan.description"/>
|
||||
<a-input
|
||||
v-decorator="['isolatedpvlan', {}]"
|
||||
:placeholder="this.$t('label.isolatedpvlanid')"/>
|
||||
@ -183,12 +143,7 @@
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="this.scopeType !== 'all'">
|
||||
<span slot="label">
|
||||
{{ $t('label.domain') }}
|
||||
<a-tooltip :title="apiParams.domainid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.domainid')" :tooltip="apiParams.domainid.description"/>
|
||||
<a-select
|
||||
v-decorator="['domainid', {
|
||||
rules: [
|
||||
@ -212,32 +167,17 @@
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="this.scopeType === 'domain'">
|
||||
<span slot="label">
|
||||
{{ $t('label.subdomainaccess') }}
|
||||
<a-tooltip :title="apiParams.subdomainaccess.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.subdomainaccess')" :tooltip="apiParams.subdomainaccess.description"/>
|
||||
<a-switch v-decorator="['subdomainaccess']" />
|
||||
</a-form-item>
|
||||
<a-form-item v-if="this.scopeType === 'account'">
|
||||
<span slot="label">
|
||||
{{ $t('label.account') }}
|
||||
<a-tooltip :title="apiParams.account.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.account')" :tooltip="apiParams.account.description"/>
|
||||
<a-input
|
||||
v-decorator="['account', {}]"
|
||||
:placeholder="this.$t('label.account')"/>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="this.scopeType === 'project'">
|
||||
<span slot="label">
|
||||
{{ $t('label.projectid') }}
|
||||
<a-tooltip :title="apiParams.projectid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.projectid')" :tooltip="apiParams.projectid.description"/>
|
||||
<a-select
|
||||
v-decorator="['projectid', {
|
||||
rules: [
|
||||
@ -261,12 +201,7 @@
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.networkofferingid') }}
|
||||
<a-tooltip :title="apiParams.networkofferingid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.networkofferingid')" :tooltip="apiParams.networkofferingid.description"/>
|
||||
<a-select
|
||||
v-decorator="['networkofferingid', {
|
||||
rules: [
|
||||
@ -289,134 +224,98 @@
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.ip4gateway') }}
|
||||
<a-tooltip :title="apiParams.gateway.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['ip4gateway', {}]"
|
||||
:placeholder="this.$t('label.ip4gateway')"/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.ip4netmask') }}
|
||||
<a-tooltip :title="apiParams.netmask.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['netmask', {}]"
|
||||
:placeholder="this.$t('label.netmask')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.startipv4')">
|
||||
<span slot="label">
|
||||
{{ $t('label.startipv4') }}
|
||||
<a-tooltip :title="apiParams.startip.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['startipv4', {}]"
|
||||
:placeholder="this.$t('label.startipv4')"/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.endipv4') }}
|
||||
<a-tooltip :title="apiParams.endip.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['endipv4', {}]"
|
||||
:placeholder="this.$t('label.endipv4')"/>
|
||||
</a-form-item>
|
||||
<a-row :gutter="12">
|
||||
<a-col :md="12" :lg="12">
|
||||
<a-form-item>
|
||||
<tooltip-label slot="label" :title="$t('label.ip4gateway')" :tooltip="apiParams.gateway.description"/>
|
||||
<a-input
|
||||
v-decorator="['ip4gateway', {}]"
|
||||
:placeholder="this.$t('label.ip4gateway')"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :lg="12">
|
||||
<a-form-item>
|
||||
<tooltip-label slot="label" :title="$t('label.netmask')" :tooltip="apiParams.netmask.description"/>
|
||||
<a-input
|
||||
v-decorator="['netmask', {}]"
|
||||
:placeholder="this.$t('label.netmask')"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="12">
|
||||
<a-col :md="12" :lg="12">
|
||||
<a-form-item>
|
||||
<tooltip-label slot="label" :title="$t('label.startipv4')" :tooltip="apiParams.startip.description"/>
|
||||
<a-input
|
||||
v-decorator="['startipv4', {}]"
|
||||
:placeholder="this.$t('label.startipv4')"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :lg="12">
|
||||
<a-form-item>
|
||||
<tooltip-label slot="label" :title="$t('label.endipv4')" :tooltip="apiParams.endip.description"/>
|
||||
<a-input
|
||||
v-decorator="['endipv4', {}]"
|
||||
:placeholder="this.$t('label.endipv4')"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-form-item v-if="isVirtualRouterForAtLeastOneService">
|
||||
<span slot="label">
|
||||
{{ $t('label.routerip') }}
|
||||
<a-tooltip :title="apiParams.routerip.description" v-if="'routerip' in apiParams">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.routerip')" :tooltip="apiParams.routerip.description"/>
|
||||
<a-input
|
||||
v-decorator="['routerip', {}]"
|
||||
:placeholder="this.$t('label.routerip')"/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.ip6gateway') }}
|
||||
<a-tooltip :title="apiParams.ip6gateway.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['ip6gateway', {}]"
|
||||
:placeholder="this.$t('label.ip6gateway')"/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.ip6cidr') }}
|
||||
<a-tooltip :title="apiParams.ip6cidr.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['ip6cidr', {}]"
|
||||
:placeholder="this.$t('label.ip6cidr')"/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.startipv6') }}
|
||||
<a-tooltip :title="apiParams.startipv6.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['startipv6', {}]"
|
||||
:placeholder="this.$t('label.startipv6')"/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.endipv6') }}
|
||||
<a-tooltip :title="apiParams.endipv6.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['endipv6', {}]"
|
||||
:placeholder="this.$t('label.endipv6')"/>
|
||||
</a-form-item>
|
||||
<a-row :gutter="12">
|
||||
<a-col :md="12" :lg="12">
|
||||
<a-form-item>
|
||||
<tooltip-label slot="label" :title="$t('label.ip6gateway')" :tooltip="apiParams.ip6gateway.description"/>
|
||||
<a-input
|
||||
v-decorator="['ip6gateway', {}]"
|
||||
:placeholder="this.$t('label.ip6gateway')"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :lg="12">
|
||||
<a-form-item>
|
||||
<tooltip-label slot="label" :title="$t('label.ip6cidr')" :tooltip="apiParams.ip6cidr.description"/>
|
||||
<a-input
|
||||
v-decorator="['ip6cidr', {}]"
|
||||
:placeholder="this.$t('label.ip6cidr')"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="12">
|
||||
<a-col :md="12" :lg="12">
|
||||
<a-form-item>
|
||||
<tooltip-label slot="label" :title="$t('label.startipv6')" :tooltip="apiParams.startipv6.description"/>
|
||||
<a-input
|
||||
v-decorator="['startipv6', {}]"
|
||||
:placeholder="this.$t('label.startipv6')"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :lg="12">
|
||||
<a-form-item>
|
||||
<tooltip-label slot="label" :title="$t('label.endipv6')" :tooltip="apiParams.endipv6.description"/>
|
||||
<a-input
|
||||
v-decorator="['endipv6', {}]"
|
||||
:placeholder="this.$t('label.endipv6')"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-form-item v-if="isVirtualRouterForAtLeastOneService">
|
||||
<span slot="label">
|
||||
{{ $t('label.routeripv6') }}
|
||||
<a-tooltip :title="apiParams.routeripv6.description" v-if="'routeripv6' in apiParams">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.routeripv6')" :tooltip="apiParams.routeripv6.description"/>
|
||||
<a-input
|
||||
v-decorator="['routeripv6', {}]"
|
||||
:placeholder="this.$t('label.routeripv6')"/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.networkdomain') }}
|
||||
<a-tooltip :title="apiParams.networkdomain.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.networkdomain')" :tooltip="apiParams.networkdomain.description"/>
|
||||
<a-input
|
||||
v-decorator="['networkdomain', {}]"
|
||||
:placeholder="this.$t('label.networkdomain')"/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.hideipaddressusage') }}
|
||||
<a-tooltip :title="apiParams.hideipaddressusage.description" v-if="'hideipaddressusage' in apiParams">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.hideipaddressusage')" :tooltip="apiParams.hideipaddressusage.description"/>
|
||||
<a-switch v-decorator="['hideipaddressusage']" />
|
||||
</a-form-item>
|
||||
<div :span="24" class="action-button">
|
||||
@ -440,9 +339,13 @@
|
||||
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import TooltipLabel from '@/components/widgets/TooltipLabel'
|
||||
|
||||
export default {
|
||||
name: 'CreateGuestNetworkForm',
|
||||
components: {
|
||||
TooltipLabel
|
||||
},
|
||||
props: {
|
||||
loading: {
|
||||
type: Boolean,
|
||||
|
||||
@ -23,7 +23,8 @@
|
||||
:form="form"
|
||||
@submit="handleSubmit"
|
||||
layout="vertical">
|
||||
<a-form-item :label="$t('label.podid')" v-if="pods && pods.length > 0">
|
||||
<a-form-item v-if="pods && pods.length > 0">
|
||||
<tooltip-label slot="label" :title="$t('label.podid')" :tooltip="apiParams.podid.description"/>
|
||||
<a-select
|
||||
autoFocus
|
||||
v-decorator="['podid', {
|
||||
@ -35,12 +36,7 @@
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.gateway') }}
|
||||
<a-tooltip :title="apiParams.gateway.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.gateway')" :tooltip="apiParams.gateway.description"/>
|
||||
<a-input
|
||||
autoFocus
|
||||
v-decorator="['gateway', {
|
||||
@ -49,12 +45,7 @@
|
||||
:placeholder="apiParams.gateway.description"/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.netmask') }}
|
||||
<a-tooltip :title="apiParams.netmask.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.netmask')" :tooltip="apiParams.netmask.description"/>
|
||||
<a-input
|
||||
v-decorator="['netmask', {
|
||||
rules: [{ required: true, message: $t('message.error.netmask') }]
|
||||
@ -64,12 +55,7 @@
|
||||
<a-row :gutter="12">
|
||||
<a-col :md="12" lg="12">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.startipv4') }}
|
||||
<a-tooltip :title="apiParams.startip.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.startipv4')" :tooltip="apiParams.startip.description"/>
|
||||
<a-input
|
||||
v-decorator="['startip', {
|
||||
rules: [
|
||||
@ -86,12 +72,7 @@
|
||||
</a-col>
|
||||
<a-col :md="12" :lg="12">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.endipv4') }}
|
||||
<a-tooltip :title="apiParams.endip.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.endipv4')" :tooltip="apiParams.endip.description"/>
|
||||
<a-input
|
||||
v-decorator="['endip', {
|
||||
rules: [
|
||||
@ -108,23 +89,13 @@
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.ip6cidr') }}
|
||||
<a-tooltip :title="apiParams.ip6cidr.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.ip6cidr')" :tooltip="apiParams.ip6cidr.description"/>
|
||||
<a-input
|
||||
v-decorator="['ip6cidr']"
|
||||
:placeholder="apiParams.ip6cidr.description"/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.ip6gateway') }}
|
||||
<a-tooltip :title="apiParams.ip6gateway.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.ip6gateway')" :tooltip="apiParams.ip6gateway.description"/>
|
||||
<a-input
|
||||
v-decorator="['ip6gateway']"
|
||||
:placeholder="apiParams.ip6gateway.description"/>
|
||||
@ -132,12 +103,7 @@
|
||||
<a-row :gutter="12">
|
||||
<a-col :md="12" :lg="12">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.startipv6') }}
|
||||
<a-tooltip :title="apiParams.startipv6.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.startipv6')" :tooltip="apiParams.startipv6.description"/>
|
||||
<a-input
|
||||
v-decorator="['startipv6', {
|
||||
rules: [
|
||||
@ -153,12 +119,7 @@
|
||||
</a-col>
|
||||
<a-col :md="12" :lg="12">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.endipv6') }}
|
||||
<a-tooltip :title="apiParams.endipv6.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.endipv6')" :tooltip="apiParams.endipv6.description"/>
|
||||
<a-input
|
||||
v-decorator="['endipv6', {
|
||||
rules: [
|
||||
@ -194,9 +155,13 @@
|
||||
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import TooltipLabel from '@/components/widgets/TooltipLabel'
|
||||
|
||||
export default {
|
||||
name: 'CreateVlanIpRange',
|
||||
components: {
|
||||
TooltipLabel
|
||||
},
|
||||
props: {
|
||||
resource: {
|
||||
type: Object,
|
||||
|
||||
@ -21,12 +21,7 @@
|
||||
:form="form"
|
||||
layout="vertical">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.name') }}
|
||||
<a-tooltip :title="apiParams.name.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.name')" :tooltip="apiParams.name.description"/>
|
||||
<a-input
|
||||
v-decorator="['name', {
|
||||
rules: [{ required: true, message: $t('message.error.required.input') }]
|
||||
@ -35,12 +30,7 @@
|
||||
autoFocus/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.displaytext') }}
|
||||
<a-tooltip :title="apiParams.displaytext.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.displaytext')" :tooltip="apiParams.displaytext.description"/>
|
||||
<a-input
|
||||
v-decorator="['displaytext', {
|
||||
rules: [{ required: true, message: $t('message.error.required.input') }]
|
||||
@ -48,12 +38,7 @@
|
||||
:placeholder="apiParams.displaytext.description"/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.zoneid') }}
|
||||
<a-tooltip :title="apiParams.zoneid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.zoneid')" :tooltip="apiParams.zoneid.description"/>
|
||||
<a-select
|
||||
:loading="loadingZone"
|
||||
v-decorator="['zoneid', {
|
||||
@ -67,12 +52,7 @@
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.cidr') }}
|
||||
<a-tooltip :title="apiParams.cidr.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.cidr')" :tooltip="apiParams.cidr.description"/>
|
||||
<a-input
|
||||
v-decorator="['cidr', {
|
||||
rules: [{ required: true, message: $t('message.error.required.input') }]
|
||||
@ -80,23 +60,13 @@
|
||||
:placeholder="apiParams.cidr.description"/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.networkdomain') }}
|
||||
<a-tooltip :title="apiParams.networkdomain.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.networkdomain')" :tooltip="apiParams.networkdomain.description"/>
|
||||
<a-input
|
||||
v-decorator="['networkdomain']"
|
||||
:placeholder="apiParams.networkdomain.description"/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.vpcofferingid') }}
|
||||
<a-tooltip :title="apiParams.vpcofferingid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.vpcofferingid')" :tooltip="apiParams.vpcofferingid.description"/>
|
||||
<a-select
|
||||
:loading="loadingOffering"
|
||||
v-decorator="['vpcofferingid', {
|
||||
@ -108,12 +78,7 @@
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.start') }}
|
||||
<a-tooltip :title="apiParams.start.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.start')" :tooltip="apiParams.start.description"/>
|
||||
<a-switch v-decorator="['start', {initialValue: true}]" defaultChecked />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
@ -126,8 +91,13 @@
|
||||
</template>
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import TooltipLabel from '@/components/widgets/TooltipLabel'
|
||||
|
||||
export default {
|
||||
name: 'CreateVpc',
|
||||
components: {
|
||||
TooltipLabel
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
loading: false,
|
||||
|
||||
@ -18,12 +18,7 @@
|
||||
<div>
|
||||
<a-form class="form-layout" :form="form" layout="vertical">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.name') }}
|
||||
<a-tooltip :title="apiParams.name.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.name')" :tooltip="apiParams.name.description"/>
|
||||
<a-input
|
||||
v-decorator="[
|
||||
'name',
|
||||
@ -35,12 +30,7 @@
|
||||
autoFocus />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.gateway') }}
|
||||
<a-tooltip :title="apiParams.gateway.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.gateway')" :tooltip="apiParams.gateway.description"/>
|
||||
<a-input
|
||||
v-decorator="[
|
||||
'gateway',
|
||||
@ -51,12 +41,7 @@
|
||||
:placeholder="$t('label.vpncustomergateway')" />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.cidrlist') }}
|
||||
<a-tooltip :title="apiParams.cidrlist.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.cidrlist')" :tooltip="apiParams.cidrlist.description"/>
|
||||
<a-input
|
||||
v-decorator="[
|
||||
'cidrlist',
|
||||
@ -67,12 +52,7 @@
|
||||
:placeholder="$t('label.vpncustomergateway.cidrlist')" />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.ipsecpsk') }}
|
||||
<a-tooltip :title="apiParams.ipsecpsk.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.ipsecpsk')" :tooltip="apiParams.ipsecpsk.description"/>
|
||||
<a-input
|
||||
v-decorator="[
|
||||
'ipsecpsk',
|
||||
@ -109,12 +89,7 @@
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.ikeversion') }}
|
||||
<a-tooltip :title="apiParams.ikeversion.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.ikeversion')" :tooltip="apiParams.ikeversion.description"/>
|
||||
<a-select
|
||||
v-decorator="[
|
||||
'ikeversion',
|
||||
@ -192,12 +167,7 @@
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.ikelifetime') }}
|
||||
<a-tooltip :title="apiParams.ikelifetime.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.ikelifetime')" :tooltip="apiParams.ikelifetime.description"/>
|
||||
<a-input
|
||||
v-decorator="[
|
||||
'ikelifetime',
|
||||
@ -208,12 +178,7 @@
|
||||
:placeholder="$t('label.vpncustomergateway.ikelifetime')"/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.esplifetime') }}
|
||||
<a-tooltip :title="apiParams.esplifetime.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.esplifetime')" :tooltip="apiParams.esplifetime.description"/>
|
||||
<a-input
|
||||
v-decorator="[
|
||||
'esplifetime',
|
||||
@ -224,12 +189,7 @@
|
||||
:placeholder="$t('label.vpncustomergateway.esplifetime')"/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.dpd') }}
|
||||
<a-tooltip :title="apiParams.dpd.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.dpd')" :tooltip="apiParams.dpd.description"/>
|
||||
<a-switch
|
||||
v-decorator="[
|
||||
'dpd',
|
||||
@ -239,12 +199,7 @@
|
||||
]"/>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="ikeversion !== 'ikev1'">
|
||||
<span slot="label">
|
||||
{{ $t('label.splitconnections') }}
|
||||
<a-tooltip :title="apiParams.splitconnections.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.splitconnections')" :tooltip="apiParams.splitconnections.description"/>
|
||||
<a-switch
|
||||
v-decorator="[
|
||||
'splitconnections',
|
||||
@ -254,12 +209,7 @@
|
||||
]"/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.forceencap') }}
|
||||
<a-tooltip :title="apiParams.forceencap.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.forceencap')" :tooltip="apiParams.forceencap.description"/>
|
||||
<a-switch
|
||||
v-decorator="[
|
||||
'forceencap',
|
||||
@ -281,8 +231,13 @@
|
||||
</template>
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import TooltipLabel from '@/components/widgets/TooltipLabel'
|
||||
|
||||
export default {
|
||||
name: 'CreateVpnCustomerGateway',
|
||||
components: {
|
||||
TooltipLabel
|
||||
},
|
||||
props: {
|
||||
resource: {
|
||||
type: Object,
|
||||
|
||||
@ -102,7 +102,7 @@
|
||||
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import TooltipButton from '@/components/view/TooltipButton'
|
||||
import TooltipButton from '@/components/widgets/TooltipButton'
|
||||
|
||||
export default {
|
||||
name: 'EgressRulesTab',
|
||||
|
||||
@ -137,7 +137,7 @@
|
||||
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import TooltipButton from '@/components/view/TooltipButton'
|
||||
import TooltipButton from '@/components/widgets/TooltipButton'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
||||
@ -88,7 +88,7 @@
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import CreateVlanIpRange from '@/views/network/CreateVlanIpRange'
|
||||
import TooltipButton from '@/components/view/TooltipButton'
|
||||
import TooltipButton from '@/components/widgets/TooltipButton'
|
||||
export default {
|
||||
name: 'GuestIpRanges',
|
||||
components: {
|
||||
|
||||
@ -170,7 +170,7 @@
|
||||
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import TooltipButton from '@/components/view/TooltipButton'
|
||||
import TooltipButton from '@/components/widgets/TooltipButton'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
||||
@ -63,7 +63,7 @@
|
||||
</template>
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import TooltipButton from '@/components/view/TooltipButton'
|
||||
import TooltipButton from '@/components/widgets/TooltipButton'
|
||||
|
||||
export default {
|
||||
name: 'InternalLBAssignedVmTab',
|
||||
|
||||
@ -129,7 +129,7 @@
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import Status from '@/components/widgets/Status'
|
||||
import TooltipButton from '@/components/view/TooltipButton'
|
||||
import TooltipButton from '@/components/widgets/TooltipButton'
|
||||
|
||||
export default {
|
||||
name: 'IpAddressesTab',
|
||||
|
||||
@ -384,7 +384,7 @@
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import Status from '@/components/widgets/Status'
|
||||
import TooltipButton from '@/components/view/TooltipButton'
|
||||
import TooltipButton from '@/components/widgets/TooltipButton'
|
||||
|
||||
export default {
|
||||
name: 'LoadBalancing',
|
||||
|
||||
@ -252,7 +252,7 @@
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import Status from '@/components/widgets/Status'
|
||||
import TooltipButton from '@/components/view/TooltipButton'
|
||||
import TooltipButton from '@/components/widgets/TooltipButton'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
||||
@ -76,7 +76,7 @@
|
||||
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import TooltipButton from '@/components/view/TooltipButton'
|
||||
import TooltipButton from '@/components/widgets/TooltipButton'
|
||||
|
||||
export default {
|
||||
name: 'StaticRoutesTab',
|
||||
|
||||
@ -177,12 +177,7 @@
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="!this.isObjectEmpty(this.selectedNetworkOffering) && this.selectedNetworkOffering.specifyvlan">
|
||||
<span slot="label">
|
||||
{{ $t('label.vlan') }}
|
||||
<a-tooltip :title="$t('label.vlan')">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.vlan')" :tooltip="$t('label.vlan')"/>
|
||||
<a-input
|
||||
v-decorator="['vlan', {
|
||||
rules: [{ required: true, message: $t('message.please.enter.value') }]
|
||||
@ -275,11 +270,13 @@
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import Status from '@/components/widgets/Status'
|
||||
import TooltipLabel from '@/components/widgets/TooltipLabel'
|
||||
|
||||
export default {
|
||||
name: 'VpcTiersTab',
|
||||
components: {
|
||||
Status
|
||||
Status,
|
||||
TooltipLabel
|
||||
},
|
||||
props: {
|
||||
resource: {
|
||||
|
||||
@ -23,39 +23,24 @@
|
||||
@submit="handleSubmit"
|
||||
layout="vertical">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.name') }}
|
||||
<a-tooltip :title="apiParams.name.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.name')" :tooltip="apiParams.name.description"/>
|
||||
<a-input
|
||||
autoFocus
|
||||
v-decorator="['name', {
|
||||
rules: [{ required: true, message: $t('message.error.required.input') }]
|
||||
}]"
|
||||
:placeholder="this.$t('label.name')"/>
|
||||
:placeholder="apiParams.name.description"/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.displaytext') }}
|
||||
<a-tooltip :title="apiParams.displaytext.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.displaytext')" :tooltip="apiParams.displaytext.description"/>
|
||||
<a-input
|
||||
v-decorator="['displaytext', {
|
||||
rules: [{ required: true, message: $t('message.error.required.input') }]
|
||||
}]"
|
||||
:placeholder="this.$t('label.displaytext')"/>
|
||||
:placeholder="apiParams.displaytext.description"/>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="this.isSystem">
|
||||
<span slot="label">
|
||||
{{ $t('label.systemvmtype') }}
|
||||
<a-tooltip :title="apiParams.systemvmtype.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-form-item v-if="isSystem">
|
||||
<tooltip-label slot="label" :title="$t('label.systemvmtype')" :tooltip="apiParams.systemvmtype.description"/>
|
||||
<a-select
|
||||
v-decorator="['systemvmtype', {
|
||||
initialValue: 'domainrouter'
|
||||
@ -65,25 +50,20 @@
|
||||
:filterOption="(input, option) => {
|
||||
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}"
|
||||
:placeholder="this.$t('label.systemvmtype')">
|
||||
:placeholder="apiParams.systemvmtype.description">
|
||||
<a-select-option key="domainrouter">{{ $t('label.domain.router') }}</a-select-option>
|
||||
<a-select-option key="consoleproxy">{{ $t('label.console.proxy') }}</a-select-option>
|
||||
<a-select-option key="secondarystoragevm">{{ $t('label.secondary.storage.vm') }}</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.storagetype') }}
|
||||
<a-tooltip :title="apiParams.storagetype.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.storagetype')" :tooltip="apiParams.storagetype.description"/>
|
||||
<a-radio-group
|
||||
v-decorator="['storagetype', {
|
||||
initialValue: this.storageType
|
||||
initialValue: storageType
|
||||
}]"
|
||||
buttonStyle="solid"
|
||||
@change="selected => { this.handleStorageTypeChange(selected.target.value) }">
|
||||
@change="selected => { handleStorageTypeChange(selected.target.value) }">
|
||||
<a-radio-button value="shared">
|
||||
{{ $t('label.shared') }}
|
||||
</a-radio-button>
|
||||
@ -93,18 +73,13 @@
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.provisioningtype') }}
|
||||
<a-tooltip :title="apiParams.provisioningtype.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.provisioningtype')" :tooltip="apiParams.provisioningtype.description"/>
|
||||
<a-radio-group
|
||||
v-decorator="['provisioningtype', {
|
||||
initialValue: this.provisioningType
|
||||
initialValue: provisioningType
|
||||
}]"
|
||||
buttonStyle="solid"
|
||||
@change="selected => { this.handleProvisioningTypeChange(selected.target.value) }">
|
||||
@change="selected => { handleProvisioningTypeChange(selected.target.value) }">
|
||||
<a-radio-button value="thin">
|
||||
{{ $t('label.provisioningtype.thin') }}
|
||||
</a-radio-button>
|
||||
@ -117,18 +92,13 @@
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.cachemode') }}
|
||||
<a-tooltip :title="apiParams.cachemode.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.cachemode')" :tooltip="apiParams.cachemode.description"/>
|
||||
<a-radio-group
|
||||
v-decorator="['cachemode', {
|
||||
initialValue: this.cacheMode
|
||||
initialValue: cacheMode
|
||||
}]"
|
||||
buttonStyle="solid"
|
||||
@change="selected => { this.handleCacheModeChange(selected.target.value) }">
|
||||
@change="selected => { handleCacheModeChange(selected.target.value) }">
|
||||
<a-radio-button value="none">
|
||||
{{ $t('label.nodiskcache') }}
|
||||
</a-radio-button>
|
||||
@ -140,13 +110,13 @@
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.offeringtype')" v-show="!this.isSystem">
|
||||
<a-form-item :label="$t('label.offeringtype')" v-show="!isSystem">
|
||||
<a-radio-group
|
||||
v-decorator="['offeringtype', {
|
||||
initialValue: this.offeringType
|
||||
initialValue: offeringType
|
||||
}]"
|
||||
buttonStyle="solid"
|
||||
@change="selected => { this.handleComputeOfferingTypeChange(selected.target.value) }">
|
||||
@change="selected => { handleComputeOfferingTypeChange(selected.target.value) }">
|
||||
<a-radio-button value="fixed">
|
||||
{{ $t('label.fixed') }}
|
||||
</a-radio-button>
|
||||
@ -158,211 +128,107 @@
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="this.offeringType === 'fixed'">
|
||||
<span slot="label">
|
||||
{{ $t('label.cpunumber') }}
|
||||
<a-tooltip :title="apiParams.cpunumber.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['cpunumber', {
|
||||
rules: [{ required: true, message: $t('message.error.required.input') },
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value && (isNaN(value) || value <= 0)) {
|
||||
callback(this.$t('message.error.number'))
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}
|
||||
]
|
||||
}]"
|
||||
:placeholder="this.$t('label.cpunumber')"/>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="this.offeringType !== 'customunconstrained'">
|
||||
<span slot="label">
|
||||
{{ $t('label.cpuspeed') }}
|
||||
<a-tooltip :title="apiParams.cpuspeed.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['cpuspeed', {
|
||||
rules: [{ required: true, message: $t('message.error.required.input') },
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value && (isNaN(value) || value < 0)) {
|
||||
callback(this.$t('message.error.number'))
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}
|
||||
]
|
||||
}]"
|
||||
:placeholder="this.$t('label.cpuspeed')"/>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="this.offeringType === 'customconstrained'">
|
||||
<span slot="label">
|
||||
{{ $t('label.mincpunumber') }}
|
||||
<a-tooltip :title="apiParams.mincpunumber.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['mincpunumber', {
|
||||
rules: [{ required: true, message: $t('message.error.required.input') },
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value && (isNaN(value) || value <= 0)) {
|
||||
callback(this.$t('message.error.number'))
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}
|
||||
]
|
||||
}]"
|
||||
:placeholder="this.$t('label.mincpunumber')"/>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="this.offeringType === 'customconstrained'">
|
||||
<span slot="label">
|
||||
{{ $t('label.maxcpunumber') }}
|
||||
<a-tooltip :title="apiParams.maxcpunumber.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['maxcpunumber', {
|
||||
rules: [{ required: true, message: $t('message.error.required.input') },
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value && (isNaN(value) || value <= 0)) {
|
||||
callback(this.$t('message.error.number'))
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}
|
||||
]
|
||||
}]"
|
||||
:placeholder="this.$t('label.maxcpunumber')"/>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="this.offeringType === 'fixed'">
|
||||
<span slot="label">
|
||||
{{ $t('label.memory.mb') }}
|
||||
<a-tooltip :title="apiParams.memory.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['memory', {
|
||||
rules: [{ required: true, message: $t('message.error.required.input') },
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value && (isNaN(value) || value <= 0)) {
|
||||
callback(this.$t('message.error.number'))
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}
|
||||
]
|
||||
}]"
|
||||
:placeholder="this.$t('label.memory')"/>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="this.offeringType === 'customconstrained'">
|
||||
<span slot="label">
|
||||
{{ $t('label.minmemory') }}
|
||||
<a-tooltip :title="apiParams.minmemory.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['minmemory', {
|
||||
rules: [{ required: true, message: $t('message.error.required.input') },
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value && (isNaN(value) || value <= 0)) {
|
||||
callback(this.$t('message.error.number'))
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}
|
||||
]
|
||||
}]"
|
||||
:placeholder="this.$t('label.minmemory')"/>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="this.offeringType === 'customconstrained'">
|
||||
<span slot="label">
|
||||
{{ $t('label.maxmemory') }}
|
||||
<a-tooltip :title="apiParams.maxmemory.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['maxmemory', {
|
||||
rules: [{ required: true, message: $t('message.error.required.input') },
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value && (isNaN(value) || value <= 0)) {
|
||||
callback(this.$t('message.error.number'))
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}
|
||||
]
|
||||
}]"
|
||||
:placeholder="this.$t('label.maxmemory')"/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.networkrate') }}
|
||||
<a-tooltip :title="apiParams.networkrate.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['networkrate', {
|
||||
rules: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value && (isNaN(value) || value <= 0)) {
|
||||
callback(this.$t('message.error.number'))
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}
|
||||
]
|
||||
}]"
|
||||
:placeholder="this.$t('label.networkrate')"/>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="apiParams.rootdisksize">
|
||||
<span slot="label">
|
||||
{{ $t('label.root.disk.size') }}
|
||||
<a-tooltip :title="apiParams.rootdisksize.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['rootdisksize', {
|
||||
rules: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value && (isNaN(value) || value <= 0)) {
|
||||
callback(this.$t('message.error.number'))
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}
|
||||
]
|
||||
}]"
|
||||
:placeholder="this.$t('label.root.disk.size')"/>
|
||||
</a-form-item>
|
||||
<a-row :gutter="12">
|
||||
<a-col :md="8" :lg="8" v-if="offeringType === 'fixed'">
|
||||
<a-form-item>
|
||||
<tooltip-label slot="label" :title="$t('label.cpunumber')" :tooltip="apiParams.cpunumber.description"/>
|
||||
<a-input
|
||||
v-decorator="['cpunumber', {
|
||||
rules: [{ required: true, message: $t('message.error.required.input') }, naturalNumberRule]
|
||||
}]"
|
||||
:placeholder="apiParams.cpunumber.description"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="8" :lg="8" v-if="offeringType !== 'customunconstrained'">
|
||||
<a-form-item>
|
||||
<tooltip-label slot="label" :title="$t('label.cpuspeed')" :tooltip="apiParams.cpuspeed.description"/>
|
||||
<a-input
|
||||
v-decorator="['cpuspeed', {
|
||||
rules: [{ required: true, message: $t('message.error.required.input') }, wholeNumberRule]
|
||||
}]"
|
||||
:placeholder="apiParams.cpuspeed.description"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="8" :lg="8" v-if="offeringType === 'fixed'">
|
||||
<a-form-item>
|
||||
<tooltip-label slot="label" :title="$t('label.memory.mb')" :tooltip="apiParams.memory.description"/>
|
||||
<a-input
|
||||
v-decorator="['memory', {
|
||||
rules: [{ required: true, message: $t('message.error.required.input') }, naturalNumberRule]
|
||||
}]"
|
||||
:placeholder="apiParams.memory.description"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="12" v-if="offeringType === 'customconstrained'">
|
||||
<a-col :md="12" :lg="12">
|
||||
<a-form-item>
|
||||
<tooltip-label slot="label" :title="$t('label.mincpunumber')" :tooltip="apiParams.mincpunumber.description"/>
|
||||
<a-input
|
||||
v-decorator="['mincpunumber', {
|
||||
rules: [{ required: true, message: $t('message.error.required.input') }, naturalNumberRule]
|
||||
}]"
|
||||
:placeholder="apiParams.mincpunumber.description"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :lg="12">
|
||||
<a-form-item>
|
||||
<tooltip-label slot="label" :title="$t('label.maxcpunumber')" :tooltip="apiParams.maxcpunumber.description"/>
|
||||
<a-input
|
||||
v-decorator="['maxcpunumber', {
|
||||
rules: [{ required: true, message: $t('message.error.required.input') }, naturalNumberRule]
|
||||
}]"
|
||||
:placeholder="apiParams.maxcpunumber.description"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="12" v-if="offeringType === 'customconstrained'">
|
||||
<a-col :md="12" :lg="12">
|
||||
<a-form-item>
|
||||
<tooltip-label slot="label" :title="$t('label.minmemory')" :tooltip="apiParams.minmemory.description"/>
|
||||
<a-input
|
||||
v-decorator="['minmemory', {
|
||||
rules: [{ required: true, message: $t('message.error.required.input') }, naturalNumberRule]
|
||||
}]"
|
||||
:placeholder="apiParams.minmemory.description"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :lg="12">
|
||||
<a-form-item>
|
||||
<tooltip-label slot="label" :title="$t('label.maxmemory')" :tooltip="apiParams.maxmemory.description"/>
|
||||
<a-input
|
||||
v-decorator="['maxmemory', {
|
||||
rules: [{ required: true, message: $t('message.error.required.input') }, naturalNumberRule]
|
||||
}]"
|
||||
:placeholder="apiParams.maxmemory.description"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="12">
|
||||
<a-col :md="12" :lg="12">
|
||||
<a-form-item>
|
||||
<tooltip-label slot="label" :title="$t('label.networkrate')" :tooltip="apiParams.networkrate.description"/>
|
||||
<a-input
|
||||
v-decorator="['networkrate', { rules: [naturalNumberRule] }]"
|
||||
:placeholder="apiParams.networkrate.description"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :lg="12">
|
||||
<a-form-item v-if="apiParams.rootdisksize">
|
||||
<tooltip-label slot="label" :title="$t('label.root.disk.size')" :tooltip="apiParams.rootdisksize.description"/>
|
||||
<a-input
|
||||
v-decorator="['rootdisksize', { rules: [naturalNumberRule] }]"
|
||||
:placeholder="apiParams.rootdisksize.description"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-form-item :label="$t('label.qostype')">
|
||||
<a-radio-group
|
||||
v-decorator="['qostype', {
|
||||
initialValue: this.qosType
|
||||
initialValue: qosType
|
||||
}]"
|
||||
buttonStyle="solid"
|
||||
@change="selected => { this.handleQosTypeChange(selected.target.value) }">
|
||||
@change="selected => { handleQosTypeChange(selected.target.value) }">
|
||||
<a-radio-button value="">
|
||||
{{ $t('label.none') }}
|
||||
</a-radio-button>
|
||||
@ -374,235 +240,133 @@
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="this.qosType === 'hypervisor'">
|
||||
<span slot="label">
|
||||
{{ $t('label.diskbytesreadrate') }}
|
||||
<a-tooltip :title="apiParams.bytesreadrate.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-row :gutter="12" v-if="qosType === 'hypervisor'">
|
||||
<a-col :md="12" :lg="12">
|
||||
<a-form-item>
|
||||
<tooltip-label slot="label" :title="$t('label.diskbytesreadrate')" :tooltip="apiParams.bytesreadrate.description"/>
|
||||
<a-input
|
||||
v-decorator="['diskbytesreadrate', { rules: [naturalNumberRule] }]"
|
||||
:placeholder="apiParams.bytesreadrate.description"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :lg="12">
|
||||
<a-form-item>
|
||||
<tooltip-label slot="label" :title="$t('label.diskbyteswriterate')" :tooltip="apiParams.byteswriterate.description"/>
|
||||
<a-input
|
||||
v-decorator="['diskbyteswriterate', { rules: [naturalNumberRule] }]"
|
||||
:placeholder="apiParams.byteswriterate.description"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="12" v-if="qosType === 'hypervisor'">
|
||||
<a-col :md="12" :lg="12">
|
||||
<a-form-item>
|
||||
<tooltip-label slot="label" :title="$t('label.diskiopsreadrate')" :tooltip="apiParams.iopsreadrate.description"/>
|
||||
<a-input
|
||||
v-decorator="['diskiopsreadrate', { rules: [naturalNumberRule] }]"
|
||||
:placeholder="apiParams.iopsreadrate.description"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :lg="12">
|
||||
<a-form-item>
|
||||
<tooltip-label slot="label" :title="$t('label.diskiopswriterate')" :tooltip="apiParams.iopswriterate.description"/>
|
||||
<a-input
|
||||
v-decorator="['diskiopswriterate', { rules: [naturalNumberRule] }]"
|
||||
:placeholder="apiParams.iopswriterate.description"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-form-item v-if="!isSystem && qosType === 'storage'">
|
||||
<tooltip-label slot="label" :title="$t('label.iscustomizeddiskiops')" :tooltip="apiParams.customizediops.description"/>
|
||||
<a-switch v-decorator="['iscustomizeddiskiops', {initialValue: isCustomizedDiskIops}]" :defaultChecked="isCustomizedDiskIops" @change="val => { isCustomizedDiskIops = val }" />
|
||||
</a-form-item>
|
||||
<a-row :gutter="12" v-if="qosType === 'storage' && !isCustomizedDiskIops">
|
||||
<a-col :md="12" :lg="12">
|
||||
<a-form-item>
|
||||
<tooltip-label slot="label" :title="$t('label.diskiopsmin')" :tooltip="apiParams.miniops.description"/>
|
||||
<a-input
|
||||
v-decorator="['diskiopsmin', { rules: [naturalNumberRule] }]"
|
||||
:placeholder="apiParams.miniops.description"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :lg="12">
|
||||
<a-form-item>
|
||||
<tooltip-label slot="label" :title="$t('label.diskiopsmax')" :tooltip="apiParams.maxiops.description"/>
|
||||
<a-input
|
||||
v-decorator="['diskiopsmax', { rules: [naturalNumberRule] }]"
|
||||
:placeholder="apiParams.maxiops.description"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-form-item v-if="!isSystem && qosType === 'storage'">
|
||||
<tooltip-label slot="label" :title="$t('label.hypervisorsnapshotreserve')" :tooltip="apiParams.hypervisorsnapshotreserve.description"/>
|
||||
<a-input
|
||||
v-decorator="['diskbytesreadrate', {
|
||||
rules: [{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value && (isNaN(value) || value <= 0)) {
|
||||
callback(this.$t('message.error.number'))
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}]
|
||||
}]"
|
||||
:placeholder="this.$t('label.diskbytesreadrate')"/>
|
||||
v-decorator="['hypervisorsnapshotreserve', { rules: [naturalNumberRule] }]"
|
||||
:placeholder="apiParams.hypervisorsnapshotreserve.description"/>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="this.qosType === 'hypervisor'">
|
||||
<span slot="label">
|
||||
{{ $t('label.diskbyteswriterate') }}
|
||||
<a-tooltip :title="apiParams.byteswriterate.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['diskbyteswriterate', {
|
||||
rules: [{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value && (isNaN(value) || value <= 0)) {
|
||||
callback(this.$t('message.error.number'))
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}]
|
||||
}]"
|
||||
:placeholder="this.$t('label.diskbyteswriterate')"/>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="this.qosType === 'hypervisor'">
|
||||
<span slot="label">
|
||||
{{ $t('label.diskiopsreadrate') }}
|
||||
<a-tooltip :title="apiParams.iopsreadrate.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['diskiopsreadrate', {
|
||||
rules: [{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value && (isNaN(value) || value <= 0)) {
|
||||
callback(this.$t('message.error.number'))
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}]
|
||||
}]"
|
||||
:placeholder="this.$t('label.diskiopsreadrate')"/>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="this.qosType === 'hypervisor'">
|
||||
<span slot="label">
|
||||
{{ $t('label.diskiopswriterate') }}
|
||||
<a-tooltip :title="apiParams.iopswriterate.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['diskiopswriterate', {
|
||||
rules: [{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value && (isNaN(value) || value <= 0)) {
|
||||
callback(this.$t('message.error.number'))
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}]
|
||||
}]"
|
||||
:placeholder="this.$t('label.diskiopswriterate')"/>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="!this.isSystem && this.qosType === 'storage'">
|
||||
<span slot="label">
|
||||
{{ $t('label.iscustomizeddiskiops') }}
|
||||
<a-tooltip :title="apiParams.customizediops.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-switch v-decorator="['iscustomizeddiskiops', {initialValue: this.isCustomizedDiskIops}]" :defaultChecked="this.isCustomizedDiskIops" @change="val => { this.isCustomizedDiskIops = val }" />
|
||||
</a-form-item>
|
||||
<a-form-item v-if="this.qosType === 'storage' && !this.isCustomizedDiskIops">
|
||||
<span slot="label">
|
||||
{{ $t('label.diskiopsmin') }}
|
||||
<a-tooltip :title="apiParams.miniops.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['diskiopsmin', {
|
||||
rules: [{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value && (isNaN(value) || value <= 0)) {
|
||||
callback(this.$t('message.error.number'))
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}]
|
||||
}]"
|
||||
:placeholder="this.$t('label.diskiopsmin')"/>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="this.qosType === 'storage' && !this.isCustomizedDiskIops">
|
||||
<span slot="label">
|
||||
{{ $t('label.diskiopsmax') }}
|
||||
<a-tooltip :title="apiParams.maxiops.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['diskiopsmax', {
|
||||
rules: [{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value && (isNaN(value) || value <= 0)) {
|
||||
callback(this.$t('message.error.number'))
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}]
|
||||
}]"
|
||||
:placeholder="this.$t('label.diskiopsmax')"/>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="!this.isSystem && this.qosType === 'storage'">
|
||||
<span slot="label">
|
||||
{{ $t('label.hypervisorsnapshotreserve') }}
|
||||
<a-tooltip :title="apiParams.hypervisorsnapshotreserve.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['hypervisorsnapshotreserve', {
|
||||
rules: [{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value && (isNaN(value) || value <= 0)) {
|
||||
callback(this.$t('message.error.number'))
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}]
|
||||
}]"
|
||||
:placeholder="this.$t('label.hypervisorsnapshotreserve')"/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.offerha') }}
|
||||
<a-tooltip :title="apiParams.offerha.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-switch v-decorator="['offerha', {initialValue: false}]" />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.dynamicscalingenabled') }}
|
||||
<a-tooltip :title="apiParams.dynamicscalingenabled.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-switch v-decorator="['dynamicscalingenabled', {initialValue: dynamicscalingenabled}]" :checked="dynamicscalingenabled" @change="val => { dynamicscalingenabled = val }"/>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="this.isAdmin()">
|
||||
<span slot="label">
|
||||
{{ $t('label.hosttags') }}
|
||||
<a-tooltip :title="apiParams.hosttags.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['hosttags', {}]"
|
||||
:placeholder="this.$t('label.hosttags')"/>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="this.isAdmin()">
|
||||
<span slot="label">
|
||||
{{ $t('label.storagetags') }}
|
||||
<a-tooltip :title="apiParams.tags.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-select
|
||||
mode="tags"
|
||||
v-decorator="['storagetags', {}]"
|
||||
showSearch
|
||||
optionFilterProp="children"
|
||||
:filterOption="(input, option) => {
|
||||
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}"
|
||||
:loading="storageTagLoading"
|
||||
:placeholder="$t('label.storagetags')"
|
||||
v-if="this.isAdmin()">
|
||||
<a-select-option v-for="opt in storageTags" :key="opt">
|
||||
{{ opt }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.limitcpuuse') }}
|
||||
<a-tooltip :title="apiParams.limitcpuuse.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-switch v-decorator="['limitcpuuse', {initialValue: false}]" />
|
||||
</a-form-item>
|
||||
<a-form-item v-if="!this.isSystem">
|
||||
<span slot="label">
|
||||
{{ $t('label.isvolatile') }}
|
||||
<a-tooltip :title="apiParams.isvolatile.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-switch v-decorator="['isvolatile', {initialValue: false}]" />
|
||||
</a-form-item>
|
||||
<a-form-item v-if="!this.isSystem && this.isAdmin()">
|
||||
<span slot="label">
|
||||
{{ $t('label.deploymentplanner') }}
|
||||
<a-tooltip :title="apiParams.deploymentplanner.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-row :gutter="12">
|
||||
<a-col :md="12" :lg="12">
|
||||
<a-form-item>
|
||||
<tooltip-label slot="label" :title="$t('label.offerha')" :tooltip="apiParams.offerha.description"/>
|
||||
<a-switch v-decorator="['offerha', {initialValue: false}]" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :lg="12">
|
||||
<a-form-item>
|
||||
<tooltip-label slot="label" :title="$t('label.dynamicscalingenabled')" :tooltip="apiParams.dynamicscalingenabled.description"/>
|
||||
<a-switch v-decorator="['dynamicscalingenabled', {initialValue: dynamicscalingenabled}]" :checked="dynamicscalingenabled" @change="val => { dynamicscalingenabled = val }"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="12">
|
||||
<a-col :md="12" :lg="12">
|
||||
<a-form-item v-if="isAdmin()">
|
||||
<tooltip-label slot="label" :title="$t('label.hosttags')" :tooltip="apiParams.hosttags.description"/>
|
||||
<a-input
|
||||
v-decorator="['hosttags', {}]"
|
||||
:placeholder="apiParams.hosttags.description"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :lg="12">
|
||||
<a-form-item v-if="isAdmin()">
|
||||
<tooltip-label slot="label" :title="$t('label.storagetags')" :tooltip="apiParams.tags.description"/>
|
||||
<a-select
|
||||
mode="tags"
|
||||
v-decorator="['storagetags', {}]"
|
||||
showSearch
|
||||
optionFilterProp="children"
|
||||
:filterOption="(input, option) => {
|
||||
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}"
|
||||
:loading="storageTagLoading"
|
||||
:placeholder="apiParams.tags.description"
|
||||
v-if="isAdmin()">
|
||||
<a-select-option v-for="opt in storageTags" :key="opt">
|
||||
{{ opt }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="12">
|
||||
<a-col :md="12" :lg="12">
|
||||
<a-form-item>
|
||||
<tooltip-label slot="label" :title="$t('label.limitcpuuse')" :tooltip="apiParams.limitcpuuse.description"/>
|
||||
<a-switch v-decorator="['limitcpuuse', {initialValue: false}]" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :lg="12">
|
||||
<a-form-item v-if="!isSystem">
|
||||
<tooltip-label slot="label" :title="$t('label.isvolatile')" :tooltip="apiParams.isvolatile.description"/>
|
||||
<a-switch v-decorator="['isvolatile', {initialValue: false}]" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-form-item v-if="!isSystem && isAdmin()">
|
||||
<tooltip-label slot="label" :title="$t('label.deploymentplanner')" :tooltip="apiParams.deploymentplanner.description"/>
|
||||
<a-select
|
||||
v-decorator="['deploymentplanner', {
|
||||
initialValue: this.deploymentPlanners.length > 0 ? this.deploymentPlanners[0].name : ''
|
||||
initialValue: deploymentPlanners.length > 0 ? deploymentPlanners[0].name : ''
|
||||
}]"
|
||||
showSearch
|
||||
optionFilterProp="children"
|
||||
@ -610,20 +374,20 @@
|
||||
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}"
|
||||
:loading="deploymentPlannerLoading"
|
||||
:placeholder="this.$t('label.deploymentplanner')"
|
||||
@change="val => { this.handleDeploymentPlannerChange(val) }">
|
||||
<a-select-option v-for="(opt) in this.deploymentPlanners" :key="opt.name">
|
||||
:placeholder="apiParams.deploymentplanner.description"
|
||||
@change="val => { handleDeploymentPlannerChange(val) }">
|
||||
<a-select-option v-for="(opt) in deploymentPlanners" :key="opt.name">
|
||||
{{ opt.name || opt.description }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.plannermode')" v-if="this.plannerModeVisible">
|
||||
<a-form-item :label="$t('label.plannermode')" v-if="plannerModeVisible">
|
||||
<a-radio-group
|
||||
v-decorator="['plannermode', {
|
||||
initialValue: this.plannerMode
|
||||
initialValue: plannerMode
|
||||
}]"
|
||||
buttonStyle="solid"
|
||||
@change="selected => { this.handlePlannerModeChange(selected.target.value) }">
|
||||
@change="selected => { handlePlannerModeChange(selected.target.value) }">
|
||||
<a-radio-button value="">
|
||||
{{ $t('label.none') }}
|
||||
</a-radio-button>
|
||||
@ -635,19 +399,19 @@
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.gpu')" v-if="!this.isSystem">
|
||||
<a-form-item :label="$t('label.gpu')" v-if="!isSystem">
|
||||
<a-radio-group
|
||||
v-decorator="['pcidevice', {
|
||||
initialValue: this.selectedGpu
|
||||
initialValue: selectedGpu
|
||||
}]"
|
||||
buttonStyle="solid"
|
||||
@change="selected => { this.handleGpuChange(selected.target.value) }">
|
||||
<a-radio-button v-for="(opt, optIndex) in this.gpuTypes" :key="optIndex" :value="opt.value">
|
||||
@change="selected => { handleGpuChange(selected.target.value) }">
|
||||
<a-radio-button v-for="(opt, optIndex) in gpuTypes" :key="optIndex" :value="opt.value">
|
||||
{{ opt.title }}
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.vgputype')" v-if="this.vGpuVisible">
|
||||
<a-form-item :label="$t('label.vgputype')" v-if="vGpuVisible">
|
||||
<a-select
|
||||
v-decorator="['vgputype', {}]"
|
||||
showSearch
|
||||
@ -655,22 +419,17 @@
|
||||
:filterOption="(input, option) => {
|
||||
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}"
|
||||
:placeholder="this.$t('label.vgputype')">
|
||||
<a-select-option v-for="(opt, optIndex) in this.vGpuTypes" :key="optIndex">
|
||||
:placeholder="$t('label.vgputype')">
|
||||
<a-select-option v-for="(opt, optIndex) in vGpuTypes" :key="optIndex">
|
||||
{{ opt }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.ispublic')" v-show="this.isAdmin()">
|
||||
<a-switch v-decorator="['ispublic', {initialValue: this.isPublic}]" :checked="this.isPublic" @change="val => { this.isPublic = val }" />
|
||||
<a-form-item :label="$t('label.ispublic')" v-show="isAdmin()">
|
||||
<a-switch v-decorator="['ispublic', {initialValue: isPublic}]" :checked="isPublic" @change="val => { isPublic = val }" />
|
||||
</a-form-item>
|
||||
<a-form-item v-if="!this.isPublic">
|
||||
<span slot="label">
|
||||
{{ $t('label.domain') }}
|
||||
<a-tooltip :title="apiParams.domainid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-form-item v-if="!isPublic">
|
||||
<tooltip-label slot="label" :title="$t('label.domainid')" :tooltip="apiParams.domainid.description"/>
|
||||
<a-select
|
||||
mode="multiple"
|
||||
v-decorator="['domainid', {
|
||||
@ -687,19 +446,14 @@
|
||||
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}"
|
||||
:loading="domainLoading"
|
||||
:placeholder="this.$t('label.domainid')">
|
||||
<a-select-option v-for="(opt, optIndex) in this.domains" :key="optIndex">
|
||||
:placeholder="apiParams.domainid.description">
|
||||
<a-select-option v-for="(opt, optIndex) in domains" :key="optIndex">
|
||||
{{ opt.path || opt.name || opt.description }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="!this.isSystem">
|
||||
<span slot="label">
|
||||
{{ $t('label.zoneid') }}
|
||||
<a-tooltip :title="apiParams.zoneid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-form-item v-if="!isSystem">
|
||||
<tooltip-label slot="label" :title="$t('label.zoneid')" :tooltip="apiParams.zoneid.description"/>
|
||||
<a-select
|
||||
id="zone-selection"
|
||||
mode="multiple"
|
||||
@ -708,7 +462,7 @@
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value && value.length > 1 && value.indexOf(0) !== -1) {
|
||||
callback(this.$t('message.error.zone.combined'))
|
||||
callback($t('message.error.zone.combined'))
|
||||
}
|
||||
callback()
|
||||
}
|
||||
@ -722,31 +476,26 @@
|
||||
}"
|
||||
@select="val => fetchvSphereStoragePolicies(val)"
|
||||
:loading="zoneLoading"
|
||||
:placeholder="this.$t('label.zoneid')">
|
||||
<a-select-option v-for="(opt, optIndex) in this.zones" :key="optIndex">
|
||||
:placeholder="apiParams.zoneid.description">
|
||||
<a-select-option v-for="(opt, optIndex) in zones" :key="optIndex">
|
||||
{{ opt.name || opt.description }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="'listVsphereStoragePolicies' in $store.getters.apis && storagePolicies !== null">
|
||||
<span slot="label">
|
||||
{{ $t('label.vmware.storage.policy') }}
|
||||
<a-tooltip :title="apiParams.storagetype.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.vmware.storage.polic')" :tooltip="apiParams.storagepolicy.description"/>
|
||||
<a-select
|
||||
v-decorator="['storagepolicy']"
|
||||
:placeholder="apiParams.storagepolicy.description">
|
||||
<a-select-option v-for="policy in this.storagePolicies" :key="policy.id">
|
||||
<a-select-option v-for="policy in storagePolicies" :key="policy.id">
|
||||
{{ policy.name || policy.id }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<div :span="24" class="action-button">
|
||||
<a-button @click="closeAction">{{ this.$t('label.cancel') }}</a-button>
|
||||
<a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
|
||||
<a-button @click="closeAction">{{ $t('label.cancel') }}</a-button>
|
||||
<a-button :loading="loading" type="primary" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
|
||||
</div>
|
||||
</a-spin>
|
||||
</div>
|
||||
@ -754,16 +503,32 @@
|
||||
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import TooltipLabel from '@/components/widgets/TooltipLabel'
|
||||
|
||||
export default {
|
||||
name: 'AddServiceOffering',
|
||||
props: {
|
||||
},
|
||||
components: {
|
||||
TooltipLabel
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
isSystem: false,
|
||||
naturalNumberRule: {
|
||||
validator: (rule, value, callback) => {
|
||||
if (value && (isNaN(value) || value <= 0)) {
|
||||
callback(this.$t('message.error.number'))
|
||||
}
|
||||
callback()
|
||||
}
|
||||
},
|
||||
wholeNumberRule: {
|
||||
validator: (rule, value, callback) => {
|
||||
if (value && (isNaN(value) || value < 0)) {
|
||||
callback(this.$t('message.error.number'))
|
||||
}
|
||||
callback()
|
||||
}
|
||||
},
|
||||
storageType: 'shared',
|
||||
provisioningType: 'thin',
|
||||
cacheMode: 'none',
|
||||
@ -1119,7 +884,7 @@ export default {
|
||||
.form-layout {
|
||||
width: 80vw;
|
||||
@media (min-width: 800px) {
|
||||
width: 500px;
|
||||
width: 700px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -23,45 +23,30 @@
|
||||
@submit="handleSubmit"
|
||||
layout="vertical">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.name') }}
|
||||
<a-tooltip :title="apiParams.name.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.name')" :tooltip="apiParams.name.description"/>
|
||||
<a-input
|
||||
autoFocus
|
||||
v-decorator="['name', {
|
||||
rules: [{ required: true, message: $t('message.error.required.input') }]
|
||||
}]"
|
||||
:placeholder="this.$t('label.name')"/>
|
||||
:placeholder="apiParams.name.description"/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.displaytext') }}
|
||||
<a-tooltip :title="apiParams.displaytext.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.displaytext')" :tooltip="apiParams.displaytext.description"/>
|
||||
<a-input
|
||||
v-decorator="['displaytext', {
|
||||
rules: [{ required: true, message: $t('message.error.required.input') }]
|
||||
}]"
|
||||
:placeholder="this.$t('label.displaytext')"/>
|
||||
:placeholder="apiParams.displaytext.description"/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.storagetype') }}
|
||||
<a-tooltip :title="apiParams.storagetype.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.storagetype')" :tooltip="apiParams.storagetype.description"/>
|
||||
<a-radio-group
|
||||
v-decorator="['storagetype', {
|
||||
initialValue: this.storageType
|
||||
initialValue: storageType
|
||||
}]"
|
||||
buttonStyle="solid"
|
||||
@change="selected => { this.handleStorageTypeChange(selected.target.value) }">
|
||||
@change="selected => { handleStorageTypeChange(selected.target.value) }">
|
||||
<a-radio-button value="shared">
|
||||
{{ $t('label.shared') }}
|
||||
</a-radio-button>
|
||||
@ -71,18 +56,13 @@
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.provisioningtype') }}
|
||||
<a-tooltip :title="apiParams.provisioningtype.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.provisioningtype')" :tooltip="apiParams.provisioningtype.description"/>
|
||||
<a-radio-group
|
||||
v-decorator="['provisioningtype', {
|
||||
initialValue: this.provisioningType
|
||||
initialValue: provisioningType
|
||||
}]"
|
||||
buttonStyle="solid"
|
||||
@change="selected => { this.handleProvisioningTypeChange(selected.target.value) }">
|
||||
@change="selected => { handleProvisioningTypeChange(selected.target.value) }">
|
||||
<a-radio-button value="thin">
|
||||
{{ $t('label.provisioningtype.thin') }}
|
||||
</a-radio-button>
|
||||
@ -95,21 +75,11 @@
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.customdisksize') }}
|
||||
<a-tooltip :title="apiParams.customized.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-switch v-decorator="['customdisksize', { initialValue: this.isCustomDiskSize }]" :checked="this.isCustomDiskSize" @change="val => { this.isCustomDiskSize = val }" />
|
||||
<tooltip-label slot="label" :title="$t('label.customdisksize')" :tooltip="apiParams.customized.description"/>
|
||||
<a-switch v-decorator="['customdisksize', { initialValue: isCustomDiskSize }]" :checked="isCustomDiskSize" @change="val => { isCustomDiskSize = val }" />
|
||||
</a-form-item>
|
||||
<a-form-item v-if="!this.isCustomDiskSize">
|
||||
<span slot="label">
|
||||
{{ $t('label.disksize') }}
|
||||
<a-tooltip :title="apiParams.disksize.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-form-item v-if="!isCustomDiskSize">
|
||||
<tooltip-label slot="label" :title="$t('label.disksize')" :tooltip="apiParams.disksize.description"/>
|
||||
<a-input
|
||||
v-decorator="['disksize', {
|
||||
rules: [
|
||||
@ -117,22 +87,22 @@
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value && (isNaN(value) || value <= 0)) {
|
||||
callback(this.$t('message.error.number'))
|
||||
callback($t('message.error.number'))
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}
|
||||
]
|
||||
}]"
|
||||
:placeholder="this.$t('label.disksize')"/>
|
||||
:placeholder="apiParams.disksize.description"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.qostype')">
|
||||
<a-radio-group
|
||||
v-decorator="['qostype', {
|
||||
initialValue: this.qosType
|
||||
initialValue: qosType
|
||||
}]"
|
||||
buttonStyle="solid"
|
||||
@change="selected => { this.handleQosTypeChange(selected.target.value) }">
|
||||
@change="selected => { handleQosTypeChange(selected.target.value) }">
|
||||
<a-radio-button value="">
|
||||
{{ $t('label.none') }}
|
||||
</a-radio-button>
|
||||
@ -144,168 +114,123 @@
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="this.qosType === 'hypervisor'">
|
||||
<span slot="label">
|
||||
{{ $t('label.diskbytesreadrate') }}
|
||||
<a-tooltip :title="apiParams.bytesreadrate.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-form-item v-if="qosType === 'hypervisor'">
|
||||
<tooltip-label slot="label" :title="$t('label.diskbytesreadrate')" :tooltip="apiParams.bytesreadrate.description"/>
|
||||
<a-input
|
||||
v-decorator="['diskbytesreadrate', {
|
||||
rules: [{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value && (isNaN(value) || value <= 0)) {
|
||||
callback(this.$t('message.error.number'))
|
||||
callback($t('message.error.number'))
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}]
|
||||
}]"
|
||||
:placeholder="this.$t('label.diskbytesreadrate')"/>
|
||||
:placeholder="apiParams.bytesreadrate.description"/>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="this.qosType === 'hypervisor'">
|
||||
<span slot="label">
|
||||
{{ $t('label.diskbyteswriterate') }}
|
||||
<a-tooltip :title="apiParams.byteswriterate.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-form-item v-if="qosType === 'hypervisor'">
|
||||
<tooltip-label slot="label" :title="$t('label.diskbyteswriterate')" :tooltip="apiParams.byteswriterate.description"/>
|
||||
<a-input
|
||||
v-decorator="['diskbyteswriterate', {
|
||||
rules: [{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value && (isNaN(value) || value <= 0)) {
|
||||
callback(this.$t('message.error.number'))
|
||||
callback($t('message.error.number'))
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}]
|
||||
}]"
|
||||
:placeholder="this.$t('label.diskbyteswriterate')"/>
|
||||
:placeholder="apiParams.byteswriterate.description"/>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="this.qosType === 'hypervisor'">
|
||||
<span slot="label">
|
||||
{{ $t('label.diskiopsreadrate') }}
|
||||
<a-tooltip :title="apiParams.iopsreadrate.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-form-item v-if="qosType === 'hypervisor'">
|
||||
<tooltip-label slot="label" :title="$t('label.diskiopsreadrate')" :tooltip="apiParams.iopsreadrate.description"/>
|
||||
<a-input
|
||||
v-decorator="['diskiopsreadrate', {
|
||||
rules: [{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value && (isNaN(value) || value <= 0)) {
|
||||
callback(this.$t('message.error.number'))
|
||||
callback($t('message.error.number'))
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}]
|
||||
}]"
|
||||
:placeholder="this.$t('label.diskiopsreadrate')"/>
|
||||
:placeholder="apiParams.iopsreadrate.description"/>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="this.qosType === 'hypervisor'">
|
||||
<span slot="label">
|
||||
{{ $t('label.diskiopswriterate') }}
|
||||
<a-tooltip :title="apiParams.iopswriterate.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-form-item v-if="qosType === 'hypervisor'">
|
||||
<tooltip-label slot="label" :title="$t('label.diskiopswriterate')" :tooltip="apiParams.iopswriterate.description"/>
|
||||
<a-input
|
||||
v-decorator="['diskiopswriterate', {
|
||||
rules: [{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value && (isNaN(value) || value <= 0)) {
|
||||
callback(this.$t('message.error.number'))
|
||||
callback($t('message.error.number'))
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}]
|
||||
}]"
|
||||
:placeholder="this.$t('label.diskiopswriterate')"/>
|
||||
:placeholder="apiParams.iopswriterate.description"/>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="this.qosType === 'storage'">
|
||||
<span slot="label">
|
||||
{{ $t('label.iscustomizeddiskiops') }}
|
||||
<a-tooltip :title="apiParams.customizediops.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-switch v-decorator="['iscustomizeddiskiops']" :checked="this.isCustomizedDiskIops" @change="val => { this.isCustomizedDiskIops = val }" />
|
||||
<a-form-item v-if="qosType === 'storage'">
|
||||
<tooltip-label slot="label" :title="$t('label.iscustomizeddiskiops')" :tooltip="apiParams.customizediops.description"/>
|
||||
<a-switch v-decorator="['iscustomizeddiskiops']" :checked="isCustomizedDiskIops" @change="val => { isCustomizedDiskIops = val }" />
|
||||
</a-form-item>
|
||||
<a-form-item v-if="this.qosType === 'storage' && !this.isCustomizedDiskIops">
|
||||
<span slot="label">
|
||||
{{ $t('label.diskiopsmin') }}
|
||||
<a-tooltip :title="apiParams.miniops.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-form-item v-if="qosType === 'storage' && !isCustomizedDiskIops">
|
||||
<tooltip-label slot="label" :title="$t('label.diskiopsmin')" :tooltip="apiParams.miniops.description"/>
|
||||
<a-input
|
||||
v-decorator="['diskiopsmin', {
|
||||
rules: [{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value && (isNaN(value) || value <= 0)) {
|
||||
callback(this.$t('message.error.number'))
|
||||
callback($t('message.error.number'))
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}]
|
||||
}]"
|
||||
:placeholder="this.$t('label.diskiopsmin')"/>
|
||||
:placeholder="apiParams.miniops.description"/>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="this.qosType === 'storage' && !this.isCustomizedDiskIops">
|
||||
<span slot="label">
|
||||
{{ $t('label.diskiopsmax') }}
|
||||
<a-tooltip :title="apiParams.maxiops.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-form-item v-if="qosType === 'storage' && !isCustomizedDiskIops">
|
||||
<tooltip-label slot="label" :title="$t('label.diskiopsmax')" :tooltip="apiParams.maxiops.description"/>
|
||||
<a-input
|
||||
v-decorator="['diskiopsmax', {
|
||||
rules: [{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value && (isNaN(value) || value <= 0)) {
|
||||
callback(this.$t('message.error.number'))
|
||||
callback($t('message.error.number'))
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}]
|
||||
}]"
|
||||
:placeholder="this.$t('label.diskiopsmax')"/>
|
||||
:placeholder="apiParams.maxiops.description"/>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="this.qosType === 'storage'">
|
||||
<span slot="label">
|
||||
{{ $t('label.hypervisorsnapshotreserve') }}
|
||||
<a-tooltip :title="apiParams.hypervisorsnapshotreserve.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-form-item v-if="qosType === 'storage'">
|
||||
<tooltip-label slot="label" :title="$t('label.hypervisorsnapshotreserve')" :tooltip="apiParams.hypervisorsnapshotreserve.description"/>
|
||||
<a-input
|
||||
v-decorator="['hypervisorsnapshotreserve', {
|
||||
rules: [{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value && (isNaN(value) || value <= 0)) {
|
||||
callback(this.$t('message.error.number'))
|
||||
callback($t('message.error.number'))
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}]
|
||||
}]"
|
||||
:placeholder="this.$t('label.hypervisorsnapshotreserve')"/>
|
||||
:placeholder="apiParams.hypervisorsnapshotreserve.description"/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.writecachetype') }}
|
||||
<a-tooltip :title="apiParams.cachemode.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.writecachetype')" :tooltip="apiParams.cachemode.description"/>
|
||||
<a-radio-group
|
||||
v-decorator="['writecachetype', {
|
||||
initialValue: this.writeCacheType
|
||||
initialValue: writeCacheType
|
||||
}]"
|
||||
buttonStyle="solid"
|
||||
@change="selected => { this.handleWriteCacheTypeChange(selected.target.value) }">
|
||||
@change="selected => { handleWriteCacheTypeChange(selected.target.value) }">
|
||||
<a-radio-button value="none">
|
||||
{{ $t('label.nodiskcache') }}
|
||||
</a-radio-button>
|
||||
@ -317,13 +242,8 @@
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="this.isAdmin()">
|
||||
<span slot="label">
|
||||
{{ $t('label.storagetags') }}
|
||||
<a-tooltip :title="apiParams.tags.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-form-item v-if="isAdmin()">
|
||||
<tooltip-label slot="label" :title="$t('label.storagetags')" :tooltip="apiParams.tags.description"/>
|
||||
<a-select
|
||||
mode="tags"
|
||||
v-decorator="['tags', {}]"
|
||||
@ -333,23 +253,18 @@
|
||||
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}"
|
||||
:loading="storageTagLoading"
|
||||
:placeholder="this.$t('label.tags')"
|
||||
v-if="this.isAdmin()">
|
||||
<a-select-option v-for="(opt) in this.storageTags" :key="opt">
|
||||
:placeholder="apiParams.tags.description"
|
||||
v-if="isAdmin()">
|
||||
<a-select-option v-for="(opt) in storageTags" :key="opt">
|
||||
{{ opt }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.ispublic')" v-show="this.isAdmin()">
|
||||
<a-switch v-decorator="['ispublic', {initialValue: this.isPublic}]" :checked="this.isPublic" @change="val => { this.isPublic = val }" />
|
||||
<a-form-item :label="$t('label.ispublic')" v-show="isAdmin()">
|
||||
<a-switch v-decorator="['ispublic', {initialValue: isPublic}]" :checked="isPublic" @change="val => { isPublic = val }" />
|
||||
</a-form-item>
|
||||
<a-form-item v-if="!this.isPublic">
|
||||
<span slot="label">
|
||||
{{ $t('label.domainid') }}
|
||||
<a-tooltip :title="apiParams.domainid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-form-item v-if="!isPublic">
|
||||
<tooltip-label slot="label" :title="$t('label.domainid')" :tooltip="apiParams.domainid.description"/>
|
||||
<a-select
|
||||
mode="multiple"
|
||||
v-decorator="['domainid', {
|
||||
@ -366,19 +281,14 @@
|
||||
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}"
|
||||
:loading="domainLoading"
|
||||
:placeholder="this.$t('label.domainid')">
|
||||
<a-select-option v-for="(opt, optIndex) in this.domains" :key="optIndex">
|
||||
:placeholder="apiParams.domainid.description">
|
||||
<a-select-option v-for="(opt, optIndex) in domains" :key="optIndex">
|
||||
{{ opt.path || opt.name || opt.description }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.zoneid') }}
|
||||
<a-tooltip :title="apiParams.zoneid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.zoneid')" :tooltip="apiParams.zoneid.description"/>
|
||||
<a-select
|
||||
id="zone-selection"
|
||||
mode="multiple"
|
||||
@ -387,7 +297,7 @@
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value && value.length > 1 && value.indexOf(0) !== -1) {
|
||||
callback(this.$t('message.error.zone.combined'))
|
||||
callback($t('message.error.zone.combined'))
|
||||
}
|
||||
callback()
|
||||
}
|
||||
@ -401,31 +311,26 @@
|
||||
}"
|
||||
@select="val => fetchvSphereStoragePolicies(val)"
|
||||
:loading="zoneLoading"
|
||||
:placeholder="this.$t('label.zoneid')">
|
||||
<a-select-option v-for="(opt, optIndex) in this.zones" :key="optIndex">
|
||||
:placeholder="apiParams.zoneid.description">
|
||||
<a-select-option v-for="(opt, optIndex) in zones" :key="optIndex">
|
||||
{{ opt.name || opt.description }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="'listVsphereStoragePolicies' in $store.getters.apis && storagePolicies !== null">
|
||||
<span slot="label">
|
||||
{{ $t('label.vmware.storage.policy') }}
|
||||
<a-tooltip :title="apiParams.storagetype.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.vmware.storage.policy')" :tooltip="apiParams.storagepolicy.description"/>
|
||||
<a-select
|
||||
v-decorator="['storagepolicy']"
|
||||
:placeholder="apiParams.storagepolicy.description">
|
||||
<a-select-option v-for="policy in this.storagePolicies" :key="policy.id">
|
||||
<a-select-option v-for="policy in storagePolicies" :key="policy.id">
|
||||
{{ policy.name || policy.id }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<div :span="24" class="action-button">
|
||||
<a-button @click="closeAction">{{ this.$t('label.cancel') }}</a-button>
|
||||
<a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
|
||||
<a-button @click="closeAction">{{ $t('label.cancel') }}</a-button>
|
||||
<a-button :loading="loading" type="primary" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
|
||||
</div>
|
||||
</a-spin>
|
||||
</div>
|
||||
@ -433,16 +338,12 @@
|
||||
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import TooltipLabel from '@/components/widgets/TooltipLabel'
|
||||
|
||||
export default {
|
||||
name: 'AddDiskOffering',
|
||||
props: {
|
||||
resource: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
components: {
|
||||
TooltipLabel
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
@ -23,65 +23,45 @@
|
||||
@submit="handleSubmit"
|
||||
layout="vertical">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.name') }}
|
||||
<a-tooltip :title="apiParams.name.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.name')" :tooltip="apiParams.name.description"/>
|
||||
<a-input
|
||||
autoFocus
|
||||
v-decorator="['name', {
|
||||
rules: [{ required: true, message: $t('message.error.name') }]
|
||||
}]"
|
||||
:placeholder="this.$t('label.name')"/>
|
||||
:placeholder="apiParams.name.description"/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.displaytext') }}
|
||||
<a-tooltip :title="apiParams.displaytext.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.displaytext')" :tooltip="apiParams.displaytext.description"/>
|
||||
<a-input
|
||||
v-decorator="['displaytext', {
|
||||
rules: [{ required: true, message: $t('message.error.description') }]
|
||||
}]"
|
||||
:placeholder="this.$t('label.displaytext')"/>
|
||||
:placeholder="apiParams.displaytext.description"/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.networkrate') }}
|
||||
<a-tooltip :title="apiParams.networkrate.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.networkrate')" :tooltip="apiParams.networkrate.description"/>
|
||||
<a-input
|
||||
v-decorator="['networkrate', {
|
||||
rules: [{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value && (isNaN(value) || value <= 0)) {
|
||||
callback(this.$t('message.validate.number'))
|
||||
callback($t('message.validate.number'))
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}]
|
||||
}]"
|
||||
:placeholder="this.$t('label.networkrate')"/>
|
||||
:placeholder="apiParams.networkrate.description"/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.guestiptype') }}
|
||||
<a-tooltip :title="apiParams.guestiptype.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.guestiptype')" :tooltip="apiParams.guestiptype.description"/>
|
||||
<a-radio-group
|
||||
v-decorator="['guestiptype', {
|
||||
initialValue: this.guestType
|
||||
initialValue: guestType
|
||||
}]"
|
||||
buttonStyle="solid"
|
||||
@change="selected => { this.handleGuestTypeChange(selected.target.value) }">
|
||||
@change="selected => { handleGuestTypeChange(selected.target.value) }">
|
||||
<a-radio-button value="isolated">
|
||||
{{ $t('label.isolated') }}
|
||||
</a-radio-button>
|
||||
@ -93,37 +73,28 @@
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="this.guestType !== 'shared'">
|
||||
<span slot="label">
|
||||
{{ $t('label.ispersistent') }}
|
||||
<a-tooltip :title="apiParams.ispersistent.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-switch v-decorator="['ispersistent', {initialValue: false}]" />
|
||||
<a-row :gutter="12" v-if="guestType !== 'shared'">
|
||||
<a-col :md="12" :lg="12">
|
||||
<a-form-item>
|
||||
<tooltip-label slot="label" :title="$t('label.ispersistent')" :tooltip="apiParams.ispersistent.description"/>
|
||||
<a-switch v-decorator="['ispersistent', {initialValue: false}]" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :lg="12">
|
||||
<a-form-item>
|
||||
<tooltip-label slot="label" :title="$t('label.specifyvlan')" :tooltip="apiParams.specifyvlan.description"/>
|
||||
<a-switch v-decorator="['specifyvlan', {initialValue: true}]" :defaultChecked="true" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-form-item v-if="guestType === 'isolated'">
|
||||
<tooltip-label slot="label" :title="$t('label.vpc')" :tooltip="apiParams.forvpc.description"/>
|
||||
<a-switch v-decorator="['forvpc', {initialValue: forVpc}]" :defaultChecked="forVpc" @change="val => { handleForVpcChange(val) }" />
|
||||
</a-form-item>
|
||||
<a-form-item v-if="this.guestType !== 'shared'">
|
||||
<span slot="label">
|
||||
{{ $t('label.specifyvlan') }}
|
||||
<a-tooltip :title="apiParams.specifyvlan.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-switch v-decorator="['specifyvlan', {initialValue: true}]" :defaultChecked="true" />
|
||||
</a-form-item>
|
||||
<a-form-item v-if="this.guestType === 'isolated'">
|
||||
<span slot="label">
|
||||
{{ $t('label.vpc') }}
|
||||
<a-tooltip :title="apiParams.forvpc.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-switch v-decorator="['forvpc', {initialValue: this.forVpc}]" :defaultChecked="this.forVpc" @change="val => { this.handleForVpcChange(val) }" />
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.userdatal2')" v-if="this.guestType === 'l2'">
|
||||
<a-form-item :label="$t('label.userdatal2')" v-if="guestType === 'l2'">
|
||||
<a-switch v-decorator="['userdatal2', {initialValue: false}]" />
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.lbtype')" v-if="this.forVpc && this.lbServiceChecked">
|
||||
<a-form-item :label="$t('label.lbtype')" v-if="forVpc && lbServiceChecked">
|
||||
<a-radio-group
|
||||
v-decorator="[' ', {
|
||||
initialValue: 'publicLb'
|
||||
@ -140,10 +111,10 @@
|
||||
<a-form-item :label="$t('label.promiscuousmode')">
|
||||
<a-radio-group
|
||||
v-decorator="['promiscuousmode', {
|
||||
initialValue: this.promiscuousMode
|
||||
initialValue: promiscuousMode
|
||||
}]"
|
||||
buttonStyle="solid"
|
||||
@change="selected => { this.handlePromiscuousModeChange(selected.target.value) }">
|
||||
@change="selected => { handlePromiscuousModeChange(selected.target.value) }">
|
||||
<a-radio-button value="">
|
||||
{{ $t('label.none') }}
|
||||
</a-radio-button>
|
||||
@ -158,10 +129,10 @@
|
||||
<a-form-item :label="$t('label.macaddresschanges')">
|
||||
<a-radio-group
|
||||
v-decorator="['macaddresschanges', {
|
||||
initialValue: this.macAddressChanges
|
||||
initialValue: macAddressChanges
|
||||
}]"
|
||||
buttonStyle="solid"
|
||||
@change="selected => { this.handleMacAddressChangesChange(selected.target.value) }">
|
||||
@change="selected => { handleMacAddressChangesChange(selected.target.value) }">
|
||||
<a-radio-button value="">
|
||||
{{ $t('label.none') }}
|
||||
</a-radio-button>
|
||||
@ -176,10 +147,10 @@
|
||||
<a-form-item :label="$t('label.forgedtransmits')">
|
||||
<a-radio-group
|
||||
v-decorator="['forgedtransmits', {
|
||||
initialValue: this.forgedTransmits
|
||||
initialValue: forgedTransmits
|
||||
}]"
|
||||
buttonStyle="solid"
|
||||
@change="selected => { this.handleForgedTransmitsChange(selected.target.value) }">
|
||||
@change="selected => { handleForgedTransmitsChange(selected.target.value) }">
|
||||
<a-radio-button value="">
|
||||
{{ $t('label.none') }}
|
||||
</a-radio-button>
|
||||
@ -191,15 +162,10 @@
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="this.guestType !== 'l2'">
|
||||
<span slot="label">
|
||||
{{ $t('label.supportedservices') }}
|
||||
<a-tooltip :title="apiParams.supportedservices.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-form-item v-if="guestType !== 'l2'">
|
||||
<tooltip-label slot="label" :title="$t('label.supportedservices')" :tooltip="apiParams.supportedservices.description"/>
|
||||
<div class="supported-services-container" scroll-to="last-child">
|
||||
<a-list itemLayout="horizontal" :dataSource="this.supportedServices">
|
||||
<a-list itemLayout="horizontal" :dataSource="supportedServices">
|
||||
<a-list-item slot="renderItem" slot-scope="item">
|
||||
<CheckBoxSelectPair
|
||||
v-decorator="['service.'+item.name, {}]"
|
||||
@ -213,22 +179,17 @@
|
||||
</a-list>
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="this.isVirtualRouterForAtLeastOneService">
|
||||
<span slot="label">
|
||||
{{ $t('label.serviceofferingid') }}
|
||||
<a-tooltip :title="apiParams.serviceofferingid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-form-item v-if="isVirtualRouterForAtLeastOneService">
|
||||
<tooltip-label slot="label" :title="$t('label.serviceofferingid')" :tooltip="apiParams.serviceofferingid.description"/>
|
||||
<a-select
|
||||
v-decorator="['serviceofferingid', {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: `${this.$t('message.error.select')}`
|
||||
message: $t('message.error.select')
|
||||
}
|
||||
],
|
||||
initialValue: this.serviceOfferings.length > 0 ? this.serviceOfferings[0].id : ''
|
||||
initialValue: serviceOfferings.length > 0 ? serviceOfferings[0].id : ''
|
||||
}]"
|
||||
showSearch
|
||||
optionFilterProp="children"
|
||||
@ -236,16 +197,16 @@
|
||||
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}"
|
||||
:loading="serviceOfferingLoading"
|
||||
:placeholder="this.$t('label.serviceofferingid')">
|
||||
<a-select-option v-for="(opt) in this.serviceOfferings" :key="opt.id">
|
||||
:placeholder="apiParams.serviceofferingid.description">
|
||||
<a-select-option v-for="(opt) in serviceOfferings" :key="opt.id">
|
||||
{{ opt.name || opt.description }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.redundantrouter')" v-if="(this.guestType === 'shared' || this.guestType === 'isolated') && this.sourceNatServiceChecked && !this.isVpcVirtualRouterForAtLeastOneService">
|
||||
<a-form-item :label="$t('label.redundantrouter')" v-if="(guestType === 'shared' || guestType === 'isolated') && sourceNatServiceChecked && !isVpcVirtualRouterForAtLeastOneService">
|
||||
<a-switch v-decorator="['redundantroutercapability', {initialValue: false}]" />
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.sourcenattype')" v-if="(this.guestType === 'shared' || this.guestType === 'isolated') && this.sourceNatServiceChecked">
|
||||
<a-form-item :label="$t('label.sourcenattype')" v-if="(guestType === 'shared' || guestType === 'isolated') && sourceNatServiceChecked">
|
||||
<a-radio-group
|
||||
v-decorator="['sourcenattype', {
|
||||
initialValue: 'peraccount'
|
||||
@ -259,10 +220,10 @@
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.service.lb.elasticlbcheckbox')" v-if="this.guestType == 'shared' && this.lbServiceChecked && this.lbServiceProvider === 'Netscaler'">
|
||||
<a-form-item :label="$t('label.service.lb.elasticlbcheckbox')" v-if="guestType == 'shared' && lbServiceChecked && lbServiceProvider === 'Netscaler'">
|
||||
<a-switch v-decorator="['elasticlb', {initialValue: false}]" />
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.service.lb.inlinemodedropdown')" v-if="(this.guestType === 'shared' || this.guestType === 'isolated') && this.lbServiceChecked && this.firewallServiceChecked && this.lbServiceProvider === 'F5BigIp' && this.firewallServiceProvider === 'JuniperSRX'">
|
||||
<a-form-item :label="$t('label.service.lb.inlinemodedropdown')" v-if="(guestType === 'shared' || guestType === 'isolated') && lbServiceChecked && firewallServiceChecked && lbServiceProvider === 'F5BigIp' && firewallServiceProvider === 'JuniperSRX'">
|
||||
<a-radio-group
|
||||
v-decorator="['inlinemode', {
|
||||
initialValue: 'false'
|
||||
@ -276,7 +237,7 @@
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.service.lb.netscaler.servicepackages')" v-if="(this.guestType === 'shared' || this.guestType === 'isolated') && this.lbServiceChecked && this.lbServiceProvider === 'Netscaler'">
|
||||
<a-form-item :label="$t('label.service.lb.netscaler.servicepackages')" v-if="(guestType === 'shared' || guestType === 'isolated') && lbServiceChecked && lbServiceProvider === 'Netscaler'">
|
||||
<a-select
|
||||
v-decorator="['netscalerservicepackages', {}]"
|
||||
showSearch
|
||||
@ -285,18 +246,18 @@
|
||||
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}"
|
||||
:loading="registeredServicePackageLoading"
|
||||
:placeholder="this.$t('label.service.lb.netscaler.servicepackages')">
|
||||
<a-select-option v-for="(opt, optIndex) in this.registeredServicePackages" :key="optIndex">
|
||||
:placeholder="$t('label.service.lb.netscaler.servicepackages')">
|
||||
<a-select-option v-for="(opt, optIndex) in registeredServicePackages" :key="optIndex">
|
||||
{{ opt.name || opt.description }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.service.lb.netscaler.servicepackages.description')" v-if="(this.guestType === 'shared' || this.guestType === 'isolated') && this.lbServiceChecked && this.lbServiceProvider === 'Netscaler'">
|
||||
<a-form-item :label="$t('label.service.lb.netscaler.servicepackages.description')" v-if="(guestType === 'shared' || guestType === 'isolated') && lbServiceChecked && lbServiceProvider === 'Netscaler'">
|
||||
<a-input
|
||||
v-decorator="['netscalerservicepackagesdescription', {}]"
|
||||
:placeholder="this.$t('label.service.lb.netscaler.servicepackages.description')"/>
|
||||
:placeholder="$t('label.service.lb.netscaler.servicepackages.description')"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.service.lb.lbisolationdropdown')" v-show="false">
|
||||
<a-form-item :title="$t('label.service.lb.lbisolationdropdown')" v-show="false">
|
||||
<a-radio-group
|
||||
v-decorator="['isolation', {
|
||||
initialValue: 'dedicated'
|
||||
@ -310,45 +271,30 @@
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.service.staticnat.elasticipcheckbox')" v-if="this.guestType == 'shared' && this.staticNatServiceChecked && this.staticNatServiceProvider === 'Netscaler'">
|
||||
<a-switch v-decorator="['elasticip', {initialValue: this.isElasticIp}]" :defaultChecked="this.isElasticIp" @change="val => { this.isElasticIp = val }" />
|
||||
<a-form-item :label="$t('label.service.staticnat.elasticipcheckbox')" v-if="guestType == 'shared' && staticNatServiceChecked && staticNatServiceProvider === 'Netscaler'">
|
||||
<a-switch v-decorator="['elasticip', {initialValue: isElasticIp}]" :defaultChecked="isElasticIp" @change="val => { isElasticIp = val }" />
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.service.staticnat.associatepublicip')" v-if="this.isElasticIp && this.staticNatServiceChecked && this.staticNatServiceProvider === 'Netscaler'">
|
||||
<a-form-item :label="$t('label.service.staticnat.associatepublicip')" v-if="isElasticIp && staticNatServiceChecked && staticNatServiceProvider === 'Netscaler'">
|
||||
<a-switch v-decorator="['associatepublicip', {initialValue: false}]" />
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.supportsstrechedl2subnet')" v-if="this.connectivityServiceChecked">
|
||||
<a-form-item :label="$t('label.supportsstrechedl2subnet')" v-if="connectivityServiceChecked">
|
||||
<a-switch v-decorator="['supportsstrechedl2subnet', {initialValue: false}]" />
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.supportspublicaccess')" v-show="false">
|
||||
<a-switch v-decorator="['supportspublicaccess', {initialValue: false}]" />
|
||||
</a-form-item>
|
||||
<a-form-item v-if="(this.guestType === 'shared' || this.guestType === 'isolated') && !this.isVpcVirtualRouterForAtLeastOneService">
|
||||
<span slot="label">
|
||||
{{ $t('label.conservemode') }}
|
||||
<a-tooltip :title="apiParams.conservemode.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-form-item v-if="(guestType === 'shared' || guestType === 'isolated') && !isVpcVirtualRouterForAtLeastOneService">
|
||||
<tooltip-label slot="label" :title="$t('label.conservemode')" :tooltip="apiParams.conservemode.description"/>
|
||||
<a-switch v-decorator="['conservemode', {initialValue: true}]" :defaultChecked="true" />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.tags') }}
|
||||
<a-tooltip :title="apiParams.tags.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.tags')" :tooltip="apiParams.tags.description"/>
|
||||
<a-input
|
||||
v-decorator="['tags', {}]"
|
||||
:placeholder="this.$t('label.tags')"/>
|
||||
:placeholder="apiParams.tags.description"/>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="this.requiredNetworkOfferingExists && this.guestType === 'isolated' && this.sourceNatServiceChecked">
|
||||
<span slot="label">
|
||||
{{ $t('label.availability') }}
|
||||
<a-tooltip :title="apiParams.availability.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-form-item v-if="requiredNetworkOfferingExists && guestType === 'isolated' && sourceNatServiceChecked">
|
||||
<tooltip-label slot="label" :title="$t('label.availability')" :tooltip="apiParams.availability.description"/>
|
||||
<a-radio-group
|
||||
v-decorator="['availability', {
|
||||
initialValue: 'optional'
|
||||
@ -362,13 +308,8 @@
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="this.firewallServiceChecked">
|
||||
<span slot="label">
|
||||
{{ $t('label.egressdefaultpolicy') }}
|
||||
<a-tooltip :title="apiParams.egressdefaultpolicy.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-form-item v-if="firewallServiceChecked">
|
||||
<tooltip-label slot="label" :title="$t('label.egressdefaultpolicy')" :tooltip="apiParams.egressdefaultpolicy.description"/>
|
||||
<a-radio-group
|
||||
v-decorator="['egressdefaultpolicy', {
|
||||
initialValue: 'allow'
|
||||
@ -382,23 +323,18 @@
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.ispublic')" v-show="this.isAdmin()">
|
||||
<a-switch v-decorator="['ispublic', {initialValue: this.isPublic}]" :defaultChecked="this.isPublic" @change="val => { this.isPublic = val }" />
|
||||
<a-form-item :label="$t('label.ispublic')" v-show="isAdmin()">
|
||||
<a-switch v-decorator="['ispublic', {initialValue: isPublic}]" :defaultChecked="isPublic" @change="val => { isPublic = val }" />
|
||||
</a-form-item>
|
||||
<a-form-item v-if="!this.isPublic">
|
||||
<span slot="label">
|
||||
{{ $t('label.domainid') }}
|
||||
<a-tooltip :title="apiParams.domainid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-form-item v-if="!isPublic">
|
||||
<tooltip-label slot="label" :title="$t('label.domainid')" :tooltip="apiParams.domainid.description"/>
|
||||
<a-select
|
||||
mode="multiple"
|
||||
v-decorator="['domainid', {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: `${this.$t('message.error.select')}`
|
||||
message: $t('message.error.select')
|
||||
}
|
||||
]
|
||||
}]"
|
||||
@ -408,19 +344,14 @@
|
||||
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}"
|
||||
:loading="domainLoading"
|
||||
:placeholder="this.$t('label.domain')">
|
||||
<a-select-option v-for="(opt, optIndex) in this.domains" :key="optIndex">
|
||||
:placeholder="apiParams.domainid.description">
|
||||
<a-select-option v-for="(opt, optIndex) in domains" :key="optIndex">
|
||||
{{ opt.path || opt.name || opt.description }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.zoneid') }}
|
||||
<a-tooltip :title="apiParams.zoneid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.zoneid')" :tooltip="apiParams.zoneid.description"/>
|
||||
<a-select
|
||||
id="zone-selection"
|
||||
mode="multiple"
|
||||
@ -442,25 +373,20 @@
|
||||
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}"
|
||||
:loading="zoneLoading"
|
||||
:placeholder="this.$t('label.zone')">
|
||||
<a-select-option v-for="(opt, optIndex) in this.zones" :key="optIndex">
|
||||
:placeholder="apiParams.zoneid.description">
|
||||
<a-select-option v-for="(opt, optIndex) in zones" :key="optIndex">
|
||||
{{ opt.name || opt.description }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="apiParams.enable">
|
||||
<span slot="label">
|
||||
{{ $t('label.enable.network.offering') }}
|
||||
<a-tooltip :title="apiParams.enable.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.enable.network.offering')" :tooltip="apiParams.enable.description"/>
|
||||
<a-switch v-decorator="['enable', {initialValue: false}]" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<div :span="24" class="action-button">
|
||||
<a-button @click="closeAction">{{ this.$t('label.cancel') }}</a-button>
|
||||
<a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
|
||||
<a-button @click="closeAction">{{ $t('label.cancel') }}</a-button>
|
||||
<a-button :loading="loading" type="primary" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
|
||||
</div>
|
||||
</a-spin>
|
||||
</div>
|
||||
@ -469,11 +395,13 @@
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import CheckBoxSelectPair from '@/components/CheckBoxSelectPair'
|
||||
import TooltipLabel from '@/components/widgets/TooltipLabel'
|
||||
|
||||
export default {
|
||||
name: 'AddNetworkOffering',
|
||||
components: {
|
||||
CheckBoxSelectPair
|
||||
CheckBoxSelectPair,
|
||||
TooltipLabel
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
@ -964,7 +892,7 @@ export default {
|
||||
width: 80vw;
|
||||
|
||||
@media (min-width: 800px) {
|
||||
width: 500px;
|
||||
width: 600px;
|
||||
}
|
||||
}
|
||||
.supported-services-container {
|
||||
|
||||
@ -23,41 +23,26 @@
|
||||
@submit="handleSubmit"
|
||||
layout="vertical">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.name') }}
|
||||
<a-tooltip :title="apiParams.name.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.name')" :tooltip="apiParams.name.description"/>
|
||||
<a-input
|
||||
autoFocus
|
||||
v-decorator="['name', {
|
||||
rules: [{ required: true, message: $t('message.error.name') }]
|
||||
}]"
|
||||
:placeholder="this.$t('label.name')"/>
|
||||
:placeholder="apiParams.name.description"/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.displaytext') }}
|
||||
<a-tooltip :title="apiParams.displaytext.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.displaytext')" :tooltip="apiParams.displaytext.description"/>
|
||||
<a-input
|
||||
v-decorator="['displaytext', {
|
||||
rules: [{ required: true, message: $t('message.error.description') }]
|
||||
}]"
|
||||
:placeholder="this.$t('label.displaytext')"/>
|
||||
:placeholder="apiParams.displaytext.description"/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.supportedservices') }}
|
||||
<a-tooltip :title="apiParams.supportedservices.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.supportedservices')" :tooltip="apiParams.supportedservices.description"/>
|
||||
<div class="supported-services-container" scroll-to="last-child">
|
||||
<a-list itemLayout="horizontal" :dataSource="this.supportedServices">
|
||||
<a-list itemLayout="horizontal" :dataSource="supportedServices">
|
||||
<a-list-item slot="renderItem" slot-scope="item">
|
||||
<CheckBoxSelectPair
|
||||
v-decorator="['service.'+item.name, {}]"
|
||||
@ -71,32 +56,27 @@
|
||||
</a-list>
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.service.connectivity.regionlevelvpccapabilitycheckbox')" v-if="this.connectivityServiceChecked">
|
||||
<a-form-item :label="$t('label.service.connectivity.regionlevelvpccapabilitycheckbox')" v-if="connectivityServiceChecked">
|
||||
<a-switch v-decorator="['regionlevelvpc', {initialValue: true}]" defaultChecked />
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.service.connectivity.distributedroutercapabilitycheckbox')" v-if="this.connectivityServiceChecked">
|
||||
<a-form-item :label="$t('label.service.connectivity.distributedroutercapabilitycheckbox')" v-if="connectivityServiceChecked">
|
||||
<a-switch v-decorator="['distributedrouter', {initialValue: true}]" defaultChecked />
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.redundantrouter')" v-if="this.sourceNatServiceChecked">
|
||||
<a-form-item :label="$t('label.redundantrouter')" v-if="sourceNatServiceChecked">
|
||||
<a-switch v-decorator="['redundantrouter', {initialValue: false}]" />
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('label.ispublic')" v-if="this.isAdmin()">
|
||||
<a-switch v-decorator="['ispublic', {initialValue: this.isPublic}]" :defaultChecked="this.isPublic" @change="val => { this.isPublic = val }" />
|
||||
<a-form-item :label="$t('label.ispublic')" v-if="isAdmin()">
|
||||
<a-switch v-decorator="['ispublic', {initialValue: isPublic}]" :defaultChecked="isPublic" @change="val => { isPublic = val }" />
|
||||
</a-form-item>
|
||||
<a-form-item v-if="!this.isPublic">
|
||||
<span slot="label">
|
||||
{{ $t('label.domainid') }}
|
||||
<a-tooltip :title="apiParams.domainid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-form-item v-if="!isPublic">
|
||||
<tooltip-label slot="label" :title="$t('label.domainid')" :tooltip="apiParams.domainid.description"/>
|
||||
<a-select
|
||||
mode="multiple"
|
||||
v-decorator="['domainid', {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: `${this.$t('message.error.select')}`
|
||||
message: $t('message.error.select')
|
||||
}
|
||||
]
|
||||
}]"
|
||||
@ -106,19 +86,14 @@
|
||||
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}"
|
||||
:loading="domainLoading"
|
||||
:placeholder="this.$t('label.domain')">
|
||||
<a-select-option v-for="(opt, optIndex) in this.domains" :key="optIndex">
|
||||
:placeholder="apiParams.domainid.description">
|
||||
<a-select-option v-for="(opt, optIndex) in domains" :key="optIndex">
|
||||
{{ opt.path || opt.name || opt.description }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.zoneid') }}
|
||||
<a-tooltip :title="apiParams.zoneid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.zoneid')" :tooltip="apiParams.zoneid.description"/>
|
||||
<a-select
|
||||
id="zone-selection"
|
||||
mode="multiple"
|
||||
@ -140,25 +115,20 @@
|
||||
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}"
|
||||
:loading="zoneLoading"
|
||||
:placeholder="this.$t('label.zone')">
|
||||
<a-select-option v-for="(opt, optIndex) in this.zones" :key="optIndex">
|
||||
:placeholder="apiParams.zoneid.description">
|
||||
<a-select-option v-for="(opt, optIndex) in zones" :key="optIndex">
|
||||
{{ opt.name || opt.description }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="apiParams.enable">
|
||||
<span slot="label">
|
||||
{{ $t('label.enable.vpc.offering') }}
|
||||
<a-tooltip :title="apiParams.enable.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.enable.vpc.offering')" :tooltip="apiParams.enable.description"/>
|
||||
<a-switch v-decorator="['enable', {initialValue: false}]" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<div :span="24" class="action-button">
|
||||
<a-button @click="closeAction">{{ this.$t('label.cancel') }}</a-button>
|
||||
<a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
|
||||
<a-button @click="closeAction">{{ $t('label.cancel') }}</a-button>
|
||||
<a-button :loading="loading" type="primary" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
|
||||
</div>
|
||||
</a-spin>
|
||||
</div>
|
||||
@ -167,11 +137,13 @@
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import CheckBoxSelectPair from '@/components/CheckBoxSelectPair'
|
||||
import TooltipLabel from '@/components/widgets/TooltipLabel'
|
||||
|
||||
export default {
|
||||
name: 'AddVpcOffering',
|
||||
components: {
|
||||
CheckBoxSelectPair
|
||||
CheckBoxSelectPair,
|
||||
TooltipLabel
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
@ -22,12 +22,7 @@
|
||||
:form="form"
|
||||
@submit="handleSubmit">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.name') }}
|
||||
<a-tooltip :title="apiParams.name.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.name')" :tooltip="apiParams.name.description"/>
|
||||
<a-input
|
||||
autoFocus
|
||||
v-decorator="['name', {
|
||||
@ -35,24 +30,14 @@
|
||||
}]"/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.description') }}
|
||||
<a-tooltip :title="apiParams.description.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.description')" :tooltip="apiParams.description.description"/>
|
||||
<a-input
|
||||
v-decorator="['description', {
|
||||
rules: [{ required: true, message: $t('message.error.required.input') }]
|
||||
}]"/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.zoneid') }}
|
||||
<a-tooltip :title="apiParams.zoneid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.zoneid')" :tooltip="apiParams.zoneid.description"/>
|
||||
<a-select
|
||||
showSearch
|
||||
allowClear
|
||||
@ -67,12 +52,7 @@
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.externalid') }}
|
||||
<a-tooltip :title="apiParams.externalid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.externalid')" :tooltip="apiParams.externalid.description"/>
|
||||
<a-select
|
||||
allowClear
|
||||
v-decorator="['externalid', {
|
||||
@ -85,12 +65,7 @@
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.allowuserdrivenbackups') }}
|
||||
<a-tooltip :title="apiParams.allowuserdrivenbackups.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.allowuserdrivenbackups')" :tooltip="apiParams.allowuserdrivenbackups.description"/>
|
||||
<a-switch
|
||||
v-decorator="['allowuserdrivenbackups']"
|
||||
:default-checked="true"/>
|
||||
@ -105,9 +80,13 @@
|
||||
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import TooltipLabel from '@/components/widgets/TooltipLabel'
|
||||
|
||||
export default {
|
||||
name: 'ImportBackupOffering',
|
||||
components: {
|
||||
TooltipLabel
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
loading: false,
|
||||
|
||||
@ -81,7 +81,7 @@
|
||||
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import TooltipButton from '@/components/view/TooltipButton'
|
||||
import TooltipButton from '@/components/widgets/TooltipButton'
|
||||
|
||||
export default {
|
||||
name: 'AccountsTab',
|
||||
|
||||
@ -23,35 +23,20 @@
|
||||
@submit="addAccountToProject"
|
||||
layout="vertical">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.account') }}
|
||||
<a-tooltip :title="apiParams.addAccountToProject.account.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.account')" :tooltip="apiParams.addAccountToProject.account.description"/>
|
||||
<a-input
|
||||
v-decorator="['account']"
|
||||
:placeholder="apiParams.addAccountToProject.account.description"
|
||||
autoFocus />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.email') }}
|
||||
<a-tooltip :title="apiParams.addAccountToProject.email.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.email')" :tooltip="apiParams.addAccountToProject.email.description"/>
|
||||
<a-input
|
||||
v-decorator="['email']"
|
||||
:placeholder="apiParams.addAccountToProject.email.description"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="apiParams.addAccountToProject.projectroleid">
|
||||
<span slot="label">
|
||||
{{ $t('label.project.role') }}
|
||||
<a-tooltip :title="apiParams.addAccountToProject.projectroleid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.project.role')" :tooltip="apiParams.addAccountToProject.projectroleid.description"/>
|
||||
<a-select
|
||||
showSearch
|
||||
v-decorator="['projectroleid']"
|
||||
@ -64,12 +49,7 @@
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="apiParams.addAccountToProject.roletype">
|
||||
<span slot="label">
|
||||
{{ $t('label.roletype') }}
|
||||
<a-tooltip :title="apiParams.addAccountToProject.roletype.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.name')" :tooltip="apiParams.addAccountToProject.roletype.description"/>
|
||||
<a-select
|
||||
showSearch
|
||||
v-decorator="['roletype']"
|
||||
@ -93,35 +73,20 @@
|
||||
<span slot="message" v-html="$t('message.add.user.to.project')"></span>
|
||||
</a-alert>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.user') }}
|
||||
<a-tooltip :title="apiParams.addUserToProject.username.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.name')" :tooltip="apiParams.addUserToProject.username.description"/>
|
||||
<a-input
|
||||
v-decorator="['username']"
|
||||
:placeholder="apiParams.addUserToProject.username.description"
|
||||
autoFocus />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.email') }}
|
||||
<a-tooltip :title="apiParams.addUserToProject.email.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.email')" :tooltip="apiParams.addUserToProject.email.description"/>
|
||||
<a-input
|
||||
v-decorator="['email']"
|
||||
:placeholder="apiParams.addUserToProject.email.description"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.project.role') }}
|
||||
<a-tooltip :title="apiParams.addUserToProject.roletype.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.project.role')" :tooltip="apiParams.addUserToProject.roletype.description"/>
|
||||
<a-select
|
||||
showSearch
|
||||
v-decorator="['projectroleid']"
|
||||
@ -134,12 +99,7 @@
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.roletype') }}
|
||||
<a-tooltip :title="apiParams.addUserToProject.roletype.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.roletype')" :tooltip="apiParams.addUserToProject.roletype.description"/>
|
||||
<a-select
|
||||
showSearch
|
||||
v-decorator="['roletype']"
|
||||
@ -159,8 +119,13 @@
|
||||
</template>
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import TooltipLabel from '@/components/widgets/TooltipLabel'
|
||||
|
||||
export default {
|
||||
name: 'AddAccountOrUserToProject',
|
||||
components: {
|
||||
TooltipLabel
|
||||
},
|
||||
props: {
|
||||
resource: {
|
||||
type: Object,
|
||||
|
||||
@ -79,7 +79,7 @@
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import Status from '@/components/widgets/Status'
|
||||
import TooltipButton from '@/components/view/TooltipButton'
|
||||
import TooltipButton from '@/components/widgets/TooltipButton'
|
||||
|
||||
export default {
|
||||
name: 'InvitationsTemplate',
|
||||
|
||||
@ -102,7 +102,7 @@ import { api } from '@/api'
|
||||
import draggable from 'vuedraggable'
|
||||
import PermissionEditable from '@/views/iam/PermissionEditable'
|
||||
import RuleDelete from '@/views/iam/RuleDelete'
|
||||
import TooltipButton from '@/components/view/TooltipButton'
|
||||
import TooltipButton from '@/components/widgets/TooltipButton'
|
||||
|
||||
export default {
|
||||
name: 'ProjectRolePermissionTab',
|
||||
|
||||
@ -121,7 +121,7 @@
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import ProjectRolePermissionTab from '@/views/project/iam/ProjectRolePermissionTab'
|
||||
import TooltipButton from '@/components/view/TooltipButton'
|
||||
import TooltipButton from '@/components/widgets/TooltipButton'
|
||||
export default {
|
||||
name: 'ProjectRoleTab',
|
||||
props: {
|
||||
|
||||
@ -19,12 +19,7 @@
|
||||
<a-spin :spinning="loading">
|
||||
<a-form class="form" :form="form" @submit="handleSubmit" layout="vertical">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.name') }}
|
||||
<a-tooltip :title="apiParams.name.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.name')" :tooltip="apiParams.name.description"/>
|
||||
<a-input
|
||||
v-decorator="['name', {
|
||||
rules: [{ required: true, message: $t('message.error.volume.name') }]
|
||||
@ -33,12 +28,7 @@
|
||||
autoFocus />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.zoneid') }}
|
||||
<a-tooltip :title="apiParams.zoneid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.zoneid')" :tooltip="apiParams.zoneid.description"/>
|
||||
<a-select
|
||||
v-decorator="['zoneid', {
|
||||
initialValue: selectedZoneId,
|
||||
@ -54,12 +44,7 @@
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.diskoffering') }}
|
||||
<a-tooltip :title="apiParams.diskofferingid.description || 'Disk Offering'">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.diskofferingid')" :tooltip="apiParams.diskofferingid.description"/>
|
||||
<a-select
|
||||
v-decorator="['diskofferingid', {
|
||||
initialValue: selectedDiskOfferingId,
|
||||
@ -77,12 +62,7 @@
|
||||
</a-form-item>
|
||||
<span v-if="customDiskOffering">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.sizegb') }}
|
||||
<a-tooltip :title="apiParams.size.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.sizegb')" :tooltip="apiParams.size.description"/>
|
||||
<a-input
|
||||
v-decorator="['size', {
|
||||
rules: [{ required: true, message: $t('message.error.custom.disk.size') }]}]"
|
||||
@ -99,9 +79,13 @@
|
||||
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import TooltipLabel from '@/components/widgets/TooltipLabel'
|
||||
|
||||
export default {
|
||||
name: 'CreateVolume',
|
||||
components: {
|
||||
TooltipLabel
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
zones: [],
|
||||
|
||||
@ -193,7 +193,7 @@
|
||||
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import TooltipButton from '@/components/view/TooltipButton'
|
||||
import TooltipButton from '@/components/widgets/TooltipButton'
|
||||
import { timeZone } from '@/utils/timezone'
|
||||
import debounce from 'lodash/debounce'
|
||||
|
||||
|
||||
@ -76,7 +76,7 @@
|
||||
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import TooltipButton from '@/components/view/TooltipButton'
|
||||
import TooltipButton from '@/components/widgets/TooltipButton'
|
||||
import { timeZoneName } from '@/utils/timezone'
|
||||
|
||||
export default {
|
||||
|
||||
@ -93,7 +93,7 @@
|
||||
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import TooltipButton from '@/components/view/TooltipButton'
|
||||
import TooltipButton from '@/components/widgets/TooltipButton'
|
||||
|
||||
export default {
|
||||
name: 'TakeSnapshot',
|
||||
|
||||
@ -45,12 +45,7 @@
|
||||
</a-upload-dragger>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.name') }}
|
||||
<a-tooltip :title="apiParams.name.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.name')" :tooltip="apiParams.name.description"/>
|
||||
<a-input
|
||||
v-decorator="['name', {
|
||||
rules: [{ required: true, message: $t('message.error.volume.name') }]
|
||||
@ -59,12 +54,7 @@
|
||||
autoFocus />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.zone') }}
|
||||
<a-tooltip :title="apiParams.zoneid.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.zoneid')" :tooltip="apiParams.zoneid.description"/>
|
||||
<a-select
|
||||
v-decorator="['zoneId', {
|
||||
initialValue: zoneSelected,
|
||||
@ -81,12 +71,7 @@
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.format') }}
|
||||
<a-tooltip :title="apiParams.format.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.format')" :tooltip="apiParams.format.description"/>
|
||||
<a-select
|
||||
v-decorator="['format', {
|
||||
initialValue: formats[0],
|
||||
@ -103,12 +88,7 @@
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.volumechecksum') }}
|
||||
<a-tooltip :title="apiParams.checksum.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<tooltip-label slot="label" :title="$t('label.volumechecksum')" :tooltip="apiParams.checksum.description"/>
|
||||
<a-input
|
||||
v-decorator="['checksum']"
|
||||
:placeholder="$t('label.volumechecksum.description')"
|
||||
@ -126,9 +106,13 @@
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import { axios } from '../../utils/request'
|
||||
import TooltipLabel from '@/components/widgets/TooltipLabel'
|
||||
|
||||
export default {
|
||||
name: 'UploadLocalVolume',
|
||||
components: {
|
||||
TooltipLabel
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
fileList: [],
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user