Merge branch 'develop-scrollable-panels' into develop

package.json

@@ -117,14 +117,16 @@
     "brace": "^0.10.0",
     "classnames": "^2.2.5",
     "clipboard": "^1.7.1",
+    "d3": "^4.11.0",
+    "d3-scale-chromatic": "^1.1.1",
     "eventemitter3": "^2.0.2",
     "file-saver": "^1.3.3",
-    "gemini-scrollbar": "https://github.com/grafana/gemini-scrollbar#grafana",
     "jquery": "^3.2.1",
     "lodash": "^4.17.4",
     "moment": "^2.18.1",
     "mousetrap": "^1.6.0",
     "ngreact": "^0.4.1",
+    "perfect-scrollbar": "^1.2.0",
     "prop-types": "^15.6.0",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
@@ -134,8 +136,6 @@
     "rxjs": "^5.4.3",
     "tether": "^1.4.0",
     "tether-drop": "https://github.com/torkelo/drop",
-    "tinycolor2": "^1.4.1",
-    "d3": "^4.11.0",
-    "d3-scale-chromatic": "^1.1.1"
+    "tinycolor2": "^1.4.1"
   }
 }

public/app/core/components/scroll/scroll.ts

@@ -1,22 +1,20 @@
-///<reference path="../../../headers/common.d.ts" />
-
-import GeminiScrollbar from 'gemini-scrollbar';
+import PerfectScrollbar from 'perfect-scrollbar';
 import coreModule from 'app/core/core_module';
 
 export function geminiScrollbar() {
   return {
     restrict: 'A',
     link: function(scope, elem, attrs) {
-      var myScrollbar = new GeminiScrollbar({
-        autoshow: false,
-        element: elem[0]
-      }).create();
+
+      let scrollbar = new PerfectScrollbar(elem[0]);
+      console.log('scrllbar!');
 
       scope.$on('$destroy', () => {
-        myScrollbar.destroy();
+        scrollbar.destroy();
       });
+
     }
   };
 }
 
-coreModule.directive('geminiScrollbar', geminiScrollbar);
+coreModule.directive('grafanaScrollbar', geminiScrollbar);

public/app/core/components/search/search.html

@@ -40,51 +40,49 @@
 	</div>
 
 	<div class="search-dropdown" ng-class="{'search-dropdown--fade-in': ctrl.openCompleted}">
-		<div gemini-scrollbar>
-			<div class="search-results-container" ng-if="ctrl.tagsMode">
-				<div ng-repeat="tag in ctrl.results" class="pointer" style="width: 180px; float: left;"
-																												 ng-class="{'selected': $index === ctrl.selectedIndex }"
-														 ng-click="ctrl.filterByTag(tag.term, $event)">
-					<a class="search-result-tag label label-tag" tag-color-from-name="tag.term">
-						<i class="fa fa-tag"></i>
-						<span>{{tag.term}} &nbsp;({{tag.count}})</span>
-					</a>
-				</div>
+		<div class="search-results-container" ng-if="ctrl.tagsMode">
+			<div ng-repeat="tag in ctrl.results" class="pointer" style="width: 180px; float: left;"
+																												ng-class="{'selected': $index === ctrl.selectedIndex }"
+														ng-click="ctrl.filterByTag(tag.term, $event)">
+				<a class="search-result-tag label label-tag" tag-color-from-name="tag.term">
+					<i class="fa fa-tag"></i>
+					<span>{{tag.term}} &nbsp;({{tag.count}})</span>
+				</a>
 			</div>
+		</div>
 
-			<div class="search-results-container" ng-if="!ctrl.tagsMode">
-				<h6 ng-hide="ctrl.results.length">No dashboards matching your query were found.</h6>
+		<div class="search-results-container" ng-if="!ctrl.tagsMode" grafana-scrollbar>
+			<h6 ng-hide="ctrl.results.length">No dashboards matching your query were found.</h6>
 
