From f9bab9585a68bb65201a9f7e5c15052601546e22 Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Thu, 31 Jan 2019 19:38:49 +0100 Subject: [PATCH 1/5] wip --- public/app/core/utils/explore.test.ts | 9 ++++++++- public/app/core/utils/explore.ts | 19 ++++++++++++++++--- public/app/types/explore.ts | 7 +++++++ 3 files changed, 31 insertions(+), 4 deletions(-) diff --git a/public/app/core/utils/explore.test.ts b/public/app/core/utils/explore.test.ts index 32135eab90a..d818b2ef090 100644 --- a/public/app/core/utils/explore.test.ts +++ b/public/app/core/utils/explore.test.ts @@ -13,6 +13,11 @@ const DEFAULT_EXPLORE_STATE: ExploreUrlState = { datasource: null, queries: [], range: DEFAULT_RANGE, + ui: { + showingGraph: true, + showingTable: true, + showingLogs: true, + } }; describe('state functions', () => { @@ -69,9 +74,11 @@ describe('state functions', () => { to: 'now', }, }; + expect(serializeStateToUrlParam(state)).toBe( '{"datasource":"foo","queries":[{"expr":"metric{test=\\"a/b\\"}"},' + - '{"expr":"super{foo=\\"x/z\\"}"}],"range":{"from":"now-5h","to":"now"}}' + '{"expr":"super{foo=\\"x/z\\"}"}],"range":{"from":"now-5h","to":"now"},' + + '"ui":{"showingGraph":true,"showingTable":true,"showingLogs":true}}' ); }); diff --git a/public/app/core/utils/explore.ts b/public/app/core/utils/explore.ts index 7a9f54a0cae..07c8cf1d24b 100644 --- a/public/app/core/utils/explore.ts +++ b/public/app/core/utils/explore.ts @@ -20,6 +20,7 @@ import { ResultType, QueryIntervals, QueryOptions, + ExploreUrlUIState, } from 'app/types/explore'; export const DEFAULT_RANGE = { @@ -27,6 +28,12 @@ export const DEFAULT_RANGE = { to: 'now', }; +export const DEFAULT_UI_STATE = { + showingTable: true, + showingGraph: true, + showingLogs: true, +}; + const MAX_HISTORY_ITEMS = 100; export const LAST_USED_DATASOURCE_KEY = 'grafana.explore.datasource'; @@ -151,6 +158,7 @@ export function parseUrlState(initial: string | undefined): ExploreUrlState { if (initial) { try { const parsed = JSON.parse(decodeURI(initial)); + // debugger if (Array.isArray(parsed)) { if (parsed.length <= 3) { throw new Error('Error parsing compact URL state for Explore.'); @@ -161,19 +169,24 @@ export function parseUrlState(initial: string | undefined): ExploreUrlState { }; const datasource = parsed[2]; const queries = parsed.slice(3); - return { datasource, queries, range }; + return { datasource, queries, range, ui: DEFAULT_UI_STATE }; } return parsed; } catch (e) { console.error(e); } } - return { datasource: null, queries: [], range: DEFAULT_RANGE }; + return { datasource: null, queries: [], range: DEFAULT_RANGE, ui: DEFAULT_UI_STATE }; } +const serializeUIState = (state: ExploreUrlUIState) => { + return Object.keys(state).map((key) => ({ [key]: state[key] })); +}; + export function serializeStateToUrlParam(urlState: ExploreUrlState, compact?: boolean): string { + if (compact) { - return JSON.stringify([urlState.range.from, urlState.range.to, urlState.datasource, ...urlState.queries]); + return JSON.stringify([urlState.range.from, urlState.range.to, urlState.datasource, ...urlState.queries, ...serializeUIState(urlState.ui)]); } return JSON.stringify(urlState); } diff --git a/public/app/types/explore.ts b/public/app/types/explore.ts index 34b7ff08c99..d035b60d86a 100644 --- a/public/app/types/explore.ts +++ b/public/app/types/explore.ts @@ -231,10 +231,17 @@ export interface ExploreItemState { tableResult?: TableModel; } +export interface ExploreUrlUIState { + showingTable: boolean; + showingGraph: boolean; + showingLogs: boolean; +} + export interface ExploreUrlState { datasource: string; queries: any[]; // Should be a DataQuery, but we're going to strip refIds, so typing makes less sense range: RawTimeRange; + ui: ExploreUrlUIState; } export interface HistoryItem { From 6ab9355146193941c4e719e8cfa43af7f382179e Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Fri, 1 Feb 2019 12:33:15 +0100 Subject: [PATCH 2/5] Restoring explore panels state from URL --- public/app/core/utils/explore.test.ts | 23 +++++- public/app/core/utils/explore.ts | 38 +++++++--- public/app/features/explore/Explore.tsx | 10 ++- .../app/features/explore/state/actionTypes.ts | 2 + public/app/features/explore/state/actions.ts | 73 ++++++++++++------- public/app/features/explore/state/reducers.ts | 3 +- public/app/types/explore.ts | 4 +- 7 files changed, 109 insertions(+), 44 deletions(-) diff --git a/public/app/core/utils/explore.test.ts b/public/app/core/utils/explore.test.ts index d818b2ef090..1c00142c3b8 100644 --- a/public/app/core/utils/explore.test.ts +++ b/public/app/core/utils/explore.test.ts @@ -100,7 +100,7 @@ describe('state functions', () => { }, }; expect(serializeStateToUrlParam(state, true)).toBe( - '["now-5h","now","foo",{"expr":"metric{test=\\"a/b\\"}"},{"expr":"super{foo=\\"x/z\\"}"}]' + '["now-5h","now","foo",{"expr":"metric{test=\\"a/b\\"}"},{"expr":"super{foo=\\"x/z\\"}"},{"ui":[true,true,true]}]' ); }); }); @@ -125,7 +125,28 @@ describe('state functions', () => { }; const serialized = serializeStateToUrlParam(state); const parsed = parseUrlState(serialized); + expect(state).toMatchObject(parsed); + }); + it('can parse the compact serialized state into the original state', () => { + const state = { + ...DEFAULT_EXPLORE_STATE, + datasource: 'foo', + queries: [ + { + expr: 'metric{test="a/b"}', + }, + { + expr: 'super{foo="x/z"}', + }, + ], + range: { + from: 'now - 5h', + to: 'now', + }, + }; + const serialized = serializeStateToUrlParam(state, true); + const parsed = parseUrlState(serialized); expect(state).toMatchObject(parsed); }); }); diff --git a/public/app/core/utils/explore.ts b/public/app/core/utils/explore.ts index 07c8cf1d24b..7128019b1fb 100644 --- a/public/app/core/utils/explore.ts +++ b/public/app/core/utils/explore.ts @@ -20,7 +20,6 @@ import { ResultType, QueryIntervals, QueryOptions, - ExploreUrlUIState, } from 'app/types/explore'; export const DEFAULT_RANGE = { @@ -154,11 +153,13 @@ export function buildQueryTransaction( export const clearQueryKeys: ((query: DataQuery) => object) = ({ key, refId, ...rest }) => rest; +const isMetricSegment = (segment: { [key: string]: string }) => segment.hasOwnProperty('expr'); +const isUISegment = (segment: { [key: string]: string }) => segment.hasOwnProperty('ui'); + export function parseUrlState(initial: string | undefined): ExploreUrlState { if (initial) { try { const parsed = JSON.parse(decodeURI(initial)); - // debugger if (Array.isArray(parsed)) { if (parsed.length <= 3) { throw new Error('Error parsing compact URL state for Explore.'); @@ -168,8 +169,24 @@ export function parseUrlState(initial: string | undefined): ExploreUrlState { to: parsed[1], }; const datasource = parsed[2]; - const queries = parsed.slice(3); - return { datasource, queries, range, ui: DEFAULT_UI_STATE }; + let queries = [], + ui; + + parsed.slice(3).forEach(segment => { + if (isMetricSegment(segment)) { + queries = [...queries, segment]; + } + + if (isUISegment(segment)) { + ui = { + showingGraph: segment.ui[0], + showingLogs: segment.ui[1], + showingTable: segment.ui[2], + }; + } + }); + + return { datasource, queries, range, ui }; } return parsed; } catch (e) { @@ -179,14 +196,15 @@ export function parseUrlState(initial: string | undefined): ExploreUrlState { return { datasource: null, queries: [], range: DEFAULT_RANGE, ui: DEFAULT_UI_STATE }; } -const serializeUIState = (state: ExploreUrlUIState) => { - return Object.keys(state).map((key) => ({ [key]: state[key] })); -}; - export function serializeStateToUrlParam(urlState: ExploreUrlState, compact?: boolean): string { - if (compact) { - return JSON.stringify([urlState.range.from, urlState.range.to, urlState.datasource, ...urlState.queries, ...serializeUIState(urlState.ui)]); + return JSON.stringify([ + urlState.range.from, + urlState.range.to, + urlState.datasource, + ...urlState.queries, + { ui: [!!urlState.ui.showingGraph, !!urlState.ui.showingLogs, !!urlState.ui.showingTable] }, + ]); } return JSON.stringify(urlState); } diff --git a/public/app/features/explore/Explore.tsx b/public/app/features/explore/Explore.tsx index 909c4e81b8b..d08243c7118 100644 --- a/public/app/features/explore/Explore.tsx +++ b/public/app/features/explore/Explore.tsx @@ -32,7 +32,7 @@ import { import { RawTimeRange, TimeRange, DataQuery } from '@grafana/ui'; import { ExploreItemState, ExploreUrlState, RangeScanner, ExploreId } from 'app/types/explore'; import { StoreState } from 'app/types'; -import { LAST_USED_DATASOURCE_KEY, ensureQueries, DEFAULT_RANGE } from 'app/core/utils/explore'; +import { LAST_USED_DATASOURCE_KEY, ensureQueries, DEFAULT_RANGE, DEFAULT_UI_STATE } from 'app/core/utils/explore'; import { Emitter } from 'app/core/utils/emitter'; import { ExploreToolbar } from './ExploreToolbar'; @@ -61,7 +61,7 @@ interface ExploreProps { supportsGraph: boolean | null; supportsLogs: boolean | null; supportsTable: boolean | null; - urlState: ExploreUrlState; + urlState?: ExploreUrlState; } /** @@ -107,18 +107,20 @@ export class Explore extends React.PureComponent { // Don't initialize on split, but need to initialize urlparameters when present if (!initialized) { // Load URL state and parse range - const { datasource, queries, range = DEFAULT_RANGE } = (urlState || {}) as ExploreUrlState; + const { datasource, queries, range = DEFAULT_RANGE, ui = DEFAULT_UI_STATE } = (urlState || {}) as ExploreUrlState; const initialDatasource = datasource || store.get(LAST_USED_DATASOURCE_KEY); const initialQueries: DataQuery[] = ensureQueries(queries); const initialRange = { from: parseTime(range.from), to: parseTime(range.to) }; const width = this.el ? this.el.offsetWidth : 0; + this.props.initializeExplore( exploreId, initialDatasource, initialQueries, initialRange, width, - this.exploreEvents + this.exploreEvents, + ui ); } } diff --git a/public/app/features/explore/state/actionTypes.ts b/public/app/features/explore/state/actionTypes.ts index be7d5754bbe..3a0a564b651 100644 --- a/public/app/features/explore/state/actionTypes.ts +++ b/public/app/features/explore/state/actionTypes.ts @@ -8,6 +8,7 @@ import { RangeScanner, ResultType, QueryTransaction, + ExploreUIState, } from 'app/types/explore'; export enum ActionTypes { @@ -106,6 +107,7 @@ export interface InitializeExploreAction { exploreDatasources: DataSourceSelectItem[]; queries: DataQuery[]; range: RawTimeRange; + ui: ExploreUIState; }; } diff --git a/public/app/features/explore/state/actions.ts b/public/app/features/explore/state/actions.ts index 1a11b7fcac9..02502a1d94c 100644 --- a/public/app/features/explore/state/actions.ts +++ b/public/app/features/explore/state/actions.ts @@ -38,6 +38,7 @@ import { ResultType, QueryOptions, QueryTransaction, + ExploreUIState, } from 'app/types/explore'; import { @@ -154,7 +155,8 @@ export function initializeExplore( queries: DataQuery[], range: RawTimeRange, containerWidth: number, - eventBridge: Emitter + eventBridge: Emitter, + ui: ExploreUIState ): ThunkResult { return async dispatch => { const exploreDatasources: DataSourceSelectItem[] = getDatasourceSrv() @@ -175,6 +177,7 @@ export function initializeExplore( exploreDatasources, queries, range, + ui, }, }); @@ -258,10 +261,7 @@ export const queriesImported = (exploreId: ExploreId, queries: DataQuery[]): Que * run datasource-specific code. Existing queries are imported to the new datasource if an importer exists, * e.g., Prometheus -> Loki queries. */ -export const loadDatasourceSuccess = ( - exploreId: ExploreId, - instance: any, -): LoadDatasourceSuccessAction => { +export const loadDatasourceSuccess = (exploreId: ExploreId, instance: any): LoadDatasourceSuccessAction => { // Capabilities const supportsGraph = instance.meta.metrics; const supportsLogs = instance.meta.logs; @@ -766,6 +766,11 @@ export function stateSave() { datasource: left.datasourceInstance.name, queries: left.modifiedQueries.map(clearQueryKeys), range: left.range, + ui: { + showingGraph: left.showingGraph, + showingLogs: left.showingLogs, + showingTable: left.showingTable, + }, }; urlStates.left = serializeStateToUrlParam(leftUrlState, true); if (split) { @@ -773,48 +778,64 @@ export function stateSave() { datasource: right.datasourceInstance.name, queries: right.modifiedQueries.map(clearQueryKeys), range: right.range, + ui: { + showingGraph: right.showingGraph, + showingLogs: right.showingLogs, + showingTable: right.showingTable, + }, }; + urlStates.right = serializeStateToUrlParam(rightUrlState, true); } + dispatch(updateLocation({ query: urlStates })); }; } /** - * Expand/collapse the graph result viewer. When collapsed, graph queries won't be run. + * Creates action to collapse graph/logs/table panel. When panel is collapsed, + * queries won't be run */ -export function toggleGraph(exploreId: ExploreId): ThunkResult { +const togglePanelActionCreator = (type: ActionTypes.ToggleGraph | ActionTypes.ToggleTable | ActionTypes.ToggleLogs) => ( + exploreId: ExploreId +) => { return (dispatch, getState) => { - dispatch({ type: ActionTypes.ToggleGraph, payload: { exploreId } }); - if (getState().explore[exploreId].showingGraph) { + let shouldRunQueries; + dispatch({ type, payload: { exploreId } }); + dispatch(stateSave()); + + switch (type) { + case ActionTypes.ToggleGraph: + shouldRunQueries = getState().explore[exploreId].showingGraph; + break; + case ActionTypes.ToggleLogs: + shouldRunQueries = getState().explore[exploreId].showingLogs; + break; + case ActionTypes.ToggleTable: + shouldRunQueries = getState().explore[exploreId].showingTable; + break; + } + + if (shouldRunQueries) { dispatch(runQueries(exploreId)); } }; -} +}; + +/** + * Expand/collapse the graph result viewer. When collapsed, graph queries won't be run. + */ +export const toggleGraph = togglePanelActionCreator(ActionTypes.ToggleGraph); /** * Expand/collapse the logs result viewer. When collapsed, log queries won't be run. */ -export function toggleLogs(exploreId: ExploreId): ThunkResult { - return (dispatch, getState) => { - dispatch({ type: ActionTypes.ToggleLogs, payload: { exploreId } }); - if (getState().explore[exploreId].showingLogs) { - dispatch(runQueries(exploreId)); - } - }; -} +export const toggleLogs = togglePanelActionCreator(ActionTypes.ToggleLogs); /** * Expand/collapse the table result viewer. When collapsed, table queries won't be run. */ -export function toggleTable(exploreId: ExploreId): ThunkResult { - return (dispatch, getState) => { - dispatch({ type: ActionTypes.ToggleTable, payload: { exploreId } }); - if (getState().explore[exploreId].showingTable) { - dispatch(runQueries(exploreId)); - } - }; -} +export const toggleTable = togglePanelActionCreator(ActionTypes.ToggleTable); /** * Resets state for explore. diff --git a/public/app/features/explore/state/reducers.ts b/public/app/features/explore/state/reducers.ts index eb67beee3b3..4ad07ddfc88 100644 --- a/public/app/features/explore/state/reducers.ts +++ b/public/app/features/explore/state/reducers.ts @@ -163,7 +163,7 @@ export const itemReducer = (state, action: Action): ExploreItemState => { } case ActionTypes.InitializeExplore: { - const { containerWidth, eventBridge, exploreDatasources, queries, range } = action.payload; + const { containerWidth, eventBridge, exploreDatasources, queries, range, ui } = action.payload; return { ...state, containerWidth, @@ -173,6 +173,7 @@ export const itemReducer = (state, action: Action): ExploreItemState => { initialQueries: queries, initialized: true, modifiedQueries: queries.slice(), + ...ui, }; } diff --git a/public/app/types/explore.ts b/public/app/types/explore.ts index d035b60d86a..3abbc652c0d 100644 --- a/public/app/types/explore.ts +++ b/public/app/types/explore.ts @@ -231,7 +231,7 @@ export interface ExploreItemState { tableResult?: TableModel; } -export interface ExploreUrlUIState { +export interface ExploreUIState { showingTable: boolean; showingGraph: boolean; showingLogs: boolean; @@ -241,7 +241,7 @@ export interface ExploreUrlState { datasource: string; queries: any[]; // Should be a DataQuery, but we're going to strip refIds, so typing makes less sense range: RawTimeRange; - ui: ExploreUrlUIState; + ui: ExploreUIState; } export interface HistoryItem { From 2ddccb4a214a1828bde0ffb3c0d0191773d8146a Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Fri, 1 Feb 2019 12:57:09 +0100 Subject: [PATCH 3/5] Temporarily run queries independently from UI state of explore panels --- public/app/features/explore/state/actions.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/public/app/features/explore/state/actions.ts b/public/app/features/explore/state/actions.ts index 02502a1d94c..b24532c23f4 100644 --- a/public/app/features/explore/state/actions.ts +++ b/public/app/features/explore/state/actions.ts @@ -577,9 +577,9 @@ export function runQueries(exploreId: ExploreId) { const { datasourceInstance, modifiedQueries, - showingLogs, - showingGraph, - showingTable, + // showingLogs, + // showingGraph, + // showingTable, supportsGraph, supportsLogs, supportsTable, @@ -596,7 +596,7 @@ export function runQueries(exploreId: ExploreId) { const interval = datasourceInstance.interval; // Keep table queries first since they need to return quickly - if (showingTable && supportsTable) { + if (/*showingTable &&*/ supportsTable) { dispatch( runQueriesForType( exploreId, @@ -611,7 +611,7 @@ export function runQueries(exploreId: ExploreId) { ) ); } - if (showingGraph && supportsGraph) { + if (/*showingGraph &&*/ supportsGraph) { dispatch( runQueriesForType( exploreId, @@ -625,7 +625,7 @@ export function runQueries(exploreId: ExploreId) { ) ); } - if (showingLogs && supportsLogs) { + if (/*showingLogs &&*/ supportsLogs) { dispatch(runQueriesForType(exploreId, 'Logs', { interval, format: 'logs' })); } dispatch(stateSave()); From 3c358e406e20f3a47b9d49fecadd53a6a2259843 Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Fri, 1 Feb 2019 14:56:54 +0100 Subject: [PATCH 4/5] Make runQueries action independent from datasource loading --- public/app/features/explore/state/actions.ts | 40 ++++++++++++++------ 1 file changed, 28 insertions(+), 12 deletions(-) diff --git a/public/app/features/explore/state/actions.ts b/public/app/features/explore/state/actions.ts index b24532c23f4..c7b47d1c3c7 100644 --- a/public/app/features/explore/state/actions.ts +++ b/public/app/features/explore/state/actions.ts @@ -79,7 +79,15 @@ export function changeDatasource(exploreId: ExploreId, datasource: string): Thun await dispatch(importQueries(exploreId, modifiedQueries, currentDataSourceInstance, newDataSourceInstance)); dispatch(updateDatasourceInstance(exploreId, newDataSourceInstance)); - dispatch(loadDatasource(exploreId, newDataSourceInstance)); + + try { + await dispatch(loadDatasource(exploreId, newDataSourceInstance)); + } catch (error) { + console.error(error); + return; + } + + dispatch(runQueries(exploreId)); }; } @@ -197,7 +205,14 @@ export function initializeExplore( } dispatch(updateDatasourceInstance(exploreId, instance)); - dispatch(loadDatasource(exploreId, instance)); + + try { + await dispatch(loadDatasource(exploreId, instance)); + } catch (error) { + console.error(error); + return; + } + dispatch(runQueries(exploreId, true)); } else { dispatch(loadDatasourceMissing(exploreId)); } @@ -343,8 +358,8 @@ export function loadDatasource(exploreId: ExploreId, instance: DataSourceApi): T // Keep ID to track selection dispatch(loadDatasourcePending(exploreId, datasourceName)); - let datasourceError = null; + try { const testResult = await instance.testDatasource(); datasourceError = testResult.status === 'success' ? null : testResult.message; @@ -354,7 +369,7 @@ export function loadDatasource(exploreId: ExploreId, instance: DataSourceApi): T if (datasourceError) { dispatch(loadDatasourceFailure(exploreId, datasourceError)); - return; + return Promise.reject(`${datasourceName} loading failed`); } if (datasourceName !== getState().explore[exploreId].requestedDatasourceName) { @@ -372,7 +387,7 @@ export function loadDatasource(exploreId: ExploreId, instance: DataSourceApi): T } dispatch(loadDatasourceSuccess(exploreId, instance)); - dispatch(runQueries(exploreId)); + return Promise.resolve(); }; } @@ -572,14 +587,14 @@ export function removeQueryRow(exploreId: ExploreId, index: number): ThunkResult /** * Main action to run queries and dispatches sub-actions based on which result viewers are active */ -export function runQueries(exploreId: ExploreId) { +export function runQueries(exploreId: ExploreId, ignoreUIState = false) { return (dispatch, getState) => { const { datasourceInstance, modifiedQueries, - // showingLogs, - // showingGraph, - // showingTable, + showingLogs, + showingGraph, + showingTable, supportsGraph, supportsLogs, supportsTable, @@ -596,7 +611,7 @@ export function runQueries(exploreId: ExploreId) { const interval = datasourceInstance.interval; // Keep table queries first since they need to return quickly - if (/*showingTable &&*/ supportsTable) { + if ((ignoreUIState || showingTable) && supportsTable) { dispatch( runQueriesForType( exploreId, @@ -611,7 +626,7 @@ export function runQueries(exploreId: ExploreId) { ) ); } - if (/*showingGraph &&*/ supportsGraph) { + if ((ignoreUIState || showingGraph) && supportsGraph) { dispatch( runQueriesForType( exploreId, @@ -625,9 +640,10 @@ export function runQueries(exploreId: ExploreId) { ) ); } - if (/*showingLogs &&*/ supportsLogs) { + if ((ignoreUIState || showingLogs) && supportsLogs) { dispatch(runQueriesForType(exploreId, 'Logs', { interval, format: 'logs' })); } + dispatch(stateSave()); }; } From 1a0b21b8d1e2dc13037a908e7bbb2deba327acfb Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Fri, 1 Feb 2019 15:27:02 +0100 Subject: [PATCH 5/5] Minor post review changes --- public/app/core/utils/explore.ts | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/public/app/core/utils/explore.ts b/public/app/core/utils/explore.ts index 7128019b1fb..faf46118718 100644 --- a/public/app/core/utils/explore.ts +++ b/public/app/core/utils/explore.ts @@ -157,6 +157,8 @@ const isMetricSegment = (segment: { [key: string]: string }) => segment.hasOwnPr const isUISegment = (segment: { [key: string]: string }) => segment.hasOwnProperty('ui'); export function parseUrlState(initial: string | undefined): ExploreUrlState { + let uiState = DEFAULT_UI_STATE; + if (initial) { try { const parsed = JSON.parse(decodeURI(initial)); @@ -169,8 +171,7 @@ export function parseUrlState(initial: string | undefined): ExploreUrlState { to: parsed[1], }; const datasource = parsed[2]; - let queries = [], - ui; + let queries = []; parsed.slice(3).forEach(segment => { if (isMetricSegment(segment)) { @@ -178,7 +179,7 @@ export function parseUrlState(initial: string | undefined): ExploreUrlState { } if (isUISegment(segment)) { - ui = { + uiState = { showingGraph: segment.ui[0], showingLogs: segment.ui[1], showingTable: segment.ui[2], @@ -186,14 +187,14 @@ export function parseUrlState(initial: string | undefined): ExploreUrlState { } }); - return { datasource, queries, range, ui }; + return { datasource, queries, range, ui: uiState }; } return parsed; } catch (e) { console.error(e); } } - return { datasource: null, queries: [], range: DEFAULT_RANGE, ui: DEFAULT_UI_STATE }; + return { datasource: null, queries: [], range: DEFAULT_RANGE, ui: uiState }; } export function serializeStateToUrlParam(urlState: ExploreUrlState, compact?: boolean): string {