[INLONG-11510][Dashboard] Add Page to dirty data query

apache · Nov 19, 2024 · f23e935 · f23e935
1 parent 8942f35
commit f23e935
Show file tree

Hide file tree

Showing 6 changed files with 747 additions and 4 deletions.
diff --git a/inlong-dashboard/src/ui/locales/cn.json b/inlong-dashboard/src/ui/locales/cn.json
@@ -1,5 +1,6 @@
 {
   "basic.Edit": "编辑",
+  "basic.Search": "搜索",
   "basic.Detail": "详情",
   "basic.Operating": "操作",
   "basic.OperatingSuccess": "操作成功",
@@ -1020,5 +1021,34 @@
   "pages.GroupDataTemplate.VisibleRange.InCharges":"责任人",
   "pages.GroupDataTemplate.VisibleRange.Tenant":"租户",
   "miscellaneous.total": "... 共",
-  "miscellaneous.tenants": "个租户"
+  "miscellaneous.tenants": "个租户",
+  "meta.Sinks.DirtyData.TdbankImpDate": "脏数据分区",
+  "meta.Sinks.DirtyData.DataFlowId": "DataFlowId",
+  "meta.Sinks.DirtyData.GroupId": "GroupId",
+  "meta.Sinks.DirtyData.StreamId": "StreamId",
+  "meta.Sinks.DirtyData.ReportTime": "上报时间",
+  "meta.Sinks.DirtyData.DataTime": "Data Time",
+  "meta.Sinks.DirtyData.ServerType": "服务类型",
+  "meta.Sinks.DirtyData.DirtyType": "脏数据类型",
+  "meta.Sinks.DirtyData.DirtyMessage": "脏消息",
+  "meta.Sinks.DirtyData.ExtInfo": "额外信息",
+  "meta.Sinks.DirtyData.DirtyData": "脏数据",
+  "meta.Sinks.DirtyData.DirtyDetailWarning": "脏数据任务正在运行，请稍后再试",
+  "meta.Sinks.DirtyData.DirtyTrendWarning": "脏数据趋势任务正在运行，请稍后再试",
+  "meta.Sinks.DirtyData.DataCount": "脏数据个数",
+  "meta.Sinks.DirtyData.Search.DirtyType": "脏数据类型",
+  "meta.Sinks.DirtyData.Search.ServerType": "服务类型",
+  "meta.Sinks.DirtyData.StartTimeError": "开始时间不能大于当前时间",
+  "meta.Sinks.DirtyData.endTimeNotGreaterThanStartTime": "结束时间不能大于当前时间",
+  "meta.Sinks.DirtyData.TimeIntervalError": "时间间隔能超过七天",
+  "meta.Sinks.DirtyTrend.DataTimeUnit":"时间单位",
+  "meta.Sinks.DirtyTrend.Day":"天",
+  "meta.Sinks.DirtyTrend.Hour":"小时",
+  "meta.Sinks.DirtyData.Detail":"详情",
+  "meta.Sinks.DirtyData.Trend":"趋势",
+  "meta.Sinks.DirtyData":"脏数据查询",
+  "meta.Sinks.DirtyData.DirtyType.DeserializeError":"反序列化错误",
+  "meta.Sinks.DirtyData.DirtyType.FieldMappingError":"字段映射错误",
+  "meta.Sinks.DirtyData.DirtyType.LoadError":"加载错误",
+  "meta.Sinks.DirtyData.Search.KeyWord":"请输入关键字"
 }
