ing
This commit is contained in:
parent
6f8f0e970c
commit
862977213b
|
@ -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}` },
|
||||
]);
|
||||
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue
Block a user