diff --git a/gateway/assets/index.html b/gateway/assets/index.html index b52d2e85..874c7ba8 100644 --- a/gateway/assets/index.html +++ b/gateway/assets/index.html @@ -17,9 +17,9 @@
- - - + + +
@@ -27,11 +27,11 @@
- OpenFaaS Icon -

  OpenFaaS Portal

- - - + OpenFaaS Icon +

  OpenFaaS Portal

+ + +
@@ -75,8 +75,8 @@ - Delete - + Delete + @@ -137,11 +137,16 @@ +
+ + + +
@@ -165,4 +170,4 @@ - + \ No newline at end of file diff --git a/gateway/assets/script/bootstrap.js b/gateway/assets/script/bootstrap.js index df9271a4..275cec95 100644 --- a/gateway/assets/script/bootstrap.js +++ b/gateway/assets/script/bootstrap.js @@ -5,193 +5,204 @@ 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 = ""; - $scope.invocation = { - contentType: "text" - }; + function($scope, $log, $http, $location, $timeout, $mdDialog, $mdToast, $mdSidenav) { + $scope.functions = []; + $scope.invocationInProgress = false; + $scope.invocationRequest = ""; + $scope.invocationResponse = ""; + $scope.invocationStatus = ""; + $scope.invocationStart = new Date().getTime(); + $scope.roundTripDuration = ""; + $scope.invocation = { + contentType: "text" + }; - $scope.toggleSideNav = function() { - $mdSidenav('left').toggle(); - }; + $scope.toggleSideNav = function() { + $mdSidenav('left').toggle(); + }; - $scope.functionTemplate = { - image: "", - envProcess: "", - network: "", - service: "" - }; + $scope.functionTemplate = { + image: "", + envProcess: "", + network: "", + service: "" + }; - $scope.invocation.request = "" + $scope.invocation.request = ""; - setInterval(function() { - refreshData(); - }, 1000); + setInterval(function() { + refreshData(); + }, 1000); - var showPostInvokedToast = function(message, duration) { - $mdToast.show( - $mdToast.simple() + var showPostInvokedToast = function(message, duration) { + $mdToast.show( + $mdToast.simple() .textContent(message) .position("top right") .hideDelay(duration || 500) - ); - }; - - $scope.fireRequest = function() { - var options = { - url: "/function/" + $scope.selectedFunction.name, - data: $scope.invocation.request, - method: "POST", - headers: { "Content-Type": $scope.invocation.contentType == "json" ? "application/json" : "text/plain" }, - responseType: $scope.invocation.contentType + ); }; - $scope.invocationInProgress = true; - $scope.invocationResponse = ""; - $scope.invocationStatus = null; - $http(options) - .then(function(response) { - if($scope.invocation && $scope.invocation.contentType == "json") { - $scope.invocationResponse = JSON.stringify(response.data, -1, " "); - } 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; + $scope.fireRequest = function() { + var options = { + url: "/function/" + $scope.selectedFunction.name, + data: $scope.invocation.request, + method: "POST", + headers: { "Content-Type": $scope.invocation.contentType == "json" ? "application/json" : "text/plain" }, + responseType: $scope.invocation.contentType + }; + $scope.invocationInProgress = true; + $scope.invocationResponse = ""; + $scope.invocationStatus = null; + $scope.roundTripDuration = ""; + $scope.invocationStart = new Date().getTime() - showPostInvokedToast("Error"); - }); - }; - - var refreshData = function() { - var previous = $scope.functions; - - var cl = function(previousItems) { - $http.get("/system/functions").then(function(response) { - if (response && response.data) { - if (previousItems.length != response.data.length) { - $scope.functions = response.data; + $http(options) + .then(function(response) { + if ($scope.invocation && $scope.invocation.contentType == "json") { + $scope.invocationResponse = JSON.stringify(response.data, -1, " "); } else { - for (var i = 0; i < $scope.functions.length; i++) { - for (var j = 0; j < response.data.length; j++) { - if ($scope.functions[i].name == response.data[j].name) { - $scope.functions[i].replicas = response.data[j].replicas; - $scope.functions[i].invocationCount = response.data[j].invocationCount; + $scope.invocationResponse = response.data; + } + $scope.invocationInProgress = false; + $scope.invocationStatus = response.status; + var now = new Date().getTime(); + $scope.roundTripDuration = (now - $scope.invocationStart) / 1000; + showPostInvokedToast("Success"); + + }).catch(function(error1) { + $scope.invocationInProgress = false; + $scope.invocationResponse = error1.statusText + "\n" + error1.data; + $scope.invocationStatus = error1.status; + var now = new Date().getTime(); + $scope.roundTripDuration = (now - $scope.invocationStart) / 1000; + + showPostInvokedToast("Error"); + }); + }; + + var refreshData = function() { + var previous = $scope.functions; + + var cl = function(previousItems) { + $http.get("/system/functions").then(function(response) { + if (response && response.data) { + if (previousItems.length != response.data.length) { + $scope.functions = response.data; + } else { + for (var i = 0; i < $scope.functions.length; i++) { + for (var j = 0; j < response.data.length; j++) { + if ($scope.functions[i].name == response.data[j].name) { + $scope.functions[i].replicas = response.data[j].replicas; + $scope.functions[i].invocationCount = response.data[j].invocationCount; + } } } } } - } + }); + }; + cl(previous); + } + + var fetch = function() { + $http.get("/system/functions").then(function(response) { + $scope.functions = response.data; }); }; - cl(previous); - } - var fetch = function() { - $http.get("/system/functions").then(function(response) { - $scope.functions = response.data; - }); - }; - - $scope.showFunction = function(fn) { - if ($scope.selectedFunction != fn) { - $scope.selectedFunction = fn; - $scope.invocation.request = ""; - $scope.invocationResponse = ""; - $scope.invocationStatus = ""; - $scope.invocationInProgress = false; - $scope.invocation.contentType = "text"; - } - }; - - 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) { - $scope.item = item; - $scope.closeDialog = function() { - $mdDialog.hide(); + $scope.showFunction = function(fn) { + if ($scope.selectedFunction != fn) { + $scope.selectedFunction = fn; + $scope.invocation.request = ""; + $scope.invocationResponse = ""; + $scope.invocationStatus = ""; + $scope.invocationInProgress = false; + $scope.invocation.contentType = "text"; + $scope.invocation.roundTripDuration = ""; + } }; - $scope.createFunc = function() { - var options = { - url: "/system/functions", - data: $scope.item, - method: "POST", - headers: { "Content-Type": "application/json" }, - responseType: "text" + 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) { + $scope.item = item; + $scope.closeDialog = function() { + $mdDialog.hide(); }; - $http(options) - .then(function(response) { - item.image = ""; - item.service = ""; - item.envProcess = ""; - item.network = ""; - $scope.validationError = ""; - $scope.closeDialog(); - showPostInvokedToast("Function created"); - }).catch(function(error1) { - $scope.validationError = error1.data; - }); - }; - }; - - $scope.newFunction = function() { - showDialog(); - }; - - $scope.deleteFunction = function($event) { - var confirm = $mdDialog.confirm() - .title('Delete Function') - .textContent('Are you sure you want to delete ' + $scope.selectedFunction.name + '?') - .ariaLabel('Delete function') - .targetEvent($event) - .ok('OK') - .cancel('Cancel'); - - $mdDialog.show(confirm) - .then(function() { + $scope.createFunc = function() { var options = { url: "/system/functions", - data: { - functionName: $scope.selectedFunction.name - }, - method: "DELETE", - headers: { "Content-Type": "application/json"}, - responseType: "json" + data: $scope.item, + method: "POST", + headers: { "Content-Type": "application/json" }, + responseType: "text" }; - return $http(options); - }).then(function(){ - showPostInvokedToast("Success"); - }).catch(function(err) { - if (err) { - // show error toast only if there actually is an err. - // because hitting 'Cancel' also rejects the promise. - showPostInvokedToast("Error"); - } - }); - }; + $http(options) + .then(function(response) { + item.image = ""; + item.service = ""; + item.envProcess = ""; + item.network = ""; + $scope.validationError = ""; + $scope.closeDialog(); + showPostInvokedToast("Function created"); + }).catch(function(error1) { + $scope.validationError = error1.data; + }); + }; + }; - fetch(); -}]); + $scope.newFunction = function() { + showDialog(); + }; + + $scope.deleteFunction = function($event) { + var confirm = $mdDialog.confirm() + .title('Delete Function') + .textContent('Are you sure you want to delete ' + $scope.selectedFunction.name + '?') + .ariaLabel('Delete function') + .targetEvent($event) + .ok('OK') + .cancel('Cancel'); + + $mdDialog.show(confirm) + .then(function() { + var options = { + url: "/system/functions", + data: { + functionName: $scope.selectedFunction.name + }, + method: "DELETE", + headers: { "Content-Type": "application/json" }, + responseType: "json" + }; + + return $http(options); + }).then(function() { + showPostInvokedToast("Success"); + }).catch(function(err) { + if (err) { + // show error toast only if there actually is an err. + // because hitting 'Cancel' also rejects the promise. + showPostInvokedToast("Error"); + } + }); + }; + + fetch(); + } +]); \ No newline at end of file