• Created by user-0432d, last updated on May 25, 2021 2 minute read

Sometimes the report/alert emails are blocked falsely by uni's email filters. To compensate for this case, we have built a webpage that users can actively check latest monitoring results, i.e. system status


https://infant-nutrition-project.github.io/system-status/

Technical notes for developers

Why GitHub Page?

GitHub Pages: It's free, sufficient for this type of simple app, and low-maintenance (GitHub takes care of SSL cert automatically)

WARNING: Frontend repo is public, DO NOT PUT ANY CONFIDENTIAL INFO in clear text

Frontend: setup

Built with React (repo link)

Hosted by GitHub Pages

  • For free account (like ours), this repo is public (different from other repos)
    • Since this repo is public, DO NOT PUT ANY CONFIDENTIAL INFO in clear text
    • For instance, in the file src/api/ApiConfig.js  , the API is NOT protected with API Key => That's why part of the string is replaced with SECRET, which must be entered by user at the frontend
    • SECRET can be found in the Box folder DIAPER confidential  > System Status
  • There are two branches under this repo
    • master  : Source code
    • gh-pages  : GitHub pages are hosted from this branch

Frontend: How to deploy React app on GitHub Pages (It's FREE and sufficient for a SIMPLE app as this one)?

Make sure under repo's Settings > Pages > Source is set to the Branch gh-pages 

Follow the two tutorial links. Very straightforward.

Backend

Data is written by the same two monitoring lambdas (job1 (report_atlas) and job2) into DynamoDB

  • Written once per day
  • Will overwrite previous entries. Hence only 2 entries are persisted
  • Table name: Monitoring 

Frontend will call an API to read the data

  • Workflow: Frontend → API Gateway → Lambda → DynamoDB
  • Frontend: Shown as above
  • API Gateway: getMonitorResults-API 
  • Lamda: getMonitorResults 
  • DynamoDB:  Monitoring



  • No labels