Network page improvements

This commit is contained in:
Jokob-sk
2023-01-15 14:23:32 +11:00
parent 3c13f82d61
commit f5546b6a49
8 changed files with 212 additions and 83 deletions

View File

@@ -253,13 +253,13 @@
<!-- Network -->
<h4 class="bottom-border-aqua"><?php echo lang('DevDetail_MainInfo_Network_Title');?></h4>
<div class="form-group">
<label class="col-sm-6 control-label"><?php echo lang('DevDetail_MainInfo_Network');?></label>
<div class="col-sm-6">
<label class="col-sm-3 control-label"><?php echo lang('DevDetail_MainInfo_Network');?></label>
<div class="col-sm-9">
<div class="input-group">
<input class="form-control" id="txtNetworkNodeMac" type="text" value="--">
<span class="input-group-addon"><i class="fa fa-square-up-right drp-edit" onclick="goToNetworkNode('txtNetworkNodeMac');"></i></span>
<div class="input-group-btn">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false" id="buttonNetworkNodeMac">
<span class="fa fa-caret-down"></span></button>
<ul id="dropdownNetworkNodeMac" class="dropdown-menu dropdown-menu-right">
@@ -270,8 +270,8 @@
</div>
</div>
<div class="form-group">
<label class="col-sm-6 control-label"><?php echo lang('DevDetail_MainInfo_Network_Port');?></label>
<div class="col-sm-6">
<label class="col-sm-3 control-label"><?php echo lang('DevDetail_MainInfo_Network_Port');?></label>
<div class="col-sm-9">
<input class="form-control" id="txtNetworkPort" type="text" value="--">
</div>
</div>
@@ -547,7 +547,7 @@
<th>Port</th>
<th>State</th>
<th>Service</th>
<th>Extra</th>
<th>Extra (Notes)</th>
</tr>
</thead>
<!-- Comment out tbody when trying to implement better table with datatables here -->
@@ -910,6 +910,15 @@ function editDrp(dropdownId)
$('#'+dropdownId).focus();
}
// -----------------------------------------------------------------------------
// Go to the corect network node in the Network section
function goToNetworkNode(dropdownId)
{
setCache('activeNetworkTab', $('#'+dropdownId).val().replaceAll(":","_")+'_id');
window.location.href = './network.php';
}
// -----------------------------------------------------------------------------
// write out the HTML for the dropdown
function writeDropdownHtml(dropdownId, dropdownHtmlContent)

View File

