[AMORO-3139] Improve list content of optimizing page (apache#3201)

* [AMORO-3139] Improve list content of optimizing page

amoro-web/mock/modules/optimize.js

@@ -37,6 +37,15 @@ export default [
       result: ['container1', 'container2']
     }),
   },
+  {
+    url: '/mock/ams/v1/optimize/actions',
+    method: 'get',
+    response: () => ({
+      code: 200,
+      msg: 'success',
+      result: ['major', 'minor', 'clean', 'idle', 'pending']
+    }),
+  },
   {
     url: '/mock/ams/v1/optimize/optimizerGroups/:groups/tables',
     method: 'get',

amoro-web/src/services/optimize.service.ts

@@ -22,17 +22,22 @@ export function getOptimizerGroups() {
   return request.get('ams/v1/optimize/optimizerGroups')
 }
 
+export function getOptimizerAction() {
+  return request.get('/ams/v1/optimize/actions')
+}
+
 export function getOptimizerTableList(
   params: {
     optimizerGroup: string
     dbSearchInput: string
     tableSearchInput: string
     page: number
     pageSize: number
+    actions: string[]
   },
 ) {
-  const { optimizerGroup, dbSearchInput, tableSearchInput, page, pageSize } = params
-  return request.get(`ams/v1/optimize/optimizerGroups/${optimizerGroup}/tables`, { params: { dbSearchInput, tableSearchInput, page, pageSize } })
+  const { optimizerGroup, dbSearchInput, tableSearchInput, page, pageSize, actions } = params
+  return request.get(`ams/v1/optimize/optimizerGroups/${optimizerGroup}/tables`, { params: { dbSearchInput, tableSearchInput, page, pageSize, actions } })
 }
 
 export function getOptimizerResourceList(

amoro-web/src/types/common.type.ts

@@ -271,7 +271,6 @@ export interface IOptimizeTableItem {
   quotaOccupationDesc: string
   duration: number
   durationDesc: string
-  durationDisplay: string
   fileSizeDesc: string
   tableIdentifier: ITableIdentifier
   tableNameOnly?: string

amoro-web/src/utils/table.ts

@@ -0,0 +1,26 @@
+/*
+  * 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.
+  */
+
+/**
+ * Calculate table max width
+ */
+export function getTableMaxWidth(columns: Array<{ width: number }>) {
+  return columns.reduce((pre: number, cur: { width: number }) => {
+    return pre + cur.width
+  }, 0)
+}

amoro-web/src/views/optimize/components/List.vue

@@ -17,15 +17,16 @@ limitations under the License.
 / -->
 
 <script lang="ts" setup>
-import { onMounted, reactive, ref, shallowReactive } from 'vue'
+import { computed, onMounted, reactive, ref, shallowReactive } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import { Modal } from 'ant-design-vue'
 import type { IIOptimizeGroupItem, ILableAndValue, IOptimizeResourceTableItem, IOptimizeTableItem } from '@/types/common.type'
-import { getOptimizerTableList, getResourceGroupsListAPI, releaseResource } from '@/services/optimize.service'
+import { getOptimizerAction, getOptimizerTableList, getResourceGroupsListAPI, releaseResource } from '@/services/optimize.service'
 import { usePagination } from '@/hooks/usePagination'
 import { usePlaceholder } from '@/hooks/usePlaceholder'
 import { bytesToSize, formatMS2DisplayTime, formatMS2Time } from '@/utils'
+import { getTableMaxWidth } from '@/utils/table'
 
 const { t } = useI18n()
 const router = useRouter()
@@ -44,24 +45,35 @@ const loading = ref<boolean>(false)
 const releaseLoading = ref<boolean>(false)
 const optimizerGroupList = ref<ILableAndValue[]>([])
 
-const columns = shallowReactive([
-  { dataIndex: 'tableName', title: t('table'), ellipsis: true, scopedSlots: { customRender: 'tableName' } },
-  { dataIndex: 'groupName', title: t('optimizerGroup'), width: '16%', ellipsis: true },
-  { dataIndex: 'optimizeStatus', title: t('optimizingStatus'), width: '16%', ellipsis: true },
-  { dataIndex: 'durationDisplay', title: t('duration'), width: '10%', ellipsis: true },
-  { dataIndex: 'fileCount', title: t('fileCount'), width: '10%', ellipsis: true },
-  { dataIndex: 'fileSizeDesc', title: t('fileSize'), width: '10%', ellipsis: true },
-  { dataIndex: 'quota', title: t('quota'), width: '10%', ellipsis: true },
-  { dataIndex: 'quotaOccupationDesc', title: t('occupation'), width: 120, ellipsis: true },
+const columns = computed(() => [
+  { dataIndex: 'tableName', title: t('table'), width: 200, scopedSlots: { customRender: 'tableName' } },
+  { dataIndex: 'groupName', title: t('optimizerGroup'), width: 180, ellipsis: true },
+  { dataIndex: 'optimizeStatus', title: t('optimizingStatus'), width: 240, ellipsis: true },
+  { dataIndex: 'duration', title: t('duration'), width: 150, ellipsis: true },
+  { dataIndex: 'fileCount', title: t('fileCount'), width: 150, ellipsis: true },
+  { dataIndex: 'fileSizeDesc', title: t('fileSize'), width: 150, ellipsis: true },
+  { dataIndex: 'quota', title: t('quota'), width: 150, ellipsis: true },
+  { dataIndex: 'quotaOccupation', title: t('occupation'), width: 120, ellipsis: true },
 ])
 
 const pagination = reactive(usePagination())
 const dataSource = ref<IOptimizeTableItem[]>([])
 const optimizerGroup = ref<ILableAndValue>()
+const actions = ref<string[]>()
 const dbSearchInput = ref<ILableAndValue>()
 const tableSearchInput = ref<ILableAndValue>()
 const placeholder = reactive(usePlaceholder())
 
+const actionOptions = ref<string[]>([])
+async function fetchOptimizerAction() {
+  try {
+    const res = await getOptimizerAction()
+    actionOptions.value = (res || []).map((value: string) => ({ label: value, value }))
+  }
+  catch (error) {
+  }
+}
+
 async function getOptimizerGroupList() {
   const res = await getResourceGroupsListAPI()
   const list = (res || []).map((item: IIOptimizeGroupItem) => ({ lable: item.resourceGroup.name, value: item.resourceGroup.name }))
@@ -84,6 +96,7 @@ async function getTableList() {
       tableSearchInput: tableSearchInput.value || '',
       page: pagination.current,
       pageSize: pagination.pageSize,
+      actions: actions.value,
     }
     const result = await getOptimizerTableList(params as any)
     const { list, total } = result
@@ -93,7 +106,6 @@ async function getTableList() {
         ...p,
         quotaOccupationDesc: p.quotaOccupation - 0.0005 > 0 ? `${(p.quotaOccupation * 100).toFixed(1)}%` : '0',
         durationDesc: p.duration ? formatMS2Time(p.duration) : '-',
-        durationDisplay: formatMS2DisplayTime(p.duration || 0),
         fileSizeDesc: bytesToSize(p.fileSize),
       }
     })
@@ -133,6 +145,7 @@ function changeTable({ current = pagination.current, pageSize = pagination.pageS
   pagination.current = current
   const resetPage = pageSize !== pagination.pageSize
   pagination.pageSize = pageSize
+
   refresh(resetPage)
 }
 
@@ -155,9 +168,10 @@ function reset() {
   refresh(true)
 }
 
-onMounted(() => {
+onMounted(async () => {
   refresh()
-  getOptimizerGroupList()
+  await getOptimizerGroupList()
+  await fetchOptimizerAction()
 })
 </script>
 
@@ -179,6 +193,11 @@ onMounted(() => {
         :placeholder="placeholder.filterTablePh"
       />
 
+      <a-select
+        v-model:value="actions" allow-clear placeholder="Action" :options="actionOptions" mode="multiple"
+        style="min-width: 150px;" @change="refresh"
+      />
+
       <a-button type="primary" @click="refresh">
         {{ t('search') }}
       </a-button>
@@ -187,18 +206,34 @@ onMounted(() => {
       </a-button>
     </a-space>
     <a-table
-      class="ant-table-common" :columns="columns" :data-source="dataSource" :pagination="pagination"
-      :loading="loading" @change="changeTable"
+      :columns="columns"
+      :data-source="dataSource"
+      :pagination="pagination"
+      :loading="loading"
+      :scroll="{ x: getTableMaxWidth(columns) }"
+      class="ant-table-common"
+      @change="changeTable"
     >
       <template #bodyCell="{ column, record }">
         <template v-if="column.dataIndex === 'tableName'">
-          <span :title="record.tableName" class="primary-link" @click="goTableDetail(record)">
-            {{ record.tableName }}
-          </span>
+          <a-typography-text
+            style="width: 200px"
+            :ellipsis="{
+              tooltip: record.tableName,
+            }"
+            class="primary-link"
+            :content="record.tableName"
+            @click="goTableDetail(record)"
+          />
         </template>
-        <template v-if="column.dataIndex === 'durationDisplay'">
+        <template v-if="column.dataIndex === 'duration'">
           <span :title="record.durationDesc">
-            {{ record.durationDisplay }}
+            {{ formatMS2DisplayTime(record.duration || 0) }}
+          </span>
+        </template>
+        <template v-if="column.dataIndex === 'quotaOccupation'">
+          <span :title="record.quotaOccupationDesc">
+            {{ record.quotaOccupationDesc }}
           </span>
         </template>
         <template v-if="column.dataIndex === 'optimizeStatus'">