Changes to the connections list in the dataservice wizard

- changed the list to a datatable
- some style changes to the core datatable style classes
- sorting of connections is not working
- next button enablement is not working once a table is elected
- fixes some lint errors/warnings

ngapp/src/app/core/nav-header/nav-header.component.ts

@@ -31,11 +31,11 @@ import { BsModalRef } from "ngx-bootstrap/modal/modal-options.class";
 })
 export class NavHeaderComponent {
 
+  public aboutInfo: About;
   private aboutRef: BsModalRef;
   private logger: LoggerService;
   private modalService: BsModalService;
   private aboutService: AboutService;
-  public aboutInfo: About;
 
   constructor( logger: LoggerService,
                modalService: BsModalService,

ngapp/src/app/dataservices/add-dataservice-wizard/add-dataservice-wizard.component.spec.ts

@@ -15,6 +15,7 @@ import { NotifierService } from "@dataservices/shared/notifier.service";
 import { VdbService } from "@dataservices/shared/vdb.service";
 import { PropertyFormPropertyComponent } from "@shared/property-form/property-form-property/property-form-property.component";
 import { PropertyFormComponent } from "@shared/property-form/property-form.component";
+import { NgxDatatableModule } from "@swimlane/ngx-datatable";
 import { PatternFlyNgModule } from "patternfly-ng";
 import { AddDataserviceWizardComponent } from "./add-dataservice-wizard.component";
 
@@ -24,7 +25,7 @@ describe("AddDataserviceWizardComponent", () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [ CoreModule, FormsModule, PatternFlyNgModule, ReactiveFormsModule, RouterTestingModule ],
+      imports: [ CoreModule, FormsModule, PatternFlyNgModule, ReactiveFormsModule, RouterTestingModule, NgxDatatableModule ],
       declarations: [ AddDataserviceWizardComponent, ConnectionTableSelectorComponent, JdbcTableSelectorComponent,
                       PropertyFormComponent, PropertyFormPropertyComponent, SelectedTableComponent ],
       providers: [

ngapp/src/app/dataservices/add-dataservice-wizard/add-dataservice-wizard.component.ts

@@ -24,7 +24,6 @@ import {
 
 import { FormControl, FormGroup } from "@angular/forms";
 import { AbstractControl } from "@angular/forms";
-import { Validators } from "@angular/forms";
 import { Router } from "@angular/router";
 import { LoggerService } from "@core/logger.service";
 import { ConnectionTableSelectorComponent } from "@dataservices/connection-table-selector/connection-table-selector.component";
@@ -71,6 +70,7 @@ export class AddDataserviceWizardComponent implements OnInit, OnDestroy {
   @ViewChild("wizard") public wizard: WizardComponent;
   @ViewChild(ConnectionTableSelectorComponent) public tableSelector: ConnectionTableSelectorComponent;
 
+  public nameValidationError = "";
   private dataserviceService: DataserviceService;
   private notifierService: NotifierService;
   private vdbService: VdbService;
@@ -79,7 +79,6 @@ export class AddDataserviceWizardComponent implements OnInit, OnDestroy {
   private deploymentChangeSubscription: Subscription;
   private sourceVdbUnderDeployment: string;
   private errorDetailMessage: string;
-  public nameValidationError: string = "";
 
   constructor(router: Router, dataserviceService: DataserviceService,
               notifierService: NotifierService, logger: LoggerService, vdbService: VdbService ) {
@@ -175,27 +174,27 @@ export class AddDataserviceWizardComponent implements OnInit, OnDestroy {
   public handleNameChanged( input: AbstractControl ): void {
     const self = this;
 
-      this.dataserviceService.isValidName( input.value ).subscribe(
-          ( errorMsg ) => {
-          if ( errorMsg ) {
-            // only update if error has changed
-            if ( errorMsg != self.nameValidationError ) {
-              self.nameValidationError = errorMsg;
-            }
-          } else { // name is valid
-            self.nameValidationError = "";
-          }
-        },
-      ( error ) => {
-          self.logger.error( "[handleNameChanged] Error: %o", error );
-        } );
+    this.dataserviceService.isValidName( input.value ).subscribe(
+      ( errorMsg ) => {
+      if ( errorMsg ) {
+        // only update if error has changed
+        if ( errorMsg !== self.nameValidationError ) {
+          self.nameValidationError = errorMsg;
+        }
+      } else { // name is valid
+        self.nameValidationError = "";
+      }
+    },
+  ( error ) => {
+      self.logger.error( "[handleNameChanged] Error: %o", error );
+    } );
   }
 
   /*
    * Return the name valid state
    */
   public get nameValid(): boolean {
-    return this.nameValidationError == null || this.nameValidationError.length == 0;
+    return this.nameValidationError == null || this.nameValidationError.length === 0;
   }
 
   /*

ngapp/src/app/dataservices/add-dataservice/add-dataservice.component.spec.ts

@@ -15,6 +15,7 @@ import { MockVdbService } from "@dataservices/shared/mock-vdb.service";
 import { NotifierService } from "@dataservices/shared/notifier.service";
 import { VdbService } from "@dataservices/shared/vdb.service";
 import { SharedModule } from "@shared/shared.module";
+import { NgxDatatableModule } from "@swimlane/ngx-datatable";
 import { PatternFlyNgModule } from "patternfly-ng";
 import { AddDataserviceComponent } from "./add-dataservice.component";
 
@@ -24,7 +25,7 @@ describe("AddDataserviceComponent", () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [ CoreModule, PatternFlyNgModule, FormsModule, ReactiveFormsModule, RouterTestingModule, SharedModule ],
+      imports: [ CoreModule, PatternFlyNgModule, FormsModule, ReactiveFormsModule, RouterTestingModule, SharedModule, NgxDatatableModule ],
       declarations: [ AddDataserviceComponent, AddDataserviceWizardComponent,
                       ConnectionTableSelectorComponent, JdbcTableSelectorComponent, SelectedTableComponent ],
       providers: [

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

@@ -1,51 +1,3 @@
-.list-div {
-  position: relative;
-  height: 100%;
-  max-height: 300px;
-  overflow-y: auto;
-}
-
-.connection-list .list-view-pf-main-info {
-  padding-top: 0.5em;
-  padding-bottom: 0.5em;
-}
-
-.connection-list .list-group-item-heading {
-  font-size: 12px;
-  margin-right: 5px;
-}
-
-.connection-list .list-view-pf-description {
-  width: 95%;
-}
-
-.connection-list .list-group-item.active {
-  background-color: darkblue;
-  color: white;
-  border-color: transparent;
-}
-
-.connection-column-title {
-  height: 35px;
-  padding-top: 7px;
-  border:1px solid white;
-  background-color: #cccccc;
-  padding-left: 10px;
-}
-
-.evenRow {
-  background-color: #f2f2f2;
-}
-
-.oddRow {
-  background-color: white;
-}
-
-.connection-selector-container {
-  padding-left: 0;
-  padding-right: 0;
-}
-
 .jdbc-selector-container {
   padding-left: 0;
   padding-right: 0;

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

@@ -1,39 +1,36 @@
 <div>
-  <!-- ---------------- -->
-  <!-- Connections List -->
-  <!-- ---------------- -->
-  <div class="list-div col-sm-3 connection-selector-container">
-    <div class="connection-column-title">
-      <strong>Connections</strong>
-    </div>
-    <div *ngIf="connectionsLoading">
-      <span class="spinner spinner-sm spinner-inline"></span>
-    </div>
-    <div *ngIf="connectionsLoadedInvalid">
-      <div class="alert alert-info">
-        <span class="pficon pficon-info"></span>
-        <strong>Problem Loading Connections!</strong>
-      </div>
-    </div>
-    <div class="connection-list list-group list-view-pf" *ngIf="connectionsLoadedValid">
-      <div class="list-group-item list-view-pf-stacked"
-           *ngFor="let connection of getAllConnections(); index as i; odd as isEvenRow; even as isOddRow"
-           [class.oddRow]="isOddRow" [class.evenRow]="isEvenRow" [class.active]="isConnectionSelected(connection)" (click)="toggleConnectionSelected(connection)">
-        <div class="list-view-pf-main-info">
-          <div class="list-view-pf-left">
-            <span class="fa fa-plug list-view-pf-icon-sm"></span>
-          </div>
-          <div class="list-view-pf-body">
-            <div class="list-view-pf-description">
-              <div class="list-group-item-heading">
-                {{ connection.getId() }}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
+  <div *ngIf="connectionsLoading">
+    <span class="spinner spinner-sm spinner-inline"></span>
+  </div>  <div *ngIf="connectionsLoadedInvalid">
+    <div class="alert alert-info">
+      <span class="pficon pficon-info"></span>
+      <strong>Problem Loading Connections!</strong>
     </div>
   </div>
+  <div class="col-sm-3" *ngIf="connectionsLoadedValid">
+    <ngx-datatable [rows]="rows"
+                   [columns]="columns"
+                   [loadingIndicator]="connectionsLoading"
+                   [messages]="tableMessages"
+                   [footerHeight]="24"
+                   [scrollbarV]="true"
+                   [scrollbarH]="true"
+                   [columnMode]="'force'"
+                   [reorderable]="false"
+                   [selectionType]="'single'"
+                   (select)="onSelect($event)"
+                   [cssClasses]="customClasses">
+      <ngx-datatable-column [prop]="name" [sortable]="true" [resizeable]="false">
+        <ng-template let-column="column" ngx-datatable-header-template>
+          Connections
+        </ng-template>
+        <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
+          <i class="fa fa-plug list-view-pf-icon-sm"></i>
+          {{row.name}}
+        </ng-template>
+      </ngx-datatable-column>
+    </ngx-datatable>
+  </div>
   <!-- ------------------------------------------- -->
   <!-- Connection Content Area                     -->
   <!-- 1) JDBC Connection selected                 -->

ngapp/src/app/dataservices/connection-table-selector/connection-table-selector.component.spec.ts

@@ -8,6 +8,7 @@ import { AppSettingsService } from "@core/app-settings.service";
 import { LoggerService } from "@core/logger.service";
 import { JdbcTableSelectorComponent } from "@dataservices/jdbc-table-selector/jdbc-table-selector.component";
 import { SelectedTableComponent } from "@dataservices/selected-table/selected-table.component";
+import { NgxDatatableModule } from "@swimlane/ngx-datatable";
 import { ConnectionTableSelectorComponent } from "./connection-table-selector.component";
 
 describe("ConnectionTableSelectorComponent", () => {
@@ -16,7 +17,7 @@ describe("ConnectionTableSelectorComponent", () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [ FormsModule, HttpModule ],
+      imports: [ FormsModule, HttpModule, NgxDatatableModule ],
       declarations: [ ConnectionTableSelectorComponent, JdbcTableSelectorComponent, SelectedTableComponent ],
       providers: [
         AppSettingsService, LoggerService,

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

@@ -15,10 +15,7 @@
  * limitations under the License.
  */
 
-import { ViewChild } from "@angular/core";
-import { Output } from "@angular/core";
-import { EventEmitter } from "@angular/core";
-import { Component, OnInit } from "@angular/core";
+import { Component, EventEmitter, OnInit, Output, ViewChild, ViewEncapsulation } from "@angular/core";
 import { Connection } from "@connections/shared/connection.model";
 import { ConnectionService } from "@connections/shared/connection.service";
 import { LoggerService } from "@core/logger.service";
@@ -27,6 +24,7 @@ import { Table } from "@dataservices/shared/table.model";
 import { LoadingState } from "@shared/loading-state.enum";
 
 @Component({
+  encapsulation: ViewEncapsulation.None,
   selector: "app-connection-table-selector",
   templateUrl: "./connection-table-selector.component.html",
   styleUrls: ["./connection-table-selector.component.css"]
@@ -37,6 +35,18 @@ export class ConnectionTableSelectorComponent implements OnInit {
 
   @ViewChild(JdbcTableSelectorComponent) public jdbcTableSelector: JdbcTableSelectorComponent;
 
+  public readonly nameProp = "name"; // must match html template
+  public rows: any[] = [];
+
+  public readonly customClasses = {
+    sortAscending: "fa fa-sort-asc",
+    sortDescending: "fa fa-sort-desc",
+    pagerLeftArrow: "fa fa-chevron-left",
+    pagerRightArrow: "fa fa-chevron-right",
+    pagerPrevious: "fa fa-step-backward",
+    pagerNext: "fa fa-step-forward"
+  };
+
   private connectionService: ConnectionService;
   private allConnections: Connection[] = [];
   private selectedConn: Connection;
@@ -61,6 +71,13 @@ export class ConnectionTableSelectorComponent implements OnInit {
         (conns) => {
           self.allConnections = conns;
           self.connectionLoadingState = LoadingState.LOADED_VALID;
+
+          // load table after setting loading state so table has been constructed
+          self.allConnections.forEach( ( connection ) => {
+            const row = {};
+            row[ this.nameProp ] = connection.getId();
+            self.rows.push( row );
+          } );
         },
         (error) => {
           self.logger.error("[ConnectionTableSelectorComponent] Error getting connections: %o", error);
@@ -69,33 +86,13 @@ export class ConnectionTableSelectorComponent implements OnInit {
       );
   }
 
-  /**
-   * Toggles the selection
-   * @param {Connection} connection the connection whose selection changed
-   */
-  public toggleConnectionSelected(connection: Connection): void {
-    // Connection currently selected, so deselect it
-    if (this.isConnectionSelected(connection)) {
-      this.selectedConn = null;
-    } else {
-      // Connection not currently selected or nothing selected, so select it.
-      this.selectedConn = connection;
-    }
-    // Set the specific selector with the current connection
-    if (this.jdbcTableSelector) {
-      if (this.selectedConn && this.selectedConn.isJdbc()) {
-        this.jdbcTableSelector.setConnection(connection);
-      } else {
-        this.jdbcTableSelector.setConnection(null);
-      }
-    }
-  }
+  // callback from connections table selection
+  public onSelect( { selected }) {
+    // connection is single select so get first element
+    const connectionName = selected[ 0 ][ this.nameProp ];
 
-  /**
-   * Respond to child table selection changes by propagating up my parent
-   */
-  public onTableSelectionChanged( ): void {
-    this.tableSelectionChanged.emit();
+    // find and set selected connection (see setter)
+    this.selectedConnection = this.allConnections.find(( conn ) => conn.getId() === connectionName );
   }
 
   /**
@@ -174,6 +171,18 @@ export class ConnectionTableSelectorComponent implements OnInit {
    */
   public set selectedConnection(conn: Connection) {
     this.selectedConn = conn;
+
+    // Set the specific selector with the current connection
+    if (this.jdbcTableSelector) {
+      if (this.selectedConn && this.selectedConn.isJdbc()) {
+        this.jdbcTableSelector.setConnection(this.selectedConnection);
+      } else {
+        this.jdbcTableSelector.setConnection(null);
+      }
+    }
+
+    // notify upstream that connection selection has changed
+    this.tableSelectionChanged.emit();
   }
 
   /*
@@ -196,4 +205,17 @@ export class ConnectionTableSelectorComponent implements OnInit {
     return selectedTables;
   }
 
+  // used by table
+  public get tableMessages(): { emptyMessage: string; totalMessage: string | string } {
+    const msg = this.allConnections.length === 1 ? "connection" : "connections";
+
+    return {
+      // no data message
+      emptyMessage: "No connections found",
+
+      // footer total message
+      totalMessage: msg
+    };
+  }
+
 }

ngapp/src/app/dataservices/selected-table/selected-table.component.html

@@ -2,5 +2,5 @@
   <span class="fa fa-plug"></span><span class="selected-table-connection">{{ table.getConnection().getId() }}</span>
   <span class="fa fa-close pull-right selected-table-close-icon" (click)="onRemove()"></span>
   <br>
-  <span class="selected-table-name">{{ table.name }}</span>
+  <span class="selected-table-name">{{ table.getName() }}</span>
 </div>

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

@@ -16,7 +16,7 @@
  */
 
 import { Injectable } from "@angular/core";
-import { Http} from "@angular/http";
+import { Http } from "@angular/http";
 import { ApiService } from "@core/api.service";
 import { AppSettingsService } from "@core/app-settings.service";
 import { LoggerService } from "@core/logger.service";