@@ -230,11 +230,11 @@ function setParameter (parameter, value) {
// -----------------------------------------------------------------------------
function saveData(functionName, index, value) {
function saveData(functionName, id, value) {
$.ajax({
method: "GET",
url: "php/server/devices.php",
data: { action: functionName, index: index, value:value },
data: { action: functionName, id: id, value:value },
success: function(data) {
if(sanitize(data) == 'OK')

View File

@@ -669,11 +669,15 @@ function PiaToggleArpScan()
});
}
// --------------------------------------------------------
// Clean log file
var targetLogFile = "";
var logFileAction = "";
// --------------------------------------------------------
function logManage(callback) {
targetLogFile = arguments[0]; // target
logFileAction = arguments[1]; // action
@@ -682,6 +686,7 @@ function logManage(callback) {
'<?php echo lang('Gen_Cancel');?>', '<?php echo lang('Gen_Okay');?>', "performLogManage");
}
// --------------------------------------------------------
function performLogManage() {
// Execute
console.log("targetLogFile:" + targetLogFile)
@@ -697,37 +702,24 @@ function performLogManage() {
})
}
// --------------------------------------------------------
function scrollDown()
{
var tempArea = $('#pialert_log');
$(tempArea[0]).scrollTop(tempArea[0].scrollHeight);
var areaIDs = ['pialert_log', 'pialert_front_log', 'IP_changes_log', 'stdout_log', 'stderr_log', 'pialert_pholus_log', 'pialert_pholus_lastrun_log'];
for (let i = 0; i < areaIDs.length; i++) {
tempArea = $('#pialert_front_log');
$(tempArea[0]).scrollTop(tempArea[0].scrollHeight);
tempArea = $('#IP_changes_log');
$(tempArea[0]).scrollTop(tempArea[0].scrollHeight);
tempArea = $('#stdout_log');
$(tempArea[0]).scrollTop(tempArea[0].scrollHeight);
tempArea = $('#stderr_log');
$(tempArea[0]).scrollTop(tempArea[0].scrollHeight);
tempArea = $('#pialert_pholus_log');
$(tempArea[0]).scrollTop(tempArea[0].scrollHeight);
tempArea = $('#pialert_pholus_lastrun_log');
$(tempArea[0]).scrollTop(tempArea[0].scrollHeight);
var tempArea = $('#' + areaIDs[i]);
$(tempArea[0]).scrollTop(tempArea[0].scrollHeight);
}
}
// --------------------------------------------------------
function initializeTabs () {
key = "activeMaintenanceTab"
// --------------------------------------------------------
// default selection
selectedTab = "tab_Settings"
@@ -736,9 +728,8 @@ function initializeTabs () {
// update cookie if target specified
if(target != "")
{
// console.log(target)
setCache(key, target+'_id')
{
setCache(key, target+'_id') // _id is added so it doesn't conflict with AdminLTE tab behavior
}
// get the tab id from the cookie (already overriden by the target)
@@ -748,10 +739,6 @@ function initializeTabs () {
}
// Activate panel
if(!emptyArr.includes(getCache(key)))
{
selectedTab = getCache(key);
}
$('.nav-tabs a[id='+ selectedTab +']').tab('show');
// When changed save new current tab
@@ -770,6 +757,8 @@ function initializeTabs () {
});
}
// --------------------------------------------------------
// save language in a cookie
$('#langselector').on('change', function (e) {
var optionSelected = $("option:selected", this);
@@ -777,7 +766,7 @@ $('#langselector').on('change', function (e) {
setCookie("language",valueSelected )
location.reload();
});
// --------------------------------------------------------
// load footer asynchronously not to block the page load/other sections
window.onload = function asyncFooter()

View File

@@ -20,7 +20,7 @@
<section class="content-header">
<?php require 'php/templates/notification.php'; ?>
<h1 id="pageTitle">
<?php echo lang('Network_Title');?>
<i class="fa fa-network-wired"></i> <?php echo lang('Network_Title');?>
</h1>
</section>
@@ -47,9 +47,9 @@
$node_badge = circle_offline;
}
$idFromMac = str_replace(":", "_", $node_mac);
$str_tab_header = '<li class="'.$activetab.'">
<a href="#'.str_replace(":", "_", $node_mac).'" data-toggle="tab" >'
<a href="#'.$idFromMac.'" id="'.$idFromMac.'_id" data-toggle="tab" >' // _id is added so it doesn't conflict with AdminLTE tab behavior
.$node_name.' ' .$str_port.$node_badge.
'</a>
</li>';
@@ -71,17 +71,29 @@
$node_badge = badge_offline;
}
$str_tab_pane = '<div class="tab-pane '.$activetab.'" id="'.str_replace(":", "_", $node_mac).'">
<a href="./deviceDetails.php?mac='.$node_mac.'">
<h4>'.$node_name.'</h4>
</a>
<table class="table table-striped" style="width:200px;">
$idFromMac = str_replace(":", "_", $node_mac);
$idParentMac = str_replace(":", "_", $node_parent_mac);
$str_tab_pane = '<div class="tab-pane '.$activetab.'" id="'.$idFromMac.'">
<div>
<h2 class="page-header"><i class="fa fa-server"></i> '.lang('Network_Node'). '</h2>
</div>
<table class="table table-striped" >
<tbody>
<tr>
<td >
<b>MAC:</b>
<td class="col-sm-3">
<b>'.lang('Network_Node').'</b>
</td>
<td class="anonymize">'
<td class="anonymize">
<a href="./deviceDetails.php?mac='.$node_mac.'">
'.$node_name.'
</a>
</td>
</tr>
<tr>
<td >
<b>MAC</b>
</td>
<td data-mynodemac="'.$node_mac.'" class="anonymize">'
.$node_mac.
'</td>
</tr>
@@ -95,7 +107,7 @@
</tr>
<tr>
<td>
<b>'.lang('Network_Table_State').':</b>
<b>'.lang('Network_Table_State').'</b>
</td>
<td> '
.$node_badge.
@@ -103,29 +115,33 @@
</tr>
<tr>
<td>
<b>'.lang('DevDetail_MainInfo_Network').'</b>
<b>'.lang('Network_Parent').'</b>
</td>
<td>
<a href="./deviceDetails.php?mac='.$node_parent_mac.'">
<b class="anonymize">'.$node_parent_mac.'</b>
<a onclick="setCache(\'activeNetworkTab\',\''.$idParentMac.'_id\')" href="./network.php">
<b class="anonymize">'.$idParentMac.' <i class="fa fa-square-up-right"></i></b>
</a>
</td>
</tr>
</tbody>
</table>
<br>
<div class="box-body no-padding">';
<div id="assignedDevices" class="box-body no-padding">
<div class="page-header">
<h3>
<i class="fa fa-sitemap"></i> '.lang('Network_Connected').'
</h3>
</div>
';
$str_table = ' <h4>
'.lang('Device_Title').'
</h4>
<table class="table table-striped">
$str_table = ' <table class="table table-striped">
<tbody>
<tr>
<th style="width: 40px">Port</th>
<th style="width: 100px">'.lang('Network_Table_State').'</th>
<th>'.lang('Network_Table_Hostname').'</th>
<th>'.lang('Network_Table_IP').'</th>
<th class="col-sm-1" >Port</th>
<th class="col-sm-1" >'.lang('Network_Table_State').'</th>
<th class="col-sm-2" >'.lang('Network_Table_Hostname').'</th>
<th class="col-sm-1" >'.lang('Network_Table_IP').'</th>
<th class="col-sm-3" >'.lang('Network_ManageLeaf').'</th>
</tr>';
// Prepare Array for Devices with Port value
@@ -204,6 +220,9 @@
<td class="anonymize">'
.$row['last_ip'].
'</td>
<td class="">
<button class="btn btn-primary btn-danger" data-myleafmac="'.$row['mac'].'" >'.lang('Network_ManageUnassign').'</button>
</td>
</tr>';
}
@@ -214,13 +233,9 @@
// no connected device - don't render table, just display some info
if($str_table_rows == "")
{
$str_table = "<div>
<h4>
".lang('Device_Title')."
</h4>
$str_table = "<div>
<div>
This network device (node) doesn't have any assigned devices (leaf nodes).
Go to <a href='devices.php'><b>".lang('Device_Title')."</b></a>, select a device you want to attach to this node and assign it in the <b>Details</b> tab by selecting it in the <b>".lang('DevDetail_MainInfo_Network') ."</b> dropdown.
".lang("Network_NoAssignedDevices")."
</div>
</div>";
$str_table_close = "";
@@ -354,17 +369,19 @@
if (!(empty($tableData))) {
$str_table_header = '
<div class="content">
<div class="box box-aqua box-body">
<div id="unassignedDevices" class="box box-aqua box-body">
<section>
<h4>
'.lang('Network_UnassignedDevices').'
</h4>
<h3>
<i class="fa fa-laptop"></i> '.lang('Network_UnassignedDevices').'
</h3>
<table class="table table-striped">
<tbody>
<tr>
<th style="width: 100px">'.lang('Network_Table_State').'</th>
<th>'.lang('Network_Table_Hostname').'</th>
<th>'.lang('Network_Table_IP').'</th>
<th class="col-sm-1" ></th>
<th class="col-sm-1" >'.lang('Network_Table_State').'</th>
<th class="col-sm-2" >'.lang('Network_Table_Hostname').'</th>
<th class="col-sm-1" >'.lang('Network_Table_IP').'</th>
<th class="col-sm-3" >'.lang('Network_Assign').'</th>
</tr>';
$str_table_rows = "";
@@ -378,7 +395,9 @@
}
$str_table_rows = $str_table_rows.
'<tr>
'
<tr>
<td> </td>
<td>'
.$state.
'</td>
@@ -389,9 +408,11 @@
</td>
<td>'
.$row['last_ip'].
'</td>
'</td>
<td>
<button class="btn btn-primary" data-myleafmac="'.$row['mac'].'" >'.lang('Network_ManageAssign').'</button>
</td>
</tr>';
}
$str_table_close = '</tbody>
@@ -415,3 +436,75 @@
<?php
require 'php/templates/footer.php';
?>
<script defer>
// ---------------------------------------------------------------------------
// events on tab change
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
initButtons();
});
// ---------------------------------------------------------------------------
function initTab()
{
key = "activeNetworkTab"
// default selection
selectedTab = "Internet_id"
// the #target from the url
target = window.location.hash.substr(1)
// update cookie if target specified
if(target != "")
{
setCache(key, target+'_id') // _id is added so it doesn't conflict with AdminLTE tab behavior
}
// get the tab id from the cookie (already overriden by the target)
if(!emptyArr.includes(getCache(key)))
{
selectedTab = getCache(key);
}
// Activate panel
$('.nav-tabs a[id='+ selectedTab +']').tab('show');
// When changed save new current tab
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
setCache(key, $(e.target).attr('id'))
});
}
// ---------------------------------------------------------------------------
function initButtons()
{
// init parent node
var currentNodeMac = $(".tab-content .active td[data-mynodemac]").attr('data-mynodemac');
// init the Assign buttons
$('#unassignedDevices button[data-myleafmac]').each(function(){
$(this).attr('onclick', 'updateLeaf("'+$(this).attr('data-myleafmac')+'","'+currentNodeMac+'")')
});
// init Unassign buttons
$('#assignedDevices button[data-myleafmac]').each(function(){
$(this).attr('onclick', 'updateLeaf("'+$(this).attr('data-myleafmac')+'","")')
});
}
// ---------------------------------------------------------------------------
function updateLeaf(leafMac,nodeMac)
{
saveData('updateNetworkLeaf', leafMac, nodeMac);
setTimeout("location.reload();", 1000); // refresh page after 1s
}
// init selected (first) tab
initTab();
</script>

