New tags and filters search bar

public/controllers/agent/agents-preview.js

@@ -80,6 +80,10 @@ export class AgentsPreviewController {
     this.$scope.$broadcast('wazuhFilter', { filter });
   }
 
+  query(query, search) {
+    this.$scope.$broadcast('wazuhQuery', { query, search });
+  }
+
   showAgent(agent) {
     this.shareAgent.setAgent(agent);
     this.$location.path('/agents');

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';

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

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 =

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: {
@@ -131,6 +131,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;
@@ -180,7 +191,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);
       };
@@ -200,6 +211,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)
       );

public/directives/wz-tag-filter/wz-tag-filter.html

@@ -0,0 +1,32 @@
+<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)'>×</a>
+                        </div>
+                        <span class='wz-tag-item-connector' ng-show='$index != group.length - 1'>OR</span>
+                    </div>
+                </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>