faas-rs/faas
1
0
Fork 0
mirror of https://github.com/openfaas/faas.git synced 2025-06-10 09:16:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Display function creation error in UI

Browse Source 
Signed-off-by: Alex Young <alex@heuris.io>
This commit is contained in:
Alex Young 2017-09-20 20:47:24 +01:00 committed by Alex Ellis
parent e69e8eaa3b
commit eed9641254
5 changed files with 61 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
gateway/assets/index.html
View File

@ -1,13 +1,9 @@
<html ng-app="faasGateway"> <html ng-app="faasGateway">
<head> <head>
<link href="https://fonts.googleapis.com/css?family=Rationale|Roboto+Mono|Roboto:300,400,400i,500,700" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Rationale|Roboto+Mono|Roboto:300,400,400i,500,700" rel="stylesheet">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css"> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
<!-- Angular Material CSS now available via Google CDN; version 1.0.7 used here -->
<link rel="stylesheet" href="style/angular-material.min.css">
<link rel="stylesheet" href="style/bootstrap.css"> <link rel="stylesheet" href="style/bootstrap.css">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png"> <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
@ -115,13 +111,13 @@
<md-card-title-text> <md-card-title-text>
<span class="md-headline"> <span class="md-headline">
Invoke function Invoke function
</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">
<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>
</div> </div>

26
gateway/assets/newfunction.html
View File

@ -1,40 +1,42 @@
<md-dialog aria-label="List dialog" layout="column" flex="70"> <md-dialog aria-label="List dialog" layout="column" flex="70">
<md-dialog-content class="md-padding"> <md-dialog-content class="md-padding">
<label>Define a function:</label> <label>Define a function:</label>
<form name="userForm"> <form name="userForm">
<div layout-gt-xs="row"> <div layout-gt-xs="row">
<md-input-container class="md-block" flex-gt-sm> <md-input-container class="md-block" flex-gt-sm>
<label>Image:</label> <label>Image:</label>
<input name="dockerImage" ng-model="item.image" required md-maxlength="200" minlength="4"> <input name="dockerImage" ng-model="item.image" required md-maxlength="200" minlength="4">
</md-input-container> </md-input-container>
</div> </div>
<div layout-gt-xs="row"> <div layout-gt-xs="row">
<md-input-container class="md-block" flex-gt-sm> <md-input-container class="md-block" flex-gt-sm>
<label>Service name:</label> <label>Service name:</label>
<input name="serviceName" ng-model="item.service" required md-maxlength="200" minlength="4"> <input name="serviceName" ng-model="item.service" required md-maxlength="200" minlength="4">
</md-input-container> </md-input-container>
</div> </div>
<div layout-gt-xs="row"> <div layout-gt-xs="row">
<md-input-container class="md-block" flex-gt-sm> <md-input-container class="md-block" flex-gt-sm>
<label>fProcess:</label> <label>fProcess:</label>
<input name="envProcess" ng-model="item.envProcess" required md-maxlength="200" minlength="1"> <input name="envProcess" ng-model="item.envProcess" required md-maxlength="200" minlength="1">
</md-input-container> </md-input-container>
</div> </div>
<div layout-gt-xs="row"> <div layout-gt-xs="row">
<md-input-container class="md-block" flex-gt-sm> <md-input-container class="md-block" flex-gt-sm>
<label>Network:</label> <label>Network:</label>
<input name="network" ng-model="item.network" required md-maxlength="200" minlength="4"> <input name="network" ng-model="item.network" required md-maxlength="200" minlength="4">
</md-input-container> </md-input-container>
</div> </div>
<div class="validation-error" layout-gt-xs="row" layout-align="start end">
<span ng-show="validationError">{{ validationError }}</span>
</div>
</form> </form>
</md-dialog-content> </md-dialog-content>
<md-dialog-actions> <md-dialog-actions>
<md-button ng-click="closeDialog()" class="md-secondary"> <md-button ng-click="closeDialog()" class="md-secondary">
Close Dialog Close Dialog
</md-button> </md-button>
<md-button ng-click="createFunc()" class="md-primary"> <md-button ng-click="createFunc()" class="md-primary">
Create Create
</md-button> </md-button>
</md-dialog-actions> </md-dialog-actions>
</md-dialog> </md-dialog>

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

