6 Jan 2010

Network Weathermap

In my last post I used MRTG to monitor the network equipment. MRTG works great with SNMP, but it only present a graph per network port of the switch/router. So, unless you are the network guy, these graphs do not make much sense.

It would be nice to plug in the data from MRTG into a Network Weathermap of some sort. After searching around and trying different weathermaps, the choice fell on "PHP Network Weathermap". It is actively developed, has good documentation and works great for small/medium-sized networks (the map is hand crafted).

The weathermap can use sources from RRDtool which is the backend used by software like Munin, Cacti and MRTG (if enabled) or from the "original" MRTG (comments on the html-pages generated by MRTG). I'll be using the latter datasource - but I'll be sure to try this weathermap with Munin 1.4 another time.

The configuration for each "map" you create is a text-file. This text file can be created using a (simple) editor or manually hand-crafted. Once you know the (simple) syntax and have an overview of the network, a map is easy to create.

Let's go:

1. First you need MRTG up and running

See my previous blog post.

2. Download and install

  1. Download the latest from here: http://www.network-weathermap.com/download
  2. Unpack under /var/www/html/weathermap
  3. Read the manual if you need additional assistance.

3. Create a new map

The weathermap comes with a (rudimentary) map editor, but I found it much easier to edit the configuration file myself while I consult the reference manual.
The config file for each map consist of three main parts:
  1. Global section
  2. Node section and
  3. Link section (between the nodes)
3.1 Create a global section

In the global section we define the size of the map, title, and so forth. I also define some additional fonts and template for NODE and LINKS.

#
# PHP Weathermap config
#
# Map: Company Name Core Network
#
#

# The size of the map and title
WIDTH 1100
HEIGHT 740
HTMLSTYLE overlib

TITLE Company Name - Core Network Weathermap
TITLEPOS 10 20
TITLEFONT 14

# The output of the map
HTMLOUTPUTFILE company-core-network.html
IMAGEOUTPUTFILE company-core-network.png

# Information about of the newest and oldest data used from MRTG (freshness of the data)
TIMEPOS 10 690 Created: %d %b %Y %H:%M:%S
MAXTIMEPOS 10 710 Newest data: %d %b %Y %H:%M:%S
MINTIMEPOS 10 730 Oldest data: %d %b %Y %H:%M:%S

# We define some additional fonts
FONTDEFINE  8 /var/www/html/weathermap/docs/example/Vera.ttf 8
FONTDEFINE  9 /var/www/html/weathermap/docs/example/VeraBd.ttf 8
FONTDEFINE 10 /var/www/html/weathermap/docs/example/VeraBd.ttf 10
FONTDEFINE 12 /var/www/html/weathermap/docs/example/Vera.ttf 12
FONTDEFINE 14 /var/www/html/weathermap/docs/example/VeraBd.ttf 14

# Here we define the legend
KEYPOS DEFAULT 300 670 Traffic Load
KEYTEXTCOLOR 0 0 0
KEYOUTLINECOLOR 0 0 0
KEYBGCOLOR 255 255 255
KEYFONT 8
KEYSTYLE horizontal

BGCOLOR 255 255 255
TITLECOLOR 0 0 0
TIMECOLOR 0 0 0
SCALE DEFAULT 0 0   192 192 192
SCALE DEFAULT 0 1   255 255 255
SCALE DEFAULT 1 10   140 0 255
SCALE DEFAULT 10 25   32 32 255
SCALE DEFAULT 25 40   0 192 255
SCALE DEFAULT 40 55   0 240 0
SCALE DEFAULT 55 70   240 240 0
SCALE DEFAULT 70 85   255 192 0
SCALE DEFAULT 85 100   255 0 0

SET key_hidezero_DEFAULT 1


# TEMPLATE-only NODEs:
NODE DEFAULT
        MAXVALUE 100
        LABELFONT 9
        LABELOUTLINECOLOR none

# TEMPLATE-only LINKs:
LINK DEFAULT
        BANDWIDTH 1G
        #Use "BWLABEL percent" if you want link utilization in percent
        BWLABEL bits
        WIDTH 3
        BWSTYLE angled
        BWFONT 8
        # NOTE! The next three lines should be on *one* line
        NOTES Current bandwidth utilization (in bits):
           IN {link:this:bandwidth_in:%0.2k} of {link:this:max_bandwidth_in:%0.2k} ({link:this:inpercent:%0.2f}%)
          OUT {link:this:bandwidth_out:%0.2k} of {link:this:max_bandwidth_out:%0.2k} ({link:this:outpercent:%0.2f}%)
        # MRTG graph specific sizes
        OVERLIBWIDTH 500
        OVERLIBHEIGHT 135
        # Arrow comments
        COMMENTFONT 8
        COMMENTSTYLE edge
        COMMENTPOS 50 50

# End of global section

3.2 Next, we define some nodes (switches, routers, servers, ..)

We're plotting both the placement, label, icon and - if any - a "info-link" on each node. The "info-link" is:
  • a link to the MRTG page of the network switch/router, or if its a server,
  • a link to the munin page for that sever.
# regular NODEs:
NODE Internet
        LABEL Internet
        LABELFONT 12
        ICON images/Cisco-network.png
        POSITION 400 100
        NOTES Internet connection - ISP-name
        LABELOUTLINECOLOR none
        LABELBGCOLOR 255 233 170

NODE 10.1.1.1.
        LABEL 10.1.1.1 [1]
        LABELOFFSET S
        INFOURL http://mrtg/10.1.1.1.html
        ICON images/Cisco-Catalyst-access-gw.png
        POSITION 400 400
        NOTES Cisco 6500 [1] - Core Switch

# Additional nodes goes here..
...

3.3 Once all the nodes are defined, we add links between them.

Each link fetches its network utilization from MRTG. So we only need to point each link to the corresponding link in MRTG.

# Internet
LINK 10.1.1.1-Internet
        NODES 10.1.1.1 Internet
        OVERLIBGRAPH mrtg/10.1.1.1/10.1.1.1_241-day.png
 # This gives a nice "mouse-over" graph
        INFOURL http://mrtg/10.1.1.1/10.1.1.1_241.html
 # .. or add the Munin page
        TARGET /var/www/html/mrtg/10.1.1.1/10.1.1.1_241.html
        BANDWIDTH 10G

# Additional links go here..
...

4. We run weathermap to generate the map

  $ cd /var/www/html/weathermap
  $ /weathermap --config configs/company-core-network.conf

You can now point your web browser to the newly created html-file (defined in the global section).

5. The last thing we'll do it to up a cron-job so that the map is updated every five minutes

We let it run one minute after MRTG, so that we get most fresh data:

  1-59/5 * * * * weather /var/www/html/weathermap/weathercron.sh

This script just execute the same commands as in 4).

6. Hints and some nice features

  1. If you do a mouse-over on each link, you'll get the day graph from MRTG in a popup.
  2. If you click on a node, you get either the MRTG page or Munin page for that node.
  3. You get a timestamp for both the oldest and newest data used on the map
  4. If you want additional icons, you can get them from Dia. Dia has a lot of really nice network (Cisco) icons and can export to a large number of formats.


 Examples (with "SET screenshot_mode 1"):