Prevent unneeded re-renders of tgrid on opening alert flyout (#108781)

elastic · Aug 16, 2021 · 34eb8c6 · 34eb8c6
1 parent 678aa4a
commit 34eb8c6
Showing 1 changed file with 18 additions and 21 deletions.
diff --git a/x-pack/plugins/observability/public/pages/alerts/alerts_table_t_grid.tsx b/x-pack/plugins/observability/public/pages/alerts/alerts_table_t_grid.tsx
@@ -75,7 +75,6 @@ interface AlertsTableTGridProps {
 }
 
 interface ObservabilityActionsProps extends ActionProps {
-  flyoutAlert: TopAlert | undefined;
   setFlyoutAlert: React.Dispatch<React.SetStateAction<TopAlert | undefined>>;
 }
 
@@ -162,12 +161,10 @@ function ObservabilityActions({
   data,
   eventId,
   ecsData,
-  flyoutAlert,
   setFlyoutAlert,
 }: ObservabilityActionsProps) {
   const { core, observabilityRuleTypeRegistry } = usePluginContext();
   const dataFieldEs = data.reduce((acc, d) => ({ ...acc, [d.field]: d.value }), {});
-  const handleFlyoutClose = () => setFlyoutAlert(undefined);
   const [openActionsPopoverId, setActionsPopover] = useState(null);
   const { timelines } = useKibana<{ timelines: TimelinesUIStart }>().services;
   const parseObservabilityAlert = useMemo(() => parseAlert(observabilityRuleTypeRegistry), [
@@ -223,15 +220,6 @@ function ObservabilityActions({
   }, [afterCaseSelection, casePermissions, timelines, event]);
   return (
     <>
-      {flyoutAlert && (
-        <Suspense fallback={null}>
-          <LazyAlertsFlyout
-            alert={flyoutAlert}
-            observabilityRuleTypeRegistry={observabilityRuleTypeRegistry}
-            onClose={handleFlyoutClose}
-          />
-        </Suspense>
-      )}
       <EuiFlexGroup gutterSize="none" responsive={false}>
         <EuiFlexItem>
           <EuiButtonIcon
@@ -298,17 +286,11 @@ export function AlertsTableTGrid(props: AlertsTableTGridProps) {
           );
         },
         rowCellRender: (actionProps: ActionProps) => {
-          return (
-            <ObservabilityActions
-              {...actionProps}
-              flyoutAlert={flyoutAlert}
-              setFlyoutAlert={setFlyoutAlert}
-            />
-          );
+          return <ObservabilityActions {...actionProps} setFlyoutAlert={setFlyoutAlert} />;
         },
       },
     ];
-  }, [flyoutAlert]);
+  }, []);
 
   const tGridProps = useMemo(() => {
     const type: TGridType = 'standalone';
@@ -366,6 +348,21 @@ export function AlertsTableTGrid(props: AlertsTableTGridProps) {
     setRefetch,
     status,
   ]);
+  const handleFlyoutClose = () => setFlyoutAlert(undefined);
+  const { observabilityRuleTypeRegistry } = usePluginContext();
 
-  return <>{timelines.getTGrid<'standalone'>(tGridProps)}</>;
+  return (
+    <>
+      {flyoutAlert && (
+        <Suspense fallback={null}>
+          <LazyAlertsFlyout
+            alert={flyoutAlert}
+            observabilityRuleTypeRegistry={observabilityRuleTypeRegistry}
+            onClose={handleFlyoutClose}
+          />
+        </Suspense>
+      )}
+      {timelines.getTGrid<'standalone'>(tGridProps)}
+    </>
+  );
 }