From be4eea92a1e2c40d19dcb04b6b9261101ac9587a Mon Sep 17 00:00:00 2001
From: Lucas Roesler <roesler.lucas@gmail.com>
Date: Tue, 24 Oct 2017 10:44:29 +0200
Subject: [PATCH] Add spinner during funciton invoke in the web ui

**What**
- Add a simple sinner when the function is invoked
- Disable the invoke button until the request returns

Signed-off-by: Lucas Roesler <roesler.lucas@gmail.com>
---
 gateway/assets/index.html          | 3 ++-
 gateway/assets/script/bootstrap.js | 6 +++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/gateway/assets/index.html b/gateway/assets/index.html
index 4d6ea736..b52d2e85 100644
--- a/gateway/assets/index.html
+++ b/gateway/assets/index.html
@@ -115,10 +115,11 @@
                             </span>
                             <div layout-gt-sm="row">
                                 <md-input-container class="md-block" flex-gt-sm>
-                                    <button ng-click="fireRequest()" class="md-raised md-button md-ink-ripple" type="button">
+                                    <button ng-click="fireRequest()" class="md-raised md-button md-ink-ripple" type="button" ng-disabled="invocationInProgress">
                                         <span class="ng-scope">Invoke</span><div class="md-ripple-container"></div>
                                     </button>
                                 </md-input-container>
+                                <md-progress-circular md-mode="indeterminate" ng-show="invocationInProgress"></md-progress-circular>
                             </div>
 
                             <div layout-gt-sm="row">
diff --git a/gateway/assets/script/bootstrap.js b/gateway/assets/script/bootstrap.js
index 512e661b..df9271a4 100644
--- a/gateway/assets/script/bootstrap.js
+++ b/gateway/assets/script/bootstrap.js
@@ -7,6 +7,7 @@ var app = angular.module('faasGateway', ['ngMaterial']);
 app.controller("home", ['$scope', '$log', '$http', '$location', '$timeout', '$mdDialog', '$mdToast', '$mdSidenav',
         function($scope, $log, $http, $location, $timeout, $mdDialog, $mdToast, $mdSidenav) {
     $scope.functions = [];
+    $scope.invocationInProgress = false;
     $scope.invocationRequest = "";
     $scope.invocationResponse = "";
     $scope.invocationStatus = "";
@@ -41,7 +42,6 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$timeout', '$md
     };
 
     $scope.fireRequest = function() {
-
         var options = {
             url: "/function/" + $scope.selectedFunction.name,
             data: $scope.invocation.request,
@@ -49,6 +49,7 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$timeout', '$md
             headers: { "Content-Type": $scope.invocation.contentType == "json" ? "application/json" : "text/plain" },
             responseType: $scope.invocation.contentType
         };
+        $scope.invocationInProgress = true;
         $scope.invocationResponse = "";
         $scope.invocationStatus = null;
 
@@ -59,9 +60,11 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$timeout', '$md
                 } else {
                     $scope.invocationResponse = response.data;
                 }
+                $scope.invocationInProgress = false;
                 $scope.invocationStatus = response.status;
                 showPostInvokedToast("Success");
             }).catch(function(error1) {
+                $scope.invocationInProgress = false;
                 $scope.invocationResponse = error1.statusText + "\n" + error1.data;
                 $scope.invocationStatus = error1.status;
 
@@ -105,6 +108,7 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$timeout', '$md
             $scope.invocation.request = "";
             $scope.invocationResponse = "";
             $scope.invocationStatus = "";
+            $scope.invocationInProgress = false;
             $scope.invocation.contentType = "text";
         }
     };