[ML] AIOps: Log Rate Analysis embeddable

examples/response_stream/public/containers/app/pages/page_redux_stream/hooks.ts

@@ -8,10 +8,9 @@
  */
 
 import type { TypedUseSelectorHook } from 'react-redux';
-import { useDispatch, useSelector, useStore } from 'react-redux';
-import type { AppDispatch, AppStore, RootState } from './store';
+import { useDispatch, useSelector } from 'react-redux';
+import type { AppDispatch, RootState } from './store';
 
 // Use throughout your app instead of plain `useDispatch` and `useSelector`
 export const useAppDispatch: () => AppDispatch = useDispatch;
 export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
-export const useAppStore: () => AppStore = useStore;

x-pack/.i18nrc.json

@@ -3,6 +3,7 @@
   "paths": {
     "xpack.actions": "plugins/actions",
     "xpack.aiops": [
+      "packages/ml/aiops_common",
       "packages/ml/aiops_components",
       "packages/ml/aiops_log_pattern_analysis",
       "packages/ml/aiops_log_rate_analysis",

x-pack/packages/ml/aiops_common/constants.ts

@@ -5,6 +5,8 @@
  * 2.0.
  */
 
+import { i18n } from '@kbn/i18n';
+
 /**
  * AIOPS_PLUGIN_ID is used as a unique identifier for the aiops plugin
  */
@@ -28,3 +30,14 @@ export const AIOPS_EMBEDDABLE_ORIGIN = {
   DISCOVER: 'discover',
   ML_AIOPS_LABS: 'ml_aiops_labs',
 } as const;
+
+export const AIOPS_EMBEDDABLE_GROUPING = [
+  {
+    id: 'logs-aiops',
+    getDisplayName: () =>
+      i18n.translate('xpack.aiops.embedabble.groupingDisplayName', {
+        defaultMessage: 'Logs AIOps',
+      }),
+    getIconType: () => 'machineLearningApp',
+  },
+];

x-pack/packages/ml/aiops_common/tsconfig.json

@@ -15,6 +15,7 @@
   ],
   "kbn_references": [
     "@kbn/ml-is-populated-object",
+    "@kbn/i18n",
   ],
   "exclude": [
     "target/**/*",

x-pack/packages/ml/aiops_components/src/document_count_chart/document_count_chart.tsx

@@ -426,7 +426,12 @@ export const DocumentCountChart: FC<DocumentCountChartProps> = (props) => {
     <>
       {isBrushVisible && (
         <div className="aiopsHistogramBrushes" data-test-subj={'aiopsHistogramBrushes'}>
-          <div css={{ height: BADGE_HEIGHT }}>
+          {/**
+           * We need position:relative on this parent container of the BrushBadges,
+           * because of the absolute positioning of the BrushBadges. Without it, the
+           * BrushBadges would not be positioned correctly when used in embedded panels.
+           */}
+          <div css={{ height: BADGE_HEIGHT, position: 'relative' }}>
             <BrushBadge
               label={
                 baselineBrush.label ??

x-pack/packages/ml/aiops_components/src/dual_brush/dual_brush.tsx

@@ -6,7 +6,9 @@
  */
 
 import { isEqual } from 'lodash';
-import React, { useEffect, useRef, type FC } from 'react';
+import React, { useEffect, useMemo, useRef, type FC } from 'react';
+
+import { htmlIdGenerator } from '@elastic/eui';
 
 import * as d3Brush from 'd3-brush';
 import * as d3Scale from 'd3-scale';
@@ -100,6 +102,10 @@ export const DualBrush: FC<DualBrushProps> = (props) => {
   const d3BrushContainer = useRef(null);
   const brushes = useRef<DualBrush[]>([]);
 
+  // id to prefix html ids for the brushes since this component can be used
+  // multiple times within dashboard and embedded charts.
+  const htmlId = useMemo(() => htmlIdGenerator()(), []);
+
   // We need to pass props to refs here because the d3-brush code doesn't consider
   // native React prop changes. The brush code does its own check whether these props changed then.
   // The initialized brushes might otherwise act on stale data.
@@ -135,10 +141,10 @@ export const DualBrush: FC<DualBrushProps> = (props) => {
           const xMax = x(maxRef.current) ?? 0;
           const minExtentPx = Math.round((xMax - xMin) / 100);
 
-          const baselineBrush = d3.select('#aiops-brush-baseline');
+          const baselineBrush = d3.select(`#aiops-brush-baseline-${htmlId}`);
           const baselineSelection = d3.brushSelection(baselineBrush.node() as SVGGElement);
 
-          const deviationBrush = d3.select('#aiops-brush-deviation');
+          const deviationBrush = d3.select(`#aiops-brush-deviation-${htmlId}`);
           const deviationSelection = d3.brushSelection(deviationBrush.node() as SVGGElement);
 
           if (!isBrushXSelection(deviationSelection) || !isBrushXSelection(baselineSelection)) {
@@ -260,7 +266,7 @@ export const DualBrush: FC<DualBrushProps> = (props) => {
           .insert('g', '.brush')
           .attr('class', 'brush')
           .attr('id', (b: DualBrush) => {
-            return 'aiops-brush-' + b.id;
+            return `aiops-brush-${b.id}-${htmlId}`;
           })
           .attr('data-test-subj', (b: DualBrush) => {
             // Uppercase the first character of the `id` so we get aiopsBrushBaseline/aiopsBrushDeviation.
@@ -339,6 +345,7 @@ export const DualBrush: FC<DualBrushProps> = (props) => {
       drawBrushes();
     }
   }, [
+    htmlId,
     min,
     max,
     width,

x-pack/packages/ml/aiops_components/src/progress_controls/progress_controls.tsx

@@ -70,7 +70,6 @@ export const ProgressControls: FC<PropsWithChildren<ProgressControlProps>> = (pr
   const { euiTheme } = useEuiTheme();
 
   const runningProgressBarStyles = useAnimatedProgressBarBackground(euiTheme.colors.success);
-  const analysisCompleteStyle = { display: 'none' };
 
   return (
     <EuiFlexGroup alignItems="center" gutterSize="s">
@@ -144,32 +143,30 @@ export const ProgressControls: FC<PropsWithChildren<ProgressControlProps>> = (pr
             </EuiFlexItem>
           </EuiFlexGroup>
         ) : null}
-        <EuiFlexGroup
-          direction="column"
-          gutterSize="none"
-          css={progress === 1 ? analysisCompleteStyle : undefined}
-        >
-          <EuiFlexItem data-test-subj="aiopProgressTitle">
-            <EuiText size="xs" color="subdued">
-              <FormattedMessage
-                data-test-subj="aiopsProgressTitleMessage"
-                id="xpack.aiops.progressTitle"
-                defaultMessage="Progress: {progress}% — {progressMessage}"
-                values={{ progress: progressOutput, progressMessage }}
+        {progress !== 1 ? (
+          <EuiFlexGroup direction="column" gutterSize="none">
+            <EuiFlexItem data-test-subj="aiopProgressTitle">
+              <EuiText size="xs" color="subdued">
+                <FormattedMessage
+                  data-test-subj="aiopsProgressTitleMessage"
+                  id="xpack.aiops.progressTitle"
+                  defaultMessage="Progress: {progress}% — {progressMessage}"
+                  values={{ progress: progressOutput, progressMessage }}
+                />
+              </EuiText>
+            </EuiFlexItem>
+            <EuiFlexItem css={isRunning ? runningProgressBarStyles : undefined}>
+              <EuiProgress
+                aria-label={i18n.translate('xpack.aiops.progressAriaLabel', {
+                  defaultMessage: 'Progress',
+                })}
+                value={progressOutput}
+                max={100}
+                size="m"
               />
-            </EuiText>
-          </EuiFlexItem>
-          <EuiFlexItem css={isRunning ? runningProgressBarStyles : undefined}>
-            <EuiProgress
-              aria-label={i18n.translate('xpack.aiops.progressAriaLabel', {
-                defaultMessage: 'Progress',
-              })}
-              value={progressOutput}
-              max={100}
-              size="m"
-            />
-          </EuiFlexItem>
-        </EuiFlexGroup>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        ) : null}
       </EuiFlexItem>
       {children}
     </EuiFlexGroup>

x-pack/packages/ml/aiops_log_rate_analysis/constants.ts

@@ -33,3 +33,9 @@ export const RANDOM_SAMPLER_SEED = 3867412;
 
 /** Highlighting color for charts */
 export const LOG_RATE_ANALYSIS_HIGHLIGHT_COLOR = 'orange';
+
+/**  */
+export const EMBEDDABLE_LOG_RATE_ANALYSIS_TYPE = 'aiopsLogRateAnalysisEmbeddable' as const;
+
+/**  */
+export const LOG_RATE_ANALYSIS_DATA_VIEW_REF_NAME = 'aiopsLogRateAnalysisEmbeddableDataViewId';

x-pack/packages/ml/aiops_log_rate_analysis/state/hooks.ts

@@ -6,10 +6,9 @@
  */
 
 import type { TypedUseSelectorHook } from 'react-redux';
-import { useDispatch, useSelector, useStore } from 'react-redux';
-import type { AppDispatch, AppStore, RootState } from './store';
+import { useDispatch, useSelector } from 'react-redux';
+import type { AppDispatch, RootState } from './store';
 
 // Improves TypeScript support compared to plain `useDispatch` and `useSelector`
 export const useAppDispatch: () => AppDispatch = useDispatch;
 export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
-export const useAppStore: () => AppStore = useStore;

x-pack/packages/ml/aiops_log_rate_analysis/state/index.ts

@@ -11,6 +11,7 @@ export {
   setAnalysisType,
   setAutoRunAnalysis,
   setDocumentCountChartData,
+  setGroupResults,
   setInitialAnalysisStart,
   setIsBrushCleared,
   setStickyHistogram,
@@ -23,9 +24,10 @@ export {
   setPinnedSignificantItem,
   setSelectedGroup,
   setSelectedSignificantItem,
-} from './log_rate_analysis_table_row_slice';
+  setSkippedColumns,
+} from './log_rate_analysis_table_slice';
 export { LogRateAnalysisReduxProvider } from './store';
-export { useAppDispatch, useAppSelector, useAppStore } from './hooks';
+export { useAppDispatch, useAppSelector } from './hooks';
 export { useCurrentSelectedGroup } from './use_current_selected_group';
 export { useCurrentSelectedSignificantItem } from './use_current_selected_significant_item';
 export type { GroupTableItem, GroupTableItemGroup, TableItemAction } from './types';

x-pack/packages/ml/aiops_log_rate_analysis/state/log_rate_analysis_field_candidates_slice.test.ts

@@ -9,14 +9,16 @@ import { httpServiceMock } from '@kbn/core/public/mocks';
 
 import type { FetchFieldCandidatesResponse } from '../queries/fetch_field_candidates';
 
-import { fetchFieldCandidates } from './log_rate_analysis_field_candidates_slice';
+import { fetchFieldCandidates, getDefaultState } from './log_rate_analysis_field_candidates_slice';
 
 const mockHttp = httpServiceMock.createStartContract();
 
 describe('fetchFieldCandidates', () => {
   it('dispatches field candidates', async () => {
     const mockDispatch = jest.fn();
-    const mockGetState = jest.fn();
+    const mockGetState = jest.fn().mockReturnValue({
+      logRateAnalysisFieldCandidates: getDefaultState(),
+    });
 
     const mockResponse: FetchFieldCandidatesResponse = {
       isECS: false,
@@ -60,7 +62,12 @@ describe('fetchFieldCandidates', () => {
       payload: {
         fieldSelectionMessage:
           '2 out of 5 fields were preselected for the analysis. Use the "Fields" dropdown to adjust the selection.',
-        fieldFilterSkippedItems: [
+        initialFieldFilterSkippedItems: [
+          'another-keyword-field',
+          'another-text-field',
+          'yet-another-text-field',
+        ],
+        currentFieldFilterSkippedItems: [
           'another-keyword-field',
           'another-text-field',
           'yet-another-text-field',

x-pack/packages/ml/aiops_log_rate_analysis/state/log_rate_analysis_field_candidates_slice.ts

@@ -90,10 +90,14 @@ export const fetchFieldCandidates = createAsyncThunk(
       ...selectedKeywordFieldCandidates,
       ...selectedTextFieldCandidates,
     ];
-    const fieldFilterSkippedItems = fieldFilterUniqueItems.filter(
+    const initialFieldFilterSkippedItems = fieldFilterUniqueItems.filter(
       (d) => !fieldFilterUniqueSelectedItems.includes(d)
     );
 
+    const currentFieldFilterSkippedItems = (
+      thunkApi.getState() as { logRateAnalysisFieldCandidates: FieldCandidatesState }
+    ).logRateAnalysisFieldCandidates.currentFieldFilterSkippedItems;
+
     thunkApi.dispatch(
       setAllFieldCandidates({
         fieldSelectionMessage: getFieldSelectionMessage(
@@ -102,7 +106,13 @@ export const fetchFieldCandidates = createAsyncThunk(
           fieldFilterUniqueSelectedItems.length
         ),
         fieldFilterUniqueItems,
-        fieldFilterSkippedItems,
+        initialFieldFilterSkippedItems,
+        // If the currentFieldFilterSkippedItems is null, we're on the first load,
+        // only then we set the current skipped fields to the initial skipped fields.
+        currentFieldFilterSkippedItems:
+          currentFieldFilterSkippedItems === null && initialFieldFilterSkippedItems.length > 0
+            ? initialFieldFilterSkippedItems
+            : currentFieldFilterSkippedItems,
         keywordFieldCandidates,
         textFieldCandidates,
         selectedKeywordFieldCandidates,
@@ -116,18 +126,20 @@ export interface FieldCandidatesState {
   isLoading: boolean;
   fieldSelectionMessage?: string;
   fieldFilterUniqueItems: string[];
-  fieldFilterSkippedItems: string[];
+  initialFieldFilterSkippedItems: string[];
+  currentFieldFilterSkippedItems: string[] | null;
   keywordFieldCandidates: string[];
   textFieldCandidates: string[];
   selectedKeywordFieldCandidates: string[];
   selectedTextFieldCandidates: string[];
 }
 
-function getDefaultState(): FieldCandidatesState {
+export function getDefaultState(): FieldCandidatesState {
   return {
     isLoading: false,
     fieldFilterUniqueItems: [],
-    fieldFilterSkippedItems: [],
+    initialFieldFilterSkippedItems: [],
+    currentFieldFilterSkippedItems: null,
     keywordFieldCandidates: [],
     textFieldCandidates: [],
     selectedKeywordFieldCandidates: [],
@@ -145,6 +157,12 @@ export const logRateAnalysisFieldCandidatesSlice = createSlice({
     ) => {
       return { ...state, ...action.payload };
     },
+    setCurrentFieldFilterSkippedItems: (
+      state: FieldCandidatesState,
+      action: PayloadAction<string[]>
+    ) => {
+      return { ...state, currentFieldFilterSkippedItems: action.payload };
+    },
   },
   extraReducers: (builder) => {
     builder.addCase(fetchFieldCandidates.pending, (state) => {
@@ -157,4 +175,5 @@ export const logRateAnalysisFieldCandidatesSlice = createSlice({
 });
 
 // Action creators are generated for each case reducer function
-export const { setAllFieldCandidates } = logRateAnalysisFieldCandidatesSlice.actions;
+export const { setAllFieldCandidates, setCurrentFieldFilterSkippedItems } =
+  logRateAnalysisFieldCandidatesSlice.actions;

x-pack/packages/ml/aiops_log_rate_analysis/state/log_rate_analysis_slice.ts

@@ -34,6 +34,7 @@ export interface LogRateAnalysisState {
   autoRunAnalysis: boolean;
   initialAnalysisStart: InitialAnalysisStart;
   isBrushCleared: boolean;
+  groupResults: boolean;
   stickyHistogram: boolean;
   chartWindowParameters?: WindowParameters;
   earliest?: number;
@@ -48,6 +49,7 @@ function getDefaultState(): LogRateAnalysisState {
     autoRunAnalysis: true,
     initialAnalysisStart: undefined,
     isBrushCleared: true,
+    groupResults: false,
     documentStats: {
       sampleProbability: 1,
       totalCount: 0,
@@ -98,6 +100,9 @@ export const logRateAnalysisSlice = createSlice({
       state.intervalMs = action.payload.intervalMs;
       state.documentStats = action.payload.documentStats;
     },
+    setGroupResults: (state: LogRateAnalysisState, action: PayloadAction<boolean>) => {
+      state.groupResults = action.payload;
+    },
     setInitialAnalysisStart: (
       state: LogRateAnalysisState,
       action: PayloadAction<InitialAnalysisStart>
@@ -127,6 +132,7 @@ export const {
   setAnalysisType,
   setAutoRunAnalysis,
   setDocumentCountChartData,
+  setGroupResults,
   setInitialAnalysisStart,
   setIsBrushCleared,
   setStickyHistogram,