feat: templates, storage

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

@@ -2,12 +2,20 @@ 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 { DeleteModal, FilterBar, IconFont, NoResult } from '@gpustack/core-ui';
+import { useQueryClusterList } from '@/pages/cluster-management/services/use-query-cluster-list';
+import {
+  BaseSelect,
+  DeleteModal,
+  FilterBar,
+  IconFont,
+  NoResult
+} from '@gpustack/core-ui';
+import { useIntl } from '@umijs/max';
 import { useMemoizedFn } from 'ahooks';
-import { ConfigProvider, message, Table } from 'antd';
+import { ConfigProvider, Divider, Flex, message, Table } from 'antd';
 import _ from 'lodash';
-import { useState } from 'react';
-import PageBox from '../../_components/page-box';
+import { useEffect, useState } from 'react';
+import { PageContainerInner } from '../../_components/page-box';
 import {
   createGPUServiceInstance,
   deleteGPUServiceInstance,
@@ -31,6 +39,7 @@ const GPUService: React.FC = () => {
     fetchData,
     handlePageChange,
     handleTableChange,
+    handleQueryChange,
     handleSearch,
     handleNameChange
   } = useTableFetch<ListItem>({
@@ -41,6 +50,12 @@ const GPUService: React.FC = () => {
     API: GPU_SERVICE_INSTANCES_API,
     contentForDelete: 'GPU 实例'
   });
+  const {
+    fetchClusterList,
+    cancelRequest: cancelClusterRequest,
+    clusterList
+  } = useQueryClusterList();
+  const intl = useIntl();
 
   const [openAddModalStatus, setOpenAddModalStatus] = useState<{
     action: PageActionType;
@@ -54,10 +69,24 @@ const GPUService: React.FC = () => {
     currentData: null
   });
 
+  useEffect(() => {
+    fetchClusterList({ page: -1 }).then((clusters) => {
+      if (clusters.length > 0) {
+        handleQueryChange({
+          cluster_id: clusters[0].id,
+          page: 1
+        });
+      }
+    });
+    return () => {
+      cancelClusterRequest();
+    };
+  }, []);
+
   const handleAddInstance = () => {
     setOpenAddModalStatus({
       action: PageAction.CREATE,
-      title: '创建 GPU 实例',
+      title: '添加 GPU 实例',
       open: true,
       currentData: null
     });
@@ -108,6 +137,13 @@ const GPUService: React.FC = () => {
     }
   });
 
+  const handleClusterChange = (value: number) => {
+    handleQueryChange({
+      cluster_id: value,
+      page: 1
+    });
+  };
+
   const renderEmpty = (type?: string) => {
     if (type !== 'Table') return;
     return (
@@ -115,13 +151,13 @@ const GPUService: React.FC = () => {
         loading={dataSource.loading}
         loadend={dataSource.loadend}
         dataSource={dataSource.dataList}
-        image={<IconFont type="icon-layers" />}
+        image={<IconFont type="icon-instances-outlined" />}
         filters={_.omit(queryParams, ['sort_by'])}
         noFoundText="未找到匹配的 GPU 实例"
         title="暂无 GPU 实例"
         subTitle="创建一个 GPU 实例后会显示在这里"
         onClick={handleAddInstance}
-        buttonText="创建"
+        buttonText="立即添加"
       />
     );
   };
@@ -132,44 +168,66 @@ const GPUService: React.FC = () => {
   });
 
   return (
-    <>
-      <PageBox>
-        <FilterBar
-          marginBottom={22}
-          marginTop={30}
-          buttonText="创建"
-          handleSearch={handleSearch}
-          handleDeleteByBatch={handleDeleteBatch}
-          handleClickPrimary={handleAddInstance}
-          handleInputChange={handleNameChange}
-          rowSelection={rowSelection}
-          widths={{ input: 300 }}
-        />
-        <ConfigProvider renderEmpty={renderEmpty}>
-          <Table
-            columns={columns}
-            dataSource={dataSource.dataList}
-            rowSelection={rowSelection}
-            loading={{
-              spinning: dataSource.loading,
-              size: 'middle'
-            }}
-            sortDirections={TABLE_SORT_DIRECTIONS}
-            showSorterTooltip={false}
-            rowKey="id"
-            onChange={handleTableChange}
-            pagination={{
-              size: 'middle',
-              showSizeChanger: true,
-              pageSize: queryParams.perPage,
-              current: queryParams.page,
-              total: dataSource.total,
-              hideOnSinglePage: queryParams.perPage === 10,
-              onChange: handlePageChange
+    <PageContainerInner
+      leftContent={
+        <Flex align="center">
+          <span>{intl.formatMessage({ id: 'menu.gpuService.instances' })}</span>
+          <Divider
+            orientation="vertical"
+            style={{
+              marginLeft: 16
             }}
           />
-        </ConfigProvider>
-      </PageBox>
+          <BaseSelect
+            variant="borderless"
+            value={queryParams.cluster_id}
+            options={clusterList}
+            onChange={handleClusterChange}
+            style={{ minWidth: 120, fontWeight: 500 }}
+          ></BaseSelect>
+        </Flex>
+      }
+    >
+      <FilterBar
+        marginBottom={22}
+        marginTop={30}
+        showSelect={false}
+        selectOptions={clusterList}
+        select={{ showSearch: true }}
+        selectHolder="按集群过滤"
+        buttonText="添加 GPU 实例"
+        handleSearch={handleSearch}
+        handleSelectChange={handleClusterChange}
+        handleDeleteByBatch={handleDeleteBatch}
+        handleClickPrimary={handleAddInstance}
+        handleInputChange={handleNameChange}
+        rowSelection={rowSelection}
+        widths={{ input: 300 }}
+      />
+      <ConfigProvider renderEmpty={renderEmpty}>
+        <Table
+          columns={columns}
+          dataSource={dataSource.dataList}
+          rowSelection={rowSelection}
+          loading={{
+            spinning: dataSource.loading,
+            size: 'middle'
+          }}
+          sortDirections={TABLE_SORT_DIRECTIONS}
+          showSorterTooltip={false}
+          rowKey="id"
+          onChange={handleTableChange}
+          pagination={{
+            size: 'middle',
+            showSizeChanger: true,
+            pageSize: queryParams.perPage,
+            current: queryParams.page,
+            total: dataSource.total,
+            hideOnSinglePage: queryParams.perPage === 10,
+            onChange: handlePageChange
+          }}
+        />
+      </ConfigProvider>
       <AddModal
         open={openAddModalStatus.open}
         action={openAddModalStatus.action}
@@ -179,7 +237,7 @@ const GPUService: React.FC = () => {
         onOk={handleModalOk}
       />
       <DeleteModal ref={modalRef} />
-    </>
+    </PageContainerInner>
   );
 };