[ML] Adds action to add log rate analysis to a case (elastic#201549)

## Summary Follow up to [elastic#197247](elastic#197247) Adds action to add Log Rate Analysis Embeddable to a case. https://github.com/user-attachments/assets/f45554e1-cef7-4c54-bea5-c509f236a956 ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios --------- Co-authored-by: kibanamachine <[email protected]>
kibanamachine · Dec 2, 2024 · aa4c39c · aa4c39c
1 parent 2af799b
commit aa4c39c
Show file tree

Hide file tree

Showing 27 changed files with 450 additions and 90 deletions.
diff --git a/packages/kbn-optimizer/limits.yml b/packages/kbn-optimizer/limits.yml
@@ -2,7 +2,7 @@ pageLoadAssetSize:
   actions: 20000
   advancedSettings: 27596
   aiAssistantManagementSelection: 19146
-  aiops: 16670
+  aiops: 17680
   alerting: 106936
   apm: 64385
   banners: 17946

diff --git a/x-pack/packages/ml/aiops_components/src/document_count_chart/document_count_chart.tsx b/x-pack/packages/ml/aiops_components/src/document_count_chart/document_count_chart.tsx
@@ -136,6 +136,8 @@ export interface DocumentCountChartProps {
   dataTestSubj?: string;
   /** Optional change point metadata */
   changePoint?: DocumentCountStatsChangePoint;
+  /** Whether the brush should be non-interactive */
+  nonInteractive?: boolean;
 }
 
 const SPEC_ID = 'document_count';
@@ -190,6 +192,7 @@ export const DocumentCountChart: FC<DocumentCountChartProps> = (props) => {
     barHighlightColorOverride,
     deviationBrush = {},
     baselineBrush = {},
+    nonInteractive,
   } = props;
 
   const { data, uiSettings, fieldFormats, charts } = dependencies;
@@ -470,6 +473,7 @@ export const DocumentCountChart: FC<DocumentCountChartProps> = (props) => {
               marginLeft={mlBrushMarginLeft}
               snapTimestamps={snapTimestamps}
               width={mlBrushWidth}
+              nonInteractive={nonInteractive}
             />
           </div>
         </div>

diff --git a/x-pack/packages/ml/aiops_components/src/dual_brush/dual_brush.tsx b/x-pack/packages/ml/aiops_components/src/dual_brush/dual_brush.tsx
@@ -88,6 +88,11 @@ interface DualBrushProps {
    * Width
    */
   width: number;
+  /**
+   * Whether the brush should be non-interactive. When true, the brush is still visible
+   * but cannot be moved or resized by the user.
+   */
+  nonInteractive?: boolean;
 }
 
 /**
@@ -98,7 +103,16 @@ interface DualBrushProps {
  * @returns The DualBrush component.
  */
 export const DualBrush: FC<DualBrushProps> = (props) => {
-  const { windowParameters, min, max, onChange, marginLeft, snapTimestamps, width } = props;
+  const {
+    windowParameters,
+    min,
+    max,
+    onChange,
+    marginLeft,
+    snapTimestamps,
+    width,
+    nonInteractive,
+  } = props;
   const d3BrushContainer = useRef(null);
   const brushes = useRef<DualBrush[]>([]);
 
@@ -301,6 +315,10 @@ export const DualBrush: FC<DualBrushProps> = (props) => {
           .attr('rx', BRUSH_HANDLE_ROUNDED_CORNER)
           .attr('ry', BRUSH_HANDLE_ROUNDED_CORNER);
 
+        if (nonInteractive) {
+          mlBrushSelection.merge(mlBrushSelection).attr('pointer-events', 'none');
+        }
+
         mlBrushSelection.exit().remove();
       }
 
@@ -355,6 +373,7 @@ export const DualBrush: FC<DualBrushProps> = (props) => {
     deviationMax,
     snapTimestamps,
     onChange,
+    nonInteractive,
   ]);
 
   return (

diff --git a/x-pack/packages/ml/aiops_components/src/progress_controls/progress_controls.tsx b/x-pack/packages/ml/aiops_components/src/progress_controls/progress_controls.tsx
@@ -40,6 +40,7 @@ interface ProgressControlProps {
   shouldRerunAnalysis: boolean;
   runAnalysisDisabled?: boolean;
   analysisInfo?: React.ReactNode;
+  isAnalysisControlsDisabled?: boolean;
 }
 
 /**
@@ -63,6 +64,7 @@ export const ProgressControls: FC<PropsWithChildren<ProgressControlProps>> = (pr
     shouldRerunAnalysis,
     runAnalysisDisabled = false,
     analysisInfo = null,
+    isAnalysisControlsDisabled = false,
   } = props;
 
   const progressOutput = Math.round(progress * 100);
@@ -73,47 +75,55 @@ export const ProgressControls: FC<PropsWithChildren<ProgressControlProps>> = (pr
 
   return (
     <EuiFlexGroup alignItems="center" gutterSize="s">
-      <EuiFlexItem grow={false}>
-        {!isRunning && (
-          <EuiButton
-            disabled={runAnalysisDisabled}
-            data-test-subj={`aiopsRerunAnalysisButton${shouldRerunAnalysis ? ' shouldRerun' : ''}`}
-            size="s"
-            onClick={onRefresh}
-            color={shouldRerunAnalysis ? 'warning' : 'primary'}
-          >
-            <EuiFlexGroup>
-              <EuiFlexItem>
-                <FormattedMessage
-                  id="xpack.aiops.rerunAnalysisButtonTitle"
-                  defaultMessage="Run analysis"
-                />
-              </EuiFlexItem>
-              {shouldRerunAnalysis && (
-                <>
-                  <EuiFlexItem>
-                    <EuiIconTip
-                      aria-label="Warning"
-                      type="warning"
-                      color="warning"
-                      content={i18n.translate('xpack.aiops.rerunAnalysisTooltipContent', {
-                        defaultMessage:
-                          'Analysis data may be out of date due to selection update. Rerun analysis.',
-                      })}
-                    />
-                  </EuiFlexItem>
-                </>
-              )}
-            </EuiFlexGroup>
-          </EuiButton>
-        )}
-        {isRunning && (
-          <EuiButton data-test-subj="aiopsCancelAnalysisButton" size="s" onClick={onCancel}>
-            <FormattedMessage id="xpack.aiops.cancelAnalysisButtonTitle" defaultMessage="Cancel" />
-          </EuiButton>
-        )}
-      </EuiFlexItem>
-      {(progress === 1 || isRunning === false) && !isBrushCleared ? (
+      {!isAnalysisControlsDisabled && (
+        <EuiFlexItem grow={false}>
+          {!isRunning && (
+            <EuiButton
+              disabled={runAnalysisDisabled}
+              data-test-subj={`aiopsRerunAnalysisButton${
+                shouldRerunAnalysis ? ' shouldRerun' : ''
+              }`}
+              size="s"
+              onClick={onRefresh}
+              color={shouldRerunAnalysis ? 'warning' : 'primary'}
+            >
+              <EuiFlexGroup>
+                <EuiFlexItem>
+                  <FormattedMessage
+                    id="xpack.aiops.rerunAnalysisButtonTitle"
+                    defaultMessage="Run analysis"
+                  />
+                </EuiFlexItem>
+                {shouldRerunAnalysis && (
+                  <>
+                    <EuiFlexItem>
+                      <EuiIconTip
+                        aria-label="Warning"
+                        type="warning"
+                        color="warning"
+                        content={i18n.translate('xpack.aiops.rerunAnalysisTooltipContent', {
+                          defaultMessage:
+                            'Analysis data may be out of date due to selection update. Rerun analysis.',
+                        })}
+                      />
+                    </EuiFlexItem>
+                  </>
+                )}
+              </EuiFlexGroup>
+            </EuiButton>
+          )}
+          {isRunning && (
+            <EuiButton data-test-subj="aiopsCancelAnalysisButton" size="s" onClick={onCancel}>
+              <FormattedMessage
+                id="xpack.aiops.cancelAnalysisButtonTitle"
+                defaultMessage="Cancel"
+              />
+            </EuiButton>
+          )}
+        </EuiFlexItem>
+      )}
+
+      {(progress === 1 || isRunning === false) && !isBrushCleared && !isAnalysisControlsDisabled ? (
         <EuiFlexItem grow={false}>
           <EuiButton
             data-test-subj="aiopsClearSelectionBadge"

diff --git a/x-pack/packages/ml/aiops_log_rate_analysis/constants.ts b/x-pack/packages/ml/aiops_log_rate_analysis/constants.ts
@@ -39,3 +39,5 @@ export const EMBEDDABLE_LOG_RATE_ANALYSIS_TYPE = 'aiopsLogRateAnalysisEmbeddable
 
 /**  */
 export const LOG_RATE_ANALYSIS_DATA_VIEW_REF_NAME = 'aiopsLogRateAnalysisEmbeddableDataViewId';
+
+export const CASES_ATTACHMENT_LOG_RATE_ANALYSIS = 'aiopsLogRateAnalysisEmbeddable';
diff --git a/x-pack/plugins/aiops/public/cases/log_rate_analysis_attachment.tsx b/x-pack/plugins/aiops/public/cases/log_rate_analysis_attachment.tsx
@@ -0,0 +1,52 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { memoize } from 'lodash';
+import type { FieldFormatsStart } from '@kbn/field-formats-plugin/public';
+import type { PersistableStateAttachmentViewProps } from '@kbn/cases-plugin/public/client/attachment_framework/types';
+import { FIELD_FORMAT_IDS } from '@kbn/field-formats-plugin/common';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { EuiDescriptionList } from '@elastic/eui';
+import type {
+  LogRateAnalysisEmbeddableWrapper,
+  LogRateAnalysisEmbeddableWrapperProps,
+} from '../shared_components/log_rate_analysis_embeddable_wrapper';
+
+export const initComponent = memoize(
+  (fieldFormats: FieldFormatsStart, LogRateAnalysisComponent: LogRateAnalysisEmbeddableWrapper) => {
+    return React.memo((props: PersistableStateAttachmentViewProps) => {
+      const { persistableStateAttachmentState } = props;
+      const dataFormatter = fieldFormats.deserialize({
+        id: FIELD_FORMAT_IDS.DATE,
+      });
+      const inputProps =
+        persistableStateAttachmentState as unknown as LogRateAnalysisEmbeddableWrapperProps;
+
+      const listItems = [
+        {
+          title: (
+            <FormattedMessage
+              id="xpack.aiops.logRateAnalysis.cases.timeRangeLabel"
+              defaultMessage="Time range"
+            />
+          ),
+          description: `${dataFormatter.convert(
+            inputProps.timeRange.from
+          )} - ${dataFormatter.convert(inputProps.timeRange.to)}`,
+        },
+      ];
+
+      return (
+        <>
+          <EuiDescriptionList compressed type={'inline'} listItems={listItems} />
+          <LogRateAnalysisComponent {...inputProps} embeddingOrigin={'cases'} />
+        </>
+      );
+    });
+  }
+);
diff --git a/x-pack/plugins/aiops/public/cases/register_cases.tsx b/x-pack/plugins/aiops/public/cases/register_cases.tsx
@@ -12,8 +12,10 @@ import type { CasesPublicSetup } from '@kbn/cases-plugin/public';
 import type { CoreStart } from '@kbn/core/public';
 import { CASES_ATTACHMENT_CHANGE_POINT_CHART } from '@kbn/aiops-change-point-detection/constants';
 import { CASES_ATTACHMENT_LOG_PATTERN } from '@kbn/aiops-log-pattern-analysis/constants';
+import { CASES_ATTACHMENT_LOG_RATE_ANALYSIS } from '@kbn/aiops-log-rate-analysis/constants';
 import {
   getChangePointDetectionComponent,
+  getLogRateAnalysisEmbeddableWrapperComponent,
   getPatternAnalysisComponent,
 } from '../shared_components';
 import type { AiopsPluginStartDeps } from '../types';
@@ -47,6 +49,14 @@ export function registerCases(
         };
       }),
     }),
