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

build: css files dir

Browse Source
This commit is contained in:
jialin
2024-06-18 11:28:17 +08:00
parent 246d203e36
commit d3f3baa93e
9 changed files with 211 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files
config/config.ts
+15 -10
View File
@@ -7,7 +7,7 @@ const DeleteCssPlugin = require('./plugins/delete-css-plugin');
import proxy from './proxy'; import proxy from './proxy';
import routes from './routes'; import routes from './routes';
const env = process.env.NODE_ENV; const env = process.env.NODE_ENV;
const isProduction = env === 'production1'; const isProduction = env === 'production';
export default defineConfig({ export default defineConfig({
proxy: { proxy: {
@@ -39,20 +39,25 @@ export default defineConfig({
} }
}, },
chainWebpack(config: any) { chainWebpack(config: any) {
config.module.rules.delete('image'); // config.plugin('extract-css').use(MiniCssExtractPlugin, [
config.module.rules.delete('images'); // {
config.plugin('extract-css').use(MiniCssExtractPlugin, [ // filename: 'css/[name].[contenthash:8].css',
{ // chunkFilename: 'css/[name].[contenthash:8].chunk.css',
filename: 'css/[name].[contenthash:8].css', // ignoreOrder: true
chunkFilename: 'css/[name].[contenthash:8].chunk.css', // }
ignoreOrder: true // ]);
}
]);
// config.plugin('delete-css').use(DeleteCssPlugin, [ // config.plugin('delete-css').use(DeleteCssPlugin, [
// { // {
// outputPath: path.resolve(__dirname, '../', 'dist') // outputPath: path.resolve(__dirname, '../', 'dist')
// } // }
// ]); // ]);
config.plugin('mini-css-extract-plugin').tap((args: any) => [
{
...args[0],
filename: `css/[name].[contenthash:8].css`,
chunkFilename: `css/[name].[contenthash:8].chunk.css`
}
]);
config.output config.output
.filename('js/[name].[contenthash:8].js') .filename('js/[name].[contenthash:8].js')
.chunkFilename('js/[name].[contenthash:8].chunk.js'); .chunkFilename('js/[name].[contenthash:8].chunk.js');
src/components/charts/gauge.tsx
+1
View File
@@ -30,6 +30,7 @@ const GaugeChart: React.FC<GaugeChartProps> = (props) => {
} }
}, },
title: { title: {
// title,
titleFontSize: 14, titleFontSize: 14,
style: { style: {
align: 'center' align: 'center'
src/pages/dashboard/components/active-table.tsx
+4 -2
View File
@@ -42,12 +42,14 @@ const projectColumns = [
{ {
title: 'Token Quota', title: 'Token Quota',
dataIndex: 'quota', dataIndex: 'quota',
key: 'quota' key: 'quota',
render: (text: any, record: any) => <span>{record.quota}k</span>
}, },
{ {
title: 'Token Utilization', title: 'Token Utilization',
dataIndex: 'utilization', dataIndex: 'utilization',
key: 'utilization' key: 'utilization',
render: (text: any, record: any) => <span>{record.utilization}%</span>
}, },
{ {
title: 'Members', title: 'Members',
src/pages/dashboard/components/over-view.tsx
+14 -11
View File
@@ -1,3 +1,4 @@
import { PageContainer } from '@ant-design/pro-components';
import { Card, Col, Row, Space } from 'antd'; import { Card, Col, Row, Space } from 'antd';
import React from 'react'; import React from 'react';
import { overviewConfigs } from '../config'; import { overviewConfigs } from '../config';
@@ -62,17 +63,19 @@ const Overview: React.FC = (props) => {
); );
}; };
return ( return (
<Row gutter={[20, 20]} className={styles.row}> <PageContainer ghost title={false}>
{overviewConfigs.map((config, index) => ( <Row gutter={[20, 20]} className={styles.row}>
<Col span={5} key={config.key}> {overviewConfigs.map((config, index) => (
{renderCardItem({ <Col span={5} key={config.key}>
label: config.label, {renderCardItem({
value: renderValue(data[config.key] || 0), label: config.label,
bgColor: config.backgroundColor value: renderValue(data[config.key] || 0),
})} bgColor: config.backgroundColor
</Col> })}
))} </Col>
</Row> ))}
</Row>
</PageContainer>
); );
}; };
src/pages/dashboard/components/resource-utilization.tsx
+33 -8
View File
@@ -1,12 +1,28 @@
import LineChart from '@/components/charts/line-chart'; import LineChart from '@/components/charts/line-chart';
import { generateRandomArray } from '@/utils'; import { generateFluctuatingData } from '@/utils';
import _ from 'lodash'; import _ from 'lodash';
const mockData = { const mockData = {
GPU: generateRandomArray(), GPU: generateFluctuatingData({
CPU: generateRandomArray(), total: 17,
Memory: generateRandomArray(), max: 80,
VRAM: generateRandomArray() min: 20
}),
CPU: generateFluctuatingData({
total: 17,
max: 70,
min: 10
}),
Memory: generateFluctuatingData({
total: 17,
max: 60,
min: 20
}),
VRAM: generateFluctuatingData({
total: 17,
max: 90,
min: 15
})
}; };
const UtilizationOvertime: React.FC = () => { const UtilizationOvertime: React.FC = () => {
const timeList = [ const timeList = [
@@ -15,8 +31,8 @@ const UtilizationOvertime: React.FC = () => {
// '03:00:00', // '03:00:00',
// '04:00:00', // '04:00:00',
// '05:00:00', // '05:00:00',
'06:00:00', // '06:00:00',
'07:00:00', // '07:00:00',
'08:00:00', '08:00:00',
'09:00:00', '09:00:00',
'10:00:00', '10:00:00',
@@ -24,7 +40,16 @@ const UtilizationOvertime: React.FC = () => {
'12:00:00', '12:00:00',
'13:00:00', '13:00:00',
'14:00:00', '14:00:00',
'15:00:00' '15:00:00',
'16:00:00',
'17:00:00',
'18:00:00',
'19:00:00',
'20:00:00',
'21:00:00',
'22:00:00',
'23:00:00',
'24:00:00'
]; ];
const typeList = ['GPU', 'CPU', 'Memory', 'VRAM']; const typeList = ['GPU', 'CPU', 'Memory', 'VRAM'];
const generateData = () => { const generateData = () => {
src/pages/dashboard/components/system-load.tsx
+56 -53
View File
@@ -1,5 +1,6 @@
import GaugeChart from '@/components/charts/gauge'; import GaugeChart from '@/components/charts/gauge';
import PageTools from '@/components/page-tools'; import PageTools from '@/components/page-tools';
import { PageContainer } from '@ant-design/pro-components';
import { Col, DatePicker, Row } from 'antd'; import { Col, DatePicker, Row } from 'antd';
import ResourceUtilization from './resource-utilization'; import ResourceUtilization from './resource-utilization';
@@ -9,59 +10,61 @@ const SystemLoad = () => {
}; };
return ( return (
<div className="system-load"> <PageContainer ghost title="System Load">
<PageTools <div className="system-load">
marginBottom={10} <PageTools
marginTop={0} marginBottom={10}
left={false} marginTop={0}
right={ left={false}
<DatePicker onChange={handleSelectDate} style={{ width: 300 }} /> right={
} <DatePicker onChange={handleSelectDate} style={{ width: 300 }} />
/> }
<ResourceUtilization /> />
<Row style={{ width: '100%' }}> <ResourceUtilization />
<Col span={6}> <Row style={{ width: '100%' }}>
<GaugeChart <Col span={6}>
title="GPU Compute Utilization" <GaugeChart
total={100} title="GPU Compute Utilization"
target={20} total={100}
// height={320} target={20}
thresholds={[50, 70, 100]} // height={320}
rangColor={['#54cc98', '#ffd666', '#ff7875']} thresholds={[50, 70, 100]}
></GaugeChart> rangColor={['#54cc98', '#ffd666', '#ff7875']}
</Col> ></GaugeChart>
<Col span={6}> </Col>
<GaugeChart <Col span={6}>
title="GPU Memory Utilization" <GaugeChart
total={100} title="GPU Memory Utilization"
target={30} total={100}
// height={320} target={30}
thresholds={[50, 70, 100]} // height={320}
rangColor={['#54cc98', '#ffd666', '#ff7875']} thresholds={[50, 70, 100]}
></GaugeChart> rangColor={['#54cc98', '#ffd666', '#ff7875']}
</Col> ></GaugeChart>
<Col span={6}> </Col>
<GaugeChart <Col span={6}>
title="CPU Compute Utilization" <GaugeChart
total={100} title="CPU Compute Utilization"
target={40} total={100}
// height={320} target={40}
thresholds={[50, 70, 100]} // height={320}
rangColor={['#54cc98', '#ffd666', '#ff7875']} thresholds={[50, 70, 100]}
></GaugeChart> rangColor={['#54cc98', '#ffd666', '#ff7875']}
</Col> ></GaugeChart>
<Col span={6}> </Col>
<GaugeChart <Col span={6}>
title="CPU Memory Utilization" <GaugeChart
total={100} title="CPU Memory Utilization"
target={70} total={100}
// height={320} target={70}
thresholds={[50, 70, 100]} // height={320}
rangColor={['#54cc98', '#ffd666', '#ff7875']} thresholds={[50, 70, 100]}
></GaugeChart> rangColor={['#54cc98', '#ffd666', '#ff7875']}
</Col> ></GaugeChart>
</Row> </Col>
</div> </Row>
</div>
</PageContainer>
); );
}; };
src/pages/dashboard/components/usage.tsx
+2 -2
View File
@@ -133,7 +133,7 @@ const Usage = () => {
data={userDataList} data={userDataList}
xField="time" xField="time"
yField="value" yField="value"
height={360} height={400}
></HBar> ></HBar>
</PageContainer> </PageContainer>
</Col> </Col>
@@ -144,7 +144,7 @@ const Usage = () => {
data={projectDataList} data={projectDataList}
xField="time" xField="time"
yField="value" yField="value"
height={360} height={400}
></HBar> ></HBar>
</PageContainer> </PageContainer>
</Col> </Col>
src/pages/dashboard/index.tsx
+2 -7
View File
@@ -1,5 +1,4 @@
import DividerLine from '@/components/divider-line'; import DividerLine from '@/components/divider-line';
import { PageContainer } from '@ant-design/pro-components';
import ActiveTable from './components/active-table'; import ActiveTable from './components/active-table';
import Overview from './components/over-view'; import Overview from './components/over-view';
import SystemLoad from './components/system-load'; import SystemLoad from './components/system-load';
@@ -8,13 +7,9 @@ import Usage from './components/usage';
const Dashboard: React.FC = () => { const Dashboard: React.FC = () => {
return ( return (
<> <>
<PageContainer ghost title={false}> <Overview></Overview>
<Overview></Overview>
</PageContainer>
<DividerLine></DividerLine> <DividerLine></DividerLine>
<PageContainer ghost title="System Load"> <SystemLoad></SystemLoad>
<SystemLoad></SystemLoad>
</PageContainer>
<DividerLine></DividerLine> <DividerLine></DividerLine>
<Usage></Usage> <Usage></Usage>
<DividerLine></DividerLine> <DividerLine></DividerLine>
src/utils/index.ts
+84
View File
@@ -55,3 +55,87 @@ export const generateRandomArray = (config?: {
return data; return data;
}; };
export const generateFluctuatingData2 = ({
total = 100,
noiseLevel = 10,
max = 50,
min = 5
}) => {
const x = [];
const y = [];
for (let i = 0; i < total; i++) {
// 生成一个基本的线性趋势，使用正弦函数
const phaseShift = Math.random() * 2 * Math.PI;
const trend =
max * Math.sin((3 * Math.PI * i + phaseShift) / total) + max / 2;
// 生成噪声
const noise = (Math.random() * 2 - 1) * noiseLevel;
// 叠加趋势和噪声
const value = trend + noise;
x.push(i);
y.push(Math.max(min, value));
}
return y;
};
export const generateFluctuatingData = ({
total = 50,
trendType = 'linear',
max = 1,
f = 1,
phase = 0,
min = 0
}) => {
/**
* 生成一组用于折线图的数据,具有自然且美观的趋势。
*
* 参数:
* total (number): 生成数据点的数量
* trendType (string): 数据趋势类型, 可选'linear', 'sine', 'exponential'
* max (number): 波动幅度
* f (number): 波动频率
* phase (number): 波动相位
* min (number): 数据的最小值
*
* 返回:
* x (number[]): x轴数据
* y (number[]): y轴数据
*/
const x = Array.from({ length: total }, (_, i) => (i * 10) / (total - 1));
let y;
switch (trendType) {
case 'linear':
y = x.map(
(val) => val * (Math.random() * 2 - 1) * 3 + Math.random() * 8 - 4
);
break;
case 'sine':
y = x.map(
(val) =>
max * Math.sin(2 * Math.PI * f * val + phase) + Math.random() * 2 - 1
);
break;
case 'exponential':
y = x.map(
(val) => Math.exp(val * Math.random() * 0.2) + Math.random() * 4 - 2
);
break;
default:
throw new Error(
'无效的trendType参数,请选择"linear", "sine"或"exponential".'
);
}
// 将数据调整到最小值
const minY = Math.min(...y);
y = y.map((val) => _.round(val - minY + min, 2));
return y;
};