Template Variables are now resolved

Author: mbrill-nt

src/module.ts

@@ -1,9 +1,7 @@
 import { PanelPlugin } from '@grafana/data';
 import { PanelSettings } from './types';
 
-import { ServiceDependencyGraphPanelController } from './panel/ServiceDependencyGraphPanelController';
+import { PanelController } from './panel/PanelController';
 import { optionsBuilder } from './options/options';
 
-export const plugin = new PanelPlugin<PanelSettings>(ServiceDependencyGraphPanelController).setPanelOptions(
-  optionsBuilder
-);
+export const plugin = new PanelPlugin<PanelSettings>(PanelController).setPanelOptions(optionsBuilder);

src/options/options.tsx

@@ -1,7 +1,7 @@
 import { PanelOptionsEditorBuilder } from '@grafana/data';
 import { PanelSettings } from '../types';
 import { TypeaheadTextField } from './TypeAheadTextfield/TypeaheadTextfield';
-import { IconMapping } from './iconMapping/iconMapping';
+import { IconMapping } from './iconMapping/IconMapping';
 import { DummyDataSwitch } from './dummyDataSwitch/DummyDataSwitch';
 import { DefaultSettings } from './DefaultSettings';
 
@@ -14,7 +14,7 @@ export const optionsBuilder = (builder: PanelOptionsEditorBuilder<PanelSettings>
         path: 'dataMapping.aggregationType',
         id: 'aggregationType',
         editor: TypeaheadTextField,
-        name: 'Aggregation Type',
+        name: 'Component Column',
         category: ['Connection Mapping'],
         defaultValue: DefaultSettings.dataMapping.aggregationType,
       })

…erviceDependencyGraphPanelController.tsx src/panel/PanelController.tsxsrc/panel/ServiceDependencyGraphPanelController.tsx renamed to src/panel/PanelController.tsx src/panel/ServiceDependencyGraphPanelController.tsx renamed to src/panel/PanelController.tsx

@@ -16,6 +16,7 @@ import '../css/novatec-service-dependency-graph-panel.css';
 import GraphGenerator from 'processing/graph_generator';
 import PreProcessor from 'processing/pre_processor';
 import data from '../dummy_data_frame';
+import { getTemplateSrv } from '@grafana/runtime';
 
 interface Props extends PanelProps<PanelSettings> {}
 
@@ -36,7 +37,7 @@ interface PanelState {
   options: PanelSettings;
 }
 
-export class ServiceDependencyGraphPanelController extends PureComponent<Props, PanelState> {
+export class PanelController extends PureComponent<Props, PanelState> {
   cy: cytoscape.Core | undefined;
 
   ref: LegacyRef<HTMLDivElement>;
@@ -57,10 +58,45 @@ export class ServiceDependencyGraphPanelController extends PureComponent<Props,
     this.preProcessor = new PreProcessor(this);
   }
 
-  getSettings(): PanelSettings {
+  getSettings(resolveVariables: boolean): PanelSettings {
+    if (resolveVariables) {
+      return this.resolveVariables(this.props.options);
+    }
     return this.props.options;
   }
 
+  resolveVariables(element: any) {
+    if (element instanceof Object) {
+      const newObject: any = {};
+      for (const key of Object.keys(element)) {
+        newObject[key] = this.resolveVariables(element[key]);
+      }
+      return newObject;
+    }
+
+    if (element instanceof String || typeof element === 'string') {
+      return getTemplateSrv().replace(element.toString());
+    }
+    return element;
+  }
+
+  resolveTemplateVars(input: any, copy: boolean) {
+    var value = input;
+    if (copy) {
+      value = _.cloneDeep(value);
+    }
+
+    if (typeof value === 'string' || value instanceof String) {
+      value = getTemplateSrv().replace(value.toString());
+    }
+    if (value instanceof Object) {
+      for (const key of Object.keys(value)) {
+        value[key] = this.resolveTemplateVars(value[key], false);
+      }
+    }
+    return value;
+  }
+
   componentDidUpdate() {
     this.processData();
   }
@@ -86,7 +122,7 @@ export class ServiceDependencyGraphPanelController extends PureComponent<Props,
 
   processData() {
     var inputData: DataFrame[] = this.props.data.series;
-    if (this.getSettings().dataMapping.showDummyData) {
+    if (this.getSettings(true).dataMapping.showDummyData) {
       inputData = data;
     }
     this.processQueryData(inputData);
@@ -186,7 +222,8 @@ export class ServiceDependencyGraphPanelController extends PureComponent<Props,
           </div>
         </div>
       );
+    } else {
+      return <div>{error}</div>;
     }
-    return <div>{error}</div>;
   }
 }

