fix: gpu selector by cluster
This commit is contained in:
jialin
@@ -1,5 +1,4 @@
|
||||
import DeleteModal from '@/components/delete-modal';
|
||||
import IconFont from '@/components/icon-font';
|
||||
import { FilterBar } from '@/components/page-tools';
|
||||
import CardList from '@/components/templates/card-list';
|
||||
import CardSkeleton from '@/components/templates/card-skelton';
|
||||
@@ -7,12 +6,6 @@ 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,
|
||||
EditOutlined,
|
||||
KubernetesOutlined,
|
||||
ProfileOutlined
|
||||
} from '@ant-design/icons';
|
||||
import { PageContainer } from '@ant-design/pro-components';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Table, message } from 'antd';
|
||||
@@ -21,76 +14,19 @@ import {
|
||||
createCluster,
|
||||
deleteCluster,
|
||||
queryClusterList,
|
||||
queryClusterToken,
|
||||
updateCluster
|
||||
} from './apis';
|
||||
import AddCluster from './components/add-cluster';
|
||||
import ClusterDetailModal from './components/cluster-detail-modal';
|
||||
import ClusterItem from './components/cluster-item';
|
||||
import { ClusterDataList } from './config';
|
||||
import { ProviderLabelMap, ProviderValueMap, addActions } 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 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,
|
||||
@@ -121,15 +57,33 @@ const Credentials: React.FC = () => {
|
||||
});
|
||||
const [openAddWorker, setOpenAddWorker] = useState<{
|
||||
open: boolean;
|
||||
token: string;
|
||||
registrationInfo: {
|
||||
token: string;
|
||||
image: string;
|
||||
server_url: string;
|
||||
};
|
||||
}>({
|
||||
open: false,
|
||||
token: ''
|
||||
registrationInfo: {
|
||||
token: '',
|
||||
image: '',
|
||||
server_url: ''
|
||||
}
|
||||
});
|
||||
const [openAddModal, setOpenAddModal] = useState(false);
|
||||
const [provider, setProvider] = useState<string>('custom');
|
||||
const [action, setAction] = useState<PageActionType>(PageAction.CREATE);
|
||||
const [title, setTitle] = useState<string>('');
|
||||
const [openAddModal, setOpenAddModal] = useState<{
|
||||
open: boolean;
|
||||
action: PageActionType;
|
||||
currentData?: ListItem;
|
||||
title: string;
|
||||
provider: string;
|
||||
}>({
|
||||
open: false,
|
||||
action: PageAction.CREATE,
|
||||
currentData: undefined,
|
||||
title: '',
|
||||
provider: ''
|
||||
});
|
||||
|
||||
const [addPoolStatus, setAddPoolStatus] = useState<{
|
||||
open: boolean;
|
||||
action: PageActionType;
|
||||
@@ -139,25 +93,19 @@ const Credentials: React.FC = () => {
|
||||
open: false,
|
||||
action: PageAction.CREATE,
|
||||
title: '',
|
||||
provider: 'digitalocean'
|
||||
provider: ProviderValueMap.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 label = ProviderLabelMap[value];
|
||||
|
||||
setOpenAddModal({
|
||||
open: true,
|
||||
action: PageAction.CREATE,
|
||||
currentData: undefined,
|
||||
title: `Add ${label} Cluster`,
|
||||
provider: value
|
||||
});
|
||||
};
|
||||
|
||||
const handleAddPool = (value: string) => {
|
||||
@@ -178,32 +126,65 @@ const Credentials: React.FC = () => {
|
||||
...data
|
||||
};
|
||||
try {
|
||||
if (action === PageAction.EDIT) {
|
||||
if (openAddModal.action === PageAction.EDIT) {
|
||||
await updateCluster({
|
||||
data: params,
|
||||
id: currentData!.id
|
||||
id: openAddModal.currentData!.id
|
||||
});
|
||||
} else {
|
||||
await createCluster({ data: params });
|
||||
}
|
||||
fetchData();
|
||||
setOpenAddModal(false);
|
||||
setOpenAddModal({
|
||||
open: false,
|
||||
action: PageAction.CREATE,
|
||||
currentData: undefined,
|
||||
title: '',
|
||||
provider: ''
|
||||
});
|
||||
message.success(intl.formatMessage({ id: 'common.message.success' }));
|
||||
} catch (error) {
|
||||
setOpenAddModal(false);
|
||||
setOpenAddModal({
|
||||
open: false,
|
||||
action: PageAction.CREATE,
|
||||
currentData: undefined,
|
||||
title: '',
|
||||
provider: ''
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleModalCancel = () => {
|
||||
console.log('handleModalCancel');
|
||||
setOpenAddModal(false);
|
||||
setOpenAddModal({
|
||||
open: false,
|
||||
action: PageAction.CREATE,
|
||||
currentData: undefined,
|
||||
title: '',
|
||||
provider: ''
|
||||
});
|
||||
};
|
||||
|
||||
const handleEditCluster = (row: ListItem) => {
|
||||
setCurrentData(row);
|
||||
setOpenAddModal(true);
|
||||
setAction(PageAction.EDIT);
|
||||
setTitle(`Edit ${row.name} Cluster`);
|
||||
setOpenAddModal({
|
||||
open: true,
|
||||
action: PageAction.EDIT,
|
||||
currentData: row,
|
||||
title: `Edit ${row.name} Cluster`,
|
||||
provider: row.provider
|
||||
});
|
||||
};
|
||||
|
||||
const handleAddWorker = async (row: ListItem) => {
|
||||
try {
|
||||
const data = await queryClusterToken({ id: row.id });
|
||||
setOpenAddWorker({
|
||||
open: true,
|
||||
registrationInfo: data
|
||||
});
|
||||
} catch (error: any) {
|
||||
message.error(error.message || 'Failed to fetch cluster token');
|
||||
}
|
||||
};
|
||||
|
||||
const handleSelect = (val: any, row: ListItem) => {
|
||||
@@ -212,11 +193,7 @@ const Credentials: React.FC = () => {
|
||||
} else if (val === 'delete') {
|
||||
handleDelete({ ...row, name: row.name });
|
||||
} else if (val === 'add_worker') {
|
||||
setOpenAddWorker({
|
||||
open: true,
|
||||
token: '${token}'
|
||||
});
|
||||
setCurrentData(row);
|
||||
handleAddWorker(row);
|
||||
} else if (val === 'addPool') {
|
||||
handleAddPool(row.provider);
|
||||
} else if (val === 'details') {
|
||||
@@ -255,14 +232,14 @@ const Credentials: React.FC = () => {
|
||||
marginTop={30}
|
||||
handleInputChange={handleNameChange}
|
||||
handleSearch={handleSearch}
|
||||
width={{ input: 200 }}
|
||||
width={{ input: 300 }}
|
||||
buttonText="Add Cluster"
|
||||
actionType="dropdown"
|
||||
actionItems={addActions}
|
||||
handleClickPrimary={handleClickDropdown}
|
||||
></FilterBar>
|
||||
<CardList
|
||||
dataList={ClusterDataList}
|
||||
dataList={dataSource.dataList}
|
||||
loading={dataSource.loading}
|
||||
activeId={-1}
|
||||
isFirst={!dataSource.loadend}
|
||||
@@ -273,18 +250,23 @@ const Credentials: React.FC = () => {
|
||||
></CardList>
|
||||
</PageContainer>
|
||||
<AddCluster
|
||||
provider={provider}
|
||||
open={openAddModal}
|
||||
action={action}
|
||||
title={title}
|
||||
data={currentData}
|
||||
provider={openAddModal.provider}
|
||||
open={openAddModal.open}
|
||||
action={openAddModal.action}
|
||||
title={openAddModal.title}
|
||||
currentData={openAddModal.currentData}
|
||||
onCancel={handleModalCancel}
|
||||
onOk={handleModalOk}
|
||||
></AddCluster>
|
||||
<AddWorker
|
||||
open={openAddWorker.open}
|
||||
onCancel={() => setOpenAddWorker({ open: false, token: '' })}
|
||||
token={openAddWorker.token}
|
||||
onCancel={() =>
|
||||
setOpenAddWorker({
|
||||
open: false,
|
||||
registrationInfo: { token: '', image: '', server_url: '' }
|
||||
})
|
||||
}
|
||||
registrationInfo={openAddWorker.registrationInfo}
|
||||
></AddWorker>
|
||||
<ClusterDetailModal
|
||||
open={openClusterDetail.open}
|
||||
|
||||
Reference in New Issue
Block a user