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

chore: dashboard load optimization

Browse Source
This commit is contained in:
jialin
2024-07-05 18:51:13 +08:00
parent e9d8828dcd
commit 8c66c482b2
10 changed files with 238 additions and 227 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/dashboard/components/usage.tsx
+8 -199
View File
@@ -1,214 +1,23 @@
import PageTools from '@/components/page-tools';
import breakpoints from '@/config/breakpoints';
import useWindowResize from '@/hooks/use-window-resize';
import { useIntl } from '@umijs/max';
import { Col, DatePicker, Row } from 'antd';
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)',
baseL1: 'rgba(0,34,255,0.8)',
base: 'rgba(0,85,255,0.8)',
baseR1: 'rgba(0,255,233,0.8)',
baseR2: 'rgba(48,0,255,0.8)',
baseR3: 'rgba(85,167,255,0.8)'
};
const getCurrentMonthDays = () => {
const now = dayjs();
const daysInMonth = now.daysInMonth();
const year = dayjs().year();
const month = dayjs().month() + 1;
const dates = [];
for (let day = 1; day <= daysInMonth; day++) {
dates.push(dayjs(`${year}-${month}-${day}`).format('YYYY-MM-DD'));
}
return dates;
};
import { useEffect, useState } from 'react';
import UserInner from './usage-inner';
const Usage = () => {
const intl = useIntl();
const { size } = useWindowResize();
const {
size: { width }
} = useWindowResize();
const [paddingRight, setPaddingRight] = useState<string>('20px');
console.log('usage========');
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 { model_usage, fetchData } = useContext(DashboardContext);
const data = model_usage || {};
const handleSelectDate = (date: any) => {
// fetchData?.();
};
const generateData = () => {
const requestList: {
name: string;
color: string;
areaStyle: any;
data: { time: string; value: number }[];
} = {
name: 'API requests',
areaStyle: {},
color: baseColorMap.base,
data: []
};
const completionData: any = {
name: 'Completion tokens',
color: baseColorMap.base,
data: []
};
const prompData: any = {
name: 'Prompt tokens',
color: baseColorMap.baseR3,
data: []
};
const topUserPrompt: any = {
name: 'Prompt tokens',
color: baseColorMap.baseR3,
data: []
};
const topUserCompletion: any = {
name: 'Completion tokens',
color: baseColorMap.base,
data: []
};
const users: string[] = [];
_.each(xAxisData, (date: string) => {
// tokens data
const item = _.find(data.completion_token_history, (item: any) => {
return dayjs(item.timestamp * 1000).format('YYYY-MM-DD') === date;
});
if (!item) {
completionData.data.push({
titme: date,
value: 0
});
} else {
completionData.data.push({
value: item.value,
time: dayjs(item.timestamp * 1000).format('YYYY-MM-DD')
});
}
const promptItem = _.find(data.prompt_token_history, (item: any) => {
return dayjs(item.timestamp * 1000).format('YYYY-MM-DD') === date;
});
if (!promptItem) {
prompData.data.push({
value: 0,
time: date
});
} else {
prompData.data.push({
value: promptItem.value,
time: dayjs(promptItem.timestamp * 1000).format('YYYY-MM-DD')
});
}
// ============== api request data =================
const requestItem = _.find(data.api_request_history, (item: any) => {
return dayjs(item.timestamp * 1000).format('YYYY-MM-DD') === date;
});
if (!requestItem) {
requestList.data.push({
time: date,
value: 0
});
} else {
requestList.data.push({
time: dayjs(requestItem.timestamp * 1000).format('YYYY-MM-DD'),
value: requestItem.value
});
}
});
// ========== top users ============
_.each(data.top_users, (item: any) => {
users.push(item.username);
topUserPrompt.data.push({
name: item.username,
value: item.prompt_token_count
});
topUserCompletion.data.push({
name: item.username,
value: item.completion_token_count
});
});
requestData = [requestList];
userData = [topUserCompletion, topUserPrompt];
topUserList = users;
tokenData = [completionData, prompData];
};
useEffect(() => {
if (size.width < breakpoints.xl) {
if (width < breakpoints.xl) {
setPaddingRight('0');
} else {
setPaddingRight('20px');
}
}, [size.width]);
}, [width]);
generateData();
return (
<>
<PageTools
style={{ margin: '26px 0px' }}
left={<span>{intl.formatMessage({ id: 'dashboard.usage' })}</span>}
right={
<DatePicker
onChange={handleSelectDate}
style={{ width: 300 }}
picker="month"
defaultValue={currentDate}
/>
}
/>
<Row style={{ width: '100%' }} gutter={[0, 20]}>
<Col
xs={24}
sm={24}
md={24}
lg={24}
xl={16}
style={{ paddingRight: paddingRight }}
>
<RequestTokenInner
requestData={requestData}
xAxisData={xAxisData}
tokenData={tokenData}
></RequestTokenInner>
</Col>
<Col xs={24} sm={24} md={24} lg={24} xl={8}>
<TopUser userData={userData} topUserList={topUserList}></TopUser>
</Col>
</Row>
</>
);
return <UserInner paddingRight={paddingRight}></UserInner>;
};
export default Usage;