Deliver centralized role management feature

Repair multiple defects also.
Revise deployment to use docker-compose.
Remove all zip archives.

Issue: PORTAL-21, PORTAL-25, PORTAL-28, PORTAL-52, PORTAL-69,
    PORTAL-74, PORTAL-76, PORTAL-80, PORTAL-82
Change-Id: Ie72fec7d35ba78beb162bba6ed27b2caee340c61
Signed-off-by: Christopher Lott (cl778h) <clott@research.att.com>

7 files changed, 141 insertions, 578 deletions

diff --git a/ecomp-portal-FE-os/client/src/views/applications/application-details-dialog/application-details.controller.js b/ecomp-portal-FE-os/client/src/views/applications/application-details-dialog/application-details.controller.js
index da7cd4a4..550b9faf 100644
--- a/ecomp-portal-FE-os/client/src/views/applications/application-details-dialog/application-details.controller.js
+++ b/ecomp-portal-FE-os/client/src/views/applications/application-details-dialog/application-details.controller.js
@@ -21,12 +21,12 @@
 (function () {
     class AppDetailsModalCtrl {
         constructor($scope, $log, applicationsService, errorMessageByCode,
-                    ECOMP_URL_REGEX,userProfileService, $cookies, confirmBoxService) {
+                    ECOMP_URL_REGEX,userProfileService, $cookies, confirmBoxService,items) {
 //            let emptyImg = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
             // empty image should really be empty, or it causes problems for the back end
             let emptyImg = null;
             this.emptyImgForPreview = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
-
+            $scope.ngDialogData=items;
             let newAppModel = {
                 'id': null,
                 'name': null,
@@ -41,7 +41,9 @@
                 'appPassword': null,
                 'thumbnail': emptyImg,
                 'isEnabled': true,
-                'restrictedApp': false
+                'restrictedApp': false,
+                'nameSpace': null,
+                'isCentralAuth': false                
             };
 
             let init = () => {
@@ -71,6 +73,7 @@
                         this.app.thumbnail = emptyImg;
                         this.originalImage = null;
                         this.app.imageUrl = null;
+                        this.app.imageLink = null;
                     }
                 }).catch(err => {
                     $log.error('AppDetailsModalCtrl:removeImage error:: ',err);
@@ -152,9 +155,14 @@
 
             this.saveChanges = () => {
                 //if valid..
-                if($scope.appForm.$invalid){
-                    return;
-                }
+            	 if(((angular.isUndefined(this.app.name) || !this.app.name)&&(angular.isUndefined(this.app.url) || !this.app.url)
+            			 &&(angular.isUndefined(this.app.username) || !this.app.username)&&(angular.isUndefined(this.app.appPassword) || !this.app.appPassword))) {
+            		 confirmBoxService.showInformation('Please fill in all required fields').then(isConfirmed => {});
+                     return;
+                 }else if(!((angular.isUndefined(this.app.name) || !!this.app.name)&&(angular.isUndefined(this.app.url) || !!this.app.url))){
+                     confirmBoxService.showInformation('Please fill in all required fields').then(isConfirmed => {});
+                     return;
+                 }
                 this.isSaving = true;
                 // For a restricted app, null out all irrelevant fields
                 if (this.app.restrictedApp) {
@@ -167,10 +175,12 @@
                     this.app.uebSecret = null;
                 }
                 if(this.isEditMode){
+                    if (this.app.nameSpace=="") {this.app.nameSpace = null;}
                     applicationsService.updateOnboardingApp(this.app)
                         .then(() => {
                             $log.debug('AppDetailsModalCtrl:updateOnboardingApp:: App update succeeded!');
-                            $scope.closeThisDialog(true);
+                          //  $scope.closeThisDialog(true);
+                            $scope.$dismiss('cancel');
                             emptyCookies();
                         }).catch(err => {
                             switch (err.status) {
@@ -204,7 +214,8 @@
                     applicationsService.addOnboardingApp(this.app)
                         .then(() => {
                             $log.debug('App creation succeeded!');
-                            $scope.closeThisDialog(true);
+                            //$scope.closeThisDialog(true);
+                            $scope.$dismiss('cancel');
                             emptyCookies();
                         }).catch(err => {
                             switch (err.status) {
@@ -232,6 +243,7 @@
                             // for bug in IE 11
                         });
                 }
+            	
             };
 
 
@@ -252,6 +264,7 @@
                 if(!(_.isEqual(newVal, oldVal))){
                     $log.debug('applicationsService:$scope.$watch:: thumbnail updated!');
                     this.app.imageUrl = null;
+                    this.app.imageLink = null;
                     this.app.thumbnail = newVal.resized.dataURL;
                 }
             });
@@ -263,6 +276,6 @@
         }
     }
     AppDetailsModalCtrl.$inject = ['$scope', '$log', 'applicationsService', 'errorMessageByCode',
-        'ECOMP_URL_REGEX','userProfileService','$cookies', 'confirmBoxService'];
+        'ECOMP_URL_REGEX','userProfileService','$cookies', 'confirmBoxService','items'];
     angular.module('ecompApp').controller('AppDetailsModalCtrl', AppDetailsModalCtrl);
 })();
\ No newline at end of file
diff --git a/ecomp-portal-FE-os/client/src/views/applications/application-details-dialog/application-details.modal.html b/ecomp-portal-FE-os/client/src/views/applications/application-details-dialog/application-details.modal.html
index ad659aa8..d90c35ec 100644
--- a/ecomp-portal-FE-os/client/src/views/applications/application-details-dialog/application-details.modal.html
+++ b/ecomp-portal-FE-os/client/src/views/applications/application-details-dialog/application-details.modal.html
@@ -18,20 +18,32 @@
   ================================================================================
   -->
 <div class="application-details-modal">
-    <div id="title" class="title">Application Details</div>
 
+		<div class="b2b-modal-header">
+			<h2 class="account-details-title" id="application-details-title">Application Details</h2>
+
+			<div class="corner-button in">
+				<button type="button" class="close" aria-label="Closhhhe"
+					ng-click="$dismiss('cancel')"></button>
+			</div>
+		</div>
+
+		<div class="b2b-modal-body">
     <div class="app-properties-main" scroll-top="appDetails.scrollApi">
         <form name="appForm" novalidate autocomplete="off">
-            <!-- We can remove this script once we get to AT&T Corporate Firefox version 47
+            <!-- We can remove this script once we get to Firefox version 47
                   autocomplete="off" won't work until v47 -->
-            <script type="text/javascript">
+           <!--  <script type="text/javascript">
                 document.getElementById("appForm").reset();
-            </script>
+            </script> -->
             <div id="app-left-container" class="left-container">
-                <div class="property">
-                    <input id="checkbox-app-is-restricted" type="checkbox" class="checkbox-field checkbox-field-openSRC" ng-disabled="appDetails.isEditMode" ng-model="appDetails.app.restrictedApp" ng-checked="appDetails.app.restrictedApp"/>
-                    <div class="property-label checkbox-label">Hyperlink only application</div>
-                </div>
+                <div class="property-label checkbox-label"> 
+					<label for="checkbox-app-is-restricted" class="checkbox"> 
+		                <input type="checkbox" ng-model="appDetails.app.restrictedApp" id="checkbox-app-is-restricted" ng-disabled="appDetails.isEditMode" ng-checked="appDetails.app.restrictedApp"/> 
+		                <i class="skin"></i> 
+		                <span>Hyperlink only application</span> 
+		            </label> 
+				</div>       
                 <div class="property required">
                     <div class="property-label">Application Name</div>
                     <input id="input-app-name"  type="text"
@@ -123,6 +135,14 @@
                             <small id="error-mylogins-password-reqd" class="err-message" ng-message="required">My Logins App Password is required</small>
                         </div>
                     </div>
+
+	                <div class="property" ng-show="!appDetails.app.restrictedApp">
+	                    <div id="pwd-property-label"  class="property-label">Name Space</div>
+	                    <input  type="text"  id="input-mylogins-auth-namespace"
+	                           ng-model="appDetails.app.nameSpace" 
+	                           name="appAuthNameSpace"
+	                           maxlength="256"/>
+	                </div>                                    
                 </div>
             </div>
             <div class="right-container">
@@ -173,12 +193,25 @@
                     </div>
 
                     <div id="property-guest-access" class="property">
-                        <input id="checkbox-app-is-open" type="checkbox" class="checkbox-field checkbox-field-openSRC" ng-model="appDetails.app.isOpen" ng-checked="appDetails.app.isOpen || appDetails.app.restrictedApp" ng-disabled="appDetails.app.restrictedApp"/>
-                        <div id="property-guest-checkbox-label" class="property-label checkbox-label">Allow guest access</div>
+                        <label for="checkbox-app-is-open" class="checkbox"> 
+		                <input type="checkbox" ng-model="appDetails.app.isOpen" id="checkbox-app-is-open" ng-checked="appDetails.app.isOpen || appDetails.app.restrictedApp" ng-disabled="appDetails.app.restrictedApp"/> 
+		                <i class="skin"></i> 
+		                <span>Allow guest access</span> 
+		            </label> 
                     </div>
                     <div id="property-active" class="property">
-                        <input id="checkbox-app-is-enabled" type="checkbox" class=" checkbox-field checkbox-field-openSRC " ng-model="appDetails.app.isEnabled"/>
-                        <div id="property-active-checkbox-label" class="property-label checkbox-label">Active</div>
+                     <label for="checkbox-app-is-enabled" class="checkbox"> 
+		                <input type="checkbox" ng-model="appDetails.app.isEnabled" id="checkbox-app-is-enabled"/> 
+		                <i class="skin"></i> 
+		                <span>Active</span> 
+		            </label>    
+                    </div> <br/>
+                    <div id="property-is-central-auth" class="property" ng-show="!appDetails.app.restrictedApp">
+                     <label for="checkbox-app-is-central-auth" class="checkbox"> 
+		                <input type="checkbox" ng-model="appDetails.app.isCentralAuth" id="checkbox-app-is-central-auth"/> 
+		                <i class="skin"></i> 
+		                <span>Centralized</span> 
+		            </label>    
                     </div>
 
                 </div>
@@ -186,14 +219,25 @@
             </div>
         </form>
     </div>
+	</div>
+		
+			<br>
+			<div class="b2b-modal-footer">
+				<div class="dialog-control">
+				<span class="ecomp-save-spinner" ng-show="appDetails.isSaving"></span> 
+				<button id="button-save-app" class="btn btn-alt btn-small" ng-class="{disabled: appForm.$invalid}" ng-click="appDetails.saveChanges()">Save</button> 	
+						<button id="button-notification-cancel" class="btn btn-alt btn-small" ng-click="$dismiss('cancel')"role="button" tabindex="0">Cancel</button>
+						
+						
+					</div>
+			</div>
+			
+			
+			
 
-    <div class="dialog-control">
-        <span class="ecomp-save-spinner" ng-show="appDetails.isSaving"></span> 
-         <button id="button-save-app" class="btn btn-alt btn-small" ng-class="{disabled: appForm.$invalid}" ng-click="appDetails.saveChanges()">Save</button>
-        <button id="button-app-cancel" class="btn btn-alt btn-small" ng-click="closeThisDialog()">Cancel</button>
-    </div>
 </div>
 
+
 <script type="application/javascript">
     $(document).ready(function(){
         $(".ngdialog-content").css("top","-150px")
diff --git a/ecomp-portal-FE-os/client/src/views/applications/applications.controller.js b/ecomp-portal-FE-os/client/src/views/applications/applications.controller.js
index 08f00669..d1c2b091 100644
--- a/ecomp-portal-FE-os/client/src/views/applications/applications.controller.js
+++ b/ecomp-portal-FE-os/client/src/views/applications/applications.controller.js
@@ -22,7 +22,7 @@
     class ApplicationsCtrl {
 
     	constructor($log, $cookies, conf, ngDialog,
-        			applicationsService, confirmBoxService, userProfileService, utilsService) {
+        			applicationsService, confirmBoxService, userProfileService, utilsService,$modal) {
             this.emptyImgForPreview = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
             let getOnboardingApps = () => {
                 this.isLoadingTable = true;
@@ -31,8 +31,10 @@
                     	// Use proper back-end URL to load image
                     	for (var i = 0; i < appsList.length; i++) {
                     		appsList[i].imageLink = '';
-                    		if (appsList[i].imageUrl)
+                    		if (appsList[i].imageUrl){
                     			appsList[i].imageLink = conf.api.appThumbnail.replace(':appId', appsList[i].id);
+                        		appsList[i].imageLink = appsList[i].imageLink+'?' + new Date().getTime();
+                    		}
                     	}
                     	this.appsList = appsList;
                     }).catch(err => {
@@ -58,6 +60,8 @@
                     {name: 'Communication Topic', value: 'uebTopicName', isSortable: true},
                     {name: 'Communication Key', value: 'uebKey', isSortable: true},
                     {name: 'Communication Secret', value: 'uebSecret', isSortable: true},
+                    {name: 'Application Namespace', value: 'nameSpace', isSortable: true},
+                    {name: 'Central Access Type', value: 'isCentralAuth', isSortable: true}
                 ];
                 this.appsList = [];
             };
@@ -75,18 +79,20 @@
                         app: selectedApp
                     }
                 }
-                ngDialog.open({
+                var modalInstance = $modal.open({
                     templateUrl: 'app/views/applications/application-details-dialog/application-details.modal.html',
-                    controller: 'AppDetailsModalCtrl',
-                    controllerAs: 'appDetails',
-                    data: data
-                }).closePromise.then(needUpdate => {
-                    if (needUpdate.value === true) {
-                        $log.debug('ApplicationsCtrl:openAddNewAppModal: updating table data...');
-                        getOnboardingApps();
-                    }
-                });
-
+                    controller: 'AppDetailsModalCtrl as appDetails',
+                    sizeClass: 'modal-large', 
+                    resolve: {
+    					items: function () {
+        	        	  return data;
+    			        	}
+    		        }
+                })
+                
+                modalInstance.result.finally(function (){
+                		getOnboardingApps();
+     	        });
 
             };
 
@@ -118,6 +124,6 @@
         }
     }
     ApplicationsCtrl.$inject = ['$log', '$cookies', 'conf', 'ngDialog',
-    				'applicationsService', 'confirmBoxService', 'userProfileService', 'utilsService'];
+    				'applicationsService', 'confirmBoxService', 'userProfileService', 'utilsService','$modal'];
     angular.module('ecompApp').controller('ApplicationsCtrl', ApplicationsCtrl);
 })();
