feat: add cluster detail

src/pages/_components/form-drawer.tsx

@@ -1,6 +1,8 @@
 import ModalFooter from '@/components/modal-footer';
 import GSDrawer from '@/components/scroller-modal/gs-drawer';
 import ColumnWrapper from '@/pages/_components/column-wrapper';
+import { Tag } from 'antd';
+import React from 'react';
 
 const ModalFooterStyle = {
   padding: '16px 24px 8px',
@@ -9,12 +11,14 @@ const ModalFooterStyle = {
 };
 
 type AddModalProps = {
-  title: string;
+  title: React.ReactNode;
   open: boolean;
-  onCancel: () => void;
+  onCancel?: () => void;
   children?: React.ReactNode;
-  onSubmit: () => void;
-  width?: number;
+  onSubmit?: () => void;
+  width?: number | string;
+  footer?: React.ReactNode;
+  subTitle?: React.ReactNode;
 };
 const FormDrawer: React.FC<AddModalProps> = ({
   title,
@@ -22,11 +26,32 @@ const FormDrawer: React.FC<AddModalProps> = ({
   onCancel,
   onSubmit,
   children,
-  width = 600
+  width = 600,
+  subTitle,
+  footer
 }) => {
   return (
     <GSDrawer
-      title={title}
+      title={
+        <>
+          {title}
+          {subTitle && (
+            <Tag
+              variant="outlined"
+              style={{
+                fontSize: 12,
+                fontWeight: 400,
+                marginLeft: 8,
+                borderRadius: 4,
+                borderColor: 'var(--ant-color-border-secondary)',
+                color: 'var(--ant-color-text-secondary)'
+              }}
+            >
+              {subTitle}
+            </Tag>
+          )}
+        </>
+      }
       open={open}
       onClose={onCancel}
       destroyOnHidden={true}
@@ -43,11 +68,13 @@ const FormDrawer: React.FC<AddModalProps> = ({
           container: { paddingBlock: 0 }
         }}
         footer={
-          <ModalFooter
-            onOk={onSubmit}
-            onCancel={onCancel}
-            style={ModalFooterStyle}
-          ></ModalFooter>
+          footer ?? (
+            <ModalFooter
+              onOk={onSubmit}
+              onCancel={onCancel}
+              style={ModalFooterStyle}
+            ></ModalFooter>
+          )
         }
       >
         {children}

src/pages/api-keys/index.tsx

@@ -133,7 +133,7 @@ const APIKeys: React.FC = () => {
           handleClickPrimary={handleAddKey}
           handleInputChange={handleNameChange}
           rowSelection={rowSelection}
-          width={{ input: 300 }}
+          widths={{ input: 300 }}
         ></FilterBar>
         <ConfigProvider renderEmpty={renderEmpty}>
           <Table

src/pages/backends/index.tsx

@@ -181,7 +181,7 @@ const BackendList = () => {
       <FilterBar
         marginBottom={22}
         marginTop={30}
-        width={{
+        widths={{
           input: 300
         }}
         inputHolder={intl.formatMessage({ id: 'common.filter.name' })}

src/pages/cluster-management/cluster-create.tsx

@@ -171,7 +171,6 @@ const ClusterCreate: React.FC<{
       if (result) {
         await callback?.(result as ClusterFormData);
         const step = steps[currentStep];
-        step.beforeNext?.();
         setCurrentStep((prev) => Math.min(prev + 1, steps.length - 1));
       }
     } catch (error) {

src/pages/cluster-management/cluster-workers-modal.tsx

@@ -0,0 +1,60 @@
+import WorkerList from '@/pages/resources/components/workers';
+import { useIntl } from '@umijs/max';
+import React from 'react';
+import styled from 'styled-components';
+import FormDrawer from '../_components/form-drawer';
+import { ClusterListItem } from './config/types';
+
+const Content = styled.div`
+  .ant-pagination {
+    position: fixed;
+    bottom: 8px;
+    right: 24px;
+    z-index: 100;
+  }
+  .page-tools {
+    position: sticky;
+    top: 0;
+  }
+`;
+
+interface ClusterWorkersModalProps {
+  cluster: ClusterListItem;
+  open: boolean;
+  onClose: () => void;
+}
+
+const ClusterWorkersModal: React.FC<ClusterWorkersModalProps> = ({
+  open,
+  onClose,
+  cluster
+}) => {
+  const intl = useIntl();
+  return (
+    <FormDrawer
+      title={`${intl.formatMessage({ id: 'clusters.title' })}: ${cluster.name}`}
+      open={open}
+      onCancel={onClose}
+      footer={
+        <div
+          style={{
+            height: 56
+          }}
+        ></div>
+      }
+      width={'calc(100vw - 220px)'}
+    >
+      <Content>
+        <WorkerList
+          cluster={cluster}
+          showAddButton={false}
+          showSelect={false}
+          widths={{ input: 360 }}
+          sourceType="cluster"
+        />
+      </Content>
+    </FormDrawer>
+  );
+};
+
+export default ClusterWorkersModal;

src/pages/cluster-management/clusters.tsx

@@ -31,6 +31,7 @@ import {
   WORKER_POOLS_API
 } from './apis';
 import ClusterModal from './cluster-modal';
+import ClusterWorkersModal from './cluster-workers-modal';
 import AddCluster from './components/add-cluster';
 import AddPool from './components/add-pool';
 import {
@@ -48,6 +49,7 @@ import {
 } from './config/types';
 import useAddWorker from './hooks/use-add-worker';
 import useClusterColumns from './hooks/use-cluster-columns';
+import { useClusterWorkers } from './hooks/use-cluster-workers';
 import useCreateCluster from './hooks/use-create-cluster';
 
 const Clusters: React.FC = () => {
@@ -82,6 +84,11 @@ const Clusters: React.FC = () => {
     useCreateCluster({
       refresh: handleSearch
     });
+  const {
+    clusterWorkersModalStatus,
+    openClusterWorkersModal,
+    closeClusterWorkersModal
+  } = useClusterWorkers();
 
   const [openAddModal, setOpenAddModal] = useState<{
     open: boolean;
@@ -311,7 +318,7 @@ const Clusters: React.FC = () => {
     );
   };
 
-  const columns = useClusterColumns(handleSelect);
+  const columns = useClusterColumns(handleSelect, openClusterWorkersModal);
 
   return (
     <>
@@ -320,7 +327,7 @@ const Clusters: React.FC = () => {
           showSelect={false}
           marginBottom={22}
           marginTop={30}
-          width={{ input: 300 }}
+          widths={{ input: 300 }}
           buttonText={intl.formatMessage({ id: 'clusters.button.add' })}
           rowSelection={rowSelection}
           handleInputChange={handleNameChange}
@@ -416,6 +423,11 @@ const Clusters: React.FC = () => {
         open={clusterModalStatus.open}
         onClose={closeClusterModal}
       ></ClusterModal>
+      <ClusterWorkersModal
+        open={clusterWorkersModalStatus.open}
+        onClose={closeClusterWorkersModal}
+        cluster={clusterWorkersModalStatus.cluster}
+      ></ClusterWorkersModal>
       {AddWorkerModal}
     </>
   );

src/pages/cluster-management/components/add-worker/index.tsx

@@ -27,7 +27,7 @@ const Footer = styled.div`
 type AddWorkerProps = {
   open: boolean;
   provider: ProviderType;
-  title: string;
+  title: React.ReactNode;
   clusterList?: Global.BaseOption<number, ClusterListItem>[];
   clusterLoading?: boolean;
   stepList: StepName[];

src/pages/cluster-management/components/pool-form.tsx

@@ -310,6 +310,11 @@ const PoolForm: React.FC<AddModalProps> = forwardRef((props, ref) => {
       title={title}
       collapsible={collapsible}
       onToggle={onToggle}
+      styles={{
+        root: {
+          background: 'unset'
+        }
+      }}
       deleteBtn={
         showDelete && (
           <Button

src/pages/cluster-management/components/worker-pools.tsx

@@ -138,7 +138,7 @@ const WorkerPools = () => {
         showSelect={false}
         marginBottom={22}
         marginTop={22}
-        width={{ input: 300 }}
+        widths={{ input: 300 }}
         buttonText={intl.formatMessage({ id: 'clusters.button.addNodePool' })}
         rowSelection={rowSelection}
         handleInputChange={handleNameChange}

src/pages/cluster-management/credentials.tsx

@@ -196,7 +196,7 @@ const Credentials: React.FC = () => {
           handleInputChange={handleNameChange}
           handleClickPrimary={handleAddCredential}
           rowSelection={rowSelection}
-          width={{ input: 300 }}
+          widths={{ input: 300 }}
         ></FilterBar>
 
         <ConfigProvider renderEmpty={renderEmpty}>

src/pages/cluster-management/hooks/use-add-worker.tsx

@@ -1,7 +1,7 @@
 import AddWorker from '@/pages/cluster-management/components/add-worker';
 import { useIntl } from '@umijs/max';
-import { message } from 'antd';
-import { useMemo, useState } from 'react';
+import { message, Tag } from 'antd';
+import React, { useMemo, useState } from 'react';
 import { StepName } from '../components/add-worker/config';
 import {
   ClusterStatusValueMap,
@@ -20,7 +20,7 @@ const useAddWorker = (props: {
   const [openAddWorker, setOpenAddWorker] = useState<{
     open: boolean;
     provider: ProviderType;
-    title: string;
+    title: React.ReactNode;
     cluster_id: number | null;
   }>({
     open: false,
@@ -56,7 +56,26 @@ const useAddWorker = (props: {
 
       setOpenAddWorker({
         open: true,
-        title: title,
+        title: (
+          <span>
+            {title}
+            {row.name && (
+              <Tag
+                variant="outlined"
+                style={{
+                  fontSize: 12,
+                  fontWeight: 400,
+                  marginLeft: 8,
+                  borderRadius: 4,
+                  borderColor: 'var(--ant-color-border-secondary)',
+                  color: 'var(--ant-color-text-secondary)'
+                }}
+              >
+                {intl.formatMessage({ id: 'clusters.title' })}: {row.name}
+              </Tag>
+            )}
+          </span>
+        ),
         provider: row.provider as ProviderType,
         cluster_id: clusterId
       });

src/pages/cluster-management/hooks/use-cluster-columns.tsx

@@ -6,7 +6,7 @@ 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 { Tooltip, Typography } from 'antd';
 import dayjs from 'dayjs';
 import { useMemo } from 'react';
 import {
@@ -27,7 +27,8 @@ const setActionsItems = (row: ClusterListItem) => {
 };
 
 const useClusterColumns = (
-  handleSelect: (val: string, record: ClusterListItem) => void
+  handleSelect: (val: string, record: ClusterListItem) => void,
+  onViewWorkers: (record: ClusterListItem) => void
 ): SealColumnProps[] => {
   const intl = useIntl();
 
@@ -40,7 +41,15 @@ const useClusterColumns = (
         span: 3,
         render: (text: string, record: ClusterListItem) => (
           <>
-            <AutoTooltip ghost>{text}</AutoTooltip>
+            <AutoTooltip ghost title={text}>
+              {record.workers > 0 ? (
+                <Typography.Link onClick={() => onViewWorkers(record)}>
+                  {record.name}
+                </Typography.Link>
+              ) : (
+                text
+              )}
+            </AutoTooltip>
             {record.is_default && (
               <Tooltip
                 title={intl.formatMessage({
@@ -127,7 +136,7 @@ const useClusterColumns = (
         )
       }
     ];
-  }, [handleSelect]);
+  }, [handleSelect, onViewWorkers]);
 };
 
 export default useClusterColumns;

src/pages/cluster-management/hooks/use-cluster-workers.ts

@@ -0,0 +1,32 @@
+import { useState } from 'react';
+import { ClusterListItem } from '../config/types';
+
+export const useClusterWorkers = () => {
+  const [clusterWorkersModalStatus, setClusterWorkersModalStatus] = useState<{
+    open: boolean;
+    cluster: ClusterListItem;
+  }>({
+    open: false,
+    cluster: {} as ClusterListItem
+  });
+
+  const openClusterWorkersModal = (cluster: ClusterListItem) => {
+    setClusterWorkersModalStatus({
+      open: true,
+      cluster
+    });
+  };
+
+  const closeClusterWorkersModal = () => {
+    setClusterWorkersModalStatus({
+      open: false,
+      cluster: {} as ClusterListItem
+    });
+  };
+
+  return {
+    clusterWorkersModalStatus,
+    openClusterWorkersModal,
+    closeClusterWorkersModal
+  };
+};

src/pages/cluster-management/hooks/use-pools-columns.tsx

@@ -3,7 +3,6 @@ import DropdownButtons from '@/components/drop-down-buttons';
 import { SealColumnProps } from '@/components/seal-table/types';
 import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import type { SortOrder } from 'antd/es/table/interface';
 import dayjs from 'dayjs';
 import _ from 'lodash';
 import { useMemo } from 'react';
@@ -29,7 +28,7 @@ const actionItems = [
 
 const usePoolsColumns = (
   handleSelect: (val: string, record: ListItem) => void,
-  sortOrder?: SortOrder
+  sortOrder?: string[]
 ): SealColumnProps[] => {
   const intl = useIntl();
 
@@ -83,7 +82,6 @@ const usePoolsColumns = (
                 }}
               />
             }
-            SHOWTITLE
             ghost
             minWidth={20}
           >
@@ -162,7 +160,6 @@ const usePoolsColumns = (
         key: 'created_at',
         span: 4,
         showSorterTootip: false,
-        sortOrder: sortOrder,
         sorter: false,
         ellipsis: {
           showTitle: false
@@ -192,7 +189,7 @@ const usePoolsColumns = (
         )
       }
     ];
-  }, [sortOrder, handleSelect]);
+  }, [handleSelect]);
 };
 
 export default usePoolsColumns;

src/pages/dashboard/components/over-view.tsx

@@ -14,11 +14,7 @@ const renderCardItem = (data: {
 }) => {
   const { label, value, bgColor } = data;
   return (
-    <Card
-      variant="borderless"
-      style={{ background: 'var(--color-white-1)' }}
-      className={styles['card-body']}
-    >
+    <Card variant="borderless" className={styles['card-body']}>
       <div className={styles.content}>
         <div className="label text-secondary">{label}</div>
         <div className="value font-600 font-size-16">{value}</div>

src/pages/llmodels/catalog.tsx

@@ -138,7 +138,7 @@ const Catalog: React.FC = () => {
         handleInputChange={handleNameChange}
         selectOptions={categoryOptions}
         buttonIcon={<SearchOutlined />}
-        width={{ input: 230, select: 200 }}
+        widths={{ input: 230, select: 200 }}
       ></FilterBar>
       <ScrollerContext.Provider
         value={{

src/pages/llmodels/components/hf-model-file.tsx

@@ -1,7 +1,6 @@
 import { getRequestId } from '@/atoms/models';
 import BaseSelect from '@/components/seal-form/base/select';
 import SimpleOverlay from '@/components/simple-overlay';
-import { createAxiosToken } from '@/hooks/use-chunk-request';
 import { useIntl } from '@umijs/max';
 import { Empty, Spin } from 'antd';
 import _ from 'lodash';
@@ -14,13 +13,8 @@ import React, {
 } from 'react';
 import 'simplebar-react/dist/simplebar.min.css';
 import styled from 'styled-components';
-import {
-  evaluationsModelSpec,
-  queryHuggingfaceModelFiles,
-  queryModelScopeModelFiles
-} from '../apis';
+import { queryHuggingfaceModelFiles, queryModelScopeModelFiles } from '../apis';
 import { modelSourceMap } from '../config';
-import { backendOptionsMap } from '../config/backend-parameters';
 import '../style/hf-model-file.less';
 import FileSkeleton from './file-skeleton';
 import ModelFileItem from './model-file-item';
@@ -226,70 +220,6 @@ const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
     }
   };
 
-  const getEvaluateResults = async (repoList: any[]) => {
-    try {
-      checkTokenRef.current?.cancel?.();
-      checkTokenRef.current = createAxiosToken();
-      const evaluations = await evaluationsModelSpec(
-        {
-          model_specs: repoList
-        },
-        {
-          token: checkTokenRef.current.token
-        }
-      );
-      return evaluations.results || [];
-    } catch (error) {
-      return [];
-    }
-  };
-
-  const handleEvaluate = async (list: any[]) => {
-    if (isDownload) {
-      return;
-    }
-    try {
-      const evaluateFileList = list.map((item: any) => {
-        // TODO: llamabox is remove from backend options, user should select a available backend
-        return {
-          backend: backendOptionsMap.llamaBox,
-          source: modelSource,
-          ...(modelSource === modelSourceMap.huggingface_value
-            ? {
-                huggingface_repo_id: props.selectedModel.name,
-                huggingface_filename: item.fakeName
-              }
-            : {
-                model_scope_model_id: props.selectedModel.name,
-                model_scope_file_path: item.fakeName
-              })
-        };
-      });
-
-      setIsEvaluating(true);
-      const evaluationList = await getEvaluateResults(evaluateFileList);
-
-      const resultList = _.map(list, (item: any, index: number) => {
-        return {
-          ...item,
-          evaluateResult: evaluationList[index]
-        };
-      });
-      const currentItem = _.find(
-        resultList,
-        (item: any) => item.path === currentPathRef.current
-      );
-
-      if (currentItem) {
-        onSelectFileAfterEvaluate?.(currentItem);
-      }
-      setDataSource({ fileList: resultList, loading: false });
-      setIsEvaluating(false);
-    } catch (error) {
-      setIsEvaluating(false);
-    }
-  };
-
   const handleFetchModelFiles = async () => {
     if (!props.selectedModel.name) {
       setDataSource({ fileList: [], loading: false });

src/pages/resources/components/gpus.tsx

@@ -98,7 +98,7 @@ const GPUList: React.FC = () => {
           handleSelectChange={handleClusterChange}
           selectOptions={clusterList}
           showSelect
-          width={{ input: 200 }}
+          widths={{ input: 200 }}
         ></FilterBar>
         <ConfigProvider renderEmpty={renderEmpty}>
           <Table
@@ -110,6 +110,7 @@ const GPUList: React.FC = () => {
             dataSource={dataSource.dataList}
             loading={dataSource.loading}
             rowKey="id"
+            scroll={{ x: true }}
             onChange={handleTableChange}
             pagination={{
               showSizeChanger: true,

src/pages/resources/components/worker-detail-content.tsx

@@ -95,7 +95,7 @@ const WorkerDetailContent: React.FC<{ worker_id: number | undefined }> = ({
         selectHolder={intl.formatMessage({ id: 'resources.filter.status' })}
         showSelect={true}
         selectOptions={statusList}
-        width={{ input: 300 }}
+        widths={{ input: 300 }}
       ></FilterBar>
       <ConfigProvider renderEmpty={renderEmpty}>
         <Table

src/pages/resources/components/workers.tsx

@@ -26,7 +26,19 @@ import useWorkerMaintenance from '../hooks/use-worker-maintenance';
 import UpdateLabels from './update-labels';
 import WorkerDetailModal from './worker-detail-modal';
 
-const Workers: React.FC = () => {
+const Workers: React.FC<{
+  cluster: ClusterListItem;
+  showSelect?: boolean;
+  showAddButton?: boolean;
+  widths?: { input: number };
+  sourceType?: string;
+}> = ({
+  cluster,
+  showSelect = true,
+  showAddButton = true,
+  widths = { input: 200 },
+  sourceType = 'resources'
+}) => {
   const {
     dataSource,
     rowSelection,
@@ -48,7 +60,10 @@ const Workers: React.FC = () => {
     events: ['UPDATE', 'DELETE', 'INSERT'],
     contentForDelete: 'resources.worker',
     watch: true,
-    API: WORKERS_API
+    API: WORKERS_API,
+    defaultQueryParams: {
+      cluster_id: cluster?.id || undefined
+    }
   });
   const { TerminalPanel, terminals, handleAddTerminal } = useTerminalTabs();
   const { MaintenanceModal, handleStopMaintenance, setOpenStatus } =
@@ -233,7 +248,8 @@ const Workers: React.FC = () => {
     loadend: dataSource.loadend,
     firstLoad: extraStatus.firstLoad,
     sortOrder,
-    handleSelect
+    handleSelect,
+    sourceType
   });
 
   useEffect(() => {
@@ -245,7 +261,7 @@ const Workers: React.FC = () => {
     <>
       <PageBox>
         <FilterBar
-          showSelect={true}
+          showSelect={showSelect}
           selectHolder={intl.formatMessage({ id: 'clusters.filterBy.cluster' })}
           marginBottom={22}
           marginTop={30}
@@ -253,11 +269,11 @@ const Workers: React.FC = () => {
           handleDeleteByBatch={handleDeleteBatch}
           handleSearch={handleSearch}
           handleSelectChange={handleClusterChange}
-          handleClickPrimary={handleOnAddWorker}
+          handleClickPrimary={showAddButton ? handleOnAddWorker : undefined}
           handleInputChange={handleNameChange}
           rowSelection={rowSelection}
           selectOptions={clusterData.list}
-          width={{ input: 200 }}
+          widths={widths}
         ></FilterBar>
         <ConfigProvider renderEmpty={renderEmpty}>
           <Table
@@ -269,6 +285,7 @@ const Workers: React.FC = () => {
             dataSource={dataSource.dataList}
             loading={dataSource.loading}
             rowKey="id"
+            scroll={{ x: true }}
             onChange={handleTableChange}
             rowSelection={rowSelection}
             pagination={{

src/pages/resources/hooks/use-worker-columns.tsx

@@ -232,6 +232,7 @@ const useWorkerColumns = ({
   loadend,
   firstLoad,
   sortOrder,
+  sourceType,
   handleSelect
 }: {
   clusterData: {
@@ -241,6 +242,7 @@ const useWorkerColumns = ({
   loadend: boolean;
   firstLoad: boolean;
   sortOrder: string[];
+  sourceType: string;
   handleSelect: (action: string, record: ListItem) => void;
 }): ColumnsType<ListItem> => {
   const intl = useIntl();
@@ -272,7 +274,10 @@ const useWorkerColumns = ({
   return useMemo<ColumnsType<ListItem>>(
     () => [
       {
-        title: intl.formatMessage({ id: 'common.table.name' }),
+        title:
+          sourceType === 'resources'
+            ? intl.formatMessage({ id: 'common.table.name' })
+            : intl.formatMessage({ id: 'resources.table.workername' }),
         dataIndex: 'name',
         width: 100,
         sorter: tableSorter(1),
@@ -291,6 +296,7 @@ const useWorkerColumns = ({
       {
         title: intl.formatMessage({ id: 'clusters.title' }),
         dataIndex: 'cluster_id',
+        hidden: sourceType === 'cluster',
         render: (id: number) => (
           <AutoTooltip ghost maxWidth={240}>
             {_.get(clusterData.data, id, '')}
@@ -402,7 +408,7 @@ const useWorkerColumns = ({
         )
       }
     ],
-    [intl, sortOrder, clusterData, loadend, firstLoad, handleSelect]
+    [intl, sourceType, sortOrder, clusterData, loadend, firstLoad, handleSelect]
   );
 };
 

src/pages/users/index.tsx

@@ -182,7 +182,7 @@ const Users: React.FC = () => {
           handleClickPrimary={handleAddUser}
           handleInputChange={handleNameChange}
           rowSelection={rowSelection}
-          width={{ input: 300 }}
+          widths={{ input: 300 }}
         ></FilterBar>
         <ConfigProvider renderEmpty={renderEmpty}>
           <Table