feat: add index pattern selection and dynamic SQL query handling

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

Author: mjabascal10

frontend/src/app/graphic-builder/chart-builder/chart-builder.component.html

@@ -97,6 +97,7 @@ <h5 class="mb-0 label-header px-3 py-2">
                   [(ngModel)]="sqlQuery"
                   (ngModelChange)="clearMessages()"
                   [customKeywords]="loadFieldNames().concat(indexPatternNames)"
+                  (indexPatternChange)="onIndexPatternChange($event)"
                   [consoleOptions]="codeEditorOptions">
               </app-code-editor>
             </div>

frontend/src/app/graphic-builder/chart-builder/chart-builder.component.ts

@@ -40,6 +40,9 @@ import {VisualizationService} from '../visualization/shared/services/visualizati
 import {VisualizationSaveComponent} from '../visualization/visualization-save/visualization-save.component';
 
 import {DashboardStatusEnum} from '../dashboard-builder/shared/enums/dashboard-status.enum';
+import {HttpResponse} from "@angular/common/http";
+import {IndexPatternService} from "../../shared/services/elasticsearch/index-pattern.service";
+import {map} from "rxjs/operators";
 
 
 @Component({
@@ -75,6 +78,7 @@ export class ChartBuilderComponent implements OnInit, AfterViewChecked {
   indexPatternNames: string[] = [];
   codeEditorOptions: ConsoleOptions = {lineNumbers: 'off'};
   loading = true;
+  indexPattern: UtmIndexPattern[];
 
   constructor(private spinner: NgxSpinnerService,
               private route: ActivatedRoute,
@@ -86,7 +90,8 @@ export class ChartBuilderComponent implements OnInit, AfterViewChecked {
               private location: Location,
               private router: Router,
               private localFieldService: LocalFieldService,
-              private sqlValidationService: SqlValidationService) {
+              private sqlValidationService: SqlValidationService,
+              private indexPatternService: IndexPatternService) {
     route.queryParams.subscribe(params => {
       this.chart = params[VisualizationQueryParamsEnum.CHART];
       this.mode = params[VisualizationQueryParamsEnum.MODE];
@@ -138,6 +143,8 @@ export class ChartBuilderComponent implements OnInit, AfterViewChecked {
       };
       this.loading = false;
     }
+
+    this.getIndexPatterns();
   }
 
   getFields() {
@@ -343,13 +350,37 @@ export class ChartBuilderComponent implements OnInit, AfterViewChecked {
 
   nullifyUnusedFields() {
     this.visualization.aggregationType = null;
-    this.visualization.pattern = null;
-    this.visualization.idPattern = null;
-    // this.visualization.filterType = null;
   }
 
   clearMessages(): void {
     this.errorMessage = '';
   }
 
+  getIndexPatterns() {
+    const req = {
+      page: 0,
+      size: 1000,
+      sort: 'id,asc',
+      'isActive.equals': true,
+    };
+    this.indexPatternService.query(req)
+      .pipe(
+        map((res: HttpResponse<any>) => res.body || [])
+      )
+      .subscribe({
+        next: data => {
+          this.indexPatternNames = data.map((pattern: UtmIndexPattern) => pattern.pattern);
+          this.indexPattern = data;
+        },
+        error: () => this.indexPatternNames = [],
+      });
+  }
+
+   onIndexPatternChange($event: string) {
+    const indexPattern = this.indexPattern.find(p => p.pattern === $event);
+
+    if (indexPattern) {
+      this.indexPatternSelected(indexPattern);
+    }
+  }
 }

frontend/src/app/shared/chart/types/visualization.type.ts

@@ -1,9 +1,9 @@
+import {ChartBuilderQueryLanguageEnum} from "../../enums/chart-builder-query-language.enum";
 import {ChartTypeEnum} from '../../enums/chart-type.enum';
 import {DataNatureTypeEnum} from '../../enums/nature-data.enum';
 import {ElasticFilterType} from '../../types/filter/elastic-filter.type';
 import {UtmIndexPattern} from '../../types/index-pattern/utm-index-pattern';
 import {MetricDataType} from './metric/metric-data.type';
-import {ChartBuilderQueryLanguageEnum} from "../../enums/chart-builder-query-language.enum";
 
 export class VisualizationType {
   chartConfig?: any;

frontend/src/app/shared/components/code-editor/code-editor.component.ts

@@ -54,6 +54,7 @@ export class CodeEditorComponent implements OnInit, OnDestroy, ControlValueAcces
   @Input() consoleOptions?: ConsoleOptions;
   @Output() execute = new EventEmitter<string>();
   @Output() clearData = new EventEmitter<void>();
+  @Output() indexPatternChange = new EventEmitter<string>();
   @Input() queryError: string | null = null;
   @Input() customKeywords: string[] = [];
 
@@ -88,13 +89,6 @@ export class CodeEditorComponent implements OnInit, OnDestroy, ControlValueAcces
     this.consoleOptions = { ...this.defaultOptions, ...this.consoleOptions };
   }
 
-  ngOnDestroy(): void {
-    if (this.completionProvider) {
-      this.completionProvider.dispose();
-      this.completionProvider = undefined;
-    }
-  }
-
   onEditorInit(editorInstance: monaco.editor.IStandaloneCodeEditor) {
     this.completionProvider = monaco.languages.registerCompletionItemProvider('sql', {
       provideCompletionItems: () => {
@@ -165,6 +159,7 @@ export class CodeEditorComponent implements OnInit, OnDestroy, ControlValueAcces
   }
 
   clearMessages(): void {
+    console.log('Query:', this.extractIndexPattern(this.sqlQuery));
     this.errorMessage = '';
     this.successMessage = '';
   }
@@ -184,4 +179,44 @@ export class CodeEditorComponent implements OnInit, OnDestroy, ControlValueAcces
   setDisabledState?(isDisabled: boolean): void {
     // Optional: handle disabled state
   }
+
+   extractIndexPattern(sql: string): string | null {
+    const normalized = sql
+      .replace(/\s+/g, ' ')
+      .toLowerCase();
+
+    const fromIndex = normalized.indexOf(' from ');
+    if (fromIndex === -1) { return null; }
+
+    const start = fromIndex + 6;
+
+    const keywords = [' where ', ' group by ', ' order by ', ' limit ', ' having '];
+
+    let end = normalized.length;
+    for (const kw of keywords) {
+      const idx = normalized.indexOf(kw, start);
+      if (idx !== -1 && idx < end) {
+        end = idx;
+      }
+    }
+
+    const originalFragment = sql.substring(start, end).trim();
+
+    if (originalFragment.length > 0) {
+     const indexPatternSelected = this.customKeywords.find(keyword => keyword === originalFragment);
+
+     if (indexPatternSelected) {
+       console.log(indexPatternSelected);
+       this.indexPatternChange.emit(indexPatternSelected);
+     }
+   }
+  }
+
+  ngOnDestroy(): void {
+    if (this.completionProvider) {
+      this.completionProvider.dispose();
+      this.completionProvider = undefined;
+    }
+  }
+
 }