Merge pull request #19 from eidam/develop

v1.1

.github/workflows/deploy.yml

@@ -28,11 +28,18 @@ jobs:
           echo "[env.production]" >> wrangler.toml
           echo "kv_namespaces = [{binding=\"KV_STATUS_PAGE\", id=\"${KV_NAMESPACE_ID}\"}]" >> wrangler.toml
           [ -z "$SECRET_SLACK_WEBHOOK_URL" ] && echo "Secret SECRET_SLACK_WEBHOOK_URL not set, creating dummy one..." && SECRET_SLACK_WEBHOOK_URL="default-gh-action-secret" || true
+          [ -z "$SECRET_TELEGRAM_API_TOKEN" ] && echo "Secret SECRET_TELEGRAM_API_TOKEN not set, creating dummy one..." && SECRET_TELEGRAM_API_TOKEN="default-gh-action-secret" || true
+          [ -z "$SECRET_TELEGRAM_CHAT_ID" ] && echo "Secret SECRET_TELEGRAM_CHAT_ID not set, creating dummy one..." && SECRET_TELEGRAM_CHAT_ID="default-gh-action-secret" || true
         postCommands: |
           yarn kv-gc
         secrets: |
           SECRET_SLACK_WEBHOOK_URL
+          SECRET_TELEGRAM_API_TOKEN
+          SECRET_TELEGRAM_CHAT_ID
         environment: production
       env:
+        NODE_ENV: production
         CF_ACCOUNT_ID: ${{ secrets.CF_ACCOUNT_ID }}
         SECRET_SLACK_WEBHOOK_URL: ${{secrets.SECRET_SLACK_WEBHOOK_URL}}
+        SECRET_TELEGRAM_API_TOKEN: ${{secrets.SECRET_TELEGRAM_API_TOKEN}}
+        SECRET_TELEGRAM_CHAT_ID: ${{secrets.SECRET_TELEGRAM_CHAT_ID}}

.gitignore

@@ -133,3 +133,4 @@ worker/
 .direnv/
 out/
 package-lock.json
+public/style.css

.prettierignore

@@ -0,0 +1,3 @@
+# Ignore generated files
+out
+public

CODE_OF_CONDUCT.md

@@ -14,22 +14,22 @@ appearance, race, religion, or sexual identity and orientation.
 Examples of behavior that contributes to creating a positive environment
 include:
 
-* Using welcoming and inclusive language
-* Being respectful of differing viewpoints and experiences
-* Gracefully accepting constructive criticism
-* Focusing on what is best for the community
-* Showing empathy towards other community members
+- Using welcoming and inclusive language
+- Being respectful of differing viewpoints and experiences
+- Gracefully accepting constructive criticism
+- Focusing on what is best for the community
+- Showing empathy towards other community members
 
 Examples of unacceptable behavior by participants include:
 
-* The use of sexualized language or imagery and unwelcome sexual attention or
- advances
-* Trolling, insulting/derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or electronic
- address, without explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
- professional setting
+- The use of sexualized language or imagery and unwelcome sexual attention or
+  advances
+- Trolling, insulting/derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or electronic
+  address, without explicit permission
+- Other conduct which could reasonably be considered inappropriate in a
+  professional setting
 
 ## Our Responsibilities
 

README.md

@@ -10,15 +10,15 @@ Monitor your websites, showcase status including daily history, and get Slack no
 
 You'll need a [Cloudflare Workers account](https://dash.cloudflare.com/sign-up/workers) with
 