diff --git a/ecomp-portal-FE-os/client/src/views/applications/applications.tpl.html b/ecomp-portal-FE-os/client/src/views/applications/applications.tpl.html
index fa61e554..6016a2b1 100644
--- a/ecomp-portal-FE-os/client/src/views/applications/applications.tpl.html
+++ b/ecomp-portal-FE-os/client/src/views/applications/applications.tpl.html
@@ -51,6 +51,8 @@
 	                            <th b2b-table-header id="app-header-Topic" sortable="false">Communication Topic</th>
 	                            <th b2b-table-header id="app-header-CommKey" sortable="false">Communication Key</th>
 	                            <th b2b-table-header id="app-header-Secret" sortable="false">Communication Secret</th>
+	                            <th b2b-table-header id="app-header-namespace" sortable="false">Application Namespace</th>
+	                            <th b2b-table-header id="app-header-central-auth" sortable="false">Central Auth Access</th>	 
 	                            <th b2b-table-header id="app-header-delete" sortable="false">Delete</th>	                            	                            
 							</tr>
 						</thead>
@@ -68,7 +70,9 @@
         						<td b2b-table-body headers="rowheader_t1_{{$index}} col11" ng-click="apps.openAddNewAppModal(rowData)"ng-bind="rowData.uebTopicName"></td>	
                                	<td b2b-table-body headers="rowheader_t1_{{$index}} col12" ng-click="apps.openAddNewAppModal(rowData)"ng-bind="rowData.uebKey"></td>	
             					<td b2b-table-body headers="rowheader_t1_{{$index}} col13" ng-click="apps.openAddNewAppModal(rowData)"ng-bind="rowData.uebSecret"></td>	
