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

refactor: update scroll modal

Browse Source
This commit is contained in:
jialin
2025-09-16 11:26:17 +08:00
parent 29b74f85c5
commit 55b0a20a4a
17 changed files with 340 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/cluster-management/apis/index.ts
+114 -8
View File
@@ -1,24 +1,45 @@
import { request } from '@umijs/max';
import { FormData } from '../config/types';
import {
ClusterFormData,
ClusterListItem,
CredentialFormData,
CredentialListItem,
NodePoolFormData,
NodePoolListItem
} from '../config/types';
export const CREDENTIALS_API = '/credentials';
export const CLUSTERS_API = '/clusters';
export const WORKER_POOLS_API = '/worker-pools';
export const CLUSTER_TOKEN = 'registration_token';
// ===================== Credentials =====================
export async function queryCredentialList(params: Global.SearchParams) {
// return request<Global.PageResponse<ListItem>>(`${CREDENTIALS_API}`, {
// method: 'GET',
// params
// });
return request<Global.PageResponse<CredentialListItem>>(
`${CREDENTIALS_API}`,
{
method: 'GET',
params
}
);
}
export async function createCredential(params: { data: FormData }) {
export async function createCredential(params: { data: CredentialFormData }) {
return request(`${CREDENTIALS_API}`, {
method: 'POST',
data: params.data
});
}
export async function updateCredential(params: { data: FormData }) {
return request(`${CREDENTIALS_API}/${params.data.id}`, {
export async function updateCredential(params: {
id: number;
data: CredentialFormData;
}) {
return request(`${CREDENTIALS_API}/${params.id}`, {
method: 'PUT',
data: params.data
});
@@ -29,3 +50,88 @@ export async function deleteCredential(id: number) {
method: 'DELETE'
});
}
// ===================== Cluster =====================
export async function queryClusterList(params: Global.SearchParams) {
return request<Global.PageResponse<ClusterListItem>>(`${CLUSTERS_API}`, {
method: 'GET',
params
});
}
export async function createCluster(params: { data: ClusterFormData }) {
return request(`${CLUSTERS_API}`, {
method: 'POST',
data: params.data
});
}
export async function updateCluster(params: {
id: number;
data: ClusterFormData;
}) {
return request(`${CLUSTERS_API}/${params.id}`, {
method: 'PUT',
data: params.data
});
}
export async function deleteCluster(id: number) {
return request(`${CLUSTERS_API}/${id}`, {
method: 'DELETE'
});
}
export async function queryClusterDetail(id: number) {
return request(`${CLUSTERS_API}/${id}`, {
method: 'GET'
});
}
export async function queryClusterToken(id: number) {
return request(`${CLUSTERS_API}/${id}/${CLUSTER_TOKEN}`, {
method: 'GET'
});
}
// ===================== Worker Pools =====================
export async function queryWorkerPools(
clusterId: number,
params?: Global.SearchParams
) {
return request<Global.PageResponse<NodePoolListItem>>(
`${CLUSTERS_API}/${clusterId}/${WORKER_POOLS_API}`,
{
method: 'GET',
params
}
);
}
export async function createWorkerPool(
clusterId: number,
params: { data: NodePoolFormData }
) {
return request(`${CLUSTERS_API}/${clusterId}/${WORKER_POOLS_API}`, {
method: 'POST',
data: params.data
});
}
export async function updateWorkerPool(
clusterId: number,
params: { id: number; data: NodePoolFormData }
) {
return request(`/${WORKER_POOLS_API}/${params.id}`, {
method: 'PUT',
data: params.data
});
}
export async function deleteWorkerPool(clusterId: number, id: number) {
return request(`/${WORKER_POOLS_API}/${id}`, {
method: 'DELETE'
});
}
src/pages/cluster-management/components/add-cluster.tsx
-1
View File
@@ -59,7 +59,6 @@ const AddCluster: React.FC<AddModalProps> = ({
maskClosable={false}
keyboard={false}
width={600}
styles={{}}
footer={
<ModalFooter onOk={handleSubmit} onCancel={onCancel}></ModalFooter>
}
src/pages/cluster-management/components/add-credential.tsx
-1
View File
@@ -45,7 +45,6 @@ const AddModal: React.FC<AddModalProps> = ({
maskClosable={false}
keyboard={false}
width={600}
styles={{}}
footer={
<ModalFooter
onOk={handleSumit}
src/pages/cluster-management/components/add-pool.tsx
+7 -16
View File
@@ -1,12 +1,11 @@
import LabelSelector from '@/components/label-selector';
import ModalFooter from '@/components/modal-footer';
import GSDrawer from '@/components/scroller-modal/gs-drawer';
import ScrollerModal from '@/components/scroller-modal';
import SealInputNumber from '@/components/seal-form/input-number';
import SealInput from '@/components/seal-form/seal-input';
import { PageActionType } from '@/config/types';
import { CloseOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Button, Form } from 'antd';
import { Form } from 'antd';
import _ from 'lodash';
import React from 'react';
import {
@@ -45,23 +44,15 @@ const AddCluster: React.FC<AddModalProps> = ({
};
return (
<GSDrawer
title={
<div className="flex-between flex-center">
<span>{title}</span>
<Button type="text" size="small" onClick={handleCancel}>
<CloseOutlined></CloseOutlined>
</Button>
</div>
}
<ScrollerModal
title={title}
open={open}
onClose={onCancel}
onCancel={handleCancel}
destroyOnClose={true}
closeIcon={false}
closeIcon={true}
maskClosable={false}
keyboard={false}
width={600}
styles={{}}
footer={
<ModalFooter onOk={handleSumit} onCancel={onCancel}></ModalFooter>
}
@@ -179,7 +170,7 @@ const AddCluster: React.FC<AddModalProps> = ({
></LabelSelector>
</Form.Item>
</Form>
</GSDrawer>
</ScrollerModal>
);
};
src/pages/cluster-management/components/cluster-item.tsx
+58 -9
View File
@@ -17,7 +17,7 @@ import {
ProviderLabelMap,
ProviderValueMap
} from '../config';
import { ClusterListItem as ListItem } from '../config/types';
import { ClusterListItem as ListItem, NodePoolListItem } from '../config/types';
import WorkerPools from './worker-pools';
const CollapseTitle = styled.div`
@@ -43,6 +43,7 @@ const Content = styled.div`
const CardWrapper = styled(ACard)`
text-align: center;
box-shadow: none;
flex: 1;
.ant-card {
box-shadow: none;
}
@@ -64,6 +65,12 @@ const CardWrapper = styled(ACard)`
}
`;
const CardBox = styled.div`
display: flex;
gap: 16px;
flex: 0.5;
`;
const actionItems = [
{
key: 'edit',
@@ -137,15 +144,36 @@ interface CardProps {
onSelect?: (key: string, row: ListItem) => void;
}
const gaugeConfig = {
radius: '100%',
progress: {
show: true,
roundCap: false,
width: 8
},
axisLine: {
roundCap: false,
lineStyle: {
width: 8,
color: [
[0.5, 'rgba(84, 204, 152, 80%)'],
[0.8, 'rgba(250, 173, 20, 80%)'],
[1, 'rgba(255, 77, 79, 80%)']
]
}
}
};
const CardItem: React.FC<CardProps> = (props) => {
const { data, onSelect } = props;
const [show, setShow] = React.useState(false);
const handleOnSelect = (key: string) => {
console.log('Selected action:', key);
onSelect?.(key, data);
};
const handleOnAction = (action: string, record: NodePoolListItem) => {};
const actions = useMemo(() => {
return actionItems.filter((item) => {
if (item.provider) {
@@ -179,7 +207,7 @@ const CardItem: React.FC<CardProps> = (props) => {
</span>
</div>
<Content>
<div className="flex gap-16">
<CardBox>
<CardWrapper bordered={false}>
<div className="label">Workers</div>
<div className="value">1</div>
@@ -192,20 +220,40 @@ const CardItem: React.FC<CardProps> = (props) => {
<div className="label">Deployments</div>
<div className="value">2</div>
</CardWrapper>
</div>
</CardBox>
<div className="chart-wrapper">
<Row gutter={16} style={{ width: '100%' }}>
<Col span={6}>
<GaugeChart title="GPU Utilization" value={85} height={160} />
<GaugeChart
title="GPU Utilization"
value={85}
height={160}
gaugeConfig={gaugeConfig}
/>
</Col>
<Col span={6}>
<GaugeChart title="CPU Utilization" value={50} height={160} />
<GaugeChart
title="CPU Utilization"
value={50}
height={160}
gaugeConfig={gaugeConfig}
/>
</Col>
<Col span={6}>
<GaugeChart title="RAM Utilization" value={70} height={160} />
<GaugeChart
title="RAM Utilization"
value={70}
height={160}
gaugeConfig={gaugeConfig}
/>
</Col>
<Col span={6}>
<GaugeChart title="VRAM Utilization" value={60} height={160} />
<GaugeChart
title="VRAM Utilization"
value={60}
height={160}
gaugeConfig={gaugeConfig}
/>
</Col>
</Row>
</div>
@@ -224,8 +272,9 @@ const CardItem: React.FC<CardProps> = (props) => {
</CollapseTitle>
<WorkerPools
provider={data.provider}
dataSource={data.worker_pools}
workerPools={data.worker_pools}
height={show ? 'auto' : 0}
onAction={handleOnAction}
/>
</>
)}
src/pages/cluster-management/components/register-cluster.tsx
+4 -13
View File
@@ -2,9 +2,8 @@ import ModalFooter from '@/components/modal-footer';
import ScrollerModal from '@/components/scroller-modal/index';
import SealInput from '@/components/seal-form/seal-input';
import { PageActionType } from '@/config/types';
import { CloseOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Button, Form } from 'antd';
import { Form } from 'antd';
import React from 'react';
import {
ClusterFormData as FormData,
@@ -45,22 +44,14 @@ const AddCluster: React.FC<AddModalProps> = ({
return (
<ScrollerModal
title={
<div className="flex-between flex-center">
<span>{title}</span>
<Button type="text" size="small" onClick={handleCancel}>
<CloseOutlined></CloseOutlined>
</Button>
</div>
}
title={title}
open={open}
onClose={onCancel}
onCancel={handleCancel}
destroyOnClose={true}
closeIcon={false}
closeIcon={true}
maskClosable={false}
keyboard={false}
width={600}
styles={{}}
footer={
<ModalFooter onOk={handleSubmit} onCancel={onCancel}></ModalFooter>
}
src/pages/cluster-management/components/worker-pools.tsx
+53 -7
View File
@@ -1,6 +1,11 @@
import DeleteModal from '@/components/delete-modal';
import DropdownButtons from '@/components/drop-down-buttons';
import useTableFetch from '@/hooks/use-table-fetch';
import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
import { Table } from 'antd';
import { useMemo } from 'react';
import { WORKER_POOLS_API, deleteWorkerPool, queryWorkerPools } from '../apis';
import { NodePoolListItem as ListItem } from '../config/types';
const actionItems = [
{
@@ -20,21 +25,50 @@ const actionItems = [
];
interface WorkerPoolsProps {
dataSource: any[];
workerPools: ListItem[];
loading?: boolean;
provider: string;
height?: string | number;
onAction?: (action: string, record: any) => void;
onAction?: (action: string, record: ListItem) => void;
}
const WorkerPools: React.FC<WorkerPoolsProps> = ({
dataSource,
workerPools,
loading = false,
provider,
height = 'auto',
onAction
}) => {
// dataindex: type, replicas, Batchsize, GPU, Memory, CPU, Storage, CreateTime, Operations
const {
dataSource,
rowSelection,
queryParams,
modalRef,
fetchData,
handleDelete,
handleDeleteBatch,
handlePageChange,
handleTableChange,
handleSearch,
handleNameChange,
handleQueryChange
} = useTableFetch<ListItem>({
fetchAPI: queryWorkerPools,
deleteAPI: deleteWorkerPool,
API: WORKER_POOLS_API,
watch: false,
contentForDelete: 'resources.modelfiles.modelfile'
});
const onSelect = (key: string, record: ListItem) => {
if (key === 'delete') {
handleDelete({ ...record, name: record.instance_type });
}
if (key === 'edit') {
onAction?.(key, record);
}
};
const columns = [
{
title: 'Type',
@@ -79,10 +113,10 @@ const WorkerPools: React.FC<WorkerPoolsProps> = ({
{
title: 'Operations',
key: 'operations',
render: (_, record) => (
render: (text: string, record: ListItem) => (
<DropdownButtons
items={actionItems}
onSelect={(key) => onAction?.(key, record)}
onSelect={(key) => onSelect?.(key, record)}
/>
)
}
@@ -90,6 +124,7 @@ const WorkerPools: React.FC<WorkerPoolsProps> = ({
// mock dataSource
const mockData = Array.from({ length: 3 }, (_, index) => ({
id: index + 1,
key: index,
type: `Type ${index + 1}`,
replicas: Math.floor(Math.random() * 10) + 1,
@@ -101,15 +136,26 @@ const WorkerPools: React.FC<WorkerPoolsProps> = ({
createTime: new Date().toLocaleDateString()
}));
const dataList = useMemo(() => {
if (workerPools && workerPools.length > 0) {
return workerPools;
}
if (dataSource.dataList && dataSource.dataList.length > 0) {
return dataSource.dataList;
}
return mockData;
}, [workerPools, dataSource.dataList]);
return (
<div style={{ height: height, overflow: 'hidden' }}>
<Table
dataSource={dataSource || mockData}
dataSource={dataList}
columns={columns}
loading={loading}
pagination={false}
rowKey="id"
/>
<DeleteModal ref={modalRef}></DeleteModal>
</div>
);
};
src/pages/cluster-management/config/types.ts
+2 -2
View File
@@ -1,4 +1,4 @@
export interface FormData {
export interface CredentialFormData {
name: string;
provider: string;
access_key: string;
@@ -7,7 +7,7 @@ export interface FormData {
id?: number;
}
export interface ListItem {
export interface CredentialListItem {
id: number;
name: string;
provider: string;