Add a way to select the connection used when selecting tables of the …

…dataservice - changed step 2a of dataservice wizard to allow user to select the connection - added a inline notification on step 1 of the dataservice wizard alerting user that multi-source is not yet supported - fixed a bug in JdbcTableSelectorComponent where the table header checkbox did not have the correct state
teiid · Jan 17, 2018 · e007944 · e007944
1 parent 4686e07
commit e007944
Show file tree

Hide file tree

Showing 4 changed files with 147 additions and 11 deletions.
diff --git a/ngapp/src/app/dataservices/add-dataservice-wizard/add-dataservice-wizard.component.css b/ngapp/src/app/dataservices/add-dataservice-wizard/add-dataservice-wizard.component.css
@@ -3,3 +3,45 @@
   font-size: 67px;
   line-height: 67px;
 }
+
+.wiz-review-table-checked:before {
+  display: inline-block;
+  margin-bottom: 0;
+  margin-left: 4px;
+  margin-right: 4px;
+  margin-top: 0;
+  font-family: "FontAwesome";
+  content: "\f046";
+  color: green;
+}
+
+.wiz-review-table-checked {
+  margin: 4px;
+}
+
+.wiz-review-table-unchecked:before {
+  display: inline-block;
+  margin-bottom: 0;
+  margin-left: 4px;
+  margin-right: 4px;
+  margin-top: 0;
+  font-family: "FontAwesome";
+  content: "\f096";
+}
+
+.wiz-review-table-unchecked {
+  margin: 4px;
+}
+
+.wiz-review-tables {
+  height: 200px;
+  width: 300px;
+  margin-left: 20px;
+  padding-left: 4px;
+  overflow: scroll;
+  white-space: nowrap;
+  border: 1px solid #ccc;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+}
diff --git a/ngapp/src/app/dataservices/add-dataservice-wizard/add-dataservice-wizard.component.html b/ngapp/src/app/dataservices/add-dataservice-wizard/add-dataservice-wizard.component.html
@@ -7,6 +7,19 @@
   <!-- Step 1 : Table Selection -->
   <!-- ------------------------- -->
   <pfng-wizard-step [config]="step1Config">
+    <div class="row">
+      <div class="col-sm-12">
+        <div class="form-group">
+          <pfng-inline-notification
+            [header]="connectionNotificationHeader"
+            [message]="connectionNotificationMessage"
+            [dismissable]="connectionNotificationDismissable"
+            [type]="connectionNotificationType">
+          </pfng-inline-notification>
+        </div>
+      </div>
+    </div>
+
     <h3><i>{{ step1InstructionMessage }}</i></h3>
     <br>
     <app-connection-table-selector (selectedTableListUpdated)="updatePage1ValidStatus()"></app-connection-table-selector>
@@ -21,7 +34,7 @@ <h3><i>{{ step2InstructionMessage }}</i></h3>
       <br>
       <form [formGroup]=basicPropertyForm class="form-horizontal">
         <div [ngClass]="nameValid ? 'form-group' : 'form-group has-error'">
-          <label class="col-sm-2 control-label">Name</label>
+          <label class="col-sm-2 control-label required-pf">Name</label>
           <div class="col-sm-5">
             <input class="form-control" formControlName="name" title="">
             <div class="help-block" *ngIf="!nameValid">{{ nameValidationError }}</div>
@@ -33,11 +46,30 @@ <h3><i>{{ step2InstructionMessage }}</i></h3>
             <input class="form-control" formControlName="description" title="">
           </div>
         </div>
-        <div class="form-group">
-          <label class="col-sm-2 control-label">Selected Tables:</label>
+        <div [ngClass]="hasSelectedConnection() ? 'form-group' : 'form-group has-error'">
+          <label class="col-sm-2 control-label required-pf"
+                 data-toggle="tooltip"
+                 data-placement="right"
+                 title="Select the connection whose tables will be included in the dataservice">
+            Connection
+          </label>
           <div class="col-sm-5">
-            <div *ngFor="let table of dataserviceSourceTables">
-              <label>[ {{ table.getConnection().getId() }} ] {{ table.getName() }}</label>
+            <select ([ngModel])="selectedConnection" (change)="selectedConnectionChanged($event)">
+              <option disabled selected value [ngValue]="emptyConnection">{{ emptyConnection.getId() }}</option>
+              <option *ngFor="let connection of sourceTableConnections"
+                      [ngValue]="connection">
+                {{ connection.getId() }}
+              </option>
+            </select>
+            <div class="help-block" *ngIf="!hasSelectedConnection()">{{ selectConnectionErrorMsg }}</div>
+          </div>
+        </div>
+        <div class="form-group">
+          <label class="col-sm-2 control-label">Included Tables</label>
+          <div class="col-sm-5 wiz-review-tables">
+            <div [ngClass]="shouldCheck(table) ? 'wiz-review-table-checked' : 'wiz-review-table-unchecked'"
+                 *ngFor="let table of dataserviceSourceTables">
+                {{ table.getName() }} ( {{ table.getConnection().getId() }} <span class="fa fa-plug"></span> )
             </div>
           </div>
         </div>

diff --git a/ngapp/src/app/dataservices/add-dataservice-wizard/add-dataservice-wizard.component.ts b/ngapp/src/app/dataservices/add-dataservice-wizard/add-dataservice-wizard.component.ts
@@ -25,6 +25,7 @@ import {
 import { FormControl, FormGroup } from "@angular/forms";
 import { AbstractControl } from "@angular/forms";
 import { Router } from "@angular/router";
+import { Connection } from "@connections/shared/connection.model";
 import { LoggerService } from "@core/logger.service";
 import { ConnectionTableSelectorComponent } from "@dataservices/connection-table-selector/connection-table-selector.component";
 import { DataserviceService } from "@dataservices/shared/dataservice.service";
@@ -37,7 +38,7 @@ import { VdbService } from "@dataservices/shared/vdb.service";
 import { VdbsConstants } from "@dataservices/shared/vdbs-constants";
 import { WizardService } from "@dataservices/shared/wizard.service";
 import { LoadingState } from "@shared/loading-state.enum";
-import { WizardComponent } from "patternfly-ng";
+import { NotificationType, WizardComponent } from "patternfly-ng";
 import { WizardEvent } from "patternfly-ng";
 import { WizardStepConfig } from "patternfly-ng";
 import { WizardConfig } from "patternfly-ng";
@@ -50,8 +51,9 @@ import { Subscription } from "rxjs/Subscription";
   styleUrls: ["./add-dataservice-wizard.component.css"]
 })
 export class AddDataserviceWizardComponent implements OnInit, OnDestroy {
-  public readonly dataserviceSummaryLink: string = DataservicesConstants.dataservicesRootPath;
-  public loadingState = LoadingState; // need local ref of enum for html to use
+
+  public emptyConnection = new Connection(); // a bogus connection used in drop down to give instructions
+  public readonly selectConnectionErrorMsg = "A connection must be selected";
 
   // Wizard Config
   public wizardConfig: WizardConfig;
@@ -62,6 +64,12 @@ export class AddDataserviceWizardComponent implements OnInit, OnDestroy {
 
   // Wizard Step 1
   public step1Config: WizardStepConfig;
+  public connectionNotificationDismissable = false;
+  public connectionNotificationHeader = "Source Selection";
+  public connectionNotificationMessage = "You can select tables from multiple connections, but currently we only support "
+                                         + " tables from a single connection (multiple connections coming soon). You will "
+                                         + "choose the connection in the next step.";
+  public connectionNotificationType = NotificationType.WARNING;
 
   // Wizard Step 2
   public step2Config: WizardStepConfig;
@@ -71,6 +79,7 @@ export class AddDataserviceWizardComponent implements OnInit, OnDestroy {
   @ViewChild("wizard") public wizard: WizardComponent;
   @ViewChild(ConnectionTableSelectorComponent) public tableSelector: ConnectionTableSelectorComponent;
 
+  public selectedConnection: Connection;
   public nameValidationError = "";
   private dataserviceService: DataserviceService;
   private notifierService: NotifierService;
@@ -92,6 +101,8 @@ export class AddDataserviceWizardComponent implements OnInit, OnDestroy {
     this.wizardService = wizardService;
     this.router = router;
     this.logger = logger;
+    this.emptyConnection.setId( " -- select a connection -- " );
+    this.selectedConnection = this.emptyConnection;
 
     this.createBasicPropertyForm();
   }
@@ -233,7 +244,7 @@ export class AddDataserviceWizardComponent implements OnInit, OnDestroy {
     if (this.wizardService.isEdit()) {
       return "Review selections.  Click Update to update the Dataservice";
     }
-    return "Review selections and enter a name.  Click Create to create the Dataservice";
+    return "Enter a name, select a connection, and review the table selections. Click Create to create the Dataservice";
   }
 
   /*
@@ -377,12 +388,53 @@ export class AddDataserviceWizardComponent implements OnInit, OnDestroy {
   }
 
   /**
-   * @returns {string} the selected source table names in string form
+   * @returns {Table[]} the selected source table names in string form
    */
   public get dataserviceSourceTables(): Table[] {
     return this.tableSelector.getSelectedTables();
   }
 
+  /**
+   *
+   * @returns {Connection[]} the selected source table connections
+   */
+  public get sourceTableConnections(): Connection[] {
+    const tables = this.tableSelector.getSelectedTables();
+    const connections: Connection[] = [];
+
+    for ( const table of tables ) {
+      const connection = table.getConnection();
+
+      if ( connections.indexOf( connection) === -1 ) {
+        connections.push( connection );
+      }
+    }
+
+    return connections;
+  }
+
+  public selectedConnectionChanged( $event ): void {
+    // since the dropdown has a dummy first element subtract 1
+    const index = $event.target.selectedIndex - 1;
+    this.selectedConnection = this.sourceTableConnections[ index ];
+    this.updatePage2aValidStatus();
+  }
+
+  public shouldCheck( table: Table ): boolean {
+    if ( this.selectedConnection && ( table.getConnection() === this.selectedConnection ) ) {
+      return true;
+    }
+
+    return false;
+  }
+
+  /**
+   * @returns {boolean} `true` if a connection has been selected
+   */
+  public hasSelectedConnection(): boolean {
+    return ( this.selectedConnection != null ) && ( this.selectedConnection !== this.emptyConnection );
+  }
+
   /**
    * Updates the page1 status
    */
@@ -434,7 +486,7 @@ export class AddDataserviceWizardComponent implements OnInit, OnDestroy {
     if (this.wizardService.isEdit()) {
       this.step2aConfig.nextEnabled = true;
     } else {
-      this.step2aConfig.nextEnabled = this.nameValid;
+      this.step2aConfig.nextEnabled = this.nameValid && this.hasSelectedConnection();
     }
     this.setNavAway(this.step2aConfig.nextEnabled);
   }

diff --git a/ngapp/src/app/dataservices/jdbc-table-selector/jdbc-table-selector.component.ts b/ngapp/src/app/dataservices/jdbc-table-selector/jdbc-table-selector.component.ts
@@ -490,6 +490,7 @@ export class JdbcTableSelectorComponent implements OnInit, TableSelector {
     // Load the table names for the selected Connection and Schema
     this.tables = [];
     this.filteredTables = [];
+    this.selectedAllRows = false;
     this.tableLoadingState = LoadingState.LOADING;
     const self = this;
     this.connectionService
@@ -517,11 +518,14 @@ export class JdbcTableSelectorComponent implements OnInit, TableSelector {
   }
 
   private setInitialTableSelections(): void {
+    let enableSelectAll = true;
+
     for ( const table of this.tables ) {
       // const catName = table.getCatalogName();
       // const schemaName = table.getSchemaName();
       const tableName = table.getName();
       const connName = table.getConnection().getId();
+
       for ( const initialTable of this.wizardService.getWizardSelectedTables() ) {
         // const iCatName = initialTable.getCatalogName();
         // const iSchemaName = initialTable.getSchemaName();
@@ -532,7 +536,13 @@ export class JdbcTableSelectorComponent implements OnInit, TableSelector {
           break;
         }
       }
+
+      if ( !table.selected ) {
+        enableSelectAll = false;
+      }
     }
+
+    this.selectedAllRows = enableSelectAll;
   }
 
 }