CCSDK DCAE dashboard feature changes

Issue-ID: DCAEGEN2-1857
Issue-ID: DCAEGEN2-2074
Issue-ID: DCAEGEN2-2364

Change-Id: I97f5ec4599512ed848136971b11d4c2a137a4999
Signed-off-by: Kotagiri, Ramprasad (rp5662) <rp5662@att.com>

11 files changed, 1713 insertions, 2 deletions

diff --git a/ccsdk-app-os/src/main/webapp/app/ccsdk/home/api_view.html b/ccsdk-app-os/src/main/webapp/app/ccsdk/home/api_view.html
new file mode 100644
index 0000000..7561c73
--- /dev/null
+++ b/ccsdk-app-os/src/main/webapp/app/ccsdk/home/api_view.html
@@ -0,0 +1,5 @@
+<div id="page-content">
+ 		<iframe  scrolling="yes" frameborder="0" style="width:100%; height: 800px;" 
+ 		ng-src="api-specs.html">
+    	</iframe>
+</div>
\ No newline at end of file
diff --git a/ccsdk-app-os/src/main/webapp/app/ccsdk/home/app-router.js b/ccsdk-app-os/src/main/webapp/app/ccsdk/home/app-router.js
new file mode 100644
index 0000000..10337ba
--- /dev/null
+++ b/ccsdk-app-os/src/main/webapp/app/ccsdk/home/app-router.js
@@ -0,0 +1,105 @@
+/*******************************************************************************
+ * =============LICENSE_START=========================================================
+ *
+ * =================================================================================
+ *  Copyright (c) 2020 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *  
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ * ============LICENSE_END=========================================================
+ *
+ *******************************************************************************/
+appDS2.config(function($routeProvider) {
+  $routeProvider 
+  .when('/api', { 
+    templateUrl: 'app/ccsdk/home/api_view.html',
+    controller : ''
+  })
+  .when('/api-spec', { 
+    templateUrl: 'app/ccsdk/home/rest-api-spec.html',
+    controller : 'apiDocsController'
+  })
+  .when('/ibp', { 
+    templateUrl: 'app/ccsdk/inventory/inventory_blueprint_table.html',
+    controller : 'inventoryBlueprintTableController'
+  })
+  .when('/ibp/:bpId', { 
+    templateUrl: 'app/ccsdk/inventory/inventory_blueprint_table.html',
+    controller : 'inventoryBlueprintTableController'
+  })
+  .when('/idep', { 
+    templateUrl: 'app/ccsdk/cloudify/deployment_table.html',
+    controller : 'deploymentTableController'
+  })
+  .when('/idep/:depId', { 
+    templateUrl: 'app/ccsdk/cloudify/deployment_table.html',
+    controller : 'deploymentTableController'
+  })
+  .when('/iplug', { 
+    templateUrl: 'app/ccsdk/cloudify/plugin_table.html',
+    controller : 'PluginsTableController'
+  })
+  .when('/sh', { 
+    templateUrl: 'app/ccsdk/consul/service_health_table.html',
+    controller : 'serviceHealthTableController'
+  })
+  .when('/nh', { 
+    templateUrl: 'app/ccsdk/consul/node_table.html',
+    controller : 'nodeTableController'
+  })
+  .when('/dc', { 
+    templateUrl: 'app/ccsdk/consul/datacenter_table.html',
+    controller : 'datacenterTableController'
+  })
+  .when('/profile/:profileId', {
+    templateUrl: 'app/fusion/scripts/DS2-view-models/ds2-profile/self_profile.html',
+    controller: 'selfProfileController'
+  })
+  .when('/profile_search', {
+    templateUrl: 'app/fusion/scripts/DS2-view-models/ds2-profile/profile_searchDS2.html',
+    controller : "profileSearchCtrlDS2"
+  })
+  .when('/post_search', {
+    templateUrl: 'app/fusion/scripts/DS2-view-models/ds2-profile/post.html',
+    controller: 'postController'
+  })
+  .when('/self_profile', {
+    templateUrl: 'app/fusion/scripts/DS2-view-models/ds2-profile/self_profile.html',
+    controller: 'selfProfileController'
+  })  
+  .when('/role_list', {
+    templateUrl: 'app/fusion/scripts/DS2-view-models/ds2-admin/role_list.html',
+    controller : 'adminController'
+  })
+  .when('/role_function_list', {
+    templateUrl: 'app/fusion/scripts/DS2-view-models/ds2-admin/role-function.html',
+    controller : "adminController"
+  })
+  .when('/jcs_admin', {
+    templateUrl: 'app/fusion/scripts/DS2-view-models/ds2-admin/jcs_admin.html',
+    controller: 'adminController'
+  })
+  .when('/admin_menu_edit', {
+    templateUrl: 'app/fusion/scripts/DS2-view-models/ds2-admin/admin-menu-edit.html',
+    controller: 'AdminMenuEditController'
+  })
+  .when('/usage_list', {
+    templateUrl: 'app/fusion/scripts/DS2-view-models/ds2-admin/usage.html',
+    controller: 'usageListControllerDS2'
+  })
+  .otherwise({
+    templateUrl: 'app/ccsdk/home/executions_view.html',
+    controller : 'executionsViewController'
+  })
+  ;
+
+});
\ No newline at end of file
diff --git a/ccsdk-app-os/src/main/webapp/app/ccsdk/home/executions-view-controller.js b/ccsdk-app-os/src/main/webapp/app/ccsdk/home/executions-view-controller.js
new file mode 100644
index 0000000..fd2dd79
--- /dev/null
+++ b/ccsdk-app-os/src/main/webapp/app/ccsdk/home/executions-view-controller.js
@@ -0,0 +1,415 @@
+appDS2.controller('executionsViewController', 
+    function($scope, $rootScope, ControllerService, $modal, ExecutionService, 
+        InventoryDeploymentService, DeploymentService, InventoryBlueprintService, 
+        InventoryExecutionService, localStorageService, $log, $interval) {
+	
+  var coll = document.getElementsByClassName("collapsible");
+  var i; 
+  for (i = 0; i < coll.length; i++) {
+    coll[i].addEventListener("click", function() {
+      this.classList.toggle("active");
+      var content = this.nextElementSibling;
+      if (content.style.display === "" || content.style.display === "block") {
+        content.style.display = "none";
+        content.style.maxHeight = null;
+      } else {
+        content.style.display = "block";
+        content.style.maxHeight = content.scrollHeight + "px";
+      }
+    });
+  }
+  var stop;
+	$scope.ecdapp = {};
+	$scope.ecdapp.isDataLoading = false;
+	$scope.ecdapp.appLabel = "";
+	$scope.ecdapp.bpCount = 0;
+	$scope.ecdapp.depCount = 0;
+	$scope.ecdapp.pluginCount = 0;
+	$scope.ecdapp.filterByUser = true;
+	$scope.ecdapp.searchByBp = 'owner:' + $scope.userId + ';';
+	$scope.ecdapp.searchByDep = 'owner:' + $scope.userId + ';';
+	$scope.ecdapp.bpObjList = [];
+	$scope.ecdapp.depObjList = [];
+	$scope.ecdapp.currentBpId = '';
+	$scope.ecdapp.currentDep;
+	$scope.ecdapp.isBpDataLoading = false;
+	$scope.ecdapp.isDepDataLoading = false;
+	$scope.ecdapp.isPluginDataLoading = false;
+	$scope.ecdapp.isExecDataLoading = false;
+	$scope.ecdapp.level_options = {
+	    "off":"Group",
+	    "on":"User"
+	};
+	$scope.ecdapp.inv_query_options = {
+	      "off":"Off",
+	      "on":"On"
+	};
+	 
+  $scope.ecdapp.showingMoreFilters = false;
+
+  $scope.ecdapp.toggleMoreFilters = function() {      
+    $scope.ecdapp.showingMoreFilters = !$scope.ecdapp.showingMoreFilters;
+  };
+  $scope.ecdapp.availableStatus = 
+    ['pending','started','cancelling','force_cancelling','cancelled','terminated','failed'];
+  $scope.ecdapp.selectedStatus = 'started';
+	$scope.ecdapp.level_switch = {
+	    value: true
+	};
+  $scope.ecdapp.inv_load = {
+        value: false
+  };
+ 
+  $scope.ecdapp.currentPage = 1;  
+  $scope.ecdapp.viewPerPage = 10;
+  $scope.ecdapp.selectedTenant = '';
+  $scope.ecdapp.execId = '';
+  
+	var debug = false;
+	
+  $scope.ecdapp.resetFilters = function() {
+    $scope.ecdapp.selectedTenant = '';
+    $scope.ecdapp.selectedStatus = '';
+  };
+  
+  $scope.ecdapp.extendedfilterSrch = function() {
+    $scope.ecdapp.showingMoreFilters = !$scope.ecdapp.showingMoreFilters;
+    $scope.ecdapp.searchExecTable();   
+  };
+  
+  $scope.ecdapp.searchExecTable = function() {
+    $scope.ecdapp.currentPage = 1;  
+    $scope.ecdapp.viewPerPage = 10;
+    if ($scope.ecdapp.execId != '') {
+      getExecutionForId();
+    } else {
+      if ($scope.ecdapp.selectedTenant == '') {
+        getActiveExecutions();
+      } else {
+        getPerTenantExecutions();
+      }
+    }
+  };
+
+  $scope.ecdapp.toggleUserFilt = function() {
+    if ($scope.ecdapp.level_switch.value) {
+      $scope.ecdapp.searchByBp = 'owner:' + $scope.userId + ';';
+      $scope.ecdapp.searchByDep = 'owner:' + $scope.userId + ';'; 
+    } else {
+      $scope.ecdapp.searchByBp = null;
+      $scope.ecdapp.searchByDep = null;
+    }
+    getBlueprintsCount();
+    getDeploymentsCount();
+  };
+  
+  $scope.$watch('ecdapp.inv_load["value"]', function(newValue,oldValue,scope) {
+    if (newValue != oldValue) {
+      if (newValue === true) {
+        $scope.ecdapp.toggleUserFilt();
+        $scope.ecdapp.searchExecTable(); 
+        stop = $interval( function(){ $scope.ecdapp.toggleUserFilt(); $scope.ecdapp.searchExecTable(); }, 60000, 100, false);
+      } else {
+        $scope.ecdapp.stopLoading();
+      }
+    }
+  }, true);
+  
+  $scope.ecdapp.stopLoading = function() {
+    if (angular.isDefined(stop)) {
+      $interval.cancel(stop);
+      stop = undefined;
+    }
+  };
+  
+	var getTenants = function() {  
+	  var tenantStr = localStorageService.get('tenants');
+	  if (!tenantStr) {
+	    ControllerService.getTenants()
+			.then(function(jsonObj) {
+				if (jsonObj.error) {
+					$log.error("executionsViewController.getTenants failed: " + jsonObj.error);
+					$scope.ecdapp.isRequestFailed = true;
+					$scope.ecdapp.errMsg = jsonObj.error;
+				} else {
+				  var tenants = [];
+	        for (var tenIndx = 0; tenIndx < jsonObj.items.length; tenIndx++) {
+	          tenants.push(jsonObj.items[tenIndx].name);
+	        }
+	        localStorageService.set('tenants', JSON.stringify(tenants));
+	        $scope.ecdapp.availableTenants = tenants;        
+				}			
+			}, function(error) {
+				$log.error("executionsViewController.loadTable failed: " + error);
+				$scope.ecdapp.isRequestFailed = true;
+				$scope.ecdapp.errMsg = error;
+			});
+	  } else {
+	    $scope.ecdapp.availableTenants = JSON.parse(tenantStr);
+    }
+	  getActiveExecutions();
+		};
+
+	var getAppLabel = function() {
+    var label = localStorageService.get('appLabel');
+    if (!label) {
+      ControllerService.getAppLabel().then(function(jsonObj) {
+			if (debug) {
+				$log.debug("Controller.getAppLabel succeeded: " + JSON.stringify(jsonObj));
+			}
+			localStorageService.set('appLabel', JSON.stringify(jsonObj));
+			$scope.ecdapp.appLabel = jsonObj;
+		}, function(error) {
+			$log.error("Controller.getAppLabel failed: " + error);
+		});
+    } else {
+      $scope.ecdapp.appLabel = JSON.parse(label);
+    }
+	};
+  
+  var getBlueprintsCount = function() {
+    $scope.ecdapp.bpObjList = [];
+    $scope.ecdapp.currentBpId = '';
+    $scope.ecdapp.isBpDataLoading = true;
+    InventoryBlueprintService.getBlueprintIdsList($scope.ecdapp.searchByBp).then(
+        function(jsonObj) {
+          if (jsonObj.error) {
+            $log.error("execViewCtlr.getBlueprintsCount failed: "
+                + jsonObj.error);
+            $scope.ecdapp.bpCount = 0;
+            $scope.ecdapp.isBpDataLoading = false;
+            $scope.ecdapp.bpObjList = [];
+          } else {
+            $scope.ecdapp.bpCount = jsonObj.totalItems;
+            $scope.ecdapp.bpObjList = jsonObj.items;
+            $scope.ecdapp.isBpDataLoading = false;
+          }
+        },
+        function(error) {
+          $log.error("execViewCtlr.getBlueprintsCount failed: "
+              + error);
+          $scope.ecdapp.bpCount = 0;
+          $scope.ecdapp.bpObjList = [];
+          $scope.ecdapp.isBpDataLoading = false;
+        });
+  };
+  
+  $scope.ecdapp.updateDepl = function() {
+    $scope.ecdapp.currentDep = '';
+    if ($scope.ecdapp.currentBpId != '') {
+      $scope.ecdapp.isDeplDataLoading = true;
+      $scope.ecdapp.depObjList = [];
+      $scope.ecdapp.execData = [];
+      var srvcIds = [];
+      var srvcTypIds = [];
+      srvcTypIds.push($scope.ecdapp.currentBpId);
+      InventoryBlueprintService.getDeploymentForBp(srvcTypIds)
+      .then(function(jsonObj) {
+        if (jsonObj.error) {
+          $scope.ecdapp.depObjList = [];
+          $scope.ecdapp.isDeplDataLoading = false;
+        } else {
+          for (var typIndx = 0; typIndx < jsonObj.length; typIndx++) {
+            for (var depIndx = 0; depIndx < jsonObj[typIndx].serviceRefList.items.length; depIndx++) {
+              srvcIds.push(jsonObj[typIndx].serviceRefList.items[depIndx]);
+            }    
+          }
+          $scope.ecdapp.depObjList = srvcIds;
+          //$scope.ecdapp.currentDep = $scope.ecdapp.depObjList[0];
+          $scope.ecdapp.isDeplDataLoading = false;
+        }
+      }, function(error) {
+        $log.error("inventoryBlueprintController.updateTable failed: " + error);
+        bpDepls = [];
+        $scope.ecdapp.isDeplDataLoading = false;
+      });
+    }
+  };
+  $scope.ecdapp.copyStringToClipboard = function(str) {
+    // Create new element
+    var el = document.createElement('textarea');
+    // Set value (string to be copied)
+    el.value = str;
+    // Set non-editable to avoid focus and move outside of view
+    el.setAttribute('readonly', '');
+    el.style = {position: 'absolute', left: '-9999px'};
+    document.body.appendChild(el);
+    // Select text inside element
+    el.select();
+    // Copy text to clipboard
+    document.execCommand('copy');
+    // Remove temporary element
+    document.body.removeChild(el);
+ };
+
+  $scope.ecdapp.updateExec = function() {
+    if ($scope.ecdapp.currentDep != '') {
+      $scope.ecdapp.isExecDataLoading = true;
+      $scope.ecdapp.resetFilters();
+      var currentDeplId = $scope.ecdapp.currentDep.split(":")[0];
+      var currentDeplTenant = $scope.ecdapp.currentDep.split(":")[1];
+      InventoryExecutionService.getExecutionsByDeployment(currentDeplId, 
+          currentDeplTenant,
+          1,
+          1000).then(
+              function(jsonObj) {
+                if (jsonObj.error) {
+                  $scope.ecdapp.execData = [];
+                  $scope.ecdapp.isExecDataLoading = false;
+                } else {
+                  $scope.ecdapp.totalPages = jsonObj.totalPages;
+                  $scope.ecdapp.execData = jsonObj.items;
+                  $scope.ecdapp.isExecDataLoading = false;
+                }
+              }, function(error) {
+                $log.error("execViewCtlr.updateExec failed: " + error);
+                $scope.ecdapp.isExecDataLoading = false;
+              });
+    }
+  };
+
+  var getActiveExecutions = function() {
+    $scope.ecdapp.isExecDataLoading = true;
+    InventoryExecutionService.getActiveExecutions($scope.ecdapp.currentPage, $scope.ecdapp.viewPerPage)
+        .then(
+            function(jsonObj) {
+              if (jsonObj.error) {
+                $scope.ecdapp.execData = [];
+                $scope.ecdapp.isExecDataLoading = false;
+              } else {
+                $scope.ecdapp.totalPages = jsonObj.totalPages;
+                $scope.ecdapp.execData = jsonObj.items;
+                $scope.ecdapp.isExecDataLoading = false;
+              }
+            }, function(error) {
+              $log.error("execViewCtlr.updateExec failed: " + error);
+              $scope.ecdapp.isExecDataLoading = false;
+            });
+  };
+  
+  var getPerTenantExecutions = function() {
+    $scope.ecdapp.isExecDataLoading = true;
+    InventoryExecutionService.getExecutionsByTenant($scope.ecdapp.selectedTenant,
+        $scope.ecdapp.selectedStatus, $scope.ecdapp.currentPage, $scope.ecdapp.viewPerPage)
+        .then(
+            function(jsonObj) {
+              if (jsonObj.error) {
+                $scope.ecdapp.execData = [];
+                $scope.ecdapp.isExecDataLoading = false;
+              } else {
+                $scope.ecdapp.totalPages = jsonObj.totalPages;
+                $scope.ecdapp.execData = jsonObj.items;
+                $scope.ecdapp.isExecDataLoading = false;
+              }
+            }, function(error) {
+              $log.error("execViewCtlr.updateExec failed: " + error);
+              $scope.ecdapp.isExecDataLoading = false;
+            });
+  };
+  
+  var getExecutionForId = function() {
+    $scope.ecdapp.isExecDataLoading = true;
+    InventoryExecutionService.getExecutionsById($scope.ecdapp.execId, 
+        $scope.ecdapp.selectedTenant, $scope.ecdapp.currentPage, $scope.ecdapp.viewPerPage)
+        .then(
+            function(jsonObj) {
+              if (jsonObj.error) {
+                $scope.ecdapp.execData = [];
+                $scope.ecdapp.isExecDataLoading = false;
+              } else {
+                $scope.ecdapp.totalPages = jsonObj.totalPages;
+                $scope.ecdapp.execData = jsonObj.items;
+                $scope.ecdapp.isExecDataLoading = false;
+              }
+            }, function(error) {
+              $log.error("execViewCtlr.getExecutionsById failed: " + error);
+              $scope.ecdapp.isExecDataLoading = false;
+            });
+  };
+  /**
+   * Invoked at first page load AND when
+   * user clicks on the B2B pagination control. 
+   */
+  $scope.pageChangeHandler = function(page) {
+    $scope.ecdapp.currentPage = page;
+    if ($scope.ecdapp.selectedTenant != '') {
+      getPerTenantExecutions();
+    }
+  }
+  
+  var getDeploymentsCount = function() {
+    $scope.ecdapp.isDepDataLoading = true;
+    $scope.ecdapp.execData = [];
+    InventoryDeploymentService.getDeploymentCount($scope.ecdapp.searchByDep).then(
+        function(jsonObj) {
+          if (jsonObj.error) {
+            $log.error("execViewCtlr.getDeploymentscount failed: "
+                + jsonObj.error);
+            $scope.ecdapp.depCount = 0;
+            $scope.ecdapp.depObjList = [];
+          } else {
+            $scope.ecdapp.depCount = jsonObj.totalItems;
+            $scope.ecdapp.depObjList = jsonObj.items;
+            $scope.ecdapp.isDepDataLoading = false;
+          }
+        },
+        function(error) {
+          $log.error("execViewCtlr.getDeploymentscount failed: "
+              + error);
+          $scope.ecdapp.isDepDataLoading = false;
+          $scope.ecdapp.depCount = 0;
+        });
+  }; 
+  
+  var getPluginsCount = function() {
+    $scope.ecdapp.isPluginDataLoading = true;
+    ControllerService.getPluginsCount().then(
+        function(jsonObj) {
+          if (jsonObj.error) {
+            $log.error("execViewCtlr.getPluginsCount failed: "
+                + jsonObj.error);
+            $scope.ecdapp.isPluginDataLoading = false;
+            $scope.ecdapp.pluginCount = 0;
+          } else {
+            $scope.ecdapp.pluginCount = jsonObj.totalItems;
+            $scope.ecdapp.isPluginDataLoading = false;
+          }
+        },
+        function(error) {
+          $log.error("execViewCtlr.getPluginsCount failed: "
+              + error);
+          $scope.ecdapp.pluginCount = 0;
+          $scope.ecdapp.isPluginDataLoading = false;
+        });
+  }; 
+  var getOwners = function() {
+    InventoryBlueprintService.getOwnersList().then(
+        function(jsonObj) {
+          if (jsonObj.error) {
+            $log.error("execViewCtlr.getOwnersList failed: "
+                + jsonObj.error);
+            $scope.ecdapp.bpOwners = [];
+          } else {
+            $scope.ecdapp.bpOwners = jsonObj;
+            localStorageService.set('bpOwners', JSON.stringify(jsonObj));
+          }
+        },
+        function(error) {
+          $log.error("execViewCtlr.getOwnersList failed: "
+              + error);
+          $scope.ecdapp.bpOwners = [];
+        });
+  };
+  
+	// Initialize the page
+	getTenants();
+	getAppLabel();
+	getBlueprintsCount();
+	getDeploymentsCount();
+	getOwners();
+	getPluginsCount();
+	getActiveExecutions();
+  $scope.$on('$destroy', function() {
+    $scope.ecdapp.stopLoading();
+  });
+});
diff --git a/ccsdk-app-os/src/main/webapp/app/ccsdk/home/executions_view.html b/ccsdk-app-os/src/main/webapp/app/ccsdk/home/executions_view.html
new file mode 100644
index 0000000..09d9814
--- /dev/null
+++ b/ccsdk-app-os/src/main/webapp/app/ccsdk/home/executions_view.html
@@ -0,0 +1,377 @@
+<div id="page-content">
+  <br>
+  <h4 class="heading-page" id="controllers">Dashboard</h4>
+  <hr class="lite">
+  <div class="span3 form-row btn-switch-label" style="margin-top: -60px;float: right;">
+      <div class="tooltip" b2b-tooltip trigger="focus">
+          <a  href="javascript:void(0)" class="tooltip-element"  data-placement="left" role="button"
+          style="text-decoration: none; margin-right: 10px;">
+              Access Type
+              <div class="arrow"></div>
+          </a>
+          <div class="tooltip-wrapper" role="tooltip" aria-live="polite" aria-atomic="false" style="z-index:1111">
+              <div class="tooltip-size-control">
+                  <div class="helpertext" tabindex="-1" role="tooltip" id="tooltiptext1">  
+                      <div class="popover-title">My Dashboard</div>  
+                      <div class="popover-content">
+                          <p>Toggle access type selection between logged in user's data or user role group data.</p>
+                          <strong class="hidden-spoken">Double tap to close help message.</strong>
+                      </div>
+                  </div>
+              </div>
+          </div>                           
+    </div>
+      <!--  <span aria-hidden="true">Access level</span>-->
+    <div b2b-switches-v2 id="switch1" style="margin-top: -5px;" ng-model="ecdapp.level_switch.value" options="ecdapp.level_options" ng-disabled="allDisabled" ng-change="ecdapp.toggleUserFilt()">
+    </div>
+  </div>
+  <div class="span3 form-row btn-switch-label">
+      <div class="tooltip" b2b-tooltip trigger="focus">
+          <a  href="javascript:void(0)" class="tooltip-element"  data-placement="left" role="button"
+          style="text-decoration: none; margin-right: 10px;">
+              Auto Refresh
+              <div class="arrow"></div>
+          </a>
+          <div class="tooltip-wrapper" role="tooltip" aria-live="polite" aria-atomic="false" style="z-index:1111">
+              <div class="tooltip-size-control">
+                  <div class="helpertext" tabindex="-1" role="tooltip" id="tooltiptext1">  
+                      <div class="popover-title">Reload data automatically</div>  
+                  </div>
+              </div>
+          </div>                           
+    </div>
+      <!--  <span aria-hidden="true">Access level</span>-->
+    <div b2b-switches-v2 id="switch2" ng-model="ecdapp.inv_load.value" options="ecdapp.inv_query_options" >
+    </div>
+  </div>
+  <button title="Expand/Collapse Tiles Container" class="collapsible"></button>
+  <div class="content">
+  <div class="b2b-card-container">
+    <div class="row">
+      <div class="span3 b2b-card-wid">
+        <div class="b2b-cards" style="border-radius: 8px;text-shadow: 1px 1px 7px #0574ac;border: 1px solid gray;border-top: 5px solid #0574ac;">
+          <div ng-show="ecdapp.isBpDataLoading" class="ng-scope ng-hide">
+            <div class="span" style="margin-bottom: 5px;">
+              <i class="icon-spinner small" role="img"></i>
+            </div>
+          </div>
+          <span class="tooltip" b2b-tooltip style="float: right; margin-top: -10px;">
+              <a href="#" class="icon-tooltip tooltip-element" tabindex="0" role="button" data-placement="bottom" aria-label="Help" aria-describedby="tooltiptextRadio" >
+                  <span class="arrow"></span>
+              </a>
+              <span class="tooltip-wrapper">
+                  <span class="tooltip-size-control">
+                      <span id="tooltiptextRadio" role="tooltip" aria-live="polite" aria-hidden="true" class="helpertext" tabindex="-1">  
+                          <span class="popover-title">Aggregate count of blueprints for user/role set</span>  
+                          <span class="popover-content">
+                              <span>Navigation link to blueprints Inventory screen</span>
+                              <strong class="hidden-spoken hidden-desktop">Double tap to close help message.</strong>
+                          </span>
+                      </span>
+                  </span>
+              </span>
+          </span>
+          <a ng-if="ecdapp.level_switch.value" href="ecd#/ibp/owner:{{userId}}">
+            <div class="b2b-card-header">
+              <i class="icon-documents-document" role="img" style="font-size: 35px;margin-top: -20px;margin-left: -20px;"></i>
+              <span class="b2b-title" > {{ecdapp.bpCount}} </span>
+            </div>
+            <div class="b2b-card-content"
+              style="text-align: center;">
+              BLUEPRINTS            
+            </div>
+          </a>
+          <a ng-if="!ecdapp.level_switch.value" href="ecd#/ibp/owner:group">
+            <div class="b2b-card-header">
+              <i class="icon-documents-document" role="img" style="margin-top: -20px; 
+              margin-left: -20px; font-size: 35px"></i>
+              <span class="b2b-title" > {{ecdapp.bpCount}} </span>
+            </div>
+            <div class="b2b-card-content"
+              style="text-align: center;">
+              BLUEPRINTS            
+            </div>
+          </a>
+        </div>
+      </div>
+      <div class="span3 b2b-card-wid">
+        <div class="b2b-cards" style="text-shadow: 1px 1px 7px #008744;border-radius:8px;border: 1px solid gray;border-top: 5px solid #008744;">
+          <div ng-show="ecdapp.isDepDataLoading" class="ng-scope ng-hide">
+            <div class="span" style="margin-bottom: 5px;">
+              <i class="icon-spinner small" role="img"></i>
+            </div>
+          </div>
+                    <span class="tooltip" b2b-tooltip style="float: right; margin-top: -10px;">
+              <a href="#" class="icon-tooltip tooltip-element" tabindex="0" role="button" data-placement="bottom" aria-label="Help" aria-describedby="tooltiptextRadio" >
+                  <span class="arrow"></span>
+              </a>
+              <span class="tooltip-wrapper">
+                  <span class="tooltip-size-control">
+                      <span id="tooltiptextRadio" role="tooltip" aria-live="polite" aria-hidden="true" class="helpertext" tabindex="-1">  
+                          <span class="popover-title">Aggregate count of deployments for user/role set</span>  
+                          <span class="popover-content">
+                              <span>Navigation link to cloudify deployments Inventory screen</span>
+                              <strong class="hidden-spoken hidden-desktop">Double tap to close help message.</strong>
+                          </span>
+                      </span>
+                  </span>
+              </span>
+          </span>
+          <a ng-if="ecdapp.level_switch.value" href="ecd#/idep/owner:{{userId}}">
+            <div class="b2b-card-header">
+              <i class="icon-misc-business" role="img" style="margin-top: -20px; 
+              margin-left: -20px; font-size: 35px"></i>
+              <span class="b2b-title"> {{ecdapp.depCount}} </span>
+            </div>
+            <div class="b2b-card-content"
+              style="text-align: center;">
+              DEPLOYMENTS
+            </div>
+          </a>
+          <a ng-if="!ecdapp.level_switch.value" href="ecd#/idep/owner:group">
+            <div class="b2b-card-header">
+              <i class="icon-misc-business" role="img" style="font-size: 35px;margin-top: -20px;margin-left: -20px;"></i>
+              <span class="b2b-title"> {{ecdapp.depCount}} </span>
+            </div>
+            <div class="b2b-card-content"
+              style="text-align: center;">
+              DEPLOYMENTS
+            </div>                     
+          </a>                   
+        </div>
+      </div>
+      <div class="span3 b2b-card-wid">
+        <div class="b2b-cards" style="text-shadow: 1px 1px 7px #e7d81e;border-radius:8px;border: 1px solid gray;border-top: 5px solid #e7d81e;">
+          <div ng-show="ecdapp.isPluginDataLoading" class="ng-scope ng-hide">
+            <div class="span" style="margin-bottom: 5px;">
+              <i class="icon-spinner small" role="img"></i>
+            </div>
+          </div>
+                    <span class="tooltip" b2b-tooltip style="float: right; margin-top: -10px;">
+              <a href="#" class="icon-tooltip tooltip-element" tabindex="0" role="button" data-placement="bottom" aria-label="Help" aria-describedby="tooltiptextRadio" >
+                  <span class="arrow"></span>
+              </a>
+              <span class="tooltip-wrapper">
+                  <span class="tooltip-size-control">
+                      <span id="tooltiptextRadio" role="tooltip" aria-live="polite" aria-hidden="true" class="helpertext" tabindex="-1">  
+                          <span class="popover-title">Aggregate count of cloudify plugins</span>  
+                          <span class="popover-content">
+                              <span>Navigation link to cloudify plugins screen</span>
+                              <strong class="hidden-spoken hidden-desktop">Double tap to close help message.</strong>
+                          </span>
+                      </span>
+                  </span>
+              </span>
+          </span>
+          <a href="ecd#/iplug">
+            <div class="b2b-card-header">
+              <i class="icon-controls-gear" role="img" style="font-size: 35px;margin-top: -20px;margin-left: -20px;"></i>
+              <span class="b2b-title"> {{ecdapp.pluginCount}} </span>
+            </div>
+            <div class="b2b-card-content"
+              style="text-align: center;">
+              PLUGINS
+            </div>
+          </a>                  
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="span9 row-nowrap" style="margin-bottom: 10px; float: right; margin-top: -30px;">
+    <div class="span6 form-row">
+      <div class="span12 field-group">
+      <input class="span12" list="bpList" type="input" ng-model="ecdapp.currentBpId" ng-change="ecdapp.updateDepl()" placeholder="Blueprints"/>
+      <span class="tooltip" style="float: right; margin-top: -30px;" b2b-tooltip>
+          <a href="#" class="icon-tooltip tooltip-element" tabindex="0" role="button" data-placement="bottom" aria-label="Help" aria-describedby="tooltiptextRadio" >
+              <span class="arrow"></span>
+          </a>
+          <span class="tooltip-wrapper">
+              <span class="tooltip-size-control">
+                  <span id="tooltiptextRadio" role="tooltip" aria-live="polite" aria-hidden="true" class="helpertext" tabindex="-1">  
+                      <span class="popover-title">Blueprints list</span>  
+                      <span class="popover-content">
+                          <span>autocomplete dropdown list of blueprints, a selection will trigger deployment list query</span>
+                          <strong class="hidden-spoken hidden-desktop">Double tap to close help message.</strong>
+                      </span>
+                  </span>
+              </span>
+          </span>
+      </span>
+      <datalist id="bpList">
+        <option ng-repeat="d in ecdapp.bpObjList" value="{{d.typeId}}">{{d.typeName}}</option>
+      </datalist>
+      </div>
+    </div>
+    <div class="span1 form-row">
+        <div ng-show="ecdapp.isDeplDataLoading" class="ng-scope ng-hide">
+          <div class="span" style="margin-bottom: 5px;">
+            <i class="icon-spinner small" role="img"></i>
+          </div>
+        </div>
+    </div>
+    <div class="span6 form-row">
+      <!--  <label for="depl">Deployments</label>-->
+
+      <div class="span12 field-group">
+      <input id="depInput" class="span12" list="depList" type="input" ng-model="ecdapp.currentDep" ng-change="ecdapp.updateExec()" placeholder="Deployments"/>
+      <span class="tooltip" style="float: right; margin-top: -30px;" b2b-tooltip>
+              <a href="#" class="icon-tooltip tooltip-element" tabindex="0" role="button" data-placement="bottom" aria-label="Help" aria-describedby="tooltiptextRadio" >
+                  <span class="arrow"></span>
+              </a>
+              <span class="tooltip-wrapper">
+                  <span class="tooltip-size-control">
+                      <span id="tooltiptextRadio" role="tooltip" aria-live="polite" aria-hidden="true" class="helpertext" tabindex="-1">  
+                          <span class="popover-title">Deployments list</span>  
+                          <span class="popover-content">
+                              <span>autocomplete dropdown list of deployments, a selection will trigger deployment executions query</span>
+                              <strong class="hidden-spoken hidden-desktop">Double tap to close help message.</strong>
+                          </span>
+                      </span>
+                  </span>
+              </span>
+          </span>
+      <datalist id="depList">
+        <option ng-repeat="d in ecdapp.depObjList" value="{{d.id}}:{{d.tenant_name}}">{{d.id}}</option>
+      </datalist>
+      </div>
+    </div>
+  </div>
+  </div>
+  <div ng-hide="ecdapp.errMsg"  style="margin-top: 40px;border: 1px solid gray;border-radius: 5px;padding: 10px;clear: both;border-top: 2px solid #0d2dca;">
+    <label for="executions-table">Executions</label>
+              <span class="tooltip" b2b-tooltip style="float: right; margin-top: -10px;">
+              <a href="#" class="icon-tooltip tooltip-element" tabindex="0" role="button" data-placement="bottom" aria-label="Help" aria-describedby="tooltiptextRadio" >
+                  <span class="arrow"></span>
+              </a>
+              <span class="tooltip-wrapper">
+                  <span class="tooltip-size-control">
+                      <span id="tooltiptextRadio" role="tooltip" aria-live="polite" aria-hidden="true" class="helpertext" tabindex="-1">  
+                          <span class="popover-title">Executions summary table</span>  
+                          <span class="popover-content">
+                              <span>Current active executions are displayed by default. Use the search box to specify additional query filters for deployment executions. A deployment selection will automatically trigger a refresh of the executions table.</span>
+                              <strong class="hidden-spoken hidden-desktop">Double tap to close help message.</strong>
+                          </span>
+                      </span>
+                  </span>
+              </span>
+          </span>
+    <div id="button-search-row" style="float: right;width: 50%;">
+        <div class="advanced-search">
+          <input tabindex="0" style="padding-left: 50px;"
+            placeholder="Enter search filters from the dropdown menu"
+            class="advanced-search-input" type="text"></input>
+          <button type="button" id="show-menu-filters"
+            class="btn dropdown-toggle"
+            ng-click="ecdapp.toggleMoreFilters()" data-toggle="dropdown"
+            title="More Filters">
+            <i class="icon-controls-down"></i>
+          </button>
+        </div>
+        <div class="menu-filters" ng-show="ecdapp.showingMoreFilters" style="width: 40%;">
+          <div class="group">
+            <label class="col-sm-3 control-label">Execution ID: </label> <input
+              tabindex="0" class="advanced-search-input" type="text"
+              title="Search by execution ID"
+              ng-model="ecdapp.execId"></input>
+          </div>
+          <div class="group">
+            <label class="col-sm-3 control-label">Tenants: </label>
+              <div class="field-group">
+                <select class="span12" name="tenant" b2b-dropdown placeholder-text="Select Tenant" ng-model="ecdapp.selectedTenant">
+                <option b2b-dropdown-list option-repeat="d in ecdapp.availableTenants" value="{{d}}">{{d}}</option>
+                </select>
+              </div>
+          </div>
+          <div class="group">
+            <label class="col-sm-3 control-label">Status: </label>
+              <div class="field-group">
+                <select class="span12" name="status" b2b-dropdown placeholder-text="Select status" ng-model="ecdapp.selectedStatus">
+                <option b2b-dropdown-list option-repeat="d in ecdapp.availableStatus" value="{{d}}">{{d}}</option>
+                </select>
+              </div>
+          </div>
+          <div class="group" style="float: right;">
+            <button tabindex="-1" class="btn btn-small"
+              title="Reset Filters" type="button"
+              ng-click="ecdapp.resetFilters()">
+              <i class="icon-arrows-update-refresh-sync"></i>
+            </button>
+            <button tabindex="1" class="btn btn-small"
+              title="Filtered search" type="button"
+              ng-click="ecdapp.extendedfilterSrch()">
+              <i class="icon-controls-magnifyingglass"></i>
+            </button>
+          </div>
+        </div>
+    </div>
+    <hr class="lite" style="margin-top: 20px;">
+    <div ng-show="ecdapp.isExecDataLoading" class="ng-scope ng-hide">
+      <div class="span" style="margin-bottom: 5px;">
+        <i class="icon-spinner small" role="img"></i>
+      </div>
+    </div>
+    <div b2b-table id="executions-table" class="b2b-table-div"
+      table-data="ecdapp.execData" search-string="ecdapp.searchString"
+      current-page="ecdapp.currentPageIgnored"
+      next-sort="ecdapp.nextSortIgnored">
+      <table>
+        <thead b2b-table-row type="header">
+          <tr id="th-header-row">
+            <th b2b-table-header key="index"></th>
+            <th b2b-table-header key="deployment_id">Deployment</th>
+            <th b2b-table-header key="workflow_id">Workflow</th>
+            <th b2b-table-header key="created_at">Created</th>
+            <th b2b-table-header key="ended_at">Ended</th>          
+            <th b2b-table-header key="tenant_name">Tenant</th>
+            <th b2b-table-header key="status">Status</th>
+          </tr>
+        </thead>
+        <tbody b2b-table-row type="body"
+          ng-repeat="rowData in ecdapp.execData">
+          <tr id="tr-rowData">
+            <td b2b-table-body>
+              <div class="id-tooltip"><span>ID</span>
+                <div class="wrapper">
+                    <button style="border-radius: 5px;margin-right: 20px;font-weight: lighter;border: 1px solid black;" 
+                    ng-click="ecdapp.copyStringToClipboard(rowData.id)" class="">Copy ID</button>
+                  <span class="id-tooltiptext">{{rowData.id}}</span>
+                </div>
+              </div>
+            </td>
+            <!--  <td b2b-table-body>ID</td>-->
+            <td b2b-table-body>
+             <a href="ecd#/idep/tenant:{{rowData.tenant_name}};serviceRef:{{rowData.deployment_id}}">
+                      {{rowData.deployment_id}}
+             </a>
+            </td>
+            <td b2b-table-body ng-bind="rowData.workflow_id" />
+            <td b2b-table-body ng-bind="rowData.created_at" />
+            <td b2b-table-body ng-bind="rowData.ended_at" />
+            <td b2b-table-body ng-bind="rowData.tenant_name" />
+            <!--  <td b2b-table-body ng-bind="rowData.id" />-->
+            <td b2b-table-body ng-if="rowData.status == 'pending'" >
+              <span class="ng-scope" style="background-color: #edef8e;padding: 5px;border-radius: 3px; opacity: 0.6; font-weight: bold;">waiting to start</span></td>
+            <td b2b-table-body ng-if="rowData.status == 'started'" >
+              <span class="ng-scope" style="background-color: ##f0fd2e;padding: 5px;border-radius: 3px; opacity: 0.6; font-weight: bold;">in-progress</span></td>
+            <td b2b-table-body ng-if="rowData.status == 'cancelling'" >
+              <span class="ng-scope" style="background-color: #cabdbd;padding: 5px;border-radius: 3px;opacity: 0.6; font-weight: bold;">cancel in progress</span></td>
+            <td b2b-table-body ng-if="rowData.status == 'force_cancelling'" >
+              <span class="ng-scope" style="background-color: #cabdbd;padding: 5px;border-radius: 3px;opacity: 0.6; font-weight: bold;"">force-cancelling in progress</span> </td>
+            <td b2b-table-body ng-if="rowData.status == 'cancelled'" >
+              <span class="ng-scope" style="background-color: #9a9690;padding: 5px;border-radius: 3px;opacity: 0.6; font-weight: bold;">cancelled</span>
+            </td>
+            <td b2b-table-body ng-if="rowData.status == 'terminated'" >
+              <span class="ng-scope" style="background-color: #62d826;padding: 5px;border-radius: 3px;opacity: 0.6; font-weight: bold;">successful</span>
+            </td>
+            <td b2b-table-body ng-if="rowData.status == 'failed'">
+              <span class="ng-scope" style="background-color: #fd2e2e;padding: 5px;border-radius: 3px;opacity: 0.6; font-weight: bold;">failed</span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div b2b-pagination="" total-pages="ecdapp.totalPages"
+      current-page="ecdapp.currentPageNum"
+      click-handler="pageChangeHandler" role="navigation"></div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/ccsdk-app-os/src/main/webapp/app/ccsdk/home/oom-style.css b/ccsdk-app-os/src/main/webapp/app/ccsdk/home/oom-style.css
new file mode 100644
index 0000000..df3e489
--- /dev/null
+++ b/ccsdk-app-os/src/main/webapp/app/ccsdk/home/oom-style.css
@@ -0,0 +1,658 @@
+/* Styles for ECOMP Controller Dashboard */
+
+.content-container {
+	min-height: 650px;
+	width: calc(100% - 50px);
+}
+
+.ecd-error-message {
+	font-size: 14px;
+	font-weight: bold;
+	color: red;
+}
+
+.ecd-icon-display {
+	font-size: 18px;
+}
+
+.ecd-icon-action {
+	font-size: 18px;
+}
+
+.ecd-icon-action:hover {
+	color: red;
+	text-decoration: none;
+}
+
+.selected {
+    background-color:#abb5e6;
+    color:black;
+    font-weight:bold;
+}
+.red-background {
+   background-color: #ff0000b3;
+ }
+.green-background {
+   background-color: #bbf0bb;
+ } 
+.td-error {
+    border-top: 2px dotted red;
+    border-bottom: 2px dotted red;
+    background-color: rgb(210, 190, 190);
+ }
+.menu {
+	display: none;
+	z-index: 1000;
+	border: 1px dotted;
+	border-radius: 5px;
+	padding: 10px;
+	width: 40%;
+	background: azure;
+	position: fixed;
+	overflow: scroll;
+        background: slategray;
+        color: white;
+        right: 20px;
+}
+
+.show-menu {
+	z-index: 800;
+}
+
+#show-menu {
+	display: none;
+}
+
+#show-menu:checked ~ .menu {
+	display: block;
+}
+
+#show-menu:checked ~ .show-menu {
+	color: blue;
+}
+
+.menu-off {
+	position: fixed;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	z-index: 700;
+	display: none;
+}
+
+.menu-off {
+	display: none;
+}
+
+#show-menu:checked ~ .menu-off {
+	display: block;
+}
+
+#show-menu:checked ~ .show-menu {
+	display: none;
+}
+
+.menu-off input[type=checkbox]:checked ~ .menu {
+	display: none;
+}
+
+.menu-off input[type=checkbox]:checked ~ .show-menu {
+	display: block;
+}
+
+.menu-filters {
+	display: block;
+	z-index: 1000;
+	border: 1px dotted;
+	border-radius: 5px;
+	padding: 10px;
+	width: 48%;
+	background: #ffffff;
+	position: absolute;
+	overflow: scroll;
+}
+
+.show-menu-filters {
+	z-index: 800;
+	color: blue;
+}
+
+#show-menu-filters[aria-expanded="true"] ~ .menu-filters {
+	display: block;
+}
+
+#show-menu-filters:checked ~ .show-menu-filters {
+	color: blue;
+}
+
+.menu-filters-off {
+	position: fixed;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	z-index: 700;
+	display: none;
+}
+
+.menu-filters-off {
+	display: none;
+}
+
+#show-menu-filters:checked ~ .menu-filters-off {
+	display: block;
+}
+
+#show-menu-filters:checked ~ .show-menu-filters {
+	display: none;
+}
+
+.menu-filters-off input[type=checkbox]:checked ~ .menu-filters {
+	display: none;
+}
+
+.menu-filters-off input[type=checkbox]:checked ~ .show-menu-filters {
+	display: block;
+}
+
+.ui-select-match .btn {
+	font-size: 1.5rem;
+	padding: 5px;
+}
+
+.ui-select-multiple.ui-select-bootstrap .ui-select-match .close {
+	font-size: 1.0em;
+	margin-left: 10px;
+}
+.advanced-search {
+	display: block;
+	position: relative;
+}
+
+.advanced-search .btn{
+	box-shadow: none;
+	position: absolute;
+	top: 5px;
+	right: 3px;
+	min-width: 10px;
+	width: 25px;
+	height: 25px;
+	padding: 1px 1px 1px 1px;
+	
+}
+
+.advanced-search i {
+	position: relative;
+	top: 0px;
+	right: 0px;
+	width: 20px;
+	height: 20px;
+	padding: 0px 0px 0px 0px;
+	margin: 0px 0px 0px 0px;
+}
+
+.advanced-search-input {
+    padding: 10px 19px 9px 18px;
+    font-size: 1.5rem;
+    border-radius: 8px;
+    width: 100%;
+}
+td > .btn-group {
+	min-width: 0;
+	width: auto;
+}
+
+.dropup,
+.dropdown {
+  position: relative;
+}
+.dropdown-toggle:focus {
+  outline: 0;
+}
+.dropdown-menu {
+  position: absolute;
+  z-index: 1000;
+  display: none;
+  min-width: 160px;
+  padding: 5px 0;
+  margin: 2px 0 0;
+  text-align: left;
+  list-style: none;
+  background-color: #fff;
+  -webkit-background-clip: padding-box;
+          background-clip: padding-box;
+  border: 1px solid #ccc;
+  border: 1px solid rgba(0, 0, 0, .15);
+  border-radius: 4px;
+  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
+          box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
+  top: 30px;
+  left: -10px;
+}
+.dropdown-menu.pull-right {
+  right: 0;
+  left: auto;
+}
+.dropdown-menu .divider {
+  height: 1px;
+  margin: 9px 0;
+  overflow: hidden;
+  background-color: #e5e5e5;
+}
+.dropdown-menu > li > a {
+  display: block;
+  padding: 3px 20px;
+  clear: both;
+  font-weight: normal;
+  line-height: 1.42857143;
+  color: #333;
+  white-space: nowrap;
+}
+.dropdown-menu > li > a:hover,
+.dropdown-menu > li > a:focus {
+  color: #262626;
+  text-decoration: none;
+  background-color: #f5f5f5;
+}
+.dropdown-menu > .active > a,
+.dropdown-menu > .active > a:hover,
+.dropdown-menu > .active > a:focus {
+  color: #fff;
+  text-decoration: none;
+  background-color: #337ab7;
+  outline: 0;
+}
+.dropdown-menu > .disabled > a,
+.dropdown-menu > .disabled > a:hover,
+.dropdown-menu > .disabled > a:focus {
+  color: #777;
+}
+.dropdown-menu > .disabled > a:hover,
+.dropdown-menu > .disabled > a:focus {
+  text-decoration: none;
+  cursor: not-allowed;
+  background-color: transparent;
+  background-image: none;
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+}
+.open > .dropdown-menu {
+  display: block;
+}
+.open > a {
+  outline: 0;
+}
+.dropdown-menu-right {
+  right: 0;
+  left: auto;
+}
+.dropdown-menu-left {
+  right: auto;
+  left: 0;
+}
+.dropdown-header {
+  display: block;
+  padding: 3px 20px;
+  font-size: 12px;
+  line-height: 1.42857143;
+  color: #777;
+  white-space: nowrap;
+}
+.dropdown-backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 990;
+}
+.pull-right > .dropdown-menu {
+  right: 0;
+  left: auto;
+}
+.dropup .caret,
+.navbar-fixed-bottom .dropdown .caret {
+  content: "";
+  border-top: 0;
+  border-bottom: 4px dashed;
+  border-bottom: 4px solid \9;
+}
+.dropup .dropdown-menu,
+.navbar-fixed-bottom .dropdown .dropdown-menu {
+  top: auto;
+  bottom: 100%;
+  margin-bottom: 2px;
+}
+@media (min-width: 768px) {
+  .navbar-right .dropdown-menu {
+    right: 0;
+    left: auto;
+  }
+  .navbar-right .dropdown-menu-left {
+    right: auto;
+    left: 0;
+  }
+}
+
+.dropdown-menu li {
+	margin-bottom: 5px;
+}
+
+.dropdown-menu li div {
+	padding-left: 5px;
+}
+
+.dropdown-menu li div i {
+	margin-right: 5px;
+}
+
+td > .btn-group > .btn {
+	min-width: 0;
+	color: #0568ae;
+}
+
+td > .btn-group > .btn> i {
+	font-size: 30px;
+}
+
+li > a.active {
+	font-weight: bolder;
+	outline: thin dotted #666;
+}
+
+tr:hover {
+	background-color: #f2f2f2;
+}
+
+tr:focus {
+	background-color: #f2f2f2;
+}
+
+.modalwrapper.modal-docked .modal-jumbo {
+    max-height: 100%;
+    height: 100%;
+    overflow: hidden;
+    top: 0;
+    width: 100%;
+    max-width: 100%;
+}
+
+#addAppDiv {
+	padding-left: 10px;
+    background: lightgray;
+    border-radius: 5px;
+    padding-bottom: 15px;
+}
+
+.field-group.error .error-msg {
+	color: red;
+    display: block;
+    font-size: 14px;
+    line-height: 14px;
+    font-family: "Omnes-ATT-W02-Medium";
+    position: relative;
+    padding-left: 18px;
+    margin-top: 10px;
+}
+
+.heading-page {
+	margin-bottom: 20px;
+}
+
+.footer-container {
+	top: 25px;
+}
+.b2b-dragdrop {
+	padding: 10px;
+}
+
+.my-tooltip {
+  position: relative;
+  display: inline;
+}
+
+.id-tooltip {
+  position: relative;
+  display: inline;
+}
+
+.id-tooltip > .id-tooltiptext, .id-tooltip > .wrapper {
+	display: flex;
+    visibility: hidden;
+    width: 400px;
+    background-color: #dbdde3;
+    white-space: pre-line;
+    border-radius: 6px;
+    padding: 10px;
+    position: absolute;
+    bottom: 25%;
+    left: 80%;
+    transition: opacity 0.3s;
+    border: 1px solid gray;
+}
+
+.id-tooltip:hover > .id-tooltiptext, .id-tooltip:hover > .wrapper {
+  pointer-events: auto;
+  visibility: visible;
+  opacity: 1;
+}
+.wrapper > .id-tooltiptext {
+    overflow-y: auto;
+    max-height: 400px;
+    display: block;
+    clear: both;
+} 
+
+.id-tooltip .id-tooltiptext::after {
+  content: "";
+  position: absolute;
+  top: 40%;
+  right: 100%; 
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: transparent #544f4f transparent transparent;
+}
+
+.wrapper {
+    position:relative;
+}
+
+.my-tooltip > .my-tooltiptext, .my-tooltip > .wrapper {
+	visibility: hidden;
+	width: 600px;
+	background-color: #647dd6;
+	color: #fff;
+	white-space: pre-line;
+	border-radius: 6px;
+	padding: 10px;
+	position: absolute;
+	z-index: 1;
+	bottom: 90%;
+	left: -5%;
+	opacity: 0;
+	transition: opacity 0.3s;
+    	overflow: visible;
+}
+
+.my-tooltip .my-tooltiptext::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: #555 transparent transparent transparent;
+}
+
+.my-tooltip:hover > .my-tooltiptext, .my-tooltip:hover > .wrapper {
+  pointer-events: auto;
+  visibility: visible;
+  opacity: 1;
+}
+.wrapper > .my-tooltiptext {
+    overflow-y: auto;
+    max-height: 400px;
+    display: block;
+    clear: both;
+} 
+
+.stat_tooltip {
+  position: relative;
+  display: inline-block;
+  top: -10px;
+}
+
+.gen_tooltip {
+	display: inline-block;
+	position: relative;
+}
+
+.gen_tooltip .gen_tooltiptext_r {
+    visibility: hidden;
+    width: 250px;
+    background-color: #647dd6;
+    color: #000;
+    text-align: center;
+    border-radius: 2px;
+    border: 1px solid rgba(0, 0, 0, .15);
+    padding: 5px 0;
+    position: absolute;
+    z-index: 100;
+    left: 110%;
+    top: -50%;	
+}
+
+.gen_tooltip .gen_tooltiptext_r::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  right: 100%; /* to the left of tooltip */
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: transparent #fff transparent transparent;
+}
+
+.gen_tooltip:hover .gen_tooltiptext_r {
+  visibility: visible;
+}
+
+.stat_tooltip .stat_tooltiptext, .stat_tooltip .wrapper {
+    visibility: hidden;
+    width: 500px;
+    background-color: #c8d1f0;
+    color: #000;
+    text-align: left;
+    border-radius: 6px;
+    border: 1px solid rgba(0, 0, 0, .15);
+    padding: 5px 0;
+    position: absolute;
+    z-index: 100;
+    bottom: 100%;
+    height: 200px;
+}
+
+.stat_tooltip .stat_tooltiptext::after, .stat_tooltip .wrapper::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 4%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: rgba(0, 0, 0, .15) transparent transparent transparent;
+}
+
+.stat_tooltip:hover .stat_tooltiptext, .stat_tooltip:hover .wrapper {
+  visibility: visible;
+}
+
+.stat_tooltip .wrapper .clip-btn-div {
+    display: inline;
+    left: 50px;
+    top: 80px;
+}
+
+.b2b-card-container {
+	background-color: #ffffff; 
+}
+
+.b2b-cards {
+	transition: .5s;
+	opacity: .7;
+}
+.b2b-cards a {
+	text-decoration: none;	
+}
+
+.b2b-cards:hover {
+  box-shadow: 0px 0px 20px 10px #eccc5e;
+  text-shadow: none !important;
+  background-color: #ffffff !important;
+  opacity: 1;
+  
+}
+
+.b2b-cards .tooltip {
+	visibility: hidden;
+}
+
+.b2b-cards:hover .tooltip {
+	visibility: visible;
+}
+
+.b2b-cards .b2b-card-footer-flyout {
+	visibility: hidden;
+}
+
+.b2b-cards:hover .b2b-card-footer-flyout {
+	visibility: visible;
+}
+.b2b-card-header {
+    text-align: center;
+}
+
+.b2b-card-header i {
+	font-size: 35px;
+}
+.b2b-card-container .b2b-title {
+	font-size: 50px;
+}
+.b2b-card-content {
+	text-align: center;
+}
+
+.collapsible {
+    color: #2196F3;
+    cursor: pointer;
+    padding: 18px;
+    width: 100%;
+    border: none;
+    outline: none;
+    font-size: 25px;
+    font-weight: bolder;
+    background-color: #ffffff;
+    height: 2px;
+    margin-top: -30px;
+}
+
+.collapsible:after {
+  content: "\2796";
+  color: #2196F3;
+  float: right;
+  margin-left: 5px;
+}
+
+.collapsible.active:after {
+  content: '\02795';
+}
+
+.content {
+  padding: 0 18px;
+  height: auto;
+  display: block;
+  transition: max-height 0.2s ease-out;
+
+}
diff --git a/ccsdk-app-os/src/main/webapp/app/ccsdk/home/oom_spa.html b/ccsdk-app-os/src/main/webapp/app/ccsdk/home/oom_spa.html
new file mode 100644
index 0000000..378ddfe
--- /dev/null
+++ b/ccsdk-app-os/src/main/webapp/app/ccsdk/home/oom_spa.html
@@ -0,0 +1,151 @@
+<!--
+  ============LICENSE_START==========================================
+  ===================================================================
+  Copyright (C) 2020 AT&T Intellectual Property. All rights reserved.
+  ===================================================================
+ 
+  Unless otherwise specified, all software contained herein is licensed
+  under the Apache License, Version 2.0 (the "License");
+  you may not use this software except in compliance with the License.
+  You may obtain a copy of the License at
+ 
+              http://www.apache.org/licenses/LICENSE-2.0
+ 
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+ 
+  ============LICENSE_END============================================
+ -->
+ 
+<!DOCTYPE html>
+<!-- DCAE Dashboard single-page application using B2B/DS2. -->	
+<html>
+	<head>
+	<meta charset="UTF-8">
+	<title>DCAE Dashboard</title>
+    <link rel="icon" type="image/ico" href="app/ccsdk/images/onap_32x32.ico" />
+
+	<!-- Third-party scripts from EPSDK overlay -->	
+	<script src="app/fusion/external/angular-1.4.13/angular.js"></script>	
+	<script src="app/fusion/external/angular-1.4.13/angular-cookies.js"></script>	
+	<script src="app/fusion/external/angular-1.4.13/angular-messages.js"></script>	
+	<script src="app/fusion/external/angular-1.4.13/angular-route.js"></script>	
+	<script src="app/fusion/external/angular-1.4.13/angular-sanitize.js"></script>	
+	<script src="app/fusion/external/angular-1.4.13/angular-touch.js"></script>
+	<script src="app/fusion/external/jquery/dist/jquery.min.js"></script>
+	<script src="app/fusion/external/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
+	
+	<!-- Third-party scripts from app -->
+	<script src="app/ccsdk/external/bootstrap.min.js" type="text/javascript"></script>
+	<script src="app/ccsdk/external/yaml.js" type="text/javascript"></script>
+	<script src="app/ccsdk/external/index.js" type="text/javascript"></script>
+	<script src="app/ccsdk/external/select.js" type="text/javascript"></script>
+    <script src="app/ccsdk/external/angular-local-storage.js" type="text/javascript"></script>
+	<script src="app/fusion/external/b2b/js/b2b-angular/b2b-library.js"></script>
+  
+	<!-- Tweaked CSS -->
+	<link rel="stylesheet" type="text/css" href="app/fusion/external/b2b/css/b2b-angular/b2b-angular.css">
+	<link rel="stylesheet" type="text/css" href="app/fusion/external/b2b/css/b2b-angular/font_icons.css">
+
+	<!-- icons in open source -->
+	<link rel="stylesheet" type="text/css" href="app/fusion/external/ds2/css/digital-ng-library/ionicons.css">
+	<link rel="stylesheet" type="text/css" href="app/fusion/external/ds2/css/digital-ng-library/ecomp-ionicons.css">
+
+	<link rel="stylesheet" type="text/css" href="app/fusion/styles/ecomp.css">
+	<link rel="stylesheet" type="text/css" href="app/ccsdk/external/select.css">
+    <link rel="stylesheet" href="app/ccsdk/home/oom-style.css"/>  
+    
+    <!-- main app -->
+	<script src="app/ccsdk/home/modal-service.js"></script>
+	<script src="app/ccsdk/home/appDS2.js"></script> 
+
+	<!-- directives and services -->
+	<script src="app/fusion/scripts/DS2-services/userInfoServiceDS2.js"></script>
+	<script src="app/fusion/scripts/DS2-services/headerServiceDS2.js"></script>
+	<script src="app/fusion/scripts/DS2-services/manifestService.js"></script>
+	<script src="app/fusion/scripts/DS2-directives/footer.js"></script>
+	<script src="app/fusion/scripts/DS2-directives/ds2Header.js"></script>
+	<script src="app/fusion/scripts/DS2-services/leftMenuServiceDS2.js"></script>
+	<script src="app/fusion/scripts/DS2-directives/ds2LeftMenu.js"></script>
+	<script src="app/fusion/scripts/DS2-directives/b2b-leftnav-ext.js"></script> 
+	 
+	<!-- OOM home -->
+	<script src="app/ccsdk/home/controller-service.js"></script>
+    <script src="app/ccsdk/home/executions-view-controller.js"></script>
+	<script src="app/ccsdk/home/api-docs-controller.js"></script>
+
+	<!-- Cloudify -->
+	<script src="app/ccsdk/cloudify/deployment-service.js"></script>
+	<script src="app/ccsdk/cloudify/deployment-controllers.js"></script>
+    <script src="app/ccsdk/cloudify/execution-service.js"></script>
+	<script src="app/ccsdk/cloudify/plugin-table-controller.js"></script>
+    <script src="app/ccsdk/cloudify/plugin-service.js"></script>
+    
+	<!--Inventory-->
+	<script src="app/ccsdk/inventory/blueprint-service.js"></script>
+	<script src="app/ccsdk/inventory/blueprint-controllers.js"></script>
+	<script src="app/ccsdk/inventory/deployment-service.js"></script>
+    <script src="app/ccsdk/inventory/execution-service.js"></script>
+  
+	<!-- Consul -->
+	<script src="app/ccsdk/consul/service-health-service.js"></script>	
+	<script src="app/ccsdk/consul/service-controllers.js"></script>
+	<script src="app/ccsdk/consul/node-table-controller.js"></script>
+	<script src="app/ccsdk/consul/node-health-service.js"></script>	
+	<script src="app/ccsdk/consul/node-services-controller.js"></script>
+	<script src="app/ccsdk/consul/datacenter-table-controller.js"></script>
+	<script src="app/ccsdk/consul/datacenter-health-service.js"></script>
+	
+	<!-- user admin pages --> 
+	<script src="app/fusion/scripts/DS2-services/adminService.js"></script>
+	<script src="app/fusion/scripts/DS2-services/ds2-profile/selfProfileService.js"></script> 
+	<script src="app/fusion/scripts/DS2-services/profileServiceDS2.js"></script>
+	<script src="app/fusion/scripts/DS2-controllers/ds-profile/post-controller.js"></script>
+	<script src="app/fusion/scripts/DS2-controllers/ds2-profile/self-profile-controller.js"></script> 
+	<script src="app/fusion/scripts/DS2-services/postSearch.js"></script>	  
+ 	<script src="app/fusion/scripts/DS2-controllers/profile-search-controller-DS2.js"></script>
+
+	<!-- app admin pages -->	
+	<script src="app/fusion/scripts/DS2-services/adminMenuService.js"></script>
+	<script src="app/fusion/scripts/DS2-controllers/admin-controller.js"></script>
+	<script src="app/fusion/scripts/DS2-controllers/admin-menu-edit.js"></script> 
+	<script src="app/fusion/scripts/DS2-controllers/usage-list-controller.js"></script>	  	
+	<script src="app/fusion/scripts/DS2-controllers/fn-menu-add-popup-controller.js"></script>
+	
+	<!-- main page -->
+	<script src="app/ccsdk/home/app-router.js"></script>
+
+	<style>
+		.csep-root1{
+		background: white;
+		}
+		.dropdown-submenu {
+	    position: relative;
+		}
+		
+		.dropdown-submenu .dropdown-menu {
+		    top: 0;
+		    left: 100%;
+		    margin-top: -1px;
+		}
+	</style>
+	
+	</head>
+	<body class="appBody" ng-app="abs">
+		<!-- double quotation marks are required for the popup templates - values are string literals -->
+  	  	<div ng-include src="'app/ccsdk/home/ecd_popup_templates.html'"></div>
+  	  	<div ng-include src="'app/ccsdk/cloudify/deployment_popups.html'"></div>
+  	  	<div ng-include src="'app/ccsdk/inventory/inventory_blueprint_popups.html'"></div>
+	    <div ng-include src="'app/ccsdk/inventory/inventory_execution_popups.html'"></div>  
+        <div ng-include src="'app/ccsdk/inventory/inventory_deployment_popups.html'"></div> 
+        <div ng-include src="'app/ccsdk/consul/service_popups.html'"></div>
+	    <div ng-include src="'app/ccsdk/consul/node_popups.html'"></div>
+		<div ds2-header id="header" class="header-container"></div>
+		<div ds2-menu id="menu-container" class="menu-container"></div>
+		<div ng-view id="rightContentProfile" class="content-container"></div>		
+		<div ds2-footer class="footer-container"></div> 
+	</body>
+</html>
diff --git a/ccsdk-app-os/src/main/webapp/app/ccsdk/images/ecomp.png b/ccsdk-app-os/src/main/webapp/app/ccsdk/images/ecomp.png
new file mode 100644
index 0000000..b355f10
--- /dev/null
+++ b/ccsdk-app-os/src/main/webapp/app/ccsdk/images/ecomp.png
diff --git a/ccsdk-app-os/src/main/webapp/app/ccsdk/images/onap_16x16.ico b/ccsdk-app-os/src/main/webapp/app/ccsdk/images/onap_16x16.ico
new file mode 100644
index 0000000..8eb0495
--- /dev/null
+++ b/ccsdk-app-os/src/main/webapp/app/ccsdk/images/onap_16x16.ico
diff --git a/ccsdk-app-os/src/main/webapp/app/ccsdk/images/onap_32x32.ico b/ccsdk-app-os/src/main/webapp/app/ccsdk/images/onap_32x32.ico
new file mode 100644
index 0000000..e434286
--- /dev/null
+++ b/ccsdk-app-os/src/main/webapp/app/ccsdk/images/onap_32x32.ico
diff --git a/ccsdk-app-os/src/main/webapp/app/ccsdk/images/onap_logo_2257x496.png b/ccsdk-app-os/src/main/webapp/app/ccsdk/images/onap_logo_2257x496.png
new file mode 100644
index 0000000..36ee1f5
--- /dev/null
+++ b/ccsdk-app-os/src/main/webapp/app/ccsdk/images/onap_logo_2257x496.png
diff --git a/ccsdk-app-os/src/main/webapp/app/fusion/external/ds2/css/digital-ng-library/ecomp-ionicons.css b/ccsdk-app-os/src/main/webapp/app/fusion/external/ds2/css/digital-ng-library/ecomp-ionicons.css
index 8a27586..88bab24 100644
--- a/ccsdk-app-os/src/main/webapp/app/fusion/external/ds2/css/digital-ng-library/ecomp-ionicons.css
+++ b/ccsdk-app-os/src/main/webapp/app/fusion/external/ds2/css/digital-ng-library/ecomp-ionicons.css
@@ -56,7 +56,7 @@
 .icon-misc-trash:before, 
 .icon-misc-pen:before,
 .ion-navicon:before, 
-.icon-primary-close:before, .close:before, .reset-field:before,
+.icon-primary-close:before, .reset-field:before,
 .icon-datanetwork-softwareasaservice:before,
 .icon-datanetwork-messaging2:before,
 .icon-controls-settingsconnectedactivity:before,
@@ -184,7 +184,7 @@
 
 .icon-content-star:before { content: "\f24e"; }
 
-.icon-primary-close:before, .close:before, .reset-field:before { content: "\f129"; }
+.icon-primary-close:before, .reset-field:before { content: "\f129"; }
 
 .icon-datanetwork-softwareasaservice:before { content: "\f40c"; }