refactor: gpu service API alignment

src/pages/gpu-service/storage/index.tsx

@@ -1,85 +1,26 @@
-import { currentClusterAtom } from '@/atoms/gpuservice';
-import { getCurrentOrgNamespace } from '@/atoms/user';
 import { PageAction } from '@/config';
 import { PaginationKey, TABLE_SORT_DIRECTIONS } from '@/config/settings';
-import type { PageActionType } from '@/config/types';
 import useTableFetch from '@/hooks/use-table-fetch';
-import { ProviderValueMap } from '@/pages/cluster-management/config';
-import { useQueryClusterList } from '@/pages/cluster-management/services/use-query-cluster-list';
-import {
-  BaseSelect,
-  DeleteModal,
-  FilterBar,
-  IconFont,
-  NoResult
-} from '@gpustack/core-ui';
+import { DeleteModal, FilterBar, IconFont, NoResult } from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
 import { useMemoizedFn } from 'ahooks';
-import { ConfigProvider, Divider, Flex, message, Table } from 'antd';
-import { useAtom } from 'jotai';
+import { ConfigProvider, message, Table } from 'antd';
 import _ from 'lodash';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { PageContainerInner } from '../../_components/page-box';
+import PageBox from '../../_components/page-box';
 import {
   deleteGPUServiceStorage,
   GPU_SERVICE_STORAGE_API,
   queryGPUServiceStorage
 } from './apis';
-
 import AddModal from './components/add-modal';
 import { FormData, ListItem } from './config/types';
