From 3519d8d69b52794565456442f6576d872171bc66 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Sat, 7 Oct 2017 12:23:20 +0200
Subject: [PATCH] annotations: minor change to default/edit annotation color

---
 public/app/core/utils/colors.ts               |  4 ++
 .../app/features/annotations/event_manager.ts | 40 +++++++++----------
 public/app/features/dashboard/model.ts        |  3 +-
 3 files changed, 26 insertions(+), 21 deletions(-)

diff --git a/public/app/core/utils/colors.ts b/public/app/core/utils/colors.ts
index b9dd164d635..96ce5df9fcd 100644
--- a/public/app/core/utils/colors.ts
+++ b/public/app/core/utils/colors.ts
@@ -5,6 +5,10 @@ declare var tinycolor;
 
 export const PALETTE_ROWS = 4;
 export const PALETTE_COLUMNS = 14;
+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)";
 
 let colors = [
   "#7EB26D","#EAB839","#6ED0E0","#EF843C","#E24D42","#1F78C1","#BA43A9","#705DA0",
diff --git a/public/app/features/annotations/event_manager.ts b/public/app/features/annotations/event_manager.ts
index caa367e42f1..5f4534bacb1 100644
--- a/public/app/features/annotations/event_manager.ts
+++ b/public/app/features/annotations/event_manager.ts
@@ -2,18 +2,13 @@ import _ from 'lodash';
 import moment from 'moment';
 import {MetricsPanelCtrl} from 'app/plugins/sdk';
 import {AnnotationEvent} from './event';
-
-const OK_COLOR =       "rgba(11, 237, 50, 1)",
-      ALERTING_COLOR = "rgba(237, 46, 24, 1)",
-      NO_DATA_COLOR =  "rgba(150, 150, 150, 1)";
-
+import {OK_COLOR, ALERTING_COLOR, NO_DATA_COLOR, DEFAULT_ANNOTATION_COLOR} from 'app/core/utils/colors';
 
 export class EventManager {
   event: AnnotationEvent;
   editorOpen: boolean;
 
-  constructor(private panelCtrl: MetricsPanelCtrl) {
-  }
+  constructor(private panelCtrl: MetricsPanelCtrl) {}
 
   editorClosed() {
     this.event = null;
@@ -54,21 +49,26 @@ export class EventManager {
     }
 
     var types = {
-      '$__alerting': {
+      $__alerting: {
         color: ALERTING_COLOR,
         position: 'BOTTOM',
         markerSize: 5,
       },
-      '$__ok': {
+      $__ok: {
         color: OK_COLOR,
         position: 'BOTTOM',
         markerSize: 5,
       },
-      '$__no_data': {
+      $__no_data: {
         color: NO_DATA_COLOR,
         position: 'BOTTOM',
         markerSize: 5,
       },
+      $__editing: {
+        color: DEFAULT_ANNOTATION_COLOR,
+        position: 'BOTTOM',
+        markerSize: 5,
+      },
     };
 
     if (this.event) {
@@ -79,9 +79,9 @@ export class EventManager {
             min: this.event.time.valueOf(),
             timeEnd: this.event.timeEnd.valueOf(),
             text: this.event.text,
-            eventType: '$__alerting',
+            eventType: '$__editing',
             editModel: this.event,
-          }
+          },
         ];
       } else {
         annotations = [
@@ -89,8 +89,8 @@ export class EventManager {
             min: this.event.time.valueOf(),
             text: this.event.text,
             editModel: this.event,
-            eventType: '$__alerting',
-          }
+            eventType: '$__editing',
+          },
         ];
       }
     } else {
@@ -130,7 +130,7 @@ export class EventManager {
       levels: _.keys(types).length + 1,
       data: annotations,
       types: types,
-      manager: this
+      manager: this,
     };
   }
 }
@@ -141,7 +141,7 @@ function getRegions(events) {
 
 function addRegionMarking(regions, flotOptions) {
   let markings = flotOptions.grid.markings;
-  let defaultColor = 'rgb(237, 46, 24)';
+  let defaultColor = DEFAULT_ANNOTATION_COLOR;
   let fillColor;
 
   _.each(regions, region => {
@@ -158,8 +158,8 @@ function addRegionMarking(regions, flotOptions) {
       fillColor = convertToRGB(fillColor);
     }
 
-    fillColor = addAlphaToRGB(fillColor, 0.090);
-    markings.push({ xaxis: { from: region.min, to: region.timeEnd }, color: fillColor });
+    fillColor = addAlphaToRGB(fillColor, 0.09);
+    markings.push({xaxis: {from: region.min, to: region.timeEnd}, color: fillColor});
   });
 }
 
@@ -179,8 +179,8 @@ function convertToRGB(hex: string): string {
     let rgb = _.map(match.slice(1), hex_val => {
       return parseInt(hex_val, 16);
     });
-    return 'rgb(' + rgb.join(',')  + ')';
+    return 'rgb(' + rgb.join(',') + ')';
   } else {
-    return "";
+    return '';
   }
 }
diff --git a/public/app/features/dashboard/model.ts b/public/app/features/dashboard/model.ts
index 11067d3c68b..7c4cdfac59e 100644
--- a/public/app/features/dashboard/model.ts
+++ b/public/app/features/dashboard/model.ts
@@ -5,6 +5,7 @@ import moment from 'moment';
 import _ from 'lodash';
 import $ from 'jquery';
 
+import {DEFAULT_ANNOTATION_COLOR} from 'app/core/utils/colors';
 import {Emitter, contextSrv, appEvents} from 'app/core/core';
 import {DashboardRow} from './row/row_model';
 import sortByKeys from 'app/core/utils/sort_by_keys';
@@ -93,7 +94,7 @@ export class DashboardModel {
       datasource: '-- Grafana --',
       name: 'Annotations & Alerts',
       type: 'dashboard',
-      iconColor: 'rgb(0, 211, 255)',
+      iconColor: DEFAULT_ANNOTATION_COLOR,
       enable: true,
       hide: true,
       builtIn: 1,