UI modifications for visualizations and more (#1293)

* Design fixes * Place of column gear * Columns and formatted * Overview files vis * Expand files * Expandible file in fim * Resizable table columns * Expandible vis with double click * Top 10 rule groups * Change Top 5 rules * Top 10 Agent alerts * Width of columns on tables * Add missing class * No show some fields in windows files tables
wazuh · Mar 11, 2019 · 320a4bc · 320a4bc
1 parent 0d1dd9b
commit 320a4bc
Show file tree

Hide file tree

Showing 50 changed files with 1,091 additions and 453 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1,3 +1,4 @@
 node_modules/
 public/utils/codemirror/
-public/kibana-integrations/
+public/kibana-integrations/
+public/utils/table-col-resizable.js
diff --git a/public/app.js b/public/app.js
@@ -168,6 +168,8 @@ import './utils/fontawesome/css/font-awesome.min.css';
 // Dev tools
 import './utils/codemirror';
 
+import './utils/table-col-resizable'
+
 // Material
 import 'angular-material/angular-material.css';
 import 'angular-aria/angular-aria';

diff --git a/public/controllers/dev-tools/dev-tools.js b/public/controllers/dev-tools/dev-tools.js
@@ -83,7 +83,7 @@ export class DevToolsController {
       }
     );
     // Register plugin for code mirror