-* A workers domain set up
-* The Workers Bundled subscription \($5/mo\)
-    * [It works with Workers Free!](https://blog.cloudflare.com/workers-kv-free-tier/) Check [more info](#workers-kv-free-tier) on how to run on Workers Free. 
-* Some websites/APIs to watch 🙂
+- A workers domain set up
+- The Workers Bundled subscription \($5/mo\)
+  - [It works with Workers Free!](https://blog.cloudflare.com/workers-kv-free-tier/) Check [more info](#workers-kv-free-tier) on how to run on Workers Free.
+- Some websites/APIs to watch 🙂
 
 Also, prepare the following secrets
 
-* Cloudflare API token with `Edit Cloudflare Workers` permissions
-* Slack incoming webhook \(optional\)
+- Cloudflare API token with `Edit Cloudflare Workers` permissions
+- Slack incoming webhook \(optional\)
 
 ## Getting started
 
@@ -39,6 +39,7 @@ You can either deploy with **Cloudflare Deploy Button** using GitHub Actions or
    - Name: SECRET_SLACK_WEBHOOK_URL (optional)
    - Value: your-slack-webhook-url
    ```
+
 3. Navigate to the **Actions** settings in your repository and enable them
 4. Edit [config.yaml](./config.yaml) to adjust configuration and list all of your websites/APIs you want to monitor
 
@@ -48,6 +49,7 @@ You can either deploy with **Cloudflare Deploy Button** using GitHub Actions or
      url: 'https://status-page.eidam.dev' # used for Slack messages
      logo: logo-192x192.png # image in ./public/ folder
      daysInHistogram: 90 # number of days you want to display in histogram
+     collectResponseTimes: false # experimental feature, enable only for <5 monitors or on paid plans
 
      # configurable texts across the status page
      allmonitorsOperational: 'All Systems Operational'
@@ -73,32 +75,46 @@ You can either deploy with **Cloudflare Deploy Button** using GitHub Actions or
 5. Push to `main` branch to trigger the deployment
 6. 🎉
 7. _\(optional\)_ Go to [Cloudflare Workers settings](https://dash.cloudflare.com/?to=/workers) and assign custom domain/route
-   * e.g. `status-page.eidam.dev/*` _\(make sure you include `/*` as the Worker also serve static files\)_
+   - e.g. `status-page.eidam.dev/*` _\(make sure you include `/*` as the Worker also serve static files\)_
 8. _\(optional\)_ Edit [wrangler.toml](./wrangler.toml) to adjust Worker settings or CRON Trigger schedule, especially if you are on [Workers Free plan](#workers-kv-free-tier)
 
+### Telegram notifications
+
+To enable telegram notifications, you'll need to take a few additional steps.
+
+1. [Create a new Bot](https://core.telegram.org/bots#creating-a-new-bot)
+2. Set the api token you received when creating the bot as content of the `SECRET_TELEGRAM_API_TOKEN` secret in your github repository.
+3. Send a message to the bot from the telegram account which should receive the alerts (Something more than `/start`)
+4. Get the chat id with `curl https://api.telegram.org/bot<YOUR TELEGRAM API TOKEN>/getUpdates | jq '.result[0] .message .chat .id'`
+5. Set the retrieved chat id in the `SECRET_TELEGRAM_CHAT_ID` secret variable
+6. Redeploy the status page using the github action
+
 ### Deploy on your own
 
 You can clone the repository yourself and use Wrangler CLI to develop/deploy, extra list of things you need to take care of:
 
-* create KV namespace and add the `KV_STATUS_PAGE` binding to [wrangler.toml](./wrangler.toml)
-* create Worker secrets _\(optional\)_
-  * `SECRET_SLACK_WEBHOOK_URL`
+- create KV namespace and add the `KV_STATUS_PAGE` binding to [wrangler.toml](./wrangler.toml)
+- create Worker secrets _\(optional\)_
+  - `SECRET_SLACK_WEBHOOK_URL`
 
 ## Workers KV free tier
-The Workers Free plan includes limited KV usage, but the quota is sufficient for 2-minute checks only 
-* Change the CRON trigger to 2 minutes interval (`crons = ["*/2 * * * *"]`) in [wrangler.toml](./wrangler.toml)
+
+The Workers Free plan includes limited KV usage, but the quota is sufficient for 2-minute checks only
+
+- Change the CRON trigger to 2 minutes interval (`crons = ["*/2 * * * *"]`) in [wrangler.toml](./wrangler.toml)
 
 ## Known issues
 
-* **Max 25 monitors to watch in case you are using Slack notifications**, due to the limit of subrequests Cloudflare Worker can make \(50\).
+- **Max 25 monitors to watch in case you are using Slack notifications**, due to the limit of subrequests Cloudflare Worker can make \(50\).
 
   The plan is to support up to 49 by sending only one Slack notification per scheduled run.
 
-* **KV replication lag** - You might get Slack notification instantly, however it may take couple of more seconds to see the change on your status page as [Cron Triggers are usually running on underutilized quiet hours machines](https://blog.cloudflare.com/introducing-cron-triggers-for-cloudflare-workers/#how-are-you-able-to-offer-this-feature-at-no-additional-cost).
+- **KV replication lag** - You might get Slack notification instantly, however it may take couple of more seconds to see the change on your status page as [Cron Triggers are usually running on underutilized quiet hours machines](https://blog.cloudflare.com/introducing-cron-triggers-for-cloudflare-workers/#how-are-you-able-to-offer-this-feature-at-no-additional-cost).
 
-* **Initial delay (no data)** - It takes couple of minutes to schedule and run CRON Triggers for the first time
+- **Initial delay (no data)** - It takes couple of minutes to schedule and run CRON Triggers for the first time
 
 ## Future plans
+
 Stay tuned for more features coming in, like leveraging the fact that CRON instances are scheduled around the world during the day
- so we can monitor the response times. However, we will most probably wait for the [Durable Objects](https://blog.cloudflare.com/introducing-workers-durable-objects/) to be in open beta
- as they are better fit to reliably store such info.
+so we can monitor the response times. However, we will most probably wait for the [Durable Objects](https://blog.cloudflare.com/introducing-workers-durable-objects/) to be in open beta
+as they are better fit to reliably store such info.

SUMMARY.md

@@ -1,4 +1,3 @@
 # Table of contents
 
-* [Cloudflare Worker - Status Page](README.md)
-
+- [Cloudflare Worker - Status Page](README.md)

config.yaml

@@ -3,6 +3,7 @@ settings:
   url: 'https://status-page.eidam.dev' # used for Slack messages
   logo: logo-192x192.png # image in ./public/ folder
   daysInHistogram: 90 # number of days you want to display in histogram
+  collectResponseTimes: false # experimental feature, enable only for <5 monitors or on paid plans
 
   allmonitorsOperational: 'All Systems Operational'
   notAllmonitorsOperational: 'Not All Systems Operational'
@@ -11,7 +12,7 @@ settings:
   monitorLabelNoData: 'No data'
   dayInHistogramNoData: 'No data'
   dayInHistogramOperational: 'All good'
-  dayInHistogramNotOperational: 'Some checks failed'
+  dayInHistogramNotOperational: ' incident(s)' # xx incident(s) recorded
 
 monitors:
   - id: workers-cloudflare-com # unique identifier

index.js

@@ -10,7 +10,7 @@ import { processCronTrigger } from './src/functions/cronTrigger'
  */
 const DEBUG = false
 
-addEventListener('fetch', event => {
+addEventListener('fetch', (event) => {
   try {
     event.respondWith(
       handleEvent(event, require.context('./pages/', true, /\.js$/), DEBUG),
@@ -27,6 +27,6 @@ addEventListener('fetch', event => {
   }
 })
 
-addEventListener('scheduled', event => {
+addEventListener('scheduled', (event) => {
   event.waitUntil(processCronTrigger(event))
 })

package.json

@@ -7,21 +7,29 @@
   "private": true,
   "scripts": {
     "dev": "flareact dev",
-    "build": "flareact build",
-    "deploy": "flareact publish",
+    "build": "yarn css && flareact build",
+    "deploy": "yarn build && flareact publish",
     "kv-gc": "node ./src/cli/gcMonitors.js",
-    "format": "prettier --write '**/*.{js,css,json,md}'"
+    "format": "prettier --write '**/*.{js,css,json,md}'",
+    "css": "postcss public/tailwind.css -o public/style.css",
+    "postinstall": "patch-package"
   },
   "dependencies": {
-    "flareact": "^0.9.0",
+    "flareact": "0.9.0",
     "laco": "^1.2.1",
     "laco-react": "^1.1.0",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1"
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
   },
   "devDependencies": {
+    "autoprefixer": "^10.0.2",
     "node-fetch": "^2.6.1",
-    "prettier": "^1.18.2",
-    "yaml-loader": "^0.6.0"
+    "postcss": "^8.1.8",
+    "postcss-cli": "^8.3.0",
+    "prettier": "^2.2.0",
+    "tailwindcss": "^2.0.1",
+    "yaml-loader": "^0.6.0",
+    "patch-package": "^6.2.2",
+    "postinstall-postinstall": "^2.1.0"
   }
 }

pages/api/triggerCron.js

@@ -1,6 +1,6 @@
 import { processCronTrigger } from '../../src/functions/cronTrigger'
 
-export default async event => {
+export default async (event) => {
   // used only for local debugging
   //return processCronTrigger(event)
 }