Improve front-end build process

We generate binaries whenever `make build-all` 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-all` on the root level Makefile, the front-end is rebuild
accordingly.

`make build-all` 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/bindata.go` is
checked in, so they do not have to build the front-end. They still use
the `make build` command as before.

.travis.yml

@@ -2,20 +2,16 @@ sudo: false
 language: go
 
 services:
-  - docker
+- docker
 
 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
+# test front-end
+- make clean
+- cd ui/app/ && make && cd ../..
+- make assets
 - git diff --exit-code
-
-- docker run --rm -t -v "$(pwd):/app" -w /app/ui/app elm-env make test
+# test back-end
+- make

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))
 
@@ -43,10 +44,14 @@ vet:
 	@echo ">> vetting code"
 	@$(GO) vet $(pkgs)
 
+# Will only build the back-end
 build: promu
 	@echo ">> building binaries"
 	@$(PROMU) build --prefix $(PREFIX)
 
+# Will build both the front-end as well as the back-end
+build-all: assets build
+
 tarball: promu
 	@echo ">> building release tarball"
 	@$(PROMU) tarball --prefix $(PREFIX) $(BIN_DIR)
@@ -55,9 +60,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 +77,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 +88,9 @@ promu:
 proto:
 	scripts/genproto.sh
 
+clean:
+	rm template/internal/deftmpl/bindata.go
+	rm ui/bindata.go
+	cd $(FRONTEND_DIR) && $(MAKE) clean
+
 .PHONY: all style format build test vet assets tarball docker promu proto

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,13 +57,18 @@ 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
 `src/Main.elm`. Any changes to the file system are detected automatically,
 triggering a recompile of the project.
+
+## Commiting changes
+
+Before you commit changes, please run `make build-all` on the root level
+Makefile. Please include `ui/bindata.go` in your commit.

ui/app/Makefile

@@ -1,15 +1,37 @@
 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
+
+all: test script.js
+
+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)