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

   1 import { Component, ElementRef, OnDestroy, OnInit, ViewChild, AfterViewInit } 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, AfterViewInit {
  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     isMetadataValid = false;
  50     versionPattern = '^(\\d+\\.)?(\\d+\\.)?(\\*|\\d+)$';
  51     metadataClasses = 'nav-item nav-link active';
  52     private cbaPackage: CBAPackage = new CBAPackage();
  53     dataTarget: any = '';
  54     ngUnsubscribe = new Subject();
  55     private designerState: any;
  56     packageId: any;
  57
  58     constructor(
  59         private route: ActivatedRoute,
  60         private configurationDashboardService: ConfigurationDashboardService,
  61         private packageCreationStore: PackageCreationStore,
  62         private packageCreationService: PackageCreationService,
  63         private packageCreationUtils: PackageCreationUtils,
  64         private router: Router,
  65         private designerStore: DesignerStore,
  66         private toastService: ToastrService,
  67         private ngxService: NgxUiLoaderService,
  68         private packageCreationExtractionService: PackageCreationExtractionService,
  69         private activatedRoute: ActivatedRoute,
  70     ) {
  71         super();
  72
  73
  74     }
  75
  76     ngOnInit() {
  77         this.ngxService.start();
  78         this.vlbDefinition.topology_template = new TemplateTopology();
  79         this.packageCreationStore.state$
  80             .pipe(distinctUntilChanged((a: any, b: any) => JSON.stringify(a) === JSON.stringify(b)),
  81                 takeUntil(this.ngUnsubscribe))
  82             .subscribe(
  83                 cbaPackage => {
  84                     this.cbaPackage = cbaPackage;
  85                 });
  86         this.designerStore.state$.pipe(
  87             distinctUntilChanged((a: any, b: any) => JSON.stringify(a) === JSON.stringify(b)),
  88             takeUntil(this.ngUnsubscribe))
  89             .subscribe(state => {
  90                 this.designerState = state;
  91                 this.vlbDefinition.topology_template.content = this.packageCreationUtils.transformToJson(state.template);
  92             });
  93         this.elementRef.nativeElement.focus();
  94         this.refreshCurrentPackage();
  95         const regexp = RegExp(this.versionPattern);
  96         if (this.cbaPackage && this.cbaPackage.metaData && this.cbaPackage.metaData.description
  97             && this.cbaPackage.metaData.name && this.cbaPackage.metaData.version &&
  98             regexp.test(this.cbaPackage.metaData.version)) {
  99             if (!this.metadataClasses.includes('complete')) {
 100                 this.metadataClasses += ' complete';
 101             }
 102         } else {
 103             this.metadataClasses = this.metadataClasses.replace('complete', '');
 104             this.isSaveEnabled = false;
 105         }
 106         this.activatedRoute.paramMap.subscribe(res => {
 107             this.packageId = res.get('id');
 108         });
 109
 110
 111     }
 112
 113     ngAfterViewInit() {
 114         if (this.metadataTabComponent) {
 115             this.metadataTabComponent.metadataValid$
 116                 .pipe(takeUntil(this.ngUnsubscribe))
 117                 .subscribe(valid => {
 118                     this.isMetadataValid = valid;
 119                 });
 120         }
 121     }
 122
 123     private refreshCurrentPackage(id?) {
 124         this.id = this.route.snapshot.paramMap.get('id');
 125         console.log(this.id);
 126         id = id ? id : this.id;
 127         this.configurationDashboardService.getPagedPackages(id).subscribe(
 128             (bluePrintDetailModels) => {
 129                 if (bluePrintDetailModels) {
 130                     this.viewedPackage = bluePrintDetailModels[0];
 131                     this.downloadCBAPackage(bluePrintDetailModels);
 132                     this.packageCreationStore.clear();
 133                 }
 134                 this.ngxService.stop();
 135             }, err => {
 136                 this.ngxService.stop();
 137             },
 138             () => {
 139                 //  this.ngxService.stop();
 140             });
 141     }
 142
 143     private downloadCBAPackage(bluePrintDetailModels: BluePrintDetailModel) {
 144         this.configurationDashboardService.downloadResource(
 145             this.viewedPackage.artifactName + '/' + this.viewedPackage.artifactVersion).subscribe(response => {
 146                 const blob = new Blob([response], { type: 'application/octet-stream' });
 147                 this.currentBlob = blob;
 148                 this.packageCreationExtractionService.extractBlobToStore(blob);
 149             }, err => {
 150                 console.log(err);
 151                 this.ngxService.stop();
 152             },
 153                 () => {
 154                     this.ngxService.stop();
 155                 });
 156     }
 157
 158     editBluePrint() {
 159         this.ngxService.start();
 160         this.configurationDashboardService.deletePackage(this.packageId).subscribe(res => {
 161             this.formTreeData();
 162             this.saveBluePrintToDataBase();
 163
 164         });
 165     }
 166
 167     private formTreeData() {
 168         FilesContent.clear();
 169         let packageCreationModes: PackageCreationModes;
 170         this.cbaPackage = PackageCreationModes.mapModeType(this.cbaPackage);
 171         this.cbaPackage.metaData = PackageCreationModes.setEntryPoint(this.cbaPackage.metaData);
 172         packageCreationModes = PackageCreationBuilder.getCreationMode(this.cbaPackage);
 173         packageCreationModes.execute(this.cbaPackage, this.packageCreationUtils);
 174         this.filesData.push(this.folder.TREE_DATA);
 175     }
 176
 177     saveMetaData() {
 178         this.metadataTabComponent.saveMetaDataToStore();
 179     }
 180
 181     saveBluePrintToDataBase() {
 182         this.create();
 183         this.zipFile.generateAsync({ type: 'blob' })
 184             .then(blob => {
 185                 this.packageCreationService.savePackage(blob).subscribe(
 186                     bluePrintDetailModels => {
 187                         if (bluePrintDetailModels) {
 188                             const id = bluePrintDetailModels.toString().split('id')[1].split(':')[1].split('"')[1];
 189                             this.toastService.success('Package Updated Successfully ');
 190                             this.isSaveEnabled = false;
 191                             this.router.navigate(['/packages/package/' + id]);
 192                             this.refreshCurrentPackage(id);
 193                         }
 194                     }, error => {
 195                         this.toastService.error('Error occured when editing ' + error.message);
 196                         console.log('Error -' + error.message);
 197                     }, () => {
 198                         this.ngxService.stop();
 199                     });
 200             });
 201     }
 202
 203     deletePackage() {
 204         this.configurationDashboardService.deletePackage(this.id).subscribe(res => {
 205             console.log('Deleted');
 206             console.log(res);
 207             this.isSaveEnabled = false;
 208             this.router.navigate(['/packages']);
 209         }, err => {
 210             console.log(err);
 211         });
 212     }
 213
 214     create() {
 215         this.zipFile = new JSZip();
 216         FilesContent.getMapOfFilesNamesAndContent().forEach((value, key) => {
 217             this.zipFile.folder(key.split('/')[0]);
 218             this.zipFile.file(key, value);
 219         });
 220
 221     }
 222
 223     discardChanges() {
 224         this.refreshCurrentPackage();
 225     }
 226
 227     downloadPackage(artifactName: string, artifactVersion: string) {
 228         this.ngxService.start();
 229         this.configurationDashboardService.downloadResource(artifactName + '/' + artifactVersion).subscribe(response => {
 230             const blob = new Blob([response], { type: 'application/octet-stream' });
 231             saveAs(blob, artifactName + '-' + artifactVersion + '-CBA.zip');
 232
 233         }, err => { }, () => {
 234             this.ngxService.stop();
 235         });
 236     }
 237
 238     deployCurrentPackage() {
 239         if (!this.isMetadataValid) {
 240             this.toastService.error('Please fill in all required metadata fields (Name, Version, Tags) before deploying.');
 241             return;
 242         }
 243         this.ngxService.start();
 244         this.formTreeData();
 245         this.deployPackage();
 246
 247     }
 248
 249     goToDesignerMode(id) {
 250         this.router.navigate(['/packages/designer', id, { actionName: this.customActionName }]);
 251     }
 252
 253     public dropped(files: NgxFileDropEntry[]) {
 254
 255     }
 256
 257     public fileOver(event) {
 258         console.log(event);
 259     }
 260
 261     public fileLeave(event) {
 262         console.log(event);
 263     }
 264
 265     textChanged($event: {}) {
 266         this.cbaPackage.templateTopology.node_templates = this.designerState.template.node_templates;
 267         this.cbaPackage.templateTopology.workflows = this.designerState.template.workflows;
 268         this.cbaPackage.templateTopology.content = this.vlbDefinition.topology_template.content;
 269     }
 270
 271     enrichBluePrint() {
 272         this.ngxService.start();
 273         this.packageCreationStore.addTopologyTemplate(this.cbaPackage.templateTopology);
 274         this.formTreeData();
 275         this.enrichPackage();
 276     }
 277
 278
 279     private enrichPackage() {
 280         this.create();
 281         this.zipFile.generateAsync({ type: 'blob' })
 282             .then(blob => {
 283                 this.packageCreationService.enrichPackage(blob).subscribe(response => {
 284                     console.log('success');
 285                     const blobInfo = new Blob([response], { type: 'application/octet-stream' });
 286                     this.currentBlob = blobInfo;
 287                     this.packageCreationStore.clear();
 288                     this.packageCreationExtractionService.extractBlobToStore(this.currentBlob);
 289                     this.isSaveEnabled = true;
 290                     this.toastService.success('Enriched Done Successfully');
 291                 }, err => {
 292                     this.handleError(err);
 293                 }, () => {
 294                     this.ngxService.stop();
 295                 });
 296             }, error => {
 297                 this.toastService.error('Error occured during enrichment process' + error.message);
 298                 console.error('Error -' + error.message);
 299             }, () => {
 300                 this.ngxService.stop();
 301             });
 302     }
 303
 304     private deployPackage() {
 305         this.create();
 306         this.zipFile.generateAsync({ type: 'blob' })
 307             .then(blob => {
 308                 this.packageCreationService.deploy(blob).subscribe(response => {
 309                     this.toastService.info('Package Deployed Successfully ');
 310                     const id = response.toString().split('id')[1].split(':')[1].split('"')[1];
 311                     this.isSaveEnabled = false;
 312                     this.router.navigate(['/packages/package/' + id]);
 313                 }, err => {
 314                     this.handleError(err);
 315                 }, () => {
 316                     this.ngxService.stop();
 317                 });
 318             }, error => {
 319                 this.handleError(error);
 320             }, () => {
 321                 this.ngxService.stop();
 322             });
 323     }
 324
 325     clickEvent() {
 326         this.isSaveEnabled = true;
 327     }
 328
 329     canDeactivate(): boolean {
 330         return this.isSaveEnabled;
 331     }
 332
 333     ngOnDestroy() {
 334         this.ngUnsubscribe.next();
 335         this.ngUnsubscribe.complete();
 336     }
 337
 338     checkSkipTypesOfAction() {
 339         console.log(this.cbaPackage);
 340         if (this.cbaPackage.templateTopology && this.cbaPackage.templateTopology.node_templates
 341             && this.cbaPackage.templateTopology.workflows) {
 342             this.goToDesignerMode(this.id);
 343         } else {
 344             this.dataTarget = '#exampleModalLong';
 345         }
 346     }
 347
 348     handleError(error) {
 349         let errorMessage = '';
 350         if (error.error instanceof ErrorEvent) {
 351             // client-side error
 352             errorMessage = `Error: ${error.error.message}`;
 353         } else {
 354             // server-side error
 355             errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
 356         }
 357         this.toastService.error('Error occured when deploying ' + errorMessage);
 358         console.log('Error -' + errorMessage);
 359         this.ngxService.stop();
 360         this.toastService.error('Error occured when deploying' + error.message);
 361         return throwError(errorMessage);
 362     }
 363 }