pucmnw7fs
/
gpustack
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: page styles

Browse Source
main
jialin 2 years ago
parent 3476d9ec27
commit 0fa4e21fa5
10 changed files with 199 additions and 73 deletions
Show Stats Download Patch File Download Diff File

8
src/config/breakpoints.ts
Unescape View File

@ -0,0 +1,8 @@
export default {
xs: 0,
sm: 576,
md: 768,
lg: 992,
xl: 1200,
xxl: 1600
};

60
src/hooks/use-window-resize.ts
Unescape View File

@ -0,0 +1,60 @@
import breakpoints from '@/config/breakpoints';
import { useEffect, useState } from 'react';
export default function useWindowResize() {
const [size, setSize] = useState<{ width: number; height: number }>({
width: window.innerWidth,
height: window.innerHeight
});
const [isMobile, setIsMobile] = useState<boolean>(false);
const [isTablet, setIsTablet] = useState<boolean>(false);
const [isDesktop, setIsDesktop] = useState<boolean>(false);
const [currentPoint, setCurrentPoint] = useState<string>('');
const checkBreakpoint = (width: number) => {
if (width < breakpoints.sm) {
setIsMobile(true);
setIsTablet(false);
setIsDesktop(false);
setCurrentPoint('sm');
return;
}
if (width < breakpoints.md) {
setIsMobile(false);
setIsTablet(true);
setIsDesktop(false);
setCurrentPoint('md');
return;
}
if (width < breakpoints.lg) {
setIsMobile(false);
setIsTablet(false);
setIsDesktop(true);
setCurrentPoint('lg');
return;
}
setIsMobile(false);
setIsTablet(false);
setIsDesktop(true);
setCurrentPoint('xl');
};
useEffect(() => {
const handleResize = () => {
setSize({
width: window.innerWidth,
height: window.innerHeight
});
};
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
};
}, []);
useEffect(() => {
checkBreakpoint(size.width);
}, [size.width]);
return { size, isMobile, isTablet, isDesktop, currentPoint };
}

0
src/pages/dashboard/apis/index.ts
Unescape View File

9
src/pages/dashboard/components/over-view.tsx
Unescape 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),

40
src/pages/dashboard/components/system-load.tsx
Unescape 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}

35
src/pages/dashboard/components/usage.tsx
Unescape 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"

3
src/pages/llmodels/components/add-modal.tsx
Unescape 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) => {

2
src/pages/playground/style/ground-left.less
Unescape View File

@ -1,6 +1,6 @@
.ground-left {
position: relative;
height: 100vh;
height: calc(100vh - 84px);
padding-bottom: 120px;
.message-list-wrap {

6
src/pages/playground/style/play-ground.less
Unescape 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);
}
}
}

109
src/pages/profile/index.tsx
Unescape 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>
);

Write Preview
Loading…
Cancel
Save