From 119e94f745be4d35b18707a3c29107d27aafe91b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Mon, 12 Nov 2018 17:54:44 +0100
Subject: [PATCH] wip: panel plugin not found

---
 .../dashboard/dashgrid/DashboardPanel.tsx     | 21 +++++++++++++++++--
 .../dashboard/dashgrid/EditorTabBody.tsx      |  2 +-
 .../dashgrid/PanelPluginNotFound.tsx          | 16 ++++++++++++++
 public/app/types/index.ts                     |  3 ++-
 public/app/types/plugins.ts                   |  4 ++--
 5 files changed, 40 insertions(+), 6 deletions(-)
 create mode 100644 public/app/features/dashboard/dashgrid/PanelPluginNotFound.tsx

diff --git a/public/app/features/dashboard/dashgrid/DashboardPanel.tsx b/public/app/features/dashboard/dashgrid/DashboardPanel.tsx
index e423a96f28a..b7c00699bf7 100644
--- a/public/app/features/dashboard/dashgrid/DashboardPanel.tsx
+++ b/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 { AddPanelPanel } from './AddPanelPanel';
+import { PanelPluginNotFound } from './PanelPluginNotFound';
 import { DashboardRow } from './DashboardRow';
-import { PanelPlugin } from 'app/types/plugins';
 import { PanelChrome } from './PanelChrome';
 import { PanelEditor } from './PanelEditor';
 
 import { PanelModel } from '../panel_model';
 import { DashboardModel } from '../dashboard_model';
+import { PanelPlugin, PanelProps } from 'app/types';
 
 export interface Props {
   panel: PanelModel;
@@ -70,7 +71,7 @@ export class DashboardPanel extends PureComponent<Props, State> {
 
     // handle plugin loading & changing of plugin 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) {
         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() {
     this.loadPlugin();
   }
diff --git a/public/app/features/dashboard/dashgrid/EditorTabBody.tsx b/public/app/features/dashboard/dashgrid/EditorTabBody.tsx
index 530603d1ad0..86ebdf86b67 100644
--- a/public/app/features/dashboard/dashgrid/EditorTabBody.tsx
+++ b/public/app/features/dashboard/dashgrid/EditorTabBody.tsx
@@ -81,7 +81,7 @@ export class EditorTabBody extends PureComponent<Props, State> {
           {toolbarItems.map(item => this.renderButton(item))}
         </div>
         <div className="panel-editor__scroll">
-          <CustomScrollbar>
+          <CustomScrollbar autoHide={false}>
             <div className="panel-editor__content">
               <FadeIn in={openView !== null} duration={200}>
                 {openView && this.renderOpenView(openView)}
diff --git a/public/app/features/dashboard/dashgrid/PanelPluginNotFound.tsx b/public/app/features/dashboard/dashgrid/PanelPluginNotFound.tsx
new file mode 100644
index 00000000000..23c8bd96437
--- /dev/null
+++ b/public/app/features/dashboard/dashgrid/PanelPluginNotFound.tsx
@@ -0,0 +1,16 @@
+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>;
+  }
+}
diff --git a/public/app/types/index.ts b/public/app/types/index.ts
index d6a6e73f06d..49c74a7de28 100644
--- a/public/app/types/index.ts
+++ b/public/app/types/index.ts
@@ -21,7 +21,7 @@ import {
   DataQueryOptions,
 } from './series';
 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 {
   AppNotification,
@@ -69,6 +69,7 @@ export {
   UsersState,
   TimeRange,
   LoadingState,
+  PanelPlugin,
   PanelProps,
   PanelOptionsProps,
   TimeSeries,
diff --git a/public/app/types/plugins.ts b/public/app/types/plugins.ts
index 5dbde61d8d0..fed9f8fa134 100644
--- a/public/app/types/plugins.ts
+++ b/public/app/types/plugins.ts
@@ -12,13 +12,13 @@ export interface PluginExports {
   // Panel plugin
   PanelCtrl?;
   PanelComponent?: ComponentClass<PanelProps>;
-  PanelOptionsComponent: ComponentClass<PanelOptionsProps>;
+  PanelOptionsComponent?: ComponentClass<PanelOptionsProps>;
 }
 
 export interface PanelPlugin {
   id: string;
   name: string;
-  meta: any;
+  meta: PluginMeta;
   hideFromList: boolean;
   module: string;
   baseUrl: string;