From 5569884f7f714bc6ff6131c55ea718fbd4e0cc1e Mon Sep 17 00:00:00 2001 From: crcro Date: Sun, 16 Oct 2016 17:58:48 +0300 Subject: [PATCH] webui: Updated devices view (#4700) --- html/css/styles.css | 72 ++++ html/includes/table/devices.inc.php | 127 +++---- html/pages/devices.inc.php | 529 +++++++++++++--------------- 3 files changed, 390 insertions(+), 338 deletions(-) diff --git a/html/css/styles.css b/html/css/styles.css index d520755128..1d45057b26 100644 --- a/html/css/styles.css +++ b/html/css/styles.css @@ -2057,3 +2057,75 @@ label { padding-top: 15px !important; } } + +/* devices layout modifications */ +.devices-font-bold { + font-weight: bold; +} + +.devices-float-right { + float: right; +} + +.devices-graphs-select { + margin-right: 5px; +} + +.devices-search-header { + margin: 5px; +} + +.devices-input-small { + line-height: 14px; +} + +.devices-status-box-detail { + line-height: 16px; + margin-left: 5px; + font-size: 14px; + width: 80px; + display: block; + height: 24px; + text-align: center; + vertical-align: middle; + margin-top: 8px; +} + +.devices-status-box-basic { + margin-left: 5px; + width: 70px; + display: block; + text-align: center; +} + +.devices-headers-table-menu { + padding: 0; + float: right; +} + +.devices-overlib-box { + display: block; + padding: 1px; + margin: 2px; + min-height: 170px; + max-height: 170px; + text-align: center; + float: left; + background-color: #f5f5f5; +} + +.device-table-header-status { + width: 100px; + text-align: center; +} + +.device-table-header-vendor { + width: 100px; + text-align: center; +} + +.device-table-icon { + text-align: center; + display: block; + width: 70px; +} \ No newline at end of file diff --git a/html/includes/table/devices.inc.php b/html/includes/table/devices.inc.php index 0a9773b046..ef9c2469a8 100644 --- a/html/includes/table/devices.inc.php +++ b/html/includes/table/devices.inc.php @@ -6,8 +6,8 @@ $param = array(); $sql = ' FROM `devices`'; if (is_admin() === false && is_read() === false) { - $sql .= ' LEFT JOIN `devices_perms` AS `DP` ON `devices`.`device_id` = `DP`.`device_id`'; - $where .= ' AND `DP`.`user_id`=?'; + $sql .= ' LEFT JOIN `devices_perms` AS `DP` ON `devices`.`device_id` = `DP`.`device_id`'; + $where .= ' AND `DP`.`user_id`=?'; $param[] = $_SESSION['user_id']; } @@ -18,36 +18,36 @@ if (!empty($_POST['location'])) { $sql .= " WHERE $where "; if (!empty($_POST['hostname'])) { - $sql .= ' AND hostname LIKE ?'; - $param[] = '%'.$_POST['hostname'].'%'; + $sql .= ' AND hostname LIKE ?'; + $param[] = '%' . $_POST['hostname'] . '%'; } if (!empty($_POST['os'])) { - $sql .= ' AND os = ?'; + $sql .= ' AND os = ?'; $param[] = $_POST['os']; } if (!empty($_POST['version'])) { - $sql .= ' AND version = ?'; + $sql .= ' AND version = ?'; $param[] = $_POST['version']; } if (!empty($_POST['hardware'])) { - $sql .= ' AND hardware = ?'; + $sql .= ' AND hardware = ?'; $param[] = $_POST['hardware']; } if (!empty($_POST['features'])) { - $sql .= ' AND features = ?'; + $sql .= ' AND features = ?'; $param[] = $_POST['features']; } if (!empty($_POST['type'])) { if ($_POST['type'] == 'generic') { - $sql .= " AND ( type = ? OR type = '')"; + $sql .= " AND ( type = ? OR type = '')"; $param[] = $_POST['type']; } else { - $sql .= ' AND type = ?'; + $sql .= ' AND type = ?'; $param[] = $_POST['type']; } } @@ -62,12 +62,12 @@ if (!empty($_POST['state'])) { } if (!empty($_POST['disabled'])) { - $sql .= ' AND disabled= ?'; + $sql .= ' AND disabled= ?'; $param[] = $_POST['disabled']; } if (!empty($_POST['ignore'])) { - $sql .= ' AND `ignore`= ?'; + $sql .= ' AND `ignore`= ?'; $param[] = $_POST['ignore']; } @@ -76,7 +76,7 @@ if (!empty($_POST['location']) && $_POST['location'] == 'Unset') { } if (!empty($_POST['location'])) { - $sql .= " AND `location` = ?"; + $sql .= " AND `location` = ?"; $param[] = $_POST['location']; } @@ -84,11 +84,11 @@ if (!empty($_POST['group'])) { include_once '../includes/device-groups.inc.php'; $sql .= ' AND ( '; foreach (GetDevicesFromGroup($_POST['group']) as $dev) { - $sql .= '`devices`.`device_id` = ? OR '; + $sql .= '`devices`.`device_id` = ? OR '; $param[] = $dev; } - $sql = substr($sql, 0, (strlen($sql) - 3)); + $sql = substr($sql, 0, (strlen($sql) - 3)); $sql .= ' )'; } @@ -106,7 +106,7 @@ if (!isset($sort) || empty($sort)) { $sql .= " ORDER BY $sort"; if (isset($current)) { - $limit_low = (($current * $rowCount) - ($rowCount)); + $limit_low = (($current * $rowCount) - ($rowCount)); $limit_high = $rowCount; } @@ -131,27 +131,28 @@ foreach (dbFetchRows($sql, $param) as $device) { if ($device['status'] == '0') { $extra = 'danger'; - $msg = $device['status_reason']; + $msg = $device['status_reason']; } else { $extra = 'success'; - $msg = 'up'; + $msg = 'up'; } if ($device['ignore'] == '1') { $extra = 'default'; - $msg = 'ignored'; + $msg = 'ignored'; if ($device['status'] == '1') { $extra = 'warning'; - $msg = 'ignored'; + $msg = 'ignored'; } } if ($device['disabled'] == '1') { $extra = 'default'; - $msg = 'disabled'; + $msg = 'disabled'; } - $type = strtolower($device['os']); + $type = strtolower($device['os']); + $image = getImage($device); if ($device['os'] == 'ios') { @@ -159,78 +160,80 @@ foreach (dbFetchRows($sql, $param) as $device) { } $device['os_text'] = $config['os'][$device['os']]['text']; - $port_count = dbFetchCell('SELECT COUNT(*) FROM `ports` WHERE `device_id` = ?', array($device['device_id'])); - $sensor_count = dbFetchCell('SELECT COUNT(*) FROM `sensors` WHERE `device_id` = ?', array($device['device_id'])); + $port_count = dbFetchCell('SELECT COUNT(*) FROM `ports` WHERE `device_id` = ?', array($device['device_id'])); + $sensor_count = dbFetchCell('SELECT COUNT(*) FROM `sensors` WHERE `device_id` = ?', array($device['device_id'])); + + $actions = ' +
+
+
View device
+
View alerts
+ '; - $actions = ('
-
'); - $actions .= ' View device '; - $actions .= ('
-
'); - $actions .= ' View alerts '; - $actions .= '
'; if ($_SESSION['userlevel'] >= '7') { - $actions .= ('
- Edit device -
'); + $actions .= '
Edit device
'; } - $actions .= ('
-
-
- telnet -
-
- ssh -
-
- https -
-
'); + if ($subformat == 'detail') { + $actions .= '
'; + } + $actions .= ' +
telnet
+
ssh
+
https
+
+
+ '; $hostname = generate_device_link($device); - $platform = $device['hardware'].'
'.$device['features']; - $os = $device['os_text'].'
'.$device['version']; + if (extension_loaded('mbstring')) { $location = mb_substr($device['location'], 0, 32, 'utf8'); } else { $location = truncate($device['location'], 32, ''); } - $uptime = formatUptime($device['uptime'], 'short').'
'.$location; if ($subformat == 'detail') { - $hostname .= '
'.$device['sysName']; + $platform = $device['hardware'] . '
' . $device['features']; + $os = $device['os_text'] . '
' . $device['version']; + $uptime = formatUptime($device['uptime'], 'short'); + $hostname .= '
' . $device['sysName']; if (empty($port_count)) { $port_count = 0; $col_port = ''; } if ($port_count) { - $col_port = ' '.$port_count.'
'; + $col_port = ' ' . $port_count . '
'; } if ($sensor_count) { - $col_port .= ' '.$sensor_count; + $col_port .= ' ' . $sensor_count; } } else { + $platform = $device['hardware']; + $os = $device['os_text'] . ' ' . $device['version']; + $uptime = formatUptime($device['uptime'], 'short'); } $response[] = array( - 'extra' => $extra, - 'msg' => $msg, - 'icon' => $image, + 'extra' => $extra, + 'msg' => $msg, + 'list_type' => $subformat, + 'icon' => $image, 'hostname' => $hostname, - 'ports' => $col_port, + 'ports' => $col_port, 'hardware' => $platform, - 'os' => $os, - 'uptime' => $uptime, - 'actions' => $actions, + 'os' => $os, + 'uptime' => $uptime, + 'location' => $location, + 'actions' => $actions, ); }//end foreach $output = array( - 'current' => $current, + 'current' => $current, 'rowCount' => $rowCount, - 'rows' => $response, - 'total' => $total, + 'rows' => $response, + 'total' => $total, ); echo _json_encode($output); diff --git a/html/pages/devices.inc.php b/html/pages/devices.inc.php index b6b1f1de6b..25e8dff91d 100644 --- a/html/pages/devices.inc.php +++ b/html/pages/devices.inc.php @@ -10,96 +10,83 @@ $pagetitle[] = "Devices"; print_optionbar_start(); -echo('Lists » '); +echo 'Lists: '; $menu_options = array('basic' => 'Basic', 'detail' => 'Detail'); $sep = ""; foreach ($menu_options as $option => $text) { echo($sep); - if ($vars['format'] == "list_".$option) { - echo(""); + if ($vars['format'] == "list_" . $option) { + echo ''; } - echo('' . $text . ''); - if ($vars['format'] == "list_".$option) { - echo(""); + echo '' . $text . ''; + if ($vars['format'] == "list_" . $option) { + echo ''; } $sep = " | "; } -?> +echo ' | Graphs: '; - | - -Graphs » - - 'Bits', - 'processor' => 'CPU', - 'ucd_load' => 'Load', - 'mempool' => 'Memory', - 'uptime' => 'Uptime', - 'storage' => 'Storage', - 'diskio' => 'Disk I/O', +$menu_options = array('bits' => 'Bits', + 'processor' => 'CPU', + 'ucd_load' => 'Load', + 'mempool' => 'Memory', + 'uptime' => 'Uptime', + 'storage' => 'Storage', + 'diskio' => 'Disk I/O', 'poller_perf' => 'Poller', - 'ping_perf' => 'Ping', + 'ping_perf' => 'Ping', 'temperature' => 'Temperature' ); $sep = ""; foreach ($menu_options as $option => $text) { - echo($sep); - if ($vars['format'] == 'graph_'.$option) { - echo(""); + echo $sep; + if ($vars['format'] == 'graph_' . $option) { + echo ''; } - echo('' . $text . ''); - if ($vars['format'] == 'graph_'.$option) { - echo(""); + echo '' . $text . ''; + if ($vars['format'] == 'graph_' . $option) { + echo ''; } $sep = " | "; } -?> +echo '
'; -
- - +$graphs_types .= ''; - '')).'">Restore Search'); + echo('Restore Search'); } else { - echo('Remove Search'); + echo('Remove Search'); } echo(" | "); if (isset($vars['bare']) && $vars['bare'] == "yes") { - echo('Restore Header'); + echo('Restore Header'); } else { - echo('Remove Header'); + echo('Remove Header'); } print_optionbar_end(); -?> -
- -'; list($format, $subformat) = explode("_", $vars['format'], 2); @@ -141,7 +128,7 @@ if ($format == "graph") { if (!empty($vars['hostname'])) { $where .= " AND hostname LIKE ?"; - $sql_param[] = "%".$vars['hostname']."%"; + $sql_param[] = "%" . $vars['hostname'] . "%"; } if (!empty($vars['os'])) { $where .= " AND os = ?"; @@ -196,7 +183,7 @@ if ($format == "graph") { $where .= "device_id = ? OR "; $sql_param[] = $dev; } - $where = substr($where, 0, strlen($where)-3); + $where = substr($where, 0, strlen($where) - 3); $where .= " )"; } @@ -210,7 +197,7 @@ if ($format == "graph") { $row = 1; foreach (dbFetchRows($query, $sql_param) as $device) { - if (is_integer($row/2)) { + if (is_integer($row / 2)) { $row_colour = $list_colour_a; } else { $row_colour = $list_colour_b; @@ -218,31 +205,32 @@ if ($format == "graph") { if (device_permitted($device['device_id'])) { if (!$location_filter || $device['location'] == $location_filter) { - $graph_type = "device_".$subformat; + $graph_type = "device_" . $subformat; if ($_SESSION['widescreen']) { - $width=270; + $width = 270; } else { - $width=315; + $width = 315; } - $graph_array_new = array(); - $graph_array_new['type'] = $graph_type; - $graph_array_new['device'] = $device['device_id']; - $graph_array_new['height'] = '110'; - $graph_array_new['width'] = $width; - $graph_array_new['legend'] = 'no'; - $graph_array_new['title'] = 'yes'; - $graph_array_new['from'] = $graph_array['from']; - $graph_array_new['to'] = $graph_array['to']; + $graph_array_new = array(); + $graph_array_new['type'] = $graph_type; + $graph_array_new['device'] = $device['device_id']; + $graph_array_new['height'] = '110'; + $graph_array_new['width'] = $width; + $graph_array_new['legend'] = 'no'; + $graph_array_new['title'] = 'yes'; + $graph_array_new['from'] = $graph_array['from']; + $graph_array_new['to'] = $graph_array['to']; - $graph_array_zoom = $graph_array_new; + $graph_array_zoom = $graph_array_new; $graph_array_zoom['height'] = '150'; - $graph_array_zoom['width'] = '400'; + $graph_array_zoom['width'] = '400'; $graph_array_zoom['legend'] = 'yes'; - $overlib_link = "device/device=".$device['device_id']."/"; - echo "
"; + $overlib_link = "device/device=" . $device['device_id'] . "/"; + + echo '
'; echo '
'; echo overlib_link($overlib_link, generate_lazy_graph_tag($graph_array_new), generate_graph_tag($graph_array_zoom), null); echo "
\n\n"; @@ -250,224 +238,213 @@ if ($format == "graph") { } } } else { -?> + if (is_admin() === true || is_read() === true) { + $os = "SELECT `os` FROM `devices` AS D WHERE 1 GROUP BY `os` ORDER BY `os`"; + $ver = "SELECT `version` FROM `devices` AS D WHERE 1 GROUP BY `version` ORDER BY `version`"; + $platform = "SELECT `hardware` FROM `devices` AS D WHERE 1 GROUP BY `hardware` ORDER BY `hardware`"; + $features = "SELECT `features` FROM `devices` AS D WHERE 1 GROUP BY `features` ORDER BY `features`"; + $types = "SELECT `type` FROM `devices` AS D WHERE 1 GROUP BY `type` ORDER BY `type`"; + } else { + $os = "SELECT `os` FROM `devices` AS `D`, `devices_perms` AS `P` WHERE `P`.`user_id` = ? AND `P`.`device_id` = `D`.`device_id` GROUP BY `os` ORDER BY `os`"; + $ver = "SELECT `version` FROM `devices` AS `D`, `devices_perms` AS `P` WHERE `P`.`user_id` = ? AND `P`.`device_id` = `D`.`device_id` GROUP BY `version` ORDER BY `version`"; + $platform = "SELECT `hardware` FROM `devices` AS `D`, `devices_perms` AS `P` WHERE `P`.`user_id` = ? AND `P`.`device_id` = `D`.`device_id` GROUP BY `hardware` ORDER BY `hardware`"; + $features = "SELECT `features` FROM `devices` AS `D`, `devices_perms` AS `P` WHERE `P`.`user_id` = ? AND `P`.`device_id` = `D`.`device_id` GROUP BY `features` ORDER BY `features`"; + $types = "SELECT `type` FROM `devices` AS `D`, `devices_perms` AS `P` WHERE `P`.`user_id` = ? AND `P`.`device_id` = `D`.`device_id` GROUP BY `type` ORDER BY `type`"; + $param[] = $_SESSION['user_id']; + } -
+ + $os_options = ''; + + $ver_options = ''; + + $platform_options = ''; + + + $features_options = ''; + + $locations_options = ''; + + $types_options = ''; + + if (isset($vars['searchbar']) && $vars['searchbar'] == "hide") { + $searchbar = ''; + } else { + $searchbar = ' +
+
+
+ +
+
' . $os_options . '
+
' . $ver_options . '
+
' . $platform_options . '
+
' . $features_options . '
+
' . $locations_options . '
+
' . $types_options . '
+ + Update URL + Reset +
+
+ '; + } + + echo $searchbar; + + echo '
- +
- - - - + + '; + + if ($subformat == "detail") { + echo ''; + } + + echo ''; + + if ($subformat == "detail") { + echo ''; + } + + echo ' - + + '; + + if ($subformat == "detail") { + echo ''; + } + + echo '
StatusVendorDeviceStatusVendorDeviceMetricsPlatform Operating SystemUptime/LocationUptimeLocationActions
-
- - - + var grid = $("#devices").bootgrid({ + ajax: true, + rowCount: [50, 100, 250, -1], + columnSelection: true, + formatters: { + "status": function (column, row) { + return "" + row.msg + ""; + }, + "icon": function (column, row) { + return "" + row.icon + ""; + } + }, + templates: { + header: "

" + + }, + post: function () { + return { + id: "devices", + format: ' ', + hostname: '', + os: '', + version: '', + hardware: '', + features: '', + location: '', + type: '', + state: '', + disabled: '', + ignore: '', + group: '', + }; + }, + url: "ajax_table.php" + }); + + + +