ing

package.json

@@ -100,6 +100,7 @@
     "primer-support": "^4.0.0",
     "protractor": "~5.3.0",
     "rimraf": "^2.6.2",
+    "save-svg-as-png": "^1.4.6",
     "source-map-support": "^0.5.8",
     "ts-node": "~5.0.1",
     "tslint": "~5.9.1",

src/commons/component/detail/host-detail.component.ts

@@ -6,7 +6,7 @@ import { map, catchError, take } from 'rxjs/operators';
 import { Host } from '@overflow/model/discovery';
 import { PingResult } from '@overflow/model/ping';
 
-import { ProbeService } from '../service/probe.service';
+import { ProbeService } from '../../service/probe.service';
 import { AutoHeightDirective } from '@overflow/commons/ui/directive/auto-height.directive';
 
 

src/commons/component/detail/index.ts

@@ -0,0 +1,4 @@
+export * from './host-detail.component';
+export * from './node-detail.component';
+export * from './service-detail.component';
+export * from './zone-detail.component';

src/commons/component/detail/service-detail.component.ts

@@ -1,7 +1,7 @@
 import { Component, Input, OnChanges, SimpleChanges, ViewChildren, QueryList } from '@angular/core';
 import { Service } from '@overflow/model/discovery';
 import { PingResult } from '@overflow/model/ping';
-import { ProbeService } from '../service/probe.service';
+import { ProbeService } from '../../service/probe.service';
 import { map, catchError, take } from 'rxjs/operators';
 import { of } from 'rxjs';
 import { AutoHeightDirective } from '@overflow/commons/ui/directive/auto-height.directive';

src/commons/component/discovery/discovery-map.component.html

