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/assets/styles/menu.less
+6 -3
View File
@@ -1,9 +1,9 @@
.ant-pro-layout {
.ant-pro-sider {
padding: 10px;
&.ant-layout-sider {
background: var(--color-white-1);
}
// &.ant-layout-sider {
// background: var(--color-white-1);
// }
.ant-layout-sider-children {
background-color: var(--color-fill-1);
border-inline: none;
@@ -11,12 +11,15 @@
padding-inline: 16px;
padding-block-end: 12px;
}
.umi-plugin-layout-right {
width: 100%;
.umi-plugin-layout-action {
padding: 12px;
width: 100%;
border-radius: var(--menu-border-radius-base);
&:hover {
background-color: var(--color-white-1);
}
src/components/charts/gauge.tsx
+5 -1
View File
@@ -29,14 +29,18 @@ const GaugeChart: React.FC<GaugeChartProps> = (props) => {
range: rangColor
}
},
startAngle: Math.PI,
endAngle: 0,
title: {
// title,
title,
size: 0,
titleFontSize: 14,
style: {
align: 'center'
}
},
style: {
arcShape: 'round',
textContent: (target: number, total: number) => {
return `${(target / total) * 100}%`;
}
src/components/charts/pie-chart.tsx
+37
View File
@@ -0,0 +1,37 @@
import { Pie } from '@ant-design/plots';
import numeral from 'numeral';
interface PieChartProps {
data: { label: string; value: number }[];
height?: number;
radius?: number;
}
const PieChart: React.FC<PieChartProps> = (props) => {
const { data, height = 340, radius = 0.9 } = props;
return (
<Pie
height={height}
radius={radius}
angleField="value"
colorField="label"
data={data}
legend={{
color: {
position: 'bottom',
layout: {
justifyContent: 'center'
}
}
}}
label={{
position: 'outside',
text: (item: { label: number; value: number }) => {
return `${item.label}: ${numeral(item.value).format('0,0')}`;
}
}}
/>
);
};
export default PieChart;
src/components/page-tools/index.tsx
+14 -4
View File
@@ -6,17 +6,27 @@ type PageToolsProps = {
right?: React.ReactNode;
marginBottom?: number;
marginTop?: number;
style?: React.CSSProperties;
};
const PageTools: React.FC<PageToolsProps> = (props) => {
const { left, right, marginBottom = 0, marginTop = 70 } = props;
const {
left,
right,
marginBottom = 0,
marginTop = 70,
style: pageStyle
} = props;
const newStyle: Record<string, string> = useMemo(() => {
const style: Record<string, string> = {};
const newStyle: React.CSSProperties = useMemo(() => {
const style: React.CSSProperties = {};
style.marginBottom = `${marginBottom}px`;
style.marginTop = `${marginTop}px`;
if (pageStyle) {
Object.assign(style, pageStyle);
}
return style;
}, [marginBottom, marginTop]);
}, [marginBottom, marginTop, pageStyle]);
return (
<div className="page-tools" style={newStyle}>
src/components/status-tag/index.less
+4
View File
@@ -11,6 +11,10 @@
font-size: var(--font-size-base);
overflow: hidden;
&.download {
background-color: rgb(47 191 133 / 30%);
}
.download {
display: flex;
justify-content: center;
src/components/status-tag/index.tsx
+3 -1
View File
@@ -48,7 +48,9 @@ const StatusTag: React.FC<StatusTagProps> = ({ statusValue, download }) => {
};
return (
<span
className={classNames('status-tag')}
className={classNames('status-tag', {
download: download?.percent
})}
style={
download
? {
src/global.less
+25 -4
View File
@@ -31,8 +31,6 @@ html {
--color-chart-red: #ff7875;
--color-chart-green: #54cc98;
--color-chart-glod: #ffd666;
// --color-text-1: #000;
--seal-transition-func: cubic-bezier(0, 0, 1, 1);
// ======== input ============
--ant-input-active-shadow: 0 0 0 2px rgba(5, 255, 105, 6%);
@@ -129,8 +127,10 @@ body {
}
// table
.ant-table-wrapper .ant-table-selection-column {
padding-inline-start: 16px !important;
.ant-table-wrapper {
.ant-table-selection-column {
padding-inline-start: 16px !important;
}
}
.ant-table-container .ant-table-content table {
@@ -245,6 +245,10 @@ body {
min-height: 100vh;
}
.ant-pro-layout-bg-list {
background: transparent !important;
}
.ant-pro-layout-container {
background-color: var(--color-fill-2);
}
@@ -271,6 +275,23 @@ 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%;
// }
.ant-pro-page-container {
background: transparent;
}
@keyframes skeleton-loading {
0% {
src/layouts/index.tsx
+88 -87
View File
@@ -1,7 +1,5 @@
// @ts-nocheck
/// <reference types="@ant-design/pro-components" />
import { useAccessMarkedRoutes } from '@@/plugin-access';
import { useModel } from '@@/plugin-model';
import { ProLayout } from '@ant-design/pro-components';
@@ -141,97 +139,100 @@ export default (props: any) => {
);
console.log('route===========', route);
return (
<ProLayout
route={route}
location={location}
title={userConfig.title}
navTheme="light"
siderWidth={270}
onMenuHeaderClick={(e) => {
e.stopPropagation();
e.preventDefault();
navigate('/');
}}
onPageChange={(route) => {
console.log('onRouteChange', route);
const { location } = history;
// 如果没有登录，重定向到 login
// if (!initialState?.currentUser && location.pathname !== loginPath) {
// history.push(loginPath);
// }
}}
formatMessage={userConfig.formatMessage || formatMessage}
menu={{ locale: userConfig.locale }}
logo={Logo}
menuItemRender={(menuItemProps, defaultDom) => {
console.log('meurender=========', { defaultDom });
if (menuItemProps.isUrl || menuItemProps.children) {
return defaultDom;
}
if (menuItemProps.path && location.pathname !== menuItemProps.path) {
return (
// handle wildcard route path, for example /slave/* from qiankun
<Link
to={menuItemProps.path.replace('/*', '')}
target={menuItemProps.target}
>
{defaultDom}
</Link>
);
}
return <>{defaultDom}</>;
}}
itemRender={(route, _, routes) => {
const { breadcrumbName, title, path } = route;
const label = title || breadcrumbName;
const last = routes[routes.length - 1];
if (last) {
if (last.path === path || last.linkPath === path) {
return <span>{label}</span>;
<div>
<div className="background"></div>
<ProLayout
route={route}
location={location}
title={userConfig.title}
navTheme="light"
siderWidth={270}
onMenuHeaderClick={(e) => {
e.stopPropagation();
e.preventDefault();
navigate('/');
}}
onPageChange={(route) => {
console.log('onRouteChange', route);
const { location } = history;
// 如果没有登录，重定向到 login
// if (!initialState?.currentUser && location.pathname !== loginPath) {
// history.push(loginPath);
// }
}}
formatMessage={userConfig.formatMessage || formatMessage}
menu={{ locale: userConfig.locale }}
logo={Logo}
menuItemRender={(menuItemProps, defaultDom) => {
console.log('meurender=========', { defaultDom });
if (menuItemProps.isUrl || menuItemProps.children) {
return defaultDom;
}
}
return <Link to={path}>{label}</Link>;
}}
disableContentMargin
fixSiderbar
fixedHeader
{...runtimeConfig}
rightContentRender={
runtimeConfig.rightContentRender !== false &&
((layoutProps) => {
const dom = getRightRenderContent({
runtimeConfig,
loading,
initialState,
setInitialState
});
if (runtimeConfig.rightContentRender) {
return runtimeConfig.rightContentRender(layoutProps, dom, {
// BREAK CHANGE userConfig > runtimeConfig
userConfig,
if (menuItemProps.path && location.pathname !== menuItemProps.path) {
return (
// handle wildcard route path, for example /slave/* from qiankun
<Link
to={menuItemProps.path.replace('/*', '')}
target={menuItemProps.target}
>
{defaultDom}
</Link>
);
}
return <>{defaultDom}</>;
}}
itemRender={(route, _, routes) => {
const { breadcrumbName, title, path } = route;
const label = title || breadcrumbName;
const last = routes[routes.length - 1];
if (last) {
if (last.path === path || last.linkPath === path) {
return <span>{label}</span>;
}
}
return <Link to={path}>{label}</Link>;
}}
disableContentMargin
fixSiderbar
fixedHeader
{...runtimeConfig}
rightContentRender={
runtimeConfig.rightContentRender !== false &&
((layoutProps) => {
const dom = getRightRenderContent({
runtimeConfig,
loading,
initialState,
setInitialState
});
}
return dom;
})
}
>
<Exception
route={matchedRoute}
noFound={runtimeConfig?.noFound}
notFound={runtimeConfig?.notFound}
unAccessible={runtimeConfig?.unAccessible}
noAccessible={runtimeConfig?.noAccessible}
if (runtimeConfig.rightContentRender) {
return runtimeConfig.rightContentRender(layoutProps, dom, {
// BREAK CHANGE userConfig > runtimeConfig
userConfig,
runtimeConfig,
loading,
initialState,
setInitialState
});
}
return dom;
})
}
>
{runtimeConfig.childrenRender ? (
runtimeConfig.childrenRender(<Outlet />, props)
) : (
<Outlet />
)}
</Exception>
</ProLayout>
<Exception
route={matchedRoute}
noFound={runtimeConfig?.noFound}
notFound={runtimeConfig?.notFound}
unAccessible={runtimeConfig?.unAccessible}
noAccessible={runtimeConfig?.noAccessible}
>
{runtimeConfig.childrenRender ? (
runtimeConfig.childrenRender(<Outlet />, props)
) : (
<Outlet />
)}
</Exception>
</ProLayout>
</div>
);
};
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>