Merge pull request #12596 from grafana/davkal/explore-datasource-selector

Explore Datasource selector

Merge pull request #12596 from grafana/davkal/explore-datasource-selector
Explore Datasource selector
a13b4f2b · David · GitHub · 0f6e5e29 · eb2abe80 · a13b4f2b
Commit a13b4f2b authored Jul 16, 2018 by David Committed by GitHub Jul 16, 2018
7 changed files
--- a/pkg/plugins/datasource_plugin.go
+++ b/pkg/plugins/datasource_plugin.go
@@ -22,6 +22,7 @@ type DataSourcePlugin struct {
 	Annotations  bool              `json:"annotations"`
 	Metrics      bool              `json:"metrics"`
 	Alerting     bool              `json:"alerting"`
+	Explore      bool              `json:"explore"`
 	QueryOptions map[string]bool   `json:"queryOptions,omitempty"`
 	BuiltIn      bool              `json:"builtIn,omitempty"`
 	Mixed        bool              `json:"mixed,omitempty"`

--- a/public/app/containers/Explore/Explore.tsx
+++ b/public/app/containers/Explore/Explore.tsx
 import React from 'react';
 import { hot } from 'react-hot-loader';
+import Select from 'react-select';
 import colors from 'app/core/utils/colors';
 import TimeSeries from 'app/core/time_series2';
+import { decodePathComponent } from 'app/core/utils/location_util';
 import ElapsedTime from './ElapsedTime';
 import QueryRows from './QueryRows';
 import Graph from './Graph';
 import Table from './Table';
 import TimePicker, { DEFAULT_RANGE } from './TimePicker';
-import { DatasourceSrv } from 'app/features/plugins/datasource_srv';
 import { buildQueryOptions, ensureQueries, generateQueryKey, hasQuery } from './utils/query';
-import { decodePathComponent } from 'app/core/utils/location_util';
 function makeTimeSeriesList(dataList, options) {
  return dataList.map((seriesData, index) => {
@@ -34,6 +35,7 @@ function parseInitialState(initial) {
  try {
    const parsed = JSON.parse(decodePathComponent(initial));
    return {
+      datasource: parsed.datasource,
      queries: parsed.queries.map(q => q.query),
      range: parsed.range,
    };
@@ -46,8 +48,10 @@ function parseInitialState(initial) {
 interface IExploreState {
  datasource: any;
  datasourceError: any;
-  datasourceLoading: any;
+  datasourceLoading: boolean | null;
+  datasourceMissing: boolean;
  graphResult: any;
+  initialDatasource?: string;
  latency: number;
  loading: any;
  queries: any;
@@ -61,16 +65,16 @@ interface IExploreState {
 // @observer
 export class Explore extends React.Component<any, IExploreState> {
-  datasourceSrv: DatasourceSrv;
  constructor(props) {
    super(props);
-    const { range, queries } = parseInitialState(props.routeParams.initial);
+    const { datasource, queries, range } = parseInitialState(props.routeParams.initial);
    this.state = {
      datasource: null,
      datasourceError: null,
-      datasourceLoading: true,
+      datasourceLoading: null,
+      datasourceMissing: false,
      graphResult: null,
+      initialDatasource: datasource,
      latency: 0,
      loading: false,
      queries: ensureQueries(queries),
@@ -85,19 +89,49 @@ export class Explore extends React.Component<any, IExploreState> {
  }
  async componentDidMount() {
-    const datasource = await this.props.datasourceSrv.get();
+    const { datasourceSrv } = this.props;
-    const testResult = await datasource.testDatasource();
+    const { initialDatasource } = this.state;
-    if (testResult.status === 'success') {
+    if (!datasourceSrv) {
-      this.setState({ datasource, datasourceError: null, datasourceLoading: false }, () => this.handleSubmit());
+      throw new Error('No datasource service passed as props.');
+    }
+    const datasources = datasourceSrv.getExploreSources();
+    if (datasources.length > 0) {
+      this.setState({ datasourceLoading: true });
+      // Priority: datasource in url, default datasource, first explore datasource
+      let datasource;
+      if (initialDatasource) {
+        datasource = await datasourceSrv.get(initialDatasource);
      } else {
-      this.setState({ datasource: null, datasourceError: testResult.message, datasourceLoading: false });
+        datasource = await datasourceSrv.get();
+      }
+      if (!datasource.meta.explore) {
+        datasource = await datasourceSrv.get(datasources[0].name);
+      }
+      this.setDatasource(datasource);
+    } else {
+      this.setState({ datasourceMissing: true });
    }
  }
  componentDidCatch(error) {
+    this.setState({ datasourceError: error });
    console.error(error);
  }
+  async setDatasource(datasource) {
+    try {
+      const testResult = await datasource.testDatasource();
+      if (testResult.status === 'success') {
+        this.setState({ datasource, datasourceError: null, datasourceLoading: false }, () => this.handleSubmit());
+      } else {
+        this.setState({ datasource: datasource, datasourceError: testResult.message, datasourceLoading: false });
+      }
+    } catch (error) {
+      const message = (error && error.statusText) || error;
+      this.setState({ datasource: datasource, datasourceError: message, datasourceLoading: false });
+    }
+  }
  handleAddQueryRow = index => {
    const { queries } = this.state;
    const nextQueries = [
@@ -108,6 +142,18 @@ export class Explore extends React.Component<any, IExploreState> {
    this.setState({ queries: nextQueries });
  };
+  handleChangeDatasource = async option => {
+    this.setState({
+      datasource: null,
+      datasourceError: null,
+      datasourceLoading: true,
+      graphResult: null,
+      tableResult: null,
+    });
+    const datasource = await this.props.datasourceSrv.get(option.value);
+    this.setDatasource(datasource);
+  };
  handleChangeQuery = (query, index) => {
    const { queries } = this.state;
    const nextQuery = {
@@ -226,11 +272,12 @@ export class Explore extends React.Component<any, IExploreState> {
  };
  render() {
-    const { position, split } = this.props;
+    const { datasourceSrv, position, split } = this.props;
    const {
      datasource,
      datasourceError,
      datasourceLoading,
+      datasourceMissing,
      graphResult,
      latency,
      loading,
@@ -247,6 +294,12 @@ export class Explore extends React.Component<any, IExploreState> {
    const graphButtonActive = showingBoth || showingGraph ? 'active' : '';
    const tableButtonActive = showingBoth || showingTable ? 'active' : '';
    const exploreClass = split ? 'explore explore-split' : 'explore';
+    const datasources = datasourceSrv.getExploreSources().map(ds => ({
+      value: ds.name,
+      label: ds.name,
+    }));
+    const selectedDatasource = datasource ? datasource.name : undefined;
    return (
      <div className={exploreClass}>
        <div className="navbar">
@@ -264,6 +317,18 @@ export class Explore extends React.Component<any, IExploreState> {
              </button>
            </div>
          )}
+          {!datasourceMissing ? (
+            <div className="navbar-buttons">
+              <Select
+                className="datasource-picker"
+                clearable={false}
+                onChange={this.handleChangeDatasource}
+                options={datasources}
+                placeholder="Loading datasources..."
+                value={selectedDatasource}
+              />
+            </div>
+          ) : null}
          <div className="navbar__spacer" />
          {position === 'left' && !split ? (
            <div className="navbar-buttons">
@@ -291,13 +356,15 @@ export class Explore extends React.Component<any, IExploreState> {
        {datasourceLoading ? <div className="explore-container">Loading datasource...</div> : null}
+        {datasourceMissing ? (
+          <div className="explore-container">Please add a datasource that supports Explore (e.g., Prometheus).</div>
+        ) : null}
        {datasourceError ? (
-          <div className="explore-container" title={datasourceError}>
+          <div className="explore-container">Error connecting to datasource. [{datasourceError}]</div>
-            Error connecting to datasource.
-          </div>
        ) : null}
-        {datasource ? (
+        {datasource && !datasourceError ? (
          <div className="explore-container">
            <QueryRows
              queries={queries}

--- a/public/app/features/plugins/datasource_srv.ts
+++ b/public/app/features/plugins/datasource_srv.ts
@@ -34,13 +34,13 @@ export class DatasourceSrv {
  }
  loadDatasource(name) {
-    var dsConfig = config.datasources[name];
+    const dsConfig = config.datasources[name];
    if (!dsConfig) {
      return this.$q.reject({ message: 'Datasource named ' + name + ' was not found' });
    }
-    var deferred = this.$q.defer();
+    const deferred = this.$q.defer();
-    var pluginDef = dsConfig.meta;
+    const pluginDef = dsConfig.meta;
    importPluginModule(pluginDef.module)
      .then(plugin => {
@@ -55,7 +55,7 @@ export class DatasourceSrv {
          throw new Error('Plugin module is missing Datasource constructor');
        }
-        var instance = this.$injector.instantiate(plugin.Datasource, { instanceSettings: dsConfig });
+        const instance = this.$injector.instantiate(plugin.Datasource, { instanceSettings: dsConfig });
        instance.meta = pluginDef;
        instance.name = name;
        this.datasources[name] = instance;
@@ -73,7 +73,7 @@ export class DatasourceSrv {
  }
  getAnnotationSources() {
-    var sources = [];
+    const sources = [];
    this.addDataSourceVariables(sources);
@@ -86,6 +86,14 @@ export class DatasourceSrv {
    return sources;
  }
+  getExploreSources() {
+    const { datasources } = config;
+    const es = Object.keys(datasources)
+      .map(name => datasources[name])
+      .filter(ds => ds.meta && ds.meta.explore);
+    return _.sortBy(es, ['name']);
+  }
  getMetricSources(options) {
    var metricSources = [];
@@ -155,3 +163,4 @@ export class DatasourceSrv {
 }
 coreModule.service('datasourceSrv', DatasourceSrv);
+export default DatasourceSrv;
--- a/public/app/features/plugins/specs/datasource_srv.jest.ts
+++ b/public/app/features/plugins/specs/datasource_srv.jest.ts
@@ -17,9 +17,35 @@ const templateSrv = {
 describe('datasource_srv', function() {
  let _datasourceSrv = new DatasourceSrv({}, {}, {}, templateSrv);
-  let metricSources;
+  describe('when loading explore sources', () => {
+    beforeEach(() => {
+      config.datasources = {
+        explore1: {
+          name: 'explore1',
+          meta: { explore: true, metrics: true },
+        },
+        explore2: {
+          name: 'explore2',
+          meta: { explore: true, metrics: false },
+        },
+        nonExplore: {
+          name: 'nonExplore',
+          meta: { explore: false, metrics: true },
+        },
+      };
+    });
+    it('should return list of explore sources', () => {
+      const exploreSources = _datasourceSrv.getExploreSources();
+      expect(exploreSources.length).toBe(2);
+      expect(exploreSources[0].name).toBe('explore1');
+      expect(exploreSources[1].name).toBe('explore2');
+    });
+  });
  describe('when loading metric sources', () => {
+    let metricSources;
    let unsortedDatasources = {
      mmm: {
        type: 'test-db',

--- a/public/app/plugins/datasource/prometheus/datasource.ts
+++ b/public/app/plugins/datasource/prometheus/datasource.ts
@@ -357,6 +357,7 @@ export class PrometheusDatasource {
      state = {
        ...state,
        queries,
+        datasource: this.name,
      };
    }
    return state;

--- a/public/app/plugins/datasource/prometheus/plugin.json
+++ b/public/app/plugins/datasource/prometheus/plugin.json
@@ -2,21 +2,30 @@
  "type": "datasource",
  "name": "Prometheus",
  "id": "prometheus",
  "includes": [
-    {"type": "dashboard", "name": "Prometheus Stats", "path": "dashboards/prometheus_stats.json"},
+    {
-    {"type": "dashboard", "name": "Prometheus 2.0 Stats", "path": "dashboards/prometheus_2_stats.json"},
+      "type": "dashboard",
-    {"type": "dashboard", "name": "Grafana Stats", "path": "dashboards/grafana_stats.json"}
+      "name": "Prometheus Stats",
+      "path": "dashboards/prometheus_stats.json"
+    },
+    {
+      "type": "dashboard",
+      "name": "Prometheus 2.0 Stats",
+      "path": "dashboards/prometheus_2_stats.json"
+    },
+    {
+      "type": "dashboard",
+      "name": "Grafana Stats",
+      "path": "dashboards/grafana_stats.json"
+    }
  ],
  "metrics": true,
  "alerting": true,
  "annotations": true,
+  "explore": true,
  "queryOptions": {
    "minInterval": true
  },
  "info": {
    "description": "Prometheus Data Source for Grafana",
    "author": {
@@ -28,7 +37,10 @@
      "large": "img/prometheus_logo.svg"
    },
    "links": [
-      {"name": "Prometheus", "url": "https://prometheus.io/"}
+      {
+        "name": "Prometheus",
+        "url": "https://prometheus.io/"
+      }
    ],
    "version": "5.0.0"
  }

--- a/public/sass/pages/_explore.scss
+++ b/public/sass/pages/_explore.scss
@@ -60,6 +60,10 @@
    flex-wrap: wrap;
  }
+  .datasource-picker {
+    min-width: 10rem;
+  }
  .timepicker {
    display: flex;