[feature]: Enhance audit result handling with new status checks and UI updates

Author: Seechi-Yolo

packages/sqle/src/components/AuditResultMessage/ResultIconRender.tsx

@@ -1,42 +1,75 @@
 import React, { useMemo } from 'react';
-
 import { Space } from 'antd';
 import {
   CheckCircleFilled,
   WarningFilled,
   InfoHexagonFilled,
   CloseCircleFilled
 } from '@actiontech/icons';
+import { useTranslation } from 'react-i18next';
+import { ResultIconRenderProps } from './index.type';
+
+const IconLevelDictionary = {
+  normal: <CheckCircleFilled width={20} height={20} />,
+  notice: <InfoHexagonFilled width={20} height={20} />,
+  warn: <WarningFilled width={20} height={20} />,
+  error: <CloseCircleFilled width={20} height={20} />
+};
 
+/** @deprecated use ResultIconRenderProps instead */
 export type IResultIconRender = {
   iconLevels: string[];
 };
 
-const ResultIconRender = (props: IResultIconRender) => {
-  const { iconLevels } = props;
+const ResultIconRender = (props: ResultIconRenderProps) => {
+  const { auditResultInfo, iconLevels } = props;
+  const { t } = useTranslation();
 
-  const iconData = useMemo(() => {
-    return Array.from(new Set(iconLevels.filter((icon: string) => icon)));
+  const legacyIconData = useMemo(() => {
+    return Array.from(
+      new Set((iconLevels ?? []).filter((icon: string) => icon))
+    );
   }, [iconLevels]);
 
-  const renderIcon = useMemo(() => {
-    return {
-      normal: <CheckCircleFilled width={20} height={20} />,
-      notice: <InfoHexagonFilled width={20} height={20} />,
-      warn: <WarningFilled width={20} height={20} />,
-      error: <CloseCircleFilled width={20} height={20} />
-    };
-  }, []);
+  const auditResultIconData = useMemo(() => {
+    return Array.from(
+      new Set(auditResultInfo?.map((v) => v.level)?.filter(Boolean))
+    );
+  }, [auditResultInfo]);
+
+  if (auditResultInfo) {
+    if (auditResultInfo.some((item) => item.executionFailed)) {
+      return (
+        <Space>
+          <WarningFilled width={20} height={20} />
+          <span>{t('components.auditResultMessage.hasException')}</span>
+        </Space>
+      );
+    }
+
+    return (
+      <Space size={8}>
+        {auditResultIconData.length
+          ? auditResultIconData.map((icon) => (
+              <React.Fragment key={icon}>
+                {IconLevelDictionary[
+                  icon as keyof typeof IconLevelDictionary
+                ] ?? null}
+              </React.Fragment>
+            ))
+          : IconLevelDictionary.normal}
+      </Space>
+    );
+  }
 
   return (
     <Space size={8}>
-      {iconData.map((icon) => {
-        return (
-          <React.Fragment key={icon}>
-            {renderIcon[icon as keyof typeof renderIcon] ?? null}
-          </React.Fragment>
-        );
-      })}
+      {legacyIconData.map((icon) => (
+        <React.Fragment key={icon}>
+          {IconLevelDictionary[icon as keyof typeof IconLevelDictionary] ??
+            null}
+        </React.Fragment>
+      ))}
     </Space>
   );
 };

packages/sqle/src/components/AuditResultMessage/index.type.ts

@@ -8,3 +8,13 @@ export type AuditResultMessageProps = {
   isRuleDeleted?: boolean;
   auditStatus?: string;
 };
+
+export type AuditResultInfoItem = {
+  level: string;
+  executionFailed: boolean;
+};
+
+export type ResultIconRenderProps = {
+  iconLevels?: string[];
+  auditResultInfo?: AuditResultInfoItem[];
+};

packages/sqle/src/components/AuditResultMessage/style.ts

@@ -1,7 +1,12 @@
 import { styled } from '@mui/material/styles';
 
+import { BasicTag } from '@actiontech/shared';
 import { AuditResultMessageProps } from './index.type';
 
+export const ResultIconTagStyleWrapper = styled(BasicTag)`
+  width: fit-content;
+`;
+
 export const AuditResultMessageStyleWrapper = styled('div')`
   display: flex;
   align-items: center;

packages/sqle/src/locale/en-US/components.ts

@@ -2,6 +2,8 @@
 export default {
   auditResultMessage: {
     auditPassed: 'Audit passed',
-    ruleDeleted: 'The rule has been deleted'
+    ruleDeleted: 'The rule has been deleted',
+    auditing: 'Auditing',
+    hasException: 'Audit exception occurred'
   }
 };

packages/sqle/src/locale/en-US/managementConf.ts

@@ -155,6 +155,10 @@ export default {
         firstAppearanceTime: 'First appearance time',
         occurrenceCount: 'Occurrence count',
         status: 'Status',
+        auditStatus: 'Audit status',
+        auditResult: 'Audit result',
+        auditResultTooltip: 'Shows the latest audit result',
+        audited: 'Audited',
         explanation: {
           text: 'Explanation',
           operator: 'Add explanation'

packages/sqle/src/locale/zh-CN/components.ts

@@ -2,6 +2,8 @@
 export default {
   auditResultMessage: {
     auditPassed: '审核通过',
-    ruleDeleted: '该规则已删除'
+    ruleDeleted: '该规则已删除',
+    auditing: '审核中',
+    hasException: '审核存在异常'
   }
 };

packages/sqle/src/locale/zh-CN/managementConf.ts

@@ -151,6 +151,10 @@ export default {
         firstAppearanceTime: '最早一次出现时间',
         occurrenceCount: '出现次数',
         status: '状态',
+        auditStatus: '审核状态',
+        auditResult: '审核结果',
+        auditResultTooltip: '展示最新的审核结果',
+        audited: '已审核',
         explanation: {
           text: '说明',
           operator: '添加说明'

packages/sqle/src/page/SqlManagementConf/Detail/ScanTypeSqlCollection/AuditStatusTag.tsx

@@ -0,0 +1,31 @@
+import { useTranslation } from 'react-i18next';
+import { ResultIconTagStyleWrapper } from '../../../../components/AuditResultMessage/style';
+import { AUDITED, BEING_AUDITED } from './utils';
+
+type AuditStatusTagProps = {
+  status?: string;
+};
+
+const AuditStatusTag: React.FC<AuditStatusTagProps> = ({ status }) => {
+  const { t } = useTranslation();
+
+  if (status === BEING_AUDITED) {
+    return (
+      <ResultIconTagStyleWrapper size="small" color="geekblue">
+        {t('components.auditResultMessage.auditing')}
+      </ResultIconTagStyleWrapper>
+    );
+  }
+
+  if (status === AUDITED) {
+    return (
+      <ResultIconTagStyleWrapper size="small" color="green">
+        {t('managementConf.detail.scanTypeSqlCollection.column.audited')}
+      </ResultIconTagStyleWrapper>
+    );
+  }
+
+  return <>{status || '-'}</>;
+};
+
+export default AuditStatusTag;