adds support for multiple dataservice views

ngapp/src/app/dataservices/connection-table-selector/connection-table-selector.component.html

@@ -81,7 +81,7 @@
         <strong>No tables selected</strong>
       </div>
   </div>
-  <div class = "list-div col-sm-3" *ngIf="hasSelectedTables">
+  <div class = "col-sm-3" *ngIf="hasSelectedTables">
       <div *ngFor="let table of getSelectedTables()">
         <app-selected-table [table]="table" (selectionListTableRemoved)="onTableSelectionRemoved($event)"></app-selected-table>
       </div>

ngapp/src/app/dataservices/dataservices.component.css

@@ -95,3 +95,9 @@ a.clear-filters {
   cursor: pointer;
   font-size: 1.5em;
 }
+
+.quicklook-title {
+  margin-left: 50px;
+  font-size: 1.25em;
+  font-weight: bold;
+}

ngapp/src/app/dataservices/dataservices.component.html

@@ -112,12 +112,15 @@ <h1 class="card-pf-title">
       </div>
       <div class="col-md-12 {{resultsAreaCss}}" *ngIf="showResults">
         <hr class="dataservice-results-hr">
-        <span class="pull-left fa fa-list-alt dataservice-results-action-icon" (click)="onTest(quickLookServiceName)"></span>
-        <span class="pull-left fa fa-refresh dataservice-results-action-icon-refresh" (click)="onSubmitQuickLookQuery()"></span>
-        <span class="pull-right fa fa-fw fa-close dataservice-results-action-icon-close" (click)="setQuickLookPanelOpenState(false)"></span>
-        <h3 style="margin-left: 75px">Quick Look Results for Dataservice &apos;<strong>{{ quickLookServiceName }}</strong>&apos;</h3>
+        <div>
+          <span class="pull-left fa fa-list-alt dataservice-results-action-icon" (click)="onTest(quickLookServiceName)"></span>
+          <span class="pull-left fa fa-refresh dataservice-results-action-icon-refresh" (click)="onSubmitQuickLookQuery()"></span>
+          <span class="quicklook-title">Quick Look Results for Dataservice '{{ quickLookServiceName }}'</span>
+          <span class="pull-right fa fa-fw fa-close dataservice-results-action-icon-close" (click)="setQuickLookPanelOpenState(false)"></span>
+        </div>
         <br>
-        <app-sql-control [editorVisible]="editorVisible" ></app-sql-control>
+        <app-sql-control [quicklook]="true" [selectedViews]="selectedViews" [serviceViews]="allServiceViews"
+                                            [viewSql]="quickLookSql"></app-sql-control>
       </div>
     </div>
 

ngapp/src/app/dataservices/dataservices.component.ts

@@ -25,6 +25,7 @@ import { DataserviceService } from "@dataservices/shared/dataservice.service";
 import { DataservicesConstants } from "@dataservices/shared/dataservices-constants";
 import { DeploymentState } from "@dataservices/shared/deployment-state.enum";
 import { NotifierService } from "@dataservices/shared/notifier.service";
+import { Table } from "@dataservices/shared/table.model";
 import { VdbService } from "@dataservices/shared/vdb.service";
 import { WizardService } from "@dataservices/shared/wizard.service";
 import { SqlControlComponent } from "@dataservices/sql-control/sql-control.component";
