Mon.cgi Project Page

RSS Feed Available - Project News Feed RSS Feed Available - Project Release Feed

Support This Project

Mon.cgi > Documentation

Documentation

Mon.cgi CSS Guide

Mon.cgi CSS Guide

Ryan Clark

$Id: index.html,v 1.1 2004/12/31 01:35:36 ryan Exp $

Revision History
Revision 1.1August 08, 2004RC

Created Document

Revision 1.2September 03, 2004RC

Updated CSS tags

Changed chapter layouts

Revision 1.3September 04, 2004RC

Added Appendix

Reworked Chapter layout again

Abstract

Mon.cgi CSS Documentation


Chapter 1. Overview

1. Mon.cgi

Mon.cgi is the front end interface for Mon that is viewable via HTTP. I've updated the existing mon.cgi to now have CSS support, to help clean up the look and feel of the interface. This mon.cgi is from the mon-1.0.0pre4 release from Jim Trocki.

Chapter 2. Installation

I have reworked the mon.cgi.cf configuration file to be included within the configuration file. Also, setting the Server Status colours are removed from the configuration and included within the CSS file.

1. Setup

The mon.cgi package contains 3 files. Below is instructions on how to configure at install each file.

1.1. mon.cgi

The default location for mon.cgi is your /cgi-bin path on your web server.

1.2. mon.cgi.cf

By default the mon.cgi.cf file location should be in /etc/mon where the base config directory is set.

Here is the default config file that is included with mon.cgi:

#
# The mon.cgi config file.
# Format:
#        key = value
#
# Blank lines and lines that begin with '#' are ignored.
#
# Both key names and values are case sensitive.
#
# This file comes with the mon.cgi distribution and contains all of the
# valid key/value pairs that mon.cgi will accept.
#
# The latest version of mon.cgi is always available at:
#     http://www.ryanclark.org/files/mon/
#
# If there are errors in your config file, mon.cgi will stop parsing it,
# and will print messages to STDERR, which should end up in your web
# server's error log.
#
# $Id: index.html,v 1.1 2004/12/31 01:35:36 ryan Exp $
#

# Your organization (what you want printed on the top of each page)
organization = Mon.cgi CSS Support

# Contact email for mon administrator at your site
monadmin = rlclark@gmail.com

#Company or mon logo (URL path)
logo = your_logo.png

# URL to go to when you click on the logo image
logo_link = http://www.kernel.org/pub/software/admin/mon/html/

# Seconds between page reload
reload_time = 180

# Where to run mon (host,port)
monhost = localhost
monport = 2583

# Set this to anything other than 'Y' or 'yes' to turn off authentication
# (HINT: authentication is a *good* thing)
must_login = yes

# Application secret. Set this to something long and unguessable.
app_secret = LKAHETOI#KJHJKSHDOWOIUW^*((985i2hkljlkjfdhglkdhfgdlkfjghldksfjhg98 34tklh  qrthq3 i3lu4
KLHKLJHKLJH ncxmvn owow y YnneO87210502673kn6l3

# Default username and password (only used if must_login is set)
default_username = readonly
default_password = public

# Idle time, in seconds, until login cookie is invalidated. Note that if
# ( login_expire_time < reload_time ) you will not be able to "idle".
login_expire_time = 900

# Whether or not to untaint HTML in ack msgs using HTML::Entities (recommended)
untaint_ack_msgs = yes

# The name of the cookie set by mon.cgi and its path
cookie_name = mon-cookie
cookie_path = /

# CSS Sheet (relative to your webroot)
css_style = /moncgi.css

# Maximum number of downtime events to show, per page
dtlog_max_failures_per_page = 100

# Watch keywords will show only the specified hostgroups by default.
# Matching is by regexp.
# e.g., show the watch whose name is www
#watch = www
# e.g., show any watches whose names start with gw-
#watch = gw-.*

# Set show_watch_strict to 'yes' if you want to be sure that users only
# information about the hostgroups that they are authorized to
# view. If show_watch_strict is set to 1, as far as your GUI users
# will know, there is nothing else running on the mon instance
# except for their hostgroups, *even if those users know the names
# of other hostgroups on your mon server*.
#
# Set to show_watch_strict to 'no' to show only the defined watch
# groups by default, but allow users to see information about
# others as well.
show_watch_strict = no

1.3. moncgi.css

The default location for the moncgi.css file is in your web root on your webserver.

Here are the following tags/classes that have CSS sheet applied to them:

Table 2.1. CSS Tags

