[INLONG-4902][Dashboard] Supports audit queries with different time p…

…recisions (apache#4903)
bruceneenhl · Aug 12, 2022 · 8e07705 · 8e07705
1 parent 2569699
commit 8e07705
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 3 deletions.
diff --git a/inlong-dashboard/src/locales/cn.json b/inlong-dashboard/src/locales/cn.json
@@ -303,6 +303,10 @@
   "pages.AccessDetail.Audit.Time": "时间",
   "pages.AccessDetail.Audit.Receive": "接收成功",
   "pages.AccessDetail.Audit.Send": "发送成功",
+  "pages.AccessDetail.Audit.TimeStaticsDim": "粒度",
+  "pages.AccessDetail.Audit.Min": "分钟",
+  "pages.AccessDetail.Audit.Hour": "小时",
+  "pages.AccessDetail.Audit.Day": "天",
   "pages.ApprovalDetail.AccessConfig.DataStorages": "数据存储",
   "pages.ApprovalDetail.AccessConfig.ApprovalInformation": "审批信息",
   "pages.ApprovalDetail.AccessConfig.DataFlowInformation": "数据流信息",

diff --git a/inlong-dashboard/src/locales/en.json b/inlong-dashboard/src/locales/en.json
@@ -303,6 +303,10 @@
   "pages.AccessDetail.Audit.Time": "Time",
   "pages.AccessDetail.Audit.Receive": "Receive",
   "pages.AccessDetail.Audit.Send": "Send",
+  "pages.AccessDetail.Audit.TimeStaticsDim": "TimeStaticsDim",
+  "pages.AccessDetail.Audit.Min": "Minute",
+  "pages.AccessDetail.Audit.Hour": "Hour",
+  "pages.AccessDetail.Audit.Day": "Day",
   "pages.ApprovalDetail.AccessConfig.DataStorages": "DataStorages",
   "pages.ApprovalDetail.AccessConfig.ApprovalInformation": "Approval information",
   "pages.ApprovalDetail.AccessConfig.DataFlowInformation": "Data stream information",

diff --git a/inlong-dashboard/src/pages/AccessDetail/Audit/config.tsx b/inlong-dashboard/src/pages/AccessDetail/Audit/config.tsx
@@ -22,6 +22,21 @@ import { Button } from 'antd';
 import dayjs from 'dayjs';
 import i18n from '@/i18n';
 
+export const timeStaticsDimList = [
+  {
+    label: i18n.t('pages.AccessDetail.Audit.Min'),
+    value: 'MINUTE',
+  },
+  {
+    label: i18n.t('pages.AccessDetail.Audit.Hour'),
+    value: 'HOUR',
+  },
+  {
+    label: i18n.t('pages.AccessDetail.Audit.Day'),
+    value: 'DAY',
+  },
+];
+
 export const auditList = ['Agent', 'DataProxy', 'Sort'].reduce((acc, item, index) => {
   return acc.concat([
     {
@@ -116,6 +131,16 @@ export const getFormContent = (inlongGroupId, initialValues, onSearch, onDataStr
       format: 'YYYY-MM-DD',
     },
   },
+  {
+    type: 'select',
+    label: i18n.t('pages.AccessDetail.Audit.TimeStaticsDim'),
+    name: 'timeStaticsDim',
+    initialValue: initialValues.timeStaticsDim,
+    props: {
+      dropdownMatchSelectWidth: false,
+      options: timeStaticsDimList,
+    },
+  },
   {
     type: 'select',
     label: i18n.t('pages.AccessDetail.Audit.AuditIds'),

diff --git a/inlong-dashboard/src/pages/AccessDetail/Audit/index.tsx b/inlong-dashboard/src/pages/AccessDetail/Audit/index.tsx
@@ -24,7 +24,14 @@ import { useRequest } from '@/hooks';
 import { timestampFormat } from '@/utils';
 import Charts from '@/components/Charts';
 import { CommonInterface } from '../common';
-import { getFormContent, toChartData, toTableData, getTableColumns, auditList } from './config';
+import {
+  getFormContent,
+  toChartData,
+  toTableData,
+  getTableColumns,
+  auditList,
+  timeStaticsDimList,
+} from './config';
 
 type Props = CommonInterface;
 
@@ -35,6 +42,7 @@ const Comp: React.FC<Props> = ({ inlongGroupId }) => {
     inlongStreamId: '',
     auditIds: auditList.map(item => item.value),
     dt: +new Date(),
+    timeStaticsDim: timeStaticsDimList[0].value,
   });
 
   const { data: sourceData = [], run } = useRequest(
@@ -64,7 +72,11 @@ const Comp: React.FC<Props> = ({ inlongGroupId }) => {
           ),
         [],
       )
-      .sort((a, b) => +new Date(a.logTs) - +new Date(b.logTs));
+      .sort((a, b) => {
+        const aT = +new Date(query.timeStaticsDim === 'HOUR' ? `${a.logTs}:00` : a.logTs);
+        const bT = +new Date(query.timeStaticsDim === 'HOUR' ? `${b.logTs}:00` : b.logTs);
+        return aT - bT;
+      });
     const output = flatArr.reduce((acc, cur) => {
       if (!acc[cur.logTs]) {
         acc[cur.logTs] = {};
@@ -76,7 +88,7 @@ const Comp: React.FC<Props> = ({ inlongGroupId }) => {
       return acc;
     }, {});
     return output;
-  }, [sourceData]);
+  }, [sourceData, query.timeStaticsDim]);
 
   const onSearch = async () => {
     await form.validateFields();