Merge pull request #36 from OpenTOSCA/feature/enrichment-ui

saatkamp · web-flow · commit 60518a541db1 · 2019-07-31T08:34:41.000+02:00
Feature/enrichment ui
diff --git a/src/app/application-management/application-management.module.ts b/src/app/application-management/application-management.module.ts
@@ -25,9 +25,25 @@ import { ApplicationDetailResolverService } from './application-detail/applicati
 import { ApplicationOverviewComponent } from './application-overview/application-overview.component';
 import { RouterModule } from '@angular/router';
 import {
-    AccordionModule, ButtonModule, CardModule, ConfirmationService, ConfirmDialogModule, DataTableModule, DialogModule,
-    DropdownModule, FieldsetModule, FileUploadModule, InputTextareaModule, PanelModule, ProgressBarModule,
-    ProgressSpinnerModule, ScrollPanelModule, SharedModule, TabViewModule, ToolbarModule, TooltipModule
+    AccordionModule,
+    ButtonModule,
+    CardModule,
+    CheckboxModule,
+    ConfirmationService,
+    ConfirmDialogModule,
+    DataTableModule,
+    DialogModule,
+    FieldsetModule,
+    FileUploadModule,
+    ProgressBarModule,
+    SharedModule,
+    TabViewModule,
+    ScrollPanelModule,
+    ToolbarModule,
+    TooltipModule,
+    ProgressSpinnerModule,
+    InputTextareaModule,
+    PanelModule, DropdownModule,
 } from 'primeng/primeng';
 import { FormsModule } from '@angular/forms';
 import { NgSpinKitModule } from 'ng-spin-kit';
@@ -51,6 +67,7 @@ import { ApplicationInstanceBoundaryDefinitionInterfacesListComponent } from './
         SharedModule,
         TooltipModule,
         CardModule,
+        CheckboxModule,
         ButtonModule,
         PanelModule,
         ScrollPanelModule,
diff --git a/src/app/application-management/application-upload/application-upload.component.html b/src/app/application-management/application-upload/application-upload.component.html
@@ -18,23 +18,23 @@
     </p-header>
     <p-tabView>
         <p-tabPanel header="Upload local File">
-            <p-fileUpload name="file" [url]="postURL" chooseLabel="Select File"
+            <p-fileUpload #form name="file" [url]="postURL" customUpload="true" chooseLabel="Select File"
+                          (uploadHandler)="handleUpload($event, form)"
                           (onSelect)="onSelect()"
-                          (onProgress)="onUploadProgress($event.originalEvent)"
                           (onUpload)="onUploadFinished($event)"
-                          (onError)="onUploadError($event)"
                           (onClear)="onClear()">
                 <ng-template let-file pTemplate="file">
                     <div>
                         <p>Name: {{ file.name }}</p>
                         <p>Size: {{file.size | humanizeBytes}}</p>
                         <p>Last Modified: {{file.lastModifiedDate}}</p>
+                        <p-checkbox [(ngModel)]="applyEnrichment" label="Apply Management Feature Enrichment"
+                                    binary="true">
+                        </p-checkbox>
                     </div>
                 </ng-template>
                 <ng-template pTemplate="content">
                     <div *ngIf="!fileSelected">Please select a file</div>
-                    <p *ngIf="showUploadProgressLabel">Uploaded {{bytesUploaded | humanizeBytes}} of {{bytesTotal |
-                        humanizeBytes}}</p>
                     <div *ngIf="deploymentInProgress">
                         <div class="p-grid">
                             <div class="p-col-1">
@@ -77,6 +77,13 @@
                             (validityChange)='nameValidityChange($event)'>
                     </opentosca-debounced-validated-input>
                 </div>
+                <div class="p-col-9">
+                    <p-checkbox *ngIf="(this.tempData.validURL && this.tempData.validName)"
+                                (onChange)="applyEnrichmentChange()"
+                                [(ngModel)]="applyEnrichment" label="Apply Management Feature Enrichment"
+                                binary="true">
+                    </p-checkbox>
+                </div>
             </div>
             <button type="button"
                     pButton
diff --git a/src/app/application-management/application-upload/application-upload.component.ts b/src/app/application-management/application-upload/application-upload.component.ts
@@ -17,16 +17,16 @@ import { ConfigurationService } from '../../configuration/configuration.service'
 import { ApplicationManagementService } from '../../core/service/application-management.service';
 import { NgRedux } from '@angular-redux/store';
 import { Router } from '@angular/router';
