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.

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;

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>
+</div>

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', () => {