From c133b83cb2cbf0b3c7a63aad105a56060db2a6df Mon Sep 17 00:00:00 2001 From: shaaban Altanany Date: Thu, 9 Jan 2020 10:15:28 +0200 Subject: creating meta data creation component(first tab) Issue-ID: CCSDK-2014 Signed-off-by: shaaban Altanany Change-Id: I35283cbb5b48174606493ecb39c20b9f717a9c06 --- .../src/app/common/constants/app-constants.ts | 3 +- .../packages/model/packages-dashboard.state.ts | 1 + .../imports-tab/imports-tab.component.html | 130 ++++++++++++++--- .../mapping-models/definitions/VlbDefinition.ts | 24 ++- .../mapping-models/metadata/MetaDataTab.model.ts | 6 +- .../package-creation.component.html | 162 +++------------------ .../package-creation/package-creation.component.ts | 159 ++++++++++++++------ .../package-creation/package-creation.service.ts | 13 +- .../package-creation/package-creation.utils.ts | 2 + .../packages/packages-api.service.ts | 4 +- .../filter-by-tags/filter-by-tags.component.html | 2 +- .../filter-by-tags/filter-by-tags.component.ts | 25 ++-- .../package-list/package-list.component.html | 2 +- .../package-list/package-list.component.spec.ts | 5 +- .../package-list/package-list.component.ts | 4 +- .../packages-dashboard.component.html | 26 +--- .../packages/packages.routing.module.ts | 2 + .../feature-modules/packages/packages.store.ts | 62 +++++++- .../src/assets/img/folder-upload.svg | 20 +++ cds-ui/designer-client/src/styles.css | 81 ++++++++++- 20 files changed, 468 insertions(+), 265 deletions(-) create mode 100644 cds-ui/designer-client/src/assets/img/folder-upload.svg (limited to 'cds-ui') diff --git a/cds-ui/designer-client/src/app/common/constants/app-constants.ts b/cds-ui/designer-client/src/app/common/constants/app-constants.ts index 506d3b90f..387c35342 100644 --- a/cds-ui/designer-client/src/app/common/constants/app-constants.ts +++ b/cds-ui/designer-client/src/app/common/constants/app-constants.ts @@ -98,7 +98,8 @@ export const BlueprintURLs = { deploy: '/controllerblueprint/deploy-blueprint', getMetaDate: '/controllerblueprint/meta-data/', countOfAllBluePrints: '/controllerblueprint/list/count', - getMetaDatePageable: '/controllerblueprint/metadata/paged' + getMetaDatePageable: '/controllerblueprint/metadata/paged', + getBlueprintByName: '/controllerblueprint/by-name/' }; export const ResourceDictionaryURLs = { diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/packages-dashboard.state.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/packages-dashboard.state.ts index 068e93160..f4f56c591 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/packages-dashboard.state.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/packages-dashboard.state.ts @@ -24,6 +24,7 @@ import {BluePrintPage} from './BluePrint.model'; export class PackagesDashboardState { page: BluePrintPage; + filteredPackages: BluePrintPage; command: string; currentPage = 0; totalPackages: number; diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html index fc1015ca0..affba1b3b 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html @@ -1,23 +1,111 @@ -
- - gi - Optional custom content that replaces the the entire default content. - - - -
- - - - - - - - - - - -
Name
{{ item.relativePath }}
+ +
+
+
+ + +
+ Or you can also Import File + +
+ +
+
+
+ +
+
+
+
+
+
+ + +
+
+ +
+
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. +
+
+
+
+
+
+ +
+
+
+
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. +
+
+
+
+
+
+ +
+
+
+
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. +
+
+
+
+
+ +
+ + + + diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/definitions/VlbDefinition.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/definitions/VlbDefinition.ts index 5c59404c2..2d5e520ee 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/definitions/VlbDefinition.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/definitions/VlbDefinition.ts @@ -1,4 +1,5 @@ -import {JsonObject, JsonProperty} from 'json2typescript'; +import {Any, JsonObject, JsonProperty} from 'json2typescript'; + @JsonObject export class VlbDefinition { @@ -11,17 +12,30 @@ export class VlbDefinition { // topology_template: TopologyTemplate; } +@JsonObject('metadata') export class Metadata { @JsonProperty('template_author') - templateAuthor: string; + // tslint:disable-next-line:variable-name + template_author: string; 'author-email': string; 'user-groups': string; @JsonProperty('template_name') - templateName: string; + // tslint:disable-next-line:variable-name + template_name: string; @JsonProperty('template_version') - templateVersion: string; + // tslint:disable-next-line:variable-name + template_version: string; @JsonProperty('template_tag') - templateTags: string; + // tslint:disable-next-line:variable-name + template_tags: string; + + @JsonProperty('dictionary_group') + // tslint:disable-next-line:variable-name + dictionary_group: string; + + + /* @JsonProperty('custom_keys', {String}, false) + mapOfCustomKeys: Map = new Map();*/ } export class Import { diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/metadata/MetaDataTab.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/metadata/MetaDataTab.model.ts index 353ac4e1c..42aac5c4f 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/metadata/MetaDataTab.model.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/metadata/MetaDataTab.model.ts @@ -51,9 +51,9 @@ export class MetaDataFile { 'CSAR-Version: 1.0\n' + 'Created-By: Shaaban Ebrahim \n' + 'Entry-Definitions:' + metaDataTab.entryFileName + '\n' + - 'Template-Name:' + metaDataTab.templateName + '\n' + - 'Template-Version: 1.0.0\n' + - 'Template-Type: DEFAULT\n' + + 'Template-Name:' + metaDataTab.name + '\n' + + 'Template-Version:' + metaDataTab.version + '\n' + + 'Template-Type: ' + metaDataTab.mode + '\n' + 'Template-Tags:' + metaDataTab.tags; } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html index 3cc8707c5..dc363b28a 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html @@ -34,7 +34,7 @@
@@ -73,32 +73,21 @@
-
-
@@ -106,21 +95,26 @@
- +

- +
+

- +
@@ -129,21 +123,22 @@
- Custom key Delete + Custom key Delete
- +

- +
@@ -165,110 +160,8 @@
- - diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.ts index 60fccebc8..37a017953 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.ts @@ -31,6 +31,8 @@ import {JsonConvert} from 'json2typescript'; import {JsonPipe} from '@angular/common'; import {PackageCreationService} from './package-creation.service'; import {PackageCreationUtils} from './package-creation.utils'; +import List = _.List; +import {Router} from '@angular/router'; @Component({ selector: 'app-package-creation', @@ -38,10 +40,11 @@ import {PackageCreationUtils} from './package-creation.utils'; styleUrls: ['./package-creation.component.css'] }) export class PackageCreationComponent implements OnInit { - + counter = 0; modes: object[] = [ {name: 'Designer Mode', style: 'mode-icon icon-designer-mode'}, {name: 'Scripting Mode', style: 'mode-icon icon-scripting-mode'}]; + customKeysAndValues: Map = new Map(); dictionaryLibraryInstances: string[] = ['x', 'y']; private container: HTMLElement; @@ -54,23 +57,34 @@ export class PackageCreationComponent implements OnInit { private folder: FolderNodeElement = new FolderNodeElement(); private zipFile: JSZip = new JSZip(); private filesData: any = []; + private errorMessage: string; + private keys: NodeListOf; + private values: NodeListOf; - constructor(private packageCreationService: PackageCreationService, private packageCreationUtils: PackageCreationUtils) { + constructor(private packageCreationService: PackageCreationService, private packageCreationUtils: PackageCreationUtils, + private router: Router) { } ngOnInit() { + // this.customKeysAndValues.set('Dictionary Library Instances', ' '); + this.keys = document.getElementsByName('key'); + this.values = document.getElementsByName('value'); } createAnotherCustomKeyDiv() { - console.log(this.metaDataTab); this.newElement = document.getElementById('target'); + const id = this.newElement.getAttribute('id'); + this.newElement.setAttribute('id', 'target' + this.counter++); const copiedElement = this.newElement.cloneNode(true); - /* this.newElement.setAttribute('class', 'alert-dark');*/ this.container = document.getElementById('container'); this.container.appendChild(copiedElement); this.elements = this.container.children; + this.newElement.setAttribute('id', id); + this.clearCopiedElement(); + + // console.log(this.packageCreationService.checkBluePrintNameAndVersion(this.metaDataTab.name, this.metaDataTab.version)); /*this.metaDataTab = new MetaDataTab(); this.metaDataTab.name = 'klfdj'; this.metaDataTab.entryFileName = 'Definitions/vLB_CDS.json'; @@ -83,66 +97,96 @@ export class PackageCreationComponent implements OnInit { this.saveToFileSystem(MetaDataFile.getObjectInstance(this.metaDataTab));*/ } - validatePacakgeName() { - + private clearCopiedElement() { + const newCopiedElement: HTMLInputElement = document.getElementById('target' + (this.counter - 1)) as HTMLInputElement; + const inputElements = newCopiedElement.getElementsByTagName('input'); + for (let i = 0; i < inputElements.length; i++) { + const element: HTMLInputElement = inputElements.item(i) as HTMLInputElement; + element.value = ''; + } } - getDictionaryLibraryInstances() { + + validatePackageNameAndVersion() { + if (this.metaDataTab.name && this.metaDataTab.version) { + this.packageCreationService.checkBluePrintNameAndVersion(this.metaDataTab.name, this.metaDataTab.version).then(element => { + if (element) { + this.errorMessage = 'the package with name and version is exists'; + } else { + this.errorMessage = ' '; + } + }); + } } - saveMetaData() { + getDictionaryLibraryInstances() { } - private saveToFileSystem(response) { - - const filename = 'TOSCA.meta'; - FilesContent.putData(filename, response); - - const filenameEntry = 'vLB_CDS.json'; - const vlbDefinition: VlbDefinition = new VlbDefinition(); - const metadata: Metadata = new Metadata(); + saveMetaData() { + for (let i = 0; i < this.values.length; i++) { + const inputKeyElement: HTMLInputElement = this.keys.item(i) as HTMLInputElement; + const inputKey: string = inputKeyElement.value; + const inputValueElement: HTMLInputElement = this.values.item(i) as HTMLInputElement; + const inputValue: string = inputValueElement.value; + this.customKeysAndValues.set(inputKey, inputValue); + } - metadata.templateAuthor = ' lldkslds'; - metadata.templateName = ' lldkslds'; - metadata.templateTags = ' lldkslds'; - metadata.templateVersion = ' lldkslds'; - metadata['author-email'] = ' lldkslds'; - metadata['user-groups'] = ' lldkslds'; - vlbDefinition.metadata = metadata; + this.metaDataTab.mapOfCustomKey = this.customKeysAndValues; + this.setModeType(this.metaDataTab); + this.setEntryPoint(this.metaDataTab); - vlbDefinition.imports = [{ - file: 'Definitions/data_types.json' - }]; + this.addToscaMetaDataFile(this.metaDataTab); - const value = this.packageCreationUtils.transformToJson(vlbDefinition); - FilesContent.putData(filenameEntry, value); + const vlbDefinition: VlbDefinition = new VlbDefinition(); + this.fillVLBDefinition(vlbDefinition, this.metaDataTab); this.filesData.push(this.folder.TREE_DATA); this.saveToBackend(); + this.packageCreationService.refreshPackages(); + this.router.navigate(['/packages']); + } + addToscaMetaDataFile(metaDataTab: MetaDataTab) { + const filename = 'TOSCA.meta'; + FilesContent.putData(filename, MetaDataFile.getObjectInstance(this.metaDataTab)); + } + + private setModeType(metaDataTab: MetaDataTab) { + if (metaDataTab.mode.startsWith('Scripting')) { + metaDataTab.mode = 'KOTLIN_SCRIPT'; + } else if (metaDataTab.mode.startsWith('Designer')) { + metaDataTab.mode = 'DEFAULT'; + } else { + metaDataTab.mode = 'GENERIC_SCRIPT'; + } + } saveToBackend() { this.create(); this.zipFile.generateAsync({type: 'blob'}) .then(blob => { - const formData = new FormData(); - formData.append('file', blob); - this.packageCreationService.saveBlueprint(formData) - .subscribe( - data => { - console.log('Success:' + JSON.stringify(data)); - }, error => { - console.log('Error -' + error.message); - }); + this.saveBluePrint(blob); }); } + private saveBluePrint(blob) { + const formData = new FormData(); + formData.append('file', blob); + this.packageCreationService.saveBlueprint(formData) + .subscribe( + data => { + console.log('Success:' + JSON.stringify(data)); + }, error => { + console.log('Error -' + error.message); + }); + } + create() { this.folder.TREE_DATA.forEach((path) => { @@ -151,8 +195,6 @@ export class PackageCreationComponent implements OnInit { this.zipFile.folder(name); path.children.forEach(children => { const name2 = children.name; - console.log(FilesContent.getMapOfFilesNamesAndContent()); - console.log(name2); if (FilesContent.getMapOfFilesNamesAndContent().has(name2)) { this.zipFile.file(name + '/' + name2, FilesContent.getMapOfFilesNamesAndContent().get(name2)); } else { @@ -165,16 +207,41 @@ export class PackageCreationComponent implements OnInit { } - searchPackages($event: Event) { - /* const searchQuery = event.target.value; - searchQuery = searchQuery.trim(); - this.packagesStore.search(searchQuery);*/ - } - deleteCustomKey(event) { this.container = document.getElementById('container'); const element = event.parentElement.parentElement.parentElement; this.container.removeChild(element); - console.log('removed'); + } + + + private setEntryPoint(metaDataTab: MetaDataTab) { + if (metaDataTab.mode.startsWith('DEFAULT')) { + metaDataTab.entryFileName = 'Definitions/vLB_CDS.json'; + } else { + metaDataTab.entryFileName = ''; + } + + + } + + private fillVLBDefinition(vlbDefinition: VlbDefinition, metaDataTab: MetaDataTab) { + + const metadata: Metadata = new Metadata(); + metadata.template_author = 'Shaaban'; + metadata.template_name = metaDataTab.templateName; + metadata.template_tags = metaDataTab.tags; + + metadata.dictionary_group = 'default'; + metadata.template_version = metaDataTab.version; + metadata['author-email'] = 'shaaban.altanany.ext@orange.com'; + metadata['user-groups'] = 'ADMIN'; + // metadata.mapOfCustomKeys = this.metaDataTab.mapOfCustomKey; + vlbDefinition.tosca_definitions_version = metaDataTab.version; + vlbDefinition.metadata = metadata; + + // console.log(vlbDefinition.metadata.mapOfCustomKeys); + const value = this.packageCreationUtils.transformToJson(vlbDefinition); + console.log(value); + FilesContent.putData('vLB_CDS.json', value); } } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.service.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.service.ts index 20e147684..0e5cd6a11 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.service.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.service.ts @@ -24,6 +24,8 @@ import {Injectable} from '@angular/core'; import {Observable} from 'rxjs'; import {ApiService} from '../../../../common/core/services/api.service'; import {BlueprintURLs} from '../../../../common/constants/app-constants'; +import {PackagesApiService} from '../packages-api.service'; +import {PackagesStore} from '../packages.store'; @Injectable({ providedIn: 'root' @@ -31,10 +33,19 @@ import {BlueprintURLs} from '../../../../common/constants/app-constants'; export class PackageCreationService { - constructor(private api: ApiService) { + constructor(private api: ApiService, private packagesListService: PackagesApiService, private packagesStore: PackagesStore) { } saveBlueprint(body: any | null, options?: any): Observable { return this.api.post(BlueprintURLs.save, body, {responseType: 'text'}); } + + async checkBluePrintNameAndVersion(name: string, version: string): Promise { + return await this.packagesListService.checkBluePrintIfItExists(name, version) + .then(bluePrintModelsResult => bluePrintModelsResult != null && bluePrintModelsResult.length > 0); + } + + refreshPackages() { + this.packagesStore.getAll(); + } } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.utils.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.utils.ts index 2ee0de7e2..4bccb3dd5 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.utils.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.utils.ts @@ -21,6 +21,7 @@ limitations under the License. import {JsonPipe} from '@angular/common'; import {Injectable} from '@angular/core'; +import {JsonConvert} from 'json2typescript'; @Injectable({ @@ -32,6 +33,7 @@ export class PackageCreationUtils { } public transformToJson(object: any): string { + return this.pipe.transform(object); } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-api.service.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-api.service.ts index ca4acd36b..2332d8e53 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-api.service.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-api.service.ts @@ -44,8 +44,8 @@ export class PackagesApiService { }); } - checkBluePrintIfItExists(keyword: string) {// : Observable { - // return this.api.get(BlueprintURLs.get + '/' + keyword); + async checkBluePrintIfItExists(name: string, version: string): Promise { + return await this.api.get(BlueprintURLs.getBlueprintByName + '/' + name + '/version/' + version).toPromise(); } getCountOfAllPackages(observable: Observable) { diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.html index 6ce3a53a1..e5ebc315a 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.html @@ -1,6 +1,6 @@