Automated UI building

- Add Dockerfile for js build image
- Wire up dockerized-ui build to the makefile.
- Removed unused dev tools from package.json/gulp

.gitignore

@@ -31,6 +31,7 @@ coverage.html
 
 # Project specific
 scope.tar
+scope_ui_build.tar
 app/app
 probe/probe
 docker/app

Makefile

@@ -1,4 +1,4 @@
-.PHONY: all build client static dist test clean
+.PHONY: all static test clean
 
 # If you can use Docker without being root, you can `make SUDO= <target>`
 SUDO=sudo
@@ -9,22 +9,29 @@ PROBE_EXE=probe/probe
 FIXPROBE_EXE=experimental/fixprobe/fixprobe
 SCOPE_IMAGE=$(DOCKERHUB_USER)/scope
 SCOPE_EXPORT=scope.tar
+SCOPE_UI_BUILD_EXPORT=scope_ui_build.tar
+SCOPE_UI_BUILD_IMAGE=weave/scope-ui-build
 
 all: $(SCOPE_EXPORT)
-dist: client static $(APP_EXE) $(PROBE_EXE)
 
-client:
-	cd client && make build && rm -f dist/.htaccess
+$(SCOPE_UI_BUILD_EXPORT): client/Dockerfile client/gulpfile.js client/package.json
+	docker build -t $(SCOPE_UI_BUILD_IMAGE) client
+	docker save $(SCOPE_UI_BUILD_IMAGE):latest > $@
 
