Merge pull request #39 from sergiitk/feature/schedules-on-react

[FEATURE ui-schedules] Major UI refactoring: modernize assets pipeline and move rendering to React

.circleci/config.yml

@@ -1,5 +1,6 @@
 version: 2
 jobs:
+  # Build
   build:
     docker:
       - image: circleci/node:10.14.2-stretch
@@ -15,7 +16,19 @@ jobs:
           key: v1-dependencies-{{ checksum "yarn.lock" }}
           paths:
             - node_modules
+      - run:
+          name: Build assets
+          command: yarn build:prod
+      - store_artifacts:
+          path: assets/dist-prod
+          destination: /artifacts/assets/dist-prod
+      - persist_to_workspace:
+          root: .
+          paths:
+            - 'assets/dist-prod/bundle.css'
+            - 'assets/dist-prod/bundle.js'
 
+  # Lint
   lint:
     docker:
       - image: circleci/node:10.14.2-stretch
@@ -28,6 +41,7 @@ jobs:
           name: Lint
           command: yarn lint
 
+  # Test
   test:
     docker:
       - image: circleci/node:10.14.2-stretch
@@ -40,6 +54,7 @@ jobs:
           name: Test
           command: yarn test:full
 
+  # Release
   semantic-release:
     docker:
       - image: circleci/node:10.14.2-stretch
@@ -48,12 +63,20 @@ jobs:
       - checkout
       - restore_cache:
           key: v1-dependencies-{{ checksum "yarn.lock" }}
+      - attach_workspace:
+          at: /tmp/workspace
+      - run:
+          name: Restore assets
+          command: cp -rv /tmp/workspace/assets/dist-prod assets
       - run:
           name: Release!
           command: yarn run semantic-release --debug
 
+
 workflows:
   version: 2
+
+  # Build - test - release
   build-test-release:
     jobs:
       - build

.eslintignore

@@ -0,0 +1 @@
+assets/dist

.gitignore

@@ -59,3 +59,6 @@ typings/
 
 # next.js build output
 .next
+
+# Dist
+assets/dist/

Dockerfile

@@ -15,4 +15,4 @@ RUN yarn install --prod --frozen-lockfile
 COPY . .
 
 EXPOSE 8080
-CMD ["yarn", "-s", "run", "app"]
+CMD ["yarn", "-s", "run", "app:prod"]

README.md

@@ -30,10 +30,6 @@ PAGERBEAUTY_REFRESH_RATE_MINUTES=10
 # Optional: Enable basic http authentication
 PAGERBEAUTY_HTTP_USER=basic_username
 PAGERBEAUTY_HTTP_PASSWORD=basic_password
