ing
This commit is contained in:
crusader
parent
2788632602
commit
405612a6ad
|
|
@ -22,15 +22,27 @@
|
|||
</g>
|
||||
<g *ngFor="let node of nodes">
|
||||
<g class="node-container" [attr.transform]="'translate(' + node.x + ',' + node.y + ')'" (click)="onTargetClick(node)">
|
||||
<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"
|
||||
xlink:href="../../assets/image/icon/icon_overflow.svg"></image>
|
||||
</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"
|
||||
xlink:href="../../assets/image/icon/icon_background.svg"></image>
|
||||
</g>
|
||||
<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/icon/icon_{{node.target.deviceType | lowercase}}.svg"></image>
|
||||
</g>
|
||||
<g *ngIf="node.group === 'host' && node.target.deviceType === '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/logo/logo_{{node.target.osType | lowercase}}.svg"></image>
|
||||
</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"
|
||||
xlink:href="../../assets/image/icon/icon_was.svg"></image>
|
||||
</g>
|
||||
<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"
|
||||
xlink:href="../../assets/image/logo/logo_tomcat.svg"></image>
|
||||
</g>
|
||||
|
|
|
|||
|
|
@ -128,6 +128,7 @@ export class HomePageComponent implements OnInit, OnDestroy {
|
|||
|
||||
this.nodes.push(
|
||||
{ id: '192.168.1.0/24', group: 'zone', target: this.zone, fx: width / 2, fy: height / 2, r: 60 },
|
||||
// { id: '192.168.1.1', group: 'host', target: { address: '192.168.1.1', zone: this.zone, deviceType: 'NAS' }, r: 40 },
|
||||
// { id: '192.168.1.1' },
|
||||
// { id: '192.168.1.2' },
|
||||
);
|
||||
|
|
@ -139,7 +140,7 @@ export class HomePageComponent implements OnInit, OnDestroy {
|
|||
|
||||
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(
|
||||
// 'DiscoveryService.DiscoverHost',
|
||||
|
|
@ -169,11 +170,11 @@ export class HomePageComponent implements OnInit, OnDestroy {
|
|||
this.simulation = d3
|
||||
.forceSimulation<Node, Link>()
|
||||
.nodes(this.nodes)
|
||||
.force('charge', d3.forceManyBody().strength(-120))
|
||||
.force('charge', d3.forceManyBody().strength(-200))
|
||||
.force('link', d3.forceLink(this.links).distance(150))
|
||||
.force('center', d3.forceCenter(width / 2, height / 2))
|
||||
.force('collision', d3.forceCollide().radius(function (node: Node) {
|
||||
return node.r * 1.4;
|
||||
return node.r * 1.2;
|
||||
}))
|
||||
.on('tick', () => {
|
||||
__this.changeDetector.markForCheck();
|
||||
|
|
@ -228,6 +229,8 @@ export class HomePageComponent implements OnInit, OnDestroy {
|
|||
}
|
||||
|
||||
onTargetClick(node: Node) {
|
||||
console.log(node);
|
||||
|
||||
this.displaySidebar = true;
|
||||
this.selectedNode = node;
|
||||
}
|
||||
|
|
@ -290,7 +293,10 @@ export class HomePageComponent implements OnInit, OnDestroy {
|
|||
console.log('DiscoveredHost', host);
|
||||
const hostId = `${host.address}`;
|
||||
const zoneNode = this.getNode('192.168.1.0/24');
|
||||
const hostNode = new Node(hostId, 'host', host, 40);
|
||||
|
||||
const hostNode = this.checkNode(hostId, host);
|
||||
hostNode.group = 'host';
|
||||
hostNode.r = 40;
|
||||
hostNode.x = zoneNode.x;
|
||||
hostNode.y = zoneNode.y;
|
||||
|
||||
|
|
@ -317,7 +323,9 @@ export class HomePageComponent implements OnInit, OnDestroy {
|
|||
const serviceId = `${service.port.host.address}-${service.port.portNumber}-${service.key}`;
|
||||
|
||||
const hostNode = this.getNode(hostId);
|
||||
const serviceNode = new Node(serviceId, 'service', service, 30);
|
||||
const serviceNode = this.checkNode(serviceId, service);
|
||||
serviceNode.group = 'service';
|
||||
serviceNode.r = 30;
|
||||
serviceNode.x = hostNode.x;
|
||||
serviceNode.y = hostNode.y;
|
||||
|
||||
|
|
@ -327,8 +335,19 @@ export class HomePageComponent implements OnInit, OnDestroy {
|
|||
this.simulationRestart();
|
||||
}
|
||||
|
||||
private getNode(id: string): Node {
|
||||
let _n: Node;
|
||||
private checkNode(id: string, target: any): Node {
|
||||
let node = this.getNode(id);
|
||||
if (null === node) {
|
||||
node = new Node(id);
|
||||
node.target = target;
|
||||
} else {
|
||||
node.target = target;
|
||||
}
|
||||
return node;
|
||||
}
|
||||
|
||||
private getNode(id: string): Node | null {
|
||||
let _n: Node = null;
|
||||
this.nodes.some((node): boolean => {
|
||||
if (node.id === id) {
|
||||
_n = node;
|
||||
|
|
|
|||
|
|
@ -7,33 +7,33 @@
|
|||
.st1{fill:#FFFFFF;}
|
||||
</style>
|
||||
<g>
|
||||
<path class="st0" d="M16.1,19.2c-1.3,0-2.4-1.1-2.4-2.4V7.9c0-1.3,1.1-2.4,2.4-2.4h34.5c1.3,0,2.4,1.1,2.4,2.4v8.9
|
||||
c0,1.3-1.1,2.4-2.4,2.4H16.1z"/>
|
||||
<path class="st1" d="M50.6,6.5c0.8,0,1.4,0.6,1.4,1.4v8.9c0,0.8-0.6,1.4-1.4,1.4H16.1c-0.8,0-1.4-0.6-1.4-1.4V7.9
|
||||
c0-0.8,0.6-1.4,1.4-1.4H50.6 M50.6,4.5H16.1c-1.9,0-3.4,1.5-3.4,3.4v8.9c0,1.9,1.5,3.4,3.4,3.4h34.5c1.9,0,3.4-1.5,3.4-3.4V7.9
|
||||
C54,6,52.5,4.5,50.6,4.5L50.6,4.5z"/>
|
||||
<path class="st0" d="M18.5,20.1c-1.1,0-2.1-0.9-2.1-2.1v-7.6c0-1.1,0.9-2.1,2.1-2.1h29.6c1.1,0,2.1,0.9,2.1,2.1v7.6
|
||||
c0,1.1-0.9,2.1-2.1,2.1C48.2,20.1,18.5,20.1,18.5,20.1z"/>
|
||||
<path class="st1" d="M48.2,9.2c0.7,0,1.2,0.5,1.2,1.2v7.6c0,0.7-0.5,1.2-1.2,1.2H18.5c-0.7,0-1.2-0.5-1.2-1.2v-7.6
|
||||
c0-0.7,0.5-1.2,1.2-1.2H48.2 M48.2,7.5H18.5c-1.6,0-2.9,1.3-2.9,2.9v7.6c0,1.6,1.3,2.9,2.9,2.9h29.6c1.6,0,2.9-1.3,2.9-2.9v-7.6
|
||||
C51.1,8.8,49.8,7.5,48.2,7.5L48.2,7.5z"/>
|
||||
</g>
|
||||
<rect x="20.1" y="10.3" class="st1" width="10.1" height="3.8"/>
|
||||
<circle class="st1" cx="38.6" cy="12.2" r="2.1"/>
|
||||
<circle class="st1" cx="44.6" cy="12.2" r="2.1"/>
|
||||
<rect x="22" y="12.5" class="st1" width="8.7" height="3.3"/>
|
||||
<circle class="st1" cx="37.9" cy="14.1" r="1.8"/>
|
||||
<circle class="st1" cx="43" cy="14.1" r="1.8"/>
|
||||
<g>
|
||||
<path class="st0" d="M16.1,32.7c-1.3,0-2.4-1.1-2.4-2.4v-8.9c0-1.3,1.1-2.4,2.4-2.4h34.5c1.3,0,2.4,1.1,2.4,2.4v8.9
|
||||
c0,1.3-1.1,2.4-2.4,2.4H16.1z"/>
|
||||
<path class="st1" d="M50.6,20c0.8,0,1.4,0.6,1.4,1.4v8.9c0,0.8-0.6,1.4-1.4,1.4H16.1c-0.8,0-1.4-0.6-1.4-1.4v-8.9
|
||||
c0-0.8,0.6-1.4,1.4-1.4H50.6 M50.6,18H16.1c-1.9,0-3.4,1.5-3.4,3.4v8.9c0,1.9,1.5,3.4,3.4,3.4h34.5c1.9,0,3.4-1.5,3.4-3.4v-8.9
|
||||
C54,19.5,52.5,18,50.6,18L50.6,18z"/>
|
||||
<path class="st0" d="M18.5,31.7c-1.1,0-2.1-0.9-2.1-2.1V22c0-1.1,0.9-2.1,2.1-2.1h29.6c1.1,0,2.1,0.9,2.1,2.1v7.6
|
||||
c0,1.1-0.9,2.1-2.1,2.1H18.5z"/>
|
||||
<path class="st1" d="M48.2,20.8c0.7,0,1.2,0.5,1.2,1.2v7.6c0,0.7-0.5,1.2-1.2,1.2H18.5c-0.7,0-1.2-0.5-1.2-1.2V22
|
||||
c0-0.7,0.5-1.2,1.2-1.2H48.2 M48.2,19.1H18.5c-1.6,0-2.9,1.3-2.9,2.9v7.6c0,1.6,1.3,2.9,2.9,2.9h29.6c1.6,0,2.9-1.3,2.9-2.9V22
|
||||
C51.1,20.4,49.8,19.1,48.2,19.1L48.2,19.1z"/>
|
||||
</g>
|
||||
<rect x="20.1" y="23.8" class="st1" width="10.1" height="3.8"/>
|
||||
<circle class="st1" cx="38.6" cy="25.7" r="2.1"/>
|
||||
<circle class="st1" cx="44.6" cy="25.7" r="2.1"/>
|
||||
<rect x="22" y="24.1" class="st1" width="8.7" height="3.3"/>
|
||||
<circle class="st1" cx="37.9" cy="25.7" r="1.8"/>
|
||||
<circle class="st1" cx="43" cy="25.7" r="1.8"/>
|
||||
<g>
|
||||
<path class="st0" d="M16.1,46.2c-1.3,0-2.4-1.1-2.4-2.4v-8.9c0-1.3,1.1-2.4,2.4-2.4h34.5c1.3,0,2.4,1.1,2.4,2.4v8.9
|
||||
c0,1.3-1.1,2.4-2.4,2.4H16.1z"/>
|
||||
<path class="st1" d="M50.6,33.5c0.8,0,1.4,0.6,1.4,1.4v8.9c0,0.8-0.6,1.4-1.4,1.4H16.1c-0.8,0-1.4-0.6-1.4-1.4v-8.9
|
||||
c0-0.8,0.6-1.4,1.4-1.4H50.6 M50.6,31.5H16.1c-1.9,0-3.4,1.5-3.4,3.4v8.9c0,1.9,1.5,3.4,3.4,3.4h34.5c1.9,0,3.4-1.5,3.4-3.4v-8.9
|
||||
C54,33,52.5,31.5,50.6,31.5L50.6,31.5z"/>
|
||||
<path class="st0" d="M18.5,43.3c-1.1,0-2.1-0.9-2.1-2.1v-7.6c0-1.1,0.9-2.1,2.1-2.1h29.6c1.1,0,2.1,0.9,2.1,2.1v7.6
|
||||
c0,1.1-0.9,2.1-2.1,2.1C48.2,43.3,18.5,43.3,18.5,43.3z"/>
|
||||
<path class="st1" d="M48.2,32.4c0.7,0,1.2,0.5,1.2,1.2v7.6c0,0.7-0.5,1.2-1.2,1.2H18.5c-0.7,0-1.2-0.5-1.2-1.2v-7.6
|
||||
c0-0.7,0.5-1.2,1.2-1.2H48.2 M48.2,30.7H18.5c-1.6,0-2.9,1.3-2.9,2.9v7.6c0,1.6,1.3,2.9,2.9,2.9h29.6c1.6,0,2.9-1.3,2.9-2.9v-7.6
|
||||
C51.1,32,49.8,30.7,48.2,30.7L48.2,30.7z"/>
|
||||
</g>
|
||||
<rect x="20.1" y="37.3" class="st1" width="10.1" height="3.8"/>
|
||||
<circle class="st1" cx="38.6" cy="39.2" r="2.1"/>
|
||||
<circle class="st1" cx="44.6" cy="39.2" r="2.1"/>
|
||||
<rect x="22" y="35.7" class="st1" width="8.7" height="3.3"/>
|
||||
<circle class="st1" cx="37.9" cy="37.3" r="1.8"/>
|
||||
<circle class="st1" cx="43" cy="37.3" r="1.8"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.3 KiB |
49
src/assets/image/logo/logo_macos.svg
Normal file
49
src/assets/image/logo/logo_macos.svg
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 22.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 66 56" style="enable-background:new 0 0 66 56;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:url(#SVGID_1_);}
|
||||
.st1{fill:#515151;}
|
||||
</style>
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
|
||||
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="33.0531" y1="14.7247" x2="33.0531" y2="35.6022" gradientTransform="matrix(1 0 0 -1 0 55.8898)">
|
||||
<stop offset="0" style="stop-color:#F2F2F2"/>
|
||||
<stop offset="0.5963" style="stop-color:#F7F7F7"/>
|
||||
<stop offset="1" style="stop-color:#FEFEFE"/>
|
||||
</linearGradient>
|
||||
<path class="st0" d="M43.5,30.7c0-5.8-4.6-10.4-10.4-10.4c-5.8,0-10.4,4.6-10.4,10.4c0,5.8,4.6,10.4,10.4,10.4
|
||||
S43.5,36.6,43.5,30.7z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<path class="st1" d="M34.1,27.3L34.1,27.3l0,0.4h0.4v-1.5c0-0.1,0-0.2-0.1-0.3c0-0.1-0.1-0.2-0.2-0.2c-0.1-0.1-0.2-0.1-0.3-0.1
|
||||
s-0.2-0.1-0.4-0.1c-0.1,0-0.2,0-0.3,0.1c-0.1,0-0.2,0.1-0.3,0.1c-0.1,0.1-0.1,0.1-0.2,0.2c0,0.1-0.1,0.2-0.1,0.3h0.4
|
||||
c0,0,0-0.1,0.1-0.1c0,0,0.1-0.1,0.1-0.1c0,0,0.1,0,0.1-0.1c0.1,0,0.1,0,0.2,0c0.1,0,0.3,0,0.3,0.1c0.1,0.1,0.1,0.2,0.1,0.3v0.2
|
||||
l-0.6,0c-0.3,0-0.5,0.1-0.6,0.2c-0.1,0.1-0.2,0.3-0.2,0.5c0,0.1,0,0.2,0.1,0.3c0,0.1,0.1,0.1,0.2,0.2c0.1,0.1,0.1,0.1,0.2,0.1
|
||||
c0.1,0,0.2,0,0.3,0c0.1,0,0.1,0,0.2,0c0.1,0,0.1,0,0.2-0.1c0.1,0,0.1-0.1,0.2-0.1C34,27.4,34.1,27.4,34.1,27.3z M33.9,27.2
|
||||
c-0.1,0-0.1,0.1-0.2,0.1c-0.1,0-0.1,0-0.2,0c-0.1,0-0.2,0-0.3-0.1c-0.1-0.1-0.1-0.1-0.1-0.2c0-0.1,0-0.2,0.1-0.2
|
||||
c0.1-0.1,0.2-0.1,0.3-0.1l0.5,0v0.2c0,0.1,0,0.1,0,0.2C34,27.1,34,27.2,33.9,27.2z"/>
|
||||
<path class="st1" d="M37,32.1l-0.7-0.2c-0.9-0.2-1.2-0.5-1.2-1c0-0.6,0.6-1,1.4-1c0.8,0,1.4,0.4,1.5,1.1h0.9c0-1.1-1-1.9-2.4-1.9
|
||||
C35,29.1,34,29.9,34,31c0,0.9,0.6,1.5,1.8,1.8l0.9,0.2c0.9,0.2,1.3,0.5,1.3,1.1c0,0.6-0.6,1.1-1.5,1.1c-0.9,0-1.6-0.5-1.7-1.1h-1
|
||||
c0.1,1.2,1.1,2,2.5,2c1.6,0,2.6-0.8,2.6-2C39,33,38.4,32.5,37,32.1z"/>
|
||||
<path class="st1" d="M32.2,27.7v-1.5c0-0.1,0-0.2-0.1-0.3c0-0.1-0.1-0.2-0.1-0.2c-0.1-0.1-0.1-0.1-0.2-0.1c-0.1,0-0.2-0.1-0.3-0.1
|
||||
c-0.1,0-0.2,0-0.2,0c-0.1,0-0.1,0-0.2,0.1s-0.1,0.1-0.2,0.1s-0.1,0.1-0.1,0.2h0c0-0.1-0.1-0.2-0.2-0.3c-0.1-0.1-0.2-0.1-0.4-0.1
|
||||
c-0.1,0-0.1,0-0.2,0c-0.1,0-0.1,0-0.2,0.1c-0.1,0-0.1,0.1-0.1,0.1c0,0-0.1,0.1-0.1,0.2h0v-0.4h-0.4v2.2h0.4v-1.3
|
||||
c0-0.1,0-0.1,0.1-0.2c0-0.1,0.1-0.1,0.1-0.2c0,0,0.1-0.1,0.1-0.1c0.1,0,0.1,0,0.2,0c0.1,0,0.1,0,0.2,0c0.1,0,0.1,0,0.1,0.1
|
||||
c0,0,0.1,0.1,0.1,0.1c0,0.1,0,0.1,0,0.2v1.4h0.4v-1.4c0-0.1,0-0.1,0-0.2c0-0.1,0.1-0.1,0.1-0.2c0,0,0.1-0.1,0.1-0.1
|
||||
c0.1,0,0.1,0,0.2,0c0.1,0,0.2,0,0.3,0.1c0.1,0.1,0.1,0.2,0.1,0.3v1.4L32.2,27.7L32.2,27.7z"/>
|
||||
<path class="st1" d="M30.1,29.1c-1.9,0-3.1,1.3-3.1,3.5c0,2.1,1.2,3.5,3.1,3.5s3.1-1.3,3.1-3.5C33.2,30.4,32,29.1,30.1,29.1z
|
||||
M30.1,35.1c-1.3,0-2.1-1-2.1-2.6c0-1.6,0.8-2.6,2.1-2.6c1.3,0,2.1,1,2.1,2.6C32.2,34.1,31.4,35.1,30.1,35.1z"/>
|
||||
<path class="st1" d="M35.6,26c0.1-0.1,0.1-0.1,0.2-0.2c0.1,0,0.2-0.1,0.2-0.1c0.1,0,0.1,0,0.2,0c0.1,0,0.1,0,0.2,0.1
|
||||
c0,0,0.1,0.1,0.1,0.1c0,0,0,0.1,0.1,0.2H37c0-0.1,0-0.2-0.1-0.3c0-0.1-0.1-0.2-0.2-0.2c-0.1-0.1-0.2-0.1-0.3-0.2
|
||||
c-0.1,0-0.2-0.1-0.4-0.1c-0.2,0-0.3,0-0.4,0.1c-0.1,0.1-0.2,0.1-0.3,0.2s-0.2,0.2-0.2,0.4c0,0.1-0.1,0.3-0.1,0.5
|
||||
c0,0.2,0,0.3,0.1,0.5c0,0.1,0.1,0.3,0.2,0.4s0.2,0.2,0.3,0.2c0.1,0.1,0.3,0.1,0.4,0.1c0.1,0,0.3,0,0.4-0.1c0.1,0,0.2-0.1,0.3-0.2
|
||||
c0.1-0.1,0.1-0.1,0.2-0.2c0.1-0.1,0.1-0.2,0.1-0.3h-0.4c0,0.1-0.1,0.2-0.2,0.3c-0.1,0.1-0.2,0.1-0.4,0.1c-0.1,0-0.2,0-0.2-0.1
|
||||
s-0.1-0.1-0.2-0.1c-0.1-0.1-0.1-0.1-0.1-0.2c0-0.1,0-0.2,0-0.3c0-0.1,0-0.2,0-0.3C35.5,26.2,35.6,26.1,35.6,26z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.7 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
|
@ -34,21 +34,14 @@ export class Node implements d3.SimulationNodeDatum {
|
|||
|
||||
id: string;
|
||||
|
||||
group: string;
|
||||
group?: string;
|
||||
|
||||
target: any;
|
||||
target?: any;
|
||||
|
||||
image?: string;
|
||||
|
||||
constructor(id, group, target, r?) {
|
||||
constructor(id) {
|
||||
this.id = id;
|
||||
this.group = group;
|
||||
this.target = target;
|
||||
if (undefined === r) {
|
||||
this.r = 20;
|
||||
} else {
|
||||
this.r = r;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user