From 50a262692fc55ea513f1781eee9d14a7073f0368 Mon Sep 17 00:00:00 2001 From: Robert Jaszczurek <92210485+rbrtj@users.noreply.github.com> Date: Wed, 20 Nov 2024 01:29:40 +0100 Subject: [PATCH] [ML] AiOps: Action for adding Log Rate analysis embeddable to a dashboard (#200557) ## Summary Part of: [#197247](https://github.com/elastic/kibana/issues/197247) - Added the ability to add a Log Rate Analysis embeddable to a dashboard https://github.com/user-attachments/assets/37efd83e-9196-434d-a80d-9249623f3222 ### 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 --- .../document_count_content.tsx | 9 +- .../log_categorization/attachments_menu.tsx | 51 ++--- .../log_rate_analysis_attachments_menu.tsx | 176 ++++++++++++++++++ .../log_rate_analysis_content.tsx | 2 + .../application/aiops/log_rate_analysis.tsx | 1 + .../apps/aiops/log_rate_analysis.ts | 18 ++ .../services/aiops/log_rate_analysis_page.ts | 48 +++++ 7 files changed, 282 insertions(+), 23 deletions(-) create mode 100644 x-pack/plugins/aiops/public/components/log_rate_analysis/log_rate_analysis_content/log_rate_analysis_attachments_menu.tsx diff --git a/x-pack/plugins/aiops/public/components/document_count_content/document_count_content/document_count_content.tsx b/x-pack/plugins/aiops/public/components/document_count_content/document_count_content/document_count_content.tsx index 4dbf021e3b10b..9f4f6f1deb5bd 100644 --- a/x-pack/plugins/aiops/public/components/document_count_content/document_count_content/document_count_content.tsx +++ b/x-pack/plugins/aiops/public/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 = ({ barColorOverride, barHighlightColorOverride, + attachmentsMenu, ...docCountChartProps }) => { const { data, uiSettings, fieldFormats, charts, embeddingOrigin } = useAiopsAppContext(); @@ -64,7 +66,12 @@ export const DocumentCountContent: FC = ({ return ( - + + + + + {attachmentsMenu && {attachmentsMenu}} + (() => { + const panels = useMemo>(() => { return [ { id: 'attachMainPanel', @@ -205,26 +205,33 @@ export const AttachmentsMenu = ({ ]); return ( - - setIsActionMenuOpen(!isActionMenuOpen)} - /> - } - isOpen={isActionMenuOpen} - closePopover={() => setIsActionMenuOpen(false)} - panelPaddingSize="none" - anchorPosition="downRight" - > - - + <> + {!!panels[0]?.items?.length && ( + + setIsActionMenuOpen(!isActionMenuOpen)} + /> + } + isOpen={isActionMenuOpen} + closePopover={() => setIsActionMenuOpen(false)} + panelPaddingSize="none" + anchorPosition="downRight" + > + + + + )} {dashboardAttachmentReady ? ( ) : null} - + ); }; diff --git a/x-pack/plugins/aiops/public/components/log_rate_analysis/log_rate_analysis_content/log_rate_analysis_attachments_menu.tsx b/x-pack/plugins/aiops/public/components/log_rate_analysis/log_rate_analysis_content/log_rate_analysis_attachments_menu.tsx new file mode 100644 index 0000000000000..c8c9bad1568a4 --- /dev/null +++ b/x-pack/plugins/aiops/public/components/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 = { + 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>(() => { + 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: ( + + + + + setApplyTimeRange(e.target.checked)} + /> + + + { + setIsActionMenuOpen(false); + setDashboardAttachmentReady(true); + }} + > + + + + + ), + }, + ]; + }, [canEditDashboards, applyTimeRange]); + + return ( + <> + {!!panels[0]?.items?.length && ( + + setIsActionMenuOpen(!isActionMenuOpen)} + /> + } + isOpen={isActionMenuOpen} + closePopover={() => setIsActionMenuOpen(false)} + panelPaddingSize="none" + anchorPosition="downRight" + > + + + + )} + {dashboardAttachmentReady ? ( + setDashboardAttachmentReady(false)} + onSave={onSave} + /> + ) : null} + + ); +}; diff --git a/x-pack/plugins/aiops/public/components/log_rate_analysis/log_rate_analysis_content/log_rate_analysis_content.tsx b/x-pack/plugins/aiops/public/components/log_rate_analysis/log_rate_analysis_content/log_rate_analysis_content.tsx index 2821b59353b52..29ac8d0efffc8 100644 --- a/x-pack/plugins/aiops/public/components/log_rate_analysis/log_rate_analysis_content/log_rate_analysis_content.tsx +++ b/x-pack/plugins/aiops/public/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 = ({ barColorOverride={barColorOverride} barHighlightColorOverride={barHighlightColorOverride} barStyleAccessor={barStyleAccessor} + attachmentsMenu={} /> )} 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 index d24b5ab8498b0..d06c46cc6f71e 100644 --- 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 index 8ffbea4f1a0b0..e0178cb13fe9f 100644 --- 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 index 0f7b14e3e8be7..3da7659419f0f 100644 --- 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); + }, }; }