[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

@@ -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="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>
     <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>
-
-  <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>
 </div>

public/app/plugins/panel/alertlist/module.html

-<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'">
   <section class="card-section card-list-layout-list" ng-if="ctrl.panel.show === 'current'">
     <ol class="card-list">
     <ol class="card-list">
       <li class="card-item-wrapper" ng-repeat="alert in ctrl.currentAlerts">
       <li class="card-item-wrapper" ng-repeat="alert in ctrl.currentAlerts">

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

@@ -17,6 +17,7 @@ class AlertListPanel extends PanelCtrl {
     {text: 'Recent state changes', value: 'changes'}
     {text: 'Recent state changes', value: 'changes'}
   ];
   ];
 
 
+  contentHeight: string;
   stateFilter: any = {};
   stateFilter: any = {};
   currentAlerts: any = [];
   currentAlerts: any = [];
   alertHistory: any = [];
   alertHistory: any = [];
@@ -27,6 +28,7 @@ class AlertListPanel extends PanelCtrl {
     stateFilter: []
     stateFilter: []
   };
   };
 
 
+
   /** @ngInject */
   /** @ngInject */
   constructor($scope, $injector, private $location, private backendSrv, private timeSrv, private templateSrv) {
   constructor($scope, $injector, private $location, private backendSrv, private timeSrv, private templateSrv) {
     super($scope, $injector);
     super($scope, $injector);
@@ -55,6 +57,7 @@ class AlertListPanel extends PanelCtrl {
   }
   }
 
 
   onRender() {
   onRender() {
+    this.contentHeight = "max-height: " + this.height + "px;";
     if (this.panel.show === 'current') {
     if (this.panel.show === 'current') {
       this.getCurrentAlertState();
       this.getCurrentAlertState();
     }
     }

public/sass/_grafana.scss

@@ -41,6 +41,7 @@
 @import "components/tags";
 @import "components/tags";
 @import "components/panel_graph";
 @import "components/panel_graph";
 @import "components/submenu";
 @import "components/submenu";
+@import "components/panel_alertlist";
 @import "components/panel_dashlist";
 @import "components/panel_dashlist";
 @import "components/panel_pluginlist";
 @import "components/panel_pluginlist";
 @import "components/panel_singlestat";
 @import "components/panel_singlestat";

public/sass/components/_panel_alertlist.scss

+.panel-alert-list {
+  overflow-y: scroll;
+}