Tidy up formatting; proof-of-concept right side box

.gitignore

@@ -1,2 +1,5 @@
-Makefile
+config.php
+.index
+logs
 patches
+rrd

Makefile

@@ -0,0 +1,30 @@
+GIT=git
+SYNC=rsync -rtvx --cvs-exclude --exclude '.*.swp'
+TEST_DEST=librenms:/opt/librenms/
+
+default:	check
+	$(GIT) merge master
+	$(SYNC) html includes $(TEST_DEST)
+
+test t:	merge check push-testing gc
+
+dev d:	merge check push-dev gc
+
+check:
+	for i in `$(GIT) diff --name-only`; do php -l $$i; done
+
+gc:
+	$(GIT) gc
+
+merge:
+	$(GIT) merge master
+
+pull:
+	$(GIT) pull
+
+push-dev:
+	$(GIT) push
+
+push-testing:
+	$(GIT) push testing
+

html/css/styles.css

@@ -495,7 +495,46 @@ a.list-device-disabled, a.list-device-disabled:visited {
   border-radius: 2pt 2pt 2pt 2pt;
 }
 
-.front-syslog .front-eventlog {
+.status-boxes {
+}
+
+.boxes {
+  width: 350px;
+  height: 200px;
+  vertical-align: center;
+}
+
+.left-2-col-fluid {
+  display: table-cell;
+  margin-right: 400px;
+/*  width: 100%; */
+/*  vertical-align: top;*/
+}
+
+.right-2-col-fixed {
+  display: table-cell;
+  width: 350px;
+  height: 250px;
+  float: right;
+/*  vertical-align: top;*/
+
+  /* Rounded Corners */
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  border-radius: 4px;
+
+  /* Borders */
+  border: 1px solid #aaaaaa;
+  padding: 5px;
+}
+
+.front-syslog {
+  margin: 4px;
+  clear: both;
+  padding: 5px;
+}
+
+.front-eventlog {
   margin: 4px;
   clear: both;
   padding: 5px;
@@ -1521,3 +1560,16 @@ tr.search:nth-child(odd) {
   margin: 2px;
 }
 
+.box {
+}
+
+.welcome {
+  padding-right: 25px;
+}
+
+.simple {
+  border: 0px;
+  width: 100%;
+  text-align: left;
+}
+

html/includes/front/common.inc.php

@@ -0,0 +1,16 @@
+<?php
+/*
+ * LibreNMS front page graphs - common code
+ *
+ * Copyright (c) 2013 Gear Consulting Pty Ltd <http://libertysys.com.au/>
+ *
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the
+ * Free Software Foundation, either version 3 of the License, or (at your
+ * option) any later version.  Please see LICENSE.txt at the top level of
+ * the source code distribution for details.
+ */
+
+?>
+<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
+<script type="text/javascript" src="js/jquery-cycle-boxes.js"></script>

html/includes/front/top_graphs.inc.php

@@ -0,0 +1,38 @@
+<?php
+/*
+ * LibreNMS front page graphs
+ *
+ * Copyright (c) 2013 Gear Consulting Pty Ltd <http://libertysys.com.au/>
+ *
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the
+ * Free Software Foundation, either version 3 of the License, or (at your
+ * option) any later version.  Please see LICENSE.txt at the top level of
+ * the source code distribution for details.
+ */
+
+require_once("includes/front/common.inc.php");
+
+echo('<div class="right-2-col-fixed">');
+echo('<div class="boxes">');
+
+echo('<div class=box>');
+require_once("includes/front/top_ports.inc.php");
+echo('</div>');
+
+/*
+echo('<div class=box>');
+echo('<h5>Something</h5>');
+echo('<p>Next 1</p>');
+echo('</div>');
+
+echo('<div class=box>');
+echo('<h5>Something else</h5>');
+echo('<p>Next 2</p>');
+echo('</div>');
+*/
+
+echo('</div>');
+echo('</div>');
+
+?>

html/includes/front/top_ports.inc.php

@@ -0,0 +1,224 @@
+<?php
+/*
+ * LibreNMS front page top ports graph
+ * - Find most utilised ports that have been polled in the last N minutes
+ *
+ * Copyright (c) 2013 Gear Consulting Pty Ltd <http://libertysys.com.au/>
+ *
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the
+ * Free Software Foundation, either version 3 of the License, or (at your
+ * option) any later version.  Please see LICENSE.txt at the top level of
+ * the source code distribution for details.
+ */
+
+$minutes = 15;
+$seconds = $minutes * 60;
+$top = $config['front_page_settings']['top']['ports'];
+$query = "
+  SELECT *, p.ifInOctets_rate + p.ifOutOctets_rate as total
+  FROM ports as p, devices as d
+  WHERE d.device_id = p.device_id
+    AND unix_timestamp() - p.poll_time < $seconds
+  ORDER BY total desc
+  LIMIT $top
+";
+
+echo("<strong>Top $top ports (last $minutes minutes)</strong>");
+echo('<table class="simple">');
+foreach (dbFetchRows($query) as $result) {
+  echo('<tr><td>'.$result['hostname'].'</td><td>'.$result['ifIndex'].'</td><td>'.$result['ifDescr'].'</td><td>'.$result['total'].'</td></tr>');
+}
+echo('</table>');
+
+/*
+// FIXME: Change to port_rrd_exists($device, $port)
+if (file_exists($config['rrd_dir'] . "/" . $device['hostname'] . "/port-". $port['ifIndex'] . ".rrd"))
+{
+  $iid = $id;
+  echo("<div class=graphhead>Interface Traffic</div>");
+  $graph_type = "port_bits";
+
+  include("includes/print-interface-graphs.inc.php");
+
+  echo("<div class=graphhead>Interface Packets</div>");
+  $graph_type = "port_upkts";
+
+  include("includes/print-interface-graphs.inc.php");
+
+  echo("<div class=graphhead>Interface Non Unicast</div>");
+  $graph_type = "port_nupkts";
+
+  include("includes/print-interface-graphs.inc.php");
+
+  echo("<div class=graphhead>Interface Errors</div>");
+  $graph_type = "port_errors";
+
+  include("includes/print-interface-graphs.inc.php");
+
+  if (is_file($config['rrd_dir'] . "/" . $device['hostname'] . "/port-" . $port['ifIndex'] . "-dot3.rrd"))
+  {
+    echo("<div class=graphhead>Ethernet Errors</div>");
+    $graph_type = "port_etherlike";
+
+    include("includes/print-interface-graphs.inc.php");
+  }
+}
+*/
+
+/* from html/includes/print-interface.inc.php:
+
+generate_port_link($port, $port['ifIndex'] . ". ".$port['label'])
+
+*/
+
+/* from html/includes/functions.inc.php:
+
+function generate_port_link($port, $text = NULL, $type = NULL)
+{
+  global $config;
+
+  $port = ifNameDescr($port);
+  if (!$text) { $text = fixIfName($port['label']); }
+  if ($type) { $port['graph_type'] = $type; }
+  if (!isset($port['graph_type'])) { $port['graph_type'] = 'port_bits'; }
+
+  $class = ifclass($port['ifOperStatus'], $port['ifAdminStatus']);
+
+  if (!isset($port['hostname'])) { $port = array_merge($port, device_by_id_cache($port['device_id'])); }
+
+  $content = "<div class=list-large>".$port['hostname']." - " . fixifName($port['label']) . "</div>";
+  if ($port['ifAlias']) { $content .= $port['ifAlias']."<br />"; }
+  $content .= "<div style=\'width: 850px\'>";
+  $graph_array['type']     = $port['graph_type'];
+  $graph_array['legend']   = "yes";
+  $graph_array['height']   = "100";
+  $graph_array['width']    = "340";
+  $graph_array['to']           = $config['time']['now'];
+  $graph_array['from']     = $config['time']['day'];
+  $graph_array['id']       = $port['port_id'];
+  $content .= generate_graph_tag($graph_array);
+  $graph_array['from']     = $config['time']['week'];
+  $content .= generate_graph_tag($graph_array);
+  $graph_array['from']     = $config['time']['month'];
+  $content .= generate_graph_tag($graph_array);
+  $graph_array['from']     = $config['time']['year'];
+  $content .= generate_graph_tag($graph_array);
+  $content .= "</div>";
+
+  $url = generate_port_url($port);
+
+  if (port_permitted($port['port_id'], $port['device_id'])) {
+    return overlib_link($url, $text, $content, $class);
+  } else {
+    return fixifName($text);
+  }
+}
+*/
+
+/* includes/print-interface-graphs.inc.php:
+
+global $config;
+
+$graph_array['height'] = "100";
+$graph_array['width']  = "215";
+$graph_array['to']     = $config['time']['now'];
+$graph_array['id']     = $port['port_id'];
+$graph_array['type']   = $graph_type;
+
+include("includes/print-graphrow.inc.php");
+
+*/
+
+/* html/includes/print-graphrow.inc.php:
+global $config;
+
+if($_SESSION['widescreen'])
+{
+  if (!$graph_array['height']) { $graph_array['height'] = "110"; }
+  if (!$graph_array['width']) { $graph_array['width']  = "215"; }
+  $periods = array('sixhour', 'day', 'week', 'month', 'year', 'twoyear');
+} else {
+  if (!$graph_array['height']) { $graph_array['height'] = "100"; }
+  if (!$graph_array['width']) { $graph_array['width']  = "215"; }
+  $periods = array('day', 'week', 'month', 'year');
+}
+
+$graph_array['to']     = $config['time']['now'];
+
+foreach ($periods as $period)
+{
+  $graph_array['from']        = $config['time'][$period];
+  $graph_array_zoom           = $graph_array;
+  $graph_array_zoom['height'] = "150";
+  $graph_array_zoom['width']  = "400";
+
+  $link_array = $graph_array;
+  $link_array['page'] = "graphs";
+  unset($link_array['height'], $link_array['width']);
+  $link = generate_url($link_array);
+
+  echo(overlib_link($link, generate_graph_tag($graph_array), generate_graph_tag($graph_array_zoom),  NULL));
+}
+
+function overlib_link($url, $text, $contents, $class)
+{
+  global $config;
+
+  $contents = str_replace("\"", "\'", $contents);
+  $output = '<a class="'.$class.'" href="'.$url.'"';
+  $output .= " onmouseover=\"return overlib('".$contents."'".$config['overlib_defaults'].");\" onmouseout=\"return nd();\">";
+  $output .= $text."</a>";
+
+  return $output;
+}
+
+function print_graph_tag($args)
+{
+  echo(generate_graph_tag($args));
+}
+
+function generate_graph_tag($args)
+{
+
+  foreach ($args as $key => $arg)
+  {
+    $urlargs[] = $key."=".$arg;
+  }
+
+  return '<img src="graph.php?' . implode('&amp;',$urlargs).'" border="0" />';
+}
+
+function generate_port_url($port, $vars=array())
+{
+  return generate_url(array('page' => 'device', 'device' => $port['device_id'], 'tab' => 'port', 'port' => $port['port_id']), $vars);
+}
+
+function generate_link($text, $vars, $new_vars = array())
+{
+  return '<a href="'.generate_url($vars, $new_vars).'">'.$text.'</a>';
+}
+
+function generate_url($vars, $new_vars = array())
+{
+
+  $vars = array_merge($vars, $new_vars);
+
+  $url = $vars['page']."/";
+  unset($vars['page']);
+
+  foreach ($vars as $var => $value)
+  {
+    if ($value == "0" || $value != "" && strstr($var, "opt") === FALSE && is_numeric($var) === FALSE)
+    {
+      $url .= $var ."=".$value."/";
+    }
+  }
+
+  return($url);
+
+}
+
+*/
+
+?>

html/includes/functions.inc.php

@@ -79,17 +79,22 @@ function generate_url($vars, $new_vars = array())
 
 }
 
+function escape_quotes($text)
+{
+  return str_replace('"', "\'", $text);
+}
+
 function generate_overlib_content($graph_array, $text)
 {
     global $config;
 
-    $overlib_content = '<div class=overlib><span class=overlib-text>'.$text."</span><br />";
+    $overlib_content = '<div class=overlib><span class=overlib-text>'.$text.'</span><br />';
     foreach (array('day','week','month','year') as $period)
     {
       $graph_array['from']        = $config['time'][$period];
-      $overlib_content .= str_replace('"', "\'", generate_graph_tag($graph_array));
+      $overlib_content .= escape_quotes(generate_graph_tag($graph_array));
     }
-    $overlib_content .= "</div>";
+    $overlib_content .= '</div>';
 
     return $overlib_content;
 
@@ -159,8 +164,8 @@ function generate_device_link($device, $text=NULL, $vars=array(), $start=0, $end
     $graphhead = $entry['text'];
     $contents .= '<div class=overlib-box>';
     $contents .= '<span class=overlib-title>'.$graphhead.'</span><br />';
-    $contents .= generate_minigraph_image($device, $start, $end, $graph);
-    $contents .= generate_minigraph_image($device, $config['time']['week'], $end, $graph);
+    $contents .= escape_quotes(generate_minigraph_image($device, $start, $end, $graph));
+    $contents .= escape_quotes(generate_minigraph_image($device, $config['time']['week'], $end, $graph));
     $contents .= '</div>';
   }
 

html/js/jquery-cycle-boxes.js

@@ -0,0 +1,10 @@
+// cycle between divs in a set, from: http://jquery.malsup.com/cycle/basic.html (see also http://jsfiddle.net/n1ck/4PvU7/)
+$(document).ready(function() {
+    $('.boxes').cycle({
+	timeout: 5000,
+	speed:   1000,
+	random:  1,
+	pause:   1,
+        fx: 'scrollUp' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
+    });
+});

html/pages/front/default.php

@@ -1,5 +1,7 @@
 <?php
 
+require_once("includes/front/top_graphs.inc.php");
+
 function generate_front_box ($frontbox_class, $content)
 {
 echo("<div class=\"front-box $frontbox_class\">
@@ -7,8 +9,13 @@ echo("<div class=\"front-box $frontbox_class\">
       </div>");
 }
 
-echo("<div class=front-page>");
+echo('<div class=front-page>');
 
+echo('<div class="status-boxes left-2-col-fluid">');
+
+$count_boxes = 0;
+
+// Device down boxes
 if ($_SESSION['userlevel'] == '10')
 {
 $sql = mysql_query("SELECT * FROM `devices` WHERE `status` = '0' AND `ignore` = '0'");
@@ -17,11 +24,10 @@ $sql = mysql_query("SELECT * FROM `devices` AS D, devices_perms AS P WHERE D.dev
 }
 while ($device = mysql_fetch_assoc($sql)) {
 
-      generate_front_box("device-down", "<center>".generate_device_link($device, shorthost($device['hostname']))."<br />
+  generate_front_box("device-down", generate_device_link($device, shorthost($device['hostname']))."<br />
     <span class=list-device-down>Device Down</span> <br />
-      <span class=body-date-1>".truncate($device['location'], 20)."</span>
-      </center>");
-
+    <span class=body-date-1>".truncate($device['location'], 20)."</span>");
+  ++$count_boxes;
 }
 
 if ($_SESSION['userlevel'] == '10')
@@ -33,6 +39,7 @@ $sql = mysql_query("SELECT * FROM `ports` AS I, `devices` AS D, devices_perms AS
 
 // These things need to become more generic, and more manageable across different frontpages... rewrite inc :>
 
+// Port down boxes
 if ($config['warn']['ifdown'])
 {
   while ($interface = mysql_fetch_assoc($sql))
@@ -40,27 +47,29 @@ if ($config['warn']['ifdown'])
     if (!$interface['deleted'])
     {
       $interface = ifNameDescr($interface);
-     generate_front_box("port-down", "<center>".generate_device_link($interface, shorthost($interface['hostname']))."<br />
+      generate_front_box("port-down", generate_device_link($interface, shorthost($interface['hostname']))."<br />
         <span class=\"interface-updown\">Port Down</span><br />
 <!--      <img src='graph.php?type=bits&amp;if=".$interface['port_id']."&amp;from=".$config['time']['day']."&amp;to=".$config['time']['now']."&amp;width=100&amp;height=32' /> -->
         ".generate_port_link($interface, truncate(makeshortif($interface['label']),13,''))." <br />
-        " . ($interface['ifAlias'] ? '<span class="body-date-1">'.truncate($interface['ifAlias'], 20, '').'</span>' : '') . "
-        </center>");
+        " . ($interface['ifAlias'] ? '<span class="body-date-1">'.truncate($interface['ifAlias'], 20, '').'</span>' : ''));
+      ++$count_boxes;
     }
   }
 }
 
 /* FIXME service permissions? seem nonexisting now.. */
+// Service down boxes
 $sql = mysql_query("SELECT * FROM `services` AS S, `devices` AS D WHERE S.device_id = D.device_id AND service_status = 'down' AND D.ignore = '0' AND S.service_ignore = '0'");
 while ($service = mysql_fetch_assoc($sql))
 {
-    generate_front_box("service-down", "<center>".generate_device_link($service, shorthost($service['hostname']))."<br />
+  generate_front_box("service-down", generate_device_link($service, shorthost($service['hostname']))."<br />
     <span class=service-down>Service Down</span>
     ".$service['service_type']."<br />
-    <span class=body-date-1>".truncate($interface['ifAlias'], 20)."</span>
-    </center>");
+    <span class=body-date-1>".truncate($interface['ifAlias'], 20)."</span>");
+  ++$count_boxes;
 }
 
+// BGP neighbour down boxes
 if (isset($config['enable_bgp']) && $config['enable_bgp'])
 {
   if ($_SESSION['userlevel'] == '10')
@@ -71,14 +80,15 @@ if (isset($config['enable_bgp']) && $config['enable_bgp'])
   }
   while ($peer = mysql_fetch_assoc($sql))
   {
-  generate_front_box("bgp-down", "<center>".generate_device_link($peer, shorthost($peer['hostname']))."<br />
+  generate_front_box("bgp-down", generate_device_link($peer, shorthost($peer['hostname']))."<br />
     <span class=bgp-down>BGP Down</span>
     <span class='" . (strstr($peer['bgpPeerIdentifier'],':') ? 'front-page-bgp-small' : 'front-page-bgp-normal') . "'>".$peer['bgpPeerIdentifier']."</span><br />
-      <span class=body-date-1>AS".truncate($peer['bgpPeerRemoteAs']." ".$peer['astext'], 14, "")."</span>
-      </center>");
+    <span class=body-date-1>AS".truncate($peer['bgpPeerRemoteAs']." ".$peer['astext'], 14, "")."</span>");
+    ++$count_boxes;
   }
 }
 
+// Device rebooted boxes
 if (filter_var($config['uptime_warning'], FILTER_VALIDATE_FLOAT) !== FALSE && $config['uptime_warning'] > 0)
 {
   if ($_SESSION['userlevel'] == '10')
@@ -91,16 +101,21 @@ if (filter_var($config['uptime_warning'], FILTER_VALIDATE_FLOAT) !== FALSE && $c
 
   while ($device = mysql_fetch_assoc($sql))
   {
-     generate_front_box("device-rebooted", "<center>".generate_device_link($device, shorthost($device['hostname']))."<br />
+    generate_front_box("device-rebooted", generate_device_link($device, shorthost($device['hostname']))."<br />
       <span class=device-rebooted>Device Rebooted</span><br />
-        <span class=body-date-1>".formatUptime($device['uptime'], 'short')."</span>
-        </center>");
+      <span class=body-date-1>".formatUptime($device['uptime'], 'short')."</span>");
+    ++$count_boxes;
   }
 }
+if ($count_boxes == 0) {
+  echo("<h5>Nothing here yet</h5><p class=welcome>This is where status notifications about devices and services would normally go. You might have none
+  because you run such a great network, or perhaps you've just started using ".$config['project_name'].". If you're new to ".$config['project_name'].", you might
+  want to start by adding one or more devices in the Devices menu.</p>");
+}
+echo('</div>');
 
 if ($config['enable_syslog'])
 {
-  // Open Syslog Div
   echo("<div class=front-syslog>
     <h3>Recent Syslog Messages</h3>
   ");
@@ -115,12 +130,9 @@ if ($config['enable_syslog'])
     include("includes/print-syslog.inc.php");
   }
   echo("</table>");
-
-  echo("</div>"); // Close Syslog Div
+  echo("</div>");
 
 } else {
-
-  // Open eventlog Div
   echo("<div class=front-eventlog>
     <h3>Recent Eventlog Entries</h3>
   ");
@@ -142,7 +154,7 @@ if ($config['enable_syslog'])
   }
 
   echo("</table>");
-  echo("</div>"); // Close Syslog Div
+  echo("</div>");
 }
 
 echo("</div>");

includes/defaults.inc.php

@@ -111,6 +111,7 @@ $config['favicon']          = "";
 $config['header_color']     = "#1F334E";
 $config['page_refresh']     = "300";  // Refresh the page every xx seconds, 0 to disable
 $config['front_page']       = "pages/front/default.php";
+$config['front_page_settings']['top']['ports'] = 10;
 $config['page_title_prefix'] = "";
 $config['page_title_suffix'] = $config['project_name'];
 $config['timestamp_format'] = 'd-m-Y H:i:s';