From 1c73df18db70b59336dbb710a2cb075ede7e2419 Mon Sep 17 00:00:00 2001
From: gabryon99 <pappalardo@ntop.org>
Date: Mon, 9 Nov 2020 17:05:27 +0100
Subject: [PATCH] add table-responsive class (#4692)

---
 scripts/lua/admin/dhcp.lua                    |  6 ++--
 scripts/lua/flow_details.lua                  | 10 +++---
 scripts/lua/flows_stats.lua                   |  2 +-
 scripts/lua/host_details.lua                  | 32 +++++++++++++------
 scripts/lua/if_stats.lua                      | 13 +++-----
 scripts/lua/inc/service_map.lua               |  8 ++---
 .../notifications/notifications_manager.lua   |  1 -
 7 files changed, 41 insertions(+), 31 deletions(-)

diff --git a/scripts/lua/admin/dhcp.lua b/scripts/lua/admin/dhcp.lua
index b3bb4b274b..af7ad3bc96 100644
--- a/scripts/lua/admin/dhcp.lua
+++ b/scripts/lua/admin/dhcp.lua
@@ -35,8 +35,10 @@ print[[
 <H3>]] print(i18n("dhcp.dhcp")) print[[</H3>
 
 <form id="table-dhcp-form" method="post" data-toggle="validator">
-  <div id="table-dhcp"></div>
-  <button id="dhcp-save" class="btn btn-primary" style="float:right; margin-right:1em;" onclick="if($(this).hasClass('disabled')) return false;" type="submit">]] print(i18n("save_settings")) print[[</button>
+  <div class='table-responsive'><div id="table-dhcp"></div></div>
+  <div class='text-right'>
+    <button id="dhcp-save" class="btn btn-primary mb-1" onclick="if($(this).hasClass('disabled')) return false;" type="submit">]] print(i18n("save_settings")) print[[</button>
+  </div>
 </form>
 
 <script>
diff --git a/scripts/lua/flow_details.lua b/scripts/lua/flow_details.lua
index 7efaee966d..dbfffd06fd 100644
--- a/scripts/lua/flow_details.lua
+++ b/scripts/lua/flow_details.lua
@@ -665,7 +665,7 @@ else
    end
 
    ifstats = interface.getStats()
-   print("<table class=\"table table-bordered table-striped\">\n")
+   print("<div class='table-responsive'><table class=\"table table-bordered table-striped\">\n")
    if ifstats.vlan and flow["vlan"] > 0 then
       print("<tr><th width=30%>")
       print(i18n("details.vlan_id"))
@@ -851,7 +851,7 @@ else
       end
       print("</td></tr>\n")
    end
-   
+
    print("<tr><th width=30%>"..i18n("flow_details.tos").."</th>")
    print("<td>"..(dscp_consts.dscp_descr(flow.tos.client.DSCP)) .." / ".. (dscp_consts.ecn_descr(flow.tos.client.ECN)) .."</td>")
    print("<td>"..(dscp_consts.dscp_descr(flow.tos.server.DSCP)) .." / ".. (dscp_consts.ecn_descr(flow.tos.server.ECN)) .."</td>")
@@ -1173,7 +1173,7 @@ else
 
       score_category_network  = (score_category_network*100)/tot
       score_category_security = 100 - score_category_network
-      
+
       print('<td><div class="progress"><div class="progress-bar bg-warning" style="width: '..score_category_network..'%;">'.. i18n("flow_details.score_category_network"))
       print('</div><div class="progress-bar bg-info" style="width: ' .. score_category_security .. '%;">' .. i18n("flow_details.score_category_security") .. '</div></div></td>\n')
       print("</tr>\n")
@@ -1185,7 +1185,7 @@ else
       print("<td>"..i18n("client").." <i class=\"fas fa-arrow-left\"></i> "..i18n("server")..": ".. string.format("%.3f", flow.entropy.server) .. "</td>")
       print("</tr>\n")
    end
-   
+
    if((flow.client_process == nil) and (flow.server_process == nil)) then
       print("<tr><th width=30%>"..i18n("flow_details.actual_peak_throughput").."</th><td width=20%>")
       if (throughput_type == "bps") then
@@ -1400,7 +1400,7 @@ else
 	 num = num + 1
       end
    end
-   print("</table>\n")
+   print("</table></div>\n")
 end
 
 print [[
diff --git a/scripts/lua/flows_stats.lua b/scripts/lua/flows_stats.lua
index db37aae65a..8883c4c8df 100644
--- a/scripts/lua/flows_stats.lua
+++ b/scripts/lua/flows_stats.lua
@@ -74,7 +74,7 @@ if (page == "flows" or page == nil) then
    page_utils.print_page_title(active_msg)
 
 print [[
-      <div id="table-flows"></div>
+      <div class='table-responsive'><div id="table-flows"></div></div>
         <script>
    var url_update = "]]
 
diff --git a/scripts/lua/host_details.lua b/scripts/lua/host_details.lua
index e4c53e7204..42924485b3 100644
--- a/scripts/lua/host_details.lua
+++ b/scripts/lua/host_details.lua
@@ -465,7 +465,7 @@ local has_snmp_location = host['localhost'] and (host["mac"] ~= "")
    and isAllowedSystemInterface()
 
 if((page == "overview") or (page == nil)) then
-   print("<table class=\"table table-bordered table-striped\">\n")
+   print("<div class='table-responsive'><table class=\"table table-bordered table-striped\">\n")
    if(host["ip"] ~= nil) then
       if(host["mac"]  ~= "00:00:00:00:00:00") then
 	 print("<tr><th width=35%>"..i18n("details.router_access_point_mac_address").."</th><td>" ..get_symbolic_mac(host["mac"]).. " " .. discover.devtype2icon(host["device_type"]))
@@ -892,7 +892,7 @@ end
 
    elseif((page == "packets")) then
       print [[
-
+      <div class='table-responsive'>
       <table class="table table-bordered table-striped">
 	 ]]
 
@@ -933,7 +933,7 @@ end
 
       hostinfo2json(host_info)
       print [[
-      </table>
+      </table></div>
 
         <script type='text/javascript'>
 	       window.onload=function() {
@@ -966,12 +966,14 @@ print [[/lua/get_arp_data.lua', { ifid: "]] print(ifId.."") print ('", '..hostin
 	]]
 
    elseif((page == "DSCP")) then
+      print("<div class='table-responsive'>")
       print('<table class="table table-bordered table-striped">\n')
       print('<tr><th class="text-left">'..i18n("dscp_page.statistics_sent")..'</th><td colspan=5><div class="pie-chart" id="dscpPrecedenceSent"></div></td></tr>')
       print('<tr><th class="text-left">'..i18n("dscp_page.statistics_received")..'</th><td colspan=5><div class="pie-chart" id="dscpPrecedenceReceived"></div></td></tr>')
 
       print [[
       </table>
+      </div>
 
       <script type='text/javascript'>
         window.onload=function() {
@@ -984,6 +986,7 @@ print [[/lua/get_arp_data.lua', { ifid: "]] print(ifId.."") print ('", '..hostin
       ]]
 
    elseif((page == "ports")) then
+      print("<div class='table-responsive'>")
       print('<table class="table table-bordered table-striped">\n')
       if(host.cardinality) then
 	 print('<tr><th class="text-left">'..i18n("ports_page.num_contacted_ports")..'</th>')
@@ -995,7 +998,7 @@ print [[/lua/get_arp_data.lua', { ifid: "]] print(ifId.."") print ('", '..hostin
       print('<tr><th class="text-left">'..i18n("ports_page.server_ports")..'</th><td colspan=5><div class="pie-chart" id="serverPortsDistro"></div></td></tr>')
 
       print [[
-      </table>
+      </table></div>
 
         <script type='text/javascript'>
 	       window.onload=function() {
@@ -1160,6 +1163,7 @@ end
 	print("<div class=\"alert alert-danger\"><img src=".. ntop.getHttpPrefix() .. "/img/warning.png> "..i18n("traffic_page.no_traffic_observed_message").."</div>")
      else
       print [[
+         <div class="table-responsive">
       <table class="table table-bordered table-striped">]]
 
       if(host.cardinality) then
@@ -1215,7 +1219,7 @@ print [[/lua/host_l4_stats.lua', { ifid: "]] print(ifId.."") print('", '..hostin
       end
       print("</table></tr>\n")
 
-      print("</table>\n")
+      print("</table></div>\n")
    end
 
 
@@ -1263,6 +1267,7 @@ elseif((page == "ndpi")) then
       </div>
   <div class="tab-content card-body">
     <div id="applications" class="tab-pane in active">
+      <div class='table-responsive'>
       <table class="table table-bordered mt-1 table-striped">]]
 
       if(host.cardinality) then
@@ -1287,7 +1292,7 @@ elseif((page == "ndpi")) then
       <td><div class="pie-chart" id="topApplicationProtocols"></div></td>
       <td colspan=2><div class="pie-chart" id="topApplicationBreeds"></div></td>
     </tr>
-  </table>]]
+  </table></div>]]
 
       local direction_filter = ""
 
@@ -1318,13 +1323,15 @@ elseif((page == "ndpi")) then
      </table>
     </div>
     <div id="categories" class="tab-pane">
-      <br>
+      <div class='table-responsive'>
       <table class="table table-bordered table-striped">
         <tr>
         <th class="text-left" colspan=2>]] print(i18n("ndpi_page.overview", {what = i18n("categories")})) print[[</th>
         <td colspan=2><div class="pie-chart" id="topApplicationCategories"></div></td>
       </tr>
       </table>
+      </div>
+      <div class='tables-responsive'>
      <table class="table table-bordered table-striped">
        <thead>
 	 <tr>
@@ -1338,6 +1345,7 @@ elseif((page == "ndpi")) then
      </table>
     </div>
     </div>
+    </div>
     </div> <!-- close card -->
 ]]
 
@@ -1426,7 +1434,7 @@ setInterval(update_ndpi_categories_table, 5000);
 
 elseif(page == "dns") then
       if(host["dns"] ~= nil) then
-	 print("<table class=\"table table-bordered table-striped\">\n")
+	 print("<div class='table-responsive'><table class=\"table table-bordered table-striped\">\n")
 	 print("<tr><th>"..i18n("dns_page.dns_breakdown").."</th><th>"..i18n("dns_page.queries").."</th><th>"..i18n("dns_page.positive_replies").."</th><th>"..i18n("dns_page.error_replies").."</th><th colspan=2>"..i18n("dns_page.reply_breakdown").."</th></tr>")
 	 print("<tr><th>"..i18n("sent").."</th><td class=\"text-right\"><span id=dns_sent_num_queries>".. formatValue(host["dns"]["sent"]["num_queries"]) .."</span> <span id=trend_sent_num_queries></span></td>")
 
@@ -1493,7 +1501,7 @@ print [[/lua/host_dns_breakdown.lua', { ]] print(hostinfo2json(host_info)) print
 	 end
 
 	print[[
-        </table>
+        </table></div>
        <small><b>]] print(i18n("dns_page.note")) print[[:</b><br>]] print(i18n("dns_page.note_dns_ratio")) print[[
 </small>
 ]]
@@ -1539,6 +1547,7 @@ setInterval(update_ja3_table, 5000);
 
 elseif(page == "ssh") then
   print [[
+     <div class='table-responsive'>
      <table id="myTable" class="table table-bordered table-striped tablesorter">
      <thead><tr><th>]] print('<A HREF="https://engineering.salesforce.com/open-sourcing-hassh-abed3ae5044c" target="_blank">'..i18n("hassh_fingerprint")..'</A>') print[[</th>]]
   if not isEmptyString(companion_interface_utils.getCurrentCompanion(ifId)) then
@@ -1548,6 +1557,7 @@ elseif(page == "ssh") then
      <tbody id="host_details_hassh_tbody">
      </tbody>
      </table>
+     </div>
 
 <script>
 function update_hassh_table() {
@@ -1578,6 +1588,7 @@ setInterval(update_hassh_table, 5000);
 elseif(page == "http") then
    local http = host["http"]
    if http then
+      print("<div class='table-responsive'>")
       print("<table class=\"table table-bordered table-striped\">\n")
 
       if http["sender"]["query"]["total"] > 0 then
@@ -1641,6 +1652,7 @@ elseif(page == "http") then
       end
 
       print("</table>\n")
+      print("</div>")
    end
 
 
@@ -1696,7 +1708,7 @@ elseif(page == "sites") then
       require("flow_utils")
 
 print [[
-      <div id="table-flows"></div>
+      <div class='table-responsive'><div id="table-flows"></div></div>
 	 <script>
    var url_update = "]]
 
diff --git a/scripts/lua/if_stats.lua b/scripts/lua/if_stats.lua
index cfcde05c53..df5bd14c85 100644
--- a/scripts/lua/if_stats.lua
+++ b/scripts/lua/if_stats.lua
@@ -949,14 +949,11 @@ elseif page == "networks" and interface.isPacketInterface() then
    print("</table>")
    print("</div>")
 
-   print("<p><b>"..i18n("if_stats_overview.note").."</b>:<ul>")
-   print("<li>"..i18n("if_stats_networks.note_iface_addresses").."</li>")
-   print("<li>"..i18n("if_stats_networks.note_iface_bcast_domains").."</li>")
-
-   if has_ghost_networks then
-      print("<li>"..i18n("if_stats_networks.note_ghost_bcast_domains", {ghost_icon = ghost_icon}).."</li>")
-   end
-   print("</ul>")
+   print(ui_utils.render_notes({
+      {content = i18n("if_stats_networks.note_iface_addresses")},
+      {content = i18n("if_stats_networks.note_iface_bcast_domains")},
+      {content = i18n("if_stats_networks.note_ghost_bcast_domains", {ghost_icon = ghost_icon}), hidden = not has_ghost_networks}
+   }))
 
 elseif((page == "packets")) then
    local nedge_hidden = ternary(have_nedge, 'class="hidden"', '')
diff --git a/scripts/lua/inc/service_map.lua b/scripts/lua/inc/service_map.lua
index 270080ddff..c9d5923bfe 100644
--- a/scripts/lua/inc/service_map.lua
+++ b/scripts/lua/inc/service_map.lua
@@ -14,7 +14,7 @@ end
 
 print [[
 </div>
-<p>
+<div class='table-responsive'>
 <table id="service_map" class="table table-bordered table-striped w-100">
         <thead>
             <tr>
@@ -29,7 +29,7 @@ print [[
             </tr>
         </thead>
 </table>
-<p>
+</div>
 ]]
 
 if(isAdministrator()) then
@@ -40,7 +40,7 @@ if(isAdministrator()) then
 
    if(ifid ~= nil) then
      print [[
-<div class="d-flex justify-content-start">  
+<div class="d-flex justify-content-start">
 <form>
 	      <input type=hidden name="ifid" value="]] print(ifid.."") print [[">
 <input type=hidden name="page" value="service_map">
@@ -122,7 +122,7 @@ print [[';
     filterMenuKey: 'protocol',
     columnIndex: columnProtocolIndex
   });
-  
+
 } );
 
  i18n.all = "]] print(i18n("all")) print [[";
diff --git a/scripts/lua/modules/notifications/notifications_manager.lua b/scripts/lua/modules/notifications/notifications_manager.lua
index 78346e3ebb..3490d2b413 100644
--- a/scripts/lua/modules/notifications/notifications_manager.lua
+++ b/scripts/lua/modules/notifications/notifications_manager.lua
@@ -32,7 +32,6 @@ function notifications_manager.load_main_notifications()
 
     for _, notification in pairsByField(defined_notifications, 'id', asc) do
 
-
         -- We can only show MAX_NON_PRIORITY_NOTIFICATIONS_TO_SHOW notifications inside the page,
         -- in order to not overwhelm the user
         if (non_priority_notifications>= MAX_NON_PRIORITY_NOTIFICATIONS_TO_SHOW) and not notification.has_priority then