apache · yadvr · Apr 11, 2023 · May 5, 2022 · May 9, 2022 · May 10, 2022
diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -38,7 +38,8 @@
     "@fortawesome/free-brands-svg-icons": "^5.15.2",
     "@fortawesome/free-solid-svg-icons": "^5.15.2",
     "@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",
     "axios": "^0.21.1",
     "babel-plugin-require-context-hook": "^1.0.0",

diff --git a/ui/src/components/CheckBoxSelectPair.vue b/ui/src/components/CheckBoxSelectPair.vue
@@ -34,13 +34,14 @@
             showSearch
             optionFilterProp="label"
             :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) }">
             <a-select-option
               v-for="(opt) in selectSource"
               :key="opt.id"
-              :disabled="opt.enabled === false">
+              :disabled="opt.enabled === false"
+              :label="opt.displaytext || opt.name || opt.description">
               {{ opt.displaytext || opt.name || opt.description }}
             </a-select-option>
           </a-select>

diff --git a/ui/src/components/header/SamlDomainSwitcher.vue b/ui/src/components/header/SamlDomainSwitcher.vue
@@ -25,7 +25,7 @@
       showSearch
       optionFilterProp="label"
       :filterOption="(input, option) => {
-        return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+        return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
       }"
       @change="changeAccount"
       @focus="fetchData" >
