Merge pull request #155 from actiontech/feature/DMS-783

[feature](RuleTemplate): Fuzzy queries when adding templates

packages/sqle/src/components/RuleDetail/components/CustomSearchInput.tsx

@@ -1,24 +1,42 @@
 import { ICustomInputProps } from '@actiontech/shared/lib/components/CustomInput';
 import { RuleDetailCustomSearchInputStyleWrapper } from '../style';
 import { IconSearch } from '@actiontech/shared/lib/Icon';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
+import EventEmitter from '../../../utils/EventEmitter';
+import EmitterKey from '../../../data/EmitterKey';
 
 const CustomSearchInput: React.FC<ICustomInputProps> = ({
   onCustomPressEnter,
   ...otherProps
 }) => {
   const [value, setValue] = useState<string>('');
+
+  useEffect(() => {
+    const { unsubscribe } = EventEmitter.subscribe(
+      EmitterKey.Search_Rule_Template_Rule_Clear_Value,
+      () => {
+        setValue('');
+        EventEmitter.emit(EmitterKey.Search_Rule_Template_Rule_Select_List, '');
+      }
+    );
+
+    return unsubscribe;
+  }, []);
+
   return (
     <RuleDetailCustomSearchInputStyleWrapper
+      size="small"
       className="custom-search-input"
-      onCustomPressEnter={onCustomPressEnter}
+      onPressEnter={(e) => {
+        onCustomPressEnter(e.target.value ?? '');
+      }}
       onChange={(e) => {
         setValue(e.target.value);
       }}
       suffix={
         <IconSearch
           className="pointer"
-          onClick={() => onCustomPressEnter?.(value)}
+          onClick={() => onCustomPressEnter?.(value as string)}
         />
       }
       value={value}

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

@@ -1,6 +1,6 @@
 import { styled } from '@mui/material/styles';
 import { Space } from 'antd';
-import CustomInput from '@actiontech/shared/lib/components/CustomInput';
+import { CustomInputStyleWrapper } from '@actiontech/shared/lib/components/CustomInput/style';
 
 export const HeaderSpaceTagStyleWrapper = styled(Space)`
   .tag-icon {
@@ -58,7 +58,9 @@ export const RuleTemplateDetailStyleWrapper = styled('section')`
   }
 `;
 
-export const RuleDetailCustomSearchInputStyleWrapper = styled(CustomInput)`
+export const RuleDetailCustomSearchInputStyleWrapper = styled(
+  CustomInputStyleWrapper
+)`
   &.ant-input-affix-wrapper.custom-search-input {
     width: 280px;
   }

packages/sqle/src/data/EmitterKey.ts

@@ -22,7 +22,10 @@ enum EmitterKey {
   Refresh_Report_Statistics = 'Refresh_Report_Statistics',
   Refresh_Project_Overview = 'Refresh_Project_Overview',
 
-  Refresh_SQL_Management = 'Refresh_SQL_Management'
+  Refresh_SQL_Management = 'Refresh_SQL_Management',
+
+  Search_Rule_Template_Rule_Select_List = 'Search_Rule_Template_Rule_Select_List',
+  Search_Rule_Template_Rule_Clear_Value = 'Search_Rule_Template_Rule_Clear_Value'
 }
 
 export default EmitterKey;

packages/sqle/src/page/GlobalRuleTemplate/UpdateRuleTemplate/index.tsx

@@ -1,12 +1,9 @@
 import { useBoolean } from 'ahooks';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
 import { BasicButton, BasicResult, PageHeader } from '@actiontech/shared';
-import {
-  IRuleTemplateDetailResV1,
-  IRuleReqV1
-} from '@actiontech/shared/lib/api/sqle/service/common';
+import { IRuleReqV1 } from '@actiontech/shared/lib/api/sqle/service/common';
 import rule_template from '@actiontech/shared/lib/api/sqle/service/rule_template';
 import useRuleTemplateForm from '../../RuleTemplate/hooks/useRuleTemplateForm';
 import { PageLayoutHasFixedHeaderStyleWrapper } from '@actiontech/shared/lib/styleWrapper/element';
@@ -38,8 +35,10 @@ const UpdateRuleTemplate = () => {
     nextStep,
     baseInfoFormSubmit,
     resetAll,
-    onGoToGlobalRuleTemplateList
-  } = useRuleTemplateForm();
+    onGoToGlobalRuleTemplateList,
+    ruleTemplate,
+    setRuleTemplate
+  } = useRuleTemplateForm(false, true);
   const [
     updateTemplateFormLoading,
     { setTrue: startLoad, setFalse: finishLoad }
@@ -48,9 +47,7 @@ const UpdateRuleTemplate = () => {
     updateTemplateLoading,
     { setTrue: startSubmit, setFalse: finishSubmit }
   ] = useBoolean();
-  const [ruleTemplate, setRuleTemplate] = useState<
-    IRuleTemplateDetailResV1 | undefined
-  >();
+
   const urlParams = useParams<{ templateName: string }>();
   const { projectName } = useCurrentProject();
 
@@ -99,7 +96,13 @@ const UpdateRuleTemplate = () => {
       .finally(() => {
         finishLoad();
       });
-  }, [finishLoad, setActiveRule, startLoad, urlParams.templateName]);
+  }, [
+    finishLoad,
+    setActiveRule,
+    startLoad,
+    urlParams.templateName,
+    setRuleTemplate
+  ]);
 
   return (
     <PageLayoutHasFixedHeaderStyleWrapper>

packages/sqle/src/page/RuleTemplate/CreateRuleTemplate/index.tsx

@@ -12,7 +12,7 @@ import RuleTemplateForm from '../RuleTemplateForm';
 
 import { cloneDeep } from 'lodash';
 import { useBoolean, useRequest } from 'ahooks';
-import { useState, useCallback, useMemo } from 'react';
+import { useState, useCallback, useMemo, useEffect } from 'react';
 import { useForm } from 'antd/es/form/Form';
 import { useCurrentProject } from '@actiontech/shared/lib/global';
 import rule_template from '@actiontech/shared/lib/api/sqle/service/rule_template';
@@ -23,6 +23,8 @@ import {
 import { RuleTemplateBaseInfoFields } from '../RuleTemplateForm/BaseInfoForm/index.type';
 import { ResponseCode } from '../../../data/common';
 import classNames from 'classnames';
+import EventEmitter from '../../../utils/EventEmitter';
+import EmitterKey from '../../../data/EmitterKey';
 
 const CreateRuleTemplate = () => {
   const { t } = useTranslation();
@@ -34,8 +36,16 @@ const CreateRuleTemplate = () => {
   const [activeRule, setActiveRule] = useState<IRuleResV1[]>([]);
   const [databaseRule, setDatabaseRule] = useState<IRuleResV1[]>([]);
   const [dbType, setDbType] = useState<string>('');
-  const { data: allRules, loading: getAllRulesLoading } = useRequest(() =>
-    rule_template.getRuleListV1({}).then((res) => res.data.data ?? [])
+  const {
+    data: allRules,
+    loading: getAllRulesLoading,
+    run: getAllRules
+  } = useRequest((keyword?: string) =>
+    rule_template
+      .getRuleListV1({
+        fuzzy_keyword_rule: keyword
+      })
+      .then((res) => res.data.data ?? [])
   );
 
   const [form] = useForm<RuleTemplateBaseInfoFields>();
@@ -53,8 +63,9 @@ const CreateRuleTemplate = () => {
   const resetAll = useCallback(() => {
     setStep(0);
     form.resetFields();
-    setActiveRule([...(allRules ?? [])]);
-  }, [allRules, form]);
+    setDbType('');
+    EventEmitter.emit(EmitterKey.Search_Rule_Template_Rule_Clear_Value);
+  }, [form]);
 
   const onReCreateRuleTem = () => {
     resetAll();
@@ -113,6 +124,26 @@ const CreateRuleTemplate = () => {
       });
   }, [activeRule, finishSubmit, form, projectName, startSubmit, step]);
 
+  useEffect(() => {
+    if (dbType) {
+      const tempAllRules = allRules?.filter((e) => e.db_type === dbType) ?? [];
+      setDatabaseRule(tempAllRules);
+      setActiveRule(
+        cloneDeep(tempAllRules.filter((item) => !item.is_custom_rule))
+      );
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [allRules]);
+
+  useEffect(() => {
+    const { unsubscribe } = EventEmitter.subscribe(
+      EmitterKey.Search_Rule_Template_Rule_Select_List,
+      getAllRules
+    );
+
+    return unsubscribe;
+  }, [getAllRules]);
+
   return (
     <PageLayoutHasFixedHeaderStyleWrapper>
       <PageHeader

packages/sqle/src/page/RuleTemplate/RuleTemplateForm/RuleSelect/index.tsx

@@ -19,6 +19,10 @@ import { IRuleResV1 } from '@actiontech/shared/lib/api/sqle/service/common';
 import { ALL_RULE_TYPE_CONSTANT } from '../../../../components/RuleList/RuleTypes';
 import EditRuleTemplate from '../../EditRuleTemplate';
 import { SegmentedRowStyleWrapper } from '@actiontech/shared/lib/styleWrapper/element';
+import CustomSearchInput from '../../../../components/RuleDetail/components/CustomSearchInput';
+import { FilterContainerStyleWrapper } from '@actiontech/shared/lib/components/ActiontechTable/components/style';
+import EventEmitter from '../../../../utils/EventEmitter';
+import EmitterKey from '../../../../data/EmitterKey';
 
 const RuleSelect = (props: RuleSelectProps) => {
   const { t } = useTranslation();
@@ -146,6 +150,18 @@ const RuleSelect = (props: RuleSelectProps) => {
         />
         {renderBatchAction()}
       </SegmentedRowStyleWrapper>
+      <FilterContainerStyleWrapper className="full-width-element">
+        <CustomSearchInput
+          onCustomPressEnter={(value) => {
+            EventEmitter.emit(
+              EmitterKey.Search_Rule_Template_Rule_Select_List,
+              value
+            );
+          }}
+          placeholder={t('rule.form.fuzzy_text_placeholder')}
+          allowClear
+        />
+      </FilterContainerStyleWrapper>
       <Spin spinning={props.listLoading || props.formSubmitLoading}>
         {props.dbType && (
           <RuleTypes
@@ -161,7 +177,7 @@ const RuleSelect = (props: RuleSelectProps) => {
           rules={rulesData}
           activeDataKeys={rulesData.map((item) => item?.rule_name ?? '')}
           onActionHandle={(record, type) => onAction(record, type)}
-          pageHeaderHeight={70}
+          pageHeaderHeight={118}
         />
       </Spin>
       <EditRuleTemplate

packages/sqle/src/page/RuleTemplate/UpdateRuleTemplate/index.tsx

@@ -25,6 +25,8 @@ import {
   IRuleReqV1,
   IRuleResV1
 } from '@actiontech/shared/lib/api/sqle/service/common';
+import EventEmitter from '../../../utils/EventEmitter';
+import EmitterKey from '../../../data/EmitterKey';
 
 const UpdateRuleTemplate = () => {
   const { t } = useTranslation();
@@ -33,8 +35,14 @@ const UpdateRuleTemplate = () => {
   const [step, setStep] = useState(0);
   const { projectName, projectID } = useCurrentProject();
   const urlParams = useParams<{ templateName: string }>();
-  const { data: allRules, loading: getAllRulesLoading } = useRequest(() =>
-    rule_template.getRuleListV1({}).then((res) => res.data.data ?? [])
+  const {
+    data: allRules,
+    loading: getAllRulesLoading,
+    run
+  } = useRequest((keyword?: string) =>
+    rule_template
+      .getRuleListV1({ fuzzy_keyword_rule: keyword })
+      .then((res) => res.data.data ?? [])
   );
 
   const [form] = useForm<RuleTemplateBaseInfoFields>();
@@ -79,20 +87,28 @@ const UpdateRuleTemplate = () => {
     setStep(step - 1);
   }, [step]);
 
+  const getRuleTemplate = useCallback(
+    (fuzzyKeyword?: string) => {
+      rule_template
+        .getProjectRuleTemplateV1({
+          rule_template_name: urlParams.templateName ?? '',
+          project_name: projectName,
+          fuzzy_keyword_rule: fuzzyKeyword
+        })
+        .then((res) => {
+          if (res.data.code === ResponseCode.SUCCESS) {
+            const template = res.data.data ?? {};
+            setRuleTemplate(template);
+            setActiveRule(template?.rule_list ?? []);
+          }
+        });
+    },
+    [projectName, urlParams.templateName]
+  );
+
   useEffect(() => {
-    rule_template
-      .getProjectRuleTemplateV1({
-        rule_template_name: urlParams.templateName ?? '',
-        project_name: projectName
-      })
-      .then((res) => {
-        if (res.data.code === ResponseCode.SUCCESS) {
-          const template = res.data.data ?? {};
-          setRuleTemplate(template);
-          setActiveRule(template?.rule_list ?? []);
-        }
-      });
-  }, [projectName, urlParams.templateName]);
+    getRuleTemplate();
+  }, [getRuleTemplate]);
 
   const resetAll = () => {
     if (!ruleTemplate) return;
@@ -103,6 +119,8 @@ const UpdateRuleTemplate = () => {
     });
     setStep(0);
     setActiveRule([...(ruleTemplate?.rule_list ?? [])]);
+    setDbType('');
+    EventEmitter.emit(EmitterKey.Search_Rule_Template_Rule_Clear_Value);
   };
 
   const submit = useCallback(() => {
@@ -135,6 +153,26 @@ const UpdateRuleTemplate = () => {
       });
   }, [activeRule, finishSubmit, form, projectName, startSubmit, step]);
 
+  useEffect(() => {
+    if (dbType) {
+      const tempAllRules = allRules?.filter((e) => e.db_type === dbType) ?? [];
+      setDatabaseRule(tempAllRules);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [allRules]);
+
+  useEffect(() => {
+    const { unsubscribe } = EventEmitter.subscribe(
+      EmitterKey.Search_Rule_Template_Rule_Select_List,
+      (value) => {
+        run(value);
+        getRuleTemplate(value);
+      }
+    );
+
+    return unsubscribe;
+  }, [run, getRuleTemplate]);
+
   return (
     <>
       <PageLayoutHasFixedHeaderStyleWrapper>