style: dashboard utilization

src/components/echarts/config.ts

@@ -100,3 +100,84 @@ export const lineItemConfig = {
     opacity: 0.7
   }
 };
+
+export const gaugeItemConfig = {
+  type: 'gauge',
+  radius: '88%',
+  center: ['50%', '65%'],
+  startAngle: 190,
+  endAngle: -10,
+  min: 0,
+  max: 100,
+  splitNumber: 5,
+  progress: {
+    show: true,
+    roundCap: false,
+    width: 12
+  },
+  pointer: {
+    length: '80%',
+    width: 4,
+    itemStyle: {
+      color: 'auto'
+    }
+  },
+  axisLine: {
+    roundCap: false,
+    lineStyle: {
+      width: 12,
+      // color: [[1, 'rgba(221, 221, 221, 0.5)']],
+      color: [
+        [0.5, 'rgba(84, 204, 152, 80%)'],
+        [0.8, 'rgba(250, 173, 20, 80%)'],
+        [1, 'rgba(255, 77, 79, 80%)']
+      ]
+    }
+  },
+  axisTick: {
+    distance: -12,
+    length: 6,
+    splitNumber: 5,
+    lineStyle: {
+      width: 1.5,
+      color: 'rgba(255, 255, 255, 1)'
+    }
+  },
+  splitLine: {
+    distance: -12,
+    length: 12,
+    lineStyle: {
+      width: 1.5,
+      color: 'rgba(255, 255, 255, 1)'
+    }
+  },
+  axisLabel: {
+    distance: 14,
+    color: 'rgba(0, 0, 0, .5)',
+    fontSize: 12
+  },
+  detail: {
+    lineHeight: 40,
+    height: 40,
+    offsetCenter: [5, 30],
+    valueAnimation: false,
+    fontSize: 20,
+    color: 'rgba(0, 0, 0, 0.88)',
+    formatter(value: any) {
+      return '{value|' + value + '}{unit|%}';
+    },
+    rich: {
+      value: {
+        fontSize: 20,
+        fontWeight: '500',
+        color: 'rgba(0, 0, 0, 0.88)'
+      },
+      unit: {
+        fontSize: 16,
+        color: 'rgba(0, 0, 0, 0.88)',
+        fontWeight: '500',
+        padding: [0, 0, 0, 2]
+      }
+    }
+  }
+};

src/components/echarts/gauge.tsx

@@ -0,0 +1,63 @@
+import Chart from '@/components/echarts/chart';
+import {
+  gaugeItemConfig,
+  title as titleConfig
+} from '@/components/echarts/config';
+import EmptyData from '@/components/empty-data';
+import { memo } from 'react';
+import { ChartProps } from './types';
+
+const GaugeChart: React.FC<Omit<ChartProps, 'seriesData' | 'xAxisData'>> = (
+  props
+) => {
+  const { value, height, width, labelFormatter, title, color } = props;
+  if (!value && value !== 0) {
+    return <EmptyData height={height} title={title}></EmptyData>;
+  }
+
+  const setDataOptions = () => {
+    return {
+      title: {
+        ...titleConfig,
+        text: title,
+        top: '0',
+        left: 'center'
+      },
+      series: [
+        {
+          ...gaugeItemConfig,
+          axisLine: {
+            ...gaugeItemConfig.axisLine,
+            lineStyle: {
+              ...gaugeItemConfig.axisLine.lineStyle,
+              color: [
+                [value / 100, color],
+                [1, 'rgba(221, 221, 221, 0.5)']
+              ]
+            }
+          },
+          itemStyle: {
+            color: 'transparent'
+          },
+          detail: {
+            ...gaugeItemConfig.detail,
+            formatter: labelFormatter || gaugeItemConfig.detail.formatter
+          },
+          data: [{ value }]
+        }
+      ]
+    };
+  };
+
+  const dataOptions: any = setDataOptions();
+
+  return (
+    <Chart
+      height={height}
+      options={dataOptions}
+      width={width || '100%'}
+    ></Chart>
+  );
+};
+
+export default memo(GaugeChart);

src/components/echarts/index.ts

@@ -1,9 +1,10 @@
 import type {
   // 系列类型的定义后缀都为 SeriesOption
   BarSeriesOption,
+  GaugeSeriesOption,
   LineSeriesOption
 } from 'echarts/charts';
