Adding statistics for the selected node element in the sidebar (#12)

Author: fylip97

src/canvas/particle_engine.ts

@@ -11,7 +11,7 @@ export default class ParticleEngine {
     minSpawnPropability: number = 0.01;
 
     spawnInterval: number | null;
-
+    
     constructor(canvasDrawer: CanvasDrawer) {
         this.drawer = canvasDrawer;
     }

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

@@ -43,7 +43,7 @@
   padding-left: 0.5%;
 }
 
-.header--selection{
+.header--selection {
   font-size: 1.25em;
   text-align: center;
   border-bottom: 2px solid #161719;
@@ -59,8 +59,7 @@
 }
 
 .no-data--selection{
-  font-size: 1.2em;
-  display: block;
+  color: #888888;
   text-align: center;
 }
 
@@ -87,6 +86,10 @@
   width: 5.5rem;
 }
 
+.table--th--selectionMedium {
+  width: 8rem;
+}
+
 .table--selection--head {
   background-color: #28282a;
   border-top: 2px solid #161719;

src/partials/module.html

@@ -12,17 +12,41 @@
                 <button class="btn navbar-button" ng-click="ctrl.zoom(-1)"><i class="fa fa-minus"></i></button>
             </div>
         </div>
-
-
         <div ng-class="{statistics: true, 'show': ctrl.showStatistics}">
+
             <div class="header--selection">{{ctrl.selectionId}}
                 <a target="_blank" ng-href="{{ctrl.resolvedDrillDownLink}}"
                     ng-show="ctrl.resolvedDrillDownLink && ctrl.resolvedDrillDownLink.length > 0 && ctrl.currentType === 'INTERNAL'">
                     <i class="fa fa-paper-plane-o"></i>
                 </a>
             </div>
-            <div class="secondHeader--selection">Receiving</div>
-            <div class="no-data--selection" ng-show="ctrl.receiving.length == 0">No receiving Data</div>
+            
+            <div class="secondHeader--selection">Statistics</div>
+            <table class="table--selection">
+                <tr class="table--selection--head">
+                    <th>Name</th>
+                    <th class="table--th--selectionMedium">Value</th>
+                </tr>
+                <tr ng-show="ctrl.selectionStatistics.requests">
+                    <td class="table--td--selection">Request</td>
+                    <td class="table--td--selection">{{ctrl.selectionStatistics.requests}}</td>
+                </tr>
+                <tr ng-show="ctrl.selectionStatistics.errors">
+                    <td class="table--td--selection">Errors</td>
+                    <td class="table--td--selection">{{ctrl.selectionStatistics.errors}}</td>
+                </tr>
+                <tr ng-show="ctrl.selectionStatistics.requests && ctrl.selectionStatistics.errors">
+                    <td class="table--td--selection">Error Rate</td>
+                    <td class="table--td--selection">{{ (100 / ctrl.selectionStatistics.requests * ctrl.selectionStatistics.errors) | number:1 }}%</td>
+                </tr>
+                <tr ng-show="ctrl.selectionStatistics.responseTime">
+                    <td class="table--td--selection">Avg. Response Time</td>
+                    <td class="table--td--selection">{{ctrl.selectionStatistics.responseTime}}ms</td>
+                </tr>
+            </table>
+
+            <div class="secondHeader--selection">Incoming Statistics</div>
+            <div class="no-data--selection" ng-show="ctrl.receiving.length == 0">No incoming statistics available.</div>
             <table class="table--selection" ng-show="ctrl.receiving.length > 0">
                 <tr class="table--selection--head">
                     <th>Name</th>
@@ -38,8 +62,8 @@
                 </tr>
             </table>
 
-            <div class="secondHeader--selection">Sending</div>
-            <div class="no-data--selection" ng-show="ctrl.sending.length == 0">No sending Data</div>
+            <div class="secondHeader--selection">Outgoing Statistics</div>
+            <div class="no-data--selection" ng-show="ctrl.sending.length == 0">No outgoing statistics available.</div>
             <table class="table--selection" ng-show="ctrl.sending.length>0">
                 <tr class="table--selection--head">
                     <th>Name</th>

src/service_dependency_graph_ctrl.ts

@@ -12,7 +12,7 @@ import cola from 'cytoscape-cola';
 import cyCanvas from 'cytoscape-canvas';
 
 import layoutOptions from './layout_options';
-import { DataMapping, IGraph, IGraphNode, IGraphEdge, CyData, PanelSettings, CurrentData, QueryResponse, TableContent, IGraphMetrics } from './types';
+import { DataMapping, IGraph, IGraphNode, IGraphEdge, CyData, PanelSettings, CurrentData, QueryResponse, TableContent, IGraphMetrics, ISelectionStatistics } from './types';
 
 import dummyGraph from './dummy_graph';
 
@@ -101,6 +101,8 @@ export class ServiceDependencyGraphCtrl extends MetricsPanelCtrl {
 
 	currentType: string;
 
+	selectionStatistics: ISelectionStatistics;
+
 	/** @ngInject */
 	constructor($scope, $injector) {
 		super($scope, $injector);
@@ -312,12 +314,24 @@ export class ServiceDependencyGraphCtrl extends MetricsPanelCtrl {
 			const currentNode: NodeSingular = selection[0];
 			this.selectionId = currentNode.id();
 			this.currentType = currentNode.data('type');
-			console.log(this.currentType);
-			console.log(currentNode.data('type'));
 			const receiving: TableContent[] = [];
 			const sending: TableContent[] = [];
 			const edges: EdgeCollection = selection.connectedEdges();
 
+			const metrics = selection.nodes()[0].data('metrics');
+
+			this.selectionStatistics = {};
+
+			if (metrics.rate != undefined) {
+				this.selectionStatistics.requests = Math.floor(metrics.rate);
+			}
+			if (metrics.error_rate != undefined) {
+				this.selectionStatistics.errors = Math.floor(metrics.error_rate);
+			}
+			if (metrics.response_time != undefined) {
+				this.selectionStatistics.responseTime = Math.floor(metrics.response_time);
+			}
+
 			for (let i = 0; i < edges.length; i++) {
 
 				const actualEdge: EdgeSingular = edges[i];
@@ -362,17 +376,15 @@ export class ServiceDependencyGraphCtrl extends MetricsPanelCtrl {
 
 			this.generateDrillDownLink();
 		}
-
 	}
 
 	onMount() {
-		console.log("mount");
+		// console.log("mount");
 		this.render();
 	}
 
 	onRender(payload) {
-		console.log("render");
-
+		// console.log("render");
 
 		if (!this.cy) {
 			this._initCytoscape();

src/types.ts

@@ -139,6 +139,12 @@ export interface CyCanvas {
 export interface TableContent {
     name: string;
     responseTime: string;
-    rate:  string;
-    error:  string;
-}
+    rate: string;
+    error: string;
+};
+
+export interface ISelectionStatistics {
+    requests?: number;
+    errors?: number;
+    responseTime?: number;
+};