completed work on panel not found view

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

@@ -5,14 +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 { getPanelPluginNotFound } from './PanelPluginNotFound';
 import { DashboardRow } from './DashboardRow';
 import { PanelChrome } from './PanelChrome';
 import { PanelEditor } from './PanelEditor';
 
 import { PanelModel } from '../panel_model';
 import { DashboardModel } from '../dashboard_model';
-import { PanelPlugin, PanelProps } from 'app/types';
+import { PanelPlugin } from 'app/types';
 
 export interface Props {
   panel: PanelModel;
@@ -71,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] || this.getPanelPluginNotFound(panel.type);
+      const plugin = config.panels[panel.type] || getPanelPluginNotFound(panel.type);
 
       if (plugin.exports) {
         this.cleanUpAngularPanel();
@@ -88,22 +88,6 @@ 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();
   }

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

@@ -1,16 +1,71 @@
 import _ from 'lodash';
 import React, { PureComponent } from 'react';
+import { PanelPlugin, PanelProps } from 'app/types';
 
 interface Props {
   pluginId: string;
 }
 
-export class PanelPluginNotFound extends PureComponent<Props> {
+class PanelPluginNotFound extends PureComponent<Props> {
   constructor(props) {
     super(props);
   }
 
   render() {
-    return <h2>Panel plugin with id {this.props.id} could not be found</h2>;
+    const style = {
+      display: 'flex',
+      'align-items': 'center',
+      'text-align': 'center',
+      height: '100%',
+    };
+
+    return (
+      <div style={style}>
+        <div className="alert alert-error" style={{ margin: '0 auto' }}>
+          Panel plugin with id {this.props.pluginId} could not be found
+        </div>
+      </div>
+    );
   }
 }
+
+export function getPanelPluginNotFound(id: string): PanelPlugin {
+  const NotFound = class NotFound extends PureComponent<PanelProps> {
+    render() {
+      return <PanelPluginNotFound pluginId={id} />;
+    }
+  };
+
+  const info = {
+    author: {
+      name: '',
+    },
+    description: '',
+    links: [],
+    logos: {
+      large: '',
+      small: '',
+    },
+    screenshots: [],
+    updated: '',
+    version: '',
+  };
+
+  return {
+    id: id,
+    name: id,
+    sort: 100,
+    module: '',
+    baseUrl: '',
+    meta: {
+      id: id,
+      name: id,
+      info: info,
+      includes: [],
+    },
+    info: info,
+    exports: {
+      PanelComponent: NotFound,
+    },
+  };
+}

public/app/features/dashboard/specs/AddPanelPanel.test.tsx

@@ -3,6 +3,7 @@ import { AddPanelPanel } from './../dashgrid/AddPanelPanel';
 import { PanelModel } from '../panel_model';
 import { shallow } from 'enzyme';
 import config from '../../../core/config';
+import { getPanelPlugin } from 'app/features/plugins/__mocks__/pluginMocks';
 
 jest.mock('app/core/store', () => ({
   get: key => {
@@ -18,76 +19,11 @@ describe('AddPanelPanel', () => {
 
   beforeEach(() => {
     config.panels = [
-      {
+      getPanelPlugin({ id: 'singlestat', sort: 2 }),
-        id: 'singlestat',
+      getPanelPlugin({ id: 'hiddem', sort: 100, hideFromList: true }),
-        hideFromList: false,
+      getPanelPlugin({ id: 'graph', sort: 1 }),
-        name: 'Singlestat',
+      getPanelPlugin({ id: 'alexander_zabbix', sort: 100 }),
-        sort: 2,
+      getPanelPlugin({ id: 'piechart', sort: 100 }),
-        module: '',
-        baseUrl: '',
-        meta: {},
-        info: {
-          logos: {
-            small: '',
-          },
-        },
-      },
-      {
-        id: 'hidden',
-        hideFromList: true,
-        name: 'Hidden',
-        sort: 100,
-        meta: {},
-        module: '',
-        baseUrl: '',
-        info: {
-          logos: {
-            small: '',
-          },
-        },
-      },
-      {
-        id: 'graph',
-        hideFromList: false,
-        name: 'Graph',
-        sort: 1,
-        meta: {},
-        module: '',
-        baseUrl: '',
-        info: {
-          logos: {
-            small: '',
-          },
-        },
-      },
-      {
-        id: 'alexander_zabbix',
-        hideFromList: false,
-        name: 'Zabbix',
-        sort: 100,
-        meta: {},
-        module: '',
-        baseUrl: '',
-        info: {
-          logos: {
-            small: '',
-          },
-        },
-      },
-      {
-        id: 'piechart',
-        hideFromList: false,
-        name: 'Piechart',
-        sort: 100,
-        meta: {},
-        module: '',
-        baseUrl: '',
-        info: {
-          logos: {
-            small: '',
-          },
-        },
-      },
     ];
 
     dashboardMock = { toggleRow: jest.fn() };

public/app/features/datasources/state/navModel.ts

@@ -78,7 +78,7 @@ export function getDataSourceLoadingNav(pageName: string): NavModel {
           large: '',
           small: '',
         },
-        screenshots: '',
+        screenshots: [],
         updated: '',
         version: '',
       },

public/app/features/plugins/__mocks__/pluginMocks.ts

@@ -1,4 +1,4 @@
-import { Plugin } from 'app/types';
+import { Plugin, PanelPlugin } from 'app/types';
 
 export const getMockPlugins = (amount: number): Plugin[] => {
   const plugins = [];
@@ -17,7 +17,7 @@ export const getMockPlugins = (amount: number): Plugin[] => {
         description: 'pretty decent plugin',
         links: ['one link'],
         logos: { small: 'small/logo', large: 'large/logo' },
-        screenshots: `screenshot/${i}`,
+        screenshots: [{ path: `screenshot/${i}` }],
         updated: '2018-09-26',
         version: '1',
       },
@@ -33,6 +33,39 @@ export const getMockPlugins = (amount: number): Plugin[] => {
   return plugins;
 };
 
+export const getPanelPlugin = (options: { id: string; sort?: number; hideFromList?: boolean }): PanelPlugin => {
+  const info = {
+    author: {
+      name: options.id + 'name',
+    },
+    description: '',
+    links: [],
+    logos: {
+      large: '',
+      small: '',
+    },
+    screenshots: [],
+    updated: '',
+    version: '',
+  };
+
+  return {
+    id: options.id,
+    name: options.id,
+    sort: options.sort || 1,
+    meta: {
+      id: options.id,
+      name: options.id,
+      info: info,
+      includes: [],
+    },
+    info: info,
+    hideFromList: options.hideFromList,
+    module: '',
+    baseUrl: '',
+  };
+};
+
 export const getMockPlugin = () => {
   return {
     defaultNavUrl: 'some/url',
@@ -47,7 +80,7 @@ export const getMockPlugin = () => {
       description: 'pretty decent plugin',
       links: ['one link'],
       logos: { small: 'small/logo', large: 'large/logo' },
-      screenshots: 'screenshot/1',
+      screenshots: [{ path: `screenshot` }],
       updated: '2018-09-26',
       version: '1',
     },

public/app/types/plugins.ts

@@ -19,7 +19,7 @@ export interface PanelPlugin {
   id: string;
   name: string;
   meta: PluginMeta;
-  hideFromList: boolean;
+  hideFromList?: boolean;
   module: string;
   baseUrl: string;
   info: any;
@@ -49,7 +49,7 @@ export interface PluginInclude {
 export interface PluginMetaInfo {
   author: {
     name: string;
-    url: string;
+    url?: string;
   };
   description: string;
   links: string[];
@@ -57,7 +57,7 @@ export interface PluginMetaInfo {
     large: string;
     small: string;
   };
-  screenshots: string;
+  screenshots: any[];
   updated: string;
   version: string;
 }