Bugfix/10.5.18/route does not update when changing the index pattern

backend/src/main/resources/config/liquibase/master.xml

@@ -69,7 +69,7 @@
 
     <include file="/config/liquibase/changelog/20241213001_updating_asa_and_firepower_filters.xml" relativeToChangelogFile="false"/>
 
-    <include file="/config/liquibase/changelog/20241120001_update_compliance_menu.xml" relativeToChangelogFile="false"/>
+    <!--<include file="/config/liquibase/changelog/20241120001_update_compliance_menu.xml" relativeToChangelogFile="false"/>-->
 
     <include file="/config/liquibase/changelog/20250121001_add_remediation_column_config_report.xml" relativeToChangelogFile="false"/>
 

frontend/src/app/log-analyzer/explorer/log-analyzer-field/log-analyzer-field-card/log-analyzer-field-card.component.html

@@ -2,13 +2,14 @@
      (mouseover)="viewAddButton=true" class="d-flex justify-content-between align-items-center p-1 card-field cursor-pointer">
   <span (click)="isCollapsed = !isCollapsed" class="d-flex flex-grow-1 flex-nowrap overflow-hidden">
     <!--<span class="font-weight-bold"><i [class]="resolveIcon()"></i></span>&nbsp;&nbsp;-->
-        <span class="font-weight-bold mr-1">
-          <i class="icon-dots icon-hover"></i>
-          <i [class]="resolveIcon()"></i>
+        <span class="d-flex align-items-center font-weight-bold mr-1">
+          <i class="icon-field icon-dots icon-hover top-0"></i>
+          <i class="top-0" [ngClass]="resolveIcon()"></i>
         </span>
     <span [ngClass]="{'font-weight-bold':isCollapsed}"
           [ngStyle]="{'max-width':fieldWidth}"
           [ngbTooltip]="processField(field.name)"
+          container="body"
           [openDelay]="1000"
           class="field-name"
           placement="bottom"
@@ -17,11 +18,31 @@
     </span>
   </span>
   <ng-container *ngIf="field.name !== '@timestamp'">
-    <span (click)="addToColumns(field)" [hidden]="!viewAddButton"
+    <!--<span (click)="addToColumns(field)" [hidden]="!viewAddButton"
           [ngClass]="isInColumns(field) ? 'bg-danger-600' : 'bg-blue-800'"
           class="badge cursor-pointer font-weight-light">
-   {{isInColumns(field) ? 'remove' : 'add'}}
-  </span>
+        {{isInColumns(field) ? 'remove' : 'add'}}
+    </span>-->
+    <span (click)="addToFilter(field)" [hidden]="!viewAddButton || field.name === 'log.timestamp'">
+      <div
+        [ngClass]="{'content-circle': !isInColumns(field), 'hidden': isInColumns(field)}"
+        [ngbTooltip]="'Add field as filter'"
+        container="body"
+        placement="auto"
+        class="d-flex align-items-center justify-content-center mr-1">
+        <i class="font-size-sm top-0" [ngClass]="{'icon-filter4': !isInColumns(field), 'hidden': isInColumns(field)}"></i>
+      </div>
+    </span>
+    <span (click)="addToColumns(field)" [hidden]="!viewAddButton">
+      <div
+        [ngClass]="{'content-circle': !isInColumns(field), 'background-color-grey-100 p-2 border-radius-1': isInColumns(field)}"
+        [ngbTooltip]="!isInColumns(field) ? 'Add field as column' : 'Remove field from table'"
+        container="body"
+        placement="auto"
+        class="d-flex align-items-center justify-content-center">
+        <i class="font-size-sm" [ngClass]="{'icon-table': !isInColumns(field), 'icon-cross2': isInColumns(field)}"></i>
+      </div>
+    </span>
   </ng-container>
 </div>
 <div *ngIf="isCollapsed" id="collapseFieldProperty">

frontend/src/app/log-analyzer/explorer/log-analyzer-field/log-analyzer-field-card/log-analyzer-field-card.component.scss

