alerting: improve annotations for pending state

public/app/core/utils/colors.ts

@@ -7,6 +7,7 @@ export const DEFAULT_ANNOTATION_COLOR = 'rgba(0, 211, 255, 1)';
 export const OK_COLOR = 'rgba(11, 237, 50, 1)';
 export const ALERTING_COLOR = 'rgba(237, 46, 24, 1)';
 export const NO_DATA_COLOR = 'rgba(150, 150, 150, 1)';
+export const PENDING_COLOR = 'rgba(247, 149, 32, 1)';
 export const REGION_FILL_ALPHA = 0.09;
 
 const colors = [

public/app/features/annotations/event_manager.ts

@@ -7,6 +7,7 @@ import {
   OK_COLOR,
   ALERTING_COLOR,
   NO_DATA_COLOR,
+  PENDING_COLOR,
   DEFAULT_ANNOTATION_COLOR,
   REGION_FILL_ALPHA,
 } from 'app/core/utils/colors';
@@ -71,6 +72,11 @@ export class EventManager {
         position: 'BOTTOM',
         markerSize: 5,
       },
+      $__pending: {
+        color: PENDING_COLOR,
+        position: 'BOTTOM',
+        markerSize: 5,
+      },
       $__editing: {
         color: DEFAULT_ANNOTATION_COLOR,
         position: 'BOTTOM',

public/app/features/panel/panel_directive.ts

@@ -161,7 +161,11 @@ module.directive('grafanaPanel', ($rootScope, $document, $timeout) => {
             panelContainer.removeClass('panel-alert-state--' + lastAlertState);
           }
 
-          if (ctrl.alertState.state === 'ok' || ctrl.alertState.state === 'alerting') {
+          if (
+            ctrl.alertState.state === 'ok' ||
+            ctrl.alertState.state === 'alerting' ||
+            ctrl.alertState.state === 'pending'
+          ) {
             panelContainer.addClass('panel-alert-state--' + ctrl.alertState.state);
           }
 

public/sass/pages/_alerting.scss

@@ -66,6 +66,13 @@
       content: '\e611';
     }
   }
+
+  &--pending {
+    .panel-alert-icon:before {
+      color: $warn;
+      content: '\e611';
+    }
+  }
 }
 
 @keyframes alerting-panel {