From 61c48aecc233e0c8b0ad72ba6bbebfe748c3a129 Mon Sep 17 00:00:00 2001
From: Carl Bergquist <carl.bergquist@gmail.com>
Date: Thu, 3 Nov 2016 11:01:21 +0100
Subject: [PATCH] [Alertlist] Set max-height to respect row height (#6454)

* feat(alertlist): max-height to respect row height

closes #6417

* feat(alertlist): use pre calculated panel.height instead

* style(alertlist): rearrange variable order
---
 public/app/plugins/panel/alertlist/editor.html | 8 --------
 public/app/plugins/panel/alertlist/module.html | 2 +-
 public/app/plugins/panel/alertlist/module.ts   | 3 +++
 public/sass/_grafana.scss                      | 1 +
 public/sass/components/_panel_alertlist.scss   | 3 +++
 5 files changed, 8 insertions(+), 9 deletions(-)
 create mode 100644 public/sass/components/_panel_alertlist.scss

diff --git a/public/app/plugins/panel/alertlist/editor.html b/public/app/plugins/panel/alertlist/editor.html
index b75a7e453aa..b2038df34b8 100644
--- a/public/app/plugins/panel/alertlist/editor.html
+++ b/public/app/plugins/panel/alertlist/editor.html
@@ -20,12 +20,4 @@
     <gf-form-switch class="gf-form" label="Execution error" label-class="width-10" checked="ctrl.stateFilter['execution_error']" on-change="ctrl.updateStateFilter()"></gf-form-switch>
     <gf-form-switch class="gf-form" label="Alerting" label-class="width-10" checked="ctrl.stateFilter['alerting']" on-change="ctrl.updateStateFilter()"></gf-form-switch>
   </div>
-
-  <div class="section gf-form-group" ng-if="ctrl.panel.show == 'changes'">
-    <!-- <h5 class="section-heading">Current state</h5> -->
-	</div>
-
-  <div class="section gf-form-group" ng-if="ctrl.panel.show == 'current'">
-    <!-- <h5 class="section-heading">Current state</h5> -->
-  </div>
 </div>
diff --git a/public/app/plugins/panel/alertlist/module.html b/public/app/plugins/panel/alertlist/module.html
index 13a32f1eb1e..2940e2ae33e 100644
--- a/public/app/plugins/panel/alertlist/module.html
+++ b/public/app/plugins/panel/alertlist/module.html
@@ -1,4 +1,4 @@
-<div class="panel-alert-list">
+<div class="panel-alert-list" style="{{ctrl.contentHeight}}">
   <section class="card-section card-list-layout-list" ng-if="ctrl.panel.show === 'current'">
     <ol class="card-list">
       <li class="card-item-wrapper" ng-repeat="alert in ctrl.currentAlerts">
diff --git a/public/app/plugins/panel/alertlist/module.ts b/public/app/plugins/panel/alertlist/module.ts
index 96d7ad18e7c..543c5f04833 100644
--- a/public/app/plugins/panel/alertlist/module.ts
+++ b/public/app/plugins/panel/alertlist/module.ts
@@ -17,6 +17,7 @@ class AlertListPanel extends PanelCtrl {
     {text: 'Recent state changes', value: 'changes'}
   ];
 
+  contentHeight: string;
   stateFilter: any = {};
   currentAlerts: any = [];
   alertHistory: any = [];
@@ -27,6 +28,7 @@ class AlertListPanel extends PanelCtrl {
     stateFilter: []
   };
 
+
   /** @ngInject */
   constructor($scope, $injector, private $location, private backendSrv, private timeSrv, private templateSrv) {
     super($scope, $injector);
@@ -55,6 +57,7 @@ class AlertListPanel extends PanelCtrl {
   }
 
   onRender() {
+    this.contentHeight = "max-height: " + this.height + "px;";
     if (this.panel.show === 'current') {
       this.getCurrentAlertState();
     }
diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss
index 936ce0af4d6..60f0797dda4 100644
--- a/public/sass/_grafana.scss
+++ b/public/sass/_grafana.scss
@@ -41,6 +41,7 @@
 @import "components/tags";
 @import "components/panel_graph";
 @import "components/submenu";
+@import "components/panel_alertlist";
 @import "components/panel_dashlist";
 @import "components/panel_pluginlist";
 @import "components/panel_singlestat";
diff --git a/public/sass/components/_panel_alertlist.scss b/public/sass/components/_panel_alertlist.scss
new file mode 100644
index 00000000000..41f63b61bd4
--- /dev/null
+++ b/public/sass/components/_panel_alertlist.scss
@@ -0,0 +1,3 @@
+.panel-alert-list {
+  overflow-y: scroll;
+}