(ids) UI load grid on tab open

src/opnsense/mvc/app/views/OPNsense/IDS/index.volt

@@ -32,16 +32,14 @@ POSSIBILITY OF SUCH DAMAGE.
         //
         var data_get_map = {'frm_GeneralSettings':"/api/ids/settings/get"};
 
-        // load initial data
-        mapDataToFormUI(data_get_map).done(function(){
-            formatTokenizersUI();
-            $('.selectpicker').selectpicker('refresh');
-        });
 
-        // list all known classtypes and add to selection box
+        /**
+         * list all known classtypes and add to selection box
+         */
         function updateRuleClassTypes() {
             ajaxGet(url="/api/ids/settings/listRuleClasstypes",sendData={}, callback=function(data, status) {
                 if (status == "success") {
+                    $('#ruleclass').html('<option value="">ALL</option>');
                     $.each(data['items'], function(key, value) {
                         $('#ruleclass').append($("<option></option>").attr("value",value).text(value));
                     });
@@ -54,12 +52,13 @@ POSSIBILITY OF SUCH DAMAGE.
             });
         }
 
-        // delay refresh for a bit
-        setTimeout(updateRuleClassTypes, 500);
-
-        // update list of alert logs
+        /**
+         * update list of available alert logs
+         */
+        function updateAlertLogs() {
             ajaxGet(url="/api/ids/service/getAlertLogs",sendData={}, callback=function(data, status) {
                 if (status == "success") {
+                    $('#alert-logfile').html("");
                     $.each(data, function(key, value) {
                         if (value['sequence'] == undefined) {
                             $('#alert-logfile').append($("<option></option>").attr("value",'none').text(value['modified']));
@@ -74,6 +73,7 @@ POSSIBILITY OF SUCH DAMAGE.
                     });
                 }
             });
+        }
 
         /**
          * Add classtype to rule filter
@@ -97,9 +97,28 @@ POSSIBILITY OF SUCH DAMAGE.
             return request;
         }
 
+        // load initial data
+        mapDataToFormUI(data_get_map).done(function(){
+            formatTokenizersUI();
+            $('.selectpicker').selectpicker('refresh');
+        });
+
+        /**
+         * load content on tab changes
+         */
+        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
+            if (e.target.id == 'rule_tab'){
+                //
+                // activate rule tab page
+                //
+
+                // delay refresh for a bit
+                setTimeout(updateRuleClassTypes, 500);
+
                 /**
                  * grid installed rules
                  */
+                $('#grid-installedrules').bootgrid('destroy'); // always destroy previous grid, so data is always fresh
                 $("#grid-installedrules").UIBootgrid(
                         {   search:'/api/ids/settings/searchinstalledrules',
                             get:'/api/ids/settings/getRuleInfo/',
@@ -122,10 +141,12 @@ POSSIBILITY OF SUCH DAMAGE.
                             toggle:'/api/ids/settings/toggleRule/'
                         }
                 );
-
+            } else if (e.target.id == 'alert_tab') {
+                updateAlertLogs();
                 /**
                  * grid query alerts
                  */
+                $('#grid-alerts').bootgrid('destroy'); // always destroy previous grid, so data is always fresh
                 $("#grid-alerts").UIBootgrid(
                         {   search:'/api/ids/service/queryAlerts',
                             get:'/api/ids/service/getAlertInfo/',
@@ -140,6 +161,10 @@ POSSIBILITY OF SUCH DAMAGE.
                                 }
                             }
                         });
+            }
+        })
+
+
 
         /**
          * grid for installable rule files
@@ -209,9 +234,9 @@ POSSIBILITY OF SUCH DAMAGE.
 </script>
 
 <ul class="nav nav-tabs" data-tabs="tabs" id="maintabs">
-    <li class="active"><a data-toggle="tab" href="#settings">{{ lang._('Settings') }}</a></li>
-    <li><a data-toggle="tab" href="#rules">{{ lang._('Rules') }}</a></li>
-    <li><a data-toggle="tab" href="#alerts">{{ lang._('Alerts') }}</a></li>
+    <li class="active"><a data-toggle="tab" href="#settings" id="settings_tab">{{ lang._('Settings') }}</a></li>
+    <li><a data-toggle="tab" href="#rules" id="rule_tab">{{ lang._('Rules') }}</a></li>
+    <li><a data-toggle="tab" href="#alerts" id="alert_tab">{{ lang._('Alerts') }}</a></li>
 </ul>
 <div class="tab-content content-box tab-content">
     <div id="settings" class="tab-pane fade in active">
@@ -251,7 +276,7 @@ POSSIBILITY OF SUCH DAMAGE.
             <div class="row">
                 <div class="col-sm-12 actionBar">
                     <b>Classtype &nbsp;</b>
-                    <select id="ruleclass" class="selectpicker" data-width="200px"><option value="">ALL</option></select>
+                    <select id="ruleclass" class="selectpicker" data-width="200px"></select>
                 </div>
             </div>
         </div>