Skip to content

Commit 3c25a35

Browse files
davidjumaniutchoang
davidjumani
and
utchoang
authored
ui: AntD3 upgrade (apache#7306)
Continuation of apache#6369 This PR for Fixes apache#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>
1 parent e6f737f commit 3c25a35

184 files changed

Lines changed: 6156 additions & 5611 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎ui/package-lock.json‎

Lines changed: 2538 additions & 2374 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎ui/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,8 @@
3838
"@fortawesome/free-brands-svg-icons": "^5.15.2",
3939
"@fortawesome/free-solid-svg-icons": "^5.15.2",
4040
"@fortawesome/vue-fontawesome": "^3.0.0-4",
41-
"ant-design-vue": "^2.2.3",
41+
"ant-design-vue": "^3.2.9",
42+
"antd": "^4.21.4",
4243
"antd-theme-webpack-plugin": "^1.3.9",
4344
"axios": "^0.21.1",
4445
"babel-plugin-require-context-hook": "^1.0.0",

‎ui/src/components/CheckBoxSelectPair.vue‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,13 +34,14 @@
3434
showSearch
3535
optionFilterProp="label"
3636
:filterOption="(input, option) => {
37-
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
37+
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
3838
}"
3939
@change="val => { handleSelectChange(val) }">
4040
<a-select-option
4141
v-for="(opt) in selectSource"
4242
:key="opt.id"
43-
:disabled="opt.enabled === false">
43+
:disabled="opt.enabled === false"
44+
:label="opt.displaytext || opt.name || opt.description">
4445
{{ opt.displaytext || opt.name || opt.description }}
4546
</a-select-option>
4647
</a-select>

‎ui/src/components/header/SamlDomainSwitcher.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
showSearch
2626
optionFilterProp="label"
2727
:filterOption="(input, option) => {
28-
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
28+
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
2929
}"
3030
@change="changeAccount"
3131
@focus="fetchData" >
@@ -42,7 +42,7 @@
4242
</a-tooltip>
4343
</template>
4444

45-
<a-select-option v-for="(account, index) in samlAccounts" :key="index">
45+
<a-select-option v-for="(account, index) in samlAccounts" :key="index" :label="`${account.accountName} (${account.domainName})`">
4646
{{ `${account.accountName} (${account.domainName})` }}
4747
</a-select-option>
4848
</a-select>

‎ui/src/components/header/UserMenu.vue‎