TagTypeDescription
bodytextGeneral styling of text in the interface.
tabletableGlobal settings for all tables.
table#logid:tableSettings for only the Log ID type table.
.hostsclass:textText for the hostgroups and their services
.timeclass:textFor the Last Checked and Est. Last Check time.
.navigationclass:textFor the text on the top and bottom navigation bars.
.detailsclass:textUnused at this time.
h1textThe main heading for all pages.
h2textThe top heading for the centre body tables.
h3textStatus table text (IE: Disabled Hosts/ Watches/ Svcs).
ptextSurrounding text on the top and bottom of the status pages.
atextDefine base colour for links.
a:linktextGeneral link styling.
a:visitedtextVisited link styling.
a:hovertextHover link styling.
a:activetextActive link styling.
a imgimageImage properties (IE: border)
formformGeneral form styling.
input, textareaform, textGeneral input/textarea styling.
td#uncheckedid:tableLegend table cell for unchecked.
td#greenlightid:tableLegend table cell for good.
td#yellowlightid:tableLegend table cell for alerts not sent.
td#redlightid:tableLegend table cell for alerts sent.
td#disabledid:tableLegend table cell for disabled.
.uncheckedclass:textText coloured for unchecked.
.greenlightclass:textText coloured for good.
.yellowlightclass:textText coloured for alerts not sent.
.redlightclass:textText coloured for sent alerts.
.disabledclass:textText coloured for disabled.

Here is the default CSS sheet for mon.cgi to use:

/* ----------------------------------------------
Default CSS Theme for Mon.cgi - http://www.kernel.org/pub/software/admin/mon/html/
By Ryan Clark - http://www.ryanclark.org
v1.0 - August 2004 - Validates as CSS3
$Header: /home/cvs/cos/rep/sites/org/ryanclark/www/files/mon.cgi/docs/index.html,v 1.1 2004/12/31 01:35:36 ryan Exp $
---------------------------------------------- */
/* ----------------------------------------------
General page layout
---------------------------------------------- */
body {
	margin : 0;
	padding : 0;
	background : #eee;
	color : #111;
	font-size: 80%;
	font-family: 'Lucida Grande', Verdana, Geneva, Lucida, Helvetica, Arial, sans-serif;
}

table {
	color: #404040;
	background-color: #fafafa;
	border: 1px #999999 solid;
	border-collapse: collapse;
	border-spacing: 0px;
	margin-top: 0px;
}

table#log {
	font-size: 80%;
}

.hosts {
        font-family: 'Lucida Grande', Verdana, Geneva, Lucida, Helvetica, Arial, sans-serif;
        font-weight: bold;
        margin: 10px 0 10px 0;
        border-bottom : 1px #eee;
}

.time {
        font: 85%/125% 'Lucida Grande', Verdana, Geneva, Lucida, Helvetica, Arial, sans-serif;
        letter-spacing: -1px;
}


.navigation {
        font: 85%/125% 'Lucida Grande', Verdana, Geneva, Lucida, Helvetica, Arial, sans-serif;
        letter-spacing: -1px;
}

.details {
        clear: both;
        margin: 15px 0 0 0;
        color: #111;
        font-size: 100%;
        font-weight : bold;
        text-align: center;
}

/* ----------------------------------------------
Legend Colour Scheme
---------------------------------------------- */
td#unchecked {
	background-color: #000033;
}

td#greenlight {
        background-color: #009900;
}

td#yellowlight {
        background-color: #FF9933;
}

td#redlight {
        background-color: red;
}

td#disabled {
        background-color: #999999;
}

.unchecked {
        color: #000033;
}

.greenlight {
        color: #009900;
}

.yellowlight {
        color: #FF9933;
}

.redlight {
        color: red;
}

.disabled {
        color: #999999;
}


/* ----------------------------------------------
Basic XHTML styling
---------------------------------------------- */

h1 {
	color: #666;
	font-size: 200%;
	font-family: 'Lucida Grande', Verdana, Geneva, Lucida, Helvetica, Arial, sans-serif;
	font-weight : bold;
	text-align : left;
}

h2 {
	font-size: 120%;
	font-weight: bold;
}

h3{
	font-size: 110%;
}

p, li, .feedback {
	font: 85%/125% 'Lucida Grande', Verdana, Geneva, Lucida, Helvetica, Arial, sans-serif;
	letter-spacing: -1px;
}

/* ----------------------------------------------
Links styling
Remember LoVe-HAte rule
---------------------------------------------- */
a {
	color: #036;
    text-decoration: none;
}

a:link {
	font-weight: bold;
}

a:visited {
	font-weight: bold;
}

a:hover {
	color: #900;
    text-decoration: underline;
}

a:active {
	text-decoration: underline overline;
}

a img {
	border: none;
}
	

/* ----------------------------------------------
Form styling
---------------------------------------------- */
form {
	margin: 0;
	padding: 0;
}
	
input, textarea {
	background-color: #eee;
	border: 1px solid #aaa;
	font-size:85%; 
}

Chapter 3. Appendix

1. File Download

The latest version of mon.cgi is always avaible at http://www.ryanclark.org/files/index.php?dir=mon.cgi/.

2. CVS

Here are the exact locations of the CVS tree's for each file.

2.2. mon.cgi.cf

3. Demo

A demo of the mon.cgi interface is avaiable at http://www.ryanclark.org/cgi-bin/mon.cgi