ing
This commit is contained in:
parent
a6277fba90
commit
33da27c26c
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user