@@ -52,6 +53,7 @@ export class DataservicesComponent extends AbstractPageComponent {
   private resultsAreaCss = "dataservice-summary-bottom-area-no-results";
   private resultsShowing = false;
   private quickLookSvcName: string;
+  private quickLookQueryText: string;
 
   private allServices: Dataservice[] = [];
   private filteredServices: Dataservice[] = [];
@@ -70,6 +72,8 @@ export class DataservicesComponent extends AbstractPageComponent {
   private dataserviceStateSubscription: Subscription;
   private notifierService: NotifierService;
   private wizardService: WizardService;
+  private selectedSvcViews: Table[] = [];
+  private allSvcViews: Table[] = [];
 
   @ViewChild(ConfirmDeleteComponent) private confirmDeleteDialog: ConfirmDeleteComponent;
   @ViewChild(SqlControlComponent) private sqlControlComponent: SqlControlComponent;
@@ -186,13 +190,34 @@ export class DataservicesComponent extends AbstractPageComponent {
     return this.selectedServices;
   }
 
+  /**
+   * Accessor for all available service views
+   */
+  public get allServiceViews( ): Table[] {
+    return this.allSvcViews;
+  }
+
+  /**
+   * Accessor for selected service view
+   */
+  public get selectedViews( ): Table[] {
+    return this.selectedSvcViews;
+  }
+
   /**
    * @returns {string} the quick look service name
    */
   public get quickLookServiceName(): string {
     return this.quickLookSvcName;
   }
 
+  /**
+   * @returns {string} the quick look service name
+   */
+  public get quickLookSql(): string {
+    return this.quickLookQueryText;
+  }
+
   public onSelected(dataservice: Dataservice): void {
     // Only allow one item to be selected
     this.selectedServices.shift();
@@ -232,6 +257,9 @@ export class DataservicesComponent extends AbstractPageComponent {
   public onTest(svcName: string): void {
     const selectedService =  this.filterDataservices().find((x) => x.getId() === svcName);
     this.dataserviceService.setSelectedDataservice(selectedService);
+    this.allSvcViews = this.dataserviceService.getSelectedDataserviceViews();
+    this.selectedSvcViews = [];
+    this.selectedSvcViews.push(this.allServiceViews[0]);
 
     this.setQuickLookPanelOpenState(false);
 
@@ -321,11 +349,18 @@ export class DataservicesComponent extends AbstractPageComponent {
   public onQuickLook(svcName: string): void {
     const selectedService =  this.filterDataservices().find((x) => x.getId() === svcName);
     this.dataserviceService.setSelectedDataservice(selectedService);
+    this.allSvcViews = this.dataserviceService.getSelectedDataserviceViews();
+    this.selectedSvcViews = [];
+    this.selectedSvcViews.push(this.allServiceViews[0]);
+    const viewName = this.selectedSvcViews[0].getName();
+    this.quickLookQueryText = "SELECT * FROM " + viewName + ";";
 
     if (!this.resultsShowing) {
       this.setQuickLookPanelOpenState(true);
     }
     this.setQuickLookResults(svcName);
+    this.sqlControlComponent.queryText = this.quickLookQueryText;
+    this.sqlControlComponent.submitCurrentQuery();
   }
 
   public isFiltered(): boolean {
@@ -478,8 +513,6 @@ export class DataservicesComponent extends AbstractPageComponent {
    */
   private setQuickLookResults(svcName): void {
      this.quickLookSvcName = svcName;
-     this.sqlControlComponent.initQueryText();
-     this.sqlControlComponent.submitCurrentQuery();
   }
 
 }

ngapp/src/app/dataservices/shared/dataservice.service.ts

@@ -54,6 +54,7 @@ export class DataserviceService extends ApiService {
   private appSettingsService: AppSettingsService;
   private vdbService: VdbService;
   private selectedDataservice: Dataservice;
+  private dataserviceCurrentView: Table[] = [];
   private cachedDataserviceStates: Map<string, DeploymentState> = new Map<string, DeploymentState>();
   private updatesSubscription: Subscription;
 
@@ -74,6 +75,12 @@ export class DataserviceService extends ApiService {
    */
   public setSelectedDataservice(service: Dataservice): void {
     this.selectedDataservice = service;
+    // When the dataservice is selected, init the selected view
+    const views: Table[] = this.getSelectedDataserviceViews();
+    this.dataserviceCurrentView = [];
+    if (views && views.length > 0) {
+      this.dataserviceCurrentView.push(views[0]);
+    }
   }
 
   /**
@@ -84,6 +91,47 @@ export class DataserviceService extends ApiService {
     return this.selectedDataservice;
   }
 
+  /**
+   * Get the current Dataservice selection's views.  The table object is used for the view,
+   * with the Table name set to the full "modelName"."viewName" of the view.
+   * @returns {Table[]} the selected Dataservice views
+   */
+  public getSelectedDataserviceViews( ): Table[] {
+    if (!this.selectedDataservice || this.selectedDataservice === null) {
+      return [];
+    }
+
+    const modelName = this.selectedDataservice.getServiceViewModel();
+    const serviceView = this.selectedDataservice.getServiceViewName();
+
+    // TODO: we will need to get multiple views when supported
+    const view1: Table = new Table();
+    view1.setName(modelName + "." + serviceView);
+
+    const allViews: Table[] = [];
+    allViews.push(view1);
+
+    return allViews;
+  }
+
+  /**
+   * Get the current Dataservice current view.  The table object is used for the view,
+   * with the Table name set to the full "modelName"."viewName" of the view.
+   * @returns {Table[]} the Dataservice current view
+   */
+  public getSelectedDataserviceCurrentView( ): Table[] {
+    return this.dataserviceCurrentView;
+  }
+
+  /**
+   * Set the current Dataservice current view.  The table object is used for the view,
+   * with the Table name set to the full "modelName"."viewName" of the view.
+   * @param {Table[]} view the current view
+   */
+  public setSelectedDataserviceCurrentView( view: Table[] ): void {
+    this.dataserviceCurrentView = view;
+  }
+
   /**
    * Validates the specified data service name. If the name contains valid characters and the name is unique, the
    * service returns 'null'. Otherwise, a 'string' containing an error message is returned.

ngapp/src/app/dataservices/shared/mock-dataservice.service.ts

@@ -23,6 +23,7 @@ import { Dataservice } from "@dataservices/shared/dataservice.model";
 import { DataserviceService } from "@dataservices/shared/dataservice.service";
 import { NewDataservice } from "@dataservices/shared/new-dataservice.model";
 import { NotifierService } from "@dataservices/shared/notifier.service";
+import { Table } from "@dataservices/shared/table.model";
 import { VdbService } from "@dataservices/shared/vdb.service";
 import "rxjs/add/observable/of";
 import "rxjs/add/observable/throw";
@@ -90,6 +91,19 @@ export class MockDataserviceService extends DataserviceService {
     return this.serv1;
   }
 
+  /**
+   * Get the views for the selected Dataservice
+   * @returns {Table[]} the views
+   */
+  public getSelectedDataserviceViews(): Table[] {
+    const table: Table = new Table();
+    table.setName("views.View1");
+    const tables: Table[] = [];
+    tables.push(table);
+
+    return tables;
+  }
+
   /**
    * Updates the current Dataservice states - triggers update to be broadcast to interested components
    */

ngapp/src/app/dataservices/sql-control/sql-control.component.css

@@ -1,6 +1,23 @@
+.view-table-full-div {
+  padding-left: 0;
+  padding-right: 10px;
+  min-height: 240px;
+  max-height: 240px;
+  border: 1px inset grey;
+  overflow-y: auto;
+}
+
+.view-table-quicklook-div {
+  padding-left: 0;
+  padding-right: 10px;
+  min-height: 120px;
+  max-height: 120px;
+  border: 1px inset grey;
+  overflow-y: auto;
+}
+
 .sql-control-control-title {
-  margin: 0.5em;
-  float: left;
+  margin: 5px 0 0;
   color: grey;
   font-weight: bold;
 }
@@ -10,11 +27,14 @@
 }
 
 .sql-control-editor {
-  clear: both;
   border: 1px inset grey;
+  margin-left: 15px;
+  padding-left: 0;
 }
 
 .sql-results-panel {
+  padding-left: 0;
+  padding-right: 0;
   clear: both;
   border: 1px inset grey;
 }
@@ -30,3 +50,15 @@
 .row-number-column {
   text-align: center;
 }
+
+.quicklook-sql-title {
+  font-size: 1.25em;
+  font-weight: bold;
+}
+
+.quicklook-sql {
+  margin-left: 15px;
+  font-size: 1.15em;
+  font-weight: bold;
+  font-style: italic;
+}

ngapp/src/app/dataservices/sql-control/sql-control.component.html

@@ -1,15 +1,37 @@
 <div class="row">
-  <div class="col-sm-12" *ngIf="editorVisible">
-    <div class="sql-control-control-title">Query Editor</div>
-
-    <div class="col-sm-12 sql-control-editor">
+  <div class="col-sm-12">
+    <div [ngClass]="quicklook ? 'col-sm-3 view-table-quicklook-div': 'col-sm-3 view-table-full-div'">
+      <ngx-datatable [rows]="serviceViews"
+                     [footerHeight]="0"
+                     [scrollbarV]="false"
+                     [scrollbarH]="true"
+                     [columnMode]="'force'"
+                     [reorderable]="false"
+                     [selectionType]="'single'"
+                     [selected]="selectedViews"
+                     (select)="onViewSelect($event)"
+                     [sorts]="[{prop: 'name', dir: 'asc'}]"
+                     [cssClasses]="customClasses">
+        <ngx-datatable-column name="Dataservice Views"
+                              [prop]="'name'"
+                              [sortable]="true"
+                              [width]="100"
+                              [draggable]="false"
+                              [resizeable]="false">
+        </ngx-datatable-column>
+      </ngx-datatable>
+    </div>
+    <div *ngIf="!quicklook" class="col-sm-8 sql-control-editor">
       <codemirror [(ngModel)]="queryText" [config]="config"></codemirror>
       <div class="row sql-control-controls-query">
         <button class="btn btn-primary" (click)="submitCurrentQuery()">
           <span class="fa fa-fw fa-search"></span>Submit
         </button>
       </div>
     </div>
+    <div *ngIf="quicklook" class="col-sm-9">
+      <span class="quicklook-sql-title">SQL:</span><span class="quicklook-sql">{{ queryText }}</span>
+    </div>
   </div>
 
   <div class="col-sm-12">
@@ -31,7 +53,7 @@
     <div class="col-sm-12" *ngIf="queryRanInvalid">
       <div class="alert alert-info">
         <span class="pficon pficon-info"></span>
-        <strong>There was an error running the Query!</strong>
+        <strong>Error running Query for <i>'{{ viewName }}'</i></strong>
       </div>
     </div>
     <div class="col-sm-12 sql-results-panel" *ngIf="queryRanValid">

ngapp/src/app/dataservices/sql-control/sql-control.component.spec.ts

@@ -8,6 +8,7 @@ import { DataserviceService } from "@dataservices/shared/dataservice.service";
 import { MockDataserviceService } from "@dataservices/shared/mock-dataservice.service";
 import { MockVdbService } from "@dataservices/shared/mock-vdb.service";
 import { NotifierService } from "@dataservices/shared/notifier.service";
+import { Table } from "@dataservices/shared/table.model";
 import { VdbService } from "@dataservices/shared/vdb.service";
 import { NgxDatatableModule } from "@swimlane/ngx-datatable";
 import { CodemirrorModule } from "ng2-codemirror";
@@ -37,6 +38,16 @@ describe("SqlControlComponent", () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(SqlControlComponent);
     component = fixture.componentInstance;
+
+    // Set the inputs for the component
+    component.viewSql = "SELECT * FROM views.View1";
+    const table = new Table();
+    table.setName("views.View1");
+    const tables: Table[] = [];
+    tables.push(table);
+    component.serviceViews = tables;
+    component.selectedViews = tables;
+
     fixture.detectChanges();
   });