feat(panels): panel refactorings

public/app/features/panel/metrics_panel_ctrl.ts

@@ -60,7 +60,7 @@ class MetricsPanelCtrl extends PanelCtrl {
     // if we have snapshot data use that
     if (this.panel.snapshotData) {
       this.updateTimeRange();
-      this.events.emit('load-snapshot', this.panel.snapshotData);
+      this.events.emit('data-snapshot-load', this.panel.snapshotData);
       return;
     }
 

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

@@ -109,6 +109,7 @@ class GraphCtrl extends MetricsPanelCtrl {
 
     this.events.on('data-received', this.onDataReceived.bind(this));
     this.events.on('data-error', this.onDataError.bind(this));
+    this.events.on('data-snapshot-load', this.onDataSnapshotLoad.bind(this));
   }
 
   initEditMode() {
@@ -150,9 +151,9 @@ class GraphCtrl extends MetricsPanelCtrl {
     this.publishAppEvent('zoom-out', evt);
   }
 
-  loadSnapshot(snapshotData) {
+  onDataSnapshotLoad(snapshotData) {
     this.annotationsPromise = this.annotationsSrv.getAnnotations(this.dashboard);
-    this.dataHandler(snapshotData);
+    this.onDataReceived(snapshotData.data);
   }
 
   onDataError(err) {

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

@@ -56,6 +56,7 @@ class SingleStatCtrl extends MetricsPanelCtrl {
 
     this.events.on('data-received', this.onDataReceived.bind(this));
     this.events.on('data-error', this.onDataError.bind(this));
+    this.events.on('data-snapshot-load', this.onDataSnapshotLoad.bind(this));
   }
 
   initEditMode() {
@@ -71,9 +72,8 @@ class SingleStatCtrl extends MetricsPanelCtrl {
     this.render();
   }
 
-  loadSnapshot(snapshotData) {
-    // give element time to get attached and get dimensions
-    this.$timeout(() => this.dataHandler(snapshotData), 50);
+  onDataSnapshotLoad(snapshotData) {
+    this.onDataReceived(snapshotData.data);
   }
 
   onDataError(err) {
@@ -284,8 +284,14 @@ class SingleStatCtrl extends MetricsPanelCtrl {
 
     function addSparkline() {
       var width = elem.width() + 20;
-      var height = ctrl.height;
+      if (width < 30) {
+        // element has not gotten it's width yet
+        // delay sparkline render
+        setTimeout(addSparkline, 30);
+        return;
+      }
 
+      var height = ctrl.height;
       var plotCanvas = $('<div></div>');
       var plotCss: any = {};
       plotCss.position = 'absolute';

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

@@ -60,6 +60,7 @@ class TablePanelCtrl extends MetricsPanelCtrl {
 
     this.events.on('data-received', this.onDataReceived.bind(this));
     this.events.on('data-error', this.onDataError.bind(this));
+    this.events.on('data-snapshot-load', this.onDataSnapshotLoad.bind(this));
   }
 
   initEditMode() {
@@ -86,6 +87,10 @@ class TablePanelCtrl extends MetricsPanelCtrl {
     return super.issueQueries(datasource);
   }
 
+  onDataSnapshotLoad(data) {
+    this.onDataReceived(data.data);
+  }
+
   onDataError(err) {
     this.dataRaw = [];
     this.render();
@@ -141,15 +146,13 @@ class TablePanelCtrl extends MetricsPanelCtrl {
     var formaters = [];
 
     function getTableHeight() {
-      var panelHeight = ctrl.height || ctrl.panel.height || ctrl.row.height;
-      if (_.isString(panelHeight)) {
-        panelHeight = parseInt(panelHeight.replace('px', ''), 10);
-      }
+      var panelHeight = ctrl.height;
+
       if (pageCount > 1) {
-        panelHeight -= 28;
+        panelHeight -= 26;
       }
 
-      return (panelHeight - 60) + 'px';
+      return (panelHeight - 31) + 'px';
     }
 
     function appendTableRows(tbodyElem) {