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

fix: dashboard intl settings

Browse Source
This commit is contained in:
jialin
2024-06-30 13:49:44 +08:00
parent 9f4f28edaf
commit aa160da9f9
23 changed files with 270 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/dashboard/components/active-table.tsx
+36 -35
View File
@@ -1,44 +1,11 @@
import PageTools from '@/components/page-tools';
import ProgressBar from '@/components/progress-bar';
import { useIntl } from '@umijs/max';
import { Col, Row, Table } from 'antd';
import _ from 'lodash';
import { useContext } from 'react';
import { DashboardContext } from '../config/dashboard-context';
const modelColumns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name'
},
{
title: 'GPU Utilization',
dataIndex: 'gpu_utilization',
key: 'gpu_utilization',
render: (text: any, record: any) => (
<ProgressBar percent={_.round(text, 0)}></ProgressBar>
)
},
{
title: 'VRAM Utilization',
dataIndex: 'gpu_memory_utilization',
key: 'gpu_memory_utilization',
render: (text: any, record: any) => (
<ProgressBar percent={_.round(text, 0)}></ProgressBar>
)
},
{
title: 'Running Instances',
dataIndex: 'instance_count',
key: 'instance_count'
},
{
title: 'Tokens',
dataIndex: 'token_count',
key: 'token_count'
}
];
const projectColumns = [
{
title: 'Name',
@@ -102,7 +69,41 @@ const projectData = [
}
];
const ActiveTable = () => {
const intl = useIntl();
const data = useContext(DashboardContext).active_models || [];
const modelColumns = [
{
title: intl.formatMessage({ id: 'dashboard.activeModels.name' }),
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.vramutilization' }),
dataIndex: 'gpu_memory_utilization',
key: 'gpu_memory_utilization',
render: (text: any, record: any) => (
<ProgressBar percent={_.round(text, 0)}></ProgressBar>
)
},
{
title: intl.formatMessage({ id: 'dashboard.runninginstances' }),
dataIndex: 'instance_count',
key: 'instance_count'
},
{
title: 'Tokens',
dataIndex: 'token_count',
key: 'token_count'
}
];
return (
<Row gutter={[20, 0]}>
<Col xs={24} sm={24} md={24} lg={24} xl={24}>
@@ -112,7 +113,7 @@ const ActiveTable = () => {
<span
style={{ fontSize: 'var(--font-size-large)', padding: '9px 0' }}
>
Active Models
{intl.formatMessage({ id: 'dashboard.activeModels' })}
</span>
}
right={false}
src/pages/dashboard/components/over-view.tsx
+3 -1
View File
@@ -1,3 +1,4 @@
import { useIntl } from '@umijs/max';
import { Card, Col, Row, Space } from 'antd';
import _ from 'lodash';
import React, { useContext } from 'react';
@@ -26,6 +27,7 @@ const renderCardItem = (data: {
);
};
const Overview: React.FC = () => {
const intl = useIntl();
const data = useContext(DashboardContext).resource_counts || {};
const renderValue = (
@@ -61,7 +63,7 @@ const Overview: React.FC = () => {
key={config.key}
>
{renderCardItem({
label: config.label,
label: intl.formatMessage({ id: config.label }),
value: renderValue(_.get(data, config.key, 0)),
bgColor: config.backgroundColor
})}
src/pages/dashboard/components/resource-utilization.tsx
+28 -9
View File
@@ -1,32 +1,43 @@
import LineChart from '@/components/charts/line-chart';
import { getLocale, useIntl } from '@umijs/max';
import dayjs from 'dayjs';
import _ from 'lodash';
import { useContext, useEffect, useState } from 'react';
import { useCallback, useContext, useEffect, useState } from 'react';
import { DashboardContext } from '../config/dashboard-context';
const TypeKeyMap = {
cpu: {
label: 'CPU',
type: 'CPU',
intl: false,
color:
'linear-gradient(90deg,rgba(84, 204, 152,0.8) 0%,rgba(0, 168, 143,.7) 100%)'
},
memory: {
label: 'Memory',
label: 'dashboard.memory',
type: 'Memory',
intl: true,
color:
'linear-gradient(90deg,rgba(249, 248, 113,.8) 0%,rgba(255, 199, 92,0.7) 100%)'
},
gpu: {
label: 'GPU',
type: 'GPU',
intl: false,
color: 'rgba(84, 204, 152,0.8)'
},
gpu_memory: {
label: 'VRAM',
label: 'dashboard.vram',
type: 'VRAM',
intl: true,
color:
'linear-gradient(90deg,rgba(84, 204, 152,0.8) 0%,rgba(0, 168, 143,.7) 100%)'
}
};
const UtilizationOvertime: React.FC = () => {
const intl = useIntl();
const locale = getLocale();
const data = useContext(DashboardContext)?.system_load?.history || {};
const [result, setResult] = useState<
{ time: string; value: number; type: string }[]
@@ -52,30 +63,38 @@ const UtilizationOvertime: React.FC = () => {
const labelFormatter = (value: any) => {
return `${value}%`;
};
const generateData = () => {
const generateData = useCallback(() => {
const list: { value: number; time: string; type: string }[] = [];
_.each(typeList, (type: any) => {
const dataList = _.map(_.get(data, type, []), (item: any) => {
const value = _.get(item, 'value', 0);
const time = dayjs(item.timestamp * 1000).format('HH:mm:ss');
const itemtype = _.get(TypeKeyMap, [type, 'intl'], false)
? intl.formatMessage({
id: _.get(TypeKeyMap, [type, 'label'], '')
})
: _.get(TypeKeyMap, [type, 'label'], '');
return {
value: _.round(item.value, 2) || 0,
time: dayjs(item.timestamp * 1000).format('HH:mm:ss'),
type: _.get(TypeKeyMap, [type, 'label'], ''),
value,
time,
type: itemtype,
color: 'red'
};
});
list.push(...dataList);
});
setResult(list);
};
}, [data, locale]);
useEffect(() => {
generateData();
}, [data]);
}, [data, locale]);
return (
<>
<LineChart
data={result}
locale={locale}
labelFormatter={labelFormatter}
slider={sliderConfig}
/>
src/pages/dashboard/components/system-load.tsx
+15 -5
View File
@@ -2,6 +2,7 @@ import CardWrapper from '@/components/card-wrapper';
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 _ from 'lodash';
import { useContext, useEffect, useState } from 'react';
@@ -15,6 +16,7 @@ const SystemLoad = () => {
'linear-gradient(90deg, rgba(255, 214, 102,.8) 0%, rgba(255, 214, 102,0.5) 50%, rgba(255, 214, 102,.8) 100%)',
'linear-gradient(90deg, rgba(255, 120, 117,.8) 0%, rgba(255, 120, 117,0.5) 50%, rgba(255, 120, 117,.8) 100%)'
];
const intl = useIntl();
const data = useContext(DashboardContext)?.system_load?.current || {};
const { size } = useWindowResize();
const [paddingRight, setPaddingRight] = useState<string>('20px');
@@ -40,7 +42,7 @@ const SystemLoad = () => {
style={{ margin: '32px 8px' }}
left={
<span style={{ fontSize: 'var(--font-size-large)' }}>
System Load
{intl.formatMessage({ id: 'dashboard.systemload' })}
</span>
}
right={
@@ -65,25 +67,33 @@ const SystemLoad = () => {
<Row style={{ height: largeChartHeight, width: '100%' }}>
<Col span={12} style={{ height: smallChartHeight }}>
<UitilBar
title="GPU Utilization"
title={intl.formatMessage({
id: 'dashboard.gpuutilization'
})}
percent={_.round(data.gpu?.utilization_rate || 0, 1)}
></UitilBar>
</Col>
<Col span={12} style={{ height: smallChartHeight }}>
<UitilBar
title="VRAM Utilization"
title={intl.formatMessage({
id: 'dashboard.vramutilization'
})}
percent={_.round(data.gpu_memory?.utilization_rate || 0, 1)}
></UitilBar>
</Col>
<Col span={12} style={{ height: smallChartHeight }}>
<UitilBar
title="CPU Utilization"
title={intl.formatMessage({
id: 'dashboard.cpuutilization'
})}
percent={_.round(data.cpu?.utilization_rate || 0, 1)}
></UitilBar>
</Col>
<Col span={12} style={{ height: smallChartHeight }}>
<UitilBar
title="CPU Memory Utilization"
title={intl.formatMessage({
id: 'dashboard.memoryutilization'
})}
percent={_.round(data.memory?.utilization_rate || 0, 1)}
></UitilBar>
</Col>
src/pages/dashboard/components/usage.tsx
+15 -8
View File
@@ -5,6 +5,7 @@ import PageTools from '@/components/page-tools';
import breakpoints from '@/config/breakpoints';
import useWindowResize from '@/hooks/use-window-resize';
import { generateRandomArray } from '@/utils';
import { useIntl } from '@umijs/max';
import { Col, DatePicker, Row } from 'antd';
import dayjs from 'dayjs';
import _ from 'lodash';
@@ -93,6 +94,7 @@ const tokenUsage = TokensData.map((val, i) => {
});
const Usage = () => {
const intl = useIntl();
const { size } = useWindowResize();
const [paddingRight, setPaddingRight] = useState<string>('20px');
const [requestData, setRequestData] = useState<
@@ -125,14 +127,14 @@ const Usage = () => {
_.each(data.api_request_history, (item: any) => {
requestList.push({
time: dayjs(item.timestamp * 1000).format('YYYY-MM-DD'),
time: dayjs(item.timestamp * 1000).format('YYYY-MM'),
value: item.value
});
});
_.each(data.completion_token_history, (item: any) => {
tokenList.push({
time: dayjs(item.timestamp * 1000).format('YYYY-MM-DD'),
time: dayjs(item.timestamp * 1000).format('YYYY-MM'),
name: 'completion_token',
color: 'rgba(84, 204, 152,0.8)',
value: item.value
@@ -140,7 +142,7 @@ const Usage = () => {
});
_.each(data.prompt_token_history, (item: any) => {
tokenList.push({
time: dayjs(item.timestamp * 1000).format('YYYY-MM-DD'),
time: dayjs(item.timestamp * 1000).format('YYYY-MM'),
name: 'prompt_token',
color: 'rgba(0, 170, 173, 0.8)',
value: item.value
@@ -183,7 +185,11 @@ const Usage = () => {
<>
<PageTools
style={{ margin: '32px 8px' }}
left={<span style={{ fontSize: 'var(--font-size-large)' }}>Usage</span>}
left={
<span style={{ fontSize: 'var(--font-size-large)' }}>
{intl.formatMessage({ id: 'dashboard.usage' })}
</span>
}
right={
<RangePicker onChange={handleSelectDate} style={{ width: 300 }} />
}
@@ -201,7 +207,7 @@ const Usage = () => {
<Row style={{ width: '100%' }}>
<Col span={12}>
<ColumnBar
title="API Request"
title={intl.formatMessage({ id: 'dashboard.apirequest' })}
data={requestData}
xField="time"
yField="value"
@@ -210,7 +216,7 @@ const Usage = () => {
</Col>
<Col span={12}>
<ColumnBar
title="Tokens"
title={intl.formatMessage({ id: 'dashboard.tokens' })}
data={tokenData}
group={false}
colorField="name"
@@ -227,11 +233,12 @@ const Usage = () => {
<Col xs={24} sm={24} md={24} lg={24} xl={8}>
<CardWrapper>
<HBar
title="Top Users"
title={intl.formatMessage({ id: 'dashboard.topusers' })}
data={userData}
colorField="type"
stack={true}
legend={false}
showYAxis={false}
colorField="type"
xField="name"
yField="value"
height={360}