Merge branch 'main' of https://github.com/actiontech/sqle-ui into fea…

…ture/issue-ee-943
actiontech · Sep 19, 2023 · 4754786 · 4754786
2 parents 46f4eb9 + 78d5e46
commit 4754786
Show file tree

Hide file tree

Showing 6 changed files with 85 additions and 14 deletions.
diff --git a/src/api/common.d.ts b/src/api/common.d.ts
@@ -40,7 +40,7 @@ import {
   WorkflowRecordResV2StatusEnum,
   WorkflowResV2ModeEnum,
   WorkflowStepResV2StateEnum,
-  WorkflowStepResV2TypeEnum
+  WorkflowStepResV2TypeEnum,
 } from './common.enum';
 
 export interface IBaseRes {

diff --git a/src/page/SqlAuditRecord/Create/BaseInfoForm.tsx b/src/page/SqlAuditRecord/Create/BaseInfoForm.tsx
@@ -45,6 +45,9 @@ const BaseInfoForm: React.ForwardRefRenderFunction<
   ) => {
     e.preventDefault();
     const { extraTag } = await extraTagForm.validateFields();
+    if (!extraTag) {
+      return;
+    }
     if (values.includes(extraTag)) {
       message.error(t('sqlAudit.create.createTagErrorTips'));
       return;
@@ -79,9 +82,10 @@ const BaseInfoForm: React.ForwardRefRenderFunction<
   };
 
   const reset = useCallback(() => {
+    form.resetFields();
     extraTagForm.resetFields();
     setValues([]);
-  }, [extraTagForm]);
+  }, [extraTagForm, form]);
 
   useImperativeHandle(ref, () => ({ reset }), [reset]);
 

diff --git a/src/page/SqlAuditRecord/Create/SQLInfoForm.tsx b/src/page/SqlAuditRecord/Create/SQLInfoForm.tsx
@@ -11,16 +11,24 @@ import {
   Tooltip,
   Upload,
 } from 'antd';
-import { PageFormLayout } from '../../../data/common';
+import { PageFormLayout, ResponseCode } from '../../../data/common';
 import {
   AuditTypeEnum,
   SQLInfoFormFields,
   SQLInfoFormProps,
+  SQLInfoFormRef,
   UploadTypeEnum,
 } from './index.type';
 import { useTranslation } from 'react-i18next';
 import MonacoEditor, { MonacoEditorProps } from 'react-monaco-editor';
-import { ComponentType, useEffect } from 'react';
+import {
+  ComponentType,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useState,
+} from 'react';
 import useStyles from '../../../theme';
 import useChangeTheme from '../../../hooks/useChangeTheme';
 import useMonacoEditor from '../../../hooks/useMonacoEditor';
@@ -34,15 +42,18 @@ import useInstance from '../../../hooks/useInstance';
 import useDatabaseType from '../../../hooks/useDatabaseType';
 import useInstanceSchema from '../../../hooks/useInstanceSchema';
 import { InfoCircleOutlined } from '@ant-design/icons';
+import instance from '../../../api/instance';
+import { IRuleTemplateV2 } from '../../../api/common';
+import { RuleUrlParamKey } from '../../Rule/useRuleFilterForm';
+import { Link } from 'react-router-dom';
 
 const MonacoEditorFunComponent =
   MonacoEditor as ComponentType<MonacoEditorProps>;
 