src/panel/canvas/graph_canvas.ts

@@ -124,7 +124,7 @@ export default class CanvasDrawer {
 
   _getImageAsset(assetName: string, resolveName = true) {
     if (!_.has(this.imageAssets, assetName)) {
-      const assetUrl = assetUtils.getTypeSymbol(assetName, this.controller.getSettings().icons, resolveName);
+      const assetUrl = assetUtils.getTypeSymbol(assetName, this.controller.getSettings(true).icons, resolveName);
       this._loadImage(assetUrl, assetName);
     }
 
@@ -182,7 +182,7 @@ export default class CanvasDrawer {
       return false;
     }
 
-    if (!this.controller.getSettings().animate && elapsedTime < 1000) {
+    if (!this.controller.getSettings(true).animate && elapsedTime < 1000) {
       return true;
     }
     return false;
@@ -227,7 +227,7 @@ export default class CanvasDrawer {
     // static element rendering
     // cyCanvas.resetTransform(ctx);
     cyCanvas.clear(ctx);
-    if (this.controller.getSettings().showDebugInformation) {
+    if (this.controller.getSettings(true).showDebugInformation) {
       this._drawDebugInformation();
     }
 
@@ -275,7 +275,7 @@ export default class CanvasDrawer {
       this._drawEdgeParticles(ctx, edge, sourcePoint, targetPoint, now);
     }
 
-    const { showConnectionStats } = this.controller.getSettings();
+    const { showConnectionStats } = this.controller.getSettings(true);
     if (showConnectionStats && cy.zoom() > 1) {
       for (const edge of edges) {
         this._drawEdgeLabel(ctx, edge);
@@ -322,7 +322,7 @@ export default class CanvasDrawer {
   }
 
   _drawEdgeLabel(ctx: CanvasRenderingContext2D, edge: cytoscape.EdgeSingular) {
-    const { timeFormat } = this.controller.getSettings();
+    const { timeFormat } = this.controller.getSettings(true);
 
     const midpoint = edge.midpoint();
     const xMid = midpoint.x;
@@ -413,7 +413,7 @@ export default class CanvasDrawer {
       index--;
     }
 
-    const dangerColor = this.controller.getSettings().style.dangerColor;
+    const dangerColor = this.controller.getSettings(true).style.dangerColor;
     ctx.fillStyle = dangerColor;
     ctx.fill();
   }
@@ -508,7 +508,7 @@ export default class CanvasDrawer {
       this._drawDonut(ctx, node, 15, 5, 0.5, [errorPct, unknownPct, healthyPct]);
 
       // drawing the baseline status
-      const { showBaselines } = this.controller.getSettings();
+      const { showBaselines } = this.controller.getSettings(true);
       if (showBaselines && responseTime >= 0 && threshold >= 0) {
         const thresholdViolation = threshold < responseTime;
 
@@ -527,7 +527,7 @@ export default class CanvasDrawer {
 
   _drawServiceIcon(ctx: CanvasRenderingContext2D, node: cytoscape.NodeSingular) {
     const nodeId: string = node.id();
-    const iconMappings = this.controller.getSettings().icons;
+    const iconMappings = this.controller.getSettings(true).icons;
 
     const mapping = _.find(iconMappings, ({ pattern }) => {
       try {
@@ -550,7 +550,7 @@ export default class CanvasDrawer {
   }
 
   _drawNodeStatistics(ctx: CanvasRenderingContext2D, node: cytoscape.NodeSingular) {
-    const { timeFormat } = this.controller.getSettings();
+    const { timeFormat } = this.controller.getSettings(true);
     const lines: string[] = [];
 
     const metrics: IntGraphMetrics = node.data('metrics');
@@ -614,7 +614,7 @@ export default class CanvasDrawer {
     ctx.closePath();
 
     ctx.setLineDash([10, 2]);
-    if (violation && this.controller.getSettings().animate) {
+    if (violation && this.controller.getSettings(true).animate) {
       ctx.lineDashOffset = this.dashAnimationOffset;
     } else {
       ctx.lineDashOffset = 0;
@@ -673,7 +673,7 @@ export default class CanvasDrawer {
     const xPos = pos.x - labelWidth / 2;
     const yPos = pos.y + node.height() * 0.8;
 
-    const { showBaselines } = this.controller.getSettings();
+    const { showBaselines } = this.controller.getSettings(true);
     const metrics: IntGraphMetrics = node.data('metrics');
     const responseTime = _.defaultTo(metrics.response_time, -1);
     const threshold = _.defaultTo(metrics.threshold, -1);
@@ -719,7 +719,7 @@ export default class CanvasDrawer {
     ctx.fillStyle = 'white';
     ctx.fill();
 
-    const { healthyColor, dangerColor, noDataColor } = this.controller.getSettings().style;
+    const { healthyColor, dangerColor, noDataColor } = this.controller.getSettings(true).style;
     const colors = [dangerColor, noDataColor, healthyColor];
     for (let i = 0; i < percentages.length; i++) {
       let arc = this._drawArc(ctx, currentArc, cX, cY, radius, percentages[i], colors[i]);

src/panel/canvas/particle_engine.ts

@@ -9,7 +9,7 @@ export default class ParticleEngine {
 
   minSpawnPropability = 0.004;
 
-  spawnInterval: any;
+  spawnInterval: NodeJS.Timeout;
 
   animating: boolean;
 

src/panel/serviceDependencyGraph/ServiceDependencyGraph.tsx

@@ -2,7 +2,7 @@ import CanvasDrawer from 'panel/canvas/graph_canvas';
 import cytoscape, { EdgeCollection, EdgeSingular, ElementDefinition, NodeSingular } from 'cytoscape';
 import React from 'react';
 import { PureComponent } from 'react';
-import { ServiceDependencyGraphPanelController } from '../ServiceDependencyGraphPanelController';
+import { PanelController } from '../PanelController';
 import cyCanvas from 'cytoscape-canvas';
 import cola from 'cytoscape-cola';
 import layoutOptions from '../layout_options';
@@ -23,7 +23,7 @@ import './ServiceDependencyGraph.css';
 interface PanelState {
   zoom: number | undefined;
   animate: boolean | undefined;
-  controller: ServiceDependencyGraphPanelController;
+  controller: PanelController;
   cy?: cytoscape.Core | undefined;
   graphCanvas?: CanvasDrawer | undefined;
   animateButtonClass?: string;
@@ -223,8 +223,8 @@ export class ServiceDependencyGraph extends PureComponent<PanelState, PanelState
     }
   }
 
-  getSettings() {
-    return this.props.settings;
+  getSettings(resolveVariables: boolean): PanelSettings {
+    return this.state.controller.getSettings(resolveVariables);
   }
 
   toggleAnimation() {
@@ -371,7 +371,7 @@ export class ServiceDependencyGraph extends PureComponent<PanelState, PanelState
   }
 
   generateDrillDownLink() {
-    const { drillDownLink } = this.getSettings();
+    const { drillDownLink } = this.getSettings(false);
     if (drillDownLink !== undefined) {
       const link = drillDownLink.replace('{}', this.selectionId);
       this.resolvedDrillDownLink = this.templateSrv.replace(link);

src/panel/statistics/NodeStatistics.tsx

@@ -32,8 +32,9 @@ function getStatisticsTable(noDataText: string, nodeList: TableContent[]) {
         })}
       />
     );
+  } else {
+    return <div className="no-data--selection">{noDataText}</div>;
   }
-  return <div className="no-data--selection">{noDataText}</div>;
 }
 
 export const NodeStatistics: React.FC<NodeStatisticsProps> = ({ nodeList, noDataText, title }) => {

src/processing/graph_generator.ts

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import { isPresent } from './utils/Utils';
-import { ServiceDependencyGraphPanelController } from '../panel/ServiceDependencyGraphPanelController';
+import { PanelController } from '../panel/PanelController';
 import {
   GraphDataElement,
   IntGraph,
@@ -12,9 +12,9 @@ import {
 } from '../types';
 
 class GraphGenerator {
-  controller: ServiceDependencyGraphPanelController;
+  controller: PanelController;
 
-  constructor(controller: ServiceDependencyGraphPanelController) {
+  constructor(controller: PanelController) {
     this.controller = controller;
   }
 
@@ -23,7 +23,7 @@ class GraphGenerator {
       return undefined;
     }
 
-    const sumMetrics = !this.controller.getSettings().sumTimings;
+    const sumMetrics = !this.controller.getSettings(true).sumTimings;
 
     var nodeName = dataElements[0].target;
     if (nodeName === '' || nodeName === undefined || nodeName === null) {
@@ -186,7 +186,7 @@ class GraphGenerator {
       metrics.error_rate = error_rate_out;
     }
     if (!_.isUndefined(response_time_out)) {
-      const { sumTimings } = this.controller.getSettings();
+      const { sumTimings } = this.controller.getSettings(true);
 
       if (!sumTimings && metrics.rate) {
         metrics.response_time = response_time_out / metrics.rate;
@@ -209,7 +209,7 @@ class GraphGenerator {
   }
 
   _filterData(graph: IntGraph): IntGraph {
-    const { filterEmptyConnections: filterData } = this.controller.getSettings();
+    const { filterEmptyConnections: filterData } = this.controller.getSettings(true);
 
     if (filterData) {
       const filteredGraph: IntGraph = {

src/processing/pre_processor.ts

@@ -1,12 +1,12 @@
 import { DataFrame } from '@grafana/data';
 import _ from 'lodash';
-import { ServiceDependencyGraphPanelController } from '../panel/ServiceDependencyGraphPanelController';
+import { PanelController } from '../panel/PanelController';
 import { GraphDataElement, GraphDataType, CurrentData } from '../types';
 
 class PreProcessor {
-  controller: ServiceDependencyGraphPanelController;
+  controller: PanelController;
 
-  constructor(controller: ServiceDependencyGraphPanelController) {
+  constructor(controller: PanelController) {
     this.controller = controller;
   }
 
@@ -17,7 +17,7 @@ class PreProcessor {
       targetColumn,
       extOrigin: externalSource,
       extTarget: externalTarget,
-    } = this.controller.getSettings().dataMapping;
+    } = this.controller.getSettings(true).dataMapping;
 
     const result = _.map(data, dataObject => {
       var source = _.has(dataObject, sourceColumn) && dataObject[sourceColumn] !== '';
@@ -158,7 +158,7 @@ class PreProcessor {
       requestRateColumn,
       requestRateOutgoingColumn,
       baselineRtUpper,
-    } = this.controller.getSettings().dataMapping;
+    } = this.controller.getSettings(true).dataMapping;
 
     for (const inputData of inputDataSets) {
       const { fields } = inputData;

src/processing/utils/Utils.ts

@@ -8,6 +8,6 @@ export function isPresent<T>(t: T | undefined | null | void): t is T {
 
 export default {
   getConfig: function(graph: ServiceDependencyGraph, configName: keyof DataMapping) {
-    return graph.getSettings().dataMapping[configName];
+    return graph.getSettings(true).dataMapping[configName];
   },
 };