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

style: dashboard

Browse Source
This commit is contained in:
jialin
2024-06-26 10:39:03 +08:00
parent 1fc415b6e6
commit d44f5a72d1
16 changed files with 95 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
config/config.ts
+1
View File
@@ -65,6 +65,7 @@ export default defineConfig({
}
: {}),
// esbuildMinifyIIFE: true,
favicons: ['/static/favicon.ico'],
jsMinifier: 'terser',
cssMinifier: 'cssnano',
presets: ['umi-presets-pro'],
src/favicon.ico → public/static/favicon.ico
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

src/assets/images/favicon.ico
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

src/components/card-wrapper/index.less
+1 -1
View File
@@ -1,5 +1,5 @@
.cardWrapper {
border-radius: 20px;
border-radius: var(--border-radius-middle);
background-color: var(--color-white-1);
box-shadow: var(--box-shadow-base);
}
src/components/charts/column-bar.tsx
+5 -2
View File
@@ -43,7 +43,10 @@ const BarChart: React.FC<BarChartProps> = (props) => {
title: {
title,
style: {
align: 'center'
align: 'center',
titleFontSize: 14,
titleFill: 'rgba(0,0,0,0.88)',
titleFontWeight: 500
}
},
split: {
@@ -62,7 +65,7 @@ const BarChart: React.FC<BarChartProps> = (props) => {
radiusTopLeft: 12,
radiusTopRight: 12,
align: 'center',
width: 30
width: 20
}
};
src/components/charts/gauge.tsx
+4 -2
View File
@@ -47,9 +47,11 @@ const GaugeChart: React.FC<GaugeChartProps> = (props) => {
title: {
title,
size: 0,
titleFontSize: 14,
style: {
align: 'center'
align: 'center',
titleFontSize: 14,
titleFill: 'rgba(0,0,0,0.88)',
titleFontWeight: 500
}
},
style: {
src/components/charts/h-bar.tsx
+5 -2
View File
@@ -43,7 +43,10 @@ const BarChart: React.FC<BarChartProps> = (props) => {
title: {
title,
style: {
align: 'center'
align: 'center',
titleFontSize: 14,
titleFill: 'rgba(0,0,0,0.88)',
titleFontWeight: 500
}
},
split: {
@@ -59,7 +62,7 @@ const BarChart: React.FC<BarChartProps> = (props) => {
fill: 'linear-gradient(180deg,rgba(84, 204, 152,0.8) 0%,rgb(0, 168, 143,.7) 100%)',
radiusTopLeft: 12,
radiusTopRight: 12,
height: 30
height: 20
}
};
src/components/charts/line-chart.tsx
+4 -3
View File
@@ -39,11 +39,12 @@ const LineChart: React.FC<LineChartProps> = (props) => {
lineWidth: 1.5
},
legend: {
itemMarker: {
symbol: 'circle'
},
color: {
layout: { justifyContent: 'center' }
},
size: {
itemLabelFontSize: 14,
itemLabelFontWeight: 500
}
},
tooltip: {
src/global.less
+3 -3
View File
@@ -11,7 +11,7 @@ html {
--border-radius-base: 16px;
--border-radius-middle: 20px;
--border-radius-small: 8px;
--color-white-1: rgba(255, 255, 255, 75%);
--color-white-1: rgba(255, 255, 255, 100%);
--font-weight-normal: 500;
--font-weight-bold: 700;
--color-text-1: var(--ant-color-text);
@@ -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: 24px;
--ant-menu-item-border-radius: 20px;
--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);
@@ -98,7 +98,7 @@ html {
.css-var-rh.ant-menu-css-var {
--ant-menu-item-height: 46px;
--ant-menu-item-selected-bg: var(--color-white-1);
--ant-menu-item-border-radius: 24px;
--ant-menu-item-border-radius: 20px;
--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);
src/layouts/index.tsx
+1 -1
View File
@@ -144,7 +144,7 @@ export default (props: any) => {
location={location}
title={userConfig.title}
navTheme="light"
siderWidth={270}
siderWidth={220}
onMenuHeaderClick={(e) => {
e.stopPropagation();
e.preventDefault();
src/pages/dashboard/components/active-table.tsx
+4 -4
View File
@@ -132,9 +132,9 @@ const projectData = [
const ActiveTable = () => {
return (
<Row gutter={[20, 0]}>
<Col span={12}>
<Col xs={24} sm={24} md={24} lg={12} xl={12}>
<PageTools
style={{ margin: '32px 40px' }}
style={{ margin: '32px 8px' }}
left={
<span
style={{ fontSize: 'var(--font-size-large)', padding: '9px 0' }}
@@ -153,9 +153,9 @@ const ActiveTable = () => {
/>
</div>
</Col>
<Col span={12}>
<Col xs={24} sm={24} md={24} lg={12} xl={12}>
<PageTools
style={{ margin: '32px 40px' }}
style={{ margin: '32px 8px' }}
left={
<span
style={{ fontSize: 'var(--font-size-large)', padding: '9px 0' }}
src/pages/dashboard/components/system-load.tsx
+1 -1
View File
@@ -18,7 +18,7 @@ const SystemLoad = () => {
<div>
<div className="system-load">
<PageTools
style={{ margin: '32px 40px' }}
style={{ margin: '32px 8px' }}
left={
<span style={{ fontSize: 'var(--font-size-large)' }}>
System Load
src/pages/dashboard/components/usage.tsx
+47 -35
View File
@@ -94,46 +94,65 @@ const Usage = () => {
return (
<>
<PageTools
style={{ margin: '32px 40px' }}
style={{ margin: '32px 8px' }}
left={<span style={{ fontSize: 'var(--font-size-large)' }}>Usage</span>}
right={
<DatePicker onChange={handleSelectDate} style={{ width: 300 }} />
}
/>
<Row style={{ width: '100%' }} gutter={[0, 20]}>
<Col span={12} style={{ paddingRight: '20px' }}>
<Col span={14} style={{ paddingRight: '20px' }}>
<CardWrapper>
<ColumnBar
title="API Request"
data={dataList}
xField="time"
yField="value"
height={360}
></ColumnBar>
<Row>
<Col span={12}>
<ColumnBar
title="API Request"
data={dataList}
xField="time"
yField="value"
height={360}
></ColumnBar>
</Col>
<Col span={12}>
<ColumnBar
title="Tokens"
data={tokenUsage}
xField="time"
yField="value"
height={360}
></ColumnBar>
</Col>
</Row>
</CardWrapper>
</Col>
<Col span={12}>
<Col span={10}>
<CardWrapper>
<ColumnBar
title="Tokens"
data={tokenUsage}
xField="time"
yField="value"
height={360}
></ColumnBar>
<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>
</CardWrapper>
</Col>
</Row>
<Row style={{ width: '100%', marginTop: '20px' }} gutter={[0, 20]}>
{/* <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"
></HBar>
</CardWrapper>
<CardWrapper></CardWrapper>
</Col>
<Col span={12}>
<CardWrapper
@@ -141,16 +160,9 @@ const Usage = () => {
background: bgColor,
borderRadius: 'var(--border-radius-base)'
}}
>
<HBar
title="Top Projects"
data={projectDataList}
xField="time"
yField="value"
></HBar>
</CardWrapper>
></CardWrapper>
</Col>
</Row>
</Row> */}
</>
);
};
src/pages/dashboard/index.tsx
-3
View File
@@ -7,11 +7,8 @@ const Dashboard: React.FC = () => {
return (
<>
<Overview></Overview>
{/* <DividerLine></DividerLine> */}
<SystemLoad></SystemLoad>
{/* <DividerLine></DividerLine> */}
<Usage></Usage>
{/* <DividerLine></DividerLine> */}
<ActiveTable></ActiveTable>
</>
);
src/pages/playground/index.tsx
+19 -12
View File
@@ -1,4 +1,6 @@
import CardWrapper from '@/components/card-wrapper';
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';
@@ -25,19 +27,24 @@ const Playground: React.FC = () => {
};
return (
<div className="play-ground">
<div className="chat">
<GroundLeft parameters={params}></GroundLeft>
<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>
</div>
<div className="divider-line">{/* <Divider type="vertical" /> */}</div>
<div className="params">
<ParamsSettings
onClose={handleClosePopover}
setParams={setParams}
selectedModel={selectModel}
/>
</div>
</div>
</CardWrapper>
);
};
src/pages/playground/style/ground-left.less
-2
View File
@@ -2,8 +2,6 @@
position: relative;
height: 100vh;
padding-bottom: 120px;
background-color: var(--color-white-1);
border-radius: 24px;
.message-list-wrap {
max-height: calc(100vh - 152px);