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
This commit is contained in:
cjwbath
2020-01-27 11:31:43 +00:00
committed by Kevin Krumm
parent 25920be1db
commit 198e29c831
2 changed files with 68 additions and 54 deletions

View File

@@ -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 "
<tr>
<td>
" . generate_device_link($device);
if ($device['device_id'] == 0) {
echo "(device '" . $object['name'] . "' not in LibreNMS)";
}
echo "
</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>
echo "<tr>
<td>" . $device['device_id'] . "</td>
<td>" . $object['name'] . "</td>
<td>" . $device['sysName'] . "</td>
<td>" . $object['status'] . "</td>
<td>" . $object['time'] . "</td>
<td>" . $object['model'] . "</td>
<td>" . $object['group'] . "</td>
<td></td>
</tr>";
}
}

View File

@@ -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)
$('#search-output').append('Config appears on the following device(s):<br />');
if (data.output) {
$('#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');