diff --git a/inlong-dashboard/src/ui/locales/en.json b/inlong-dashboard/src/ui/locales/en.json
@@ -1,5 +1,6 @@
 {
   "basic.Edit": "Edit",
+  "basic.Search": "Search",
   "basic.Detail": "Detail",
   "basic.Operating": "Operation",
   "basic.OperatingSuccess": "Operating success",
@@ -374,6 +375,7 @@
   "meta.Sinks.Cls.Tag": "Tag",
   "meta.Sinks.Cls.Tokenizer": "Tokenizer rule",
   "meta.Sinks.Cls.IsMetaField": "Is meta field",
+
   "meta.Group.InlongGroupId": "Inlong group id",
   "meta.Group.InlongGroupIdRules": "Only English letters, numbers, dots(.), minus(-), and underscores(_)",
   "meta.Group.InlongGroupName": "Inlong group name",
@@ -1020,5 +1022,34 @@
   "pages.GroupDataTemplate.VisibleRange.InCharges":"Owner",
   "pages.GroupDataTemplate.VisibleRange.Tenant":"Tenant",
   "miscellaneous.total": "... total ",
-  "miscellaneous.tenants": " tenants"
+  "miscellaneous.tenants": " tenants",
+  "meta.Sinks.DirtyData.TdbankImpDate": "TdbankImp Date",
+  "meta.Sinks.DirtyData.DataFlowId": "DataFlowId",
+  "meta.Sinks.DirtyData.GroupId": "GroupId",
+  "meta.Sinks.DirtyData.StreamId": "StreamId",
+  "meta.Sinks.DirtyData.ReportTime": "Report Time",
+  "meta.Sinks.DirtyData.DataTime": "Data Time",
+  "meta.Sinks.DirtyData.ServerType": "Server Type",
+  "meta.Sinks.DirtyData.DirtyType": "Dirty Type",
+  "meta.Sinks.DirtyData.DirtyMessage": "Dirty Message",
+  "meta.Sinks.DirtyData.ExtInfo": "Ext Info",
+  "meta.Sinks.DirtyData.DirtyData": "DirtyData",
+  "meta.Sinks.DirtyData.DirtyDetailWarning": "The dirty data task is running, please try again later",
+  "meta.Sinks.DirtyData.DirtyTrendWarning": "The dirty data trending task is running, try again later",
+  "meta.Sinks.DirtyData.DataCount": "Data Count",
+  "meta.Sinks.DirtyData.Search.DirtyType": "Dirty Type",
+  "meta.Sinks.DirtyData.Search.ServerType": "Server Type",
+  "meta.Sinks.DirtyData.StartTimeError": "The start time cannot be greater than the current time",
+  "meta.Sinks.DirtyData.endTimeNotGreaterThanStartTime": "The end time cannot be greater than the current time",
+  "meta.Sinks.DirtyData.TimeIntervalError": "The time interval can be more than seven days",
+  "meta.Sinks.DirtyTrend.DataTimeUnit":"DataTime Unit",
+  "meta.Sinks.DirtyTrend.Day":"Day",
+  "meta.Sinks.DirtyTrend.Hour":"Hour",
+  "meta.Sinks.DirtyData.Detail":"Detail",
+  "meta.Sinks.DirtyData.Trend":"Trend",
+  "meta.Sinks.DirtyData":"Dirty Data Search",
+  "meta.Sinks.DirtyData.DirtyType.DeserializeError":"DeserializeError",
+  "meta.Sinks.DirtyData.DirtyType.FieldMappingError":"FieldMappingError",
+  "meta.Sinks.DirtyData.DirtyType.LoadError":"LoadError",
+  "meta.Sinks.DirtyData.Search.KeyWord":"Please enter a keyword"
 }
diff --git a/inlong-dashboard/src/ui/pages/GroupDetail/DataStorage/index.tsx b/inlong-dashboard/src/ui/pages/GroupDetail/DataStorage/index.tsx
@@ -25,6 +25,7 @@ import {
   TableOutlined,
   EditOutlined,
   DeleteOutlined,
+  AreaChartOutlined,
 } from '@ant-design/icons';
 import HighTable from '@/ui/components/HighTable';
 import { defaultSize } from '@/configs/pagination';
@@ -36,6 +37,7 @@ import request from '@/core/utils/request';
 import { pickObjectArray } from '@/core/utils';
 import { CommonInterface } from '../common';
 import { sinks } from '@/plugins/sinks';
+import DirtyModal from '@/ui/pages/common/DirtyModal';
 
 interface Props extends CommonInterface {
   inlongStreamId?: string;
@@ -58,7 +60,12 @@ const Comp = ({ inlongGroupId, inlongStreamId, readonly }: Props, ref) => {
   const [createModal, setCreateModal] = useState<Record<string, unknown>>({
     open: false,
   });
-
+  const [dirtyModal, setDirtyModal] = useState<Record<string, unknown>>({
+    open: false,
+  });
+  const onOpenDirtyModal = useCallback(({ id }) => {
+    setDirtyModal({ open: true, id });
+  }, []);
   const {
     data,
     loading,
@@ -173,6 +180,9 @@ const Comp = ({ inlongGroupId, inlongStreamId, readonly }: Props, ref) => {
               <Button type="link" onClick={() => onDelete(record)}>
                 {i18n.t('basic.Delete')}
               </Button>
+              <Button type="link" onClick={() => onOpenDirtyModal(record)}>
+                {i18n.t('meta.Sinks.DirtyData')}
+              </Button>
             </>
           ),
       } as any,
@@ -238,6 +248,9 @@ const Comp = ({ inlongGroupId, inlongStreamId, readonly }: Props, ref) => {
                   <Button key="del" type="link" onClick={() => onDelete(item)}>
                     <DeleteOutlined />
                   </Button>,
+                  <Button type="link" onClick={() => onOpenDirtyModal(item)}>
+                    <AreaChartOutlined />
+                  </Button>,
                 ]}
               >
                 <span>
@@ -277,6 +290,15 @@ const Comp = ({ inlongGroupId, inlongStreamId, readonly }: Props, ref) => {
         }}
         onCancel={() => setCreateModal({ open: false })}
       />
