feat(rule-filters): enhance rule filters with status and formatting options

Signed-off-by: Manuel Abascal <mjabascal10@gmail.com>

Author: mjabascal10

frontend/src/app/rule-management/app-rule/app-rule.component.html

@@ -32,7 +32,7 @@ <h5 class="card-title mb-0 text-uppercase label-header">Manage Rules</h5>
                       </div>
                   </div>
                   <div class="filter-container p-2 d-flex flex-column justify-content-start h-100 w-100 overflow-auto">
-                      <div *ngFor="let filter of fieldFilters" class="w-100">
+                      <div *ngFor="let filter of ruleFilters" class="w-100">
                           <div *ngIf="filter.visible" class="w-100 mb-2">
                               <app-generic-filter [fieldFilter]="filter"
                                                   [url]="filterUrl">

frontend/src/app/rule-management/app-rule/app-rule.component.ts

@@ -3,7 +3,7 @@ import {SERVER_API_URL} from '../../app.constants';
 import {EventDataTypeEnum} from '../../data-management/alert-management/shared/enums/event-data-type.enum';
 import {Actions} from '../app-correlation-management/models/config.type';
 import {ConfigService} from '../app-correlation-management/services/config.service';
-import {FILTER_RULE_FIELDS} from '../models/rule.constant';
+import {RULE_FILTERS_FIELDS} from '../models/rule.constant';
 import {FilterService} from '../services/filter.service';
 
 
@@ -21,10 +21,12 @@ export class AppRuleComponent implements OnInit {
     }
 
     dataType: EventDataTypeEnum = EventDataTypeEnum.ALERT;
-    fieldFilters = FILTER_RULE_FIELDS;
+    ruleFilters = RULE_FILTERS_FIELDS;
     filterUrl = `${SERVER_API_URL}api/correlation-rule/search-property-values`;
 
-    ngOnInit() {}
+    ngOnInit() {
+      console.log(this.ruleFilters);
+    }
 
     addRule(action: Actions) {
       this.configService.onAction(action);

frontend/src/app/rule-management/app-rule/components/add-rule/add-rule.component.html

@@ -285,9 +285,9 @@
       Next
       <i class="icon-arrow-right32"></i>&nbsp;
     </button>
-    <button *ngIf="currentStep == RULE_FORM.STEP2" (click)="saveRule()" [disabled]="!isRuleFormValid"
+    <button *ngIf="currentStep == RULE_FORM.STEP2" (click)="saveRule()" [disabled]="!isRuleFormValid || isSubmitting"
             class="btn utm-button utm-button-primary">
-      <i [ngClass]="loading ? 'icon-spinner spinner' : 'icon-grid-alt top-0'"></i>&nbsp; Save
+      <i [ngClass]="isSubmitting ? 'icon-spinner spinner' : 'icon-grid-alt top-0'"></i>&nbsp; Save
     </button>
   </div>
 </div>

frontend/src/app/rule-management/models/rule.constant.ts

@@ -9,6 +9,7 @@ export const RULE_CONFIDENTIALITY = 'confidentiality';
 export const RULE_INTEGRITY = 'integrity';
 export const RULE_AVAILABILITY = 'availability';
 export const RULE_ADVERSARY = 'adversary';
+export const RULE_STATUS = 'active';
 
 // FILTERS FIELDS
 
@@ -17,6 +18,7 @@ export const RULE_FILTER_DATA_TYPES = 'RULE_DATA_TYPES';
 export const RULE_FILTER_CATEGORY = 'RULE_CATEGORY';
 export const RULE_FILTER_TECHNIQUE = 'RULE_TECHNIQUE';
 export const RULE_FILTER_ADVERSARY = 'RULE_ADVERSARY';
+export const RULE_FILTER_STATUS = 'RULE_STATUS';
 export const RULE_FILTER_REFERENCES = 'references';
 
 
@@ -98,7 +100,20 @@ export const RULE_FIELDS: UtmFieldType[] = [
     },
 ];
 
-export const FILTER_RULE_FIELDS = RULE_FIELDS.filter(f => f.filter);
+export const RULE_FILTERS_FIELDS = [
+  {
+    label: 'Status',
+    field: RULE_STATUS,
+    type: ElasticDataTypesEnum.BOOLEAN,
+    visible: true,
+    filter: true,
+    width: '5%',
+    sortField: 'ruleActive',
+    filterField: RULE_FILTER_STATUS,
+    formatValue: (value: boolean) => value ? 'Active' : 'Inactive'
+  },
+  ... RULE_FIELDS.filter(f => f.filter)
+]
 
 export interface RuleFilterType {
     ruleName?: string;

frontend/src/app/rule-management/share/generic-filter/generic-filter.component.html

@@ -35,7 +35,7 @@
                        class="mb-0 text-filter"
                        placement="bottom"
                        tooltipClass="utm-tooltip-bottom">
-                      {{item[0]}}
+                      {{ formatValue(item[0]) }}
                 </label>
               </ng-template>
             </app-filter>

frontend/src/app/rule-management/share/generic-filter/generic-filter.component.ts

@@ -90,6 +90,13 @@ export class GenericFilterComponent<T extends UtmFieldType> implements OnInit, A
     this.filterService.notifyRefresh(this.fieldFilter.filterField);
   }
 
+  formatValue(value: string): string {
+    if (this.fieldFilter.formatValue) {
+      return this.fieldFilter.formatValue(value);
+    }
+    return value;
+  }
+
   ngOnDestroy(): void {
     this.filterService.resetFieldValues();
     this.destroy$.next();

frontend/src/app/shared/types/table/utm-field.type.ts

@@ -11,6 +11,7 @@ export class UtmFieldType {
   width?: string;
   fields?: UtmFieldType[];
   sortField?: string;
+  formatValue?: (value: any) => string;
 
   static findFieldByNameInArray(fieldName: string, fields: UtmFieldType[]): UtmFieldType | null {
     for (const field of fields) {