feat(rule_list): added rule visualizer

Author: AlexSanchez-bit

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

@@ -101,7 +101,6 @@ export class AddRuleComponent implements OnInit, OnDestroy {
           if (controlName !== 'afterEvents') {
             const control = this.ruleForm.get(controlName);
             if (control && !control.valid) {
-              console.log(control,'is invalid')
               isValid = false;
             }
           }

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

@@ -13,10 +13,11 @@ export class ImportRuleService {
     }
   }
 
-  private minWordsCheck(value: string, min: number, max: number): boolean {
+  private minWordsCheck(value: string, min: number, minLengthPerWord: number): boolean {
     if (!value) return false;
-    const words = value.trim().split(/\s+/);
-    return words.length >= min && words.length <= max;
+    const words = value.trim().split(/\s+/).filter(word => word.length >= minLengthPerWord);
+    return words.length >= min;
+
   }
 
   isValidRule(obj: Rule): { isValid: boolean; errors: Record<string, string[]> } {

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;
+}

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

@@ -0,0 +1,34 @@
+
+import { Component, Input } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { Rule } from '../../../models/rule.model';
+import * as yaml from 'js-yaml';
+
+@Component({
+  selector: 'app-see-rule',
+  templateUrl: './see-rule.component.html',
+  styleUrls: ['./see-rule.component.scss'],
+})
+export class SeeRuleComponent {
+ @Input() rowDocument: Rule;
+
+  copied = false;
+
+  get yamlString(): string {
+    try {
+      return yaml.dump(this.rowDocument, { indent: 2 });
+    } catch (e) {
+      console.log(e)
+      return 'Error parsing YAML';
+    }
+  }
+
+  copyToClipboard() {
+    navigator.clipboard.writeText(this.yamlString).then(() => {
+      this.copied = true;
+      setTimeout(() => (this.copied = false), 1500);
+    });
+  }}
+
+
+

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

@@ -45,11 +45,13 @@ import {RuleResolverService} from './services/rule.resolver.service';
 import {RuleService} from './services/rule.service';
 import {RulesResolverService} from './services/rules.resolver.service';
 import {GenericFilterComponent} from './share/generic-filter/generic-filter.component';
+import {SeeRuleComponent} from './app-rule/components/see-rule/see-rule.component'
 
 
 @NgModule({
   declarations: [
       AppRuleComponent,
+      SeeRuleComponent,
       RuleListComponent,
       RuleFieldComponent,
       RuleDetailComponent,
@@ -104,7 +106,8 @@ import {GenericFilterComponent} from './share/generic-filter/generic-filter.comp
        AddTypeComponent,
        AddPatternComponent,
        AddAssetComponent,
-       ImportRuleComponent
+       ImportRuleComponent,
+      SeeRuleComponent,
    ]
 })
 export class RuleManagementModule { }

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

@@ -2,7 +2,7 @@
   <div *ngFor="let key of keys; let i = index"
        [ngClass]="{'error-highlight': hasError(key)}">
     <ngx-json-viewer [expanded]="false" [json]="separatedObject[i]"></ngx-json-viewer>
-    <small *ngIf="hasError(key)" class="error-message">
+    <small *ngIf="hasError(key)" class="error-message text-xs">
       {{ getErrors(key).join(', ') }}
     </small>
   </div>

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

@@ -49,3 +49,7 @@
   font-size: 0.75rem;
   margin-left: 8px;
 }
+
+.text-xs{
+  font-size:9px;
+}