Filtered log views

backend/internal/openappsec-log.js

@@ -6,86 +6,6 @@ const { APPSEC_LOG_DIR } = require('../lib/constants');
 
 const internalOpenappsecLog = {
 
-	/**
-	 * All logs
-	 *
-	 * @param   {Access}  access
-	 * @param   {Array}   [expand]
-	 * @param   {String}  [search_query]
-	 * @returns {Promise}
-	 */
-	getAllold: (access, expand, search_query) => {
-		return access.can('auditlog:list')
-			.then(() => {
-
-				const directoryPath = APPSEC_LOG_DIR;
-			
-				const readdir = util.promisify(fs.readdir);
-				const readFile = util.promisify(fs.readFile);
-
-				async function listLogFiles(dir) {
-					const files = await readdir(dir);
-					const logFiles = files.filter(file => path.extname(file).startsWith('.log'));
-
-					const sortedLogFiles = logFiles.sort((a, b) => {
-						const baseA = path.basename(a, path.extname(a));
-						const baseB = path.basename(b, path.extname(b));
-
-						if (baseA < baseB) return -1;
-						if (baseA > baseB) return 1;
-
-						return path.extname(a).localeCompare(path.extname(b));
-					});
-
-					// Group the log files by their base name
-					const groupedFiles = sortedLogFiles.reduce((groups, file) => {
-						const fileName = path.basename(file, path.extname(file));
-						if (!groups[fileName]) {
-							groups[fileName] = [];
-						}
-						groups[fileName].push(file);
-						return groups;
-					}, {});
-
-					const wrappedObjects = [];
-
-					for (const [groupName, files] of Object.entries(groupedFiles)) {
-						for (const file of files) {
-							try {
-								const content = await readFile(path.join(dir, file), 'utf8');
-								const lines = content.split('\n');
-								for (const line of lines) {
-									try {
-										const json = JSON.parse(line);
-										const wrappedObject = {
-											source: groupName,
-											meta: json,
-											serviceName: json.eventSource.serviceName,
-											eventPriority: json.eventPriority,
-											eventSeverity: json.eventSeverity,
-											eventLevel: json.eventLevel,
-											eventTime: json.eventTime,
-											eventName: json.eventName
-										};
-										wrappedObjects.push(wrappedObject);
-									} catch (err) {
-										// Ignore lines that don't contain JSON data
-									}
-								}
-							} catch (err) {
-								console.error(`Failed to read file ${file}: ${err.message}`);
-							}
-						}
-					}
-					wrappedObjects.sort((a, b) => new Date(b.eventTime) - new Date(a.eventTime));
-					return wrappedObjects;
-				}
-
-				let groupedFiles = listLogFiles(directoryPath).catch(console.error);
-				return groupedFiles;
-			});
-	},
-
 	countTotalLines: async function (directoryPath) {
 		const files = await fs.promises.readdir(directoryPath);
 		const logFiles = files.filter(file => path.extname(file).startsWith('.log'));
@@ -153,7 +73,7 @@ const internalOpenappsecLog = {
 	getAll: function (access, expand, search_query) {
 		return access.can('auditlog:list')
 			.then(async () => {
-				const directoryPath = '/app/openappsec_files/logs';
+				const directoryPath = APPSEC_LOG_DIR;
 				const files = await fs.promises.readdir(directoryPath);
 				const logFiles = files.filter(file => path.extname(file).startsWith('.log'));
 
@@ -175,12 +95,10 @@ const internalOpenappsecLog = {
 			});
 	},
 
-
 	getPage: function (access, expand, search_query, page, perPage) {
 		return access.can('auditlog:list')
 			.then(async () => {
-				const directoryPath = '/app/openappsec_files/logs';
+				const directoryPath = APPSEC_LOG_DIR;
-
 				let totalDataLines = await this.countTotalLines(directoryPath);
 				console.log("totalLineCount: " + totalDataLines);
 

frontend/js/app/openappsec-log/list-all/item.ejs

@@ -0,0 +1,43 @@
+
+<td>
+    <%- formatDbDate(eventTime, 'D-M-YYYY, H:mm') %>
+</td>
+<td>
+    <div class="text-nowrap">
+        <% var sevirityClass = 'bg-success'; 
+        switch (eventSeverity) {
+            case 'Critical':
+                sevirityClass = 'bg-danger';
+                break;
+            case 'Warning':
+                sevirityClass = 'bg-warning';
+                break;
+            case 'Info':
+                sevirityClass = 'bg-success';
+                //sevirityClass = 'bg-info';
+                break;
+            case 'Debug':
+                sevirityClass = 'bg-success';
+                break;
+        }
+        %>  
+        <span class="status-icon <%- sevirityClass %>"></span> <%- eventSeverity %>
+    </div>
+</td>
+<td><%- assetName %></td>
+<td><%- securityAction %></td>
+<td><%- waapIncidentType %></td>
+<td><%- httpSourceId %></td>
+<td><%- sourceIp %></td>
+<td><%- proxyIp %></td>
+<td><%- httpHostName %></td>
+<td><%- httpMethod %></td>
+<td><%- httpResponseCode %></td>
+<td><%- httpUriPath %></td>
+<td><%- protectionName %></td>
+<td><%- matchedLocation %></td>
+<td><%- matchedParameter %></td>
+<td><%- matchedSample %></td>
+<td class="text-right">
+    <a href="#" class="meta btn btn-secondary btn-sm">open</a>
+</td>

frontend/js/app/openappsec-log/list-all/item.js

@@ -0,0 +1,32 @@
+const Mn         = require('backbone.marionette');
+const Controller = require('../../controller');
+const template   = require('./item.ejs');
+
+module.exports = Mn.View.extend({
+    template: template,
+    tagName:  'tr',
+
+    ui: {
+        meta: 'a.meta'
+    },
+
+    events: {
+        'click @ui.meta': function (e) {
+            e.preventDefault();
+            Controller.showOpenappsecMeta(this.model);
+        }
+    },
+
+    templateContext: {
+        more: function() {
+            switch (this.object_type) {
+                case 'redirection-host':
+                case 'stream':
+                case 'proxy-host':
+                    return this.meta.domain_names.join(', ');
+            }
+
+            return '#' + (this.object_id || '?');
+        }
+    }
+});

frontend/js/app/openappsec-log/list-all/main.ejs

@@ -0,0 +1,22 @@
+<thead>
+    <th>Time</th>
+    <th>Event Severity</th>
+    <th>Asset Name</th>
+    <th>Security Action</th>
+    <th>AppSec Incident Type</th>
+    <th>Source Identifier</th>
+    <th>Source IP</th>
+    <th>Proxy IP</th>
+    <th>HTTP Host</th>
+    <th>HTTP Method</th>
+    <th>HTTP Response Code</th>
+    <th>HTTP URI Path</th>
+    <th>Protection Name</th>
+    <th>Matched Location</th>
+    <th>Matched Parameter</th>
+    <th>Matched Sample</th>
+    <th>&nbsp;</th>
+</thead>
+<tbody>
+    <!-- items -->
+</tbody>

frontend/js/app/openappsec-log/list-all/main.js

@@ -0,0 +1,60 @@
+const Mn       = require('backbone.marionette');
+const ItemView = require('./item');
+const template = require('./main.ejs');
+
+let TableBody = Mn.CollectionView.extend({
+    tagName: 'tbody',
+    childView: ItemView,
+
+    initialize: function (options) {
+        this.options = new Backbone.Model(options);
+        console.log("options: ", options);
+        // this.page = options.page;
+        // this.perPage = options.perPage;
+        this.updatePage();
+        // this.listenTo(this.options, 'change:page', this.updatePage);
+    },
+
+    updatePage: function () {
+        let perPage = this.perPage || this.collection.length;
+        let page = this.page || 1;
+        let models;
+        if (this.perPage && this.page) {
+            console.log('updatePage2');
+            models = this.collection.models.slice((page - 1) * perPage, page * perPage);
+        } else {
+            console.log('updatePage3');
+
+            models = this.collection.models;
+        }
+        this.collection.reset(models);
+    }
+
+    // updatePage: function () {
+    //     let perPage = this.perPage || this.collection.length;
+    //     let page = this.page || 1;
+    //     let models = this.collection.models.slice((page - 1) * perPage, page * perPage);
+    //     this.collection.reset(models);
+    // }
+});
+
+module.exports = Mn.View.extend({
+    tagName:   'table',
+    className: 'table table-hover table-outline table-vcenter card-table',
+    template:  template,
+
+    regions: {
+        body: {
+            el:             'tbody',
+            replaceElement: true
+        }
+    },
+
+    onRender: function () {
+        this.showChildView('body', new TableBody({
+            collection: this.collection,
+            // page:       this.options.page,
+            // perPage:    this.options.perPage
+        }));
+    }
+});

frontend/js/app/openappsec-log/list-important/item.ejs

@@ -0,0 +1,43 @@
+
+<td>
+    <%- formatDbDate(eventTime, 'D-M-YY, H:mm') %>
+</td>
+<td>
+    <div class="text-nowrap">
+        <% var sevirityClass = 'bg-success'; 
+        switch (eventSeverity) {
+            case 'Critical':
+                sevirityClass = 'bg-danger';
+                break;
+            case 'Warning':
+                sevirityClass = 'bg-warning';
+                break;
+            case 'Info':
+                sevirityClass = 'bg-success';
+                //sevirityClass = 'bg-info';
+                break;
+            case 'Debug':
+                sevirityClass = 'bg-success';
+                break;
+        }
+        %>  
+        <span class="status-icon <%- sevirityClass %>"></span> <%- eventSeverity %>
+    </div>
+</td>
+<td><%- assetName %></td>
+<td><%- securityAction %></td>
+<td><%- waapIncidentType %></td>
+<td><%- httpSourceId %></td>
+<td><%- sourceIp %></td>
+<td><%- proxyIp %></td>
+<td><%- httpHostName %></td>
+<td><%- httpMethod %></td>
+<td><%- httpResponseCode %></td>
+<td><%- httpUriPath %></td>
+<td><%- protectionName %></td>
+<td><%- matchedLocation %></td>
+<td><%- matchedParameter %></td>
+<td><%- matchedSample %></td>
+<td class="text-right">
+    <a href="#" class="meta btn btn-secondary btn-sm">open</a>
+</td>

frontend/js/app/openappsec-log/list-important/item.js

@@ -0,0 +1,32 @@
+const Mn         = require('backbone.marionette');
+const Controller = require('../../controller');
+const template   = require('./item.ejs');
+
+module.exports = Mn.View.extend({
+    template: template,
+    tagName:  'tr',
+
+    ui: {
+        meta: 'a.meta'
+    },
+
+    events: {
+        'click @ui.meta': function (e) {
+            e.preventDefault();
+            Controller.showOpenappsecMeta(this.model);
+        }
+    },
+
+    templateContext: {
+        more: function() {
+            switch (this.object_type) {
+                case 'redirection-host':
+                case 'stream':
+                case 'proxy-host':
+                    return this.meta.domain_names.join(', ');
+            }
+
+            return '#' + (this.object_id || '?');
+        }
+    }
+});

frontend/js/app/openappsec-log/list-important/main.ejs

@@ -0,0 +1,22 @@
+<thead>
+    <th>Time</th>
+    <th>Event Severity</th>
+    <th>Asset Name</th>
+    <th>Security Action</th>
+    <th>AppSec Incident Type</th>
+    <th>Source Identifier</th>
+    <th>Source IP</th>
+    <th>Proxy IP</th>
+    <th>HTTP Host</th>
+    <th>HTTP Method</th>
+    <th>HTTP Response Code</th>
+    <th>HTTP URI Path</th>
+    <th>Protection Name</th>
+    <th>Matched Location</th>
+    <th>Matched Parameter</th>
+    <th>Matched Sample</th>
+    <th>&nbsp;</th>
+</thead>
+<tbody>
+    <!-- items -->
+</tbody>

frontend/js/app/openappsec-log/list-important/main.js

@@ -0,0 +1,43 @@
+const Mn       = require('backbone.marionette');
+const ItemView = require('./item');
+const template = require('./main.ejs');
+
+let TableBody = Mn.CollectionView.extend({
+    tagName: 'tbody',
+    childView: ItemView,
+
+    initialize: function (options) {
+        this.options = new Backbone.Model(options);
+        this.page = options.page;
+        this.perPage = options.perPage;
+        this.updatePage();
+        this.listenTo(this.options, 'change:page', this.updatePage);
+    },
+
+    updatePage: function () {
+        console.log('updatePage');
+        let models = this.collection.models.slice((this.page - 1) * this.perPage, this.page * this.perPage);
+        this.collection.reset(models);
+    }
+});
+
+module.exports = Mn.View.extend({
+    tagName:   'table',
+    className: 'table table-hover table-outline table-vcenter card-table',
+    template:  template,
+
+    regions: {
+        body: {
+            el:             'tbody',
+            replaceElement: true
+        }
+    },
+
+    onRender: function () {
+        this.showChildView('body', new TableBody({
+            collection: this.collection,
+            page:       this.options.page,
+            perPage:    this.options.perPage
+        }));
+    }
+});

frontend/js/app/openappsec-log/list-notifications/item.ejs

@@ -0,0 +1,32 @@
+
+<td><%- formatDbDate(eventTime, 'D-M-YY, H:mm') %></td>
+<td>
+    <div class="text-nowrap">
+        <% var sevirityClass = 'bg-success'; 
+        switch (eventSeverity) {
+            case 'Critical':
+                sevirityClass = 'bg-danger';
+                break;
+            case 'Warning':
+                sevirityClass = 'bg-warning';
+                break;
+            case 'Info':
+                sevirityClass = 'bg-success';
+                //sevirityClass = 'bg-info';
+                break;
+            case 'Debug':
+                sevirityClass = 'bg-success';
+                break;
+        }
+        %>  
+        <span class="status-icon <%- sevirityClass %>"></span> <%- eventSeverity %>
+    </div>
+</td>
+<td><%- eventPriority %></td>
+<td><%- eventTopic %></td>
+<td><%- eventName %></td>
+<td><%- suggestedRemediation %></td>
+<td><%- assetName %></td>
+<td class="text-right">
+    <a href="#" class="meta btn btn-secondary btn-sm">open</a>
+</td>

frontend/js/app/openappsec-log/list-notifications/item.js

@@ -0,0 +1,32 @@
+const Mn         = require('backbone.marionette');
+const Controller = require('../../controller');
+const template   = require('./item.ejs');
+
+module.exports = Mn.View.extend({
+    template: template,
+    tagName:  'tr',
+
+    ui: {
+        meta: 'a.meta'
+    },
+
+    events: {
+        'click @ui.meta': function (e) {
+            e.preventDefault();
+            Controller.showOpenappsecMeta(this.model);
+        }
+    },
+
+    templateContext: {
+        more: function() {
+            switch (this.object_type) {
+                case 'redirection-host':
+                case 'stream':
+                case 'proxy-host':
+                    return this.meta.domain_names.join(', ');
+            }
+
+            return '#' + (this.object_id || '?');
+        }
+    }
+});

frontend/js/app/openappsec-log/list-notifications/main.ejs

@@ -0,0 +1,13 @@
+<thead>
+    <th>Time</th>
+    <th>Event Severity</th>
+    <th>Event Priority</th>
+    <th>Event Topic</th>
+    <th>Event Name</th>
+    <th>Suggested Remediation if Applicable</th>
+    <th>Asset Name</th>
+    <th>&nbsp;</th>
+</thead>
+<tbody>
+    <!-- items -->
+</tbody>

frontend/js/app/openappsec-log/list-notifications/main.js

@@ -0,0 +1,43 @@
+const Mn       = require('backbone.marionette');
+const ItemView = require('./item');
+const template = require('./main.ejs');
+
+let TableBody = Mn.CollectionView.extend({
+    tagName: 'tbody',
+    childView: ItemView,
+
+    initialize: function (options) {
+        this.options = new Backbone.Model(options);
+        this.page = options.page;
+        this.perPage = options.perPage;
+        this.updatePage();
+        this.listenTo(this.options, 'change:page', this.updatePage);
+    },
+
+    updatePage: function () {
+        console.log('updatePage');
+        let models = this.collection.models.slice((this.page - 1) * this.perPage, this.page * this.perPage);
+        this.collection.reset(models);
+    }
+});
+
+module.exports = Mn.View.extend({
+    tagName:   'table',
+    className: 'table table-hover table-outline table-vcenter card-table',
+    template:  template,
+
+    regions: {
+        body: {
+            el:             'tbody',
+            replaceElement: true
+        }
+    },
+
+    onRender: function () {
+        this.showChildView('body', new TableBody({
+            collection: this.collection,
+            page:       this.options.page,
+            perPage:    this.options.perPage
+        }));
+    }
+});

frontend/js/app/openappsec-log/list/main.js

@@ -14,12 +14,6 @@ let TableBody = Mn.CollectionView.extend({
         this.listenTo(this.options, 'change:page', this.updatePage);
     },
 
-    setPage: function (page) {
-        this.page = page;
-        this.updatePage();
-        this.render();
-    },
-
     updatePage: function () {
         let models = this.collection.models.slice((this.page - 1) * this.perPage, this.page * this.perPage);
         this.collection.reset(models);

frontend/js/app/openappsec-log/main.ejs

@@ -13,10 +13,24 @@
             </form> -->
         </div>
     </div>
-    <div class="card-body no-padding min-100">
+    <div class="card-body no-padding min-100 has-tabs">
+        <div class="px-4">
+            <ul class="nav nav-tabs" role="tablist">
+                <li role="presentation" class="nav-item"><a id="tab1" href="#filter-important" aria-controls="tab1" role="tab"
+                        data-toggle="tab" class="nav-link active">Important Events</a></li>
+                <li role="presentation" class="nav-item"><a  id="tab2" href="#filter-all" aria-controls="tab2" role="tab" data-toggle="tab"
+                        class="nav-link">All Events</a></li>
+                <li role="presentation" class="nav-item"><a id="tab3" href="#filter-notifications" aria-controls="tab3" role="tab"
+                        data-toggle="tab" class="nav-link">Notifications</a></li>
+            </ul>
+        </div>
+        
+        <div class="tab-content">
+
+            <div role="tabpanel" class="tab-pane active" id="tab1">
                 <div class="dimmer active">
                     <div class="loader"></div>
-            <div class="dimmer-content list-region">
+                    <div class="dimmer-content list-region table-responsive">
                         <!-- List Region -->
                     </div>
                     <div class="dimmer-content pagination-region">
@@ -26,3 +40,6 @@
         
             </div>
         </div>
+
+    </div>
+</div>

frontend/js/app/openappsec-log/main.js

@@ -1,8 +1,11 @@
 const Mn = require('backbone.marionette');
 const App = require('../main');
 const OpenappsecLogModel = require('../../models/openappsec-log');
-const ListView = require('./list/main');
+const ListViewTab1 = require('./list-important/main');
+const ListViewTab2 = require('./list-all/main');
+const ListViewTab3 = require('./list-notifications/main');
 const template = require('./main.ejs');
+const paginationTemplate = require('./pagination.ejs');
 const ErrorView = require('../error/main');
 const EmptyView = require('../empty/main');
 const { data } = require('jquery');
@@ -19,31 +22,7 @@ let PaginationView = Mn.View.extend({
         this.maxPageLinks = 15;
     },
 
-    template: _.template(
+    template: paginationTemplate,
-        '<li class="page-item <%= currentPage === 1 ? "disabled" : "" %>">' +
-        '<a class="page-link" href="/openappsec-log/page/1">First</a>' +
-        '</li>' +
-        '<li class="page-item <%= currentPage === 1 ? "disabled" : "" %>">' +
-        '<a class="page-link" href="/openappsec-log/page/<%= currentPage - 1 %>">Previous</a>' +
-        '</li>' +
-        '<% let startPage = Math.max(1, currentPage - Math.floor(maxPageLinks / 2)); %>' +
-        '<% let endPage = Math.min(startPage + maxPageLinks - 1, totalPages); %>' +
-        '<% startPage = Math.max(1, endPage - maxPageLinks + 1); %>' +
-        '<% for (let i = startPage; i <= endPage; i++) { %>' +
-        '<li class="page-item <%= i === currentPage ? "active" : "" %>">' +
-        '<a class="page-link" href="/openappsec-log/page/<%= i %>"><%= i %></a>' +
-        '</li>' +
-        '<% } %>' +
-        '<li class="page-item <%= currentPage === totalPages ? "disabled" : "" %>">' +
-        '<a class="page-link" href="/openappsec-log/page/<%= currentPage + 1 %>">Next</a>' +
-        '</li>' +
-        '<li class="page-item <%= currentPage === totalPages ? "disabled" : "" %>">' +
-        '<a class="page-link" href="/openappsec-log/page/<%= totalPages %>">Last</a>' +
-        '</li>' +
-        '<li class="page-item disabled">' +
-        '<span class="page-link">Total lines: <%= totalDataLines %></span>' +
-        '</li>'
-    ),
 
     templateContext: function () {
         return {
@@ -61,7 +40,6 @@ module.exports = Mn.View.extend({
     
     initialize: function (options) {
         this.options = options;
-        // this.listenTo(App, 'openappsec-log:page', this.setPage);
     },    
 
     ui: {
@@ -74,19 +52,84 @@ module.exports = Mn.View.extend({
 
     fetch: App.Api.OpenappsecLog.getAll,
 
-    showData: function (response) {
+    showData: function (response, tab = 'tab1') {
-        const totalDataLines = response.length;
+        
-        this.showChildView('list_region', new ListView({
+        // Filter the response data for each tab
-            collection: new OpenappsecLogModel.Collection(response),
+        const eventSeverities = ["critical", "high"];
-            page: this.options.page,
+        const tab1Data = response.filter(item => eventSeverities.includes(item.eventSeverity.trim().toLowerCase()));
+
+        const eventNames = ["waap telemetry", "waap attack type telemetry", "ips stats"];
+        const tab2Data = response.filter(item => !eventNames.includes(item.eventName.trim().toLowerCase()));
+
+        const eventLevels = ["action item"];
+        const tab3Data = response.filter(item => eventLevels.includes(item.eventLevel.trim().toLowerCase()));
+        
+        // Store the lengths of the original collections
+        this.tabCollectionLengths = {
+            tab1: response.length,
+            tab2: response.length,
+            tab3: response.length
+        };
+            
+        this.tabCollections = {
+            tab1: new OpenappsecLogModel.Collection(tab1Data),
+            tab2: new OpenappsecLogModel.Collection(tab2Data),
+            tab3: new OpenappsecLogModel.Collection(tab3Data)
+        };
+
+        this.tabPaginationStates = {
+            tab1: { page: 1, perPage: this.options.perPage },
+            tab2: { page: 1, perPage: this.options.perPage },
+            tab3: { page: 1, perPage: this.options.perPage }
+        };
+
+        // Define an object mapping for the ListViews
+        const listViewMapping = {
+            tab1: ListViewTab1,
+            tab2: ListViewTab2,
+            tab3: ListViewTab3
+        };
+
+        // Get the current tab
+        const currentTab = tab; // Replace this with the actual current tab
+
+        // Select the ListView for the current tab
+        const CurrentListView = listViewMapping[currentTab];
+
+        // Show the ListView for the current tab
+        this.showChildView('list_region', new CurrentListView({
+            collection: this.tabCollections[currentTab],
+            page: 1,
             perPage: this.options.perPage
+            // page: this.tabPaginationStates[currentTab].page,
+            // perPage: this.tabPaginationStates[currentTab].perPage
         }));
 
-        this.showChildView('pagination_region', new PaginationView({
+        // const totalDataLines = response.length;
-            totalDataLines: totalDataLines,
+        // this.showChildView('list_region', new ListView({
-            totalPages: Math.ceil(totalDataLines / this.options.perPage),
+        //     collection: this.tabCollections.tab1,
-            currentPage: this.options.page
+        //     page: this.tabPaginationStates.tab1.page,
-        }));
+        //     perPage: this.tabPaginationStates.tab1.perPage
+        // }));
+
+        // this.showChildView('pagination_region', new PaginationView({
+        //     totalDataLines: this.tabCollectionLengths.tab1,
+        //     totalPages: Math.ceil(this.tabCollectionLengths.tab1 / this.options.perPage),
+        //     currentPage: this.tabPaginationStates.tab1.page
+        // }));
+
+        // const totalDataLines = response.length;
+        // this.showChildView('list_region', new ListView({
+        //     collection: new OpenappsecLogModel.Collection(response),
+        //     page: this.options.page,
+        //     perPage: this.options.perPage
+        // }));
+
+        // this.showChildView('pagination_region', new PaginationView({
+        //     totalDataLines: totalDataLines,
+        //     totalPages: Math.ceil(totalDataLines / this.options.perPage),
+        //     currentPage: this.options.page
+        // }));
     },
 
     showError: function (err) {
@@ -125,6 +168,8 @@ module.exports = Mn.View.extend({
                 });
         },
 
+        'click .nav-link': 'onTabClick',
+
         'click @ui.pagination_region a': function (e) {
             e.preventDefault();
 
@@ -134,6 +179,59 @@ module.exports = Mn.View.extend({
         }
     },
 
+    onTabClick: function(event) {
+        event.preventDefault();
+        const selectedTab = event.target.id;
+    
+        console.log("selectedTab: ", selectedTab);
+
+        // let ListView;
+        // switch (selectedTab) {
+        //     case 'tab1':
+        //         ListView = ListViewTab1;
+        //         break;
+        //     case 'tab2':
+        //         ListView = ListViewTab2;
+        //         break;
+        //     case 'tab3':
+        //         ListView = ListViewTab3;
+        //         break;
+        //     default:
+        //         ListView = ListViewTab1;
+        // }
+
+        let view = this;
+        let query = this.ui.query.val() || '';
+
+        view.fetch(['user'], query)
+            .then(response => {
+                if (!view.isDestroyed() && response) {
+                    view.showData(response, selectedTab);
+                } else {
+                    view.showEmpty();
+                }
+            })
+            .catch(err => {
+                view.showError(err);
+            })
+            .then(() => {
+                view.ui.dimmer.removeClass('active');
+            });
+
+        // this.showChildView('list_region', new ListView({
+        //     collection: this.tabCollections[selectedTab],
+        //     page: this.tabPaginationStates[selectedTab].page,
+        //     perPage: this.tabPaginationStates[selectedTab].perPage
+        // }));
+
+        // this.showChildView('pagination_region', new PaginationView({
+        //     totalDataLines: this.tabCollections[selectedTab].length,
+        //     totalPages: Math.ceil(this.tabCollections[selectedTab].length / this.options.perPage),
+        //     currentPage: this.tabPaginationStates[selectedTab].page
+        // }));
+        
+      },
+
     onRender: function () {
         let view = this;
         let query = this.ui.query.val() || '';

frontend/js/app/openappsec-log/pagination.ejs

@@ -0,0 +1,23 @@
+<li class="page-item <%= currentPage === 1 ? "disabled" : "" %>">
+    <a class="page-link" href="/openappsec-log/page/1">First</a>
+</li>
+<li class="page-item <%= currentPage === 1 ? "disabled" : "" %>">
+    <a class="page-link" href="/openappsec-log/page/<%= currentPage - 1 %>">Previous</a>
+</li>
+<% let startPage = Math.max(1, currentPage - Math.floor(maxPageLinks / 2)); %>
+<% let endPage = Math.min(startPage + maxPageLinks - 1, totalPages); %>
+<% startPage = Math.max(1, endPage - maxPageLinks + 1); %>
+<% for (let i = startPage; i <= endPage; i++) { %>
+    <li class="page-item <%= i === currentPage ? "active" : "" %>">
+        <a class="page-link" href="/openappsec-log/page/<%= i %>"><%= i %></a>
+    </li>
+<% } %>
+<li class="page-item <%= currentPage === totalPages ? "disabled" : "" %>">
+    <a class="page-link" href="/openappsec-log/page/<%= currentPage + 1 %>">Next</a>
+</li>
+<li class="page-item <%= currentPage === totalPages ? "disabled" : "" %>">
+    <a class="page-link" href="/openappsec-log/page/<%= totalPages %>">Last</a>
+</li>
+<li class="page-item disabled">
+    <span class="page-link">Total lines: <%= totalDataLines %></span>
+</li>

frontend/js/app/settings/main.ejs

@@ -8,7 +8,7 @@
         <div class="px-4">
                 <ul class="nav nav-tabs" role="tablist">
                     <li role="presentation" class="nav-item"><a href="#details" aria-controls="tab1" role="tab" data-toggle="tab" class="nav-link active">Nginx Proxy Manager</a></li>
-                    <li role="presentation" class="nav-item"><a href="#open-appsec" aria-controls="tab4" role="tab" data-toggle="tab" class="nav-link">open-appsec Advanced</a></li>
+                    <li role="presentation" class="nav-item"><a href="#open-appsec" aria-controls="tab2" role="tab" data-toggle="tab" class="nav-link">open-appsec Advanced</a></li>
                 </ul>
         </div>
         

frontend/js/models/openappsec-log.js

@@ -5,7 +5,30 @@ const model = Backbone.Model.extend({
 
     defaults: function () {
         return {
-            name: ''
+            name: '-',
+            eventSeverity: '-',
+            assetName: '-',
+            securityAction: '-',
+            waapIncidentType: '-',
+            httpSourceId: '-',
+            sourceIp: '-',
+            // 'Proxy-IP': '-',
+            proxyIp: '-',
+            httpHostName: '-',
+            httpMethod: '-',
+            // 'HTTP-Response-Code': '-',
+            httpResponseCode: '-',
+            httpUriPath: '-',
+            // 'Protection-Name': '-',
+            protectionName: '-',
+            matchedLocation: '-',
+            matchedParameter: '-',
+            matchedSample: '-',
+            eventPriority: '-',
+            eventTopic: '-',
+            eventName: '-',
+            // Suggested Remediation if Applicable
+            suggestedRemediation: '-'
         };
     }
 });