TEIIDTOOLS-309 Rework Connections Summary page in Beetle Studio

- created ConnectionCardComponent - updated connection cards to patternfly-ng - increase dataservice create polling duration time to 2 minutes - created style theme - style changes to dataservice card and also changed to use theme when possible - style changes to selected table card and also changed to use theme when possible
teiid · Feb 15, 2018 · b61b416 · b61b416
1 parent 7023882
commit b61b416
Show file tree

Hide file tree

Showing 32 changed files with 995 additions and 450 deletions.
diff --git a/ngapp/src/app/connections/connections-cards/connection-card/connection-card.component.css b/ngapp/src/app/connections/connections-cards/connection-card/connection-card.component.css
diff --git a/ngapp/src/app/connections/connections-cards/connection-card/connection-card.component.html b/ngapp/src/app/connections/connections-cards/connection-card/connection-card.component.html
@@ -0,0 +1,55 @@
+<pfng-card [config]="cardConfig"
+           [headerTemplate]="tableHeaderTemplate"
+           (onActionSelect)="onShowDetails($event)"
+           (click)="onSelect()"
+           [class]="isSelected() ? 'object-card-selected' : 'object-card'"
+           (selectedConnections)="selectedConnections">
+  <ng-template #tableHeaderTemplate>
+    <div class="row card-toolbar">
+      <div class="form-group pull-right col-xs-1 card-toolbar-dropdown-action-group">
+        <pfng-action [config]="actionConfig"
+                     (onActionSelect)="handleAction($event)">
+        </pfng-action>
+      </div>
+      <span class="pull-right fa pficon-connected card-action-icon"
+            (click)="onClick(pingEvent)"
+            data-toggle="tooltip"
+            data-placement="right"
+            title="Determine if accessible">
+      </span>
+      <span class="pull-right fa fa-edit card-action-icon"
+            (click)="onClick(editEvent)"
+            data-toggle="tooltip"
+            data-placement="right"
+            title="Edit properties">
+      </span>
+    </div>
+    <div class="row card-pf-title text-center object-card-title">
+      <div class="fa fa-plug object-inline-icon"></div>
+      <a [routerLink]="[connection.getId()]" (click)="onClick(editEvent)">{{ connection.name }}</a>
+    </div>
+    <div class="row">
+      <div class="object-card-description">{{ connection.description }}</div>
+    </div>
+  </ng-template>
+  <div class="object-card-body">
+    <div *ngIf="showDetails">
+      <div [class]="isSelected() ? 'object-card-body-title-selected' : 'object-card-body-title'">Properties</div>
+      <div [class]="isSelected() ? 'col-sm-12 properties-group-selected' : 'col-sm-12 properties-group'">
+        <div class="form-group">
+          <pfng-list
+            [config]="listConfig"
+            [itemTemplate]="itemTemplate"
+            [items]="properties">
+            <ng-template #itemTemplate let-item="item">
+              <div class="object-card-body-item">
+                <div class="col-sm-6 property-name">{{ item[ 0 ] }}</div>
+                <div class="col-sm-6 property-value">{{ item[ 1 ] }}</div>
+              </div>
+            </ng-template>
+          </pfng-list>
+        </div>
+      </div>
+    </div>
+  </div>
+</pfng-card>
diff --git a/...p/src/app/connections/connections-cards/connection-card/connection-card.component.spec.ts b/...p/src/app/connections/connections-cards/connection-card/connection-card.component.spec.ts
@@ -0,0 +1,36 @@
+import { async, ComponentFixture, TestBed } from "@angular/core/testing";
+import { RouterTestingModule } from "@angular/router/testing";
+import { Connection } from "@connections/shared/connection.model";
+import { LoggerService } from "@core/logger.service";
+import { PatternFlyNgModule } from "patternfly-ng";
+import { ConnectionCardComponent } from "./connection-card.component";
+
+describe("ConnectionCardComponent", () => {
+  let component: ConnectionCardComponent;
+  let fixture: ComponentFixture<ConnectionCardComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [ PatternFlyNgModule, RouterTestingModule ],
+      declarations: [ ConnectionCardComponent ],
+      providers: [ LoggerService ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ConnectionCardComponent);
+    component = fixture.componentInstance;
+
+    const connection = new Connection();
+    connection.setId( "MyConnection" );
+    component.connection = connection;
+    component.selectedConnections = [ connection ];
+
+    fixture.detectChanges();
+  });
+
+  it("should be created", () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/ngapp/src/app/connections/connections-cards/connection-card/connection-card.component.ts b/ngapp/src/app/connections/connections-cards/connection-card/connection-card.component.ts
@@ -0,0 +1,156 @@
+/**
+ * @license
+ * Copyright 2017 JBoss Inc
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from "@angular/core";
+import { Connection } from "@connections/shared/connection.model";
+import { ConnectionsConstants } from "@connections/shared/connections-constants";
+import { LoggerService } from "@core/logger.service";
+import { Action, ActionConfig, CardAction, CardConfig, ListConfig } from "patternfly-ng";
+
+@Component({
+  encapsulation: ViewEncapsulation.None,
+  selector: "app-connection-card",
+  templateUrl: "./connection-card.component.html",
+  styleUrls: ["./connection-card.component.css"]
+})
+export class ConnectionCardComponent implements OnInit {
+
+  public static readonly deleteConnectionEvent = "delete";
+  public static readonly editConnectionEvent = "edit";
+  public static readonly pingConnectionEvent = "ping";
+
+  public readonly editEvent = ConnectionCardComponent.editConnectionEvent;
+  public readonly pingEvent = ConnectionCardComponent.pingConnectionEvent;
+
+  @Input() public connection: Connection;
+  @Input() public selectedConnections: Connection[];
+  @Output() public cardEvent: EventEmitter< {} > = new EventEmitter< {} >();
+  @Output() public selectEvent: EventEmitter< Connection > = new EventEmitter< Connection >();
+
+  public actionConfig: ActionConfig;
+  public cardConfig: CardConfig;
+  public listConfig: ListConfig;
+  public showDetails = false;
+
+  private readonly deleteActionId = "delete";
+  private logger: LoggerService;
+
+  constructor( logger: LoggerService ) {
+    this.logger = logger;
+  }
+
+  /**
+   * @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;
+  }
+
+  /**
+   * Event handler for when a toolbar kebab action is clicked.
+   * @param {Action} action the action that was selected.
+   */
+  public handleAction( action: Action ): void {
+    if ( action.id === this.deleteActionId ) {
+      this.onClick( ConnectionCardComponent.deleteConnectionEvent );
+    } else {
+      this.logger.error( "Action '" + action.id + "' not handled." );
+    }
+  }
+
+  /**
+   * @returns {boolean} `true` if the connection represented by this card is selected
+   */
+  public isSelected(): boolean {
+    return this.selectedConnections.indexOf( this.connection ) !== -1;
+  }
+
+  /**
+   * Initializes the ActionConfig, CardConfig, and ListConfig.
+   */
+  public ngOnInit(): void {
+    this.actionConfig = {
+      primaryActions: [
+      ],
+      moreActions: [
+          {
+            id: this.deleteActionId,
+            title: "Delete",
+            tooltip: "Delete the connection"
+          }
+      ]
+    } as ActionConfig;
+
+    this.cardConfig = {
+      action: {
+        id: "showDetails",
+        hypertext: this.showDetailsTitle,
+        iconStyleClass: "fa fa-info-circle"
+      },
+      titleBorder: true,
+      noPadding: true,
+      topBorder: false
+    } as CardConfig;
+
+    this.listConfig = {
+      dblClick: false,
+      multiSelect: false,
+      selectItems: false,
+      selectedItems: this.selectedConnections,
+      showCheckbox: false,
+      useExpandItems: false
+    } as ListConfig;
+  }
+
+  /**
+   * An event handler for when a toolbar action is invoked.
+   * @param {string} type the type of event being processed
+   */
+  public onClick( type: string ): void {
+    this.cardEvent.emit( { eventType: type, connectionName: this.connection.getId() } );
+  }
+
+  /**
+   * An event handler for when the card is clicked.
+   */
+  public onSelect(): void {
+    this.selectEvent.emit( this.connection );
+  }
+
+  /**
+   * An event handler for footer action link.
+   * @param {CardAction} $event the event being processed
+   */
+  public onShowDetails( $event: CardAction ): void {
+    this.showDetails = !this.showDetails;
+    $event.hypertext = this.showDetailsTitle;
+  }
+
+  /**
+   * @returns {string} the footer details action text
+   */
+  public get showDetailsTitle(): string {
+    return this.showDetails ? "Hide Details" : "Show Details";
+  }
+
+}
diff --git a/ngapp/src/app/connections/connections-cards/connections-cards.component.css b/ngapp/src/app/connections/connections-cards/connections-cards.component.css
@@ -6,65 +6,3 @@
 .row-cards-pf {
   padding: 0;
 }
