style: page styles
This commit is contained in:
jialin
Binary file not shown.
|
After Width: | Height: | Size: 101 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 867 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 896 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 144 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 140 KiB |
@@ -0,0 +1,5 @@
|
||||
.cardWrapper {
|
||||
border-radius: 20px;
|
||||
background-color: var(--color-white-1);
|
||||
box-shadow: var(--box-shadow-base);
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
import styles from './index.less';
|
||||
|
||||
const CardWrapper = (props: any) => {
|
||||
const { children } = props;
|
||||
return <div className={styles.cardWrapper}>{children}</div>;
|
||||
};
|
||||
|
||||
export default CardWrapper;
|
||||
@@ -17,6 +17,12 @@ const BarChart: React.FC<BarChartProps> = (props) => {
|
||||
direction: 'vertical',
|
||||
height,
|
||||
group: true,
|
||||
scale: {
|
||||
x: {
|
||||
type: 'band',
|
||||
padding: 0.5
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
color: {
|
||||
position: 'top',
|
||||
@@ -27,7 +33,11 @@ const BarChart: React.FC<BarChartProps> = (props) => {
|
||||
},
|
||||
axis: {
|
||||
x: {
|
||||
xAxis: true
|
||||
xAxis: true,
|
||||
tick: false
|
||||
},
|
||||
y: {
|
||||
tick: false
|
||||
}
|
||||
},
|
||||
title: {
|
||||
@@ -48,9 +58,10 @@ const BarChart: React.FC<BarChartProps> = (props) => {
|
||||
},
|
||||
|
||||
style: {
|
||||
fill: '#54cc98',
|
||||
radiusTopLeft: 8,
|
||||
radiusTopRight: 8,
|
||||
fill: 'linear-gradient(90deg,rgba(84, 204, 152,0.8) 0%,rgb(0, 168, 143,.7) 100%)',
|
||||
radiusTopLeft: 12,
|
||||
radiusTopRight: 12,
|
||||
align: 'center',
|
||||
width: 30
|
||||
}
|
||||
};
|
||||
|
||||
@@ -16,6 +16,19 @@ const GaugeChart: React.FC<GaugeChartProps> = (props) => {
|
||||
const config = {
|
||||
width,
|
||||
height,
|
||||
box: {
|
||||
padding: [0, 0, 0, 0],
|
||||
style: {
|
||||
padding: [0, 0, 0, 0]
|
||||
}
|
||||
},
|
||||
guide: {
|
||||
arc: {
|
||||
style: {
|
||||
lineWidth: 30
|
||||
}
|
||||
}
|
||||
},
|
||||
autoFit: true,
|
||||
data: {
|
||||
target,
|
||||
|
||||
@@ -8,7 +8,7 @@ interface BarChartProps {
|
||||
height?: number;
|
||||
}
|
||||
const BarChart: React.FC<BarChartProps> = (props) => {
|
||||
const { data, xField, yField, title, height = 300 } = props;
|
||||
const { data, xField, yField, title, height } = props;
|
||||
const config = {
|
||||
data,
|
||||
xField,
|
||||
@@ -25,9 +25,19 @@ const BarChart: React.FC<BarChartProps> = (props) => {
|
||||
}
|
||||
}
|
||||
},
|
||||
scale: {
|
||||
x: {
|
||||
type: 'band',
|
||||
padding: 0.5
|
||||
}
|
||||
},
|
||||
axis: {
|
||||
x: {
|
||||
xAxis: true
|
||||
xAxis: true,
|
||||
tick: false
|
||||
},
|
||||
y: {
|
||||
tick: false
|
||||
}
|
||||
},
|
||||
title: {
|
||||
@@ -39,18 +49,16 @@ const BarChart: React.FC<BarChartProps> = (props) => {
|
||||
split: {
|
||||
type: 'line',
|
||||
line: {
|
||||
color: 'red',
|
||||
style: {
|
||||
color: 'red',
|
||||
lineDash: [4, 5]
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
markBackground: {},
|
||||
style: {
|
||||
fill: '#54cc98',
|
||||
radiusTopLeft: 8,
|
||||
radiusTopRight: 8,
|
||||
fill: 'linear-gradient(180deg,rgba(84, 204, 152,0.8) 0%,rgb(0, 168, 143,.7) 100%)',
|
||||
radiusTopLeft: 12,
|
||||
radiusTopRight: 12,
|
||||
height: 30
|
||||
}
|
||||
};
|
||||
|
||||
@@ -16,7 +16,7 @@ const LineChart: React.FC<LineChartProps> = (props) => {
|
||||
height,
|
||||
xField: xField || 'time',
|
||||
yField: yField || 'value',
|
||||
color: color || ['red', 'blue', 'green'],
|
||||
color: color || ['red', 'blue', 'green', 'yellow'],
|
||||
colorField: 'type',
|
||||
autoFit: true,
|
||||
slider,
|
||||
@@ -26,12 +26,15 @@ const LineChart: React.FC<LineChartProps> = (props) => {
|
||||
textStyle: {
|
||||
autoRoate: true
|
||||
}
|
||||
},
|
||||
y: {
|
||||
tick: false
|
||||
}
|
||||
},
|
||||
point: {
|
||||
shapeField: 'circle',
|
||||
sizeField: 2
|
||||
},
|
||||
// point: {
|
||||
// shapeField: 'circle',
|
||||
// sizeField: 2
|
||||
// },
|
||||
style: {
|
||||
lineWidth: 1.5
|
||||
},
|
||||
|
||||
@@ -0,0 +1,39 @@
|
||||
.g-polygon {
|
||||
position: absolute;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.g-polygon-1 {
|
||||
// 定位代码，容器高宽随意
|
||||
background: #fe5;
|
||||
clip-path: polygon(0 10%, 30% 0, 100% 40%, 70% 100%, 20% 90%);
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.g-polygon-2 {
|
||||
// 定位代码，容器高宽随意
|
||||
background: #e950d1;
|
||||
clip-path: polygon(10% 0, 100% 70%, 100% 100%, 20% 90%);
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.g-polygon-3 {
|
||||
// 定位代码，容器高宽随意
|
||||
background: rgba(87, 80, 233);
|
||||
clip-path: polygon(80% 0, 100% 70%, 100% 100%, 20% 90%);
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.g-bg::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
backdrop-filter: blur(150px);
|
||||
z-index: 1;
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import './index.less';
|
||||
|
||||
const GlassBg = () => {
|
||||
return (
|
||||
<div className="g-bg">
|
||||
<div className="g-polygon g-polygon-1"></div>
|
||||
<div className="g-polygon g-polygon-2"></div>
|
||||
<div className="g-polygon g-polygon-3"></div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default GlassBg;
|
||||
+71
-22
@@ -7,10 +7,11 @@ html {
|
||||
// --color-fill-1: #f3f6fa;
|
||||
--color-fill-2: #fff;
|
||||
--color-fill-3: #f3f6fa;
|
||||
--menu-border-radius-base: 32px;
|
||||
--menu-border-radius-base: 20px;
|
||||
--border-radius-base: 16px;
|
||||
--border-radius-middle: 20px;
|
||||
--border-radius-small: 8px;
|
||||
--color-white-1: #fff;
|
||||
--color-white-1: rgba(255, 255, 255, 75%);
|
||||
--font-weight-normal: 500;
|
||||
--font-weight-bold: 700;
|
||||
--color-text-1: var(--ant-color-text);
|
||||
@@ -19,7 +20,7 @@ html {
|
||||
--font-size-large: 16px;
|
||||
--font-size-middle: 14px;
|
||||
--ant-color-fill-secondary: rgba(0, 0, 0, 6%);
|
||||
--table-td-radius: 24px;
|
||||
--table-td-radius: 20px;
|
||||
--checkbox-border-radius: 4px;
|
||||
--ant-table-cell-padding-inline: 16px;
|
||||
--ant-table-cell-padding-block: 16px;
|
||||
@@ -36,6 +37,7 @@ html {
|
||||
--ant-input-active-shadow: 0 0 0 2px rgba(5, 255, 105, 6%);
|
||||
--ant-input-active-border-color: #2fbf85;
|
||||
--ant-input-hover-border-color: #54cc98;
|
||||
--box-shadow-base: 0 4px 12px rgb(227, 232, 240);
|
||||
|
||||
.css-var-rf {
|
||||
--ant-font-size: var(--font-size-base);
|
||||
@@ -67,6 +69,7 @@ html {
|
||||
--ant-border-radius-lg: 16px;
|
||||
--ant-color-error: #ff4d4f;
|
||||
--ant-color-bg-mask: rgba(0, 0, 0, 35%);
|
||||
--ant-color-border: rgb(217 217 217 / 50%);
|
||||
|
||||
&.ant-popover {
|
||||
--ant-popover-inner-padding: 26px;
|
||||
@@ -222,12 +225,43 @@ body {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
// ============== new theme style start ===============
|
||||
.ant-pro-layout {
|
||||
background-color: var(--color-fill-1);
|
||||
height: 100%;
|
||||
|
||||
.ant-pro-sider .ant-layout-sider-children {
|
||||
background-color: var(--color-white-1);
|
||||
box-shadow: var(--box-shadow-base);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-table-wrapper .ant-table {
|
||||
background-color: unset;
|
||||
}
|
||||
|
||||
.ant-table-content table {
|
||||
.ant-table-thead > tr > th {
|
||||
background-color: unset;
|
||||
}
|
||||
|
||||
.ant-table-tbody {
|
||||
.ant-table-row {
|
||||
border-radius: var(--table-td-radius);
|
||||
background-color: var(--color-white-1);
|
||||
box-shadow: var(--box-shadow-base);
|
||||
|
||||
> td {
|
||||
background-color: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ============== new theme style end =================
|
||||
}
|
||||
|
||||
// ======== basic layout style start============
|
||||
|
||||
// ======== basic layout style end ============
|
||||
|
||||
// ======== menu style start ============
|
||||
.ant-pro-sider-collapsed-button {
|
||||
display: none;
|
||||
@@ -250,7 +284,7 @@ body {
|
||||
}
|
||||
|
||||
.ant-pro-layout-container {
|
||||
background-color: var(--color-fill-2);
|
||||
// background-color: var(--color-fill-2);
|
||||
}
|
||||
|
||||
.ant-pro-sider {
|
||||
@@ -275,20 +309,35 @@ body {
|
||||
.monaco-editor {
|
||||
border-radius: 16px;
|
||||
}
|
||||
// .background {
|
||||
// position: fixed;
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
// bottom: 0;
|
||||
// right: 0;
|
||||
// background: radial-gradient(
|
||||
// circle,
|
||||
// rgba(47, 191, 133, 0.02),
|
||||
// rgba(55, 125, 184, 0.2)
|
||||
// );
|
||||
// filter: blur(100px);
|
||||
// height: 100%;
|
||||
// }
|
||||
|
||||
.background {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
// background: radial-gradient(
|
||||
// circle,
|
||||
// rgba(47, 191, 133, 0.02),
|
||||
// rgba(55, 125, 184, 0.2)
|
||||
// );
|
||||
background: url('./assets/images/bg.png') center center no-repeat;
|
||||
background-size: cover;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
backdrop-filter: blur(100px);
|
||||
filter: blur(100px);
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-pro-page-container {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import ContentWrapper from '@/components/content-wrapper';
|
||||
// import div from '@/components/content-wrapper';
|
||||
import PageTools from '@/components/page-tools';
|
||||
import { Col, Row, Table } from 'antd';
|
||||
|
||||
@@ -131,7 +131,7 @@ const projectData = [
|
||||
];
|
||||
const ActiveTable = () => {
|
||||
return (
|
||||
<Row>
|
||||
<Row gutter={[20, 0]}>
|
||||
<Col span={12}>
|
||||
<PageTools
|
||||
style={{ margin: '32px 40px' }}
|
||||
@@ -144,14 +144,14 @@ const ActiveTable = () => {
|
||||
}
|
||||
right={false}
|
||||
/>
|
||||
<ContentWrapper contentStyle={{ paddingRight: 0 }} title={false}>
|
||||
<div>
|
||||
<Table
|
||||
columns={modelColumns}
|
||||
dataSource={modelData}
|
||||
pagination={false}
|
||||
rowKey="id"
|
||||
/>
|
||||
</ContentWrapper>
|
||||
</div>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<PageTools
|
||||
@@ -165,14 +165,14 @@ const ActiveTable = () => {
|
||||
}
|
||||
right={false}
|
||||
/>
|
||||
<ContentWrapper title={false}>
|
||||
<div>
|
||||
<Table
|
||||
columns={projectColumns}
|
||||
dataSource={projectData}
|
||||
pagination={false}
|
||||
rowKey="id"
|
||||
/>
|
||||
</ContentWrapper>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
|
||||
@@ -3,6 +3,8 @@
|
||||
height: 110px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
box-shadow: var(--box-shadow-base);
|
||||
border-radius: var(--ant-border-radius-lg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import ContentWrapper from '@/components/content-wrapper';
|
||||
import { Card, Col, Row, Space } from 'antd';
|
||||
import React from 'react';
|
||||
import { overviewConfigs } from '../config';
|
||||
@@ -63,7 +62,7 @@ const Overview: React.FC = (props) => {
|
||||
);
|
||||
};
|
||||
return (
|
||||
<ContentWrapper contentStyle={{ paddingBlockStart: '32px' }} title={false}>
|
||||
<div>
|
||||
<Row gutter={[24, 20]} className={styles.row}>
|
||||
{overviewConfigs.map((config, index) => (
|
||||
<Col span={5} key={config.key}>
|
||||
@@ -75,7 +74,7 @@ const Overview: React.FC = (props) => {
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
</ContentWrapper>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -52,6 +52,7 @@ const UtilizationOvertime: React.FC = () => {
|
||||
data.push({
|
||||
time: timeList[i],
|
||||
type: typeList[j],
|
||||
color: 'red',
|
||||
value: _.get(mockData, typeList[j])[i]
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1,20 +1,24 @@
|
||||
import CardWrapper from '@/components/card-wrapper';
|
||||
import GaugeChart from '@/components/charts/gauge';
|
||||
import PageTools from '@/components/page-tools';
|
||||
import { PageContainer } from '@ant-design/pro-components';
|
||||
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)'
|
||||
];
|
||||
const handleSelectDate = (date: string) => {
|
||||
console.log('dateString============', date);
|
||||
};
|
||||
|
||||
return (
|
||||
<PageContainer ghost title={false}>
|
||||
<div>
|
||||
<div className="system-load">
|
||||
<PageTools
|
||||
marginBottom={10}
|
||||
marginTop={0}
|
||||
style={{ margin: '32px 40px' }}
|
||||
left={
|
||||
<span style={{ fontSize: 'var(--font-size-large)' }}>
|
||||
System Load
|
||||
@@ -24,51 +28,61 @@ const SystemLoad = () => {
|
||||
<DatePicker onChange={handleSelectDate} style={{ width: 300 }} />
|
||||
}
|
||||
/>
|
||||
<ResourceUtilization />
|
||||
<Row style={{ width: '100%', marginTop: '32px' }}>
|
||||
<Col xs={24} sm={24} md={12} lg={6} xl={6}>
|
||||
<GaugeChart
|
||||
title="GPU Compute Utilization"
|
||||
total={100}
|
||||
target={20}
|
||||
// height={320}
|
||||
thresholds={[50, 70, 100]}
|
||||
rangColor={['#54cc98', '#ffd666', '#ff7875']}
|
||||
></GaugeChart>
|
||||
<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>
|
||||
</CardWrapper>
|
||||
</Col>
|
||||
<Col xs={24} sm={24} md={12} lg={6} xl={6}>
|
||||
<GaugeChart
|
||||
title="GPU Memory Utilization"
|
||||
total={100}
|
||||
target={30}
|
||||
// height={320}
|
||||
thresholds={[50, 70, 100]}
|
||||
rangColor={['#54cc98', '#ffd666', '#ff7875']}
|
||||
></GaugeChart>
|
||||
<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={6} xl={6}>
|
||||
<GaugeChart
|
||||
title="CPU Compute Utilization"
|
||||
total={100}
|
||||
target={40}
|
||||
// height={320}
|
||||
thresholds={[50, 70, 100]}
|
||||
rangColor={['#54cc98', '#ffd666', '#ff7875']}
|
||||
></GaugeChart>
|
||||
<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={6} xl={6}>
|
||||
<GaugeChart
|
||||
title="CPU Memory Utilization"
|
||||
total={100}
|
||||
target={70}
|
||||
// height={320}
|
||||
thresholds={[50, 70, 100]}
|
||||
rangColor={['#54cc98', '#ffd666', '#ff7875']}
|
||||
></GaugeChart>
|
||||
<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>
|
||||
</CardWrapper>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</PageContainer>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import CardWrapper from '@/components/card-wrapper';
|
||||
import ColumnBar from '@/components/charts/column-bar';
|
||||
import HBar from '@/components/charts/h-bar';
|
||||
import ContentWrapper from '@/components/content-wrapper';
|
||||
import PageTools from '@/components/page-tools';
|
||||
import { generateRandomArray } from '@/utils';
|
||||
import { Col, DatePicker, Row } from 'antd';
|
||||
@@ -86,9 +86,11 @@ const tokenUsage = TokensData.map((val, i) => {
|
||||
});
|
||||
|
||||
const Usage = () => {
|
||||
const bgColor = '#fff';
|
||||
const handleSelectDate = (dateString: string) => {
|
||||
console.log('dateString============', dateString);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageTools
|
||||
@@ -98,9 +100,9 @@ const Usage = () => {
|
||||
<DatePicker onChange={handleSelectDate} style={{ width: 300 }} />
|
||||
}
|
||||
/>
|
||||
<Row style={{ width: '100%' }} gutter={[20, 0]}>
|
||||
<Col span={12}>
|
||||
<ContentWrapper title={false} contentStyle={{ paddingRight: 0 }}>
|
||||
<Row style={{ width: '100%' }} gutter={[0, 20]}>
|
||||
<Col span={12} style={{ paddingRight: '20px' }}>
|
||||
<CardWrapper>
|
||||
<ColumnBar
|
||||
title="API Request"
|
||||
data={dataList}
|
||||
@@ -108,10 +110,10 @@ const Usage = () => {
|
||||
yField="value"
|
||||
height={360}
|
||||
></ColumnBar>
|
||||
</ContentWrapper>
|
||||
</CardWrapper>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<ContentWrapper title={false} contentStyle={{ paddingLeft: 0 }}>
|
||||
<CardWrapper>
|
||||
<ColumnBar
|
||||
title="Tokens"
|
||||
data={tokenUsage}
|
||||
@@ -119,31 +121,34 @@ const Usage = () => {
|
||||
yField="value"
|
||||
height={360}
|
||||
></ColumnBar>
|
||||
</ContentWrapper>
|
||||
</CardWrapper>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row style={{ width: '100%' }} gutter={[20, 0]}>
|
||||
<Col span={12}>
|
||||
<ContentWrapper title={false} contentStyle={{ paddingRight: 0 }}>
|
||||
<Row style={{ width: '100%', marginTop: '20px' }} gutter={[0, 20]}>
|
||||
<Col span={12} style={{ paddingRight: '20px' }}>
|
||||
<CardWrapper>
|
||||
<HBar
|
||||
title="Top Users"
|
||||
data={userDataList}
|
||||
xField="time"
|
||||
yField="value"
|
||||
height={400}
|
||||
></HBar>
|
||||
</ContentWrapper>
|
||||
</CardWrapper>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<ContentWrapper title={false} contentStyle={{ paddingLeft: 0 }}>
|
||||
<CardWrapper
|
||||
style={{
|
||||
background: bgColor,
|
||||
borderRadius: 'var(--border-radius-base)'
|
||||
}}
|
||||
>
|
||||
<HBar
|
||||
title="Top Projects"
|
||||
data={projectDataList}
|
||||
xField="time"
|
||||
yField="value"
|
||||
height={400}
|
||||
></HBar>
|
||||
</ContentWrapper>
|
||||
</CardWrapper>
|
||||
</Col>
|
||||
</Row>
|
||||
</>
|
||||
|
||||
@@ -2,31 +2,31 @@ export const overviewConfigs = [
|
||||
{
|
||||
key: 'workers',
|
||||
label: 'Workers',
|
||||
backgroundColor:
|
||||
'linear-gradient(180deg, rgb(0 139 188 / 20%) 0%, rgba(40,207,181,.2) 100%)'
|
||||
// backgroundColor: 'linear-gradient(135deg, #ffffff, rgb(232 249 240 / 60%))'
|
||||
backgroundColor: 'var(--color-white-1)'
|
||||
},
|
||||
{
|
||||
key: 'gpus',
|
||||
label: 'Total GPUs',
|
||||
backgroundColor:
|
||||
'linear-gradient(180deg, rgb(0 139 188 / 20%) 0%, rgba(40,207,181,.2) 100%)'
|
||||
backgroundColor: 'var(--color-white-1)'
|
||||
// backgroundColor: 'linear-gradient(135deg, #ffffff, rgb(232 249 240 / 60%))'
|
||||
},
|
||||
{
|
||||
key: 'allocatedGpus',
|
||||
label: 'Allocated GPUs',
|
||||
backgroundColor:
|
||||
'linear-gradient(180deg, rgb(0 139 188 / 20%) 0%, rgba(40,207,181,.2) 100%)'
|
||||
backgroundColor: 'var(--color-white-1)'
|
||||
// backgroundColor: 'linear-gradient(135deg, #ffffff, rgb(232 249 240 / 60%))'
|
||||
},
|
||||
{
|
||||
key: 'models',
|
||||
label: 'Models',
|
||||
backgroundColor:
|
||||
'linear-gradient(180deg, rgb(0 139 188 / 20%) 0%, rgba(40,207,181,.2) 100%)'
|
||||
backgroundColor: 'var(--color-white-1)'
|
||||
// backgroundColor: 'linear-gradient(135deg, #ffffff, rgb(232 249 240 / 60%))'
|
||||
},
|
||||
{
|
||||
key: 'instances',
|
||||
label: 'Instances',
|
||||
backgroundColor:
|
||||
'linear-gradient(180deg, rgb(0 139 188 / 20%) 0%, rgba(40,207,181,.2) 100%)'
|
||||
backgroundColor: 'var(--color-white-1)'
|
||||
// backgroundColor: 'linear-gradient(135deg, #ffffff, rgb(232 249 240 / 60%))'
|
||||
}
|
||||
];
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import DividerLine from '@/components/divider-line';
|
||||
import ActiveTable from './components/active-table';
|
||||
import Overview from './components/over-view';
|
||||
import SystemLoad from './components/system-load';
|
||||
@@ -8,11 +7,11 @@ const Dashboard: React.FC = () => {
|
||||
return (
|
||||
<>
|
||||
<Overview></Overview>
|
||||
<DividerLine></DividerLine>
|
||||
{/* <DividerLine></DividerLine> */}
|
||||
<SystemLoad></SystemLoad>
|
||||
<DividerLine></DividerLine>
|
||||
{/* <DividerLine></DividerLine> */}
|
||||
<Usage></Usage>
|
||||
<DividerLine></DividerLine>
|
||||
{/* <DividerLine></DividerLine> */}
|
||||
<ActiveTable></ActiveTable>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { useSearchParams } from '@umijs/max';
|
||||
import { Divider } from 'antd';
|
||||
import { useState } from 'react';
|
||||
import GroundLeft from './components/ground-left';
|
||||
import ParamsSettings from './components/params-settings';
|
||||
@@ -30,9 +29,7 @@ const Playground: React.FC = () => {
|
||||
<div className="chat">
|
||||
<GroundLeft parameters={params}></GroundLeft>
|
||||
</div>
|
||||
<div className="divider-line">
|
||||
<Divider type="vertical" />
|
||||
</div>
|
||||
<div className="divider-line">{/* <Divider type="vertical" /> */}</div>
|
||||
<div className="params">
|
||||
<ParamsSettings
|
||||
onClose={handleClosePopover}
|
||||
|
||||
@@ -2,10 +2,14 @@
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
padding-bottom: 120px;
|
||||
background-color: var(--color-white-1);
|
||||
border-radius: 24px;
|
||||
|
||||
.message-list-wrap {
|
||||
max-height: calc(100vh - 152px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.ground-left-footer {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
|
||||
Reference in New Issue
Block a user