chore: cluster system load service

src/components/audio-player/index.less

@@ -23,7 +23,6 @@
     margin-inline: 30px;
     height: 22px;
     width: 22px;
-    overflow: hidden;
 
     .ant-btn {
       height: 22px;

src/hooks/use-chunk-request.ts

@@ -6,7 +6,7 @@ import {
 } from '@/atoms/watch-request';
 import { WatchEventType } from '@/config';
 import { request } from '@umijs/max';
-import axios from 'axios';
+import axios, { CancelTokenSource } from 'axios';
 import _ from 'lodash';
 import { useEffect, useRef, useState } from 'react';
 
@@ -36,7 +36,7 @@ export const sliceJsonStr = (text: string) => {
   return result;
 };
 
-export const createAxiosToken = () => {
+export const createAxiosToken = (): CancelTokenSource => {
   const { CancelToken } = axios;
   const source = CancelToken.source();
   return source;

src/pages/cluster-management/apis/index.ts

@@ -136,12 +136,16 @@ export async function deleteCluster(id: number) {
   });
 }
 
-export async function queryClusterDetail(params: {
-  cluster_id: number | string;
-}) {
+export async function queryClusterDetail(
+  params: {
+    cluster_id: number | string;
+  },
+  options?: any
+) {
   return request(`${DASHBOARD_API}`, {
     method: 'GET',
-    params
+    params,
+    cancelToken: options?.token
   });
 }
 

src/pages/cluster-management/cluster-detail.tsx

@@ -2,6 +2,7 @@ import WorkerList from '@/pages/resources/components/workers';
 import { useIntl, useNavigate, useSearchParams } from '@umijs/max';
 import { PageContainerInner } from '../_components/page-box';
 import PageBreadcrumb from '../_components/page-breadcrumb';
+import ClusterSystemLoad from './components/detail/cluster-system-load';
 
 const ClusterDetailModal = () => {
   const navigate = useNavigate();
@@ -26,6 +27,7 @@ const ClusterDetailModal = () => {
         title: <PageBreadcrumb items={breadcrumbItems} />
       }}
     >
+      <ClusterSystemLoad clusterId={Number(id)}></ClusterSystemLoad>
       <WorkerList
         clusterId={id}
         showAddButton={false}

src/pages/cluster-management/components/detail/cluster-system-load.tsx

@@ -0,0 +1,16 @@
+import React, { useEffect } from 'react';
+import { useClusterSystemLoad } from '../../services/use-cluster-system-load';
+
+const ClusterSystemLoad: React.FC<{ clusterId: number }> = ({ clusterId }) => {
+  const { systemLoad, fetchClusterSystemLoad } = useClusterSystemLoad();
+
+  useEffect(() => {
+    if (clusterId) {
+      fetchClusterSystemLoad({ cluster_id: clusterId });
+    }
+  }, [clusterId]);
+
+  return <div>Cluster System Load Component</div>;
+};
+
+export default ClusterSystemLoad;

src/pages/cluster-management/hooks/use-cluster-columns.tsx

@@ -6,7 +6,7 @@ import StatusTag from '@/components/status-tag';
 import { tableSorter } from '@/config/settings';
 import { StarFilled } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Tooltip } from 'antd';
+import { Tooltip, Typography } from 'antd';
 import dayjs from 'dayjs';
 import { useMemo } from 'react';
 import {
@@ -42,7 +42,9 @@ const useClusterColumns = (
         render: (text: string, record: ClusterListItem) => (
           <>
             <AutoTooltip ghost title={text}>
-              {text}
+              <Typography.Link onClick={() => onCellClick?.(record, 'name')}>
+                {record.name}
+              </Typography.Link>
             </AutoTooltip>
             {record.is_default && (
               <Tooltip

src/pages/cluster-management/services/use-cluster-system-load.ts

@@ -0,0 +1,73 @@
+import { createAxiosToken } from '@/hooks/use-chunk-request';
+import { useRequest } from 'ahooks';
+import { CancelTokenSource } from 'axios';
+import { useEffect, useRef, useState } from 'react';
+import { queryClusterDetail } from '../apis';
+
+export const useClusterSystemLoad = () => {
+  const [systemLoad, setSystemLoad] = useState<{
+    current: {
+      cpu: number;
+      ram: number;
+      gpu: number;
+      vram: number;
+    };
+    history: Record<string, { timestamp: number; value: number }[]>;
+  }>({
+    current: {
+      cpu: 0,
+      ram: 0,
+      gpu: 0,
+      vram: 0
+    },
+    history: {}
+  });
+  const axiosTokenRef = useRef<CancelTokenSource | null>(null);
+
+  const {
+    run: fetchClusterSystemLoad,
+    loading,
+    cancel
+  } = useRequest(
+    async (params) => {
+      axiosTokenRef.current?.cancel();
+      axiosTokenRef.current = createAxiosToken();
+      return await queryClusterDetail(params, {
+        token: axiosTokenRef.current.token
+      });
+    },
+    {
+      manual: true,
+      onSuccess: (response) => {
+        setSystemLoad({
+          current: response.system_load?.current,
+          history: response.system_load?.history
+        });
+      },
+      onError: () => {
+        setSystemLoad({
+          current: {
+            cpu: 0,
+            ram: 0,
+            gpu: 0,
+            vram: 0
+          },
+          history: {}
+        });
+      }
+    }
+  );
+
+  useEffect(() => {
+    return () => {
+      cancel();
+      axiosTokenRef.current?.cancel();
+    };
+  }, []);
+
+  return {
+    systemLoad,
+    loading,
+    fetchClusterSystemLoad
+  };
+};