[PORTAL-7] Rebase

This rebasing includes common libraries and common overlays projects
abstraction of components

Change-Id: I9a24a338665c7cd058978e8636bc412d9e2fdce8
Signed-off-by: st782s <statta@research.att.com>

8 files changed, 835 insertions, 0 deletions

diff --git a/ecomp-portal-FE-common/client/app/views/admins/add-admin-dialogs/new-admin.controller.js b/ecomp-portal-FE-common/client/app/views/admins/add-admin-dialogs/new-admin.controller.js
new file mode 100644
index 00000000..5a164e1a
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/views/admins/add-admin-dialogs/new-admin.controller.js
@@ -0,0 +1,252 @@
+/*-

+ * ================================================================================

+ * ECOMP Portal

+ * ================================================================================

+ * Copyright (C) 2017 AT&T Intellectual Property

+ * ================================================================================

+ * 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.

+ * ================================================================================

+ */

+

+'use strict';

+(function () {

+    class NewAdminModalCtrl {

+        constructor($log, adminsService, $scope, confirmBoxService, utilsService, $location) {

+

+            let init = () => {

+                this.isSaving = false;

+                this.originalApps = [];

+                /* istanbul ignore if */

+                if ($scope.ngDialogData && $scope.ngDialogData.selectedUser && $scope.ngDialogData.dialogState) {

+                    this.selectedUser = $scope.ngDialogData.selectedUser;

+                    this.dialogState = $scope.ngDialogData.dialogState;

+                    this.isShowBack = false;

+                    if (this.dialogState === 2) {

+                        this.getAdminAppsRoles();

+                    }

+                } else {

+                    this.isShowBack = true;

+                    this.selectedUser = null;

+                    this.dialogState = 1;

+                }

+

+                //this.searchUsersInProgress = false;

+                //this.showNewAdminAppDropdown = false;

+                $log.info('NewAdminModalCtrl::initiated');

+                this.appsOrder = [];

+            };

+

+            let orderList = (apps) => {

+                this.appsOrder = [];

+                for (var i = 0; i < apps.length; i++) {

+                    if (apps[i].isAdmin) {

+                        this.appsOrder.push(apps[i].id);

+                    }

+                }

+            };

+

+            this.orderFilter = app => {

+                if (!app || !app.id || !this.appsOrder.length) {

+                    return;

+                }

+                return this.appsOrder.indexOf(app.id);

+            };

+

+            /**

+             * this function get the selected admin apps roles

+             */

+            this.getAdminAppsRoles = () => {

+                if (!this.selectedUser || !this.selectedUser.orgUserId) {

+                    $log.error('No user is selected / searchUsers is InProgress');

+                    this.dialogState = 1;

+                    return;

+                }

+                adminsService.getAdminAppsRoles(this.selectedUser.orgUserId).then(roles => {

+                    $log.debug('apps roles res: ', JSON.stringify(roles));

+                    if (!roles.appsRoles) {

+                        return;

+                    }

+

+                    this.adminAppsRoles = [];

+                    for (var i = 0; i < roles.appsRoles.length; i++) {

+                        if (!roles.appsRoles[i].restrictedApp) {

+                            $log.debug('pushing: {id: ', roles.appsRoles[i].id,

+                                'name: ', roles.appsRoles[i].appName,

+                                'restrictedApp: ', roles.appsRoles[i].restrictedApp,

+                                'isAdmin: ', roles.appsRoles[i].isAdmin, '}');

+                            this.adminAppsRoles.push({

+                                id: roles.appsRoles[i].id,

+                                appName: roles.appsRoles[i].appName,

+                                isAdmin: roles.appsRoles[i].isAdmin,

+                                restrictedApp: roles.appsRoles[i].restrictedApp

+                            });

+                        }

+                    }

+                    this.dialogState = 2;

+                    this.adminAppsRoles = this.adminAppsRoles.sort(getSortOrder("appName"));

+

+                    orderList(roles.appsRoles);

+                    if (this.appsOrder != null) {

+                        for (var j = 0; j < this.appsOrder.length; j++) {

+                            this.originalApps.push(this.appsOrder[j]);

+                        }

+                    }

+                }).catch(err => {

+                    $log.error(err);

+                });

+            };

+

+            // Refactor this into a directive

+            let getSortOrder = (prop) => {

+                return function (a, b) {

+                    if (a[prop].toLowerCase() > b[prop].toLowerCase()) {

+                        return 1;

+                    } else if (a[prop].toLowerCase() < b[prop].toLowerCase()) {

+                        return -1;

+                    }

+                    return 0;

+                }

+            }

+

+            /**

+             * this function set the selected user

+             * @param user: selected user object

+             */

+            this.setSelectedUser = (user) => {

+                $log.debug('selected user: ', user);

+                this.selectedUser = user;

+            };

+

+            /**

+             * Mark the user as not admin of the selected app

+             * @param app: selected app object

+             */

+            this.unadminApp = (app) => {

+                confirmBoxService.deleteItem(app.appName).then(confirmed => {

+                    if (confirmed === true) {

+                        app.isAdmin = false;

+                        this.appsOrder.splice(this.appsOrder.indexOf(app.id), 1);

+                    }

+                }).catch(err => {

+                    $log(err);

+                });

+            };

+

+            /**

+             * update the selected admin app with the new roles

+             */

+            this.updateAdminAppsRoles = () => {

+                if (!this.selectedUser || !this.selectedUser.orgUserId || !this.adminAppsRoles) {

+                    return;

+                }

+                this.isSaving = true;

+                $log.debug('going to update user: ' + this.selectedUser.orgUserId + ' with app roles: ' + JSON.stringify(this.adminAppsRoles));

+                confirmBoxService.makeAdminChanges('Are you sure you want to make these admin changes?')

+                    .then(confirmed => {

+                    	if(confirmed === true){

+                        adminsService.updateAdminAppsRoles({

+                                orgUserId: this.selectedUser.orgUserId,

+                                appsRoles: this.adminAppsRoles

+                            })

+                            .then(res => {

+                                $log.debug('Admin apps roles updated successfully!', res);

+                                //close and resolve dialog promise with true (to update the table)

+                                this.remindToAddUserIfNecessary();

+                                $scope.closeThisDialog(true);

+                            }).catch(err => {

+                            $log.error('NewAdminModalCtrl.updateAdminAppsRoles:: Failed - ' + err);

+                        }).finally(()=> {

+                            this.isSaving = false;

+                        })

+                    	}else{

+                        	this.isSaving = false;

+                        }

+                    });

+            };

+

+            /**

+             * Navigate between dialog screens using step number: 1,2,...

+             */

+            this.navigateBack = () => {

+                if (this.dialogState === 1) {

+                    //back from 1st screen?

+                }

+                if (this.dialogState === 2) {

+                    this.dialogState = 1;

+                }

+            };

+

+            init();

+

+            /**

+             * each time new app is selected in the drop down,

+             * add it to the user administrated apps list

+             */

+            $scope.$watch('newAdmin.selectedNewApp', (newVal) => {

+                if (!newVal || newVal.isAdmin === undefined) {

+                    return;

+                }

+                //newVal.isAdmin = true; - track by ruined this, here is the workaround:

+                let app = _.find(this.adminAppsRoles, {id: newVal.id});

+                if (app) {

+                    app.isAdmin = true;

+                    this.appsOrder.push(app.id);

+                }

+                this.selectedNewApp = null;

+                //this.showNewAdminAppDropdown = false;

+            });

+

+            $scope.$on('$stateChangeStart', e => {

+                //Disable navigation when modal is opened

+                //**Nabil - note: this will cause the history back state to be replaced with current state

+                e.preventDefault();

+            });

+

+            /**

+             * If an Admin was added for an application remind the portal admin to add the admin as a user

+             */

+            this.remindToAddUserIfNecessary = () => {

+

+                var adminAddedToNewApp = false;

+                if ((this.originalApps != null) && (this.originalApps.length > 0)) {

+                    for (var i = 0; i < this.appsOrder.length; i++) {

+                        var foundApp = false;

+                        for (var j = 0; j < this.originalApps.length; j++) {

+                            if (this.originalApps[j] === this.appsOrder[i]) {

+                                foundApp = true;

+                            }

+                        }

+                        if (foundApp === false) {

+                            adminAddedToNewApp = true;

+                            break;

+                        }

+                    }

+                } else {

+                    adminAddedToNewApp = true;

+                }

+

+                if (adminAddedToNewApp === true) {

+                    confirmBoxService.confirm('Add this person as an application user? This allows them to access the application from ECOMP Portal. Press OK to go to the Add Users page.')

+                        .then(confirmed => {

+                            if (confirmed === true) {

+                                $location.path('/users');

+                            }

+                        });

+                }

+            }

+

+        }

+    }

+    NewAdminModalCtrl.$inject = ['$log', 'adminsService', '$scope', 'confirmBoxService', 'utilsService', '$location'];

+    angular.module('ecompApp').controller('NewAdminModalCtrl', NewAdminModalCtrl);

+})();

