KYLO-3035 Basic query validation for advanced SQL editor

chandrasaripaka · Dec 8, 2018 · 21a27d9 · 21a27d9
1 parent 28abda4
commit 21a27d9
Show file tree

Hide file tree

Showing 11 changed files with 97 additions and 16 deletions.
diff --git a/ui/ui-app/src/main/resources/static/js/feed-mgr/shared/sql-editor/sql-editor.component.html b/ui/ui-app/src/main/resources/static/js/feed-mgr/shared/sql-editor/sql-editor.component.html
@@ -21,7 +21,14 @@
 <form [formGroup]="form">
 
   <div id="hqlEditorContainer">
-    <span translate>views.hql-editor.EQ</span>
+    <div fxFlex fxLayout="column">
+      <div fxFlex class="pad-bottom">
+        <span translate>views.hql-editor.EQ</span>
+      </div>
+      <td-message *ngIf="queryExecutionFailure" label="Query Execution Failed" sublabel="Try updating query and running again" color="warn" icon="warning">
+        <button td-message-actions mat-button (click)="overrideQueryFailureCheck()">OK</button>
+      </td-message>
+    </div>
     <codemirror #codeMirrorView (change)="onSqlChange($event)" class="sql-editor" [ngModelOptions]="{standalone: true}" [config]="codeMirrorOptions" [(ngModel)]="sql" style="height:{{height}}px"></codemirror>
   </div>
 

diff --git a/ui/ui-app/src/main/resources/static/js/feed-mgr/shared/sql-editor/sql-editor.component.ts b/ui/ui-app/src/main/resources/static/js/feed-mgr/shared/sql-editor/sql-editor.component.ts
@@ -53,6 +53,12 @@ export class SqlEditorComponent implements OnInit, OnDestroy{
     @Input()
         height:number = 500;
 
+    /**
+     * Indicates if query execution failed
+     */
+    @Input()
+    queryExecutionFailure:boolean;
+
     @Output()
     sqlChange = new EventEmitter<string>();
 
@@ -141,6 +147,10 @@ export class SqlEditorComponent implements OnInit, OnDestroy{
         }
     }
 
