TEAMFOUR-144 - Implement the states and notifications

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

@@ -1,53 +1,83 @@
 @import "view/applications/applications";
 
-// TODO may need to move these rule out to helio-ui-theme
+@mixin hpe-state($color, $icon, $bg-color) {
+  background-color: $bg-color;
+
+  &:first-of-type {
+    &:before {
+      @extend .helion-icon;
+      background-color: $color;
+      color: $bg-color;
+      content: $icon;
+    }
+  }
+}
+
 .action-bar {
   height: $hpe-unit-space * 3;
   line-height: $hpe-unit-space * 3;
   vertical-align: middle;
   margin-top: $hpe-unit-space;
-  padding-left: $hpe-unit-space;
+  padding-left: 0;
   padding-right: $hpe-unit-space;
 
-  .action-target-name {
-    display: inline-block;
-    font-size: $hpe-unit-space - 3px;
-    margin-left: $hpe-unit-space * .75;
+  .popover {
+    margin-left: 111px;
   }
 
   .action-target-state {
-    color: $brand-primary;
     display: inline-block;
-    font-size: $hpe-unit-space + 3px;
-  }
+    font-size: $hpe-unit-space;
+    width: $hpe-unit-space * 3;
+    height: $hpe-unit-space * 2.25;
+    line-height: 0;
+    padding: $hpe-unit-space;
 
-  .btn {
-    margin-left: $hpe-unit-space / 3;
-  }
-}
+    &:before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: $hpe-unit-space * 3;
+      height: $hpe-unit-space * 3;
+      padding: $hpe-unit-space;
+    }
+
+    &.app-state-STARTED-PENDING {
+      @include hpe-state($white, $helion-icon-Tab, $gray);
+    }
 
-table.table  {
-  > thead > tr > th,
-  > tbody > tr:not([table-inline-message]) > td,
-  > tfoot > tr > td {
+    &.app-state-STOPPED-PENDING {
+      @include hpe-state($white, $helion-icon-Halt-stop, $gray);
+    }
 
-    .icon-link {
-      color: $text-color;
-      text-decoration: none;
+    &.app-state--STARTED {
+      @include hpe-state($white, $helion-icon-Checkmark, $hpe-primary);
+    }
 
-      &:hover,
-      &:active {
-        color: $link-color;
-        text-decoration: none;
-      }
+    &.app-state--STOPPED {
+      @include hpe-state($white, $helion-icon-Halt-stop, $state-danger-bg);
     }
 
-    .helion-icon {
-      line-height: 0;
-      font-size: $hpe-unit-space;
-      vertical-align: middle;
+    &.app-state--ERROR {
+      @include hpe-state($state-danger-bg, $helion-icon-Critical_L, $white);
+    }
+
+    &.app-state-STALE-STARTED,
+    &.app-state-STALE-STOPPED,
+    &.app-state-STALE-ERROR {
+      @include hpe-state($state-warning-bg, $helion-icon-Alert, $white);
     }
   }
+
+  .action-target-name {
+    display: inline-block;
+    font-size: $hpe-unit-space - 3px;
+    margin-left: $hpe-unit-space * .75;
+  }
+
+  .btn {
+    margin-left: $hpe-unit-space / 3;
+  }
 }
 
 .action-header {
@@ -71,3 +101,4 @@ table.table  {
     }
   }
 }
+

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

@@ -27,14 +27,21 @@
    * @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} data - holding data.
    * @property {object} application - the currently focused application.
