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

style: page styles

Browse Source
This commit is contained in:
jialin
2024-06-26 14:18:56 +08:00
parent 3476d9ec27
commit 0fa4e21fa5
10 changed files with 199 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/dashboard/apis/index.ts
View File
src/pages/dashboard/components/over-view.tsx
+8 -1
View File
@@ -65,7 +65,14 @@ const Overview: React.FC = (props) => {
<div>
<Row gutter={[24, 20]} className={styles.row}>
{overviewConfigs.map((config, index) => (
<Col span={5} key={config.key}>
<Col
xs={{ flex: '100%' }}
sm={{ flex: '50%' }}
md={{ flex: '30%' }}
lg={{ flex: '20%' }}
xl={{ flex: '20%' }}
key={config.key}
>
{renderCardItem({
label: config.label,
value: renderValue(data[config.key] || 0),
src/pages/dashboard/components/system-load.tsx
+31 -9
View File
@@ -1,7 +1,10 @@
import CardWrapper from '@/components/card-wrapper';
import LiquidChart from '@/components/charts/liquid';
import PageTools from '@/components/page-tools';
import breakpoints from '@/config/breakpoints';
import useWindowResize from '@/hooks/use-window-resize';
import { Col, DatePicker, Row } from 'antd';
import { useEffect, useState } from 'react';
import ResourceUtilization from './resource-utilization';
const SystemLoad = () => {
@@ -11,11 +14,23 @@ const SystemLoad = () => {
'linear-gradient(90deg, rgba(255, 120, 117,.8) 0%, rgba(255, 120, 117,0.5) 50%, rgba(255, 120, 117,.8) 100%)'
];
const { size } = useWindowResize();
const [paddingRight, setPaddingRight] = useState<string>('20px');
const [smallChartHeight, setSmallChartHeight] = useState<number>(190);
const [largeChartHeight, setLargeChartHeight] = useState<number>(400);
const thresholds = [0.5, 0.7, 1];
const height = 400;
const handleSelectDate = (date: string) => {};
useEffect(() => {
if (size.width < breakpoints.xl) {
setPaddingRight('0');
} else {
setPaddingRight('20px');
}
}, [size.width]);
return (
<div>
<div className="system-load">
@@ -31,15 +46,22 @@ const SystemLoad = () => {
}
/>
<Row style={{ width: '100%' }} gutter={[0, 20]}>
<Col span={16} style={{ paddingRight: '20px' }}>
<CardWrapper style={{ height: height }}>
<Col
xs={24}
sm={24}
md={24}
lg={24}
xl={16}
style={{ paddingRight: paddingRight }}
>
<CardWrapper style={{ height: height, width: '100%' }}>
<ResourceUtilization />
</CardWrapper>
</Col>
<Col span={8}>
<CardWrapper style={{ height: '400px' }}>
<Row style={{ height: height }}>
<Col span={12} style={{ height: height / 2 - 10 }}>
<Col xs={24} sm={24} md={24} lg={24} xl={8}>
<CardWrapper style={{ height: largeChartHeight, width: '100%' }}>
<Row style={{ height: largeChartHeight, width: '100%' }}>
<Col span={12} style={{ height: smallChartHeight }}>
<LiquidChart
title="GPU Compute Utilization"
percent={0.2}
@@ -47,7 +69,7 @@ const SystemLoad = () => {
rangColor={colors}
></LiquidChart>
</Col>
<Col span={12} style={{ height: height / 2 - 10 }}>
<Col span={12} style={{ height: smallChartHeight }}>
<LiquidChart
title="GPU Memory Utilization"
percent={0.3}
@@ -55,7 +77,7 @@ const SystemLoad = () => {
rangColor={colors}
></LiquidChart>
</Col>
<Col span={12} style={{ height: height / 2 - 10 }}>
<Col span={12} style={{ height: smallChartHeight }}>
<LiquidChart
title="CPU Compute Utilization"
percent={0.8}
@@ -63,7 +85,7 @@ const SystemLoad = () => {
rangColor={colors}
></LiquidChart>
</Col>
<Col span={12} style={{ height: height / 2 - 10 }}>
<Col span={12} style={{ height: smallChartHeight }}>
<LiquidChart
title="CPU Memory Utilization"
percent={0.7}
src/pages/dashboard/components/usage.tsx
+27 -8
View File
@@ -2,8 +2,12 @@ import CardWrapper from '@/components/card-wrapper';
import ColumnBar from '@/components/charts/column-bar';
import HBar from '@/components/charts/h-bar';
import PageTools from '@/components/page-tools';
import breakpoints from '@/config/breakpoints';
import useWindowResize from '@/hooks/use-window-resize';
import { generateRandomArray } from '@/utils';
import { Col, DatePicker, Row } from 'antd';
import { useEffect, useState } from 'react';
const { RangePicker } = DatePicker;
const times = [
'june 1',
@@ -86,10 +90,18 @@ const tokenUsage = TokensData.map((val, i) => {
});
const Usage = () => {
const bgColor = '#fff';
const handleSelectDate = (dateString: string) => {
console.log('dateString============', dateString);
};
const { size } = useWindowResize();
const [paddingRight, setPaddingRight] = useState<string>('20px');
const handleSelectDate = (dateString: string) => {};
useEffect(() => {
if (size.width < breakpoints.xl) {
setPaddingRight('0');
} else {
setPaddingRight('20px');
}
}, [size.width]);
return (
<>
@@ -101,9 +113,16 @@ const Usage = () => {
}
/>
<Row style={{ width: '100%' }} gutter={[0, 20]}>
<Col span={16} style={{ paddingRight: '20px' }}>
<CardWrapper>
<Row>
<Col
xs={24}
sm={24}
md={24}
lg={24}
xl={16}
style={{ paddingRight: paddingRight }}
>
<CardWrapper style={{ width: '100%' }}>
<Row style={{ width: '100%' }}>
<Col span={12}>
<ColumnBar
title="API Request"
@@ -125,7 +144,7 @@ const Usage = () => {
</Row>
</CardWrapper>
</Col>
<Col span={8}>
<Col xs={24} sm={24} md={24} lg={24} xl={8}>
<CardWrapper>
<HBar
title="Top Users"