From 97a000c3198938e58bc0be5ffb36c98b40dbc3bf Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Tue, 19 Mar 2019 14:28:15 +0100
Subject: [PATCH 1/2] Fix threshold editor color picker not working for custom
 colors

When user selected Custom as an option for a threshold colors, the Custom color picker did not work. The problem was caused by threshold model not including the default colors for fill and line colors when custom was selected. Now, when changing the type to custom, the default valoues are set.
---
 .../plugins/panel/graph/threshold_manager.ts   |  6 ------
 .../plugins/panel/graph/thresholds_form.html   |  4 ++--
 .../app/plugins/panel/graph/thresholds_form.ts | 18 +++++++++++++++++-
 3 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/public/app/plugins/panel/graph/threshold_manager.ts b/public/app/plugins/panel/graph/threshold_manager.ts
index f0bc7d62499..dcebc45c1e7 100644
--- a/public/app/plugins/panel/graph/threshold_manager.ts
+++ b/public/app/plugins/panel/graph/threshold_manager.ts
@@ -216,12 +216,6 @@ export class ThresholdManager {
           break;
         }
         case 'custom': {
-          if (!threshold.fillColor) {
-            threshold.fillColor = 'rgba(255, 255, 255, 1)';
-          }
-          if (!threshold.lineColor) {
-            threshold.lineColor = 'rgba(255, 255, 255, 0)';
-          }
           fillColor = threshold.fillColor;
           lineColor = threshold.lineColor;
           break;
diff --git a/public/app/plugins/panel/graph/thresholds_form.html b/public/app/plugins/panel/graph/thresholds_form.html
index 99e2f530c8d..075b4824d28 100644
--- a/public/app/plugins/panel/graph/thresholds_form.html
+++ b/public/app/plugins/panel/graph/thresholds_form.html
@@ -23,7 +23,7 @@
         <label class="gf-form-label">Color</label>
         <div class="gf-form-select-wrapper">
           <select class="gf-form-input" ng-model="threshold.colorMode"
-                  ng-options="f for f in ['custom', 'critical', 'warning', 'ok']" ng-change="ctrl.render()" ng-disabled="ctrl.disabled">
+                  ng-options="f for f in ['custom', 'critical', 'warning', 'ok']" ng-change="ctrl.onThresholdTypeChange($index)" ng-disabled="ctrl.disabled">
           </select>
         </div>
       </div>
@@ -73,4 +73,4 @@
       </button>
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/public/app/plugins/panel/graph/thresholds_form.ts b/public/app/plugins/panel/graph/thresholds_form.ts
index 4f480873d5b..c67a030188d 100644
--- a/public/app/plugins/panel/graph/thresholds_form.ts
+++ b/public/app/plugins/panel/graph/thresholds_form.ts
@@ -1,5 +1,6 @@
 import coreModule from 'app/core/core_module';
-
+import config from 'app/core/config';
+import tinycolor from 'tinycolor2';
 export class ThresholdFormCtrl {
   panelCtrl: any;
   panel: any;
@@ -30,6 +31,8 @@ export class ThresholdFormCtrl {
       fill: true,
       line: true,
       yaxis: 'left',
+      fillColor: 'rgba(234,112, 112, 0.12)',
+      lineColor: 'rgba(237, 46, 24, 0.60)',
     });
     this.panelCtrl.render();
   }
@@ -56,6 +59,19 @@ export class ThresholdFormCtrl {
       this.render();
     };
   }
+
+  onThresholdTypeChange(index) {
+    // Because of the ng-model binding, threshold's color mode is already set here
+    if (this.panel.thresholds[index].colorMode === 'custom') {
+      this.panel.thresholds[index].fillColor = tinycolor(config.theme.colors.blueBase)
+        .setAlpha(0.2)
+        .toRgbString();
+      this.panel.thresholds[index].lineColor = tinycolor(config.theme.colors.blueShade)
+        .setAlpha(0.6)
+        .toRgbString();
+    }
+    this.panelCtrl.render();
+  }
 }
 
 coreModule.directive('graphThresholdForm', () => {

From 9205b82f19d44ef79806d136444617626c46e393 Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Tue, 19 Mar 2019 16:38:14 +0100
Subject: [PATCH 2/2] Remove leftover from first iteration

---
 public/app/plugins/panel/graph/thresholds_form.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/public/app/plugins/panel/graph/thresholds_form.ts b/public/app/plugins/panel/graph/thresholds_form.ts
index c67a030188d..08acd887559 100644
--- a/public/app/plugins/panel/graph/thresholds_form.ts
+++ b/public/app/plugins/panel/graph/thresholds_form.ts
@@ -31,8 +31,6 @@ export class ThresholdFormCtrl {
       fill: true,
       line: true,
       yaxis: 'left',
-      fillColor: 'rgba(234,112, 112, 0.12)',
-      lineColor: 'rgba(237, 46, 24, 0.60)',
     });
     this.panelCtrl.render();
   }