root/gpustack-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: language does not refresh after toggling

Browse Source
This commit is contained in:
jialin
2024-09-30 18:54:48 +08:00
parent ea25291d75
commit 2d34d07da4
13 changed files with 133 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/dashboard/components/active-table.tsx
+2 -72
View File
@@ -2,71 +2,9 @@ import PageTools from '@/components/page-tools';
import { convertFileSize } from '@/utils';
import { useIntl } from '@umijs/max';
import { Col, Row, Table } from 'antd';
import { useContext } from 'react';
import { memo, useContext } from 'react';
import { DashboardContext } from '../config/dashboard-context';
const projectColumns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name'
},
{
title: 'Token Quota',
dataIndex: 'quota',
key: 'quota',
render: (text: any, record: any) => <span>{record.quota}k</span>
},
{
title: 'Token Utilization',
dataIndex: 'utilization',
key: 'utilization',
render: (text: any, record: any) => <span>{record.utilization}%</span>
},
{
title: 'Members',
dataIndex: 'members',
key: 'members'
}
];
const projectData = [
{
id: 1,
name: 'copilot-dev',
quota: 100,
utilization: 50,
members: 4
},
{
id: 2,
name: 'rag-wiki',
quota: 200,
utilization: 70,
members: 3
},
{
id: 3,
name: 'smart-auto-agent',
quota: 100,
utilization: 20,
members: 5
},
{
id: 4,
name: 'office-auto-docs',
quota: 100,
utilization: 25,
members: 1
},
{
id: 5,
name: 'smart-customer-service',
quota: 100,
utilization: 46,
members: 2
}
];
const ActiveTable = () => {
const intl = useIntl();
const data = useContext(DashboardContext).active_models || [];
@@ -76,14 +14,6 @@ const ActiveTable = () => {
dataIndex: 'name',
key: 'name'
},
// {
// title: intl.formatMessage({ id: 'dashboard.gpuutilization' }),
// dataIndex: 'gpu_utilization',
// key: 'gpu_utilization',
// render: (text: any, record: any) => (
// <ProgressBar percent={_.round(text, 0)}></ProgressBar>
// )
// },
{
title: intl.formatMessage({ id: 'dashboard.allocatevram' }),
dataIndex: 'resource_claim.memory',
@@ -133,4 +63,4 @@ const ActiveTable = () => {
);
};
export default ActiveTable;
export default memo(ActiveTable);
src/pages/dashboard/components/over-view.tsx
+2 -2
View File
@@ -29,7 +29,7 @@ const renderCardItem = (data: {
const Overview: React.FC = () => {
const intl = useIntl();
const data = useContext(DashboardContext).resource_counts || {};
console.log('overview===');
const renderValue = (
value:
| number
@@ -74,4 +74,4 @@ const Overview: React.FC = () => {
);
};
export default Overview;
export default React.memo(Overview);
src/pages/dashboard/components/resource-utilization.tsx
+1 -2
View File
@@ -110,7 +110,6 @@ const option = {
};
const UtilizationOvertime: React.FC = () => {
console.log('systemload=====================');
const intl = useIntl();
const data = useContext(DashboardContext)?.system_load?.history || {};
@@ -147,7 +146,7 @@ const UtilizationOvertime: React.FC = () => {
legendData,
xAxisData: _.uniq(xAxisData)
};
}, [data]);
}, [data, intl]);
return (
<>
src/pages/dashboard/components/system-load.tsx
+32 -15
View File
@@ -5,9 +5,8 @@ import breakpoints from '@/config/breakpoints';
import useWindowResize from '@/hooks/use-window-resize';
import { useIntl } from '@umijs/max';
import { Col, Row } from 'antd';
import dayjs from 'dayjs';
import _ from 'lodash';
import { useContext, useEffect, useState } from 'react';
import { memo, useContext, useEffect, useMemo, useState } from 'react';
import { DashboardContext } from '../config/dashboard-context';
import ResourceUtilization from './resource-utilization';
@@ -28,11 +27,29 @@ const SystemLoad = () => {
const [paddingRight, setPaddingRight] = useState<string>('20px');
const [smallChartHeight, setSmallChartHeight] = useState<number>(190);
const [largeChartHeight, setLargeChartHeight] = useState<number>(400);
const thresholds = [0.5, 0.7, 1];
const height = 400;
const currentDate = dayjs().format('YYYY-MM-DD');
const handleSelectDate = (date: any) => {};
const height = 400;
const chartData = useMemo(() => {
return {
gpu: {
data: _.round(data.gpu || 0, 1),
color: strokeColorFunc(data.gpu)
},
vram: {
data: _.round(data.vram || 0, 1),
color: strokeColorFunc(data.vram)
},
cpu: {
data: _.round(data.cpu || 0, 1),
color: strokeColorFunc(data.cpu)
},
ram: {
data: _.round(data.ram || 0, 1),
color: strokeColorFunc(data.ram)
}
};
}, [data]);
useEffect(() => {
if (size.width < breakpoints.xl) {
@@ -70,8 +87,8 @@ const SystemLoad = () => {
<Col span={12} style={{ height: smallChartHeight }}>
<GaugeChart
height={smallChartHeight}
value={_.round(data.gpu || 0, 1)}
color={strokeColorFunc(data.gpu)}
value={chartData.gpu.data}
color={chartData.gpu.color}
title={intl.formatMessage({
id: 'dashboard.gpuutilization'
})}
@@ -83,8 +100,8 @@ const SystemLoad = () => {
id: 'dashboard.vramutilization'
})}
height={smallChartHeight}
color={strokeColorFunc(data.vram)}
value={_.round(data.vram || 0, 1)}
color={chartData.vram.color}
value={chartData.vram.data}
></GaugeChart>
</Col>
<Col span={12} style={{ height: smallChartHeight }}>
@@ -93,8 +110,8 @@ const SystemLoad = () => {
id: 'dashboard.cpuutilization'
})}
height={smallChartHeight}
color={strokeColorFunc(data.cpu)}
value={_.round(data.cpu || 0, 1)}
color={chartData.cpu.color}
value={chartData.cpu.data}
></GaugeChart>
</Col>
<Col span={12} style={{ height: smallChartHeight }}>
@@ -103,8 +120,8 @@ const SystemLoad = () => {
id: 'dashboard.memoryutilization'
})}
height={smallChartHeight}
color={strokeColorFunc(data.ram)}
value={_.round(data.ram || 0, 1)}
color={chartData.ram.color}
value={chartData.ram.data}
></GaugeChart>
</Col>
</Row>
@@ -116,4 +133,4 @@ const SystemLoad = () => {
);
};
export default SystemLoad;
export default memo(SystemLoad);
src/pages/dashboard/components/usage-inner/index.tsx
+51 -26
View File
@@ -4,7 +4,7 @@ import { useIntl } from '@umijs/max';
import { Col, Row } from 'antd';
import dayjs from 'dayjs';
import _ from 'lodash';
import { memo, useCallback, useContext } from 'react';
import { memo, useCallback, useContext, useEffect, useState } from 'react';
import { DashboardContext } from '../../config/dashboard-context';
import RequestTokenInner from './request-token-inner';
import TopUser from './top-user';
@@ -33,18 +33,29 @@ const getCurrentMonthDays = () => {
const UsageInner: React.FC<{ paddingRight: string }> = ({ paddingRight }) => {
const intl = useIntl();
const currentDate = dayjs();
const currentMonthDays = getCurrentMonthDays();
let requestData: {
name: string;
color: string;
areaStyle: any;
data: { time: string; value: number }[];
}[] = [];
let tokenData: { time: string; value: number }[] = [];
let userData: { name: string; value: number }[] = [];
const xAxisData: string[] = currentMonthDays;
let topUserList: string[] = [];
const [topUserData, setTopUserData] = useState<{
userData: { name: string; value: number }[];
topUserList: string[];
}>({
userData: [],
topUserList: []
});
const [requestTokenData, setRequestTokenData] = useState<{
requestData: {
name: string;
color: string;
areaStyle: any;
data: { time: string; value: number }[];
}[];
tokenData: { time: string; value: number }[];
xAxisData: string[];
}>({
requestData: [],
tokenData: [],
xAxisData: []
});
const { model_usage } = useContext(DashboardContext);
const data = model_usage || {};
@@ -54,6 +65,7 @@ const UsageInner: React.FC<{ paddingRight: string }> = ({ paddingRight }) => {
};
const generateData = useCallback(() => {
const currentMonthDays = getCurrentMonthDays();
const requestList: {
name: string;
color: string;
@@ -88,7 +100,7 @@ const UsageInner: React.FC<{ paddingRight: string }> = ({ paddingRight }) => {
data: []
};
_.each(xAxisData, (date: string) => {
_.each(currentMonthDays, (date: string) => {
// tokens data
const item = _.find(data.completion_token_history, (item: any) => {
return dayjs(item.timestamp * 1000).format('YYYY-MM-DD') === date;
@@ -140,8 +152,10 @@ const UsageInner: React.FC<{ paddingRight: string }> = ({ paddingRight }) => {
// ========== top users ============
if (!data.top_users?.length) {
userData = [];
topUserList = [];
setTopUserData({
userData: [],
topUserList: []
});
} else {
const users: string[] = [];
_.each(data.top_users, (item: any) => {
@@ -155,15 +169,23 @@ const UsageInner: React.FC<{ paddingRight: string }> = ({ paddingRight }) => {
value: item.completion_token_count
});
});
topUserList = _.uniq(users);
userData = [topUserCompletion, topUserPrompt];
setTopUserData({
userData: [topUserCompletion, topUserPrompt],
topUserList: _.uniq(users)
});
}
requestData = [requestList];
tokenData = [completionData, prompData];
}, [data, xAxisData]);
setRequestTokenData({
requestData: [requestList],
tokenData: [completionData, prompData],
xAxisData: currentMonthDays
});
}, [data]);
generateData();
useEffect(() => {
generateData();
}, [generateData]);
return (
<>
@@ -181,13 +203,16 @@ const UsageInner: React.FC<{ paddingRight: string }> = ({ paddingRight }) => {
style={{ paddingRight: paddingRight }}
>
<RequestTokenInner
requestData={requestData}
xAxisData={xAxisData}
tokenData={tokenData}
requestData={requestTokenData.requestData}
xAxisData={requestTokenData.xAxisData}
tokenData={requestTokenData.tokenData}
></RequestTokenInner>
</Col>
<Col xs={24} sm={24} md={24} lg={24} xl={8}>
<TopUser userData={userData} topUserList={topUserList}></TopUser>
<TopUser
userData={topUserData.userData}
topUserList={topUserData.topUserList}
></TopUser>
</Col>
</Row>
</>
src/pages/dashboard/components/usage-inner/request-token-inner.tsx
-1
View File
@@ -17,7 +17,6 @@ interface RequestTokenInnerProps {
xAxisData: string[];
}
const RequestTokenInner: React.FC<RequestTokenInnerProps> = (props) => {
console.log('request token inner=====================');
const { requestData, tokenData, xAxisData } = props;
const intl = useIntl();
const labelFormatter = (v: any) => {
src/pages/dashboard/components/usage-inner/top-user.tsx
-1
View File
@@ -8,7 +8,6 @@ interface TopUserProps {
topUserList: string[];
}
const TopUser: React.FC<TopUserProps> = (props) => {
console.log('TopUser=====================');
const { userData, topUserList } = props;
const intl = useIntl();
src/pages/llmodels/components/data-form.tsx
+1 -1
View File
@@ -260,7 +260,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
}
return null;
}, [props.source, isGGUF]);
}, [props.source, isGGUF, intl]);
const handleOk = (formdata: FormData) => {
const gpu = _.find(gpuOptions, (item: any) => {
src/pages/llmodels/components/update-modal.tsx
+1 -1
View File
@@ -226,7 +226,7 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
}
return null;
}, [props.data?.source, isGGUF]);
}, [props.data?.source, isGGUF, intl]);
const handleSumit = () => {
form.submit();
src/pages/playground/components/ground-left.tsx
+13 -2
View File
@@ -50,6 +50,7 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
const scroller = useRef<any>(null);
const currentMessageRef = useRef<any>(null);
const paramsRef = useRef<any>(null);
const messageListLengthCache = useRef<number>(0);
const { initialize, updateScrollerPosition } = useOverlayScroller();
const { initialize: innitializeParams } = useOverlayScroller();
@@ -68,6 +69,7 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
const setMessageId = () => {
messageId.current = messageId.current + 1;
};
const handleNewMessage = (message?: { role: string; content: string }) => {
const newMessage = message || {
role:
@@ -247,8 +249,17 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
}, [paramsRef.current, innitializeParams]);
useEffect(() => {
updateScrollerPosition();
}, [messageList]);
if (loading) {
updateScrollerPosition();
}
}, [messageList, loading]);
useEffect(() => {
if (messageList.length > messageListLengthCache.current) {
updateScrollerPosition();
}
messageListLengthCache.current = messageList.length;
}, [messageList.length]);
return (
<div className="ground-left-wrapper">
src/pages/playground/components/multiple-chat/index.tsx
+1 -3
View File
@@ -79,9 +79,7 @@ const MultiCompare: React.FC<MultiCompareProps> = ({ modelList, loaded }) => {
const modelRefList = Object.getOwnPropertySymbols(modelRefs.current);
modelRefList.forEach((instanceId: symbol) => {
const ref = modelRefs.current[instanceId];
ref?.setMessageList((preList: any) => {
return [...preList, { ...message }];
});
ref?.addNewMessage(message);
});
};
src/pages/playground/components/multiple-chat/model-item.tsx
+25 -9
View File
@@ -65,19 +65,13 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
const controllerRef = useRef<any>(null);
const currentMessageRef = useRef<MessageItem[]>([]);
const modelScrollRef = useRef<any>(null);
const messageListLengthCache = useRef<number>(0);
const { initialize, updateScrollerPosition } = useOverlayScroller();
const setMessageId = () => {
messageId.current = messageId.current + 1;
};
const maxHeight = useMemo(() => {
const total = 72 + 110 + 46 + 16 + 32;
if (spans.count < 4) {
return `calc(100vh - ${total}px)`;
}
return `calc(100vh - ${total * 2 + 16}px)`;
}, [spans.count]);
const abortFetch = () => {
controllerRef.current?.abort?.();
@@ -255,6 +249,19 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
currentMessageRef.current = [];
};
const addNewMessage = (message: Omit<MessageItem, 'uid'>) => {
setMessageId();
setMessageList((preList) => {
return [
...preList,
{
...message,
uid: messageId.current
}
];
});
};
const handleCloseViewCode = () => {
setShow(false);
};
@@ -345,14 +352,23 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
}, [modelScrollRef.current, initialize]);
useEffect(() => {
updateScrollerPosition();
if (loadingStatus[instanceId]) {
updateScrollerPosition();
}
}, [messageList]);
useEffect(() => {
if (messageList.length > messageListLengthCache.current) {
updateScrollerPosition();
}
messageListLengthCache.current = messageList.length;
}, [messageList.length]);
useImperativeHandle(ref, () => {
return {
submit: handleSubmit,
abortFetch,
setMessageList,
addNewMessage,
clear: handleClearMessage,
presetPrompt: handlePresetMessageList,
setSystemMessage,