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

style: page styles

Browse Source
This commit is contained in:
jialin
2024-06-26 14:18:56 +08:00
parent 3476d9ec27
commit 0fa4e21fa5
10 changed files with 199 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/dashboard/apis/index.ts
View File
src/pages/dashboard/components/over-view.tsx
+8 -1
View File
@@ -65,7 +65,14 @@ const Overview: React.FC = (props) => {
<div>
<Row gutter={[24, 20]} className={styles.row}>
{overviewConfigs.map((config, index) => (
<Col span={5} key={config.key}>
<Col
xs={{ flex: '100%' }}
sm={{ flex: '50%' }}
md={{ flex: '30%' }}
lg={{ flex: '20%' }}
xl={{ flex: '20%' }}
key={config.key}
>
{renderCardItem({
label: config.label,
value: renderValue(data[config.key] || 0),
src/pages/dashboard/components/system-load.tsx
+31 -9
View File
@@ -1,7 +1,10 @@
import CardWrapper from '@/components/card-wrapper';
import LiquidChart from '@/components/charts/liquid';
import PageTools from '@/components/page-tools';
import breakpoints from '@/config/breakpoints';
import useWindowResize from '@/hooks/use-window-resize';
import { Col, DatePicker, Row } from 'antd';
import { useEffect, useState } from 'react';
import ResourceUtilization from './resource-utilization';
const SystemLoad = () => {
@@ -11,11 +14,23 @@ const SystemLoad = () => {
'linear-gradient(90deg, rgba(255, 120, 117,.8) 0%, rgba(255, 120, 117,0.5) 50%, rgba(255, 120, 117,.8) 100%)'
];
const { size } = useWindowResize();
const [paddingRight, setPaddingRight] = useState<string>('20px');
const [smallChartHeight, setSmallChartHeight] = useState<number>(190);
const [largeChartHeight, setLargeChartHeight] = useState<number>(400);
const thresholds = [0.5, 0.7, 1];
const height = 400;
const handleSelectDate = (date: string) => {};
useEffect(() => {
if (size.width < breakpoints.xl) {
setPaddingRight('0');
} else {
setPaddingRight('20px');
}
}, [size.width]);
return (
<div>
<div className="system-load">
@@ -31,15 +46,22 @@ const SystemLoad = () => {
}
/>
<Row style={{ width: '100%' }} gutter={[0, 20]}>
<Col span={16} style={{ paddingRight: '20px' }}>
<CardWrapper style={{ height: height }}>
<Col
xs={24}
sm={24}
md={24}
lg={24}
xl={16}
style={{ paddingRight: paddingRight }}
>
<CardWrapper style={{ height: height, width: '100%' }}>
<ResourceUtilization />
</CardWrapper>
</Col>
<Col span={8}>
<CardWrapper style={{ height: '400px' }}>
<Row style={{ height: height }}>
<Col span={12} style={{ height: height / 2 - 10 }}>
<Col xs={24} sm={24} md={24} lg={24} xl={8}>
<CardWrapper style={{ height: largeChartHeight, width: '100%' }}>
<Row style={{ height: largeChartHeight, width: '100%' }}>
<Col span={12} style={{ height: smallChartHeight }}>
<LiquidChart
title="GPU Compute Utilization"
percent={0.2}
@@ -47,7 +69,7 @@ const SystemLoad = () => {
rangColor={colors}
></LiquidChart>
</Col>
<Col span={12} style={{ height: height / 2 - 10 }}>
<Col span={12} style={{ height: smallChartHeight }}>
<LiquidChart
title="GPU Memory Utilization"
percent={0.3}
@@ -55,7 +77,7 @@ const SystemLoad = () => {
rangColor={colors}
></LiquidChart>
</Col>
<Col span={12} style={{ height: height / 2 - 10 }}>
<Col span={12} style={{ height: smallChartHeight }}>
<LiquidChart
title="CPU Compute Utilization"
percent={0.8}
@@ -63,7 +85,7 @@ const SystemLoad = () => {
rangColor={colors}
></LiquidChart>
</Col>
<Col span={12} style={{ height: height / 2 - 10 }}>
<Col span={12} style={{ height: smallChartHeight }}>
<LiquidChart
title="CPU Memory Utilization"
percent={0.7}
src/pages/dashboard/components/usage.tsx
+27 -8
View File
@@ -2,8 +2,12 @@ import CardWrapper from '@/components/card-wrapper';
import ColumnBar from '@/components/charts/column-bar';
import HBar from '@/components/charts/h-bar';
import PageTools from '@/components/page-tools';
import breakpoints from '@/config/breakpoints';
import useWindowResize from '@/hooks/use-window-resize';
import { generateRandomArray } from '@/utils';
import { Col, DatePicker, Row } from 'antd';
import { useEffect, useState } from 'react';
const { RangePicker } = DatePicker;
const times = [
'june 1',
@@ -86,10 +90,18 @@ const tokenUsage = TokensData.map((val, i) => {
});
const Usage = () => {
const bgColor = '#fff';
const handleSelectDate = (dateString: string) => {
console.log('dateString============', dateString);
};
const { size } = useWindowResize();
const [paddingRight, setPaddingRight] = useState<string>('20px');
const handleSelectDate = (dateString: string) => {};
useEffect(() => {
if (size.width < breakpoints.xl) {
setPaddingRight('0');
} else {
setPaddingRight('20px');
}
}, [size.width]);
return (
<>
@@ -101,9 +113,16 @@ const Usage = () => {
}
/>
<Row style={{ width: '100%' }} gutter={[0, 20]}>
<Col span={16} style={{ paddingRight: '20px' }}>
<CardWrapper>
<Row>
<Col
xs={24}
sm={24}
md={24}
lg={24}
xl={16}
style={{ paddingRight: paddingRight }}
>
<CardWrapper style={{ width: '100%' }}>
<Row style={{ width: '100%' }}>
<Col span={12}>
<ColumnBar
title="API Request"
@@ -125,7 +144,7 @@ const Usage = () => {
</Row>
</CardWrapper>
</Col>
<Col span={8}>
<Col xs={24} sm={24} md={24} lg={24} xl={8}>
<CardWrapper>
<HBar
title="Top Users"
src/pages/llmodels/components/add-modal.tsx
+1 -2
View File
@@ -26,8 +26,7 @@ type AddModalProps = {
const sourceOptions = [
{ label: 'Huggingface', value: 'huggingface', key: 'huggingface' },
{ label: 'Ollama', value: 'ollama_library', key: 'ollama_library' },
{ label: 'S3', value: 's3', key: 's3' }
{ label: 'Ollama', value: 'ollama_library', key: 'ollama_library' }
];
const AddModal: React.FC<AddModalProps> = (props) => {
src/pages/playground/style/ground-left.less
+1 -1
View File
@@ -1,6 +1,6 @@
.ground-left {
position: relative;
height: 100vh;
height: calc(100vh - 84px);
padding-bottom: 120px;
.message-list-wrap {
src/pages/playground/style/play-ground.less
+5 -1
View File
@@ -1,20 +1,24 @@
.play-ground {
display: flex;
align-items: flex-start;
.chat {
flex: 1;
display: flex;
flex-direction: column;
}
.params {
// width: 465px;
padding: 20px;
}
.divider-line {
width: 1px;
.ant-divider {
margin: 0;
min-height: 100vh;
min-height: calc(100vh - 84px);
}
}
}
src/pages/profile/index.tsx
+58 -51
View File
@@ -1,3 +1,4 @@
import CardWrapper from '@/components/card-wrapper';
import FormButtons from '@/components/form-buttons';
import SealInput from '@/components/seal-form/seal-input';
import { PasswordReg } from '@/config';
@@ -42,14 +43,17 @@ const Profile: React.FC = () => {
}}
extra={[]}
>
<Form
style={{ width: '524px' }}
name="profileForm"
form={form}
onFinish={handleOnFinish}
onFinishFailed={handleOnFinishFailed}
<CardWrapper
style={{ padding: '32px', marginTop: '70px', width: 'max-content' }}
>
{/* <Form.Item<ProfileProps>
<Form
style={{ width: '524px' }}
name="profileForm"
form={form}
onFinish={handleOnFinish}
onFinishFailed={handleOnFinishFailed}
>
{/* <Form.Item<ProfileProps>
name="username"
rules={[
{
@@ -69,50 +73,53 @@ const Profile: React.FC = () => {
style={{ width: INPUT_WIDTH.default }}
></SealInput.Input>
</Form.Item> */}
<Form.Item<ProfileProps>
name="current_password"
rules={[
{
required: true,
message: intl.formatMessage(
{ id: 'common.form.rule.input' },
{
name: intl.formatMessage({
id: 'users.form.currentpassword'
})
}
)
}
]}
>
<SealInput.Password
label={intl.formatMessage({ id: 'users.form.currentpassword' })}
required
style={{ width: INPUT_WIDTH.default }}
></SealInput.Password>
</Form.Item>
<Form.Item<ProfileProps>
name="new_password"
rules={[
{
required: true,
pattern: PasswordReg,
message: intl.formatMessage({ id: 'users.form.rule.password' })
}
]}
>
<SealInput.Password
label={intl.formatMessage({ id: 'users.form.newpassword' })}
required
style={{ width: INPUT_WIDTH.default }}
></SealInput.Password>
</Form.Item>
<FormButtons
htmlType="submit"
onCancel={handleCancel}
showCancel={false}
></FormButtons>
</Form>
<Form.Item<ProfileProps>
name="current_password"
rules={[
{
required: true,
message: intl.formatMessage(
{ id: 'common.form.rule.input' },
{
name: intl.formatMessage({
id: 'users.form.currentpassword'
})
}
)
}
]}
>
<SealInput.Password
label={intl.formatMessage({ id: 'users.form.currentpassword' })}
required
style={{ width: INPUT_WIDTH.default }}
></SealInput.Password>
</Form.Item>
<Form.Item<ProfileProps>
name="new_password"
rules={[
{
required: true,
pattern: PasswordReg,
message: intl.formatMessage({
id: 'users.form.rule.password'
})
}
]}
>
<SealInput.Password
label={intl.formatMessage({ id: 'users.form.newpassword' })}
required
style={{ width: INPUT_WIDTH.default }}
></SealInput.Password>
</Form.Item>
<FormButtons
htmlType="submit"
onCancel={handleCancel}
showCancel={false}
></FormButtons>
</Form>
</CardWrapper>
</PageContainer>
</StrictMode>
);