@@ -0,0 +1,65 @@
+<div>
+  <svg #discoveryTarget width="100%" height="100%">
+    <g>
+      <g *ngFor="let link of links">
+        <g class="link-container" [ngClass]="'link-'+link.target.group" [attr.sourceId]="link.source.id"
+          [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 + ')'">
+          <g *ngIf="node.group === 'zone'">
+            <image [attr.x]="-node.r" [attr.y]="-node.r" [attr.width]="node.r * 2" [attr.height]="node.r * 2"
+              xlink:href="assets/image/node/icon/icon_overflow.svg"></image>
+          </g>
+          <g *ngIf="node.group === 'zone'">
+            <text class="textClass" [attr.y]="(node.r - 10) / 10 + 'em'" text-anchor="middle">{{node.target.network}}</text>
+          </g>
+          <g *ngIf="node.group !== 'zone'">
+            <image [attr.x]="-node.r" [attr.y]="-node.r" [attr.width]="node.r * 2" [attr.height]="node.r * 2"
+              xlink:href="assets/image/node/icon/icon_background.svg"></image>
+          </g>
+          <g *ngIf="node.group === 'host'">
+            <image [attr.x]="-node.r" [attr.y]="-node.r" [attr.width]="node.r * 2" [attr.height]="node.r * 2"
+              attr.xlink:href="assets/image/node/icon/icon_{{node.target.hostType | lowercase}}.svg"></image>
+          </g>
+          <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/node/logo/logo_{{node.target.osType | lowercase}}.svg"></image>
+          </g>
+          <!-- <g *ngIf="node.group === 'host' && node.target.hostType !== 'HOST' && node.target.hostVendor !== ''">
+                <text class="textClass" [attr.y]="(node.r - 30) / 10 + 'em'" text-anchor="middle">{{node.target.hostVendor}}</text>
+              </g> -->
+          <g *ngIf="node.group === 'host'">
+            <text class="textClass" [attr.y]="(node.r - 10) / 10 + 'em'" text-anchor="middle">{{node.target.address}}</text>
+          </g>
+          <g *ngIf="node.group === 'service'">
+            <image [attr.x]="-node.r" [attr.y]="-node.r" [attr.width]="node.r * 2" [attr.height]="node.r * 2"
+              attr.xlink:href="assets/image/node/icon/icon_{{node.target.serviceType | lowercase}}.svg"></image>
+          </g>
+          <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/node/logo/logo_{{node.target.key | lowercase}}.svg"></image>
+          </g>
+          <g *ngIf="node.group === 'service'">
+            <text class="textClass" [attr.y]="(node.r - 10) / 10 + 'em'" text-anchor="middle">{{node.target.name}}</text>
+          </g>
+        </g>
+      </g>
+    </g>
+  </svg>
+  <p-card class="ui-map-info" *ngIf="discoveryResult">
+    <div class="ui-map-info-row ui-border-bottom">
+      <div>Total Hosts: </div>{{discoveryResult.totalHosts}}
+    </div>
+    <div class="ui-map-info-row ui-border-bottom">
+      <div>Total Services: </div>{{discoveryResult.totalServices}}
+    </div>
+    <div class="ui-map-info-row">
+      <div>Elapsed: </div>{{discoveryResult.elapsedTime}}
+    </div>
+  </p-card>
+</div>

src/commons/component/discovery/discovery-map.component.ts

@@ -0,0 +1,96 @@
+import {
+  Component,
+  Input,
+  OnInit,
+  EventEmitter,
+  Output,
+  ViewChild,
+  OnDestroy,
+  ElementRef
+} from '@angular/core';
+import { Node } from '../../model/node';
+import { Link } from '../../model/link';
+import { Zone } from '@overflow/model/discovery';
+
+
+export class DiscoveryResult {
+  totalHosts: number;
+  totalServices: number;
+  elapsedTime: string;
+
+  hTimer: any;
+
+  constructor() {
+    this.totalHosts = 0;
+    this.totalServices = 0;
+    this.elapsedTime = '00:00:00';
+  }
+
+  start() {
+    const __this = this;
+    const startTime = new Date().getTime();
+    this.hTimer = setInterval(function () {
+      // Get todays date and time
+      const now = new Date().getTime();
+
+      // Find the distance between now and the count down date
+      const distance = now - startTime;
+
+      // Time calculations for days, hours, minutes and seconds
+      const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+      const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+      const seconds = Math.floor((distance % (1000 * 60)) / 1000);
+
+      __this.setElapsedTime(hours, minutes, seconds);
+    }, 1000);
+  }
+
+  setElapsedTime(hour: number, minute: number, second: number) {
+    this.elapsedTime = String(hour).padStart(2, '0') + ':' + String(minute).padStart(2, '0') + ':' + String(second).padStart(2, '0');
+  }
+
+  stop(hours: number, minutes: number, seconds: number) {
+    clearInterval(this.hTimer);
+    this.setElapsedTime(hours, minutes, seconds);
+  }
+
+  increaseHost() {
+    this.totalHosts++;
+  }
+
+  increaseService() {
+    this.totalServices++;
+  }
+}
+
+@Component({
+  selector: 'app-discovery-map',
+  templateUrl: './discovery-map.component.html',
+  styleUrls: ['./discovery-map.component.scss']
+})
+export class DiscoveryMapComponent implements OnInit {
+  @Input() zone: Zone;
+
+  @Input() nodes: Node[];
+
+  @Input() links: Link[];
+
+
+  @ViewChild('discoveryTarget') set discoveryTarget(content: ElementRef) {
+    this.discoveryTargetRef = content;
+  }
+
+  private discoveryTargetRef: ElementRef;
+  public simulation: d3.Simulation<Node, Link> | undefined;
+  private zoomBehavior: d3.ZoomBehavior<Element, {}>;
+  private discoveryContainerWidth: number;
+  private discoveryContainerHeight: number;
+  private readonly maxScale: number;
+  private readonly minScale: number;
+
+  constructor() { }
+
+  ngOnInit(): void {
+
+  }
+}

src/commons/component/index.ts

@@ -1,9 +1,9 @@
-import { NicDropdownComponent } from './nic-dropdown.component';
-import { ScannerSettingDropdownComponent } from './scanner-setting-dropdown.component';
-import { NodeDetailComponent } from './node-detail.component';
-import { ZoneDetailComponent } from './zone-detail.component';
-import { HostDetailComponent } from './host-detail.component';
-import { ServiceDetailComponent } from './service-detail.component';
+import {
+  HostDetailComponent,
+  NodeDetailComponent,
+  ServiceDetailComponent,
+  ZoneDetailComponent,
+} from './detail';
 
 import {
   AboutComponent,
@@ -12,6 +12,10 @@ import {
   PrintComponent,
 } from './menu';
 
+import {
+  NicDropdownComponent,
+  ScannerSettingDropdownComponent,
+} from './toolbar';
 
 export const COMPONENTS = [
   NicDropdownComponent,
@@ -24,5 +28,4 @@ export const COMPONENTS = [
   ExportCSVComponent,
   PreferencesComponent,
   PrintComponent,
-
 ];

src/commons/component/toolbar/index.ts

@@ -0,0 +1,2 @@
+export * from './nic-dropdown.component';
+export * from './scanner-setting-dropdown.component';

src/commons/component/toolbar/nic-dropdown.component.ts

@@ -11,7 +11,7 @@ import {
 import { of } from 'rxjs';
 import { catchError, map, take } from 'rxjs/operators';
 
-import { ProbeService } from '../service/probe.service';
+import { ProbeService } from '../../service/probe.service';
 import { Interface } from '@overflow/model/net/nic';
 import { SelectItem } from 'primeng/primeng';
 import { Zone } from '@overflow/model/discovery';

src/commons/component/toolbar/scanner-setting-dropdown.component.ts

@@ -2,7 +2,7 @@ import { Component, Input, OnInit, ViewChild, Output, EventEmitter } from '@angu
 import { DropdownPanelComponent } from '@overflow/commons/ui/component/primeng';
 import { DiscoverHost, Zone } from '@overflow/model/discovery';
 import { toMetaIPType, MetaIPTypeEnum, MetaPortTypeEnum } from '@overflow/model/meta';
-import { DiscoveryConfigService } from '../service/discovery-config.service';
+import { DiscoveryConfigService } from '../../service/discovery-config.service';
 
 const IPCIDR = require('ip-cidr');
 

yarn.lock

@@ -7619,6 +7619,11 @@ saucelabs@^1.5.0:
   dependencies:
     https-proxy-agent "^2.2.1"
 
+save-svg-as-png@^1.4.6:
+  version "1.4.6"
+  resolved "https://nexus.loafle.net/repository/npm-all/save-svg-as-png/-/save-svg-as-png-1.4.6.tgz#8c66dc0a418ae7574ca9783066303781ede47f4d"
+  integrity sha512-CeN0wtmKW02/qfTtXFfiCCniyGExRzPKpp2xOdY8cbLEeIQPWKhSCd1HUl/dGH7WDu2As6Wecs14rlV2Jaf9lg==
+
 sax@0.5.x:
   version "0.5.8"
   resolved "https://nexus.loafle.net/repository/npm-all/sax/-/sax-0.5.8.tgz#d472db228eb331c2506b0e8c15524adb939d12c1"