Minor changes to connection and dataservice lists

- made connection list item expander section for properties look similar to the connection card section
- work on dataservice list action enablement
- limiting dataservice and connection list item descriptions to 120 visible characters
- some style changes
- fixed some tslint errors

ngapp/src/app/connections/connections-list/connection-details.component.html

@@ -1,12 +1,13 @@
-<div class="row">
-  <div class="col-md-9">
-    <dl class="dl-horizontal">
-      <dt>{{ jndiLabel }}</dt>
-      <dd>{{ connection.getJndiName() }}</dd>
-      <dt>{{ driverLabel }}</dt>
-      <dd>{{ connection.getDriverName() }}</dd>
-      <dt>{{ serviceCatalogSourceLabel }}</dt>
-      <dd>{{ connection.getServiceCatalogSourceName() }}</dd>
-    </dl>
-  </div>
-</div>
+<div class="object-card-body-title">Properties</div>
+<pfng-list
+  class="properties-group"
+  [config]="listConfig"
+  [itemTemplate]="itemTemplate"
+  [items]="properties">
+  <ng-template #itemTemplate let-item="item">
+    <div class="connection-details-properties">
+      <div class="property-name">{{ item[ 0 ] }}</div>
+      <div class="property-value">{{ item[ 1 ] }}</div>
+    </div>
+  </ng-template>
+</pfng-list>

ngapp/src/app/connections/connections-list/connection-details.component.ts

@@ -15,25 +15,51 @@
  * limitations under the License.
  */
 
-import { Component, Input, ViewEncapsulation } from "@angular/core";
+import { Component, Input, OnInit, ViewEncapsulation } from "@angular/core";
 import { Connection } from "@connections/shared/connection.model";
 import { ConnectionsConstants } from "@connections/shared/connections-constants";
+import { ListConfig } from "patternfly-ng";
 
 @Component({
   encapsulation: ViewEncapsulation.None,
   selector: "app-connection-details",
   templateUrl: "./connection-details.component.html"
 })
