From 1141207bd0c5c8ce850b6a019401409fb2e49220 Mon Sep 17 00:00:00 2001
From: Jesse Rodriguez <54310591+1pone@users.noreply.github.com>
Date: Thu, 16 Nov 2023 17:00:11 +0800
Subject: [PATCH] Feat replay noise reduction (#532)

* fix: init request url parse

* fix: init request url parse

* feat: exclusions noise reduce

* feat: diff denoise check all

* feat: excludeNoise

* fix: controlled checkBox

* fix: noiseItemList

* feat: sort by entryPoint

* fix: appId ReplayDiffScenes localStorage

* feat: move denoise button to AppTitleBar

* feat: hidden create app button for GUEST

* fix: scale arex logo

---------

Co-authored-by: onePone <pwang31@trip.com>
---
 package.json                                  |   2 +-
 packages/arex-core/src/layout/ArexHeader.tsx  |   2 +-
 packages/arex/package.json                    |   2 +-
 .../arex/src/i18n/locales/cn/components.json  |  12 +-
 .../arex/src/i18n/locales/en/components.json  |   4 +-
 packages/arex/src/menus/Replay.tsx            |  17 +-
 packages/arex/src/panes/Replay/AppTitle.tsx   |   9 +-
 .../arex/src/panes/Replay/CompareNoise.tsx    | 235 ++++++++++++------
 .../Replay/CompareNoiseOperationItem.tsx      | 107 +++++---
 packages/arex/src/panes/Replay/PlanItem.tsx   |   6 -
 .../ReplayDiffScenes/ReplayDiffScenes.tsx     |   4 +-
 .../services/ScheduleService/excludeNoise.ts  |  17 ++
 .../src/services/ScheduleService/index.ts     |   1 +
 .../services/ScheduleService/queryNoise.ts    |  21 +-
 packages/arex/vite.config.ts                  |   6 +-
 15 files changed, 298 insertions(+), 147 deletions(-)
 create mode 100644 packages/arex/src/services/ScheduleService/excludeNoise.ts

diff --git a/package.json b/package.json
index f4dfa01ce..474aab8c5 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "arex",
   "private": true,
-  "version": "0.6.7",
+  "version": "0.6.8",
   "description": "",
   "homepage": "https://github.com/arextest/arex",
   "main": "index.js",
diff --git a/packages/arex-core/src/layout/ArexHeader.tsx b/packages/arex-core/src/layout/ArexHeader.tsx
index 48d353f3d..98e6f4461 100644
--- a/packages/arex-core/src/layout/ArexHeader.tsx
+++ b/packages/arex-core/src/layout/ArexHeader.tsx
@@ -61,7 +61,7 @@ const ArexHeader: FC<AppHeaderProps> = (props) => {
 
           <Typography.Text
             strong
-            style={{ lineHeight: '14px', fontSize: '8px', paddingLeft: '2px' }}
+            style={{ lineHeight: '14px', paddingLeft: '2px', transform: 'scale(0.7)' }}
           >
             AREX
           </Typography.Text>
diff --git a/packages/arex/package.json b/packages/arex/package.json
index 32820a6b2..441a6e302 100644
--- a/packages/arex/package.json
+++ b/packages/arex/package.json
@@ -1,7 +1,7 @@
 {
   "name": "arex",
   "private": true,
-  "version": "0.6.7",
+  "version": "0.6.8",
   "author": "arextest",
   "main": "dist-electron/main.js",
   "files": [
diff --git a/packages/arex/src/i18n/locales/cn/components.json b/packages/arex/src/i18n/locales/cn/components.json
index 9d5b4710b..05014a070 100644
--- a/packages/arex/src/i18n/locales/cn/components.json
+++ b/packages/arex/src/i18n/locales/cn/components.json
@@ -109,7 +109,8 @@
     "timeConsumed": "耗时(秒)",
     "cases": "case 数",
     "action": "操作",
-    "denoise": "差异降噪",
+    "denoise": "对比配置推荐",
+    "noDenoiseRecommended": "暂无对比配置推荐",
     "logs": "执行日志",
     "retry": "重新计算",
     "rerun": "重新执行",
@@ -202,13 +203,14 @@
     "compareConfig": "对比配置",
     "configType": "类型",
     "configTarget": "目标",
-    "nodesIgnore": "忽略节点配置",
-    "nodesSort": "数组节点配置",
-    "nodesDesensitization": "加密节点配置",
-    "categoryIgnore": "类型忽略配置",
+    "nodesIgnore": "忽略节点",
+    "nodesSort": "数组节点",
+    "nodesDesensitization": "加密节点",
+    "categoryIgnore": "类型忽略",
     "global": "全局",
     "interface": "接口",
     "dependency": "依赖",
+    "entryPoint": "主入口",
     "agentVersion": "Agent 版本",
     "agentHost": "Agent 地址",
     "basic": "基础",
diff --git a/packages/arex/src/i18n/locales/en/components.json b/packages/arex/src/i18n/locales/en/components.json
index c7ce1b57b..00707c6a0 100644
--- a/packages/arex/src/i18n/locales/en/components.json
+++ b/packages/arex/src/i18n/locales/en/components.json
@@ -109,7 +109,8 @@
     "timeConsumed": "Time consumed(s)",
     "cases": "Cases",
     "action": "Action",
-    "denoise": "Diff Denoise",
+    "denoise": "Comparative Config Recommendation",
+    "noDenoiseRecommended": "No comparison configuration is recommended",
     "logs": "Execution Logs",
     "retry": "Retry",
     "rerun": "Rerun",
@@ -209,6 +210,7 @@
     "global": "Global",
     "interface": "Interfaces",
     "dependency": "Dependency",
+    "entryPoint": "EntryPoint",
     "agentVersion": "Agent Version",
     "agentHost": "Agent Host",
     "basic": "Basic",
diff --git a/packages/arex/src/menus/Replay.tsx b/packages/arex/src/menus/Replay.tsx
index 969b061b1..d34469fa2 100644
--- a/packages/arex/src/menus/Replay.tsx
+++ b/packages/arex/src/menus/Replay.tsx
@@ -138,13 +138,16 @@ const ReplayMenu: ArexMenuFC = (props) => {
         selectedKeys={selectedKeys}
         prefix={
           <>
-            <TooltipButton
-              type='text'
-              size='small'
-              title={t('applicationsMenu.createApp')}
-              icon={<PlusOutlined />}
-              onClick={() => setOpen(true)}
-            />
+            {!email.startsWith('GUEST') && (
+              <TooltipButton
+                type='text'
+                size='small'
+                title={t('applicationsMenu.createApp')}
+                icon={<PlusOutlined />}
+                onClick={() => setOpen(true)}
+              />
+            )}
+
             <TooltipButton
               title={t('applicationsMenu.filterFavoriteApps')}
               icon={
diff --git a/packages/arex/src/panes/Replay/AppTitle.tsx b/packages/arex/src/panes/Replay/AppTitle.tsx
index cb9b98655..ff60ccbe7 100644
--- a/packages/arex/src/panes/Replay/AppTitle.tsx
+++ b/packages/arex/src/panes/Replay/AppTitle.tsx
@@ -1,4 +1,4 @@
-import Icon, {
+import {
   CloseCircleOutlined,
   CodeOutlined,
   PlayCircleOutlined,
@@ -13,7 +13,6 @@ import {
   I18nextLng,
   Label,
   PanesTitle,
-  SmallTextButton,
   SpaceBetweenWrapper,
   styled,
   TooltipButton,
@@ -30,7 +29,6 @@ import {
   Form,
   Input,
   Modal,
-  Popconfirm,
   Popover,
   Select,
   Skeleton,
@@ -51,6 +49,7 @@ import React, {
 
 import { EMAIL_KEY, PanesType, TARGET_HOST_AUTOCOMPLETE_KEY } from '@/constant';
 import { useNavPane } from '@/hooks';
+import CompareNoise from '@/panes/Replay/CompareNoise';
 import RecordedCaseList, { RecordedCaseListRef } from '@/panes/Replay/RecordedCaseList';
 import { ApplicationService, ScheduleService } from '@/services';
 import { MessageMap } from '@/services/ScheduleService';
@@ -77,6 +76,7 @@ const TitleWrapper = styled(
     className?: string;
     title: ReactNode;
     count?: number;
+    readOnly?: boolean;
     onClickTitle?: () => void;
     onRefresh?: () => void;
     onSetting?: () => void;
@@ -129,6 +129,8 @@ const TitleWrapper = styled(
               <Button size='small' type='text' icon={<CodeOutlined />} />
             </Popover>
 
+            <CompareNoise appId={props.appId} readOnly={props.readOnly} />
+
             {props.onSetting && (
               <TooltipButton
                 id='arex-replay-app-setting-btn'
@@ -364,6 +366,7 @@ const AppTitle: FC<AppTitleProps> = ({
               appId={appId}
               planId={data?.planId}
               title={appTitle}
+              readOnly={readOnly}
               count={recordCount}
               onClickTitle={handleClickTitle}
               onRefresh={handleRefresh}
diff --git a/packages/arex/src/panes/Replay/CompareNoise.tsx b/packages/arex/src/panes/Replay/CompareNoise.tsx
index e5fe16adb..444662796 100644
--- a/packages/arex/src/panes/Replay/CompareNoise.tsx
+++ b/packages/arex/src/panes/Replay/CompareNoise.tsx
@@ -1,41 +1,75 @@
-import { ClearOutlined, SaveOutlined } from '@ant-design/icons';
-import { Label, PaneDrawer, SpaceBetweenWrapper, useTranslation } from '@arextest/arex-core';
-import { useRequest } from 'ahooks';
-import { App, Button, Checkbox, Space, Spin } from 'antd';
+import { ReconciliationOutlined, SaveOutlined } from '@ant-design/icons';
+import {
+  EmptyWrapper,
+  Label,
+  PaneDrawer,
+  Segmented,
+  SpaceBetweenWrapper,
+  TooltipButton,
+  useArexPaneProps,
+  useTranslation,
+} from '@arextest/arex-core';
+import { usePagination, useRequest } from 'ahooks';
+import { App, Button, Checkbox, Space } from 'antd';
 import React, { FC, useMemo, useState } from 'react';
 import { useImmer } from 'use-immer';
 
 import { Connector } from '@/constant';
 import CompareNoiseOperationItem from '@/panes/Replay/CompareNoiseOperationItem';
-import { ComparisonService, ScheduleService } from '@/services';
-import { IgnoreNodeBase } from '@/services/ComparisonService';
-import { InterfaceNoiseItem } from '@/services/ScheduleService';
+import { ReportService, ScheduleService } from '@/services';
+import { InterfaceNoiseItem, RandomNoise } from '@/services/ScheduleService';
 
 export interface CompareNoiseProps {
   appId: string;
-  planId?: string;
   readOnly?: boolean;
 }
 
 const CompareNoise: FC<CompareNoiseProps> = (props) => {
   const { t } = useTranslation('components');
   const { message } = App.useApp();
-
+  const { data } = useArexPaneProps<{ planId: string }>();
   const [open, setOpen] = useState(false);
-  const [selectNoise, setSelectNoise] = useImmer<{ [operationId: string]: IgnoreNodeBase[] }>({});
+  const [selectNoise, setSelectNoise] = useImmer<{ [operationId: string]: RandomNoise[] }>({});
+
+  const { data: { list: planStatistics } = { list: [] }, refresh: queryPlanStatistics } =
+    usePagination(
+      (params) =>
+        ReportService.queryPlanStatistics({
+          appId: props.appId,
+          planId: data?.planId || undefined,
+          ...params,
+        }),
+      {
+        ready: !!props.appId,
+        defaultPageSize: 1,
+        defaultCurrent: 1,
+        refreshDeps: [props.appId, data?.planId],
+        onSuccess: () => {
+          queryNoise();
+        },
+      },
+    );
 
   const {
     data: noiseData = [],
     loading,
     refresh: queryNoise,
-  } = useRequest(() => ScheduleService.queryNoise(props.planId!), {
-    manual: true,
-    ready: !!props.planId,
+  } = useRequest(() => ScheduleService.queryNoise(planStatistics[0].planId), {
+    ready: !!planStatistics.length,
+    onBefore() {
+      setSelectNoise({});
+    },
+    onSuccess: () => {
+      handleToggleCheckAll();
+    },
   });
 
   const allChecked = useMemo(() => {
     const checkedCount = Object.values(selectNoise).reduce((count, noise) => {
-      count += noise.length;
+      count += noise.reduce((count, n) => {
+        count += n.noiseItemList.length;
+        return count;
+      }, 0);
       return count;
     }, 0);
     const allCount = noiseData.reduce((count, operationNoise) => {
@@ -45,74 +79,95 @@ const CompareNoise: FC<CompareNoiseProps> = (props) => {
       }, 0);
       return count + operationCount;
     }, 0);
-
     return !!allCount && checkedCount === allCount;
   }, [selectNoise, noiseData]);
 
   const indeterminate = useMemo(
-    () => !allChecked && Object.values(selectNoise).some((item) => item.length),
+    () =>
+      !allChecked &&
+      Object.values(selectNoise).some((item) => item.some((n) => n.noiseItemList.length)),
     [selectNoise, allChecked],
   );
 
-  /**
-   * 批量新增 IgnoreNode
-   */
-  const { run: batchInsertIgnoreNode } = useRequest(ComparisonService.batchInsertIgnoreNode, {
-    manual: true,
-    onSuccess(success) {
-      if (success) {
-        message.success(t('message.updateSuccess', { ns: 'common' }));
-      } else {
-        message.error(t('message.updateFailed', { ns: 'common' }));
-      }
+  const { run: excludeNoise } = useRequest(
+    (interfaceNoiseItemList: InterfaceNoiseItem[]) =>
+      ScheduleService.excludeNoise({
+        appId: props.appId,
+        planId: planStatistics[0].planId!,
+        interfaceNoiseItemList,
+      }),
+    {
+      manual: true,
+      ready: !!planStatistics.length,
+      onSuccess(success) {
+        if (success) {
+          setOpen(false);
+          message.success(t('message.updateSuccess', { ns: 'common' }));
+        } else {
+          message.error(t('message.updateFailed', { ns: 'common' }));
+        }
+      },
     },
-  });
+  );
 
   const handleChecked = (value: string[], noise: InterfaceNoiseItem) => {
-    const checkedOperationNoise = value.map((item) => {
+    // 先根据 value 中的 index 进行聚合
+    const valueMap = value.reduce<{ [index: number]: string[] }>((map, item) => {
       const [path, indexStr] = item.split(Connector);
       const index = parseInt(indexStr);
-      const entryPoint = noise.randomNoise[index].mockCategoryType.entryPoint;
+      map[index] = map[index] || [];
+      map[index].push(path);
+      return map;
+    }, {});
+
+    // 再根据 valueMap 生成 checkedOperationNoise
+    const checkedOperationNoise = noise.randomNoise.map((randomNoise, index) => {
+      const noiseItemList = randomNoise.noiseItemList.filter((item) => {
+        const entityPath = item.nodeEntity.map((entityItem) => entityItem.nodeName).join('/');
+        return valueMap[index]?.includes(entityPath);
+      });
       return {
-        appId: props.appId,
-        exclusions: path.split('/'),
-        operationId: noise.operationId,
-        pathIndex: item,
-        ...(entryPoint
-          ? {}
-          : {
-              operationName: noise.randomNoise[index].operationName,
-              operationType: noise.randomNoise[index].operationType,
-            }),
+        ...randomNoise,
+        noiseItemList,
       };
     });
-
     setSelectNoise((state) => {
       state[noise.operationId] = checkedOperationNoise;
     });
   };
 
   const handleToggleCheckAll = () => {
-    Array.from(document.getElementsByClassName(`denoise-checkbox-${props.appId}`)).forEach(
-      (checkbox) => {
-        indeterminate
-          ? // @ts-ignore
-            !checkbox.getElementsByClassName('ant-checkbox-input')?.[0]?.checked &&
-            // @ts-ignore
-            checkbox.click?.()
-          : // @ts-ignore
-            checkbox.click?.();
-      },
-    );
+    !allChecked
+      ? setSelectNoise(
+          noiseData.reduce<{ [operationId: string]: RandomNoise[] }>((map, data) => {
+            map[data.operationId] = data.randomNoise;
+            return map;
+          }, {}),
+        )
+      : setSelectNoise({});
   };
 
   const handleSave = () => {
-    const params = Object.values(selectNoise).reduce((list, item) => {
-      list.push(...item);
-      return list;
-    }, []);
+    const interfaceNoiseItemList = Object.entries(selectNoise).reduce<InterfaceNoiseItem[]>(
+      (list, [operationId, randomNoise]) => {
+        list.push({
+          operationId,
+          randomNoise,
+          disorderedArrayNoise: [], // TODO
+        });
+        return list;
+      },
+      [],
+    );
 
-    params.length && batchInsertIgnoreNode(params);
+    // 过滤 interfaceNoiseItemList 中 noiseItemList 为空的项
+    const interfaceNoiseItemListFilter = interfaceNoiseItemList
+      .map((item) => ({
+        ...item,
+        randomNoise: item.randomNoise.filter((noise) => noise.noiseItemList.length),
+      }))
+      .filter((item) => item.randomNoise.length);
+    interfaceNoiseItemListFilter.length && excludeNoise(interfaceNoiseItemListFilter);
   };
 
   const handleClose = () => {
@@ -122,18 +177,16 @@ const CompareNoise: FC<CompareNoiseProps> = (props) => {
 
   return (
     <>
-      <Button
-        type='link'
+      <TooltipButton
         size='small'
-        icon={<ClearOutlined />}
+        icon={<ReconciliationOutlined />}
+        title={t('replay.denoise')}
         disabled={props.readOnly}
         onClick={() => {
           setOpen(true);
-          queryNoise();
+          queryPlanStatistics();
         }}
-      >
-        {t('replay.denoise')}
-      </Button>
+      />
 
       <PaneDrawer
         destroyOnClose
@@ -141,7 +194,18 @@ const CompareNoise: FC<CompareNoiseProps> = (props) => {
         open={open}
         title={
           <SpaceBetweenWrapper>
-            {t('replay.denoise')}
+            <Space size='middle'>
+              {t('replay.denoise')}
+
+              <Segmented
+                size='small'
+                options={[
+                  { label: t('appSetting.nodesIgnore'), value: 'nodesIgnore' },
+                  { label: t('appSetting.nodesSort'), value: 'nodesSort', disabled: true },
+                ]}
+                defaultValue='nodesIgnore'
+              />
+            </Space>
             <span style={{ marginRight: '16px' }}>
               <Label type='secondary'>{t('checkAll', { ns: 'common' })}</Label>
               <Checkbox
@@ -154,26 +218,37 @@ const CompareNoise: FC<CompareNoiseProps> = (props) => {
         }
         extra={
           <Button size='small' type='primary' icon={<SaveOutlined />} onClick={handleSave}>
-            {t('save')}
+            {t('save', { ns: 'common' })}
           </Button>
         }
+        styles={{
+          body: {
+            padding: '8px 16px',
+          },
+        }}
         onClose={handleClose}
       >
-        {loading && <Spin />}
-        <Space
-          size='middle'
-          direction='vertical'
-          style={{ width: '100%', maxHeight: '75vh', overflow: 'auto' }}
+        <EmptyWrapper
+          loading={loading}
+          empty={!noiseData.length}
+          description={t('replay.noDenoiseRecommended')}
         >
-          {noiseData.map((noise) => (
-            <CompareNoiseOperationItem
-              key={noise.operationId}
-              appId={props.appId}
-              noise={noise}
-              onChange={(value) => handleChecked(value, noise)}
-            />
-          ))}
-        </Space>
+          <Space
+            size='middle'
+            direction='vertical'
+            style={{ width: '100%', maxHeight: '75vh', overflow: 'auto' }}
+          >
+            {noiseData.map((noise) => (
+              <CompareNoiseOperationItem
+                key={noise.operationId}
+                value={selectNoise[noise.operationId]}
+                appId={props.appId}
+                noise={noise}
+                onChange={(value) => handleChecked(value, noise)}
+              />
+            ))}
+          </Space>
+        </EmptyWrapper>
       </PaneDrawer>
     </>
   );
diff --git a/packages/arex/src/panes/Replay/CompareNoiseOperationItem.tsx b/packages/arex/src/panes/Replay/CompareNoiseOperationItem.tsx
index 7ac316ddc..73bf636ac 100644
--- a/packages/arex/src/panes/Replay/CompareNoiseOperationItem.tsx
+++ b/packages/arex/src/panes/Replay/CompareNoiseOperationItem.tsx
@@ -1,20 +1,38 @@
-import { SpaceBetweenWrapper } from '@arextest/arex-core';
-import { Card, Checkbox, List, Typography } from 'antd';
-import React, { FC } from 'react';
+import { CodeSandboxOutlined, StarOutlined } from '@ant-design/icons';
+import { SpaceBetweenWrapper, useTranslation } from '@arextest/arex-core';
+import { Card, Checkbox, List, Tooltip } from 'antd';
+import React, { FC, useMemo } from 'react';
 
 import { Connector } from '@/constant';
-import { InterfaceNoiseItem } from '@/services/ScheduleService';
+import { InterfaceNoiseItem, RandomNoise } from '@/services/ScheduleService';
 
 export interface CompareNoiseOperationItemProps {
   appId: string;
+  value?: RandomNoise[];
   noise: InterfaceNoiseItem;
   onChange?: (value: string[]) => void;
 }
 
 const CompareNoiseOperationItem: FC<CompareNoiseOperationItemProps> = (props) => {
+  const { t } = useTranslation('components');
+  const value = useMemo(
+    () =>
+      props.value?.reduce<string[]>((value, cur, index) => {
+        value.push(
+          ...cur.noiseItemList.map((item) => {
+            const entityPath = item.nodeEntity.map((entityItem) => entityItem.nodeName).join('/');
+            return entityPath + Connector + index;
+          }),
+        );
+        return value;
+      }, []),
+    [props.value],
+  );
+
   return (
     <Card key={props.noise.operationId} bodyStyle={{ padding: '8px' }}>
       <Checkbox.Group
+        value={value}
         onChange={(value) => props.onChange?.(value as string[])}
         style={{ width: '100%' }}
       >
@@ -22,38 +40,55 @@ const CompareNoiseOperationItem: FC<CompareNoiseOperationItemProps> = (props) =>
           size='small'
           style={{ width: '100%' }}
           dataSource={props.noise.randomNoise}
-          renderItem={(operation, randomNoiseIndex) => (
-            <List.Item style={{ display: 'block' }}>
-              <SpaceBetweenWrapper>
-                <span>
-                  {operation.mockCategoryType.entryPoint && (
-                    <Typography.Text type='secondary'>[EntryPoint]</Typography.Text>
-                  )}{' '}
-                  {operation.operationName}
-                </span>
-              </SpaceBetweenWrapper>
-              <List
-                size='small'
-                dataSource={operation.noiseItemList}
-                renderItem={(item) => {
-                  const entityPath = item.nodeEntity
-                    .map((entityItem) => entityItem.nodeName)
-                    .join('/');
-                  return (
-                    <List.Item style={{ paddingRight: 0 }}>
-                      <SpaceBetweenWrapper style={{ width: '100%' }}>
-                        <span>{entityPath}</span>
-                        <Checkbox
-                          className={`denoise-checkbox-${props.appId}`}
-                          value={entityPath + Connector + randomNoiseIndex}
-                        />
-                      </SpaceBetweenWrapper>
-                    </List.Item>
-                  );
-                }}
-              />
-            </List.Item>
-          )}
+          renderItem={(operation, randomNoiseIndex) => {
+            return (
+              <List.Item style={{ display: 'block' }}>
+                <SpaceBetweenWrapper>
+                  <span>
+                    <Tooltip
+                      title={t(
+                        operation.mockCategoryType.entryPoint
+                          ? 'appSetting.entryPoint'
+                          : 'appSetting.dependency',
+                      )}
+                    >
+                      <span style={{ marginRight: '4px' }}>
+                        {operation.mockCategoryType.entryPoint ? (
+                          <StarOutlined />
+                        ) : (
+                          <CodeSandboxOutlined />
+                        )}
+                      </span>
+                    </Tooltip>
+                    {operation.operationName}
+                  </span>
+                </SpaceBetweenWrapper>
+                <List
+                  size='small'
+                  dataSource={operation.noiseItemList}
+                  renderItem={(item) => {
+                    const entityPath = item.nodeEntity
+                      .map((entityItem) => entityItem.nodeName)
+                      .join('/');
+                    return (
+                      <List.Item style={{ paddingRight: 0 }}>
+                        <SpaceBetweenWrapper style={{ width: '100%' }}>
+                          <span>{entityPath}</span>
+                          <Checkbox
+                            className={`denoise-checkbox-${props.appId}`}
+                            value={entityPath + Connector + randomNoiseIndex}
+                          />
+                        </SpaceBetweenWrapper>
+                      </List.Item>
+                    );
+                  }}
+                  style={{
+                    marginLeft: '16px',
+                  }}
+                />
+              </List.Item>
+            );
+          }}
         />
       </Checkbox.Group>
     </Card>
diff --git a/packages/arex/src/panes/Replay/PlanItem.tsx b/packages/arex/src/panes/Replay/PlanItem.tsx
index 5d82a453d..b4bcb8654 100644
--- a/packages/arex/src/panes/Replay/PlanItem.tsx
+++ b/packages/arex/src/panes/Replay/PlanItem.tsx
@@ -525,12 +525,6 @@ const PlanItem: FC<ReplayPlanItemProps> = (props) => {
       }
       extra={
         <Space>
-          <CompareNoise
-            appId={props.appId}
-            planId={selectedPlan.planId}
-            readOnly={props.readOnly}
-          />
-
           <Button
             type='link'
             size='small'
diff --git a/packages/arex/src/panes/ReplayDiffScenes/ReplayDiffScenes.tsx b/packages/arex/src/panes/ReplayDiffScenes/ReplayDiffScenes.tsx
index 128ef59fe..a2cefd270 100644
--- a/packages/arex/src/panes/ReplayDiffScenes/ReplayDiffScenes.tsx
+++ b/packages/arex/src/panes/ReplayDiffScenes/ReplayDiffScenes.tsx
@@ -19,7 +19,7 @@ import {
   useTranslation,
 } from '@arextest/arex-core';
 import { useRequest, useSize } from 'ahooks';
-import { App, Card, Collapse, Modal, Progress, Space, Spin } from 'antd';
+import { App, Card, Collapse, Modal, Progress, Space } from 'antd';
 import React, { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { APP_ID_KEY, PanesType } from '@/constant';
@@ -64,7 +64,7 @@ const ReplayDiffScenes: ArexPaneFC = (props) => {
   useEffect(() => {
     activePane?.key === props.paneKey && setLocalStorage(APP_ID_KEY, planItemData?.appId);
     return () => clearLocalStorage(APP_ID_KEY);
-  }, [activePane?.id]);
+  }, [activePane?.id, planItemData?.appId]);
 
   const {
     data: sceneInfo = [],
diff --git a/packages/arex/src/services/ScheduleService/excludeNoise.ts b/packages/arex/src/services/ScheduleService/excludeNoise.ts
new file mode 100644
index 000000000..64c4cc820
--- /dev/null
+++ b/packages/arex/src/services/ScheduleService/excludeNoise.ts
@@ -0,0 +1,17 @@
+import axios from 'axios';
+
+import { InterfaceNoiseItem } from '@/services/ScheduleService/queryNoise';
+
+interface ExcludeNoiseReq {
+  appId: string;
+  planId: string;
+  interfaceNoiseItemList: InterfaceNoiseItem[];
+}
+
+export async function excludeNoise(params: ExcludeNoiseReq) {
+  const res = await axios.post<ExcludeNoiseReq, { data: { data: boolean } }>(
+    '/schedule/excludeNoise',
+    params,
+  );
+  return res.data.data;
+}
diff --git a/packages/arex/src/services/ScheduleService/index.ts b/packages/arex/src/services/ScheduleService/index.ts
index eab9dd489..1066f466b 100644
--- a/packages/arex/src/services/ScheduleService/index.ts
+++ b/packages/arex/src/services/ScheduleService/index.ts
@@ -1,4 +1,5 @@
 export * from './createPlan';
+export * from './excludeNoise';
 export * from './queryDiffMsgById';
 export * from './queryLogEntity';
 export * from './queryLogs';
diff --git a/packages/arex/src/services/ScheduleService/queryNoise.ts b/packages/arex/src/services/ScheduleService/queryNoise.ts
index e993b20e9..a31657707 100644
--- a/packages/arex/src/services/ScheduleService/queryNoise.ts
+++ b/packages/arex/src/services/ScheduleService/queryNoise.ts
@@ -10,6 +10,7 @@ export type NoiseItem = {
   }[];
   logIndexes: number[];
   compareResultId: string;
+  status?: 1; // 1: already exclude
 };
 
 export type RandomNoise = {
@@ -39,5 +40,23 @@ export async function queryNoise(planId: string) {
       appId: getLocalStorage<string>(APP_ID_KEY),
     },
   });
-  return res.data.data.interfaceNoiseItemList;
+
+  // filter excluded nodeEntity
+  return res.data.data.interfaceNoiseItemList
+    .map((operation) => {
+      const randomNoise = operation.randomNoise
+        .map((noise) => ({
+          ...noise,
+          noiseItemList: noise.noiseItemList.filter((noiseItem) => noiseItem.status !== 1),
+        }))
+        .filter((noise) => noise.noiseItemList.length)
+        // sort randomNoise by whether is entryPoint
+        .sort((a, b) => {
+          if (a.mockCategoryType.entryPoint === b.mockCategoryType.entryPoint) return 0;
+          if (a.mockCategoryType.entryPoint) return -1;
+          return 1;
+        });
+      return { ...operation, randomNoise };
+    })
+    .filter((operation) => operation.randomNoise.length);
 }
diff --git a/packages/arex/vite.config.ts b/packages/arex/vite.config.ts
index eaf6b4104..c7d239ccd 100644
--- a/packages/arex/vite.config.ts
+++ b/packages/arex/vite.config.ts
@@ -43,10 +43,10 @@ export default defineConfig(async ({ mode }) => ({
   resolve: {
     alias: {
       '@': path.resolve('./src'),
-      // '@arextest/arex-core/dist': path.resolve('../arex-core/src'),
-      // '@arextest/arex-core': path.resolve('../arex-core/src'),
+      '@arextest/arex-core/dist': path.resolve('../arex-core/src'),
+      '@arextest/arex-core': path.resolve('../arex-core/src'),
       // '@arextest/arex-common': path.resolve('../arex-common/src'),
-      '@arextest/arex-request': path.resolve('../arex-request/src'),
+      // '@arextest/arex-request': path.resolve('../arex-request/src'),
     },
   },
   server: {