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

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

@@ -1,17 +1,11 @@
 <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">
+      <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>
-					</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">
@@ -53,7 +47,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

@@ -21,6 +21,7 @@ class AlertListPanel extends PanelCtrl {
     { text: 'Importance', value: 3 },
   ];
 
+  panelHeight: any;
   contentHeight: string;
   stateFilter: any = {};
   currentAlerts: any = [];
@@ -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;