diff --git a/public/app/features/panel/panel_ctrl.ts b/public/app/features/panel/panel_ctrl.ts index 4fe76913896..1aa53438b7e 100644 --- a/public/app/features/panel/panel_ctrl.ts +++ b/public/app/features/panel/panel_ctrl.ts @@ -45,16 +45,24 @@ export class PanelCtrl { } $scope.$on("refresh", () => this.refresh()); + $scope.$on("component-did-mount", () => this.panelDidMount()); + $scope.$on("$destroy", () => { this.events.emit('panel-teardown'); this.events.removeAllListeners(); }); + + this.calculatePanelHeight(); } init() { this.events.on('panel-size-changed', this.onSizeChanged.bind(this)); - this.publishAppEvent('panel-initialized', {scope: this.$scope}); this.events.emit('panel-initialized'); + this.publishAppEvent('panel-initialized', {scope: this.$scope}); + } + + panelDidMount() { + this.events.emit('component-did-mount'); } renderingCompleted() { @@ -62,7 +70,6 @@ export class PanelCtrl { } refresh() { - this.setPanelHeight(); this.events.emit('refresh', null); } @@ -171,14 +178,14 @@ export class PanelCtrl { } setPanelHeight() { - if (this.$scope.setPanelHeight) { - this.$scope.setPanelHeight(); - } + // console.log('setPanelHeight'); + // if (this.$scope.setPanelHeight) { + // this.$scope.setPanelHeight(); + // } } render(payload?) { this.timing.renderStart = new Date().getTime(); - this.setPanelHeight(); this.events.emit('render', payload); } diff --git a/public/app/features/panel/panel_directive.ts b/public/app/features/panel/panel_directive.ts index e48280d5eb9..959ec80f085 100644 --- a/public/app/features/panel/panel_directive.ts +++ b/public/app/features/panel/panel_directive.ts @@ -73,7 +73,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); @@ -85,28 +85,11 @@ module.directive('grafanaPanel', function($rootScope, $document) { ctrl.dashboard.setPanelFocus(0); } - // set initial height - if (!ctrl.height) { - ctrl.calculatePanelHeight(); - if (ctrl.__proto__.constructor.scrollable) { - panelContent.addClass('panel-content--scrollable'); - - panelScrollbar = new GeminiScrollbar({ - autoshow: false, - element: panelContent[0] - }).create(); - } - } - - function setPanelHeight() { - panelContent.height(ctrl.height); + function panelHeightUpdated() { if (panelScrollbar) { panelScrollbar.update(); } - } - - if (ctrl.__proto__.constructor.scrollable) { - ctrl.$scope.setPanelHeight = setPanelHeight; + lastHeight = ctrl.height; } // set initial transparency @@ -115,11 +98,20 @@ module.directive('grafanaPanel', function($rootScope, $document) { panelContainer.addClass('panel-transparent', true); } + if (ctrl.__proto__.constructor.scrollable) { + panelContent.addClass('panel-content--scrollable'); + panelScrollbar = new GeminiScrollbar({ autoshow: false, element: panelContent[0] }).create(); + } + + // update scrollbar after mounting + ctrl.events.on('component-did-mount', () => { + panelHeightUpdated(); + }); + ctrl.events.on('render', () => { - // if (lastHeight !== ctrl.height) { - // panelContent.css({'height': ctrl.height + 'px'}); - // lastHeight = ctrl.height; - // } + if (lastHeight !== ctrl.height) { + panelHeightUpdated(); + } if (transparentLastState !== ctrl.panel.transparent) { panelContainer.toggleClass('panel-transparent', ctrl.panel.transparent === true); diff --git a/public/app/features/plugins/plugin_component.ts b/public/app/features/plugins/plugin_component.ts index 791dab8f347..f94708bfab4 100644 --- a/public/app/features/plugins/plugin_component.ts +++ b/public/app/features/plugins/plugin_component.ts @@ -221,6 +221,7 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $ setTimeout(function() { elem.append(child); scope.$applyAsync(function() { + scope.$broadcast('component-did-mount'); scope.$broadcast('refresh'); }); }); diff --git a/public/app/plugins/panel/dashlist/module.ts b/public/app/plugins/panel/dashlist/module.ts index 9e7abfd7ecc..2b1630760ed 100644 --- a/public/app/plugins/panel/dashlist/module.ts +++ b/public/app/plugins/panel/dashlist/module.ts @@ -1,5 +1,3 @@ -/// - import _ from 'lodash'; import {PanelCtrl} from 'app/plugins/sdk'; import {impressions} from 'app/features/dashboard/impression_store'; diff --git a/public/app/plugins/panel/pluginlist/module.ts b/public/app/plugins/panel/pluginlist/module.ts index 6c67a66302b..15043e3efc7 100644 --- a/public/app/plugins/panel/pluginlist/module.ts +++ b/public/app/plugins/panel/pluginlist/module.ts @@ -1,10 +1,9 @@ -/// - import _ from 'lodash'; import {PanelCtrl} from '../../../features/panel/panel_ctrl'; class PluginListCtrl extends PanelCtrl { static templateUrl = 'module.html'; + static scrollable = true; pluginList: any[]; viewModel: any; @@ -15,6 +14,7 @@ class PluginListCtrl extends PanelCtrl { /** @ngInject */ constructor($scope, $injector, private backendSrv, private $location) { super($scope, $injector); + _.defaults(this.panel, this.panelDefaults); this.events.on('init-edit-mode', this.onInitEditMode.bind(this)); diff --git a/public/app/plugins/panel/singlestat/module.ts b/public/app/plugins/panel/singlestat/module.ts index 93901c0423a..5f2b0a7cec6 100644 --- a/public/app/plugins/panel/singlestat/module.ts +++ b/public/app/plugins/panel/singlestat/module.ts @@ -395,11 +395,6 @@ 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'); - } function applyColoringThresholds(value, valueString) { if (!panel.colorValue) { @@ -561,8 +556,6 @@ 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 = { @@ -607,8 +600,6 @@ class SingleStatCtrl extends MetricsPanelCtrl { }); data.colorMap = panel.colors; - setElementHeight(); - var body = panel.gauge.show ? '' : getBigValueHtml(); if (panel.colorBackground) { diff --git a/public/img/tgr288gear_line6.pdf b/public/img/tgr288gear_line6.pdf new file mode 100644 index 00000000000..21cc75e1e33 Binary files /dev/null and b/public/img/tgr288gear_line6.pdf differ