+    overrideQueryFailureCheck() {
+        this.sqlChange.emit(this.sql);
+    }
+
 
     ngOnInit(){
         this.browseDatabasePlaceholder = this._translateService.instant('"views.hql-editor.Database')

diff --git a/ui/ui-app/src/main/resources/static/js/feed-mgr/shared/sql-editor/sql-editor.module.ts b/ui/ui-app/src/main/resources/static/js/feed-mgr/shared/sql-editor/sql-editor.module.ts
@@ -10,6 +10,7 @@ import {SqlEditorComponent} from "./sql-editor.component";
 import {FlexLayoutModule} from "@angular/flex-layout";
 import {CodemirrorModule} from "ng2-codemirror";
 import {CovalentDialogsModule} from "@covalent/core/dialogs";
+import {CovalentMessageModule } from '@covalent/core/message';
 import {TranslateModule} from "@ngx-translate/core";
 import {MatProgressBarModule} from "@angular/material/progress-bar";
 import {KyloCodeMirrorModule} from "../../../codemirror-require/codemirror.module";
@@ -38,6 +39,7 @@ import {KyloCodeMirrorModule} from "../../../codemirror-require/codemirror.modul
         KyloCodeMirrorModule,
         CodemirrorModule,
         CovalentDialogsModule,
+        CovalentMessageModule,
         TranslateModule
     ],
     providers: [

diff --git a/...main/resources/static/js/feed-mgr/visual-query/build-query/build-query-ng2.component.html b/...main/resources/static/js/feed-mgr/visual-query/build-query/build-query-ng2.component.html
@@ -94,7 +94,7 @@
 
           <button mat-button (click)="back.emit()" type="button" *ngIf="showCancel" style="padding-top:3px" class="text-upper">Cancel</button>
           <button mat-button [color]="form.valid ? 'accent' : ''" (click)="next.emit()" style="padding-top:3px" type="button"
-                  [disabled]="!form.valid || (chartViewModel.data.nodes.length == 0 && (model.sql == '' || model.sql == null))"
+                  [disabled]="!form.valid || (chartViewModel.data.nodes.length == 0 && (model.sql == '' || model.sql == null)) || queryExecutionFailure"
                   class="text-upper">Next
           </button>
 
@@ -110,7 +110,7 @@
 
         <!-- SQL Editor -->
         <sql-editor [sql]="this.model.sql" [datasourceId]="model.$catalogDataSourceId" [allowFullscreen]="false" [allowDatabaseBrowse]="false"
-                    [allowExecuteQuery]="false" [height]="400" *ngIf="advancedMode == true" (sqlChange)="advancedModeSql($event)"></sql-editor>
+                    [allowExecuteQuery]="false" [height]="400" *ngIf="advancedMode == true" (sqlChange)="advancedModeSql($event)" [queryExecutionFailure]="queryExecutionFailure"></sql-editor>
 
         <!-- nothing set and user cant change datasources mesage-->
         <ng-template *ngIf="(chartViewModel.data.nodes.length == 0 || sql == '') && !showDatasources">

diff --git a/...c/main/resources/static/js/feed-mgr/visual-query/build-query/build-query-ng2.component.ts b/...c/main/resources/static/js/feed-mgr/visual-query/build-query/build-query-ng2.component.ts
@@ -112,6 +112,12 @@ export class BuildQueryComponent implements OnDestroy, OnChanges, OnInit {
     @Input()
     form: FormGroup;
 
+    /**
+     * Indicates if query execution failed
+     */
+    @Input()
+    queryExecutionFailure:boolean;
+
     /**
      * Event emitted to return to the previous step
      */
@@ -124,6 +130,12 @@ export class BuildQueryComponent implements OnDestroy, OnChanges, OnInit {
     @Output()
     next = new EventEmitter<void>();
 
+    /**
+     * Event emitted to indicate sql was changed
+     */
+    @Output()
+    sqlChange = new EventEmitter<string>();
+
     /**
      * Indicates if the UI is in advanced mode
      */
@@ -367,6 +379,7 @@ export class BuildQueryComponent implements OnDestroy, OnChanges, OnInit {
             this.model.sql = sql;
             this.validate();
         }
+        this.sqlChange.emit(sql);
         return this.model.sql;
     }
 

diff --git a/...p/src/main/resources/static/js/feed-mgr/visual-query/services/spark/spark-query-engine.ts b/...p/src/main/resources/static/js/feed-mgr/visual-query/services/spark/spark-query-engine.ts
@@ -506,7 +506,7 @@ export class SparkQueryEngine extends QueryEngine<string> {
 
 
         // Send the request
-        self.$http.post<TransformResponse>(this.apiUrl + "/transform", JSON.stringify(body), {
+        self.httpBackendClient.post<TransformResponse>(this.apiUrl + "/transform", JSON.stringify(body), {
             headers: {"Content-Type": "application/json"},
             responseType: "json"
         }).toPromise().then(successCallback, errorCallback);

diff --git a/...in/resources/static/js/feed-mgr/visual-query/transform-data/transform-data.component.html b/...in/resources/static/js/feed-mgr/visual-query/transform-data/transform-data.component.html
@@ -101,11 +101,11 @@ <h3>Sampling</h3>
       <mat-progress-bar class="wrangler-determinate-theme" color="accent" mode="determinate" [value]="queryProgress" *ngIf="executingQuery && queryProgress > 0"
                         style="top: 0;height:2px"></mat-progress-bar>
       <mat-progress-bar mode="indeterminate" class="wrangler-indeterminate-theme" color="accent" *ngIf="executingQuery && queryProgress == 0" style="top: -2px;height:2px"></mat-progress-bar>
-      <visual-query-table [actual-cols]="actualCols" [actual-rows]="actualRows" [table-columns]="tableColumns" [table-domain-types]="domainTypes" [table-rows]="tableRows"
-                          [table-options]="tableOptions" [table-validation]="tableValidation" [table-state]="tableState" offset-height="0"
-                          browser-height browser-height-scroll-y="false" [browser-height-offset]="(heightOffset || 0) + 128"
-                          style="width: 100%; height: 500px;" fxFlex="1 1 auto">
-      </visual-query-table>
+        <visual-query-table [loadingInProgress]="!hiveDataLoaded" [actual-cols]="actualCols" [actual-rows]="actualRows" [table-columns]="tableColumns" [table-domain-types]="domainTypes" [table-rows]="tableRows"
+                            [table-options]="tableOptions" [table-validation]="tableValidation" [table-state]="tableState" offset-height="0"
+                            browser-height browser-height-scroll-y="false" [browser-height-offset]="(heightOffset || 0) + 128"
+                            style="width: 100%; height: 500px;" fxFlex="1 1 auto">
+        </visual-query-table>
     </div>
   </mat-sidenav-content>
 </mat-sidenav-container>

diff --git a/...main/resources/static/js/feed-mgr/visual-query/transform-data/transform-data.component.ts b/...main/resources/static/js/feed-mgr/visual-query/transform-data/transform-data.component.ts
@@ -113,6 +113,12 @@ export class TransformDataComponent implements AfterViewInit, ColumnController,
     @Output()
     next = new EventEmitter<void>();
 
+    /**
+     * Event emitted to indicate query failure
+     */
+    @Output()
+    queryFailure = new EventEmitter<void>();
+
     //Flag to determine if we can move on to the next step
     isValid: boolean = false;
 
@@ -374,7 +380,9 @@ export class TransformDataComponent implements AfterViewInit, ColumnController,
 
             // Initial load will trigger query from the table model.
             if (this.isLoaded) {
-                this.query();
+                this.query().catch((result) => {
+                    console.debug("Error executing query!");
+                });
             }
             this.isLoaded = true;
         };
@@ -708,16 +716,19 @@ export class TransformDataComponent implements AfterViewInit, ColumnController,
             deferred.complete();
         };
         const errorCallback = (message: string) => {
+            console.debug("Query error!");
+            this.queryFailure.emit();
             this.setExecutingQuery(false);
             this.resetAllProgress();
-            this.showError(this.cleanError(message));
 
             // Reset state
             if (this.engine.canUndo()) {
                 this.onUndo();
             }
             this.removeExecution(promise);
+            this.hiveDataLoaded = false;
             deferred.error(message);
+            this.back.emit();
         };
         const notifyCallback = (progress: number) => {
             //self.setQueryProgress(progress * 100);
@@ -1177,7 +1188,9 @@ export class TransformDataComponent implements AfterViewInit, ColumnController,
         let rows = this.engine.getRows();
 
         if (columns === null || rows === null) {
-            this.query();
+            this.query().catch((result) => {
+                console.debug("Error executing query!");
+            });
         } else {
             this.updateGrid();
         }
@@ -1193,7 +1206,9 @@ export class TransformDataComponent implements AfterViewInit, ColumnController,
         });
 
         this.pushFormulaToEngine(`select(${fieldNames.join(',')})`, {});
-        this.query();
+        this.query().catch((result) => {
+            console.debug("Error executing query!");
+        });
     }
 
     //noinspection JSUnusedGlobalSymbols
@@ -1240,7 +1255,9 @@ export class TransformDataComponent implements AfterViewInit, ColumnController,
         this.query().catch(reason => {
             // reverse impact
             self.engine.restoreLastKnownState();
-            this.query();
+            this.query().catch((result) => {
+                console.debug("Error executing query!");
+            });
             this.functionHistory = this.engine.getHistory();
         });
     }
