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/components/card-wrapper/index.less
+1
View File
@@ -2,4 +2,5 @@
border-radius: var(--border-radius-middle);
background-color: var(--color-white-1);
box-shadow: var(--box-shadow-base);
padding: 10px;
}
src/components/card-wrapper/index.tsx
+6 -2
View File
@@ -1,8 +1,12 @@
import styles from './index.less';
const CardWrapper = (props: any) => {
const { children } = props;
return <div className={styles.cardWrapper}>{children}</div>;
const { children, style } = props;
return (
<div className={styles.cardWrapper} style={{ ...style }}>
{children}
</div>
);
};
export default CardWrapper;
src/components/charts/line-chart.tsx
+3 -2
View File
@@ -16,7 +16,7 @@ const LineChart: React.FC<LineChartProps> = (props) => {
height,
xField: xField || 'time',
yField: yField || 'value',
color: color || ['red', 'blue', 'green', 'yellow'],
// color: color || ['red', 'blue', 'green', 'yellow'],
colorField: 'type',
autoFit: true,
slider,
@@ -36,7 +36,8 @@ const LineChart: React.FC<LineChartProps> = (props) => {
// sizeField: 2
// },
style: {
lineWidth: 1.5
lineWidth: 1.5,
opacity: 0.8
},
legend: {
color: {
src/components/charts/liquid.tsx
+79
View File
@@ -0,0 +1,79 @@
import { Liquid } from '@ant-design/plots';
import { useEffect, useState } from 'react';
interface LiquidChartProps {
percent: number;
color?: string;
title?: string;
height?: number;
width?: number;
thresholds?: number[];
rangColor?: string[];
}
const LiquidChart: React.FC<LiquidChartProps> = (props) => {
const {
percent,
color,
title,
width,
height,
thresholds = [],
rangColor = []
} = props;
const primaryColor = 'rgba(84, 204, 152,0.8)';
const [fillColor, setFillColor] = useState<string>(primaryColor);
const calcColorByPercent = () => {
if (color) {
return color;
}
if (!rangColor.length) {
return primaryColor;
}
if (rangColor.length && thresholds.length) {
let index = 0;
for (let i = 0; i < thresholds.length; i++) {
if (percent <= thresholds[i]) {
index = i;
break;
}
}
return rangColor[index];
}
return primaryColor;
};
useEffect(() => {
const fc = calcColorByPercent();
setFillColor(fc);
}, [percent]);
const config = {
percent,
textAlign: 'center',
autoFit: true,
title: {
title,
size: 0,
style: {
align: 'center',
titleFontSize: 12,
titleFill: 'rgba(0,0,0,0.88)',
titleFontWeight: 500
}
},
style: {
textAlign: 'center',
outlineBorder: 2,
waveLength: 128,
stroke: fillColor,
fill: fillColor
}
};
return <Liquid {...config} />;
};
export default LiquidChart;
src/components/seal-table/styles/index.less
+14 -2
View File
@@ -2,57 +2,69 @@
display: flex;
flex-direction: column;
width: 100%;
.header-row-wrapper {
height: 40px;
margin-bottom: 10px;
display: flex;
justify-content: flex-start;
align-items: center;
.header-row-prefix-wrapper {
padding-left: var(--ant-table-cell-padding-inline);
}
.row {
flex: 1;
}
}
.row-box {
margin-bottom: 20px;
border-radius: var(--ant-table-header-border-radius);
overflow: hidden;
}
.expanded-row {
background-color: var(--color-white-1);
padding: 16px 16px;
padding: 16px;
border: 1px solid var(--color-fill-1);
border-top: 0;
border-radius: 0 0 var(--ant-table-header-border-radius)
var(--ant-table-header-border-radius);
}
.row-wrapper {
display: flex;
justify-content: flex-start;
align-items: center;
background-color: var(--color-fill-1);
background-color: var(--color-white-1);
transition: all 0.2s ease;
&:hover {
background-color: var(--ant-table-row-hover-bg);
transition: all 0.2s ease;
}
&-selected {
background-color: var(--ant-table-row-selected-bg);
transition: all 0.2s ease;
&:hover {
background-color: var(--ant-table-row-selected-hover-bg);
transition: all 0.2s ease;
}
}
.row-prefix-wrapper {
padding-left: var(--ant-table-cell-padding-inline);
}
}
.seal-table-row {
flex: 1;
}
.spin {
text-align: center;
display: flex;
src/global.less
+5 -5
View File
@@ -4,7 +4,7 @@
html {
--ant-color-fill-tertiary: rgba(0, 0, 0, 4%);
--color-fill-1: var(--ant-color-fill-tertiary);
// --color-fill-1: #f3f6fa;
// --color-fill-1: #fff;
--color-fill-2: #fff;
--color-fill-3: #f3f6fa;
--menu-border-radius-base: 20px;
@@ -28,7 +28,7 @@ html {
--ant-table-header-split-color: #f0f0f0;
--ant-table-row-selected-bg: #f0fff6;
--ant-table-row-selected-hover-bg: #d8f2e4;
--ant-table-row-hover-bg: #e6e6e6;
--ant-table-row-hover-bg: rgba(230, 230, 230, 70%);
--color-chart-red: #ff7875;
--color-chart-green: #54cc98;
--color-chart-glod: #ffd666;
@@ -51,7 +51,7 @@ html {
&.ant-menu-css-var {
--ant-menu-item-height: 46px;
--ant-menu-item-selected-bg: var(--color-white-1);
--ant-menu-item-border-radius: 20px;
--ant-menu-item-border-radius: 16px;
--ant-menu-item-selected-color: var(--ant-color-primary);
--ant-menu-item-hover-bg: var(--color-white-1);
--ant-menu-item-color: var(--color-text-1);
@@ -164,7 +164,7 @@ body {
}
tr > td {
background-color: var(--color-fill-1);
// background-color: var(--color-fill-1);
border-bottom: none;
height: 70px;
@@ -357,7 +357,7 @@ body {
background: linear-gradient(
90deg,
rgba(255, 255, 255, 4%) 25%,
rgba(0, 0, 0, 10%) 37%,
rgba(0, 0, 0, 8%) 37%,
rgba(255, 255, 255, 4%) 63%
);
background-size: 400% 100%;
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>
);
};
src/utils/index.ts
+1
View File
@@ -1,3 +1,4 @@
import _ from 'lodash';
export const isNotEmptyValue = (value: any) => {
if (Array.isArray(value)) {
return value.length > 0;