Basic layout for application details page

src/plugins/cloud-foundry/cloud-foundry.scss

@@ -1 +1,7 @@
-// cloud-foundry.scss
+
+.action-bar {
+  height: $hpe-unit-space * 3;
+  line-height: $hpe-unit-space * 3;
+  vertical-align: middle;
+  margin-top: $hpe-unit-space;
+}

src/plugins/cloud-foundry/model/application/application.model.js

@@ -27,13 +27,14 @@
    * @param {app.api.apiManager} apiManager - the application API manager
    * @property {app.api.apiManager} apiManager - the application API manager
    * @property {app.api.applicationApi} applicationApi - the application API proxy
+   * @property {object} application - the currently focused application.
    * @class
    */
   function Application(apiManager) {
     this.apiManager = apiManager;
     this.applicationApi = this.apiManager.retrieve('cloud-foundry.api.Apps');
     this.data = {};
-
+    this.application = {};
   }
 
   angular.extend(Application.prototype, {
@@ -91,16 +92,16 @@
     },
 
     /**
-     * @function summary
+     * @function getAppSummary
      * @memberof cloud-foundry.model.application
      * @description get summary of an application at the model layer
      * @param {string} guid - the application id
      * @returns {promise}
      * @public
      */
-    summary: function (guid) {
-      return this.apiManager.retrieve('cloud-foundry.api.application')
-        .summary(guid)
+    getAppSummary: function (guid) {
+      return this.apiManager.retrieve('cloud-foundry.api.Apps')
+        .GetAppSummary(guid)
         .then(this.onSummary.bind(this));
     },
 
@@ -150,7 +151,7 @@
      * @returns {void}
      */
     onSummary: function (response) {
-      this.summary = response.data;
+      this.application.summary = response.data;
     }
 
   });

src/plugins/cloud-foundry/view/applications/application/application.html

@@ -1,6 +1,20 @@
-<ul>
-  <li><a ui-sref="cf.applications.application.summary({guid: applicationCtrl.id})">Summary</a></li>
-  <li><a ui-sref="cf.applications.application.services({guid: applicationCtrl.id})">Services</a></li>
+<div class="action-bar app-actions-bar panel panel-default col-md-12">
+  {{ appCtrl.model.application.summary.state }}
+  {{ appCtrl.model.application.summary.name }}
+
+  <div class="pull-right">
+    <span class="btn-group">
+      <button class="btn btn-default btn-info" translate>Restart</button>
+      <button class="btn btn-default btn-info" translate>Stop</button>
+    </span>
+    <button class="btn btn-default" translate>Launch App</button>
+  </div>
+</div>
+
+<ul class="nav nav-pills nav-stacked col-md-3">
+  <li><a ui-sref="cf.applications.application.summary({guid: appCtrl.id})" translate>Summary</a></li>
+  <li><a ui-sref="cf.applications.application.services({guid: appCtrl.id})" translate>Services</a></li>
 </ul>
 
-<div ui-view></div>
+<div ui-view class="col-md-9">
+</div>

src/plugins/cloud-foundry/view/applications/application/application.module.js

@@ -17,7 +17,7 @@
       url: '/:guid',
       templateUrl: 'plugins/cloud-foundry/view/applications/application/application.html',
       controller: ApplicationController,
-      controllerAs: 'applicationCtrl'
+      controllerAs: 'appCtrl'
     });
   }
 
@@ -37,9 +37,14 @@
   function ApplicationController(modelManager, $stateParams) {
     this.model = modelManager.retrieve('cloud-foundry.model.application');
     this.id = $stateParams.guid;
+    this.init();
   }
 
   angular.extend(ApplicationController.prototype, {
+
+    init: function () {
+      this.model.getAppSummary(this.id);
+    }
   });
 
 })();

src/plugins/cloud-foundry/view/applications/application/summary/summary.html

@@ -1 +1,50 @@
-<h1>Application Summary for {{ applicationSummaryCtrl.id }}</h1>
+<div class="panel panel-default">
+  <h5>Summary</h5>
+  <ul>
+    <li>
+        memory: {{ appCtrl.model.application.summary.memory }}
+    </li>
+
+    <li>
+        running_instances: {{ appCtrl.model.application.summary.running_instances }} / {{ appCtrl.model.application.summary.instances }}
+    </li>
+
+    <li>
+        disk_quota: {{ appCtrl.model.application.summary.disk_quota }}
+    </li>
+
+    <li>
+        buildpack: {{ appCtrl.model.application.summary.buildpack }}
+    </li>
+
+  </ul>
+</div>
+
+<div class="panel panel-default">
+  <h5>Services</h5>
+  <ul>
+    <li ng-repeat="service in appCtrl.model.application.summary.services">
+        {{ service }}
+    </li>
+  </ul>
+</div>
+
+
+<div class="panel panel-default">
+  <h5>Routes</h5>
+  <ul>
+    <li ng-repeat="route in appCtrl.model.application.summary.routes">
+        {{ route }}
+    </li>
+  </ul>
+</div>
+
+
+<div class="panel panel-default">
+  <h5>Instances</h5>
+  <ul>
+    <li ng-repeat="instance in appCtrl.model.application.summary.instances">
+        {{ instance }}
+    </li>
+  </ul>
+</div>