Initial OpenECOMP Portal commit

Change-Id: I804b80e0830c092e307da1599bd9fbb5c3e2da77
Signed-off-by: talasila <talasila@research.att.com>

8 files changed, 808 insertions, 0 deletions

diff --git a/ecomp-portal-FE/client/app/views/admins/add-admin-dialogs/new-admin.controller.js b/ecomp-portal-FE/client/app/views/admins/add-admin-dialogs/new-admin.controller.js
new file mode 100644
index 00000000..4d77a97c
--- /dev/null
+++ b/ecomp-portal-FE/client/app/views/admins/add-admin-dialogs/new-admin.controller.js
@@ -0,0 +1,214 @@
+/*-
+ * ================================================================================
+ * 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;
+                }
+
+                $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.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);
+                });
+            };
+
+            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.setSelectedUser = (user) => {
+                $log.debug('selected user: ', user);
+                this.selectedUser = user;
+            };
+
+            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);
+                });
+            };
+
+            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 => {
+                        adminsService.updateAdminAppsRoles({
+                                orgUserId: this.selectedUser.orgUserId,
+                                appsRoles: this.adminAppsRoles
+                            })
+                            .then(res => {
+                                $log.debug('Admin apps roles updated successfully!', res);
+                                this.remindToAddUserIfNecessary();
+                                $scope.closeThisDialog(true);
+                            }).catch(err => {
+                            $log.error('NewAdminModalCtrl.updateAdminAppsRoles:: Failed - ' + err);
+                        }).finally(()=> {
+                            this.isSaving = false;
+                        })
+                    });
+            };
+
+            this.navigateBack = () => {
+                if (this.dialogState === 1) {
+                }
+                if (this.dialogState === 2) {
+                    this.dialogState = 1;
+                }
+            };
+
+            init();
+
+            $scope.$watch('newAdmin.selectedNewApp', (newVal) => {
+                if (!newVal || newVal.isAdmin === undefined) {
+                    return;
+                }
+                let app = _.find(this.adminAppsRoles, {id: newVal.id});
+                if (app) {
+                    app.isAdmin = true;
+                    this.appsOrder.push(app.id);
+                }
+                this.selectedNewApp = null;
+            });
+
+            $scope.$on('$stateChangeStart', e => {
+                e.preventDefault();
+            });
+
+            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 OpenECOMP 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/client/app/views/admins/add-admin-dialogs/new-admin.controller.spec.js b/ecomp-portal-FE/client/app/views/admins/add-admin-dialogs/new-admin.controller.spec.js
new file mode 100644
index 00000000..c0f73078
--- /dev/null
+++ b/ecomp-portal-FE/client/app/views/admins/add-admin-dialogs/new-admin.controller.spec.js
@@ -0,0 +1,130 @@
+/*-
+ * ================================================================================
+ * 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';
+
+describe('Controller: NewAdminCtrl ', () => {
+    beforeEach(module('ecompApp'));
+
+    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.userId);
+        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}];
+        $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({userId: newCtrl.selectedUser.userId, 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/client/app/views/admins/add-admin-dialogs/new-admin.modal.html b/ecomp-portal-FE/client/app/views/admins/add-admin-dialogs/new-admin.modal.html
new file mode 100644
index 00000000..0a8fc727
--- /dev/null
+++ b/ecomp-portal-FE/client/app/views/admins/add-admin-dialogs/new-admin.modal.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="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">
+            <div id="search-users-button-next" class="next-button" ng-click="newAdmin.selectedUser && newAdmin.getAdminAppsRoles()"
+                 ng-class="{disabled: !newAdmin.selectedUser}">Next
+            </div>
+            <div id="search-users-button-cancel" class="cancel-button" ng-click="closeThisDialog()">Cancel</div>
+        </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>
+            </div>
+            <div class="dropdown-container">
+                <div class ="right_arrow_down"></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>
+            <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="ion-trash-b" ng-click="newAdmin.unadminApp(app)"></i>
+                </div>
+            </div>
+            <div class="dialog-control">
+                <span class="ecomp-save-spinner" ng-show="newAdmin.isSaving"></span>
+                <div id="button-back" ng-show="newAdmin.isShowBack" class="back-button" ng-click="newAdmin.navigateBack()">Back</div>
+                <div id="div-updateAdminAppsRoles" class="next-button" ng-click="newAdmin.updateAdminAppsRoles()"
+                     ng-class="{disabled: false}">Save
+                </div>
+                <div id="div-cancel-button" class="cancel-button" ng-click="closeThisDialog()">Cancel</div>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/ecomp-portal-FE/client/app/views/admins/add-admin-dialogs/new-admin.modal.less b/ecomp-portal-FE/client/app/views/admins/add-admin-dialogs/new-admin.modal.less
new file mode 100644
index 00000000..b992c928
--- /dev/null
+++ b/ecomp-portal-FE/client/app/views/admins/add-admin-dialogs/new-admin.modal.less
@@ -0,0 +1,99 @@
+/*-
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
+ .new-admin-modal {
+  display:block;
+  overflow:auto;
+  min-height: 450px;
+
+  .search-users {
+  }
+
+  .admin-app-roles {
+    .title {
+      .n18r;
+      border-bottom: @a 3px solid;
+
+    }
+
+    .app-roles-main {
+      margin-top: 16px;
+      .app-roles-main-title {
+        .n14r;
+        margin-bottom: 8px;
+        .left {
+          display: inline-block;
+        }
+        .right {
+          display: inline-block;
+          color: @a;
+          float: right;
+          cursor: pointer;
+        }
+      }
+
+      .select-input{
+        width: 460px;
+      }
+
+      .new-administrated-app {
+        height: 30px;
+        line-height: 30px;
+
+        border: 1px solid @p;
+        margin-bottom: 8px;
+        border-radius: 2px;
+        padding-left: 6px;
+        padding-top: 0;
+        .o14r;
+      }
+
+      .admin-roles-list {
+        height: 240px;
+        overflow-y: auto;
+      }
+
+      .administrated-application {
+        width: 460px;
+        height: 30px;
+        border: 1px solid @p;
+        margin-bottom: 8px;
+        border-radius: 2px;
+        padding: 6px;
+        .o14r;
+        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/client/app/views/admins/admins.controller.js b/ecomp-portal-FE/client/app/views/admins/admins.controller.js
new file mode 100644
index 00000000..402ff9d6
--- /dev/null
+++ b/ecomp-portal-FE/client/app/views/admins/admins.controller.js
@@ -0,0 +1,151 @@
+/*-
+ * ================================================================================
+ * 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.info('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=> {
+                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(err);
+                this.availableApps = [allPortalsFilterObject];
+            });
+
+            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;
+                }
+            }
+
+            init();
+
+            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/client/app/views/admins/admins.controller.spec.js b/ecomp-portal-FE/client/app/views/admins/admins.controller.spec.js
new file mode 100644
index 00000000..34042c14
--- /dev/null
+++ b/ecomp-portal-FE/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/client/app/views/admins/admins.less b/ecomp-portal-FE/client/app/views/admins/admins.less
new file mode 100644
index 00000000..cdf0c0f5
--- /dev/null
+++ b/ecomp-portal-FE/client/app/views/admins/admins.less
@@ -0,0 +1,47 @@
+/*-
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
+ .admins-page-main {
+  .bg_w;
+  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;
+
+  .admins-table {
+    width: @table-width;
+    margin: @table-margin;
+
+    .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/client/app/views/admins/admins.tpl.html b/ecomp-portal-FE/client/app/views/admins/admins.tpl.html
new file mode 100644
index 00000000..543b9ead
--- /dev/null
+++ b/ecomp-portal-FE/client/app/views/admins/admins.tpl.html
@@ -0,0 +1,82 @@
+<!--
+  ================================================================================
+  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-main">
+    <div class="w-ecomp-main-container">
+        <div class="admins-page-main" id="contentId">
+            <div id="title" class="w-ecomp-main-view-title">Admins</div>
+            <div class="admins-table">
+                <div class="table-control">
+                    <div class="table-dropdown-filter">
+                        <div class="c-ecomp-att-abs-select default">
+                            <div class="form-field" id="dropdown-apps"
+                                 att-select="admins.availableApps"
+                                 ng-model="admins.filterByApp"></div>
+                        </div>
+                    </div>
+                    <input id="input-table-search" class="table-search" type="text"
+                           placeholder="Search in entire table"
+                           ng-model="admins.searchString"/>			
+                    <div id="Add-Admin-button" class="add-button" ng-click="admins.openAddNewAdminModal()">Add Admin</div>
+                </div>
+                <span class="ecomp-spinner" ng-show="admins.isLoadingTable"></span>
+                <div class="c-ecomp-att-abs-table default" ng-hide="admins.isLoadingTable">
+                    <table att-table
+                           table-data="admins.adminsTableData"
+                           search-string="admins.searchString"
+                           view-per-page="admins.viewPerPageIgnored"
+                           current-page="admins.currentPageIgnored"
+                           total-page="admins.totalPageIgnored">
+                        <thead att-table-row type="header">
+                        <tr>
+                            <th id="th-first-name" att-table-header key="firstName" default-sort="a">{{admins.adminsTableHeaders[0]}}</th>
+                            <th id="th-last-name" att-table-header key="lastName" sortable="true">{{admins.adminsTableHeaders[1]}}</th>
+                            <th id="th-userId" att-table-header key="userId" sortable="true">{{admins.adminsTableHeaders[2]}}</th>
+                            <th id="th-apps" att-table-header key="apps" sortable="false">{{admins.adminsTableHeaders[3]}}</th>
+                        </tr>
+                        </thead>
+                        <tbody att-table-row type="body"
+                               class="table-body"
+                               style="overflow-y:scroll"
+                               row-repeat="rowData in admins.adminsTableData | filter: admins.portalsRowFilter">
+                        <tr ng-click="admins.openAddNewAdminModal(rowData)" >
+                            <td att-table-body class="td-first">
+                                <div id="div-{{rowData.userId}}-{{rowData.firstName}}" ng-bind="rowData.firstName"></div>
+                            </td>
+                            <td att-table-body>
+                                <div id="div-{{rowData.userId}}-{{rowData.lastName}}" ng-bind="rowData.lastName"></div>
+                            </td>
+                            <td att-table-body>
+                                <div id="div-{{rowData.userId}}" style="float: left;" ng-bind="rowData.orgUserId"></div>
+                                <div>
+                                    <span style="float: left; margin-left:15px" class="ion-person" ng-click="admins.openEditUserModal(rowData.orgUserId);$event.stopPropagation()"></span>
+                                </div>
+                            </td>
+                            <td att-table-body>
+                                <div id="apps-{{rowData.userId}}-{{app.appName}}" ng-repeat="app in rowData.apps" ng-bind="app.appName"></div>
+                            </td>
+                        </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+
+</div>