-app/static.go:
-	go get github.com/mjibson/esc
+client/dist/scripts/bundle.js: client/app/scripts/*
+	mkdir -p client/dist
+	docker run -ti -v $(shell pwd)/client/app:/home/weave/app \
+		-v $(shell pwd)/client/dist:/home/weave/dist \
+		$(SCOPE_UI_BUILD_IMAGE)
+
+static: client/dist/scripts/bundle.js
 	esc -o app/static.go -prefix client/dist client/dist
 
 test: $(APP_EXE) $(FIXPROBE_EXE)
 	# app and fixprobe needed for integration tests
 	go test ./...
 
-$(APP_EXE): app/*.go app/static.go report/*.go xfer/*.go
+$(APP_EXE): app/*.go report/*.go xfer/*.go
 $(PROBE_EXE): probe/*.go report/*.go xfer/*.go
 
 $(APP_EXE) $(PROBE_EXE):
@@ -41,4 +48,4 @@ $(SCOPE_EXPORT):  $(APP_EXE) $(PROBE_EXE) docker/Dockerfile docker/entrypoint.sh
 
 clean:
 	go clean ./...
-	rm -f $(SCOPE_EXPORT) app/static.go
+	rm -rf $(SCOPE_EXPORT) $(SCOPE_UI_BUILD_EXPORT) client/dist

README.md

@@ -47,6 +47,15 @@ To build a Docker container,
 make docker
 ```
 
+### The UI
+
+This repository contains a copy of the compiled UI.  To build a fresh UI, run:
+
+```
+make scope_ui_build.tar
+make static
+```
+
 ## Running
 
 ### Manually

circle.yml

@@ -10,18 +10,31 @@ machine:
     GOPATH: /home/ubuntu:$GOPATH
     SRCDIR: /home/ubuntu/src/github.com/weaveworks/scope
     PATH: $PATH:$HOME/.local/bin
+    SCOPE_UI_BUILD: $HOME/docker/scope_ui_build.tar
 
 dependencies:
+  cache_directories:
+    - "~/docker"
+  override:
+    - if [[ -e "$SCOPE_UI_BUILD" ]]; then
+        docker load -i $SCOPE_UI_BUILD;
+      else
+        make scope_ui_build.tar;
+        mkdir -p $(dirname "$SCOPE_UI_BUILD");
+        mv scope_ui_build.tar $(dirname "$SCOPE_UI_BUILD");
+      fi
   post:
     - go get github.com/golang/lint/golint
     - go get github.com/fzipp/gocyclo
     - go get github.com/mattn/goveralls
+    - go get github.com/mjibson/esc
     - mkdir -p $(dirname $SRCDIR)
     - cp -r $(pwd)/ $SRCDIR
 
 test:
   override:
     - cd $SRCDIR; ./bin/lint .
+    - cd $SRCDIR; make static
     - cd $SRCDIR; make
     - cd $SRCDIR; ./bin/test
   post:

client/.dockerignore

@@ -0,0 +1,2 @@
+node_modules
+dist

client/Dockerfile

@@ -0,0 +1,19 @@
+FROM mhart/alpine-node
+
+WORKDIR /home/weave
+
+# build tool
+RUN npm install -g gulp
+
+# install app and build dependencies
+ADD package.json /home/weave/
+RUN npm install
+
+ADD gulpfile.js /home/weave/
+
+# run container via
+#
+# `docker run -v $GOPATH/src/github.com/weaveworks/scope/client:/app weaveworks/scope-build`
+#
+# after the container is run, bundled app should be in ./dist/ dir
+CMD gulp build

client/gulpfile.js

@@ -47,8 +47,6 @@ gulp.task('scripts', function() {
 gulp.task('html', ['styles', 'scripts'], function () {
     return gulp.src('app/*.html')
         .pipe($.preprocess())
-        //.pipe($.useref.assets({searchPath: 'dist'}))
-        //.pipe($.useref())
         .pipe(gulp.dest('dist'))
         .pipe($.size())
         .pipe(livereload());
@@ -107,9 +105,7 @@ gulp.task('connect', function () {
     });
 });
 
-gulp.task('serve', ['connect', 'styles', 'scripts', 'fonts'], function () {
-    //require('opn')('http://localhost:9000');
-});
+gulp.task('serve', ['connect', 'styles', 'scripts', 'fonts']);
 
 gulp.task('watch', ['serve'], function () {
     livereload.listen();

client/package.json

@@ -1,53 +1,52 @@
 {
-  "name": "scope-webapp",
-  "version": "0.2.0",
+  "name": "weave-scope",
+  "version": "1.2.0",
+  "description": "SPA JS app for Weave Scope visualising the application network.",
+  "repository": "weaveworks/scope",
+  "license": "Apache-2.0",
+  "private": true,
   "dependencies": {
-    "d3": "^3.5.3",
-    "dagre": "^0.7.1",
-    "flux": "^2.0.1",
+    "d3": "^3.5.5",
+    "dagre": "^0.7.2",
+    "flux": "^2.0.3",
     "font-awesome": "^4.3.0",
     "keymirror": "^0.1.1",
-    "lodash": "~3.0.1",
+    "lodash": "~3.8.0",
     "material-ui": "^0.7.5",
     "object-assign": "^2.0.0",
-    "page": "^1.6.0",
-    "react": "^0.13.2",
+    "page": "^1.6.3",
+    "react": "^0.13.3",
+    "react-tap-event-plugin": "^0.1.6",
     "react-tween-state": "0.0.5",
     "reqwest": "~1.1.5"
   },
   "devDependencies": {
-    "browserify": "^8.1.3",
-    "connect": "^3.3.4",
+    "browserify": "^10.2.0",
     "del": "^1.1.1",
-    "gulp": "^3.8.10",
-    "gulp-autoprefixer": "^2.1.0",
-    "gulp-cache": "^0.2.4",
-    "gulp-clean": "^0.3.1",
+    "gulp": "^3.8.11",
+    "gulp-autoprefixer": "^2.3.0",
     "gulp-connect": "^2.2.0",
     "gulp-csso": "^1.0.0",
-    "gulp-filter": "^2.0.0",
+    "gulp-filter": "^2.0.2",
     "gulp-flatten": "^0.0.4",
     "gulp-if": "^1.2.5",
-    "gulp-imagemin": "^2.1.0",
-    "gulp-jshint": "^1.9.2",
+    "gulp-jshint": "^1.10.0",
     "gulp-less": "^3.0.3",
     "gulp-livereload": "^3.8.0",
-    "gulp-load-plugins": "^0.8.0",
+    "gulp-load-plugins": "^0.10.0",
     "gulp-preprocess": "^1.2.0",
-    "gulp-size": "^1.2.0",
-    "gulp-sourcemaps": "^1.3.0",
-    "gulp-uglify": "^1.1.0",
-    "gulp-useref": "^1.1.1",
-    "gulp-util": "^3.0.3",
-    "jshint-stylish": "^1.0.0",
-    "opn": "^1.0.1",
-    "proxy-middleware": "^0.11.0",
-    "reactify": "^1.1.0",
+    "gulp-size": "^1.2.1",
+    "gulp-sourcemaps": "^1.5.2",
+    "gulp-uglify": "^1.2.0",
+    "gulp-util": "^3.0.4",
+    "jshint-stylish": "^1.0.2",
+    "proxy-middleware": "^0.11.1",
+    "reactify": "^1.1.1",
     "vinyl-buffer": "^1.0.0",
-    "vinyl-source-stream": "^1.0.0"
+    "vinyl-source-stream": "^1.1.0"
   },
   "scripts": {
-    "start": "npm install && gulp serve"
+    "start": "gulp"
   },
   "engines": {
     "node": ">=0.10.0"