Creating simple dashboard like MRTG
- Sample dashboard.html
- Create custom navigate.js

Creating simple dashboard like MRTG

Create a dashboard page using the components of the collection3 web interface.

URL: http://<server_name>/c3/dashboard.html

Auto refresh page every 5 min (300 seconds):

<META HTTP-EQUIV="Refresh" CONTENT="300">

Images created by calling the collection3 CGI, drawn on the fly, starting 1 hour to now: begin=-3600 in the img src url.

Change graph period like the collection3 web interface, using a modified navigate.js script.

Sample dashboard.html

dashboard.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <HEAD>
        <TITLE>System Statistics Dashboard - localhost
        </TITLE>
        <META HTTP-EQUIV="Refresh" CONTENT="300">
        <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
        <META HTTP-EQUIV="Cache-Control" content="no-cache">
        <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
        <link rel="icon" href="/c3/share/shortcut-icon.png" type="image/png" />
        <link rel="stylesheet" href="/c3/share/style.css" type="text/css" />
        <script type="text/javascript" src="/c3/share/navigate-db.js"></script>
    </HEAD>
    <BODY onload="nav_init (0, 0);"><H1>System Statistics Dashboard</H1>
        <H3 id="lastupdate">Last Update:  
<script type="text/javascript">
var d = new Date();
document.write(d); 
</script> </H3>  
        <HR>
        <TABLE>
            <TR>
                <TH>Load - Hourly
                </TH>
                <TH>Memory - Hourly
                </TH>
            </TR>
            <TR><TD>
	          <div class="graph_canvas">
	            <div class="graph_float">
	              <img id="load" class="graph_image"
	                alt="A graph"
	                src="/c3/bin/graph.cgi?hostname=localhost;plugin=load;type=load;begin=-3600" />
	              <div class="controls zoom">
	                <div title="Earlier"
	                  onclick="nav_move_earlier ('load');">&#x2190;</div>
	                <div title="Zoom out"
	                  onclick="nav_zoom_out ('load');">-</div>
	                <div title="Zoom in"
	                  onclick="nav_zoom_in ('load');">+</div>
	
	                <div title="Later"
	                  onclick="nav_move_later ('load');">&#x2192;</div>
	              </div>
	              <div class="controls preset">
	                <div title="Show current hour"
	                  onclick="nav_time_reset ('load', 3600);">H</div>
	                <div title="Show current day"
	                  onclick="nav_time_reset ('load', 86400);">D</div>
	                <div title="Show current week"
	                  onclick="nav_time_reset ('load', 7 * 86400);">W</div>
	                <div title="Show current month"
	                  onclick="nav_time_reset ('load', 31 * 86400);">M</div>
	
	                <div title="Show current year"
	                  onclick="nav_time_reset ('load', 366 * 86400);">Y</div>
	                <div title="Set all images to this timespan"
	                  onclick="nav_set_reference ('load');">!</div>
	              </div>
	            </div>
	          </div>
        </TD><TD>
	          <div class="graph_canvas">
	            <div class="graph_float">
	              <img id="memory" class="graph_image"
	                alt="A graph"
	                src="/c3/bin/graph.cgi?hostname=localhost;plugin=memory;type=memory;begin=-3600" />
	              <div class="controls zoom">
	                <div title="Earlier"
	                  onclick="nav_move_earlier ('memory');">&#x2190;</div>
	                <div title="Zoom out"
	                  onclick="nav_zoom_out ('memory');">-</div>
	                <div title="Zoom in"
	                  onclick="nav_zoom_in ('memory');">+</div>
	
	                <div title="Later"
	                  onclick="nav_move_later ('memory');">&#x2192;</div>
	              </div>
	              <div class="controls preset">
	                <div title="Show current hour"
	                  onclick="nav_time_reset ('memory', 3600);">H</div>
	                <div title="Show current day"
	                  onclick="nav_time_reset ('memory', 86400);">D</div>
	                <div title="Show current week"
	                  onclick="nav_time_reset ('memory', 7 * 86400);">W</div>
	                <div title="Show current month"
	                  onclick="nav_time_reset ('memory', 31 * 86400);">M</div>
	
	                <div title="Show current year"
	                  onclick="nav_time_reset ('memory', 366 * 86400);">Y</div>
	                <div title="Set all images to this timespan"
	                  onclick="nav_set_reference ('memory');">!</div>
	              </div>
	            </div>
	          </div>                            
		</TD></TR>
        </TABLE>
        <HR>
        <TABLE>
            <TR>
                <TH colspan="2">Interface - Hourly
                </TH>
            </TR>
            <TR><TD>
	          <div class="graph_canvas">
	            <div class="graph_float">
	              <img id="eth0" class="graph_image"
	                alt="A graph"
	                src="/c3/bin/graph.cgi?hostname=localhost;plugin=interface;type=if_octets;type_instance=eth0;begin=-3600" />
	              <div class="controls zoom">
	                <div title="Earlier"
	                  onclick="nav_move_earlier ('eth0');">&#x2190;</div>
	                <div title="Zoom out"
	                  onclick="nav_zoom_out ('eth0');">-</div>
	                <div title="Zoom in"
	                  onclick="nav_zoom_in ('eth0');">+</div>
	
	                <div title="Later"
	                  onclick="nav_move_later ('eth0');">&#x2192;</div>
	              </div>
	              <div class="controls preset">
	                <div title="Show current hour"
	                  onclick="nav_time_reset ('eth0', 3600);">H</div>
	                <div title="Show current day"
	                  onclick="nav_time_reset ('eth0', 86400);">D</div>
	                <div title="Show current week"
	                  onclick="nav_time_reset ('eth0', 7 * 86400);">W</div>
	                <div title="Show current month"
	                  onclick="nav_time_reset ('eth0', 31 * 86400);">M</div>
	
	                <div title="Show current year"
	                  onclick="nav_time_reset ('eth0', 366 * 86400);">Y</div>
	                <div title="Set all images to this timespan"
	                  onclick="nav_set_reference ('eth0');">!</div>
	              </div>
	            </div>
	          </div>               
                    
					</TD><TD>
 	          <div class="graph_canvas">
	            <div class="graph_float">
	              <img id="eth1" class="graph_image"
	                alt="A graph"
	                src="/c3/bin/graph.cgi?hostname=localhost;plugin=interface;type=if_octets;type_instance=eth1;begin=-3600" />
	              <div class="controls zoom">
	                <div title="Earlier"
	                  onclick="nav_move_earlier ('eth1');">&#x2190;</div>
	                <div title="Zoom out"
	                  onclick="nav_zoom_out ('eth1');">-</div>
	                <div title="Zoom in"
	                  onclick="nav_zoom_in ('eth1');">+</div>
	
	                <div title="Later"
	                  onclick="nav_move_later ('eth1');">&#x2192;</div>
	              </div>
	              <div class="controls preset">
	                <div title="Show current hour"
	                  onclick="nav_time_reset ('eth1', 3600);">H</div>
	                <div title="Show current day"
	                  onclick="nav_time_reset ('eth1', 86400);">D</div>
	                <div title="Show current week"
	                  onclick="nav_time_reset ('eth1', 7 * 86400);">W</div>
	                <div title="Show current month"
	                  onclick="nav_time_reset ('eth1', 31 * 86400);">M</div>
	
	                <div title="Show current year"
	                  onclick="nav_time_reset ('eth1', 366 * 86400);">Y</div>
	                <div title="Set all images to this timespan"
	                  onclick="nav_set_reference ('eth1');">!</div>
	              </div>
	            </div>
	          </div>
			  </TD>    
            </TR>
        </TABLE>
    </BODY>
