feat: updated node monitoring tab

crawlab-team · Jul 4, 2024 · 60991bd · 60991bd
1 parent defae41
commit 60991bd
Show file tree

Hide file tree

Showing 9 changed files with 287 additions and 100 deletions.
diff --git a/src/components/nav/NavActions.vue b/src/components/nav/NavActions.vue
@@ -6,10 +6,10 @@ const props = defineProps<{
   minHeight?: string;
 }>();
 
-const originalHeight = ref<string | null>(null);
+const originalHeight = ref<string>();
 const height = ref<string>();
 
-const navActions = ref<HTMLDivElement | null>(null);
+const navActions = ref<HTMLDivElement>();
 
 const unmounted = ref<boolean>(true);
 
@@ -20,7 +20,6 @@ const collapsed = computed<boolean>(() => {
 
 const style = computed(() => {
   return {
-    // height: height.value,
     minHeight: height.value,
   };
 });
@@ -32,11 +31,15 @@ const classes = computed<string[]>(() => {
   return cls;
 });
 
+const getHeight = () => {
+  return height.value;
+};
+
 const updateHeight = () => {
   if (!collapsed.value) {
-    if (originalHeight.value === null) {
+    if (!originalHeight.value) {
       if (!navActions.value) return;
-      originalHeight.value = `calc(${window.getComputedStyle(navActions.value).height} - 1px)`;
+      originalHeight.value = window.getComputedStyle(navActions.value).height;
     }
     height.value = originalHeight.value;
   } else {
@@ -50,6 +53,12 @@ onMounted(() => {
   updateHeight();
   unmounted.value = false;
 });
+
+defineExpose({
+  getHeight,
+  updateHeight,
+});
+
 defineOptions({ name: 'ClNavActions' });
 </script>
 

diff --git a/src/i18n/lang/en/components/node.ts b/src/i18n/lang/en/components/node.ts
@@ -46,24 +46,37 @@ const node: LComponentsNode = {
     },
     metrics: {
       cpu_usage_percent: 'CPU Usage (%)',
-      total_memory: 'Total Memory (bytes)',
-      available_memory: 'Available Memory (bytes)',
-      used_memory: 'Used Memory (bytes)',
+      total_memory: 'Total Memory',
+      available_memory: 'Available Memory',
+      used_memory: 'Used Memory',
       used_memory_percent: 'Used Memory (%)',
-      total_disk: 'Total Disk (bytes)',
-      available_disk: 'Available Disk (bytes)',
-      used_disk: 'Used Disk (bytes)',
+      total_disk: 'Total Disk',
+      available_disk: 'Available Disk',
+      used_disk: 'Used Disk',
       used_disk_percent: 'Used Disk (%)',
-      disk_read_bytes_rate: 'Disk Read IO (bytes/sec)',
-      disk_write_bytes_rate: 'Disk Write IO (bytes/sec)',
-      network_bytes_sent_rate: 'Network Sent IO (bytes/sec)',
-      network_bytes_recv_rate: 'Network Recv IO (bytes/sec)',
+      disk_read_bytes_rate: 'Disk Read IO',
+      disk_write_bytes_rate: 'Disk Write IO',
+      network_bytes_sent_rate: 'Network Sent IO',
+      network_bytes_recv_rate: 'Network Recv IO',
+    },
+    groups: {
+      disk_io_bytes_rate: 'Disk IO',
+      network_io_bytes_rate: 'Network IO',
+    },
+    timeUnits: {
+      s: 'sec',
+      m: 'min',
+      h: 'hr',
+      d: 'd',
+      w: 'wk',
+      M: 'mon',
+      y: 'yr',
     },
     timeRanges: {
-      '1h': '1 Hour',
-      '1d': '1 Day',
-      '7d': '7 Days',
-      '30d': '30 Days',
+      '1h': 'Past 1 Hour',
+      '24h': 'Past 24 Hours',
+      '7d': 'Past 7 Days',
+      '30d': 'Past 30 Days',
     },
   },
 };

diff --git a/src/i18n/lang/zh/components/node.ts b/src/i18n/lang/zh/components/node.ts
@@ -46,24 +46,37 @@ const node: LComponentsNode = {
     },
     metrics: {
       cpu_usage_percent: 'CPU 使用率 (%)',
-      total_memory: '总内存 (字节)',
-      available_memory: '可用内存 (字节)',
-      used_memory: '已用内存 (字节)',
+      total_memory: '总内存',
+      available_memory: '可用内存',
+      used_memory: '已用内存',
       used_memory_percent: '已用内存 (%)',
-      total_disk: '总磁盘 (字节)',
-      available_disk: '可用磁盘 (字节)',
-      used_disk: '已用磁盘 (字节)',
+      total_disk: '总磁盘',
+      available_disk: '可用磁盘',
+      used_disk: '已用磁盘',
       used_disk_percent: '已用磁盘 (%)',
-      disk_read_bytes_rate: '磁盘读取 IO (字节/秒)',
-      disk_write_bytes_rate: '磁盘写入 IO (字节/秒)',
-      network_bytes_sent_rate: '网络发送 IO (字节/秒)',
-      network_bytes_recv_rate: '网络接收 IO (字节/秒)',
+      disk_read_bytes_rate: '磁盘读取 IO',
+      disk_write_bytes_rate: '磁盘写入 IO',
+      network_bytes_sent_rate: '网络发送 IO',
+      network_bytes_recv_rate: '网络接收 IO',
+    },
+    groups: {
+      disk_io_bytes_rate: '磁盘 IO',
+      network_io_bytes_rate: '网络 IO',
+    },
+    timeUnits: {
+      s: '秒',
+      m: '分',
+      h: '小时',
+      d: '天',
+      w: '周',
+      M: '月',
+      y: '年',
     },
     timeRanges: {
-      '1h': '1 小时',
-      '1d': '1 天',
-      '7d': '7 天',
-      '30d': '30 天',
+      '1h': '过去 1 小时',
+      '24h': '过去 24 小时',
+      '7d': '过去 7 天',
+      '30d': '过去 30 天',
     },
   },
 };

diff --git a/src/interfaces/components/metric/MetricGroup.d.ts b/src/interfaces/components/metric/MetricGroup.d.ts
@@ -0,0 +1,7 @@
+export declare global {
+  interface MetricGroup {
+    name: string;
+    label: string;
+    metrics: keyof Metric[];
+  }
+}
diff --git a/src/interfaces/i18n/components/node.d.ts b/src/interfaces/i18n/components/node.d.ts
@@ -59,9 +59,22 @@ interface LComponentsNode {
       network_bytes_sent_rate: string;
       network_bytes_recv_rate: string;
     };
+    groups: {
+      disk_io_bytes_rate: string;
+      network_io_bytes_rate: string;
+    };
+    timeUnits: {
+      s: string;
+      m: string;
+      h: string;
+      d: string;
+      w: string;
+      M: string;
+      y: string;
+    };
     timeRanges: {
       '1h': string;
-      '1d': string;
+      '24h': string;
       '7d': string;
       '30d': string;
     };

diff --git a/src/layouts/content/detail/DetailLayout.vue b/src/layouts/content/detail/DetailLayout.vue
@@ -49,6 +49,7 @@ const {
   showActionsToggleTooltip,
   tabs: defaultTabs,
   contentContainerStyle,
+  navActions,
   onNavSidebarSelect,
   onNavSidebarToggle,
   onNavTabsSelect,
@@ -73,6 +74,8 @@ onMounted(() => {
   navSidebar.value.scroll(activeId.value);
 });
 
+onMounted(() => {});
+
 // reset form before unmount
 onBeforeUnmount(() => {
   if (!activeTabName.value) {

diff --git a/src/layouts/content/detail/useDetail.ts b/src/layouts/content/detail/useDetail.ts
@@ -55,8 +55,11 @@ const useDetail = <T = BaseModel>(ns: ListStoreNamespace) => {
   });
 
   const contentContainerStyle = computed(() => {
+    const navActionsHeight = navActions.value
+      ? ` - ${navActions.value?.getHeight()}`
+      : '';
     return {
-      height: `calc(100% - var(--cl-nav-tabs-height) - 1px${navActions.value ? ' - ' + navActions.value.getHeight() : ''})`,
+      height: `calc(100% - var(--cl-nav-tabs-height) - 1px${navActionsHeight})`,
     };
   });
 

diff --git a/src/utils/time.ts b/src/utils/time.ts
@@ -0,0 +1,6 @@
+export const getTimeUnitParts = (timeUnit: string) => {
+  const groups = timeUnit.match(/(\d+)([a-z])/);
+  const num = parseInt(groups[1]);
+  const unit = groups[2];
+  return { num, unit };
+};