test

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 + ')'">
@@ -38,7 +42,7 @@
             <image [attr.x]="-node.r" [attr.y]="-node.r" [attr.width]="node.r * 2" [attr.height]="node.r * 2"
               attr.xlink:href="../../assets/image/icon/icon_{{node.target.hostType | lowercase}}.svg"></image>
           </g>
-          <g *ngIf="node.group === 'host' && node.target.hostType === 'HOST'">
+          <g *ngIf="node.group === 'host' && node.target.hostType === 'HOST' && node.target.osType !== 'UNKNOWN'">
             <image [attr.x]="-node.r" [attr.y]="-node.r" [attr.width]="node.r * 2" [attr.height]="node.r * 2"
               attr.xlink:href="../../assets/image/logo/logo_{{node.target.osType | lowercase}}.svg"></image>
           </g>
@@ -52,7 +56,7 @@
             <image [attr.x]="-node.r" [attr.y]="-node.r" [attr.width]="node.r * 2" [attr.height]="node.r * 2"
               attr.xlink:href="../../assets/image/icon/icon_{{node.target.serviceType | lowercase}}.svg"></image>
           </g>
-          <g *ngIf="node.group === 'service'">
+          <g *ngIf="node.group === 'service' && node.target.key !== 'UNKNOWN'">
             <image [attr.x]="-node.r" [attr.y]="-node.r" [attr.width]="node.r * 2" [attr.height]="node.r * 2"
               attr.xlink:href="../../assets/image/logo/logo_{{node.target.key | lowercase}}.svg"></image>
           </g>
@@ -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)" (ping)="displayPing($event)"></app-node-detail>
   </div>
 </p-sidebar>
 
+<p-growl [(value)]="resultMsg" [sticky]="true"></p-growl>
 
 <p-dialog header="Ping" [(visible)]="pingDisplay" [modal]="true" [responsive]="true" [width]="350" [minWidth]="200"
   [minY]="70" [maximizable]="true" [baseZIndex]="10000">

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: .3;
+  font-size: 9px;
+}
+
 .focused {
   opacity: 1 !important;
 }

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

@@ -14,7 +14,12 @@ import { Node } from '../../../commons/model/node';
 import { Link } from '../../../commons/model/link';
 
 import { RPCError } from '@overflow/rpc-js';
+<<<<<<< HEAD
 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';
+>>>>>>> 42243565d710c6f755deb99207bfaa337ffbbc78
 import { DiscoveryModeType } from '@overflow/model/discovery/discovery';
 import { PingResult } from '@overflow/model/ping';
 
@@ -238,7 +243,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 +542,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 +775,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 +787,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 +804,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 +821,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 +835,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 +852,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 +869,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 +888,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 +906,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';

src/commons/component/nic-dropdown.component.html

@@ -18,7 +18,7 @@
       </svg>
     </button>
   </p-header>
-  <div id="nic-list-border">
+  <div>
     <p-listbox [options]="nics" [(ngModel)]="selected" [style]="{'width':'100%'}" (ngModelChange)="nicSelected($event)"></p-listbox>
   </div>
   <!-- <div>Body Content</div>

src/commons/component/nic-dropdown.component.scss

@@ -1,15 +1,18 @@
-#nic-list-border div.ui-widget-content {
+/deep/ .ui-widget-content {
-  border: 0px !important;
+  border: 0px;
 }
-#nic-list-border div.ui-listbox-list {
+/deep/ .ui-listbox-list {
   line-height: 2em;
 }
-#nic-list-border div.ui-listbox-item {
+/deep/ .ui-listbox-item {
   padding: 1em;
   .title{
-
+    font-weight: bold;
   }
   .description {
     font-size: 0.8em;
   }
+}
+/deep/ .ui-corner-all {
+    border-radius: 0px;
 }