Oxidized GUI tweaks (#11066)

* Don't overwrite real port ids with zeros in the FDB

* Remove space to make codeclimate happy

* Provide links to device config view for oxidized config search results

* Use a bootgrid for Oxidized nodes so we can sort, search etc.

* Add a space for codeclimate

includes/html/functions.inc.php

@@ -1114,7 +1114,14 @@ function search_oxidized_config($search_in_conf_textbox)
         )
     );
     $context = stream_context_create($opts);
-    return json_decode(file_get_contents($oxidized_search_url, false, $context), true);
+    
+    $nodes = json_decode(file_get_contents($oxidized_search_url, false, $context), true);
+    // Look up Oxidized node names to LibreNMS devices for a link
+    foreach ($nodes as &$n) {
+        $dev = device_by_name($n['node']);
+        $n['dev_id'] = $dev ? $dev['device_id'] : false;
+    }
+    return $nodes;
 }
 
 /**
@@ -1186,50 +1193,16 @@ function get_oxidized_nodes_list()
             //user cannot see this device, so let's skip it.
             continue;
         }
-        $fa_color = $object['status'] == 'success' ? 'success' : 'danger';
+        
-        echo "
+        echo "<tr>
-        <tr>
+        <td>" . $device['device_id'] . "</td>
-        <td>
+        <td>" . $object['name'] . "</td>
-        " . generate_device_link($device);
+        <td>" . $device['sysName'] . "</td>
-        if ($device['device_id'] == 0) {
+        <td>" . $object['status'] . "</td>
-            echo "(device '" . $object['name'] . "' not in LibreNMS)";
+        <td>" . $object['time'] . "</td>
-        }
+        <td>" . $object['model'] . "</td>
-        echo "
+        <td>" . $object['group'] . "</td>
-        </td>
+        <td></td>
-        <td>
-        " . $device['sysName'] . "
-        </td>
-        <td>
-        <i class='fa fa-square text-" . $fa_color . "'></i>
-        </td>
-        <td>
-        " . $object['time'] . "
-        </td>
-        <td>
-        " . $object['model'] . "
-        </td>
-        <td>
-        " . $object['group'] . "
-        </td>
-        <td>
-        ";
-        if (! $device['device_id'] == 0) {
-            echo "
-          <button class='btn btn-default btn-sm' name='btn-refresh-node-devId" . $device['device_id'] . "' id='btn-refresh-node-devId" . $device['device_id'] . "' onclick='refresh_oxidized_node(\"" . $device['hostname'] . "\")'>
-            <i class='fa fa-refresh'></i>
-          </button>
-          <a href='" . generate_url(array('page' => 'device', 'device' => $device['device_id'], 'tab' => 'showconfig')) . "'>
-            <i class='fa fa-align-justify fa-lg icon-theme'></i>
-          </a>
-            ";
-        } else {
-            echo "
-          <button class='btn btn-default btn-sm' disabled name='btn-refresh-node-devId" . $device['device_id'] . "' id='btn-refresh-node-devId" . $device['device_id'] . "'>
-            <i class='fa fa-refresh'></i>
-          </button>";
-        }
-        echo "
-        </td>
         </tr>";
     }
 }

includes/html/pages/oxidized.inc.php

@@ -25,17 +25,17 @@ $pagetitle[] = 'Oxidized';
             <div class="tab-content">
                 <div class="tab-pane fade in active" id="list">
                     <div class="table-responsive">
-                        <button type='submit' class='btn btn-success btn-sm' name='btn-reload-nodes' id='btn-reload-nodes'><i class='fa fa-refresh'></i> Reload node list</button>
                         <table id="oxidized-nodes" class="table table-hover table-condensed table-striped">
                             <thead>
                             <tr>
-                                <th data-column-id="hostname" data-order="desc">Hostname</th>
+                                <th data-column-id="id" data-visible="false">ID</th>
+                                <th data-column-id="hostname" data-formatter="hostname" data-order="asc">Hostname</th>
                                 <th data-column-id="sysname" data-visible=" <?php echo (!Config::get('force_ip_to_sysname')  ? 'true' : 'false') ?>">SysName</th>
-                                <th data-column-id="last_status">Last Status</th>
+                                <th data-column-id="last_status" data-formatter="status">Last Status</th>
                                 <th data-column-id="last_update">Last Update</th>
                                 <th data-column-id="model">Model</th>
                                 <th data-column-id="group">Group</th>
-                                <th data-column-id="actions"></th>
+                                <th data-column-id="actions" data-formatter="actions"></th>
                             </tr>
                             </thead>
                             <tbody>
@@ -65,7 +65,43 @@ $pagetitle[] = 'Oxidized';
     </div>
 </div>
 <script>
-
+    var grid = $("#oxidized-nodes").bootgrid({
+        templates: {
+            header: '<div id="{{ctx.id}}" class="{{css.header}}"><div class="row">\
+                        <div class="col-sm-8 actionBar">\
+                            <span class="pull-left">\
+                                <button type="submit" class="btn btn-success btn-sm" name="btn-reload-nodes" id="btn-reload-nodes"\
+                                title="Update Oxidized\'s node list from LibreNMS data"><i class="fa fa-refresh"></i>\
+                                Reload node list</button>\
+                            </span>\
+                        </div>\
+                        <div class="col-sm-4 actionBar"><p class="{{css.search}}"></p><p class="{{css.actions}}"></p></div>\
+                    </div></div>'
+            },
+        rowCount: [50, 100, 250, -1],                
+        formatters: {
+            "hostname": function(column, row) {
+                if (row.id) {
+                    return '<a href="/device/device=' + row.id + '">' + row.hostname + '</a>';
+                } else {
+                    return row.hostname;
+                }
+            },
+            "actions": function(column, row) {
+                if (row.id) {
+                    return '<button class="btn btn-default btn-sm" name="btn-refresh-node-devId' + row.id + 
+                            '" id="btn-refresh-node-devId' + row.id + '" onclick="refresh_oxidized_node(\'' + row.hostname + '\');" title="Refetch config">' +
+                            '<i class="fa fa-refresh"></i></button> ' +
+                            '<a href="device/device=' + row.id + '/tab=showconfig/" title="View config"><i class="fa fa-align-justify fa-lg icon-theme"></i></a>';
+                }
+            },
+            "status": function(column, row) {
+                var color = ((row.last_status == 'success') ? 'success' : 'danger');
+                return '<i class="fa fa-square text-' + color + '" title="' + row.last_status + '"></i>';
+            }
+        }
+    });
+    
     $("[name='btn-search']").on('click', function (event) {
         event.preventDefault();
         var $this = $(this);
@@ -81,11 +117,16 @@ $pagetitle[] = 'Oxidized';
             success: function (data) {
                 $('#search-output').empty();
                 $("#search-output").show();
-                if (data.output)
+                if (data.output) {
-                    $('#search-output').append('Config appears on the following device(s):<br />');
+                    $('#search-output').append('<p>Config appears on the following device(s):</p>');
                     $.each(data.output, function (row, value) {
-                        $('#search-output').append(value['full_name'] + '<br />');
+                        if (value['dev_id']) {
-                });
+                            $('#search-output').append('<p><a href="device/device=' + value['dev_id'] + '/tab=showconfig/">' + value['full_name'] + '</p>');
+                        } else {
+                            $('#search-output').append('<p>' + value['full_name'] + '</p>');
+                        }
+                        });
+                }
             },
             error: function () {
                 toastr.error('Error');