Add Namespace Dropdown to Gateway UI

This PR adds a namespace dropdown for the openfaas
namespaces. If a user has non-default namespaces
installed then a user can select that namespace,
view functions in that namespace, invoke them from
the UI and delete them from that namespace.

Signed-off-by: Alistair Hey <alistair@heyal.co.uk>

gateway/assets/index.html

@@ -46,6 +46,15 @@
                 </md-toolbar>
 
                 <md-content layout-padding>
+
+                    <md-input-container>
+                        <md-select ng-model="namespaceSelect" placeholder="Select a Namespace">
+                            <md-option ng-click="setNamespace(namespace)" ng-value="namespace" ng-repeat="namespace in allNamespaces">
+                                Namespace(s): {{ namespace }}
+                            </md-option>
+                        </md-select>
+                    </md-input-container>
+
                     <md-list>
                         <md-list-item class="primary-item" ng-disabled="isFunctionBeingCreated" ng-click="newFunction()">
                             <md-icon style="margin-right: 16px" md-svg-icon="img/icons/ic_shop_two_black_24px.svg"></md-icon>
@@ -125,7 +134,7 @@
                                 </md-input-container>
                                 <md-input-container class="md-block function-url" flex-gt-sm>
                                     <label>URL</label>
-                                    <input ng-value="baseUrl + 'function/' + function.name" type="text" readonly="readonly">
+                                    <input ng-value="function.namespace === 'openfaas-fn' ? baseUrl + 'function/' + function.name : baseUrl + 'function/' + function.name + '.' + function.namespace" type="text" readonly="readonly">
                                     <md-icon ng-if="canCopyToClipboard" md-svg-src="img/icons/outline-file_copy-24px.svg" ng-click="copyClicked($event)"></md-icon>
                                 </md-input-container>
                             </div>

gateway/assets/script/bootstrap.js

@@ -17,6 +17,8 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$interval', '$f
         $scope.invocationStatus = "";
         $scope.invocationStart = new Date().getTime();
         $scope.roundTripDuration = "";
+        $scope.selectedNamespace = "openfaas-fn";
+        $scope.allNamespaces = ["openfaas-fn"];
         $scope.invocation = {
             contentType: "text"
         };
@@ -56,11 +58,19 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$interval', '$f
         };
 
         $scope.invocation.request = "";
+
         var fetchFunctionsDelay = 3500;
         var queryFunctionDelay = 2500;
 
+        var fetchNamespacesInterval = function() {
+            $http.get("../system/namespaces")
+                .then(function(response) {
+                    $scope.allNamespaces = response.data;
+                })
+        };
+        
         var fetchFunctionsInterval = $interval(function() {
-            refreshData();
+            refreshData($scope.selectedNamespace);
         }, fetchFunctionsDelay);
 
         var queryFunctionInterval = $interval(function() {
@@ -69,8 +79,13 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$interval', '$f
             }
         }, queryFunctionDelay);
 
+        $scope.setNamespace = function(namespace) {
+            $scope.selectedNamespace = namespace;
+          refreshData($scope.selectedNamespace)
+        }
+
         var refreshFunction = function(functionInstance) {
-            $http.get("../system/function/" + functionInstance.name)
+            $http.get("../system/function/" + functionInstance.name + "?namespace=" + $scope.selectedNamespace)
             .then(function(response) {
                 functionInstance.ready = (response.data && response.data.availableReplicas && response.data.availableReplicas > 0);
             })
@@ -94,8 +109,9 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$interval', '$f
                 requestContentType = "binary/octet-stream";
             }
 
+            var fnNamespace = ($scope.selectedNamespace !== "openfaas-fn") ? "." + $scope.selectedNamespace : "";
             var options = {
-                url: "../function/" + $scope.selectedFunction.name,
+                url: "../function/" + $scope.selectedFunction.name + fnNamespace,
                 data: $scope.invocation.request,
                 method: "POST",
                 headers: { "Content-Type": requestContentType },
@@ -182,11 +198,11 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$interval', '$f
                 });
         };
 
-        var refreshData = function () {
+        var refreshData = function (selectedNamespace) {
             var previous = $scope.functions;
 
             var cl = function (previousItems) {
-                $http.get("../system/functions").then(function (response) {
+                $http.get("../system/functions?namespace=" + selectedNamespace).then(function (response) {
                     if (response && response.data) {
                         if (previousItems.length != response.data.length) {
                             $scope.functions = response.data;
@@ -216,7 +232,7 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$interval', '$f
         }
 
         var fetch = function() {
-            $http.get("../system/functions").then(function(response) {
+            $http.get("../system/functions?namespace=" + $scope.selectedNamespace).then(function(response) {
                 $scope.functions = response.data;
             });
         };
@@ -527,7 +543,7 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$interval', '$f
             $mdDialog.show(confirm)
                 .then(function() {
                     var options = {
-                        url: "../system/functions",
+                        url: "../system/functions?namespace=" + $scope.selectedNamespace,
                         data: {
                             functionName: $scope.selectedFunction.name
                         },
@@ -549,6 +565,7 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$interval', '$f
         };
 
         fetch();
+        fetchNamespacesInterval();
     }
 ]);