-
-# Optional: Local time zone, defaults to server timezone
-# https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
-TZ=America/New_York
 ```
 
 ## Add to DataDog wallboard
@@ -59,6 +55,7 @@ This project is under active development.
 - [x] Show dates in local time
 - [x] Configurable refresh period
 - [x] HTTP Basic Authentication
+- [x] On-call TimeZone is loaded from the PagerDuty schedule settings
 - [ ] Full README.md and examples
 - [ ] Unit testing
 - [ ] Load all API pages

package.json

@@ -5,7 +5,7 @@
   "repository": "git@github.com:sergiitk/pagerbeauty.git",
   "author": "Sergii Tkachenko <hi@sergii.org>",
   "license": "MIT",
-  "main": "./pagerbeauty",
+  "main": "./src/pagerbeauty",
   "engines": {
     "node": "^10.14.0",
     "npm": "^6.4.1",
@@ -17,8 +17,12 @@
     "test:integration": "NODE_ENV=test ava test/integration",
     "test:full": "npm run test:unit && npm run test:integration",
     "lint": "eslint --ext .js --ext .mjs .",
-    "app": "node --experimental-modules pagerbeauty.mjs",
-    "app:watch": "nodemon --experimental-modules pagerbeauty.mjs"
+    "build": "webpack --config webpack.dev.js",
+    "build:watch": "webpack --watch --config webpack.dev.js",
+    "build:prod": "NODE_ENV=production webpack --config webpack.prod.js",
+    "app": "node --experimental-modules src/pagerbeauty.mjs",
+    "app:watch": "nodemon --experimental-modules src/pagerbeauty.mjs",
+    "app:prod": "NODE_ENV=production node --experimental-modules src/pagerbeauty.mjs"
   },
   "dependencies": {
     "dotenv": "^6.1.0",
@@ -29,19 +33,49 @@
     "koa-static": "^5.0.0",
     "koa-views": "^6.1.4",
     "moment": "^2.22.2",
+    "moment-timezone": "^0.5.23",
     "node-fetch": "^2.2.0",
-    "nunjucks": "^3.1.3"
+    "nunjucks": "^3.1.3",
+    "url-search-params-polyfill": "^5.0.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.1.2",
+    "@babel/preset-env": "^7.1.0",
+    "@babel/preset-react": "^7.0.0",
     "@semantic-release/changelog": "^3.0.1",
     "@semantic-release/git": "^7.0.5",
     "ava": "^1.0.1",
+    "babel-loader": "^8.0.4",
     "conventional-changelog-ember": "^2.0.2",
+    "css-loader": "^1.0.1",
     "eslint": "^5.8.0",
     "eslint-config-airbnb-base": "^13.1.0",
     "eslint-plugin-import": "^2.14.0",
+    "mini-css-extract-plugin": "^0.4.5",
+    "node-sass": "^4.10.0",
     "nodemon": "^1.18.5",
-    "semantic-release": "^15.10.7"
+    "optimize-css-assets-webpack-plugin": "^5.0.1",
+    "react": "^16.6.0",
+    "react-dom": "^16.6.0",
+    "sass-loader": "^7.1.0",
+    "semantic-release": "^15.10.7",
+    "style-loader": "^0.23.1",
+    "webpack": "^4.24.0",
+    "webpack-cli": "^3.1.2",
+    "webpack-merge": "^4.1.5"
+  },
+  "nodemonConfig": {
+    "verbose": true,
+    "watch": [
+      "src"
+    ],
+    "ext": "js,mjs,html.j2"
+  },
+  "babel": {
+    "presets": [
+      "@babel/preset-env",
+      "@babel/preset-react"
+    ]
   },
   "release": {
     "branch": "production",
@@ -76,6 +110,7 @@
         {
           "assets": [
             "CHANGELOG.md",
+            "assets/dist-prod/**/*.{js,css}",
             "package.json"
           ],
           "message": "${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"

src/app/PagerBeautyWebApp.mjs

@@ -84,6 +84,12 @@ export class PagerBeautyWebApp {
     const nunjucksEnv = new nunjucks.Environment(
       new nunjucks.FileSystemLoader(viewsPath),
     );
+    // Global template variables.
+    const assetsPath = this.config.env === 'production'
+      ? '/assets/dist-prod'
+      : '/assets/dist';
+    nunjucksEnv.addGlobal('assetsPath', assetsPath);
+    // Apply nunjucks to all *.j2
     app.use(views(viewsPath, {
       options: {
         nunjucksEnv,

src/assets/javascripts/application.jsx

@@ -0,0 +1,24 @@
+/* eslint-disable */
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import { SchedulesList, Schedule } from './schedules';
+
+// Render schedules list
+const schedulesListRoot = document.getElementById('schedules_list');
+if (schedulesListRoot) {
+  ReactDOM.render(<SchedulesList></SchedulesList>, schedulesListRoot);
+}
+
+// Render individual schedules
+document.querySelectorAll('.schedule_root').forEach((schedule) => {
+  ReactDOM.render(<Schedule scheduleId={schedule.dataset.id}></Schedule>, schedule);
+})
+
+// Old-school refresh. To be replaced with React component states.
+window.onload = function() {
+  window.setTimeout(function() {
+    location.reload();
+  }, 60000); // 1 minute
+}

src/assets/javascripts/index.jsx

@@ -0,0 +1,2 @@
+import '../stylesheets/application.scss';
+import './application';