From d960b89f521a20986c0fc344e3df423a91944557 Mon Sep 17 00:00:00 2001 From: Shenoy Pratik Date: Thu, 7 Nov 2024 05:45:56 -0800 Subject: [PATCH] Use savedObjects client to fetch notebook visualizations (#2241) * Use savedObjects client to fetch notebook visualizations Signed-off-by: Shenoy Pratik * resolve comments Signed-off-by: Shenoy Pratik --------- Signed-off-by: Shenoy Pratik (cherry picked from commit 1e52e1de17b999461e572b395572f95f17f4cdef) --- .../paragraph_components/paragraphs.tsx | 117 ++++++++++++------ 1 file changed, 78 insertions(+), 39 deletions(-) diff --git a/public/components/notebooks/components/paragraph_components/paragraphs.tsx b/public/components/notebooks/components/paragraph_components/paragraphs.tsx index 73497618e8..7e71a8eee6 100644 --- a/public/components/notebooks/components/paragraph_components/paragraphs.tsx +++ b/public/components/notebooks/components/paragraph_components/paragraphs.tsx @@ -4,27 +4,32 @@ */ import { - EuiSmallButton, - EuiSmallButtonIcon, EuiComboBoxOptionOption, + EuiCompressedFormRow, EuiContextMenu, EuiContextMenuPanelDescriptor, EuiFlexGroup, EuiFlexItem, - EuiCompressedFormRow, EuiHorizontalRule, EuiIcon, EuiLink, EuiPanel, EuiPopover, + EuiSmallButton, + EuiSmallButtonIcon, EuiSpacer, EuiText, htmlIdGenerator, } from '@elastic/eui'; -import _ from 'lodash'; +import filter from 'lodash/filter'; import moment from 'moment'; import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react'; -import { CoreStart, MountPoint, SavedObjectsStart } from '../../../../../../../src/core/public'; +import { + CoreStart, + MountPoint, + SavedObjectsFindOptions, + SavedObjectsStart, +} from '../../../../../../../src/core/public'; import { DashboardContainerInput, DashboardStart, @@ -40,6 +45,7 @@ import { import { ParaType } from '../../../../../common/types/notebooks'; import { uiSettingsService } from '../../../../../common/utils'; import { dataSourceFilterFn } from '../../../../../common/utils/shared'; +import { coreRefs } from '../../../../framework/core_refs'; import PPLService from '../../../../services/requests/ppl'; import { SavedObjectsActions } from '../../../../services/saved_objects/saved_object_client/saved_objects_actions'; import { ObservabilitySavedVisualization } from '../../../../services/saved_objects/saved_object_client/types'; @@ -160,45 +166,78 @@ export const Paragraphs = forwardRef((props: ParagraphProps, ref) => { })); const fetchVisualizations = async () => { - let opt1: EuiComboBoxOptionOption[] = []; - let opt2: EuiComboBoxOptionOption[] = []; - await http - .get(`${NOTEBOOKS_API_PREFIX}/visualizations/${dataSourceMDSId ?? ''}`) - .then((res) => { - opt1 = res.savedVisualizations.map((vizObject) => ({ - label: vizObject.label, - key: vizObject.key, - className: 'VISUALIZATION', - })); - }) - .catch((err) => console.error('Fetching dashboard visualization issue', err.body.message)); + if (dataSourceEnabled) { + let opts: EuiComboBoxOptionOption[] = []; + const vizOptions: SavedObjectsFindOptions = { + type: 'visualization', + ...(coreRefs.application?.capabilities?.workspaces?.enabled + ? { workspaces: coreRefs.workspaces?.currentWorkspace$.getValue()?.name } + : {}), + }; + await coreRefs.savedObjectsClient + ?.find(vizOptions) + .then((res) => { + opts = res.savedObjects.map((vizObject) => ({ + label: vizObject.attributes.title, + key: vizObject.id, + className: 'VISUALIZATION', + })); + }) + .catch((error) => { + console.error('Failed to fetch visualizations', error); + }); + + const allVisualizations = [{ label: 'Dashboards Visualizations', options: opts }]; + setVisOptions(allVisualizations); - await SavedObjectsActions.getBulk({ - objectType: ['savedVisualization'], - }) - .then((res) => { - opt2 = res.observabilityObjectList - .filter((visualization) => !visualization.savedVisualization.application_id) - .map((visualization) => ({ - label: visualization.savedVisualization.name, - key: visualization.objectId, - className: 'OBSERVABILITY_VISUALIZATION', + const selectedObject = filter([...opts], { + key: para.visSavedObjId, + }); + if (selectedObject.length > 0) { + setVisType(selectedObject[0].className ?? 'VISUALIZATION'); + setSelectedVisOption(selectedObject); + } + } else { + let opt1: EuiComboBoxOptionOption[] = []; + let opt2: EuiComboBoxOptionOption[] = []; + await http + .get(`${NOTEBOOKS_API_PREFIX}/visualizations/${dataSourceMDSId ?? ''}`) + .then((res) => { + opt1 = res.savedVisualizations.map((vizObject) => ({ + label: vizObject.label, + key: vizObject.key, + className: 'VISUALIZATION', })); + }) + .catch((err) => console.error('Fetching dashboard visualization issue', err.body.message)); + + await SavedObjectsActions.getBulk({ + objectType: ['savedVisualization'], }) - .catch((err) => console.error('Fetching observability visualization issue', err)); + .then((res) => { + opt2 = res.observabilityObjectList + .filter((visualization) => !visualization.savedVisualization.application_id) + .map((visualization) => ({ + label: visualization.savedVisualization.name, + key: visualization.objectId, + className: 'OBSERVABILITY_VISUALIZATION', + })); + }) + .catch((err) => console.error('Fetching observability visualization issue', err)); - const allVisualizations = [ - { label: 'Dashboards Visualizations', options: opt1 }, - { label: 'Observability Visualizations', options: opt2 }, - ]; - setVisOptions(allVisualizations); + const allVisualizations = [ + { label: 'Dashboards Visualizations', options: opt1 }, + { label: 'Observability Visualizations', options: opt2 }, + ]; + setVisOptions(allVisualizations); - const selectedObject = _.filter([...opt1, ...opt2], { - key: para.visSavedObjId, - }); - if (selectedObject.length > 0) { - setVisType(selectedObject.className); - setSelectedVisOption(selectedObject); + const selectedObject = filter([...opt1, ...opt2], { + key: para.visSavedObjId, + }); + if (selectedObject.length > 0) { + setVisType(selectedObject[0].className ?? 'VISUALIZATION'); + setSelectedVisOption(selectedObject); + } } };