From 2a4a73e03d535f09d8c8ca5bcf658c304879a813 Mon Sep 17 00:00:00 2001
From: ismail simsek <ismailsimsek09@gmail.com>
Date: Tue, 9 Jul 2024 14:22:11 +0200
Subject: [PATCH] Explore Metrics: Save and restore the breakdown layout view
 from LocalStorage (#90202)

* save and restore the breakdown layout view from localstorage

* Update public/app/features/trails/MetricScene.tsx

Co-authored-by: Darren Janeczek <38694490+darrenjaneczek@users.noreply.github.com>

* add type guard

* remove unused import

---------

Co-authored-by: Darren Janeczek <38694490+darrenjaneczek@users.noreply.github.com>
---
 public/app/features/trails/ActionTabs/LayoutSwitcher.tsx | 2 ++
 public/app/features/trails/ActionTabs/types.ts           | 8 +++++++-
 public/app/features/trails/MetricScene.tsx               | 6 ++++--
 public/app/features/trails/shared.ts                     | 2 ++
 4 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/public/app/features/trails/ActionTabs/LayoutSwitcher.tsx b/public/app/features/trails/ActionTabs/LayoutSwitcher.tsx
index e9382e9fa1b..b1f621b03c7 100644
--- a/public/app/features/trails/ActionTabs/LayoutSwitcher.tsx
+++ b/public/app/features/trails/ActionTabs/LayoutSwitcher.tsx
@@ -4,6 +4,7 @@ import { Field, RadioButtonGroup } from '@grafana/ui';
 
 import { MetricScene } from '../MetricScene';
 import { reportExploreMetrics } from '../interactions';
+import { TRAIL_BREAKDOWN_VIEW_KEY } from '../shared';
 
 import { LayoutType } from './types';
 
@@ -38,6 +39,7 @@ export class LayoutSwitcher extends SceneObjectBase<LayoutSwitcherState> {
 
   public onLayoutChange = (layout: LayoutType) => {
     reportExploreMetrics('breakdown_layout_changed', { layout });
+    localStorage.setItem(TRAIL_BREAKDOWN_VIEW_KEY, layout);
     this.getMetricScene().setState({ layout });
   };
 
diff --git a/public/app/features/trails/ActionTabs/types.ts b/public/app/features/trails/ActionTabs/types.ts
index 37a6333e91a..d65482c4a29 100644
--- a/public/app/features/trails/ActionTabs/types.ts
+++ b/public/app/features/trails/ActionTabs/types.ts
@@ -1 +1,7 @@
-export type LayoutType = 'single' | 'grid' | 'rows';
+const LAYOUT_TYPES = ['single', 'grid', 'rows'] as const;
+
+export type LayoutType = (typeof LAYOUT_TYPES)[number];
+
+export function isLayoutType(layoutType: string | null | undefined): layoutType is LayoutType {
+  return !!layoutType && layoutType in LAYOUT_TYPES;
+}
diff --git a/public/app/features/trails/MetricScene.tsx b/public/app/features/trails/MetricScene.tsx
index 4cb134f0e52..65c43546b20 100644
--- a/public/app/features/trails/MetricScene.tsx
+++ b/public/app/features/trails/MetricScene.tsx
@@ -19,7 +19,7 @@ import { getExploreUrl } from '../../core/utils/explore';
 import { buildBreakdownActionScene } from './ActionTabs/BreakdownScene';
 import { buildMetricOverviewScene } from './ActionTabs/MetricOverviewScene';
 import { buildRelatedMetricsScene } from './ActionTabs/RelatedMetricsScene';
-import { LayoutType } from './ActionTabs/types';
+import { isLayoutType, LayoutType } from './ActionTabs/types';
 import { getAutoQueriesForMetric } from './AutomaticMetricQueries/AutoQueryEngine';
 import { AutoQueryDef, AutoQueryInfo } from './AutomaticMetricQueries/types';
 import { MAIN_PANEL_MAX_HEIGHT, MAIN_PANEL_MIN_HEIGHT, MetricGraphScene } from './MetricGraphScene';
@@ -32,6 +32,7 @@ import {
   getVariablesWithMetricConstant,
   MakeOptional,
   MetricSelectedEvent,
+  TRAIL_BREAKDOWN_VIEW_KEY,
   trailDS,
   VAR_GROUP_BY,
   VAR_METRIC_EXPR,
@@ -53,12 +54,13 @@ export class MetricScene extends SceneObjectBase<MetricSceneState> {
 
   public constructor(state: MakeOptional<MetricSceneState, 'body' | 'autoQuery' | 'layout'>) {
     const autoQuery = state.autoQuery ?? getAutoQueriesForMetric(state.metric);
+    const layout = localStorage.getItem(TRAIL_BREAKDOWN_VIEW_KEY);
     super({
       $variables: state.$variables ?? getVariableSet(state.metric),
       body: state.body ?? new MetricGraphScene({}),
       autoQuery,
       queryDef: state.queryDef ?? autoQuery.main,
-      layout: state.layout ?? 'grid',
+      layout: isLayoutType(layout) ? layout : 'grid',
       ...state,
     });
 
diff --git a/public/app/features/trails/shared.ts b/public/app/features/trails/shared.ts
index 4b12725cb9a..8da3b78f63c 100644
--- a/public/app/features/trails/shared.ts
+++ b/public/app/features/trails/shared.ts
@@ -34,6 +34,8 @@ export const RECENT_TRAILS_KEY = 'grafana.trails.recent';
 
 export const TRAIL_BOOKMARKS_KEY = 'grafana.trails.bookmarks';
 
+export const TRAIL_BREAKDOWN_VIEW_KEY = 'grafana.trails.breakdown.view';
+
 export type MakeOptional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
 
 export function getVariablesWithMetricConstant(metric: string) {