Introduce next-gen status page (#67)

This version includes both data from Healthchecks.io and Sentry.

.eslintrc.cjs

@@ -0,0 +1,27 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/strict-type-checked',
+    'plugin:@typescript-eslint/stylistic-type-checked',
+    'plugin:react-hooks/recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: ['./tsconfig.json', './tsconfig.node.json'],
+    tsconfigRootDir: __dirname,
+  },
+}

.github/workflows/deploy.yml

@@ -8,6 +8,13 @@ on:
 
   workflow_dispatch:
 
+concurrency: provision_concurrency_group-${{ github.event.pull_request.number || github.ref_name }}
+
+env:
+  # This is used during the build step (vite.config.js) to determine the base URL.
+  # https://vitejs.dev/guide/static-deploy#github-pages
+  DEPLOY_PATH: ${{ github.ref_name == 'main' && '/' || format('/previews/pr-{0}/{1}...{2}', github.event.pull_request.number, github.event.pull_request.base.sha, github.event.pull_request.head.sha) }}
+
 jobs:
   build:
     runs-on: ubuntu-latest
@@ -23,13 +30,13 @@ jobs:
       - name: Build
         run: |
           npm ci
-          npm run export
+          npm run build
 
       - name: Upload build output
         uses: actions/upload-artifact@v3
         with:
           name: build-output
-          path: ./out
+          path: ./dist
 
   deploy_prod:
     runs-on: ubuntu-latest
@@ -43,7 +50,7 @@ jobs:
         uses: actions/download-artifact@v3
         with:
           name: build-output
-          path: ./out
+          path: ./dist
 
       - name: Set up mutex
         uses: ben-z/[email protected]
@@ -55,7 +62,7 @@ jobs:
         uses: JamesIves/[email protected]
         with:
           branch: gh-pages
-          folder: ./out
+          folder: ./dist
           clean-exclude: previews/*
 
   deploy_preview:
@@ -75,7 +82,7 @@ jobs:
         uses: actions/download-artifact@v3
         with:
           name: build-output
-          path: ./out
+          path: ./dist
 
       - name: Set up mutex
         uses: ben-z/[email protected]
@@ -87,8 +94,8 @@ jobs:
         uses: JamesIves/[email protected]
         with:
           branch: gh-pages
-          folder: ./out
-          target-folder: './previews/pr-${{ github.event.pull_request.number }}/${{ github.event.pull_request.base.sha }}...${{ github.event.pull_request.head.sha }}'
+          folder: ./dist
+          target-folder: '.${{ env.DEPLOY_PATH }}'
 
       - name: Create comment
         uses: peter-evans/create-or-update-comment@v2
@@ -99,4 +106,4 @@ jobs:
             It will be ready in about a minute. [You can view it here][preview].
 
             [compare]: ${{ github.event.pull_request.head.repo.html_url }}/compare/${{ github.event.pull_request.base.sha }}...${{ github.event.pull_request.head.sha }}
-            [preview]: ${{ github.event.pull_request.head.repo.homepage }}/previews/pr-${{ github.event.pull_request.number }}/${{ github.event.pull_request.base.sha }}...${{ github.event.pull_request.head.sha }}
+            [preview]: ${{ github.event.pull_request.head.repo.homepage }}${{ env.DEPLOY_PATH }}

.gitignore

@@ -1,34 +1,24 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# next.js
-/.next/
-/out/
-
-# production
-/build
-
-# misc
-.DS_Store
-*.pem
-
-# debug
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-
-# local env files
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-# vercel
-.vercel
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -1,35 +1,14 @@
-# WATonomous Status
+# WATcloud Status Page
 
-Still trying to see what this repo will be about. For now it's a barebones status page running on GitHub pages and using the healthchecks.io API. We can probably combine this with what's behind http://vm-status.watonomous.ca.
+The [WATcloud Status Page](https://status.watonomous.ca) is a frontend-only web app that pulls data from various sources like [Healthchecks.io](https://healthchecks.io)
+and [Sentry](https://sentry.io) to provide a single place to view the health of WATcloud.
 
-- `/` contains all Terraform-provisioned checks.
-- `/legacy` is adapted from [healthchecks-front](https://github.com/nicoandrade/healthchecks-front). This only supports one Healthchecks.io project.
-- `/legacy2` is adapted from [healthchecks/dashboard](https://github.com/healthchecks/dashboard). This supports multiple Healthchecks.io projects, but the UI is not as intuitive as `/` at first glance.
+## Development
 
-### Development
-
-To start a development server:
+To run the status page locally, you will need to have [Node.js](https://nodejs.org/en/) installed.
+Then, you can run the following commands to install dependencies and start the development server:
 
 ```bash
-npm ci # install dependencies without updating them
+npm install
 npm run dev
-```
-
-### Testing
-
-To verify that the static export is working, do this in the root of the project:
-
-```bash
-npm run export
-cd out
-python3 -m http.server 8082
-```
-
-Then head to http://localhost:8082 to ensure that the changes are as expected. \
-Note: Go to http://localhost:8082/all.html to view to page to `/all`
-
-### Deployment
-
-We deploy healthchecks-front by [exporting the Next.js application as static HTML](https://nextjs.org/docs/advanced-features/static-html-export), then hosting it with [GitHub Pages](https://pages.github.com).
-
-The HTML-generation process is currently automated with Github Actions. Any changes committed to `main` will trigger the [deployment process](https://github.com/WATonomous/status/actions/workflows/deploy.yml).
+```