webui: Devices table refresh (#7809)

* initial release

* added missing copyright

* update to match latest style

* removed status text column

* removed status text column

* fix overflow of options bar
This commit is contained in:
crcro
2017-12-24 19:58:32 +00:00
committed by Neil Lathwood
parent 71711326fb
commit 7a0f8c02b6
2 changed files with 121 additions and 96 deletions
+18 -10
View File
@@ -1,4 +1,17 @@
<?php
/*
* 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.
*
* @package LibreNMS
* @subpackage webui
* @link http://librenms.org
* @copyright 2017 LibreNMS
* @author LibreNMS Contributors
*/
$where = 1;
$param = array();
@@ -121,25 +134,21 @@ foreach (dbFetchRows($sql, $param) as $device) {
}
if ($device['status'] == '0') {
$extra = 'danger';
$msg = $device['status_reason'];
$extra = 'label-danger';
} else {
$extra = 'success';
$msg = 'up';
$extra = 'label-success';
}
if ($device['ignore'] == '1') {
$extra = 'default';
$extra = 'label-default';
$msg = 'ignored';
if ($device['status'] == '1') {
$extra = 'warning';
$msg = 'ignored';
$extra = 'label-warning';
}
}
if ($device['disabled'] == '1') {
$extra = 'default';
$msg = 'disabled';
$extra = 'label-default';
}
$type = strtolower($device['os']);
@@ -230,7 +239,6 @@ foreach (dbFetchRows($sql, $param) as $device) {
$response[] = array(
'extra' => $extra,
'msg' => $msg,
'list_type' => $subformat,
'icon' => $image,
'hostname' => $hostname,
+103 -86
View File
@@ -1,33 +1,42 @@
<?php
/*
* 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.
*
* @package LibreNMS
* @subpackage webui
* @link http://librenms.org
* @copyright 2017 LibreNMS
* @author LibreNMS Contributors
*/
// Set Defaults here
$pagetitle[] = "Devices";
if (!isset($vars['format'])) {
$vars['format'] = "list_detail";
}
$pagetitle[] = "Devices";
print_optionbar_start();
echo '<span class="devices-font-bold">Lists: </span>';
$listoptions = '<span class="devices-font-bold">Lists: </span>';
$menu_options = array('basic' => 'Basic', 'detail' => 'Detail');
$sep = "";
foreach ($menu_options as $option => $text) {
echo($sep);
$listoptions .= $sep;
if ($vars['format'] == "list_" . $option) {
echo '<span class="pagemenu-selected">';
$listoptions .= '<span class="pagemenu-selected">';
}
echo '<a href="' . generate_url($vars, array('format' => "list_" . $option)) . '">' . $text . '</a>';
$listoptions .= '<a href="' . generate_url($vars, array('format' => "list_" . $option)) . '">' . $text . '</a>';
if ($vars['format'] == "list_" . $option) {
echo '</span>';
$listoptions .= '</span>';
}
$sep = " | ";
}
echo ' | <span class="devices-font-bold">Graphs: </span>';
$listoptions .= '&nbsp;&nbsp;&nbsp;<span class="devices-font-bold">Graphs: </span>';
$menu_options = array('bits' => 'Bits',
'processor' => 'CPU',
@@ -42,20 +51,18 @@ $menu_options = array('bits' => 'Bits',
);
$sep = "";
foreach ($menu_options as $option => $text) {
echo $sep;
$listoptions .= $sep;
if ($vars['format'] == 'graph_' . $option) {
echo '<span class="pagemenu-selected">';
$listoptions .= '<span class="pagemenu-selected">';
}
echo '<a href="' . generate_url($vars, array('format' => 'graph_' . $option, 'from' => '-24h', 'to' => 'now')) . '">' . $text . '</a>';
$listoptions .= '<a href="' . generate_url($vars, array('format' => 'graph_' . $option, 'from' => '-24h', 'to' => 'now')) . '">' . $text . '</a>';
if ($vars['format'] == 'graph_' . $option) {
echo '</span>';
$listoptions .= '</span>';
}
$sep = " | ";
}
echo '<div class="devices-float-right">';
$graphs_types = '<select name="type" id="type" onchange="window.open(this.options[this.selectedIndex].value,\'_top\')" class="devices-graphs-select">';
$headeroptions = '<select name="type" id="type" onchange="window.open(this.options[this.selectedIndex].value,\'_top\')" class="devices-graphs-select">';
$type = 'device';
foreach (get_graph_subtypes($type) as $avail_type) {
$display_type = is_mib_graph($type, $avail_type) ? $avail_type : nicecase($avail_type);
@@ -64,30 +71,24 @@ foreach (get_graph_subtypes($type) as $avail_type) {
} else {
$is_selected = '';
}
$graphs_types .= '<option value="' . generate_url($vars, array('format' => 'graph_' . $avail_type, 'from' => $vars['from'] ?: $config['time']['day'], 'to' => $vars['to'] ?: $config['time']['now'])) . '" ' . $is_selected . '>' . $display_type . '</option>';
$headeroptions .= '<option value="' . generate_url($vars, array('format' => 'graph_' . $avail_type, 'from' => $vars['from'] ?: $config['time']['day'], 'to' => $vars['to'] ?: $config['time']['now'])) . '" ' . $is_selected . '>' . $display_type . '</option>';
}
$graphs_types .= '</select>';
echo $graphs_types;
$headeroptions .= '</select>';
if (isset($vars['searchbar']) && $vars['searchbar'] == "hide") {
echo('<a href="' . generate_url($vars, array('searchbar' => '')) . '">Restore Search</a>');
$headeroptions .= '<a href="' . generate_url($vars, array('searchbar' => '')) . '">Restore Search</a>';
} else {
echo('<a href="' . generate_url($vars, array('searchbar' => 'hide')) . '">Remove Search</a>');
$headeroptions .= '<a href="' . generate_url($vars, array('searchbar' => 'hide')) . '">Remove Search</a>';
}
echo(" | ");
$headeroptions .= ' | ';
if (isset($vars['bare']) && $vars['bare'] == "yes") {
echo('<a href="' . generate_url($vars, array('bare' => '')) . '">Restore Header</a>');
$headeroptions .= '<a href="' . generate_url($vars, array('bare' => '')) . '">Restore Header</a>';
} else {
echo('<a href="' . generate_url($vars, array('bare' => 'yes')) . '">Remove Header</a>');
$headeroptions .= '<a href="' . generate_url($vars, array('bare' => 'yes')) . '">Remove Header</a>';
}
print_optionbar_end();
echo '</div>';
list($format, $subformat) = explode("_", $vars['format'], 2);
if ($format == "graph") {
@@ -228,7 +229,7 @@ if ($format == "graph") {
$graph_array_zoom['width'] = '400';
$graph_array_zoom['legend'] = 'yes';
$link_array = $graph_array;
$link_array = $graph_array;
$link_array['page'] = 'graphs';
$link_array['type'] = $graph_type;
$link_array['device'] = $device['device_id'];
@@ -259,8 +260,8 @@ if ($format == "graph") {
}
$os_options = '<select name="os" id="os" class="form-control input-sm">';
$os_options .= '<option value="">All OSes</option>';
$os_options = "<select name='os' id='os' class='form-control input-sm'>";
$os_options .= "<option value=''>All OSes</option>";
foreach (dbFetch($os, $param) as $data) {
if ($data['os']) {
$tmp_os = clean_bootgrid($data['os']);
@@ -269,13 +270,13 @@ if ($format == "graph") {
} else {
$os_selected = '';
}
$os_options .= '<option value="' . $tmp_os . '" ' . $os_selected . '>' . $config['os'][$tmp_os]['text'] . '</option>';
$os_options .= "<option value='" . $tmp_os . "' " . $os_selected . ">" . $config['os'][$tmp_os]['text'] . "</option>";
}
}
$os_options .= '<select>';
$os_options .= "<select>";
$ver_options = '<select name="version" id="version" class="form-control input-sm">';
$ver_options .= '<option value="">All Versions</option>';
$ver_options = "<select name='version' id='version' class='form-control input-sm'>";
$ver_options .= "<option value=''>All Versions</option>";
foreach (dbFetch($ver, $param) as $data) {
if ($data['version']) {
$tmp_version = clean_bootgrid($data['version']);
@@ -284,13 +285,14 @@ if ($format == "graph") {
} else {
$ver_selected = '';
}
$ver_options .= '<option value="' . $tmp_version . '" ' . $ver_selected . '> ' . $tmp_version . '</option>';
$ui_version = strlen($tmp_version) > 15 ? substr($tmp_version, 0, 15) . "..." : $tmp_version;
$ver_options .= "<option value='" . $tmp_version . "' " . $ver_selected . ">" . $ui_version . "</option>";
}
}
$ver_options .= '</select>';
$ver_options .= "</select>";
$platform_options = '<select name="hardware" id="hardware" class="form-control input-sm">';
$platform_options .= '<option value="">All Platforms</option>';
$platform_options = "<select name='hardware' id='hardware' class='form-control input-sm'>";
$platform_options .= "<option value=''>All Platforms</option>";
foreach (dbFetch($platform, $param) as $data) {
if ($data['hardware']) {
$tmp_hardware = clean_bootgrid($data['hardware']);
@@ -299,14 +301,14 @@ if ($format == "graph") {
} else {
$platform_selected = '';
}
$platform_options .= '<option value="' . $tmp_hardware . '" ' . $platform_selected . '>' . $tmp_hardware . '</option>';
$platform_options .= "<option value='" . $tmp_hardware . "' " . $platform_selected . ">" . $tmp_hardware . "</option>";
}
}
$platform_options .= '</select>';
$platform_options .= "</select>";
$features_options = '<select name="features" id="features" class="form-control input-sm">';
$features_options .= '<option value="">All Featuresets</option>';
$features_options = "<select name='features' id='features' class='form-control input-sm'>";
$features_options .= "<option value=''>All Featuresets</option>";
foreach (dbFetch($features, $param) as $data) {
if ($data['features']) {
$tmp_features = clean_bootgrid($data['features']);
@@ -315,13 +317,13 @@ if ($format == "graph") {
} else {
$feature_selected = '';
}
$features_options .= '<option value="' . $tmp_features . '" ' . $feature_selected . '>' . $tmp_features . '</option>';
$features_options .= "<option value='" . $tmp_features . "' " . $feature_selected . ">" . $tmp_features . "</option>";
}
}
$features_options .= '</select>';
$features_options .= "</select>";
$locations_options = '<select name="location" id="location" class="form-control input-sm">';
$locations_options .= '<option value="">All Locations</option>';
$locations_options = "<select name='location' id='location' class='form-control input-sm'>";
$locations_options .= "<option value=''>All Locations</option>";
foreach (getlocations() as $location) {
if ($location) {
$location = clean_bootgrid($location);
@@ -330,13 +332,15 @@ if ($format == "graph") {
} else {
$location_selected = '';
}
$locations_options .= '<option value="' . $location . '" ' . $location_selected . '>' . $location . '</option>';
$ui_location = strlen($location) > 15 ? substr($location, 0, 15) . "..." : $location;
$locations_options .= "<option value='" . $location . "' " . $location_selected . ">" . $ui_location . "</option>";
}
}
$locations_options .= '</select>';
$locations_options .= "</select>";
$types_options = '<select name="type" id="type" class="form-control input-sm">';
$types_options .= '<option value="">All Device Types</option>';
$types_options = "<select name='type' id='type' class='form-control input-sm'>";
$types_options .= "<option value=''>All Device Types</option>";
foreach (dbFetch($types, $param) as $data) {
if ($data['type']) {
if ($data['type'] == $vars['type']) {
@@ -344,42 +348,28 @@ if ($format == "graph") {
} else {
$type_selected = '';
}
$types_options .= '<option value="' . $data['type'] . '" ' . $type_selected . '> ' . ucfirst($data['type']) . '</option>';
$types_options .= "<option value='" . $data['type'] . "' " . $type_selected . ">" . ucfirst($data['type']) . "</option>";
}
}
$types_options .= '</select>';
if (isset($vars['searchbar']) && $vars['searchbar'] == "hide") {
$searchbar = '';
} else {
$searchbar = '
<div class="panel panel-default panel-condensed">
<form method="post" action="" class="form-inline devices-search-header" role="form">
<div class="form-group">
<input type="text" name="hostname" id="hostname" value="' . $vars['hostname'] . '" class="form-control input-sm" placeholder="Hostname">
</div>
<div class="form-group">' . $os_options . '</div>
<div class="form-group">' . $ver_options . '</div>
<div class="form-group">' . $platform_options . '</div>
<div class="form-group">' . $features_options . '</div>
<div class="form-group">' . $locations_options . '</div>
<div class="form-group">' . $types_options . '</div>
<input type="submit" class="btn btn-default input-sm devices-input-small" value="Search">
<a href="' . generate_url($vars) . '" title="Update the browser URL to reflect the search criteria." class="btn btn-default input-sm devices-input-small">Update URL</a>
<a href="' . generate_url(array('page' => 'devices', 'section' => $vars['section'], 'bare' => $vars['bare'])) . '" title="Reset critera to default." class="btn btn-default input-sm devices-input-small">Reset</a>
</form>
</div>
';
}
echo $searchbar;
$types_options .= "</select>";
echo '
<div class="panel panel-default panel-condensed">
<div class="panel-heading">
<div class="row" style="padding: 0px 10px 0px 10px;">
<div class="pull-left">
' . $listoptions . '
</div>
<div class="pull-right">
' . $headeroptions . '
</div>
</div>
</div>
<div class="table-responsive">
<table id="devices" class="table table-condensed table-hover">
<table id="devices" class="table table-hover table-condensed table-striped">
<thead>
<tr>
<th data-column-id="status" data-width="100px" data-searchable="false" data-formatter="status">Status</th>
<th data-column-id="status" data-searchable="false" data-formatter="status"></th>
';
if ($subformat == "detail") {
@@ -408,6 +398,7 @@ if ($format == "graph") {
</thead>
</table>
</div>
</div>
';
?>
@@ -419,14 +410,17 @@ if ($format == "graph") {
columnSelection: true,
formatters: {
"status": function (column, row) {
return "<span class=\"label label-" + row.extra + " devices-status-box-" + row.list_type + "\">" + row.msg + "</span>";
return "<span class=\"alert-status " + row.extra + "\"></span>";
},
"msg": function (column, row) {
return "<span class=\"alert-status\">" + row.msg + "</span>";
},
"icon": function (column, row) {
return "<span class=\"device-table-icon\">" + row.icon + "</span>";
}
},
templates: {
header: "<div class=\"devices-headers-table-menu\"><p class=\"{{css.actions}}\"></p></div><div class=\"row\"></div>"
header: "<div class=\"devices-headers-table-menu\" style=\"padding:6px 6px 0px 0px;\"><p class=\"{{css.actions}}\"></p></div><div class=\"row\"></div>"
},
post: function () {
@@ -449,7 +443,30 @@ if ($format == "graph") {
url: "ajax_table.php"
});
<?php
if (!isset($vars['searchbar']) && $vars['searchbar'] != "hide") {
?>
$(".devices-headers-table-menu").append(
"<div class='pull-left'>" +
"<form method='post' action='' class='form-inline devices-search-header' role='form'>" +
"<div class='form-group'>" +
"<input type='text' name='hostname' id='hostname' value=''<?php echo $vars['hostname']; ?>'' class='form-control input-sm' placeholder='Hostname'>" +
"</div>" +
"<div class='form-group'><?php echo $os_options; ?></div>" +
"<div class='form-group'><?php echo $ver_options; ?></div>" +
"<div class='form-group'><?php echo $platform_options; ?></div>" +
"<div class='form-group'><?php echo $features_options; ?></div>" +
"<div class='form-group'><?php echo $locations_options; ?></div>" +
"<div class='form-group'><?php echo $types_options; ?></div>" +
"<input type='submit' class='btn btn-default input-sm devices-input-small' value='Search'>" +
"<a href=''<?php generate_url($vars) ?>'' title='Update the browser URL to reflect the search criteria.' class='btn btn-default input-sm devices-input-small'>Update URL</a>" +
"<a href=''<?php generate_url(array('page' => 'devices', 'section' => $vars['section'], 'bare' => $vars['bare'])) ?>'' title='Reset critera to default.' class='btn btn-default input-sm devices-input-small'>Reset</a>" +
"</form>" +
"</div>"
);
<?php
}
?>
</script>
<?php
}