feature: Improve Device Neighbour WebUI (#7487)

html/includes/print-map.inc.php

@@ -239,7 +239,7 @@ echo $edges;
     var network = new vis.Network(container, data, options);
     network.on('click', function (properties) {
         if (properties.nodes > 0) {
-            window.location.href = "device/device="+properties.nodes+"/tab=map/"
+            window.location.href = "device/device="+properties.nodes+"/tab=neighbours/selection=map/"
         }
     });
 </script>

html/pages/device.inc.php

@@ -272,9 +272,9 @@ if (device_permitted($vars['device']) || $permitted_by_port) {
                 </li>';
         }
 
-        echo '<li role="presentation" '.$select['map'].'>
-                <a href="'.generate_device_url($device, array('tab' => 'map')).'">
-                  <i class="fa fa-sitemap fa-lg icon-theme"  aria-hidden="true"></i> Map
+        echo '<li role="presentation" '.$select['neighbours'].'>
+                <a href="'.generate_device_url($device, array('tab' => 'neighbours')).'">
+                  <i class="fa fa-sitemap fa-lg icon-theme"  aria-hidden="true"></i> Neighbours
                 </a>
               </li>';
 

html/pages/device/neighbours.inc.php

@@ -0,0 +1,40 @@
+<?php
+
+unset($datas);
+$datas[] = 'list';
+$datas[] = 'map';
+
+$page_text['list'] = 'List';
+$page_text['map']  = 'Map';
+
+$link_array = array(
+    'page' => 'device',
+    'device' => $device['device_id'],
+    'tab' => 'neighbours'
+);
+
+print_optionbar_start();
+echo "<span style='font-weight: bold;'>Neighbours</span> &#187; ";
+
+if (!$vars['selection']) {
+    $vars['selection'] = 'list';
+}
+
+unset($sep);
+foreach ($datas as $type) {
+    echo $sep;
+    
+    if ($vars['selection'] == $type) {
+        echo '<span class="pagemenu-selected">';
+    }
+    echo generate_link($page_text[$type], $link_array, array(
+        'selection' => $type
+    ));
+    if ($vars['selection'] == $type) {
+        echo '</span>';
+    }
+    $sep = ' | ';
+}
+print_optionbar_end();
+include 'pages/device/neighbours/' . mres($vars['selection']) . '.inc.php';
+$pagetitle[] = 'Neighbours';

html/pages/device/neighbours/list.inc.php

@@ -0,0 +1 @@
+../ports/neighbours.inc.php

html/pages/device/ports/neighbours.inc.php

@@ -1,40 +1,26 @@
 <?php
-
-echo '<table border="0" cellspacing="0" cellpadding="5" width="100%">';
-
-$i = '1';
-
-echo '<tr><th>Local Port</th>
-          <th>Remote Port</th>
-          <th>Remote Device</th>
-          <th>Protocol</th>
-      </tr>';
+echo '<table class="table table-hover table-condensed">
+    <thead>
+        <tr>
+            <th>Local Port</th>
+            <th>Remote Device</th>
+            <th>Remote Port</th>
+            <th>Protocol</th>
+        </tr>
+    </thead>';
 
 foreach (dbFetchRows('SELECT * FROM links AS L, ports AS I WHERE I.device_id = ? AND I.port_id = L.local_port_id', array($device['device_id'])) as $neighbour) {
     $neighbour = cleanPort($neighbour);
-    if ($bg_colour == $list_colour_b) {
-        $bg_colour = $list_colour_a;
-    } else {
-        $bg_colour = $list_colour_b;
-    }
-
-    echo '<tr bgcolor="'.$bg_colour.'">';
-    echo '<td><span style="font-weight: bold;">'.generate_port_link($neighbour).'</span><br />'.$neighbour['ifAlias'].'</td>';
-
+    echo '<td>' . generate_port_link($neighbour) . '<br>' . $neighbour['ifAlias'] . '</td>';
     if (is_numeric($neighbour['remote_port_id']) && $neighbour['remote_port_id']) {
-        $remote_port   = cleanPort(get_port_by_id($neighbour['remote_port_id']));
+        $remote_port = cleanPort(get_port_by_id($neighbour['remote_port_id']));
         $remote_device = device_by_id_cache($remote_port['device_id']);
-        echo '<td>'.generate_port_link($remote_port).'<br />'.$remote_port['ifAlias'].'</td>';
-        echo '<td>'.generate_device_link($remote_device).'<br />'.$remote_device['hardware'].'</td>';
+        echo '<td>' . generate_device_link($remote_device) . '<br>' . $remote_device['hardware'] . '</td>
+              <td>' . generate_port_link($remote_port) . '<br>' . $remote_port['ifAlias'] . '</td>';
     } else {
-        echo '<td>'.$neighbour['remote_port'].'</td>';
-        echo '<td>'.$neighbour['remote_hostname'].'
-          <br />'.$neighbour['remote_platform'].'</td>';
+        echo '<td>' . $neighbour['remote_hostname'] . '<br>' . $neighbour['remote_platform'] . '</td>
+              <td>' . $neighbour['remote_port'] . '</td>';
     }
-
-    echo '<td>'.strtoupper($neighbour['protocol']).'</td>';
-    echo '</tr>';
-    $i++;
-}//end foreach
-
+    echo '<td>' . strtoupper($neighbour['protocol']) . '</td></tr>';
+}
 echo '</table>';