feat(panels): MetricsPanelCtrl is starting to work

public/app/features/panel/metrics_panel_ctrl.ts

@@ -1,28 +1,58 @@
 ///<reference path="../../headers/common.d.ts" />
 
 import config from 'app/core/config';
+import $ from 'jquery';
+import _ from 'lodash';
+import kbn from 'app/core/utils/kbn';
 import {PanelCtrl} from './panel_ctrl';
 
+import * as rangeUtil from '../../core/utils/rangeutil';
+import * as dateMath from '../../core/utils/datemath';
+
 class MetricsPanelCtrl extends PanelCtrl {
   error: boolean;
   loading: boolean;
   datasource: any;
   $q: any;
+  $timeout: any;
   datasourceSrv: any;
+  timeSrv: any;
+  timing: any;
+  range: any;
+  rangeRaw: any;
+  interval: any;
+  resolution: any;
+  timeInfo: any;
+  skipDataOnInit: boolean;
+  datasources: any[];
 
   constructor($scope, $injector) {
     super($scope, $injector);
+
+    // make metrics tab the default
     this.editorTabIndex = 1;
+    this.$q = $injector.get('$q');
+    this.$timeout = $injector.get('$timeout');
+    this.datasourceSrv = $injector.get('datasourceSrv');
+    this.timeSrv = $injector.get('timeSrv');
 
     if (!this.panel.targets) {
       this.panel.targets = [{}];
     }
+
+    // hookup initial data fetch
+    this.$timeout(() => {
+      if (!this.skipDataOnInit) {
+        this.getData();
+      }
+    }, 30);;
   }
 
   initEditorTabs() {
     this.addEditorTab('Metrics', () => {
       return { templateUrl: 'public/app/partials/metrics.html' };
     });
+    this.datasources = this.datasourceSrv.getMetricSources();
   }
 
   refresh() {
@@ -31,7 +61,7 @@ class MetricsPanelCtrl extends PanelCtrl {
 
   refreshData(data) {
     // null op
-    return data;
+    return this.$q.when(data);
   }
 
   loadSnapshot(data) {
@@ -40,8 +70,10 @@ class MetricsPanelCtrl extends PanelCtrl {
   }
 
   getData() {
+    // ignore fetching data if another panel is in fullscreen
     if (this.otherPanelInFullscreenMode()) { return; }
 
+    // if we have snapshot data use that
     if (this.panel.snapshotData) {
       if (this.loadSnapshot) {
         this.loadSnapshot(this.panel.snapshotData);
@@ -49,21 +81,128 @@ class MetricsPanelCtrl extends PanelCtrl {
       return;
     }
 
+    // clear loading/error state
     delete this.error;
     this.loading = true;
 
+    // load datasource service
     this.datasourceSrv.get(this.panel.datasource).then(datasource => {
       this.datasource = datasource;
-      return this.refreshData(this.datasource) || this.$q.when({});
+      return this.refreshData(this.datasource);
     }).then(() => {
       this.loading = false;
-    }, err => {
+    }).catch(err => {
       console.log('Panel data error:', err);
       this.loading = false;
       this.error = err.message || "Timeseries data request error";
       this.inspector = {error: err};
     });
   }
+
+  setTimeQueryStart() {
+    this.timing = {};
+    this.timing.queryStart = new Date().getTime();
+  }
+
+  setTimeQueryEnd() {
+    this.timing.queryEnd = new Date().getTime();
+  }
+
+  setTimeRenderStart() {
+    this.timing = this.timing || {};
+    this.timing.renderStart = new Date().getTime();
+  }
+
+  setTimeRenderEnd() {
+    this.timing.renderEnd = new Date().getTime();
+  }
+
+  updateTimeRange() {
+    this.range = this.timeSrv.timeRange();
+    this.rangeRaw = this.timeSrv.timeRange(false);
+
+    this.applyPanelTimeOverrides();
+
+    if (this.panel.maxDataPoints) {
+      this.resolution = this.panel.maxDataPoints;
+    } else {
+      this.resolution = Math.ceil($(window).width() * (this.panel.span / 12));
+    }
+
+    var panelInterval = this.panel.interval;
+    var datasourceInterval = (this.datasource || {}).interval;
+      this.interval = kbn.calculateInterval(this.range, this.resolution, panelInterval || datasourceInterval);
+    };
+
+    applyPanelTimeOverrides() {
+      this.timeInfo = '';
+
+      // check panel time overrrides
+      if (this.panel.timeFrom) {
+        var timeFromInfo = rangeUtil.describeTextRange(this.panel.timeFrom);
+        if (timeFromInfo.invalid) {
+          this.timeInfo = 'invalid time override';
+          return;
+        }
+
+        if (_.isString(this.rangeRaw.from)) {
+          var timeFromDate = dateMath.parse(timeFromInfo.from);
+          this.timeInfo = timeFromInfo.display;
+          this.rangeRaw.from = timeFromInfo.from;
+          this.rangeRaw.to = timeFromInfo.to;
+          this.range.from = timeFromDate;
+        }
+      }
+
+      if (this.panel.timeShift) {
+        var timeShiftInfo = rangeUtil.describeTextRange(this.panel.timeShift);
+        if (timeShiftInfo.invalid) {
+          this.timeInfo = 'invalid timeshift';
+          return;
+        }
+
+        var timeShift = '-' + this.panel.timeShift;
+        this.timeInfo += ' timeshift ' + timeShift;
+        this.range.from = dateMath.parseDateMath(timeShift, this.range.from, false);
+        this.range.to = dateMath.parseDateMath(timeShift, this.range.to, true);
+
+        this.rangeRaw = this.range;
+      }
+
+      if (this.panel.hideTimeOverride) {
+        this.timeInfo = '';
+      }
+    };
+
+  issueQueries() {
+    if (!this.panel.targets || this.panel.targets.length === 0) {
+      return this.$q.when([]);
+    }
+
+    this.updateTimeRange();
+
+    var metricsQuery = {
+      range: this.range,
+      rangeRaw: this.rangeRaw,
+      interval: this.interval,
+      targets: this.panel.targets,
+      format: this.panel.renderer === 'png' ? 'png' : 'json',
+      maxDataPoints: this.resolution,
+      scopedVars: this.panel.scopedVars,
+      cacheTimeout: this.panel.cacheTimeout
+    };
+
+    this.setTimeQueryStart();
+    return this.datasource.query(metricsQuery).then(results => {
+      this.setTimeQueryEnd();
+
+      if (this.dashboard.snapshot) {
+        this.panel.snapshotData = results;
+      }
+
+      return results;
+    });
+  }
 }
 
 export {MetricsPanelCtrl};

public/app/features/panel/panel.ts

@@ -25,11 +25,14 @@ class PanelDirective {
       controllerAs: 'ctrl',
       bindToController: true,
       scope: {dashboard: "=", panel: "=", row: "="},
-      link: this.link
+      link: (scope, elem, attrs, ctrl) => {
+        ctrl.init();
+        this.link(scope, elem, attrs, ctrl);
+      }
     };
   }
 
-  link(scope, elem) {
+  link(scope, elem, attrs, ctrl) {
     return null;
   }
 }

public/app/features/panel/panel_ctrl.ts

@@ -27,11 +27,14 @@ export class PanelCtrl {
     this.name = plugin.name;
     this.icon = plugin.info.icon;
     this.editorTabIndex = 0;
-    this.publishAppEvent('panel-instantiated', {scope: $scope});
 
     $scope.$on("refresh", () => this.refresh());
   }
 
+  init() {
+    this.publishAppEvent('panel-instantiated', {scope: this.$scope});
+  }
+
   refresh() {
     return;
   }

public/app/headers/common.d.ts

@@ -5,7 +5,7 @@ declare var System: any;
 
 // dummy modules
 declare module 'app/core/config' {
-  var config : any;
+  var config: any;
   export default config;
 }
 
@@ -35,7 +35,7 @@ declare module 'app/core/utils/kbn' {
 }
 
 declare module 'app/core/store' {
-  var store : any;
+  var store: any;
   export default store;
 }
 

public/app/partials/metrics.html

@@ -18,7 +18,7 @@
 			</button>
 
 			<ul class="dropdown-menu" role="menu">
-				<li ng-repeat="datasource in ctrl.getMetricSources()" role="menuitem" ng-hide="ctrl.datasource.meta.builtIn">
+				<li ng-repeat="datasource in ctrl.datasources" role="menuitem" ng-hide="ctrl.datasource.meta.builtIn">
 					<a ng-click="ctrl.addDataQuery(datasource);">{{datasource.name}}</a>
 				</li>
 			</ul>
@@ -38,7 +38,7 @@
 		</button>
 
 		<ul class="dropdown-menu" role="menu">
-			<li ng-repeat="datasource in ctrl.getMetricSources()" role="menuitem">
+			<li ng-repeat="datasource in ctrl.datasources" role="menuitem">
 				<a ng-click="ctrl.setDatasource(datasource);">{{datasource.name}}</a>
 			</li>
 		</ul>

public/app/plugins/panel/test/module.html

@@ -1,4 +1,5 @@
 <h2 class="text-center">
 	Test panel!
 	panel.id: {{ctrl.panel.id}}
+	data: {{ctrl.data}}
 </h2>

public/app/plugins/panel/test/module.ts

@@ -13,12 +13,13 @@ export class TestPanelCtrl extends MetricsPanelCtrl {
     super($scope, $injector);
   }
 
-  initEditorTabs() {
-    super.initEditorTabs();
-  }
-
   refreshData(data) {
-    console.log('refreshData: ', data);
+    return this.issueQueries().then(res => {
+      this.data = res.data[0].target;
+      console.log('issueQueries', res);
+    }).catch(err => {
+      console.log('Errrrr! in test panel', err);
+    });
   }
 }