-				<div ng-repeat="section in ctrl.results" class="search-section">
-					<a class="search-section__header pointer" ng-hide="section.hideHeader" ng-click="ctrl.toggleFolder(section)">
-						<i class="search-section__header__icon" ng-class="section.icon"></i>
-						<span class="search-section__header__text">{{::section.title}}</span>
-						<i class="fa fa-minus search-section__header__toggle" ng-show="section.expanded"></i>
-						<i class="fa fa-plus search-section__header__toggle" ng-hide="section.expanded"></i>
-					</a>
+			<div ng-repeat="section in ctrl.results" class="search-section">
+				<a class="search-section__header pointer" ng-hide="section.hideHeader" ng-click="ctrl.toggleFolder(section)">
+					<i class="search-section__header__icon" ng-class="section.icon"></i>
+					<span class="search-section__header__text">{{::section.title}}</span>
+					<i class="fa fa-minus search-section__header__toggle" ng-show="section.expanded"></i>
+					<i class="fa fa-plus search-section__header__toggle" ng-hide="section.expanded"></i>
+				</a>
 
-					<div ng-if="section.expanded">
-						<a ng-repeat="item in section.items" class="search-item" ng-class="{'selected': item.selected}" ng-href="{{::item.url}}">
-							<span class="search-item__icon">
-								<i class="fa fa-th-large"></i>
+				<div ng-if="section.expanded">
+					<a ng-repeat="item in section.items" class="search-item" ng-class="{'selected': item.selected}" ng-href="{{::item.url}}">
+						<span class="search-item__icon">
+							<i class="fa fa-th-large"></i>
+						</span>
+						<span class="search-item__body">
+							<div class="search-item__body-title">{{::item.title}}</div>
+							<div class="search-item__body-sub-title" ng-show="item.folderTitle && section.hideHeader">
+								<i class="fa fa-folder-o"></i>
+								{{::item.folderTitle}}
+							</div>
+						</span>
+						<span class="search-item__tags">
+							<span ng-click="ctrl.filterByTag(tag, $event)" ng-repeat="tag in item.tags" tag-color-from-name="tag"  class="label label-tag">
+								{{tag}}
 							</span>
-							<span class="search-item__body">
-								<div class="search-item__body-title">{{::item.title}}</div>
-								<div class="search-item__body-sub-title" ng-show="item.folderTitle && section.hideHeader">
-									<i class="fa fa-folder-o"></i>
-									{{::item.folderTitle}}
-								</div>
-							</span>
-							<span class="search-item__tags">
-								<span ng-click="ctrl.filterByTag(tag, $event)" ng-repeat="tag in item.tags" tag-color-from-name="tag"  class="label label-tag">
-									{{tag}}
-								</span>
-							</span>
-							<span class="search-item__actions">
-								<i class="fa" ng-class="{'fa-star': item.isStarred, 'fa-star-o': !item.isStarred}"></i>
-							</span>
-						</a>
-					</div>
+						</span>
+						<span class="search-item__actions">
+							<i class="fa" ng-class="{'fa-star': item.isStarred, 'fa-star-o': !item.isStarred}"></i>
+						</span>
+					</a>
 				</div>
 			</div>
 		</div>
@@ -95,4 +93,5 @@
 			</a>
 		</div>
 	</div>
+</div>
 

public/app/features/admin/partials/configuration_home.html

@@ -1,35 +1,33 @@
-<div class="scroll-canvas">
-  <div gemini-scrollbar>
-    <navbar model="ctrl.navModel"></navbar>
-    <div class="page-container">
-      <div class="page-header">
-        <page-h1 model="ctrl.navModel"></page-h1>
-      </div>
+<div class="scroll-canvas" grafana-scrollbar>
+	<navbar model="ctrl.navModel"></navbar>
+	<div class="page-container">
+		<div class="page-header">
+			<page-h1 model="ctrl.navModel"></page-h1>
+		</div>
 
