jialin
2 years ago
parent
7e06a56c12
commit
a27fa9d56c
File diff suppressed because it is too large
Load Diff
@ -1,4 +0,0 @@
|
||||
.title {
|
||||
margin: 0 auto;
|
||||
font-weight: 200;
|
||||
}
|
||||
@ -1,2 +0,0 @@
|
||||
import Guide from './Guide';
|
||||
export default Guide;
|
||||
@ -1,39 +0,0 @@
|
||||
.g-polygon {
|
||||
position: absolute;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.g-polygon-1 {
|
||||
// 定位代码，容器高宽随意
|
||||
background: #fe5;
|
||||
clip-path: polygon(0 10%, 30% 0, 100% 40%, 70% 100%, 20% 90%);
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.g-polygon-2 {
|
||||
// 定位代码，容器高宽随意
|
||||
background: #e950d1;
|
||||
clip-path: polygon(10% 0, 100% 70%, 100% 100%, 20% 90%);
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.g-polygon-3 {
|
||||
// 定位代码，容器高宽随意
|
||||
background: rgba(87, 80, 233);
|
||||
clip-path: polygon(80% 0, 100% 70%, 100% 100%, 20% 90%);
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.g-bg::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
backdrop-filter: blur(150px);
|
||||
z-index: 1;
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
import './index.less';
|
||||
|
||||
const GlassBg = () => {
|
||||
return (
|
||||
<div className="g-bg">
|
||||
<div className="g-polygon g-polygon-1"></div>
|
||||
<div className="g-polygon g-polygon-2"></div>
|
||||
<div className="g-polygon g-polygon-3"></div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default GlassBg;
|
||||
@ -1,6 +1,6 @@
|
||||
export default {
|
||||
documentation: 'https://docs.gpustack.ai/',
|
||||
github: 'https://github.com/gpustack/gpustack',
|
||||
discord: 'https://discord.gg/2ZvXuaYq',
|
||||
discord: 'https://discord.gg/VXYJzuaqwD',
|
||||
site: 'https://seal.io/'
|
||||
};
|
||||
@ -1,42 +0,0 @@
|
||||
import { Pie } from '@ant-design/plots';
|
||||
import numeral from 'numeral';
|
||||
|
||||
const TooltipContent = (props: any) => {
|
||||
return (
|
||||
<div>
|
||||
<div>{props.x}</div>
|
||||
<div>{props.y}</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
const GPUUtilization: React.FC = () => {
|
||||
const data = [
|
||||
{ label: 'Idle GPUs', value: 20 },
|
||||
{ label: 'Allocated GPUs', value: 120 }
|
||||
];
|
||||
return (
|
||||
<Pie
|
||||
height={340}
|
||||
radius={0.9}
|
||||
angleField="value"
|
||||
colorField="label"
|
||||
data={data as any}
|
||||
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 GPUUtilization;
|
||||
@ -1,191 +0,0 @@
|
||||
import PageTools from '@/components/page-tools';
|
||||
import { Column } from '@ant-design/plots';
|
||||
import { DatePicker, Select, Space } from 'antd';
|
||||
import { useState } from 'react';
|
||||
|
||||
const { RangePicker } = DatePicker;
|
||||
|
||||
const ModelBills: React.FC = () => {
|
||||
const [selectName, setSelectName] = useState('model1');
|
||||
const handleNameChange = (value: string) => {
|
||||
setSelectName(value);
|
||||
};
|
||||
const models = [
|
||||
{
|
||||
value: 'model1',
|
||||
label: 'model1'
|
||||
},
|
||||
{
|
||||
value: 'model2',
|
||||
label: 'model2'
|
||||
},
|
||||
{
|
||||
value: 'model3',
|
||||
label: 'model3'
|
||||
}
|
||||
];
|
||||
const config = {
|
||||
data: [
|
||||
{
|
||||
time: '2021-01',
|
||||
name: 'model1',
|
||||
value: 3.9
|
||||
},
|
||||
{
|
||||
time: '2021-01',
|
||||
name: 'model2',
|
||||
value: 4.3
|
||||
},
|
||||
{
|
||||
time: '2021-01',
|
||||
name: 'model3',
|
||||
value: 3.8
|
||||
},
|
||||
{
|
||||
time: '2021-02',
|
||||
name: 'model1',
|
||||
value: 4.1
|
||||
},
|
||||
{
|
||||
time: '2021-02',
|
||||
name: 'model2',
|
||||
value: 5.7
|
||||
},
|
||||
{
|
||||
time: '2021-02',
|
||||
name: 'model3',
|
||||
value: 3.9
|
||||
},
|
||||
{
|
||||
time: '2021-03',
|
||||
name: 'model1',
|
||||
value: 5.6
|
||||
},
|
||||
{
|
||||
time: '2021-03',
|
||||
name: 'model2',
|
||||
value: 7.3
|
||||
},
|
||||
{
|
||||
time: '2021-03',
|
||||
name: 'model3',
|
||||
value: 4.9
|
||||
},
|
||||
{
|
||||
time: '2021-04',
|
||||
name: 'model1',
|
||||
value: 7.2
|
||||
},
|
||||
{
|
||||
time: '2021-04',
|
||||
name: 'model2',
|
||||
value: 9.6
|
||||
},
|
||||
{
|
||||
time: '2021-04',
|
||||
name: 'model3',
|
||||
value: 6.3
|
||||
},
|
||||
{
|
||||
time: '2021-05',
|
||||
name: 'model1',
|
||||
value: 9.3
|
||||
},
|
||||
{
|
||||
time: '2021-05',
|
||||
name: 'model2',
|
||||
value: 11.9
|
||||
},
|
||||
{
|
||||
time: '2021-05',
|
||||
name: 'model3',
|
||||
value: 8.6
|
||||
},
|
||||
{
|
||||
time: '2021-06',
|
||||
name: 'model1',
|
||||
value: 10.3
|
||||
},
|
||||
{
|
||||
time: '2021-06',
|
||||
name: 'model2',
|
||||
value: 13.9
|
||||
},
|
||||
{
|
||||
time: '2021-06',
|
||||
name: 'model3',
|
||||
value: 9.6
|
||||
}
|
||||
],
|
||||
xField: 'time',
|
||||
yField: 'value',
|
||||
colorField: 'name',
|
||||
group: true,
|
||||
legend: {
|
||||
color: {
|
||||
position: 'top',
|
||||
layout: {
|
||||
justifyContent: 'center'
|
||||
}
|
||||
}
|
||||
},
|
||||
axis: {
|
||||
x: {
|
||||
xAxis: true
|
||||
}
|
||||
},
|
||||
|
||||
split: {
|
||||
type: 'line',
|
||||
line: {
|
||||
color: 'red',
|
||||
style: {
|
||||
color: 'red',
|
||||
lineDash: [4, 5]
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
style: {
|
||||
radiusTopLeft: 10,
|
||||
radiusTopRight: 10,
|
||||
width: 25
|
||||
}
|
||||
};
|
||||
|
||||
const handleSelectDate = (value: any) => {
|
||||
console.log(value);
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<PageTools
|
||||
marginBottom={10}
|
||||
marginTop={0}
|
||||
left={false}
|
||||
right={
|
||||
<Space>
|
||||
<Select
|
||||
size="middle"
|
||||
options={models}
|
||||
value={selectName}
|
||||
style={{ width: 300, height: 34 }}
|
||||
onChange={handleNameChange}
|
||||
></Select>
|
||||
<RangePicker
|
||||
showTime={false}
|
||||
format="YYYY-MM-DD"
|
||||
onChange={(value, dateString) => {
|
||||
console.log('Selected Time: ', value);
|
||||
console.log('Formatted Selected Time: ', dateString);
|
||||
}}
|
||||
onOk={handleSelectDate}
|
||||
/>
|
||||
</Space>
|
||||
}
|
||||
></PageTools>
|
||||
<Column {...config} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ModelBills;
|
||||
@ -1,291 +0,0 @@
|
||||
import PageTools from '@/components/page-tools';
|
||||
import StatusTag from '@/components/status-tag';
|
||||
import useTableRowSelection from '@/hooks/use-table-row-selection';
|
||||
import { NodeItem } from '@/pages/resources/config/types';
|
||||
import { Progress, Select, Space, Table } from 'antd';
|
||||
import _ from 'lodash';
|
||||
import { memo, useMemo, useState } from 'react';
|
||||
const { Column } = Table;
|
||||
|
||||
const models = [
|
||||
{ value: 'llama3:latest', label: 'llama3:latest' },
|
||||
{ value: 'wangfuyun/AnimateLCM', label: 'wangfuyun/AnimateLCM' },
|
||||
{ value: 'Revanthraja/Text_to_Vision', label: 'Revanthraja/Text_to_Vision' }
|
||||
];
|
||||
const dataSource: NodeItem[] = [
|
||||
{
|
||||
id: 1,
|
||||
name: 'bj-web-service-1',
|
||||
address: '183.14.31.136',
|
||||
hostname: 'bj-web-service-1',
|
||||
labels: {},
|
||||
resources: {
|
||||
capacity: {
|
||||
cpu: 4,
|
||||
gpu: 2,
|
||||
memory: '64 GiB',
|
||||
gram: '24 Gib'
|
||||
},
|
||||
allocable: {
|
||||
cpu: 2.5,
|
||||
gpu: 1.6,
|
||||
memory: '64',
|
||||
gram: '24 Gib'
|
||||
}
|
||||
},
|
||||
state: 'ACTIVE'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'bj-db-service-2',
|
||||
address: '172.24.1.36',
|
||||
hostname: 'bj-db-service-2',
|
||||
labels: {},
|
||||
resources: {
|
||||
capacity: {
|
||||
cpu: 4,
|
||||
gpu: 2,
|
||||
memory: '64 GiB',
|
||||
gram: '24 Gib'
|
||||
},
|
||||
allocable: {
|
||||
cpu: 2,
|
||||
gpu: 1.5,
|
||||
memory: '32 GiB',
|
||||
gram: '12 Gib'
|
||||
}
|
||||
},
|
||||
state: 'ACTIVE'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'guangzhou-computed-node-2',
|
||||
address: '170.10.2.10',
|
||||
hostname: 'guangzhou-computed-node-2',
|
||||
labels: {},
|
||||
resources: {
|
||||
capacity: {
|
||||
cpu: 8,
|
||||
gpu: 4,
|
||||
memory: '64 GiB',
|
||||
gram: '24 Gib'
|
||||
},
|
||||
allocable: {
|
||||
cpu: 2,
|
||||
gpu: 1.5,
|
||||
memory: '32 GiB',
|
||||
gram: '12 Gib'
|
||||
}
|
||||
},
|
||||
state: 'ACTIVE'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: 'hangzhou-cache-node-1',
|
||||
address: '115.2.21.10',
|
||||
hostname: 'hangzhou-cache-node-1',
|
||||
labels: {},
|
||||
resources: {
|
||||
capacity: {
|
||||
cpu: 8,
|
||||
gpu: 4,
|
||||
memory: '64 GiB',
|
||||
gram: '24 Gib'
|
||||
},
|
||||
allocable: {
|
||||
cpu: 4,
|
||||
gpu: 2.5,
|
||||
memory: '40 GiB',
|
||||
gram: '16 Gib'
|
||||
}
|
||||
},
|
||||
state: 'ACTIVE'
|
||||
}
|
||||
];
|
||||
|
||||
const ModelNodes: React.FC = () => {
|
||||
const rowSelection = useTableRowSelection();
|
||||
|
||||
const [selectName, setSelectName] = useState<string>('llama3:latest');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [queryParams, setQueryParams] = useState({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
name: ''
|
||||
});
|
||||
const handleShowSizeChange = (current: number, size: number) => {
|
||||
console.log(current, size);
|
||||
};
|
||||
|
||||
const handlePageChange = (page: number, pageSize: number | undefined) => {
|
||||
console.log(page, pageSize);
|
||||
};
|
||||
|
||||
const handleTableChange = (pagination: any, filters: any, sorter: any) => {
|
||||
// console.log('handleTableChange=======', pagination, filters, sorter);
|
||||
};
|
||||
|
||||
const fetchData = async () => {
|
||||
console.log('fetchData');
|
||||
};
|
||||
const handleSearch = (e: any) => {
|
||||
fetchData();
|
||||
};
|
||||
|
||||
const handleNameChange = (value: string) => {
|
||||
setSelectName(value);
|
||||
setQueryParams({
|
||||
...queryParams,
|
||||
name: value
|
||||
});
|
||||
};
|
||||
|
||||
const RenderProgress = memo(
|
||||
(props: { record: NodeItem; dataIndex: string }) => {
|
||||
const { record, dataIndex } = props;
|
||||
const value1 = useMemo(() => {
|
||||
let value = _.get(record, ['resources', 'allocable', dataIndex]);
|
||||
if (['gram', 'memory'].includes(dataIndex)) {
|
||||
value = _.toNumber(value.replace(/GiB|Gib/, ''));
|
||||
}
|
||||
return value;
|
||||
}, [record, dataIndex]);
|
||||
|
||||
const value2 = useMemo(() => {
|
||||
let value = _.get(record, ['resources', 'capacity', dataIndex]);
|
||||
if (['gram', 'memory'].includes(dataIndex)) {
|
||||
value = _.toNumber(value.replace(/GiB|Gib/, ''));
|
||||
}
|
||||
return value;
|
||||
}, [record, dataIndex]);
|
||||
|
||||
if (!value1 || !value2) {
|
||||
return <Progress percent={0} strokeColor="var(--ant-color-primary)" />;
|
||||
}
|
||||
const percent = _.round(value1 / value2, 2) * 100;
|
||||
const strokeColor = useMemo(() => {
|
||||
if (percent <= 50) {
|
||||
return 'var(--ant-color-primary)';
|
||||
}
|
||||
if (percent <= 80) {
|
||||
return 'var(--ant-color-warning)';
|
||||
}
|
||||
return 'var(--ant-color-error)';
|
||||
}, [percent]);
|
||||
return (
|
||||
<Progress
|
||||
steps={5}
|
||||
format={() => {
|
||||
return (
|
||||
<span style={{ color: 'var(--ant-color-text)' }}>{percent}%</span>
|
||||
);
|
||||
}}
|
||||
percent={percent}
|
||||
strokeColor={strokeColor}
|
||||
/>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
<PageTools
|
||||
marginBottom={10}
|
||||
marginTop={0}
|
||||
left={<span>Nodes by model</span>}
|
||||
right={
|
||||
<Space>
|
||||
<Select
|
||||
size="middle"
|
||||
options={models}
|
||||
value={selectName}
|
||||
style={{ width: 300, height: 34 }}
|
||||
onChange={handleNameChange}
|
||||
></Select>
|
||||
</Space>
|
||||
}
|
||||
></PageTools>
|
||||
<Table
|
||||
dataSource={dataSource}
|
||||
rowKey={(record) => record.id}
|
||||
loading={loading}
|
||||
onChange={handleTableChange}
|
||||
pagination={false}
|
||||
>
|
||||
<Column title="Host Name" dataIndex="hostname" key="hostname" />
|
||||
<Column
|
||||
title="State"
|
||||
dataIndex="state"
|
||||
key="state"
|
||||
render={(text, record) => {
|
||||
return (
|
||||
<StatusTag
|
||||
statusValue={{
|
||||
status: 'success',
|
||||
text: 'ALIVE'
|
||||
}}
|
||||
></StatusTag>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Column title="IP / PID" dataIndex="address" key="address" />
|
||||
<Column
|
||||
title="CPU"
|
||||
dataIndex="CPU"
|
||||
key="CPU"
|
||||
render={(text, record: NodeItem) => {
|
||||
return (
|
||||
<RenderProgress
|
||||
record={record}
|
||||
dataIndex="cpu"
|
||||
></RenderProgress>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title="Memory"
|
||||
dataIndex="memory"
|
||||
key="Memory"
|
||||
render={(text, record: NodeItem) => {
|
||||
return (
|
||||
<RenderProgress
|
||||
record={record}
|
||||
dataIndex="memory"
|
||||
></RenderProgress>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title="GPU"
|
||||
dataIndex="GPU"
|
||||
key="GPU"
|
||||
render={(text, record: NodeItem) => {
|
||||
return (
|
||||
<RenderProgress
|
||||
record={record}
|
||||
dataIndex="gpu"
|
||||
></RenderProgress>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title="GRAM"
|
||||
dataIndex="GRAM"
|
||||
key="GRAM"
|
||||
render={(text, record: NodeItem) => {
|
||||
return (
|
||||
<RenderProgress
|
||||
record={record}
|
||||
dataIndex="gram"
|
||||
></RenderProgress>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</Table>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ModelNodes;
|
||||
@ -1,3 +0,0 @@
|
||||
.container {
|
||||
padding-top: 80px;
|
||||
}
|
||||
@ -1,18 +0,0 @@
|
||||
import Guide from '@/components/Guide';
|
||||
import { trim } from '@/utils/format';
|
||||
import { PageContainer } from '@ant-design/pro-components';
|
||||
import { useModel } from '@umijs/max';
|
||||
import styles from './index.less';
|
||||
|
||||
const HomePage: React.FC = () => {
|
||||
const { name } = useModel('global');
|
||||
return (
|
||||
<PageContainer ghost>
|
||||
<div className={styles.container}>
|
||||
<Guide name={trim(name)} />
|
||||
</div>
|
||||
</PageContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default HomePage;
|
||||
Loading…
Reference in new issue