@@ -42,7 +42,7 @@
         </a-tooltip>
       </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})` }}
       </a-select-option>
     </a-select>

diff --git a/ui/src/components/header/UserMenu.vue b/ui/src/components/header/UserMenu.vue
@@ -38,33 +38,25 @@
         <span>{{ nickname() }}</span>
       </span>
       <template #overlay>
-        <a-menu class="user-menu-wrapper">
-          <router-link :to="{ path: '/accountuser/' + $store.getters.userInfo.id }">
-            <a-menu-item class="user-menu-item" key="0">
-                <UserOutlined class="user-menu-item-icon" />
-                <span class="user-menu-item-name">{{ $t('label.profilename') }}</span>
-            </a-menu-item>
-          </router-link>
-          <a @click="toggleUseBrowserTimezone">
-            <a-menu-item class="user-menu-item" key="1">
-                <ClockCircleOutlined class="user-menu-item-icon" />
-                <span class="user-menu-item-name" style="margin-right: 5px">{{ $t('label.use.local.timezone') }}</span>
-                <a-switch :checked="$store.getters.usebrowsertimezone" />
-            </a-menu-item>
-          </a>
-          <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 class="user-menu-wrapper" @click="handleClickMenu">
+          <a-menu-item class="user-menu-item" key="profile">
+            <UserOutlined class="user-menu-item-icon" />
+            <span class="user-menu-item-name">{{ $t('label.profilename') }}</span>
+          </a-menu-item>
+          <a-menu-item class="user-menu-item" key="timezone">
+            <ClockCircleOutlined class="user-menu-item-icon" />
+            <span class="user-menu-item-name" style="margin-right: 5px">{{ $t('label.use.local.timezone') }}</span>
+            <a-switch :checked="$store.getters.usebrowsertimezone" />
+          </a-menu-item>
+          <a-menu-item class="user-menu-item" key="document">
+            <QuestionCircleOutlined class="user-menu-item-icon" />
+            <span class="user-menu-item-name">{{ $t('label.help') }}</span>
+          </a-menu-item>
           <a-menu-divider/>
-          <a href="javascript:;" @click="handleLogout">
-            <a-menu-item class="user-menu-item" key="3">
-              <LogoutOutlined class="user-menu-item-icon" />
-              <span class="user-menu-item-name">{{ $t('label.logout') }}</span>
-            </a-menu-item>
-          </a>
+          <a-menu-item class="user-menu-item" key="logout">
+            <LogoutOutlined class="user-menu-item-icon" />
+            <span class="user-menu-item-name">{{ $t('label.logout') }}</span>
+          </a-menu-item>
         </a-menu>
       </template>
     </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 () {
       return this.Logout({}).then(() => {
         this.$router.push('/user/login')

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

diff --git a/ui/src/components/view/BulkActionProgress.vue b/ui/src/components/view/BulkActionProgress.vue
@@ -52,36 +52,38 @@
         size="middle"
         :columns="selectedColumns"
         :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"
         @change="handleTableChange"
         style="overflow-y: auto">
-        <template #status="{text}">
-          <status :text=" text ? text : $t('state.inprogress') " displayText></status>
-        </template>
-        <template #algorithm="{record}">
-          {{ returnAlgorithmName(record.algorithm) }}
-        </template>
-        <template #privateport="{record}">
-          {{ record.privateport }} - {{ record.privateendport }}
-        </template>
-        <template #publicport="{record}">
-          {{ record.publicport }} - {{ record.publicendport }}
-        </template>
-        <template #protocol="{record}">
-          {{ capitalise(record.protocol) }}
-        </template>
-        <template #startport="{record}">
-          {{ record.icmptype || record.startport >= 0 ? record.icmptype || record.startport : $t('label.all') }}
-        </template>
-        <template #endport="{record}">
-          {{ record.icmpcode || record.endport >= 0 ? record.icmpcode || record.endport : $t('label.all') }}
-        </template>
-        <template #vm="{record}">
-          <div><desktop-outlined /> {{ record.virtualmachinename }} ({{ record.vmguestip }})</div>
-        </template>
-        <template #cidrlist="{ record }">
-          <span style="white-space: pre-line"> {{ record.cidrlist?.replaceAll(" ", "\n") }}</span>
+        <template #bodyCell="{ column, text, record }">
+          <template v-if="column.key === 'status'">
+            <status :text=" text ? text : $t('state.inprogress') " displayText></status>
+          </template>
+          <template v-if="column.key === 'algorithm'">
+            {{ returnAlgorithmName(record.algorithm) }}
+          </template>
+          <template v-if="column.key === 'privateport'">
+            {{ record.privateport }} - {{ record.privateendport }}
+          </template>
+          <template v-if="column.key === 'publicport'">
+            {{ record.publicport }} - {{ record.publicendport }}
+          </template>
+          <template v-if="column.key === 'protocol'">
+            {{ capitalise(record.protocol) }}
+          </template>
+          <template v-if="column.key === 'startport'">
+            {{ record.icmptype || record.startport >= 0 ? record.icmptype || record.startport : $t('label.all') }}
+          </template>
+          <template v-if="column.key === 'endport'">
+            {{ record.icmpcode || record.endport >= 0 ? record.icmpcode || record.endport : $t('label.all') }}
+          </template>
+          <template v-if="column.key === 'vm'">
+            <div><desktop-outlined /> {{ record.virtualmachinename }} ({{ record.vmguestip }})</div>
+          </template>
+          <template v-if="column.key === 'cidrlist'">
+            <span style="white-space: pre-line"> {{ record.cidrlist?.replaceAll(" ", "\n") }}</span>
+          </template>
         </template>
       </a-table>
       <br/>

diff --git a/ui/src/components/view/BulkActionView.vue b/ui/src/components/view/BulkActionView.vue
@@ -55,35 +55,37 @@
           size="middle"
           :columns="selectedColumns"
           :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"
           style="overflow-y: auto">
-          <template #algorithm="{record}">
-            {{ returnAlgorithmName(record.algorithm) }}
-          </template>
-          <template #column="{ text }">
-            <span v-for="(column, index) in selectedColumns" :key="index"> {{ text }} ==== {{ column }}</span>
-          </template>
-          <template #privateport="{record}">
-            {{ record.privateport }} - {{ record.privateendport }}
-          </template>
-          <template #publicport="{record}">
-            {{ record.publicport }} - {{ record.publicendport }}
-          </template>
-          <template #protocol="{record}">
-            {{ capitalise(record.protocol) }}
-          </template>
-          <template #vm="{record}">
-            <div><desktop-outlined /> {{ record.virtualmachinename }} ({{ record.vmguestip }})</div>
-          </template>
-          <template #startport="{record}">
-            {{ record.icmptype || record.startport >= 0 ? record.icmptype || record.startport : $t('label.all') }}
-          </template>
-          <template #endport="{record}">
-            {{ record.icmpcode || record.endport >= 0 ? record.icmpcode || record.endport : $t('label.all') }}
-          </template>
-          <template #cidrlist="{record}">
-            <span style="white-space: pre-line"> {{ record.cidrlist?.replaceAll(" ", "\n") }}</span>
+          <template #bodyCell="{ column, text, record }">
+            <template v-if="column.key === 'algorithm'">
+              {{ returnAlgorithmName(record.algorithm) }}
+            </template>
+            <template v-if="column.key === 'column'">
+              <span v-for="(column, index) in selectedColumns" :key="index"> {{ text }} ==== {{ column }}</span>
+            </template>
+            <template v-if="column.key === 'privateport'">
+              {{ record.privateport }} - {{ record.privateendport }}
+            </template>
+            <template v-if="column.key === 'publicport'">
+              {{ record.publicport }} - {{ record.publicendport }}
+            </template>
+            <template v-if="column.key === 'protocol'">
+              {{ capitalise(record.protocol) }}
+            </template>
+            <template v-if="column.key === 'vm'">
+              <div><desktop-outlined /> {{ record.virtualmachinename }} ({{ record.vmguestip }})</div>
+            </template>
+            <template v-if="column.key === 'startport'">
+              {{ record.icmptype || record.startport >= 0 ? record.icmptype || record.startport : $t('label.all') }}
+            </template>
+            <template v-if="column.key === 'endport'">
+              {{ record.icmpcode || record.endport >= 0 ? record.icmpcode || record.endport : $t('label.all') }}
+            </template>
+            <template v-if="column.key === 'cidrlist'">
+              <span style="white-space: pre-line"> {{ record.cidrlist?.replaceAll(" ", "\n") }}</span>
+            </template>
           </template>
         </a-table>
         <a-divider />

diff --git a/ui/src/components/view/DedicateDomain.vue b/ui/src/components/view/DedicateDomain.vue
@@ -26,12 +26,16 @@
           showSearch
           optionFilterProp="label"
           :filterOption="(input, option) => {
-            return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
           }"
           @change="handleChangeDomain"
           v-focus="true"
           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 }}
           </a-select-option>
         </a-select>
@@ -43,9 +47,9 @@
         style="width: 100%"
         @change="handleChangeAccount"
         showSearch
-        optionFilterProp="label"
+        optionFilterProp="value"
         :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">
           {{ account.name }}

diff --git a/ui/src/components/view/DetailsTab.vue b/ui/src/components/view/DetailsTab.vue
@@ -112,14 +112,14 @@ export default {
       type: Object,
       required: true
     },
-    loading: {
-      type: Boolean,
-      default: false
-    },
     items: {
       type: Object,
       default: () => {}
     },
+    loading: {
+      type: Boolean,
+      default: false
+    },
     bordered: {
       type: Boolean,
       default: false

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

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