chore: watch api

2024-06-28 17:14:34 +08:00
parent 871bca1916
commit cf0113e8d8
35 changed files with 1171 additions and 627 deletions
@@ -1,7 +1,8 @@
 import { request } from '@umijs/max';
-import { ListItem } from '../config/types';
+import { GPUDeviceItem, ListItem } from '../config/types';

 export const WORKERS_API = '/workers';
+export const GPU_DEVICES_API = '/gpu-devices';

 export async function queryWorkersList(
  params: Global.Pagination & { query?: string }
@@ -11,3 +12,18 @@ export async function queryWorkersList(
    params
  });
 }
+
+export async function queryGpuDevicesList(
+  params: Global.Pagination & { query?: string }
+) {
+  return request<Global.PageResponse<GPUDeviceItem>>(`${GPU_DEVICES_API}`, {
+    methos: 'GET',
+    params
+  });
+}
+
+export async function queryGPUDeviceItem(id: string) {
+  return request<GPUDeviceItem>(`${GPU_DEVICES_API}/${id}`, {
+    methos: 'GET'
+  });
+}
@@ -1,15 +1,18 @@
 import PageTools from '@/components/page-tools';
 import ProgressBar from '@/components/progress-bar';
-import StatusTag from '@/components/status-tag';
 import useTableRowSelection from '@/hooks/use-table-row-selection';
 import useTableSort from '@/hooks/use-table-sort';
+import { convertFileSize } from '@/utils';
 import { SyncOutlined } from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
 import { Button, Input, Space, Table } from 'antd';
-import { useState } from 'react';
-import { Gpu } from '../config/types';
+import _ from 'lodash';
+import { useEffect, useState } from 'react';
+import { queryGpuDevicesList } from '../apis';
+import { GPUDeviceItem } from '../config/types';
 const { Column } = Table;

