Prettier fixings (front page, boxes stylesheet)

git-svn-id: http://www.observium.org/svn/observer/trunk@215 61d68cd4-352d-0410-923a-c4978735b2b8
This commit is contained in:
Adam Amstrong
2008-04-01 01:19:59 +00:00
parent 779fc50e76
commit 28e8756d03
5 changed files with 262 additions and 49 deletions

9
README
View File

@ -20,6 +20,15 @@ Please see http://www.project-observer.org.
Changelog Changelog
--------- ---------
Pre-Release 0.3.3
Much prettier front page.
Release 0.3.2.1 ( 27th March 2008 )
Minor bugfix to interface discovery engine.
Release 0.3.2 ( 26th March 2008 ) Release 0.3.2 ( 26th March 2008 )
Added BGP peer detection and watching Added BGP peer detection and watching

View File

@ -1,3 +1,152 @@
.content-box{display:block}
.content-box *{
display:block;
height:1px;
overflow:hidden;
font-size:.01em;
background:#e5e5e5}
.content-box1{
margin-left:3px;
margin-right:3px;
padding-left:1px;
padding-right:1px;
border-left:1px solid #f3f3f3;
border-right:1px solid #f3f3f3;
background:#ebebeb}
.content-box2{
margin-left:1px;
margin-right:1px;
padding-right:1px;
padding-left:1px;
border-left:1px solid #fcfcfc;
border-right:1px solid #fcfcfc;
background:#e9e9e9}
.content-box3{
margin-left:1px;
margin-right:1px;
border-left:1px solid #e9e9e9;
border-right:1px solid #e9e9e9;}
.content-box4{
border-left:1px solid #f3f3f3;
border-right:1px solid #f3f3f3}
.content-box5{
border-left:1px solid #ebebeb;
border-right:1px solid #ebebeb}
.content-boxfg{
background:#e5e5e5}
.box-info{display:block}
.box-info *{
display:block;
height:1px;
overflow:hidden;
font-size:.01em;
background:#aaffaa}
.box-info1{
margin-left:3px;
margin-right:3px;
padding-left:1px;
padding-right:1px;
border-left:1px solid #cbf0cb;
border-right:1px solid #cbf0cb;
background:#b8f8b8}
.box-info2{
margin-left:1px;
margin-right:1px;
padding-right:1px;
padding-left:1px;
border-left:1px solid #dfe7df;
border-right:1px solid #dfe7df;
background:#b5fab5}
.box-info3{
margin-left:1px;
margin-right:1px;
border-left:1px solid #b5fab5;
border-right:1px solid #b5fab5;}
.box-info4{
border-left:1px solid #cbf0cb;
border-right:1px solid #cbf0cb}
.box-info5{
border-left:1px solid #b8f8b8;
border-right:1px solid #b8f8b8}
.box-infofg{
background:#aaffaa}
.box-warn{display:block}
.box-warn *{
display:block;
height:1px;
overflow:hidden;
font-size:.01em;
background:#AAAAFF}
.box-warn1{
margin-left:3px;
margin-right:3px;
padding-left:1px;
padding-right:1px;
border-left:1px solid #dadaff;
border-right:1px solid #dadaff;
background:#bfbfff}
.box-warn2{
margin-left:1px;
margin-right:1px;
padding-right:1px;
padding-left:1px;
border-left:1px solid #f6f6ff;
border-right:1px solid #f6f6ff;
background:#babaff}
.box-warn3{
margin-left:1px;
margin-right:1px;
border-left:1px solid #babaff;
border-right:1px solid #babaff;}
.box-warn4{
border-left:1px solid #dadaff;
border-right:1px solid #dadaff}
.box-warn5{
border-left:1px solid #bfbfff;
border-right:1px solid #bfbfff}
.box-warnfg{
background:#AAAAFF}
.box-alert{display:block}
.box-alert *{
display:block;
height:1px;
overflow:hidden;
font-size:.01em;
background:#FFAAAA}
.box-alert1{
margin-left:3px;
margin-right:3px;
padding-left:1px;
padding-right:1px;
border-left:1px solid #ffdada;
border-right:1px solid #ffdada;
background:#ffbfbf}
.box-alert2{
margin-left:1px;
margin-right:1px;
padding-right:1px;
padding-left:1px;
border-left:1px solid #fff6f6;
border-right:1px solid #fff6f6;
background:#ffbaba}
.box-alert3{
margin-left:1px;
margin-right:1px;
border-left:1px solid #ffbaba;
border-right:1px solid #ffbaba;}
.box-alert4{
border-left:1px solid #ffdada;
border-right:1px solid #ffdada}
.box-alert5{
border-left:1px solid #ffbfbf;
border-right:1px solid #ffbfbf}
.box-alertfg{
background:#FFAAAA}
img { border: 0; } img { border: 0; }
A { text-decoration: none; } A { text-decoration: none; }
@ -615,7 +764,7 @@ input {
#top{ #top{
height:17px; height:17px;
padding:2px 21px 0px 21px; padding:2px 21px 0px 21px;
background:#163275; # background:#163275;
font:normal 11px arial; font:normal 11px arial;
color: white; color: white;
} }

View File

@ -14,30 +14,26 @@ if($bg == $list_colour_a) { $bg = $list_colour_b; } else { $bg=$list_colour_a; }
echo("<tr style=\"background-color: $bg\"> echo("<tr style=\"background-color: $bg\">
<td width=0></td> <td width=0></td>
<td class=syslog width=180> <td class=syslog width=160>
" . $entry['datetime'] . " " . $entry['datetime'] . "
</td>"); </td>");
if(!$_GET[id] && !$overview) { if(!$_GET[id] && !$overview) {
$dev['device_id'] = $entry['host']; $dev['device_id'] = $entry['host'];
$dev['hostname'] = $hostname; $dev['hostname'] = $hostname;
echo("<td class=list-bold width=250> echo("<td class=list-bold width=150>
" . generatedevicelink($dev) . " " . generatedevicelink($dev, shorthost($dev['hostname'])) . "
</td>"); </td>");
} }
echo("<td class=list-bold width=175>"); echo("<td class=syslog>");
if($interface) { if($interface) {
$if['interface_id'] = $entry['interface']; $if['interface_id'] = $entry['interface'];
$if['ifDescr'] = $interface; $if['ifDescr'] = $interface;
echo(generateiflink($if)); echo(generateiflink($if));
} }
echo("</td> echo(" " . htmlspecialchars($entry['message']) . "
<td width=20>$icon</td>
<td class=syslog>
" . htmlspecialchars($entry['message']) . "
</td> </td>
<td></td>
</tr>"); </tr>");

View File

@ -50,7 +50,7 @@ function popUp(URL) {
<script type="text/javascript" src="js/overlib.js"></script> <script type="text/javascript" src="js/overlib.js"></script>
<body topmargin=0 leftmargin=0 rightmargin=0 bottommargin=0> <body topmargin=0 leftmargin=0 rightmargin=0 bottommargin=0>
<div id="center"> <div id="center">
<div id="top"> <div id="top" style='background: <?php echo($config['header_color']); ?>;'>
<table cellpadding=0 cellspacing=0 width=100%> <table cellpadding=0 cellspacing=0 width=100%>
<tr> <tr>
<td align=left></td> <td align=left></td>

View File

@ -1,11 +1,27 @@
<?php
<table border=0 cellpadding=10 cellspacing=10 width=100%> function generate_front_box ($type, $content) {
<tr> echo("<div style='float: left; padding: 5px; width: 135px; margin: 0px;'>
<td bgcolor=#e5e5e5 valign=top> <b class='box-".$type."'>
<?php <b class='box-".$type."1'><b></b></b>
# <table width=100% border=0><tr><td><div style="margin-bottom: 5px; font-size: 18px; font-weight: bold;">Devices with Alerts</div></td><td width=35 align=center><div class=tablehead>Host</div></td><td align=center width=35><div class=tablehead>Int</div></td><td align=center width=35><div class=tablehead>Srv</div></tr> <b class='box-".$type."2'><b></b></b>
?> <b class='box-".$type."3'></b>
<?php <b class='box-".$type."4'></b>
<b class='box-".$type."5'></b></b>
<div class='box-".$type."fg' style='height: 90px;'>
".$content."
</div>
<b class='box-".$type."'>
<b class='box-".$type."5'></b>
<b class='box-".$type."4'></b>
<b class='box-".$type."3'></b>
<b class='box-".$type."2'><b></b></b>
<b class='box-".$type."1'><b></b></b></b>
</div>");
}
echo("<div style='width: 875px; float: left; padding: 3px 10px; background: #fff;'>");
$nodes = array(); $nodes = array();
@ -22,7 +38,6 @@ while($device = mysql_fetch_array($sql)){
$i++; $i++;
} }
if(!$already) { $nodes[] = $device['device_id']; } if(!$already) { $nodes[] = $device['device_id']; }
}
$sql = mysql_query("SELECT * FROM `devices` WHERE `status` = '0' AND `ignore` = '0'"); $sql = mysql_query("SELECT * FROM `devices` WHERE `status` = '0' AND `ignore` = '0'");
@ -34,77 +49,111 @@ while($device = mysql_fetch_array($sql)){
<span class=body-date-1>".truncate($device['location'], 20)."</span> <span class=body-date-1>".truncate($device['location'], 20)."</span>
</center></div>"); </center></div>");
} }
$sql = mysql_query("SELECT * FROM `interfaces` AS I, `devices` AS D WHERE I.device_id = D.device_id AND ifOperStatus = 'down' AND ifAdminStatus = 'up' AND D.ignore = '0' AND I.ignore = '0'"); $sql = mysql_query("SELECT * FROM `interfaces` AS I, `devices` AS D WHERE I.device_id = D.device_id AND ifOperStatus = 'down' AND ifAdminStatus = 'up' AND D.ignore = '0' AND I.ignore = '0'");
while($interface = mysql_fetch_array($sql)){ while($interface = mysql_fetch_array($sql)){
echo("<div style='border: solid 2px #D0D0D0; float: left; padding: 5px; width: 120px; height: 90px; background: #ffddaa; margin: 4px;'> generate_front_box("warn", "<center><strong>".generatedevicelink($interface, shorthost($interface['hostname']))."</strong><br />
<center><strong>".generatedevicelink($interface, shorthost($interface['hostname']))."</strong><br /> <span style='font-size: 14px; font-weight: bold; margin: 5px; color: #c00;'>Port Down</span>
<span style='font-size: 14px; font-weight: bold; margin: 5px; color: #c00;'>Port Down</span>
<strong>".generateiflink($interface, makeshortif($interface['ifDescr']))."</strong> <br /> <strong>".generateiflink($interface, makeshortif($interface['ifDescr']))."</strong> <br />
<span class=body-date-1>".truncate($interface['ifAlias'], 20)."</span> <span class=body-date-1>".truncate($interface['ifAlias'], 20)."</span>
</center></div>"); </center>");
} }
$sql = mysql_query("SELECT * FROM `services` AS S, `devices` AS D WHERE S.service_host = D.device_id AND service_status = 'down' AND D.ignore = '0' AND S.service_ignore = '0'"); $sql = mysql_query("SELECT * FROM `services` AS S, `devices` AS D WHERE S.service_host = D.device_id AND service_status = 'down' AND D.ignore = '0' AND S.service_ignore = '0'");
while($service = mysql_fetch_array($sql)){ while($service = mysql_fetch_array($sql)){
echo("<div style='border: solid 2px #D0D0D0; float: left; padding: 5px; width: 120px; height: 90px; background: #ffddaa; margin: 4px;'>
<center><strong>".generatedevicelink($service, shorthost($service['hostname']))."</strong><br /> generate_front_box("alert", "<center><strong>".generatedevicelink($service, shorthost($service['hostname']))."</strong><br />
<span style='font-size: 14px; font-weight: bold; margin: 5px; color: #c00;'>Service Down</span> <span style='font-size: 14px; font-weight: bold; margin: 5px; color: #c00;'>Service Down</span>
<strong>".$service['service_type']."</strong><br /> <strong>".$service['service_type']."</strong><br />
<span class=body-date-1>".truncate($interface['ifAlias'], 20)."</span> <span class=body-date-1>".truncate($interface['ifAlias'], 20)."</span>
</center></div>"); </center>");
} }
$sql = mysql_query("SELECT * FROM `devices` AS D, bgpPeers AS B WHERE bgpPeerState != 'established' AND B.device_id = D.device_id"); $sql = mysql_query("SELECT * FROM `devices` AS D, bgpPeers AS B WHERE bgpPeerState != 'established' AND B.device_id = D.device_id");
while($peer = mysql_fetch_array($sql)){ while($peer = mysql_fetch_array($sql)){
echo("<div style='border: solid 2px #d0D0D0; float: left; padding: 5px; width: 120px; height: 90px; background: #ffddaa; margin: 4px;'> generate_front_box("alert", "<center><strong>".generatedevicelink($peer, shorthost($peer['hostname']))."</strong><br />
<center><strong>".generatedevicelink($peer, shorthost($peer['hostname']))."</strong><br />
<span style='font-size: 14px; font-weight: bold; margin: 5px; color: #c00;'>BGP Down</span> <span style='font-size: 14px; font-weight: bold; margin: 5px; color: #c00;'>BGP Down</span>
<strong>".$peer['bgpPeerIdentifier']."</strong> <br /> <strong>".$peer['bgpPeerIdentifier']."</strong> <br />
<span class=body-date-1>AS".$peer['bgpPeerRemoteAs']." ".truncate($peer['astext'], 10)."</span> <span class=body-date-1>AS".$peer['bgpPeerRemoteAs']." ".truncate($peer['astext'], 10)."</span>
</center></div>"); </center>");
} }
$sql = mysql_query("SELECT * FROM `devices` AS D, devices_attribs AS A WHERE A.device_id = D.device_id AND A.attrib_type = 'uptime' AND A.attrib_value < '84600'"); $sql = mysql_query("SELECT * FROM `devices` AS D, devices_attribs AS A WHERE A.device_id = D.device_id AND A.attrib_type = 'uptime' AND A.attrib_value < '84600'");
while($device = mysql_fetch_array($sql)){ while($device = mysql_fetch_array($sql)){
echo("<div style='border: solid 2px #d0D0D0; float: left; padding: 5px; width: 120px; height: 90px; background: #ddffdd; margin: 4px;'>
<center><strong>".generatedevicelink($device, shorthost($device['hostname']))."</strong><br /> generate_front_box("info", "<center><strong>".generatedevicelink($device, shorthost($device['hostname']))."</strong><br />
<span style='font-size: 14px; font-weight: bold; margin: 5px; color: #090;'>Device<br />Rebooted</span><br /> <span style='font-size: 14px; font-weight: bold; margin: 5px; color: #090;'>Device<br />Rebooted</span><br />
<span class=body-date-1>".formatUptime($device['attrib_value'])."</span> <span class=body-date-1>".formatUptime($device['attrib_value'])."</span>
</center></div>"); </center>");
} }
if($config['frontpage_display'] == 'syslog') {
echo(" ## Open Syslog Div
echo("<div style='margin: 4px; clear: both; padding: 5px;'>
<h3>Recent Syslog Messages</h3>
");
<div style='clear: both;'>$errorboxes</div> <div style='margin: 4px; clear: both;'> $sql = "SELECT *, DATE_FORMAT(datetime, '%D %b %T') AS date from syslog ORDER BY datetime DESC LIMIT 20";
$query = mysql_query($sql);
echo("<table cellspacing=0 cellpadding=2 width=100%>");
while($entry = mysql_fetch_array($query)) { include("includes/print-syslog.inc"); }
echo("</table>");
<h3>Recent Syslog Messages</h3> echo("</div>"); ## Close Syslog Div
"); } else {
## Open eventlog Div
echo("<div style='margin: 4px; clear: both; padding: 5px;'>
<h3>Recent Eventlog Entries</h3>
");
if($_SESSION['userlevel'] == '10') {
$query = "SELECT *,DATE_FORMAT(datetime, '%D %b %T') as humandate FROM `eventlog` ORDER BY `datetime` DESC LIMIT 0,15";
} else {
$query = "SELECT *,DATE_FORMAT(datetime, '%D %b %T') as humandate FROM `eventlog` AS E, devices_perms AS P WHERE E.host =
P.device_id AND P.user_id = " . $_SESSION['user_id'] . " ORDER BY `datetime` DESC LIMIT 0,15";
}
$data = mysql_query($query);
echo("<table cellspacing=0 cellpadding=1 width=100%>");
while($entry = mysql_fetch_array($data)) {
include("includes/print-event.inc");
}
$sql = "SELECT *, DATE_FORMAT(datetime, '%D %b %T') AS date from syslog ORDER BY datetime DESC LIMIT 20";
$query = mysql_query($sql);
echo("<table cellspacing=0 cellpadding=2 width=100%>");
while($entry = mysql_fetch_array($query)) { include("includes/print-syslog.inc"); }
echo("</table>"); echo("</table>");
echo("</div>"); ## Close Syslog Div
echo("</div> }
</td> echo("</div>");
<td bgcolor=#e5e5e5 width=275 valign=top>");
echo("<div style='width: 290px; margin: 7px; float: right;'>
<b class='content-box'>
<b class='content-box1'><b></b></b>
<b class='content-box2'><b></b></b>
<b class='content-box3'></b>
<b class='content-box4'></b>
<b class='content-box5'></b></b>
<div class='content-boxfg' style='padding: 2px 8px;'>");
/// this stuff can be customised to show whatever you want.... /// this stuff can be customised to show whatever you want....
@ -163,11 +212,21 @@ if($_SESSION['userlevel'] >= '5') {
} }
echo("</div>
<b class='content-box'>
<b class='content-box5'></b>
<b class='content-box4'></b>
<b class='content-box3'></b>
<b class='content-box2'><b></b></b>
<b class='content-box1'><b></b></b></b>
</div>
");
#echo("</div>");
/// END VOSTRON /// END VOSTRON
?> }
</td>
</tr> ?>
<tr>
</tr></table>