From fa45fd8149e6860553c52ff6e76c05f03998e687 Mon Sep 17 00:00:00 2001 From: Amit Galitzky Date: Thu, 25 May 2023 17:22:59 -0700 Subject: [PATCH] fixing dependency and notifcations issues Signed-off-by: Amit Galitzky --- .../AnywhereParentFlyout.tsx | 7 +-- .../AnywhereParentFlyout/constants.ts | 13 +++++ .../containers/AssociatedDetectors.tsx | 53 ++++++++----------- .../AddAnomalyDetector.tsx | 47 +++++++++++----- .../containers/AssociateExisting.tsx | 40 +++++++------- .../CreateAnomalyDetector/styles.scss | 10 ++++ public/plugin.ts | 2 + public/services.ts | 8 ++- public/utils/contextMenu/getActions.tsx | 5 +- 9 files changed, 115 insertions(+), 70 deletions(-) create mode 100644 public/components/FeatureAnywhereContextMenu/AnywhereParentFlyout/constants.ts diff --git a/public/components/FeatureAnywhereContextMenu/AnywhereParentFlyout/AnywhereParentFlyout.tsx b/public/components/FeatureAnywhereContextMenu/AnywhereParentFlyout/AnywhereParentFlyout.tsx index 8e77299d..5ab72b2d 100644 --- a/public/components/FeatureAnywhereContextMenu/AnywhereParentFlyout/AnywhereParentFlyout.tsx +++ b/public/components/FeatureAnywhereContextMenu/AnywhereParentFlyout/AnywhereParentFlyout.tsx @@ -7,6 +7,7 @@ import { get } from 'lodash'; import AssociatedDetectors from '../AssociatedDetectors/containers/AssociatedDetectors'; import { getEmbeddable } from '../../../../public/services'; import AddAnomalyDetector from '../CreateAnomalyDetector'; +import { FLYOUT_MODES } from './constants'; const AnywhereParentFlyout = ({ startingFlyout, ...props }) => { const embeddable = getEmbeddable().getEmbeddableFactory; @@ -18,9 +19,9 @@ const AnywhereParentFlyout = ({ startingFlyout, ...props }) => { const [selectedDetector, setSelectedDetector] = useState(undefined); const AnywhereFlyout = { - create: AddAnomalyDetector, - associated: AssociatedDetectors, - existing: AddAnomalyDetector, + [FLYOUT_MODES.create]: AddAnomalyDetector, + [FLYOUT_MODES.associated]: AssociatedDetectors, + [FLYOUT_MODES.existing]: AddAnomalyDetector, }[mode]; return ( diff --git a/public/components/FeatureAnywhereContextMenu/AnywhereParentFlyout/constants.ts b/public/components/FeatureAnywhereContextMenu/AnywhereParentFlyout/constants.ts new file mode 100644 index 00000000..fa470962 --- /dev/null +++ b/public/components/FeatureAnywhereContextMenu/AnywhereParentFlyout/constants.ts @@ -0,0 +1,13 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +//created: Flyout for creating a new anomaly detector from a visualization +//associated: Flyout for listing all the associated detectors to the given visualization +//existing: Flyout for associating existing detectors with the current visualizations +export enum FLYOUT_MODES { + create = 'create', + associated = 'associated', + existing = 'existing', +} diff --git a/public/components/FeatureAnywhereContextMenu/AssociatedDetectors/containers/AssociatedDetectors.tsx b/public/components/FeatureAnywhereContextMenu/AssociatedDetectors/containers/AssociatedDetectors.tsx index d5f755da..69f299cc 100644 --- a/public/components/FeatureAnywhereContextMenu/AssociatedDetectors/containers/AssociatedDetectors.tsx +++ b/public/components/FeatureAnywhereContextMenu/AssociatedDetectors/containers/AssociatedDetectors.tsx @@ -24,6 +24,7 @@ import { DetectorListItem } from '../../../../models/interfaces'; import { getSavedFeatureAnywhereLoader, getNotifications, + getUISettings, } from '../../../../services'; import { GET_ALL_DETECTORS_QUERY_PARAMS, @@ -39,7 +40,11 @@ import { EmptyAssociatedDetectorMessage, ConfirmUnlinkDetectorModal, } from '../components'; -import { ISavedAugmentVis } from '../../../../../../../src/plugins/vis_augmenter/public'; +import { + ISavedAugmentVis, + SavedAugmentVisLoader, + getAugmentVisSavedObjs, +} from '../../../../../../../src/plugins/vis_augmenter/public'; import { ASSOCIATED_DETECTOR_ACTION } from '../utils/constants'; interface ConfirmModalState { @@ -82,8 +87,10 @@ function AssociatedDetectors({ embeddable, closeFlyout, setMode }) { ); // Establish savedObjectLoader for all operations on vis_augment saved objects - const savedObjectLoader: SavedObjectLoader = getSavedFeatureAnywhereLoader(); + const savedObjectLoader: SavedAugmentVisLoader = + getSavedFeatureAnywhereLoader(); + const uiSettings = getUISettings(); const notifications = getNotifications(); useEffect(() => { @@ -127,15 +134,12 @@ function AssociatedDetectors({ embeddable, closeFlyout, setMode }) { // Handles all changes in the assoicated detectors such as unlinking or new detectors associated useEffect(() => { - // Gets all augmented saved objects - savedObjectLoader - .findAll() - .then((resp: any) => { - if (resp != undefined) { - const savedAugmentObjectsArr: ISavedAugmentVis[] = get( - resp, - 'hits', - [] + // Gets all augmented saved objects that are associated to the given visualization + getAugmentVisSavedObjs(embeddable.vis.id, savedObjectLoader, uiSettings) + .then((savedAugmentObjectsArr: any) => { + if (savedAugmentObjectsArr != undefined) { + console.log( + 'savedAugmentObjectsArr: ' + JSON.stringify(savedAugmentObjectsArr) ); const curSelectedDetectors = getAssociatedDetectors( Object.values(allDetectors), @@ -156,14 +160,8 @@ function AssociatedDetectors({ embeddable, closeFlyout, setMode }) { // that are associated to the current visualization const getAssociatedDetectors = ( detectors: DetectorListItem[], - savedAugmentObjects: ISavedAugmentVis[] + savedAugmentForThisVisualization: ISavedAugmentVis[] ) => { - // Filter all savedAugmentObjects that aren't linked to the specific visualization - const savedAugmentForThisVisualization: ISavedAugmentVis[] = - savedAugmentObjects.filter( - (savedObj) => get(savedObj, 'visId', '') === embeddable.vis.id - ); - // Map all detector IDs for all the found augmented vis objects const savedAugmentDetectorsSet = new Set( savedAugmentForThisVisualization.map((savedObject) => @@ -180,18 +178,13 @@ function AssociatedDetectors({ embeddable, closeFlyout, setMode }) { const onUnlinkDetector = async () => { setIsLoadingFinalDetectors(true); - await savedObjectLoader.findAll().then(async (resp: any) => { - if (resp != undefined) { - // gets all the saved object for this visualization - const savedAugmentForThisVisualization: ISavedAugmentVis[] = get( - resp, - 'hits', - [] as ISavedAugmentVis[] - ).filter( - (savedObj: ISavedAugmentVis[]) => - get(savedObj, 'visId', '') === embeddable.vis.id - ); - + // Gets all augmented saved objects that are associated to the given visualization + await getAugmentVisSavedObjs( + embeddable.vis.id, + savedObjectLoader, + uiSettings + ).then(async (savedAugmentForThisVisualization: any) => { + if (savedAugmentForThisVisualization != undefined) { // find saved augment object matching detector we want to unlink // There should only be one detector and vis pairing const savedAugmentToUnlink = savedAugmentForThisVisualization.find( diff --git a/public/components/FeatureAnywhereContextMenu/CreateAnomalyDetector/AddAnomalyDetector.tsx b/public/components/FeatureAnywhereContextMenu/CreateAnomalyDetector/AddAnomalyDetector.tsx index 7b8cb8a8..1245518e 100644 --- a/public/components/FeatureAnywhereContextMenu/CreateAnomalyDetector/AddAnomalyDetector.tsx +++ b/public/components/FeatureAnywhereContextMenu/CreateAnomalyDetector/AddAnomalyDetector.tsx @@ -31,6 +31,7 @@ import { createAugmentVisSavedObject, ISavedAugmentVis, ISavedPluginResource, + SavedAugmentVisLoader, VisLayerExpressionFn, VisLayerTypes, } from '../../../../../../src/plugins/vis_augmenter/public'; @@ -83,7 +84,12 @@ import { DEFAULT_SHINGLE_SIZE, MAX_FEATURE_NUM, } from '../../../../public/utils/constants'; -import { getNotifications, getUiActions } from '../../../../public/services'; +import { + getNotifications, + getSavedFeatureAnywhereLoader, + getUISettings, + getUiActions, +} from '../../../../public/services'; import { prettifyErrorMessage } from '../../../../server/utils/helpers'; import { ORIGIN_PLUGIN_VIS_LAYER, @@ -93,8 +99,7 @@ import { import { formikToDetectorName, visFeatureListToFormik } from './helpers'; import { AssociateExisting } from './AssociateExisting'; import { mountReactNode } from '../../../../../../src/core/public/utils'; -import { CoreServicesContext } from '../../../../public/components/CoreServices/CoreServices'; -import { CoreStart } from '../../../../../../src/core/public'; +import { FLYOUT_MODES } from '../AnywhereParentFlyout/constants'; function AddAnomalyDetector({ embeddable, @@ -160,6 +165,10 @@ function AddAnomalyDetector({ } }; + const uiSettings = getUISettings(); + const savedObjectLoader: SavedAugmentVisLoader = + getSavedFeatureAnywhereLoader(); + const getAugmentVisSavedObject = (detectorId: string) => { const fn = { type: VisLayerTypes.PointInTimeEvents, @@ -210,11 +219,14 @@ function AddAnomalyDetector({ }); const detectorId = response.response.id; - const augmentVisSavedObjectToCreate: ISavedAugmentVis = getAugmentVisSavedObject(detectorId); - createAugmentVisSavedObject(augmentVisSavedObjectToCreate) + createAugmentVisSavedObject( + augmentVisSavedObjectToCreate, + uiSettings, + savedObjectLoader + ) .then((savedObject: any) => { savedObject .save({}) @@ -230,12 +242,14 @@ function AddAnomalyDetector({ text: mountReactNode( getEverythingSuccessfulButton(detectorId, shingleSize) ), + className: 'createdAndAssociatedSuccessToast', + toastLifeTimeMs: 3000000, }); closeFlyout(); }) .catch((error) => { console.error( - `Error associating selected detector: ${error}` + `Error associating selected detector in save process: ${error}` ); notifications.toasts.addDanger( prettifyErrorMessage( @@ -248,6 +262,9 @@ function AddAnomalyDetector({ }); }) .catch((error) => { + console.error( + `Error associating selected detector in create process: ${error}` + ); notifications.toasts.addDanger( prettifyErrorMessage( `Error associating selected detector in create process: ${error}` @@ -294,16 +311,16 @@ function AddAnomalyDetector({ initializing process takes approximately 1 minute if you have data in each of the last {32 + shingleSize} consecutive intervals.

- {alertingExists(detectorId) ? ( + {alertingExists() ? ( -

Set up alerts to be notifified of any anomalies.

+

Set up alerts to be notified of any anomalies.
openAlerting(detectorId)}> Set up alerts - {' '} +
@@ -334,7 +351,11 @@ function AddAnomalyDetector({ const augmentVisSavedObjectToCreate: ISavedAugmentVis = getAugmentVisSavedObject(detector.id); - createAugmentVisSavedObject(augmentVisSavedObjectToCreate) + createAugmentVisSavedObject( + augmentVisSavedObjectToCreate, + uiSettings, + savedObjectLoader + ) .then((savedObject: any) => { savedObject .save({}) @@ -454,14 +475,14 @@ function AddAnomalyDetector({ ))} - {mode === 'existing' && ( + {mode === FLYOUT_MODES.existing && ( )} - {mode === 'create' && ( + {mode === FLYOUT_MODES.create && (

@@ -831,7 +852,7 @@ function AddAnomalyDetector({ Cancel - {mode === 'existing' ? ( + {mode === FLYOUT_MODES.existing ? ( state.ad.requesting ); + const uiSettings = getUISettings(); const [isLoadingFinalDetectors, setIsLoadingFinalDetectors] = useState(true); const isLoading = isRequestingFromES || isLoadingFinalDetectors; @@ -69,7 +76,8 @@ export function AssociateExisting( ] = useState([] as DetectorListItem[]); // Establish savedObjectLoader for all operations on vis augmented saved objects - const savedObjectLoader: SavedObjectLoader = getSavedFeatureAnywhereLoader(); + const savedObjectLoader: SavedAugmentVisLoader = + getSavedFeatureAnywhereLoader(); useEffect(() => { if ( @@ -89,14 +97,13 @@ export function AssociateExisting( // Handle all changes in the assoicated detectors such as unlinking or new detectors associated useEffect(() => { - // Gets all augmented saved objects - savedObjectLoader.findAll().then((resp: any) => { - if (resp != undefined) { - const savedAugmentObjectsArr: ISavedAugmentVis[] = get( - resp, - 'hits', - [] - ); + // Gets all augmented saved objects for the given visualization + getAugmentVisSavedObjs( + associateExistingProps.embeddableVisId, + savedObjectLoader, + uiSettings + ).then((savedAugmentObjectsArr: any) => { + if (savedAugmentObjectsArr != undefined) { const curDetectorsToDisplayOnList = getExistingDetectorsAvailableToAssociate( Object.values(allDetectors), @@ -112,15 +119,8 @@ export function AssociateExisting( // that are associated to the current visualization const getExistingDetectorsAvailableToAssociate = ( detectors: DetectorListItem[], - savedAugmentObjects: ISavedAugmentVis[] + savedAugmentForThisVisualization: ISavedAugmentVis[] ) => { - // Filter all savedAugmentObjects that aren't linked to the specific visualization - const savedAugmentForThisVisualization: ISavedAugmentVis[] = - savedAugmentObjects.filter( - (savedObj) => - get(savedObj, 'visId', '') === associateExistingProps.embeddableVisId - ); - // Map all detector IDs for all the found augmented vis objects const savedAugmentDetectorsSet = new Set( savedAugmentForThisVisualization.map((savedObject) => diff --git a/public/components/FeatureAnywhereContextMenu/CreateAnomalyDetector/styles.scss b/public/components/FeatureAnywhereContextMenu/CreateAnomalyDetector/styles.scss index bf457fc5..e16e3895 100644 --- a/public/components/FeatureAnywhereContextMenu/CreateAnomalyDetector/styles.scss +++ b/public/components/FeatureAnywhereContextMenu/CreateAnomalyDetector/styles.scss @@ -56,3 +56,13 @@ height: 100%; min-height: 40px; } + +.euiGlobalToastList { + width: 650px; +} + +.createdAndAssociatedSuccessToast { + width: 550px; + position: relative; + right: 15px; +} diff --git a/public/plugin.ts b/public/plugin.ts index 29c2b859..83fd40eb 100644 --- a/public/plugin.ts +++ b/public/plugin.ts @@ -33,6 +33,7 @@ import { setOverlays, setSavedFeatureAnywhereLoader, setUiActions, + setUISettings, } from './services'; import { AnomalyDetectionOpenSearchDashboardsPluginStart } from 'public'; import { @@ -112,6 +113,7 @@ export class AnomalyDetectionOpenSearchDashboardsPlugin core: CoreStart, { embeddable, visAugmenter, uiActions }: AnomalyDetectionStartDeps ): AnomalyDetectionOpenSearchDashboardsPluginStart { + setUISettings(core.uiSettings); setEmbeddable(embeddable); setOverlays(core.overlays); setSavedFeatureAnywhereLoader(visAugmenter.savedAugmentVisLoader); diff --git a/public/services.ts b/public/services.ts index cfdf7be8..7e0d7843 100644 --- a/public/services.ts +++ b/public/services.ts @@ -5,16 +5,17 @@ import { CoreStart, + IUiSettingsClient, NotificationsStart, OverlayStart, } from '../../../src/core/public'; import { EmbeddableStart } from '../../../src/plugins/embeddable/public'; import { createGetterSetter } from '../../../src/plugins/opensearch_dashboards_utils/public'; -import { SavedObjectLoader } from '../../../src/plugins/saved_objects/public'; import { UiActionsStart } from '../../../src/plugins/ui_actions/public'; +import { SavedAugmentVisLoader } from '../../../src/plugins/vis_augmenter/public'; export const [getSavedFeatureAnywhereLoader, setSavedFeatureAnywhereLoader] = - createGetterSetter('savedFeatureAnywhereLoader'); + createGetterSetter('savedFeatureAnywhereLoader'); export const [getClient, setClient] = createGetterSetter('http'); @@ -30,3 +31,6 @@ export const [getNotifications, setNotifications] = export const [getUiActions, setUiActions] = createGetterSetter('UIActions'); + +export const [getUISettings, setUISettings] = + createGetterSetter('UISettings'); diff --git a/public/utils/contextMenu/getActions.tsx b/public/utils/contextMenu/getActions.tsx index 0c1302e4..cccfd399 100644 --- a/public/utils/contextMenu/getActions.tsx +++ b/public/utils/contextMenu/getActions.tsx @@ -15,6 +15,7 @@ import configureStore from '../../redux/configureStore'; import DocumentationTitle from '../../components/FeatureAnywhereContextMenu/DocumentationTitle/containers/DocumentationTitle'; import { AD_DOCS_LINK, APM_TRACE } from '../constants'; import { getClient, getOverlays } from '../../../public/services'; +import { FLYOUT_MODES } from '../../../public/components/FeatureAnywhereContextMenu/AnywhereParentFlyout/constants'; // This is used to create all actions in the same context menu const grouping: Action['grouping'] = [ @@ -58,7 +59,7 @@ export const getActions = () => { ), icon: 'plusInCircle' as EuiIconType, order: 100, - onClick: getOnClick('create'), + onClick: getOnClick(FLYOUT_MODES.create), }, { grouping, @@ -71,7 +72,7 @@ export const getActions = () => { ), icon: 'gear' as EuiIconType, order: 99, - onClick: getOnClick('associated'), + onClick: getOnClick(FLYOUT_MODES.associated), }, { id: 'documentationAnomalyDetector',