-export class ConnectionDetailsComponent {
+export class ConnectionDetailsComponent implements OnInit {
 
   public readonly driverLabel = ConnectionsConstants.driverNamePropertyLabel;
   public readonly jndiLabel = ConnectionsConstants.jndiNamePropertyLabel;
   public readonly serviceCatalogSourceLabel = ConnectionsConstants.serviceCatalogSourceNameLabel;
 
   @Input() public connection: Connection;
 
+  public listConfig: ListConfig;
+
   constructor() {
     // nothing to do
   }
 
+  public ngOnInit(): void {
+    this.listConfig = {
+      dblClick: false,
+      multiSelect: false,
+      selectItems: false,
+      showCheckbox: false,
+      useExpandItems: false
+    };
+  }
+
+  /**
+   * @returns {string[][]} the properties of a connection
+   */
+  public get properties(): string[][] {
+    const props = [
+      [ ConnectionsConstants.jndiNamePropertyLabel, this.connection.getJndiName() ],
+      [ ConnectionsConstants.driverNamePropertyLabel, this.connection.getDriverName() ],
+      [ ConnectionsConstants.serviceCatalogSourceNameLabel, this.connection.getServiceCatalogSourceName() ],
+    ];
+
+    return props;
+  }
+
 }

ngapp/src/app/connections/connections-list/connections-list.component.css

@@ -0,0 +1,11 @@
+.connection-details-properties {
+  padding-left: 40px;
+}
+
+.pfng-list-expansion .list-pf-content {
+  width: 100%;
+}
+
+.pfng-list-expansion .pfng-list-content {
+  width: 100%;
+}

ngapp/src/app/connections/connections-list/connections-list.component.html

@@ -40,7 +40,7 @@
             </pfng-action>
           </ng-template>
           <ng-template #expandTemplate let-item="item" let-index="index">
-            <app-connection-details [connection]="item"></app-connection-details>
+            <app-connection-details class="connection-details-properties" [connection]="item"></app-connection-details>
           </ng-template>
         </pfng-list>
       </div>

ngapp/src/app/connections/connections-list/connections-list.component.ts

@@ -123,7 +123,7 @@ export class ConnectionsListComponent implements OnInit {
   /**
    * Event handler for when a toolbar icon or kebab action is clicked.
    * @param {Action} action the action that was selected.
-   * @param {any} not used
+   * @param item this parameter is not used
    */
   public handleAction( action: Action,
                        item: any ): void {

ngapp/src/app/connections/shared/connection.model.ts

@@ -112,7 +112,7 @@ export class Connection implements Identifiable< string > {
    * @returns {string} the service catalog source name of this connection
    */
   public getServiceCatalogSourceName(): string {
-    // TODO: finish implenting getServiceCatalogSourceName()
+    // TODO: finish implementing getServiceCatalogSourceName()
     return "TBD";
   }
 

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

@@ -7,7 +7,7 @@
 .wiz-review-table-checked:before {
   display: inline-block;
   margin: 0 4px;
-  font-family: "FontAwesome";
+  font-family: "FontAwesome, monospace";
   content: "\f046";
   color: green;
 }
@@ -19,7 +19,7 @@
 .wiz-review-table-unchecked:before {
   display: inline-block;
   margin: 0 4px;
-  font-family: "FontAwesome";
+  font-family: "FontAwesome, monospace";
   content: "\f096";
 }
 

ngapp/src/app/dataservices/dataservices-cards/dataservice-card/dataservice-card.component.css

@@ -1,19 +1,19 @@
 .card-toolbar .secondary-action[title="Activate"]:before {
   color: var(--card-action-icon-color);
   content: "\f1eb";
-  font-family: "FontAwesome";
+  font-family: "FontAwesome, monospace";
 }
 
 .card-toolbar .secondary-action[title="Publish"]:before {
   color: var(--card-action-icon-color);
   content: "\f08e";
-  font-family: "FontAwesome";
+  font-family: "FontAwesome, monospace";
 }
 
 .card-toolbar .secondary-action[title="Refresh"]:before {
   color: var(--card-action-icon-color);
   content: "\f021";
-  font-family: "FontAwesome";
+  font-family: "FontAwesome, monospace";
 }
 
 .object-card .list-pf {

ngapp/src/app/dataservices/dataservices-cards/dataservice-card/dataservice-card.component.spec.ts

@@ -1,9 +1,9 @@
 import { async, ComponentFixture, TestBed } from "@angular/core/testing";
 import { RouterTestingModule } from "@angular/router/testing";
+import { LoggerService } from "@core/logger.service";
 import { DataserviceCardComponent } from "@dataservices/dataservices-cards/dataservice-card/dataservice-card.component";
 import { Dataservice } from "@dataservices/shared/dataservice.model";
 import { PatternFlyNgModule } from "patternfly-ng";
-import { LoggerService } from "@core/logger.service";
 
 describe("DataserviceCardComponent", () => {
   let component: DataserviceCardComponent;

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

@@ -2,19 +2,19 @@
 .object-list .secondary-action[title*="Activate"]:before {
   color: var(--card-action-icon-color);
   content: "\f1eb";
-  font-family: "FontAwesome";
+  font-family: "FontAwesome, monospace";
 }
 
 /* Adds an icon to the left of the publish action item in dropdown of kebab. */
 .object-list .secondary-action[title*="Publish"]:before {
   color: var(--card-action-icon-color);
   content: "\f08e";
-  font-family: "FontAwesome";
+  font-family: "FontAwesome, monospace";
 }
 
 /* Adds an icon to the left of the refresh action item in dropdown of kebab. */
 .object-list .secondary-action[title*="Refresh"]:before {
   color: var(--card-action-icon-color);
   content: "\f021";
-  font-family: "FontAwesome";
+  font-family: "FontAwesome, monospace";
 }

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

@@ -19,11 +19,11 @@
             </div>
             <div class="list-pf-content-wrapper">
               <div class="list-pf-main-content">
-                <span class="pull-left pficon-ok object-inline-icon" *ngIf="item.serviceDeploymentActive"></span>
-                <span class="pull-left pficon-error-circle-o object-inline-icon" *ngIf="item.serviceDeploymentFailed"></span>
-                <span class="pull-left pficon-warning-triangle-o object-inline-icon" *ngIf="item.serviceDeploymentInactive"></span>
-                <span class="pull-left pficon-unknown object-inline-icon" *ngIf="item.serviceDeploymentNotDeployed"></span>
-                <span class="pull-left fa fa-spinner fa-pulse object-inline-icon" *ngIf="item.serviceDeploymentLoading"></span>
+                <span class="pull-left pficon-ok" *ngIf="item.serviceDeploymentActive"></span>
+                <span class="pull-left pficon-error-circle-o" *ngIf="item.serviceDeploymentFailed"></span>
+                <span class="pull-left pficon-warning-triangle-o" *ngIf="item.serviceDeploymentInactive"></span>
+                <span class="pull-left pficon-unknown" *ngIf="item.serviceDeploymentNotDeployed"></span>
+                <span class="pull-left fa fa-spinner fa-pulse" *ngIf="item.serviceDeploymentLoading"></span>
                 <a class="object-name-link" [routerLink]="[item.getId()]" (click)="onEditDataservice(item.getId())">{{ item.getId() }}</a>
                 <div class="list-pf-description">{{ getDescription( item ) }}</div>
               </div>