feat(alerting): minor progress on alert list, #5784

pkg/api/index.go

@@ -99,7 +99,7 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
 
 		data.MainNavLinks = append(data.MainNavLinks, &dtos.NavLink{
 			Text:     "Alerting",
-			Icon:     "icon-gf icon-gf-monitoring",
+			Icon:     "icon-gf icon-gf-alert",
 			Url:      setting.AppSubUrl + "/alerting/list",
 			Children: alertChildNavs,
 		})

pkg/services/sqlstore/alert.go

@@ -161,6 +161,7 @@ func upsertAlerts(existingAlerts []*m.Alert, cmd *m.SaveAlertsCommand, sess *xor
 			alert.Updated = time.Now()
 			alert.Created = time.Now()
 			alert.State = m.AlertStatePending
+			alert.NewStateDate = time.Now()
 
 			_, err := sess.Insert(alert)
 			if err != nil {

public/app/core/routes/routes.ts

@@ -194,6 +194,9 @@ function setupAngularRoutes($routeProvider, $locationProvider) {
     controllerAs: 'ctrl',
     templateUrl: 'public/app/features/styleguide/styleguide.html',
   })
+  .when('/alerting', {
+    redirectTo: '/alerting/list'
+  })
   .when('/alerting/list', {
     templateUrl: 'public/app/features/alerting/partials/alert_list.html',
     controller: 'AlertListCtrl',
@@ -218,12 +221,6 @@ function setupAngularRoutes($routeProvider, $locationProvider) {
     controllerAs: 'ctrl',
     resolve: loadAlertingBundle,
   })
-  .when('/alerting/:alertId/states', {
-    templateUrl: 'public/app/features/alerting/partials/alert_log.html',
-    controller: 'AlertLogCtrl',
-    controllerAs: 'ctrl',
-    resolve: loadAlertingBundle,
-  })
   .otherwise({
     templateUrl: 'public/app/partials/error.html',
     controller: 'ErrorCtrl'

public/app/features/alerting/alert_def.ts

@@ -42,19 +42,29 @@ function createReducerPart(model) {
 }
 
 var severityLevels = {
-  'critical': {text: 'Critical', iconClass: 'icon-gf-critical alert-icon-critical'},
-  'warning': {text: 'Warning', iconClass: 'icon-gf-warn alert-icon-warn'},
+  'critical': {text: 'CRITICAL', iconClass: 'icon-gf icon-gf-critical', stateClass: 'alert-state-critical'},
+  'warning': {text: 'WARNING', iconClass: 'icon-gf icon-gf-warning', stateClass: 'alert-state-warning'},
 };
 
 function getStateDisplayModel(state, severity) {
   var model = {
     text: 'OK',
-    iconClass: 'icon-gf-online alert-icon-online'
+    iconClass: 'icon-gf icon-gf-online',
+    stateClass: 'alert-state-ok'
   };
 
   if (state === 'firing') {
     model.text = severityLevels[severity].text;
     model.iconClass = severityLevels[severity].iconClass;
+    model.stateClass = severityLevels[severity].stateClass;
+  } else if (state === 'pending') {
+    model.text = "PENDING";
+    model.iconClass = "fa fa-question";
+    model.stateClass = "alert-state-pending";
+  } else if (state === 'paused') {
+    model.text = "PAUSED";
+    model.iconClass = "fa fa-pause";
+    model.stateClass = "alert-state-paused";
   }
 
   return model;

public/app/features/alerting/partials/alert_list.html

@@ -1,9 +1,9 @@
-<navbar icon="icon-gf icon-gf-monitoring" title="Alerting" title-url="alerting">
+<navbar icon="icon-gf icon-gf-alert" title="Alerting" title-url="alerting">
 </navbar>
 
 <div class="page-container" >
 	<div class="page-header">
-		<h1>Alerting</h1>
+		<h1>Alert List</h1>
 	</div>
 
   <div class="gf-form-group">
@@ -22,27 +22,34 @@
 
     <ol class="card-list" >
       <li class="card-item-wrapper" ng-repeat="alert in ctrl.alerts">
-        <a class="card-item" href="dashboard/{{alert.dashboardUri}}?panelId={{alert.panelId}}&fullscreen&edit&tab=alert">
+        <div class="card-item card-item--alert">
           <div class="card-item-header">
-            <div class="card-item-type">ACTIVE</div>
+            <div class="card-item-type">
+              <a href="dashboard/{{alert.dashboardUri}}" bs-tooltip="'Open dashboard'">
+                <i class="icon-gf icon-gf-dashboard"></i>
+              </a>
+            </div>
             <div class="card-item-notice" ng-show="alert.executionError">
               <span>Execution Error</span>
             </div>
           </div>
           <div class="card-item-body">
             <div class="card-item-details">
-              <div class="card-item-name">{{alert.name}}</div>
+              <div class="card-item-name">
+                <a href="dashboard/{{alert.dashboardUri}}?panelId={{alert.panelId}}&fullscreen&edit&tab=alert">
+                  {{alert.name}}
+                </a>
+              </div>
               <div class="card-item-sub-name">
-                <div class="alert-list-state-line">
-                  <i class="icon-gf {{alert.stateModel.iconClass}}"></i>
+                <span class="alert-list-item-state {{alert.stateModel.stateClass}}">
+                  <i class="{{alert.stateModel.iconClass}}"></i>
                   {{alert.stateModel.text}}
-                  for
-                  {{alert.newStateDateAgo}}
+                </span> for {{alert.newStateDateAgo}}
                 </div>
               </div>
             </div>
           </div>
-        </a>
+        </div>
       </li>
     </ol>
   </section>

public/app/features/alerting/partials/notification_edit.html

@@ -1,4 +1,4 @@
-<navbar icon="icon-gf icon-gf-monitoring" title="Alerting" title-url="alerting">
+<navbar icon="icon-gf icon-gf-alert" title="Alerting" title-url="alerting">
 	<a href="alerting/notifications" class="navbar-page-btn">
 		<i class="fa fa-fw fa-envelope-o"></i>
 		Notifications

public/app/features/alerting/partials/notifications_list.html

@@ -1,8 +1,4 @@
-<navbar icon="icon-gf icon-gf-monitoring" title="Alerting" title-url="alerting">
-	<a href="alerting/notifications" class="navbar-page-btn">
-		<i class="fa fa-fw fa-envelope-o"></i>
-		Notifications
-	</a>
+<navbar icon="icon-gf icon-gf-alert" title="Alerting" title-url="alerting">
 </navbar>
 
 <div class="page-container" >

public/app/plugins/panel/graph/threshold_manager.ts

@@ -15,17 +15,17 @@ export class ThresholdManager {
   constructor(private panelCtrl) {}
 
   getHandleHtml(handleIndex, model, valueStr) {
-    var colorClass = 'crit';
-    if (model.colorMode === 'warning') {
-      colorClass = 'warn';
+    var stateClass = model.colorMode;
+    if (model.colorMode === 'custom') {
+      stateClass = 'critical';
     }
 
     return `
     <div class="alert-handle-wrapper alert-handle-wrapper--T${handleIndex}">
-      <div class="alert-handle-line alert-handle-line--${colorClass}">
+      <div class="alert-handle-line alert-handle-line--${stateClass}">
       </div>
       <div class="alert-handle" data-handle-index="${handleIndex}">
-        <i class="icon-gf icon-gf-${colorClass} alert-icon-${colorClass}"></i>
+        <i class="icon-gf icon-gf-${stateClass} alert-state-${stateClass}"></i>
         <span class="alert-handle-value">${valueStr}<i class="alert-handle-grip"></i></span>
       </div>
     </div>`;

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

@@ -182,9 +182,9 @@
 				<li>
 					<input type="number" class="input-small tight-form-input last" ng-model="ctrl.panel.gauge.maxValue" ng-blur="ctrl.render()" placeholder="100"></input>
 					<span class="alert-state-critical" ng-show="ctrl.invalidGaugeRange">
-						&nbsp;
-						<i class="fa fa-warning"></i>
+						&nbsp; <i class="fa fa-warning"></i>
 						Min value is bigger than max.
+            &nbsp;
 					</span>
 				</li>
 			</ul>

public/sass/base/_grafana_icons.scss

@@ -79,7 +79,8 @@
 .icon-gf-jump-to-dashboard:before {
     content: "\e60d";
 }
-.icon-gf-warn:before {
+.icon-gf-warn,
+.icon-gf-warning:before {
     content: "\e60e";
 }
 .icon-gf-nodata:before {

public/sass/components/_alerts.scss

@@ -7,18 +7,6 @@
 // -------------------------
 
 
-.alert-icon-online {
-  color: $online;
-}
-
-.alert-icon-warn {
-  color: $warn;
-}
-
-.alert-icon-crit,
-.alert-icon-critical {
-  color: $critical;
-}
 
 .alert {
   padding: 8px 35px 13px 14px;

public/sass/components/_cards.scss

@@ -64,6 +64,13 @@
     font-size: 11px;
     padding: 2px 6px;
   }
+
+  &--alert {
+    padding: 0.5rem 1rem;
+    .card-item-name {
+      font-size: $font-size-h5;
+    }
+  }
 }
 
 .card-item-body {

public/sass/pages/_alerting.scss

@@ -1,31 +1,18 @@
-.copy-query {
-  display: block;
-  width: 30px;
-  height: 36px;
-  margin: 0;
-  padding: 0;
-  border: 0;
-  background: transparent url(/img/CopyQuery.png) 50% 50% no-repeat;
-  cursor: pointer;
-}
-
-.alert-state {
-  display: inline-block;
-  padding-left: 30px;
-  background: 0 50% no-repeat;
-  background-size: 20px auto;
+.alert-state-paused,
+.alert-state-pending {
+  color: $text-muted;
 }
 
-.alert-state-online {
-  background-image: url('/img/online.svg');
+.alert-state-ok {
+  color: $online;
 }
 
 .alert-state-warning {
-  background-image: url('/img/warn-tiny.svg');
+  color: $warn;
 }
 
 .alert-state-critical {
-  background-image: url('/img/critical.svg');
+  color: $critical;
 }
 
 .alert-notify-emails {
@@ -40,3 +27,14 @@
 .alert-notify-emails .bootstrap-tagsinput input {
   border: 0;
 }
+
+// Alert List
+
+.alert-list-item-state {
+  font-weight: bold;
+  .icon-gf, .fa {
+    font-size: 120%;
+    position: relative;
+    top: 2px;
+  }
+}