feat: add provider menu

2026-02-03 18:21:08 +08:00
parent cb5413c2ce
commit 2dfdd4a0d9
21 changed files with 701 additions and 7 deletions
@@ -0,0 +1,39 @@
+import { PageAction } from '@/config';
+import { PageActionType } from '@/config/types';
+import { useState } from 'react';
+import { maasProviderType } from '../config';
+import { MaasProviderItem as ListItem } from '../config/types';
+
+const useCreateProvider = (options: { refresh: () => void }) => {
+  const [openModalStatus, setOpenModalStatus] = useState<{
+    open: boolean;
+    action: PageActionType;
+    currentData?: ListItem;
+    title: string;
+    provider: maasProviderType | null;
+  }>({
+    open: false,
+    action: PageAction.CREATE,
+    currentData: undefined,
+    title: '',
+    provider: null
+  });
+
+  const openModal = () => {
+    setOpenModalStatus({ ...openModalStatus, open: true });
+  };
+
+  const closeModal = () => {
+    setOpenModalStatus({ ...openModalStatus, open: false });
+    options.refresh();
+  };
+
+  return {
+    openProviderModalStatus: openModalStatus,
+    setOpenProviderModalStatus: setOpenModalStatus,
+    openProviderModal: openModal,
+    closeProviderModal: closeModal
+  };
+};
+
+export default useCreateProvider;
@@ -0,0 +1,127 @@
+// columns.ts
+import AutoTooltip from '@/components/auto-tooltip';
+import DropdownButtons from '@/components/drop-down-buttons';
+import { SealColumnProps } from '@/components/seal-table/types';
+import StatusTag from '@/components/status-tag';
+import { tableSorter } from '@/config/settings';
+import { StarFilled } from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
+import { Tooltip } from 'antd';
+import dayjs from 'dayjs';
+import { useMemo } from 'react';
+import {
+  ProviderStatus,
+  ProviderStatusLabelMap,
+  rowActionList
+} from '../config';
+import { MaasProviderItem } from '../config/types';
+
+const useProviderColumns = (
+  handleSelect: (val: string, record: MaasProviderItem) => void,
+  onCellClick?: (record: MaasProviderItem, dataIndex: string) => void
+): SealColumnProps[] => {
+  const intl = useIntl();
+
+  return useMemo(() => {
+    return [
+      {
+        title: intl.formatMessage({ id: 'common.table.name' }),
+        dataIndex: 'name',
+        sorter: tableSorter(1),
+        span: 3,
+        render: (text: string, record: MaasProviderItem) => (
+          <>
+            <AutoTooltip ghost title={text}>
+              {text}
+            </AutoTooltip>
+            {record.is_default && (
+              <Tooltip
+                title={intl.formatMessage({
+                  id: 'clusters.form.setDefault.tips'
+                })}
+              >
+                <StarFilled
+                  style={{ color: 'var(--ant-gold-4)', marginLeft: 4 }}
+                />
+              </Tooltip>
+            )}
+          </>
+        )
+      },
+      {
+        title: intl.formatMessage({ id: 'clusters.table.provider' }),
+        dataIndex: 'provider',
+        sorter: tableSorter(2),
+        span: 3,
+        render: (value: string) => (
+          <AutoTooltip ghost minWidth={20}>
+            {ProviderStatusLabelMap[value]}
+          </AutoTooltip>
+        )
+      },
+      {
+        title: 'GPUs',
+        dataIndex: 'gpus',
+        span: 2,
+        sorter: tableSorter(3),
+        render: (value: number) => <span>{value}</span>
+      },
+      {
+        title: intl.formatMessage({ id: 'clusters.table.deployments' }),
+        dataIndex: 'models',
+        sorter: tableSorter(4),
+        span: 3,
+        render: (value: number) => <span>{value}</span>
+      },
+      {
+        title: intl.formatMessage({ id: 'resources.nodes' }),
+        dataIndex: 'workers',
+        sorter: tableSorter(5),
+        span: 3,
+        render: (value: number, record: MaasProviderItem) => (
+          <span>
+            {record.ready_workers} / {record.workers}
+          </span>
+        )
+      },
+      {
+        title: intl.formatMessage({ id: 'common.table.status' }),
+        dataIndex: 'state',
+        span: 3,
+        render: (value: string, record: MaasProviderItem) => (
+          <StatusTag
+            statusValue={{
+              status: ProviderStatus[value],
+              text: ProviderStatusLabelMap[value],
+              message: record.state_message || undefined
+            }}
+          />
+        )
+      },
+      {
+        title: intl.formatMessage({ id: 'common.table.createTime' }),
+        dataIndex: 'created_at',
+        sorter: tableSorter(6),
+        span: 4,
+        render: (value: string) => (
+          <AutoTooltip ghost minWidth={20}>
+            {dayjs(value).format('YYYY-MM-DD HH:mm:ss')}
+          </AutoTooltip>
+        )
+      },
+      {
+        title: intl.formatMessage({ id: 'common.table.operation' }),
+        dataIndex: 'operations',
+        span: 3,
+        render: (value: string, record: MaasProviderItem) => (
+          <DropdownButtons
+            items={rowActionList}
+            onSelect={(val) => handleSelect(val, record)}
+          ></DropdownButtons>
+        )
+      }
+    ];
+  }, [handleSelect, onCellClick]);
+};
+
+export default useProviderColumns;