This is an automated email from the ASF dual-hosted git repository.

jinsongzhou pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/amoro.git


The following commit(s) were added to refs/heads/master by this push:
     new 9d8255f5d [AMORO-2730]: replace component to antd-vue 4.x (#2773)
9d8255f5d is described below

commit 9d8255f5d98675617fa1417d17c0b2cc8b517d65
Author: xiaomo <[email protected]>
AuthorDate: Wed May 8 17:38:09 2024 +0800

    [AMORO-2730]: replace component to antd-vue 4.x (#2773)
    
    * [AMORO-2730]: replace tabs & tabPane & divider to antd-vue 4.x
    
    * [AMORO-2730]: replace configProexport 
PATH=/Users/ssa-user/Desktop/study/amoro/ams/dashboard/node_modules/.bin:/Users/ssa-user/.nvm/versions/node/v19.7.0/bin:/Users/ssa-user/Library/pnpm:/usr/local/bin:/usr/local/sbin:/usr/local/bin:/System/Cryptexes/App/usr/bin:/usr/bin:/bin:/usr/sbin:/sbin:/var/run/com.apple.security.cryptexd/codex.system/bootstrap/usr/local/bin:/var/run/com.apple.security.cryptexd/codex.system/bootstrap/usr/bin:/var/run/com.apple.security.cryptexd/codex.system/bo
 [...]
    
    * [AMORO-2730]: replace select to antd-vue 4.x
    
    * [AMORO-2730]: replace spin to antd-vue 4.x
    
    * [AMORO-2730]: replace button to antd-vue 4.x
    
    * [AMORO-2730]: rename dashboard
    
    * [AMORO-2730]: rename dashboard
    
    * [AMORO-2730]: rename dashboard
    
    * [AMORO-2730]: replace table to antd-vue 4.x
    
    * [AMORO-2730]: replace tooltip to antd-vue 4.x
    
    * [AMORO-2730]: replace input group to antd-vue 4.x
    
    * [AMORO-2730]: replace form to antd-vue 4.x
    
    * [AMORO-2730]: replace breadcrumb & list & pagenation to antd-vue 4.x
    
    * [AMORO-2730]: replace checkbox & row & upload to antd-vue 4.x
    
    * [AMORO-2730]: replace col & collapse to antd-vue 4.x
    
    * [AMORO-2730]: replace modal to antd-vue 4.x
    
    * [AMORO-2730]: replace message to antd-vue 4.x
    
    * [AMORO-2730]: fix the build error
    
    ---------
    
    Co-authored-by: ZhouJinsong <[email protected]>
---
 amoro-ams/amoro-ams-dashboard/src/App.vue          |  12 +-
 .../amoro-ams-dashboard/src/components/Sidebar.vue |   8 +-
 .../amoro-ams-dashboard/src/components/Topbar.vue  |   3 +-
 .../src/components/VirtualRecycleScroller.vue      |   3 +-
 .../src/components/ant-design/index.ts             |  77 -------
 .../src/components/echarts/Chart.vue               |   1 +
 .../src/components/loading/loading.vue             |   1 +
 .../amoro-ams-dashboard/src/components/register.ts |   3 -
 .../src/components/tables-sub-menu/CreateDB.vue    |   9 +-
 .../src/components/tables-sub-menu/TablesMenu.vue  |   5 +-
 amoro-ams/amoro-ams-dashboard/src/language/en.ts   |   3 -
 amoro-ams/amoro-ams-dashboard/src/views/404.vue    |   6 +-
 .../src/views/catalogs/Detail.vue                  | 227 ++++++++++-----------
 .../src/views/catalogs/Properties.vue              |   2 +
 .../src/views/catalogs/index.vue                   |   3 +-
 .../src/views/hive-details/components/Details.vue  |   2 +
 .../src/views/hive-details/components/ErrorMsg.vue |   5 +-
 .../src/views/hive-details/components/Field.vue    |   2 +
 .../views/hive-details/components/Partition.vue    |   2 +
 .../views/hive-details/components/Properties.vue   |   3 +-
 .../src/views/hive-details/index.vue               |   9 +-
 .../src/views/hive-details/upgrade.vue             |   2 +
 .../amoro-ams-dashboard/src/views/login/index.vue  |   3 +-
 .../src/views/optimize/components/List.vue         |   3 +-
 .../src/views/optimize/components/ScaleOut.vue     |   2 +
 .../src/views/resource/components/GroupModal.vue   |   3 +-
 .../src/views/resource/components/List.vue         |  14 +-
 .../src/views/resource/components/ScaleOut.vue     |   2 +
 .../src/views/resource/index.vue                   |  15 +-
 .../src/views/settings/index.vue                   |   3 +
 .../src/views/tables/components/Details.vue        |   2 +
 .../src/views/tables/components/Files.vue          |   3 +
 .../src/views/tables/components/Operations.vue     |   3 +-
 .../src/views/tables/components/Optimizing.vue     |  88 ++++----
 .../src/views/tables/components/Selector.vue       |   6 +-
 .../src/views/tables/components/Snapshots.vue      |   2 +
 .../src/views/tables/create.vue                    |   4 +-
 .../amoro-ams-dashboard/src/views/tables/index.vue |  34 ++-
 .../src/views/terminal/index.vue                   |   6 +-
 39 files changed, 280 insertions(+), 301 deletions(-)

diff --git a/amoro-ams/amoro-ams-dashboard/src/App.vue 
b/amoro-ams/amoro-ams-dashboard/src/App.vue
index de2413a54..5cb89d6cf 100644
--- a/amoro-ams/amoro-ams-dashboard/src/App.vue
+++ b/amoro-ams/amoro-ams-dashboard/src/App.vue
@@ -23,12 +23,18 @@
 </template>
 
 <script lang="ts" setup>
-import enUS from 'ant-design-vue-v3/es/locale/en_US'
-import zhCN from 'ant-design-vue-v3/es/locale/zh_CN'
-import { ref } from 'vue'
+import { ConfigProvider as AConfigProvider } from "ant-design-vue"
+import zhCN from 'ant-design-vue/es/locale/zh_CN'
+import enUS from 'ant-design-vue/es/locale/en_US'
+import dayjs from 'dayjs';
+import { ref, watch } from 'vue'
 
 const locale = ref(enUS.locale)
+dayjs.locale('en')
 
+watch(locale, val => {
+  dayjs.locale(val);
+});
 </script>
 
 <style>
diff --git a/amoro-ams/amoro-ams-dashboard/src/components/Sidebar.vue 
b/amoro-ams/amoro-ams-dashboard/src/components/Sidebar.vue
index 105ee4a1b..111b16b10 100644
--- a/amoro-ams/amoro-ams-dashboard/src/components/Sidebar.vue
+++ b/amoro-ams/amoro-ams-dashboard/src/components/Sidebar.vue
@@ -54,6 +54,8 @@ import { MenuFoldOutlined, MenuUnfoldOutlined } from 
'@ant-design/icons-vue'
 import { useI18n } from 'vue-i18n'
 import { getQueryString } from '@/utils'
 
+import { Menu as AMenu, MenuItem as AMenuItem, Button as AButton } from 
'ant-design-vue'
+
 interface MenuItem {
   key: string
   title: string
@@ -65,7 +67,11 @@ export default defineComponent({
   components: {
     MenuFoldOutlined,
     MenuUnfoldOutlined,
-    TableMenu
+    TableMenu,
+
+    AMenu,
+    AMenuItem,
+    AButton
   },
   setup () {
     const { t } = useI18n()
diff --git a/amoro-ams/amoro-ams-dashboard/src/components/Topbar.vue 
b/amoro-ams/amoro-ams-dashboard/src/components/Topbar.vue
index be8036352..8b5579a58 100644
--- a/amoro-ams/amoro-ams-dashboard/src/components/Topbar.vue
+++ b/amoro-ams/amoro-ams-dashboard/src/components/Topbar.vue
@@ -39,12 +39,13 @@
 
 import { defineComponent, onMounted, reactive } from 'vue'
 import { QuestionCircleOutlined, LogoutOutlined } from '@ant-design/icons-vue'
-import { Modal } from 'ant-design-vue-v3'
 import { useI18n } from 'vue-i18n'
 import useStore from '@/store'
 import { getVersionInfo } from '@/services/global.service'
 import loginService from '@/services/login.service'
 
+import { Modal, Button as AButton, Tooltip as ATooltip } from 'ant-design-vue'
+
 interface IVersion {
   version: string
   commitTime: string
diff --git 
a/amoro-ams/amoro-ams-dashboard/src/components/VirtualRecycleScroller.vue 
b/amoro-ams/amoro-ams-dashboard/src/components/VirtualRecycleScroller.vue
index 4e6eb8dcd..269b1a8a2 100644
--- a/amoro-ams/amoro-ams-dashboard/src/components/VirtualRecycleScroller.vue
+++ b/amoro-ams/amoro-ams-dashboard/src/components/VirtualRecycleScroller.vue
@@ -41,7 +41,8 @@ import { defineComponent } from 'vue'
 import { RecycleScroller } from 'vue-virtual-scroller'
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 import { IMap, tableTypeIconMap } from '@/types/common.type'
-import { Empty } from 'ant-design-vue-v3'
+
+import { Empty as AEmpty } from 'ant-design-vue'
 
 export default defineComponent ({
   components: {
diff --git a/amoro-ams/amoro-ams-dashboard/src/components/ant-design/index.ts 
b/amoro-ams/amoro-ams-dashboard/src/components/ant-design/index.ts
deleted file mode 100644
index 7db9074e0..000000000
--- a/amoro-ams/amoro-ams-dashboard/src/components/ant-design/index.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-/*
-  * Licensed to the Apache Software Foundation (ASF) under one
-  * or more contributor license agreements.  See the NOTICE file
-  * distributed with this work for additional information
-  * regarding copyright ownership.  The ASF licenses this file
-  * to you under the Apache License, Version 2.0 (the
-  * "License"); you may not use this file except in compliance
-  * with the License.  You may obtain a copy of the License at
-  *
-  *     http://www.apache.org/licenses/LICENSE-2.0
-  *
-  * Unless required by applicable law or agreed to in writing, software
-  * distributed under the License is distributed on an "AS IS" BASIS,
-  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  * See the License for the specific language governing permissions and
-  * limitations under the License.
-  */
-
-import { App } from 'vue'
-import {
-  ConfigProvider,
-  Select,
-  Menu,
-  Button,
-  Table,
-  Tooltip,
-  Input,
-  Modal,
-  Form,
-  InputNumber,
-  Pagination,
-  Spin,
-  Divider,
-  Tabs,
-  List,
-  Breadcrumb,
-  Checkbox,
-  AutoComplete,
-  Empty,
-  Upload,
-  Radio,
-  Collapse,
-  Row,
-  Col,
-  Dropdown
-} from 'ant-design-vue-v3'
-
-const compontens = [
-  ConfigProvider,
-  Spin,
-  Divider,
-  Tabs,
-  InputNumber,
-  Select,
-  Menu,
-  Button,
-  Tooltip,
-  Table,
-  Input,
-  Modal,
-  Form,
-  Pagination,
-  List,
-  Breadcrumb,
-  Checkbox,
-  AutoComplete,
-  Empty,
-  Upload,
-  Radio,
-  Collapse,
-  Row,
-  Col,
-  Dropdown
-]
-export default function (app: App): void {
-  compontens.forEach(app.use)
-}
diff --git a/amoro-ams/amoro-ams-dashboard/src/components/echarts/Chart.vue 
b/amoro-ams/amoro-ams-dashboard/src/components/echarts/Chart.vue
index 477d017a6..7227ed4f9 100644
--- a/amoro-ams/amoro-ams-dashboard/src/components/echarts/Chart.vue
+++ b/amoro-ams/amoro-ams-dashboard/src/components/echarts/Chart.vue
@@ -22,6 +22,7 @@
   </a-spin>
 </template>
 <script lang="ts">
+import { Spin as ASpin } from 'ant-design-vue'
 import { defineComponent, onMounted, onBeforeUnmount, watch, ref, toRefs, 
reactive } from 'vue'
 import echarts from './index'
 
diff --git a/amoro-ams/amoro-ams-dashboard/src/components/loading/loading.vue 
b/amoro-ams/amoro-ams-dashboard/src/components/loading/loading.vue
index 8d4b93e28..c67fe1563 100644
--- a/amoro-ams/amoro-ams-dashboard/src/components/loading/loading.vue
+++ b/amoro-ams/amoro-ams-dashboard/src/components/loading/loading.vue
@@ -18,6 +18,7 @@
 
 <script setup lang="ts">
 import { onBeforeUnmount, ref } from 'vue'
+import { Spin as ASpin } from 'ant-design-vue'
 
 // name: 'ULoading',
 // props: {
diff --git a/amoro-ams/amoro-ams-dashboard/src/components/register.ts 
b/amoro-ams/amoro-ams-dashboard/src/components/register.ts
index 76dd076e8..25f19ddcf 100644
--- a/amoro-ams/amoro-ams-dashboard/src/components/register.ts
+++ b/amoro-ams/amoro-ams-dashboard/src/components/register.ts
@@ -16,12 +16,9 @@
   * limitations under the License.
   */
 
-import AntDesign from './ant-design'
 import { App } from 'vue'
 import ULoading from './loading'
 
 export default function Register (app: App<Element>): void {
-  // Global registration ant-design-vue components
-  app.use(AntDesign)
   app.use(ULoading)
 }
diff --git 
a/amoro-ams/amoro-ams-dashboard/src/components/tables-sub-menu/CreateDB.vue 
b/amoro-ams/amoro-ams-dashboard/src/components/tables-sub-menu/CreateDB.vue
index f115154e9..fd207e8d0 100644
--- a/amoro-ams/amoro-ams-dashboard/src/components/tables-sub-menu/CreateDB.vue
+++ b/amoro-ams/amoro-ams-dashboard/src/components/tables-sub-menu/CreateDB.vue
@@ -17,7 +17,7 @@
  /-->
 
 <template>
-  <a-modal :visible="visible" :title="$t('createDatabase')" @ok="handleOk" 
@cancel="handleCancel">
+  <a-modal v-model:open="visible" :title="$t('createDatabase')" @ok="handleOk" 
@cancel="handleCancel">
     <a-form ref="formRef" :model="formState" class="label-120">
       <a-form-item name="catalog" :label="$t('catalog')" :rules="[{ required: 
true, message: `${placeholder.selectClPh}` }]">
         <a-select
@@ -33,6 +33,8 @@
   </a-modal>
 </template>
 <script lang="ts">
+import { Modal as AModal, Select as ASelect, Input as AInput, Form as AForm, 
FormItem as AFormItem } from 'ant-design-vue'
+
 import { defineComponent, reactive, ref } from 'vue'
 import { usePlaceholder } from '@/hooks/usePlaceholder'
 
@@ -42,6 +44,9 @@ interface FormState {
 }
 
 export default defineComponent({
+  components: {
+    ASelect
+  },
   props: {
     visible: {
       type: Boolean,
@@ -53,7 +58,7 @@ export default defineComponent({
     }
   },
   emits: ['cancel'],
-  setup(props, { emit }) {
+  setup(_, { emit }) {
     const placeholder = reactive(usePlaceholder())
 
     const formRef = ref()
diff --git 
a/amoro-ams/amoro-ams-dashboard/src/components/tables-sub-menu/TablesMenu.vue 
b/amoro-ams/amoro-ams-dashboard/src/components/tables-sub-menu/TablesMenu.vue
index 82acf24bc..8fb28b0a1 100644
--- 
a/amoro-ams/amoro-ams-dashboard/src/components/tables-sub-menu/TablesMenu.vue
+++ 
b/amoro-ams/amoro-ams-dashboard/src/components/tables-sub-menu/TablesMenu.vue
@@ -86,6 +86,8 @@
 </template>
 
 <script lang="ts">
+import { Select as ASelect, InputSearch as AInputSearch } from 'ant-design-vue'
+
 import { defineComponent, onBeforeMount, reactive, toRefs, computed } from 
'vue'
 import {
   // PlusOutlined,
@@ -117,7 +119,8 @@ export default defineComponent({
     SearchOutlined,
     CloseCircleOutlined,
     CreateDBModal,
-    virtualRecycleScroller
+    virtualRecycleScroller,
+    ASelect
   },
   emits: ['goCreatePage'],
   setup(_, { emit }) {
diff --git a/amoro-ams/amoro-ams-dashboard/src/language/en.ts 
b/amoro-ams/amoro-ams-dashboard/src/language/en.ts
index 790f57525..2596f0931 100644
--- a/amoro-ams/amoro-ams-dashboard/src/language/en.ts
+++ b/amoro-ams/amoro-ams-dashboard/src/language/en.ts
@@ -34,7 +34,6 @@ export default {
   logout: 'Logout',
   logoutModalTitle: 'Log out of the ams?',
   order: 'Order',
-  token: 'Token',
   cluster: 'Cluster',
   database: 'Database | Databases',
   table: 'Table | Tables',
@@ -84,7 +83,6 @@ export default {
   fileContent: 'File Content',
   startTime: 'Start Time',
   finishTime: 'Finish Time',
-  touchTime: 'Touch Time',
   duration: 'Duration',
   optimizeType: 'Optimize Type',
   parallelism: 'Parallelism',
@@ -96,7 +94,6 @@ export default {
   operationDetails: 'Operation Details',
   copy: 'Copy',
   optimizer: 'Optimizer',
-  optimizerId: 'Optimizer Id',
   optimizers: 'Optimizers',
   container: 'Container',
   status: 'Status',
diff --git a/amoro-ams/amoro-ams-dashboard/src/views/404.vue 
b/amoro-ams/amoro-ams-dashboard/src/views/404.vue
index 353e52652..9f953d0aa 100644
--- a/amoro-ams/amoro-ams-dashboard/src/views/404.vue
+++ b/amoro-ams/amoro-ams-dashboard/src/views/404.vue
@@ -30,9 +30,13 @@ limitations under the License.
 
 <script lang="ts">
 import { defineComponent } from 'vue'
+import { Button as AButton } from 'ant-design-vue'
 
 export default defineComponent({
-  name: 'Page404'
+  name: 'Page404',
+  components: {
+    AButton
+  }
 })
 </script>
 
diff --git a/amoro-ams/amoro-ams-dashboard/src/views/catalogs/Detail.vue 
b/amoro-ams/amoro-ams-dashboard/src/views/catalogs/Detail.vue
index 7576e084e..daf514490 100644
--- a/amoro-ams/amoro-ams-dashboard/src/views/catalogs/Detail.vue
+++ b/amoro-ams/amoro-ams-dashboard/src/views/catalogs/Detail.vue
@@ -1,4 +1,3 @@
-
 <!--
 Licensed to the Apache Software Foundation (ASF) under one
 or more contributor license agreements.  See the NOTICE file
@@ -23,144 +22,119 @@ limitations under the License.
       <div class="content-wrap">
         <a-form ref="formRef" :model="formState" class="catalog-form">
           <a-form-item>
-            <p class="header">{{$t('basic')}}</p>
+            <p class="header">{{ $t('basic') }}</p>
           </a-form-item>
-          <a-form-item :label="$t('name')" :name="['catalog', 'name']" 
:rules="[{ required: isEdit && isNewCatalog, validator: validatorName }]">
+          <a-form-item :label="$t('name')" :name="['catalog', 'name']"
+            :rules="[{ required: isEdit && isNewCatalog, validator: 
validatorName }]">
             <a-input v-if="isEdit && isNewCatalog" 
v-model:value="formState.catalog.name" />
-            <span v-else class="config-value">{{formState.catalog.name}}</span>
+            <span v-else class="config-value">{{ formState.catalog.name 
}}</span>
           </a-form-item>
           <a-form-item :label="$t('type')" :name="['catalog', 'typeshow']">
-            <a-select
-              v-if="isEdit && isNewCatalog"
-              v-model:value="formState.catalog.typeshow"
-              :options="typwShowOptions"
-              :placeholder="placeholder.selectPh"
-              @change="changeTypeShow"
-            />
-            <span v-else>{{formState.catalog.typeshow}}</span>
+            <a-select v-if="isEdit && isNewCatalog" 
v-model:value="formState.catalog.typeshow"
+              :options="typwShowOptions" :placeholder="placeholder.selectPh" 
@change="changeTypeShow" />
+            <span v-else>{{ formState.catalog.typeshow }}</span>
           </a-form-item>
-          <a-form-item :label="$t('metastore')" 
v-if="formState.catalog.typeshow === typeShowMap['External Catalog']" 
:name="['catalog', 'type']" :rules="[{ required: isEdit && isNewCatalog }]">
-            <a-select
-              v-if="isEdit && isNewCatalog"
-              v-model:value="formState.catalog.type"
-              :options="catalogTypeOps"
-              :placeholder="placeholder.selectPh"
-              @change="changeMetastore"
-            />
-            <span v-else>{{metastoreType}}</span>
+          <a-form-item :label="$t('metastore')" 
v-if="formState.catalog.typeshow === typeShowMap['External Catalog']"
+            :name="['catalog', 'type']" :rules="[{ required: isEdit && 
isNewCatalog }]">
+            <a-select v-if="isEdit && isNewCatalog" 
v-model:value="formState.catalog.type" :options="catalogTypeOps"
+              :placeholder="placeholder.selectPh" @change="changeMetastore" />
+            <span v-else>{{ metastoreType }}</span>
           </a-form-item>
-          <a-form-item :label="$t('tableFormat')" :name="['tableFormatList']" 
:rules="[{ required: isEdit && isNewCatalog }]">
-            <a-checkbox-group :disabled="!isEdit || !isNewCatalog" 
v-model:value="formState.tableFormatList" @change="changeTableFormat">
-              <a-checkbox v-for="item in formatOptions" :key="item" 
:value="item">{{tableFormatText[item]}}</a-checkbox>
+          <a-form-item :label="$t('tableFormat')" :name="['tableFormatList']"
+            :rules="[{ required: isEdit && isNewCatalog }]">
+            <a-checkbox-group :disabled="!isEdit || !isNewCatalog" 
v-model:value="formState.tableFormatList"
+              @change="changeTableFormat">
+              <a-checkbox v-for="item in formatOptions" :key="item" 
:value="item">{{ tableFormatText[item] }}</a-checkbox>
             </a-checkbox-group>
           </a-form-item>
-          <a-form-item :label="$t('optimizerGroup')" :name="['catalog', 
'optimizerGroup']" :rules="[{ required: isEdit }]">
-            <a-select
-              v-if="isEdit"
-              v-model:value="formState.catalog.optimizerGroup"
-              :options="optimizerGroupList"
-              :placeholder="placeholder.selectPh"
-            />
-            <span v-else>{{formState.catalog.optimizerGroup}}</span>
+          <a-form-item :label="$t('optimizerGroup')" :name="['catalog', 
'optimizerGroup']"
+            :rules="[{ required: isEdit }]">
+            <a-select v-if="isEdit" 
v-model:value="formState.catalog.optimizerGroup" :options="optimizerGroupList"
+              :placeholder="placeholder.selectPh" />
+            <span v-else>{{ formState.catalog.optimizerGroup }}</span>
           </a-form-item>
           <a-form-item>
-            <p class="header">{{$t('storageConfigName')}}</p>
+            <p class="header">{{ $t('storageConfigName') }}</p>
           </a-form-item>
           <a-form-item label="Type" :name="['storageConfig', 'storage.type']" 
:rules="[{ required: isEdit }]">
-            <a-select
-              v-if="isEdit"
-              v-model:value="formState.storageConfig['storage.type']"
-              :placeholder="placeholder.selectPh"
-              :options="storageConfigTypeOps"
-            />
-            <span v-else 
class="config-value">{{formState.storageConfig['storage.type']}}</span>
+            <a-select v-if="isEdit" 
v-model:value="formState.storageConfig['storage.type']"
+              :placeholder="placeholder.selectPh" 
:options="storageConfigTypeOps" />
+            <span v-else class="config-value">{{ 
formState.storageConfig['storage.type'] }}</span>
           </a-form-item>
-          <a-form-item v-if="formState.storageConfig['storage.type'] === 'S3'" 
label="Endpoint" :name="['storageConfig', 'storage.s3.endpoint']" :rules="[{ 
required: false }]">
+          <a-form-item v-if="formState.storageConfig['storage.type'] === 'S3'" 
label="Endpoint"
+            :name="['storageConfig', 'storage.s3.endpoint']" :rules="[{ 
required: false }]">
             <a-input v-if="isEdit" 
v-model:value="formState.storageConfig['storage.s3.endpoint']" />
-            <span v-else 
class="config-value">{{formState.storageConfig['storage.s3.endpoint']}}</span>
+            <span v-else class="config-value">{{ 
formState.storageConfig['storage.s3.endpoint'] }}</span>
           </a-form-item>
-          <a-form-item v-if="formState.storageConfig['storage.type'] === 'S3'" 
label="Region" :name="['storageConfig', 'storage.s3.region']" :rules="[{ 
required: false }]">
+          <a-form-item v-if="formState.storageConfig['storage.type'] === 'S3'" 
label="Region"
+            :name="['storageConfig', 'storage.s3.region']" :rules="[{ 
required: false }]">
             <a-input v-if="isEdit" 
v-model:value="formState.storageConfig['storage.s3.region']" />
-            <span v-else 
class="config-value">{{formState.storageConfig['storage.s3.region']}}</span>
+            <span v-else class="config-value">{{ 
formState.storageConfig['storage.s3.region'] }}</span>
           </a-form-item>
           <div v-if="formState.storageConfig['storage.type'] === 'Hadoop'">
-            <a-form-item
-              v-for="config in formState.storageConfigArray"
-              :key="config.label"
-              :label="config.label"
+            <a-form-item v-for="config in formState.storageConfigArray" 
:key="config.label" :label="config.label"
               class="g-flex-ac">
-              <a-upload
-                v-if="isEdit"
-                v-model:file-list="config.fileList"
-                name="file"
-                accept=".xml"
-                :showUploadList="false"
-                :action="uploadUrl"
-                :disabled="config.uploadLoading"
-                @change="(args) => uploadFile(args, config, 'STORAGE')"
-              >
-                <a-button type="primary" ghost :loading="config.uploadLoading" 
class="g-mr-12">{{ $t('upload') }}</a-button>
+              <a-upload v-if="isEdit" v-model:file-list="config.fileList" 
name="file" accept=".xml"
+                :showUploadList="false" :action="uploadUrl" 
:disabled="config.uploadLoading"
+                @change="(args) => uploadFile(args, config, 'STORAGE')">
+                <a-button type="primary" ghost :loading="config.uploadLoading" 
class="g-mr-12">{{ $t('upload')
+                  }}</a-button>
               </a-upload>
-              <span v-if="config.isSuccess || config.fileName" 
class="config-value" :class="{ 'view-active': !!config.fileUrl }" 
@click="viewFileDetail(config.fileUrl)">{{ config.fileName }}</span>
+              <span v-if="config.isSuccess || config.fileName" 
class="config-value"
+                :class="{ 'view-active': !!config.fileUrl }" 
@click="viewFileDetail(config.fileUrl)">{{ config.fileName
+                }}</span>
             </a-form-item>
           </div>
           <a-form-item>
-            <p class="header">{{$t('authenticationConfig')}}</p>
+            <p class="header">{{ $t('authenticationConfig') }}</p>
           </a-form-item>
           <a-form-item label="Type" :name="['authConfig', 'auth.type']" 
:rules="[{ required: isEdit }]">
-            <a-select
-              v-if="isEdit"
-              v-model:value="formState.authConfig['auth.type']"
-              :placeholder="placeholder.selectPh"
-              :options="authTypeOptions"
-            />
-            <span v-else 
class="config-value">{{formState.authConfig['auth.type']}}</span>
+            <a-select v-if="isEdit" 
v-model:value="formState.authConfig['auth.type']"
+              :placeholder="placeholder.selectPh" :options="authTypeOptions" />
+            <span v-else class="config-value">{{ 
formState.authConfig['auth.type'] }}</span>
           </a-form-item>
-          <a-form-item v-if="formState.authConfig['auth.type'] === 'SIMPLE'" 
label="Hadoop Username" :name="['authConfig', 'auth.simple.hadoop_username']" 
:rules="[{ required: isEdit }]">
+          <a-form-item v-if="formState.authConfig['auth.type'] === 'SIMPLE'" 
label="Hadoop Username"
+            :name="['authConfig', 'auth.simple.hadoop_username']" :rules="[{ 
required: isEdit }]">
             <a-input v-if="isEdit" 
v-model:value="formState.authConfig['auth.simple.hadoop_username']" />
-            <span v-else 
class="config-value">{{formState.authConfig['auth.simple.hadoop_username']}}</span>
+            <span v-else class="config-value">{{ 
formState.authConfig['auth.simple.hadoop_username'] }}</span>
           </a-form-item>
-          <a-form-item v-if="formState.authConfig['auth.type'] === 'KERBEROS'" 
label="Kerberos Principal" :name="['authConfig', 'auth.kerberos.principal']" 
:rules="[{ required: isEdit }]">
+          <a-form-item v-if="formState.authConfig['auth.type'] === 'KERBEROS'" 
label="Kerberos Principal"
+            :name="['authConfig', 'auth.kerberos.principal']" :rules="[{ 
required: isEdit }]">
             <a-input v-if="isEdit" 
v-model:value="formState.authConfig['auth.kerberos.principal']" />
-            <span v-else 
class="config-value">{{formState.authConfig['auth.kerberos.principal']}}</span>
+            <span v-else class="config-value">{{ 
formState.authConfig['auth.kerberos.principal'] }}</span>
           </a-form-item>
           <div v-if="formState.authConfig['auth.type'] === 'KERBEROS'">
-            <a-form-item
-              v-for="config in formState.authConfigArray"
-              :key="config.label"
-              :label="config.label"
+            <a-form-item v-for="config in formState.authConfigArray" 
:key="config.label" :label="config.label"
               class="g-flex-ac">
-              <a-upload
-                v-if="isEdit"
-                v-model:file-list="config.fileList"
-                name="file"
-                :accept="config.key === 'auth.kerberos.keytab' ? '.keytab' : 
'.conf'"
-                :showUploadList="false"
-                :action="uploadUrl"
-                :disabled="config.uploadLoading"
-                @change="(args) => uploadFile(args, config)"
-              >
-                <a-button type="primary" ghost :loading="config.uploadLoading" 
class="g-mr-12">{{$t('upload')}}</a-button>
+              <a-upload v-if="isEdit" v-model:file-list="config.fileList" 
name="file"
+                :accept="config.key === 'auth.kerberos.keytab' ? '.keytab' : 
'.conf'" :showUploadList="false"
+                :action="uploadUrl" :disabled="config.uploadLoading" 
@change="(args) => uploadFile(args, config)">
+                <a-button type="primary" ghost :loading="config.uploadLoading"
+                  class="g-mr-12">{{ $t('upload') }}</a-button>
               </a-upload>
-              <span v-if="config.isSuccess || config.fileName" 
class="config-value auth-filename" :class="{'view-active': !!config.fileUrl}" 
@click="viewFileDetail(config.fileUrl)" 
:title="config.fileName">{{config.fileName}}</span>
+              <span v-if="config.isSuccess || config.fileName" 
class="config-value auth-filename"
+                :class="{ 'view-active': !!config.fileUrl }" 
@click="viewFileDetail(config.fileUrl)"
+                :title="config.fileName">{{ config.fileName }}</span>
             </a-form-item>
           </div>
-          <a-form-item v-if="formState.authConfig['auth.type'] === 'AK/SK'" 
label="Access Key" :name="['authConfig', 'auth.ak_sk.access_key']" :rules="[{ 
required: isEdit }]">
+          <a-form-item v-if="formState.authConfig['auth.type'] === 'AK/SK'" 
label="Access Key"
+            :name="['authConfig', 'auth.ak_sk.access_key']" :rules="[{ 
required: isEdit }]">
             <a-input v-if="isEdit" 
