From 4af2bea1aa5e0207a3a61dc9dc72e7e2e65f3ec6 Mon Sep 17 00:00:00 2001
From: Swapnali Shadanan Pode <sp00501638@techmahindra.com>
Date: Wed, 9 Oct 2019 12:58:08 +0530
Subject: [PATCH] Adding Controller catalog

Adding new component controller catalog

Change-Id: I30ce3498289320a1246d37089fb971c2f71ffe15
Issue-ID: CCSDK-810
Signed-off-by: Swapnali Shadanan Pode <sp00501638@techmahindra.com>
---
 cds-ui/client/src/app/app-routing.module.ts        |   6 ++
 .../src/app/common/constants/app-constants.ts      |   9 ++
 cds-ui/client/src/app/common/core/core.module.ts   |   4 +-
 .../common/core/store/actions/catalog.action.ts    |  77 ++++++++++++++
 .../common/core/store/effects/catalog.effect.ts    |  37 +++++++
 .../common/core/store/models/catalog-http.model.ts |  25 +++++
 .../app/common/core/store/models/catalog.model.ts  |  29 ++++++
 .../common/core/store/models/catalogState.model.ts |  28 +++++
 .../app/common/core/store/reducers/app.reducer.ts  |   5 +-
 .../common/core/store/reducers/catalog.reducer.ts  |  39 +++++++
 .../core/store/selectors/catalog.selectors.ts      |  31 ++++++
 .../src/app/common/core/store/state/app.state.ts   |   9 +-
 .../app/common/core/store/state/catalog.state.ts   |  29 ++++++
 .../shared/components/home/home.component.html     |   3 +
 .../controller-catalog-routing.module.ts           |  35 +++++++
 .../controller-catalog.component.html              |  41 ++++++++
 .../controller-catalog.component.scss              |  32 ++++++
 .../controller-catalog.component.spec.ts           |  46 +++++++++
 .../controller-catalog.component.ts                |  42 ++++++++
 .../controller-catalog.module.ts                   |  67 ++++++++++++
 .../create-catalog-routing.module.ts               |  34 ++++++
 .../create-catalog/create-catalog.component.html   |  56 ++++++++++
 .../create-catalog/create-catalog.component.scss   |  60 +++++++++++
 .../create-catalog.component.spec.ts               |  45 ++++++++
 .../create-catalog/create-catalog.component.ts     | 114 +++++++++++++++++++++
 .../create-catalog/create-catalog.module.ts        |  57 +++++++++++
 .../create-catalog/create-catalog.service.ts       |  44 ++++++++
 .../search-catalog-routing.module.ts               |  35 +++++++
 .../search-catalog/search-catalog.component.html   |  41 ++++++++
 .../search-catalog/search-catalog.component.scss   |  78 ++++++++++++++
 .../search-catalog.component.spec.ts               |  45 ++++++++
 .../search-catalog/search-catalog.component.ts     |  58 +++++++++++
 .../search-catalog/search-catalog.module.ts        |  58 +++++++++++
 .../search-catalog/search-catalog.service.ts       |  36 +++++++
 .../select-template-routing.module.ts              |  38 +++++++
 .../select-template/select-template.component.html |  33 ++++++
 .../select-template/select-template.component.scss |  52 ++++++++++
 .../select-template.component.spec.ts              |  45 ++++++++
 .../select-template/select-template.component.ts   |  43 ++++++++
 .../select-template/select-template.module.ts      |  71 +++++++++++++
 .../template-options.component.html                |  24 +++++
 .../template-options.component.scss                |  19 ++++
 .../template-options.component.spec.ts             |  45 ++++++++
 .../template-options/template-options.component.ts |  40 ++++++++
 44 files changed, 1758 insertions(+), 7 deletions(-)
 create mode 100644 cds-ui/client/src/app/common/core/store/actions/catalog.action.ts
 create mode 100644 cds-ui/client/src/app/common/core/store/effects/catalog.effect.ts
 create mode 100644 cds-ui/client/src/app/common/core/store/models/catalog-http.model.ts
 create mode 100644 cds-ui/client/src/app/common/core/store/models/catalog.model.ts
 create mode 100644 cds-ui/client/src/app/common/core/store/models/catalogState.model.ts
 create mode 100644 cds-ui/client/src/app/common/core/store/reducers/catalog.reducer.ts
 create mode 100644 cds-ui/client/src/app/common/core/store/selectors/catalog.selectors.ts
 create mode 100644 cds-ui/client/src/app/common/core/store/state/catalog.state.ts
 create mode 100644 cds-ui/client/src/app/feature-modules/controller-catalog/controller-catalog-routing.module.ts
 create mode 100644 cds-ui/client/src/app/feature-modules/controller-catalog/controller-catalog.component.html
 create mode 100644 cds-ui/client/src/app/feature-modules/controller-catalog/controller-catalog.component.scss
 create mode 100644 cds-ui/client/src/app/feature-modules/controller-catalog/controller-catalog.component.spec.ts
 create mode 100644 cds-ui/client/src/app/feature-modules/controller-catalog/controller-catalog.component.ts
 create mode 100644 cds-ui/client/src/app/feature-modules/controller-catalog/controller-catalog.module.ts
 create mode 100644 cds-ui/client/src/app/feature-modules/controller-catalog/create-catalog/create-catalog-routing.module.ts
 create mode 100644 cds-ui/client/src/app/feature-modules/controller-catalog/create-catalog/create-catalog.component.html
 create mode 100644 cds-ui/client/src/app/feature-modules/controller-catalog/create-catalog/create-catalog.component.scss
 create mode 100644 cds-ui/client/src/app/feature-modules/controller-catalog/create-catalog/create-catalog.component.spec.ts
 create mode 100644 cds-ui/client/src/app/feature-modules/controller-catalog/create-catalog/create-catalog.component.ts
 create mode 100644 cds-ui/client/src/app/feature-modules/controller-catalog/create-catalog/create-catalog.module.ts
 create mode 100644 cds-ui/client/src/app/feature-modules/controller-catalog/create-catalog/create-catalog.service.ts
 create mode 100644 cds-ui/client/src/app/feature-modules/controller-catalog/search-catalog/search-catalog-routing.module.ts
 create mode 100644 cds-ui/client/src/app/feature-modules/controller-catalog/search-catalog/search-catalog.component.html
 create mode 100644 cds-ui/client/src/app/feature-modules/controller-catalog/search-catalog/search-catalog.component.scss
 create mode 100644 cds-ui/client/src/app/feature-modules/controller-catalog/search-catalog/search-catalog.component.spec.ts
 create mode 100644 cds-ui/client/src/app/feature-modules/controller-catalog/search-catalog/search-catalog.component.ts
 create mode 100644 cds-ui/client/src/app/feature-modules/controller-catalog/search-catalog/search-catalog.module.ts
 create mode 100644 cds-ui/client/src/app/feature-modules/controller-catalog/search-catalog/search-catalog.service.ts
 create mode 100644 cds-ui/client/src/app/feature-modules/controller-catalog/select-template/select-template-routing.module.ts
 create mode 100644 cds-ui/client/src/app/feature-modules/controller-catalog/select-template/select-template.component.html
 create mode 100644 cds-ui/client/src/app/feature-modules/controller-catalog/select-template/select-template.component.scss
 create mode 100644 cds-ui/client/src/app/feature-modules/controller-catalog/select-template/select-template.component.spec.ts
 create mode 100644 cds-ui/client/src/app/feature-modules/controller-catalog/select-template/select-template.component.ts
 create mode 100644 cds-ui/client/src/app/feature-modules/controller-catalog/select-template/select-template.module.ts
 create mode 100644 cds-ui/client/src/app/feature-modules/controller-catalog/select-template/template-options/template-options.component.html
 create mode 100644 cds-ui/client/src/app/feature-modules/controller-catalog/select-template/template-options/template-options.component.scss
 create mode 100644 cds-ui/client/src/app/feature-modules/controller-catalog/select-template/template-options/template-options.component.spec.ts
 create mode 100644 cds-ui/client/src/app/feature-modules/controller-catalog/select-template/template-options/template-options.component.ts