-      <section class="card-section card-list-layout-grid">
-        <ol class="card-list" >
-          <li class="card-item-wrapper" ng-repeat="navItem in ctrl.navModel.node.children">
-            <a class="card-item" ng-href="{{::navItem.url}}">
-              <div class="card-item-header">
-                <div class="card-item-type">
-                </div>
-              </div>
-              <div class="card-item-body">
-                <figure class="card-item-figure">
-                  <i class="{{navItem.icon}}"></i>
-                </figure>
-                <div class="card-item-details">
-                  <div class="card-item-name">
-                    {{navItem.text}}
-                  </div>
-                  <div class="card-item-sub-name">
-                    {{navItem.description}}
-                  </div>
-                </div>
-              </div>
-            </a>
-          </li>
-        </ol>
-      </section>
-    </div>
-  </div>
+		<section class="card-section card-list-layout-grid">
+			<ol class="card-list" >
+				<li class="card-item-wrapper" ng-repeat="navItem in ctrl.navModel.node.children">
+					<a class="card-item" ng-href="{{::navItem.url}}">
+						<div class="card-item-header">
+							<div class="card-item-type">
+							</div>
+						</div>
+						<div class="card-item-body">
+							<figure class="card-item-figure">
+								<i class="{{navItem.icon}}"></i>
+							</figure>
+							<div class="card-item-details">
+								<div class="card-item-name">
+									{{navItem.text}}
+								</div>
+								<div class="card-item-sub-name">
+									{{navItem.description}}
+								</div>
+							</div>
+						</div>
+					</a>
+				</li>
+			</ol>
+		</section>
+	</div>

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" />
     );
   }
 }

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;

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 EMPTY_TITLE_HEIGHT = 9;
-const PANEL_PADDING = 5;
+const TITLE_HEIGHT = 27;
 const PANEL_BORDER = 2;
 
 import {Emitter} from 'app/core/core';
