diff options
author | shaaban Altanany <shaaban.eltanany.ext@orange.com> | 2020-02-27 16:35:57 +0200 |
---|---|---|
committer | shaaban Altanany <shaaban.eltanany.ext@orange.com> | 2020-02-27 17:33:43 +0200 |
commit | b2b847587d7c06db5737a06820d1809b9aeb73e1 (patch) | |
tree | c927c31a70e9232554dd8bc4d5bc681a0a92b52d /cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard | |
parent | 71f6d98f1003dc9acc212e4132f03bb21c0b73c8 (diff) |
Adding view and edit feature
Issue-ID: CCSDK-2123
Signed-off-by: shaaban Altanany <shaaban.eltanany.ext@orange.com>
Change-Id: I6fa4469a982a3c6f76002909813480c9ac4d0e65
Diffstat (limited to 'cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard')
4 files changed, 175 insertions, 72 deletions
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html index f07258439..6194a9bb3 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html @@ -11,16 +11,16 @@ <li>Package Name</li> </ul> </h2> - <!-- <div class="col d-flex justify-content-end header-button-save"> - <button class="float btn btn-sm btn-outline-secondary" disabled>Discard Changes</button> - <button class="float btn btn-sm btn-primary" (click)="saveBluePrint()">Save</button> - </div>--> + <div class="col d-flex justify-content-end header-button-save"> + <button class="float btn btn-sm btn-outline-secondary" (click)="goBacktoDashboard()" >Discard Changes</button> + <button class="float btn btn-sm btn-primary" (click)="editBluePrint()">Apply Changes</button> + </div> </div> </header> - <div class="container-fluid body-container"> + <div class="container-fluid body-container"> <div class="container"> <!-- <div class="creat-action-container"> @@ -77,7 +77,7 @@ <a class="nav-item nav-link active" id="nav-metadata-tab" data-toggle="tab" href="#nav-metadata" role="tab" aria-controls="nav-metadata" - aria-selected="true">METADATA</a> + aria-selected="true" autofocus #nameit (focusout)="saveMetaData()">METADATA</a> <a class="nav-item nav-link" id="nav-template-tab" data-toggle="tab" href="#nav-template" role="tab" aria-controls="nav-template" aria-selected="false">TEMPLATE & MAPPING</a> 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 766e0b120..1fcc35f5a 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,7 +1,16 @@ -import { Component, OnInit } from '@angular/core'; -import { ActivatedRoute } from '@angular/router'; -import { PackageStore } from './package.store'; -import { BluePrintDetailModel } from '../model/BluePrint.detail.model'; +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 * as JSZip from 'jszip'; +import {ConfigurationDashboardService} from './configuration-dashboard.service'; +import {VlbDefinition} from '../package-creation/mapping-models/definitions/VlbDefinition'; +import {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'; @Component({ @@ -11,24 +20,156 @@ import { BluePrintDetailModel } from '../model/BluePrint.detail.model'; }) export class ConfigurationDashboardComponent implements OnInit { viewedPackage: BluePrintDetailModel = new BluePrintDetailModel(); + @ViewChild(MetadataTabComponent, {static: false}) + private metadataTabComponent: MetadataTabComponent; - constructor(private route: ActivatedRoute, private configurationStore: PackageStore) { + entryDefinitionKeys: string[] = ['template_tags', 'user-groups', + 'author-email', 'template_version', 'template_name', 'template_author']; + @ViewChild('nameit', {static: true}) + private elementRef: ElementRef; + + private zipFile: JSZip = new JSZip(); + private filesData: any = []; + private folder: FolderNodeElement = new FolderNodeElement(); + + constructor(private route: ActivatedRoute, private configurationDashboardService: ConfigurationDashboardService, + private packageCreationStore: PackageCreationStore, + private packageCreationUtils: PackageCreationUtils, + private router: Router) { } - // test + ngOnInit() { + this.elementRef.nativeElement.focus(); const id = this.route.snapshot.paramMap.get('id'); - this.configurationStore.getPagedPackages(id).subscribe( + this.configurationDashboardService.getPagedPackages(id).subscribe( (bluePrintDetailModels) => { - console.log('-------------xxxxxxxxxxx----------------'); - console.log(bluePrintDetailModels); - this.configurationStore.setConfiguration(bluePrintDetailModels); - - console.log('----------------- id ' + id); if (bluePrintDetailModels) { - this.configurationStore.downloadResource( - bluePrintDetailModels[0].artifactName + '/' + bluePrintDetailModels[0].artifactVersion); + this.downloadCBAPackage(bluePrintDetailModels); + } + }); + } + + + 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.zipFile.loadAsync(blob).then((zip) => { + Object.keys(zip.files).forEach((filename) => { + console.log(filename); + zip.files[filename].async('string').then((fileData) => { + 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); + } else if (filename.includes('TOSCA-Metadata/')) { + const metaDataTabInfo: MetaDataTabModel = this.getMetaDataTabInfo(fileData); + // console.log(metaDataTabInfo); + this.setMetaData(metaDataTabInfo, bluePrintDetailModels[0]); + } + } + }); + }); + }); + }); + } + + private setScripts(filename: string, fileData: any) { + this.packageCreationStore.addScripts(filename, fileData); + } + + private setImports(filename: string, fileData: any) { + if (filename.includes('blueprint.json') || filename.includes('vLB_CDS.json')) { + 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<string, string>(); + 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); + } else { + this.packageCreationStore.addDefinition(filename, fileData); + + } + } + + private setTemplates(filename: string, fileData: any) { + this.packageCreationStore.addTemplate(filename, fileData); + } + + private setMapping(fileName: string, fileData: string) { + this.packageCreationStore.addMapping(fileName, fileData); + } + + editBluePrint() { + this.packageCreationStore.state$.subscribe( + cbaPackage => { + console.log(cbaPackage); + FilesContent.clear(); + let packageCreationModes: PackageCreationModes; + cbaPackage = PackageCreationModes.mapModeType(cbaPackage); + cbaPackage.metaData = PackageCreationModes.setEntryPoint(cbaPackage.metaData); + packageCreationModes = PackageCreationBuilder.getCreationMode(cbaPackage); + packageCreationModes.execute(cbaPackage, this.packageCreationUtils); + this.filesData.push(this.folder.TREE_DATA); + this.saveBluePrintToDataBase(); + }); + } + + private 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<string>(arrayOfLines[7].split(':')[1].split(',')); + console.log(metaDataTabModel.mode); + return metaDataTabModel; + } + + saveBluePrintToDataBase() { + this.create(); + this.zipFile.generateAsync({type: 'blob'}) + .then(blob => { + this.packageCreationStore.saveBluePrint(blob); + this.router.navigate(['/packages']); }); } + + create() { + FilesContent.getMapOfFilesNamesAndContent().forEach((value, key) => { + this.zipFile.folder(key.split('/')[0]); + this.zipFile.file(key, value); + }); + + } + + goBacktoDashboard() { + this.router.navigate(['/packages']); + } } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.service.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.service.ts index 566339db8..239dd6339 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.service.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.service.ts @@ -13,13 +13,15 @@ export class ConfigurationDashboardService { } - getBluePrintModel(id: string): Observable<BluePrintDetailModel> { + private getBluePrintModel(id: string): Observable<BluePrintDetailModel> { return this.api.getOne(BlueprintURLs.getOneBlueprint + '/' + id); } + getPagedPackages(id: string) { + return this.getBluePrintModel(id); + } - - public downloadResource(id: string) { - return this.api.getCustomized(id, {responseType: 'blob'}); + public downloadResource(path: string) { + return this.api.getCustomized(BlueprintURLs.download + path, {responseType: 'blob'}); } } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/package.store.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/package.store.ts index 4669ef12d..49de59e62 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/package.store.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/package.store.ts @@ -19,11 +19,11 @@ limitations under the License. ============LICENSE_END============================================ */ -import { Injectable } from '@angular/core'; -import { Store } from '../../../../common/core/stores/Store'; -import { ConfigurationDashboardService } from './configuration-dashboard.service'; -import { PackageDashboardState } from '../model/package-dashboard.state'; -import { BlueprintURLs } from '../../../../common/constants/app-constants'; +import {Injectable} from '@angular/core'; +import {Store} from '../../../../common/core/stores/Store'; +import {ConfigurationDashboardService} from './configuration-dashboard.service'; +import {PackageDashboardState} from '../model/package-dashboard.state'; +import {BlueprintURLs} from '../../../../common/constants/app-constants'; import * as JSZip from 'jszip'; @Injectable({ @@ -37,53 +37,13 @@ export class PackageStore extends Store<PackageDashboardState> { super(new PackageDashboardState()); } - getPagedPackages(id: string) { + /* getPagedPackages(id: string) { return this.configurationDashboardService.getBluePrintModel(id); } public downloadResource(path: string) { - console.log('download resource xx'); - this.configurationDashboardService.downloadResource(BlueprintURLs.download + path).subscribe(response => { - console.log('try to download '); - const blob = new Blob([response], { type: 'application/octet-stream' }); - this.zipFile.loadAsync(blob).then((zip) => { - Object.keys(zip.files).forEach((filename) => { - console.log(filename); - zip.files[filename].async('string').then((fileData) => { - if (fileData) { - if (filename.includes('Scripts/')) { - this.setScripts(filename, fileData); - } else if (filename.includes('templates/')) { - this.setTemplates(filename, fileData); - } else if (filename.includes('definitions/')) { - this.setImports(filename, fileData); - } - } - }); - }); - }); - }); - } - - setConfiguration(bluePrintDetailModels) { - this.setState({ - ...this.state, - configuration: bluePrintDetailModels[0] - }); - } - - private setScripts(filename: string, fileData: any) { - this.setState({ - ...this.state, - scripts: this.state.scripts.setScripts(filename, fileData) - }); - } + return this.configurationDashboardService.downloadResource(BlueprintURLs.download + path); + }*/ - private setImports(filename: string, fileData: any) { - } - - private setTemplates(filename: string, fileData: any) { - - } } |