X-Git-Url: https://gerrit.onap.org/r/gitweb?a=blobdiff_plain;f=cds-ui%2Fdesigner-client%2Fsrc%2Fapp%2Fmodules%2Ffeature-modules%2Fpackages%2Fconfiguration-dashboard%2Fconfiguration-dashboard.component.ts;h=a78fe4ed1677824cf70ac4f88811e0bfaf198b9c;hb=a03d4f6e227d1dbe9f1fa79365f4c6da73f609d9;hp=eb121e98e530927e486f659af8aa009b2ed1a3f8;hpb=4d60ff9e5cb5a35f2676083cffdce80c957fa9ae;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 eb121e98e..a78fe4ed1 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,13 +1,13 @@ -import {Component, ElementRef, OnInit, ViewChild} from '@angular/core'; +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, MetaDataTabModel} from '../package-creation/mapping-models/metadata/MetaDataTab.model'; +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 {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'; @@ -18,13 +18,15 @@ 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'; @Component({ selector: 'app-configuration-dashboard', templateUrl: './configuration-dashboard.component.html', styleUrls: ['./configuration-dashboard.component.css'], }) -export class ConfigurationDashboardComponent extends ComponentCanDeactivate implements OnInit { +export class ConfigurationDashboardComponent extends ComponentCanDeactivate implements OnInit, OnDestroy { viewedPackage: BluePrintDetailModel = new BluePrintDetailModel(); @ViewChild(MetadataTabComponent, {static: false}) metadataTabComponent: MetadataTabComponent; @@ -47,6 +49,8 @@ export class ConfigurationDashboardComponent extends ComponentCanDeactivate impl metadataClasses = 'nav-item nav-link active'; private cbaPackage: CBAPackage = new CBAPackage(); dataTarget: any = ''; + ngUnsubscribe = new Subject(); + private designerState: any; constructor( private route: ActivatedRoute, @@ -61,17 +65,25 @@ export class ConfigurationDashboardComponent extends ComponentCanDeactivate impl ) { super(); - this.packageCreationStore.state$.subscribe( - cbaPackage => { - this.cbaPackage = cbaPackage; - }); - } ngOnInit() { 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); @@ -89,7 +101,6 @@ export class ConfigurationDashboardComponent extends ComponentCanDeactivate impl } - private refreshCurrentPackage(id?) { this.id = this.route.snapshot.paramMap.get('id'); console.log(this.id); @@ -109,80 +120,10 @@ export class ConfigurationDashboardComponent extends ComponentCanDeactivate impl this.viewedPackage.artifactName + '/' + this.viewedPackage.artifactVersion).subscribe(response => { const blob = new Blob([response], {type: 'application/octet-stream'}); this.currentBlob = blob; - this.extractBlobToStore(blob, this.viewedPackage); - }); - } - - private extractBlobToStore(blob: Blob, bluePrintDetailModel: 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, bluePrintDetailModel); - } else if (filename.includes('TOSCA-Metadata/')) { - const metaDataTabInfo: MetaDataTabModel = this.getMetaDataTabInfo(fileData); - this.setMetaData(metaDataTabInfo, bluePrintDetailModel); - } - } - }); - }); + this.packageCreationExtractionService.extractBlobToStore(blob); }); } - setScripts(filename: string, fileData: any) { - this.packageCreationStore.addScripts(filename, fileData); - } - - setImports(filename: string, fileData: any, bluePrintDetailModels: BluePrintDetailModel) { - console.log(filename); - if (filename.includes(bluePrintDetailModels.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) { - const content = {}; - const workflow = 'workflows'; - content[workflow] = definition.topology_template.workflows; - const nodeTemplates = 'node_templates'; - content[nodeTemplates] = definition.topology_template.node_templates; - this.designerStore.saveSourceContent(JSON.stringify(content)); - this.packageCreationStore.addTopologyTemplate(definition.topology_template); - } - - } - 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() { this.configurationDashboardService.deletePackage(this.viewedPackage.id).subscribe(res => { this.formTreeData(); @@ -201,26 +142,8 @@ export class ConfigurationDashboardComponent extends ComponentCanDeactivate impl 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() { @@ -297,13 +220,17 @@ export class ConfigurationDashboardComponent extends ComponentCanDeactivate impl } 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.packageCreationStore.addTopologyTemplate(this.cbaPackage.templateTopology); this.formTreeData(); this.enrichPackage(); + this.designerStore.clear(); + this.packageCreationStore.clear(); } @@ -316,7 +243,7 @@ export class ConfigurationDashboardComponent extends ComponentCanDeactivate impl const blobInfo = new Blob([response], {type: 'application/octet-stream'}); this.currentBlob = blobInfo; this.packageCreationStore.clear(); - this.extractBlobToStore(this.currentBlob, this.viewedPackage); + this.packageCreationExtractionService.extractBlobToStore(this.currentBlob); this.isSaveEnabled = true; this.toastService.info('enriched successfully '); }); @@ -337,8 +264,7 @@ export class ConfigurationDashboardComponent extends ComponentCanDeactivate impl this.router.navigate(['/packages/package/' + id]); }); }, error => { - this.toastService.error('error happened when deploying ' + error.message); - console.log('Error -' + error.message); + this.handleError(error); }); } @@ -350,11 +276,33 @@ export class ConfigurationDashboardComponent extends ComponentCanDeactivate impl return this.isSaveEnabled; } + ngOnDestroy() { + this.ngUnsubscribe.next(); + this.ngUnsubscribe.complete(); + } + checkSkipTypesOfAction() { - if (this.cbaPackage.templateTopology.node_templates && this.cbaPackage.templateTopology.workflows) { + 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 happened when deploying ' + errorMessage); + console.log('Error -' + errorMessage); + return throwError(errorMessage); + } } +