chore: resource list

config/routes.ts

@@ -29,11 +29,11 @@ export default [
     component: './llmodels'
   },
   {
-    name: 'Nodes',
-    path: '/nodes',
-    key: 'nodes',
+    name: 'Resources',
+    path: '/resources',
+    key: 'resources',
     icon: 'CloudServer',
-    component: './nodes'
+    component: './resources'
   },
   {
     name: 'API Keys',

src/components/seal-form/components/wrapper.less

@@ -1,7 +1,7 @@
 :local(.wrapper) {
   @wrapheight: 54px;
   @inputheight: 32px;
-  @borderRadius: 24px;
+  @borderRadius: 20px;
   position: relative;
   display: flex;
   flex-direction: column;
@@ -13,6 +13,12 @@
   border-radius: @borderRadius;
   padding-inline: 12px;
   padding-block: 20px 0;
+  .extra {
+    position: absolute;
+    right: 12px;
+    top: 8px;
+    z-index: 10;
+  }
 
   &.seal-input-wrapper-disabled {
     background-color: var(--ant-color-bg-container-disabled);

src/components/seal-form/components/wrapper.tsx

@@ -11,6 +11,7 @@ interface WrapperProps {
   description?: React.ReactNode;
   className?: string;
   disabled?: boolean;
+  extra?: React.ReactNode;
   onClick?: () => void;
 }
 
@@ -23,6 +24,7 @@ const Wrapper: React.FC<WrapperProps> = ({
   disabled,
   description,
   required,
+  extra,
   onClick
 }) => {
   return (
@@ -50,6 +52,7 @@ const Wrapper: React.FC<WrapperProps> = ({
           description={description}
         ></LabelInfo>
       </label>
+      {extra && <div className={wrapperStyle.extra}>{extra}</div>}
       {children}
     </div>
   );

src/components/seal-form/input-number.tsx

@@ -7,10 +7,21 @@ import { SealFormItemProps } from './types';
 const SealInputNumber: React.FC<InputNumberProps & SealFormItemProps> = (
   props
 ) => {
-  const { label, placeholder, required, description, ...rest } = props;
+  const {
+    label,
+    placeholder,
+    required,
+    description,
+    isInFormItems = true,
+    ...rest
+  } = props;
   const [isFocus, setIsFocus] = useState(false);
   const inputRef = useRef<any>(null);
-  const { status } = Form.Item.useStatus();
+  let status = '';
+  if (isInFormItems) {
+    const statusData = Form?.Item?.useStatus?.();
+    status = statusData?.status || '';
+  }
 
   useEffect(() => {
     if (props.value) {

src/components/seal-form/input-search.tsx

@@ -16,10 +16,21 @@ type OnSearch = (
 ) => void;
 
 const SealInputSearch: React.FC<SearchProps & SealFormItemProps> = (props) => {
-  const { label, placeholder, required, description, ...rest } = props;
+  const {
+    label,
+    placeholder,
+    required,
+    description,
+    isInFormItems = true,
+    ...rest
+  } = props;
   const [isFocus, setIsFocus] = useState(false);
   const inputRef = useRef<any>(null);
-  const { status } = Form.Item.useStatus();
+  let status = '';
+  if (isInFormItems) {
+    const statusData = Form?.Item?.useStatus?.();
+    status = statusData?.status || '';
+  }
 
   useEffect(() => {
     if (props.value) {

src/components/seal-form/password.tsx

@@ -5,10 +5,21 @@ import Wrapper from './components/wrapper';
 import { SealFormItemProps } from './types';
 
 const SealPassword: React.FC<InputProps & SealFormItemProps> = (props) => {
-  const { label, placeholder, required, description, ...rest } = props;
+  const {
+    label,
+    placeholder,
+    required,
+    description,
+    isInFormItems = true,
+    ...rest
+  } = props;
   const [isFocus, setIsFocus] = useState(false);
   const inputRef = useRef<any>(null);
-  const { status } = Form.Item.useStatus();
+  let status = '';
+  if (isInFormItems) {
+    const statusData = Form?.Item?.useStatus?.();
+    status = statusData?.status || '';
+  }
 
   useEffect(() => {
     if (props.value) {

src/components/seal-form/seal-input.tsx

@@ -18,12 +18,19 @@ const SealTextArea: React.FC<TextAreaProps & SealFormItemProps> = (props) => {
     onInput,
     style,
     required,
+    isInFormItems = true,
     description,
+    variant,
+    extra,
     ...rest
   } = props;
   const [isFocus, setIsFocus] = useState(false);
   const inputRef = useRef<any>(null);
-  const { status } = Form.Item.useStatus();
+  let status = '';
+  if (isInFormItems) {
+    const statusData = Form?.Item?.useStatus?.();
+    status = statusData?.status || '';
+  }
 
   useEffect(() => {
     if (props.value) {
@@ -57,7 +64,11 @@ const SealTextArea: React.FC<TextAreaProps & SealFormItemProps> = (props) => {
 
   const handleOnBlur = useCallback(
     (e: any) => {
-      if (!inputRef.current?.input?.value) {
+      console.log(
+        'inputRef.current==========',
+        inputRef.current?.resizableTextArea?.textArea?.value
+      );
+      if (!inputRef.current?.resizableTextArea?.textArea?.value) {
         setIsFocus(false);
         onBlur?.(e);
       }
@@ -80,6 +91,8 @@ const SealTextArea: React.FC<TextAreaProps & SealFormItemProps> = (props) => {
       required={required}
       description={description}
       className="seal-textarea-wrapper"
+      variant={variant}
+      extra={extra}
       disabled={props.disabled}
       onClick={handleClickWrapper}
     >
@@ -98,10 +111,21 @@ const SealTextArea: React.FC<TextAreaProps & SealFormItemProps> = (props) => {
 };
 
 const SealInput: React.FC<InputProps & SealFormItemProps> = (props) => {
-  const { label, placeholder, required, description, ...rest } = props;
+  const {
+    label,
+    placeholder,
+    required,
+    description,
+    isInFormItems = true,
+    ...rest
+  } = props;
   const [isFocus, setIsFocus] = useState(false);
   const inputRef = useRef<any>(null);
-  const { status } = Form.Item.useStatus();
+  let status = '';
+  if (isInFormItems) {
+    const statusData = Form?.Item?.useStatus?.();
+    status = statusData?.status || '';
+  }
 
   useEffect(() => {
     if (props.value) {

src/components/seal-form/seal-select.tsx

@@ -6,11 +6,22 @@ import Wrapper from './components/wrapper';
 import { SealFormItemProps } from './types';
 
 const SealSelect: React.FC<SelectProps & SealFormItemProps> = (props) => {
-  const { label, placeholder, children, required, description, ...rest } =
-    props;
+  const {
+    label,
+    placeholder,
+    children,
+    required,
+    description,
+    isInFormItems = true,
+    ...rest
+  } = props;
   const [isFocus, setIsFocus] = useState(false);
   const inputRef = useRef<any>(null);
-  const { status } = Form.Item.useStatus();
+  let status = '';
+  if (isInFormItems) {
+    const statusData = Form?.Item?.useStatus?.();
+    status = statusData?.status || '';
+  }
 
   useEffect(() => {
     if (isNotEmptyValue(props.value)) {

src/components/seal-form/types.ts

@@ -1,7 +1,9 @@
 import React from 'react';
 
 export interface SealFormItemProps {
-  label?: string;
+  label?: React.ReactNode;
   required?: boolean;
+  isInFormItems?: boolean;
   description?: React.ReactNode;
+  extra?: React.ReactNode;
 }

src/components/transition/index.less

@@ -0,0 +1,28 @@
+.transition-wrapper {
+  border-radius: 16px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  &.bordered {
+    border-width: var(--ant-line-width);
+    border-style: var(--ant-line-type);
+    border-color: var(--ant-color-border);
+    background-color: var(--color-white-1);
+  }
+  &.filled {
+    border-color: var(--ant-color-border);
+    .content-wrapper {
+      background-color: var(--color-fill-1);
+    }
+  }
+  .header {
+    background-color: var(--color-fill-1);
+    cursor: pointer;
+    padding: 8px 16px;
+  }
+
+  .content-wrapper {
+    overflow: hidden;
+    transition: height 300ms ease-in-out;
+  }
+}

src/components/transition/index.tsx

@@ -0,0 +1,56 @@
+import classNames from 'classnames';
+import { useEffect, useRef, useState } from 'react';
+import './index.less';
+
+interface TransitionWrapProps {
+  minHeight?: number;
+  header?: React.ReactNode;
+  variant?: 'bordered' | 'filled';
+  children: React.ReactNode;
+}
+const TransitionWrapper: React.FC<TransitionWrapProps> = (props) => {
+  const { minHeight = 50, header, variant = 'bordered', children } = props;
+  const [isOpen, setIsOpen] = useState(true);
+  const [height, setHeight] = useState(0);
+  const contentRef = useRef(null);
+
+  useEffect(() => {
+    if (isOpen) {
+      setHeight(contentRef?.current?.scrollHeight);
+    } else {
+      setHeight(0);
+    }
+  }, [isOpen]);
+
+  const toggleOpen = () => {
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <div
+      className={classNames('transition-wrapper', {
+        bordered: variant === 'bordered',
+        filled: variant === 'filled'
+      })}
+    >
+      <div
+        onClick={toggleOpen}
+        className="header"
+        style={{
+          height: minHeight
+        }}
+      >
+        {header}
+      </div>
+      <div
+        className="content-wrapper"
+        style={{ height: height }}
+        ref={contentRef}
+      >
+        <div className="content">{children}</div>
+      </div>
+    </div>
+  );
+};
+
+export default TransitionWrapper;

src/global.less

@@ -47,7 +47,7 @@ html {
     --ant-font-size-xl: 20px;
     --ant-font-size: var(--font-size-base);
     --ant-padding-sm: 14px;
-    --ant-border-radius-lg: 20px;
+    --ant-border-radius-lg: 16px;
     --ant-color-error: #ff4d4f;
     --ant-color-bg-mask: rgba(0, 0, 0, 0.35);
 

src/pages/Resources/components/gpus.tsx

@@ -0,0 +1,254 @@
+import PageTools from '@/components/page-tools';
+import StatusTag from '@/components/status-tag';
+import useTableRowSelection from '@/hooks/use-table-row-selection';
+import useTableSort from '@/hooks/use-table-sort';
+import { SyncOutlined } from '@ant-design/icons';
+import { Button, Input, Space, Table } from 'antd';
+import { useState } from 'react';
+import { NodeItem } from '../config/types';
+import RenderProgress from './render-progress';
+const { Column } = Table;
+
+const dataSource: NodeItem[] = [
+  {
+    id: 1,
+    name: 'bj-web-service-1',
+    address: '183.14.31.136',
+    hostname: 'bj-web-service-1',
+    labels: {},
+    resources: {
+      capacity: {
+        cpu: 4,
+        gpu: 2,
+        memory: '64 GiB',
+        gram: '24 Gib'
+      },
+      allocable: {
+        cpu: 2.5,
+        gpu: 1.6,
+        memory: '64',
+        gram: '24 Gib'
+      }
+    },
+    state: 'ACTIVE'
+  },
+  {
+    id: 2,
+    name: 'bj-db-service-2',
+    address: '172.24.1.36',
+    hostname: 'bj-db-service-2',
+    labels: {},
+    resources: {
+      capacity: {
+        cpu: 4,
+        gpu: 2,
+        memory: '64 GiB',
+        gram: '24 Gib'
+      },
+      allocable: {
+        cpu: 2,
+        gpu: 1.5,
+        memory: '32 GiB',
+        gram: '12 Gib'
+      }
+    },
+    state: 'ACTIVE'
+  },
+  {
+    id: 3,
+    name: 'guangzhou-computed-node-2',
+    address: '170.10.2.10',
+    hostname: 'guangzhou-computed-node-2',
+    labels: {},
+    resources: {
+      capacity: {
+        cpu: 8,
+        gpu: 4,
+        memory: '64 GiB',
+        gram: '24 Gib'
+      },
+      allocable: {
+        cpu: 2,
+        gpu: 1.5,
+        memory: '32 GiB',
+        gram: '12 Gib'
+      }
+    },
+    state: 'ACTIVE'
+  },
+  {
+    id: 4,
+    name: 'hangzhou-cache-node-1',
+    address: '115.2.21.10',
+    hostname: 'hangzhou-cache-node-1',
+    labels: {},
+    resources: {
+      capacity: {
+        cpu: 8,
+        gpu: 4,
+        memory: '64 GiB',
+        gram: '24 Gib'
+      },
+      allocable: {
+        cpu: 4,
+        gpu: 2.5,
+        memory: '40 GiB',
+        gram: '16 Gib'
+      }
+    },
+    state: 'ACTIVE'
+  }
+];
+
+const Models: React.FC = () => {
+  const rowSelection = useTableRowSelection();
+  const { sortOrder, setSortOrder } = useTableSort({
+    defaultSortOrder: 'descend'
+  });
+  const [total, setTotal] = useState(10);
+  const [loading, setLoading] = useState(false);
+  const [queryParams, setQueryParams] = useState({
+    current: 1,
+    pageSize: 10,
+    name: ''
+  });
+  const handleShowSizeChange = (current: number, size: number) => {
+    console.log(current, size);
+  };
+
+  const handlePageChange = (page: number, pageSize: number | undefined) => {
+    console.log(page, pageSize);
+  };
+
+  const handleTableChange = (pagination: any, filters: any, sorter: any) => {
+    setSortOrder(sorter.order);
+  };
+
+  const fetchData = async () => {
+    console.log('fetchData');
+  };
+  const handleSearch = (e: any) => {
+    fetchData();
+  };
+
+  const handleNameChange = (e: any) => {
+    setQueryParams({
+      ...queryParams,
+      name: e.target.value
+    });
+  };
+
+  return (
+    <>
+      <PageTools
+        marginBottom={10}
+        marginTop={10}
+        left={
+          <Space>
+            <Input
+              placeholder="按名称查询"
+              style={{ width: 300 }}
+              onChange={handleNameChange}
+            ></Input>
+            <Button
+              type="text"
+              style={{ color: 'var(--ant-color-primary)' }}
+              onClick={handleSearch}
+              icon={<SyncOutlined></SyncOutlined>}
+            ></Button>
+          </Space>
+        }
+      ></PageTools>
+      <Table
+        dataSource={dataSource}
+        rowSelection={rowSelection}
+        loading={loading}
+        rowKey="id"
+        onChange={handleTableChange}
+        pagination={{
+          showSizeChanger: true,
+          pageSize: 10,
+          current: 2,
+          total: total,
+          hideOnSinglePage: true,
+          onShowSizeChange: handleShowSizeChange,
+          onChange: handlePageChange
+        }}
+      >
+        <Column title="GPU Name" dataIndex="hostname" key="hostname" />
+        <Column
+          title="State"
+          dataIndex="state"
+          key="state"
+          render={(text, record) => {
+            return (
+              <StatusTag
+                statusValue={{
+                  status: 'success',
+                  text: 'ALIVE'
+                }}
+              ></StatusTag>
+            );
+          }}
+        />
+        <Column title="IP / PID" dataIndex="address" key="address" />
+        <Column
+          title="CPU"
+          dataIndex="CPU"
+          key="CPU"
+          render={(text, record: NodeItem) => {
+            return (
+              <RenderProgress record={record} dataIndex="cpu"></RenderProgress>
+            );
+          }}
+        />
+        <Column
+          title="Memory"
+          dataIndex="memory"
+          key="Memory"
+          render={(text, record: NodeItem) => {
+            return (
+              <RenderProgress
+                record={record}
+                dataIndex="memory"
+              ></RenderProgress>
+            );
+          }}
+        />
+        <Column
+          title="GPU"
+          dataIndex="GPU"
+          key="GPU"
+          render={(text, record: NodeItem) => {
+            return (
+              <RenderProgress record={record} dataIndex="gpu"></RenderProgress>
+            );
+          }}
+        />
+        <Column
+          title="GRAM"
+          dataIndex="GRAM"
+          key="GRAM"
+          render={(text, record: NodeItem) => {
+            return (
+              <RenderProgress record={record} dataIndex="gram"></RenderProgress>
+            );
+          }}
+        />
+        <Column
+          title="Operation"
+          key="operation"
+          render={(text, record) => {
+            return (
+              <Space>
+                <Button size="middle">Logs</Button>
+              </Space>
+            );
+          }}
+        />
+      </Table>
+    </>
+  );
+};
+
+export default Models;

src/pages/Resources/components/nodes.tsx

@@ -0,0 +1,254 @@
+import PageTools from '@/components/page-tools';
+import StatusTag from '@/components/status-tag';
+import useTableRowSelection from '@/hooks/use-table-row-selection';
+import useTableSort from '@/hooks/use-table-sort';
+import { SyncOutlined } from '@ant-design/icons';
+import { Button, Input, Space, Table } from 'antd';
+import { useState } from 'react';
+import { NodeItem } from '../config/types';
+import RenderProgress from './render-progress';
+const { Column } = Table;
+
+const dataSource: NodeItem[] = [
+  {
+    id: 1,
+    name: 'bj-web-service-1',
+    address: '183.14.31.136',
+    hostname: 'bj-web-service-1',
+    labels: {},
+    resources: {
+      capacity: {
+        cpu: 4,
+        gpu: 2,
+        memory: '64 GiB',
+        gram: '24 Gib'
+      },
+      allocable: {
+        cpu: 2.5,
+        gpu: 1.6,
+        memory: '64',
+        gram: '24 Gib'
+      }
+    },
+    state: 'ACTIVE'
+  },
+  {
+    id: 2,
+    name: 'bj-db-service-2',
+    address: '172.24.1.36',
+    hostname: 'bj-db-service-2',
+    labels: {},
+    resources: {
+      capacity: {
+        cpu: 4,
+        gpu: 2,
+        memory: '64 GiB',
+        gram: '24 Gib'
+      },
+      allocable: {
+        cpu: 2,
+        gpu: 1.5,
+        memory: '32 GiB',
+        gram: '12 Gib'
+      }
+    },
+    state: 'ACTIVE'
+  },
+  {
+    id: 3,
+    name: 'guangzhou-computed-node-2',
+    address: '170.10.2.10',
+    hostname: 'guangzhou-computed-node-2',
+    labels: {},
+    resources: {
+      capacity: {
+        cpu: 8,
+        gpu: 4,
+        memory: '64 GiB',
+        gram: '24 Gib'
+      },
+      allocable: {
+        cpu: 2,
+        gpu: 1.5,
+        memory: '32 GiB',
+        gram: '12 Gib'
+      }
+    },
+    state: 'ACTIVE'
+  },
+  {
+    id: 4,
+    name: 'hangzhou-cache-node-1',
+    address: '115.2.21.10',
+    hostname: 'hangzhou-cache-node-1',
+    labels: {},
+    resources: {
+      capacity: {
+        cpu: 8,
+        gpu: 4,
+        memory: '64 GiB',
+        gram: '24 Gib'
+      },
+      allocable: {
+        cpu: 4,
+        gpu: 2.5,
+        memory: '40 GiB',
+        gram: '16 Gib'
+      }
+    },
+    state: 'ACTIVE'
+  }
+];
+
+const Models: React.FC = () => {
+  const rowSelection = useTableRowSelection();
+  const { sortOrder, setSortOrder } = useTableSort({
+    defaultSortOrder: 'descend'
+  });
+  const [total, setTotal] = useState(10);
+  const [loading, setLoading] = useState(false);
+  const [queryParams, setQueryParams] = useState({
+    current: 1,
+    pageSize: 10,
+    name: ''
+  });
+  const handleShowSizeChange = (current: number, size: number) => {
+    console.log(current, size);
+  };
+
+  const handlePageChange = (page: number, pageSize: number | undefined) => {
+    console.log(page, pageSize);
+  };
+
+  const handleTableChange = (pagination: any, filters: any, sorter: any) => {
+    setSortOrder(sorter.order);
+  };
+
+  const fetchData = async () => {
+    console.log('fetchData');
+  };
+  const handleSearch = (e: any) => {
+    fetchData();
+  };
+
+  const handleNameChange = (e: any) => {
+    setQueryParams({
+      ...queryParams,
+      name: e.target.value
+    });
+  };
+
+  return (
+    <>
+      <PageTools
+        marginBottom={10}
+        marginTop={10}
+        left={
+          <Space>
+            <Input
+              placeholder="按名称查询"
+              style={{ width: 300 }}
+              onChange={handleNameChange}
+            ></Input>
+            <Button
+              type="text"
+              style={{ color: 'var(--ant-color-primary)' }}
+              onClick={handleSearch}
+              icon={<SyncOutlined></SyncOutlined>}
+            ></Button>
+          </Space>
+        }
+      ></PageTools>
+      <Table
+        dataSource={dataSource}
+        rowSelection={rowSelection}
+        loading={loading}
+        rowKey="id"
+        onChange={handleTableChange}
+        pagination={{
+          showSizeChanger: true,
+          pageSize: 10,
+          current: 2,
+          total: total,
+          hideOnSinglePage: true,
+          onShowSizeChange: handleShowSizeChange,
+          onChange: handlePageChange
+        }}
+      >
+        <Column title="Host Name" dataIndex="hostname" key="hostname" />
+        <Column
+          title="State"
+          dataIndex="state"
+          key="state"
+          render={(text, record) => {
+            return (
+              <StatusTag
+                statusValue={{
+                  status: 'success',
+                  text: 'ALIVE'
+                }}
+              ></StatusTag>
+            );
+          }}
+        />
+        <Column title="IP / PID" dataIndex="address" key="address" />
+        <Column
+          title="CPU"
+          dataIndex="CPU"
+          key="CPU"
+          render={(text, record: NodeItem) => {
+            return (
+              <RenderProgress record={record} dataIndex="cpu"></RenderProgress>
+            );
+          }}
+        />
+        <Column
+          title="Memory"
+          dataIndex="memory"
+          key="Memory"
+          render={(text, record: NodeItem) => {
+            return (
+              <RenderProgress
+                record={record}
+                dataIndex="memory"
+              ></RenderProgress>
+            );
+          }}
+        />
+        <Column
+          title="GPU"
+          dataIndex="GPU"
+          key="GPU"
+          render={(text, record: NodeItem) => {
+            return (
+              <RenderProgress record={record} dataIndex="gpu"></RenderProgress>
+            );
+          }}
+        />
+        <Column
+          title="GRAM"
+          dataIndex="GRAM"
+          key="GRAM"
+          render={(text, record: NodeItem) => {
+            return (
+              <RenderProgress record={record} dataIndex="gram"></RenderProgress>
+            );
+          }}
+        />
+        <Column
+          title="Operation"
+          key="operation"
+          render={(text, record) => {
+            return (
+              <Space>
+                <Button size="middle">Logs</Button>
+              </Space>
+            );
+          }}
+        />
+      </Table>
+    </>
+  );
+};
+
+export default Models;

src/pages/Resources/index.tsx

@@ -0,0 +1,46 @@
+import { PageContainer } from '@ant-design/pro-components';
+import type { TabsProps } from 'antd';
+import { Tabs } from 'antd';
+import { useState } from 'react';
+import GPUs from './components/gpus';
+import Nodes from './components/nodes';
+
+const items: TabsProps['items'] = [
+  {
+    key: 'nodes',
+    label: 'Nodes',
+    children: <Nodes />
+  },
+  {
+    key: 'gpus',
+    label: 'GPUs',
+    children: <GPUs />
+  }
+];
+const Resources = () => {
+  const [activeKey, setActiveKey] = useState('nodes');
+
+  const handleChangeTab = (key: string) => {
+    setActiveKey(key);
+  };
+
+  return (
+    <PageContainer
+      ghost
+      header={{
+        title: 'Resources'
+      }}
+      extra={[]}
+    >
+      <Tabs
+        type="card"
+        defaultActiveKey="nodes"
+        items={items}
+        accessKey={activeKey}
+        onChange={handleChangeTab}
+      ></Tabs>
+    </PageContainer>
+  );
+};
+
+export default Resources;

src/pages/dashboard/components/model-nodes.tsx

@@ -1,7 +1,7 @@
 import PageTools from '@/components/page-tools';
 import StatusTag from '@/components/status-tag';
 import useTableRowSelection from '@/hooks/use-table-row-selection';
-import { NodeItem } from '@/pages/nodes/config/types';
+import { NodeItem } from '@/pages/resources/config/types';
 import { Progress, Select, Space, Table } from 'antd';
 import _ from 'lodash';
 import { memo, useMemo, useState } from 'react';

src/pages/dashboard/index.tsx

@@ -3,8 +3,6 @@ import PageTools from '@/components/page-tools';
 import { PageContainer } from '@ant-design/pro-components';
 import { Col, Row } from 'antd';
 import GPUUtilization from './components/gpu-utilization';
-import ModelBills from './components/model-bills';
-import ModelNodes from './components/model-nodes';
 import Overview from './components/over-view';
 import UtilizationOvertime from './components/utilization-overtime';
 
@@ -17,10 +15,26 @@ const Dashboard: React.FC = () => {
       <DividerLine></DividerLine>
       <PageContainer ghost title={false}>
         <Row gutter={20} style={{ marginTop: '0px' }}>
-          <Col span={17}>
-            <ModelNodes></ModelNodes>
+          <Col span={12}>
+            <PageTools
+              marginBottom={10}
+              marginTop={0}
+              left={
+                <div
+                  style={{
+                    height: '34px',
+                    display: 'flex',
+                    justifyContent: 'flex-start',
+                    alignItems: 'center'
+                  }}
+                >
+                  VRAM
+                </div>
+              }
+            ></PageTools>
+            <GPUUtilization></GPUUtilization>
           </Col>
-          <Col span={7}>
+          <Col span={12}>
             <PageTools
               marginBottom={10}
               marginTop={0}
@@ -40,12 +54,12 @@ const Dashboard: React.FC = () => {
           </Col>
         </Row>
       </PageContainer>
-      <DividerLine></DividerLine>
+      {/* <DividerLine></DividerLine>
       <PageContainer ghost title={false}>
         <div style={{ marginTop: '0px' }}>
           <ModelBills></ModelBills>
         </div>
-      </PageContainer>
+      </PageContainer> */}
       <DividerLine></DividerLine>
       <PageContainer ghost title={false}>
         <div style={{ marginTop: '0px' }}>

src/pages/llmodels/index.tsx

@@ -5,7 +5,9 @@ import useTableRowSelection from '@/hooks/use-table-row-selection';
 import useTableSort from '@/hooks/use-table-sort';
 import {
   DeleteOutlined,
+  DownOutlined,
   PlusOutlined,
+  RightOutlined,
   SyncOutlined,
   WechatWorkOutlined
 } from '@ant-design/icons';
@@ -192,6 +194,17 @@ const Models: React.FC = () => {
             onShowSizeChange: handleShowSizeChange,
             onChange: handlePageChange
           }}
+          expandable={{
+            expandIcon: ({ expanded, onExpand, record }) => {
+              return expanded ? (
+                <DownOutlined onClick={(e) => onExpand(record, e)} />
+              ) : (
+                <RightOutlined onClick={(e) => onExpand(record, e)} />
+              );
+            },
+            expandedRowRender: (record) => <p style={{ margin: 0 }}>list</p>,
+            rowExpandable: (record) => record.name !== 'Not Expandable'
+          }}
         >
           <Column
             title="Model Name"

src/pages/nodes/index.tsx

@@ -1,271 +0,0 @@
-import PageTools from '@/components/page-tools';
-import StatusTag from '@/components/status-tag';
-import useTableRowSelection from '@/hooks/use-table-row-selection';
-import useTableSort from '@/hooks/use-table-sort';
-import { SyncOutlined } from '@ant-design/icons';
-import { PageContainer } from '@ant-design/pro-components';
-import { Button, Input, Space, Table } from 'antd';
-import { useState } from 'react';
-import RenderProgress from './components/render-progress';
-import { NodeItem } from './config/types';
-const { Column } = Table;
-
-const dataSource: NodeItem[] = [
-  {
-    id: 1,
-    name: 'bj-web-service-1',
-    address: '183.14.31.136',
-    hostname: 'bj-web-service-1',
-    labels: {},
-    resources: {
-      capacity: {
-        cpu: 4,
-        gpu: 2,
-        memory: '64 GiB',
-        gram: '24 Gib'
-      },
-      allocable: {
-        cpu: 2.5,
-        gpu: 1.6,
-        memory: '64',
-        gram: '24 Gib'
-      }
-    },
-    state: 'ACTIVE'
-  },
-  {
-    id: 2,
-    name: 'bj-db-service-2',
-    address: '172.24.1.36',
-    hostname: 'bj-db-service-2',
-    labels: {},
-    resources: {
-      capacity: {
-        cpu: 4,
-        gpu: 2,
-        memory: '64 GiB',
-        gram: '24 Gib'
-      },
-      allocable: {
-        cpu: 2,
-        gpu: 1.5,
-        memory: '32 GiB',
-        gram: '12 Gib'
-      }
-    },
-    state: 'ACTIVE'
-  },
-  {
-    id: 3,
-    name: 'guangzhou-computed-node-2',
-    address: '170.10.2.10',
-    hostname: 'guangzhou-computed-node-2',
-    labels: {},
-    resources: {
-      capacity: {
-        cpu: 8,
-        gpu: 4,
-        memory: '64 GiB',
-        gram: '24 Gib'
-      },
-      allocable: {
-        cpu: 2,
-        gpu: 1.5,
-        memory: '32 GiB',
-        gram: '12 Gib'
-      }
-    },
-    state: 'ACTIVE'
-  },
-  {
-    id: 4,
-    name: 'hangzhou-cache-node-1',
-    address: '115.2.21.10',
-    hostname: 'hangzhou-cache-node-1',
-    labels: {},
-    resources: {
-      capacity: {
-        cpu: 8,
-        gpu: 4,
-        memory: '64 GiB',
-        gram: '24 Gib'
-      },
-      allocable: {
-        cpu: 4,
-        gpu: 2.5,
-        memory: '40 GiB',
-        gram: '16 Gib'
-      }
-    },
-    state: 'ACTIVE'
-  }
-];
-
-const Models: React.FC = () => {
-  const rowSelection = useTableRowSelection();
-  const { sortOrder, setSortOrder } = useTableSort({
-    defaultSortOrder: 'descend'
-  });
-  const [total, setTotal] = useState(10);
-  const [loading, setLoading] = useState(false);
-  const [queryParams, setQueryParams] = useState({
-    current: 1,
-    pageSize: 10,
-    name: ''
-  });
-  const handleShowSizeChange = (current: number, size: number) => {
-    console.log(current, size);
-  };
-
-  const handlePageChange = (page: number, pageSize: number | undefined) => {
-    console.log(page, pageSize);
-  };
-
-  const handleTableChange = (pagination: any, filters: any, sorter: any) => {
-    setSortOrder(sorter.order);
-  };
-
-  const fetchData = async () => {
-    console.log('fetchData');
-  };
-  const handleSearch = (e: any) => {
-    fetchData();
-  };
-
-  const handleNameChange = (e: any) => {
-    setQueryParams({
-      ...queryParams,
-      name: e.target.value
-    });
-  };
-
-  return (
-    <>
-      <PageContainer
-        ghost
-        header={{
-          title: 'Nodes'
-        }}
-        extra={[]}
-      >
-        <PageTools
-          marginBottom={22}
-          left={
-            <Space>
-              <Input
-                placeholder="按名称查询"
-                style={{ width: 300 }}
-                onChange={handleNameChange}
-              ></Input>
-              <Button
-                type="text"
-                style={{ color: 'var(--ant-color-primary)' }}
-                onClick={handleSearch}
-                icon={<SyncOutlined></SyncOutlined>}
-              ></Button>
-            </Space>
-          }
-        ></PageTools>
-        <Table
-          dataSource={dataSource}
-          rowSelection={rowSelection}
-          loading={loading}
-          rowKey="id"
-          onChange={handleTableChange}
-          pagination={{
-            showSizeChanger: true,
-            pageSize: 10,
-            current: 2,
-            total: total,
-            hideOnSinglePage: true,
-            onShowSizeChange: handleShowSizeChange,
-            onChange: handlePageChange
-          }}
-        >
-          <Column title="Host Name" dataIndex="hostname" key="hostname" />
-          <Column
-            title="State"
-            dataIndex="state"
-            key="state"
-            render={(text, record) => {
-              return (
-                <StatusTag
-                  statusValue={{
-                    status: 'success',
-                    text: 'ALIVE'
-                  }}
-                ></StatusTag>
-              );
-            }}
-          />
-          <Column title="IP / PID" dataIndex="address" key="address" />
-          <Column
-            title="CPU"
-            dataIndex="CPU"
-            key="CPU"
-            render={(text, record: NodeItem) => {
-              return (
-                <RenderProgress
-                  record={record}
-                  dataIndex="cpu"
-                ></RenderProgress>
-              );
-            }}
-          />
-          <Column
-            title="Memory"
-            dataIndex="memory"
-            key="Memory"
-            render={(text, record: NodeItem) => {
-              return (
-                <RenderProgress
-                  record={record}
-                  dataIndex="memory"
-                ></RenderProgress>
-              );
-            }}
-          />
-          <Column
-            title="GPU"
-            dataIndex="GPU"
-            key="GPU"
-            render={(text, record: NodeItem) => {
-              return (
-                <RenderProgress
-                  record={record}
-                  dataIndex="gpu"
-                ></RenderProgress>
-              );
-            }}
-          />
-          <Column
-            title="GRAM"
-            dataIndex="GRAM"
-            key="GRAM"
-            render={(text, record: NodeItem) => {
-              return (
-                <RenderProgress
-                  record={record}
-                  dataIndex="gram"
-                ></RenderProgress>
-              );
-            }}
-          />
-          <Column
-            title="Operation"
-            key="operation"
-            render={(text, record) => {
-              return (
-                <Space>
-                  <Button size="middle">Logs</Button>
-                </Space>
-              );
-            }}
-          />
-        </Table>
-      </PageContainer>
-    </>
-  );
-};
-
-export default Models;

src/pages/playground/components/ground-left.tsx

@@ -1,7 +1,10 @@
-import SealInput from '@/components/seal-form/seal-input';
+import TransitionWrapper from '@/components/transition';
+import { EyeInvisibleOutlined } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
+import { Button, Input } from 'antd';
 import { useState } from 'react';
 import '../style/ground-left.less';
+import '../style/system-message-wrap.less';
 import ChatFooter from './chat-footer';
 import MessageItem from './message-item';
 import ReferenceParams from './reference-params';
@@ -18,9 +21,14 @@ const MessageList: React.FC = () => {
       message: 'hello, nice to meet you!'
     }
   ]);
+  const [systemMessage, setSystemMessage] = useState('');
   const [show, setShow] = useState(false);
   const [activeIndex, setActiveIndex] = useState(-1);
 
+  const handleSystemMessageChange = (e: any) => {
+    console.log('system message:', e.target.value);
+    setSystemMessage(e.target.value);
+  };
   const handleNewMessage = () => {
     console.log('new message');
     messageList.push({
@@ -52,12 +60,30 @@ const MessageList: React.FC = () => {
     setMessageList([...messageList]);
   };
 
+  const renderLabel = () => {
+    return (
+      <div className="system-message-wrap ">
+        <span className="title">System</span>
+        <Button type="primary" size="small">
+          <EyeInvisibleOutlined />
+        </Button>
+      </div>
+    );
+  };
   return (
     <div className="ground-left">
       <PageContainer title={false} className="message-list-wrap">
-        <div style={{ marginBottom: '40px' }}>
-          <SealInput.TextArea label="Message"></SealInput.TextArea>
+        <div style={{ marginBottom: 40 }}>
+          <TransitionWrapper header={renderLabel()} variant="filled">
+            <Input.TextArea
+              value={systemMessage}
+              style={{ minHeight: '0px' }}
+              variant="filled"
+              onChange={handleSystemMessageChange}
+            ></Input.TextArea>
+          </TransitionWrapper>
         </div>
+
         <div>
           {messageList.map((item, index) => {
             return (

src/pages/playground/components/message-item.tsx

@@ -57,7 +57,7 @@ const MessageContent: React.FC<{
         <Button
           type="text"
           shape="circle"
-          style={{ color: 'var(--ant-color-primary' }}
+          style={{ color: 'var(--ant-color-primary)' }}
           onClick={handleDelete}
           icon={<MinusCircleOutlined />}
         ></Button>

src/pages/playground/style/message-item.less

@@ -1,16 +1,36 @@
 .message-item {
+  position: relative;
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
   margin-bottom: 12px;
+  &:hover {
+    .delete-btn {
+      opacity: 1;
+      transition: all 0.3s var(--seal-transition-func);
+    }
+  }
   .role-type {
     margin-right: 12px;
+    background-color: var(--ant-button-text-hover-bg);
     .ant-btn {
       text-align: left;
       width: 100px;
+      background-color: var(--ant-button-text-hover-bg);
+      height: 46px;
     }
   }
   .message-content-input {
     flex: 1;
+    .ant-input {
+      padding-right: 30px;
+    }
+  }
+  .delete-btn {
+    opacity: 0;
+    position: absolute;
+    top: 2px;
+    right: 0;
+    transition: all 0.3s var(--seal-transition-func);
   }
 }

src/pages/playground/style/system-message-wrap.less

@@ -0,0 +1,5 @@
+.system-message-wrap {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}