fix: reset default columns do not work

src/pages/_components/filter-form.tsx

@@ -0,0 +1,121 @@
+import OverlayScroller from '@/components/overlay-scroller';
+import { FilterOutlined } from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
+import { Button, Form, Popover } from 'antd';
+import React, { useState } from 'react';
+import styled from 'styled-components';
+
+const Container = styled.div`
+  padding: 8px;
+  padding-right: 0px;
+  .title {
+    font-weight: 500;
+    margin-bottom: 12px;
+  }
+  .btn-wrapper {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-top: 24px;
+    padding-right: 8px;
+  }
+  .buttons {
+    display: flex;
+    gap: 8px;
+    justify-content: flex-end;
+  }
+`;
+
+const FilterForm: React.FC<
+  React.PropsWithChildren & {
+    width?: number;
+    contentHeight?: number;
+    initialValues?: any;
+    hasFilters?: boolean;
+    onClose?: () => void;
+    onValuesChange?: (ChangeValues: any, allValues: any) => void;
+  }
+> = ({
+  children,
+  width = 300,
+  contentHeight = 400,
+  initialValues = {},
+  hasFilters = false,
+  onClose,
+  onValuesChange
+}) => {
+  const intl = useIntl();
+  const [open, setOpen] = useState(false);
+  const [form] = Form.useForm();
+
+  const handleToggle = () => {
+    setOpen(!open);
+  };
+
+  const handleOpenChange = (isOpen: boolean) => {
+    setOpen(isOpen);
+  };
+
+  const handleOnReset = () => {
+    form.resetFields(Object.keys(initialValues));
+    onValuesChange?.({}, initialValues);
+    setOpen(false);
+  };
+
+  const handleOnClose = () => {
+    setOpen(false);
+    onClose?.();
+  };
+
+  return (
+    <Popover
+      open={open}
+      trigger={'click'}
+      arrow={false}
+      placement="bottomRight"
+      content={
+        <Container>
+          <OverlayScroller
+            maxHeight={contentHeight}
+            styles={{
+              wrapper: {
+                paddingInlineStart: 0
+              }
+            }}
+          >
+            <Form
+              onValuesChange={onValuesChange}
+              initialValues={initialValues}
+              form={form}
+            >
+              {children}
+            </Form>
+          </OverlayScroller>
+          <div className="btn-wrapper">
+            <Button size="middle" onClick={handleOnReset}>
+              {intl.formatMessage({ id: 'common.button.reset' })}
+            </Button>
+            <div className="buttons">
+              <Button size="middle" type="primary" onClick={handleOnClose}>
+                {intl.formatMessage({ id: 'common.button.close' })}
+              </Button>
+            </div>
+          </div>
+        </Container>
+      }
+      onOpenChange={handleOpenChange}
+      styles={{
+        container: {
+          padding: 8
+        },
+        root: {
+          width: width
+        }
+      }}
+    >
+      <Button onClick={handleToggle} icon={<FilterOutlined />}></Button>
+    </Popover>
+  );
+};
+
+export default FilterForm;

src/pages/benchmark/hooks/use-benchmark-columns.tsx

@@ -43,6 +43,7 @@ const useBenchmarkColumns = (params: {
           </Typography.Text>
         ),
         dataIndex: 'operations',
+        width: 100,
         render: (value: string, record: ListItem) => (
           <RowActions record={record} handleSelect={handleSelect}></RowActions>
         )

src/pages/benchmark/hooks/use-column-settings.tsx

@@ -429,7 +429,7 @@ const useColumnSettings = (options: {
     <ColumnSettings
       tableName="benchmark"
       contentHeight={contentHeight}
-      defaultSelectedColumns={selectedColumns}
+      defaultSelectedColumns={defaultColumns}
       selectedColumns={selectedColumns}
       onChange={handleOnChange}
       onReset={handleOnReset}

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
-                <BaseSelect
+                allowClear
-                  allowClear
+                showSearch={false}
-                  showSearch={false}
+                placeholder={intl.formatMessage({
-                  placeholder={intl.formatMessage({
+                  id: 'clusters.filterBy.cluster'
-                    id: 'clusters.filterBy.cluster'
+                })}
-                  })}
+                style={{ width: 160 }}
-                  style={{ width: 160 }}
+                size="large"
-                  size="large"
+                maxTagCount={1}
-                  maxTagCount={1}
+                onChange={handleClusterChange}
-                  onChange={handleClusterChange}
+                options={clusterList}
-                  options={clusterList}
+              ></BaseSelect>
-                ></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: {
+const useFilterStatus = (options?: {
-  onStatusChange: (value?: any) => void;
+  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}