actually adding the files to the initial commit

Change-Id: I2f0c09692c2ae70be61b8bb552fd1bd2983eb661 Signed-off-by: DR695H <dr695h@att.com>
author: DR695H <dr695h@att.com> 2017-02-07 13:11:03 -0500
committer: DR695H <dr695h@att.com> 2017-02-07 13:12:28 -0500
commit: 13ce0552dc7156b6e3e226c00295705f27780a40 (patch)
tree: a9ada50d0a86c0fdc253c188d1328f6e880bfaf5 /vid/src/main/webapp/app/fusion/scripts/view-models
parent: 77b87f76ff2799bd1f5fe85552f1c5e7081eb4df (diff)
30 files changed, 3021 insertions, 0 deletions
diff --git a/vid/src/main/webapp/app/fusion/scripts/view-models/admin-page/admin.html b/vid/src/main/webapp/app/fusion/scripts/view-models/admin-page/admin.html
new file mode 100644
index 00000000..f83888d9
--- /dev/null
+++ b/vid/src/main/webapp/app/fusion/scripts/view-models/admin-page/admin.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<!--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  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.
+  ================================================================================
+  -->
+
+<html>
+	<head>
+	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+	<meta http-equiv="cache-control" content="max-age=0" />
+    <meta http-equiv="cache-control" content="no-cache" />
+    <meta http-equiv="expires" content="0" />
+    <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
+    <meta http-equiv="pragma" content="no-cache"/>
+	<!-- CSS -->
+		<link rel="stylesheet" type="text/css" href="app/fusion/external/ebz/fn-ebz.css" >
+		<link rel="stylesheet" type="text/css" href="app/fusion/external/ebz/sandbox/styles/demo.css" >
+		<link rel="stylesheet" type="text/css" href="app/fusion/external/ebz/sandbox/styles/base.css" >
+		<link rel="stylesheet" type="text/css" href="app/fusion/external/ebz/sandbox/styles/btn.css" >
+		<link rel="stylesheet" type="text/css" href="app/fusion/external/ebz/sandbox/styles/dtpk.css" >
+		<link rel="stylesheet" type="text/css" href="app/fusion/external/ebz/sandbox/styles/frms.css" >
+		<link rel="stylesheet" type="text/css" href="app/fusion/external/ebz/sandbox/styles/sldr.css" >
+		<link rel="stylesheet" type="text/css" href="app/fusion/external/ebz/sandbox/styles/style.css" >
+		<link rel="stylesheet" type="text/css" href="app/fusion/external/ebz/sandbox/styles/tbs.css" >
+		<link rel="stylesheet" type="text/css" href="app/fusion/external/ebz/ebz_header/portal_ebz_header.css">
+		<link rel="stylesheet" type="text/css" href="static/fusion/css/jquery-ui.css">
+	<!-- Basic AngularJS -->
+		<script src= "app/fusion/external/ebz/angular_js/angular.js"></script> 
+		<script src= "app/fusion/external/ebz/angular_js/angular-sanitize.js"></script> 
+		<script src= "app/fusion/external/ebz/angular_js/angular-route.min.js"></script>
+		<script src= "app/fusion/external/ebz/angular_js/angular-cookies.js"></script>
+	 	<script src= "app/fusion/external/ebz/angular_js/app.js"></script> 
+		<script src= "app/fusion/external/ebz/angular_js/gestures.js"></script>
+		<script src= "app/fusion/external/ebz/sandbox/att-abs-tpls.js" type="text/javascript"></script>
+		<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/0.10.0/lodash.min.js"></script>
+		<script src="app/fusion/external/angular-ui/ui-bootstrap-tpls-1.1.2.min.js"></script>
+		
+	<!-- jQuery -->	
+		<script src="static/js/jquery-1.10.2.js"></script>
+		<script src="static/js/jquery.mask.min.js" type="text/javascript"></script>
+		<script src="static/js/jquery-ui.js" type="text/javascript"></script>
+	<!-- AngularJS Gridster -->
+		<script src="static/fusion/js/att_angular_gridster/ui-gridster-tpls.js"></script>
+		<script src="static/fusion/js/att_angular_gridster/angular-gridster.js"></script>
+	<!-- AngularJS Config -->
+		<script src= "app/fusion/external/ebz/angular_js/app.js"></script>
+		<script src= "app/fusion/external/ebz/angular_js/checklist-model.js"></script>
+	<!-- Utility -->
+		<script src="app/fusion/scripts/modalService.js"></script>
+	<!-- Controller js -->
+	<script src="app/fusion/scripts/controllers/fn_menu_add_popup_controller.js"></script>
+		<script src="app/fusion/scripts/controllers/admin_menu_edit.js"></script>
+		<script src="app/fusion/scripts/controllers/profile-search-controller.js"></script>
+		<script src="app/fusion/scripts/controllers/profile-controller.js"></script>
+		<script src="app/fusion/scripts/controllers/post-search-controller.js"></script>
+		<script src="app/fusion/scripts/controllers/role-list-controller.js"></script>
+		<script src="app/fusion/scripts/controllers/role-function-list-controller.js"></script>
+		<script src="app/fusion/scripts/controllers/rolefunctionpopupController.js"></script>
+		<script src="app/fusion/scripts/controllers/modelpopupController.js"></script>
+		<script src="app/fusion/scripts/controllers/jcs-admin-controller.js"></script>
+		<script src="app/fusion/scripts/controllers/broadcast-list-controller.js"></script>
+		<script src="app/fusion/scripts/controllers/broadcast-controller.js"></script>
+		<script src="app/fusion/scripts/controllers/usage-list-controller.js"></script>
+		<script src="app/fusion/scripts/controllers/collaborate-list-controller.js"></script>
+		<script src="app/fusion/scripts/controllers/role-controller.js"></script>
+		<script src="app/fusion/scripts/controllers/rolepopupmodelController.js"></script>
+	<!-- Header and Footer -->
+		<link rel="stylesheet" type="text/css" href="app/fusion/external/ebz/ebz_header/header.css">
+		<link rel="stylesheet" type="text/css" href="app/fusion/external/ebz/ebz_header/footer.css" >
+		<script src="app/fusion/scripts/directives/footer.js"></script>
+		<script src="app/fusion/external/ebz/js/footer.js"></script>
+		<script src="app/fusion/scripts/directives/header.js"></script>
+		<script src="app/fusion/scripts/directives/leftMenu.js"></script>
+		<script src="app/fusion/scripts/services/leftMenuService.js"></script>
+		<link rel="import" href="app/fusion/scripts/view-models/header.html">
+	<!-- Services -->
+		<script src="app/fusion/scripts/services/profileService.js"></script>
+		<script src="app/fusion/scripts/services/adminService.js"></script>
+		<script src="app/fusion/scripts/services/userInfoService.js"></script>
+	<!-- Controller -->
+        <script src="app/fusion/scripts/controllers/adminController.js"></script>
+    <!-- other js lib -->
+        <script type="text/javascript" src="app/fusion/scripts/socket/peerBroadcast.js"></script>
+        <script src="app/fusion/scripts/moment.min.js"></script>
+        
+    <!-- Icon -->
+    	<link rel="stylesheet" type="text/css" href="app/fusion/external/ionicons-2.0.1/css/ionicons.css" />
+    
+	</head>
+	<body class="appBody" ng-app="abs">
+		<div ng-include src="'app/fusion/scripts/view-models/profile-page/popup_modal_fn_menu_add.html'"></div>
+	    <div ng-include src="'app/fusion/scripts/view-models/profile-page/popup_modal_rolefunction.html'"></div>
+		<div ng-include src="'app/fusion/scripts/view-models/profile-page/popup_modal.html'"></div>
+		<div ng-include src="'app/fusion/scripts/view-models/profile-page/popup_modal_role.html'"></div>
+		<div q-header></div>
+		<div q-menu class="appLeftMenu"></div>
+		<div ng-view id="rightContentAdmin" style="min-height: 450px;margin-top:-100px;margin-left:210px;"></div>		
+		<div q-footer class="appFooter"></div>
+	</body>
+</html>
diff --git a/vid/src/main/webapp/app/fusion/scripts/view-models/admin-page/profile.html b/vid/src/main/webapp/app/fusion/scripts/view-models/admin-page/profile.html
new file mode 100644
index 00000000..7ee43020
--- /dev/null
+++ b/vid/src/main/webapp/app/fusion/scripts/view-models/admin-page/profile.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<!--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  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.
+  ================================================================================
+  -->
+
+<html>
+	<head>
+	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+	<meta http-equiv="cache-control" content="max-age=0" />
+    <meta http-equiv="cache-control" content="no-cache" />
+    <meta http-equiv="expires" content="0" />
+    <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
+    <meta http-equiv="pragma" content="no-cache" />
+	
+	<!-- Resources -->	
+	<script src= "app/fusion/scripts/utils/page-resource.js"></script> 
+	
+	<script>
+		loadjscssfile("app/fusion/scripts/controllers/profileController.js", "js");	
+	</script>
+	
+	</head>
+	<body class="appBody">
+	    <div ng-include src="'app/fusion/scripts/view-models/profile-page/popup_modal_rolefunction.html'"></div>
+		<div ng-include src="'app/fusion/scripts/view-models/profile-page/popup_modal.html'"></div>
+		<div q-header></div>
+		<div q-menu class="appLeftMenu"></div>
+		<div ng-view id="rightContentProfile" style="min-height: 450px;margin-top:-50px;margin-left:210px;margin-right:110px;"></div>		
+		<div q-footer class="appFooter"></div>  
+	</body>
+</html>
diff --git a/vid/src/main/webapp/app/fusion/scripts/view-models/dummy.txt b/vid/src/main/webapp/app/fusion/scripts/view-models/dummy.txt
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/vid/src/main/webapp/app/fusion/scripts/view-models/dummy.txt
diff --git a/vid/src/main/webapp/app/fusion/scripts/view-models/footer.html b/vid/src/main/webapp/app/fusion/scripts/view-models/footer.html
new file mode 100644
index 00000000..56148731
--- /dev/null
+++ b/vid/src/main/webapp/app/fusion/scripts/view-models/footer.html
@@ -0,0 +1,42 @@
+<!--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  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>
+
+<div class="footerContainer" id="footerContainer" style="z-index:1000">
+	<div class="footerWrapper" id="footerWrapper">
+
+			<div class="footerItem">
+		
+			</div>
+		<div class="attFooterInfo">
+			<div class="footerLastSection">
+				<div id="attFooterLogo" class="attLogo" tabindex='0'></div>
+				
+					<br>
+					<div class="privacyPolicy">
+					
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+</div>
diff --git a/vid/src/main/webapp/app/fusion/scripts/view-models/header.html b/vid/src/main/webapp/app/fusion/scripts/view-models/header.html
new file mode 100644
index 00000000..adb5be35
--- /dev/null
+++ b/vid/src/main/webapp/app/fusion/scripts/view-models/header.html
@@ -0,0 +1,186 @@
+<!--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  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 style="position: relative; z-index: 999;">
+    <div class="headerContainer" id="headerContainer" ng-show="{{showHeader}}">
+        <div style="position: relative; z-index: 999;">
+            <div class="headerContainer" id="headerContainer">
+                <div id="megaMenuContainer" class="megaMenuContainer" style="margin-top: 0; overflow: visible;">
+                    <!--for mega Menu-->
+                    <!-- Mega Menu parent-tab directive with three models menu-items, active-sub-menu, active-menu -->
+                    <div id="topMenu" class="top-megamenu" ng-mouseleave="activeClickSubMenu.x.active=false; activeClickMenu.x.active=false" >
+                        <div style="float:left;width:100%;"parent-tab menu-items="megaMenuDataObject" active-sub-menu='activeClickSubMenu.x' active-menu='activeClickMenu.x'>
+                            <div parentmenu-tabs mega-menu="true" menu-items="megaMenuDataObject" style="height:55px;">
+                                <div style="float:left">
+                                    <li class="megamenu__item" style="line-height:55px;" ng-click="returnToPortal()">
+                                       <div></div>
+                                        <strong	style="font-weight: 400 !important; font-family: Arial !important; font-size: 18px;" >ECOMP Portal</strong>
+                                    </li>
+                                    <div menu-tabs mega-menu="true" tab-name="item.text" menu-item="item"
+                                         active-menu="activeClickMenu.x"
+                                         ng-repeat="item in megaMenuDataObject"
+                                         style="font-size: 18px;"
+                                         ng-mousedown="loadFavorites()">
+                                        <div parentmenu-tabs sub-menu="true" ng-show="activeClickMenu.x.active && item.active"
+                                             menu-items="activeClickMenu.x.children">
+
+                              <!-- Second level menu -->
+                                            <div menu-tabs sub-menu="true" tab-name="subItem.text"
+                                                 tab-url="subItem.url"  menu-item="subItem"
+                                                 ng-repeat="subItem in activeClickMenu.x.children | orderBy : 'column'" active-menu="activeClickSubMenu.x"
+                                                 sub-item-active="{{subItem.active}}" style="float:left;" aria-label="{{subItem.text}}"
+                                                 ng-mouseenter="submenuLevelAction(subItem.text,subItem.column)"
+                                                 ng-mouseleave="submenuLevelAction(subItem.text,subItem.column)"
+                                                 ng-click="submenuLevelAction(subItem.text,subItem.column)"  >
+                                                <i ng-if="subItem.text=='Favorites'" id="favorite-star"
+                                                   class="icon-star favorites-icon-active">
+                                                </i>
+											</div>
+                                                <div class="sub__menu" ng-mouseleave="activeClickSubMenu.x.active=false" >
+                                                    <ul ng-show="activeClickSubMenu.x.active"  role="menubar" class="columns">
+                                                        <!-- Third level menu -->
+                                                        <div menu-tabs
+                                                             menu-item="subItem"
+                                                             class="columns-div"
+                                                             ng-repeat="subItem in activeClickSubMenu.x.children | orderBy : 'column'"
+                                                             ng-show="activeClickSubMenu.x.active">
+
+                                                            <i id="favorite-selector-third-level"
+                                                               ng-show="isUrlFavorite(subItem.menuId)==false"
+                                                               class="icon-star favorites-icon-inactive"
+                                                               ng-if="subItem.url.length > 1">
+                                                            </i>
+                                                            <i id="favorite-selector-third-level"
+                                                               ng-show="isUrlFavorite(subItem.menuId)"
+                                                               class="icon-star favorites-icon-active"
+                                                               ng-if="subItem.url.length > 1">
+                                                            </i>
+															<span class="title" aria-label="{{subItem.text}}"
+                                                                  ng-click="goToUrl(subItem)">{{subItem.text}}</span>
+                                                            <!-- Fourth level menus -->
+                                                            <div att-links-list="">
+                                                                <i id="favorite-selector-fourth-level"
+                                                                   class="icon-star favorites-icon-inactive"
+                                                                   ng-show="isUrlFavorite(tabValue.menuId)==false"
+                                                                   ng-if="tabValue.url.length > 1">
+
+                                                                </i>
+                                                                <i id="favorite-selector-fourth-level"
+                                                                   class="icon-star favorites-icon-active"
+                                                                   ng-show="isUrlFavorite(tabValue.menuId)"
+                                                                   ng-if="tabValue.url.length > 1">
+
+                                                                </i>
+					                                            <span role="menuitem" att-links-list-item=""
+                                                                      ng-repeat="tabValue in subItem.children"
+                                                                      ng-click="goToUrl(tabValue)"
+                                                                      att-accessibility-click="13,32"
+                                                                      ng-class="{'disabled': tabValue.disabled}">{{tabValue.text}}</span>
+                                                            </div>
+                                                            <hr ng-show="!$last"/>
+                                                        </div>
+                                                    </ul>
+									<!-- Favorites level menu -->
+                                                    <div class="favorites-window" ng-show='favoritesWindow' ng-mouseleave="hideFavoritesWindow()">
+                                                        <div id="favorites-menu-items" ng-show="showFavorites">
+                                                            <div ng-repeat="subItem in favoritesMenuItems"
+                                                                 att-links-list=""
+                                                                 style='display: inline'>
+                                                                <i id="favorite-selector-favorites-list"
+                                                                   class="icon-star favorites-icon-active"
+                                                                >
+                                                                </i>
+                                                                <a id="favorites-list" aria-label="{{subItem.text}}"
+                                                                   ng-click="goToUrl(subItem)"
+                                                                   style="margin-left: 3px; margin-right: 20px; text-decoration: none; color: #666666;">
+                                                                    {{subItem.text}}
+                                                                </a>
+                                                            </div>
+                                                            <div>
+                                                                <br>
+                                                                <p style='font-weight: 400; font-family: Arial !important;
+															    font-size: 18px; text-align: center; background-color: lightgray;
+															    width: 400px; margin-left: 25%; margin-right: 25%;'>
+                                                                    Manage favorites on ECOMP Portal.
+                                                                </p>
+                                                            </div>
+                                                        </div>
+                                                        <!-- Favorites when empty -->
+                                                        <div id="favorites-empty" ng-show="emptyFavorites" class="favorites-window-empty">
+                                                            <div>
+                                                                <img src="app/fusion/external/ebz/images/no_favorites_star.png">
+                                                                <p class='favoritesLargeText'>No Favorites</p>
+                                                                <p class='favoritesNormalText'>Manage favorites on ECOMP Portal.</p>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div >
+                                    <li class="megamenu__item" style="line-height:55px;" ng-if="loadMenufail">
+                                        <strong	style="font-weight: 400 !important; font-family: Arial !important; font-size: 18px;" >Unable to load menus</strong>
+                                    </li>
+                                    <div  style="float:right">
+	                                    <li id="bcLoginSnippet" class="megamenu__item" style="width: 140px;" >
+	                                        <div  popover="loginSnippet.html"  aria-label="Login Snippet"
+	                                              referby="loginSnippet" att-accessibility-click="13,32" popover-style="\" popover-placement="below" style="width: 200px;">
+	                                            <div class="ion-android-person login-snippet-icon" style="display:inline-block"></div>
+	                                            <div class="login-snippet-text" style="display: inline-block; font-size:12px; margin-left:5px;overflow: hidden; max-height: 31px; overflow: hidden; max-height: 31px;   max-width:120px; padding-top: 0px; margin-top: 0px; white-space: nowrap;">{{userFirstName}}</div>
+	                                        </div>
+	                                    </li>
+	                                    <li class="megamenu__item" style="width:120px;">&nbsp;</li>
+                                    </div>
+                                    
+                                </div>
+                               
+                            </div>
+                        </div>
+                        <div style="clear: both"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<script type="text/ng-template" id="loginSnippet.html">
+    <div style="line-height: normal; right: 167px; min-height: 200px; height: auto; width: auto; " ng-controller="loginSnippetCtrl" >
+        <div id="reg-header-snippet">
+            <div class="reg-profilePicture" style="min-height: 215px; width: auto; " id="reg-profile-links">
+                <div id="reg-profileImage">
+                    <div style="clear: both; height: 80px; position: relative; width: 80px;">
+                        <span style="  background-position: -1px -1px; height: 81px;left: 0;position: absolute;top: 0;width: 81px;">&nbsp;</span>
+                    </div>
+                </div>
+                <div id="reg-logout-div">
+                    <a class="reg-logout-btn" href="logout.htm">Log Out</a>
+                </div>
+            </div>
+            <div tabindex="0" class="reg-profileDetails" id="reg-profiledetails-id">
+                <ul class="reg-Details-table" style="list-style: none;">
+                    <li><div class="reg-userName-table"><div id="reg-userName-table-row"><div id="reg-userName-table-cell"><h3 class="att-global-fonts" style="font-size:18px !important;" id="reg-userName">{{userProfile.fullName}}&nbsp;</h3><span class="visuallyhidden">.</span></div></div></div></li>
+                    <li><div class="reg-userEmail-label"><span class="reg-userEmail-label-spn">EMAIL<span class="visuallyhidden">:</span></span></div></li>
+                    <li><div class="reg-userEmail-value"><span class="reg-userEmail-value-spn">{{userProfile.email}}<span class="visuallyhidden">.</span></span></div></li>
+                    <li><div class="reg-userRole-label"><span class="reg-userRole-label-spn">User ID<span class="visuallyhidden">:</span></span></div></li>
+                    <li><div class="reg-userRole-value"><span class="reg-userRole-value-spn">{{userProfile.orgUserId}}<span class="visuallyhidden"></span></span></div></li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</script>
diff --git a/vid/src/main/webapp/app/fusion/scripts/view-models/left_menu.html b/vid/src/main/webapp/app/fusion/scripts/view-models/left_menu.html
new file mode 100644
index 00000000..84ee6ead
--- /dev/null
+++ b/vid/src/main/webapp/app/fusion/scripts/view-models/left_menu.html
@@ -0,0 +1,41 @@
+<!--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  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 ng-cloak>
+	<span ng-style="adjustHLeftMenu('burgerIcon')" style="z-index:998; position:fixed; left:0%; font-size:35px; margin-left:10px;text-decoration:none;">
+		<a ng-click="toggleDrawer();isOpen = !isOpen" href="javascript:void(0);" class="arrow-icon-left" >
+		<span class="ion-navicon-round"></span></a>	
+		<span ng-init="isOpen = true" ng-show="isOpen" style="font-size:16px; position:relative; top:-8px; left:-15px;">&nbsp&nbsp&nbsp {{app_name}}</span>
+	</span>
+	<div att-drawer drawer-slide="left" drawer-custom-top="{{drawer_custom_top}}px" drawer-size="200px" drawer-open="drawerOpen" drawer-custom-height="100%" >
+		<div ng-style="adjustHLeftMenu('leftMenu')">
+		    <div class="attDrawer" style="z-index:998">   
+		    	<div class="appLeftMenuAccordDiv">
+		    		<accordion close-others="true" css="att-accordion--no-box">
+						<accordion-group ng-repeat="parent in leftMenuItems" heading="{{parent.parentLabel}}" parent-link="{{parent.parentAction}}" image-source="{{parent.parentImageSrc}}" child-length="{{parent.childItemList.length}}" is-open="parent.open">
+							<div ng-repeat="subMenu in parent.childItemList" style="font-size:12px; margin-left:10px;">
+	                   			<a href="{{subMenu.action}}" style="font-size:12px; color:#666666;" >{{subMenu.label}}</a>
+							</div>
+	                   </accordion-group>
+					</accordion>
+				</div>
+		    </div>
+		</div>	
+	</div>
+</div>
+\ No newline at end of file
diff --git a/vid/src/main/webapp/app/fusion/scripts/view-models/profile-page/admin_menu_edit.html b/vid/src/main/webapp/app/fusion/scripts/view-models/profile-page/admin_menu_edit.html
new file mode 100644
index 00000000..ee23635f
--- /dev/null
+++ b/vid/src/main/webapp/app/fusion/scripts/view-models/profile-page/admin_menu_edit.html
@@ -0,0 +1,175 @@
+<!--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  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 ng-controller="AdminMenuEditController" >
+	<div class="pageTitle">
+		<br>
+	    <h1 class="heading1" style="margin-left:0px">Admin Menu Items</h1>
+	    <br/>
+	<div style="margin-right: 20px;text-align: justify;text-align-last:auto;">
+		<strong>Add menu item here:</strong>
+	</div>
+		<br/>
+	    <a ng-click="addNewFnMenuItemModalPopup();" class="ion-android-apps" style="font-size:40px;" ></a>
+	</div>
+	<br>
+	<div style="margin-right: 20px;text-align: justify;text-align-last:auto;">
+		<strong>Existing menu items:</strong>
+	</div>
+	<br>
+
+
+
+<div style="width: 30%;">
+<table>
+  <tr>
+  <div style="width: 60%;">
+    <td>Number of records to show:</td>
+  </div>
+    <td>
+	    <div style="width: 40%;">
+	    	<input type="text" id="numberOfRecordstoShow" name="numberOfRecordstoShow" ng-model="numberOfRecordstoShow">
+	    </div>
+    </td>
+  </tr>
+</table>	
+  
+</div> 
+
+<!--  freeze header
+<div class="scrolling-table" style="width: 100%;">
+    <table  att-table table-data="fnMenuItems" view-per-page="viewPerPage" current-page="currentPage" search-category="searchCategory" search-string="searchString" total-page="totalPage">
+			<thead  att-table-row>
+				<tr align="left">
+				<th att-table-header sortable="true" key="id" default-sort="a">Menu ID</th>
+				<th att-table-header sortable="true" key="label">Label</th>
+	            <th att-table-header sortable="true" key="ParentId">ParentId</th>
+	            <th att-table-header sortable="true" key="sortOrder">Sort Order</th>
+	            <th att-table-header sortable="true" key="action">Action</th>
+	            <th att-table-header sortable="true" key="functionCd">Function</th>
+	            <th att-table-header sortable="true" key="active">Active</th>
+	            <th att-table-header sortable="true" key="servlet">Servlet</th>
+	            <th att-table-header sortable="true" key="queryString">Query String</th>
+	            <th att-table-header sortable="true" key="externalUrl">External URL</th> 
+	            <th att-table-header sortable="true" key="target">Target</th>
+	            <th att-table-header sortable="true" key="menuSetCode">Menu Set Code</th>
+	            <th att-table-header sortable="true" key="separator">Separator</th>
+	            <th att-table-header sortable="true" key="imageSrc">Image Source</th>     
+
+	            <th att-table-header sortable="false"  key="edit">Edit</th>
+	            <th att-table-header sortable="false" key="delete">Delete</th>       
+		        </tr>
+			</thead>
+        <tbody att-table-row type="body" >
+            <tr>
+                <td id="att-scroll-table-content" att-scrollbar style="width: 86.5%;padding-right:1%;">
+                    <table att-table table-data="fnMenuItems" border="1" view-per-page="scrollViewsPerPage" current-page="currentPage" search-category="searchCategory" search-string="searchString" total-page="totalPage">
+                        <tbody att-table-row type="body" row-repeat="fnMenuItem in fnMenuItems | limitTo : numberOfRecordstoShow">
+                            <tr align="left">
+	                <td att-table-body width="1%" >{{ fnMenuItem.id }}</td>
+	                <td att-table-body width="3%" align="left" style="word-break:break-all;">{{ fnMenuItem.label }}</td>
+				    <td att-table-body width="1%" align="left">{{ fnMenuItem.parentId }}</td>
+				    <td att-table-body width="1%" align="left">{{ fnMenuItem.sortOrder }}</td>
+				    <td att-table-body width="3%" style="word-break:break-all;">{{ fnMenuItem.action }}</td>
+				    <td att-table-body width="1%" style="word-break:break-all;">{{ fnMenuItem.functionCd }}</td>
+				    <td att-table-body width="1%" style="word-break:break-all;" align="left">{{ fnMenuItem.active ? "Y" : "N"}}</td>
+				    <td att-table-body width="3%" style="word-break:break-all;" align="left">{{ fnMenuItem.servlet }}</td>
+				    <td att-table-body width="3%" style="word-break:break-all;" align="left">{{ fnMenuItem.queryString }}</td>
+				    <td att-table-body width="3%" style="word-break:break-all;" align="left">{{ fnMenuItem.externalUrl }}</td>
+				    <td att-table-body width="3%" style="word-break:break-all;" align="left">{{ fnMenuItem.target }}</td>
+				    <td att-table-body width="3%" style="word-break:break-all;" align="left">{{ fnMenuItem.menuSetCode }}</td>
+				    <td att-table-body width="3%" style="word-break:break-all;" align="left">{{ fnMenuItem.separator ? "Y" : "N"}}</td>
+				    <td att-table-body width="3%" style="word-break:break-all;" align="left">{{ fnMenuItem.imageSrc }}</td>
+					
+				    <td att-table-body width="1%" align="right">
+				    	<div ng-click="editMenuItemModalPopup(fnMenuItem);" style="font-size:20px;"><a href="javascript:void(0)" class="icon-edit"></a></div>
+				    </td>				
+					<td att-table-body width="1%" align="right">
+			    		<div ng-click="removeMenuItem(fnMenuItem);" style="font-size:20px;"><a href="javascript:void(0)" class="icon-trash"></a></div>
+			     	</td>
+
+                            </tr>
+                        </tbody>
+                    </table>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+
+ 
+
+<br><br><br><br><br><br><br><br><br><br><br><br>
+  
+-->
+	<div  id="menusTable" title="Menu Items">	
+		<table att-table table-data="fnMenuItems" view-per-page="viewPerPage" current-page="currentPage" search-category="searchCategory" search-string="searchString" total-page="totalPage">
+			<thead  att-table-row type="header">
+				<tr>
+				<th att-table-header sortable="true" key="id" default-sort="a">Menu ID</th>
+				<th att-table-header sortable="true" key="label">Label</th>
+	            <th att-table-header sortable="true" key="ParentId">ParentId</th>
+	            <th att-table-header sortable="true" key="sortOrder">Sort Order</th>
+	            <th att-table-header sortable="true" key="action">Action</th>
+	            <th att-table-header sortable="true" key="functionCd">Function</th>
+	            <th att-table-header sortable="true" key="active">Active</th>
+	            <th att-table-header sortable="true" key="servlet">Servlet</th>
+	            <th att-table-header sortable="true" key="queryString">Query String</th>
+	            <th att-table-header sortable="true" key="externalUrl">External URL</th> 
+	            <th att-table-header sortable="true" key="target">Target</th>
+	            <th att-table-header sortable="true" key="menuSetCode">Menu Set Code</th>
+	            <th att-table-header sortable="true" key="separator">Separator</th>
+	            <th att-table-header sortable="true" key="imageSrc">Image Source</th>     
+
+	            <th att-table-header sortable="false" key="edit">Edit</th>
+	            <th att-table-header sortable="false" key="delete">Delete</th>       
+		        </tr>
+			</thead>
+			<tbody att-table-row type="body" row-repeat="fnMenuItem in fnMenuItems | limitTo : numberOfRecordstoShow">
+				<tr>
+	                <td att-table-body width="1%" style="word-break:break-all;" ng-bind="fnMenuItem.id"></td>
+	                <td att-table-body width="3%" style="word-break:break-all;" ng-bind="fnMenuItem.label"></td>
+				    <td att-table-body width="1%" style="word-break:break-all;" ng-bind="fnMenuItem.parentId"></td>
+				    <td att-table-body width="1%" style="word-break:break-all;" ng-bind="fnMenuItem.sortOrder"></td>
+				    <td att-table-body width="3%" style="word-break:break-all;" ng-bind="fnMenuItem.action"></td>
+				    <td att-table-body width="1%" style="word-break:break-all;" ng-bind="fnMenuItem.functionCd"></td>
+				    <td att-table-body width="1%" style="word-break:break-all;" ng-bind="fnMenuItem.active ? 'Y' : 'N'"></td>
+				    <td att-table-body width="3%" style="word-break:break-all;" ng-bind="fnMenuItem.servlet"></td>
+				    <td att-table-body width="3%" style="word-break:break-all;" ng-bind="fnMenuItem.queryString"></td>
+				    <td att-table-body width="3%" style="word-break:break-all;" ng-bind="fnMenuItem.externalUrl"></td>
+				    <td att-table-body width="3%" style="word-break:break-all;" ng-bind="fnMenuItem.target"></td>
+				    <td att-table-body width="3%" style="word-break:break-all;" ng-bind="fnMenuItem.menuSetCode"></td>
+				    <td att-table-body width="3%" style="word-break:break-all;" ng-bind="fnMenuItem.separator ? 'Y' : 'N'"></td>
+				    <td att-table-body width="3%" style="word-break:break-all;" ng-bind="fnMenuItem.imageSrc"></td>
+					
+				    <td att-table-body width="1%">
+				    	<div ng-click="editMenuItemModalPopup(fnMenuItem);" style="font-size:20px;"><a href="javascript:void(0)" class="ion-edit"></a></div>
+				    </td>				
+					<td att-table-body width="1%">
+			    		<div ng-click="removeMenuItem(fnMenuItem);" style="font-size:20px;"><a href="javascript:void(0)" class="ion-trash-b"></a></div>
+			     	</td>	
+			    </tr>
+			</tbody>
+			
+		</table>
+	</div>	
+
+
+</div>
diff --git a/vid/src/main/webapp/app/fusion/scripts/view-models/profile-page/broadcast.html b/vid/src/main/webapp/app/fusion/scripts/view-models/profile-page/broadcast.html
new file mode 100644
index 00000000..a14da056
--- /dev/null
+++ b/vid/src/main/webapp/app/fusion/scripts/view-models/profile-page/broadcast.html
@@ -0,0 +1,61 @@
+<!--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  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 style="width:80%;margin-bottom:20px">
+		<br/>
+	      <h1 class="heading1">Broadcast Message Edit</h1>
+	    <br/>
+		
+		<div ng-controller="broadcastController" >    
+				 Please edit the broadcast message details below:&nbsp;<br><br>
+			<div class="fn-ebz-container" >
+			        <label class="fn-ebz-text-label"><sup><b>*</b></sup>Message Text:</label><BR>
+			        <textarea name="comment" ng-model="broadcastMessage.messageText" rows="5" cols="200" style="height:100px"></textarea>
+			</div>
+			<br>
+			<div class="fn-ebz-container" >
+			          <label class="fn-ebz-text-label"><sup><b>*</b></sup>Start Date:</label><BR>
+			          <input type="hidden" name="startDateHidden" ng-model="broadcastMessage.startDate">
+			          <input type="text" class="fn-ebz-text" id="startDatepicker" />
+			</div>
+			
+			<div class="fn-ebz-container" style="margin-left:3em" >
+			          <label class="fn-ebz-text-label"><sup><b>*</b></sup>End Date:</label><BR>
+			          <input type="hidden" name="endDateHidden" ng-model="broadcastMessage.endDate">
+			          <input type="text" class="fn-ebz-text" id="endDatepicker" />
+			</div>
+		
+			<div class="fn-ebz-container" style="margin-left:3em"  >
+				<label class="fn-ebz-text-label"><sup><b>*</b></sup>Sort Order:</label><BR>
+				<input type="text" class="fn-ebz-text" ng-model="broadcastMessage.sortOrder"
+					maxlength="30" /> 
+			</div>
+		 
+		        <div class="fn-ebz-container" style="margin-left:1em" >	
+						<label  class="fn-ebz-text-label">Server:</label><BR>
+						<div class="form-field" att-select="broadcastSites" ng-model="broadcastMessage.siteCd"></div>
+				</div>
+		          
+				<br>
+			<div align="left" >
+				<button type="submit" ng-click="save();" att-button	btn-type="primary" size="small">Save</button>
+				<button class="button button--information button--small" herf="javascript:void(0)" ng-click="close();">Cancel</button>
+			</div>
+		</div>
+</div>
diff --git a/vid/src/main/webapp/app/fusion/scripts/view-models/profile-page/broadcast_list.html b/vid/src/main/webapp/app/fusion/scripts/view-models/profile-page/broadcast_list.html
new file mode 100644
index 00000000..e9c4c291
--- /dev/null
+++ b/vid/src/main/webapp/app/fusion/scripts/view-models/profile-page/broadcast_list.html
@@ -0,0 +1,71 @@
+<!--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  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 style="width:80%;">
+    
+<div ng-controller="broadcastListController" > 	
+	
+	<h1 class="heading1">Broadcast Messages</h1>
+	<br>
+		<div ng-repeat="location in messageLocations" >
+			{{location.label}} Messages
+			<div title="{{location.label}} Messages">
+				
+			  	<table att-table table-data="location.messages" current-page="1">
+				  	<thead att-table-row type="header">
+				  		<tr>
+				  			<th att-table-header sortable="false" width="10%">No.</th>
+				  			<th att-table-header sortable="false" width="30%">Message Text</th>
+				  			<th att-table-header sortable="false" width="10%">Start Date</th>
+				  			<th att-table-header sortable="false" width="10%">End Date</th>
+				  			<th att-table-header sortable="false" width="10%">Sort Order</th>
+				  			<th att-table-header sortable="false" width="10%">Server</th>
+				  			<th att-table-header sortable="false" width="10%">Active?</th>
+				  			<th att-table-header sortable="false" width="10%">Delete?</th>
+				  		</tr>
+				  	</thead>
+				  	<tbody att-table-row type="body" row-repeat="message in location.messages" style="max-height: 980px;" ><!-- background colors will alternate not properly with multiple tbody-->
+					  <tr>
+					   {{message.id}}
+					    <td width="10%"><a href="javascript:editMessage({{location.value}},'{{location.label}}',{{message.id}});">{{$index+1}}</a></td>
+					    <td width="30%">{{message.messageText}}</td>
+					    <td width="10%">
+					    	{{message.displayStartDate}}
+					    </td>
+					    <td width="10%">{{message.displayEndDate}}</td>
+					    <td width="10%">{{message.sortOrder}}</td>
+					    <td width="10%">{{message.siteCd}}</td>
+					    <td width="10%">
+					    	<div ng-click="toggleActive(message);">
+					    		<input type="checkbox" ng-model="message.active" att-toggle-main ng-true-value="on" ng-false-value="off">
+					    	</div>
+					    </td>
+					     <td att-table-body width="10%">
+						    <div ng-click="remove(message);" style="font-size:20px;"><a href="javascript:void(0)" class="ion-trash-b"></a></div>
+					     </td>
+					  </tr>
+					 
+					</tbody>
+				</table>
+			</div>
+			<input att-button btn-type="primary" size="small" class="button" type="button" value="Add" ng-click="editMessage(location);"/>
+	  	  <br/><br/><br/>
+		</div>
+	</div>
+</div>
diff --git a/vid/src/main/webapp/app/fusion/scripts/view-models/profile-page/collaborate_list.html b/vid/src/main/webapp/app/fusion/scripts/view-models/profile-page/collaborate_list.html
new file mode 100644
index 00000000..5f07a47b
--- /dev/null
+++ b/vid/src/main/webapp/app/fusion/scripts/view-models/profile-page/collaborate_list.html
@@ -0,0 +1,57 @@
+<!--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  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 ng-controller="collaborateListController">
+	<div>
+		<h1 class="heading1" style="margin-top:20px;">User List</h1>
+		<div style="margin-top:30px">
+			<table att-table table-data="tableData" view-per-page="viewPerPage" current-page="currentPage" search-category="searchCategory" search-string="searchString" total-page="totalPage">
+
+			    <thead  att-table-row type="header">
+					<tr>
+						<th att-table-header key="id">User ID</th>
+			            <th att-table-header key="lastName">Last Name</th>        
+			            <th att-table-header key="firstName">First Name</th>    
+			            <th att-table-header key="email">Email</th>
+			            <th att-table-header key="orgUserId">User ID</th>        
+			            <th att-table-header key="online">Online/Offline</th>         
+			        </tr>
+			    </thead>
+			    <tbody att-table-row type="body" row-repeat="rowData in tableData">
+			        <tr>
+		            	<td att-table-body ng-bind="rowData['id']">{{rowData.id}}</td>
+		            	<td att-table-body ng-bind="rowData['lastName']">{{rowData.lastName}}</td>
+		            	<td att-table-body ng-bind="rowData['firstName']">{{rowData.firstName}}</td>
+		            	<td att-table-body ng-bind="rowData['email']">{{rowData.email}}</td>
+		            	<td att-table-body ng-bind="rowData['orgUserId']">{{rowData.orgUserId}}</td>
+		        		<td att-table-body >
+		        		   <tag-badges ng-hide="rowData.online" style-type="color" class="lred" ng-click="rowData.isActive=true;openCollaboration(rowData.chatId)">Offline</tag-badges>
+						   <tag-badges ng-show="rowData.online" style-type="color" class="lgreen" ng-click="rowData.isActive=false;openCollaboration(rowData.chatId)">Online</tag-badges>				
+		        	   </td>
+			        </tr>     
+			    </tbody>	  
+			</table>
+		</div>
+	</div>	
+	<input ng-model="currentPage"></input>
+	
+	<a href="JavaScript:void(0);" style= "color:#00547A" onClick="window.open('https://chrome.google.com/webstore/detail/icgmlogfeajbfdffajhoebcfbibfhaen')" id="install-button">
+		Add the Chrome Extension for DescktopCapture and refresh page</a>
+</div>
+<div id="peerBroadcastSection"></div>
diff --git a/vid/src/main/webapp/app/fusion/scripts/view-models/profile-page/jcs_admin.html b/vid/src/main/webapp/app/fusion/scripts/view-models/profile-page/jcs_admin.html
new file mode 100644
index 00000000..7da45780
--- /dev/null
+++ b/vid/src/main/webapp/app/fusion/scripts/view-models/profile-page/jcs_admin.html
@@ -0,0 +1,87 @@
+<!--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  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 ng-controller="cacheAdminController">
+	
+	<h1 class="heading1" >Cache Regions</h1>
+	<br/>
+  	<div style="margin-right:20px;text-align: justify;text-align-last:auto;">
+  	These are the regions which are currently defined in the cache. 'Items'	and 'Bytes' refer to the elements currently in memory (not spooled).
+  	You can clear all items for a region by clicking on the Clear icon next	to the desired region below. You can also <a href="#" ng-click="clearAll();">clear all regions</a> 
+  	which empties the entire cache.
+  	</div>
+	
+		<div style="width: 86%; border-top: 1px solid #c4c4c4; margin-top: 0px; margin-bottom:30px; margin-right: 20px; background-color: #fff; padding: 10px 0; color: #646464s">
+		<div style="margin: 0 20px 10px 0px; font-size: 80%; float: left; width: 97%;">
+			<div class="col-md-4"><b>Cache Name</b></div>
+			<div class="col-md-2"><b># of Items</b></div>
+			<div class="col-md-2"><b>Bytes</b></div>
+			<div class="col-md-2"><b>Status</b></div>
+			<div class="col-md-3"><b>Memory Hits</b></div>
+			<div class="col-md-3"><b>Aux Hits</b></div>
+			<div class="col-md-3"><b>Not Found Misses</b></div>
+			<div class="col-md-3"><b>Expired Misses</b></div>
+			<div class="col-md-1"><b>Clear?</b></div>
+			<div class="col-md-1"><b>Items</b></div>
+		</div>
+		<div ng-repeat="region in regions">
+			<div style="margin: 0 20px 10px 0px; font-size: 80%; float: left; width: 97%;">
+				<div class="col-md-4"><a href="#" tooltip="Click to Show Region Details" ng-click="showRegionDetails(region.cacheName);">{{region.cacheName}}</a></div>
+				<div class="col-md-2">{{region.size}}</div>
+				<div class="col-md-2">{{region.byteCount}}</div>
+				<div class="col-md-2">{{region.status}}</div>
+				<div class="col-md-3">{{region.hitCountRam}}</div>
+				<div class="col-md-3">{{region.hitCountAux}}</div>
+				<div class="col-md-3">{{region.missCountNotFound}}</div>
+				<div class="col-md-3">{{region.missCountExpired}}</div>
+				<div class="col-md-1">
+					<div ng-click="clearRegion(region.cacheName);" style="font-size:20px;"><a href="javascript:void(0)" class="ion-trash-b"></a></div>
+				</div>
+				<div class="col-md-1">
+					<span class="ion-plus-circled col-md-1" ng-class="{minus: bling$index}" ng-hide="plusSign" ng-click="bling$index = !bling$index; plusSign=true" style="display: block;"></span>
+					<span class="ion-minus-circled col-md-1" ng-class="{minus: bling$index}" ng-show="plusSign" ng-click="bling$index = !bling$index; plusSign=false" style="display: block;"></span>
+				</div>
+			</div>
+			<div style="margin: 0px 20px 0px 30px; font-size: 80%; float: left; width: 95%; border-top: 1px solid #e4e4e4; padding-top: 10px"
+				ng-show="bling$index">
+				<span class="att--tree__arrow" style="height: 20px; width: 20px; display: inline-block; float: left"></span>
+				<div class="col-md-12"><b>Key</b></div>
+				<div class="col-md-2"><b>Eternal?</b></div>
+				<div class="col-md-4"><b>Created</b></div>
+				<div class="col-md-2"><b>Max Life</b></div>
+				<div class="col-md-2"><b>Expires</b></div>
+				<div class="col-md-1"><b>Clear?</b></div>
+			</div>
+			<div ng-repeat="item in region.items">
+				<div style="margin: 0px 20px 0px 30px; font-size: 80%; float: left; width: 95%;" ng-show="bling$index">
+					<span class="att--tree__arrow" style="height: 20px; width: 20px; display: inline-block; float: left"></span>
+					<div class="col-md-12"><a href="#" tooltip="Click to Show Item Details" ng-click="showItemDetails(region.cacheName,item.key);">{{item.key}}</a></div>
+					<div class="col-md-2">{{item.eternal}}</div>
+					<div class="col-md-4">{{item.createTime}}</div>
+					<div class="col-md-2">{{item.maxLifeSeconds}}</div>
+					<div class="col-md-2">{{item.expiresInSeconds}}</div>
+					<div class="col-md-1">
+						<div ng-click="clearItem(region.cacheName,item.key);" style="font-size:20px;"><a href="javascript:void(0)" class=""></a></div>
+					</div>
+				</div>
+			</div>
+			<div style="clear: both"></div>
+		</div>
+	</div>
+</div>
diff --git a/vid/src/main/webapp/app/fusion/scripts/view-models/profile-page/popup_modal.html b/vid/src/main/webapp/app/fusion/scripts/view-models/profile-page/popup_modal.html
new file mode 100644
index 00000000..3cde902c
--- /dev/null
+++ b/vid/src/main/webapp/app/fusion/scripts/view-models/profile-page/popup_modal.html
@@ -0,0 +1,282 @@
+<!--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  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.
+  ================================================================================
+  -->
+<script type="text/ng-template" id="modal_informative.html">
+       <div class="modal__informative font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name">Success!</h2>
+                <div class="modal__header--icon"></div>
+            </div>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content" style="white-space: pre-wrap;">{{message.text}}</div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$dismiss()">Dismiss</button>
+            </div>
+        </div>
+    </script>
+   
+   
+    <script type="text/ng-template" id="delete_informative.html">
+   <div class="modal__warning font-showcase">
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name">Are you sure you want to delete the profile?</h2>
+				
+                <div class="modal__header--icon"></div>
+            </div>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content">
+              Deletions are not reversible.<br/> {{message.text}}
+            </div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$close()">Yes</button>
+				<button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$dismiss()">Cancel</button>
+            </div>
+        </div>
+    </script>
+   <script type="text/ng-template" id="email_report_informative.html">
+   <div class="modal__warning font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name">Mailing your report...</h2>
+				
+                <div class="modal__header--icon"></div>
+            </div>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content">
+              The report will be sent to your email soon!
+            </div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$close()">Ok</button>
+            </div>
+        </div>
+    </script>
+    <script type="text/ng-template" id="delete_authCode.html">
+   <div class="modal__warning font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name">Are you sure you want to delete the Authorization Code(s)?</h2>
+				
+                <div class="modal__header--icon"></div>
+            </div>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content">
+              Deletions are not reversible.<br/> {{message.text}}
+            </div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$close()">Yes</button>
+				<button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$dismiss()">Cancel</button>
+            </div>
+        </div>
+    </script>
+     <script type="text/ng-template" id="delete_Schedule.html">
+   		<div class="modal__warning font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name">Are You Sure You Want to Delete This Schedule(s) ?</h2>
+				
+                <div class="modal__header--icon"></div>
+            </div>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content">
+              Deletions are not reversible.<br/> {{message.text}}
+            </div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$close()">Yes</button>
+				<button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$dismiss()">Cancel</button>
+            </div>
+        </div>
+    </script>
+    <script type="text/ng-template" id="alternate_number.html">
+   		<div class="modal__warning font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name">Are You Sure You Want to Delete This Number ?</h2>
+				
+                <div class="modal__header--icon"></div>
+            </div>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content">
+              Deletions are not reversible.<br/> {{message.text}}
+            </div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$close()">Yes</button>
+				<button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$dismiss()">Cancel</button>
+            </div>
+        </div>
+    </script>
+     <script type="text/ng-template" id="manage_device.html">
+   		<div class="modal__warning font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name">Are You Sure You Want to Delete This Line Port ?</h2>
+				
+                <div class="modal__header--icon"></div>
+            </div>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content">
+              Deletions are not reversible.<br/> {{message.text}}
+            </div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$close()">Yes</button>
+				<button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$dismiss()">Cancel</button>
+            </div>
+        </div>
+    </script>
+    <script type="text/ng-template" id="delete_virtualOnNet.html">
+  		 <div class="modal__warning font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name">Are You Sure You Want to Delete this Virtual On-Net User?</h2>
+				
+                <div class="modal__header--icon"></div>
+            </div>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content">
+              Deletions are not reversible.<br/> {{message.text}}
+            </div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$close()">Yes</button>
+				<button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$dismiss()">Cancel</button>
+            </div>
+        </div>
+    </script>
+    <script type="text/ng-template" id="delete_user_meet_me_conference.html">
+   		<div class="modal__warning font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name">Are You Sure You Want to Delete this Conference?</h2>
+				
+                <div class="modal__header--icon"></div>
+            </div>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content">
+              Deletions are not reversible.<br/> {{message.text}}
+            </div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$close()">Yes</button>
+				<button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$dismiss()">Cancel</button>
+            </div>
+        </div>
+    </script>
+    <script type="text/ng-template" id="confirmation_informative.html">
+   		<div class="modal__warning font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name">{{message.title}}</h2>
+				
+                <div class="modal__header--icon"></div>
+            </div>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content" style="white-space: pre-wrap;">{{message.text}}<br/></div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$close()">Yes</button>
+				<button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$dismiss()">Cancel</button>
+            </div> 
+        </div>
+    </script>
+   
+    <script type="text/ng-template" id="confirmation_for_delete.html">
+   		<div class="modal__warning font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name"> <h2 class="font-showcase-font-name">Are You Sure You Want to Delete This {{message.title}}?</h2>
+				
+                <div class="modal__header--icon"></div>
+            </div>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content">Deletions are not reversible. {{message.text}}<br/></div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$close()">Yes</button>
+				<button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$dismiss()">Cancel</button>
+            </div> 
+        </div>
+    </script>
+   
+   <script type="text/ng-template" id="modal_warning.html">
+   <div class="modal__warning font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name">Unable to process your request!</h2>
+				
+                <div class="modal__header--icon"></div>
+            </div>
+            <div class="divider-container"><hr> </div>      
+			<div class="modal__content" style="white-space: pre-wrap;">Unable to process your request.   <br/>{{message.text}}<br/>
+            </div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$dismiss()">Dismiss</button>
+            </div>
+        </div>
+    </script>
+    
+    <script type="text/ng-template" id="modal_warning_message.html">
+   <div class="modal__warning font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name">Warning</h2>
+				
+                <div class="modal__header--icon"></div>
+            </div>
+            <div class="divider-container"><hr> </div>      
+			<div class="modal__content" style="white-space: pre-wrap;">{{message.text}}<br/>
+            </div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$dismiss()">Dismiss</button>
+            </div>
+        </div>
+    </script>
+
+
+    
+    <script type="text/ng-template" id="modal_prompt.html">
+       <div class="modal__warning font-showcase">
+          <div class="modal__header">
+              <h2 class="font-showcase-font-name">Unable to process your request. </h2>
+              <i class="icon-circle-action-close close-modal modal__header--close"  ng-click="$dismiss()"></i>
+              
+          </div>
+          <div class="divider-container"><hr> </div>      
+          <div class="modal__content">
+              Unable to process your request.   <br/> {{message.text}}
+          </div>
+   </div>
+    </script>
+     <script type="text/ng-template" id="delete_device.html">
+        <div class="modal__warning font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name">Are You Sure You Want to Delete This Device?</h2>
+				
+                <div class="modal__header--icon"></div>
+            </div>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content">
+              Deletions are not reversible.<br/> {{message.text}}
+            </div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$close()">Yes</button>
+				<button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$dismiss()">Cancel</button>
+            </div>
+        </div>
+    </script>
+     <script type="text/ng-template" id="delete_multiple_device.html">
+        <div class="modal__warning font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name">Are You Sure You Want to Delete The Device(s)?</h2>
+				
+                <div class="modal__header--icon"></div>
+            </div>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content">
+              Deletions are not reversible.<br/> {{message.text}}
+            </div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$close()">Yes</button>
+				<button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$dismiss()">Cancel</button>
+            </div>
+        </div>
+    </script>
diff --git a/vid/src/main/webapp/app/fusion/scripts/view-models/profile-page/popup_modal_fn_menu_add.html b/vid/src/main/webapp/app/fusion/scripts/view-models/profile-page/popup_modal_fn_menu_add.html
new file mode 100644
index 00000000..760f10b5
--- /dev/null
+++ b/vid/src/main/webapp/app/fusion/scripts/view-models/profile-page/popup_modal_fn_menu_add.html
@@ -0,0 +1,155 @@
+<!--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  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.
+  ================================================================================
+  -->
+<script type="text/ng-template" id="fn_menu_add_popup.html">
+          <div class="modal__informative font-showcase" style="width:1100px;">
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name" style="width: 500px;">{{label}}</h2>
+            </div>
+            <div class="divider-container"><hr> </div>
+		      
+            <div class="modal__content" > 
+				<table>
+					<tr>
+						<td>
+							<div class="fn-ebz-container" >
+								<label class="fn-ebz-text-label"><sup><b>*</b></sup>Label:</label><br>
+								<input id="popupAddMenuItemLabel" type="text" class="fn-ebz-text" ng-model="addFnMenuItem.label" maxlength="30" /> 
+							</div>
+						</td>
+						<td>
+							<div class="fn-ebz-container" style = "display:none" >
+								<label class="fn-ebz-text-label"><sup><b>*</b></sup>Parent:</label><br>
+								<input id="popupAddMenuItemParentId" type="text" class="fn-ebz-text" ng-model="addFnMenuItem.parentId" ng-disabled="disableParentId" maxlength="30" /> 
+							</div>
+							<div class="fn-ebz-container" ng-init="getParentData();">
+  								<form name="parentListForm">
+    							<label class="fn-ebz-text-label" for="parentSelect"><sup><b>*</b></sup>Parent:</label><br>
+								<select name="select_projects" id="select_projects" ng-model="addFnMenuItem.parentId">
+									<optgroup label="" ng-repeat="header in childListSelectData">
+										<option label="{{header.label}}" value="{{header.menuId}}" style="color:black;font-weight:bold;">{{header.label}}</option>	
+        									<option  ng-repeat="child in header.children" value="{{child.menuId}}" "{{(addFnMenuItem.parentId===child.menuId) ? 'selected' : '' }}">{{child.label}}</option>
+									</optgroup>
+								</select>
+								<!--
+    							<select class="form-field" name="parentSelect" id="parentSelect" ng-model="addFnMenuItem.parentId">
+								<option>{{getParentLabel(addFnMenuItem.parentId, parentListSelectData)}}</option>
+      							<option ng-repeat="option in parentListSelectData" value="{{option[0]}}" "{{(addFnMenuItem.parentId===option[0]) ? 'selected' : '' }}">{{option[1]}}</option>
+    							</select>
+								-->
+  								</form>
+							</div>
+						</td>
+						<td>
+							<div class="fn-ebz-container" >
+								<label class="fn-ebz-text-label"><sup><b>*</b></sup>Sort Order:</label><br>
+								<input id="popupAddMenuItemSortOrder" type="text" class="fn-ebz-text" ng-model="addFnMenuItem.sortOrder" ng-disabled="disableSortOrder"	maxlength="30" /> 
+							</div>
+						</td>
+						<td>
+							<div class="fn-ebz-container" >
+								<label class="fn-ebz-text-label"><sup><b>*</b></sup>Action:</label><br>
+								<input id="popupAddMenuItemAction" type="text" class="fn-ebz-text" ng-model="addFnMenuItem.action" ng-disabled="disableAction" maxlength="200" /> 
+					        </div>
+						</td>		
+					</tr>
+					
+					<tr>
+						<td>
+							<div class="fn-ebz-container" ng-init="getFunctionCDselectData();">
+  								<form name="functionCDform">
+    							<label class="fn-ebz-text-label" for="repeatSelect"><sup><b>*</b></sup>Function:</label><br>
+    							<select class="form-field" name="repeatSelect" id="repeatSelect" ng-model="addFnMenuItem.functionCd">
+								<option>{{addFnMenuItem.functionCd}}</option>
+      							<option ng-repeat="option in functionCDselectData" value="{{option}}" >{{option}}</option>
+    							</select>
+  								</form>
+							</div>
+						</td>
+						<td>
+						<div class="fn-ebz-container">
+								<label class="fn-ebz-text-label"><sup><b>*</b></sup>Active:</label><br>
+								<select class="form-field" name="selectActive" ng-model="addFnMenuItem.active">
+  								<option ng-repeat="active in activeStatusOptions" value="{{active.value}}" ng-selected="{{active.value}}=={{addFnMenuItem.active}}" >{{active.title}}</option>
+								</select>
+							</div>
+						</td>
+						<td>
+							<div class="fn-ebz-container" >
+								<label class="fn-ebz-text-label"><sup><b></b></sup>Servlet:</label><br>
+								<input id="popupAddMenuItemServlet" type="text" class="fn-ebz-text" ng-model="addFnMenuItem.servlet" ng-disabled="disableServlet" maxlength="30" /> 
+							</div>
+						</td>
+						<td>
+							<div class="fn-ebz-container" >
+								<label class="fn-ebz-text-label"><sup><b></b></sup>Query String:</label><br>
+								<input id="popupAddMenuItemQueryString" type="text" class="fn-ebz-text" ng-model="addFnMenuItem.queryString" ng-disabled="disableQueryString" maxlength="30" /> 
+							</div>
+						</td>
+					</tr>
+					
+					<tr>
+						<td>
+							<div class="fn-ebz-container" >
+								<label class="fn-ebz-text-label"><sup><b></b></sup>External URL:</label><br>
+								<input id="popupAddMenuItemExternalUrl" type="text" class="fn-ebz-text" ng-model="addFnMenuItem.externalUrl" ng-disabled="disableExternalUrl" maxlength="30" /> 
+							</div>
+						</td>
+						<td>
+							<div class="fn-ebz-container" >
+								<label class="fn-ebz-text-label"><sup><b></b></sup>Target:</label><br>
+								<input id="popupAddMenuItemTarget" type="text" class="fn-ebz-text" ng-model="addFnMenuItem.target" ng-disabled="disableTarget" maxlength="30" /> 
+							</div>
+						</td>
+						<td>
+							<div class="fn-ebz-container" >
+								<label class="fn-ebz-text-label"><sup><b>*</b></sup>Menu Set Code:</label><br>
+								<input id="popupAddMenuItemMenuSetCode" type="text" class="fn-ebz-text" ng-model="addFnMenuItem.menuSetCode" ng-disabled="disableMenuSetCode" maxlength="30" /> 
+							</div>
+						</td>
+						<td>
+							<div class="fn-ebz-container" >
+								<label class="fn-ebz-text-label"><sup><b>*</b></sup>Separator:</label><br>
+								<select class="form-field" name="select" ng-model="addFnMenuItem.separator">
+  								<option ng-repeat="separator in separatorStatusOptions" value="{{separator.value}}" ng-selected="{{separator.value}}=={{addFnMenuItem.separator}}" >{{separator.title}}</option>
+								</select>
+							</div>
+						</td>
+					</tr>
+					
+					<tr>
+						<td>
+							<div class="fn-ebz-container" >
+								<label class="fn-ebz-text-label"><sup><b></b></sup>Image Source:</label><br>
+								<input id="popupAddMenuItemImageSrc" type="text" class="fn-ebz-text" ng-model="addFnMenuItem.imageSrc" ng-disabled="disableImageSrc" maxlength="30" /> 
+							</div>
+						</td>
+					</tr>
+				</table>
+            </div>
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="updateFnMenu(addFnMenuItem);">Save</button>
+				<button class="button button--primary button--small" herf="javascript:void(0)" ng-click="close()">Close</button>
+			<!--
+            <div class="modal__footer">
+            </div>
+			-->
+        </div>
+</script>
+
+
diff --git a/vid/src/main/webapp/app/fusion/scripts/view-models/profile-page/popup_modal_fn_menu_edit.html b/vid/src/main/webapp/app/fusion/scripts/view-models/profile-page/popup_modal_fn_menu_edit.html
new file mode 100644
index 00000000..4c23ba6f
--- /dev/null
+++ b/vid/src/main/webapp/app/fusion/scripts/view-models/profile-page/popup_modal_fn_menu_edit.html
@@ -0,0 +1,148 @@
+<!--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  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.
+  ================================================================================
+  -->
+<script type="text/ng-template" id="edit_menu_item_popup.html">
+
+          <div class="modal__informative font-showcase" style="width:1100px;">
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name" style="width: 500px;">{{label}}</h2>
+            </div>
+            <div class="divider-container"><hr> </div>
+			      
+            <div class="modal__content" > 
+				<table>
+					<tr>
+						<td>
+							<div class="fn-ebz-container" >
+								<label class="fn-ebz-text-label"><sup><b>*</b></sup>Label:</label><br>
+								<input id="popupAddMenuItemLabel" type="text" class="fn-ebz-text" ng-model="addFnMenuItem.label" maxlength="30" /> 
+							</div>
+						</td>
+						<td>
+							<div class="fn-ebz-container" style = "display:none" >
+								<label class="fn-ebz-text-label"><sup><b>*</b></sup>Parent:</label><br>
+								<input id="popupAddMenuItemParentId" type="text" class="fn-ebz-text" ng-model="addFnMenuItem.parentId" ng-disabled="disableParentId" maxlength="30" /> 
+							</div>
+							<div class="fn-ebz-container" ng-init="getParentData();">
+  								<form name="parentListForm">
+    							<label class="fn-ebz-text-label" for="parentSelect"><sup><b>*</b></sup>Parent:</label><br>
+    							<select class="form-field" name="parentSelect" id="parentSelect" ng-model="addFnMenuItem.parentId">
+								<option>{{getParentLabel(addFnMenuItem.parentId, parentListSelectData)}}</option>
+      							<option ng-repeat="option in parentListSelectData" value="{{option[0]}}" "{{(addFnMenuItem.parentId===option[0]) ? 'selected' : '' }}">{{option[1]}}</option>
+    							</select>
+  								</form>
+							</div>
+						</td>
+						<td>
+							<div class="fn-ebz-container" >
+								<label class="fn-ebz-text-label"><sup><b>*</b></sup>Sort Order:</label><br>
+								<input id="popupAddMenuItemSortOrder" type="text" class="fn-ebz-text" ng-model="addFnMenuItem.sortOrder" ng-disabled="disableSortOrder"	maxlength="30" /> 
+							</div>
+						</td>
+						<td>
+							<div class="fn-ebz-container" >
+								<label class="fn-ebz-text-label"><sup><b>*</b></sup>Action:</label><br>
+								<input id="popupAddMenuItemAction" type="text" class="fn-ebz-text" ng-model="addFnMenuItem.action" ng-disabled="disableAction" maxlength="30" /> 
+					        </div>
+						</td>		
+					</tr>
+					
+					<tr>
+						<td>
+							<div class="fn-ebz-container" ng-init="getFunctionCDselectData();">
+  								<form name="functionCDform">
+    							<label class="fn-ebz-text-label" for="repeatSelect"><sup><b>*</b></sup>Function:</label><br>
+    							<select class="form-field" name="repeatSelect" id="repeatSelect" ng-model="addFnMenuItem.functionCd">
+								<option>{{addFnMenuItem.functionCd}}</option>
+      							<option ng-repeat="option in functionCDselectData" value="{{option}}" >{{option}}</option>
+    							</select>
+  								</form>
+							</div>
+						</td>
+						<td>
+						<div class="fn-ebz-container">
+								<label class="fn-ebz-text-label"><sup><b>*</b></sup>Active:</label><br>
+								<select class="form-field" name="selectActive" ng-model="addFnMenuItem.active">
+  								<option ng-repeat="active in activeStatusOptions" value="{{active.value}}" ng-selected="{{active.value}}=={{addFnMenuItem.active}}" >{{active.title}}</option>
+								</select>
+							</div>
+						</td>
+						<td>
+							<div class="fn-ebz-container" >
+								<label class="fn-ebz-text-label"><sup><b></b></sup>Servlet:</label><br>
+								<input id="popupAddMenuItemServlet" type="text" class="fn-ebz-text" ng-model="addFnMenuItem.servlet" ng-disabled="disableServlet" maxlength="30" /> 
+							</div>
+						</td>
+						<td>
+							<div class="fn-ebz-container" >
+								<label class="fn-ebz-text-label"><sup><b></b></sup>Query String:</label><br>
+								<input id="popupAddMenuItemQueryString" type="text" class="fn-ebz-text" ng-model="addFnMenuItem.queryString" ng-disabled="disableQueryString" maxlength="30" /> 
+							</div>
+						</td>
+					</tr>
+					
+					<tr>
+						<td>
+							<div class="fn-ebz-container" >
+								<label class="fn-ebz-text-label"><sup><b></b></sup>External URL:</label><br>
+								<input id="popupAddMenuItemExternalUrl" type="text" class="fn-ebz-text" ng-model="addFnMenuItem.externalUrl" ng-disabled="disableExternalUrl" maxlength="30" /> 
+							</div>
+						</td>
+						<td>
+							<div class="fn-ebz-container" >
+								<label class="fn-ebz-text-label"><sup><b></b></sup>Target:</label><br>
+								<input id="popupAddMenuItemTarget" type="text" class="fn-ebz-text" ng-model="addFnMenuItem.target" ng-disabled="disableTarget" maxlength="30" /> 
+							</div>
+						</td>
+						<td>
+							<div class="fn-ebz-container" >
+								<label class="fn-ebz-text-label"><sup><b>*</b></sup>Menu Set Code:</label><br>
+								<input id="popupAddMenuItemMenuSetCode" type="text" class="fn-ebz-text" ng-model="addFnMenuItem.menuSetCode" ng-disabled="disableMenuSetCode" maxlength="30" /> 
+							</div>
+						</td>
+						<td>
+							<div class="fn-ebz-container" >
+								<label class="fn-ebz-text-label"><sup><b>*</b></sup>Separator:</label><br>
+								<select class="form-field" name="select" ng-model="addFnMenuItem.separator">
+  								<option ng-repeat="separator in separatorStatusOptions" value="{{separator.value}}" ng-selected="{{separator.value}}=={{addFnMenuItem.separator}}" >{{separator.title}}</option>
+								</select>
+							</div>
+						</td>
+					</tr>
+					
+					<tr>
+						<td>
+							<div class="fn-ebz-container" >
+								<label class="fn-ebz-text-label"><sup><b></b></sup>Image Source:</label><br>
+								<input id="popupAddMenuItemImageSrc" type="text" class="fn-ebz-text" ng-model="addFnMenuItem.imageSrc" ng-disabled="disableImageSrc" maxlength="30" /> 
+							</div>
+						</td>
+					</tr>
+				</table>
+            </div>
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="updateFnMenu(addFnMenuItem);">Save</button>
+				<button class="button button--primary button--small" herf="javascript:void(0)" ng-click="close()">Close</button>
+			<!--
+            <div class="modal__footer">
+            </div>
+			-->
+        </div>
+</script>
+
+
diff --git a/vid/src/main/webapp/app/fusion/scripts/view-models/profile-page/popup_modal_role.html b/vid/src/main/webapp/app/fusion/scripts/view-models/profile-page/popup_modal_role.html
new file mode 100644
index 00000000..4663bd46
--- /dev/null
+++ b/vid/src/main/webapp/app/fusion/scripts/view-models/profile-page/popup_modal_role.html
@@ -0,0 +1,82 @@
+<!--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  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.
+  ================================================================================
+  -->
+
+<script type="text/ng-template" id="role_functions_popup.html">
+          <div class="modal__informative font-showcase" style="width:700px;height:500px;overflow:scroll">
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name" style="width: 500px;">Select Role Functions</h2>
+            </div>
+            <button align="right" class="button button--primary button--small" herf="javascript:void(0)" ng-click="close()">Close</button>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content">           	 	
+				<table table-data="availableRoleFunctions" att-table>
+					<thead att-table-row type="header">
+						<tr>
+							<th att-table-header sortable="false" width="10%"> </th>
+							<th att-table-header sortable="false" width="90%">Role Function</th>
+						</tr>
+					</thead>
+					<tbody att-table-row type="body" row-repeat="availableRoleFunction in availableRoleFunctions" style="max-height: 980px;" >
+					  <tr>
+					  
+						<td width="10%">
+							<div ng-click="toggleRoleFunction(availableRoleFunction.selected,availableRoleFunction);">
+							<input type="checkbox" ng-model="availableRoleFunction.selected" att-toggle-main>
+							</div>
+						</td>
+						<td width="90%">{{ availableRoleFunction.name }}</td>
+						
+					  </tr>
+					</tbody>
+				</table>	
+            </div>
+        </div>
+</script>
+
+
+<script type="text/ng-template" id="child_roles_popup.html">
+          <div class="modal__informative font-showcase" style="width:700px;height:500px;overflow:scroll">
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name" style="width: 500px;">Select Child Roles</h2>
+            </div>
+            <button align="right" class="button button--primary button--small" herf="javascript:void(0)" ng-click="close()">Close</button>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content">           	 	
+					<table table-data="availableRoles" att-table>
+						<thead att-table-row type="header">
+							<tr>
+								<th att-table-header sortable="false" width="10%"> </th>
+								<th att-table-header sortable="false" width="90%">Role</th>
+							</tr>
+						</thead>
+						<tbody att-table-row type="body" row-repeat="availableRole in availableRoles" style="max-height: 980px;" >
+							<tr>
+							<td att-table-body width="10%">
+								<div ng-click="toggleChildRole(availableRole.selected,availableRole);">
+								<input type="checkbox" ng-model="availableRole.selected" att-toggle-main>
+								</div>
+							</td>
+							<td att-table-body width="90%">{{ availableRole.name }}</td>
+							</tr>
+						</tbody>
+					</table>	
+            </div>
+        </div>
+</script>
diff --git a/vid/src/main/webapp/app/fusion/scripts/view-models/profile-page/popup_modal_rolefunction.html b/vid/src/main/webapp/app/fusion/scripts/view-models/profile-page/popup_modal_rolefunction.html
new file mode 100644
index 00000000..b9e8ef0e
--- /dev/null
+++ b/vid/src/main/webapp/app/fusion/scripts/view-models/profile-page/popup_modal_rolefunction.html
@@ -0,0 +1,46 @@
+<!--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  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.
+  ================================================================================
+  -->
+<script type="text/ng-template" id="edit_role_function_popup.html">
+          <div class="modal__informative font-showcase" style="width:400px;">
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name" style="width: 500px;">{{label}}</h2>
+            </div>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content">           	 	
+					<div class="fn-ebz-container" >
+					<label class="fn-ebz-text-label"><sup><b>*</b></sup>Name:</label><br>
+					<input type="text" class="fn-ebz-text" ng-model="editRoleFunction.name"
+						maxlength="30" /> 
+					</div>
+					<br/>
+					<div class="fn-ebz-container" >
+					<label class="fn-ebz-text-label"><sup><b>*</b></sup>Code:</label><br>
+					<input type="text" class="fn-ebz-text" ng-model="editRoleFunction.code" ng-disabled="disableCd"
+						maxlength="30" /> 
+					</div>
+            </div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="saveRoleFunction(editRoleFunction);">Save</button>
+				<button class="button button--primary button--small" herf="javascript:void(0)" ng-click="close()">Close</button>
+            </div>
+        </div>
+</script>
+
+
diff --git a/vid/src/main/webapp/app/fusion/scripts/view-models/profile-page/post_search.html b/vid/src/main/webapp/app/fusion/scripts/view-models/profile-page/post_search.html
new file mode 100644
index 00000000..2c4846dd
--- /dev/null
+++ b/vid/src/main/webapp/app/fusion/scripts/view-models/profile-page/post_search.html
@@ -0,0 +1,139 @@
+<!--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  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 style="margin-bottom:20px;">
+<h1 class="heading1">User Search</h1>
+      <br>
+  		Please enter search criteria below:<br/>
+
+            <div class="fn-ebz-container">
+	          Last Name:<br/>
+	          <input class="fn-ebz-text" type="text"   ng-model="postSearchBean.lastName" value="" size="25">
+            </div>
+          
+            <div class="fn-ebz-container">
+	          First Name:<br/>
+	          <input class="fn-ebz-text" type="text" ng-model="postSearchBean.firstName" value="" size="25">
+            </div>
+         
+            <div class="fn-ebz-container">
+	          User ID:<br/>
+	          <input class="fn-ebz-text" type="text" ng-model="postSearchBean.orgUserId" value="" size="25">
+            </div>
+           
+            <div class="fn-ebz-container">
+	          Manager User ID:<br/>
+	          <input class="fn-ebz-text" type="text" ng-model="postSearchBean.orgManagerUserId" value="" size="25">
+            </div>
+           <br>
+            <div class="fn-ebz-container">
+	          Organization:<br/>
+	          <input class="fn-ebz-text" type="text" ng-model="postSearchBean.orgCode" value="" size="25">
+            </div>
+           
+            <div class="fn-ebz-container">
+	          Email:<br/>
+	          <input class="fn-ebz-text" type="text" ng-model="postSearchBean.email" value="" size="25">
+            </div>
+     <br>
+     <div>
+		 	<input att-button btn-type="primary" size="small" class="button" type="submit" value="Search" ng-click="search(postSearchBean);" />
+		
+		    <input att-button btn-type="primary" size="small" class="button" type="submit" value="Reset"  ng-click="reset();"/>
+	 </div>
+	 <br>
+	 
+		{{noResultsString}}
+     
+     <div ng-if="profileList.length != 0">
+  	    <table att-table table-data="profileList" view-per-page="viewPerPage" current-page="currentPage" search-category="searchCategory" search-string="searchString" total-page="totalPage">
+		  <thead att-table-row type="header" >
+		    <tr>
+  			<th att-table-header  width="5%" align="left">No</th>
+  			<th att-table-header  width="30%" key="lastName" align="left">Name</th>
+  			<th att-table-header  width="5%"  key="orgUserId" align="left">OrgUserId</th>
+  			<th att-table-header  width="10%" key="orgCode" align="left">Organization</th>
+  			<th att-table-header  width="20%" align="left">Phone</th>
+  			<th att-table-header  width="20%" key="email" align="left">Email</th>
+  			<th att-table-header  width="10%" align="left">Import?</th>
+  			</tr>
+		  </thead>
+         	
+            <tbody att-table-row type="body" row-repeat="profile in profileList" style="max-height: 980px;" ><!-- background colors will alternate not properly with multiple tbody-->	
+              <tr >
+              	<td att-table-body width="5%" align="left">
+                {{$index + 1}}
+                </td>
+            	<td att-table-body width="30%" align="left">                	
+	              <div ng-if="ngexistingUsers[profile.orgUserId] == null">
+        	          {{profile.lastName}},&nbsp;{{profile.firstName}}
+            	  </div>
+	              <div ng-if="ngexistingUsers[profile.orgUserId] != null">
+    	              <a href="profile.htm?profile_id={{ngexistingUsers[profile.orgUserId]}}" alt="View/Edit Profile">
+                  	  {{profile.lastName}},&nbsp;{{profile.firstName}}
+	                  </a>
+            	   </div>
+               
+                </td>
+            	<td att-table-body width="5%" align="left">
+                {{profile.orgUserId}}
+                </td>
+            	<td att-table-body width="10%" align="left">
+                {{profile.orgCode}}
+                </td>
+            	<td att-table-body width="20%" align="left">
+                {{profile.phone}}
+                </td>
+            	<td att-table-body width="20%" align="left">
+                {{profile.email}}
+                </td>
+                
+            	<td att-table-body width="10%" align="left">
+		            <div ng-if="ngexistingUsers[profile.orgUserId] == null">
+		            	<div ng-click="toggleSelection(profile);">
+		                <input name="selected" type="checkbox" ng-model="profile.selected" att-checkbox/>
+		                </div>
+		             </div>
+		             <div ng-if="ngexistingUsers[profile.orgUserId] != null">
+		                Exists
+		             </div>
+                </td>
+              </tr>
+              </tbody>
+	    </table>
+	    <div class="fn-ebz-container">
+	          Rows Per Page:
+	          <input class="fn-ebz-text" type="text" ng-model="viewPerPage" size="5" style="width: 47px;">
+        </div>
+		<div class="fn-ebz-container">
+	          Current Page:
+	          <input class="fn-ebz-text" type="text" ng-model="currentPage" size="5" style="width: 47px;">
+        </div>
+        <div class="fn-ebz-container">
+	          Total Page(s):
+	          <input class="fn-ebz-text" type="text" ng-model="totalPage" size="5" readonly="true" style="width: 47px;">
+        </div>
+		
+        <div ng-if="profileList.length != 0">
+          <input att-button btn-type="primary" size="small" class="button" type="submit" value="Import" ng-click="process();"/>
+        </div>
+
+      </div>
+      
+</div>
diff --git a/vid/src/main/webapp/app/fusion/scripts/view-models/profile-page/profile_detail.html b/vid/src/main/webapp/app/fusion/scripts/view-models/profile-page/profile_detail.html
new file mode 100644
index 00000000..31f68577
--- /dev/null
+++ b/vid/src/main/webapp/app/fusion/scripts/view-models/profile-page/profile_detail.html
@@ -0,0 +1,188 @@
+<!--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  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 ng-controller="profileController" >
+     <br/>
+     <h1 class="heading1">Profile Edit</h1>
+     <br/>
+     Please edit the profile details below:&nbsp;<br><br>
+
+	<div class="fn-ebz-container" >
+		<label class="fn-ebz-text-label"><sup><b>*</b></sup>First Name:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.firstName"
+			maxlength="30" /> 
+	</div>
+
+	<div class="fn-ebz-container" >
+		<label class="fn-ebz-text-label"><sup><b>*</b></sup>Last Name:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.lastName"
+			maxlength="30" /> 
+	</div>
+     
+	<div class="fn-ebz-container" >
+		<label class="fn-ebz-text-label">User ID:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.orgUserId"
+			maxlength="30" style="margin-right:0px;" readonly="true"/> 		
+	</div>
+    &nbsp;
+	<div class="fn-ebz-container" >
+	<label class="fn-ebz-text-label">Manager User ID:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.orgManagerUserId"
+			maxlength="30" style="margin-right:0px;" readonly="true"/>
+	</div>
+<BR>
+	<div class="fn-ebz-container" >
+		<label class="fn-ebz-text-label">Login Id:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.loginId"
+			maxlength="30" readonly="true"/> 
+	</div>
+
+	<div class="fn-ebz-container" style="margin-right:20px">
+		<label class="fn-ebz-text-label">Password:</label><BR>
+		<input type="password" ng-model="profile.loginPwd"
+			maxlength="30" /> 
+	</div>
+
+	<div class="fn-ebz-container" >
+		<label class="fn-ebz-text-label"><sup><b>*</b></sup>Phone:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.phone"
+			maxlength="30" /> 
+	</div>
+
+	<div class="fn-ebz-container" >
+	<label class="fn-ebz-text-label">Fax:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.fax"
+			maxlength="30" /> 
+	</div>
+<BR>
+	<div class="fn-ebz-container" >
+	<label class="fn-ebz-text-label">Cellular:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.cellular"
+			maxlength="30" /> 
+	</div>
+
+	<div class="fn-ebz-container" >
+		<label class="fn-ebz-text-label"><sup><b>*</b></sup>Email:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.email"
+			maxlength="30" /> 
+	</div>
+
+	<div class="fn-ebz-container" >
+		<label class="fn-ebz-text-label">Address 1:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.address1"
+			maxlength="30" /> 
+	</div>
+
+	<div class="fn-ebz-container" >
+		<label class="fn-ebz-text-label">Address 2:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.address2"
+			maxlength="30" /> 
+	</div>
+<BR>
+	<div class="fn-ebz-container" >
+	<label class="fn-ebz-text-label">City:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.city"
+			maxlength="30" /> 
+	</div>
+
+	<div class="fn-ebz-container">	
+		<label  class="fn-ebz-text-label">State:</label><BR>
+		<div class="form-field" att-select="stateList.options" ng-model="stateList.selected"></div>
+	</div>
+
+	<div class="fn-ebz-container" >
+		<label class="fn-ebz-text-label">Zip Code:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.zipCode"
+			maxlength="30" /> 
+	</div>
+
+	<div class="fn-ebz-container">	
+		<label  class="fn-ebz-text-label">Country:</label><BR>
+		<div class="form-field" att-select="countries" ng-model="selectedCountry"></div>
+	</div>
+	<BR>
+	<div class="fn-ebz-container">	
+		<label  class="fn-ebz-text-label">Time Zone:</label><BR>
+		<div class="form-field" att-select="timeZones" ng-model="selectedTimeZone"></div>
+	</div>
+	
+	<div align="left" >
+		<button type="submit" ng-click="saveProfile();" att-button
+			btn-type="primary" size="small">Save</button>
+	</div>
+	
+<br>
+	<div class="pageTitle">
+		<label>Roles</label>
+		<a ng-click="addNewRolePopup();" class="icon-add" size="small"></a>
+   
+	</div>
+
+	<table 	att-table table-data="profile.roles" view-per-page="viewPerPage" current-page="currentPage" search-category="searchCategory" search-string="searchString" total-page="totalPage">
+<!-- 	<table border="1" class="hovertable_1"> -->
+	     <thead att-table-row type="header">
+  		<tr>
+  			<th att-table-header sortable="false" align="left"  width="90%">Name</th>
+  			<th att-table-header sortable="false"  width="10%">Remove?</th>
+  		</tr>
+  		 </thead>
+  		 <tbody att-table-row type="body" row-repeat="role in profile.roles" style="max-height: 980px;" ><!-- background colors will alternate not properly with multiple tbody-->
+<!-- 		  <tr ng-repeat="role in profile.roles track by role.id"> -->
+		  <tr>
+		    <td att-table-body width="90%" >{{ role.name }}</td>
+		    <td att-table-body width="10%">
+		    	<a ng-click="removeRole(role);" ><img src="static/fusion/images/deleteicon.gif"></a>
+		     </td>
+		  </tr>
+		 </tbody>
+	</table>
+	
+	
+	
+	<div id="dialog" style="overflow:scroll" class="modal__informative font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name" style="color:#157BB2">Select Roles</h2>
+            </div>
+            <button align="right" class="button button--primary button--small" herf="javascript:void(0)" ng-click="close()">Close</button>
+            <div class="divider-container"><hr></div>  
+            <div class="modal__content">           	 	
+				<table table-data="availableRoles" att-table  >
+			        <thead att-table-row type="header">
+				  		<tr>
+				  			<th att-table-header sortable="false" width="10%"> </th>
+				  			<th att-table-header sortable="false" width="90%">Role</th>
+				  		</tr>
+			  		</thead>
+				  
+				    <tbody att-table-row type="body" row-repeat="availableRole in availableRoles" style="max-height: 980px;" ><!-- background colors will alternate not properly with multiple tbody-->
+				  	  <tr>
+					  	<td att-table-body width="10%">
+					  		<div ng-click="toggleRole(availableRole.selected,availableRole);">
+					    	<input type="checkbox" ng-model="availableRole.selected" att-toggle-main>
+					    	</div>
+					    </td>
+					    <td att-table-body width="90%">{{ availableRole.name }}</td>
+				  	  </tr>
+				    </tbody>
+		        </table>
+            </div>
+    </div>
+	
+	
+</div>
diff --git a/vid/src/main/webapp/app/fusion/scripts/view-models/profile-page/profile_search.html b/vid/src/main/webapp/app/fusion/scripts/view-models/profile-page/profile_search.html
new file mode 100644
index 00000000..9f49a80f
--- /dev/null
+++ b/vid/src/main/webapp/app/fusion/scripts/view-models/profile-page/profile_search.html
@@ -0,0 +1,72 @@
+<!--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  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 ng-controller="profileSearchCtrl">
+	
+		<h1 class="heading1" style="margin-top:10px;">Profile Search</h1>
+		
+		<table att-table table-data="tableData" view-per-page="viewPerPage" current-page="currentPage" search-category="searchCategory" search-string="searchString" total-page="totalPage">
+
+			    <thead  att-table-row type="header">
+					<tr>
+						<th att-table-header sortable="true" key="id">User ID</th>
+			            <th att-table-header sortable="true" key="lastName">Last Name</th>        
+			            <th att-table-header sortable="true" key="firstName">First Name</th>    
+			            <th att-table-header sortable="true" key="email">Email</th>
+			            <th att-table-header sortable="true" key="orgUserId">User ID</th>        
+			            <th att-table-header sortable="true" key="orgManagerUserId">Manager User ID</th> 
+			            <th att-table-header >Edit</th>
+			            <th att-table-header sortable="true" key="active">Active?</th>         
+			        </tr>
+			    </thead>
+			    <tbody att-table-row type="body" row-repeat="rowData in tableData">
+			        <tr>
+		            	<td att-table-body ng-bind="rowData['id']"></td>
+		            	<td att-table-body ng-bind="rowData['lastName']"></td>
+		            	<td att-table-body ng-bind="rowData['firstName']"></td>
+		            	<td att-table-body ng-bind="rowData['email']"></td>
+		            	<td att-table-body ng-bind="rowData['orgUserId']"></td>
+		            	<td att-table-body ng-bind="rowData['orgManagerUserId']"></td>
+		            	<td att-table-body ><a href="#/profile/{{rowData.id}}" class="ion-edit" style="color: #888;font-size:20px;"></a></td>
+		        		<td att-table-body >
+		        		   <div ng-click="toggleProfileActive(rowData)">
+		        		     <input type="checkbox"  ng-model="rowData.active" att-toggle-main>
+		        		   </div>
+		        	   </td>
+			        </tr>     
+			    </tbody>	  
+	</table>
+	
+  	    <div class="fn-ebz-container">
+	          Records Per Page:
+	          <input class="fn-ebz-text" type="text" ng-model="viewPerPage1" size="5" style="width: 47px;">
+        </div>
+<!-- 		<div class="fn-ebz-container">
+	          Current Page:
+	          <input class="fn-ebz-text" type="text" ng-model="currentPage" size="5" style="width: 47px;">
+        </div> --> 
+<!--         <div class="fn-ebz-container">
+	          Total Page(s):
+	          <input class="fn-ebz-text" type="text" ng-model="totalPage1" size="5" readonly="true" style="width: 47px;">
+        </div> -->
+        
+<!--Short page count-->
+<div att-pagination total-pages="totalPages1" current-page="currentPage1" click-handler="customHandler"></div>
+
+</div>
diff --git a/vid/src/main/webapp/app/fusion/scripts/view-models/profile-page/role.html b/vid/src/main/webapp/app/fusion/scripts/view-models/profile-page/role.html
new file mode 100644
index 00000000..d372f915
--- /dev/null
+++ b/vid/src/main/webapp/app/fusion/scripts/view-models/profile-page/role.html
@@ -0,0 +1,118 @@
+<!--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  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>
+	<div class="bc-style" style="margin-left:-60px;">
+	    <ul class="breadcrumb">
+	        <li><a href="welcome">Home</a></li>
+	        <li><a href="admin#/role_list">Roles</a></li>
+	        <li class="active">Role</li>
+	    </ul>
+	</div>
+	<h1 class="heading1">Role Edit</h1>
+	<div ng-controller="roleController" >
+		<br>
+	     Please edit the role details below:&nbsp;<br>
+	
+		<div class="fn-ebz-container" >
+			<label class="fn-ebz-text-label"><sup><b>*</b></sup>Name:</label><BR>
+			<input type="text" class="fn-ebz-text" ng-model="role.name"
+				maxlength="30" /> 
+		</div>
+	
+		<div class="fn-ebz-container" >
+			<label class="fn-ebz-text-label">Priority:</label><BR>
+			<input type="text" class="fn-ebz-text" ng-model="role.priority"
+				maxlength="30" /> 
+		</div>
+		
+		<div align="left" >
+			<button type="submit" ng-click="saveRole();" att-button
+				btn-type="primary" size="small">Save</button>
+		</div>
+		
+		<br>
+		<div class="pageTitle">
+			<label>Role Functions</label>
+			<a ng-click="addNewRoleFunctionModalPopup();" class="icon-add" size="small"></a>
+		</div>
+	
+		<table table-data="role.roleFunctions" att-table >
+		     <thead att-table-row type="header">
+	  		<tr>
+	  			<th att-table-header sortable="false" align="left"  width="90%">Name</th>
+	  			<th att-table-header sortable="false"  width="10%">Remove?</th>
+	  		</tr>
+	  		 </thead>
+	  		 <tbody att-table-row type="body" row-repeat="roleFunction in role.roleFunctions" style="max-height: 980px;" ><!-- background colors will alternate not properly with multiple tbody-->
+			  <tr>
+			    <td att-table-body width="90%" >{{ roleFunction.name }}</td>
+			    <td att-table-body width="10%">
+			    	<div ng-click="removeRoleFunction(roleFunction);" style="font-size:20px;"><a href="javascript:void(0)" class="icon-trash"></a></div>
+			     </td>
+			  </tr>
+			 </tbody>
+		</table>
+		<a href="admin#/role_function_list">Manage Role Functions</a><br><br>
+		
+		<div class="pageTitle">
+			<label>Child Roles</label>
+			<a ng-click="addNewChildRoleModalPopup();" class="icon-add" size="small"></a>
+		</div>
+		
+		<table table-data="role.childRoles" att-table >
+		     <thead att-table-row type="header">
+	  		<tr>
+	  			<th att-table-header sortable="false" align="left"  width="90%">Name</th>
+	  			<th att-table-header sortable="false"  width="10%">Remove?</th>
+	  		</tr>
+	  		 </thead>
+	  		 <tbody att-table-row type="body" row-repeat="role in role.childRoles" style="max-height: 980px;" >
+			  <tr>
+			    <td att-table-body width="90%" >{{ role.name }}</td>
+			    <td att-table-body width="10%">
+			    	<div ng-click="removeChildRole(role);" style="font-size:20px;"><a href="javascript:void(0)" class="icon-trash"></a></div>
+			     </td>
+			  </tr>
+			 </tbody>
+		</table>
+		
+		<div id="dialogChildRole" title="Select Child Roles">
+		  <table table-data="availableRoles" att-table>
+		  	<thead att-table-row type="header">
+		  		<tr>
+		  			<th att-table-header sortable="false" width="10%"> </th>
+		  			<th att-table-header sortable="false" width="90%">Role</th>
+		  		</tr>
+		  		</thead>
+		  		<tbody att-table-row type="body" row-repeat="availableRole in availableRoles" style="max-height: 980px;" ><!-- background colors will alternate not properly with multiple tbody-->
+			  	<tr>
+			  	<td att-table-body width="10%">
+			  		<div ng-click="toggleChildRole(availableRole.selected,availableRole);">
+			    	<input type="checkbox" ng-model="availableRole.selected" att-toggle-main>
+			    	</div>
+			    </td>
+			    <td att-table-body width="90%">{{ availableRole.name }}</td>
+			    
+			  </tr>
+			  </tbody>
+			</table>
+		</div>
+	</div>
+</div>
diff --git a/vid/src/main/webapp/app/fusion/scripts/view-models/profile-page/role_function_list.html b/vid/src/main/webapp/app/fusion/scripts/view-models/profile-page/role_function_list.html
new file mode 100644
index 00000000..b0851036
--- /dev/null
+++ b/vid/src/main/webapp/app/fusion/scripts/view-models/profile-page/role_function_list.html
@@ -0,0 +1,88 @@
+<!--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  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 ng-controller="roleFunctionListController" style="width:95%;"> 	
+	<div class="pageTitle">
+			
+	        <h1 class="heading1" style="margin-left:0px;">Role Functions</h1>
+	        <br/>
+	        <!-- <a ng-click="addNewRoleFunctionModalPopup();" class="icon-add" size="small" ></a> -->
+	        <div align="left" style="marin-bottom: 50px;">
+				<button type="submit" ng-click="addNewRoleFunctionModalPopup();" att-button
+					btn-type="primary" size="small">Create</button>
+			</div>
+	 <br><br>
+	        
+	</div>
+	 
+	<br>
+	<div style="margin-right: 20px;text-align: justify;text-align-last:auto;">
+	Click on the edit icon to update a role function, the plus icon to add additional role functions, or the delete icon to remove them.
+	</div>
+	<br>
+	<div id="rolesTable" title="Role Functions">
+	  <table att-table table-data="availableRoleFunctions" current-page="1">
+	  	<thead att-table-row type="header">
+	  		<tr>
+	  			<th att-table-header width="70%" key="name" sortable="true">Name</th>
+	  			<th att-table-header width="10%" key="code" sortable="true">Code</th>
+	  			<th att-table-header width="10%" sortable="false">Edit?</th>
+	  			<th att-table-header width="10%" sortable="false">Delete?</th>
+	  		</tr>
+	  	</thead>
+	  	<tbody att-table-row type="body" row-repeat="availableRoleFunction in availableRoleFunctions" style="max-height: 980px;" ><!-- background colors will alternate not properly with multiple tbody-->
+		  <tr>
+		    <td att-table-body width="70%" ng-bind="availableRoleFunction['name']"></td>
+		    <td att-table-body width="10%" ng-bind="availableRoleFunction['code']"></td>
+		    <td att-table-body width="10%">
+		    <!-- <a ng-click="editRoleFunctionPopup(availableRoleFunction);" >
+		    <img src="static/fusion/images/editicon.gif">
+		    </a> -->
+		    <div ng-click="editRoleFunctionModalPopup(availableRoleFunction);" style="font-size:20px;"><a href="javascript:void(0)" class="ion-edit"></a></div>
+		    </td>
+		     <td att-table-body width="10%">
+		    	<!-- <a ng-click="removeRole(availableRoleFunction);" ><img src="static/fusion/images/deleteicon.gif"></a> -->
+		    	<div ng-click="removeRole(availableRoleFunction);" style="font-size:20px;"><a href="javascript:void(0)" class="ion-trash-b"></a></div>
+		     </td>
+		  </tr>
+		</tbody>
+		</table>
+	</div>
+	
+	
+	<div id="dialog" title="Add Role Function">
+	   	
+	   	<div class="fn-ebz-container" >
+		<label class="fn-ebz-text-label"><sup><b>*</b></sup>Name:</label><br>
+		<input type="text" class="fn-ebz-text" ng-model="editRoleFunction.name"
+			maxlength="30" /> 
+		</div>
+	   	<br/>
+	   	<div class="fn-ebz-container" >
+		<label class="fn-ebz-text-label"><sup><b>*</b></sup>Code:</label><br>
+		<input type="text" class="fn-ebz-text" ng-model="editRoleFunction.code" ng-disabled="editRoleFunction.code!=null"
+			maxlength="30" /> 
+		</div>
+		<br/>
+		<button type="submit" ng-click="saveRoleFunction(editRoleFunction);" att-button
+			btn-type="primary" size="small">Save</button>
+		
+	</div>
+	
+</div>
diff --git a/vid/src/main/webapp/app/fusion/scripts/view-models/profile-page/role_list.html b/vid/src/main/webapp/app/fusion/scripts/view-models/profile-page/role_list.html
new file mode 100644
index 00000000..1100cbb0
--- /dev/null
+++ b/vid/src/main/webapp/app/fusion/scripts/view-models/profile-page/role_list.html
@@ -0,0 +1,61 @@
+<!--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  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="pageTitle">
+	
+	<h1 class="heading1">Roles</h1>
+</div>
+<br>
+Click on a Role to view its details.
+     
+<div ng-controller="roleListController" style="margin-bottom:20px;width:100%"> 
+	<div id="dialog" title="Roles">
+	  <table att-table table-data="availableRoles" current-page="1">
+	  	<thead att-table-row type="header">
+	  		<tr>
+	  			<th att-table-header width="70%" key="name" sortable="true">Name</th>
+	  			<th att-table-header width="10%" key="priority" sortable="true">Priority</th>
+	  			<th att-table-header width="10%" key="active" sortable="true">Active?</th>
+	  			<th att-table-header width="10%" sortable="false">Delete?</th>
+	  		</tr>
+	  	</thead>
+	  	<tbody att-table-row type="body" row-repeat="availableRole in availableRoles" style="max-height: 980px;" ><!-- background colors will alternate not properly with multiple tbody-->
+<!-- 		  <tr ng-repeat="availableRole in availableRoles track by availableRole.id">		  	 -->
+		  <tr>
+		    <td width="70%"><a href="admin#/role/{{availableRole.id}}">{{ availableRole.name }}</a></td>
+		    <td width="10%">{{ availableRole.priority }}</td>
+		    <td width="10%">
+		    	<div ng-click="toggleRole(availableRole.active,availableRole);">
+		    	<input type="checkbox" ng-model="availableRole.active" att-toggle-main ng-true-value="on" ng-false-value="off">
+		    	</div>
+		    </td>
+		     <td att-table-body width="10%">
+		    	<div ng-click="removeRole(availableRole);" style="font-size:20px;"><a href="javascript:void(0)" class="ion-trash-b"></a></div>
+		     </td>
+		  </tr>
+		</tbody>
+		</table>
+	</div>
+	
+	<div align="left" style="marin-bottom: 50px;">
+		<button type="submit" onClick="window.location='admin#/role/0';" att-button
+			btn-type="primary" size="small">Create</button>
+	</div>
+	
+</div>
diff --git a/vid/src/main/webapp/app/fusion/scripts/view-models/profile-page/self_profile.html b/vid/src/main/webapp/app/fusion/scripts/view-models/profile-page/self_profile.html
new file mode 100644
index 00000000..0f1877c5
--- /dev/null
+++ b/vid/src/main/webapp/app/fusion/scripts/view-models/profile-page/self_profile.html
@@ -0,0 +1,183 @@
+<!--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  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.
+  ================================================================================
+  -->
+
+     
+     <h1 class="heading1">Self Profile</h1>
+     <br>
+     Please edit the profile details below:&nbsp;<br><br>
+
+	<div class="fn-ebz-container" >
+		<label class="fn-ebz-text-label"><sup><b>*</b></sup>First Name:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.firstName"
+			maxlength="30" /> 
+	</div>
+
+	<div class="fn-ebz-container" >
+		<label class="fn-ebz-text-label"><sup><b>*</b></sup>Last Name:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.lastName"
+			maxlength="30"/> 
+	</div>
+     
+	<div class="fn-ebz-container" >
+		<label class="fn-ebz-text-label">User ID:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.orgUserId"
+			maxlength="30" style="margin-right:0px;" readonly="true"/> 
+	</div>
+
+	<div class="fn-ebz-container" >
+	<label class="fn-ebz-text-label">Manager User ID:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.orgManagerUserId"
+			maxlength="30" style="margin-right:0px;" readonly="true"/> 
+	</div>
+<BR>
+	<div class="fn-ebz-container" >
+		<label class="fn-ebz-text-label">Login Id:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.loginId"
+			maxlength="30" readonly="true""/> 
+	</div>
+
+	<div class="fn-ebz-container" style="margin-right:20px">
+		<label class="fn-ebz-text-label">Password:</label><BR>
+		<input type="password" ng-model="profile.loginPwd"
+			maxlength="30" /> 
+	</div>
+
+	<div class="fn-ebz-container" >
+		<label class="fn-ebz-text-label"><sup><b>*</b></sup>Phone:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.phone"
+			maxlength="30" /> 
+	</div>
+
+	<div class="fn-ebz-container" >
+	<label class="fn-ebz-text-label">Fax:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.fax"
+			maxlength="30" /> 
+	</div>
+<BR>
+	<div class="fn-ebz-container" >
+	<label class="fn-ebz-text-label">Cellular:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.cellular"
+			maxlength="30" /> 
+	</div>
+
+	<div class="fn-ebz-container" >
+		<label class="fn-ebz-text-label"><sup><b>*</b></sup>Email:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.email"
+			maxlength="30" /> 
+	</div>
+
+	<div class="fn-ebz-container" >
+		<label class="fn-ebz-text-label">Address 1:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.address1"
+			maxlength="30" /> 
+	</div>
+
+	<div class="fn-ebz-container" >
+		<label class="fn-ebz-text-label">Address 2:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.address2"
+			maxlength="30" /> 
+	</div>
+<BR>
+	<div class="fn-ebz-container" >
+	<label class="fn-ebz-text-label">City:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.city"
+			maxlength="30" /> 
+	</div>
+
+	<div class="fn-ebz-container">	
+		<label  class="fn-ebz-text-label">State:</label><BR>
+		<div class="form-field" att-select="stateList.options" ng-model="stateList.selected"></div>
+	</div>
+
+	<div class="fn-ebz-container" >
+		<label class="fn-ebz-text-label">Zip Code:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.zipCode"
+			maxlength="30" /> 
+	</div>
+
+	<div class="fn-ebz-container">	
+		<label  class="fn-ebz-text-label">Country:</label><BR>
+		<div class="form-field" att-select="countries" ng-model="selectedCountry"></div>
+	</div>
+	<BR>
+	<div class="fn-ebz-container">	
+		<label  class="fn-ebz-text-label">Time Zone:</label><BR>
+		<div class="form-field" att-select="timeZones" ng-model="selectedTimeZone"></div>
+	</div>
+	
+	<div align="left" >
+		<button type="submit" ng-click="saveProfile();" att-button
+			btn-type="primary" size="small">Save</button>
+	</div>
+	
+<br>
+	<div class="pageTitle">
+		<label>Roles</label>
+		<a ng-click="addNewRolePopup();" ng-show="isUserSystemAdmin" class="icon-add" size="small"></a>
+   
+	</div>
+
+	<table 	att-table table-data="profile.roles" view-per-page="viewPerPage" current-page="currentPage" search-category="searchCategory" search-string="searchString" total-page="totalPage">
+<!-- 	<table border="1" class="hovertable_1"> -->
+	     <thead att-table-row type="header">
+  		<tr>
+  			<th att-table-header sortable="false" align="left"  width="90%">Name</th>
+  			<th att-table-header sortable="false"  width="10%">Remove?</th>
+  		</tr>
+  		 </thead>
+  		 <tbody att-table-row type="body" row-repeat="role in profile.roles" style="max-height: 980px;" ><!-- background colors will alternate not properly with multiple tbody-->
+<!-- 		  <tr ng-repeat="role in profile.roles track by role.id"> -->
+		  <tr>
+		    <td att-table-body width="90%" >{{ role.name }}</td>
+		    <td att-table-body width="10%">
+		    	<a ng-click="removeRole(role);" ><img src="static/fusion/images/deleteicon.gif"></a>
+		     </td>
+		  </tr>
+		 </tbody>
+	</table>
+	
+	<div id="dialog" style="height:500px;overflow:scroll" class="modal__informative font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name" style="color:#157BB2">Select Roles</h2>
+            </div>
+            <button align="right" class="button button--primary button--small" herf="javascript:void(0)" ng-click="close()">Close</button>
+            <div class="modal__content">           	 	
+				<table table-data="availableRoles" att-table  >
+			        <thead att-table-row type="header">
+				  		<tr>
+				  			<th att-table-header sortable="false" width="10%"> </th>
+				  			<th att-table-header sortable="false" width="90%">Role</th>
+				  		</tr>
+			  		</thead>
+				  
+				    <tbody att-table-row type="body" row-repeat="availableRole in availableRoles" style="max-height: 980px;" ><!-- background colors will alternate not properly with multiple tbody-->
+				  	  <tr>
+					  	<td att-table-body width="10%">
+					  		<div ng-click="toggleRole(availableRole.selected,availableRole);">
+					    	<input type="checkbox" ng-model="availableRole.selected" att-toggle-main>
+					    	</div>
+					    </td>
+					    <td att-table-body width="90%">{{ availableRole.name }}</td>
+				  	  </tr>
+				    </tbody>
+		        </table>
+            </div>
+    </div>
+	
diff --git a/vid/src/main/webapp/app/fusion/scripts/view-models/profile-page/usage_list.html b/vid/src/main/webapp/app/fusion/scripts/view-models/profile-page/usage_list.html
new file mode 100644
index 00000000..9bb2c869
--- /dev/null
+++ b/vid/src/main/webapp/app/fusion/scripts/view-models/profile-page/usage_list.html
@@ -0,0 +1,64 @@
+<!--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  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 ng-controller="usageListController" > 	
+	<br/>
+	   <h1 class="heading1">Users</h1>
+	<br/>
+    
+    <div style="margin-right: 20px;text-align: justify;text-align-last:auto;">
+	    The following shows all users currently logged into the application. Click the icon to expel a user from the application.
+	</div>
+	<div title="Current User Sessions" style="width: 86%;">
+	  <table att-table table-data="users" current-page="1">
+	  	
+	  	<thead att-table-row type="header">
+	  		<tr>
+	  			<th att-table-header sortable="false" width="10%" align="left">Current User Sessions</th>
+	  			<th att-table-header sortable="false" width="10%" align="center"></th>
+	  			<th att-table-header sortable="false" width="10%" align="center"></th>
+	  			<th att-table-header sortable="false" width="10%" align="center"></th>
+	  			<th att-table-header sortable="false" width="10%" align="center"></th>
+	  			<th att-table-header sortable="false" width="10%" align="center"></th>
+	  		</tr>
+	  		<tr>
+	  			<th att-table-header sortable="false" width="10%" align="center">User Id</th>
+	  			<th att-table-header sortable="false" width="10%" align="center">User Name</th>
+	  			<th att-table-header sortable="false" width="10%" align="center">Email</th>
+	  			<th att-table-header sortable="false" width="10%" align="center">Last Access Time (minutes)</th>
+	  			<th att-table-header sortable="false" width="10%" align="center">Time Remaining (minutes)</th>
+	  			<th att-table-header sortable="false" width="10%" align="center">Expire User Session?</th>
+	  		</tr>
+	  	</thead>
+	  	<tbody att-table-row type="body" row-repeat="user in users" style="max-height: 980px;" ><!-- background colors will alternate not properly with multiple tbody--> 
+		  <tr>
+		    <td att-table-body width="10%">{{user.id}}</td>
+		    <td att-table-body width="10%">{{user.lastName}}</td>
+		    <td att-table-body width="10%">{{user.email}}</td>
+		    <td att-table-body width="10%">{{user.lastAccess}}</td>
+		    <td att-table-body width="10%">{{user.remaining}}</td>
+		    <td att-table-body width="10%"><div ng-hide="user.delete=='yes'">Current Session</div>
+		  
+		    	<div ng-click="removeSession(user.sessionId);" ng-hide="user.delete=='no'" style="font-size:20px;text-align:center"><a href="javascript:void(0)" class="icon-trash"></a></div>
+		    </td>
+		  </tr>
+		</tbody>
+		</table>
+	</div>
+</div>
diff --git a/vid/src/main/webapp/app/fusion/scripts/view-models/workflows/workflow-landing.html b/vid/src/main/webapp/app/fusion/scripts/view-models/workflows/workflow-landing.html
new file mode 100644
index 00000000..2b5e3b60
--- /dev/null
+++ b/vid/src/main/webapp/app/fusion/scripts/view-models/workflows/workflow-landing.html
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<!--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  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.
+  ================================================================================
+  -->
+
+<html>
+	<head>
+	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+	<meta http-equiv="cache-control" content="max-age=0" />
+    <meta http-equiv="cache-control" content="no-cache" />
+    <meta http-equiv="expires" content="0" />
+    <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
+    <meta http-equiv="pragma" content="no-cache"/>
+	<!-- CSS -->
+		<link rel="stylesheet" type="text/css" href="app/fusion/external/ebz/fn-ebz.css" >
+		<link rel="stylesheet" type="text/css" href="app/fusion/external/ebz/sandbox/styles/demo.css" >
+		<link rel="stylesheet" type="text/css" href="app/fusion/external/ebz/sandbox/styles/base.css" >
+		<link rel="stylesheet" type="text/css" href="app/fusion/external/ebz/sandbox/styles/btn.css" >
+		<link rel="stylesheet" type="text/css" href="app/fusion/external/ebz/sandbox/styles/dtpk.css" >
+		<link rel="stylesheet" type="text/css" href="app/fusion/external/ebz/sandbox/styles/frms.css" >
+		<link rel="stylesheet" type="text/css" href="app/fusion/external/ebz/sandbox/styles/sldr.css" >
+		<link rel="stylesheet" type="text/css" href="app/fusion/external/ebz/sandbox/styles/style.css" >
+		<link rel="stylesheet" type="text/css" href="app/fusion/external/ebz/sandbox/styles/tbs.css" >
+		<link rel="stylesheet" type="text/css" href="app/fusion/external/ebz/ebz_header/portal_ebz_header.css">
+		<link rel="stylesheet" type="text/css" href="static/fusion/css/jquery-ui.css">
+	<!-- Basic AngularJS -->
+		
+  		<script src= "app/fusion/external/angular-1.5/angular.js"></script> 
+		<script src= "app/fusion/external/angular-1.5/angular-sanitize.js"></script> 
+		<script src= "app/fusion/external/angular-1.5/angular-route.min.js"></script>
+ 		<script src= "app/fusion/external/angular-1.5/angular-cookies.js"></script>		
+	 	<script src= "app/fusion/external/ebz/angular_js/app.js"></script> 
+		<script src= "app/fusion/external/ebz/angular_js/gestures.js"></script>
+		<script src= "app/fusion/external/ebz/sandbox/att-abs-tpls.js" type="text/javascript"></script>
+		<!-- <script src= "app/fusion/external/scrollable-table/angular-scrollable-table.min.js"></script> -->
+	<!-- jQuery -->	
+		<script src="static/js/jquery-1.10.2.js"></script>
+		<script src="static/js/jquery.mask.min.js" type="text/javascript"></script>
+		<script src="static/js/jquery-ui.js" type="text/javascript"></script>
+	<!-- AngularJS Gridster -->
+		<script src="static/fusion/js/att_angular_gridster/ui-gridster-tpls.js"></script>
+		<script src="static/fusion/js/att_angular_gridster/angular-gridster.js"></script>
+	<!-- AngularJS Config -->
+<!-- 		<script src= "app/fusion/external/ebz/angular_js/app.js"></script> -->
+		<script src= "app/fusion/external/ebz/angular_js/checklist-model.js"></script>
+	
+	<!-- Controller js -->
+ 		<script src="app/fusion/scripts/controllers/fn_menu_add_popup_controller.js"></script>
+		<script src="app/fusion/scripts/controllers/admin_menu_edit.js"></script>
+		<script src="app/fusion/scripts/controllers/profile-search-controller.js"></script>
+		<script src="app/fusion/scripts/controllers/profile-controller.js"></script>
+		<script src="app/fusion/scripts/controllers/post-search-controller.js"></script>
+		<script src="app/fusion/scripts/controllers/role-list-controller.js"></script>
+		<script src="app/fusion/scripts/controllers/role-function-list-controller.js"></script>
+		<script src="app/fusion/scripts/controllers/rolefunctionpopupController.js"></script>
+		<script src="app/fusion/scripts/controllers/modelpopupController.js"></script>
+		<script src="app/fusion/scripts/controllers/jcs-admin-controller.js"></script>
+		<script src="app/fusion/scripts/controllers/broadcast-list-controller.js"></script>
+		<script src="app/fusion/scripts/controllers/broadcast-controller.js"></script>
+		<script src="app/fusion/scripts/controllers/usage-list-controller.js"></script>
+		<script src="app/fusion/scripts/controllers/collaborate-list-controller.js"></script>
+		<script src="app/fusion/scripts/controllers/role-controller.js"></script>
+		<script src="app/fusion/scripts/controllers/rolepopupmodelController.js"></script>
+	<!-- Header and Footer -->
+		<link rel="stylesheet" type="text/css" href="app/fusion/external/ebz/ebz_header/header.css">
+		<link rel="stylesheet" type="text/css" href="app/fusion/external/ebz/ebz_header/footer.css" >
+		<link rel="stylesheet" type="text/css" href="app/fusion/external/bootstrap/bs.css" >	
+		<link rel="stylesheet" type="text/css" href="app/fusion/styles/workflows/workflows.css" >
+		
+		<script src="app/fusion/scripts/directives/footer.js"></script>
+		<script src="app/fusion/external/ebz/js/footer.js"></script>
+		<script src="app/fusion/scripts/directives/header.js"></script>
+		<script src="app/fusion/scripts/directives/leftMenu.js"></script>
+		<script src="app/fusion/scripts/services/leftMenuService.js"></script>		
+		<script src="app/fusion/scripts/modalService.js"></script>
+		<link rel="import" href="app/fusion/scripts/view-models/header.html">
+	<!-- Services -->
+		<script src="app/fusion/scripts/services/profileService.js"></script>
+		<script src="app/fusion/scripts/services/adminService.js"></script>
+		<script src="app/fusion/scripts/services/userInfoService.js"></script>
+	<!-- Controller -->
+        <script src="app/fusion/scripts/controllers/workflows/workflowRouting.js"></script>
+        <script src="app/fusion/scripts/controllers/workflows/workflowController.js"></script>
+        
+        <!-- Utility -->
+		<script src="app/fusion/scripts/modalService.js"></script>		
+                        			 
+    <!-- other js lib -->
+        <script type="text/javascript" src="app/fusion/scripts/socket/peerBroadcast.js"></script>
+        <script src="app/fusion/scripts/moment.min.js"></script>
+        
+        <script src="app/fusion/external/angular-ui/ui-bootstrap-tpls-1.1.2.min.js"></script>
+        
+        <script src="static/fusion/raptor/ebz/date_time_picker.js"></script>
+		<script src="static/fusion/raptor/ebz/moment.js"></script>
+		<link rel="stylesheet" href="static/fusion/raptor/ebz/date_time_picker.css"/>
+	<!-- Icons -->
+		<link rel="stylesheet" type="text/css" href="app/fusion/external/ionicons-2.0.1/css/ionicons.css" />
+ 		<script> 
+			angular.module('abs').requires.push('quantum'); 
+		</script>
+        
+	</head>
+	<body class="appBody" ng-app="abs">
+		<div ng-include src="'app/fusion/scripts/view-models/profile-page/popup_modal_fn_menu_add.html'"></div>
+	    <div ng-include src="'app/fusion/scripts/view-models/profile-page/popup_modal_rolefunction.html'"></div>
+		<div ng-include src="'app/fusion/scripts/view-models/profile-page/popup_modal.html'"></div>
+		<div ng-include src="'app/fusion/scripts/view-models/profile-page/popup_modal_role.html'"></div>
+		<div q-header></div>
+		<div q-menu class="appLeftMenu"></div>
+		<div ng-view style="min-height: 450px;margin-top:-50px;margin-left:210px;"></div>		
+		<div q-footer class="appFooter"></div>
+	</body>
+</html>
diff --git a/vid/src/main/webapp/app/fusion/scripts/view-models/workflows/workflow-listing.html b/vid/src/main/webapp/app/fusion/scripts/view-models/workflows/workflow-listing.html
new file mode 100644
index 00000000..ceb88677
--- /dev/null
+++ b/vid/src/main/webapp/app/fusion/scripts/view-models/workflows/workflow-listing.html
@@ -0,0 +1,85 @@
+<!--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  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.
+  ================================================================================
+  -->
+<br/>
+<div>
+	<div>
+		<div align="right">
+			<h3>
+				<button ng-click="createWorkflow('lg')" class="btn btn-primary">Create Workflow</button></h3>
+		</div>
+		<div>
+			<form>
+				<div class="form-group">
+					<input type="text" ng-model="search" placeholder = "Current Workflows - Search one"/>
+				</div>
+			</form>
+		</div>
+	</div>
+</div>
+  	
+<!-- <table att-table table-data="tableData" view-per-page="viewPerPage" 
+	current-page="currentPage" search-category="searchCategory" search-string="searchString" total-page="totalPage" ng-show="workflows.length > 0">
+	<thead  att-table-row type="header"> -->
+
+
+<table att-table table-data="tableData" view-per-page="viewPerPage" current-page="currentPage" search-category="searchCategory" search-string="searchString" total-page="totalPage">
+    <thead att-table-row type="header">	
+		<tr class="info">
+			<th att-table-header>Id</th>
+			<th att-table-header>Name</th>
+			<th>Key</th>
+			<th>Description</th>
+			<th>Workflow Server URL</th>
+			<!-- <th>Suspend Link</th> -->
+			<th>View</th>
+			<th>Active</th>
+			<th>Created </th>
+			<th>Created By</th>
+			<th>Action</th>
+			<th>Schedule</th>			
+			<th>Edit</th>
+			<th>Delete?</th>
+			
+			
+		</tr>
+	</thead>
+	  
+
+	<tbody att-table-row type="body">
+		<tr ng-repeat="workflow in workflows | filter: search">		
+			<td>{{workflow.id}}</td>
+			<td>{{workflow.name}}</td>
+			<td>{{workflow.workflowKey}}</td>
+			<td>{{workflow.description}}</td>
+			<td>{{workflow.runLink}}</td>
+			<td><div ng-click="previewWorkflow(workflow,'lg');" style="font-size:20px;"><a href="javascript:void(0)" class="ion-eye"></a></div></td>			
+			<!-- <td>{{workflow.suspendLink}}</td> -->
+			<td >{{workflow.active}}</td>
+			<td>{{workflow.created}}</td>
+			<td>{{workflow.createdBy}}</td>
+			<td><div ng-show="workflow.active ==='false'" ng-click="activateWorkflow(workflow)" style="font-size:20px;"><a href="javascript:void(0)" class="ion-play"></a></div>
+			<div ng-show="workflow.active ==='true'" ng-click="suspendWorkflow(workflow)" style="font-size:20px;"><a href="javascript:void(0)" class="ion-pause"></a></div></td>
+			<td><div ng-click="scheduleWorkflow(workflow);" style="font-size:20px;"><a href="javascript:void(0)" class="ion-ios-time"></a></div></td>			
+			<td><div ng-click="updateWorkflow(workflow);" style="font-size:20px;"><a href="javascript:void(0)" class="ion-edit"></a></div></td>
+			<td><div ng-click="removeWorkflow(workflow);" style="font-size:20px;"><a href="javascript:void(0)" class="ion-trash-b"></a></div></td>
+		</tr>
+	</tbody>
+</table>
+  
diff --git a/vid/src/main/webapp/app/fusion/scripts/view-models/workflows/workflow-new.html b/vid/src/main/webapp/app/fusion/scripts/view-models/workflows/workflow-new.html
new file mode 100644
index 00000000..4622b928
--- /dev/null
+++ b/vid/src/main/webapp/app/fusion/scripts/view-models/workflows/workflow-new.html
@@ -0,0 +1,108 @@
+<!--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  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>
+	<div class="modal-header">
+		<h3 class="modal-title">Create Workflows</h3>
+	</div>
+	<div class="workflow-popup-body">
+		<form name="workflowForm" class="css-form" novalidate>
+			
+			<div class="control-group">
+				<label class="fn-ebz-text large" for="workflowName">Name*: </label>
+
+				<div>
+					<input type="text" id="workflowName" class="fn-ebz-text extra-large" ng-model="workflow.name"
+						name="workflowName" required="required" placeholder="Workflow Name" />
+
+					<div ng-show="workflowForm.$submitted || workflowForm.workflowName.$touched">
+						<span ng-show="workflowForm.workflowName.$error.required">Workflow Name is required !!!</span> 
+					</div>
+
+				</div>
+			</div>
+			
+			
+			<div class="control-group">
+				<label class="fn-ebz-text large" for="workflowKey">Key*: </label>
+				<div>
+					<input type="text" id="workflowKey" ng-model="workflow.workflowKey" class="fn-ebz-text extra-large"
+						name="workflowKey" required="required" placeholder="Workflow Key" />
+
+					<div ng-show="workflowForm.$submitted || workflowForm.workflowKey.$touched">
+						<span ng-show="workflowForm.workflowKey.$error.required">Workflow Key is required !!!</span> 
+					</div>
+
+				</div>
+			</div>
+			
+
+			<div class="control-group">
+				<label class="fn-ebz-text large"  for="workflowDescription">Description: </label>
+
+				<div class="controls">
+					<input type="text" ng-model="workflow.description" id = "workflowDescription" name="workflowDescription" class="fn-ebz-text extra-large" placeholder="Brief Description"/>													
+				</div>
+			</div>
+
+			<div class="control-group">
+				<label class="fn-ebz-text large" for="workflowRunLink">Workflow Server URL*</label>
+				<div class="controls">
+					<input type = "url" ng-model = "workflow.runLink" id = "workflowRunLink" name = "workflowRunLink" required = "required"	class="fn-ebz-text extra-large"/>
+				</div>
+								
+				<div ng-show="workflowForm.$submitted || workflowForm.workflowRunLink.$touched">
+					<span ng-show="workflowForm.workflowRunLink.$error.required">Run Link is required !!!</span>
+					<span class="error" ng-show="workflowForm.workflowRunLink.$error.url">Not valid url!</span> 
+				</div>				
+				
+			</div>
+			
+			<!-- <div class="control-group">
+				<label class="fn-ebz-text large" for="workflowSuspendLink">Suspend Link*</label>
+				<div class="controls">
+					<input type = "url" ng-model = "workflow.suspendLink" id = "workflowSuspendLink" name = "workflowSuspendLink" required = "required" class="fn-ebz-text extra-large"/>
+				</div>
+				
+				<div ng-show="workflowForm.$submitted || workflowForm.workflowSuspendLink.$touched">
+					<span ng-show="workflowForm.workflowSuspendLink.$error.required">Suspend Link is required !!!</span>
+					<span class="error" ng-show="workflowForm.workflowSuspendLink.$error.url">Not valid url!</span> 
+				</div>
+			</div> -->
+			
+			<div class="control-group">
+				<label class="fn-ebz-text large" for="workflowActive">Active</label>
+				<div class="controls">
+					<!-- <input type = "text" ng-model = "workflow.active" id="workflowActive" name="workflowActive"	class="fn-ebz-text extra-large"/> -->
+					
+					<input type="radio" ng-model="workflow.active" value="true">Active
+					<input type="radio" ng-model="workflow.active" value="false">Inactive
+					
+					
+				</div>
+			</div>
+			
+			<div class="modal-footer">
+				<a att-button btn-type="primary" ng-click="ok()">OK</a>
+				<a att-button btn-type="primary" ng-click="cancel()">Cancel</a>				
+			</div>
+		</form>
+		<br />
+	</div>
+</div>
diff --git a/vid/src/main/webapp/app/fusion/scripts/view-models/workflows/workflow-preview.html b/vid/src/main/webapp/app/fusion/scripts/view-models/workflows/workflow-preview.html
new file mode 100644
index 00000000..80fece4e
--- /dev/null
+++ b/vid/src/main/webapp/app/fusion/scripts/view-models/workflows/workflow-preview.html
@@ -0,0 +1,36 @@
+<!--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  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>
+	<div class="modal-header">
+		<h3 class="modal-title">View Workflow</h3>
+	</div>
+	<div class="workflow-popup-body">
+		<form name="workflowForm" class="css-form" novalidate>
+			
+			<div style="overflow:scroll">			
+			<img ng-src="{{workflowToPreview.runLink}}/engine-rest/process-definition/key/{{workflowToPreview.workflowKey}}/diagram">
+			</div>
+			<div class="modal-footer">
+				<button class="fn-ebz-btn large" type="button" ng-click="cancel()">Close</button>
+			</div>
+		</form>
+		<br />
+	</div>
+</div>
diff --git a/vid/src/main/webapp/app/fusion/scripts/view-models/workflows/workflow-remove.html b/vid/src/main/webapp/app/fusion/scripts/view-models/workflows/workflow-remove.html
new file mode 100644
index 00000000..e21efad8
--- /dev/null
+++ b/vid/src/main/webapp/app/fusion/scripts/view-models/workflows/workflow-remove.html
@@ -0,0 +1,38 @@
+<!--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  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>
+	<div class="modal-header">
+		<h3 class="modal-title">Remove Workflow?</h3>
+	</div>
+	<div class="workflow-popup-body">
+		<form name="workflowForm" class="css-form" novalidate>
+			
+			<div class="control-group">
+				<label class="fn-ebz-text large" for="workflowName">Workflow "{{workflowToRemove.name}}" is going to be removed. Are you sure?</label>
+			</div>
+						
+			<div class="modal-footer">
+				<a att-button btn-type="primary" ng-click="ok()">OK</a>
+				<a att-button btn-type="primary" ng-click="cancel()">Cancel</a>
+			</div>
+		</form>
+		<br />
+	</div>
+</div>
diff --git a/vid/src/main/webapp/app/fusion/scripts/view-models/workflows/workflow-schedule.html b/vid/src/main/webapp/app/fusion/scripts/view-models/workflows/workflow-schedule.html
new file mode 100644
index 00000000..aebc04fb
--- /dev/null
+++ b/vid/src/main/webapp/app/fusion/scripts/view-models/workflows/workflow-schedule.html
@@ -0,0 +1,116 @@
+<!--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  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>
+	<div class="modal-header">
+		<h3 class="modal-title">Workflow: {{workflowToSchedule.name}}</h3>
+			<table style="width:60%">			
+			<tr><td>Workflow Key:</td> <td>{{workflowToSchedule.workflowKey}}</td></tr>
+ 			<tr><td>Workflow Description:</td> <td>{{workflowToSchedule.description}}</td></tr>
+ 			</table>
+	</div>
+
+	<div class="workflow-popup-body">
+		<form name="workflowForm" class="css-form" novalidate>
+		
+ <table>
+ <tr>
+	  <form name="myForm">
+	  <td>
+	    <label for="singleSelect"> Recurrence: </label>
+	    </td>
+	    <td>
+<div class="form-field" att-select="recurrenceOptions" ng-model="selectRecurrenceOpt" placeholder="Select an Option"></div>
+	    <br>
+	    </td>
+	    <td>              </td>
+	  </form>
+ </tr>
+<tr>
+<td>
+ 
+</td>
+<td>
+Pick a date:
+</td>
+<td>
+Hour:
+</td>
+<td>
+Minute:
+</td>
+</tr>
+ <tr>
+		<td>
+			<form name="FirstScheduleForm">
+	    		<label for="dateSelect"> First Schedule: </label>
+	  		</form>
+	    </td>
+	    <td>
+			<!--DATEPICKER POPUP-->
+			<input id="datepicker1" type="text" ng-model="dt" att-datepicker>
+	    </td>
+	    <td>
+	    <div class="form-field" att-select="hours" ng-model="selectFirstHour" placeholder="Select an Option"></div>
+	    </td>
+	    <td>
+	   	<div class="form-field" att-select="minutes" ng-model="selectFirstMinute" placeholder="Select an Option"></div>  
+	    </td>
+<!-- 		<td>
+	   	<div class="form-field" att-select="AMPMOptions" ng-model="selectStartAMPMOption" placeholder="Select an Option"></div>  
+	    </td> -->
+</tr>		
+<tr>
+		<td>
+			<form name="LastScheduleForm">
+	    		<label for="dateSelect"> Last Schedule: </label>
+	  		</form>
+	    </td>
+	    <td>
+			<input id="datepicker2" type="text" ng-model="dt2" att-datepicker>
+	    </td>
+	    <td>
+	    <div class="form-field" att-select="hours" ng-model="selectLastHour" placeholder="Select an Option"></div>  
+	    </td>
+	    <td>
+	   	<div class="form-field" att-select="minutes" ng-model="selectLastMinute" placeholder="Select an Option"></div>  
+	    </td>
+	    :
+<!-- 		<td>
+	   	<div class="form-field" att-select="AMPMOptions" ng-model="selectLastAMPMOption" placeholder="Select an Option"></div>  
+	    </td> -->
+
+ </tr>
+<tr>
+<!-- <td>
+	<input id="datepicker3" type="text" ng-model="dt3" date-format="datetimeformat" att-date-time-picker>
+</td>
+ -->
+</tr>
+
+</table>
+			<div class="modal-footer">
+				<a att-button btn-type="primary" ng-click="ok()">OK</a>
+				<a att-button btn-type="primary" ng-click="cancel()">Cancel</a>
+			</div>
+			
+		</form>
+		<br />
+	</div>
+</div>
author	DR695H <dr695h@att.com>	2017-02-07 13:11:03 -0500
committer	DR695H <dr695h@att.com>	2017-02-07 13:12:28 -0500
commit	13ce0552dc7156b6e3e226c00295705f27780a40 (patch)
tree	a9ada50d0a86c0fdc253c188d1328f6e880bfaf5 /vid/src/main/webapp/app/fusion/scripts/view-models
parent	77b87f76ff2799bd1f5fe85552f1c5e7081eb4df (diff)