gerrit.onap Code Review - ccsdk/cds.git/blob

   1 import { Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
   2 import { ActivatedRoute, Router } from '@angular/router';
   3 import { BluePrintDetailModel } from '../model/BluePrint.detail.model';
   4 import { PackageCreationStore } from '../package-creation/package-creation.store';
   5 import { FilesContent, FolderNodeElement } from '../package-creation/mapping-models/metadata/MetaDataTab.model';
   6 import { MetadataTabComponent } from '../package-creation/metadata-tab/metadata-tab.component';
   7 import * as JSZip from 'jszip';
   8 import { ConfigurationDashboardService } from './configuration-dashboard.service';
   9 import { TemplateTopology, CBADefinition } from '../package-creation/mapping-models/definitions/CBADefinition';
  10 import { CBAPackage } from '../package-creation/mapping-models/CBAPacakge.model';
  11 import { PackageCreationUtils } from '../package-creation/package-creation.utils';
  12 import { PackageCreationModes } from '../package-creation/creationModes/PackageCreationModes';
  13 import { PackageCreationBuilder } from '../package-creation/creationModes/PackageCreationBuilder';
  14 import { saveAs } from 'file-saver';
  15 import { DesignerStore } from '../designer/designer.store';
  16 import { ToastrService } from 'ngx-toastr';
  17 import { NgxFileDropEntry } from 'ngx-file-drop';
  18 import { PackageCreationService } from '../package-creation/package-creation.service';
  19 import { ComponentCanDeactivate } from '../../../../common/core/canDactivate/ComponentCanDeactivate';
  20 import { PackageCreationExtractionService } from '../package-creation/package-creation-extraction.service';
  21 import { distinctUntilChanged, takeUntil } from 'rxjs/operators';
  22 import { Subject, throwError } from 'rxjs';
  23 import { NgxUiLoaderService } from 'ngx-ui-loader';
  24
  25 @Component({
  26     selector: 'app-configuration-dashboard',
  27     templateUrl: './configuration-dashboard.component.html',
  28     styleUrls: ['./configuration-dashboard.component.css'],
  29 })
  30 export class ConfigurationDashboardComponent extends ComponentCanDeactivate implements OnInit, OnDestroy {
  31     viewedPackage: BluePrintDetailModel = new BluePrintDetailModel();
  32     @ViewChild(MetadataTabComponent, { static: false })
  33     metadataTabComponent: MetadataTabComponent;
  34     public customActionName = '';
  35
  36     entryDefinitionKeys: string[] = ['template_tags', 'user-groups',
  37         'author-email', 'template_version', 'template_name', 'template_author', 'template_description'];
  38     @ViewChild('nameit', { static: true })
  39     elementRef: ElementRef;
  40     uploadedFiles = [];
  41     zipFile: JSZip = new JSZip();
  42     filesData: any = [];
  43     folder: FolderNodeElement = new FolderNodeElement();
  44     id: any;
  45
  46     currentBlob = new Blob();
  47     vlbDefinition: CBADefinition = new CBADefinition();
  48     isSaveEnabled = false;
  49     versionPattern = '^(\\d+\\.)?(\\d+\\.)?(\\*|\\d+)$';
  50     metadataClasses = 'nav-item nav-link active';
  51     private cbaPackage: CBAPackage = new CBAPackage();
  52     dataTarget: any = '';
  53     ngUnsubscribe = new Subject();
  54     private designerState: any;
  55
  56     constructor(
  57         private route: ActivatedRoute,
  58         private configurationDashboardService: ConfigurationDashboardService,
  59         private packageCreationStore: PackageCreationStore,
  60         private packageCreationService: PackageCreationService,
  61         private packageCreationUtils: PackageCreationUtils,
  62         private router: Router,
  63         private designerStore: DesignerStore,
  64         private toastService: ToastrService,
  65         private ngxService: NgxUiLoaderService,
  66         private packageCreationExtractionService: PackageCreationExtractionService
  67     ) {
  68         super();
  69
  70
  71     }
  72
  73     ngOnInit() {
  74         this.vlbDefinition.topology_template = new TemplateTopology();
  75         this.packageCreationStore.state$
  76             .pipe(distinctUntilChanged((a: any, b: any) => JSON.stringify(a) === JSON.stringify(b)),
  77                 takeUntil(this.ngUnsubscribe))
  78             .subscribe(
  79                 cbaPackage => {
  80                     this.cbaPackage = cbaPackage;
  81                 });
  82         this.designerStore.state$.pipe(
  83             distinctUntilChanged((a: any, b: any) => JSON.stringify(a) === JSON.stringify(b)),
  84             takeUntil(this.ngUnsubscribe))
  85             .subscribe(state => {
  86                 this.designerState = state;
  87                 this.vlbDefinition.topology_template.content = this.packageCreationUtils.transformToJson(state.template);
  88             });
  89         this.elementRef.nativeElement.focus();
  90         this.refreshCurrentPackage();
  91         const regexp = RegExp(this.versionPattern);
  92         if (this.cbaPackage && this.cbaPackage.metaData && this.cbaPackage.metaData.description
  93             && this.cbaPackage.metaData.name && this.cbaPackage.metaData.version &&
  94             regexp.test(this.cbaPackage.metaData.version)) {
  95             if (!this.metadataClasses.includes('complete')) {
  96                 this.metadataClasses += ' complete';
  97             }
  98         } else {
  99             this.metadataClasses = this.metadataClasses.replace('complete', '');
 100             this.isSaveEnabled = false;
 101         }
 102
 103
 104     }
 105
 106     private refreshCurrentPackage(id?) {
 107         this.id = this.route.snapshot.paramMap.get('id');
 108         console.log(this.id);
 109         id = id ? id : this.id;
 110         this.configurationDashboardService.getPagedPackages(id).subscribe(
 111             (bluePrintDetailModels) => {
 112                 if (bluePrintDetailModels) {
 113                     this.viewedPackage = bluePrintDetailModels[0];
 114                     this.downloadCBAPackage(bluePrintDetailModels);
 115                     this.packageCreationStore.clear();
 116                 }
 117             });
 118     }
 119
 120     private downloadCBAPackage(bluePrintDetailModels: BluePrintDetailModel) {
 121         this.configurationDashboardService.downloadResource(
 122             this.viewedPackage.artifactName + '/' + this.viewedPackage.artifactVersion).subscribe(response => {
 123                 const blob = new Blob([response], { type: 'application/octet-stream' });
 124                 this.currentBlob = blob;
 125                 this.packageCreationExtractionService.extractBlobToStore(blob);
 126             });
 127     }
 128
 129     editBluePrint() {
 130         this.ngxService.start();
 131         this.configurationDashboardService.deletePackage(this.viewedPackage.id).subscribe(res => {
 132             this.formTreeData();
 133             this.saveBluePrintToDataBase();
 134
 135         });
 136     }
 137
 138     private formTreeData() {
 139         FilesContent.clear();
 140         let packageCreationModes: PackageCreationModes;
 141         this.cbaPackage = PackageCreationModes.mapModeType(this.cbaPackage);
 142         this.cbaPackage.metaData = PackageCreationModes.setEntryPoint(this.cbaPackage.metaData);
 143         packageCreationModes = PackageCreationBuilder.getCreationMode(this.cbaPackage);
 144         packageCreationModes.execute(this.cbaPackage, this.packageCreationUtils);
 145         this.filesData.push(this.folder.TREE_DATA);
 146     }
 147
 148     saveMetaData() {
 149         this.metadataTabComponent.saveMetaDataToStore();
 150     }
 151
 152     saveBluePrintToDataBase() {
 153         this.create();
 154         this.zipFile.generateAsync({ type: 'blob' })
 155             .then(blob => {
 156                 this.packageCreationService.savePackage(blob).subscribe(
 157                     bluePrintDetailModels => {
 158                         if (bluePrintDetailModels) {
 159                             const id = bluePrintDetailModels.toString().split('id')[1].split(':')[1].split('"')[1];
 160                             this.toastService.info('package updated successfully ');
 161                             this.isSaveEnabled = false;
 162                             this.router.navigate(['/packages/package/' + id]);
 163                             this.refreshCurrentPackage(id);
 164                         }
 165                     }, error => {
 166                         this.toastService.error('error happened when editing ' + error.message);
 167                         console.log('Error -' + error.message);
 168                     }, () => {
 169                         this.ngxService.stop();
 170                     });
 171             });
 172     }
 173
 174     deletePackage() {
 175         this.configurationDashboardService.deletePackage(this.id).subscribe(res => {
 176             console.log('Deleted');
 177             console.log(res);
 178             this.isSaveEnabled = false;
 179             this.router.navigate(['/packages']);
 180         }, err => {
 181             console.log(err);
 182         });
 183     }
 184
 185     create() {
 186         this.zipFile = new JSZip();
 187         FilesContent.getMapOfFilesNamesAndContent().forEach((value, key) => {
 188             this.zipFile.folder(key.split('/')[0]);
 189             this.zipFile.file(key, value);
 190         });
 191
 192     }
 193
 194     discardChanges() {
 195         this.refreshCurrentPackage();
 196     }
 197
 198     downloadPackage(artifactName: string, artifactVersion: string) {
 199         this.ngxService.start();
 200         this.configurationDashboardService.downloadResource(artifactName + '/' + artifactVersion).subscribe(response => {
 201             const blob = new Blob([response], { type: 'application/octet-stream' });
 202             saveAs(blob, artifactName + '-' + artifactVersion + '-CBA.zip');
 203             this.ngxService.stop();
 204         });
 205     }
 206
 207     deployCurrentPackage() {
 208         this.ngxService.start();
 209         this.formTreeData();
 210         this.deployPackage();
 211
 212     }
 213
 214     goToDesignerMode(id) {
 215         this.router.navigate(['/packages/designer', id, { actionName: this.customActionName }]);
 216     }
 217
 218     public dropped(files: NgxFileDropEntry[]) {
 219
 220     }
 221
 222     public fileOver(event) {
 223         console.log(event);
 224     }
 225
 226     public fileLeave(event) {
 227         console.log(event);
 228     }
 229
 230     textChanged($event: {}) {
 231         this.cbaPackage.templateTopology.node_templates = this.designerState.template.node_templates;
 232         this.cbaPackage.templateTopology.workflows = this.designerState.template.workflows;
 233         this.cbaPackage.templateTopology.content = this.vlbDefinition.topology_template.content;
 234     }
 235
 236     enrichBluePrint() {
 237         this.ngxService.start();
 238         this.packageCreationStore.addTopologyTemplate(this.cbaPackage.templateTopology);
 239         this.formTreeData();
 240         this.enrichPackage();
 241         this.designerStore.clear();
 242         this.packageCreationStore.clear();
 243     }
 244
 245
 246     private enrichPackage() {
 247         this.create();
 248         this.zipFile.generateAsync({ type: 'blob' })
 249             .then(blob => {
 250                 this.packageCreationService.enrichPackage(blob).subscribe(response => {
 251                     console.log('success');
 252                     const blobInfo = new Blob([response], { type: 'application/octet-stream' });
 253                     this.currentBlob = blobInfo;
 254                     this.packageCreationStore.clear();
 255                     this.packageCreationExtractionService.extractBlobToStore(this.currentBlob);
 256                     this.isSaveEnabled = true;
 257                     this.toastService.info('enriched successfully ');
 258                 });
 259             }, error => {
 260                 this.toastService.error('error happened when enrich ' + error.message);
 261                 console.error('Error -' + error.message);
 262             }, () => {
 263                 this.ngxService.stop();
 264             });
 265     }
 266
 267     private deployPackage() {
 268         this.create();
 269         this.zipFile.generateAsync({ type: 'blob' })
 270             .then(blob => {
 271                 this.packageCreationService.deploy(blob).subscribe(response => {
 272                     this.toastService.info('deployed successfully ');
 273                     const id = response.toString().split('id')[1].split(':')[1].split('"')[1];
 274                     this.isSaveEnabled = false;
 275                     this.router.navigate(['/packages/package/' + id]);
 276                 });
 277             }, error => {
 278                 this.handleError(error);
 279             }, () => {
 280                 this.ngxService.stop();
 281             });
 282     }
 283
 284     clickEvent() {
 285         this.isSaveEnabled = true;
 286     }
 287
 288     canDeactivate(): boolean {
 289         return this.isSaveEnabled;
 290     }
 291
 292     ngOnDestroy() {
 293         this.ngUnsubscribe.next();
 294         this.ngUnsubscribe.complete();
 295     }
 296
 297     checkSkipTypesOfAction() {
 298         console.log(this.cbaPackage);
 299         if (this.cbaPackage.templateTopology && this.cbaPackage.templateTopology.node_templates
 300             && this.cbaPackage.templateTopology.workflows) {
 301             this.goToDesignerMode(this.id);
 302         } else {
 303             this.dataTarget = '#exampleModalLong';
 304         }
 305     }
 306
 307     handleError(error) {
 308         let errorMessage = '';
 309         if (error.error instanceof ErrorEvent) {
 310             // client-side error
 311             errorMessage = `Error: ${error.error.message}`;
 312         } else {
 313             // server-side error
 314             errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
 315         }
 316         this.toastService.error('error happened when deploying ' + errorMessage);
 317         console.log('Error -' + errorMessage);
 318         return throwError(errorMessage);
 319     }
 320 }
 321