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.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([]);
const options = {
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.on('click', (params) => {
const ids = params.nodes;
const clickedNodes = this.nodeSet.get(ids);
console.log('clicked nodes:', clickedNodes);
});
const zone: Zone = {
@ -160,11 +170,11 @@ export class HomePageComponent implements OnInit, OnDestroy {
if (null !== this.nodeSet.get(hostId)) {
this.nodeSet.update([
{ id: hostId, label: `${host.name}(${host.address})` }
{ id: hostId, label: `${host.name}(${host.address})`, group: 'host', host: host },
]);
} else {
this.nodeSet.add([
{ id: hostId, label: `${host.name}(${host.address})` }
{ id: hostId, label: `${host.name}(${host.address})`, group: 'host', host: host },
]);
this.edgeSet.add([
{ 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 serviceId = `${service.port.host.address}-${service.port.portNumber}-${service.key}`;
this.nodeSet.add([
{ id: `${serviceId}`, label: `${service.key}` }
{ id: `${serviceId}`, label: `${service.key}`, group: 'service', service: service }
]);
this.edgeSet.add([
{ from: `${hostId}`, to: `${serviceId}` },
{ from: `${hostId}`, label: `${service.port.portNumber}`, to: `${serviceId}` },
]);
}