[ML] Explain Log Rate Spikes: sample groups table view (#140464)

* wip: create groups table

* [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix'

* show significant terms data in groups expanded row

* update mock data to reflect new data format

* [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix'

* sort group fields alphabetically

* [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix'

* replace mock data with api data

* fix functional test and remove commented code

* update types

* update functional tests

Co-authored-by: kibanamachine <[email protected]>

x-pack/plugins/aiops/public/components/explain_log_rate_spikes/explain_log_rate_spikes_analysis.tsx

@@ -8,7 +8,14 @@
 import React, { useEffect, useMemo, useState, FC } from 'react';
 import { isEqual } from 'lodash';
 
-import { EuiCallOut, EuiEmptyPrompt, EuiSpacer, EuiText } from '@elastic/eui';
+import {
+  EuiCallOut,
+  EuiEmptyPrompt,
+  EuiFormRow,
+  EuiSpacer,
+  EuiSwitch,
+  EuiText,
+} from '@elastic/eui';
 
 import type { DataView } from '@kbn/data-views-plugin/public';
 import { ProgressControls } from '@kbn/aiops-components';
@@ -23,8 +30,16 @@ import { useAiopsAppContext } from '../../hooks/use_aiops_app_context';
 import { initialState, streamReducer } from '../../../common/api/stream_reducer';
 import type { ApiExplainLogRateSpikes } from '../../../common/api';
 
+import { SpikeAnalysisGroupsTable } from '../spike_analysis_table';
 import { SpikeAnalysisTable } from '../spike_analysis_table';
 
+const groupResultsMessage = i18n.translate(
+  'xpack.aiops.spikeAnalysisTable.groupedSwitchLabel.groupResults',
+  {
+    defaultMessage: 'Group results',
+  }
+);
+
 /**
  * ExplainLogRateSpikes props require a data view.
  */
@@ -59,6 +74,11 @@ export const ExplainLogRateSpikesAnalysis: FC<ExplainLogRateSpikesAnalysisProps>
   const [currentAnalysisWindowParameters, setCurrentAnalysisWindowParameters] = useState<
     WindowParameters | undefined
   >();
+  const [groupResults, setGroupResults] = useState<boolean>(true);
+
+  const onSwitchToggle = (e: { target: { checked: React.SetStateAction<boolean> } }) => {
+    setGroupResults(e.target.checked);
+  };
 
   const {
     cancel,
@@ -75,6 +95,7 @@ export const ExplainLogRateSpikesAnalysis: FC<ExplainLogRateSpikesAnalysisProps>
       // TODO Handle data view without time fields.
       timeFieldName: dataView.timeFieldName ?? '',
       index: dataView.title,
+      grouping: true,
       ...windowParameters,
     },
     { reducer: streamReducer, initialState }
@@ -102,6 +123,34 @@ export const ExplainLogRateSpikesAnalysis: FC<ExplainLogRateSpikesAnalysisProps>
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const groupTableItems = useMemo(() => {
+    const tableItems = data.changePointsGroups.map(({ group, docCount }, index) => {
+      const sortedGroup = group.sort((a, b) =>
+        a.fieldName > b.fieldName ? 1 : b.fieldName > a.fieldName ? -1 : 0
+      );
+      const dedupedGroup: Record<string, any> = {};
+      const repeatedValues: Record<string, any> = {};
+
+      sortedGroup.forEach((pair) => {
+        const { fieldName, fieldValue } = pair;
+        if (pair.duplicate === false) {
+          dedupedGroup[fieldName] = fieldValue;
+        } else {
+          repeatedValues[fieldName] = fieldValue;
+        }
+      });
+
+      return {
+        id: index,
+        docCount,
+        group: dedupedGroup,
+        repeatedValues,
+      };
+    });
+
+    return tableItems;
+  }, [data.changePointsGroups]);
+
   const shouldRerunAnalysis = useMemo(
     () =>
       currentAnalysisWindowParameters !== undefined &&
@@ -110,6 +159,11 @@ export const ExplainLogRateSpikesAnalysis: FC<ExplainLogRateSpikesAnalysisProps>
   );
 
   const showSpikeAnalysisTable = data?.changePoints.length > 0;
+  const groupItemCount = groupTableItems.reduce((p, c) => {
+    return p + Object.keys(c.group).length;
+  }, 0);
+  const foundGroups =
+    groupTableItems.length === 0 || (groupTableItems.length > 0 && groupItemCount > 0);
 
   return (
     <div data-test-subj="aiopsExplainLogRateSpikesAnalysis">
@@ -121,6 +175,17 @@ export const ExplainLogRateSpikesAnalysis: FC<ExplainLogRateSpikesAnalysisProps>
         onCancel={cancel}
         shouldRerunAnalysis={shouldRerunAnalysis}
       />
+      {showSpikeAnalysisTable && foundGroups && (
+        <EuiFormRow display="columnCompressedSwitch" label={groupResultsMessage}>
+          <EuiSwitch
+            showLabel={false}
+            label={''}
+            checked={groupResults}
+            onChange={onSwitchToggle}
+            compressed
+          />
+        </EuiFormRow>
+      )}
       <EuiSpacer size="xs" />
       {!isRunning && !showSpikeAnalysisTable && (
         <EuiEmptyPrompt
@@ -171,7 +236,18 @@ export const ExplainLogRateSpikesAnalysis: FC<ExplainLogRateSpikesAnalysisProps>
           <EuiSpacer size="xs" />
         </>
       )}
-      {showSpikeAnalysisTable && (
+      {showSpikeAnalysisTable && groupResults && foundGroups ? (
+        <SpikeAnalysisGroupsTable
+          changePoints={data.changePoints}
+          groupTableItems={groupTableItems}
+          loading={isRunning}
+          onPinnedChangePoint={onPinnedChangePoint}
+          onSelectedChangePoint={onSelectedChangePoint}
+          selectedChangePoint={selectedChangePoint}
+          dataViewId={dataView.id}
+        />
+      ) : null}
+      {showSpikeAnalysisTable && (!groupResults || !foundGroups) ? (
         <SpikeAnalysisTable
           changePoints={data.changePoints}
           loading={isRunning}
@@ -180,7 +256,7 @@ export const ExplainLogRateSpikesAnalysis: FC<ExplainLogRateSpikesAnalysisProps>
           selectedChangePoint={selectedChangePoint}
           dataViewId={dataView.id}
         />
-      )}
+      ) : null}
     </div>
   );
 };

x-pack/plugins/aiops/public/components/spike_analysis_table/index.ts

@@ -6,3 +6,4 @@
  */
 
 export { SpikeAnalysisTable } from './spike_analysis_table';
+export { SpikeAnalysisGroupsTable } from './spike_analysis_table_groups';