fix: dashboard gauge chart data

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;

src/components/modal-footer/index.tsx

@@ -26,12 +26,7 @@ const ModalFooter: React.FC<ModalFooterProps> = ({
   const intl = useIntl();
   return (
     <Space size={20}>
-      <Button
+      <Button onClick={onCancel} style={{ width: '88px' }} {...cancelBtnProps}>
-        onClick={onCancel}
-        style={{ width: '88px' }}
-        loading={loading}
-        {...cancelBtnProps}
-      >
         {cancelText || intl.formatMessage({ id: 'common.button.cancel' })}
       </Button>
       <Button

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'
 };

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': '这里'
 };

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) {
+  const initValues = () => {
-    form.setFieldsValue({
+    if (action === PageAction.CREATE && open) {
-      expires_in: 1
+      form.setFieldsValue({
-    });
+        expires_in: 1
-  }
+      });
+    }
+  };
+
+  useEffect(() => {
+    initValues();
+  }, [open]);
 
   const getExpireValue = (val: number | null) => {
     const expires_in = val;

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;

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)}
+                    value={_.round(data.gpu || 0, 1)}
-                    color={strokeColorFunc(data.gpu?.utilization_rate)}
+                    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)}
+                    color={strokeColorFunc(data.gpu_memory)}
-                    value={_.round(data.gpu_memory?.utilization_rate || 0, 1)}
+                    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)}
+                    color={strokeColorFunc(data.cpu)}
-                    value={_.round(data.cpu?.utilization_rate || 0, 1)}
+                    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)}
+                    color={strokeColorFunc(data.memory)}
-                    value={_.round(data.memory?.utilization_rate || 0, 1)}
+                    value={_.round(data.memory || 0, 1)}
                   ></GaugeChart>
                 </Col>
               </Row>

src/pages/dashboard/config/types.ts

@@ -7,26 +7,10 @@ export interface DashboardProps {
   };
   system_load: {
     current: {
-      cpu: {
+      cpu: number;
-        total: number;
+      memory: number;
-        used: number;
+      gpu: number;
-        utilization_rate: number;
+      gpu_memory: 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;
-      };
     };
     history: {
       cpu: {

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);

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 {
+import { DeleteOutlined, EnterOutlined, PlusOutlined } from '@ant-design/icons';
-  CodeOutlined,
-  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}
             >

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(

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);

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);