#68 Allow to visualize component information about an instance

src/app/instances/_instances.html

@@ -4,7 +4,7 @@
 <div class="content">
 	<h1>
 		Applications &raquo; {{ appName }}
-		<img src="img/spinner.gif" class="spinner" alt="..." ng-show="! invoked" />
+		<img src="img/spinner.gif" class="spinner" alt="..." ng-show="responseStatus === -1" />
 	</h1>
 </div>
 
@@ -21,16 +21,18 @@ <h1>
 <div class="content short-content">
 
 	<!-- Error message -->
-	<rbcf-error-message ng-show="error"></rbcf-error-message>
+	<rbcf-error-message ng-show="responseStatus > 0 && responseStatus !== 404"></rbcf-error-message>
+
+	<!-- No application? -->
+	<div ng-show="responseStatus === 404">No application called <strong>{{ appName }}</strong> was found.</div>
 
 	<!-- No instance? -->
-	<div class="block" ng-show="! error && invoked && rootNodes.length == 0">
+	<div class="block" ng-show="responseStatus === 0 && rootNodes.length == 0">
 		<p class="block-title">No Instance</p>
 
 		<div class="block-content">
 			<p>
-				No instance has been created so far.<br />
-				Or maybe this application does not exist.
+				No instance has been created so far.
 			</p>
 		</div>
 	</div>
@@ -57,7 +59,7 @@ <h1>
 			<div class="block-content" ng-show="rootNode.children.length === 0">
 				This root instance has no child.
 			</div>
-			
+
 			<ul>
 				<li class="listing" ng-repeat="childNode in rootNode.children" ng-include="'my-tmpl'"></li>
 			</ul>
@@ -66,17 +68,18 @@ <h1>
 
 	<!-- Display the details of an instance -->
 	<div id="right-block">
-		<p class="block-controls">
+		<div class="block-controls">
 			<button type="button" class="close" aria-label="Close" ng-click="hideInstance()"><span aria-hidden="true">&times;</span></button>
-		</p>
+		</div>
 		<div>
 			<h3>{{ selectedInstance.name }}</h3>
-				
+
 			<strong>Instance Path:</strong> {{ selectedInstance.path }}<br />
 			<strong>Instance Status:</strong> {{ formatStatus( selectedInstance.status )}}<br />
 			<strong>Component:</strong> {{ selectedInstance.component.name }}
 
-			<div class="instance-actions" ng-include="template"></div>
+			<div class="instance-actions" ng-include="'templates/instances/includes/life-cycle.html'" ng-show="details === 'LIFECYCLE'"></div>
+			<div class="instance-actions" ng-include="'templates/instances/includes/exported-variables.html'" ng-show="details === 'EXPORTS'"></div>
 		</div>
 	</div>
 

src/app/instances/includes/exported-variables.html

@@ -0,0 +1,8 @@
+
+<p>This instance exports the following variables.</p>
+<ul>
+	<li ng-repeat="(key,value) in selectedInstance.exports"><strong>{{ key }}</strong>: {{ value }}</li>
+</ul>
+
+<br />
+Go back to the <a href="" ng-click="showDetailsSection( 'LIFECYCLE' )">life cycle management</a>.

src/app/instances/includes/life-cycle.html

@@ -0,0 +1,8 @@
+
+<div class="instance-actions" ng-include="template"></div>
+
+<br />
+<strong>Additional Information</strong>
+<ul>
+	<li><a href="" ng-click="showDetailsSection( 'EXPORTS' )">Access the exported variables</a></li>
+</ul>

src/app/instances/instances.controller.listing.js

@@ -9,14 +9,14 @@
   function instancesListingController(Restangular, $scope, rUtils, $routeParams, rShare, $window) {
 
     // Fields
-    $scope.noError = true;
-    $scope.invoked = false;
+    $scope.responseStatus = -1;
     $scope.appName = $routeParams.appName;
     $scope.searchFilter = '';
     $scope.searchVisible = true;
     $scope.template = '';
     $scope.askToDelete = false;
     $scope.orderingCriteria = 'instance.name';
+    $scope.details = 'LIFECYCLE';
 
     // Menu actions
     $scope.menuActions = [
@@ -59,6 +59,7 @@
     $scope.createChildInstance = createChildInstance;
     $scope.replicateInstance = replicateInstance;
     $scope.deleteInstance = deleteInstance;
+    $scope.showDetailsSection = showDetailsSection;
 
     // Initial actions
     loadInstances();
@@ -67,14 +68,11 @@
     function loadInstances() {
       Restangular.all('app/' + $scope.appName + '/children?all-children=true')
       .getList().then(function(instances) {
+        $scope.responseStatus = 0;
         $scope.rootNodes = rUtils.buildInstancesTree(instances);
-        $scope.error = false;
 
-      }, function() {
-        $scope.error = true;
-      })
-      .finally(function() {
-        $scope.invoked = true;
+      }, function(response) {
+        $scope.responseStatus = response.status;
       });
     }
 
@@ -92,6 +90,10 @@
       $scope.template = findTemplateUrl(instance.status, isRoot, parentNotDeployed);
     }
 
+    function showDetailsSection(section) {
+      $scope.details = section;
+    }
+
     function hideInstance() {
       $scope.selectedInstance = null;
       rUtils.hideRightBlock();