Remove checked in binaries

Instead of checking in binaries like `ui/bindata.go` and
`template/internal/deftmpl/bindata.go` into git, we generate them
whenever `make build` is run. If they already exist, we only regenerate
them if they are outdated.

When one makes changes to the front-end and runs the single command
`make-build` on the root level Makefile, the front-end is rebuild
accordingly.

`make build` will use Docker to build the front-end. If someone prefers
to install all the dev dependencies on their local machine instead, one
can add the `NO_DOCKER=true` flag.

For folks that only want to make back-end changes `ui/app/script.js` is
checked in, so they do not have to build the front-end.

.gitignore

@@ -11,3 +11,7 @@
 !/circle.yml
 !/.travis.yml
 !/.promu.yml
+
+ui/bindata.go
+
+/template/internal/deftmpl/bindata.go

.travis.yml

@@ -7,15 +7,6 @@ services:
 go:
 - 1.8.1
 
-before_install:
-- docker build --no-cache -t elm-env ui/.
-
 script:
 - make
-- docker run --rm -t -v "$(pwd):/app" -w /app/ui/app elm-env elm-format --validate src/
-
-- docker run --rm -t -v "$(pwd):/app" -w /app/ui/app elm-env make script.js
-- docker run --rm -t -v "$(pwd):/usr/src/app" -w /usr/src/app golang make assets
 - git diff --exit-code
-
-- docker run --rm -t -v "$(pwd):/app" -w /app/ui/app elm-env make test

Makefile

@@ -17,6 +17,7 @@ pkgs   = $(shell $(GO) list ./... | grep -v -E '/vendor/|/ui')
 
 PREFIX                  ?= $(shell pwd)
 BIN_DIR                 ?= $(shell pwd)
+FRONTEND_DIR            = $(BIN_DIR)/ui/app
 DOCKER_IMAGE_NAME       ?= alertmanager
 DOCKER_IMAGE_TAG        ?= $(subst /,-,$(shell git rev-parse --abbrev-ref HEAD))
 
@@ -30,6 +31,7 @@ all: format build test
 test:
 	@echo ">> running tests"
 	@$(GO) test -short $(pkgs)
+	cd $(FRONTEND_DIR) && $(MAKE) test
 
 style:
 	@echo ">> checking code style"
@@ -38,12 +40,13 @@ style:
 format:
 	@echo ">> formatting code"
 	@$(GO) fmt $(pkgs)
+	cd $(FRONTEND_DIR) && $(MAKE) format
 
 vet:
 	@echo ">> vetting code"
 	@$(GO) vet $(pkgs)
 
-build: promu
+build: promu assets
 	@echo ">> building binaries"
 	@$(PROMU) build --prefix $(PREFIX)
 
@@ -55,9 +58,15 @@ docker:
 	@echo ">> building docker image"
 	@docker build -t "$(DOCKER_IMAGE_NAME):$(DOCKER_IMAGE_TAG)" .
 
-assets:
-	@echo ">> writing assets"
+assets: go-bindata ui/bindata.go template/internal/deftmpl/bindata.go
+
+go-bindata:
 	-@$(GO) get -u github.com/jteeuwen/go-bindata/...
+
+template/internal/deftmpl/bindata.go: template/default.tmpl
+	@go-bindata $(bindata_flags) -mode 420 -modtime 1 -pkg deftmpl -o template/internal/deftmpl/bindata.go template/default.tmpl
+
+ui/bindata.go: ui/app/script.js ui/app/index.html ui/lib
 # Using "-mode 420" and "-modtime 1" to make assets make target deterministic.
 # It sets all file permissions and time stamps to 420 and 1
 	@go-bindata $(bindata_flags) -mode 420 -modtime 1 -pkg ui -o \
@@ -66,7 +75,8 @@ assets:
 		ui/app/favicon.ico \
 		ui/lib/...
 
-	@go-bindata $(bindata_flags) -mode 420 -modtime 1 -pkg deftmpl -o template/internal/deftmpl/bindata.go template/default.tmpl
+ui/app/script.js: $(shell find ui/app/src -iname *.elm)
+	cd $(FRONTEND_DIR) && $(MAKE) script.js
 
 promu:
 	@GOOS=$(shell uname -s | tr A-Z a-z) \
@@ -76,4 +86,7 @@ promu:
 proto:
 	scripts/genproto.sh
 
