This commit is contained in:
crusader 2018-09-11 02:47:33 +09:00
parent a6277fba90
commit 33da27c26c
3 changed files with 13 additions and 13 deletions

View File

@ -16,19 +16,15 @@
<div *ngIf="!showIntro" class="vis-container"> <div *ngIf="!showIntro" class="vis-container">
<svg #discoveryTarget width="100%" height="100%"> <svg #discoveryTarget width="100%" height="100%">
<defs>
<pattern id="icon_db_maria" width="1" height="1" patternUnits="objectBoundingBox">
<image x="0" y="0" width="66" height="56" xlink:href="../../assets/image/icon/icon_db_maria.svg"></image>
</pattern>
</defs>
<g> <g>
<g *ngFor="let link of links"> <g *ngFor="let link of links">
<line class="link" [attr.x1]="link.source.x" [attr.y1]="link.source.y" [attr.x2]="link.target.x" [attr.y2]="link.target.y"></line> <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>
<g *ngFor="let node of nodes"> <g *ngFor="let node of nodes">
<g class="node-container" [attr.transform]="'translate(' + node.x + ',' + node.y + ')'" (click)="onTargetClick(node)"> <g class="node-container" [attr.transform]="'translate(' + node.x + ',' + node.y + ')'" (click)="onTargetClick(node)">
<circle class="node" cx="0" cy="0" r="33" fill="url(#icon_db_maria)"></circle> <!-- <circle class="node" cx="0" cy="0" [attr.r]="node.r" fill="url(#icon_db_maria)"></circle> -->
<text class="textClass" y="2.5em" text-anchor="middle">{{node.id}}</text> <image [attr.x]="-node.r" [attr.y]="-node.r" [attr.width]="node.r * 2" [attr.height]="node.r * 2" xlink:href="../../assets/image/icon/icon_db_maria.svg"></image>
<text class="textClass" [attr.y]="(node.r - 10) / 10 + 'em'" text-anchor="middle">{{node.id}}</text>
</g> </g>
</g> </g>
</g> </g>

View File

@ -127,7 +127,7 @@ export class HomePageComponent implements OnInit, OnDestroy {
this.links = []; this.links = [];
this.nodes.push( this.nodes.push(
{ id: '192.168.1.0/24', group: 'zone', target: this.zone, fx: width / 2, fy: height / 2 }, { id: '192.168.1.0/24', group: 'zone', target: this.zone, fx: width / 2, fy: height / 2, r: 60 },
// { id: '192.168.1.1' }, // { id: '192.168.1.1' },
// { id: '192.168.1.2' }, // { id: '192.168.1.2' },
); );
@ -139,7 +139,7 @@ export class HomePageComponent implements OnInit, OnDestroy {
this.simulationRestart(); this.simulationRestart();
// this.probeService.send('DiscoveryService.DiscoverHost', requesterID, this.zone, this.discoverHost); this.probeService.send('DiscoveryService.DiscoverHost', requesterID, this.zone, this.discoverHost);
// this.probeService.send( // this.probeService.send(
// 'DiscoveryService.DiscoverHost', // 'DiscoveryService.DiscoverHost',
@ -288,7 +288,7 @@ export class HomePageComponent implements OnInit, OnDestroy {
console.log('DiscoveredHost', host); console.log('DiscoveredHost', host);
const hostId = `${host.address}`; const hostId = `${host.address}`;
const zoneNode = this.getNode('192.168.1.0/24'); const zoneNode = this.getNode('192.168.1.0/24');
const hostNode = new Node(hostId, 'host', host); const hostNode = new Node(hostId, 'host', host, 40);
hostNode.x = zoneNode.x; hostNode.x = zoneNode.x;
hostNode.y = zoneNode.y; hostNode.y = zoneNode.y;
@ -315,7 +315,7 @@ export class HomePageComponent implements OnInit, OnDestroy {
const serviceId = `${service.port.host.address}-${service.port.portNumber}-${service.key}`; const serviceId = `${service.port.host.address}-${service.port.portNumber}-${service.key}`;
const hostNode = this.getNode(hostId); const hostNode = this.getNode(hostId);
const serviceNode = new Node(serviceId, 'service', service); const serviceNode = new Node(serviceId, 'service', service, 30);
serviceNode.x = hostNode.x; serviceNode.x = hostNode.x;
serviceNode.y = hostNode.y; serviceNode.y = hostNode.y;

View File

@ -40,11 +40,15 @@ export class Node implements d3.SimulationNodeDatum {
image?: string; image?: string;
constructor(id, group, target) { constructor(id, group, target, r?) {
this.id = id; this.id = id;
this.group = group; this.group = group;
this.target = target; this.target = target;
this.r = 50; if (undefined === r) {
this.r = 20;
} else {
this.r = r;
}
} }
} }