fix: flatten all filters in table list

src/pages/llmodels/components/table-list.tsx

@@ -22,7 +22,7 @@ import {
   TableOrder
 } from '@gpustack/core-ui';
 import { useIntl, useNavigate, useSearchParams } from '@umijs/max';
-import { useMemoizedFn, useToggle } from 'ahooks';
+import { useMemoizedFn } from 'ahooks';
 import { Button, Space, message } from 'antd';
 import { useAtom } from 'jotai';
 import _ from 'lodash';
@@ -54,14 +54,13 @@ import {
   ModelInstanceListItem,
   SourceType
 } from '../config/types';
-import Filters from '../filters';
 import useEditDeployment from '../hooks/use-edit-deployment';
 import useModelsColumns from '../hooks/use-models-columns';
 import useViewInstanceLogs from '../hooks/use-view-instance-logs';
+import LeftFilters from '../instance-view/left-filters';
 import DeployModal from './deployment/deploy-modal';
 import UpdateModelModal from './deployment/update-modal';
 import Instances from './instance/instances';
-import LeftFilters from './left-filters';
 import ViewLogsModal from './view-logs-modal';
 interface ModelsProps {
   handleSearch: (params?: any) => void;
@@ -124,15 +123,13 @@ const Models: React.FC<ModelsProps> = ({
   onTableSort,
   onStatusChange,
   onDeleteInstanceFromCache,
-  onFilterChange,
   sortOrder,
   deleteIds,
   dataSource,
   queryParams,
   loading,
   loadend,
-  total,
-  filterValues = {}
+  total
 }) => {
   const { generateFormValues, clusterList, workerList } =
     useDeploymentsContext();
@@ -180,8 +177,6 @@ const Models: React.FC<ModelsProps> = ({
     source: modelSourceMap.huggingface_value as SourceType
   });
   const modalRef = useRef<any>(null);
-  const [filtersVisible, { toggle: toggleFilters }] = useToggle();
-  const filterRef = useRef<any>(null);
 
   useEffect(() => {
     if (deleteIds?.length) {
@@ -550,14 +545,6 @@ const Models: React.FC<ModelsProps> = ({
     }
   });
 
-  const handleOnClearFilters = () => {
-    filterRef.current?.reset();
-  };
-
-  const filtersCount = Object.values(filterValues).filter(
-    (value) => value !== undefined && value !== null && value !== ''
-  );
-
   useEffect(() => {
     if (modelsSession.source && loadend) {
       handleClickDropdown({
@@ -576,29 +563,19 @@ const Models: React.FC<ModelsProps> = ({
         alignItems: 'flex-start'
       }}
     >
-      <Filters
-        ref={filterRef}
-        open={filtersVisible}
-        onValuesChange={onFilterChange}
-        clusterList={clusterList}
-        onClose={toggleFilters}
-        onClear={handleOnClearFilters}
-      ></Filters>
       <div style={{ flex: 1, padding: '24px' }}>
         <PageTools
           marginBottom={22}
           marginTop={0}
           left={
             <LeftFilters
-              count={filtersCount.length}
-              toggleFilters={toggleFilters}
-              onClear={handleOnClearFilters}
+              showCategory
+              showWorker={false}
               handleNameChange={handleNameChange}
               handleClusterChange={handleClusterChange}
               handleCategoryChange={handleCategoryChange}
               handleStatusChange={onStatusChange}
               handleSearch={handleSearch}
-              onFilterChange={onFilterChange}
               clusterList={clusterList}
             ></LeftFilters>
           }

src/pages/llmodels/instance-view/index.tsx

@@ -20,6 +20,21 @@ import useQueryModelList from '../services/use-query-model-list';
 import LeftFilters from './left-filters';
 import useInstanceColumns from './use-instance-columns';
 
+const filterOptions = {
+  optionList: [
+    {
+      label: 'Running',
+      value: 'running',
+      color: 'var(--ant-color-success)'
+    },
+    {
+      label: 'Error',
+      value: 'error',
+      color: 'var(--ant-color-error)'
+    }
+  ]
+};
+
 const InstanceView = forwardRef((props, ref) => {
   const {
     dataSource,
@@ -150,6 +165,7 @@ const InstanceView = forwardRef((props, ref) => {
               handleSearch={handleSearch}
               clusterList={clusterList}
               workerList={workerList}
+              filterOptions={filterOptions}
             ></LeftFilters>
           }
         ></FilterBar>

src/pages/llmodels/instance-view/left-filters.tsx

@@ -4,15 +4,26 @@ import { BaseSelect } from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
 import { Button, Input, Space } from 'antd';
 import React from 'react';
+import { categoryOptions } from '../config';
 import useFilterStatus from '../hooks/use-filter-status';
 interface LeftFiltersProps {
   handleNameChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   handleClusterChange: (value: number) => void;
   handleStatusChange: (value: string) => void;
-  handleWorkerChange: (value: number) => void;
+  handleWorkerChange?: (value: number) => void;
+  handleCategoryChange?: (value: string) => void;
   handleSearch: () => void;
   clusterList: Global.BaseOption<number>[];
-  workerList: workerListItem[];
+  workerList?: workerListItem[];
+  showWorker?: boolean;
+  showCategory?: boolean;
+  filterOptions?: {
+    optionList: {
+      label: string;
+      value: string;
+      color: string;
+    }[];
+  };
 }
 
 const LeftFilters: React.FC<LeftFiltersProps> = (props) => {
@@ -21,29 +32,16 @@ const LeftFilters: React.FC<LeftFiltersProps> = (props) => {
     handleClusterChange,
     handleStatusChange,
     handleWorkerChange,
+    handleCategoryChange,
     handleSearch,
     clusterList,
-    workerList
+    workerList = [],
+    showWorker = true,
+    showCategory = false,
+    filterOptions
   } = props;
-  const { labelRender, optionRender, statusOptions } = useFilterStatus({
-    optionList: [
-      {
-        label: 'Running',
-        value: 'running',
-        color: 'var(--ant-color-success)'
-      },
-      {
-        label: 'Error',
-        value: 'error',
-        color: 'var(--ant-color-error)'
-      }
-      // {
-      //   label: 'Provisioning',
-      //   value: 'provisioning',
-      //   color: 'var(--ant-blue-5)'
-      // }
-    ]
-  });
+  const { labelRender, optionRender, statusOptions } =
+    useFilterStatus(filterOptions);
   const intl = useIntl();
 
   return (
@@ -72,21 +70,37 @@ const LeftFilters: React.FC<LeftFiltersProps> = (props) => {
         onChange={handleClusterChange}
         options={clusterList}
       ></BaseSelect>
-      <BaseSelect
-        allowClear
-        showSearch={false}
-        placeholder={intl.formatMessage({
-          id: 'resources.filter.worker'
-        })}
-        style={{ width: 160 }}
-        size="large"
-        maxTagCount={1}
-        onChange={handleWorkerChange}
-        options={workerList.map((worker) => ({
-          label: worker.name,
-          value: worker.id
-        }))}
-      ></BaseSelect>
+      {showCategory && (
+        <BaseSelect
+          allowClear
+          showSearch={false}
+          placeholder={intl.formatMessage({
+            id: 'models.filter.category'
+          })}
+          style={{ width: 160 }}
+          size="large"
+          maxTagCount={1}
+          onChange={handleCategoryChange}
+          options={categoryOptions}
+        ></BaseSelect>
+      )}
+      {showWorker && (
+        <BaseSelect
+          allowClear
+          showSearch={false}
+          placeholder={intl.formatMessage({
+            id: 'resources.filter.worker'
+          })}
+          style={{ width: 160 }}
+          size="large"
+          maxTagCount={1}
+          onChange={handleWorkerChange}
+          options={workerList.map((worker) => ({
+            label: worker.name,
+            value: worker.id
+          }))}
+        ></BaseSelect>
+      )}
       <BaseSelect
         allowClear
         showSearch={false}