diff --git a/ecomp-portal-FE-common/client/app/views/admins/add-admin-dialogs/new-admin.controller.spec.js b/ecomp-portal-FE-common/client/app/views/admins/add-admin-dialogs/new-admin.controller.spec.js
new file mode 100644
index 00000000..540459ed
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/views/admins/add-admin-dialogs/new-admin.controller.spec.js
@@ -0,0 +1,134 @@
+/*-

+ * ================================================================================

+ * ECOMP Portal

+ * ================================================================================

+ * Copyright (C) 2017 AT&T Intellectual Property

+ * ================================================================================

+ * 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.

+ * ================================================================================

+ */

+/**

+ * Created by nnaffar on 12/8/15.

+ */

+'use strict';

+

+describe('Controller: NewAdminCtrl ', () => {

+    beforeEach(module('ecompApp'));

+

+    //destroy $http default cache before starting to prevent the error 'default cache already exists'

+    beforeEach(inject((_CacheFactory_)=> {

+        _CacheFactory_.destroyAll();

+    }));

+

+

+    let newCtrl, $controller, $q, $rootScope, $log;

+

+    beforeEach(inject((_$controller_, _$q_, _$rootScope_, _$log_)=> {

+        [$controller, $q, $rootScope, $log] = [_$controller_, _$q_, _$rootScope_, _$log_];

+    }));

+

+    let deferredAdminAppsRoles, deferredUpdateRolesRes;

+    let adminsServiceMock;

+    beforeEach(()=> {

+        [deferredAdminAppsRoles, deferredUpdateRolesRes] = [$q.defer(), $q.defer()];

+

+        adminsServiceMock = jasmine.createSpyObj('adminsServiceMock', ['getAdminAppsRoles', 'updateAdminAppsRoles']);

+

+        adminsServiceMock.getAdminAppsRoles.and.returnValue(deferredAdminAppsRoles.promise);

+        adminsServiceMock.updateAdminAppsRoles.and.returnValue(deferredUpdateRolesRes.promise);

+

+        newCtrl = $controller('NewAdminModalCtrl', {

+            $log: $log,

+            adminsService: adminsServiceMock,

+            $scope: $rootScope

+        });

+    });

+

+    it('should init default values when loading the controller', ()=> {

+        expect(newCtrl.dialogState).toBe(1);

+        expect(newCtrl.selectedUser).toBe(null);

+    });

+

+    it('should populate admin apps roles and move to the next screen when adminsService.getAdminAppsRoles succeeded', ()=> {

+        let userApps = {appsRoles: [{id: 1, isAdmin: false}, {id: 2, isAdmin: true}]};

+        deferredAdminAppsRoles.resolve(userApps);

+

+        newCtrl.selectedUser = {orgUserId: 'orgUserId'};

+

+        newCtrl.getAdminAppsRoles();

+        $rootScope.$apply();

+

+        expect(adminsServiceMock.getAdminAppsRoles).toHaveBeenCalledWith(newCtrl.selectedUser.orgUserId);

+        expect(newCtrl.adminAppsRoles).toEqual(userApps.appsRoles);

+        expect(newCtrl.dialogState).toBe(2);

+    });

+

+    it('should  log the error when adminsService.getAdminAppsRoles fails', ()=> {

+        spyOn($log, 'error');

+        deferredAdminAppsRoles.reject('some error');

+

+        newCtrl.searchUsersInProgress = false;

+        newCtrl.selectedUser = {orgUserId: 'orgUserId'};

+

+        newCtrl.getAdminAppsRoles();

+        $rootScope.$apply();

+

+        expect($log.error).toHaveBeenCalled();

+    });

+    it('should  log the error when trying to getAdminAppsRoles without selecting user ', ()=> {

+        spyOn($log, 'error');

+

+        newCtrl.searchUsersInProgress = false;

+        newCtrl.selectedUser = null;

+

+        newCtrl.getAdminAppsRoles();

+        $rootScope.$apply();

+

+        expect($log.error).toHaveBeenCalled();

+    });

+

+    it('should set isAdmin as true when adding app via the dropdown menu', ()=> {

+        newCtrl.adminAppsRoles = [{id: 1, isAdmin: false},{id: 2, isAdmin: true}];

+        //simulate UI change

+        $rootScope.$apply('newAdmin.selectedNewApp = null');

+        $rootScope.$apply('newAdmin.selectedNewApp = {id: 1, isAdmin: true}');

+

+        expect(newCtrl.adminAppsRoles[0].isAdmin).toBe(true);

+        expect(newCtrl.selectedNewApp).toBe(null);

+    });

+

+    it('should close the modal when updating apps roles succeeded', ()=> {

+        $rootScope.closeThisDialog = () => {};

+        spyOn($rootScope,'closeThisDialog');

+

+        newCtrl.selectedUser = {orgUserId: 'orgUserId'};

+        newCtrl.adminAppsRoles = [{id: 1}];

+

+        deferredUpdateRolesRes.resolve();

+        newCtrl.updateAdminAppsRoles();

+        $rootScope.$apply();

+

+        expect(adminsServiceMock.updateAdminAppsRoles).toHaveBeenCalledWith({orgUserId: newCtrl.selectedUser.orgUserId, appsRoles: newCtrl.adminAppsRoles});

+        expect($rootScope.closeThisDialog).toHaveBeenCalled();

+    });

+    it('should log the error when updating apps roles fails', ()=> {

+        newCtrl.selectedUser = {orgUserId: 'orgUserId'};

+        newCtrl.adminAppsRoles = [{id: 1}];

+

+        spyOn($log,'error');

+        deferredUpdateRolesRes.reject();

+        newCtrl.updateAdminAppsRoles();

+        $rootScope.$apply();

+        expect($log.error).toHaveBeenCalled();

+    });

+});

