chore: initial web interface (#18)

chore: initial web interface
moul · Jul 19, 2019 · bd7c7a7 · bd7c7a7
2 parents 7ee14a1 + acac5ea
commit bd7c7a7
Show file tree

Hide file tree

Showing 8 changed files with 129 additions and 4 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,6 @@
+# Generated files
+web/pertify/examples.js
+
 # Temporary files
 *~
 *#

diff --git a/Makefile b/Makefile
@@ -3,6 +3,14 @@ test:
 	go test -v ./...
 	cd examples; go test -v ./...
 
+.PHONY: tidy-all
+tidy-all:
+	for file in `find . -name go.mod`; do (dir=`dirname $$file`; set -xe; cd $$dir && go mod tidy); done
+
+web/pertify/examples.js: $(wildcard ./examples/pertify/*.yml)
+	@# go get moul.io/fs-bundler
+	cd examples/pertify; fs-bundler --format=js --callback=examples *.yml > ../../$@
+
 .PHONY: install
 install:
 	cd cmd/pertify; go install
@@ -18,10 +26,21 @@ release:
 	goreleaser --rm-dist
 
 .PHONY: lambda-build
-lambda-build:
+lambda-build: web/pertify/examples.js
 	rm -rf lambda-build
-	cd lambda && GO111MODULE=on go build -o ../lambda-build/pertify pertify.go
+	cd lambda && GO111MODULE=on GOOS=linux GOARCH=amd64 go build -o ../lambda-build/pertify pertify.go
 
 .PHONY: netlify-dev
 netlify-dev: lambda-build
 	netlify dev
+
+.PHONY: sam-local
+sam-local: lambda-build
+	@echo ""
+	@echo "Open: http://localhost:3000/pertify/index.html"
+	@echo ""
+	sam local start-api --static-dir=web
+
+.PHONY: _netlify-deps
+_netlify_deps:
+	cd; go get moul.io/fs-bundler
diff --git a/lambda/pertify.go b/lambda/pertify.go
@@ -1,6 +1,7 @@
 package main
 
 import (
+	"fmt"
 	"log"
 
 	"github.com/aws/aws-lambda-go/events"
@@ -12,6 +13,9 @@ import (
 )
 
 func handler(request events.APIGatewayProxyRequest) (*events.APIGatewayProxyResponse, error) {
+	if request.Body == "" {
+		return nil, fmt.Errorf("invalid POST request")
+	}
 	yamlFile := []byte(request.Body)
 
 	var config graphman.PertConfig

diff --git a/netlify.toml b/netlify.toml
@@ -1,11 +1,14 @@
 [build]
-  command = "make lambda-build"
+  command = "PATH=$PATH:$GOPATH/bin; make _netlify_deps lambda-build"
   functions = "./lambda-build"
   publish = "web"
 
+[build.environment]
+  GO_IMPORT_PATH = "moul.io/graphman"
+
 [[redirects]]
   from = "/"
-  to = "https://github.com/moul/graphman"
+  to = "/pertify"
 
 [[redirects]]
   from = "/api/pertify"

diff --git a/template.yaml b/template.yaml
@@ -0,0 +1,25 @@
+AWSTemplateFormatVersion: '2010-09-09'
+Transform: AWS::Serverless-2016-10-31
+
+Globals:
+  Function:
+    Timeout: 5
+
+Resources:
+  PertifyFunction:
+    Type: AWS::Serverless::Function
+    Properties:
+      Handler: lambda-build/pertify
+      Runtime: go1.x
+      Tracing: Active
+      Events:
+        Request:
+          Type: Api
+          Properties:
+            Path: /api/pertify
+            Method: POST
+
+Outputs:
+  GraphmanAPI:
+  PertifyFunction:
+    Value: !GetAtt PertifyFunction.Arn
diff --git a/web/.gitkeep b/web/.gitkeep
diff --git a/web/favicon.ico b/web/favicon.ico
diff --git a/web/pertify/index.html b/web/pertify/index.html
@@ -0,0 +1,71 @@
+<html>
+  <head>
+    <title>Pertify</title>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" />
+    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-133664781-4"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', 'UA-133664781-5');
+    </script>
+
+  </head>
+  <body>
+    <div class="container">
+      <h1>Pertify</h1>
+      <form class="form-inline">
+        <div class="form-group mb-2">
+          <select id="examples" class="form-control mr-sm-2">
+            <option value="custom">* custom *</option>
+          </select>
+        </div>
+        <!-- checkbox with-details -->
+        <!-- checkbox debug -->
+        <!-- checkbox vertical -->
+        <!-- checkbox no-simplify -->
+        <input class="btn btn-primary mb-2 mx-sm-3" type="button" id="generate" value="generate" />
+      </form>
+      <textarea class="form-control" rows="10" id="source">Loading...</textarea>
+      <hr />
+      <textarea class="form-control" disabled="disabled" id="output" rows="10">Loading...</textarea>
+      <hr />
+      <footer>
+        <a href="https://github.com/moul/graphman">Graphman</a>, by <a href="https://manfred.life/">Manfred Touron</a>.
+      </footer>
+    </div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+    <script src="/pertify/examples.js"></script>
+    <script>
+     function generate() {
+       var url = '/api/pertify?';
+       $('#generate').attr('disabled', 'disabled');
+
+       gtag('event', "generate", {});
+       $.post(url, $('#source').html(), function(res) {
+         $('#output').html(res);
+       }).always(function() {$('#generate').removeAttr('disabled');});
+     }
+
+     function loadExample() {
+       $('#source').html(atob(examples.files[$('#examples').val()].content));
+       generate();
+     }
+
+     $('#examples').change(loadExample);
+     $('#generate').click(generate);
+     $('#source').change(function() {
+       $('#examples').val('custom');
+     });
+     $(document).ready(function() {
+       for (var i = 0; i < examples.files.length; i++) {
+         $('#examples').append($("<option />").val(i).html(examples.files[i].name));
+       }
+       $('#examples').val(0);
+       loadExample();
+     });
+    </script>
+  </body>
+</html>