new design for no alerts in alert-list, fixes #9721

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

@@ -1,62 +1,58 @@
 <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-show="!ctrl.currentAlerts.length">
-				<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 === 'current'">
+    <ol class="card-list">
+      <div class="no-alert" ng-style="{'height': + ctrl.panelHeight + 'px'}" ng-show="!ctrl.currentAlerts.length">
+        <p class="alert-list-title">
+          No alerts in selected interval
+        </p>
+      </div>
+      <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">
-						<div class="alert-list-icon alert-list-item-state {{al.stateModel.stateClass}}">
-							<i class="{{al.stateModel.iconClass}}"></i>
-						</div>
-						<div class="alert-list-main">
-							<p class="alert-list-title">{{al.alertName}}</p>
-							<div class="alert-list-text">
-								<span class="alert-list-state {{al.stateModel.stateClass}}">{{al.stateModel.text}}</span>
-								<span class="alert-list-info alert-list-info-left">{{al.info}}</span>
-							</div>
-						</div>
-					</div>
-					<div class="alert-list-footer">
-						<span class="alert-list-text">{{al.time}}</span>
-						<span class="alert-list-text"><!--Img Link--></span>
-					</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">
+            <div class="alert-list-icon alert-list-item-state {{al.stateModel.stateClass}}">
+              <i class="{{al.stateModel.iconClass}}"></i>
+            </div>
+            <div class="alert-list-main">
+              <p class="alert-list-title">{{al.alertName}}</p>
+              <div class="alert-list-text">
+                <span class="alert-list-state {{al.stateModel.stateClass}}">{{al.stateModel.text}}</span>
+                <span class="alert-list-info alert-list-info-left">{{al.info}}</span>
+              </div>
+            </div>
+          </div>
+          <div class="alert-list-footer">
+            <span class="alert-list-text">{{al.time}}</span>
+            <span class="alert-list-text">
+              <!--Img Link-->
+            </span>
+          </div>
+        </div>
+      </li>
+    </ol>
+  </section>
 </div>

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,16 +11,17 @@ class AlertListPanel extends PanelCtrl {
   static templateUrl = 'module.html';
 
   showOptions = [
-    {text: 'Current state', value: 'current'},
-    {text: 'Recent state changes', value: 'changes'}
+    { text: 'Current state', value: 'current' },
+    { text: 'Recent state changes', value: 'changes' }
   ];
 
   sortOrderOptions = [
-    {text: 'Alphabetical (asc)', value: 1},
-    {text: 'Alphabetical (desc)', value: 2},
-    {text: 'Importance', value: 3},
+    { text: 'Alphabetical (asc)', value: 1 },
+    { text: 'Alphabetical (desc)', value: 2 },
+    { text: 'Importance', value: 3 },
   ];
 
+  panelHeight: any;
   contentHeight: string;
   stateFilter: any = {};
   currentAlerts: any = [];
@@ -40,7 +41,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('render', this.onRender.bind(this));
     this.events.on('refresh', this.onRender.bind(this));
 
     for (let key in this.panel.stateFilter) {
@@ -53,7 +54,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();
     }
@@ -75,6 +76,7 @@ class AlertListPanel extends PanelCtrl {
   }
 
   onRender() {
+    this.panelHeight = this.height - 30;
     this.contentHeight = "max-height: " + this.height + "px;";
     if (this.panel.show === 'current') {
       this.getCurrentAlertState();

public/sass/pages/_alerting.scss

@@ -132,6 +132,13 @@
   }
 }
 
+.no-alert {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+
 @keyframes alerting-panel {
   100% {
     opacity: 1;