style: dashboard utilization

2024-07-10 10:00:55 +08:00
parent fe14edbb4e
commit 324561958e
16 changed files with 250 additions and 90 deletions
@@ -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>
@@ -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 />
    },
    {
@@ -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>
@@ -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
    });
@@ -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);
  };
@@ -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'
  }
 ];
@@ -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>