Skip to content

N
nexpie-grafana-theme
Commit 108eb5f0 by Torkel Ödegaard Committed by GitHub
Options

BarGauge: Updated test dashboards and threshold fix (#16911)

parent f8393fb3
Showing with 491 additions and 445 deletions
devenv/dev-dashboards/panel-bargauge/animated_demo.json
......@@ -28,35 +28,38 @@
"links": [],
"options": {
"displayMode": "gradient",
"maxValue": 100,
"minValue": 0,
"orientation": "vertical",
"thresholds": [
{
"color": "green",
"index": 0,
"value": null
"fieldOptions": {
"calcs": ["mean"],
"defaults": {
"decimals": null,
"max": 100,
"min": 0,
"unit": "watt"
},
{
"color": "orange",
"index": 1,
"value": 40
},
{
"color": "red",
"index": 2,
"value": 80
}
],
"valueMappings": [],
"valueOptions": {
"decimals": null,
"prefix": "",
"stat": "mean",
"suffix": "",
"unit": "watt"
}
"mappings": [],
"override": {},
"thresholds": [
{
"color": "green",
"index": 0,
"value": null
},
{
"color": "orange",
"index": 1,
"value": 40
},
{
"color": "red",
"index": 2,
"value": 80
}
],
"values": false
},
"orientation": "vertical"
},
"pluginVersion": "6.2.0-pre",
"targets": [
{
"refId": "A",
......@@ -145,35 +148,38 @@
"links": [],
"options": {
"displayMode": "gradient",
"maxValue": 100,
"minValue": 0,
"orientation": "horizontal",
"thresholds": [
{
"color": "green",
"index": 0,
"value": null
},
{
"color": "orange",
"index": 1,
"value": 55
"fieldOptions": {
"calcs": ["mean"],
"defaults": {
"decimals": null,
"max": 100,
"min": 0,
"unit": "watt"
},
{
"color": "red",
"index": 2,
"value": 95
}
],
"valueMappings": [],
"valueOptions": {
"decimals": null,
"prefix": "",
"stat": "mean",
"suffix": "",
"unit": "watt"
}
"mappings": [],
"override": {},
"thresholds": [
{
"color": "green",
"index": 0,
"value": null
},
{
"color": "orange",
"index": 1,
"value": 55
},
{
"color": "red",
"index": 2,
"value": 95
}
],
"values": false
},
"orientation": "horizontal"
},
"pluginVersion": "6.2.0-pre",
"targets": [
{
"refId": "E",
......@@ -269,40 +275,43 @@
"links": [],
"options": {
"displayMode": "gradient",
"maxValue": 100,
"minValue": 0,
"orientation": "horizontal",
"thresholds": [
{
"color": "blue",
"index": 0,
"value": null
},
{
"color": "green",
"index": 1,
"value": 20
"fieldOptions": {
"calcs": ["mean"],
"defaults": {
"decimals": null,
"max": 100,
"min": 0,
"unit": "celsius"
},
{
"color": "orange",
"index": 2,
"value": 40
},
{
"color": "red",
"index": 3,
"value": 80
}
],
"valueMappings": [],
"valueOptions": {
"decimals": null,
"prefix": "",
"stat": "mean",
"suffix": "",
"unit": "celsius"
}
"mappings": [],
"override": {},
"thresholds": [
{
"color": "blue",
"index": 0,
"value": null
},
{
"color": "green",
"index": 1,
"value": 20
},
{
"color": "orange",
"index": 2,
"value": 40
},
{
"color": "red",
"index": 3,
"value": 80
}
],
"values": false
},
"orientation": "horizontal"
},
"pluginVersion": "6.2.0-pre",
"targets": [
{
"alias": "Inside",
......@@ -356,40 +365,43 @@
"links": [],
"options": {
"displayMode": "basic",
"maxValue": 100,
"minValue": 0,
"orientation": "horizontal",
"thresholds": [
{
"color": "blue",
"index": 0,
"value": null
},
{
"color": "green",
"index": 1,
"value": 20
"fieldOptions": {
"calcs": ["mean"],
"defaults": {
"decimals": null,
"max": 100,
"min": 0,
"unit": "celsius"
},
{
"color": "orange",
"index": 2,
"value": 40
},
{
"color": "red",
"index": 3,
"value": 80
}
],
"valueMappings": [],
"valueOptions": {
"decimals": null,
"prefix": "",
"stat": "mean",
"suffix": "",
"unit": "celsius"
}
"mappings": [],
"override": {},
"thresholds": [
{
"color": "blue",
"index": 0,
"value": null
},
{
"color": "green",
"index": 1,
"value": 20
},
{
"color": "orange",
"index": 2,
"value": 40
},
{
"color": "red",
"index": 3,
"value": 80
}
],
"values": false
},
"orientation": "horizontal"
},
"pluginVersion": "6.2.0-pre",
"targets": [
{
"alias": "Inside",
......@@ -471,5 +483,5 @@
"timezone": "",
"title": "Bar Gauge Animated Demo",
"uid": "k5IUwQeikaa",
"version": 4
"version": 1
}
devenv/dev-dashboards/panel-bargauge/gradient_demo.json
......@@ -28,35 +28,38 @@
"links": [],
"options": {
"displayMode": "gradient",
"maxValue": 100,
"minValue": 0,
"orientation": "vertical",
"thresholds": [
{
"color": "green",
"index": 0,
"value": null
"fieldOptions": {
"calcs": ["mean"],
"defaults": {
"decimals": null,
"max": 100,
"min": 0,
"unit": "watt"
},
{
"color": "orange",
"index": 1,
"value": 40
},
{
"color": "red",
"index": 2,
"value": 80
}
],
"valueMappings": [],
"valueOptions": {
"decimals": null,
"prefix": "",
"stat": "mean",
"suffix": "",
"unit": "watt"
}
"mappings": [],
"override": {},
"thresholds": [
{
"color": "green",
"index": 0,
"value": null
},
{
"color": "orange",
"index": 1,
"value": 40
},
{
"color": "red",
"index": 2,
"value": 80
}
],
"values": false
},
"orientation": "vertical"
},
"pluginVersion": "6.2.0-pre",
"targets": [
{
"refId": "A",
......@@ -145,35 +148,38 @@
"links": [],
"options": {
"displayMode": "gradient",
"maxValue": 100,
"minValue": 0,
"orientation": "horizontal",
"thresholds": [
{
"color": "green",
"index": 0,
"value": null
"fieldOptions": {
"calcs": ["mean"],
"defaults": {
"decimals": null,
"max": 100,
"min": 0,
"unit": "watt"
},
{
"color": "orange",
"index": 1,
"value": 65
},
{
"color": "red",
"index": 2,
"value": 95
}
],
"valueMappings": [],
"valueOptions": {
"decimals": null,
"prefix": "",
"stat": "mean",
"suffix": "",
"unit": "watt"
}
"mappings": [],
"override": {},
"thresholds": [
{
"color": "green",
"index": 0,
"value": null
},
{
"color": "orange",
"index": 1,
"value": 65
},
{
"color": "red",
"index": 2,
"value": 95
}
],
"values": false
},
"orientation": "horizontal"
},
"pluginVersion": "6.2.0-pre",
"targets": [
{
"refId": "E",
......@@ -269,40 +275,43 @@
"links": [],
"options": {
"displayMode": "gradient",
"maxValue": 100,
"minValue": 0,
"orientation": "horizontal",
"thresholds": [
{
"color": "blue",
"index": 0,
"value": null
"fieldOptions": {
"calcs": ["mean"],
"defaults": {
"decimals": null,
"max": 100,
"min": 0,
"unit": "celsius"
},
{
"color": "green",
"index": 1,
"value": 20
},
{
"color": "orange",
"index": 2,
"value": 40
},
{
"color": "red",
"index": 3,
"value": 80
}
],
"valueMappings": [],
"valueOptions": {
"decimals": null,
"prefix": "",
"stat": "mean",
"suffix": "",
"unit": "celsius"
}
"mappings": [],
"override": {},
"thresholds": [
{
"color": "blue",
"index": 0,
"value": null
},
{
"color": "green",
"index": 1,
"value": 20
},
{
"color": "orange",
"index": 2,
"value": 40
},
{
"color": "red",
"index": 3,
"value": 80
}
],
"values": false
},
"orientation": "horizontal"
},
"pluginVersion": "6.2.0-pre",
"targets": [
{
"alias": "Inside",
......@@ -363,5 +372,5 @@
"timezone": "",
"title": "Bar Gauge Gradient Demo",
"uid": "RndRQw6mz",
"version": 3
"version": 1
}
devenv/dev-dashboards/panel-bargauge/many_modes_demo.json
......@@ -28,35 +28,38 @@
"links": [],
"options": {
"displayMode": "lcd",
"maxValue": 100,
"minValue": 0,
"orientation": "vertical",
"thresholds": [
{
"color": "green",
"index": 0,
"value": null
"fieldOptions": {
"calcs": ["mean"],
"defaults": {
"decimals": null,
"max": 100,
"min": 0,
"unit": "watt"
},
{
"color": "orange",
"index": 1,
"value": 40
},
{
"color": "red",
"index": 2,
"value": 80
}
],
"valueMappings": [],
"valueOptions": {
"decimals": null,
"prefix": "",
"stat": "mean",
"suffix": "",
"unit": "watt"
}
"mappings": [],
"override": {},
"thresholds": [
{
"color": "green",
"index": 0,
"value": null
},
{
"color": "orange",
"index": 1,
"value": 40
},
{
"color": "red",
"index": 2,
"value": 80
}
],
"values": false
},
"orientation": "vertical"
},
"pluginVersion": "6.2.0-pre",
"targets": [
{
"refId": "A",
......@@ -145,30 +148,33 @@
"links": [],
"options": {
"displayMode": "lcd",
"maxValue": 100,
"minValue": 0,
"orientation": "vertical",
"thresholds": [
{
"color": "green",
"index": 0,
"value": null
"fieldOptions": {
"calcs": ["mean"],
"defaults": {
"decimals": null,
"max": 100,
"min": 0,
"unit": "percent"
},
{
"color": "red",
"index": 1,
"value": 80
}
],
"valueMappings": [],
"valueOptions": {
"decimals": null,
"prefix": "",
"stat": "mean",
"suffix": "",
"unit": "percent"
}
"mappings": [],
"override": {},
"thresholds": [
{
"color": "green",
"index": 0,
"value": null
},
{
"color": "red",
"index": 1,
"value": 80
}
],
"values": false
},
"orientation": "vertical"
},
"pluginVersion": "6.2.0-pre",
"targets": [
{
"refId": "A",
......@@ -191,40 +197,43 @@
"links": [],
"options": {
"displayMode": "gradient",
"maxValue": 100,
"minValue": 0,
"orientation": "horizontal",
"thresholds": [
{
"color": "blue",
"index": 0,
"value": null
},
{
"color": "green",
"index": 1,
"value": 20
"fieldOptions": {
"calcs": ["mean"],
"defaults": {
"decimals": null,
"max": 100,
"min": 0,
"unit": "celsius"
},
{
"color": "orange",
"index": 2,
"value": 40
},
{
"color": "red",
"index": 3,
"value": 80
}
],
"valueMappings": [],
"valueOptions": {
"decimals": null,
"prefix": "",
"stat": "mean",
"suffix": "",
"unit": "celsius"
}
"mappings": [],
"override": {},
"thresholds": [
{
"color": "blue",
"index": 0,
"value": null
},
{
"color": "green",
"index": 1,
"value": 20
},
{
"color": "orange",
"index": 2,
"value": 40
},
{
"color": "red",
"index": 3,
"value": 80
}
],
"values": false
},
"orientation": "horizontal"
},
"pluginVersion": "6.2.0-pre",
"targets": [
{
"alias": "Inside",
......@@ -278,35 +287,38 @@
"links": [],
"options": {
"displayMode": "basic",
"maxValue": 100,
"minValue": 0,
"orientation": "horizontal",
"thresholds": [
{
"color": "green",
"index": 0,
"value": null
"fieldOptions": {
"calcs": ["mean"],
"defaults": {
"decimals": null,
"max": 100,
"min": 0,
"unit": "watt"
},
{
"color": "purple",
"index": 1,
"value": 50
},
{
"color": "blue",
"index": 2,
"value": 70
}
],
"valueMappings": [],
"valueOptions": {
"decimals": null,
"prefix": "",
"stat": "mean",
"suffix": "",
"unit": "watt"
}
"mappings": [],
"override": {},
"thresholds": [
{
"color": "green",
"index": 0,
"value": null
},
{
"color": "purple",
"index": 1,
"value": 50
},
{
"color": "blue",
"index": 2,
"value": 70
}
],
"values": false
},
"orientation": "horizontal"
},
"pluginVersion": "6.2.0-pre",
"targets": [
{
"refId": "H",
......
devenv/dev-dashboards/panel-bargauge/retro_led_demo.json
......@@ -28,35 +28,38 @@
"links": [],
"options": {
"displayMode": "lcd",
"maxValue": 100,
"minValue": 0,
"orientation": "vertical",
"thresholds": [
{
"color": "green",
"index": 0,
"value": null
"fieldOptions": {
"calcs": ["mean"],
"defaults": {
"decimals": null,
"max": 100,
"min": 0,
"unit": "watt"
},
{
"color": "orange",
"index": 1,
"value": 40
},
{
"color": "red",
"index": 2,
"value": 80
}
],
"valueMappings": [],
"valueOptions": {
"decimals": null,
"prefix": "",
"stat": "mean",
"suffix": "",
"unit": "watt"
}
"mappings": [],
"override": {},
"thresholds": [
{
"color": "green",
"index": 0,
"value": null
},
{
"color": "orange",
"index": 1,
"value": 40
},
{
"color": "red",
"index": 2,
"value": 80
}
],
"values": false
},
"orientation": "vertical"
},
"pluginVersion": "6.2.0-pre",
"targets": [
{
"refId": "A",
......@@ -145,30 +148,33 @@
"links": [],
"options": {
"displayMode": "lcd",
"maxValue": 100,
"minValue": 0,
"orientation": "vertical",
"thresholds": [
{
"color": "green",
"index": 0,
"value": null
"fieldOptions": {
"calcs": ["mean"],
"defaults": {
"decimals": null,
"max": 100,
"min": 0,
"unit": "percent"
},
{
"color": "red",
"index": 1,
"value": 80
}
],
"valueMappings": [],
"valueOptions": {
"decimals": null,
"prefix": "",
"stat": "mean",
"suffix": "",
"unit": "percent"
}
"mappings": [],
"override": {},
"thresholds": [
{
"color": "green",
"index": 0,
"value": null
},
{
"color": "red",
"index": 1,
"value": 80
}
],
"values": false
},
"orientation": "vertical"
},
"pluginVersion": "6.2.0-pre",
"targets": [
{
"refId": "A",
......@@ -191,35 +197,38 @@
"links": [],
"options": {
"displayMode": "lcd",
"maxValue": 100,
"minValue": 0,
"orientation": "horizontal",
"thresholds": [
{
"color": "green",
"index": 0,
"value": null
},
{
"color": "orange",
"index": 1,
"value": 40
"fieldOptions": {
"calcs": ["mean"],
"defaults": {
"decimals": null,
"max": 100,
"min": 0,
"unit": "celsius"
},
{
"color": "red",
"index": 2,
"value": 80
}
],
"valueMappings": [],
"valueOptions": {
"decimals": null,
"prefix": "",
"stat": "mean",
"suffix": "",
"unit": "celsius"
}
"mappings": [],
"override": {},
"thresholds": [
{
"color": "green",
"index": 0,
"value": null
},
{
"color": "orange",
"index": 1,
"value": 40
},
{
"color": "red",
"index": 2,
"value": 80
}
],
"values": false
},
"orientation": "horizontal"
},
"pluginVersion": "6.2.0-pre",
"targets": [
{
"alias": "Inside",
......@@ -273,35 +282,38 @@
"links": [],
"options": {
"displayMode": "lcd",
"maxValue": 100,
"minValue": 0,
"orientation": "horizontal",
"thresholds": [
{
"color": "green",
"index": 0,
"value": null
},
{
"color": "orange",
"index": 1,
"value": 85
"fieldOptions": {
"calcs": ["mean"],
"defaults": {
"decimals": null,
"max": 100,
"min": 0,
"unit": "watt"
},
{
"color": "red",
"index": 2,
"value": 95
}
],
"valueMappings": [],
"valueOptions": {
"decimals": null,
"prefix": "",
"stat": "mean",
"suffix": "",
"unit": "watt"
}
"mappings": [],
"override": {},
"thresholds": [
{
"color": "green",
"index": 0,
"value": null
},
{
"color": "orange",
"index": 1,
"value": 85
},
{
"color": "red",
"index": 2,
"value": 95
}
],
"values": false
},
"orientation": "horizontal"
},
"pluginVersion": "6.2.0-pre",
"targets": [
{
"refId": "H",
......@@ -384,5 +396,5 @@
"timezone": "",
"title": "Bar Gauge LED Demo",
"uid": "0G3rbkqmkaa",
"version": 42
"version": 1
}
packages/grafana-ui/src/components/SingleStatShared/SingleStatBaseOptions.ts
......@@ -11,7 +11,7 @@ export interface SingleStatBaseOptions {
orientation: VizOrientation;
}
const optionsToKeep = ['valueOptions', 'stat', 'maxValue', 'maxValue', 'thresholds', 'valueMappings'];
const optionsToKeep = ['fieldOptions', 'orientation'];
export const sharedSingleStatOptionsCheck = (
options: Partial<SingleStatBaseOptions> | any,
......@@ -53,10 +53,13 @@ export const sharedSingleStatMigrationCheck = (panel: PanelModel<SingleStatBaseO
fieldOptions.calcs = getFieldReducers([valueOptions.stat]).map(s => s.id);
}
}
field.min = old.minValue;
field.max = old.maxValue;
return omit(old, 'valueMappings', 'thresholds', 'valueOptions');
// remove old props
return omit(old, 'valueMappings', 'thresholds', 'valueOptions', 'minValue', 'maxValue');
}
return panel.options;
};
public/app/features/dashboard/state/PanelModel.test.ts
......@@ -14,18 +14,20 @@ describe('PanelModel', () => {
showColumns: true,
targets: [{ refId: 'A' }, { noRefId: true }],
options: {
thresholds: [
{
color: '#F2495C',
index: 1,
value: 50,
},
{
color: '#73BF69',
index: 0,
value: null,
},
],
fieldOptions: {
thresholds: [
{
color: '#F2495C',
index: 1,
value: 50,
},
{
color: '#73BF69',
index: 0,
value: null,
},
],
},
},
};
model = new PanelModel(modelJson);
......@@ -72,7 +74,7 @@ describe('PanelModel', () => {
});
it('should restore -Infinity value for base threshold', () => {
expect(model.options.thresholds).toEqual([
expect(model.options.fieldOptions.thresholds).toEqual([
{
color: '#F2495C',
index: 1,
......@@ -142,7 +144,7 @@ describe('PanelModel', () => {
it('should call react onPanelTypeChanged', () => {
expect(onPanelTypeChanged.mock.calls.length).toBe(1);
expect(onPanelTypeChanged.mock.calls[0][1]).toBe('table');
expect(onPanelTypeChanged.mock.calls[0][2].thresholds).toBeDefined();
expect(onPanelTypeChanged.mock.calls[0][2].fieldOptions.thresholds).toBeDefined();
});
it('getQueryRunner() should return same instance after changing to another react panel', () => {
......
public/app/features/dashboard/state/PanelModel.ts
......@@ -6,7 +6,7 @@ import { Emitter } from 'app/core/utils/emitter';
import { getNextRefIdChar } from 'app/core/utils/query';
// Types
import { DataQuery, Threshold, ScopedVars, DataQueryResponseData, PanelPlugin } from '@grafana/ui';
import { DataQuery, ScopedVars, DataQueryResponseData, PanelPlugin } from '@grafana/ui';
import config from 'app/core/config';
import { PanelQueryRunner } from './PanelQueryRunner';
......@@ -131,9 +131,9 @@ export class PanelModel {
// defaults
_.defaultsDeep(this, _.cloneDeep(defaults));
// queries must have refId
this.ensureQueryIds();
this.restoreInfintyForThresholds();
}
......@@ -148,15 +148,12 @@ export class PanelModel {
}
restoreInfintyForThresholds() {
if (this.options && this.options.thresholds) {
this.options.thresholds = this.options.thresholds.map((threshold: Threshold) => {
// JSON serialization of -Infinity is 'null' so lets convert it back to -Infinity
if (threshold.index === 0 && threshold.value === null) {
return { ...threshold, value: -Infinity };
if (this.options && this.options.fieldOptions) {
for (const threshold of this.options.fieldOptions.thresholds) {
if (threshold.value === null) {
threshold.value = -Infinity;
}
return threshold;
});
}
}
}
......
public/app/plugins/panel/bargauge/module.tsx
import { PanelPlugin, sharedSingleStatOptionsCheck } from '@grafana/ui';
import { BarGaugePanel } from './BarGaugePanel';
import { BarGaugePanelEditor } from './BarGaugePanelEditor';
import { BarGaugeOptions, defaults } from './types';
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment