ing

src/app/pages/home/home-page.component.html

@@ -18,8 +18,12 @@
   <svg #discoveryTarget width="100%" height="100%">
     <g>
       <g *ngFor="let link of links">
-        <line class="link" [attr.sourceId]="link.source.id" [attr.targetId]="link.target.id" [attr.x1]="link.source.x"
+        <g class="link-container" [ngClass]="'link-'+link.target.group" [attr.sourceId]="link.source.id"
-          [attr.y1]="link.source.y" [attr.x2]="link.target.x" [attr.y2]="link.target.y"></line>
+          [attr.targetId]="link.target.id">
+          <line class="link" [attr.x1]="link.source.x" [attr.y1]="link.source.y" [attr.x2]="link.target.x" [attr.y2]="link.target.y"></line>
+          <text *ngIf="link.target.group === 'service'" class="linkTextClass" [attr.x]="(link.source.x - link.target.x) / 2 + link.target.x"
+            [attr.y]="(link.source.y - link.target.y) / 2 + link.target.y">{{link.target.target.port.portNumber}}</text>
+        </g>
       </g>
       <g *ngFor="let node of nodes">
         <g class="node-container" [ngClass]="node.group" [attr.nodeId]="node.id" [attr.transform]="'translate(' + node.x + ',' + node.y + ')'">
@@ -63,21 +67,18 @@
       </g>
     </g>
   </svg>
+  <p-card class="ui-map-info">
+    Content
+  </p-card>
 </div>
 
-<p-card class="ui-map-info" *ngIf="resultMsg">
-  <b>Total Hosts: </b> {{resultMsg[0]}}<br />
-  <b>Total Services:</b> {{resultMsg[1]}}<br />
-  <b>Time Spent: </b>{{resultMsg[2]}}
-</p-card>
-
-
 <p-sidebar [(visible)]="displaySidebar" styleClass="ui-sidebar-md" position="right" (onHide)="onHideDetail()">
   <div *ngIf="selectedNode !== null">
     <app-node-detail [node]="selectedNode" (otherHostSelect)="otherHostSelected($event)"></app-node-detail>
   </div>
 </p-sidebar>
 
+<p-growl [(value)]="resultMsg" [sticky]="true"></p-growl>
 
 <!-- <div class="ui-fluid">
     <div class="ui-g">

src/app/pages/home/home-page.component.scss

@@ -67,6 +67,14 @@
   font-size: 14px;
 }
 
+.linkTextClass {
+  stroke: #b6b4b4;
+  font-family: "Lucida Grande", "Droid Sans", Arial, Helvetica, sans-serif;
+  font-weight: normal;
+  stroke-width: .4;
+  font-size: 12px;
+}
+
 .focused {
   opacity: 1 !important;
 }

src/app/pages/home/home-page.component.ts

@@ -14,7 +14,7 @@ import { Node } from '../../../commons/model/node';
 import { Link } from '../../../commons/model/link';
 
 import { RPCError } from '@overflow/rpc-js';
-import { toMetaIPType, MetaIPTypeEnum, toMetaCryptoType, MetaCryptoTypeEnum } from '@overflow/model/meta';
+import { toMetaIPType, MetaIPTypeEnum, toMetaCryptoType, MetaCryptoTypeEnum, toMetaPortType, MetaPortTypeEnum } from '@overflow/model/meta';
 import { Message } from 'primeng/primeng';
 import { DiscoveryModeType } from '@overflow/model/discovery/discovery';
 
@@ -238,7 +238,7 @@ export class HomePageComponent implements OnInit, OnDestroy {
       const __this = this;
 
       const nodeElements = d3.select(this.discoveryTargetRef.nativeElement).selectAll('.node-container');
-      const linkElements = d3.select(this.discoveryTargetRef.nativeElement).selectAll('.link');
+      const linkElements = d3.select(this.discoveryTargetRef.nativeElement).selectAll('.link-container');
 
       function getNodeFromElement(element: Element): Node | null {
         const container = d3.select(element);
@@ -537,7 +537,7 @@ export class HomePageComponent implements OnInit, OnDestroy {
     const __this = this;
 
     const nodeElements = d3.select(this.discoveryTargetRef.nativeElement).selectAll('.node-container');
-    const linkElements = d3.select(this.discoveryTargetRef.nativeElement).selectAll('.link');
+    const linkElements = d3.select(this.discoveryTargetRef.nativeElement).selectAll('.link-container');
 
     __this.selectedNode = null;
 
@@ -770,9 +770,8 @@ export class HomePageComponent implements OnInit, OnDestroy {
   }
 
   private setTestData() {
-    const hostNode = new Node('192.168.1.1');
+
-    hostNode.group = 'host';
+    const host1: Host = {
-    hostNode.target = {
       metaIPType: toMetaIPType(MetaIPTypeEnum.V4),
       name: 'Host1',
       address: '192.168.1.1',
@@ -783,11 +782,13 @@ export class HomePageComponent implements OnInit, OnDestroy {
       hostModel: 'UNKNOWN',
       zone: this.zone,
     };
+
+    const hostNode = new Node('192.168.1.1');
+    hostNode.group = 'host';
+    hostNode.target = host1;
     hostNode.r = 40;
 
-    const hostNode2 = new Node('192.168.1.2');
+    const host2: Host = {
-    hostNode2.group = 'host';
-    hostNode2.target = {
       metaIPType: toMetaIPType(MetaIPTypeEnum.V4),
       name: 'Host2',
       address: '192.168.1.2',
@@ -798,11 +799,13 @@ export class HomePageComponent implements OnInit, OnDestroy {
       hostModel: 'UNKNOWN',
       zone: this.zone,
     };
+
+    const hostNode2 = new Node('192.168.1.2');
+    hostNode2.group = 'host';
+    hostNode2.target = host2;
     hostNode2.r = 40;
 
-    const hostNode3 = new Node('192.168.1.3');
+    const host3: Host = {
-    hostNode3.group = 'host';
-    hostNode3.target = {
       metaIPType: toMetaIPType(MetaIPTypeEnum.V4),
       name: 'Host2',
       address: '192.168.1.3',
@@ -813,6 +816,10 @@ export class HomePageComponent implements OnInit, OnDestroy {
       hostModel: 'UNKNOWN',
       zone: this.zone,
     };
+
+    const hostNode3 = new Node('192.168.1.3');
+    hostNode3.group = 'host';
+    hostNode3.target = host3;
     hostNode3.r = 40;
 
     const serviceNode1 = new Node('192.168.1.1-10-HTTP');
@@ -823,7 +830,11 @@ export class HomePageComponent implements OnInit, OnDestroy {
       serviceType: 'WEB',
       serviceVendor: 'Apache',
       serviceVersion: 'UNKNOWN',
-
+      port: {
+        host: host1,
+        portNumber: 10,
+        metaPortType: toMetaPortType(MetaPortTypeEnum.TCP),
+      },
     };
     serviceNode1.group = 'service';
     serviceNode1.r = 30;
@@ -836,7 +847,11 @@ export class HomePageComponent implements OnInit, OnDestroy {
       serviceType: 'WEB',
       serviceVendor: 'Apache',
       serviceVersion: 'UNKNOWN',
-
+      port: {
+        host: host1,
+        portNumber: 20,
+        metaPortType: toMetaPortType(MetaPortTypeEnum.TCP),
+      },
     };
     serviceNode2.group = 'service';
     serviceNode2.r = 30;
@@ -849,6 +864,11 @@ export class HomePageComponent implements OnInit, OnDestroy {
       serviceType: 'WEB',
       serviceVendor: 'Apache',
       serviceVersion: 'UNKNOWN',
+      port: {
+        host: host1,
+        portNumber: 30,
+        metaPortType: toMetaPortType(MetaPortTypeEnum.TCP),
+      },
 
     };
     serviceNode3.group = 'service';
@@ -863,6 +883,11 @@ export class HomePageComponent implements OnInit, OnDestroy {
       serviceType: 'WEB',
       serviceVendor: 'Apache',
       serviceVersion: 'UNKNOWN',
+      port: {
+        host: host3,
+        portNumber: 10,
+        metaPortType: toMetaPortType(MetaPortTypeEnum.TCP),
+      },
 
     };
     serviceNode31.group = 'service';
@@ -876,6 +901,11 @@ export class HomePageComponent implements OnInit, OnDestroy {
       serviceType: 'WEB',
       serviceVendor: 'Apache',
       serviceVersion: 'UNKNOWN',
+      port: {
+        host: host3,
+        portNumber: 20,
+        metaPortType: toMetaPortType(MetaPortTypeEnum.TCP),
+      },
 
     };
     serviceNode32.group = 'service';