+clean:
+	cd $(FRONTEND_DIR) && $(MAKE) clean
+
 .PHONY: all style format build test vet assets tarball docker promu proto

ui/app/.gitignore

@@ -1,3 +1,2 @@
 dist/
 elm-stuff/
-script.js

ui/app/CONTRIBUTING.md

@@ -8,9 +8,17 @@ This document describes how to:
 
 ## Dev Environment Setup
 
-- Elm is [installed](https://guide.elm-lang.org/install.html#install)
-- Your editor is [configured](https://guide.elm-lang.org/install.html#configure-your-editor)
-- [elm-format](https://github.com/avh4/elm-format) is installed
+You can either use our default Docker setup or install all dev dependencies
+locally. For the former you only need Docker installed, for the latter you need
+to set the environment flag `NO_DOCKER` to `true` and have the following
+dependencies installed:
+
+- [Elm](https://guide.elm-lang.org/install.html#install)
+- [Elm-Format](https://github.com/avh4/elm-format) is installed
+
+In addition for easier development you
+can [configure](https://guide.elm-lang.org/install.html#configure-your-editor)
+your editor.
 
 **All submitted elm code must be formatted with `elm-format`**. Install and
 execute it however works best for you. We recommend having formatting the file
@@ -38,7 +46,8 @@ Once you've installed Elm, install the dependencies listed in
 - Check the [syntax reference](http://elm-lang.org/docs/syntax) when you need a
   reminder of how the language works.
 - Read up on [how to write elm code](http://elm-lang.org/docs/style-guide).
-- Watch videos from the latest [elm-conf](https://www.youtube.com/channel/UCOpGiN9AkczVjlpGDaBwQrQ)
+- Watch videos from the
+  latest [elm-conf](https://www.youtube.com/channel/UCOpGiN9AkczVjlpGDaBwQrQ)
 - Learn how to use the debugger! Elm comes packaged with an excellent
   [debugger](http://elm-lang.org/blog/the-perfect-bug-report). We've found this
   tool to be invaluable in understanding how the app is working as we're
@@ -48,11 +57,11 @@ Once you've installed Elm, install the dependencies listed in
 
 At the top level of this repo, follow the HA AlertManager instructions. Compile
 the binary, then run with `goreman`. Add example alerts with the file provided
-in the HA example folder.
+in the HA example folder. Then start the development server:
 
 ```
 # cd ui/app
-# elm-reactor -p <port>
+# make dev-server
 ```
 
 Your app should be available at `http://localhost:<port>`. Navigate to

ui/app/Makefile

@@ -1,15 +1,35 @@
 ELM_FILES := $(shell find src -iname *.elm)
-format: $(ELM_FILES)
-	elm-format --yes $?
+DOCKER_IMG :=elm-env
+DOCKER_CMD := docker run --rm -t -v $(PWD):/app -w /app $(DOCKER_IMG)
+TEMPFILE := $(shell mktemp ./elm-XXXXXXXXXX.js)
 
-test:
-	elm-test
+ifeq ($(NO_DOCKER), true)
+  DOCKER_CMD=
+endif
+
+elm-env:
+	@(if [ "$(NO_DOCKER)" != "true" ] ; then \
+		echo ">> building elm-env docker image"; \
+		docker build -t $(DOCKER_IMG) ../. > /dev/null; \
+	fi; )
+
+format: elm-env $(ELM_FILES)
+	@echo ">> format front-end code"
+	@$(DOCKER_CMD) elm-format --yes $(ELM_FILES)
+
+test: elm-env
+	@$(DOCKER_CMD) elm-format $(ELM_FILES) --validate
+	@$(DOCKER_CMD) elm-test
 
 dev-server:
 	elm-reactor
 
-TEMPFILE := $(shell mktemp /tmp/elm-XXXXXXXXXX.js)
-script.js: $(ELM_FILES)
-	elm make src/Main.elm --yes --output $(TEMPFILE)
-	uglifyjs $(TEMPFILE) --compress unused --mangle --output $(@)
-	rm $(TEMPFILE)
+script.js: elm-env format $(ELM_FILES)
+	@echo ">> building script.js"
+	@$(DOCKER_CMD) elm make src/Main.elm --yes --output $(TEMPFILE)
+	@$(DOCKER_CMD)	uglifyjs $(TEMPFILE) --compress unused --mangle --output $(@)
+	@rm $(TEMPFILE)
+
+clean:
+	- @rm script.js
+	@docker rmi $(DOCKER_IMG)