+    getAttachmentRemovalObject: () => ({
+      event: (
+        <FormattedMessage
+          id="xpack.aiops.changePointDetection.cases.attachmentRemovalEvent"
+          defaultMessage="removed change point chart"
+        />
+      ),
+    }),
   });
 
   const LogPatternAttachmentComponent = getPatternAnalysisComponent(coreStart, pluginStart);
@@ -71,5 +81,53 @@ export function registerCases(
         return { default: initComponent(pluginStart.fieldFormats, LogPatternAttachmentComponent) };
       }),
     }),
+    getAttachmentRemovalObject: () => ({
+      event: (
+        <FormattedMessage
+          id="xpack.aiops.logPatternAnalysis.cases.attachmentRemovalEvent"
+          defaultMessage="removed log pattern analysis"
+        />
+      ),
+    }),
+  });
+
+  const LogRateAnalysisEmbeddableWrapperComponent = getLogRateAnalysisEmbeddableWrapperComponent(
+    coreStart,
+    pluginStart
+  );
+
+  cases.attachmentFramework.registerPersistableState({
+    id: CASES_ATTACHMENT_LOG_RATE_ANALYSIS,
+    icon: 'machineLearningApp',
+    displayName: i18n.translate('xpack.aiops.logRateAnalysis.cases.attachmentName', {
+      defaultMessage: 'Log rate analysis',
+    }),
+    getAttachmentViewObject: () => ({
+      event: (
+        <FormattedMessage
+          id="xpack.aiops.logRateAnalysis.cases.attachmentEvent"
+          defaultMessage="added log rate analysis"
+        />
+      ),
+      timelineAvatar: 'machineLearningApp',
+      children: React.lazy(async () => {
+        const { initComponent } = await import('./log_rate_analysis_attachment');
+
+        return {
+          default: initComponent(
+            pluginStart.fieldFormats,
+            LogRateAnalysisEmbeddableWrapperComponent
+          ),
+        };
+      }),
+    }),
+    getAttachmentRemovalObject: () => ({
+      event: (
+        <FormattedMessage
+          id="xpack.aiops.logRateAnalysis.cases.attachmentRemovalEvent"
+          defaultMessage="removed log rate analysis"
+        />
+      ),
+    }),
   });
 }
