Merge branch 'alertList-no-alerts'

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

@@ -4,22 +4,22 @@
     <div class="gf-form">
       <span class="gf-form-label width-8">Show</span>
       <div class="gf-form-select-wrapper max-width-15">
-        <select class="gf-form-input" ng-model="ctrl.panel.show" ng-options="f.value as f.text for f in ctrl.showOptions" ng-change="ctrl.onRender()"></select>
+        <select class="gf-form-input" ng-model="ctrl.panel.show" ng-options="f.value as f.text for f in ctrl.showOptions" ng-change="ctrl.onRefresh()"></select>
       </div>
     </div>
     <div class="gf-form">
       <span class="gf-form-label width-8">Max items</span>
-      <input type="text" class="gf-form-input max-width-15" ng-model="ctrl.panel.limit" ng-change="ctrl.onRender()" />
+      <input type="text" class="gf-form-input max-width-15" ng-model="ctrl.panel.limit" ng-change="ctrl.onRefresh()" />
     </div>
     <div class="gf-form" ng-show="ctrl.panel.show === 'current'">
       <span class="gf-form-label width-8">Sort order</span>
       <div class="gf-form-select-wrapper max-width-15">
-        <select class="gf-form-input" ng-model="ctrl.panel.sortOrder" ng-options="f.value as f.text for f in ctrl.sortOrderOptions" ng-change="ctrl.onRender()"></select>
+        <select class="gf-form-input" ng-model="ctrl.panel.sortOrder" ng-options="f.value as f.text for f in ctrl.sortOrderOptions" ng-change="ctrl.onRefresh()"></select>
       </div>
     </div>
     <gf-form-switch class="gf-form" label="Alerts from this dashboard" label-class="width-18" checked="ctrl.panel.onlyAlertsOnDashboard" on-change="ctrl.updateStateFilter()"></gf-form-switch>
   </div>
-  <div class="section gf-form-group">
+  <div class="section gf-form-group" ng-show="ctrl.panel.show === 'current'">
     <h5 class="section-heading">State filter</h5>
     <gf-form-switch class="gf-form" label="Ok" label-class="width-10" checked="ctrl.stateFilter['ok']" on-change="ctrl.updateStateFilter()"></gf-form-switch>
     <gf-form-switch class="gf-form" label="Paused" label-class="width-10" checked="ctrl.stateFilter['paused']" on-change="ctrl.updateStateFilter()"></gf-form-switch>

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

@@ -1,42 +1,35 @@
-<div class="panel-alert-list" style="{{ctrl.contentHeight}}">
+<div class="panel-alert-list" ng-style="{height: ctrl.height + 'px'}">
-	<section class="card-section card-list-layout-list" ng-if="ctrl.panel.show === 'current'">
+	<div class="panel-alert-list__no-alerts" ng-show="ctrl.noAlertsMessage">
-		<ol class="card-list">
+		{{ctrl.noAlertsMessage}}
-      <li class="card-item-wrapper" ng-show="!ctrl.currentAlerts.length">
+	</div>
-				<div class="alert-list card-item card-item--alert">
-					<div class="alert-list-body">
-						<div class="alert-list-main">
-							<p class="alert-list-title">
-								No alerts in selected interval
-							</p>
-						</div>
-					</div>
-				</div>
-			</li>
-			<li class="card-item-wrapper" ng-repeat="alert in ctrl.currentAlerts">
-				<div class="alert-list card-item card-item--alert">
-					<div class="alert-list-body">
-						<div class="alert-list-icon alert-list-item-state {{alert.stateModel.stateClass}}">
-							<i class="{{alert.stateModel.iconClass}}"></i>
-						</div>
-						<div class="alert-list-main">
-							<p class="alert-list-title">
-							<a href="dashboard/{{alert.dashboardUri}}?panelId={{alert.panelId}}&fullscreen&edit&tab=alert">
-								{{alert.name}}
-							</a>
-							</p>
-							<p class="alert-list-text">
-							<span class="alert-list-state {{alert.stateModel.stateClass}}">{{alert.stateModel.text}}</span>
-							for {{alert.newStateDateAgo}}
-							</p>
-						</div>
-					</div>
-				</div>
-			</li>
-		</ol>
-	</section>
 
