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

style: ui colors

Browse Source
This commit is contained in:
jialin
2024-06-26 10:39:03 +08:00
parent d44f5a72d1
commit 3476d9ec27
12 changed files with 189 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/dashboard/components/active-table.tsx
+1 -22
View File
@@ -132,7 +132,7 @@ const projectData = [
const ActiveTable = () => {
return (
<Row gutter={[20, 0]}>
<Col xs={24} sm={24} md={24} lg={12} xl={12}>
<Col xs={24} sm={24} md={24} lg={24} xl={24}>
<PageTools
style={{ margin: '32px 8px' }}
left={
@@ -153,27 +153,6 @@ const ActiveTable = () => {
/>
</div>
</Col>
<Col xs={24} sm={24} md={24} lg={12} xl={12}>
<PageTools
style={{ margin: '32px 8px' }}
left={
<span
style={{ fontSize: 'var(--font-size-large)', padding: '9px 0' }}
>
Active Projects
</span>
}
right={false}
/>
<div>
<Table
columns={projectColumns}
dataSource={projectData}
pagination={false}
rowKey="id"
/>
</div>
</Col>
</Row>
);
};
src/pages/dashboard/components/resource-utilization.tsx
+1 -2
View File
@@ -52,7 +52,6 @@ const UtilizationOvertime: React.FC = () => {
data.push({
time: timeList[i],
type: typeList[j],
color: 'red',
value: _.get(mockData, typeList[j])[i]
});
}
@@ -63,7 +62,7 @@ const UtilizationOvertime: React.FC = () => {
return (
<>
<LineChart height={400} data={data} />
<LineChart data={data} />
</>
);
};
src/pages/dashboard/components/system-load.tsx
+49 -55
View File
@@ -1,18 +1,20 @@
import CardWrapper from '@/components/card-wrapper';
import GaugeChart from '@/components/charts/gauge';
import LiquidChart from '@/components/charts/liquid';
import PageTools from '@/components/page-tools';
import { Col, DatePicker, Row } from 'antd';
import ResourceUtilization from './resource-utilization';
const SystemLoad = () => {
const colors = [
'rgba(84, 204, 152,.8)',
'rgba(255, 214, 102,.8)',
'rgba(255, 120, 117,.8)'
'linear-gradient(90deg, rgba(84, 204, 152,.8) 0%, rgba(84, 204, 152,0.5) 50%, rgba(84, 204, 152,.8) 100%)',
'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 handleSelectDate = (date: string) => {
console.log('dateString============', date);
};
const thresholds = [0.5, 0.7, 1];
const height = 400;
const handleSelectDate = (date: string) => {};
return (
<div>
@@ -28,56 +30,48 @@ const SystemLoad = () => {
<DatePicker onChange={handleSelectDate} style={{ width: 300 }} />
}
/>
<CardWrapper>
<ResourceUtilization />
</CardWrapper>
<Row style={{ width: '100%', marginTop: '40px' }} gutter={[20, 20]}>
<Col xs={24} sm={24} md={12} lg={12} xl={12}>
<CardWrapper>
<GaugeChart
title="GPU Compute Utilization"
total={100}
target={20}
// height={320}
thresholds={[50, 70, 100]}
rangColor={colors}
></GaugeChart>
<Row style={{ width: '100%' }} gutter={[0, 20]}>
<Col span={16} style={{ paddingRight: '20px' }}>
<CardWrapper style={{ height: height }}>
<ResourceUtilization />
</CardWrapper>
</Col>
<Col xs={24} sm={24} md={12} lg={12} xl={12}>
<CardWrapper>
<GaugeChart
title="GPU Memory Utilization"
total={100}
target={30}
// height={320}
thresholds={[50, 70, 100]}
rangColor={colors}
></GaugeChart>
</CardWrapper>
</Col>
<Col xs={24} sm={24} md={12} lg={12} xl={12}>
<CardWrapper>
<GaugeChart
title="CPU Compute Utilization"
total={100}
target={40}
// height={320}
thresholds={[50, 70, 100]}
rangColor={colors}
></GaugeChart>
</CardWrapper>
</Col>
<Col xs={24} sm={24} md={12} lg={12} xl={12}>
<CardWrapper>
<GaugeChart
title="CPU Memory Utilization"
total={100}
target={70}
// height={320}
thresholds={[50, 70, 100]}
rangColor={colors}
></GaugeChart>
<Col span={8}>
<CardWrapper style={{ height: '400px' }}>
<Row style={{ height: height }}>
<Col span={12} style={{ height: height / 2 - 10 }}>
<LiquidChart
title="GPU Compute Utilization"
percent={0.2}
thresholds={thresholds}
rangColor={colors}
></LiquidChart>
</Col>
<Col span={12} style={{ height: height / 2 - 10 }}>
<LiquidChart
title="GPU Memory Utilization"
percent={0.3}
thresholds={thresholds}
rangColor={colors}
></LiquidChart>
</Col>
<Col span={12} style={{ height: height / 2 - 10 }}>
<LiquidChart
title="CPU Compute Utilization"
percent={0.8}
thresholds={thresholds}
rangColor={colors}
></LiquidChart>
</Col>
<Col span={12} style={{ height: height / 2 - 10 }}>
<LiquidChart
title="CPU Memory Utilization"
percent={0.7}
thresholds={thresholds}
rangColor={colors}
></LiquidChart>
</Col>
</Row>
</CardWrapper>
</Col>
</Row>
src/pages/dashboard/components/usage.tsx
+11 -37
View File
@@ -4,7 +4,7 @@ import HBar from '@/components/charts/h-bar';
import PageTools from '@/components/page-tools';
import { generateRandomArray } from '@/utils';
import { Col, DatePicker, Row } from 'antd';
const { RangePicker } = DatePicker;
const times = [
'june 1',
'june 2',
@@ -97,11 +97,11 @@ const Usage = () => {
style={{ margin: '32px 8px' }}
left={<span style={{ fontSize: 'var(--font-size-large)' }}>Usage</span>}
right={
<DatePicker onChange={handleSelectDate} style={{ width: 300 }} />
<RangePicker onChange={handleSelectDate} style={{ width: 300 }} />
}
/>
<Row style={{ width: '100%' }} gutter={[0, 20]}>
<Col span={14} style={{ paddingRight: '20px' }}>
<Col span={16} style={{ paddingRight: '20px' }}>
<CardWrapper>
<Row>
<Col span={12}>
@@ -125,44 +125,18 @@ const Usage = () => {
</Row>
</CardWrapper>
</Col>
<Col span={10}>
<Col span={8}>
<CardWrapper>
<Row>
<Col span={12}>
<HBar
title="Top Users"
data={userDataList}
xField="time"
yField="value"
height={360}
></HBar>
</Col>
<Col span={12}>
<HBar
title="Top Projects"
data={projectDataList}
xField="time"
yField="value"
height={360}
></HBar>
</Col>
</Row>
<HBar
title="Top Users"
data={userDataList}
xField="time"
yField="value"
height={360}
></HBar>
</CardWrapper>
</Col>
</Row>
{/* <Row style={{ width: '100%', marginTop: '20px' }} gutter={[0, 20]}>
<Col span={12} style={{ paddingRight: '20px' }}>
<CardWrapper></CardWrapper>
</Col>
<Col span={12}>
<CardWrapper
style={{
background: bgColor,
borderRadius: 'var(--border-radius-base)'
}}
></CardWrapper>
</Col>
</Row> */}
</>
);
};
src/pages/playground/index.tsx
+18 -16
View File
@@ -27,24 +27,26 @@ const Playground: React.FC = () => {
};
return (
<CardWrapper>
<div className="play-ground">
<div className="chat">
<GroundLeft parameters={params}></GroundLeft>
</div>
<div className="divider-line">
<Divider type="vertical" />
</div>
<div style={{ padding: '32px 40px' }}>
<CardWrapper>
<div className="play-ground">
<div className="chat">
<GroundLeft parameters={params}></GroundLeft>
</div>
<div className="divider-line">
<Divider type="vertical" />
</div>
<div className="params">
<ParamsSettings
onClose={handleClosePopover}
setParams={setParams}
selectedModel={selectModel}
/>
<div className="params">
<ParamsSettings
onClose={handleClosePopover}
setParams={setParams}
selectedModel={selectModel}
/>
</div>
</div>
</div>
</CardWrapper>
</CardWrapper>
</div>
);
};