diff --git a/ecomp-portal-FE-common/client/app/views/admins/add-admin-dialogs/new-admin.modal.html b/ecomp-portal-FE-common/client/app/views/admins/add-admin-dialogs/new-admin.modal.html
new file mode 100644
index 00000000..1b1b9de8
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/views/admins/add-admin-dialogs/new-admin.modal.html
@@ -0,0 +1,77 @@
+<!--
+  ================================================================================
+  eCOMP Portal
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property
+  ================================================================================
+  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="new-admin-modal">
+
+    <div class="search-users" ng-show="newAdmin.dialogState===1">
+
+        <search-users search-title="New Admin"
+                      selected-user="newAdmin.selectedUser"></search-users>
+
+        <div class="dialog-control">
+              <button id="search-users-button-next" class="btn btn-alt btn-small" ng-click="newAdmin.selectedUser && newAdmin.getAdminAppsRoles()"
+                 ng-class="{disabled: !newAdmin.selectedUser}">Next
+            </button>
+            <button id="search-users-button-cancel" class="btn btn-alt btn-small" ng-click="closeThisDialog()">Cancel</button>
+        </div>
+    </div>
+
+
+    <div id="div-admin-app-roles" class="admin-app-roles" ng-show="newAdmin.dialogState===2">
+        <div class="title" id="title"
+             ng-bind="newAdmin.selectedUser.firstName + ' ' + newAdmin.selectedUser.lastName + ' (' + newAdmin.selectedUser.orgUserId + ')'"></div>
+        <div class="app-roles-main">
+            <div id="div-app-roles-main-title" class="app-roles-main-title">
+                <span class="left">Administrates:</span>
+                <!--<span class="right" ng-click="newAdmin.addAdministratedApp()">+Add</span>-->
+            </div>
+
+
+            <div class="select-input custom-select-wrap">
+                <select class="new-administrated-app" id="dropdown-select-app"
+                        ui-select2 ng-model="newAdmin.selectedNewApp"
+                        data-placeholder="Select application"
+                        ng-options="app as app.appName for app in (filteredApps = (newAdmin.adminAppsRoles | filter:{isAdmin:'false'})) track by app.id "
+                        ng-disabled="!filteredApps.length">
+                    <option id="option-select-app" value="" disabled style="display: none;">Select application</option>
+                </select>
+            </div>
+
+
+            <div class="admin-roles-list">
+                <div ng-repeat="app in (newAdmin.adminAppsRoles | orderBy:newAdmin.orderFilter) track by app.id" ng-show="app.isAdmin">
+                    <div id="select-app-{{app.appName.split(' ').join('-')}}" class="administrated-application" ng-bind="app.appName | elipsis: 57"></div>
+                    <i id="i-delete-application" class="icon-misc-trash" ng-click="newAdmin.unadminApp(app)"> </i>
+                </div>
+            </div>
+
+            <div class="dialog-control">
+                <span class="ecomp-save-spinner" ng-show="newAdmin.isSaving"></span>              
+                 <button id="button-back" ng-show="newAdmin.isShowBack" class="btn btn-alt btn-small" ng-click="newAdmin.navigateBack()">Back</button>
+                <button id="div-updateAdminAppsRoles" class="btn btn-alt btn-small" ng-click="newAdmin.updateAdminAppsRoles()"
+                     ng-class="{disabled: false}">Save
+                </button>
+                <button id="div-cancel-button" class="btn btn-alt btn-small" ng-click="closeThisDialog()">Cancel</button>
+            </div>
+
+        </div>
+
+    </div>
+
+</div>
diff --git a/ecomp-portal-FE-common/client/app/views/admins/add-admin-dialogs/new-admin.modal.less b/ecomp-portal-FE-common/client/app/views/admins/add-admin-dialogs/new-admin.modal.less
new file mode 100644
index 00000000..8b304b43
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/views/admins/add-admin-dialogs/new-admin.modal.less
@@ -0,0 +1,81 @@
+.new-admin-modal {
+  height: 430px;
+  margin-left: 20px;
+
+  .search-users {
+  }
+
+  .admin-app-roles {
+    .title {
+      //.n18r;
+      .dGray18r;  //AT&T Dark Gray
+      border-bottom: @blue-active 3px solid;
+
+    }
+
+    .app-roles-main {
+      margin-top: 16px;
+      .app-roles-main-title {
+        .dGray14r;
+        margin-bottom: 8px;
+        .left {
+          display: inline-block;
+        }
+        .right {
+          display: inline-block;
+          color: @blue-active;
+          float: right;
+          cursor: pointer;
+        }
+      }
+
+      .select-input{
+        width: 460px;
+      }
+
+      .new-administrated-app {
+        height: 30px;
+        line-height: 30px;
+
+        border: 1px solid @portalGray;
+        margin-bottom: 8px;
+        border-radius: 2px;
+        padding-left: 6px;
+        padding-top: 0;
+        width: 100%;
+        .dGray14r;
+      }
+
+      .admin-roles-list {
+        height: 240px;
+        overflow-y: auto;
+      }
+
+      .administrated-application {
+        width: 460px;
+        height: 30px;
+        border: 1px solid @portalGray;
+        margin-bottom: 8px;
+        border-radius: 2px;
+        padding: 6px;
+        .dGray14r;
+        display: inline-block;
+
+      }
+
+      .delete-application {
+        .ico_trash_default;
+        display: inline-block;
+        vertical-align: 4px;
+        cursor: pointer;
+        position: relative;
+        top: 6px;
+        color: transparent;
+        margin-left: 8px;
+      }
+
+    }
+
+  }
+}
+
diff --git a/ecomp-portal-FE-common/client/app/views/admins/admins.controller.js b/ecomp-portal-FE-common/client/app/views/admins/admins.controller.js
new file mode 100644
index 00000000..05f9db3b
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/views/admins/admins.controller.js
@@ -0,0 +1,161 @@
+/*-
+ * ================================================================================
+ * eCOMP Portal
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
+'use strict';
+(function () {
+    class AdminsCtrl {
+        constructor($log, adminsService, applicationsService, ngDialog) {
+
+            let allPortalsFilterObject = {index: 0, title: 'All applications', value: ''};
+
+            let updateTableData = () => {
+                this.isLoadingTable = true;
+                adminsService.getAccountAdmins().then(res=> {
+                    if (!res || !res.length) {
+                        $log.error('AdminsCtrl::updateTableData: no admins err handling');
+                        this.adminsTableData = [];
+                        return;
+                    }
+                    this.adminsTableData = res;
+                }).catch(err=> {
+                    $log.error('AdminsCtrl::updateTableData error: ', err);
+                }).finally(() => {
+                    this.isLoadingTable = false;
+                });
+            };
+
+            let init = () => {
+                //$log.info('AdminsCtrl:: ::initializing...');
+                this.isLoadingTable = false;
+                this.availableApps = [allPortalsFilterObject];
+                this.filterByApp = this.availableApps[0];
+
+                /*Table general configuration params*/
+                this.searchString= '';
+                /*Table data*/
+                this.adminsTableHeaders = ['First Name', 'Last Name', 'User ID', 'Applications'];
+                this.adminsTableData = [];
+                updateTableData();
+            };
+
+            applicationsService.getAvailableApps().then(res=> {
+                //if(!res || Object.prototype.toString.call(res) !== '[object Array]'){
+                //    this.availableApps = [allPortalsFilterObject];
+                //    return;
+                //}
+                //this part overrides index param to fix ABS select bug
+                // (index has to be the same as location in array)
+                // todo:change BE object to contain only id and name
+                this.availableApps = [allPortalsFilterObject];
+                var res1 = res.sort(getSortOrder("title"));
+                var realAppIndex = 1;
+                for(let i=1; i<=res1.length; i++){
+                    if (!res1[i-1].restrictedApp) {
+                        //$log.debug('AdminsCtrl:getAvailableApps:: pushing: {index: ', realAppIndex, 'title: ', res1[i - 1].title,
+                         //   '| value: ', res1[i -1].value, '}');
+                        this.availableApps.push({
+                            index: realAppIndex,
+                            title: res1[i - 1].title,
+                            value: res1[i - 1].value
+                        });
+                        realAppIndex = realAppIndex + 1;
+                    } else {
+                        // $log.debug('AdminsCtrl:getAvailableApps:: Restricted/URL only App will not be used = ' + res1[i - 1].title);
+                    }
+                }
+            }).catch(err=> {
+                $log.error('AdminsCtrl::ctor', err);
+                this.availableApps = [allPortalsFilterObject];
+            });
+
+            // Refactor this into a directive
+            let getSortOrder = (prop) => {
+                return function(a, b) {
+                    // $log.debug('a = ' + JSON.stringify(a) + "| b = " + JSON.stringify(b));
+                    if (a[prop].toLowerCase() > b[prop].toLowerCase()) {
+                        return 1;
+                    } else if (a[prop].toLowerCase() < b[prop].toLowerCase()) {
+                        return -1;
+                    }
+                    return 0;
+                }
+            }
+
+            init();
+
+            //Filter function
+            this.portalsRowFilter = (input) => {
+                if (this.filterByApp.value === '') {
+                    return true;
+                }
+                return _.find(input.apps, {appName: this.filterByApp.value}) !== undefined;
+            };
+
+            this.openAddNewAdminModal = (user) => {
+                let data = null;
+                if(user){
+                    data = {
+                        dialogState: 2,
+                        selectedUser:{
+                            orgUserId: user.orgUserId,
+                            firstName: user.firstName,
+                            lastName: user.lastName
+                        }
+                    }
+                }
+                ngDialog.open({
+                    templateUrl: 'app/views/admins/add-admin-dialogs/new-admin.modal.html',
+                    controller: 'NewAdminModalCtrl',
+                    controllerAs: 'newAdmin',
+                    data: data
+                }).closePromise.then(needUpdate => {
+                    if(needUpdate.value === true){
+                        // $log.debug('AdminsCtrl:openAddNewAdminModal:: updating table data...');
+                        updateTableData();
+                    }
+                });
+            };
+            
+            this.openEditUserModal = (loginId) => {
+            	var data = {
+            			loginId : loginId,
+            	        updateRemoteApp : false,
+            	        appId : this.selectedApp!=null?this.selectedApp.id:''
+            	}
+            	var modalInstance = ngDialog.open({
+                    templateUrl: 'app/views/header/user-edit/edit-user.tpl.html',
+                    controller: 'editUserController',
+                    data: data,
+                    resolve: {
+                        message: function message() {
+                            var message = {
+                                type: 'Contact',
+                            };
+                            return message;
+                        }
+                    }
+                }).closePromise.then(needUpdate => {	              	 
+                	updateTableData();
+	            });       
+            }
+        }
+    }
+    AdminsCtrl.$inject = ['$log', 'adminsService', 'applicationsService', 'ngDialog'];
+    angular.module('ecompApp').controller('AdminsCtrl', AdminsCtrl);
+})();
diff --git a/ecomp-portal-FE-common/client/app/views/admins/admins.controller.spec.js b/ecomp-portal-FE-common/client/app/views/admins/admins.controller.spec.js
new file mode 100644
index 00000000..3841a2b3
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/views/admins/admins.controller.spec.js
@@ -0,0 +1,19 @@
+/*-

+ * ================================================================================

+ * ECOMP Portal

+ * ================================================================================

+ * Copyright (C) 2017 AT&T Intellectual Property

+ * ================================================================================

+ * 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.

+ * ================================================================================

+ */