@@ -1,8 +1,4 @@
 .card-field {
-  i {
-    font-size: 12px;
-  }
-
   .field-name {
     min-width: 200px;
     white-space: nowrap;
@@ -54,5 +50,18 @@
   }
 }
 
+.content-circle {
+  color: #3F4254;
+  border: 1px solid #3F4254;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background-color: transparent;
+}
+
+.icon-field {
+  font-size: 0.8rem!important;
+}
+
 
 

frontend/src/app/log-analyzer/explorer/log-analyzer-field/log-analyzer-field-card/log-analyzer-field-card.component.ts

@@ -1,5 +1,9 @@
 import {Component, EventEmitter, HostListener, Input, OnInit, Output} from '@angular/core';
+import {
+  UtmFilterBehavior
+} from '../../../../shared/components/utm/filters/utm-elastic-filter/shared/behavior/utm-filter.behavior';
 import {ElasticDataTypesEnum} from '../../../../shared/enums/elastic-data-types.enum';
+import {ElasticOperatorsEnum} from '../../../../shared/enums/elastic-operators.enum';
 import {ElasticSearchFieldInfoType} from '../../../../shared/types/elasticsearch/elastic-search-field-info.type';
 import {ElasticFilterType} from '../../../../shared/types/filter/elastic-filter.type';
 