diff --git a/cds-ui/client/src/app/app-routing.module.ts b/cds-ui/client/src/app/app-routing.module.ts
index 96dfce18e..01ecfe48b 100644
--- a/cds-ui/client/src/app/app-routing.module.ts
+++ b/cds-ui/client/src/app/app-routing.module.ts
@@ -2,6 +2,8 @@
 ============LICENSE_START==========================================
 ===================================================================
 Copyright (C) 2018 IBM Intellectual Property. All rights reserved.
+
+Modifications Copyright (C) 2019 TechMahindra
 ===================================================================
 
 Unless otherwise specified, all software contained herein is licensed
@@ -36,6 +38,10 @@ const routes: Routes = [
     {
       path: 'resource-definition',
       loadChildren: './feature-modules/resource-definition/resource-definition.module#ResourceDefinitionModule'
+    },
+    {
+        path: 'controller-catalog',
+        loadChildren: './feature-modules/controller-catalog/controller-catalog.module#ControllerCatalogModule'
     }
   ]
 }
diff --git a/cds-ui/client/src/app/common/constants/app-constants.ts b/cds-ui/client/src/app/common/constants/app-constants.ts
index 78fefd803..5beb6af74 100644
--- a/cds-ui/client/src/app/common/constants/app-constants.ts
+++ b/cds-ui/client/src/app/common/constants/app-constants.ts
@@ -2,6 +2,8 @@
 ============LICENSE_START==========================================
 ===================================================================
 Copyright (C) 2018 IBM Intellectual Property. All rights reserved.
+
+Modifications Copyright (C) 2019 TechMahindra
 ===================================================================
 
 Unless otherwise specified, all software contained herein is licensed
@@ -110,4 +112,11 @@ export const ResourceDictionaryURLs = {
     getSources: '/resourcedictionary/source-mapping',
     getModelType: '/resourcedictionary/model-type',
     getDataType: '/resourcedictionary/model-type/by-definition/data_type'
+}
+
+export const ControllerCatalogURLs = {
+		 searchControllerCatalogByTags: '/controllercatalog/search',
+		 saveControllerCatalog: '/controllercatalog/save',
+		 getDefinition: '/controllercatalog/model-type/by-definition',
+		 getDerivedFrom: '/controllercatalog/model-type/by-derivedfrom'
 }
\ No newline at end of file
diff --git a/cds-ui/client/src/app/common/core/core.module.ts b/cds-ui/client/src/app/common/core/core.module.ts
index 7207178a9..3743ab3b1 100644
--- a/cds-ui/client/src/app/common/core/core.module.ts
+++ b/cds-ui/client/src/app/common/core/core.module.ts
@@ -25,13 +25,13 @@ import { StoreModule, Store } from '@ngrx/store';
 import { EffectsModule } from '@ngrx/effects';
 import { StoreRouterConnectingModule } from '@ngrx/router-store';
 import { HttpClientModule } from '@angular/common/http';
-
 import { appReducers } from './store/reducers/app.reducer';
 import { BlueprintEffects } from './store/effects/blueprint.effects';
 import { ResourcesEffects } from './store/effects/resources.effects';
 import { ApiService } from './services/api.service';
 import { NotificationHandlerService } from './services/notification-handler.service';
 import { LoaderService } from './services/loader.service';
