Merge remote-tracking branch 'origin/develop' into gauge-value-mappings

public/app/features/dashboard/dashgrid/PanelChrome.tsx

@@ -83,8 +83,9 @@ export class PanelChrome extends PureComponent<Props, State> {
     const { panel, dashboard, plugin } = this.props;
     const { refreshCounter, timeRange, timeInfo, renderCounter } = this.state;
 
-    const { datasource, targets } = panel;
+    const { datasource, targets, transparent } = panel;
     const PanelComponent = plugin.exports.Panel;
+    const containerClassNames = `panel-container panel-container--absolute ${transparent ? 'panel-transparent' : ''}`;
 
     return (
       <AutoSizer>
@@ -94,8 +95,17 @@ export class PanelChrome extends PureComponent<Props, State> {
           }
 
           return (
-            <div className="panel-container panel-container--absolute">
-              <PanelHeader panel={panel} dashboard={dashboard} timeInfo={timeInfo} />
+            <div className={containerClassNames}>
+              <PanelHeader
+                panel={panel}
+                dashboard={dashboard}
+                timeInfo={timeInfo}
+                title={panel.title}
+                description={panel.description}
+                scopedVars={panel.scopedVars}
+                links={panel.links}
+              />
+
               <DataPanel
                 datasource={datasource}
                 queries={targets}

public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React, { Component } from 'react';
 import classNames from 'classnames';
 
 import PanelHeaderCorner from './PanelHeaderCorner';
@@ -12,13 +12,17 @@ export interface Props {
   panel: PanelModel;
   dashboard: DashboardModel;
   timeInfo: string;
+  title?: string;
+  description?: string;
+  scopedVars?: string;
+  links?: [];
 }
 
 interface State {
   panelMenuOpen: boolean;
 }
 
-export class PanelHeader extends PureComponent<Props, State> {
+export class PanelHeader extends Component<Props, State> {
   state = {
     panelMenuOpen: false,
   };
@@ -44,7 +48,13 @@ export class PanelHeader extends PureComponent<Props, State> {
     const { panel, dashboard, timeInfo } = this.props;
     return (
       <>
-        <PanelHeaderCorner panel={panel} />
+        <PanelHeaderCorner
+          panel={panel}
+          title={panel.title}
+          description={panel.description}
+          scopedVars={panel.scopedVars}
+          links={panel.links}
+        />
         <div className={panelHeaderClass}>
           {isLoading && (
             <span className="panel-loading">

public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React, { Component } from 'react';
 import { PanelModel } from 'app/features/dashboard/panel_model';
 import Tooltip from 'app/core/components/Tooltip/Tooltip';
 import templateSrv from 'app/features/templating/template_srv';
@@ -14,9 +14,13 @@ enum InfoModes {
 
 interface Props {
   panel: PanelModel;
+  title?: string;
+  description?: string;
+  scopedVars?: string;
+  links?: [];
 }
 
-export class PanelHeaderCorner extends PureComponent<Props> {
+export class PanelHeaderCorner extends Component<Props> {
   timeSrv: TimeSrv = getTimeSrv();
 
   getInfoMode = () => {

public/app/features/dashboard/panel_model.ts

@@ -53,6 +53,7 @@ const mustKeepProps: { [str: string]: boolean } = {
   cacheTimeout: true,
   nullPointMode: true,
   cachedPluginOptions: true,
+  transparent: true,
 };
 
 const defaults: any = {
@@ -60,6 +61,7 @@ const defaults: any = {
   datasource: null,
   targets: [{}],
   cachedPluginOptions: {},
+  transparent: false,
 };
 
 export class PanelModel {
@@ -91,6 +93,7 @@ export class PanelModel {
   interval?: string;
   description?: string;
   links?: [];
+  transparent: boolean;
 
   // non persisted
   fullscreen: boolean;

public/app/features/dashboard/panellinks/link_srv.ts

@@ -73,6 +73,7 @@ export class LinkSrv {
 
   getPanelLinkAnchorInfo(link, scopedVars) {
     const info: any = {};
+    info.target = link.targetBlank ? '_blank' : '';
     if (link.type === 'absolute') {
       info.target = link.targetBlank ? '_blank' : '_self';
       info.href = this.templateSrv.replace(link.url || '', scopedVars);
@@ -80,11 +81,9 @@ export class LinkSrv {
     } else if (link.url) {
       info.href = link.url;
       info.title = this.templateSrv.replace(link.title || '', scopedVars);
-      info.target = link.targetBlank ? '_blank' : '';
     } else if (link.dashUri) {
       info.href = 'dashboard/' + link.dashUri + '?';
       info.title = this.templateSrv.replace(link.title || '', scopedVars);
-      info.target = link.targetBlank ? '_blank' : '';
     } else {
       info.title = this.templateSrv.replace(link.title || '', scopedVars);
       const slug = kbn.slugifyForUrl(link.dashboard || '');

public/app/features/explore/Explore.tsx

@@ -158,7 +158,7 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
     if (!datasourceSrv) {
       throw new Error('No datasource service passed as props.');
     }
-    const datasources = datasourceSrv.getAll();
+    const datasources = datasourceSrv.getExternal();
     const exploreDatasources = datasources.map(ds => ({
       value: ds.name,
       label: ds.name,
@@ -625,6 +625,10 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
         raw: range,
       },
       rangeRaw: range,
+      scopedVars: {
+        __interval: { text: interval, value: interval },
+        __interval_ms: { text: intervalMs, value: intervalMs },
+      },
     };
   }
 

public/app/features/panel/GeneralTabCtrl.ts

@@ -1,11 +1,35 @@
 import coreModule from 'app/core/core_module';
 
+const obj2string = obj => {
+  return Object.keys(obj)
+    .reduce((acc, curr) => acc.concat(curr + '=' + obj[curr]), [])
+    .join();
+};
+
 export class GeneralTabCtrl {
   panelCtrl: any;
 
   /** @ngInject */
   constructor($scope) {
     this.panelCtrl = $scope.ctrl;
+
+    const updatePanel = () => {
+      console.log('panel.render()');
+      this.panelCtrl.panel.render();
+    };
+
+    const generateValueFromPanel = scope => {
+      const { panel } = scope.ctrl;
+      const panelPropsToTrack = ['title', 'description', 'transparent', 'repeat', 'repeatDirection', 'minSpan'];
+      const panelPropsString = panelPropsToTrack
+        .map(prop => prop + '=' + (panel[prop] && panel[prop].toString ? panel[prop].toString() : panel[prop]))
+        .join();
+      const panelLinks = panel.links;
+      const panelLinksString = panelLinks.map(obj2string).join();
+      return panelPropsString + panelLinksString;
+    };
+
+    $scope.$watch(generateValueFromPanel, updatePanel, true);
   }
 }
 

public/app/features/panel/partials/general_tab.html

@@ -3,11 +3,11 @@
 		<h5 class="section-heading">Info</h5>
 		<div class="gf-form">
 			<span class="gf-form-label width-7">Title</span>
-			<input type="text" class="gf-form-input width-25" ng-model='ctrl.panel.title'></input>
+			<input type="text" class="gf-form-input width-25" ng-model='ctrl.panel.title' ng-model-onblur></input>
 		</div>
 		<div class="gf-form gf-form--v-stretch">
 			<span class="gf-form-label width-7">Description</span>
-			<textarea class="gf-form-input width-25" rows="3" ng-model="ctrl.panel.description"  placeholder="Panel description, supports markdown & links"></textarea>
+			<textarea class="gf-form-input width-25" rows="3" ng-model="ctrl.panel.description" ng-model-onblur placeholder="Panel description, supports markdown & links"></textarea>
 		</div>
     <gf-form-switch class="gf-form" label-class="width-7" switch-class="max-width-6" label="Transparent" checked="ctrl.panel.transparent" on-change="ctrl.render()"></gf-form-switch>
 	</div>

public/app/features/plugins/all.ts

@@ -1,3 +1,4 @@
+import './plugin_edit_ctrl';
 import './plugin_page_ctrl';
 import './import_list/import_list';
 import './ds_edit_ctrl';

public/app/features/plugins/datasource_srv.ts

@@ -78,6 +78,11 @@ export class DatasourceSrv {
     return Object.keys(datasources).map(name => datasources[name]);
   }
 
+  getExternal() {
+    const datasources = this.getAll().filter(ds => !ds.meta.builtIn);
+    return _.sortBy(datasources, ['name']);
+  }
+
   getAnnotationSources() {
     const sources = [];
 

public/app/features/plugins/plugin_edit_ctrl.ts

@@ -0,0 +1,179 @@
+import angular from 'angular';
+import _ from 'lodash';
+import Remarkable from 'remarkable';
+
+export class PluginEditCtrl {
+  model: any;
+  pluginIcon: string;
+  pluginId: any;
+  includes: any;
+  readmeHtml: any;
+  includedDatasources: any;
+  tab: string;
+  navModel: any;
+  hasDashboards: any;
+  preUpdateHook: () => any;
+  postUpdateHook: () => any;
+
+  /** @ngInject */
+  constructor(private $scope, private $rootScope, private backendSrv, private $sce, private $routeParams, navModelSrv) {
+    this.pluginId = $routeParams.pluginId;
+    this.preUpdateHook = () => Promise.resolve();
+    this.postUpdateHook = () => Promise.resolve();
+
+    this.init();
+  }
+
+  setNavModel(model) {
+    let defaultTab = 'readme';
+
+    this.navModel = {
+      main: {
+        img: model.info.logos.large,
+        subTitle: model.info.author.name,
+        url: '',
+        text: model.name,
+        breadcrumbs: [{ title: 'Plugins', url: 'plugins' }],
+        children: [
+          {
+            icon: 'fa fa-fw fa-file-text-o',
+            id: 'readme',
+            text: 'Readme',
+            url: `plugins/${this.model.id}/edit?tab=readme`,
+          },
+        ],
+      },
+    };
+
+    if (model.type === 'app') {
+      this.navModel.main.children.push({
+        icon: 'gicon gicon-cog',
+        id: 'config',
+        text: 'Config',
+        url: `plugins/${this.model.id}/edit?tab=config`,
+      });
+
+      const hasDashboards = _.find(model.includes, { type: 'dashboard' });
+
+      if (hasDashboards) {
+        this.navModel.main.children.push({
+          icon: 'gicon gicon-dashboard',
+          id: 'dashboards',
+          text: 'Dashboards',
+          url: `plugins/${this.model.id}/edit?tab=dashboards`,
+        });
+      }
+
+      defaultTab = 'config';
+    }
+
+    this.tab = this.$routeParams.tab || defaultTab;
+
+    for (const tab of this.navModel.main.children) {
+      if (tab.id === this.tab) {
+        tab.active = true;
+      }
+    }
+  }
+
+  init() {
+    return this.backendSrv.get(`/api/plugins/${this.pluginId}/settings`).then(result => {
+      this.model = result;
+      this.pluginIcon = this.getPluginIcon(this.model.type);
+
+      this.model.dependencies.plugins.forEach(plug => {
+        plug.icon = this.getPluginIcon(plug.type);
+      });
+
+      this.includes = _.map(result.includes, plug => {
+        plug.icon = this.getPluginIcon(plug.type);
+        return plug;
+      });
+
+      this.setNavModel(this.model);
+      return this.initReadme();
+    });
+  }
+
+  initReadme() {
+    return this.backendSrv.get(`/api/plugins/${this.pluginId}/markdown/readme`).then(res => {
+      const md = new Remarkable({
+        linkify: true,
+      });
+      this.readmeHtml = this.$sce.trustAsHtml(md.render(res));
+    });
+  }
+
+  getPluginIcon(type) {
+    switch (type) {
+      case 'datasource':
+        return 'icon-gf icon-gf-datasources';
+      case 'panel':
+        return 'icon-gf icon-gf-panel';
+      case 'app':
+        return 'icon-gf icon-gf-apps';
+      case 'page':
+        return 'icon-gf icon-gf-endpoint-tiny';
+      case 'dashboard':
+        return 'icon-gf icon-gf-dashboard';
+      default:
+        return 'icon-gf icon-gf-apps';
+    }
+  }
+
+  update() {
+    this.preUpdateHook()
+      .then(() => {
+        const updateCmd = _.extend(
+          {
+            enabled: this.model.enabled,
+            pinned: this.model.pinned,
+            jsonData: this.model.jsonData,
+            secureJsonData: this.model.secureJsonData,
+          },
+          {}
+        );
+        return this.backendSrv.post(`/api/plugins/${this.pluginId}/settings`, updateCmd);
+      })
+      .then(this.postUpdateHook)
+      .then(res => {
+        window.location.href = window.location.href;
+      });
+  }
+
+  importDashboards() {
+    return Promise.resolve();
+  }
+
+  setPreUpdateHook(callback: () => any) {
+    this.preUpdateHook = callback;
+  }
+
+  setPostUpdateHook(callback: () => any) {
+    this.postUpdateHook = callback;
+  }
+
+  updateAvailable() {
+    const modalScope = this.$scope.$new(true);
+    modalScope.plugin = this.model;
+
+    this.$rootScope.appEvent('show-modal', {
+      src: 'public/app/features/plugins/partials/update_instructions.html',
+      scope: modalScope,
+    });
+  }
+
+  enable() {
+    this.model.enabled = true;
+    this.model.pinned = true;
+    this.update();
+  }
+
+  disable() {
+    this.model.enabled = false;
+    this.model.pinned = false;
+    this.update();
+  }
+}
+
+angular.module('grafana.controllers').controller('PluginEditCtrl', PluginEditCtrl);

public/app/features/plugins/specs/datasource_srv.test.ts

@@ -18,6 +18,32 @@ const templateSrv = {
 describe('datasource_srv', () => {
   const _datasourceSrv = new DatasourceSrv({}, {}, {}, templateSrv);
 
+  describe('when loading external datasources', () => {
+    beforeEach(() => {
+      config.datasources = {
+        buildInDs: {
+          name: 'buildIn',
+          meta: { builtIn: true },
+        },
+        nonBuildIn: {
+          name: 'external1',
+          meta: { builtIn: false },
+        },
+        nonExplore: {
+          name: 'external2',
+          meta: {},
+        },
+      };
+    });
+
+    it('should return list of explore sources', () => {
+      const externalSources = _datasourceSrv.getExternal();
+      expect(externalSources.length).toBe(2);
+      expect(externalSources[0].name).toBe('external1');
+      expect(externalSources[1].name).toBe('external2');
+    });
+  });
+
   describe('when loading metric sources', () => {
     let metricSources;
     const unsortedDatasources = {

public/app/features/templating/template_srv.ts

@@ -17,6 +17,7 @@ export class TemplateSrv {
   constructor() {
     this.builtIns['__interval'] = { text: '1s', value: '1s' };
     this.builtIns['__interval_ms'] = { text: '100', value: '100' };
+    this.variables = [];
   }
 
   init(variables) {

public/app/plugins/datasource/influxdb/plugin.json

@@ -7,6 +7,7 @@
   "metrics": true,
   "annotations": true,
   "alerting": true,
+  "tables": true,
 
   "queryOptions": {
     "minInterval": true