This commit is contained in:
crusader 2018-10-13 03:47:21 +09:00
parent 3c8e2a47c1
commit a664e2cf0c
6 changed files with 104 additions and 106 deletions

View File

@ -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 {

View File

@ -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 !== ''">
<text class="textClass" [attr.y]="(node.r - 30) / 10 + 'em'" text-anchor="middle">{{node.target.hostVendor}}</text>
<!-- <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.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>

View File

@ -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 {
/**
* Nodes zero-based index into nodes array. This property is set during the initialization process of a simulation.
*/
index?: number;
/**
* Nodes current x-position
*/
x?: number;
/**
* Nodes current y-position
*/
y?: number;
/**
* Nodes current x-velocity
*/
vx?: number;
/**
* Nodes current y-velocity
*/
vy?: number;
/**
* Nodes fixed x-position (if position was fixed)
*/
fx?: number | null;
/**
* Nodes 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;

View File

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

View File

@ -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;
}
}

View File

@ -1,55 +0,0 @@
import * as d3 from 'd3';
import { Link } from './link';
export class Node implements d3.SimulationNodeDatum {
/**
* Nodes zero-based index into nodes array. This property is set during the initialization process of a simulation.
*/
index?: number;
/**
* Nodes current x-position
*/
x?: number;
/**
* Nodes current y-position
*/
y?: number;
/**
* Nodes current x-velocity
*/
vx?: number;
/**
* Nodes current y-velocity
*/
vy?: number;
/**
* Nodes fixed x-position (if position was fixed)
*/
fx?: number | null;
/**
* Nodes 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);
}
}