overflow_scanner/app
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ing

Browse Source
This commit is contained in:
crusader 2018-09-11 01:20:14 +09:00
parent 6ef4cd4134
commit 17c51a6001
4 changed files with 92 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
src/app/pages/home/home-page.component.ts
View File

@ -47,7 +47,7 @@ export class HomePageComponent implements OnInit, OnDestroy {
private nodes: Node[];
private links: Link[];
public simulation: d3.Simulation<Node, Link>;
public simulation: d3.Simulation<Node, Link> | undefined;
constructor(
private changeDetector: ChangeDetectorRef,
@ -86,35 +86,45 @@ export class HomePageComponent implements OnInit, OnDestroy {
}
startDiscovery() {
this.zone = {
network: '192.168.1.0/24',
iface: 'enp3s0',
metaIPType: toMetaIPType(MetaIPTypeEnum.V4),
address: '192.168.1.101',
mac: '44:8a:5b:f1:f1:f3',
};
this.discoverHost = {
metaIPType: toMetaIPType(MetaIPTypeEnum.V4),
firstScanRange: '192.168.1.1',
lastScanRange: '192.168.1.254',
discoveryConfig: {
},
discoverPort: {
firstScanRange: 1,
lastScanRange: 65535,
includeTCP: true,
includeUDP: true,
discoverService: {
}
}
};
console.log('########################################################');
console.log(this.zone);
console.log(this.discoverHost);
console.log('########################################################');
this.showIntro = false;
this.changeDetector.detectChanges();
const svg = d3.select(this.discoveryTargetRef.nativeElement);
const _zoom = d3.zoom().on('zoom', () => {
const transform = d3.event.transform;
svg.select('g').attr('transform', 'translate(' + transform.x + ',' + transform.y + ') scale(' + transform.k + ')');
});
svg.call(_zoom);
const width = this.discoveryTargetRef.nativeElement.clientWidth;
const height = this.discoveryTargetRef.nativeElement.clientHeight;
this.simulation = d3
.forceSimulation<Node, Link>()
.nodes(this.nodes)
.force('charge', d3.forceManyBody().strength(-120))
.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;
}))
;
this.simulationInit();
this.nodes = [];
this.links = [];
this.nodes.push(
{ id: '192.168.1.0/24', group: 'zone', target: this.zone, fx: width / 2, fy: height / 2 },
@ -129,30 +139,6 @@ export class HomePageComponent implements OnInit, OnDestroy {
this.simulationRestart();
// const zone: Zone = {
// network: '192.168.1.0/24',
// iface: 'enp3s0',
// metaIPType: toMetaIPType(MetaIPTypeEnum.V4),
// address: '192.168.1.101',
// mac: '44:8a:5b:f1:f1:f3',
// };
// const discoverHost: DiscoverHost = {
// metaIPType: toMetaIPType(MetaIPTypeEnum.V4),
// firstScanRange: '192.168.1.1',
// lastScanRange: '192.168.1.254',
// discoveryConfig: {
// },
// discoverPort: {
// firstScanRange: 1,
// lastScanRange: 65535,
// includeTCP: true,
// includeUDP: true,
// discoverService: {
// }
// }
// };
this.probeService.send('DiscoveryService.DiscoverHost', requesterID, this.zone, this.discoverHost);
// this.probeService.send(
@ -163,6 +149,34 @@ export class HomePageComponent implements OnInit, OnDestroy {
// );
}
simulationInit() {
if (undefined !== this.simulation) {
return;
}
const width = this.discoveryTargetRef.nativeElement.clientWidth;
const height = this.discoveryTargetRef.nativeElement.clientHeight;
const svg = d3.select(this.discoveryTargetRef.nativeElement);
const _zoom = d3.zoom().on('zoom', () => {
const transform = d3.event.transform;
svg.select('g').attr('transform', 'translate(' + transform.x + ',' + transform.y + ') scale(' + transform.k + ')');
});
svg.call(_zoom);
this.simulation = d3
.forceSimulation<Node, Link>()
.nodes(this.nodes)
.force('charge', d3.forceManyBody().strength(-120))
.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;
}))
;
}
simulationRestart() {
// Update and restart the simulation.
const __this = this;
@ -178,6 +192,10 @@ export class HomePageComponent implements OnInit, OnDestroy {
d3.event.on('drag', dragged).on('end', ended);
function dragged() {
if (undefined === node) {
return;
}
node.fx = d3.event.x;
node.fy = d3.event.y;
}
@ -187,6 +205,9 @@ export class HomePageComponent implements OnInit, OnDestroy {
__this.simulation.alphaTarget(0);
}
if (undefined === node) {
return;
}
node.fx = null;
node.fy = null;
}

6
src/commons/component/d3-force.component.html Normal file
View File

@ -0,0 +1,6 @@
<svg #svg [attr.width]="_options.width" [attr.height]="_options.height">
<g [zoomableOf]="svg">
<g [linkVisual]="link" *ngFor="let link of links"></g>
<g [nodeVisual]="node" *ngFor="let node of nodes" [draggableNode]="node" [draggableInGraph]="graph"></g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 279 B

19
src/commons/component/d3-force.component.ts Normal file
View File

@ -0,0 +1,19 @@
import { Component, Input } from '@angular/core';
import { Host } from '@overflow/model/discovery';
@Component({
selector: 'app-d3-force',
templateUrl: './d3-force.component.html',
})
export class D3ForceComponent {
@Input() host: Host;
constructor(
) {
}
}

4
src/commons/component/node-detail.component.html
View File

@ -9,11 +9,11 @@
</ng-container>
<ng-container *ngSwitchCase="'host'">
<app-host-detail [host]="node.host"></app-host-detail>
<app-host-detail [host]="node.target"></app-host-detail>
</ng-container>
<ng-container *ngSwitchCase="'service'">
<app-service-detail [service]="node.service"></app-service-detail>
<app-service-detail [service]="node.target"></app-service-detail>
</ng-container>
<ng-container *ngSwitchDefault>