From eed9641254006c96147d304933945903bc7d27be Mon Sep 17 00:00:00 2001 From: Alex Young Date: Wed, 20 Sep 2017 20:47:24 +0100 Subject: [PATCH] Display function creation error in UI Signed-off-by: Alex Young --- docker-compose.yml | 2 +- gateway/assets/index.html | 14 +++----- gateway/assets/newfunction.html | 40 +++++++++++---------- gateway/assets/script/bootstrap.js | 57 +++++++++++++++--------------- gateway/assets/style/bootstrap.css | 5 +++ 5 files changed, 61 insertions(+), 57 deletions(-) diff --git a/docker-compose.yml b/docker-compose.yml index 9d91cff9..49f95ec2 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -71,7 +71,7 @@ services: # Pass a username as an argument to find how many images user has pushed to Docker Hub. hubstats: - image: functions/hubstats:latest + image: functions/hubstats:latest labels: function: "true" depends_on: diff --git a/gateway/assets/index.html b/gateway/assets/index.html index 2f0292ad..beb39e5f 100644 --- a/gateway/assets/index.html +++ b/gateway/assets/index.html @@ -1,13 +1,9 @@ - + - - - - @@ -115,13 +111,13 @@ - Invoke function - + Invoke function +
+ Invoke
+
diff --git a/gateway/assets/newfunction.html b/gateway/assets/newfunction.html index bb841613..562770a1 100644 --- a/gateway/assets/newfunction.html +++ b/gateway/assets/newfunction.html @@ -1,40 +1,42 @@ - +
- - + +
- - + +
- - + +
- - + +
- +
+ {{ validationError }} +
- - - - Close Dialog - - - Create - - + + + + Close Dialog + + + Create + + diff --git a/gateway/assets/script/bootstrap.js b/gateway/assets/script/bootstrap.js index 8cccc0f6..512e661b 100644 --- a/gateway/assets/script/bootstrap.js +++ b/gateway/assets/script/bootstrap.js @@ -31,12 +31,12 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$timeout', '$md refreshData(); }, 1000); - $scope.showPostInvokedToast = function(val) { + var showPostInvokedToast = function(message, duration) { $mdToast.show( $mdToast.simple() - .textContent(val) + .textContent(message) .position("top right") - .hideDelay(500) + .hideDelay(duration || 500) ); }; @@ -56,17 +56,16 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$timeout', '$md .then(function(response) { if($scope.invocation && $scope.invocation.contentType == "json") { $scope.invocationResponse = JSON.stringify(response.data, -1, " "); - } else { - $scope.invocationResponse = response.data; + $scope.invocationResponse = response.data; } $scope.invocationStatus = response.status; - $scope.showPostInvokedToast("Success"); + showPostInvokedToast("Success"); }).catch(function(error1) { $scope.invocationResponse = error1.statusText + "\n" + error1.data; $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 parentEl = angular.element(document.body); - $mdDialog.show({ - parent: parentEl, - targetEvent: $event, - templateUrl: "newfunction.html", - locals: { - item: $scope.functionTemplate - }, - controller: DialogController - }); + var showDialog = function($event) { + var parentEl = angular.element(document.body); + $mdDialog.show({ + parent: parentEl, + targetEvent: $event, + templateUrl: "newfunction.html", + locals: { + item: $scope.functionTemplate + }, + controller: DialogController + }); }; var DialogController = function($scope, $mdDialog, item) { @@ -134,20 +133,22 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$timeout', '$md url: "/system/functions", data: $scope.item, method: "POST", - headers: { "Content-Type": "application/json"}, - responseType: "json" + headers: { "Content-Type": "application/json" }, + responseType: "text" }; $http(options) .then(function(response) { - $scope.invocationResponse = response.data; - $scope.invocationStatus = response.status; + item.image = ""; + item.service = ""; + item.envProcess = ""; + item.network = ""; + $scope.validationError = ""; + $scope.closeDialog(); + showPostInvokedToast("Function created"); }).catch(function(error1) { - $scope.invocationResponse = error1; - $scope.invocationStatus = null; + $scope.validationError = error1.data; }); - console.log($scope.item); - $scope.closeDialog(); }; }; @@ -178,12 +179,12 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$timeout', '$md return $http(options); }).then(function(){ - $scope.showPostInvokedToast("Success"); + showPostInvokedToast("Success"); }).catch(function(err) { if (err) { // show error toast only if there actually is an err. // because hitting 'Cancel' also rejects the promise. - $scope.showPostInvokedToast("Error"); + showPostInvokedToast("Error"); } }); }; diff --git a/gateway/assets/style/bootstrap.css b/gateway/assets/style/bootstrap.css index 8b6a7d74..a8cf57e6 100644 --- a/gateway/assets/style/bootstrap.css +++ b/gateway/assets/style/bootstrap.css @@ -49,3 +49,8 @@ md-input-container .md-errors-spacer { .monospace { font-family: 'Roboto Mono', monospace; } + +.validation-error { + color: red; + height: 52px; +}