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

fix: dashboard re-render

Browse Source
This commit is contained in:
jialin
2024-07-04 17:43:39 +08:00
parent ed3f9f7e96
commit e9d8828dcd
42 changed files with 240 additions and 1442 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/api-keys/index.tsx
+2 -1
View File
@@ -193,11 +193,12 @@ const Models: React.FC = () => {
<Input
placeholder={intl.formatMessage({ id: 'common.filter.name' })}
style={{ width: 300 }}
allowClear
onChange={handleNameChange}
></Input>
<Button
type="text"
style={{ color: 'var(--ant-color-primary)' }}
style={{ color: 'var(--ant-color-text-tertiary)' }}
onClick={handleSearch}
icon={<SyncOutlined></SyncOutlined>}
></Button>
src/pages/dashboard/components/dahboard-inner.tsx
+39
View File
@@ -0,0 +1,39 @@
import { memo, useCallback, useEffect, useState } from 'react';
import { queryDashboardData } from '../apis';
import DashboardContext from '../config/dashboard-context';
import { DashboardProps } from '../config/types';
import ActiveTable from './active-table';
import Overview from './over-view';
import SystemLoad from './system-load';
import Usage from './usage';
const Dashboard: React.FC<{ setLoading: (loading: boolean) => void }> = ({
setLoading
}) => {
const [data, setData] = useState<DashboardProps>({} as DashboardProps);
const getDashboardData = useCallback(async () => {
try {
setLoading(true);
const res = await queryDashboardData();
setData(res);
setLoading(false);
} catch (error) {
setLoading(false);
setData({} as DashboardProps);
}
}, []);
useEffect(() => {
getDashboardData();
}, []);
return (
<DashboardContext.Provider value={{ ...data, fetchData: getDashboardData }}>
<Overview></Overview>
<SystemLoad></SystemLoad>
<Usage></Usage>
<ActiveTable></ActiveTable>
</DashboardContext.Provider>
);
};
export default memo(Dashboard);
src/pages/dashboard/components/over-view.tsx
+1 -1
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
src/pages/dashboard/components/resource-utilization.tsx
+12 -10
View File
@@ -2,7 +2,7 @@ import Chart from '@/components/echarts/chart';
import { getLocale, useIntl } from '@umijs/max';
import dayjs from 'dayjs';
import _ from 'lodash';
import { useCallback, useContext, useEffect, useState } from 'react';
import { useContext } from 'react';
import { DashboardContext } from '../config/dashboard-context';
const chartColorMap = {
@@ -110,9 +110,11 @@ const option = {
};
const UtilizationOvertime: React.FC = () => {
console.log('systemload=====================');
const intl = useIntl();
const locale = getLocale();
const [dataOptions, setDataOptions] = useState<any>(option);
let dataOptions: any = {};
// const [dataOptions, setDataOptions] = useState<any>(option);
const data = useContext(DashboardContext)?.system_load?.history || {};
const typeList = ['gpu', 'cpu', 'memory', 'gpu_memory'];
@@ -121,7 +123,7 @@ const UtilizationOvertime: React.FC = () => {
return `${value}%`;
};
const generateData = useCallback(() => {
const generateData = () => {
const legendData: string[] = [];
const xAxisData: string[] = [];
let list: { value: number; time: string; type: string }[] = [];
@@ -157,7 +159,7 @@ const UtilizationOvertime: React.FC = () => {
};
});
setDataOptions({
dataOptions = {
...option,
legend: {
...option.legend,
@@ -168,12 +170,12 @@ const UtilizationOvertime: React.FC = () => {
data: _.uniq(xAxisData)
},
series: list
});
}, [data, locale]);
useEffect(() => {
generateData();
}, [data, locale]);
};
};
generateData();
// useEffect(() => {
// generateData();
// }, [data, locale]);
return (
<>
src/pages/dashboard/components/usage-inner/request-token-inner.tsx
+52
View File
@@ -0,0 +1,52 @@
import CardWrapper from '@/components/card-wrapper';
import BarChart from '@/components/echarts/bar-chart';
import LineChart from '@/components/echarts/line-chart';
import { useIntl } from '@umijs/max';
import { Col, Row } from 'antd';
import dayjs from 'dayjs';
import React from 'react';
interface RequestTokenInnerProps {
requestData: {
name: string;
color: string;
areaStyle: any;
data: { time: string; value: number }[];
}[];
tokenData: { time: string; value: number }[];
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) => {
return dayjs(v).format('MM-DD');
};
return (
<CardWrapper style={{ width: '100%' }}>
<Row style={{ width: '100%' }}>
<Col span={12}>
<LineChart
title={intl.formatMessage({ id: 'dashboard.apirequest' })}
seriesData={requestData}
xAxisData={xAxisData}
height={360}
labelFormatter={labelFormatter}
></LineChart>
</Col>
<Col span={12}>
<BarChart
title={intl.formatMessage({ id: 'dashboard.tokens' })}
seriesData={tokenData}
xAxisData={xAxisData}
height={360}
labelFormatter={labelFormatter}
></BarChart>
</Col>
</Row>
</CardWrapper>
);
};
export default React.memo(RequestTokenInner);
src/pages/dashboard/components/usage-inner/top-user.tsx
+27
View File
@@ -0,0 +1,27 @@
import CardWrapper from '@/components/card-wrapper';
import HBar from '@/components/echarts/h-bar';
import { useIntl } from '@umijs/max';
import React from 'react';
interface TopUserProps {
userData: { name: string; value: number }[];
topUserList: string[];
}
const TopUser: React.FC<TopUserProps> = (props) => {
console.log('TopUser=====================');
const { userData, topUserList } = props;
const intl = useIntl();
return (
<CardWrapper>
<HBar
title={intl.formatMessage({ id: 'dashboard.topusers' })}
seriesData={userData}
xAxisData={topUserList}
height={360}
></HBar>
</CardWrapper>
);
};
export default React.memo(TopUser);
src/pages/dashboard/components/usage.tsx
+36 -69
View File
@@ -1,7 +1,3 @@
import CardWrapper from '@/components/card-wrapper';
import BarChart from '@/components/echarts/bar-chart';
import HBar from '@/components/echarts/h-bar';
import LineChart from '@/components/echarts/line-chart';
import PageTools from '@/components/page-tools';
import breakpoints from '@/config/breakpoints';
import useWindowResize from '@/hooks/use-window-resize';
@@ -11,6 +7,8 @@ import dayjs from 'dayjs';
import _ from 'lodash';
import { useContext, useEffect, useState } from 'react';
import { DashboardContext } from '../config/dashboard-context';
import RequestTokenInner from './usage-inner/request-token-inner';
import TopUser from './usage-inner/top-user';
const baseColorMap = {
baseL2: 'rgba(13,171,219,0.8)',
@@ -38,28 +36,27 @@ const Usage = () => {
const intl = useIntl();
const { size } = useWindowResize();
const [paddingRight, setPaddingRight] = useState<string>('20px');
const [requestData, setRequestData] = useState<
{
name: string;
color: string;
areaStyle: any;
data: { time: string; value: number }[];
}[]
>([]);
console.log('usage========');
const currentDate = dayjs();
const currentMonthDays = getCurrentMonthDays();
const [tokenData, setTokenData] = useState<{ time: string; value: number }[]>(
[]
);
const [userData, setUserData] = useState<{ name: string; value: number }[]>(
[]
);
const [xAxisData, setXAxisData] = useState<string[]>(currentMonthDays);
const [topUserList, setTopUseList] = useState<string[]>([]);
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 data = useContext(DashboardContext)?.model_usage || {};
const { model_usage, fetchData } = useContext(DashboardContext);
const data = model_usage || {};
const handleSelectDate = (date: any) => {};
const handleSelectDate = (date: any) => {
// fetchData?.();
};
const generateData = () => {
const requestList: {
@@ -68,30 +65,30 @@ const Usage = () => {
areaStyle: any;
data: { time: string; value: number }[];
} = {
name: 'API Request',
name: 'API requests',
areaStyle: {},
color: baseColorMap.base,
data: []
};
const completionData: any = {
name: 'completion_token',
name: 'Completion tokens',
color: baseColorMap.base,
data: []
};
const prompData: any = {
name: 'prompt_token',
name: 'Prompt tokens',
color: baseColorMap.baseR3,
data: []
};
const topUserPrompt: any = {
name: 'prompt_token',
name: 'Prompt tokens',
color: baseColorMap.baseR3,
data: []
};
const topUserCompletion: any = {
name: 'completion_token',
name: 'Completion tokens',
color: baseColorMap.base,
data: []
};
@@ -161,14 +158,10 @@ const Usage = () => {
});
});
setRequestData([requestList]);
setUserData([topUserCompletion, topUserPrompt]);
setTopUseList(users);
setTokenData([completionData, prompData]);
};
const labelFormatter = (v: any) => {
return dayjs(v).format('MM-DD');
requestData = [requestList];
userData = [topUserCompletion, topUserPrompt];
topUserList = users;
tokenData = [completionData, prompData];
};
useEffect(() => {
@@ -179,9 +172,7 @@ const Usage = () => {
}
}, [size.width]);
useEffect(() => {
generateData();
}, [data]);
generateData();
return (
<>
@@ -193,7 +184,7 @@ const Usage = () => {
onChange={handleSelectDate}
style={{ width: 300 }}
picker="month"
defaultValue={dayjs()}
defaultValue={currentDate}
/>
}
/>
@@ -206,38 +197,14 @@ const Usage = () => {
xl={16}
style={{ paddingRight: paddingRight }}
>
<CardWrapper style={{ width: '100%' }}>
<Row style={{ width: '100%' }}>
<Col span={12}>
<LineChart
title={intl.formatMessage({ id: 'dashboard.apirequest' })}
seriesData={requestData}
xAxisData={xAxisData}
height={360}
labelFormatter={labelFormatter}
></LineChart>
</Col>
<Col span={12}>
<BarChart
title={intl.formatMessage({ id: 'dashboard.tokens' })}
seriesData={tokenData}
xAxisData={xAxisData}
height={360}
labelFormatter={labelFormatter}
></BarChart>
</Col>
</Row>
</CardWrapper>
<RequestTokenInner
requestData={requestData}
xAxisData={xAxisData}
tokenData={tokenData}
></RequestTokenInner>
</Col>
<Col xs={24} sm={24} md={24} lg={24} xl={8}>
<CardWrapper>
<HBar
title={intl.formatMessage({ id: 'dashboard.topusers' })}
seriesData={userData}
xAxisData={topUserList}
height={360}
></HBar>
</CardWrapper>
<TopUser userData={userData} topUserList={topUserList}></TopUser>
</Col>
</Row>
</>
src/pages/dashboard/config/dashboard-context.ts
+3 -3
View File
@@ -1,8 +1,8 @@
import { createContext } from 'react';
import { DashboardProps } from './types';
export const DashboardContext = createContext<DashboardProps>(
{} as DashboardProps
);
export const DashboardContext = createContext<
DashboardProps & { fetchData: () => Promise<void> }
>({} as DashboardProps & { fetchData: () => Promise<void> });
export default DashboardContext;
src/pages/dashboard/index.tsx
+4 -30
View File
@@ -1,44 +1,18 @@
import { PageContainer } from '@ant-design/pro-components';
import { Spin } from 'antd';
import { useEffect, useState } from 'react';
import { queryDashboardData } from './apis';
import ActiveTable from './components/active-table';
import Overview from './components/over-view';
import SystemLoad from './components/system-load';
import Usage from './components/usage';
import DashboardContext from './config/dashboard-context';
import { DashboardProps } from './config/types';
import { memo, useState } from 'react';
import DashboardInner from './components/dahboard-inner';
const Dashboard: React.FC = () => {
const [data, setData] = useState<DashboardProps>({} as DashboardProps);
const [loading, setLoading] = useState(false);
const getDashboardData = async () => {
try {
setLoading(true);
const res = await queryDashboardData();
setData(res);
setLoading(false);
} catch (error) {
setLoading(false);
setData({} as DashboardProps);
}
};
useEffect(() => {
getDashboardData();
}, []);
return (
<PageContainer ghost extra={[]}>
<Spin spinning={loading}>
<DashboardContext.Provider value={{ ...data }}>
<Overview></Overview>
<SystemLoad></SystemLoad>
<Usage></Usage>
<ActiveTable></ActiveTable>
</DashboardContext.Provider>
<DashboardInner setLoading={setLoading} />
</Spin>
</PageContainer>
);
};
export default Dashboard;
export default memo(Dashboard);
src/pages/llmodels/components/add-modal.tsx
+5 -1
View File
@@ -146,6 +146,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
onChange={handleInputRepoChange}
onSearch={debounceSearch}
options={repoOptions}
disabled={action === PageAction.EDIT}
addAfter={
<span style={{ position: 'relative', top: '2px' }}>
<SearchOutlined></SearchOutlined>
@@ -176,6 +177,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
required
options={fileOptions}
onFocus={handleRepoOnBlur}
disabled={action === PageAction.EDIT}
></SealAutoComplete>
</Form.Item>
</>
@@ -229,6 +231,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
>
<SealAutoComplete
filterOption
disabled={action === PageAction.EDIT}
label={intl.formatMessage({ id: 'model.form.ollama.model' })}
required
options={ollamaModelOptions}
@@ -314,6 +317,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
]}
>
<SealSelect
disabled={action === PageAction.EDIT}
label={intl.formatMessage({
id: 'models.form.source'
})}
@@ -343,7 +347,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
id: 'models.form.replicas'
})}
required
min={1}
min={0}
></SealInput.Number>
</Form.Item>
<Form.Item<FormData> name="description">
src/pages/llmodels/config/index.ts
+2 -1
View File
@@ -19,7 +19,8 @@ export const modelSourceMap = {
};
export const status: any = {
Running: StatusMaps.success
Running: StatusMaps.success,
Pending: StatusMaps.transitioning
};
export const ActionList = [
src/pages/llmodels/index.tsx
+7 -2
View File
@@ -334,9 +334,14 @@ const Models: React.FC = () => {
handleViewLogs(row);
}
};
useEffect(() => {
fetchData();
return () => {
axiosToken?.cancel?.();
};
}, [queryParams]);
useEffect(() => {
// fetchData();
createModelsChunkRequest();
return () => {
chunkRequedtRef.current?.current?.cancel?.();
@@ -430,7 +435,7 @@ const Models: React.FC = () => {
></Input>
<Button
type="text"
style={{ color: 'var(--ant-color-primary)' }}
style={{ color: 'var(--ant-color-text-tertiary)' }}
onClick={handleSearch}
icon={<SyncOutlined></SyncOutlined>}
></Button>
src/pages/login/components/login-form.tsx
+13 -13
View File
@@ -11,7 +11,6 @@ import { SelectLang, history, useIntl, useModel } from '@umijs/max';
import { Button, Checkbox, Form } from 'antd';
import CryptoJS from 'crypto-js';
import { useAtom } from 'jotai';
import { useEffect } from 'react';
import { flushSync } from 'react-dom';
import { login } from '../apis';
@@ -40,12 +39,21 @@ const renderWelCome = (intl: any) => {
style={{
display: 'flex',
marginBottom: 32,
fontSize: 24,
fontSize: 20,
justifyContent: 'center',
alignItems: 'center'
}}
>
<div>{intl?.formatMessage({ id: 'users.login.title' })}</div>
<div className="flex-center">
<span>
{intl?.formatMessage({ id: 'users.login.title' }, { name: '' })}
</span>
<img
src={LogoIcon}
alt="logo"
style={{ height: '24px', marginLeft: 10 }}
/>
</div>
</div>
);
};
@@ -130,9 +138,7 @@ const LoginForm = () => {
}
};
useEffect(() => {
callGetRememberMe();
}, []);
callGetRememberMe();
return (
<div>
@@ -141,15 +147,9 @@ const LoginForm = () => {
position: 'fixed',
right: 0,
top: 0,
left: 0,
width: '100%',
padding: '0 20px',
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center'
padding: '0 20px'
}}
>
<div>{renderLogo()}</div>
<SelectLang icon={<GlobalOutlined />} reload={false} />
</div>
<div>
src/pages/playground/components/chat-footer.tsx
-1
View File
@@ -47,7 +47,6 @@ const ChatFooter: React.FC<ChatFooterProps> = (props) => {
<Space size={20}>
<Button
disabled={disabled}
type="primary"
icon={<PlusOutlined />}
onClick={onNewMessage}
>
src/pages/playground/components/ground-left.tsx
+1 -1
View File
@@ -164,7 +164,7 @@ const MessageList: React.FC<MessageProps> = (props) => {
<span className="title">
{intl.formatMessage({ id: 'playground.system' })}
</span>
<Button type="primary" size="small">
<Button size="small">
{collapsed ? <EyeInvisibleOutlined /> : <EyeOutlined />}
</Button>
</div>
src/pages/resources/components/gpus.tsx
+2 -1
View File
@@ -88,11 +88,12 @@ const Models: React.FC = () => {
id: 'common.filter.name'
})}
style={{ width: 300 }}
allowClear
onChange={handleNameChange}
></Input>
<Button
type="text"
style={{ color: 'var(--ant-color-primary)' }}
style={{ color: 'var(--ant-color-text-tertiary)' }}
onClick={handleSearch}
icon={<SyncOutlined></SyncOutlined>}
></Button>
src/pages/resources/components/workers.tsx
+2 -1
View File
@@ -119,11 +119,12 @@ const Models: React.FC = () => {
id: 'common.filter.name'
})}
style={{ width: 300 }}
allowClear
onChange={handleNameChange}
></Input>
<Button
type="text"
style={{ color: 'var(--ant-color-primary)' }}
style={{ color: 'var(--ant-color-text-tertiary)' }}
onClick={handleSearch}
icon={<SyncOutlined></SyncOutlined>}
></Button>
src/pages/users/index.tsx
+2 -1
View File
@@ -213,11 +213,12 @@ const Models: React.FC = () => {
<Input
placeholder={intl.formatMessage({ id: 'common.filter.name' })}
style={{ width: 300 }}
allowClear
onChange={handleNameChange}
></Input>
<Button
type="text"
style={{ color: 'var(--ant-color-primary)' }}
style={{ color: 'var(--ant-color-text-tertiary)' }}
onClick={handleSearch}
icon={<SyncOutlined></SyncOutlined>}
></Button>