v-model:value="formState.authConfig['auth.ak_sk.access_key']" />
-            <span v-else 
class="config-value">{{formState.authConfig['auth.ak_sk.access_key']}}</span>
+            <span v-else class="config-value">{{ 
formState.authConfig['auth.ak_sk.access_key'] }}</span>
           </a-form-item>
-          <a-form-item v-if="formState.authConfig['auth.type'] === 'AK/SK'" 
label="Secret Key" :name="['authConfig', 'auth.ak_sk.secret_key']" :rules="[{ 
required: isEdit }]">
+          <a-form-item v-if="formState.authConfig['auth.type'] === 'AK/SK'" 
label="Secret Key"
+            :name="['authConfig', 'auth.ak_sk.secret_key']" :rules="[{ 
required: isEdit }]">
             <a-input v-if="isEdit" 
v-model:value="formState.authConfig['auth.ak_sk.secret_key']" />
-            <span v-else 
class="config-value">{{formState.authConfig['auth.ak_sk.secret_key']}}</span>
+            <span v-else class="config-value">{{ 
formState.authConfig['auth.ak_sk.secret_key'] }}</span>
           </a-form-item>
           <a-form-item>
-            <p class="header">{{$t('properties')}}</p>
+            <p class="header">{{ $t('properties') }}</p>
           </a-form-item>
           <a-form-item>
             <Properties :propertiesObj="formState.properties" :isEdit="isEdit" 
