/map shaking

Help
1

The auto generated map at /map doesn’t seem to want to settle.

https://www.dropbox.com/s/66gb2xchp2fi339/jelly.mov?dl=0

Not sure when it broke - it only sees occasional use. No significant JS errors are being logged to the console. The browser in use is Firefox 77.

====================================
Component | Version
--------- | -------
LibreNMS  | 1.64.1-332-gcb8b528
DB Schema | 2020_06_23_00522_alter_availability_perc_column (170)
PHP       | 7.3.17
Python    | 3.6.8
MySQL     | 10.2.22-MariaDB-log
RRDTool   | 1.7.1
SNMP      | NET-SNMP 5.7.2
====================================

[OK]    Composer Version: 1.10.8
[OK]    Dependencies up-to-date.
[OK]    Database connection successful
[OK]    Database schema correct
2

I wonder if updating the vis.js library would help.

FYI, it has always been broken. It just has problems with the physics and some node configurations. Also FYI, I’m currently not working on it as we never look at this map anyway.

3

Hm, I just looked at updating the library but the original author has discontinued development. The version packaged by LibreNMS is the final version.

Seems to have been split into multiple libraries with a few million npm dependencies, so I suspect a rewrite of the whole feature (and a reworking of LibreNMS’s js asset handling) would be needed.

4

Is this different? I thought it was a fork.

5

Sort of. The project was forked, but after the fork it was split into multiple libraries (vis-network, vis-util, vis-data, vis-timeline etc…), and from the release notes, there have now been 3-4 rounds of breaking changes introduced.

They provide a “mostly compatible” shim that might work:
https://github.com/visjs/vis-charts.

I had a fiddle around and managed to get it stablised anyway - I’m not exactly sure what the solution is at the moment as all I did was unset ‘network_map_vis_options’ - one of the defaults must be off, but I’m not sure which.

6

It would be nice if the Network Map and Availability features were combined. This way the devices on the map would represent the availability of a device. My biggest problem was the Network Map showing erratic behavior of some subnets shaking or moving continuously. I would like to be able to manually edit or arrange.

Changing the config.php file in /opt/librenms/config.php by putting ‘xdp’ prior to ‘mac’ and the network_map_vis_options works much better now.

$config[‘network_map_items’] = array(‘xdp’,‘mac’);
$config[‘network_map_vis_options’] = ‘{
“configure”: { “enabled”: true
},
“nodes”: {
“borderWidth”: null,
“borderWidthSelected”: null,
“color”: {
“highlight”: {},
“hover”: {}
},
“font”: {
“size”: 10,
“strokeWidth”: null
},
“scaling”: {
“min”: 2,
“max”: 9
},
“shapeProperties”: {
“borderRadius”: null
},
“size”: null
},
“edges”: {
“scaling”: {
“min”: 2,
“max”: 11
},
“smooth”: {
“forceDirection”: “none”
}
},
“interaction”: {
“multiselect”: true,
“navigationButtons”: true
},
“manipulation”: {
“enabled”: true,
“initiallyActive”: true
},
“physics”: {
“forcedAtlas2Based”: {
“gravitationalConstant”: -100,
“centralGravity”: 0.55,
“springConstant”: 0.02,
“springLength”: 125
},
“enabled”: true,
“maxVelocity”: 0,
“minVelocity”: 0,
“solver”: “forceAtlas2Based”
}
}’;

1 Like
7

Setting the gravitationalConstant = 100 and timestep = .03 seemed to have help the map stop rotating. Setting network_map_items for only “mac” stopped the shaking. When trying to configure from the page the config generator doesn’t seem to provide the desired results. Here are my settings that seemed to work:

$config[‘network_map_items’] = array(‘mac’);
$config[‘network_map_vis_options’] = '{
“configure”: { “enabled”: false
},
“nodes”: {
“borderWidth”: null,
“borderWidthSelected”: null,
“color”: {
“highlight”: {},
“hover”: {}
},
“font”: {
“size”: 12,
“strokeWidth”: null
},
“scaling”: {
“min”: 2,
“max”: 9
},
“shapeProperties”: {
“borderRadius”: null
},
“size”: null
},
“edges”: {
“scaling”: {
“min”: 2,
“max”: 11
},
“smooth”: {
“forceDirection”: “none”
}
},
“interaction”: {
“multiselect”: true,
“navigationButtons”: true
},
“manipulation”: {
“enabled”: true,
“initiallyActive”: true
},
“physics”: {
“forcedAtlas2Based”: {
“gravitationalConstant”: 100,
“centralGravity”: 0.55,
“springConstant”: 0.02,
“springLength”: 150
},
“enabled”: true,
“maxVelocity”: 0,
“minVelocity”: 0,
“solver”: “forceAtlas2Based”
“timestep”: 0.03
}