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

style: dashboard style

Browse Source
This commit is contained in:
jialin
2024-06-19 18:58:49 +08:00
parent 9f34452c68
commit 8c402e88fb
24 changed files with 266 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/api-keys/index.tsx
+1 -1
View File
@@ -141,7 +141,7 @@ const Models: React.FC = () => {
left={
<Space>
<Input
placeholder="按名称查询"
placeholder="名称查询"
style={{ width: 300 }}
onChange={handleNameChange}
></Input>
src/pages/dashboard/components/active-table.tsx
+25 -7
View File
@@ -1,4 +1,5 @@
import ContentWrapper from '@/components/content-wrapper';
import PageTools from '@/components/page-tools';
import { Col, Row, Table } from 'antd';
const modelColumns = [
@@ -132,10 +133,18 @@ const ActiveTable = () => {
return (
<Row>
<Col span={12}>
<ContentWrapper
contentStyle={{ paddingRight: 0 }}
title={<span style={{ lineHeight: '48px' }}>Active Models</span>}
>
<PageTools
style={{ margin: '32px 40px' }}
left={
<span
style={{ fontSize: 'var(--font-size-large)', padding: '9px 0' }}
>
Active Models
</span>
}
right={false}
/>
<ContentWrapper contentStyle={{ paddingRight: 0 }} title={false}>
<Table
columns={modelColumns}
dataSource={modelData}
@@ -145,9 +154,18 @@ const ActiveTable = () => {
</ContentWrapper>
</Col>
<Col span={12}>
<ContentWrapper
title={<span style={{ lineHeight: '48px' }}>Active Projects</span>}
>
<PageTools
style={{ margin: '32px 40px' }}
left={
<span
style={{ fontSize: 'var(--font-size-large)', padding: '9px 0' }}
>
Active Projects
</span>
}
right={false}
/>
<ContentWrapper title={false}>
<Table
columns={projectColumns}
dataSource={projectData}
src/pages/dashboard/components/over-view.less
+3 -1
View File
@@ -1,16 +1,18 @@
:local(.card-body) {
:global(.ant-card-body) {
height: 100px;
height: 110px;
display: flex;
justify-content: space-around;
}
}
:local(.row) {
:global(.ant-col-5) {
flex: 0 0 20%;
max-width: 20%;
}
}
.content {
display: flex;
flex-direction: column;
src/pages/dashboard/components/over-view.tsx
+5 -5
View File
@@ -1,4 +1,4 @@
import { PageContainer } from '@ant-design/pro-components';
import ContentWrapper from '@/components/content-wrapper';
import { Card, Col, Row, Space } from 'antd';
import React from 'react';
import { overviewConfigs } from '../config';
@@ -55,7 +55,7 @@ const Overview: React.FC = (props) => {
return value;
}
return (
<Space className="value-box">
<Space className="value-box" size={20}>
<span className={'value-healthy'}>{value.healthy}</span>
<span className={'value-warning'}>{value.warning}</span>
<span className={'value-error'}>{value.error}</span>
@@ -63,8 +63,8 @@ const Overview: React.FC = (props) => {
);
};
return (
<PageContainer ghost title={false}>
<Row gutter={[20, 20]} className={styles.row}>
<ContentWrapper contentStyle={{ paddingBlockStart: '32px' }} title={false}>
<Row gutter={[24, 20]} className={styles.row}>
{overviewConfigs.map((config, index) => (
<Col span={5} key={config.key}>
{renderCardItem({
@@ -75,7 +75,7 @@ const Overview: React.FC = (props) => {
</Col>
))}
</Row>
</PageContainer>
</ContentWrapper>
);
};
src/pages/dashboard/components/resource-utilization.tsx
-8
View File
@@ -26,13 +26,6 @@ const mockData = {
};
const UtilizationOvertime: React.FC = () => {
const timeList = [
// '01:00:00',
// '02:00:00',
// '03:00:00',
// '04:00:00',
// '05:00:00',
// '06:00:00',
// '07:00:00',
'08:00:00',
'09:00:00',
'10:00:00',
@@ -67,7 +60,6 @@ const UtilizationOvertime: React.FC = () => {
};
const data = generateData();
// <DatePicker onChange={handleSelectDate} style={{ width: 300 }} />
return (
<>
<LineChart height={400} data={data} />
src/pages/dashboard/components/system-load.tsx
+11 -7
View File
@@ -10,19 +10,23 @@ const SystemLoad = () => {
};
return (
<PageContainer ghost title="System Load">
<PageContainer ghost title={false}>
<div className="system-load">
<PageTools
marginBottom={10}
marginTop={0}
left={false}
left={
<span style={{ fontSize: 'var(--font-size-large)' }}>
System Load
</span>
}
right={
<DatePicker onChange={handleSelectDate} style={{ width: 300 }} />
}
/>
<ResourceUtilization />
<Row style={{ width: '100%' }}>
<Col span={6}>
<Row style={{ width: '100%', marginTop: '32px' }}>
<Col xs={24} sm={24} md={12} lg={6} xl={6}>
<GaugeChart
title="GPU Compute Utilization"
total={100}
@@ -32,7 +36,7 @@ const SystemLoad = () => {
rangColor={['#54cc98', '#ffd666', '#ff7875']}
></GaugeChart>
</Col>
<Col span={6}>
<Col xs={24} sm={24} md={12} lg={6} xl={6}>
<GaugeChart
title="GPU Memory Utilization"
total={100}
@@ -42,7 +46,7 @@ const SystemLoad = () => {
rangColor={['#54cc98', '#ffd666', '#ff7875']}
></GaugeChart>
</Col>
<Col span={6}>
<Col xs={24} sm={24} md={12} lg={6} xl={6}>
<GaugeChart
title="CPU Compute Utilization"
total={100}
@@ -52,7 +56,7 @@ const SystemLoad = () => {
rangColor={['#54cc98', '#ffd666', '#ff7875']}
></GaugeChart>
</Col>
<Col span={6}>
<Col xs={24} sm={24} md={12} lg={6} xl={6}>
<GaugeChart
title="CPU Memory Utilization"
total={100}
src/pages/dashboard/components/usage.tsx
+18 -21
View File
@@ -1,8 +1,8 @@
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 { PageContainer } from '@ant-design/pro-components';
import { Col, DatePicker, Row } from 'antd';
const times = [
@@ -91,19 +91,16 @@ const Usage = () => {
};
return (
<>
<PageContainer ghost title="Usage">
<PageTools
marginBottom={10}
marginTop={0}
left={false}
right={
<DatePicker onChange={handleSelectDate} style={{ width: 300 }} />
}
/>
</PageContainer>
<Row style={{ width: '100%' }}>
<PageTools
style={{ margin: '32px 40px' }}
left={<span style={{ fontSize: 'var(--font-size-large)' }}>Usage</span>}
right={
<DatePicker onChange={handleSelectDate} style={{ width: 300 }} />
}
/>
<Row style={{ width: '100%' }} gutter={[20, 0]}>
<Col span={12}>
<PageContainer title={false}>
<ContentWrapper title={false} contentStyle={{ paddingRight: 0 }}>
<ColumnBar
title="API Request"
data={dataList}
@@ -111,10 +108,10 @@ const Usage = () => {
yField="value"
height={360}
></ColumnBar>
</PageContainer>
</ContentWrapper>
</Col>
<Col span={12}>
<PageContainer title={false}>
<ContentWrapper title={false} contentStyle={{ paddingLeft: 0 }}>
<ColumnBar
title="Tokens"
data={tokenUsage}
@@ -122,12 +119,12 @@ const Usage = () => {
yField="value"
height={360}
></ColumnBar>
</PageContainer>
</ContentWrapper>
</Col>
</Row>
<Row style={{ width: '100%' }}>
<Row style={{ width: '100%' }} gutter={[20, 0]}>
<Col span={12}>
<PageContainer title={false}>
<ContentWrapper title={false} contentStyle={{ paddingRight: 0 }}>
<HBar
title="Top Users"
data={userDataList}
@@ -135,10 +132,10 @@ const Usage = () => {
yField="value"
height={400}
></HBar>
</PageContainer>
</ContentWrapper>
</Col>
<Col span={12}>
<PageContainer title={false}>
<ContentWrapper title={false} contentStyle={{ paddingLeft: 0 }}>
<HBar
title="Top Projects"
data={projectDataList}
@@ -146,7 +143,7 @@ const Usage = () => {
yField="value"
height={400}
></HBar>
</PageContainer>
</ContentWrapper>
</Col>
</Row>
</>
src/pages/dashboard/config/index.ts
+5 -5
View File
@@ -3,30 +3,30 @@ export const overviewConfigs = [
key: 'workers',
label: 'Workers',
backgroundColor:
'linear-gradient(180deg, rgba(0,188,203,.2) 0%, rgba(40,207,181,.2) 100%)'
'linear-gradient(180deg, rgb(0 139 188 / 20%) 0%, rgba(40,207,181,.2) 100%)'
},
{
key: 'gpus',
label: 'Total GPUs',
backgroundColor:
'linear-gradient(180deg, rgba(0,188,203,.2) 0%, rgba(40,207,181,.2) 100%)'
'linear-gradient(180deg, rgb(0 139 188 / 20%) 0%, rgba(40,207,181,.2) 100%)'
},
{
key: 'allocatedGpus',
label: 'Allocated GPUs',
backgroundColor:
'linear-gradient(180deg, rgba(0,188,203,.2) 0%, rgba(40,207,181,.2) 100%)'
'linear-gradient(180deg, rgb(0 139 188 / 20%) 0%, rgba(40,207,181,.2) 100%)'
},
{
key: 'models',
label: 'Models',
backgroundColor:
'linear-gradient(180deg, rgba(0,188,203,.2) 0%, rgba(40,207,181,.2) 100%)'
'linear-gradient(180deg, rgb(0 139 188 / 20%) 0%, rgba(40,207,181,.2) 100%)'
},
{
key: 'instances',
label: 'Instances',
backgroundColor:
'linear-gradient(180deg, rgba(0,188,203,.2) 0%, rgba(40,207,181,.2) 100%)'
'linear-gradient(180deg, rgb(0 139 188 / 20%) 0%, rgba(40,207,181,.2) 100%)'
}
];
src/pages/dashboard/styles/index.less
+1 -1
View File
@@ -11,7 +11,7 @@
color: var(--ant-gold-6);
}
.value-danger {
.value-error {
color: var(--ant-red-6);
}
}
src/pages/llmodels/components/add-modal.tsx
+4 -2
View File
@@ -5,7 +5,7 @@ import SealSelect from '@/components/seal-form/seal-select';
import { PageAction } from '@/config';
import { PageActionType } from '@/config/types';
import { convertFileSize } from '@/utils';
import { Form, Modal } from 'antd';
import { Form, Input, Modal } from 'antd';
import _ from 'lodash';
import { useEffect, useState } from 'react';
import {
@@ -130,7 +130,9 @@ const AddModal: React.FC<AddModalProps> = (props) => {
onSearch={debounceSearch}
options={repoOptions}
description="Only .gguf format is supported"
></SealAutoComplete>
>
<Input.Search style={{ width: '520px' }}></Input.Search>
</SealAutoComplete>
</Form.Item>
<Form.Item<FormData>
name="huggingface_filename"
src/pages/llmodels/index.tsx
+1 -1
View File
@@ -382,7 +382,7 @@ const Models: React.FC = () => {
left={
<Space>
<Input
placeholder="按名称查询"
placeholder="名称查询"
style={{ width: 300 }}
allowClear
onChange={handleNameChange}
src/pages/resources/components/gpus.tsx
+1 -1
View File
@@ -146,7 +146,7 @@ const Models: React.FC = () => {
left={
<Space>
<Input
placeholder="按名称查询"
placeholder="名称查询"
style={{ width: 300 }}
onChange={handleNameChange}
></Input>
src/pages/resources/components/nodes.tsx
+1 -1
View File
@@ -86,7 +86,7 @@ const Models: React.FC = () => {
left={
<Space>
<Input
placeholder="按名称查询"
placeholder="名称查询"
style={{ width: 300 }}
onChange={handleNameChange}
></Input>
src/pages/users/index.tsx
+1 -1
View File
@@ -166,7 +166,7 @@ const Models: React.FC = () => {
left={
<Space>
<Input
placeholder="按名称查询"
placeholder="名称查询"
style={{ width: 300 }}
onChange={handleNameChange}
></Input>