ref="propertiesRef" />
           </a-form-item>
           <a-form-item>
-            <p class="header">{{$t('tableProperties')}}</p>
+            <p class="header">{{ $t('tableProperties') }}</p>
           </a-form-item>
           <a-form-item>
             <Properties :propertiesObj="formState.tableProperties" 
:isEdit="isEdit" ref="tablePropertiesRef" />
@@ -169,12 +143,12 @@ limitations under the License.
       </div>
     </div>
     <div v-if="isEdit" class="footer-btn">
-      <a-button type="primary" @click="handleSave" class="save-btn 
g-mr-12">{{$t('save')}}</a-button>
-      <a-button @click="handleCancle">{{$t('cancel')}}</a-button>
+      <a-button type="primary" @click="handleSave" class="save-btn g-mr-12">{{ 
$t('save') }}</a-button>
+      <a-button @click="handleCancle">{{ $t('cancel') }}</a-button>
     </div>
     <div v-if="!isEdit" class="footer-btn">
-      <a-button type="primary" @click="handleEdit" class="edit-btn 
g-mr-12">{{$t('edit')}}</a-button>
-      <a-button @click="handleRemove" 
class="remove-btn">{{$t('remove')}}</a-button>
+      <a-button type="primary" @click="handleEdit" class="edit-btn g-mr-12">{{ 
$t('edit') }}</a-button>
+      <a-button @click="handleRemove" class="remove-btn">{{ $t('remove') 
}}</a-button>
     </div>
     <u-loading v-if="loading" />
   </div>
