Merge pull request #1 from openappsec/filtered-logs

Filtered logs and policy update notifications

backend/internal/nginx-openappsec.js

@@ -1,3 +1,6 @@
+const util = require('util');
+const execPromise = util.promisify(require('child_process').exec);
+const { exec } = require('child_process');
 const _      = require('lodash');
 const fs     = require('fs');
 const logger = require('../logger').nginx;
@@ -100,6 +103,23 @@ const internalNginxOpenappsec = {
 				(err) => {
 					logger.error('Error generating openappsec config:', err);
 					return Promise.reject(err);
+				})
+			.then(() => {
+				// Return the notifyPolicyUpdate promise chain
+				// notify openappsec to apply the policy
+				return internalNginxOpenappsec.notifyPolicyUpdate().catch((errorMessage) => {
+					console.error('Error:', errorMessage);
+					const errorMessageForUI = `Error: Policy couldn’t be applied, open-appsec-agent container is not responding.
+									Check if open-appec-agent container is running, then apply open-appsec Configuration
+									again by clicking here: 
+									<br>Settings -> open-appsec Advanced -> Save Settings`;
+
+					return Promise.reject(new Error(errorMessageForUI));
+				});
+			})
+			.catch((err) => {
+				logger.error('Error generating openappsec config:', err);
+				throw err; // Propagate the error to the caller
 			});
 	},
 
@@ -122,9 +142,22 @@ const internalNginxOpenappsec = {
 				internalNginxOpenappsec.removeMatchingNodes(openappsecConfig, pattern);
 				fs.writeFileSync(configFilePath, yaml.dump(openappsecConfig));
 			})
-			.catch(err => {
+			.then(() => {
+				// Return the notifyPolicyUpdate promise chain
+				// notify openappsec to apply the policy
+				return internalNginxOpenappsec.notifyPolicyUpdate().catch((errorMessage) => {
+					console.error('---Error:', errorMessage);
+					const errorMessageForUI = `Error: Policy couldn’t be applied, open-appsec-agent container is not responding.
+									Check if open-appec-agent container is running, then apply open-appsec Configuration
+									again by clicking here: 
+									<br>Settings -> open-appsec Advanced -> Save Settings`;
+
+					return Promise.reject(new Error(errorMessageForUI));
+				});
+			})
+			.catch((err) => {
 				logger.error('Error deleting openappsec config:', err);
-				return Promise.reject(err);
+				throw err; // Propagate the error to the caller
 			});
 	},
 	
@@ -180,6 +213,38 @@ const internalNginxOpenappsec = {
 		}
 	},
 
