chore: adjust deployment modal form
This commit is contained in:
jialin
@@ -0,0 +1,489 @@
|
||||
import AutoTooltip from '@/components/auto-tooltip';
|
||||
import DeleteModal from '@/components/delete-modal';
|
||||
import DropDownActions from '@/components/drop-down-actions';
|
||||
import DropdownButtons from '@/components/drop-down-buttons';
|
||||
import IconFont from '@/components/icon-font';
|
||||
import PageTools from '@/components/page-tools';
|
||||
import { PageAction } from '@/config';
|
||||
import type { PageActionType } from '@/config/types';
|
||||
import useTableFetch from '@/hooks/use-table-fetch';
|
||||
import AddWorker from '@/pages/resources/components/add-worker';
|
||||
import {
|
||||
DeleteOutlined,
|
||||
DownOutlined,
|
||||
EditOutlined,
|
||||
KubernetesOutlined,
|
||||
ProfileOutlined,
|
||||
SyncOutlined
|
||||
} from '@ant-design/icons';
|
||||
import { PageContainer } from '@ant-design/pro-components';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import {
|
||||
Button,
|
||||
ConfigProvider,
|
||||
Empty,
|
||||
Input,
|
||||
Space,
|
||||
Table,
|
||||
message
|
||||
} from 'antd';
|
||||
import { useState } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import {
|
||||
createCredential,
|
||||
deleteCredential,
|
||||
queryCredentialList,
|
||||
updateCredential
|
||||
} from './apis';
|
||||
import AddCluster from './components/add-cluster';
|
||||
import AddPool from './components/add-pool';
|
||||
import { ClusterDataList } from './config';
|
||||
import {
|
||||
ClusterFormData as FormData,
|
||||
ClusterListItem as ListItem
|
||||
} from './config/types';
|
||||
const { Column } = Table;
|
||||
|
||||
const addActions = [
|
||||
{
|
||||
label: 'Custom',
|
||||
locale: false,
|
||||
value: 'custom',
|
||||
key: 'custom',
|
||||
icon: <IconFont type="icon-docker" className="size-16" />
|
||||
},
|
||||
{
|
||||
label: 'Kubernetes',
|
||||
locale: false,
|
||||
value: 'kubernetes',
|
||||
key: 'kubernetes',
|
||||
icon: <KubernetesOutlined className="size-16" />
|
||||
},
|
||||
{
|
||||
label: 'Digital Ocean',
|
||||
locale: false,
|
||||
value: 'digitalocean',
|
||||
key: 'digitalocean',
|
||||
icon: <IconFont type="icon-digitalocean" />
|
||||
}
|
||||
];
|
||||
|
||||
const WorkerWrapper = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
align-items: flex-start;
|
||||
.worker {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
.value {
|
||||
line-height: 1em;
|
||||
color: var(--ant-color-text-secondary);
|
||||
}
|
||||
}
|
||||
.dot {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
margin-right: 4px;
|
||||
&.ready {
|
||||
background-color: var(--ant-color-success);
|
||||
}
|
||||
&.error {
|
||||
background-color: var(--ant-color-error);
|
||||
}
|
||||
|
||||
&.transition {
|
||||
background-color: var(--ant-blue-5);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const ActionList = [
|
||||
{
|
||||
key: 'edit',
|
||||
label: 'common.button.edit',
|
||||
icon: <EditOutlined></EditOutlined>
|
||||
},
|
||||
{
|
||||
key: 'add',
|
||||
label: 'Add Worker',
|
||||
locale: false,
|
||||
icon: <EditOutlined></EditOutlined>
|
||||
},
|
||||
|
||||
{
|
||||
key: 'terminal',
|
||||
label: 'common.button.detail',
|
||||
icon: <ProfileOutlined />
|
||||
},
|
||||
{
|
||||
key: 'addPool',
|
||||
label: 'Add Node Pool',
|
||||
locale: false,
|
||||
icon: <IconFont type="icon-catalog1" />
|
||||
},
|
||||
{
|
||||
key: 'delete',
|
||||
props: {
|
||||
danger: true
|
||||
},
|
||||
label: 'common.button.delete',
|
||||
icon: <DeleteOutlined></DeleteOutlined>
|
||||
}
|
||||
];
|
||||
|
||||
const Credentials: React.FC = () => {
|
||||
const {
|
||||
dataSource,
|
||||
rowSelection,
|
||||
queryParams,
|
||||
sortOrder,
|
||||
modalRef,
|
||||
handleDelete,
|
||||
handleDeleteBatch,
|
||||
fetchData,
|
||||
handlePageChange,
|
||||
handleTableChange,
|
||||
handleSearch,
|
||||
handleNameChange
|
||||
} = useTableFetch<ListItem>({
|
||||
fetchAPI: queryCredentialList,
|
||||
deleteAPI: deleteCredential,
|
||||
contentForDelete: 'users.table.user'
|
||||
});
|
||||
|
||||
const intl = useIntl();
|
||||
const [open, setOpen] = useState(false);
|
||||
const [openAddModal, setOpenAddModal] = useState(false);
|
||||
const [provider, setProvider] = useState<string>('custom');
|
||||
const [action, setAction] = useState<PageActionType>(PageAction.CREATE);
|
||||
const [title, setTitle] = useState<string>('');
|
||||
const [addPoolStatus, setAddPoolStatus] = useState<{
|
||||
open: boolean;
|
||||
action: PageActionType;
|
||||
title: string;
|
||||
provider: string;
|
||||
}>({
|
||||
open: false,
|
||||
action: PageAction.CREATE,
|
||||
title: '',
|
||||
provider: 'digitalocean'
|
||||
});
|
||||
const [currentData, setCurrentData] = useState<ListItem | undefined>(
|
||||
undefined
|
||||
);
|
||||
|
||||
const setActions = (row: ListItem) => {
|
||||
if (row.provider !== 'custom') {
|
||||
return ActionList.filter((item) => item.key !== 'add');
|
||||
}
|
||||
return ActionList;
|
||||
};
|
||||
|
||||
const handleAddCluster = (value: string) => {
|
||||
setOpenAddModal(true);
|
||||
setAction(PageAction.CREATE);
|
||||
setProvider(value);
|
||||
const label = addActions.find((item) => item.value === value)?.label;
|
||||
setTitle(`Add ${label} Cluster`);
|
||||
};
|
||||
|
||||
const handleAddPool = (value: string) => {
|
||||
setAddPoolStatus({
|
||||
open: true,
|
||||
action: PageAction.CREATE,
|
||||
title: `Add Node Pool`,
|
||||
provider: value
|
||||
});
|
||||
};
|
||||
|
||||
const handleClickDropdown = (item: any) => {
|
||||
handleAddCluster(item.key);
|
||||
};
|
||||
|
||||
const handleModalOk = async (data: FormData) => {
|
||||
const params = {
|
||||
...data
|
||||
};
|
||||
try {
|
||||
if (action === PageAction.EDIT) {
|
||||
await updateCredential({
|
||||
data: {
|
||||
...params,
|
||||
id: currentData?.id
|
||||
}
|
||||
});
|
||||
} else {
|
||||
await createCredential({ data: params });
|
||||
}
|
||||
fetchData();
|
||||
setOpenAddModal(false);
|
||||
message.success(intl.formatMessage({ id: 'common.message.success' }));
|
||||
} catch (error) {
|
||||
setOpenAddModal(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleModalCancel = () => {
|
||||
console.log('handleModalCancel');
|
||||
setOpenAddModal(false);
|
||||
};
|
||||
|
||||
const handleEditUser = (row: ListItem) => {
|
||||
setCurrentData(row);
|
||||
setOpenAddModal(true);
|
||||
setAction(PageAction.EDIT);
|
||||
setTitle(`Edit ${row.name} Cluster`);
|
||||
};
|
||||
|
||||
const handleSelect = (val: any, row: ListItem) => {
|
||||
if (val === 'edit') {
|
||||
handleEditUser(row);
|
||||
} else if (val === 'delete') {
|
||||
handleDelete({ ...row, name: row.name });
|
||||
} else if (val === 'add') {
|
||||
setOpen(true);
|
||||
setCurrentData(row);
|
||||
} else if (val === 'addPool') {
|
||||
handleAddPool(row.provider);
|
||||
}
|
||||
};
|
||||
|
||||
const renderEmpty = (type?: string) => {
|
||||
if (type !== 'Table') return;
|
||||
if (
|
||||
!dataSource.loading &&
|
||||
dataSource.loadend &&
|
||||
!dataSource.dataList.length
|
||||
) {
|
||||
return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}></Empty>;
|
||||
}
|
||||
return <div></div>;
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageContainer
|
||||
ghost
|
||||
header={{
|
||||
title: intl.formatMessage({
|
||||
id: 'menu.clusterManagement.clusters'
|
||||
}),
|
||||
style: {
|
||||
paddingInline: 'var(--layout-content-header-inlinepadding)'
|
||||
},
|
||||
breadcrumb: {}
|
||||
}}
|
||||
extra={[]}
|
||||
>
|
||||
<PageTools
|
||||
marginBottom={22}
|
||||
left={
|
||||
<Space>
|
||||
<Input
|
||||
placeholder={intl.formatMessage({ id: 'common.filter.name' })}
|
||||
style={{ width: 300 }}
|
||||
allowClear
|
||||
onChange={handleNameChange}
|
||||
></Input>
|
||||
<Button
|
||||
type="text"
|
||||
style={{ color: 'var(--ant-color-text-tertiary)' }}
|
||||
onClick={handleSearch}
|
||||
icon={<SyncOutlined></SyncOutlined>}
|
||||
></Button>
|
||||
</Space>
|
||||
}
|
||||
right={
|
||||
<Space size={20}>
|
||||
<DropDownActions
|
||||
menu={{
|
||||
items: addActions,
|
||||
onClick: handleClickDropdown
|
||||
}}
|
||||
trigger={['click']}
|
||||
placement="bottomRight"
|
||||
>
|
||||
<Button
|
||||
icon={<DownOutlined></DownOutlined>}
|
||||
type="primary"
|
||||
iconPosition="end"
|
||||
>
|
||||
Add Cluster
|
||||
</Button>
|
||||
</DropDownActions>
|
||||
<Button
|
||||
icon={<DeleteOutlined />}
|
||||
danger
|
||||
onClick={handleDeleteBatch}
|
||||
disabled={!rowSelection.selectedRowKeys.length}
|
||||
>
|
||||
<span>
|
||||
{intl?.formatMessage?.({ id: 'common.button.delete' })}
|
||||
{rowSelection.selectedRowKeys.length > 0 && (
|
||||
<span>({rowSelection.selectedRowKeys?.length})</span>
|
||||
)}
|
||||
</span>
|
||||
</Button>
|
||||
</Space>
|
||||
}
|
||||
></PageTools>
|
||||
<ConfigProvider renderEmpty={renderEmpty}>
|
||||
<Table
|
||||
dataSource={ClusterDataList}
|
||||
rowSelection={rowSelection}
|
||||
loading={dataSource.loading}
|
||||
rowKey="id"
|
||||
onChange={handleTableChange}
|
||||
pagination={{
|
||||
showSizeChanger: true,
|
||||
pageSize: queryParams.perPage,
|
||||
current: queryParams.page,
|
||||
total: dataSource.total,
|
||||
hideOnSinglePage: queryParams.perPage === 10,
|
||||
onChange: handlePageChange
|
||||
}}
|
||||
>
|
||||
<Column
|
||||
title="Name"
|
||||
dataIndex="name"
|
||||
key="name"
|
||||
ellipsis={{
|
||||
showTitle: false
|
||||
}}
|
||||
render={(text, record) => {
|
||||
return (
|
||||
<AutoTooltip ghost minWidth={20}>
|
||||
{text}
|
||||
</AutoTooltip>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title="Provider"
|
||||
dataIndex="provider"
|
||||
key="provider"
|
||||
ellipsis={{
|
||||
showTitle: false
|
||||
}}
|
||||
render={(text, record) => {
|
||||
return (
|
||||
<AutoTooltip ghost minWidth={20}>
|
||||
{addActions.find((item) => item.value === record.provider)
|
||||
?.label || 'N/A'}
|
||||
</AutoTooltip>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title="Workers"
|
||||
dataIndex="workers"
|
||||
key="workers"
|
||||
ellipsis={{
|
||||
showTitle: false
|
||||
}}
|
||||
render={(text, record) => {
|
||||
return (
|
||||
<WorkerWrapper>
|
||||
<span className="worker">
|
||||
<span className="dot ready"></span>
|
||||
<span className="value">3</span>
|
||||
</span>
|
||||
<span className="worker">
|
||||
<span className="dot error"></span>
|
||||
<span className="value">1</span>
|
||||
</span>
|
||||
</WorkerWrapper>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title="GPUs"
|
||||
dataIndex="gpus"
|
||||
key="gpus"
|
||||
ellipsis={{
|
||||
showTitle: false
|
||||
}}
|
||||
render={(text, record) => {
|
||||
return (
|
||||
<AutoTooltip ghost minWidth={20}>
|
||||
{text}
|
||||
</AutoTooltip>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
|
||||
<Column
|
||||
title="Deployments"
|
||||
dataIndex="deployments"
|
||||
key="deployments"
|
||||
ellipsis={{
|
||||
showTitle: false
|
||||
}}
|
||||
render={(text, record) => {
|
||||
return (
|
||||
<AutoTooltip ghost minWidth={20}>
|
||||
{text}
|
||||
</AutoTooltip>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'common.table.operation' })}
|
||||
key="operation"
|
||||
ellipsis={{
|
||||
showTitle: false
|
||||
}}
|
||||
render={(text, record: ListItem) => {
|
||||
return (
|
||||
<DropdownButtons
|
||||
items={setActions(record)}
|
||||
onSelect={(val) => handleSelect(val, record)}
|
||||
></DropdownButtons>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</Table>
|
||||
</ConfigProvider>
|
||||
</PageContainer>
|
||||
<AddCluster
|
||||
provider={provider}
|
||||
open={openAddModal}
|
||||
action={action}
|
||||
title={title}
|
||||
data={currentData}
|
||||
onCancel={handleModalCancel}
|
||||
onOk={handleModalOk}
|
||||
></AddCluster>
|
||||
<AddPool
|
||||
provider={addPoolStatus.provider}
|
||||
open={addPoolStatus.open}
|
||||
action={addPoolStatus.action}
|
||||
title={addPoolStatus.title}
|
||||
onCancel={() => {
|
||||
setAddPoolStatus({
|
||||
open: false,
|
||||
action: PageAction.CREATE,
|
||||
title: '',
|
||||
provider: 'digitalocean'
|
||||
});
|
||||
}}
|
||||
onOk={() => {
|
||||
setAddPoolStatus({
|
||||
open: false,
|
||||
action: PageAction.CREATE,
|
||||
title: '',
|
||||
provider: 'digitalocean'
|
||||
});
|
||||
}}
|
||||
></AddPool>
|
||||
<AddWorker open={open} onCancel={() => setOpen(false)}></AddWorker>
|
||||
<DeleteModal ref={modalRef}></DeleteModal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Credentials;
|
||||
@@ -1,32 +1,21 @@
|
||||
import AutoTooltip from '@/components/auto-tooltip';
|
||||
import DeleteModal from '@/components/delete-modal';
|
||||
import DropDownActions from '@/components/drop-down-actions';
|
||||
import DropdownButtons from '@/components/drop-down-buttons';
|
||||
import IconFont from '@/components/icon-font';
|
||||
import PageTools from '@/components/page-tools';
|
||||
import { FilterBar } from '@/components/page-tools';
|
||||
import CardList from '@/components/templates/card-list';
|
||||
import CardSkeleton from '@/components/templates/card-skelton';
|
||||
import { PageAction } from '@/config';
|
||||
import type { PageActionType } from '@/config/types';
|
||||
import useTableFetch from '@/hooks/use-table-fetch';
|
||||
import AddWorker from '@/pages/resources/components/add-worker';
|
||||
import {
|
||||
DeleteOutlined,
|
||||
DownOutlined,
|
||||
EditOutlined,
|
||||
KubernetesOutlined,
|
||||
ProfileOutlined,
|
||||
SyncOutlined
|
||||
ProfileOutlined
|
||||
} from '@ant-design/icons';
|
||||
import { PageContainer } from '@ant-design/pro-components';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import {
|
||||
Button,
|
||||
ConfigProvider,
|
||||
Empty,
|
||||
Input,
|
||||
Space,
|
||||
Table,
|
||||
message
|
||||
} from 'antd';
|
||||
import { Empty, Table, message } from 'antd';
|
||||
import { useState } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import {
|
||||
@@ -37,6 +26,7 @@ import {
|
||||
} from './apis';
|
||||
import AddCluster from './components/add-cluster';
|
||||
import AddPool from './components/add-pool';
|
||||
import ClusterItem from './components/cluster-item';
|
||||
import { ClusterDataList } from './config';
|
||||
import {
|
||||
ClusterFormData as FormData,
|
||||
@@ -244,7 +234,7 @@ const Credentials: React.FC = () => {
|
||||
handleEditUser(row);
|
||||
} else if (val === 'delete') {
|
||||
handleDelete({ ...row, name: row.name });
|
||||
} else if (val === 'add') {
|
||||
} else if (val === 'add_worker') {
|
||||
setOpen(true);
|
||||
setCurrentData(row);
|
||||
} else if (val === 'addPool') {
|
||||
@@ -252,6 +242,10 @@ const Credentials: React.FC = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const renderCard = (item: ListItem) => {
|
||||
return <ClusterItem data={item} onSelect={handleSelect}></ClusterItem>;
|
||||
};
|
||||
|
||||
const renderEmpty = (type?: string) => {
|
||||
if (type !== 'Table') return;
|
||||
if (
|
||||
@@ -279,175 +273,31 @@ const Credentials: React.FC = () => {
|
||||
}}
|
||||
extra={[]}
|
||||
>
|
||||
<PageTools
|
||||
<FilterBar
|
||||
showSelect={false}
|
||||
showPrimaryButton={true}
|
||||
showDeleteButton={true}
|
||||
selectHolder="Filter by name"
|
||||
marginBottom={22}
|
||||
left={
|
||||
<Space>
|
||||
<Input
|
||||
placeholder={intl.formatMessage({ id: 'common.filter.name' })}
|
||||
style={{ width: 300 }}
|
||||
allowClear
|
||||
onChange={handleNameChange}
|
||||
></Input>
|
||||
<Button
|
||||
type="text"
|
||||
style={{ color: 'var(--ant-color-text-tertiary)' }}
|
||||
onClick={handleSearch}
|
||||
icon={<SyncOutlined></SyncOutlined>}
|
||||
></Button>
|
||||
</Space>
|
||||
}
|
||||
right={
|
||||
<Space size={20}>
|
||||
<DropDownActions
|
||||
menu={{
|
||||
items: addActions,
|
||||
onClick: handleClickDropdown
|
||||
}}
|
||||
trigger={['click']}
|
||||
placement="bottomRight"
|
||||
>
|
||||
<Button
|
||||
icon={<DownOutlined></DownOutlined>}
|
||||
type="primary"
|
||||
iconPosition="end"
|
||||
>
|
||||
Add Cluster
|
||||
</Button>
|
||||
</DropDownActions>
|
||||
<Button
|
||||
icon={<DeleteOutlined />}
|
||||
danger
|
||||
onClick={handleDeleteBatch}
|
||||
disabled={!rowSelection.selectedRowKeys.length}
|
||||
>
|
||||
<span>
|
||||
{intl?.formatMessage?.({ id: 'common.button.delete' })}
|
||||
{rowSelection.selectedRowKeys.length > 0 && (
|
||||
<span>({rowSelection.selectedRowKeys?.length})</span>
|
||||
)}
|
||||
</span>
|
||||
</Button>
|
||||
</Space>
|
||||
}
|
||||
></PageTools>
|
||||
<ConfigProvider renderEmpty={renderEmpty}>
|
||||
<Table
|
||||
dataSource={ClusterDataList}
|
||||
rowSelection={rowSelection}
|
||||
loading={dataSource.loading}
|
||||
rowKey="id"
|
||||
onChange={handleTableChange}
|
||||
pagination={{
|
||||
showSizeChanger: true,
|
||||
pageSize: queryParams.perPage,
|
||||
current: queryParams.page,
|
||||
total: dataSource.total,
|
||||
hideOnSinglePage: queryParams.perPage === 10,
|
||||
onChange: handlePageChange
|
||||
}}
|
||||
>
|
||||
<Column
|
||||
title="Name"
|
||||
dataIndex="name"
|
||||
key="name"
|
||||
ellipsis={{
|
||||
showTitle: false
|
||||
}}
|
||||
render={(text, record) => {
|
||||
return (
|
||||
<AutoTooltip ghost minWidth={20}>
|
||||
{text}
|
||||
</AutoTooltip>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title="Provider"
|
||||
dataIndex="provider"
|
||||
key="provider"
|
||||
ellipsis={{
|
||||
showTitle: false
|
||||
}}
|
||||
render={(text, record) => {
|
||||
return (
|
||||
<AutoTooltip ghost minWidth={20}>
|
||||
{addActions.find((item) => item.value === record.provider)
|
||||
?.label || 'N/A'}
|
||||
</AutoTooltip>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title="Workers"
|
||||
dataIndex="workers"
|
||||
key="workers"
|
||||
ellipsis={{
|
||||
showTitle: false
|
||||
}}
|
||||
render={(text, record) => {
|
||||
return (
|
||||
<WorkerWrapper>
|
||||
<span className="worker">
|
||||
<span className="dot ready"></span>
|
||||
<span className="value">3</span>
|
||||
</span>
|
||||
<span className="worker">
|
||||
<span className="dot error"></span>
|
||||
<span className="value">1</span>
|
||||
</span>
|
||||
</WorkerWrapper>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title="GPUs"
|
||||
dataIndex="gpus"
|
||||
key="gpus"
|
||||
ellipsis={{
|
||||
showTitle: false
|
||||
}}
|
||||
render={(text, record) => {
|
||||
return (
|
||||
<AutoTooltip ghost minWidth={20}>
|
||||
{text}
|
||||
</AutoTooltip>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
|
||||
<Column
|
||||
title="Deployments"
|
||||
dataIndex="deployments"
|
||||
key="deployments"
|
||||
ellipsis={{
|
||||
showTitle: false
|
||||
}}
|
||||
render={(text, record) => {
|
||||
return (
|
||||
<AutoTooltip ghost minWidth={20}>
|
||||
{text}
|
||||
</AutoTooltip>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'common.table.operation' })}
|
||||
key="operation"
|
||||
ellipsis={{
|
||||
showTitle: false
|
||||
}}
|
||||
render={(text, record: ListItem) => {
|
||||
return (
|
||||
<DropdownButtons
|
||||
items={setActions(record)}
|
||||
onSelect={(val) => handleSelect(val, record)}
|
||||
></DropdownButtons>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</Table>
|
||||
</ConfigProvider>
|
||||
marginTop={30}
|
||||
handleInputChange={handleNameChange}
|
||||
handleSearch={handleSearch}
|
||||
width={{ input: 200 }}
|
||||
buttonText="Add Cluster"
|
||||
actionType="dropdown"
|
||||
actionItems={addActions}
|
||||
handleClickPrimary={handleClickDropdown}
|
||||
></FilterBar>
|
||||
<CardList
|
||||
dataList={ClusterDataList}
|
||||
loading={dataSource.loading}
|
||||
activeId={-1}
|
||||
isFirst={!dataSource.loadend}
|
||||
Skeleton={CardSkeleton}
|
||||
resizable={false}
|
||||
defaultSpan={24}
|
||||
renderItem={renderCard}
|
||||
></CardList>
|
||||
</PageContainer>
|
||||
<AddCluster
|
||||
provider={provider}
|
||||
|
||||
@@ -11,7 +11,6 @@ import {
|
||||
ClusterListItem as ListItem
|
||||
} from '../config/types';
|
||||
import CloudProvider from './cloud-provider-form';
|
||||
import K8SProvider from './k8s-provider-form';
|
||||
|
||||
type AddModalProps = {
|
||||
title: string;
|
||||
@@ -34,7 +33,7 @@ const AddCluster: React.FC<AddModalProps> = ({
|
||||
const [form] = Form.useForm();
|
||||
const intl = useIntl();
|
||||
|
||||
const handleSumit = () => {
|
||||
const handleSubmit = () => {
|
||||
form.submit();
|
||||
};
|
||||
|
||||
@@ -62,7 +61,7 @@ const AddCluster: React.FC<AddModalProps> = ({
|
||||
width={600}
|
||||
styles={{}}
|
||||
footer={
|
||||
<ModalFooter onOk={handleSumit} onCancel={onCancel}></ModalFooter>
|
||||
<ModalFooter onOk={handleSubmit} onCancel={onCancel}></ModalFooter>
|
||||
}
|
||||
>
|
||||
<Form form={form} onFinish={onOk} preserve={false}>
|
||||
@@ -85,8 +84,9 @@ const AddCluster: React.FC<AddModalProps> = ({
|
||||
required
|
||||
></SealInput.Input>
|
||||
</Form.Item>
|
||||
{provider === 'digitalocean' && <CloudProvider></CloudProvider>}
|
||||
{provider === 'kubernetes' && <K8SProvider></K8SProvider>}
|
||||
{provider === 'digitalocean' && (
|
||||
<CloudProvider provider={provider}></CloudProvider>
|
||||
)}
|
||||
<Form.Item<FormData> name="description" rules={[{ required: false }]}>
|
||||
<SealInput.TextArea
|
||||
label={intl.formatMessage({ id: 'common.table.description' })}
|
||||
|
||||
@@ -4,7 +4,7 @@ import SealInput from '@/components/seal-form/seal-input';
|
||||
import { PageAction, PasswordReg } from '@/config';
|
||||
import { PageActionType } from '@/config/types';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Form } from 'antd';
|
||||
import { Button, Form } from 'antd';
|
||||
import React from 'react';
|
||||
import { FormData, ListItem } from '../config/types';
|
||||
|
||||
@@ -47,7 +47,11 @@ const AddModal: React.FC<AddModalProps> = ({
|
||||
width={600}
|
||||
styles={{}}
|
||||
footer={
|
||||
<ModalFooter onOk={handleSumit} onCancel={onCancel}></ModalFooter>
|
||||
<ModalFooter
|
||||
onOk={handleSumit}
|
||||
onCancel={onCancel}
|
||||
description={<Button>Validation Test</Button>}
|
||||
></ModalFooter>
|
||||
}
|
||||
>
|
||||
<Form form={form} onFinish={onOk} preserve={false}>
|
||||
@@ -70,29 +74,6 @@ const AddModal: React.FC<AddModalProps> = ({
|
||||
required
|
||||
></SealInput.Input>
|
||||
</Form.Item>
|
||||
{/* <Form.Item<FormData>
|
||||
name="provider"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: intl.formatMessage(
|
||||
{ id: 'common.form.rule.input' },
|
||||
{
|
||||
name: 'Provider'
|
||||
}
|
||||
)
|
||||
}
|
||||
]}
|
||||
>
|
||||
<SealSelect
|
||||
label="Provider"
|
||||
required
|
||||
options={['Digital Ocean', 'Kubernetes', 'Custom'].map((item) => ({
|
||||
label: item,
|
||||
value: item
|
||||
}))}
|
||||
></SealSelect>
|
||||
</Form.Item> */}
|
||||
{provider === 'digital_ocean' && (
|
||||
<>
|
||||
<Form.Item<FormData>
|
||||
|
||||
@@ -0,0 +1,237 @@
|
||||
import DropdownButtons from '@/components/drop-down-buttons';
|
||||
import GaugeChart from '@/components/echarts/gauge';
|
||||
import IconFont from '@/components/icon-font';
|
||||
import StatusTag from '@/components/status-tag';
|
||||
import Card from '@/components/templates/card';
|
||||
import {
|
||||
DeleteOutlined,
|
||||
EditOutlined,
|
||||
KubernetesOutlined
|
||||
} from '@ant-design/icons';
|
||||
import { Card as ACard, Button, Col, Row, Tag } from 'antd';
|
||||
import React, { useMemo } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import {
|
||||
ClusterStatus,
|
||||
ClusterStatusLabelMap,
|
||||
ProviderLabelMap,
|
||||
ProviderValueMap
|
||||
} from '../config';
|
||||
import { ClusterListItem as ListItem } from '../config/types';
|
||||
import WorkerPools from './worker-pools';
|
||||
|
||||
const CollapseTitle = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: var(--font-size-middle);
|
||||
font-weight: 500;
|
||||
color: var(--ant-color-text);
|
||||
height: 32px;
|
||||
cursor: pointer;
|
||||
`;
|
||||
|
||||
const Content = styled.div`
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.chart-wrapper {
|
||||
flex: 1;
|
||||
}
|
||||
`;
|
||||
|
||||
const CardWrapper = styled(ACard)`
|
||||
text-align: center;
|
||||
box-shadow: none;
|
||||
.ant-card {
|
||||
box-shadow: none;
|
||||
}
|
||||
.ant-card-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-weight: 500;
|
||||
font-size: var(--font-size-middle);
|
||||
}
|
||||
.value {
|
||||
font-weight: 500;
|
||||
color: var(--ant-color-text);
|
||||
}
|
||||
`;
|
||||
|
||||
const actionItems = [
|
||||
{
|
||||
key: 'edit',
|
||||
label: 'common.button.edit',
|
||||
icon: <EditOutlined />
|
||||
},
|
||||
{
|
||||
key: 'add_worker',
|
||||
label: 'Add Worker',
|
||||
provider: ProviderValueMap.Custom,
|
||||
locale: false,
|
||||
icon: <IconFont type="icon-docker" />
|
||||
},
|
||||
{
|
||||
key: 'register_cluster',
|
||||
label: 'Register Cluster',
|
||||
provider: ProviderValueMap.Kubernetes,
|
||||
locale: false,
|
||||
icon: <KubernetesOutlined />
|
||||
},
|
||||
{
|
||||
key: 'addPool',
|
||||
label: 'Add Node Pool',
|
||||
provider: ProviderValueMap.DigitalOcean,
|
||||
locale: false,
|
||||
icon: <IconFont type="icon-catalog1" />
|
||||
},
|
||||
{
|
||||
key: 'delete',
|
||||
label: 'common.button.delete',
|
||||
icon: <DeleteOutlined />,
|
||||
props: {
|
||||
danger: true
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
const Inner = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
cursor: default;
|
||||
|
||||
.title {
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 8px;
|
||||
|
||||
.text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: var(--font-size-middle);
|
||||
font-weight: 500;
|
||||
color: var(--ant-color-text);
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
flex: 1;
|
||||
}
|
||||
`;
|
||||
|
||||
interface CardProps {
|
||||
data: ListItem;
|
||||
onSelect?: (key: string, row: ListItem) => void;
|
||||
}
|
||||
|
||||
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 actions = useMemo(() => {
|
||||
return actionItems.filter((item) => {
|
||||
if (item.provider) {
|
||||
return item.provider === data.provider;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
}, [data.provider]);
|
||||
|
||||
return (
|
||||
<Card height={'auto'} clickable={false} ghost>
|
||||
<Inner>
|
||||
<div className="title">
|
||||
<span className="flex-center gap-8">
|
||||
<span className="text">{data.name}</span>
|
||||
<Tag style={{ borderRadius: 4 }}>
|
||||
{ProviderLabelMap[data.provider]}
|
||||
</Tag>
|
||||
<StatusTag
|
||||
statusValue={{
|
||||
status: ClusterStatus[data.status],
|
||||
text: ClusterStatusLabelMap[data.status]
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
<DropdownButtons
|
||||
items={actions}
|
||||
onSelect={handleOnSelect}
|
||||
></DropdownButtons>
|
||||
</span>
|
||||
</div>
|
||||
<Content>
|
||||
<div className="flex gap-16">
|
||||
<CardWrapper bordered={false}>
|
||||
<div className="label">Workers</div>
|
||||
<div className="value">1</div>
|
||||
</CardWrapper>
|
||||
<CardWrapper bordered={false}>
|
||||
<div className="label">GPUs</div>
|
||||
<div className="value">12</div>
|
||||
</CardWrapper>
|
||||
<CardWrapper bordered={false}>
|
||||
<div className="label">Deployments</div>
|
||||
<div className="value">2</div>
|
||||
</CardWrapper>
|
||||
</div>
|
||||
<div className="chart-wrapper">
|
||||
<Row gutter={16} style={{ width: '100%' }}>
|
||||
<Col span={6}>
|
||||
<GaugeChart title="GPU Utilization" value={85} height={160} />
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<GaugeChart title="CPU Utilization" value={50} height={160} />
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<GaugeChart title="RAM Utilization" value={70} height={160} />
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<GaugeChart title="VRAM Utilization" value={60} height={160} />
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</Content>
|
||||
{data.provider === ProviderValueMap.DigitalOcean && (
|
||||
<>
|
||||
<CollapseTitle>
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
icon={<IconFont type="icon-down" rotate={show ? 0 : -90} />}
|
||||
onClick={() => setShow(!show)}
|
||||
>
|
||||
Worker Pools
|
||||
</Button>
|
||||
</CollapseTitle>
|
||||
<WorkerPools
|
||||
provider={data.provider}
|
||||
dataSource={data.worker_pools}
|
||||
height={show ? 'auto' : 0}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</Inner>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default CardItem;
|
||||
@@ -0,0 +1,104 @@
|
||||
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 React from 'react';
|
||||
import {
|
||||
ClusterFormData as FormData,
|
||||
ClusterListItem as ListItem
|
||||
} from '../config/types';
|
||||
import CloudProvider from './cloud-provider-form';
|
||||
import K8SProvider from './k8s-provider-form';
|
||||
|
||||
type AddModalProps = {
|
||||
title: string;
|
||||
action: PageActionType;
|
||||
open: boolean;
|
||||
provider: string; // 'kubernetes' | 'custom' | 'digitalocean';
|
||||
onOk: (values: FormData) => void;
|
||||
data?: ListItem;
|
||||
onCancel: () => void;
|
||||
};
|
||||
const AddCluster: React.FC<AddModalProps> = ({
|
||||
title,
|
||||
action,
|
||||
open,
|
||||
provider,
|
||||
onOk,
|
||||
data,
|
||||
onCancel
|
||||
}) => {
|
||||
const [form] = Form.useForm();
|
||||
const intl = useIntl();
|
||||
|
||||
const handleSubmit = () => {
|
||||
form.submit();
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
form.resetFields();
|
||||
onCancel();
|
||||
};
|
||||
|
||||
return (
|
||||
<ScrollerModal
|
||||
title={
|
||||
<div className="flex-between flex-center">
|
||||
<span>{title}</span>
|
||||
<Button type="text" size="small" onClick={handleCancel}>
|
||||
<CloseOutlined></CloseOutlined>
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
open={open}
|
||||
onClose={onCancel}
|
||||
destroyOnClose={true}
|
||||
closeIcon={false}
|
||||
maskClosable={false}
|
||||
keyboard={false}
|
||||
width={600}
|
||||
styles={{}}
|
||||
footer={
|
||||
<ModalFooter onOk={handleSubmit} onCancel={onCancel}></ModalFooter>
|
||||
}
|
||||
>
|
||||
<Form form={form} onFinish={onOk} preserve={false}>
|
||||
<Form.Item<FormData>
|
||||
name="display_name"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: intl.formatMessage(
|
||||
{ id: 'common.form.rule.input' },
|
||||
{
|
||||
name: intl.formatMessage({ id: 'common.table.name' })
|
||||
}
|
||||
)
|
||||
}
|
||||
]}
|
||||
>
|
||||
<SealInput.Input
|
||||
label={intl.formatMessage({ id: 'common.table.name' })}
|
||||
required
|
||||
></SealInput.Input>
|
||||
</Form.Item>
|
||||
{provider === 'digitalocean' && (
|
||||
<CloudProvider provider={provider}></CloudProvider>
|
||||
)}
|
||||
{provider === 'kubernetes' && (
|
||||
<K8SProvider provider={provider}></K8SProvider>
|
||||
)}
|
||||
<Form.Item<FormData> name="description" rules={[{ required: false }]}>
|
||||
<SealInput.TextArea
|
||||
label={intl.formatMessage({ id: 'common.table.description' })}
|
||||
></SealInput.TextArea>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</ScrollerModal>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddCluster;
|
||||
@@ -0,0 +1,117 @@
|
||||
import DropdownButtons from '@/components/drop-down-buttons';
|
||||
import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
|
||||
import { Table } from 'antd';
|
||||
|
||||
const actionItems = [
|
||||
{
|
||||
key: 'edit',
|
||||
label: 'common.button.edit',
|
||||
icon: <EditOutlined />
|
||||
},
|
||||
|
||||
{
|
||||
key: 'delete',
|
||||
label: 'common.button.delete',
|
||||
icon: <DeleteOutlined />,
|
||||
props: {
|
||||
danger: true
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
interface WorkerPoolsProps {
|
||||
dataSource: any[];
|
||||
loading?: boolean;
|
||||
provider: string;
|
||||
height?: string | number;
|
||||
onAction?: (action: string, record: any) => void;
|
||||
}
|
||||
|
||||
const WorkerPools: React.FC<WorkerPoolsProps> = ({
|
||||
dataSource,
|
||||
loading = false,
|
||||
provider,
|
||||
height = 'auto',
|
||||
onAction
|
||||
}) => {
|
||||
// dataindex: type, replicas, Batchsize, GPU, Memory, CPU, Storage, CreateTime, Operations
|
||||
const columns = [
|
||||
{
|
||||
title: 'Type',
|
||||
dataIndex: 'type',
|
||||
key: 'type'
|
||||
},
|
||||
{
|
||||
title: 'Replicas',
|
||||
dataIndex: 'replicas',
|
||||
key: 'replicas'
|
||||
},
|
||||
{
|
||||
title: 'Batch Size',
|
||||
dataIndex: 'batchSize',
|
||||
key: 'batchSize'
|
||||
},
|
||||
{
|
||||
title: 'GPU',
|
||||
dataIndex: 'gpu',
|
||||
key: 'gpu'
|
||||
},
|
||||
{
|
||||
title: 'Memory',
|
||||
dataIndex: 'memory',
|
||||
key: 'memory'
|
||||
},
|
||||
{
|
||||
title: 'CPU',
|
||||
dataIndex: 'cpu',
|
||||
key: 'cpu'
|
||||
},
|
||||
{
|
||||
title: 'Storage',
|
||||
dataIndex: 'storage',
|
||||
key: 'storage'
|
||||
},
|
||||
{
|
||||
title: 'Create Time',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime'
|
||||
},
|
||||
{
|
||||
title: 'Operations',
|
||||
key: 'operations',
|
||||
render: (_, record) => (
|
||||
<DropdownButtons
|
||||
items={actionItems}
|
||||
onSelect={(key) => onAction?.(key, record)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
];
|
||||
|
||||
// mock dataSource
|
||||
const mockData = Array.from({ length: 3 }, (_, index) => ({
|
||||
key: index,
|
||||
type: `Type ${index + 1}`,
|
||||
replicas: Math.floor(Math.random() * 10) + 1,
|
||||
batchSize: Math.floor(Math.random() * 100) + 1,
|
||||
gpu: `NVIDIA 4090`,
|
||||
memory: `${Math.floor(Math.random() * 16) + 1} GB`,
|
||||
cpu: `${Math.floor(Math.random() * 8) + 1} Cores`,
|
||||
storage: `${Math.floor(Math.random() * 500) + 50} GB`,
|
||||
createTime: new Date().toLocaleDateString()
|
||||
}));
|
||||
|
||||
return (
|
||||
<div style={{ height: height, overflow: 'hidden' }}>
|
||||
<Table
|
||||
dataSource={dataSource || mockData}
|
||||
columns={columns}
|
||||
loading={loading}
|
||||
pagination={false}
|
||||
rowKey="id"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default WorkerPools;
|
||||
@@ -1,3 +1,6 @@
|
||||
import { StatusMaps } from '@/config';
|
||||
import { StatusType } from '@/config/types';
|
||||
|
||||
export const ClusterDataList = [
|
||||
{
|
||||
id: 3,
|
||||
@@ -6,6 +9,7 @@ export const ClusterDataList = [
|
||||
clusterType: 'Custom',
|
||||
workers: 4,
|
||||
gpus: 8,
|
||||
status: 'ready',
|
||||
deployments: 3
|
||||
},
|
||||
{
|
||||
@@ -15,6 +19,7 @@ export const ClusterDataList = [
|
||||
clusterType: 'Kubernetes',
|
||||
workers: 2,
|
||||
gpus: 4,
|
||||
status: 'ready',
|
||||
deployments: 1
|
||||
},
|
||||
{
|
||||
@@ -23,6 +28,34 @@ export const ClusterDataList = [
|
||||
provider: 'digitalocean',
|
||||
workers: 3,
|
||||
gpus: 6,
|
||||
status: 'error',
|
||||
deployments: 2
|
||||
}
|
||||
];
|
||||
|
||||
export const ClusterStatusValueMap = {
|
||||
Ready: 'ready',
|
||||
Error: 'error'
|
||||
};
|
||||
|
||||
export const ClusterStatusLabelMap = {
|
||||
[ClusterStatusValueMap.Ready]: 'Ready',
|
||||
[ClusterStatusValueMap.Error]: 'Error'
|
||||
};
|
||||
|
||||
export const ClusterStatus: Record<string, StatusType> = {
|
||||
[ClusterStatusValueMap.Ready]: StatusMaps.success,
|
||||
[ClusterStatusValueMap.Error]: StatusMaps.error
|
||||
};
|
||||
|
||||
export const ProviderValueMap = {
|
||||
Kubernetes: 'kubernetes',
|
||||
DigitalOcean: 'digitalocean',
|
||||
Custom: 'custom'
|
||||
};
|
||||
|
||||
export const ProviderLabelMap = {
|
||||
[ProviderValueMap.Kubernetes]: 'Kubernetes',
|
||||
[ProviderValueMap.DigitalOcean]: 'Digital Ocean',
|
||||
[ProviderValueMap.Custom]: 'Custom'
|
||||
};
|
||||
|
||||
@@ -18,16 +18,6 @@ export interface ListItem {
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface ClusterListItem {
|
||||
name: string;
|
||||
provider: string;
|
||||
workers: number;
|
||||
created_at: string;
|
||||
gpus: number;
|
||||
deployments: number;
|
||||
id: number;
|
||||
}
|
||||
|
||||
export interface ClusterFormData {
|
||||
display_name: string;
|
||||
description: string;
|
||||
@@ -55,3 +45,19 @@ export interface NodePoolFormData {
|
||||
labels: Record<string, string>;
|
||||
cloud_options: Record<string, any>;
|
||||
}
|
||||
|
||||
export interface ClusterListItem {
|
||||
name: string;
|
||||
display_name: string;
|
||||
description: string;
|
||||
provider: string;
|
||||
credential_id: number;
|
||||
zone: string;
|
||||
region: string;
|
||||
gpus: number;
|
||||
deployments: number;
|
||||
id: number;
|
||||
status: string;
|
||||
state_message: string;
|
||||
worker_pools: NodePoolListItem[];
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user