Merge pull request #1301 from utmstack/backlog/fix_build_expression

Backlog/fix build expression

Author: mjabascal10

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

@@ -199,7 +199,7 @@
               </div>
             </div>
           </div>
-          <div class="col-md-12 form-group">
+          <div class="col-md-12 form-group mt-4">
             <app-expression-console
               [ngClass]="{'is-invalid': ruleForm.get('definition').invalid && ruleForm.get('definition').touched}"
               formControlName="definition"
@@ -260,7 +260,7 @@
       </div>
     </form>
   </div>
-  <div *ngIf="ruleForm" class="button-container d-flex justify-content-end pr-3 w-100">
+  <div *ngIf="ruleForm" class="button-container d-flex justify-content-end pb-4 pr-3 w-100">
     <button *ngIf="currentStep != RULE_FORM.STEP2" (click)="activeModal.close()"
             class="btn utm-button utm-button-grey mr-2">
       <i class="icon-cancel-circle2 top-0"></i>&nbsp; Cancel
@@ -274,7 +274,7 @@
       Next
       <i class="icon-arrow-right32"></i>&nbsp;
     </button>
-    <button *ngIf="currentStep == RULE_FORM.STEP2" (click)="saveRule()" [disabled]="ruleForm.invalid"
+    <button *ngIf="currentStep == RULE_FORM.STEP2" (click)="saveRule()" [disabled]="!isRuleFormValid"
             class="btn utm-button utm-button-primary">
       <i [ngClass]="loading ? 'icon-spinner spinner' : 'icon-grid-alt top-0'"></i>&nbsp; Save
     </button>

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

@@ -1,5 +1,6 @@
 import {Component, OnDestroy, OnInit} from '@angular/core';
-import {AbstractControl, FormArray, FormBuilder, FormGroup, Validators} from '@angular/forms';
+import {AbstractControl, ValidatorFn ,ValidationErrors, FormArray, FormBuilder, FormGroup, Validators} from '@angular/forms';
+
 import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
 import {forkJoin, Observable} from 'rxjs';
 import {map} from 'rxjs/operators';
@@ -93,16 +94,47 @@ export class AddRuleComponent implements OnInit, OnDestroy {
     this.loadDataTypes();
   }
 
+  get isRuleFormValid(){
+    let isValid = true;
+    if(this.ruleForm.get('afterEvents').errors && this.ruleForm.get('afterEvents').errors.firstElementEmpty) {
+       Object.keys(this.ruleForm.controls).forEach(controlName => {
+          if (controlName !== 'afterEvents') {
+            const control = this.ruleForm.get(controlName);
+            if (control && !control.valid) {
+              isValid = false;
+            }
+          }
+        });
+    }else{
+      return this.ruleForm.valid
+    }
+
+    return isValid
+  }
+
+
+
+  get ruleFormValue(){
+    if(this.ruleForm.get('afterEvents').errors && this.ruleForm.get('afterEvents').errors.firstElementEmpty) {
+      return {
+           ...this.ruleForm.value,
+           afterEvents:[]
+      }
+    }else{
+      return this.ruleForm.value
+    }
+  }
+
   saveRule() {
-    if (this.ruleForm.valid) {
+    if (this.isRuleFormValid) {
       const variables = this.savedVariables .length > 0 ?  this.savedVariables.map(variable => ({
         as: variable.as,
         get: variable.get,
         ofType: variable.ofType
       })) : [];
       this.isSubmitting = true;
       const rule: Rule = {
-        ...this.ruleForm.value,
+        ...this.ruleFormValue,
         dataTypes: this.getDataTypes(this.ruleForm.value.dataTypes)
       };
       // rule.definition.ruleVariables = variables;
@@ -146,7 +178,7 @@ export class AddRuleComponent implements OnInit, OnDestroy {
         rule && rule.afterEvents && rule.afterEvents.length
           ? rule.afterEvents.map(event => this.buildSearchRequest(event))
           : []
-      )
+      ,[this.firstEmptySingleElementValidator()])
     });
     // this.savedVariables = rule ? rule.definition.ruleVariables : [];
     const afterEventsArray = this.ruleForm.get('afterEvents') as FormArray;
@@ -162,7 +194,7 @@ export class AddRuleComponent implements OnInit, OnDestroy {
       });
     });
 
-
+    this.addAfterEvent()
   }
 
 
@@ -303,4 +335,21 @@ export class AddRuleComponent implements OnInit, OnDestroy {
   ngOnDestroy() {
     this.dataTypeService.resetTypes();
   }
+
+
+ firstEmptySingleElementValidator(): ValidatorFn {
+  return (control: AbstractControl): ValidationErrors | null => {
+    if (control instanceof FormArray) {
+      if (control.length === 1) {
+        const firstElement = control.at(0).value;
+        const isEmpty = Object.values(firstElement).every((val:any) => val === '' || val == null || val.length==0);
+        return !isEmpty ? null : { firstElementEmpty: true };
+      }
+    }
+    return null;
+  };
+}
+
+
+
 }

