Moved explore helpers to utils/explore

public/app/core/utils/explore.test.ts

@@ -1,6 +1,5 @@
-import { serializeStateToUrlParam, parseUrlState } from './Wrapper';
-import { DEFAULT_RANGE } from './TimePicker';
-import { ExploreState } from './Explore';
+import { DEFAULT_RANGE, serializeStateToUrlParam, parseUrlState } from './explore';
+import { ExploreState } from 'app/types/explore';
 
 const DEFAULT_EXPLORE_STATE: ExploreState = {
   datasource: null,
@@ -27,7 +26,7 @@ const DEFAULT_EXPLORE_STATE: ExploreState = {
   tableResult: null,
 };
 
-describe('Wrapper state functions', () => {
+describe('state functions', () => {
   describe('parseUrlState', () => {
     it('returns default state on empty string', () => {
       expect(parseUrlState('')).toMatchObject({
@@ -57,7 +56,7 @@ describe('Wrapper state functions', () => {
       };
       expect(serializeStateToUrlParam(state)).toBe(
         '{"datasource":"foo","queries":[{"query":"metric{test=\\"a/b\\"}"},' +
-          '{"query":"super{foo=\\"x/z\\"}"}],"range":{"from":"now - 5h","to":"now"}}'
+        '{"query":"super{foo=\\"x/z\\"}"}],"range":{"from":"now - 5h","to":"now"}}'
       );
     });
   });

public/app/core/utils/explore.ts

@@ -1,4 +1,10 @@
 import { renderUrl } from 'app/core/utils/url';
+import { ExploreState, ExploreUrlState } from 'app/types/explore';
+
+export const DEFAULT_RANGE = {
+  from: 'now-6h',
+  to: 'now',
+};
 
 /**
  * Returns an Explore-URL that contains a panel's queries and the dashboard time range.
@@ -50,3 +56,23 @@ export async function getExploreUrl(
   }
   return url;
 }
+
+export function parseUrlState(initial: string | undefined): ExploreUrlState {
+  if (initial) {
+    try {
+      return JSON.parse(decodeURI(initial));
+    } catch (e) {
+      console.error(e);
+    }
+  }
+  return { datasource: null, queries: [], range: DEFAULT_RANGE };
+}
+
+export function serializeStateToUrlParam(state: ExploreState): string {
+  const urlState: ExploreUrlState = {
+    datasource: state.datasourceName,
+    queries: state.queries.map(q => ({ query: q.query })),
+    range: state.range,
+  };
+  return JSON.stringify(urlState);
+}

public/app/features/explore/Explore.tsx

@@ -2,19 +2,20 @@ import React from 'react';
 import { hot } from 'react-hot-loader';
 import Select from 'react-select';
 
-import { Query, Range, ExploreUrlState } from 'app/types/explore';
+import { ExploreState, ExploreUrlState } from 'app/types/explore';
 import kbn from 'app/core/utils/kbn';
 import colors from 'app/core/utils/colors';
 import store from 'app/core/store';
 import TimeSeries from 'app/core/time_series2';
 import { parse as parseDate } from 'app/core/utils/datemath';
+import { DEFAULT_RANGE } from 'app/core/utils/explore';
 
 import ElapsedTime from './ElapsedTime';
 import QueryRows from './QueryRows';
 import Graph from './Graph';
 import Logs from './Logs';
 import Table from './Table';
-import TimePicker, { DEFAULT_RANGE } from './TimePicker';
+import TimePicker from './TimePicker';
 import { ensureQueries, generateQueryKey, hasQuery } from './utils/query';
 
 const MAX_HISTORY_ITEMS = 100;
@@ -58,31 +59,6 @@ interface ExploreProps {
   urlState: ExploreUrlState;
 }
 
-export interface ExploreState {
-  datasource: any;
-  datasourceError: any;
-  datasourceLoading: boolean | null;
-  datasourceMissing: boolean;
-  datasourceName?: string;
-  graphResult: any;
-  history: any[];
-  latency: number;
-  loading: any;
-  logsResult: any;
-  queries: Query[];
-  queryErrors: any[];
-  queryHints: any[];
-  range: Range;
-  requestOptions: any;
-  showingGraph: boolean;
-  showingLogs: boolean;
-  showingTable: boolean;
-  supportsGraph: boolean | null;
-  supportsLogs: boolean | null;
-  supportsTable: boolean | null;
-  tableResult: any;
-}
-
 export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
   el: any;
 

public/app/features/explore/TimePicker.tsx

@@ -5,7 +5,6 @@ import * as dateMath from 'app/core/utils/datemath';
 import * as rangeUtil from 'app/core/utils/rangeutil';
 
 const DATE_FORMAT = 'YYYY-MM-DD HH:mm:ss';
-
 export const DEFAULT_RANGE = {
   from: 'now-6h',
   to: 'now',

public/app/features/explore/Wrapper.tsx

@@ -3,31 +3,11 @@ import { hot } from 'react-hot-loader';
 import { connect } from 'react-redux';
 
 import { updateLocation } from 'app/core/actions';
+import { serializeStateToUrlParam, parseUrlState } from 'app/core/utils/explore';
 import { StoreState } from 'app/types';
-import { ExploreUrlState } from 'app/types/explore';
+import { ExploreState } from 'app/types/explore';
 
-import Explore, { ExploreState } from './Explore';
-import { DEFAULT_RANGE } from './TimePicker';
-
-export function parseUrlState(initial: string | undefined): ExploreUrlState {
-  if (initial) {
-    try {
-      return JSON.parse(decodeURI(initial));
-    } catch (e) {
-      console.error(e);
-    }
-  }
-  return { datasource: null, queries: [], range: DEFAULT_RANGE };
-}
-
-export function serializeStateToUrlParam(state: ExploreState): string {
-  const urlState: ExploreUrlState = {
-    datasource: state.datasourceName,
-    queries: state.queries.map(q => ({ query: q.query })),
-    range: state.range,
-  };
-  return JSON.stringify(urlState);
-}
+import Explore from './Explore';
 
 interface WrapperProps {
   backendSrv?: any;

public/app/types/explore.ts

@@ -9,6 +9,31 @@ export interface Query {
   key?: string;
 }
 
+export interface ExploreState {
+  datasource: any;
+  datasourceError: any;
+  datasourceLoading: boolean | null;
+  datasourceMissing: boolean;
+  datasourceName?: string;
+  graphResult: any;
+  history: any[];
+  latency: number;
+  loading: any;
+  logsResult: any;
+  queries: Query[];
+  queryErrors: any[];
+  queryHints: any[];
+  range: Range;
+  requestOptions: any;
+  showingGraph: boolean;
+  showingLogs: boolean;
+  showingTable: boolean;
+  supportsGraph: boolean | null;
+  supportsLogs: boolean | null;
+  supportsTable: boolean | null;
+  tableResult: any;
+}
+
 export interface ExploreUrlState {
   datasource: string;
   queries: Query[];