-        						<td b2b-table-body headers="rowheader_t1_{{$index}} col14" >
+        						<td b2b-table-body headers="rowheader_t1_{{$index}} col14" ng-click="apps.openAddNewAppModal(rowData)"ng-bind="rowData.nameSpace"></td>	
+            					<td b2b-table-body headers="rowheader_t1_{{$index}} col15" ng-click="apps.openAddNewAppModal(rowData)">{{(rowData.isCentralAuth) ? 'yes' : 'no'}}</td>	
+        						<td b2b-table-body headers="rowheader_t1_{{$index}} col16" >
         							<span class="icon-misc-trash" ng-click="apps.deleteApp(rowData)"></span>
         						</td>		
 							</tr>
diff --git a/ecomp-portal-FE-os/client/src/views/functionalMenu/functionalMenu-dialog/menu-details.controller.js b/ecomp-portal-FE-os/client/src/views/functionalMenu/functionalMenu-dialog/menu-details.controller.js
deleted file mode 100644
index 140aea94..00000000
--- a/ecomp-portal-FE-os/client/src/views/functionalMenu/functionalMenu-dialog/menu-details.controller.js
+++ /dev/null
@@ -1,415 +0,0 @@
-/*-
- * ================================================================================
- * 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/20/15.
- */
-'use strict';
-(function () {
-    class MenuDetailsModalCtrl {
-        constructor($scope, $log, functionalMenuService, errorMessageByCode, ECOMP_URL_REGEX,$rootScope,confirmBoxService) {
-
-
-            let newMenuModel = {
-                name: null,
-                menuId: null,
-                parentMenuId: null,
-                url: null
-            };
-
-            let getAvailableRoles = (appid) => {
-                this.isSaving = true;
-                if (appid != null) {
-                    $log.debug("MenuDetailsModalCtrl::getAvailableRoles: About to call getManagedRolesMenu");
-                    functionalMenuService.getManagedRolesMenu(appid).then(rolesObj => {
-                        $log.debug("MenuDetailsModalCtrl::getAvailableRoles: Roles returned = " + JSON.stringify(rolesObj))
-                        this.availableRoles = rolesObj;
-                        this.preSelectedRoles = {roles:[]};
-
-                        if(($scope.ngDialogData.source==='edit') && this.isMidLevelMenuItem()){
-                            // in Edit flow , for Midlevel menu item no need to preSelect.
-                            this.preSelectedRoles = {roles:[]};
-                        }else if(!angular.isUndefined(this.menuItem.menuDetails) &&
-                            $scope.ngDialogData.source==='edit' && this.isLeafMenuItem() &&
-                            this.menuItem.menuDetails.appid!=appid) {
-                            // in Edit flow , for LeafMenuItem, if appid changed then no need to preSelect.
-                            this.preSelectedRoles = {roles:[]};
-                        }else{
-                            if((!angular.isUndefined(this.menuItem.menuDetails)) &&
-                                (!angular.isUndefined(this.menuItem.menuDetails.roles))){
-                                    $log.debug('menuDetails.roles: ' + this.menuItem.menuDetails.roles);
-                                    for(var i=0; i<this.menuItem.menuDetails.roles.length; i++){
-                                        var role = {"roleId":this.menuItem.menuDetails.roles[i]};
-                                        $log.debug('MenuDetailsModalCtrl::getAvailableRoles: adding role to preselected: ' + i + ': ' + JSON.stringify(role));
-                                        this.preSelectedRoles.roles.push(role);
-                                    }
-                            }
-                        }
-                        $rootScope.$broadcast('availableRolesReady');
-                        this.isSaving = false;
-                    }).catch(err => {
-                        $log.error("MenuDetailsModalCtrl::getAvailableRoles: error: " + err);
-                    });
-                } else {
-                    $log.debug("MenuDetailsModalCtrl::getAvailableRoles: appid was null");
-                }
-            };
-
-            let getAvailableApps = () => {
-                functionalMenuService.getAvailableApplications().then(apps => {
-                    $log.debug("MenuDetailsModalCtrl::getAvailableApps: Apps returned = " + JSON.stringify(apps))
-                    this.availableApps = apps;
-                    // Keep track of whether or not the selected app is disabled
-                    if (angular.isDefined(this.selectedApp) && angular.isDefined(this.selectedApp.index)) {
-                        for (var i = 0; i < apps.length; i++) {
-                            if (apps[i].index === this.selectedApp.index) {
-                                $log.debug("MenuDetailsModalCtrl::getAvailableApps: found app with index: " + this.selectedApp.index);
-                                $log.debug("MenuDetailsModalCtrl::getAvailableApps: setting isDisabled to: " + !apps[i].enabled);
-                                this.selectedApp.isDisabled = !apps[i].enabled;
-                                break;
-                            }
-                        }
-                        $log.debug("didn't find index: " + this.selectedApp.index);
-                    }
-                })['catch'](function (err) {
-                    confirmBoxService.showInformation('There was a problem retrieving the Applications. ' +
-                        'Please try again later. Error Status: '+ err.status).then(isConfirmed => {});
-                    $log.error("MenuDetailsModalCtrl::getAvailableApps: getAvailableApps error: " + err);
-                }).finally(()=>{
-                    this.isSaving = false;
-                });
-            };
-
-            let init = () => {
-                $log.info('MenuDetailsModalCtrl::init');
-                this.saveOrContinueBtnText = "Save";
-                this.isSaving = false;
-                this.displayRoles = $scope.ngDialogData.source==='view' ? true : false;
-                this.formEditable = $scope.ngDialogData.source==='view' ? false : true;
-                this.selectedRole = [];
-                this.availableRoles = [];
-                this.menuItem = _.clone($scope.ngDialogData.menuItem);
-                $log.info('MenuDetailsModalCtrl::getAvailableApps: Within init, about to check menuDetails for defined');
-                if(!angular.isUndefined(this.menuItem.menuDetails) &&
-                    ($scope.ngDialogData.source==='view' ||
-                    ($scope.ngDialogData.source==='edit') && this.isLeafMenuItem() )){
-
-                    $log.debug("MenuDetailsModalCtrl::init: menuItem: ");
-                    $log.debug('MenuDetailsModalCtrl::init: ',this.menuItem);
-                    this.menuItem.menu.url = this.menuItem.menuDetails.url;
-                    this.selectedApp={};
-                    this.selectedApp.index = this.menuItem.menuDetails.appid;
-                    getAvailableRoles(this.selectedApp.index);
-
-                }
-
-                if($scope.ngDialogData.source==='view' || $scope.ngDialogData.source==='edit'){
-                    this.menutitle = this.menuItem.menu.name;
-                    this.menuLocation = this.isParentMenuItem() ? this.menuItem.menu.name : this.menuItem.menu.parent.name;
-                }else{
-                    this.menutitle = '';
-                    this.menuLocation = this.menuItem.menu.name;
-                }
-                // Temporarily passing 0 as dummy for getAvailableRoles incase of this.selectedApp is not there i.e., in Add flow
-                //  getAvailableRoles(angular.isUndefined(this.selectedApp) ? 0: this.selectedApp.index );
-                getAvailableApps();
-                $log.debug("MenuDetailsModalCtrl::init: Menu details: " +  JSON.stringify(this.menuItem.menuDetails));
-            };
-
-
-            this.ECOMP_URL_REGEX = ECOMP_URL_REGEX;
-
-            //This part handles conflict errors (409)
-            this.conflictMessages = {};
-            this.scrollApi = {};
-            let handleConflictErrors = err => {
-                if(!err.data){
-                    return;
-                }
-                if(!err.data.length){ //support objects
-                    err.data = [err.data]
-                }
-                $log.debug('MenuDetailsModalCtrl::handleConflictErrors: err.data = ' + JSON.stringify(err.data));
-                _.forEach(err.data, item => {
-                    _.forEach(item.fields, field => {
-                        //set conflict message
-                        this.conflictMessages[field.name] = errorMessageByCode[item.errorCode];
-                        //set field as invalid
-                        $log.debug('MenuDetailsModalCtrl::handleConflictErrors: fieldName = ' + field.name);
-                        $scope.functionalMenuForm[field.name].$setValidity('conflict', false);
-                        //set watch once to clear error after user correction
-                        watchOnce[field.name]();
-                    });
-                });
-                this.scrollApi.scrollTop();
-            };
-
-            let resetConflict = fieldName => {
-                delete this.conflictMessages[fieldName];
-                $log.debug('MenuDetailsModalCtrl::resetConflict: $setValidity(true) = ' + fieldName);
-                if($scope.functionalMenuForm[fieldName]){
-                    $scope.functionalMenuForm[fieldName].$setValidity('conflict', true);
-                }
-            };
-
-            let watchOnce = {
-                text: () => {
-                    let unregisterName = $scope.$watch('functionalMenuDetails.menutitle', (newVal, oldVal) => {
-                        // $log.debug('title:: newVal, oldVal = ' + newVal.toLowerCase() + " | " + oldVal.toLowerCase());
-                        if(newVal.toLowerCase() !== oldVal.toLowerCase()){
-                            resetConflict('text');
-                            unregisterName();
-                        }
-                    });
-                },
-                url: () => {
-                    let unregisterUrl = $scope.$watch('functionalMenuDetails.menuItem.menu.url', (newVal, oldVal) => {
-                        if(newVal.toLowerCase() !== oldVal.toLowerCase()){
-                            resetConflict('url');
-                            unregisterUrl();
-                        }
-                    });
-                }
-            };
-
-            //***************************
-
-            this.isLeafMenuItem = () => {
-                return this.menuItem.menu.children.length>0 ? false : true;
-            };
-
-            this.isMidLevelMenuItem = () => {
-                return this.menuItem.menu.parentMenuId!=null && this.menuItem.menu.children.length>0 ? true : false;
-            };
-
-            this.isParentMenuItem = () => {
-                return this.menuItem.menu.parentMenuId!=null ? false : true;
-            };
-
-            this.updateSelectedApp = (appItem) => {
-                if (!appItem) {
-                    return;
-                }
-                $log.debug('MenuDetailsModalCtrl::updateSelectedApp: drop down app item = ' + JSON.stringify(appItem.index));
-                $log.debug("MenuDetailsModalCtrl::updateSelectedApp: appItem in updateSelectedApp: ");
-                $log.debug('MenuDetailsModalCtrl::updateSelectedApp: ',appItem);
-                this.selectedApp.isDisabled = ! appItem.enabled;
-                $log.debug("MenuDetailsModalCtrl::updateSelectedApp: isDisabled: "+this.selectedApp.isDisabled);
-                getAvailableRoles(appItem.index);
-            };
-
-            this.continue = () => {
-                this.displayRoles = true;
-                this.formEditable = false;
-            };
-
-            this.saveChanges = () => {
-
-                //todo : form validation was commented as dialog message is kept for error validations
-                /*if($scope.functionalMenuForm.$invalid){
-                 return;
-                 }*/
-
-                if(!!this.menuItem.menu.url && (angular.isUndefined(this.selectedApp) || !this.selectedApp.index>0)) {
-                    confirmBoxService.showInformation('Please select the appropriate app, or remove the url').then(isConfirmed => {});
-                    return;
-                }else if(!this.menuItem.menu.url && !angular.isUndefined(this.selectedApp) && this.selectedApp.index>0){
-                    confirmBoxService.showInformation('Please enter url, or select "No Application"').then(isConfirmed => {});
-                    return;
-                }else if(!this.menutitle){
-                    confirmBoxService.showInformation('Please enter the Menu title').then(isConfirmed => {});
-                    return;
-                }
-
-                this.isSaving = true;
-                var activeMenuItem = {};
-
-                if ($scope.ngDialogData.source === 'edit') {     // Edit Menu Item
-                    $log.debug('MenuDetailsModalCtrl::saveChanges: Will be saving an edit menu item');
-                    activeMenuItem = {
-                        menuId:this.menuItem.menu.menuId,
-                        column:this.menuItem.menu.column,
-                        text:this.menutitle,
-                        parentMenuId:this.menuItem.menu.parentMenuId,
-                        url:this.menuItem.menu.url,
-                        appid: angular.isUndefined(this.selectedApp) ? null:this.selectedApp.index,
-                        roles:this.selectedRole
-                    };
-                    // If we have removed the url and appid, we must remove the roles
-                    if (!activeMenuItem.appid && !activeMenuItem.url) {
-                        activeMenuItem.roles = null;
-                    }
-                    functionalMenuService.saveEditedMenuItem(activeMenuItem)
-                        .then(() => {
-                            $log.debug('MenuDetailsModalCtrl::saveChanges:  Menu Item saved');
-                            $scope.closeThisDialog(true);
-                        }).catch(err => {
-                        if(err.status === 409){//Conflict
-                            handleConflictErrors(err);
-                        } else {
-                            confirmBoxService.showInformation('There was a problem saving your change. ' +
-                                'Please try again later. Error Status: '+ err.status).then(isConfirmed => {});
-                        }
-                        $log.error('MenuDetailsModalCtrl::saveChanges: error - ',err);
-                    }).finally(()=>{
-                        this.isSaving = false;
-                    });
-
-                    $log.debug("MenuDetailsModalCtrl::saveChanges: Edit Menu output will be: " + JSON.stringify(activeMenuItem));
-                } else {   // New Menu Item
-                    $log.debug('MenuDetailsModalCtrl::saveChanges: Will be saving a New menu item');
-                    var newMenuItem = {
-                        menuId:null, // this is a new menu item
-                        column:this.menuItem.menu.column,
-                        text:this.menutitle,
-                        // We are creating this new menu item under the menu item that was clicked on.
-                        parentMenuId:this.menuItem.menu.menuId,
-                        url:this.menuItem.menu.url,
-                        appid: angular.isUndefined(this.selectedApp) ? null:this.selectedApp.index,
-                        roles:this.selectedRole
-                    };
-
-                    $log.debug("MenuDetailsModalCtrl::saveChanges:  New Menu output will be: " + JSON.stringify(newMenuItem));
-                    functionalMenuService.saveMenuItem(newMenuItem)
-                        .then(() => {
-                            $log.debug('MenuDetailsModalCtrl::saveChanges:  Menu Item saved');
-                            $scope.closeThisDialog(true);
-                        }).catch(err => {
-                        if(err.status === 409){//Conflict
-                            handleConflictErrors(err);
-                        } else {
-                            confirmBoxService.showInformation('There was a problem saving your menu. ' +
-                                'Please try again later. Error Status: '+ err.status).then(isConfirmed => {});
-                        }
-                        $log.error('MenuDetailsModalCtrl::saveChanges error: ', err);
-                    }).finally(()=>{
-                        this.isSaving = false;
-                    });
-
-                }
-            };
-
-            init();
-
-            $scope.$on('$stateChangeStart', e => {
-                //Disable navigation when modal is opened
-                e.preventDefault();
-            });
-        }
-    }
-    MenuDetailsModalCtrl.$inject = ['$scope', '$log', 'functionalMenuService', 'errorMessageByCode', 'ECOMP_URL_REGEX','$rootScope','confirmBoxService'];
-    angular.module('ecompApp').controller('MenuDetailsModalCtrl', MenuDetailsModalCtrl);
-
-    angular.module('ecompApp').directive('dropdownMultiselect', ['functionalMenuService',function(){
-        return {
-            restrict: 'E',
-            scope: {
-                model: '=',
-                options: '=',
-                populated_roles: '=preSelected',
-                dropdownTitle: '@',
-                source: '='
-            },
-            template: "<div class='btn-group' data-ng-class='{open: open}'>" +
-            "<button class='btn btn-medium'>{{dropdownTitle}}</button>" +
-            "<button class='btn dropdown-toggle' data-ng-click='open=!open;openDropDown()'><span class='caret'></span></button>" +
-            "<ul class='dropdown-menu dropdown-menu-medium' aria-labelledby='dropdownMenu'>" +
-            "<li data-ng-repeat='option in options'> <input ng-disabled='setDisable(source)'  type='checkbox' data-ng-change='setSelectedItem(option.roleId)' ng-model='selectedItems[option.roleId]'>{{option.rolename}}</li>" +
-            "</ul>" +
-            "</div>",
-            controller: function ($scope) {
-                $scope.selectedItems = {};
-                $scope.checkAll = false;
-                $scope.$on('availableRolesReady', function() {
-                    init();
-                });
-
-                function init() {
-                    console.log('dropdownMultiselect init');
-                    $scope.dropdownTitle = $scope.source ==='view' ? 'View Roles' : 'Select Roles';
-                    console.log('$scope.populated_roles = ' + $scope.populated_roles);
-                }
-
-                $scope.$watch('populated_roles', function(){
-                    if ($scope.populated_roles && $scope.populated_roles.length>0) {
-                        for (var i = 0; i < $scope.populated_roles.length; i++) {
-                            $scope.model.push($scope.populated_roles[i].roleId);
-                            $scope.selectedItems[$scope.populated_roles[i].roleId] = true;
-                        }
-                        if ($scope.populated_roles.length === $scope.options.length) {
-                            $scope.checkAll = true;
-                        }
-                    }else{
-                        deselectAll();
-                    }
-                });
-
-                $scope.openDropDown = function () {
-
-                };
-
-                $scope.checkAllClicked = function () {
-                    if ($scope.checkAll) {
-                        selectAll();
-                    } else {
-                        deselectAll();
-                    }
-                };
-
-                function selectAll() {
-                    $scope.model = [];
-                    $scope.selectedItems = {};
-                    angular.forEach($scope.options, function (option) {
-                        $scope.model.push(option.roleId);
-                    });
-                    angular.forEach($scope.model, function (id) {
-                        $scope.selectedItems[id] = true;
-                    });
-                    console.log($scope.model);
-                };
-
-                function deselectAll() {
-                    $scope.model = [];
-                    $scope.selectedItems = {};
-                    console.log($scope.model);
-                };
-
-                $scope.setSelectedItem = function (id) {
-                    var filteredArray = [];
-                    if ($scope.selectedItems[id] === true) {
-                        $scope.model.push(id);
-                    } else {
-                        filteredArray = $scope.model.filter(function (value) {
-                            return value != id;
-                        });
-                        $scope.model = filteredArray;
-                        $scope.checkAll = false;
-                    }
-                    console.log(filteredArray);
-                    return false;
-                };
-
-                $scope.setDisable = function(source){
-                    return source ==='view' ? true : false;
-                }
-            }
-        }
-    }]);
-
-})();
diff --git a/ecomp-portal-FE-os/client/src/views/functionalMenu/functionalMenu-dialog/menu-details.modal.html b/ecomp-portal-FE-os/client/src/views/functionalMenu/functionalMenu-dialog/menu-details.modal.html
deleted file mode 100644
index 56c3f4dc..00000000
--- a/ecomp-portal-FE-os/client/src/views/functionalMenu/functionalMenu-dialog/menu-details.modal.html
+++ /dev/null
@@ -1,103 +0,0 @@
-<!--
-  ================================================================================
-  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="functionalMenu-details-modal">
-    <div class="title">{{ngDialogData.title}}</div>
-
-
-    <div class="functionalMenu-properties-main" scroll-top="functionalMenuDetails.scrollApi">
-        <form name="functionalMenuForm">
-
-            <div class="item">
-                <div class="item-label">Parent</div>
-                <input id="input-parent" readonly="readonly" class="input-field" value="{{functionalMenuDetails.menuLocation}}" type="text" name="menuItem" required/>
-            </div>
-            <div class="item">
-                <div class="item-label">Title</div>
-                <input id="input-title" ng-readonly="!functionalMenuDetails.formEditable ? 'checked':'' " placeholder="Enter text" class="input-field" ng-model="functionalMenuDetails.menutitle" type="text" name="text"/>
-                <div id="div-error-conflict" class="error-container" ng-show="functionalMenuDetails.conflictMessages.text">
-                    <small id="msg-error-conflict" id="functionalMenuDetails-input-title-conflict" class="err-message" ng-bind="functionalMenuDetails.conflictMessages.text"></small>
-                </div>
-            </div>
-            <div class="item">
-                <div class="left-item">
-                    <div class="item-label">URL</div>
-                    <input id="input-url" ng-readonly="!functionalMenuDetails.formEditable ? 'checked':'' " placeholder="http://" class="input-field" ng-model="functionalMenuDetails.menuItem.menu.url" type="url" name="url"/>
-                    <span id="error-url-conflict" class="err-message" ng-show="functionalMenuForm.url.$error.url"> Not valid URL!</span>
-                </div>
-                <div class="right-item">
-                    <div class="item-label">App</div>
-                    <div class="custom-select-wrap" ng-readonly="checked">
-                        <select id="select-app" class="select-field"
-                                ng-model="functionalMenuDetails.selectedApp"
-                                ng-change="functionalMenuDetails.updateSelectedApp(functionalMenuDetails.selectedApp);"
-                                ng-options="app.title for app in functionalMenuDetails.availableApps track by app.index"
-                                ng-disabled="!functionalMenuDetails.availableApps || !functionalMenuDetails.availableApps.length || !functionalMenuDetails.formEditable"
-                                name="app"
-                                required>
-                            <option value="" >No Application</option>
-                        </select>
-                    </div>
-                    <!--<span class="err-message" ng-show="functionalMenuForm.app.$dirty && functionalMenuForm.app.$error.required"> Please select App!</span>-->
-                 <!--   <pre>{{functionalMenuDetails.menuItem | json}}</pre> -->
-                </div>
-            </div>
-            <div class="item" ng-show="functionalMenuDetails.displayRoles==true">
-                <div class="item-label">Roles</div>
-                    <dropdown-multiselect id="dropdown-roles" dropdown-title="Select Roles" pre-selected="functionalMenuDetails.preSelectedRoles.roles"
-                                          model="functionalMenuDetails.selectedRole"
-                                          options="functionalMenuDetails.availableRoles" source="ngDialogData.source">
-                    </dropdown-multiselect>
-            </div>
-            <div ng-show="functionalMenuDetails.selectedApp && functionalMenuDetails.selectedApp.isDisabled" class="err-message">Application is disabled</div>
-        </form>
-    </div>
-    <div class="dialog-control">
-        <div ng-if="ngDialogData.source!='view'">
-            <span class="ecomp-save-spinner" ng-show="functionalMenuDetails.isSaving"></span>
-            <span ng-if="ngDialogData.source=='edit' && functionalMenuDetails.isLeafMenuItem()">
-                <button class="save-button" id="add-menu-button-save"
-                        ng-show="!functionalMenuDetails.menuItem.menu.url ||
-                        !(functionalMenuDetails.selectedApp.index>0) ||
-                        functionalMenuDetails.displayRoles"
-                        ng-disabled="!functionalMenuForm.text.$valid"
-                        ng-click="functionalMenuDetails.saveChanges()">Save</button>
-                <button class="save-button" id="add-menu-button-continue"
-                        ng-show="!!functionalMenuDetails.menuItem.menu.url &&
-                        functionalMenuDetails.selectedApp.index>0 &&
-                        functionalMenuDetails.menutitle &&
-                        !functionalMenuDetails.displayRoles"
-                        ng-disabled="!functionalMenuForm.url.$valid" ng-click="functionalMenuDetails.continue()">Continue</button>
-            </span>
-            <span ng-if="ngDialogData.source=='add' || (ngDialogData.source=='edit' && !functionalMenuDetails.isLeafMenuItem())">
-                <button id="button-save-add"
-                        class="save-button" ng-show="!functionalMenuDetails.menuItem.menu.url || !(functionalMenuDetails.selectedApp.index>0)
-                || functionalMenuDetails.selectedRole.length>0 || !functionalMenuDetails.menutitle" ng-disabled="!functionalMenuForm.text.$valid || !functionalMenuDetails.menutitle"
-                        ng-click="functionalMenuDetails.saveChanges()">Save</button>
-                <button id="button-save-continue" class="save-button" ng-show="!!functionalMenuDetails.menuItem.menu.url && functionalMenuDetails.selectedApp.index>0 && functionalMenuDetails.menutitle
-                && !functionalMenuDetails.selectedRole.length>0" ng-disabled="!functionalMenuForm.url.$valid"
-                        ng-click="functionalMenuDetails.continue()">Continue</button>
-            </span>
-            <button id="button-cancel-close-dialog" class="cancel-button" ng-click="closeThisDialog()">Cancel</button>
-        </div>
-        <div ng-if="ngDialogData.source=='view'">
-            <div  id="div-close-dialog"  class="cancel-button" ng-click="closeThisDialog()">Close</div>
-        </div>
-    </div>
-</div>
diff --git a/ecomp-portal-FE-os/client/src/views/functionalMenu/functionalMenu.controller.js b/ecomp-portal-FE-os/client/src/views/functionalMenu/functionalMenu.controller.js
index 343c968d..0ff46e4d 100644
--- a/ecomp-portal-FE-os/client/src/views/functionalMenu/functionalMenu.controller.js
+++ b/ecomp-portal-FE-os/client/src/views/functionalMenu/functionalMenu.controller.js
@@ -20,7 +20,7 @@
 'use strict';
 (function () {
     class FunctionalMenuCtrl {
-        constructor($log, functionalMenuService, $scope,ngDialog, confirmBoxService) {
+        constructor($log, functionalMenuService, $scope,ngDialog, confirmBoxService,$modal) {
             $log.info('FunctionalMenuCtrl init');
 
             $scope.invokeDialog = () => {
@@ -145,19 +145,26 @@
                                 title: getDialogTitle(source)
                             };
                         }
-                        ngDialog.open({
+                          var modalInstance = $modal.open({
                             templateUrl: 'app/views/functionalMenu/functionalMenu-dialog/menu-details.modal.html',
-                            controller: 'MenuDetailsModalCtrl',
-                            controllerAs: 'functionalMenuDetails',
-                            data: data
-                        }).closePromise.then(needUpdate => {
-                            if(needUpdate.value === true){
-                                $log.debug('FunctionalMenuCtrl::openMenuDetailsModal: updating table data...');
+                            controller: 'MenuDetailsModalCtrl as functionalMenuDetails',
+                            sizeClass: 'modal-large', 
+                            resolve: {
+            					items: function () {
+                	        	  return data;
+            			        	}
+            		        }
+                        })
+                        
+                        modalInstance.result.finally(function (needUpdate){
+                        	if(needUpdate.value === true){
+                        		$log.debug('FunctionalMenuCtrl::openMenuDetailsModal: updating table data...');
                                 if(source==="edit") {
                                     init();
                                 }
-                            }
-                        });
+
+                          }
+             	        });
                     });
             };
 
@@ -191,18 +198,25 @@
                                 };
                             }
 
