(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..d96838dc640 100644
--- a/public/app/features/dashboard/state/PanelModel.test.ts
+++ b/public/app/features/dashboard/state/PanelModel.test.ts
@@ -55,5 +55,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..fda586d2776 100644
--- a/public/app/features/dashboard/state/PanelModel.ts
+++ b/public/app/features/dashboard/state/PanelModel.ts
@@ -3,7 +3,6 @@ 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 { TableData } from '@grafana/ui/src';
@@ -92,6 +91,7 @@ export class PanelModel {
timeFrom?: any;
timeShift?: any;
hideTimeOverride?: any;
+ options: object;
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) {
@@ -134,20 +132,14 @@ export class PanelModel {
}
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 +232,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/bargauge/BarGaugePanel.tsx b/public/app/plugins/panel/bargauge/BarGaugePanel.tsx
index 534e24f1e25..125d1b3cc3d 100644
--- a/public/app/plugins/panel/bargauge/BarGaugePanel.tsx
+++ b/public/app/plugins/panel/bargauge/BarGaugePanel.tsx
@@ -16,9 +16,10 @@ interface Props extends PanelProps {}
export class BarGaugePanel 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;
@@ -29,7 +30,7 @@ export class BarGaugePanel extends PureComponent {
});
if (vmSeries[0]) {
- value = vmSeries[0].stats[options.stat];
+ value = vmSeries[0].stats[valueOptions.stat];
} else {
value = null;
}
@@ -42,11 +43,16 @@ export class BarGaugePanel extends PureComponent {
{theme => (
)}
diff --git a/public/app/plugins/panel/bargauge/BarGaugePanelOptions.tsx b/public/app/plugins/panel/bargauge/BarGaugePanelEditor.tsx
similarity index 70%
rename from public/app/plugins/panel/bargauge/BarGaugePanelOptions.tsx
rename to public/app/plugins/panel/bargauge/BarGaugePanelEditor.tsx
index d3faf458868..6292bafd573 100644
--- a/public/app/plugins/panel/bargauge/BarGaugePanelOptions.tsx
+++ b/public/app/plugins/panel/bargauge/BarGaugePanelEditor.tsx
@@ -2,14 +2,15 @@
import React, { PureComponent } from 'react';
// Components
-import { ValueOptions } from 'app/plugins/panel/gauge/ValueOptions';
+import { SingleStatValueEditor } from '../gauge/SingleStatValueEditor';
import { ThresholdsEditor, ValueMappingsEditor, PanelOptionsGrid, PanelOptionsGroup, FormField } from '@grafana/ui';
// Types
-import { PanelOptionsProps, Threshold, ValueMapping } from '@grafana/ui';
+import { PanelEditorProps, Threshold, ValueMapping } from '@grafana/ui';
import { BarGaugeOptions } from './types';
+import { SingleStatValueOptions } from '../gauge/types';
-export class BarGaugePanelOptions extends PureComponent> {
+export class BarGaugePanelEditor extends PureComponent> {
onThresholdsChanged = (thresholds: Threshold[]) =>
this.props.onChange({
...this.props.options,
@@ -23,15 +24,22 @@ export class BarGaugePanelOptions extends PureComponent this.props.onChange({ ...this.props.options, minValue: target.value });
+
onMaxValueChange = ({ target }) => this.props.onChange({ ...this.props.options, maxValue: target.value });
+ onValueOptionsChanged = (valueOptions: SingleStatValueOptions) =>
+ this.props.onChange({
+ ...this.props.options,
+ valueOptions,
+ });
+
render() {
- const { onChange, options } = this.props;
+ const { options } = this.props;
return (
<>
-
+
diff --git a/public/app/plugins/panel/bargauge/module.tsx b/public/app/plugins/panel/bargauge/module.tsx
index 10eaffc8c83..f2aa592fc70 100644
--- a/public/app/plugins/panel/bargauge/module.tsx
+++ b/public/app/plugins/panel/bargauge/module.tsx
@@ -1,5 +1,9 @@
-import { BarGaugePanel } from './BarGaugePanel';
-import { BarGaugePanelOptions } from './BarGaugePanelOptions';
-import { PanelDefaults } from './types';
+import { ReactPanelPlugin } from '@grafana/ui';
-export { BarGaugePanel as Panel, BarGaugePanelOptions as PanelOptions, PanelDefaults };
+import { BarGaugePanel } from './BarGaugePanel';
+import { BarGaugePanelEditor } from './BarGaugePanelEditor';
+import { BarGaugeOptions, defaults } from './types';
+
+export const reactPanel = new ReactPanelPlugin(BarGaugePanel);
+reactPanel.setEditor(BarGaugePanelEditor);
+reactPanel.setDefaults(defaults);
diff --git a/public/app/plugins/panel/bargauge/types.ts b/public/app/plugins/panel/bargauge/types.ts
index dcef36716a4..362f6d96cc4 100644
--- a/public/app/plugins/panel/bargauge/types.ts
+++ b/public/app/plugins/panel/bargauge/types.ts
@@ -1,23 +1,24 @@
import { Threshold, ValueMapping } from '@grafana/ui';
+import { SingleStatValueOptions } from '../gauge/types';
export interface BarGaugeOptions {
minValue: number;
maxValue: number;
- prefix: string;
- stat: string;
- suffix: string;
- unit: string;
+ valueOptions: SingleStatValueOptions;
valueMappings: ValueMapping[];
thresholds: Threshold[];
}
-export const PanelDefaults: BarGaugeOptions = {
+export const defaults: BarGaugeOptions = {
minValue: 0,
maxValue: 100,
- prefix: '',
- suffix: '',
- stat: 'avg',
- unit: 'none',
+ valueOptions: {
+ prefix: '',
+ suffix: '',
+ decimals: null,
+ stat: 'avg',
+ unit: 'none',
+ },
thresholds: [
{ index: 2, value: 80, color: 'red' },
{ index: 1, value: 50, color: 'orange' },
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 d89560806a8..b5d6acca806 100644
--- a/public/app/plugins/panel/gauge/GaugeOptionsEditor.tsx
+++ b/public/app/plugins/panel/gauge/GaugeOptionsBox.tsx
@@ -1,8 +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 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/GaugePanelEditor.tsx b/public/app/plugins/panel/gauge/GaugePanelEditor.tsx
new file mode 100644
index 00000000000..74928f1932b
--- /dev/null
+++ b/public/app/plugins/panel/gauge/GaugePanelEditor.tsx
@@ -0,0 +1,50 @@
+// Libraries
+import React, { PureComponent } from 'react';
+import {
+ PanelEditorProps,
+ ThresholdsEditor,
+ Threshold,
+ PanelOptionsGrid,
+ ValueMappingsEditor,
+ ValueMapping,
+} from '@grafana/ui';
+
+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,
+ thresholds,
+ });
+
+ onValueMappingsChanged = (valueMappings: ValueMapping[]) =>
+ this.props.onChange({
+ ...this.props.options,
+ valueMappings,
+ });
+
+ onValueOptionsChanged = (valueOptions: SingleStatValueOptions) =>
+ this.props.onChange({
+ ...this.props.options,
+ valueOptions,
+ });
+
+ render() {
+ const { onChange, options } = this.props;
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+ );
+ }
+}
diff --git a/public/app/plugins/panel/gauge/GaugePanelOptions.tsx b/public/app/plugins/panel/gauge/GaugePanelOptions.tsx
deleted file mode 100644
index 457ba0865de..00000000000
--- a/public/app/plugins/panel/gauge/GaugePanelOptions.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-// Libraries
-import React, { PureComponent } from 'react';
-
-// Components
-import { ValueOptions } from 'app/plugins/panel/gauge/ValueOptions';
-import { GaugeOptionsEditor } from './GaugeOptionsEditor';
-import { ThresholdsEditor, ValueMappingsEditor } from '@grafana/ui';
-
-// Types
-import { PanelOptionsProps, Threshold, PanelOptionsGrid, ValueMapping } from '@grafana/ui';
-import { GaugeOptions } from './types';
-
-export class GaugePanelOptions extends PureComponent> {
- onThresholdsChanged = (thresholds: Threshold[]) =>
- this.props.onChange({
- ...this.props.options,
- thresholds,
- });
-
- onValueMappingsChanged = (valueMappings: ValueMapping[]) =>
- this.props.onChange({
- ...this.props.options,
- valueMappings,
- });
-
- 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 c778bbd8e36..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 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 class ValueOptions extends PureComponent
>
labelWidth={labelWidth}
placeholder="auto"
onChange={this.onDecimalChange}
- value={decimals || ''}
+ value={decimalsString}
type="number"
/>
diff --git a/public/app/plugins/panel/gauge/module.tsx b/public/app/plugins/panel/gauge/module.tsx
index 3323fdfd5cb..fc44bd7a9d6 100644
--- a/public/app/plugins/panel/gauge/module.tsx
+++ b/public/app/plugins/panel/gauge/module.tsx
@@ -1,5 +1,9 @@
-import { GaugePanelOptions } from './GaugePanelOptions';
-import { GaugePanel } from './GaugePanel';
-import { PanelDefaults } from './types';
+import { ReactPanelPlugin } from '@grafana/ui';
-export { GaugePanel as Panel, GaugePanelOptions as PanelOptions, 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 4cdb4fcdd7b..10dd475eff5 100644
--- a/public/app/plugins/panel/gauge/types.ts
+++ b/public/app/plugins/panel/gauge/types.ts
@@ -1,29 +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 const PanelDefaults: GaugeOptions = {
+export interface SingleStatValueOptions {
+ unit: string;
+ suffix: string;
+ stat: string;
+ prefix: string;
+ decimals?: number | null;
+}
+
+export const defaults: GaugeOptions = {
minValue: 0,
maxValue: 100,
- prefix: '',
showThresholdMarkers: true,
showThresholdLabels: false,
- suffix: '',
- decimals: 0,
- stat: 'avg',
- unit: 'none',
+ 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);
+