From 20ae9e2ecd938f2c8821c17064d4696fa07be898 Mon Sep 17 00:00:00 2001
From: Tony Murray <murraytony@gmail.com>
Date: Fri, 24 Feb 2017 03:59:30 -0600
Subject: [PATCH] webui: Improve device header layout (#5990)

* webui: Improve device header layout

* Update css style version to break caches
Remove unused css.
---
 html/css/styles.css                 | 36 ++--------------------
 html/includes/device-header.inc.php | 46 +++++++----------------------
 html/index.php                      |  2 +-
 html/pages/device.inc.php           | 15 ++++++++--
 html/pages/routing/vrf.inc.php      | 10 ++-----
 includes/functions.php              | 12 ++++++--
 6 files changed, 39 insertions(+), 82 deletions(-)

diff --git a/html/css/styles.css b/html/css/styles.css
index ca54d9cb40..cb7e0a620a 100644
--- a/html/css/styles.css
+++ b/html/css/styles.css
@@ -1829,16 +1829,6 @@ label {
         max-width: 45px;
         max-height: 50px;
     }
-    .device-header-table .device-icon .device-icon-48h img {
-       max-width: 20px;
-       max-height: 20px;
-    }
-    .device-header-table img {
-       max-width: 115px;
-       max-height: 40px;
-    }
-    .device-header-table {font-size : 8px;}
-    .device-header-table a {font-size : 11px;}
 }
 
 @media only screen and (max-width: 768px) and (min-width: 481px) {
@@ -1847,12 +1837,6 @@ label {
         max-width: 60px;
         max-height: 55px;
     }
-    .device-header-table img {
-       max-width: 150px;
-       max-height: 50px;
-    }
-    .device-header-table {font-size : 10px;}
-    .device-header-table a {font-size : 17px;}
 }
 
 
@@ -2160,24 +2144,10 @@ label {
   width: 40px;
 }
 
