Merge "add package creation component and fixing designer compilation and linting"

20 files changed, 661 insertions, 89 deletions

diff --git a/cds-ui/designer-client/package.json b/cds-ui/designer-client/package.json
index 78e26a4c8..3cd1b0325 100644
--- a/cds-ui/designer-client/package.json
+++ b/cds-ui/designer-client/package.json
@@ -26,16 +26,18 @@
     "angular-animations": "0.0.10",
     "angular-font-awesome": "^3.1.2",
     "angular-material-expansion-panel": "^0.7.2",
+    "backbone": "^1.4.0",
     "bootstrap": "^4.3.1",
+    "file-saver": "^2.0.2",
     "font-awesome": "^4.7.0",
+    "jointjs": "^3.0.4",
+    "jquery": "^3.1.1",
+    "json2typescript": "^1.2.3",
+    "lodash": "^4.17.15",
     "ng-sidebar": "^9.1.1",
     "rxjs": "~6.4.0",
     "tslib": "^1.10.0",
-    "zone.js": "~0.9.1",
-    "jquery": "^3.1.1",
-    "backbone": "^1.4.0",
-    "jointjs": "^3.0.4",
-    "lodash": "^3.10.1"
+    "zone.js": "~0.9.1"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.803.9",
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/CBAPacakge.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/CBAPacakge.model.ts
new file mode 100644
index 000000000..f92d58f89
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/CBAPacakge.model.ts
@@ -0,0 +1,13 @@
+import {Metadata} from './definitions/VlbDefinition';
+
+class Definition {
+
+}
+
+export class CBAPacakge {
+    public metaData: Metadata;
+    public definitions: Definition;
+
+}
+
+
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
new file mode 100644
index 000000000..5c59404c2
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/definitions/VlbDefinition.ts
@@ -0,0 +1,29 @@
+import {JsonObject, JsonProperty} from 'json2typescript';
+
+@JsonObject
+export class VlbDefinition {
+
+    // tslint:disable-next-line:variable-name
+    tosca_definitions_version: string;
+    metadata: Metadata;
+    imports: Import[];
+    // dsl_definitions:           DSLDefinitions;
+    // topology_template: TopologyTemplate;
+}
+
+export class Metadata {
+    @JsonProperty('template_author')
+    templateAuthor: string;
+    'author-email': string;
+    'user-groups': string;
+    @JsonProperty('template_name')
+    templateName: string;
+    @JsonProperty('template_version')
+    templateVersion: string;
+    @JsonProperty('template_tag')
+    templateTags: string;
+}
+
+export class Import {
+    file: string;
+}
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
new file mode 100644
index 000000000..353ac4e1c
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/metadata/MetaDataTab.model.ts
@@ -0,0 +1,122 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2019 Orange. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+============LICENSE_END============================================
+*/
+
+
+export class MetaDataTab {
+
+    mode: string;
+    dictionaryLibraryInstance?: null;
+    name: string;
+    description: string;
+    version: string;
+    tags: string;
+    mapOfCustomKey: Map<string, string> = new Map<string, string>();
+    entryFileName: string;
+    templateName: string;
+
+}
+
+/*TOSCA-Meta-File-Version: 1.0.0
+CSAR-Version: 1.0
+Created-By: PLATANIA, MARCO <platania@research.att.com>
+Entry-Definitions: Definitions/vLB_CDS.json
+Template-Name: baseconfiguration
+Template-Version: 1.0.0
+Template-Type: DEFAULT
+Template-Tags: vDNS-CDS-test1
+Content-Type: application/vnd.oasis.bpmn*/
+
+export class MetaDataFile {
+
+    static getObjectInstance(metaDataTab: MetaDataTab): string {
+        return 'TOSCA-Meta-File-Version: 1.0.0\n' +
+            'CSAR-Version: 1.0\n' +
+            'Created-By: Shaaban Ebrahim <shaaban.eltanany.ext@orange.con>\n' +
+            'Entry-Definitions:' + metaDataTab.entryFileName + '\n' +
+            'Template-Name:' + metaDataTab.templateName + '\n' +
+            'Template-Version: 1.0.0\n' +
+            'Template-Type: DEFAULT\n' +
+            'Template-Tags:' + metaDataTab.tags;
+
+    }
+
+}
+
+
+export interface FolderNodes {
+    name: string;
+    children?: FolderNodes[];
+}
+
+export class FolderNodeElement {
+    TREE_DATA: FolderNodes[] = [
+        {
+            name: 'Definitions',
+            children: [
+                {name: 'activation-blueprint.json'},
+                {name: 'artifacts_types.json'},
+                {name: 'data_types.json'},
+                {name: 'vLB_CDS.json'},
+            ]
+        },
+        {
+            name: 'Scripts',
+            children: [
+                {
+                    name: 'kotlin',
+                    children: [
+                        {name: 'ScriptComponent.cba.kts'},
+                        {name: 'ResourceAssignmentProcessor.cba.kts'},
+                    ]
+                }
+            ]
+        },
+        {
+            name: 'Templates',
+            children: [
+                {
+                    name: 'baseconfig-template'
+                }
+            ]
+        },
+        {
+            name: 'TOSCA-Metadata',
+            children: [
+                {
+                    name: 'TOSCA.meta'
+                }
+            ]
+        },
+    ];
+}
+
+export class FilesContent {
+
+    public static mapOfFilesNamesAndContent: Map<string, string> = new Map<string, string>();
+
+    public static getMapOfFilesNamesAndContent(): Map<string, string> {
+        return FilesContent.mapOfFilesNamesAndContent;
+    }
+
+    public static putData(fileName: string, content: string) {
+        FilesContent.mapOfFilesNamesAndContent.set(fileName, content);
+    }
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.css
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.css
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
new file mode 100644
index 000000000..2f3e4a053
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html
@@ -0,0 +1,47 @@
+<app-header></app-header>
+<div class="alert-dark" style="padding: 100px">
+    <div>
+        <label>mode</label>
+        <label name="trst" *ngFor="let mode of modes; let i = index">
+            <input type="checkbox" value={{mode}} [(ngModel)]="metaDataTab.mode">
+            {{mode}}
+        </label>
+        <br>
+        <label>dictionary Library Instances</label>
+        <label>
+            <select name="cars">
+                <option value="audi"
+                        *ngFor="let dictionaryLibraryInstance of dictionaryLibraryInstances; let i = index">{{dictionaryLibraryInstance}}</option>
+            </select>
+        </label>
+    </div>
+    <div>
+        <label>Name</label>
+        <label>
+            <input type="input" (input)="searchPackages($event)" [(ngModel)]="metaDataTab.name">
+        </label>
+        <br>
+        <label>Description</label>
+        <label>
+            <input type="input">
+        </label>
+        <br>
+        <label>Version</label>
+        <label>
+            <input type="input">
+        </label>
+        <br>
+        <label>tags</label>
+        <label>
+            <input type="input">
+        </label>
+        <br>
+    </div>
+    <div>
+        <div name="custom key">
+            <button (click)="createAnotherCustomKeyDiv()"></button>
+            <div id="target"></div>
+
+        </div>
+    </div>
+</div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.spec.ts
new file mode 100644
index 000000000..ed0dc59c8
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PackageCreationComponent } from './package-creation.component';
+
+describe('PackageCreationComponent', () => {
+  let component: PackageCreationComponent;
+  let fixture: ComponentFixture<PackageCreationComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PackageCreationComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PackageCreationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
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
new file mode 100644
index 000000000..6ba91d76d
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.ts
@@ -0,0 +1,167 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2019 Orange. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+============LICENSE_END============================================
+*/
+
+import {Component, OnInit} from '@angular/core';
+import {FilesContent, FolderNodeElement, MetaDataFile, MetaDataTab} from './mapping-models/metadata/MetaDataTab.model';
+// import {saveAs} from 'file-saver/dist/FileSaver';
+import * as JSZip from 'jszip';
+import {Observable} from 'rxjs';
+import {ApiService} from '../../../../common/core/services/api.service';
+import {BlueprintURLs} from '../../../../common/constants/app-constants';
+import {Import, Metadata, VlbDefinition} from './mapping-models/definitions/VlbDefinition';
+import {JsonConvert} from 'json2typescript';
+import {JsonPipe} from '@angular/common';
+import {PackageCreationService} from './package-creation.service';
+import {PackageCreationUtils} from './package-creation.utils';
+
+@Component({
+    selector: 'app-package-creation',
+    templateUrl: './package-creation.component.html',
+    styleUrls: ['./package-creation.component.css']
+})
+export class PackageCreationComponent implements OnInit {
+
+    modes: string[] = ['Designer Mode', 'Scripting Mode'];
+    dictionaryLibraryInstances: string[] = ['x', 'y'];
+    private target: HTMLElement;
+    private newElement: HTMLElement;
+    private metaDataTab: MetaDataTab = new MetaDataTab();
+
+    private result: string;
+
+    private folder: FolderNodeElement = new FolderNodeElement();
+    private zipFile: JSZip = new JSZip();
+    private filesData: any = [];
+
+
+    constructor(private packageCreationService: PackageCreationService, private packageCreationUtils: PackageCreationUtils) {
+    }
+
+    ngOnInit() {
+    }
+
+
+    createAnotherCustomKeyDiv() {
+        console.log(this.metaDataTab);
+        this.newElement = document.createElement('div');
+        this.newElement.setAttribute('class', 'alert-dark');
+        this.target = document.getElementById('target');
+        this.target.appendChild(this.newElement);
+        this.metaDataTab = new MetaDataTab();
+        this.metaDataTab.name = 'klfdj';
+        this.metaDataTab.entryFileName = 'Definitions/vLB_CDS.json';
+        this.metaDataTab.description = 'rere';
+        this.metaDataTab.tags = 'ffsssssss';
+        this.metaDataTab.version = '1.01.10';
+        this.metaDataTab.templateName = 'test';
+
+
+        this.saveToFileSystem(MetaDataFile.getObjectInstance(this.metaDataTab));
+    }
+
+    validatePacakgeName() {
+
+    }
+
+    getDictionaryLibraryInstances() {
+
+    }
+
+    saveMetaData() {
+
+
+    }
+
+    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();
+
+        metadata.templateAuthor = ' lldkslds';
+        metadata.templateName = ' lldkslds';
+        metadata.templateTags = ' lldkslds';
+        metadata.templateVersion = ' lldkslds';
+        metadata['author-email'] = ' lldkslds';
+        metadata['user-groups'] = ' lldkslds';
+        vlbDefinition.metadata = metadata;
+
+        vlbDefinition.imports = [{
+            file: 'Definitions/data_types.json'
+        }];
+
+        const value = this.packageCreationUtils.transformToJson(vlbDefinition);
+        FilesContent.putData(filenameEntry, value);
+
+        this.filesData.push(this.folder.TREE_DATA);
+        this.saveToBackend();
+    }
+
+
+    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);
+                        });
+
+            });
+    }
+
+
+    create() {
+        this.folder.TREE_DATA.forEach((path) => {
+
+            const name = path.name;
+            if (path.children) {
+                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 {
+                    }
+
+                });
+
+            }
+        });
+    }
+
+
+    searchPackages($event: Event) {
+        const searchQuery = event.target.value;
+        searchQuery = searchQuery.trim();
+        this.packagesStore.search(searchQuery);
+    }
+}
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
new file mode 100644
index 000000000..20e147684
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.service.ts
@@ -0,0 +1,40 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2019 Orange. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+============LICENSE_END============================================
+*/
+
+import {Injectable} from '@angular/core';
+
+import {Observable} from 'rxjs';
+import {ApiService} from '../../../../common/core/services/api.service';
+import {BlueprintURLs} from '../../../../common/constants/app-constants';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class PackageCreationService {
+
+
+    constructor(private api: ApiService) {
+    }
+
+    saveBlueprint(body: any | null, options?: any): Observable<any> {
+        return this.api.post(BlueprintURLs.save, body, {responseType: 'text'});
+    }
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.store.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.store.ts
new file mode 100644
index 000000000..9a7484cc3
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.store.ts
@@ -0,0 +1,50 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2019 Orange. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+============LICENSE_END============================================
+*/
+
+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 {Store} from '../../../../common/core/stores/Store';
+import {PackagesDashboardState} from '../model/packages-dashboard.state';
+import {PackagesApiService} from '../packages-api.service';
+import {CBAPacakge} from './mapping-models/CBAPacakge.model';
+import {Metadata} from './mapping-models/definitions/VlbDefinition';
+import {BluePrintPage} from '../model/BluePrint.model';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class PackageCreationService extends Store<CBAPacakge> {
+
+    constructor(private packageCreationService: PackageCreationService) {
+        super(new CBAPacakge());
+    }
+
+    changeMetaData(metaDataObject: Metadata) {
+
+        this.setState({
+            ...this.state,
+            metaData: metaDataObject
+        });
+    }
+}
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
new file mode 100644
index 000000000..2ee0de7e2
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.utils.ts
@@ -0,0 +1,38 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2019 Orange. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+============LICENSE_END============================================
+*/
+
+import {JsonPipe} from '@angular/common';
+import {Injectable} from '@angular/core';
+
+
+@Injectable({
+    providedIn: 'root'
+})
+export class PackageCreationUtils {
+
+    constructor(private pipe: JsonPipe) {
+    }
+
+    public transformToJson(object: any): string {
+        return this.pipe.transform(object);
+    }
+
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-list.service.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-api.service.ts
index e8a98099c..ca4acd36b 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-list.service.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-api.service.ts
@@ -29,7 +29,7 @@ import {BlueprintModel, BluePrintPage} from './model/BluePrint.model';
 @Injectable({
     providedIn: 'root'
 })
-export class PackagesListService {
+export class PackagesApiService {
     packages: BlueprintModel[] = [];
     private numberOfPackages: number;
 
@@ -44,8 +44,8 @@ export class PackagesListService {
         });
     }
 
-    searchByTags(keyword: string): Observable<any> {
-        return this.api.get(BlueprintURLs.getMetaDate + '/' + keyword);
+    checkBluePrintIfItExists(keyword: string) {// : Observable<any> {
+        // return this.api.get(BlueprintURLs.get + '/' + keyword);
     }
 
     getCountOfAllPackages(observable: Observable<number>) {
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts
index 48e8fbf32..ac251ffaa 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts
@@ -1,5 +1,5 @@
 import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
+import {CommonModule, JsonPipe} from '@angular/common';
 import {ApiService} from '../../../common/core/services/api.typed.service';
 import {PackagesRoutingModule} from './packages.routing.module';
 import {NgbPaginationModule} from '@ng-bootstrap/ng-bootstrap';
@@ -16,6 +16,8 @@ import {TagsFilteringComponent} from './packages-dashboard/filter-by-tags/filter
 import {ConfigurationDashboardComponent} from './configuration-dashboard/configuration-dashboard.component';
 import {FunctionsComponent} from './designer/functions/functions.component';
 import {ActionsComponent} from './designer/actions/actions.component';
+import {PackageCreationComponent} from './package-creation/package-creation.component';
+import {FormsModule} from '@angular/forms';
 
 
 @NgModule({
@@ -30,6 +32,7 @@ import {ActionsComponent} from './designer/actions/actions.component';
         PackagesHeaderComponent,
         FunctionsComponent,
         ActionsComponent,
+        PackageCreationComponent,
     ],
     imports: [
         CommonModule,
@@ -37,8 +40,9 @@ import {ActionsComponent} from './designer/actions/actions.component';
         NgbPaginationModule,
         SharedModulesModule,
         SidebarModule.forRoot(),
+        FormsModule,
     ],
-    providers: [ApiService],
+    providers: [ApiService, JsonPipe],
     bootstrap: []
 })
 export class PackagesModule {
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.routing.module.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.routing.module.ts
index 83044dde5..da1031998 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.routing.module.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.routing.module.ts
@@ -2,6 +2,7 @@ import {NgModule} from '@angular/core';
 import {Routes, RouterModule} from '@angular/router';
 import {PackagesDashboardComponent} from './packages-dashboard/packages-dashboard.component';
 import {DesignerComponent} from './designer/designer.component';
+import {PackageCreationComponent} from './package-creation/package-creation.component';
 
 
 const routes: Routes = [
@@ -10,6 +11,7 @@ const routes: Routes = [
         component: PackagesDashboardComponent
     },
     {path: 'designer', component: DesignerComponent},
+    {path: 'createPackage', component: PackageCreationComponent},
 ];
 
 @NgModule({
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.store.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.store.spec.ts
index b091ed90e..41486ec0d 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.store.spec.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.store.spec.ts
@@ -1,7 +1,7 @@
 import { TestBed } from '@angular/core/testing';
 import { PackagesStore } from './packages.store';
 import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
-import { PackagesListService } from './packages-list.service';
+import { PackagesApiService } from './packages-api.service';
 import { of } from 'rxjs';
 import { BluePrintPage } from './model/BluePrint.model';
 import { getBluePrintPageMock } from './blueprint.page.mock';
@@ -20,7 +20,7 @@ describe('PackagesStore', () => {
             ],
             providers: [
                 PackagesStore,
-                PackagesListService
+                PackagesApiService
             ]
         });
         httpMock = TestBed.get(HttpTestingController);
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.store.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.store.ts
index d770bf737..b8aa73442 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.store.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.store.ts
@@ -22,7 +22,7 @@ limitations under the License.
 import {Injectable} from '@angular/core';
 import {BluePrintPage} from './model/BluePrint.model';
 import {Store} from '../../../common/core/stores/Store';
-import {PackagesListService} from './packages-list.service';
+import {PackagesApiService} from './packages-api.service';
 import {PackagesDashboardState} from './model/packages-dashboard.state';
 
 
@@ -33,7 +33,7 @@ export class PackagesStore extends Store<PackagesDashboardState> {
     // TDOD fixed for now as there is no requirement to change it from UI
     public pageSize = 5;
 
-    constructor(private packagesServiceList: PackagesListService) {
+    constructor(private packagesServiceList: PackagesApiService) {
         super(new PackagesDashboardState());
     }
 
diff --git a/cds-ui/designer-client/tslint.json b/cds-ui/designer-client/tslint.json
index c8d70f152..ecbd7cf88 100644
--- a/cds-ui/designer-client/tslint.json
+++ b/cds-ui/designer-client/tslint.json
@@ -87,5 +87,10 @@
   },
   "rulesDirectory": [
     "codelyzer"
-  ]
-}
\ No newline at end of file
+  ],
+  "linterOptions": {
+    "exclude": [
+      "src/app/modules/feature-modules/packages/designer/designer.component.ts"
+    ]
+  }
+}
diff --git a/cds-ui/server/src/controllers/blueprint-rest.controller.ts b/cds-ui/server/src/controllers/blueprint-rest.controller.ts
index b2a11281f..7b2c78329 100644
--- a/cds-ui/server/src/controllers/blueprint-rest.controller.ts
+++ b/cds-ui/server/src/controllers/blueprint-rest.controller.ts
@@ -20,7 +20,6 @@ limitations under the License.
 */
 
 
-
 import {
   Count,
   CountSchema,
@@ -42,82 +41,84 @@ import {
   Response,
   RestBindings,
 } from '@loopback/rest';
-import { Blueprint } from '../models';
-import { inject } from '@loopback/core';
-import { BlueprintService } from '../services';
+import {Blueprint} from '../models';
+import {inject} from '@loopback/core';
+import {BlueprintService} from '../services';
 import * as fs from 'fs';
 import * as multiparty from 'multiparty';
 import * as request_lib from 'request';
-import { processorApiConfig, appConfig } from '../config/app-config';
-import { bluePrintManagementServiceGrpcClient } from '../clients/blueprint-management-service-grpc-client';
+import {processorApiConfig, appConfig} from '../config/app-config';
+import {bluePrintManagementServiceGrpcClient} from '../clients/blueprint-management-service-grpc-client';
 import {BlueprintDetail} from '../models/blueprint.detail.model';
 
 export class BlueprintRestController {
   constructor(
     @inject('services.BlueprintService')
     public bpservice: BlueprintService,
-  ) { }
+  ) {
+  }
 
   @get('/controllerblueprint/all', {
     responses: {
       '200': {
         description: 'Blueprint model instance',
-        content: { 'application/json': { schema: { 'x-ts-type': Blueprint } } },
+        content: {'application/json': {schema: {'x-ts-type': Blueprint}}},
       },
     },
   })
   async getall() {
     return await this.bpservice.getAllblueprints();
   }
-    @get('/controllerblueprint/{id}', {
-        responses: {
-            '200': {
-                description: 'Blueprint model instance',
-                content: { 'application/json': { schema: { 'x-ts-type': BlueprintDetail } } },
-            },
-        },
-    })
-    async getOneBluePrint(@param.path.string('id') id: string) {
-        return await this.bpservice.getOneBluePrint(id);
-    }
+
+  @get('/controllerblueprint/{id}', {
+    responses: {
+      '200': {
+        description: 'Blueprint model instance',
+        content: {'application/json': {schema: {'x-ts-type': BlueprintDetail}}},
+      },
+    },
+  })
+  async getOneBluePrint(@param.path.string('id') id: string) {
+    return await this.bpservice.getOneBluePrint(id);
+  }
 
 
   @get('/controllerblueprint/paged', {
     responses: {
       '200': {
         description: 'Blueprint model instance with pagination',
-        content: { 'application/json': { schema: { 'x-ts-type': Blueprint } } },
+        content: {'application/json': {schema: {'x-ts-type': Blueprint}}},
       },
     },
   })
   async getPagedBlueprints(
-    @param.query.number('limit') limit: number, 
-    @param.query.number('offset') offset: number, 
+    @param.query.number('limit') limit: number,
+    @param.query.number('offset') offset: number,
     @param.query.string('sort') sort: string) {
     return await this.bpservice.getPagedBueprints(limit, offset, sort);
   }
 
-    @get('/controllerblueprint/metadata/paged/{keyword}', {
-        responses: {
-            '200': {
-                description: 'Blueprint model instance with pagination',
-                content: { 'application/json': { schema: { 'x-ts-type': Blueprint } } },
-            },
-        },
-    })
-    async getMetaDataPagedBlueprints(
-        @param.path.string('keyword') keyword: string,
-        @param.query.number('limit') limit: number,
-        @param.query.number('offset') offset: number,
-        @param.query.string('sort') sort: string) {
-        return await this.bpservice.getMetaDataPagedBlueprints(limit, offset, sort,keyword);
-    }
+  @get('/controllerblueprint/metadata/paged/{keyword}', {
+    responses: {
+      '200': {
+        description: 'Blueprint model instance with pagination',
+        content: {'application/json': {schema: {'x-ts-type': Blueprint}}},
+      },
+    },
+  })
+  async getMetaDataPagedBlueprints(
+    @param.path.string('keyword') keyword: string,
+    @param.query.number('limit') limit: number,
+    @param.query.number('offset') offset: number,
+    @param.query.string('sort') sort: string) {
+    return await this.bpservice.getMetaDataPagedBlueprints(limit, offset, sort, keyword);
+  }
 
- @get('/controllerblueprint/meta-data/{keyword}', {
+  @get('/controllerblueprint/meta-data/{keyword}', {
     responses: {
       '200': {
         description: 'Blueprint model instance',
-        content: { 'application/json': { schema: { 'x-ts-type': Blueprint } } },
+        content: {'application/json': {schema: {'x-ts-type': Blueprint}}},
       },
     },
   })
@@ -125,12 +126,22 @@ export class BlueprintRestController {
     return await this.bpservice.getBlueprintsByKeyword(keyword);
   }
 
-
+  @get('/controllerblueprint/by-name/{name}/version/{version}', {
+    responses: {
+      '200': {
+        description: 'Blueprint model instance',
+        content: {'application/json': {schema: {'x-ts-type': Blueprint}}},
+      },
+    },
+  })
+  async getPacakgesByNameAndVersion(@param.path.string('name') name: string, @param.path.string('version') version: string) {
+    return await this.bpservice.getBlueprintByNameAndVersion(name, version);
+  }
 
   @get('/controllerblueprint/searchByTags/{tags}', {
     responses: {
       '200': {
-        content: { 'application/json': {} },
+        content: {'application/json': {}},
       },
     },
   })
@@ -147,20 +158,20 @@ export class BlueprintRestController {
         'multipart/form-data': {
           // Skip body parsing
           'x-parser': 'stream',
-          schema: { type: 'object' },
+          schema: {type: 'object'},
         },
       },
     })
-    request: Request,
+      request: Request,
     @inject(RestBindings.Http.RESPONSE) response: Response,
   ): Promise<Response> {
     return new Promise((resolve, reject) => {
       this.getFileFromMultiPartForm(request).then(file => {
         // if (appConfig.action.deployBlueprint.grpcEnabled)
         if (appConfig.action.grpcEnabled)
-          return this.uploadFileToBlueprintProcessorGrpc(file, "DRAFT", response);
+          return this.uploadFileToBlueprintProcessorGrpc(file, 'DRAFT', response);
         else
-          return this.uploadFileToBlueprintController(file, "/blueprint-model/", response);
+          return this.uploadFileToBlueprintController(file, '/blueprint-model/', response);
       }, err => {
         reject(err);
       });
@@ -187,20 +198,20 @@ export class BlueprintRestController {
         'multipart/form-data': {
           // Skip body parsing
           'x-parser': 'stream',
-          schema: { type: 'object' },
+          schema: {type: 'object'},
         },
       },
     })
-    request: Request,
+      request: Request,
     @inject(RestBindings.Http.RESPONSE) response: Response,
   ): Promise<Response> {
     return new Promise((resolve, reject) => {
       this.getFileFromMultiPartForm(request).then(file => {
         // if (appConfig.action.deployBlueprint.grpcEnabled)
         if (appConfig.action.grpcEnabled)
-          return this.uploadFileToBlueprintProcessorGrpc(file, "PUBLISH", response);
+          return this.uploadFileToBlueprintProcessorGrpc(file, 'PUBLISH', response);
         else
-          return this.uploadFileToBlueprintController(file, "/blueprint-model/publish/", response);
+          return this.uploadFileToBlueprintController(file, '/blueprint-model/publish/', response);
       }, err => {
         reject(err);
       });
@@ -227,19 +238,19 @@ export class BlueprintRestController {
         'multipart/form-data': {
           // Skip body parsing
           'x-parser': 'stream',
-          schema: { type: 'object' },
+          schema: {type: 'object'},
         },
       },
     })
-    request: Request,
+      request: Request,
     @inject(RestBindings.Http.RESPONSE) response: Response,
   ): Promise<Response> {
     return new Promise((resolve, reject) => {
       this.getFileFromMultiPartForm(request).then(file => {
         if (appConfig.action.grpcEnabled)
-          return this.uploadFileToBlueprintProcessorGrpc(file, "ENRICH", response);
+          return this.uploadFileToBlueprintProcessorGrpc(file, 'ENRICH', response);
         else
-          return this.uploadFileToBlueprintController(file, "/blueprint-model/enrich/", response)
+          return this.uploadFileToBlueprintController(file, '/blueprint-model/enrich/', response);
         //   this.uploadFileToBlueprintController(file, "/blueprint-model/enrich/", response).then(resp => {
         //     resolve(resp);
         //   }, err => {
@@ -261,14 +272,14 @@ export class BlueprintRestController {
     if (appConfig.action.grpcEnabled)
       return this.downloadFileFromBlueprintProcessorGrpc(name, version, response);
     else
-      return this.downloadFileFromBlueprintController("/blueprint-model/download/by-name/" + name + "/version/" + version, response);
+      return this.downloadFileFromBlueprintController('/blueprint-model/download/by-name/' + name + '/version/' + version, response);
   }
 
 
   async getFileFromMultiPartForm(request: Request): Promise<multiparty.File> {
     return new Promise((resolve, reject) => {
       let form = new multiparty.Form();
-      form.parse(request, (err: any, fields: any, files: { [x: string]: any[]; }) => {
+      form.parse(request, (err: any, fields: any, files: {[x: string]: any[];}) => {
         if (err) reject(err);
         let file = files['file'][0]; // get the file from the returned files object
         if (!file) {
@@ -277,7 +288,7 @@ export class BlueprintRestController {
           resolve(file);
         }
       });
-    })
+    });
   }
 
   @post('/controllerblueprint/deploy-blueprint')
@@ -289,20 +300,20 @@ export class BlueprintRestController {
         'multipart/form-data': {
           // Skip body parsing
           'x-parser': 'stream',
-          schema: { type: 'object' },
+          schema: {type: 'object'},
         },
       },
     })
-    request: Request,
+      request: Request,
     @inject(RestBindings.Http.RESPONSE) response: Response,
   ): Promise<Response> {
     return new Promise((resolve, reject) => {
       this.getFileFromMultiPartForm(request).then(file => {
         // if (appConfig.action.deployBlueprint.grpcEnabled)
         if (appConfig.action.grpcEnabled)
-          return this.uploadFileToBlueprintProcessorGrpc(file, "PUBLISH", response);
+          return this.uploadFileToBlueprintProcessorGrpc(file, 'PUBLISH', response);
         else
-          return this.uploadFileToBlueprintProcessor(file, "/execution-service/upload/", response);
+          return this.uploadFileToBlueprintProcessor(file, '/execution-service/upload/', response);
       }, err => {
         reject(err);
       });
@@ -322,17 +333,17 @@ export class BlueprintRestController {
       url: url,
       headers: {
         Authorization: authToken,
-        'content-type': 'multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW'
+        'content-type': 'multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW',
       },
       formData: {
         file: {
           value: fs.createReadStream(file.path),
           options: {
             filename: 'cba.zip',
-            contentType: 'application/zip'
-          }
-        }
-      }
+            contentType: 'application/zip',
+          },
+        },
+      },
     };
 
     var removeTempFile = () => {
@@ -341,19 +352,19 @@ export class BlueprintRestController {
           console.error(err);
         }
       });
-    }
+    };
 
     return new Promise((resolve, reject) => {
       request_lib.post(options)
-        .on("error", err => {
+        .on('error', err => {
           reject(err);
         })
         .pipe(response)
-        .once("finish", () => {
+        .once('finish', () => {
           removeTempFile();
           resolve(response);
         });
-    })
+    });
   }
 
   async downloadFileFromBlueprintController(uri: string, response: Response): Promise<Response> {
@@ -365,18 +376,18 @@ export class BlueprintRestController {
       url: url,
       headers: {
         Authorization: authToken,
-      }
+      },
     };
     return new Promise((resolve, reject) => {
       request_lib.get(options)
-        .on("error", err => {
+        .on('error', err => {
           reject(err);
         })
         .pipe(response)
-        .once("finish", () => {
+        .once('finish', () => {
           resolve(response);
         });
-    })
+    });
   }
 
   async uploadFileToBlueprintProcessorGrpc(file: multiparty.File, actionName: string, response: Response): Promise<Response> {
@@ -390,6 +401,7 @@ export class BlueprintRestController {
       });
     });
   }
+
   async downloadFileFromBlueprintProcessorGrpc(blueprintName: string, blueprintVersion: string, response: Response): Promise<Response> {
     return new Promise<Response>((resolve, reject) => {
       bluePrintManagementServiceGrpcClient.downloadBlueprint(blueprintName, blueprintVersion)
diff --git a/cds-ui/server/src/datasources/blueprint.datasource-template.ts b/cds-ui/server/src/datasources/blueprint.datasource-template.ts
index d51d1ba7b..d7ac14b26 100644
--- a/cds-ui/server/src/datasources/blueprint.datasource-template.ts
+++ b/cds-ui/server/src/datasources/blueprint.datasource-template.ts
@@ -100,6 +100,21 @@ export default {
                 "getMetaDataPagedBlueprints": ["limit", "offset", "sort", "keyword"],
             }
         },
+        {
+            "template": {
+                "method": "GET",
+                "url": processorApiConfig.http.url + "/blueprint-model/by-name/{name}/version/{version}",
+                "headers": {
+                    "accepts": "application/json",
+                    "content-type": "application/json",
+                    "authorization": processorApiConfig.http.authToken
+                },
+                "responsePath": "$",
+            },
+            "functions": {
+                "getBlueprintByNameAndVersion": ["name", "version"],
+            }
+        },
     ]
 
 };
diff --git a/cds-ui/server/src/services/blueprint.service.ts b/cds-ui/server/src/services/blueprint.service.ts
index 875eb5e38..cb601f3cf 100644
--- a/cds-ui/server/src/services/blueprint.service.ts
+++ b/cds-ui/server/src/services/blueprint.service.ts
@@ -9,6 +9,7 @@ export interface BlueprintService {
    getByTags(tags: string): Promise<JSON>;
    getPagedBueprints(limit: number, offset: number , sort: string): Promise<any>;
    getMetaDataPagedBlueprints(limit: number, offset: number, sort: string, keyword: string): Promise<any>;
+   getBlueprintByNameAndVersion(name:string, version:string): Promise<any>;
 
 
 }