Merge pull request #194 from jdbranham/master

Updates from master

docker-compose.yml

@@ -2,7 +2,7 @@ version: "3.5"
 
 services:
   grafana:
-    image: grafana/grafana:7.1.5
+    image: grafana/grafana:7.4.2
     ports:
     - "3000:3000"
     volumes:

src/DiagramController.tsx

@@ -1,6 +1,7 @@
 import { AbsoluteTimeRange, FieldConfigSource, GrafanaTheme, InterpolateFunction, TimeZone } from '@grafana/data';
 import { CustomScrollbar, LegendItem, stylesFactory } from '@grafana/ui';
 import { defaultMermaidOptions } from 'config/diagramDefaults';
+import DiagramErrorBoundary from 'DiagramErrorBoundary';
 import { DiagramLegend } from 'DiagramLegend';
 import { css } from 'emotion';
 import { merge } from 'lodash';
@@ -125,23 +126,38 @@ export class DiagramPanelController extends React.Component<DiagramPanelControll
     }
   }
 
+  async getRemoteDiagramDefinition(url: string) {
+    const response = await fetch(url);
+    return await response.text();
+  }
+
+  loadDiagramDefinition() {
+    if (this.props.options.contentUrl) {
+      return this.getRemoteDiagramDefinition(this.props.options.contentUrl);
+    } else {
+      return Promise.resolve(this.props.options.content);
+    }
+  }
+
   initializeMermaid() {
     const options = merge({}, defaultMermaidOptions, { theme: this.props.theme.isDark ? 'dark' : 'base' });
     mermaidAPI.initialize(options);
     // parseError = this.handleParseError.bind(this);
     if (this.diagramRef) {
-      try {
-        const diagramId = `diagram-${this.props.id}`;
-        const interpolated = this.props.replaceVariables(this.contentProcessor(this.props.options.content));
-        // if parsing the graph definition fails, the error handler will be called but the renderCallback() may also still be called.
-        this.diagramRef.innerHTML = mermaidAPI.render(diagramId, interpolated, this.renderCallback);
-        updateDiagramStyle(this.diagramRef, this.props.data, this.props.options, diagramId);
-        if (this.bindFunctions) {
-          this.bindFunctions(this.diagramRef);
+      this.loadDiagramDefinition().then(diagramDefinition => {
+        try {
+          const diagramId = `diagram-${this.props.id}`;
+          const interpolated = this.props.replaceVariables(this.contentProcessor(diagramDefinition));
+          // if parsing the graph definition fails, the error handler will be called but the renderCallback() may also still be called.
+          this.diagramRef.innerHTML = mermaidAPI.render(diagramId, interpolated, this.renderCallback);
+          updateDiagramStyle(this.diagramRef, this.props.data, this.props.options, diagramId);
+          if (this.bindFunctions) {
+            this.bindFunctions(this.diagramRef);
+          }
+        } catch (err) {
+          this.diagramRef.innerHTML = `<div><p>Error rendering diagram. Check the diagram definition</p><p>${err}</p></div>`;
         }
-      } catch (err) {
-        this.diagramRef.innerHTML = `<div><p>Error rendering diagram. Check the diagram definition</p><p>${err}</p></div>`;
-      }
+      });
     }
   }
 
@@ -203,15 +219,17 @@ export class DiagramPanelController extends React.Component<DiagramPanelControll
         {this.props.options.legend.show && (
           <div className={this.state.legendContainer}>
             <CustomScrollbar hideHorizontalTrack>
-              <DiagramLegend
-                items={this.getLegendItems()}
-                displayMode={this.props.options.legend.displayMode}
-                placement={this.props.options.legend.placement}
-                sortBy={this.props.options.legend.sortBy}
-                sortDesc={this.props.options.legend.sortDesc}
-                onLabelClick={(item, event) => {}}
-                onToggleSort={this.onToggleSort}
-              />
+              <DiagramErrorBoundary fallback="Error rendering Legend">
+                <DiagramLegend
+                  items={this.getLegendItems()}
+                  displayMode={this.props.options.legend.displayMode}
+                  placement={this.props.options.legend.placement}
+                  sortBy={this.props.options.legend.sortBy}
+                  sortDesc={this.props.options.legend.sortDesc}
+                  onLabelClick={(item, event) => {}}
+                  onToggleSort={this.onToggleSort}
+                />
+              </DiagramErrorBoundary>
             </CustomScrollbar>
           </div>
         )}

src/DiagramErrorBoundary.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+interface DiagramErrorBoundaryProps {
+  children: React.ReactNode;
+  fallback?: React.ReactNode | string;
+}
+
+interface DiagramErrorBoundaryState {
+  hasError: boolean;
+}
+
+class DiagramErrorBoundary extends React.Component<DiagramErrorBoundaryProps, DiagramErrorBoundaryState> {
+  constructor(props: any) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: any) {
+    // Update state so the next render will show the fallback UI.
+    return { hasError: true };
+  }
+
+  render() {
+    if (this.state.hasError) {
+      // Render fallback
+      const Fallback = this.props.fallback ? this.props.fallback : 'Error rendering component';
+      return <div>{Fallback}</div>;
+    }
+
+    return this.props.children;
+  }
+}
+
+export default DiagramErrorBoundary;

src/config/types.ts

@@ -63,6 +63,7 @@ export interface DiagramOptions {
   moddedSeriesVal: number;
   valueName: ValueType;
   content: string;
+  contentUrl?: string;
   mode: DiagramPanelMode;
   mermaidServiceUrl: string;
   useBasicAuth: boolean;

src/module.ts

@@ -182,6 +182,11 @@ const createPanelPlugin = () => {
           name: 'Use shape background for metric indicator',
           defaultValue: defaults.useBackground,
         })
+        .addTextInput({
+          name: 'Diagram URL',
+          path: 'contentUrl',
+          description: `Get the diagram definition from a URL`,
+        })
         .addTextInput({
           name: 'Diagram definition',
           path: 'content',