diff --git a/devenv/dev-dashboards/panel-bargauge/animated_demo.json b/devenv/dev-dashboards/panel-bargauge/animated_demo.json index 1a215d27677..a061f5766d1 100644 --- a/devenv/dev-dashboards/panel-bargauge/animated_demo.json +++ b/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 + "fieldOptions": { + "calcs": ["mean"], + "defaults": { + "decimals": null, + "max": 100, + "min": 0, + "unit": "watt" }, - { - "color": "orange", - "index": 1, - "value": 55 - }, - { - "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 + "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", @@ -356,40 +365,43 @@ "links": [], "options": { "displayMode": "basic", - "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", @@ -471,5 +483,5 @@ "timezone": "", "title": "Bar Gauge Animated Demo", "uid": "k5IUwQeikaa", - "version": 4 + "version": 1 } diff --git a/devenv/dev-dashboards/panel-bargauge/gradient_demo.json b/devenv/dev-dashboards/panel-bargauge/gradient_demo.json index 3e5c224db45..ffe68eb7a86 100644 --- a/devenv/dev-dashboards/panel-bargauge/gradient_demo.json +++ b/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 } diff --git a/devenv/dev-dashboards/panel-bargauge/many_modes_demo.json b/devenv/dev-dashboards/panel-bargauge/many_modes_demo.json index fb08950538f..8b498e78ef1 100644 --- a/devenv/dev-dashboards/panel-bargauge/many_modes_demo.json +++ b/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 + "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", @@ -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", diff --git a/devenv/dev-dashboards/panel-bargauge/retro_led_demo.json b/devenv/dev-dashboards/panel-bargauge/retro_led_demo.json index 4f2e22f7330..3fe8272c4df 100644 --- a/devenv/dev-dashboards/panel-bargauge/retro_led_demo.json +++ b/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 + "fieldOptions": { + "calcs": ["mean"], + "defaults": { + "decimals": null, + "max": 100, + "min": 0, + "unit": "celsius" }, - { - "color": "orange", - "index": 1, - "value": 40 - }, - { - "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 + "fieldOptions": { + "calcs": ["mean"], + "defaults": { + "decimals": null, + "max": 100, + "min": 0, + "unit": "watt" }, - { - "color": "orange", - "index": 1, - "value": 85 - }, - { - "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 } diff --git a/packages/grafana-ui/src/components/SingleStatShared/SingleStatBaseOptions.ts b/packages/grafana-ui/src/components/SingleStatShared/SingleStatBaseOptions.ts index 84dc4ad63c8..6bcf3d712c2 100644 --- a/packages/grafana-ui/src/components/SingleStatShared/SingleStatBaseOptions.ts +++ b/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 | any, @@ -53,10 +53,13 @@ export const sharedSingleStatMigrationCheck = (panel: PanelModel 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; }; diff --git a/public/app/features/dashboard/state/PanelModel.test.ts b/public/app/features/dashboard/state/PanelModel.test.ts index 18a3086fe57..f4d9e8d1a66 100644 --- a/public/app/features/dashboard/state/PanelModel.test.ts +++ b/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', () => { diff --git a/public/app/features/dashboard/state/PanelModel.ts b/public/app/features/dashboard/state/PanelModel.ts index 65a5a595d18..d8ea2d01db3 100644 --- a/public/app/features/dashboard/state/PanelModel.ts +++ b/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; - }); + } } } diff --git a/public/app/plugins/panel/bargauge/module.tsx b/public/app/plugins/panel/bargauge/module.tsx index 20c973aeaf5..26ab6720609 100644 --- a/public/app/plugins/panel/bargauge/module.tsx +++ b/public/app/plugins/panel/bargauge/module.tsx @@ -1,5 +1,4 @@ import { PanelPlugin, sharedSingleStatOptionsCheck } from '@grafana/ui'; - import { BarGaugePanel } from './BarGaugePanel'; import { BarGaugePanelEditor } from './BarGaugePanelEditor'; import { BarGaugeOptions, defaults } from './types';