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

chore: resource list

Browse Source
This commit is contained in:
jialin
2024-06-03 19:09:43 +08:00
parent d2212fe949
commit c5b41900df
25 changed files with 827 additions and 303 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/Resources/components/gpus.tsx
+254
View File
@@ -0,0 +1,254 @@
import PageTools from '@/components/page-tools';
import StatusTag from '@/components/status-tag';
import useTableRowSelection from '@/hooks/use-table-row-selection';
import useTableSort from '@/hooks/use-table-sort';
import { SyncOutlined } from '@ant-design/icons';
import { Button, Input, Space, Table } from 'antd';
import { useState } from 'react';
import { NodeItem } from '../config/types';
import RenderProgress from './render-progress';
const { Column } = Table;
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 Models: React.FC = () => {
const rowSelection = useTableRowSelection();
const { sortOrder, setSortOrder } = useTableSort({
defaultSortOrder: 'descend'
});
const [total, setTotal] = useState(10);
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) => {
setSortOrder(sorter.order);
};
const fetchData = async () => {
console.log('fetchData');
};
const handleSearch = (e: any) => {
fetchData();
};
const handleNameChange = (e: any) => {
setQueryParams({
...queryParams,
name: e.target.value
});
};
return (
<>
<PageTools
marginBottom={10}
marginTop={10}
left={
<Space>
<Input
placeholder="按名称查询"
style={{ width: 300 }}
onChange={handleNameChange}
></Input>
<Button
type="text"
style={{ color: 'var(--ant-color-primary)' }}
onClick={handleSearch}
icon={<SyncOutlined></SyncOutlined>}
></Button>
</Space>
}
></PageTools>
<Table
dataSource={dataSource}
rowSelection={rowSelection}
loading={loading}
rowKey="id"
onChange={handleTableChange}
pagination={{
showSizeChanger: true,
pageSize: 10,
current: 2,
total: total,
hideOnSinglePage: true,
onShowSizeChange: handleShowSizeChange,
onChange: handlePageChange
}}
>
<Column title="GPU 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>
);
}}
/>
<Column
title="Operation"
key="operation"
render={(text, record) => {
return (
<Space>
<Button size="middle">Logs</Button>
</Space>
);
}}
/>
</Table>
</>
);
};
export default Models;
src/pages/Resources/components/nodes.tsx
+254
View File
@@ -0,0 +1,254 @@
import PageTools from '@/components/page-tools';
import StatusTag from '@/components/status-tag';
import useTableRowSelection from '@/hooks/use-table-row-selection';
import useTableSort from '@/hooks/use-table-sort';
import { SyncOutlined } from '@ant-design/icons';
import { Button, Input, Space, Table } from 'antd';
import { useState } from 'react';
import { NodeItem } from '../config/types';
import RenderProgress from './render-progress';
const { Column } = Table;
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 Models: React.FC = () => {
const rowSelection = useTableRowSelection();
const { sortOrder, setSortOrder } = useTableSort({
defaultSortOrder: 'descend'
});
const [total, setTotal] = useState(10);
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) => {
setSortOrder(sorter.order);
};
const fetchData = async () => {
console.log('fetchData');
};
const handleSearch = (e: any) => {
fetchData();
};
const handleNameChange = (e: any) => {
setQueryParams({
...queryParams,
name: e.target.value
});
};
return (
<>
<PageTools
marginBottom={10}
marginTop={10}
left={
<Space>
<Input
placeholder="按名称查询"
style={{ width: 300 }}
onChange={handleNameChange}
></Input>
<Button
type="text"
style={{ color: 'var(--ant-color-primary)' }}
onClick={handleSearch}
icon={<SyncOutlined></SyncOutlined>}
></Button>
</Space>
}
></PageTools>
<Table
dataSource={dataSource}
rowSelection={rowSelection}
loading={loading}
rowKey="id"
onChange={handleTableChange}
pagination={{
showSizeChanger: true,
pageSize: 10,
current: 2,
total: total,
hideOnSinglePage: true,
onShowSizeChange: handleShowSizeChange,
onChange: handlePageChange
}}
>
<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>
);
}}
/>
<Column
title="Operation"
key="operation"
render={(text, record) => {
return (
<Space>
<Button size="middle">Logs</Button>
</Space>
);
}}
/>
</Table>
</>
);
};
export default Models;
src/pages/nodes/components/render-progress.tsx → src/pages/Resources/components/render-progress.tsx
View File
src/pages/nodes/config/types.ts → src/pages/Resources/config/types.ts
View File
src/pages/Resources/index.tsx
+46
View File
@@ -0,0 +1,46 @@
import { PageContainer } from '@ant-design/pro-components';
import type { TabsProps } from 'antd';
import { Tabs } from 'antd';
import { useState } from 'react';
import GPUs from './components/gpus';
import Nodes from './components/nodes';
const items: TabsProps['items'] = [
{
key: 'nodes',
label: 'Nodes',
children: <Nodes />
},
{
key: 'gpus',
label: 'GPUs',
children: <GPUs />
}
];
const Resources = () => {
const [activeKey, setActiveKey] = useState('nodes');
const handleChangeTab = (key: string) => {
setActiveKey(key);
};
return (
<PageContainer
ghost
header={{
title: 'Resources'
}}
extra={[]}
>
<Tabs
type="card"
defaultActiveKey="nodes"
items={items}
accessKey={activeKey}
onChange={handleChangeTab}
></Tabs>
</PageContainer>
);
};
export default Resources;
src/pages/dashboard/components/model-nodes.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import PageTools from '@/components/page-tools';
import StatusTag from '@/components/status-tag';
import useTableRowSelection from '@/hooks/use-table-row-selection';
import { NodeItem } from '@/pages/nodes/config/types';
import { NodeItem } from '@/pages/resources/config/types';
import { Progress, Select, Space, Table } from 'antd';
import _ from 'lodash';
import { memo, useMemo, useState } from 'react';
src/pages/dashboard/index.tsx
+21 -7
View File
@@ -3,8 +3,6 @@ import PageTools from '@/components/page-tools';
import { PageContainer } from '@ant-design/pro-components';
import { Col, Row } from 'antd';
import GPUUtilization from './components/gpu-utilization';
import ModelBills from './components/model-bills';
import ModelNodes from './components/model-nodes';
import Overview from './components/over-view';
import UtilizationOvertime from './components/utilization-overtime';
@@ -17,10 +15,26 @@ const Dashboard: React.FC = () => {
<DividerLine></DividerLine>
<PageContainer ghost title={false}>
<Row gutter={20} style={{ marginTop: '0px' }}>
<Col span={17}>
<ModelNodes></ModelNodes>
<Col span={12}>
<PageTools
marginBottom={10}
marginTop={0}
left={
<div
style={{
height: '34px',
display: 'flex',
justifyContent: 'flex-start',
alignItems: 'center'
}}
>
VRAM
</div>
}
></PageTools>
<GPUUtilization></GPUUtilization>
</Col>
<Col span={7}>
<Col span={12}>
<PageTools
marginBottom={10}
marginTop={0}
@@ -40,12 +54,12 @@ const Dashboard: React.FC = () => {
</Col>
</Row>
</PageContainer>
<DividerLine></DividerLine>
{/* <DividerLine></DividerLine>
<PageContainer ghost title={false}>
<div style={{ marginTop: '0px' }}>
<ModelBills></ModelBills>
</div>
</PageContainer>
</PageContainer> */}
<DividerLine></DividerLine>
<PageContainer ghost title={false}>
<div style={{ marginTop: '0px' }}>
src/pages/llmodels/index.tsx
+13
View File
@@ -5,7 +5,9 @@ import useTableRowSelection from '@/hooks/use-table-row-selection';
import useTableSort from '@/hooks/use-table-sort';
import {
DeleteOutlined,
DownOutlined,
PlusOutlined,
RightOutlined,
SyncOutlined,
WechatWorkOutlined
} from '@ant-design/icons';
@@ -192,6 +194,17 @@ const Models: React.FC = () => {
onShowSizeChange: handleShowSizeChange,
onChange: handlePageChange
}}
expandable={{
expandIcon: ({ expanded, onExpand, record }) => {
return expanded ? (
<DownOutlined onClick={(e) => onExpand(record, e)} />
) : (
<RightOutlined onClick={(e) => onExpand(record, e)} />
);
},
expandedRowRender: (record) => <p style={{ margin: 0 }}>list</p>,
rowExpandable: (record) => record.name !== 'Not Expandable'
}}
>
<Column
title="Model Name"
src/pages/nodes/index.tsx
-271
View File
@@ -1,271 +0,0 @@
import PageTools from '@/components/page-tools';
import StatusTag from '@/components/status-tag';
import useTableRowSelection from '@/hooks/use-table-row-selection';
import useTableSort from '@/hooks/use-table-sort';
import { SyncOutlined } from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-components';
import { Button, Input, Space, Table } from 'antd';
import { useState } from 'react';
import RenderProgress from './components/render-progress';
import { NodeItem } from './config/types';
const { Column } = Table;
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 Models: React.FC = () => {
const rowSelection = useTableRowSelection();
const { sortOrder, setSortOrder } = useTableSort({
defaultSortOrder: 'descend'
});
const [total, setTotal] = useState(10);
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) => {
setSortOrder(sorter.order);
};
const fetchData = async () => {
console.log('fetchData');
};
const handleSearch = (e: any) => {
fetchData();
};
const handleNameChange = (e: any) => {
setQueryParams({
...queryParams,
name: e.target.value
});
};
return (
<>
<PageContainer
ghost
header={{
title: 'Nodes'
}}
extra={[]}
>
<PageTools
marginBottom={22}
left={
<Space>
<Input
placeholder="按名称查询"
style={{ width: 300 }}
onChange={handleNameChange}
></Input>
<Button
type="text"
style={{ color: 'var(--ant-color-primary)' }}
onClick={handleSearch}
icon={<SyncOutlined></SyncOutlined>}
></Button>
</Space>
}
></PageTools>
<Table
dataSource={dataSource}
rowSelection={rowSelection}
loading={loading}
rowKey="id"
onChange={handleTableChange}
pagination={{
showSizeChanger: true,
pageSize: 10,
current: 2,
total: total,
hideOnSinglePage: true,
onShowSizeChange: handleShowSizeChange,
onChange: handlePageChange
}}
>
<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>
);
}}
/>
<Column
title="Operation"
key="operation"
render={(text, record) => {
return (
<Space>
<Button size="middle">Logs</Button>
</Space>
);
}}
/>
</Table>
</PageContainer>
</>
);
};
export default Models;
src/pages/playground/components/ground-left.tsx
+29 -3
View File
@@ -1,7 +1,10 @@
import SealInput from '@/components/seal-form/seal-input';
import TransitionWrapper from '@/components/transition';
import { EyeInvisibleOutlined } from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-components';
import { Button, Input } from 'antd';
import { useState } from 'react';
import '../style/ground-left.less';
import '../style/system-message-wrap.less';
import ChatFooter from './chat-footer';
import MessageItem from './message-item';
import ReferenceParams from './reference-params';
@@ -18,9 +21,14 @@ const MessageList: React.FC = () => {
message: 'hello, nice to meet you!'
}
]);
const [systemMessage, setSystemMessage] = useState('');
const [show, setShow] = useState(false);
const [activeIndex, setActiveIndex] = useState(-1);
const handleSystemMessageChange = (e: any) => {
console.log('system message:', e.target.value);
setSystemMessage(e.target.value);
};
const handleNewMessage = () => {
console.log('new message');
messageList.push({
@@ -52,12 +60,30 @@ const MessageList: React.FC = () => {
setMessageList([...messageList]);
};
const renderLabel = () => {
return (
<div className="system-message-wrap ">
<span className="title">System</span>
<Button type="primary" size="small">
<EyeInvisibleOutlined />
</Button>
</div>
);
};
return (
<div className="ground-left">
<PageContainer title={false} className="message-list-wrap">
<div style={{ marginBottom: '40px' }}>
<SealInput.TextArea label="Message"></SealInput.TextArea>
<div style={{ marginBottom: 40 }}>
<TransitionWrapper header={renderLabel()} variant="filled">
<Input.TextArea
value={systemMessage}
style={{ minHeight: '0px' }}
variant="filled"
onChange={handleSystemMessageChange}
></Input.TextArea>
</TransitionWrapper>
</div>
<div>
{messageList.map((item, index) => {
return (
src/pages/playground/components/message-item.tsx
+1 -1
View File
@@ -57,7 +57,7 @@ const MessageContent: React.FC<{
<Button
type="text"
shape="circle"
style={{ color: 'var(--ant-color-primary' }}
style={{ color: 'var(--ant-color-primary)' }}
onClick={handleDelete}
icon={<MinusCircleOutlined />}
></Button>
src/pages/playground/style/message-item.less
+20
View File
@@ -1,16 +1,36 @@
.message-item {
position: relative;
display: flex;
justify-content: flex-start;
align-items: flex-start;
margin-bottom: 12px;
&:hover {
.delete-btn {
opacity: 1;
transition: all 0.3s var(--seal-transition-func);
}
}
.role-type {
margin-right: 12px;
background-color: var(--ant-button-text-hover-bg);
.ant-btn {
text-align: left;
width: 100px;
background-color: var(--ant-button-text-hover-bg);
height: 46px;
}
}
.message-content-input {
flex: 1;
.ant-input {
padding-right: 30px;
}
}
.delete-btn {
opacity: 0;
position: absolute;
top: 2px;
right: 0;
transition: all 0.3s var(--seal-transition-func);
}
}
src/pages/playground/style/system-message-wrap.less
+5
View File
@@ -0,0 +1,5 @@
.system-message-wrap {
display: flex;
justify-content: space-between;
align-items: center;
}