-	<section class="card-section card-list-layout-list" ng-if="ctrl.panel.show === 'changes'">
+  <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">
+        <div class="alert-list card-item card-item--alert">
+          <div class="alert-list-body">
+            <div class="alert-list-icon alert-list-item-state {{alert.stateModel.stateClass}}">
+              <i class="{{alert.stateModel.iconClass}}"></i>
+            </div>
+            <div class="alert-list-main">
+              <p class="alert-list-title">
+                <a href="dashboard/{{alert.dashboardUri}}?panelId={{alert.panelId}}&fullscreen&edit&tab=alert">
+                  {{alert.name}}
+                </a>
+              </p>
+              <p class="alert-list-text">
+                <span class="alert-list-state {{alert.stateModel.stateClass}}">{{alert.stateModel.text}}</span>
+                for {{alert.newStateDateAgo}}
+              </p>
+            </div>
+          </div>
+        </div>
+      </li>
+    </ol>
+  </section>
+
+  <section class="card-section card-list-layout-list" ng-if="ctrl.panel.show === 'changes'">
+		<ol class="card-list">
 			<li class="card-item-wrapper" ng-repeat="al in ctrl.alertHistory">
 				<div class="alert-list card-item card-item--alert">
 					<div class="alert-list-body">
@@ -53,7 +46,9 @@
 					</div>
 					<div class="alert-list-footer">
 						<span class="alert-list-text">{{al.time}}</span>
-						<span class="alert-list-text"><!--Img Link--></span>
+						<span class="alert-list-text">
+							<!--Img Link-->
+						</span>
 					</div>
 				</div>
 			</li>

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

@@ -3,7 +3,7 @@
 import _ from 'lodash';
 import moment from 'moment';
 import alertDef from '../../../features/alerting/alert_def';
-import {PanelCtrl} from 'app/plugins/sdk';
+import { PanelCtrl } from 'app/plugins/sdk';
 
 import * as dateMath from 'app/core/utils/datemath';
 
@@ -11,20 +11,20 @@ class AlertListPanel extends PanelCtrl {
   static templateUrl = 'module.html';
 
   showOptions = [
-    {text: 'Current state', value: 'current'},
+    { text: 'Current state', value: 'current' },
-    {text: 'Recent state changes', value: 'changes'}
+    { text: 'Recent state changes', value: 'changes' }
   ];
 
   sortOrderOptions = [
-    {text: 'Alphabetical (asc)', value: 1},
+    { text: 'Alphabetical (asc)', value: 1 },
-    {text: 'Alphabetical (desc)', value: 2},
+    { text: 'Alphabetical (desc)', value: 2 },
-    {text: 'Importance', value: 3},
+    { text: 'Importance', value: 3 },
   ];
 
-  contentHeight: string;
   stateFilter: any = {};
   currentAlerts: any = [];
   alertHistory: any = [];
+  noAlertsMessage: string;
   // Set and populate defaults
   panelDefaults = {
     show: 'current',
@@ -40,8 +40,7 @@ class AlertListPanel extends PanelCtrl {
     _.defaults(this.panel, this.panelDefaults);
 
     this.events.on('init-edit-mode', this.onInitEditMode.bind(this));
-    this.events.on('render',  this.onRender.bind(this));
+    this.events.on('refresh', this.onRefresh.bind(this));
-    this.events.on('refresh', this.onRender.bind(this));
 
     for (let key in this.panel.stateFilter) {
       this.stateFilter[this.panel.stateFilter[key]] = true;
@@ -53,7 +52,7 @@ class AlertListPanel extends PanelCtrl {
       return _.sortBy(alerts, a => { return alertDef.alertStateSortScore[a.state]; });
     }
 
-    var result = _.sortBy(alerts, a => { return a.name.toLowerCase();});
+    var result = _.sortBy(alerts, a => { return a.name.toLowerCase(); });
     if (this.panel.sortOrder === 2) {
       result.reverse();
     }
@@ -71,11 +70,10 @@ class AlertListPanel extends PanelCtrl {
     }
 
     this.panel.stateFilter = result;
-    this.onRender();
+    this.onRefresh();
   }
 
-  onRender() {
+  onRefresh() {
-    this.contentHeight = "max-height: " + this.height + "px;";
     if (this.panel.show === 'current') {
       this.getCurrentAlertState();
     }
@@ -107,6 +105,7 @@ class AlertListPanel extends PanelCtrl {
           al.info = alertDef.getAlertAnnotationInfo(al);
           return al;
         });
+        this.noAlertsMessage = this.alertHistory.length === 0 ? 'No alerts in current time range' : '';
       });
   }
 
@@ -126,6 +125,7 @@ class AlertListPanel extends PanelCtrl {
           al.newStateDateAgo = moment(al.newStateDate).locale('en').fromNow(true);
           return al;
         }));
+        this.noAlertsMessage = this.currentAlerts.length === 0 ? 'No alerts' : '';
       });
   }
 

public/sass/components/_panel_alertlist.scss

@@ -1,3 +1,12 @@
 .panel-alert-list {
   overflow-y: auto;
 }
+
+.panel-alert-list__no-alerts {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: calc(100% - 30px);
+}
+