[INLONG-10086][Dashboard] Add refresh function of module audit (#10087)

apache · Apr 26, 2024 · b408d7f · b408d7f
1 parent 5674bc2
commit b408d7f
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 4 deletions.
diff --git a/inlong-dashboard/src/ui/locales/cn.json b/inlong-dashboard/src/ui/locales/cn.json
@@ -10,6 +10,7 @@
   "basic.Delete": "删除",
   "basic.DeleteConfirm": "确认删除吗?",
   "basic.DeleteSuccess": "删除成功",
+  "basic.Refresh": "刷新",
   "basic.Status": "状态",
   "basic.Creator": "创建人",
   "basic.Modifier": "修改人",

diff --git a/inlong-dashboard/src/ui/locales/en.json b/inlong-dashboard/src/ui/locales/en.json
@@ -10,6 +10,7 @@
   "basic.Delete": "Delete",
   "basic.DeleteConfirm": "Are you sure to delete?",
   "basic.DeleteSuccess": "Delete success",
+  "basic.Refresh": "Refresh",
   "basic.Status": "Status",
   "basic.Creator": "Creator",
   "basic.Modifier": "Modifier",

diff --git a/inlong-dashboard/src/ui/pages/ModuleAudit/IdModule/config.tsx b/inlong-dashboard/src/ui/pages/ModuleAudit/IdModule/config.tsx
@@ -20,6 +20,8 @@
 import dayjs from 'dayjs';
 import i18n from '@/i18n';
 import request from '@/core/utils/request';
+import { Button } from 'antd';
+import React from 'react';
 
 export const timeStaticsDimList = [
   {
@@ -45,7 +47,7 @@ export const toTableData = (source, sourceDataMap) => {
     }));
 };
 
-export const getFormContent = initialValues => [
+export const getFormContent = (initialValues, onSearch) => [
   {
     type: 'select',
     label: i18n.t('pages.ModuleAudit.config.InlongGroupId'),
@@ -178,6 +180,13 @@ export const getFormContent = initialValues => [
       },
     },
   },
+  {
+    type: (
+      <Button type="primary" onClick={onSearch}>
+        {i18n.t('basic.Refresh')}
+      </Button>
+    ),
+  },
 ];
 
 export const getTableColumns = source => {

diff --git a/inlong-dashboard/src/ui/pages/ModuleAudit/IdModule/index.tsx b/inlong-dashboard/src/ui/pages/ModuleAudit/IdModule/index.tsx
@@ -18,14 +18,16 @@
  */
 
 import React, { useMemo, useState } from 'react';
-import HighTable from '@/ui/components/HighTable';
+import HighTable, { useForm } from '@/ui/components/HighTable';
 import { useRequest } from '@/ui/hooks';
 import { timestampFormat } from '@/core/utils';
 import { getFormContent, toTableData, getTableColumns } from './config';
 
 export const idModule = 'id';
 
 const Comp: React.FC = () => {
+  const [form] = useForm();
+
   const [query, setQuery] = useState({
     startDate: +new Date(),
     endDate: +new Date(),
@@ -75,6 +77,11 @@ const Comp: React.FC = () => {
     return output;
   }, [sourceData]);
 
+  const onSearch = async () => {
+    await form.validateFields();
+    run();
+  };
+
   const onFilter = keyword => {
     setQuery({
       ...query,
@@ -94,7 +101,7 @@ const Comp: React.FC = () => {
     <>
       <HighTable
         filterForm={{
-          content: getFormContent(query),
+          content: getFormContent(query, onSearch),
           onFilter,
         }}
         table={{

diff --git a/inlong-dashboard/src/ui/pages/ModuleAudit/IpModule/config.tsx b/inlong-dashboard/src/ui/pages/ModuleAudit/IpModule/config.tsx
@@ -20,6 +20,8 @@
 import dayjs from 'dayjs';
 import i18n from '@/i18n';
 import request from '@/core/utils/request';
+import { Button } from 'antd';
+import React from 'react';
 
 export const toChartData = (source, sourceDataMap) => {
   const xAxisData = Object.keys(sourceDataMap);
@@ -56,7 +58,7 @@ export const toTableData = (source, sourceDataMap) => {
 
 export const getFormContent = (initialValues, onSearch) => [
   {
-    type: 'inputsearch',
+    type: 'input',
     label: i18n.t('pages.ModuleAudit.config.Ip'),
     name: 'ip',
   },
@@ -132,6 +134,13 @@ export const getFormContent = (initialValues, onSearch) => [
       },
     },
   },
+  {
+    type: (
+      <Button type="primary" onClick={onSearch}>
+        {i18n.t('basic.Refresh')}
+      </Button>
+    ),
+  },
 ];
 
 export const getTableColumns = source => {