feat: enhance Vite configuration and update metrics display

- Added support for JSX in Vite configuration by including the vueJsx plugin.
- Simplified the metrics display in CurrentMetrics.vue to show only the percentage of used memory and disk.
- Adjusted CSS in CurrentMetrics.vue to prevent wrapping and added a gap between items for better layout.
- Refactored TableCell.vue to remove unused imports, optimizing the component.
- Updated useNodeList.tsx to replace NodeType with ClNodeType and made minor formatting adjustments for consistency.

frontend/crawlab-ui/src/components/core/metric/CurrentMetrics.vue

@@ -73,7 +73,7 @@ defineOptions({ name: 'ClCurrentMetrics' });
         :clickable="clickable"
         :icon="['fa', 'memory']"
         :type="getTagType(metric?.used_memory_percent)"
-        :label="`${formatBytes(metric?.used_memory)} / ${formatBytes(metric?.total_memory)} (${Math.round(metric?.used_memory_percent || 0)}%)`"
+        :label="`${Math.round(metric?.used_memory_percent || 0)}%`"
         @click="(event: MouseEvent) => emit('click', event)"
       >
         <template #tooltip>
@@ -103,7 +103,7 @@ defineOptions({ name: 'ClCurrentMetrics' });
         :clickable="clickable"
         :icon="['fa', 'hdd']"
         :type="getTagType(metric?.used_disk_percent)"
-        :label="`${formatBytes(metric?.used_disk)} / ${formatBytes(metric?.total_disk)} (${Math.round(metric?.used_disk_percent || 0)}%)`"
+        :label="`${Math.round(metric?.used_disk_percent || 0)}%`"
         @click="(event: MouseEvent) => emit('click', event)"
       >
         <template #tooltip>
@@ -188,6 +188,7 @@ defineOptions({ name: 'ClCurrentMetrics' });
 .current-metrics {
   display: flex;
   align-items: center;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
+  gap: 5px;
 }
 </style>

frontend/crawlab-ui/src/components/ui/table/TableCell.vue

@@ -1,5 +1,5 @@
 <script setup lang="tsx">
-import { computed, h } from 'vue';
+import { computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useStore } from 'vuex';
 import { ClButtonGroup, ClFaIconButton } from '@/components';

frontend/crawlab-ui/src/views/node/list/useNodeList.tsx

@@ -6,12 +6,9 @@ import {
   setupListComponent,
 } from '@/utils/list';
 import useList from '@/layouts/content/list/useList';
-import NodeType from '@/components/core/node/NodeType.vue';
+import { ClNodeType } from '@/components';
 import {
   TABLE_COLUMN_NAME_ACTIONS,
-  TABLE_ACTION_EDIT,
-  TABLE_ACTION_CUSTOMIZE_COLUMNS,
-  TABLE_ACTION_EXPORT,
 } from '@/constants/table';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import useNodeService from '@/services/node/nodeService';
@@ -123,7 +120,7 @@ const useNodeList = () => {
             store,
             ns,
             'name',
-            FILTER_OP_CONTAINS
+            FILTER_OP_CONTAINS,
           ),
         },
         {
@@ -139,7 +136,7 @@ const useNodeList = () => {
             store,
             ns,
             'is_master',
-            FILTER_OP_EQUAL
+            FILTER_OP_EQUAL,
           ),
         },
         {
@@ -161,7 +158,7 @@ const useNodeList = () => {
             store,
             ns,
             'status',
-            FILTER_OP_EQUAL
+            FILTER_OP_EQUAL,
           ),
         },
         {
@@ -177,7 +174,7 @@ const useNodeList = () => {
             store,
             ns,
             'enabled',
-            FILTER_OP_EQUAL
+            FILTER_OP_EQUAL,
           ),
         },
       ],
@@ -208,7 +205,7 @@ const useNodeList = () => {
           icon: ['fa', 'list'],
           width: '150',
           value: (row: Node) => {
-            return <NodeType isMaster={row.is_master} />;
+            return <ClNodeType isMaster={row.is_master} />;
           },
           hasFilter: true,
           allowFilterItems: true,
@@ -275,7 +272,7 @@ const useNodeList = () => {
                 disabled={
                   !isAllowedAction(
                     router.currentRoute.value.path,
-                    ACTION_ENABLE
+                    ACTION_ENABLE,
                   )
                 }
                 onUpdate:modelValue={async (value: boolean) => {
@@ -305,7 +302,7 @@ const useNodeList = () => {
           className: 'current-metric',
           label: t('views.nodes.table.columns.currentMetrics'),
           icon: ['fa', 'chart-line'],
-          width: '200',
+          width: '240',
           value: (row: Node) => {
             if (!row._id) return;
             const currentMetrics = state.nodeMetricsMap[row._id];
@@ -372,7 +369,7 @@ const useNodeList = () => {
                     {
                       type: 'warning',
                       confirmButtonClass: 'el-button--danger',
-                    }
+                    },
                   );
                   if (res) {
                     await deleteById(row._id as string);
@@ -397,7 +394,7 @@ const useNodeList = () => {
         return !['current-metric'].includes(col.key);
       }
       return true;
-    })
+    }),
   );
 
   // options

frontend/crawlab-ui/vite.config.ts

@@ -1,6 +1,7 @@
 import { resolve } from 'path';
 import { defineConfig, UserConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
+import vueJsx from '@vitejs/plugin-vue-jsx';
 import dynamicImport from 'vite-plugin-dynamic-import';
 import { visualizer } from 'rollup-plugin-visualizer';
 
@@ -26,14 +27,13 @@ export default defineConfig(({ mode }) => {
       include: ['element-plus', 'axios', 'monaco-editor'],
     },
     resolve: {
-      dedupe: ['vue', 'vue-router', 'vuex', 'axios', 'element-plus'],
       alias: {
         '@': resolve(__dirname, 'src'),
       },
       extensions: ['.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
     },
     // @ts-ignore
-    plugins: [vue(), dynamicImport()],
+    plugins: [vue(), vueJsx(), dynamicImport()],
     server: {
       cors: true,
     },