diff --git a/...ublic/components/document_count_content/document_count_content/document_count_content.tsx b/...ublic/components/document_count_content/document_count_content/document_count_content.tsx
@@ -45,19 +45,25 @@ export const DocumentCountContent: FC<DocumentCountContentProps> = ({
   const { documentStats } = useAppSelector((s) => s.logRateAnalysis);
   const { sampleProbability, totalCount, documentCountStats } = documentStats;
 
+  const isCasesEmbedding = embeddingOrigin === AIOPS_EMBEDDABLE_ORIGIN.CASES;
+
+  const isEmbeddedInDashboardOrCases =
+    embeddingOrigin === AIOPS_EMBEDDABLE_ORIGIN.DASHBOARD || isCasesEmbedding;
+
   if (documentCountStats === undefined) {
-    return totalCount !== undefined && embeddingOrigin !== AIOPS_EMBEDDABLE_ORIGIN.DASHBOARD ? (
+    return totalCount !== undefined && !isEmbeddedInDashboardOrCases ? (
       <TotalCountHeader totalCount={totalCount} sampleProbability={sampleProbability} />
     ) : null;
   }
 
-  if (embeddingOrigin === AIOPS_EMBEDDABLE_ORIGIN.DASHBOARD) {
+  if (isEmbeddedInDashboardOrCases) {
     return (
       <DocumentCountChartRedux
         dependencies={{ data, uiSettings, fieldFormats, charts }}
         barColorOverride={barColorOverride}
         barHighlightColorOverride={barHighlightColorOverride}
         changePoint={documentCountStats.changePoint}
+        nonInteractive={isCasesEmbedding}
         {...docCountChartProps}
       />
     );
Original file line number	Diff line number	Diff line change
Expand Up		@@ -39,3 +39,5 @@ export const EMBEDDABLE_LOG_RATE_ANALYSIS_TYPE = 'aiopsLogRateAnalysisEmbeddable

		/** */
		export const LOG_RATE_ANALYSIS_DATA_VIEW_REF_NAME = 'aiopsLogRateAnalysisEmbeddableDataViewId';

		export const CASES_ATTACHMENT_LOG_RATE_ANALYSIS = 'aiopsLogRateAnalysisEmbeddable';