Refactor: consistant plugin/meta usage (#16834)

packages/grafana-ui/src/types/datasource.ts

@@ -1,6 +1,6 @@
 import { ComponentClass } from 'react';
 import { TimeRange } from './time';
-import { PluginMeta } from './plugin';
+import { PluginMeta, GrafanaPlugin } from './plugin';
 import { TableData, TimeSeries, SeriesData, LoadingState } from './data';
 import { PanelData } from './panel';
 
@@ -8,11 +8,14 @@ export interface DataSourcePluginOptionsEditorProps<TOptions> {
   options: TOptions;
   onOptionsChange: (options: TOptions) => void;
 }
-export class DataSourcePlugin<TOptions = {}, TQuery extends DataQuery = DataQuery> {
+export class DataSourcePlugin<TOptions = {}, TQuery extends DataQuery = DataQuery> extends GrafanaPlugin<
+  DataSourcePluginMeta
+> {
   DataSourceClass: DataSourceConstructor<TQuery>;
   components: DataSourcePluginComponents<TOptions, TQuery>;
 
   constructor(DataSourceClass: DataSourceConstructor<TQuery>) {
+    super();
     this.DataSourceClass = DataSourceClass;
     this.components = {};
   }

packages/grafana-ui/src/types/panel.ts

@@ -2,16 +2,13 @@ import { ComponentClass, ComponentType } from 'react';
 import { LoadingState, SeriesData } from './data';
 import { TimeRange } from './time';
 import { ScopedVars, DataQueryRequest, DataQueryError, LegacyResponseData } from './datasource';
-import { PluginMeta } from './plugin';
+import { PluginMeta, GrafanaPlugin } from './plugin';
 
 export type InterpolateFunction = (value: string, scopedVars?: ScopedVars, format?: string | Function) => string;
 
 export interface PanelPluginMeta extends PluginMeta {
   hideFromList?: boolean;
   sort: number;
-  angularPlugin: AngularPanelPlugin | null;
-  panelPlugin: PanelPlugin | null;
-  hasBeenImported?: boolean;
 
   // if length>0 the query tab will show up
   // Before 6.2 this could be table and/or series, but 6.2+ supports both transparently
@@ -72,14 +69,20 @@ export type PanelTypeChangedHandler<TOptions = any> = (
   prevOptions: any
 ) => Partial<TOptions>;
 
-export class PanelPlugin<TOptions = any> {
+export class PanelPlugin<TOptions = any> extends GrafanaPlugin<PanelPluginMeta> {
   panel: ComponentType<PanelProps<TOptions>>;
   editor?: ComponentClass<PanelEditorProps<TOptions>>;
   defaults?: TOptions;
   onPanelMigration?: PanelMigrationHandler<TOptions>;
   onPanelTypeChanged?: PanelTypeChangedHandler<TOptions>;
 
+  /**
+   * Legacy angular ctrl.  If this exists it will be used instead of the panel
+   */
+  angularPanelCtrl?: any;
+
   constructor(panel: ComponentType<PanelProps<TOptions>>) {
+    super();
     this.panel = panel;
   }
 
@@ -114,16 +117,6 @@ export class PanelPlugin<TOptions = any> {
   }
 }
 
-export class AngularPanelPlugin {
-  components: {
-    PanelCtrl: any;
-  };
-
-  constructor(PanelCtrl: any) {
-    this.components = { PanelCtrl: PanelCtrl };
-  }
-}
-
 export interface PanelSize {
   width: number;
   height: number;

packages/grafana-ui/src/types/plugin.ts

@@ -69,16 +69,20 @@ export interface PluginMetaInfo {
   version: string;
 }
 
-export class AppPlugin {
-  meta: PluginMeta;
+export class GrafanaPlugin<T extends PluginMeta> {
+  // Meta is filled in by the plugin loading system
+  meta?: T;
 
+  // Soon this will also include common config options
+}
+
+export class AppPlugin extends GrafanaPlugin<PluginMeta> {
   angular?: {
     ConfigCtrl?: any;
     pages: { [component: string]: any };
   };
 
-  constructor(meta: PluginMeta, pluginExports: any) {
-    this.meta = meta;
+  setComponentsFromLegacyExports(pluginExports: any) {
     const legacy = {
       ConfigCtrl: undefined,
       pages: {} as any,
@@ -89,7 +93,8 @@ export class AppPlugin {
       this.angular = legacy;
     }
 
-    if (meta.includes) {
+    const { meta } = this;
+    if (meta && meta.includes) {
       for (const include of meta.includes) {
         const { type, component } = include;
         if (type === PluginIncludeType.page && component) {