feat: models filter by state

src/pages/llmodels/components/model-item.tsx

@@ -161,21 +161,6 @@ const ModelItem: React.FC<{
     return _.round(max_tokens / 1024);
   }, [model]);
 
-  const status = useMemo(() => {
-    if (!model.replicas && !model.ready_replicas) {
-      return MyModelsStatusValueMap.Inactive;
-    }
-
-    if (model.replicas > 0 && !model.ready_replicas) {
-      return MyModelsStatusValueMap.Degrade;
-    }
-
-    if (model.replicas === model.ready_replicas && model.replicas > 0) {
-      return MyModelsStatusValueMap.Active;
-    }
-    return MyModelsStatusValueMap.Degrade;
-  }, [model]);
-
   return (
     <CardWrapper>
       <Card
@@ -198,7 +183,7 @@ const ModelItem: React.FC<{
               statusValue={{
                 status: MyModelsStatusMap[model.status],
                 text: intl.formatMessage({
-                  id: MyModelsStatusLabelMap[model.status]
+                  id: MyModelsStatusLabelMap[model.status] || ''
                 }),
                 message: model.state_message
               }}

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

@@ -56,6 +56,7 @@ import {
   ModelInstanceListItem,
   SourceType
 } from '../config/types';
+import useFilterStatus from '../hooks/use-filter-status';
 import useFormInitialValues from '../hooks/use-form-initial-values';
 import useModelsColumns from '../hooks/use-models-columns';
 import AccessControlModal from './access-control-modal';
@@ -78,6 +79,7 @@ interface ModelsProps {
   onStop?: (ids: number[]) => void;
   onStart?: () => void;
   onTableSort?: (order: TableOrder | Array<TableOrder>) => void;
+  onStatusChange: (value?: any) => void;
   sortOrder: string[];
   queryParams: {
     page: number;
@@ -119,6 +121,7 @@ const Models: React.FC<ModelsProps> = ({
   onStop,
   onStart,
   onTableSort,
+  onStatusChange,
   sortOrder,
   deleteIds,
   dataSource,
@@ -154,6 +157,10 @@ const Models: React.FC<ModelsProps> = ({
     removeExpandedRowKey,
     expandedRowKeys
   } = useExpandedRowKeys(expandAtom);
+  const { labelRender, optionRender, handleStatusChange, statusOptions } =
+    useFilterStatus({
+      onStatusChange: onStatusChange
+    });
 
   const [apiAccessInfo, setAPIAccessInfo] = useState<any>({
     show: false,
@@ -663,6 +670,18 @@ const Models: React.FC<ModelsProps> = ({
                 onChange={handleClusterChange}
                 options={clusterList}
               ></BaseSelect>
+              <BaseSelect
+                allowClear
+                showSearch={false}
+                placeholder={intl.formatMessage({ id: 'common.filter.status' })}
+                style={{ width: 180 }}
+                size="large"
+                maxTagCount={1}
+                optionRender={optionRender}
+                labelRender={labelRender}
+                options={statusOptions}
+                onChange={handleStatusChange}
+              ></BaseSelect>
               <Button
                 type="text"
                 style={{ color: 'var(--ant-color-text-tertiary)' }}