</HTML>

Create custom navigate.js

The navigate-db.js is the same as the stock navigate.js file, except the nav_init() function is modified as:

function nav_init (time_begin, time_end)
{
  var all_images;
  var i;

  all_images = document.getElementsByTagName ("img");
  for (i = 0; i < all_images.length; i++)
  {
    if (all_images[i].className != "graph_image")
      continue;

	if (time_end == 0) {
		time_end = ((new Date ()).getTime () / 1000);
		time_begin = time_end - 3600; 
	}

    all_images[i].navTimeBegin = new Number (time_begin);
    all_images[i].navTimeEnd   = new Number (time_end);

    all_images[i].navBaseURL = all_images[i].src.replace (/;(begin|end)=[^;]*/g, '');

    if (all_images[i].addEventListener) /* Mozilla */
    {
      all_images[i].addEventListener ('dblclick', nav_handle_dblclick,
          false /* == bubbling */);
      all_images[i].addEventListener ('DOMMouseScroll', nav_handle_wheel,
          false /* == bubbling */);
    }
    else
    {
      all_images[i].ondblclick = nav_handle_dblclick;
      all_images[i].onmousewheel = nav_handle_wheel;
    }
  }

  return (true);
} /* nav_init */

collectd/creating_simple_dashboard_like_mrtg.txt · Last modified: 2011-09-28 16:46 by admin

Back to top