Catalog alignment

Issue-ID: SDC-2724
Signed-off-by: ys9693 <ys9693@att.com>
Change-Id: I52b4aacb58cbd432ca0e1ff7ff1f7dd52099c6fe

3 files changed, 0 insertions, 1251 deletions

diff --git a/catalog-ui/src/app/view-models/catalog/catalog-view-model.ts b/catalog-ui/src/app/view-models/catalog/catalog-view-model.ts
deleted file mode 100644
index 8840afd79d..0000000000
--- a/catalog-ui/src/app/view-models/catalog/catalog-view-model.ts
+++ /dev/null
@@ -1,680 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * 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=========================================================
- */
-
-'use strict';
-import * as _ from "lodash";
-import {Component, IMainCategory, IGroup, IConfigStatuses, IAppMenu, IAppConfigurtaion, IUserProperties, ISubCategory, ICategoryBase} from "app/models";
-import {EntityService, CacheService} from "app/services";
-import {ComponentFactory, ResourceType, MenuHandler, ChangeLifecycleStateHandler} from "app/utils";
-import {UserService} from "../../ng2/services/user.service";
-import {ArchiveService} from "../../ng2/services/archive.service";
-import { ICatalogSelector, CatalogSelectorTypes } from "../../models/catalogSelector";
-import {IConfigStatus} from "../../models/app-config";
-
-interface Checkboxes {
-    componentTypes:Array<string>;
-    resourceSubTypes:Array<string>;
-}
-
-interface CheckboxesFilter {
-    // Types
-    selectedComponentTypes:Array<string>;
-    selectedResourceSubTypes:Array<string>;
-    // Categories
-    selectedCategoriesModel:Array<string>;
-    // Statuses
-    selectedStatuses:Array<Array<string>>;
-}
-
-interface Gui {
-    isLoading:boolean;
-    onComponentSubTypesClick:Function;
-    onComponentTypeClick:Function;
-    onCategoryClick:Function;
-    onStatusClick:Function;
-    changeFilterTerm:Function;
-}
-
-interface IFilterParams {
-    components: string[];
-    categories: string[];
-    statuses: (string)[];
-    order: [string, boolean];
-    term: string;
-    active: boolean;
-}
-
-interface ICategoriesMap {
-    [key: string]: {
-        category: ICategoryBase,
-        parent: ICategoryBase
-    }
-}
-
-export interface ICatalogViewModelScope extends ng.IScope {
-    checkboxes:Checkboxes;
-    checkboxesFilter:CheckboxesFilter;
-    gui:Gui;
-
-    categories:Array<IMainCategory>;
-    confStatus:IConfigStatuses;
-    sdcMenu:IAppMenu;
-    catalogFilterdItems:Array<Component>;
-    expandedSection:Array<string>;
-    actionStrategy:any;
-    user:IUserProperties;
-    catalogMenuItem:any;
-    version:string;
-    sortBy:string;
-    reverse:boolean;
-    vfcmtType:string;
-
-    //this is for UI paging
-    numberOfItemToDisplay:number;
-    isAllItemDisplay:boolean;
-    catalogFilteredItemsNum:number;
-    changeLifecycleState(entity:any, state:string):void;
-    sectionClick (section:string):void;
-    order(sortBy:string):void;
-    getElementFoundTitle(num:number):string;
-    goToComponent(component:Component):void;
-    raiseNumberOfElementToDisplay():void;
-
-    selectedCatalogItem: ICatalogSelector;
-    catalogSelectorItems: Array<ICatalogSelector>;
-    showCatalogSelector: boolean;
-    catalogAllItems:Array<Component>; /* fake data */
-    elementFoundTitle: string;
-    elementTypeTitle: string;
-
-    selectLeftSwitchItem (item: ICatalogSelector): void;
-}
-
-export class CatalogViewModel {
-    static '$inject' = [
-        '$scope',
-        '$filter',
-        'Sdc.Services.EntityService',
-        'sdcConfig',
-        'sdcMenu',
-        '$state',
-        '$q',
-        'UserServiceNg2',
-        'Sdc.Services.CacheService',
-        'ComponentFactory',
-        'ChangeLifecycleStateHandler',
-        'MenuHandler',
-        'ArchiveServiceNg2'
-    ];
-
-    private defaultFilterParams:IFilterParams = {
-        components: [],
-        categories: [],
-        statuses: [],
-        order: ['lastUpdateDate', true],
-        term: '',
-        active: true
-    };
-    private categoriesMap:ICategoriesMap;
-
-    constructor(private $scope:ICatalogViewModelScope,
-                private $filter:ng.IFilterService,
-                private EntityService:EntityService,
-                private sdcConfig:IAppConfigurtaion,
-                private sdcMenu:IAppMenu,
-                private $state:ng.ui.IStateService,
-                private $q:ng.IQService,
-                private userService:UserService,
-                private cacheService:CacheService,
-                private ComponentFactory:ComponentFactory,
-                private ChangeLifecycleStateHandler:ChangeLifecycleStateHandler,
-                private MenuHandler:MenuHandler,
-                private ArchiveService:ArchiveService
-            ) {
-
-
-        this.initLeftSwitch();
-        this.initScopeMembers();
-        this.loadFilterParams(); 
-        this.initCatalogData(); // Async task to get catalog from server.
-        this.initScopeMethods();
-    }
-
-
-    private initLeftSwitch = ():void => {
-        this.$scope.showCatalogSelector = false;
-
-        this.$scope.catalogSelectorItems = [
-            {value: CatalogSelectorTypes.Active, title: "Active Items", header: "Active"},
-            {value: CatalogSelectorTypes.Archive, title: "Archive", header: "Archived"}
-        ];
-        // set active items is default
-        this.$scope.selectedCatalogItem = this.$scope.catalogSelectorItems[0];
-    };
-
-    private initCatalogData = ():void => {
-        if(this.$scope.selectedCatalogItem.value === CatalogSelectorTypes.Archive){
-            this.getArchiveCatalogItems();
-        } else {
-            this.getActiveCatalogItems();
-        }
-    };
-
-    private initScopeMembers = ():void => {
-        // Gui init
-        this.$scope.gui = <Gui>{};
-        this.$scope.numberOfItemToDisplay = 0;
-        this.$scope.categories = this.cacheService.get('serviceCategories').concat(this.cacheService.get('resourceCategories')).map((cat) => <IMainCategory>cat);
-        this.$scope.sdcMenu = this.sdcMenu;
-        this.$scope.confStatus = this.sdcMenu.statuses;
-        this.$scope.expandedSection = ["type", "category", "status"];
-        this.$scope.user = this.userService.getLoggedinUser();
-        this.$scope.catalogMenuItem = this.sdcMenu.catalogMenuItem;
-
-        // Checklist init
-        this.$scope.checkboxes = <Checkboxes>{};
-        this.$scope.checkboxes.componentTypes = ['Resource', 'Service'];
-        this.$scope.checkboxes.resourceSubTypes = ['VF', 'VFC', 'CR', 'PNF', 'CP', 'VL'];
-        this.categoriesMap = this.initCategoriesMap();
-
-        this.initCheckboxesFilter();
-        this.$scope.version = this.cacheService.get('version');
-        this.$scope.sortBy = 'lastUpdateDate';
-        this.$scope.reverse = true;
-
-    };
-
-    private initCheckboxesFilter() {
-        // Checkboxes filter init
-        this.$scope.checkboxesFilter = <CheckboxesFilter>{};
-        this.$scope.checkboxesFilter.selectedComponentTypes = [];
-        this.$scope.checkboxesFilter.selectedResourceSubTypes = [];
-        this.$scope.checkboxesFilter.selectedCategoriesModel = [];
-        this.$scope.checkboxesFilter.selectedStatuses = [];
-    }
-
-    private initCategoriesMap(categoriesList?:(ICategoryBase)[], parentCategory:ICategoryBase=null): ICategoriesMap {
-        categoriesList = (categoriesList) ? categoriesList : this.$scope.categories;
-
-        // Init categories map
-        return categoriesList.reduce((acc, cat) => {
-            acc[cat.uniqueId] = {
-                category: cat,
-                parent: parentCategory
-            };
-            const catChildren = ((<IMainCategory>cat).subcategories)
-                ? (<IMainCategory>cat).subcategories
-                : (((<ISubCategory>cat).groupings)
-                    ? (<ISubCategory>cat).groupings
-                    : null);
-            if (catChildren) {
-                Object.assign(acc, this.initCategoriesMap(catChildren, cat));
-            }
-            return acc;
-        }, <ICategoriesMap>{});
-    }
-
-    private initScopeMethods = ():void => {
-        this.$scope.selectLeftSwitchItem = (item: ICatalogSelector): void => {
-
-            if (this.$scope.selectedCatalogItem.value !== item.value) {
-                this.$scope.selectedCatalogItem = item;
-                switch (item.value) {
-                    case CatalogSelectorTypes.Active:
-                        this.getActiveCatalogItems(true);
-                        break;
-
-                    case CatalogSelectorTypes.Archive:
-                        this.getArchiveCatalogItems(true);
-                        break;
-                }
-                this.changeFilterParams({active: (item.value === CatalogSelectorTypes.Active)})
-            }
-        };
-
-        this.$scope.sectionClick = (section: string): void => {
-            let index: number = this.$scope.expandedSection.indexOf(section);
-            if (index !== -1) {
-                this.$scope.expandedSection.splice(index, 1);
-            } else {
-                this.$scope.expandedSection.push(section);
-            }
-        };
-
-
-        this.$scope.order = (sortBy: string): void => {//default sort by descending last update. default for alphabetical = ascending
-            this.changeFilterParams({
-                order: (this.$scope.filterParams.order[0] === sortBy)
-                    ? [sortBy, !this.$scope.filterParams.order[1]]
-                    : [sortBy, sortBy === 'lastUpdateDate']
-            });
-        };
-
-
-        this.$scope.goToComponent = (component: Component): void => {
-            this.$scope.gui.isLoading = true;
-            this.$state.go('workspace.general', {id: component.uniqueId, type: component.componentType.toLowerCase()});
-        };
-
-
-        // Will print the number of elements found in catalog
-        this.$scope.getNumOfElements = (num:number):string => {
-            if (!num || num === 0) {
-                return `No <b>${this.$scope.selectedCatalogItem.header}</b> Elements found`;
-            } else if (num === 1) {
-                return `1 <b>${this.$scope.selectedCatalogItem.header}</b> Element found`;
-            } else {
-                return num + ` <b>${this.$scope.selectedCatalogItem.header}</b> Elements found`;
-            }
-        };
-
-        /**
-         * Select | unselect sub resource when resource is clicked | unclicked.
-         * @param type
-         */
-        this.$scope.gui.onComponentTypeClick = (compType: string, checked?: boolean): void => {
-            let components = angular.copy(this.$scope.filterParams.components);
-            const compIdx = components.indexOf(compType);
-            checked = (checked !== undefined) ? checked : compIdx === -1;
-            if (checked && compIdx === -1) {
-                components.push(compType);
-                components = this.cleanSubsFromList(components);
-            } else if (!checked && compIdx !== -1) {
-                components.splice(compIdx, 1);
-            }
-            this.changeFilterParams({
-                components: components
-            });
-        };
-
-        /**
-         * Selecting | unselect resources when sub resource is clicked | unclicked.
-         */
-        this.$scope.gui.onComponentSubTypesClick = (compSubType: string, compType: string, checked?: boolean): void => {
-            const componentSubTypesCheckboxes = this.$scope.checkboxes[compType.toLowerCase() + 'SubTypes'];
-            if (componentSubTypesCheckboxes) {
-                let components = angular.copy(this.$scope.filterParams.components);
-                let componentSubTypes = components.filter((st) => st.startsWith(compType + '.'));
-
-                const compSubTypeValue = compType + '.' + compSubType;
-                const compSubTypeValueIdx = components.indexOf(compSubTypeValue);
-                checked = (checked !== undefined) ? checked : compSubTypeValueIdx === -1;
-                if (checked && compSubTypeValueIdx === -1) {
-                    components.push(compSubTypeValue);
-                    componentSubTypes.push(compSubTypeValue);
-
-                    // if all sub types are checked, then check the main component type
-                    if (componentSubTypes.length === componentSubTypesCheckboxes.length) {
-                        this.$scope.gui.onComponentTypeClick(compType, true);
-                        return;
-                    }
-                } else if (!checked) {
-                    const compIdx = components.indexOf(compType);
-                    // if sub type exists, then remove it
-                    if (compSubTypeValueIdx !== -1) {
-                        components.splice(compSubTypeValueIdx, 1);
-                    }
-                    // else, if sub type doesn't exists, but its parent main component type exists,
-                    // then remove the main type and push all sub types except the current
-                    else if (compIdx !== -1) {
-                        components.splice(compIdx, 1);
-                        componentSubTypesCheckboxes.forEach((st) => {
-                            if (st !== compSubType) {
-                                components.push(compType + '.' + st);
-                            }
-                        });
-                    }
-                }
-
-                this.changeFilterParams({
-                    components
-                });
-            }
-        };
-
-        this.$scope.gui.onCategoryClick = (category: ICategoryBase, checked?: boolean): void => {
-            let categories: string[] = angular.copy(this.$scope.filterParams.categories);
-            let parentCategory: ICategoryBase = this.categoriesMap[category.uniqueId].parent;
-
-            // add the category to selected categories list
-            const categoryIdx = categories.indexOf(category.uniqueId);
-            checked = (checked !== undefined) ? checked : categoryIdx === -1;
-            if (checked && categoryIdx === -1) {
-                categories.push(category.uniqueId);
-
-                // check if all parent category children are checked, then check the parent category
-                if (parentCategory) {
-                    if (this.getParentCategoryChildren(parentCategory).every((ch) => categories.indexOf(ch.uniqueId) !== -1)) {
-                        this.$scope.gui.onCategoryClick(parentCategory, true);
-                        return;
-                    }
-                }
-
-                categories = this.cleanSubsFromList(categories);
-            } else if (!checked) {
-                // if category exists, then remove it
-                if (categoryIdx !== -1) {
-                    categories.splice(categoryIdx, 1);
-                }
-                // else, if category doesn't exists, but one of its parent categories exists,
-                // then remove that parent category and push all its children categories except the current
-                else {
-                    let prevParentCategory: ICategoryBase = category;
-                    let additionalCategories: string[] = [];
-                    while (parentCategory) {
-                        // add parent category children to list for replacing the parent category (if will be found later)
-                        additionalCategories = additionalCategories.concat(
-                            this.getParentCategoryChildren(parentCategory)
-                                .filter((ch) => ch.uniqueId !== prevParentCategory.uniqueId)
-                                .map((ch) => ch.uniqueId));
-
-                        const parentCategoryIdx = categories.indexOf(parentCategory.uniqueId);
-                        if (parentCategoryIdx !== -1) {
-                            categories.splice(parentCategoryIdx, 1);
-                            categories = categories.concat(additionalCategories);
-                            break;
-                        } else {
-                            prevParentCategory = parentCategory;
-                            parentCategory = this.categoriesMap[parentCategory.uniqueId].parent;
-                        }
-                    }
-                }
-            }
-
-            this.changeFilterParams({
-                categories
-            });
-        };
-
-        this.$scope.gui.onStatusClick = (statusKey: string, status: IConfigStatus, checked?: boolean) => {
-            const statuses = angular.copy(this.$scope.filterParams.statuses);
-
-            // add the status key to selected statuses list
-            const statusIdx = statuses.indexOf(statusKey);
-            checked = (checked !== undefined) ? checked : statusIdx === -1;
-            if (checked && statusIdx === -1) {
-                statuses.push(statusKey);
-            } else if (!checked && statusIdx !== -1) {
-                statuses.splice(statusIdx, 1);
-            }
-
-            this.changeFilterParams({
-                statuses
-            });
-        };
-
-        this.$scope.gui.changeFilterTerm = (filterTerm: string) => {
-            this.changeFilterParams({
-                term: filterTerm
-            });
-        };
-
-        this.$scope.raiseNumberOfElementToDisplay = (): void => {
-            this.$scope.numberOfItemToDisplay = this.$scope.numberOfItemToDisplay + 35;
-            if (this.$scope.catalogFilterdItems) {
-                this.$scope.isAllItemDisplay = this.$scope.numberOfItemToDisplay >= this.$scope.catalogFilterdItems.length;
-            }
-        };
-
-    }
-
-    private getAllCategoryChildrenIdsFlat(category:ICategoryBase) {
-        let catChildrenIds = [];
-        if ((<IMainCategory>category).subcategories) {
-            catChildrenIds = (<IMainCategory>category).subcategories.reduce((acc, scat) => {
-                    return acc.concat(this.getAllCategoryChildrenIdsFlat(scat));
-                }, (<IMainCategory>category).subcategories.map((scat) => scat.uniqueId));
-        }
-        else if ((<ISubCategory>category).groupings) {
-            catChildrenIds = (<ISubCategory>category).groupings.map((g) => g.uniqueId);
-        }
-        return catChildrenIds;
-    }
-
-    private getParentCategoryChildren(parentCategory:ICategoryBase): ICategoryBase[] {
-        if ((<IMainCategory>parentCategory).subcategories) {
-            return (<IMainCategory>parentCategory).subcategories;
-        } else if ((<ISubCategory>parentCategory).groupings) {
-            return (<ISubCategory>parentCategory).groupings;
-        }
-        return [];
-    }
-
-    private cleanSubsFromList(list:Array<string>, delimiter:string='.', removeSubsList?:Array<string>) {
-        let curRemoveSubsList = (removeSubsList || list).slice().sort();  // by default remove any children of any item in list
-        while (curRemoveSubsList.length) {
-            const curRemoveSubItem = curRemoveSubsList.shift();
-            const removeSubListFilter = (x) => !x.startsWith(curRemoveSubItem + delimiter);
-            list = list.filter(removeSubListFilter);
-            curRemoveSubsList = curRemoveSubsList.filter(removeSubListFilter);
-        }
-        return list;
-    }
-
-    private applyFilterParamsToView(filterParams:IFilterParams) {
-        // reset checkboxes filter
-        this.initCheckboxesFilter();
-
-        this.applyFilterParamsComponents(filterParams);
-        this.applyFilterParamsCategories(filterParams);
-        this.applyFilterParamsStatuses(filterParams);
-        this.applyFilterParamsOrder(filterParams);
-        this.applyFilterParamsTerm(filterParams);
-    }
-
-    private applyFilterParamsComponents(filterParams:IFilterParams) {
-        const componentList = [];
-        const componentSubTypesLists = {};
-        filterParams.components.forEach((compStr) => {
-            const compWithSub = compStr.split('.', 2);
-            const mainComp = compWithSub[0];
-            const subComp = compWithSub[1];
-            if (!subComp) {  // main component type
-                componentList.push(mainComp);
-
-                // if component type has sub types list, then add all component sub types
-                const checkboxesSubTypeKey = mainComp.toLowerCase() + 'SubTypes';
-                if (this.$scope.checkboxes.hasOwnProperty(checkboxesSubTypeKey)) {
-                    componentSubTypesLists[mainComp] = angular.copy(this.$scope.checkboxes[checkboxesSubTypeKey]);
-                }
-            } else {  // sub component type
-                // init component sub types list
-                if (!componentSubTypesLists.hasOwnProperty(mainComp)) {
-                    componentSubTypesLists[mainComp] = [];
-                }
-                // add sub type to list if not exist
-                if (componentSubTypesLists[mainComp].indexOf(subComp) === -1) {
-                    componentSubTypesLists[mainComp].push(subComp);
-                }
-            }
-        });
-        this.$scope.checkboxesFilter.selectedComponentTypes = componentList;
-        Object.keys(componentSubTypesLists).forEach((tKey) => {
-            const compSelectedSubTypeKey = 'selected' + tKey + 'SubTypes';
-            if (this.$scope.checkboxesFilter.hasOwnProperty(compSelectedSubTypeKey)) {
-                this.$scope.checkboxesFilter[compSelectedSubTypeKey] = componentSubTypesLists[tKey];
-            }
-        });
-
-        let selectedCatalogIndex = filterParams.active ? CatalogSelectorTypes.Active : CatalogSelectorTypes.Archive;
-        this.$scope.selectedCatalogItem = this.$scope.catalogSelectorItems[selectedCatalogIndex];
-        
-    }
-
-    private applyFilterParamsCategories(filterParams:IFilterParams) {
-        this.$scope.checkboxesFilter.selectedCategoriesModel = filterParams.categories.reduce((acc, c) => {
-            acc.push(c);
-            const cat = this.categoriesMap[c].category;
-            if (cat) {
-                acc = acc.concat(this.getAllCategoryChildrenIdsFlat(cat));
-            }
-            return acc;
-        }, []);
-    }
-
-    private getActiveCatalogItems(forceReload?: boolean): void {
-
-        if (forceReload || this.componentShouldReload()) {
-            this.$scope.gui.isLoading = true;
-            let onSuccess = (followedResponse:Array<Component>):void => {
-                this.updateCatalogItems(followedResponse);
-                this.$scope.gui.isLoading = false;
-                this.cacheService.set('breadcrumbsComponentsState', this.$state.current.name);  //catalog
-                this.cacheService.set('breadcrumbsComponents', followedResponse);
-            };
-
-            let onError = ():void => {
-                console.info('Failed to load catalog CatalogViewModel::getActiveCatalogItems');
-                this.$scope.gui.isLoading = false;
-            };
-            this.EntityService.getCatalog().then(onSuccess, onError);
-        } else {
-            let cachedComponents = this.cacheService.get('breadcrumbsComponents');
-            this.updateCatalogItems(cachedComponents);
-        }
-    }
-
-    private getArchiveCatalogItems(forceReload?: boolean): void {
-        if(forceReload || !this.cacheService.contains("archiveComponents")) {
-            this.$scope.gui.isLoading = true;
-            let onSuccess = (followedResponse:Array<Component>):void => {
-                this.cacheService.set("archiveComponents", followedResponse);
-                this.updateCatalogItems(followedResponse);
-                this.$scope.gui.isLoading = false;
-            };
-    
-            let onError = ():void => {
-                console.info('Failed to load catalog CatalogViewModel::getArchiveCatalogItems');
-                this.$scope.gui.isLoading = false;
-            };
-    
-            this.ArchiveService.getArchiveCatalog().subscribe(onSuccess, onError);
-        } else {
-            let archiveCache = this.cacheService.get("archiveComponents");
-            this.updateCatalogItems(archiveCache);
-        }
-
-    }
-
-    private updateCatalogItems = (items:Array<Component>):void => {
-        this.$scope.catalogFilterdItems = items;
-        this.$scope.isAllItemDisplay = this.$scope.numberOfItemToDisplay >= this.$scope.catalogFilterdItems.length;
-        this.$scope.categories = this.cacheService.get('serviceCategories').concat(this.cacheService.get('resourceCategories'));
-    }
-
-    private componentShouldReload = ():boolean => {
-        let breadcrumbsValid: boolean = (this.$state.current.name === this.cacheService.get('breadcrumbsComponentsState') && this.cacheService.contains('breadcrumbsComponents'));
-        return !breadcrumbsValid || this.isDefaultFilter();
-    }
-
-    private isDefaultFilter = (): boolean => {
-        return angular.equals(this.defaultFilterParams, this.$scope.filterParams);
-    }
-
-    private applyFilterParamsStatuses(filterParams: IFilterParams) {
-        this.$scope.checkboxesFilter.selectedStatuses = filterParams.statuses.reduce((acc, stKey:string) => {
-            const status = this.$scope.confStatus[stKey];
-            if (status) {
-                acc.push(status.values);
-            }
-            return acc;
-        }, []);
-    }
-
-    private applyFilterParamsOrder(filterParams: IFilterParams) {
-        this.$scope.sortBy = filterParams.order[0];
-        this.$scope.reverse = filterParams.order[1];
-    }
-
-    private applyFilterParamsTerm(filterParams: IFilterParams) {
-        this.$scope.search = {
-            filterTerm: filterParams.term
-        };
-    }
-
-    private loadFilterParams() {
-        const params = this.$state.params;
-        this.$scope.filterParams = angular.copy(this.defaultFilterParams);
-        Object.keys(params).forEach((k) => {
-            if (!angular.isUndefined(params[k])) {
-                let newVal;
-                let filterKey = k.substr('filter.'.length);
-                switch (k) {
-                    case 'filter.components':
-                    case 'filter.categories':
-                        newVal = _.uniq(params[k].split(','));
-                        newVal = this.cleanSubsFromList(newVal);
-                        break;
-                    case 'filter.statuses':
-                        newVal = _.uniq(params[k].split(','));
-                        break;
-                    case 'filter.order':
-                        newVal = params[k].startsWith('-') ? [params[k].substr(1), true] : [params[k], false];
-                        break;
-                    case 'filter.term':
-                        newVal = params[k];
-                        break;
-                    case 'filter.active':
-                        newVal = (params[k] === "true" || params[k] === true);
-                        break;
-                    default:
-                        // unknown filter key
-                        filterKey = null;
-                }
-                if (filterKey) {
-                    this.$scope.filterParams[filterKey] = newVal;
-                }
-            }
-        });
-        // re-set filter params with valid values
-        this.applyFilterParamsToView(this.$scope.filterParams);
-
-    }
-
-    private changeFilterParams(changedFilterParams) {
-        const newParams = {};
-        Object.keys(changedFilterParams).forEach((k) => {
-            let newVal;
-            switch (k) {
-                case 'components':
-                case 'categories':
-                case 'statuses':
-                    newVal = changedFilterParams[k] && changedFilterParams[k].length ? changedFilterParams[k].join(',') : null;
-                    break;
-                case 'order':
-                    newVal = (changedFilterParams[k][1] ? '-' : '') + changedFilterParams[k][0];
-                    break;
-                case 'term':
-                    newVal = changedFilterParams[k] ? changedFilterParams[k] : null;
-                    break;
-                case 'active':
-                    newVal = changedFilterParams[k];
-                    break;
-                default:
-                    return;
-            }
-            this.$scope.filterParams[k] = changedFilterParams[k];
-            newParams['filter.' + k] = newVal;
-        });
-        this.$state.go('.', newParams, {location: 'replace', notify: false}).then(() => {
-            this.applyFilterParamsToView(this.$scope.filterParams);
-        });
-    }
-}
diff --git a/catalog-ui/src/app/view-models/catalog/catalog-view.html b/catalog-ui/src/app/view-models/catalog/catalog-view.html
deleted file mode 100644
index 25fa561155..0000000000
--- a/catalog-ui/src/app/view-models/catalog/catalog-view.html
+++ /dev/null
@@ -1,209 +0,0 @@
-<!--
-  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
-  ~
-  ~ 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.
--->
-
-<div class="sdc-catalog-container">
-
-    <loader data-display="gui.isLoading"></loader>
-<!--
-    <ecomp-header menu-data="menuItems" version="{{version}}"></ecomp-header>
--->
-
-    <div class="w-sdc-main-container">
-
-        <div
-            class="i-sdc-designer-leftbar-section-left-switch-header"
-            data-tests-id="catalog-selector-button"
-            data-ng-click="showCatalogSelector=!showCatalogSelector">
-            <div  class="i-sdc-designer-leftbar-section-left-switch-header-text">
-                {{selectedCatalogItem.title}}
-            </div>
-            <div class="i-sdc-designer-leftbar-section-left-switch-header-icon sprite-new arrow-up-small">&nbsp;</div>
-
-            <div
-                class="sdc-catalog-selector-wrapper"
-                data-ng-show="showCatalogSelector">
-                <div
-                    class="sdc-catalog-selector-item"
-                    data-ng-repeat="leftSwitchItem in catalogSelectorItems track by $index"
-                    data-tests-id="catalog-selector-{{leftSwitchItem.value}}"
-                    data-ng-click="selectLeftSwitchItem(leftSwitchItem)">
-                    <span>{{leftSwitchItem.title}}</span>
-                </div>
-            </div>
-        </div>
-
-        <!-- LEFT SIDE -->
-        <perfect-scrollbar scroll-y-margin-offset="0" class="sdc-catalog-body-container w-sdc-left-sidebar i-sdc-designer-left-sidebar" include-padding="true">
-            <div class="sdc-catalog-leftbar-container">
-                <div class="sdc-catalog-type-filter-container">
-                    <div
-                        class="i-sdc-designer-leftbar-section-title pointer"
-                        data-ng-click="sectionClick('type')"
-                        data-ng-class="{'expanded': expandedSection.indexOf('type') !== -1}">
-                        <span class="i-sdc-designer-leftbar-section-title-icon"></span>
-                        <span class="i-sdc-designer-leftbar-section-title-text" data-tests-id="typeFilterTitle">Type</span>
-                    </div>
-                    <div class="i-sdc-designer-leftbar-section-content">
-                        <ul class="list-unstyled i-sdc-designer-leftbar-section-content-ul">
-                            <li class="i-sdc-designer-leftbar-section-content-ul-li" data-ng-repeat="type in checkboxes.componentTypes">
-
-                                <ng1-checkbox elem-id="checkbox-{{type | lowercase | clearWhiteSpaces}}"
-                                              sdc-checklist-model="checkboxesFilter.selectedComponentTypes"
-                                              sdc-checklist-value="type"
-                                              sdc-checked-change="gui.onComponentTypeClick(type, checked)"
-                                              text="{{type}}"></ng1-checkbox>
-
-                                <ul class="list-unstyled i-sdc-catalog-subcategories-checkbox" data-ng-if="type==='Resource'">
-                                    <li data-ng-repeat="subType in checkboxes.resourceSubTypes">
-
-                                        <ng1-checkbox elem-id="checkbox-{{subType | lowercase | clearWhiteSpaces}}"
-                                                      sdc-checklist-model="checkboxesFilter.selectedResourceSubTypes"
-                                                      sdc-checklist-value="subType"
-                                                      sdc-checked-change="gui.onComponentSubTypesClick(subType, type, checked)"
-                                                      text="{{subType}}"></ng1-checkbox>
-
-                                    </li>
-                                </ul>
-                            </li>
-                        </ul>
-                    </div>
-                </div>
-
-                <div class="sdc-catalog-categories-filter-container">
-                    <div
-                        class="i-sdc-designer-leftbar-section-title pointer"
-                        data-ng-click="sectionClick('category')"
-                        data-ng-class="{'expanded': expandedSection.indexOf('category') !== -1}">
-                        <span class="i-sdc-designer-leftbar-section-title-icon"></span>
-                        <span class="i-sdc-designer-leftbar-section-title-text" data-tests-id="categoriesFilterTitle">Categories</span>
-                    </div>
-                    <div class="i-sdc-designer-leftbar-section-content">
-                        <!-- CATEGORY CHECKBOX -->
-                        <ul class="list-unstyled i-sdc-designer-leftbar-section-content-ul">
-                            <li class="i-sdc-designer-leftbar-section-content-ul-li"
-                                data-ng-repeat="category in categories | categoryTypeFilter:checkboxesFilter.selectedComponentTypes:checkboxesFilter.selectedResourceSubTypes | orderBy: category">
-
-                                <ng1-checkbox elem-id="checkbox-{{category.uniqueId | lowercase | clearWhiteSpaces}}"
-                                              sdc-checklist-model="checkboxesFilter.selectedCategoriesModel"
-                                              sdc-checklist-value="category.uniqueId"
-                                              sdc-checked-change="gui.onCategoryClick(category, checked)"
-                                              data-tests-id="{{category.uniqueId}}"
-                                              text="{{category.name}}"></ng1-checkbox>
-
-                                <!-- SUB CATEGORY CHECKBOX -->
-                                <ul class="list-unstyled i-sdc-catalog-subcategories-checkbox" data-ng-if="category.subcategories && category.subcategories.length>0">
-                                    <li ng-repeat="subcategory in category.subcategories track by subcategory.uniqueId | orderBy:'name'">
-
-                                        <ng1-checkbox elem-id="checkbox-{{subcategory.uniqueId | lowercase | clearWhiteSpaces}}"
-                                                      sdc-checklist-model="checkboxesFilter.selectedCategoriesModel"
-                                                      sdc-checklist-value="subcategory.uniqueId"
-                                                      sdc-checked-change="gui.onCategoryClick(subcategory, checked)"
-                                                      data-tests-id="{{subcategory.uniqueId}}"
-                                                      text="{{subcategory.name}}"></ng1-checkbox>
-
-                                        <!-- GROUPING CHECKBOX -->
-                                        <ul class=" list-unstyled i-sdc-catalog-grouping-checkbox" data-ng-if="subcategory.groupings && subcategory.groupings.length>0">
-                                            <li ng-repeat="grouping in subcategory.groupings track by grouping.uniqueId | orderBy:'name'">
-
-                                                <ng1-checkbox elem-id="checkbox-{{grouping.uniqueId | lowercase | clearWhiteSpaces}}"
-                                                              sdc-checklist-model="checkboxesFilter.selectedCategoriesModel"
-                                                              sdc-checklist-value="grouping.uniqueId"
-                                                              sdc-checked-change="gui.onCategoryClick(grouping, checked)"
-                                                              text="{{grouping.name}}"></ng1-checkbox>
-
-                                            </li>
-                                        </ul>
-                                    </li><!-- Close subcategory -->
-                                </ul><!-- Close subcategories -->
-                            </li><!-- Close main category -->
-                        </ul><!-- Close main categories -->
-
-                    </div>
-                </div>
-
-                <!-- STATUS -->
-                <div class="sdc-catalog-status-filter-container">
-                    <div
-                        class="i-sdc-designer-leftbar-section-title pointer"
-                        data-ng-click="sectionClick('status')"
-                        data-ng-class="{'expanded': expandedSection.indexOf('status') !== -1}">
-                        <span class="i-sdc-designer-leftbar-section-title-icon"></span>
-                        <span class="i-sdc-designer-leftbar-section-title-text" data-tests-id="statusFilterTitle">Status</span>
-                    </div>
-
-                    <div class="i-sdc-designer-leftbar-section-content">
-                        <ul class="list-unstyled i-sdc-designer-leftbar-section-content-ul">
-                            <!--li data-ng-repeat="(key, value) in confStatus" -->
-
-                            <li class="i-sdc-designer-leftbar-section-content-ul-li"
-                                data-ng-repeat="(key, state) in confStatus">
-
-                                <ng1-checkbox elem-id="checkbox-{{key | lowercase | clearWhiteSpaces}}"
-                                              sdc-checklist-model="checkboxesFilter.selectedStatuses"
-                                              sdc-checklist-value="state.values"
-                                              sdc-checked-change="gui.onStatusClick(key, state, checked)"
-                                              text="{{state.name}}"></ng1-checkbox>
-
-                                <div class="i-sdc-categories-list-item-icon"></div>
-                            </li>
-                        </ul>
-                    </div>
-                </div>
-
-            </div>
-        </perfect-scrollbar>
-
-        <!-- RIGHT SIDE -->
-        <perfect-scrollbar id="catalog-main-scroll" include-padding="true" class="w-sdc-main-right-container w-sdc-catalog-main">
-
-            <!-- HEADER -->
-            <div>
-                <div class="w-sdc-dashboard-catalog-items-header"
-                     ng-bind-html="getNumOfElements((catalogFilterdItems| entityFilter:checkboxesFilter | filter:search).length)"
-                ></div>
-                <div class="w-sdc-dashboard-catalog-header-right">
-                    <span class="w-sdc-dashboard-catalog-header-order1" translate="SORT_CAPTION"></span>&nbsp;&nbsp;
-                    <a class="w-sdc-dashboard-catalog-sort" data-tests-id="sort-by-last-update" data-ng-class="{'blue' : sortBy==='lastUpdateDate'}"
-                       ng-click="order('lastUpdateDate')" translate="SORT_BY_UPDATE_DATE"></a>&nbsp;
-                    <span data-ng-show="sortBy === 'lastUpdateDate'" class="w-sdc-catalog-sort-arrow" data-ng-class="{'down': reverse, 'up':!reverse}"></span>
-                    &nbsp;|&nbsp;
-                    <a class="w-sdc-dashboard-catalog-sort" data-tests-id="sort-by-alphabetical" data-ng-class="{'blue' : sortBy!=='lastUpdateDate'}"
-                       ng-click="order('name|resourceName')" translate="SORT_ALPHABETICAL"></a>&nbsp;
-                    <span data-ng-show="sortBy !== 'lastUpdateDate'" class="w-sdc-catalog-sort-arrow" data-ng-class="{'down': reverse, 'up':!reverse}"></span>
-                </div>
-            </div>
-
-            <div infinite-scroll-disabled='isAllItemDisplay'  infinite-scroll="raiseNumberOfElementToDisplay()" infinite-scroll-container="'#catalog-main-scroll'" infinite-scroll-distance="'0.2'" infinite-scroll-parent>
-
-                <div class='w-sdc-row-flex-items'>
-
-                    <!-- Tile new -->
-                    <ng2-ui-tile data-ng-repeat="component in catalogFilterdItems| entityFilter:checkboxesFilter | filter:search | orderBy:sortBy:reverse | limitTo:numberOfItemToDisplay"
-                        data-ng-init="component.filterTerm = component.name +  ' '  + component.description + ' ' + component.tags.toString() + ' ' + component.version;"
-                        [component]="component" (on-tile-click)="gui.isLoading || goToComponent(component)"></ng2-ui-tile>
-                    <!-- Tile new -->
-
-                </div>
-
-            </div>
-        </perfect-scrollbar>
-
-    </div>
-
-    <top-nav [top-lvl-selected-index]="1" [search-term]="search.filterTerm" (search-term-change)="gui.changeFilterTerm($event)" [version]="version"></top-nav>
-
-
-</div>
diff --git a/catalog-ui/src/app/view-models/catalog/catalog.less b/catalog-ui/src/app/view-models/catalog/catalog.less
deleted file mode 100644
index 45556030e3..0000000000
--- a/catalog-ui/src/app/view-models/catalog/catalog.less
+++ /dev/null
@@ -1,362 +0,0 @@
-.sdc-catalog-container {
-
-    .i-sdc-categories-list-item {
-        font-weight: normal;
-    }
-
-    // Checkboxes
-    .i-sdc-designer-leftbar-section-content-ul {
-        padding: 0;
-        margin: 0;
-
-        .i-sdc-designer-leftbar-section-content-ul-li {
-            margin-top: 5px;
-
-            .tlv-checkbox {
-                font-size: 13px;
-                font-family: @font-opensans-medium;
-                color: @func_color_s;
-            }
-        }
-
-        .i-sdc-catalog-subcategories-checkbox {
-            padding: 0 0 0 20px;
-            margin: 0;
-
-            > li {
-                margin-top: 5px;
-
-                .tlv-checkbox {
-                    font-size:13px;
-                    font-family: @font-opensans-regular;
-                }
-            }
-
-            .i-sdc-catalog-grouping-checkbox {
-                padding: 0 0 0 20px;
-                margin: 0;
-            }
-
-        }
-
-    }
-
-    .i-sdc-designer-leftbar-section-content-li {
-        &:last-child {
-            .i-sdc-categories-list-item {
-                margin: 0;
-            }
-        }
-    }
-
-    .i-sdc-categories-list-item {
-        display: block;
-        //margin-bottom: 5px;
-        //padding-left: 15px;
-        //text-indent: -24px;
-        vertical-align: top;
-        font-weight: bold;
-    }
-
-    .i-sdc-subcategories-list-item {
-        display: block;
-        //padding-left: 20px;
-        vertical-align: top;
-        font-weight: normal;
-        margin: 0;
-        //text-indent: -10px;
-    }
-
-    .i-sdc-categories-list-item-icon {
-        display: inline-block;
-        float: right;
-        position: relative;
-        right: -8px;
-        top: 6px;
-    }
-
-    .i-sdc-categories-list-item {
-        margin-top: 7px;
-        &.NOT_CERTIFIED_CHECKOUT,
-        &.NOT_CERTIFIED_CHECKIN {
-            .i-sdc-categories-list-item-icon {
-                background: url('/assets/styles/images/sprites/sprite-global-old.png') no-repeat -53px -2889px;
-                width: 14px;
-                height: 14px;
-
-            }
-        }
-
-        &.CERTIFIED {
-            .i-sdc-categories-list-item-icon {
-                background: url('/assets/styles/images/sprites/sprite-global-old.png') no-repeat -53px -3034px;
-                width: 14px;
-                height: 16px;
-            }
-        }
-
-        &.READY_FOR_CERTIFICATION {
-            .i-sdc-categories-list-item-icon {
-                background: url('/assets/styles/images/sprites/sprite-global-old.png') no-repeat -53px -2985px;
-                width: 14px;
-                height: 16px;
-            }
-        }
-
-        &.CERTIFICATION_IN_PROGRESS {
-            .i-sdc-categories-list-item-icon {
-                background: url('/assets/styles/images/sprites/sprite-global-old.png') no-repeat -53px -2934px;
-                width: 14px;
-                height: 16px;
-            }
-        }
-
-        &.DISTRIBUTED,
-        &.TBD {
-            .i-sdc-categories-list-item-icon {
-                background: url('/assets/styles/images/sprites/sprite-global-old.png') no-repeat -43px -3087px;
-                width: 24px;
-                height: 14px;
-
-            }
-        }
-    }
-
-    .i-sdc-categories-list-input {
-        margin: 8px;
-
-    }
-
-    .i-sdc-subcategories-list-input {
-
-        margin: 8px;
-    }
-    .i-sdc-subcategories-list-input-container {
-        margin: 0px 0px 0px 20px;
-        padding: 2px;
-    }
-
-    .w-sdc-header-catalog-search-container {
-        display: table;
-        padding: 21px 0;
-        position: relative;
-
-        .w-sdc-designer-leftbar-search-input {
-            color: #000;
-            width: 300px;
-        }
-    }
-
-    .w-sdc-catalog-main {
-        padding: 10px 12px;
-    }
-    .w-sdc-dashboard-catalog-items-header {
-        .b_3;
-        color: @main_color_m;
-        font-family: OpenSans-Regular, sans-serif;
-        font-size: 14px;
-        display: inline-block;
-        font-style: normal;
-        margin-left: 11px;
-        b {
-            font-family: OpenSans-Bold, sans-serif;
-            color: @main_color_l;
-            font-weight: bold;
-        }
-        font-weight: normal;
-        /* padding-left: 10px; */
-    }
-
-    .w-sdc-dashboard-catalog-header-order1 {
-        .b_3;
-        font-weight: 800;
-    }
-
-    .w-sdc-dashboard-catalog-sort {
-        .b_3;
-        font-weight: bold;
-        white-space:pre;
-        &:hover{
-            .hand;
-            text-decoration: none;
-            .a_3;
-        }
-        &.blue {
-            .a_3;
-        }
-    }
-
-    .w-sdc-catalog-sort-arrow{
-        display: inline-block;
-        &.up{
-            .b_3;
-            width: 0;
-            height: 0;
-            border-left: 5px solid transparent;
-            border-right: 5px solid transparent;
-            border-bottom: 5px solid ;
-        }
-        &.down{
-            .b_3;
-            width: 0;
-            height: 0;
-            border-left: 5px solid transparent;
-            border-right: 5px solid transparent;
-            border-top: 5px solid;
-        }
-    }
-
-
-    .w-sdc-dashboard-catalog-header-right{
-        float: right;
-        display: inline-block;
-        padding-right:34px;
-    }
-
-    .w-sdc-header-catalog-search-input {
-        width: 420px;
-        display: table-cell;
-        padding: 0 25px 1px 10px;
-        border: 1px solid #bcbcbc;
-        .border-radius(10px);
-        height: 30px;
-        margin: 10px 30px;
-        outline: none;
-    }
-
-    .sdc-catalog-type-filter-container {
-        margin-top: -1px;
-    }
-
-    .i-sdc-designer-leftbar-section-title {
-        text-transform: uppercase;
-        .l_14_m;
-        line-height: 30px;
-    }
-
-    .i-sdc-designer-leftbar-section-title-icon {
-        .hand;
-        .tlv-sprite;
-        .footer-close;
-        transition: .3s all;
-        margin-top: -4px;
-    }
-
-    .i-sdc-designer-leftbar-section-title-text {
-        margin-left: 20px;
-    }
-
-    /* added Michael */
-    .i-sdc-designer-left-sidebar {
-        margin-top: 43px;
-    }
-    .i-sdc-designer-leftbar-section-left-switch-header {
-        text-transform: uppercase;
-        .l_14_m;
-        line-height: 40px;
-        width: 243px;
-
-        font-family: OpenSans-Bold, sans-serif;
-        font-size: 14px;
-
-        color: @main_color_a;
-        background-color: @tlv_color_t;
-        border: solid 1px fade(@main_color_t, 40%);
-        cursor: pointer;
-        opacity: 1;
-        z-index: 9999;
-        position: relative;
-        //box-shadow: 1px 0 2px #00000036;
-    }
-    .i-sdc-designer-leftbar-section-left-switch-header-text {
-        display: inline-block;
-        width: 180px;
-        margin-left: 20px;
-    }
-    .i-sdc-designer-leftbar-section-left-switch-header-icon {
-        display: inline-block;
-        vertical-align: middle;
-    }
-
-
-    .seperator-left,
-    .seperator-right {
-        border-right: solid 1px @color_m;
-        display: table-cell;
-        width: 2px;
-    }
-
-    // Rotate catalog left side arrows
-    .i-sdc-designer-leftbar-section-title.expanded .i-sdc-designer-leftbar-section-title-icon {
-        transform: rotate(180deg);
-    }
-
-    // Transform catalog left side sections
-    .i-sdc-designer-leftbar-section-title + .i-sdc-designer-leftbar-section-content {
-        max-height: 0px;
-        margin: 0 auto;
-        transition: all .3s;
-        overflow: hidden;
-        padding: 0 10px 0 18px;
-    }
-
-    .i-sdc-designer-leftbar-section-title.expanded + .i-sdc-designer-leftbar-section-content {
-        max-height: 9999px;
-        margin: 0 auto 1px;
-        transition: all .3s;
-        padding: 10px 18px 10px 18px;
-        overflow: hidden;
-    }
-
-}
-
-.w-sdc-search-icon{
-    position: absolute;
-    right: 40px;
-    top: 40px;
-    &.leftbar{
-        top: 19px;
-        right: 18px;
-    }
-    &.magnification {
-        .sprite;
-        .sprite.magnification-glass;
-        .hand;
-    }
-
-    &.cancel {
-        .sprite;
-        .sprite.clear-text;
-        .hand;
-    }
-}
-
-/* added Michael */
-.sdc-catalog-selector-wrapper {
-    position: absolute;
-    left: 0px;
-    top: 42px;
-    width: 241px;
-    height: auto;
-    cursor: pointer;
-    opacity: 1;
-    z-index: 1000;
-    box-shadow: 1px 2px 3px #b1b1b1;
-}
-
-.sdc-catalog-selector-item {
-    text-transform: none;
-    line-height: 40px;
-    font-family: OpenSans-Bold, sans-serif;
-    font-size: 14px;
-    color: @main_color_l;
-    background-color: @main_color_p;
-    padding-left: 20px;
-}
-
-.sdc-catalog-selector-item:hover {
-    color: @main_color_a;
-    background-color: @tlv_color_v;
-}
-
-