-    CodeMirror.commands.autocomplete = function(cm) {
+    CodeMirror.commands.autocomplete = function (cm) {
       CodeMirror.showHint(cm, CodeMirror.hint.dictionaryHint, {
         completeSingle: false
       });
@@ -332,7 +332,7 @@ export class DevToolsController {
     this.apiInputBox.setSize('auto', '100%');
     this.apiInputBox.model = [];
     this.getAvailableMethods();
-    this.apiInputBox.on('keyup', function(cm, e) {
+    this.apiInputBox.on('keyup', function (cm, e) {
       if (!ExcludedIntelliSenseTriggerKeys[(e.keyCode || e.which).toString()]) {
         cm.execCommand('autocomplete', null, {
           completeSingle: false
@@ -356,22 +356,22 @@ export class DevToolsController {
     this.highlightGroup(currentGroup);
 
     // Register our custom Codemirror hint plugin.
-    CodeMirror.registerHelper('hint', 'dictionaryHint', function(editor) {
+    CodeMirror.registerHelper('hint', 'dictionaryHint', function (editor) {
       const model = editor.model;
       function getDictionary(line, word) {
         let hints = [];
         const exp = line.split(/\s+/g);
         if (exp[0] && exp[0].match(/^(?:GET|PUT|POST|DELETE).*$/)) {
-          let method = model.find(function(item) {
+          let method = model.find(function (item) {
             return item.method === exp[0];
           });
           const forbidChars = /^[^?{]+$/;
           if (method && !exp[2] && forbidChars.test(word)) {
-            method.endpoints.forEach(function(endpoint) {
+            method.endpoints.forEach(function (endpoint) {
               endpoint.path = endpoint.name;
               if (endpoint.args && endpoint.args.length > 0) {
                 let argSubs = [];
-                endpoint.args.forEach(function(arg) {
+                endpoint.args.forEach(function (arg) {
                   const pathSplitted = endpoint.name.split('/');
                   const arrayIdx = pathSplitted.indexOf(arg.name);
                   const wordSplitted = word.split('/');
@@ -383,7 +383,7 @@ export class DevToolsController {
                   }
                 });
                 let auxPath = endpoint.name;
-                argSubs.forEach(function(arg) {
+                argSubs.forEach(function (arg) {
                   auxPath = auxPath.replace(arg.id, arg.value);
                 });
                 endpoint.path = auxPath;
@@ -404,33 +404,35 @@ export class DevToolsController {
       const whiteSpace = /\s/;
       while (end < curLine.length && !whiteSpace.test(curLine.charAt(end)))
         ++end;
-      while (start && !whiteSpace.test(curLine.charAt(start - 1))) --start;
+      while (start && !whiteSpace.test(curLine.charAt(start - 1)))--start;
       const curWord = start !== end && curLine.slice(start, end);
       return {
         list: (!curWord
           ? []
-          : getDictionary(curLine, curWord).filter(function(item) {
-              return item.toUpperCase().includes(curWord.toUpperCase());
-            })
+          : getDictionary(curLine, curWord).filter(function (item) {
+            return item.toUpperCase().includes(curWord.toUpperCase());
+          })
         ).sort(),
         from: CodeMirror.Pos(cur.line, start),
         to: CodeMirror.Pos(cur.line, end)
       };
     });
     const evtDocument = this.$document[0];
-    $('.wz-dev-column-separator').mousedown(function(e) {
+    $('.wz-dev-column-separator').mousedown(function (e) {
       e.preventDefault();
+      $('.wz-dev-column-separator').addClass('active');
       const leftOrigWidth = $('#wz-dev-left-column').width();
       const rightOrigWidth = $('#wz-dev-right-column').width();
-      $(evtDocument).mousemove(function(e) {
+      $(evtDocument).mousemove(function (e) {
         const leftWidth = e.pageX - 215 + 14;
         let rightWidth = leftOrigWidth - leftWidth;
         $('#wz-dev-left-column').css('width', leftWidth);
         $('#wz-dev-right-column').css('width', rightOrigWidth + rightWidth);
       });
     });
 
-    $(evtDocument).mouseup(function() {
+    $(evtDocument).mouseup(function () {
+      $('.wz-dev-column-separator').removeClass('active');
       $(evtDocument).unbind('mousemove');
     });
 
@@ -456,10 +458,10 @@ export class DevToolsController {
       const desiredGroup = firstTime
         ? this.groups.filter(item => item.requestText)
         : this.groups.filter(
-            item =>
-              item.requestText &&
-              (item.end >= selection.line && item.start <= selection.line)
-          );
+          item =>
+            item.requestText &&
+            (item.end >= selection.line && item.start <= selection.line)
+        );
 
       // Place play button at first line from the selected group
       const cords = this.apiInputBox.cursorCoords({
@@ -515,12 +517,12 @@ export class DevToolsController {
         const method = desiredGroup.requestText.startsWith('GET')
           ? 'GET'
           : desiredGroup.requestText.startsWith('POST')
-          ? 'POST'
-          : desiredGroup.requestText.startsWith('PUT')
-          ? 'PUT'
-          : desiredGroup.requestText.startsWith('DELETE')
-          ? 'DELETE'
-          : 'GET';
+            ? 'POST'
+            : desiredGroup.requestText.startsWith('PUT')
+              ? 'PUT'
+              : desiredGroup.requestText.startsWith('DELETE')
+                ? 'DELETE'
+                : 'GET';
 
         const requestCopy = desiredGroup.requestText.includes(method)
           ? desiredGroup.requestText.split(method)[1].trim()

diff --git a/public/controllers/management/cdblists.js b/public/controllers/management/cdblists.js
@@ -206,7 +206,7 @@ export class CdbListsController {
       );
       const currentApi = JSON.parse(this.appState.getCurrentAPI()).id;
       const output = await this.csvReq.fetch(
-        '/cdblists',
+        '/lists',
         currentApi,
         this.wzTableFilter.get()
       );

diff --git a/public/directives/wz-list-manage/wz-list-manage.html b/public/directives/wz-list-manage/wz-list-manage.html
@@ -69,7 +69,7 @@
                                         <div layout="row">
                                             <md-button class="cancelBtn" type="button" ng-click="cancelRemoveEntry()"><i
                                                     aria-hidden='true' class='fa fa-fw fa-close'></i> Cancel</md-button>
-                                            <md-button class="agreeBtn" type="button" ng-click="confirmRemoveEntry(item[0])"><i
+                                            <md-button class="agreeBtn wz-button" type="button" ng-click="confirmRemoveEntry(item[0])"><i
                                                     aria-hidden='true' class='fa fa-fw fa-check'></i> Confirm</md-button>
                                         </div>
                                     </div>

diff --git a/public/directives/wz-table/wz-table-directive.js b/public/directives/wz-table/wz-table-directive.js
@@ -59,6 +59,7 @@ app.directive('wzTable', function () {
       $scope.showColumns = false;
       $scope.originalkeys = $scope.keys.map((key, idx) => ({ key, idx }));
       $scope.updateColumns = key => {
+        $("#wz_table").colResizable({ disable: true });
         const str = key.key.value || key.key;
         const cleanArray = $scope.keys.map(item => item.value || item);
         if (cleanArray.includes(str)) {
@@ -76,6 +77,8 @@ app.directive('wzTable', function () {
             $scope.keys.push(key.key);
           }
         }
+        init()
+          .then(() => ($scope.setColResizable()))
       };
       $scope.exists = key => {
         const str = key.key.value || key.key;
@@ -116,7 +119,10 @@ app.directive('wzTable', function () {
           $scope.rowsPerPage = calcTableRows($window.innerHeight, rowSizes);
           $scope.itemsPerPage = $scope.rowsPerPage;
           init()
-            .then(() => (resizing = false))
+            .then(() => {
+              resizing = false;
+              if ($scope.customColumns) { $scope.setColResizable() }
+            })
             .catch(() => (resizing = false));
         }, 150);
       };
@@ -244,8 +250,8 @@ app.directive('wzTable', function () {
       /**
        * On controller loads
        */
-      const init = async () =>
-        initTable(
+      const init = async () => {
+        await initTable(
           $scope,
           fetch,
           wzTableFilter,
@@ -255,7 +261,12 @@ app.directive('wzTable', function () {
           globalState,
           $window
         );
-
+        if ($scope.customColumns) {
+          setTimeout(() => {
+            $scope.setColResizable()
+          }, 100);
+        }
+      }
       /**
        * Pagination variables and functions
        */
@@ -432,7 +443,18 @@ app.directive('wzTable', function () {
         );
       };
 
-      $scope.expandPolicyMonitoringCheck = item => {
+      $scope.isSyscheck = () => {
+        return (
+          instance.path.includes('/syscheck')
+        );
+      };
+
+      $scope.isWindows = () => {
+        var agent = $scope.$parent.$parent.$parent.$parent.agent;
+        return (agent.os || {}).platform === "windows"
+      };
+
+      $scope.expandTableRow = item => {
         if (item.expanded) item.expanded = false;
         else {
           $scope.pagedItems[$scope.currentPage].map(
@@ -455,6 +477,11 @@ app.directive('wzTable', function () {
         }
         $c.remove();
       };
+
+      $scope.setColResizable = () => {
+        $("#wz_table").colResizable({ liveDrag: true, minWidth: 75, partialRefresh: true, draggingClass: false });
+        $scope.$applyAsync();
+      }
     },
     template
   };