frontend/src/app/rule-management/app-rule/components/expression-console/expression-console.component.scss

@@ -114,3 +114,5 @@
   background-color: #f0f0f0;
 }
 
+
+

frontend/src/app/rule-management/app-rule/components/import-rules/import-rule.component.html

@@ -86,7 +86,7 @@
           </div>
 
           <div *ngIf="rule.showDetail" [ngClass]="{'alert-danger' : !rule.valid, 'alert-success': rule.valid}" class="alert mt-2 py-2 pl-3 w-100">
-            <app-utm-json-detail-view [rowDocument]="rule"></app-utm-json-detail-view>
+            <app-utm-json-detail-view [errors]="rule.errors" [rowDocument]="rule"></app-utm-json-detail-view>
           </div>
         </div>
       </div>

frontend/src/app/rule-management/app-rule/components/import-rules/import-rule.component.ts

@@ -145,12 +145,12 @@ export class ImportRuleComponent implements OnInit, OnDestroy {
           }));
 
           this.rules = this.rules.map(rule => {
-          const isValid = this.importRuleService.isValidRule(rule);
-
+          const {isValid,errors} = this.importRuleService.isValidRule(rule);
           return {
             ...rule,
             valid: isValid,
-            status: isValid ? ('valid' as Status) : ('error' as Status)
+            status: isValid ? ('valid' as Status) : ('error' as Status),
+            errors
           };
 
         });

frontend/src/app/rule-management/app-rule/components/import-rules/import-rule.service.ts

