feat(rule-view): integrate Monaco Editor for YAML editing and enhance styling

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

Author: mjabascal10

frontend/src/app/logstash/logstash-filters/logstash-filter-create/logstash-filter-create.component.scss

@@ -73,14 +73,23 @@
       background-color: #f0f0f0 !important;
     }
 
-    // Syntax highlighting colors for YAML
-    .mtk5 {
-      color: #0277bd !important; // Keys - Blue
+    .mtk7 {
+      color: #2d7a1a !important;
+      font-weight: 600 !important;
+    }
+
+    .mtk22 {
+      color: #0055cc !important;
       font-weight: 600 !important;
     }
 
-    .mtk1 {
-      color: #ff6b6b !important; // Values - Red
+    .mtk1,
+    .mtk5 {
+      color: #666666 !important;
+    }
+
+    .mtk3 {
+      color: #c26e00 !important;
     }
   }
 }

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

@@ -16,6 +16,16 @@
   </div>
 </div>
 
-<div class="d-flex h-100 m-h-0 overflow-auto p-2 rule-view-container">
-  <pre class="yaml-preview w-100" [innerHTML]="yamlHighlighted"></pre>
+<div class="rule-view-container">
+  <ngx-monaco-editor
+    style="height: 650px"
+    class="template-editor"
+    name="logstashFilter"
+    [options]="editorOptions"
+    [ngModel]="yamlString">
+  </ngx-monaco-editor>
 </div>
+
+<!--<div class="d-flex h-100 m-h-0 overflow-auto p-2 rule-view-container">
+  <pre class="yaml-preview w-100" [innerHTML]="yamlHighlighted"></pre>
+</div>-->

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

@@ -35,29 +35,6 @@ app-utm-modal-header {
   }
 }
 
-.yaml-container {
-  width: 100%;
-  background: #ffffff;
-  padding: 16px;
-  border-radius: 6px;
-  border: 1px solid #e5e7eb;
-}
-
-.yaml-preview {
-  white-space: pre-wrap;
-  font-family: "Fira Code", monospace;
-  font-size: 14px;
-}
-
-::ng-deep .yaml-key {
-  color: #0277bd;
-  font-weight: 600;
-}
-
-::ng-deep .yaml-value {
-  color: #FF6B6B;
-}
-
 .sub-header {
   background: transparent;
   border: none;
@@ -110,3 +87,61 @@ app-utm-modal-header {
   }
 }
 
+.rule-view-container {
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  overflow: hidden;
+  height: 600px;
+  width: 100%;
+  flex: 1;
+
+  ::ng-deep {
+    .monaco-editor {
+      width: 100% !important;
+      height: 100% !important;
+    }
+
+    .monaco-editor-background {
+      background-color: #f5f5f5 !important;
+    }
+
+    .overflow-guard {
+      width: 100% !important;
+      height: 100% !important;
+    }
+
+    .monaco-scrollable-element {
+      width: 100% !important;
+      height: 100% !important;
+    }
+
+    .monaco-editor.readonly {
+      background-color: #f0f0f0 !important;
+      opacity: 0.8 !important;
+    }
+
+    .monaco-editor.readonly .monaco-editor-background {
+      background-color: #f0f0f0 !important;
+    }
+
+    .mtk7 {
+      color: #2d7a1a !important;
+      font-weight: 600 !important;
+    }
+
+    .mtk22 {
+      color: #0055cc !important;
+      font-weight: 600 !important;
+    }
+
+    .mtk1,
+    .mtk5 {
+      color: #666666 !important;
+    }
+
+    .mtk3 {
+      color: #c26e00 !important;
+    }
+  }
+}
+

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

@@ -8,14 +8,27 @@ import {Rule} from '../../../models/rule.model';
   templateUrl: './rule-view.component.html',
   styleUrls: ['./rule-view.component.scss'],
 })
-export class RuleViewComponent implements OnInit {
+export class RuleViewComponent {
   @Input() rowDocument: Rule;
 
   copied = false;
-
-  ngOnInit() {
-    console.log('Rule received:', this.rowDocument);
-  }
+  editorOptions: any = {
+    theme: 'vs-light',
+    language: 'yaml',
+    automaticLayout: true,
+    fontSize: 13,
+    lineHeight: 24,
+    fontFamily: 'Courier New, Monaco, Menlo, monospace',
+    lineNumbers: 'on',
+    wordWrap: 'on',
+    minimap: { enabled: false },
+    scrollBeyondLastLine: false,
+    formatOnPaste: true,
+    formatOnType: true,
+    tabSize: 2,
+    insertSpaces: true,
+    readOnly: true
+  };
 
   get yamlString(): string {
     try {
@@ -33,14 +46,6 @@ export class RuleViewComponent implements OnInit {
     }
   }
 
-  get yamlHighlighted(): string {
-    return this.yamlString
-      .replace(/^(\s*)([a-zA-Z0-9_]+):/gm, '$1<span class="yaml-key">$2</span>:')
-      .replace(/: (.*)/g, ': <span class="yaml-value">$1</span>')
-      .replace(/-\s+(.*)/g, '- <span class="yaml-value">$1</span>')
-      .replace(/^\s{2,}(.+)/gm, '  <span class="yaml-value">$1</span>');
-  }
-
   exportYaml() {
     const yamlContent = this.yamlString;
 

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

@@ -46,6 +46,7 @@ import {RuleService} from './services/rule.service';
 import {RulesResolverService} from './services/rules.resolver.service';
 import {GenericFilterComponent} from './share/generic-filter/generic-filter.component';
 import {RuleDetailComponent} from "./app-rule/components/rule-list/components/rule-detail/rule-detail.component";
+import {MonacoEditorModule} from "ngx-monaco-editor";
 
 
 @NgModule({
@@ -87,7 +88,8 @@ import {RuleDetailComponent} from "./app-rule/components/rule-list/components/ru
         NgSelectModule,
         InfiniteScrollModule,
         FileBrowserModule,
-        FormsModule
+        FormsModule,
+        MonacoEditorModule
     ],
   providers: [
       RuleService,