View File

@@ -58,6 +58,7 @@
case 'getPholus': getPholus(); break;
case 'getNmap': getNmap(); break;
case 'saveNmapPort': saveNmapPort(); break;
case 'updateNetworkLeaf': updateNetworkLeaf(); break;
default: logServerConsole ('Action: '. $action); break;
}
@@ -969,7 +970,7 @@ function getNmap() {
function saveNmapPort()
{
$portIndex = $_REQUEST['index'];
$portIndex = $_REQUEST['id'];
$value = $_REQUEST['value'];
if(is_integer((int)$portIndex))
@@ -987,9 +988,35 @@ function saveNmapPort()
echo 'KO';
}
}
// echo "asdasdasasd";
}
// ----------------------------------------------------------------------------------------
function updateNetworkLeaf()
{
$nodeMac = $_REQUEST['value'];
$leafMac = $_REQUEST['id'];
if ((false === filter_var($nodeMac , FILTER_VALIDATE_MAC) && $nodeMac != "Internet" && $nodeMac != "") || false === filter_var($leafMac , FILTER_VALIDATE_MAC) ) {
throw new Exception('Invalid mac address');
}
else
{
global $db;
// sql
$sql = 'UPDATE Devices SET "dev_Network_Node_MAC_ADDR" = "'. $nodeMac .'" WHERE "dev_MAC"="' . $leafMac.'"' ;
// update Data
$result = $db->query($sql);
// check result
if ($result == TRUE) {
echo 'OK';
} else {
echo 'KO';
}
}
}
//------------------------------------------------------------------------------
// Status Where conditions