-
-.connection-card-action-icon {
-  cursor: pointer;
-}
-
-.connection-card-icon {
-  border: 2px solid #39a5dc;
-  border-radius: 50%;
-  padding: 5px;
-  margin-right: 10px;
-  width: 32px;
-}
-
-.connection-card .connection-card-title {
-  font-size: 16px;
-  font-weight: bold;
-}
-
-.connection-card {
-  -webkit-transition: background-color 300ms;
-  -moz-transition: background-color 300ms;
-  //-ms-transition: background-color 300ms;
-  -o-transition: background-color 300ms;
-  transition: background-color 300ms;
-  height: 160px;
-}
-.connection-card:hover {
-  background-color: rgb(237, 237, 237);
-}
-
-.connection-card.active {
-  background-color: rgb(221, 234, 255);
-}
-
-/*
-.connection-description {
-  font-size: 13px;
-  overflow-y: auto;
-}
-*/
-
-.connection-card .connection-tags {
-  margin-bottom: 8px;
-}
-.connection-card .connection-tags .connection-tags-label {
-  font-weight: bold;
-  margin-right: 5px;
-}
-.connection-card .connection-tags /*.connection-tag*/ {
-  margin-right: 5px;
-  border: 1px solid #ccc;
-  -webkit-border-radius: 2px;
-  -moz-border-radius: 2px;
-  border-radius: 2px;
-  padding: 2px 4px;
-}
-.connection-card .connection-tags /*.connection-tag:hover*/ {
-  cursor: pointer;
-  background-color: #0088ce;
-  border-color: #00659c;
-  color: white;
-}
diff --git a/ngapp/src/app/connections/connections-cards/connections-cards.component.html b/ngapp/src/app/connections/connections-cards/connections-cards.component.html
@@ -1,32 +1,40 @@
-<div class="container-fluid container-cards-pf">
-  <div class="row row-cards-pf">
-
-    <div class="col-xs-12 col-sm-3 col-md-3" *ngFor="let connection of connections">
-      <div class="card-pf card-pf-accented card-pf-aggregate-status connection-card" [class.active]="isSelected(connection)" (click)="toggleConnectionSelected(connection)">
-        <div class="card-pf-body">
-          <!-- title -->
-          <h2 class="connection-card-title">
-            <span class="fa fa-fw fa-plug connection-card-icon"></span>
-            <span><a [routerLink]="[connection.getId()]">{{ connection.getId() }}</a></span>
-            <span class="pull-right pficon-delete connection-card-action-icon" style="color:darkred;" (click)="onDeleteConnection(connection.getId())"></span>
-          </h2>
-          <hr/>
-          <div>
-            <span><b i18n="@@connectionTagsLabel.jndi" >JNDI:</b>&nbsp;&nbsp;{{ connection.getJndiName() }}</span>
-          </div>
-          <div>
-            <span><b i18n="@@connectionTagsLabel.driver" >Driver:</b>&nbsp;&nbsp;{{ connection.getDriverName() }}</span>
-          </div>
-          <!--
-          <div class="connection-tags" *ngIf="connection.tags && connection.tags.length > 0">
-            <span class="connection-tags-label">Tags:</span>
-            <span class="connection-tag" *ngFor="let tag of connection.tags" (click)="selectTag(tag, $event)">{{ tag }}</span>
-          </div>
-          <p class="connection-description">{{connection.description}}</p>
-          -->
-        </div>
-      </div>
-    </div>
-
+<div class="row-cards-pf">
+  <div class="col-xs-12 col-sm-3 col-md-3" *ngFor="let connection of connections">
+    <app-connection-card [connection]="connection"
+                         [selectedConnections]="selectedConnections"
+                         (cardEvent)="onCardEvent($event)"
+                         (selectEvent)="onSelectEvent($event)"></app-connection-card>
   </div>
 </div>