-.device-icon-48h img {
-  height: 48px;
+.device-icon-header {
+  height: 52px;
   max-width: 250px;
-}
-
-.device-title-bar-1 {
-  width: 25%;
-  max-width: 25%;
-}
-
-.device-title-bar-2 {
-  width: 25%;
-  max-width: 25%;
- }
-
-.device-title-bar-3 {
-  width: 50%;
-  max-width: 50%;
+  margin-right: 15px;
 }
 
 .severity-ok {
diff --git a/html/includes/device-header.inc.php b/html/includes/device-header.inc.php
index 0a9b41f8d9..a0be565f8f 100644
--- a/html/includes/device-header.inc.php
+++ b/html/includes/device-header.inc.php
@@ -1,43 +1,20 @@
 <?php
 
-if ($device['status'] == '0') {
-    $class = 'alert-danger';
-} else {
-    $class = '';
-}
-
-if ($device['ignore'] == '1') {
-    $class = 'div-ignore-alert';
-    if ($device['status'] == '1') {
-        $class = 'alert-warning';
-    }
-}
-
-if ($device['disabled'] == '1') {
-    $class = 'alert-info';
-}
+echo getLogoTag($device, 'device-icon-header pull-left') .'
+<div class="pull-left" style="margin-top: 5px;">';
 
 $host_id = get_vm_parent_id($device);
-
-echo '
-	    <colgroup>
-	    <col class="device-title-bar-1">
-	    <col class="device-title-bar-2">
-	    <col class="device-title-bar-3">
-            </colgroup>
-            <tr bgcolor="'.$device_colour.'" class="alert '.$class.'">
-             <td><span class="device-icon-48h">'.getLogoTag($device).'</span></td>
-             <td>';
 if ($host_id > 0) {
     echo '
-             <a href="'.generate_url(array('page'=>'device','device'=>$host_id)).'"><i class="fa fa-server fa-fw fa-lg"></i></a>
-         ';
+<a href="'.generate_url(array('page'=>'device','device'=>$host_id)).'"><i class="fa fa-server fa-fw fa-lg"></i></a>';
 }
-             
+
 echo '
-             <span style="font-size: 20px;">'.generate_device_link($device).'</span>
-             <br />'.generate_link($device['location'], array('page' => 'devices', 'location' => $device['location'])).'</td>
-             <td>';
+<span style="font-size: 20px;">'.generate_device_link($device).'</span><br />
+'.generate_link($device['location'], array('page' => 'devices', 'location' => $device['location'])) .'
+</div>';
+//<div class="col-xs-6 col-sm-8 col-md-8">';
+
 
 if (isset($config['os'][$device['os']]['over'])) {
     $graphs = $config['os'][$device['os']]['over'];
@@ -61,6 +38,7 @@ $graph_array['height'] = '45';
 $graph_array['width']  = '150';
 $graph_array['bg']     = 'FFFFFF00';
 
+echo '<div class="pull-right">';
 foreach ($graphs as $entry) {
     if ($entry['graph']) {
         $graph_array['type'] = $entry['graph'];
@@ -71,8 +49,6 @@ foreach ($graphs as $entry) {
         echo '</div>';
     }
 }
+echo '</div><br style="clear: both;" />';
 
 unset($graph_array);
-
-echo '</td>
-   </tr>';
diff --git a/html/index.php b/html/index.php
index 5ff084eb6a..ad104c7cd4 100644
--- a/html/index.php
+++ b/html/index.php
@@ -140,7 +140,7 @@ if (empty($config['favicon'])) {
   <link href="css/MarkerCluster.Default.css" rel="stylesheet" type="text/css" />
   <link href="css/leaflet.awesome-markers.css" rel="stylesheet" type="text/css" />
   <link href="<?php echo($config['stylesheet']);  ?>?ver=291727419" rel="stylesheet" type="text/css" />
-  <link href="css/<?php echo $config['site_style']; ?>.css?ver=632417638" rel="stylesheet" type="text/css" />
+  <link href="css/<?php echo $config['site_style']; ?>.css?ver=632417639" rel="stylesheet" type="text/css" />
 <?php
 
 foreach ((array)$config['webui']['custom_css'] as $custom_css) {
diff --git a/html/pages/device.inc.php b/html/pages/device.inc.php
index 132bd73946..9d721a1773 100644
--- a/html/pages/device.inc.php
+++ b/html/pages/device.inc.php
@@ -33,10 +33,21 @@ if (device_permitted($vars['device']) || $check_device == $vars['device']) {
     $component = new LibreNMS\Component();
     $component_count = $component->getComponentCount($device['device_id']);
 
+    $alert_class = '';
+    if ($device['disabled'] == '1') {
+        $alert_class = 'alert-info';
+    } else {
+        if ($device['status'] == '0') {
+            $alert_class = 'alert-danger';
+        } elseif ($device['ignore'] == '1') {
+            $alert_class = 'alert-warning';
+        }
+    }
+
     echo '<div class="panel panel-default">';
-        echo '<table class="device-header-table" style="margin: 0px 7px 7px 7px;" cellspacing="0" class="devicetable" width="99%">';
+        echo '<div class="panel-body '.$alert_class.'">';
         require 'includes/device-header.inc.php';
-    echo '</table>';
+        echo '</div>';
     echo '</div>';
 
 
diff --git a/html/pages/routing/vrf.inc.php b/html/pages/routing/vrf.inc.php
index 98324af3d1..397e489010 100644
--- a/html/pages/routing/vrf.inc.php
+++ b/html/pages/routing/vrf.inc.php
@@ -201,17 +201,11 @@ if ($_SESSION['userlevel'] >= '5') {
         $devices = dbFetchRows('SELECT * FROM `vrfs` AS V, `devices` AS D WHERE `mplsVpnVrfRouteDistinguisher` = ? AND D.device_id = V.device_id', array($vrf['mplsVpnVrfRouteDistinguisher']));
         foreach ($devices as $device) {
             $hostname = $device['hostname'];
-            if (($x % 2)) {
-                $device_colour = $list_colour_a;
-            } else {
-                $device_colour = $list_colour_b;
-            }
-
-            echo '<table cellpadding=10 cellspacing=0 class=devicetable width=100%>';
 
+            echo '<div>';
             include 'includes/device-header.inc.php';
+            echo '</div>';
 
-            echo '</table>';
             unset($seperator);
             echo '<div style="margin: 0 0 0 60px;"><table cellspacing=0 cellpadding=7>';
             $i = 1;
diff --git a/includes/functions.php b/includes/functions.php
index 735754bdd8..dea7add6c3 100644
--- a/includes/functions.php
+++ b/includes/functions.php
@@ -224,12 +224,18 @@ function getLogo($device)
 }
 
 /**
- * @param $device
+ * @param array $device
+ * @param string $class to apply to the image tag
  * @return string an image tag with the logo for this device. Images are often wide, not square.
  */
-function getLogoTag($device)
+function getLogoTag($device, $class = null)
 {
-    return '<img src="' . getLogo($device) . '" title="' . getImageTitle($device) . '"/>';
+    $tag = '<img src="' . getLogo($device) . '" title="' . getImageTitle($device) . '"';
+    if (isset($class)) {
+        $tag .= " class=\"$class\" ";
+    }
+    $tag .= ' />';
+    return  $tag;
 }
 
 /**