wip: panel plugin not found

public/app/features/dashboard/dashgrid/DashboardPanel.tsx

@@ -5,13 +5,14 @@ import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoa
 import { importPluginModule } from 'app/features/plugins/plugin_loader';
 import { importPluginModule } from 'app/features/plugins/plugin_loader';
 
 
 import { AddPanelPanel } from './AddPanelPanel';
 import { AddPanelPanel } from './AddPanelPanel';
+import { PanelPluginNotFound } from './PanelPluginNotFound';
 import { DashboardRow } from './DashboardRow';
 import { DashboardRow } from './DashboardRow';
-import { PanelPlugin } from 'app/types/plugins';
 import { PanelChrome } from './PanelChrome';
 import { PanelChrome } from './PanelChrome';
 import { PanelEditor } from './PanelEditor';
 import { PanelEditor } from './PanelEditor';
 
 
 import { PanelModel } from '../panel_model';
 import { PanelModel } from '../panel_model';
 import { DashboardModel } from '../dashboard_model';
 import { DashboardModel } from '../dashboard_model';
+import { PanelPlugin, PanelProps } from 'app/types';
 
 
 export interface Props {
 export interface Props {
   panel: PanelModel;
   panel: PanelModel;
@@ -70,7 +71,7 @@ export class DashboardPanel extends PureComponent<Props, State> {
 
 
     // handle plugin loading & changing of plugin type
     // handle plugin loading & changing of plugin type
     if (!this.state.plugin || this.state.plugin.id !== panel.type) {
     if (!this.state.plugin || this.state.plugin.id !== panel.type) {
-      const plugin = config.panels[panel.type];
+      const plugin = config.panels[panel.type] || this.getPanelPluginNotFound(panel.type);
 
 
       if (plugin.exports) {
       if (plugin.exports) {
         this.cleanUpAngularPanel();
         this.cleanUpAngularPanel();
@@ -87,6 +88,22 @@ export class DashboardPanel extends PureComponent<Props, State> {
     }
     }
   }
   }
 
 
+  getPanelPluginNotFound(id: string): PanelPlugin {
+    const NotFound = class NotFound extends PureComponent<PanelProps> {
+      render() {
+        return <PanelPluginNotFound pluginId={id} />;
+      }
+    };
+
+    return {
+      id: id,
+      name: id,
+      exports: {
+        PanelComponent: NotFound,
+      },
+    };
+  }
+
   componentDidMount() {
   componentDidMount() {
     this.loadPlugin();
     this.loadPlugin();
   }
   }

public/app/features/dashboard/dashgrid/EditorTabBody.tsx

@@ -81,7 +81,7 @@ export class EditorTabBody extends PureComponent<Props, State> {
           {toolbarItems.map(item => this.renderButton(item))}
           {toolbarItems.map(item => this.renderButton(item))}
         </div>
         </div>
         <div className="panel-editor__scroll">
         <div className="panel-editor__scroll">
-          <CustomScrollbar>
+          <CustomScrollbar autoHide={false}>
             <div className="panel-editor__content">
             <div className="panel-editor__content">
               <FadeIn in={openView !== null} duration={200}>
               <FadeIn in={openView !== null} duration={200}>
                 {openView && this.renderOpenView(openView)}
                 {openView && this.renderOpenView(openView)}

public/app/features/dashboard/dashgrid/PanelPluginNotFound.tsx

+import _ from 'lodash';
+import React, { PureComponent } from 'react';
+
+interface Props {
+  pluginId: string;
+}
+
+export class PanelPluginNotFound extends PureComponent<Props> {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return <h2>Panel plugin with id {this.props.id} could not be found</h2>;
+  }
+}

public/app/types/index.ts

@@ -21,7 +21,7 @@ import {
   DataQueryOptions,
   DataQueryOptions,
 } from './series';
 } from './series';
 import { PanelProps, PanelOptionsProps } from './panel';
 import { PanelProps, PanelOptionsProps } from './panel';
-import { PluginDashboard, PluginMeta, Plugin, PluginsState } from './plugins';
+import { PluginDashboard, PluginMeta, Plugin, PanelPlugin, PluginsState } from './plugins';
 import { Organization, OrganizationPreferences, OrganizationState } from './organization';
 import { Organization, OrganizationPreferences, OrganizationState } from './organization';
 import {
 import {
   AppNotification,
   AppNotification,
@@ -69,6 +69,7 @@ export {
   UsersState,
   UsersState,
   TimeRange,
   TimeRange,
   LoadingState,
   LoadingState,
+  PanelPlugin,
   PanelProps,
   PanelProps,
   PanelOptionsProps,
   PanelOptionsProps,
   TimeSeries,
   TimeSeries,

public/app/types/plugins.ts

@@ -12,13 +12,13 @@ export interface PluginExports {
   // Panel plugin
   // Panel plugin
   PanelCtrl?;
   PanelCtrl?;
   PanelComponent?: ComponentClass<PanelProps>;
   PanelComponent?: ComponentClass<PanelProps>;
-  PanelOptionsComponent: ComponentClass<PanelOptionsProps>;
+  PanelOptionsComponent?: ComponentClass<PanelOptionsProps>;
 }
 }
 
 
 export interface PanelPlugin {
 export interface PanelPlugin {
   id: string;
   id: string;
   name: string;
   name: string;
-  meta: any;
+  meta: PluginMeta;
   hideFromList: boolean;
   hideFromList: boolean;
   module: string;
   module: string;
   baseUrl: string;
   baseUrl: string;