@@ -48,16 +46,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() {
@@ -166,7 +172,7 @@ 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));
+    this.height = this.containerHeight - (PANEL_BORDER + TITLE_HEIGHT);
   }
 
   render(payload?) {

public/app/features/panel/panel_directive.ts

@@ -1,7 +1,6 @@
-///<reference path="../../headers/common.d.ts" />
-
 import angular from 'angular';
 import Drop from 'tether-drop';
+import PerfectScrollbar from 'perfect-scrollbar';
 
 var module = angular.module('grafana.directives');
 
@@ -62,9 +61,11 @@ module.directive('grafanaPanel', function($rootScope, $document) {
     scope: { ctrl: "=" },
     link: function(scope, elem) {
       var panelContainer = elem.find('.panel-container');
+      var panelContent = elem.find('.panel-content');
       var cornerInfoElem = elem.find('.panel-info-corner');
       var ctrl = scope.ctrl;
       var infoDrop;
+      var panelScrollbar;
 
       // the reason for handling these classes this way is for performance
       // limit the watchers on panels etc
@@ -84,11 +85,12 @@ module.directive('grafanaPanel', function($rootScope, $document) {
         ctrl.dashboard.setPanelFocus(0);
       }
 
-      // set initial height
-      if (!ctrl.containerHeight) {
-        ctrl.calculatePanelHeight();
-        panelContainer.css({minHeight: ctrl.containerHeight});
-        lastHeight = ctrl.containerHeight;
+      function panelHeightUpdated() {
+        panelContent.height(ctrl.height);
+        if (panelScrollbar) {
+          panelScrollbar.update();
+        }
+        lastHeight = ctrl.height;
       }
 
       // set initial transparency
@@ -97,10 +99,16 @@ module.directive('grafanaPanel', function($rootScope, $document) {
         panelContainer.addClass('panel-transparent', true);
       }
 
+      // update scrollbar after mounting
+      ctrl.events.on('component-did-mount', () => {
+        if (ctrl.__proto__.constructor.scrollable) {
+          panelScrollbar = new PerfectScrollbar(panelContent[0]);
+        }
+      });
+
       ctrl.events.on('render', () => {
-        if (lastHeight !== ctrl.containerHeight) {
-          panelContainer.css({minHeight: ctrl.containerHeight});
-          lastHeight = ctrl.containerHeight;
+        if (lastHeight !== ctrl.height) {
+          panelHeightUpdated();
         }
 
         if (transparentLastState !== ctrl.panel.transparent) {
@@ -181,6 +189,10 @@ module.directive('grafanaPanel', function($rootScope, $document) {
         if (infoDrop) {
           infoDrop.destroy();
         }
+
+        if (panelScrollbar) {
+          panelScrollbar.update();
+        }
       });
     }
   };
@@ -190,11 +202,11 @@ module.directive('panelHelpCorner', function($rootScope) {
   return {
     restrict: 'E',
     template: `
-      <span class="alert-error panel-error small pointer" ng-if="ctrl.error" ng-click="ctrl.openInspector()">
-        <span data-placement="top" bs-tooltip="ctrl.error">
-          <i class="fa fa-exclamation"></i><span class="panel-error-arrow"></span>
-        </span>
-      </span>
+    <span class="alert-error panel-error small pointer" ng-if="ctrl.error" ng-click="ctrl.openInspector()">
+    <span data-placement="top" bs-tooltip="ctrl.error">
+    <i class="fa fa-exclamation"></i><span class="panel-error-arrow"></span>
+    </span>
+    </span>
     `,
     link: function(scope, elem) {
     }

public/app/features/plugins/partials/ds_edit.html

@@ -1,90 +1,88 @@
-<div class="scroll-canvas">
-	<div gemini-scrollbar>
-		<navbar model="ctrl.navModel"></navbar>
-		<div class="page-container">
-			<div class="page-header">
-				<page-h1 model="ctrl.navModel"></page-h1>
+<div class="scroll-canvas" grafana-scrollbar>
+	<navbar model="ctrl.navModel"></navbar>
+	<div class="page-container">
+		<div class="page-header">
+			<page-h1 model="ctrl.navModel"></page-h1>
 
-				<div ng-if="ctrl.current.readOnly" class="grafana-info-box span8">Disclaimer. This datasource was added by config and cannot be modified using the UI. Please contact your server admin to update this datasource.</div>
+			<div ng-if="ctrl.current.readOnly" class="grafana-info-box span8">Disclaimer. This datasource was added by config and cannot be modified using the UI. Please contact your server admin to update this datasource.</div>
 
-				<div class="page-header-tabs" ng-show="ctrl.hasDashboards">
-					<ul class="gf-tabs">
-						<li class="gf-tabs-item">
-							<a class="gf-tabs-link" ng-click="ctrl.tabIndex = 0" ng-class="{active: ctrl.tabIndex === 0}">
-								Config
-							</a>
-						</li>
-						<li class="gf-tabs-item">
-							<a class="gf-tabs-link" ng-click="ctrl.tabIndex = 1" ng-class="{active: ctrl.tabIndex === 1}">
-								Dashboards
-							</a>
-						</li>
-					</ul>
-				</div>
+			<div class="page-header-tabs" ng-show="ctrl.hasDashboards">
+				<ul class="gf-tabs">
+					<li class="gf-tabs-item">
+						<a class="gf-tabs-link" ng-click="ctrl.tabIndex = 0" ng-class="{active: ctrl.tabIndex === 0}">
+							Config
+						</a>
+					</li>
+					<li class="gf-tabs-item">
+						<a class="gf-tabs-link" ng-click="ctrl.tabIndex = 1" ng-class="{active: ctrl.tabIndex === 1}">
+							Dashboards
+						</a>
+					</li>
+				</ul>
 			</div>
+		</div>
 
-			<div ng-if="ctrl.tabIndex === 0" class="tab-content">
+		<div ng-if="ctrl.tabIndex === 0" class="tab-content">
 
-				<form name="ctrl.editForm" ng-if="ctrl.current">
-					<div class="gf-form-group">
-						<div class="gf-form-inline">
-							<div class="gf-form max-width-30">
-								<span class="gf-form-label width-7">Name</span>
-								<input class="gf-form-input max-width-23" type="text" ng-model="ctrl.current.name" placeholder="name" required>
-								<info-popover offset="0px -135px" mode="right-absolute">
-									The name is used when you select the data source in panels.
-									The <em>Default</em> data source is preselected in new
-									panels.
-								</info-popover>
-							</div>
-							<gf-form-switch class="gf-form" label="Default" checked="ctrl.current.isDefault" switch-class="max-width-6"></gf-form-switch>
+			<form name="ctrl.editForm" ng-if="ctrl.current">
+				<div class="gf-form-group">
+					<div class="gf-form-inline">
+						<div class="gf-form max-width-30">
+							<span class="gf-form-label width-7">Name</span>
+							<input class="gf-form-input max-width-23" type="text" ng-model="ctrl.current.name" placeholder="name" required>
+							<info-popover offset="0px -135px" mode="right-absolute">
+								The name is used when you select the data source in panels.
+								The <em>Default</em> data source is preselected in new
+								panels.
+							</info-popover>
 						</div>
+						<gf-form-switch class="gf-form" label="Default" checked="ctrl.current.isDefault" switch-class="max-width-6"></gf-form-switch>
+					</div>
 
-						<div class="gf-form">
-							<span class="gf-form-label width-7">Type</span>
-							<div class="gf-form-select-wrapper max-width-23">
-								<select class="gf-form-input" ng-model="ctrl.current.type" ng-options="v.id as v.name for v in ctrl.types" ng-change="ctrl.userChangedType()"></select>
-							</div>
+					<div class="gf-form">
+						<span class="gf-form-label width-7">Type</span>
+						<div class="gf-form-select-wrapper max-width-23">
+							<select class="gf-form-input" ng-model="ctrl.current.type" ng-options="v.id as v.name for v in ctrl.types" ng-change="ctrl.userChangedType()"></select>
 						</div>
 					</div>
+				</div>
 
-					<div class="alert alert-info gf-form-group" ng-if="ctrl.datasourceMeta.state === 'alpha'">
-						This plugin is marked as being in alpha state, which means it is in early development phase and
-						updates will include breaking changes.
-					</div>
+				<div class="alert alert-info gf-form-group" ng-if="ctrl.datasourceMeta.state === 'alpha'">
+					This plugin is marked as being in alpha state, which means it is in early development phase and
+					updates will include breaking changes.
+				</div>
 
-					<rebuild-on-change property="ctrl.datasourceMeta.id">
-						<plugin-component type="datasource-config-ctrl">
-						</plugin-component>
-					</rebuild-on-change>
+				<rebuild-on-change property="ctrl.datasourceMeta.id">
+					<plugin-component type="datasource-config-ctrl">
+					</plugin-component>
+				</rebuild-on-change>
 
-					<div ng-if="ctrl.testing" class="gf-form-group section">
-						<h5 ng-show="!ctrl.testing.done">Testing.... <i class="fa fa-spiner fa-spin"></i></h5>
-						<div class="alert-{{ctrl.testing.status}} alert" ng-show="ctrl.testing.done">
-							<div class="alert-icon">
-								<i class="fa fa-exclamation-triangle" ng-show="ctrl.testing.status === 'error'"></i>
-								<i class="fa fa-check" ng-show="ctrl.testing.status !== 'error'"></i>
-							</div>
-							<div class="alert-body">
-								<div class="alert-title">{{ctrl.testing.message}}</div>
-							</div>
+				<div ng-if="ctrl.testing" class="gf-form-group section">
+					<h5 ng-show="!ctrl.testing.done">Testing.... <i class="fa fa-spiner fa-spin"></i></h5>
+					<div class="alert-{{ctrl.testing.status}} alert" ng-show="ctrl.testing.done">
+						<div class="alert-icon">
+							<i class="fa fa-exclamation-triangle" ng-show="ctrl.testing.status === 'error'"></i>
+							<i class="fa fa-check" ng-show="ctrl.testing.status !== 'error'"></i>
+						</div>
+						<div class="alert-body">
+							<div class="alert-title">{{ctrl.testing.message}}</div>
 						</div>
 					</div>
+				</div>
 
-					<div class="gf-form-button-row">
-						<button type="submit" class="btn btn-success" ng-disabled="ctrl.current.readOnly"  ng-click="ctrl.saveChanges()">Save</button>
-						<button type="submit" class="btn btn-danger" ng-disabled="ctrl.current.readOnly"  ng-show="!ctrl.isNew" ng-click="ctrl.delete()">
-							Delete
-						</button>
-						<a class="btn btn-link" href="datasources">Cancel</a>
-					</div>
+				<div class="gf-form-button-row">
+					<button type="submit" class="btn btn-success" ng-disabled="ctrl.current.readOnly"  ng-click="ctrl.saveChanges()">Save</button>
+					<button type="submit" class="btn btn-danger" ng-disabled="ctrl.current.readOnly"  ng-show="!ctrl.isNew" ng-click="ctrl.delete()">
+						Delete
+					</button>
+					<a class="btn btn-link" href="datasources">Cancel</a>
+				</div>
 
-					<br />
-					<br />
-					<br />
+				<br />
+				<br />
+				<br />
 
-				</form>
-			</div>
+			</form>
 		</div>
 	</div>
 </div>

public/app/features/plugins/partials/ds_list.html

@@ -1,51 +1,49 @@
-<div class="scroll-canvas">
-  <div gemini-scrollbar>
-    <navbar model="ctrl.navModel"></navbar>
-    <div class="page-container">
-      <div class="page-header">
-        <page-h1 model="ctrl.navModel"></page-h1>
+<div class="scroll-canvas" grafana-scrollbar>
+	<navbar model="ctrl.navModel"></navbar>
+	<div class="page-container">
+		<div class="page-header">
+			<page-h1 model="ctrl.navModel"></page-h1>
 
-        <a class="page-header__cta btn btn-success" href="datasources/new">
-          Add data source
-        </a>
-      </div>
+			<a class="page-header__cta btn btn-success" href="datasources/new">
+				Add data source
+			</a>
+		</div>
 
-      <section class="card-section" layout-mode>
-        <layout-selector></layout-selector>
+		<section class="card-section" layout-mode>
+			<layout-selector></layout-selector>
 
-        <ol class="card-list" >
-          <li class="card-item-wrapper" ng-repeat="ds in ctrl.datasources">
-            <a class="card-item" href="datasources/edit/{{ds.id}}/">
-              <div class="card-item-header">
-                <div class="card-item-type">
-                  {{ds.type}}
-                </div>
-              </div>
-              <div class="card-item-body">
-                <figure class="card-item-figure">
-                  <img ng-src="{{ds.typeLogoUrl}}">
-                </figure>
-                <div class="card-item-details">
-                  <div class="card-item-name">
-                    {{ds.name}}
-                    <span ng-if="ds.isDefault">
-                      <span class="btn btn-secondary btn-mini">default</span>
-                    </span>
-                  </div>
-                  <div class="card-item-sub-name">
-                    {{ds.url}}
-                  </div>
-                </div>
-              </div>
-            </a>
-          </li>
-        </ol>
-      </section>
+			<ol class="card-list" >
+				<li class="card-item-wrapper" ng-repeat="ds in ctrl.datasources">
+					<a class="card-item" href="datasources/edit/{{ds.id}}/">
+						<div class="card-item-header">
+							<div class="card-item-type">
+								{{ds.type}}
+							</div>
+						</div>
+						<div class="card-item-body">
+							<figure class="card-item-figure">
+								<img ng-src="{{ds.typeLogoUrl}}">
+							</figure>
+							<div class="card-item-details">
+								<div class="card-item-name">
+									{{ds.name}}
+									<span ng-if="ds.isDefault">
+										<span class="btn btn-secondary btn-mini">default</span>
+									</span>
+								</div>
+								<div class="card-item-sub-name">
+									{{ds.url}}
+								</div>
+							</div>
+						</div>
+					</a>
+				</li>
+			</ol>
+		</section>
 
-      <div ng-if="ctrl.datasources.length === 0">
-        <em>No data sources defined</em>
-      </div>
-    </div>
-  </div>
+		<div ng-if="ctrl.datasources.length === 0">
+			<em>No data sources defined</em>
+		</div>
+	</div>
 </div>
 

public/app/features/plugins/partials/plugin_list.html

@@ -1,68 +1,65 @@
-<div class="scroll-canvas">
-  <div gemini-scrollbar>
+<div class="scroll-canvas" grafana-scrollbar>
+	<navbar model="ctrl.navModel"></navbar>
 
-    <navbar model="ctrl.navModel"></navbar>
+	<div class="page-container">
+		<div class="page-header">
+			<h1>
+				<i class="icon-gf icon-gf-apps"></i>
+				Plugins <span class="muted small">(currently installed)</span>
+			</h1>
 
-    <div class="page-container">
-      <div class="page-header">
-        <h1>
-          <i class="icon-gf icon-gf-apps"></i>
-          Plugins <span class="muted small">(currently installed)</span>
-        </h1>
+			<div class="page-header-tabs">
+				<ul class="gf-tabs">
+					<li class="gf-tabs-item">
+						<a class="gf-tabs-link" href="plugins?type=panel" ng-class="{active: ctrl.tabIndex === 0}">
+							Panels
+						</a>
+					</li>
+					<li class="gf-tabs-item">
+						<a class="gf-tabs-link" href="plugins?type=datasource" ng-class="{active: ctrl.tabIndex === 1}">
+							Data sources
+						</a>
+					</li>
+					<li class="gf-tabs-item">
+						<a class="gf-tabs-link" href="plugins?type=app" ng-class="{active: ctrl.tabIndex === 2}">
+							Apps
+						</a>
+					</li>
+				</ul>
 
-        <div class="page-header-tabs">
-          <ul class="gf-tabs">
-            <li class="gf-tabs-item">
-              <a class="gf-tabs-link" href="plugins?type=panel" ng-class="{active: ctrl.tabIndex === 0}">
-                Panels
-              </a>
-            </li>
-            <li class="gf-tabs-item">
-              <a class="gf-tabs-link" href="plugins?type=datasource" ng-class="{active: ctrl.tabIndex === 1}">
-                Data sources
-              </a>
-            </li>
-            <li class="gf-tabs-item">
-              <a class="gf-tabs-link" href="plugins?type=app" ng-class="{active: ctrl.tabIndex === 2}">
-                Apps
-              </a>
-            </li>
-          </ul>
+				<a class="get-more-plugins-link" href="https://grafana.com/plugins?utm_source=grafana_plugin_list" target="_blank">
+					Find more <img src="public/img/icn-plugins-tiny.svg" />plugins on Grafana.com
+				</a>
+			</div>
+		</div>
 
-          <a class="get-more-plugins-link" href="https://grafana.com/plugins?utm_source=grafana_plugin_list" target="_blank">
-            Find more <img src="public/img/icn-plugins-tiny.svg" />plugins on Grafana.com
-          </a>
-        </div>
-      </div>
+		<section class="card-section" layout-mode>
+			<layout-selector></layout-selector>
 
-      <section class="card-section" layout-mode>
-        <layout-selector></layout-selector>
-
-        <ol class="card-list" >
-          <li class="card-item-wrapper" ng-repeat="plugin in ctrl.plugins">
-            <a class="card-item" href="plugins/{{plugin.id}}/edit">
-              <div class="card-item-header">
-                <div class="card-item-type">
-                  <i class="icon-gf icon-gf-{{plugin.type}}"></i>
-                  {{plugin.type}}
-                </div>
-                <div class="card-item-notice" ng-show="plugin.hasUpdate">
-                  <span bs-tooltip="plugin.latestVersion">Update available!</span>
-                </div>
-              </div>
-              <div class="card-item-body">
-                <figure class="card-item-figure">
-                  <img ng-src="{{plugin.info.logos.small}}">
-                </figure>
-                <div class="card-item-details">
-                  <div class="card-item-name">{{plugin.name}}</div>
-                  <div class="card-item-sub-name">By {{plugin.info.author.name}}</div>
-                </div>
-              </div>
-            </a>
-          </li>
-        </ol>
-      </section>
-    </div>
-  </div>
+			<ol class="card-list" >
+				<li class="card-item-wrapper" ng-repeat="plugin in ctrl.plugins">
+					<a class="card-item" href="plugins/{{plugin.id}}/edit">
+						<div class="card-item-header">
+							<div class="card-item-type">
+								<i class="icon-gf icon-gf-{{plugin.type}}"></i>
+								{{plugin.type}}
+							</div>
+							<div class="card-item-notice" ng-show="plugin.hasUpdate">
+								<span bs-tooltip="plugin.latestVersion">Update available!</span>
+							</div>
+						</div>
+						<div class="card-item-body">
+							<figure class="card-item-figure">
+								<img ng-src="{{plugin.info.logos.small}}">
+							</figure>
+							<div class="card-item-details">
+								<div class="card-item-name">{{plugin.name}}</div>
+								<div class="card-item-sub-name">By {{plugin.info.author.name}}</div>
+							</div>
+						</div>
+					</a>
+				</li>
+			</ol>
+		</section>
+	</div>
 </div>

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;
       });
 
@@ -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');
       });
     });

public/app/partials/dashboard.html

@@ -1,18 +1,16 @@
 <div dash-class ng-if="ctrl.dashboard">
 	<dashnav dashboard="ctrl.dashboard"></dashnav>
 
-	<div class="scroll-canvas scroll-canvas--dashboard">
-		<div gemini-scrollbar>
-			<div dash-editor-view class="dash-edit-view"></div>
-			<div class="dashboard-container">
+	<div class="scroll-canvas scroll-canvas--dashboard" grafana-scrollbar>
+		<div dash-editor-view class="dash-edit-view"></div>
+		<div class="dashboard-container">
 
-				<dashboard-submenu ng-if="ctrl.dashboard.meta.submenuEnabled" dashboard="ctrl.dashboard">
-				</dashboard-submenu>
+			<dashboard-submenu ng-if="ctrl.dashboard.meta.submenuEnabled" dashboard="ctrl.dashboard">
+			</dashboard-submenu>
 
-				<dashboard-grid get-panel-container="ctrl.getPanelContainer">
-				</dashboard-grid>
+			<dashboard-grid get-panel-container="ctrl.getPanelContainer">
+			</dashboard-grid>
 
-			</div>
 		</div>
 	</div>
 </div>

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' },

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

@@ -1,11 +1,10 @@
-///<reference path="../../../headers/common.d.ts" />
-
 import _ from 'lodash';
 import {PanelCtrl} from 'app/plugins/sdk';
 import {impressions} from 'app/features/dashboard/impression_store';
 
 class DashListCtrl extends PanelCtrl {
   static templateUrl = 'module.html';
+  static scrollable = true;
 
   groups: any[];
   modes: any[];

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

@@ -1,10 +1,9 @@
-///<reference path="../../../headers/common.d.ts" />
-
 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));

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

@@ -396,10 +396,6 @@ class SingleStatCtrl extends MetricsPanelCtrl {
     var $panelContainer = elem.find('.panel-container');
     elem = elem.find('.singlestat-panel');
 
-    function setElementHeight() {
-      elem.css('height', ctrl.height + 'px');
-    }
-
     function applyColoringThresholds(value, valueString) {
       if (!panel.colorValue) {
         return valueString;
@@ -596,14 +592,14 @@ 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());
       });
       data.colorMap = panel.colors;
 
-      setElementHeight();
-
       var body = panel.gauge.show ? '' : getBigValueHtml();
 
       if (panel.colorBackground) {

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;
@@ -23,6 +24,7 @@ export class TextPanelCtrl extends PanelCtrl {
     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();

public/sass/components/_panel_dashlist.scss

@@ -27,5 +27,3 @@
     background-color: $tight-form-func-bg;
   }
 }
-
-

public/sass/components/_panel_singlestat.scss

@@ -2,6 +2,7 @@
   position: relative;
   display: table;
   width: 100%;
+  height: 100%;
 }
 
 .singlestat-panel-value-container {

public/sass/components/_scrollbar.scss

@@ -1,3 +1,23 @@
+@import "~perfect-scrollbar/css/perfect-scrollbar.css";
+
+.ps__rail-x:hover,
+.ps__rail-y:hover,
+.ps__rail-x:focus,
+.ps__rail-y:focus {
+  background-color: transparent;
+  opacity: 0.9;
+}
+
+.ps__thumb-y {
+  @include gradient-vertical($blue, lighten($blue, 20%));
+}
+
+.ps__rail-y:hover > .ps__thumb-y,
+.ps__rail-y:focus > .ps__thumb-y {
+  background-color: #999;
+  width: 6px;
+}
+
 /**
  * gemini-scrollbar
  * @version 1.5.2

public/sass/components/_search.scss

@@ -79,6 +79,7 @@
   height: 100%;
   display: block;
   padding: $spacer;
+  position: relative;
   flex-grow: 10;
 
   .selected {

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,7 +43,9 @@ div.flot-text {
 
 .panel-content {
   padding: 0px 10px 5px 10px;
-  height: 100%;
+  height: calc(100% - 27px);
+  position: relative;
+  overflow: hidden;
 }
 
 .panel-title-container {

yarn.lock

@@ -6955,6 +6955,10 @@ pend@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
 
+perfect-scrollbar@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/perfect-scrollbar/-/perfect-scrollbar-1.2.0.tgz#ad23a2529c17f4535f21d1486f8bc3046e31a9d2"
+
 performance-now@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-0.2.0.tgz#33ef30c5c77d4ea21c5a53869d91b56d8f2555e5"