[Response Ops] [Alerts table] Cell context alert table performance

packages/kbn-securitysolution-grouping/src/hooks/use_get_group_selector.tsx

@@ -8,7 +8,7 @@
 
 import type { FieldSpec } from '@kbn/data-views-plugin/common';
 import { METRIC_TYPE, UiCounterMetricType } from '@kbn/analytics';
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 
 import { groupActions, groupByIdSelector } from './state';
 import type { GroupOption } from './types';
@@ -64,19 +64,21 @@ export const useGetGroupSelectorStateless = ({
     [onGroupChange]
   );
 
-  return (
-    <GroupSelector
-      {...{
-        groupingId,
-        groupsSelected: ['none'],
-        'data-test-subj': 'alerts-table-group-selector',
-        onGroupChange: onChange,
-        fields,
-        maxGroupingLevels,
-        options: defaultGroupingOptions,
-      }}
-    />
-  );
+  return useMemo(() => {
+    return (
+      <GroupSelector
+        {...{
+          groupingId,
+          groupsSelected: ['none'],
+          'data-test-subj': 'alerts-table-group-selector',
+          onGroupChange: onChange,
+          fields,
+          maxGroupingLevels,
+          options: defaultGroupingOptions,
+        }}
+      />
+    );
+  }, [groupingId, fields, maxGroupingLevels, defaultGroupingOptions, onChange]);
 };
 
 export const useGetGroupSelector = ({
@@ -198,18 +200,19 @@ export const useGetGroupSelector = ({
     }
   }, [defaultGroupingOptions, options, selectedGroups, setOptions]);
 
-  return (
-    <GroupSelector
-      {...{
-        groupingId,
-        groupsSelected: selectedGroups,
-        'data-test-subj': 'alerts-table-group-selector',
-        onGroupChange: onChange,
-        fields,
-        maxGroupingLevels,
-        options,
-        title,
-      }}
-    />
-  );
+  return useMemo(() => {
+    return (
+      <GroupSelector
+        {...{
+          groupingId,
+          groupsSelected: selectedGroups,
+          'data-test-subj': 'alerts-table-group-selector',
+          onGroupChange: onChange,
+          fields,
+          maxGroupingLevels,
+          options,
+        }}
+      />
+    );
+  }, [groupingId, fields, maxGroupingLevels, onChange, selectedGroups, options]);
 };

x-pack/examples/triggers_actions_ui_example/public/plugin.tsx

@@ -133,8 +133,11 @@ export class TriggersActionsUiExamplePlugin
       id: 'observabilityCases',
       columns,
       useInternalFlyout,
