Merge pull request #1080 from opnsense/ngx_frontend_log_view_paging

www/nginx: add minimal paging for not crashing on a 40 MiB file

www/nginx/src/opnsense/www/js/nginx/src/controller/LogView.js

@@ -32,15 +32,21 @@ const LogView = Backbone.View.extend({
     tagName: 'div',
     className: 'content-box tab-content',
     events: {
-        "keyup .filter input": "update_filter"
+        "keyup .filter input": "update_filter",
+        "click #paging_back": "page_back",
+        "click #paging_forward": "page_forward",
+        "change #entrycount": "change_entry_count",
     },
+    page_entry_count: 100,
+    current_page: 0,
+    current_filtered_collection: null,
 
     initialize: function() {
         this.collection = new LogLinesCollection();
         this.filter_model = new Backbone.Model();
-        this.listenTo(this.collection, "sync", this.render);
-        this.listenTo(this.collection, "update", this.render);
-        this.listenTo(this.filter_model, "change", this.render);
+        this.listenTo(this.collection, "sync", this.clear_and_render);
+        this.listenTo(this.collection, "update", this.clear_and_render);
+        this.listenTo(this.filter_model, "change", this.clear_and_render);
         this.type = '';
     },
 
@@ -58,7 +64,12 @@ const LogView = Backbone.View.extend({
             tbody.html('');
         }
         if (this.collection.length !== 0) {
-            this.collection.filter_collection(this.filter_model).forEach(
+            if (this.current_filtered_collection == null) {
+                this.current_filtered_collection = this.collection.filter_collection(this.filter_model);
+            }
+            const index_begin = this.current_page * this.page_entry_count;
+            const index_end = index_begin + this.page_entry_count;
+            this.current_filtered_collection.slice(index_begin, index_end).forEach(
                 (model) => this.render_one(tbody, model)
             );
         }
@@ -79,9 +90,30 @@ const LogView = Backbone.View.extend({
     update: function () {
         this.collection.fetch();
     },
+    clear_and_render: function() {
+        this.current_filtered_collection = null;
+        this.render();
+    },
     update_filter: function (event) {
         const element = event.target;
         this.filter_model.set(element.name, $(element).val());
+    },
+    page_back: function () {
+        if (this.current_page > 0) {
+            this.current_page--;
+            this.render();
+        }
+    },
+    page_forward: function () {
+        if ((this.current_page + 1) * this.page_entry_count < this.collection.length) {
+            this.current_page++;
+            this.render();
+        }
+    },
+    change_entry_count: function (event) {
+        this.page_entry_count = event.target.value;
+        this.current_page = 0;
+        this.render();
     }
 });
 export default LogView;

www/nginx/src/opnsense/www/js/nginx/src/controller/TabLogList.js

@@ -35,8 +35,6 @@ let TabLogList = Backbone.View.extend({
         this.handleElementClick(event.target.dataset['modelUuid']);
     },
     handleElementClick: function (uuid) {
-        console.log(uuid);
-        console.log(this.logview);
         this.logview.get_log(this.model.get('logType'), uuid);
     }
 });

www/nginx/src/opnsense/www/js/nginx/src/models/LogLinesCollection.js

@@ -27,6 +27,9 @@ const LogLinesCollection = Backbone.Collection.extend({
                     || filter_model.get(property).length === 0) {
                     continue;
                 }
+                if (!model.has(property)) {
+                    return false;
+                }
                 if (!model.get(property).includes(filter_model.get(property))) {
                     return false;
                 }

www/nginx/src/opnsense/www/js/nginx/src/templates/logviewer.html

@@ -1,13 +1,15 @@
-<table class="table table-striped">
+<% let count = 0; %><table class="table table-striped">
     <thead>
         <tr>
-            <% if (log_type === 'errors' || log_type === 'stream_errors') { %>
+            <% if (log_type === 'errors' || log_type === 'stream_errors') {
+            count = 5; %>
             <th>Date</th>
             <th>Time</th>
             <th>Severity</th>
             <th>Number</th>
             <th>Message</th>
-            <% } else if (log_type === 'accesses') { %>
+            <% } else if (log_type === 'accesses') {
+            count = 9; %>
             <th>Time</th>
             <th>Remote IP</th>
             <th>Username</th>
@@ -17,7 +19,8 @@
             <th>User Agent</th>
             <th>Forwarded For</th>
             <th>Request Line</th>
-            <% } else {%>
+            <% } else {
+            count = 6; %>
             <th>Time</th>
             <th>Remote IP</th>
             <th>Status</th>
@@ -55,4 +58,30 @@
     </thead>
     <tbody>
     </tbody>
+    <tfoot>
+        <tr>
+            <td>
+                <button class="btn btn-primary" id="paging_back"><i class="fa fa-backward" aria-hidden="true"></i></button>
+                <button class="btn btn-primary" id="paging_forward"><i class="fa fa-forward " aria-hidden="true"></i></button>
+            </td>
+            <td colspan="3">
+                Entries per page:
+                <input type="range" list="tickmarks" min="5" max="1000" step="5" id="entrycount" value="100" />
+                <datalist id="tickmarks">
+                    <option value="5" label="5">
+                    <option value="100" label="100">
+                    <option value="200" label="200">
+                    <option value="300">
+                    <option value="400">
+                    <option value="500" label="500">
+                    <option value="600">
+                    <option value="700">
+                    <option value="800">
+                    <option value="900">
+                    <option value="1000" label="1000">
+                </datalist>
+            </td>
+            <td colspan="<%= count - 3 %>"></td>
+        </tr>
+    </tfoot>
 </table>