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

fix: cluster apis

Browse Source
This commit is contained in:
jialin
2025-09-16 11:26:17 +08:00
parent f04f1f828f
commit 632f206228
34 changed files with 578 additions and 329 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/cluster-management/apis/index.ts
+4 -2
View File
@@ -84,7 +84,9 @@ export async function deleteCluster(id: number) {
});
}
export async function queryClusterDetail(params: { cluster_id: number }) {
export async function queryClusterDetail(params: {
cluster_id: number | string;
}) {
return request(`${DASHBOARD_API}`, {
method: 'GET',
params
@@ -113,7 +115,7 @@ export async function queryWorkerPools(
export async function createWorkerPool(params: {
data: NodePoolFormData;
clusterId: number;
clusterId: number | string;
}) {
return request(`${CLUSTERS_API}/${params.clusterId}${WORKER_POOLS_API}`, {
method: 'POST',
src/pages/cluster-management/cluster-detail.tsx
+33
View File
@@ -0,0 +1,33 @@
import { PageContainer } from '@ant-design/pro-components';
import { useSearchParams } from '@umijs/max';
import ClusterMetrics from './components/cluster-metrics';
import WorkerPools from './components/worker-pools';
import { ProviderValueMap } from './config';
const ClusterDetailModal = () => {
const [searchParams] = useSearchParams();
const provider = searchParams.get('provider');
const clusterName = searchParams.get('name');
return (
<PageContainer
ghost
header={{
title: (
<span className="flex-center">
<span>{clusterName}</span>
</span>
),
style: {
paddingInline: 'var(--layout-content-header-inlinepadding)'
},
breadcrumb: {}
}}
extra={[]}
>
<ClusterMetrics />
{provider === ProviderValueMap.DigitalOcean && <WorkerPools />}
</PageContainer>
);
};
export default ClusterDetailModal;
src/pages/cluster-management/clusters.tsx
+5 -22
View File
@@ -5,7 +5,7 @@ import type { PageActionType } from '@/config/types';
import useTableFetch from '@/hooks/use-table-fetch';
import AddWorker from '@/pages/resources/components/add-worker';
import { PageContainer } from '@ant-design/pro-components';
import { useIntl } from '@umijs/max';
import { useIntl, useNavigate, useSearchParams } from '@umijs/max';
import { useMemoizedFn } from 'ahooks';
import { Table, message } from 'antd';
import { useEffect, useState } from 'react';
@@ -20,7 +20,6 @@ import {
} from './apis';
import AddCluster from './components/add-cluster';
import AddPool from './components/add-pool';
import ClusterDetailModal from './components/cluster-detail-modal';
import RegisterCluster from './components/register-cluster';
import { ProviderLabelMap, ProviderValueMap, addActions } from './config';
import {
@@ -49,6 +48,8 @@ const Credentials: React.FC = () => {
contentForDelete: 'menu.clusterManagement.clusters'
});
const [searchParams, setSearchParams] = useSearchParams();
const navigate = useNavigate();
const intl = useIntl();
const [registerClusterStatus, setRegisterClusterStatus] = useState<{
open: boolean;
@@ -67,13 +68,7 @@ const Credentials: React.FC = () => {
cluster_id: 0
}
});
const [openClusterDetail, setOpenClusterDetail] = useState<{
open: boolean;
currentData: ListItem | null;
}>({
open: false,
currentData: {} as ListItem
});
const [openAddWorker, setOpenAddWorker] = useState<{
open: boolean;
registrationInfo: {
@@ -144,7 +139,7 @@ const Credentials: React.FC = () => {
setAddPoolStatus({
open: true,
action: PageAction.CREATE,
title: `Add Node Pool`,
title: intl.formatMessage({ id: 'clusters.button.addNodePool' }),
provider: row.provider,
clusterId: row.id
});
@@ -245,11 +240,6 @@ const Credentials: React.FC = () => {
handleAddWorker(row);
} else if (val === 'addPool') {
handleAddPool(row);
} else if (val === 'details') {
setOpenClusterDetail({
open: true,
currentData: row
});
} else if (val === 'register_cluster') {
handleRegisterCluster(row);
}
@@ -355,13 +345,6 @@ const Credentials: React.FC = () => {
}
registrationInfo={openAddWorker.registrationInfo}
></AddWorker>
<ClusterDetailModal
open={openClusterDetail.open}
currentData={openClusterDetail.currentData}
onClose={() =>
setOpenClusterDetail({ open: false, currentData: {} as ListItem })
}
></ClusterDetailModal>
<RegisterCluster
title={intl.formatMessage({ id: 'clusters.button.register' })}
open={registerClusterStatus.open}
src/pages/cluster-management/components/add-credential.tsx
+4 -2
View File
@@ -3,6 +3,7 @@ import ScrollerModal from '@/components/scroller-modal';
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 { useIntl } from '@umijs/max';
import { Form } from 'antd';
import React, { useEffect } from 'react';
@@ -32,6 +33,7 @@ const AddModal: React.FC<AddModalProps> = ({
}) => {
const [form] = Form.useForm();
const intl = useIntl();
const { getRuleMessage } = useAppUtils();
const handleSumit = () => {
form.submit();
@@ -93,12 +95,12 @@ const AddModal: React.FC<AddModalProps> = ({
rules={[
{
required: action === PageAction.CREATE,
message: 'Access Token is required'
message: getRuleMessage('input', 'clusters.credential.token')
}
]}
>
<SealInput.Password
label="Access Token"
label={intl.formatMessage({ id: 'clusters.credential.token' })}
required={action === PageAction.CREATE}
></SealInput.Password>
</Form.Item>
src/pages/cluster-management/components/add-pool.tsx
+28 -29
View File
@@ -3,7 +3,9 @@ import ModalFooter from '@/components/modal-footer';
import ScrollerModal from '@/components/scroller-modal';
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 { useIntl } from '@umijs/max';
import { Form } from 'antd';
import _ from 'lodash';
@@ -33,6 +35,7 @@ const AddCluster: React.FC<AddModalProps> = ({
}) => {
const [form] = Form.useForm();
const intl = useIntl();
const { getRuleMessage } = useAppUtils();
const handleSumit = () => {
form.submit();
@@ -97,17 +100,17 @@ const AddCluster: React.FC<AddModalProps> = ({
rules={[
{
required: true,
message: intl.formatMessage(
{ id: 'common.form.rule.input' },
{
name: intl.formatMessage({ id: 'common.table.name' })
}
message: getRuleMessage(
'input',
'clusters.workerpool.instanceType'
)
}
]}
>
<SealInput.Input
label={intl.formatMessage({ id: 'common.table.name' })}
label={intl.formatMessage({
id: 'clusters.workerpool.instanceType'
})}
required
></SealInput.Input>
</Form.Item>
@@ -116,49 +119,45 @@ const AddCluster: React.FC<AddModalProps> = ({
rules={[
{
required: true,
message: intl.formatMessage(
{ id: 'common.form.rule.input' },
{
name: 'Replicas'
}
)
message: getRuleMessage('input', 'clusters.workerpool.replicas')
}
]}
>
<SealInputNumber label="Replicas" required></SealInputNumber>
<SealInputNumber
label={intl.formatMessage({ id: 'clusters.workerpool.replicas' })}
required
></SealInputNumber>
</Form.Item>
<Form.Item<FormData>
name="batch_size"
rules={[
{
required: true,
message: intl.formatMessage(
{ id: 'common.form.rule.input' },
{
name: 'Batch Size'
}
)
message: getRuleMessage('input', 'clusters.workerpool.batchSize')
}
]}
>
<SealInputNumber label="Batch Size" required></SealInputNumber>
<SealInputNumber
label={intl.formatMessage({ id: 'clusters.workerpool.batchSize' })}
required
></SealInputNumber>
</Form.Item>
<Form.Item<FormData>
name="os_image"
rules={[
{
required: true,
message: intl.formatMessage(
{ id: 'common.form.rule.input' },
{
name: 'OS Image'
}
)
message: getRuleMessage('input', 'clusters.workerpool.osImage')
}
]}
>
<SealInput.Input label={'OS Image'} required></SealInput.Input>
<SealInput.Input
disabled={action === PageAction.EDIT}
label={intl.formatMessage({ id: 'clusters.workerpool.osImage' })}
required
></SealInput.Input>
</Form.Item>
<Form.Item<FormData>
name="labels"
rules={[
@@ -184,9 +183,9 @@ const AddCluster: React.FC<AddModalProps> = ({
]}
>
<LabelSelector
label="Labels"
label={intl.formatMessage({ id: 'resources.table.labels' })}
labels={form.getFieldValue('labels') || {}}
btnText="Add Label"
btnText={intl.formatMessage({ id: 'common.button.addLabel' })}
></LabelSelector>
</Form.Item>
<Form.Item<FormData>
src/pages/cluster-management/components/cloud-provider-form.tsx
+11 -8
View File
@@ -1,4 +1,5 @@
import SealSelect from '@/components/seal-form/seal-select';
import useAppUtils from '@/hooks/use-app-utils';
import { useIntl } from '@umijs/max';
import { Form } from 'antd';
import _ from 'lodash';
@@ -11,6 +12,7 @@ type OptionData = {
label: string;
datacenter: string;
value: string;
icon: string;
};
const OptionItem = styled.div`
@@ -30,6 +32,9 @@ const OptionItem = styled.div`
.value {
color: var(--ant-color-text-secondary);
}
.icon {
margin-right: 8px;
}
`;
interface CloudProviderProps {
@@ -50,6 +55,7 @@ const optionRender = (
return (
<OptionItem className="flex-center">
<span className="icon">{data.icon}</span>
<span className="label">{data.label}</span> <span className="dot"></span>
<span className="datacenter">{data.datacenter}</span>{' '}
<span className="dot"></span>{' '}
@@ -65,6 +71,7 @@ const labelRender = (props: {
const data = regionList.find((item) => item.value === props.value);
return (
<OptionItem className="flex-center">
<span className="icon">{data?.icon}</span>
<span className="label">{data?.label}</span> <span className="dot"></span>
<span className="datacenter">{data?.datacenter}</span>{' '}
<span className="dot"></span>
@@ -76,6 +83,7 @@ const labelRender = (props: {
const CloudProvider: React.FC<CloudProviderProps> = (props) => {
const { credentialList } = props;
const intl = useIntl();
const { getRuleMessage } = useAppUtils();
return (
<>
@@ -94,7 +102,7 @@ const CloudProvider: React.FC<CloudProviderProps> = (props) => {
]}
>
<SealSelect
label="Credential"
label={intl.formatMessage({ id: 'clusters.credential.title' })}
required
options={credentialList}
></SealSelect>
@@ -104,17 +112,12 @@ const CloudProvider: React.FC<CloudProviderProps> = (props) => {
rules={[
{
required: true,
message: intl.formatMessage(
{ id: 'common.form.rule.input' },
{
name: 'Region'
}
)
message: getRuleMessage('input', 'clusters.workerpool.region')
}
]}
>
<SealSelect
label="Region"
label={intl.formatMessage({ id: 'clusters.workerpool.region' })}
required
options={regionList}
labelRender={labelRender}
src/pages/cluster-management/components/cluster-detail-modal.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import GSDrawer from '@/components/scroller-modal/gs-drawer';
import React from 'react';
import { ClusterListItem } from '../config/types';
import ClusterDetailContent from './cluster-detail-content';
import ClusterDetailContent from './cluster-metrics';
interface ClusterDetailModalProps {
open: boolean;
src/pages/cluster-management/components/cluster-detail-content.tsx → src/pages/cluster-management/components/cluster-metrics.tsx
+12 -25
View File
@@ -1,15 +1,13 @@
import GaugeChart from '@/components/echarts/gauge';
import Card from '@/components/templates/card';
import { PageAction } from '@/config';
import { useSearchParams } from '@umijs/max';
import { Col, Row } from 'antd';
import _ from 'lodash';
import React, { useEffect, useState } from 'react';
import { useEffect, useState } from 'react';
import styled from 'styled-components';
import { queryClusterDetail } from '../apis';
import { ProviderValueMap } from '../config';
import { ClusterListItem, NodePoolListItem } from '../config/types';
import { ClusterListItem } from '../config/types';
import TrendChart from './trend-chart';
import WorkerPools from './worker-pools';
const metricsMap = {
cpu: {
@@ -81,17 +79,11 @@ const formatValue = (value: number) => {
const CardHeight = 336;
const ClusterDetail: React.FC<ClusterDetailProps> = ({ data }) => {
const ClusterMetrics = () => {
const chartHeight = 160;
const [show, setShow] = React.useState(false);
const [addPoolStatus, setAddPoolStatus] = React.useState({
open: false,
action: PageAction.CREATE,
title: '',
provider: ProviderValueMap.DigitalOcean,
currentData: null as NodePoolListItem | null,
clusterId: 0
});
const [searchParams] = useSearchParams();
const id = searchParams.get('id');
const provider = searchParams.get('provider');
const [detailContent, setDetailContent] = useState<{
current: {
cpu: number;
@@ -111,12 +103,12 @@ const ClusterDetail: React.FC<ClusterDetailProps> = ({ data }) => {
});
const getClusterDetail = async () => {
if (!data) {
if (!id) {
return;
}
try {
const response = await queryClusterDetail({
cluster_id: data!.id
cluster_id: id
});
setDetailContent({
current: response.system_load?.current,
@@ -137,10 +129,10 @@ const ClusterDetail: React.FC<ClusterDetailProps> = ({ data }) => {
};
useEffect(() => {
if (data?.id) {
if (id) {
getClusterDetail();
}
}, [data?.id]);
}, [id]);
return (
<div>
@@ -225,13 +217,8 @@ const ClusterDetail: React.FC<ClusterDetailProps> = ({ data }) => {
</Card>
</Col>
</Row>
{data?.provider === ProviderValueMap.DigitalOcean && (
<>
<WorkerPools clusterData={data} height={'auto'} />
</>
)}
</div>
);
};
export default ClusterDetail;
export default ClusterMetrics;
src/pages/cluster-management/components/trend-chart.tsx
+1
View File
@@ -63,6 +63,7 @@ const TrendChart: React.FC<TrendChartProps> = ({
<LineChart
height={320}
title={title}
showArea={false}
seriesData={generateData.seriesData}
legendData={generateData.legendData}
xAxisData={generateData.xAxisData}
src/pages/cluster-management/components/worker-pools.tsx
+83 -113
View File
@@ -1,12 +1,10 @@
import DeleteModal from '@/components/delete-modal';
import DropdownButtons from '@/components/drop-down-buttons';
import LabelsCell from '@/components/label-cell';
import { FilterBar } from '@/components/page-tools';
import { PageAction } from '@/config';
import useTableFetch from '@/hooks/use-table-fetch';
import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { useIntl, useSearchParams } from '@umijs/max';
import { useMemoizedFn } from 'ahooks';
import { message, Table } from 'antd';
import dayjs from 'dayjs';
import { useState } from 'react';
import styled from 'styled-components';
import {
@@ -18,10 +16,10 @@ import {
} from '../apis';
import { ProviderValueMap } from '../config';
import {
ClusterListItem,
NodePoolListItem as ListItem,
NodePoolFormData
} from '../config/types';
import usePoolsColumns from '../hooks/use-pools-columns';
import AddPool from './add-pool';
const SubTitle = styled.div`
@@ -31,39 +29,14 @@ const SubTitle = styled.div`
margin-block: 24px 16px;
`;
const actionItems = [
{
key: 'edit',
label: 'common.button.edit',
icon: <EditOutlined />
},
{
key: 'delete',
label: 'common.button.delete',
icon: <DeleteOutlined />,
props: {
danger: true
}
}
];
interface WorkerPoolsProps {
loading?: boolean;
height?: string | number;
clusterData: ClusterListItem | null;
}
const WorkerPools: React.FC<WorkerPoolsProps> = ({
loading = false,
clusterData,
height = 'auto'
}) => {
const WorkerPools = () => {
const [searchParams] = useSearchParams();
const {
dataSource,
rowSelection,
queryParams,
modalRef,
sortOrder,
fetchData,
handleDelete,
handleDeleteBatch,
@@ -77,9 +50,9 @@ const WorkerPools: React.FC<WorkerPoolsProps> = ({
deleteAPI: deleteWorkerPool,
API: WORKER_POOLS_API,
watch: false,
contentForDelete: 'resources.modelfiles.modelfile',
contentForDelete: 'clusters.workerpool.title',
defaultQueryParams: {
cluster_id: clusterData!.id
cluster_id: searchParams.get('id') || undefined
}
});
const intl = useIntl();
@@ -89,7 +62,7 @@ const WorkerPools: React.FC<WorkerPoolsProps> = ({
title: '',
provider: ProviderValueMap.DigitalOcean,
currentData: null as ListItem | null,
clusterId: 0
clusterId: 0 as number | string
});
// pool action handler
@@ -98,29 +71,43 @@ const WorkerPools: React.FC<WorkerPoolsProps> = ({
setAddPoolStatus({
open: true,
action: PageAction.EDIT,
title: 'Edit Worker Pool',
provider: clusterData!.provider,
title: intl.formatMessage(
{ id: 'common.button.edit.item' },
{ name: record.instance_type }
),
provider: searchParams.get('provider') || '',
currentData: record,
clusterId: clusterData!.id
clusterId: searchParams.get('id') || 0
});
}
};
const onSelect = (key: string, record: ListItem) => {
const handleAddPool = (row: ListItem) => {
setAddPoolStatus({
open: true,
action: PageAction.CREATE,
title: intl.formatMessage({ id: 'clusters.button.addNodePool' }),
provider: searchParams.get('provider') || '',
clusterId: searchParams.get('id') || 0,
currentData: null
});
};
const onSelect = useMemoizedFn((key: string, record: ListItem) => {
if (key === 'delete') {
handleDelete({ ...record, name: record.instance_type });
}
if (key === 'edit') {
handleEdit(key, record);
}
};
});
const handleSubmitWorkerPool = async (formdata: NodePoolFormData) => {
try {
if (addPoolStatus.action === PageAction.CREATE) {
await createWorkerPool({
data: formdata,
clusterId: clusterData!.id
clusterId: searchParams.get('id') || 0
});
}
if (addPoolStatus.action === PageAction.EDIT) {
@@ -140,81 +127,64 @@ const WorkerPools: React.FC<WorkerPoolsProps> = ({
});
};
const columns = [
{
title: 'Instance Type',
dataIndex: 'instance_type',
key: 'instance_type'
},
{
title: 'Replicas',
dataIndex: 'replicas',
key: 'replicas'
},
{
title: 'Batch Size',
dataIndex: 'batch_size',
key: 'batch_size'
},
{
title: 'Labels',
dataIndex: 'labels',
key: 'labels',
render: (text: string, record: ListItem) => (
<LabelsCell labels={record.labels}></LabelsCell>
)
},
{
title: 'Create Time',
dataIndex: 'create_at',
key: 'created_at',
render: (text: string) => dayjs(text).format('YYYY-MM-DD HH:mm:ss')
},
{
title: 'Operations',
key: 'operations',
render: (text: string, record: ListItem) => (
<DropdownButtons
items={actionItems}
onSelect={(key) => onSelect?.(key, record)}
/>
)
}
];
const columns = usePoolsColumns(sortOrder, onSelect);
return (
<>
<SubTitle>
<span>Worker Pools</span>
<span>{intl.formatMessage({ id: 'clusters.workerpool.title' })}</span>
</SubTitle>
<div style={{ height: height, overflow: 'hidden' }}>
<Table
dataSource={dataSource.dataList}
columns={columns}
loading={loading}
pagination={false}
rowKey="id"
/>
<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: ProviderValueMap.DigitalOcean,
currentData: null,
clusterId: 0
});
}}
onOk={handleSubmitWorkerPool}
></AddPool>
<DeleteModal ref={modalRef}></DeleteModal>
</div>
<FilterBar
showSelect={false}
showPrimaryButton={true}
showDeleteButton={true}
marginBottom={22}
marginTop={22}
width={{ input: 300 }}
buttonText={intl.formatMessage({ id: 'clusters.button.addNodePool' })}
rowSelection={rowSelection}
handleInputChange={handleNameChange}
handleSearch={handleSearch}
handleDeleteByBatch={handleDeleteBatch}
handleClickPrimary={handleAddPool}
></FilterBar>
<Table
rowKey="id"
tableLayout="fixed"
style={{ width: '100%' }}
onChange={handleTableChange}
dataSource={dataSource.dataList}
loading={dataSource.loading}
rowSelection={rowSelection}
columns={columns}
pagination={{
showSizeChanger: true,
pageSize: queryParams.perPage,
current: queryParams.page,
total: dataSource.total,
hideOnSinglePage: queryParams.perPage === 10,
onChange: handlePageChange
}}
></Table>
<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: ProviderValueMap.DigitalOcean,
currentData: null,
clusterId: 0
});
}}
onOk={handleSubmitWorkerPool}
></AddPool>
<DeleteModal ref={modalRef}></DeleteModal>
</>
);
};
src/pages/cluster-management/config/index.ts
+31 -20
View File
@@ -87,11 +87,6 @@ export const clusterActionList = [
label: 'common.button.edit',
icon: icons.EditOutlined
},
{
key: 'details',
label: 'common.button.detail',
icon: icons.FileTextOutlined
},
{
key: 'add_worker',
label: 'resources.button.create',
@@ -127,20 +122,36 @@ export const regionList: {
label: string;
datacenter: string;
value: string;
icon: string;
}[] = [
{ label: 'New York', datacenter: 'Datacenter 1', value: 'nyc1' },
{ label: 'New York', datacenter: 'Datacenter 2', value: 'nyc2' },
{ label: 'New York', datacenter: 'Datacenter 3', value: 'nyc3' },
{ label: 'Toronto', datacenter: 'Datacenter 1', value: 'tor1' },
{ label: 'San Francisco', datacenter: 'Datacenter 1', value: 'sfo1' },
{ label: 'San Francisco', datacenter: 'Datacenter 2', value: 'sfo2' },
{ label: 'San Francisco', datacenter: 'Datacenter 3', value: 'sfo3' },
{ label: 'Atlanta', datacenter: 'Datacenter 1', value: 'atl1' },
{ label: 'Singapore', datacenter: 'Datacenter 1', value: 'sgp1' },
{ label: 'Bangalore', datacenter: 'Datacenter 1', value: 'blr1' },
{ label: 'London', datacenter: 'Datacenter 1', value: 'lon1' },
{ label: 'Amsterdam', datacenter: 'Datacenter 2', value: 'ams2' },
{ label: 'Amsterdam', datacenter: 'Datacenter 3', value: 'ams3' },
{ label: 'Frankfurt', datacenter: 'Datacenter 1', value: 'fra1' },
{ label: 'Sydney', datacenter: 'Datacenter 1', value: 'syd1' }
{ label: 'New York', datacenter: 'Datacenter 1', value: 'nyc1', icon: '🇺🇸' },
{ label: 'New York', datacenter: 'Datacenter 2', value: 'nyc2', icon: '🇺🇸' },
{ label: 'New York', datacenter: 'Datacenter 3', value: 'nyc3', icon: '🇺🇸' },
{ label: 'Toronto', datacenter: 'Datacenter 1', value: 'tor1', icon: '🇨🇦' },
{
label: 'San Francisco',
datacenter: 'Datacenter 1',
value: 'sfo1',
icon: '🇺🇸'
},
{
label: 'San Francisco',
datacenter: 'Datacenter 2',
value: 'sfo2',
icon: '🇺🇸'
},
{
label: 'San Francisco',
datacenter: 'Datacenter 3',
value: 'sfo3',
icon: '🇺🇸'
},
{ label: 'Atlanta', datacenter: 'Datacenter 1', value: 'atl1', icon: '🇺🇸' },
{ label: 'Singapore', datacenter: 'Datacenter 1', value: 'sgp1', icon: '🇸🇬' },
{ label: 'Bangalore', datacenter: 'Datacenter 1', value: 'blr1', icon: '🇮🇳' },
{ label: 'London', datacenter: 'Datacenter 1', value: 'lon1', icon: '🇬🇧' },
{ label: 'Amsterdam', datacenter: 'Datacenter 2', value: 'ams2', icon: '🇳🇱' },
{ label: 'Amsterdam', datacenter: 'Datacenter 3', value: 'ams3', icon: '🇳🇱' },
{ label: 'Frankfurt', datacenter: 'Datacenter 1', value: 'fra1', icon: '🇩🇪' },
{ label: 'Sydney', datacenter: 'Datacenter 1', value: 'syd1', icon: '🇦🇺' }
];
src/pages/cluster-management/hooks/use-cluster-columns.tsx
+19 -10
View File
@@ -2,7 +2,7 @@
import AutoTooltip from '@/components/auto-tooltip';
import DropdownButtons from '@/components/drop-down-buttons';
import StatusTag from '@/components/status-tag';
import { useIntl } from '@umijs/max';
import { Link, useIntl } from '@umijs/max';
import { ColumnsType } from 'antd/es/table';
import dayjs from 'dayjs';
import { useMemo } from 'react';
@@ -14,25 +14,34 @@ import {
} from '../config';
import { ClusterListItem } from '../config/types';
const setActionsItems = (row: ClusterListItem) => {
return clusterActionList.filter((item) => {
if (item.provider) {
return item.provider === row.provider;
}
return true;
});
};
const useClusterColumns = (
handleSelect: (val: string, record: ClusterListItem) => void
): ColumnsType<ClusterListItem> => {
const intl = useIntl();
const setActionsItems = (row: ClusterListItem) => {
return clusterActionList.filter((item) => {
if (item.provider) {
return item.provider === row.provider;
}
return true;
});
};
return useMemo(() => {
return [
{
title: intl.formatMessage({ id: 'common.table.name' }),
dataIndex: 'name',
render: (text: string) => <AutoTooltip ghost>{text}</AutoTooltip>
render: (text: string, record: ClusterListItem) => (
<AutoTooltip ghost>
<Link
to={`/cluster-management/cluster/detail?id=${record.id}&provider=${record.provider}&name=${record.name}`}
>
{text}
</Link>
</AutoTooltip>
)
},
{
title: intl.formatMessage({ id: 'clusters.table.provider' }),
src/pages/cluster-management/hooks/use-pools-columns.tsx
+108
View File
@@ -0,0 +1,108 @@
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';
import type { SortOrder } from 'antd/es/table/interface';
import dayjs from 'dayjs';
import { useMemo } from 'react';
import { NodePoolListItem as ListItem } from '../config/types';
const actionItems = [
{
key: 'edit',
label: 'common.button.edit',
icon: <EditOutlined />
},
{
key: 'delete',
label: 'common.button.delete',
icon: <DeleteOutlined />,
props: {
danger: true
}
}
];
const usePoolsColumns = (
sortOrder: SortOrder,
handleSelect: (val: string, record: ListItem) => void
): ColumnsType<ListItem> => {
const intl = useIntl();
return useMemo(() => {
return [
{
title: intl.formatMessage({ id: 'clusters.workerpool.instanceType' }),
dataIndex: 'instance_type',
key: 'instance_type',
ellipsis: {
showTitle: false
},
render: (text: string) => (
<AutoTooltip title={text} ghost minWidth={20}>
{text}
</AutoTooltip>
)
},
{
title: intl.formatMessage({ id: 'clusters.workerpool.replicas' }),
dataIndex: 'replicas',
key: 'replicas'
},
{
title: intl.formatMessage({ id: 'clusters.workerpool.batchSize' }),
dataIndex: 'batch_size',
key: 'batch_size'
},
{
title: intl.formatMessage({ id: 'clusters.workerpool.osImage' }),
dataIndex: 'os_image',
key: 'os_image',
ellipsis: {
showTitle: false
},
render: (text: string) => (
<AutoTooltip title={text} ghost minWidth={20}>
{text}
</AutoTooltip>
)
},
{
title: intl.formatMessage({ id: 'resources.table.labels' }),
dataIndex: 'labels',
key: 'labels',
width: 200,
render: (text: string, record: ListItem) => (
<LabelsCell labels={record.labels}></LabelsCell>
)
},
{
title: intl.formatMessage({ id: 'common.table.createTime' }),
dataIndex: 'create_at',
key: 'created_at',
showSorterTooltip: false,
defaultSortOrder: 'descend',
sortOrder: sortOrder,
sorter: false,
ellipsis: {
showTitle: false
},
render: (text: string) => dayjs(text).format('YYYY-MM-DD HH:mm:ss')
},
{
title: intl.formatMessage({ id: 'common.table.operation' }),
key: 'operations',
render: (text: string, record: ListItem) => (
<DropdownButtons
items={actionItems}
onSelect={(key) => handleSelect?.(key, record)}
/>
)
}
];
}, [sortOrder, handleSelect]);
};
export default usePoolsColumns;
src/pages/cluster-management/layout/index.tsx
+20
View File
@@ -0,0 +1,20 @@
import { Outlet } from '@umijs/max';
import React, { useEffect, useRef, useState } from 'react';
const ListLayout: React.FC = () => {
const [listParams, setListParams] = useState({ page: 1, keyword: '' });
const scrollRef = useRef<number>(0);
useEffect(() => {
console.log('cluster layout:');
}, []);
return (
<div>
{/* 提供上下文给子路由：ListPage & DetailPage */}
<Outlet context={{ listParams, setListParams, scrollRef }} />
</div>
);
};
export default ListLayout;