gorkem-bwl
f92dc835b7
The status page appearance form saves a customer-picked brand color
(`statusPage.color`), but `StatusPageThemeProvider` never consumed it —
every rendered surface styled from `tokens.up`, so the picker had no
visible effect on the public page.
Rather than overriding `tokens.up` (the semantic OK/up status color,
which would let a red or orange brand color render the "all
operational" indicator in a red that reads as downtime), this
introduces a separate `brand` / `brandStrong` / `brandSoft` token
triple that is distinct from the up/OK color.
## Changes
- `themes/tokens.ts`: add optional `brand` / `brandStrong` / `brandSoft`
fields on `StatusPageThemeTokens`. Themes leave them undefined; the
provider falls back to the theme's `up*` values so nothing regresses
before individual themes opt in.
- `themes/StatusPageThemeProvider.tsx`: add `brandColor` prop and a
`resolveBrandTokens` helper. When a valid hex is provided it feeds
`brand`, `brandStrong = darken(x, 0.2)`, `brandSoft = alpha(x, 0.15)`
using MUI's shared `alpha`/`darken` (replaces the ad-hoc hex helpers).
Invalid or empty values fall through cleanly.
- `Status/index.tsx`: pass `brandColor={statusPage.color}` only at the
public route. The admin preview provider wraps an iframe whose
document renders itself, so passing the prop there had no effect and
is dropped.
- `themes/refined/styles.ts`: switch accent surfaces (hero logo, active
chart-switch button, hardware pill, footer link) from `tokens.up` to
`tokens.brand`. Uptime bars, status pills, and OK indicators stay on
`tokens.up`. Other themes keep their current styling until a designer
decides which surfaces should switch.
## Benefits
- Brand Color picker actually changes the rendered accent surfaces.
- The semantic "OK/up" status color is never repainted by the brand
color, so operational-state indicators stay green regardless of the
customer's brand.
- Reuses MUI's `alpha` / `darken` helpers already used across the
client; no divergent color utilities.
- Small, incremental adoption: themes opt in at their own pace by
reading `tokens.brand*` where they want the brand accent.
🇺🇸 English | 🇸🇦 العربية | 🇪🇸 Català | 🇨🇿 Čeština | 🇩🇪 Deutsch | 🇪🇸 Español | 🇫🇮 Suomi | 🇫🇷 Français | 🇮🇹 Italiano | 🇯🇵 日本語 | 🇧🇷 Português (Brasil) | 🇷🇺 Русский | 🇹🇭 ไทย | 🇹🇷 Türkçe | 🇺🇦 Українська | 🇻🇳 Tiếng Việt | 🇨🇳 简体中文 | 🇹🇼 繁體中文
Checkmate
An open source uptime and infrastructure monitoring application
This repository contains both the frontend and the backend of Checkmate, an open-source, self-hosted monitoring tool for tracking server hardware, uptime, response times, and incidents in real-time with beautiful visualizations. Checkmate regularly checks whether a server/website is accessible and performs optimally, providing real-time alerts and reports on the monitored services' availability, downtime, and response time.
Checkmate also has an agent, called Capture, to retrieve data from remote servers. While Capture is not required to run Checkmate, it provides additional insights about your servers' CPU, RAM, disk, and temperature status. Capture can run on Linux, Windows, Mac, Raspberry Pi, or any device that can run Go.
Checkmate has been stress-tested with 1000+ active monitors without any particular issues or performance bottlenecks.
📚 Table of contents
- 📦 Demo
- 🔗 User's guide
- 🛠️ Installation
- 🚀 Performance
- 💚 Questions & Ideas
- 🧩 Features
- 🏗️ Screenshots
- 🏗️ Tech stack
- 🔗 A few links
- 🤝 Contributing
Demo
You can see the latest build of Checkmate in action.
The username is demouser@demo.com and the password is Demouser1! (just a note that we update the demo server from time to time, so if it doesn't work for you, please ping us on the Discussions channel).
User's guide
Usage instructions can be found here.
Prerequisites
Installation
See installation instructions in Checkmate documentation portal.
Alternatively, you can also use Coolify, Elestio, K8s, Sive Host (South Africa), Cloudzy or Pikapods to quickly spin off a Checkmate instance. If you would like to monitor your server infrastructure, you'll need Capture agent. Capture repository also contains the installation instructions.
Using a Custom CA
If you need to monitor internal HTTPS endpoints with certificates from private Certificate Authorities (like Smallstep), see our Custom CA Trust Guide for Docker configuration options.
For more documentation, see the docs directory.
Performance
Thanks to extensive optimizations, Checkmate operates with an exceptionally small memory footprint, requiring minimal memory and CPU resources. Here’s the memory usage of a Node.js instance running on a server that monitors 323 servers every minute:
You can see the memory footprint of MongoDB and Redis on the same server (398Mb and 15Mb) for the same amount of servers:
Questions & Ideas
If you have any questions, suggestions or comments, you have several options:
- Discord channel (preferred)
- GitHub Discussions (we check here from time to time)
Feel free to ask questions or share your ideas - we'd love to hear from you!
Features
- Completely open source, deployable on your servers or home devices (e.g Raspberry Pi 4 or 5)
- Several monitoring options: Uptime, Docker, Ping, SSL, Port, Game server
- Page speed monitoring
- Infrastructure monitoring (memory, disk usage, CPU performance, network etc) - requires Capture agent
- Selective disk monitoring with mountpoint selection
- Incidents at a glance
- Status pages with 4 beautiful themes
- E-mail, Webhooks, Discord, Slack, PagerDuty, Matrix, Microsoft Teams, Telegram, Pushover, Twilio (SMS) notifications
- Scheduled maintenance
- JSON query monitoring
- Multi-language support for Arabic, Chinese (Simplified), Chinese (Traditional, Taiwan), Czech, English, Finnish, French, German, Japanese, Portuguese (Brazil), Russian, Spanish, Thai, Turkish, Ukrainian, and Vietnamese
Monitor Lifecycle
- A monitor executes a check (HTTP / ping / port / hardware via Capture agent)
- The result is stored (success/failure + response time)
- Recent check results are evaluated against the monitor's configured status change threshold
- If the monitor's status change threshold is met and the current status is not equal to the previous status, the monitor's state changes (e.g.
initializing,up,down,breached) - Upon a state change: an incident is either created or resolved, depending on the monitor's current status
- Notifications are triggered based on configuration
Screenshots
Tech stack
- ReactJs
- MUI (React framework)
- Node.js
- MongoDB
- Recharts
- Lots of other open source components!
A few links
- If you would like to support us, please consider giving it a ⭐ and click on "watch".
- Have a question or suggestion for the roadmap/featureset? Check our Discord channel or Discussions forum.
- Need a ping when there's a new release? Use Newreleases, a free service to track releases.
- Watch a Checkmate installation and usage video
Contributing
We are Alex (team lead), Gorkem, Aryaman, Mert and Karen helping individuals and businesses monitor their infra and servers.
We pride ourselves on building strong connections with contributors at every level. Despite being a young project, Checkmate has already earned 7000+ stars and attracted 90+ contributors from around the globe.
Our repo is starred by employees from Google, Microsoft, Intel, Cisco, Tencent, Electronic Arts, ByteDance, JP Morgan Chase, Deloitte, Accenture, Foxconn, Broadcom, China Telecom, Barclays, Capgemini, Wipro, Cloudflare, Dassault Systèmes and NEC, so don’t hold back — jump in, contribute and learn with us!
Here's how you can contribute:
- Star this repo :)
- Check Contributor's guideline. First timers are encouraged to check
good-first-issuetag. - Read a detailed structure of Checkmate if you would like to deep dive into the architecture.
- Open an issue if you believe you've encountered a bug.
- Check for good-first-issue's if you are a newcomer.
- Make a pull request to add new features/make quality-of-life improvements/fix bugs.
- Check out this interactive walkthrough of the
Checkmatecodebase on CodeCanvas here. To refine existing dataflow simulation or create new ones, follow the quick tutorial here.