Merge pull request #273 from ioantsaf/loading-statuses

[Bugs 7, 9] Loading statuses

webapp/frontend/app/controllers/deploy-app-1.js

@@ -5,11 +5,13 @@ export default Ember.Controller.extend({
   sortedInstances: Ember.computed.sort('instances', 'instanceSorting'),
   instanceSorting: ['name'],
   actions: {
-    deploy(application_id) {
+    deploy(application_id, instance_id) {
       if (!this.get("failure")) {
         var _this = this;
         Ember.run.later((function () {
           _this.set("request", false);
+          _this.controllerFor('lambda-app').set('deployWait', true);
+          _this.controllerFor('lambda-app').set('deployID', instance_id);
           _this.transitionToRoute('lambda-app', application_id);
         }), ENV.redirect_delay);
       }

webapp/frontend/app/controllers/deploy-app-2.js

@@ -10,6 +10,8 @@ export default Ember.Controller.extend({
         var _this = this;
         Ember.run.later((function () {
           _this.set("request", false);
+          _this.controllerFor('lambda-instance').set('deployWait', true);
+          _this.controllerFor('lambda-instance').set('deployID', application_id);
           _this.transitionToRoute('lambda-instance', instance_id);
         }), ENV.redirect_delay);
       }

webapp/frontend/app/controllers/lambda-app.js

@@ -10,6 +10,8 @@ export default Ember.Controller.extend({
   success_delete: false,
   delete_success_message: '',
   delete_error_message: '',
+  deployWait: false,
+  deployID: -1,
   actions: {
     withdraw: function(application_id, instance_id)
     {
@@ -61,6 +63,7 @@ export default Ember.Controller.extend({
             success: function () {
               _this.set('delete_success_message', 'Your request to delete the application was successfully sent to the server.');
               _this.set('success_delete', true);
+              _this.get('model.application').set('deleting', true);
               Ember.run.later((function () {
                 _this.set('success_delete', false);
                 _this.transitionToRoute('dashboard');

webapp/frontend/app/controllers/lambda-apps/index.js

@@ -62,6 +62,7 @@ export default Ember.ArrayController.extend({
             success: function () {
               _this.set('success_delete', true);
               _this.set('delete_success_message', 'Your request to delete the application was successfully sent to the server.');
+              _this.get('model').findBy('id', app_id).set('deleting', true);
               Ember.run.later((function () {
                 _this.set('success_delete', false);
               }), ENV.message_dismiss);

webapp/frontend/app/controllers/lambda-instance.js

@@ -9,6 +9,8 @@ export default Ember.Controller.extend({
   success_delete: false,
   delete_success_message: '',
   delete_error_message: '',
+  deployWait: false,
+  deployID: -1,
   actions: {
     close_alert: function()
     {

webapp/frontend/app/models/lambda-app.js

@@ -13,7 +13,8 @@ var LambdaApp = DS.Model.extend({
   lambda_instances: DS.hasMany('lambda-instance'),
   started: DS.attr('boolean'),
   deployed: DS.attr('boolean'),
-  execution_environment_name: DS.attr()
+  execution_environment_name: DS.attr(),
+  deleting: DS.attr('boolean')
 });
 
 export default LambdaApp;

webapp/frontend/app/routes/lambda-app.js

@@ -20,10 +20,22 @@ export default Ember.Route.extend(AuthenticatedRouteMixin, {
       application: this.store.findRecord('lambda-app', params.app_uuid,  { reload: true }),
       instances: this.store.peekAll('lambda-instance')
     };
-    if (this.store.peekAll('lambda-instance').get('length') === 0) {
+    if (this.store.peekAll('app-action').get('length') === 0) {
       hash.app = this.store.createRecord('app-action', {});
     }
-    return Ember.RSVP.hash(hash);
+
+    var _this = this;
+    return Ember.RSVP.hash(hash).then(function (hash) {
+      if (_this.controllerFor('lambda-app').get('deployWait')) {
+        var deployID = _this.controllerFor('lambda-app').get('deployID');
+        hash.instances.forEach(function (instance) {
+          if (instance.id === deployID) {
+            _this.controllerFor('lambda-app').set('deployWait', false);
+          }
+        });
+      }
+      return hash;
+    });
 
   },
 
@@ -35,6 +47,8 @@ export default Ember.Route.extend(AuthenticatedRouteMixin, {
 
   deactivate: function () {
     Ember.run.cancel(this.poll);
+    this.controllerFor('lambda-app').set('deployWait', false);
+    this.controllerFor('lambda-app').set('deployID', -1);
   },
 
   actions: {

webapp/frontend/app/routes/lambda-instance.js

@@ -19,7 +19,7 @@ export default Ember.Route.extend(AuthenticatedRouteMixin, {
 
     var hash = {
       instance: this.store.findRecord('lambda-instance', params.instance_uuid,  { reload: true }),
-      apps: this.store.peekAll('lambda-app'),
+      apps: this.store.peekAll('lambda-app')
     };
     if (this.store.peekAll('app-action').get('length') === 0) {
       hash.app = this.store.createRecord('app-action', {});
@@ -27,7 +27,19 @@ export default Ember.Route.extend(AuthenticatedRouteMixin, {
     if (this.store.peekAll('instance-action').get('length') === 0) {
       hash.instance_action = this.store.createRecord('instance-action', {});
     }
-    return Ember.RSVP.hash(hash);
+
+    var _this = this;
+    return Ember.RSVP.hash(hash).then(function (hash) {
+      if (_this.controllerFor('lambda-instance').get('deployWait')) {
+        var deployID = _this.controllerFor('lambda-instance').get('deployID');
+        hash.apps.forEach(function (app) {
+          if (app.id === deployID) {
+            _this.controllerFor('lambda-instance').set('deployWait', false);
+          }
+        });
+      }
+      return hash;
+    });
 
   },
 
@@ -39,6 +51,8 @@ export default Ember.Route.extend(AuthenticatedRouteMixin, {
 
   deactivate: function () {
     Ember.run.cancel(this.poll);
+    this.controllerFor('lambda-instance').set('deployWait', false);
+    this.controllerFor('lambda-instance').set('deployID', -1);
   },
 
   actions: {

webapp/frontend/app/templates/lambda-app.hbs

@@ -49,8 +49,18 @@
                           <br> The visible buttons represent the available
                           actions you may take depending on the <i>status</i> of the Application.
                           </div>
+                          {{#if model.application.deleting}}
+                            {{#tool-tip}}
+                              <button class="btn btn-danger btn-primary pull-right disabled has-tooltip"
+                                      data-tooltip-content="<center>The application is being deleted!</center>">
+                                  <i class="fa fa-times"></i> Deleting <i class="fa fa-spinner fa-spin"></i></button>
+                            {{/tool-tip}}
+                          {{else}}
+                            <button name="del-btn" id="del-btn" class="btn btn-danger btn-primary pull-right"
+                              {{action "delete_app" model.application.id}}><i class="fa fa-times"></i> Delete</button>
+                          {{/if}}
+
 
-                          <button name="del-btn" id="del-btn" class="btn btn-danger btn-primary pull-right" {{action "delete_app" model.application.id}}><i class="fa fa-times"></i> Delete</button>
                           {{#if (compare model.application.status_code '==' '0')}}
                             {{#link-to 'deploy-app-1' model.application.id}}
                                 <button class="btn btn-primary pull-right"
@@ -203,7 +213,7 @@
     </div>
     <!--row-->
 
-  {{#if model.instances}}
+  {{#if (logical-op 'or' model.instances deployWait)}}
 
   {{#if failure}}
       {{#each model.app.errors as |error|}}
@@ -241,14 +251,25 @@
                           <div class="col-ms-8 col-xs-8">
                                <table class="table table-bordered table-hover table-responsive">
                                     <thead>
+                                    {{#if model.instances}}
                                       <tr>
                                           <th>Instance Name</th>
                                           <th>Instance Status</th>
                                           <th>App started</th>
                                           <th>Actions</th>
                                       </tr>
+                                    {{/if}}
+                                    {{#if deployWait}}
+                                      <tr>
+                                          <th><span style="font-size: .9em;" class="label bg-orange">
+                                              The application is currently being deployed on an instance
+                                              <i class="fa fa-spinner fa-spin"></i>
+                                          </span></th>
+                                      </tr>
+                                    {{/if}}
                                     </thead>
                                     <tbody>
+
                                       {{#each sortedInstances as |li|}}
                                           <tr>
                                               <td>

webapp/frontend/app/templates/lambda-apps/index.hbs

@@ -117,7 +117,7 @@
                   <button class="btn btn-info btn-xs"><i class="fa fa-file-code-o"></i> Details</button>
                   {{/link-to}}
                 </td>
-                  <td>
+                <td>
                   {{#if (compare lambda-application.status_code '==' '0')}}
                     {{#link-to 'deploy-app-1' lambda-application.id}}
                         <button class="btn btn-primary btn-xs"
@@ -135,10 +135,20 @@
                         </button>
                     {{/tool-tip}}
                   {{/if}}
-                  </td>
-                  <td>
-                      <button name="del-btn" id="del-btn" class="btn btn-danger btn-xs" {{action "delete_app" lambda-application.id}}><i class="fa fa-times"></i> Delete</button>
-                  </td>
+                </td>
+                <td>
+                  {{#if lambda-application.deleting}}
+                    {{#tool-tip}}
+                      <button class="btn btn-danger btn-xs disabled has-tooltip"
+                              data-tooltip-content="<center>The application is being deleted!</center>">
+                          <i class="fa fa-times"></i> Deleting <i class="fa fa-spinner fa-spin"></i></button>
+                    {{/tool-tip}}
+                  {{else}}
+                    <button name="del-btn" id="del-btn" class="btn btn-danger btn-xs"
+                            {{action "delete_app" lambda-application.id}}>
+                        <i class="fa fa-times"></i> Delete</button>
+                  {{/if}}
+                </td>
               </tr>
               {{/each}}
 

webapp/frontend/app/templates/lambda-instance.hbs

@@ -315,16 +315,17 @@
       </div> <!-- box-primary -->
     </div> <!--col -->
   </div> <!--row-->
-  {{#if (compare model.apps.length "!==" 0)}}
 
-{{#if app_failure}}
-    {{#each model.app.errors as |error|}}
-          <div  class="alert alert-dismissable alert-danger" id="app_alert">
-            <button type="button" class="close" {{action "close_app_alert"}}>×</button>
-            {{error.message}}
-          </div>
-    {{/each}}
-{{/if}}
+  {{#if (logical-op 'or' model.apps deployWait)}}
+
+  {{#if app_failure}}
+      {{#each model.app.errors as |error|}}
+            <div  class="alert alert-dismissable alert-danger" id="app_alert">
+              <button type="button" class="close" {{action "close_app_alert"}}>×</button>
+              {{error.message}}
+            </div>
+      {{/each}}
+  {{/if}}
 
   {{#if app_request}}
         <div  class="alert alert-dismissable alert-success" id="app_alert">
@@ -349,12 +350,22 @@
             <div class="col-ms-7 col-xs-7">
               <table class="table table-bordered table-hover table-responsive">
                 <thead>
+                {{#if model.apps}}
                   <tr>
                     <th>Name</th>
                     <th>Type</th>
                     <th>Started</th>
                     <th>Actions</th>
                   </tr>
+                {{/if}}
+                {{#if deployWait}}
+                    <tr>
+                        <th><span style="font-size: .9em;" class="label bg-orange">
+                                              An application is currently being deployed on the instance
+                                              <i class="fa fa-spinner fa-spin"></i>
+                                          </span></th>
+                    </tr>
+                {{/if}}
                 </thead>
                 <tbody>
                   {{#each sortedApps as |application|}}