IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-24 09:50:29 -06:00
Code Issues Packages Projects Releases Wiki Activity

Fix threshold editor color picker not working for custom colors

Browse Source 
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.
This commit is contained in:
Dominik Prokop 2019-03-19 14:28:15 +01:00
parent abbb7b81c7
commit 97a000c319
3 changed files with 19 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/app/plugins/panel/graph/threshold_manager.ts
View File

@ -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;

4
public/app/plugins/panel/graph/thresholds_form.html
View File

@ -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>

18
public/app/plugins/panel/graph/thresholds_form.ts
View File

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