IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-09 23:16:16 -06:00
Code Issues Packages Projects Releases Wiki Activity

Explore Metrics: Save and restore the breakdown layout view from LocalStorage (#90202)

Browse Source 
* 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>
This commit is contained in:
ismail simsek 2024-07-09 14:22:11 +02:00 committed by GitHub
parent ecadd99456
commit 2a4a73e03d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 15 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/app/features/trails/ActionTabs/LayoutSwitcher.tsx
View File

@ -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 });
};

8
public/app/features/trails/ActionTabs/types.ts
View File

@ -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;
}

6
public/app/features/trails/MetricScene.tsx
View File

@ -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,
});

2
public/app/features/trails/shared.ts
View File

@ -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) {