Graph now updates on settings change with grafana setting modules

Author: mbrill-nt

src/options/DefaultSettings.tsx

@@ -23,11 +23,11 @@ export const DefaultSettings: PanelSettings = {
     showDummyData: false,
   },
 
-  sumTimings: { value: true },
-  filterEmptyConnections: { value: true },
-  showDebugInformation: { value: false },
-  showConnectionStats: { value: true },
-  showBaselines: { value: false },
+  sumTimings:  true,
+  filterEmptyConnections: true,
+  showDebugInformation: false,
+  showConnectionStats: true,
+  showBaselines: false,
 
   style: {
     healthyColor: 'rgb(87, 148, 242)',

src/options/genericDataSwitch/GenericDataSwitch.tsx

@@ -4,7 +4,6 @@ import { TypeaheadTextField } from './TypeAheadTextfield/TypeaheadTextfield';
 import { ServiceIconMapping } from './serviceIconMapping/ServiceIconMapping';
 import { ExternalIconMapping } from './externalIconMapping/ExternalIconMapping';
 import { DummyDataSwitch } from './dummyDataSwitch/DummyDataSwitch';
-import { GenericDataSwitch } from './genericDataSwitch/GenericDataSwitch';
 import { DefaultSettings } from './DefaultSettings';
 
 export const optionsBuilder = (builder: PanelOptionsEditorBuilder<PanelSettings>) => {
@@ -122,20 +121,16 @@ export const optionsBuilder = (builder: PanelOptionsEditorBuilder<PanelSettings>
       })
 
       //General Settings
-      .addCustomEditor({
-        id: 'connectionStats',
+      .addBooleanSwitch({
         path: 'showConnectionStats',
         name: 'Show Connection Statistics',
-        editor: GenericDataSwitch,
         category: ['General Settings'],
         defaultValue: DefaultSettings.showConnectionStats,
       })
 
-      .addCustomEditor({
-        id: 'sumTimings',
+      .addBooleanSwitch({
         path: 'sumTimings',
         name: 'Handle Timings as Sums',
-        editor: GenericDataSwitch,
         description:
           'If this setting is active, the timings provided' +
           'by the mapped response time columns are considered as a ' +
@@ -146,11 +141,9 @@ export const optionsBuilder = (builder: PanelOptionsEditorBuilder<PanelSettings>
         defaultValue: DefaultSettings.sumTimings,
       })
 
-      .addCustomEditor({
-        id: 'filterEmptyConnections',
+      .addBooleanSwitch({
         path: 'filterEmptyConnections',
         name: 'Filter Empty Data',
-        editor: GenericDataSwitch,
         description:
           'If this setting is active, the timings provided by ' +
           'the mapped response time columns are considered as a continually ' +
@@ -160,11 +153,9 @@ export const optionsBuilder = (builder: PanelOptionsEditorBuilder<PanelSettings>
         defaultValue: DefaultSettings.filterEmptyConnections,
       })
 
-      .addCustomEditor({
-        id: 'showDebugInformation',
+      .addBooleanSwitch({
         path: 'showDebugInformation',
         name: 'Show Debug Information',
-        editor: GenericDataSwitch,
         category: ['General Settings'],
         defaultValue: DefaultSettings.showDebugInformation,
       })
@@ -178,11 +169,9 @@ export const optionsBuilder = (builder: PanelOptionsEditorBuilder<PanelSettings>
         defaultValue: DefaultSettings.dataMapping,
       })
 
-      .addCustomEditor({
-        id: 'showBaselines',
+      .addBooleanSwitch({
         path: 'showBaselines',
         name: 'Show Baselines',
-        editor: GenericDataSwitch,
         category: ['General Settings'],
         defaultValue: DefaultSettings.showBaselines,
       })

src/options/options.tsx

@@ -53,7 +53,7 @@ export class ServiceDependencyGraphPanelController extends PureComponent<Props,
   }
 
   getSettings(): PanelSettings {
-    return this.state.options;
+    return this.props.options;
   }
 
   componentDidUpdate() {
@@ -186,7 +186,7 @@ export class ServiceDependencyGraphPanelController extends PureComponent<Props,
   }
 
   render() {
-    this.processData();
+    const data = this.processData();
     const error = this.getError();
     var panel = <div>{error}</div>;
     if (error === null) {
@@ -199,7 +199,7 @@ export class ServiceDependencyGraphPanelController extends PureComponent<Props,
             id="cy"
           >
             <ServiceDependencyGraph
-              data={this.processData()}
+              data={data}
               zoom={1}
               controller={this}
               animate={false}

src/panel/ServiceDependencyGraphPanelController.tsx

@@ -229,7 +229,7 @@ export default class CanvasDrawer {
     // static element rendering
     // cyCanvas.resetTransform(ctx);
     cyCanvas.clear(ctx);
-    if (this.controller.getSettings().showDebugInformation.value) {
+    if (this.controller.getSettings().showDebugInformation) {
       this._drawDebugInformation();
     }
 
@@ -278,7 +278,7 @@ export default class CanvasDrawer {
     }
 
     const { showConnectionStats } = this.controller.getSettings();
-    if (showConnectionStats.value && cy.zoom() > 1) {
+    if (showConnectionStats && cy.zoom() > 1) {
       for (const edge of edges) {
         this._drawEdgeLabel(ctx, edge);
       }
@@ -510,7 +510,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().showBaselines.value;
+      const {showBaselines} = this.controller.getSettings();
       if (showBaselines && responseTime >= 0 && threshold >= 0) {
         const thresholdViolation = threshold < responseTime;
 
@@ -573,11 +573,7 @@ export default class CanvasDrawer {
     if (responseTime >= 0) {
       const decimals = responseTime >= 1000 ? 1 : 0;
 
-      var labelText = 'Avg. Resp. Time: ';
-      if (this.controller.getSettings().sumTimings.value) {
-        labelText = 'Total Resp. Time: ';
-      }
-      lines.push(labelText + humanFormat(responseTime, { scale: timeScale, decimals }));
+      lines.push('Avg. Resp. Time: ' + humanFormat(responseTime, { scale: timeScale, decimals }));
     }
 
     const pos = node.position();
@@ -679,7 +675,7 @@ export default class CanvasDrawer {
     const xPos = pos.x - labelWidth / 2;
     const yPos = pos.y + node.height() * 0.8;
 
-    const showBaselines = this.controller.getSettings().showBaselines.value;
+    const {showBaselines} = this.controller.getSettings();
     const metrics: IntGraphMetrics = node.data('metrics');
     const responseTime = _.defaultTo(metrics.response_time, -1);
     const threshold = _.defaultTo(metrics.threshold, -1);

src/panel/canvas/graph_canvas.ts

@@ -140,6 +140,7 @@ export class ServiceDependencyGraph extends PureComponent<PanelState, PanelState
         this.runLayout(true);
       }
     }
+    this.state.graphCanvas.repaint(true);
   }
 
   _transformNodes(nodes: IntGraphNode[]): ElementDefinition[] {

src/panel/serviceDependencyGraph/ServiceDependencyGraph.tsx

@@ -38,7 +38,7 @@ class GraphGenerator {
       return undefined;
     }
 
-    const sumMetrics = !this.controller.getSettings().sumTimings.value;
+    const sumMetrics = !this.controller.getSettings().sumTimings;
 
     var nodeName = dataElements[0].target;
     if (nodeName === '' || nodeName === undefined || nodeName === null) {
@@ -62,6 +62,7 @@ class GraphGenerator {
     };
 
     const aggregationFunction = sumMetrics ? sum : mean;
+    
     if (internalNode) {
       metrics.rate = sum(map(dataElements, element => element.data.rate_in));
       metrics.error_rate = sum(map(dataElements, element => element.data.error_rate_in));
@@ -201,7 +202,7 @@ class GraphGenerator {
     if (!isUndefined(response_time_out)) {
       const { sumTimings } = this.controller.getSettings();
 
-      if (!sumTimings.value && metrics.rate) {
+      if (!sumTimings && metrics.rate) {
         metrics.response_time = response_time_out / metrics.rate;
       } else {
         metrics.response_time = response_time_out;
@@ -224,7 +225,7 @@ class GraphGenerator {
   _filterData(graph: IntGraph): IntGraph {
     const { filterEmptyConnections: filterData } = this.controller.getSettings();
 
-    if (filterData.value) {
+    if (filterData) {
       const filteredGraph: IntGraph = {
         nodes: [],
         edges: [],

src/processing/graph_generator.ts

@@ -1,15 +1,15 @@
 export interface PanelSettings {
   animate: boolean;
-  sumTimings: IntSwitch;
-  filterEmptyConnections: IntSwitch;
+  sumTimings: boolean;
+  filterEmptyConnections: boolean;
   style: PanelStyleSettings;
-  showDebugInformation: IntSwitch;
-  showConnectionStats: IntSwitch;
+  showDebugInformation: boolean;
+  showConnectionStats: boolean;
   externalIcons: ExternalIconResource[];
   serviceIcons: IconResource[];
   dataMapping: DataMapping;
   drillDownLink: string;
-  showBaselines: IntSwitch;
+  showBaselines: boolean;
   timeFormat: string;
 }
 
@@ -188,7 +188,3 @@ export interface IntTableHeader {
   sortFunc?: any;
   ignoreLiteral?: string;
 }
-
-export interface IntSwitch {
-  value: boolean;
-}