Network page improvements

front/deviceDetails.php

@@ -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>
+                        <label class="col-sm-3 control-label"><?php echo lang('DevDetail_MainInfo_Network');?></label>
-                        <div class="col-sm-6">  
+                        <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>
+                        <label class="col-sm-3 control-label"><?php echo lang('DevDetail_MainInfo_Network_Port');?></label>
-                        <div class="col-sm-6">
+                        <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)

front/js/pialert_common.js

@@ -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')

front/maintenance.php

@@ -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');
+  var areaIDs = ['pialert_log', 'pialert_front_log', 'IP_changes_log', 'stdout_log', 'stderr_log', 'pialert_pholus_log',  'pialert_pholus_lastrun_log'];
-  $(tempArea[0]).scrollTop(tempArea[0].scrollHeight);
   
-  tempArea = $('#pialert_front_log');
+  for (let i = 0; i < areaIDs.length; i++) {
-  $(tempArea[0]).scrollTop(tempArea[0].scrollHeight);
 
-  tempArea = $('#IP_changes_log');
+    var tempArea = $('#' + areaIDs[i]);
-  $(tempArea[0]).scrollTop(tempArea[0].scrollHeight);
+    $(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);
 
+  }
 }
 
+// --------------------------------------------------------
 function initializeTabs () {  
 
   key = "activeMaintenanceTab"
 
-  // --------------------------------------------------------
-
   // default selection
   selectedTab = "tab_Settings"
 
@@ -737,8 +729,7 @@ function initializeTabs () {
   // update cookie if target specified
   if(target != "")
   {    
-    // console.log(target)
+    setCache(key, target+'_id') // _id is added so it doesn't conflict with AdminLTE tab behavior
-    setCache(key, target+'_id')
   }
 
   // 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()

front/network.php

@@ -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).'">
+        $idFromMac = str_replace(":", "_", $node_mac);
-                            <a href="./deviceDetails.php?mac='.$node_mac.'">
+        $idParentMac = str_replace(":", "_", $node_parent_mac);
-                              <h4>'.$node_name.'</h4>
+        $str_tab_pane = '<div class="tab-pane '.$activetab.'" id="'.$idFromMac.'">
-                            </a>
+                            <div>
-                            <table class="table table-striped" style="width:200px;"> 
+                              <h2 class="page-header"><i class="fa fa-server"></i> '.lang('Network_Node'). '</h2>
+                            </div>
+                            <table class="table table-striped" > 
                               <tbody>
                                 <tr> 
-                                  <td >
+                                  <td class="col-sm-3">
-                                    <b>MAC:</b>
+                                    <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.'">
+                                    <a onclick="setCache(\'activeNetworkTab\',\''.$idParentMac.'_id\')" href="./network.php">
-                                      <b class="anonymize">'.$node_parent_mac.'</b>
+                                      <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>
+        $str_table =      '   <table class="table table-striped">
-                              '.lang('Device_Title').'
-                              </h4>
-                              <table class="table table-striped">
                                 <tbody>
                                 <tr>
-                                  <th style="width: 40px">Port</th>
+                                  <th class="col-sm-1" >Port</th>
-                                  <th style="width: 100px">'.lang('Network_Table_State').'</th>
+                                  <th class="col-sm-1" >'.lang('Network_Table_State').'</th>
-                                  <th>'.lang('Network_Table_Hostname').'</th>
+                                  <th class="col-sm-2" >'.lang('Network_Table_Hostname').'</th>
-                                  <th>'.lang('Network_Table_IP').'</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>';
           
         }        
@@ -215,12 +234,8 @@
         if($str_table_rows == "")
         {
           $str_table = "<div>                        
-                          <h4>
-                            ".lang('Device_Title')."
-                          </h4>
                           <div>
-                            This network device (node) doesn't have any assigned devices (leaf nodes).                             
+                            ".lang("Network_NoAssignedDevices")."
-                            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.
                           </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>
+                              <h3>
-                                '.lang('Network_UnassignedDevices').'
+                                <i class="fa fa-laptop"></i> '.lang('Network_UnassignedDevices').'
-                              </h4>
+                              </h3>
                               <table class="table table-striped">
                                 <tbody>
                                 <tr>                              
-                                  <th style="width: 100px">'.lang('Network_Table_State').'</th>
+                                  <th  class="col-sm-1" ></th>
-                                  <th>'.lang('Network_Table_Hostname').'</th>
+                                  <th  class="col-sm-1" >'.lang('Network_Table_State').'</th>
-                                  <th>'.lang('Network_Table_IP').'</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>
@@ -390,8 +409,10 @@
                                             <td>'
                                               .$row['last_ip'].
                                             '</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>

front/php/server/devices.php

@@ -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

front/php/server/util.php

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

front/php/templates/header.php

@@ -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'; } ?>">

front/php/templates/language/en_us.php

@@ -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_Title' => '<i class="fa fa-network-wired"></i> Network',
-'DevDetail_MainInfo_Network' => 'Network Node (MAC)',
+'DevDetail_MainInfo_Network' => '<i class="fa fa-server"></i> Node (MAC)',
-'DevDetail_MainInfo_Network_Port' => 'Connected to Port',
+'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