@@ -1,10 +1,10 @@
-import {Injectable} from '@angular/core';
-import {Rule} from '../../../models/rule.model';
+import { Injectable } from '@angular/core';
+import { Rule } from '../../../models/rule.model';
 
 @Injectable()
 export class ImportRuleService {
 
-   isValidURL(url: string): boolean {
+  isValidURL(url: string): boolean {
     try {
       new URL(url);
       return true;
@@ -13,34 +13,101 @@ export class ImportRuleService {
     }
   }
 
-  isValidRule(obj: Rule): obj is Rule {
-     if (!obj || typeof obj !== 'object') { return false; }
-
-     const requiredProps: (keyof Rule)[] = [
-       'dataTypes', 'name', 'confidentiality', 'integrity', 'availability',
-      'category', 'technique', 'description', 'references', 'definition', 'adversary'
-    ];
-
-
-     if (!requiredProps.every(prop => prop in obj)) { return false; }
-
-     if (
-       (!Array.isArray(obj.dataTypes) || obj.dataTypes.length === 0) ||
-      typeof obj.name !== 'string' ||
-      typeof obj.confidentiality !== 'number' ||
-      typeof obj.integrity !== 'number' ||
-      typeof obj.availability !== 'number' ||
-      typeof obj.category !== 'string' ||
-      typeof obj.adversary !== 'string' ||
-      typeof obj.technique !== 'string' ||
-      typeof obj.description !== 'string' ||
-      !Array.isArray(obj.references) ||
-      typeof obj.definition !== 'string'
-    ) {
-      return false;
+  private minWordsCheck(value: string, min: number, minLengthPerWord: number): boolean {
+    if (!value) return false;
+    const words = value.trim().split(/\s+/).filter(word => word.length >= minLengthPerWord);
+    return words.length >= min;
+
+  }
+
+  isValidRule(obj: Rule): { isValid: boolean; errors: Record<string, string[]> } {
+    const errors: Record<string, string[]> = {};
+
+    if (!obj || typeof obj !== 'object') {
+      return { isValid: false, errors: { rule: ['Rule object is missing or invalid'] } };
+    }
+
+    // dataTypes
+    if (!Array.isArray(obj.dataTypes) || obj.dataTypes.length === 0) {
+      errors['dataTypes'] = ['dataTypes are required'];
+    }
+
+    // name
+    if (typeof obj.name !== 'string' || obj.name.trim() === '') {
+      errors['name'] = ['Name is required'];
+    } else if (!this.minWordsCheck(obj.name, 2, 3)) {
+      errors['name'] = ['Name must contain between 2 and 3 words'];
+    }
+
+    // adversary
+    if (typeof obj.adversary !== 'string' || obj.adversary.trim() === '') {
+      errors['adversary'] = ['Adversary is required'];
+    }
+
+    // confidentiality
+    if (typeof obj.confidentiality !== 'number') {
+      errors['confidentiality'] = ['Confidentiality must be a number'];
+    } else if (obj.confidentiality < 0 || obj.confidentiality > 3) {
+      errors['confidentiality'] = ['Confidentiality must be between 0 and 3'];
+    }
+
+    // integrity
+    if (typeof obj.integrity !== 'number') {
+      errors['integrity'] = ['Integrity must be a number'];
+    } else if (obj.integrity < 0 || obj.integrity > 3) {
+      errors['integrity'] = ['Integrity must be between 0 and 3'];
+    }
+
+    // availability
+    if (typeof obj.availability !== 'number') {
+      errors['availability'] = ['Availability must be a number'];
+    } else if (obj.availability < 0 || obj.availability > 3) {
+      errors['availability'] = ['Availability must be between 0 and 3'];
+    }
+
+    // category
+    if (typeof obj.category !== 'string' || obj.category.trim() === '') {
+      errors['category'] = ['Category is required'];
+    } else if (!this.minWordsCheck(obj.category, 1, 3)) {
+      errors['category'] = ['Category must contain between 1 and 3 words'];
+    }
+
+    // technique
+    if (typeof obj.technique !== 'string' || obj.technique.trim() === '') {
+      errors['technique'] = ['Technique is required'];
+    } else if (!this.minWordsCheck(obj.technique, 2, 3)) {
+      errors['technique'] = ['Technique must contain between 2 and 3 words'];
     }
 
-     return obj.references.every((ref: any) => typeof ref === 'string' && this.isValidURL(ref));
+    // description
+    if (typeof obj.description !== 'string' || obj.description.trim() === '') {
+      errors['description'] = ['Description is required'];
+    } else if (!this.minWordsCheck(obj.description, 2, 3)) {
+      errors['description'] = ['Description must contain between 2 and 3 words'];
+    }
+
+    // definition
+    if (typeof obj.definition !== 'string' || obj.definition.trim() === '') {
+      errors['definition'] = ['Definition is required'];
+    } else if (!this.minWordsCheck(obj.definition, 2, 3)) {
+      errors['definition'] = ['Definition must contain between 2 and 3 words'];
+    }
 
+    // references
+    if (!Array.isArray(obj.references)) {
+      errors['references'] = ['References must be an array'];
+    } else {
+      const invalidRefs = obj.references.filter((ref: any) => typeof ref !== 'string' || !this.isValidURL(ref));
+      if (invalidRefs.length > 0) {
+        errors['references'] = ['All references must be valid URLs'];
+      }
+    }
+
+
+    return {
+      isValid: Object.keys(errors).length === 0,
+      errors
+    };
   }
 }
+

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

@@ -41,6 +41,12 @@
               <td class="td-action">
                 <div class="d-flex justify-content-end align-items-center medium-icon">
 
+                  <i (click)="visualizeRule(rule)"
+                     class="icon-eye cursor-pointer ml-2"
+                     ngbTooltip="View Rule"
+                     container="body"
+                     placement="left"></i>
+
                   <i (click)="activeRule(rule)"
                      class="cursor-pointer ml-2"
                      [ngClass]="{'icon-blocked': rule.ruleActive, 'icon-check2': !rule.ruleActive}"

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

@@ -19,6 +19,7 @@ import {FilterService} from '../../../services/filter.service';
 import {RuleService} from '../../../services/rule.service';
 import {AddRuleComponent} from '../add-rule/add-rule.component';
 import {ImportRuleComponent} from '../import-rules/import-rule.component';
+import {SeeRuleComponent} from '../see-rule/see-rule.component'
 
 
 @Component({
@@ -203,6 +204,12 @@ export class RuleListComponent implements OnInit, OnDestroy {
     this.handleResponse(modal);
   }
 
+
+  visualizeRule(rule:Rule){
+      const modal = this.modalService.open(SeeRuleComponent, {size: 'lg', centered: true});
+      modal.componentInstance.rowDocument = rule;
+  }
+
   handleResponse(modal: NgbModalRef) {
     modal.result.then((result: boolean) => {
       if (result) {

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

@@ -0,0 +1,15 @@
+
+<app-utm-modal-header [name]="'Rule Details'"></app-utm-modal-header>
+
+
+<!-- utm-json-detail-view.component.html -->
+<div class="json-detail-container p-4">
+  <div class="header d-flex flex-row w-100 align-items-center justify-content-end">
+    <button class="btn utm-button utm-button-primary" (click)="copyToClipboard()" title="Copy YAML">
+      <i class="icon-clipboard"></i>Copy
+    </button>
+    <small *ngIf="copied" class="copied-msg">✅ Copied!</small>
+
+  </div>
+  <app-utm-json-detail-view [rowDocument]="rowDocument"></app-utm-json-detail-view>
+</div>

frontend/src/app/rule-management/app-rule/components/see-rule/see-rule.component.scss

@@ -0,0 +1,20 @@
+
+/* utm-json-detail-view.component.scss */
+.json-detail-container {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+
+.copy-btn {
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: 18px;
+}
+
+.copied-msg {
+  color: green;
+  font-size: 12px;
+}