-const SQLInfoForm: React.FC<SQLInfoFormProps> = ({
-  form,
-  submit,
-  projectName,
-}) => {
+const SQLInfoForm: React.ForwardRefRenderFunction<
+  SQLInfoFormRef,
+  SQLInfoFormProps
+> = ({ form, submit, projectName }, ref) => {
   const { t } = useTranslation();
   const theme = useStyles();
   const { currentEditorTheme } = useChangeTheme();
@@ -201,10 +212,57 @@ const SQLInfoForm: React.FC<SQLInfoFormProps> = ({
     });
   };
 
-  const handleInstanceNameChange = () => {
+  const handleInstanceNameChange = (name: string) => {
     form.setFieldsValue({ instanceSchema: undefined });
+    updateRuleTemplateName(name);
+  };
+
+  const [ruleTemplate, setRuleTemplate] = useState<IRuleTemplateV2>();
+
+  const updateRuleTemplateName = (name: string) => {
+    if (!name) {
+      setRuleTemplate(undefined);
+    }
+    instance
+      .getInstanceV2({ instance_name: name, project_name: projectName })
+      .then((res) => {
+        if (res.data.code === ResponseCode.SUCCESS) {
+          setRuleTemplate(res.data.data?.rule_template);
+        }
+      });
   };
 
+  const ruleTemplateDisplay = useCallback(() => {
+    if (!ruleTemplate) {
+      return undefined;
+    }
+
+    if (ruleTemplate.is_global_rule_template) {
+      return (
+        <Link
+          to={`/rule?${RuleUrlParamKey.ruleTemplateName}=${ruleTemplate.name}`}
+        >
+          {t('rule.form.ruleTemplate')}: {ruleTemplate.name}
+        </Link>
+      );
+    }
+
+    return (
+      <Link
+        to={`/rule?${RuleUrlParamKey.ruleTemplateName}=${ruleTemplate.name}&${RuleUrlParamKey.projectName}=${projectName}`}
+      >
+        {t('rule.form.ruleTemplate')}: {ruleTemplate.name}
+      </Link>
+    );
+  }, [projectName, ruleTemplate, t]);
+
+  const reset = useCallback(() => {
+    setRuleTemplate(undefined);
+    form.resetFields();
+  }, [form]);
+
+  useImperativeHandle(ref, () => ({ reset }), [reset]);
+
   useEffect(() => {
     if (auditType === AuditTypeEnum.dynamic) {
       updateInstanceList({ project_name: projectName });
@@ -309,6 +367,10 @@ const SQLInfoForm: React.FC<SQLInfoFormProps> = ({
               </Select>
             </Form.Item>
           </Col>
+
+          <Col span={4} style={{ marginTop: 4, marginLeft: 12 }}>
+            {ruleTemplateDisplay()}
+          </Col>
         </Row>
       </Form.Item>
 
@@ -374,4 +436,4 @@ const SQLInfoForm: React.FC<SQLInfoFormProps> = ({
   );
 };
 
-export default SQLInfoForm;
+export default forwardRef(SQLInfoForm);
diff --git a/src/page/SqlAuditRecord/Create/index.tsx b/src/page/SqlAuditRecord/Create/index.tsx
@@ -9,6 +9,7 @@ import {
   BaseInfoFormRef,
   SQLInfoFormFields,
   SQLInfoFormProps,
+  SQLInfoFormRef,
 } from './index.type';
 import SQLInfoForm from './SQLInfoForm';
 import { useCurrentProjectName } from '../../ProjectManage/ProjectDetail';
@@ -30,6 +31,7 @@ const SQLAuditCreate: React.FC = () => {
   const { projectName } = useCurrentProjectName();
   const [task, setTask] = useState<IAuditTaskResV1>();
   const baseRef = useRef<BaseInfoFormRef>(null);
+  const sqlInfoRef = useRef<SQLInfoFormRef>(null);
 
   const auditSQL: SQLInfoFormProps['submit'] = async (values) => {
     const baseValues = await baseForm.validateFields();
@@ -71,8 +73,7 @@ const SQLAuditCreate: React.FC = () => {
 
   const resetForm = () => {
     baseRef.current?.reset();
-    baseForm.resetFields();
-    sqlInfoForm.resetFields();
+    sqlInfoRef.current?.reset();
   };
 
   return (
@@ -96,6 +97,7 @@ const SQLAuditCreate: React.FC = () => {
           </Card>
           <Card title={t('sqlAudit.create.SQLInfo.title')}>
             <SQLInfoForm
+              ref={sqlInfoRef}
               form={sqlInfoForm}
               submit={auditSQL}
               projectName={projectName}

diff --git a/src/page/SqlAuditRecord/Create/index.type.ts b/src/page/SqlAuditRecord/Create/index.type.ts
@@ -13,6 +13,10 @@ export type BaseInfoFormRef = {
   reset: () => void;
 };
 
+export type SQLInfoFormRef = {
+  reset: () => void;
+};
+
 export type SQLInfoFormFields = {
   auditType: AuditTypeEnum;
   uploadType: UploadTypeEnum;

diff --git a/src/page/SqlAuditRecord/List/CustomTags.tsx b/src/page/SqlAuditRecord/List/CustomTags.tsx
@@ -130,7 +130,6 @@ const CustomTags: React.FC<CustomTagsProps> = ({
     );
   }, [
     auditRecordTags,
-    extraTag,
     extraTagForm,
     loading,
     styles.optionsHover,