+<!--<div class="container-fluid container-cards-pf">-->
+  <!--<div class="row row-cards-pf">-->
+
+    <!--<div class="col-xs-12 col-sm-3 col-md-3" *ngFor="let connection of connections">-->
+      <!--<div class="card-pf card-pf-accented card-pf-aggregate-status connection-card" [class.active]="isSelected(connection)" (click)="toggleConnectionSelected(connection)">-->
+        <!--<div class="card-pf-body">-->
+          <!--&lt;!&ndash; title &ndash;&gt;-->
+          <!--<h2 class="connection-card-title">-->
+            <!--<span class="fa fa-fw fa-plug connection-card-icon"></span>-->
+            <!--<span><a [routerLink]="[connection.getId()]">{{ connection.getId() }}</a></span>-->
+            <!--<span class="pull-right pficon-delete connection-card-action-icon" style="color:darkred;" (click)="onDeleteConnection(connection.getId())"></span>-->
+          <!--</h2>-->
+          <!--<hr/>-->
+          <!--<div>-->
+            <!--<span><b i18n="@@connectionTagsLabel.jndi" >JNDI:</b>&nbsp;&nbsp;{{ connection.getJndiName() }}</span>-->
+          <!--</div>-->
+          <!--<div>-->
+            <!--<span><b i18n="@@connectionTagsLabel.driver" >Driver:</b>&nbsp;&nbsp;{{ connection.getDriverName() }}</span>-->
+          <!--</div>-->
+          <!--&lt;!&ndash;-->
+          <!--<div class="connection-tags" *ngIf="connection.tags && connection.tags.length > 0">-->
+            <!--<span class="connection-tags-label">Tags:</span>-->
+            <!--<span class="connection-tag" *ngFor="let tag of connection.tags" (click)="selectTag(tag, $event)">{{ tag }}</span>-->
+          <!--</div>-->
+          <!--<p class="connection-description">{{connection.description}}</p>-->
+          <!--&ndash;&gt;-->
+        <!--</div>-->
+      <!--</div>-->
+    <!--</div>-->
+
+  <!--</div>-->
+<!--</div>-->