Add connection details to IP address modal

data/interfaces/default/current_activity_instance.html

@@ -315,7 +315,8 @@ DOCUMENTATION :: END
                                         % if data['relayed']:
                                         <span data-toggle="tooltip" title="Plex Relay"><i class="fa fa-exclamation-circle"></i></span>
                                         % else:
-                                        <a href="#" class="external_ip-modal" data-toggle="modal" data-target="#ip-info-modal" data-ip="${data['ip_address']}">
+                                        <a href="#" class="external_ip-modal" data-toggle="modal" data-target="#ip-info-modal"
+                                            data-ip="${data['ip_address']}" data-location="${data['location']}" data-secure="${data['secure']}" data-relayed="${data['relayed']}">
                                             <span id="external_ip-${sk}" class="external-ip-tooltip" data-toggle="tooltip" title="Lookup External IP" style="display: none;"><i class="fa fa-map-marker"></i></span>
                                         </a>
                                         <script>

data/interfaces/default/index.html

@@ -701,7 +701,10 @@
 
     $('#currentActivity').on('click', '.external_ip-modal', function () {
         $.get('get_ip_address_details', {
-            ip_address: $(this).data('ip')
+            ip_address: $(this).data('ip'),
+            location: $(this).data('location'),
+            secure: $(this).data('secure'),
+            relayed: $(this).data('relayed')
         }).then(function (jqXHR) {
             $("#ip-info-modal").html(jqXHR);
         });

data/interfaces/default/ip_address_modal.html

@@ -13,9 +13,25 @@
             </h4>
         </div>
         <div class="modal-body" id="modal-text">
+            % if kwargs:
             <div class="col-sm-12">
                 <h4>
-                    <strong>Location Details</strong>
+                    <strong>Connection Details</strong>
+                </h4>
+            </div>
+            <div class="col-sm-12">
+                <ul class="list-unstyled">
+                    <% icon = {'0': 'times', '1': 'check'} %>
+                    <li>Location: <strong>${(kwargs['location'] or 'unknown').upper()}</strong></li>
+                    <li>Secure Connection: <i class="fa fa-${icon.get(kwargs['secure'], 'question')}"></i></li>
+                    <li>Plex Relay: <i class="fa fa-${icon.get(kwargs['relayed'], 'question')}"></i></li>
+                </ul>
+            </div>
+            % endif
+            % if public:
+            <div class="col-sm-12">
+                <h4>
+                    <strong>Geolocation Lookup</strong>
                     % if data:
                     <span id="ip_loading" style="padding-left: 5px;"><i class="fa fa-refresh fa-spin"></i></span>
                     % endif
@@ -39,7 +55,7 @@
             </div>
             <div class="col-sm-12">
                 <h4>
-                    <strong>Connection Details</strong>
+                    <strong>Whois Lookup</strong>
                     % if data:
                     <span id="isp_loading" style="padding-left: 5px;"><i class="fa fa-refresh fa-spin"></i></span>
                     % endif
@@ -57,13 +73,17 @@
                     <li>Address: <strong><span id="isp_address"></span></strong></li>
                 </ul>
             </div>
+            % endif
         </div>
         <div class="modal-footer">
+            % if data == '127.0.0.1' and kwargs.get('location') == 'wan':
+            <div style="float: right;"><span class="text-muted" id="rquote">We've traced the call. It's coming from inside the house!</span></div>
+            % endif
         </div>
     </div>
 </div>
 
-% if data:
+% if data and public:
 <script>
     function getUserLocation(ip_address) {
         $.ajax({

data/interfaces/default/js/tables/history_table.js

@@ -106,7 +106,7 @@ history_table_options = {
             "createdCell": function (td, cellData, rowData, row, col) {
                 if (cellData) {
                     isPrivateIP(cellData).then(function () {
-                        $(td).html(cellData || 'n/a');
+                        $(td).html('<a href="javascript:void(0)" data-toggle="modal" data-target="#ip-info-modal">'+ cellData + '</a>');
                     }, function () {
                         external_ip = '<span class="external-ip-tooltip" data-toggle="tooltip" title="External IP"><i class="fa fa-map-marker fa-fw"></i></span>';
                         $(td).html('<a href="javascript:void(0)" data-toggle="modal" data-target="#ip-info-modal">'+ external_ip + cellData + '</a>');
@@ -379,7 +379,10 @@ $('.history_table').on('click', '> tbody > tr > td.modal-control-ip', function (
     var rowData = row.data();
 
     $.get('get_ip_address_details', {
-        ip_address: rowData['ip_address']
+        ip_address: rowData['ip_address'],
+        location: rowData['location'],
+        secure: rowData['secure'],
+        relayed: rowData['relayed']
     }).then(function (jqXHR) {
         $("#ip-info-modal").html(jqXHR);
     });
@@ -575,7 +578,10 @@ function createChildTable(row, rowData) {
         var childRowData = childRow.data();
 
         $.get('get_ip_address_details', {
-            ip_address: childRowData['ip_address']
+            ip_address: childRowData['ip_address'],
+            location: rowData['location'],
+            secure: rowData['secure'],
+            relayed: rowData['relayed']
         }).then(function (jqXHR) {
             $("#ip-info-modal").html(jqXHR);
         });