Merge "Adding Resource dictionary"

44 files changed, 1667 insertions, 16 deletions

diff --git a/cds-ui/designer-client/src/app/app-routing.module.ts b/cds-ui/designer-client/src/app/app-routing.module.ts
index c6e42cb0b..2610dc59f 100644
--- a/cds-ui/designer-client/src/app/app-routing.module.ts
+++ b/cds-ui/designer-client/src/app/app-routing.module.ts
@@ -23,7 +23,10 @@ import {NgModule} from '@angular/core';
 import {Routes, RouterModule} from '@angular/router';
 
 const routes: Routes = [
-    {path: 'packages', loadChildren: './modules/feature-modules/packages/packages.module#PackagesModule'},
+    {path: 'packages',
+     loadChildren: './modules/feature-modules/packages/packages.module#PackagesModule'},
+    {path: 'resource-dictionary',
+     loadChildren: './modules/feature-modules/resource-dictionary/resource-dictionary.module#ResourceDictionaryModule'},
     // { path: '', component: MainAppComponent },
     {
         path: '',
diff --git a/cds-ui/designer-client/src/app/app.module.ts b/cds-ui/designer-client/src/app/app.module.ts
index 9817edf70..d6e9b36df 100644
--- a/cds-ui/designer-client/src/app/app.module.ts
+++ b/cds-ui/designer-client/src/app/app.module.ts
@@ -1,4 +1,3 @@
-
 /*
 ============LICENSE_START==========================================
 ===================================================================
@@ -31,9 +30,10 @@ import {MatTabsModule} from '@angular/material/tabs';
 import {ApiService} from './common/core/services/api.service';
 import {HttpClientModule} from '@angular/common/http';
 import {PackagesModule} from './modules/feature-modules/packages/packages.module';
-import { SidebarModule } from 'ng-sidebar';
+import {SidebarModule} from 'ng-sidebar';
 import {SharedModulesModule} from './modules/shared-modules/shared-modules.module';
-import { NgxFileDropModule } from 'ngx-file-drop';
+import {NgxFileDropModule} from 'ngx-file-drop';
+import {ResourceDictionaryModule} from './modules/feature-modules/resource-dictionary/resource-dictionary.module';
 
 @NgModule({
     declarations: [
@@ -50,6 +50,8 @@ import { NgxFileDropModule } from 'ngx-file-drop';
         PackagesModule,
         SharedModulesModule,
         NgxFileDropModule,
+        ResourceDictionaryModule,
+        SidebarModule
     ],
 
     providers: [ApiService],
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 14cb001c8..e29748535 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
@@ -109,7 +109,10 @@ export const ResourceDictionaryURLs = {
     searchResourceDictionaryByNames: '/resourcedictionary/search/by-names',
     getSources: '/resourcedictionary/source-mapping',
     getModelType: '/resourcedictionary/model-type',
-    getResourceDictionary: '/resourcedictionary/model-type/by-definition'
+    getResourceDictionary: '/resourcedictionary/model-type/by-definition',
+    getMetaDatePageable: '/resourcedictionary/metadata/paged',
+    getDictionaryByName: '/resourcedictionary/by-name/',
+    getPagedDictionary: '/resourcedictionary/paged',
 };
 
 export const ControllerCatalogURLs = {
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/dictionary-api.service.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/dictionary-api.service.spec.ts
new file mode 100644
index 000000000..0bf40e43c
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/dictionary-api.service.spec.ts
@@ -0,0 +1,32 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file 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 { TestBed } from '@angular/core/testing';
+
+import { DictionaryApiService } from './dictionary-api.service';
+
+describe('DictionaryApiService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: DictionaryApiService = TestBed.get(DictionaryApiService);
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/dictionary-api.service.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/dictionary-api.service.ts
new file mode 100644
index 000000000..c253842d1
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/dictionary-api.service.ts
@@ -0,0 +1,48 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file 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 { DictionaryPage } from './model/dictionary.model';
+import { ApiService } from 'src/app/common/core/services/api.service';
+import { ResourceDictionaryURLs } from 'src/app/common/constants/app-constants';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DictionaryApiService {
+
+  constructor(private api: ApiService) { }
+
+  getPagedDictionary(pageNumber: number, pageSize: number, sortBy: string) {
+    return this.api.get(ResourceDictionaryURLs.getPagedDictionary, {
+      offset: pageNumber,
+      limit: pageSize,
+      sort: sortBy
+    });
+  }
+  getPagedDictionaryByKeyWord(keyWord: string, pageNumber: number, pageSize: number, sortBy: string) {
+    return this.api.get(ResourceDictionaryURLs.getMetaDatePageable + '/' + keyWord, {
+        offset: pageNumber,
+        limit: pageSize,
+        sort: sortBy
+    });
+  }
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/dictionary.store.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/dictionary.store.ts
new file mode 100644
index 000000000..a932327cf
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/dictionary.store.ts
@@ -0,0 +1,161 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file 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 { Observable, of } from 'rxjs';
+import { DictionaryDashboardState } from './model/dictionary-dashboard.state';
+import { DictionaryPage } from './model/dictionary.model';
+import { DictionaryApiService } from './dictionary-api.service';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class DictionaryStore extends Store<DictionaryDashboardState> {
+    // TDOD fixed for now as there is no requirement to change it from UI
+    public pageSize = 5;
+    private dictionaryContent: DictionaryPage = new DictionaryPage();
+
+    constructor(private dictionaryServiceList: DictionaryApiService) {
+        super(new DictionaryDashboardState());
+    }
+
+    public search(command: string) {
+        if (command) {
+            this.searchPagedDictionary(command, 0, this.pageSize);
+        } else {
+            this.getPagedDictionary(0, this.pageSize);
+        }
+    }
+
+    public getAll() {
+        console.log('getting all packages...');
+        this.getPagedDictionary(0, this.pageSize);
+    }
+
+    public getPage(pageNumber: number, pageSize: number) {
+        if (this.isCommandExist()) {
+            this.searchPagedDictionary(this.state.command, pageNumber, pageSize);
+        } else {
+            this.getPagedDictionary(pageNumber, pageSize);
+        }
+    }
+
+    public sortPagedDictionary(sortBy: string) {
+        if (this.isCommandExist()) {
+            this.searchPagedDictionary(this.state.command, this.state.currentPage, this.pageSize, sortBy);
+        } else {
+            this.getPagedDictionary(this.state.currentPage, this.pageSize, sortBy);
+        }
+}
+
+    public filterByTags(tags: string[]) {
+        console.log(this.state.currentPage);
+        this.getPagedDictionaryByTags(this.state.command, this.state.currentPage,
+            this.pageSize, this.state.sortBy, tags);
+
+    }
+
+    protected getPagedDictionary(pageNumber: number, pageSize: number, sortBy: string = this.state.sortBy) {
+
+        this.dictionaryServiceList.getPagedDictionary(pageNumber, pageSize, sortBy)
+            .subscribe((pages: DictionaryPage) => {
+                console.log(pages);
+                this.setState({
+                    ...this.state,
+                    page: pages,
+                    filteredPackages: pages,
+                    command: '',
+                    totalPackages: pages.totalElements,
+                    currentPage: pageNumber,
+                    // this param is set only in get all as it represents the total number of pacakges in the server
+                    totalDictionariesWithoutSearchorFilters: pages.totalElements,
+                    tags: [],
+                    sortBy
+                });
+            });
+    }
+
+    private searchPagedDictionary(keyWord: string, pageNumber: number, pageSize: number, sortBy: string = this.state.sortBy) {
+        this.dictionaryServiceList.getPagedDictionaryByKeyWord(keyWord, pageNumber, pageSize, sortBy)
+            .subscribe((pages: DictionaryPage) => {
+                console.log(pages);
+                this.setState({
+                    ...this.state,
+                    page: pages,
+                    filteredPackages: pages,
+                    command: keyWord,
+                    totalPackages: pages.totalElements,
+                    currentPage: pageNumber,
+                    tags: [],
+                    sortBy
+                });
+            });
+    }
+
+    private isCommandExist() {
+        return this.state.command;
+    }
+
+    private getPagedDictionaryByTags(keyWord: string, currentPage1: number, pageSize: number, sortBy1: string, tagsSearchable: string[]) {
+        this.getPagedDictionaryByKeyWordFilteredByTags(tagsSearchable)
+            .subscribe((pages: DictionaryPage) => {
+                this.setState({
+                    ...this.state,
+                    page: this.state.page,
+                    filteredPackages: pages,
+                    command: keyWord,
+                    tags: tagsSearchable,
+                    currentPage: currentPage1,
+                    sortBy: sortBy1,
+                    totalPackages: this.state.page.totalElements,
+                });
+            });
+    }
+
+    private getPagedDictionaryByKeyWordFilteredByTags(tagsSearchable: string[]): Observable<any> {
+        this.dictionaryContent.content = [];
+        if (tagsSearchable && tagsSearchable.length !== 0 && !tagsSearchable.includes('All')) {
+            tagsSearchable.forEach(tag => {
+                if (tag) {
+                    this.state.page.content.forEach(dictionaryModel => {
+                        if (tag.endsWith(',')) {
+                            tag = tag.replace(',', '');
+                        }
+                        dictionaryModel.tags.split(',').forEach(dictionaryModelTag => {
+                            if (dictionaryModelTag === tag) {
+                                this.dictionaryContent.content.push(dictionaryModel);
+                            }
+                        });
+                    });
+                } else {
+                    this.getPagedDictionary(this.state.currentPage, this.pageSize);
+                    return of(this.state.page);
+                }
+            });
+            this.dictionaryContent.content = this.dictionaryContent.content.filter((value, index, self) => self.indexOf(value) === index);
+            console.log('the lenght is ' + this.dictionaryContent.content.length);
+            return of(this.dictionaryContent);
+        } else {
+            this.getPagedDictionary(this.state.currentPage, this.pageSize);
+            return of(this.state.page);
+        }
+    }
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/definition.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/definition.model.ts
new file mode 100644
index 000000000..96d188a54
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/definition.model.ts
@@ -0,0 +1,30 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file 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 { Sources } from './sources.model';
+
+export class Definition {
+    tag: string;
+    name: string;
+    property: string;
+    updatedBy: string;
+    sources: Sources[];
+
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/dictionary-dashboard.state.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/dictionary-dashboard.state.ts
new file mode 100644
index 000000000..d0a0be151
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/dictionary-dashboard.state.ts
@@ -0,0 +1,33 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file 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 { DictionaryPage } from './dictionary.model';
+
+export class DictionaryDashboardState {
+
+    page: DictionaryPage;
+    filteredPackages: DictionaryPage;
+    command: string;
+    currentPage = 0;
+    totalPackages: number;
+    tags: string[];
+    sortBy = 'DATE';
+    totalDictionariesWithoutSearchorFilters: number;
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/dictionary.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/dictionary.model.ts
new file mode 100644
index 000000000..0f54f4ad2
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/dictionary.model.ts
@@ -0,0 +1,36 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file 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';
+
+export class DictionaryModel {
+
+    public name: string;
+    public tags: string;
+    public dataType: string;
+    public description: string;
+    public entrySchema: string;
+    public updatedBy: string;
+    public createdDate: string;
+    public definition: object;
+}
+
+export class DictionaryPage extends Page<DictionaryModel> {
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/metaData.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/metaData.model.ts
new file mode 100644
index 000000000..e4b9be75f
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/metaData.model.ts
@@ -0,0 +1,29 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file 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 MetaData {
+    public name: string;
+    public tags: string;
+    public dataType: string;
+    public description: string;
+    public entrySchema: string;
+    public updatedBy: string;
+    public createdDate: string;
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/sources.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/sources.model.ts
new file mode 100644
index 000000000..4074e5138
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/sources.model.ts
@@ -0,0 +1,24 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file 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 Sources {
+    sources: [];
+
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-header/dictionary-header.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-header/dictionary-header.component.css
new file mode 100644
index 000000000..f263c0086
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-header/dictionary-header.component.css
@@ -0,0 +1,19 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file 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=========================================================
+*/
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-header/dictionary-header.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-header/dictionary-header.component.html
new file mode 100644
index 000000000..fc08ebe22
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-header/dictionary-header.component.html
@@ -0,0 +1,30 @@
+<!-- /*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file 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=========================================================
+*/ -->
+
+<header class="page-title">
+    <div class="row">
+        <h2 class="col m-0">Resource Dictionary
+            <span id="numberOfPackages">({{numberOfDD}} DD)</span>
+        </h2>
+        <div class="col">
+        </div>
+    </div>
+</header>
+
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-header/dictionary-header.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-header/dictionary-header.component.spec.ts
new file mode 100644
index 000000000..46888ef9e
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-header/dictionary-header.component.spec.ts
@@ -0,0 +1,45 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file 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 { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DictionaryHeaderComponent } from './dictionary-header.component';
+
+describe('DictionaryHeaderComponent', () => {
+  let component: DictionaryHeaderComponent;
+  let fixture: ComponentFixture<DictionaryHeaderComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DictionaryHeaderComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DictionaryHeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-header/dictionary-header.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-header/dictionary-header.component.ts
new file mode 100644
index 000000000..364c71f95
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-header/dictionary-header.component.ts
@@ -0,0 +1,42 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file 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 { DictionaryStore } from '../../dictionary.store';
+
+@Component({
+  selector: 'app-dictionary-header',
+  templateUrl: './dictionary-header.component.html',
+  styleUrls: ['./dictionary-header.component.css']
+})
+export class DictionaryHeaderComponent implements OnInit {
+
+  numberOfDD: number;
+
+  constructor(private dictionaryStore: DictionaryStore) {
+    this.dictionaryStore.state$
+      .subscribe(state => {
+        this.numberOfDD = state.totalDictionariesWithoutSearchorFilters;
+      });
+   }
+  ngOnInit() {
+  }
+
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-list/dictionary-list.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-list/dictionary-list.component.css
new file mode 100644
index 000000000..f263c0086
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-list/dictionary-list.component.css
@@ -0,0 +1,19 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file 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=========================================================
+*/
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-list/dictionary-list.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-list/dictionary-list.component.html
new file mode 100644
index 000000000..1cedeeb09
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-list/dictionary-list.component.html
@@ -0,0 +1,90 @@
+<!-- /*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file 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=========================================================
+*/ -->
+
+<div class="row packages-card">
+    <div class="col-lg-3 col-md-6 d-flex">
+        <!--Add Package Card-->
+        <div class="card addPaackage-card">
+            <div class="card-body text-center">
+                <img src="/assets/img/icon-addPackage.svg" width="40%">
+            </div>
+            <div class="card-footer row">
+                <div class="col text-center">
+                    <a routerLink="/resource-dictionary/createDictionary" role="button" aria-pressed="true"
+                        class="btn-create-package float"><i class="icon-create-white" aria-hidden="true"></i>Create Package
+                    </a>
+                    <br/>
+                    <a href="#" role="button" aria-pressed="true" class="btn-import-package float mb-3"><i class="icon-import-blue" aria-hidden="true"></i>Import Package
+                    </a> 
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="col-lg-3 col-md-6 d-flex" *ngFor="let dictionary of viewedDictionary">
+        <!--Card 1-->
+        <div>
+            <div class="card">
+                <div class="card-body">
+                    <div class="row">
+                        <div class="col-9 pr-0">
+                            <a class="card-title" [routerLink]="['/dictionary/dictionaryByName', dictionary.name]"
+                                (click)="testDispatch(dictionary)">
+                                <!-- <img class="icon-deployed" src="/assets/img/icon-deploy.svg"> -->
+                                {{dictionary.name}}
+                            </a>
+                        </div>
+                        <div class="col-3">
+
+                            <div class="dropdown">
+                                <input class="dropdown-toggle" type="text">
+                                <div class="dropdown-text">
+                                    <!-- <img src="/assets/img/icon-menuDots.svg" title="Actions"> -->
+                                    <i class="icon-menuDots" aria-hidden="true"></i>
+                                </div>
+                                <ul class="dropdown-content">
+                                    <li class="action-clone">
+                                        <a href="#">
+                                            <i class="icon-clone-sm" aria-hidden="true"></i>
+                                            Clone
+                                        </a>
+                                    </li>
+                                    <li class="action-delete">
+                                        <a href="#">
+                                            <i class="icon-delete-sm" aria-hidden="true"></i>
+                                            Delete
+                                        </a>
+                                    </li>
+                                </ul>
+                            </div>
+
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col">
+                            <p class="mb-0">Last modified {{ dictionary.createdDate | date:'short' }}
+                            </p>
+                            <p class="mb-2">By {{dictionary.updatedBy}}</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-list/dictionary-list.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-list/dictionary-list.component.spec.ts
new file mode 100644
index 000000000..18b5f2b41
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-list/dictionary-list.component.spec.ts
@@ -0,0 +1,45 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file 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 { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DictionaryListComponent } from './dictionary-list.component';
+
+describe('DictionaryListComponent', () => {
+  let component: DictionaryListComponent;
+  let fixture: ComponentFixture<DictionaryListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DictionaryListComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DictionaryListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-list/dictionary-list.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-list/dictionary-list.component.ts
new file mode 100644
index 000000000..7c4c991f7
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-list/dictionary-list.component.ts
@@ -0,0 +1,51 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file 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 { DictionaryModel } from '../../model/dictionary.model';
+import { DictionaryStore } from '../../dictionary.store';
+
+@Component({
+  selector: 'app-dictionary-list',
+  templateUrl: './dictionary-list.component.html',
+  styleUrls: ['./dictionary-list.component.css']
+})
+export class DictionaryListComponent implements OnInit {
+  viewedDictionary: DictionaryModel[] = [];
+
+  constructor(private dictionaryStore: DictionaryStore) {
+      console.log('DictionaryListComponent');
+      this.dictionaryStore.state$.subscribe(state => {
+          console.log(state);
+          if (state.filteredPackages) {
+              this.viewedDictionary = state.filteredPackages.content;
+          }
+      });
+  }
+
+  ngOnInit() {
+      this.dictionaryStore.getAll();
+  }
+
+  testDispatch(dictionary: DictionaryModel) {
+      console.log(dictionary.name);
+  }
+
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-pagination/dictionary-pagination.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-pagination/dictionary-pagination.component.css
new file mode 100644
index 000000000..f263c0086
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-pagination/dictionary-pagination.component.css
@@ -0,0 +1,19 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file 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=========================================================
+*/
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-pagination/dictionary-pagination.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-pagination/dictionary-pagination.component.html
new file mode 100644
index 000000000..8909ef431
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-pagination/dictionary-pagination.component.html
@@ -0,0 +1,25 @@
+<!-- /*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file 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=========================================================
+*/ -->
+
+<div class="col package-paginator pr-0">
+    <ngb-pagination [collectionSize]="totalCount" [(page)]="pageNumber" [pageSize]="pageSize" class="float-right"
+        (pageChange)="getPageFromService($event)">
+    </ngb-pagination>
+</div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-pagination/dictionary-pagination.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-pagination/dictionary-pagination.component.spec.ts
new file mode 100644
index 000000000..e9a95ffa4
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-pagination/dictionary-pagination.component.spec.ts
@@ -0,0 +1,45 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file 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 { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DictionaryPaginationComponent } from './dictionary-pagination.component';
+
+describe('DictionaryPaginationComponent', () => {
+  let component: DictionaryPaginationComponent;
+  let fixture: ComponentFixture<DictionaryPaginationComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DictionaryPaginationComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DictionaryPaginationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-pagination/dictionary-pagination.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-pagination/dictionary-pagination.component.ts
new file mode 100644
index 000000000..1cd4e2ea2
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-pagination/dictionary-pagination.component.ts
@@ -0,0 +1,60 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file 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 { DictionaryStore } from '../../dictionary.store';
+
+@Component({
+  selector: 'app-dictionary-pagination',
+  templateUrl: './dictionary-pagination.component.html',
+  styleUrls: ['./dictionary-pagination.component.css']
+})
+export class DictionaryPaginationComponent implements OnInit {
+
+  pageNumber: number;
+  totalCount: number;
+  pageSize: number;
+  previousPage: number;
+
+  constructor(private dictionaryStore: DictionaryStore) {
+      this.pageSize = dictionaryStore.pageSize;
+
+      this.dictionaryStore.state$
+          .subscribe(state => {
+              this.pageNumber = state.currentPage;
+              this.totalCount = state.totalPackages;
+          });
+  }
+
+  ngOnInit() {
+  }
+
+  public getPageFromService(page) {
+      console.log('getPageFromService', page);
+      if (isNaN(page)) {
+          page = 1;
+          console.log('page change to first...', page);
+      }
+      if (this.previousPage !== page) {
+          this.dictionaryStore.getPage(page - 1, this.dictionaryStore.pageSize);
+          this.previousPage = page;
+      }
+  }
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/filterby-tags/filterby-tags.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/filterby-tags/filterby-tags.component.css
new file mode 100644
index 000000000..f263c0086
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/filterby-tags/filterby-tags.component.css
@@ -0,0 +1,19 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file 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=========================================================
+*/
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/filterby-tags/filterby-tags.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/filterby-tags/filterby-tags.component.html
new file mode 100644
index 000000000..f8f378486
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/filterby-tags/filterby-tags.component.html
@@ -0,0 +1,38 @@
+<!-- /*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file 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=========================================================
+*/ -->
+
+<div class="dropdown packagesFilter w-100">
+    <input class="dropdown-toggle" type="text">
+    <div class="dropdown-text">{{checkBoxTages.substr(0,checkBoxTages.length-1)}}</div>
+    <ul class="dropdown-content w-100">
+        <li>
+            <div class="form-group">
+                <input type="text" (input)="reloadChanges($event)" class="form-control" placeholder="Search By Tag" autofocus>
+            </div>
+        </li>
+        <li *ngFor="let tag of viewedTags">
+            <div class="custom-control custom-checkbox">
+                <input type="checkbox" (click)="reloadDictionary($event)" class="custom-control-input" id={{tag}}>
+                <label class="custom-control-label" for={{tag}}>{{tag}}</label>
+            </div>
+        </li>
+        <li class="reset-filter"><a href="">Reset filter</a></li>
+    </ul>
+</div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/filterby-tags/filterby-tags.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/filterby-tags/filterby-tags.component.spec.ts
new file mode 100644
index 000000000..f83470f25
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/filterby-tags/filterby-tags.component.spec.ts
@@ -0,0 +1,45 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file 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 { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FilterbyTagsComponent } from './filterby-tags.component';
+
+describe('FilterbyTagsComponent', () => {
+  let component: FilterbyTagsComponent;
+  let fixture: ComponentFixture<FilterbyTagsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FilterbyTagsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FilterbyTagsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/filterby-tags/filterby-tags.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/filterby-tags/filterby-tags.component.ts
new file mode 100644
index 000000000..bdf6bd1ea
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/filterby-tags/filterby-tags.component.ts
@@ -0,0 +1,100 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file 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 { DictionaryModel, DictionaryPage } from '../../model/dictionary.model';
+import { DictionaryStore } from '../../dictionary.store';
+
+@Component({
+  selector: 'app-filterby-tags',
+  templateUrl: './filterby-tags.component.html',
+  styleUrls: ['./filterby-tags.component.css']
+})
+export class FilterbyTagsComponent implements OnInit {
+  page: DictionaryPage;
+  tags: string[] = [];
+  viewedTags: string[] = [];
+  searchTag = '';
+  viewedDictionary: DictionaryModel[] = [];
+  private checkBoxTages = '';
+  currentPage = 0;
+
+  constructor(private dictionaryStore: DictionaryStore) {
+      this.dictionaryStore.state$.subscribe(state => {
+          console.log(state);
+          if (state.page) {
+              this.viewedDictionary = state.page.content;
+              this.tags = [];
+              if (state.currentPage !== this.currentPage) {
+                  this.checkBoxTages = '';
+                  this.currentPage = state.currentPage;
+              }
+              this.viewedDictionary.forEach(element => {
+                  element.tags.split(',').forEach(tag => {
+                      this.tags.push(tag.trim());
+                  });
+                  this.tags.push('All');
+                  this.tags = this.tags.filter((value, index, self) => self.indexOf(value) === index);
+                  this.assignTags();
+              });
+          }
+      });
+  }
+
+  ngOnInit() {
+
+  }
+
+  reloadChanges(event: any) {
+      this.searchTag = event.target.value;
+      this.filterItem(this.searchTag);
+  }
+
+  private assignTags() {
+      this.viewedTags = this.tags;
+  }
+
+  private filterItem(value) {
+      if (!value) {
+          this.assignTags();
+      }
+      this.viewedTags = this.tags.filter(
+          item => item.toLowerCase().indexOf(value.toLowerCase()) > -1
+      );
+  }
+
+  reloadDictionary(event: any) {
+      if (!event.target.checked) {
+          this.checkBoxTages = this.checkBoxTages.replace(event.target.id + ',', '')
+              .replace(event.target.id, '');
+      } else {
+          this.checkBoxTages += event.target.id.trim() + ',';
+      }
+      const tagsSelected = this.checkBoxTages.split(',').filter(item => {
+          if (item) {
+              return true;
+          }
+      }).map((item) => {
+          return item.trim();
+      });
+      this.dictionaryStore.filterByTags(tagsSelected);
+  }
+
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/resource-dictionary-dashboard.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/resource-dictionary-dashboard.component.css
new file mode 100644
index 000000000..f263c0086
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/resource-dictionary-dashboard.component.css
@@ -0,0 +1,19 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file 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=========================================================
+*/
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/resource-dictionary-dashboard.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/resource-dictionary-dashboard.component.html
new file mode 100644
index 000000000..1d435dbd8
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/resource-dictionary-dashboard.component.html
@@ -0,0 +1,59 @@
+<!-- /*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file 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=========================================================
+*/ -->
+
+<app-header>
+</app-header>
+<div class="new-wrapper">
+    <div class="container-fluid main-container">
+        <app-dictionary-header></app-dictionary-header>
+        <div class="container-fluid body-container">
+            <nav class="row">
+                <!--Nav Tabs-->
+                <div class="col pr-0">
+                    <div class="nav nav-tabs " id="nav-tab" role="tablist">
+                        <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home"
+                           role="tab" aria-controls="nav-home"
+                           aria-selected="true">All</a>
+                        <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile"
+                           role="tab" aria-controls="nav-profile"
+                           aria-selected="false">ATT</a>
+                        <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact"
+                           role="tab" aria-controls="nav-contact"
+                           aria-selected="false">OPEN CONFIG</a>
+                    </div>
+                </div>
+                <!--Nav Search & Filter-->
+                <div class="col search-filter-col">
+                    <div class="row">
+                        <div class="col-7">
+                            <app-search-dictionary></app-search-dictionary>
+                        </div>
+                        <div class="col-5 pl-2">
+                            <app-filterby-tags class="w-100"></app-filterby-tags> 
+                        </div>
+
+                    </div>
+                </div>
+            </nav>
+            <app-sort-dictionary></app-sort-dictionary>
+        </div>
+    </div>
+</div>
+
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/resource-dictionary-dashboard.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/resource-dictionary-dashboard.component.spec.ts
new file mode 100644
index 000000000..bb821f34b
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/resource-dictionary-dashboard.component.spec.ts
@@ -0,0 +1,45 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file 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 { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ResourceDictionaryDashboardComponent } from './resource-dictionary-dashboard.component';
+
+describe('ResourceDictionaryDashboardComponent', () => {
+  let component: ResourceDictionaryDashboardComponent;
+  let fixture: ComponentFixture<ResourceDictionaryDashboardComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ResourceDictionaryDashboardComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ResourceDictionaryDashboardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/resource-dictionary-dashboard.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/resource-dictionary-dashboard.component.ts
new file mode 100644
index 000000000..8a64b9215
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/resource-dictionary-dashboard.component.ts
@@ -0,0 +1,36 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file 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';
+
+@Component({
+  selector: 'app-resource-dictionary-dashboard',
+  templateUrl: './resource-dictionary-dashboard.component.html',
+  styleUrls: ['./resource-dictionary-dashboard.component.css']
+})
+export class ResourceDictionaryDashboardComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+    console.log('ResourceDictionaryDashboardComponent');
+  }
+
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/search-dictionary/search-dictionary.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/search-dictionary/search-dictionary.component.css
new file mode 100644
index 000000000..f263c0086
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/search-dictionary/search-dictionary.component.css
@@ -0,0 +1,19 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file 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=========================================================
+*/
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/search-dictionary/search-dictionary.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/search-dictionary/search-dictionary.component.html
new file mode 100644
index 000000000..80f980b05
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/search-dictionary/search-dictionary.component.html
@@ -0,0 +1,24 @@
+<!-- /*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file 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=========================================================
+*/ -->
+
+<div class="searchBox">
+    <input class="searchInput" [ngClass]="{'searchBox-expanded': searchQuery}" (input)="searchDictionary($event)" type="text" name="" placeholder="Search Dictionary">
+    <button class="searchButton" href="#"></button>
+</div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/search-dictionary/search-dictionary.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/search-dictionary/search-dictionary.component.spec.ts
new file mode 100644
index 000000000..70964048b
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/search-dictionary/search-dictionary.component.spec.ts
@@ -0,0 +1,45 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file 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 { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SearchDictionaryComponent } from './search-dictionary.component';
+
+describe('SearchDictionaryComponent', () => {
+  let component: SearchDictionaryComponent;
+  let fixture: ComponentFixture<SearchDictionaryComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SearchDictionaryComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SearchDictionaryComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/search-dictionary/search-dictionary.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/search-dictionary/search-dictionary.component.ts
new file mode 100644
index 000000000..76e40cf7d
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/search-dictionary/search-dictionary.component.ts
@@ -0,0 +1,42 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file 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 { DictionaryStore } from '../../dictionary.store';
+
+@Component({
+  selector: 'app-search-dictionary',
+  templateUrl: './search-dictionary.component.html',
+  styleUrls: ['./search-dictionary.component.css']
+})
+export class SearchDictionaryComponent implements OnInit {
+  private searchQuery = '';
+  constructor(private dictionaryStore: DictionaryStore) {
+  }
+
+  ngOnInit() {
+  }
+  searchDictionary(event: any) {
+      this.searchQuery = event.target.value;
+      this.searchQuery = this.searchQuery.trim();
+      this.dictionaryStore.search(this.searchQuery);
+  }
+
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/sort-dictionary/sort-dictionary.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/sort-dictionary/sort-dictionary.component.css
new file mode 100644
index 000000000..f263c0086
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/sort-dictionary/sort-dictionary.component.css
@@ -0,0 +1,19 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file 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=========================================================
+*/
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/sort-dictionary/sort-dictionary.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/sort-dictionary/sort-dictionary.component.html
new file mode 100644
index 000000000..cc55f6cab
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/sort-dictionary/sort-dictionary.component.html
@@ -0,0 +1,52 @@
+<!-- /*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file 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=========================================================
+*/ -->
+
+<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">
+                    <!--Dictionary 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)="sortDictionary($event)" name={{sortType}}>{{sortType}}</a>
+                                </li>
+                                
+                            </ul>
+                        </div>
+                    </div>
+                    <!--Dictionary Paginator-->
+                    <app-dictionary-pagination></app-dictionary-pagination>
+                </div>
+                <app-dictionary-list></app-dictionary-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>
+    </div>
+</div>
+
+
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/sort-dictionary/sort-dictionary.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/sort-dictionary/sort-dictionary.component.spec.ts
new file mode 100644
index 000000000..54b103823
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/sort-dictionary/sort-dictionary.component.spec.ts
@@ -0,0 +1,45 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file 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 { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SortDictionaryComponent } from './sort-dictionary.component';
+
+describe('SortDictionaryComponent', () => {
+  let component: SortDictionaryComponent;
+  let fixture: ComponentFixture<SortDictionaryComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SortDictionaryComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SortDictionaryComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/sort-dictionary/sort-dictionary.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/sort-dictionary/sort-dictionary.component.ts
new file mode 100644
index 000000000..61c334a6b
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/sort-dictionary/sort-dictionary.component.ts
@@ -0,0 +1,54 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file 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 { DictionaryStore } from '../../dictionary.store';
+
+@Component({
+  selector: 'app-sort-dictionary',
+  templateUrl: './sort-dictionary.component.html',
+  styleUrls: ['./sort-dictionary.component.css']
+})
+export class SortDictionaryComponent implements OnInit {
+  sortTypes: string[];
+  selected: string;
+
+  constructor(private dictionaryStore: DictionaryStore) {
+      this.sortTypes = Object.keys(SortByToServerValue);
+      this.selected = 'Recent';
+  }
+
+  ngOnInit() {
+  }
+
+  sortDictionary(event: any) {
+      const key = event.target.name;
+      console.log(key);
+      this.selected = key;
+      this.dictionaryStore.sortPagedDictionary(SortByToServerValue[key]);
+  }
+
+}
+
+enum SortByToServerValue {
+    Recent = 'DATE',
+    Name = 'NAME',
+
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-routing.module.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-routing.module.ts
new file mode 100644
index 000000000..eb29c4c87
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-routing.module.ts
@@ -0,0 +1,36 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file 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 { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { ResourceDictionaryDashboardComponent } from './resource-dictionary-dashboard/resource-dictionary-dashboard.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ResourceDictionaryDashboardComponent
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class ResourceDictionaryRoutingModule { }
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary.module.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary.module.ts
new file mode 100644
index 000000000..5bd6710f8
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary.module.ts
@@ -0,0 +1,62 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file 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 { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
+import { SidebarModule } from 'ng-sidebar';
+import { FormsModule } from '@angular/forms';
+import { NgxFileDropModule } from 'ngx-file-drop';
+import { AceEditorModule } from 'ng2-ace-editor';
+import { DataTablesModule } from 'angular-datatables';
+
+import { ResourceDictionaryRoutingModule } from './resource-dictionary-routing.module';
+import { ResourceDictionaryDashboardComponent } from './resource-dictionary-dashboard/resource-dictionary-dashboard.component';
+import { DictionaryHeaderComponent } from './resource-dictionary-dashboard/dictionary-header/dictionary-header.component';
+import { SearchDictionaryComponent } from './resource-dictionary-dashboard/search-dictionary/search-dictionary.component';
+import { FilterbyTagsComponent } from './resource-dictionary-dashboard/filterby-tags/filterby-tags.component';
+import { SortDictionaryComponent } from './resource-dictionary-dashboard/sort-dictionary/sort-dictionary.component';
+import { DictionaryPaginationComponent } from './resource-dictionary-dashboard/dictionary-pagination/dictionary-pagination.component';
+import { SharedModulesModule } from '../../shared-modules/shared-modules.module';
+import { DictionaryListComponent } from './resource-dictionary-dashboard/dictionary-list/dictionary-list.component';
+
+@NgModule({
+  declarations: [
+    ResourceDictionaryDashboardComponent,
+    DictionaryHeaderComponent,
+    SearchDictionaryComponent,
+    FilterbyTagsComponent,
+    SortDictionaryComponent,
+    DictionaryPaginationComponent,
+    DictionaryListComponent,
+  ],
+  imports: [
+    CommonModule,
+    ResourceDictionaryRoutingModule,
+    NgbPaginationModule,
+    SharedModulesModule,
+    SidebarModule.forRoot(),
+    FormsModule,
+    NgxFileDropModule,
+    AceEditorModule,
+    DataTablesModule,
+  ]
+})
+export class ResourceDictionaryModule { }
diff --git a/cds-ui/designer-client/src/app/modules/shared-modules/header/header.component.html b/cds-ui/designer-client/src/app/modules/shared-modules/header/header.component.html
index 4b1c17e35..bfccac7a0 100644
--- a/cds-ui/designer-client/src/app/modules/shared-modules/header/header.component.html
+++ b/cds-ui/designer-client/src/app/modules/shared-modules/header/header.component.html
@@ -5,17 +5,18 @@
     <div class="overflow-container">
       <ul class="menu-dropdown">
         <li class="active">
-          <a (click)="redirect()" routerLink="/packages">Packages</a>
+          <a routerLink="/packages">Packages</a>
           <span class="icon">
             <!-- <i class="fa fa-dashboard"></i> -->
             <i class="icon-nav-packages"></i>
           </span>
         </li>
-        <li class="menu-hasdropdown">
-          <a >Data Dictionary</a>
+        <li>
+          <a routerLink="/resource-dictionary">Resource Dictionary</a>
           <span class="icon">
             <i class="icon-nav-dictionary"></i>
           </span>
+        </li>
           <!-- <label title="toggle menu" for="settings">
             <span class="downarrow">
               <i class="fa fa-caret-down"></i>
diff --git a/cds-ui/designer-client/src/app/modules/shared-modules/header/header.component.ts b/cds-ui/designer-client/src/app/modules/shared-modules/header/header.component.ts
index db87f8fdf..38e368526 100644
--- a/cds-ui/designer-client/src/app/modules/shared-modules/header/header.component.ts
+++ b/cds-ui/designer-client/src/app/modules/shared-modules/header/header.component.ts
@@ -13,8 +13,7 @@ export class HeaderComponent implements OnInit {
   ngOnInit() {
   }
 
-  redirect() {
-    this.router.navigate(['/packages']);
-  }
-
+  // redirect() {
+  //   this.router.navigate(['/packages']);
+  // }
 }
diff --git a/cds-ui/designer-client/src/app/modules/shared-modules/shared-modules.module.ts b/cds-ui/designer-client/src/app/modules/shared-modules/shared-modules.module.ts
index 6b6d39689..7229891f5 100644
--- a/cds-ui/designer-client/src/app/modules/shared-modules/shared-modules.module.ts
+++ b/cds-ui/designer-client/src/app/modules/shared-modules/shared-modules.module.ts
@@ -1,13 +1,14 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { HeaderComponent } from './header/header.component';
-
-
+import { RouterModule } from '@angular/router';
 
 @NgModule({
   declarations: [HeaderComponent],
   imports: [
-    CommonModule
-  ], exports : [HeaderComponent]
+    CommonModule,
+    RouterModule,
+  ],
+  exports : [HeaderComponent]
 })
 export class SharedModulesModule { }