netmap
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision Next revision Both sides next revision | ||
|
netmap [2012/09/17 12:58] norangshol [Brief user guide] |
netmap [2012/09/18 11:33] bredal [Map] |
||
|---|---|---|---|
| Line 4: | Line 4: | ||
| Netmap is based on the [[http://d3js.org|D3JS]] library, and uses its [[https://github.com/mbostock/d3/wiki/Force-Layout|ForceBasedLayout-engine]] for finding the optimal graphical layout for the network topology. Netmap should work in all new common browsers that support SVG (IE9 and newer), Firefox (3.5 (really recommend a newer version, as the firefox javascript engine is having performance issues) and up), Chrome (auto updates, testing with Chromium in Debian Squeeze at least). Opera has some issues that we will look into later. | Netmap is based on the [[http://d3js.org|D3JS]] library, and uses its [[https://github.com/mbostock/d3/wiki/Force-Layout|ForceBasedLayout-engine]] for finding the optimal graphical layout for the network topology. Netmap should work in all new common browsers that support SVG (IE9 and newer), Firefox (3.5 (really recommend a newer version, as the firefox javascript engine is having performance issues) and up), Chrome (auto updates, testing with Chromium in Debian Squeeze at least). Opera has some issues that we will look into later. | ||
| + | |||
| + | ===== Features ===== | ||
| + | |||
| Netmap has these features (in no particular order): | Netmap has these features (in no particular order): | ||
| Line 12: | Line 15: | ||
| * Filtering of netboxes based on categories. These categories are set from the categories you have in the database. | * Filtering of netboxes based on categories. These categories are set from the categories you have in the database. | ||
| * Filtering orphans (netboxes not linking to anything) | * Filtering orphans (netboxes not linking to anything) | ||
| - | * * Note: elink is a fictive category, and Netmap itself detects where the elink should be based on NAV's known topology. | + | * Note: elink is a fictive category, and Netmap itself detects where the elink should be based on NAV's known topology. |
| - | * * Note2: can't save metadata / positions of elink nodes, since there is no relation to them as it is a fictive node. | + | * Note2: can't save metadata / positions of elink nodes, since there is no relation to them as it is a fictive node. |
| * Searching. One can search after netboxes based on sysname | * Searching. One can search after netboxes based on sysname | ||
| * Option to pause the layout engine to preserve cpu-load. This should not be needed as the layout engine should stabilize the graph rather quickly in a newer browser and modern PC. In case your living in the past, there's an option to pause it ;-) | * Option to pause the layout engine to preserve cpu-load. This should not be needed as the layout engine should stabilize the graph rather quickly in a newer browser and modern PC. In case your living in the past, there's an option to pause it ;-) | ||
| Line 21: | Line 24: | ||
| * Fix or unfix all node positions. (this is position metadata that is saved to a view) | * Fix or unfix all node positions. (this is position metadata that is saved to a view) | ||
| * Views | * Views | ||
| - | * * User specific views and possibility to share em among other users | + | * User specific views and possibility to share em among other users |
| - | * * Delete your own views | + | * Delete your own views |
| - | * * Update current view | + | * Update current view |
| - | * * Create new view from selected view (incase you want a modify a view that isn't yours) | + | * Create new view from selected view (incase you want a modify a view that isn't yours) |
| - | * * Select a favorite view | + | * Select a favorite view |
| - | * * Administrator can set a global favorite view for users who does not have an favorite view selected. | + | * Administrator can set a global favorite view for users who does not have an favorite view selected. |
| * Different info templates for selected netbox or selected link. | * Different info templates for selected netbox or selected link. | ||
| * Traffic gradient popup (will be nice when RRD/traffic load is refreshed every x min. | * Traffic gradient popup (will be nice when RRD/traffic load is refreshed every x min. | ||
| Line 34: | Line 37: | ||
| NOTE: Icons for the following categories are included GSW, GW, OTHER, SRV, SW, WLAN, EDGE and the fictive category ELINK. If you have other categories, put an icon with the category name in | NOTE: Icons for the following categories are included GSW, GW, OTHER, SRV, SW, WLAN, EDGE and the fictive category ELINK. If you have other categories, put an icon with the category name in | ||
| $NAV_ROOT/share/htdocs/images/netmap/ in the png format. Note: use lower case filename of the category name. | $NAV_ROOT/share/htdocs/images/netmap/ in the png format. Note: use lower case filename of the category name. | ||
| - | |||
| ===== Brief user guide===== | ===== Brief user guide===== | ||
| - | The netmap is available from the toolbox. Clicking it will redirect you to the javascript netmap application. | + | The netmap is available from the toolbox. |
| - | + | ||
| - | The page starts with loading the javascript application (big loading spinner, keeps spinning until it has loaded its required resources. This will go for the next times you visit netmap, as the resources will then be cached in your browser.). | + | |
| - | The spinner will decrease in size when the javascript application is loaded and it starts "running the application" and continue to load the network topology information. | + | |
| - | + | ||
| - | The first thing you'll see is that the navigation menu on the left side is loaded, and soon after the network topology graph pops up. Depending on your loading a view with fixed nodes or not, the layout algorithm will do it's work and position nodes as good as making the nodes not collide. | + | |
| - | + | ||
| - | Your presented with two navigation bars, one on each side of your screen that you can toggle by clicking the "<<" or ">>" links. You can toggle fullscreen with CTRL+SHIFT+F which toggles both sidebars and NAV's footer and header. | + | |
| - | In the center your presented with the network topology map it self. | + | |
| - | + | ||
| - | The load colors on edges represent load based on the link's capacity, and the link's weight represents a few static categories of link speeds. (0-100, 100-512,512-2048,2048-4096,>4096 Mbit/s) | + | |
| - | Using the traffic gradient popup can help you tell the load % without having to click on a link to read it's traffic data. | + | |
| + | Netmap consists of two navigation bars, one on each side of the screen, and the map itself. The navigation bars can be toggled by clicking the "<<" or ">>" links. You can toggle fullscreen with CTRL+SHIFT+F. | ||
| + | The load colors((Click "Show gradient" to get an overview of what the colors indicate)) on edges represent traffic load based on the link's capacity, and the link's thickness represents the link speed. | ||
| ==== Map ==== | ==== Map ==== | ||
| - | Nodes and be drag and dropped and positioned to your liking. When a view is saved, it will save current zoom/scale, position of the map, active network topology layer, categories (orphan filter) as meta data to it's view. | + | * Nodes can be positioned to your liking by clicking and dragging it. |
| - | Nodes get fixed and auto selected automagically after a drag and drop. In the netbox view you have an option to easily uncheck it again if you want to. | + | * To view information about a node or a link, just click on it. |
| + | * You may zoom the map by using the scroll-wheel on your mouse. | ||
| Line 93: | Line 87: | ||
| === UI options === | === UI options === | ||
| - | * Show topology errors, option to render network topology errors like a link between two netboxes who doesn't run on the same interface speed which might cause network congestion etc | + | * Show topology errors, option to render network topology errors like a link between two netboxes who doesn't run on the same interface speed which might cause network congestion etc |
| == Mouseover options == | == Mouseover options == | ||
| Line 155: | Line 149: | ||
| ===== Troubleshooting ===== | ===== Troubleshooting ===== | ||
| 1. Rendering is horrible slow | 1. Rendering is horrible slow | ||
| - | This kind of problem can be two things (or both). Either cpu-bound problems, or gpu-bound problems. The CPU-part is hard to combat except with filtering out more devices. The GPU-bound problems can cause massive cpu-load also though (fallback to software-rendering). For these kind of problems try various combinations of http://java.sun.com/j2se/1.5.0/docs/guide/2d/flags.html in the java-plugin control-panel (under Runtime-settings). | + | This kind of problem can be two things (or both). Using an old outdated browser with poor javascript performance or having a old computer. (the layout algorithm is quite CPU intensive). |
| + | Chrome is known to have the best javascript engine, so we recommend the use of chrome webbrowser. | ||
netmap.txt · Last modified: 2012/09/18 12:56 by bredal
Page Tools
