IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #16079 from grafana/fix/threshold-custom-color

Browse Source 
Fix threshold editor color picker not working for custom colors
This commit is contained in:
Torkel Ödegaard 2019-03-19 18:39:17 +01:00 committed by GitHub
commit f69f0c2c31
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 17 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; break;
} }
case 'custom': { 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; fillColor = threshold.fillColor;
lineColor = threshold.lineColor; lineColor = threshold.lineColor;
break; break;

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

@ -23,7 +23,7 @@
<label class="gf-form-label">Color</label> <label class="gf-form-label">Color</label>
<div class="gf-form-select-wrapper"> <div class="gf-form-select-wrapper">
<select class="gf-form-input" ng-model="threshold.colorMode" <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> </select>
</div> </div>
</div> </div>

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

@ -1,5 +1,6 @@
import coreModule from 'app/core/core_module'; import coreModule from 'app/core/core_module';
import config from 'app/core/config';
import tinycolor from 'tinycolor2';
export class ThresholdFormCtrl { export class ThresholdFormCtrl {
panelCtrl: any; panelCtrl: any;
panel: any; panel: any;
@ -56,6 +57,19 @@ export class ThresholdFormCtrl {
this.render(); 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', () => { coreModule.directive('graphThresholdForm', () => {