Merge pull request #1553 from utmstack/backlog/add-sql-hints-to-code-editor

Backlog/add sql hints to code editor

Author: mjabascal10

frontend/src/app/log-analyzer/explorer/log-analyzer-view/log-analyzer-view.component.html

@@ -49,6 +49,7 @@
     (clearData)="onClearData()"
     [queryError]="sqlError"
     [customKeywords]="indexPatternNames.concat(fieldsNames)"
+    [showSuggestions]="true"
   >
   </app-code-editor>
 </div>

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

@@ -1,5 +1,5 @@
 <div #editorContainer class="editor-container">
-  <div class="editor-header pr-2">
+  <div class="editor-header pr-2" *ngIf="showFullEditor">
     <div class="header-title">
       <i class="icon-database"></i>
       <span>SQL Console</span>
@@ -35,18 +35,20 @@
       </button>
     </div>
   </div>
-
   <div class="editor-section">
+    <app-query-suggestions *ngIf="showSuggestions"
+      (selectQuery)="writeValue($event)">
+    </app-query-suggestions>
     <ngx-monaco-editor
-      class="editor-area"
+      class="editor-area pt-2"
       [options]="consoleOptions"
       [(ngModel)]="sqlQuery"
-      (ngModelChange)="resetMessages()"
-      (onInit)="onEditorInit()">>
+      (ngModelChange)="clearMessages()"
+      (onInit)="onEditorInit($event)">>
     </ngx-monaco-editor>
   </div>
 
-  <div class="execution-info" *ngIf="successMessage || errorMessage">
+  <div class="execution-info" *ngIf="(successMessage || errorMessage) && showFullEditor">
     <div [ngClass]="errorMessage ? 'text-danger-800' : 'text-green-800'">
       <span>{{ errorMessage || successMessage }}</span>
     </div>

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

@@ -29,14 +29,19 @@
   }
 
   .editor-section {
+    display: flex;
+    flex-direction: row;
     flex: 1;
     overflow: hidden;
     border-bottom: 1px solid #e0e6ed;
+    background-color: #fffffe;
 
     .editor-area {
       height: 100%;
       width: 100%;
       border: 1px solid rgba(0,0,0,.125);
+      flex: 1;
+      min-width: 0;
     }
   }
 
@@ -60,10 +65,10 @@
   color: #fff !important;
 }
 
-::ng-deep .monaco-editor {
-  padding-top: 10px;
-}
-
 .monaco-editor .suggest-widget .codicon {
   display: none !important;
 }
+
+app-query-suggestions {
+  min-width: 300px;
+}

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

@@ -1,9 +1,11 @@
 import {
-  Component, EventEmitter,
-  Input, OnInit, Output
+  Component, EventEmitter, forwardRef,
+  Input, OnDestroy, OnInit, Output
 } from '@angular/core';
+import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
+import {SqlValidationService} from '../../services/code-editor/sql-validation.service';
 