+   * @property {string} appStateSwitchTo - the state of currently focused application is switching to.
    * @class
    */
   function Application(apiManager) {
     this.apiManager = apiManager;
     this.applicationApi = this.apiManager.retrieve('cloud-foundry.api.Apps');
     this.data = {};
-    this.application = {};
+    this.application = {
+      summary: {
+        state: 'LOADING'
+      }
+    };
+    this.appStateSwitchTo = '';
   }
 
   angular.extend(Application.prototype, {
@@ -110,11 +117,12 @@
      * @memberof cloud-foundry.model.application
      * @description start an application
      * @param {string} guid - the application id
-     * @returns {promise}
+     * @returns {promise} a promise object
      * @public
      */
     startApp: function (guid) {
-      this.onAppStateChange();
+      this.appStateSwitchTo = 'STARTED';
+      this.application.summary.state = 'PENDING';
       return this.apiManager.retrieve('cloud-foundry.api.Apps')
         .UpdateApp(guid, {state: 'STARTED'}, {})
         .then(this.onAppStateChangeSuccess.bind(this), this.onAppStateChangeFailure.bind(this));
@@ -125,11 +133,12 @@
      * @memberof cloud-foundry.model.application
      * @description stop an application
      * @param {string} guid - the application id
-     * @returns {promise}
+     * @returns {promise} a promise object
      * @public
      */
     stopApp: function (guid) {
-      this.onAppStateChange();
+      this.appStateSwitchTo = 'STOPPED';
+      this.application.summary.state = 'PENDING';
       return this.apiManager.retrieve('cloud-foundry.api.Apps')
         .UpdateApp(guid, {state: 'STOPPED'}, {})
         .then(this.onAppStateChangeSuccess.bind(this), this.onAppStateChangeFailure.bind(this));
@@ -178,8 +187,7 @@
      * @function onFiles
      * @memberof  cloud-foundry.model.application
      * @description onFiles handler at model layer
-     * @parameter {string} response the return from the api call
-     * @property data - the return data from the api call
+     * @param {string} response the return from the api call
      * @private
      * @returns {void}
      */
@@ -199,17 +207,6 @@
       this.application.summary = response.data;
     },
 
-    /**
-     * @function onAppStateChange
-     * @memberof  cloud-foundry.model.application
-     * @description onAppStateChange handler at model layer
-     * @private
-     * @returns {void}
-     */
-    onAppStateChange: function () {
-      this.application.summary.state = 'PENDING';
-    },
-
     /**
      * @function onAppStateChangeSuccess
      * @memberof  cloud-foundry.model.application
@@ -220,6 +217,7 @@
      */
     onAppStateChangeSuccess: function (response) {
       this.application.summary.state = response.data.entity.state;
+      this.appStateSwitchTo = '';
     },
 
     /**
@@ -230,7 +228,8 @@
      * @returns {void}
      */
     onAppStateChangeFailure: function () {
-      this.application.summary.state = 'FAILED';
+      this.application.summary.state = 'ERROR';
+      this.appStateSwitchTo = '';
     }
   });
 

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

@@ -1,26 +1,31 @@
 <div class="action-bar app-actions-bar panel panel-default col-md-12">
-  <span class="action-target-state">
-    <i class="helion-icon helion-icon-Checkmark"></i>
+  <span class="action-target-state pull-left"
+    ng-class="'app-state-' + appCtrl.model.appStateSwitchTo + '-' + appCtrl.model.application.summary.state"
+    uib-popover="{{ appCtrl.model.appStateSwitchTo==='STALE' ? appCtrl.warningMsg : '' }} "
+    ng-attr-popover-trigger="mouseenter" popover-placement="bottom">
   </span>
-  <span class="action-target-name">
+  <span class="action-target-name pull-left">
     {{ appCtrl.model.application.summary.name }}
   </span>
 
   <div class="pull-right">
     <span class="btn-group">
-      <button class="btn btn-default btn-info"
+      <button class="btn btn-default btn-secondary"
         translate
+        ng-disabled="appCtrl.model.application.summary.state==='PENDING'"
         ng-click="appCtrl.model.restartApp(appCtrl.id)">
         Restart
       </button>
-      <button class="btn btn-default btn-info"
+      <button class="btn btn-default btn-secondary"
         translate
+        ng-disabled="appCtrl.model.application.summary.state==='PENDING' || appCtrl.model.application.summary.state==='STOPPED'"
         ng-click="appCtrl.model.stopApp(appCtrl.id)">
         Stop
       </button>
     </span>
     <button class="btn btn-default"
       translate
+      ng-disabled="appCtrl.model.application.summary.state==='PENDING' || appCtrl.model.application.summary.state==='STARTED'"
       ng-click="appCtrl.model.startApp(appCtrl.id)">
       Launch App
     </button>

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

@@ -34,11 +34,13 @@
    * @property {object} model - the Cloud Foundry Applications Model
    * @property {string} id - the application GUID
    * @property {number} tabIndex - index of active tab
+   * @property {string} warningMsg - warning message for application
    */
   function ApplicationController(modelManager, $stateParams) {
     this.model = modelManager.retrieve('cloud-foundry.model.application');
     this.id = $stateParams.guid;
     this.init();
+    this.warningMsg = gettext('The application needs to be restarted for highlighted variables to be added to the runtime.');
   }
 
   angular.extend(ApplicationController.prototype, {

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

@@ -20,10 +20,14 @@
         <dd class="pull-right">0 / {{ appCtrl.model.application.summary.disk_quota }} <span translate>MB</span></dd>
 
         <dt translate>STATE</dt>
-        <dd class="pull-right"></dd>
+        <dd class="pull-right">
+          {{ appCtrl.model.application.summary.state }}
+        </dd>
 
         <dt translate>MODIFIED</dt>
-        <dd class="pull-right"></dd>
+        <dd class="pull-right">
+          {{ appCtrl.model.application.summary.package_updated_at | date : 'M/d/yy h:mm:ss a' }}
+        </dd>
       </dl>
     </div>
     <div class="col-md-6">