Update log table, login screen UI and package versions

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

@@ -1,5 +1,5 @@
-
-<td><%- formatDbDate(eventTime, 'D-M-YY, H:mm') %></td>
+<td class="text-right"><a href="#" class="meta btn btn-secondary btn-sm">open</a></td>
+<td class="text-nowrap"><%- formatDbDate(eventTime, 'MMM DD YYYY, H:mm') %></td>
 <td><%- eventSeverity %></td>
 <td><%- assetName %></td>
 <td><%- securityAction %></td>
@@ -14,7 +14,4 @@
 <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>
+<td><%- matchedSample %></td>

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

@@ -1,21 +1,21 @@
 <thead>
+    <th>&nbsp;</th>
     <th>Time</th>
     <th>Event Severity</th>
     <th>Asset Name</th>
     <th>Security Action</th>
-    <th>AppSec Incident Type</th>
+    <th><span class="text-nowrap">AppSec Incident</span> 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><span class="text-nowrap">HTTP Response</span> Code</th>
+    <th><span class="text-nowrap">HTTP URI</span> Path</th>
     <th>Event Topic</th>
     <th>Matched Location</th>
     <th>Matched Parameter</th>
     <th>Matched Sample</th>
-    <th>&nbsp;</th>
 </thead>
 <tbody>
     <!-- items -->

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

@@ -1,5 +1,5 @@
-
-<td><%- formatDbDate(eventTime, 'D-M-YY, H:mm') %></td>
+<td class="text-right"><a href="#" class="meta btn btn-secondary btn-sm">open</a></td>
+<td class="text-nowrap"><%- formatDbDate(eventTime, 'MMM DD YYYY, H:mm') %></td>
 <td><%- eventSeverity %></td>
 <td><%- assetName %></td>
 <td><%- securityAction %></td>
@@ -15,6 +15,3 @@
 <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/main.ejs

@@ -1,21 +1,21 @@
 <thead>
+    <th>&nbsp;</th>
     <th>Time</th>
     <th>Event Severity</th>
     <th>Asset Name</th>
     <th>Security Action</th>
-    <th>AppSec Incident Type</th>
+    <th><span class="text-nowrap">AppSec Incident</span> 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><span class="text-nowrap">HTTP Response</span> Code</th>
+    <th><span class="text-nowrap">HTTP URI</span> Path</th>
     <th>Event Topic</th>
     <th>Matched Location</th>
     <th>Matched Parameter</th>
     <th>Matched Sample</th>
-    <th>&nbsp;</th>
 </thead>
 <tbody>
     <!-- items -->

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

@@ -1,10 +1,8 @@
-<td><%- formatDbDate(eventTime, 'D-M-YY, H:mm') %></td>
+<td class="text-right"><a href="#" class="meta btn btn-secondary btn-sm">open</a></td>
+<td class="text-nowrap"><%- formatDbDate(eventTime, 'MMM DD YYYY, 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>
+<td><%- assetName %></td>

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

@@ -1,4 +1,5 @@
 <thead>
+    <th>&nbsp;</th>
     <th>Time</th>
     <th>Event Severity</th>
     <th>Event Priority</th>
@@ -6,7 +7,6 @@
     <th>Event Name</th>
     <th>Suggested Remediation if Applicable</th>
     <th>Asset Name</th>
-    <th>&nbsp;</th>
 </thead>
 <tbody>
     <!-- items -->

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

@@ -78,9 +78,9 @@ module.exports = Mn.View.extend({
         };
 
         this.tabPaginationStates = {
-            tab1: { page: 1, perPage: this.options.perPage },
-            tab2: { page: 1, perPage: this.options.perPage },
-            tab3: { page: 1, perPage: this.options.perPage }
+            tab1: { page: 1, perPage: this.options.perPage, totalDataLines: tab1Data.length },
+            tab2: { page: 1, perPage: this.options.perPage, totalDataLines: tab2Data.length },
+            tab3: { page: 1, perPage: this.options.perPage, totalDataLines: tab3Data.length }
         };
 
         // Define an object mapping for the ListViews
@@ -99,36 +99,16 @@ module.exports = Mn.View.extend({
         // 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
+            // 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
+        //  this.showChildView('pagination_region', new PaginationView({
+        //     totalDataLines: this.tabPaginationStates[currentTab].totalDataLines,
+        //     totalPages: Math.ceil(this.tabPaginationStates[currentTab].totalDataLines / this.options.perPage),
+        //     currentPage: this.tabPaginationStates[currentTab].page
         // }));
     },
 
@@ -184,7 +164,7 @@ module.exports = Mn.View.extend({
         const selectedTab = event.target.id;
         let view = this;
         let query = this.ui.query.val() || '';
-
+        view.ui.dimmer.addClass('active');
         view.fetch(['user'], query)
             .then(response => {
                 if (!view.isDestroyed() && response) {