Merge pull request #1058 from wazuh/3.7-new-tags-filter

New tags and filters search bar
wazuh · Dec 10, 2018 · 0cd3b86 · 0cd3b86
2 parents f72cb79 + 2c0b5f2
commit 0cd3b86
Show file tree

Hide file tree

Showing 9 changed files with 499 additions and 81 deletions.
diff --git a/public/controllers/agent/agents-preview.js b/public/controllers/agent/agents-preview.js
@@ -72,12 +72,8 @@ export class AgentsPreviewController {
     this.load();
   }
 
-  search(term) {
-    this.$scope.$broadcast('wazuhSearch', { term });
-  }
-
-  filter(filter) {
-    this.$scope.$broadcast('wazuhFilter', { filter });
+  query(query, search) {
+    this.$scope.$broadcast('wazuhQuery', { query, search });
   }
 
   showAgent(agent) {
@@ -128,6 +124,19 @@ export class AgentsPreviewController {
       const [agentsUnique, agentsTop] = data;
       const unique = agentsUnique.data.result;
 
+      this.searchBarModel = {
+        'status': ['Active', 'Disconnected', 'Never connected'],
+        'group': unique.groups,
+        'node_name': unique.nodes,
+        'version': unique.versions,
+        'os.platform': unique.osPlatforms.map(x => x.platform),
+        'os.version': unique.osPlatforms.map(x => x.version),
+        'os.name': unique.osPlatforms.map(x => x.name),
+      };
+      this.searchBarModel['os.name'] = Array.from(new Set(this.searchBarModel['os.name']));
+      this.searchBarModel['os.version'] = Array.from(new Set(this.searchBarModel['os.version']));
+      this.searchBarModel['os.platform'] = Array.from(new Set(this.searchBarModel['os.platform']));
+
       this.groups = unique.groups;
       this.nodes = unique.nodes.map(item => ({ id: item }));
       this.versions = unique.versions.map(item => ({ id: item }));

diff --git a/public/directives/index.js b/public/directives/index.js
@@ -18,4 +18,6 @@ import './wz-welcome-card/wz-welcome-card';
 import './wz-no-config/wz-no-config';
 import './wz-config-item/wz-config-item';
 import './wz-config-item/wz-config-item.less';
-import './wz-config-viewer/wz-config-viewer';
+import './wz-tag-filter/wz-tag-filter';
+import './wz-tag-filter/wz-tag-filter.less';
+import './wz-config-viewer/wz-config-viewer';
diff --git a/public/directives/wz-table/lib/data.js b/public/directives/wz-table/lib/data.js
@@ -64,10 +64,48 @@ export async function filterData(
     $scope.wazuh_table_loading = false;
     $scope.error = `Error filtering by ${
       filter ? filter.value : 'undefined'
-    } - ${error.message || error}.`;
+      } - ${error.message || error}.`;
     errorHandler.handle(
       `Error filtering by ${
-        filter ? filter.value : 'undefined'
+      filter ? filter.value : 'undefined'
+      }. ${error.message || error}`,
+      'Data factory'
+    );
+  }
+  if (!$scope.$$phase) $scope.$digest();
+  return;
+}
+
+export async function queryData(
+  query,
+  term,
+  instance,
+  wzTableFilter,
+  $scope,
+  fetch,
+  errorHandler
+) {
+  try {
+    $scope.error = false;
+    $scope.wazuh_table_loading = true;
+    instance.removeFilters();
+    if (term) {
+      instance.addFilter('search', term);
+    }
+    if (query) {
+      instance.addFilter('q', query);
+    }
+    wzTableFilter.set(instance.filters);
+    await fetch();
+    $scope.wazuh_table_loading = false;
+  } catch (error) {
+    $scope.wazuh_table_loading = false;
+    $scope.error = `Query error ${
+      query ? query.value : 'undefined'
+      } - ${error.message || error}.`;
+    errorHandler.handle(
+      `Query error ${
+      query ? query.value : 'undefined'
       }. ${error.message || error}`,
       'Data factory'
     );

diff --git a/public/directives/wz-table/lib/listeners.js b/public/directives/wz-table/lib/listeners.js
@@ -20,6 +20,10 @@ export function wazuhFilter(parameters, filter) {
   return filter(parameters.filter);
 }
 
+export function wazuhQuery(parameters, query) {
+  return query(parameters.query, parameters.search);
+}
+
 export function wazuhSearch(parameters, instance, search) {
   try {
     const matchesSpecificPath =

diff --git a/public/directives/wz-table/wz-table-directive.js b/public/directives/wz-table/wz-table-directive.js
@@ -19,14 +19,14 @@ import { parseValue } from './lib/parse-value';
 import * as pagination from './lib/pagination';
 import { sort } from './lib/sort';
 import * as listeners from './lib/listeners';
-import { searchData, filterData } from './lib/data';
+import { searchData, filterData, queryData } from './lib/data';
 import { clickAction } from './lib/click-action';
 import { initTable } from './lib/init';
 import { checkGap } from './lib/check-gap';
 
 const app = uiModules.get('app/wazuh', []);
 
-app.directive('wzTable', function() {
+app.directive('wzTable', function () {
   return {
     restrict: 'E',
     scope: {
@@ -135,6 +135,17 @@ app.directive('wzTable', function() {
           errorHandler
         );
 
+        const query = async (query, search) =>
+        queryData(
+          query,
+          search,
+          instance,
+          wzTableFilter,
+          $scope,
+          fetch,
+          errorHandler
+        );
+
       const realTimeFunction = async () => {
         try {
           $scope.error = false;
@@ -184,7 +195,7 @@ app.directive('wzTable', function() {
       $scope.prevPage = () => pagination.prevPage($scope);
       $scope.nextPage = async currentPage =>
         pagination.nextPage(currentPage, $scope, errorHandler, fetch);
-      $scope.setPage = function() {
+      $scope.setPage = function () {
         $scope.currentPage = this.n;
         $scope.nextPage(this.n);
       };
@@ -204,6 +215,10 @@ app.directive('wzTable', function() {
         listeners.wazuhSearch(parameters, instance, search)
       );
 
+      $scope.$on('wazuhQuery', (event, parameters) =>
+        listeners.wazuhQuery(parameters, query)
+      );
+
       $scope.$on('wazuhRemoveFilter', (event, parameters) =>
         listeners.wazuhRemoveFilter(parameters, instance, wzTableFilter, init)
       );

diff --git a/public/directives/wz-tag-filter/wz-tag-filter.html b/public/directives/wz-tag-filter/wz-tag-filter.html
@@ -0,0 +1,33 @@
+<div id='wz-search-filter-bar' class='kuiLocalSearchInput'>
+    <span class='fa fa-search' aria-hidden='true'></span>
+    <div class='wz-tags' ng-class='{focused: hasFocus}'>
+        <ul class='tag-list'>
+            <li ng-repeat='group in groupedTagList track by $index'>
+                <div ng-class='{grouped: group.length > 1}'>
+                    <div ng-repeat='tag in group track by $index'>
+                        <div class='wz-tag-item'>
+                            <span class='wz-tag-remove-button fa' ng-class='(tag.type === "filter") ? "fa-filter" : "fa-search"'></span>
+                            <span class=''>{{tag.value.name}} <span ng-show='tag.type === "filter"'>:
+                                    {{tag.value.value}}</span></span>
+                            <a class='wz-tag-remove-button' ng-click='removeTag(tag.id, false)'>×</a>
+                        </div>
+                        <span class='wz-tag-item-connector' ng-show='$index != group.length - 1'>OR</span>
+                    </div>
+                    <a ng-show='group.length > 1' class='wz-tag-remove-button-group' ng-click='removeTag(group[0].key, true)'>×</a>
+                </div>
+                <span class='wz-tag-item-connector' ng-show='$index != groupedTagList.length - 1'> AND </span>
+            </li>
+        </ul>
+        <input id='wz-search-filter-bar-input' class='wz-search-filter-bar-input input' type='text' ng-model='newTag'
+            ng-focus='showAutocomplete(true)' ng-blur='showAutocomplete(false)'
+            placeholder='Add filter or search' ng-keyup='!autocompleteEnter && $event.keyCode == 13 ? addTag(true) : addSearchKey($event)' />
+        <div id='wz-search-filter-bar-autocomplete' class='wz-search-filter-bar-autocomplete' ng-show='isAutocomplete && autocompleteContent.list.length > 0'>
+            <p><b>{{autocompleteContent.title}}</b></p>
+            <ul id='wz-search-filter-bar-autocomplete-list'>
+                <li ng-repeat='element in autocompleteContent.list track by $index' ng-mousedown='autocompleteContent.isKey ? addTagKey(element) : addTagValue(element)'>
+                    <span ng-if='element'>{{element}}</span>
+                </li>
+            </ul>
+        </div>
+    </div>
+</div>