+import useCreateStorageModal from './hooks/use-create-storage-modal';
 import useStorageColumns from './hooks/use-storage-columns';
 import useCreateStorage from './services/use-create-storage';
 import useUpdateStorage from './services/use-update-storage';
 
 const GPUServiceStorage: React.FC = () => {
   const intl = useIntl();
-  const [currentCluster, setCurrentCluster] = useAtom(currentClusterAtom);
-  const clusterID = currentCluster?.id;
-  // Admin "All" view falls back to the cluster's owner Org name —
-  // see :func:`getCurrentOrgNamespace`.
-  const namespace = getCurrentOrgNamespace(currentCluster?.owner_principal_id);
-
-  const deleteStorage = useCallback(
-    (id: number) => deleteGPUServiceStorage({ namespace, clusterID, id }),
-    [namespace, clusterID]
-  );
-
-  const fetchStorage = useCallback(
-    async (
-      params: any,
-      options?: any
-    ): Promise<Global.PageResponse<ListItem>> => {
-      const effectiveClusterID = params.cluster_id ?? clusterID;
-      if (!effectiveClusterID) {
-        return {
-          items: [],
-          pagination: {
-            total: 0,
-            totalPage: 0,
-            page: 1,
-            perPage: params.perPage || 10
-          }
-        } as Global.PageResponse<ListItem>;
-      }
-      const res = await queryGPUServiceStorage(
-        { ...params, namespace, clusterID: effectiveClusterID },
-        options
-      );
-      const total = res?.items?.length ?? 0;
-      const perPage = params.perPage || 10;
-      return {
-        items: res?.items ?? [],
-        pagination: {
-          total,
-          totalPage: Math.ceil(total / perPage),
-          page: params.page || 1,
-          perPage
-        }
-      };
-    },
-    [namespace, clusterID]
-  );
 
   const {
     dataSource,
@@ -92,116 +33,55 @@ const GPUServiceStorage: React.FC = () => {
     fetchData,
     handlePageChange,
     handleTableChange,
-    handleQueryChange,
     handleSearch,
     handleNameChange
   } = useTableFetch<ListItem>({
     key: PaginationKey.Storage,
-    fetchAPI: fetchStorage,
-    deleteAPI: deleteStorage,
+    fetchAPI: queryGPUServiceStorage,
+    deleteAPI: deleteGPUServiceStorage,
     watch: false,
     polling: true,
-    API: GPU_SERVICE_STORAGE_API({ namespace, clusterID }),
+    API: GPU_SERVICE_STORAGE_API,
     contentForDelete: intl.formatMessage({ id: 'gpuservice.storage' })
   });
 
   const { fetchData: createStorage } = useCreateStorage();
   const { fetchData: updateStorage } = useUpdateStorage();
-  const {
-    fetchClusterList,
-    cancelRequest: cancelClusterRequest,
-    clusterList
-  } = useQueryClusterList();
-
-  const k8sClusterList = useMemo(
-    () =>
-      clusterList.filter(
-        (item) => item.provider === ProviderValueMap.Kubernetes
-      ),
-    [clusterList]
-  );
-
-  const [openAddModalStatus, setOpenAddModalStatus] = useState<{
-    action: PageActionType;
-    open: boolean;
-    title: string;
-    currentData?: ListItem | null;
-  }>({
-    action: PageAction.CREATE,
-    title: '',
-    open: false,
-    currentData: null
-  });
-
-  useEffect(() => {
-    fetchClusterList({ page: -1 }).then((clusters) => {
-      const k8sClusters = clusters.filter(
-        (item: any) => item.provider === ProviderValueMap.Kubernetes
-      );
-      if (k8sClusters.length === 0) {
-        return;
-      }
-      const storedCluster = k8sClusters.find(
-        (item: any) => item.id === currentCluster?.id
-      );
-      const targetCluster = storedCluster ?? k8sClusters[0];
-      if (!storedCluster) {
-        setCurrentCluster({
-          ...targetCluster,
-          label: targetCluster.name,
-          value: targetCluster.id
-        });
-      }
-      handleQueryChange({
-        cluster_id: targetCluster.id,
-        page: 1
-      });
-    });
-    return () => {
-      cancelClusterRequest();
-    };
-  }, []);
+  const { openStorageModalStatus, openStorageModal, closeStorageModal } =
+    useCreateStorageModal();
 
   const handleAddStorage = () => {
-    setOpenAddModalStatus({
-      action: PageAction.CREATE,
-      title: intl.formatMessage({ id: 'gpuservice.storage.add' }),
-      open: true,
-      currentData: null
-    });
+    openStorageModal(
+      PageAction.CREATE,
+      intl.formatMessage({ id: 'gpuservice.storage.add' })
+    );
   };
 
   const handleEditStorage = (row: ListItem) => {
-    setOpenAddModalStatus({
-      action: PageAction.EDIT,
-      title: intl.formatMessage({ id: 'gpuservice.storage.edit' }),
-      open: true,
-      currentData: row
-    });
-  };
-
-  const closeModal = () => {
-    setOpenAddModalStatus({
-      action: PageAction.CREATE,
-      title: '',
-      open: false,
-      currentData: null
-    });
+    openStorageModal(
+      PageAction.EDIT,
+      intl.formatMessage({ id: 'gpuservice.storage.edit' }),
+      row
+    );
   };
 
   const handleModalOk = async (data: FormData) => {
     try {
-      if (openAddModalStatus.action === PageAction.EDIT) {
+      if (openStorageModalStatus.action === PageAction.EDIT) {
         await updateStorage({
-          id: openAddModalStatus.currentData!.metadata?.name as any,
-          data
+          id: openStorageModalStatus.currentData!.id,
+          data: {
+            owner_principal_id: data.owner_principal_id,
+            displayName: data.displayName,
+            description: data.description
+          }
         });
       } else {
         await createStorage({ data });
       }
 
       fetchData();
-      closeModal();
+      closeStorageModal();
       message.success(intl.formatMessage({ id: 'common.message.success' }));
     } catch (error) {
       message.error(intl.formatMessage({ id: 'common.message.fail' }));
@@ -214,23 +94,11 @@ const GPUServiceStorage: React.FC = () => {
     } else if (val === 'delete') {
       handleDelete({
         ...row,
-        name: row.metadata?.name,
-        id: row.metadata?.name as any
+        id: row.id
       });
     }
   });
 
-  const handleClusterChange = (value: number) => {
-    const cluster = k8sClusterList.find((item) => item.value === value);
-    if (cluster) {
-      setCurrentCluster(cluster);
-    }
-    handleQueryChange({
-      cluster_id: value,
-      page: 1
-    });
-  };
-
   const renderEmpty = (type?: string) => {
     if (type !== 'Table') return;
     return (
@@ -260,38 +128,13 @@ const GPUServiceStorage: React.FC = () => {
 
   return (
     <>
-      <PageContainerInner
-        leftContent={
-          <Flex align="center">
-            <span>{intl.formatMessage({ id: 'menu.gpuService.storage' })}</span>
-            <Divider
-              orientation="vertical"
-              style={{
-                marginLeft: 16
-              }}
-            />
-            <BaseSelect
-              variant="borderless"
-              value={queryParams.cluster_id}
-              options={k8sClusterList}
-              style={{ minWidth: 120, fontWeight: 500 }}
-              onChange={handleClusterChange}
-            ></BaseSelect>
-          </Flex>
-        }
-      >
+      <PageBox>
         <FilterBar
           marginBottom={22}
           marginTop={30}
           showSelect={false}
-          selectOptions={k8sClusterList}
-          select={{ showSearch: true }}
-          selectHolder={intl.formatMessage({
-            id: 'gpuservice.storage.filter.cluster'
-          })}
           buttonText={intl.formatMessage({ id: 'gpuservice.storage.add' })}
           handleSearch={handleSearch}
-          handleSelectChange={handleClusterChange}
           handleDeleteByBatch={handleDeleteBatch}
           handleClickPrimary={handleAddStorage}
           handleInputChange={handleNameChange}
@@ -309,18 +152,25 @@ const GPUServiceStorage: React.FC = () => {
             }}
             sortDirections={TABLE_SORT_DIRECTIONS}
             showSorterTooltip={false}
-            rowKey={(record) => record.metadata?.name as any}
+            rowKey={(record) => record.id}
             onChange={handleTableChange}
-            pagination={false}
+            pagination={{
+              showSizeChanger: true,
+              pageSize: queryParams.perPage,
+              current: queryParams.page,
+              total: dataSource.total,
+              hideOnSinglePage: queryParams.perPage === 10,
+              onChange: handlePageChange
+            }}
           />
         </ConfigProvider>
-      </PageContainerInner>
+      </PageBox>
       <AddModal
-        open={openAddModalStatus.open}
-        action={openAddModalStatus.action}
-        title={openAddModalStatus.title}
-        data={openAddModalStatus.currentData}
-        onCancel={closeModal}
+        open={openStorageModalStatus.open}
+        action={openStorageModalStatus.action}
+        title={openStorageModalStatus.title}
+        data={openStorageModalStatus.currentData}
+        onCancel={closeStorageModal}
         onOk={handleModalOk}
       />
       <DeleteModal ref={modalRef} />