-                            ngDialog.open({
+                          	var modalInstance = $modal.open({
                                 templateUrl: 'app/views/functionalMenu/functionalMenu-dialog/menu-details.modal.html',
-                                controller: 'MenuDetailsModalCtrl',
-                                controllerAs: 'functionalMenuDetails',
-                                data: data
-                            }).closePromise.then(needUpdate => {
-                                if(needUpdate.value === true){
+                                controller: 'MenuDetailsModalCtrl as functionalMenuDetails',
+                                sizeClass: 'modal-large', 
+                                resolve: {
+                					items: function () {
+                    	        	  return data;
+                			        	}
+                		        }
+                            })
+                            
+                            modalInstance.result.finally(function (needUpdate){
+                            	if(needUpdate.value === true){
                                     $log.debug('FunctionalMenuCtrl::getMenuDetails: updating table data...');
                                     init();
                                     //getOnboardingWidgets();
-                                }
-                            });
+
+                              }
+                 	        });
                         }
                     });
             };
@@ -238,7 +252,7 @@
             init();
         }
     }
-    FunctionalMenuCtrl.$inject = ['$log', 'functionalMenuService','$scope', 'ngDialog', 'confirmBoxService'];
+    FunctionalMenuCtrl.$inject = ['$log', 'functionalMenuService','$scope', 'ngDialog', 'confirmBoxService','$modal'];
     angular.module('ecompApp').controller('FunctionalMenuCtrl', FunctionalMenuCtrl);
 
     angular.module('ecompApp').directive('jqTree', ['functionalMenuService','$log','confirmBoxService',function(functionalMenuService,$log,confirmBoxService){