@ -31,12 +31,12 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$timeout', '$md
refreshData(); refreshData();
}, 1000); }, 1000);
$scope.showPostInvokedToast = function(val) { var showPostInvokedToast = function(message, duration) {
$mdToast.show( $mdToast.show(
$mdToast.simple() $mdToast.simple()
.textContent(val) .textContent(message)
.position("top right") .position("top right")
.hideDelay(500) .hideDelay(duration || 500)
); );
}; };
@ -56,17 +56,16 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$timeout', '$md
.then(function(response) { .then(function(response) {
if($scope.invocation && $scope.invocation.contentType == "json") { if($scope.invocation && $scope.invocation.contentType == "json") {
$scope.invocationResponse = JSON.stringify(response.data, -1, " "); $scope.invocationResponse = JSON.stringify(response.data, -1, " ");
} else { } else {
$scope.invocationResponse = response.data; $scope.invocationResponse = response.data;
} }
$scope.invocationStatus = response.status; $scope.invocationStatus = response.status;
$scope.showPostInvokedToast("Success"); showPostInvokedToast("Success");
}).catch(function(error1) { }).catch(function(error1) {
$scope.invocationResponse = error1.statusText + "\n" + error1.data; $scope.invocationResponse = error1.statusText + "\n" + error1.data;
$scope.invocationStatus = error1.status; $scope.invocationStatus = error1.status;
$scope.showPostInvokedToast("Error"); showPostInvokedToast("Error");
}); });
}; };
@ -110,17 +109,17 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$timeout', '$md
} }
}; };
var showDialog=function($event) { var showDialog = function($event) {
var parentEl = angular.element(document.body); var parentEl = angular.element(document.body);
$mdDialog.show({ $mdDialog.show({
parent: parentEl, parent: parentEl,
targetEvent: $event, targetEvent: $event,
templateUrl: "newfunction.html", templateUrl: "newfunction.html",
locals: { locals: {
item: $scope.functionTemplate item: $scope.functionTemplate
}, },
controller: DialogController controller: DialogController
}); });
}; };
var DialogController = function($scope, $mdDialog, item) { var DialogController = function($scope, $mdDialog, item) {
@ -134,20 +133,22 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$timeout', '$md
url: "/system/functions", url: "/system/functions",
data: $scope.item, data: $scope.item,
method: "POST", method: "POST",
headers: { "Content-Type": "application/json"}, headers: { "Content-Type": "application/json" },
responseType: "json" responseType: "text"
}; };
$http(options) $http(options)
.then(function(response) { .then(function(response) {
$scope.invocationResponse = response.data; item.image = "";
$scope.invocationStatus = response.status; item.service = "";
item.envProcess = "";
item.network = "";
$scope.validationError = "";
$scope.closeDialog();
showPostInvokedToast("Function created");
}).catch(function(error1) { }).catch(function(error1) {
$scope.invocationResponse = error1; $scope.validationError = error1.data;
$scope.invocationStatus = null;
}); });
console.log($scope.item);
$scope.closeDialog();
}; };
}; };
@ -178,12 +179,12 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$timeout', '$md
return $http(options); return $http(options);
}).then(function(){ }).then(function(){
$scope.showPostInvokedToast("Success"); showPostInvokedToast("Success");
}).catch(function(err) { }).catch(function(err) {
if (err) { if (err) {
// show error toast only if there actually is an err. // show error toast only if there actually is an err.
// because hitting 'Cancel' also rejects the promise. // because hitting 'Cancel' also rejects the promise.
$scope.showPostInvokedToast("Error"); showPostInvokedToast("Error");
} }
}); });
}; };

5
gateway/assets/style/bootstrap.css vendored
View File

@ -49,3 +49,8 @@ md-input-container .md-errors-spacer {
.monospace { .monospace {
font-family: 'Roboto Mono', monospace; font-family: 'Roboto Mono', monospace;
} }
.validation-error {
color: red;
height: 52px;
}