Setup Collectd monitoring for voyage

Setup Collectd monitoring for voyage

Install packages

apt-get install collectd
apt-get install libhtml-entities-numbered-perl
apt-get install libregexp-common-perl libconfig-general-perl
apt-get install rrdtool
apt-get install fcgiwrap
apt-get install libhtml-parser-perl
apt-get install librrds-perl

Install web UI files:

cp -a /usr/share/doc/collectd/examples/collection3 /var/www/cgi-bin/c3

Config nginx to serve the web UI CGI scripts. Reference.

Config collectd

Tune /etc/collectd/collectd.conf. Save the rrd files in tmpfs.

##############################################################################
# File: /etc/collectd/collectd.conf                                          #
#----------------------------------------------------------------------------#
# Global settings for the daemon.                                            #
#                                                                            #
# Tuned for Voyage Linux                                                     #
##############################################################################

FQDNLookup   true
BaseDir     "/var/tmp/collectd"
PIDFile     "/var/run/collectd.pid"
PluginDir   "/usr/lib/collectd"
TypesDB     "/usr/share/collectd/types.db"
Interval     10
ReadThreads  5


# program logging plugin
LoadPlugin syslog

<Plugin syslog>
        LogLevel info
</Plugin>

# data collection plugins
LoadPlugin disk
LoadPlugin interface
LoadPlugin cpu
LoadPlugin memory

# data saving plugin
LoadPlugin rrdtool

<Plugin rrdtool>
        DataDir "/var/tmp/collectd/rrd"
</Plugin>

<Plugin disk>
        Disk "hda"
        Disk "sda"
        IgnoreSelected false
</Plugin>

<Plugin interface>
        Interface "eth0"
        Interface "br0"
        IgnoreSelected false
</Plugin>

Custom dashboard page

Put the following dashboard.html file in /var/www/cgi-bin/c3/:

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 - voyage.example.com
        </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="./share/shortcut-icon.png" type="image/png" />

        <link rel="stylesheet" href="./share/style.css" type="text/css" />
        <script type="text/javascript" src="./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>CPU
                </TH>
                <TH>Memory
                </TH>
            </TR>
            <TR><TD>
	          <div class="graph_canvas">
	            <div class="graph_float">
	              <img id="load" class="graph_image"
	                alt="A graph"
	                src="./bin/graph.cgi?hostname=voyage.example.com;plugin=cpu;plugin_instance=0;type=cpu;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="./bin/graph.cgi?hostname=voyage.example.com;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>Interface
                </TH>
		<TH>Disk
		</TH>
            </TR>
            <TR><TD>
	          <div class="graph_canvas">

	            <div class="graph_float">
	              <img id="eth0" class="graph_image"
	                alt="A graph"
	                src="./bin/graph.cgi?hostname=voyage.example.com;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="hda" class="graph_image"
	                alt="A graph"
	                src="./bin/graph.cgi?hostname=voyage.example.com;plugin=disk;type=disk_octets;plugin_instance=hda;begin=-3600" />
	              <div class="controls zoom">

	                <div title="Earlier"
	                  onclick="nav_move_earlier ('hda');">&#x2190;</div>
	                <div title="Zoom out"
	                  onclick="nav_zoom_out ('hda');">-</div>
	                <div title="Zoom in"
	                  onclick="nav_zoom_in ('hda');">+</div>
	
	                <div title="Later"
	                  onclick="nav_move_later ('hda');">&#x2192;</div>
	              </div>
	              <div class="controls preset">
	                <div title="Show current hour"
	                  onclick="nav_time_reset ('hda', 3600);">H</div>

	                <div title="Show current day"
	                  onclick="nav_time_reset ('hda', 86400);">D</div>
	                <div title="Show current week"
	                  onclick="nav_time_reset ('hda', 7 * 86400);">W</div>
	                <div title="Show current month"
	                  onclick="nav_time_reset ('hda', 31 * 86400);">M</div>
	
	                <div title="Show current year"
	                  onclick="nav_time_reset ('hda', 366 * 86400);">Y</div>
	                <div title="Set all images to this timespan"
	                  onclick="nav_set_reference ('hda');">!</div>
	              </div>

	            </div>
	          </div>
			  </TD>    
            </TR>
        </TABLE>
    </BODY>
</HTML>

Inside the share folder, make a copy of navigate.js as navigate-db.js. Follow this instruction to modify the nav_init() function in navigate-db.js.

voyage/setup_collectd_monitoring.txt · Last modified: 2011-09-29 09:21 by admin

Back to top