+	notifyPolicyUpdate: async function() {
+		if (!constants.USE_NOTIFY_POLICY) {
+			console.log('USE_NOTIFY_POLICY is false');
+			return;
+		}
+		let ports = constants.PORTS;
+		console.log(`Notifying openappsec to apply the policy on ports ${ports}`);
+		let lastError = null;
+
+		for (let port of ports) {
+			try {
+				const command = `curl -s -o /dev/null -w "%{http_code}" ${constants.HOSTURL}:${port}/openappsec/apply-policy`;
+				console.log(`command: ${command}`);
+				let { stdout } = await execPromise(command);
+				if (stdout === '200') {
+					console.log(`Policy applied successfully on port ${port}`);
+					return;
+				} else {
+					console.log(`Policy Unexpected response code: ${stdout}`);
+					lastError = new Error(`Unexpected response code: ${stdout}`);
+				}
+			} catch (error) {
+				console.log(`Error notifying openappsec to apply the policy on port ${port}: ${error.message}`);
+				lastError = error;
+			}
+		}
+
+		if (lastError) {
+			throw lastError;
+		}
+	},
+
 	/**
 	 * Recursively removes nodes from a JavaScript object based on a pattern.
 	*

backend/internal/openappsec-log.js

@@ -6,56 +6,50 @@ const { APPSEC_LOG_DIR } = require('../lib/constants');
 
 const internalOpenappsecLog = {
 
-	/**
+	countTotalLines: async function (directoryPath) {
-	 * All logs
+		const files = await fs.promises.readdir(directoryPath);
-	 *
-	 * @param   {Access}  access
-	 * @param   {Array}   [expand]
-	 * @param   {String}  [search_query]
-	 * @returns {Promise}
-	 */
-	getAll: (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) => {
+		let totalLineCount = 0;
-						const baseA = path.basename(a, path.extname(a));
-						const baseB = path.basename(b, path.extname(b));
 
-						if (baseA < baseB) return -1;
+		for (const file of logFiles) {
-						if (baseA > baseB) return 1;
+			const filePath = path.join(directoryPath, file);
 
-						return path.extname(a).localeCompare(path.extname(b));
+			// Read only the first line of the file
+			const readStream = fs.createReadStream(filePath);
+			const rl = readline.createInterface({ input: readStream });
+			const firstLine = await new Promise(resolve => {
+				rl.on('line', line => {
+					rl.close();
+					resolve(line);
+				});
 			});
 
-					const groupedFiles = sortedLogFiles.reduce((groups, file) => {
+			// Check if the first line is a non-data line
-						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');
+				JSON.parse(firstLine);
+			} catch (err) {
+				continue; // Skip this file if the first line is a non-data line
+			}
+
+			// If the first line is a data line, read the rest of the file
+			const content = await fs.promises.readFile(filePath, 'utf8');
 			const lines = content.split('\n');
+			totalLineCount += lines.length;
+		}
+
+		return totalLineCount;
+	},
+
+	processFile: async function (filePath) {
+		const content = await fs.promises.readFile(filePath, 'utf8');
+		const lines = content.split('\n');
+		const dataLines = [];
+
 		for (const line of lines) {
 			try {
 				const json = JSON.parse(line);
+				const groupName = path.basename(filePath, path.extname(filePath));
 				const wrappedObject = {
 					source: groupName,
 					meta: json,
@@ -66,24 +60,80 @@ const internalOpenappsecLog = {
 					eventTime: json.eventTime,
 					eventName: json.eventName
 				};
-										wrappedObjects.push(wrappedObject);
+				dataLines.push(wrappedObject);
 			} catch (err) {
 				// Ignore lines that don't contain JSON data
 			}
 		}
-							} catch (err) {
+
-								console.error(`Failed to read file ${file}: ${err.message}`);
+		return dataLines;
-							}
+	},
-						}
+
-					}
+
-					wrappedObjects.sort((a, b) => new Date(b.eventTime) - new Date(a.eventTime));
+	getAll: function (access, expand, search_query) {
-					return wrappedObjects;
+		return access.can('auditlog:list')
+			.then(async () => {
+				const directoryPath = APPSEC_LOG_DIR;
+				const files = await fs.promises.readdir(directoryPath);
+				const logFiles = files.filter(file => path.extname(file).startsWith('.log'));
+
+				// Sort the logFiles array
+				logFiles.sort((a, b) => {
+					const baseA = path.basename(a, path.extname(a));
+					const baseB = path.basename(b, path.extname(b));
+					return baseA.localeCompare(baseB, undefined, { numeric: true, sensitivity: 'base' });
+				});
+
+				const wrappedObjects = [];
+				for (const file of logFiles) {
+					const filePath = path.join(directoryPath, file);
+					const dataLines = await this.processFile(filePath);
+					wrappedObjects.push(...dataLines);
 				}
 
-				let groupedFiles = listLogFiles(directoryPath).catch(console.error);
+				return wrappedObjects;
-				return groupedFiles;
 			});
+	},
+
+	getPage: function (access, expand, search_query, page, perPage) {
+		return access.can('auditlog:list')
+			.then(async () => {
+				const directoryPath = APPSEC_LOG_DIR;
+				let totalDataLines = await this.countTotalLines(directoryPath);
+
+				const files = await fs.promises.readdir(directoryPath);
+				const logFiles = files.filter(file => path.extname(file).startsWith('.log'));
+
+				// Sort the logFiles array
+				logFiles.sort((a, b) => {
+					const baseA = path.basename(a, path.extname(a));
+					const baseB = path.basename(b, path.extname(b));
+					return baseA.localeCompare(baseB, undefined, { numeric: true, sensitivity: 'base' });
+				});
+
+				const wrappedObjects = [];
+				let lineCount = 0;
+				let start = (page - 1) * perPage;
+				let end = page * perPage;
+
+				for (const file of logFiles) {
+					if (lineCount >= end) {
+						break;
 					}
+
+					const filePath = path.join(directoryPath, file);
+					const dataLines = await this.processFile(filePath);
+					const pageDataLines = dataLines.slice(start - lineCount, end - lineCount);
+					wrappedObjects.push(...pageDataLines);
+					lineCount += pageDataLines.length;
+				}
+
+				return {
+					data: wrappedObjects,
+					totalDataLines: totalDataLines,
+				};
+			});
+	},
 };
 
 module.exports = internalOpenappsecLog;

