fix: reset default columns do not work

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

@@ -83,6 +83,7 @@ interface ModelsProps {
   onTableSort?: (order: TableOrder | Array<TableOrder>) => void;
   onStatusChange: (value?: any) => void;
   onDeleteInstanceFromCache?: (instanceId: number) => void;
+  onFilterChange?: (filters: any) => void;
   sortOrder: string[];
   queryParams: {
     page: number;
@@ -126,6 +127,7 @@ const Models: React.FC<ModelsProps> = ({
   onTableSort,
   onStatusChange,
   onDeleteInstanceFromCache,
+  onFilterChange,
   sortOrder,
   deleteIds,
   dataSource,
@@ -623,20 +625,18 @@ const Models: React.FC<ModelsProps> = ({
                 onChange={handleCategoryChange}
                 options={modelCategories.filter((item) => item.value)}
               ></BaseSelect>
-              {page !== 'clusters' && (
-                <BaseSelect
-                  allowClear
-                  showSearch={false}
-                  placeholder={intl.formatMessage({
-                    id: 'clusters.filterBy.cluster'
-                  })}
-                  style={{ width: 160 }}
-                  size="large"
-                  maxTagCount={1}
-                  onChange={handleClusterChange}
-                  options={clusterList}
-                ></BaseSelect>
-              )}
+              <BaseSelect
+                allowClear
+                showSearch={false}
+                placeholder={intl.formatMessage({
+                  id: 'clusters.filterBy.cluster'
+                })}
+                style={{ width: 160 }}
+                size="large"
+                maxTagCount={1}
+                onChange={handleClusterChange}
+                options={clusterList}
+              ></BaseSelect>
               <BaseSelect
                 allowClear
                 showSearch={false}
@@ -649,6 +649,15 @@ const Models: React.FC<ModelsProps> = ({
                 options={statusOptions}
                 onChange={handleStatusChange}
               ></BaseSelect>
+              {/* <Filters
+                initialValues={{
+                  cluster_id: undefined,
+                  state: undefined,
+                  categories: undefined
+                }}
+                clusterList={clusterList}
+                onValuesChange={onFilterChange}
+              ></Filters> */}
               <Button
                 type="text"
                 style={{ color: 'var(--ant-color-text-tertiary)' }}

src/pages/llmodels/filters/index.tsx

@@ -0,0 +1,85 @@
+import BaseSelect from '@/components/seal-form/base/select';
+import FilterForm from '@/pages/_components/filter-form';
+import { useIntl } from '@umijs/max';
+import { Form } from 'antd';
+import _ from 'lodash';
+import styled from 'styled-components';
+import { modelCategories } from '../config';
+import useFilterStatus from '../hooks/use-filter-status';
+
+const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+`;
+
+interface FilterFormContentProps {
+  clusterList: Global.BaseOption<number>[];
+  initialValues?: any;
+  onValuesChange?: (values: any) => void;
+}
+
+const FilterFormContent: React.FC<FilterFormContentProps> = ({
+  clusterList,
+  initialValues,
+  onValuesChange
+}) => {
+  const intl = useIntl();
+  const form = Form.useFormInstance();
+  const { labelRender, optionRender, statusOptions } = useFilterStatus();
+
+  const handleOnValuesChange = (changedValues: any, allValues: any) => {
+    const query = _.pickBy(allValues, (value: any) => !!value);
+    onValuesChange?.(query);
+  };
+
+  return (
+    <FilterForm
+      onValuesChange={handleOnValuesChange}
+      initialValues={initialValues}
+    >
+      <Content>
+        <Form.Item name="categories" noStyle>
+          <BaseSelect
+            allowClear
+            showSearch={false}
+            placeholder={intl.formatMessage({
+              id: 'models.filter.category'
+            })}
+            size="large"
+            maxTagCount={1}
+            options={modelCategories.filter((item) => item.value)}
+          ></BaseSelect>
+        </Form.Item>
+        <Form.Item name="cluster_id" noStyle>
+          <BaseSelect
+            allowClear
+            showSearch={false}
+            placeholder={intl.formatMessage({
+              id: 'clusters.filterBy.cluster'
+            })}
+            size="large"
+            maxTagCount={1}
+            options={clusterList}
+          ></BaseSelect>
+        </Form.Item>
+        <Form.Item name="state" noStyle>
+          <BaseSelect
+            allowClear
+            showSearch={false}
+            placeholder={intl.formatMessage({
+              id: 'common.filter.status'
+            })}
+            size="large"
+            maxTagCount={1}
+            optionRender={optionRender}
+            labelRender={labelRender}
+            options={statusOptions}
+          ></BaseSelect>
+        </Form.Item>
+      </Content>
+    </FilterForm>
+  );
+};
+
+export default FilterFormContent;

src/pages/llmodels/hooks/use-filter-status.tsx

@@ -15,10 +15,10 @@ const Dot = ({ color }: { color: string }) => {
   );
 };
 
-const useFilterStatus = (options: {
-  onStatusChange: (value?: any) => void;
+const useFilterStatus = (options?: {
+  onStatusChange?: (value?: any) => void;
 }) => {
-  const { onStatusChange } = options;
+  const { onStatusChange } = options || {};
   const intl = useIntl();
 
   const statusOptions = [
@@ -49,7 +49,7 @@ const useFilterStatus = (options: {
     const current = statusOptions.find((option) => option.value === item.value);
     return (
       <span className="flex-center gap-8">
-        <Dot color={current!.color}></Dot>
+        {current && <Dot color={current.color}></Dot>}
         {item.label}
       </span>
     );
@@ -65,7 +65,7 @@ const useFilterStatus = (options: {
   };
 
   const handleStatusChange = (value: string | undefined) => {
-    onStatusChange(value);
+    onStatusChange?.(value);
   };
 
   return {

src/pages/llmodels/index.tsx

@@ -339,6 +339,17 @@ const Models: React.FC<{ clusterId?: number }> = ({ clusterId }) => {
     });
   };
 
+  const handleOnFilterChange = (filters: any) => {
+    handleQueryChange({
+      page: 1,
+      ...filters
+    });
+    createModelsChunkRequest({
+      search: queryParams.search,
+      ...filters
+    });
+  };
+
   const handleDeleteInstanceFromCache = (id: number) => {
     cacheInsDataListRef.current = cacheInsDataListRef.current.filter(
       (item) => item.id !== id
@@ -451,6 +462,7 @@ const Models: React.FC<{ clusterId?: number }> = ({ clusterId }) => {
         onStop={handleSearchBySilent}
         onStart={handleSearchBySilent}
         onTableSort={handleOnSortChange}
+        onFilterChange={handleOnFilterChange}
         onDeleteInstanceFromCache={handleDeleteInstanceFromCache}
         sortOrder={sortOrder}
         queryParams={queryParams}