@@ -18,7 +22,7 @@ export class LogAnalyzerFieldCardComponent implements OnInit {
   viewAddButton = false;
   fieldWidth: string;
 
-  constructor() {
+  constructor(private utmFilterBehavior: UtmFilterBehavior) {
   }
 
   ngOnInit() {
@@ -51,6 +55,17 @@ export class LogAnalyzerFieldCardComponent implements OnInit {
     this.addFieldToColumn.emit(field);
   }
 
+
+  addToFilter(field: ElasticSearchFieldInfoType) {
+    this.utmFilterBehavior.$filterChange.next(
+      {
+        field: this.utmFilterBehavior.processKey(field.name),
+        value: null,
+        operator: ElasticOperatorsEnum.IS,
+        status: 'ACTIVE'
+      });
+  }
+
   isInColumns(field: ElasticSearchFieldInfoType): boolean {
     return this.fieldSelected.findIndex(value => value.name === field.name) !== -1;
   }

frontend/src/app/log-analyzer/explorer/log-analyzer-tabs/log-analyzer-tabs.component.ts

@@ -101,7 +101,7 @@ export class LogAnalyzerTabsComponent implements OnInit, OnDestroy {
     const uuid = UUID.UUID();
     this.tabNumber = this.tabService.getTabCount() + 1;
     const pattern = params && params.patternId ? new UtmIndexPattern(params.patternId, params.indexPattern, true) :
-      new UtmIndexPattern(1, 'v11-log-*', true);
+      new UtmIndexPattern(1, 'log-*', true);
 
     this.tabService.addTab(
       new TabType(LogAnalyzerViewComponent, (tabName ? tabName : 'New query ' + this.tabNumber),

frontend/src/app/log-analyzer/explorer/log-analyzer-view/log-analyzer-view.component.ts

@@ -220,7 +220,6 @@ export class LogAnalyzerViewComponent implements OnInit, OnDestroy {
   }
 
   onFilterChange($event: ElasticFilterType[]) {
-    console.log('filter', $event);
     this.utmFilterBehavior.$filterChange.next(null);
     this.utmFilterBehavior.$filterExistChange.next(null);
     this.filters = $event;
@@ -252,8 +251,10 @@ export class LogAnalyzerViewComponent implements OnInit, OnDestroy {
         },
         (res: HttpResponse<any>) => {
           this.counter = moment(new Date()).diff(dateStart, 'seconds', true);
+          this.loading = false;
           this.runningQuery = false;
           this.error = true;
+          this.rows = [];
         }
       );
     } else {

frontend/src/app/shared/components/utm/filters/elastic-filter-time/elastic-filter-time.component.html

@@ -5,8 +5,8 @@
        [ngbPopover]="popContent"
        autoClose="outside"
        class="d-flex justify-content-start align-items-center cursor-pointer pr-2"
-       placement="bottom-left"
-       popoverClass="utm-popover-xs" style="white-space: nowrap">
+       placement="bottom-right"
+       popoverClass="utm-popover-filter-time" style="white-space: nowrap">
     <span [ngClass]="invertContent?'ml-2':' p-2 mr-2 border-left-1 '"
           class="setting-filter cursor-pointer text-blue-800 border-grey-100">
     <i class="icon-calendar52"></i>

frontend/src/app/shared/components/utm/filters/utm-elastic-filter/elastic-filter-add/elastic-filter-add.component.html

@@ -107,7 +107,19 @@
   </form>
 </div>
 <div class="d-flex justify-content-end pr-2 mt-2">
-  <button (click)="addFilter()" [disabled]="!formFilter.valid"
+  <button (click)="addFilter()" [disabled]="
+    !formFilter.valid ||
+    (
+      (formFilter.get('operator').value !== operatorEnum.IS_BETWEEN &&
+       formFilter.get('operator').value !== operatorEnum.IS_NOT_BETWEEN &&
+       !formFilter.get('value').value
+      ) ||
+      (
+        (formFilter.get('operator').value === operatorEnum.IS_BETWEEN ||
+         formFilter.get('operator').value === operatorEnum.IS_NOT_BETWEEN) &&
+        (!valueFrom || !valueTo)
+      )
+    )"
           class="btn btn-secondary utm-button utm-button-primary" type="button">
     <i class="icon-filter4"></i>&nbsp;
     <span>{{filter ? 'Edit filter' : 'Add filter'}}</span>

frontend/src/app/shared/components/utm/filters/utm-elastic-filter/elastic-filter.component.html

@@ -101,8 +101,7 @@
 
         <!-- Filters List -->
         <div class="filters d-flex justify-content-start align-items-center flex-wrap">
-          <div
-            *ngFor="let filter of resolveFilters(); let index = index"
+          <div *ngFor="let filter of resolveFilters(); let index = index"
             class="dropdown cursor-pointer d-flex justify-content-center align-items-center border-1 mr-2 p-1 border-grey-100 border-radius-1"
             #popoverField="ngbPopover"
             (click)="selectFilter(filter, index)"

frontend/src/app/shared/components/utm/filters/utm-elastic-filter/elastic-filter.component.scss

@@ -24,10 +24,6 @@ app-elastic-filter-add {
   color: #007bff;
 }
 
-.border-radius-1{
-  border-radius: 4px;
-}
-
 .order-buttons-container {
   display: flex;
   height: 30px;

frontend/src/app/shared/components/utm/filters/utm-elastic-filter/elastic-filter.component.ts

@@ -45,12 +45,22 @@ export class ElasticFilterComponent implements OnInit, OnDestroy {
         filter(filterType => !!filterType))
       .subscribe(filterType => {
         if (filterType.status === 'ACTIVE') {
+          if (!filterType.value) {
+            this.popoverFilter.close();
+            this.selectFilter(filterType, this.filters.length - 1);
+            this.editMode = true;
+            setTimeout(() =>  this.popoverFilter.open(),
+              300);
+          }
+
           this.filters.push(filterType);
         } else {
           this.filters = this.filters.filter(f => f.value !== filterType.value);
         }
 
-        this.filterChange.emit(this.filters);
+        if (!this.filterSelected) {
+          this.filterChange.emit(this.filters);
+        }
       });
   }
 
@@ -95,13 +105,13 @@ export class ElasticFilterComponent implements OnInit, OnDestroy {
       return (value.field === filter.field && value.operator === filter.operator);
     });
     this.filters.splice(index, 1);
-    this.filterSelected = undefined;
+    this.filterSelected = null;
     this.filterChange.emit(this.filters);
   }
 
   deleteAll() {
     this.filters = [];
-    this.filterSelected = undefined;
+    this.filterSelected = null;
     this.filterChange.emit(this.filters);
   }
 

frontend/src/app/shared/components/utm/filters/utm-elastic-filter/shared/behavior/utm-filter.behavior.ts

@@ -12,4 +12,15 @@ export class UtmFilterBehavior {
    * Use to add exist filter on add field to table
    */
   $filterExistChange = new BehaviorSubject<ElasticFilterType>(null);
+
+  processKey(key: string): string {
+    const regex = /\.(\d+)\./g;
+    if (regex.test(key)) {
+      return key.replace(regex, '.');
+    } else if (!isNaN(Number(key.substring(key.lastIndexOf('.'), key.length)))) {
+      return key.substring(0, key.lastIndexOf('.'));
+    } else {
+      return key;
+    }
+  }
 }

frontend/src/app/shared/components/utm/table/utm-table/utm-table-detail/utm-table-detail-view/utm-table-detail-view.component.ts

@@ -37,24 +37,13 @@ export class UtmTableDetailViewComponent implements OnInit {
   filterByValue(row: { key: string; value: any }) {
     this.utmFilterBehavior.$filterChange.next(
       {
-        field: this.processKey(row.key),
+        field: this.utmFilterBehavior.processKey(row.key),
         value: row.value,
         operator: ElasticOperatorsEnum.IS,
         status: 'ACTIVE'
       });
   }
 
-  processKey(key: string): string {
-    const regex = /\.(\d+)\./g;
-    if (regex.test(key)) {
-      return key.replace(regex, '.');
-    } else if (!isNaN(Number(key.substring(key.lastIndexOf('.'), key.length)))) {
-      return key.substring(0, key.lastIndexOf('.'));
-    } else {
-      return key;
-    }
-  }
-
   isDate(key: string, value: string): boolean {
     return (key.toLowerCase().includes('time') || key.toLowerCase().includes('date')) && !isNaN(new Date(value).getDate());
   }

frontend/src/app/shared/constants/filter-operators.const.ts

@@ -12,8 +12,8 @@ export const FILTER_OPERATORS: OperatorsType[] = [
   {name: 'is not between', operator: ElasticOperatorsEnum.IS_NOT_BETWEEN, inverse: ElasticOperatorsEnum.IS_BETWEEN},
   {name: 'contain', operator: ElasticOperatorsEnum.CONTAIN, inverse: ElasticOperatorsEnum.DOES_NOT_CONTAIN},
   {name: 'does not contain', operator: ElasticOperatorsEnum.DOES_NOT_CONTAIN, inverse: ElasticOperatorsEnum.CONTAIN},
-  {name: 'contain one of', operator: ElasticOperatorsEnum.CONTAIN_ONE_OF, inverse: ElasticOperatorsEnum.DOES_NOT_CONTAIN_ONE_OF},
-  {name: 'does not contain one of', operator: ElasticOperatorsEnum.DOES_NOT_CONTAIN_ONE_OF, inverse: ElasticOperatorsEnum.CONTAIN_ONE_OF},
+  {name: 'contains one of', operator: ElasticOperatorsEnum.CONTAIN_ONE_OF, inverse: ElasticOperatorsEnum.DOES_NOT_CONTAIN_ONE_OF},
+  {name: 'does not contains one of', operator: ElasticOperatorsEnum.DOES_NOT_CONTAIN_ONE_OF, inverse: ElasticOperatorsEnum.CONTAIN_ONE_OF},
   {name: 'start with', operator: ElasticOperatorsEnum.START_WITH, inverse: ElasticOperatorsEnum.NOT_START_WITH},
   {name: 'does not start with', operator: ElasticOperatorsEnum.NOT_START_WITH, inverse: ElasticOperatorsEnum.START_WITH},
   {name: 'end with', operator: ElasticOperatorsEnum.ENDS_WITH, inverse: ElasticOperatorsEnum.NOT_ENDS_WITH},

frontend/src/styles.scss

@@ -1328,5 +1328,9 @@ app-utm-cp-cron-editor {
   max-width: 350px !important;
 }
 
+.border-radius-1 {
+  border-radius: 4px;
+}
+