update format and i18n

apache · Sep 6, 2024 · f746656 · f746656
1 parent 23b7d44
commit f746656
Show file tree

Hide file tree

Showing 10 changed files with 163 additions and 131 deletions.
diff --git a/amoro-web/mock/modules/overview.js b/amoro-web/mock/modules/overview.js
@@ -55,16 +55,15 @@ export default [
       msg: 'success',
       result: [
         { tableName: 'test_catalog.db.user', tableSize: '1774', fileCount: '2', averageFileSize: '887', healthScore: '47',},
-        { tableName: 'test_catalog.db.user', tableSize: '1774', fileCount: '2', averageFileSize: '887', healthScore: '47',},
-        { tableName: 'test_catalog.db.user', tableSize: '1774', fileCount: '2', averageFileSize: '887', healthScore: '47',},
-        { tableName: 'test_catalog.db.user', tableSize: '1774', fileCount: '2', averageFileSize: '887', healthScore: '47',},
-        { tableName: 'test_catalog.db.user', tableSize: '1774', fileCount: '2', averageFileSize: '887', healthScore: '47',},
-        { tableName: 'test_catalog.db.user', tableSize: '1774', fileCount: '2', averageFileSize: '887', healthScore: '47',},
-        { tableName: 'test_catalog.db.user', tableSize: '1774', fileCount: '2', averageFileSize: '887', healthScore: '47',},
-        { tableName: 'test_catalog.db.user', tableSize: '1774', fileCount: '2', averageFileSize: '887', healthScore: '47',},
-        { tableName: 'test_catalog.db.user', tableSize: '1774', fileCount: '2', averageFileSize: '887', healthScore: '47',},
-        { tableName: 'test_catalog.db.user', tableSize: '1774', fileCount: '2', averageFileSize: '887', healthScore: '47',},
-        { tableName: 'test_catalog.db.user', tableSize: '1774', fileCount: '2', averageFileSize: '887', healthScore: '47',},
+        { tableName: 'test_catalog.db.user1', tableSize: '1774', fileCount: '2', averageFileSize: '887', healthScore: '47',},
+        { tableName: 'test_catalog.db.user2', tableSize: '1774', fileCount: '2', averageFileSize: '887', healthScore: '47',},
+        { tableName: 'test_catalog.db.user3', tableSize: '1774', fileCount: '2', averageFileSize: '887', healthScore: '47',},
+        { tableName: 'test_catalog.db.user4', tableSize: '1774', fileCount: '2', averageFileSize: '887', healthScore: '47',},
+        { tableName: 'test_catalog.db.user5', tableSize: '1774', fileCount: '2', averageFileSize: '887', healthScore: '47',},
+        { tableName: 'test_catalog.db.user6', tableSize: '1774', fileCount: '2', averageFileSize: '887', healthScore: '47',},
+        { tableName: 'test_catalog.db.user7', tableSize: '1774', fileCount: '2', averageFileSize: '887', healthScore: '47',},
+        { tableName: 'test_catalog.db.user8', tableSize: '1774', fileCount: '2', averageFileSize: '887', healthScore: '47',},
+        { tableName: 'test_catalog.db.user9', tableSize: '1774', fileCount: '2', averageFileSize: '887', healthScore: '47',},
       ]
     }),
   },

diff --git a/amoro-web/src/components/echarts/index.ts b/amoro-web/src/components/echarts/index.ts
@@ -26,7 +26,7 @@ import type {
 import {
   BarChart,
   LineChart,
-  PieChart
+  PieChart,
 } from 'echarts/charts'
 import type {
   DatasetComponentOption,

diff --git a/amoro-web/src/language/en.ts b/amoro-web/src/language/en.ts
@@ -17,6 +17,10 @@
   */
 
 export default {
+  last30min: 'Last 30 min',
+  last8h: 'Last 8 h',
+  last24h: 'Last 24 h',
+  last7day: 'Last 7 day',
   overview: 'Overview',
   healthScore: 'Health Score',
   top10Tables: 'Top 10 Tables',

diff --git a/amoro-web/src/language/zh.ts b/amoro-web/src/language/zh.ts
@@ -17,6 +17,10 @@
   */
 
 export default {
+  last30min: '最近 30分钟',
+  last8h: '最近 8小时',
+  last24h: '最近 24小时',
+  last7day: '最近 7天',
   overview: '总览',
   healthScore: '健康度',
   top10Tables: '表TOP 10',

diff --git a/amoro-web/src/services/overview.service.ts b/amoro-web/src/services/overview.service.ts
@@ -44,8 +44,8 @@ export function getTop10TableList(params: {
     params: {
       order: order || 'asc',
       orderBy: orderBy || 'healthScore',
-      count: count || 10
-    }
+      count: count || 10,
+    },
   })
 }
 

diff --git a/amoro-web/src/views/overview/components/DataSizeCard.vue b/amoro-web/src/views/overview/components/DataSizeCard.vue
@@ -1,4 +1,3 @@
-
 <!--
 Licensed to the Apache Software Foundation (ASF) under one
 or more contributor license agreements.  See the NOTICE file
@@ -15,89 +14,97 @@ 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.
-/-->
+/ -->
 
 <script lang="ts" setup>
 import { useI18n } from 'vue-i18n'
-import { ref, onMounted } from 'vue';
+import { onMounted, ref } from 'vue'
 import { getDataSizeList } from '@/services/overview.service'
 import { bytesToSize, dateFormat } from '@/utils'
 import type { DataSizeItem } from '@/types/common.type'
 import Chart from '@/components/echarts/Chart.vue'
 
 const { t } = useI18n()
-const timeRange = ref('24');
+const timeRange = ref('24')
 const loading = ref<boolean>(false)
 
 function dataSizeFormatter(params: any[]): string {
-  const dataParam = params[0];
-  const dataSize = bytesToSize(dataParam.value);
-  let str = `<span style="font-size: 12px">${params[0].axisValue}</span><br/>`;
-  str += `<span style="display: inline-block;background-color:${dataParam.color}; margin-right: 6px; width: 6px;height: 6px;"></span>DataSize: ${dataSize}<br/>`;
-  return str;
+  const dataParam = params[0]
+  const dataSize = bytesToSize(dataParam.value)
+  let str = `<span style="font-size: 12px">${params[0].axisValue}</span><br/>`
+  str += `<span style="display: inline-block;background-color:${dataParam.color}; margin-right: 6px; width: 6px;height: 6px;"></span>DataSize: ${dataSize}<br/>`
+  return str
 }
 
 const dataSizeChartOption = ref({
   tooltip: {
-    trigger: 'axis', 
-    formatter:dataSizeFormatter
+    trigger: 'axis',
+    formatter: dataSizeFormatter,
   },
   legend: { data: ['DataSize'] },
   xAxis: {
     type: 'category',
-    data: ['']
+    data: [''],
   },
   yAxis: {
-    type: 'value', axisLabel: { formatter: (value: number) => { return `${bytesToSize(value)}` } }
+    type: 'value',
+    axisLabel: { formatter: (value: number) => { return `${bytesToSize(value)}` } },
   },
   series: [
     {
       name: 'DataSize',
       type: 'line',
-      data: [-1]
-    }
-  ]
+      data: [-1],
+    },
+  ],
 })
 
