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

feat: add watch api in cluster

Browse Source
This commit is contained in:
jialin
2025-09-16 11:26:17 +08:00
parent 07ade24ea1
commit deeee70807
34 changed files with 706 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/cluster-management/cluster-create.tsx
+62 -14
View File
@@ -5,11 +5,11 @@ import { useIntl, useNavigate, useSearchParams } from '@umijs/max';
import _ from 'lodash';
import React, { useEffect, useMemo, useRef, useState } from 'react';
import styled from 'styled-components';
import { createCluster, queryCredentialList } from './apis';
import { createCluster, queryClusterToken, queryCredentialList } from './apis';
import ClusterSteps from './components/cluster-steps';
import FooterButtons from './components/footer-buttons';
import ProviderCatalog from './components/provider-catalog';
import { providerList, ProviderType } from './config';
import { providerList, ProviderType, ProviderValueMap } from './config';
import { ClusterFormData } from './config/types';
import { moduleMap, moduleRegistry } from './step-forms/module-registry';
import useStepList from './step-forms/use-step-list';
@@ -21,6 +21,19 @@ const Container = styled.div`
align-items: center;
`;
const Nav = styled.div`
display: flex;
align-items: center;
height: 72px;
font-weight: 400;
font-size: 20px;
color: var(--ant-color-text-tertiary);
.level-2 {
color: var(--ant-color-text);
font-weight: 600;
}
`;
const Content = styled.div`
width: 600px;
`;
@@ -28,11 +41,9 @@ const Content = styled.div`
const HeaderContainer = styled.div`
position: relative;
display: grid;
grid-template-columns: auto 1fr;
grid-template-columns: 1fr;
align-items: center;
padding-inline: var(--layout-content-header-inlinepadding);
border-bottom: 1px solid var(--ant-color-split);
min-height: 72px;
.text {
margin-right: 16px;
padding-right: 16px;
@@ -67,7 +78,7 @@ const ClusterCreate = () => {
cluster_id: 0
});
const [extraData, setExtraData] = useState<ClusterFormData>({
provider: null
provider: ProviderValueMap.Custom
} as ClusterFormData);
const [formValues, setFormValues] = useState<Record<string, any>>({});
@@ -237,7 +248,12 @@ const ClusterCreate = () => {
...extraData,
...(typeof values === 'object' ? values : {})
};
await createCluster({ data });
const res = await createCluster({ data });
const info = await queryClusterToken({ id: res.id });
setRegistrationInfo({
...info,
cluster_id: res.id
});
return true;
};
@@ -252,10 +268,6 @@ const ClusterCreate = () => {
return (
<PageContainer
ghost
fixedHeader
affixProps={{
offsetTop: 0
}}
footer={[
<FooterButtons
key="buttons"
@@ -266,11 +278,47 @@ const ClusterCreate = () => {
showButtons={showButtons}
/>
]}
header={{
title: (
<div>
<Nav>
<span className="level-1">Cluster</span>
<span
style={{
marginInline: 20,
color: 'var(--ant-color-split)'
}}
>
/
</span>
<span className="level-2">create</span>
</Nav>
<ClusterSteps
steps={steps}
currentStep={currentStep}
onChange={handleStepChange}
></ClusterSteps>
</div>
),
style: {
paddingInline: 'var(--layout-content-header-inlinepadding)'
},
breadcrumb: {}
}}
pageHeaderRender={() => (
<HeaderContainer>
<span className="text">
<span>Create Cluster</span>
</span>
<Nav>
<span className="level-1">Cluster</span>
<span
style={{
marginInline: 20,
color: 'var(--ant-color-split)'
}}
>
/
</span>
<span className="level-2">create</span>
</Nav>
<ClusterSteps
steps={steps}
currentStep={currentStep}
src/pages/cluster-management/clusters.tsx
+52 -63
View File
@@ -2,10 +2,12 @@ import { expandKeysAtom } from '@/atoms/clusters';
import DeleteModal from '@/components/delete-modal';
import { FilterBar } from '@/components/page-tools';
import SealTable from '@/components/seal-table';
import TableContext from '@/components/seal-table/table-context';
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 useWatchList from '@/hooks/use-watch-list';
import AddWorker from '@/pages/resources/components/add-worker';
import { PageContainer } from '@ant-design/pro-components';
import { useIntl, useNavigate, useSearchParams } from '@umijs/max';
@@ -14,6 +16,7 @@ import { message } from 'antd';
import { useAtom } from 'jotai';
import { useEffect, useState } from 'react';
import {
CLUSTERS_API,
createCluster,
createWorkerPool,
deleteCluster,
@@ -21,7 +24,8 @@ import {
queryClusterToken,
queryCredentialList,
queryWorkerPools,
updateCluster
updateCluster,
WORKER_POOLS_API
} from './apis';
import AddCluster from './components/add-cluster';
import AddPool from './components/add-pool';
@@ -52,8 +56,11 @@ const Credentials: React.FC = () => {
} = useTableFetch<ListItem>({
fetchAPI: queryClusterList,
deleteAPI: deleteCluster,
watch: true,
API: CLUSTERS_API,
contentForDelete: 'menu.clusterManagement.clusters'
});
const { watchDataList: allWorkerPoolList } = useWatchList(WORKER_POOLS_API);
const [expandAtom, setExpandAtom] = useAtom(expandKeysAtom);
const {
handleExpandChange,
@@ -103,13 +110,13 @@ const Credentials: React.FC = () => {
action: PageActionType;
currentData?: ListItem;
title: string;
provider: string;
provider: ProviderType;
}>({
open: false,
action: PageAction.CREATE,
currentData: undefined,
title: '',
provider: ''
provider: null
});
const [credentialList, setCredentialList] = useState<
@@ -145,7 +152,7 @@ const Credentials: React.FC = () => {
{ id: 'clusters.add.cluster' },
{ cluster: clusterLabel }
),
provider: value
provider: value as ProviderType
});
};
@@ -154,14 +161,13 @@ const Credentials: React.FC = () => {
open: true,
action: PageAction.CREATE,
title: intl.formatMessage({ id: 'clusters.button.addNodePool' }),
provider: row.provider,
provider: row.provider as ProviderType,
clusterId: row.id
});
};
const handleClickDropdown = (item: any) => {
navigate(`/cluster-management/clusters/create?action=${PageAction.CREATE}`);
// handleAddCluster(item.key);
};
const handleModalOk = async (data: FormData) => {
@@ -183,7 +189,7 @@ const Credentials: React.FC = () => {
action: PageAction.CREATE,
currentData: undefined,
title: '',
provider: ''
provider: null
});
message.success(intl.formatMessage({ id: 'common.message.success' }));
} catch (error) {
@@ -192,7 +198,7 @@ const Credentials: React.FC = () => {
action: PageAction.CREATE,
currentData: undefined,
title: '',
provider: ''
provider: null
});
}
};
@@ -204,7 +210,7 @@ const Credentials: React.FC = () => {
action: PageAction.CREATE,
currentData: undefined,
title: '',
provider: ''
provider: null
});
};
@@ -300,6 +306,10 @@ const Credentials: React.FC = () => {
}
);
const setDisableExpand = (row: ClusterListItem) => {
return row.provider !== ProviderValueMap.DigitalOcean;
};
useEffect(() => {
const fetchCredentialList = async () => {
const data = await queryCredentialList({ page: 1, perPage: 100 });
@@ -356,60 +366,39 @@ const Credentials: React.FC = () => {
handleDeleteByBatch={handleDeleteBatch}
handleClickPrimary={handleClickDropdown}
></FilterBar>
<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,
current: queryParams.page,
total: dataSource.total,
hideOnSinglePage: queryParams.perPage === 10,
onChange: handlePageChange
<TableContext.Provider
value={{
allChildren: allWorkerPoolList,
setDisableExpand: setDisableExpand
}}
></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> */}
>
<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,
current: queryParams.page,
total: dataSource.total,
hideOnSinglePage: queryParams.perPage === 10,
onChange: handlePageChange
}}
></SealTable>
</TableContext.Provider>
</PageContainer>
<AddCluster
provider={openAddModal.provider}
@@ -457,7 +446,7 @@ const Credentials: React.FC = () => {
open: false,
action: PageAction.CREATE,
title: '',
provider: ProviderValueMap.DigitalOcean,
provider: ProviderValueMap.DigitalOcean as ProviderType,
clusterId: 0
});
}}
src/pages/cluster-management/components/add-cluster.tsx
+2 -1
View File
@@ -2,6 +2,7 @@ import ModalFooter from '@/components/modal-footer';
import ScrollerModal from '@/components/scroller-modal/index';
import { PageActionType } from '@/config/types';
import React, { useRef } from 'react';
import { ProviderType } from '../config';
import {
ClusterFormData as FormData,
ClusterListItem as ListItem
@@ -13,7 +14,7 @@ type AddModalProps = {
action: PageActionType;
open: boolean;
currentData?: ListItem; // Used when action is EDIT
provider: string;
provider: ProviderType;
credentialList: Global.BaseOption<number>[];
onOk: (values: FormData) => void;
onCancel: () => void;
src/pages/cluster-management/components/add-worker-step.tsx
+3 -3
View File
@@ -20,10 +20,10 @@ type AddModalProps = {
const AddWorkerStep: React.FC<AddModalProps> = ({ registrationInfo }) => {
return (
<div>
<Title>Supported Hardware Platforms</Title>
<SupportedHardware />
<Title style={{ marginTop: 32 }}>Execute Command</Title>
<Title>Execute Command</Title>
<RegisterClusterInner registrationInfo={registrationInfo} />
<Title style={{ marginTop: 32 }}>Supported GPUs</Title>
<SupportedHardware />
</div>
);
};
src/pages/cluster-management/components/cloud-provider-form.tsx
+1 -6
View File
@@ -92,12 +92,7 @@ const CloudProvider: React.FC<CloudProviderProps> = (props) => {
rules={[
{
required: true,
message: intl.formatMessage(
{ id: 'common.form.rule.input' },
{
name: 'credential'
}
)
message: getRuleMessage('input', 'clusters.credential.title')
}
]}
>
src/pages/cluster-management/components/cluster-steps.tsx
+13 -3
View File
@@ -5,14 +5,24 @@ import styled from 'styled-components';
const { Step } = Steps;
const Wrapper = styled.div`
padding-block: 20px;
padding-block: 30px;
background-color: var(--ant-color-bg-container);
.ant-steps-item-description {
max-width: 300px !important;
color: var(--ant-color-text-description) !important;
}
.ant-steps-item-content > .ant-steps-item-title {
font-weight: 600;
// font-weight: 600;
}
.ant-steps-item {
.ant-steps-item-container {
// .ant-steps-item-icon {
// margin-inline-start: 0 !important;
// }
// .ant-steps-item-tail {
// margin-inline-start: 0 !important;
// }
}
}
`;
@@ -25,7 +35,7 @@ const ClusterSteps: React.FC<{
return (
<Wrapper>
<Steps current={currentStep} size="small" onChange={onChange}>
<Steps current={currentStep} size="small" onChange={onChange} progressDot>
{steps.map((step) => (
<Step
disabled={step.disabled}
src/pages/cluster-management/components/pool-form.tsx
+28 -8
View File
@@ -29,6 +29,9 @@ const Container = styled.div`
.ant-form-item:nth-child(6) {
grid-column: 1 / 3;
}
.ant-form-item:nth-child(7) {
grid-column: 1 / 3;
}
`;
type AddModalProps = {
@@ -57,7 +60,7 @@ const PoolForm: React.FC<AddModalProps> = forwardRef((props, ref) => {
const intl = useIntl();
const { getRuleMessage } = useAppUtils();
const labels = Form.useWatch('labels', form);
const instance_type = Form.useWatch('instance_type', form);
const title = Form.useWatch('name', form);
useEffect(() => {
if (currentData) {
@@ -88,13 +91,12 @@ const PoolForm: React.FC<AddModalProps> = forwardRef((props, ref) => {
return (
<CollapsibleContainer
title={instance_type}
{...restCollapseProps}
title={title}
collapsible={collapsible}
onToggle={onToggle}
{...restCollapseProps}
>
{showDelete && (
<div className="flex-end" style={{ marginBlock: '8px 16px' }}>
deleteBtn={
showDelete && (
<Button
onClick={onDelete}
icon={<DeleteOutlined />}
@@ -104,8 +106,9 @@ const PoolForm: React.FC<AddModalProps> = forwardRef((props, ref) => {
color="danger"
size="small"
></Button>
</div>
)}
)
}
>
<Form
name={name}
form={form}
@@ -118,6 +121,22 @@ const PoolForm: React.FC<AddModalProps> = forwardRef((props, ref) => {
}}
>
<Container>
<Form.Item<FormData>
name="name"
rules={[
{
required: true,
message: getRuleMessage('input', 'common.table.name')
}
]}
>
<SealInput.Input
label={intl.formatMessage({
id: 'common.table.name'
})}
required
></SealInput.Input>
</Form.Item>
<Form.Item<FormData>
name="instance_type"
rules={[
@@ -135,6 +154,7 @@ const PoolForm: React.FC<AddModalProps> = forwardRef((props, ref) => {
id: 'clusters.workerpool.instanceType'
})}
required
disabled={action === PageAction.EDIT}
></SealInput.Input>
</Form.Item>
<Form.Item<FormData>
src/pages/cluster-management/components/pool-rows.tsx
+40 -17
View File
@@ -1,5 +1,7 @@
import DeleteModal from '@/components/delete-modal';
import CellContent from '@/components/seal-table/components/cell-content';
import RowChildren from '@/components/seal-table/components/row-children';
import RowContext from '@/components/seal-table/row-context';
import { PageAction } from '@/config';
import { PageActionType } from '@/config/types';
import { useIntl } from '@umijs/max';
@@ -11,7 +13,6 @@ 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;
@@ -58,6 +59,18 @@ const PoolRows: React.FC<PoolRowsProps> = ({
}
};
const handleOnCell = async (row: NodePoolListItem, dataIndex: string) => {
console.log('handleOncell===', row, dataIndex);
try {
await updateWorkerPool({
data: row,
id: row.id
});
message.success(intl.formatMessage({ id: 'common.message.success' }));
} catch (error) {
// error
}
};
const handleEdit = (action: string, record: NodePoolListItem) => {
if (action === 'edit') {
setAddPoolStatus({
@@ -97,6 +110,7 @@ const PoolRows: React.FC<PoolRowsProps> = ({
});
const columns = usePoolsColumns(onSelect);
return (
<>
{dataList?.map((data: NodePoolListItem) => {
@@ -105,23 +119,32 @@ const PoolRows: React.FC<PoolRowsProps> = ({
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
<RowContext.Provider value={{ row: data, onCell: handleOnCell }}>
<RowChildren>
<Row style={{ width: '100%' }} align="middle">
{columns.map((col: Record<string, any>) => {
return (
<Col
key={col.dataIndex as string}
span={col.span}
style={{
paddingInline: 0,
...(col.style || {})
}}
>
{/* {col.render
? col.render(data[col.dataIndex as string], data)
: data[col.dataIndex as string]}
</Col>
);
})}
</Row>
</RowChildren>
: data[col.dataIndex as string]} */}
<CellContent
{...col}
dataIndex={col.dataIndex}
></CellContent>
</Col>
);
})}
</Row>
</RowChildren>
</RowContext.Provider>
</div>
);
})}
src/pages/cluster-management/components/provider-catalog.tsx
+1 -1
View File
@@ -21,7 +21,7 @@ const Title = styled.span`
align-items: center;
justify-content: space-between;
font-weight: 700;
font-size: 18px;
font-size: 16px;
margin-block: 16px 24px;
`;
src/pages/cluster-management/components/support-hardware.tsx
+2 -3
View File
@@ -13,10 +13,9 @@ const ProviderImage = ({ src, showBg }: { src: string; showBg?: boolean }) => {
<img
src={src}
style={{
width: 46,
width: 32,
objectFit: 'contain'
}}
width={46}
/>
);
};
@@ -37,7 +36,7 @@ const supportedHardPlatforms = [
icon: (
<IconFont
type="icon-amd"
style={{ fontSize: 46, color: 'var(--ant-color-text)' }}
style={{ fontSize: 32, color: 'var(--ant-color-text)' }}
/>
)
},
src/pages/cluster-management/components/worker-pools.tsx
+5 -5
View File
@@ -14,7 +14,7 @@ import {
updateWorkerPool,
WORKER_POOLS_API
} from '../apis';
import { ProviderValueMap } from '../config';
import { ProviderType, ProviderValueMap } from '../config';
import {
NodePoolListItem as ListItem,
NodePoolFormData
@@ -60,7 +60,7 @@ const WorkerPools = () => {
open: false,
action: PageAction.CREATE,
title: '',
provider: ProviderValueMap.DigitalOcean,
provider: ProviderValueMap.DigitalOcean as ProviderType,
currentData: null as ListItem | null,
clusterId: 0 as number | string
});
@@ -75,7 +75,7 @@ const WorkerPools = () => {
{ id: 'common.button.edit.item' },
{ name: record.instance_type }
),
provider: searchParams.get('provider') || '',
provider: searchParams.get('provider') as ProviderType,
currentData: record,
clusterId: searchParams.get('id') || 0
});
@@ -87,7 +87,7 @@ const WorkerPools = () => {
open: true,
action: PageAction.CREATE,
title: intl.formatMessage({ id: 'clusters.button.addNodePool' }),
provider: searchParams.get('provider') || '',
provider: searchParams.get('provider') as ProviderType,
clusterId: searchParams.get('id') || 0,
currentData: null
});
@@ -177,7 +177,7 @@ const WorkerPools = () => {
open: false,
action: PageAction.CREATE,
title: '',
provider: ProviderValueMap.DigitalOcean,
provider: ProviderValueMap.DigitalOcean as ProviderType,
currentData: null,
clusterId: 0
});
src/pages/cluster-management/config/index.ts
+2 -2
View File
@@ -56,7 +56,7 @@ export const providerList = [
icon: React.cloneElement(icons.Docker, {
style: { color: 'var(--ant-color-primary)' }
}),
group: 'default'
group: 'Self-Managed'
},
{
label: 'Kubernetes',
@@ -66,7 +66,7 @@ export const providerList = [
icon: React.cloneElement(icons.KubernetesOutlined, {
style: { color: 'var(--ant-color-primary)' }
}),
group: 'default'
group: 'Self-Managed'
},
{
label: 'DigitalOcean',
src/pages/cluster-management/config/types.ts
+13 -11
View File
@@ -22,10 +22,21 @@ export interface CredentialListItem {
updated_at: string;
}
export interface NodePoolListItem {
export interface NodePoolFormData {
name: string;
instance_type: string;
os_image: string;
replicas: number;
batch_size: number;
labels: Record<string, string>;
cloud_options: Record<string, any>;
}
export interface NodePoolListItem extends NodePoolFormData {
id: number;
instance_type: string;
replicas: number;
workers: number;
batch_size: number;
labels: Record<string, string>;
cloud_options: Record<string, any>;
@@ -35,20 +46,11 @@ export interface NodePoolListItem {
cluster_id: number;
}
export interface NodePoolFormData {
instance_type: string;
os_image: string;
replicas: number;
batch_size: number;
labels: Record<string, string>;
cloud_options: Record<string, any>;
}
export interface ClusterListItem {
name: string;
display_name: string;
description: string;
provider: string;
provider: ProviderType;
credential_id: number;
zone: string;
region: string;
src/pages/cluster-management/hooks/use-cluster-columns.tsx
+8 -2
View File
@@ -48,7 +48,11 @@ const useClusterColumns = (
title: intl.formatMessage({ id: 'clusters.table.provider' }),
dataIndex: 'provider',
span: 3,
render: (value: string) => <span>{ProviderLabelMap[value]}</span>
render: (value: string) => (
<AutoTooltip ghost minWidth={20}>
{ProviderLabelMap[value]}
</AutoTooltip>
)
},
{
title: intl.formatMessage({ id: 'common.table.status' }),
@@ -90,7 +94,9 @@ const useClusterColumns = (
dataIndex: 'created_at',
span: 4,
render: (value: string) => (
<span>{dayjs(value).format('YYYY-MM-DD HH:mm:ss')}</span>
<AutoTooltip ghost minWidth={20}>
{dayjs(value).format('YYYY-MM-DD HH:mm:ss')}
</AutoTooltip>
)
},
{
src/pages/cluster-management/hooks/use-pools-columns.tsx
+57 -21
View File
@@ -1,6 +1,5 @@
import AutoTooltip from '@/components/auto-tooltip';
import DropdownButtons from '@/components/drop-down-buttons';
import LabelsCell from '@/components/label-cell';
import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { ColumnsType } from 'antd/es/table';
@@ -34,9 +33,9 @@ const usePoolsColumns = (
return useMemo(() => {
return [
{
title: intl.formatMessage({ id: 'clusters.workerpool.instanceType' }),
dataIndex: 'instance_type',
key: 'instance_type',
title: intl.formatMessage({ id: 'common.table.name' }),
dataIndex: 'name',
key: 'name',
ellipsis: {
showTitle: false
},
@@ -51,16 +50,21 @@ const usePoolsColumns = (
)
},
{
title: intl.formatMessage({ id: 'clusters.workerpool.replicas' }),
dataIndex: 'replicas',
title: intl.formatMessage({ id: 'clusters.workerpool.instanceType' }),
dataIndex: 'instance_type',
key: 'instance_type',
ellipsis: {
showTitle: false
},
span: 3,
key: 'replicas'
},
{
title: intl.formatMessage({ id: 'clusters.workerpool.batchSize' }),
dataIndex: 'batch_size',
key: 'batch_size',
span: 3
style: {
paddingLeft: 12
},
render: (text: string) => (
<AutoTooltip title={text} ghost minWidth={20}>
{text}
</AutoTooltip>
)
},
{
title: intl.formatMessage({ id: 'clusters.workerpool.osImage' }),
@@ -70,6 +74,9 @@ const usePoolsColumns = (
ellipsis: {
showTitle: false
},
style: {
paddingLeft: 16
},
render: (text: string) => (
<AutoTooltip title={text} ghost minWidth={20}>
{text}
@@ -77,21 +84,46 @@ const usePoolsColumns = (
)
},
{
title: intl.formatMessage({ id: 'resources.table.labels' }),
dataIndex: 'labels',
key: 'labels',
width: 200,
span: 4,
title: 'Workers',
dataIndex: 'replicas',
span: 3,
key: 'replicas',
style: {
// textAlign: 'center'
paddingLeft: 4
},
editable: {
valueType: 'number',
title: intl.formatMessage({ id: 'models.table.replicas.edit' })
},
render: (text: string, record: ListItem) => (
<LabelsCell labels={record.labels}></LabelsCell>
<span>
{record.workers} / {record.replicas}
</span>
)
},
{
title: intl.formatMessage({ id: 'clusters.workerpool.batchSize' }),
dataIndex: 'batch_size',
key: 'batch_size',
span: 4
},
// {
// title: intl.formatMessage({ id: 'resources.table.labels' }),
// dataIndex: 'labels',
// key: 'labels',
// width: 200,
// span: 4,
// render: (text: string, record: ListItem) => (
// <LabelsCell labels={record.labels}></LabelsCell>
// )
// },
{
title: intl.formatMessage({ id: 'common.table.createTime' }),
dataIndex: 'create_at',
key: 'created_at',
span: 4,
showSorterTooltip: false,
showSorterTootip: false,
defaultSortOrder: 'descend',
sortOrder: sortOrder,
sorter: false,
@@ -101,7 +133,11 @@ const usePoolsColumns = (
style: {
paddingLeft: 42
},
render: (text: string) => dayjs(text).format('YYYY-MM-DD HH:mm:ss')
render: (text: string) => (
<AutoTooltip ghost minWidth={20}>
{dayjs(text).format('YYYY-MM-DD HH:mm:ss')}
</AutoTooltip>
)
},
{
title: intl.formatMessage({ id: 'common.table.operation' }),
src/pages/cluster-management/step-forms/use-step-list.tsx
+5 -5
View File
@@ -15,7 +15,7 @@ export default function useStepList() {
() => [
{
title: 'Select Cloud Provider',
content: 'Choose the cloud provider for your cluster.',
content: '',
showButtons: (provider?: ProviderType) => {
return {
previous: false,
@@ -31,7 +31,7 @@ export default function useStepList() {
},
{
title: 'Configure Cluster Settings',
content: 'Set up the basic configuration for your cluster.',
content: '',
showButtons: (provider?: ProviderType) => {
return {
previous: true,
@@ -47,7 +47,7 @@ export default function useStepList() {
},
{
title: 'Add Worker Pools',
content: 'Define the worker pools for your cluster.',
content: '',
showButtons: (provider?: ProviderType) => {
return {
previous: true,
@@ -64,7 +64,7 @@ export default function useStepList() {
},
{
title: 'Add Worker',
content: 'Add a worker node to your cluster.',
content: '',
showButtons: (provider?: ProviderType) => {
return {
previous: false,
@@ -80,7 +80,7 @@ export default function useStepList() {
},
{
title: 'Register Cluster',
content: 'Register your cluster with the chosen provider.',
content: '',
showButtons: (provider?: ProviderType) => {
return {
previous: false,
src/pages/cluster-management/step-forms/worker-pools-form.tsx
+26 -28
View File
@@ -53,7 +53,7 @@ const WorkerPoolsForm = forwardRef((props: WorkerPoolsFormProps, ref) => {
[
0,
{
instance_type: 'Pool-1'
name: 'Pool-1'
}
]
]) as Map<number, NodePoolFormData>
@@ -70,7 +70,7 @@ const WorkerPoolsForm = forwardRef((props: WorkerPoolsFormProps, ref) => {
const newId = updateCount();
setWorkerPoolList((prev) =>
new Map(prev).set(newId, {
instance_type: `Pool-${newId + 1}`
name: `Pool-${newId + 1}`
} as NodePoolFormData)
);
setActiveKey((prev) => new Set([newId]));
@@ -193,32 +193,30 @@ const WorkerPoolsForm = forwardRef((props: WorkerPoolsFormProps, ref) => {
></PageTools>
{Array.from(workerPoolList.keys()).map((key, index) => (
<div key={key}>
<PoolContainer>
<PoolFormWrapper>
<WorkerPoolForm
name={`workerPoolForm_${key}`}
action={action}
ref={(el: any) => {
if (el) {
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>
</div>
<PoolContainer key={key}>
<PoolFormWrapper>
<WorkerPoolForm
name={`workerPoolForm_${key}`}
action={action}
ref={(el: any) => {
if (el) {
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>
))}
</div>
);
src/pages/login/components/login-form.tsx
+1 -1
View File
@@ -106,7 +106,7 @@ const LoginForm = () => {
<img
src={LogoIcon}
alt="logo"
style={{ height: '24px', marginLeft: 10 }}
style={{ height: '36px', marginLeft: 10 }}
/>
</div>
</div>
src/pages/resources/apis/index.ts
+13 -1
View File
@@ -7,6 +7,14 @@ export const WORKERS_API = '/workers';
export const GPU_DEVICES_API = '/gpu-devices';
export const MODEL_FILES_API = '/model-files';
const matchFilename = (disposition: string | null): string | undefined => {
if (!disposition) return '';
const match = disposition.match(/filename="?([^"]+)"?/);
const filename = match ? match[1] : '';
return filename;
};
// download stream data and save as a csv file
export async function downloadWorkerPrivateKey({
id,
@@ -17,9 +25,13 @@ export async function downloadWorkerPrivateKey({
}) {
try {
const res = await fetch(`/v1${WORKERS_API}/${id}/privatekey`);
// header
const contentDispostion = res.headers.get('content-Disposition');
const filename =
matchFilename(contentDispostion) || `${name}-privatekey.pem`;
if (res.ok) {
const blob = await res.blob();
downloadFile(blob, `${name}-privatekey.csv`);
downloadFile(blob, filename);
}
} catch (error) {
message.error('Download failed');