-
-
-
-
-
-
-
- JNDI: {{ connection.getJndiName() }}
-
-
- Driver: {{ connection.getDriverName() }}
-
-
-
-
-
-
-
+
+
diff --git a/ngapp/src/app/connections/connections-list/connections-list.component.spec.ts b/ngapp/src/app/connections/connections-list/connections-list.component.spec.ts
index 761ce445..3c5d8a38 100644
--- a/ngapp/src/app/connections/connections-list/connections-list.component.spec.ts
+++ b/ngapp/src/app/connections/connections-list/connections-list.component.spec.ts
@@ -1,6 +1,8 @@
import { async, ComponentFixture, TestBed } from "@angular/core/testing";
import { RouterTestingModule } from "@angular/router/testing";
+import { ConnectionDetailsComponent } from "@connections/connections-list/connection-details.component";
import { ConnectionsListComponent } from "@connections/connections-list/connections-list.component";
+import { PatternFlyNgModule } from "patternfly-ng";
describe("ConnectionsListComponent", () => {
let component: ConnectionsListComponent;
@@ -8,8 +10,8 @@ describe("ConnectionsListComponent", () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
- imports: [ RouterTestingModule ],
- declarations: [ ConnectionsListComponent ]
+ imports: [ PatternFlyNgModule, RouterTestingModule ],
+ declarations: [ ConnectionDetailsComponent, ConnectionsListComponent ]
})
.compileComponents().then(() => {
// nothing to do
diff --git a/ngapp/src/app/connections/connections-list/connections-list.component.ts b/ngapp/src/app/connections/connections-list/connections-list.component.ts
index 830a1d5c..9ba61f9a 100644
--- a/ngapp/src/app/connections/connections-list/connections-list.component.ts
+++ b/ngapp/src/app/connections/connections-list/connections-list.component.ts
@@ -15,28 +15,36 @@
* limitations under the License.
*/
-import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { Component, EventEmitter, Input, OnInit, Output, TemplateRef, ViewEncapsulation } from "@angular/core";
import { Router } from "@angular/router";
import { Connection } from "@connections/shared/connection.model";
+import { Action, ActionConfig, ListConfig } from "patternfly-ng";
@Component({
moduleId: module.id,
+ encapsulation: ViewEncapsulation.None,
selector: "app-connections-list",
templateUrl: "connections-list.component.html",
styleUrls: ["connections-list.component.css"]
})
-export class ConnectionsListComponent {
+export class ConnectionsListComponent implements OnInit {
@Input() public connections: Connection[];
@Input() public selectedConnections: Connection[];
- @Output() public connectionSelected: EventEmitter
= new EventEmitter();
+
@Output() public connectionDeselected: EventEmitter = new EventEmitter();
- @Output() public tagSelected: EventEmitter = new EventEmitter();
- @Output() public pingConnection: EventEmitter = new EventEmitter();
+ @Output() public connectionSelected: EventEmitter = new EventEmitter();
@Output() public deleteConnection: EventEmitter = new EventEmitter();
+ @Output() public editConnection: EventEmitter = new EventEmitter();
+ @Output() public pingConnection: EventEmitter = new EventEmitter();
+ public listConfig: ListConfig;
private router: Router;
+ private readonly deleteActionId = "delecteActionId";
+ private readonly editActionId = "editActionId";
+ private readonly pingActionId = "pingActionId";
+
/**
* Constructor.
*/
@@ -44,30 +52,118 @@ export class ConnectionsListComponent {
this.router = router;
}
- public toggleConnectionSelected(connection: Connection): void {
- if (this.isSelected(connection)) {
- this.connectionDeselected.emit(connection);
- } else {
- this.connectionSelected.emit(connection);
- }
+ /**
+ * Initializes the list config.
+ */
+ public ngOnInit(): void {
+ this.listConfig = {
+ dblClick: false,
+ multiSelect: false,
+ selectItems: true,
+ selectedItems: this.selectedConnections,
+ showCheckbox: false,
+ useExpandItems: true
+ } as ListConfig;
+ }
+
+ /**
+ * Get the ActionConfig properties for each row.
+ *
+ * @param connection the connection represented by a row
+ * @param editActionTemplate {TemplateRef} the edit action template
+ * @param pingActionTemplate {TemplateRef} the ping action template
+ * @param deleteActionTemplate {TemplateRef} the delete action template
+ * @returns {ActionConfig} the actions configuration
+ */
+ public getActionConfig( connection: Connection,
+ editActionTemplate: TemplateRef< any >,
+ pingActionTemplate: TemplateRef< any >,
+ deleteActionTemplate: TemplateRef< any > ): ActionConfig {
+ const actionConfig = {
+ primaryActions: [
+ {
+ id: this.editActionId,
+ template: editActionTemplate,
+ title: "Edit",
+ tooltip: "Edit properties"
+ },
+ {
+ id: this.pingActionId,
+ template: pingActionTemplate,
+ title: "Ping",
+ tooltip: "Determine if accessible"
+ }
+ ],
+ moreActions: [
+ {
+ id: this.deleteActionId,
+ template: deleteActionTemplate,
+ title: "Delete",
+ tooltip: "Delete the connection"
+ }
+ ],
+ moreActionsDisabled: false,
+ moreActionsVisible: true
+ } as ActionConfig;
+
+ return actionConfig;
}
- public isSelected(connection: Connection): boolean {
- return this.selectedConnections.indexOf(connection) !== -1;
+ /**
+ * Event handler for when a toolbar icon or kebab action is clicked.
+ * @param {Action} action the action that was selected.
+ * @param {any} not used
+ */
+ public handleAction( action: Action,
+ item: any ): void {
+ if ( action.id === this.deleteActionId ) {
+ this.onDeleteConnection( this.selectedConnections[ 0 ].getId() );
+ } else if ( action.id === this.editActionId ) {
+ this.onEditConnection( this.selectedConnections[ 0 ].getId() );
+ } else if ( action.id === this.pingActionId ) {
+ this.onPingConnection( this.selectedConnections[ 0 ].getId() );
+ }
}
- public onPingConnection(connectionName: string): void {
- this.pingConnection.emit(connectionName);
+ /**
+ * @returns {boolean} `true` if the connection row is selected in the list
+ */
+ public isSelected( connection: Connection ): boolean {
+ return this.selectedConnections.indexOf( connection ) !== -1;
}
+ /**
+ * @param {string} connectionName the name of the connection to delete
+ */
public onDeleteConnection(connectionName: string): void {
this.deleteConnection.emit(connectionName);
}
- public onSelectTag(tag: string, event: MouseEvent): void {
- event.stopPropagation();
- event.preventDefault();
- this.tagSelected.emit(tag);
+ /**
+ * @param {string} connectionName the name of the connection to edit
+ */
+ public onEditConnection( connectionName: string ): void {
+ this.editConnection.emit( connectionName );
+ }
+
+ /**
+ * @param {string} connectionName the name of the connection to ping
+ */
+ public onPingConnection( connectionName: string ): void {
+ this.pingConnection.emit( connectionName );
+ }
+
+ /**
+ * @param $event the list row selection event being handled
+ */
+ public onSelect( $event ): void {
+ if ( $event.selectedItems.length === 0 ) {
+ if ( this.selectedConnections.length !== 0 ) {
+ this.connectionDeselected.emit( $event.selectedItems[ 0 ] );
+ }
+ } else {
+ this.connectionSelected.emit( $event.selectedItems[ 0 ] );
+ }
}
}
diff --git a/ngapp/src/app/connections/connections.component.css b/ngapp/src/app/connections/connections.component.css
index b92fbe0b..dd2e8a73 100644
--- a/ngapp/src/app/connections/connections.component.css
+++ b/ngapp/src/app/connections/connections.component.css
@@ -11,6 +11,7 @@
}
.connection-list-items {
+ background-color: #fafafa;
margin-top: 10px;
height: 75vh;
overflow-y: auto;
diff --git a/ngapp/src/app/connections/connections.component.html b/ngapp/src/app/connections/connections.component.html
index e553cdfa..a9125145 100644
--- a/ngapp/src/app/connections/connections.component.html
+++ b/ngapp/src/app/connections/connections.component.html
@@ -89,12 +89,22 @@
@@ -103,5 +113,7 @@
Do you really want to delete the selected Connection?
+
+ Do you really want to delete the '{{connectionNameForDelete}}' Connection?
+
diff --git a/ngapp/src/app/connections/connections.component.spec.ts b/ngapp/src/app/connections/connections.component.spec.ts
index b5708a94..1bd7ed6c 100644
--- a/ngapp/src/app/connections/connections.component.spec.ts
+++ b/ngapp/src/app/connections/connections.component.spec.ts
@@ -3,7 +3,9 @@ import { FormsModule } from "@angular/forms";
import { HttpModule } from "@angular/http";
import { By } from "@angular/platform-browser";
import { RouterTestingModule } from "@angular/router/testing";
+import { ConnectionCardComponent } from "@connections/connections-cards/connection-card/connection-card.component";
import { ConnectionsCardsComponent } from "@connections/connections-cards/connections-cards.component";
+import { ConnectionDetailsComponent } from "@connections/connections-list/connection-details.component";
import { ConnectionsListComponent } from "@connections/connections-list/connections-list.component";
import { ConnectionsComponent } from "@connections/connections.component";
import { ConnectionService } from "@connections/shared/connection.service";
@@ -13,6 +15,7 @@ import { CoreModule } from "@core/core.module";
import { MockAppSettingsService } from "@core/mock-app-settings.service";
import { SharedModule } from "@shared/shared.module";
import { ModalModule } from "ngx-bootstrap";
+import { PatternFlyNgModule } from "patternfly-ng";
describe("ConnectionsComponent", () => {
let component: ConnectionsComponent;
@@ -20,8 +23,22 @@ describe("ConnectionsComponent", () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
- imports: [ CoreModule, FormsModule, HttpModule, ModalModule.forRoot(), RouterTestingModule, SharedModule ],
- declarations: [ ConnectionsComponent, ConnectionsListComponent, ConnectionsCardsComponent ]
+ imports: [
+ CoreModule,
+ FormsModule,
+ HttpModule,
+ ModalModule.forRoot(),
+ PatternFlyNgModule,
+ RouterTestingModule,
+ SharedModule
+ ],
+ declarations: [
+ ConnectionsComponent,
+ ConnectionDetailsComponent,
+ ConnectionsListComponent,
+ ConnectionCardComponent,
+ ConnectionsCardsComponent
+ ]
});
// use mock service
@@ -66,7 +83,7 @@ describe("ConnectionsComponent", () => {
expect(connections.length).toEqual(3);
// Check html has the same number of connection cards
- const cardDebugElems = fixture.debugElement.queryAll(By.css(".connection-card-title"));
+ const cardDebugElems = fixture.debugElement.queryAll(By.css(".object-card"));
expect(cardDebugElems).toBeDefined();
expect(cardDebugElems.length).toEqual(3);
});
diff --git a/ngapp/src/app/connections/connections.component.ts b/ngapp/src/app/connections/connections.component.ts
index d48107f0..11de65fa 100644
--- a/ngapp/src/app/connections/connections.component.ts
+++ b/ngapp/src/app/connections/connections.component.ts
@@ -17,6 +17,7 @@
import { Component, ViewChild } from "@angular/core";
import { ActivatedRoute, Router } from "@angular/router";
+import { ConnectionCardComponent } from "@connections/connections-cards/connection-card/connection-card.component";
import { Connection } from "@connections/shared/connection.model";
import { ConnectionService } from "@connections/shared/connection.service";
import { ConnectionsConstants } from "@connections/shared/connections-constants";
@@ -39,10 +40,10 @@ export class ConnectionsComponent extends AbstractPageComponent {
public readonly addConnectionLink: string = ConnectionsConstants.addConnectionPath;
+ public connectionNameForDelete: string;
private allConns: Connection[] = [];
private filteredConns: Connection[] = [];
private selectedConns: Connection[] = [];
- private connectionNameForDelete: string;
private router: Router;
private appSettingsService: AppSettingsService;
private connectionService: ConnectionService;
@@ -126,8 +127,15 @@ export class ConnectionsComponent extends AbstractPageComponent {
return this.selectedConns;
}
- public onPing( connName: string): void {
- alert("Ping connection " + connName);
+ public onEdit( connectionName: string ): void {
+ const connection = this.filterConnections().find( ( conn ) => conn.getId() === connectionName );
+ // TODO: implement onEdit
+ alert( "Edit '" + connectionName + "' connection (not yet implemented)" );
+ }
+
+ public onPing( connName: string ): void {
+ // TODO: implement onEdit
+ alert( "Ping the '" + connName + "' connection (not yet implemented)" );
}
public onSelected(connection: Connection): void {
diff --git a/ngapp/src/app/connections/connections.module.ts b/ngapp/src/app/connections/connections.module.ts
index 0e029bc3..09325dcb 100644
--- a/ngapp/src/app/connections/connections.module.ts
+++ b/ngapp/src/app/connections/connections.module.ts
@@ -19,7 +19,11 @@ import { CommonModule } from "@angular/common";
import { NgModule } from "@angular/core";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { RouterModule } from "@angular/router";
+import { AddConnectionWizardComponent } from "@connections/add-connection-wizard/add-connection-wizard.component";
+import { AddConnectionComponent } from "@connections/add-connection/add-connection.component";
+import { ConnectionCardComponent } from "@connections/connections-cards/connection-card/connection-card.component";
import { ConnectionsCardsComponent } from "@connections/connections-cards/connections-cards.component";
+import { ConnectionDetailsComponent } from "@connections/connections-list/connection-details.component";
import { ConnectionsListComponent } from "@connections/connections-list/connections-list.component";
import { ConnectionsRoutingModule } from "@connections/connections-routing.module";
import { ConnectionsComponent } from "@connections/connections.component";
@@ -28,8 +32,6 @@ import { CoreModule } from "@core/core.module";
import { LoggerService } from "@core/logger.service";
import { SharedModule } from "@shared/shared.module";
import { PatternFlyNgModule } from "patternfly-ng";
-import { AddConnectionWizardComponent } from "./add-connection-wizard/add-connection-wizard.component";
-import { AddConnectionComponent } from "./add-connection/add-connection.component";
@NgModule({
imports: [
@@ -43,11 +45,14 @@ import { AddConnectionComponent } from "./add-connection/add-connection.componen
PatternFlyNgModule
],
declarations: [
+ ConnectionDetailsComponent,
+ ConnectionCardComponent,
ConnectionsCardsComponent,
ConnectionsComponent,
ConnectionsListComponent,
AddConnectionWizardComponent,
- AddConnectionComponent
+ AddConnectionComponent,
+ ConnectionCardComponent
],
providers: [
ConnectionService,
diff --git a/ngapp/src/app/connections/shared/connection.model.ts b/ngapp/src/app/connections/shared/connection.model.ts
index 382eca29..4365dd7a 100644
--- a/ngapp/src/app/connections/shared/connection.model.ts
+++ b/ngapp/src/app/connections/shared/connection.model.ts
@@ -79,6 +79,14 @@ export class Connection implements Identifiable< string > {
return result;
}
+ /**
+ * @returns {string} the connection description
+ */
+ public get description(): string {
+ // TODO do connections have a description
+ return "This is a connection description. So if you're looking for the description you found it.";
+ }
+
/**
* @returns {string} the connection driver name (can be null)
*/
@@ -100,6 +108,14 @@ export class Connection implements Identifiable< string > {
return this.dv__jndiName;
}
+ /**
+ * @returns {string} the service catalog source name of this connection
+ */
+ public getServiceCatalogSourceName(): string {
+ // TODO: finish implenting getServiceCatalogSourceName()
+ return "TBD";
+ }
+
/**
* @returns {boolean} the jdbc status (true == jdbc)
*/
@@ -107,6 +123,13 @@ export class Connection implements Identifiable< string > {
return this.dv__type;
}
+ /**
+ * @returns {string} the connection name
+ */
+ public get name(): string {
+ return this.keng__id;
+ }
+
/**
* @returns {Map
} the connection properties (never null)
*/
diff --git a/ngapp/src/app/connections/shared/connections-constants.ts b/ngapp/src/app/connections/shared/connections-constants.ts
index 61a7d098..0f5e5b6a 100644
--- a/ngapp/src/app/connections/shared/connections-constants.ts
+++ b/ngapp/src/app/connections/shared/connections-constants.ts
@@ -23,6 +23,10 @@ export class ConnectionsConstants {
public static readonly addConnectionRoute = ConnectionsConstants.connectionsRootRoute + "/add-connection";
public static readonly addConnectionPath = ConnectionsConstants.connectionsRootPath + "/add-connection";
+ public static driverNamePropertyLabel = "Driver Name";
+ public static jndiNamePropertyLabel = "JNDI Name";
+ public static serviceCatalogSourceNameLabel = "Service Catalog Source";
+
public static readonly connectionsNavItem: NavigationItemConfig = {
title: "Connections",
iconStyleClass: "fa fa-fw fa-plug",
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
index 0ca4df21..ba073334 100644
--- 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
@@ -292,7 +292,7 @@ export class AddDataserviceWizardComponent implements OnInit, OnDestroy {
(wasSuccess) => {
// Deployment succeeded - wait for source vdb to become active
if (wasSuccess) {
- self.vdbService.pollForActiveVdb(sourceVdbName, 120, 5);
+ self.vdbService.pollForActiveVdb(sourceVdbName, 240, 5);
} else {
self.setFinalPageComplete(false);
self.sourceVdbUnderDeployment = null;
diff --git a/ngapp/src/app/dataservices/dataservices-cards/dataservice-card/dataservice-card.component.css b/ngapp/src/app/dataservices/dataservices-cards/dataservice-card/dataservice-card.component.css
index 52631080..662bae2b 100644
--- a/ngapp/src/app/dataservices/dataservices-cards/dataservice-card/dataservice-card.component.css
+++ b/ngapp/src/app/dataservices/dataservices-cards/dataservice-card/dataservice-card.component.css
@@ -1,159 +1,48 @@
-:root {
- --body-background-color: #f5f5f5;
- --body-main-color: #72767b;
- --border-color: #39a5dc;
- --border-style: double;
- --border-width: 2px;
- --hover-color: rgb(221, 234, 255);
+.card-toolbar .secondary-action[title="Publish"]:before {
+ content: "\f08e";
+ font-family: "FontAwesome";
}
-.card-pf .card-pf-body {
- margin: 0;
- padding: 0;
+.card-toolbar .secondary-action[title="Refresh"]:before {
+ content: "\f021";
+ font-family: "FontAwesome";
}
-.dataservice-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;
- margin: 0px 10px;
- height: 160px;
-}
-
-.dataservice-card .card-pf {
- margin: 0;
- padding: 0 20px;
-}
-
-.dataservice-card .card-pf:hover {
- background-color: var(--hover-color);
-}
-
-.dataservice-card .card-pf .card-pf-footer {
- background-color: #ececec;
- min-height: 20px;
- padding: 10px 0 5px 20px;
-}
-
-.dataservice-card .card-pf .card-pf-heading {
- border-bottom: none;
- margin: 0px -20px 0px -20px;
- padding: 0 20px;
-}
-
-.dataservice-card-action-disabled-icon {
- color: lightgray;
- font-size: 1.5em;
- height: 24px !important;
- margin-left: 4px;
- margin-top: 4px;
- width: 24px !important;
-}
-
-.dataservice-card-action-icon {
- color: var(--border-color);
- cursor: pointer;
- font-size: 1.5em;
- height: 24px !important;
- margin-left: 0 !important;
- margin-top: 4px;
- width: 24px !important;
-}
-
-.dataservice-card-body {
- /*background-color: #dc7039;*/
- margin: 0 -20px;
-}
-
-.dataservice-card-body-title {
- background-color: var(--body-main-color);
- color: white;
- margin: 0;
- text-align: center;
-}
-
-/*.dataservice-card-body-title {*/
- /*margin: 0 !important;*/
-/*}*/
-
-.dataservice-card-body-title-selected {
- border-left: var(--border-width) var(--border-style) var(--border-color);
- border-right: var(--border-width) var(--border-style) var(--border-color);
-}
-
-.dataservice-card-description {
- color: slategray;
- height: 50px;
- overflow: auto;
- padding: 0 5px 5px 5px;
-}
-
-.dataservice-card-icon {
- border: 2px solid var(--border-color);
- border-radius: 60px;
- display: inline-block;
- padding: 0.1em 0.2em;
-}
-
-.dataservice-card-selected {
-}
-
-.dataservice-card-selected .card-pf .card-pf-heading {
- border-top: var(--border-width) var(--border-style) var(--border-color);
- border-right: var(--border-width) var(--border-style) var(--border-color);
- border-left: var(--border-width) var(--border-style) var(--border-color);
- padding: 0px 20px;
-}
-
-.dataservice-card-selected .card-pf .card-pf-footer {
- border-right: var(--border-width) var(--border-style) var(--border-color);
- border-left: var(--border-width) var(--border-style) var(--border-color);
- border-bottom: var(--border-width) var(--border-style) var(--border-color);
-}
-
-.dataservice-card-title {
- font-size: 16px;
- font-weight: bold;
- margin: 10px 0 !important;
+.object-card .list-pf {
+ border: none;
}
-.dataservice-card-toolbar {
- border-top: 1px solid lightgrey;
- border-bottom: 1px solid lightgrey;
- margin-bottom: 6px;
- margin-top: 0;
+.object-card-selected .list-pf {
+ border: none;
}
-.dataservice-card-toolbar-kebab {
- margin-left: 0 !important;
- margin-right: 4px;
+.object-card .list-pf-item {
+ border: none;
}
-.list-pf {
+.object-card-selected .list-pf-item {
border: none;
}
-.list-pf-item {
- border: none;
+.object-card .list-pf-item:hover {
+ background-color: transparent;
}
-.list-pf-item:hover {
+.object-card-selected .list-pf-item:hover {
background-color: transparent;
}
.view-name {
cursor: pointer;
- color: var(--body-main-color);
+ color: var(--card-body-color);
}
.views-details {
- background-color: var(--body-background-color);
+ background-color: var(--card-body-background-color);
border-bottom: 2px solid lightgrey;
}
.views-details-selected {
- border-left: var(--border-width) var(--border-style) var(--border-color);
- border-right: var(--border-width) var(--border-style) var(--border-color);
+ border-left: var(--card-border-width) var(--card-border-style) var(--card-border-color);
+ border-right: var(--card-border-width) var(--card-border-style) var(--card-border-color);
}
diff --git a/ngapp/src/app/dataservices/dataservices-cards/dataservice-card/dataservice-card.component.html b/ngapp/src/app/dataservices/dataservices-cards/dataservice-card/dataservice-card.component.html
index 9e4e1a73..ea791e35 100644
--- a/ngapp/src/app/dataservices/dataservices-cards/dataservice-card/dataservice-card.component.html
+++ b/ngapp/src/app/dataservices/dataservices-cards/dataservice-card/dataservice-card.component.html
@@ -2,151 +2,103 @@
[headerTemplate]="tableHeaderTemplate"
(onActionSelect)="onShowDetails( $event )"
(click)="onSelect()"
- [class]="isSelected() ? 'dataservice-card dataservice-card-selected' : 'dataservice-card'">
+ [class]="isSelected() ? 'object-card-selected' : 'object-card'">
-