[feature]:(SQLManagement) Support for list sorting

src/api/SqlManage/index.d.ts

@@ -2,9 +2,13 @@ import {
   GetSqlManageListFilterSourceEnum,
   GetSqlManageListFilterAuditLevelEnum,
   GetSqlManageListFilterStatusEnum,
+  GetSqlManageListSortFieldEnum,
+  GetSqlManageListSortOrderEnum,
   exportSqlManageV1FilterSourceEnum,
   exportSqlManageV1FilterAuditLevelEnum,
-  exportSqlManageV1FilterStatusEnum
+  exportSqlManageV1FilterStatusEnum,
+  exportSqlManageV1SortFieldEnum,
+  exportSqlManageV1SortOrderEnum
 } from './index.enum';
 
 import {
@@ -37,6 +41,10 @@ export interface IGetSqlManageListParams {
 
   filter_db_type?: string;
 
+  sort_field?: GetSqlManageListSortFieldEnum;
+
+  sort_order?: GetSqlManageListSortOrderEnum;
+
   page_index: number;
 
   page_size: number;
@@ -72,6 +80,10 @@ export interface IExportSqlManageV1Params {
   filter_db_type?: string;
 
   filter_rule_name?: string;
+
+  sort_field?: exportSqlManageV1SortFieldEnum;
+
+  sort_order?: exportSqlManageV1SortOrderEnum;
 }
 
 export interface IGetSqlManageRuleTipsParams {

src/api/SqlManage/index.enum.ts

@@ -26,6 +26,20 @@ export enum GetSqlManageListFilterStatusEnum {
   'manual_audited' = 'manual_audited'
 }
 
+export enum GetSqlManageListSortFieldEnum {
+  'first_appear_timestamp' = 'first_appear_timestamp',
+
+  'last_receive_timestamp' = 'last_receive_timestamp',
+
+  'fp_count' = 'fp_count'
+}
+
+export enum GetSqlManageListSortOrderEnum {
+  'asc' = 'asc',
+
+  'desc' = 'desc'
+}
+
 export enum exportSqlManageV1FilterSourceEnum {
   'audit_plan' = 'audit_plan',
 
@@ -51,3 +65,17 @@ export enum exportSqlManageV1FilterStatusEnum {
 
   'manual_audited' = 'manual_audited'
 }
+
+export enum exportSqlManageV1SortFieldEnum {
+  'first_appear_timestamp' = 'first_appear_timestamp',
+
+  'last_receive_timestamp' = 'last_receive_timestamp',
+
+  'fp_count' = 'fp_count'
+}
+
+export enum exportSqlManageV1SortOrderEnum {
+  'asc' = 'asc',
+
+  'desc' = 'desc'
+}

src/hooks/useTable/index.ts

@@ -3,6 +3,7 @@ import { useForm } from 'antd/lib/form/Form';
 import React, { useState } from 'react';
 import { Dictionary } from '../../types/common.type';
 import { TablePagination, UseTableOption } from './index.type';
+import { SorterResult } from 'antd/lib/table/interface';
 
 const useTable = <T = Dictionary>(option?: UseTableOption) => {
   const {
@@ -14,6 +15,9 @@ const useTable = <T = Dictionary>(option?: UseTableOption) => {
 
   const [form] = useForm<T>();
   const [collapse, collapseChange] = useState(defaultFilterFormCollapse);
+  const [sorterInfo, setSorterInfo] = useState<
+    SorterResult<any> | SorterResult<any>[]
+  >();
 
   const submitFilter = React.useCallback(() => {
     const values = form.getFieldsValue();
@@ -38,7 +42,8 @@ const useTable = <T = Dictionary>(option?: UseTableOption) => {
   );
 
   const tableChange = React.useCallback<Required<TableProps<any>>['onChange']>(
-    (newPagination) => {
+    (newPagination, _, sorter) => {
+      setSorterInfo(sorter);
       if (
         newPagination.current !== pagination.pageIndex ||
         newPagination.pageSize !== pagination.pageSize
@@ -64,6 +69,7 @@ const useTable = <T = Dictionary>(option?: UseTableOption) => {
     submitFilter,
     resetFilter,
     tableChange,
+    sorterInfo,
   };
 };
 

src/page/SQLManagement/SQLPanel/column.tsx

@@ -117,17 +117,20 @@ export const SQLPanelColumns: (params: {
       render: (time: string) => {
         return formatTime(time, '--');
       },
+      sorter: true,
     },
     {
       dataIndex: 'last_appear_time',
       title: () => t('sqlManagement.table.lastOccurrence'),
       render: (time: string) => {
         return formatTime(time, '--');
       },
+      sorter: true,
     },
     {
       dataIndex: 'appear_num',
       title: () => t('sqlManagement.table.occurrenceCount'),
+      sorter: true,
     },
     {
       dataIndex: 'assignees',

src/page/SQLManagement/SQLPanel/index.tsx

@@ -24,6 +24,8 @@ import { ResponseCode } from '../../../data/common';
 import AssignMember from './AssignMember';
 import {
   GetSqlManageListFilterStatusEnum,
+  GetSqlManageListSortFieldEnum,
+  GetSqlManageListSortOrderEnum,
   exportSqlManageV1FilterAuditLevelEnum,
   exportSqlManageV1FilterSourceEnum,
   exportSqlManageV1FilterStatusEnum,
@@ -44,9 +46,11 @@ const SQLPanel: React.FC = () => {
     submitFilter,
     tableChange,
     resetFilter,
+    sorterInfo,
   } = useTable<SQLPanelFilterFormFields>({
     defaultFilterInfo,
   });
+
   const { projectName } = useCurrentProjectName();
   const { username, isAdmin, isProjectManager } = useCurrentUser();
   const [SQLNum, setSQLNum] = useState<SQLStatisticsProps>({
@@ -75,8 +79,36 @@ const SQLPanel: React.FC = () => {
   };
 
   const { data, loading, refresh } = useRequest(
-    () =>
-      SqlManage.GetSqlManageList({
+    () => {
+      const getSortField = () => {
+        if (Array.isArray(sorterInfo)) {
+          return undefined;
+        }
+
+        if (sorterInfo?.field === 'first_appear_time') {
+          return GetSqlManageListSortFieldEnum.first_appear_timestamp;
+        }
+        if (sorterInfo?.field === 'last_appear_time') {
+          return GetSqlManageListSortFieldEnum.last_receive_timestamp;
+        }
+        if (sorterInfo?.field === 'appear_num') {
+          return GetSqlManageListSortFieldEnum.fp_count;
+        }
+      };
+      const getSortOrder = () => {
+        if (Array.isArray(sorterInfo)) {
+          return undefined;
+        }
+
+        if (sorterInfo?.order === 'ascend') {
+          return GetSqlManageListSortOrderEnum.asc;
+        }
+
+        if (sorterInfo?.order === 'descend') {
+          return GetSqlManageListSortOrderEnum.desc;
+        }
+      };
+      return SqlManage.GetSqlManageList({
         project_name: projectName,
         page_index: pagination.pageIndex,
         page_size: pagination.pageSize,
@@ -99,6 +131,8 @@ const SQLPanel: React.FC = () => {
         filter_rule_name: filterInfo.filter_rule?.split(
           DB_TYPE_RULE_NAME_SEPARATOR
         )?.[1],
+        sort_field: getSortField(),
+        sort_order: getSortOrder(),
       }).then((res) => {
         setSQLNum({
           SQLTotalNum: res.data?.sql_manage_total_num ?? 0,
@@ -109,9 +143,10 @@ const SQLPanel: React.FC = () => {
           list: res.data?.data ?? [],
           total: res.data?.sql_manage_total_num ?? 0,
         };
-      }),
+      });
+    },
     {
-      refreshDeps: [pagination, filterInfo],
+      refreshDeps: [pagination, filterInfo, sorterInfo],
     }
   );