X-Git-Url: https://gerrit.onap.org/r/gitweb?a=blobdiff_plain;ds=sidebyside;f=cds-ui%2Fdesigner-client%2Fsrc%2Fapp%2Fmodules%2Ffeature-modules%2Fpackages%2Fconfiguration-dashboard%2Fconfiguration-dashboard.component.ts;h=b3894fe9498c267b6614e31d7c894476fc2030e4;hb=981573b5b00cdb47cd9f2bbd002735ccc0c362fc;hp=71afa155da89e82932c48db12f5efc1a5ed8ddc6;hpb=dbf58e985a064a8a499ce2db4643b3b5c602d625;p=ccsdk%2Fcds.git diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts index 71afa155d..b3894fe94 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts @@ -1,36 +1,41 @@ -import {Component, ElementRef, OnInit, ViewChild} from '@angular/core'; -import {ActivatedRoute, Router} from '@angular/router'; -import {BluePrintDetailModel} from '../model/BluePrint.detail.model'; -import {PackageCreationStore} from '../package-creation/package-creation.store'; -import {FilesContent, FolderNodeElement, MetaDataTabModel} from '../package-creation/mapping-models/metadata/MetaDataTab.model'; -import {MetadataTabComponent} from '../package-creation/metadata-tab/metadata-tab.component'; +import { Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core'; +import { ActivatedRoute, Router } from '@angular/router'; +import { BluePrintDetailModel } from '../model/BluePrint.detail.model'; +import { PackageCreationStore } from '../package-creation/package-creation.store'; +import { FilesContent, FolderNodeElement } from '../package-creation/mapping-models/metadata/MetaDataTab.model'; +import { MetadataTabComponent } from '../package-creation/metadata-tab/metadata-tab.component'; import * as JSZip from 'jszip'; -import {ConfigurationDashboardService} from './configuration-dashboard.service'; -import {TemplateTopology, VlbDefinition} from '../package-creation/mapping-models/definitions/VlbDefinition'; -import {CBAPackage, DslDefinition} from '../package-creation/mapping-models/CBAPacakge.model'; -import {PackageCreationUtils} from '../package-creation/package-creation.utils'; -import {PackageCreationModes} from '../package-creation/creationModes/PackageCreationModes'; -import {PackageCreationBuilder} from '../package-creation/creationModes/PackageCreationBuilder'; -import {saveAs} from 'file-saver'; -import {DesignerStore} from '../designer/designer.store'; -import {ToastrService} from 'ngx-toastr'; -import {NgxFileDropEntry} from 'ngx-file-drop'; -import {PackageCreationService} from '../package-creation/package-creation.service'; +import { ConfigurationDashboardService } from './configuration-dashboard.service'; +import { TemplateTopology, CBADefinition } from '../package-creation/mapping-models/definitions/CBADefinition'; +import { CBAPackage } from '../package-creation/mapping-models/CBAPacakge.model'; +import { PackageCreationUtils } from '../package-creation/package-creation.utils'; +import { PackageCreationModes } from '../package-creation/creationModes/PackageCreationModes'; +import { PackageCreationBuilder } from '../package-creation/creationModes/PackageCreationBuilder'; +import { saveAs } from 'file-saver'; +import { DesignerStore } from '../designer/designer.store'; +import { ToastrService } from 'ngx-toastr'; +import { NgxFileDropEntry } from 'ngx-file-drop'; +import { PackageCreationService } from '../package-creation/package-creation.service'; +import { ComponentCanDeactivate } from '../../../../common/core/canDactivate/ComponentCanDeactivate'; +import { PackageCreationExtractionService } from '../package-creation/package-creation-extraction.service'; +import { distinctUntilChanged, takeUntil } from 'rxjs/operators'; +import { Subject, throwError } from 'rxjs'; +import { NgxUiLoaderService } from 'ngx-ui-loader'; @Component({ selector: 'app-configuration-dashboard', templateUrl: './configuration-dashboard.component.html', styleUrls: ['./configuration-dashboard.component.css'], }) -export class ConfigurationDashboardComponent implements OnInit { +export class ConfigurationDashboardComponent extends ComponentCanDeactivate implements OnInit, OnDestroy { viewedPackage: BluePrintDetailModel = new BluePrintDetailModel(); - @ViewChild(MetadataTabComponent, {static: false}) + @ViewChild(MetadataTabComponent, { static: false }) metadataTabComponent: MetadataTabComponent; public customActionName = ''; entryDefinitionKeys: string[] = ['template_tags', 'user-groups', 'author-email', 'template_version', 'template_name', 'template_author', 'template_description']; - @ViewChild('nameit', {static: true}) + @ViewChild('nameit', { static: true }) elementRef: ElementRef; uploadedFiles = []; zipFile: JSZip = new JSZip(); @@ -39,11 +44,15 @@ export class ConfigurationDashboardComponent implements OnInit { id: any; currentBlob = new Blob(); - vlbDefinition: VlbDefinition = new VlbDefinition(); + vlbDefinition: CBADefinition = new CBADefinition(); isSaveEnabled = false; versionPattern = '^(\\d+\\.)?(\\d+\\.)?(\\*|\\d+)$'; metadataClasses = 'nav-item nav-link active'; private cbaPackage: CBAPackage = new CBAPackage(); + dataTarget: any = ''; + ngUnsubscribe = new Subject(); + private designerState: any; + packageId: any; constructor( private route: ActivatedRoute, @@ -53,17 +62,33 @@ export class ConfigurationDashboardComponent implements OnInit { private packageCreationUtils: PackageCreationUtils, private router: Router, private designerStore: DesignerStore, - private toastService: ToastrService + private toastService: ToastrService, + private ngxService: NgxUiLoaderService, + private packageCreationExtractionService: PackageCreationExtractionService, + private activatedRoute: ActivatedRoute, ) { - this.packageCreationStore.state$.subscribe( - cbaPackage => { - this.cbaPackage = cbaPackage; - }); + super(); + + } ngOnInit() { + this.ngxService.start(); this.vlbDefinition.topology_template = new TemplateTopology(); - + this.packageCreationStore.state$ + .pipe(distinctUntilChanged((a: any, b: any) => JSON.stringify(a) === JSON.stringify(b)), + takeUntil(this.ngUnsubscribe)) + .subscribe( + cbaPackage => { + this.cbaPackage = cbaPackage; + }); + this.designerStore.state$.pipe( + distinctUntilChanged((a: any, b: any) => JSON.stringify(a) === JSON.stringify(b)), + takeUntil(this.ngUnsubscribe)) + .subscribe(state => { + this.designerState = state; + this.vlbDefinition.topology_template.content = this.packageCreationUtils.transformToJson(state.template); + }); this.elementRef.nativeElement.focus(); this.refreshCurrentPackage(); const regexp = RegExp(this.versionPattern); @@ -77,99 +102,49 @@ export class ConfigurationDashboardComponent implements OnInit { this.metadataClasses = this.metadataClasses.replace('complete', ''); this.isSaveEnabled = false; } + this.activatedRoute.paramMap.subscribe(res => { + this.packageId = res.get('id'); + }); } - private refreshCurrentPackage() { + private refreshCurrentPackage(id?) { this.id = this.route.snapshot.paramMap.get('id'); - this.configurationDashboardService.getPagedPackages(this.id).subscribe( + console.log(this.id); + id = id ? id : this.id; + this.configurationDashboardService.getPagedPackages(id).subscribe( (bluePrintDetailModels) => { if (bluePrintDetailModels) { this.viewedPackage = bluePrintDetailModels[0]; this.downloadCBAPackage(bluePrintDetailModels); this.packageCreationStore.clear(); } + }, err => { }, + () => { + // this.ngxService.stop(); }); } private downloadCBAPackage(bluePrintDetailModels: BluePrintDetailModel) { this.configurationDashboardService.downloadResource( - bluePrintDetailModels[0].artifactName + '/' + bluePrintDetailModels[0].artifactVersion).subscribe(response => { - const blob = new Blob([response], {type: 'application/octet-stream'}); - this.currentBlob = blob; - this.extractBlobToStore(blob, bluePrintDetailModels); - }); - } - - private extractBlobToStore(blob: Blob, bluePrintDetailModels: BluePrintDetailModel) { - this.zipFile.loadAsync(blob).then((zip) => { - Object.keys(zip.files).forEach((filename) => { - zip.files[filename].async('string').then((fileData) => { - console.log(filename); - if (fileData) { - if (filename.includes('Scripts/')) { - this.setScripts(filename, fileData); - } else if (filename.includes('Templates/')) { - if (filename.includes('-mapping.')) { - this.setMapping(filename, fileData); - } else if (filename.includes('-template.')) { - this.setTemplates(filename, fileData); - } - - } else if (filename.includes('Definitions/')) { - this.setImports(filename, fileData, bluePrintDetailModels); - } else if (filename.includes('TOSCA-Metadata/')) { - const metaDataTabInfo: MetaDataTabModel = this.getMetaDataTabInfo(fileData); - this.setMetaData(metaDataTabInfo, bluePrintDetailModels[0]); - } - } + this.viewedPackage.artifactName + '/' + this.viewedPackage.artifactVersion).subscribe(response => { + const blob = new Blob([response], { type: 'application/octet-stream' }); + this.currentBlob = blob; + this.packageCreationExtractionService.extractBlobToStore(blob); + }, err => { }, + () => { + this.ngxService.stop(); }); - }); - }); - } - - setScripts(filename: string, fileData: any) { - this.packageCreationStore.addScripts(filename, fileData); - } - - setImports(filename: string, fileData: any, bluePrintDetailModels: BluePrintDetailModel) { - if (filename.includes(bluePrintDetailModels[0].artifactName)) { - let definition = new VlbDefinition(); - definition = fileData as VlbDefinition; - definition = JSON.parse(fileData); - const dslDefinition = new DslDefinition(); - dslDefinition.content = this.packageCreationUtils.transformToJson(definition.dsl_definitions); - const mapOfCustomKeys = new Map(); - for (const metadataKey in definition.metadata) { - if (!this.entryDefinitionKeys.includes(metadataKey + '')) { - mapOfCustomKeys.set(metadataKey + '', definition.metadata[metadataKey + '']); - } - } - this.packageCreationStore.changeDslDefinition(dslDefinition); - this.packageCreationStore.setCustomKeys(mapOfCustomKeys); - if (definition.topology_template && definition.topology_template.content) { - this.designerStore.saveSourceContent(definition.topology_template.content); - } - - } - this.packageCreationStore.addDefinition(filename, fileData); - - } - - setTemplates(filename: string, fileData: any) { - this.packageCreationStore.addTemplate(filename, fileData); - } - - setMapping(fileName: string, fileData: string) { - this.packageCreationStore.addMapping(fileName, fileData); } editBluePrint() { - if (this.cbaPackage) { + this.ngxService.start(); + this.configurationDashboardService.deletePackage(this.packageId).subscribe(res => { this.formTreeData(); this.saveBluePrintToDataBase(); - } + + }); } private formTreeData() { @@ -182,42 +157,28 @@ export class ConfigurationDashboardComponent implements OnInit { this.filesData.push(this.folder.TREE_DATA); } - setMetaData(metaDataObject: MetaDataTabModel, bluePrintDetailModel: BluePrintDetailModel) { - metaDataObject.description = bluePrintDetailModel.artifactDescription; - this.packageCreationStore.changeMetaData(metaDataObject); - - } - saveMetaData() { this.metadataTabComponent.saveMetaDataToStore(); - - } - - getMetaDataTabInfo(fileData: string) { - const metaDataTabModel = new MetaDataTabModel(); - const arrayOfLines = fileData.split('\n'); - metaDataTabModel.entryFileName = arrayOfLines[3].split(':')[1]; - metaDataTabModel.name = arrayOfLines[4].split(':')[1]; - metaDataTabModel.version = arrayOfLines[5].split(':')[1]; - metaDataTabModel.mode = arrayOfLines[6].split(':')[1]; - metaDataTabModel.templateTags = new Set(arrayOfLines[7].split(':')[1].split(',')); - return metaDataTabModel; } saveBluePrintToDataBase() { this.create(); - this.zipFile.generateAsync({type: 'blob'}) + this.zipFile.generateAsync({ type: 'blob' }) .then(blob => { this.packageCreationService.savePackage(blob).subscribe( bluePrintDetailModels => { if (bluePrintDetailModels) { const id = bluePrintDetailModels.toString().split('id')[1].split(':')[1].split('"')[1]; - this.toastService.info('package updated successfully '); + this.toastService.info('Package Updated Successfully '); + this.isSaveEnabled = false; this.router.navigate(['/packages/package/' + id]); + this.refreshCurrentPackage(id); } }, error => { - this.toastService.error('error happened when editing ' + error.message); + this.toastService.error('Error occured when editing ' + error.message); console.log('Error -' + error.message); + }, () => { + this.ngxService.stop(); }); }); } @@ -226,6 +187,7 @@ export class ConfigurationDashboardComponent implements OnInit { this.configurationDashboardService.deletePackage(this.id).subscribe(res => { console.log('Deleted'); console.log(res); + this.isSaveEnabled = false; this.router.navigate(['/packages']); }, err => { console.log(err); @@ -246,21 +208,25 @@ export class ConfigurationDashboardComponent implements OnInit { } downloadPackage(artifactName: string, artifactVersion: string) { + this.ngxService.start(); this.configurationDashboardService.downloadResource(artifactName + '/' + artifactVersion).subscribe(response => { - const blob = new Blob([response], {type: 'application/octet-stream'}); + const blob = new Blob([response], { type: 'application/octet-stream' }); saveAs(blob, artifactName + '-' + artifactVersion + '-CBA.zip'); + + }, err => { }, () => { + this.ngxService.stop(); }); } deployCurrentPackage() { + this.ngxService.start(); this.formTreeData(); this.deployPackage(); } goToDesignerMode(id) { - // this.designerService.setActionName(this.customActionName); - this.router.navigate(['/packages/designer', id, {actionName: this.customActionName}]); + this.router.navigate(['/packages/designer', id, { actionName: this.customActionName }]); } public dropped(files: NgxFileDropEntry[]) { @@ -276,57 +242,104 @@ export class ConfigurationDashboardComponent implements OnInit { } textChanged($event: {}) { - this.packageCreationStore.addTopologyTemplate(this.vlbDefinition.topology_template); + this.cbaPackage.templateTopology.node_templates = this.designerState.template.node_templates; + this.cbaPackage.templateTopology.workflows = this.designerState.template.workflows; + this.cbaPackage.templateTopology.content = this.vlbDefinition.topology_template.content; } enrichBluePrint() { - + this.ngxService.start(); + this.packageCreationStore.addTopologyTemplate(this.cbaPackage.templateTopology); this.formTreeData(); this.enrichPackage(); + this.designerStore.clear(); + this.packageCreationStore.clear(); } private enrichPackage() { this.create(); - this.zipFile.generateAsync({type: 'blob'}) + this.zipFile.generateAsync({ type: 'blob' }) .then(blob => { this.packageCreationService.enrichPackage(blob).subscribe(response => { console.log('success'); - const blobInfo = new Blob([response], {type: 'application/octet-stream'}); - this.configurationDashboardService.getPagedPackages(this.id).subscribe( - (bluePrintDetailModels) => { - if (bluePrintDetailModels) { - this.packageCreationStore.clear(); - this.extractBlobToStore(blob, bluePrintDetailModels); - this.isSaveEnabled = true; - this.toastService.info('enriched successfully '); - } - }); - - // saveAs(blobInfo, 'test' + '-' + '1.0.0' + '-CBA.zip'); - + const blobInfo = new Blob([response], { type: 'application/octet-stream' }); + this.currentBlob = blobInfo; + this.packageCreationStore.clear(); + this.packageCreationExtractionService.extractBlobToStore(this.currentBlob); + this.isSaveEnabled = true; + this.toastService.success('Enriched Done Successfully'); + }, err => { + this.handleError(err); + }, () => { + this.ngxService.stop(); }); }, error => { - this.toastService.error('error happened when editing ' + error.message); - console.log('Error -' + error.message); + this.toastService.error('Error occured during enrichment process' + error.message); + console.error('Error -' + error.message); + }, () => { + this.ngxService.stop(); }); } private deployPackage() { this.create(); - this.zipFile.generateAsync({type: 'blob'}) + this.zipFile.generateAsync({ type: 'blob' }) .then(blob => { - this.packageCreationService.enrichPackage(blob).subscribe(response => { - console.log('success'); - console.log(response); + this.packageCreationService.deploy(blob).subscribe(response => { + this.toastService.info('Package Deployed Successfully '); + const id = response.toString().split('id')[1].split(':')[1].split('"')[1]; + this.isSaveEnabled = false; + this.router.navigate(['/packages/package/' + id]); + }, err => { + this.handleError(err); + }, () => { + this.ngxService.stop(); }); }, error => { - this.toastService.error('error happened when deploying ' + error.message); - console.log('Error -' + error.message); + this.handleError(error); + }, () => { + this.ngxService.stop(); }); } clickEvent() { this.isSaveEnabled = true; } + + canDeactivate(): boolean { + return this.isSaveEnabled; + } + + ngOnDestroy() { + this.ngUnsubscribe.next(); + this.ngUnsubscribe.complete(); + } + + checkSkipTypesOfAction() { + console.log(this.cbaPackage); + if (this.cbaPackage.templateTopology && this.cbaPackage.templateTopology.node_templates + && this.cbaPackage.templateTopology.workflows) { + this.goToDesignerMode(this.id); + } else { + this.dataTarget = '#exampleModalLong'; + } + } + + handleError(error) { + let errorMessage = ''; + if (error.error instanceof ErrorEvent) { + // client-side error + errorMessage = `Error: ${error.error.message}`; + } else { + // server-side error + errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`; + } + this.toastService.error('Error occured when deploying ' + errorMessage); + console.log('Error -' + errorMessage); + this.ngxService.stop(); + this.toastService.error('Error occured when deploying' + error.message); + return throwError(errorMessage); + } } +