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
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> */}
</>
);
};