-const updateData = async () => {
+async function updateData() {
   try {
-    loading.value = true;
-    const times: string[] = [];
-    const dataSizeList: number[] = [];
+    loading.value = true
+    const times: string[] = []
+    const dataSizeList: number[] = []
 
-    const startTime = new Date().getTime() - parseFloat(timeRange.value) * 60 * 60 * 1000;
-    const result: DataSizeItem[] = await getDataSizeList(startTime);
+    const startTime = new Date().getTime() - Number.parseFloat(timeRange.value) * 60 * 60 * 1000
+    const result: DataSizeItem[] = await getDataSizeList(startTime)
     result.forEach((item) => {
       times.push(dateFormat(item.ts))
       dataSizeList.push(item.dataSize)
     })
-    dataSizeChartOption.value.xAxis.data = times;
-    dataSizeChartOption.value.series[0].data = dataSizeList;
-    console.log(dataSizeChartOption.value.xAxis.data)
+    dataSizeChartOption.value.xAxis.data = times
+    dataSizeChartOption.value.series[0].data = dataSizeList
   }
   catch (error) {
   }
   finally {
     loading.value = false
   }
-};
+}
 
 onMounted(() => {
   updateData()
-});
+})
 </script>
 
 <template>
   <a-card>
     <template #title>
       <a-row justify="space-between">
-        <span class="card-title" v-text="t('dataSize')"></span>
+        <span class="card-title" v-text="t('dataSize')" />
         <div style="display: flex; justify-content: space-between; align-items: center;">
-          <a-select v-model:value="timeRange" @change="updateData" style="width: 120px">
-            <a-select-option value="0.5">Last 30 min</a-select-option>
-            <a-select-option value="8">Last 8 h</a-select-option>
-            <a-select-option value="24">Last 24 h</a-select-option>
-            <a-select-option value="168">Last 7 day</a-select-option>
+          <a-select v-model:value="timeRange" style="width: 120px" @change="updateData">
+            <a-select-option value="0.5">
+              {{ t('last30min') }}
+            </a-select-option>
+            <a-select-option value="8">
+              {{ t('last8h') }}
+            </a-select-option>
+            <a-select-option value="24">
+              {{ t('last24h') }}
+            </a-select-option>
+            <a-select-option value="168">
+              {{ t('last7day') }}
+            </a-select-option>
           </a-select>
         </div>
       </a-row>
@@ -111,4 +118,4 @@ onMounted(() => {
 .card-title {
   font-size: 18px;
 }
-</style>
+</style>
diff --git a/amoro-web/src/views/overview/components/PieChartCard.vue b/amoro-web/src/views/overview/components/PieChartCard.vue
@@ -32,29 +32,29 @@ const pieChartOption = ref({})
 
 function renderChart() {
   pieChartOption.value = {
-      tooltip: {
-        trigger: 'item',
-      },
-      legend: {
-        orient: 'vertical',
-        left: 'left',
-      },
-      series: [
-        {
-          name: props.title,
-          type: 'pie',
-          radius: '50%',
-          data: props.data,
-          emphasis: {
-            itemStyle: {
-              shadowBlur: 10,
-              shadowOffsetX: 0,
-              shadowColor: 'rgba(0, 0, 0, 0.5)',
-            },
+    tooltip: {
+      trigger: 'item',
+    },
+    legend: {
+      orient: 'vertical',
+      left: 'left',
+    },
+    series: [
+      {
+        name: props.title,
+        type: 'pie',
+        radius: '50%',
+        data: props.data,
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.5)',
           },
         },
-      ],
-    }
+      },
+    ],
+  }
 }
 
 onMounted(renderChart)
@@ -64,7 +64,7 @@ watch(() => props.data, renderChart)
 <template>
   <a-card class="pie-chart-card">
     <template #title>
-      <span class="card-title" v-text="title"></span>
+      <span class="card-title" v-text="title" />
     </template>
     <Chart :options="pieChartOption" />
   </a-card>