Merge pull request #15 from alexellis/test_page

Feature: Invoke functions through portal + Markdown sample

deploy_stack.sh

@@ -1,4 +1,4 @@
 #!/bin/sh
 
 echo "Deploying stack"
-docker stack rm func ;  docker stack deploy func --compose-file docker-compose.yml 
+docker stack deploy func --compose-file docker-compose.yml 

docker-compose.yml

@@ -104,6 +104,15 @@ services:
             no_proxy:   "gateway"
             https_proxy: $https_proxy
 
+    markdown:
+        image: alexellis2/faas-markdownrender:latest
+        depends_on:
+            - gateway
+        networks:
+            - functions
+        environment:
+            no_proxy:   "gateway"
+            https_proxy: $https_proxy
 
     # alexacolorchange:
     #     image: alexellis2/faas-alexachangecolorintent 

gateway/assets/index.html

@@ -50,11 +50,11 @@
       </div>
       <div flex></div>
     </md-content>
+
     <md-content flex layout="column" ng-repeat="function in functions" ng-show="function.name == selectedFunction.name">
 
         <md-card md-theme="default" md-theme-watch>
             <md-card-title>
-
                 <md-card-title-text>
 
                     <span class="md-headline">
@@ -77,12 +77,44 @@
                         <input ng-model="function.image" type="text" readonly="readonly">
                       </md-input-container>
                     </div>
-
                 <md-card-title-text>
-
             </md-card-title>
         </md-card>
+        <md-card>
+         <md-card-title>
+            <md-card-title-text>
 
+                <span class="md-headline">
+                  Invoke function
+                </span>
+                <div layout-gt-sm="row">
+                  <md-input-container class="md-block" flex-gt-sm>
+                    <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>
+                    </button>
+                  </md-input-container>
+                </div>
+                <div layout-gt-sm="row">
+                  <md-input-container class="md-block" flex-gt-sm>
+                    <label>Request body</label>
+                    <textarea ng-model="invocation.request" cols="80" rows="4"></textarea>
+                  </md-input-container>
+                </div>
+                <div layout-gt-sm="row">
+                  <md-input-container class="md-block" flex-gt-sm>
+                    <label>Response status</label>
+                    <input ng-model="invocationStatus" type="text" readonly="readonly">
+                  </md-input-container>
+                </div>
+                <div layout-gt-sm="row">
+                  <md-input-container class="md-block" flex-gt-sm>
+                    <label>Response body</label>
+                    <textarea ng-model="invocationResponse" cols="80" rows=10></textarea>
+                  </md-input-container>
+                </div>
+            <md-card-title-text>
+        </md-card-title>
+    </md-card>
     </md-content>
   </section>
   </div>

gateway/assets/script/bootstrap.js

@@ -3,11 +3,55 @@ var app = angular.module('faasGateway', ['ngMaterial']);
 
 app.controller("home", ['$scope', '$log', '$http', '$location', '$timeout', function($scope, $log, $http, $location, $timeout) {
     $scope.functions = [];
+    $scope.invocationRequest = "";
+    $scope.invocationResponse = "";
+    $scope.invocationStatus = "";
+    $scope.invocation = {
 
+    };
+    $scope.invocation.request = ""
     setInterval(function() {
-        fetch();
+        refreshData();
     }, 1000);
 
+    $scope.fireRequest = function() {
+        $http({url:"/function/"+$scope.selectedFunction.name, data: $scope.invocation.request, method: "POST",  headers: {"Content-Type": "text/plain"}, responseType: "text"}).
+        then(function(response) {
+            $scope.invocationResponse = response.data;
+            $scope.invocationStatus = response.status;
+        }).catch(function(error1) {
+            $scope.invocationResponse = error1;
+            $scope.invocationStatus = null;
+        });
+
+        // console.log("POST /function/"+ $scope.selectedFunction.name);
+        // console.log("Body: " + $scope.invocation.request);
+    };
+
+    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;
@@ -15,7 +59,12 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$timeout', func
     };
 
     $scope.showFunction = function(fn) {
-        $scope.selectedFunction = fn;
+        if($scope.selectedFunction!=fn) {
+            $scope.selectedFunction = fn;
+            $scope.invocation.request = "";
+            $scope.invocationResponse = "";
+            $scope.invocationStatus = "";
+        }
     };
 
     // TODO: popup + form to create new Docker service.

gateway/build.sh

@@ -10,4 +10,4 @@ docker rm -f gateway_extract
 
 echo Building alexellis2/faas-gateway:latest
 
-docker build -t alexellis2/faas-gateway:latest-dev4 .
+docker build --no-cache -t alexellis2/faas-gateway:latest-dev4 .

sample-functions/MarkdownRender/Dockerfile

@@ -0,0 +1,16 @@
+FROM alpine:latest
+
+WORKDIR /root/
+
+EXPOSE 8080
+ENV http_proxy      ""
+ENV https_proxy     ""
+
+ADD https://github.com/alexellis/faas/releases/download/v0.3-alpha/fwatchdog /usr/bin
+RUN chmod +x /usr/bin/fwatchdog
+# COPY fwatchdog  /usr/bin/
+
+COPY app    .
+
+ENV fprocess="/root/app"
+CMD ["fwatchdog"]

sample-functions/MarkdownRender/Dockerfile.build

@@ -0,0 +1,10 @@
+FROM golang:1.7.3
+RUN mkdir -p /go/src/app
+COPY handler.go /go/src/app
+WORKDIR /go/src/app
+RUN go get github.com/microcosm-cc/bluemonday && \
+    go get github.com/russross/blackfriday
+
+RUN CGO_ENABLED=0 GOOS=linux go build -a -installsuffix cgo -o app .
+
+CMD ["echo"]

sample-functions/MarkdownRender/build.sh

@@ -0,0 +1,12 @@
+#!/bin/sh
+echo Building alexellis2/faas-markdownrender:build
+
+docker build --build-arg https_proxy=$https_proxy --build-arg http_proxy=$http_proxy \
+    -t alexellis2/faas-markdownrender . -f Dockerfile.build
+
+docker create --name render_extract alexellis2/faas-markdownrender
+docker cp render_extract:/go/src/app/app ./app
+docker rm -f render_extract
+
+echo Building alexellis2/faas-markdownrender:latest
+docker build --no-cache -t alexellis2/faas-markdownrender:latest .

sample-functions/MarkdownRender/handler.go

@@ -0,0 +1,17 @@
+package main
+
+import (
+	"fmt"
+	"io/ioutil"
+	"os"
+
+	"github.com/microcosm-cc/bluemonday"
+	"github.com/russross/blackfriday"
+)
+
+func main() {
+	input, _ := ioutil.ReadAll(os.Stdin)
+	unsafe := blackfriday.MarkdownCommon([]byte(input))
+	html := bluemonday.UGCPolicy().SanitizeBytes(unsafe)
+	fmt.Println(string(html))
+}