+import { CatalogEffects } from './store/effects/catalog.effect';
 // import { BlueprintService } from './services/blueprint.service';
 
 @NgModule({
@@ -40,7 +40,7 @@ import { LoaderService } from './services/loader.service';
   imports: [
     CommonModule,
     StoreModule.forRoot(appReducers),
-    EffectsModule.forRoot([BlueprintEffects, ResourcesEffects]),
+    EffectsModule.forRoot([BlueprintEffects, ResourcesEffects, CatalogEffects]),
     StoreRouterConnectingModule.forRoot({ stateKey: 'router' }),
     HttpClientModule
   ],
diff --git a/cds-ui/client/src/app/common/core/store/actions/catalog.action.ts b/cds-ui/client/src/app/common/core/store/actions/catalog.action.ts
new file mode 100644
index 000000000..938cdb110
--- /dev/null
+++ b/cds-ui/client/src/app/common/core/store/actions/catalog.action.ts
@@ -0,0 +1,77 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2019 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 { Action, Store } from '@ngrx/store';
+import { ICatalog } from '../models/catalog.model';
+import { ICatalogState } from '../models/catalogState.model';
+
+export const LOAD_CATALOG = 'LOAD_CATALOG';
+export const LOAD_CATALOG_SUCCESS = 'LOAD_CATALOG_SUCCESS';
+export const LOAD_CATALOG_FAILURE = 'LOAD_CATALOG_FAILURE';
+export const UPDATE_CATALOG ='UPDATE_CATALOG';
+export const UPDATE_CATALOG_SUCCESS = 'UPDATE_CATALOG_SUCCESS';
+export const UPDATE_CATALOG_FAILURE = 'UPDATE_CATALOG_FAILURE';
+export const SAVE_CATALOG = 'SAVE_CATALOG';
+export const SAVE_CATALOG_SUCCESS = 'SAVE_CATALOG_SUCCESS';
+export const SAVE_CATALOG_FAILURE = 'SAVE_CATALOG_FAILURE';
+
+export const SET_CATALOG = 'SET CATALOG';
+export const REMOVE_CATALOG = 'Remove CATALOG';
+
+export const SET_CATALOG_STATE = 'SET CATALOG state';
+
+
+export class LoadCatalog implements Action {
+    readonly type = LOAD_CATALOG;
+    constructor(public startLoadSuccess?: boolean) {}
+}
+
+export class LoadCatalogSuccess implements Action {
+    readonly type = LOAD_CATALOG_SUCCESS;
+    constructor(public payload: ICatalog) {}
+}
+
+export class LoadCatalogFailure implements Action {
+    readonly type = LOAD_CATALOG_FAILURE;
+    constructor(public error: any) {}
+}
+
+export class SetCatalogState implements Action {
+    readonly type = SET_CATALOG_STATE;
+    constructor(public payload: ICatalogState) {}
+}
+
+// export class SetCatalog implements Action {
+//     readonly type = SET_CATALOG;
+//     constructor(public payload: Catalog) {}
+// }
+
+// export class RemoveCatalog implements Action {
+//     readonly type = REMOVE_CATALOG;
+//     constructor(public payload: Catalog) {}
+// }
+
+export class UpdateCatalog implements Action {
+    readonly type = UPDATE_CATALOG;
+    constructor(public payload: ICatalog) {}
+}
+
+export type Actions = LoadCatalog | LoadCatalogSuccess | LoadCatalogFailure | SetCatalogState;
\ No newline at end of file
diff --git a/cds-ui/client/src/app/common/core/store/effects/catalog.effect.ts b/cds-ui/client/src/app/common/core/store/effects/catalog.effect.ts
new file mode 100644
index 000000000..db2296eb7
--- /dev/null
+++ b/cds-ui/client/src/app/common/core/store/effects/catalog.effect.ts
@@ -0,0 +1,37 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2019 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 { Effect, ofType, Actions } from '@ngrx/effects';
+import { Store, select } from '@ngrx/store';
+import { of } from 'rxjs';
+import { switchMap, map, withLatestFrom, catchError } from 'rxjs/operators';
+
+import { IAppState } from '../state/app.state';
+import * as CatalogActions from '../actions/catalog.action';
+
+@Injectable()
+export class CatalogEffects {
+
+  constructor(
+    private _actions$: Actions,
+    private _store: Store<IAppState>
+  ) {}
+}
\ No newline at end of file
diff --git a/cds-ui/client/src/app/common/core/store/models/catalog-http.model.ts b/cds-ui/client/src/app/common/core/store/models/catalog-http.model.ts
new file mode 100644
index 000000000..dde1f979c
--- /dev/null
+++ b/cds-ui/client/src/app/common/core/store/models/catalog-http.model.ts
@@ -0,0 +1,25 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2019 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 { ICatalog } from './catalog.model';
+
+export interface ICatalogHttp {
+  catalog: ICatalog;
+}
\ No newline at end of file
diff --git a/cds-ui/client/src/app/common/core/store/models/catalog.model.ts b/cds-ui/client/src/app/common/core/store/models/catalog.model.ts
new file mode 100644
index 000000000..2344f3336
--- /dev/null
+++ b/cds-ui/client/src/app/common/core/store/models/catalog.model.ts
@@ -0,0 +1,29 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2019 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 interface ICatalog { 
+      Model_Name: string;
+      User_id: string;
+      _tags: string;
+      _type: string;
+      Derived_From: string;
+      _description : string;
+      definition: object[];
+}
\ No newline at end of file
diff --git a/cds-ui/client/src/app/common/core/store/models/catalogState.model.ts b/cds-ui/client/src/app/common/core/store/models/catalogState.model.ts
new file mode 100644
index 000000000..937dd87e0
--- /dev/null
+++ b/cds-ui/client/src/app/common/core/store/models/catalogState.model.ts
@@ -0,0 +1,28 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2019 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 { ICatalog } from './catalog.model';
+
+export interface ICatalogState {
+    catalog: ICatalog,
+    isLoadSuccess?: boolean;
+    isUpdateSuccess?: boolean;
+    isSaveSuccess?: boolean;
+}
\ No newline at end of file
diff --git a/cds-ui/client/src/app/common/core/store/reducers/app.reducer.ts b/cds-ui/client/src/app/common/core/store/reducers/app.reducer.ts
index 6f583202c..785939040 100644
--- a/cds-ui/client/src/app/common/core/store/reducers/app.reducer.ts
+++ b/cds-ui/client/src/app/common/core/store/reducers/app.reducer.ts
@@ -21,13 +21,14 @@ limitations under the License.
 
 import { ActionReducerMap } from '@ngrx/store';
 import { routerReducer } from '@ngrx/router-store';
-
 import { IAppState } from '../state/app.state';
 import { blueprintReducer } from '../reducers/blueprint.reducer';
 import { resourcesReducer } from '../reducers/resources.reducer';
+import { catalogReducer } from '../reducers/catalog.reducer';
 
 export const appReducers: ActionReducerMap<IAppState, any> = {
     router: routerReducer,
     blueprint: blueprintReducer,
-    resources:resourcesReducer
+    resources:resourcesReducer,
+    catalog: catalogReducer
 };
\ No newline at end of file
diff --git a/cds-ui/client/src/app/common/core/store/reducers/catalog.reducer.ts b/cds-ui/client/src/app/common/core/store/reducers/catalog.reducer.ts
new file mode 100644
index 000000000..ae5ca4e1e
--- /dev/null
+++ b/cds-ui/client/src/app/common/core/store/reducers/catalog.reducer.ts
@@ -0,0 +1,39 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2019 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 { Action } from '@ngrx/store';
+import { initialCatalogState } from '../state/catalog.state';
+import * as CatalogActions from '../actions/catalog.action';
+import { ICatalogState } from '../models/catalogState.model';
+
+export function catalogReducer(state: ICatalogState = initialCatalogState, action: CatalogActions.Actions) : ICatalogState {
+    switch(action.type) {
+        case CatalogActions.LOAD_CATALOG_SUCCESS:
+            return {...state,
+                    catalog: action.payload
+                    }
+        case CatalogActions.SET_CATALOG_STATE:
+            return {...state,
+                    catalog: action.payload.catalog
+                    }
+        default:
+            return state;
+    }
+}
diff --git a/cds-ui/client/src/app/common/core/store/selectors/catalog.selectors.ts b/cds-ui/client/src/app/common/core/store/selectors/catalog.selectors.ts
new file mode 100644
index 000000000..172448f53
--- /dev/null
+++ b/cds-ui/client/src/app/common/core/store/selectors/catalog.selectors.ts
@@ -0,0 +1,31 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2019 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 { createSelector } from '@ngrx/store';
+
+import { IAppState } from '../state/app.state';
+import { ICatalogState } from '../models/catalogState.model';
+
+const selectCatalogFromAppState = (state: IAppState) => state.catalog;
+
+export const selectCatalog = createSelector(
+    selectCatalogFromAppState,
+  (state: ICatalogState) => state.catalog
+);
\ No newline at end of file
diff --git a/cds-ui/client/src/app/common/core/store/state/app.state.ts b/cds-ui/client/src/app/common/core/store/state/app.state.ts
index 052eb2c5b..c08edce1e 100644
--- a/cds-ui/client/src/app/common/core/store/state/app.state.ts
+++ b/cds-ui/client/src/app/common/core/store/state/app.state.ts
@@ -24,14 +24,17 @@ import { IBlueprintState } from '../models/blueprintState.model';
 import { initialBlueprintState } from './blueprint.state';
 import { IResourcesState } from '../models/resourcesState.model';
 import { initialResourcesState } from './resources.state';
+import { ICatalogState } from '../models/catalogState.model';
+import { initialCatalogState } from './catalog.state';
 
 export interface IAppState {
     router? : RouterReducerState,
     blueprint: IBlueprintState,
-    resources: IResourcesState
+    resources: IResourcesState,
+    catalog: ICatalogState
 }
-
 export const initialAppState: IAppState = {
     blueprint: initialBlueprintState,
-    resources: initialResourcesState
+    resources: initialResourcesState,
+    catalog: initialCatalogState
 }
\ No newline at end of file
diff --git a/cds-ui/client/src/app/common/core/store/state/catalog.state.ts b/cds-ui/client/src/app/common/core/store/state/catalog.state.ts
new file mode 100644
index 000000000..a780269c5
--- /dev/null
+++ b/cds-ui/client/src/app/common/core/store/state/catalog.state.ts
@@ -0,0 +1,29 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2019 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 { ICatalogState } from '../models/catalogState.model';
+import { ICatalog } from '../models/catalog.model';
+
+export const initialCatalogState : ICatalogState = {
+    catalog : {} as ICatalog,
+    isLoadSuccess: false,
+    isUpdateSuccess: false,
+    isSaveSuccess: false,
+}
\ No newline at end of file
diff --git a/cds-ui/client/src/app/common/shared/components/home/home.component.html b/cds-ui/client/src/app/common/shared/components/home/home.component.html
index f73f0e863..beff353ef 100644
--- a/cds-ui/client/src/app/common/shared/components/home/home.component.html
+++ b/cds-ui/client/src/app/common/shared/components/home/home.component.html
@@ -1,6 +1,8 @@
 <!-- ============LICENSE_START==========================================
 ===================================================================
 Copyright (C) 2018 IBM Intellectual Property. All rights reserved.
+
+Modifications Copyright (C) 2019 TechMahindra
 ===================================================================
 
 Unless otherwise specified, all software contained herein is licensed
@@ -50,6 +52,7 @@ limitations under the License.
                 </ul>
             </nav> -->
             <a mat-list-item [routerLink]="['/resource-definition']">Resource Definition</a>
+            <a mat-list-item [routerLink]="['/controller-catalog']">Controller Catalog</a>
         </mat-nav-list>
     </mat-sidenav>
 
diff --git a/cds-ui/client/src/app/feature-modules/controller-catalog/controller-catalog-routing.module.ts b/cds-ui/client/src/app/feature-modules/controller-catalog/controller-catalog-routing.module.ts
new file mode 100644
index 000000000..e8bf86cf4
--- /dev/null
+++ b/cds-ui/client/src/app/feature-modules/controller-catalog/controller-catalog-routing.module.ts
@@ -0,0 +1,35 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2019 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 { ControllerCatalogComponent } from './controller-catalog.component';
+import { Routes, RouterModule } from '@angular/router';
+
+const routes: Routes = [
+    {
+        path: '',
+        component: ControllerCatalogComponent
+    }
+];
+@NgModule({
+	imports: [RouterModule.forChild(routes)],
+	exports: [RouterModule]
+})
+export class ControllerCatalogRoutingModule { }
diff --git a/cds-ui/client/src/app/feature-modules/controller-catalog/controller-catalog.component.html b/cds-ui/client/src/app/feature-modules/controller-catalog/controller-catalog.component.html
new file mode 100644
index 000000000..06dfadee6
--- /dev/null
+++ b/cds-ui/client/src/app/feature-modules/controller-catalog/controller-catalog.component.html
@@ -0,0 +1,41 @@
+<!--/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2019 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=========================================================
+*/-->
+
+<mat-card class="RDform">
+  <mat-card-content>
+    <mat-horizontal-stepper [linear]="isLinear" #stepper>
+      <mat-step [stepControl]="firstFormGroup">
+        <ng-template matStepLabel>Catalog Creation  Method</ng-template>
+       <app-select-template (option)="selectedOption($event)"></app-select-template><br><br>
+        <div>
+          <button mat-button matStepperNext class="matStepNextBtn">Proceed</button>
+        </div>
+      </mat-step>
+      <mat-step [stepControl]="secondFormGroup">
+        <ng-template matStepLabel>Catalog Create/Search</ng-template>
+        <app-create-catalog *ngIf="selectedValue == 1"></app-create-catalog><br>
+        <app-search-catalog *ngIf="selectedValue == 2"></app-search-catalog><br>
+        <div>
+          <button mat-button matStepperPrevious class="matStepNextBtn">Back</button>
+        </div>
+      </mat-step>
+    </mat-horizontal-stepper>
+  </mat-card-content>
+</mat-card>
\ No newline at end of file
diff --git a/cds-ui/client/src/app/feature-modules/controller-catalog/controller-catalog.component.scss b/cds-ui/client/src/app/feature-modules/controller-catalog/controller-catalog.component.scss
new file mode 100644
index 000000000..ea304fb2a
--- /dev/null
+++ b/cds-ui/client/src/app/feature-modules/controller-catalog/controller-catalog.component.scss
@@ -0,0 +1,32 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2019 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=========================================================
+*/
+
+.mat-card {
+    padding: 0px !important;
+}
+
+.matStepNextBtn{
+    color:white;
+    background:#3f51b5;
+    margin-top: 10px;
+    position: absolute;
+    margin-bottom: 5px;
+    border-radius: 4px;
+}
diff --git a/cds-ui/client/src/app/feature-modules/controller-catalog/controller-catalog.component.spec.ts b/cds-ui/client/src/app/feature-modules/controller-catalog/controller-catalog.component.spec.ts
new file mode 100644
index 000000000..69b702726
--- /dev/null
+++ b/cds-ui/client/src/app/feature-modules/controller-catalog/controller-catalog.component.spec.ts
@@ -0,0 +1,46 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2019 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 { ControllerCatalogComponent } from './controller-catalog.component';
+
+describe('ControllerCatalogComponent', () => {
+  let component: ControllerCatalogComponent;
+  let fixture: ComponentFixture<ControllerCatalogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ControllerCatalogComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ControllerCatalogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/cds-ui/client/src/app/feature-modules/controller-catalog/controller-catalog.component.ts b/cds-ui/client/src/app/feature-modules/controller-catalog/controller-catalog.component.ts
new file mode 100644
index 000000000..ed0886924
--- /dev/null
+++ b/cds-ui/client/src/app/feature-modules/controller-catalog/controller-catalog.component.ts
@@ -0,0 +1,42 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2019 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-controller-catalog',
+  templateUrl: './controller-catalog.component.html',
+  styleUrls: ['./controller-catalog.component.scss']
+})
+export class ControllerCatalogComponent implements OnInit {
+
+  selectedValue: any;
+  constructor() { }
+
+  ngOnInit() {
+  }
+  
+  selectedOption(value){
+    this.selectedValue=value;
+    console.log(this.selectedValue);        
+ }
+
+}
diff --git a/cds-ui/client/src/app/feature-modules/controller-catalog/controller-catalog.module.ts b/cds-ui/client/src/app/feature-modules/controller-catalog/controller-catalog.module.ts
new file mode 100644
index 000000000..9f5e1400f
--- /dev/null
+++ b/cds-ui/client/src/app/feature-modules/controller-catalog/controller-catalog.module.ts
@@ -0,0 +1,67 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2019 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 { ControllerCatalogRoutingModule } from './controller-catalog-routing.module';
+import { ControllerCatalogComponent } from './controller-catalog.component';
+import { SharedModule } from '../../../app/common/shared/shared.module';
+import { MatToolbarModule, MatButtonModule, MatSidenavModule,  MatListModule, MatGridListModule, MatCardModule, MatMenuModule, MatTableModule, MatPaginatorModule, MatSortModule, MatInputModule, MatSelectModule, MatRadioModule, MatFormFieldModule, MatStepperModule, MatAutocompleteModule} from '@angular/material';
+import { MatIconModule } from '@angular/material/icon';
+import { SelectTemplateComponent } from './select-template/select-template.component';
+import { TemplateOptionsComponent } from './select-template/template-options/template-options.component';
+import { SearchCatalogComponent } from './search-catalog/search-catalog.component';
+import { CreateCatalogComponent } from './create-catalog/create-catalog.component';
+import { CreateCatalogModule } from './create-catalog/create-catalog.module';
+import { SearchCatalogModule } from './search-catalog/search-catalog.module';
+import { FormsModule,ReactiveFormsModule } from '@angular/forms';
+import { NgJsonEditorModule } from 'ang-jsoneditor';
+
+@NgModule({
+  declarations: [ ControllerCatalogComponent, SelectTemplateComponent, TemplateOptionsComponent, SearchCatalogComponent, CreateCatalogComponent ],
+  imports: [
+    CommonModule,
+    ControllerCatalogRoutingModule,
+    CreateCatalogModule,
+    SearchCatalogModule,
+    SharedModule,
+    MatToolbarModule,
+    MatButtonModule,
+    MatSidenavModule,
+    MatIconModule,
+    MatListModule,
+    MatGridListModule,
+    MatCardModule,
+    MatMenuModule,
+    MatTableModule,
+    MatPaginatorModule,
+    MatSortModule,
+    MatInputModule,
+    MatSelectModule, 
+    MatRadioModule, 
+    MatFormFieldModule, 
+    MatStepperModule,
+    MatAutocompleteModule,
+    FormsModule,
+    ReactiveFormsModule,
+    NgJsonEditorModule
+  ]
+})
+export class ControllerCatalogModule { }
diff --git a/cds-ui/client/src/app/feature-modules/controller-catalog/create-catalog/create-catalog-routing.module.ts b/cds-ui/client/src/app/feature-modules/controller-catalog/create-catalog/create-catalog-routing.module.ts
new file mode 100644
index 000000000..68d13b214
--- /dev/null
+++ b/cds-ui/client/src/app/feature-modules/controller-catalog/create-catalog/create-catalog-routing.module.ts
@@ -0,0 +1,34 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2019 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 { RouterModule, Routes } from '@angular/router';
+import { CreateCatalogComponent } from './create-catalog.component';
+
+const routes: Routes = [
+  {
+      path: '',
+      component: CreateCatalogComponent
+  }
+];
+@NgModule({
+imports: [RouterModule.forChild(routes)],
+exports: [RouterModule]
+})
+export class CreateCatalogRoutingModule { }
diff --git a/cds-ui/client/src/app/feature-modules/controller-catalog/create-catalog/create-catalog.component.html b/cds-ui/client/src/app/feature-modules/controller-catalog/create-catalog/create-catalog.component.html
new file mode 100644
index 000000000..8c71edfa7
--- /dev/null
+++ b/cds-ui/client/src/app/feature-modules/controller-catalog/create-catalog/create-catalog.component.html
@@ -0,0 +1,56 @@
+<!--/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2019 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=========================================================
+*/-->
+<mat-card class="ver-card">
+  <mat-card-header><div class="mat-card-header">Create Catalog</div>
+  </mat-card-header>
+  <mat-card-content>
+<form [formGroup]="CatalogFormData" (ngSubmit)="CreateCatalog()">
+  <mat-form-field class="form-field">
+   <input matInput placeholder="Model Name" formControlName="Model_Name">
+ </mat-form-field>
+ <mat-form-field class="form-field" >
+  <input matInput placeholder="User Id" formControlName="User_id">
+</mat-form-field>
+ <mat-form-field class="form-field">
+   <input matInput placeholder="Tags" formControlName="_tags">
+ </mat-form-field>
+ <mat-form-field class="form-field">
+   <mat-select matInput placeholder="Definition Type" formControlName="_type">
+     <mat-option [value]="item" *ngFor="let item of definitionType">{{item.definitionType}}</mat-option>
+   </mat-select>
+ </mat-form-field>
+ <mat-form-field class="form-field" >
+   <mat-select matInput placeholder="Derived From" formControlName="Derived_From">
+    <mat-option [value]="item" *ngFor="let item of derivedFrom">{{item.derivedFrom}}</mat-option>
+   </mat-select>
+ </mat-form-field>
+ <mat-form-field class="form-field" >
+   <textarea matInput placeholder="Description" formControlName="_description"></textarea>
+ </mat-form-field>
+  <br>
+  <div >
+      <json-editor  placeholder="Definition" class="jsoneditor" [options]="options" [data]="resources" on-change="onChange($event)"></json-editor>
+  </div>
+ <div>
+   <button mat-button class="matStepNextBtn" type="submit">Save</button>
+ </div>  
+</form>
+</mat-card-content>
+</mat-card>
\ No newline at end of file
diff --git a/cds-ui/client/src/app/feature-modules/controller-catalog/create-catalog/create-catalog.component.scss b/cds-ui/client/src/app/feature-modules/controller-catalog/create-catalog/create-catalog.component.scss
new file mode 100644
index 000000000..cc8e292aa
--- /dev/null
+++ b/cds-ui/client/src/app/feature-modules/controller-catalog/create-catalog/create-catalog.component.scss
@@ -0,0 +1,60 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2019 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=========================================================
+*/
+.matStepNextBtn{
+    color:white;
+    background:#3f51b5;
+    margin-top: 10px;
+    position: absolute;
+    margin-bottom: 5px;
+    border-radius: 4px;
+}
+.meta-form {
+  width: 100%;
+}
+
+.form-field {
+  width: 40%;
+  padding:20px;
+}
+
+.form-table {
+  width: 100%;
+}
+.ver-card {
+    width: 100%;  
+    background-color: #f1f1f1;
+     padding: 0.01em 16px;
+      margin: 20px 0;
+      box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important;
+      height: 800px;
+  }
+  .mat-card-header{
+      height:35px;  
+      padding-top: 4px;
+  }
+  .mat-card-content{
+      width: auto;
+      background-color: #fff;
+      padding: 8px 8px;
+      // border-left: 4px solid #4CAF50;
+      word-wrap: break-word;
+      min-height:350px;
+      height: auto;
+  }
\ No newline at end of file
diff --git a/cds-ui/client/src/app/feature-modules/controller-catalog/create-catalog/create-catalog.component.spec.ts b/cds-ui/client/src/app/feature-modules/controller-catalog/create-catalog/create-catalog.component.spec.ts
new file mode 100644
index 000000000..8a96b6d8b
--- /dev/null
+++ b/cds-ui/client/src/app/feature-modules/controller-catalog/create-catalog/create-catalog.component.spec.ts
@@ -0,0 +1,45 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2019 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 { CreateCatalogComponent } from './create-catalog.component';
+
+describe('CreateCatalogComponent', () => {
+  let component: CreateCatalogComponent;
+  let fixture: ComponentFixture<CreateCatalogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CreateCatalogComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CreateCatalogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/cds-ui/client/src/app/feature-modules/controller-catalog/create-catalog/create-catalog.component.ts b/cds-ui/client/src/app/feature-modules/controller-catalog/create-catalog/create-catalog.component.ts
new file mode 100644
index 000000000..91c6f2835
--- /dev/null
+++ b/cds-ui/client/src/app/feature-modules/controller-catalog/create-catalog/create-catalog.component.ts
@@ -0,0 +1,114 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2019 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, ViewChild, ɵConsole } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { JsonEditorComponent, JsonEditorOptions } from 'ang-jsoneditor';
+import { Observable } from 'rxjs';
+import { ICatalogState } from 'src/app/common/core/store/models/catalogState.model';
+import { ICatalog } from 'src/app/common/core/store/models/catalog.model';
+import { Store } from '@ngrx/store';
+import { IAppState } from 'src/app/common/core/store/state/app.state';
+import { SetCatalogState } from 'src/app/common/core/store/actions/catalog.action';
+import { CreateCatalogService } from './create-catalog.service';
+import { NotificationHandlerService } from 'src/app/common/core/services/notification-handler.service';
+
+@Component({
+  selector: 'app-create-catalog',
+  templateUrl: './create-catalog.component.html',
+  styleUrls: ['./create-catalog.component.scss']
+})
+export class CreateCatalogComponent implements OnInit {
+  
+  CatalogFormData: FormGroup;
+  @ViewChild(JsonEditorComponent) editor: JsonEditorComponent;
+  options = new JsonEditorOptions();
+  data:any;
+  derivedFrom: any[] = [{derivedFrom: 'tosca.nodes.Component'},{derivedFrom:'tosca.nodes.VNF'},{derivedFrom:'tosca.nodes.Artifact'},{derivedFrom:'tosca.nodes.ResourceSource'}, {derivedFrom:'tosca.nodes.Workflow'},{derivedFrom:'tosca.nodes.Root'}];
+  definitionType: any[] = [{definitionType: 'node_type'}];
+  ccState: Observable<ICatalogState>;
+  catalog: ICatalog;
+
+  constructor(private formBuilder: FormBuilder, private store: Store<IAppState>, private catalogCreateService: CreateCatalogService, private alertService: NotificationHandlerService) { 
+    this.ccState = this.store.select('catalog');
+    this.CatalogFormData = this.formBuilder.group({
+      Model_Name: ['', Validators.required],
+      User_id: ['', Validators.required],
+      _tags: ['', Validators.required],
+      _type: ['', Validators.required],
+      Derived_From: ['', Validators.required],
+      _description : ['', Validators.required]
+    });   
+  }
+  ngOnInit() {
+    this.options.mode = 'text';
+    this.options.modes = [ 'text', 'tree', 'view'];
+    this.options.statusBar = false; 
+
+    this.ccState.subscribe(
+      catalogdata => {
+        var catalogState: ICatalogState = { catalog: catalogdata.catalog, isLoadSuccess: catalogdata.isLoadSuccess, isSaveSuccess: catalogdata.isSaveSuccess, isUpdateSuccess: catalogdata.isUpdateSuccess };
+        this.catalog = catalogState.catalog;
+        console.log( this.catalog );
+      });
+
+//    this.catalogCreateService.getDefinition()
+//    .subscribe(data=>{
+//        console.log(data);
+//        data.forEach(element => {
+//          this.definitionType.push(element)
+//        });          
+//    }, error=>{
+//      window.alert('error' + error);
+//    })
+//
+//    this.catalogCreateService.getDerivedFrom()
+//    .subscribe(data=>{
+//        console.log(data);
+//        data.forEach(element => {
+//          this.derivedFrom.push(element)
+//        });          
+//    }, error=>{
+//      window.alert('error' + error);
+//    })
+  }
+  CreateCatalog(){
+    this.catalog = Object.assign({}, this.CatalogFormData.value);
+    this.catalog.definition=this.data;
+    let catalogState = {
+      catalog: this.catalog
+    }
+    this.store.dispatch(new SetCatalogState(catalogState));
+    
+      this.catalogCreateService.saveCatalog(this.catalog)
+      .subscribe(response=>{
+        this.alertService.success("save success")
+      },
+      error=>{
+        this.alertService.error('Error saving resources');
+      })
+ 
+  }
+
+  onChange($event) {
+    this.data=JSON.parse($event.srcElement.value); 
+    console.log(this.data);
+  };
+}
diff --git a/cds-ui/client/src/app/feature-modules/controller-catalog/create-catalog/create-catalog.module.ts b/cds-ui/client/src/app/feature-modules/controller-catalog/create-catalog/create-catalog.module.ts
new file mode 100644
index 000000000..e0ae0dc42
--- /dev/null
+++ b/cds-ui/client/src/app/feature-modules/controller-catalog/create-catalog/create-catalog.module.ts
@@ -0,0 +1,57 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2019 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 { CreateCatalogRoutingModule } from './create-catalog-routing.module';
+import { MatToolbarModule, MatButtonModule, MatSidenavModule,  MatListModule, MatGridListModule, MatCardModule, MatMenuModule, MatTableModule, MatPaginatorModule, MatSortModule, MatInputModule, MatSelectModule, MatRadioModule, MatFormFieldModule, MatStepperModule} from '@angular/material';
+import { MatIconModule } from '@angular/material/icon';
+import { SharedModule } from 'src/app/common/shared/shared.module';
+import { NgJsonEditorModule } from 'ang-jsoneditor';
+import { CreateCatalogService } from './create-catalog.service';
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    CreateCatalogRoutingModule,
+    SharedModule,
+    MatToolbarModule,
+    MatButtonModule,
+    MatSidenavModule,
+    MatIconModule,
+    MatListModule,
+    MatGridListModule,
+    MatCardModule,
+    MatMenuModule,
+    MatTableModule,
+    MatPaginatorModule,
+    MatSortModule,
+    MatInputModule,
+    MatSelectModule, 
+    MatRadioModule, 
+    MatFormFieldModule, 
+    MatStepperModule,
+    NgJsonEditorModule
+  ],
+  providers: [ CreateCatalogService ]
+})
+
+export class CreateCatalogModule { }
diff --git a/cds-ui/client/src/app/feature-modules/controller-catalog/create-catalog/create-catalog.service.ts b/cds-ui/client/src/app/feature-modules/controller-catalog/create-catalog/create-catalog.service.ts
new file mode 100644
index 000000000..fd582cc98
--- /dev/null
+++ b/cds-ui/client/src/app/feature-modules/controller-catalog/create-catalog/create-catalog.service.ts
@@ -0,0 +1,44 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2019 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 { HttpClient } from '@angular/common/http';
+import { ApiService } from 'src/app/common/core/services/api.service';
+import { ControllerCatalogURLs } from 'src/app/common/constants/app-constants';
+
+@Injectable()
+export class CreateCatalogService {
+  
+
+  constructor(private _http: HttpClient, private api: ApiService) {
+  }
+
+  saveCatalog(catalog) {
+     return this.api.post(ControllerCatalogURLs.saveControllerCatalog, catalog);
+  }
+
+  getDefinition() {
+    return this.api.get(ControllerCatalogURLs.getDefinition);
+  }
+  getDerivedFrom() {
+    return this.api.get(ControllerCatalogURLs.getDerivedFrom);
+  }
+}
+
diff --git a/cds-ui/client/src/app/feature-modules/controller-catalog/search-catalog/search-catalog-routing.module.ts b/cds-ui/client/src/app/feature-modules/controller-catalog/search-catalog/search-catalog-routing.module.ts
new file mode 100644
index 000000000..1785ef86c
--- /dev/null
+++ b/cds-ui/client/src/app/feature-modules/controller-catalog/search-catalog/search-catalog-routing.module.ts
@@ -0,0 +1,35 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2019 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 { RouterModule, Routes } from '@angular/router';
+import { SearchCatalogComponent } from './search-catalog.component';
+
+const routes: Routes = [
+  {
+      path: '',
+      component: SearchCatalogComponent
+  }
+];
+@NgModule({
+imports: [RouterModule.forChild(routes)],
+exports: [RouterModule]
+})
+export class SearchCatalogRoutingModule { }
diff --git a/cds-ui/client/src/app/feature-modules/controller-catalog/search-catalog/search-catalog.component.html b/cds-ui/client/src/app/feature-modules/controller-catalog/search-catalog/search-catalog.component.html
new file mode 100644
index 000000000..47813829d
--- /dev/null
+++ b/cds-ui/client/src/app/feature-modules/controller-catalog/search-catalog/search-catalog.component.html
@@ -0,0 +1,41 @@
+<!-- /*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2019 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=========================================================
+*/--> 
+<form class="search-form" [formGroup]="myControl">
+  <mat-form-field class="search-full-width">
+      <input matInput type="text" [(ngModel)]="searchText" placeholder="Search Resources" formControlName="search_input">
+      <button matSuffix mat-icon-button (click)="fetchCatalogByName()">
+    <mat-icon>search</mat-icon>
+  </button>
+  </mat-form-field>
+</form>
+<div class="searchcontainer">
+  <div class="flexBox">
+      <div *ngFor="let option of options" style="position: relative !important;width:20% !important">
+          <mat-card class="example-card">
+              <mat-card-content class="card-content">
+                  {{option.modelName}}
+              </mat-card-content>
+              <mat-card-actions class="flexBox">
+                  <button matStepperNext mat-menu-item (click)="editInfo(option.blueprintModel.artifactName,option.blueprintModel.artifactVersion,3)">Info</button>
+              </mat-card-actions>
+          </mat-card>
+      </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/cds-ui/client/src/app/feature-modules/controller-catalog/search-catalog/search-catalog.component.scss b/cds-ui/client/src/app/feature-modules/controller-catalog/search-catalog/search-catalog.component.scss
new file mode 100644
index 000000000..a24aebed0
--- /dev/null
+++ b/cds-ui/client/src/app/feature-modules/controller-catalog/search-catalog/search-catalog.component.scss
@@ -0,0 +1,78 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2019 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=========================================================
+*/
+
+.example-card {
+  // min-width: 300px;
+  max-height: 200px;
+  background-color: #ebebeb;
+  position: relative;
+  width: 250px;
+  margin: 5px;
+}
+
+.mat-grid-tile {
+  position: absolute;
+  width: 240px !important;
+}
+
+.mat-grid-list div {
+  position: relative;
+}
+
+button.mat-menu-item {
+  width: auto;
+  float: left;
+  border-radius: 4px;
+  background-color: #3f51b5;
+  margin: 5px;
+  cursor: pointer;
+  color: white;
+}
+
+.flexBox {
+  display: flex;
+  flex-flow: row;
+  flex-wrap: wrap;
+}
+
+.card-deck-container {
+  position: relative;
+  border-radius: 1px;
+  padding: 2px;
+  margin: 2px;
+  // background-color: #f5f5f5;
+}
+
+.searchcontainer {
+  // min-height: 300px;
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
+
+.card-content {
+  text-align: center;
+  margin: 5px;
+}
+
+.mat-card-actions {
+  margin-left: 0px !important;
+  margin-right: 0px !important;
+  padding: 0px 0 !important;
+}
\ No newline at end of file
diff --git a/cds-ui/client/src/app/feature-modules/controller-catalog/search-catalog/search-catalog.component.spec.ts b/cds-ui/client/src/app/feature-modules/controller-catalog/search-catalog/search-catalog.component.spec.ts
new file mode 100644
index 000000000..661246ebb
--- /dev/null
+++ b/cds-ui/client/src/app/feature-modules/controller-catalog/search-catalog/search-catalog.component.spec.ts
@@ -0,0 +1,45 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2019 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 { SearchCatalogComponent } from './search-catalog.component';
+
+describe('SearchCatalogComponent', () => {
+  let component: SearchCatalogComponent;
+  let fixture: ComponentFixture<SearchCatalogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SearchCatalogComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SearchCatalogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/cds-ui/client/src/app/feature-modules/controller-catalog/search-catalog/search-catalog.component.ts b/cds-ui/client/src/app/feature-modules/controller-catalog/search-catalog/search-catalog.component.ts
new file mode 100644
index 000000000..b30fc3a78
--- /dev/null
+++ b/cds-ui/client/src/app/feature-modules/controller-catalog/search-catalog/search-catalog.component.ts
@@ -0,0 +1,58 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2019 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, ViewChild } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { SearchCatalogService } from './search-catalog.service';
+import { MatAutocompleteTrigger } from '@angular/material';
+
+@Component({
+  selector: 'app-search-catalog',
+  templateUrl: './search-catalog.component.html',
+  styleUrls: ['./search-catalog.component.scss']
+})
+export class SearchCatalogComponent implements OnInit {
+  myControl: FormGroup;
+  searchText: string = '';
+  options: any[]   = [];
+  @ViewChild('catalogSelect', { read: MatAutocompleteTrigger }) catalogSelect: MatAutocompleteTrigger;
+  constructor(private _formBuilder: FormBuilder, private searchCatalogService: SearchCatalogService)  { }
+  
+ ngOnInit() {
+    this.myControl = this._formBuilder.group({
+      search_input: ['', Validators.required]
+    });
+  }
+  fetchCatalogByName() {
+    this.searchCatalogService.searchByTags(this.searchText)
+    .subscribe(data=>{
+        console.log(data);
+        data.forEach(element => {
+          this.options.push(element)
+        });          
+      this.catalogSelect.openPanel();
+    }, error=>{
+      window.alert('Catalog not matching the search tag' + error);
+    })
+   }
+
+   editInfo(artifactName: string, artifactVersion: string, option: string) {
+  }
+}
diff --git a/cds-ui/client/src/app/feature-modules/controller-catalog/search-catalog/search-catalog.module.ts b/cds-ui/client/src/app/feature-modules/controller-catalog/search-catalog/search-catalog.module.ts
new file mode 100644
index 000000000..2aa1a509e
--- /dev/null
+++ b/cds-ui/client/src/app/feature-modules/controller-catalog/search-catalog/search-catalog.module.ts
@@ -0,0 +1,58 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2019 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 { SearchCatalogRoutingModule } from './search-catalog-routing.module';
+import { MatToolbarModule, MatButtonModule, MatSidenavModule,  MatListModule, MatGridListModule, MatCardModule, MatMenuModule, MatTableModule, MatPaginatorModule, MatSortModule, MatInputModule, MatSelectModule, MatRadioModule, MatFormFieldModule, MatStepperModule, MatAutocompleteModule} from '@angular/material';
+import { MatIconModule } from '@angular/material/icon';
+import { SharedModule } from 'src/app/common/shared/shared.module';
+import { FormsModule,ReactiveFormsModule } from '@angular/forms';
+import { SearchCatalogService } from './search-catalog.service';
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    SearchCatalogRoutingModule,
+    FormsModule,
+    ReactiveFormsModule,
+    SharedModule,
+    MatToolbarModule,
+    MatButtonModule,
+    MatSidenavModule,
+    MatIconModule,
+    MatListModule,
+    MatGridListModule,
+    MatCardModule,
+    MatMenuModule,
+    MatTableModule,
+    MatPaginatorModule,
+    MatSortModule,
+    MatInputModule,
+    MatSelectModule, 
+    MatRadioModule, 
+    MatFormFieldModule, 
+    MatStepperModule,
+    MatAutocompleteModule
+  ],
+  providers: [ SearchCatalogService ]
+})
+export class SearchCatalogModule { }
diff --git a/cds-ui/client/src/app/feature-modules/controller-catalog/search-catalog/search-catalog.service.ts b/cds-ui/client/src/app/feature-modules/controller-catalog/search-catalog/search-catalog.service.ts
new file mode 100644
index 000000000..47896058a
--- /dev/null
+++ b/cds-ui/client/src/app/feature-modules/controller-catalog/search-catalog/search-catalog.service.ts
@@ -0,0 +1,36 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2019 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 { HttpClient } from '@angular/common/http';
+import { Observable, observable } from 'rxjs';
+import { ControllerCatalogURLs } from 'src/app/common/constants/app-constants';
+import { ApiService } from 'src/app/common/core/services/api.service';
+
+@Injectable()
+export class SearchCatalogService {
+
+  constructor(private _http: HttpClient, private api: ApiService) {
+  }
+
+  searchByTags(tag) {
+    return this.api.get(ControllerCatalogURLs.searchControllerCatalogByTags + '/' + tag);
+  }
+}
diff --git a/cds-ui/client/src/app/feature-modules/controller-catalog/select-template/select-template-routing.module.ts b/cds-ui/client/src/app/feature-modules/controller-catalog/select-template/select-template-routing.module.ts
new file mode 100644
index 000000000..0da5b1661
--- /dev/null
+++ b/cds-ui/client/src/app/feature-modules/controller-catalog/select-template/select-template-routing.module.ts
@@ -0,0 +1,38 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2019 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 { SelectTemplateComponent } from './select-template.component';
+import { TemplateOptionsComponent } from './template-options/template-options.component';
+
+const routes: Routes = [
+    {
+        path: '',
+        component: SelectTemplateComponent
+    }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+
+export class SelectTemplateRoutingModule { }
diff --git a/cds-ui/client/src/app/feature-modules/controller-catalog/select-template/select-template.component.html b/cds-ui/client/src/app/feature-modules/controller-catalog/select-template/select-template.component.html
new file mode 100644
index 000000000..8a51b4e09
--- /dev/null
+++ b/cds-ui/client/src/app/feature-modules/controller-catalog/select-template/select-template.component.html
@@ -0,0 +1,33 @@
+<!--/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2019 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=========================================================
+*/-->
+
+<mat-card class="ver-card">
+<mat-card-header>
+</mat-card-header>
+<mat-card-content>
+<mat-vertical-stepper linear>
+  <mat-step [stepControl]="step1FormGroup">
+    <ng-template matStepLabel>Choose Option</ng-template>
+    <br>
+    <app-template-options (option)="selectedOption($event)"></app-template-options>
+  </mat-step>
+ </mat-vertical-stepper>
+ </mat-card-content>
+</mat-card>
\ No newline at end of file
diff --git a/cds-ui/client/src/app/feature-modules/controller-catalog/select-template/select-template.component.scss b/cds-ui/client/src/app/feature-modules/controller-catalog/select-template/select-template.component.scss
new file mode 100644
index 000000000..62b6f5d03
--- /dev/null
+++ b/cds-ui/client/src/app/feature-modules/controller-catalog/select-template/select-template.component.scss
@@ -0,0 +1,52 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2019 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=========================================================
+*/
+.matStepNextBtn{
+    color:white;
+    background:#3f51b5; 
+    margin-top: 10px; 
+    position: absolute;
+    border-radius: 4px;
+}
+.ver-card {
+  width: 100%;  
+  background-color: #f1f1f1;
+   padding: 0.01em 16px;
+    margin: 20px 0;
+    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important;
+    height: auto;
+}
+.mat-card-header{
+    height:35px;
+}
+.mat-card-content{
+    width: auto;
+    background-color: #fff;
+    padding: 8px 8px;
+    // border-left: 4px solid #4CAF50;
+    word-wrap: break-word;
+    min-height:350px;
+    height: auto;
+}
+.success{
+color:green;
+}
+.comp-disabled {
+    display: none;
+}
\ No newline at end of file
diff --git a/cds-ui/client/src/app/feature-modules/controller-catalog/select-template/select-template.component.spec.ts b/cds-ui/client/src/app/feature-modules/controller-catalog/select-template/select-template.component.spec.ts
new file mode 100644
index 000000000..c0c7b50fb
--- /dev/null
+++ b/cds-ui/client/src/app/feature-modules/controller-catalog/select-template/select-template.component.spec.ts
@@ -0,0 +1,45 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2019 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 { SelectTemplateComponent } from './select-template.component';
+
+describe('SelectTemplateComponent', () => {
+  let component: SelectTemplateComponent;
+  let fixture: ComponentFixture<SelectTemplateComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SelectTemplateComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SelectTemplateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/cds-ui/client/src/app/feature-modules/controller-catalog/select-template/select-template.component.ts b/cds-ui/client/src/app/feature-modules/controller-catalog/select-template/select-template.component.ts
new file mode 100644
index 000000000..ed44e0cf4
--- /dev/null
+++ b/cds-ui/client/src/app/feature-modules/controller-catalog/select-template/select-template.component.ts
@@ -0,0 +1,43 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2019 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, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'app-select-template',
+  templateUrl: './select-template.component.html',
+  styleUrls: ['./select-template.component.scss']
+})
+export class SelectTemplateComponent implements OnInit {
+
+  selectedValue: any;
+  @Output() option = new EventEmitter();
+  
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  selectedOption(value){
+    this.selectedValue=value;
+    this.option.emit(value);      
+ }
+ 
+}
diff --git a/cds-ui/client/src/app/feature-modules/controller-catalog/select-template/select-template.module.ts b/cds-ui/client/src/app/feature-modules/controller-catalog/select-template/select-template.module.ts
new file mode 100644
index 000000000..8853b5bd2
--- /dev/null
+++ b/cds-ui/client/src/app/feature-modules/controller-catalog/select-template/select-template.module.ts
@@ -0,0 +1,71 @@
+/*
+* ============LICENSE_START=======================================================
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2019 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 { TemplateOptionsComponent } from './template-options/template-options.component';
+import { SelectTemplateComponent } from './select-template.component';
+import { SelectTemplateRoutingModule } from './select-template-routing.module';
+import { AppMaterialModule } from 'src/app/common/modules/app-material.module';
+import { MatAutocompleteModule,MatToolbarModule,MatIconModule, MatButtonModule, MatSidenavModule,  MatCheckboxModule, MatListModule, MatGridListModule, MatCardModule, MatMenuModule, MatTableModule, MatPaginatorModule, MatSortModule, MatInputModule, MatSelectModule, MatRadioModule, MatFormFieldModule, MatStepperModule} from '@angular/material';
+import { SharedModule } from '../../../../app/common/shared/shared.module';
+import { FormsModule,ReactiveFormsModule } from '@angular/forms';
+
+@NgModule({
+  declarations: [
+    TemplateOptionsComponent,
+    SelectTemplateComponent
+  ],
+  exports: [
+    TemplateOptionsComponent,
+    SelectTemplateComponent
+  ],
+  imports: [
+    CommonModule,
+    SelectTemplateRoutingModule,
+    ReactiveFormsModule,
+    AppMaterialModule,
+    FormsModule,
+    ReactiveFormsModule,
+    MatToolbarModule,
+    MatIconModule, 
+    MatButtonModule, 
+    MatSidenavModule,  
+    MatCheckboxModule, 
+    MatListModule, 
+    MatGridListModule, 
+    MatCardModule, 
+    MatMenuModule, 
+    MatTableModule, 
+    MatPaginatorModule, 
+    MatSortModule, 
+    MatInputModule, 
+    MatSelectModule, 
+    MatRadioModule, 
+    MatFormFieldModule, 
+    MatStepperModule,
+    MatAutocompleteModule
+  ],
+  providers: [
+  ]
+})
+export class SelectTemplateModule { }
diff --git a/cds-ui/client/src/app/feature-modules/controller-catalog/select-template/template-options/template-options.component.html b/cds-ui/client/src/app/feature-modules/controller-catalog/select-template/template-options/template-options.component.html
new file mode 100644
index 000000000..185a112e4
--- /dev/null
+++ b/cds-ui/client/src/app/feature-modules/controller-catalog/select-template/template-options/template-options.component.html
@@ -0,0 +1,24 @@
+<!--/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2019 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=========================================================
+*/-->
+
+<mat-radio-group>
+  <mat-radio-button value="1" (click)="selected(1)">Create New Catalog</mat-radio-button><br><br>
+  <mat-radio-button value="2" (click)="selected(2)">Search existing catalog</mat-radio-button><br><br>
+</mat-radio-group>
\ No newline at end of file
diff --git a/cds-ui/client/src/app/feature-modules/controller-catalog/select-template/template-options/template-options.component.scss b/cds-ui/client/src/app/feature-modules/controller-catalog/select-template/template-options/template-options.component.scss
new file mode 100644
index 000000000..d0f182d40
--- /dev/null
+++ b/cds-ui/client/src/app/feature-modules/controller-catalog/select-template/template-options/template-options.component.scss
@@ -0,0 +1,19 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2019 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/client/src/app/feature-modules/controller-catalog/select-template/template-options/template-options.component.spec.ts b/cds-ui/client/src/app/feature-modules/controller-catalog/select-template/template-options/template-options.component.spec.ts
new file mode 100644
index 000000000..03e799838
--- /dev/null
+++ b/cds-ui/client/src/app/feature-modules/controller-catalog/select-template/template-options/template-options.component.spec.ts
@@ -0,0 +1,45 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2019 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 { TemplateOptionsComponent } from './template-options.component';
+
+describe('TemplateOptionsComponent', () => {
+  let component: TemplateOptionsComponent;
+  let fixture: ComponentFixture<TemplateOptionsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TemplateOptionsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TemplateOptionsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/cds-ui/client/src/app/feature-modules/controller-catalog/select-template/template-options/template-options.component.ts b/cds-ui/client/src/app/feature-modules/controller-catalog/select-template/template-options/template-options.component.ts
new file mode 100644
index 000000000..dc9513bc9
--- /dev/null
+++ b/cds-ui/client/src/app/feature-modules/controller-catalog/select-template/template-options/template-options.component.ts
@@ -0,0 +1,40 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2019 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, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'app-template-options',
+  templateUrl: './template-options.component.html',
+  styleUrls: ['./template-options.component.scss']
+})
+export class TemplateOptionsComponent implements OnInit {
+
+  @Output() option = new EventEmitter();
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  selected(value){
+	    this.option.emit(value);
+  }
+}
-- 
2.16.6