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>
This commit is contained in:
Lucas Roesler
2017-10-24 10:44:29 +02:00
committed by Alex Ellis
parent fdbffa1e84
commit be4eea92a1
2 changed files with 7 additions and 2 deletions

View File

@ -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">

View File

@ -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";
}
};