Lines changed: 34 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -38,33 +38,25 @@
3838
<span>{{ nickname() }}</span>
3939
</span>
4040
<template #overlay>
41-
<a-menu class="user-menu-wrapper">
42-
<router-link :to="{ path: '/accountuser/' + $store.getters.userInfo.id }">
43-
<a-menu-item class="user-menu-item" key="0">
44-
<UserOutlined class="user-menu-item-icon" />
45-
<span class="user-menu-item-name">{{ $t('label.profilename') }}</span>
46-
</a-menu-item>
47-
</router-link>
48-
<a @click="toggleUseBrowserTimezone">
49-
<a-menu-item class="user-menu-item" key="1">
50-
<ClockCircleOutlined class="user-menu-item-icon" />
51-
<span class="user-menu-item-name" style="margin-right: 5px">{{ $t('label.use.local.timezone') }}</span>
52-
<a-switch :checked="$store.getters.usebrowsertimezone" />
53-
</a-menu-item>
54-
</a>
55-
<a :href="$config.docBase" target="_blank">
56-
<a-menu-item class="user-menu-item" key="2">
57-
<QuestionCircleOutlined class="user-menu-item-icon" />
58-
<span class="user-menu-item-name">{{ $t('label.help') }}</span>
59-
</a-menu-item>
60-
</a>
41+
<a-menu class="user-menu-wrapper" @click="handleClickMenu">
42+
<a-menu-item class="user-menu-item" key="profile">
43+
<UserOutlined class="user-menu-item-icon" />
44+
<span class="user-menu-item-name">{{ $t('label.profilename') }}</span>
45+
</a-menu-item>
46+
<a-menu-item class="user-menu-item" key="timezone">
47+
<ClockCircleOutlined class="user-menu-item-icon" />
48+
<span class="user-menu-item-name" style="margin-right: 5px">{{ $t('label.use.local.timezone') }}</span>
49+
<a-switch :checked="$store.getters.usebrowsertimezone" />
50+
</a-menu-item>
51+
<a-menu-item class="user-menu-item" key="document">
52+
<QuestionCircleOutlined class="user-menu-item-icon" />
53+
<span class="user-menu-item-name">{{ $t('label.help') }}</span>
54+
</a-menu-item>
6155
<a-menu-divider/>
62-
<a href="javascript:;" @click="handleLogout">
63-
<a-menu-item class="user-menu-item" key="3">
64-
<LogoutOutlined class="user-menu-item-icon" />
65-
<span class="user-menu-item-name">{{ $t('label.logout') }}</span>
66-
</a-menu-item>
67-
</a>
56+
<a-menu-item class="user-menu-item" key="logout">
57+
<LogoutOutlined class="user-menu-item-icon" />
58+
<span class="user-menu-item-name">{{ $t('label.logout') }}</span>
59+
</a-menu-item>
6860
</a-menu>
6961
</template>
7062
</a-dropdown>
@@ -145,6 +137,22 @@ export default {
145137
})
146138
})
147139
},
140+
handleClickMenu (item) {
141+
switch (item.key) {
142+
case 'profile':
143+
this.$router.push(`/accountuser/${this.$store.getters.userInfo.id}`)
144+
break
145+
case 'timezone':
146+
this.toggleUseBrowserTimezone()
147+
break
148+
case 'document':
149+
window.open(this.$config.docBase, '_blank')
150+
break
151+
case 'logout':
152+
this.handleLogout()
153+
break
154+
}
155+
},
148156
handleLogout () {
149157
return this.Logout({}).then(() => {
150158
this.$router.push('/user/login')

‎ui/src/components/view/AnnotationsTab.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@
9696
<template #content>
9797
<div v-ctrl-enter="saveNote">
9898
<a-textarea
99-
rows="4"
99+
:rows="4"
100100
@change="handleNoteChange"
101101
v-model:value="annotation"
102102
:placeholder="$t('label.add.note')" />

‎ui/src/components/view/BulkActionProgress.vue‎

Lines changed: 29 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -52,36 +52,38 @@
5252
size="middle"
5353
:columns="selectedColumns"
5454
:dataSource="tableChanged ? filteredItems : selectedItems"
55-
:rowKey="(record, idx) => ($route.path.includes('/template') || $route.path.includes('/iso')) ? record.zoneid: record.id"
55+
:rowKey="record => ($route.path.includes('/template') || $route.path.includes('/iso')) ? record.zoneid: record.id"
5656
:pagination="true"
5757
@change="handleTableChange"
5858
style="overflow-y: auto">
59-
<template #status="{text}">
60-
<status :text=" text ? text : $t('state.inprogress') " displayText></status>
61-
</template>
62-
<template #algorithm="{record}">
63-
{{ returnAlgorithmName(record.algorithm) }}
64-
</template>
65-
<template #privateport="{record}">
66-
{{ record.privateport }} - {{ record.privateendport }}
67-
</template>
68-
<template #publicport="{record}">
69-
{{ record.publicport }} - {{ record.publicendport }}
70-
</template>
71-
<template #protocol="{record}">
72-
{{ capitalise(record.protocol) }}
73-
</template>
74-
<template #startport="{record}">
75-
{{ record.icmptype || record.startport >= 0 ? record.icmptype || record.startport : $t('label.all') }}
76-
</template>
77-
<template #endport="{record}">
78-
{{ record.icmpcode || record.endport >= 0 ? record.icmpcode || record.endport : $t('label.all') }}
79-
</template>
80-
<template #vm="{record}">
81-
<div><desktop-outlined /> {{ record.virtualmachinename }} ({{ record.vmguestip }})</div>
82-
</template>
83-
<template #cidrlist="{ record }">
84-
<span style="white-space: pre-line"> {{ record.cidrlist?.replaceAll(" ", "\n") }}</span>
59+
<template #bodyCell="{ column, text, record }">
60+
<template v-if="column.key === 'status'">
61+
<status :text=" text ? text : $t('state.inprogress') " displayText></status>
62+
</template>
63+
<template v-if="column.key === 'algorithm'">
64+
{{ returnAlgorithmName(record.algorithm) }}
65+
</template>
66+
<template v-if="column.key === 'privateport'">
67+
{{ record.privateport }} - {{ record.privateendport }}
68+
</template>
69+
<template v-if="column.key === 'publicport'">
70+
{{ record.publicport }} - {{ record.publicendport }}
71+
</template>
72+
<template v-if="column.key === 'protocol'">
73+
{{ capitalise(record.protocol) }}
74+
</template>
75+
<template v-if="column.key === 'startport'">
76+
{{ record.icmptype || record.startport >= 0 ? record.icmptype || record.startport : $t('label.all') }}
77+
</template>
78+
<template v-if="column.key === 'endport'">
79+
{{ record.icmpcode || record.endport >= 0 ? record.icmpcode || record.endport : $t('label.all') }}
80+
</template>
81+
<template v-if="column.key === 'vm'">
82+
<div><desktop-outlined /> {{ record.virtualmachinename }} ({{ record.vmguestip }})</div>
83+
</template>
84+
<template v-if="column.key === 'cidrlist'">
85+
<span style="white-space: pre-line"> {{ record.cidrlist?.replaceAll(" ", "\n") }}</span>
86+
</template>
8587
</template>
8688
</a-table>
8789
<br/>

‎ui/src/components/view/BulkActionView.vue‎

Lines changed: 29 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -55,35 +55,37 @@
5555
size="middle"
5656
:columns="selectedColumns"
5757
:dataSource="selectedItems"
58-
:rowKey="(record, idx) => $route.path.includes('/iso/') ? record.zoneid : record.id"
58+
:rowKey="record => $route.path.includes('/iso/') ? record.zoneid : record.id"
5959
:pagination="true"
6060
style="overflow-y: auto">
61-
<template #algorithm="{record}">
62-
{{ returnAlgorithmName(record.algorithm) }}
63-
</template>
64-
<template #column="{ text }">
65-
<span v-for="(column, index) in selectedColumns" :key="index"> {{ text }} ==== {{ column }}</span>
66-
</template>
67-
<template #privateport="{record}">
68-
{{ record.privateport }} - {{ record.privateendport }}
69-
</template>
70-
<template #publicport="{record}">
71-
{{ record.publicport }} - {{ record.publicendport }}
72-
</template>
73-
<template #protocol="{record}">
74-
{{ capitalise(record.protocol) }}
75-
</template>
76-
<template #vm="{record}">
77-
<div><desktop-outlined /> {{ record.virtualmachinename }} ({{ record.vmguestip }})</div>
78-
</template>
79-
<template #startport="{record}">
80-
{{ record.icmptype || record.startport >= 0 ? record.icmptype || record.startport : $t('label.all') }}
81-
</template>
82-
<template #endport="{record}">
83-
{{ record.icmpcode || record.endport >= 0 ? record.icmpcode || record.endport : $t('label.all') }}
84-
</template>
85-
<template #cidrlist="{record}">
86-
<span style="white-space: pre-line"> {{ record.cidrlist?.replaceAll(" ", "\n") }}</span>
61+
<template #bodyCell="{ column, text, record }">
62+
<template v-if="column.key === 'algorithm'">
63+
{{ returnAlgorithmName(record.algorithm) }}
64+
</template>
65+
<template v-if="column.key === 'column'">
66+
<span v-for="(column, index) in selectedColumns" :key="index"> {{ text }} ==== {{ column }}</span>
67+
</template>
68+
<template v-if="column.key === 'privateport'">
69+
{{ record.privateport }} - {{ record.privateendport }}
70+
</template>
71+
<template v-if="column.key === 'publicport'">
72+
{{ record.publicport }} - {{ record.publicendport }}
73+
</template>
74+
<template v-if="column.key === 'protocol'">
75+
{{ capitalise(record.protocol) }}
76+
</template>
77+
<template v-if="column.key === 'vm'">
78+
<div><desktop-outlined /> {{ record.virtualmachinename }} ({{ record.vmguestip }})</div>
79+
</template>
80+
<template v-if="column.key === 'startport'">
81+
{{ record.icmptype || record.startport >= 0 ? record.icmptype || record.startport : $t('label.all') }}
82+
</template>
83+
<template v-if="column.key === 'endport'">
84+
{{ record.icmpcode || record.endport >= 0 ? record.icmpcode || record.endport : $t('label.all') }}
85+
</template>
86+
<template v-if="column.key === 'cidrlist'">
87+
<span style="white-space: pre-line"> {{ record.cidrlist?.replaceAll(" ", "\n") }}</span>
88+
</template>
8789
</template>
8890
</a-table>
8991
<a-divider />

‎ui/src/components/view/DedicateDomain.vue‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,12 +26,16 @@
2626
showSearch
2727
optionFilterProp="label"
2828
:filterOption="(input, option) => {
29-
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
29+
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
3030
}"
3131
@change="handleChangeDomain"
3232
v-focus="true"
3333
v-model:value="domainId">
34-
<a-select-option v-for="(domain, index) in domainsList" :value="domain.id" :key="index">
34+
<a-select-option
35+
v-for="(domain, index) in domainsList"
36+
:value="domain.id"
37+
:key="index"
38+
:label="domain.path || domain.name || domain.description">
3539
{{ domain.path || domain.name || domain.description }}
3640
</a-select-option>
3741
</a-select>
@@ -43,9 +47,9 @@
4347
style="width: 100%"
4448
@change="handleChangeAccount"
4549
showSearch
46-
optionFilterProp="label"
50+
optionFilterProp="value"
4751
:filterOption="(input, option) => {
48-
return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
52+
return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
4953
}" >
5054
<a-select-option v-for="(account, index) in accountsList" :value="account.name" :key="index">
5155
{{ account.name }}

‎ui/src/components/view/DetailsTab.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -112,14 +112,14 @@ export default {
112112
type: Object,
113113
required: true
114114
},
115-
loading: {
116-
type: Boolean,
117-
default: false
118-
},
119115
items: {
120116
type: Object,
121117
default: () => {}
122118
},
119+
loading: {
120+
type: Boolean,
121+
default: false
122+
},
123123
bordered: {
124124
type: Boolean,
125125
default: false

0 commit comments

Comments
 (0)