Improvements to service deployment

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

@@ -20,6 +20,7 @@ import { ActivatedRoute, Router } from "@angular/router";
 import { Connection } from "@connections/shared/connection.model";
 import { ConnectionService } from "@connections/shared/connection.service";
 import { ConnectionsConstants } from "@connections/shared/connections-constants";
+import { AppSettingsService } from "@core/app-settings.service";
 import { LoggerService } from "@core/logger.service";
 import { ArrayUtils } from "@core/utils/array-utils";
 import { AbstractPageComponent } from "@shared/abstract-page.component";
@@ -43,16 +44,19 @@ export class ConnectionsComponent extends AbstractPageComponent {
   private selectedConns: Connection[] = [];
   private connectionNameForDelete: string;
   private router: Router;
+  private appSettingsService: AppSettingsService;
   private connectionService: ConnectionService;
   private filter: IdFilter = new IdFilter();
   private layout: LayoutType = LayoutType.CARD;
   private sortDirection: SortDirection = SortDirection.ASC;
 
   @ViewChild(ConfirmDeleteComponent) private confirmDeleteDialog: ConfirmDeleteComponent;
 
-  constructor(router: Router, route: ActivatedRoute, connectionService: ConnectionService, logger: LoggerService) {
+  constructor(router: Router, route: ActivatedRoute, appSettingsService: AppSettingsService,
+              connectionService: ConnectionService, logger: LoggerService) {
     super(route, logger);
     this.router = router;
+    this.appSettingsService = appSettingsService;
     this.connectionService = connectionService;
   }
 
@@ -77,14 +81,14 @@ export class ConnectionsComponent extends AbstractPageComponent {
    * @returns {boolean} true if connections are being represented by cards
    */
   public get isCardLayout(): boolean {
-    return this.layout === LayoutType.CARD;
+    return this.appSettingsService.connectionsPageLayout === LayoutType.CARD;
   }
 
   /**
    * @returns {boolean} true if connections are being represented by items in a list
    */
   public get isListLayout(): boolean {
-    return this.layout === LayoutType.LIST;
+    return this.appSettingsService.connectionsPageLayout === LayoutType.LIST;
   }
 
   /**
@@ -174,11 +178,11 @@ export class ConnectionsComponent extends AbstractPageComponent {
   }
 
   public setListLayout(): void {
-    this.layout = LayoutType.LIST;
+    this.appSettingsService.connectionsPageLayout = LayoutType.LIST;
   }
 
   public setCardLayout(): void {
-    this.layout = LayoutType.CARD;
+    this.appSettingsService.connectionsPageLayout = LayoutType.CARD;
   }
 
   /**

ngapp/src/app/core/app-settings.service.ts

@@ -16,6 +16,7 @@
  */
 
 import { Injectable } from "@angular/core";
+import { LayoutType } from "@shared/layout-type.enum";
 
 @Injectable()
 export class AppSettingsService {
@@ -38,6 +39,10 @@ export class AppSettingsService {
   // Map to maintain the target git repository properties
   private readonly gitRepoProperties: Map<string, string>;
 
+  // page layouts
+  private svcPageLayout: LayoutType = LayoutType.CARD;
+  private connPageLayout: LayoutType = LayoutType.CARD;
+
   constructor() {
     // TODO: The git repository properties will be picked up based on the Openshift install location
     this.gitRepoProperties = new Map<string, string>();
@@ -81,4 +86,36 @@ export class AppSettingsService {
     return this.gitRepoProperties.get(propertyKey);
   }
 
+  /*
+   * Get the LayoutType for the connections summary page
+   * @returns {LayoutType} the connections page layout
+   */
+  public get connectionsPageLayout( ): LayoutType {
+    return this.connPageLayout;
+  }
+
+  /*
+   * Sets the LayoutType for the connections summary page
+   * @param {LayoutType} layout the connections page layout
+   */
+  public set connectionsPageLayout( layout: LayoutType ) {
+    this.connPageLayout = layout;
+  }
+
+  /*
+   * Get the LayoutType for the dataservices summary page
+   * @returns {LayoutType} the dataservices page layout
+   */
+  public get dataservicesPageLayout( ): LayoutType {
+    return this.svcPageLayout;
+  }
+
+  /*
+   * Sets the LayoutType for the dataservices summary page
+   * @param {LayoutType} layout the dataservices page layout
+   */
+  public set dataservicesPageLayout( layout: LayoutType ) {
+    this.svcPageLayout = layout;
+  }
+
 }

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

@@ -68,7 +68,7 @@ <h3 class="blank-slate-pf-main-action">Creation in progress</h3>
           <div class="wizard-pf-success-icon"><span class="glyphicon glyphicon-ok-circle"></span></div>
           <h3 class="blank-slate-pf-main-action">Creation was successful</h3>
           <p class="blank-slate-pf-secondary-action">The dataservice was created successfully. Click on the button to see all dataservices.</p>
-          <a class="btn btn-lg btn-primary" [routerLink]="[dataserviceSummaryLink]">View All Dataservices</a>
+          <button class="btn btn-lg btn-primary" type="button" (click)="onDeployDataservice()">View All Dataservices</button>
         </div>
         <!-- Create Failed -->
         <div class="wizard-pf-complete blank-slate-pf" *ngIf="createComplete && !createSuccessful">

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

@@ -241,6 +241,9 @@ export class AddDataserviceWizardComponent implements OnInit {
 
     const sourceVdbName = this.tableSelector.getSelectedTables()[0].getConnection().getId() + VdbsConstants.SOURCE_VDB_SUFFIX;
 
+    this.step3bConfig.nextEnabled = false;
+    this.step3bConfig.previousEnabled = false;
+
     // Before polling, subscribe to get status event
     this.deploymentChangeSubscription = this.vdbService.deploymentStatus.subscribe((status) => {
       this.onSourceVdbDeploymentStateChanged(status);
@@ -258,6 +261,7 @@ export class AddDataserviceWizardComponent implements OnInit {
             self.createComplete = true;
             self.createSuccessful = false;
             self.step3bConfig.nextEnabled = false;
+            self.step3bConfig.previousEnabled = true;
             self.vdbService.deploymentStatus.unsubscribe();
           }
         },
@@ -266,11 +270,32 @@ export class AddDataserviceWizardComponent implements OnInit {
           self.createComplete = true;
           self.createSuccessful = false;
           self.step3bConfig.nextEnabled = false;
+          self.step3bConfig.previousEnabled = true;
           self.vdbService.deploymentStatus.unsubscribe();
         }
       );
   }
 
+  public onDeployDataservice(): void {
+    // Start the deployment and then redirect to the dataservice summary page
+    this.dataserviceService
+      .deployDataservice(this.dataserviceName)
+      .subscribe(
+        (wasSuccess) => {
+          // Nothing to do
+        },
+        (error) => {
+          // Nothing to do
+        }
+      );
+
+    const link: string[] = [ DataservicesConstants.dataservicesRootPath ];
+    this.logger.log("[AddDataserviceWizardComponent] Navigating to: %o", link);
+    this.router.navigate(link).then(() => {
+      // nothing to do
+    });
+  }
+
   /*
    * Listens for the source VDB deployment completion.  If the source VDB is active, proceed with
    * creation of the Dataservice
@@ -296,6 +321,7 @@ export class AddDataserviceWizardComponent implements OnInit {
           this.createComplete = true;
           this.createSuccessful = false;
           this.step3bConfig.nextEnabled = false;
+          this.step3bConfig.previousEnabled = true;
         }
       }
     }
@@ -400,17 +426,20 @@ export class AddDataserviceWizardComponent implements OnInit {
             self.createComplete = true;
             self.createSuccessful = true;
             self.step3bConfig.nextEnabled = false;
+            this.step3bConfig.previousEnabled = true;
           } else {
             self.createComplete = true;
             self.createSuccessful = false;
             self.step3bConfig.nextEnabled = false;
+            this.step3bConfig.previousEnabled = true;
           }
         },
         (error) => {
           self.logger.error("[AddDataserviceWizardComponent] Error: %o", error);
           self.createComplete = true;
           self.createSuccessful = false;
           self.step3bConfig.nextEnabled = false;
+          this.step3bConfig.previousEnabled = true;
         }
       );
 

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

@@ -9,6 +9,12 @@
 
 .dataservice-card-action-icon {
   cursor: pointer;
+  margin-left: 7px;
+}
+
+.dataservice-card-action-disabled-icon {
+  color: lightgray;
+  margin-left: 7px;
 }
 
 .dataservice-card-icon {

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

@@ -6,11 +6,20 @@
         <div class="card-pf-body">
           <!-- title -->
           <h2 class="dataservice-card-title">
-            <span class="fa fa-fw fa-table dataservice-card-icon"></span>
+            <span class="pull-left pficon-ok" *ngIf="dataservice.serviceDeploymentActive"></span>
+            <span class="pull-left pficon-error-circle-o" *ngIf="dataservice.serviceDeploymentFailed"></span>
+            <span class="pull-left pficon-warning-triangle-o" *ngIf="dataservice.serviceDeploymentInactive"></span>
+            <span class="pull-left pficon-unknown" *ngIf="dataservice.serviceDeploymentNotDeployed"></span>
+            <span class="pull-left fa fa-spinner fa-pulse" *ngIf="dataservice.serviceDeploymentLoading"></span>
+            <span class="pull-left fa fa-refresh dataservice-card-action-icon" (click)="onActivateDataservice(dataservice.getId())"></span>
+            <span class="fa fa-table dataservice-card-icon"></span>
             <span><a [routerLink]="[dataservice.getId()]">{{ dataservice.getId() }}</a></span>
-            <span class="pull-right fa fa-fw fa-close dataservice-card-action-icon" style="color:darkred;" (click)="onDeleteDataservice(dataservice.getId())"></span>
-            <span class="pull-right fa fa-fw fa-arrow-up dataservice-card-action-icon" (click)="onPublishDataservice(dataservice.getId())"></span>
-            <span class="pull-right fa fa-fw fa-play dataservice-card-action-icon" style="color:darkgreen;" (click)="onTestDataservice(dataservice.getId())"></span>
+            <span *ngIf="!dataservice.serviceDeploymentLoading" class="pull-right pficon-delete dataservice-card-action-icon" style="color:darkred;" (click)="onDeleteDataservice(dataservice.getId())"></span>
+            <span *ngIf="dataservice.serviceDeploymentLoading" class="pull-right pficon-delete dataservice-card-action-disabled-icon"></span>
+            <span *ngIf="!dataservice.serviceDeploymentLoading" class="pull-right pficon-export dataservice-card-action-icon" (click)="onPublishDataservice(dataservice.getId())"></span>
+            <span *ngIf="dataservice.serviceDeploymentLoading" class="pull-right pficon-export dataservice-card-action-disabled-icon"></span>
+            <span *ngIf="dataservice.serviceDeploymentActive" class="pull-right fa fa-list-alt dataservice-card-action-icon" (click)="onTestDataservice(dataservice.getId())"></span>
+            <span *ngIf="!dataservice.serviceDeploymentActive" class="pull-right fa fa-list-alt dataservice-card-action-disabled-icon"></span>
           </h2>
           <hr/>
           <div>

ngapp/src/app/dataservices/dataservices-cards/dataservices-cards.component.ts

@@ -31,6 +31,7 @@ export class DataservicesCardsComponent {
   @Output() public dataserviceSelected: EventEmitter<Dataservice> = new EventEmitter<Dataservice>();
   @Output() public dataserviceDeselected: EventEmitter<Dataservice> = new EventEmitter<Dataservice>();
   @Output() public tagSelected: EventEmitter<string> = new EventEmitter<string>();
+  @Output() public activateDataservice: EventEmitter<string> = new EventEmitter<string>();
   @Output() public testDataservice: EventEmitter<string> = new EventEmitter<string>();
   @Output() public publishDataservice: EventEmitter<string> = new EventEmitter<string>();
   @Output() public deleteDataservice: EventEmitter<string> = new EventEmitter<string>();
@@ -54,6 +55,10 @@ export class DataservicesCardsComponent {
     return this.selectedDataservices.indexOf(dataservice) !== -1;
   }
 
+  public onActivateDataservice(dataserviceName: string): void {
+    this.activateDataservice.emit(dataserviceName);
+  }
+
   public onTestDataservice(dataserviceName: string): void {
     this.testDataservice.emit(dataserviceName);
   }

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

@@ -1,3 +1,8 @@
+.dataservice-list-state-icon {
+  margin-right: 7px;
+  font-size: 1.7em;
+}
+
 .list-view-pf-main-info {
   padding-bottom: 5px;
   padding-top: 5px;

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

@@ -2,6 +2,11 @@
   <div class="list-group-item list-view-pf-stacked" *ngFor="let dataservice of dataservices" [class.active]="isSelected(dataservice)" (click)="toggleDataserviceSelected(dataservice)">
     <div class="list-view-pf-main-info">
       <div class="list-view-pf-left">
+        <span class="pull-left pficon-ok dataservice-list-state-icon" *ngIf="dataservice.serviceDeploymentActive"></span>
+        <span class="pull-left pficon-error-circle-o dataservice-list-state-icon" *ngIf="dataservice.serviceDeploymentFailed"></span>
+        <span class="pull-left pficon-warning-triangle-o dataservice-list-state-icon" *ngIf="dataservice.serviceDeploymentInactive"></span>
+        <span class="pull-left pficon-unknown dataservice-list-state-icon" *ngIf="dataservice.serviceDeploymentNotDeployed"></span>
+        <span class="pull-left fa fa-spinner fa-pulse dataservice-list-state-icon" *ngIf="dataservice.serviceDeploymentLoading"></span>
         <span class="fa fa-table list-view-pf-icon-sm"></span>
       </div>
       <div class="list-view-pf-body">
@@ -28,9 +33,14 @@
         </div>
       </div>
       <div class="list-view-pf-actions">
-        <button i18n="@@dataservicesList.test" class="btn btn-default" type="button" (click)="onTestDataservice(dataservice.getId())">Test</button>
-        <button i18n="@@dataservicesList.publish" class="btn btn-default" type="button" (click)="onPublishDataservice(dataservice.getId())">Publish</button>
-        <button i18n="@@dataservicesList.delete" class="btn btn-danger" type="button" (click)="onDeleteDataservice(dataservice.getId())">Delete</button>
+        <button i18n="@@dataservicesList.activate" class="btn btn-default" type="button"
+                (click)="onActivateDataservice(dataservice.getId())">Activate</button>
+        <button i18n="@@dataservicesList.test" class="btn btn-default" type="button"
+                (click)="onTestDataservice(dataservice.getId())" [disabled]="!dataservice.serviceDeploymentActive">Test</button>
+        <button i18n="@@dataservicesList.publish" class="btn btn-default" type="button"
+                (click)="onPublishDataservice(dataservice.getId())" [disabled]="dataservice.serviceDeploymentLoading">Publish</button>
+        <button i18n="@@dataservicesList.delete" class="btn btn-danger" type="button"
+                (click)="onDeleteDataservice(dataservice.getId())" [disabled]="dataservice.serviceDeploymentLoading">Delete</button>
       </div>
     </div>
   </div>

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

@@ -32,6 +32,7 @@ export class DataservicesListComponent {
   @Output() public dataserviceSelected: EventEmitter<Dataservice> = new EventEmitter<Dataservice>();
   @Output() public dataserviceDeselected: EventEmitter<Dataservice> = new EventEmitter<Dataservice>();
   @Output() public tagSelected: EventEmitter<string> = new EventEmitter<string>();
+  @Output() public activateDataservice: EventEmitter<string> = new EventEmitter<string>();
   @Output() public testDataservice: EventEmitter<string> = new EventEmitter<string>();
   @Output() public publishDataservice: EventEmitter<string> = new EventEmitter<string>();
   @Output() public deleteDataservice: EventEmitter<string> = new EventEmitter<string>();
@@ -57,6 +58,10 @@ export class DataservicesListComponent {
     return this.selectedDataservices.indexOf(dataservice) !== -1;
   }
 
+  public onActivateDataservice(dataserviceName: string): void {
+    this.activateDataservice.emit(dataserviceName);
+  }
+
   public onTestDataservice(dataserviceName: string): void {
     this.testDataservice.emit(dataserviceName);
   }

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

@@ -98,10 +98,12 @@ <h1 class="card-pf-title">
         </pfng-inline-notification>
 
         <app-dataservices-list *ngIf="isListLayout" [dataservices]="filteredDataservices" [selectedDataservices]="selectedDataservices"
-                               (testDataservice)="onTest($event)" (publishDataservice)="onPublish($event)" (deleteDataservice)="onDelete($event)"
+                               (activateDataservice)="onActivate($event)" (testDataservice)="onTest($event)"
+                               (publishDataservice)="onPublish($event)" (deleteDataservice)="onDelete($event)"
                                (dataserviceSelected)="onSelected($event)" (dataserviceDeselected)="onDeselected($event)"></app-dataservices-list>
         <app-dataservices-cards *ngIf="isCardLayout" [dataservices]="filteredDataservices" [selectedDataservices]="selectedDataservices"
-                                (testDataservice)="onTest($event)" (publishDataservice)="onPublish($event)" (deleteDataservice)="onDelete($event)"
+                                (activateDataservice)="onActivate($event)" (testDataservice)="onTest($event)"
+                                (publishDataservice)="onPublish($event)" (deleteDataservice)="onDelete($event)"
                                 (dataserviceSelected)="onSelected($event)" (dataserviceDeselected)="onDeselected($event)"></app-dataservices-cards>
       </div>
 

ngapp/src/app/dataservices/dataservices.component.spec.ts

@@ -3,6 +3,7 @@ import { FormsModule } from "@angular/forms";
 import { HttpModule } from "@angular/http";
 import { By } from "@angular/platform-browser";
 import { RouterTestingModule } from "@angular/router/testing";
+import { AppSettingsService } from "@core/app-settings.service";
 import { CoreModule } from "@core/core.module";
 import { DataservicesCardsComponent } from "@dataservices/dataservices-cards/dataservices-cards.component";
 import { DataservicesListComponent } from "@dataservices/dataservices-list/dataservices-list.component";
@@ -24,7 +25,8 @@ describe("DataservicesComponent", () => {
       imports: [ CoreModule, FormsModule, HttpModule, ModalModule.forRoot(), PatternFlyNgModule, RouterTestingModule, SharedModule ],
       declarations: [ DataservicesComponent, DataservicesListComponent, DataservicesCardsComponent ],
       providers: [
-        { provide: VdbService, useClass: MockVdbService },
+        AppSettingsService,
+        { provide: VdbService, useClass: MockVdbService }
       ]
     });