[Metrics UI] Fix saving/loading saved views from URL (#90216)

Co-authored-by: Kibana Machine <[email protected]>

Author: Zacqary

x-pack/plugins/infra/public/components/saved_views/toolbar_control.tsx

@@ -6,7 +6,7 @@
  */
 
 import { EuiFlexGroup } from '@elastic/eui';
-import React, { useCallback, useState, useEffect, useContext } from 'react';
+import React, { useCallback, useState, useEffect } from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import {
@@ -21,7 +21,7 @@ import { SavedViewCreateModal } from './create_modal';
 import { SavedViewUpdateModal } from './update_modal';
 import { SavedViewManageViewsFlyout } from './manage_views_flyout';
 import { useKibana } from '../../../../../../src/plugins/kibana_react/public';
-import { SavedView } from '../../containers/saved_view/saved_view';
+import { useSavedViewContext } from '../../containers/saved_view/saved_view';
 import { SavedViewListModal } from './view_list_modal';
 
 interface Props<ViewState> {
@@ -47,7 +47,7 @@ export function SavedViewsToolbarControls<ViewState>(props: Props<ViewState>) {
     updatedView,
     currentView,
     setCurrentView,
-  } = useContext(SavedView.Context);
+  } = useSavedViewContext();
   const [modalOpen, setModalOpen] = useState(false);
   const [viewListModalOpen, setViewListModalOpen] = useState(false);
   const [isInvalid, setIsInvalid] = useState(false);

x-pack/plugins/infra/public/containers/saved_view/saved_view.tsx

@@ -6,9 +6,14 @@
  */
 
 import createContainer from 'constate';
+import * as rt from 'io-ts';
+import { pipe } from 'fp-ts/lib/pipeable';
+import { fold } from 'fp-ts/lib/Either';
+import { constant, identity } from 'fp-ts/lib/function';
 import { useCallback, useMemo, useState, useEffect, useContext } from 'react';
 import { i18n } from '@kbn/i18n';
 import { SimpleSavedObject, SavedObjectAttributes } from 'kibana/public';
+import { useUrlState } from '../../utils/use_url_state';
 import { useFindSavedObject } from '../../hooks/use_find_saved_object';
 import { useCreateSavedObject } from '../../hooks/use_create_saved_object';
 import { useDeleteSavedObject } from '../../hooks/use_delete_saved_object';
@@ -39,6 +44,14 @@ interface Props {
   shouldLoadDefault: boolean;
 }
 
+const savedViewUrlStateRT = rt.type({
+  viewId: rt.string,
+});
+type SavedViewUrlState = rt.TypeOf<typeof savedViewUrlStateRT>;
+const DEFAULT_SAVED_VIEW_STATE: SavedViewUrlState = {
+  viewId: '0',
+};
+
 export const useSavedView = (props: Props) => {
   const {
     source,
@@ -52,6 +65,13 @@ export const useSavedView = (props: Props) => {
   const { data, loading, find, error: errorOnFind, hasView } = useFindSavedObject<
     SavedViewSavedObject<ViewState>
   >(viewType);
+  const [urlState, setUrlState] = useUrlState<SavedViewUrlState>({
+    defaultState: DEFAULT_SAVED_VIEW_STATE,
+    decodeUrlState,
+    encodeUrlState,
+    urlStateKey: 'savedView',
+  });
+
   const [shouldLoadDefault] = useState(props.shouldLoadDefault);
   const [currentView, setCurrentView] = useState<SavedView<any> | null>(null);
   const [loadingDefaultView, setLoadingDefaultView] = useState<boolean | null>(null);
@@ -212,25 +232,35 @@ export const useSavedView = (props: Props) => {
     });
   }, [setCurrentView, defaultViewId, defaultViewState]);
 
-  useEffect(() => {
-    if (loadingDefaultView || currentView || !shouldLoadDefault) {
-      return;
-    }
-
+  const loadDefaultViewIfSet = useCallback(() => {
     if (defaultViewId !== '0') {
       loadDefaultView();
     } else {
       setDefault();
       setLoadingDefaultView(false);
     }
-  }, [
-    loadDefaultView,
-    shouldLoadDefault,
-    setDefault,
-    loadingDefaultView,
-    currentView,
-    defaultViewId,
-  ]);
+  }, [defaultViewId, loadDefaultView, setDefault, setLoadingDefaultView]);
+
+  useEffect(() => {
+    if (loadingDefaultView || currentView || !shouldLoadDefault) {
+      return;
+    }
+
+    loadDefaultViewIfSet();
+  }, [loadDefaultViewIfSet, loadingDefaultView, currentView, shouldLoadDefault]);
+
+  useEffect(() => {
+    if (currentView && urlState.viewId !== currentView.id && data)
+      setUrlState({ viewId: currentView.id });
+  }, [urlState, setUrlState, currentView, defaultViewId, data]);
+
+  useEffect(() => {
+    if (!currentView && !loading && data) {
+      const viewToSet = views.find((v) => v.id === urlState.viewId);
+      if (viewToSet) setCurrentView(viewToSet);
+      else loadDefaultViewIfSet();
+    }
+  }, [loading, currentView, data, views, setCurrentView, loadDefaultViewIfSet, urlState.viewId]);
 
   return {
     views,
@@ -260,3 +290,11 @@ export const useSavedView = (props: Props) => {
 
 export const SavedView = createContainer(useSavedView);
 export const [SavedViewProvider, useSavedViewContext] = SavedView;
+
+const encodeUrlState = (state: SavedViewUrlState) => {
+  return savedViewUrlStateRT.encode(state);
+};
+const decodeUrlState = (value: unknown) => {
+  const state = pipe(savedViewUrlStateRT.decode(value), fold(constant(undefined), identity));
+  return state;
+};

x-pack/plugins/infra/public/pages/metrics/index.tsx

@@ -36,7 +36,7 @@ import { WaffleTimeProvider } from './inventory_view/hooks/use_waffle_time';
 import { WaffleFiltersProvider } from './inventory_view/hooks/use_waffle_filters';
 
 import { MetricsAlertDropdown } from '../../alerting/common/components/metrics_alert_dropdown';
-import { SavedView } from '../../containers/saved_view/saved_view';
+import { SavedViewProvider } from '../../containers/saved_view/saved_view';
 import { AlertPrefillProvider } from '../../alerting/use_alert_prefill';
 import { InfraMLCapabilitiesProvider } from '../../containers/ml/infra_ml_capabilities';
 import { AnomalyDetectionFlyout } from './inventory_view/components/ml/anomaly_detection/anomaly_detection_flyout';
@@ -195,7 +195,7 @@ const PageContent = (props: {
   const { options } = useContext(MetricsExplorerOptionsContainer.Context);
 
   return (
-    <SavedView.Provider
+    <SavedViewProvider
       shouldLoadDefault={options.source === 'default'}
       viewType={'metrics-explorer-view'}
       defaultViewState={DEFAULT_METRICS_EXPLORER_VIEW_STATE}
@@ -205,6 +205,6 @@ const PageContent = (props: {
         source={configuration}
         {...props}
       />
-    </SavedView.Provider>
+    </SavedViewProvider>
   );
 };

x-pack/plugins/infra/public/pages/metrics/inventory_view/index.tsx

@@ -23,7 +23,7 @@ import { useTrackPageview } from '../../../../../observability/public';
 import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
 import { Layout } from './components/layout';
 import { useLinkProps } from '../../../hooks/use_link_props';
-import { SavedView } from '../../../containers/saved_view/saved_view';
+import { SavedViewProvider } from '../../../containers/saved_view/saved_view';
 import { DEFAULT_WAFFLE_VIEW_STATE } from './hooks/use_waffle_view_state';
 import { useWaffleOptionsContext } from './hooks/use_waffle_options';
 
@@ -64,13 +64,13 @@ export const SnapshotPage = () => {
         ) : metricIndicesExist ? (
           <>
             <FilterBar />
-            <SavedView.Provider
+            <SavedViewProvider
               shouldLoadDefault={optionsSource === 'default'}
               viewType={'inventory-view'}
               defaultViewState={DEFAULT_WAFFLE_VIEW_STATE}
             >
               <Layout />
-            </SavedView.Provider>
+            </SavedViewProvider>
           </>
         ) : hasFailedLoadingSource ? (
           <SourceErrorPage errorMessage={loadSourceFailureMessage || ''} retry={loadSource} />