backend/internal/proxy-host.js

@@ -95,9 +95,14 @@ const internalProxyHost = {
 					});
 			})
 			.then(row => {
-				internalNginxOpenappsec.generateConfig(access, row, data)
+				return internalNginxOpenappsec.generateConfig(access, row, data)
+					.then(() => {
 						return row;
 					})
+					.catch((err) => {
+						throw new error.ConfigurationError(err.message);
+					});
+			})
 			.then((row) => {
 				// Audit log
 				data.meta = _.assign({}, data.meta || {}, row.meta);
@@ -174,10 +179,14 @@ const internalProxyHost = {
 				}
 			})
 			.then(row => {
-				internalNginxOpenappsec.generateConfig(access, row, data);
+				return internalNginxOpenappsec.generateConfig(access, row, data)
-				// internalNginxOpenappsec.updateConfig(row, data)
+					.then(() => {
 						return row;
 					})
+					.catch((err) => {
+						throw new error.ConfigurationError(err.message);
+					});
+			})
 			.then((row) => {
 				// Add domain_names to the data in case it isn't there, so that the audit log renders correctly. The order is important here.
 				data = _.assign({}, {
@@ -316,7 +325,11 @@ const internalProxyHost = {
 					})
 					.then(() => {
 						// Delete openappsec config
-						internalNginxOpenappsec.deleteConfig(access, row);
+						return internalNginxOpenappsec.deleteConfig(access, row)
+						.catch((err) => {
+							throw new error.ConfigurationError(err.message);
+						});
+						
 					})
 					.then(() => {
 						// Delete Nginx Config

backend/lib/constants.js

@@ -2,4 +2,8 @@ module.exports = {
 	APPSEC_CONFIG_FILE_NAME: 'local_policy.yaml',
 	APPSEC_EXT_DIR: '/ext/appsec',
 	APPSEC_LOG_DIR: '/ext/appsec-logs',
+	USE_NOTIFY_POLICY: true,
+	PORTS: [7777, 7778],
+	HOSTURL: 'http://127.0.0.1',
+	POLICY_PATH: '/etc/cp/conf/local_policy.yaml',
 };

docker/docker-compose.dev.yml

@@ -33,7 +33,8 @@ services:
     volumes:
       - npm_data:/data
       - le_data:/etc/letsencrypt
-      - ../localconfig:/ext/appsec
+      - ../open-appsec-agent-deployment/localconfig:/ext/appsec
+      - ../open-appsec-agent-deployment/logs:/ext/appsec-logs
       - ../backend:/app
       - ../frontend:/app/frontend
       - ../global:/app/global

frontend/js/app/api.js

@@ -112,7 +112,7 @@ function makeExpansionString(expand) {
  * @param   {String}   [query]
  * @returns {Promise}
  */
-function getAllObjects(path, expand, query) {
+function getAllObjects(path, expand, query, page, perPage) {
     let params = [];
 
     if (typeof expand === 'object' && expand !== null && expand.length) {
@@ -123,7 +123,13 @@ function getAllObjects(path, expand, query) {
         params.push('query=' + query);
     }
 
-    return fetch('get', path + (params.length ? '?' + params.join('&') : ''));
+    if (page && perPage) {
+        params.push('page=' + page);
+        params.push('perPage=' + perPage);
+    }
+
+    let url = path + (params.length ? '?' + params.join('&') : '');
+    return fetch('get', url);
 }
 
 function FileUpload(path, fd) {
@@ -724,7 +730,7 @@ module.exports = {
          */
         getAll: function (expand, query) {
             return getAllObjects('openappsec-log', expand, query);
-        }
+        },
     },
 
     Reports: {

frontend/js/app/controller.js

@@ -410,12 +410,18 @@ module.exports = {
     /**
      * openappsec Log
      */
-    showOpenappsecLog: function () {
+    showOpenappsecLogPage: function (page) {
+        page = parseInt(page) || 1;
         let controller = this;
         if (Cache.User.isAdmin()) {
             require(['./main', './openappsec-log/main'], (App, View) => {
-                controller.navigate('/openappsec-log');
+                controller.navigate('/openappsec-log/page/' + page);
-                App.UI.showAppContent(new View());
+
+                // Show the view with the data
+                App.UI.showAppContent(new View({
+                    page: page,
+                    perPage: 50
+                }));
             });
         } else {
             this.showDashboard();

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

@@ -0,0 +1,20 @@
+
+<td><%- formatDbDate(eventTime, 'D-M-YY, H:mm') %></td>
+<td><%- eventSeverity %></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><%- eventTopic %></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>Event Topic</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,49 @@
+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 () {
+        let perPage = this.perPage || this.collection.length;
+        let page = this.page || 1;
+        let models;
+        if (this.perPage && this.page) {
+            models = this.collection.models.slice((page - 1) * perPage, page * perPage);
+        } else {
+            models = this.collection.models;
+        }
+        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,20 @@
+
+<td><%- formatDbDate(eventTime, 'D-M-YY, H:mm') %></td>
+<td><%- eventSeverity %></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><%- eventTopic %></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>Event Topic</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,42 @@
+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 () {
+        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,10 @@
+<td><%- formatDbDate(eventTime, 'D-M-YY, H:mm') %></td>
+<td><%- eventSeverity %></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,42 @@
+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 () {
+        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

@@ -2,9 +2,22 @@ const Mn       = require('backbone.marionette');
 const ItemView = require('./item');
 const template = require('./main.ejs');
 
-const TableBody = Mn.CollectionView.extend({
+let TableBody = Mn.CollectionView.extend({
     tagName: 'tbody',
-    childView: ItemView
+    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 () {
+        let models = this.collection.models.slice((this.page - 1) * this.perPage, this.page * this.perPage);
+        this.collection.reset(models);
+    }
 });
 
 module.exports = Mn.View.extend({
@@ -21,7 +34,9 @@ module.exports = Mn.View.extend({
 
     onRender: function () {
         this.showChildView('body', new TableBody({
-            collection: this.collection
+            collection: this.collection,
+            page:       this.options.page,
+            perPage:    this.options.perPage
         }));
     }
 });

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

@@ -3,22 +3,42 @@
     <div class="card-header">
         <h3 class="card-title">Security Log</h3>
         <div class="card-options">
-            <form class="search-form" role="search">
+            <!-- <form class="search-form" role="search">
                 <div class="input-icon">
                     <span class="input-icon-addon">
                       <i class="fe fe-search"></i>
                     </span>
                     <input name="source-query" type="text" value="" class="form-control form-control-sm" placeholder="<%- i18n('audit-log', 'search') %>" aria-label="<%- i18n('audit-log', 'search') %>">
                 </div>
-            </form>
+            </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">
+                        <!-- Pagination Region -->
+                    </div>
+                </div>
+        
+            </div>
         </div>
 
     </div>

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

@@ -1,31 +1,138 @@
 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');
+const Controller = require('../controller');
+
+let PaginationView = Mn.View.extend({
+    tagName: 'ul',
+    className: 'pagination justify-content-center mt-4 border-top pt-3',
+
+    initialize: function (options) {
+        this.totalPages = parseInt(options.totalPages) || 1;
+        this.currentPage = parseInt(options.currentPage) || 1;
+        this.totalDataLines = parseInt(options.totalDataLines) || 1;
+        this.maxPageLinks = 15;
+    },
+
+    template: paginationTemplate,
+
+    templateContext: function () {
+        return {
+            totalDataLines: this.totalDataLines,
+            totalPages: this.totalPages,
+            currentPage: this.currentPage,
+            maxPageLinks: this.maxPageLinks
+        };
+    }
+});
 
 module.exports = Mn.View.extend({
     id: 'openappsec-log',
     template: template,
     
+    initialize: function (options) {
+        this.options = options;
+    },    
+
     ui: {
         list_region: '.list-region',
         dimmer: '.dimmer',
         search: '.search-form',
-        query:       'input[name="source-query"]'
+        query: 'input[name="source-query"]',
+        pagination_region: '.pagination-region'
     },
 
     fetch: App.Api.OpenappsecLog.getAll,
 
-    showData: function(response) {
+    showData: function (response, tab = 'tab1') {
-        this.showChildView('list_region', new ListView({
+        
-            collection: new OpenappsecLogModel.Collection(response)
+        // Filter the response data for each tab
+        const eventSeverities = ["critical", "high"];
+        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
         }));
+
+        // const totalDataLines = response.length;
+        // this.showChildView('list_region', new ListView({
+        //     collection: this.tabCollections.tab1,
+        //     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) {
+    showError: function (err) {
         this.showChildView('list_region', new ErrorView({
             code: err.code,
             message: err.message,
@@ -37,7 +144,7 @@ module.exports = Mn.View.extend({
         console.error(err);
     },
 
-    showEmpty: function() {
+    showEmpty: function () {
         this.showChildView('list_region', new EmptyView({
             title: App.i18n('audit-log', 'empty'),
             subtitle: App.i18n('audit-log', 'empty-subtitle')
@@ -45,7 +152,8 @@ module.exports = Mn.View.extend({
     },
 
     regions: {
-        list_region: '@ui.list_region'
+        list_region: '@ui.list_region',
+        pagination_region: '@ui.pagination_region'
     },
 
     events: {
@@ -58,15 +166,61 @@ module.exports = Mn.View.extend({
                 .catch(err => {
                     this.showError(err);
                 });
+        },
+
+        'click .nav-link': 'onTabClick',
+
+        'click @ui.pagination_region a': function (e) {
+            e.preventDefault();
+
+            // get the page number from the link
+            const newPage = $(e.currentTarget).attr('href').split('/').pop();
+            Controller.navigate('/openappsec-log/page/' + newPage, { trigger: true });
         }
     },
 
+    onTabClick: function(event) {
+        event.preventDefault();
+        const selectedTab = event.target.id;
+        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() || '';
 
-        view.fetch(['user'])
+        view.fetch(['user'], query)
             .then(response => {
-                if (!view.isDestroyed() && response && response.length) {
+                if (!view.isDestroyed() && response) {
                     view.showData(response);
                 } else {
                     view.showEmpty();

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/router.js

@@ -13,7 +13,8 @@ module.exports = AppRouter.default.extend({
         'nginx/access':       'showNginxAccess',
         'nginx/certificates': 'showNginxCertificates',
         'audit-log':          'showAuditLog',
-        'openappsec-log':     'showOpenappsecLog',
+        'openappsec-log':     'showOpenappsecLogPage',
+        'openappsec-log/page/:number':     'showOpenappsecLogPage',
         'settings':           'showSettings',
         '*default':           'showDashboard'
     }

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: '-'
         };
     }
 });