adding new designer component, sort and configuration dashboard

Issue-ID: CCSDK-1982
Issue-ID: CCSDK-1984
Issue-ID: CCSDK-1983

Signed-off-by: ShaabanEltanany <shaaban.eltanany.ext@orange.com>
Change-Id: I05d12bbf5ebc940bd6983da06af3f85ee18eb723

35 files changed, 942 insertions, 317 deletions

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 cfe8061f3..506d3b90f 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
@@ -88,6 +88,7 @@ export const GlobalContants = {
 
 export const BlueprintURLs = {
     getAllBlueprints: '/controllerblueprint/all',
+    getOneBlueprint: '/controllerblueprint',
     getPagedBlueprints: '/controllerblueprint/paged',
     searchByTag: '/controllerblueprint/searchByTags/',
     save: '/controllerblueprint/create-blueprint',
@@ -106,7 +107,7 @@ export const ResourceDictionaryURLs = {
     searchResourceDictionaryByName: '',
     getSources: '/resourcedictionary/source-mapping',
     getModelType: '/resourcedictionary/model-type',
-    getDataType: '/resourcedictionary/model-type/by-definition/data_type'
+    getResourceDictionary: '/resourcedictionary/model-type/by-definition'
 };
 
 export const ControllerCatalogURLs = {
diff --git a/cds-ui/designer-client/src/app/common/core/services/api.typed.service.ts b/cds-ui/designer-client/src/app/common/core/services/api.typed.service.ts
index 2f3778c1a..9c9477f33 100644
--- a/cds-ui/designer-client/src/app/common/core/services/api.typed.service.ts
+++ b/cds-ui/designer-client/src/app/common/core/services/api.typed.service.ts
@@ -48,4 +48,16 @@ export class ApiService<T> {
 
         return this.httpClient.post(url, body, options);
     }
+
+    getOne(url: string, params?: {}): Observable<T> {
+        console.log('params', params);
+        let httpParams = new HttpParams();
+        for (const key in params) {
+            if (params.hasOwnProperty(key)) {
+                httpParams = httpParams.append(key, params[key]);
+            }
+        }
+        const options = {params: httpParams};
+        return this.httpClient.get<T>(url, options);
+    }
 }
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.css
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.css
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
new file mode 100644
index 000000000..804aad057
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html
@@ -0,0 +1,7 @@
+<app-header>
+</app-header>
+<p>package-viewing works!
+
+
+    {{viewedPackage!.artifactName}}}
+</p>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.spec.ts
new file mode 100644
index 000000000..3f9ba9c95
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ConfigurationDashboardComponent } from './configuration-dashboard.component';
+
+describe('PackageViewingComponent', () => {
+  let component: ConfigurationDashboardComponent;
+  let fixture: ComponentFixture<ConfigurationDashboardComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ConfigurationDashboardComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ConfigurationDashboardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
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
new file mode 100644
index 000000000..84fdafb36
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts
@@ -0,0 +1,34 @@
+import {Component, OnInit} from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
+import {PackageStore} from './package.store';
+import {BluePrintDetailModel} from '../model/BluePrint.detail.model';
+
+
+@Component({
+    selector: 'app-configuration-dashboard',
+    templateUrl: './configuration-dashboard.component.html',
+    styleUrls: ['./configuration-dashboard.component.css']
+})
+export class ConfigurationDashboardComponent implements OnInit {
+    viewedPackage: BluePrintDetailModel = new BluePrintDetailModel();
+
+    constructor(private route: ActivatedRoute, private configurationStore: PackageStore) {
+
+        const id = this.route.snapshot.paramMap.get('id');
+        this.configurationStore.getPagedPackages(id);
+        this.configurationStore.state$.subscribe(
+            el => {
+                if (el && el.configuration) {
+                    this.viewedPackage = el.configuration;
+                }
+            }
+        );
+
+
+    }
+
+    ngOnInit() {
+
+    }
+
+}
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
new file mode 100644
index 000000000..51d0e9db1
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.service.ts
@@ -0,0 +1,22 @@
+import {Injectable} from '@angular/core';
+import {ApiService} from '../../../../common/core/services/api.typed.service';
+import {BlueprintURLs} from '../../../../common/constants/app-constants';
+import {Observable} from 'rxjs';
+import {BluePrintDetailModel} from '../model/BluePrint.detail.model';
+
+
+@Injectable({
+    providedIn: 'root'
+})
+export class ConfigurationDashboardService {
+
+
+    constructor(private api: ApiService<BluePrintDetailModel>) {
+
+    }
+
+    getBluePrintModel(id: string): Observable<BluePrintDetailModel> {
+        return this.api.getOne(BlueprintURLs.getOneBlueprint + '/' + id);
+
+    }
+}
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
new file mode 100644
index 000000000..efbaef8bd
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/package.store.ts
@@ -0,0 +1,58 @@
+/*
+============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 {Store} from '../../../../common/core/stores/Store';
+import {BluePrintDetailModel} from '../model/BluePrint.detail.model';
+import {ConfigurationDashboardService} from './configuration-dashboard.service';
+import {PackageDashboardState} from '../model/package-dashboard.state';
+
+
+@Injectable({
+    providedIn: 'root'
+})
+export class PackageStore extends Store<PackageDashboardState> {
+
+
+    constructor(private configurationDashboardService: ConfigurationDashboardService) {
+        super(new PackageDashboardState());
+    }
+
+    getPagedPackages(id: string) {
+        this.configurationDashboardService.getBluePrintModel(id).subscribe(
+            (bluePrintDetailModels) => {
+                this.setState({
+                    ...this.state,
+                    configuration: bluePrintDetailModels[0]
+                });
+            });
+        /* bluePrintDetailModels.forEach(
+            bluePrintDetailModel => {
+                 this.setState({
+                     ...this.state,
+                     configuration: bluePrintDetailModel
+                 });
+             });*/
+
+
+    }
+
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/actions/actions.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/actions/actions.component.css
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/actions/actions.component.css
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/actions/actions.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/actions/actions.component.html
new file mode 100644
index 000000000..df272bce4
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/actions/actions.component.html
@@ -0,0 +1,15 @@
+<div>
+    <b>Select from other packages:</b>
+    <div class="actions-scroll">
+        <div class="custom-control custom-checkbox" *ngFor="let action of actions">
+            <input type="checkbox" class="custom-control-input" id="customCheck1">
+            <label class="custom-control-label" for="customCheck1">Action name
+                <p class="m-0">{{action}}</p>
+            </label>
+        </div>
+    </div>
+    <div class="btn-group inserActionBtns" role="group" aria-label="Basic example">
+        <button type="button" class="btn btn-secondary mr-3">Insert</button>
+        <button type="button" class="btn btn-secondary">Cancel</button>
+    </div>
+</div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/actions/actions.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/actions/actions.component.spec.ts
new file mode 100644
index 000000000..2e30615e0
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/actions/actions.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ActionsComponent } from './actions.component';
+
+describe('ActionsComponent', () => {
+  let component: ActionsComponent;
+  let fixture: ComponentFixture<ActionsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ActionsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ActionsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/actions/actions.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/actions/actions.component.ts
new file mode 100644
index 000000000..144cd0a70
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/actions/actions.component.ts
@@ -0,0 +1,19 @@
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+    selector: 'app-actions',
+    templateUrl: './actions.component.html',
+    styleUrls: ['./actions.component.css']
+})
+export class ActionsComponent implements OnInit {
+    actions: string[] = [];
+
+    constructor() {
+      this.actions.push('action 1 ');
+      this.actions.push('action 2');
+    }
+
+    ngOnInit() {
+    }
+
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css
index 067d30d7f..799407093 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css
@@ -1,6 +1,6 @@
 
 body{
-  background-image: linear-gradient(-45deg, #000 6%, #fff 0) !important;
+  background-image: linear-gradient(-45deg, #000 9%, #fff 0) !important;
   background-size: 6px 6px !important;  
 }
 
@@ -201,7 +201,7 @@ button.rotate{
   border-color: #DEE8F3;
 }
 .actions-scroll{
-  max-height: 160px;
+  max-height: 29vh;
   overflow-y: auto;
   margin-top: 12px;
   margin-bottom: 20px;
@@ -280,6 +280,10 @@ p.compType-4{
 .componentsList{
   padding-bottom: 0;
 }
+.custom-control.custom-checkbox:hover,
+.custom-control-label:hover{
+  cursor: pointer;
+}
 .actionsList .custom-checkbox,
 .componentsList .list-group-item{
   margin-bottom: 10px;
@@ -344,7 +348,6 @@ p.compType-4{
   background:#F4F9FE;
   border: solid 1px #E8EFF8;
   box-shadow: 0 2px 6px rgba(47, 83, 151, .1);
-  margin-left: 20em;
 }
 .editBar .btn-group{
   box-shadow: 0 2px 6px rgba(47, 83, 151, .15);
@@ -544,4 +547,4 @@ p.compType-4{
   color: #FF6469;
   font-size: 10px;
 
-}
\ No newline at end of file
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html
index 991e126c0..9021bf5e9 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html
@@ -1,74 +1,79 @@
 <!--Header-->
 <header>
-  <div class="row m-0">
-    <div class="col pl-0">
-      <p class="logo mb-0"></p>
-      <nav aria-label="breadcrumb">
-        <ol class="breadcrumb mb-0">
-          <li class="breadcrumb-item">
-            <a href="#">CBA Packages</a>
-          </li>
-          <li class="breadcrumb-item">
-            <a href="#">Package Name</a>
-          </li>
-          <li class="breadcrumb-item active" aria-current="page">
-            <p class="mb-0">Topology View</p>
-          </li>
-        </ol>
-      </nav>
-    </div>
-    <div class="col pr-0 text-right">
-      <ul class="topology-actions">
-        <li>
-          <div class="btn-group" role="group" aria-label="Basic example">
-            <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom" data-tooltip="Preview">
-              <i class="fa fa-eye"></i>
-            </a>
-            <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom" data-tooltip="Download">
-              <i class="fa fa-download"></i>
-            </a>
-            <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom" data-tooltip="Share">
-              <i class="fa fa-share-square"></i>
-            </a>
-          </div>
-        </li>
-        <li>
-          <div class="dropdown">
-            <input class="dropdown-toggle" type="text">
-            <div class="dropdown-text">Save</div>
-            <ul class="dropdown-content">
-              <li>
-                <a href="">Save</a>
-              </li>
-              <li>
-                <a href="">Save &amp; Deploy</a>
-              </li>
+    <div class="row m-0">
+        <div class="col pl-0">
+            <p class="logo mb-0"></p>
+            <nav aria-label="breadcrumb">
+                <ol class="breadcrumb mb-0">
+                    <li class="breadcrumb-item">
+                        <a href="#">CBA Packages</a>
+                    </li>
+                    <li class="breadcrumb-item">
+                        <a href="#">Package Name</a>
+                    </li>
+                    <li class="breadcrumb-item active" aria-current="page">
+                        <p class="mb-0">Topology View</p>
+                    </li>
+                </ol>
+            </nav>
+        </div>
+        <div class="col pr-0 text-right">
+            <ul class="topology-actions">
+                <li>
+                    <div class="btn-group" role="group" aria-label="Basic example">
+                        <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom"
+                           data-tooltip="Preview">
+                            <i class="fa fa-eye"></i>
+                        </a>
+                        <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom"
+                           data-tooltip="Download">
+                            <i class="fa fa-download"></i>
+                        </a>
+                        <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom"
+                           data-tooltip="Share">
+                            <i class="fa fa-share-square"></i>
+                        </a>
+                    </div>
+                </li>
+                <li>
+                    <div class="dropdown">
+                        <input class="dropdown-toggle" type="text">
+                        <div class="dropdown-text">Save</div>
+                        <ul class="dropdown-content">
+                            <li>
+                                <a href="">Save</a>
+                            </li>
+                            <li>
+                                <a href="">Save &amp; Deploy</a>
+                            </li>
+                        </ul>
+                    </div>
+                </li>
             </ul>
-          </div>
-        </li>
-      </ul>
 
 
+        </div>
     </div>
-  </div>
 </header>
 <ng-sidebar-container class="sidebar-container">
-  <!-- Controller SideBar -->
-  <ng-sidebar [(opened)]="controllerSideBar" [sidebarClass]="'demo-sidebar controllerSidebar container-fluid'" [mode]="'push'"
-    #sidebarLeft>
-    <div class="row">
-      <div class="col-12 p-0">
-        <form>
-          <input type="text" class="form-control input-search-controller" placeholder="Search actions and functions">
-        </form>
-      </div>
-      <h1 class="col-12">Actions</h1>
-      <div class="col-12 text-center p-0">
-        <div class="btn-group actionBtns" role="group">
-          <button type="button" class="btn">Insert Custom</button>
-          <button type="button" class="btn">Import Action</button>
-        </div>
-      </div>
+    <!-- Controller SideBar -->
+    <ng-sidebar [(opened)]="controllerSideBar" [sidebarClass]="'demo-sidebar controllerSidebar container-fluid'"
+                [mode]="'push'"
+                #sidebarLeft>
+        <div class="row">
+            <div class="col-12 p-0">
+                <form>
+                    <input type="text" class="form-control input-search-controller"
+                           placeholder="Search actions and functions">
+                </form>
+            </div>
+            <h1 class="col-12">Actions</h1>
+            <div class="col-12 text-center p-0">
+                <div class="btn-group actionBtns" role="group">
+                    <button type="button" class="btn">Insert Custom</button>
+                    <button type="button" class="btn">Import Action</button>
+                </div>
+            </div><!--
       <div class="col-12 actionsList">
         <b>Select from other packages:</b>
         <div class="actions-scroll">
@@ -102,236 +107,231 @@
           <button type="button" class="btn btn-secondary">Cancel</button>
         </div>
       </div>
-      <h1 class="col-12">Functions</h1>
-      <div class="col-12 componentsList">
-        <b>Drag and drop function to Action’s box</b>
-        <ul class="list-group actions-scroll">
-          <li class="list-group-item">
-            <p class="compType-1">component-resource-resolution</p>
-          </li>
-          <li class="list-group-item">
-            <p class="compType-2">component-netconf-executor</p>
-          </li>
-          <li class="list-group-item">
-            <p class="compType-3">component-remote-ansible-executor</p>
-          </li>
-          <li class="list-group-item">
-            <p class="compType-4">dg-generic</p>
-          </li>
-          <li class="list-group-item">
-            <p class="compType-1">component-resource-resolution</p>
-          </li>
-        </ul>
-      </div>
-    </div>
-  </ng-sidebar>
-  <!-- Page content -->
-  <div ng-sidebar-content id="paper">
-    <button class="rotate" (click)="_toggleSidebar1()">
+-->
+            <app-actions class="col-12 actionsList"></app-actions>
+            <app-functions></app-functions>
+        </div>
+    </ng-sidebar>
+    <!-- Page content -->
+    <div ng-sidebar-content>
+        <button class="rotate" (click)="_toggleSidebar1()">
       <span>
         Controller
         <i class="fa fa-angle-double-left"></i>
       </span>
-    </button>
-    <!-- Canvas -->
-    <div class="editBar text-center">
-      <div class="btn-group mr-2" role="group" aria-label="First group">
-        <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Undo">
-          <img src="/assets/img/icon-undoActive.svg">
-        </button>
-        <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Redo">
-          <img src="/assets/img/icon-redo.svg">
-        </button>
-      </div>
-      <div class="btn-group mr-2" role="group" aria-label="Second group">
-        <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Zoom Out">
-          <img src="/assets/img/icon-zoomOut.svg">
         </button>
-        <button type="button" class="btn btn-secondary pl-0 pr-0">100%</button>
-        <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Zoom In">
-          <img src="/assets/img/icon-zoomIn.svg">
-        </button>
-      </div>
-      <div class="btn-group viewBtns" role="group" aria-label="Third group">
-        <button type="button" class="btn btn-secondary topologySource active">View</button>
-        <button type="button" class="btn btn-secondary topologyView">Source</button>
-      </div>
-    </div>
-    <div class="card actionContainer">
-      <div class="card-header">
-        <span>Action 1</span>
-      </div>
-      <div class="card-body">
-        <a (click)="sidebarRight.open()" class="componentContainer text-center">
-          <img src="/assets/img/icon-comType1.svg" title="">
-          <h2>config-assign</h2>
-          <p>component-resource-resolution</p>
-        </a>
-        <a (click)="sidebarRight.open()" class="componentContainer text-center">
-          <img src="/assets/img/icon-comType2.svg" title="">
-          <h2>execute</h2>
-          <p>component-netconf-executor</p>
-        </a>
-        <a (click)="sidebarRight.open()" class="componentContainer text-center">
-          <img src="/assets/img/icon-comType3.svg" title="">
-          <h2>function 1</h2>
-          <p>dg-generic</p>
-        </a>
-        <a (click)="sidebarRight.open()" class="componentContainer text-center">
-          <img src="/assets/img/icon-comType2.svg" title="">
-          <h2>execute</h2>
-          <p>component-netconf-executor</p>
-        </a>
-      </div>
-    </div>
-    <!-- <button (click)="_toggleSidebar2()" style="float:right;">Toggle sidebar right</button> -->
-  </div>
-  <!-- Attribute SideBar -->
-  <ng-sidebar [(opened)]="attributesSideBar" [sidebarClass]="'demo-sidebar attributesSideBar '" [mode]="'push'" [position]="'right'"
-    #sidebarRight>
-    <div class="container-fluid0">
-      <div class="row m-0">
-        <div class="col-2 pr-0">
-          <button (click)="sidebarRight.close()" class="closeBar"></button>
+        <!-- Canvas -->
+        <div class="editBar text-center">
+            <div class="btn-group mr-2" role="group" aria-label="First group">
+                <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Undo">
+                    <img src="/assets/img/icon-undoActive.svg">
+                </button>
+                <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Redo">
+                    <img src="/assets/img/icon-redo.svg">
+                </button>
+            </div>
+            <div class="btn-group mr-2" role="group" aria-label="Second group">
+                <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Zoom Out">
+                    <img src="/assets/img/icon-zoomOut.svg">
+                </button>
+                <button type="button" class="btn btn-secondary pl-0 pr-0">100%</button>
+                <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Zoom In">
+                    <img src="/assets/img/icon-zoomIn.svg">
+                </button>
+            </div>
+            <div class="btn-group viewBtns" role="group" aria-label="Third group">
+                <button type="button" class="btn btn-secondary topologySource active">View</button>
+                <button type="button" class="btn btn-secondary topologyView">Source</button>
+            </div>
         </div>
-        <div class="col-10 attributesContainer p-0">
-          <h1>Action Attributes</h1>
-          <div class="scrolll">
-            <div class="row m-0">
-              <div class="col-12">
-                <div class="form-group actionName">
-                  <label for="exampleInputEmail1">Action Name</label>
-                  <input type="text" class="form-control" placeholder="Action 1">
-                </div>
-              </div>
+        <div class="card actionContainer">
+            <div class="card-header">
+                <span>Action 1</span>
+            </div>
+            <div class="card-body">
+                <a (click)="sidebarRight.open()" class="componentContainer text-center">
+                    <img src="/assets/img/icon-comType1.svg" title="">
+                    <h2>config-assign</h2>
+                    <p>component-resource-resolution</p>
+                </a>
+                <a (click)="sidebarRight.open()" class="componentContainer text-center">
+                    <img src="/assets/img/icon-comType2.svg" title="">
+                    <h2>execute</h2>
+                    <p>component-netconf-executor</p>
+                </a>
+                <a (click)="sidebarRight.open()" class="componentContainer text-center">
+                    <img src="/assets/img/icon-comType3.svg" title="">
+                    <h2>function 1</h2>
+                    <p>dg-generic</p>
+                </a>
+                <a (click)="sidebarRight.open()" class="componentContainer text-center">
+                    <img src="/assets/img/icon-comType2.svg" title="">
+                    <h2>execute</h2>
+                    <p>component-netconf-executor</p>
+                </a>
             </div>
-            <div class="accordion" id="accordionExample">
-              <div class="card">
-                <div class="card-header row" id="headingOne">
-                  <h2 class="col-10 mb-0">
-                    <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
-                      Steps
-                    </button>
-                  </h2>
-                  <div class="col-2 p-0 text-center">
-                    <button class="btn btn-addAttribute" type="button"></button>
-                  </div>
+        </div>
+        <!-- <button (click)="_toggleSidebar2()" style="float:right;">Toggle sidebar right</button> -->
+    </div>
+    <!-- Attribute SideBar -->
+    <ng-sidebar [(opened)]="attributesSideBar" [sidebarClass]="'demo-sidebar attributesSideBar '" [mode]="'push'"
+                [position]="'right'"
+                #sidebarRight>
+        <div class="container-fluid0">
+            <div class="row m-0">
+                <div class="col-2 pr-0">
+                    <button (click)="sidebarRight.close()" class="closeBar"></button>
                 </div>
+                <div class="col-10 attributesContainer p-0">
+                    <h1>Action Attributes</h1>
+                    <div class="scrolll">
+                        <div class="row m-0">
+                            <div class="col-12">
+                                <div class="form-group actionName">
+                                    <label for="exampleInputEmail1">Action Name</label>
+                                    <input type="text" class="form-control" placeholder="Action 1">
+                                </div>
+                            </div>
+                        </div>
+                        <div class="accordion" id="accordionExample">
+                            <div class="card">
+                                <div class="card-header row" id="headingOne">
+                                    <h2 class="col-10 mb-0">
+                                        <button class="btn btn-link" type="button" data-toggle="collapse"
+                                                data-target="#collapseOne" aria-expanded="true"
+                                                aria-controls="collapseOne">
+                                            Steps
+                                        </button>
+                                    </h2>
+                                    <div class="col-2 p-0 text-center">
+                                        <button class="btn btn-addAttribute" type="button"></button>
+                                    </div>
+                                </div>
 
-                <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
-                  <div class="card-body">
-                    <div class="row">
-                      <div class="col-9">
-                        <label for="exampleInputEmail1">Name</label> &nbsp;
-                        <button type="button" class="btn p-0">
-                          <img src="/assets/img/icon-edit.svg">
-                        </button>
-                      </div>
-                      <div class="col-3">
-                        <button type="button" class="btn btn-deleteAttribute">Delete</button>
-                      </div>
-                    </div>
-                    <div class="form-group">
-                      <label for="exampleInputEmail1">Name</label>
-                      <input type="text" class="form-control" placeholder="Action 1">
-                    </div>
-                    <div class="form-group">
-                      <label for="exampleFormControlTextarea1">Description</label>
-                      <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
-                    </div>
-                    <div class="form-group">
-                      <label for="exampleInputEmail1">Target</label>
-                      <input type="text" class="form-control" placeholder="Action 1">
-                    </div>
+                                <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
+                                     data-parent="#accordionExample">
+                                    <div class="card-body">
+                                        <div class="row">
+                                            <div class="col-9">
+                                                <label for="exampleInputEmail1">Name</label> &nbsp;
+                                                <button type="button" class="btn p-0">
+                                                    <img src="/assets/img/icon-edit.svg">
+                                                </button>
+                                            </div>
+                                            <div class="col-3">
+                                                <button type="button" class="btn btn-deleteAttribute">Delete</button>
+                                            </div>
+                                        </div>
+                                        <div class="form-group">
+                                            <label for="exampleInputEmail1">Name</label>
+                                            <input type="text" class="form-control" placeholder="Action 1">
+                                        </div>
+                                        <div class="form-group">
+                                            <label for="exampleFormControlTextarea1">Description</label>
+                                            <textarea class="form-control" id="exampleFormControlTextarea1"
+                                                      rows="3"></textarea>
+                                        </div>
+                                        <div class="form-group">
+                                            <label for="exampleInputEmail1">Target</label>
+                                            <input type="text" class="form-control" placeholder="Action 1">
+                                        </div>
 
-                  </div>
-                </div>
-              </div>
-              <div class="card">
-                <div class="card-header row" id="headingTwo">
-                  <h2 class="col-10 mb-0">
-                    <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
-                      Inputs
-                    </button>
-                  </h2>
-                  <div class="col-2 p-0 text-center">
-                    <button class="btn btn-addAttribute" type="button"></button>
-                  </div>
-                </div>
-                <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#accordionExample">
-                  <div class="card-body">
-                    <div class="row">
-                      <div class="col-9">
-                        <label for="exampleInputEmail1">Name</label> &nbsp;
-                        <button type="button" class="btn p-0">
-                          <img src="/assets/img/icon-edit.svg">
-                        </button>
-                      </div>
-                      <div class="col-3">
-                        <button type="button" class="btn btn-deleteAttribute">Delete</button>
-                      </div>
-                    </div>
-                    <div class="form-group">
-                      <label for="exampleInputEmail1">Name</label>
-                      <input type="text" class="form-control" placeholder="Action 1">
-                    </div>
-                    <div class="form-group">
-                      <label for="exampleFormControlTextarea1">Description</label>
-                      <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
-                    </div>
-                    <div class="form-group">
-                      <label for="exampleInputEmail1">Target</label>
-                      <input type="text" class="form-control" placeholder="Action 1">
-                    </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="card">
+                                <div class="card-header row" id="headingTwo">
+                                    <h2 class="col-10 mb-0">
+                                        <button class="btn btn-link" type="button" data-toggle="collapse"
+                                                data-target="#collapseTwo" aria-expanded="true"
+                                                aria-controls="collapseTwo">
+                                            Inputs
+                                        </button>
+                                    </h2>
+                                    <div class="col-2 p-0 text-center">
+                                        <button class="btn btn-addAttribute" type="button"></button>
+                                    </div>
+                                </div>
+                                <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo"
+                                     data-parent="#accordionExample">
+                                    <div class="card-body">
+                                        <div class="row">
+                                            <div class="col-9">
+                                                <label for="exampleInputEmail1">Name</label> &nbsp;
+                                                <button type="button" class="btn p-0">
+                                                    <img src="/assets/img/icon-edit.svg">
+                                                </button>
+                                            </div>
+                                            <div class="col-3">
+                                                <button type="button" class="btn btn-deleteAttribute">Delete</button>
+                                            </div>
+                                        </div>
+                                        <div class="form-group">
+                                            <label for="exampleInputEmail1">Name</label>
+                                            <input type="text" class="form-control" placeholder="Action 1">
+                                        </div>
+                                        <div class="form-group">
+                                            <label for="exampleFormControlTextarea1">Description</label>
+                                            <textarea class="form-control" id="exampleFormControlTextarea1"
+                                                      rows="3"></textarea>
+                                        </div>
+                                        <div class="form-group">
+                                            <label for="exampleInputEmail1">Target</label>
+                                            <input type="text" class="form-control" placeholder="Action 1">
+                                        </div>
 
-                  </div>
-                </div>
-              </div>
-              <div class="card">
-                <div class="card-header row" id="headingThree">
-                  <h2 class="col-10 mb-0">
-                    <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
-                      Outputs
-                    </button>
-                  </h2>
-                  <div class="col-2 p-0 text-center">
-                    <button class="btn btn-addAttribute" type="button"></button>
-                  </div>
-                </div>
-                <div id="collapseThree" class="collapse show" aria-labelledby="headingThree" data-parent="#accordionExample">
-                  <div class="card-body">
-                    <div class="row">
-                      <div class="col-9">
-                        <label for="exampleInputEmail1">Name</label> &nbsp;
-                        <button type="button" class="btn p-0">
-                          <img src="/assets/img/icon-edit.svg">
-                        </button>
-                      </div>
-                      <div class="col-3">
-                        <button type="button" class="btn btn-deleteAttribute">Delete</button>
-                      </div>
-                    </div>
-                    <div class="form-group">
-                      <label for="exampleInputEmail1">Name</label>
-                      <input type="text" class="form-control" placeholder="Action 1">
-                    </div>
-                    <div class="form-group">
-                      <label for="exampleFormControlTextarea1">Description</label>
-                      <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
-                    </div>
-                    <div class="form-group">
-                      <label for="exampleInputEmail1">Target</label>
-                      <input type="text" class="form-control" placeholder="Action 1">
-                    </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="card">
+                                <div class="card-header row" id="headingThree">
+                                    <h2 class="col-10 mb-0">
+                                        <button class="btn btn-link" type="button" data-toggle="collapse"
+                                                data-target="#collapseThree" aria-expanded="true"
+                                                aria-controls="collapseThree">
+                                            Outputs
+                                        </button>
+                                    </h2>
+                                    <div class="col-2 p-0 text-center">
+                                        <button class="btn btn-addAttribute" type="button"></button>
+                                    </div>
+                                </div>
+                                <div id="collapseThree" class="collapse show" aria-labelledby="headingThree"
+                                     data-parent="#accordionExample">
+                                    <div class="card-body">
+                                        <div class="row">
+                                            <div class="col-9">
+                                                <label for="exampleInputEmail1">Name</label> &nbsp;
+                                                <button type="button" class="btn p-0">
+                                                    <img src="/assets/img/icon-edit.svg">
+                                                </button>
+                                            </div>
+                                            <div class="col-3">
+                                                <button type="button" class="btn btn-deleteAttribute">Delete</button>
+                                            </div>
+                                        </div>
+                                        <div class="form-group">
+                                            <label for="exampleInputEmail1">Name</label>
+                                            <input type="text" class="form-control" placeholder="Action 1">
+                                        </div>
+                                        <div class="form-group">
+                                            <label for="exampleFormControlTextarea1">Description</label>
+                                            <textarea class="form-control" id="exampleFormControlTextarea1"
+                                                      rows="3"></textarea>
+                                        </div>
+                                        <div class="form-group">
+                                            <label for="exampleInputEmail1">Target</label>
+                                            <input type="text" class="form-control" placeholder="Action 1">
+                                        </div>
 
-                  </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
-              </div>
             </div>
-          </div>
         </div>
-      </div>
-    </div>
-  </ng-sidebar>
+    </ng-sidebar>
 
-</ng-sidebar-container>
\ No newline at end of file
+</ng-sidebar-container>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts
index 9e5f57b85..6d36a961f 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts
@@ -1,7 +1,4 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
-import * as $ from 'jquery';
-import * as _ from 'lodash';
-import * as joint from '../../../../../../node_modules/jointjs/dist/joint.js';
 
 @Component({
   selector: 'app-designer',
@@ -13,9 +10,6 @@ export class DesignerComponent implements OnInit {
 
   private controllerSideBar: boolean;
   private attributesSideBar: boolean;
-  public graph: any;
-  public paper: any;
-
   constructor() {
     this.controllerSideBar = true;
     this.attributesSideBar = false;
@@ -29,6 +23,7 @@ export class DesignerComponent implements OnInit {
 
 
   ngOnInit() {
+
     this.attachEditorBarToCanvas();
   }
 
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.service.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.service.ts
new file mode 100644
index 000000000..913abcf17
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.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.typed.service';
+import {ResourceDictionaryURLs} from '../../../../common/constants/app-constants';
+
+
+@Injectable({
+    providedIn: 'root'
+})
+export class DesignerService {
+
+    constructor(private api: ApiService<ModelType>) {
+    }
+
+    getFunctions(modelDefinitionType: string): Observable<ModelType[]> {
+        return this.api.get(ResourceDictionaryURLs.getResourceDictionary + '/' + modelDefinitionType);
+    }
+
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.store.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.store.ts
new file mode 100644
index 000000000..554d459d2
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.store.ts
@@ -0,0 +1,48 @@
+/*
+============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 {Store} from '../../../../common/core/stores/Store';
+import {DesignerService} from './designer.service';
+import {DesignerDashboardState} from '../model/designer-dashboard.state';
+
+
+@Injectable({
+    providedIn: 'root'
+})
+export class DesignerStore extends Store<DesignerDashboardState> {
+
+    constructor(private designerService: DesignerService) {
+        super(new DesignerDashboardState());
+    }
+
+    public getFuntions() {
+        const modelDefinitionType = 'node_type';
+        this.designerService.getFunctions(modelDefinitionType).subscribe(
+            (modelType: ModelType[]) => {
+                console.log(modelType);
+                this.setState({
+                    ...this.state,
+                    functions: modelType,
+                });
+            });
+    }
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions/functions.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions/functions.component.css
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions/functions.component.css
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions/functions.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions/functions.component.html
new file mode 100644
index 000000000..b27f91f49
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions/functions.component.html
@@ -0,0 +1,21 @@
+<h1 class="col-12">Functions</h1>
+<div class="col-12 componentsList">
+    <b>Drag and drop function to Action’s box</b>
+    <ul class="list-group actions-scroll" >
+        <li class="list-group-item" *ngFor="let function of viewedFunctions">
+            <p class="compType-1">{{function.modelName}}</p>
+        </li>
+        <!--<li class="list-group-item">
+            <p class="compType-2">component-netconf-executor</p>
+        </li>
+        <li class="list-group-item">
+            <p class="compType-3">component-remote-ansible-executor</p>
+        </li>
+        <li class="list-group-item">
+            <p class="compType-4">dg-generic</p>
+        </li>
+        <li class="list-group-item">
+            <p class="compType-1">component-resource-resolution</p>
+        </li>-->
+    </ul>
+</div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions/functions.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions/functions.component.spec.ts
new file mode 100644
index 000000000..eec909b01
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions/functions.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FunctionsComponent } from './functions.component';
+
+describe('FunctionsComponent', () => {
+  let component: FunctionsComponent;
+  let fixture: ComponentFixture<FunctionsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FunctionsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FunctionsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions/functions.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions/functions.component.ts
new file mode 100644
index 000000000..2223c9fa6
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions/functions.component.ts
@@ -0,0 +1,26 @@
+import {Component, OnInit} from '@angular/core';
+import {DesignerStore} from '../designer.store';
+
+@Component({
+    selector: 'app-functions',
+    templateUrl: './functions.component.html',
+    styleUrls: ['./functions.component.css']
+})
+export class FunctionsComponent implements OnInit {
+    viewedFunctions: ModelType[] = [];
+
+    constructor(private designerStore: DesignerStore) {
+
+        this.designerStore.state$.subscribe(state => {
+            console.log(state);
+            if (state.functions) {
+                this.viewedFunctions = state.functions;
+            }
+        });
+    }
+
+    ngOnInit() {
+        this.designerStore.getFuntions();
+    }
+
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/BluePrint.detail.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/BluePrint.detail.model.ts
new file mode 100644
index 000000000..ff01695ab
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/BluePrint.detail.model.ts
@@ -0,0 +1,42 @@
+/*
+============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 {Page} from 'src/app/common/model/page';
+import {BlueprintModel} from './BluePrint.model';
+
+export class BluePrintDetailModel extends BlueprintModel {
+    blueprintModelContent: BlueprintModelContent;
+}
+
+export class BlueprintModelContent {
+    id: string;
+    name: string;
+    description: string;
+    fileContent: any;
+
+
+}
+
+/*
+export class BluePrintDetailModelContent   {
+    bluePrintDetailsModels: BluePrintDetailModel[];
+
+}*/
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/BluePrint.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/BluePrint.model.ts
index 46dab88f8..712b53b9a 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/BluePrint.model.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/BluePrint.model.ts
@@ -24,23 +24,6 @@ import { Page } from 'src/app/common/model/page';
 export class BlueprintModel {
 
 
-    constructor(id: string, artifactUUId: null, artifactType: string,
-                artifactVersion: string, artifactDescription: string,
-                internalVersion: null, createdDate: string, artifactName: string,
-                published: string, updatedBy: string, tags: string) {
-        this.id = id;
-        this.artifactUUId = artifactUUId;
-        this.artifactType = artifactType;
-        this.artifactVersion = artifactVersion;
-        this.artifactDescription = artifactDescription;
-        this.internalVersion = internalVersion;
-        this.createdDate = createdDate;
-        this.artifactName = artifactName;
-        this.published = published;
-        this.updatedBy = updatedBy;
-        this.tags = tags;
-    }
-
     id: string;
     artifactUUId?: null;
     artifactType: string;
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/ModelType.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/ModelType.model.ts
new file mode 100644
index 000000000..edbb368b3
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/ModelType.model.ts
@@ -0,0 +1,12 @@
+class ModelType {
+    modelName: string;
+    derivedFrom: string;
+    definitionType: string;
+    definition: object;
+    description: string;
+    version: string;
+    tags: string;
+    creationDate: string;
+    updatedBy: string;
+
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/designer-dashboard.state.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/designer-dashboard.state.ts
new file mode 100644
index 000000000..a8711cdbb
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/designer-dashboard.state.ts
@@ -0,0 +1,27 @@
+/*
+============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 DesignerDashboardState {
+
+    functions: ModelType[];
+    actions: string[];
+
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/package-dashboard.state.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/package-dashboard.state.ts
new file mode 100644
index 000000000..638e68c06
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/package-dashboard.state.ts
@@ -0,0 +1,28 @@
+/*
+============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 {BluePrintDetailModel} from './BluePrint.detail.model';
+
+export class PackageDashboardState  {
+    configuration: BluePrintDetailModel;
+
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.css
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.css
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.html
new file mode 100644
index 000000000..c058f81c7
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.html
@@ -0,0 +1,10 @@
+<!--Page Title-->
+<header class="page-title">
+    <div class="row">
+        <h2 class="col m-0">CBA Packages
+            <span>({{numberOfPackages}} packages)</span>
+        </h2>
+        <div class="col">
+        </div>
+    </div>
+</header>
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.spec.ts
new file mode 100644
index 000000000..06a09e851
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PackagesHeaderComponent } from './packages-header.component';
+
+describe('PackagesHeaderComponent', () => {
+  let component: PackagesHeaderComponent;
+  let fixture: ComponentFixture<PackagesHeaderComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PackagesHeaderComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PackagesHeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.ts
new file mode 100644
index 000000000..64fe9e463
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.ts
@@ -0,0 +1,23 @@
+import { Component, OnInit } from '@angular/core';
+import { PackagesStore } from '../../packages.store';
+
+@Component({
+  selector: 'app-packages-header',
+  templateUrl: './packages-header.component.html',
+  styleUrls: ['./packages-header.component.css']
+})
+export class PackagesHeaderComponent implements OnInit {
+
+  numberOfPackages: number;
+
+  constructor(private packagesStore: PackagesStore) {
+    this.packagesStore.state$
+      .subscribe(state => {
+        this.numberOfPackages = state.totalPackagesWithoutSearchorFilters;
+      });
+   }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/sort-packages/sort-packages.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/sort-packages/sort-packages.component.css
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/sort-packages/sort-packages.component.css
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/sort-packages/sort-packages.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/sort-packages/sort-packages.component.html
new file mode 100644
index 000000000..9eb45f1be
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/sort-packages/sort-packages.component.html
@@ -0,0 +1,33 @@
+<div class="row mt-4">
+    <div class="col">
+        <div class="tab-content" id="nav-tabContent">
+            <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
+                <div class="row">
+                    <!--Package Sort-->
+                    <div class="col sort-packages">
+                        Sort by:
+                        <div class="dropdown">
+                            <input class="dropdown-toggle" type="text">
+                            <div class="dropdown-text">{{selected}}</div>
+                            <ul class="dropdown-content">
+                                <li  *ngFor="let sortType of sortTypes">
+                                    <a (click)="sortPackages($event)" name={{sortType}}>{{sortType}}</a>
+                                </li>
+                                
+                            </ul>
+                        </div>
+                    </div>
+                    <!--Package Paginator-->
+                    <app-package-pagination></app-package-pagination>
+                </div>
+                <app-packages-list></app-packages-list>
+
+            </div>
+            <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
+            <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
+            <div class="tab-pane fade" id="nav-contact1" role="tabpanel" aria-labelledby="nav-contact1-tab">...
+            </div>
+        </div>
+    </div>
+</div>
+
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/sort-packages/sort-packages.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/sort-packages/sort-packages.component.spec.ts
new file mode 100644
index 000000000..dd27aa1f2
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/sort-packages/sort-packages.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SortPackagesComponent } from './sort-packages.component';
+
+describe('SortPackagesComponent', () => {
+  let component: SortPackagesComponent;
+  let fixture: ComponentFixture<SortPackagesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SortPackagesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SortPackagesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/sort-packages/sort-packages.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/sort-packages/sort-packages.component.ts
new file mode 100644
index 000000000..b63f8879f
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/sort-packages/sort-packages.component.ts
@@ -0,0 +1,32 @@
+import {Component, OnInit} from '@angular/core';
+import {PackagesStore} from '../../packages.store';
+
+@Component({
+    selector: 'app-sort-packages',
+    templateUrl: './sort-packages.component.html',
+    styleUrls: ['./sort-packages.component.css']
+})
+export class SortPackagesComponent implements OnInit {
+    sortTypes: string[];
+    selected: string;
+
+    constructor(private packagesStore: PackagesStore) {
+        this.sortTypes = Object.keys(SortByToServerValue);
+        this.selected = 'Recent';
+    }
+
+    ngOnInit() {
+    }
+
+    sortPackages(event: any) {
+        const key = event.target.name;
+        console.log(key);
+        this.selected = key;
+        this.packagesStore.sortPagedPackages(SortByToServerValue[key]);
+    }
+}
+
+enum SortByToServerValue {
+    Recent = 'DATE',
+    Name = 'NAME',
+}
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 f24ae8b00..48e8fbf32 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
@@ -3,15 +3,19 @@ import {CommonModule} 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';
-import { SharedModulesModule } from '../../shared-modules/shared-modules.module';
-import { PackagesDashboardComponent } from './packages-dashboard/packages-dashboard.component';
-import { PackageListComponent } from './packages-dashboard/package-list/package-list.component';
-import { DesignerComponent } from './designer/designer.component';
-import { SidebarModule } from 'ng-sidebar';
-import { PackagePaginationComponent } from './packages-dashboard/package-pagination/package-pagination.component';
-import { PackagesSearchComponent } from './packages-dashboard/search-by-packages/search-by-packages.component';
-import { TagsFilteringComponent } from './packages-dashboard/filter-by-tags/filter-by-tags.component';
-
+import {SharedModulesModule} from '../../shared-modules/shared-modules.module';
+import {PackagesDashboardComponent} from './packages-dashboard/packages-dashboard.component';
+import {PackageListComponent} from './packages-dashboard/package-list/package-list.component';
+import {DesignerComponent} from './designer/designer.component';
+import {SidebarModule} from 'ng-sidebar';
+import {PackagePaginationComponent} from './packages-dashboard/package-pagination/package-pagination.component';
+import {SortPackagesComponent} from './packages-dashboard/sort-packages/sort-packages.component';
+import {PackagesHeaderComponent} from './packages-dashboard/packages-header/packages-header.component';
+import {PackagesSearchComponent} from './packages-dashboard/search-by-packages/search-by-packages.component';
+import {TagsFilteringComponent} from './packages-dashboard/filter-by-tags/filter-by-tags.component';
+import {ConfigurationDashboardComponent} from './configuration-dashboard/configuration-dashboard.component';
+import {FunctionsComponent} from './designer/functions/functions.component';
+import {ActionsComponent} from './designer/actions/actions.component';
 
 
 @NgModule({
@@ -21,6 +25,11 @@ import { TagsFilteringComponent } from './packages-dashboard/filter-by-tags/filt
         DesignerComponent,
         PackagePaginationComponent,
         PackagesSearchComponent,
+        SortPackagesComponent,
+        ConfigurationDashboardComponent,
+        PackagesHeaderComponent,
+        FunctionsComponent,
+        ActionsComponent,
     ],
     imports: [
         CommonModule,