Plugins: show a clear error on the plugin page when it failed to load (#18733)

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

@@ -124,6 +124,9 @@ export class GrafanaPlugin<T extends PluginMeta = PluginMeta> {
   // Meta is filled in by the plugin loading system
   // Meta is filled in by the plugin loading system
   meta?: T;
   meta?: T;
 
 
+  // This is set if the plugin system had errors loading the plugin
+  loadError?: boolean;
+
   // Config control (app/datasource)
   // Config control (app/datasource)
   angularConfigCtrl?: any;
   angularConfigCtrl?: any;
 
 

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

@@ -36,7 +36,7 @@ class PanelPluginError extends PureComponent<Props> {
 }
 }
 
 
 export function getPanelPluginLoadError(meta: PanelPluginMeta, err: any): PanelPlugin {
 export function getPanelPluginLoadError(meta: PanelPluginMeta, err: any): PanelPlugin {
-  const NotFound = class NotFound extends PureComponent<PanelProps> {
+  const LoadError = class LoadError extends PureComponent<PanelProps> {
     render() {
     render() {
       const text = (
       const text = (
         <>
         <>
@@ -47,8 +47,9 @@ export function getPanelPluginLoadError(meta: PanelPluginMeta, err: any): PanelP
       return <PanelPluginError title={`Error loading: ${meta.id}`} text={text} />;
       return <PanelPluginError title={`Error loading: ${meta.id}`} text={text} />;
     }
     }
   };
   };
-  const plugin = new PanelPlugin(NotFound);
+  const plugin = new PanelPlugin(LoadError);
   plugin.meta = meta;
   plugin.meta = meta;
+  plugin.loadError = true;
   return plugin;
   return plugin;
 }
 }
 
 

public/app/features/plugins/PluginPage.tsx

@@ -6,7 +6,7 @@ import find from 'lodash/find';
 
 
 // Types
 // Types
 import { UrlQueryMap } from '@grafana/runtime';
 import { UrlQueryMap } from '@grafana/runtime';
-import { StoreState } from 'app/types';
+import { StoreState, AppNotificationSeverity } from 'app/types';
 import {
 import {
   PluginType,
   PluginType,
   GrafanaPlugin,
   GrafanaPlugin,
@@ -30,6 +30,7 @@ import { PluginDashboards } from './PluginDashboards';
 import { appEvents } from 'app/core/core';
 import { appEvents } from 'app/core/core';
 import { config } from 'app/core/config';
 import { config } from 'app/core/config';
 import { ContextSrv } from '../../core/services/context_srv';
 import { ContextSrv } from '../../core/services/context_srv';
+import { AlertBox } from 'app/core/components/AlertBox/AlertBox';
 
 
 export function getLoadingNav(): NavModel {
 export function getLoadingNav(): NavModel {
   const node = {
   const node = {
@@ -140,7 +141,7 @@ class PluginPage extends PureComponent<Props, State> {
     const { plugin, nav } = this.state;
     const { plugin, nav } = this.state;
 
 
     if (!plugin) {
     if (!plugin) {
-      return <div>Plugin not found.</div>;
+      return <AlertBox severity={AppNotificationSeverity.Error} title="Plugin Not Found" />;
     }
     }
 
 
     const active = nav.main.children.find(tab => tab.active);
     const active = nav.main.children.find(tab => tab.active);
@@ -297,7 +298,21 @@ class PluginPage extends PureComponent<Props, State> {
         <Page.Contents isLoading={loading}>
         <Page.Contents isLoading={loading}>
           {!loading && (
           {!loading && (
             <div className="sidebar-container">
             <div className="sidebar-container">
-              <div className="sidebar-content">{this.renderBody()}</div>
+              <div className="sidebar-content">
+                {plugin.loadError && (
+                  <AlertBox
+                    severity={AppNotificationSeverity.Error}
+                    title="Error Loading Plugin"
+                    body={
+                      <>
+                        Check the server startup logs for more information. <br />
+                        If this plugin was loaded from git, make sure it was compiled.
+                      </>
+                    }
+                  />
+                )}
+                {this.renderBody()}
+              </div>
               <aside className="page-sidebar">
               <aside className="page-sidebar">
                 {plugin && (
                 {plugin && (
                   <section className="page-sidebar-section">
                   <section className="page-sidebar-section">