-interface ConsoleOptions {
+export interface ConsoleOptions {
   value?: string;
   language?: 'sql';
   theme?: 'vs' | 'vs-dark' | 'hc-black' | string;
@@ -17,7 +19,9 @@ interface ConsoleOptions {
   };
   overviewRulerLanes?: number;
   wordWrap?: 'off' | 'on' | 'wordWrapColumn' | 'bounded';
-  automaticLayout: boolean;
+  automaticLayout?: boolean;
+  lineNumbers?: 'off' | 'on';
+  cursorSmoothCaretAnimation?: 'off' | 'on';
 }
 
 const SQL_KEYWORDS = ['CREATE', 'DROP', 'ALTER', 'TRUNCATE',
@@ -28,24 +32,34 @@ const SQL_KEYWORDS = ['CREATE', 'DROP', 'ALTER', 'TRUNCATE',
   'FROM', 'WHERE', 'GROUP BY', 'HAVING', 'ORDER BY', 'DISTINCT',
   'JOIN', 'INNER', 'LEFT', 'RIGHT', 'FULL', 'UNION', 'INTERSECT',
   'NULL', 'TRUE', 'FALSE',
-  'AS', 'CASE', 'WHEN', 'THEN', 'END'
+  'AS', 'CASE', 'WHEN', 'THEN', 'END',
+  'LIMIT', 'OFFSET'
 ];
 
 @Component({
   selector: 'app-code-editor',
   templateUrl: './code-editor.component.html',
-  styleUrls: ['./code-editor.component.scss']
+  styleUrls: ['./code-editor.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => CodeEditorComponent),
+      multi: true
+    }
+  ]
 })
-export class CodeEditorComponent implements OnInit {
+export class CodeEditorComponent implements OnInit, OnDestroy, ControlValueAccessor {
+  @Input() showFullEditor = true;
+  @Input() showSuggestions = false;
   @Input() consoleOptions?: ConsoleOptions;
   @Output() execute = new EventEmitter<string>();
   @Output() clearData = new EventEmitter<void>();
   @Input() queryError: string | null = null;
   @Input() customKeywords: string[] = [];
+
   sqlQuery = '';
   errorMessage = '';
   successMessage = '';
-
   readonly defaultOptions: ConsoleOptions = {
     value: this.sqlQuery,
     language: 'sql',
@@ -60,17 +74,29 @@ export class CodeEditorComponent implements OnInit {
     },
     overviewRulerLanes: 0,
     wordWrap: 'on',
-    automaticLayout: true
+    automaticLayout: true,
+    lineNumbers: 'on',
+    cursorSmoothCaretAnimation: 'off'
   };
+  private completionProvider?: monaco.IDisposable;
+  private onChange = (_: any) => {};
+  private onTouched = () => {};
 
-  constructor() {}
+  constructor(private sqlValidationService: SqlValidationService) {}
 
   ngOnInit(): void {
     this.consoleOptions = { ...this.defaultOptions, ...this.consoleOptions };
   }
 
-  onEditorInit() {
-    monaco.languages.registerCompletionItemProvider('sql', {
+  ngOnDestroy(): void {
+    if (this.completionProvider) {
+      this.completionProvider.dispose();
+      this.completionProvider = undefined;
+    }
+  }
+
+  onEditorInit(editorInstance: monaco.editor.IStandaloneCodeEditor) {
+    this.completionProvider = monaco.languages.registerCompletionItemProvider('sql', {
       provideCompletionItems: () => {
         const allKeywords = Array.from(new Set([
           ...SQL_KEYWORDS,
@@ -86,24 +112,24 @@ export class CodeEditorComponent implements OnInit {
         return { suggestions };
       }
     });
+
+    editorInstance.onDidChangeModelContent(() => {
+      const val = editorInstance.getValue();
+      this.sqlQuery = val;
+      this.onChange(val);
+      this.onTouched();
+    });
   }
 
   executeQuery(): void {
-    this.resetMessages();
-    const query = this.sqlQuery ? this.sqlQuery.trim() : '';
-    if (!query) {
-      this.errorMessage = 'The query cannot be empty.';
-      return;
-    }
-
-    const validationError = this.validateSqlQuery(query);
-    if (validationError) {
-      this.errorMessage = validationError;
+    this.clearMessages();
+    this.errorMessage = this.sqlValidationService.validateSqlQuery(this.sqlQuery);
+    if (this.errorMessage) {
       return;
     }
 
     try {
-      const cleanedQuery = query.replace(/\n/g, ' ');
+      const cleanedQuery = this.sqlQuery.replace(/\n/g, ' ');
       this.execute.emit(cleanedQuery);
     } catch (err) {
       this.errorMessage = err instanceof Error ? err.message : String(err);
@@ -112,20 +138,19 @@ export class CodeEditorComponent implements OnInit {
 
   clearQuery(): void {
     this.sqlQuery = '';
-    this.resetMessages();
+    this.clearMessages();
     this.clearData.emit();
   }
 
   formatQuery(): void {
-    this.resetMessages();
+    this.clearMessages();
     this.sqlQuery = this.formatSql(this.sqlQuery);
   }
 
   private formatSql(sql: string): string {
-    const keywords = ['SELECT', 'FROM', 'WHERE', 'JOIN', 'LEFT', 'RIGHT', 'INNER', 'ON', 'GROUP BY', 'ORDER BY', 'LIMIT'];
     let formatted = sql;
 
-    keywords.forEach(keyword => {
+    SQL_KEYWORDS.forEach(keyword => {
       const regex = new RegExp(`\\b${keyword}\\b`, 'gi');
       formatted = formatted.replace(regex, `\n${keyword}`);
     });
@@ -134,148 +159,29 @@ export class CodeEditorComponent implements OnInit {
   }
 
   copyQuery(): void {
-    this.resetMessages();
+    this.clearMessages();
     (navigator as any).clipboard.writeText(this.sqlQuery);
     this.successMessage = 'Query copied to clipboard.';
   }
 
-  resetMessages(): void {
+  clearMessages(): void {
     this.errorMessage = '';
     this.successMessage = '';
   }
 
-  private validateSqlQuery(query: string): string | null {
-    const trimmed = query.trim().replace(/;+\s*$/, '');
-    const upper = trimmed.toUpperCase();
-
-    const startPattern = /^\s*SELECT\b/i;
-    if (!startPattern.test(trimmed)) {
-      return 'Query must start with SELECT.';
-    }
-
-    const minimalPattern = /^\s*SELECT\s+.+\s+FROM\s+.+/is;
-    if (!minimalPattern.test(trimmed)) {
-      return 'Query must be at least: SELECT <columns> FROM <table>.';
-    }
-
-    const forbiddenPattern = /\b(INSERT|UPDATE|DELETE|DROP|ALTER|CREATE|REPLACE|TRUNCATE|MERGE|GRANT|REVOKE|EXEC|EXECUTE|COMMIT|ROLLBACK|INTO)\b/i;
-    const commentPattern = /(--.*?$|\/\*.*?\*\/)/gm;
-    const allowedFunctions = new Set(['COUNT', 'AVG', 'MIN', 'MAX', 'SUM']);
-
-    if (forbiddenPattern.test(upper)) {
-      return 'Query contains forbidden SQL keywords.';
-    }
-    if (commentPattern.test(trimmed)) {
-      return 'Query must not contain SQL comments (-- or /* */).';
-    }
-    if (trimmed.includes(';')) {
-      return 'Query must not contain internal semicolons.';
-    }
-    if (!this.balancedQuotes(trimmed)) {
-      return 'Quotes are not balanced.';
-    }
-    if (!this.balancedParentheses(trimmed)) {
-      return 'Parentheses are not balanced.';
-    }
-
-    if (this.hasMisplacedCommas(trimmed)) {
-      return 'Query contains misplaced commas.';
-    }
-
-    if (this.hasSubqueryWithoutAlias(trimmed)) {
-      return 'Subquery in FROM must have an alias.';
-    }
-
-    const functions = this.extractFunctions(upper);
-    for (const func of functions) {
-      if (!allowedFunctions.has(func)) {
-        return `Unsupported SQL function: ${func}.`;
-      }
-    }
-
-    return null;
-  }
-
-  private balancedParentheses(query: string): boolean {
-    let count = 0;
-    for (const c of query) {
-      if (c === '(') {
-        count++;
-      } else if (c === ')') {
-        count--;
-      }
-      if (count < 0) {
-        return false;
-      }
-    }
-    return count === 0;
+  writeValue(value: any): void {
+    this.sqlQuery = value || '';
   }
 
-  private balancedQuotes(query: string): boolean {
-    let sq = 0;
-    let dq = 0;
-    let escaped = false;    for (const c of query) {
-      if (escaped) { escaped = false; continue; }
-      if (c === '\\') { escaped = true; continue; }
-      if (c === '\'') {
-        sq++;
-      } else {
-        if (c === '"') { dq++; }
-      }
-    }
-    return (sq % 2 === 0) && (dq % 2 === 0);
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
   }
 
-  private extractFunctions(upperQuery: string): string[] {
-    const funcPattern = /\b(COUNT|AVG|MIN|MAX|SUM)\s*\(/g;
-    const funcs: string[] = [];
-
-    let match: RegExpExecArray | null = funcPattern.exec(upperQuery);
-    while (match !== null) {
-      funcs.push(match[1]);
-      match = funcPattern.exec(upperQuery);
-    }
-
-    return funcs;
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
   }
 
-  private hasMisplacedCommas(query: string): boolean {
-    const upperQuery = query.toUpperCase();
-
-    if (upperQuery.startsWith('SELECT ,') || upperQuery.includes(',,')) {
-      return true;
-    }
-
-    if (/,\s*FROM/i.test(upperQuery)) {
-      return true;
-    }
-
-    const selectPart = query
-      .replace(/^SELECT\s+/i, '')
-      .replace(/\s+FROM.*$/i, '')
-      .trim();
-
-    if (selectPart.startsWith(',') || selectPart.endsWith(',')) {
-      return true;
-    }
-
-    const fields = selectPart.split(',');
-    for (const f of fields) {
-      if (f.trim() === '') {
-        return true;
-      }
-    }
-
-    return false;
-  }
-
-  private hasSubqueryWithoutAlias(query: string): boolean {
-    const subqueryRegex = /FROM\s*\([^)]*\)/i;
-    if (!subqueryRegex.test(query)) {
-      return false;
-    }
-    const aliasRegex = /FROM\s*\([^)]*\)\s+(AS\s+\w+|\w+)/i;
-    return !aliasRegex.test(query);
+  setDisabledState?(isDisabled: boolean): void {
+    // Optional: handle disabled state
   }
-
 }