-import { LoggerService } from '../../core/service/logger.service';
 import { AppState } from '../../store/app-state.model';
 import { DeploymentCompletionService } from '../../core/service/deployment-completion.service';
 import { RepositoryService } from '../../core/service/repository.service';
 import { Path } from '../../core/path';
 import { GrowlActions } from '../../core/growl/growl-actions';
 import { CsarUploadReference } from '../../core/model/csar-upload-request.model';
-import { HttpClient, HttpResponse } from '@angular/common/http';
+import { HttpClient, HttpHeaders, HttpResponse } from '@angular/common/http';
 import { Observable, of } from 'rxjs';
 import {MarketplaceApplication} from '../../core/model/marketplace-application.model';
+import { LoggerService } from '../../core/service/logger.service';
 
 @Component({
     selector: 'opentosca-application-upload',
@@ -41,20 +41,20 @@ export class ApplicationUploadComponent implements OnInit {
     @Output() completionRequest = new EventEmitter();
     public deploymentInProgress = false;
     public fileSelected = false;
-    public showUploadProgressLabel = false;
     public postURL = new Path(this.adminService.getContainerUrl())
         .append('csars')
         .toString();
-    public bytesUploaded = 0;
-    public bytesTotal = 0;
+
+    public applyEnrichment = false;
+
     public linkToWineryResourceForCompletion: string;
     public appToComplete: MarketplaceApplication;
     public showCompletionDialog = false;
     public initializeCompletionComponent = false;
 
     // temporary data derived from the user input for the url upload
     public tempData = {
-        cur: new CsarUploadReference(null, null),
+        cur: new CsarUploadReference(null, null, null),
         validURL: false,
         validName: false
     };
@@ -97,22 +97,36 @@ export class ApplicationUploadComponent implements OnInit {
     onClear(): void {
         this.fileSelected = false;
         this.deploymentInProgress = false;
+        this.applyEnrichment = false;
     }
 
     /**
-     * Handler for upload progress of file upload component.
+     * Handler for file upload.
+     * @param event: upload event triggered when upload button is clicked
      */
-    onUploadProgress(event: ProgressEvent): void {
-        this.bytesUploaded = event.loaded;
-        this.bytesTotal = event.total;
-        this.deploymentInProgress = this.bytesUploaded === this.bytesTotal;
+    handleUpload(event: any, form: any): void {
+        this.deploymentInProgress = true;
+        const fileToUpload = event.files[0];
+        const formData: FormData = new FormData();
+        formData.append('enrichment', JSON.stringify(this.applyEnrichment));
+        formData.append('file', fileToUpload, fileToUpload.name);
+        const headers = new HttpHeaders();
+        this.handleCSARUpload(formData, headers).subscribe(
+            data => this.onUploadFinished(data),
+            error => this.onUploadError(event, error, form)
+        );
+    }
+
+    handleCSARUpload(formData, headers): Observable<Object> {
+        return this.http.post(this.postURL, formData, {headers: headers});
     }
 
     /**
      * Handler for upload finished event of file upload component.
      * This handler is called when the XHR request returns, i.e., when deployment in container is done.
      */
     onUploadFinished(event): void {
+        this.deploymentInProgress = false;
         // This is called when XHR request returns
         this.ngRedux.dispatch(GrowlActions.addGrowl(
             {
@@ -129,14 +143,16 @@ export class ApplicationUploadComponent implements OnInit {
      * Handler for emitted errors of file upload component.
      * If topology completion is required this is caught within this handler.
      */
-    onUploadError(event): void {
-        switch (event.error.status) {
+    onUploadError(event, error, form): void {
+        form.clear();
+        this.resetUploadStats();
+        const fileExtension = '.csar';
+        switch (error.status) {
             case 406:
-                const response = event.error.error;
-                this.linkToWineryResourceForCompletion = response['Location'];
+                this.linkToWineryResourceForCompletion = error.error.Location;
                 const fileName = event.files[0].name;
-                const csarName = fileName.substr(0, fileName.length - 5);
-                const csarID = fileName.lastIndexOf('.csar');
+                const csarName = fileName.substr(0, fileName.length - fileExtension.length);
+                const csarID = fileName.lastIndexOf(fileExtension);
                 this.deploymentService.getAppFromCompletionHandlerWinery(this.linkToWineryResourceForCompletion, csarID,
                     csarName).then(app => {
                         this.appToComplete = app;
@@ -175,6 +191,7 @@ export class ApplicationUploadComponent implements OnInit {
         const postURL = new Path(this.adminService.getContainerUrl())
             .append('csars')
             .toString();
+
         this.repositoryManagementService.installApplication(this.tempData.cur, postURL)
             .toPromise()
             .then(() => {
@@ -212,6 +229,7 @@ export class ApplicationUploadComponent implements OnInit {
      */
     resetUploadStats(): void {
         this.deploymentInProgress = false;
+        this.applyEnrichment = false;
         this.tempData.cur.url = null;
         this.tempData.cur.name = null;
         this.tempData.validURL = false;
@@ -226,6 +244,10 @@ export class ApplicationUploadComponent implements OnInit {
         this.tempData.cur.name = name;
     }
 
+    applyEnrichmentChange(): void {
+        this.tempData.cur.enrich = JSON.stringify(this.applyEnrichment);
+    }
+
     urlValidityChange(validity: boolean): void {
         this.tempData.validURL = validity;
     }
@@ -275,11 +297,10 @@ export class ApplicationUploadComponent implements OnInit {
                 detail: `The completion process was successful, app "${app.displayName}" is now getting installed in container.`
             }
         ));
-        // Todo: Container should check itself if the app already exists and respond appropriately
         const postURL = new Path(this.adminService.getContainerUrl())
             .append('csars')
             .toString();
-        const completedApp = new CsarUploadReference(app.csarURL, app.csarName);
+        const completedApp = new CsarUploadReference(app.csarURL, app.csarName, JSON.stringify(this.applyEnrichment));
         this.repoService.installApplication(completedApp, postURL)
             .subscribe(() => {
                 this.ngRedux.dispatch(GrowlActions.addGrowl(
diff --git a/src/app/core/model/csar-upload-request.model.ts b/src/app/core/model/csar-upload-request.model.ts
@@ -13,6 +13,6 @@
  */
 
 export class CsarUploadReference {
-    constructor(public url: string, public name: string) {
+    constructor(public url: string, public name: string, public enrich: string) {
     }
 }
diff --git a/src/app/core/service/repository.service.ts b/src/app/core/service/repository.service.ts
@@ -70,7 +70,6 @@ export class RepositoryService {
     }
 
     installApplication(app: CsarUploadReference, containerUrl: string): Observable<any> {
-        console.log(app);
         const httpOptions = {
             headers: new HttpHeaders({
                 'Content-Type': 'application/json'
diff --git a/src/app/repository/repository.component.html b/src/app/repository/repository.component.html
@@ -56,7 +56,7 @@
                         class="ui-button-info" icon="fas fa-download"
                         pTooltip="Download as CSAR..." showDelay="500" tooltipPosition="top"></button>
                 &nbsp;
-                <button pButton type="button" (click)="install(app)"
+                <button pButton type="button" (click)="openEnrichmentDialog(app)"
                         class="ui-button-info" icon="fas fa-plus-circle"
                         pTooltip="Install in OpenTOSCA Container" showDelay="500" tooltipPosition="top"
                         *ngIf="!app.inContainer && !app.isInstalling"></button>
@@ -73,6 +73,30 @@
         </p-card>
     </div>
 </div>
+
+<div>
+    <p-dialog styleClass="modal-scrollable" [modal]="true" [draggable]="false" [resizable]="false" [width]="450"
+              [(visible)]="showEnrichmentDialog">
+        <p-header>
+            Management Feature Enrichment Dialog
+        </p-header>
+        <p style="height: 75px">
+            Do you want to enrich the CSAR with additional management features?
+        </p>
+        <p-checkbox [(ngModel)]="applyEnrichment" label="Apply Management Feature Enrichment"
+                    binary="true">
+        </p-checkbox>
+        <p-footer>
+            <button type="button"
+                    pButton
+                    (click)="install(this.currentlySelectedApp)"
+                    label="Install"
+                    icon="fa fa-upload">
+            </button>
+        </p-footer>
+    </p-dialog>
+</div>
+
 <opentosca-deployment-completion *ngIf="initializeCompletionComponent"
                                  [(visible)]="showCompletionDialog"
                                  [appToComplete]="appToComplete"
diff --git a/src/app/repository/repository.component.ts b/src/app/repository/repository.component.ts
@@ -41,14 +41,20 @@ export class RepositoryComponent implements OnInit {
     selectedRepository: Item;
 
     apps: Array<MarketplaceApplication> = [];
+    currentlySelectedApp: MarketplaceApplication;
 
     searchTerm: string;
 
-    public linkToWineryResourceForCompletion: string;
-    public appToComplete: MarketplaceApplication;
+
+    public applyEnrichment = false;
+    public showEnrichmentDialog = false;
+
     public showCompletionDialog = false;
     public initializeCompletionComponent = false;
 
+    public linkToWineryResourceForCompletion: string;
+    public appToComplete: MarketplaceApplication;
+
     constructor(private ngRedux: NgRedux<AppState>, private repositoryService: RepositoryService,
                 private configurationService: ConfigurationService, private applicationService: ApplicationManagementService,
                 private logger: LoggerService, private adminService: ConfigurationService, private repoService: RepositoryService ) {
@@ -113,10 +119,16 @@ export class RepositoryComponent implements OnInit {
         this.searchTerm = searchTerm;
     }
 
+    openEnrichmentDialog(app): void {
+        this.showEnrichmentDialog = true;
+        this.currentlySelectedApp = app;
+    }
+
     install(app: MarketplaceApplication): void {
+        this.showEnrichmentDialog = false;
         app.isInstalling = true;
         const url = new Path(this.configurationService.getContainerUrl()).append('csars').toString();
-        const app$ = new CsarUploadReference(app.csarURL, app.id);
+        const app$ = new CsarUploadReference(app.csarURL, app.id, JSON.stringify(this.applyEnrichment));
         this.repositoryService.installApplication(app$, url)
             .subscribe(() => {
                 app.isInstalling = false;
@@ -160,7 +172,7 @@ export class RepositoryComponent implements OnInit {
         const postURL = new Path(this.adminService.getContainerUrl())
             .append('csars')
             .toString();
-        const completedApp = new CsarUploadReference(app.csarURL, app.csarName);
+        const completedApp = new CsarUploadReference(app.csarURL, app.csarName, JSON.stringify(this.applyEnrichment));
         this.repoService.installApplication(completedApp, postURL)
             .subscribe(() => {
                 this.ngRedux.dispatch(GrowlActions.addGrowl(
diff --git a/src/app/repository/repository.module.ts b/src/app/repository/repository.module.ts
@@ -19,12 +19,17 @@ import { RepositoryComponent } from './repository.component';
 import { RouterModule } from '@angular/router';
 import { CoreModule } from '../core/core.module';
 import { NgSpinKitModule } from 'ng-spin-kit';
-import { ButtonModule, CardModule, DropdownModule, ScrollPanelModule, ToolbarModule, TooltipModule } from 'primeng/primeng';
+import {
+    ButtonModule, CardModule, CheckboxModule, ConfirmDialogModule, DialogModule,
+    DropdownModule, ScrollPanelModule, ToolbarModule,
+    TooltipModule
+} from 'primeng/primeng';
 import { FormsModule } from '@angular/forms';
 
 @NgModule({
     imports: [
         CommonModule,
+        CheckboxModule,
         FormsModule,
         RouterModule,
         TooltipModule,
@@ -33,9 +38,12 @@ import { FormsModule } from '@angular/forms';
         ScrollPanelModule,
         ToolbarModule,
         DropdownModule,
+        DialogModule,
         NgSpinKitModule,
         CoreModule,
-        RepositoryRoutingModule
+        RepositoryRoutingModule,
+        CheckboxModule,
+        ConfirmDialogModule
     ],
     declarations: [RepositoryComponent],
     providers: [ConfigurationService]

Original file line number	Diff line number	Diff line change
`@@ -13,6 +13,6 @@`
`13`	`13`	`*/`
`14`	`14`
`15`	`15`	`export class CsarUploadReference {`
`16`		`- constructor(public url: string, public name: string) {`
	`16`	`+ constructor(public url: string, public name: string, public enrich: string) {`
`17`	`17`	`}`
`18`	`18`	`}`
Original file line number	Diff line number	Diff line change
`@@ -70,7 +70,6 @@ export class RepositoryService {`
`70`	`70`	`}`
`71`	`71`
`72`	`72`	`installApplication(app: CsarUploadReference, containerUrl: string): Observable<any> {`
`73`		`- console.log(app);`
`74`	`73`	`const httpOptions = {`
`75`	`74`	`headers: new HttpHeaders({`
`76`	`75`	`'Content-Type': 'application/json'`