@@ -184,13 +158,26 @@ limitations under the License.
 import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { getCatalogsTypes, getCatalogsSetting, saveCatalogsSetting, 
checkCatalogStatus, delCatalog } from '@/services/setting.services'
 import { ILableAndValue, ICatalogItem, IMap, IIOptimizeGroupItem } from 
'@/types/common.type'
-import { Modal, message, UploadChangeParam } from 'ant-design-vue-v3'
 import { useI18n } from 'vue-i18n'
 import Properties from './Properties.vue'
 import { usePlaceholder } from '@/hooks/usePlaceholder'
 import { useRoute } from 'vue-router'
 import { getResourceGroupsListAPI } from '@/services/optimize.service'
 
+import {
+  UploadChangeParam,
+  message,
+  Modal,
+  Select as ASelect,
+  Button as AButton,
+  Input as AInput,
+  Form as AForm,
+  FormItem as AFormItem,
+  Checkbox as ACheckbox,
+  CheckboxGroup as ACheckboxGroup,
+  Upload as AUpload
+} from 'ant-design-vue'
+
 interface IStorageConfigItem {
   label: string
   value: string
@@ -218,8 +205,8 @@ const typeShowMap = { 'Internal Catalog': 'Internal 
Catalog', 'External Catalog'
 
 const props = defineProps<{ isEdit: boolean }>()
 const emit = defineEmits<{
- (e: 'updateEdit', val: boolean, catalog?: ICatalogItem): void,
- (e: 'updateCatalogs'): void
+  (e: 'updateEdit', val: boolean, catalog?: ICatalogItem): void,
+  (e: 'updateCatalogs'): void
 }>()
 
 const { t } = useI18n()
@@ -242,9 +229,6 @@ const isNewCatalog = computed(() => {
 const isHiveMetastore = computed(() => {
   return formState.catalog.type === 'hive'
 })
-const isArcticMetastore = computed(() => {
-  return formState.catalog.type === 'ams'
-})
 const loading = ref<boolean>(false)
 const formRef = ref()
 const propertiesRef = ref()
@@ -263,7 +247,7 @@ const tableFormatText = {
   [tableFormatMap.MIXED_ICEBERG]: 'Mixed Iceberg',
   [tableFormatMap.PAIMON]: 'Paimon'
 }
-const storeSupportFormat: {[prop:string]: string[]} = {
+const storeSupportFormat: { [prop: string]: string[] } = {
   ams: [tableFormatMap.MIXED_ICEBERG, tableFormatMap.ICEBERG],
   hive: [tableFormatMap.MIXED_HIVE, tableFormatMap.MIXED_ICEBERG, 
tableFormatMap.ICEBERG, tableFormatMap.PAIMON],
   hadoop: [tableFormatMap.MIXED_ICEBERG, tableFormatMap.ICEBERG, 
tableFormatMap.PAIMON],
@@ -290,7 +274,7 @@ const typwShowOptions = ref([
   { label: typeShowMap['Internal Catalog'], value: typeShowMap['Internal 
Catalog'] },
   { label: typeShowMap['External Catalog'], value: typeShowMap['External 
Catalog'] }
 ])
-const formState:FormState = reactive({
+const formState: FormState = reactive({
   catalog: {
     name: '',
     type: 'ams',
@@ -344,16 +328,16 @@ watch(() => route.query,
   (value) => {
     value && initData()
   }, {
-    immediate: true,
-    deep: true
-  }
+  immediate: true,
+  deep: true
+}
 )
 const catalogTypeOps = reactive<ILableAndValue[]>([])
 const optimizerGroupList = ref<ILableAndValue[]>([])
 function initData() {
   getConfigInfo()
 }
-const getOptimizerGroupList = async() => {
+const getOptimizerGroupList = async () => {
   const res = await getResourceGroupsListAPI()
   const list = (res || []).map((item: IIOptimizeGroupItem) => ({ lable: 
item.resourceGroup.name, value: item.resourceGroup.name }))
   optimizerGroupList.value = list
@@ -610,7 +594,7 @@ function getFileIdParams() {
 function handleSave() {
   formRef.value
     .validateFields()
-    .then(async() => {
+    .then(async () => {
       const { catalog, tableFormatList, storageConfig, authConfig } = formState
       const properties = await propertiesRef.value.getProperties()
       const tableProperties = await tablePropertiesRef.value.getProperties()
@@ -641,7 +625,7 @@ function handleSave() {
         formRef.value.resetFields()
       }).catch(() => {
         message.error(`${t('save')} ${t('failed')}`)
-      }).finally (() => {
+      }).finally(() => {
         loading.value = false
       })
     })
@@ -656,7 +640,7 @@ function handleCancle() {
 async function deleteCatalogModal() {
   Modal.confirm({
     title: t('deleteCatalogModalTitle'),
-    onOk: async() => {
+    onOk: async () => {
       await delCatalog(formState.catalog.name)
       message.success(`${t('remove')} ${t('success')}`)
       emit('updateEdit', false, {})
@@ -709,38 +693,47 @@ onMounted(() => {
   flex-direction: column;
   border: 1px solid #e8e8f0;
   border-left: 0;
+
   .detail-content-wrap {
     height: 100%;
     padding-right: 200px;
     overflow: auto;
   }
+
   .content-wrap {
     display: flex;
     flex: 1;
     overflow: auto;
     flex-direction: column;
+
     .ant-form-item {
       margin-bottom: 8px;
     }
+
     :deep(.ant-form-item-label) {
-      > label {
+      >label {
         word-break: break-all;
         white-space: pre-wrap;
       }
+
       width: 280px;
       margin-right: 16px;
     }
+
     .header {
       font-size: 16px;
       font-weight: 600;
       color: #102048;
     }
+
     .view-active {
       color: @primary-color;
       cursor: pointer;
     }
+
     .config-value {
       word-break: break-all;
+
       &.auth-filename {
         max-width: 72%;
         overflow: hidden;
@@ -752,14 +745,18 @@ onMounted(() => {
       }
     }
   }
+
   .footer-btn {
     height: 44px;
     flex-shrink: 0;
     padding-top: 12px;
     background-color: #fff;
-    .edit-btn, .save-btn {
+
+    .edit-btn,
+    .save-btn {
       min-width: 60px;
     }
+
     .remove-btn {
       &:hover {
         background-color: #ff4d4f;
diff --git a/amoro-ams/amoro-ams-dashboard/src/views/catalogs/Properties.vue 
b/amoro-ams/amoro-ams-dashboard/src/views/catalogs/Properties.vue
index 0c5509cc6..f280b71ed 100644
--- a/amoro-ams/amoro-ams-dashboard/src/views/catalogs/Properties.vue
+++ b/amoro-ams/amoro-ams-dashboard/src/views/catalogs/Properties.vue
@@ -76,6 +76,8 @@ import { getUUid } from '@/utils/index'
 import { usePlaceholder } from '@/hooks/usePlaceholder'
 import { useI18n } from 'vue-i18n'
 
+import { Button as AButton, Table as ATable, Input as AInput, Form as AForm, 
FormItem as AFormItem } from 'ant-design-vue'
+
 const { t } = useI18n()
 const props = defineProps<{ propertiesObj: IMap<string>, isEdit: boolean }>()
 const propertiesColumns = shallowReactive([
diff --git a/amoro-ams/amoro-ams-dashboard/src/views/catalogs/index.vue 
b/amoro-ams/amoro-ams-dashboard/src/views/catalogs/index.vue
index f77489020..60aa38850 100644
--- a/amoro-ams/amoro-ams-dashboard/src/views/catalogs/index.vue
+++ b/amoro-ams/amoro-ams-dashboard/src/views/catalogs/index.vue
@@ -40,10 +40,11 @@ import { onMounted, reactive, ref } from 'vue'
 import { ICatalogItem } from '@/types/common.type'
 import { getCatalogList } from '@/services/table.service'
 import Detail from './Detail.vue'
-import { Modal, Empty } from 'ant-design-vue-v3'
 import { useI18n } from 'vue-i18n'
 import { onBeforeRouteLeave, useRoute, useRouter } from 'vue-router'
 
+import { Modal, Button as AButton, Empty as AEmpty } from 'ant-design-vue'
+
 const { t } = useI18n()
 const router = useRouter()
 const route = useRoute()
diff --git 
a/amoro-ams/amoro-ams-dashboard/src/views/hive-details/components/Details.vue 
b/amoro-ams/amoro-ams-dashboard/src/views/hive-details/components/Details.vue
index e374593a9..67d5ff3b7 100644
--- 
a/amoro-ams/amoro-ams-dashboard/src/views/hive-details/components/Details.vue
+++ 
b/amoro-ams/amoro-ams-dashboard/src/views/hive-details/components/Details.vue
@@ -47,6 +47,8 @@ import { shallowReactive } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { IColumns, DetailColumnItem } from '@/types/common.type'
 
+import { Table as ATable } from 'ant-design-vue'
+
 const { t } = useI18n()
 
 const primaryColumns: IColumns[] = shallowReactive([
diff --git 
a/amoro-ams/amoro-ams-dashboard/src/views/hive-details/components/ErrorMsg.vue 
b/amoro-ams/amoro-ams-dashboard/src/views/hive-details/components/ErrorMsg.vue
index c8d03e994..adad523f3 100644
--- 
a/amoro-ams/amoro-ams-dashboard/src/views/hive-details/components/ErrorMsg.vue
+++ 
b/amoro-ams/amoro-ams-dashboard/src/views/hive-details/components/ErrorMsg.vue
@@ -19,7 +19,7 @@ limitations under the License.
 
 <template>
   <a-modal
-    :visible="true"
+    v-model:open="open"
     :width="560"
     :title="`${$t('errorMessage')}`"
     :footer="null"
@@ -30,7 +30,10 @@ limitations under the License.
   </a-modal>
 </template>
 <script lang="ts" setup>
+import { Modal as AModal } from "ant-design-vue";
+import { ref } from "vue";
 
+const open = ref(true)
 const props = defineProps<{ msg: string }>()
 const emit = defineEmits<{
  (e: 'cancle'): void
diff --git 
a/amoro-ams/amoro-ams-dashboard/src/views/hive-details/components/Field.vue 
b/amoro-ams/amoro-ams-dashboard/src/views/hive-details/components/Field.vue
index 58be2b164..923f69e43 100644
--- a/amoro-ams/amoro-ams-dashboard/src/views/hive-details/components/Field.vue
+++ b/amoro-ams/amoro-ams-dashboard/src/views/hive-details/components/Field.vue
@@ -39,6 +39,8 @@ import { shallowReactive } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { DetailColumnItem } from '@/types/common.type'
 
+import { Table as ATable, Checkbox as ACheckbox } from 'ant-design-vue'
+
 const { t } = useI18n()
 
 const props = defineProps<{ fields: DetailColumnItem[], loading: boolean }>()
diff --git 
a/amoro-ams/amoro-ams-dashboard/src/views/hive-details/components/Partition.vue 
b/amoro-ams/amoro-ams-dashboard/src/views/hive-details/components/Partition.vue
index 4ce6ae263..15379dfa6 100644
--- 
a/amoro-ams/amoro-ams-dashboard/src/views/hive-details/components/Partition.vue
+++ 
b/amoro-ams/amoro-ams-dashboard/src/views/hive-details/components/Partition.vue
@@ -34,6 +34,8 @@ import { shallowReactive } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { DetailColumnItem } from '@/types/common.type'
 
+import { Table as ATable } from 'ant-design-vue'
+
 const { t } = useI18n()
 
 const props = defineProps<{ partitionFields: DetailColumnItem[], loading: 
boolean }>()
diff --git 
a/amoro-ams/amoro-ams-dashboard/src/views/hive-details/components/Properties.vue
 
b/amoro-ams/amoro-ams-dashboard/src/views/hive-details/components/Properties.vue
index 8e0ba1d1a..c454b6a81 100644
--- 
a/amoro-ams/amoro-ams-dashboard/src/views/hive-details/components/Properties.vue
+++ 
b/amoro-ams/amoro-ams-dashboard/src/views/hive-details/components/Properties.vue
@@ -75,7 +75,8 @@ import { CloseOutlined } from '@ant-design/icons-vue'
 import { getUpgradeProperties } from '@/services/table.service'
 import { getUUid } from '@/utils/index'
 import { usePlaceholder } from '@/hooks/usePlaceholder'
-// import { useI18n } from 'vue-i18n'
+
+import { Button as AButton, Input as AInput, Form as AForm, FormItem as 
AFormItem } from 'ant-design-vue'
 
 interface IItem {
   key: string
diff --git a/amoro-ams/amoro-ams-dashboard/src/views/hive-details/index.vue 
b/amoro-ams/amoro-ams-dashboard/src/views/hive-details/index.vue
index c02cfbbde..d082c72cb 100644
--- a/amoro-ams/amoro-ams-dashboard/src/views/hive-details/index.vue
+++ b/amoro-ams/amoro-ams-dashboard/src/views/hive-details/index.vue
@@ -43,6 +43,9 @@ limitations under the License.
 </template>
 
 <script lang="ts">
+// TODO: replace to antv-4. After all replacements are completed, switch to 
automatic import.
+import { Tabs, TabPane, Button as AButton } from 'ant-design-vue'
+
 import { computed, defineComponent, onBeforeUnmount, onMounted, reactive, ref, 
toRefs, watch } from 'vue'
 import UDetails from './components/Details.vue'
 import errorMsg from './components/ErrorMsg.vue'
@@ -55,7 +58,11 @@ export default defineComponent({
   name: 'Tables',
   components: {
     UDetails,
-    errorMsg
+    errorMsg,
+
+    ATabs: Tabs,
+    ATabPane: TabPane,
+    AButton
   },
   setup() {
     const upgradeStatus = upgradeStatusMap
diff --git a/amoro-ams/amoro-ams-dashboard/src/views/hive-details/upgrade.vue 
b/amoro-ams/amoro-ams-dashboard/src/views/hive-details/upgrade.vue
index 09fbc8822..e216e4e95 100644
--- a/amoro-ams/amoro-ams-dashboard/src/views/hive-details/upgrade.vue
+++ b/amoro-ams/amoro-ams-dashboard/src/views/hive-details/upgrade.vue
@@ -67,6 +67,8 @@ import otherProperties from './components/Properties.vue'
 import { DetailColumnItem, IMap } from '@/types/common.type'
 import { getHiveTableDetail, upgradeHiveTable } from '@/services/table.service'
 
+import { Button as AButton, Form as AForm, FormItem as AFormItem } from 
'ant-design-vue'
+
 const loading = ref<boolean>(false)
 const field = reactive<DetailColumnItem[]>([])
 const partitionFields = reactive<DetailColumnItem[]>([])
diff --git a/amoro-ams/amoro-ams-dashboard/src/views/login/index.vue 
b/amoro-ams/amoro-ams-dashboard/src/views/login/index.vue
index a291c3deb..8349561e9 100644
--- a/amoro-ams/amoro-ams-dashboard/src/views/login/index.vue
+++ b/amoro-ams/amoro-ams-dashboard/src/views/login/index.vue
@@ -80,11 +80,12 @@ limitations under the License.
 import { computed, defineComponent, onMounted, reactive } from 'vue'
 import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
 import loginService from '@/services/login.service'
-import { message } from 'ant-design-vue-v3'
 import { useRouter } from 'vue-router'
 import { usePlaceholder } from '@/hooks/usePlaceholder'
 import useStore from '@/store'
 
+import { message, Button as AButton, Input as AInput, InputPassword as 
AInputPassword, Form as AForm, FormItem as AFormItem } from 'ant-design-vue'
+
 interface FormState {
   username: string;
   password: string;
diff --git 
a/amoro-ams/amoro-ams-dashboard/src/views/optimize/components/List.vue 
b/amoro-ams/amoro-ams-dashboard/src/views/optimize/components/List.vue
index 1d756e5a1..a96fb5cf5 100644
--- a/amoro-ams/amoro-ams-dashboard/src/views/optimize/components/List.vue
+++ b/amoro-ams/amoro-ams-dashboard/src/views/optimize/components/List.vue
@@ -58,9 +58,10 @@ import { getOptimizerTableList, getResourceGroupsListAPI, 
releaseResource } from
 import { useI18n } from 'vue-i18n'
 import { usePagination } from '@/hooks/usePagination'
 import { bytesToSize, formatMS2Time, formatMS2DisplayTime } from '@/utils'
-import { Modal } from 'ant-design-vue-v3'
 import { useRouter } from 'vue-router'
 
+import { Modal, Select as ASelect, Table as ATable } from 'ant-design-vue'
+
 const { t } = useI18n()
 const router = useRouter()
 
diff --git 
a/amoro-ams/amoro-ams-dashboard/src/views/optimize/components/ScaleOut.vue 
b/amoro-ams/amoro-ams-dashboard/src/views/optimize/components/ScaleOut.vue
index f0f406b77..8856e63c0 100644
--- a/amoro-ams/amoro-ams-dashboard/src/views/optimize/components/ScaleOut.vue
+++ b/amoro-ams/amoro-ams-dashboard/src/views/optimize/components/ScaleOut.vue
@@ -40,6 +40,8 @@ import { usePlaceholder } from '@/hooks/usePlaceholder'
 import { IGroupItem } from '@/types/common.type'
 import { getOptimizerGroups, scaleoutResource } from 
'@/services/optimize.service'
 
+import { Modal as AModal, Select as ASelect, Input as AInput, Form as AForm, 
FormItem as AFormItem } from 'ant-design-vue'
+
 interface FormState {
   resourceGroup: undefined | string
   parallelism: number
diff --git 
a/amoro-ams/amoro-ams-dashboard/src/views/resource/components/GroupModal.vue 
b/amoro-ams/amoro-ams-dashboard/src/views/resource/components/GroupModal.vue
index 84f4571d5..7076d389c 100644
--- a/amoro-ams/amoro-ams-dashboard/src/views/resource/components/GroupModal.vue
+++ b/amoro-ams/amoro-ams-dashboard/src/views/resource/components/GroupModal.vue
@@ -73,7 +73,8 @@ import {
   updateResourceGroupsAPI
 } from '@/services/optimize.service'
 import Properties from '@/views/catalogs/Properties.vue'
-import { message } from 'ant-design-vue-v3'
+
+import { message, Modal as AModal, Select as ASelect, Input as AInput, Form as 
AForm, FormItem as AFormItem  } from 'ant-design-vue'
 
 import { useI18n } from 'vue-i18n'
 
diff --git 
a/amoro-ams/amoro-ams-dashboard/src/views/resource/components/List.vue 
b/amoro-ams/amoro-ams-dashboard/src/views/resource/components/List.vue
index 3d068abf0..523da332c 100644
--- a/amoro-ams/amoro-ams-dashboard/src/views/resource/components/List.vue
+++ b/amoro-ams/amoro-ams-dashboard/src/views/resource/components/List.vue
@@ -66,10 +66,11 @@ import { getOptimizerResourceList, 
getResourceGroupsListAPI, groupDeleteCheckAPI
 import { useI18n } from 'vue-i18n'
 import { usePagination } from '@/hooks/usePagination'
 import { mbToSize } from '@/utils'
-import { Modal, message } from 'ant-design-vue-v3'
+
+import { message, Modal, Table as ATable } from 'ant-design-vue'
+
 import { useRouter } from 'vue-router'
 import ScaleOut from '@/views/resource/components/ScaleOut.vue'
-import { dateFormat } from '@/utils/index'
 
 const { t } = useI18n()
 const router = useRouter()
@@ -97,14 +98,11 @@ const tableColumns = shallowReactive([
   { dataIndex: 'operationGroup', title: t('operation'), key: 'operationGroup', 
ellipsis: true, width: 230, scopedSlots: { customRender: 'operationGroup' } }
 ])
 const optimizerColumns = shallowReactive([
-  { dataIndex: 'jobId', title: t('optimizerId'), width: '15%', ellipsis: true 
},
-  { dataIndex: 'token', title: t('token'), width: '10%', ellipsis: true },
+  { dataIndex: 'index', title: t('order'), width: 80, ellipsis: true },
   { dataIndex: 'groupName', title: t('optimizerGroup'), ellipsis: true },
   { dataIndex: 'container', title: t('container'), ellipsis: true },
   { dataIndex: 'jobStatus', title: t('status'), ellipsis: true },
-  { dataIndex: 'resourceAllocation', title: t('resourceAllocation'), width: 
'10%', ellipsis: true },
-  { dataIndex: 'startTime', title: t('startTime'), width: 172, ellipsis: true 
},
-  { dataIndex: 'touchTime', title: t('touchTime'), width: 172, ellipsis: true 
},
+  { dataIndex: 'resourceAllocation', title: t('resourceAllocation'), width: 
'20%', ellipsis: true },
   { dataIndex: 'operation', title: t('operation'), key: 'operation', ellipsis: 
true, width: 160, scopedSlots: { customRender: 'operationGroup' } }
 ])
 const pagination = reactive(usePagination())
@@ -173,8 +171,6 @@ async function getOptimizersList () {
     (list || []).forEach((p: IOptimizeResourceTableItem, index: number) => {
       p.resourceAllocation = `${p.coreNumber} ${t('core')} 
${mbToSize(p.memory)}`
       p.index = (pagination.current - 1) * pagination.pageSize + index + 1
-      p.startTime = p.startTime ? dateFormat(p.startTime) : '-'
-      p.touchTime = p.touchTime ? dateFormat(p.touchTime) : '-'
       optimizersList.push(p)
     })
   } catch (error) {
diff --git 
a/amoro-ams/amoro-ams-dashboard/src/views/resource/components/ScaleOut.vue 
b/amoro-ams/amoro-ams-dashboard/src/views/resource/components/ScaleOut.vue
index 9876af5d5..77dd78bd7 100644
--- a/amoro-ams/amoro-ams-dashboard/src/views/resource/components/ScaleOut.vue
+++ b/amoro-ams/amoro-ams-dashboard/src/views/resource/components/ScaleOut.vue
@@ -50,6 +50,8 @@ import { usePlaceholder } from '@/hooks/usePlaceholder'
 import { IIOptimizeGroupItem } from '@/types/common.type'
 import { scaleoutResource } from '@/services/optimize.service'
 
+import { Modal as AModal, Input as AInput, Form as AForm, FormItem as 
AFormItem  } from 'ant-design-vue'
+
 interface FormState {
   resourceGroup: undefined | string;
   parallelism: number;
diff --git a/amoro-ams/amoro-ams-dashboard/src/views/resource/index.vue 
b/amoro-ams/amoro-ams-dashboard/src/views/resource/index.vue
index b6aa3aaab..2ae00d815 100644
--- a/amoro-ams/amoro-ams-dashboard/src/views/resource/index.vue
+++ b/amoro-ams/amoro-ams-dashboard/src/views/resource/index.vue
@@ -71,6 +71,9 @@ limitations under the License.
 </template>
 
 <script lang="ts">
+// TODO: replace to antv-4. After all replacements are completed, switch to 
automatic import.
+import { Tabs, TabPane, Button as AButton } from 'ant-design-vue'
+
 import { ILableAndValue, IIOptimizeGroupItem } from '@/types/common.type'
 import {
   defineComponent,
@@ -93,7 +96,11 @@ export default defineComponent({
   components: {
     List,
     GroupModal,
-    TableList
+    TableList,
+
+    ATabs: Tabs,
+    ATabPane: TabPane,
+    AButton
   },
   setup() {
     const { t } = useI18n()
@@ -178,12 +185,6 @@ export default defineComponent({
     padding: 0 12px;
     border: 1px solid #e5e5e5;
   }
-  :deep(.ant-tabs-content-holder) {
-    // padding: 0 24px;
-  }
-  :deep(.ant-tabs-nav) {
-    // padding: 0 12px;
-  }
   .table-name {
     color: @primary-color;
     &:hover {
diff --git a/amoro-ams/amoro-ams-dashboard/src/views/settings/index.vue 
b/amoro-ams/amoro-ams-dashboard/src/views/settings/index.vue
index 9070ccb33..6874926b0 100644
--- a/amoro-ams/amoro-ams-dashboard/src/views/settings/index.vue
+++ b/amoro-ams/amoro-ams-dashboard/src/views/settings/index.vue
@@ -73,6 +73,9 @@ limitations under the License.
 </template>
 
 <script lang="ts" setup>
+// TODO: replace to antv-4. After all replacements are completed, switch to 
automatic import.
+import { Tabs as ATabs, TabPane as ATabPane, Table as ATable, Collapse as 
ACollapse, CollapsePanel as ACollapsePanel } from 'ant-design-vue'
+
 import { reactive, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { IColumns, IKeyAndValue, IContainerSetting } from '@/types/common.type'
diff --git 
a/amoro-ams/amoro-ams-dashboard/src/views/tables/components/Details.vue 
b/amoro-ams/amoro-ams-dashboard/src/views/tables/components/Details.vue
index cc7eea117..359983779 100644
--- a/amoro-ams/amoro-ams-dashboard/src/views/tables/components/Details.vue
+++ b/amoro-ams/amoro-ams-dashboard/src/views/tables/components/Details.vue
@@ -86,6 +86,8 @@ import { DetailColumnItem, IBaseDetailInfo, IColumns, IMap, 
PartitionColumnItem
 import { getTableDetail } from '@/services/table.service'
 import { dateFormat } from '@/utils'
 
+import { Table as ATable } from 'ant-design-vue'
+
 const { t } = useI18n()
 const emit = defineEmits<{
  (e: 'setBaseDetailInfo', data: IBaseDetailInfo): void
diff --git 
a/amoro-ams/amoro-ams-dashboard/src/views/tables/components/Files.vue 
b/amoro-ams/amoro-ams-dashboard/src/views/tables/components/Files.vue
index ec4d09cc4..ea5784184 100644
--- a/amoro-ams/amoro-ams-dashboard/src/views/tables/components/Files.vue
+++ b/amoro-ams/amoro-ams-dashboard/src/views/tables/components/Files.vue
@@ -95,6 +95,9 @@ import { useRoute } from 'vue-router'
 import { dateFormat } from '@/utils'
 import { SearchOutlined, CloseCircleOutlined } from '@ant-design/icons-vue'
 
+import { Button as AButton, Table as ATable, Tooltip as ATooltip, InputSearch 
as AInputSearch, Breadcrumb as ABreadcrumb, BreadcrumbItem as ABreadcrumbItem } 
from 'ant-design-vue'
+
+
 const hasBreadcrumb = ref<boolean>(false)
 const { t } = useI18n()
 const columns: IColumns[] = shallowReactive([
diff --git 
a/amoro-ams/amoro-ams-dashboard/src/views/tables/components/Operations.vue 
b/amoro-ams/amoro-ams-dashboard/src/views/tables/components/Operations.vue
index 89db217ae..d4ffdb94e 100644
--- a/amoro-ams/amoro-ams-dashboard/src/views/tables/components/Operations.vue
+++ b/amoro-ams/amoro-ams-dashboard/src/views/tables/components/Operations.vue
@@ -59,7 +59,8 @@ import { getOperations } from '@/services/table.service'
 import { useRoute } from 'vue-router'
 import { dateFormat } from '@/utils'
 import useClipboard from 'vue-clipboard3'
-import { message } from 'ant-design-vue-v3'
+
+import { message, Modal as AModal, Button as AButton, Table as ATable } from 
'ant-design-vue'
 
 const { toClipboard } = useClipboard()
 const { t } = useI18n()
diff --git 
a/amoro-ams/amoro-ams-dashboard/src/views/tables/components/Optimizing.vue 
b/amoro-ams/amoro-ams-dashboard/src/views/tables/components/Optimizing.vue
index 6f6c845a6..7716139f3 100644
--- a/amoro-ams/amoro-ams-dashboard/src/views/tables/components/Optimizing.vue
+++ b/amoro-ams/amoro-ams-dashboard/src/views/tables/components/Optimizing.vue
@@ -1,4 +1,3 @@
-
 <!--
 Licensed to the Apache Software Foundation (ASF) under one
 or more contributor license agreements.  See the NOTICE file
@@ -20,14 +19,8 @@ limitations under the License.
 <template>
   <div class="table-optimizing">
     <template v-if="!hasBreadcrumb">
-      <a-table
-        rowKey="processId"
-        :columns="columns"
-        :data-source="dataSource"
-        :pagination="pagination"
-        :loading="loading"
-        @change="change"
-      >
+      <a-table rowKey="processId" :columns="columns" :data-source="dataSource" 
:pagination="pagination"
+        :loading="loading" @change="change">
         <template #headerCell="{ column }">
           <template v-if="column.dataIndex === 'tasks'">
             <div class="">{{ column.title }}</div>
@@ -45,15 +38,19 @@ limitations under the License.
         <template #bodyCell="{ record, column }">
           <template v-if="column.dataIndex === 'processId'">
             <a-button type="link" @click="toggleBreadcrumb(record.processId, 
record.status)">
-              {{record.processId}}
+              {{ record.processId }}
             </a-button>
           </template>
           <template v-if="column.dataIndex === 'status'">
             <div class="g-flex-ac">
-              <span :style="{ 'background-color': 
(STATUS_CONFIG[record.status] || {}).color }" class="status-icon"></span>
+              <span :style="{ 'background-color': 
(STATUS_CONFIG[record.status] || {}).color }"
+                class="status-icon"></span>
               <span>{{ record.status }}</span>
-              <a-tooltip v-if="record.status === 'FAILED'" 
placement="topRight" class="g-ml-4" overlayClassName="table-failed-tip">
-                <template #title><div class="tip-title">{{ record.failReason 
}}</div></template>
+              <a-tooltip v-if="record.status === 'FAILED'" 
placement="topRight" class="g-ml-4"
+                overlayClassName="table-failed-tip">
+                <template #title>
+                  <div class="tip-title">{{ record.failReason }}</div>
+                </template>
                 <question-circle-outlined />
               </a-tooltip>
             </div>
@@ -68,26 +65,20 @@ limitations under the License.
       </a-table>
     </template>
     <template v-else>
-    <a-row>
-      <a-col :span="18">
-        <a-breadcrumb separator=">">
-          <a-breadcrumb-item @click="toggleBreadcrumb" 
class="text-active">All</a-breadcrumb-item>
-          <a-breadcrumb-item>{{ `${$t('processId')} 
${processId}`}}</a-breadcrumb-item>
-        </a-breadcrumb>
-      </a-col>
-      <a-col :span="6">
-        <a-button type="primary" v-model:disabled="cancelDisabled" 
class="g-mb-16" @click="cancel" style="float: right">{{ t("cancelProcess") 
}}</a-button>
-      </a-col>
-    </a-row>
-      <a-table
-        rowKey="taskId"
-        :columns="breadcrumbColumns"
-        :data-source="breadcrumbDataSource"
-        :pagination="breadcrumbPagination"
-        :loading="loading"
-        @change="change"
-        class="g-mt-8"
-      >
+      <a-row>
+        <a-col :span="18">
+          <a-breadcrumb separator=">">
+            <a-breadcrumb-item @click="toggleBreadcrumb" 
class="text-active">All</a-breadcrumb-item>
+            <a-breadcrumb-item>{{ `${$t('processId')} ${processId}` 
}}</a-breadcrumb-item>
+          </a-breadcrumb>
+        </a-col>
+        <a-col :span="6">
+          <a-button type="primary" v-model:disabled="cancelDisabled" 
class="g-mb-16" @click="cancel"
+            style="float: right">{{ t("cancelProcess") }}</a-button>
+        </a-col>
+      </a-row>
+      <a-table rowKey="taskId" :columns="breadcrumbColumns" 
:data-source="breadcrumbDataSource"
+        :pagination="breadcrumbPagination" :loading="loading" @change="change" 
class="g-mt-8">
         <template #headerCell="{ column }">
           <template v-if="column.dataIndex === 'inputFilesDesc'">
             <div class="">{{ column.title }}</div>
@@ -101,16 +92,20 @@ limitations under the License.
         <template #bodyCell="{ column, record }">
           <template v-if="column.dataIndex === 'partitionData'">
             <a-tooltip>
-              <template #title>{{record.partitionData}}</template>
-              <span>{{record.partitionData}}</span>
+              <template #title>{{ record.partitionData }}</template>
+              <span>{{ record.partitionData }}</span>
             </a-tooltip>
           </template>
           <template v-if="column.dataIndex === 'status'">
             <div class="g-flex-ac">
-              <span :style="{ 'background-color': 
(TASK_STATUS_CONFIG[record.status] || {}).color }" class="status-icon"></span>
+              <span :style="{ 'background-color': 
(TASK_STATUS_CONFIG[record.status] || {}).color }"
+                class="status-icon"></span>
               <span>{{ record.status }}</span>
-              <a-tooltip v-if="record.status === 'FAILED'" 
placement="topRight" class="g-ml-4" overlayClassName="table-failed-tip">
-                <template #title><div class="tip-title">{{ record.failReason 
}}</div></template>
+              <a-tooltip v-if="record.status === 'FAILED'" 
placement="topRight" class="g-ml-4"
+                overlayClassName="table-failed-tip">
+                <template #title>
+                  <div class="tip-title">{{ record.failReason }}</div>
+                </template>
                 <question-circle-outlined />
               </a-tooltip>
             </div>
@@ -133,11 +128,12 @@ import { useI18n } from 'vue-i18n'
 import { usePagination } from '@/hooks/usePagination'
 import { IColumns, BreadcrumbOptimizingItem } from '@/types/common.type'
 import { getOptimizingProcesses, getTasksByOptimizingProcessId, 
cancelOptimizingProcess } from '@/services/table.service'
-import { Modal, message } from 'ant-design-vue-v3'
 import { useRoute } from 'vue-router'
 import { QuestionCircleOutlined } from '@ant-design/icons-vue'
 import { bytesToSize, dateFormat, formatMS2Time } from '@/utils/index'
 
+import { Modal, Col as ACol, Row as ARow, Button as AButton, Table as ATable, 
Tooltip as ATooltip, Breadcrumb as ABreadcrumb, BreadcrumbItem as 
ABreadcrumbItem } from 'ant-design-vue'
+
 const hasBreadcrumb = ref<boolean>(false)
 
 // const statusMap = { RUNNING: 'RUNNING', CLOSED: 'CLOSED', SUCCESS: 
'SUCCESS', FAILED: 'FAILED' }
@@ -237,7 +233,7 @@ async function cancel() {
     content: '',
     okText: '',
     cancelText: '',
-    onOk: async() => {
+    onOk: async () => {
       try {
         loading.value = true
         const result = await cancelOptimizingProcess({
@@ -328,19 +324,24 @@ onMounted(() => {
 <style lang="less" scoped>
 .table-optimizing {
   padding: 18px 24px;
+
   :deep(.ant-table-thead > tr > 
th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before)
 {
     height: 100% !important;
   }
+
   :deep(.ant-table-thead > tr:not(:last-child) > th[colspan]) {
     border-bottom: 1px solid #e8e8f0;
   }
+
   :deep(.ant-table-thead > tr > th) {
     padding: 4px 16px !important;
   }
+
   :deep(.ant-table-thead > tr > th) {
     padding: 4px 16px !important;
   }
 }
+
 .status-icon {
   width: 8px;
   height: 8px;
@@ -356,15 +357,18 @@ onMounted(() => {
     color: #1890ff;
     cursor: pointer;
   }
+
   .ant-btn-link {
     padding: 0;
   }
 }
+
 .table-failed-tip {
-  .ant-tooltip-content{
+  .ant-tooltip-content {
     width: 800px;
   }
-  .tip-title{
+
+  .tip-title {
     display: block;
     max-height: 700px;
     overflow: auto;
diff --git 
a/amoro-ams/amoro-ams-dashboard/src/views/tables/components/Selector.vue 
b/amoro-ams/amoro-ams-dashboard/src/views/tables/components/Selector.vue
index 9781f1ef4..7b570a8c9 100644
--- a/amoro-ams/amoro-ams-dashboard/src/views/tables/components/Selector.vue
+++ b/amoro-ams/amoro-ams-dashboard/src/views/tables/components/Selector.vue
@@ -84,14 +84,14 @@ limitations under the License.
 </template>
 
 <script lang="ts" setup>
+// TODO: replace to antv-4. After all replacements are completed, switch to 
automatic import.
+import { Dropdown as ADropdown, Tabs as ATabs, TabPane as ATabPane, Select as 
ASelect, SelectOption as ASelectOption, Button as AButton, Input as AInput } 
from 'ant-design-vue'
+
 import { computed, onMounted, reactive, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
 import { CheckOutlined, DownOutlined } from '@ant-design/icons-vue'
 import { branchTypeMap, IBranchItem, IServiceBranchItem, operationMap } from 
'@/types/common.type'
 import { getBranches, getTags } from '@/services/table.service'
 
-const { t } = useI18n()
-
 const props = defineProps({ catalog: String, db: String, table: String, 
disabled: Boolean })
 const disabled = computed(() => props.disabled)
 
diff --git 
a/amoro-ams/amoro-ams-dashboard/src/views/tables/components/Snapshots.vue 
b/amoro-ams/amoro-ams-dashboard/src/views/tables/components/Snapshots.vue
index 8f250a0ed..19a02ea0a 100644
--- a/amoro-ams/amoro-ams-dashboard/src/views/tables/components/Snapshots.vue
+++ b/amoro-ams/amoro-ams-dashboard/src/views/tables/components/Snapshots.vue
@@ -87,6 +87,8 @@ limitations under the License.
 </template>
 
 <script lang="ts" setup>
+import { Col as ACol, Row as ARow, Button as AButton, Table as ATable, Tooltip 
as ATooltip, Breadcrumb as ABreadcrumb, BreadcrumbItem as ABreadcrumbItem } 
from 'ant-design-vue'
+
 import { onMounted, reactive, ref, shallowReactive } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { usePagination } from '@/hooks/usePagination'
diff --git a/amoro-ams/amoro-ams-dashboard/src/views/tables/create.vue 
b/amoro-ams/amoro-ams-dashboard/src/views/tables/create.vue
index 9aba0ae50..24461cd22 100644
--- a/amoro-ams/amoro-ams-dashboard/src/views/tables/create.vue
+++ b/amoro-ams/amoro-ams-dashboard/src/views/tables/create.vue
@@ -56,11 +56,13 @@ limitations under the License.
 
 <script lang="ts" setup>
 import { reactive, ref } from 'vue'
-import type { SelectProps } from 'ant-design-vue-v3'
 import { LeftOutlined } from '@ant-design/icons-vue'
 import { TableBasicInfo } from '@/types/common.type'
 import { usePlaceholder } from '@/hooks/usePlaceholder'
 
+import { Select as ASelect, Input as AInput, Form as AForm, FormItem as 
AFormItem  } from 'ant-design-vue'
+import type { SelectProps } from 'ant-design-vue'
+
 const emit = defineEmits<{
  (e: 'goBack'): void
 }>()
diff --git a/amoro-ams/amoro-ams-dashboard/src/views/tables/index.vue 
b/amoro-ams/amoro-ams-dashboard/src/views/tables/index.vue
index de2c6b7c8..f325f1837 100644
--- a/amoro-ams/amoro-ams-dashboard/src/views/tables/index.vue
+++ b/amoro-ams/amoro-ams-dashboard/src/views/tables/index.vue
@@ -36,10 +36,6 @@ limitations under the License.
             <p>{{$t('tableFormat')}}: <span 
class="text-color">{{baseInfo.tableFormat}}</span></p>
           </div>
         </div>
-        <!-- <div class="table-edit">
-          <edit-outlined @click="editTable" class="g-mr-8" />
-          <delete-outlined @click="delTable" />
-        </div> -->
       </div>
       <div class="content">
         <a-tabs v-model:activeKey="activeKey" destroyInactiveTabPane 
@change="onChangeTab">
@@ -61,8 +57,10 @@ limitations under the License.
 </template>
 
 <script lang="ts">
+// TODO: replace to antv-4. After all replacements are completed, switch to 
automatic import.
+import { Tabs, TabPane, Divider } from 'ant-design-vue'
+
 import { defineComponent, reactive, toRefs, watch, shallowReactive, computed, 
onMounted, ref, nextTick } from 'vue'
-// import { EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'
 import UDetails from './components/Details.vue'
 import UFiles from './components/Files.vue'
 import UOperations from './components/Operations.vue'
@@ -70,18 +68,20 @@ import USnapshots from './components/Snapshots.vue'
 import UOptimizing from './components/Optimizing.vue'
 import { useRoute, useRouter } from 'vue-router'
 import useStore from '@/store/index'
-import { IBaseDetailInfo, IMap } from '@/types/common.type'
+import { IBaseDetailInfo } from '@/types/common.type'
 
 export default defineComponent({
   name: 'Tables',
   components: {
-    // EditOutlined,
-    // DeleteOutlined,
     UDetails,
     UFiles,
     UOperations,
     USnapshots,
-    UOptimizing
+    UOptimizing,
+
+    ATabs: Tabs,
+    ATabPane: TabPane,
+    ADivider: Divider
   },
   setup() {
     const router = useRouter()
@@ -91,8 +91,6 @@ export default defineComponent({
     const detailRef = ref()
 
     const tabConfigs = shallowReactive([
-      // { key: 'Details' },
-      // { key: 'Files' },
       { key: 'Snapshots', label: 'Snapshots' },
       { key: 'Optimizing', label: 'Optimizing' },
       { key: 'Operations', label: 'Operations' }
@@ -122,17 +120,17 @@ export default defineComponent({
       state.detailLoaded = true
       state.baseInfo = { ...baseInfo }
     }
-    const onChangeTab = (key: string) => {
+
+    const onChangeTab = (key: string | number) => {
       const query = { ...route.query }
-      query.tab = key
+      query.tab = key.toString()
       router.replace({ query: { ...query } })
     }
 
-    const editTable = () => {}
-    const delTable = () => {}
     const hideTablesMenu = () => {
       store.updateTablesMenu(false)
     }
+
     const goBack = () => {
       state.isSecondaryNav = false
       router.back()
@@ -172,8 +170,6 @@ export default defineComponent({
       tabConfigs,
       store,
       isIceberg,
-      editTable,
-      delTable,
       setBaseDetailInfo,
       hideTablesMenu,
       goBack,
@@ -213,10 +209,6 @@ export default defineComponent({
     .text-color {
       color: #7CB305;
     }
-    .ant-divider-vertical {
-      height: 1.2em;
-      margin: 0 12px;
-    }
   }
   .table-edit {
     font-size: 18px;
diff --git a/amoro-ams/amoro-ams-dashboard/src/views/terminal/index.vue 
b/amoro-ams/amoro-ams-dashboard/src/views/terminal/index.vue
index 7121d4578..3e85ebebd 100644
--- a/amoro-ams/amoro-ams-dashboard/src/views/terminal/index.vue
+++ b/amoro-ams/amoro-ams-dashboard/src/views/terminal/index.vue
@@ -119,10 +119,11 @@ import SqlLog from './components/sql-log.vue'
 import { ICatalogItem, IDebugResult, ILableAndValue, IMap, debugResultBgcMap } 
from '@/types/common.type'
 import { executeSql, getExampleSqlCode, getJobDebugResult, getLogsResult, 
getShortcutsList, stopSql, getLastDebugInfo } from '@/services/terminal.service'
 import { CheckCircleOutlined, CloseCircleOutlined, LoadingOutlined } from 
'@ant-design/icons-vue'
-import { message } from 'ant-design-vue-v3'
 import { getCatalogList } from '@/services/table.service'
 import { usePlaceholder } from '@/hooks/usePlaceholder'
 
+import { message, Select as ASelect, Button as AButton, Tooltip as ATooltip } 
from 'ant-design-vue'
+
 interface ISessionInfo {
   sessionId: string
   sqlNumber: number
@@ -141,7 +142,8 @@ export default defineComponent({
     SqlLog,
     CheckCircleOutlined,
     CloseCircleOutlined,
-    LoadingOutlined
+    LoadingOutlined,
+    ASelect
   },
   setup() {
     const placeholder = reactive(usePlaceholder())

Reply via email to