Add BuildTracker

Author: radum

CHANGELOG.md

@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+## [1.3.0] - 2020-03-27
+### Added
+- Build Tracker server
+- Bump dependencies (lhci, sitespeed.io)
+
 ## [1.2.0] - 2020-03-20
 ### Added
 - Bump all dependecies to latest versions

README.md

@@ -11,6 +11,7 @@ Framework consists of next services:
 - **Sitespeed.io**: set of tools for frontend load testing
 - **Webpagetest**: private instance of webpagetest server for frontend tests execution
 - **K6**: tool for backend load testing
+- **Build Tracker** tool for monitoring asset sizes and performance budgets
 - **Grafana**: data visualization & monitoring
 - **Graphite**: time series DB platform for metrics
 - **InfluxDB**: time series DB optimized for fast storage and retrieval of time series data
@@ -69,11 +70,12 @@ All containers should be up and running
 
 ### Services endpoints
 
-- **jenkins** localhost:8181
-- **LHCI** localhost:9001
-- **webpagetest server** localhost:4000
-- **grafana** localhost:3000
-- **portainer** localhost:9000
+- **jenkins** [localhost:8181](http://localhost:8181/)
+- **LHCI** [localhost:9001](http://localhost:9001/)
+- **webpagetest server** [localhost:4000](http://localhost:4000/)
+- **build tracker server** [localhost:9002](http://localhost:9002/)
+- **grafana** [localhost:3000](http://localhost:3000/)
+- **portainer** [localhost:9000](http://localhost:9000/)
 
 ### How to stop
 
@@ -131,6 +133,18 @@ The results will be saved on the associated k6 reports folder and also pushed to
 
 *To add this dashboard follow the instructions [here](https://k6.io/docs/results-visualization/influxdb-+-grafana).*
 
+## Build Tracker
+
+*Track performance budgets & prevent unexpected bloat.*
+
+![](docs/img/build-tracker-example.png)
+
+The docker compose services contains the build tracker server that can be used to send build artifacts from the build tracker CLI and monitor.
+
+Once the service is running access [localhost:9002](http://localhost:9002) to see the dashboard.
+
+In order to send build artifacts follow the instructions on the [docs site](https://buildtracker.dev/docs/packages/cli). You can also find an example in the test folder for build tracker in this repo.
+
 ## Grafana
 
 ### Available metrics

buildtracker/Dockerfile

@@ -0,0 +1,9 @@
+FROM node:12
+
+WORKDIR /usr/src/buildtracker
+COPY package.json .
+COPY build-tracker.config.js .
+RUN npm install
+
+EXPOSE 9002
+CMD [ "npm", "start" ]

buildtracker/build-tracker.config.js

@@ -0,0 +1,11 @@
+const withPostgres = require('@build-tracker/plugin-with-postgres').default;
+
+module.exports = withPostgres({
+  url: 'http://127.0.0.1:9002',
+  pg: {
+    user: 'myuser',
+    password: 'mypassword',
+    host: 'postgres', // This is the docker-componse container name for postgres https://docs.docker.com/compose/networking/
+    database: 'postgres'
+  }
+});

buildtracker/package.json

@@ -0,0 +1,11 @@
+{
+	"name": "buildtracker",
+	"version": "0.0.0",
+	"scripts": {
+	  "start": "bt-server setup && bt-server run"
+	},
+	"dependencies": {
+	  "@build-tracker/server": "1.0.0-beta.14",
+	  "@build-tracker/plugin-with-postgres": "latest"
+	}
+  }

docker-compose.yml

@@ -40,6 +40,14 @@ services:
     shm_size: 2g
     volumes:
       - ./reports/sitespeed-result/:/sitespeed.io/sitespeed-result
+  buildtracker:
+    container_name: buildtracker
+    build: ./buildtracker
+    depends_on:
+      - postgres
+    ports:
+      - "9002:3000"
+    restart: unless-stopped
   lhci-server:
     container_name: lhci-server
     build: ./lhci-server
@@ -119,6 +127,14 @@ services:
     environment:
       - INFLUXDB_DB=k6
     restart: unless-stopped
+  postgres:
+    container_name: postgres
+    image: postgres:12-alpine
+    environment:
+      - POSTGRES_USER=myuser
+      - POSTGRES_PASSWORD=mypassword
+    ports:
+      - "5432:5432"
   jenkins:
     container_name: jenkins
     # image: jenkins/jenkins:lts
@@ -169,5 +185,6 @@ volumes:
     # grafana-home:
     # grafana-conf:
     influxdb:
+    postgres:
     grafana:
     jenkins-home:

docs/img/build-tracker-example.png

@@ -0,0 +1 @@
+node_modules

docs/img/framework-architecture.png

@@ -0,0 +1,4 @@
+module.exports = {
+  applicationUrl: "http://127.0.0.1:9002", // The same as your server config `url`
+  artifacts: ["dist-v1/**/*.js"] // an Array of glob-style file paths
+};

test/buildtracker/fixtures/test-project/.gitignore

@@ -0,0 +1,41 @@
+import baseClone from './.internal/baseClone.js'
+
+/** Used to compose bitmasks for cloning. */
+const CLONE_DEEP_FLAG = 1
+const CLONE_SYMBOLS_FLAG = 4
+
+/**
+ * This method is like `cloneWith` except that it recursively clones `value`.
+ * The customizer is invoked with up to four arguments
+ * (value [, index|key, object, stack]).
+ *
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to recursively clone.
+ * @param {Function} [customizer] The function to customize cloning.
+ * @returns {*} Returns the deep cloned value.
+ * @see cloneWith
+ * @example
+ *
+ * function customizer(value) {
+ *   if (isElement(value)) {
+ *     return value.cloneNode(true)
+ *   }
+ * }
+ *
+ * const el = cloneDeepWith(document.body, customizer)
+ *
+ * console.log(el === document.body)
+ * // => false
+ * console.log(el.nodeName)
+ * // => 'BODY'
+ * console.log(el.childNodes.length)
+ * // => 20
+ */
+function cloneDeepWith(value, customizer) {
+  customizer = typeof customizer === 'function' ? customizer : undefined
+  return baseClone(value, CLONE_DEEP_FLAG | CLONE_SYMBOLS_FLAG, customizer)
+}
+
+export default cloneDeepWith
+// test

test/buildtracker/fixtures/test-project/build-tracker.config.js

@@ -0,0 +1,41 @@
+import baseClone from './.internal/baseClone.js'
+
+/** Used to compose bitmasks for cloning. */
+const CLONE_DEEP_FLAG = 1
+const CLONE_SYMBOLS_FLAG = 4
+
+/**
+ * This method is like `cloneWith` except that it recursively clones `value`.
+ * The customizer is invoked with up to four arguments
+ * (value [, index|key, object, stack]).
+ *
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to recursively clone.
+ * @param {Function} [customizer] The function to customize cloning.
+ * @returns {*} Returns the deep cloned value.
+ * @see cloneWith
+ * @example
+ *
+ * function customizer(value) {
+ *   if (isElement(value)) {
+ *     return value.cloneNode(true)
+ *   }
+ * }
+ *
+ * const el = cloneDeepWith(document.body, customizer)
+ *
+ * console.log(el === document.body)
+ * // => false
+ * console.log(el.nodeName)
+ * // => 'BODY'
+ * console.log(el.childNodes.length)
+ * // => 20
+ */
+function cloneDeepWith(value, customizer) {
+  customizer = typeof customizer === 'function' ? customizer : undefined
+  return baseClone(value, CLONE_DEEP_FLAG | CLONE_SYMBOLS_FLAG, customizer)
+}
+
+export default cloneDeepWith
+// test

test/buildtracker/fixtures/test-project/dist-v1/main.min.js

@@ -0,0 +1,41 @@
+import baseClone from './.internal/baseClone.js'
+
+/** Used to compose bitmasks for cloning. */
+const CLONE_DEEP_FLAG = 1
+const CLONE_SYMBOLS_FLAG = 4
+
+/**
+ * This method is like `cloneWith` except that it recursively clones `value`.
+ * The customizer is invoked with up to four arguments
+ * (value [, index|key, object, stack]).
+ *
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to recursively clone.
+ * @param {Function} [customizer] The function to customize cloning.
+ * @returns {*} Returns the deep cloned value.
+ * @see cloneWith
+ * @example
+ *
+ * function customizer(value) {
+ *   if (isElement(value)) {
+ *     return value.cloneNode(true)
+ *   }
+ * }
+ *
+ * const el = cloneDeepWith(document.body, customizer)
+ *
+ * console.log(el === document.body)
+ * // => false
+ * console.log(el.nodeName)
+ * // => 'BODY'
+ * console.log(el.childNodes.length)
+ * // => 20
+ */
+function cloneDeepWith(value, customizer) {
+  customizer = typeof customizer === 'function' ? customizer : undefined
+  return baseClone(value, CLONE_DEEP_FLAG | CLONE_SYMBOLS_FLAG, customizer)
+}
+
+export default cloneDeepWith
+// test

test/buildtracker/fixtures/test-project/dist-v1/pages/about.min.js

@@ -0,0 +1,14 @@
+{
+  "name": "test-project",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "buildtracker": "bt-cli upload-build -b master --parent-revision d02af1e --skip-dirty-check"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@build-tracker/cli": "^1.0.0-beta.14"
+  }
+}