mirror of
https://github.com/openfaas/faas.git
synced 2025-06-09 08:46:48 +00:00
Display function creation error in UI
Signed-off-by: Alex Young <alex@heuris.io>
This commit is contained in:
parent
e69e8eaa3b
commit
eed9641254
@ -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>
|
||||||
|
|
||||||
|
@ -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
55
gateway/assets/script/bootstrap.js
vendored
@ -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
5
gateway/assets/style/bootstrap.css
vendored
@ -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;
|
||||||
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user