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

Link

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.

• https://github.com/gitname/react-gh-pages
• https://dev.to/yuribenjamin/how-to-deploy-react-app-in-github-pages-2a1f

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