-      getRenderCellValue: () => (props) => {
-        const value = props.data.find((d) => d.field === props.columnId)?.value ?? [];
+      getRenderCellValue: (props: {
+        data?: Array<{ field: string; value: string }>;
+        columnId?: string;
+      }) => {
+        const value = props.data?.find((d) => d.field === props.columnId)?.value ?? [];
 
         if (Array.isArray(value)) {
           return <>{value.length ? value.join() : '--'}</>;

x-pack/plugins/cases/public/components/all_cases/selector_modal/use_cases_add_to_existing_case_modal.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 import { useApplication } from '../../../common/lib/kibana/use_application';
 import { CaseStatuses } from '../../../../common/types/domain';
 import type { AllCasesSelectorModalProps } from '.';
@@ -158,9 +158,11 @@ export const useCasesAddToExistingCaseModal = ({
     [closeModal, dispatch, handleOnRowClick, onClose, onCreateCaseClicked]
   );
 
-  return {
-    open: openModal,
-    close: closeModal,
-  };
+  return useMemo(() => {
+    return {
+      open: openModal,
+      close: closeModal,
+    };
+  }, [openModal, closeModal]);
 };
 export type UseCasesAddToExistingCaseModal = typeof useCasesAddToExistingCaseModal;

x-pack/plugins/cases/public/components/create/flyout/use_cases_add_to_new_case_flyout.tsx

@@ -6,7 +6,7 @@
  */
 
 import type React from 'react';
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 import type { CaseAttachmentsWithoutOwner } from '../../../types';
 import { useCasesToast } from '../../../common/use_cases_toast';
 import type { CaseUI } from '../../../containers/types';
@@ -88,10 +88,12 @@ export const useCasesAddToNewCaseFlyout = ({
       onClose,
     ]
   );
-  return {
-    open: openFlyout,
-    close: closeFlyout,
-  };
+  return useMemo(() => {
+    return {
+      open: openFlyout,
+      close: closeFlyout,
+    };
+  }, [openFlyout, closeFlyout]);
 };
 
 export type UseCasesAddToNewCaseFlyout = typeof useCasesAddToNewCaseFlyout;

x-pack/plugins/ml/public/alerting/anomaly_detection_alerts_table/register_alerts_table_configuration.tsx

@@ -129,7 +129,7 @@ export function registerAlertsTableConfiguration(
     },
     columns,
     useInternalFlyout: getAlertFlyout(columns, getAlertFormatters(fieldFormats)),
-    getRenderCellValue: getRenderCellValue(fieldFormats),
+    getRenderCellValue,
     sort,
     useActionsColumn: () => ({
       renderCustomActionsRow: (props: RenderCustomActionsRowArgs) => {

x-pack/plugins/ml/public/alerting/anomaly_detection_alerts_table/render_cell_value.tsx

@@ -6,10 +6,10 @@
  */
 
 import { isEmpty } from 'lodash';
-import React, { type ReactNode } from 'react';
+import React from 'react';
+import type { RenderCellValue } from '@elastic/eui';
 import { isDefined } from '@kbn/ml-is-defined';
 import { ALERT_DURATION, ALERT_END, ALERT_START } from '@kbn/rule-data-utils';
-import type { GetRenderCellValue } from '@kbn/triggers-actions-ui-plugin/public';
 import type { FieldFormatsRegistry } from '@kbn/field-formats-plugin/common';
 import { FIELD_FORMAT_IDS } from '@kbn/field-formats-plugin/common';
 import { getFormattedSeverityScore, getSeverityColor } from '@kbn/ml-anomaly-utils';
@@ -21,11 +21,6 @@ import {
 } from '../../../common/constants/alerts';
 import { getFieldFormatterProvider } from '../../application/contexts/kibana/use_field_formatter';
 
-interface Props {
-  columnId: string;
-  data: any;
-}
-
 export const getMappedNonEcsValue = ({
   data,
   fieldName,
@@ -54,22 +49,17 @@ const getRenderValue = (mappedNonEcsValue: any) => {
   return '—';
 };
 
-export const getRenderCellValue = (fieldFormats: FieldFormatsRegistry): GetRenderCellValue => {
+export const getRenderCellValue: RenderCellValue = ({ columnId, data, fieldFormats }) => {
   const alertValueFormatter = getAlertFormatters(fieldFormats);
+  if (!isDefined(data)) return;
 
-  return ({ setFlyoutAlert }) =>
-    (props): ReactNode => {
-      const { columnId, data } = props as Props;
-      if (!isDefined(data)) return;
+  const mappedNonEcsValue = getMappedNonEcsValue({
+    data,
+    fieldName: columnId,
+  });
+  const value = getRenderValue(mappedNonEcsValue);
 
-      const mappedNonEcsValue = getMappedNonEcsValue({
-        data,
-        fieldName: columnId,
-      });
-      const value = getRenderValue(mappedNonEcsValue);
-
-      return alertValueFormatter(columnId, value);
-    };
+  return alertValueFormatter(columnId, value);
 };
 
 export function getAlertFormatters(fieldFormats: FieldFormatsRegistry) {

x-pack/plugins/ml/public/application/explorer/alerts/alerts_panel.tsx

@@ -33,7 +33,9 @@ export const AlertsPanel: FC = () => {
 
   const [isOpen, setIsOpen] = useState(true);
   const [toggleSelected, setToggleSelected] = useState(`alertsSummary`);
-
+  const {
+    services: { fieldFormats },
+  } = useMlKibana();
   const { anomalyDetectionAlertsStateService } = useAnomalyExplorerContext();
 
   const countByStatus = useObservable(anomalyDetectionAlertsStateService.countByStatus$);
@@ -48,6 +50,9 @@ export const AlertsPanel: FC = () => {
     query: alertsQuery,
     showExpandToDetails: true,
     showAlertStatusWithFlapping: true,
+    cellContext: {
+      fieldFormats,
+    },
   };
   const alertsStateTable = triggersActionsUi!.getAlertsStateTable(alertStateProps);
 

x-pack/plugins/observability_solution/observability/public/components/alerts_table/alerts/get_alerts_page_table_configuration.tsx

@@ -27,11 +27,7 @@ export const getAlertsPageTableConfiguration = (
   id: observabilityFeatureId,
   cases: { featureId: casesFeatureId, owner: [observabilityFeatureId] },
   columns: getColumns({ showRuleName: true }),
-  getRenderCellValue: ({ setFlyoutAlert }) =>
-    getRenderCellValue({
-      observabilityRuleTypeRegistry,
-      setFlyoutAlert,
-    }),
+  getRenderCellValue,
   sort: [
     {
       [ALERT_START]: {

x-pack/plugins/observability_solution/observability/public/components/alerts_table/common/render_cell_value.test.tsx

@@ -7,7 +7,6 @@
 
 import { ALERT_STATUS, ALERT_STATUS_ACTIVE, ALERT_STATUS_RECOVERED } from '@kbn/rule-data-utils';
 import type { DeprecatedCellValueElementProps } from '@kbn/timelines-plugin/common';
-import { createObservabilityRuleTypeRegistryMock } from '../../../rules/observability_rule_type_registry_mock';
 import { render } from '../../../utils/test_helper';
 import { getRenderCellValue } from './render_cell_value';
 
@@ -16,17 +15,10 @@ interface AlertsTableRow {
 }
 
 describe('getRenderCellValue', () => {
-  const observabilityRuleTypeRegistryMock = createObservabilityRuleTypeRegistryMock();
-
-  const renderCellValue = getRenderCellValue({
-    setFlyoutAlert: jest.fn(),
-    observabilityRuleTypeRegistry: observabilityRuleTypeRegistryMock,
-  });
-
   describe('when column is alert status', () => {
     it('should return an active indicator when alert status is active', async () => {
       const cell = render(
-        renderCellValue({
+        getRenderCellValue({
           ...requiredProperties,
           columnId: ALERT_STATUS,
           data: makeAlertsTableRow({ alertStatus: ALERT_STATUS_ACTIVE }),
@@ -38,7 +30,7 @@ describe('getRenderCellValue', () => {
 
     it('should return a recovered indicator when alert status is recovered', async () => {
       const cell = render(
-        renderCellValue({
+        getRenderCellValue({
           ...requiredProperties,
           columnId: ALERT_STATUS,
           data: makeAlertsTableRow({ alertStatus: ALERT_STATUS_RECOVERED }),