This commit is contained in:
crusader 2018-09-06 15:31:18 +09:00
parent 6f8f0e970c
commit 862977213b

View File

@ -62,16 +62,26 @@ export class HomePageComponent implements OnInit, OnDestroy {
this.changeDetector.detectChanges(); this.changeDetector.detectChanges();
this.nodeSet = new vis.DataSet([ this.nodeSet = new vis.DataSet([
{ id: '192.168.1.0/24', label: 'Zone' }, { id: '192.168.1.0/24', label: 'Zone', group: 'zone' },
]); ]);
this.edgeSet = new vis.DataSet([]); this.edgeSet = new vis.DataSet([]);
const options = { const options = {
width: '100%', width: '100%',
height: '100%' height: '100%',
groups: {
zone: { color: { background: 'red' }, borderWidth: 5 },
host: { color: { background: 'blue' }, borderWidth: 3 },
service: { color: { background: 'white' }, borderWidth: 1 },
}
}; };
this.visNetwork = new vis.Network(this.discoveryTargetRef.nativeElement, { nodes: this.nodeSet, edges: this.edgeSet }, options); this.visNetwork = new vis.Network(this.discoveryTargetRef.nativeElement, { nodes: this.nodeSet, edges: this.edgeSet }, options);
this.visNetwork.on('click', (params) => {
const ids = params.nodes;
const clickedNodes = this.nodeSet.get(ids);
console.log('clicked nodes:', clickedNodes);
});
const zone: Zone = { const zone: Zone = {
@ -160,11 +170,11 @@ export class HomePageComponent implements OnInit, OnDestroy {
if (null !== this.nodeSet.get(hostId)) { if (null !== this.nodeSet.get(hostId)) {
this.nodeSet.update([ this.nodeSet.update([
{ id: hostId, label: `${host.name}(${host.address})` } { id: hostId, label: `${host.name}(${host.address})`, group: 'host', host: host },
]); ]);
} else { } else {
this.nodeSet.add([ this.nodeSet.add([
{ id: hostId, label: `${host.name}(${host.address})` } { id: hostId, label: `${host.name}(${host.address})`, group: 'host', host: host },
]); ]);
this.edgeSet.add([ this.edgeSet.add([
{ from: '192.168.1.0/24', to: hostId }, { from: '192.168.1.0/24', to: hostId },
@ -190,10 +200,10 @@ export class HomePageComponent implements OnInit, OnDestroy {
const hostId = service.port.host.address; const hostId = service.port.host.address;
const serviceId = `${service.port.host.address}-${service.port.portNumber}-${service.key}`; const serviceId = `${service.port.host.address}-${service.port.portNumber}-${service.key}`;
this.nodeSet.add([ this.nodeSet.add([
{ id: `${serviceId}`, label: `${service.key}` } { id: `${serviceId}`, label: `${service.key}`, group: 'service', service: service }
]); ]);
this.edgeSet.add([ this.edgeSet.add([
{ from: `${hostId}`, to: `${serviceId}` }, { from: `${hostId}`, label: `${service.port.portNumber}`, to: `${serviceId}` },
]); ]);
} }