From b8b0d39635c73e8c683428d0a9810b622e9a1dad Mon Sep 17 00:00:00 2001
From: jialin <jialinkuang@126.com>
Date: Fri, 19 Jul 2024 13:05:13 +0800
Subject: [PATCH] fix: dashboard gauge chart data

---
 src/components/icon-font/index.tsx            |  2 +-
 src/components/modal-footer/index.tsx         |  7 +-----
 src/locales/en-US/playground.ts               |  3 ++-
 src/locales/zh-CN/playground.ts               |  3 ++-
 src/pages/api-keys/components/add-apikey.tsx  | 18 +++++++++-----
 src/pages/api-keys/index.tsx                  | 10 ++++----
 .../dashboard/components/system-load.tsx      | 16 ++++++-------
 src/pages/dashboard/config/types.ts           | 24 ++++---------------
 src/pages/llmodels/components/table-list.tsx  |  6 +----
 .../playground/components/chat-footer.tsx     | 11 ++++-----
 .../playground/components/view-code-modal.tsx | 12 ++++++----
 src/pages/resources/components/workers.tsx    |  2 --
 src/pages/users/index.tsx                     |  2 --
 13 files changed, 46 insertions(+), 70 deletions(-)

diff --git a/src/components/icon-font/index.tsx b/src/components/icon-font/index.tsx
index 1cdb5126..d2cc6cbf 100644
--- a/src/components/icon-font/index.tsx
+++ b/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_t2n96lwj8gf.js'
+  scriptUrl: '//at.alicdn.com/t/c/font_4613488_nw3caxx03yp.js'
 });
 
 export default IconFont;
