* Added function store feature to the "Deploy New Function"

* This feature fetches function catalogs from openfaas/store and makes
  one-click deploy easy
  * You can switch between "From Store" or "Manually" by tabs

* Added icon to "Deploy New Function" button
* Added function search feature to the main UI

Signed-off-by: Ken Fukuyama <kenfdev@gmail.com>

reverted fixed tabs

Signed-off-by: Ken Fukuyama <kenfdev@gmail.com>

gateway/assets/script/bootstrap.js

@@ -2,10 +2,11 @@
 // Copyright (c) Alex Ellis 2017. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-var app = angular.module('faasGateway', ['ngMaterial']);
+var app = angular.module('faasGateway', ['ngMaterial', 'faasGateway.funcStore']);
 
 app.controller("home", ['$scope', '$log', '$http', '$location', '$timeout', '$mdDialog', '$mdToast', '$mdSidenav',
     function($scope, $log, $http, $location, $timeout, $mdDialog, $mdToast, $mdSidenav) {
+        var newFuncTabIdx = 0;
         $scope.functions = [];
         $scope.invocationInProgress = false;
         $scope.invocationRequest = "";
@@ -128,7 +129,7 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$timeout', '$md
             $mdDialog.show({
                 parent: parentEl,
                 targetEvent: $event,
-                templateUrl: "newfunction.html",
+                templateUrl: "templates/newfunction.html",
                 locals: {
                     item: $scope.functionTemplate
                 },
@@ -137,11 +138,33 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$timeout', '$md
         };
 
         var DialogController = function($scope, $mdDialog, item) {
+            $scope.selectedTabIdx = newFuncTabIdx;
             $scope.item = item;
+            $scope.selectedFunc = null;
             $scope.closeDialog = function() {
                 $mdDialog.hide();
             };
 
+            $scope.onFuncSelected = function(func) {
+                $scope.item.image = func.image;
+                $scope.item.service = func.name;
+                $scope.item.envProcess = func.fprocess;
+                $scope.item.network = func.network;
+                $scope.selectedFunc = func;
+            }
+            
+            $scope.onTabSelect = function(idx) {
+                newFuncTabIdx = idx;
+            }
+
+            $scope.onStoreTabDeselect = function() {
+                $scope.selectedFunc = null;
+            }
+
+            $scope.onManualTabDeselect = function() {
+                $scope.item = {};
+            }
+
             $scope.createFunc = function() {
                 var options = {
                     url: "/system/functions",

gateway/assets/script/funcstore.js

@@ -0,0 +1,76 @@
+var funcStoreModule = angular.module('faasGateway.funcStore', ['ngMaterial']);
+
+funcStoreModule.service('FuncStoreService', ['$http', function ($http) {
+    var self = this;
+    this.fetchStore = function (url) {
+        return $http.get(url)
+            .then(function (resp) {
+                return resp.data;
+            });
+    };
+
+}]);
+
+funcStoreModule.component('funcStore', {
+    templateUrl: 'templates/funcstore.html',
+    bindings: {
+        selectedFunc: '<',
+        onSelected: '&',
+    },
+    controller: ['FuncStoreService', '$mdDialog', function FuncStoreController(FuncStoreService, $mdDialog) {
+        var self = this;
+
+        this.storeUrl = 'https://raw.githubusercontent.com/openfaas/store/master/store.json';
+        this.selectedFunc = null;
+        this.functions = [];
+        this.message = '';
+        this.searchText = '';
+
+        this.search = function (func) {
+            // filter with title and description
+            if (!self.searchText || (func.title.toLowerCase().indexOf(self.searchText.toLowerCase()) != -1) ||
+                (func.description.toLowerCase().indexOf(self.searchText.toLowerCase()) != -1)) {
+                return true;
+            }
+            return false;
+        }
+
+        this.select = function (func, event) {
+            self.selectedFunc = func;
+            self.onSelected()(func, event);
+        };
+
+        this.loadStore = function () {
+            self.loading = true;
+            self.functions = [];
+            self.message = '';
+            FuncStoreService.fetchStore(self.storeUrl)
+                .then(function (data) {
+                    self.loading = false;
+                    self.functions = data;
+                })
+                .catch(function (err) {
+                    console.error(err);
+                    self.loading = false;
+                    self.message = 'Unable to reach GitHub.com';
+                });
+        }
+
+        this.showInfo = function (func, event) {
+            $mdDialog.show(
+                $mdDialog.alert()
+                .multiple(true)
+                .parent(angular.element(document.querySelector('#newfunction-dialog')))
+                .clickOutsideToClose(true)
+                .title(func.title)
+                .textContent(func.description)
+                .ariaLabel(func.title)
+                .ok('OK')
+                .targetEvent(event)
+            );
+        }
+
+        this.loadStore();
+
+    }]
+});