progress on scrollable panels work

830c307b · Torkel Ödegaard · 741e5a38 · 830c307b · 830c307b · 830c307b
Commit 830c307b authored Nov 21, 2017 by Torkel Ödegaard
12 changed files
--- a/public/app/core/components/scroll/scroll.ts
+++ b/public/app/core/components/scroll/scroll.ts
-///<reference path="../../../headers/common.d.ts" />
 import GeminiScrollbar from 'gemini-scrollbar';
 import coreModule from 'app/core/core_module';

--- a/public/app/features/dashboard/dashgrid/DashboardPanel.tsx
+++ b/public/app/features/dashboard/dashgrid/DashboardPanel.tsx
@@ -47,7 +47,7 @@ export class DashboardPanel extends React.Component<DashboardPanelProps, any> {
    }
    return (
-      <div ref={element => this.element = element} />
+      <div ref={element => this.element = element} className="panel-height-helper" />
    );
  }
 }

--- a/public/app/features/dashboard/dashgrid/PanelLoader.ts
+++ b/public/app/features/dashboard/dashgrid/PanelLoader.ts
@@ -12,7 +12,7 @@ export class PanelLoader {
  }
  load(elem, panel, dashboard): AttachedPanel {
-    var template = '<plugin-component type="panel"></plugin-component>';
+    var template = '<plugin-component type="panel" class="panel-height-helper"></plugin-component>';
    var panelScope = this.$rootScope.$new();
    panelScope.panel = panel;
    panelScope.dashboard = dashboard;

--- a/public/app/features/panel/panel_ctrl.ts
+++ b/public/app/features/panel/panel_ctrl.ts
@@ -5,9 +5,7 @@ import {appEvents, profiler} from 'app/core/core';
 import Remarkable from 'remarkable';
 import {GRID_CELL_HEIGHT, GRID_CELL_VMARGIN} from 'app/core/constants';
-const TITLE_HEIGHT = 25;
+const TITLE_HEIGHT = 27;
-const EMPTY_TITLE_HEIGHT = 9;
-const PANEL_PADDING = 5;
 const PANEL_BORDER = 2;
 import {Emitter} from 'app/core/core';
@@ -31,7 +29,6 @@ export class PanelCtrl {
  containerHeight: any;
  events: Emitter;
  timing: any;
-  scrollable: boolean;
  constructor($scope, $injector) {
    this.$injector = $injector;
@@ -40,7 +37,6 @@ export class PanelCtrl {
    this.editorTabIndex = 0;
    this.events = this.panel.events;
    this.timing = {};
-    this.scrollable = false;
    var plugin = config.panels[this.panel.type];
    if (plugin) {
@@ -66,7 +62,6 @@ export class PanelCtrl {
  }
  refresh() {
-    this.setPanelHeight();
    this.events.emit('refresh', null);
  }
@@ -75,7 +70,6 @@ export class PanelCtrl {
  }
  changeView(fullscreen, edit) {
-    this.setPanelHeight();
    this.publishAppEvent('panel-change-view', {
      fullscreen: fullscreen, edit: edit, panelId: this.panel.id
    });
@@ -169,18 +163,13 @@ export class PanelCtrl {
      this.containerHeight = this.panel.gridPos.h * GRID_CELL_HEIGHT + ((this.panel.gridPos.h-1) * GRID_CELL_VMARGIN);
    }
-    this.height = this.containerHeight - (PANEL_BORDER + PANEL_PADDING + (this.panel.title ? TITLE_HEIGHT : EMPTY_TITLE_HEIGHT));
+    console.log(this.containerHeight);
-  }
+    this.height = this.containerHeight - (PANEL_BORDER + TITLE_HEIGHT);
+    console.log(PANEL_BORDER + TITLE_HEIGHT);
-  setPanelHeight() {
-    if (this.scrollable) {
-      this.$scope.setPanelHeight();
-    }
  }
  render(payload?) {
    this.timing.renderStart = new Date().getTime();
-    this.setPanelHeight();
    this.events.emit('render', payload);
  }

--- a/public/app/features/panel/panel_directive.ts
+++ b/public/app/features/panel/panel_directive.ts
-///<reference path="../../headers/common.d.ts" />
 import angular from 'angular';
 import Drop from 'tether-drop';
+import GeminiScrollbar from 'gemini-scrollbar';
 var module = angular.module('grafana.directives');
@@ -21,14 +20,9 @@ var panelTemplate = `
    </div>
    <div class="panel-content">
-      <div gemini-scrollbar ng-if="ctrl.scrollable">
-        <div class="panel-content--scrollable">
      <ng-transclude></ng-transclude>
    </div>
  </div>
-      <ng-transclude ng-if="!ctrl.scrollable"></ng-transclude>
-    </div>
-  </div>
  <div class="panel-full-edit" ng-if="ctrl.editMode">
    <div class="tabbed-view tabbed-view--panel-edit">
@@ -78,7 +72,7 @@ module.directive('grafanaPanel', function($rootScope, $document) {
      var lastHasAlertRule = false;
      var lastAlertState;
      var hasAlertRule;
-      var lastHeight = 0;
+      // var lastHeight = 0;
      function mouseEnter() {
        panelContainer.toggleClass('panel-hover-highlight', true);
@@ -90,16 +84,17 @@ module.directive('grafanaPanel', function($rootScope, $document) {
        ctrl.dashboard.setPanelFocus(0);
      }
-      function setPanelHeight() {
-        panelContent.height(ctrl.height);
-      }
-      ctrl.$scope.setPanelHeight = setPanelHeight;
      // set initial height
-      if (!ctrl.containerHeight) {
+      if (!ctrl.height) {
        ctrl.calculatePanelHeight();
-        panelContainer.css({minHeight: ctrl.containerHeight});
+        if (ctrl.__proto__.constructor.scrollable) {
-        lastHeight = ctrl.containerHeight;
+          panelContent.addClass('panel-content--scrollable');
+          var myScrollbar = new GeminiScrollbar({
+            autoshow: false,
+            element: panelContent[0]
+          }).create();
+        }
      }
      // set initial transparency
@@ -109,10 +104,10 @@ module.directive('grafanaPanel', function($rootScope, $document) {
      }
      ctrl.events.on('render', () => {
-        if (lastHeight !== ctrl.containerHeight) {
+        // if (lastHeight !== ctrl.height) {
-          panelContainer.css({minHeight: ctrl.containerHeight});
+        //   panelContent.css({'height': ctrl.height + 'px'});
-          lastHeight = ctrl.containerHeight;
+        //   lastHeight = ctrl.height;
-        }
+        // }
        if (transparentLastState !== ctrl.panel.transparent) {
          panelContainer.toggleClass('panel-transparent', ctrl.panel.transparent === true);

--- a/public/app/features/plugins/plugin_component.ts
+++ b/public/app/features/plugins/plugin_component.ts
@@ -68,7 +68,7 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $
    var componentInfo: any = {
      name: 'panel-plugin-' + scope.panel.type,
      bindings: {dashboard: "=", panel: "=", row: "="},
-      attrs: {dashboard: "dashboard", panel: "panel"},
+      attrs: {dashboard: "dashboard", panel: "panel", class: "panel-height-helper"},
    };
    let panelInfo = config.panels[scope.panel.type];
@@ -98,7 +98,7 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $
      PanelCtrl.templatePromise = getTemplate(PanelCtrl).then(template => {
        PanelCtrl.templateUrl = null;
-        PanelCtrl.template = `<grafana-panel ctrl="ctrl">${template}</grafana-panel>`;
+        PanelCtrl.template = `<grafana-panel ctrl="ctrl" class="panel-height-helper">${template}</grafana-panel>`;
        return componentInfo;
      });

--- a/public/app/plugins/panel/alertlist/module.ts
+++ b/public/app/plugins/panel/alertlist/module.ts
@@ -9,6 +9,7 @@ import * as dateMath from 'app/core/utils/datemath';
 class AlertListPanel extends PanelCtrl {
  static templateUrl = 'module.html';
+  static scrollable = true;
  showOptions = [
    { text: 'Current state', value: 'current' },
@@ -38,7 +39,6 @@ class AlertListPanel extends PanelCtrl {
  constructor($scope, $injector, private backendSrv) {
    super($scope, $injector);
    _.defaults(this.panel, this.panelDefaults);
-    this.scrollable = true;
    this.events.on('init-edit-mode', this.onInitEditMode.bind(this));
    this.events.on('refresh', this.onRefresh.bind(this));

--- a/public/app/plugins/panel/dashlist/module.ts
+++ b/public/app/plugins/panel/dashlist/module.ts
@@ -6,6 +6,7 @@ import {impressions} from 'app/features/dashboard/impression_store';
 class DashListCtrl extends PanelCtrl {
  static templateUrl = 'module.html';
+  static scrollable = true;
  groups: any[];
  modes: any[];
@@ -25,7 +26,6 @@ class DashListCtrl extends PanelCtrl {
  constructor($scope, $injector, private backendSrv, private dashboardSrv) {
    super($scope, $injector);
    _.defaults(this.panel, this.panelDefaults);
-    this.scrollable = true;
    if (this.panel.tag) {
      this.panel.tags = [this.panel.tag];

--- a/public/app/plugins/panel/singlestat/module.ts
+++ b/public/app/plugins/panel/singlestat/module.ts
@@ -395,9 +395,10 @@ class SingleStatCtrl extends MetricsPanelCtrl {
    var data, linkInfo;
    var $panelContainer = elem.find('.panel-container');
    elem = elem.find('.singlestat-panel');
+    console.log('singlestat element', elem.length);
    function setElementHeight() {
-      elem.css('height', ctrl.height + 'px');
+      /// elem.css('height', ctrl.height + 'px');
    }
    function applyColoringThresholds(value, valueString) {
@@ -560,6 +561,8 @@ class SingleStatCtrl extends MetricsPanelCtrl {
        plotCss.height = Math.floor(height * 0.25) + "px";
      }
+      console.log('singlestat height', ctrl.height);
+      console.log('singlestat plotCss', plotCss.height);
      plotCanvas.css(plotCss);
      var options = {
@@ -596,6 +599,8 @@ class SingleStatCtrl extends MetricsPanelCtrl {
      if (!ctrl.data) { return; }
      data = ctrl.data;
+      console.log('singlestat', elem.html());
      // get thresholds
      data.thresholds = panel.thresholds.split(',').map(function(strVale) {
        return Number(strVale.trim());

--- a/public/app/plugins/panel/text/module.ts
+++ b/public/app/plugins/panel/text/module.ts
@@ -5,6 +5,7 @@ import {PanelCtrl} from 'app/plugins/sdk';
 export class TextPanelCtrl extends PanelCtrl {
  static templateUrl = `public/app/plugins/panel/text/module.html`;
+  static scrollable = true;
  remarkable: any;
  content: string;
@@ -19,11 +20,11 @@ export class TextPanelCtrl extends PanelCtrl {
    super($scope, $injector);
    _.defaults(this.panel, this.panelDefaults);
-    this.scrollable = true;
    this.events.on('init-edit-mode', this.onInitEditMode.bind(this));
    this.events.on('refresh', this.onRefresh.bind(this));
    this.events.on('render', this.onRender.bind(this));
    $scope.$watch('ctrl.panel.content',
     _.throttle(() => {
       this.render();

--- a/public/sass/components/_panel_singlestat.scss
+++ b/public/sass/components/_panel_singlestat.scss
@@ -2,6 +2,7 @@
  position: relative;
  display: table;
  width: 100%;
+  height: 100%;
 }
 .singlestat-panel-value-container {

--- a/public/sass/pages/_dashboard.scss
+++ b/public/sass/pages/_dashboard.scss
@@ -23,6 +23,11 @@ div.flot-text {
  }
 }
+.panel-height-helper {
+  display: block;
+  height: 100%;
+}
 .panel-container {
  background-color: $panel-bg;
  border: $panel-border;
@@ -38,12 +43,11 @@ div.flot-text {
 .panel-content {
  padding: 0px 10px 5px 10px;
-  height: 100%;
+  height: calc(100% - 27px);
  &--scrollable {
    // Add space for scrollbar
    padding-right: 10px;
-    padding-left: 6px;
  }
 }