diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 0f19c23..1851beb 100644 --- a/src/app/app.component.ts +++ b/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.changeDetector.detectChanges(); - }); - this.translateService.onTranslationChange.subscribe(() => { - this.changeDetector.detectChanges(); - }); + // this.translateService.onLangChange.subscribe(() => { + // this.changeDetector.detectChanges(); + // }); + // this.translateService.onTranslationChange.subscribe(() => { + // this.changeDetector.detectChanges(); + // }); this.translateService.setDefaultLang('en'); - this.translateService.use('en'); + + // const i18ns = ['en', 'ko']; + // i18ns.forEach((lang) => { + // this.translateService.use(lang); + // }); + + } ngOnInit(): void { diff --git a/src/app/component/infra/display/map.component.html b/src/app/component/infra/display/map.component.html index 51c9a31..9ebbea0 100644 --- a/src/app/component/infra/display/map.component.html +++ b/src/app/component/infra/display/map.component.html @@ -6,7 +6,7 @@ [attr.targetId]="link.target.id"> {{link.target.target.port.portNumber}} + [attr.y]="(link.source.y - link.target.y) / 2 + link.target.y">{{link.target.infra.port.portNumber}} @@ -16,7 +16,7 @@ xlink:href="assets/image/node/icon/icon_overflow.svg"> - {{node.target.network}} + {{node.infra.network}} + attr.xlink:href="assets/image/node/icon/icon_{{node.infra.hostType | lowercase}}.svg"> - + + attr.xlink:href="assets/image/node/logo/logo_{{node.infra.osType | lowercase}}.svg"> - - {{node.target.address}} + {{node.infra.address}} + attr.xlink:href="assets/image/node/icon/icon_{{node.infra.serviceType | lowercase}}.svg"> - + + attr.xlink:href="assets/image/node/logo/logo_{{node.infra.key | lowercase}}.svg"> - {{node.target.name}} + {{node.infra.name}} diff --git a/src/app/component/infra/display/map.component.ts b/src/app/component/infra/display/map.component.ts index 2ccfd06..d576d0a 100644 --- a/src/app/component/infra/display/map.component.ts +++ b/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 { + 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; diff --git a/src/app/core/model/index.ts b/src/app/core/model/index.ts index 6c3d186..e28058f 100644 --- a/src/app/core/model/index.ts +++ b/src/app/core/model/index.ts @@ -1,3 +1 @@ -export * from './link'; -export * from './node'; export * from './discover-request-info'; diff --git a/src/app/core/model/link.ts b/src/app/core/model/link.ts deleted file mode 100644 index b73fb2d..0000000 --- a/src/app/core/model/link.ts +++ /dev/null @@ -1,21 +0,0 @@ -import * as d3 from 'd3'; - -import { Node } from './node'; - -export class Link implements d3.SimulationLinkDatum { - 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; - } -} diff --git a/src/app/core/model/node.ts b/src/app/core/model/node.ts deleted file mode 100644 index 61a584a..0000000 --- a/src/app/core/model/node.ts +++ /dev/null @@ -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); - } - -}