fix: list pagination
This commit is contained in:
jialin
@@ -1,10 +1,4 @@
|
||||
export default [
|
||||
// {
|
||||
// path: '/',
|
||||
// key: 'root',
|
||||
// icon: 'home',
|
||||
// redirect: ''
|
||||
// },
|
||||
{
|
||||
name: 'dashboard',
|
||||
path: '/dashboard',
|
||||
|
||||
+3
-3
@@ -16,7 +16,7 @@
|
||||
"@huggingface/hub": "^0.15.1",
|
||||
"@monaco-editor/react": "^4.6.0",
|
||||
"@types/lodash": "^4.17.4",
|
||||
"@umijs/max": "^4.2.1",
|
||||
"@umijs/max": "^4.2.11",
|
||||
"ansi-to-html": "^0.7.2",
|
||||
"antd": "^5.18.3",
|
||||
"antd-style": "^3.6.2",
|
||||
@@ -31,8 +31,8 @@
|
||||
"lodash": "^4.17.21",
|
||||
"numeral": "^2.0.6",
|
||||
"query-string": "^9.0.0",
|
||||
"react": "~18.2.0",
|
||||
"react-dom": "~18.2.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-hotkeys-hook": "^4.5.0",
|
||||
"umi-presets-pro": "^2.0.3"
|
||||
},
|
||||
|
||||
Generated
+2392
-908
File diff suppressed because it is too large
Load Diff
+3
-3
@@ -1,11 +1,11 @@
|
||||
import { GPUStackVersionAtom } from '@/atoms/user';
|
||||
import { setAtomStorage } from '@/atoms/utils';
|
||||
import { RequestConfig, history } from '@umijs/max';
|
||||
import { requestConfig } from './request-config';
|
||||
import { requestConfig } from '@/request-config';
|
||||
import {
|
||||
queryCurrentUserState,
|
||||
queryVersionInfo
|
||||
} from './services/profile/apis';
|
||||
} from '@/services/profile/apis';
|
||||
import { RequestConfig, history } from '@umijs/max';
|
||||
|
||||
const loginPath = '/login';
|
||||
let currentUserInfo: any = {};
|
||||
|
||||
@@ -1,4 +0,0 @@
|
||||
.title {
|
||||
margin: 0 auto;
|
||||
font-weight: 200;
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
import { Layout, Row, Typography } from 'antd';
|
||||
import React from 'react';
|
||||
import styles from './Guide.less';
|
||||
|
||||
interface Props {
|
||||
name: string;
|
||||
}
|
||||
|
||||
// 脚手架示例组件
|
||||
const Guide: React.FC<Props> = (props) => {
|
||||
const { name } = props;
|
||||
return (
|
||||
<Layout>
|
||||
<Row>
|
||||
<Typography.Title level={3} className={styles.title}>
|
||||
欢迎使用 <strong>{name}</strong> ！
|
||||
</Typography.Title>
|
||||
</Row>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Guide;
|
||||
@@ -1,2 +0,0 @@
|
||||
import Guide from './Guide';
|
||||
export default Guide;
|
||||
@@ -1,7 +1,7 @@
|
||||
import { GPUStackVersionAtom } from '@/atoms/user';
|
||||
import { getAtomStorage } from '@/atoms/utils';
|
||||
import VersionInfo, { modalConfig } from '@/components/version-info';
|
||||
import externalLinks from '@/config/external-links';
|
||||
import externalLinks from '@/constants/external-links';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Button, Modal, Space } from 'antd';
|
||||
import './index.less';
|
||||
|
||||
@@ -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,5 +1,14 @@
|
||||
import { RightOutlined } from '@ant-design/icons';
|
||||
import { Button, Checkbox, Col, Empty, Row, Spin } from 'antd';
|
||||
import {
|
||||
Button,
|
||||
Checkbox,
|
||||
Col,
|
||||
Empty,
|
||||
Pagination,
|
||||
Row,
|
||||
Spin,
|
||||
type PaginationProps
|
||||
} from 'antd';
|
||||
import _ from 'lodash';
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import TableHeader from './components/table-header';
|
||||
@@ -7,7 +16,9 @@ import TableRow from './components/table-row';
|
||||
import './styles/index.less';
|
||||
import { SealColumnProps, SealTableProps } from './types';
|
||||
|
||||
const SealTable: React.FC<SealTableProps> = (props) => {
|
||||
const SealTable: React.FC<SealTableProps & { pagination: PaginationProps }> = (
|
||||
props
|
||||
) => {
|
||||
const {
|
||||
children,
|
||||
rowKey,
|
||||
@@ -19,6 +30,7 @@ const SealTable: React.FC<SealTableProps> = (props) => {
|
||||
pollingChildren,
|
||||
watchChildren,
|
||||
rowSelection,
|
||||
pagination,
|
||||
renderChildren,
|
||||
loadChildren,
|
||||
loadChildrenAPI
|
||||
@@ -55,6 +67,15 @@ const SealTable: React.FC<SealTableProps> = (props) => {
|
||||
setIndeterminate(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePageChange = (page: number, pageSize: number) => {
|
||||
pagination?.onChange?.(page, pageSize);
|
||||
};
|
||||
|
||||
const handlePageSizeChange = (current: number, size: number) => {
|
||||
pagination?.onShowSizeChange?.(current, size);
|
||||
};
|
||||
|
||||
const renderHeaderPrefix = () => {
|
||||
if (expandable && rowSelection) {
|
||||
return (
|
||||
@@ -153,16 +174,27 @@ const SealTable: React.FC<SealTableProps> = (props) => {
|
||||
);
|
||||
};
|
||||
return (
|
||||
<div className="seal-table-container">
|
||||
{renderHeader()}
|
||||
{loading ? (
|
||||
<div className="spin">
|
||||
<Spin></Spin>
|
||||
<>
|
||||
<div className="seal-table-container">
|
||||
{renderHeader()}
|
||||
{loading ? (
|
||||
<div className="spin">
|
||||
<Spin></Spin>
|
||||
</div>
|
||||
) : (
|
||||
renderContent()
|
||||
)}
|
||||
</div>
|
||||
{pagination && (
|
||||
<div className="pagination-wrapper">
|
||||
<Pagination
|
||||
{...pagination}
|
||||
onChange={handlePageChange}
|
||||
onShowSizeChange={handlePageSizeChange}
|
||||
></Pagination>
|
||||
</div>
|
||||
) : (
|
||||
renderContent()
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,3 +1,9 @@
|
||||
.pagination-wrapper {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin: var(--ant-margin) 0;
|
||||
}
|
||||
|
||||
.seal-table-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@@ -1,28 +0,0 @@
|
||||
import { ProLayoutProps } from '@ant-design/pro-components';
|
||||
|
||||
/**
|
||||
* @name
|
||||
*/
|
||||
const Settings: ProLayoutProps & {
|
||||
pwa?: boolean;
|
||||
logo?: string;
|
||||
} = {
|
||||
navTheme: 'light',
|
||||
// 拂晓蓝
|
||||
colorPrimary: '#2fbf85',
|
||||
layout: 'mix',
|
||||
contentWidth: 'Fluid',
|
||||
fixedHeader: false,
|
||||
fixSiderbar: true,
|
||||
colorWeak: false,
|
||||
title: 'seal',
|
||||
pwa: false,
|
||||
logo: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg',
|
||||
iconfontUrl: '',
|
||||
token: {
|
||||
// 参见ts声明，demo 见文档，通过token 修改样式
|
||||
//https://procomponents.ant.design/components/layout#%E9%80%9A%E8%BF%87-token-%E4%BF%AE%E6%94%B9%E6%A0%B7%E5%BC%8F
|
||||
},
|
||||
};
|
||||
|
||||
export default Settings;
|
||||
@@ -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,7 +1,7 @@
|
||||
// @ts-nocheck
|
||||
|
||||
import avatarImg from '@/assets/images/avatar.png';
|
||||
import externalLinks from '@/config/external-links';
|
||||
import externalLinks from '@/constants/external-links';
|
||||
import langConfigMap from '@/locales/lang-config-map';
|
||||
import {
|
||||
DiscordOutlined,
|
||||
|
||||
@@ -35,5 +35,5 @@ export function renderMenuIcon(icon: string) {
|
||||
icons[upperIcon] || icons[upperIcon + 'Outlined']
|
||||
);
|
||||
}
|
||||
return null;
|
||||
return <span></span>;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import CopyButton from '@/components/copy-button';
|
||||
import PageTools from '@/components/page-tools';
|
||||
import { PageAction } from '@/config';
|
||||
import type { PageActionType } from '@/config/types';
|
||||
@@ -8,19 +7,10 @@ import { handleBatchRequest } from '@/utils';
|
||||
import { DeleteOutlined, PlusOutlined, SyncOutlined } from '@ant-design/icons';
|
||||
import { PageContainer } from '@ant-design/pro-components';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import {
|
||||
Button,
|
||||
Input,
|
||||
Modal,
|
||||
Space,
|
||||
Table,
|
||||
Tag,
|
||||
Tooltip,
|
||||
message
|
||||
} from 'antd';
|
||||
import { Button, Input, Modal, Space, Table, Tooltip, message } from 'antd';
|
||||
import dayjs from 'dayjs';
|
||||
import _ from 'lodash';
|
||||
import { StrictMode, useEffect, useState } from 'react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { deleteApisKey, queryApisKeysList } from './apis';
|
||||
import AddAPIKeyModal from './components/add-apikey';
|
||||
import { ListItem } from './config/types';
|
||||
@@ -38,26 +28,18 @@ const Models: React.FC = () => {
|
||||
const [openAddModal, setOpenAddModal] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [action, setAction] = useState<PageActionType>(PageAction.CREATE);
|
||||
const [title, setTitle] = useState<string>('');
|
||||
const [queryParams, setQueryParams] = useState({
|
||||
page: 1,
|
||||
perPage: 10,
|
||||
search: ''
|
||||
});
|
||||
|
||||
const handleShowSizeChange = (page: number, size: number) => {
|
||||
console.log(page, size);
|
||||
const handlePageChange = (page: number, pageSize: number) => {
|
||||
console.log('handlePageChange====', page, pageSize);
|
||||
setQueryParams({
|
||||
...queryParams,
|
||||
perPage: size
|
||||
});
|
||||
};
|
||||
|
||||
const handlePageChange = (page: number, pageSize: number | undefined) => {
|
||||
console.log(page, pageSize);
|
||||
setQueryParams({
|
||||
...queryParams,
|
||||
page: page
|
||||
page: page,
|
||||
perPage: pageSize || 10
|
||||
});
|
||||
};
|
||||
|
||||
@@ -151,35 +133,12 @@ const Models: React.FC = () => {
|
||||
});
|
||||
};
|
||||
|
||||
const renderSecrectKey = (text: string, record: ListItem) => {
|
||||
const { value } = record;
|
||||
|
||||
return (
|
||||
<Space direction="vertical">
|
||||
<span>{text}</span>
|
||||
{value && (
|
||||
<span>
|
||||
<Tag color="error" style={{ padding: '10px 12px' }}>
|
||||
{intl.formatMessage({ id: 'apikeys.table.save.tips' })}
|
||||
</Tag>
|
||||
<span className="flex-center">
|
||||
<Tooltip
|
||||
title={value}
|
||||
>{`${value?.slice(0, 8)}...${value?.slice(-8, -1)}`}</Tooltip>
|
||||
<CopyButton text={value}></CopyButton>
|
||||
</span>
|
||||
</span>
|
||||
)}
|
||||
</Space>
|
||||
);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, [queryParams]);
|
||||
|
||||
return (
|
||||
<StrictMode>
|
||||
<>
|
||||
<PageContainer
|
||||
ghost
|
||||
header={{
|
||||
@@ -236,8 +195,7 @@ const Models: React.FC = () => {
|
||||
pageSize: queryParams.perPage,
|
||||
current: queryParams.page,
|
||||
total: total,
|
||||
hideOnSinglePage: true,
|
||||
onShowSizeChange: handleShowSizeChange,
|
||||
hideOnSinglePage: queryParams.perPage === 10,
|
||||
onChange: handlePageChange
|
||||
}}
|
||||
>
|
||||
@@ -308,7 +266,7 @@ const Models: React.FC = () => {
|
||||
onCancel={handleModalCancel}
|
||||
onOk={handleModalOk}
|
||||
></AddAPIKeyModal>
|
||||
</StrictMode>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -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,19 +1,19 @@
|
||||
import { PageContainer } from '@ant-design/pro-components';
|
||||
import { Spin } from 'antd';
|
||||
import { StrictMode, memo, useState } from 'react';
|
||||
import { memo, useState } from 'react';
|
||||
import DashboardInner from './components/dahboard-inner';
|
||||
|
||||
const Dashboard: React.FC = () => {
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
return (
|
||||
<StrictMode>
|
||||
<>
|
||||
<PageContainer ghost extra={[]}>
|
||||
<Spin spinning={loading}>
|
||||
<DashboardInner setLoading={setLoading} />
|
||||
</Spin>
|
||||
</PageContainer>
|
||||
</StrictMode>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -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;
|
||||
@@ -40,7 +40,7 @@ interface ModelsProps {
|
||||
handleSearch: (e: any) => void;
|
||||
handleNameChange: (e: any) => void;
|
||||
fetchData: () => Promise<any>;
|
||||
handleShowSizeChange: (page: number, size: number) => void;
|
||||
handleShowSizeChange?: (page: number, size: number) => void;
|
||||
handlePageChange: (page: number, pageSize: number | undefined) => void;
|
||||
createModelsChunkRequest: () => void;
|
||||
queryParams: {
|
||||
@@ -57,7 +57,6 @@ const Models: React.FC<ModelsProps> = ({
|
||||
dataSource,
|
||||
handleNameChange,
|
||||
handleSearch,
|
||||
handleShowSizeChange,
|
||||
handlePageChange,
|
||||
queryParams,
|
||||
loading,
|
||||
@@ -338,8 +337,7 @@ const Models: React.FC<ModelsProps> = ({
|
||||
pageSize: queryParams.perPage,
|
||||
current: queryParams.page,
|
||||
total: total,
|
||||
hideOnSinglePage: true,
|
||||
onShowSizeChange: handleShowSizeChange,
|
||||
hideOnSinglePage: queryParams.perPage === 10,
|
||||
onChange: handlePageChange
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -4,7 +4,7 @@ import useSetChunkRequest, {
|
||||
} from '@/hooks/use-chunk-request';
|
||||
import useUpdateChunkedList from '@/hooks/use-update-chunk-list';
|
||||
import _ from 'lodash';
|
||||
import { StrictMode, useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { MODELS_API, MODEL_INSTANCE_API, queryModelsList } from './apis';
|
||||
import TableList from './components/table-list';
|
||||
import { ListItem } from './config/types';
|
||||
@@ -38,13 +38,6 @@ const Models: React.FC = () => {
|
||||
dataList: dataSource,
|
||||
setDataList: setDataSource
|
||||
});
|
||||
const {
|
||||
updateChunkedList: updateInstanceChunkList,
|
||||
cacheDataListRef: cacheInstanceDataListRef
|
||||
} = useUpdateChunkedList({
|
||||
dataList: modelInstances,
|
||||
setDataList: setModelInstances
|
||||
});
|
||||
|
||||
const fetchData = useCallback(async () => {
|
||||
axiosToken?.cancel?.();
|
||||
@@ -57,7 +50,6 @@ const Models: React.FC = () => {
|
||||
const res: any = await queryModelsList(params, {
|
||||
cancelToken: axiosToken.token
|
||||
});
|
||||
console.log('res=======', res);
|
||||
setDataSource(res.items);
|
||||
setTotal(res.pagination.total);
|
||||
} catch (error) {
|
||||
@@ -69,41 +61,25 @@ const Models: React.FC = () => {
|
||||
}
|
||||
}, [queryParams]);
|
||||
|
||||
const handleShowSizeChange = useCallback(
|
||||
(page: number, size: number) => {
|
||||
console.log(page, size);
|
||||
setQueryParams({
|
||||
...queryParams,
|
||||
perPage: size
|
||||
});
|
||||
},
|
||||
[queryParams]
|
||||
);
|
||||
|
||||
const handlePageChange = useCallback(
|
||||
(page: number, pageSize: number | undefined) => {
|
||||
console.log(page, pageSize);
|
||||
setQueryParams({
|
||||
...queryParams,
|
||||
page: page
|
||||
page: page,
|
||||
perPage: pageSize || 10
|
||||
});
|
||||
},
|
||||
[queryParams]
|
||||
);
|
||||
|
||||
const updateHandler = (list: any) => {
|
||||
console.log('updateHandler=====', list);
|
||||
_.each(list, (data: any) => {
|
||||
updateChunkedList(data, dataSourceRef.current);
|
||||
});
|
||||
};
|
||||
|
||||
const updateInstanceHandler = (list: any) => {
|
||||
console.log('updateInstanceHandler=====', list);
|
||||
setModelInstances(list);
|
||||
// _.each(list, (data: any) => {
|
||||
// updateInstanceChunkList(data);
|
||||
// });
|
||||
};
|
||||
|
||||
const createModelsChunkRequest = () => {
|
||||
@@ -156,7 +132,6 @@ const Models: React.FC = () => {
|
||||
chunkRequedtRef.current?.current?.cancel?.();
|
||||
cacheDataListRef.current = [];
|
||||
chunkInstanceRequedtRef.current?.current?.cancel?.();
|
||||
cacheInstanceDataListRef.current = [];
|
||||
};
|
||||
}, [firstLoad]);
|
||||
|
||||
@@ -168,26 +143,23 @@ const Models: React.FC = () => {
|
||||
}, [queryParams]);
|
||||
|
||||
return (
|
||||
<StrictMode>
|
||||
<TableContext.Provider
|
||||
value={{
|
||||
allChildren: modelInstances
|
||||
}}
|
||||
>
|
||||
<TableList
|
||||
dataSource={dataSource}
|
||||
handleNameChange={handleNameChange}
|
||||
handleSearch={handleSearch}
|
||||
handleShowSizeChange={handleShowSizeChange}
|
||||
handlePageChange={handlePageChange}
|
||||
createModelsChunkRequest={createModelsChunkRequest}
|
||||
queryParams={queryParams}
|
||||
loading={loading}
|
||||
total={total}
|
||||
fetchData={fetchData}
|
||||
></TableList>
|
||||
</TableContext.Provider>
|
||||
</StrictMode>
|
||||
<TableContext.Provider
|
||||
value={{
|
||||
allChildren: modelInstances
|
||||
}}
|
||||
>
|
||||
<TableList
|
||||
dataSource={dataSource}
|
||||
handleNameChange={handleNameChange}
|
||||
handleSearch={handleSearch}
|
||||
handlePageChange={handlePageChange}
|
||||
createModelsChunkRequest={createModelsChunkRequest}
|
||||
queryParams={queryParams}
|
||||
loading={loading}
|
||||
total={total}
|
||||
fetchData={fetchData}
|
||||
></TableList>
|
||||
</TableContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -203,7 +203,7 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
|
||||
>
|
||||
<Slider
|
||||
defaultValue={1024}
|
||||
max={16384}
|
||||
max={2048}
|
||||
step={1}
|
||||
style={{ marginBottom: 0, marginTop: 16 }}
|
||||
tooltip={{ open: false }}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { PageContainer } from '@ant-design/pro-components';
|
||||
import { useSearchParams } from '@umijs/max';
|
||||
import { Divider } from 'antd';
|
||||
import { StrictMode, useState } from 'react';
|
||||
import { useState } from 'react';
|
||||
import GroundLeft from './components/ground-left';
|
||||
import ParamsSettings from './components/params-settings';
|
||||
import './style/play-ground.less';
|
||||
@@ -12,7 +12,7 @@ const Playground: React.FC = () => {
|
||||
const [params, setParams] = useState({});
|
||||
|
||||
return (
|
||||
<StrictMode>
|
||||
<>
|
||||
<PageContainer ghost extra={[]}>
|
||||
<div className="play-ground">
|
||||
<div className="chat">
|
||||
@@ -27,7 +27,7 @@ const Playground: React.FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
</PageContainer>
|
||||
</StrictMode>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -24,18 +24,13 @@ const GPUList: React.FC = () => {
|
||||
perPage: 10,
|
||||
search: ''
|
||||
});
|
||||
const handleShowSizeChange = (current: number, size: number) => {
|
||||
setQueryParams({
|
||||
...queryParams,
|
||||
perPage: size
|
||||
});
|
||||
};
|
||||
|
||||
const handlePageChange = (page: number, perPage: number | undefined) => {
|
||||
console.log(page, perPage);
|
||||
setQueryParams({
|
||||
...queryParams,
|
||||
page: page
|
||||
page: page,
|
||||
perPage: perPage || 10
|
||||
});
|
||||
};
|
||||
|
||||
@@ -109,8 +104,7 @@ const GPUList: React.FC = () => {
|
||||
pageSize: queryParams.perPage,
|
||||
current: queryParams.page,
|
||||
total: total,
|
||||
hideOnSinglePage: true,
|
||||
onShowSizeChange: handleShowSizeChange,
|
||||
hideOnSinglePage: queryParams.perPage === 10,
|
||||
onChange: handlePageChange
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -50,7 +50,8 @@ const Resources: React.FC = () => {
|
||||
const handleShowSizeChange = (current: number, size: number) => {
|
||||
setQueryParams({
|
||||
...queryParams,
|
||||
perPage: size
|
||||
page: current,
|
||||
perPage: size || 10
|
||||
});
|
||||
};
|
||||
|
||||
@@ -58,7 +59,8 @@ const Resources: React.FC = () => {
|
||||
console.log(page, perPage);
|
||||
setQueryParams({
|
||||
...queryParams,
|
||||
page: page
|
||||
page: page,
|
||||
perPage: perPage || 10
|
||||
});
|
||||
};
|
||||
|
||||
@@ -199,8 +201,7 @@ const Resources: React.FC = () => {
|
||||
pageSize: queryParams.perPage,
|
||||
current: queryParams.page,
|
||||
total: total,
|
||||
hideOnSinglePage: true,
|
||||
onShowSizeChange: handleShowSizeChange,
|
||||
hideOnSinglePage: queryParams.perPage === 10,
|
||||
onChange: handlePageChange
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -2,7 +2,7 @@ import { PageContainer } from '@ant-design/pro-components';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import type { TabsProps } from 'antd';
|
||||
import { Tabs } from 'antd';
|
||||
import { StrictMode, useState } from 'react';
|
||||
import { useState } from 'react';
|
||||
import GPUs from './components/gpus';
|
||||
import Workers from './components/workers';
|
||||
|
||||
@@ -29,7 +29,7 @@ const Resources = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<StrictMode>
|
||||
<>
|
||||
<PageContainer
|
||||
ghost
|
||||
header={{
|
||||
@@ -47,7 +47,7 @@ const Resources = () => {
|
||||
></Tabs>
|
||||
</div>
|
||||
</PageContainer>
|
||||
</StrictMode>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -18,7 +18,7 @@ import { useIntl } from '@umijs/max';
|
||||
import { Button, Input, Modal, Space, Table, message } from 'antd';
|
||||
import dayjs from 'dayjs';
|
||||
import _ from 'lodash';
|
||||
import { StrictMode, useEffect, useState } from 'react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { createUser, deleteUser, queryUsersList, updateUser } from './apis';
|
||||
import AddModal from './components/add-modal';
|
||||
import { FormData, ListItem } from './config/types';
|
||||
@@ -77,17 +77,11 @@ const Users: React.FC = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const handleShowSizeChange = (page: number, size: number) => {
|
||||
setQueryParams({
|
||||
...queryParams,
|
||||
perPage: size
|
||||
});
|
||||
};
|
||||
|
||||
const handlePageChange = (page: number, pageSize: number | undefined) => {
|
||||
console.log(page, pageSize);
|
||||
setQueryParams({
|
||||
...queryParams,
|
||||
perPage: pageSize || 10,
|
||||
page: page
|
||||
});
|
||||
};
|
||||
@@ -201,7 +195,7 @@ const Users: React.FC = () => {
|
||||
}, [queryParams]);
|
||||
|
||||
return (
|
||||
<StrictMode>
|
||||
<>
|
||||
<PageContainer
|
||||
ghost
|
||||
header={{
|
||||
@@ -258,8 +252,7 @@ const Users: React.FC = () => {
|
||||
pageSize: queryParams.perPage,
|
||||
current: queryParams.page,
|
||||
total: total,
|
||||
hideOnSinglePage: true,
|
||||
onShowSizeChange: handleShowSizeChange,
|
||||
hideOnSinglePage: queryParams.perPage === 10,
|
||||
onChange: handlePageChange
|
||||
}}
|
||||
>
|
||||
@@ -330,7 +323,7 @@ const Users: React.FC = () => {
|
||||
onCancel={handleModalCancel}
|
||||
onOk={handleModalOk}
|
||||
></AddModal>
|
||||
</StrictMode>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Vendored
+2
@@ -15,5 +15,7 @@ declare module 'numeral';
|
||||
declare module 'mockjs';
|
||||
declare module 'react-fittext';
|
||||
declare module 'lodash';
|
||||
declare module 'crypto-js';
|
||||
declare module 'has-ansi';
|
||||
|
||||
declare const REACT_APP_ENV: 'test' | 'dev' | 'pre' | false;
|
||||
|
||||
Reference in New Issue
Block a user