Changes in General Settings are now applied instantly.

Author: mbrill-nt

src/options/dummyDataSwitch/DummyDataSwitch.tsx

@@ -57,13 +57,13 @@ export class DummyDataSwitch extends React.PureComponent<Props, State> {
     }
     dataMapping.showDummyData = newValue;
     this.props.onChange.call(this.state.item.path, dataMapping);
-    /*this.setState({
-            value:!this.state.value,
-            dataMapping:this.props.context.options.dataMapping
-        });*/
   };
 
   render() {
+    if(this.props.context.options.dataMapping === undefined){
+      this.props.context.options.dataMapping = this.props.item.defaultValue;
+  }
+
     return (
       <div>
         <Switch

src/options/genericDataSwitch/GenericDataSwitch.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { StandardEditorProps } from '@grafana/data';
+import { Switch } from '@grafana/ui';
+import { IntSwitch } from 'types';
+
+function onChangeOverride(value: IntSwitch, onChange: any, item: any) {
+    value.value = !value.value;
+    onChange.call(item.path, value);
+}
+
+export const GenericDataSwitch: React.FC<StandardEditorProps> = ({item, value, onChange, context}) => {
+    if(context.options[item.path] === undefined){
+        context.options[item.path] = {value: false}
+    }
+
+    return (
+        <div>
+            <Switch
+                value={context.options[item.path].value}
+                css={{}}
+                onChange={() => onChangeOverride(value, onChange, item)}
+            />
+        </div>
+    );
+}

src/options/options.tsx

@@ -4,6 +4,7 @@ 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';
 
 export const optionsBuilder = (builder: PanelOptionsEditorBuilder<PanelSettings>) => {
   return (
@@ -108,39 +109,51 @@ export const optionsBuilder = (builder: PanelOptionsEditorBuilder<PanelSettings>
       })
 
       //General Settings
-      .addBooleanSwitch({
+      .addCustomEditor({
+        id: 'connectionStats',
         path: 'showConnectionStats',
         name: 'Show Connection Statistics',
+        editor: GenericDataSwitch,
         category: ['General Settings'],
+        defaultValue: {value: false}
       })
 
-      .addBooleanSwitch({
+      .addCustomEditor({
+        id: 'sumTimings',
         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 ' +
           'continually increasing sum of response times. When ' +
           'deactivated, it is considered that the timings provided ' +
           'by columns are the actual average response times.',
         category: ['General Settings'],
+        defaultValue: {value: false}
       })
 
-      .addBooleanSwitch({
+      .addCustomEditor({
+        id: 'filterEmptyConnections',
         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 ' +
           'increasing sum of response times. When deactivated, it is considered ' +
           'that the timings provided by columns are the actual average response times.',
         category: ['General Settings'],
+        defaultValue: {value: false}
       })
 
-      .addBooleanSwitch({
+      .addCustomEditor({
+        id: 'showDebugInformation',
         path: 'showDebugInformation',
         name: 'Show Debug Information',
+        editor: GenericDataSwitch,
         category: ['General Settings'],
+        defaultValue: {value: false}
       })
 
       .addCustomEditor({
@@ -149,12 +162,30 @@ export const optionsBuilder = (builder: PanelOptionsEditorBuilder<PanelSettings>
         name: 'Show Dummy Data',
         editor: DummyDataSwitch,
         category: ['General Settings'],
+        defaultValue: {
+          sourceComponentPrefix: 'origin_',
+          targetComponentPrefix: 'target_',
+          responseTimeColumn: 'in_timesum',
+          requestRateColumn: 'in_count',
+          errorRateColumn: 'error_in',
+          responseTimeOutgoingColumn: 'out_timesum',
+          requestRateOutgoingColumn: 'out_count',
+          errorRateOutgoingColumn: 'error_out',
+          extOrigin: '',
+          extTarget: '',
+          type: '',
+          showDummyData: true,
+          baselineRtUpper: 'threshold',
+        }
       })
 
-      .addBooleanSwitch({
+      .addCustomEditor({
+        id: 'showBaselines',
         path: 'showBaselines',
         name: 'Show Baselines',
+        editor: GenericDataSwitch,
         category: ['General Settings'],
+        defaultValue: {value: false}
       })
 
       //Appearance

src/panel/canvas/graph_canvas.ts

@@ -217,7 +217,7 @@ export default class CanvasDrawer {
     // static element rendering
     // cyCanvas.resetTransform(ctx);
     cyCanvas.clear(ctx);
-    if (this.controller.getSettings().showDebugInformation) {
+    if (this.controller.getSettings().showDebugInformation.value) {
       this._drawDebugInformation();
     }
 
@@ -266,7 +266,7 @@ export default class CanvasDrawer {
     }
 
     const { showConnectionStats } = this.controller.getSettings();
-    if (showConnectionStats && cy.zoom() > 1) {
+    if (showConnectionStats.value && cy.zoom() > 1) {
       for (const edge of edges) {
         this._drawEdgeLabel(ctx, edge);
       }
@@ -494,7 +494,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;
+      const showBaselines = this.controller.getSettings().showBaselines.value;
       if (showBaselines && responseTime >= 0 && threshold >= 0) {
         const thresholdViolation = threshold < responseTime;
 
@@ -655,7 +655,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;
+    const showBaselines = this.controller.getSettings().showBaselines.value;
     const metrics: IntGraphMetrics = node.data('metrics');
     const responseTime = _.defaultTo(metrics.response_time, -1);
     const threshold = _.defaultTo(metrics.threshold, -1);

src/panel/serviceDependencyGraph/ServiceDependencyGraph.tsx

@@ -21,6 +21,7 @@ interface PanelState {
   animateButtonClass?: string,
   showStatistics: boolean;
   data: any;
+  settings:any;
 }
 
 cyCanvas(cytoscape);
@@ -214,7 +215,7 @@ export class ServiceDependencyGraph extends PureComponent<PanelState, PanelState
   }
 
   getSettings() {
-    return this.props.controller.state.options;
+    return this.props.settings;
   }
 
   toggleAnimation() {

src/processing/graph_generator.ts

@@ -38,7 +38,7 @@ class GraphGenerator {
       return undefined;
     }
 
-    const sumMetrics = !this.controller.getSettings().sumTimings;
+    const sumMetrics = !this.controller.getSettings().sumTimings.value;
 
     var nodeName = dataElements[0].target;
     if (nodeName === '' || nodeName === undefined || nodeName === null) {
@@ -201,7 +201,7 @@ class GraphGenerator {
     if (!isUndefined(response_time_out)) {
       const { sumTimings } = this.controller.getSettings();
 
-      if (!sumTimings && metrics.rate) {
+      if (!sumTimings.value && metrics.rate) {
         metrics.response_time = response_time_out / metrics.rate;
       } else {
         metrics.response_time = response_time_out;
@@ -224,7 +224,7 @@ class GraphGenerator {
   _filterData(graph: IntGraph): IntGraph {
     const { filterEmptyConnections: filterData } = this.controller.getSettings();
 
-    if (filterData) {
+    if (filterData.value) {
       const filteredGraph: IntGraph = {
         nodes: [],
         edges: [],

src/types.tsx

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