ing

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

@@ -26,7 +26,7 @@
         <line class="link" [attr.x1]="link.source.x" [attr.y1]="link.source.y" [attr.x2]="link.target.x" [attr.y2]="link.target.y"></line>
       </g>
       <g *ngFor="let node of nodes">
-        <g [attr.transform]="'translate(' + node.x + ',' + node.y + ')'">
+        <g [attr.transform]="'translate(' + node.x + ',' + node.y + ')'" (click)="onTargetClick(node)">
           <circle class="node" cx="0" cy="0" r="33" fill="url(#icon_db_mria)"></circle>
           <text class="textClass" y="2.5em" text-anchor="middle">{{node.id}}</text>
         </g>

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

@@ -91,6 +91,15 @@ export class HomePageComponent implements OnInit, OnDestroy {
     this.showIntro = false;
     this.changeDetector.detectChanges();
 
+    const svg = d3.select(this.discoveryTargetRef.nativeElement);
+
+    const _zoom = d3.zoom().on('zoom', () => {
+      const transform = d3.event.transform;
+      svg.select('g').attr('transform', 'translate(' + transform.x + ',' + transform.y + ') scale(' + transform.k + ')');
+    });
+    svg.call(_zoom);
+
+
     const width = this.discoveryTargetRef.nativeElement.clientWidth;
     const height = this.discoveryTargetRef.nativeElement.clientHeight;
 
@@ -106,7 +115,7 @@ export class HomePageComponent implements OnInit, OnDestroy {
       ;
 
     this.nodes.push(
-      { id: '192.168.1.0/24', fx: width / 2, fy: height / 2 },
+      { id: '192.168.1.0/24', group: 'zone', target: this.zone, fx: width / 2, fy: height / 2 },
       // { id: '192.168.1.1' },
       // { id: '192.168.1.2' },
     );
@@ -118,64 +127,31 @@ export class HomePageComponent implements OnInit, OnDestroy {
 
     this.simulationRestart();
 
-    const zone: Zone = {
+    // const zone: Zone = {
-      network: '192.168.1.0/24',
+    //   network: '192.168.1.0/24',
-      iface: 'enp3s0',
+    //   iface: 'enp3s0',
-      metaIPType: toMetaIPType(MetaIPTypeEnum.V4),
+    //   metaIPType: toMetaIPType(MetaIPTypeEnum.V4),
-      address: '192.168.1.101',
+    //   address: '192.168.1.101',
-      mac: '44:8a:5b:f1:f1:f3',
+    //   mac: '44:8a:5b:f1:f1:f3',
-    };
+    // };
 
-    const discoverHost: DiscoverHost = {
+    // const discoverHost: DiscoverHost = {
-      metaIPType: toMetaIPType(MetaIPTypeEnum.V4),
+    //   metaIPType: toMetaIPType(MetaIPTypeEnum.V4),
-      firstScanRange: '192.168.1.1',
+    //   firstScanRange: '192.168.1.1',
-      lastScanRange: '192.168.1.254',
+    //   lastScanRange: '192.168.1.254',
-      discoveryConfig: {
+    //   discoveryConfig: {
-      },
-      discoverPort: {
-        firstScanRange: 1,
-        lastScanRange: 65535,
-        includeTCP: true,
-        includeUDP: true,
-        discoverService: {
-        }
-      }
-    };
-
-    this.probeService.send('DiscoveryService.DiscoverHost', requesterID, zone, discoverHost);
-
-    // this.nodeSet = new vis.DataSet([
-    //   {
-    //     id: '192.168.1.0/24', label: 'Zone', group: 'zone',
-    //     shape: 'image',
-    //     image: '../../assets/Windows_logo.png',
     //   },
-    // ]);
+    //   discoverPort: {
-
+    //     firstScanRange: 1,
-    // this.edgeSet = new vis.DataSet([]);
+    //     lastScanRange: 65535,
-
+    //     includeTCP: true,
-    // const options = {
+    //     includeUDP: true,
-    //   width: '100%',
+    //     discoverService: {
-    //   height: '100%',
+    //     }
-    //   groups: {
-    //     zone: { color: { background: 'red' }, borderWidth: 5 },
-    //     host: { color: { background: 'blue' }, borderWidth: 3 },
-    //     service: { color: { background: 'white' }, borderWidth: 1 },
     //   }
     // };
 
-    // this.visNetwork = new vis.Network(this.discoveryTargetRef.nativeElement, { nodes: this.nodeSet, edges: this.edgeSet }, options);
+    this.probeService.send('DiscoveryService.DiscoverHost', requesterID, this.zone, this.discoverHost);
-    // this.visNetwork.on('click', (params) => {
-    //   const ids = params.nodes;
-    //   const clickedNode = this.nodeSet.get(ids);
-    //   if (clickedNode.length > 0) {
-    //     this.displaySidebar = true;
-    //     this.selectedNode = clickedNode[0];
-    //   } else {
-    //     this.displaySidebar = false;
-    //     this.selectedNode = null;
-    //   }
-    // });
 
     // this.probeService.send(
     //   'DiscoveryService.DiscoverHost',
@@ -195,6 +171,11 @@ export class HomePageComponent implements OnInit, OnDestroy {
       ;
   }
 
+  onTargetClick(node: Node) {
+    this.displaySidebar = true;
+    this.selectedNode = node;
+  }
+
   /**
    * DiscoverHost
    */
@@ -255,7 +236,7 @@ export class HomePageComponent implements OnInit, OnDestroy {
     console.log('DiscoveredHost', host);
     const hostId = `${host.address}`;
     const zoneNode = this.getNode('192.168.1.0/24');
-    const hostNode = new Node(hostId);
+    const hostNode = new Node(hostId, 'host', host);
     hostNode.x = zoneNode.x;
     hostNode.y = zoneNode.y;
 
@@ -282,7 +263,7 @@ export class HomePageComponent implements OnInit, OnDestroy {
     const serviceId = `${service.port.host.address}-${service.port.portNumber}-${service.key}`;
 
     const hostNode = this.getNode(hostId);
-    const serviceNode = new Node(serviceId);
+    const serviceNode = new Node(serviceId, 'service', service);
     serviceNode.x = hostNode.x;
     serviceNode.y = hostNode.y;
 

src/commons/model/node.ts

@@ -34,8 +34,16 @@ export class Node implements d3.SimulationNodeDatum {
 
   id: string;
 
-  constructor(id) {
+  group: string;
+
+  target: any;
+
+  image?: string;
+
+  constructor(id, group, target) {
     this.id = id;
+    this.group = group;
+    this.target = target;
     this.r = 50;
   }
 

src/commons/service/probe.service.ts

@@ -74,7 +74,7 @@ export class ProbeService extends Client {
             const args = this.converNotificationParams(params, subscriberMethod.parameterTypes);
             subscriberMethod.method.invoke(subscriberMethod.instance, ...args);
           } catch (error) {
-            console.error(error);
+            console.log(error);
           }
         });
       });