Commit 060e97be by Torkel Ödegaard Committed by GitHub

Plugins: ReactPanelPlugin to VizPanelPlugin (#16779)

* Plugins: ReactPanelPlugin renamed

* Plugins: renamed PanelPlugin to PanelPluginMeta and VizPanelPlugin to PanelPlugin
parent e3876266
......@@ -53,7 +53,7 @@ export type PanelTypeChangedHandler<TOptions = any> = (
prevOptions: any
) => Partial<TOptions>;
export class ReactPanelPlugin<TOptions = any> {
export class PanelPlugin<TOptions = any> {
panel: ComponentType<PanelProps<TOptions>>;
editor?: ComponentClass<PanelEditorProps<TOptions>>;
defaults?: TOptions;
......
import _ from 'lodash';
import { PanelPlugin } from 'app/types/plugins';
import { PanelPluginMeta } from 'app/types/plugins';
import { GrafanaTheme, getTheme, GrafanaThemeType, DataSourceInstanceSettings } from '@grafana/ui';
export interface BuildInfo {
......@@ -13,7 +13,7 @@ export interface BuildInfo {
export class Settings {
datasources: { [str: string]: DataSourceInstanceSettings };
panels: { [key: string]: PanelPlugin };
panels: { [key: string]: PanelPluginMeta };
appSubUrl: string;
windowTitlePrefix: string;
buildInfo: BuildInfo;
......
......@@ -9,7 +9,7 @@ import config from 'app/core/config';
import { DashboardExporter } from './DashboardExporter';
import { DashboardModel } from '../../state/DashboardModel';
import { DatasourceSrv } from 'app/features/plugins/datasource_srv';
import { PanelPlugin } from 'app/types';
import { PanelPluginMeta } from 'app/types';
describe('given dashboard with repeated panels', () => {
let dash: any, exported: any;
......@@ -97,19 +97,19 @@ describe('given dashboard with repeated panels', () => {
id: 'graph',
name: 'Graph',
info: { version: '1.1.0' },
} as PanelPlugin;
} as PanelPluginMeta;
config.panels['table'] = {
id: 'table',
name: 'Table',
info: { version: '1.1.1' },
} as PanelPlugin;
} as PanelPluginMeta;
config.panels['heatmap'] = {
id: 'heatmap',
name: 'Heatmap',
info: { version: '1.1.2' },
} as PanelPlugin;
} as PanelPluginMeta;
dash = new DashboardModel(dash, {});
const exporter = new DashboardExporter(datasourceSrvStub);
......
......@@ -4,7 +4,7 @@ import config from 'app/core/config';
import { DashboardModel } from '../../state/DashboardModel';
import DatasourceSrv from 'app/features/plugins/datasource_srv';
import { PanelModel } from 'app/features/dashboard/state';
import { PanelPlugin } from 'app/types/plugins';
import { PanelPluginMeta } from 'app/types/plugins';
interface Input {
name: string;
......@@ -119,7 +119,7 @@ export class DashboardExporter {
}
}
const panelDef: PanelPlugin = config.panels[panel.type];
const panelDef: PanelPluginMeta = config.panels[panel.type];
if (panelDef) {
requires['panel' + panelDef.id] = {
type: 'panel',
......
......@@ -17,8 +17,8 @@ import { PanelResizer } from './PanelResizer';
// Types
import { PanelModel, DashboardModel } from '../state';
import { PanelPlugin } from 'app/types';
import { AngularPanelPlugin, ReactPanelPlugin } from '@grafana/ui/src/types/panel';
import { PanelPluginMeta } from 'app/types';
import { AngularPanelPlugin, PanelPlugin } from '@grafana/ui/src/types/panel';
import { AutoSizer } from 'react-virtualized';
export interface Props {
......@@ -29,7 +29,7 @@ export interface Props {
}
export interface State {
plugin: PanelPlugin;
plugin: PanelPluginMeta;
angularPanel: AngularComponent;
}
......@@ -61,7 +61,7 @@ export class DashboardPanel extends PureComponent<Props, State> {
return <AddPanelWidget panel={this.props.panel} dashboard={this.props.dashboard} />;
}
onPluginTypeChanged = (plugin: PanelPlugin) => {
onPluginTypeChanged = (plugin: PanelPluginMeta) => {
this.loadPlugin(plugin.id);
};
......@@ -92,7 +92,7 @@ export class DashboardPanel extends PureComponent<Props, State> {
}
}
async importPanelPluginModule(plugin: PanelPlugin): Promise<PanelPlugin> {
async importPanelPluginModule(plugin: PanelPluginMeta): Promise<PanelPluginMeta> {
if (plugin.hasBeenImported) {
return plugin;
}
......@@ -101,8 +101,8 @@ export class DashboardPanel extends PureComponent<Props, State> {
const importedPlugin = await importPanelPlugin(plugin.module);
if (importedPlugin instanceof AngularPanelPlugin) {
plugin.angularPlugin = importedPlugin as AngularPanelPlugin;
} else if (importedPlugin instanceof ReactPanelPlugin) {
plugin.reactPlugin = importedPlugin as ReactPanelPlugin;
} else if (importedPlugin instanceof PanelPlugin) {
plugin.vizPlugin = importedPlugin as PanelPlugin;
}
} catch (e) {
plugin = getPanelPluginNotFound(plugin.id);
......@@ -210,7 +210,7 @@ export class DashboardPanel extends PureComponent<Props, State> {
onMouseLeave={this.onMouseLeave}
style={styles}
>
{plugin.reactPlugin && this.renderReactPanel()}
{plugin.vizPlugin && this.renderReactPanel()}
{plugin.angularPlugin && this.renderAngularPanel()}
</div>
)}
......
......@@ -16,7 +16,7 @@ import config from 'app/core/config';
// Types
import { DashboardModel, PanelModel } from '../state';
import { PanelPlugin } from 'app/types';
import { PanelPluginMeta } from 'app/types';
import { LoadingState, PanelData } from '@grafana/ui';
import { ScopedVars } from '@grafana/ui';
......@@ -30,7 +30,7 @@ const DEFAULT_PLUGIN_ERROR = 'Error in plugin';
export interface Props {
panel: PanelModel;
dashboard: DashboardModel;
plugin: PanelPlugin;
plugin: PanelPluginMeta;
isFullscreen: boolean;
width: number;
height: number;
......@@ -216,7 +216,7 @@ export class PanelChrome extends PureComponent<Props, State> {
renderPanel(width: number, height: number): JSX.Element {
const { panel, plugin } = this.props;
const { renderCounter, data, isFirstLoad } = this.state;
const PanelComponent = plugin.reactPlugin.panel;
const PanelComponent = plugin.vizPlugin.panel;
// This is only done to increase a counter that is used by backend
// image rendering (phantomjs/headless chrome) to know when to capture image
......@@ -237,7 +237,7 @@ export class PanelChrome extends PureComponent<Props, State> {
<PanelComponent
data={data}
timeRange={data.request ? data.request.range : this.timeSrv.timeRange()}
options={panel.getOptions(plugin.reactPlugin.defaults)}
options={panel.getOptions(plugin.vizPlugin.defaults)}
width={width - 2 * config.theme.panelPadding.horizontal}
height={height - PANEL_HEADER_HEIGHT - config.theme.panelPadding.vertical}
renderCounter={renderCounter}
......
......@@ -6,8 +6,8 @@ import React, { PureComponent } from 'react';
import { AlertBox } from 'app/core/components/AlertBox/AlertBox';
// Types
import { PanelPlugin, AppNotificationSeverity } from 'app/types';
import { PanelProps, ReactPanelPlugin, PluginType } from '@grafana/ui';
import { PanelPluginMeta, AppNotificationSeverity } from 'app/types';
import { PanelProps, PanelPlugin, PluginType } from '@grafana/ui';
interface Props {
pluginId: string;
......@@ -34,7 +34,7 @@ class PanelPluginNotFound extends PureComponent<Props> {
}
}
export function getPanelPluginNotFound(id: string): PanelPlugin {
export function getPanelPluginNotFound(id: string): PanelPluginMeta {
const NotFound = class NotFound extends PureComponent<PanelProps> {
render() {
return <PanelPluginNotFound pluginId={id} />;
......@@ -63,7 +63,7 @@ export function getPanelPluginNotFound(id: string): PanelPlugin {
updated: '',
version: '',
},
reactPlugin: new ReactPanelPlugin(NotFound),
vizPlugin: new PanelPlugin(NotFound),
angularPlugin: null,
};
}
......@@ -13,16 +13,16 @@ import { AngularComponent } from 'app/core/services/AngularLoader';
import { PanelModel } from '../state/PanelModel';
import { DashboardModel } from '../state/DashboardModel';
import { PanelPlugin } from 'app/types/plugins';
import { PanelPluginMeta } from 'app/types/plugins';
import { Tooltip } from '@grafana/ui';
interface PanelEditorProps {
panel: PanelModel;
dashboard: DashboardModel;
plugin: PanelPlugin;
plugin: PanelPluginMeta;
angularPanel?: AngularComponent;
onTypeChanged: (newType: PanelPlugin) => void;
onTypeChanged: (newType: PanelPluginMeta) => void;
}
interface PanelEditorTab {
......
......@@ -16,16 +16,16 @@ import { FadeIn } from 'app/core/components/Animations/FadeIn';
// Types
import { PanelModel } from '../state';
import { DashboardModel } from '../state';
import { PanelPlugin } from 'app/types/plugins';
import { PanelPluginMeta } from 'app/types/plugins';
import { VizPickerSearch } from './VizPickerSearch';
import PluginStateinfo from 'app/features/plugins/PluginStateInfo';
interface Props {
panel: PanelModel;
dashboard: DashboardModel;
plugin: PanelPlugin;
plugin: PanelPluginMeta;
angularPanel?: AngularComponent;
onTypeChanged: (newType: PanelPlugin) => void;
onTypeChanged: (newType: PanelPluginMeta) => void;
updateLocation: typeof updateLocation;
urlOpenVizPicker: boolean;
}
......@@ -54,7 +54,7 @@ export class VisualizationTab extends PureComponent<Props, State> {
getReactPanelOptions = () => {
const { panel, plugin } = this.props;
return panel.getOptions(plugin.reactPlugin.defaults);
return panel.getOptions(plugin.vizPlugin.defaults);
};
renderPanelOptions() {
......@@ -64,8 +64,8 @@ export class VisualizationTab extends PureComponent<Props, State> {
return <div ref={element => (this.element = element)} />;
}
if (plugin.reactPlugin) {
const PanelEditor = plugin.reactPlugin.editor;
if (plugin.vizPlugin) {
const PanelEditor = plugin.vizPlugin.editor;
if (PanelEditor) {
return <PanelEditor options={this.getReactPanelOptions()} onOptionsChange={this.onPanelOptionsChanged} />;
......@@ -197,7 +197,7 @@ export class VisualizationTab extends PureComponent<Props, State> {
}
};
onTypeChanged = (plugin: PanelPlugin) => {
onTypeChanged = (plugin: PanelPluginMeta) => {
if (plugin.id === this.props.plugin.id) {
this.setState({ isVizPickerOpen: false });
} else {
......
......@@ -2,10 +2,10 @@ import React, { PureComponent } from 'react';
import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
import { PanelPlugin } from 'app/types';
import { PanelPluginMeta } from 'app/types';
interface Props {
plugin: PanelPlugin;
plugin: PanelPluginMeta;
searchQuery: string;
onChange: (query: string) => void;
onClose: () => void;
......
import React, { PureComponent } from 'react';
import config from 'app/core/config';
import { PanelPlugin } from 'app/types/plugins';
import { PanelPluginMeta } from 'app/types/plugins';
import VizTypePickerPlugin from './VizTypePickerPlugin';
import { EmptySearchResult } from '@grafana/ui';
export interface Props {
current: PanelPlugin;
onTypeChanged: (newType: PanelPlugin) => void;
current: PanelPluginMeta;
onTypeChanged: (newType: PanelPluginMeta) => void;
searchQuery: string;
onClose: () => void;
}
......@@ -25,16 +25,16 @@ export class VizTypePicker extends PureComponent<Props> {
return filteredPluginList.length - 1;
}
get getPanelPlugins(): PanelPlugin[] {
get getPanelPlugins(): PanelPluginMeta[] {
const allPanels = config.panels;
return Object.keys(allPanels)
.filter(key => allPanels[key]['hideFromList'] === false)
.map(key => allPanels[key])
.sort((a: PanelPlugin, b: PanelPlugin) => a.sort - b.sort);
.sort((a: PanelPluginMeta, b: PanelPluginMeta) => a.sort - b.sort);
}
renderVizPlugin = (plugin: PanelPlugin, index: number) => {
renderVizPlugin = (plugin: PanelPluginMeta, index: number) => {
const { onTypeChanged } = this.props;
const isCurrent = plugin.id === this.props.current.id;
......@@ -48,7 +48,7 @@ export class VizTypePicker extends PureComponent<Props> {
);
};
getFilteredPluginList = (): PanelPlugin[] => {
getFilteredPluginList = (): PanelPluginMeta[] => {
const { searchQuery } = this.props;
const regex = new RegExp(searchQuery, 'i');
const pluginList = this.pluginList;
......
import React from 'react';
import classNames from 'classnames';
import { PanelPlugin } from 'app/types/plugins';
import { PanelPluginMeta } from 'app/types/plugins';
interface Props {
isCurrent: boolean;
plugin: PanelPlugin;
plugin: PanelPluginMeta;
onClick: () => void;
}
......
import { PanelModel } from './PanelModel';
import { getPanelPlugin } from '../../plugins/__mocks__/pluginMocks';
import { ReactPanelPlugin, AngularPanelPlugin } from '@grafana/ui/src/types/panel';
import { PanelPlugin, AngularPanelPlugin } from '@grafana/ui/src/types/panel';
class TablePanelCtrl {}
......@@ -123,13 +123,13 @@ describe('PanelModel', () => {
describe('when changing to react panel', () => {
const onPanelTypeChanged = jest.fn();
const reactPlugin = new ReactPanelPlugin({} as any).setPanelChangeHandler(onPanelTypeChanged as any);
const reactPlugin = new PanelPlugin({} as any).setPanelChangeHandler(onPanelTypeChanged as any);
beforeEach(() => {
model.changePlugin(
getPanelPlugin({
id: 'react',
reactPlugin: reactPlugin,
vizPlugin: reactPlugin,
})
);
});
......
......@@ -7,7 +7,7 @@ import { getNextRefIdChar } from 'app/core/utils/query';
// Types
import { DataQuery, Threshold, ScopedVars, DataQueryResponseData } from '@grafana/ui';
import { PanelPlugin } from 'app/types';
import { PanelPluginMeta } from 'app/types';
import config from 'app/core/config';
import { PanelQueryRunner } from './PanelQueryRunner';
......@@ -117,7 +117,7 @@ export class PanelModel {
cacheTimeout?: any;
cachedPluginOptions?: any;
legend?: { show: boolean };
plugin?: PanelPlugin;
plugin?: PanelPluginMeta;
private queryRunner?: PanelQueryRunner;
constructor(model: any) {
......@@ -249,23 +249,23 @@ export class PanelModel {
});
}
private getPluginVersion(plugin: PanelPlugin): string {
private getPluginVersion(plugin: PanelPluginMeta): string {
return this.plugin && this.plugin.info.version ? this.plugin.info.version : config.buildInfo.version;
}
pluginLoaded(plugin: PanelPlugin) {
pluginLoaded(plugin: PanelPluginMeta) {
this.plugin = plugin;
if (plugin.reactPlugin && plugin.reactPlugin.onPanelMigration) {
if (plugin.vizPlugin && plugin.vizPlugin.onPanelMigration) {
const version = this.getPluginVersion(plugin);
if (version !== this.pluginVersion) {
this.options = plugin.reactPlugin.onPanelMigration(this);
this.options = plugin.vizPlugin.onPanelMigration(this);
this.pluginVersion = version;
}
}
}
changePlugin(newPlugin: PanelPlugin) {
changePlugin(newPlugin: PanelPluginMeta) {
const pluginId = newPlugin.id;
const oldOptions: any = this.getOptionsToRemember();
const oldPluginId = this.type;
......@@ -292,7 +292,7 @@ export class PanelModel {
this.plugin = newPlugin;
// Let panel plugins inspect options from previous panel and keep any that it can use
const reactPanel = newPlugin.reactPlugin;
const reactPanel = newPlugin.vizPlugin;
if (reactPanel) {
if (reactPanel.onPanelTypeChanged) {
......
import { Plugin, PanelPlugin, PanelDataFormat } from 'app/types';
import { Plugin, PanelPluginMeta, PanelDataFormat } from 'app/types';
import { PluginType } from '@grafana/ui';
export const getMockPlugins = (amount: number): Plugin[] => {
......@@ -34,7 +34,7 @@ export const getMockPlugins = (amount: number): Plugin[] => {
return plugins;
};
export const getPanelPlugin = (options: Partial<PanelPlugin>): PanelPlugin => {
export const getPanelPlugin = (options: Partial<PanelPluginMeta>): PanelPluginMeta => {
return {
id: options.id,
type: PluginType.panel,
......@@ -58,7 +58,7 @@ export const getPanelPlugin = (options: Partial<PanelPlugin>): PanelPlugin => {
hideFromList: options.hideFromList === true,
module: '',
baseUrl: '',
reactPlugin: options.reactPlugin,
vizPlugin: options.vizPlugin,
angularPlugin: options.angularPlugin,
};
};
......
......@@ -18,7 +18,7 @@ import config from 'app/core/config';
import TimeSeries from 'app/core/time_series2';
import TableModel from 'app/core/table_model';
import { coreModule, appEvents, contextSrv } from 'app/core/core';
import { DataSourcePlugin, AppPlugin, ReactPanelPlugin, AngularPanelPlugin, PluginMeta } from '@grafana/ui/src/types';
import { DataSourcePlugin, AppPlugin, PanelPlugin, AngularPanelPlugin, PluginMeta } from '@grafana/ui/src/types';
import * as datemath from 'app/core/utils/datemath';
import * as fileExport from 'app/core/utils/file_export';
import * as flatten from 'app/core/utils/flatten';
......@@ -182,10 +182,10 @@ export function importAppPlugin(meta: PluginMeta): Promise<AppPlugin> {
});
}
export function importPanelPlugin(path: string): Promise<AngularPanelPlugin | ReactPanelPlugin> {
export function importPanelPlugin(path: string): Promise<AngularPanelPlugin | PanelPlugin> {
return importPluginModule(path).then(pluginExports => {
if (pluginExports.reactPanel) {
return pluginExports.reactPanel as ReactPanelPlugin;
if (pluginExports.plugin) {
return pluginExports.plugin as PanelPlugin;
} else {
return new AngularPanelPlugin(pluginExports.PanelCtrl);
}
......
import { ReactPanelPlugin, sharedSingleStatOptionsCheck } from '@grafana/ui';
import { PanelPlugin, sharedSingleStatOptionsCheck } from '@grafana/ui';
import { BarGaugePanel } from './BarGaugePanel';
import { BarGaugePanelEditor } from './BarGaugePanelEditor';
import { BarGaugeOptions, defaults } from './types';
export const reactPanel = new ReactPanelPlugin<BarGaugeOptions>(BarGaugePanel)
export const plugin = new PanelPlugin<BarGaugeOptions>(BarGaugePanel)
.setDefaults(defaults)
.setEditor(BarGaugePanelEditor)
.setPanelChangeHandler(sharedSingleStatOptionsCheck);
import { ReactPanelPlugin, sharedSingleStatMigrationCheck, sharedSingleStatOptionsCheck } from '@grafana/ui';
import { PanelPlugin, sharedSingleStatMigrationCheck, sharedSingleStatOptionsCheck } from '@grafana/ui';
import { GaugePanelEditor } from './GaugePanelEditor';
import { GaugePanel } from './GaugePanel';
import { GaugeOptions, defaults } from './types';
export const reactPanel = new ReactPanelPlugin<GaugeOptions>(GaugePanel)
export const plugin = new PanelPlugin<GaugeOptions>(GaugePanel)
.setDefaults(defaults)
.setEditor(GaugePanelEditor)
.setPanelChangeHandler(sharedSingleStatOptionsCheck)
......
import { ReactPanelPlugin } from '@grafana/ui';
import { PanelPlugin } from '@grafana/ui';
import { GraphPanelEditor } from './GraphPanelEditor';
import { GraphPanel } from './GraphPanel';
import { Options, defaults } from './types';
export const reactPanel = new ReactPanelPlugin<Options>(GraphPanel).setDefaults(defaults).setEditor(GraphPanelEditor);
export const plugin = new PanelPlugin<Options>(GraphPanel).setDefaults(defaults).setEditor(GraphPanelEditor);
import { ReactPanelPlugin } from '@grafana/ui';
import { PanelPlugin } from '@grafana/ui';
import { PieChartPanelEditor } from './PieChartPanelEditor';
import { PieChartPanel } from './PieChartPanel';
import { PieChartOptions, defaults } from './types';
export const reactPanel = new ReactPanelPlugin<PieChartOptions>(PieChartPanel)
export const plugin = new PanelPlugin<PieChartOptions>(PieChartPanel)
.setDefaults(defaults)
.setEditor(PieChartPanelEditor);
import { ReactPanelPlugin, sharedSingleStatMigrationCheck, sharedSingleStatOptionsCheck } from '@grafana/ui';
import { PanelPlugin, sharedSingleStatMigrationCheck, sharedSingleStatOptionsCheck } from '@grafana/ui';
import { SingleStatOptions, defaults } from './types';
import { SingleStatPanel } from './SingleStatPanel';
import { SingleStatEditor } from './SingleStatEditor';
export const reactPanel = new ReactPanelPlugin<SingleStatOptions>(SingleStatPanel)
export const plugin = new PanelPlugin<SingleStatOptions>(SingleStatPanel)
.setDefaults(defaults)
.setEditor(SingleStatEditor)
.setPanelChangeHandler(sharedSingleStatOptionsCheck)
......
import { ReactPanelPlugin } from '@grafana/ui';
import { PanelPlugin } from '@grafana/ui';
import { TablePanelEditor } from './TablePanelEditor';
import { TablePanel } from './TablePanel';
import { Options, defaults } from './types';
export const reactPanel = new ReactPanelPlugin<Options>(TablePanel).setDefaults(defaults).setEditor(TablePanelEditor);
export const plugin = new PanelPlugin<Options>(TablePanel).setDefaults(defaults).setEditor(TablePanelEditor);
import { ReactPanelPlugin } from '@grafana/ui';
import { PanelPlugin } from '@grafana/ui';
import { TextPanelEditor } from './TextPanelEditor';
import { TextPanel } from './TextPanel';
import { TextOptions, defaults } from './types';
export const reactPanel = new ReactPanelPlugin<TextOptions>(TextPanel)
export const plugin = new PanelPlugin<TextOptions>(TextPanel)
.setDefaults(defaults)
.setEditor(TextPanelEditor)
.setPanelChangeHandler((options: TextOptions, prevPluginId: string, prevOptions: any) => {
......
import { AngularPanelPlugin, ReactPanelPlugin, PluginMetaInfo, PluginMeta } from '@grafana/ui/src/types';
import { AngularPanelPlugin, PanelPlugin, PluginMeta } from '@grafana/ui/src/types';
export interface PanelPlugin extends PluginMeta {
export interface PanelPluginMeta extends PluginMeta {
hideFromList?: boolean;
baseUrl: string;
info: PluginMetaInfo;
sort: number;
angularPlugin: AngularPanelPlugin | null;
reactPlugin: ReactPanelPlugin | null;
vizPlugin: PanelPlugin | null;
hasBeenImported?: boolean;
dataFormats: PanelDataFormat[];
}
......
......@@ -3,7 +3,7 @@ import config from 'app/core/config';
import * as dateMath from 'app/core/utils/datemath';
import { angularMocks, sinon } from '../lib/common';
import { PanelModel } from 'app/features/dashboard/state/PanelModel';
import { PanelPlugin } from 'app/types';
import { PanelPluginMeta } from 'app/types';
import { RawTimeRange } from '@grafana/ui/src/types';
export function ControllerTestContext(this: any) {
......@@ -64,7 +64,7 @@ export function ControllerTestContext(this: any) {
$rootScope.colors.push('#' + i);
}
config.panels['test'] = { info: {} } as PanelPlugin;
config.panels['test'] = { info: {} } as PanelPluginMeta;
self.ctrl = $controller(
Ctrl,
{ $scope: self.scope },
......
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