Extendend options for mapping of external service icons

Author: mariusoe

src/assets/default.png

@@ -38,3 +38,9 @@
 .vizceral .vizceral-notice .subtitle {
   font-weight: 900;
 }
+
+.zoom-button-container {
+  position: absolute;
+  top: 0;
+  right: 1rem;
+}

src/assets/http.png

@@ -1,4 +1,5 @@
 import _ from 'lodash';
+import {has, find} from 'lodash';
 
 class GraphGenerator {
 
@@ -26,7 +27,8 @@ class GraphGenerator {
 			connections: connections,
 			layoutOptions: {
 				noRankPromotion: true,
-				pullUpLeaves: true
+				pullUpLeaves: true,
+				adjustWidthToRanks: true
 			}
 		};
 
@@ -69,7 +71,7 @@ class GraphGenerator {
 					.map(n => n.data.res_time_sum)
 					.sum(), -1);
 
-				if (responseTime >= 0) {
+				if (this.panelCtrl.panel.sdgSettings.sumTimings && responseTime >= 0) {
 					responseTime = responseTime / (requestCount + errorCount);
 				}
 
@@ -256,17 +258,22 @@ class GraphGenerator {
 	}
 
 	getTypeSymbol(type) {
-		if (type.toLowerCase() === 'database') {
-			return this.getAssetUrl('database.png');
-		}
-		else if (type.toLowerCase() === 'jms') {
-			return this.getAssetUrl('message.png');
-		}
-		else if (type.toLowerCase() === 'web') {
-			return this.getAssetUrl('web.png');
-		}
-		else {
-			return '';
+		const mapping = find(this.panelCtrl.panel.sdgSettings.externalIcons, e => e.type.toLowerCase() === type.toLowerCase());
+
+		// debugger;
+
+		// const typeLC = type.toLowerCase();
+		// const iconMap = {
+		// 	'database': 'database.png',
+		// 	'jms': 'message.png',
+		// 	'web': 'web.png',
+		// 	'http': 'http.png'
+		// };
+
+		if (mapping !== undefined) {
+			return this.getAssetUrl(mapping.icon + '.png');
+		} else {
+			return this.getAssetUrl('default.png');
 		}
 	}
 

src/css/novatec-service-dependency-graph-panel.css

@@ -16,12 +16,28 @@ export class OptionsCtrl {
 		this.getColumnNames = this.getColumnNames.bind(this);
 		this.getPrefixCandidates = this.getPrefixCandidates.bind(this);
 		this.getColumnNamesExternal = this.getColumnNamesExternal.bind(this);
+		this.addExternalMapping = this.addExternalMapping.bind(this);
+		this.removeExternalMapping = this.removeExternalMapping.bind(this);
+	}
+
+	addExternalMapping() {
+		this.panel.sdgSettings.externalIcons.push({type: 'my-type', icon: 'default'});
+		this.panelCtrl.render();
+	}
+
+	removeExternalMapping(index) {
+		this.panel.sdgSettings.externalIcons.splice(index, 1);
+		this.panelCtrl.render();
 	}
 
 	getLayoutOptions() {
 		return ['ltrTree', 'ring', 'ringCenter', 'cytoscape'];
 	}
 
+	getExternalIconOptions() {
+		return ['default', 'message', 'database', 'http', 'web'];
+	}
+
 	getColumnNames() {
 		if (this.panelCtrl.currentData) {
 			return _.sortBy(this.panelCtrl.currentData.columns);

src/graph/GraphGenerator.js

@@ -1,5 +1,10 @@
 <div class="clock-panel" ng-style="{height: ctrl.height}">
 
+    <div class="zoom-button-container">
+        <button class="btn navbar-button" ng-click="ctrl.zoom(+1)"><i class="fa fa-plus"></i></button>
+        <button class="btn navbar-button" ng-click="ctrl.zoom(-1)"><i class="fa fa-minus"></i></button>
+    </div>
+
     <div class="vizceral" id="nt-sdg-container" ng-show="ctrl.dataAvailable()" style="width: 100%; height: 100%"></div>
 
     <div class="noData" ng-show="!ctrl.dataAvailable()">No data to show - the query returned no data.</div>

src/options_ctrl.ts

@@ -83,6 +83,12 @@ <h5 class="section-heading">SDG Settings</h5>
                     <option ng-repeat="variable in editor.getLayoutOptions()" value="{{variable}}">{{variable}}</option>
                 </select>
             </div>
+
+            <div class="gf-form-inline">
+                
+                <label class="gf-form-label width-16">Handle Timings as Sums<info-popover mode="right-normal">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.</info-popover></label>
+                <gf-form-switch class="gf-form" checked="ctrl.panel.sdgSettings.sumTimings" on-change="ctrl.forceRender()"></gf-form-switch>
+            </div>
         </div>
 
         <div class="section gf-form-group">
@@ -100,5 +106,30 @@ <h5 class="section-heading">SDG Style</h5>
                 </span>
             </div>
         </div>
+
+        <div class="section gf-form-group">
+            <h5 class="section-heading">External Service Icon Mapping</h5>
+
+            <div class="gf-form-inline">
+                <div class="gf-form">
+                    <label class="gf-form-label width-10">Target Type</label>
+                    <label class="gf-form-label width-10">Icon</label>
+                </div>
+            </div>
+
+            <div class="gf-form-inline" ng-repeat="(index, mapping) in ctrl.panel.sdgSettings.externalIcons">
+                <div class="gf-form">
+                    <input type="text" class="input-small gf-form-input width-10" ng-model="ctrl.panel.sdgSettings.externalIcons[index].type" ng-change="ctrl.forceRender()" ng-model-onblur />
+                
+                    <select class="input-small gf-form-input width-10" ng-model="ctrl.panel.sdgSettings.externalIcons[index].icon" ng-change="ctrl.forceRender()">
+                        <option ng-repeat="variable in editor.getExternalIconOptions()" value="{{variable}}">{{variable}}</option>
+                    </select>
+
+                    <a class="gf-form-label tight-form-func" ng-click="editor.removeExternalMapping(index)"><i class="fa fa-trash"></i></a>
+                </div>
+            </div>
+
+            <button class="btn navbar-button navbar-button--primary" ng-click="editor.addExternalMapping()">Add External Service Icon Mapping</button>
+        </div>
     </div>
 </div>

src/partials/module.html

@@ -29,8 +29,27 @@ export class ServiceDependencyGraphCtrl extends MetricsPanelCtrl {
 			dangerColor: 'rgb(184, 36, 36)'
 		},
 		sdgSettings: {
+			sumTimings: false,
 			showConnectionStats: true,
-			layout: 'ltrTree'
+			layout: 'ltrTree',
+			externalIcons: [
+				{
+					type:'web',
+					icon: 'web'
+				},
+				{
+					type:'jms',
+					icon: 'message'
+				},
+				{
+					type:'database',
+					icon: 'database'
+				},
+				{
+					type:'http',
+					icon: 'http'
+				}
+			]
 		}
 	};
 
@@ -40,7 +59,7 @@ export class ServiceDependencyGraphCtrl extends MetricsPanelCtrl {
 
 	currentGraphNodes: Array<string> = [];
 
-	currentLayout: string;
+	zoomLevel: number;
 
 	/** @ngInject */
 	constructor($scope, $injector) {
@@ -56,6 +75,17 @@ export class ServiceDependencyGraphCtrl extends MetricsPanelCtrl {
 		this.events.on('data-snapshot-load', this.onDataReceived.bind(this));
 	}
 
+	zoom(zoom) {
+		const zoomStep = 0.1 * zoom;
+		const nextZoomLevel = Math.min(Math.max(this.zoomLevel + zoomStep, 0.1), 2);
+
+		if (this.vizceral) {
+			console.log("Current:", this.zoomLevel, "New:", nextZoomLevel);
+			this.zoomLevel = nextZoomLevel;
+			this.vizceral.setZoom(this.zoomLevel);
+		}
+	}
+
 	dataAvailable() {
 		return this.currentData != null && _.has(this.currentData, 'data') && this.currentData.data.length > 0;
 	}
@@ -112,6 +142,9 @@ export class ServiceDependencyGraphCtrl extends MetricsPanelCtrl {
 
 			if (vizContainer != null) {
 
+				// init variables for vizceral
+				this.zoomLevel = 1;
+
 				var viz = new Vizceral(vizContainer);
 				viz.setOptions({
 					allowDraggingOfNodes: true,
@@ -212,13 +245,7 @@ export class ServiceDependencyGraphCtrl extends MetricsPanelCtrl {
 			this.currentData = [];
 		}
 
-		var layout = this.getTemplateVariable('layout');
-		if (this.currentLayout === layout) {
-			this.render();
-		} else {
-			this.currentLayout = layout;
-			this.forceRender();
-		}
+		this.render();
 	}
 
 	getTemplateVariable(name) {