@@ -197,9 +198,9 @@ export default {
var columns = []
for (const col of this.columns) {
columns.push({
+ key: col,
dataIndex: col,
- title: this.$t('label.' + col),
- slots: { customRender: col }
+ title: this.$t('label.' + col)
})
}
return columns
diff --git a/ui/src/components/view/ListView.vue b/ui/src/components/view/ListView.vue
index 7ccb028f986..a9163ce63cd 100644
--- a/ui/src/components/view/ListView.vue
+++ b/ui/src/components/view/ListView.vue
@@ -23,11 +23,11 @@
:dataSource="items"
:rowKey="(record, idx) => record.id || record.name || record.usageType || idx + '-' + Math.random()"
: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"
style="overflow-y: auto"
>
-
+
-
-
- {{ `Selected ${selectedRowKeys.length} items` }}
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ text }}
+
+
+ {{ text }}
+
+ {{ text }}
+
+ {{ $t(text.toLowerCase()) }}
+ {{ $t(text.toLowerCase()) }}
+
+
+ {{ $t(text.toLowerCase()) }}
+ {{ $t(text.toLowerCase()) }}
+
+
+ {{ $t(text.toLowerCase()) }}
+ {{ $t(text.toLowerCase()) }}
+ {{ $t(text.toLowerCase()) }}
+
+
+ {{ text }}
+ {{ text }}
+
+
+
+
+ {{ text }}
+
+
+ {{ $t(text.toLowerCase()) }}
+ {{ text }}
+
+
-
-
-
+ {{ text }}
+
+
-
-
-
+
-
-
+ {{ text }}
+ {{ text }}
+ {{ text }}
+
+
+ {{ record.entityname }}
+
+
+ {{ generateHumanReadableEntityType(record) }}
+
+
+
+
+
+
+ {{ text }}
+ {{ text }}
+
+
+ source-nat
-
-
-
- {{ text }}
-
-
- {{ text }}
+
+
+ static-nat
- {{ text }}
- {{ text }}
-
- {{ $t(text.toLowerCase()) }}
- {{ $t(text.toLowerCase()) }}
-
-
- {{ $t(text.toLowerCase()) }}
- {{ $t(text.toLowerCase()) }}
-
-
- {{ $t(text.toLowerCase()) }}
- {{ $t(text.toLowerCase()) }}
- {{ $t(text.toLowerCase()) }}
-
-
- {{ text }}
- {{ text }}
-
-
-
-
- {{ text }}
-
-
- {{ $t(text.toLowerCase()) }}
- {{ text }}
-
-
-
- {{ text }}
-
-
-
-
-
-
- {{ text }}
- {{ text }}
- {{ text }}
-
-
- {{ record.entityname }}
-
-
- {{ generateHumanReadableEntityType(record) }}
-
-
-
-
-
-
- {{ text }}
- {{ text }}
-
-
- source-nat
-
-
-
- static-nat
-
-
-
- {{ ipV6Address(text, record) }}
-
-
- {{ text }}
- {{ text }}
-
-
- {{ text }}
-
-
- {{ text }}
-
-
- {{ text }}
-
-
-
+
+
+ {{ ipV6Address(text, record) }}
+
+
+ {{ text }}
+ {{ text }}
+
+
+ {{ text }}
+
+
+ {{ text }}
+
+
+ {{ text }}
+
+
+
{{ text }}
-
- {{ text }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ text }}
-
-
-
- {{ text }}
-
-
- {{ text }}
-
-
- {{ text }}
-
-
- {{ text }}
- {{ text }}
- {{ text }}
-
-
- {{ text }}
- {{ text }}
-
-
-
-
-
- {{ text }}
-
- {{ text }}
-
-
- {{ text }}
-
-
-
-
-
- {{ text }}
-
-
-
- {{ text }}
-
-
- {{ text }}
-
-
-
-
-
-
- {{ item.account + '(' + item.user + ')' }}
- {{ item.account }}
+ {{ text }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ text }}
+
+
+
+ {{ text }}
+
+
+ {{ text }}
+
+
+ {{ text }}
+
+
+ {{ text }}
+ {{ text }}
+ {{ text }}
+
+
+ {{ text }}
+ {{ text }}
+
+
+
+
+
+ {{ text }}
+
+
+ {{ text }}
+
+
+ {{ text }}
- {{ item.user ? item.account + '(' + item.user + ')' : item.account }}
-
- {{ text }}
- {{ text }}
- {{ text }}
+
+
+ {{ text }}
+
+
+
+ {{ text }}
+
+
+ {{ text }}
+
+
+
+
+
+
+ {{ item.account + '(' + item.user + ')' }}
+ {{ item.account }}
+
+ {{ item.user ? item.account + '(' + item.user + ')' : item.account }}
+
+
+
+
+ {{ text }}
+ {{ text }}
+ {{ text }}
+ {{ text }}
+
+
+
+
+
+
+ {{ text }}
{{ text }}
-
-
-
-
-
- {{ text }}
- {{ text }}
-
-
- {{ text }}
- {{ text }}
-
-
- {{ text }}
- {{ text }}
-
-
- {{ text }}
- {{ text }}
-
-
- {{ text }}
- {{ text }}
-
-
- {{ record.version }}
-
-
- {{ record.softwareversion ? record.softwareversion : 'N/A' }}
-
-
-
-
-
-
- {{ record.requiresupgrade ? 'Yes' : 'No' }}
-
-
- {{ record.loadbalancerrule }}
-
-
-
- {{ record.autoscalingenabled ? 'Enabled' : 'Disabled' }}
-
-
-
-
-
- {{ $toLocaleDate(text) }}
-
-
- {{ $toLocaleDate(text) }}
-
-
-
-
- {{ $t('label.move.to.top') }}
-
-
-
-
-
- {{ $t('label.move.to.bottom') }}
-
-
-
-
-
- {{ $t('label.move.up.row') }}
-
-
-
-
-
- {{ $t('label.move.down.row') }}
-
-
-
-
-
+
+ {{ $t('label.move.to.top') }}
+
+
+
+
+
+ {{ $t('label.move.to.bottom') }}
+
+
+
+
+
+ {{ $t('label.move.up.row') }}
+
+
+
+
+
+ {{ $t('label.move.down.row') }}
+
+
+
+
+
- {{ text }}
-
+
+
+
+
+ {{ text }}
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
+
+
+ {{ `Selected ${selectedRowKeys.length} items` }}
+
diff --git a/ui/src/components/view/NicNetworkSelectForm.vue b/ui/src/components/view/NicNetworkSelectForm.vue
index f19b1517fb7..d54f775d38f 100644
--- a/ui/src/components/view/NicNetworkSelectForm.vue
+++ b/ui/src/components/view/NicNetworkSelectForm.vue
@@ -33,11 +33,13 @@
:dataSource="networks"
:pagination="false"
:rowKey="record => record.id">
-
-
-
+
+
+
+
+
+ :label="$t(opt.path || opt.name)">
@@ -618,6 +618,7 @@ export default {
},
onClear () {
this.formRef.value.resetFields()
+ this.form = reactive({})
this.isFiltered = false
this.inputKey = null
this.inputValue = null
@@ -630,7 +631,6 @@ export default {
this.formRef.value.validate().then(() => {
const values = toRaw(this.form)
this.isFiltered = true
- console.log(values)
for (const key in values) {
const input = values[key]
if (input === '' || input === null || input === undefined) {
diff --git a/ui/src/components/view/StoragePoolSelectView.vue b/ui/src/components/view/StoragePoolSelectView.vue
index 1422ceaedcf..8f006ed737f 100644
--- a/ui/src/components/view/StoragePoolSelectView.vue
+++ b/ui/src/components/view/StoragePoolSelectView.vue
@@ -32,45 +32,49 @@
:dataSource="storagePools"
:pagination="false"
:rowKey="record => record.id">
-
- {{ $t('label.suitability') }}
-
-
-
+
+
+ {{ $t('label.suitability') }}
+
+
+
+
-
- {{ record.name }}
-
-
-
-
-
-
-
-
-
- {{ $bytesToHumanReadableSize(record.disksizetotal) }}
-
-
- {{ $bytesToHumanReadableSize(record.disksizeused) }}
-
-
- {{ $bytesToHumanReadableSize(record.disksizetotal * 1 - record.disksizeused * 1) }}
-
-
-
-
-
-
+
+
+ {{ record.name }}
+
+
+
+
+
+
+
+
+
+ {{ $bytesToHumanReadableSize(record.disksizetotal) }}
+
+
+ {{ $bytesToHumanReadableSize(record.disksizeused) }}
+
+
+ {{ $bytesToHumanReadableSize(record.disksizetotal * 1 - record.disksizeused * 1) }}
+
+
+
+
+
+
+
-
-
+
+
+
@@ -136,6 +137,10 @@ export default {
default () {
return {}
}
+ },
+ treeDeletedKey: {
+ type: String,
+ default: null
}
},
provide: function () {
@@ -183,11 +188,11 @@ export default {
this.treeViewData = []
this.arrExpand = []
if (!this.loading) {
- this.treeViewData = this.treeData
- this.treeVerticalData = this.treeData
+ this.treeViewData = this.treeData.slice()
+ this.treeVerticalData = this.treeData.slice()
if (this.treeViewData.length > 0) {
- this.oldTreeViewData = this.treeViewData
+ this.oldTreeViewData = this.treeViewData.slice()
this.rootKey = this.treeViewData[0].key
}
}
@@ -288,39 +293,47 @@ export default {
}
}
- this.onSelectResource()
+ this.handleSelectResource(treeNode.eventKey)
resolve()
})
})
},
- onSelectResource () {
- if (this.treeStore.selected) {
- this.selectedTreeKey = this.treeStore.selected
- this.defaultSelected = [this.selectedTreeKey]
+ async handleSelectResource (treeKey) {
+ if (this.treeDeletedKey && this.treeDeletedKey === this.treeStore?.treeSelected?.key) {
+ const treeSelectedKey = this.treeStore.treeSelected.parentdomainid
+ if (treeSelectedKey === this.rootKey) {
+ this.resource = this.treeVerticalData[0]
- const resource = this.treeVerticalData.filter(item => item.id === this.selectedTreeKey)
- if (resource.length > 0) {
- this.resource = resource[0]
+ this.selectedTreeKey = treeSelectedKey
+ this.defaultSelected = [treeSelectedKey]
this.$emit('change-resource', this.resource)
- } else {
- const resourceIdx = this.treeVerticalData.findIndex(item => item.id === this.resource.id)
- const parentIndex = this.treeVerticalData.findIndex(item => item.id === this.resource.parentdomainid)
- if (resourceIdx !== -1) {
- this.resource = this.treeVerticalData[resourceIdx]
- } else if (parentIndex !== 1) {
- this.resource = this.treeVerticalData[parentIndex]
- } else {
- this.resource = this.treeVerticalData[0]
- }
- this.selectedTreeKey = this.resource.key
- this.defaultSelected = [this.selectedTreeKey]
+ await this.setTreeStore(false, false, this.resource)
+ return
+ }
+ const resourceIndex = await this.treeVerticalData.findIndex(item => item.id === treeSelectedKey)
+ if (resourceIndex > -1) {
+ const resource = await this.getDetailResource(treeSelectedKey)
+ this.resource = await this.createResourceData(resource)
+
+ this.selectedTreeKey = treeSelectedKey
+ this.defaultSelected = [treeSelectedKey]
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) {
- setTimeout(() => { event.node.$refs.selectHandle.click() })
return
}
@@ -331,20 +344,20 @@ export default {
this.defaultSelected = []
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
- treeStore.expands = this.arrExpand
- treeStore.selected = this.selectedTreeKey
- this.$emit('change-tree-store', this.treeStore)
-
- this.getDetailResource(this.selectedTreeKey)
+ this.$emit('change-resource', this.resource)
+ await this.setTreeStore(false, false, this.resource)
},
onExpand (treeExpand) {
const treeStore = this.treeStore
this.arrExpand = treeExpand
treeStore.isExpand = true
treeStore.expands = this.arrExpand
- treeStore.selected = this.selectedTreeKey
+ treeStore.treeSelected = this.resource
this.$emit('change-tree-store', treeStore)
},
onSearch (value) {
@@ -416,40 +429,35 @@ export default {
onTabChange (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) {
- // set api name and parameter
- const apiName = this.$route.meta.permission[0]
- const params = {}
+ return new Promise(resolve => {
+ // set api name and parameter
+ const apiName = this.$route.meta.permission[0]
+ const params = {}
- // set id to parameter
- params.id = selectedKey
- params.listAll = true
- params.showicon = true
- params.page = 1
- params.pageSize = 1
+ // set id to parameter
+ params.id = selectedKey
+ params.listAll = true
+ params.showicon = true
+ params.page = 1
+ params.pageSize = 1
- this.detailLoading = true
- api(apiName, params).then(json => {
- const jsonResponse = this.getResponseJsonData(json)
-
- // check json response is empty
- if (!jsonResponse || jsonResponse.length === 0) {
- this.resource = []
- } else {
- 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
+ this.detailLoading = true
+ api(apiName, params).then(json => {
+ const jsonResponse = this.getResponseJsonData(json)
+ resolve(jsonResponse[0])
+ }).catch(() => {
+ resolve()
+ }).finally(() => {
+ this.detailLoading = false
+ })
})
},
getResponseJsonData (json) {
@@ -524,15 +532,13 @@ export default {
})
resource.title = resource.name
resource.key = resource.id
- resource.slots = {
- icon: 'parent'
+ if (resource?.icon) {
+ resource.resourceIcon = resource.icon
+ delete resource.icon
}
if (!resource.haschild) {
resource.isLeaf = true
- resource.slots = {
- icon: 'leaf'
- }
}
return resource
@@ -586,8 +592,9 @@ export default {
diff --git a/ui/src/components/view/VolumesTab.vue b/ui/src/components/view/VolumesTab.vue
index 939f708a7f8..e9165b1b3bd 100644
--- a/ui/src/components/view/VolumesTab.vue
+++ b/ui/src/components/view/VolumesTab.vue
@@ -24,20 +24,22 @@
:rowKey="item => item.id"
:pagination="false"
>
-
-
-
- {{ text }}
-
-
- {{ record.provisioningtype }}
-
-
-
- {{ text }}
-
-
- {{ parseFloat(record.size / (1024.0 * 1024.0 * 1024.0)).toFixed(2) }} GB
+
+
+
+
+ {{ text }}
+
+
+ {{ record.provisioningtype }}
+
+
+
+ {{ text }}
+
+
+ {{ parseFloat(record.size / (1024.0 * 1024.0 * 1024.0)).toFixed(2) }} GB
+
@@ -68,23 +70,23 @@ export default {
volumes: [],
volumeColumns: [
{
+ key: 'name',
title: this.$t('label.name'),
- dataIndex: 'name',
- slots: { customRender: 'name' }
+ dataIndex: 'name'
},
{
+ key: 'state',
title: this.$t('label.state'),
- dataIndex: 'state',
- slots: { customRender: 'state' }
+ dataIndex: 'state'
},
{
title: this.$t('label.type'),
dataIndex: 'type'
},
{
+ key: 'size',
title: this.$t('label.size'),
- dataIndex: 'size',
- slots: { customRender: 'size' }
+ dataIndex: 'size'
}
]
}
@@ -92,7 +94,6 @@ export default {
created () {
this.vm = this.resource
this.fetchData()
- console.log(this.resource.volumes)
},
watch: {
resource: function (newItem) {
diff --git a/ui/src/components/widgets/Status.vue b/ui/src/components/widgets/Status.vue
index 62438820314..6575d409a3c 100644
--- a/ui/src/components/widgets/Status.vue
+++ b/ui/src/components/widgets/Status.vue
@@ -16,14 +16,16 @@
// under the License.
-
-
-
+