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}
src/pages/dashboard/config/index.ts
+5 -5
View File
@@ -1,31 +1,31 @@
export const overviewConfigs = [
{
key: 'workworker_count',
label: 'Workers',
label: 'dashboard.workers',
// backgroundColor: 'linear-gradient(135deg, #ffffff, rgb(232 249 240 / 60%))'
backgroundColor: 'var(--color-white-1)'
},
{
key: 'gpu_count',
label: 'Total GPUs',
label: 'dashboard.totalgpus',
backgroundColor: 'var(--color-white-1)'
// backgroundColor: 'linear-gradient(135deg, #ffffff, rgb(232 249 240 / 60%))'
},
{
key: 'allocatedGpus',
label: 'Allocated GPUs',
label: 'dashboard.allocategpus',
backgroundColor: 'var(--color-white-1)'
// backgroundColor: 'linear-gradient(135deg, #ffffff, rgb(232 249 240 / 60%))'
},
{
key: 'model_count',
label: 'Models',
label: 'dashboard.models',
backgroundColor: 'var(--color-white-1)'
// backgroundColor: 'linear-gradient(135deg, #ffffff, rgb(232 249 240 / 60%))'
},
{
key: 'model_instance_count',
label: 'Instances',
label: 'dashboard.instances',
backgroundColor: 'var(--color-white-1)'
// backgroundColor: 'linear-gradient(135deg, #ffffff, rgb(232 249 240 / 60%))'
}
src/pages/llmodels/index.tsx
+1 -4
View File
@@ -372,10 +372,7 @@ const Models: React.FC = () => {
useEffect(() => {
fetchData();
setTimeout(() => {
createModelsChunkRequest();
}, 1000);
createModelsChunkRequest();
return () => {
chunkRequedtRef.current?.current?.cancel?.();
};
src/pages/login/components/password-form.tsx
+3 -4
View File
@@ -76,10 +76,9 @@ const PasswordForm: React.FC = () => {
{
required: true,
pattern: PasswordReg,
message: intl.formatMessage(
{ id: 'common.form.rule.input' },
{ name: intl.formatMessage({ id: 'users.form.newpassword' }) }
)
message: intl.formatMessage({
id: 'users.form.rule.password'
})
}
]}
>
src/pages/resources/components/gpus.tsx
+21 -100
View File
@@ -12,97 +12,6 @@ import { queryGpuDevicesList } from '../apis';
import { GPUDeviceItem } from '../config/types';
const { Column } = Table;
const dataSource: GPUDeviceItem[] = [
{
id: 1,
name: 'bj-web-service-1',
address: '183.14.31.136',
hostname: 'bj-web-service-1',
labels: {},
resources: {
capacity: {
cpu: 4,
gpu: 2,
memory: '64 GiB',
gram: '24 Gib'
},
allocable: {
cpu: 2.5,
gpu: 1.6,
memory: '64',
gram: '24 Gib'
}
},
state: 'ACTIVE'
},
{
id: 2,
name: 'bj-db-service-2',
address: '172.24.1.36',
hostname: 'bj-db-service-2',
labels: {},
resources: {
capacity: {
cpu: 4,
gpu: 2,
memory: '64 GiB',
gram: '24 Gib'
},
allocable: {
cpu: 2,
gpu: 1.5,
memory: '32 GiB',
gram: '12 Gib'
}
},
state: 'ACTIVE'
},
{
id: 3,
name: 'guangzhou-computed-node-2',
address: '170.10.2.10',
hostname: 'guangzhou-computed-node-2',
labels: {},
resources: {
capacity: {
cpu: 8,
gpu: 4,
memory: '64 GiB',
gram: '24 Gib'
},
allocable: {
cpu: 2,
gpu: 1.5,
memory: '32 GiB',
gram: '12 Gib'
}
},
state: 'ACTIVE'
},
{
id: 4,
name: 'hangzhou-cache-node-1',
address: '115.2.21.10',
hostname: 'hangzhou-cache-node-1',
labels: {},
resources: {
capacity: {
cpu: 8,
gpu: 4,
memory: '64 GiB',
gram: '24 Gib'
},
allocable: {
cpu: 4,
gpu: 2.5,
memory: '40 GiB',
gram: '16 Gib'
}
},
state: 'ACTIVE'
}
];
const Models: React.FC = () => {
const intl = useIntl();
const rowSelection = useTableRowSelection();
@@ -205,20 +114,32 @@ const Models: React.FC = () => {
onChange: handlePageChange
}}
>
<Column title="Name" dataIndex="name" key="name" />
<Column
title="Index"
title={intl.formatMessage({ id: 'common.table.name' })}
dataIndex="name"
key="name"
/>
<Column
title={intl.formatMessage({ id: 'resources.table.index' })}
dataIndex="index"
key="index"
render={(text, record: GPUDeviceItem) => {
return <span>{record.index}</span>;
}}
/>
<Column title="Worker Name" dataIndex="worker_name" key="worker_name" />
<Column title="Vendor" dataIndex="vendor" key="vendor" />
<Column
title={intl.formatMessage({ id: 'resources.table.workername' })}
dataIndex="worker_name"
key="worker_name"
/>
<Column
title={intl.formatMessage({ id: 'resources.table.vender' })}
dataIndex="vendor"
key="vendor"
/>
<Column
title="Temperature(˚C)"
title={`${intl.formatMessage({ id: 'resources.table.temperature' })} (°C)`}
dataIndex="temperature"
key="Temperature"
render={(text, record: GPUDeviceItem) => {
@@ -226,7 +147,7 @@ const Models: React.FC = () => {
}}
/>
<Column
title="Core"
title={intl.formatMessage({ id: 'resources.table.core' })}
dataIndex="core"
key="Core"
render={(text, record: GPUDeviceItem) => {
@@ -234,7 +155,7 @@ const Models: React.FC = () => {
}}
/>
<Column
title="GPU Utilization"
title={intl.formatMessage({ id: 'resources.table.gpuutilization' })}
dataIndex="gpuUtil"
key="gpuUtil"
render={(text, record: GPUDeviceItem) => {
@@ -247,8 +168,8 @@ const Models: React.FC = () => {
/>
<Column
title="VRAM"
dataIndex="GRAM"
title={intl.formatMessage({ id: 'resources.table.vramutilization' })}
dataIndex="VRAM"
key="VRAM"
render={(text, record: GPUDeviceItem) => {
return (