faas-rs/faas
1
0
Fork 0
mirror of https://github.com/openfaas/faas.git synced 2025-06-20 04:56:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add spinner during funciton invoke in the web ui

Browse Source 
**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
Download Patch File Download Diff File Expand all files Collapse all files

3
gateway/assets/index.html
View File

@ -115,10 +115,11 @@
</span> </span>
<div layout-gt-sm="row"> <div layout-gt-sm="row">
<md-input-container class="md-block" flex-gt-sm> <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> <span class="ng-scope">Invoke</span><div class="md-ripple-container"></div>
</button> </button>
</md-input-container> </md-input-container>
<md-progress-circular md-mode="indeterminate" ng-show="invocationInProgress"></md-progress-circular>
</div> </div>
<div layout-gt-sm="row"> <div layout-gt-sm="row">

6
gateway/assets/script/bootstrap.js vendored
View File

@ -7,6 +7,7 @@ var app = angular.module('faasGateway', ['ngMaterial']);
app.controller("home", ['$scope', '$log', '$http', '$location', '$timeout', '$mdDialog', '$mdToast', '$mdSidenav', app.controller("home", ['$scope', '$log', '$http', '$location', '$timeout', '$mdDialog', '$mdToast', '$mdSidenav',
function($scope, $log, $http, $location, $timeout, $mdDialog, $mdToast, $mdSidenav) { function($scope, $log, $http, $location, $timeout, $mdDialog, $mdToast, $mdSidenav) {
$scope.functions = []; $scope.functions = [];
$scope.invocationInProgress = false;
$scope.invocationRequest = ""; $scope.invocationRequest = "";
$scope.invocationResponse = ""; $scope.invocationResponse = "";
$scope.invocationStatus = ""; $scope.invocationStatus = "";
@ -41,7 +42,6 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$timeout', '$md
}; };
$scope.fireRequest = function() { $scope.fireRequest = function() {
var options = { var options = {
url: "/function/" + $scope.selectedFunction.name, url: "/function/" + $scope.selectedFunction.name,
data: $scope.invocation.request, 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" }, headers: { "Content-Type": $scope.invocation.contentType == "json" ? "application/json" : "text/plain" },
responseType: $scope.invocation.contentType responseType: $scope.invocation.contentType
}; };
$scope.invocationInProgress = true;
$scope.invocationResponse = ""; $scope.invocationResponse = "";
$scope.invocationStatus = null; $scope.invocationStatus = null;
@ -59,9 +60,11 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$timeout', '$md
} else { } else {
$scope.invocationResponse = response.data; $scope.invocationResponse = response.data;
} }
$scope.invocationInProgress = false;
$scope.invocationStatus = response.status; $scope.invocationStatus = response.status;
showPostInvokedToast("Success"); showPostInvokedToast("Success");
}).catch(function(error1) { }).catch(function(error1) {
$scope.invocationInProgress = false;
$scope.invocationResponse = error1.statusText + "\n" + error1.data; $scope.invocationResponse = error1.statusText + "\n" + error1.data;
$scope.invocationStatus = error1.status; $scope.invocationStatus = error1.status;
@ -105,6 +108,7 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$timeout', '$md
$scope.invocation.request = ""; $scope.invocation.request = "";
$scope.invocationResponse = ""; $scope.invocationResponse = "";
$scope.invocationStatus = ""; $scope.invocationStatus = "";
$scope.invocationInProgress = false;
$scope.invocation.contentType = "text"; $scope.invocation.contentType = "text";
} }
}; };