diff --git a/ecomp-portal-FE-common/client/app/views/admins/admins.less b/ecomp-portal-FE-common/client/app/views/admins/admins.less
new file mode 100644
index 00000000..729ef693
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/views/admins/admins.less
@@ -0,0 +1,45 @@
+.w-ecomp-admins-page-main {
+    .bg_portalWhite;//white for 1702
+      position: @page-main-position;
+    top: @page-main-top;
+    left: @page-main-left;
+    right: @page-main-right;
+    bottom: @page-main-bottom;
+    padding-top: @padding-top;
+    overflow-y: @page-main-overflow-y;
+    padding-left: @padding-left-side;
+#input-table-search::-webkit-input-placeholder,
+{
+font-style: italic;
+  color:   #D7D7D7;
+
+}
+	.ecomp-spinner{
+	top: 255px;
+	}
+
+    .admins-home-container {
+        position: relative;
+        padding-right: 0;
+        padding-left: 0;
+        padding-bottom: @container-bottom;
+
+        .admins-table {
+            width: @table-width;
+            //margin-left: @table-margin-left;
+            margin: 0 auto;
+
+            .table-control {
+                .table-dropdown-filter {
+                    width: @table-dropdown-filter-width;
+                    display: @table-dropdown-filter-display;
+                }
+            }
+
+            .table-body {
+                cursor: pointer;
+            }
+        }
+    }
+}
+
diff --git a/ecomp-portal-FE-common/client/app/views/admins/admins.tpl.html b/ecomp-portal-FE-common/client/app/views/admins/admins.tpl.html
new file mode 100644
index 00000000..907bf323
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/views/admins/admins.tpl.html
@@ -0,0 +1,66 @@
+<!--

