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

refactor: cluster list

Browse Source
This commit is contained in:
jialin
2025-09-16 11:26:17 +08:00
parent 8de272239e
commit 07ade24ea1
15 changed files with 770 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/atoms/clusters.ts
+4
View File
@@ -0,0 +1,4 @@
import { atom } from 'jotai';
// models expand keys: create, update , delete,
export const expandKeysAtom = atom<string[]>([]);
src/components/collapse-container/index.tsx
+167
View File
@@ -0,0 +1,167 @@
import IconFont from '@/components/icon-font';
import { Card } from 'antd';
import { createStyles } from 'antd-style';
import classNames from 'classnames';
import React, { useEffect, useRef, useState } from 'react';
import styled from 'styled-components';
const CardStyled = styled(Card)`
box-shadow: none !important;
&.isOpen {
.ant-card-head {
border-bottom: 1px solid var(--ant-color-border-secondary);
border-radius: var(--ant-border-radius) var(--ant-border-radius) 0 0;
}
}
.ant-card-head {
background-color: var(--ant-color-fill-quaternary);
border-bottom: none;
border-radius: var(--ant-border-radius);
&:hover {
background-color: var(--ant-color-fill-secondary);
}
}
`;
const useStyles = createStyles(({ css, token }) => {
return {
title: css`
font-weight: 400;
height: 56px;
font-size: ${token.fontSizeLG};
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
`,
subtitle: css`
font-size: 12px;
color: ${token.colorTextSecondary};
`,
content: css`
padding-top: 8px;
`,
left: css`
flex: 1;
`,
right: css`
display: flex;
align-items: center;
gap: 8px;
`
};
});
export interface CollapsibleContainerProps {
title?: React.ReactNode;
subtitle?: React.ReactNode;
right?: React.ReactNode;
defaultOpen?: boolean;
open?: boolean;
collapsible?: boolean;
onToggle?: (open: boolean) => void;
disabled?: boolean;
variant?: 'outlined' | 'borderless' | undefined;
className?: string;
children?: React.ReactNode;
}
export default function CollapsibleContainer({
title,
subtitle,
right,
defaultOpen = true,
open,
onToggle,
disabled = false,
variant = 'borderless',
className = '',
collapsible,
children
}: CollapsibleContainerProps) {
const { styles } = useStyles();
const isControlled = typeof open === 'boolean';
const [internalOpen, setInternalOpen] = useState(defaultOpen);
const isOpen = collapsible
? isControlled
? (open as boolean)
: internalOpen
: true;
const toggle = () => {
if (disabled || !collapsible) return;
const next = !isOpen;
if (!isControlled) setInternalOpen(next);
onToggle?.(next);
};
const contentRef = useRef<HTMLDivElement>(null);
const [height, setHeight] = useState(isOpen ? 'auto' : '0px');
const renderTitle = () => {
if (!collapsible) {
return null;
}
return (
<div className={styles.title} onClick={toggle}>
<div className={styles.left}>
{title && <div>{title}</div>}
{subtitle && <div className={styles.subtitle}>{subtitle}</div>}
</div>
<div className={styles.right}>
{right}
<IconFont
rotate={isOpen ? 180 : 0}
type="icon-down"
style={{
cursor: disabled ? 'not-allowed' : 'pointer',
fontSize: 12
}}
/>
</div>
</div>
);
};
useEffect(() => {
if (!collapsible) {
setHeight('auto');
return;
}
if (isOpen) {
const scrollHeight = contentRef.current?.scrollHeight || 0;
setHeight(scrollHeight + 'px');
const timer = setTimeout(() => setHeight('auto'), 200);
return () => clearTimeout(timer);
} else {
const scrollHeight = contentRef.current?.scrollHeight || 0;
setHeight(scrollHeight + 'px');
requestAnimationFrame(() => setHeight('0px'));
return () => {};
}
}, [isOpen, collapsible]);
return (
<CardStyled
className={classNames(className, { collapsible, disabled, isOpen })}
variant={variant}
styles={{
body: {
padding: 0
}
}}
title={renderTitle()}
>
<div
ref={contentRef}
style={{
maxHeight: height,
overflow: 'hidden',
transition: collapsible ? 'max-height 0.2s ease' : 'none'
}}
>
<div style={{ paddingTop: 8 }}>{children}</div>
</div>
</CardStyled>
);
}
src/pages/cluster-management/apis/index.ts
+4 -2
View File
@@ -102,13 +102,15 @@ export async function queryClusterToken(params: { id: number }) {
// ===================== Worker Pools =====================
export async function queryWorkerPools(
params?: Global.SearchParams & { cluster_id: string | number }
params?: Global.SearchParams & { cluster_id: string | number },
options?: any
) {
return request<Global.PageResponse<NodePoolListItem>>(
`${WORKER_POOLS_API}?`,
{
method: 'GET',
params
params,
cancelToken: options?.token
}
);
}
src/pages/cluster-management/cluster-create.tsx
+16 -11
View File
@@ -3,9 +3,9 @@ import { PageActionType } from '@/config/types';
import { PageContainer } from '@ant-design/pro-components';
import { useIntl, useNavigate, useSearchParams } from '@umijs/max';
import _ from 'lodash';
import { useEffect, useMemo, useRef, useState } from 'react';
import React, { useEffect, useMemo, useRef, useState } from 'react';
import styled from 'styled-components';
import { queryClusterList } from './apis';
import { createCluster, queryCredentialList } from './apis';
import ClusterSteps from './components/cluster-steps';
import FooterButtons from './components/footer-buttons';
import ProviderCatalog from './components/provider-catalog';
@@ -45,6 +45,7 @@ const HeaderContainer = styled.div`
const ClusterCreate = () => {
const intl = useIntl();
const startStep = 0;
const stepList = useStepList();
const [searchParams] = useSearchParams();
const action =
@@ -53,7 +54,7 @@ const ClusterCreate = () => {
const [credentialList, setCredentialList] = useState<
Global.BaseOption<number>[]
>([]);
const [currentStep, setCurrentStep] = useState<number>(0);
const [currentStep, setCurrentStep] = useState<number>(startStep);
const [registrationInfo, setRegistrationInfo] = useState<{
token: string;
image: string;
@@ -96,11 +97,7 @@ const ClusterCreate = () => {
setCurrentStep(newStep);
console.log('step========', newStep);
};
const customizer = (objValue: any, srcValue: any) => {
if (Array.isArray(objValue)) {
return srcValue;
}
};
const getFormFieldsValue = () => {
setFormValues((prev) => {
const newFormValues = _.cloneDeep(prev);
@@ -166,16 +163,24 @@ const ClusterCreate = () => {
}
};
const resetForm = () => {
setFormValues({});
for (const [formKey, formRef] of Object.entries(formRefs)) {
formRefs[formKey] = React.createRef();
}
};
const handleSelectProvider = (value: ProviderType) => {
setExtraData({
provider: value
} as ClusterFormData);
resetForm();
onNext();
};
useEffect(() => {
const fetchData = async () => {
const res = await queryClusterList({ page: 1, perPage: 100 });
const res = await queryCredentialList({ page: 1, perPage: 100 });
const list = res.items?.map((item) => ({
label: item.name,
value: item.id
@@ -232,7 +237,7 @@ const ClusterCreate = () => {
...extraData,
...(typeof values === 'object' ? values : {})
};
console.log('submit values====:', data);
await createCluster({ data });
return true;
};
@@ -274,7 +279,7 @@ const ClusterCreate = () => {
</HeaderContainer>
)}
>
{currentStep === 0 && (
{currentStep === startStep && (
<ProviderCatalog
dataList={providerList}
onSelect={handleSelectProvider}
src/pages/cluster-management/clusters.tsx
+94 -7
View File
@@ -1,13 +1,17 @@
import { expandKeysAtom } from '@/atoms/clusters';
import DeleteModal from '@/components/delete-modal';
import { FilterBar } from '@/components/page-tools';
import SealTable from '@/components/seal-table';
import { PageAction } from '@/config';
import type { PageActionType } from '@/config/types';
import useExpandedRowKeys from '@/hooks/use-expanded-row-keys';
import useTableFetch from '@/hooks/use-table-fetch';
import AddWorker from '@/pages/resources/components/add-worker';
import { PageContainer } from '@ant-design/pro-components';
import { useIntl, useNavigate, useSearchParams } from '@umijs/max';
import { useMemoizedFn } from 'ahooks';
import { Table, message } from 'antd';
import { message } from 'antd';
import { useAtom } from 'jotai';
import { useEffect, useState } from 'react';
import {
createCluster,
@@ -16,13 +20,16 @@ import {
queryClusterList,
queryClusterToken,
queryCredentialList,
queryWorkerPools,
updateCluster
} from './apis';
import AddCluster from './components/add-cluster';
import AddPool from './components/add-pool';
import PoolRows from './components/pool-rows';
import RegisterCluster from './components/register-cluster';
import { ProviderLabelMap, ProviderValueMap } from './config';
import { ProviderLabelMap, ProviderType, ProviderValueMap } from './config';
import {
ClusterListItem,
ClusterFormData as FormData,
ClusterListItem as ListItem,
NodePoolFormData
@@ -47,7 +54,14 @@ const Credentials: React.FC = () => {
deleteAPI: deleteCluster,
contentForDelete: 'menu.clusterManagement.clusters'
});
const [expandAtom, setExpandAtom] = useAtom(expandKeysAtom);
const {
handleExpandChange,
handleExpandAll,
updateExpandedRowKeys,
removeExpandedRowKey,
expandedRowKeys
} = useExpandedRowKeys(expandAtom);
const [searchParams, setSearchParams] = useSearchParams();
const navigate = useNavigate();
const intl = useIntl();
@@ -106,13 +120,13 @@ const Credentials: React.FC = () => {
open: boolean;
action: PageActionType;
title: string;
provider: string;
provider: ProviderType;
clusterId: number;
}>({
open: false,
action: PageAction.CREATE,
title: '',
provider: ProviderValueMap.DigitalOcean,
provider: ProviderValueMap.DigitalOcean as ProviderType,
clusterId: 0
});
@@ -246,6 +260,16 @@ const Credentials: React.FC = () => {
}
});
const handleOnToggleExpandAll = () => {};
const handleToggleExpandAll = useMemoizedFn((expanded: boolean) => {
const keys = dataSource.dataList?.map((item) => item.id);
handleExpandAll(expanded, keys);
if (expanded) {
handleOnToggleExpandAll();
}
});
const handleSubmitWorkerPool = async (formdata: NodePoolFormData) => {
try {
await createWorkerPool({
@@ -262,6 +286,20 @@ const Credentials: React.FC = () => {
}
};
const getWorkerPoolList = useMemoizedFn(
async (row: ClusterListItem, options?: any) => {
const params = {
cluster_id: row.id,
page: 1,
perPage: 100
};
const data = await queryWorkerPools(params, {
token: options?.token
});
return data?.items || [];
}
);
useEffect(() => {
const fetchCredentialList = async () => {
const data = await queryCredentialList({ page: 1, perPage: 100 });
@@ -274,6 +312,19 @@ const Credentials: React.FC = () => {
fetchCredentialList();
}, []);
const renderChildren = (
list: any,
options: { parent?: any; [key: string]: any }
) => {
return (
<PoolRows
dataList={list}
provider={options.parent?.provider}
clusterId={options.parent?.id}
/>
);
};
const columns = useClusterColumns(handleSelect);
return (
@@ -305,15 +356,23 @@ const Credentials: React.FC = () => {
handleDeleteByBatch={handleDeleteBatch}
handleClickPrimary={handleClickDropdown}
></FilterBar>
<Table
<SealTable
rowKey="id"
tableLayout="fixed"
style={{ width: '100%' }}
loadChildren={getWorkerPoolList}
onChange={handleTableChange}
expandedRowKeys={expandedRowKeys}
onExpand={handleExpandChange}
onExpandAll={handleToggleExpandAll}
renderChildren={renderChildren}
dataSource={dataSource.dataList}
loading={dataSource.loading}
loadend={dataSource.loadend}
rowSelection={rowSelection}
columns={columns}
childParentKey="cluster_id"
expandable={true}
pagination={{
showSizeChanger: true,
pageSize: queryParams.perPage,
@@ -322,7 +381,35 @@ const Credentials: React.FC = () => {
hideOnSinglePage: queryParams.perPage === 10,
onChange: handlePageChange
}}
></Table>
></SealTable>
{/* <SealTable
columns={columns}
dataSource={dataSource}
rowSelection={rowSelection}
expandedRowKeys={expandedRowKeys}
onExpand={handleExpandChange}
onExpandAll={handleToggleExpandAll}
loading={loading}
loadend={loadend}
rowKey="id"
childParentKey="model_id"
expandable={true}
onSort={handleOnSort}
onCell={handleOnCell}
pollingChildren={false}
watchChildren={true}
loadChildren={getModelInstances}
loadChildrenAPI={generateChildrenRequestAPI}
renderChildren={renderChildren}
pagination={{
showSizeChanger: true,
pageSize: queryParams.perPage,
current: queryParams.page,
total: total,
hideOnSinglePage: queryParams.perPage === 10,
onChange: handlePageChange
}}
></SealTable> */}
</PageContainer>
<AddCluster
provider={openAddModal.provider}
src/pages/cluster-management/components/add-pool.tsx
+2 -1
View File
@@ -2,6 +2,7 @@ import ModalFooter from '@/components/modal-footer';
import ScrollerModal from '@/components/scroller-modal';
import { PageActionType } from '@/config/types';
import React, { useRef } from 'react';
import { ProviderType } from '../config';
import {
NodePoolFormData as FormData,
NodePoolListItem as ListItem
@@ -12,7 +13,7 @@ type AddModalProps = {
title: string;
action: PageActionType;
open: boolean;
provider: string; // 'kubernetes' | 'custom' | 'digitalocean';
provider: ProviderType; // 'kubernetes' | 'custom' | 'digitalocean';
currentData?: ListItem | null;
onOk: (values: FormData) => void;
onCancel: () => void;
src/pages/cluster-management/components/pool-form.tsx
+192 -135
View File
@@ -1,22 +1,36 @@
import CollapsibleContainer, {
CollapsibleContainerProps
} from '@/components/collapse-container';
import LabelSelector from '@/components/label-selector';
import SealInputNumber from '@/components/seal-form/input-number';
import SealInput from '@/components/seal-form/seal-input';
import { PageAction } from '@/config';
import { PageActionType } from '@/config/types';
import useAppUtils from '@/hooks/use-app-utils';
import { DeleteOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Form } from 'antd';
import { Button, Form } from 'antd';
import _ from 'lodash';
import React, {
forwardRef,
useEffect,
useImperativeHandle,
useRef
} from 'react';
import React, { forwardRef, useEffect, useImperativeHandle } from 'react';
import styled from 'styled-components';
import { ProviderType } from '../config';
import { NodePoolFormData as FormData } from '../config/types';
import VolumesConfig from './volumes-config';
const Container = styled.div`
pointer-events: auto;
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 0 16px;
.ant-form-item:nth-child(5) {
grid-column: 1 / 3;
}
.ant-form-item:nth-child(6) {
grid-column: 1 / 3;
}
`;
type AddModalProps = {
ref: any;
name?: string;
@@ -24,42 +38,74 @@ type AddModalProps = {
provider: ProviderType; // 'kubernetes' | 'custom' | 'digitalocean';
currentData?: FormData | null;
onFinish: (values: FormData) => void;
onDelete?: () => void;
showDelete?: boolean;
collapseProps?: CollapsibleContainerProps;
};
const PoolForm: React.FC<AddModalProps> = forwardRef(
({ action, name = 'workerPoolForm', onFinish, currentData }, ref) => {
const cloudOptionsRef = useRef<any>(null);
const [form] = Form.useForm();
const intl = useIntl();
const { getRuleMessage } = useAppUtils();
const PoolForm: React.FC<AddModalProps> = forwardRef((props, ref) => {
const {
action,
name = 'workerPoolForm',
onFinish,
onDelete,
showDelete,
currentData,
collapseProps
} = props;
const { collapsible, onToggle, ...restCollapseProps } = collapseProps || {};
const [form] = Form.useForm();
const intl = useIntl();
const { getRuleMessage } = useAppUtils();
const labels = Form.useWatch('labels', form);
const instance_type = Form.useWatch('instance_type', form);
useEffect(() => {
if (currentData) {
console.log('currentData===========1=', currentData);
form.setFieldsValue({
...currentData
});
}
}, [currentData]);
useEffect(() => {
if (currentData) {
console.log('currentData===========1=', currentData);
form.setFieldsValue({
...currentData
});
}
}, [currentData]);
useImperativeHandle(ref, () => ({
resetFields: () => {
form.resetFields();
},
submit: () => {
form.submit();
},
setFieldsValue: (values: any) => {
form.setFieldsValue(values);
},
getFieldsValue: () => {
return form.getFieldsValue();
},
validateFields: async () => {
return await form.validateFields();
}
}));
useImperativeHandle(ref, () => ({
resetFields: () => {
form.resetFields();
},
submit: () => {
form.submit();
},
setFieldsValue: (values: any) => {
form.setFieldsValue(values);
},
getFieldsValue: () => {
return form.getFieldsValue();
},
validateFields: async () => {
return await form.validateFields();
}
}));
return (
return (
<CollapsibleContainer
title={instance_type}
collapsible={collapsible}
onToggle={onToggle}
{...restCollapseProps}
>
{showDelete && (
<div className="flex-end" style={{ marginBlock: '8px 16px' }}>
<Button
onClick={onDelete}
icon={<DeleteOutlined />}
danger
type="text"
variant="filled"
color="danger"
size="small"
></Button>
</div>
)}
<Form
name={name}
form={form}
@@ -71,103 +117,114 @@ const PoolForm: React.FC<AddModalProps> = forwardRef(
batch_size: 1
}}
>
<Form.Item<FormData>
name="instance_type"
rules={[
{
required: true,
message: getRuleMessage(
'input',
'clusters.workerpool.instanceType'
)
}
]}
>
<SealInput.Input
label={intl.formatMessage({
id: 'clusters.workerpool.instanceType'
})}
required
></SealInput.Input>
</Form.Item>
<Form.Item<FormData>
name="replicas"
rules={[
{
required: true,
message: getRuleMessage('input', 'clusters.workerpool.replicas')
}
]}
>
<SealInputNumber
label={intl.formatMessage({ id: 'clusters.workerpool.replicas' })}
required
></SealInputNumber>
</Form.Item>
<Form.Item<FormData>
name="batch_size"
rules={[
{
required: true,
message: getRuleMessage('input', 'clusters.workerpool.batchSize')
}
]}
>
<SealInputNumber
label={intl.formatMessage({ id: 'clusters.workerpool.batchSize' })}
required
></SealInputNumber>
</Form.Item>
<Form.Item<FormData>
name="os_image"
rules={[
{
required: true,
message: getRuleMessage('input', 'clusters.workerpool.osImage')
}
]}
>
<SealInput.Input
disabled={action === PageAction.EDIT}
label={intl.formatMessage({ id: 'clusters.workerpool.osImage' })}
required
></SealInput.Input>
</Form.Item>
<Form.Item<FormData>
name="labels"
rules={[
({ getFieldValue }) => ({
validator(rule, value) {
if (_.keys(value).length > 0) {
if (_.some(_.keys(value), (k: string) => !value[k])) {
return Promise.reject(
intl.formatMessage(
{
id: 'common.validate.value'
},
{
name: 'labels'
}
)
);
}
}
return Promise.resolve();
<Container>
<Form.Item<FormData>
name="instance_type"
rules={[
{
required: true,
message: getRuleMessage(
'input',
'clusters.workerpool.instanceType'
)
}
})
]}
>
<LabelSelector
label={intl.formatMessage({ id: 'resources.table.labels' })}
labels={form.getFieldValue('labels') || {}}
btnText={intl.formatMessage({ id: 'common.button.addLabel' })}
></LabelSelector>
</Form.Item>
<VolumesConfig ref={cloudOptionsRef}></VolumesConfig>
]}
>
<SealInput.Input
label={intl.formatMessage({
id: 'clusters.workerpool.instanceType'
})}
required
></SealInput.Input>
</Form.Item>
<Form.Item<FormData>
name="replicas"
rules={[
{
required: true,
message: getRuleMessage('input', 'clusters.workerpool.replicas')
}
]}
>
<SealInputNumber
label={intl.formatMessage({
id: 'clusters.workerpool.replicas'
})}
required
></SealInputNumber>
</Form.Item>
<Form.Item<FormData>
name="batch_size"
rules={[
{
required: true,
message: getRuleMessage(
'input',
'clusters.workerpool.batchSize'
)
}
]}
>
<SealInputNumber
label={intl.formatMessage({
id: 'clusters.workerpool.batchSize'
})}
required
></SealInputNumber>
</Form.Item>
<Form.Item<FormData>
name="os_image"
rules={[
{
required: true,
message: getRuleMessage('input', 'clusters.workerpool.osImage')
}
]}
>
<SealInput.Input
disabled={action === PageAction.EDIT}
label={intl.formatMessage({
id: 'clusters.workerpool.osImage'
})}
required
></SealInput.Input>
</Form.Item>
<Form.Item<FormData>
name="labels"
rules={[
({ getFieldValue }) => ({
validator(rule, value) {
if (_.keys(value).length > 0) {
if (_.some(_.keys(value), (k: string) => !value[k])) {
return Promise.reject(
intl.formatMessage(
{
id: 'common.validate.value'
},
{
name: 'labels'
}
)
);
}
}
return Promise.resolve();
}
})
]}
>
<LabelSelector
label={intl.formatMessage({ id: 'resources.table.labels' })}
labels={labels || {}}
btnText={intl.formatMessage({ id: 'common.button.addLabel' })}
></LabelSelector>
</Form.Item>
<VolumesConfig></VolumesConfig>
</Container>
</Form>
);
}
);
</CollapsibleContainer>
);
});
export default PoolForm;
src/pages/cluster-management/components/pool-rows.tsx
+151
View File
@@ -0,0 +1,151 @@
import DeleteModal from '@/components/delete-modal';
import RowChildren from '@/components/seal-table/components/row-children';
import { PageAction } from '@/config';
import { PageActionType } from '@/config/types';
import { useIntl } from '@umijs/max';
import { useMemoizedFn } from 'ahooks';
import { Col, message, Row } from 'antd';
import React, { useRef, useState } from 'react';
import { deleteWorkerPool, updateWorkerPool } from '../apis';
import { ProviderType } from '../config';
import { NodePoolFormData, NodePoolListItem } from '../config/types';
import usePoolsColumns from '../hooks/use-pools-columns';
import AddPool from './add-pool';
interface PoolRowsProps {
dataList: NodePoolListItem[];
provider: ProviderType;
clusterId: number | string;
}
const PoolRows: React.FC<PoolRowsProps> = ({
dataList,
provider,
clusterId
}) => {
const intl = useIntl();
const modalRef = useRef<any>(null);
const [addPoolStatus, setAddPoolStatus] = useState<{
open: boolean;
action: PageActionType;
title: string;
provider: ProviderType;
currentData: NodePoolListItem | null;
clusterId: number | string;
}>({
open: false,
action: PageAction.EDIT,
title: '',
provider: provider,
currentData: null as NodePoolListItem | null,
clusterId: clusterId
});
const handleSubmitWorkerPool = async (formdata: NodePoolFormData) => {
try {
await updateWorkerPool({
data: formdata,
id: addPoolStatus.currentData!.id
});
setAddPoolStatus({
...addPoolStatus,
open: false
});
message.success(intl.formatMessage({ id: 'common.message.success' }));
// handleSearch();
} catch (error) {
// error
}
};
const handleEdit = (action: string, record: NodePoolListItem) => {
if (action === 'edit') {
setAddPoolStatus({
open: true,
action: PageAction.EDIT,
title: intl.formatMessage(
{ id: 'common.button.edit.item' },
{ name: record.instance_type }
),
provider: provider,
currentData: record,
clusterId: record.cluster_id
});
}
};
const handleDelete = (row: { name: string; id: number }, options?: any) => {
modalRef.current?.show({
content: 'worker pool',
operation: 'common.delete.single.confirm',
name: row.name,
...options,
async onOk() {
console.log('OK');
await deleteWorkerPool(row.id);
}
});
};
const onSelect = useMemoizedFn((key: string, record: NodePoolListItem) => {
if (key === 'delete') {
handleDelete({ ...record, name: record.instance_type });
}
if (key === 'edit') {
handleEdit(key, record);
}
});
const columns = usePoolsColumns(onSelect);
return (
<>
{dataList?.map((data: NodePoolListItem) => {
return (
<div
key={data.id}
style={{ borderRadius: 'var(--ant-table-header-border-radius)' }}
>
<RowChildren>
<Row style={{ width: '100%' }} align="middle">
{columns.map((col: Record<string, any>) => {
return (
<Col
key={col.dataIndex as string}
span={col.span}
style={col.style}
>
{col.render
? col.render(data[col.dataIndex as string], data)
: data[col.dataIndex as string]}
</Col>
);
})}
</Row>
</RowChildren>
</div>
);
})}
<AddPool
provider={addPoolStatus.provider}
open={addPoolStatus.open}
action={addPoolStatus.action}
title={addPoolStatus.title}
currentData={addPoolStatus.currentData}
onCancel={() => {
setAddPoolStatus({
open: false,
action: PageAction.CREATE,
title: '',
provider: provider,
currentData: null,
clusterId: 0
});
}}
onOk={handleSubmitWorkerPool}
></AddPool>
<DeleteModal ref={modalRef}></DeleteModal>
</>
);
};
export default PoolRows;
src/pages/cluster-management/components/provider-catalog.tsx
+56 -20
View File
@@ -1,6 +1,6 @@
import Card from '@/components/templates/card';
import { useIntl } from '@umijs/max';
import React from 'react';
import React, { useMemo } from 'react';
import styled from 'styled-components';
import { ProviderType } from '../config';
@@ -9,6 +9,22 @@ const Wrapper = styled.div`
grid-template-columns: 1fr 1fr 1fr;
gap: 22px;
`;
const Container = styled.div`
display: flex;
flex-direction: column;
gap: 16px;
`;
const Title = styled.span`
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 700;
font-size: 18px;
margin-block: 16px 24px;
`;
interface ProviderCatalogProps {
onSelect?: (provider: ProviderType) => void;
currentProvider?: ProviderType;
@@ -20,6 +36,7 @@ interface ProviderCatalogProps {
disabled?: boolean;
icon: React.ReactNode;
description?: string;
group?: string;
}[];
}
@@ -30,27 +47,46 @@ const ProviderCatalog: React.FC<ProviderCatalogProps> = ({
currentProvider
}) => {
const intl = useIntl();
const groupList = useMemo(() => {
if (!dataList) return {};
return dataList?.reduce(
(acc, item) => {
(acc[item.group || 'default'] ??= []).push(item);
return acc;
},
{} as Record<string, typeof dataList>
);
}, [dataList]);
return (
<Wrapper>
{dataList?.map((action) => (
<Card
height="auto"
key={action.key}
onClick={() => onSelect?.(action.key as ProviderType)}
active={currentProvider === action.key}
disabled={action.disabled}
clickable={clickable}
header={
action.locale
? intl.formatMessage({ id: action.label })
: action.label
}
icon={action.icon}
>
{action.description || 'This is a description'}
</Card>
<Container>
{Object.entries(groupList).map(([groupName, items]) => (
<div key={groupName}>
{groupName !== 'default' && <Title>{groupName}</Title>}
<Wrapper>
{items?.map((action) => (
<Card
height="auto"
key={action.key}
onClick={() => onSelect?.(action.key as ProviderType)}
active={currentProvider === action.key}
disabled={action.disabled}
clickable={clickable}
header={
action.locale
? intl.formatMessage({ id: action.label })
: action.label
}
icon={action.icon}
>
{action.description || 'This is a description'}
</Card>
))}
</Wrapper>
</div>
))}
</Wrapper>
</Container>
);
};
src/pages/cluster-management/components/worker-pools.tsx
+1 -1
View File
@@ -127,7 +127,7 @@ const WorkerPools = () => {
}
};
const columns = usePoolsColumns(sortOrder, onSelect);
const columns = usePoolsColumns(onSelect, sortOrder);
return (
<>
src/pages/cluster-management/config/index.ts
+19 -13
View File
@@ -55,7 +55,8 @@ export const providerList = [
key: ProviderValueMap.Custom,
icon: React.cloneElement(icons.Docker, {
style: { color: 'var(--ant-color-primary)' }
})
}),
group: 'default'
},
{
label: 'Kubernetes',
@@ -64,7 +65,8 @@ export const providerList = [
key: ProviderValueMap.Kubernetes,
icon: React.cloneElement(icons.KubernetesOutlined, {
style: { color: 'var(--ant-color-primary)' }
})
}),
group: 'default'
},
{
label: 'DigitalOcean',
@@ -75,7 +77,8 @@ export const providerList = [
style: {
color: 'var(--ant-color-primary)'
}
})
}),
group: 'Cloud Provider'
},
{
label: 'Huawei Cloud',
@@ -84,7 +87,8 @@ export const providerList = [
value: ProviderValueMap.HuaweiCloud,
key: ProviderValueMap.HuaweiCloud,
icon: icons.HuaweiCloud,
description: 'Currently Not Supported'
description: 'Comming soon',
group: 'Cloud Provider'
},
{
label: 'Ali Cloud',
@@ -93,7 +97,8 @@ export const providerList = [
value: ProviderValueMap.AliCloud,
key: ProviderValueMap.AliCloud,
icon: icons.AliCloud,
description: 'Currently Not Supported'
description: 'Comming soon',
group: 'Cloud Provider'
},
{
label: 'Tencent Cloud',
@@ -102,7 +107,8 @@ export const providerList = [
value: ProviderValueMap.TencentCloud,
key: ProviderValueMap.TencentCloud,
icon: icons.TencentCloud,
description: 'Currently Not Supported'
description: 'Comming soon',
group: 'Cloud Provider'
}
];
@@ -142,13 +148,13 @@ export const clusterActionList = [
locale: true,
icon: icons.KubernetesOutlined
},
// {
// key: 'addPool',
// label: 'clusters.button.addNodePool',
// provider: ProviderValueMap.DigitalOcean,
// locale: true,
// icon: icons.Catalog
// },
{
key: 'addPool',
label: 'clusters.button.addNodePool',
provider: ProviderValueMap.DigitalOcean,
locale: true,
icon: icons.Catalog
},
{
key: 'delete',
label: 'common.button.delete',
src/pages/cluster-management/config/types.ts
+2
View File
@@ -29,8 +29,10 @@ export interface NodePoolListItem {
batch_size: number;
labels: Record<string, string>;
cloud_options: Record<string, any>;
os_image: string;
created_at: string;
updated_at: string;
cluster_id: number;
}
export interface NodePoolFormData {
src/pages/cluster-management/hooks/use-cluster-columns.tsx
+8 -1
View File
@@ -33,6 +33,7 @@ const useClusterColumns = (
{
title: intl.formatMessage({ id: 'common.table.name' }),
dataIndex: 'name',
span: 3,
render: (text: string, record: ClusterListItem) => (
<AutoTooltip ghost>
<Link
@@ -46,11 +47,13 @@ const useClusterColumns = (
{
title: intl.formatMessage({ id: 'clusters.table.provider' }),
dataIndex: 'provider',
span: 3,
render: (value: string) => <span>{ProviderLabelMap[value]}</span>
},
{
title: intl.formatMessage({ id: 'common.table.status' }),
dataIndex: 'state',
span: 3,
render: (value: number) => (
<StatusTag
statusValue={{
@@ -63,6 +66,7 @@ const useClusterColumns = (
{
title: 'Workers',
dataIndex: 'workers',
span: 3,
render: (value: number, record: ClusterListItem) => (
<span>
{record.ready_workers} / {record.workers}
@@ -72,17 +76,19 @@ const useClusterColumns = (
{
title: 'GPUs',
dataIndex: 'gpus',
span: 3,
render: (value: number) => <span>{value}</span>
},
{
title: intl.formatMessage({ id: 'clusters.table.deployments' }),
dataIndex: 'models',
span: 2,
render: (value: number) => <span>{value}</span>
},
{
title: intl.formatMessage({ id: 'common.table.createTime' }),
dataIndex: 'created_at',
width: 180,
span: 4,
render: (value: string) => (
<span>{dayjs(value).format('YYYY-MM-DD HH:mm:ss')}</span>
)
@@ -90,6 +96,7 @@ const useClusterColumns = (
{
title: intl.formatMessage({ id: 'common.table.operation' }),
dataIndex: 'operations',
span: 3,
render: (value: string, record: ClusterListItem) => (
<DropdownButtons
items={setActionsItems(record)}
src/pages/cluster-management/hooks/use-pools-columns.tsx
+19 -3
View File
@@ -26,8 +26,8 @@ const actionItems = [
}
];
const usePoolsColumns = (
sortOrder: SortOrder,
handleSelect: (val: string, record: ListItem) => void
handleSelect: (val: string, record: ListItem) => void,
sortOrder?: SortOrder
): ColumnsType<ListItem> => {
const intl = useIntl();
@@ -40,6 +40,10 @@ const usePoolsColumns = (
ellipsis: {
showTitle: false
},
span: 4,
style: {
paddingInline: 'var(--ant-table-cell-padding-inline)'
},
render: (text: string) => (
<AutoTooltip title={text} ghost minWidth={20}>
{text}
@@ -49,17 +53,20 @@ const usePoolsColumns = (
{
title: intl.formatMessage({ id: 'clusters.workerpool.replicas' }),
dataIndex: 'replicas',
span: 3,
key: 'replicas'
},
{
title: intl.formatMessage({ id: 'clusters.workerpool.batchSize' }),
dataIndex: 'batch_size',
key: 'batch_size'
key: 'batch_size',
span: 3
},
{
title: intl.formatMessage({ id: 'clusters.workerpool.osImage' }),
dataIndex: 'os_image',
key: 'os_image',
span: 3,
ellipsis: {
showTitle: false
},
@@ -74,6 +81,7 @@ const usePoolsColumns = (
dataIndex: 'labels',
key: 'labels',
width: 200,
span: 4,
render: (text: string, record: ListItem) => (
<LabelsCell labels={record.labels}></LabelsCell>
)
@@ -82,6 +90,7 @@ const usePoolsColumns = (
title: intl.formatMessage({ id: 'common.table.createTime' }),
dataIndex: 'create_at',
key: 'created_at',
span: 4,
showSorterTooltip: false,
defaultSortOrder: 'descend',
sortOrder: sortOrder,
@@ -89,11 +98,18 @@ const usePoolsColumns = (
ellipsis: {
showTitle: false
},
style: {
paddingLeft: 42
},
render: (text: string) => dayjs(text).format('YYYY-MM-DD HH:mm:ss')
},
{
title: intl.formatMessage({ id: 'common.table.operation' }),
key: 'operations',
span: 3,
style: {
paddingLeft: 36
},
render: (text: string, record: ListItem) => (
<DropdownButtons
items={actionItems}
src/pages/cluster-management/step-forms/worker-pools-form.tsx
+35 -26
View File
@@ -1,7 +1,7 @@
import PageTools from '@/components/page-tools';
import { PageActionType } from '@/config/types';
import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
import { Button, Divider, FormInstance } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { Button, FormInstance } from 'antd';
import {
forwardRef,
useEffect,
@@ -22,6 +22,7 @@ const PoolContainer = styled.div`
const PoolFormWrapper = styled.div`
flex: 1;
margin-bottom: 16px;
`;
const Title = styled.span`
@@ -42,14 +43,15 @@ interface WorkerPoolsFormProps {
const WorkerPoolsForm = forwardRef((props: WorkerPoolsFormProps, ref) => {
const { provider, action, currentData } = props;
const countRef = useRef(1);
const countRef = useRef(0);
const formRefs = useRef<Record<number, FormInstance<any> | null>>({});
const [activeKey, setActiveKey] = useState<Set<number>>(new Set([0]));
const [workerPoolList, setWorkerPoolList] = useState<
Map<number, NodePoolFormData>
>(
new Map([
[
1,
0,
{
instance_type: 'Pool-1'
}
@@ -68,9 +70,14 @@ const WorkerPoolsForm = forwardRef((props: WorkerPoolsFormProps, ref) => {
const newId = updateCount();
setWorkerPoolList((prev) =>
new Map(prev).set(newId, {
instance_type: `Pool-${newId}`
instance_type: `Pool-${newId + 1}`
} as NodePoolFormData)
);
setActiveKey((prev) => new Set([newId]));
requestAnimationFrame(() => {
window.scrollTo(0, document.body.scrollHeight);
});
};
const handleRemovePool = (id: number) => {
@@ -137,6 +144,19 @@ const WorkerPoolsForm = forwardRef((props: WorkerPoolsFormProps, ref) => {
};
};
const handleOnToggle = (open: boolean, key: number) => {
console.log('Active keys changed:', key);
if (open) {
setActiveKey((prev) => new Set([key]));
} else {
setActiveKey((prev) => {
const newSet = new Set(prev);
newSet.delete(key);
return newSet;
});
}
};
useImperativeHandle(ref, () => ({
submit: () => {},
validateFields: validateFields,
@@ -157,7 +177,7 @@ const WorkerPoolsForm = forwardRef((props: WorkerPoolsFormProps, ref) => {
marginTop={0}
left={
<span className="flex-center gap-16">
<Title>Worker Pools Configuration</Title>
<Title>Worker Pools</Title>
</span>
}
right={
@@ -171,6 +191,7 @@ const WorkerPoolsForm = forwardRef((props: WorkerPoolsFormProps, ref) => {
</Button>
}
></PageTools>
{Array.from(workerPoolList.keys()).map((key, index) => (
<div key={key}>
<PoolContainer>
@@ -183,34 +204,22 @@ const WorkerPoolsForm = forwardRef((props: WorkerPoolsFormProps, ref) => {
formRefs.current[key] = el;
}
}}
collapseProps={{
collapsible: true,
open: activeKey.has(key),
defaultOpen: activeKey.has(key),
onToggle: (open: boolean) => handleOnToggle(open, key)
}}
showDelete={workerPoolList.size > 1}
onFinish={handleOnFinish}
provider={provider}
currentData={workerPoolList.get(key)}
onDelete={() => handleRemovePool(key)}
></WorkerPoolForm>
</PoolFormWrapper>
</PoolContainer>
{index !== Array.from(workerPoolList.keys()).length - 1 && (
<Divider orientation="right">
<Button
variant="filled"
color="default"
onClick={() => handleRemovePool(key)}
icon={<DeleteOutlined />}
></Button>
</Divider>
)}
</div>
))}
<div className="flex-end">
<Button
onClick={handleAddPool}
variant="filled"
color="default"
icon={<PlusOutlined />}
>
Add Pool
</Button>
</div>
</div>
);
});