-import { BarChart, LineChart } from 'echarts/charts';
+import { BarChart, GaugeChart, LineChart } from 'echarts/charts';
 import type {
   DatasetComponentOption,
   GridComponentOption,
@@ -34,6 +35,7 @@ type ECOption = ComposeOption<
   | TooltipComponentOption
   | GridComponentOption
   | DatasetComponentOption
+  | GaugeSeriesOption
 >;
 
 // 注册必须的组件
@@ -46,6 +48,7 @@ echarts.use([
   TransformComponent,
   BarChart,
   LineChart,
+  GaugeChart,
   LabelLayout,
   UniversalTransition,
   CanvasRenderer

src/components/echarts/types.ts

@@ -6,7 +6,9 @@ export interface ChartProps {
   height: string | number;
   width?: string | number;
   title?: string;
+  value?: number;
   smooth?: boolean;
+  color?: string;
 }
 
 export interface AreaChartItemProps {

src/components/icon-font/index.tsx

@@ -1,7 +1,7 @@
 import { createFromIconfontCN } from '@ant-design/icons';
 
 const IconFont = createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/c/font_4613488_n8fe7jbl7n.js'
+  scriptUrl: '//at.alicdn.com/t/c/font_4613488_t2n96lwj8gf.js'
 });
 
 export default IconFont;

src/components/seal-table/components/table-row.tsx

@@ -35,9 +35,10 @@ const TableRow: React.FC<
   const [firstLoad, setFirstLoad] = useState(true);
   const pollTimer = useRef<any>(null);
   const chunkRequestRef = useRef<any>(null);
+  const childrenDataRef = useRef<any[]>([]);
 
   console.log('table row====');
-  const { updateChunkedList } = useUpdateChunkedList(childrenData, {
+  const { updateChunkedList } = useUpdateChunkedList({
     setDataList: setChildrenData,
     callback: (list) => renderChildren?.(list)
   });
@@ -54,12 +55,16 @@ const TableRow: React.FC<
   }, [rowSelection]);
 
   useEffect(() => {
-    if (expandedRowKeys?.includes(record[rowKey])) {
-      setExpanded(true);
-    } else {
-      setExpanded(false);
-    }
-  }, [expandedRowKeys]);
+    childrenDataRef.current = childrenData;
+  }, [childrenData]);
+
+  // useEffect(() => {
+  //   if (expandedRowKeys?.includes(record[rowKey])) {
+  //     setExpanded(true);
+  //   } else {
+  //     setExpanded(false);
+  //   }
+  // }, [expandedRowKeys]);
 
   useEffect(() => {
     return () => {
@@ -102,7 +107,7 @@ const TableRow: React.FC<
 
   const updateChildrenHandler = (list: any) => {
     _.each(list, (data: any) => {
-      updateChunkedList(data);
+      updateChunkedList(data, childrenDataRef.current);
     });
   };
   const createChunkRequest = () => {

src/global.less

@@ -386,7 +386,7 @@ body {
 .user-menu-container {
   .user-avatar.ant-menu-submenu {
     .ant-menu-submenu-title {
-      padding-left: 8px;
+      padding-left: 10px;
     }
   }
 

src/layouts/rightRender.tsx

@@ -70,7 +70,7 @@ export function getRightRenderContent(opts: {
     mode: 'vertical',
     expandIcon: false,
     inlineCollapsed: collapsed,
-    triggerSubMenuAction: 'click',
+    triggerSubMenuAction: 'hover',
     items: [
       {
         key: 'lang',

src/locales/zh-CN/playground.ts

@@ -3,7 +3,7 @@ export default {
   'playground.title': '试验场',
   'playground.system': '系统',
   'playground.user': '用户',
-  'playground.assistant': '助手',
+  'playground.assistant': '小助手',
   'playground.newMessage': '新消息',
   'playground.viewcode': '查看代码',
   'playground.model': '模型',

src/pages/dashboard/components/system-load.tsx

@@ -1,4 +1,5 @@
 import CardWrapper from '@/components/card-wrapper';
+import GaugeChart from '@/components/echarts/gauge';
 import PageTools from '@/components/page-tools';
 import breakpoints from '@/config/breakpoints';
 import useWindowResize from '@/hooks/use-window-resize';
@@ -7,10 +8,19 @@ import { Col, Row } from 'antd';
 import dayjs from 'dayjs';
 import _ from 'lodash';
 import { useContext, useEffect, useState } from 'react';
-import UitilBar from '../../../components/util-bar';
 import { DashboardContext } from '../config/dashboard-context';
 import ResourceUtilization from './resource-utilization';
 
+const strokeColorFunc = (percent: number) => {
+  if (percent <= 50) {
+    return 'rgb(84, 204, 152, 80%)';
+  }
+  if (percent <= 80) {
+    return 'rgba(250, 173, 20, 80%)';
+  }
+  return ' rgba(255, 77, 79, 80%)';
+};
+
 const SystemLoad = () => {
   const intl = useIntl();
   const data = useContext(DashboardContext)?.system_load?.current || {};
@@ -58,36 +68,44 @@ const SystemLoad = () => {
             <CardWrapper style={{ height: largeChartHeight, width: '100%' }}>
               <Row style={{ height: largeChartHeight, width: '100%' }}>
                 <Col span={12} style={{ height: smallChartHeight }}>
-                  <UitilBar
+                  <GaugeChart
+                    height={smallChartHeight}
+                    value={_.round(data.gpu?.utilization_rate || 0, 1)}
+                    color={strokeColorFunc(data.gpu?.utilization_rate)}
                     title={intl.formatMessage({
                       id: 'dashboard.gpuutilization'
                     })}
-                    percent={_.round(data.gpu?.utilization_rate || 0, 1)}
-                  ></UitilBar>
+                  ></GaugeChart>
                 </Col>
                 <Col span={12} style={{ height: smallChartHeight }}>
-                  <UitilBar
+                  <GaugeChart
                     title={intl.formatMessage({
                       id: 'dashboard.vramutilization'
                     })}
-                    percent={_.round(data.gpu_memory?.utilization_rate || 0, 1)}
-                  ></UitilBar>
+                    height={smallChartHeight}
+                    color={strokeColorFunc(data.gpu_memory?.utilization_rate)}
+                    value={_.round(data.gpu_memory?.utilization_rate || 0, 1)}
+                  ></GaugeChart>
                 </Col>
                 <Col span={12} style={{ height: smallChartHeight }}>
-                  <UitilBar
+                  <GaugeChart
                     title={intl.formatMessage({
                       id: 'dashboard.cpuutilization'
                     })}
-                    percent={_.round(data.cpu?.utilization_rate || 0, 1)}
-                  ></UitilBar>
+                    height={smallChartHeight}
+                    color={strokeColorFunc(data.cpu?.utilization_rate)}
+                    value={_.round(data.cpu?.utilization_rate || 0, 1)}
+                  ></GaugeChart>
                 </Col>
                 <Col span={12} style={{ height: smallChartHeight }}>
-                  <UitilBar
+                  <GaugeChart
                     title={intl.formatMessage({
                       id: 'dashboard.memoryutilization'
                     })}
-                    percent={_.round(data.memory?.utilization_rate || 0, 1)}
-                  ></UitilBar>
+                    height={smallChartHeight}
+                    color={strokeColorFunc(data.memory?.utilization_rate)}
+                    value={_.round(data.memory?.utilization_rate || 0, 1)}
+                  ></GaugeChart>
                 </Col>
               </Row>
             </CardWrapper>

src/pages/llmodels/components/instance-item.tsx

@@ -29,7 +29,11 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
     {
       label: intl.formatMessage({ id: 'common.button.viewlog' }),
       key: 'viewlog',
-      status: [InstanceStatusMap.Running, InstanceStatusMap.Error],
+      status: [
+        InstanceStatusMap.Running,
+        InstanceStatusMap.Error,
+        InstanceStatusMap.Downloading
+      ],
       icon: <FieldTimeOutlined />
     },
     {

src/pages/playground/components/chat-footer.tsx

@@ -1,5 +1,6 @@
 import IconFont from '@/components/icon-font';
 import HotKeys from '@/config/hotkeys';
+import { platformCall } from '@/utils';
 import {
   CodeOutlined,
   DeleteOutlined,
@@ -7,8 +8,9 @@ import {
   PlusOutlined
 } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Button, Col, Row, Space } from 'antd';
+import { Button, Col, Dropdown, Row, Space } from 'antd';
 import { useHotkeys } from 'react-hotkeys-hook';
+import { Roles } from '../config';
 import '../style/chat-footer.less';
 
 interface ChatFooterProps {
@@ -23,6 +25,7 @@ interface ChatFooterProps {
 }
 
 const ChatFooter: React.FC<ChatFooterProps> = (props) => {
+  const platform = platformCall();
   const intl = useIntl();
   const {
     onSubmit,
@@ -42,38 +45,28 @@ const ChatFooter: React.FC<ChatFooterProps> = (props) => {
     { enabled: !disabled }
   );
 
-  const renderSubmitButton = () => {
-    if (disabled) {
-      return (
-        <>
-          {intl.formatMessage({ id: 'common.button.stop' })}
-          <span className="m-l-5">
-            <IconFont type="icon-stop"></IconFont>
-          </span>
-        </>
-      );
+  const MessageRoles = [
+    { key: Roles.User, label: intl.formatMessage({ id: 'playground.user' }) },
+    {
+      key: Roles.Assistant,
+      label: intl.formatMessage({ id: 'playground.assistant' })
     }
-    return (
-      <>
-        {intl.formatMessage({ id: 'common.button.submit' })}
-        <span className="m-l-5 opct-7">
-          <IconFont type="icon-command"></IconFont> + <EnterOutlined />
-        </span>
-      </>
-    );
-  };
+  ];
+
   return (
     <div className="chat-footer">
       <Row style={{ width: '100%' }}>
         <Col span={hasTokenResult ? 8 : 12}>
           <Space size={20}>
-            <Button
-              disabled={disabled}
-              icon={<PlusOutlined />}
-              onClick={onNewMessage}
+            <Dropdown
+              menu={{ items: MessageRoles, onClick: onNewMessage }}
+              placement="topLeft"
             >
-              {intl.formatMessage({ id: 'playground.newMessage' })}
-            </Button>
+              <Button disabled={disabled} icon={<PlusOutlined />}>
+                {intl.formatMessage({ id: 'playground.newMessage' })}
+              </Button>
+            </Dropdown>
+
             <Button
               icon={<DeleteOutlined></DeleteOutlined>}
               onClick={onClear}
@@ -97,15 +90,31 @@ const ChatFooter: React.FC<ChatFooterProps> = (props) => {
               <Button type="primary" disabled={disabled} onClick={onSubmit}>
                 {intl.formatMessage({ id: 'common.button.submit' })}
                 <span className="m-l-5 opct-7">
-                  <IconFont type="icon-command"></IconFont> + <EnterOutlined />
+                  {platform.isMac ? (
+                    <>
+                      <IconFont type="icon-command"></IconFont> +{' '}
+                      <EnterOutlined />
+                    </>
+                  ) : (
+                    <>
+                      CTRL + <EnterOutlined />
+                    </>
+                  )}
                 </span>
               </Button>
             ) : (
               <Button type="primary" onClick={onStop}>
-                {intl.formatMessage({ id: 'common.button.stop' })}
-                <span className="m-l-5">
-                  <IconFont type="icon-stop"></IconFont>
-                </span>
+                <div className="flex flex-center">
+                  <span>
+                    {intl.formatMessage({ id: 'common.button.stop' })}
+                  </span>
+                  <span className="m-l-5 flex flex-center">
+                    <IconFont
+                      type="icon-stop1"
+                      className="font-size-14"
+                    ></IconFont>
+                  </span>
+                </div>
               </Button>
             )}
           </Space>

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

@@ -56,10 +56,11 @@ const MessageList: React.FC<MessageProps> = (props) => {
   const setMessageId = () => {
     messageId.current = messageId.current + 1;
   };
-  const handleNewMessage = () => {
+  const handleNewMessage = (role: any) => {
     messageList.push({
-      role:
-        _.last(messageList)?.role === Roles.User ? Roles.Assistant : Roles.User,
+      // role:
+      //   _.last(messageList)?.role === Roles.User ? Roles.Assistant : Roles.User,
+      role: role.key,
       content: '',
       uid: messageId.current + 1
     });

src/pages/playground/components/params-settings.tsx

@@ -19,14 +19,12 @@ type ParamsSettingsFormProps = {
 };
 
 type ParamsSettingsProps = {
-  onClose?: () => void;
   selectedModel?: string;
   params?: ParamsSettingsFormProps;
   setParams: (params: any) => void;
 };
 
 const ParamsSettings: React.FC<ParamsSettingsProps> = ({
-  onClose,
   selectedModel,
   setParams
 }) => {
@@ -83,11 +81,6 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
     console.log('handleOnFinishFailed', errorInfo);
   };
 
-  const handleCancel = () => {
-    form.resetFields();
-    onClose?.();
-  };
-
   const handleValuesChange = (changedValues: any, allValues: any) => {
     setParams?.(allValues);
   };

src/pages/playground/config/index.ts

@@ -5,11 +5,11 @@ export const Roles = {
 };
 export const playGroundRoles = [
   {
-    key: 'user',
+    key: Roles.User,
     label: 'playground.user'
   },
   {
-    key: 'assistant',
+    key: Roles.Assistant,
     label: 'playground.assitant'
   }
 ];

src/pages/playground/index.tsx

@@ -8,24 +8,9 @@ import './style/play-ground.less';
 
 const Playground: React.FC = () => {
   const [searchParams] = useSearchParams();
-  const [selectedModel, setSelectedModel] = useState('llama3:latest');
-  const [showPopover, setShowPopover] = useState(false);
   const selectModel = searchParams.get('model') || '';
   const [params, setParams] = useState({});
 
-  console.log('query======', searchParams, selectModel);
-  const handleSelectChange = (value: string) => {
-    setSelectedModel(value);
-  };
-
-  const handleTogglePopover = () => {
-    setShowPopover(!showPopover);
-  };
-
-  const handleClosePopover = () => {
-    setShowPopover(false);
-  };
-
   return (
     <div>
       <PageContainer ghost extra={[]}>
@@ -38,11 +23,7 @@ const Playground: React.FC = () => {
           </div>
 
           <div className="params">
-            <ParamsSettings
-              onClose={handleClosePopover}
-              setParams={setParams}
-              selectedModel={selectModel}
-            />
+            <ParamsSettings setParams={setParams} selectedModel={selectModel} />
           </div>
         </div>
       </PageContainer>