+  ================================================================================

+  ECOMP Portal

+  ================================================================================

+  Copyright (C) 2017 AT&T Intellectual Property

+  ================================================================================

+  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="w-ecomp-admins-page-main">

+    <div class="admins-home-container" id="page-content">

+            <div id="title" class="w-ecomp-main-view-title">

+	 			<h1 class="heading-page" >Admins</h1>

+			</div>

+            <div class="admins-table">

+                <div class="table-control">

+                	 <div class="table-control-fields">		

+						<div class="table-dropdown">

+							<select id="dropdown1" name="dropdown1" b2b-dropdown placeholder-text="All application" ng-model="admins.filterByApp.value">

+				                <option b2b-dropdown-list option-repeat="d in admins.availableApps" value="{{d.value}}">{{d.title}}</option>

+				            </select>

+						</div>

+						<div >

+							<input id="input-table-search" placeholder="Search in entire table" class="table-search-field" type="text" data-ng-model="admins.searchString">

+						</div>

+						<button class="btn btn-alt btn-small" ng-click="admins.openAddNewAdminModal()"><i class="icon-people-userbookmark" aria-hidden="true"></i>&nbsp;Add Admin</button> 

+					</div>                  

+            	</div>

+                <span class="ecomp-spinner" ng-show="admins.isLoadingTable"></span>