@@ -1312,6 +1329,8 @@ export class TransformDataComponent implements AfterViewInit, ColumnController,
                     feedModel.table.syncTableFieldPolicyNames()
                     this.engine.save();
                     resolve(true);
+                }).catch((result) => {
+                    console.debug("Error executing query!");
                 });
             }
         });

diff --git a/...s/feed-mgr/visual-query/transform-data/visual-query-table/visual-query-table.component.ts b/...s/feed-mgr/visual-query/transform-data/visual-query-table/visual-query-table.component.ts
@@ -108,6 +108,9 @@ export class VisualQueryTable implements OnDestroy, OnChanges, OnInit {
     @Input("table-state")
     tableState: number;
 
+    @Input()
+    loadingInProgress: boolean = false;
+
     /**
      * Previous state
      */
@@ -178,6 +181,12 @@ export class VisualQueryTable implements OnDestroy, OnChanges, OnInit {
             this.painter.headerFont = this.options.headerFont;
             this.painter.rowFont = this.options.rowFont
         }
+        if(changes.loadingInProgress) {
+            //if loading complete, refresh the screen to see the data values
+            if (changes.loadingInProgress.currentValue == false) {
+                this.refresh();
+            }
+        }
     }
 
     ngOnInit() {

diff --git a/...pp/src/main/resources/static/js/feed-mgr/visual-query/visual-query-stepper.component.html b/...pp/src/main/resources/static/js/feed-mgr/visual-query/visual-query-stepper.component.html
@@ -2,13 +2,15 @@
 <mat-horizontal-stepper #stepper *ngIf="engine != null" [linear]="true" class="mat-stepper-no-header" (selectionChange)="onStepChange($event)">
   <mat-step>
     <ng-template matStepLabel>Build Query</ng-template>
-    <build-query-ng2 [engine]="engine" [model]="dataModel.model" [showDatasources]="showDatasources" [heightOffset]="this.heightOffset" (back)="onCancel()" (next)="stepper.next()"></build-query-ng2>
+    <build-query-ng2 [engine]="engine" [model]="dataModel.model" [showDatasources]="showDatasources" [heightOffset]="this.heightOffset" (back)="onCancel()" (next)="stepper.next()" [queryExecutionFailure]="queryExecutionFailure"
+                     (sqlChange)="sqlChanged($event)"></build-query-ng2>
   </mat-step>
   <mat-step>
     <ng-template matStepLabel>Transform Data</ng-template>
     <thinkbig-visual-query-transform [warnWhenLeaving]="false" [active]="stepper.selectedIndex == 1" [engine]="engine" [model]="dataModel.model" [heightOffset]="this.heightOffset"
                                      [nextButton]="showSaveStep ? 'Next' : 'Save'" [feedModel]="feed" [disableNextButton]="isFeedSaving" (back)="stepper.previous()" (next)="showSaveStep ? stepper.next() : doSave()"
-                                     *ngIf="visitedTransform">
+                                     *ngIf="visitedTransform"
+    (queryFailure)="queryFailed()">
     </thinkbig-visual-query-transform>
   </mat-step>
   <mat-step *ngIf="showSaveStep">

diff --git a/...-app/src/main/resources/static/js/feed-mgr/visual-query/visual-query-stepper.component.ts b/...-app/src/main/resources/static/js/feed-mgr/visual-query/visual-query-stepper.component.ts
@@ -81,6 +81,10 @@ export class VisualQueryStepperComponent implements OnInit, OnDestroy {
      */
     visitedTransform = false;
 
+    /**
+     * Indicates if query execution has failed
+     */
+    queryExecutionFailure = false;
 
     /**
      * Constructs a {@code VisualQueryComponent}.
@@ -154,4 +158,19 @@ export class VisualQueryStepperComponent implements OnInit, OnDestroy {
     doSave() {
         this.save.emit();
     }
+
+    /**
+     * Indicate query failure
+     */
+    queryFailed() {
+        this.queryExecutionFailure = true;
+    }
+
+    /**
+     * Indicate SQL has changed
+     */
+    sqlChanged() {
+        //reset flag to allow new query's execution
+        this.queryExecutionFailure = false;
+    }
 }