(this.element = element)} />;
}
- return (
- <>
- {PanelOptions ? (
-
- ) : (
-
Visualization has no options
- )}
-
- );
+ if (plugin.exports.reactPanel) {
+ const PanelEditor = plugin.exports.reactPanel.editor;
+
+ if (PanelEditor) {
+ return
;
+ }
+ }
+
+ return
Visualization has no options
;
}
componentDidMount() {
diff --git a/public/app/features/dashboard/state/DashboardMigrator.test.ts b/public/app/features/dashboard/state/DashboardMigrator.test.ts
index fdb309b5db5..e4b29eeddfc 100644
--- a/public/app/features/dashboard/state/DashboardMigrator.test.ts
+++ b/public/app/features/dashboard/state/DashboardMigrator.test.ts
@@ -127,7 +127,7 @@ describe('DashboardModel', () => {
});
it('dashboard schema version should be set to latest', () => {
- expect(model.schemaVersion).toBe(17);
+ expect(model.schemaVersion).toBe(18);
});
it('graph thresholds should be migrated', () => {
diff --git a/public/app/features/dashboard/state/DashboardMigrator.ts b/public/app/features/dashboard/state/DashboardMigrator.ts
index ba631102b81..1aa310308d5 100644
--- a/public/app/features/dashboard/state/DashboardMigrator.ts
+++ b/public/app/features/dashboard/state/DashboardMigrator.ts
@@ -22,7 +22,7 @@ export class DashboardMigrator {
let i, j, k, n;
const oldVersion = this.dashboard.schemaVersion;
const panelUpgrades = [];
- this.dashboard.schemaVersion = 17;
+ this.dashboard.schemaVersion = 18;
if (oldVersion === this.dashboard.schemaVersion) {
return;
@@ -387,6 +387,30 @@ export class DashboardMigrator {
});
}
+ if (oldVersion < 18) {
+ // migrate change to gauge options
+ panelUpgrades.push(panel => {
+ if (panel['options-gauge']) {
+ panel.options = panel['options-gauge'];
+ panel.options.valueOptions = {
+ unit: panel.options.unit,
+ stat: panel.options.stat,
+ decimals: panel.options.decimals,
+ prefix: panel.options.prefix,
+ suffix: panel.options.suffix,
+ };
+ // this options prop was due to a bug
+ delete panel.options.options;
+ delete panel.options.unit;
+ delete panel.options.stat;
+ delete panel.options.decimals;
+ delete panel.options.prefix;
+ delete panel.options.suffix;
+ delete panel['options-gauge'];
+ }
+ });
+ }
+
if (panelUpgrades.length === 0) {
return;
}
diff --git a/public/app/features/dashboard/state/PanelModel.test.ts b/public/app/features/dashboard/state/PanelModel.test.ts
index a7e112c7ba5..079946b1521 100644
--- a/public/app/features/dashboard/state/PanelModel.test.ts
+++ b/public/app/features/dashboard/state/PanelModel.test.ts
@@ -10,6 +10,20 @@ describe('PanelModel', () => {
type: 'table',
showColumns: true,
targets: [{ refId: 'A' }, { noRefId: true }],
+ options: {
+ thresholds: [
+ {
+ color: '#F2495C',
+ index: 1,
+ value: 50,
+ },
+ {
+ color: '#73BF69',
+ index: 0,
+ value: null,
+ },
+ ],
+ },
});
});
@@ -35,6 +49,21 @@ describe('PanelModel', () => {
expect(saveModel.events).toBe(undefined);
});
+ it('should restore -Infinity value for base threshold', () => {
+ expect(model.options.thresholds).toEqual([
+ {
+ color: '#F2495C',
+ index: 1,
+ value: 50,
+ },
+ {
+ color: '#73BF69',
+ index: 0,
+ value: -Infinity,
+ },
+ ]);
+ });
+
describe('when changing panel type', () => {
beforeEach(() => {
model.changeType('graph', true);
@@ -55,5 +84,19 @@ describe('PanelModel', () => {
expect(model.alert).toBe(undefined);
});
});
+
+ describe('get panel options', () => {
+ it('should apply defaults', () => {
+ model.options = { existingProp: 10 };
+ const options = model.getOptions({
+ defaultProp: true,
+ existingProp: 0,
+ });
+
+ expect(options.defaultProp).toBe(true);
+ expect(options.existingProp).toBe(10);
+ expect(model.options).toBe(options);
+ });
+ });
});
});
diff --git a/public/app/features/dashboard/state/PanelModel.ts b/public/app/features/dashboard/state/PanelModel.ts
index 2c0ff674e8a..ac3722d61c2 100644
--- a/public/app/features/dashboard/state/PanelModel.ts
+++ b/public/app/features/dashboard/state/PanelModel.ts
@@ -3,8 +3,7 @@ import _ from 'lodash';
// Types
import { Emitter } from 'app/core/utils/emitter';
-import { PANEL_OPTIONS_KEY_PREFIX } from 'app/core/constants';
-import { DataQuery, TimeSeries } from '@grafana/ui';
+import { DataQuery, TimeSeries, Threshold } from '@grafana/ui';
import { TableData } from '@grafana/ui/src';
export interface GridPos {
@@ -47,8 +46,6 @@ const mustKeepProps: { [str: string]: boolean } = {
timeFrom: true,
timeShift: true,
hideTimeOverride: true,
- maxDataPoints: true,
- interval: true,
description: true,
links: true,
fullscreen: true,
@@ -92,6 +89,9 @@ export class PanelModel {
timeFrom?: any;
timeShift?: any;
hideTimeOverride?: any;
+ options: {
+ [key: string]: any;
+ };
maxDataPoints?: number;
interval?: string;
@@ -105,8 +105,6 @@ export class PanelModel {
hasRefreshed: boolean;
events: Emitter;
cacheTimeout?: any;
-
- // cache props between plugins
cachedPluginOptions?: any;
constructor(model) {
@@ -121,6 +119,8 @@ export class PanelModel {
_.defaultsDeep(this, _.cloneDeep(defaults));
// queries must have refId
this.ensureQueryIds();
+
+ this.restoreInfintyForThresholds();
}
ensureQueryIds() {
@@ -133,21 +133,28 @@ 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 };
+ }
+
+ return threshold;
+ });
+ }
+ }
+
getOptions(panelDefaults) {
- return _.defaultsDeep(this[this.getOptionsKey()] || {}, panelDefaults);
+ return _.defaultsDeep(this.options || {}, panelDefaults);
}
updateOptions(options: object) {
- const update: any = {};
- update[this.getOptionsKey()] = options;
- Object.assign(this, update);
+ this.options = options;
this.render();
}
- private getOptionsKey() {
- return PANEL_OPTIONS_KEY_PREFIX + this.type;
- }
-
getSaveModel() {
const model: any = {};
for (const property in this) {
@@ -240,14 +247,15 @@ export class PanelModel {
// for angular panels only we need to remove all events and let angular panels do some cleanup
if (fromAngularPanel) {
this.destroy();
+ }
- for (const key of _.keys(this)) {
- if (mustKeepProps[key]) {
- continue;
- }
-
- delete this[key];
+ // remove panel type specific options
+ for (const key of _.keys(this)) {
+ if (mustKeepProps[key]) {
+ continue;
}
+
+ delete this[key];
}
this.restorePanelOptions(pluginId);
diff --git a/public/app/features/explore/LogMessageAnsi.test.tsx b/public/app/features/explore/LogMessageAnsi.test.tsx
index 6560fd7b7dd..8513ed4c114 100644
--- a/public/app/features/explore/LogMessageAnsi.test.tsx
+++ b/public/app/features/explore/LogMessageAnsi.test.tsx
@@ -16,9 +16,21 @@ describe('
', () => {
const wrapper = shallow(
);
expect(wrapper.find('span')).toHaveLength(1);
- expect(wrapper.find('span').first().prop('style')).toMatchObject(expect.objectContaining({
- color: expect.any(String)
- }));
- expect(wrapper.find('span').first().text()).toBe('ipsum');
+ expect(
+ wrapper
+ .find('span')
+ .first()
+ .prop('style')
+ ).toMatchObject(
+ expect.objectContaining({
+ color: expect.any(String),
+ })
+ );
+ expect(
+ wrapper
+ .find('span')
+ .first()
+ .text()
+ ).toBe('ipsum');
});
});
diff --git a/public/app/features/explore/LogMessageAnsi.tsx b/public/app/features/explore/LogMessageAnsi.tsx
index e4df16fa13c..ea751879c2e 100644
--- a/public/app/features/explore/LogMessageAnsi.tsx
+++ b/public/app/features/explore/LogMessageAnsi.tsx
@@ -46,15 +46,15 @@ export class LogMessageAnsi extends PureComponent
{
const parsed = ansicolor.parse(props.value);
return {
- chunks: parsed.spans.map((span) => {
- return span.css ?
- {
- style: convertCSSToStyle(span.css),
- text: span.text
- } :
- { text: span.text };
+ chunks: parsed.spans.map(span => {
+ return span.css
+ ? {
+ style: convertCSSToStyle(span.css),
+ text: span.text,
+ }
+ : { text: span.text };
}),
- prevValue: props.value
+ prevValue: props.value,
};
}
@@ -62,9 +62,14 @@ export class LogMessageAnsi extends PureComponent {
const { chunks } = this.state;
return chunks.map(
- (chunk, index) => chunk.style ?
- {chunk.text} :
- chunk.text
+ (chunk, index) =>
+ chunk.style ? (
+
+ {chunk.text}
+
+ ) : (
+ chunk.text
+ )
);
}
}
diff --git a/public/app/plugins/panel/gauge/GaugeOptionsEditor.tsx b/public/app/plugins/panel/gauge/GaugeOptionsBox.tsx
similarity index 85%
rename from public/app/plugins/panel/gauge/GaugeOptionsEditor.tsx
rename to public/app/plugins/panel/gauge/GaugeOptionsBox.tsx
index 50e2a344a9b..b5d6acca806 100644
--- a/public/app/plugins/panel/gauge/GaugeOptionsEditor.tsx
+++ b/public/app/plugins/panel/gauge/GaugeOptionsBox.tsx
@@ -1,9 +1,14 @@
+// Libraries
import React, { PureComponent } from 'react';
-import { FormField, PanelOptionsProps, PanelOptionsGroup, Switch } from '@grafana/ui';
+// Components
+import { Switch, PanelOptionsGroup } from '@grafana/ui';
+
+// Types
+import { FormField, PanelEditorProps } from '@grafana/ui';
import { GaugeOptions } from './types';
-export default class GaugeOptionsEditor extends PureComponent> {
+export class GaugeOptionsBox extends PureComponent> {
onToggleThresholdLabels = () =>
this.props.onChange({ ...this.props.options, showThresholdLabels: !this.props.options.showThresholdLabels });
diff --git a/public/app/plugins/panel/gauge/GaugePanel.tsx b/public/app/plugins/panel/gauge/GaugePanel.tsx
index 5cb256ee1aa..e7e60a7c417 100644
--- a/public/app/plugins/panel/gauge/GaugePanel.tsx
+++ b/public/app/plugins/panel/gauge/GaugePanel.tsx
@@ -16,9 +16,10 @@ interface Props extends PanelProps {}
export class GaugePanel extends PureComponent {
render() {
const { panelData, width, height, onInterpolate, options } = this.props;
+ const { valueOptions } = options;
- const prefix = onInterpolate(options.prefix);
- const suffix = onInterpolate(options.suffix);
+ const prefix = onInterpolate(valueOptions.prefix);
+ const suffix = onInterpolate(valueOptions.suffix);
let value: TimeSeriesValue;
if (panelData.timeSeries) {
@@ -28,7 +29,7 @@ export class GaugePanel extends PureComponent {
});
if (vmSeries[0]) {
- value = vmSeries[0].stats[options.stat];
+ value = vmSeries[0].stats[valueOptions.stat];
} else {
value = null;
}
@@ -41,11 +42,18 @@ export class GaugePanel extends PureComponent {
{theme => (
)}
diff --git a/public/app/plugins/panel/gauge/GaugePanelOptions.tsx b/public/app/plugins/panel/gauge/GaugePanelEditor.tsx
similarity index 52%
rename from public/app/plugins/panel/gauge/GaugePanelOptions.tsx
rename to public/app/plugins/panel/gauge/GaugePanelEditor.tsx
index 84726ac88bf..63031f9d895 100644
--- a/public/app/plugins/panel/gauge/GaugePanelOptions.tsx
+++ b/public/app/plugins/panel/gauge/GaugePanelEditor.tsx
@@ -1,6 +1,6 @@
import React, { PureComponent } from 'react';
import {
- PanelOptionsProps,
+ PanelEditorProps,
ThresholdsEditor,
Threshold,
PanelOptionsGrid,
@@ -8,29 +8,11 @@ import {
ValueMapping,
} from '@grafana/ui';
-import ValueOptions from 'app/plugins/panel/gauge/ValueOptions';
-import GaugeOptionsEditor from './GaugeOptionsEditor';
-import { GaugeOptions } from './types';
-
-export const defaultProps = {
- options: {
- minValue: 0,
- maxValue: 100,
- prefix: '',
- showThresholdMarkers: true,
- showThresholdLabels: false,
- suffix: '',
- decimals: 0,
- stat: 'avg',
- unit: 'none',
- valueMappings: [],
- thresholds: [],
- },
-};
-
-export default class GaugePanelOptions extends PureComponent> {
- static defaultProps = defaultProps;
+import { SingleStatValueEditor } from 'app/plugins/panel/gauge/SingleStatValueEditor';
+import { GaugeOptionsBox } from './GaugeOptionsBox';
+import { GaugeOptions, SingleStatValueOptions } from './types';
+export class GaugePanelEditor extends PureComponent> {
onThresholdsChanged = (thresholds: Threshold[]) =>
this.props.onChange({
...this.props.options,
@@ -43,14 +25,20 @@ export default class GaugePanelOptions extends PureComponent
+ this.props.onChange({
+ ...this.props.options,
+ valueOptions,
+ });
+
render() {
const { onChange, options } = this.props;
return (
<>
-
-
+
+
diff --git a/public/app/plugins/panel/gauge/ValueOptions.tsx b/public/app/plugins/panel/gauge/SingleStatValueEditor.tsx
similarity index 74%
rename from public/app/plugins/panel/gauge/ValueOptions.tsx
rename to public/app/plugins/panel/gauge/SingleStatValueEditor.tsx
index 1fdccadddf2..86c177bb5e5 100644
--- a/public/app/plugins/panel/gauge/ValueOptions.tsx
+++ b/public/app/plugins/panel/gauge/SingleStatValueEditor.tsx
@@ -1,7 +1,12 @@
+// Libraries
import React, { PureComponent } from 'react';
-import { FormField, FormLabel, PanelOptionsProps, PanelOptionsGroup, Select } from '@grafana/ui';
+
+// Components
import UnitPicker from 'app/core/components/Select/UnitPicker';
-import { GaugeOptions } from './types';
+import { FormField, FormLabel, PanelOptionsGroup, Select } from '@grafana/ui';
+
+// Types
+import { SingleStatValueOptions } from './types';
const statOptions = [
{ value: 'min', label: 'Min' },
@@ -19,24 +24,40 @@ const statOptions = [
const labelWidth = 6;
-export default class ValueOptions extends PureComponent> {
- onUnitChange = unit => this.props.onChange({ ...this.props.options, unit: unit.value });
+export interface Props {
+ options: SingleStatValueOptions;
+ onChange: (valueOptions: SingleStatValueOptions) => void;
+}
+export class SingleStatValueEditor extends PureComponent {
+ onUnitChange = unit => this.props.onChange({ ...this.props.options, unit: unit.value });
onStatChange = stat => this.props.onChange({ ...this.props.options, stat: stat.value });
onDecimalChange = event => {
if (!isNaN(event.target.value)) {
- this.props.onChange({ ...this.props.options, decimals: event.target.value });
+ this.props.onChange({
+ ...this.props.options,
+ decimals: parseInt(event.target.value, 10),
+ });
+ } else {
+ this.props.onChange({
+ ...this.props.options,
+ decimals: null,
+ });
}
};
onPrefixChange = event => this.props.onChange({ ...this.props.options, prefix: event.target.value });
-
onSuffixChange = event => this.props.onChange({ ...this.props.options, suffix: event.target.value });
render() {
const { stat, unit, decimals, prefix, suffix } = this.props.options;
+ let decimalsString = '';
+ if (Number.isFinite(decimals)) {
+ decimalsString = decimals.toString();
+ }
+
return (
@@ -57,7 +78,7 @@ export default class ValueOptions extends PureComponent
diff --git a/public/app/plugins/panel/gauge/module.tsx b/public/app/plugins/panel/gauge/module.tsx
index 783e4825657..a32cb7cd538 100644
--- a/public/app/plugins/panel/gauge/module.tsx
+++ b/public/app/plugins/panel/gauge/module.tsx
@@ -1,4 +1,10 @@
-import GaugePanelOptions, { defaultProps } from './GaugePanelOptions';
-import { GaugePanel } from './GaugePanel';
+import { ReactPanelPlugin } from '@grafana/ui';
-export { GaugePanel as Panel, GaugePanelOptions as PanelOptions, defaultProps as PanelDefaults };
+import { GaugePanelEditor } from './GaugePanelEditor';
+import { GaugePanel } from './GaugePanel';
+import { GaugeOptions, defaults } from './types';
+
+export const reactPanel = new ReactPanelPlugin
(GaugePanel);
+
+reactPanel.setEditor(GaugePanelEditor);
+reactPanel.setDefaults(defaults);
diff --git a/public/app/plugins/panel/gauge/types.ts b/public/app/plugins/panel/gauge/types.ts
index 42262178dc8..10dd475eff5 100644
--- a/public/app/plugins/panel/gauge/types.ts
+++ b/public/app/plugins/panel/gauge/types.ts
@@ -1,15 +1,35 @@
import { Threshold, ValueMapping } from '@grafana/ui';
export interface GaugeOptions {
- decimals: number;
valueMappings: ValueMapping[];
maxValue: number;
minValue: number;
- prefix: string;
showThresholdLabels: boolean;
showThresholdMarkers: boolean;
- stat: string;
- suffix: string;
thresholds: Threshold[];
- unit: string;
+ valueOptions: SingleStatValueOptions;
}
+
+export interface SingleStatValueOptions {
+ unit: string;
+ suffix: string;
+ stat: string;
+ prefix: string;
+ decimals?: number | null;
+}
+
+export const defaults: GaugeOptions = {
+ minValue: 0,
+ maxValue: 100,
+ showThresholdMarkers: true,
+ showThresholdLabels: false,
+ valueOptions: {
+ prefix: '',
+ suffix: '',
+ decimals: null,
+ stat: 'avg',
+ unit: 'none',
+ },
+ valueMappings: [],
+ thresholds: [],
+};
diff --git a/public/app/plugins/panel/graph2/GraphPanelOptions.tsx b/public/app/plugins/panel/graph2/GraphPanelEditor.tsx
similarity index 91%
rename from public/app/plugins/panel/graph2/GraphPanelOptions.tsx
rename to public/app/plugins/panel/graph2/GraphPanelEditor.tsx
index a9c2d299589..80b17ccd5c4 100644
--- a/public/app/plugins/panel/graph2/GraphPanelOptions.tsx
+++ b/public/app/plugins/panel/graph2/GraphPanelEditor.tsx
@@ -3,10 +3,10 @@ import _ from 'lodash';
import React, { PureComponent } from 'react';
// Types
-import { PanelOptionsProps, Switch } from '@grafana/ui';
+import { PanelEditorProps, Switch } from '@grafana/ui';
import { Options } from './types';
-export class GraphPanelOptions extends PureComponent> {
+export class GraphPanelEditor extends PureComponent> {
onToggleLines = () => {
this.props.onChange({ ...this.props.options, showLines: !this.props.options.showLines });
};
diff --git a/public/app/plugins/panel/graph2/module.tsx b/public/app/plugins/panel/graph2/module.tsx
index 762d5609541..a3a3fadf6bf 100644
--- a/public/app/plugins/panel/graph2/module.tsx
+++ b/public/app/plugins/panel/graph2/module.tsx
@@ -1,4 +1,4 @@
import { GraphPanel } from './GraphPanel';
-import { GraphPanelOptions } from './GraphPanelOptions';
+import { GraphPanelEditor } from './GraphPanelEditor';
-export { GraphPanel as Panel, GraphPanelOptions as PanelOptions };
+export { GraphPanel as Panel, GraphPanelEditor as PanelOptions };
diff --git a/public/app/plugins/panel/text2/module.tsx b/public/app/plugins/panel/text2/module.tsx
index cc3ec016273..884a5927a19 100644
--- a/public/app/plugins/panel/text2/module.tsx
+++ b/public/app/plugins/panel/text2/module.tsx
@@ -1,5 +1,5 @@
import React, { PureComponent } from 'react';
-import { PanelProps } from '@grafana/ui';
+import { PanelProps, ReactPanelPlugin } from '@grafana/ui';
export class Text2 extends PureComponent {
constructor(props: PanelProps) {
@@ -11,4 +11,4 @@ export class Text2 extends PureComponent {
}
}
-export { Text2 as Panel };
+export const reactPanel = new ReactPanelPlugin(Text2);