View File

@@ -205,6 +205,8 @@ function cleanLog($logFile)
}
}
// ----------------------------------------------------------------------------------------
function saveSettings()
{

View File

@@ -222,7 +222,7 @@ if ($ENABLED_DARKMODE === True) {
</li>
<li class=" <?php if (in_array (basename($_SERVER['SCRIPT_NAME']), array('network.php') ) ){ echo 'active'; } ?>">
<a href="network.php"><i class="fa fa-server"></i> <span><?php echo lang('Navigation_Network');?></span></a>
<a href="network.php"><i class="fa fa-network-wired"></i> <span><?php echo lang('Navigation_Network');?></span></a>
</li>
<li class=" <?php if (in_array (basename($_SERVER['SCRIPT_NAME']), array('maintenance.php') ) ){ echo 'active'; } ?>">

View File

@@ -170,9 +170,9 @@ $lang['en_us'] = array(
'DevDetail_MainInfo_Group' => 'Group',
'DevDetail_MainInfo_Location' => 'Location',
'DevDetail_MainInfo_Comments' => 'Comments',
'DevDetail_MainInfo_Network_Title' => 'Network',
'DevDetail_MainInfo_Network' => 'Network Node (MAC)',
'DevDetail_MainInfo_Network_Port' => 'Connected to Port',
'DevDetail_MainInfo_Network_Title' => '<i class="fa fa-network-wired"></i> Network',
'DevDetail_MainInfo_Network' => '<i class="fa fa-server"></i> Node (MAC)',
'DevDetail_MainInfo_Network_Port' => '<i class="fa fa-ethernet"></i> Port',
'DevDetail_SessionInfo_Title' => 'Session Info',
'DevDetail_SessionInfo_Status' => 'Status',
'DevDetail_SessionInfo_FirstSession' => 'First Session',
@@ -339,6 +339,8 @@ $lang['en_us'] = array(
'Network_Title' => 'Network overview',
'Network_ManageDevices' => 'Manage Devices',
'Network_ManageAdd' => 'Add Device',
'Network_ManageAssign' => 'Assign Device',
'Network_ManageUnassign' => 'Unassign',
'Network_ManageEdit' => 'Update Device',
'Network_ManageDel' => 'Delete Device',
'Network_ManageAdd_Name' => 'Device Name',
@@ -364,6 +366,13 @@ $lang['en_us'] = array(
'Network_Table_Hostname' => 'Hostname',
'Network_Table_IP' => 'IP',
'Network_UnassignedDevices' => 'Unassigned devices',
'Network_Assign' => 'Connect to the above <i class="fa fa-server"></i> Network node',
'Network_Connected' => 'Connected devices',
'Network_ManageLeaf' => 'Manage assignment',
'Network_Node' => 'Network node',
'Network_Node_Name' => 'Node name',
'Network_Parent' => 'Parent network device',
'Network_NoAssignedDevices' => 'This network node doesn\'t have any assigned devices (leaf nodes). Assign one from bellow or go to the <b>Details</b> tab of any device in <a href="devices.php"><b> <i class="fa fa-laptop"></i> Devices</b></a>, and assign it to a network <b><i class="fa fa-server"></i> Node (MAC)</b> and <b><i class="fa fa-ethernet"></i> Port</b> there.',
//////////////////////////////////////////////////////////////////
// Help Page