+      <DirtyModal
+        {...dirtyModal}
+        open={dirtyModal.open as boolean}
+        onOk={async () => {
+          await getList();
+          setDirtyModal({ open: false });
+        }}
+        onCancel={() => setDirtyModal({ open: false })}
+      />
     </>
   );
 };

diff --git a/inlong-dashboard/src/ui/pages/SynchronizeDetail/SyncSink/index.tsx b/inlong-dashboard/src/ui/pages/SynchronizeDetail/SyncSink/index.tsx
@@ -25,6 +25,7 @@ import {
   TableOutlined,
   EditOutlined,
   DeleteOutlined,
+  AreaChartOutlined,
 } from '@ant-design/icons';
 import HighTable from '@/ui/components/HighTable';
 import { defaultSize } from '@/configs/pagination';
@@ -36,6 +37,7 @@ import request from '@/core/utils/request';
 import { pickObjectArray } from '@/core/utils';
 import { sinks } from '@/plugins/sinks';
 import { CommonInterface } from '../common';
+import DirtyModal from '@/ui/pages/common/DirtyModal';
 
 interface Props extends CommonInterface {
   inlongStreamId: string;
@@ -58,7 +60,12 @@ const Comp = ({ inlongGroupId, inlongStreamId, sinkMultipleEnable, readonly }: P
   const [createModal, setCreateModal] = useState<Record<string, unknown>>({
     open: false,
   });
-
+  const [dirtyModal, setDirtyModal] = useState<Record<string, unknown>>({
+    open: false,
+  });
+  const onOpenDirtyModal = useCallback(({ id }) => {
+    setDirtyModal({ open: true, id });
+  }, []);
   const {
     data,
     loading,
@@ -179,6 +186,9 @@ const Comp = ({ inlongGroupId, inlongStreamId, sinkMultipleEnable, readonly }: P
               <Button type="link" onClick={() => onDelete(record)}>
                 {i18n.t('basic.Delete')}
               </Button>
+              <Button type="link" onClick={() => onOpenDirtyModal(record)}>
+                {i18n.t('meta.Sinks.DirtyData')}
+              </Button>
             </>
           ),
       } as any,
@@ -249,6 +259,9 @@ const Comp = ({ inlongGroupId, inlongStreamId, sinkMultipleEnable, readonly }: P
                   <Button key="del" type="link" onClick={() => onDelete(item)}>
                     <DeleteOutlined />
                   </Button>,
+                  <Button type="link" onClick={() => onOpenDirtyModal(item)}>
+                    <AreaChartOutlined />
+                  </Button>,
                 ]}
               >
                 <span>
@@ -289,6 +302,15 @@ const Comp = ({ inlongGroupId, inlongStreamId, sinkMultipleEnable, readonly }: P
         }}
         onCancel={() => setCreateModal({ open: false })}
       />
+      <DirtyModal
+        {...dirtyModal}
+        open={dirtyModal.open as boolean}
+        onOk={async () => {
+          await getList();
+          setDirtyModal({ open: false });
+        }}
+        onCancel={() => setDirtyModal({ open: false })}
+      />
     </>
   );
 };

diff --git a/inlong-dashboard/src/ui/pages/common/DirtyModal/conf.tsx b/inlong-dashboard/src/ui/pages/common/DirtyModal/conf.tsx
@@ -0,0 +1,47 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import i18n from '@/i18n';
+
+export const statusList = [
+  {
+    label: i18n.t('meta.Sinks.DirtyData.DirtyType.DeserializeError'),
+    value: 'DeserializeError',
+  },
+  {
+    label: i18n.t('meta.Sinks.DirtyData.DirtyType.FieldMappingError'),
+    value: 'FieldMappingError',
+  },
+  {
+    label: i18n.t('meta.Sinks.DirtyData.DirtyType.LoadError'),
+    value: 'LoadError',
+  },
+];
+
+export const statusMap = statusList.reduce(
+  (acc, cur) => ({
+    ...acc,
+    [cur.value]: cur,
+  }),
+  {},
+);
+
+export const genStatusTag = value => {
+  return statusMap[value];
+};