diff --git a/src/components/modal-footer/index.tsx b/src/components/modal-footer/index.tsx
index 4db3c012..e3722dad 100644
--- a/src/components/modal-footer/index.tsx
+++ b/src/components/modal-footer/index.tsx
@@ -26,12 +26,7 @@ const ModalFooter: React.FC<ModalFooterProps> = ({
   const intl = useIntl();
   return (
     <Space size={20}>
-      <Button
-        onClick={onCancel}
-        style={{ width: '88px' }}
-        loading={loading}
-        {...cancelBtnProps}
-      >
+      <Button onClick={onCancel} style={{ width: '88px' }} {...cancelBtnProps}>
         {cancelText || intl.formatMessage({ id: 'common.button.cancel' })}
       </Button>
       <Button
diff --git a/src/locales/en-US/playground.ts b/src/locales/en-US/playground.ts
index 737c9343..4be2b1a6 100644
--- a/src/locales/en-US/playground.ts
+++ b/src/locales/en-US/playground.ts
@@ -27,6 +27,7 @@ export default {
     'If specified, our system will make a best effort to sample deterministically, such that repeated requests with the same seed and parameters should return the same result.',
   'playground.params.stop.tips':
     'A stop sequence is a predefined or user-specified text string that signals the AI to stop generating further tokens when these sequences appear.',
-  'playground.viewcode.tips': 'Your API Key can be found {here}',
+  'playground.viewcode.tips':
+    'Your API Key can be found {here}.You should use environment variables or a secret management tool to expose your key to your applications.',
   'playground.viewcode.here': 'here'
 };
diff --git a/src/locales/zh-CN/playground.ts b/src/locales/zh-CN/playground.ts
index 2c55d06c..f40310b1 100644
--- a/src/locales/zh-CN/playground.ts
+++ b/src/locales/zh-CN/playground.ts
@@ -27,6 +27,7 @@ export default {
     '如果指定，我们的系统将尽最大努力进行确定性采样，以便使用相同 seed 和参数的重复请求应返回相同的结果。',
   'playground.params.stop.tips':
     '停止序列是一个预定义或用户指定的文本字符串，当这些序列出现时，它会提示 AI 停止生成后续的 token。',
-  'playground.viewcode.tips': '{here} 查看 API 密钥。',
+  'playground.viewcode.tips':
+    '{here} 查看 API 密钥。您应该使用环境变量或秘密管理工具将您的密钥暴露给您的应用程序。',
   'playground.viewcode.here': '这里'
 };
diff --git a/src/pages/api-keys/components/add-apikey.tsx b/src/pages/api-keys/components/add-apikey.tsx
index f00e269a..9b287f7b 100644
--- a/src/pages/api-keys/components/add-apikey.tsx
+++ b/src/pages/api-keys/components/add-apikey.tsx
@@ -7,7 +7,7 @@ import { PageActionType } from '@/config/types';
 import { useIntl } from '@umijs/max';
 import { Button, Form, Modal, Select, Tag } from 'antd';
 import dayjs from 'dayjs';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { createApisKey } from '../apis';
 import { expirationOptions } from '../config';
 import { FormData } from '../config/types';
@@ -33,11 +33,17 @@ const AddModal: React.FC<AddModalProps> = ({
   const [apikeyValue, setAPIKeyValue] = useState('');
   const [loading, setLoading] = useState(false);
 
-  if (action === PageAction.CREATE && open) {
-    form.setFieldsValue({
-      expires_in: 1
-    });
-  }
+  const initValues = () => {
+    if (action === PageAction.CREATE && open) {
+      form.setFieldsValue({
+        expires_in: 1
+      });
+    }
+  };
+
+  useEffect(() => {
+    initValues();
+  }, [open]);
 
   const getExpireValue = (val: number | null) => {
     const expires_in = val;
diff --git a/src/pages/api-keys/index.tsx b/src/pages/api-keys/index.tsx
index 7aaab7cf..bfe3701e 100644
--- a/src/pages/api-keys/index.tsx
+++ b/src/pages/api-keys/index.tsx
@@ -18,7 +18,7 @@ import { ListItem } from './config/types';
 
 const { Column } = Table;
 
-const Models: React.FC = () => {
+const APIKeys: React.FC = () => {
   const rowSelection = useTableRowSelection();
   const { sortOrder, setSortOrder } = useTableSort({
     defaultSortOrder: 'descend'
@@ -85,10 +85,10 @@ const Models: React.FC = () => {
 
   const handleModalOk = async () => {
     try {
+      await fetchData();
       setOpenAddModal(false);
-      fetchData();
     } catch (error) {
-      setOpenAddModal(false);
+      // do nothing
     }
   };
 
@@ -99,7 +99,6 @@ const Models: React.FC = () => {
 
   const handleDelete = (row: ListItem) => {
     modalRef.current.show({
-      title: '',
       content: 'apikeys.table.apikeys',
       async onOk() {
         console.log('OK');
@@ -111,7 +110,6 @@ const Models: React.FC = () => {
 
   const handleDeleteBatch = () => {
     modalRef.current.show({
-      title: '',
       content: 'apikeys.table.apikeys',
       async onOk() {
         await handleBatchRequest(rowSelection.selectedRowKeys, deleteApisKey);
@@ -261,4 +259,4 @@ const Models: React.FC = () => {
   );
 };
 
-export default Models;
+export default APIKeys;
diff --git a/src/pages/dashboard/components/system-load.tsx b/src/pages/dashboard/components/system-load.tsx
index 288cfab9..cd9e55d7 100644
--- a/src/pages/dashboard/components/system-load.tsx
+++ b/src/pages/dashboard/components/system-load.tsx
@@ -70,8 +70,8 @@ const SystemLoad = () => {
                 <Col span={12} style={{ height: smallChartHeight }}>
                   <GaugeChart
                     height={smallChartHeight}
-                    value={_.round(data.gpu?.utilization_rate || 0, 1)}
-                    color={strokeColorFunc(data.gpu?.utilization_rate)}
+                    value={_.round(data.gpu || 0, 1)}
+                    color={strokeColorFunc(data.gpu)}
                     title={intl.formatMessage({
                       id: 'dashboard.gpuutilization'
                     })}
@@ -83,8 +83,8 @@ const SystemLoad = () => {
                       id: 'dashboard.vramutilization'
                     })}
                     height={smallChartHeight}
-                    color={strokeColorFunc(data.gpu_memory?.utilization_rate)}
-                    value={_.round(data.gpu_memory?.utilization_rate || 0, 1)}
+                    color={strokeColorFunc(data.gpu_memory)}
+                    value={_.round(data.gpu_memory || 0, 1)}
                   ></GaugeChart>
                 </Col>
                 <Col span={12} style={{ height: smallChartHeight }}>
@@ -93,8 +93,8 @@ const SystemLoad = () => {
                       id: 'dashboard.cpuutilization'
                     })}
                     height={smallChartHeight}
-                    color={strokeColorFunc(data.cpu?.utilization_rate)}
-                    value={_.round(data.cpu?.utilization_rate || 0, 1)}
+                    color={strokeColorFunc(data.cpu)}
+                    value={_.round(data.cpu || 0, 1)}
                   ></GaugeChart>
                 </Col>
                 <Col span={12} style={{ height: smallChartHeight }}>
@@ -103,8 +103,8 @@ const SystemLoad = () => {
                       id: 'dashboard.memoryutilization'
                     })}
                     height={smallChartHeight}
-                    color={strokeColorFunc(data.memory?.utilization_rate)}
-                    value={_.round(data.memory?.utilization_rate || 0, 1)}
+                    color={strokeColorFunc(data.memory)}
+                    value={_.round(data.memory || 0, 1)}
                   ></GaugeChart>
                 </Col>
               </Row>
diff --git a/src/pages/dashboard/config/types.ts b/src/pages/dashboard/config/types.ts
index 8080b65b..fc83bc84 100644
--- a/src/pages/dashboard/config/types.ts
+++ b/src/pages/dashboard/config/types.ts
@@ -7,26 +7,10 @@ export interface DashboardProps {
   };
   system_load: {
     current: {
-      cpu: {
-        total: number;
-        used: number;
-        utilization_rate: number;
-      };
-      memory: {
-        total: number;
-        used: number;
-        utilization_rate: number;
-      };
-      gpu: {
-        total: number;
-        used: number;
-        utilization_rate: number;
-      };
-      gpu_memory: {
-        total: number;
-        used: number;
-        utilization_rate: number;
-      };
+      cpu: number;
+      memory: number;
+      gpu: number;
+      gpu_memory: number;
     };
     history: {
       cpu: {
diff --git a/src/pages/llmodels/components/table-list.tsx b/src/pages/llmodels/components/table-list.tsx
index 933fecd5..dbb21b3d 100644
--- a/src/pages/llmodels/components/table-list.tsx
+++ b/src/pages/llmodels/components/table-list.tsx
@@ -18,7 +18,7 @@ import {
 } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
 import { Access, useAccess, useIntl, useNavigate } from '@umijs/max';
-import { Button, Input, Modal, Space, message } from 'antd';
+import { Button, Input, Space, message } from 'antd';
 import dayjs from 'dayjs';
 import _ from 'lodash';
 import { useCallback, useRef, useState } from 'react';
@@ -64,7 +64,6 @@ const Models: React.FC<ModelsProps> = ({
   console.log('model list====2');
   const access = useAccess();
   const intl = useIntl();
-  const [modal, contextHolder] = Modal.useModal();
   const navigate = useNavigate();
   const rowSelection = useTableRowSelection();
   const { handleExpandChange, updateExpandedRowKeys, expandedRowKeys } =
@@ -149,7 +148,6 @@ const Models: React.FC<ModelsProps> = ({
   }, []);
   const handleDelete = async (row: any) => {
     modalRef.current.show({
-      title: '',
       content: 'models.table.models',
       async onOk() {
         await deleteModel(row.id);
@@ -159,7 +157,6 @@ const Models: React.FC<ModelsProps> = ({
   };
   const handleDeleteBatch = () => {
     modalRef.current.show({
-      title: '',
       content: 'models.table.models',
       async onOk() {
         await handleBatchRequest(rowSelection.selectedRowKeys, deleteModel);
@@ -183,7 +180,6 @@ const Models: React.FC<ModelsProps> = ({
   };
   const handleDeleteInstace = (row: any, list: ModelInstanceListItem[]) => {
     modalRef.current.show({
-      title: '',
       content: 'models.instances',
       async onOk() {
         await deleteModelInstance(row.id);
diff --git a/src/pages/playground/components/chat-footer.tsx b/src/pages/playground/components/chat-footer.tsx
index 4b995ef6..2a2bce07 100644
--- a/src/pages/playground/components/chat-footer.tsx
+++ b/src/pages/playground/components/chat-footer.tsx
@@ -1,12 +1,7 @@
 import IconFont from '@/components/icon-font';
 import HotKeys from '@/config/hotkeys';
 import { platformCall } from '@/utils';
-import {
-  CodeOutlined,
-  DeleteOutlined,
-  EnterOutlined,
-  PlusOutlined
-} from '@ant-design/icons';
+import { DeleteOutlined, EnterOutlined, PlusOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Button, Col, Row, Space } from 'antd';
 import { useHotkeys } from 'react-hotkeys-hook';
@@ -81,7 +76,9 @@ const ChatFooter: React.FC<ChatFooterProps> = (props) => {
         <Col span={hasTokenResult ? 8 : 12} style={{ textAlign: 'right' }}>
           <Space size={20}>
             <Button
-              icon={<CodeOutlined></CodeOutlined>}
+              icon={
+                <IconFont type="icon-code" className="font-size-16"></IconFont>
+              }
               onClick={onView}
               disabled={disabled}
             >
diff --git a/src/pages/playground/components/view-code-modal.tsx b/src/pages/playground/components/view-code-modal.tsx
index 40b9e629..f654e405 100644
--- a/src/pages/playground/components/view-code-modal.tsx
+++ b/src/pages/playground/components/view-code-modal.tsx
@@ -56,7 +56,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
       const systemList = systemMessage
         ? [{ role: 'system', content: systemMessage }]
         : [];
-      const code = `curl ${window.location.origin}/v1-openai/chat/completions \\\n-H "Content-Type: application/json" \\\n-H "Authorization: Bearer {YOUR_GUPSTACK_API_KEY}" \\\n-d '${JSON.stringify(
+      const code = `curl ${window.location.origin}/v1-openai/chat/completions \\\n-H "Content-Type: application/json" \\\n-H "Authorization: Bearer $\{YOUR_GPUSTACK_API_KEY}" \\\n-d '${JSON.stringify(
         {
           ...parameters,
           messages: [
@@ -74,7 +74,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
       const systemList = systemMessage
         ? [{ role: 'system', content: systemMessage }]
         : [];
-      const code = `const OpenAI = require("openai");\n\nconst openai = new OpenAI({\n"apiKey": "YOUR_GUPSTACK_API_KEY",\n"baseURL": "${BaseURL}"\n});\n\n\nasync function main(){\nconst params = ${JSON.stringify(
+      const code = `const OpenAI = require("openai");\n\nconst openai = new OpenAI({\n  "apiKey": "YOUR_GPUSTACK_API_KEY",\n  "baseURL": "${BaseURL}"\n});\n\n\nasync function main(){\nconst params = ${JSON.stringify(
         {
           ...parameters,
           messages: [
@@ -86,7 +86,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
         },
         null,
         2
-      )};\nconst chatCompletion = await openai.chat.completions.create(params);\nfor await (const chunk of chatCompletion) {\n  process.stdout.write(chunk.choices[0]?.message?.content || '');\n}\n}\nmain();`;
+      )};\nconst chatCompletion = await openai.chat.completions.create(params);\n  console.log(chatCompletion.choices[0]);\n}\nmain();`;
       setCodeValue(code);
     } else if (lang === 'python') {
       const formattedParams = _.keys(parameters).reduce(
@@ -105,7 +105,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
       const systemList = systemMessage
         ? [{ role: 'system', content: systemMessage }]
         : [];
-      const code = `from openai import OpenAI\n\nbaseURL = "${BaseURL}"\n\nclient = OpenAI(\nbase_url=baseURL, \napi_key="YOUR_GUPSTACK_API_KEY"\n)\n\ncompletion = client.chat.completions.create(\n${formattedParams}  messages=${JSON.stringify(
+      const code = `from openai import OpenAI\n\nclient = OpenAI(\n  base_url="${BaseURL}", \n  api_key="YOUR_GPUSTACK_API_KEY"\n)\n\ncompletion = client.chat.completions.create(\n${formattedParams}  messages=${JSON.stringify(
         [
           ...systemList,
           ..._.map(messageList, (item: any) => {
@@ -186,7 +186,9 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
               onMount={handleEditorDidMount}
             />
           </EditorWrap>
-          <div style={{ marginTop: 10 }}>
+          <div
+            style={{ marginTop: 10, display: 'flex', alignItems: 'baseline' }}
+          >
             <BulbOutlined className="m-r-8" />
             <span>
               {intl.formatMessage(
diff --git a/src/pages/resources/components/workers.tsx b/src/pages/resources/components/workers.tsx
index 68474d40..9cabcaef 100644
--- a/src/pages/resources/components/workers.tsx
+++ b/src/pages/resources/components/workers.tsx
@@ -103,7 +103,6 @@ const Resources: React.FC = () => {
 
   const handleDelete = (row: ListItem) => {
     modalRef.current.show({
-      title: '',
       content: 'worker',
       async onOk() {
         console.log('OK');
@@ -115,7 +114,6 @@ const Resources: React.FC = () => {
 
   const handleDeleteBatch = () => {
     modalRef.current.show({
-      title: '',
       content: 'wokers',
       async onOk() {
         await handleBatchRequest(rowSelection.selectedRowKeys, deleteWorker);
diff --git a/src/pages/users/index.tsx b/src/pages/users/index.tsx
index 16a5891c..64052440 100644
--- a/src/pages/users/index.tsx
+++ b/src/pages/users/index.tsx
@@ -143,7 +143,6 @@ const Users: React.FC = () => {
 
   const handleDelete = (row: ListItem) => {
     modalRef.current.show({
-      title: '',
       content: 'users.table.user',
       async onOk() {
         console.log('OK');
@@ -155,7 +154,6 @@ const Users: React.FC = () => {
 
   const handleDeleteBatch = () => {
     modalRef.current.show({
-      title: '',
       content: 'users.table.user',
       async onOk() {
         await handleBatchRequest(rowSelection.selectedRowKeys, deleteUser);