-const dataSource: Gpu[] = [
+const dataSource: GPUDeviceItem[] = [
  {
    id: 1,
    name: 'bj-web-service-1',
@@ -101,23 +104,32 @@ const dataSource: Gpu[] = [
 ];

 const Models: React.FC = () => {
+  const intl = useIntl();
  const rowSelection = useTableRowSelection();
  const { sortOrder, setSortOrder } = useTableSort({
    defaultSortOrder: 'descend'
  });
+  const [dataSource, setDataSource] = useState<GPUDeviceItem[]>([]);
  const [total, setTotal] = useState(10);
  const [loading, setLoading] = useState(false);
  const [queryParams, setQueryParams] = useState({
-    current: 1,
-    pageSize: 10,
-    name: ''
+    page: 1,
+    perPage: 10,
+    query: ''
  });
  const handleShowSizeChange = (current: number, size: number) => {
-    console.log(current, size);
+    setQueryParams({
+      ...queryParams,
+      perPage: size
+    });
  };

-  const handlePageChange = (page: number, pageSize: number | undefined) => {
-    console.log(page, pageSize);
+  const handlePageChange = (page: number, perPage: number | undefined) => {
+    console.log(page, perPage);
+    setQueryParams({
+      ...queryParams,
+      page: page
+    });
  };

  const handleTableChange = (pagination: any, filters: any, sorter: any) => {
@@ -125,7 +137,20 @@ const Models: React.FC = () => {
  };

  const fetchData = async () => {
-    console.log('fetchData');
+    setLoading(true);
+    try {
+      const params = {
+        ..._.pickBy(queryParams, (val: any) => !!val)
+      };
+      const res = await queryGpuDevicesList(params);
+
+      setDataSource(res.items);
+      setTotal(res.pagination.total);
+    } catch (error) {
+      console.log('error', error);
+    } finally {
+      setLoading(false);
+    }
  };
  const handleSearch = (e: any) => {
    fetchData();
@@ -134,10 +159,14 @@ const Models: React.FC = () => {
  const handleNameChange = (e: any) => {
    setQueryParams({
      ...queryParams,
-      name: e.target.value
+      query: e.target.value
    });
  };

+  useEffect(() => {
+    fetchData();
+  }, [queryParams]);
+
  return (
    <>
      <PageTools
@@ -146,7 +175,9 @@ const Models: React.FC = () => {
        left={
          <Space>
            <Input
-              placeholder="名称查询"
+              placeholder={intl.formatMessage({
+                id: 'common.filter.name'
+              })}
              style={{ width: 300 }}
              onChange={handleNameChange}
            ></Input>
@@ -166,46 +197,73 @@ const Models: React.FC = () => {
        onChange={handleTableChange}
        pagination={{
          showSizeChanger: true,
-          pageSize: 10,
-          current: 2,
+          pageSize: queryParams.perPage,
+          current: queryParams.page,
          total: total,
          hideOnSinglePage: true,
          onShowSizeChange: handleShowSizeChange,
          onChange: handlePageChange
        }}
      >
-        <Column title="GPU Name" dataIndex="hostname" key="hostname" />
+        <Column title="Name" dataIndex="name" key="name" />
        <Column
-          title="State"
-          dataIndex="state"
-          key="state"
-          render={(text, record) => {
-            return (
-              <StatusTag
-                statusValue={{
-                  status: 'success',
-                  text: 'ALIVE'
-                }}
-              ></StatusTag>
-            );
+          title="Index"
+          dataIndex="index"
+          key="index"
+          render={(text, record: GPUDeviceItem) => {
+            return <span>{record.index}</span>;
          }}
        />
-        <Column title="IP" dataIndex="address" key="address" />
+        <Column title="Worker Name" dataIndex="worker_name" key="worker_name" />
+        <Column title="Vendor" dataIndex="vendor" key="vendor" />

        <Column
          title="Temperature(˚C)"
-          dataIndex="Temperature"
+          dataIndex="temperature"
          key="Temperature"
+          render={(text, record: GPUDeviceItem) => {
+            return <span>{_.round(text, 1)}</span>;
+          }}
+        />
+        <Column
+          title="Core"
+          dataIndex="core"
+          key="Core"
+          render={(text, record: GPUDeviceItem) => {
+            return <span>{record.core?.total}</span>;
+          }}
+        />
+        <Column
+          title="GPU Utilization"
+          dataIndex="gpuUtil"
+          key="gpuUtil"
+          render={(text, record: GPUDeviceItem) => {
+            return (
+              <ProgressBar
+                percent={_.round(record.core?.utilization_rate, 2)}
+              ></ProgressBar>
+            );
+          }}
        />
-        <Column title="Core" dataIndex="core" key="Core" />
-        <Column title="GPU-Util" dataIndex="gpuUtil" key="gpuUtil" />

        <Column
          title="VRAM"
          dataIndex="GRAM"
          key="VRAM"
-          render={(text, record: Gpu) => {
-            return <ProgressBar percent={0}></ProgressBar>;
+          render={(text, record: GPUDeviceItem) => {
+            return (
+              <ProgressBar
+                percent={_.round(record.memory.utilization_rate, 0)}
+                label={
+                  <span className="flex-column">
+                    <span>
+                      Total: {convertFileSize(record.memory?.total, 0)}
+                    </span>
+                    <span>Used: {convertFileSize(record.memory?.used, 0)}</span>
+                  </span>
+                }
+              ></ProgressBar>
+            );
          }}
        />
      </Table>
@@ -1,22 +0,0 @@
-import SealTable from '@/components/seal-table';
-import SealColumn from '@/components/seal-table/components/seal-column';
-import useTableRowSelection from '@/hooks/use-table-row-selection';
-
-const Table = () => {
-  const dataSource = [{ name: 'test' }, { name: 'test2' }];
-  const rowSelection = useTableRowSelection();
-  return (
-    <SealTable
-      dataSource={dataSource}
-      rowKey="name"
-      loading={false}
-      rowSelection={rowSelection}
-      expandable={true}
-    >
-      <SealColumn title="Name" dataIndex="name" key="name" span={12} />
-      <SealColumn title="Status" dataIndex="status" key="status" span={12} />
-    </SealTable>
-  );
-};
-
-export default Table;
@@ -3,13 +3,14 @@ import ProgressBar from '@/components/progress-bar';
 import StatusTag from '@/components/status-tag';
 import useTableRowSelection from '@/hooks/use-table-row-selection';
 import useTableSort from '@/hooks/use-table-sort';
+import { convertFileSize } from '@/utils';
 import { SyncOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Button, Input, Space, Table } from 'antd';
 import _ from 'lodash';
 import { useEffect, useState } from 'react';
 import { queryWorkersList } from '../apis';
-import { ListItem } from '../config/types';
+import { Filesystem, GPUDeviceItem, ListItem } from '../config/types';
 const { Column } = Table;

 const Models: React.FC = () => {
@@ -44,7 +45,10 @@ const Models: React.FC = () => {
    }
  };
  const handleShowSizeChange = (current: number, size: number) => {
-    console.log(current, size);
+    setQueryParams({
+      ...queryParams,
+      perPage: size
+    });
  };

  const handlePageChange = (page: number, perPage: number | undefined) => {
@@ -74,7 +78,30 @@ const Models: React.FC = () => {
    if (!val2 || !val1) {
      return 0;
    }
-    return _.round((val1 / val2) * 100, 2);
+    return _.round((val1 / val2) * 100, 0);
+  };
+
+  const calcStorage = (files: Filesystem[]) => {
+    const mountRoot = _.find(
+      files,
+      (item: Filesystem) => item.mount_point === '/'
+    );
+    return mountRoot ? formateUtilazation(mountRoot.used, mountRoot.total) : 0;
+  };
+
+  const renderStorageTooltip = (files: Filesystem[]) => {
+    const mountRoot = _.find(
+      files,
+      (item: Filesystem) => item.mount_point === '/'
+    );
+    return mountRoot ? (
+      <span className="flex-column">
+        <span>Total: {convertFileSize(mountRoot?.total, 0)}</span>
+        <span>Used: {convertFileSize(mountRoot?.used, 0)}</span>
+      </span>
+    ) : (
+      0
+    );
  };
  useEffect(() => {
    fetchData();
@@ -148,7 +175,7 @@ const Models: React.FC = () => {
          render={(text, record: ListItem) => {
            return (
              <ProgressBar
-                percent={_.round(record?.status?.cpu.utilization_rate, 2)}
+                percent={_.round(record?.status?.cpu.utilization_rate, 0)}
              ></ProgressBar>
            );
          }}
@@ -164,6 +191,16 @@ const Models: React.FC = () => {
                  record?.status?.memory.used,
                  record?.status?.memory.total
                )}
+                label={
+                  <span className="flex-column">
+                    <span>
+                      Total: {convertFileSize(record?.status?.memory.total, 0)}
+                    </span>
+                    <span>
+                      Used: {convertFileSize(record?.status?.memory.used, 0)}
+                    </span>
+                  </span>
+                }
              ></ProgressBar>
            );
          }}
@@ -174,30 +211,19 @@ const Models: React.FC = () => {
          key="GPU"
          render={(text, record: ListItem) => {
            return (
-              <Space>
-                {record?.status?.gpu.map((item) => {
+              <span className="flex-column">
+                {record?.status?.gpu_devices.map((item, index) => {
                  return (
-                    <span key={item.index} className="flex-center">
-                      <span
-                        style={{
-                          display: 'flex',
-                          width: '6px',
-                          height: '6px',
-                          borderRadius: '50%',
-                          backgroundColor: 'var(--ant-color-primary)'
-                        }}
-                      ></span>
-                      <span className="m-l-5">
-                        {' '}
-                        {`${item.core.total}C`} /{' '}
-                        {item.core.utilization_rate
-                          ? `${item.core.utilization_rate}%`
-                          : 0}
-                      </span>
+                    <span className="flex-center" key={index}>
+                      <span className="m-r-5">[{index}]</span>
+                      <ProgressBar
+                        key={index}
+                        percent={_.round(item.core.utilization_rate, 0)}
+                      ></ProgressBar>
                    </span>
                  );
                })}
-              </Space>
+              </span>
            );
          }}
        />
@@ -208,28 +234,39 @@ const Models: React.FC = () => {
          key="VRAM"
          render={(text, record: ListItem) => {
            return (
-              <Space>
-                {record?.status?.gpu.map((item) => {
-                  return (
-                    <span key={item.index} className="flex-center">
-                      <span
-                        style={{
-                          display: 'flex',
-                          width: '6px',
-                          height: '6px',
-                          borderRadius: '50%',
-                          backgroundColor: 'var(--ant-color-primary)'
-                        }}
-                      ></span>
-                      <span className="m-l-5">
-                        {item.memory.allocated
-                          ? `${formateUtilazation(item.memory.allocated, item.memory.total)}%`
-                          : 0}
+              <span className="flex-column">
+                {record?.status?.gpu_devices.map(
+                  (item: GPUDeviceItem, index) => {
+                    return (
+                      <span key={index}>
+                        {item.memory.is_unified_memory ? (
+                          'Unified Memory'
+                        ) : (
+                          <span className="flex-center">
+                            <span className="m-r-5">[{index}]</span>
+                            <ProgressBar
+                              key={index}
+                              percent={_.round(item.memory.utilization_rate, 0)}
+                              label={
+                                <span className="flex-column">
+                                  <span>
+                                    Total:{' '}
+                                    {convertFileSize(item.memory?.total, 0)}
+                                  </span>
+                                  <span>
+                                    Used:{' '}
+                                    {convertFileSize(item.memory?.used, 0)}
+                                  </span>
+                                </span>
+                              }
+                            ></ProgressBar>
+                          </span>
+                        )}
                      </span>
-                    </span>
-                  );
-                })}
-              </Space>
+                    );
+                  }
+                )}
+              </span>
            );
          }}
        />
@@ -238,7 +275,12 @@ const Models: React.FC = () => {
          dataIndex="storage"
          key="storage"
          render={(text, record: ListItem) => {
-            return <ProgressBar percent={0}></ProgressBar>;
+            return (
+              <ProgressBar
+                percent={calcStorage(record.status?.filesystem)}
+                label={renderStorageTooltip(record.status.filesystem)}
+              ></ProgressBar>
+            );
          }}
        />
      </Table>
@@ -17,6 +17,29 @@ export interface Gpu {
  temperature: number;
 }

+export interface GPUDeviceItem {
+  uuid: string;
+  name: string;
+  vendor: string;
+  index: number;
+  core: {
+    total: number;
+    utilization_rate: number;
+  };
+  memory: {
+    total: number;
+    utilization_rate: number;
+    is_unified_memory: boolean;
+    used: number;
+    allocated: number;
+  };
+  temperature: number;
+  id: string;
+  worker_id: number;
+  worker_name: string;
+  worker_ip: string;
+}
+
 export interface Filesystem {
  name: string;
  mount_point: string;
@@ -52,7 +75,7 @@ export interface ListItem {
      used: number;
      allocated: number;
    };
-    gpu: Gpu[];
+    gpu_devices: GPUDeviceItem[];
    swap: {
      total: number;
      used: number;