+                <div b2b-table table-data="admins.adminsTableData"  ng-hide="admins.isLoadingTable"	search-string="admins.searchString" class="b2b-table-div">

+					<table>

+						<thead b2b-table-row type="header">

+							<tr >

+								<th b2b-table-header key="firstName" sortable="true" id="col1">First Name</th>

+								<th b2b-table-header key="lastName" sortable="true" id="col2">Last Name</th>

+								<th b2b-table-header key="orgUserId" sortable="true" id="col3">User ID</th>

+								<th b2b-table-header key="" sortable="falses" id="col4">Applications</th>

+							</tr>

+						</thead>

+						<tbody b2b-table-row type="body" 	row-repeat="rowData in admins.adminsTableData | filter: admins.portalsRowFilter">

+							<tr ng-click="admins.openAddNewAdminModal(rowData)">

+								<td b2b-table-body id="rowheader_t1_{{$index}}" headers="col1" ng-bind="rowData.firstName"></td>

+								<td b2b-table-body headers="rowheader_t1_{{$index}} col2" ng-bind="rowData.lastName"></td>

+								<td b2b-table-body headers="rowheader_t1_{{$index}} col3" ng-bind="rowData.orgUserId"></td>

+								<td b2b-table-body headers="rowheader_t1_{{$index}} col4">

+									<div class="ecomp-table-repeat" ng-repeat="app in rowData.apps" ng-bind="app.appName"></div>

+								</td>							

+							</tr>

+						</tbody>

+					</table>

+				</div>

+            </div>

+        </div>

+    </div>

+

+</div>