[8.x] [ML] AiOps: Action for adding Log Rate analysis embeddable to a…

… dashboard (elastic#200557) (elastic#200891) # Backport This will backport the following commits from `main` to `8.x`: - [[ML] AiOps: Action for adding Log Rate analysis embeddable to a dashboard (elastic#200557)](elastic#200557)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)
kibanamachine · Nov 20, 2024 · 336e6fe · 336e6fe
1 parent 2bfbf58
commit 336e6fe
Show file tree

Hide file tree

Showing 8 changed files with 283 additions and 24 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: 16526
+  aiops: 16670
   alerting: 106936
   apm: 64385
   banners: 17946

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
@@ -31,11 +31,13 @@ export interface DocumentCountContentProps {
   barStyleAccessor?: BarStyleAccessor;
   baselineAnnotationStyle?: RectAnnotationSpec['style'];
   deviationAnnotationStyle?: RectAnnotationSpec['style'];
+  attachmentsMenu?: React.ReactNode;
 }
 
 export const DocumentCountContent: FC<DocumentCountContentProps> = ({
   barColorOverride,
   barHighlightColorOverride,
+  attachmentsMenu,
   ...docCountChartProps
 }) => {
   const { data, uiSettings, fieldFormats, charts, embeddingOrigin } = useAiopsAppContext();
@@ -64,7 +66,12 @@ export const DocumentCountContent: FC<DocumentCountContentProps> = ({
   return (
     <EuiFlexGroup gutterSize="m" direction="column">
       <EuiFlexItem>
-        <TotalCountHeader totalCount={totalCount} sampleProbability={sampleProbability} />
+        <EuiFlexGroup alignItems="center" justifyContent="spaceBetween">
+          <EuiFlexItem grow={false}>
+            <TotalCountHeader totalCount={totalCount} sampleProbability={sampleProbability} />
+          </EuiFlexItem>
+          {attachmentsMenu && <EuiFlexItem grow={false}>{attachmentsMenu}</EuiFlexItem>}
+        </EuiFlexGroup>
       </EuiFlexItem>
       <EuiFlexItem>
         <DocumentCountChartRedux

diff --git a/x-pack/plugins/aiops/public/components/log_categorization/attachments_menu.tsx b/x-pack/plugins/aiops/public/components/log_categorization/attachments_menu.tsx
@@ -110,7 +110,7 @@ export const AttachmentsMenu = ({
     ]
   );
 
-  const panels = useMemo<EuiContextMenuProps['panels']>(() => {
+  const panels = useMemo<Exclude<EuiContextMenuProps['panels'], undefined>>(() => {
     return [
       {
         id: 'attachMainPanel',
@@ -205,26 +205,33 @@ export const AttachmentsMenu = ({
   ]);
 
   return (
-    <EuiFlexItem>
-      <EuiPopover
-        button={
-          <EuiButtonIcon
-            data-test-subj="aiopsLogPatternAnalysisAttachmentsMenuButton"
-            aria-label={i18n.translate('xpack.aiops.logCategorization.attachmentsMenuAriaLabel', {
-              defaultMessage: 'Attachments',
-            })}
-            iconType="boxesHorizontal"
-            color="text"
-            onClick={() => setIsActionMenuOpen(!isActionMenuOpen)}
-          />
-        }
-        isOpen={isActionMenuOpen}
-        closePopover={() => setIsActionMenuOpen(false)}
-        panelPaddingSize="none"
-        anchorPosition="downRight"
-      >
-        <EuiContextMenu panels={panels} initialPanelId="attachMainPanel" />
-      </EuiPopover>
+    <>
+      {!!panels[0]?.items?.length && (
+        <EuiFlexItem>
+          <EuiPopover
+            button={
+              <EuiButtonIcon
+                data-test-subj="aiopsLogPatternAnalysisAttachmentsMenuButton"
+                aria-label={i18n.translate(
+                  'xpack.aiops.logCategorization.attachmentsMenuAriaLabel',
+                  {
+                    defaultMessage: 'Attachments',
+                  }
+                )}
+                iconType="boxesHorizontal"
+                color="text"
+                onClick={() => setIsActionMenuOpen(!isActionMenuOpen)}
+              />
+            }
+            isOpen={isActionMenuOpen}
+            closePopover={() => setIsActionMenuOpen(false)}
+            panelPaddingSize="none"
+            anchorPosition="downRight"
+          >
+            <EuiContextMenu panels={panels} initialPanelId="attachMainPanel" />
+          </EuiPopover>
+        </EuiFlexItem>
+      )}
       {dashboardAttachmentReady ? (
         <SavedObjectSaveModalDashboard
           canSaveByReference={false}
@@ -238,6 +245,6 @@ export const AttachmentsMenu = ({
           onSave={onSave}
         />
       ) : null}
-    </EuiFlexItem>
+    </>
   );
 };
diff --git a/...onents/log_rate_analysis/log_rate_analysis_content/log_rate_analysis_attachments_menu.tsx b/...onents/log_rate_analysis/log_rate_analysis_content/log_rate_analysis_attachments_menu.tsx
@@ -0,0 +1,176 @@
+/*
+ * 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 type { SaveModalDashboardProps } from '@kbn/presentation-util-plugin/public';
+import { LazySavedObjectSaveModalDashboard } from '@kbn/presentation-util-plugin/public';
+import { withSuspense } from '@kbn/shared-ux-utility';
+import React, { useState, useCallback, useMemo } from 'react';
+import { useTimeRangeUpdates } from '@kbn/ml-date-picker';
+import { EMBEDDABLE_LOG_RATE_ANALYSIS_TYPE } from '@kbn/aiops-log-rate-analysis/constants';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { i18n } from '@kbn/i18n';
+import type { EuiContextMenuProps } from '@elastic/eui';
+import {
+  EuiButton,
+  EuiButtonIcon,
+  EuiContextMenu,
+  EuiFlexItem,
+  EuiForm,
+  EuiFormRow,
+  EuiPanel,
+  EuiPopover,
+  EuiSpacer,
+  EuiSwitch,
+} from '@elastic/eui';
+import { useDataSource } from '../../../hooks/use_data_source';
+import type { LogRateAnalysisEmbeddableState } from '../../../embeddables/log_rate_analysis/types';
+import { useAiopsAppContext } from '../../../hooks/use_aiops_app_context';
+
+const SavedObjectSaveModalDashboard = withSuspense(LazySavedObjectSaveModalDashboard);
+
+export const LogRateAnalysisAttachmentsMenu = () => {
+  const {
+    application: { capabilities },
+    embeddable,
+  } = useAiopsAppContext();
+  const { dataView } = useDataSource();
+
+  const [applyTimeRange, setApplyTimeRange] = useState(false);
+  const [isActionMenuOpen, setIsActionMenuOpen] = useState(false);
+  const [dashboardAttachmentReady, setDashboardAttachmentReady] = useState(false);
+
+  const timeRange = useTimeRangeUpdates();
+
+  const canEditDashboards = capabilities.dashboard.createNew;
+
+  const onSave: SaveModalDashboardProps['onSave'] = useCallback(
+    ({ dashboardId, newTitle, newDescription }) => {
+      const stateTransfer = embeddable!.getStateTransfer();
+
+      const embeddableInput: Partial<LogRateAnalysisEmbeddableState> = {
+        title: newTitle,
+        description: newDescription,
+        dataViewId: dataView.id,
+        hidePanelTitles: false,
+        ...(applyTimeRange && { timeRange }),
+      };
+
+      const state = {
+        input: embeddableInput,
+        type: EMBEDDABLE_LOG_RATE_ANALYSIS_TYPE,
+      };
+
+      const path = dashboardId === 'new' ? '#/create' : `#/view/${dashboardId}`;
+
+      stateTransfer.navigateToWithEmbeddablePackage('dashboards', { state, path });
+    },
+    [dataView.id, embeddable, applyTimeRange, timeRange]
+  );
+
+  const panels = useMemo<Exclude<EuiContextMenuProps['panels'], undefined>>(() => {
+    return [
+      {
+        id: 'attachMainPanel',
+        size: 's',
+        items: [
+          ...(canEditDashboards
+            ? [
+                {
+                  name: i18n.translate('xpack.aiops.logRateAnalysis.addToDashboardTitle', {
+                    defaultMessage: 'Add to dashboard',
+                  }),
+                  panel: 'attachToDashboardPanel',
+                  'data-test-subj': 'aiopsLogRateAnalysisAttachToDashboardButton',
+                },
+              ]
+            : []),
+        ],
+      },
+      {
+        id: 'attachToDashboardPanel',
+        size: 's',
+        title: i18n.translate('xpack.aiops.logRateAnalysis.attachToDashboardTitle', {
+          defaultMessage: 'Add to dashboard',
+        }),
+        content: (
+          <EuiPanel paddingSize="s">
+            <EuiSpacer size="s" />
+            <EuiForm>
+              <EuiFormRow>
+                <EuiSwitch
+                  label={i18n.translate('xpack.aiops.logRateAnalysis.applyTimeRangeLabel', {
+                    defaultMessage: 'Apply time range',
+                  })}
+                  checked={applyTimeRange}
+                  onChange={(e) => setApplyTimeRange(e.target.checked)}
+                />
+              </EuiFormRow>
+              <EuiSpacer size="s" />
+              <EuiButton
+                size="s"
+                data-test-subj="aiopsLogRateAnalysisAttachToDashboardSubmitButton"
+                fill
+                fullWidth
+                type={'submit'}
+                onClick={() => {
+                  setIsActionMenuOpen(false);
+                  setDashboardAttachmentReady(true);
+                }}
+              >
+                <FormattedMessage
+                  id="xpack.aiops.logRateAnalysis.attachToDashboardSubmitButtonLabel"
+                  defaultMessage="Add to dashboard"
+                />
+              </EuiButton>
+            </EuiForm>
+          </EuiPanel>
+        ),
+      },
+    ];
+  }, [canEditDashboards, applyTimeRange]);
+
+  return (
+    <>
+      {!!panels[0]?.items?.length && (
+        <EuiFlexItem>
+          <EuiPopover
+            button={
+              <EuiButtonIcon
+                data-test-subj="aiopsLogRateAnalysisAttachmentsMenuButton"
+                aria-label={i18n.translate('xpack.aiops.logRateAnalysis.attachmentsMenuAriaLabel', {
+                  defaultMessage: 'Attachments',
+                })}
+                iconType="boxesHorizontal"
+                color="text"
+                onClick={() => setIsActionMenuOpen(!isActionMenuOpen)}
+              />
+            }
+            isOpen={isActionMenuOpen}
+            closePopover={() => setIsActionMenuOpen(false)}
+            panelPaddingSize="none"
+            anchorPosition="downRight"
+          >
+            <EuiContextMenu panels={panels} initialPanelId="attachMainPanel" />
+          </EuiPopover>
+        </EuiFlexItem>
+      )}
+      {dashboardAttachmentReady ? (
+        <SavedObjectSaveModalDashboard
+          canSaveByReference={false}
+          objectType={i18n.translate('xpack.aiops.logRateAnalysis.objectTypeLabel', {
+            defaultMessage: 'Log rate analysis',
+          })}
+          documentInfo={{
+            title: 'Log rate analysis',
+          }}
+          onClose={() => setDashboardAttachmentReady(false)}
+          onSave={onSave}
+        />
+      ) : null}
+    </>
+  );
+};
diff --git a/...blic/components/log_rate_analysis/log_rate_analysis_content/log_rate_analysis_content.tsx b/...blic/components/log_rate_analysis/log_rate_analysis_content/log_rate_analysis_content.tsx
@@ -38,6 +38,7 @@ import {
   type LogRateAnalysisResultsData,
 } from '../log_rate_analysis_results';
 import { useAiopsAppContext } from '../../../hooks/use_aiops_app_context';
+import { LogRateAnalysisAttachmentsMenu } from './log_rate_analysis_attachments_menu';
 
 export const DEFAULT_SEARCH_QUERY: estypes.QueryDslQueryContainer = { match_all: {} };
 const DEFAULT_SEARCH_BAR_QUERY: estypes.QueryDslQueryContainer = {
@@ -216,6 +217,7 @@ export const LogRateAnalysisContent: FC<LogRateAnalysisContentProps> = ({
           barColorOverride={barColorOverride}
           barHighlightColorOverride={barHighlightColorOverride}
           barStyleAccessor={barStyleAccessor}
+          attachmentsMenu={<LogRateAnalysisAttachmentsMenu />}
         />
       )}
       <EuiSpacer size="m" />

diff --git a/x-pack/plugins/ml/public/application/aiops/log_rate_analysis.tsx b/x-pack/plugins/ml/public/application/aiops/log_rate_analysis.tsx
@@ -59,6 +59,7 @@ export const LogRateAnalysisPage: FC = () => {
               'uiSettings',
               'unifiedSearch',
               'observabilityAIAssistant',
+              'embeddable',
             ]),
           }}
         />

diff --git a/x-pack/test/functional/apps/aiops/log_rate_analysis.ts b/x-pack/test/functional/apps/aiops/log_rate_analysis.ts
@@ -348,6 +348,24 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
           await elasticChart.setNewChartUiDebugFlag(true);
         });
 
+        it(`${testData.suiteTitle} attaches log rate analysis to a dashboard`, async () => {
+          await aiops.logRateAnalysisPage.navigateToDataViewSelection();
+
+          await ml.testExecution.logTestStep(
+            `${testData.suiteTitle} loads the log rate analysis page with selected data source`
+          );
+          await ml.jobSourceSelection.selectSourceForLogRateAnalysis(
+            testData.sourceIndexOrSavedSearch
+          );
+
+          await ml.testExecution.logTestStep(
+            `${testData.suiteTitle} starting dashboard attachment process`
+          );
+          await aiops.logRateAnalysisPage.attachToDashboard();
+
+          await ml.navigation.navigateToMl();
+        });
+
         runTests(testData);
       });
     }

diff --git a/x-pack/test/functional/services/aiops/log_rate_analysis_page.ts b/x-pack/test/functional/services/aiops/log_rate_analysis_page.ts
@@ -21,6 +21,7 @@ export function LogRateAnalysisPageProvider({ getService, getPageObject }: FtrPr
   const testSubjects = getService('testSubjects');
   const retry = getService('retry');
   const header = getPageObject('header');
+  const dashboardPage = getPageObject('dashboard');
 
   return {
     async assertTimeRangeSelectorSectionExists() {
@@ -387,5 +388,52 @@ export function LogRateAnalysisPageProvider({ getService, getPageObject }: FtrPr
         { location: handle, offset: { x: dragAndDropOffsetPx, y: 0 } }
       );
     },
+
+    async openAttachmentsMenu() {
+      await testSubjects.click('aiopsLogRateAnalysisAttachmentsMenuButton');
+    },
+
+    async clickAttachToDashboard() {
+      await testSubjects.click('aiopsLogRateAnalysisAttachToDashboardButton');
+    },
+
+    async confirmAttachToDashboard() {
+      await testSubjects.click('aiopsLogRateAnalysisAttachToDashboardSubmitButton');
+    },
+
+    async completeSaveToDashboardForm(createNew?: boolean) {
+      const dashboardSelector = await testSubjects.find('add-to-dashboard-options');
+      if (createNew) {
+        const label = await dashboardSelector.findByCssSelector(
+          `label[for="new-dashboard-option"]`
+        );
+        await label.click();
+      }
+
+      await testSubjects.click('confirmSaveSavedObjectButton');
+      await retry.waitForWithTimeout('Save modal to disappear', 1000, () =>
+        testSubjects
+          .missingOrFail('confirmSaveSavedObjectButton')
+          .then(() => true)
+          .catch(() => false)
+      );
+
+      // make sure the dashboard page actually loaded
+      const dashboardItemCount = await dashboardPage.getSharedItemsCount();
+      expect(dashboardItemCount).to.not.eql(undefined);
+
+      const embeddable = await testSubjects.find('aiopsEmbeddableLogRateAnalysis', 30 * 1000);
+      expect(await embeddable.isDisplayed()).to.eql(
+        true,
+        'Log rate analysis chart should be displayed in dashboard'
+      );
+    },
+
+    async attachToDashboard() {
+      await this.openAttachmentsMenu();
+      await this.clickAttachToDashboard();
+      await this.confirmAttachToDashboard();
+      await this.completeSaveToDashboardForm(true);
+    },
   };
 }