apache/cloudstack
1
0
Fork 0
mirror of https://github.com/apache/cloudstack.git synced 2025-10-26 08:42:29 +01:00
Code Issues Packages Projects Releases Wiki Activity

ui: AntD3 upgrade (#7306)

Browse Source 
Continuation of #6369

This PR for Fixes #6342. Upgrade ant-design-vue to version 3.x.
Related https://www.antdv.com/docs/vue/migration-v3.

Co-authored-by: utchoang <hoangnm@unitech.vn>
This commit is contained in:
David Jumani 2023-04-11 14:05:21 +05:30 committed by GitHub
parent e6f737fdf9
commit 3c25a35426
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
184 changed files with 6132 additions and 5587 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4880
ui/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
ui/package.json
View File

@ -38,7 +38,8 @@
"@fortawesome/free-brands-svg-icons": "^5.15.2", "@fortawesome/free-brands-svg-icons": "^5.15.2",
"@fortawesome/free-solid-svg-icons": "^5.15.2", "@fortawesome/free-solid-svg-icons": "^5.15.2",
"@fortawesome/vue-fontawesome": "^3.0.0-4", "@fortawesome/vue-fontawesome": "^3.0.0-4",
"ant-design-vue": "^2.2.3", "ant-design-vue": "^3.2.9",
"antd": "^4.21.4",
"antd-theme-webpack-plugin": "^1.3.9", "antd-theme-webpack-plugin": "^1.3.9",
"axios": "^0.21.1", "axios": "^0.21.1",
"babel-plugin-require-context-hook": "^1.0.0", "babel-plugin-require-context-hook": "^1.0.0",

5
ui/src/components/CheckBoxSelectPair.vue
View File

@ -34,13 +34,14 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" }"
@change="val => { handleSelectChange(val) }"> @change="val => { handleSelectChange(val) }">
<a-select-option <a-select-option
v-for="(opt) in selectSource" v-for="(opt) in selectSource"
:key="opt.id" :key="opt.id"
:disabled="opt.enabled === false"> :disabled="opt.enabled === false"
:label="opt.displaytext || opt.name || opt.description">
{{ opt.displaytext || opt.name || opt.description }} {{ opt.displaytext || opt.name || opt.description }}
</a-select-option> </a-select-option>
</a-select> </a-select>

4
ui/src/components/header/SamlDomainSwitcher.vue
View File

@ -25,7 +25,7 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" }"
@change="changeAccount" @change="changeAccount"
@focus="fetchData" > @focus="fetchData" >
@ -42,7 +42,7 @@
</a-tooltip> </a-tooltip>
</template> </template>
<a-select-option v-for="(account, index) in samlAccounts" :key="index"> <a-select-option v-for="(account, index) in samlAccounts" :key="index" :label="`${account.accountName} (${account.domainName})`">
{{ `${account.accountName} (${account.domainName})` }} {{ `${account.accountName} (${account.domainName})` }}
</a-select-option> </a-select-option>
</a-select> </a-select>

60
ui/src/components/header/UserMenu.vue
View File

@ -38,33 +38,25 @@
<span>{{ nickname() }}</span> <span>{{ nickname() }}</span>
</span> </span>
<template #overlay> <template #overlay>
<a-menu class="user-menu-wrapper"> <a-menu class="user-menu-wrapper" @click="handleClickMenu">
<router-link :to="{ path: '/accountuser/' + $store.getters.userInfo.id }"> <a-menu-item class="user-menu-item" key="profile">
<a-menu-item class="user-menu-item" key="0"> <UserOutlined class="user-menu-item-icon" />
<UserOutlined class="user-menu-item-icon" /> <span class="user-menu-item-name">{{ $t('label.profilename') }}</span>
<span class="user-menu-item-name">{{ $t('label.profilename') }}</span> </a-menu-item>
</a-menu-item> <a-menu-item class="user-menu-item" key="timezone">
</router-link> <ClockCircleOutlined class="user-menu-item-icon" />
<a @click="toggleUseBrowserTimezone"> <span class="user-menu-item-name" style="margin-right: 5px">{{ $t('label.use.local.timezone') }}</span>
<a-menu-item class="user-menu-item" key="1"> <a-switch :checked="$store.getters.usebrowsertimezone" />
<ClockCircleOutlined class="user-menu-item-icon" /> </a-menu-item>
<span class="user-menu-item-name" style="margin-right: 5px">{{ $t('label.use.local.timezone') }}</span> <a-menu-item class="user-menu-item" key="document">
<a-switch :checked="$store.getters.usebrowsertimezone" /> <QuestionCircleOutlined class="user-menu-item-icon" />
</a-menu-item> <span class="user-menu-item-name">{{ $t('label.help') }}</span>
</a> </a-menu-item>
<a :href="$config.docBase" target="_blank">
<a-menu-item class="user-menu-item" key="2">
<QuestionCircleOutlined class="user-menu-item-icon" />
<span class="user-menu-item-name">{{ $t('label.help') }}</span>
</a-menu-item>
</a>
<a-menu-divider/> <a-menu-divider/>
<a href="javascript:;" @click="handleLogout"> <a-menu-item class="user-menu-item" key="logout">
<a-menu-item class="user-menu-item" key="3"> <LogoutOutlined class="user-menu-item-icon" />
<LogoutOutlined class="user-menu-item-icon" /> <span class="user-menu-item-name">{{ $t('label.logout') }}</span>
<span class="user-menu-item-name">{{ $t('label.logout') }}</span> </a-menu-item>
</a-menu-item>
</a>
</a-menu> </a-menu>
</template> </template>
</a-dropdown> </a-dropdown>
@ -145,6 +137,22 @@ export default {
}) })
}) })
}, },
handleClickMenu (item) {
switch (item.key) {
case 'profile':
this.$router.push(`/accountuser/${this.$store.getters.userInfo.id}`)
break
case 'timezone':
this.toggleUseBrowserTimezone()
break
case 'document':
window.open(this.$config.docBase, '_blank')
break
case 'logout':
this.handleLogout()
break
}
},
handleLogout () { handleLogout () {
return this.Logout({}).then(() => { return this.Logout({}).then(() => {
this.$router.push('/user/login') this.$router.push('/user/login')

2
ui/src/components/view/AnnotationsTab.vue
View File

@ -96,7 +96,7 @@
<template #content> <template #content>
<div v-ctrl-enter="saveNote"> <div v-ctrl-enter="saveNote">
<a-textarea <a-textarea
rows="4" :rows="4"
@change="handleNoteChange" @change="handleNoteChange"
v-model:value="annotation" v-model:value="annotation"
:placeholder="$t('label.add.note')" /> :placeholder="$t('label.add.note')" />

56
ui/src/components/view/BulkActionProgress.vue
View File

@ -52,36 +52,38 @@
size="middle" size="middle"
:columns="selectedColumns" :columns="selectedColumns"
:dataSource="tableChanged ? filteredItems : selectedItems" :dataSource="tableChanged ? filteredItems : selectedItems"
:rowKey="(record, idx) => ($route.path.includes('/template') || $route.path.includes('/iso')) ? record.zoneid: record.id" :rowKey="record => ($route.path.includes('/template') || $route.path.includes('/iso')) ? record.zoneid: record.id"
:pagination="true" :pagination="true"
@change="handleTableChange" @change="handleTableChange"
style="overflow-y: auto"> style="overflow-y: auto">
<template #status="{text}"> <template #bodyCell="{ column, text, record }">
<status :text=" text ? text : $t('state.inprogress') " displayText></status> <template v-if="column.key === 'status'">
</template> <status :text=" text ? text : $t('state.inprogress') " displayText></status>
<template #algorithm="{record}"> </template>
{{ returnAlgorithmName(record.algorithm) }} <template v-if="column.key === 'algorithm'">
</template> {{ returnAlgorithmName(record.algorithm) }}
<template #privateport="{record}"> </template>
{{ record.privateport }} - {{ record.privateendport }} <template v-if="column.key === 'privateport'">
</template> {{ record.privateport }} - {{ record.privateendport }}
<template #publicport="{record}"> </template>
{{ record.publicport }} - {{ record.publicendport }} <template v-if="column.key === 'publicport'">
</template> {{ record.publicport }} - {{ record.publicendport }}
<template #protocol="{record}"> </template>
{{ capitalise(record.protocol) }} <template v-if="column.key === 'protocol'">
</template> {{ capitalise(record.protocol) }}
<template #startport="{record}"> </template>
{{ record.icmptype || record.startport >= 0 ? record.icmptype || record.startport : $t('label.all') }} <template v-if="column.key === 'startport'">
</template> {{ record.icmptype || record.startport >= 0 ? record.icmptype || record.startport : $t('label.all') }}
<template #endport="{record}"> </template>
{{ record.icmpcode || record.endport >= 0 ? record.icmpcode || record.endport : $t('label.all') }} <template v-if="column.key === 'endport'">
</template> {{ record.icmpcode || record.endport >= 0 ? record.icmpcode || record.endport : $t('label.all') }}
<template #vm="{record}"> </template>
<div><desktop-outlined /> {{ record.virtualmachinename }} ({{ record.vmguestip }})</div> <template v-if="column.key === 'vm'">
</template> <div><desktop-outlined /> {{ record.virtualmachinename }} ({{ record.vmguestip }})</div>
<template #cidrlist="{ record }"> </template>
<span style="white-space: pre-line"> {{ record.cidrlist?.replaceAll(" ", "\n") }}</span> <template v-if="column.key === 'cidrlist'">
<span style="white-space: pre-line"> {{ record.cidrlist?.replaceAll(" ", "\n") }}</span>
</template>
</template> </template>
</a-table> </a-table>
<br/> <br/>

56
ui/src/components/view/BulkActionView.vue
View File

@ -55,35 +55,37 @@
size="middle" size="middle"
:columns="selectedColumns" :columns="selectedColumns"
:dataSource="selectedItems" :dataSource="selectedItems"
:rowKey="(record, idx) => $route.path.includes('/iso/') ? record.zoneid : record.id" :rowKey="record => $route.path.includes('/iso/') ? record.zoneid : record.id"
:pagination="true" :pagination="true"
style="overflow-y: auto"> style="overflow-y: auto">
<template #algorithm="{record}"> <template #bodyCell="{ column, text, record }">
{{ returnAlgorithmName(record.algorithm) }} <template v-if="column.key === 'algorithm'">
</template> {{ returnAlgorithmName(record.algorithm) }}
<template #column="{ text }"> </template>
<span v-for="(column, index) in selectedColumns" :key="index"> {{ text }} ==== {{ column }}</span> <template v-if="column.key === 'column'">
</template> <span v-for="(column, index) in selectedColumns" :key="index"> {{ text }} ==== {{ column }}</span>
<template #privateport="{record}"> </template>
{{ record.privateport }} - {{ record.privateendport }} <template v-if="column.key === 'privateport'">
</template> {{ record.privateport }} - {{ record.privateendport }}
<template #publicport="{record}"> </template>
{{ record.publicport }} - {{ record.publicendport }} <template v-if="column.key === 'publicport'">
</template> {{ record.publicport }} - {{ record.publicendport }}
<template #protocol="{record}"> </template>
{{ capitalise(record.protocol) }} <template v-if="column.key === 'protocol'">
</template> {{ capitalise(record.protocol) }}
<template #vm="{record}"> </template>
<div><desktop-outlined /> {{ record.virtualmachinename }} ({{ record.vmguestip }})</div> <template v-if="column.key === 'vm'">
</template> <div><desktop-outlined /> {{ record.virtualmachinename }} ({{ record.vmguestip }})</div>
<template #startport="{record}"> </template>
{{ record.icmptype || record.startport >= 0 ? record.icmptype || record.startport : $t('label.all') }} <template v-if="column.key === 'startport'">
</template> {{ record.icmptype || record.startport >= 0 ? record.icmptype || record.startport : $t('label.all') }}
<template #endport="{record}"> </template>
{{ record.icmpcode || record.endport >= 0 ? record.icmpcode || record.endport : $t('label.all') }} <template v-if="column.key === 'endport'">
</template> {{ record.icmpcode || record.endport >= 0 ? record.icmpcode || record.endport : $t('label.all') }}
<template #cidrlist="{record}"> </template>
<span style="white-space: pre-line"> {{ record.cidrlist?.replaceAll(" ", "\n") }}</span> <template v-if="column.key === 'cidrlist'">
<span style="white-space: pre-line"> {{ record.cidrlist?.replaceAll(" ", "\n") }}</span>
</template>
</template> </template>
</a-table> </a-table>
<a-divider /> <a-divider />

12
ui/src/components/view/DedicateDomain.vue
View File

@ -26,12 +26,16 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" }"
@change="handleChangeDomain" @change="handleChangeDomain"
v-focus="true" v-focus="true"
v-model:value="domainId"> v-model:value="domainId">
<a-select-option v-for="(domain, index) in domainsList" :value="domain.id" :key="index"> <a-select-option
v-for="(domain, index) in domainsList"
:value="domain.id"
:key="index"
:label="domain.path || domain.name || domain.description">
{{ domain.path || domain.name || domain.description }} {{ domain.path || domain.name || domain.description }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -43,9 +47,9 @@
style="width: 100%" style="width: 100%"
@change="handleChangeAccount" @change="handleChangeAccount"
showSearch showSearch
optionFilterProp="label" optionFilterProp="value"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" > }" >
<a-select-option v-for="(account, index) in accountsList" :value="account.name" :key="index"> <a-select-option v-for="(account, index) in accountsList" :value="account.name" :key="index">
{{ account.name }} {{ account.name }}

8
ui/src/components/view/DetailsTab.vue
View File

@ -112,14 +112,14 @@ export default {
type: Object, type: Object,
required: true required: true
}, },
loading: {
type: Boolean,
default: false
},
items: { items: {
type: Object, type: Object,
default: () => {} default: () => {}
}, },
loading: {
type: Boolean,
default: false
},
bordered: { bordered: {
type: Boolean, type: Boolean,
default: false default: false

12
ui/src/components/view/EventsTab.vue
View File

@ -152,19 +152,15 @@ export default {
for (var columnKey of this.columnKeys) { for (var columnKey of this.columnKeys) {
if (!this.selectedColumnKeys.includes(columnKey)) continue if (!this.selectedColumnKeys.includes(columnKey)) continue
this.columns.push({ this.columns.push({
key: columnKey,
title: this.$t('label.' + String(columnKey).toLowerCase()), title: this.$t('label.' + String(columnKey).toLowerCase()),
dataIndex: columnKey, dataIndex: columnKey,
slots: { customRender: columnKey },
sorter: function (a, b) { return genericCompare(a[this.dataIndex] || '', b[this.dataIndex] || '') } sorter: function (a, b) { return genericCompare(a[this.dataIndex] || '', b[this.dataIndex] || '') }
}) })
} }
this.columns.push({ if (this.columns.length > 0) {
dataIndex: 'dropdownFilter', this.columns[this.columns.length - 1].customFilterDropdown = true
slots: { }
filterDropdown: 'filterDropdown',
filterIcon: 'filterIcon'
}
})
} }
} }
} }

11
ui/src/components/view/InfoCard.vue
View File

@ -141,7 +141,7 @@
icon="barcode-outlined" icon="barcode-outlined"
type="dashed" type="dashed"
size="small" size="small"
:copyResource="resource.id" :copyResource="String(resource.id)"
@onClick="$message.success($t('label.copied.clipboard'))" /> @onClick="$message.success($t('label.copied.clipboard'))" />
<span style="margin-left: 10px;">{{ resource.id }}</span> <span style="margin-left: 10px;">{{ resource.id }}</span>
</div> </div>
@ -866,8 +866,13 @@ export default {
return this.resource.templateid return this.resource.templateid
}, },
resourceIcon () { resourceIcon () {
if (this.$showIcon() && this.resource?.icon?.base64image) { if (this.$showIcon()) {
return this.resource.icon.base64image if (this.resource?.icon?.base64image) {
return this.resource.icon.base64image
}
if (this.resource?.resourceIcon?.base64image) {
return this.resource.resourceIcon.base64image
}
} }
return null return null
}, },

48
ui/src/components/view/InstanceNicsNetworkSelectListView.vue
View File

@ -25,23 +25,25 @@
:dataSource="nics" :dataSource="nics"
:pagination="false" :pagination="false"
:rowKey="record => record.InstanceID"> :rowKey="record => record.InstanceID">
<template #displaytext="{record}"> <template #bodyCell="{ column, record }">
<span>{{ record.elementName + ' - ' + record.name }} <template v-if="column.key === 'displaytext'">
<a-tooltip :title="record.nicDescription" placement="top"> <span>{{ record.elementName + ' - ' + record.name }}
<info-circle-outlined class="table-tooltip-icon" /> <a-tooltip :title="record.nicDescription" placement="top">
</a-tooltip> <info-circle-outlined class="table-tooltip-icon" />
</span> </a-tooltip>
</template> </span>
<template #size="{record}"> </template>
<span v-if="record.size"> <template v-if="column.key === 'size'">
{{ $bytesToHumanReadableSize(record.size) }} <span v-if="record.size">
</span> {{ $bytesToHumanReadableSize(record.size) }}
</template> </span>
<template #selectednetwork="{record}"> </template>
<span>{{ record.selectednetworkname || '' }}</span> <template v-if="column.key === 'selectednetwork'">
</template> <span>{{ record.selectednetworkname || '' }}</span>
<template #select="{record}"> </template>
<div style="display: flex; justify-content: flex-end;"><a-button @click="openNicNetworkSelector(record)">{{ record.selectednetworkid ? $t('label.change') : $t('label.select') }}</a-button></div> <template v-if="column.key === 'select'">
<div style="display: flex; justify-content: flex-end;"><a-button @click="openNicNetworkSelector(record)">{{ record.selectednetworkid ? $t('label.change') : $t('label.select') }}</a-button></div>
</template>
</template> </template>
</a-table> </a-table>
@ -87,16 +89,16 @@ export default {
return { return {
nicColumns: [ nicColumns: [
{ {
title: this.$t('label.nic'), key: 'displaytext',
slots: { customRender: 'displaytext' } title: this.$t('label.nic')
}, },
{ {
title: this.$t('label.network'), key: 'selectednetwork',
slots: { customRender: 'selectednetwork' } title: this.$t('label.network')
}, },
{ {
title: '', key: 'select',
slots: { customRender: 'select' } title: ''
} }
], ],
selectedNicForNetworkSelection: {} selectedNicForNetworkSelection: {}

36
ui/src/components/view/InstanceVolumesStoragePoolSelectListView.vue
View File

@ -26,16 +26,18 @@
:dataSource="volumes" :dataSource="volumes"
:pagination="false" :pagination="false"
:rowKey="record => record.id"> :rowKey="record => record.id">
<template #size="{ record }"> <template #bodyCell="{ column, record }">
<span v-if="record.size"> <template v-if="column.key === 'size'">
{{ $bytesToHumanReadableSize(record.size) }} <span v-if="record.size">
</span> {{ $bytesToHumanReadableSize(record.size) }}
</template> </span>
<template #selectedstorage="{ record }"> </template>
<span>{{ record.selectedstoragename || '' }}</span> <template v-if="column.key === 'selectedstorage'">
</template> <span>{{ record.selectedstoragename || '' }}</span>
<template #select="{ record }"> </template>
<div style="display: flex; justify-content: flex-end;"><a-button @click="openVolumeStoragePoolSelector(record)">{{ record.selectedstorageid ? $t('label.change') : $t('label.select') }}</a-button></div> <template v-if="column.key === 'select'">
<div style="display: flex; justify-content: flex-end;"><a-button @click="openVolumeStoragePoolSelector(record)">{{ record.selectedstorageid ? $t('label.change') : $t('label.select') }}</a-button></div>
</template>
</template> </template>
</a-table> </a-table>
@ -86,24 +88,26 @@ export default {
volumesLoading: false, volumesLoading: false,
volumeColumns: [ volumeColumns: [
{ {
key: 'name',
title: this.$t('label.volumeid'), title: this.$t('label.volumeid'),
dataIndex: 'name' dataIndex: 'name'
}, },
{ {
key: 'type',
title: this.$t('label.type'), title: this.$t('label.type'),
dataIndex: 'type' dataIndex: 'type'
}, },
{ {
title: this.$t('label.size'), key: 'size',
slots: { customRender: 'size' } title: this.$t('label.size')
}, },
{ {
title: this.$t('label.storage'), key: 'selectedstorage',
slots: { customRender: 'selectedstorage' } title: this.$t('label.storage')
}, },
{ {
title: '', key: 'select',
slots: { customRender: 'select' } title: ''
} }
], ],
selectedVolumeForStoragePoolSelection: {}, selectedVolumeForStoragePoolSelection: {},

33
ui/src/components/view/ListResourceTable.vue
View File

@ -34,22 +34,23 @@
:pagination="defaultPagination" :pagination="defaultPagination"
@change="handleTableChange" @change="handleTableChange"
@handle-search-filter="handleTableChange" > @handle-search-filter="handleTableChange" >
<template #bodyCell="{ column, text, record }">
<div
v-for="(col, index) in Object.keys(routerlinks({}))"
:key="index">
<template v-if="column.key === col">
<router-link :set="routerlink = routerlinks(record)" :to="{ path: routerlink[col] }" >{{ text }}</router-link>
</template>
</div>
<template <template v-if="column.key === 'state'">
v-for="(column, index) in Object.keys(routerlinks({}))" <status :text="text ? text : ''" />{{ text }}
:key="index" </template>
#[column]="{ text, record }" >
<router-link :set="routerlink = routerlinks(record)" :to="{ path: routerlink[column] }" >{{ text }}</router-link> <template v-if="column.key === 'status'">
<status :text="text ? text : ''" />{{ text }}
</template>
</template> </template>
<template #state="{text}">
<status :text="text ? text : ''" />{{ text }}
</template>
<template #status="{text}">
<status :text="text ? text : ''" />{{ text }}
</template>
</a-table> </a-table>
<div v-if="!defaultPagination" style="display: block; text-align: right; margin-top: 10px;"> <div v-if="!defaultPagination" style="display: block; text-align: right; margin-top: 10px;">
@ -197,9 +198,9 @@ export default {
var columns = [] var columns = []
for (const col of this.columns) { for (const col of this.columns) {
columns.push({ columns.push({
key: col,
dataIndex: col, dataIndex: col,
title: this.$t('label.' + col), title: this.$t('label.' + col)
slots: { customRender: col }
}) })
} }
return columns return columns

702
ui/src/components/view/ListView.vue
View File

@ -23,11 +23,11 @@
:dataSource="items" :dataSource="items"
:rowKey="(record, idx) => record.id || record.name || record.usageType || idx + '-' + Math.random()" :rowKey="(record, idx) => record.id || record.name || record.usageType || idx + '-' + Math.random()"
:pagination="false" :pagination="false"
:rowSelection=" enableGroupAction() || $route.name === 'event' ? {selectedRowKeys: selectedRowKeys, onChange: onSelectChange} : null" :rowSelection=" enableGroupAction() || $route.name === 'event' ? {selectedRowKeys: selectedRowKeys, onChange: onSelectChange, columnWidth: 30} : null"
:rowClassName="getRowClassName" :rowClassName="getRowClassName"
style="overflow-y: auto" style="overflow-y: auto"
> >
<template #filterDropdown> <template #customFilterDropdown>
<div style="padding: 8px" class="filter-dropdown"> <div style="padding: 8px" class="filter-dropdown">
<a-menu> <a-menu>
<a-menu-item v-for="(column, idx) in columnKeys" :key="idx" @click="updateSelectedColumns(column)"> <a-menu-item v-for="(column, idx) in columnKeys" :key="idx" @click="updateSelectedColumns(column)">
@ -37,391 +37,361 @@
</a-menu> </a-menu>
</div> </div>
</template> </template>
<template #footer> <template #bodyCell="{ column, text, record }">
<span v-if="hasSelected"> <template v-if="column.key === 'name'">
{{ `Selected ${selectedRowKeys.length} items` }} <span v-if="['vm'].includes($route.path.split('/')[1])" style="margin-right: 5px">
</span> <span v-if="record.icon && record.icon.base64image">
</template> <resource-icon :image="record.icon.base64image" size="1x"/>
</span>
<!-- <os-logo v-else :osId="record.ostypeid" :osName="record.osdisplayname" size="lg" />
<div #expandedRowRender="{ resource }">
<info-card :resource="resource style="margin-left: 0px; width: 50%">
<div #actions style="padding-top: 12px">
<a-tooltip
v-for="(action, actionIndex) in $route.meta.actions"
:key="actionIndex"
placement="bottom">
<template #title>
{{ $t(action.label) }}
</template>
<a-button
v-if="action.api in $store.getters.apis && action.dataView &&
('show' in action ? action.show(resource, $store.getters.userInfo) : true)"
:icon="action.icon"
:type="action.icon === 'delete' ? 'danger' : (action.icon === 'plus' ? 'primary' : 'default')"
shape="circle"
style="margin-right: 5px; margin-top: 12px"
@click="$parent.execAction(action)"
>
</a-button>
</a-tooltip>
</div>
</info-card>
</div>
-->
<template #name="{text, record}">
<span v-if="['vm'].includes($route.path.split('/')[1])" style="margin-right: 5px">
<span v-if="record.icon && record.icon.base64image">
<resource-icon :image="record.icon.base64image" size="1x"/>
</span> </span>
<os-logo v-else :osId="record.ostypeid" :osName="record.osdisplayname" size="lg" /> <span style="min-width: 120px" >
</span> <QuickView
<span style="min-width: 120px" > style="margin-left: 5px"
:actions="actions"
:resource="record"
:enabled="quickViewEnabled() && actions.length > 0 && columns && columns[0].dataIndex === 'name' "
@exec-action="$parent.execAction"/>
<span v-if="$route.path.startsWith('/project')" style="margin-right: 5px">
<tooltip-button type="dashed" size="small" icon="LoginOutlined" @onClick="changeProject(record)" />
</span>
<span v-if="$showIcon() && !['vm'].includes($route.path.split('/')[1])" style="margin-right: 5px">
<resource-icon v-if="$showIcon() && record.icon && record.icon.base64image" :image="record.icon.base64image" size="1x"/>
<os-logo v-else-if="record.ostypename" :osName="record.ostypename" size="1x" />
<render-icon v-else-if="typeof $route.meta.icon ==='string'" style="font-size: 16px;" :icon="$route.meta.icon"/>
<render-icon v-else style="font-size: 16px;" :svgIcon="$route.meta.icon" />
</span>
<span v-else :style="{ 'margin-right': record.ostypename ? '5px' : '0' }">
<os-logo v-if="record.ostypename" :osName="record.ostypename" size="1x" />
</span>
<span v-if="record.hasannotations">
<span v-if="record.id">
<router-link :to="{ path: $route.path + '/' + record.id }">{{ text }}</router-link>
<router-link :to="{ path: $route.path + '/' + record.id, query: { tab: 'comments' } }"><message-filled style="padding-left: 10px" size="small"/></router-link>
</span>
<router-link v-else :to="{ path: $route.path + '/' + record.name }" >{{ text }}</router-link>
</span>
<span v-else-if="$route.path.startsWith('/globalsetting')">{{ text }}</span>
<span v-else-if="$route.path.startsWith('/alert')">
<router-link :to="{ path: $route.path + '/' + record.id }" v-if="record.id">{{ $t(text.toLowerCase()) }}</router-link>
<router-link :to="{ path: $route.path + '/' + record.name }" v-else>{{ $t(text.toLowerCase()) }}</router-link>
</span>
<span v-else-if="$route.path.startsWith('/tungstenfabric')">
<router-link :to="{ path: $route.path + '/' + record.id }" v-if="record.id">{{ $t(text.toLowerCase()) }}</router-link>
<router-link :to="{ path: $route.path + '/' + record.name }" v-else>{{ $t(text.toLowerCase()) }}</router-link>
</span>
<span v-else-if="isTungstenPath()">
<router-link :to="{ path: $route.path + '/' + record.uuid, query: { zoneid: record.zoneid } }" v-if="record.uuid && record.zoneid">{{ $t(text.toLowerCase()) }}</router-link>
<router-link :to="{ path: $route.path + '/' + record.uuid, query: { zoneid: $route.query.zoneid } }" v-else-if="record.uuid && $route.query.zoneid">{{ $t(text.toLowerCase()) }}</router-link>
<router-link :to="{ path: $route.path }" v-else>{{ $t(text.toLowerCase()) }}</router-link>
</span>
<span v-else>
<router-link :to="{ path: $route.path + '/' + record.id }" v-if="record.id">{{ text }}</router-link>
<router-link :to="{ path: $route.path + '/' + record.name }" v-else>{{ text }}</router-link>
</span>
</span>
</template>
<template v-if="column.key === 'templatetype'">
<router-link :to="{ path: $route.path + '/' + record.templatetype }">{{ text }}</router-link>
</template>
<template v-if="column.key === 'type'">
<span v-if="['USER.LOGIN', 'USER.LOGOUT', 'ROUTER.HEALTH.CHECKS', 'FIREWALL.CLOSE', 'ALERT.SERVICE.DOMAINROUTER'].includes(text)">{{ $t(text.toLowerCase()) }}</span>
<span v-else>{{ text }}</span>
</template>
<template v-if="column.key === 'displayname'">
<QuickView <QuickView
style="margin-left: 5px" style="margin-left: 5px"
:actions="actions" :actions="actions"
:resource="record" :resource="record"
:enabled="quickViewEnabled() && actions.length > 0 && columns && columns[0].dataIndex === 'name' " :enabled="quickViewEnabled() && actions.length > 0 && columns && columns[0].dataIndex === 'displayname' "
@exec-action="$parent.execAction"/> @exec-action="$parent.execAction"/>
<span v-if="$route.path.startsWith('/project')" style="margin-right: 5px"> <router-link :to="{ path: $route.path + '/' + record.id }">{{ text }}</router-link>
<tooltip-button type="dashed" size="small" icon="LoginOutlined" @onClick="changeProject(record)" /> </template>
</span> <template v-if="column.key === 'username'">
<span v-if="$showIcon() && !['vm'].includes($route.path.split('/')[1])" style="margin-right: 5px"> <span v-if="$showIcon() && !['vm'].includes($route.path.split('/')[1])" style="margin-right: 5px">
<resource-icon v-if="$showIcon() && record.icon && record.icon.base64image" :image="record.icon.base64image" size="1x"/> <resource-icon v-if="$showIcon() && record.icon && record.icon.base64image" :image="record.icon.base64image" size="1x"/>
<os-logo v-else-if="record.ostypename" :osName="record.ostypename" size="1x" /> <user-outlined v-else style="font-size: 16px;" />
<render-icon v-else-if="typeof $route.meta.icon ==='string'" style="font-size: 16px;" :icon="$route.meta.icon"/>
<render-icon v-else style="font-size: 16px;" :svgIcon="$route.meta.icon" />
</span> </span>
<span v-else :style="{ 'margin-right': record.ostypename ? '5px' : '0' }"> <router-link :to="{ path: $route.path + '/' + record.id }" v-if="['/accountuser', '/vpnuser'].includes($route.path)">{{ text }}</router-link>
<os-logo v-if="record.ostypename" :osName="record.ostypename" size="1x" /> <router-link :to="{ path: '/accountuser', query: { username: record.username, domainid: record.domainid } }" v-else-if="$store.getters.userInfo.roletype !== 'User'">{{ text }}</router-link>
<span v-else>{{ text }}</span>
</template>
<template v-if="column.key === 'entityid'">
<router-link :to="{ path: generateCommentsPath(record), query: { tab: 'comments' } }">{{ record.entityname }}</router-link>
</template>
<template v-if="column.key === 'entitytype'">
{{ generateHumanReadableEntityType(record) }}
</template>
<template v-if="column.key === 'adminsonly' && ['Admin'].includes($store.getters.userInfo.roletype)">
<a-checkbox :checked="record.adminsonly" :value="record.id" v-if="record.userid === $store.getters.userInfo.id" @change="e => updateAdminsOnly(e)" />
<a-checkbox :checked="record.adminsonly" disabled v-else />
</template>
<template v-if="column.key === 'ipaddress'" href="javascript:;">
<router-link v-if="['/publicip', '/privategw'].includes($route.path)" :to="{ path: $route.path + '/' + record.id }">{{ text }}</router-link>
<span v-else>{{ text }}</span>
<span v-if="record.issourcenat">
&nbsp;
<a-tag>source-nat</a-tag>
</span> </span>
<span v-if="record.isstaticnat">
<span v-if="record.hasannotations"> &nbsp;
<span v-if="record.id"> <a-tag>static-nat</a-tag>
<router-link :to="{ path: $route.path + '/' + record.id }">{{ text }}</router-link>
<router-link :to="{ path: $route.path + '/' + record.id, query: { tab: 'comments' } }"><message-filled style="padding-left: 10px" size="small"/></router-link>
</span>
<router-link v-else :to="{ path: $route.path + '/' + record.name }" >{{ text }}</router-link>
</span> </span>
<span v-else-if="$route.path.startsWith('/globalsetting')">{{ text }}</span> </template>
<span v-else-if="$route.path.startsWith('/preferences')">{{ text }}</span> <template v-if="column.key === 'ip6address'" href="javascript:;">
<span v-else-if="$route.path.startsWith('/alert')"> <span>{{ ipV6Address(text, record) }}</span>
<router-link :to="{ path: $route.path + '/' + record.id }" v-if="record.id">{{ $t(text.toLowerCase()) }}</router-link> </template>
<router-link :to="{ path: $route.path + '/' + record.name }" v-else>{{ $t(text.toLowerCase()) }}</router-link> <template v-if="column.key === 'publicip'">
</span> <router-link v-if="['/autoscalevmgroup'].includes($route.path)" :to="{ path: '/publicip' + '/' + record.publicipid }">{{ text }}</router-link>
<span v-else-if="$route.path.startsWith('/tungstenfabric')"> <router-link v-else :to="{ path: $route.path + '/' + record.id }">{{ text }}</router-link>
<router-link :to="{ path: $route.path + '/' + record.id }" v-if="record.id">{{ $t(text.toLowerCase()) }}</router-link> </template>
<router-link :to="{ path: $route.path + '/' + record.name }" v-else>{{ $t(text.toLowerCase()) }}</router-link> <template v-if="column.key === 'traffictype'">
</span> {{ text }}
<span v-else-if="isTungstenPath()"> </template>
<router-link :to="{ path: $route.path + '/' + record.uuid, query: { zoneid: record.zoneid } }" v-if="record.uuid && record.zoneid">{{ $t(text.toLowerCase()) }}</router-link> <template v-if="column.key === 'vmname'">
<router-link :to="{ path: $route.path + '/' + record.uuid, query: { zoneid: $route.query.zoneid } }" v-else-if="record.uuid && $route.query.zoneid">{{ $t(text.toLowerCase()) }}</router-link> <router-link :to="{ path: createPathBasedOnVmType(record.vmtype, record.virtualmachineid) }">{{ text }}</router-link>
<router-link :to="{ path: $route.path }" v-else>{{ $t(text.toLowerCase()) }}</router-link> </template>
</span> <template v-if="column.key === 'virtualmachinename'">
<span v-else> <router-link :to="{ path: '/vm/' + record.virtualmachineid }">{{ text }}</router-link>
<router-link :to="{ path: $route.path + '/' + record.id }" v-if="record.id">{{ text }}</router-link> </template>
<router-link :to="{ path: $route.path + '/' + record.name }" v-else>{{ text }}</router-link> <template v-if="column.key === 'hypervisor'">
</span> <span v-if="$route.name === 'hypervisorcapability'">
</span>
</template>
<template #templatetype="{ text, record }">
<router-link :to="{ path: $route.path + '/' + record.templatetype }">{{ text }}</router-link>
</template>
<template #type="{ text }">
<span v-if="['USER.LOGIN', 'USER.LOGOUT', 'ROUTER.HEALTH.CHECKS', 'FIREWALL.CLOSE', 'ALERT.SERVICE.DOMAINROUTER'].includes(text)">{{ $t(text.toLowerCase()) }}</span>
<span v-else>{{ text }}</span>
</template>
<template #displayname="{text, record}">
<QuickView
style="margin-left: 5px"
:actions="actions"
:resource="record"
:enabled="quickViewEnabled() && actions.length > 0 && columns && columns[0].dataIndex === 'displayname' "
@exec-action="$parent.execAction"/>
<router-link :to="{ path: $route.path + '/' + record.id }">{{ text }}</router-link>
</template>
<template #username="{text, record}">
<span v-if="$showIcon() && !['vm'].includes($route.path.split('/')[1])" style="margin-right: 5px">
<resource-icon v-if="$showIcon() && record.icon && record.icon.base64image" :image="record.icon.base64image" size="1x"/>
<user-outlined v-else style="font-size: 16px;" />
</span>
<router-link :to="{ path: $route.path + '/' + record.id }" v-if="['/accountuser', '/vpnuser'].includes($route.path)">{{ text }}</router-link>
<router-link :to="{ path: '/accountuser', query: { username: record.username, domainid: record.domainid } }" v-else-if="$store.getters.userInfo.roletype !== 'User'">{{ text }}</router-link>
<span v-else>{{ text }}</span>
</template>
<template #entityid="{ record }" href="javascript:;">
<router-link :to="{ path: generateCommentsPath(record), query: { tab: 'comments' } }">{{ record.entityname }}</router-link>
</template>
<template #entitytype="{ record }" href="javascript:;">
{{ generateHumanReadableEntityType(record) }}
</template>
<template #adminsonly="{ record }" v-if="['Admin'].includes($store.getters.userInfo.roletype)" href="javascript:;">
<a-checkbox :checked="record.adminsonly" :value="record.id" v-if="record.userid === $store.getters.userInfo.id" @change="e => updateAdminsOnly(e)" />
<a-checkbox :checked="record.adminsonly" disabled v-else />
</template>
<template #ipaddress="{ text, record }" href="javascript:;">
<router-link v-if="['/publicip', '/privategw'].includes($route.path)" :to="{ path: $route.path + '/' + record.id }">{{ text }}</router-link>
<span v-else>{{ text }}</span>
<span v-if="record.issourcenat">
&nbsp;
<a-tag>source-nat</a-tag>
</span>
<span v-if="record.isstaticnat">
&nbsp;
<a-tag>static-nat</a-tag>
</span>
</template>
<template #ip6address="{ text, record }" href="javascript:;">
<span>{{ ipV6Address(text, record) }}</span>
</template>
<template #publicip="{ text, record }">
<router-link v-if="['/autoscalevmgroup'].includes($route.path)" :to="{ path: '/publicip' + '/' + record.publicipid }">{{ text }}</router-link>
<router-link v-else :to="{ path: $route.path + '/' + record.id }">{{ text }}</router-link>
</template>
<template #traffictype="{ text }" href="javascript:;">
{{ text }}
</template>
<template #vmname="{ text, record }">
<router-link :to="{ path: createPathBasedOnVmType(record.vmtype, record.virtualmachineid) }">{{ text }}</router-link>
</template>
<template #virtualmachinename="{ text, record }">
<router-link :to="{ path: '/vm/' + record.virtualmachineid }">{{ text }}</router-link>
</template>
<template #hypervisor="{ text, record }">
<span v-if="$route.name === 'hypervisorcapability'">
<router-link :to="{ path: $route.path + '/' + record.id }">{{ text }}</router-link> <router-link :to="{ path: $route.path + '/' + record.id }">{{ text }}</router-link>
</span>
<span v-else>{{ text }}</span>
</template>
<template #state="{ text, record }">
<status v-if="$route.path.startsWith('/host')" :text="getHostState(record)" displayText />
<status v-else :text="text ? text : ''" displayText :styles="{ 'min-width': '80px' }" />
</template>
<template #allocationstate="{ text }">
<status :text="text ? text : ''" displayText />
</template>
<template #resourcestate="{ text }">
<status :text="text ? text : ''" displayText />
</template>
<template #powerstate="{ text }">
<status :text="text ? text : ''" displayText />
</template>
<template #agentstate="{ text }">
<status :text="text ? text : ''" displayText />
</template>
<template #quotastate="{ text }">
<status :text="text ? text : ''" displayText />
</template>
<template #vlan="{ text, record }">
<a href="javascript:;">
<router-link v-if="$route.path === '/guestvlans'" :to="{ path: '/guestvlans/' + record.id }">{{ text }}</router-link>
</a>
</template>
<template #guestnetworkname="{ text, record }">
<router-link :to="{ path: '/guestnetwork/' + record.guestnetworkid }">{{ text }}</router-link>
</template>
<template #associatednetworkname="{ text, record }">
<router-link :to="{ path: '/guestnetwork/' + record.associatednetworkid }">{{ text }}</router-link>
</template>
<template #vpcname="{ text, record }">
<router-link :to="{ path: '/vpc/' + record.vpcid }">{{ text }}</router-link>
</template>
<template #hostname="{ text, record }">
<router-link v-if="record.hostid" :to="{ path: '/host/' + record.hostid }">{{ text }}</router-link>
<router-link v-else-if="record.hostname" :to="{ path: $route.path + '/' + record.id }">{{ text }}</router-link>
<span v-else>{{ text }}</span>
</template>
<template #storage="{ text, record }">
<router-link v-if="record.storageid" :to="{ path: '/storagepool/' + record.storageid }">{{ text }}</router-link>
<span v-else>{{ text }}</span>
</template>
<template
v-for="(value, name) in thresholdMapping"
:key="name"
#[name]="{ text, record }"
href="javascript:;">
<span>
<span v-if="record[value.disable]" class="alert-disable-threshold">
{{ text }}
</span> </span>
<span v-else-if="record[value.notification]" class="alert-notification-threshold"> <span v-else>{{ text }}</span>
{{ text }} </template>
</span> <template v-if="column.key === 'state'">
<span style="padding: 10%;" v-else> <status v-if="$route.path.startsWith('/host')" :text="getHostState(record)" displayText />
{{ text }} <status v-else :text="text ? text : ''" displayText :styles="{ 'min-width': '80px' }" />
</span> </template>
</span> <template v-if="column.key === 'allocationstate'">
</template> <status :text="text ? text : ''" displayText />
</template>
<template #level="{ text, record }"> <template v-if="column.key === 'resourcestate'">
<router-link :to="{ path: '/event/' + record.id }">{{ text }}</router-link> <status :text="text ? text : ''" displayText />
</template> </template>
<template v-if="column.key === 'powerstate'">
<template #clustername="{ text, record }"> <status :text="text ? text : ''" displayText />
<router-link :to="{ path: '/cluster/' + record.clusterid }">{{ text }}</router-link> </template>
</template> <template v-if="column.key === 'agentstate'">
<template #podname="{ text, record }"> <status :text="text ? text : ''" displayText />
<router-link :to="{ path: '/pod/' + record.podid }">{{ text }}</router-link> </template>
</template> <template v-if="column.key === 'quotastate'">
<template #account="{ text, record }"> <status :text="text ? text : ''" displayText />
<template v-if="record.owner"> </template>
<template v-for="(item, idx) in record.owner" :key="idx"> <template v-if="column.key === 'vlan'">
<span style="margin-right:5px"> <a href="javascript:;">
<span v-if="$store.getters.userInfo.roletype !== 'User'"> <router-link v-if="$route.path === '/guestvlans'" :to="{ path: '/guestvlans/' + record.id }">{{ text }}</router-link>
<router-link v-if="'user' in item" :to="{ path: '/accountuser', query: { username: item.user, domainid: record.domainid }}">{{ item.account + '(' + item.user + ')' }}</router-link> </a>
<router-link v-else :to="{ path: '/account', query: { name: item.account, domainid: record.domainid, dataView: true } }">{{ item.account }}</router-link> </template>
<template v-if="column.key === 'guestnetworkname'">
<router-link :to="{ path: '/guestnetwork/' + record.guestnetworkid }">{{ text }}</router-link>
</template>
<template v-if="column.key === 'associatednetworkname'">
<router-link :to="{ path: '/guestnetwork/' + record.associatednetworkid }">{{ text }}</router-link>
</template>
<template v-if="column.key === 'vpcname'">
<router-link :to="{ path: '/vpc/' + record.vpcid }">{{ text }}</router-link>
</template>
<template v-if="column.key === 'hostname'">
<router-link v-if="record.hostid" :to="{ path: '/host/' + record.hostid }">{{ text }}</router-link>
<router-link v-else-if="record.hostname" :to="{ path: $route.path + '/' + record.id }">{{ text }}</router-link>
<span v-else>{{ text }}</span>
</template>
<template v-if="column.key === 'storage'">
<router-link v-if="record.storageid" :to="{ path: '/storagepool/' + record.storageid }">{{ text }}</router-link>
<span v-else>{{ text }}</span>
</template>
<template v-for="(value, name) in thresholdMapping" :key="name">
<template v-if="column.key === name">
<span>
<span v-if="record[value.disable]" class="alert-disable-threshold">
{{ text }}
</span>
<span v-else-if="record[value.notification]" class="alert-notification-threshold">
{{ text }}
</span>
<span style="padding: 10%;" v-else>
{{ text }}
</span> </span>
<span v-else>{{ item.user ? item.account + '(' + item.user + ')' : item.account }}</span>
</span> </span>
</template> </template>
</template> </template>
<template v-if="text && !text.startsWith('PrjAcct-')">
<router-link <template v-if="column.key === 'level'">
v-if="'quota' in record && $router.resolve(`${$route.path}/${record.account}`).matched[0].redirect !== '/exception/404'" <router-link :to="{ path: '/event/' + record.id }">{{ text }}</router-link>
:to="{ path: `${$route.path}/${record.account}`, query: { account: record.account, domainid: record.domainid, quota: true } }">{{ text }}</router-link> </template>
<router-link :to="{ path: '/account/' + record.accountid }" v-else-if="record.accountid">{{ text }}</router-link>
<router-link :to="{ path: '/account', query: { name: record.account, domainid: record.domainid, dataView: true } }" v-else-if="$store.getters.userInfo.roletype !== 'User'">{{ text }}</router-link> <template v-if="column.key === 'clustername'">
<router-link :to="{ path: '/cluster/' + record.clusterid }">{{ text }}</router-link>
</template>
<template v-if="column.key === 'podname'">
<router-link :to="{ path: '/pod/' + record.podid }">{{ text }}</router-link>
</template>
<template v-if="column.key === 'account'">
<template v-if="record.owner">
<template v-for="(item, idx) in record.owner" :key="idx">
<span style="margin-right:5px">
<span v-if="$store.getters.userInfo.roletype !== 'User'">
<router-link v-if="'user' in item" :to="{ path: '/accountuser', query: { username: item.user, domainid: record.domainid }}">{{ item.account + '(' + item.user + ')' }}</router-link>
<router-link v-else :to="{ path: '/account', query: { name: item.account, domainid: record.domainid, dataView: true } }">{{ item.account }}</router-link>
</span>
<span v-else>{{ item.user ? item.account + '(' + item.user + ')' : item.account }}</span>
</span>
</template>
</template>
<template v-if="text && !text.startsWith('PrjAcct-')">
<router-link
v-if="'quota' in record && $router.resolve(`${$route.path}/${record.account}`).matched[0].redirect !== '/exception/404'"
:to="{ path: `${$route.path}/${record.account}`, query: { account: record.account, domainid: record.domainid, quota: true } }">{{ text }}</router-link>
<router-link :to="{ path: '/account/' + record.accountid }" v-else-if="record.accountid">{{ text }}</router-link>
<router-link :to="{ path: '/account', query: { name: record.account, domainid: record.domainid, dataView: true } }" v-else-if="$store.getters.userInfo.roletype !== 'User'">{{ text }}</router-link>
<span v-else>{{ text }}</span>
</template>
</template>
<template v-if="column.key === 'resource'">
<resource-label :resourceType="record.resourcetype" :resourceId="record.resourceid" :resourceName="record.resourcename" />
</template>
<template v-if="column.key === 'domain'">
<router-link v-if="record.domainid && !record.domainid.toString().includes(',') && $store.getters.userInfo.roletype !== 'User'" :to="{ path: '/domain/' + record.domainid, query: { tab: 'details' } }">{{ text }}</router-link>
<span v-else>{{ text }}</span> <span v-else>{{ text }}</span>
</template> </template>
</template> <template v-if="column.key === 'domainpath'">
<template #resource="{ record }"> <router-link v-if="record.domainid && !record.domainid.includes(',') && $router.resolve('/domain/' + record.domainid).matched[0].redirect !== '/exception/404'" :to="{ path: '/domain/' + record.domainid, query: { tab: 'details' } }">{{ text }}</router-link>
<resource-label :resourceType="record.resourcetype" :resourceId="record.resourceid" :resourceName="record.resourcename" /> <span v-else>{{ text }}</span>
</template> </template>
<template #domain="{ text, record }"> <template v-if="column.key === 'zone'">
<router-link v-if="record.domainid && !record.domainid.toString().includes(',') && $store.getters.userInfo.roletype !== 'User'" :to="{ path: '/domain/' + record.domainid, query: { tab: 'details' } }">{{ text }}</router-link> <router-link v-if="record.zoneid && !record.zoneid.includes(',') && $router.resolve('/zone/' + record.zoneid).matched[0].redirect !== '/exception/404'" :to="{ path: '/zone/' + record.zoneid }">{{ text }}</router-link>
<span v-else>{{ text }}</span> <span v-else>{{ text }}</span>
</template> </template>
<template #domainpath="{ text, record }"> <template v-if="column.key === 'zonename'">
<router-link v-if="record.domainid && !record.domainid.includes(',') && $router.resolve('/domain/' + record.domainid).matched[0].redirect !== '/exception/404'" :to="{ path: '/domain/' + record.domainid, query: { tab: 'details' } }">{{ text }}</router-link> <router-link v-if="$router.resolve('/zone/' + record.zoneid).matched[0].redirect !== '/exception/404'" :to="{ path: '/zone/' + record.zoneid }">{{ text }}</router-link>
<span v-else>{{ text }}</span> <span v-else>{{ text }}</span>
</template> </template>
<template #zone="{ text, record }"> <template v-if="column.key === 'rolename'">
<router-link v-if="record.zoneid && !record.zoneid.includes(',') && $router.resolve('/zone/' + record.zoneid).matched[0].redirect !== '/exception/404'" :to="{ path: '/zone/' + record.zoneid }">{{ text }}</router-link> <router-link v-if="record.roleid && $router.resolve('/role/' + record.roleid).matched[0].redirect !== '/exception/404'" :to="{ path: '/role/' + record.roleid }">{{ text }}</router-link>
<span v-else>{{ text }}</span> <span v-else>{{ text }}</span>
</template> </template>
<template #zonename="{ text, record }"> <template v-if="column.key === 'templateversion'">
<router-link v-if="$router.resolve('/zone/' + record.zoneid).matched[0].redirect !== '/exception/404'" :to="{ path: '/zone/' + record.zoneid }">{{ text }}</router-link> <span> {{ record.version }} </span>
<span v-else>{{ text }}</span> </template>
</template> <template v-if="column.key === 'softwareversion'">
<template #rolename="{ text, record }"> <span> {{ record.softwareversion ? record.softwareversion : 'N/A' }} </span>
<router-link v-if="record.roleid && $router.resolve('/role/' + record.roleid).matched[0].redirect !== '/exception/404'" :to="{ path: '/role/' + record.roleid }">{{ text }}</router-link> </template>
<span v-else>{{ text }}</span> <template v-if="column.key === 'access'">
</template> <status :text="record.readonly ? 'ReadOnly' : 'ReadWrite'" displayText />
<template #templateversion="{ record }"> </template>
<span> {{ record.version }} </span> <template v-if="column.key === 'requiresupgrade'">
</template> <status :text="record.requiresupgrade ? 'warning' : ''" />
<template #softwareversion="{ record }"> {{ record.requiresupgrade ? 'Yes' : 'No' }}
<span> {{ record.softwareversion ? record.softwareversion : 'N/A' }} </span> </template>
</template> <template v-if="column.key === 'loadbalancerrule'">
<template #access="{ record }"> <span> {{ record.loadbalancerrule }} </span>
<status :text="record.readonly ? 'ReadOnly' : 'ReadWrite'" displayText /> </template>
</template> <template v-if="column.key === 'autoscalingenabled'">
<template #requiresupgrade="{ record }"> <status :text="record.autoscalingenabled ? 'Enabled' : 'Disabled'" />
<status :text="record.requiresupgrade ? 'warning' : ''" /> {{ record.autoscalingenabled ? 'Enabled' : 'Disabled' }}
{{ record.requiresupgrade ? 'Yes' : 'No' }} </template>
</template> <template v-if="column.key === 'current'">
<template #loadbalancerrule="{ record }"> <status :text="record.current ? record.current.toString() : 'false'" />
<span> {{ record.loadbalancerrule }} </span> </template>
</template> <template v-if="column.key === 'created'">
<template #autoscalingenabled="{ record }"> {{ $toLocaleDate(text) }}
<status :text="record.autoscalingenabled ? 'Enabled' : 'Disabled'" /> </template>
{{ record.autoscalingenabled ? 'Enabled' : 'Disabled' }} <template v-if="column.key === 'sent'">
</template> {{ $toLocaleDate(text) }}
<template #current="{record}"> </template>
<status :text="record.current ? record.current.toString() : 'false'" /> <template v-if="column.key === 'order'">
</template> <div class="shift-btns">
<template #created="{ text }"> <a-tooltip :name="text" placement="top">
{{ $toLocaleDate(text) }} <template #title>{{ $t('label.move.to.top') }}</template>
</template> <a-button
<template #sent="{ text }"> shape="round"
{{ $toLocaleDate(text) }} @click="moveItemTop(record)"
</template> class="shift-btn">
<template #order="{ text, record }"> <DoubleLeftOutlined class="shift-btn shift-btn--rotated" />
<div class="shift-btns"> </a-button>
<a-tooltip :name="text" placement="top"> </a-tooltip>
<template #title>{{ $t('label.move.to.top') }}</template> <a-tooltip placement="top">
<a-button <template #title>{{ $t('label.move.to.bottom') }}</template>
shape="round" <a-button
@click="moveItemTop(record)" shape="round"
class="shift-btn"> @click="moveItemBottom(record)"
<DoubleLeftOutlined class="shift-btn shift-btn--rotated" /> class="shift-btn">
</a-button> <DoubleRightOutlined class="shift-btn shift-btn--rotated" />
</a-tooltip> </a-button>
<a-tooltip placement="top"> </a-tooltip>
<template #title>{{ $t('label.move.to.bottom') }}</template> <a-tooltip placement="top">
<a-button <template #title>{{ $t('label.move.up.row') }}</template>
shape="round" <a-button shape="round" @click="moveItemUp(record)" class="shift-btn">
@click="moveItemBottom(record)" <CaretUpOutlined class="shift-btn" />
class="shift-btn"> </a-button>
<DoubleRightOutlined class="shift-btn shift-btn--rotated" /> </a-tooltip>
</a-button> <a-tooltip placement="top">
</a-tooltip> <template #title>{{ $t('label.move.down.row') }}</template>
<a-tooltip placement="top"> <a-button shape="round" @click="moveItemDown(record)" class="shift-btn">
<template #title>{{ $t('label.move.up.row') }}</template> <CaretDownOutlined class="shift-btn" />
<a-button shape="round" @click="moveItemUp(record)" class="shift-btn"> </a-button>
<CaretUpOutlined class="shift-btn" /> </a-tooltip>
</a-button> </div>
</a-tooltip> </template>
<a-tooltip placement="top">
<template #title>{{ $t('label.move.down.row') }}</template>
<a-button shape="round" @click="moveItemDown(record)" class="shift-btn">
<CaretDownOutlined class="shift-btn" />
</a-button>
</a-tooltip>
</div>
</template>
<template #value="{ text, record }"> <template v-if="column.key === 'value'">
<a-input <a-input
v-if="editableValueKey === record.key" v-if="editableValueKey === record.key"
v-focus="true" v-focus="true"
:defaultValue="record.value" :defaultValue="record.value"
:disabled="!('updateConfiguration' in $store.getters.apis)" :disabled="!('updateConfiguration' in $store.getters.apis)"
v-model:value="editableValue" v-model:value="editableValue"
@keydown.esc="editableValueKey = null" @keydown.esc="editableValueKey = null"
@pressEnter="saveValue(record)"> @pressEnter="saveValue(record)">
</a-input> </a-input>
<div v-else style="width: 200px; word-break: break-all"> <div v-else style="width: 200px; word-break: break-all">
{{ text }} {{ text }}
</div> </div>
</template>
<template v-if="column.key === 'actions'">
<tooltip-button
:tooltip="$t('label.edit')"
:disabled="!('updateConfiguration' in $store.getters.apis)"
v-if="editableValueKey !== record.key"
icon="edit-outlined"
@onClick="editValue(record)" />
<tooltip-button
:tooltip="$t('label.cancel')"
@onClick="editableValueKey = null"
v-if="editableValueKey === record.key"
iconType="CloseCircleTwoTone"
iconTwoToneColor="#f5222d" />
<tooltip-button
:tooltip="$t('label.ok')"
:disabled="!('updateConfiguration' in $store.getters.apis)"
@onClick="saveValue(record)"
v-if="editableValueKey === record.key"
iconType="CheckCircleTwoTone"
iconTwoToneColor="#52c41a" />
<tooltip-button
:tooltip="$t('label.reset.config.value')"
@onClick="resetConfig(record)"
v-if="editableValueKey !== record.key"
icon="reload-outlined"
:disabled="!('updateConfiguration' in $store.getters.apis)" />
</template>
<template v-if="column.key === 'tariffActions'">
<tooltip-button
:tooltip="$t('label.edit')"
v-if="editableValueKey !== record.key"
:disabled="!('quotaTariffUpdate' in $store.getters.apis)"
icon="edit-outlined"
@onClick="editTariffValue(record)" />
<slot></slot>
</template>
</template> </template>
<template #actions="{ record }"> <template #footer>
<tooltip-button <span v-if="hasSelected">
:tooltip="$t('label.edit')" {{ `Selected ${selectedRowKeys.length} items` }}
:disabled="!('updateConfiguration' in $store.getters.apis)" </span>
v-if="editableValueKey !== record.key"
icon="edit-outlined"
@onClick="editValue(record)" />
<tooltip-button
:tooltip="$t('label.cancel')"
@onClick="editableValueKey = null"
v-if="editableValueKey === record.key"
iconType="CloseCircleTwoTone"
iconTwoToneColor="#f5222d" />
<tooltip-button
:tooltip="$t('label.ok')"
:disabled="!('updateConfiguration' in $store.getters.apis)"
@onClick="saveValue(record)"
v-if="editableValueKey === record.key"
iconType="CheckCircleTwoTone"
iconTwoToneColor="#52c41a" />
<tooltip-button
:tooltip="$t('label.reset.config.value')"
@onClick="resetConfig(record)"
v-if="editableValueKey !== record.key"
icon="reload-outlined"
:disabled="!('updateConfiguration' in $store.getters.apis)" />
</template>
<template #tariffActions="{ record }">
<tooltip-button
:tooltip="$t('label.edit')"
v-if="editableValueKey !== record.key"
:disabled="!('quotaTariffUpdate' in $store.getters.apis)"
icon="edit-outlined"
@onClick="editTariffValue(record)" />
<slot></slot>
</template> </template>
</a-table> </a-table>
</template> </template>

20
ui/src/components/view/NicNetworkSelectForm.vue
View File

@ -33,11 +33,13 @@
:dataSource="networks" :dataSource="networks"
:pagination="false" :pagination="false"
:rowKey="record => record.id"> :rowKey="record => record.id">
<template #select="{record}"> <template #bodyCell="{ column, record }">
<a-radio <template v-if="column.key === 'select'">
@click="updateSelection(record)" <a-radio
:checked="selectedNetwork != null && record.id === selectedNetwork.id"> @click="updateSelection(record)"
</a-radio> :checked="selectedNetwork != null && record.id === selectedNetwork.id">
</a-radio>
</template>
</template> </template>
</a-table> </a-table>
<a-pagination <a-pagination
@ -97,24 +99,28 @@ export default {
selectedNetwork: null, selectedNetwork: null,
columns: [ columns: [
{ {
key: 'name',
title: this.$t('label.networkid'), title: this.$t('label.networkid'),
dataIndex: 'name' dataIndex: 'name'
}, },
{ {
key: 'type',
title: this.$t('label.guestiptype'), title: this.$t('label.guestiptype'),
dataIndex: 'type' dataIndex: 'type'
}, },
{ {
key: 'vpcName',
title: this.$t('label.vpc'), title: this.$t('label.vpc'),
dataIndex: 'vpcName' dataIndex: 'vpcName'
}, },
{ {
key: 'cidr',
title: this.$t('label.cidr'), title: this.$t('label.cidr'),
dataIndex: 'cidr' dataIndex: 'cidr'
}, },
{ {
title: this.$t('label.select'), key: 'select',
slots: { customRender: 'select' } title: this.$t('label.select')
} }
] ]
} }

4
ui/src/components/view/SearchView.vue
View File

@ -70,7 +70,7 @@
v-for="(opt, idx) in field.opts" v-for="(opt, idx) in field.opts"
:key="idx" :key="idx"
:value="opt.id" :value="opt.id"
:label="$t(opt.name)"> :label="$t(opt.path || opt.name)">
<div> <div>
<span v-if="(field.name.startsWith('zone'))"> <span v-if="(field.name.startsWith('zone'))">
<span v-if="opt.icon"> <span v-if="opt.icon">
@ -618,6 +618,7 @@ export default {
}, },
onClear () { onClear () {
this.formRef.value.resetFields() this.formRef.value.resetFields()
this.form = reactive({})
this.isFiltered = false this.isFiltered = false
this.inputKey = null this.inputKey = null
this.inputValue = null this.inputValue = null
@ -630,7 +631,6 @@ export default {
this.formRef.value.validate().then(() => { this.formRef.value.validate().then(() => {
const values = toRaw(this.form) const values = toRaw(this.form)
this.isFiltered = true this.isFiltered = true
console.log(values)
for (const key in values) { for (const key in values) {
const input = values[key] const input = values[key]
if (input === '' || input === null || input === undefined) { if (input === '' || input === null || input === undefined) {

102
ui/src/components/view/StoragePoolSelectView.vue
View File

@ -32,45 +32,49 @@
:dataSource="storagePools" :dataSource="storagePools"
:pagination="false" :pagination="false"
:rowKey="record => record.id"> :rowKey="record => record.id">
<template #suitabilityCustomTitle> <template #headerCell="{ column }">
{{ $t('label.suitability') }} <template v-if="column.key === 'suitability'">
<a-tooltip :title="$t('message.volume.state.primary.storage.suitability')" placement="top"> {{ $t('label.suitability') }}
<info-circle-outlined class="table-tooltip-icon" /> <a-tooltip :title="$t('message.volume.state.primary.storage.suitability')" placement="top">
</a-tooltip> <info-circle-outlined class="table-tooltip-icon" />
</a-tooltip>
</template>
</template> </template>
<template #name="{ record }"> <template #bodyCell="{ column, record }">
{{ record.name }} <template v-if="column.key === 'name'">
<a-tooltip v-if="record.name === $t('label.auto.assign')" :title="$t('message.migrate.volume.pool.auto.assign')" placement="top"> {{ record.name }}
<info-circle-outlined class="table-tooltip-icon" /> <a-tooltip v-if="record.name === $t('label.auto.assign')" :title="$t('message.migrate.volume.pool.auto.assign')" placement="top">
</a-tooltip> <info-circle-outlined class="table-tooltip-icon" />
</template> </a-tooltip>
<template #suitability="{ record }"> </template>
<check-circle-two-tone <template v-if="column.key === 'suitability'">
class="host-item__suitability-icon" <check-circle-two-tone
twoToneColor="#52c41a" class="host-item__suitability-icon"
v-if="record.suitableformigration" /> twoToneColor="#52c41a"
<close-circle-two-tone v-if="record.suitableformigration" />
class="host-item__suitability-icon" <close-circle-two-tone
twoToneColor="#f5222d" class="host-item__suitability-icon"
v-else /> twoToneColor="#f5222d"
</template> v-else />
<template #disksizetotal="{ record }"> </template>
<span v-if="record.disksizetotal">{{ $bytesToHumanReadableSize(record.disksizetotal) }}</span> <template v-if="column.key === 'disksizetotal'">
</template> <span v-if="record.disksizetotal">{{ $bytesToHumanReadableSize(record.disksizetotal) }}</span>
<template #disksizeused="{ record }"> </template>
<span v-if="record.disksizeused">{{ $bytesToHumanReadableSize(record.disksizeused) }}</span> <template v-if="column.key === 'disksizeused'">
</template> <span v-if="record.disksizeused">{{ $bytesToHumanReadableSize(record.disksizeused) }}</span>
<template #disksizefree="{ record }"> </template>
<span v-if="record.disksizetotal && record.disksizeused">{{ $bytesToHumanReadableSize(record.disksizetotal * 1 - record.disksizeused * 1) }}</span> <template v-if="column.key === 'disksizefree'">
</template> <span v-if="record.disksizetotal && record.disksizeused">{{ $bytesToHumanReadableSize(record.disksizetotal * 1 - record.disksizeused * 1) }}</span>
<template #select="{ record }"> </template>
<a-tooltip placement="top" :title="record.state !== 'Up' ? $t('message.primary.storage.invalid.state') : ''"> <template v-if="column.key === 'select'">
<a-radio <a-tooltip placement="top" :title="record.state !== 'Up' ? $t('message.primary.storage.invalid.state') : ''">
:disabled="record.id !== -1 && record.state !== 'Up'" <a-radio
@click="updateSelection(record)" :disabled="record.id !== -1 && record.state !== 'Up'"
:checked="selectedStoragePool != null && record.id === selectedStoragePool.id"> @click="updateSelection(record)"
</a-radio> :checked="selectedStoragePool != null && record.id === selectedStoragePool.id">
</a-tooltip> </a-radio>
</a-tooltip>
</template>
</template> </template>
</a-table> </a-table>
<a-pagination <a-pagination
@ -132,8 +136,8 @@ export default {
selectedStoragePool: null, selectedStoragePool: null,
columns: [ columns: [
{ {
title: this.$t('label.storageid'), key: 'name',
slots: { customRender: 'name' } title: this.$t('label.storageid')
}, },
{ {
title: this.$t('label.clusterid'), title: this.$t('label.clusterid'),
@ -144,27 +148,27 @@ export default {
dataIndex: 'podname' dataIndex: 'podname'
}, },
{ {
title: this.$t('label.disksizetotal'), key: 'disksizetotal',
slots: { customRender: 'disksizetotal' } title: this.$t('label.disksizetotal')
}, },
{ {
title: this.$t('label.disksizeused'), key: 'disksizeused',
slots: { customRender: 'disksizeused' } title: this.$t('label.disksizeused')
}, },
{ {
title: this.$t('label.disksizefree'), key: 'disksizefree',
slots: { customRender: 'disksizefree' } title: this.$t('label.disksizefree')
}, },
{ {
title: this.$t('label.select'), key: 'select',
slots: { customRender: 'select' } title: this.$t('label.select')
} }
] ]
} }
}, },
created () { created () {
if (this.suitabilityEnabled) { if (this.suitabilityEnabled) {
this.columns.splice(1, 0, { title: 'suitabilityCustomTitle', slots: 'suitability' }) this.columns.splice(1, 0, { key: 'suitability' })
} }
this.preselectStoragePool() this.preselectStoragePool()
this.fetchStoragePools() this.fetchStoragePools()

185
ui/src/components/view/TreeView.vue
View File

@ -42,8 +42,9 @@
@select="onSelect" @select="onSelect"
@expand="onExpand" @expand="onExpand"
:expandedKeys="arrExpand"> :expandedKeys="arrExpand">
<template #parent><folder-outlined /></template> <template #icon="{data}">
<template #leaf><block-outlined /></template> <block-outlined v-if="data.isLeaf" />
</template>
</a-tree> </a-tree>
</a-spin> </a-spin>
</a-card> </a-card>
@ -136,6 +137,10 @@ export default {
default () { default () {
return {} return {}
} }
},
treeDeletedKey: {
type: String,
default: null
} }
}, },
provide: function () { provide: function () {
@ -183,11 +188,11 @@ export default {
this.treeViewData = [] this.treeViewData = []
this.arrExpand = [] this.arrExpand = []
if (!this.loading) { if (!this.loading) {
this.treeViewData = this.treeData this.treeViewData = this.treeData.slice()
this.treeVerticalData = this.treeData this.treeVerticalData = this.treeData.slice()
if (this.treeViewData.length > 0) { if (this.treeViewData.length > 0) {
this.oldTreeViewData = this.treeViewData this.oldTreeViewData = this.treeViewData.slice()
this.rootKey = this.treeViewData[0].key this.rootKey = this.treeViewData[0].key
} }
} }
@ -288,39 +293,47 @@ export default {
} }
} }
this.onSelectResource() this.handleSelectResource(treeNode.eventKey)
resolve() resolve()
}) })
}) })
}, },
onSelectResource () { async handleSelectResource (treeKey) {
if (this.treeStore.selected) { if (this.treeDeletedKey && this.treeDeletedKey === this.treeStore?.treeSelected?.key) {
this.selectedTreeKey = this.treeStore.selected const treeSelectedKey = this.treeStore.treeSelected.parentdomainid
this.defaultSelected = [this.selectedTreeKey] if (treeSelectedKey === this.rootKey) {
this.resource = this.treeVerticalData[0]
const resource = this.treeVerticalData.filter(item => item.id === this.selectedTreeKey) this.selectedTreeKey = treeSelectedKey
if (resource.length > 0) { this.defaultSelected = [treeSelectedKey]
this.resource = resource[0]
this.$emit('change-resource', this.resource) this.$emit('change-resource', this.resource)
} else { await this.setTreeStore(false, false, this.resource)
const resourceIdx = this.treeVerticalData.findIndex(item => item.id === this.resource.id) return
const parentIndex = this.treeVerticalData.findIndex(item => item.id === this.resource.parentdomainid) }
if (resourceIdx !== -1) { const resourceIndex = await this.treeVerticalData.findIndex(item => item.id === treeSelectedKey)
this.resource = this.treeVerticalData[resourceIdx] if (resourceIndex > -1) {
} else if (parentIndex !== 1) { const resource = await this.getDetailResource(treeSelectedKey)
this.resource = this.treeVerticalData[parentIndex] this.resource = await this.createResourceData(resource)
} else {
this.resource = this.treeVerticalData[0] this.selectedTreeKey = treeSelectedKey
} this.defaultSelected = [treeSelectedKey]
this.selectedTreeKey = this.resource.key
this.defaultSelected = [this.selectedTreeKey]
this.$emit('change-resource', this.resource) this.$emit('change-resource', this.resource)
await this.setTreeStore(false, false, this.resource)
return
} }
} }
const treeSelectedKey = this.treeStore.treeSelected.key
const resourceIndex = await this.treeVerticalData.findIndex(item => item.id === treeSelectedKey)
if (resourceIndex > -1) {
this.selectedTreeKey = treeSelectedKey
this.defaultSelected = [treeSelectedKey]
this.resource = this.treeStore.treeSelected
this.$emit('change-resource', this.resource)
}
}, },
onSelect (selectedKeys, event) { async onSelect (selectedKeys, event) {
if (!event.selected) { if (!event.selected) {
setTimeout(() => { event.node.$refs.selectHandle.click() })
return return
} }
@ -331,20 +344,20 @@ export default {
this.defaultSelected = [] this.defaultSelected = []
this.defaultSelected.push(this.selectedTreeKey) this.defaultSelected.push(this.selectedTreeKey)
const resource = await this.getDetailResource(this.selectedTreeKey)
this.resource = await this.createResourceData(resource)
const index = this.treeVerticalData.findIndex(item => item.key === this.selectedTreeKey)
this.treeVerticalData[index] = this.resource
const treeStore = this.treeStore this.$emit('change-resource', this.resource)
treeStore.expands = this.arrExpand await this.setTreeStore(false, false, this.resource)
treeStore.selected = this.selectedTreeKey
this.$emit('change-tree-store', this.treeStore)
this.getDetailResource(this.selectedTreeKey)
}, },
onExpand (treeExpand) { onExpand (treeExpand) {
const treeStore = this.treeStore const treeStore = this.treeStore
this.arrExpand = treeExpand this.arrExpand = treeExpand
treeStore.isExpand = true treeStore.isExpand = true
treeStore.expands = this.arrExpand treeStore.expands = this.arrExpand
treeStore.selected = this.selectedTreeKey treeStore.treeSelected = this.resource
this.$emit('change-tree-store', treeStore) this.$emit('change-tree-store', treeStore)
}, },
onSearch (value) { onSearch (value) {
@ -416,40 +429,35 @@ export default {
onTabChange (key) { onTabChange (key) {
this.tabActive = key this.tabActive = key
}, },
setTreeStore (arrExpand, isExpand, resource) {
const treeStore = this.treeStore
if (arrExpand) treeStore.expands = arrExpand
if (isExpand) treeStore.isExpand = true
if (resource) treeStore.treeSelected = resource
this.$emit('change-tree-store', treeStore)
},
getDetailResource (selectedKey) { getDetailResource (selectedKey) {
// set api name and parameter return new Promise(resolve => {
const apiName = this.$route.meta.permission[0] // set api name and parameter
const params = {} const apiName = this.$route.meta.permission[0]
const params = {}
// set id to parameter // set id to parameter
params.id = selectedKey params.id = selectedKey
params.listAll = true params.listAll = true
params.showicon = true params.showicon = true
params.page = 1 params.page = 1
params.pageSize = 1 params.pageSize = 1
this.detailLoading = true this.detailLoading = true
api(apiName, params).then(json => { api(apiName, params).then(json => {
const jsonResponse = this.getResponseJsonData(json) const jsonResponse = this.getResponseJsonData(json)
resolve(jsonResponse[0])
// check json response is empty }).catch(() => {
if (!jsonResponse || jsonResponse.length === 0) { resolve()
this.resource = [] }).finally(() => {
} else { this.detailLoading = false
this.resource = jsonResponse[0] })
this.resource = this.createResourceData(this.resource)
// set all value of resource tree data
this.treeVerticalData.filter((item, index) => {
if (item.id === this.resource.id) {
this.treeVerticalData[index] = this.resource
}
})
}
// emit change resource to parent
this.$emit('change-resource', this.resource)
}).finally(() => {
this.detailLoading = false
}) })
}, },
getResponseJsonData (json) { getResponseJsonData (json) {
@ -524,15 +532,13 @@ export default {
}) })
resource.title = resource.name resource.title = resource.name
resource.key = resource.id resource.key = resource.id
resource.slots = { if (resource?.icon) {
icon: 'parent' resource.resourceIcon = resource.icon
delete resource.icon
} }
if (!resource.haschild) { if (!resource.haschild) {
resource.isLeaf = true resource.isLeaf = true
resource.slots = {
icon: 'leaf'
}
} }
return resource return resource
@ -586,8 +592,9 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.list-tree-view { :deep(.ant-tree).list-tree-view {
overflow-y: hidden; overflow-y: hidden;
margin-top: 10px;
} }
:deep(.ant-tree).ant-tree-directory { :deep(.ant-tree).ant-tree-directory {
li.ant-tree-treenode-selected { li.ant-tree-treenode-selected {
@ -615,7 +622,7 @@ export default {
} }
} }
:deep(.ant-tree) li span.ant-tree-switcher.ant-tree-switcher-noop { :deep(.ant-tree-show-line) .ant-tree-switcher.ant-tree-switcher-noop {
display: none display: none
} }
@ -626,10 +633,38 @@ export default {
:deep(.ant-tree-icon__customize) { :deep(.ant-tree-icon__customize) {
padding-right: 5px; padding-right: 5px;
background: transparent;
} }
:deep(.ant-tree) li .ant-tree-node-content-wrapper { :deep(.ant-tree) {
padding-left: 0; .ant-tree-treenode {
margin-left: 3px; .ant-tree-node-content-wrapper {
margin-left: 0;
margin-bottom: 2px;
&:before {
border-left: 1px solid #d9d9d9;
content: " ";
height: 100%;
height: calc(100% - 15px);
left: 12px;
margin: 22px 0 0;
position: absolute;
width: 1px;
top: 0;
}
}
&.ant-tree-treenode-switcher-close, &.ant-tree-treenode-switcher-open, &.ant-tree-treenode-leaf-last {
.ant-tree-node-content-wrapper:before {
display: none;
}
}
}
}
:deep(.ant-tree-show-line) .ant-tree-indent-unit:before {
bottom: -2px;
top: -5px;
} }
</style> </style>

43
ui/src/components/view/VolumesTab.vue
View File

@ -24,20 +24,22 @@
:rowKey="item => item.id" :rowKey="item => item.id"
:pagination="false" :pagination="false"
> >
<template #name="{ text, record }"> <template #bodyCell="{ column, text, record }">
<hdd-outlined style="margin-right: 5px"/> <template v-if="column.key === 'name'">
<router-link :to="{ path: '/volume/' + record.id }" style="margin-right: 5px"> <hdd-outlined style="margin-right: 5px"/>
{{ text }} <router-link :to="{ path: '/volume/' + record.id }" style="margin-right: 5px">
</router-link> {{ text }}
<a-tag v-if="record.provisioningtype"> </router-link>
{{ record.provisioningtype }} <a-tag v-if="record.provisioningtype">
</a-tag> {{ record.provisioningtype }}
</template> </a-tag>
<template #state="{ text }"> </template>
<status :text="text ? text : ''" />{{ text }} <template v-if="column.key === 'state'">
</template> <status :text="text ? text : ''" />{{ text }}
<template #size="{ record }"> </template>
{{ parseFloat(record.size / (1024.0 * 1024.0 * 1024.0)).toFixed(2) }} GB <template v-if="column.key === 'size'">
{{ parseFloat(record.size / (1024.0 * 1024.0 * 1024.0)).toFixed(2) }} GB
</template>
</template> </template>
</a-table> </a-table>
</template> </template>
@ -68,23 +70,23 @@ export default {
volumes: [], volumes: [],
volumeColumns: [ volumeColumns: [
{ {
key: 'name',
title: this.$t('label.name'), title: this.$t('label.name'),
dataIndex: 'name', dataIndex: 'name'
slots: { customRender: 'name' }
}, },
{ {
key: 'state',
title: this.$t('label.state'), title: this.$t('label.state'),
dataIndex: 'state', dataIndex: 'state'
slots: { customRender: 'state' }
}, },
{ {
title: this.$t('label.type'), title: this.$t('label.type'),
dataIndex: 'type' dataIndex: 'type'
}, },
{ {
key: 'size',
title: this.$t('label.size'), title: this.$t('label.size'),
dataIndex: 'size', dataIndex: 'size'
slots: { customRender: 'size' }
} }
] ]
} }
@ -92,7 +94,6 @@ export default {
created () { created () {
this.vm = this.resource this.vm = this.resource
this.fetchData() this.fetchData()
console.log(this.resource.volumes)
}, },
watch: { watch: {
resource: function (newItem) { resource: function (newItem) {

18
ui/src/components/widgets/Status.vue
View File

@ -16,14 +16,16 @@
// under the License. // under the License.
<template> <template>
<a-tooltip placement="bottom" :title="getTooltip(text)"> <div style="display: inline-flex;">
<a-badge <a-tooltip placement="bottom" :title="getTooltip(text)">
:style="getStyle()" <a-badge
:title="text" :style="getStyle()"
:color="getStatusColor(text)" :title="text"
:status="getBadgeStatus(text)" :color="getStatusColor(text)"
:text="getText()" /> :status="getBadgeStatus(text)"
</a-tooltip> :text="getText()" />
</a-tooltip>
</div>
</template> </template>
<script> <script>

3
ui/src/config/section/config.js
View File

@ -25,6 +25,7 @@ export default {
name: 'globalsetting', name: 'globalsetting',
title: 'label.global.settings', title: 'label.global.settings',
icon: 'setting-outlined', icon: 'setting-outlined',
docHelp: 'adminguide/index.html#tuning',
permission: ['listConfigurations'], permission: ['listConfigurations'],
listView: true, listView: true,
popup: true, popup: true,
@ -34,6 +35,7 @@ export default {
name: 'ldapsetting', name: 'ldapsetting',
title: 'label.ldap.configuration', title: 'label.ldap.configuration',
icon: 'team-outlined', icon: 'team-outlined',
docHelp: 'adminguide/accounts.html#using-an-ldap-server-for-user-authentication',
permission: ['listLdapConfigurations'], permission: ['listLdapConfigurations'],
columns: ['hostname', 'port', 'domainid'], columns: ['hostname', 'port', 'domainid'],
details: ['hostname', 'port', 'domainid'], details: ['hostname', 'port', 'domainid'],
@ -72,6 +74,7 @@ export default {
name: 'hypervisorcapability', name: 'hypervisorcapability',
title: 'label.hypervisor.capabilities', title: 'label.hypervisor.capabilities',
icon: 'database-outlined', icon: 'database-outlined',
docHelp: 'adminguide/hosts.html?highlight=Hypervisor%20capabilities#hypervisor-capabilities',
permission: ['listHypervisorCapabilities'], permission: ['listHypervisorCapabilities'],
columns: ['hypervisor', 'hypervisorversion', 'maxguestslimit', 'maxhostspercluster'], columns: ['hypervisor', 'hypervisorversion', 'maxguestslimit', 'maxhostspercluster'],
details: ['hypervisor', 'hypervisorversion', 'maxguestslimit', 'maxdatavolumeslimit', 'maxhostspercluster', 'securitygroupenabled', 'storagemotionenabled'], details: ['hypervisor', 'hypervisorversion', 'maxguestslimit', 'maxdatavolumeslimit', 'maxhostspercluster', 'securitygroupenabled', 'storagemotionenabled'],

1
ui/src/config/section/infra/clusters.js
View File

@ -22,6 +22,7 @@ export default {
name: 'cluster', name: 'cluster',
title: 'label.clusters', title: 'label.clusters',
icon: 'cluster-outlined', icon: 'cluster-outlined',
docHelp: 'conceptsandterminology/concepts.html#about-clusters',
permission: ['listClustersMetrics'], permission: ['listClustersMetrics'],
columns: () => { columns: () => {
const fields = ['name', 'state', 'allocationstate', 'clustertype', 'hypervisortype', 'hosts'] const fields = ['name', 'state', 'allocationstate', 'clustertype', 'hypervisortype', 'hosts']

1
ui/src/config/section/infra/hosts.js
View File

@ -22,6 +22,7 @@ export default {
name: 'host', name: 'host',
title: 'label.hosts', title: 'label.hosts',
icon: 'desktop-outlined', icon: 'desktop-outlined',
docHelp: 'conceptsandterminology/concepts.html#about-hosts',
permission: ['listHostsMetrics'], permission: ['listHostsMetrics'],
resourceType: 'Host', resourceType: 'Host',
params: { type: 'routing' }, params: { type: 'routing' },

1
ui/src/config/section/infra/ilbvms.js
View File

@ -20,6 +20,7 @@ export default {
name: 'ilbvm', name: 'ilbvm',
title: 'label.internal.lb', title: 'label.internal.lb',
icon: 'share-alt-outlined', icon: 'share-alt-outlined',
docHelp: 'adminguide/networking_and_traffic.html#creating-an-internal-lb-rule',
permission: ['listInternalLoadBalancerVMs'], permission: ['listInternalLoadBalancerVMs'],
params: { projectid: '-1' }, params: { projectid: '-1' },
columns: ['name', 'state', 'publicip', 'guestnetworkname', 'vpcname', 'version', 'softwareversion', 'hostname', 'account', 'zonename', 'requiresupgrade'], columns: ['name', 'state', 'publicip', 'guestnetworkname', 'vpcname', 'version', 'softwareversion', 'hostname', 'account', 'zonename', 'requiresupgrade'],

1
ui/src/config/section/infra/managementServers.js
View File

@ -22,6 +22,7 @@ export default {
name: 'managementserver', name: 'managementserver',
title: 'label.management.servers', title: 'label.management.servers',
icon: 'CloudServerOutlined', icon: 'CloudServerOutlined',
docHelp: 'conceptsandterminology/concepts.html#management-server-overview',
permission: ['listManagementServersMetrics'], permission: ['listManagementServersMetrics'],
columns: () => { columns: () => {
const fields = ['name', 'state', 'version'] const fields = ['name', 'state', 'version']

1
ui/src/config/section/infra/pods.js
View File

@ -22,6 +22,7 @@ export default {
name: 'pod', name: 'pod',
title: 'label.pods', title: 'label.pods',
icon: 'appstore-outlined', icon: 'appstore-outlined',
docHelp: 'conceptsandterminology/concepts.html#about-pods',
permission: ['listPods'], permission: ['listPods'],
columns: ['name', 'allocationstate', 'gateway', 'netmask', 'zonename'], columns: ['name', 'allocationstate', 'gateway', 'netmask', 'zonename'],
details: ['name', 'id', 'allocationstate', 'netmask', 'gateway', 'zonename'], details: ['name', 'id', 'allocationstate', 'netmask', 'gateway', 'zonename'],

1
ui/src/config/section/infra/zones.js
View File

@ -22,6 +22,7 @@ export default {
name: 'zone', name: 'zone',
title: 'label.zones', title: 'label.zones',
icon: 'global-outlined', icon: 'global-outlined',
docHelp: 'conceptsandterminology/concepts.html#about-zones',
permission: ['listZonesMetrics'], permission: ['listZonesMetrics'],
columns: () => { columns: () => {
const fields = ['name', 'allocationstate', 'type', 'networktype', 'clusters'] const fields = ['name', 'allocationstate', 'type', 'networktype', 'clusters']

2
ui/src/config/section/network.js
View File

@ -30,6 +30,7 @@ export default {
name: 'guestnetwork', name: 'guestnetwork',
title: 'label.guest.networks', title: 'label.guest.networks',
icon: 'apartment-outlined', icon: 'apartment-outlined',
docHelp: 'adminguide/networking_and_traffic.html#adding-an-additional-guest-network',
permission: ['listNetworks'], permission: ['listNetworks'],
resourceType: 'Network', resourceType: 'Network',
columns: () => { columns: () => {
@ -906,6 +907,7 @@ export default {
name: 'guestvlans', name: 'guestvlans',
title: 'label.guest.vlan', title: 'label.guest.vlan',
icon: 'folder-outlined', icon: 'folder-outlined',
docHelp: 'conceptsandterminology/network_setup.html#vlan-allocation-example',
permission: ['listGuestVlans'], permission: ['listGuestVlans'],
resourceType: 'GuestVlan', resourceType: 'GuestVlan',
filters: ['allocatedonly', 'all'], filters: ['allocatedonly', 'all'],

3
ui/src/layouts/UserLayout.vue
View File

@ -46,6 +46,7 @@
<script> <script>
import RouteView from '@/layouts/RouteView' import RouteView from '@/layouts/RouteView'
import { mixinDevice } from '@/utils/mixin.js' import { mixinDevice } from '@/utils/mixin.js'
import notification from 'ant-design-vue/es/notification'
export default { export default {
name: 'UserLayout', name: 'UserLayout',
@ -90,7 +91,7 @@ export default {
}, },
methods: { methods: {
onClearNotification () { onClearNotification () {
this.$notification.destroy() notification.destroy()
this.$store.commit('SET_COUNT_NOTIFY', 0) this.$store.commit('SET_COUNT_NOTIFY', 0)
} }
} }

5
ui/src/permission.js
View File

@ -26,7 +26,7 @@ import 'nprogress/nprogress.css' // progress bar style
import message from 'ant-design-vue/es/message' import message from 'ant-design-vue/es/message'
import notification from 'ant-design-vue/es/notification' import notification from 'ant-design-vue/es/notification'
import { setDocumentTitle } from '@/utils/domUtil' import { setDocumentTitle } from '@/utils/domUtil'
import { ACCESS_TOKEN, APIS, SERVER_MANAGER } from '@/store/mutation-types' import { ACCESS_TOKEN, APIS, SERVER_MANAGER, CURRENT_PROJECT } from '@/store/mutation-types'
NProgress.configure({ showSpinner: false }) // NProgress Configuration NProgress.configure({ showSpinner: false }) // NProgress Configuration
@ -104,7 +104,8 @@ router.beforeEach((to, from, next) => {
} else { } else {
next({ path: redirect }) next({ path: redirect })
} }
store.dispatch('ToggleTheme', 'light') const project = vueProps.$localStorage.get(CURRENT_PROJECT)
store.dispatch('ToggleTheme', project.id === undefined ? 'light' : 'dark')
}) })
}) })
.catch(() => { .catch(() => {

62
ui/src/style/dark-mode.less
View File

@ -83,6 +83,7 @@
.sider.light { .sider.light {
background: @dark-secondary-bgColor; background: @dark-secondary-bgColor;
padding-top: 15px;
.logo { .logo {
background-color: @dark-secondary-bgColor; background-color: @dark-secondary-bgColor;
@ -139,6 +140,10 @@
color: @dark-text-color-3; color: @dark-text-color-3;
} }
} }
&-inline, &-vertical, &-vertical-left {
border-color: transparent;
}
} }
.kubernet-icon path .kubernet-icon path
@ -289,6 +294,10 @@
& > tr > th.ant-table-column-sort { & > tr > th.ant-table-column-sort {
background-color: @dark-bgColor; background-color: @dark-bgColor;
} }
& > tr.ant-table-row:hover > td, & > tr > td.ant-table-cell-row-hover {
background: transparent;
}
} }
&-footer { &-footer {
@ -336,6 +345,12 @@
border-color: @dark-border-color; border-color: @dark-border-color;
} }
} }
&-small {
.ant-table-thead > tr > th {
background-color: transparent;
}
}
} }
.light-row, .dark-row { .light-row, .dark-row {
@ -524,13 +539,17 @@
background-color: #1890ff; background-color: #1890ff;
} }
&-loading-icon, &:after { &-loading-icon, &::before {
background-color: @dark-secondary-bgColor; background-color: @dark-secondary-bgColor;
} }
&:disabled { &:disabled {
background-color: @disabled-bgColor; background-color: @disabled-bgColor;
} }
&-handle::before {
background-color: @dark-secondary-bgColor;
}
} }
.ant-select-dropdown { .ant-select-dropdown {
@ -783,7 +802,7 @@
background-color: @dark-secondary-bgColor; background-color: @dark-secondary-bgColor;
} }
.ant-upload.ant-upload-drag { .ant-form-item .ant-upload.ant-upload-drag {
background-color: transparent; background-color: transparent;
border-color: @dark-border-color; border-color: @dark-border-color;
} }
@ -792,12 +811,43 @@
color: @dark-text-color-3; color: @dark-text-color-3;
} }
.ant-tree.ant-tree-show-line li span.ant-tree-switcher { .ant-upload-list {
color: @dark-text-color-3;
&-item {
&:hover {
.ant-upload-list-item-info {
background: @dark-bgColor;
}
.ant-upload-list-item-card-actions-btn {
border-color: transparent;
}
.ant-upload-list-item-card-actions .anticon {
color: @dark-text-color-3;
}
}
}
}
.ant-upload-list-item-info {
.anticon-loading .anticon,
.ant-upload-text-icon .anticon {
color: rgba(255, 255, 255, 0.65);
}
}
.ant-tree {
background: transparent;
}
.ant-tree-show-line .ant-tree-switcher {
background-color: transparent; background-color: transparent;
color: @dark-text-color-3; color: @dark-text-color-3;
} }
.ant-tree li .ant-tree-node-content-wrapper { .ant-tree .ant-tree-node-content-wrapper {
color: @dark-text-color-3; color: @dark-text-color-3;
} }
@ -806,7 +856,7 @@
background-color: transparent; background-color: transparent;
} }
.ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected { .ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected {
.ant-tree-icon__customize { .ant-tree-icon__customize {
color: #000; color: #000;
} }
@ -814,7 +864,7 @@
color: #000; color: #000;
} }
.ant-tree li .ant-tree-node-content-wrapper:hover { .ant-tree .ant-tree-node-content-wrapper:hover {
.ant-tree-icon__customize { .ant-tree-icon__customize {
color: #000; color: #000;
} }

4
ui/src/style/index.less
View File

@ -16,8 +16,8 @@
// under the License. // under the License.
//* import all ## official ant ## variables; mixins and styles //* import all ## official ant ## variables; mixins and styles
@import "~ant-design-vue/lib/style/themes/default"; @import "~ant-design-vue/es/style/themes/default.less";
@import "~ant-design-vue/lib/style/core/index"; @import "~ant-design-vue/es/style/core/index.less";
//* import all ## custom ## variables, mixins and styles //* import all ## custom ## variables, mixins and styles

29
ui/src/style/vars.less
View File

@ -505,4 +505,33 @@ a {
.ant-dropdown-menu-item:hover, .ant-dropdown-menu-item:hover,
.ant-dropdown-menu-submenu-title:hover { .ant-dropdown-menu-submenu-title:hover {
background-color: color(~`colorPalette("@{primary-color}", 1)`) !important; background-color: color(~`colorPalette("@{primary-color}", 1)`) !important;
}
.ant-tabs.tab-center {
> .ant-tabs-nav, > div > .ant-tabs-nav,
> .ant-tabs-nav .ant-tabs-nav-wrap,
> div > .ant-tabs-nav .ant-tabs-nav-wrap {
justify-content: center;
}
}
.ant-tabs-large>.ant-tabs-nav .ant-tabs-tab {
padding: 16px;
}
.ant-steps {
&-item-container {
&:hover {
.ant-steps-item-content .ant-steps-item-description {
color: inherit !important;
}
}
}
&-item-process {
.ant-steps-item-content .ant-steps-item-title {
color: inherit !important;
font-weight: 600;
}
}
} }

1
ui/src/utils/request.js
View File

@ -193,6 +193,7 @@ const sourceToken = {
cancel: () => { cancel: () => {
if (!source) sourceToken.init() if (!source) sourceToken.init()
source.cancel() source.cancel()
source = null
} }
} }

62
ui/src/views/AutogenView.vue
View File

@ -249,11 +249,14 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" }"
> >
<a-select-option key="" >{{ }}</a-select-option> <a-select-option key="" label="">{{ }}</a-select-option>
<a-select-option v-for="(opt, optIndex) in currentAction.mapping[field.name].options" :key="optIndex"> <a-select-option
v-for="(opt, optIndex) in currentAction.mapping[field.name].options"
:key="optIndex"
:label="opt">
{{ opt }} {{ opt }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -266,12 +269,15 @@
:loading="field.loading" :loading="field.loading"
:placeholder="field.description" :placeholder="field.description"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" }"
v-focus="fieldIndex === firstIndex" v-focus="fieldIndex === firstIndex"
> >
<a-select-option key="">{{ }}</a-select-option> <a-select-option key="" label="">{{ }}</a-select-option>
<a-select-option v-for="(opt, optIndex) in field.opts" :key="optIndex"> <a-select-option
v-for="(opt, optIndex) in field.opts"
:key="optIndex"
:label="opt.name || opt.description || opt.traffictype || opt.publicip">
{{ opt.name || opt.description || opt.traffictype || opt.publicip }} {{ opt.name || opt.description || opt.traffictype || opt.publicip }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -340,10 +346,13 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" }"
> >
<a-select-option v-for="(opt, optIndex) in field.opts" :key="optIndex"> <a-select-option
v-for="(opt, optIndex) in field.opts"
:key="optIndex"
:label="opt.name && opt.type ? opt.name + ' (' + opt.type + ')' : opt.name || opt.description">
{{ opt.name && opt.type ? opt.name + ' (' + opt.type + ')' : opt.name || opt.description }} {{ opt.name && opt.type ? opt.name + ' (' + opt.type + ')' : opt.name || opt.description }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -405,7 +414,7 @@
ref="listview" ref="listview"
@update-selected-columns="updateSelectedColumns" @update-selected-columns="updateSelectedColumns"
@selection-change="onRowSelectionChange" @selection-change="onRowSelectionChange"
@refresh="this.fetchData" @refresh="fetchData"
@edit-tariff-action="(showAction, record) => $emit('edit-tariff-action', showAction, record)"/> @edit-tariff-action="(showAction, record) => $emit('edit-tariff-action', showAction, record)"/>
<a-pagination <a-pagination
class="row-element" class="row-element"
@ -803,7 +812,6 @@ export default {
}) })
} }
const customRender = {}
for (var columnKey of this.columnKeys) { for (var columnKey of this.columnKeys) {
let key = columnKey let key = columnKey
let title = columnKey === 'cidr' && this.columnKeys.includes('ip6cidr') ? 'ipv4.cidr' : columnKey let title = columnKey === 'cidr' && this.columnKeys.includes('ip6cidr') ? 'ipv4.cidr' : columnKey
@ -811,18 +819,16 @@ export default {
if ('customTitle' in columnKey && 'field' in columnKey) { if ('customTitle' in columnKey && 'field' in columnKey) {
key = columnKey.field key = columnKey.field
title = columnKey.customTitle title = columnKey.customTitle
customRender[key] = columnKey[key]
} else { } else {
key = Object.keys(columnKey)[0] key = Object.keys(columnKey)[0]
title = Object.keys(columnKey)[0] title = Object.keys(columnKey)[0]
customRender[key] = columnKey[key]
} }
} }
this.columns.push({ this.columns.push({
key: key,
title: this.$t('label.' + String(title).toLowerCase()), title: this.$t('label.' + String(title).toLowerCase()),
dataIndex: key, dataIndex: key,
slots: { customRender: key }, sorter: function (a, b) { return genericCompare(a[key] || '', b[key] || '') }
sorter: function (a, b) { return genericCompare(a[this.dataIndex] || '', b[this.dataIndex] || '') }
}) })
this.selectedColumns.push(key) this.selectedColumns.push(key)
} }
@ -844,6 +850,7 @@ export default {
this.$t('label.linklocalip'), this.$t('label.size'), this.$t('label.sizegb'), this.$t('label.current'), this.$t('label.linklocalip'), this.$t('label.size'), this.$t('label.sizegb'), this.$t('label.current'),
this.$t('label.created'), this.$t('label.order')].includes(column.title) this.$t('label.created'), this.$t('label.order')].includes(column.title)
}) })
this.chosenColumns.splice(this.chosenColumns.length - 1, 1)
if (['listTemplates', 'listIsos'].includes(this.apiName) && this.dataView) { if (['listTemplates', 'listIsos'].includes(this.apiName) && this.dataView) {
delete params.showunique delete params.showunique
@ -951,12 +958,6 @@ export default {
for (let idx = 0; idx < this.items.length; idx++) { for (let idx = 0; idx < this.items.length; idx++) {
this.items[idx].key = idx this.items[idx].key = idx
for (const key in customRender) {
const func = customRender[key]
if (func && typeof func === 'function') {
this.items[idx][key] = func(this.items[idx])
}
}
if (this.$route.path.startsWith('/ldapsetting')) { if (this.$route.path.startsWith('/ldapsetting')) {
this.items[idx].id = this.items[idx].hostname this.items[idx].id = this.items[idx].hostname
} }
@ -1280,9 +1281,9 @@ export default {
this.bulkColumns = this.chosenColumns this.bulkColumns = this.chosenColumns
this.selectedItems = this.selectedItems.map(v => ({ ...v, status: 'InProgress' })) this.selectedItems = this.selectedItems.map(v => ({ ...v, status: 'InProgress' }))
this.bulkColumns.splice(0, 0, { this.bulkColumns.splice(0, 0, {
key: 'status',
dataIndex: 'status', dataIndex: 'status',
title: this.$t('label.operation.status'), title: this.$t('label.operation.status'),
slots: { customRender: 'status' },
filters: [ filters: [
{ text: 'In Progress', value: 'InProgress' }, { text: 'In Progress', value: 'InProgress' },
{ text: 'Success', value: 'success' }, { text: 'Success', value: 'success' },
@ -1534,13 +1535,17 @@ export default {
} }
this.columns = this.allColumns.filter(x => this.selectedColumns.includes(x.dataIndex)) this.columns = this.allColumns.filter(x => this.selectedColumns.includes(x.dataIndex))
this.columns.push({ const filterColumn = {
dataIndex: 'dropdownFilter', key: 'filtercolumn',
slots: { dataIndex: 'filtercolumn',
filterDropdown: 'filterDropdown', title: '',
filterIcon: 'filterIcon' customFilterDropdown: true,
} width: 5
}) }
if (this.columns.length === 0) {
filterColumn.width = 'auto'
}
this.columns.push(filterColumn)
if (!this.$store.getters.customColumns[this.$store.getters.userInfo.id]) { if (!this.$store.getters.customColumns[this.$store.getters.userInfo.id]) {
this.$store.getters.customColumns[this.$store.getters.userInfo.id] = {} this.$store.getters.customColumns[this.$store.getters.userInfo.id] = {}
} }
@ -1760,7 +1765,6 @@ export default {
this.rules[field.name].push(rule) this.rules[field.name].push(rule)
break break
default: default:
console.log('hererere')
rule.required = field.required rule.required = field.required
rule.message = this.$t('message.error.required.input') rule.message = this.$t('message.error.required.input')
this.rules[field.name].push(rule) this.rules[field.name].push(rule)

13
ui/src/views/auth/Login.vue
View File

@ -26,6 +26,7 @@
v-ctrl-enter="handleSubmit" v-ctrl-enter="handleSubmit"
> >
<a-tabs <a-tabs
class="tab-center"
:activeKey="customActiveKey" :activeKey="customActiveKey"
size="large" size="large"
:tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }" :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }"
@ -48,9 +49,9 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"> }">
<a-select-option v-for="item in $config.servers" :key="(item.apiHost || '') + item.apiBase"> <a-select-option v-for="item in $config.servers" :key="(item.apiHost || '') + item.apiBase" :label="item.name">
<template #prefix> <template #prefix>
<database-outlined /> <database-outlined />
</template> </template>
@ -113,9 +114,9 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" > }" >
<a-select-option v-for="item in $config.servers" :key="(item.apiHost || '') + item.apiBase"> <a-select-option v-for="item in $config.servers" :key="(item.apiHost || '') + item.apiBase" :label="item.name">
<template #prefix> <template #prefix>
<database-outlined /> <database-outlined />
</template> </template>
@ -129,9 +130,9 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" > }" >
<a-select-option v-for="(idp, idx) in idps" :key="idx" :value="idp.id"> <a-select-option v-for="(idp, idx) in idps" :key="idx" :value="idp.id" :label="idp.orgName">
{{ idp.orgName }} {{ idp.orgName }}
</a-select-option> </a-select-option>
</a-select> </a-select>

6
ui/src/views/compute/AssignInstance.vue
View File

@ -35,9 +35,9 @@
v-model:value="selectedAccountType" v-model:value="selectedAccountType"
v-focus="true" v-focus="true"
showSearch showSearch
optionFilterProp="label" optionFilterProp="value"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"> }">
<a-select-option :value="$t('label.account')">{{ $t('label.account') }}</a-select-option> <a-select-option :value="$t('label.account')">{{ $t('label.account') }}</a-select-option>
<a-select-option :value="$t('label.project')">{{ $t('label.project') }}</a-select-option> <a-select-option :value="$t('label.project')">{{ $t('label.project') }}</a-select-option>
@ -71,7 +71,7 @@
@change="changeAccount" @change="changeAccount"
v-model:value="selectedAccount" v-model:value="selectedAccount"
showSearch showSearch
optionFilterProp="label" optionFilterProp="value"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" > }" >

4
ui/src/views/compute/AttachIso.vue
View File

@ -31,9 +31,9 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"> }">
<a-select-option v-for="iso in isos" :key="iso.id"> <a-select-option v-for="iso in isos" :key="iso.id" :label="iso.displaytext || iso.name">
{{ iso.displaytext || iso.name }} {{ iso.displaytext || iso.name }}
</a-select-option> </a-select-option>
</a-select> </a-select>

89
ui/src/views/compute/AutoScaleDownPolicyTab.vue
View File

@ -36,12 +36,13 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" > }" >
<a-select-option <a-select-option
v-for="(scalepolicy, index) in this.policies" v-for="(scalepolicy, index) in this.policies"
:value="scalepolicy.id" :value="scalepolicy.id"
:key="index"> :key="index"
:label="scalepolicy.displaytext || scalepolicy.name" >
{{ scalepolicy.name || scalepolicy.id }} {{ scalepolicy.name || scalepolicy.id }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -109,28 +110,24 @@
:dataSource="policy.conditions" :dataSource="policy.conditions"
:pagination="false" :pagination="false"
:rowKey="record => record.id"> :rowKey="record => record.id">
<template #name="{ record }"> <template #bodyCell="{ column, record }">
{{ record.name }} <template v-if="column.key === 'relationaloperator'">
</template> {{ getOperator(record.relationaloperator) }}
<template #relationaloperator="{ record }"> </template>
{{ getOperator(record.relationaloperator) }} <template v-if="column.key === 'actions'">
</template> <tooltip-button
<template #threshold="{ record }"> :tooltip="$t('label.edit')"
{{ record.threshold }} :disabled="!('updateCondition' in $store.getters.apis) || resource.state !== 'DISABLED'"
</template> icon="edit-outlined"
<template #actions="{ record }"> @onClick="() => openUpdateConditionModal(record)" />
<tooltip-button <tooltip-button
:tooltip="$t('label.edit')" :tooltip="$t('label.delete')"
:disabled="!('updateCondition' in $store.getters.apis) || resource.state !== 'DISABLED'" :disabled="!('deleteCondition' in $store.getters.apis) || resource.state !== 'DISABLED'"
icon="edit-outlined" type="primary"
@onClick="() => openUpdateConditionModal(record)" /> :danger="true"
<tooltip-button icon="delete-outlined"
:tooltip="$t('label.delete')" @onClick="deleteConditionFromAutoScalePolicy(record.id)" />
:disabled="!('deleteCondition' in $store.getters.apis) || resource.state !== 'DISABLED'" </template>
type="primary"
:danger="true"
icon="delete-outlined"
@onClick="deleteConditionFromAutoScalePolicy(record.id)" />
</template> </template>
</a-table> </a-table>
@ -147,11 +144,15 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" }"
v-focus="true" v-focus="true"
v-model:value="newCondition.counterid"> v-model:value="newCondition.counterid">
<a-select-option v-for="(counter, index) in countersList" :value="counter.id" :key="index"> <a-select-option
v-for="(counter, index) in countersList"
:value="counter.id"
:key="index"
:label="counter.name" >
{{ counter.name }} {{ counter.name }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -165,11 +166,11 @@
<a-select <a-select
v-model:value="newCondition.relationaloperator" v-model:value="newCondition.relationaloperator"
style="width: 100%;" style="width: 100%;"
optionFilterProp="label" optionFilterProp="value"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" > }" >
<a-select-option value="LT">{{ getOperator('LT') }}</a-select-option> <a-select-option value="LT" >{{ getOperator('LT') }}</a-select-option>
</a-select> </a-select>
<span class="error-text">{{ $t('label.required') }}</span> <span class="error-text">{{ $t('label.required') }}</span>
</div> </div>
@ -216,11 +217,11 @@
<a-select <a-select
v-model:value="updateConditionDetails.relationaloperator" v-model:value="updateConditionDetails.relationaloperator"
showSearch showSearch
optionFilterProp="label" optionFilterProp="value"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" > }" >
<a-select-option value="LT">{{ getOperator('LT') }}</a-select-option> <a-select-option value="LT" >{{ getOperator('LT') }}</a-select-option>
</a-select> </a-select>
</div> </div>
<div class="update-condition__item"> <div class="update-condition__item">
@ -277,10 +278,14 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" }"
v-model:value="newPolicy.counterid"> v-model:value="newPolicy.counterid">
<a-select-option v-for="(counter, index) in countersList" :value="counter.id" :key="index"> <a-select-option
v-for="(counter, index) in countersList"
:value="counter.id"
:key="index"
:label="counter.name">
{{ counter.name }} {{ counter.name }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -293,11 +298,11 @@
<a-select <a-select
v-model:value="newPolicy.relationaloperator" v-model:value="newPolicy.relationaloperator"
showSearch showSearch
optionFilterProp="label" optionFilterProp="value"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" > }" >
<a-select-option value="LT">{{ getOperator('LT') }}</a-select-option> <a-select-option value="LT" >{{ getOperator('LT') }}</a-select-option>
</a-select> </a-select>
</div> </div>
<div class="update-condition__item"> <div class="update-condition__item">
@ -338,7 +343,7 @@ export default {
}, },
data () { data () {
return { return {
filterColumns: ['Action'], filterColumns: ['Actions'],
loading: true, loading: true,
policies: [], policies: [],
isEditable: false, isEditable: false,
@ -377,15 +382,15 @@ export default {
}, },
{ {
title: this.$t('label.relationaloperator'), title: this.$t('label.relationaloperator'),
slots: { customRender: 'relationaloperator' } key: 'relationaloperator'
}, },
{ {
title: this.$t('label.threshold'), title: this.$t('label.threshold'),
slots: { customRender: 'threshold' } dataIndex: 'threshold'
}, },
{ {
title: this.$t('label.action'), title: this.$t('label.actions'),
slots: { customRender: 'actions' } key: 'actions'
} }
] ]
} }

94
ui/src/views/compute/AutoScaleLoadBalancing.vue
View File

@ -33,16 +33,37 @@
:dataSource="lbRules" :dataSource="lbRules"
:pagination="false" :pagination="false"
:rowKey="record => record.id"> :rowKey="record => record.id">
<template #algorithm="{ record }"> <template #bodyCell="{ column, record }">
<template v-if="column.key === 'algorithm'">
{{ returnAlgorithmName(record.algorithm) }} {{ returnAlgorithmName(record.algorithm) }}
</template> </template>
<template #protocol="{record}"> <template v-if="column.key === 'protocol'">
{{ getCapitalise(record.protocol) }} {{ getCapitalise(record.protocol) }}
</template> </template>
<template #stickiness="{record}"> <template v-if="column.key === 'stickiness'">
<a-button @click="() => openStickinessModal(record.id)"> <a-button @click="() => openStickinessModal(record.id)">
{{ returnStickinessLabel(record.id) }} {{ returnStickinessLabel(record.id) }}
</a-button> </a-button>
</template>
<template v-if="column.key === 'actions'">
<div class="actions">
<tooltip-button :tooltip="$t('label.edit')" icon="edit-outlined" @onClick="() => openEditRuleModal(record)" />
<tooltip-button :tooltip="$t('label.edit.tags')" :disabled="!('updateLoadBalancerRule' in $store.getters.apis)" icon="tag-outlined" @onClick="() => openTagsModal(record.id)" />
<a-popconfirm
:title="$t('label.delete') + '?'"
@confirm="handleDeleteRule(record)"
:okText="$t('label.yes')"
:cancelText="$t('label.no')"
>
<tooltip-button
:tooltip="$t('label.delete')"
:disabled="!('deleteLoadBalancerRule' in $store.getters.apis) || record.autoscalevmgroup"
type="primary"
:danger="true"
icon="delete-outlined" />
</a-popconfirm>
</div>
</template>
</template> </template>
<template #expandedRowRender="{ record }"> <template #expandedRowRender="{ record }">
<div class="rule-instance-list"> <div class="rule-instance-list">
@ -67,25 +88,6 @@
</div> </div>
</div> </div>
</template> </template>
<template #actions="{record}">
<div class="actions">
<tooltip-button :tooltip="$t('label.edit')" icon="edit-outlined" @onClick="() => openEditRuleModal(record)" />
<tooltip-button :tooltip="$t('label.edit.tags')" :disabled="!('updateLoadBalancerRule' in $store.getters.apis)" icon="tag-outlined" @onClick="() => openTagsModal(record.id)" />
<a-popconfirm
:title="$t('label.delete') + '?'"
@confirm="handleDeleteRule(record)"
:okText="$t('label.yes')"
:cancelText="$t('label.no')"
>
<tooltip-button
:tooltip="$t('label.delete')"
:disabled="!('deleteLoadBalancerRule' in $store.getters.apis) || record.autoscalevmgroup"
type="primary"
:danger="true"
icon="delete-outlined" />
</a-popconfirm>
</div>
</template>
</a-table> </a-table>
<a-modal <a-modal
v-if="tagsModalVisible" v-if="tagsModalVisible"
@ -169,12 +171,12 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" > }" >
<a-select-option value="LbCookie">{{ $t('label.lb.cookie') }}</a-select-option> <a-select-option value="LbCookie" :label="$t('label.lb.cookie')">{{ $t('label.lb.cookie') }}</a-select-option>
<a-select-option value="AppCookie">{{ $t('label.app.cookie') }}</a-select-option> <a-select-option value="AppCookie" :label="$t('label.lb.cookie')">{{ $t('label.app.cookie') }}</a-select-option>
<a-select-option value="SourceBased">{{ $t('label.source.based') }}</a-select-option> <a-select-option value="SourceBased" :label="$t('label.lb.cookie')">{{ $t('label.source.based') }}</a-select-option>
<a-select-option value="none">{{ $t('label.none') }}</a-select-option> <a-select-option value="none" :label="$t('label.lb.cookie')">{{ $t('label.none') }}</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item <a-form-item
@ -261,9 +263,9 @@
<a-select <a-select
v-model:value="editRuleDetails.algorithm" v-model:value="editRuleDetails.algorithm"
showSearch showSearch
optionFilterProp="label" optionFilterProp="value"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" > }" >
<a-select-option value="roundrobin">{{ $t('label.lb.algorithm.roundrobin') }}</a-select-option> <a-select-option value="roundrobin">{{ $t('label.lb.algorithm.roundrobin') }}</a-select-option>
<a-select-option value="leastconn">{{ $t('label.lb.algorithm.leastconn') }}</a-select-option> <a-select-option value="leastconn">{{ $t('label.lb.algorithm.leastconn') }}</a-select-option>
@ -275,9 +277,9 @@
<a-select <a-select
v-model:value="editRuleDetails.protocol" v-model:value="editRuleDetails.protocol"
showSearch showSearch
optionFilterProp="label" optionFilterProp="value"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" > }" >
<a-select-option value="tcp-proxy">{{ $t('label.tcp.proxy') }}</a-select-option> <a-select-option value="tcp-proxy">{{ $t('label.tcp.proxy') }}</a-select-option>
<a-select-option value="tcp">{{ $t('label.tcp') }}</a-select-option> <a-select-option value="tcp">{{ $t('label.tcp') }}</a-select-option>
@ -355,11 +357,11 @@ export default {
}, },
{ {
title: this.$t('label.algorithm'), title: this.$t('label.algorithm'),
slots: { customRender: 'algorithm' } key: 'algorithm'
}, },
{ {
title: this.$t('label.protocol'), title: this.$t('label.protocol'),
slots: { customRender: 'protocol' } key: 'protocol'
}, },
{ {
title: this.$t('label.state'), title: this.$t('label.state'),
@ -367,11 +369,11 @@ export default {
}, },
{ {
title: this.$t('label.action.configure.stickiness'), title: this.$t('label.action.configure.stickiness'),
slots: { customRender: 'stickiness' } key: 'stickiness'
}, },
{ {
title: this.$t('label.action'), title: this.$t('label.actions'),
slots: { customRender: 'actions' } key: 'actions'
} }
], ],
tiers: { tiers: {
@ -382,13 +384,13 @@ export default {
{ {
title: this.$t('label.name'), title: this.$t('label.name'),
dataIndex: 'name', dataIndex: 'name',
slots: { customRender: 'name' }, key: 'name',
width: 220 width: 220
}, },
{ {
title: this.$t('label.state'), title: this.$t('label.state'),
dataIndex: 'state', dataIndex: 'state',
slots: { customRender: 'state' } key: 'state'
}, },
{ {
title: this.$t('label.displayname'), title: this.$t('label.displayname'),
@ -404,8 +406,8 @@ export default {
}, },
{ {
title: this.$t('label.select'), title: this.$t('label.select'),
dataIndex: 'action', dataIndex: 'actions',
slots: { customRender: 'action' }, key: 'actions',
width: 80 width: 80
} }
], ],

81
ui/src/views/compute/AutoScaleUpPolicyTab.vue
View File

@ -36,12 +36,13 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" > }" >
<a-select-option <a-select-option
v-for="(scalepolicy, index) in this.policies" v-for="(scalepolicy, index) in this.policies"
:value="scalepolicy.id" :value="scalepolicy.id"
:key="index"> :key="index"
:label="scalepolicy.displaytext || scalepolicy.name">
{{ scalepolicy.name || scalepolicy.id }} {{ scalepolicy.name || scalepolicy.id }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -109,28 +110,24 @@
:dataSource="policy.conditions" :dataSource="policy.conditions"
:pagination="false" :pagination="false"
:rowKey="record => record.id"> :rowKey="record => record.id">
<template #name="{ record }"> <template #bodyCell="{ column, record }">
{{ record.name }} <template v-if="column.key === 'relationaloperator'">
</template>
<template #relationaloperator="{ record }">
{{ getOperator(record.relationaloperator) }} {{ getOperator(record.relationaloperator) }}
</template> </template>
<template #threshold="{ record }"> <template v-if="column.key === 'actions'">
{{ record.threshold }} <tooltip-button
</template> :tooltip="$t('label.edit')"
<template #actions="{ record }"> :disabled="!('updateCondition' in $store.getters.apis) || resource.state !== 'DISABLED'"
<tooltip-button icon="edit-outlined"
:tooltip="$t('label.edit')" @onClick="() => openUpdateConditionModal(record)" />
:disabled="!('updateCondition' in $store.getters.apis) || resource.state !== 'DISABLED'" <tooltip-button
icon="edit-outlined" :tooltip="$t('label.delete')"
@onClick="() => openUpdateConditionModal(record)" /> :disabled="!('deleteCondition' in $store.getters.apis) || resource.state !== 'DISABLED'"
<tooltip-button type="primary"
:tooltip="$t('label.delete')" :danger="true"
:disabled="!('deleteCondition' in $store.getters.apis) || resource.state !== 'DISABLED'" icon="delete-outlined"
type="primary" @onClick="deleteConditionFromAutoScalePolicy(record.id)" />
:danger="true" </template>
icon="delete-outlined"
@onClick="deleteConditionFromAutoScalePolicy(record.id)" />
</template> </template>
</a-table> </a-table>
@ -147,11 +144,15 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" }"
v-focus="true" v-focus="true"
v-model:value="newCondition.counterid"> v-model:value="newCondition.counterid">
<a-select-option v-for="(counter, index) in countersList" :value="counter.id" :key="index"> <a-select-option
v-for="(counter, index) in countersList"
:value="counter.id"
:key="index"
:label="counter.name">>
{{ counter.name }} {{ counter.name }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -165,9 +166,9 @@
<a-select <a-select
v-model:value="newCondition.relationaloperator" v-model:value="newCondition.relationaloperator"
style="width: 100%;" style="width: 100%;"
optionFilterProp="label" optionFilterProp="value"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" > }" >
<a-select-option value="GT">{{ getOperator('GT') }}</a-select-option> <a-select-option value="GT">{{ getOperator('GT') }}</a-select-option>
</a-select> </a-select>
@ -216,9 +217,9 @@
<a-select <a-select
v-model:value="updateConditionDetails.relationaloperator" v-model:value="updateConditionDetails.relationaloperator"
showSearch showSearch
optionFilterProp="label" optionFilterProp="value"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" > }" >
<a-select-option value="GT">{{ getOperator('GT') }}</a-select-option> <a-select-option value="GT">{{ getOperator('GT') }}</a-select-option>
</a-select> </a-select>
@ -277,10 +278,14 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" }"
v-model:value="newPolicy.counterid"> v-model:value="newPolicy.counterid">
<a-select-option v-for="(counter, index) in countersList" :value="counter.id" :key="index"> <a-select-option
v-for="(counter, index) in countersList"
:value="counter.id"
:key="index"
:label="counter.name">
{{ counter.name }} {{ counter.name }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -293,9 +298,9 @@
<a-select <a-select
v-model:value="newPolicy.relationaloperator" v-model:value="newPolicy.relationaloperator"
showSearch showSearch
optionFilterProp="label" optionFilterProp="value"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" > }" >
<a-select-option value="GT">{{ getOperator('GT') }}</a-select-option> <a-select-option value="GT">{{ getOperator('GT') }}</a-select-option>
</a-select> </a-select>
@ -338,7 +343,7 @@ export default {
}, },
data () { data () {
return { return {
filterColumns: ['Action'], filterColumns: ['Actions'],
loading: true, loading: true,
policies: [], policies: [],
isEditable: false, isEditable: false,
@ -377,15 +382,15 @@ export default {
}, },
{ {
title: this.$t('label.relationaloperator'), title: this.$t('label.relationaloperator'),
slots: { customRender: 'relationaloperator' } key: 'relationaloperator'
}, },
{ {
title: this.$t('label.threshold'), title: this.$t('label.threshold'),
slots: { customRender: 'threshold' } dataIndex: 'threshold'
}, },
{ {
title: this.$t('label.action'), title: this.$t('label.actions'),
slots: { customRender: 'actions' } key: 'actions'
} }
] ]
} }

52
ui/src/views/compute/AutoScaleVmProfile.vue
View File

@ -35,11 +35,15 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" }"
v-focus="true" v-focus="true"
v-model:value="autoscaleuserid"> v-model:value="autoscaleuserid">
<a-select-option v-for="(user, index) in usersList" :value="user.id" :key="index"> <a-select-option
v-for="(user, index) in usersList"
:value="user.id"
:key="index"
:label="user.username">
{{ user.username }} {{ user.username }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -90,9 +94,9 @@
<a-select <a-select
style="width: 100%" style="width: 100%"
showSearch showSearch
optionFilterProp="label" optionFilterProp="value"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" }"
v-focus="true" v-focus="true"
v-model:value="newParam.name"> v-model:value="newParam.name">
@ -126,13 +130,8 @@
:dataSource="allParams" :dataSource="allParams"
:pagination="false" :pagination="false"
:rowKey="record => record.name"> :rowKey="record => record.name">
<template #name="{ record }"> <template #bodyCell="{ column, record }">
{{ record.name }} <template v-if="column.key === 'actions'">
</template>
<template #threshold="{ record }">
{{ record.threshold }}
</template>
<template #actions="{ record }">
<a-popconfirm <a-popconfirm
:title="$t('label.delete') + '?'" :title="$t('label.delete') + '?'"
@confirm="deleteParam(record.name)" @confirm="deleteParam(record.name)"
@ -146,6 +145,7 @@
:danger="true" :danger="true"
icon="delete-outlined" /> icon="delete-outlined" />
</a-popconfirm> </a-popconfirm>
</template>
</template> </template>
</a-table> </a-table>
@ -166,11 +166,15 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" }"
v-focus="true" v-focus="true"
v-model:value="autoscaleuserid"> v-model:value="autoscaleuserid">
<a-select-option v-for="(user, index) in usersList" :value="user.id" :key="index"> <a-select-option
v-for="(user, index) in usersList"
:value="user.id"
:key="index"
:label="user.username">
{{ user.username }} {{ user.username }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -194,11 +198,15 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" }"
v-focus="true" v-focus="true"
v-model:value="templateid"> v-model:value="templateid">
<a-select-option v-for="(template, index) in templatesList" :value="template.id" :key="index"> <a-select-option
v-for="(template, index) in templatesList"
:value="template.id"
:key="index"
:label="template.name">
{{ template.name }} {{ template.name }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -214,11 +222,15 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" }"
v-focus="true" v-focus="true"
v-model:value="serviceofferingid"> v-model:value="serviceofferingid">
<a-select-option v-for="(offering, index) in serviceOfferingsList" :value="offering.id" :key="index"> <a-select-option
v-for="(offering, index) in serviceOfferingsList"
:value="offering.id"
:key="index"
:label="offering.name">
{{ offering.name }} {{ offering.name }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -263,7 +275,7 @@ export default {
}, },
data () { data () {
return { return {
filterColumns: ['Action'], filterColumns: ['Actions'],
loading: true, loading: true,
editProfileModalVisible: false, editProfileModalVisible: false,
profileid: null, profileid: null,
@ -292,8 +304,8 @@ export default {
dataIndex: 'value' dataIndex: 'value'
}, },
{ {
title: this.$t('label.action'), title: this.$t('label.actions'),
slots: { customRender: 'actions' } key: 'actions'
} }
] ]
} }

120
ui/src/views/compute/CreateAutoScaleVmGroup.vue
View File

@ -42,19 +42,17 @@
v-model:value="form.zoneid" v-model:value="form.zoneid"
@change="onSelectZoneId(zoneItem.id)"> @change="onSelectZoneId(zoneItem.id)">
<a-col :span="8"> <a-col :span="8">
<a-card-grid style="width:200px;" :title="zoneItem.name" :hoverable="false"> <a-card style="width:200px;" :hoverable="false">
<a-radio :value="zoneItem.id"> <a-radio :value="zoneItem.id" />
<div> <div :style="{fontSize: '36px', marginLeft: '60px', marginTop: '-30px', marginBottom: '10px'}">
<resource-icon <resource-icon
v-if="zoneItem && zoneItem.icon && zoneItem.icon.base64image" v-if="zoneItem && zoneItem.icon && zoneItem.icon.base64image"
:image="zoneItem.icon.base64image" :image="zoneItem.icon.base64image"
size="36" size="36" />
style="marginTop: -30px; marginLeft: 60px" /> <global-outlined v-else />
<global-outlined v-else :style="{fontSize: '36px', marginLeft: '60px', marginTop: '-40px'}"/>
</div> </div>
</a-radio>
<a-card-meta title="" :description="zoneItem.name" style="text-align:center; paddingTop: 10px;" /> <a-card-meta title="" :description="zoneItem.name" style="text-align:center; paddingTop: 10px;" />
</a-card-grid> </a-card>
</a-col> </a-col>
</a-radio-group> </a-radio-group>
</div> </div>
@ -152,7 +150,7 @@
}" }"
@change="onSelectTemplateConfigurationId" @change="onSelectTemplateConfigurationId"
> >
<a-select-option v-for="opt in templateConfigurations" :key="opt.id"> <a-select-option v-for="opt in templateConfigurations" :key="opt.id" :label="opt.name || opt.description">
{{ opt.name || opt.description }} {{ opt.name || opt.description }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -420,11 +418,11 @@
<span v-else-if="property.type && property.type==='string' && property.qualifiers && property.qualifiers.startsWith('ValueMap')"> <span v-else-if="property.type && property.type==='string' && property.qualifiers && property.qualifiers.startsWith('ValueMap')">
<a-select <a-select
showSearch showSearch
optionFilterProp="label" optionFilterProp="value"
v-model:value="form['properties.' + escapePropertyKey(property.key)]" v-model:value="form['properties.' + escapePropertyKey(property.key)]"
:placeholder="property.description" :placeholder="property.description"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" }"
> >
<a-select-option v-for="opt in getPropertyQualifiers(property.qualifiers, 'select')" :key="opt"> <a-select-option v-for="opt in getPropertyQualifiers(property.qualifiers, 'select')" :key="opt">
@ -463,11 +461,12 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" > }" >
<a-select-option <a-select-option
v-for="policy in this.scaleUpPolicies" v-for="policy in this.scaleUpPolicies"
:key="policy.id"> :key="policy.id"
:label="policy.name">
{{ policy.name }} {{ policy.name }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -516,11 +515,15 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" }"
v-focus="true" v-focus="true"
v-model:value="newScaleUpCondition.counterid"> v-model:value="newScaleUpCondition.counterid">
<a-select-option v-for="(counter, index) in countersList" :value="counter.id" :key="index"> <a-select-option
v-for="(counter, index) in countersList"
:value="counter.id"
:key="index"
:label="counter.name">
{{ counter.name }} {{ counter.name }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -534,9 +537,9 @@
<a-select <a-select
v-model:value="newScaleUpCondition.relationaloperator" v-model:value="newScaleUpCondition.relationaloperator"
style="width: 100%;" style="width: 100%;"
optionFilterProp="label" optionFilterProp="value"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" > }" >
<a-select-option value="GT">{{ getOperator('GT') }}</a-select-option> <a-select-option value="GT">{{ getOperator('GT') }}</a-select-option>
</a-select> </a-select>
@ -568,20 +571,16 @@
:dataSource="scaleUpConditions" :dataSource="scaleUpConditions"
:pagination="false" :pagination="false"
:rowKey="record => record.counterid"> :rowKey="record => record.counterid">
<template #countername="{ record }"> <template #bodyCell="{ column, record }">
{{ record.countername }} <template v-if="column.key === 'relationaloperator'">
</template> {{ getOperator(record.relationaloperator) }}
<template #relationaloperator="{ record }"> </template>
{{ getOperator(record.relationaloperator) }} <template v-if="column.key === 'actions'">
</template>
<template #threshold="{ record }">
{{ record.threshold }}
</template>
<template #actions="{ record }">
<a-button ref="submit" type="primary" :danger="true" @click="deleteScaleUpCondition(record.counterid)"> <a-button ref="submit" type="primary" :danger="true" @click="deleteScaleUpCondition(record.counterid)">
<template #icon><delete-outlined /></template> <template #icon><delete-outlined /></template>
{{ $t('label.delete') }} {{ $t('label.delete') }}
</a-button> </a-button>
</template>
</template> </template>
</a-table> </a-table>
</div> </div>
@ -603,11 +602,12 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" > }" >
<a-select-option <a-select-option
v-for="policy in this.scaleDownPolicies" v-for="policy in this.scaleDownPolicies"
:key="policy.id"> :key="policy.id"
:label="policy.name">
{{ policy.name }} {{ policy.name }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -656,11 +656,15 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" }"
v-focus="true" v-focus="true"
v-model:value="newScaleDownCondition.counterid"> v-model:value="newScaleDownCondition.counterid">
<a-select-option v-for="(counter, index) in countersList" :value="counter.id" :key="index"> <a-select-option
v-for="(counter, index) in countersList"
:value="counter.id"
:key="index"
:label="counter.name">
{{ counter.name }} {{ counter.name }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -674,9 +678,9 @@
<a-select <a-select
v-model:value="newScaleDownCondition.relationaloperator" v-model:value="newScaleDownCondition.relationaloperator"
style="width: 100%;" style="width: 100%;"
optionFilterProp="label" optionFilterProp="value"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" > }" >
<a-select-option value="LT">{{ getOperator('LT') }}</a-select-option> <a-select-option value="LT">{{ getOperator('LT') }}</a-select-option>
</a-select> </a-select>
@ -699,7 +703,7 @@
</div> </div>
</div> </div>
<a-divider/> <a-divider/>
<div> <div style="display: block">
<a-table <a-table
size="small" size="small"
style="overflow-y: auto" style="overflow-y: auto"
@ -708,20 +712,16 @@
:dataSource="scaleDownConditions" :dataSource="scaleDownConditions"
:pagination="false" :pagination="false"
:rowKey="record => record.counterid"> :rowKey="record => record.counterid">
<template #countername="{ record }"> <template #bodyCell="{ column, record }">
{{ record.countername }} <template v-if="column.key === 'relationaloperator'">
</template> {{ getOperator(record.relationaloperator) }}
<template #relationaloperator="{ record }"> </template>
{{ getOperator(record.relationaloperator) }} <template v-if="column.key === 'actions'">
</template> <a-button ref="submit" type="primary" :danger="true" @click="deleteScaleDownCondition(record.counterid)">
<template #threshold="{ record }"> <template #icon><delete-outlined /></template>
{{ record.threshold }} {{ $t('label.delete') }}
</template> </a-button>
<template #actions="{ record }"> </template>
<a-button ref="submit" type="primary" :danger="true" @click="deleteScaleDownCondition(record.counterid)">
<template #icon><delete-outlined /></template>
{{ $t('label.delete') }}
</a-button>
</template> </template>
</a-table> </a-table>
</div> </div>
@ -790,11 +790,15 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" }"
v-focus="true" v-focus="true"
v-model:value="form.autoscaleuserid"> v-model:value="form.autoscaleuserid">
<a-select-option v-for="(user, index) in usersList" :value="user.id" :key="index"> <a-select-option
v-for="(user, index) in usersList"
:value="user.id"
:key="index"
:label="user.username">
{{ user.username }} {{ user.username }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -1079,15 +1083,15 @@ export default {
}, },
{ {
title: this.$t('label.relationaloperator'), title: this.$t('label.relationaloperator'),
slots: { customRender: 'relationaloperator' } key: 'relationaloperator'
}, },
{ {
title: this.$t('label.threshold'), title: this.$t('label.threshold'),
slots: { customRender: 'threshold' } dataIndex: 'threshold'
}, },
{ {
title: this.$t('label.action'), title: this.$t('label.actions'),
slots: { customRender: 'actions' } key: 'actions'
} }
], ],
scaleDownPolicies: [], scaleDownPolicies: [],
@ -1107,15 +1111,15 @@ export default {
}, },
{ {
title: this.$t('label.relationaloperator'), title: this.$t('label.relationaloperator'),
slots: { customRender: 'relationaloperator' } key: 'relationaloperator'
}, },
{ {
title: this.$t('label.threshold'), title: this.$t('label.threshold'),
slots: { customRender: 'threshold' } dataIndex: 'threshold'
}, },
{ {
title: this.$t('label.action'), title: this.$t('label.actions'),
slots: { customRender: 'actions' } key: 'actions'
} }
], ],
usersList: [], usersList: [],

16
ui/src/views/compute/CreateKubernetesCluster.vue
View File

@ -75,12 +75,12 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" }"
:loading="kubernetesVersionLoading" :loading="kubernetesVersionLoading"
:placeholder="apiParams.kubernetesversionid.description" :placeholder="apiParams.kubernetesversionid.description"
@change="val => { handleKubernetesVersionChange(kubernetesVersions[val]) }"> @change="val => { handleKubernetesVersionChange(kubernetesVersions[val]) }">
<a-select-option v-for="(opt, optIndex) in kubernetesVersions" :key="optIndex"> <a-select-option v-for="(opt, optIndex) in kubernetesVersions" :key="optIndex" :label="opt.name || opt.description">
{{ opt.name || opt.description }} {{ opt.name || opt.description }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -95,11 +95,11 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" }"
:loading="serviceOfferingLoading" :loading="serviceOfferingLoading"
:placeholder="apiParams.serviceofferingid.description"> :placeholder="apiParams.serviceofferingid.description">
<a-select-option v-for="(opt, optIndex) in serviceOfferings" :key="optIndex"> <a-select-option v-for="(opt, optIndex) in serviceOfferings" :key="optIndex" :label="opt.name || opt.description">
{{ opt.name || opt.description }} {{ opt.name || opt.description }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -122,11 +122,11 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" }"
:loading="networkLoading" :loading="networkLoading"
:placeholder="apiParams.networkid.description"> :placeholder="apiParams.networkid.description">
<a-select-option v-for="(opt, optIndex) in networks" :key="optIndex"> <a-select-option v-for="(opt, optIndex) in networks" :key="optIndex" :label="opt.name || opt.description">
{{ opt.name || opt.description }} {{ opt.name || opt.description }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -171,11 +171,11 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" }"
:loading="keyPairLoading" :loading="keyPairLoading"
:placeholder="apiParams.keypair.description"> :placeholder="apiParams.keypair.description">
<a-select-option v-for="(opt, optIndex) in keyPairs" :key="optIndex"> <a-select-option v-for="(opt, optIndex) in keyPairs" :key="optIndex" :label="opt.name || opt.description">
{{ opt.name || opt.description }} {{ opt.name || opt.description }}
</a-select-option> </a-select-option>
</a-select> </a-select>

4
ui/src/views/compute/CreateSSHKeyPair.vue
View File

@ -62,12 +62,12 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" }"
:loading="domainLoading" :loading="domainLoading"
:placeholder="apiParams.domainid.description" :placeholder="apiParams.domainid.description"
@change="val => { handleDomainChanged(domains[val]) }"> @change="val => { handleDomainChanged(domains[val]) }">
<a-select-option v-for="(opt, optIndex) in domains" :key="optIndex"> <a-select-option v-for="(opt, optIndex) in domains" :key="optIndex" :label=" opt.path || opt.name || opt.description || ''">
{{ opt.path || opt.name || opt.description }} {{ opt.path || opt.name || opt.description }}
</a-select-option> </a-select-option>
</a-select> </a-select>

5
ui/src/views/compute/CreateSnapshotWizard.vue
View File

@ -37,11 +37,12 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"> }">
<a-select-option <a-select-option
v-for="volume in listVolumes" v-for="volume in listVolumes"
:key="volume.id"> :key="volume.id"
:label="volume.name">
{{ volume.name }} {{ volume.name }}
</a-select-option> </a-select-option>
</a-select> </a-select>

50
ui/src/views/compute/DeployVM.vue
View File

@ -42,19 +42,17 @@
v-model:value="form.zoneid" v-model:value="form.zoneid"
@change="onSelectZoneId(zoneItem.id)"> @change="onSelectZoneId(zoneItem.id)">
<a-col :span="8"> <a-col :span="8">
<a-card-grid style="width:200px;" :title="zoneItem.name" :hoverable="false"> <a-card style="width:200px;" :hoverable="false">
<a-radio :value="zoneItem.id"> <a-radio :value="zoneItem.id" />
<div> <div :style="{fontSize: '36px', marginLeft: '60px', marginTop: '-30px', marginBottom: '10px'}">
<resource-icon <resource-icon
v-if="zoneItem && zoneItem.icon && zoneItem.icon.base64image" v-if="zoneItem && zoneItem.icon && zoneItem.icon.base64image"
:image="zoneItem.icon.base64image" :image="zoneItem.icon.base64image"
size="36" size="36" />
style="marginTop: -30px; marginLeft: 60px" /> <global-outlined v-else/>
<global-outlined v-else :style="{fontSize: '36px', marginLeft: '60px', marginTop: '-40px'}"/>
</div> </div>
</a-radio>
<a-card-meta title="" :description="zoneItem.name" style="text-align:center; paddingTop: 10px;" /> <a-card-meta title="" :description="zoneItem.name" style="text-align:center; paddingTop: 10px;" />
</a-card-grid> </a-card>
</a-col> </a-col>
</a-radio-group> </a-radio-group>
</div> </div>
@ -221,7 +219,7 @@
}" }"
@change="onSelectTemplateConfigurationId" @change="onSelectTemplateConfigurationId"
> >
<a-select-option v-for="opt in templateConfigurations" :key="opt.id"> <a-select-option v-for="opt in templateConfigurations" :key="opt.id" :label="opt.name || opt.description">
{{ opt.name || opt.description }} {{ opt.name || opt.description }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -483,11 +481,11 @@
<span v-else-if="property.type && property.type==='string' && property.qualifiers && property.qualifiers.startsWith('ValueMap')"> <span v-else-if="property.type && property.type==='string' && property.qualifiers && property.qualifiers.startsWith('ValueMap')">
<a-select <a-select
showSearch showSearch
optionFilterProp="label" optionFilterProp="value"
v-model:value="form['properties.' + escapePropertyKey(property.key)]" v-model:value="form['properties.' + escapePropertyKey(property.key)]"
:placeholder="property.description" :placeholder="property.description"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" }"
> >
<a-select-option v-for="opt in getPropertyQualifiers(property.qualifiers, 'select')" :key="opt"> <a-select-option v-for="opt in getPropertyQualifiers(property.qualifiers, 'select')" :key="opt">
@ -528,7 +526,7 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="filterOption"> :filterOption="filterOption">
<a-select-option v-for="bootType in options.bootTypes" :key="bootType.id"> <a-select-option v-for="bootType in options.bootTypes" :key="bootType.id" :label="bootType.description">
{{ bootType.description }} {{ bootType.description }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -539,7 +537,7 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="filterOption"> :filterOption="filterOption">
<a-select-option v-for="bootMode in options.bootModes" :key="bootMode.id"> <a-select-option v-for="bootMode in options.bootModes" :key="bootMode.id" :label="bootMode.description">
{{ bootMode.description }} {{ bootMode.description }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -582,8 +580,10 @@
:dataSource="templateUserDataParams" :dataSource="templateUserDataParams"
:pagination="false" :pagination="false"
:rowKey="record => record.key"> :rowKey="record => record.key">
<template #value="{ record }"> <template #bodyCell="{ column, record }">
<a-input v-model:value="templateUserDataValues[record.key]" /> <template v-if="column.key === 'value'">
<a-input v-model:value="templateUserDataValues[record.key]" />
</template>
</template> </template>
</a-table> </a-table>
</a-input-group> </a-input-group>
@ -605,8 +605,10 @@
:dataSource="templateUserDataParams" :dataSource="templateUserDataParams"
:pagination="false" :pagination="false"
:rowKey="record => record.key"> :rowKey="record => record.key">
<template #value="{ record }"> <template #bodyCell="{ column, record }">
<a-input v-model:value="templateUserDataValues[record.key]" /> <template v-if="column.key === 'value'">
<a-input v-model:value="templateUserDataValues[record.key]" />
</template>
</template> </template>
</a-table> </a-table>
</a-input-group> </a-input-group>
@ -654,8 +656,10 @@
:dataSource="userDataParams" :dataSource="userDataParams"
:pagination="false" :pagination="false"
:rowKey="record => record.key"> :rowKey="record => record.key">
<template #value="{ record }"> <template #bodyCell="{ column, record }">
<a-input v-model:value="userDataValues[record.key]" /> <template v-if="column.key === 'value'">
<a-input v-model:value="userDataValues[record.key]" />
</template>
</template> </template>
</a-table> </a-table>
</a-input-group> </a-input-group>
@ -709,7 +713,7 @@
v-model:value="form.iodriverpolicy" v-model:value="form.iodriverpolicy"
optionFilterProp="label" optionFilterProp="label"
:filterOption="filterOption"> :filterOption="filterOption">
<a-select-option v-for="iodriverpolicy in options.ioPolicyTypes" :key="iodriverpolicy.id"> <a-select-option v-for="iodriverpolicy in options.ioPolicyTypes" :key="iodriverpolicy.id" :label="iodriverpolicy.description">
{{ iodriverpolicy.description }} {{ iodriverpolicy.description }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -967,7 +971,7 @@ export default {
{ {
title: this.$t('label.value'), title: this.$t('label.value'),
dataIndex: 'value', dataIndex: 'value',
slots: { customRender: 'value' } key: 'value'
} }
], ],
userDataValues: {}, userDataValues: {},
@ -1885,8 +1889,8 @@ export default {
this.templateUserDataParams = [] this.templateUserDataParams = []
api('listUserData', { id: id }).then(json => { api('listUserData', { id: id }).then(json => {
const resp = json?.listuserdataresponse?.userdata || [] const resp = json.listuserdataresponse.userdata || []
if (resp) { if (resp.length > 0) {
var params = resp[0].params var params = resp[0].params
if (params) { if (params) {
var dataParams = params.split(',') var dataParams = params.split(',')

10
ui/src/views/compute/DestroyVM.vue
View File

@ -54,9 +54,9 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" > }" >
<a-select-option v-for="volume in volumes" :key="volume.id"> <a-select-option v-for="volume in volumes" :key="volume.id" :label="volume.name">
{{ volume.name }} {{ volume.name }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -102,12 +102,12 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" }"
:loading="listVolumes[record.id].loading" :loading="listVolumes[record.id].loading"
:placeholder="$t('label.delete.volumes')" :placeholder="$t('label.delete.volumes')"
@change="(value) => onChangeVolume(record.id, value)"> @change="(value) => onChangeVolume(record.id, value)">
<a-select-option v-for="item in listVolumes[record.id].opts" :key="item.id"> <a-select-option v-for="item in listVolumes[record.id].opts" :key="item.id" :label="item.name || item.description">
{{ item.name || item.description }} {{ item.name || item.description }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -317,9 +317,9 @@ export default {
this.selectedItemsProgress = Array.from(this.selectedItems) this.selectedItemsProgress = Array.from(this.selectedItems)
this.selectedItemsProgress = this.selectedItemsProgress.map(v => ({ ...v, status: 'InProgress' })) this.selectedItemsProgress = this.selectedItemsProgress.map(v => ({ ...v, status: 'InProgress' }))
this.selectedColumns.splice(0, 0, { this.selectedColumns.splice(0, 0, {
key: 'status',
dataIndex: 'status', dataIndex: 'status',
title: this.$t('label.operation.status'), title: this.$t('label.operation.status'),
scopedSlots: { customRender: 'status' },
filters: [ filters: [
{ text: 'In Progress', value: 'InProgress' }, { text: 'In Progress', value: 'InProgress' },
{ text: 'Success', value: 'success' }, { text: 'Success', value: 'success' },

6
ui/src/views/compute/EditVM.vue
View File

@ -52,11 +52,11 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" }"
:loading="osTypes.loading" :loading="osTypes.loading"
v-model:value="form.ostypeid"> v-model:value="form.ostypeid">
<a-select-option v-for="(ostype) in osTypes.opts" :key="ostype.id"> <a-select-option v-for="(ostype) in osTypes.opts" :key="ostype.id" :label="ostype.description">
{{ ostype.description }} {{ ostype.description }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -103,7 +103,7 @@
}" }"
:loading="securitygroups.loading" :loading="securitygroups.loading"
v-focus="true"> v-focus="true">
<a-select-option v-for="securitygroup in securitygroups.opts" :key="securitygroup.id" :label="securitygroup.name"> <a-select-option v-for="securitygroup in securitygroups.opts" :key="securitygroup.id" :label="securitygroup.name || securitygroup.id">
<div> <div>
{{ securitygroup.name || securitygroup.id }} {{ securitygroup.name || securitygroup.id }}
</div> </div>

8
ui/src/views/compute/InstanceTab.vue
View File

@ -192,9 +192,9 @@
:loading="listIps.loading" :loading="listIps.loading"
v-focus="editNicResource.type==='Shared'" v-focus="editNicResource.type==='Shared'"
showSearch showSearch
optionFilterProp="label" optionFilterProp="value"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"> }">
<a-select-option v-for="ip in listIps.opts" :key="ip.ipaddress"> <a-select-option v-for="ip in listIps.opts" :key="ip.ipaddress">
{{ ip.ipaddress }} {{ ip.ipaddress }}
@ -235,9 +235,9 @@
:loading="listIps.loading" :loading="listIps.loading"
v-focus="editNicResource.type==='Shared'" v-focus="editNicResource.type==='Shared'"
showSearch showSearch
optionFilterProp="label" optionFilterProp="value"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"> }">
<a-select-option v-for="ip in listIps.opts" :key="ip.ipaddress"> <a-select-option v-for="ip in listIps.opts" :key="ip.ipaddress">
{{ ip.ipaddress }} {{ ip.ipaddress }}

79
ui/src/views/compute/KubernetesServiceTab.vue
View File

@ -101,36 +101,37 @@
:rowKey="item => item.id" :rowKey="item => item.id"
:pagination="false" :pagination="false"
> >
<template #name="{ text, record }" :name="text"> <template #bodyCell="{ column, text, record, index }">
<router-link :to="{ path: '/vm/' + record.id }">{{ record.name }}</router-link> <template v-if="column.key === 'name'" :name="text">
</template> <router-link :to="{ path: '/vm/' + record.id }">{{ record.name }}</router-link>
<template #state="{ text }"> </template>
<status :text="text ? text : ''" displayText /> <template v-if="column.key === 'state'">
</template> <status :text="text ? text : ''" displayText />
<template #port="{ text, record, index }" :name="text" :record="record"> </template>
{{ cksSshStartingPort + index }} <template v-if="column.key === 'port'" :name="text" :record="record">
</template> {{ cksSshStartingPort + index }}
<template #action="{record}"> </template>
<a-tooltip placement="bottom" > <template v-if="column.key === 'actions'">
<template #title> <a-tooltip placement="bottom" >
{{ $t('label.action.delete.node') }} <template #title>
</template> {{ $t('label.action.delete.node') }}
<a-popconfirm </template>
:title="$t('message.action.delete.node')" <a-popconfirm
@confirm="deleteNode(record)" :title="$t('message.action.delete.node')"
:okText="$t('label.yes')" @confirm="deleteNode(record)"
:cancelText="$t('label.no')" :okText="$t('label.yes')"
:disabled="!['Created', 'Running'].includes(resource.state) || resource.autoscalingenabled" :cancelText="$t('label.no')"
> :disabled="!['Created', 'Running'].includes(resource.state) || resource.autoscalingenabled"
<a-button >
danger <a-button
type="primary" type="danger"
shape="circle" shape="circle"
:disabled="!['Created', 'Running'].includes(resource.state) || resource.autoscalingenabled"> :disabled="!['Created', 'Running'].includes(resource.state) || resource.autoscalingenabled">
<template #icon><delete-outlined /></template> <template #icon><delete-outlined /></template>
</a-button> </a-button>
</a-popconfirm> </a-popconfirm>
</a-tooltip> </a-tooltip>
</template>
</template> </template>
</a-table> </a-table>
</a-tab-pane> </a-tab-pane>
@ -209,14 +210,14 @@ export default {
created () { created () {
this.vmColumns = [ this.vmColumns = [
{ {
key: 'name',
title: this.$t('label.name'), title: this.$t('label.name'),
dataIndex: 'name', dataIndex: 'name'
slots: { customRender: 'name' }
}, },
{ {
key: 'state',
title: this.$t('label.state'), title: this.$t('label.state'),
dataIndex: 'state', dataIndex: 'state'
slots: { customRender: 'state' }
}, },
{ {
title: this.$t('label.instancename'), title: this.$t('label.instancename'),
@ -227,9 +228,9 @@ export default {
dataIndex: 'ipaddress' dataIndex: 'ipaddress'
}, },
{ {
key: 'port',
title: this.$t('label.ssh.port'), title: this.$t('label.ssh.port'),
dataIndex: 'port', dataIndex: 'port'
slots: { customRender: 'port' }
}, },
{ {
title: this.$t('label.zonename'), title: this.$t('label.zonename'),
@ -266,9 +267,9 @@ export default {
mounted () { mounted () {
if (this.$store.getters.apis.scaleKubernetesCluster.params.filter(x => x.name === 'nodeids').length > 0) { if (this.$store.getters.apis.scaleKubernetesCluster.params.filter(x => x.name === 'nodeids').length > 0) {
this.vmColumns.push({ this.vmColumns.push({
title: this.$t('label.action'), key: 'actions',
dataIndex: 'action', title: this.$t('label.actions'),
slots: { customRender: 'action' } dataIndex: 'actions'
}) })
} }
this.handleFetchData() this.handleFetchData()

112
ui/src/views/compute/MigrateWizard.vue
View File

@ -37,45 +37,47 @@
:dataSource="hosts" :dataSource="hosts"
:pagination="false" :pagination="false"
:rowKey="record => record.id"> :rowKey="record => record.id">
<template #name="{ record }"> <template #bodyCell="{ column, record }">
{{ record.name }} <template v-if="column.key === 'name'">
<a-tooltip v-if="record.name === $t('label.auto.assign')" :title="$t('message.migrate.instance.host.auto.assign')" placement="top"> {{ record.name }}
<info-circle-outlined class="table-tooltip-icon" /> <a-tooltip v-if="record.name === $t('label.auto.assign')" :title="$t('message.migrate.instance.host.auto.assign')" placement="top">
</a-tooltip> <info-circle-outlined class="table-tooltip-icon" />
</template> </a-tooltip>
<template #suitability="{ record }"> </template>
<check-circle-two-tone <template v-if="column.key === 'suitability'">
class="host-item__suitability-icon" <check-circle-two-tone
twoToneColor="#52c41a" class="host-item__suitability-icon"
v-if="record.suitableformigration" /> twoToneColor="#52c41a"
<close-circle-two-tone v-if="record.suitableformigration" />
class="host-item__suitability-icon" <close-circle-two-tone
twoToneColor="#f5222d" class="host-item__suitability-icon"
v-else /> twoToneColor="#f5222d"
</template> v-else />
<template #memused="{ record }"> </template>
<span v-if="record.memoryused"> <template v-if="column.key === 'memused'">
{{ $bytesToHumanReadableSize(record.memoryused) }} <span v-if="record.memoryused">
</span> {{ $bytesToHumanReadableSize(record.memoryused) }}
</template> </span>
<template #memoryallocatedpercentage="{ record }"> </template>
{{ record.memoryallocatedpercentage }} <template v-if="column.key === 'memoryallocatedpercentage'">
</template> {{ record.memoryallocatedpercentage }}
<template #cluster="{ record }"> </template>
{{ record.clustername }} <template v-if="column.key === 'cluster'">
</template> {{ record.clustername }}
<template #pod="{ record }"> </template>
{{ record.podname }} <template v-if="column.key === 'pod'">
</template> {{ record.podname }}
<template #requiresstoragemigration="{ record }"> </template>
{{ record.requiresStorageMotion ? $t('label.yes') : $t('label.no') }} <template v-if="column.key === 'requiresstoragemigration'">
</template> {{ record.requiresStorageMotion ? $t('label.yes') : $t('label.no') }}
<template #select="{record}"> </template>
<a-radio <template v-if="column.key === 'select'">
class="host-item__radio" <a-radio
@click="handleSelectedHostChange(record)" class="host-item__radio"
:checked="record.id === selectedHost.id" @click="handleSelectedHostChange(record)"
:disabled="!record.suitableformigration"></a-radio> :checked="record.id === selectedHost.id"
:disabled="!record.suitableformigration"></a-radio>
</template>
</template> </template>
</a-table> </a-table>
<a-pagination <a-pagination
@ -149,40 +151,40 @@ export default {
pageSize: 10, pageSize: 10,
columns: [ columns: [
{ {
title: this.$t('label.hostid'), key: 'name',
slots: { customRender: 'name' } title: this.$t('label.hostid')
}, },
{ {
title: this.$t('label.suitability'), key: 'suitability',
slots: { customRender: 'suitability' } title: this.$t('label.suitability')
}, },
{ {
title: this.$t('label.cpuused'), title: this.$t('label.cpuused'),
dataIndex: 'cpuused' dataIndex: 'cpuused'
}, },
{ {
title: this.$t('label.memoryallocated'), key: 'memoryallocatedpercentage',
slots: { customRender: 'memoryallocatedpercentage' } title: this.$t('label.memoryallocated')
}, },
{ {
title: this.$t('label.memused'), key: 'memused',
slots: { customRender: 'memused' } title: this.$t('label.memused')
}, },
{ {
title: this.$t('label.cluster'), key: 'cluster',
slots: { customRender: 'cluster' } title: this.$t('label.cluster')
}, },
{ {
title: this.$t('label.pod'), key: 'pod',
slots: { customRender: 'pod' } title: this.$t('label.pod')
}, },
{ {
title: this.$t('label.storage.migration.required'), key: 'requiresstoragemigration',
slots: { customRender: 'requiresstoragemigration' } title: this.$t('label.storage.migration.required')
}, },
{ {
title: this.$t('label.select'), key: 'select',
slots: { customRender: 'select' } title: this.$t('label.select')
} }
], ],
migrateWithStorage: false, migrateWithStorage: false,

11
ui/src/views/compute/RegisterUserData.vue
View File

@ -51,9 +51,9 @@
mode="tags" mode="tags"
v-model:value="form.params" v-model:value="form.params"
showSearch showSearch
optionFilterProp="label" optionFilterProp="value"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children?.[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" }"
:placeholder="apiParams.params.description"> :placeholder="apiParams.params.description">
<a-select-option v-for="opt in params" :key="opt"> <a-select-option v-for="opt in params" :key="opt">
@ -71,12 +71,15 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" }"
:loading="domainLoading" :loading="domainLoading"
:placeholder="apiParams.domainid.description" :placeholder="apiParams.domainid.description"
@change="val => { handleDomainChanged(domains[val]) }"> @change="val => { handleDomainChanged(domains[val]) }">
<a-select-option v-for="(opt, optIndex) in domains" :key="optIndex"> <a-select-option
v-for="(opt, optIndex) in domains"
:key="optIndex"
:label="opt.path || opt.name || opt.description || ''">
{{ opt.path || opt.name || opt.description }} {{ opt.path || opt.name || opt.description }}
</a-select-option> </a-select-option>
</a-select> </a-select>

10
ui/src/views/compute/ResetSshKeyPair.vue
View File

@ -42,8 +42,10 @@
@handle-search-filter="handleTableChange" @handle-search-filter="handleTableChange"
style="overflow-y: auto" > style="overflow-y: auto" >
<template #account><user-outlined /> {{ $t('label.account') }}</template> <template #headerCell="{ column }">
<template #domain><block-outlined /> {{ $t('label.domain') }}</template> <template v-if="column.key === 'account'"><user-outlined /> {{ $t('label.account') }}</template>
<template v-if="column.key === 'domain'"><block-outlined /> {{ $t('label.domain') }}</template>
</template>
</a-table> </a-table>
</div> </div>
@ -81,13 +83,13 @@ export default {
width: '40%' width: '40%'
}, },
{ {
key: 'account',
dataIndex: 'account', dataIndex: 'account',
slots: { title: 'account' },
width: '30%' width: '30%'
}, },
{ {
key: 'domain',
dataIndex: 'domain', dataIndex: 'domain',
slots: { title: 'domain' },
width: '30%' width: '30%'
} }
], ],

20
ui/src/views/compute/ResetUserData.vue
View File

@ -41,8 +41,10 @@
:dataSource="templateUserDataParams" :dataSource="templateUserDataParams"
:pagination="false" :pagination="false"
:rowKey="record => record.key"> :rowKey="record => record.key">
<template #value="{ record }"> <template #bodyCell="{ column, record }">
<a-input v-model:value="templateUserDataValues[record.key]" /> <template v-if="column.key === 'value'">
<a-input v-model:value="templateUserDataValues[record.key]" />
</template>
</template> </template>
</a-table> </a-table>
</a-input-group> </a-input-group>
@ -87,8 +89,10 @@
:dataSource="userDataParams" :dataSource="userDataParams"
:pagination="false" :pagination="false"
:rowKey="record => record.key"> :rowKey="record => record.key">
<template #value="{ record }"> <template #bodyCell="{ column, record }">
<a-input v-model:value="userDataValues[record.key]" /> <template v-if="column.key === 'value'">
<a-input v-model:value="userDataValues[record.key]" />
</template>
</template> </template>
</a-table> </a-table>
</a-input-group> </a-input-group>
@ -152,12 +156,12 @@ export default {
}, },
{ {
dataIndex: 'account', dataIndex: 'account',
slots: { title: 'account' }, title: this.$t('account'),
width: '30%' width: '30%'
}, },
{ {
dataIndex: 'domain', dataIndex: 'domain',
slots: { title: 'domain' }, title: this.$t('domain'),
width: '30%' width: '30%'
} }
], ],
@ -188,7 +192,7 @@ export default {
{ {
title: this.$t('label.value'), title: this.$t('label.value'),
dataIndex: 'value', dataIndex: 'value',
slots: { customRender: 'value' } key: 'value'
} }
], ],
userDataValues: {}, userDataValues: {},
@ -309,7 +313,7 @@ export default {
this.userDataParams = [] this.userDataParams = []
api('listUserData', { id: id }).then(json => { api('listUserData', { id: id }).then(json => {
const resp = json?.listuserdataresponse?.userdata || [] const resp = json?.listuserdataresponse?.userdata || []
if (resp) { if (resp.length > 0) {
var params = resp[0].params var params = resp[0].params
if (params) { if (params) {
var dataParams = params.split(',') var dataParams = params.split(',')

4
ui/src/views/compute/ScaleKubernetesCluster.vue
View File

@ -63,11 +63,11 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" }"
:loading="serviceOfferingLoading" :loading="serviceOfferingLoading"
:placeholder="apiParams.serviceofferingid.description"> :placeholder="apiParams.serviceofferingid.description">
<a-select-option v-for="(opt, optIndex) in serviceOfferings" :key="optIndex"> <a-select-option v-for="(opt, optIndex) in serviceOfferings" :key="optIndex" :label="opt.name || opt.description">
{{ opt.name || opt.description }} {{ opt.name || opt.description }}
</a-select-option> </a-select-option>
</a-select> </a-select>

12
ui/src/views/compute/StartVirtualMachine.vue
View File

@ -38,13 +38,13 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.text.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" }"
:loading="podsLoading" :loading="podsLoading"
:placeholder="apiParams.podid.description" :placeholder="apiParams.podid.description"
@change="handlePodChange" @change="handlePodChange"
v-focus="$store.getters.userInfo.roletype === 'Admin'"> v-focus="$store.getters.userInfo.roletype === 'Admin'">
<a-select-option v-for="pod in pods" :key="pod.id"> <a-select-option v-for="pod in pods" :key="pod.id" :label="pod.name">
{{ pod.name }} {{ pod.name }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -59,12 +59,12 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.text.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" }"
:loading="clustersLoading" :loading="clustersLoading"
:placeholder="apiParams.clusterid.description" :placeholder="apiParams.clusterid.description"
@change="handleClusterChange"> @change="handleClusterChange">
<a-select-option v-for="cluster in clusters" :key="cluster.id"> <a-select-option v-for="cluster in clusters" :key="cluster.id" :label="cluster.name">
{{ cluster.name }} {{ cluster.name }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -79,11 +79,11 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" }"
:loading="hostsLoading" :loading="hostsLoading"
:placeholder="apiParams.hostid.description"> :placeholder="apiParams.hostid.description">
<a-select-option v-for="host in hosts" :key="host.id"> <a-select-option v-for="host in hosts" :key="host.id" :label="host.name">
{{ host.name }} {{ host.name }}
</a-select-option> </a-select-option>
</a-select> </a-select>

4
ui/src/views/compute/UpgradeKubernetesCluster.vue
View File

@ -38,12 +38,12 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" }"
:loading="kubernetesVersionLoading" :loading="kubernetesVersionLoading"
:placeholder="apiParams.kubernetesversionid.description" :placeholder="apiParams.kubernetesversionid.description"
v-focus="true" > v-focus="true" >
<a-select-option v-for="(opt, optIndex) in this.kubernetesVersions" :key="optIndex"> <a-select-option v-for="(opt, optIndex) in this.kubernetesVersions" :key="optIndex" :label="opt.name || opt.description">
{{ opt.name || opt.description }} {{ opt.name || opt.description }}
</a-select-option> </a-select-option>
</a-select> </a-select>

108
ui/src/views/compute/backup/BackupSchedule.vue
View File

@ -24,49 +24,51 @@
:rowKey="record => record.virtualmachineid" :rowKey="record => record.virtualmachineid"
:pagination="false" :pagination="false"
:loading="loading"> :loading="loading">
<template #icon="{ text, record }" :name="text"> <template #bodyCell="{ column, text, record }">
<label class="interval-icon"> <template v-if="column.key === 'icon'" :name="text">
<span v-if="record.intervaltype==='HOURLY'"> <label class="interval-icon">
<clock-circle-outlined /> <span v-if="record.intervaltype==='HOURLY'">
<clock-circle-outlined />
</span>
<span class="custom-icon icon-daily" v-else-if="record.intervaltype==='DAILY'">
<calendar-outlined />
</span>
<span class="custom-icon icon-weekly" v-else-if="record.intervaltype==='WEEKLY'">
<calendar-outlined />
</span>
<span class="custom-icon icon-monthly" v-else-if="record.intervaltype==='MONTHLY'">
<calendar-outlined />
</span>
</label>
</template>
<template v-if="column.key === 'time'" :name="text">
<label class="interval-content">
<span v-if="record.intervaltype==='HOURLY'">{{ record.schedule + ' ' + $t('label.min.past.hour') }}</span>
<span v-else>{{ record.schedule.split(':')[1] + ':' + record.schedule.split(':')[0] }}</span>
</label>
</template>
<template v-if="column.key === 'interval'" :name="text">
<span v-if="record.intervaltype==='WEEKLY'">
{{ `${$t('label.every')} ${$t(listDayOfWeek[record.schedule.split(':')[2] - 1])}` }}
</span> </span>
<span class="custom-icon icon-daily" v-else-if="record.intervaltype==='DAILY'"> <span v-else-if="record.intervaltype==='MONTHLY'">
<calendar-outlined /> {{ `${$t('label.day')} ${record.schedule.split(':')[2]} ${$t('label.of.month')}` }}
</span> </span>
<span class="custom-icon icon-weekly" v-else-if="record.intervaltype==='WEEKLY'"> </template>
<calendar-outlined /> <template v-if="column.key === 'timezone'" :name="text">
</span> <label>{{ getTimeZone(record.timezone) }}</label>
<span class="custom-icon icon-monthly" v-else-if="record.intervaltype==='MONTHLY'"> </template>
<calendar-outlined /> <template v-if="column.key === 'actions'" class="account-button-action" :name="text">
</span> <tooltip-button
</label> tooltipPlacement="top"
</template> :tooltip="$t('label.delete')"
<template #time="{ text, record }" :name="text"> type="primary"
<label class="interval-content"> :danger="true"
<span v-if="record.intervaltype==='HOURLY'">{{ record.schedule + ' ' + $t('label.min.past.hour') }}</span> icon="close-outlined"
<span v-else>{{ record.schedule.split(':')[1] + ':' + record.schedule.split(':')[0] }}</span> size="small"
</label> :loading="actionLoading"
</template> @onClick="handleClickDelete(record)"/>
<template #interval="{ text, record }" :name="text"> </template>
<span v-if="record.intervaltype==='WEEKLY'">
{{ `${$t('label.every')} ${$t(listDayOfWeek[record.schedule.split(':')[2] - 1])}` }}
</span>
<span v-else-if="record.intervaltype==='MONTHLY'">
{{ `${$t('label.day')} ${record.schedule.split(':')[2]} ${$t('label.of.month')}` }}
</span>
</template>
<template #timezone="{ text, record }" :name="text">
<label>{{ getTimeZone(record.timezone) }}</label>
</template>
<template #action="{ text, record }" class="account-button-action" :name="text">
<tooltip-button
tooltipPlacement="top"
:tooltip="$t('label.delete')"
type="primary"
:danger="true"
icon="close-outlined"
size="small"
:loading="actionLoading"
@onClick="handleClickDelete(record)"/>
</template> </template>
</a-table> </a-table>
</div> </div>
@ -107,31 +109,31 @@ export default {
columns () { columns () {
return [ return [
{ {
key: 'icon',
title: '', title: '',
dataIndex: 'icon', dataIndex: 'icon',
width: 30, width: 30
slots: { customRender: 'icon' }
}, },
{ {
key: 'time',
title: this.$t('label.time'), title: this.$t('label.time'),
dataIndex: 'schedule', dataIndex: 'schedule'
slots: { customRender: 'time' }
}, },
{ {
key: 'interval',
title: '', title: '',
dataIndex: 'interval', dataIndex: 'interval'
slots: { customRender: 'interval' }
}, },
{ {
key: 'timezone',
title: this.$t('label.timezone'), title: this.$t('label.timezone'),
dataIndex: 'timezone', dataIndex: 'timezone'
slots: { customRender: 'timezone' }
}, },
{ {
title: this.$t('label.action'), key: 'actions',
dataIndex: 'action', title: this.$t('label.actions'),
width: 80, dataIndex: 'actions',
slots: { customRender: 'action' } width: 80
} }
] ]
} }

15
ui/src/views/compute/backup/FormSchedule.vue
View File

@ -70,7 +70,8 @@
<a-time-picker <a-time-picker
use12Hours use12Hours
format="h:mm A" format="h:mm A"
v-model:value="form.timeSelect" /> v-model:value="form.timeSelect"
style="width: 100%;" />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :md="24" :lg="12" v-if="form.intervaltype==='weekly'"> <a-col :md="24" :lg="12" v-if="form.intervaltype==='weekly'">
@ -80,9 +81,9 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" > }" >
<a-select-option v-for="(opt, optIndex) in dayOfWeek" :key="optIndex"> <a-select-option v-for="(opt, optIndex) in dayOfWeek" :key="optIndex" :label="opt.name || opt.description">
{{ opt.name || opt.description }} {{ opt.name || opt.description }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -95,9 +96,9 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"> }">
<a-select-option v-for="opt in dayOfMonth" :key="opt.name"> <a-select-option v-for="opt in dayOfMonth" :key="opt.name" :label="opt.name || opt.description">
{{ opt.name }} {{ opt.name }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -110,10 +111,10 @@
v-model:value="form.timezone" v-model:value="form.timezone"
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" }"
:loading="fetching"> :loading="fetching">
<a-select-option v-for="opt in timeZoneMap" :key="opt.id"> <a-select-option v-for="opt in timeZoneMap" :key="opt.id" :label="opt.name || opt.description">
{{ opt.name || opt.description }} {{ opt.name || opt.description }}
</a-select-option> </a-select-option>
</a-select> </a-select>

11
ui/src/views/compute/wizard/ComputeOfferingSelection.vue
View File

@ -32,8 +32,10 @@
size="middle" size="middle"
:scroll="{ y: 225 }" :scroll="{ y: 225 }"
> >
<template #cpuTitle><appstore-outlined /> {{ $t('label.cpu') }}</template> <template #headerCell="{ column }">
<template #ramTitle><bulb-outlined /> {{ $t('label.memory') }}</template> <template v-if="column.key === 'cpu'"><appstore-outlined /> {{ $t('label.cpu') }}</template>
<template v-if="column.key === 'ram'"><bulb-outlined /> {{ $t('label.memory') }}</template>
</template>
</a-table> </a-table>
<div style="display: block; text-align: right;"> <div style="display: block; text-align: right;">
@ -109,18 +111,19 @@ export default {
filter: '', filter: '',
columns: [ columns: [
{ {
key: 'name',
dataIndex: 'name', dataIndex: 'name',
title: this.$t('label.serviceofferingid'), title: this.$t('label.serviceofferingid'),
width: '40%' width: '40%'
}, },
{ {
key: 'cpu',
dataIndex: 'cpu', dataIndex: 'cpu',
slots: { title: 'cpuTitle' },
width: '30%' width: '30%'
}, },
{ {
key: 'ram',
dataIndex: 'ram', dataIndex: 'ram',
slots: { title: 'ramTitle' },
width: '30%' width: '30%'
} }
], ],

36
ui/src/views/compute/wizard/DiskOfferingSelection.vue
View File

@ -32,18 +32,23 @@
size="middle" size="middle"
:scroll="{ y: 225 }" :scroll="{ y: 225 }"
> >
<template #diskSizeTitle><hdd-outlined /> {{ $t('label.disksize') }}</template> <template #headerCell="{ column }">
<template #iopsTitle><rocket-outlined /> {{ $t('label.minmaxiops') }}</template> <template v-if="column.key === 'diskSize'"><hdd-outlined /> {{ $t('label.disksize') }}</template>
<template #diskSize="{ record }"> <template v-if="column.key === 'iops'"><rocket-outlined /> {{ $t('label.minmaxiops') }}</template>
<div v-if="record.isCustomized">{{ $t('label.iscustomized') }}</div>
<div v-else-if="record.diskSize">{{ record.diskSize }} GB</div>
<div v-else>-</div>
</template> </template>
<template #iops="{ record }">
<span v-if="record.miniops && record.maxiops">{{ record.miniops }} - {{ record.maxiops }}</span> <template #bodyCell="{ column, record }">
<span v-else-if="record.miniops && !record.maxiops">{{ record.miniops }}</span> <template v-if="column.key === 'diskSize'">
<span v-else-if="!record.miniops && record.maxiops">{{ record.maxiops }}</span> <div v-if="record.isCustomized">{{ $t('label.iscustomized') }}</div>
<span v-else>-</span> <div v-else-if="record.diskSize">{{ record.diskSize }} GB</div>
<div v-else>-</div>
</template>
<template v-if="column.key === 'iops'">
<span v-if="record.miniops && record.maxiops">{{ record.miniops }} - {{ record.maxiops }}</span>
<span v-else-if="record.miniops && !record.maxiops">{{ record.miniops }}</span>
<span v-else-if="!record.miniops && record.maxiops">{{ record.maxiops }}</span>
<span v-else>-</span>
</template>
</template> </template>
</a-table> </a-table>
@ -108,19 +113,20 @@ export default {
filter: '', filter: '',
columns: [ columns: [
{ {
key: 'name',
dataIndex: 'name', dataIndex: 'name',
title: this.$t('label.diskoffering'), title: this.$t('label.diskoffering'),
width: '40%' width: '40%'
}, },
{ {
key: 'diskSize',
dataIndex: 'disksize', dataIndex: 'disksize',
width: '30%', width: '30%'
slots: { customRender: 'diskSize', title: 'diskSizeTitle' }
}, },
{ {
key: 'iops',
dataIndex: 'iops', dataIndex: 'iops',
width: '30%', width: '30%'
slots: { customRender: 'iops', title: 'iopsTitle' }
} }
], ],
selectedRowKeys: ['0'], selectedRowKeys: ['0'],

7
ui/src/views/compute/wizard/LoadBalancerSelection.vue
View File

@ -32,9 +32,9 @@
:rowSelection="rowSelection" :rowSelection="rowSelection"
size="middle" size="middle"
:scroll="{ y: 225 }"> :scroll="{ y: 225 }">
<template #publicip><environment-outlined /> {{ $t('label.publicip') }}</template> <template #headerCell="{ column }">
<template #publicport>{{ $t('label.publicport') }}</template> <template v-if="column.key === 'publicip'"><environment-outlined /> {{ $t('label.publicip') }}</template>
<template #privateport>{{ $t('label.privateport') }}</template> </template>
</a-table> </a-table>
<div style="display: block; text-align: right;"> <div style="display: block; text-align: right;">
@ -113,6 +113,7 @@ export default {
width: '40%' width: '40%'
}, },
{ {
key: 'publicip',
title: this.$t('label.publicip'), title: this.$t('label.publicip'),
dataIndex: 'publicip' dataIndex: 'publicip'
}, },

84
ui/src/views/compute/wizard/MultiDiskSelection.vue
View File

@ -26,44 +26,46 @@
:rowSelection="rowSelection" :rowSelection="rowSelection"
:scroll="{ y: 225 }" > :scroll="{ y: 225 }" >
<template #name="{ record }"> <template #bodyCell="{ column, record }">
<span>{{ record.displaytext || record.name }}</span> <template v-if="column.key === 'name'">
<div v-if="record.meta"> <span>{{ record.displaytext || record.name }}</span>
<div v-for="meta in record.meta" :key="meta.key"> <div v-if="record.meta">
<a-tag style="margin-top: 5px" :key="meta.key">{{ meta.key + ': ' + meta.value }}</a-tag> <div v-for="meta in record.meta" :key="meta.key">
<a-tag style="margin-top: 5px" :key="meta.key">{{ meta.key + ': ' + meta.value }}</a-tag>
</div>
</div> </div>
</div> </template>
</template> <template v-if="column.key === 'offering'">
<template #offering="{ record }"> <span
<span style="width: 50%"
style="width: 50%" v-if="validOfferings[record.id] && validOfferings[record.id].length > 0">
v-if="validOfferings[record.id] && validOfferings[record.id].length > 0"> <check-box-select-pair
<check-box-select-pair v-if="selectedCustomDiskOffering!=null"
v-if="selectedCustomDiskOffering!=null" layout="vertical"
layout="vertical" :resourceKey="record.id"
:resourceKey="record.id" :selectOptions="validOfferings[record.id]"
:selectOptions="validOfferings[record.id]" :checkBoxLabel="autoSelectLabel"
:checkBoxLabel="autoSelectLabel" :defaultCheckBoxValue="true"
:defaultCheckBoxValue="true" :reversed="true"
:reversed="true" @handle-checkselectpair-change="updateOfferingCheckPairSelect" />
@handle-checkselectpair-change="updateOfferingCheckPairSelect" /> <a-select
<a-select v-else
v-else @change="updateOfferingSelect($event, record.id)"
@change="updateOfferingSelect($event, record.id)" :defaultValue="validOfferings[record.id][0].id"
:defaultValue="validOfferings[record.id][0].id" showSearch
showSearch optionFilterProp="label"
optionFilterProp="label" :filterOption="(input, option) => {
:filterOption="(input, option) => { return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 }" >
}" > <a-select-option v-for="offering in validOfferings[record.id]" :key="offering.id" :label="offering.displaytext">
<a-select-option v-for="offering in validOfferings[record.id]" :key="offering.id"> {{ offering.displaytext }}
{{ offering.displaytext }} </a-select-option>
</a-select-option> </a-select>
</a-select> </span>
</span> <span v-else style="width: 50%">
<span v-else style="width: 50%"> {{ $t('label.no.matching.offering') }}
{{ $t('label.no.matching.offering') }} </span>
</span> </template>
</template> </template>
</a-table> </a-table>
</div> </div>
@ -108,14 +110,14 @@ export default {
return { return {
columns: [ columns: [
{ {
key: 'name',
dataIndex: 'name', dataIndex: 'name',
title: this.$t('label.data.disk'), title: this.$t('label.data.disk')
slots: { customRender: 'name' }
}, },
{ {
key: 'offering',
dataIndex: 'offering', dataIndex: 'offering',
title: this.$t('label.data.disk.offering'), title: this.$t('label.data.disk.offering')
slots: { customRender: 'offering' }
} }
], ],
loading: false, loading: false,

85
ui/src/views/compute/wizard/MultiNetworkSelection.vue
View File

@ -26,41 +26,46 @@
:rowSelection="rowSelection" :rowSelection="rowSelection"
:scroll="{ y: 225 }" > :scroll="{ y: 225 }" >
<template #name="{record}"> <template #bodyCell="{ column, record }">
<span>{{ record.displaytext || record.name }}</span> <template v-if="column.key === 'name'">
<div v-if="record.meta"> <span>{{ record.displaytext || record.name }}</span>
<div v-for="meta in record.meta" :key="meta.key"> <div v-if="record.meta">
<a-tag style="margin-top: 5px" :key="meta.key">{{ meta.key + ': ' + meta.value }}</a-tag> <div v-for="meta in record.meta" :key="meta.key">
<a-tag style="margin-top: 5px" :key="meta.key">{{ meta.key + ': ' + meta.value }}</a-tag>
</div>
</div> </div>
</div> </template>
</template> <template v-if="column.key === 'network'">
<template #network="{record}"> <a-select
<a-select v-if="validNetworks[record.id] && validNetworks[record.id].length > 0"
v-if="validNetworks[record.id] && validNetworks[record.id].length > 0" :defaultValue="validNetworks[record.id][0].id"
:defaultValue="validNetworks[record.id][0].id" @change="val => handleNetworkChange(record, val)"
@change="val => handleNetworkChange(record, val)" showSearch
showSearch optionFilterProp="label"
optionFilterProp="label" :filterOption="(input, option) => {
:filterOption="(input, option) => { return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 }" >
}" > <a-select-option
<a-select-option v-for="network in validNetworks[record.id]" :key="network.id"> v-for="network in validNetworks[record.id]"
{{ network.displaytext + (network.broadcasturi ? ' (' + network.broadcasturi + ')' : '') }} :key="network.id"
</a-select-option> :label="network.displaytext + (network.broadcasturi ? ' (' + network.broadcasturi + ')' : '')">
</a-select> {{ network.displaytext + (network.broadcasturi ? ' (' + network.broadcasturi + ')' : '') }}
<span v-else> </a-select-option>
{{ $t('label.no.matching.network') }} </a-select>
</span> <span v-else>
</template> {{ $t('label.no.matching.network') }}
<template #ipaddress="{record}"> </span>
<check-box-input-pair </template>
layout="vertical" <template v-if="column.key === 'ipaddress'">
:resourceKey="record.id" <check-box-input-pair
:checkBoxLabel="$t('label.auto.assign.random.ip')" layout="vertical"
:defaultCheckBoxValue="true" :resourceKey="record.id"
:reversed="true" :checkBoxLabel="$t('label.auto.assign.random.ip')"
:visible="(indexNum > 0 && ipAddressesEnabled[record.id])" :defaultCheckBoxValue="true"
@handle-checkinputpair-change="setIpAddress" /> :reversed="true"
:visible="(indexNum > 0 && ipAddressesEnabled[record.id])"
@handle-checkinputpair-change="setIpAddress" />
</template>
</template> </template>
</a-table> </a-table>
</div> </div>
@ -102,19 +107,19 @@ export default {
return { return {
columns: [ columns: [
{ {
key: 'name',
dataIndex: 'name', dataIndex: 'name',
title: this.$t('label.nic'), title: this.$t('label.nic')
slots: { customRender: 'name' }
}, },
{ {
key: 'network',
dataIndex: 'network', dataIndex: 'network',
title: this.$t('label.network'), title: this.$t('label.network')
slots: { customRender: 'network' }
}, },
{ {
key: 'ipaddress',
dataIndex: 'ipaddress', dataIndex: 'ipaddress',
title: this.$t('label.ipaddress'), title: this.$t('label.ipaddress')
slots: { customRender: 'ipaddress' }
} }
], ],
loading: false, loading: false,

88
ui/src/views/compute/wizard/NetworkConfiguration.vue
View File

@ -29,42 +29,46 @@
:rowKey="record => record.id" :rowKey="record => record.id"
size="middle" size="middle"
:scroll="{ y: 225 }"> :scroll="{ y: 225 }">
<template #name="{ text, record }"> <template #bodyCell="{ column, text, record }">
<div>{{ text }}</div> <template v-if="column.key === 'name'">
<small v-if="record.type!=='L2'">{{ $t('label.cidr') + ': ' + record.cidr }}</small> <div>{{ text }}</div>
</template> <small v-if="record.type!=='L2'">{{ $t('label.cidr') + ': ' + record.cidr }}</small>
<template #ipAddress="{ record }" v-if="!this.autoscale"> </template>
<a-form-item <template v-if="!this.autoscale">
style="display: block" <template v-if="column.key === 'ipAddress'">
v-if="record.type !== 'L2'" <a-form-item
:name="'ipAddress' + record.id"> style="display: block"
<a-input v-if="record.type !== 'L2'"
style="width: 150px;" :name="'ipAddress' + record.id">
v-model:value="form['ipAddress' + record.id]" <a-input
:placeholder="record.cidr" style="width: 150px;"
@change="($event) => updateNetworkData('ipAddress', record.id, $event.target.value)"> v-model:value="form['ipAddress' + record.id]"
<template #suffix> :placeholder="record.cidr"
<a-tooltip :title="getIpRangeDescription(record)"> @change="($event) => updateNetworkData('ipAddress', record.id, $event.target.value)">
<info-circle-outlined style="color: rgba(0,0,0,.45)" /> <template #suffix>
</a-tooltip> <a-tooltip :title="getIpRangeDescription(record)">
</template> <info-circle-outlined style="color: rgba(0,0,0,.45)" />
</a-input> </a-tooltip>
</a-form-item> </template>
</template> </a-input>
<template #macAddress="{ record }" v-if="!this.autoscale"> </a-form-item>
<a-form-item style="display: block" :name="'macAddress' + record.id"> </template>
<a-input <template v-if="column.key === 'macAddress'">
style="width: 150px;" <a-form-item style="display: block" :name="'macAddress' + record.id">
:placeholder="$t('label.macaddress')" <a-input
v-model:value="form[`macAddress` + record.id]" style="width: 150px;"
@change="($event) => updateNetworkData('macAddress', record.id, $event.target.value)"> :placeholder="$t('label.macaddress')"
<template #suffix> v-model:value="form[`macAddress` + record.id]"
<a-tooltip :title="$t('label.macaddress.example')"> @change="($event) => updateNetworkData('macAddress', record.id, $event.target.value)">
<info-circle-outlined style="color: rgba(0,0,0,.45)" /> <template #suffix>
</a-tooltip> <a-tooltip :title="$t('label.macaddress.example')">
</template> <info-circle-outlined style="color: rgba(0,0,0,.45)" />
</a-input> </a-tooltip>
</a-form-item> </template>
</a-input>
</a-form-item>
</template>
</template>
</template> </template>
</a-table> </a-table>
</a-form> </a-form>
@ -97,22 +101,22 @@ export default {
networks: [], networks: [],
columns: [ columns: [
{ {
key: 'name',
dataIndex: 'name', dataIndex: 'name',
title: this.$t('label.defaultnetwork'), title: this.$t('label.defaultnetwork'),
width: '30%', width: '30%'
slots: { customRender: 'name' }
}, },
{ {
key: 'ipAddress',
dataIndex: 'ip', dataIndex: 'ip',
title: this.$t('label.ip'), title: this.$t('label.ip'),
width: '30%', width: '30%'
slots: { customRender: 'ipAddress' }
}, },
{ {
key: 'macAddress',
dataIndex: 'mac', dataIndex: 'mac',
title: this.$t('label.macaddress'), title: this.$t('label.macaddress'),
width: '30%', width: '30%'
slots: { customRender: 'macAddress' }
} }
], ],
selectedRowKeys: [], selectedRowKeys: [],

46
ui/src/views/compute/wizard/NetworkSelection.vue
View File

@ -34,14 +34,16 @@
:rowSelection="rowSelection" :rowSelection="rowSelection"
:scroll="{ y: 225 }" :scroll="{ y: 225 }"
> >
<template #name="{record}"> <template #bodyCell="{ column, record }">
<resource-icon <template v-if="column.key === 'name'">
v-if="record.icon" <resource-icon
:image="record.icon.base64image" v-if="record.icon"
size="1x" :image="record.icon.base64image"
style="margin-right: 5px"/> size="1x"
<apartment-outlined v-else style="margin-right: 5px" /> style="margin-right: 5px"/>
{{ record.name }} <apartment-outlined v-else style="margin-right: 5px" />
{{ record.name }}
</template>
</template> </template>
<template #expandedRowRender="{ record }"> <template #expandedRowRender="{ record }">
<a-list <a-list
@ -173,29 +175,35 @@ export default {
} }
}) })
} }
const vpcCol = {
key: 'vpcName',
dataIndex: 'vpcName',
title: this.$t('label.vpc'),
width: '30%'
}
if (vpcFilter.length > 0) {
vpcCol.filters = vpcFilter
vpcCol.filteredValue = _.get(this.filteredInfo, 'id')
vpcCol.onFilter = (value, record) => {
return record.vpcid === value
}
}
return [ return [
{ {
key: 'name',
dataIndex: 'name', dataIndex: 'name',
title: this.$t('label.networks'), title: this.$t('label.networks'),
slots: { customRender: 'name' },
width: '40%' width: '40%'
}, },
{ {
key: 'type',
dataIndex: 'type', dataIndex: 'type',
title: this.$t('label.guestiptype'), title: this.$t('label.guestiptype'),
width: '15%' width: '15%'
}, },
vpcCol,
{ {
dataIndex: 'vpcName', key: 'supportsvmautoscaling',
title: this.$t('label.vpc'),
width: '20%',
filters: vpcFilter,
filteredValue: _.get(this.filteredInfo, 'id'),
onFilter: (value, record) => {
return record.vpcid === value
}
},
{
dataIndex: 'supportsvmautoscaling', dataIndex: 'supportsvmautoscaling',
title: this.$t('label.supportsvmautoscaling'), title: this.$t('label.supportsvmautoscaling'),
width: '25%' width: '25%'

11
ui/src/views/compute/wizard/SshKeyPairSelection.vue
View File

@ -31,8 +31,10 @@
:pagination="false" :pagination="false"
size="middle" size="middle"
:scroll="{ y: 225 }"> :scroll="{ y: 225 }">
<template #account><user-outlined /> {{ $t('label.account') }}</template> <template #headerCell="{ column }">
<template #domain><block-outlined /> {{ $t('label.domain') }}</template> <template v-if="column.key === 'account'"><user-outlined /> {{ $t('label.account') }}</template>
<template v-if="column.key === 'domain'"><block-outlined /> {{ $t('label.domain') }}</template>
</template>
</a-table> </a-table>
<div style="display: block; text-align: right;"> <div style="display: block; text-align: right;">
<a-pagination <a-pagination
@ -87,18 +89,19 @@ export default {
filter: '', filter: '',
columns: [ columns: [
{ {
key: 'name',
dataIndex: 'name', dataIndex: 'name',
title: this.$t('label.sshkeypairs'), title: this.$t('label.sshkeypairs'),
width: '40%' width: '40%'
}, },
{ {
key: 'account',
dataIndex: 'account', dataIndex: 'account',
slots: { title: 'account' },
width: '30%' width: '30%'
}, },
{ {
key: 'domain',
dataIndex: 'domain', dataIndex: 'domain',
slots: { title: 'domain' },
width: '30%' width: '30%'
} }
], ],

10
ui/src/views/compute/wizard/UserDataSelection.vue
View File

@ -32,8 +32,10 @@
size="middle" size="middle"
:scroll="{ y: 225 }" :scroll="{ y: 225 }"
> >
<template #account><user-outlined /> {{ $t('label.account') }}</template> <template #headerCell="{ column }">
<template #domain><block-outlined /> {{ $t('label.domain') }}</template> <template v-if="column.key === 'account'"><user-outlined /> {{ $t('label.account') }}</template>
<template v-if="column.key === 'domain'"><block-outlined /> {{ $t('label.domain') }}</template>
</template>
</a-table> </a-table>
</div> </div>
</template> </template>
@ -81,13 +83,13 @@ export default {
width: '40%' width: '40%'
}, },
{ {
key: 'account',
dataIndex: 'account', dataIndex: 'account',
slots: { title: 'account' },
width: '30%' width: '30%'
}, },
{ {
key: 'domain',
dataIndex: 'domain', dataIndex: 'domain',
slots: { title: 'domain' },
width: '30%' width: '30%'
} }
], ],

2
ui/src/views/dashboard/CapacityDashboard.vue
View File

@ -280,7 +280,7 @@ export default {
this.listCapacity(this.zoneSelected) this.listCapacity(this.zoneSelected)
}, },
filterZone (input, option) { filterZone (input, option) {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
} }
} }
} }

4
ui/src/views/dashboard/SetupTwoFaAtLogin.vue
View File

@ -38,10 +38,6 @@
<a-form-item v-ctrl-enter="submitPin" ref="selectedProvider" name="selectedProvider"> <a-form-item v-ctrl-enter="submitPin" ref="selectedProvider" name="selectedProvider">
<a-select <a-select
v-model:value="form.selectedProvider" v-model:value="form.selectedProvider"
optionFilterProp="label"
:filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"
@change="val => { handleSelectChange(val) }"> @change="val => { handleSelectChange(val) }">
<a-select-option <a-select-option
v-for="(opt) in providers" v-for="(opt) in providers"

12
ui/src/views/iam/AddAccount.vue
View File

@ -37,9 +37,9 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"> }">
<a-select-option v-for="role in roles" :key="role.id"> <a-select-option v-for="role in roles" :key="role.id" :label="role.name + ' (' + role.type + ')'">
{{ role.name + ' (' + role.type + ')' }} {{ role.name + ' (' + role.type + ')' }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -143,9 +143,9 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"> }">
<a-select-option v-for="opt in timeZoneMap" :key="opt.id"> <a-select-option v-for="opt in timeZoneMap" :key="opt.id" :label="opt.name || opt.description">
{{ opt.name || opt.description }} {{ opt.name || opt.description }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -173,9 +173,9 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"> }">
<a-select-option v-for="idp in idps" :key="idp.id"> <a-select-option v-for="idp in idps" :key="idp.id" :label="idp.orgName">
{{ idp.orgName }} {{ idp.orgName }}
</a-select-option> </a-select-option>
</a-select> </a-select>

42
ui/src/views/iam/AddLdapAccount.vue
View File

@ -59,9 +59,9 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"> }">
<a-select-option v-for="opt in filters" :key="opt.id" > <a-select-option v-for="opt in filters" :key="opt.id" :label="opt.name">
{{ opt.name }} {{ opt.name }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -73,9 +73,9 @@
:loading="domainLoading" :loading="domainLoading"
@change="fetchListLdapUsers($event)" @change="fetchListLdapUsers($event)"
showSearch showSearch
optionFilterProp="label" optionFilterProp="value"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" > }" >
<a-select-option v-for="opt in listDomains" :key="opt.name"> <a-select-option v-for="opt in listDomains" :key="opt.name">
{{ opt.name }} {{ opt.name }}
@ -94,9 +94,9 @@
:placeholder="apiParams.roleid.description" :placeholder="apiParams.roleid.description"
:loading="roleLoading" :loading="roleLoading"
showSearch showSearch
optionFilterProp="label" optionFilterProp="value"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"> }">
<a-select-option v-for="opt in listRoles" :key="opt.name"> <a-select-option v-for="opt in listRoles" :key="opt.name">
{{ opt.name }} {{ opt.name }}
@ -111,9 +111,9 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"> }">
<a-select-option v-for="opt in timeZoneMap" :key="opt.id"> <a-select-option v-for="opt in timeZoneMap" :key="opt.id" :label="opt.name || opt.description">
{{ opt.name || opt.description }} {{ opt.name || opt.description }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -142,9 +142,9 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"> }">
<a-select-option v-for="(idp, idx) in listIdps" :key="idx"> <a-select-option v-for="(idp, idx) in listIdps" :key="idx" :label="idp.orgName">
{{ idp.orgName }} {{ idp.orgName }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -212,26 +212,26 @@ export default {
this.listIdps = [] this.listIdps = []
this.columns = [ this.columns = [
{ {
key: 'name',
title: this.$t('label.name'), title: this.$t('label.name'),
dataIndex: 'name', dataIndex: 'name',
width: 120, width: 120
slots: { customRender: 'name' }
}, },
{ {
key: 'username',
title: this.$t('label.username'), title: this.$t('label.username'),
dataIndex: 'username', dataIndex: 'username',
width: 120, width: 120
slots: { customRender: 'username' }
}, },
{ {
key: 'email',
title: this.$t('label.email'), title: this.$t('label.email'),
dataIndex: 'email', dataIndex: 'email'
slots: { customRender: 'email' }
}, },
{ {
key: 'conflictingusersource',
title: this.$t('label.user.conflict'), title: this.$t('label.user.conflict'),
dataIndex: 'conflictingusersource', dataIndex: 'conflictingusersource'
slots: { customRender: 'conflictingusersource' }
} }
] ]
this.filters = [ this.filters = [
@ -487,9 +487,9 @@ export default {
}, },
handleEntityRule () { handleEntityRule () {
if (this.form.samlEnable) { if (this.form.samlEnable) {
this.rules.push({ this.rules.samlEntity = [{ required: true, message: `${this.$t('message.error.select')}` }]
samlEntity: [{ required: true, message: `${this.$t('message.error.select')}` }] } else {
}) delete this.rules.samlEntity
} }
} }
} }

8
ui/src/views/iam/AddUser.vue
View File

@ -140,9 +140,9 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" > }" >
<a-select-option v-for="opt in timeZoneMap" :key="opt.id"> <a-select-option v-for="opt in timeZoneMap" :key="opt.id" :label="opt.name || opt.description">
{{ opt.name || opt.description }} {{ opt.name || opt.description }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -161,9 +161,9 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" > }" >
<a-select-option v-for="idp in idps" :key="idp.id"> <a-select-option v-for="idp in idps" :key="idp.id" :label="idp.orgName">
{{ idp.orgName }} {{ idp.orgName }}
</a-select-option> </a-select-option>
</a-select> </a-select>

4
ui/src/views/iam/ConfigureSamlSsoAuth.vue
View File

@ -36,9 +36,9 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" > }" >
<a-select-option v-for="idp in idps" :key="idp.id"> <a-select-option v-for="idp in idps" :key="idp.id" :label="idp.orgName">
{{ idp.orgName }} {{ idp.orgName }}
</a-select-option> </a-select-option>
</a-select> </a-select>

9
ui/src/views/iam/CreateRole.vue
View File

@ -67,9 +67,9 @@
v-model:value="form.type" v-model:value="form.type"
:placeholder="apiParams.type.description" :placeholder="apiParams.type.description"
showSearch showSearch
optionFilterProp="label" optionFilterProp="value"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" > }" >
<a-select-option v-for="role in defaultRoles" :key="role"> <a-select-option v-for="role in defaultRoles" :key="role">
{{ role }} {{ role }}
@ -87,12 +87,13 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" > }" >
<a-select-option <a-select-option
v-for="role in roles" v-for="role in roles"
:value="role.id" :value="role.id"
:key="role.id"> :key="role.id"
:label="role.name">
{{ role.name }} {{ role.name }}
</a-select-option> </a-select-option>
</a-select> </a-select>

18
ui/src/views/iam/DomainActionForm.vue
View File

@ -65,9 +65,9 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" > }" >
<a-select-option v-for="(opt, optIndex) in action.mapping[field.name].options" :key="optIndex"> <a-select-option v-for="(opt, optIndex) in action.mapping[field.name].options" :key="optIndex" :label="opt">
{{ opt }} {{ opt }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -79,11 +79,14 @@
:loading="field.loading" :loading="field.loading"
:placeholder="field.description" :placeholder="field.description"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" }"
v-focus="fieldIndex === firstIndex" v-focus="fieldIndex === firstIndex"
> >
<a-select-option v-for="(opt, optIndex) in field.opts" :key="optIndex"> <a-select-option
v-for="(opt, optIndex) in field.opts"
:key="optIndex"
:label="opt.name || opt.description || opt.traffictype || opt.publicip">
{{ opt.name || opt.description || opt.traffictype || opt.publicip }} {{ opt.name || opt.description || opt.traffictype || opt.publicip }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -97,9 +100,12 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" > }" >
<a-select-option v-for="(opt, optIndex) in field.opts" :key="optIndex"> <a-select-option
v-for="(opt, optIndex) in field.opts"
:key="optIndex"
:label="opt.name && opt.type ? opt.name + ' (' + opt.type + ')' : opt.name || opt.description">
{{ opt.name && opt.type ? opt.name + ' (' + opt.type + ')' : opt.name || opt.description }} {{ opt.name && opt.type ? opt.name + ' (' + opt.type + ')' : opt.name || opt.description }}
</a-select-option> </a-select-option>
</a-select> </a-select>

11
ui/src/views/iam/DomainView.vue
View File

@ -56,13 +56,13 @@
:loading="loading" :loading="loading"
:tabs="$route.meta.tabs" /> :tabs="$route.meta.tabs" />
<tree-view <tree-view
v-else
:key="treeViewKey" :key="treeViewKey"
:treeData="treeData" :treeData="treeData"
:treeSelected="treeSelected" :treeSelected="treeSelected"
:treeStore="domainStore" :treeStore="domainStore"
:loading="loading" :loading="loading"
:tabs="$route.meta.tabs" :tabs="$route.meta.tabs"
:treeDeletedKey="treeDeletedKey"
@change-resource="changeResource" @change-resource="changeResource"
@change-tree-store="changeDomainStore"/> @change-tree-store="changeDomainStore"/>
</div> </div>
@ -109,7 +109,8 @@ export default {
showAction: false, showAction: false,
action: {}, action: {},
dataView: false, dataView: false,
domainStore: {} domainStore: {},
treeDeletedKey: null
} }
}, },
computed: { computed: {
@ -194,6 +195,7 @@ export default {
}) })
}, },
execAction (action) { execAction (action) {
this.treeDeletedKey = action.api === 'deleteDomain' ? this.resource.key : null
this.actionData = [] this.actionData = []
this.action = action this.action = action
this.action.params = store.getters.apis[this.action.api].params this.action.params = store.getters.apis[this.action.api].params
@ -286,9 +288,8 @@ export default {
rootItem[0].title = rootItem[0].title ? rootItem[0].title : rootItem[0].name rootItem[0].title = rootItem[0].title ? rootItem[0].title : rootItem[0].name
rootItem[0].key = rootItem[0].id ? rootItem[0].id : 0 rootItem[0].key = rootItem[0].id ? rootItem[0].id : 0
rootItem[0].slots = { rootItem[0].resourceIcon = rootItem[0].icon || {}
icon: 'leaf' delete rootItem[0].icon
}
if (!rootItem[0].haschild) { if (!rootItem[0].haschild) {
rootItem[0].isLeaf = true rootItem[0].isLeaf = true

4
ui/src/views/iam/EditUser.vue
View File

@ -74,9 +74,9 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" > }" >
<a-select-option v-for="opt in timeZoneMap" :key="opt.id"> <a-select-option v-for="opt in timeZoneMap" :key="opt.id" :label="opt.name || opt.description">
{{ opt.name || opt.description }} {{ opt.name || opt.description }}
</a-select-option> </a-select-option>
</a-select> </a-select>

6
ui/src/views/iam/ImportRole.vue
View File

@ -31,7 +31,7 @@
<a-upload-dragger <a-upload-dragger
:multiple="false" :multiple="false"
:fileList="fileList" :fileList="fileList"
:remove="handleRemove" @remove="handleRemove"
:beforeUpload="beforeUpload" :beforeUpload="beforeUpload"
@change="handleChange" @change="handleChange"
v-model:value="form.file"> v-model:value="form.file">
@ -70,9 +70,9 @@
v-model:value="form.type" v-model:value="form.type"
:placeholder="apiParams.type.description" :placeholder="apiParams.type.description"
showSearch showSearch
optionFilterProp="label" optionFilterProp="value"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" > }" >
<a-select-option v-for="role in defaultRoles" :key="role"> <a-select-option v-for="role in defaultRoles" :key="role">
{{ role }} {{ role }}

6
ui/src/views/iam/PermissionEditable.vue
View File

@ -23,10 +23,10 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" > }" >
<a-select-option value="allow">{{ $t('label.allow') }}</a-select-option> <a-select-option value="allow" :label="$t('label.allow')">{{ $t('label.allow') }}</a-select-option>
<a-select-option value="deny">{{ $t('label.deny') }}</a-select-option> <a-select-option value="deny" :label="$t('label.deny')">{{ $t('label.deny') }}</a-select-option>
</a-select> </a-select>
</template> </template>

1
ui/src/views/iam/RolePermissionTab.vue
View File

@ -69,7 +69,6 @@
handle=".drag-handle" handle=".drag-handle"
animation="200" animation="200"
ghostClass="drag-ghost" ghostClass="drag-ghost"
tag="transition-group"
:component-data="{type: 'transition'}" :component-data="{type: 'transition'}"
item-key="id"> item-key="id">
<template #item="{element}"> <template #item="{element}">

52
ui/src/views/iam/SSLCertificateTab.vue
View File

@ -28,23 +28,25 @@
:pagination="false" :pagination="false"
v-if="!quickview" v-if="!quickview"
> >
<template #action="{ record }" class="cert-button-action"> <template #bodyCell="{ column, record }">
<tooltip-button <template v-if="column.key === 'actions'" class="cert-button-action">
tooltipPlacement="top" <tooltip-button
:tooltip="$t('label.quickview')" tooltipPlacement="top"
type="primary" :tooltip="$t('label.quickview')"
icon="eye-outlined" type="primary"
size="small" icon="eye-outlined"
@onClick="onQuickView(record.id)" /> size="small"
<tooltip-button @onClick="onQuickView(record.id)" />
tooltipPlacement="top" <tooltip-button
:tooltip="$t('label.delete.sslcertificate')" tooltipPlacement="top"
:disabled="!('deleteSslCert' in $store.getters.apis)" :tooltip="$t('label.delete.sslcertificate')"
type="primary" :disabled="!('deleteSslCert' in $store.getters.apis)"
:danger="true" type="primary"
icon="delete-outlined" :danger="true"
size="small" icon="delete-outlined"
@onClick="onShowConfirm(record)" /> size="small"
@onClick="onShowConfirm(record)" />
</template>
</template> </template>
</a-table> </a-table>
@ -128,22 +130,22 @@ export default {
created () { created () {
this.columns = [ this.columns = [
{ {
key: 'name',
title: this.$t('label.name'), title: this.$t('label.name'),
dataIndex: 'name', dataIndex: 'name'
slots: { customRender: 'name' }
}, },
{ {
key: 'id',
title: this.$t('label.certificateid'), title: this.$t('label.certificateid'),
dataIndex: 'id', dataIndex: 'id',
width: 450, width: 450
slots: { customRender: 'id' }
}, },
{ {
title: this.$t('label.action'), key: 'actions',
dataIndex: 'action', title: this.$t('label.actions'),
dataIndex: 'actions',
fixed: 'right', fixed: 'right',
width: 80, width: 80
slots: { customRender: 'action' }
} }
] ]
this.detailColumn = ['name', 'certificate', 'certchain'] this.detailColumn = ['name', 'certificate', 'certchain']

4
ui/src/views/iam/SetupTwoFaAtUserProfile.vue
View File

@ -29,10 +29,6 @@
<a-form-item v-ctrl-enter="submitPin" ref="selectedProvider" name="selectedProvider"> <a-form-item v-ctrl-enter="submitPin" ref="selectedProvider" name="selectedProvider">
<a-select <a-select
v-model:value="form.selectedProvider" v-model:value="form.selectedProvider"
optionFilterProp="label"
:filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"
@change="val => { handleSelectChange(val) }"> @change="val => { handleSelectChange(val) }">
<a-select-option <a-select-option
v-for="(opt) in providers" v-for="(opt) in providers"

90
ui/src/views/image/IsoZones.vue
View File

@ -35,43 +35,45 @@
:pagination="false" :pagination="false"
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
:rowKey="record => record.zoneid"> :rowKey="record => record.zoneid">
<template #zonename="{record}"> <template #bodyCell="{ column, record }">
<span v-if="fetchZoneIcon(record.zoneid)"> <template v-if="column.key === 'zonename'">
<resource-icon :image="zoneIcon" size="1x" style="margin-right: 5px"/> <span v-if="fetchZoneIcon(record.zoneid)">
</span> <resource-icon :image="zoneIcon" size="1x" style="margin-right: 5px"/>
<global-outlined v-else style="margin-right: 5px" /> </span>
<span> {{ record.zonename }} </span> <global-outlined v-else style="margin-right: 5px" />
</template> <span> {{ record.zonename }} </span>
<template #isready="{ record }"> </template>
<span v-if="record.isready">{{ $t('label.yes') }}</span> <template v-if="column.key === 'isready'">
<span v-else>{{ $t('label.no') }}</span> <span v-if="record.isready">{{ $t('label.yes') }}</span>
</template> <span v-else>{{ $t('label.no') }}</span>
<template #action="{ record }"> </template>
<span style="margin-right: 5px"> <template v-if="column.key === 'actions'">
<tooltip-button <span style="margin-right: 5px">
:tooltip="$t('label.action.copy.iso')"
:disabled="!('copyIso' in $store.getters.apis && record.isready)"
icon="copy-outlined"
:loading="copyLoading"
@click="showCopyIso(record)" />
</span>
<span style="margin-right: 5px">
<a-popconfirm
v-if="'deleteIso' in $store.getters.apis"
placement="topRight"
:title="$t('message.action.delete.iso')"
:ok-text="$t('label.yes')"
:cancel-text="$t('label.no')"
:loading="deleteLoading"
@confirm="deleteIso(record)"
>
<tooltip-button <tooltip-button
:tooltip="$t('label.action.delete.iso')" :tooltip="$t('label.action.copy.iso')"
type="primary" :disabled="!('copyIso' in $store.getters.apis && record.isready)"
:danger="true" icon="copy-outlined"
icon="delete-outlined" /> :loading="copyLoading"
</a-popconfirm> @click="showCopyIso(record)" />
</span> </span>
<span style="margin-right: 5px">
<a-popconfirm
v-if="'deleteIso' in $store.getters.apis"
placement="topRight"
:title="$t('message.action.delete.iso')"
:ok-text="$t('label.yes')"
:cancel-text="$t('label.no')"
:loading="deleteLoading"
@confirm="deleteIso(record)"
>
<tooltip-button
:tooltip="$t('label.action.delete.iso')"
type="primary"
:danger="true"
icon="delete-outlined" />
</a-popconfirm>
</span>
</template>
</template> </template>
</a-table> </a-table>
<a-pagination <a-pagination
@ -221,27 +223,27 @@ export default {
this.initForm() this.initForm()
this.columns = [ this.columns = [
{ {
key: 'zonename',
title: this.$t('label.zonename'), title: this.$t('label.zonename'),
dataIndex: 'zonename', dataIndex: 'zonename'
slots: { customRender: 'zonename' }
}, },
{ {
title: this.$t('label.status'), title: this.$t('label.status'),
dataIndex: 'status' dataIndex: 'status'
}, },
{ {
key: 'isready',
title: this.$t('label.isready'), title: this.$t('label.isready'),
dataIndex: 'isready', dataIndex: 'isready'
slots: { customRender: 'isready' }
} }
] ]
if (this.isActionPermitted()) { if (this.isActionPermitted()) {
this.columns.push({ this.columns.push({
key: 'actions',
title: '', title: '',
dataIndex: 'action', dataIndex: 'actions',
fixed: 'right', fixed: 'right',
width: 100, width: 100
slots: { customRender: 'action' }
}) })
} }
@ -355,9 +357,9 @@ export default {
deleteIsos (e) { deleteIsos (e) {
this.showConfirmationAction = false this.showConfirmationAction = false
this.selectedColumns.splice(0, 0, { this.selectedColumns.splice(0, 0, {
key: 'status',
dataIndex: 'status', dataIndex: 'status',
title: this.$t('label.operation.status'), title: this.$t('label.operation.status'),
slots: { customRender: 'status' },
filters: [ filters: [
{ text: 'In Progress', value: 'InProgress' }, { text: 'In Progress', value: 'InProgress' },
{ text: 'Success', value: 'success' }, { text: 'Success', value: 'success' },

11
ui/src/views/image/RegisterOrUploadIso.vue
View File

@ -50,7 +50,7 @@
<a-upload-dragger <a-upload-dragger
:multiple="false" :multiple="false"
:fileList="fileList" :fileList="fileList"
:remove="handleRemove" @remove="handleRemove"
:beforeUpload="beforeUpload" :beforeUpload="beforeUpload"
v-model:value="form.file"> v-model:value="form.file">
<p class="ant-upload-drag-icon"> <p class="ant-upload-drag-icon">
@ -131,12 +131,12 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children?.[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" }"
v-model:value="userdataid" v-model:value="userdataid"
:placeholder="linkUserDataParams.userdataid.description" :placeholder="linkUserDataParams.userdataid.description"
:loading="userdata.loading"> :loading="userdata.loading">
<a-select-option v-for="opt in userdata.opts" :key="opt.id"> <a-select-option v-for="opt in userdata.opts" :key="opt.id" :label="opt.name || opt.description">
{{ opt.name || opt.description }} {{ opt.name || opt.description }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -148,13 +148,14 @@
<tooltip-label :title="$t('label.userdatapolicy')" :tooltip="$t('label.userdatapolicy.tooltip')"/> <tooltip-label :title="$t('label.userdatapolicy')" :tooltip="$t('label.userdatapolicy.tooltip')"/>
</template> </template>
<a-select <a-select
showSearch
v-model:value="userdatapolicy" v-model:value="userdatapolicy"
:placeholder="linkUserDataParams.userdatapolicy.description" :placeholder="linkUserDataParams.userdatapolicy.description"
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" > }" >
<a-select-option v-for="opt in userdatapolicylist.opts" :key="opt.id"> <a-select-option v-for="opt in userdatapolicylist.opts" :key="opt.id" :label="opt.id || opt.description">
{{ opt.id || opt.description }} {{ opt.id || opt.description }}
</a-select-option> </a-select-option>
</a-select> </a-select>

36
ui/src/views/image/RegisterOrUploadTemplate.vue
View File

@ -44,7 +44,7 @@
<a-upload-dragger <a-upload-dragger
:multiple="false" :multiple="false"
:fileList="fileList" :fileList="fileList"
:remove="handleRemove" @remove="handleRemove"
:beforeUpload="beforeUpload" :beforeUpload="beforeUpload"
v-model:value="form.file"> v-model:value="form.file">
<p class="ant-upload-drag-icon"> <p class="ant-upload-drag-icon">
@ -128,9 +128,9 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" > }" >
<a-select-option v-for="(opt, optIndex) in hyperVisor.opts" :key="optIndex"> <a-select-option v-for="(opt, optIndex) in hyperVisor.opts" :key="optIndex" :label="opt.name || opt.description">
{{ opt.name || opt.description }} {{ opt.name || opt.description }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -145,9 +145,9 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" > }" >
<a-select-option v-for="opt in format.opts" :key="opt.id"> <a-select-option v-for="opt in format.opts" :key="opt.id" :label="opt.name || opt.description">
{{ opt.name || opt.description }} {{ opt.name || opt.description }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -191,9 +191,9 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" > }" >
<a-select-option v-for="opt in rootDisk.opts" :key="opt.id"> <a-select-option v-for="opt in rootDisk.opts" :key="opt.id" :label="opt.name || opt.description">
{{ opt.name || opt.description }} {{ opt.name || opt.description }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -206,10 +206,10 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" }"
:placeholder="$t('label.nicadaptertype')"> :placeholder="$t('label.nicadaptertype')">
<a-select-option v-for="opt in nicAdapterType.opts" :key="opt.id"> <a-select-option v-for="opt in nicAdapterType.opts" :key="opt.id" :label="opt.name || opt.description">
{{ opt.name || opt.description }} {{ opt.name || opt.description }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -226,10 +226,10 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" }"
:placeholder="$t('label.keyboard')"> :placeholder="$t('label.keyboard')">
<a-select-option v-for="opt in keyboardType.opts" :key="opt.id"> <a-select-option v-for="opt in keyboardType.opts" :key="opt.id" :label="opt.name || opt.description">
{{ opt.name || opt.description }} {{ opt.name || opt.description }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -243,12 +243,12 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" }"
v-model:value="form.ostypeid" v-model:value="form.ostypeid"
:loading="osTypes.loading" :loading="osTypes.loading"
:placeholder="apiParams.ostypeid.description"> :placeholder="apiParams.ostypeid.description">
<a-select-option v-for="opt in osTypes.opts" :key="opt.id"> <a-select-option v-for="opt in osTypes.opts" :key="opt.id" :label="opt.name || opt.description">
{{ opt.name || opt.description }} {{ opt.name || opt.description }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -263,12 +263,12 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children?.[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" }"
v-model:value="userdataid" v-model:value="userdataid"
:placeholder="linkUserDataParams.userdataid.description" :placeholder="linkUserDataParams.userdataid.description"
:loading="userdata.loading"> :loading="userdata.loading">
<a-select-option v-for="opt in userdata.opts" :key="opt.id"> <a-select-option v-for="opt in userdata.opts" :key="opt.id" :label="opt.name || opt.description">
{{ opt.name || opt.description }} {{ opt.name || opt.description }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -280,13 +280,14 @@
<tooltip-label :title="$t('label.userdatapolicy')" :tooltip="$t('label.userdatapolicy.tooltip')"/> <tooltip-label :title="$t('label.userdatapolicy')" :tooltip="$t('label.userdatapolicy.tooltip')"/>
</template> </template>
<a-select <a-select
showSearch
v-model:value="userdatapolicy" v-model:value="userdatapolicy"
:placeholder="linkUserDataParams.userdatapolicy.description" :placeholder="linkUserDataParams.userdatapolicy.description"
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" > }" >
<a-select-option v-for="opt in userdatapolicylist.opts" :key="opt.id"> <a-select-option v-for="opt in userdatapolicylist.opts" :key="opt.id" :label="opt.id || opt.description">
{{ opt.id || opt.description }} {{ opt.id || opt.description }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -453,7 +454,6 @@ export default {
ostypeid: [{ required: true, message: this.$t('message.error.select') }], ostypeid: [{ required: true, message: this.$t('message.error.select') }],
groupenabled: [{ type: 'array' }] groupenabled: [{ type: 'array' }]
}) })
console.log(this.form)
}, },
fetchData () { fetchData () {
this.fetchZone() this.fetchZone()

78
ui/src/views/image/TemplateZones.vue
View File

@ -35,20 +35,39 @@
:pagination="false" :pagination="false"
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
:rowKey="record => record.zoneid"> :rowKey="record => record.zoneid">
<template #zonename="{record}"> <template #bodyCell="{ column, record }">
<span v-if="fetchZoneIcon(record.zoneid)"> <template v-if="column.key === 'zonename'">
<resource-icon :image="zoneIcon" size="1x" style="margin-right: 5px"/> <span v-if="fetchZoneIcon(record.zoneid)">
</span> <resource-icon :image="zoneIcon" size="1x" style="margin-right: 5px"/>
<global-outlined v-else style="margin-right: 5px" /> </span>
<span> {{ record.zonename }} </span> <global-outlined v-else style="margin-right: 5px" />
</template> <span> {{ record.zonename }} </span>
<template #isready="{ record }"> </template>
<span v-if="record.isready">{{ $t('label.yes') }}</span> <template v-if="column.key === 'isready'">
<span v-else>{{ $t('label.no') }}</span> <span v-if="record.isready">{{ $t('label.yes') }}</span>
<span v-else>{{ $t('label.no') }}</span>
</template>
<template v-if="column.key === 'actions'">
<tooltip-button
style="margin-right: 5px"
:disabled="!('copyTemplate' in $store.getters.apis && record.isready)"
:title="$t('label.action.copy.template')"
icon="copy-outlined"
:loading="copyLoading"
@onClick="showCopyTemplate(record)" />
<tooltip-button
style="margin-right: 5px"
:disabled="!('deleteTemplate' in $store.getters.apis)"
:title="$t('label.action.delete.template')"
type="primary"
:danger="true"
icon="delete-outlined"
@onClick="onShowDeleteModal(record)"/>
</template>
</template> </template>
<template #expandedRowRender="{ record }"> <template #expandedRowRender="{ record }">
<a-table <a-table
style="marginLeft: -50px; marginTop: 10px; marginBottom: 10px" style="margin: 10px 0;"
:columns="innerColumns" :columns="innerColumns"
:data-source="record.downloaddetails" :data-source="record.downloaddetails"
:pagination="false" :pagination="false"
@ -56,23 +75,6 @@
:rowKey="record => record.zoneid"> :rowKey="record => record.zoneid">
</a-table> </a-table>
</template> </template>
<template #action="{ record }">
<tooltip-button
style="margin-right: 5px"
:disabled="!('copyTemplate' in $store.getters.apis && record.isready)"
:title="$t('label.action.copy.template')"
icon="copy-outlined"
:loading="copyLoading"
@onClick="showCopyTemplate(record)" />
<tooltip-button
style="margin-right: 5px"
:disabled="!('deleteTemplate' in $store.getters.apis)"
:title="$t('label.action.delete.template')"
type="primary"
:danger="true"
icon="delete-outlined"
@onClick="onShowDeleteModal(record)"/>
</template>
</a-table> </a-table>
<a-pagination <a-pagination
class="row-element" class="row-element"
@ -171,12 +173,12 @@
size="middle" size="middle"
:columns="selectedColumns" :columns="selectedColumns"
:dataSource="selectedItems" :dataSource="selectedItems"
:rowKey="(record, idx) => record.zoneid || record.name" :rowKey="record => record.zoneid || record.name"
:pagination="true" :pagination="true"
style="overflow-y: auto"> style="overflow-y: auto">
</a-table> </a-table>
<a-spin :spinning="deleteLoading"> <a-spin :spinning="deleteLoading">
<a-form-item :label="$t('label.isforced')" style="margin-bottom: 0;"> <a-form-item ref="forcedDelete" name="forcedDelete" :label="$t('label.isforced')" style="margin-bottom: 0;">
<a-switch v-model:checked="forcedDelete" v-focus="true"></a-switch> <a-switch v-model:checked="forcedDelete" v-focus="true"></a-switch>
</a-form-item> </a-form-item>
<div :span="24" class="action-button"> <div :span="24" class="action-button">
@ -260,18 +262,18 @@ export default {
created () { created () {
this.columns = [ this.columns = [
{ {
key: 'zonename',
title: this.$t('label.zonename'), title: this.$t('label.zonename'),
dataIndex: 'zonename', dataIndex: 'zonename'
slots: { customRender: 'zonename' }
}, },
{ {
title: this.$t('label.status'), title: this.$t('label.status'),
dataIndex: 'status' dataIndex: 'status'
}, },
{ {
key: 'isready',
title: this.$t('label.isready'), title: this.$t('label.isready'),
dataIndex: 'isready', dataIndex: 'isready'
slots: { customRender: 'isready' }
} }
] ]
this.innerColumns = [ this.innerColumns = [
@ -290,10 +292,10 @@ export default {
] ]
if (this.isActionPermitted()) { if (this.isActionPermitted()) {
this.columns.push({ this.columns.push({
key: 'actions',
title: '', title: '',
dataIndex: 'action', dataIndex: 'actions',
width: 100, width: 100
slots: { customRender: 'action' }
}) })
} }
@ -422,9 +424,9 @@ export default {
deleteTemplates (e) { deleteTemplates (e) {
this.showConfirmationAction = false this.showConfirmationAction = false
this.selectedColumns.splice(0, 0, { this.selectedColumns.splice(0, 0, {
key: 'status',
dataIndex: 'status', dataIndex: 'status',
title: this.$t('label.operation.status'), title: this.$t('label.operation.status'),
slots: { customRender: 'status' },
filters: [ filters: [
{ text: 'In Progress', value: 'InProgress' }, { text: 'In Progress', value: 'InProgress' },
{ text: 'Success', value: 'success' }, { text: 'Success', value: 'success' },

19
ui/src/views/image/UpdateISO.vue
View File

@ -48,12 +48,15 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" }"
v-model:value="form.ostypeid" v-model:value="form.ostypeid"
:loading="osTypes.loading" :loading="osTypes.loading"
:placeholder="apiParams.ostypeid.description"> :placeholder="apiParams.ostypeid.description">
<a-select-option v-for="opt in osTypes.opts" :key="opt.id"> <a-select-option
v-for="opt in osTypes.opts"
:key="opt.id"
:label="opt.name || opt.description">
{{ opt.name || opt.description }} {{ opt.name || opt.description }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -69,12 +72,12 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children?.[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" }"
v-model:value="userdataid" v-model:value="userdataid"
:placeholder="linkUserDataParams.userdataid.description" :placeholder="linkUserDataParams.userdataid.description"
:loading="userdata.loading"> :loading="userdata.loading">
<a-select-option v-for="opt in userdata.opts" :key="opt.id"> <a-select-option v-for="opt in userdata.opts" :key="opt.id" :label="opt.name || opt.description">
{{ opt.name || opt.description }} {{ opt.name || opt.description }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -86,13 +89,17 @@
<tooltip-label :title="$t('label.userdatapolicy')" :tooltip="$t('label.userdatapolicy.tooltip')"/> <tooltip-label :title="$t('label.userdatapolicy')" :tooltip="$t('label.userdatapolicy.tooltip')"/>
</template> </template>
<a-select <a-select
showSearch
v-model:value="userdatapolicy" v-model:value="userdatapolicy"
:placeholder="linkUserDataParams.userdatapolicy.description" :placeholder="linkUserDataParams.userdatapolicy.description"
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" > }" >
<a-select-option v-for="opt in userdatapolicylist.opts" :key="opt.id"> <a-select-option
v-for="opt in userdatapolicylist.opts"
:key="opt.id"
:label="opt.name || opt.description">
{{ opt.id || opt.description }} {{ opt.id || opt.description }}
</a-select-option> </a-select-option>
</a-select> </a-select>

4
ui/src/views/image/UpdateKubernetesSupportedVersion.vue
View File

@ -30,12 +30,12 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" }"
:loading="stateLoading" :loading="stateLoading"
:placeholder="apiParams.state.description" :placeholder="apiParams.state.description"
v-focus="true" > v-focus="true" >
<a-select-option v-for="(opt, optIndex) in states" :key="optIndex"> <a-select-option v-for="(opt, optIndex) in states" :key="optIndex" :label="opt.name || opt.description">
{{ opt.name || opt.description }} {{ opt.name || opt.description }}
</a-select-option> </a-select-option>
</a-select> </a-select>

17
ui/src/views/image/UpdateTemplate.vue
View File

@ -92,12 +92,12 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" }"
v-model:value="form.ostypeid" v-model:value="form.ostypeid"
:loading="osTypes.loading" :loading="osTypes.loading"
:placeholder="apiParams.ostypeid.description"> :placeholder="apiParams.ostypeid.description">
<a-select-option v-for="opt in osTypes.opts" :key="opt.id"> <a-select-option v-for="opt in osTypes.opts" :key="opt.id" :label="opt.name || opt.description">
{{ opt.name || opt.description }} {{ opt.name || opt.description }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -114,12 +114,12 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children?.[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" }"
v-model:value="userdataid" v-model:value="userdataid"
:placeholder="linkUserDataParams.userdataid.description" :placeholder="linkUserDataParams.userdataid.description"
:loading="userdata.loading"> :loading="userdata.loading">
<a-select-option v-for="opt in userdata.opts" :key="opt.id"> <a-select-option v-for="opt in userdata.opts" :key="opt.id" :label="opt.name || opt.description">
{{ opt.name || opt.description }} {{ opt.name || opt.description }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -131,13 +131,14 @@
<tooltip-label :title="$t('label.userdatapolicy')" :tooltip="$t('label.userdatapolicy.tooltip')"/> <tooltip-label :title="$t('label.userdatapolicy')" :tooltip="$t('label.userdatapolicy.tooltip')"/>
</template> </template>
<a-select <a-select
showSearch
v-model:value="userdatapolicy" v-model:value="userdatapolicy"
:placeholder="linkUserDataParams.userdatapolicy.description" :placeholder="linkUserDataParams.userdatapolicy.description"
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" > }" >
<a-select-option v-for="opt in userdatapolicylist.opts" :key="opt.id"> <a-select-option v-for="opt in userdatapolicylist.opts" :key="opt.id" :label="opt.id || opt.description">
{{ opt.id || opt.description }} {{ opt.id || opt.description }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -164,9 +165,9 @@
</span> </span>
<a-select <a-select
showSearch showSearch
optionFilterProp="label" optionFilterProp="value"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" }"
v-model:value="form.templatetype" v-model:value="form.templatetype"
:placeholder="apiParams.templatetype.description" :placeholder="apiParams.templatetype.description"

8
ui/src/views/image/UpdateTemplateIsoPermissions.vue
View File

@ -29,9 +29,9 @@
@change="fetchData" @change="fetchData"
v-focus="true" v-focus="true"
showSearch showSearch
optionFilterProp="label" optionFilterProp="value"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" > }" >
<a-select-option :value="$t('label.add')">{{ $t('label.add') }}</a-select-option> <a-select-option :value="$t('label.add')">{{ $t('label.add') }}</a-select-option>
<a-select-option :value="$t('label.remove')">{{ $t('label.remove') }}</a-select-option> <a-select-option :value="$t('label.remove')">{{ $t('label.remove') }}</a-select-option>
@ -50,9 +50,9 @@
:defaultValue="$t('label.account')" :defaultValue="$t('label.account')"
@change="fetchData" @change="fetchData"
showSearch showSearch
optionFilterProp="label" optionFilterProp="value"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"> }">
<a-select-option :value="$t('label.account')">{{ $t('label.account') }}</a-select-option> <a-select-option :value="$t('label.account')">{{ $t('label.account') }}</a-select-option>
<a-select-option :value="$t('label.project')">{{ $t('label.project') }}</a-select-option> <a-select-option :value="$t('label.project')">{{ $t('label.project') }}</a-select-option>

30
ui/src/views/infra/AddPrimaryStorage.vue
View File

@ -35,11 +35,11 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" }"
:placeholder="apiParams.scope.description" > :placeholder="apiParams.scope.description" >
<a-select-option :value="'cluster'"> {{ $t('label.clusterid') }} </a-select-option> <a-select-option :value="'cluster'" :label="$t('label.clusterid')"> {{ $t('label.clusterid') }} </a-select-option>
<a-select-option :value="'zone'"> {{ $t('label.zoneid') }} </a-select-option> <a-select-option :value="'zone'" :label="$t('label.zoneid')"> {{ $t('label.zoneid') }} </a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
<div v-if="form.scope === 'zone'"> <div v-if="form.scope === 'zone'">
@ -50,9 +50,9 @@
<a-select <a-select
v-model:value="form.hypervisor" v-model:value="form.hypervisor"
showSearch showSearch
optionFilterProp="label" optionFilterProp="value"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" }"
:placeholder="apiParams.hypervisor.description" > :placeholder="apiParams.hypervisor.description" >
<a-select-option :value="hypervisor" v-for="(hypervisor, idx) in hypervisors" :key="idx"> <a-select-option :value="hypervisor" v-for="(hypervisor, idx) in hypervisors" :key="idx">
@ -93,10 +93,10 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" }"
:placeholder="apiParams.podid.description"> :placeholder="apiParams.podid.description">
<a-select-option :value="pod.id" v-for="(pod) in pods" :key="pod.id"> <a-select-option :value="pod.id" v-for="(pod) in pods" :key="pod.id" :label="pod.name">
{{ pod.name }} {{ pod.name }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -111,10 +111,10 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" }"
:placeholder="apiParams.clusterid.description"> :placeholder="apiParams.clusterid.description">
<a-select-option :value="cluster.id" v-for="cluster in clusters" :key="cluster.id"> <a-select-option :value="cluster.id" v-for="cluster in clusters" :key="cluster.id" :label="cluster.name">
{{ cluster.name }} {{ cluster.name }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -127,9 +127,9 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" > }" >
<a-select-option :value="host.id" v-for="host in hosts" :key="host.id"> <a-select-option :value="host.id" v-for="host in hosts" :key="host.id" :label="host.name">
{{ host.name }} {{ host.name }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -148,9 +148,9 @@
<a-select <a-select
v-model:value="form.protocol" v-model:value="form.protocol"
showSearch showSearch
optionFilterProp="label" optionFilterProp="value"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" }"
:placeholder="apiParams.clusterid.description"> :placeholder="apiParams.clusterid.description">
<a-select-option :value="protocol" v-for="(protocol,idx) in protocols" :key="idx"> <a-select-option :value="protocol" v-for="(protocol,idx) in protocols" :key="idx">
@ -218,9 +218,9 @@
v-model:value="form.provider" v-model:value="form.provider"
@change="updateProviderAndProtocol" @change="updateProviderAndProtocol"
showSearch showSearch
optionFilterProp="label" optionFilterProp="value"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" }"
:placeholder="apiParams.provider.description"> :placeholder="apiParams.provider.description">
<a-select-option :value="provider" v-for="(provider,idx) in providers" :key="idx"> <a-select-option :value="provider" v-for="(provider,idx) in providers" :key="idx">

4
ui/src/views/infra/AddSecondaryStorage.vue
View File

@ -33,9 +33,9 @@
v-model:value="form.provider" v-model:value="form.provider"
@change="val => { form.provider = val }" @change="val => { form.provider = val }"
showSearch showSearch
optionFilterProp="label" optionFilterProp="value"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" > }" >
<a-select-option <a-select-option
:value="prov" :value="prov"

9
ui/src/views/infra/ClusterAdd.vue
View File

@ -49,9 +49,9 @@
v-model:value="hypervisor" v-model:value="hypervisor"
@change="resetAllFields" @change="resetAllFields"
showSearch showSearch
optionFilterProp="label" optionFilterProp="value"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" > }" >
<a-select-option <a-select-option
v-for="hv in hypervisorsList" v-for="hv in hypervisorsList"
@ -69,12 +69,13 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" > }" >
<a-select-option <a-select-option
v-for="pod in podsList" v-for="pod in podsList"
:value="pod.id" :value="pod.id"
:key="pod.id"> :key="pod.id"
:label="pod.name">
{{ pod.name }} {{ pod.name }}
</a-select-option> </a-select-option>
</a-select> </a-select>

14
ui/src/views/infra/HostAdd.vue
View File

@ -62,13 +62,14 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" }"
@change="fetchClusters"> @change="fetchClusters">
<a-select-option <a-select-option
v-for="pod in podsList" v-for="pod in podsList"
:value="pod.id" :value="pod.id"
:key="pod.id"> :key="pod.id"
:label="pod.name">
{{ pod.name }} {{ pod.name }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -83,13 +84,14 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" }"
@change="handleChangeCluster"> @change="handleChangeCluster">
<a-select-option <a-select-option
v-for="cluster in clustersList" v-for="cluster in clustersList"
:value="cluster.id" :value="cluster.id"
:key="cluster.id"> :key="cluster.id"
:label="cluster.name">
{{ cluster.name }} {{ cluster.name }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -206,9 +208,9 @@
<a-select <a-select
mode="tags" mode="tags"
showSearch showSearch
optionFilterProp="label" optionFilterProp="value"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" }"
v-model:value="form.hosttags" v-model:value="form.hosttags"
:placeholder="placeholder.hosttags"> :placeholder="placeholder.hosttags">

16
ui/src/views/infra/MigrateData.vue
View File

@ -37,11 +37,12 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" > }" >
<a-select-option <a-select-option
v-for="store in imageStores" v-for="store in imageStores"
:key="store.id"> {{ store.name || opt.url }} :key="store.id"
:label="store.name || opt.url"> {{ store.name || opt.url }}
</a-select-option> </a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
@ -56,11 +57,12 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" > }" >
<a-select-option <a-select-option
v-for="store in destStores" v-for="store in destStores"
:key="store.id"> {{ store.name || opt.url }} :key="store.id"
:label="store.name || opt.url"> {{ store.name || opt.url }}
</a-select-option> </a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
@ -71,10 +73,10 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" > }" >
<a-select-option value="Complete">{{ $t('label.complete') }}</a-select-option> <a-select-option value="Complete" :label="$t('label.complete')">{{ $t('label.complete') }}</a-select-option>
<a-select-option value="Balance">{{ $t('label.balance') }}</a-select-option> <a-select-option value="Balance" :label="$t('label.balance')">{{ $t('label.balance') }}</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
<div :span="24" class="action-button"> <div :span="24" class="action-button">

44
ui/src/views/infra/network/DedicatedVLANTab.vue
View File

@ -33,21 +33,23 @@
:dataSource="items" :dataSource="items"
:pagination="false" :pagination="false"
:rowKey="record => record.id"> :rowKey="record => record.id">
<template #actions="{record}"> <template #bodyCell="{ column, record }">
<a-popconfirm <template v-if="column.key === 'actions'">
:title="`${$t('label.delete')}?`" <a-popconfirm
@confirm="handleDelete(record)" :title="`${$t('label.delete')}?`"
:okText="$t('label.yes')" @confirm="handleDelete(record)"
:cancelText="$t('label.no')" :okText="$t('label.yes')"
placement="top" :cancelText="$t('label.no')"
> placement="top"
<tooltip-button >
:tooltip="$t('label.delete')" <tooltip-button
:disabled="!('releaseDedicatedGuestVlanRange' in $store.getters.apis)" :tooltip="$t('label.delete')"
icon="delete-outlined" :disabled="!('releaseDedicatedGuestVlanRange' in $store.getters.apis)"
type="primary" icon="delete-outlined"
:danger="true" /> type="primary"
</a-popconfirm> :danger="true" />
</a-popconfirm>
</template>
</template> </template>
</a-table> </a-table>
<a-pagination <a-pagination
@ -91,10 +93,10 @@
showSearch showSearch
optionFilterProp="label" optionFilterProp="label"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" > }" >
<a-select-option value="account">{{ $t('label.account') }}</a-select-option> <a-select-option value="account" :label="$t('label.account')">{{ $t('label.account') }}</a-select-option>
<a-select-option value="project">{{ $t('label.project') }}</a-select-option> <a-select-option value="project" :label="$t('label.project')">{{ $t('label.project') }}</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
@ -121,7 +123,7 @@
<a-select <a-select
v-model:value="form.account" v-model:value="form.account"
showSearch showSearch
optionFilterProp="label" optionFilterProp="value"
:filterOption="(input, option) => { :filterOption="(input, option) => {
return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" > }" >
@ -219,8 +221,8 @@ export default {
dataIndex: 'account' dataIndex: 'account'
}, },
{ {
title: this.$t('label.action'), key: 'actions',
slots: { customRender: 'actions' } title: this.$t('label.actions')
} }
] ]
} }

Some files were not shown because too many files have changed in this diff Show More