Update availabilityVizId if visualization is removed from panel (#732)

Signed-off-by: Eugene Lee <[email protected]>

Author: eugenesk24

dashboards-observability/public/components/application_analytics/components/application.tsx

@@ -24,10 +24,10 @@ import PPLService from 'public/services/requests/ppl';
 import SavedObjects from 'public/services/saved_objects/event_analytics/saved_objects';
 import TimestampUtils from 'public/services/timestamp/timestamp';
 import React, { ReactChild, useEffect, useState } from 'react';
-import { uniqueId } from 'lodash';
 import { useHistory } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
 import { last } from 'lodash';
+import { VisualizationType } from 'common/types/custom_panels';
 import { TracesContent } from '../../../components/trace_analytics/components/traces/traces_content';
 import { DashboardContent } from '../../../components/trace_analytics/components/dashboard/dashboard_content';
 import { ServicesContent } from '../../trace_analytics/components/services/services_content';
@@ -380,6 +380,12 @@ export function Application(props: AppDetailProps) {
     switchToEditViz(savedVisualizationId);
   };
 
+  const updateAvailabilityVizId = (vizs: VisualizationType[]) => {
+    if (!vizs.map((viz) => viz.savedVisualizationId).includes(application.availabilityVisId)) {
+      updateApp(appId, { availabilityVisId: '' }, 'editAvailability');
+    }
+  };
+
   const getPanel = () => {
     return (
       <CustomPanelView
@@ -397,6 +403,7 @@ export function Application(props: AppDetailProps) {
         setToast={setToasts}
         page="app"
         appId={appId}
+        updateAvailabilityVizId={updateAvailabilityVizId}
         startTime={appStartTime}
         endTime={appEndTime}
         setStartTime={setStartTimeForApp}

dashboards-observability/public/components/custom_panels/custom_panel_view.tsx

@@ -109,6 +109,7 @@ interface CustomPanelViewProps {
   setEndTime: any;
   childBreadcrumbs?: EuiBreadcrumb[];
   appId?: string;
+  updateAvailabilityVizId?: any;
   onAddClick?: any;
 }
 
@@ -127,6 +128,7 @@ export const CustomPanelView = (props: CustomPanelViewProps) => {
     endTime,
     setStartTime,
     setEndTime,
+    updateAvailabilityVizId,
     renameCustomPanel,
     deleteCustomPanel,
     cloneCustomPanel,
@@ -643,6 +645,7 @@ export const CustomPanelView = (props: CustomPanelViewProps) => {
             <PanelGrid
               http={http}
               panelId={panelId}
+              updateAvailabilityVizId={updateAvailabilityVizId}
               chrome={chrome}
               panelVisualizations={panelVisualizations}
               setPanelVisualizations={setPanelVisualizations}

dashboards-observability/public/components/custom_panels/panel_modules/panel_grid/panel_grid.tsx

@@ -44,6 +44,7 @@ interface PanelGridProps {
   http: CoreStart['http'];
   chrome: CoreStart['chrome'];
   panelId: string;
+  updateAvailabilityVizId?: any;
   panelVisualizations: VisualizationType[];
   setPanelVisualizations: React.Dispatch<React.SetStateAction<VisualizationType[]>>;
   editMode: boolean;
@@ -64,6 +65,7 @@ export const PanelGrid = (props: PanelGridProps) => {
     http,
     chrome,
     panelId,
+    updateAvailabilityVizId,
     panelVisualizations,
     setPanelVisualizations,
     editMode,
@@ -166,6 +168,7 @@ export const PanelGrid = (props: PanelGridProps) => {
         _.omit(layout, ['static', 'moved'])
       );
       saveVisualizationLayouts(panelId, visualizationParams);
+      updateAvailabilityVizId(panelVisualizations);
     }
   }, [editActionType]);