ing

src/app/app.component.ts

@@ -40,15 +40,21 @@ export class AppComponent implements OnInit, AfterContentInit, AfterViewInit, On
     this.showTitleBar = false;
     this.block = false;
 
-    this.translateService.onLangChange.subscribe(() => {
+    // this.translateService.onLangChange.subscribe(() => {
-      this.changeDetector.detectChanges();
+    //   this.changeDetector.detectChanges();
-    });
+    // });
-    this.translateService.onTranslationChange.subscribe(() => {
+    // this.translateService.onTranslationChange.subscribe(() => {
-      this.changeDetector.detectChanges();
+    //   this.changeDetector.detectChanges();
-    });
+    // });
 
     this.translateService.setDefaultLang('en');
-    this.translateService.use('en');
+
+    // const i18ns = ['en', 'ko'];
+    // i18ns.forEach((lang) => {
+    //   this.translateService.use(lang);
+    // });
+
+
   }
 
   ngOnInit(): void {

src/app/component/infra/display/map.component.html

@@ -6,7 +6,7 @@
           [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>
+            [attr.y]="(link.source.y - link.target.y) / 2 + link.target.y">{{link.target.infra.port.portNumber}}</text>
         </g>
       </g>
       <g *ngFor="let node of nodes">
@@ -16,7 +16,7 @@
               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>
+            <text class="textClass" [attr.y]="(node.r - 10) / 10 + 'em'" text-anchor="middle">{{node.infra.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"
@@ -24,28 +24,28 @@
           </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>
+              attr.xlink:href="assets/image/node/icon/icon_{{node.infra.hostType | lowercase}}.svg"></image>
           </g>
-          <g *ngIf="node.group === 'host' && node.target.hostType === 'HOST' && node.target.osType !== 'UNKNOWN'">
+          <g *ngIf="node.group === 'host' && node.infra.hostType === 'HOST' && node.infra.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>
+              attr.xlink:href="assets/image/node/logo/logo_{{node.infra.osType | lowercase}}.svg"></image>
           </g>
-          <!-- <g *ngIf="node.group === 'host' && node.target.hostType !== 'HOST' && node.target.hostVendor !== ''">
+          <!-- <g *ngIf="node.group === 'host' && node.infra.hostType !== 'HOST' && node.infra.hostVendor !== ''">
-                <text class="textClass" [attr.y]="(node.r - 30) / 10 + 'em'" text-anchor="middle">{{node.target.hostVendor}}</text>
+                <text class="textClass" [attr.y]="(node.r - 30) / 10 + 'em'" text-anchor="middle">{{node.infra.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>
+            <text class="textClass" [attr.y]="(node.r - 10) / 10 + 'em'" text-anchor="middle">{{node.infra.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>
+              attr.xlink:href="assets/image/node/icon/icon_{{node.infra.serviceType | lowercase}}.svg"></image>
           </g>
-          <g *ngIf="node.group === 'service' && node.target.key !== 'UNKNOWN'">
+          <g *ngIf="node.group === 'service' && node.infra.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>
+              attr.xlink:href="assets/image/node/logo/logo_{{node.infra.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>
+            <text class="textClass" [attr.y]="(node.r - 10) / 10 + 'em'" text-anchor="middle">{{node.infra.name}}</text>
           </g>
         </g>
       </g>

src/app/component/infra/display/map.component.ts

@@ -19,8 +19,6 @@ import { Store, select } from '@ngrx/store';
 import * as d3 from 'd3';
 
 import { Zone, Host, Service, Port } from '@overflow/model/discovery';
-import { Link } from '../../../core/model/link';
-import { Node } from '../../../core/model/node';
 
 import * as AppStore from '../../../store';
 import * as DiscoveryConfigStore from '../../../store/discovery/config';
@@ -31,6 +29,78 @@ import { DiscoveryMessageType } from 'src/app/core/type';
 import { ConfirmationService } from 'primeng/primeng';
 import { MetaServiceTypeEnum, toMetaServiceTypeEnum } from '@overflow/model/meta/MetaServiceType';
 
+export class Link implements d3.SimulationLinkDatum<Node> {
+  source: Node;
+  target: Node;
+
+  index?: number;
+
+  constructor(source: Node, target: Node) {
+    target.addLink(this);
+
+    if ('zone' !== source.group) {
+      source.addLink(this);
+    }
+
+    this.source = source;
+    this.target = target;
+  }
+}
+
+export class Node implements d3.SimulationNodeDatum {
+  /**
+   * Node’s zero-based index into nodes array. This property is set during the initialization process of a simulation.
+   */
+  index?: number;
+  /**
+   * Node’s current x-position
+   */
+  x?: number;
+  /**
+   * Node’s current y-position
+   */
+  y?: number;
+  /**
+   * Node’s current x-velocity
+   */
+  vx?: number;
+  /**
+   * Node’s current y-velocity
+   */
+  vy?: number;
+  /**
+   * Node’s fixed x-position (if position was fixed)
+   */
+  fx?: number | null;
+  /**
+   * Node’s fixed y-position (if position was fixed)
+   */
+  fy?: number | null;
+
+  r?: number;
+
+  id: string;
+
+  group?: string;
+
+  infra?: Host | Port | Service | null;
+
+  image?: string;
+
+  links?: Link[];
+
+  constructor(id) {
+    this.id = id;
+    this.links = [];
+  }
+
+  addLink(link: Link) {
+    this.links.push(link);
+  }
+
+}
+
+
 export class DisplaySummary {
   totalHosts: number;
   totalPorts: number;
@@ -781,7 +851,7 @@ export class MapComponent implements OnInit, AfterContentInit, OnDestroy {
 
     this.store.dispatch(new InfraStore.ChangeSelectedInfra({
       group: node.group,
-      infra: node.target,
+      infra: node.infra,
     }));
 
     this.selectedNode = node;
@@ -864,7 +934,7 @@ export class MapComponent implements OnInit, AfterContentInit, OnDestroy {
     this.zone = zone;
     this.zoneNode = new Node(this.getZoneId(zone));
     this.zoneNode.group = 'zone';
-    this.zoneNode.target = zone;
+    this.zoneNode.infra = zone;
     this.zoneNode.fx = this.displayInfraWidth / 2;
     this.zoneNode.fy = this.displayInfraHeight / 2;
     this.zoneNode.r = 60;
@@ -888,10 +958,10 @@ export class MapComponent implements OnInit, AfterContentInit, OnDestroy {
 
     let { node } = this.getNode(hostId);
     if (null !== node) {
-      node.target = host;
+      node.infra = host;
     } else {
       node = new Node(hostId);
-      node.target = host;
+      node.infra = host;
       node.group = 'host';
       node.r = 40;
       node.x = this.zoneNode.x;
@@ -951,13 +1021,13 @@ export class MapComponent implements OnInit, AfterContentInit, OnDestroy {
 
     if (MetaServiceTypeEnum.UNKNOWN === MetaServiceTypeEnum[service.serviceType]) {
       if (null !== unknownServiceNode) {
-        unknownServiceNode.target = service;
+        unknownServiceNode.infra = service;
       } else {
         newNode = true;
       }
     } else {
       if (null !== serviceNode) {
-        serviceNode.target = service;
+        serviceNode.infra = service;
       } else {
         if (null !== unknownServiceNode) {
           const { index: linkIdx } = this.getLink(hostNode, unknownServiceNode);
@@ -988,7 +1058,7 @@ export class MapComponent implements OnInit, AfterContentInit, OnDestroy {
 
     if (newNode) {
       serviceNode = new Node(serviceId);
-      serviceNode.target = service;
+      serviceNode.infra = service;
       serviceNode.group = 'service';
       serviceNode.r = 30;
       serviceNode.x = hostNode.x;

src/app/core/model/index.ts

@@ -1,3 +1 @@
-export * from './link';
-export * from './node';
 export * from './discover-request-info';

src/app/core/model/link.ts

@@ -1,21 +0,0 @@
-import * as d3 from 'd3';
-
-import { Node } from './node';
-
-export class Link implements d3.SimulationLinkDatum<Node> {
-  source: Node;
-  target: Node;
-
-  index?: number;
-
-  constructor(source: Node, target: Node) {
-    target.addLink(this);
-
-    if ('zone' !== source.group) {
-      source.addLink(this);
-    }
-
-    this.source = source;
-    this.target = target;
-  }
-}

src/app/core/model/node.ts

@@ -1,55 +0,0 @@
-import * as d3 from 'd3';
-import { Link } from './link';
-
-export class Node implements d3.SimulationNodeDatum {
-  /**
-   * Node’s zero-based index into nodes array. This property is set during the initialization process of a simulation.
-   */
-  index?: number;
-  /**
-   * Node’s current x-position
-   */
-  x?: number;
-  /**
-   * Node’s current y-position
-   */
-  y?: number;
-  /**
-   * Node’s current x-velocity
-   */
-  vx?: number;
-  /**
-   * Node’s current y-velocity
-   */
-  vy?: number;
-  /**
-   * Node’s fixed x-position (if position was fixed)
-   */
-  fx?: number | null;
-  /**
-   * Node’s fixed y-position (if position was fixed)
-   */
-  fy?: number | null;
-
-  r?: number;
-
-  id: string;
-
-  group?: string;
-
-  target?: any;
-
-  image?: string;
-
-  links?: Link[];
-
-  constructor(id) {
-    this.id = id;
-    this.links = [];
-  }
-
-  addLink(link: Link) {
-    this.links.push(link);
-  }
-
-}