Compare commits
1
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Malena Aguiar
|
e0e5a334bb |
No files matched your search
@@ -92,7 +92,7 @@ JWT_SECRET="$(openssl rand -hex 32)" docker compose up -d
|
||||
Then open http://localhost:52345. If the app is reached at another origin (domain or LAN IP), set `CLIENT_HOST` accordingly. To build the image yourself, run `docker build -f docker/Dockerfile -t checkmate .` from a checkout. For TLS, put any reverse proxy (Caddy, Traefik, nginx) in front of port 52345.
|
||||
|
||||
There are also 1-click installation options like [Repocloud](https://repocloud.io/details/Checkmate),
|
||||
[Pikapods](https://www.pikapods.com/), [Coolify](https://coolify.io/), [Elestio](https://elest.io/open-source/checkmate), [Easypanel](https://easypanel.io/templates/checkmate), [K8s](./charts/helm/checkmate/INSTALLATION.md), [Sive Host](https://sive.host) or [Cloudzy](https://cloudzy.com/marketplace/checkmate). Note that the Helm chart has not yet been migrated to the all-in-one image: it still deploys the legacy `checkmate-client`, `checkmate-backend` and `checkmate-mongo` images, pinned at v3.8.1.
|
||||
[Pikapods](https://www.pikapods.com/), [Coolify](https://coolify.io/), [Elestio](https://elest.io/open-source/checkmate), [K8s](../../charts/helm/checkmate/INSTALLATION.md), [Sive Host](https://sive.host) or [Cloudzy](https://cloudzy.com/marketplace/checkmate).
|
||||
|
||||
|
||||
### Configuration
|
||||
@@ -104,15 +104,7 @@ The image is configured entirely through environment variables on the server con
|
||||
| `DB_CONNECTION_STRING` | Yes | MongoDB connection string, e.g. `mongodb://mongodb:27017/uptime_db` |
|
||||
| `JWT_SECRET` | Yes | Secret used to sign auth tokens; generate one with `openssl rand -hex 32` |
|
||||
| `CLIENT_HOST` | Yes | The URL users reach the app at, e.g. `https://checkmate.example.com`; used for CORS and for links in notifications and emails |
|
||||
| `ENCRYPTION_KEY` | No | Encrypts stored Docker TLS client keys at rest; generate one with `openssl rand -base64 32`. Comma-separated list: the first key encrypts, every key decrypts. Must be identical on the API and every worker. To rotate without downtime, deploy `OLD_KEY,NEW_KEY` everywhere, then `NEW_KEY,OLD_KEY` everywhere, wait for the worker to re-encrypt every row, then drop `OLD_KEY`. |
|
||||
| `PORT` | No | Port the API and web client are served on (default `52345`) |
|
||||
| `HEALTH_PORT` | No | Port for the `/livez`, `/readyz` and `/metrics` endpoints, served by any process that runs the job worker (default `52346`) |
|
||||
| `NODE_ENV` | No | `development`, `production` or `test` (default `development`). `development` disables the general API rate limiter; set `production` on real deployments |
|
||||
| `LOG_LEVEL` | No | Server log level: `error`, `warn`, `info`, or `debug` (default `debug`) |
|
||||
| `TOKEN_TTL` | No | Lifetime of issued auth tokens, e.g. `12h` or `7d` (default `99d`) |
|
||||
| `QUEUE_MODE` | No | `primary` (default) runs the API, the web client and the job scheduler; `worker` runs a job-processing worker only, with no API |
|
||||
| `QUEUE_PRIMARY_PROCESSES` | No | `true` (default) or `false`. Whether a `primary` node also processes monitoring jobs itself; set `false` when dedicated `worker` nodes handle all checks. Ignored in `worker` mode |
|
||||
| `STATUS_PAGE_THEMES_ENABLED` | No | `true` (default) or `false`. When `false`, status pages ignore theme settings and always render the default theme |
|
||||
|
||||
The web client needs no configuration by default: it calls the API on the same origin it was served from (`/api/v1`). For setups where the defaults don't apply — for example, the API is reached through a different origin than the page — the server renders overrides into the client at runtime via these optional variables:
|
||||
|
||||
@@ -126,122 +118,12 @@ The web client needs no configuration by default: it calls the API on the same o
|
||||
|
||||
See full installation instructions in the [Checkmate documentation portal](https://checkmate.so/docs).
|
||||
|
||||
Alternatively, you can also use [Coolify](https://coolify.io/), [Elestio](https://elest.io/open-source/checkmate), [K8s](./charts/helm/checkmate/INSTALLATION.md) (legacy images, pinned at v3.8.1), [Sive Host](https://sive.host) (South Africa), [Cloudzy](https://cloudzy.com/marketplace/checkmate) or [Pikapods](https://www.pikapods.com/) to quickly spin off a Checkmate instance. If you would like to monitor your server infrastructure, you'll need [Capture agent](https://github.com/bluewave-labs/capture). Capture repository also contains the installation instructions.
|
||||
Alternatively, you can also use [Coolify](https://coolify.io/), [Elestio](https://elest.io/open-source/checkmate), [K8s](./charts/helm/checkmate/INSTALLATION.md), [Sive Host](https://sive.host) (South Africa), [Cloudzy](https://cloudzy.com/marketplace/checkmate) or [Pikapods](https://www.pikapods.com/) to quickly spin off a Checkmate instance. If you would like to monitor your server infrastructure, you'll need [Capture agent](https://github.com/bluewave-labs/capture). 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](./docs/custom-ca-trust.md) for Docker configuration options.
|
||||
|
||||
### Docker monitors
|
||||
|
||||
A Docker monitor reports on every container running on a host. It can connect to the Docker daemon directly or read container metrics from a Capture agent. Direct monitors use the daemon's ping response for availability and record container state, health, CPU and memory usage, restart count, published ports and mounts. Enabling **Collect container logs** additionally stores the latest 200 log lines per container on every direct check; logs are kept for 7 days.
|
||||
|
||||
The **Docker host** field accepts three forms:
|
||||
|
||||
| Host | Example | Notes |
|
||||
|---|---|---|
|
||||
| Local socket | `unix:///var/run/docker.sock` | Also accepts a bare absolute path such as `/var/run/docker.sock`. Use this for the daemon on the same machine Checkmate runs on. |
|
||||
| Remote daemon | `tcp://docker.example.com:2376` | Always uses mutual TLS; the port defaults to `2376`. Unencrypted daemons on `2375` are not supported. |
|
||||
| Capture agent | `https://capture.example.com/api/v1/metrics/docker` | Enter the full endpoint ending in `/metrics/docker` and its authorization secret. Checkmate requests `all=true` so stopped containers are included. |
|
||||
|
||||
Capture-backed monitors normalize Capture's container state, health, CPU, memory, start time and exposed ports into the same Docker pages. Capture does not currently provide restart counts, mounts, published host-port bindings or container logs, so those values are shown as unavailable. Capture also reports a container whose health check is still starting as healthy, so the `starting` health state only appears on direct monitors, and stopped containers carry no CPU or memory metrics.
|
||||
|
||||
**Monitoring the local socket.** The reference Compose file does not mount the socket, so add it and grant the container the host's `docker` group. The image runs as an unprivileged user and cannot read the socket otherwise. Find the group id with `stat -c %g /var/run/docker.sock`, then:
|
||||
|
||||
```yaml
|
||||
services:
|
||||
checkmate:
|
||||
volumes:
|
||||
- /var/run/docker.sock:/var/run/docker.sock:ro
|
||||
group_add:
|
||||
- "989" # the gid printed by stat
|
||||
```
|
||||
|
||||
**Monitoring a remote daemon.** Set the host to `tcp://host:port` and fill in the **TLS credentials** section of the monitor form with the same PEM files you would pass to `docker --tlsverify`:
|
||||
|
||||
- **CA certificate**: the CA that signed the daemon's server certificate. Required unless **Ignore TLS/SSL errors** is on, which skips verifying the daemon's identity.
|
||||
- **Client certificate**: the certificate the daemon uses to authenticate Checkmate.
|
||||
- **Client key**: the matching private key, unencrypted (no passphrase). Checkmate checks that it matches the certificate, encrypts it with `ENCRYPTION_KEY`, and never shows it again. Leave the field blank when editing to keep the stored key.
|
||||
|
||||
TLS Docker monitors require `ENCRYPTION_KEY` to be set on the server (see [Configuration](#configuration)). Saving one without it fails with an error telling you so. If the key is ever removed or rotated incorrectly, affected checks fail with a decryption error until it is restored.
|
||||
|
||||
If the daemon's certificate is signed by a private CA that you also want the rest of Checkmate to trust, see the [Custom CA Trust Guide](./docs/custom-ca-trust.md); for Docker monitors alone, the **CA certificate** field is enough.
|
||||
|
||||
### Securing the Docker daemon with TLS
|
||||
|
||||
The Docker daemon does not enable TLS by default. Follow these steps on the Docker host to generate a CA, a server certificate, and a client certificate for Checkmate. This is the procedure from [Docker's own guide](https://docs.docker.com/engine/security/protect-access/), condensed. Replace `docker.example.com` and `203.0.113.10` with your daemon's DNS name and IP.
|
||||
|
||||
**1. Create a CA.** The CA key gets a passphrase; keep it offline once the certificates are issued.
|
||||
|
||||
```bash
|
||||
openssl genrsa -aes256 -out ca-key.pem 4096
|
||||
openssl req -new -x509 -days 365 -key ca-key.pem -sha256 -subj "/CN=docker-ca" -out ca.pem
|
||||
```
|
||||
|
||||
**2. Create the server certificate.** The subject alternative names must cover every name or address Checkmate will use to reach the daemon.
|
||||
|
||||
```bash
|
||||
openssl genrsa -out server-key.pem 4096
|
||||
openssl req -subj "/CN=docker.example.com" -sha256 -new -key server-key.pem -out server.csr
|
||||
cat > server-ext.cnf <<EOF
|
||||
subjectAltName = DNS:docker.example.com,IP:203.0.113.10
|
||||
extendedKeyUsage = serverAuth
|
||||
EOF
|
||||
openssl x509 -req -days 365 -sha256 -in server.csr -CA ca.pem -CAkey ca-key.pem -CAcreateserial \
|
||||
-out server-cert.pem -extfile server-ext.cnf
|
||||
```
|
||||
|
||||
**3. Create the client certificate for Checkmate.** Do not add a passphrase to this key; Checkmate cannot use encrypted private keys.
|
||||
|
||||
```bash
|
||||
openssl genrsa -out key.pem 4096
|
||||
openssl req -subj "/CN=checkmate" -new -key key.pem -out client.csr
|
||||
echo "extendedKeyUsage = clientAuth" > client-ext.cnf
|
||||
openssl x509 -req -days 365 -sha256 -in client.csr -CA ca.pem -CAkey ca-key.pem -CAcreateserial \
|
||||
-out cert.pem -extfile client-ext.cnf
|
||||
rm client.csr server.csr server-ext.cnf client-ext.cnf
|
||||
chmod 0400 ca-key.pem key.pem server-key.pem
|
||||
chmod 0444 ca.pem server-cert.pem cert.pem
|
||||
```
|
||||
|
||||
**4. Point the daemon at the certificates.** Move `ca.pem`, `server-cert.pem` and `server-key.pem` to `/etc/docker/certs/` and configure `/etc/docker/daemon.json`:
|
||||
|
||||
```json
|
||||
{
|
||||
"hosts": ["unix:///var/run/docker.sock", "tcp://0.0.0.0:2376"],
|
||||
"tls": true,
|
||||
"tlsverify": true,
|
||||
"tlscacert": "/etc/docker/certs/ca.pem",
|
||||
"tlscert": "/etc/docker/certs/server-cert.pem",
|
||||
"tlskey": "/etc/docker/certs/server-key.pem"
|
||||
}
|
||||
```
|
||||
|
||||
On distributions where the systemd unit already passes `-H fd://` (Debian, Ubuntu and derivatives), the daemon refuses to start with `hosts` set in both places. Remove the flag from the unit with an override, then restart:
|
||||
|
||||
```bash
|
||||
sudo systemctl edit docker.service
|
||||
```
|
||||
|
||||
```ini
|
||||
[Service]
|
||||
ExecStart=
|
||||
ExecStart=/usr/bin/dockerd
|
||||
```
|
||||
|
||||
```bash
|
||||
sudo systemctl daemon-reload && sudo systemctl restart docker
|
||||
```
|
||||
|
||||
Open port `2376` on the host firewall only to the machine running Checkmate.
|
||||
|
||||
**5. Verify from the Checkmate host**, then paste `ca.pem`, `cert.pem` and `key.pem` into the monitor form:
|
||||
|
||||
```bash
|
||||
docker --tlsverify --tlscacert=ca.pem --tlscert=cert.pem --tlskey=key.pem \
|
||||
-H=docker.example.com:2376 version
|
||||
```
|
||||
|
||||
For more documentation, see the [docs directory](./docs/).
|
||||
|
||||
<a id="performance"></a>
|
||||
@@ -251,7 +133,7 @@ Thanks to extensive optimizations, Checkmate operates with an exceptionally smal
|
||||
|
||||
|
||||
|
||||
You can see the memory footprint of MongoDB on the same server (398Mb) for the same amount of servers:
|
||||
You can see the memory footprint of MongoDB and Redis on the same server (398Mb and 15Mb) for the same amount of servers:
|
||||
|
||||
|
||||
|
||||
@@ -269,16 +151,16 @@ 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: HTTP (with SSL certificate expiry), Ping, Port, DNS, Docker, gRPC, WebSocket, Game server
|
||||
- Several monitoring options: Uptime, Docker, Ping, SSL, Port, Game server
|
||||
- Page speed monitoring
|
||||
- Infrastructure monitoring (memory, disk usage, CPU performance, network etc) - requires [Capture](https://github.com/bluewave-labs/capture) agent
|
||||
- Selective disk monitoring with mountpoint selection
|
||||
- Incidents at a glance
|
||||
- Status pages with 5 beautiful themes
|
||||
- E-mail, Webhooks, Discord, Slack, PagerDuty, Matrix, Rocket.Chat, Microsoft Teams, Telegram, Pushover, ntfy, SignalGrid, Twilio (SMS) notifications
|
||||
- Status pages with 4 beautiful themes
|
||||
- E-mail, Webhooks, Discord, Slack, PagerDuty, Matrix, Rocket.Chat, Microsoft Teams, Telegram, Pushover, Twilio (SMS) notifications
|
||||
- Scheduled maintenance
|
||||
- JSON query monitoring
|
||||
- Multi-language support for Arabic, Catalan, Chinese (Simplified), Chinese (Traditional, Taiwan), Czech, English, Finnish, French, German, Italian, Japanese, Polish, Portuguese (Brazil), Russian, Spanish, Thai, Turkish, Ukrainian, and Vietnamese
|
||||
- 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
|
||||
@@ -331,7 +213,7 @@ Feel free to ask questions or share your ideas - we'd love to hear from you!
|
||||
|
||||
We are [Alex](http://github.com/ajhollid) (team lead), [Gorkem](http://github.com/gorkem-bwl/), [Aryaman](https://github.com/Br0wnHammer), [Malena](https://github.com/malenacaroline) and [Mert](https://github.com/mertssmnoglu) 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 almost 11K stars and attracted 150+ contributors from around the globe.
|
||||
We pride ourselves on building strong connections with contributors at every level. Despite being a young project, Checkmate has already earned almost 11K+ stars and attracted 150+ 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!
|
||||
|
||||
|
||||
Generated
+58
-2
@@ -1,14 +1,17 @@
|
||||
{
|
||||
"name": "client",
|
||||
"version": "3.12.0",
|
||||
"version": "3.11.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "client",
|
||||
"version": "3.12.0",
|
||||
"version": "3.11.0",
|
||||
"dependencies": {
|
||||
"@csstools/css-tokenizer": "^3.0.4",
|
||||
"@dnd-kit/core": "^6.3.1",
|
||||
"@dnd-kit/sortable": "^10.0.0",
|
||||
"@dnd-kit/utilities": "^3.2.2",
|
||||
"@emotion/react": "^11.13.3",
|
||||
"@emotion/styled": "^11.13.0",
|
||||
"@fontsource-variable/geist": "^5.3.0",
|
||||
@@ -362,6 +365,59 @@
|
||||
"node": ">=14"
|
||||
}
|
||||
},
|
||||
"node_modules/@dnd-kit/accessibility": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@dnd-kit/accessibility/-/accessibility-3.1.1.tgz",
|
||||
"integrity": "sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"tslib": "^2.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@dnd-kit/core": {
|
||||
"version": "6.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.3.1.tgz",
|
||||
"integrity": "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@dnd-kit/accessibility": "^3.1.1",
|
||||
"@dnd-kit/utilities": "^3.2.2",
|
||||
"tslib": "^2.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.0",
|
||||
"react-dom": ">=16.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@dnd-kit/sortable": {
|
||||
"version": "10.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@dnd-kit/sortable/-/sortable-10.0.0.tgz",
|
||||
"integrity": "sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@dnd-kit/utilities": "^3.2.2",
|
||||
"tslib": "^2.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@dnd-kit/core": "^6.3.0",
|
||||
"react": ">=16.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@dnd-kit/utilities": {
|
||||
"version": "3.2.2",
|
||||
"resolved": "https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-3.2.2.tgz",
|
||||
"integrity": "sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"tslib": "^2.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@emotion/babel-plugin": {
|
||||
"version": "11.13.5",
|
||||
"license": "MIT",
|
||||
|
||||
+4
-1
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "client",
|
||||
"private": true,
|
||||
"version": "3.12.0",
|
||||
"version": "3.11.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"lockfile": "docker run --rm -v \"$PWD\":/w -w /w $(grep -m1 -o 'node:[^ ]*' ../docker/Dockerfile) npm install --package-lock-only",
|
||||
@@ -20,6 +20,9 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@csstools/css-tokenizer": "^3.0.4",
|
||||
"@dnd-kit/core": "^6.3.1",
|
||||
"@dnd-kit/sortable": "^10.0.0",
|
||||
"@dnd-kit/utilities": "^3.2.2",
|
||||
"@emotion/react": "^11.13.3",
|
||||
"@emotion/styled": "^11.13.0",
|
||||
"@fontsource-variable/geist": "^5.3.0",
|
||||
|
||||
@@ -8,11 +8,8 @@ import { typographyLevels } from "@/Utils/Theme/Palette";
|
||||
import useMediaQuery from "@mui/material/useMediaQuery";
|
||||
import { LAYOUT } from "@/Utils/Theme/constants";
|
||||
import { formatDuration } from "@/Utils/TimeUtils";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
export const MonitorStatus = ({ monitor }: { monitor: Monitor }) => {
|
||||
const theme = useTheme();
|
||||
const { t, i18n } = useTranslation();
|
||||
const isSmall = useMediaQuery(theme.breakpoints.down("md"));
|
||||
|
||||
if (!monitor) {
|
||||
@@ -55,12 +52,7 @@ export const MonitorStatus = ({ monitor }: { monitor: Monitor }) => {
|
||||
<>
|
||||
<Dot />
|
||||
<Typography>
|
||||
{t("pages.common.monitors.statBoxes.checkingEvery", {
|
||||
interval: formatDuration(monitor.interval, {
|
||||
long: true,
|
||||
locale: i18n.resolvedLanguage,
|
||||
}),
|
||||
})}
|
||||
Checking every {formatDuration(monitor?.interval, true)}
|
||||
</Typography>
|
||||
</>
|
||||
)}
|
||||
|
||||
@@ -5,10 +5,9 @@ import {
|
||||
type FieldValues,
|
||||
} from "react-hook-form";
|
||||
import { Autocomplete } from "@/Components/inputs";
|
||||
import type { AutocompleteProps } from "@mui/material/Autocomplete";
|
||||
|
||||
export interface AutocompleteOption {
|
||||
id: string | number;
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
@@ -17,9 +16,6 @@ interface FormAutocompleteProps<T extends FieldValues, O extends AutocompleteOpt
|
||||
options: O[];
|
||||
fieldLabel?: string;
|
||||
placeholder?: string;
|
||||
filterOptions?: AutocompleteProps<O, false, false, false>["filterOptions"];
|
||||
getOptionDisabled?: AutocompleteProps<O, false, false, false>["getOptionDisabled"];
|
||||
disableClearable?: boolean;
|
||||
}
|
||||
|
||||
export const FormAutocompleteField = <
|
||||
@@ -30,9 +26,6 @@ export const FormAutocompleteField = <
|
||||
options,
|
||||
fieldLabel,
|
||||
placeholder,
|
||||
filterOptions,
|
||||
getOptionDisabled,
|
||||
disableClearable,
|
||||
}: FormAutocompleteProps<T, O>) => {
|
||||
const { control } = useFormContext<T>();
|
||||
return (
|
||||
@@ -46,14 +39,10 @@ export const FormAutocompleteField = <
|
||||
isOptionEqualToValue={(option, value) => option.id === value.id}
|
||||
value={options.find((o) => o.id === field.value) ?? null}
|
||||
onChange={(_: unknown, newValue: O | null) => {
|
||||
if (newValue === null && disableClearable) return;
|
||||
field.onChange(newValue?.id ?? "");
|
||||
}}
|
||||
fieldLabel={fieldLabel}
|
||||
placeholder={placeholder}
|
||||
filterOptions={filterOptions}
|
||||
getOptionDisabled={getOptionDisabled}
|
||||
disableClearable={disableClearable}
|
||||
error={!!fieldState.error}
|
||||
helperText={fieldState.error?.message ?? ""}
|
||||
/>
|
||||
|
||||
@@ -21,7 +21,7 @@ export const MonitorStatBoxes = ({
|
||||
domainExpiry,
|
||||
}: MonitorStatBoxesProps) => {
|
||||
const theme = useTheme();
|
||||
const { t, i18n } = useTranslation();
|
||||
const { t } = useTranslation();
|
||||
if (!monitorStats || !monitor) {
|
||||
return null;
|
||||
}
|
||||
@@ -29,16 +29,13 @@ export const MonitorStatBoxes = ({
|
||||
const timeOfLastFailure = monitorStats?.timeOfLastFailure || 0;
|
||||
const timeSinceLastFailure = timeOfLastFailure > 0 ? Date.now() - timeOfLastFailure : 0;
|
||||
|
||||
// Determine time since last check
|
||||
const timeOfLastCheck = monitorStats?.lastCheckTimestamp || 0;
|
||||
const timeSinceLastCheck = Date.now() - timeOfLastCheck || 0;
|
||||
|
||||
const streakTime = formatDuration(timeSinceLastFailure);
|
||||
const lastCheckTime = timeOfLastCheck
|
||||
? formatDuration(Date.now() - timeOfLastCheck, {
|
||||
long: true,
|
||||
relative: true,
|
||||
locale: i18n.resolvedLanguage,
|
||||
})
|
||||
: t("common.labels.na");
|
||||
|
||||
const lastCheckTime = formatDuration(timeSinceLastCheck);
|
||||
const isActive =
|
||||
monitor?.status === "up" ||
|
||||
monitor?.status === "paused" ||
|
||||
|
||||
@@ -1,58 +1,15 @@
|
||||
import { BaseChart, BaseBox } from "@/Components/design-elements";
|
||||
import { Area, AreaChart, CartesianGrid, ResponsiveContainer, Tooltip } from "recharts";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import { BaseChart } from "@/Components/design-elements";
|
||||
import { Area, AreaChart, CartesianGrid, ResponsiveContainer } from "recharts";
|
||||
|
||||
// Types
|
||||
import type { DockerContainerStats } from "@/Types/Monitor";
|
||||
import type { TooltipProps } from "recharts";
|
||||
import type { NameType, ValueType } from "recharts/types/component/DefaultTooltipContent";
|
||||
import type { Theme } from "@mui/material/styles";
|
||||
import type { RootState } from "@/Types/state";
|
||||
|
||||
// Hooks
|
||||
import { useTheme } from "@mui/material";
|
||||
import { Fragment, useId } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useSelector } from "react-redux";
|
||||
|
||||
// Utils
|
||||
import { createGradient } from "@/Components/monitors/charts/ChartUtils";
|
||||
import { tooltipDateFormatLookup, formatDateWithTz } from "@/Utils/TimeUtils";
|
||||
import type { DateRange } from "@/Types/Query";
|
||||
|
||||
type DockerHistogramToolTipProps = TooltipProps<ValueType, NameType> & {
|
||||
dataKey: string;
|
||||
range: string;
|
||||
theme: Theme;
|
||||
uiTimezone: string;
|
||||
valueFormatter: (value: number) => string;
|
||||
labelKey: string;
|
||||
};
|
||||
|
||||
const DockerHistogramToolTip = ({
|
||||
dataKey,
|
||||
active,
|
||||
payload,
|
||||
range,
|
||||
theme,
|
||||
uiTimezone,
|
||||
valueFormatter,
|
||||
labelKey,
|
||||
}: DockerHistogramToolTipProps) => {
|
||||
const { t } = useTranslation();
|
||||
if (!payload) return null;
|
||||
if (!active) return null;
|
||||
const format = tooltipDateFormatLookup(range);
|
||||
const ts = payload[0].payload?._id ?? null;
|
||||
const dataPoint = payload[0].payload?.[dataKey] ?? null;
|
||||
|
||||
return (
|
||||
<BaseBox sx={{ py: theme.spacing(2), px: theme.spacing(4) }}>
|
||||
<Typography>{formatDateWithTz(ts, format, uiTimezone)}</Typography>
|
||||
<Typography>{t(labelKey, { value: valueFormatter(dataPoint) })}</Typography>
|
||||
</BaseBox>
|
||||
);
|
||||
};
|
||||
interface HistogramDockerContainerProps {
|
||||
title: string;
|
||||
rightTitle: string;
|
||||
@@ -60,9 +17,6 @@ interface HistogramDockerContainerProps {
|
||||
dataKey: string;
|
||||
strokeColor: string;
|
||||
gradientStartColor: string;
|
||||
range: DateRange;
|
||||
formatter: (value: number) => string;
|
||||
labelKey: string;
|
||||
}
|
||||
|
||||
export const HistogramDockerContainer = ({
|
||||
@@ -72,14 +26,11 @@ export const HistogramDockerContainer = ({
|
||||
dataKey,
|
||||
strokeColor,
|
||||
gradientStartColor,
|
||||
range,
|
||||
formatter,
|
||||
labelKey,
|
||||
}: HistogramDockerContainerProps) => {
|
||||
const uniqueId = useId();
|
||||
const theme = useTheme();
|
||||
const gradientId = `gradient-${uniqueId}`;
|
||||
const uiTimezone = useSelector((state: RootState) => state.ui.timezone);
|
||||
|
||||
return (
|
||||
<BaseChart
|
||||
icon="null"
|
||||
@@ -105,19 +56,6 @@ export const HistogramDockerContainer = ({
|
||||
endColor: "transparent",
|
||||
direction: "vertical",
|
||||
})}
|
||||
<Tooltip
|
||||
content={(props) => (
|
||||
<DockerHistogramToolTip
|
||||
{...props}
|
||||
range={range}
|
||||
theme={theme}
|
||||
uiTimezone={uiTimezone}
|
||||
dataKey={dataKey}
|
||||
valueFormatter={formatter}
|
||||
labelKey={labelKey}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Area
|
||||
dataKey={dataKey}
|
||||
type="monotone"
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { Icon } from "@/Components/design-elements";
|
||||
|
||||
import {
|
||||
LayoutDashboard,
|
||||
Globe,
|
||||
Gauge,
|
||||
Link,
|
||||
@@ -20,18 +21,17 @@ import {
|
||||
Tag,
|
||||
Waypoints,
|
||||
Container,
|
||||
// LayoutDashboard,
|
||||
} from "lucide-react";
|
||||
export const getMenu = (t: Function) => {
|
||||
return [
|
||||
{
|
||||
group: t("components.sidebar.menu.groups.monitoring"),
|
||||
items: [
|
||||
// {
|
||||
// name: t("components.sidebar.menu.dashboard"),
|
||||
// path: "dashboard",
|
||||
// icon: <Icon icon={LayoutDashboard} />,
|
||||
// },
|
||||
{
|
||||
name: t("components.sidebar.menu.dashboard"),
|
||||
path: "dashboard",
|
||||
icon: <Icon icon={LayoutDashboard} />,
|
||||
},
|
||||
{
|
||||
name: t("components.sidebar.menu.uptime"),
|
||||
path: "uptime",
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
import { dashboardCardKeys, type DashboardCardKey } from "@/Types/Dashboard";
|
||||
import { createSlice, type PayloadAction } from "@reduxjs/toolkit";
|
||||
import type { CardId } from "@/Pages/Dashboard/cards";
|
||||
|
||||
type ThemeMode = "light" | "dark";
|
||||
type ChartType = "histogram" | "line";
|
||||
|
||||
type TableName =
|
||||
| "monitors"
|
||||
| "team"
|
||||
@@ -37,7 +36,7 @@ interface UIState {
|
||||
language: string;
|
||||
starPromptOpen: boolean;
|
||||
chartType: ChartType;
|
||||
dashboardVisibleCards: DashboardCardKey[];
|
||||
dashboardCards: CardId[] | null;
|
||||
}
|
||||
|
||||
const initialMode: ThemeMode = window?.matchMedia?.("(prefers-color-scheme: dark)")
|
||||
@@ -77,7 +76,7 @@ const initialState: UIState = {
|
||||
language: "en",
|
||||
starPromptOpen: true,
|
||||
chartType: "histogram",
|
||||
dashboardVisibleCards: [...dashboardCardKeys],
|
||||
dashboardCards: null,
|
||||
};
|
||||
|
||||
const uiSlice = createSlice({
|
||||
@@ -121,8 +120,8 @@ const uiSlice = createSlice({
|
||||
setChartType: (state, action: PayloadAction<ChartType>) => {
|
||||
state.chartType = action.payload;
|
||||
},
|
||||
setDashboardVisibleCards: (state, action: PayloadAction<DashboardCardKey[]>) => {
|
||||
state.dashboardVisibleCards = action.payload;
|
||||
setDashboardCards: (state, action: PayloadAction<CardId[] | null>) => {
|
||||
state.dashboardCards = action.payload;
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -140,5 +139,5 @@ export const {
|
||||
setLanguage,
|
||||
setStarPromptOpen,
|
||||
setChartType,
|
||||
setDashboardVisibleCards,
|
||||
setDashboardCards,
|
||||
} = uiSlice.actions;
|
||||
@@ -77,13 +77,6 @@ export const getMonitorDefaults = (
|
||||
...base,
|
||||
type: "docker",
|
||||
url: data?.url || "",
|
||||
secret: data?.secret || "",
|
||||
ignoreTlsErrors: data?.ignoreTlsErrors || false,
|
||||
dockerTlsCa: data?.dockerTlsCa || "",
|
||||
dockerTlsCert: data?.dockerTlsCert || "",
|
||||
// The key is write-only; the API never returns it.
|
||||
dockerTlsKey: "",
|
||||
dockerTlsKeySet: data?.dockerTlsKeySet ?? false,
|
||||
dockerLogsEnabled: data?.dockerLogsEnabled ?? false,
|
||||
};
|
||||
break;
|
||||
|
||||
@@ -38,7 +38,6 @@ import {
|
||||
PageSpeedStrategies,
|
||||
DnsRecordTypes,
|
||||
MonitorIntervalOptions,
|
||||
MIN_MONITOR_INTERVAL_MS,
|
||||
DefaultMonitorMatchMethod,
|
||||
MonitorMatchMethods,
|
||||
GeoCheckIntervalOptions,
|
||||
@@ -51,8 +50,6 @@ import type { AppSettingsResponse } from "@/Types/Settings";
|
||||
import {
|
||||
stepFieldsFor,
|
||||
monitorStepCount,
|
||||
isCaptureDockerUrl,
|
||||
isDockerTlsUrl,
|
||||
type MonitorFormData,
|
||||
} from "@/Validation/monitor";
|
||||
import { FormNumberField } from "@/Components/inputs/forms/FormNumberField";
|
||||
@@ -60,62 +57,15 @@ import { FormTextField } from "@/Components/inputs/forms/FormTextField";
|
||||
import { FormRadioGroup } from "@/Components/inputs/forms/FormRadioGroupField";
|
||||
import { FormMultiSelectField } from "@/Components/inputs/forms/FormMultiSelectField";
|
||||
import { FormSelectField } from "@/Components/inputs/forms/FormSelectField";
|
||||
import {
|
||||
FormAutocompleteField,
|
||||
type AutocompleteOption,
|
||||
} from "@/Components/inputs/forms/FormAutoCompleteField";
|
||||
import { FormSliderField } from "@/Components/inputs/forms/FormSliderField";
|
||||
import { FormSwitchField } from "@/Components/inputs/forms/FormSwitchField";
|
||||
import type { ProxyResponse } from "@/Types/Proxy";
|
||||
import { formatDuration } from "@/Utils/TimeUtils";
|
||||
|
||||
const httpMethodOptions = HttpMethods.map((method) => ({
|
||||
value: method,
|
||||
label: method,
|
||||
}));
|
||||
|
||||
const PEM_FIELD_ROWS = 6;
|
||||
|
||||
// Hides the pasted key while the field is not focused. Ignored by browsers
|
||||
// without -webkit-text-security, which then show the key as plain text.
|
||||
const maskedInputSx = {
|
||||
"&:not(.Mui-focused) textarea": { WebkitTextSecurity: "disc" },
|
||||
};
|
||||
|
||||
interface IntervalOption extends AutocompleteOption {
|
||||
id: number;
|
||||
}
|
||||
|
||||
const INTERVAL_UNIT_MULTIPLIERS = [1000, 60000, 3600000, 86400000] as const;
|
||||
|
||||
const toIntervalOption = (
|
||||
intervalMs: number,
|
||||
locale: string | undefined
|
||||
): IntervalOption => ({
|
||||
id: intervalMs,
|
||||
name: formatDuration(intervalMs, { long: true, locale }),
|
||||
});
|
||||
|
||||
const filterIntervalOptions = (
|
||||
options: IntervalOption[],
|
||||
inputValue: string,
|
||||
locale: string | undefined
|
||||
): IntervalOption[] => {
|
||||
const input = inputValue.trim();
|
||||
if (input === "" || options.some((option) => option.name === input)) {
|
||||
return options;
|
||||
}
|
||||
|
||||
const amount = Number(input);
|
||||
if (!Number.isFinite(amount) || amount <= 0) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return INTERVAL_UNIT_MULTIPLIERS.map((multiplier) => amount * multiplier)
|
||||
.filter(Number.isSafeInteger)
|
||||
.map((ms) => toIntervalOption(ms, locale));
|
||||
};
|
||||
|
||||
interface GeneralSettingsConfig {
|
||||
urlLabel: string;
|
||||
urlPlaceholder: string;
|
||||
@@ -293,7 +243,7 @@ const getGeneralSettingsConfig = (
|
||||
|
||||
const CreateMonitorPage = () => {
|
||||
const theme = useTheme();
|
||||
const { t, i18n } = useTranslation();
|
||||
const { t } = useTranslation();
|
||||
const { monitorId } = useParams();
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
@@ -350,13 +300,10 @@ const CreateMonitorPage = () => {
|
||||
const showStep = (step: number) => isEditMode || currentStep === step;
|
||||
|
||||
const watchedType = watch("type") as MonitorType;
|
||||
const watchedUrl = watch("url") as string;
|
||||
const isCaptureDocker = watchedType === "docker" && isCaptureDockerUrl(watchedUrl);
|
||||
const watchedMethod = watch("method") as HttpMethod | undefined;
|
||||
const watchedProxyMode = watch("proxyMode") as ProxyMode | undefined;
|
||||
const watchedUseAdvancedMatching = watch("useAdvancedMatching") as boolean;
|
||||
const watchGeoCheckEnabled = watch("geoCheckEnabled") as boolean;
|
||||
const watchedInterval = watch("interval");
|
||||
|
||||
// Steps without an advanced section drop it, so the last step is the form's.
|
||||
const totalSteps = monitorStepCount(watchedType);
|
||||
@@ -382,20 +329,11 @@ const CreateMonitorPage = () => {
|
||||
}
|
||||
}, [watchedType, showTypeSelector, reset, clearErrors]);
|
||||
|
||||
// The logs switch is hidden for Capture hosts, so a value left over from a socket host must not be submitted.
|
||||
useEffect(() => {
|
||||
if (isCaptureDocker) {
|
||||
setValue("dockerLogsEnabled", false);
|
||||
}
|
||||
}, [isCaptureDocker, setValue]);
|
||||
|
||||
const generalSettingsConfig = useMemo(
|
||||
() => getGeneralSettingsConfig(watchedType, t),
|
||||
[watchedType, t]
|
||||
);
|
||||
|
||||
const pemInputSx = { fontFamily: theme.typography.fontFamilyMonospace };
|
||||
|
||||
const { post, loading: isCreating } = usePost<MonitorFormData, Monitor>();
|
||||
const { patch, loading: isUpdating } = usePatch<MonitorFormData, Monitor>();
|
||||
const isSubmitting = isCreating || isUpdating;
|
||||
@@ -521,18 +459,16 @@ const CreateMonitorPage = () => {
|
||||
[t]
|
||||
);
|
||||
|
||||
const intervalOptions = useMemo(() => {
|
||||
const options = MonitorIntervalOptions.map(({ value }) =>
|
||||
toIntervalOption(value, i18n.resolvedLanguage)
|
||||
);
|
||||
if (
|
||||
typeof watchedInterval === "number" &&
|
||||
!options.some((option) => option.id === watchedInterval)
|
||||
) {
|
||||
options.push(toIntervalOption(watchedInterval, i18n.resolvedLanguage));
|
||||
}
|
||||
return options;
|
||||
}, [watchedInterval, i18n.resolvedLanguage]);
|
||||
const intervalOptions = useMemo(
|
||||
() =>
|
||||
MonitorIntervalOptions.map((option) => ({
|
||||
value: option.value,
|
||||
label: t(
|
||||
`pages.createMonitor.form.frequency.option.frequency.value.${option.labelKey}`
|
||||
),
|
||||
})),
|
||||
[t]
|
||||
);
|
||||
|
||||
const matchMethodOptions = useMemo(
|
||||
() =>
|
||||
@@ -718,8 +654,8 @@ const CreateMonitorPage = () => {
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Capture API secret - used by hardware and Capture-backed Docker monitors */}
|
||||
{(generalSettingsConfig.showSecret || isCaptureDocker) && (
|
||||
{/* Secret field - only for hardware type */}
|
||||
{generalSettingsConfig.showSecret && (
|
||||
<FormTextField
|
||||
name="secret"
|
||||
fieldLabel={t("pages.createMonitor.form.general.option.secret.label")}
|
||||
@@ -728,12 +664,6 @@ const CreateMonitorPage = () => {
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
{isCaptureDocker && (
|
||||
<FormSwitchField
|
||||
name="ignoreTlsErrors"
|
||||
label={t("pages.createMonitor.form.ignoreTls.option.tls.label")}
|
||||
/>
|
||||
)}
|
||||
{generalSettingsConfig.showDnsServer && (
|
||||
<FormTextField
|
||||
name="dnsServer"
|
||||
@@ -759,80 +689,17 @@ const CreateMonitorPage = () => {
|
||||
/>
|
||||
)}
|
||||
|
||||
{showStep(0) && watchedType === "docker" && isDockerTlsUrl(watchedUrl) && (
|
||||
<ConfigBox
|
||||
title={t("pages.createMonitor.form.dockerTls.title")}
|
||||
subtitle={t("pages.createMonitor.form.dockerTls.description")}
|
||||
rightContent={
|
||||
<Stack spacing={theme.spacing(LAYOUT.MD)}>
|
||||
<FormTextField
|
||||
name="dockerTlsCa"
|
||||
multiline
|
||||
rows={PEM_FIELD_ROWS}
|
||||
fieldLabel={t("pages.createMonitor.form.dockerTls.option.ca.label")}
|
||||
placeholder={t(
|
||||
"pages.createMonitor.form.dockerTls.option.ca.placeholder"
|
||||
)}
|
||||
slotProps={{ input: { sx: pemInputSx } }}
|
||||
/>
|
||||
<FormTextField
|
||||
name="dockerTlsCert"
|
||||
multiline
|
||||
rows={PEM_FIELD_ROWS}
|
||||
fieldLabel={t("pages.createMonitor.form.dockerTls.option.cert.label")}
|
||||
placeholder={t(
|
||||
"pages.createMonitor.form.dockerTls.option.cert.placeholder"
|
||||
)}
|
||||
slotProps={{ input: { sx: pemInputSx } }}
|
||||
/>
|
||||
<FormTextField
|
||||
name="dockerTlsKey"
|
||||
multiline
|
||||
rows={PEM_FIELD_ROWS}
|
||||
fieldLabel={t("pages.createMonitor.form.dockerTls.option.key.label")}
|
||||
placeholder={t(
|
||||
"pages.createMonitor.form.dockerTls.option.key.placeholder"
|
||||
)}
|
||||
helperText={
|
||||
existingMonitor?.dockerTlsKeySet
|
||||
? t("pages.createMonitor.form.dockerTls.option.key.stored")
|
||||
: undefined
|
||||
}
|
||||
autoComplete="off"
|
||||
slotProps={{ input: { sx: { ...pemInputSx, ...maskedInputSx } } }}
|
||||
/>
|
||||
<FormSwitchField
|
||||
name="ignoreTlsErrors"
|
||||
label={t("pages.createMonitor.form.dockerTls.option.ignoreTls.label")}
|
||||
/>
|
||||
<Typography
|
||||
component="span"
|
||||
color={theme.palette.text.secondary}
|
||||
sx={{ opacity: 0.8 }}
|
||||
>
|
||||
{t("pages.createMonitor.form.dockerTls.option.ignoreTls.description")}
|
||||
</Typography>
|
||||
</Stack>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
||||
{showStep(1) && (
|
||||
<ConfigBox
|
||||
title={t("pages.createMonitor.form.frequency.title")}
|
||||
subtitle={t("pages.createMonitor.form.frequency.description")}
|
||||
rightContent={
|
||||
<FormAutocompleteField
|
||||
<FormSelectField
|
||||
name="interval"
|
||||
fieldLabel={t(
|
||||
"pages.createMonitor.form.frequency.option.frequency.label"
|
||||
)}
|
||||
options={intervalOptions}
|
||||
filterOptions={(options, { inputValue }) =>
|
||||
filterIntervalOptions(options, inputValue, i18n.resolvedLanguage)
|
||||
}
|
||||
getOptionDisabled={(option) => option.id < MIN_MONITOR_INTERVAL_MS}
|
||||
disableClearable
|
||||
/>
|
||||
}
|
||||
/>
|
||||
@@ -961,7 +828,7 @@ const CreateMonitorPage = () => {
|
||||
/>
|
||||
)}
|
||||
|
||||
{showStep(1) && watchedType === "docker" && !isCaptureDocker && (
|
||||
{showStep(1) && watchedType === "docker" && (
|
||||
<ConfigBox
|
||||
title={t("pages.createMonitor.form.dockerLogs.title")}
|
||||
subtitle={t("pages.createMonitor.form.dockerLogs.description")}
|
||||
|
||||
@@ -0,0 +1,123 @@
|
||||
import Box from "@mui/material/Box";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import { GripVertical } from "lucide-react";
|
||||
import {
|
||||
DndContext,
|
||||
closestCenter,
|
||||
PointerSensor,
|
||||
useSensor,
|
||||
useSensors,
|
||||
} from "@dnd-kit/core";
|
||||
import type { DragEndEvent } from "@dnd-kit/core";
|
||||
import { SortableContext, useSortable, rectSortingStrategy } from "@dnd-kit/sortable";
|
||||
|
||||
import { Icon } from "@/Components/design-elements";
|
||||
import { LAYOUT } from "@/Utils/Theme/constants";
|
||||
import { GRID_COLUMNS, type CardDefinition, type CardId } from "../cards";
|
||||
import { CardSlotContext } from "./CardSlotContext";
|
||||
|
||||
const SortableCard = ({ card }: { card: CardDefinition }) => {
|
||||
const theme = useTheme();
|
||||
const { attributes, listeners, setNodeRef, transform, transition, isDragging } =
|
||||
useSortable({ id: card.id });
|
||||
const Component = card.component;
|
||||
|
||||
return (
|
||||
<Box
|
||||
ref={setNodeRef}
|
||||
minWidth={0}
|
||||
sx={{
|
||||
width: {
|
||||
xs: "100%",
|
||||
md:
|
||||
card.width >= GRID_COLUMNS
|
||||
? "100%"
|
||||
: `calc(${(card.width / GRID_COLUMNS) * 100}% - ${theme.spacing(LAYOUT.MD / 2)})`,
|
||||
},
|
||||
transform: transform
|
||||
? `translate3d(${Math.round(transform.x)}px, ${Math.round(transform.y)}px, 0)`
|
||||
: undefined,
|
||||
transition,
|
||||
opacity: isDragging ? 0.4 : 1,
|
||||
zIndex: isDragging ? 1 : "auto",
|
||||
}}
|
||||
>
|
||||
<CardSlotContext.Provider
|
||||
value={
|
||||
<Box
|
||||
{...attributes}
|
||||
{...listeners}
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
sx={{
|
||||
cursor: "grab",
|
||||
"&:active": { cursor: "grabbing" },
|
||||
touchAction: "none",
|
||||
}}
|
||||
>
|
||||
<Icon
|
||||
icon={GripVertical}
|
||||
size={16}
|
||||
color={theme.palette.text.secondary}
|
||||
/>
|
||||
</Box>
|
||||
}
|
||||
>
|
||||
<Component />
|
||||
</CardSlotContext.Provider>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export const CardGrid = ({
|
||||
cards,
|
||||
onReorder,
|
||||
}: {
|
||||
cards: CardDefinition[];
|
||||
onReorder: (sourceIndex: number, destIndex: number) => void;
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
|
||||
const sensors = useSensors(
|
||||
useSensor(PointerSensor, {
|
||||
activationConstraint: { distance: 8 },
|
||||
})
|
||||
);
|
||||
|
||||
const handleDragEnd = (event: DragEndEvent) => {
|
||||
const { active, over } = event;
|
||||
if (!over || active.id === over.id) return;
|
||||
const sourceIndex = cards.findIndex((c) => c.id === active.id);
|
||||
const destIndex = cards.findIndex((c) => c.id === over.id);
|
||||
if (sourceIndex !== -1 && destIndex !== -1) onReorder(sourceIndex, destIndex);
|
||||
};
|
||||
|
||||
const cardIds = cards.map((c) => c.id);
|
||||
|
||||
return (
|
||||
<DndContext
|
||||
sensors={sensors}
|
||||
collisionDetection={closestCenter}
|
||||
onDragEnd={handleDragEnd}
|
||||
>
|
||||
<SortableContext
|
||||
items={cardIds}
|
||||
strategy={rectSortingStrategy}
|
||||
>
|
||||
<Box
|
||||
display="flex"
|
||||
flexWrap="wrap"
|
||||
gap={theme.spacing(LAYOUT.MD)}
|
||||
alignItems="stretch"
|
||||
>
|
||||
{cards.map((card) => (
|
||||
<SortableCard
|
||||
key={card.id}
|
||||
card={card}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
</SortableContext>
|
||||
</DndContext>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,137 @@
|
||||
import Box from "@mui/material/Box";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import FormControlLabel from "@mui/material/FormControlLabel";
|
||||
import Stack from "@mui/material/Stack";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useMemo } from "react";
|
||||
|
||||
import { Dialog, Checkbox, Button } from "@/Components/inputs";
|
||||
import { LAYOUT } from "@/Utils/Theme/constants";
|
||||
import { CardGroups, type CardDefinition, type CardGroup, type CardId } from "../cards";
|
||||
|
||||
interface CardPickerProps {
|
||||
open: boolean;
|
||||
available: CardDefinition[];
|
||||
selected: CardId[];
|
||||
allSelected: boolean;
|
||||
onAdd: (id: CardId) => void;
|
||||
onRemove: (id: CardId) => void;
|
||||
onSelectAll: () => void;
|
||||
onDeselectAll: () => void;
|
||||
onReset: () => void;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Cards are grouped by sidebar section, not by load cost: you look for a card
|
||||
* where you look for the feature it belongs to. Admin-only cards never reach
|
||||
* `available` for a non-admin, so nobody is offered a card they cannot load.
|
||||
*/
|
||||
export const CardPicker = ({
|
||||
open,
|
||||
available,
|
||||
selected,
|
||||
allSelected,
|
||||
onAdd,
|
||||
onRemove,
|
||||
onSelectAll,
|
||||
onDeselectAll,
|
||||
onReset,
|
||||
onClose,
|
||||
}: CardPickerProps) => {
|
||||
const theme = useTheme();
|
||||
const { t } = useTranslation();
|
||||
|
||||
const grouped = useMemo(() => {
|
||||
return CardGroups.map((group: CardGroup) => ({
|
||||
group,
|
||||
cards: available.filter((card) => card.group === group),
|
||||
})).filter((entry) => entry.cards.length > 0);
|
||||
}, [available]);
|
||||
|
||||
const chosen = new Set(selected);
|
||||
const someSelected = selected.length > 0 && !allSelected;
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open={open}
|
||||
maxWidth="sm"
|
||||
fullWidth
|
||||
title={t("pages.dashboard.picker.title")}
|
||||
// Reset sits alone on the left, away from Done — a destructive action
|
||||
// should not be adjacent to the one people reach for by reflex.
|
||||
onCancel={onReset}
|
||||
cancelText={t("pages.dashboard.picker.reset")}
|
||||
onConfirm={onClose}
|
||||
confirmText={t("pages.dashboard.picker.done")}
|
||||
additionalButtons={
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="secondary"
|
||||
onClick={allSelected ? onDeselectAll : onSelectAll}
|
||||
startIcon={
|
||||
<Checkbox
|
||||
checked={allSelected}
|
||||
indeterminate={someSelected}
|
||||
size="small"
|
||||
sx={{ p: 0 }}
|
||||
onChange={() => {}}
|
||||
/>
|
||||
}
|
||||
>
|
||||
{t("pages.dashboard.picker.selectAll")}
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
{/*
|
||||
* Two columns: seventeen cards in one list makes the dialog scroll,
|
||||
* which hides most of the catalogue. Groups flow down the columns and
|
||||
* are kept whole so a group is never split across the gap.
|
||||
*/}
|
||||
<Box
|
||||
pt={theme.spacing(LAYOUT.SM)}
|
||||
sx={{
|
||||
columnCount: { xs: 1, sm: 2 },
|
||||
columnGap: theme.spacing(LAYOUT.XL),
|
||||
}}
|
||||
>
|
||||
{grouped.map(({ group, cards }) => (
|
||||
<Stack
|
||||
key={group}
|
||||
gap={theme.spacing(LAYOUT.XXS)}
|
||||
pb={theme.spacing(LAYOUT.MD)}
|
||||
sx={{ breakInside: "avoid" }}
|
||||
>
|
||||
<Typography
|
||||
variant="eyebrow"
|
||||
color={theme.palette.text.disabled}
|
||||
>
|
||||
{t(`pages.dashboard.picker.groups.${group}`, {
|
||||
defaultValue: group,
|
||||
})}
|
||||
</Typography>
|
||||
{cards.map((card) => (
|
||||
<FormControlLabel
|
||||
key={card.id}
|
||||
label={
|
||||
<Typography color={theme.palette.text.primary}>
|
||||
{t(`pages.dashboard.cards.${card.key}.title`)}
|
||||
</Typography>
|
||||
}
|
||||
control={
|
||||
<Checkbox
|
||||
checked={chosen.has(card.id)}
|
||||
onChange={() =>
|
||||
chosen.has(card.id) ? onRemove(card.id) : onAdd(card.id)
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</Stack>
|
||||
))}
|
||||
</Box>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,275 @@
|
||||
import Stack from "@mui/material/Stack";
|
||||
import Box from "@mui/material/Box";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import { Link as RouterLink } from "react-router-dom";
|
||||
|
||||
import { Tooltip } from "@/Components/design-elements";
|
||||
import { LAYOUT } from "@/Utils/Theme/constants";
|
||||
import { typographyLevels } from "@/Utils/Theme/Palette";
|
||||
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
/**
|
||||
* One thickness for every bar on the dashboard. Plain and segmented bars sit
|
||||
* side by side across cards, so differing weights read as an inconsistency
|
||||
* rather than as emphasis.
|
||||
*/
|
||||
const BAR_HEIGHT = 8;
|
||||
|
||||
export interface BarSegment {
|
||||
key: string;
|
||||
value: number;
|
||||
color: string;
|
||||
/** Tooltip text, since the segments themselves carry no labels. */
|
||||
label: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* A proportional bar. `value` and `max` share whatever unit the caller uses;
|
||||
* percentages come in as 0-100, not as the API's 0-1 fractions.
|
||||
*/
|
||||
export const CardBar = ({
|
||||
value,
|
||||
max = 100,
|
||||
color,
|
||||
}: {
|
||||
value: number;
|
||||
max?: number;
|
||||
color: string;
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
const ratio = max > 0 ? Math.min(Math.max(value / max, 0), 1) : 0;
|
||||
|
||||
return (
|
||||
<Box
|
||||
width="100%"
|
||||
height={BAR_HEIGHT}
|
||||
borderRadius={theme.shape.borderRadius}
|
||||
bgcolor={theme.palette.action.hover}
|
||||
sx={{ overflow: "hidden" }}
|
||||
>
|
||||
<Box
|
||||
width={`${ratio * 100}%`}
|
||||
height="100%"
|
||||
bgcolor={color}
|
||||
sx={{ transition: "width 0.3s ease" }}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* One bar divided into proportional segments — the shape of a whole split into
|
||||
* parts, where the relative sizes are the point rather than any single value.
|
||||
*
|
||||
* Zero-value segments are dropped so they cannot appear as hairlines, and each
|
||||
* segment carries a tooltip because the bar itself has no room for labels.
|
||||
*/
|
||||
export const CardSegmentedBar = ({ segments }: { segments: BarSegment[] }) => {
|
||||
const theme = useTheme();
|
||||
const visible = segments.filter((segment) => segment.value > 0);
|
||||
const total = visible.reduce((sum, segment) => sum + segment.value, 0);
|
||||
|
||||
return (
|
||||
<Stack
|
||||
direction="row"
|
||||
width="100%"
|
||||
height={BAR_HEIGHT}
|
||||
borderRadius={theme.shape.borderRadius}
|
||||
bgcolor={theme.palette.action.hover}
|
||||
gap="1px"
|
||||
sx={{ overflow: "hidden" }}
|
||||
>
|
||||
{total > 0 &&
|
||||
visible.map((segment) => (
|
||||
<Tooltip
|
||||
key={segment.key}
|
||||
title={segment.label}
|
||||
>
|
||||
<Box
|
||||
width={`${(segment.value / total) * 100}%`}
|
||||
height="100%"
|
||||
bgcolor={segment.color}
|
||||
sx={{ transition: "width 0.3s ease" }}
|
||||
/>
|
||||
</Tooltip>
|
||||
))}
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
/** A clickable list row. Rows link to the entity they describe. */
|
||||
export const CardRow = ({ to, children }: { to?: string; children: ReactNode }) => {
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<Stack
|
||||
{...(to ? { component: RouterLink, to } : {})}
|
||||
direction="row"
|
||||
alignItems="center"
|
||||
gap={theme.spacing(LAYOUT.SM)}
|
||||
px={theme.spacing(LAYOUT.XS)}
|
||||
py={theme.spacing(LAYOUT.XS)}
|
||||
mx={`-${theme.spacing(LAYOUT.XS)}`}
|
||||
borderRadius={theme.shape.borderRadius}
|
||||
color="inherit"
|
||||
sx={{
|
||||
textDecoration: "none",
|
||||
...(to && {
|
||||
"&:hover": { backgroundColor: theme.palette.action.hover },
|
||||
}),
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
/** Name plus optional secondary line, truncating rather than wrapping. */
|
||||
export const CardRowLabel = ({
|
||||
primary,
|
||||
secondary,
|
||||
}: {
|
||||
primary: string;
|
||||
secondary?: string | null;
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<Stack
|
||||
minWidth={0}
|
||||
flex={1}
|
||||
>
|
||||
<Typography
|
||||
color={theme.palette.text.primary}
|
||||
noWrap
|
||||
>
|
||||
{primary}
|
||||
</Typography>
|
||||
{secondary && (
|
||||
<Typography
|
||||
color={theme.palette.text.secondary}
|
||||
noWrap
|
||||
>
|
||||
{secondary}
|
||||
</Typography>
|
||||
)}
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
/** A single large figure with a caption — the shape of the stat cards. */
|
||||
export const CardFigure = ({
|
||||
value,
|
||||
caption,
|
||||
color,
|
||||
}: {
|
||||
value: string;
|
||||
caption?: string;
|
||||
color?: string;
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<Stack gap={theme.spacing(LAYOUT.XXS)}>
|
||||
<Typography
|
||||
fontSize={typographyLevels.xxl}
|
||||
fontWeight={300}
|
||||
color={color ?? theme.palette.text.primary}
|
||||
lineHeight={1.1}
|
||||
>
|
||||
{value}
|
||||
</Typography>
|
||||
{caption && <Typography color={theme.palette.text.secondary}>{caption}</Typography>}
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* A label with its value on the right — the shape almost every stat card
|
||||
* repeats. `color` highlights the value alone, leaving the label quiet.
|
||||
*/
|
||||
export const CardStatLine = ({
|
||||
label,
|
||||
value,
|
||||
color,
|
||||
}: {
|
||||
label: string;
|
||||
value: string;
|
||||
color?: string;
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<Stack
|
||||
direction="row"
|
||||
alignItems="baseline"
|
||||
justifyContent="space-between"
|
||||
gap={theme.spacing(LAYOUT.SM)}
|
||||
>
|
||||
<Typography color={theme.palette.text.secondary}>{label}</Typography>
|
||||
<Typography
|
||||
color={color ?? theme.palette.text.primary}
|
||||
noWrap
|
||||
>
|
||||
{value}
|
||||
</Typography>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* A CardStatLine with a proportional bar beneath it — the ranking and
|
||||
* breakdown row. `max` defaults to a percentage scale; pass the largest value
|
||||
* in the set to make bars relative to each other instead.
|
||||
*
|
||||
* `label` may be a node so callers can put a "N down" flag beside the name.
|
||||
*/
|
||||
export const CardMeterRow = ({
|
||||
label,
|
||||
value,
|
||||
max,
|
||||
color,
|
||||
trailing,
|
||||
}: {
|
||||
label: ReactNode;
|
||||
value: number;
|
||||
max?: number;
|
||||
color: string;
|
||||
trailing?: ReactNode;
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<Stack
|
||||
flex={1}
|
||||
minWidth={0}
|
||||
gap={theme.spacing(LAYOUT.XXS)}
|
||||
>
|
||||
<Stack
|
||||
direction="row"
|
||||
alignItems="center"
|
||||
justifyContent="space-between"
|
||||
gap={theme.spacing(LAYOUT.SM)}
|
||||
>
|
||||
{typeof label === "string" ? (
|
||||
<Typography
|
||||
color={theme.palette.text.primary}
|
||||
noWrap
|
||||
>
|
||||
{label}
|
||||
</Typography>
|
||||
) : (
|
||||
label
|
||||
)}
|
||||
{trailing}
|
||||
</Stack>
|
||||
<CardBar
|
||||
value={value}
|
||||
max={max}
|
||||
color={color}
|
||||
/>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,7 @@
|
||||
import { createContext, useContext } from "react";
|
||||
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
export const CardSlotContext = createContext<ReactNode>(null);
|
||||
|
||||
export const useCardSlot = (): ReactNode => useContext(CardSlotContext);
|
||||
@@ -0,0 +1,219 @@
|
||||
import Stack from "@mui/material/Stack";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useMemo } from "react";
|
||||
|
||||
import { useGet } from "@/Hooks/UseApi";
|
||||
import { LAYOUT } from "@/Utils/Theme/constants";
|
||||
import { formatTimestamp } from "@/Utils/TimeUtils";
|
||||
import { DashboardCard, CardMessage } from "../DashboardCard";
|
||||
import { CardFigure, CardRow, CardRowLabel, CardStatLine } from "../CardPrimitives";
|
||||
|
||||
import { REFRESH_INTERVAL_MS, SLOW_REFRESH_INTERVAL_MS } from "../../cards";
|
||||
|
||||
import type { QueueMetrics } from "@/Types/Queue";
|
||||
import type { Log } from "@/Types/Log";
|
||||
import type { User } from "@/Types/User";
|
||||
|
||||
const MAX_ERROR_ROWS = 5;
|
||||
|
||||
/** Reads as a single reassurance line while nothing is failing. */
|
||||
export const ChecksOnScheduleCard = () => {
|
||||
const theme = useTheme();
|
||||
const { t } = useTranslation();
|
||||
const { data, isLoading, isValidating, error } = useGet<QueueMetrics>(
|
||||
"/queue/metrics",
|
||||
{},
|
||||
{ refreshInterval: REFRESH_INTERVAL_MS }
|
||||
);
|
||||
|
||||
const healthy = data?.failingJobs === 0;
|
||||
|
||||
return (
|
||||
<DashboardCard
|
||||
title={t("pages.dashboard.cards.checksOnSchedule.title")}
|
||||
to="/logs"
|
||||
isLoading={isLoading && !data}
|
||||
error={error}
|
||||
isStale={isValidating && Boolean(data)}
|
||||
>
|
||||
{data && (
|
||||
<Stack gap={theme.spacing(LAYOUT.SM)}>
|
||||
{healthy ? (
|
||||
<CardMessage
|
||||
text={t("pages.dashboard.cards.checksOnSchedule.healthy", {
|
||||
jobs: data.jobs,
|
||||
workers: data.workers.length,
|
||||
})}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<CardFigure
|
||||
value={String(data.failingJobs)}
|
||||
caption={t("pages.dashboard.cards.checksOnSchedule.failing")}
|
||||
color={theme.palette.error.main}
|
||||
/>
|
||||
<Stack gap={theme.spacing(LAYOUT.XS)}>
|
||||
{data.jobsWithFailures.slice(0, MAX_ERROR_ROWS).map((job) => (
|
||||
<CardRow key={String(job.monitorId)}>
|
||||
<CardRowLabel
|
||||
primary={job.monitorUrl ?? String(job.monitorId)}
|
||||
secondary={job.failReason}
|
||||
/>
|
||||
<Typography
|
||||
color={theme.palette.error.main}
|
||||
flexShrink={0}
|
||||
>
|
||||
{job.failCount}
|
||||
</Typography>
|
||||
</CardRow>
|
||||
))}
|
||||
</Stack>
|
||||
</>
|
||||
)}
|
||||
<CardStatLine
|
||||
label={t("pages.dashboard.cards.checksOnSchedule.scheduled")}
|
||||
value={String(data.jobs)}
|
||||
/>
|
||||
<CardStatLine
|
||||
label={t("pages.dashboard.cards.checksOnSchedule.runningNow")}
|
||||
value={String(data.activeJobs)}
|
||||
/>
|
||||
</Stack>
|
||||
)}
|
||||
</DashboardCard>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* /logs is an in-memory ring buffer capped at 1000 entries, wiped on restart,
|
||||
* and it ignores page/rowsPerPage. It rotates fast, so this is deliberately
|
||||
* worded "recent" rather than "all".
|
||||
*/
|
||||
export const RecentErrorsCard = () => {
|
||||
const theme = useTheme();
|
||||
const { t } = useTranslation();
|
||||
const { data, isLoading, isValidating, error } = useGet<Log[]>(
|
||||
"/logs",
|
||||
{},
|
||||
{ refreshInterval: SLOW_REFRESH_INTERVAL_MS }
|
||||
);
|
||||
|
||||
const { errors, warnings, newest } = useMemo(() => {
|
||||
const relevant = (data ?? []).filter(
|
||||
(entry) => entry.level === "error" || entry.level === "warn"
|
||||
);
|
||||
const sorted = [...relevant].sort(
|
||||
(a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()
|
||||
);
|
||||
return {
|
||||
errors: relevant.filter((entry) => entry.level === "error").length,
|
||||
warnings: relevant.filter((entry) => entry.level === "warn").length,
|
||||
newest: sorted.slice(0, MAX_ERROR_ROWS),
|
||||
};
|
||||
}, [data]);
|
||||
|
||||
return (
|
||||
<DashboardCard
|
||||
title={t("pages.dashboard.cards.recentErrors.title")}
|
||||
to="/logs"
|
||||
isLoading={isLoading && !data}
|
||||
error={error}
|
||||
isStale={isValidating && Boolean(data)}
|
||||
action={
|
||||
errors > 0 ? (
|
||||
<Typography color={theme.palette.error.main}>
|
||||
{t("pages.dashboard.cards.recentErrors.count", { count: errors })}
|
||||
</Typography>
|
||||
) : null
|
||||
}
|
||||
>
|
||||
{newest.length === 0 ? (
|
||||
<CardMessage text={t("pages.dashboard.cards.recentErrors.empty")} />
|
||||
) : (
|
||||
<Stack gap={theme.spacing(LAYOUT.SM)}>
|
||||
<CardStatLine
|
||||
label={t("pages.dashboard.cards.recentErrors.warnings")}
|
||||
value={String(warnings)}
|
||||
/>
|
||||
<Stack gap={theme.spacing(LAYOUT.XS)}>
|
||||
{newest.map((entry, index) => (
|
||||
<CardRow key={`${entry.timestamp}-${index}`}>
|
||||
<CardRowLabel
|
||||
primary={entry.message}
|
||||
secondary={[entry.service, entry.method].filter(Boolean).join(" · ")}
|
||||
/>
|
||||
<Typography
|
||||
color={
|
||||
entry.level === "error"
|
||||
? theme.palette.error.main
|
||||
: theme.palette.warning.main
|
||||
}
|
||||
flexShrink={0}
|
||||
>
|
||||
{formatTimestamp(entry.timestamp)}
|
||||
</Typography>
|
||||
</CardRow>
|
||||
))}
|
||||
</Stack>
|
||||
</Stack>
|
||||
)}
|
||||
</DashboardCard>
|
||||
);
|
||||
};
|
||||
|
||||
/** Never empty — at minimum the current user exists. */
|
||||
export const TeamCard = () => {
|
||||
const theme = useTheme();
|
||||
const { t } = useTranslation();
|
||||
const { data, isLoading, isValidating, error } = useGet<User[]>("/auth/users");
|
||||
|
||||
const { total, byRole, unverified } = useMemo(() => {
|
||||
const users = data ?? [];
|
||||
const roles = new Map<string, number>();
|
||||
for (const user of users) {
|
||||
for (const role of user.role ?? []) {
|
||||
roles.set(role, (roles.get(role) ?? 0) + 1);
|
||||
}
|
||||
}
|
||||
return {
|
||||
total: users.length,
|
||||
byRole: [...roles.entries()].sort((a, b) => b[1] - a[1]),
|
||||
unverified: users.filter((user) => !user.isVerified).length,
|
||||
};
|
||||
}, [data]);
|
||||
|
||||
return (
|
||||
<DashboardCard
|
||||
title={t("pages.dashboard.cards.team.title")}
|
||||
to="/account/team"
|
||||
isLoading={isLoading && !data}
|
||||
error={error}
|
||||
isStale={isValidating && Boolean(data)}
|
||||
>
|
||||
{data && (
|
||||
<Stack gap={theme.spacing(LAYOUT.SM)}>
|
||||
<CardFigure
|
||||
value={String(total)}
|
||||
caption={t("pages.dashboard.cards.team.members", { count: total })}
|
||||
/>
|
||||
{byRole.map(([role, count]) => (
|
||||
<CardStatLine
|
||||
key={role}
|
||||
label={t(`common.auth.roles.${role}`, { defaultValue: role })}
|
||||
value={String(count)}
|
||||
/>
|
||||
))}
|
||||
{unverified > 0 && (
|
||||
<CardStatLine
|
||||
label={t("pages.dashboard.cards.team.unverified")}
|
||||
value={String(unverified)}
|
||||
color={theme.palette.warning.main}
|
||||
/>
|
||||
)}
|
||||
</Stack>
|
||||
)}
|
||||
</DashboardCard>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,97 @@
|
||||
import Stack from "@mui/material/Stack";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import { LAYOUT } from "@/Utils/Theme/constants";
|
||||
import { DashboardCard, CardMessage } from "../DashboardCard";
|
||||
import { CardMeterRow, CardRow } from "../CardPrimitives";
|
||||
|
||||
export interface BreakdownBucket {
|
||||
/** Stable key and displayed label. */
|
||||
key: string;
|
||||
label: string;
|
||||
total: number;
|
||||
down: number;
|
||||
/** Where the row links to, if anywhere. */
|
||||
to?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* "How the fleet splits by X" — one proportional row per bucket, flagging any
|
||||
* bucket with something down. Monitors by type and Monitors by group are the
|
||||
* same card over different keys, so they share this shell.
|
||||
*/
|
||||
export const BreakdownCard = ({
|
||||
titleKey,
|
||||
emptyKey,
|
||||
to,
|
||||
buckets,
|
||||
isLoading,
|
||||
isStale,
|
||||
error,
|
||||
}: {
|
||||
titleKey: string;
|
||||
emptyKey: string;
|
||||
to?: string;
|
||||
buckets: BreakdownBucket[];
|
||||
isLoading?: boolean;
|
||||
isStale?: boolean;
|
||||
error?: unknown;
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
const { t } = useTranslation();
|
||||
|
||||
const max = Math.max(0, ...buckets.map((bucket) => bucket.total));
|
||||
|
||||
return (
|
||||
<DashboardCard
|
||||
title={t(titleKey)}
|
||||
to={to}
|
||||
isLoading={isLoading}
|
||||
error={error}
|
||||
isStale={isStale}
|
||||
>
|
||||
{buckets.length === 0 ? (
|
||||
<CardMessage text={t(emptyKey)} />
|
||||
) : (
|
||||
<Stack gap={theme.spacing(LAYOUT.SM)}>
|
||||
{buckets.map((bucket) => (
|
||||
<CardRow
|
||||
key={bucket.key}
|
||||
to={bucket.to}
|
||||
>
|
||||
<CardMeterRow
|
||||
label={bucket.label}
|
||||
value={bucket.total}
|
||||
max={max}
|
||||
color={
|
||||
bucket.down > 0 ? theme.palette.error.main : theme.palette.primary.main
|
||||
}
|
||||
trailing={
|
||||
<Stack
|
||||
direction="row"
|
||||
alignItems="center"
|
||||
gap={theme.spacing(LAYOUT.XS)}
|
||||
flexShrink={0}
|
||||
>
|
||||
{bucket.down > 0 && (
|
||||
<Typography color={theme.palette.error.main}>
|
||||
{t("pages.dashboard.cards.monitorsByType.down", {
|
||||
count: bucket.down,
|
||||
})}
|
||||
</Typography>
|
||||
)}
|
||||
<Typography color={theme.palette.text.secondary}>
|
||||
{bucket.total}
|
||||
</Typography>
|
||||
</Stack>
|
||||
}
|
||||
/>
|
||||
</CardRow>
|
||||
))}
|
||||
</Stack>
|
||||
)}
|
||||
</DashboardCard>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,143 @@
|
||||
import Stack from "@mui/material/Stack";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useMemo } from "react";
|
||||
|
||||
import { LAYOUT } from "@/Utils/Theme/constants";
|
||||
import { DashboardCard, CardMessage } from "../DashboardCard";
|
||||
import { CardBar, CardRow, CardRowLabel } from "../CardPrimitives";
|
||||
import { useMonitors } from "../../useDashboardData";
|
||||
|
||||
import { latestCheck } from "../../checks";
|
||||
|
||||
import type { Monitor } from "@/Types/Monitor";
|
||||
|
||||
// <60% fine, 60-85% warm, above that hot.
|
||||
const WARM = 60;
|
||||
const HOT = 85;
|
||||
|
||||
interface ServerUsage {
|
||||
monitor: Monitor;
|
||||
cpu: number | null;
|
||||
memory: number | null;
|
||||
disk: number | null;
|
||||
peak: number;
|
||||
}
|
||||
|
||||
const Metric = ({ label, value }: { label: string; value: number | null }) => {
|
||||
const theme = useTheme();
|
||||
const color =
|
||||
value === null
|
||||
? theme.palette.text.secondary
|
||||
: value > HOT
|
||||
? theme.palette.error.main
|
||||
: value > WARM
|
||||
? theme.palette.warning.main
|
||||
: theme.palette.primary.main;
|
||||
|
||||
return (
|
||||
<Stack
|
||||
flex={1}
|
||||
minWidth={0}
|
||||
gap={theme.spacing(LAYOUT.XXS)}
|
||||
>
|
||||
<Stack
|
||||
direction="row"
|
||||
alignItems="baseline"
|
||||
justifyContent="space-between"
|
||||
gap={theme.spacing(LAYOUT.XS)}
|
||||
>
|
||||
<Typography color={theme.palette.text.secondary}>{label}</Typography>
|
||||
<Typography color={color}>
|
||||
{/* A down server reports nothing — show a dash, never 0%. */}
|
||||
{value === null ? "—" : `${value.toFixed(1)}%`}
|
||||
</Typography>
|
||||
</Stack>
|
||||
<CardBar
|
||||
value={value ?? 0}
|
||||
color={color}
|
||||
/>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
export const BusiestServersCard = () => {
|
||||
const theme = useTheme();
|
||||
const { t } = useTranslation();
|
||||
const { data, isLoading, isValidating, error } = useMonitors();
|
||||
|
||||
const servers = useMemo<ServerUsage[]>(() => {
|
||||
return (data?.monitors ?? [])
|
||||
.filter((monitor) => monitor.type === "hardware")
|
||||
.map((monitor) => {
|
||||
const latest = latestCheck(monitor);
|
||||
// snake_case here, unlike camelCase in HardwareCheckStats, and
|
||||
// these are 0-1 fractions, so scale to percent.
|
||||
const toPercent = (value: number | undefined) =>
|
||||
typeof value === "number" ? value * 100 : null;
|
||||
const cpu = toPercent(latest?.cpu?.usage_percent);
|
||||
const memory = toPercent(latest?.memory?.usage_percent);
|
||||
const disks = (latest?.disk ?? [])
|
||||
.map((entry) => entry.usage_percent)
|
||||
.filter((value): value is number => typeof value === "number");
|
||||
const disk = disks.length > 0 ? Math.max(...disks) * 100 : null;
|
||||
return {
|
||||
monitor,
|
||||
cpu,
|
||||
memory,
|
||||
disk,
|
||||
peak: Math.max(cpu ?? 0, memory ?? 0, disk ?? 0),
|
||||
};
|
||||
})
|
||||
.sort((a, b) => b.peak - a.peak);
|
||||
}, [data]);
|
||||
|
||||
return (
|
||||
<DashboardCard
|
||||
title={t("pages.dashboard.cards.busiestServers.title")}
|
||||
to="/infrastructure"
|
||||
isLoading={isLoading && !data}
|
||||
error={error}
|
||||
isStale={isValidating && Boolean(data)}
|
||||
>
|
||||
{servers.length === 0 ? (
|
||||
<CardMessage text={t("pages.dashboard.cards.busiestServers.empty")} />
|
||||
) : (
|
||||
<Stack gap={theme.spacing(LAYOUT.MD)}>
|
||||
{servers.map(({ monitor, cpu, memory, disk }) => (
|
||||
<CardRow
|
||||
key={monitor.id}
|
||||
to={`/infrastructure/${monitor.id}`}
|
||||
>
|
||||
<Stack
|
||||
flex={1}
|
||||
minWidth={0}
|
||||
gap={theme.spacing(LAYOUT.XS)}
|
||||
>
|
||||
<CardRowLabel primary={monitor.name} />
|
||||
<Stack
|
||||
direction="row"
|
||||
gap={theme.spacing(LAYOUT.MD)}
|
||||
>
|
||||
<Metric
|
||||
label={t("pages.dashboard.cards.busiestServers.cpu")}
|
||||
value={cpu}
|
||||
/>
|
||||
<Metric
|
||||
label={t("pages.dashboard.cards.busiestServers.memory")}
|
||||
value={memory}
|
||||
/>
|
||||
<Metric
|
||||
label={t("pages.dashboard.cards.busiestServers.disk")}
|
||||
value={disk}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</CardRow>
|
||||
))}
|
||||
</Stack>
|
||||
)}
|
||||
</DashboardCard>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,93 @@
|
||||
import Stack from "@mui/material/Stack";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import { useGet } from "@/Hooks/UseApi";
|
||||
import { LAYOUT } from "@/Utils/Theme/constants";
|
||||
import { formatDuration } from "@/Utils/TimeUtils";
|
||||
import { DashboardCard } from "../DashboardCard";
|
||||
import { CardBar, CardStatLine } from "../CardPrimitives";
|
||||
|
||||
import { REFRESH_INTERVAL_MS } from "../../cards";
|
||||
|
||||
import type { Diagnostics } from "@/Types/Diagnostics";
|
||||
|
||||
const BYTES_PER_MB = 1024 * 1024;
|
||||
|
||||
// Banding from CARD-SPECS: warm at 50ms of event-loop delay, hot at 200ms;
|
||||
// heap warm past 80% of the V8 limit.
|
||||
const EVENT_LOOP_WARM_MS = 50;
|
||||
const EVENT_LOOP_HOT_MS = 200;
|
||||
const HEAP_WARM_RATIO = 0.8;
|
||||
|
||||
/**
|
||||
* The one card that is never empty — it reports on Checkmate itself, so it
|
||||
* works on a fresh install with zero monitors. Admin only.
|
||||
*/
|
||||
export const CheckmateServerCard = () => {
|
||||
const theme = useTheme();
|
||||
const { t } = useTranslation();
|
||||
const { data, isLoading, isValidating, error } = useGet<Diagnostics>(
|
||||
"/diagnostic/system",
|
||||
{},
|
||||
{ refreshInterval: REFRESH_INTERVAL_MS }
|
||||
);
|
||||
|
||||
const usedHeap = data?.v8HeapStats.usedHeapSizeBytes ?? 0;
|
||||
const heapLimit = data?.v8HeapStats.heapSizeLimitBytes ?? 0;
|
||||
const heapRatio = heapLimit > 0 ? usedHeap / heapLimit : 0;
|
||||
const heapColor =
|
||||
heapRatio > HEAP_WARM_RATIO ? theme.palette.warning.main : theme.palette.primary.main;
|
||||
|
||||
const eventLoopMs = data?.eventLoopDelayMs ?? 0;
|
||||
const eventLoopColor =
|
||||
eventLoopMs > EVENT_LOOP_HOT_MS
|
||||
? theme.palette.error.main
|
||||
: eventLoopMs > EVENT_LOOP_WARM_MS
|
||||
? theme.palette.warning.main
|
||||
: theme.palette.text.primary;
|
||||
|
||||
return (
|
||||
<DashboardCard
|
||||
title={t("pages.dashboard.cards.checkmateServer.title")}
|
||||
to="/logs"
|
||||
isLoading={isLoading && !data}
|
||||
error={error}
|
||||
isStale={isValidating && Boolean(data)}
|
||||
>
|
||||
{data && (
|
||||
<Stack gap={theme.spacing(LAYOUT.SM)}>
|
||||
<Stack gap={theme.spacing(LAYOUT.XXS)}>
|
||||
<CardStatLine
|
||||
label={t("pages.dashboard.cards.checkmateServer.memory")}
|
||||
value={`${Math.round(usedHeap / BYTES_PER_MB)} / ${Math.round(
|
||||
heapLimit / BYTES_PER_MB
|
||||
)} MB`}
|
||||
color={heapColor}
|
||||
/>
|
||||
<CardBar
|
||||
value={heapRatio * 100}
|
||||
color={heapColor}
|
||||
/>
|
||||
</Stack>
|
||||
<CardStatLine
|
||||
label={t("pages.dashboard.cards.checkmateServer.eventLoop")}
|
||||
value={`${eventLoopMs.toFixed(1)} ms`}
|
||||
color={eventLoopColor}
|
||||
/>
|
||||
<CardStatLine
|
||||
label={t("pages.dashboard.cards.checkmateServer.uptime")}
|
||||
value={formatDuration(data.uptimeMs)}
|
||||
/>
|
||||
<CardStatLine
|
||||
label={t("pages.dashboard.cards.checkmateServer.database")}
|
||||
value={t("pages.dashboard.cards.checkmateServer.readsWrites", {
|
||||
reads: data.mongoStats.readsPerSecond.toFixed(1),
|
||||
writes: data.mongoStats.writesPerSecond.toFixed(1),
|
||||
})}
|
||||
/>
|
||||
</Stack>
|
||||
)}
|
||||
</DashboardCard>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,157 @@
|
||||
import Stack from "@mui/material/Stack";
|
||||
import Box from "@mui/material/Box";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useMemo } from "react";
|
||||
|
||||
import { Dot } from "@/Components/design-elements";
|
||||
import { LAYOUT } from "@/Utils/Theme/constants";
|
||||
import { getStatusColor, getMonitorPath } from "@/Utils/MonitorUtils";
|
||||
import { formatStatusCode } from "@/Utils/statusCode";
|
||||
import { formatDuration } from "@/Utils/TimeUtils";
|
||||
import { DashboardCard, CardMessage } from "../DashboardCard";
|
||||
import { CardRow } from "../CardPrimitives";
|
||||
import { Sparkline } from "../Sparkline";
|
||||
import { useMonitors } from "../../useDashboardData";
|
||||
|
||||
import { latestCheck } from "../../checks";
|
||||
|
||||
import type { Monitor, MonitorStatus } from "@/Types/Monitor";
|
||||
|
||||
const SPARKLINE_WIDTH = 80;
|
||||
|
||||
const STATUS_RANK: Partial<Record<MonitorStatus, number>> = {
|
||||
down: 1,
|
||||
breached: 2,
|
||||
};
|
||||
|
||||
const isProblem = (monitor: Monitor) => STATUS_RANK[monitor.status] !== undefined;
|
||||
|
||||
/**
|
||||
* How long the monitor has been down, from the oldest consecutive failing
|
||||
* check. recentChecks is oldest-first, so the run is walked back from the end.
|
||||
*/
|
||||
const downSince = (monitor: Monitor): string | null => {
|
||||
const checks = monitor.recentChecks ?? [];
|
||||
let oldestFailing: string | null = null;
|
||||
for (let index = checks.length - 1; index >= 0; index -= 1) {
|
||||
if (checks[index].status !== false) {
|
||||
break;
|
||||
}
|
||||
oldestFailing = checks[index].createdAt;
|
||||
}
|
||||
return oldestFailing;
|
||||
};
|
||||
|
||||
export const CurrentlyDownCard = () => {
|
||||
const theme = useTheme();
|
||||
const { t } = useTranslation();
|
||||
const { data, isLoading, isValidating, error } = useMonitors();
|
||||
|
||||
const problems = useMemo(() => {
|
||||
const monitors = data?.monitors ?? [];
|
||||
return monitors
|
||||
.filter(isProblem)
|
||||
.map((monitor) => ({ monitor, since: downSince(monitor) }))
|
||||
.sort((a, b) => {
|
||||
const rank =
|
||||
(STATUS_RANK[a.monitor.status] ?? 99) - (STATUS_RANK[b.monitor.status] ?? 99);
|
||||
if (rank !== 0) {
|
||||
return rank;
|
||||
}
|
||||
// Tie-break on longest downtime: the older timestamp ranks first.
|
||||
return new Date(a.since ?? 0).getTime() - new Date(b.since ?? 0).getTime();
|
||||
});
|
||||
}, [data]);
|
||||
|
||||
return (
|
||||
<DashboardCard
|
||||
title={t("pages.dashboard.cards.currentlyDown.title")}
|
||||
to="/incidents"
|
||||
isLoading={isLoading && !data}
|
||||
error={error}
|
||||
isStale={isValidating && Boolean(data)}
|
||||
action={
|
||||
problems.length > 0 ? (
|
||||
<Typography color={theme.palette.error.main}>
|
||||
{t("pages.dashboard.cards.currentlyDown.count", {
|
||||
count: problems.length,
|
||||
})}
|
||||
</Typography>
|
||||
) : null
|
||||
}
|
||||
>
|
||||
{problems.length === 0 ? (
|
||||
<CardMessage text={t("pages.dashboard.cards.currentlyDown.empty")} />
|
||||
) : (
|
||||
<Stack gap={theme.spacing(LAYOUT.XS)}>
|
||||
{problems.map(({ monitor, since }) => (
|
||||
<CardRow
|
||||
key={monitor.id}
|
||||
to={`/${getMonitorPath(monitor.type)}/${monitor.id}`}
|
||||
>
|
||||
<Dot
|
||||
color={getStatusColor(monitor.status, theme)}
|
||||
size="md"
|
||||
/>
|
||||
<Stack
|
||||
flex={1}
|
||||
minWidth={0}
|
||||
gap={theme.spacing(LAYOUT.XXS)}
|
||||
>
|
||||
<Stack
|
||||
direction="row"
|
||||
alignItems="baseline"
|
||||
justifyContent="space-between"
|
||||
gap={theme.spacing(LAYOUT.SM)}
|
||||
>
|
||||
<Typography
|
||||
color={theme.palette.text.primary}
|
||||
noWrap
|
||||
>
|
||||
{monitor.name}
|
||||
</Typography>
|
||||
{since && (
|
||||
<Typography
|
||||
color={theme.palette.error.main}
|
||||
flexShrink={0}
|
||||
>
|
||||
{formatDuration(Date.now() - new Date(since).getTime())}
|
||||
</Typography>
|
||||
)}
|
||||
</Stack>
|
||||
<Stack
|
||||
direction="row"
|
||||
alignItems="center"
|
||||
justifyContent="space-between"
|
||||
gap={theme.spacing(LAYOUT.SM)}
|
||||
>
|
||||
{/* Not StatusCodeLabel: its Tooltip is focusable, and a
|
||||
focusable element inside the row's link is unreachable
|
||||
by keyboard. */}
|
||||
<Typography
|
||||
color={theme.palette.text.secondary}
|
||||
noWrap
|
||||
>
|
||||
{monitor.type} ·{" "}
|
||||
{formatStatusCode(latestCheck(monitor)?.statusCode, t)}
|
||||
</Typography>
|
||||
<Box
|
||||
width={SPARKLINE_WIDTH}
|
||||
flexShrink={0}
|
||||
>
|
||||
<Sparkline
|
||||
checks={monitor.recentChecks ?? []}
|
||||
color={theme.palette.error.main}
|
||||
/>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</CardRow>
|
||||
))}
|
||||
</Stack>
|
||||
)}
|
||||
</DashboardCard>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,54 @@
|
||||
import Stack from "@mui/material/Stack";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import { useGet } from "@/Hooks/UseApi";
|
||||
import { LAYOUT } from "@/Utils/Theme/constants";
|
||||
import { DashboardCard, CardMessage } from "../DashboardCard";
|
||||
import { CardBar, CardFigure } from "../CardPrimitives";
|
||||
|
||||
import type { ChecksSummary } from "@/Types/Check";
|
||||
|
||||
// Day only. `dateRange=week` returns figures identical to `day`, so a range
|
||||
// selector here would silently lie.
|
||||
const SUMMARY_URL = "/checks/team/summary?dateRange=day";
|
||||
|
||||
export const FailedChecksCard = () => {
|
||||
const theme = useTheme();
|
||||
const { t } = useTranslation();
|
||||
const { data, isLoading, isValidating, error } = useGet<ChecksSummary>(SUMMARY_URL);
|
||||
|
||||
const total = data?.totalChecks ?? 0;
|
||||
const failed = data?.downChecks ?? 0;
|
||||
const percentage = total > 0 ? (failed / total) * 100 : 0;
|
||||
const color = percentage > 10 ? theme.palette.error.main : theme.palette.success.main;
|
||||
|
||||
return (
|
||||
<DashboardCard
|
||||
title={t("pages.dashboard.cards.failedChecks.title")}
|
||||
to="/checks"
|
||||
isLoading={isLoading && !data}
|
||||
error={error}
|
||||
isStale={isValidating && Boolean(data)}
|
||||
>
|
||||
{total === 0 ? (
|
||||
<CardMessage text={t("pages.dashboard.cards.failedChecks.empty")} />
|
||||
) : (
|
||||
<Stack gap={theme.spacing(LAYOUT.SM)}>
|
||||
<CardFigure
|
||||
value={`${percentage.toFixed(1)}%`}
|
||||
caption={t("pages.dashboard.cards.failedChecks.ratio", {
|
||||
failed: failed.toLocaleString(),
|
||||
total: total.toLocaleString(),
|
||||
})}
|
||||
color={color}
|
||||
/>
|
||||
<CardBar
|
||||
value={percentage}
|
||||
color={color}
|
||||
/>
|
||||
</Stack>
|
||||
)}
|
||||
</DashboardCard>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,138 @@
|
||||
import Stack from "@mui/material/Stack";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import { Link as RouterLink } from "react-router-dom";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import { Dot } from "@/Components/design-elements";
|
||||
import { LAYOUT } from "@/Utils/Theme/constants";
|
||||
import { typographyLevels } from "@/Utils/Theme/Palette";
|
||||
import { getStatusColor } from "@/Utils/MonitorUtils";
|
||||
import { DashboardCard, CardMessage } from "../DashboardCard";
|
||||
import { CardSegmentedBar, type BarSegment } from "../CardPrimitives";
|
||||
import { useMonitors } from "../../useDashboardData";
|
||||
|
||||
import type { MonitorStatus, MonitorsSummary } from "@/Types/Monitor";
|
||||
|
||||
// Every state the summary reports, ordered worst first so the bar reads
|
||||
// problems-to-healthy left to right and the chips below list what is wrong
|
||||
// before what is merely idle. `up` is handled separately as the headline.
|
||||
const STATES: { key: string; status: MonitorStatus; field: keyof MonitorsSummary }[] = [
|
||||
{ key: "down", status: "down", field: "downMonitors" },
|
||||
{ key: "breached", status: "breached", field: "breachedMonitors" },
|
||||
{ key: "initializing", status: "initializing", field: "initializingMonitors" },
|
||||
{ key: "maintenance", status: "maintenance", field: "maintenanceMonitors" },
|
||||
{ key: "paused", status: "paused", field: "pausedMonitors" },
|
||||
];
|
||||
|
||||
export const MonitorStatusCard = () => {
|
||||
const theme = useTheme();
|
||||
const { t } = useTranslation();
|
||||
const { data, isLoading, isValidating, error } = useMonitors();
|
||||
const summary = data?.summary ?? null;
|
||||
|
||||
// Only states that actually have monitors are shown. Padding the card with
|
||||
// zeros says nothing, and a healthy fleet should read as calm rather than as
|
||||
// a row of empty counters.
|
||||
const present = summary
|
||||
? STATES.map((state) => ({ ...state, count: summary[state.field] })).filter(
|
||||
(state) => state.count > 0
|
||||
)
|
||||
: [];
|
||||
|
||||
const segments: BarSegment[] = summary
|
||||
? [
|
||||
{
|
||||
key: "up",
|
||||
value: summary.upMonitors,
|
||||
color: getStatusColor("up", theme),
|
||||
label: `${t("pages.common.monitors.status.up")} — ${summary.upMonitors}`,
|
||||
},
|
||||
...present.map((state) => ({
|
||||
key: state.key,
|
||||
value: state.count,
|
||||
color: getStatusColor(state.status, theme),
|
||||
label: `${t(`pages.common.monitors.status.${state.key}`)} — ${state.count}`,
|
||||
})),
|
||||
]
|
||||
: [];
|
||||
|
||||
return (
|
||||
<DashboardCard
|
||||
title={t("pages.dashboard.cards.monitorStatus.title")}
|
||||
to="/uptime"
|
||||
isLoading={isLoading && !summary}
|
||||
error={error}
|
||||
isStale={isValidating && Boolean(data)}
|
||||
>
|
||||
{!summary || summary.totalMonitors === 0 ? (
|
||||
<CardMessage text={t("pages.dashboard.cards.monitorStatus.empty")} />
|
||||
) : (
|
||||
<Stack gap={theme.spacing(LAYOUT.MD)}>
|
||||
<Stack gap={theme.spacing(LAYOUT.SM)}>
|
||||
<Stack
|
||||
direction="row"
|
||||
alignItems="baseline"
|
||||
gap={theme.spacing(LAYOUT.XS)}
|
||||
>
|
||||
<Typography
|
||||
fontSize={typographyLevels.xxl}
|
||||
fontWeight={300}
|
||||
color={theme.palette.text.primary}
|
||||
lineHeight={1.1}
|
||||
>
|
||||
{summary.upMonitors}
|
||||
</Typography>
|
||||
<Typography color={theme.palette.text.secondary}>
|
||||
{t("pages.dashboard.cards.monitorStatus.upOfTotal", {
|
||||
total: summary.totalMonitors,
|
||||
})}
|
||||
</Typography>
|
||||
</Stack>
|
||||
<CardSegmentedBar segments={segments} />
|
||||
</Stack>
|
||||
{present.length > 0 && (
|
||||
<Stack
|
||||
direction="row"
|
||||
flexWrap="wrap"
|
||||
gap={theme.spacing(LAYOUT.MD)}
|
||||
>
|
||||
{present.map((state) => (
|
||||
<Stack
|
||||
key={state.key}
|
||||
component={RouterLink}
|
||||
// Plain /uptime: the monitors list does not read query
|
||||
// params, so a ?status= filter would be silently dropped
|
||||
// and the link would lie about where it goes.
|
||||
to="/uptime"
|
||||
direction="row"
|
||||
alignItems="center"
|
||||
gap={theme.spacing(LAYOUT.XS)}
|
||||
px={theme.spacing(LAYOUT.XS)}
|
||||
py={theme.spacing(LAYOUT.XXS)}
|
||||
mx={`-${theme.spacing(LAYOUT.XS)}`}
|
||||
borderRadius={theme.shape.borderRadius}
|
||||
sx={{
|
||||
textDecoration: "none",
|
||||
"&:hover": { backgroundColor: theme.palette.action.hover },
|
||||
}}
|
||||
>
|
||||
<Dot
|
||||
color={getStatusColor(state.status, theme)}
|
||||
size="md"
|
||||
/>
|
||||
<Typography color={theme.palette.text.secondary}>
|
||||
{t(`pages.common.monitors.status.${state.key}`)}
|
||||
</Typography>
|
||||
<Typography color={theme.palette.text.primary}>
|
||||
{state.count}
|
||||
</Typography>
|
||||
</Stack>
|
||||
))}
|
||||
</Stack>
|
||||
)}
|
||||
</Stack>
|
||||
)}
|
||||
</DashboardCard>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,43 @@
|
||||
import { useMemo } from "react";
|
||||
|
||||
import { BreakdownCard, type BreakdownBucket } from "./BreakdownCard";
|
||||
import { useMonitors } from "../../useDashboardData";
|
||||
|
||||
export const MonitorsByGroupCard = () => {
|
||||
const { data, isLoading, isValidating, error } = useMonitors();
|
||||
|
||||
// `group` is a plain string | null on the monitor — there is no groups
|
||||
// endpoint, so the set is whatever monitors actually declare.
|
||||
const buckets = useMemo<BreakdownBucket[]>(() => {
|
||||
const byGroup = new Map<string, BreakdownBucket>();
|
||||
for (const monitor of data?.monitors ?? []) {
|
||||
if (!monitor.group) {
|
||||
continue;
|
||||
}
|
||||
const bucket = byGroup.get(monitor.group) ?? {
|
||||
key: monitor.group,
|
||||
label: monitor.group,
|
||||
total: 0,
|
||||
down: 0,
|
||||
};
|
||||
bucket.total += 1;
|
||||
if (monitor.status === "down" || monitor.status === "breached") {
|
||||
bucket.down += 1;
|
||||
}
|
||||
byGroup.set(monitor.group, bucket);
|
||||
}
|
||||
return [...byGroup.values()].sort((a, b) => b.total - a.total);
|
||||
}, [data]);
|
||||
|
||||
return (
|
||||
<BreakdownCard
|
||||
titleKey="pages.dashboard.cards.monitorsByGroup.title"
|
||||
emptyKey="pages.dashboard.cards.monitorsByGroup.empty"
|
||||
to="/uptime"
|
||||
buckets={buckets}
|
||||
isLoading={isLoading && !data}
|
||||
isStale={isValidating && Boolean(data)}
|
||||
error={error}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,42 @@
|
||||
import { useMemo } from "react";
|
||||
|
||||
import { getMonitorPath } from "@/Utils/MonitorUtils";
|
||||
import { BreakdownCard, type BreakdownBucket } from "./BreakdownCard";
|
||||
import { useMonitors } from "../../useDashboardData";
|
||||
|
||||
import type { MonitorType } from "@/Types/Monitor";
|
||||
|
||||
export const MonitorsByTypeCard = () => {
|
||||
const { data, isLoading, isValidating, error } = useMonitors();
|
||||
|
||||
const buckets = useMemo<BreakdownBucket[]>(() => {
|
||||
const byType = new Map<MonitorType, BreakdownBucket>();
|
||||
for (const monitor of data?.monitors ?? []) {
|
||||
const bucket = byType.get(monitor.type) ?? {
|
||||
key: monitor.type,
|
||||
label: monitor.type,
|
||||
total: 0,
|
||||
down: 0,
|
||||
to: `/${getMonitorPath(monitor.type)}`,
|
||||
};
|
||||
bucket.total += 1;
|
||||
if (monitor.status === "down" || monitor.status === "breached") {
|
||||
bucket.down += 1;
|
||||
}
|
||||
byType.set(monitor.type, bucket);
|
||||
}
|
||||
return [...byType.values()].sort((a, b) => b.total - a.total);
|
||||
}, [data]);
|
||||
|
||||
return (
|
||||
<BreakdownCard
|
||||
titleKey="pages.dashboard.cards.monitorsByType.title"
|
||||
emptyKey="pages.dashboard.cards.monitorsByType.empty"
|
||||
to="/uptime"
|
||||
buckets={buckets}
|
||||
isLoading={isLoading && !data}
|
||||
isStale={isValidating && Boolean(data)}
|
||||
error={error}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,175 @@
|
||||
import Stack from "@mui/material/Stack";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useMemo } from "react";
|
||||
|
||||
import { LAYOUT } from "@/Utils/Theme/constants";
|
||||
import { getMonitorPath, getUptimePercentageColor } from "@/Utils/MonitorUtils";
|
||||
import { DashboardCard, CardMessage } from "../DashboardCard";
|
||||
import { CardMeterRow, CardRow, CardRowLabel } from "../CardPrimitives";
|
||||
import { useMonitors } from "../../useDashboardData";
|
||||
|
||||
import type { Monitor } from "@/Types/Monitor";
|
||||
|
||||
const TOP_N = 5;
|
||||
// A ranking of one is not a ranking.
|
||||
const MIN_RANKABLE = 2;
|
||||
|
||||
const averageResponseTime = (monitor: Monitor): number | null => {
|
||||
const times = (monitor.recentChecks ?? [])
|
||||
.map((check) => check.responseTime)
|
||||
.filter((value): value is number => typeof value === "number");
|
||||
if (times.length === 0) {
|
||||
return null;
|
||||
}
|
||||
return times.reduce((sum, value) => sum + value, 0) / times.length;
|
||||
};
|
||||
|
||||
/** Header reads "top 5 of 12" so a truncated ranking says so. */
|
||||
const RankingCount = ({ shown, total }: { shown: number; total: number }) => {
|
||||
const theme = useTheme();
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<Typography color={theme.palette.text.secondary}>
|
||||
{t("pages.dashboard.cards.ranking.topOf", { shown, total })}
|
||||
</Typography>
|
||||
);
|
||||
};
|
||||
|
||||
export const SlowestMonitorsCard = () => {
|
||||
const theme = useTheme();
|
||||
const { t } = useTranslation();
|
||||
const { data, isLoading, isValidating, error } = useMonitors();
|
||||
|
||||
const ranked = useMemo(() => {
|
||||
return (data?.monitors ?? [])
|
||||
.filter((monitor) => monitor.status !== "paused")
|
||||
.map((monitor) => ({ monitor, average: averageResponseTime(monitor) }))
|
||||
.filter(
|
||||
(entry): entry is { monitor: Monitor; average: number } => entry.average !== null
|
||||
)
|
||||
.sort((a, b) => b.average - a.average);
|
||||
}, [data]);
|
||||
|
||||
const slowest = ranked[0]?.average ?? 0;
|
||||
|
||||
return (
|
||||
<DashboardCard
|
||||
title={t("pages.dashboard.cards.slowestMonitors.title")}
|
||||
to="/uptime"
|
||||
isLoading={isLoading && !data}
|
||||
error={error}
|
||||
isStale={isValidating && Boolean(data)}
|
||||
action={
|
||||
ranked.length >= MIN_RANKABLE ? (
|
||||
<RankingCount
|
||||
shown={Math.min(TOP_N, ranked.length)}
|
||||
total={ranked.length}
|
||||
/>
|
||||
) : null
|
||||
}
|
||||
>
|
||||
{ranked.length < MIN_RANKABLE ? (
|
||||
<CardMessage text={t("pages.dashboard.cards.ranking.notEnough")} />
|
||||
) : (
|
||||
<Stack gap={theme.spacing(LAYOUT.SM)}>
|
||||
{ranked.slice(0, TOP_N).map(({ monitor, average }) => (
|
||||
<CardRow
|
||||
key={monitor.id}
|
||||
to={`/${getMonitorPath(monitor.type)}/${monitor.id}`}
|
||||
>
|
||||
<CardMeterRow
|
||||
label={<CardRowLabel primary={monitor.name} />}
|
||||
value={average}
|
||||
max={slowest}
|
||||
color={theme.palette.primary.main}
|
||||
trailing={
|
||||
<Typography
|
||||
color={theme.palette.text.secondary}
|
||||
flexShrink={0}
|
||||
>
|
||||
{Math.round(average)} ms
|
||||
</Typography>
|
||||
}
|
||||
/>
|
||||
</CardRow>
|
||||
))}
|
||||
</Stack>
|
||||
)}
|
||||
</DashboardCard>
|
||||
);
|
||||
};
|
||||
|
||||
export const LowestUptimeCard = () => {
|
||||
const theme = useTheme();
|
||||
const { t } = useTranslation();
|
||||
const { data, isLoading, isValidating, error } = useMonitors();
|
||||
|
||||
const ranked = useMemo(() => {
|
||||
return (
|
||||
(data?.monitors ?? [])
|
||||
// Paused monitors keep whatever uptime they had, or zero — a paused
|
||||
// ping monitor reads 0% and would rank beside a genuinely down one.
|
||||
// Neither is a live problem, so neither belongs in a worst-uptime list.
|
||||
.filter((monitor) => monitor.status !== "paused")
|
||||
.filter(
|
||||
(monitor): monitor is Monitor & { uptimePercentage: number } =>
|
||||
typeof monitor.uptimePercentage === "number"
|
||||
)
|
||||
.sort((a, b) => a.uptimePercentage - b.uptimePercentage)
|
||||
);
|
||||
}, [data]);
|
||||
|
||||
return (
|
||||
<DashboardCard
|
||||
title={t("pages.dashboard.cards.lowestUptime.title")}
|
||||
to="/uptime"
|
||||
isLoading={isLoading && !data}
|
||||
error={error}
|
||||
isStale={isValidating && Boolean(data)}
|
||||
action={
|
||||
ranked.length >= MIN_RANKABLE ? (
|
||||
<RankingCount
|
||||
shown={Math.min(TOP_N, ranked.length)}
|
||||
total={ranked.length}
|
||||
/>
|
||||
) : null
|
||||
}
|
||||
>
|
||||
{ranked.length < MIN_RANKABLE ? (
|
||||
<CardMessage text={t("pages.dashboard.cards.ranking.notEnough")} />
|
||||
) : (
|
||||
<Stack gap={theme.spacing(LAYOUT.SM)}>
|
||||
{ranked.slice(0, TOP_N).map((monitor) => {
|
||||
// uptimePercentage is a 0-1 fraction, not 0-100.
|
||||
const percentage = monitor.uptimePercentage * 100;
|
||||
const palette = getUptimePercentageColor(monitor.uptimePercentage);
|
||||
return (
|
||||
<CardRow
|
||||
key={monitor.id}
|
||||
to={`/${getMonitorPath(monitor.type)}/${monitor.id}`}
|
||||
>
|
||||
<CardMeterRow
|
||||
label={<CardRowLabel primary={monitor.name} />}
|
||||
// The card ranks worst uptime first, so the bar shows the
|
||||
// shortfall - the worst monitor gets the longest bar.
|
||||
value={100 - percentage}
|
||||
color={theme.palette[palette].main}
|
||||
trailing={
|
||||
<Typography
|
||||
color={theme.palette[palette].main}
|
||||
flexShrink={0}
|
||||
>
|
||||
{percentage.toFixed(1)}%
|
||||
</Typography>
|
||||
}
|
||||
/>
|
||||
</CardRow>
|
||||
);
|
||||
})}
|
||||
</Stack>
|
||||
)}
|
||||
</DashboardCard>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,99 @@
|
||||
import Stack from "@mui/material/Stack";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import { useGet } from "@/Hooks/UseApi";
|
||||
import { Dot } from "@/Components/design-elements";
|
||||
import { LAYOUT } from "@/Utils/Theme/constants";
|
||||
import { formatDuration, formatTimestamp } from "@/Utils/TimeUtils";
|
||||
import { DashboardCard, CardMessage } from "../DashboardCard";
|
||||
import { CardRow, CardRowLabel } from "../CardPrimitives";
|
||||
|
||||
import type { IncidentSummary, IncidentSummaryItem } from "@/Types/Incident";
|
||||
|
||||
const MAX_ROWS = 5;
|
||||
|
||||
/** Open incidents have no end time; closed ones report how long they ran. */
|
||||
const incidentDuration = (incident: IncidentSummaryItem): string | null => {
|
||||
if (!incident.endTime) {
|
||||
return null;
|
||||
}
|
||||
const ms =
|
||||
new Date(incident.endTime).getTime() - new Date(incident.startTime).getTime();
|
||||
return ms > 0 ? formatDuration(ms) : null;
|
||||
};
|
||||
|
||||
export const RecentIncidentsCard = () => {
|
||||
const theme = useTheme();
|
||||
const { t } = useTranslation();
|
||||
const { data, isLoading, isValidating, error } = useGet<IncidentSummary>(
|
||||
"/incidents/team/summary"
|
||||
);
|
||||
|
||||
const incidents = (data?.latestIncidents ?? []).slice(0, MAX_ROWS);
|
||||
|
||||
return (
|
||||
<DashboardCard
|
||||
title={t("pages.dashboard.cards.recentIncidents.title")}
|
||||
to="/incidents"
|
||||
isLoading={isLoading && !data}
|
||||
error={error}
|
||||
isStale={isValidating && Boolean(data)}
|
||||
action={
|
||||
data && data.totalActive > 0 ? (
|
||||
<Typography color={theme.palette.error.main}>
|
||||
{t("pages.dashboard.cards.recentIncidents.active", {
|
||||
count: data.totalActive,
|
||||
})}
|
||||
</Typography>
|
||||
) : null
|
||||
}
|
||||
>
|
||||
{incidents.length === 0 ? (
|
||||
<CardMessage text={t("pages.dashboard.cards.recentIncidents.empty")} />
|
||||
) : (
|
||||
<Stack gap={theme.spacing(LAYOUT.XS)}>
|
||||
{incidents.map((incident) => {
|
||||
const isOpen = incident.status === true;
|
||||
const duration = incidentDuration(incident);
|
||||
return (
|
||||
<CardRow
|
||||
key={incident.id}
|
||||
to="/incidents"
|
||||
>
|
||||
<Dot
|
||||
color={isOpen ? theme.palette.error.light : theme.palette.success.light}
|
||||
size="md"
|
||||
/>
|
||||
<CardRowLabel
|
||||
primary={
|
||||
incident.monitorName ??
|
||||
t("pages.dashboard.cards.recentIncidents.unknownMonitor")
|
||||
}
|
||||
secondary={formatTimestamp(incident.startTime)}
|
||||
/>
|
||||
<Typography
|
||||
color={theme.palette.text.secondary}
|
||||
sx={{ flexShrink: 0 }}
|
||||
>
|
||||
{isOpen
|
||||
? t("pages.dashboard.cards.recentIncidents.ongoing")
|
||||
: (duration ?? "—")}
|
||||
</Typography>
|
||||
{incident.resolutionType === "manual" && (
|
||||
<Typography
|
||||
color={theme.palette.warning.main}
|
||||
sx={{ flexShrink: 0 }}
|
||||
>
|
||||
{t("pages.dashboard.cards.recentIncidents.manual")}
|
||||
</Typography>
|
||||
)}
|
||||
</CardRow>
|
||||
);
|
||||
})}
|
||||
</Stack>
|
||||
)}
|
||||
</DashboardCard>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,258 @@
|
||||
import Stack from "@mui/material/Stack";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useMemo } from "react";
|
||||
|
||||
import { useGet } from "@/Hooks/UseApi";
|
||||
import { Dot } from "@/Components/design-elements";
|
||||
import { LAYOUT } from "@/Utils/Theme/constants";
|
||||
import { formatTimestamp } from "@/Utils/TimeUtils";
|
||||
import { DashboardCard, CardMessage } from "../DashboardCard";
|
||||
import {
|
||||
CardFigure,
|
||||
CardRow,
|
||||
CardRowLabel,
|
||||
CardSegmentedBar,
|
||||
CardStatLine,
|
||||
} from "../CardPrimitives";
|
||||
|
||||
import type { IncidentSummary } from "@/Types/Incident";
|
||||
import type { Notification } from "@/Types/Notification";
|
||||
import type { MaintenanceWindow } from "@/Types/MaintenanceWindow";
|
||||
import type { StatusPage } from "@/Types/StatusPage";
|
||||
|
||||
/** Free when Recent incidents is present — same summary call, shared by SWR. */
|
||||
export const IncidentStatsCard = () => {
|
||||
const theme = useTheme();
|
||||
const { t } = useTranslation();
|
||||
const { data, isLoading, isValidating, error } = useGet<IncidentSummary>(
|
||||
"/incidents/team/summary"
|
||||
);
|
||||
|
||||
return (
|
||||
<DashboardCard
|
||||
title={t("pages.dashboard.cards.incidentStats.title")}
|
||||
to="/incidents"
|
||||
isLoading={isLoading && !data}
|
||||
error={error}
|
||||
isStale={isValidating && Boolean(data)}
|
||||
>
|
||||
{data && (
|
||||
<Stack gap={theme.spacing(LAYOUT.MD)}>
|
||||
{/* Open now leads, paired with the all-time total for context: two
|
||||
open means something different against 12 incidents than 183. */}
|
||||
<Stack
|
||||
direction="row"
|
||||
gap={theme.spacing(LAYOUT.XXL)}
|
||||
>
|
||||
<CardFigure
|
||||
value={String(data.totalActive)}
|
||||
caption={t("pages.dashboard.cards.incidentStats.openNow")}
|
||||
color={
|
||||
data.totalActive > 0
|
||||
? theme.palette.error.main
|
||||
: theme.palette.success.main
|
||||
}
|
||||
/>
|
||||
<CardFigure
|
||||
value={data.total.toLocaleString()}
|
||||
caption={t("pages.dashboard.cards.incidentStats.total")}
|
||||
/>
|
||||
</Stack>
|
||||
{/* How much of the fleet heals itself — the automatic/manual split
|
||||
is already computed server-side and said nothing on the card
|
||||
before. A high manual share means people are doing the work. */}
|
||||
{data.totalAutomaticResolutions + data.totalManualResolutions > 0 && (
|
||||
<Stack gap={theme.spacing(LAYOUT.XS)}>
|
||||
<CardSegmentedBar
|
||||
segments={[
|
||||
{
|
||||
key: "automatic",
|
||||
value: data.totalAutomaticResolutions,
|
||||
color: theme.palette.success.main,
|
||||
label: `${t("pages.dashboard.cards.incidentStats.automatic")} — ${data.totalAutomaticResolutions}`,
|
||||
},
|
||||
{
|
||||
key: "manual",
|
||||
value: data.totalManualResolutions,
|
||||
color: theme.palette.warning.main,
|
||||
label: `${t("pages.dashboard.cards.incidentStats.manual")} — ${data.totalManualResolutions}`,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<CardStatLine
|
||||
label={t("pages.dashboard.cards.incidentStats.resolved")}
|
||||
value={t("pages.dashboard.cards.incidentStats.autoManual", {
|
||||
automatic: data.totalAutomaticResolutions,
|
||||
manual: data.totalManualResolutions,
|
||||
})}
|
||||
/>
|
||||
</Stack>
|
||||
)}
|
||||
<Stack gap={theme.spacing(LAYOUT.XS)}>
|
||||
<CardStatLine
|
||||
label={t("pages.dashboard.cards.incidentStats.avgResolution")}
|
||||
value={t("pages.dashboard.cards.incidentStats.hours", {
|
||||
hours: data.avgResolutionTimeHours.toFixed(1),
|
||||
})}
|
||||
/>
|
||||
{data.topMonitor?.monitorName && (
|
||||
<CardStatLine
|
||||
label={t("pages.dashboard.cards.incidentStats.mostIncidents")}
|
||||
value={`${data.topMonitor.monitorName} (${data.topMonitor.incidentCount})`}
|
||||
/>
|
||||
)}
|
||||
</Stack>
|
||||
</Stack>
|
||||
)}
|
||||
</DashboardCard>
|
||||
);
|
||||
};
|
||||
|
||||
export const NotificationChannelsCard = () => {
|
||||
const theme = useTheme();
|
||||
const { t } = useTranslation();
|
||||
const { data, isLoading, isValidating, error } =
|
||||
useGet<Notification[]>("/notifications/team");
|
||||
|
||||
// The response also carries accessToken and accountSid. Only `type` is read
|
||||
// here — credential fields must never reach the DOM.
|
||||
const byType = useMemo(() => {
|
||||
const counts = new Map<string, number>();
|
||||
for (const notification of data ?? []) {
|
||||
counts.set(notification.type, (counts.get(notification.type) ?? 0) + 1);
|
||||
}
|
||||
return [...counts.entries()].sort((a, b) => b[1] - a[1]);
|
||||
}, [data]);
|
||||
|
||||
return (
|
||||
<DashboardCard
|
||||
title={t("pages.dashboard.cards.notificationChannels.title")}
|
||||
to="/notifications"
|
||||
isLoading={isLoading && !data}
|
||||
error={error}
|
||||
isStale={isValidating && Boolean(data)}
|
||||
>
|
||||
{byType.length === 0 ? (
|
||||
<CardMessage text={t("pages.dashboard.cards.notificationChannels.empty")} />
|
||||
) : (
|
||||
<Stack gap={theme.spacing(LAYOUT.XS)}>
|
||||
{byType.map(([type, count]) => (
|
||||
<CardStatLine
|
||||
key={type}
|
||||
label={type}
|
||||
value={String(count)}
|
||||
/>
|
||||
))}
|
||||
</Stack>
|
||||
)}
|
||||
</DashboardCard>
|
||||
);
|
||||
};
|
||||
|
||||
export const MaintenanceCard = () => {
|
||||
const theme = useTheme();
|
||||
const { t } = useTranslation();
|
||||
const { data, isLoading, isValidating, error } = useGet<{
|
||||
maintenanceWindows: MaintenanceWindow[];
|
||||
maintenanceWindowCount: number;
|
||||
}>("/maintenance-window/team?page=0&rowsPerPage=0");
|
||||
|
||||
// `active` is a user on/off flag, not "running now" — compare the window
|
||||
// client-side. repeat > 0 means recurring, so `end` may sit in the past for
|
||||
// a window that is currently live.
|
||||
const { running, next } = useMemo(() => {
|
||||
const now = Date.now();
|
||||
const windows = (data?.maintenanceWindows ?? []).filter((entry) => entry.active);
|
||||
const live = windows.filter((entry) => {
|
||||
const start = new Date(entry.start).getTime();
|
||||
const end = new Date(entry.end).getTime();
|
||||
return start <= now && (now <= end || entry.repeat > 0);
|
||||
});
|
||||
const upcoming = windows
|
||||
.filter((entry) => new Date(entry.start).getTime() > now)
|
||||
.sort((a, b) => new Date(a.start).getTime() - new Date(b.start).getTime());
|
||||
return { running: live.length, next: upcoming[0] ?? null };
|
||||
}, [data]);
|
||||
|
||||
return (
|
||||
<DashboardCard
|
||||
title={t("pages.dashboard.cards.maintenance.title")}
|
||||
to="/maintenance"
|
||||
isLoading={isLoading && !data}
|
||||
error={error}
|
||||
isStale={isValidating && Boolean(data)}
|
||||
>
|
||||
{!data || data.maintenanceWindows.length === 0 ? (
|
||||
<CardMessage text={t("pages.dashboard.cards.maintenance.empty")} />
|
||||
) : (
|
||||
<Stack gap={theme.spacing(LAYOUT.SM)}>
|
||||
<CardFigure
|
||||
value={String(running)}
|
||||
caption={t("pages.dashboard.cards.maintenance.runningNow")}
|
||||
/>
|
||||
{next && (
|
||||
<CardStatLine
|
||||
label={t("pages.dashboard.cards.maintenance.next")}
|
||||
value={formatTimestamp(next.start)}
|
||||
/>
|
||||
)}
|
||||
</Stack>
|
||||
)}
|
||||
</DashboardCard>
|
||||
);
|
||||
};
|
||||
|
||||
export const StatusPagesCard = () => {
|
||||
const theme = useTheme();
|
||||
const { t } = useTranslation();
|
||||
const { data, isLoading, isValidating, error } =
|
||||
useGet<StatusPage[]>("/status-page/team");
|
||||
|
||||
return (
|
||||
<DashboardCard
|
||||
title={t("pages.dashboard.cards.statusPages.title")}
|
||||
to="/status"
|
||||
isLoading={isLoading && !data}
|
||||
error={error}
|
||||
isStale={isValidating && Boolean(data)}
|
||||
>
|
||||
{!data || data.length === 0 ? (
|
||||
<CardMessage text={t("pages.dashboard.cards.statusPages.empty")} />
|
||||
) : (
|
||||
<Stack gap={theme.spacing(LAYOUT.XS)}>
|
||||
{data.map((page) => (
|
||||
<CardRow
|
||||
key={page.id}
|
||||
to={`/status/${page.url}`}
|
||||
>
|
||||
<Dot
|
||||
color={
|
||||
page.isPublished
|
||||
? theme.palette.success.light
|
||||
: theme.palette.text.secondary
|
||||
}
|
||||
size="md"
|
||||
/>
|
||||
<CardRowLabel
|
||||
primary={page.companyName}
|
||||
secondary={t("pages.dashboard.cards.statusPages.monitorCount", {
|
||||
count: page.monitors.length,
|
||||
})}
|
||||
/>
|
||||
<Typography
|
||||
color={theme.palette.text.secondary}
|
||||
flexShrink={0}
|
||||
>
|
||||
{page.isPublished
|
||||
? t("pages.dashboard.cards.statusPages.published")
|
||||
: t("pages.dashboard.cards.statusPages.draft")}
|
||||
</Typography>
|
||||
</CardRow>
|
||||
))}
|
||||
</Stack>
|
||||
)}
|
||||
</DashboardCard>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,159 @@
|
||||
import Stack from "@mui/material/Stack";
|
||||
import Box from "@mui/material/Box";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import CircularProgress from "@mui/material/CircularProgress";
|
||||
import Skeleton from "@mui/material/Skeleton";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import { Link as RouterLink } from "react-router-dom";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import { BaseBox } from "@/Components/design-elements";
|
||||
import { LAYOUT } from "@/Utils/Theme/constants";
|
||||
import { useCardSlot } from "./CardSlotContext";
|
||||
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
// Control height plus the header's vertical padding, so a card with no action
|
||||
// still lines up with one that has a button in its header.
|
||||
const HEADER_MIN_HEIGHT = 44;
|
||||
const SKELETON_ROW_HEIGHT = 20;
|
||||
|
||||
interface DashboardCardProps {
|
||||
title: string;
|
||||
/** Where the title links to — the page this card belongs to. */
|
||||
to?: string;
|
||||
/** Rendered at the right of the header: a count, an average, a filter. */
|
||||
action?: ReactNode;
|
||||
isLoading?: boolean;
|
||||
error?: unknown;
|
||||
/** Dimmed rather than blanked while a refresh is in flight over stale data. */
|
||||
isStale?: boolean;
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export const DashboardCard = ({
|
||||
title,
|
||||
to,
|
||||
action,
|
||||
isLoading,
|
||||
error,
|
||||
isStale,
|
||||
children,
|
||||
}: DashboardCardProps) => {
|
||||
const theme = useTheme();
|
||||
const { t } = useTranslation();
|
||||
const slot = useCardSlot();
|
||||
|
||||
return (
|
||||
<BaseBox
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
height="100%"
|
||||
sx={{
|
||||
overflow: "hidden",
|
||||
"&:hover .dashboard-card-slot": {
|
||||
opacity: 1,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Stack
|
||||
direction="row"
|
||||
alignItems="center"
|
||||
justifyContent="space-between"
|
||||
gap={theme.spacing(LAYOUT.SM)}
|
||||
px={theme.spacing(LAYOUT.MD)}
|
||||
py={theme.spacing(LAYOUT.SM)}
|
||||
borderBottom={`1px solid ${theme.palette.divider}`}
|
||||
minHeight={HEADER_MIN_HEIGHT}
|
||||
>
|
||||
<Typography
|
||||
{...(to ? { component: RouterLink, to } : {})}
|
||||
fontWeight={500}
|
||||
color={theme.palette.text.primary}
|
||||
sx={{
|
||||
textDecoration: "none",
|
||||
...(to && {
|
||||
"&:hover": { color: theme.palette.primary.main },
|
||||
}),
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</Typography>
|
||||
<Stack
|
||||
direction="row"
|
||||
alignItems="center"
|
||||
gap={theme.spacing(LAYOUT.SM)}
|
||||
flexShrink={0}
|
||||
position="relative"
|
||||
>
|
||||
{isStale && (
|
||||
<CircularProgress
|
||||
size={16}
|
||||
color="primary"
|
||||
/>
|
||||
)}
|
||||
{action && <Box>{action}</Box>}
|
||||
{slot && (
|
||||
<Box
|
||||
className="dashboard-card-slot"
|
||||
sx={{
|
||||
opacity: 0.3,
|
||||
transition: "opacity 0.15s ease",
|
||||
}}
|
||||
>
|
||||
{slot}
|
||||
</Box>
|
||||
)}
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Box
|
||||
flex={1}
|
||||
p={theme.spacing(LAYOUT.MD)}
|
||||
sx={{
|
||||
...(isStale && { opacity: 0.5, transition: "opacity 0.2s ease" }),
|
||||
}}
|
||||
>
|
||||
{isLoading ? (
|
||||
<CardSkeleton />
|
||||
) : error ? (
|
||||
<CardMessage text={t("pages.dashboard.card.error")} />
|
||||
) : (
|
||||
children
|
||||
)}
|
||||
</Box>
|
||||
</BaseBox>
|
||||
);
|
||||
};
|
||||
|
||||
/** Placeholder rows, sized to the row list most cards render. */
|
||||
export const CardSkeleton = ({ rows = 3 }: { rows?: number }) => {
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<Stack gap={theme.spacing(LAYOUT.SM)}>
|
||||
{Array.from({ length: rows }).map((_, index) => (
|
||||
<Skeleton
|
||||
key={index}
|
||||
variant="rounded"
|
||||
height={SKELETON_ROW_HEIGHT}
|
||||
width={index === rows - 1 ? "60%" : "100%"}
|
||||
/>
|
||||
))}
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
/** The quiet one-line state a healthy card collapses to. */
|
||||
export const CardMessage = ({ text, action }: { text: string; action?: ReactNode }) => {
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<Stack
|
||||
direction="row"
|
||||
alignItems="center"
|
||||
justifyContent="space-between"
|
||||
gap={theme.spacing(LAYOUT.SM)}
|
||||
>
|
||||
<Typography color={theme.palette.text.secondary}>{text}</Typography>
|
||||
{action}
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,72 @@
|
||||
import Box from "@mui/material/Box";
|
||||
import { useMemo } from "react";
|
||||
|
||||
import type { CheckSnapshot } from "@/Types/Check";
|
||||
|
||||
const VIEWBOX_WIDTH = 100;
|
||||
// The svg renders at its viewBox height, so one constant serves both.
|
||||
const VIEWBOX_HEIGHT = 24;
|
||||
// Matches the 1.5 stroke the shared Icon component uses.
|
||||
const STROKE_WIDTH = 1.5;
|
||||
|
||||
/**
|
||||
* Response times as a bare polyline. Deliberately axis-free and label-free —
|
||||
* at this size the shape is the only readable signal.
|
||||
*
|
||||
* `checks` arrives oldest-first, which is already left-to-right reading order.
|
||||
*/
|
||||
export const Sparkline = ({
|
||||
checks,
|
||||
color,
|
||||
}: {
|
||||
checks: CheckSnapshot[];
|
||||
color: string;
|
||||
}) => {
|
||||
const points = useMemo(() => {
|
||||
const values = checks
|
||||
.map((check) => check.responseTime)
|
||||
.filter((value): value is number => typeof value === "number");
|
||||
|
||||
if (values.length < 2) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const max = Math.max(...values);
|
||||
const min = Math.min(...values);
|
||||
const span = max - min || 1;
|
||||
|
||||
return values
|
||||
.map((value, index) => {
|
||||
const x = (index / (values.length - 1)) * VIEWBOX_WIDTH;
|
||||
const y = VIEWBOX_HEIGHT - ((value - min) / span) * VIEWBOX_HEIGHT;
|
||||
return `${x.toFixed(1)},${y.toFixed(1)}`;
|
||||
})
|
||||
.join(" ");
|
||||
}, [checks]);
|
||||
|
||||
if (!points) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Box
|
||||
component="svg"
|
||||
viewBox={`0 0 ${VIEWBOX_WIDTH} ${VIEWBOX_HEIGHT}`}
|
||||
preserveAspectRatio="none"
|
||||
aria-hidden="true"
|
||||
width="100%"
|
||||
height={VIEWBOX_HEIGHT}
|
||||
display="block"
|
||||
>
|
||||
<polyline
|
||||
points={points}
|
||||
fill="none"
|
||||
stroke={color}
|
||||
strokeWidth={STROKE_WIDTH}
|
||||
strokeLinejoin="round"
|
||||
strokeLinecap="round"
|
||||
vectorEffect="non-scaling-stroke"
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,84 @@
|
||||
import type { ComponentType } from "react";
|
||||
|
||||
// The 12-column grid the dashboard lays cards out on.
|
||||
//
|
||||
// Every card is currently half-width, so they pair up down the page and the
|
||||
// grid reads as one system. Full width stays in the type for a card whose
|
||||
// content genuinely needs it. Width is declared per card type in code and is
|
||||
// never a user setting.
|
||||
export const CardWidths = [6, 12] as const;
|
||||
export type CardWidth = (typeof CardWidths)[number];
|
||||
|
||||
export const GRID_COLUMNS = 12;
|
||||
|
||||
// Picker groups mirror the sidebar sections: you look for a card where you
|
||||
// look for the feature it belongs to.
|
||||
export const CardGroups = [
|
||||
"uptime",
|
||||
"infrastructure",
|
||||
"incidents",
|
||||
"notifications",
|
||||
"maintenance",
|
||||
"statusPages",
|
||||
"checks",
|
||||
"logs",
|
||||
"settings",
|
||||
] as const;
|
||||
export type CardGroup = (typeof CardGroups)[number];
|
||||
|
||||
// The Containers card (CARD-SPECS.md #11) is deliberately absent: it needs
|
||||
// `containerSummary` on the check snapshot, which arrives with the Docker
|
||||
// monitoring work. Add it here once that lands on develop.
|
||||
export const CardIds = [
|
||||
"monitorStatus",
|
||||
"currentlyDown",
|
||||
"slowestMonitors",
|
||||
"lowestUptime",
|
||||
"monitorsByType",
|
||||
"monitorsByGroup",
|
||||
"recentIncidents",
|
||||
"incidentStats",
|
||||
"notificationChannels",
|
||||
"maintenance",
|
||||
"statusPages",
|
||||
"failedChecks",
|
||||
"busiestServers",
|
||||
"checkmateServer",
|
||||
"checksOnSchedule",
|
||||
"recentErrors",
|
||||
"team",
|
||||
] as const;
|
||||
export type CardId = (typeof CardIds)[number];
|
||||
|
||||
export interface CardDefinition {
|
||||
id: CardId;
|
||||
/** i18n key fragment under pages.dashboard.cards.<key>. */
|
||||
key: string;
|
||||
group: CardGroup;
|
||||
width: CardWidth;
|
||||
/** Hidden from the page and absent from the picker for non-admins. */
|
||||
adminOnly?: boolean;
|
||||
component: ComponentType;
|
||||
}
|
||||
|
||||
// The cards a fresh dashboard starts with. Chosen so a brand new install still
|
||||
// shows something real: Checkmate server works with zero monitors.
|
||||
// Ordered so the declared widths pair into full rows: a card left alone in a
|
||||
// row is stretched to fill it, so 8- and 4-wide cards are kept adjacent.
|
||||
export const DEFAULT_CARD_IDS: readonly CardId[] = [
|
||||
"monitorStatus",
|
||||
"currentlyDown",
|
||||
"failedChecks",
|
||||
"monitorsByType",
|
||||
"recentIncidents",
|
||||
"checkmateServer",
|
||||
];
|
||||
|
||||
export const DASHBOARD_CARDS_STORAGE_KEY = "checkmate-dashboard-cards";
|
||||
|
||||
/**
|
||||
* Poll rates, in ms. Monitor and server figures move continuously; the log ring
|
||||
* buffer rotates fast but is expensive to re-read, so it is polled slowly.
|
||||
*/
|
||||
export const REFRESH_INTERVAL_MS = 30000;
|
||||
export const SLOW_REFRESH_INTERVAL_MS = 60000;
|
||||
@@ -0,0 +1,8 @@
|
||||
import type { Monitor } from "@/Types/Monitor";
|
||||
|
||||
/**
|
||||
* `recentChecks` is oldest-first — the server appends each snapshot with
|
||||
* `$push … $slice: -N` — so the newest retained check is the last element.
|
||||
*/
|
||||
export const latestCheck = (monitor: Monitor) =>
|
||||
monitor.recentChecks?.[monitor.recentChecks.length - 1];
|
||||
@@ -1,54 +0,0 @@
|
||||
import Box from "@mui/material/Box";
|
||||
import Stack from "@mui/material/Stack";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import { LAYOUT } from "@/Utils/Theme/constants";
|
||||
import { typographyLevels } from "@/Utils/Theme/Palette";
|
||||
|
||||
interface DashboardCardProps {
|
||||
title: string;
|
||||
topRight?: React.ReactNode;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export const DashboardCard = ({ title, topRight, children }: DashboardCardProps) => {
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<Box
|
||||
bgcolor={theme.palette.background.paper}
|
||||
border={1}
|
||||
borderColor={theme.palette.divider}
|
||||
borderRadius={`${theme.shape.borderRadius}px`}
|
||||
padding={theme.spacing(LAYOUT.MD)}
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
gap={theme.spacing(LAYOUT.SM)}
|
||||
height="100%"
|
||||
boxSizing="border-box"
|
||||
>
|
||||
<Stack
|
||||
direction="row"
|
||||
alignItems="center"
|
||||
justifyContent="space-between"
|
||||
>
|
||||
<Typography
|
||||
fontSize={typographyLevels.m}
|
||||
fontWeight={500}
|
||||
color={theme.palette.text.primary}
|
||||
>
|
||||
{title}
|
||||
</Typography>
|
||||
{topRight && (
|
||||
<Typography
|
||||
fontSize={typographyLevels.s}
|
||||
color={theme.palette.text.secondary}
|
||||
>
|
||||
{topRight}
|
||||
</Typography>
|
||||
)}
|
||||
</Stack>
|
||||
{children}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
@@ -1,69 +0,0 @@
|
||||
import { useState } from "react";
|
||||
import Stack from "@mui/material/Stack";
|
||||
import FormControlLabel from "@mui/material/FormControlLabel";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Checkbox, Dialog } from "@/Components/inputs";
|
||||
import { type DashboardCardKey, dashboardCardKeys } from "@/Types/Dashboard";
|
||||
|
||||
interface EditCardsModalProps {
|
||||
open: boolean;
|
||||
visibleCards: Set<DashboardCardKey>;
|
||||
onClose: () => void;
|
||||
onSave: (visibleCards: Set<DashboardCardKey>) => void;
|
||||
}
|
||||
|
||||
export const EditCardsModal = ({
|
||||
open,
|
||||
visibleCards,
|
||||
onClose,
|
||||
onSave,
|
||||
}: EditCardsModalProps) => {
|
||||
const { t } = useTranslation();
|
||||
const [draft, setDraft] = useState<Set<DashboardCardKey>>(new Set(visibleCards));
|
||||
|
||||
const handleClose = () => {
|
||||
setDraft(new Set(visibleCards));
|
||||
onClose();
|
||||
};
|
||||
|
||||
const handleToggle = (key: DashboardCardKey) => {
|
||||
setDraft((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(key)) {
|
||||
next.delete(key);
|
||||
} else {
|
||||
next.add(key);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open={open}
|
||||
title={t("pages.dashboard.editCardsModal.title")}
|
||||
content={t("pages.dashboard.editCardsModal.description")}
|
||||
onCancel={handleClose}
|
||||
onConfirm={() => onSave(draft)}
|
||||
confirmText={t("pages.dashboard.editCardsModal.done")}
|
||||
maxWidth="xs"
|
||||
fullWidth
|
||||
>
|
||||
<Stack>
|
||||
{dashboardCardKeys.map((key: DashboardCardKey) => (
|
||||
<FormControlLabel
|
||||
key={key}
|
||||
label={t(`pages.dashboard.cards.${key}`)}
|
||||
control={
|
||||
<Checkbox
|
||||
checked={draft.has(key)}
|
||||
disabled={draft.has(key) && draft.size === 1}
|
||||
onChange={() => handleToggle(key)}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</Stack>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
@@ -1,28 +0,0 @@
|
||||
import { LAYOUT } from "@/Utils/Theme/constants";
|
||||
import Box from "@mui/material/Box";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
|
||||
interface ProgressBarProps {
|
||||
fillRatio: number;
|
||||
}
|
||||
|
||||
export const ProgressBar = ({ fillRatio }: ProgressBarProps) => {
|
||||
const theme = useTheme();
|
||||
const clamped = Math.min(1, Math.max(0, fillRatio));
|
||||
|
||||
return (
|
||||
<Box
|
||||
height={theme.spacing(LAYOUT.XS)}
|
||||
borderRadius={theme.shape.borderRadius}
|
||||
bgcolor={theme.palette.action.disabledBackground}
|
||||
overflow="hidden"
|
||||
>
|
||||
<Box
|
||||
height="100%"
|
||||
width={`${clamped * 100}%`}
|
||||
borderRadius={theme.shape.borderRadius}
|
||||
bgcolor={theme.palette.primary.main}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
@@ -1,42 +0,0 @@
|
||||
import Stack from "@mui/material/Stack";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import { typographyLevels } from "@/Utils/Theme/Palette";
|
||||
import { SPACING } from "@/Utils/Theme/constants";
|
||||
import { ProgressBar } from "@/Pages/Dashboard/components/ProgressBar";
|
||||
|
||||
interface BarRowProps {
|
||||
label: string;
|
||||
value: string;
|
||||
fillRatio: number;
|
||||
valueColor?: string;
|
||||
}
|
||||
|
||||
export const BarRow = ({ label, value, fillRatio, valueColor }: BarRowProps) => {
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<Stack gap={theme.spacing(SPACING.LG)}>
|
||||
<Stack
|
||||
direction="row"
|
||||
justifyContent="space-between"
|
||||
alignItems="center"
|
||||
>
|
||||
<Typography
|
||||
fontSize={typographyLevels.m}
|
||||
color={theme.palette.text.primary}
|
||||
>
|
||||
{label}
|
||||
</Typography>
|
||||
<Typography
|
||||
fontSize={typographyLevels.m}
|
||||
color={valueColor ?? theme.palette.primary.main}
|
||||
fontWeight={500}
|
||||
>
|
||||
{value}
|
||||
</Typography>
|
||||
</Stack>
|
||||
<ProgressBar fillRatio={fillRatio} />
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
@@ -1,58 +0,0 @@
|
||||
import Stack from "@mui/material/Stack";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import { DashboardCard } from "@/Pages/Dashboard/components/DashboardCard";
|
||||
import { ProgressBar } from "@/Pages/Dashboard/components/ProgressBar";
|
||||
import { typographyLevels } from "@/Utils/Theme/Palette";
|
||||
import { SPACING } from "@/Utils/Theme/constants";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import type { MonitorsSummary } from "@/Types/Monitor";
|
||||
|
||||
interface MonitorStatusCardProps {
|
||||
summary: MonitorsSummary | null;
|
||||
}
|
||||
|
||||
export const MonitorStatusCard = ({ summary }: MonitorStatusCardProps) => {
|
||||
const theme = useTheme();
|
||||
const { t } = useTranslation();
|
||||
|
||||
const up = summary?.upMonitors ?? 0;
|
||||
const total = summary?.totalMonitors ?? 0;
|
||||
const ratio = total > 0 ? up / total : 0;
|
||||
|
||||
return (
|
||||
<DashboardCard title={t("pages.dashboard.cards.monitorStatus")}>
|
||||
{total === 0 ? (
|
||||
<Typography
|
||||
fontSize={typographyLevels.m}
|
||||
color={theme.palette.text.disabled}
|
||||
>
|
||||
{t("pages.dashboard.noData")}
|
||||
</Typography>
|
||||
) : (
|
||||
<Stack gap={theme.spacing(SPACING.SM)}>
|
||||
<Stack
|
||||
direction="row"
|
||||
alignItems="baseline"
|
||||
gap={theme.spacing(SPACING.XS)}
|
||||
>
|
||||
<Typography
|
||||
fontSize={typographyLevels.xxl}
|
||||
fontWeight={500}
|
||||
color={theme.palette.text.primary}
|
||||
>
|
||||
{up}
|
||||
</Typography>
|
||||
<Typography
|
||||
fontSize={typographyLevels.m}
|
||||
color={theme.palette.text.secondary}
|
||||
>
|
||||
{t("pages.dashboard.monitorStatus.ofUp", { total })}
|
||||
</Typography>
|
||||
</Stack>
|
||||
<ProgressBar fillRatio={ratio} />
|
||||
</Stack>
|
||||
)}
|
||||
</DashboardCard>
|
||||
);
|
||||
};
|
||||
@@ -1,46 +0,0 @@
|
||||
import Stack from "@mui/material/Stack";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import { DashboardCard } from "@/Pages/Dashboard/components/DashboardCard";
|
||||
import { BarRow } from "@/Pages/Dashboard/components/cards/BarRow";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import type { MonitorTypeCount } from "@/Types/Monitor";
|
||||
import { getMonitorTypeLabel } from "@/Types/Monitor";
|
||||
import { LAYOUT } from "@/Utils/Theme/constants";
|
||||
import { typographyLevels } from "@/Utils/Theme/Palette";
|
||||
|
||||
interface MonitorsByTypeCardProps {
|
||||
monitorsByType: MonitorTypeCount[];
|
||||
}
|
||||
|
||||
export const MonitorsByTypeCard = ({ monitorsByType }: MonitorsByTypeCardProps) => {
|
||||
const { t } = useTranslation();
|
||||
const theme = useTheme();
|
||||
|
||||
const maxCount = monitorsByType[0]?.count ?? 1;
|
||||
|
||||
return (
|
||||
<DashboardCard title={t("pages.dashboard.cards.monitorsByType")}>
|
||||
{monitorsByType.length === 0 ? (
|
||||
<Typography
|
||||
fontSize={typographyLevels.m}
|
||||
color={theme.palette.text.disabled}
|
||||
>
|
||||
{t("pages.dashboard.noData")}
|
||||
</Typography>
|
||||
) : (
|
||||
<Stack gap={theme.spacing(LAYOUT.SM)}>
|
||||
{monitorsByType.map(({ type, count }) => (
|
||||
<BarRow
|
||||
key={type}
|
||||
label={getMonitorTypeLabel(type, t)}
|
||||
value={String(count)}
|
||||
fillRatio={count / maxCount}
|
||||
valueColor={theme.palette.text.primary}
|
||||
/>
|
||||
))}
|
||||
</Stack>
|
||||
)}
|
||||
</DashboardCard>
|
||||
);
|
||||
};
|
||||
@@ -1,95 +1,85 @@
|
||||
import { Fragment, useMemo, useState, type ReactNode } from "react";
|
||||
import Box from "@mui/material/Box";
|
||||
import Stack from "@mui/material/Stack";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
import { useState } from "react";
|
||||
import { LayoutGrid } from "lucide-react";
|
||||
|
||||
import { BasePage } from "@/Components/design-elements/BasePage";
|
||||
import { BasePage, EmptyState, Icon } from "@/Components/design-elements";
|
||||
import { Button } from "@/Components/inputs";
|
||||
import { LAYOUT } from "@/Utils/Theme/constants";
|
||||
import { useMonitorListController } from "@/Hooks/useMonitorListController";
|
||||
import { MonitorTypes, type MonitorTypeCount } from "@/Types/Monitor";
|
||||
import { setDashboardVisibleCards } from "@/Features/UI/uiSlice";
|
||||
import type { RootState, AppDispatch } from "@/store";
|
||||
|
||||
import { MonitorStatusCard } from "@/Pages/Dashboard/components/cards/MonitorStatusCard";
|
||||
import { MonitorsByTypeCard } from "@/Pages/Dashboard/components/cards/MonitorsByTypeCard";
|
||||
import { EditCardsModal } from "@/Pages/Dashboard/components/EditCardsModal";
|
||||
import { type DashboardCardKey, dashboardCardKeys } from "@/Types/Dashboard";
|
||||
import { CardGrid } from "./Components/CardGrid";
|
||||
import { CardPicker } from "./Components/CardPicker";
|
||||
import { MonitorsContext, useMonitorsRequest } from "./useDashboardData";
|
||||
import { useCardSelection } from "./useCardSelection";
|
||||
|
||||
const Dashboard = () => {
|
||||
const theme = useTheme();
|
||||
const { t } = useTranslation();
|
||||
const dispatch = useDispatch<AppDispatch>();
|
||||
const [editOpen, setEditOpen] = useState(false);
|
||||
const visibleCardsList = useSelector(
|
||||
(state: RootState) => state.ui.dashboardVisibleCards
|
||||
);
|
||||
const visibleCards = useMemo(() => new Set(visibleCardsList), [visibleCardsList]);
|
||||
|
||||
const { monitors, summary } = useMonitorListController({
|
||||
types: [...MonitorTypes],
|
||||
checksLimit: 1,
|
||||
refreshInterval: 30000,
|
||||
rowsPerPageTable: "monitors",
|
||||
rowsPerPageDefault: 100,
|
||||
});
|
||||
|
||||
const monitorsByType = useMemo<MonitorTypeCount[]>(() => {
|
||||
const countMap = new Map<MonitorTypeCount["type"], number>();
|
||||
(monitors ?? []).forEach((m) =>
|
||||
countMap.set(m.type, (countMap.get(m.type) ?? 0) + 1)
|
||||
);
|
||||
return [...countMap.entries()]
|
||||
.map(([type, count]) => ({ type, count }))
|
||||
.sort((a, b) => b.count - a.count);
|
||||
}, [monitors]);
|
||||
|
||||
const cardComponents: Record<DashboardCardKey, ReactNode> = {
|
||||
monitorStatus: <MonitorStatusCard summary={summary} />,
|
||||
monitorsByType: <MonitorsByTypeCard monitorsByType={monitorsByType} />,
|
||||
};
|
||||
const monitorsRequest = useMonitorsRequest();
|
||||
const {
|
||||
cards,
|
||||
available,
|
||||
selected,
|
||||
addCard,
|
||||
removeCard,
|
||||
reorderCards,
|
||||
resetCards,
|
||||
selectAll,
|
||||
deselectAll,
|
||||
allSelected,
|
||||
} = useCardSelection();
|
||||
const [isPickerOpen, setIsPickerOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<BasePage headerKey="dashboard">
|
||||
<Stack gap={theme.spacing(LAYOUT.SM)}>
|
||||
<Stack
|
||||
direction="row"
|
||||
justifyContent="flex-end"
|
||||
>
|
||||
<Button
|
||||
variant="outlined"
|
||||
size="small"
|
||||
onClick={() => setEditOpen(true)}
|
||||
<MonitorsContext.Provider value={monitorsRequest}>
|
||||
<BasePage headerKey="dashboard">
|
||||
<Stack gap={theme.spacing(LAYOUT.MD)}>
|
||||
<Stack
|
||||
direction="row"
|
||||
justifyContent="flex-end"
|
||||
>
|
||||
{t("pages.dashboard.editCards")}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="secondary"
|
||||
onClick={() => setIsPickerOpen(true)}
|
||||
startIcon={
|
||||
<Icon
|
||||
icon={LayoutGrid}
|
||||
size={16}
|
||||
/>
|
||||
}
|
||||
>
|
||||
{t("pages.dashboard.picker.trigger")}
|
||||
</Button>
|
||||
</Stack>
|
||||
{cards.length === 0 ? (
|
||||
<EmptyState
|
||||
title={t("pages.dashboard.empty.title")}
|
||||
description={t("pages.dashboard.empty.description")}
|
||||
actionText={t("pages.dashboard.picker.trigger")}
|
||||
onAction={() => setIsPickerOpen(true)}
|
||||
/>
|
||||
) : (
|
||||
<CardGrid
|
||||
cards={cards}
|
||||
onReorder={reorderCards}
|
||||
/>
|
||||
)}
|
||||
</Stack>
|
||||
|
||||
<Box
|
||||
display="grid"
|
||||
gridTemplateColumns={{ xs: "1fr", md: "1fr 1fr" }}
|
||||
gap={theme.spacing(LAYOUT.MD)}
|
||||
>
|
||||
{dashboardCardKeys
|
||||
.filter((key) => visibleCards.has(key))
|
||||
.map((key) => (
|
||||
<Fragment key={key}>{cardComponents[key]}</Fragment>
|
||||
))}
|
||||
</Box>
|
||||
</Stack>
|
||||
|
||||
<EditCardsModal
|
||||
open={editOpen}
|
||||
visibleCards={visibleCards}
|
||||
onClose={() => setEditOpen(false)}
|
||||
onSave={(next) => {
|
||||
dispatch(setDashboardVisibleCards([...next]));
|
||||
setEditOpen(false);
|
||||
}}
|
||||
/>
|
||||
</BasePage>
|
||||
<CardPicker
|
||||
open={isPickerOpen}
|
||||
available={available}
|
||||
selected={selected}
|
||||
allSelected={allSelected}
|
||||
onAdd={addCard}
|
||||
onRemove={removeCard}
|
||||
onSelectAll={selectAll}
|
||||
onDeselectAll={deselectAll}
|
||||
onReset={resetCards}
|
||||
onClose={() => setIsPickerOpen(false)}
|
||||
/>
|
||||
</BasePage>
|
||||
</MonitorsContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
import type { CardDefinition } from "./cards";
|
||||
|
||||
export interface PlacedCard {
|
||||
card: CardDefinition;
|
||||
/** Columns rendered — currently always the declared width. */
|
||||
renderedWidth: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Packs cards into rows of GRID_COLUMNS.
|
||||
*
|
||||
* With a single body width this is a straight pass-through: two halves fill a
|
||||
* row exactly, so no card is ever stretched to close a gap.
|
||||
*
|
||||
* An odd number of cards leaves the last one alone on its row. It keeps its
|
||||
* declared width rather than being promoted to full: widening one card to fill
|
||||
* the row makes it look more important than it is, and an odd count is a
|
||||
* property of the selection, not something the layout should hide.
|
||||
*/
|
||||
export const layoutCards = (cards: CardDefinition[]): PlacedCard[] =>
|
||||
cards.map((card) => ({ card, renderedWidth: card.width }));
|
||||
@@ -0,0 +1,161 @@
|
||||
import { MonitorStatusCard } from "./Components/Cards/MonitorStatusCard";
|
||||
import { CurrentlyDownCard } from "./Components/Cards/CurrentlyDownCard";
|
||||
import { FailedChecksCard } from "./Components/Cards/FailedChecksCard";
|
||||
import { RecentIncidentsCard } from "./Components/Cards/RecentIncidentsCard";
|
||||
import { MonitorsByTypeCard } from "./Components/Cards/MonitorsByTypeCard";
|
||||
import { MonitorsByGroupCard } from "./Components/Cards/MonitorsByGroupCard";
|
||||
import { CheckmateServerCard } from "./Components/Cards/CheckmateServerCard";
|
||||
import { BusiestServersCard } from "./Components/Cards/BusiestServersCard";
|
||||
import { SlowestMonitorsCard, LowestUptimeCard } from "./Components/Cards/RankingCards";
|
||||
import {
|
||||
IncidentStatsCard,
|
||||
NotificationChannelsCard,
|
||||
MaintenanceCard,
|
||||
StatusPagesCard,
|
||||
} from "./Components/Cards/SummaryCards";
|
||||
import {
|
||||
ChecksOnScheduleCard,
|
||||
RecentErrorsCard,
|
||||
TeamCard,
|
||||
} from "./Components/Cards/AdminCards";
|
||||
|
||||
import type { CardDefinition, CardId } from "./cards";
|
||||
|
||||
// Declared width is the minimum number of columns a card needs. The grid may
|
||||
// stretch the last card of a short row; nothing here is a user setting.
|
||||
//
|
||||
// Order is the render order, and the order the picker lists them in.
|
||||
//
|
||||
// Every card is half-width and pairs up down the page. The grid promotes a
|
||||
// lone trailing card to full width so the page does not end on a ragged half.
|
||||
export const CARD_REGISTRY: CardDefinition[] = [
|
||||
{
|
||||
id: "monitorStatus",
|
||||
key: "monitorStatus",
|
||||
group: "uptime",
|
||||
width: 6,
|
||||
component: MonitorStatusCard,
|
||||
},
|
||||
{
|
||||
id: "currentlyDown",
|
||||
key: "currentlyDown",
|
||||
group: "uptime",
|
||||
width: 6,
|
||||
component: CurrentlyDownCard,
|
||||
},
|
||||
{
|
||||
id: "failedChecks",
|
||||
key: "failedChecks",
|
||||
group: "checks",
|
||||
width: 6,
|
||||
component: FailedChecksCard,
|
||||
},
|
||||
{
|
||||
id: "slowestMonitors",
|
||||
key: "slowestMonitors",
|
||||
group: "uptime",
|
||||
width: 6,
|
||||
component: SlowestMonitorsCard,
|
||||
},
|
||||
{
|
||||
id: "lowestUptime",
|
||||
key: "lowestUptime",
|
||||
group: "uptime",
|
||||
width: 6,
|
||||
component: LowestUptimeCard,
|
||||
},
|
||||
{
|
||||
id: "monitorsByType",
|
||||
key: "monitorsByType",
|
||||
group: "uptime",
|
||||
width: 6,
|
||||
component: MonitorsByTypeCard,
|
||||
},
|
||||
{
|
||||
id: "monitorsByGroup",
|
||||
key: "monitorsByGroup",
|
||||
group: "uptime",
|
||||
width: 6,
|
||||
component: MonitorsByGroupCard,
|
||||
},
|
||||
{
|
||||
id: "busiestServers",
|
||||
key: "busiestServers",
|
||||
group: "infrastructure",
|
||||
width: 6,
|
||||
component: BusiestServersCard,
|
||||
},
|
||||
{
|
||||
id: "recentIncidents",
|
||||
key: "recentIncidents",
|
||||
group: "incidents",
|
||||
width: 6,
|
||||
component: RecentIncidentsCard,
|
||||
},
|
||||
{
|
||||
id: "incidentStats",
|
||||
key: "incidentStats",
|
||||
group: "incidents",
|
||||
width: 6,
|
||||
component: IncidentStatsCard,
|
||||
},
|
||||
{
|
||||
id: "notificationChannels",
|
||||
key: "notificationChannels",
|
||||
group: "notifications",
|
||||
width: 6,
|
||||
component: NotificationChannelsCard,
|
||||
},
|
||||
{
|
||||
id: "maintenance",
|
||||
key: "maintenance",
|
||||
group: "maintenance",
|
||||
width: 6,
|
||||
component: MaintenanceCard,
|
||||
},
|
||||
{
|
||||
id: "statusPages",
|
||||
key: "statusPages",
|
||||
group: "statusPages",
|
||||
width: 6,
|
||||
component: StatusPagesCard,
|
||||
},
|
||||
{
|
||||
id: "checkmateServer",
|
||||
key: "checkmateServer",
|
||||
group: "logs",
|
||||
width: 6,
|
||||
adminOnly: true,
|
||||
component: CheckmateServerCard,
|
||||
},
|
||||
{
|
||||
id: "checksOnSchedule",
|
||||
key: "checksOnSchedule",
|
||||
group: "logs",
|
||||
width: 6,
|
||||
adminOnly: true,
|
||||
component: ChecksOnScheduleCard,
|
||||
},
|
||||
{
|
||||
id: "recentErrors",
|
||||
key: "recentErrors",
|
||||
group: "logs",
|
||||
width: 6,
|
||||
adminOnly: true,
|
||||
component: RecentErrorsCard,
|
||||
},
|
||||
{
|
||||
id: "team",
|
||||
key: "team",
|
||||
group: "settings",
|
||||
width: 6,
|
||||
adminOnly: true,
|
||||
component: TeamCard,
|
||||
},
|
||||
];
|
||||
|
||||
const BY_ID = new Map<CardId, CardDefinition>(
|
||||
CARD_REGISTRY.map((card) => [card.id, card])
|
||||
);
|
||||
|
||||
export const getCard = (id: CardId): CardDefinition | undefined => BY_ID.get(id);
|
||||
@@ -0,0 +1,109 @@
|
||||
import { useCallback, useMemo } from "react";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
|
||||
import { useIsAdmin } from "@/Hooks/useIsAdmin";
|
||||
import { setDashboardCards } from "@/Features/UI/uiSlice";
|
||||
import { CardIds, DEFAULT_CARD_IDS, type CardId } from "./cards";
|
||||
import { CARD_REGISTRY, getCard } from "./registry";
|
||||
|
||||
import type { CardDefinition } from "./cards";
|
||||
import type { RootState } from "@/store";
|
||||
|
||||
const isCardId = (value: unknown): value is CardId =>
|
||||
typeof value === "string" && (CardIds as readonly string[]).includes(value);
|
||||
|
||||
export const useCardSelection = () => {
|
||||
const dispatch = useDispatch();
|
||||
const isAdmin = useIsAdmin();
|
||||
|
||||
// null means the user has never customised; fall back to defaults.
|
||||
const stored = useSelector((state: RootState) => state.ui.dashboardCards);
|
||||
const selected: CardId[] = useMemo(
|
||||
() => (stored !== null ? stored.filter(isCardId) : [...DEFAULT_CARD_IDS]),
|
||||
[stored]
|
||||
);
|
||||
|
||||
const isVisible = useCallback(
|
||||
(card: CardDefinition) => !card.adminOnly || isAdmin,
|
||||
[isAdmin]
|
||||
);
|
||||
|
||||
const cards = useMemo(
|
||||
() =>
|
||||
selected
|
||||
.map(getCard)
|
||||
.filter((card): card is CardDefinition => card !== undefined)
|
||||
.filter(isVisible),
|
||||
[selected, isVisible]
|
||||
);
|
||||
|
||||
const available = useMemo(() => CARD_REGISTRY.filter(isVisible), [isVisible]);
|
||||
|
||||
const addCard = useCallback(
|
||||
(id: CardId) => {
|
||||
if (!selected.includes(id)) dispatch(setDashboardCards([...selected, id]));
|
||||
},
|
||||
[dispatch, selected]
|
||||
);
|
||||
|
||||
const removeCard = useCallback(
|
||||
(id: CardId) => {
|
||||
dispatch(setDashboardCards(selected.filter((cardId) => cardId !== id)));
|
||||
},
|
||||
[dispatch, selected]
|
||||
);
|
||||
|
||||
const resetCards = useCallback(() => dispatch(setDashboardCards(null)), [dispatch]);
|
||||
|
||||
const selectAll = useCallback(
|
||||
() =>
|
||||
dispatch(
|
||||
setDashboardCards(
|
||||
available.map((card) => card.id).filter((id) => !selected.includes(id)).length >
|
||||
0
|
||||
? [...new Set([...selected, ...available.map((card) => card.id)])]
|
||||
: selected
|
||||
)
|
||||
),
|
||||
[dispatch, available, selected]
|
||||
);
|
||||
|
||||
const deselectAll = useCallback(() => dispatch(setDashboardCards([])), [dispatch]);
|
||||
|
||||
/**
|
||||
* Reorders cards based on DnD source/dest indices into the visible `cards` array.
|
||||
* Hidden admin cards keep their stored positions unchanged.
|
||||
*/
|
||||
const reorderCards = useCallback(
|
||||
(sourceIndex: number, destIndex: number) => {
|
||||
const visibleIds = cards.map((c) => c.id);
|
||||
const reordered = [...visibleIds];
|
||||
const [moved] = reordered.splice(sourceIndex, 1);
|
||||
reordered.splice(destIndex, 0, moved);
|
||||
let visibleIdx = 0;
|
||||
dispatch(
|
||||
setDashboardCards(
|
||||
selected.map((cardId) =>
|
||||
visibleIds.includes(cardId) ? reordered[visibleIdx++] : cardId
|
||||
)
|
||||
)
|
||||
);
|
||||
},
|
||||
[dispatch, cards, selected]
|
||||
);
|
||||
|
||||
const allSelected = available.every((card) => selected.includes(card.id));
|
||||
|
||||
return {
|
||||
cards,
|
||||
available,
|
||||
selected,
|
||||
addCard,
|
||||
removeCard,
|
||||
reorderCards,
|
||||
resetCards,
|
||||
selectAll,
|
||||
deselectAll,
|
||||
allSelected,
|
||||
};
|
||||
};
|
||||
@@ -0,0 +1,32 @@
|
||||
import { createContext, useContext } from "react";
|
||||
import { useGet } from "@/Hooks/UseApi";
|
||||
import { MonitorTypes, type MonitorsWithChecksResponse } from "@/Types/Monitor";
|
||||
import { REFRESH_INTERVAL_MS } from "./cards";
|
||||
|
||||
// One request feeds every monitor-derived card, read from context so adding a
|
||||
// card costs no extra call. No rowsPerPage: the dashboard summarises the whole
|
||||
// fleet, and the repository treats its absence as "no limit".
|
||||
const buildMonitorsUrl = () => {
|
||||
const params = new URLSearchParams();
|
||||
MonitorTypes.forEach((type) => params.append("type", type));
|
||||
return `/monitors/team/with-checks?${params.toString()}`;
|
||||
};
|
||||
|
||||
export const useMonitorsRequest = () =>
|
||||
useGet<MonitorsWithChecksResponse>(
|
||||
buildMonitorsUrl(),
|
||||
{},
|
||||
{ refreshInterval: REFRESH_INTERVAL_MS, keepPreviousData: true }
|
||||
);
|
||||
|
||||
export type MonitorsRequest = ReturnType<typeof useMonitorsRequest>;
|
||||
|
||||
export const MonitorsContext = createContext<MonitorsRequest | null>(null);
|
||||
|
||||
export const useMonitors = (): MonitorsRequest => {
|
||||
const context = useContext(MonitorsContext);
|
||||
if (!context) {
|
||||
throw new Error("useMonitors must be used inside the dashboard's MonitorsContext");
|
||||
}
|
||||
return context;
|
||||
};
|
||||
Whitespace-only changes.
@@ -10,7 +10,6 @@ import type { DockerContainerInfo } from "@/Types/Check";
|
||||
|
||||
// Utils
|
||||
import { formatDuration } from "@/Utils/TimeUtils";
|
||||
import { PLACEHOLDER } from "@/Utils/FormatUtils";
|
||||
import { getDockerPalette } from "@/Utils/MonitorUtils";
|
||||
|
||||
export const DockerContainerStatusBoxes = ({
|
||||
@@ -24,9 +23,8 @@ export const DockerContainerStatusBoxes = ({
|
||||
if (!container) return null;
|
||||
|
||||
const { state, restartCount, health } = container;
|
||||
const runningFor = container.startedAt
|
||||
? Date.now() - new Date(container.startedAt).getTime()
|
||||
: undefined;
|
||||
const startedAt = container.startedAt ?? "0";
|
||||
const runningFor = Date.now() - new Date(startedAt).getTime();
|
||||
const palette = getDockerPalette(state);
|
||||
return (
|
||||
<Stack
|
||||
@@ -41,11 +39,11 @@ export const DockerContainerStatusBoxes = ({
|
||||
/>
|
||||
<StatBox
|
||||
title={t("common.labels.uptime")}
|
||||
subtitle={runningFor === undefined ? PLACEHOLDER : formatDuration(runningFor)}
|
||||
subtitle={formatDuration(runningFor)}
|
||||
/>
|
||||
<StatBox
|
||||
title={t("common.labels.restarts")}
|
||||
subtitle={restartCount === undefined ? PLACEHOLDER : String(restartCount)}
|
||||
subtitle={String(restartCount ?? 0)}
|
||||
/>
|
||||
<StatBox
|
||||
title={t("common.labels.health")}
|
||||
|
||||
@@ -13,11 +13,10 @@ import type { Theme } from "@mui/material";
|
||||
import type { TFunction } from "i18next";
|
||||
import type { DockerContainerStats } from "@/Types/Monitor";
|
||||
import { LAYOUT } from "@/Utils/Theme/constants";
|
||||
import { formatPercentage, PLACEHOLDER } from "@/Utils/FormatUtils";
|
||||
import { formatPercentage } from "@/Utils/FormatUtils";
|
||||
import prettyBytes from "pretty-bytes";
|
||||
import { BaseBox } from "@/Components/design-elements";
|
||||
import { dedupeDockerPorts, getDockerMountLabel } from "@/Utils/MonitorUtils";
|
||||
import type { DateRange } from "@/Types/Query";
|
||||
|
||||
const getChartConfigs = (theme: Theme, t: TFunction, stats: DockerContainerStats) => [
|
||||
{
|
||||
@@ -25,29 +24,20 @@ const getChartConfigs = (theme: Theme, t: TFunction, stats: DockerContainerStats
|
||||
key: "avgCpuPct",
|
||||
color: theme.palette.success.main,
|
||||
rightTitle: formatPercentage(stats?.latest?.container.cpuPct || 0),
|
||||
formatter: formatPercentage,
|
||||
labelKey: "common.charts.histogram.avgCpuUsage",
|
||||
},
|
||||
{
|
||||
title: t("common.charts.labels.memoryUsage"),
|
||||
key: "avgMemoryUsedBytes",
|
||||
color: theme.palette.primary.main,
|
||||
rightTitle: prettyBytes(stats?.latest?.container.memoryUsedBytes || 0),
|
||||
formatter: prettyBytes,
|
||||
labelKey: "common.charts.histogram.avgMemoryUsage",
|
||||
},
|
||||
];
|
||||
|
||||
export const TabOverview = ({
|
||||
stats,
|
||||
range,
|
||||
}: {
|
||||
stats: DockerContainerStats;
|
||||
range: DateRange;
|
||||
}) => {
|
||||
export const TabOverview = ({ stats }: { stats: DockerContainerStats }) => {
|
||||
const theme = useTheme();
|
||||
const { t } = useTranslation();
|
||||
const isSmall = useMediaQuery(theme.breakpoints.down("md"));
|
||||
|
||||
const { ports, mounts } = stats?.latest?.container ?? {};
|
||||
const dedupedPorts = dedupeDockerPorts(ports ?? []);
|
||||
return (
|
||||
@@ -68,9 +58,6 @@ export const TabOverview = ({
|
||||
dataKey={config.key}
|
||||
strokeColor={config.color}
|
||||
gradientStartColor={config.color}
|
||||
range={range}
|
||||
formatter={config.formatter}
|
||||
labelKey={config.labelKey}
|
||||
/>
|
||||
</Grid>
|
||||
);
|
||||
@@ -88,17 +75,11 @@ export const TabOverview = ({
|
||||
Ports
|
||||
</Typography>
|
||||
<Stack>
|
||||
{dedupedPorts.length === 0 && <Typography>{PLACEHOLDER}</Typography>}
|
||||
{dedupedPorts.map((port) => {
|
||||
const containerPort = `${port.privatePort}/${port.protocol}`;
|
||||
const label =
|
||||
port.publicPort === undefined
|
||||
? containerPort
|
||||
: `${port.hostIp ?? "0.0.0.0"}:${port.publicPort} -> ${containerPort}`;
|
||||
{dedupedPorts?.map((port) => {
|
||||
return (
|
||||
<Typography key={`${port.hostIp}/${port.publicPort}/${containerPort}`}>
|
||||
{label}
|
||||
</Typography>
|
||||
<Typography
|
||||
key={`${port.publicPort}/${port.privatePort}`}
|
||||
>{`${port.hostIp}:${port.publicPort} -> ${port.privatePort}/${port.protocol}`}</Typography>
|
||||
);
|
||||
})}
|
||||
</Stack>
|
||||
@@ -117,7 +98,6 @@ export const TabOverview = ({
|
||||
Volumes
|
||||
</Typography>
|
||||
<Stack>
|
||||
{!mounts?.length && <Typography>{PLACEHOLDER}</Typography>}
|
||||
{mounts?.map((mount) => {
|
||||
return (
|
||||
<Typography key={`${mount.source}/${mount.destination}`}>
|
||||
|
||||
@@ -21,7 +21,7 @@ const TAB_MAP = {
|
||||
logs: 1,
|
||||
} as const;
|
||||
|
||||
const DockerDetailsPage = ({ open = "overview" }: DockerContainerDetailsProps) => {
|
||||
const DockerDetailsPage = ({ open = "logs" }: DockerContainerDetailsProps) => {
|
||||
const [activeTab, setActiveTab] = useState<number>(TAB_MAP[open]);
|
||||
const [dateRange, setDateRange] = useState<DateRange>("recent");
|
||||
const { monitorId, containerName } = useParams<{
|
||||
@@ -69,12 +69,7 @@ const DockerDetailsPage = ({ open = "overview" }: DockerContainerDetailsProps) =
|
||||
<Tab label={t("pages.docker.container.tabs.overview")} />
|
||||
<Tab label={t("pages.docker.container.tabs.logs")} />
|
||||
</Tabs>
|
||||
{activeTab === 0 && (
|
||||
<TabOverview
|
||||
stats={stats}
|
||||
range={dateRange}
|
||||
/>
|
||||
)}
|
||||
{activeTab === 0 && <TabOverview stats={stats} />}
|
||||
{activeTab === 1 && (
|
||||
<TabLogs
|
||||
monitorId={monitorId}
|
||||
|
||||
@@ -12,7 +12,7 @@ import type { Header } from "@/Components/design-elements/Table";
|
||||
import type { DockerContainerInfo } from "@/Types/Check";
|
||||
|
||||
// Utils
|
||||
import { formatPercentage, PLACEHOLDER } from "@/Utils/FormatUtils";
|
||||
import { formatPercentage } from "@/Utils/FormatUtils";
|
||||
|
||||
interface DockerContainersTableProps {
|
||||
monitorId: string | undefined;
|
||||
@@ -91,7 +91,7 @@ export const DockerContainersTable = ({
|
||||
id: "restarts",
|
||||
content: t("common.labels.restarts"),
|
||||
render: (row) => {
|
||||
return <Typography>{row.restartCount ?? PLACEHOLDER}</Typography>;
|
||||
return <Typography>{row.restartCount}</Typography>;
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import Box from "@mui/material/Box";
|
||||
import { DetailGauge } from "@/Components/design-elements";
|
||||
|
||||
import { getPercentage, formatPercentageFromWhole, PLACEHOLDER } from "@/Utils/FormatUtils";
|
||||
import { getPercentage, formatPercentageFromWhole } from "@/Utils/FormatUtils";
|
||||
import prettyBytes from "pretty-bytes";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useTheme } from "@mui/material";
|
||||
@@ -11,6 +11,7 @@ interface StatGaugesProps {
|
||||
diagnostics: Diagnostics | null;
|
||||
}
|
||||
|
||||
const PLACEHOLDER = "—";
|
||||
|
||||
export const StatGauges = ({ diagnostics }: StatGaugesProps) => {
|
||||
const theme = useTheme();
|
||||
|
||||
@@ -6,12 +6,12 @@ import { useTheme } from "@mui/material";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import type { Diagnostics } from "@/Types/Diagnostics";
|
||||
import { formatDuration, formatMs } from "@/Utils/TimeUtils";
|
||||
import { PLACEHOLDER } from "@/Utils/FormatUtils";
|
||||
|
||||
interface StatsProps {
|
||||
diagnostics: Diagnostics | null;
|
||||
}
|
||||
|
||||
const PLACEHOLDER = "—";
|
||||
|
||||
export const Stats = ({ diagnostics }: StatsProps) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
@@ -8,7 +8,7 @@ import { useTranslation } from "react-i18next";
|
||||
|
||||
const LogsPage = () => {
|
||||
const { t } = useTranslation();
|
||||
const [activeTab, setActiveTab] = useState<number>(0);
|
||||
const [activeTab, setActiveTab] = useState<number>(1);
|
||||
return (
|
||||
<BasePage headerKey="logs">
|
||||
<Tabs
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import NotFoundSvg from "@/assets/Images/sushi_404.svg?react";
|
||||
import NotFoundSvg from "@/assets/Images/sushi_404.svg";
|
||||
import { Button } from "@/Components/inputs";
|
||||
import Box from "@mui/material/Box";
|
||||
import Stack from "@mui/material/Stack";
|
||||
@@ -36,11 +36,10 @@ const NotFoundPage = ({ title, desc }: NotFoundProps) => {
|
||||
alignItems="center"
|
||||
>
|
||||
<Box
|
||||
component={NotFoundSvg}
|
||||
role="img"
|
||||
aria-label="404"
|
||||
width="100%"
|
||||
maxHeight="25rem"
|
||||
component="img"
|
||||
src={NotFoundSvg}
|
||||
alt="404"
|
||||
maxHeight={"25rem"}
|
||||
/>
|
||||
<Typography
|
||||
component="h1"
|
||||
|
||||
@@ -14,7 +14,6 @@ import {
|
||||
import type { StatusPageThemeTokens } from "@/Pages/StatusPage/Status/themes/tokens";
|
||||
import { ThemedHeatmap } from "@/Pages/StatusPage/Status/themes/shared/ThemedHeatmap";
|
||||
import { ThemedHistogram } from "@/Pages/StatusPage/Status/themes/shared/ThemedHistogram";
|
||||
import { IncidentModal } from "@/Pages/StatusPage/Status/themes/shared/IncidentModal";
|
||||
import {
|
||||
ThemedInfrastructure,
|
||||
type GaugeFillLevel,
|
||||
@@ -117,8 +116,6 @@ export const BaseStatusPage = ({
|
||||
[config, tokens, mode]
|
||||
);
|
||||
const [chartMode, setChartMode] = useState<"heatmap" | "histogram">("heatmap");
|
||||
const [selectedMonitorId, setSelectedMonitorId] = useState<string | null>(null);
|
||||
const [selectedDate, setSelectedDate] = useState<string | null>(null);
|
||||
|
||||
const overall = resolveOverallStatus(monitors, t, config.overallStatusOptions);
|
||||
const logoSrc = statusPage.logo?.data
|
||||
@@ -309,10 +306,6 @@ export const BaseStatusPage = ({
|
||||
cells={cells}
|
||||
containerSx={styles.heatmap}
|
||||
cellSx={styles.heatmapCell}
|
||||
onCellClick={(date) => {
|
||||
setSelectedMonitorId(monitor.id);
|
||||
setSelectedDate(date);
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<ThemedHistogram
|
||||
@@ -320,10 +313,6 @@ export const BaseStatusPage = ({
|
||||
containerSx={styles.histogram}
|
||||
barSx={styles.bar}
|
||||
statsSx={styles.chartStats}
|
||||
onCellClick={(date) => {
|
||||
setSelectedMonitorId(monitor.id);
|
||||
setSelectedDate(date);
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
@@ -344,16 +333,6 @@ export const BaseStatusPage = ({
|
||||
Checkmate
|
||||
</a>
|
||||
</Box>
|
||||
<IncidentModal
|
||||
url={statusPage.url}
|
||||
monitorId={selectedMonitorId}
|
||||
date={selectedDate}
|
||||
timezone={bucketTimezone}
|
||||
onClose={() => {
|
||||
setSelectedMonitorId(null);
|
||||
setSelectedDate(null);
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
@@ -25,7 +25,6 @@ export interface ChartCell {
|
||||
responseTime: number; // 0 for empty cells
|
||||
tooltip: React.ReactNode | null;
|
||||
ariaLabel: string;
|
||||
date: string | null;
|
||||
}
|
||||
|
||||
const DAY_DOWN_THRESHOLD = 0.5;
|
||||
@@ -62,7 +61,7 @@ export const classifyResponseTime = (
|
||||
return "fast";
|
||||
};
|
||||
|
||||
const emptyCell = (key: string, date: string | null = null): ChartCell => ({
|
||||
const emptyCell = (key: string): ChartCell => ({
|
||||
key,
|
||||
barKind: "empty",
|
||||
heatKind: "empty",
|
||||
@@ -71,7 +70,6 @@ const emptyCell = (key: string, date: string | null = null): ChartCell => ({
|
||||
tooltip: null,
|
||||
ariaLabel: "",
|
||||
severity: 0,
|
||||
date,
|
||||
});
|
||||
|
||||
const padCells = (cells: ChartCell[], length: number): ChartCell[] => [
|
||||
@@ -94,7 +92,6 @@ export const checksToCells = (checks: CheckSnapshot[]): ChartCell[] => {
|
||||
tooltip: <ThemedChartTooltip check={check} />,
|
||||
ariaLabel: `${formatMs(check.responseTime)}, ${check.status ? "up" : "down"}`,
|
||||
severity: 0,
|
||||
date: null,
|
||||
})
|
||||
);
|
||||
return padCells(cells, MAX_RECENT_CHECKS);
|
||||
@@ -111,7 +108,7 @@ export const dailyBucketsToCells = (
|
||||
const enumerated = enumerateDays(days, bucketTimezone);
|
||||
return enumerated.map((date) => {
|
||||
const bucket = byDate.get(date);
|
||||
if (!bucket) return emptyCell(`day-${date}`, date);
|
||||
if (!bucket) return emptyCell(`day-${date}`);
|
||||
const upRatio = bucket.upChecks / bucket.totalChecks;
|
||||
|
||||
const barKind = classifyDay(bucket, upRatio);
|
||||
@@ -135,7 +132,6 @@ export const dailyBucketsToCells = (
|
||||
date,
|
||||
uptime: formatPercentage(bucket.upChecks / bucket.totalChecks),
|
||||
}),
|
||||
date,
|
||||
};
|
||||
});
|
||||
};
|
||||
@@ -1,111 +0,0 @@
|
||||
import Dialog from "@mui/material/Dialog";
|
||||
import DialogTitle from "@mui/material/DialogTitle";
|
||||
import DialogContent from "@mui/material/DialogContent";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import Stack from "@mui/material/Stack";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
import { X as XIcon } from "lucide-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useGet } from "@/Hooks/UseApi";
|
||||
import { useTheme } from "@mui/material";
|
||||
import { SPACING } from "@/Utils/Theme/constants";
|
||||
import { formatDateWithTz } from "@/Utils/TimeUtils";
|
||||
|
||||
import type { Incident } from "@/Types/Incident";
|
||||
interface IncidentModalProps {
|
||||
url: string;
|
||||
monitorId: string | null;
|
||||
date: string | null;
|
||||
timezone: string;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export const IncidentModal = ({
|
||||
url,
|
||||
monitorId,
|
||||
date,
|
||||
timezone,
|
||||
onClose,
|
||||
}: IncidentModalProps) => {
|
||||
const theme = useTheme();
|
||||
const { t } = useTranslation();
|
||||
const open = Boolean(monitorId && date);
|
||||
|
||||
const { data, isLoading, error } = useGet<{ incidents: Incident[] }>(
|
||||
open ? `/status-page/${url}/incidents/${monitorId}?date=${date}` : null,
|
||||
{},
|
||||
{ revalidateOnFocus: false, keepPreviousData: true }
|
||||
);
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open={open}
|
||||
onClose={onClose}
|
||||
maxWidth="sm"
|
||||
fullWidth
|
||||
>
|
||||
<DialogTitle
|
||||
sx={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}
|
||||
>
|
||||
{t("pages.statusPages.monitorsList.incidents.modalTitle", { date })} ({timezone})
|
||||
<IconButton
|
||||
onClick={onClose}
|
||||
size="small"
|
||||
aria-label="close"
|
||||
>
|
||||
<XIcon size={20} />
|
||||
</IconButton>
|
||||
</DialogTitle>
|
||||
<DialogContent>
|
||||
{isLoading ? (
|
||||
<Typography mt={SPACING.SM}>
|
||||
{t("pages.statusPages.monitorsList.incidents.loading")}
|
||||
</Typography>
|
||||
) : error ? (
|
||||
<Typography
|
||||
mt={SPACING.SM}
|
||||
color={theme.palette.error.main}
|
||||
>
|
||||
{t("pages.statusPages.monitorsList.incidents.errorLoading")}
|
||||
</Typography>
|
||||
) : data?.incidents && data.incidents.length > 0 ? (
|
||||
<Stack
|
||||
gap={SPACING.LG}
|
||||
mt={SPACING.SM}
|
||||
>
|
||||
{data.incidents.map((incident) => (
|
||||
<Stack
|
||||
key={incident.id}
|
||||
p={SPACING.LG}
|
||||
border={1}
|
||||
borderColor="divider"
|
||||
borderRadius={theme.shape.borderRadius}
|
||||
>
|
||||
<Typography
|
||||
variant="subtitle2"
|
||||
fontWeight="bold"
|
||||
>
|
||||
{incident.message ||
|
||||
(incident.statusCode ? `Error ${incident.statusCode}` : "Incident")}
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
color={theme.palette.text.secondary}
|
||||
>
|
||||
{formatDateWithTz(incident.startTime, "h:mm A", timezone)} -{" "}
|
||||
{incident.endTime
|
||||
? formatDateWithTz(incident.endTime, "h:mm A", timezone)
|
||||
: t("pages.statusPages.monitorsList.incidents.ongoing")}
|
||||
</Typography>
|
||||
</Stack>
|
||||
))}
|
||||
</Stack>
|
||||
) : (
|
||||
<Typography mt={SPACING.SM}>
|
||||
{t("pages.statusPages.monitorsList.incidents.noIncidents")}
|
||||
</Typography>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
@@ -2,8 +2,6 @@ import Tooltip from "@mui/material/Tooltip";
|
||||
import Box from "@mui/material/Box";
|
||||
import type { SxProps, Theme } from "@mui/material/styles";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { mergeSx } from "@/Pages/StatusPage/Status/themes/shared/sx";
|
||||
|
||||
import type {
|
||||
ChartCell,
|
||||
HeatCellKind,
|
||||
@@ -13,15 +11,17 @@ interface Props {
|
||||
cells: ChartCell[];
|
||||
containerSx: SxProps<Theme>;
|
||||
cellSx: (kind: HeatCellKind, severity?: number) => SxProps<Theme>;
|
||||
onCellClick?: (date: string) => void;
|
||||
}
|
||||
|
||||
export const ThemedHeatmap = ({ cells, containerSx, cellSx, onCellClick }: Props) => {
|
||||
export const ThemedHeatmap = ({ cells, containerSx, cellSx }: Props) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={mergeSx(containerSx, { gridTemplateColumns: `repeat(${cells.length}, 1fr)` })}
|
||||
sx={[
|
||||
...(Array.isArray(containerSx) ? containerSx : [containerSx]),
|
||||
{ gridTemplateColumns: `repeat(${cells.length}, 1fr)` },
|
||||
]}
|
||||
role="img"
|
||||
aria-label={t("pages.statusPages.monitorsList.chart.heatmapAria")}
|
||||
>
|
||||
@@ -30,15 +30,7 @@ export const ThemedHeatmap = ({ cells, containerSx, cellSx, onCellClick }: Props
|
||||
return (
|
||||
<Box
|
||||
key={cell.key}
|
||||
sx={mergeSx(
|
||||
cellSx("empty"),
|
||||
!!cell.date && !!onCellClick ? { cursor: "pointer" } : undefined
|
||||
)}
|
||||
onClick={() => {
|
||||
if (cell.date && onCellClick) {
|
||||
onCellClick(cell.date);
|
||||
}
|
||||
}}
|
||||
sx={cellSx("empty")}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -50,16 +42,8 @@ export const ThemedHeatmap = ({ cells, containerSx, cellSx, onCellClick }: Props
|
||||
placement="top"
|
||||
>
|
||||
<Box
|
||||
sx={mergeSx(
|
||||
cellSx(cell.heatKind, cell.severity),
|
||||
!!cell.date && !!onCellClick ? { cursor: "pointer" } : undefined
|
||||
)}
|
||||
sx={cellSx(cell.heatKind, cell.severity)}
|
||||
aria-label={cell.ariaLabel}
|
||||
onClick={() => {
|
||||
if (cell.date && onCellClick) {
|
||||
onCellClick(cell.date);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
);
|
||||
|
||||
@@ -5,8 +5,6 @@ import Stack from "@mui/material/Stack";
|
||||
import type { SxProps, Theme } from "@mui/material/styles";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { formatMs } from "@/Utils/TimeUtils";
|
||||
import { mergeSx } from "@/Pages/StatusPage/Status/themes/shared/sx";
|
||||
|
||||
import type {
|
||||
BarKind,
|
||||
ChartCell,
|
||||
@@ -18,7 +16,6 @@ interface Props {
|
||||
barSx: (kind: BarKind, heightPct: number, severity?: number) => SxProps<Theme>;
|
||||
statsSx: SxProps<Theme>;
|
||||
statsGap?: number;
|
||||
onCellClick?: (date: string) => void;
|
||||
}
|
||||
|
||||
export const ThemedHistogram = ({
|
||||
@@ -27,7 +24,6 @@ export const ThemedHistogram = ({
|
||||
barSx,
|
||||
statsSx,
|
||||
statsGap = 1,
|
||||
onCellClick,
|
||||
}: Props) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
@@ -43,22 +39,17 @@ export const ThemedHistogram = ({
|
||||
return (
|
||||
<Stack gap={statsGap}>
|
||||
<Box
|
||||
sx={mergeSx(containerSx, { gridTemplateColumns: `repeat(${cells.length}, 1fr)` })}
|
||||
sx={[
|
||||
...(Array.isArray(containerSx) ? containerSx : [containerSx]),
|
||||
{ gridTemplateColumns: `repeat(${cells.length}, 1fr)` },
|
||||
]}
|
||||
>
|
||||
{cells.map((cell) => {
|
||||
if (cell.barKind === "empty") {
|
||||
return (
|
||||
<Box
|
||||
key={cell.key}
|
||||
sx={mergeSx(
|
||||
barSx("empty", cell.heightPct),
|
||||
!!cell.date && !!onCellClick ? { cursor: "pointer" } : undefined
|
||||
)}
|
||||
onClick={() => {
|
||||
if (cell.date && onCellClick) {
|
||||
onCellClick(cell.date);
|
||||
}
|
||||
}}
|
||||
sx={barSx("empty", cell.heightPct)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -70,16 +61,8 @@ export const ThemedHistogram = ({
|
||||
placement="top"
|
||||
>
|
||||
<Box
|
||||
sx={mergeSx(
|
||||
barSx(cell.barKind, cell.heightPct, cell.severity),
|
||||
!!cell.date && !!onCellClick ? { cursor: "pointer" } : undefined
|
||||
)}
|
||||
sx={barSx(cell.barKind, cell.heightPct, cell.severity)}
|
||||
aria-label={cell.ariaLabel}
|
||||
onClick={() => {
|
||||
if (cell.date && onCellClick) {
|
||||
onCellClick(cell.date);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
);
|
||||
|
||||
@@ -1,16 +0,0 @@
|
||||
import type { SxProps, Theme } from "@mui/material/styles";
|
||||
|
||||
export const mergeSx = (
|
||||
...styles: Array<SxProps<Theme> | false | null | undefined>
|
||||
): SxProps<Theme> => {
|
||||
const result: SxProps<Theme>[] = [];
|
||||
for (const style of styles) {
|
||||
if (!style) continue;
|
||||
if (Array.isArray(style)) {
|
||||
result.push(...(style.filter(Boolean) as SxProps<Theme>[]));
|
||||
} else {
|
||||
result.push(style);
|
||||
}
|
||||
}
|
||||
return result as SxProps<Theme>;
|
||||
};
|
||||
@@ -93,10 +93,10 @@ const Routes = () => {
|
||||
>
|
||||
<Route
|
||||
path="/"
|
||||
element={<Navigate to="/uptime" />}
|
||||
element={<Navigate to="/dashboard" />}
|
||||
/>
|
||||
<Route
|
||||
path="dashboard"
|
||||
path="/dashboard"
|
||||
element={<Dashboard />}
|
||||
/>
|
||||
<Route
|
||||
|
||||
@@ -1,2 +0,0 @@
|
||||
export const dashboardCardKeys = ["monitorStatus", "monitorsByType"] as const;
|
||||
export type DashboardCardKey = (typeof dashboardCardKeys)[number];
|
||||
@@ -60,15 +60,6 @@ export const monitorTypeLabelKey: Record<SelectableMonitorType, string> &
|
||||
pagespeed: "optionPagespeed",
|
||||
};
|
||||
|
||||
export const getMonitorTypeLabel = (
|
||||
type: MonitorType,
|
||||
t: (key: string) => string
|
||||
): string => {
|
||||
const monitorLabel = monitorTypeLabelKey[type];
|
||||
return monitorLabel ? t(`pages.common.monitors.monitorTypes.${monitorLabel}`) : type;
|
||||
};
|
||||
export const MIN_MONITOR_INTERVAL_MS = 10000;
|
||||
|
||||
export const MonitorIntervalOptions = [
|
||||
{ value: 15000, labelKey: "fifteenSeconds" },
|
||||
{ value: 30000, labelKey: "thirtySeconds" },
|
||||
@@ -169,9 +160,6 @@ export interface Monitor {
|
||||
geoCheckLocations?: GeoContinent[];
|
||||
geoCheckInterval?: number;
|
||||
dockerLogsEnabled?: boolean;
|
||||
dockerTlsCa?: string;
|
||||
dockerTlsCert?: string;
|
||||
dockerTlsKeySet?: boolean;
|
||||
dnsServer?: string;
|
||||
dnsRecordType?: DnsRecordType;
|
||||
recentChecks: CheckSnapshot[];
|
||||
@@ -192,11 +180,6 @@ export interface MonitorsSummary {
|
||||
breachedMonitors: number;
|
||||
}
|
||||
|
||||
export interface MonitorTypeCount {
|
||||
type: MonitorType;
|
||||
count: number;
|
||||
}
|
||||
|
||||
export interface MonitorsWithChecksResponse {
|
||||
count: number;
|
||||
monitors: MonitorWithChecks[];
|
||||
|
||||
@@ -47,6 +47,3 @@ export const getPercentage = (value: number, total: number) => {
|
||||
if (!value || !total) return 0;
|
||||
return (value / total) * 100;
|
||||
};
|
||||
|
||||
// Shown wherever a value is not available for the current data source.
|
||||
export const PLACEHOLDER = "—";
|
||||
@@ -85,10 +85,6 @@ export const lightPalette = {
|
||||
sidebar: {
|
||||
accent: colors.brandGreen,
|
||||
},
|
||||
scrollbar: {
|
||||
track: colors.rule200,
|
||||
thumb: colors.brandGreen,
|
||||
},
|
||||
rowStatus: {
|
||||
running: colors.green200,
|
||||
paused: colors.yellow200,
|
||||
@@ -141,10 +137,6 @@ export const darkPalette = {
|
||||
sidebar: {
|
||||
accent: colors.brandGreenLight,
|
||||
},
|
||||
scrollbar: {
|
||||
track: colors.ruleDark,
|
||||
thumb: colors.brandGreen,
|
||||
},
|
||||
rowStatus: {
|
||||
running: alpha(colors.brandGreen, 0.18),
|
||||
paused: alpha(colors.orange500, 0.18),
|
||||
|
||||
@@ -3,7 +3,6 @@ import { lightPalette, darkPalette, typographyLevels } from "@/Utils/Theme/Palet
|
||||
|
||||
import type { Theme } from "@mui/material/styles";
|
||||
import type {} from "@mui/material/styles";
|
||||
import { SCROLLBAR_SIZE } from "@/Utils/Theme/constants";
|
||||
|
||||
declare module "@mui/material/styles" {
|
||||
interface TypographyVariants {
|
||||
@@ -21,7 +20,6 @@ declare module "@mui/material/styles" {
|
||||
}
|
||||
interface Palette {
|
||||
sidebar: { accent: string };
|
||||
scrollbar: { track: string; thumb: string };
|
||||
rowStatus: { running: string; paused: string };
|
||||
chart: {
|
||||
phases: {
|
||||
@@ -36,7 +34,6 @@ declare module "@mui/material/styles" {
|
||||
}
|
||||
interface PaletteOptions {
|
||||
sidebar?: { accent: string };
|
||||
scrollbar?: { track: string; thumb: string };
|
||||
rowStatus?: { running: string; paused: string };
|
||||
chart?: {
|
||||
phases: {
|
||||
@@ -115,27 +112,6 @@ export const theme = (mode: string, palette: any) =>
|
||||
},
|
||||
|
||||
components: {
|
||||
MuiCssBaseline: {
|
||||
styleOverrides: (theme) => ({
|
||||
"*": {
|
||||
scrollbarWidth: "auto",
|
||||
scrollbarColor: `${theme.palette.scrollbar.thumb} ${theme.palette.scrollbar.track}`,
|
||||
},
|
||||
"*::-webkit-scrollbar": {
|
||||
width: SCROLLBAR_SIZE,
|
||||
height: SCROLLBAR_SIZE,
|
||||
},
|
||||
"*::-webkit-scrollbar-track": {
|
||||
background: theme.palette.scrollbar.track,
|
||||
borderRadius: theme.shape.borderRadius,
|
||||
},
|
||||
"*::-webkit-scrollbar-thumb": {
|
||||
background: theme.palette.scrollbar.thumb,
|
||||
borderRadius: theme.shape.borderRadius,
|
||||
},
|
||||
"*::-webkit-scrollbar-button": { display: "none" },
|
||||
}),
|
||||
},
|
||||
MuiTouchRipple: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
|
||||
@@ -19,7 +19,7 @@ export const LAYOUT = {
|
||||
} as const;
|
||||
|
||||
export const INPUT_BASE_HEIGHT = 32; // Height for inputs/controls
|
||||
export const SCROLLBAR_SIZE = 16;
|
||||
|
||||
export const HOVER = {
|
||||
DARKEN: 0.06, // This is a coefficient for darkening function
|
||||
ROW: 0.025, // Overlay alpha for hoverable rows and cards
|
||||
|
||||
@@ -104,52 +104,9 @@ export const formatMs = (ms: number, hasSpace: boolean = true): string => {
|
||||
return formatted;
|
||||
};
|
||||
|
||||
type DurationUnit = "day" | "hour" | "minute" | "second";
|
||||
|
||||
interface FormatDurationOptions {
|
||||
long?: boolean;
|
||||
relative?: boolean;
|
||||
hasSpace?: boolean;
|
||||
locale?: string;
|
||||
}
|
||||
|
||||
const DURATION_UNITS: Array<{ unit: DurationUnit; milliseconds: number }> = [
|
||||
{ unit: "day", milliseconds: MS_PER_DAY },
|
||||
{ unit: "hour", milliseconds: MS_PER_HOUR },
|
||||
{ unit: "minute", milliseconds: MS_PER_MINUTE },
|
||||
{ unit: "second", milliseconds: MS_PER_SECOND },
|
||||
];
|
||||
|
||||
const FALLBACK_DURATION_UNIT = DURATION_UNITS[DURATION_UNITS.length - 1];
|
||||
|
||||
const getDurationUnit = (ms: number) =>
|
||||
DURATION_UNITS.find(({ milliseconds }) => Math.abs(ms) >= milliseconds) ??
|
||||
FALLBACK_DURATION_UNIT;
|
||||
|
||||
const getExactDurationUnit = (ms: number) =>
|
||||
DURATION_UNITS.find(({ milliseconds }) => ms !== 0 && ms % milliseconds === 0) ??
|
||||
FALLBACK_DURATION_UNIT;
|
||||
|
||||
export const formatDuration = (
|
||||
ms: number,
|
||||
{ long = false, relative = false, hasSpace = true, locale }: FormatDurationOptions = {}
|
||||
): string => {
|
||||
if (relative) {
|
||||
const { unit, milliseconds } = getDurationUnit(ms);
|
||||
const value = Math.sign(ms) * Math.floor(Math.abs(ms) / milliseconds);
|
||||
return new Intl.RelativeTimeFormat(locale, {
|
||||
numeric: "always",
|
||||
style: long ? "long" : "narrow",
|
||||
}).format(-value, unit);
|
||||
}
|
||||
|
||||
if (long) {
|
||||
const { unit, milliseconds } = getExactDurationUnit(ms);
|
||||
return new Intl.NumberFormat(locale, {
|
||||
style: "unit",
|
||||
unit,
|
||||
unitDisplay: "long",
|
||||
}).format(ms / milliseconds);
|
||||
export const formatDuration = (ms: number, verbose: boolean = false, hasSpace = true) => {
|
||||
if (verbose) {
|
||||
return prettyMilliseconds(ms, { verbose: true });
|
||||
}
|
||||
|
||||
const formatted = prettyMilliseconds(ms, {
|
||||
|
||||
@@ -6,7 +6,6 @@ import {
|
||||
HttpMethods,
|
||||
PageSpeedStrategies,
|
||||
ProxyModes,
|
||||
MIN_MONITOR_INTERVAL_MS,
|
||||
type MonitorType,
|
||||
} from "@/Types/Monitor";
|
||||
import { ALL_HTTP_STATUS_CODES } from "@/Utils/statusCode";
|
||||
@@ -28,8 +27,7 @@ const baseSchema = z.object({
|
||||
description: z.string().optional(),
|
||||
interval: z
|
||||
.number()
|
||||
.int("Interval must be a whole number of milliseconds")
|
||||
.min(MIN_MONITOR_INTERVAL_MS, "Interval must be at least 10 seconds")
|
||||
.min(15000, "Interval must be at least 15 seconds")
|
||||
.register(monitorStepRegistry, { step: 1 }),
|
||||
notifications: z.array(z.string()).register(monitorStepRegistry, { step: 1 }),
|
||||
tags: z.array(z.string()).register(monitorStepRegistry, { step: 1 }),
|
||||
@@ -110,47 +108,10 @@ const portSchema = baseSchema.extend({
|
||||
.max(65535, "Port must be at most 65535"),
|
||||
});
|
||||
|
||||
// Docker monitor schema. The URL forms mirror the Docker source helpers in
|
||||
// server/src/utils/dockerHost.ts.
|
||||
const dockerTlsUrlRegex = /^(tcp|https):\/\/([^/\s:]+)(?::(\d+))?\/?$/;
|
||||
const dockerSocketUrlRegex = /^(?:unix:\/\/\/\S+|\/\S+)$/;
|
||||
|
||||
export const isDockerTlsUrl = (url: string | undefined): boolean =>
|
||||
dockerTlsUrlRegex.test(url?.trim() ?? "");
|
||||
|
||||
export const isCaptureDockerUrl = (url: string | undefined): boolean => {
|
||||
try {
|
||||
const parsed = new URL(url?.trim() ?? "");
|
||||
const pathname = parsed.pathname.replace(/\/+$/, "");
|
||||
return (
|
||||
(parsed.protocol === "http:" || parsed.protocol === "https:") &&
|
||||
pathname.endsWith("/metrics/docker")
|
||||
);
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
// Docker monitor schema
|
||||
const dockerSchema = baseSchema.extend({
|
||||
type: z.literal("docker"),
|
||||
url: z
|
||||
.string()
|
||||
.min(1, "Docker host URL is required")
|
||||
.refine(
|
||||
(url) =>
|
||||
dockerSocketUrlRegex.test(url.trim()) ||
|
||||
isDockerTlsUrl(url) ||
|
||||
isCaptureDockerUrl(url),
|
||||
"Docker host must be a socket path, a TLS daemon URL, or a Capture /metrics/docker endpoint"
|
||||
),
|
||||
secret: z.string(),
|
||||
ignoreTlsErrors: z.boolean(),
|
||||
dockerTlsCa: z.string(),
|
||||
dockerTlsCert: z.string(),
|
||||
// blank on edit keeps the stored key.
|
||||
dockerTlsKey: z.string(),
|
||||
// Read only mirror of the server flag, stripped on submit
|
||||
dockerTlsKeySet: z.boolean(),
|
||||
url: z.string().min(1, "Docker host URL is required"),
|
||||
dockerLogsEnabled: z.boolean().register(monitorStepRegistry, { step: 1 }),
|
||||
});
|
||||
|
||||
@@ -256,8 +217,7 @@ const monitorSchemaUnion = z.discriminatedUnion("type", [
|
||||
dnsSchema,
|
||||
]);
|
||||
|
||||
// Mirrors the server's refineProxySelection and refineDockerTls
|
||||
// (monitorValidation.ts). PEM contents are only parsed on the server.
|
||||
// Mirrors the server's refineProxySelection (monitorValidation.ts)
|
||||
export const monitorSchema = monitorSchemaUnion.superRefine((data, ctx) => {
|
||||
if (data.type === "http" && data.proxyMode === "custom" && !data.proxyId) {
|
||||
ctx.addIssue({
|
||||
@@ -266,38 +226,6 @@ export const monitorSchema = monitorSchemaUnion.superRefine((data, ctx) => {
|
||||
message: "A proxy must be selected when proxy mode is custom",
|
||||
});
|
||||
}
|
||||
|
||||
if (data.type === "docker" && isCaptureDockerUrl(data.url) && !data.secret.trim()) {
|
||||
ctx.addIssue({
|
||||
code: "custom",
|
||||
path: ["secret"],
|
||||
message: "Capture API secret is required",
|
||||
});
|
||||
}
|
||||
|
||||
if (data.type === "docker" && isDockerTlsUrl(data.url)) {
|
||||
if (!data.dockerTlsCert.trim()) {
|
||||
ctx.addIssue({
|
||||
code: "custom",
|
||||
path: ["dockerTlsCert"],
|
||||
message: "Client certificate is required for a TLS Docker host",
|
||||
});
|
||||
}
|
||||
if (!data.dockerTlsKeySet && !data.dockerTlsKey.trim()) {
|
||||
ctx.addIssue({
|
||||
code: "custom",
|
||||
path: ["dockerTlsKey"],
|
||||
message: "Client key is required for a TLS Docker host",
|
||||
});
|
||||
}
|
||||
if (!data.ignoreTlsErrors && !data.dockerTlsCa.trim()) {
|
||||
ctx.addIssue({
|
||||
code: "custom",
|
||||
path: ["dockerTlsCa"],
|
||||
message: "CA certificate is required unless TLS errors are ignored",
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
export type MonitorFormData = z.infer<typeof monitorSchema>;
|
||||
|
||||
File diff suppressed because it is too large.
Load diff
|
Before Width: | Height: | Size: 286 KiB After Width: | Height: | Size: 536 KiB |
@@ -1377,9 +1377,6 @@
|
||||
"maintenance": "صيانة",
|
||||
"paused": "متوقف مؤقتاً",
|
||||
"up": "قيد التشغيل"
|
||||
},
|
||||
"incidents": {
|
||||
"errorLoading": "فشل تحميل الحوادث."
|
||||
}
|
||||
},
|
||||
"statusBar": {
|
||||
|
||||
@@ -1377,9 +1377,6 @@
|
||||
"uptime": {
|
||||
"title": "Temps en línia",
|
||||
"responseTime": "Temps de resposta"
|
||||
},
|
||||
"incidents": {
|
||||
"errorLoading": "No s'han pogut carregar les incidències."
|
||||
}
|
||||
},
|
||||
"statusBar": {
|
||||
|
||||
@@ -1377,9 +1377,6 @@
|
||||
"maintenance": "Údržba",
|
||||
"paused": "Pozastaveno",
|
||||
"up": "V provozu"
|
||||
},
|
||||
"incidents": {
|
||||
"errorLoading": "Nepodařilo se načíst incidenty."
|
||||
}
|
||||
},
|
||||
"statusBar": {
|
||||
|
||||
@@ -448,7 +448,6 @@
|
||||
},
|
||||
"statBoxes": {
|
||||
"activeFor": "Aktiv seit",
|
||||
"checkingEvery": "Check alle {{interval}}",
|
||||
"certificateExpiry": "Zertifikatablauf",
|
||||
"lastCheck": "Letzter Check",
|
||||
"lastResponseTime": "Letzte Antwortzeit",
|
||||
@@ -1378,9 +1377,6 @@
|
||||
"maintenance": "Wartung",
|
||||
"paused": "Pausiert",
|
||||
"up": "Betriebsbereit"
|
||||
},
|
||||
"incidents": {
|
||||
"errorLoading": "Vorfälle konnten nicht geladen werden."
|
||||
}
|
||||
},
|
||||
"statusBar": {
|
||||
|
||||
+145
-57
@@ -80,9 +80,7 @@
|
||||
"avg": "Avg: {{value}}",
|
||||
"max": "Max: {{value}}",
|
||||
"responseTime": "Response time: {{value}}",
|
||||
"total": "Total: {{value}}",
|
||||
"avgCpuUsage": "Average CPU usage: {{value}}",
|
||||
"avgMemoryUsage": "Average memory usage: {{value}}"
|
||||
"total": "Total: {{value}}"
|
||||
},
|
||||
"phases": {
|
||||
"dns": "DNS",
|
||||
@@ -208,6 +206,7 @@
|
||||
},
|
||||
"sidebar": {
|
||||
"menu": {
|
||||
"dashboard": "Dashboard",
|
||||
"uptime": "Uptime",
|
||||
"pagespeed": "Pagespeed",
|
||||
"infrastructure": "Infrastructure",
|
||||
@@ -226,8 +225,7 @@
|
||||
"alerting": "Alerting",
|
||||
"reporting": "Reporting",
|
||||
"configuration": "Configuration"
|
||||
},
|
||||
"dashboard": "Dashboard"
|
||||
}
|
||||
},
|
||||
"bottomMenu": {
|
||||
"support": "Support",
|
||||
@@ -261,6 +259,147 @@
|
||||
}
|
||||
},
|
||||
"pages": {
|
||||
"dashboard": {
|
||||
"header": {
|
||||
"title": "Dashboard",
|
||||
"description": "See every monitor type in one place and spot what needs attention."
|
||||
},
|
||||
"card": {
|
||||
"error": "Could not load this card."
|
||||
},
|
||||
"cards": {
|
||||
"monitorStatus": {
|
||||
"title": "Monitor status",
|
||||
"empty": "No monitors yet.",
|
||||
"upOfTotal": "of {{total}} up"
|
||||
},
|
||||
"currentlyDown": {
|
||||
"title": "Currently down",
|
||||
"empty": "All monitors are up. No incidents open.",
|
||||
"count": "{{count}} needing attention"
|
||||
},
|
||||
"monitorsByType": {
|
||||
"title": "Monitors by type",
|
||||
"empty": "No monitors yet.",
|
||||
"down": "{{count}} down"
|
||||
},
|
||||
"recentIncidents": {
|
||||
"title": "Recent incidents",
|
||||
"empty": "No incidents — all systems healthy.",
|
||||
"active": "{{count}} open",
|
||||
"ongoing": "Ongoing",
|
||||
"manual": "Manual",
|
||||
"unknownMonitor": "Unknown monitor"
|
||||
},
|
||||
"failedChecks": {
|
||||
"title": "Failed checks",
|
||||
"empty": "No checks yet.",
|
||||
"ratio": "{{failed}} of {{total}} in the last day"
|
||||
},
|
||||
"checkmateServer": {
|
||||
"title": "Checkmate server",
|
||||
"memory": "Memory",
|
||||
"eventLoop": "Event loop delay",
|
||||
"uptime": "Uptime",
|
||||
"database": "Database",
|
||||
"readsWrites": "{{reads}} reads/s · {{writes}} writes/s"
|
||||
},
|
||||
"ranking": {
|
||||
"topOf": "Top {{shown}} of {{total}}",
|
||||
"notEnough": "Not enough monitors to rank yet."
|
||||
},
|
||||
"slowestMonitors": {
|
||||
"title": "Slowest monitors"
|
||||
},
|
||||
"lowestUptime": {
|
||||
"title": "Lowest uptime"
|
||||
},
|
||||
"monitorsByGroup": {
|
||||
"title": "Monitors by group",
|
||||
"empty": "No groups yet. Groups are set per monitor."
|
||||
},
|
||||
"busiestServers": {
|
||||
"title": "Busiest servers",
|
||||
"empty": "No infrastructure monitors yet.",
|
||||
"cpu": "CPU",
|
||||
"memory": "Memory",
|
||||
"disk": "Disk"
|
||||
},
|
||||
"incidentStats": {
|
||||
"title": "Incident stats",
|
||||
"openNow": "Open now",
|
||||
"avgResolution": "Average time to resolve",
|
||||
"hours": "{{hours}} h",
|
||||
"mostIncidents": "Most incidents",
|
||||
"total": "total",
|
||||
"resolved": "Resolved",
|
||||
"automatic": "Automatic",
|
||||
"manual": "Manual",
|
||||
"autoManual": "{{automatic}} automatic · {{manual}} manual"
|
||||
},
|
||||
"notificationChannels": {
|
||||
"title": "Notification channels",
|
||||
"empty": "No channels yet."
|
||||
},
|
||||
"maintenance": {
|
||||
"title": "Maintenance windows",
|
||||
"empty": "No maintenance scheduled.",
|
||||
"runningNow": "Running now",
|
||||
"next": "Next window"
|
||||
},
|
||||
"statusPages": {
|
||||
"title": "Status pages",
|
||||
"empty": "No status pages yet.",
|
||||
"monitorCount": "{{count}} monitors",
|
||||
"published": "Published",
|
||||
"draft": "Draft"
|
||||
},
|
||||
"checksOnSchedule": {
|
||||
"title": "Check queue",
|
||||
"healthy": "All {{jobs}} jobs on schedule across {{workers}} worker(s).",
|
||||
"failing": "Failing jobs",
|
||||
"scheduled": "Scheduled jobs",
|
||||
"runningNow": "Running now"
|
||||
},
|
||||
"recentErrors": {
|
||||
"title": "Recent errors",
|
||||
"empty": "No errors logged.",
|
||||
"count": "{{count}} errors",
|
||||
"warnings": "Warnings"
|
||||
},
|
||||
"team": {
|
||||
"title": "Team members",
|
||||
"members": "{{count}} members",
|
||||
"unverified": "Unverified"
|
||||
}
|
||||
},
|
||||
"picker": {
|
||||
"trigger": "Edit cards",
|
||||
"title": "Dashboard cards",
|
||||
"selectAll": "Select all",
|
||||
"done": "Done",
|
||||
"reset": "Reset to defaults",
|
||||
"groups": {
|
||||
"uptime": "Uptime",
|
||||
"infrastructure": "Infrastructure",
|
||||
"incidents": "Incidents",
|
||||
"notifications": "Notifications",
|
||||
"maintenance": "Maintenance",
|
||||
"statusPages": "Status pages",
|
||||
"checks": "Checks",
|
||||
"logs": "System",
|
||||
"settings": "Settings"
|
||||
}
|
||||
},
|
||||
"empty": {
|
||||
"title": "No cards on your dashboard",
|
||||
"description": "Choose the cards you want to see. Your selection is remembered in this browser."
|
||||
},
|
||||
"reorder": {
|
||||
"moveUp": "Move up",
|
||||
"moveDown": "Move down"
|
||||
}
|
||||
},
|
||||
"proxies": {
|
||||
"header": {
|
||||
"title": "Proxies",
|
||||
@@ -548,7 +687,6 @@
|
||||
},
|
||||
"statBoxes": {
|
||||
"activeFor": "Active for",
|
||||
"checkingEvery": "Checking every {{interval}}",
|
||||
"certificateExpiry": "Certificate expiry",
|
||||
"domainExpiry": "Domain expiry",
|
||||
"lastCheck": "Last check",
|
||||
@@ -720,7 +858,7 @@
|
||||
"http": "Enter the URL or IP to monitor (e.g., https://example.com/ or 192.168.1.100) and add a clear display name that appears on the dashboard. Set an optional proxy server to connect through.",
|
||||
"ping": "Enter the IP address or hostname to ping (e.g., 192.168.1.100 or example.com) and add a clear display name that appears on the dashboard.",
|
||||
"port": "Enter the URL or IP of the server, the port number and a clear display name that appears on the dashboard.",
|
||||
"docker": "Enter a Docker socket such as unix:///var/run/docker.sock, a remote daemon such as tcp://host:2376 with TLS client certificates, or a Capture endpoint ending in /metrics/docker with its authorization secret. Every container on the host is monitored.",
|
||||
"docker": "Enter the Docker socket to monitor, as unix:///var/run/docker.sock or an absolute path such as /var/run/docker.sock. Every container on the host is monitored.",
|
||||
"game": "Enter the IP address or hostname and the port number to ping (e.g., 192.168.1.100 or example.com) and choose game type. Some games require enabling server queries in their config file — check your game server's documentation. See the <gamedigLink>supported games list</gamedigLink> for protocol details.",
|
||||
"pagespeed": "Track page load performance, Core Web Vitals, and optimization scores for your website.",
|
||||
"grpc": "Enter the hostname and port of the gRPC server, optionally specify a service name for the health check, and add a display name.",
|
||||
@@ -836,29 +974,6 @@
|
||||
"description": "This will permanently delete all monitoring history, statistics, and check data for your team. This action cannot be undone.",
|
||||
"confirm": "Yes, clear all stats"
|
||||
}
|
||||
},
|
||||
"dockerTls": {
|
||||
"title": "TLS credentials",
|
||||
"description": "Connect to a remote Docker daemon over mutual TLS. Paste the PEM files you would pass to docker --tlsverify. The client key is encrypted before it is stored and is never shown again.",
|
||||
"option": {
|
||||
"ca": {
|
||||
"label": "CA certificate",
|
||||
"placeholder": "-----BEGIN CERTIFICATE-----"
|
||||
},
|
||||
"cert": {
|
||||
"label": "Client certificate",
|
||||
"placeholder": "-----BEGIN CERTIFICATE-----"
|
||||
},
|
||||
"key": {
|
||||
"label": "Client key",
|
||||
"placeholder": "-----BEGIN PRIVATE KEY-----",
|
||||
"stored": "A key is stored. Leave blank to keep it."
|
||||
},
|
||||
"ignoreTls": {
|
||||
"label": "Ignore TLS/SSL errors",
|
||||
"description": "Skips verifying the daemon's certificate, so the CA certificate becomes optional. The client certificate and key are still required because the daemon verifies them."
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -1712,13 +1827,6 @@
|
||||
"uptime": {
|
||||
"title": "Uptime",
|
||||
"responseTime": "Response time"
|
||||
},
|
||||
"incidents": {
|
||||
"modalTitle": "Incidents for {{date}}",
|
||||
"loading": "Loading...",
|
||||
"noIncidents": "No incidents reported for this day.",
|
||||
"ongoing": "Ongoing",
|
||||
"errorLoading": "Failed to load incidents."
|
||||
}
|
||||
},
|
||||
"statusBar": {
|
||||
@@ -1916,26 +2024,6 @@
|
||||
"title": "Uptime monitors",
|
||||
"description": "Watch HTTP endpoints, pings, containers, and ports — and get alerted the moment something goes down."
|
||||
}
|
||||
},
|
||||
"dashboard": {
|
||||
"noData": "No data available at this moment.",
|
||||
"monitorStatus": {
|
||||
"ofUp": "of {{total}} up"
|
||||
},
|
||||
"cards": {
|
||||
"monitorStatus": "Monitor status",
|
||||
"monitorsByType": "Monitors by type"
|
||||
},
|
||||
"header": {
|
||||
"title": "Dashboard",
|
||||
"description": "See every monitor type in one place and spot what needs attention."
|
||||
},
|
||||
"editCards": "Edit cards",
|
||||
"editCardsModal": {
|
||||
"title": "Edit cards",
|
||||
"description": "Select the cards to display on your dashboard.",
|
||||
"done": "Done"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1377,9 +1377,6 @@
|
||||
"maintenance": "Mantenimiento",
|
||||
"paused": "Pausado",
|
||||
"up": "Operativo"
|
||||
},
|
||||
"incidents": {
|
||||
"errorLoading": "Error al cargar incidentes."
|
||||
}
|
||||
},
|
||||
"statusBar": {
|
||||
|
||||
@@ -1377,9 +1377,6 @@
|
||||
"maintenance": "Huolto",
|
||||
"paused": "Keskeytetty",
|
||||
"up": "Toiminnassa"
|
||||
},
|
||||
"incidents": {
|
||||
"errorLoading": "Häiriöiden lataaminen epäonnistui."
|
||||
}
|
||||
},
|
||||
"statusBar": {
|
||||
|
||||
@@ -1377,9 +1377,6 @@
|
||||
"maintenance": "Maintenance",
|
||||
"paused": "En pause",
|
||||
"up": "Opérationnel"
|
||||
},
|
||||
"incidents": {
|
||||
"errorLoading": "Échec du chargement des incidents."
|
||||
}
|
||||
},
|
||||
"statusBar": {
|
||||
|
||||
@@ -1473,9 +1473,6 @@
|
||||
"uptime": {
|
||||
"title": "Uptime",
|
||||
"responseTime": "Tempo di risposta"
|
||||
},
|
||||
"incidents": {
|
||||
"errorLoading": "Impossibile caricare gli incidenti."
|
||||
}
|
||||
},
|
||||
"statusBar": {
|
||||
|
||||
@@ -1377,9 +1377,6 @@
|
||||
"maintenance": "メンテナンス",
|
||||
"paused": "一時停止中",
|
||||
"up": "稼働中"
|
||||
},
|
||||
"incidents": {
|
||||
"errorLoading": "インシデントの読み込みに失敗しました。"
|
||||
}
|
||||
},
|
||||
"statusBar": {
|
||||
|
||||
@@ -1584,9 +1584,6 @@
|
||||
"uptime": {
|
||||
"responseTime": "Czas odpowiedzi",
|
||||
"title": "Czas pracy"
|
||||
},
|
||||
"incidents": {
|
||||
"errorLoading": "Nie udało się załadować incydentów."
|
||||
}
|
||||
},
|
||||
"preview": {
|
||||
|
||||
@@ -1377,9 +1377,6 @@
|
||||
"maintenance": "Manutenção",
|
||||
"paused": "Pausado",
|
||||
"up": "Operacional"
|
||||
},
|
||||
"incidents": {
|
||||
"errorLoading": "Falha ao carregar incidentes."
|
||||
}
|
||||
},
|
||||
"statusBar": {
|
||||
|
||||
@@ -1377,9 +1377,6 @@
|
||||
"maintenance": "Обслуживание",
|
||||
"paused": "Приостановлено",
|
||||
"up": "Работает"
|
||||
},
|
||||
"incidents": {
|
||||
"errorLoading": "Не удалось загрузить инциденты."
|
||||
}
|
||||
},
|
||||
"statusBar": {
|
||||
|
||||
@@ -1377,9 +1377,6 @@
|
||||
"maintenance": "การบำรุงรักษา",
|
||||
"paused": "หยุดชั่วคราว",
|
||||
"up": "ใช้งานได้"
|
||||
},
|
||||
"incidents": {
|
||||
"errorLoading": "ไม่สามารถโหลดเหตุการณ์ได้"
|
||||
}
|
||||
},
|
||||
"statusBar": {
|
||||
|
||||
@@ -1377,9 +1377,6 @@
|
||||
"maintenance": "Bakım",
|
||||
"paused": "Duraklatıldı",
|
||||
"up": "Çalışıyor"
|
||||
},
|
||||
"incidents": {
|
||||
"errorLoading": "Olaylar yüklenemedi."
|
||||
}
|
||||
},
|
||||
"statusBar": {
|
||||
|
||||
@@ -1377,9 +1377,6 @@
|
||||
"maintenance": "Обслуговування",
|
||||
"paused": "Призупинено",
|
||||
"up": "Працює"
|
||||
},
|
||||
"incidents": {
|
||||
"errorLoading": "Не вдалося завантажити інциденти."
|
||||
}
|
||||
},
|
||||
"statusBar": {
|
||||
|
||||
@@ -1377,9 +1377,6 @@
|
||||
"maintenance": "Bảo trì",
|
||||
"paused": "Tạm dừng",
|
||||
"up": "Hoạt động"
|
||||
},
|
||||
"incidents": {
|
||||
"errorLoading": "Không thể tải sự cố."
|
||||
}
|
||||
},
|
||||
"statusBar": {
|
||||
|
||||
@@ -1378,9 +1378,6 @@
|
||||
"maintenance": "维护中",
|
||||
"paused": "已暂停",
|
||||
"up": "运行中"
|
||||
},
|
||||
"incidents": {
|
||||
"errorLoading": "无法加载事件。"
|
||||
}
|
||||
},
|
||||
"statusBar": {
|
||||
|
||||
@@ -1377,9 +1377,6 @@
|
||||
"maintenance": "維護中",
|
||||
"paused": "已暫停",
|
||||
"up": "運行中"
|
||||
},
|
||||
"incidents": {
|
||||
"errorLoading": "無法載入事件。"
|
||||
}
|
||||
},
|
||||
"statusBar": {
|
||||
|
||||
@@ -9,7 +9,6 @@ services:
|
||||
- DB_CONNECTION_STRING=mongodb://mongodb:27017/uptime_db
|
||||
- CLIENT_HOST=${CLIENT_HOST:-http://localhost:52345}
|
||||
- JWT_SECRET=${JWT_SECRET:?set JWT_SECRET in your environment}
|
||||
- ENCRYPTION_KEY=${ENCRYPTION_KEY:-}
|
||||
stop_grace_period: 60s
|
||||
healthcheck:
|
||||
test:
|
||||
|
||||
@@ -27,17 +27,6 @@ CLIENT_HOST=http://localhost:5173
|
||||
# ----------------------
|
||||
ORIGIN=localhost
|
||||
|
||||
# Encryption
|
||||
# ------------------
|
||||
# Encrypts stored Docker TLS client keys. Not needed for socket-only Docker monitors.
|
||||
# Generate a key: openssl rand -base64 32
|
||||
# Key list: comma-separated; the first key encrypts, every key decrypts.
|
||||
# Split deployments: set the same value on the API and every worker.
|
||||
# Rotate a key: 1. deploy OLD_KEY,NEW_KEY everywhere so every process can read both
|
||||
# 2. deploy NEW_KEY,OLD_KEY everywhere so new writes use the new key
|
||||
# 3. wait for the worker to re-encrypt every row, then drop OLD_KEY
|
||||
# ENCRYPTION_KEY=<output of openssl rand -base64 32>
|
||||
|
||||
# Feature Flags
|
||||
# -------------
|
||||
# Set to "false" to disable the selectable theme feature on status pages.
|
||||
|
||||
+21
-404
@@ -422,6 +422,9 @@
|
||||
"secret": {
|
||||
"type": "string"
|
||||
},
|
||||
"sshPrivateKey": {
|
||||
"type": "string"
|
||||
},
|
||||
"cpuAlertThreshold": {
|
||||
"type": "number"
|
||||
},
|
||||
@@ -463,18 +466,6 @@
|
||||
"geoCheckInterval": {
|
||||
"type": "number"
|
||||
},
|
||||
"dockerLogsEnabled": {
|
||||
"type": "boolean"
|
||||
},
|
||||
"dockerTlsCa": {
|
||||
"type": "string"
|
||||
},
|
||||
"dockerTlsCert": {
|
||||
"type": "string"
|
||||
},
|
||||
"dockerTlsKeySet": {
|
||||
"type": "boolean"
|
||||
},
|
||||
"dnsServer": {
|
||||
"type": "string"
|
||||
},
|
||||
@@ -522,7 +513,6 @@
|
||||
"geoCheckEnabled",
|
||||
"geoCheckLocations",
|
||||
"geoCheckInterval",
|
||||
"dockerLogsEnabled",
|
||||
"teamId",
|
||||
"userId",
|
||||
"createdAt",
|
||||
@@ -650,6 +640,9 @@
|
||||
"secret": {
|
||||
"type": "string"
|
||||
},
|
||||
"sshPrivateKey": {
|
||||
"type": "string"
|
||||
},
|
||||
"cpuAlertThreshold": {
|
||||
"type": "number"
|
||||
},
|
||||
@@ -691,18 +684,6 @@
|
||||
"geoCheckInterval": {
|
||||
"type": "number"
|
||||
},
|
||||
"dockerLogsEnabled": {
|
||||
"type": "boolean"
|
||||
},
|
||||
"dockerTlsCa": {
|
||||
"type": "string"
|
||||
},
|
||||
"dockerTlsCert": {
|
||||
"type": "string"
|
||||
},
|
||||
"dockerTlsKeySet": {
|
||||
"type": "boolean"
|
||||
},
|
||||
"dnsServer": {
|
||||
"type": "string"
|
||||
},
|
||||
@@ -752,7 +733,6 @@
|
||||
"geoCheckEnabled",
|
||||
"geoCheckLocations",
|
||||
"geoCheckInterval",
|
||||
"dockerLogsEnabled",
|
||||
"teamId",
|
||||
"userId",
|
||||
"createdAt",
|
||||
@@ -949,9 +929,6 @@
|
||||
{
|
||||
"$ref": "#/components/schemas/PushoverNotification"
|
||||
},
|
||||
{
|
||||
"$ref": "#/components/schemas/SignalgridNotification"
|
||||
},
|
||||
{
|
||||
"$ref": "#/components/schemas/TwilioNotification"
|
||||
},
|
||||
@@ -972,7 +949,6 @@
|
||||
"teams": "#/components/schemas/TeamsNotification",
|
||||
"telegram": "#/components/schemas/TelegramNotification",
|
||||
"pushover": "#/components/schemas/PushoverNotification",
|
||||
"signalgrid": "#/components/schemas/SignalgridNotification",
|
||||
"twilio": "#/components/schemas/TwilioNotification",
|
||||
"ntfy": "#/components/schemas/NtfyNotification"
|
||||
}
|
||||
@@ -1404,34 +1380,6 @@
|
||||
"accessToken": "a1234567890abcdef"
|
||||
}
|
||||
},
|
||||
"SignalgridNotification": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"notificationName": {
|
||||
"type": "string",
|
||||
"minLength": 1
|
||||
},
|
||||
"type": {
|
||||
"type": "string",
|
||||
"enum": ["signalgrid"]
|
||||
},
|
||||
"address": {
|
||||
"type": "string",
|
||||
"minLength": 1
|
||||
},
|
||||
"accessToken": {
|
||||
"type": "string",
|
||||
"minLength": 1
|
||||
}
|
||||
},
|
||||
"required": ["notificationName", "type", "address", "accessToken"],
|
||||
"example": {
|
||||
"notificationName": "Signalgrid",
|
||||
"type": "signalgrid",
|
||||
"address": "your-channel",
|
||||
"accessToken": "your-client-key"
|
||||
}
|
||||
},
|
||||
"TwilioNotification": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
@@ -7142,6 +7090,9 @@
|
||||
"secret": {
|
||||
"type": "string"
|
||||
},
|
||||
"sshPrivateKey": {
|
||||
"type": "string"
|
||||
},
|
||||
"cpuAlertThreshold": {
|
||||
"type": "number"
|
||||
},
|
||||
@@ -7183,18 +7134,6 @@
|
||||
"geoCheckInterval": {
|
||||
"type": "number"
|
||||
},
|
||||
"dockerLogsEnabled": {
|
||||
"type": "boolean"
|
||||
},
|
||||
"dockerTlsCa": {
|
||||
"type": "string"
|
||||
},
|
||||
"dockerTlsCert": {
|
||||
"type": "string"
|
||||
},
|
||||
"dockerTlsKeySet": {
|
||||
"type": "boolean"
|
||||
},
|
||||
"dnsServer": {
|
||||
"type": "string"
|
||||
},
|
||||
@@ -7244,7 +7183,6 @@
|
||||
"geoCheckEnabled",
|
||||
"geoCheckLocations",
|
||||
"geoCheckInterval",
|
||||
"dockerLogsEnabled",
|
||||
"teamId",
|
||||
"userId",
|
||||
"createdAt",
|
||||
@@ -7717,6 +7655,9 @@
|
||||
"secret": {
|
||||
"type": "string"
|
||||
},
|
||||
"sshPrivateKey": {
|
||||
"type": "string"
|
||||
},
|
||||
"cpuAlertThreshold": {
|
||||
"type": "number"
|
||||
},
|
||||
@@ -7758,18 +7699,6 @@
|
||||
"geoCheckInterval": {
|
||||
"type": "number"
|
||||
},
|
||||
"dockerLogsEnabled": {
|
||||
"type": "boolean"
|
||||
},
|
||||
"dockerTlsCa": {
|
||||
"type": "string"
|
||||
},
|
||||
"dockerTlsCert": {
|
||||
"type": "string"
|
||||
},
|
||||
"dockerTlsKeySet": {
|
||||
"type": "boolean"
|
||||
},
|
||||
"dnsServer": {
|
||||
"type": "string"
|
||||
},
|
||||
@@ -7819,7 +7748,6 @@
|
||||
"geoCheckEnabled",
|
||||
"geoCheckLocations",
|
||||
"geoCheckInterval",
|
||||
"dockerLogsEnabled",
|
||||
"teamId",
|
||||
"userId",
|
||||
"createdAt",
|
||||
@@ -8056,231 +7984,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"/monitors/docker/details/{monitorId}/containers/{containerName}/logs": {
|
||||
"get": {
|
||||
"tags": ["monitors"],
|
||||
"summary": "Get stored log lines for one container on a Docker host monitor, newest first",
|
||||
"security": [
|
||||
{
|
||||
"bearerAuth": []
|
||||
}
|
||||
],
|
||||
"parameters": [
|
||||
{
|
||||
"schema": {
|
||||
"type": "string",
|
||||
"minLength": 1
|
||||
},
|
||||
"required": true,
|
||||
"name": "monitorId",
|
||||
"in": "path"
|
||||
},
|
||||
{
|
||||
"schema": {
|
||||
"type": "string",
|
||||
"minLength": 1
|
||||
},
|
||||
"required": true,
|
||||
"name": "containerName",
|
||||
"in": "path"
|
||||
},
|
||||
{
|
||||
"schema": {
|
||||
"type": "string",
|
||||
"format": "date-time"
|
||||
},
|
||||
"required": false,
|
||||
"name": "before",
|
||||
"in": "query"
|
||||
},
|
||||
{
|
||||
"schema": {
|
||||
"type": "string",
|
||||
"format": "date-time"
|
||||
},
|
||||
"required": false,
|
||||
"name": "after",
|
||||
"in": "query"
|
||||
},
|
||||
{
|
||||
"schema": {
|
||||
"type": "integer",
|
||||
"minimum": 1,
|
||||
"maximum": 50,
|
||||
"default": 20
|
||||
},
|
||||
"required": false,
|
||||
"name": "limit",
|
||||
"in": "query"
|
||||
}
|
||||
],
|
||||
"responses": {
|
||||
"200": {
|
||||
"description": "OK",
|
||||
"content": {
|
||||
"application/json": {
|
||||
"schema": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"success": {
|
||||
"type": "boolean",
|
||||
"enum": [true]
|
||||
},
|
||||
"msg": {
|
||||
"type": "string"
|
||||
},
|
||||
"data": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"logs": {
|
||||
"type": "array",
|
||||
"items": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"id": {
|
||||
"type": "string"
|
||||
},
|
||||
"metadata": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"monitorId": {
|
||||
"type": "string"
|
||||
},
|
||||
"teamId": {
|
||||
"type": "string"
|
||||
},
|
||||
"containerId": {
|
||||
"type": "string"
|
||||
},
|
||||
"containerName": {
|
||||
"type": "string"
|
||||
}
|
||||
},
|
||||
"required": ["monitorId", "teamId", "containerId", "containerName"]
|
||||
},
|
||||
"lines": {
|
||||
"type": "array",
|
||||
"items": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"ts": {
|
||||
"type": "string"
|
||||
},
|
||||
"stream": {
|
||||
"type": "string",
|
||||
"enum": ["stdout", "stderr"]
|
||||
},
|
||||
"text": {
|
||||
"type": "string"
|
||||
}
|
||||
},
|
||||
"required": ["ts", "stream", "text"]
|
||||
}
|
||||
},
|
||||
"gap": {
|
||||
"type": "boolean"
|
||||
},
|
||||
"checkedAt": {
|
||||
"type": "string"
|
||||
},
|
||||
"expiry": {
|
||||
"type": "string"
|
||||
},
|
||||
"createdAt": {
|
||||
"type": "string"
|
||||
},
|
||||
"updatedAt": {
|
||||
"type": "string"
|
||||
}
|
||||
},
|
||||
"required": ["id", "metadata", "lines", "gap", "checkedAt", "expiry", "createdAt", "updatedAt"]
|
||||
}
|
||||
},
|
||||
"nextCursor": {
|
||||
"type": "string",
|
||||
"nullable": true
|
||||
}
|
||||
},
|
||||
"required": ["logs", "nextCursor"]
|
||||
}
|
||||
},
|
||||
"required": ["success", "msg", "data"]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"401": {
|
||||
"description": "Unauthorized",
|
||||
"content": {
|
||||
"application/json": {
|
||||
"schema": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"success": {
|
||||
"type": "boolean",
|
||||
"enum": [false]
|
||||
},
|
||||
"msg": {
|
||||
"type": "string"
|
||||
},
|
||||
"data": {
|
||||
"nullable": true
|
||||
}
|
||||
},
|
||||
"required": ["success", "msg"]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"403": {
|
||||
"description": "Forbidden",
|
||||
"content": {
|
||||
"application/json": {
|
||||
"schema": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"success": {
|
||||
"type": "boolean",
|
||||
"enum": [false]
|
||||
},
|
||||
"msg": {
|
||||
"type": "string"
|
||||
},
|
||||
"data": {
|
||||
"nullable": true
|
||||
}
|
||||
},
|
||||
"required": ["success", "msg"]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"500": {
|
||||
"description": "Internal server error",
|
||||
"content": {
|
||||
"application/json": {
|
||||
"schema": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"success": {
|
||||
"type": "boolean",
|
||||
"enum": [false]
|
||||
},
|
||||
"msg": {
|
||||
"type": "string"
|
||||
},
|
||||
"data": {
|
||||
"nullable": true
|
||||
}
|
||||
},
|
||||
"required": ["success", "msg"]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"/monitors/pagespeed/details/{monitorId}": {
|
||||
"get": {
|
||||
"tags": ["monitors"],
|
||||
@@ -9205,6 +8908,9 @@
|
||||
"secret": {
|
||||
"type": "string"
|
||||
},
|
||||
"sshPrivateKey": {
|
||||
"type": "string"
|
||||
},
|
||||
"jsonPath": {
|
||||
"anyOf": [
|
||||
{
|
||||
@@ -9305,42 +9011,6 @@
|
||||
"type": "number",
|
||||
"minimum": 300000
|
||||
},
|
||||
"dockerLogsEnabled": {
|
||||
"type": "boolean"
|
||||
},
|
||||
"dockerTlsCa": {
|
||||
"anyOf": [
|
||||
{
|
||||
"type": "string"
|
||||
},
|
||||
{
|
||||
"type": "string",
|
||||
"enum": [""]
|
||||
}
|
||||
]
|
||||
},
|
||||
"dockerTlsCert": {
|
||||
"anyOf": [
|
||||
{
|
||||
"type": "string"
|
||||
},
|
||||
{
|
||||
"type": "string",
|
||||
"enum": [""]
|
||||
}
|
||||
]
|
||||
},
|
||||
"dockerTlsKey": {
|
||||
"anyOf": [
|
||||
{
|
||||
"type": "string"
|
||||
},
|
||||
{
|
||||
"type": "string",
|
||||
"enum": [""]
|
||||
}
|
||||
]
|
||||
},
|
||||
"dnsServer": {
|
||||
"type": "string",
|
||||
"minLength": 1
|
||||
@@ -9934,6 +9604,9 @@
|
||||
"secret": {
|
||||
"type": "string"
|
||||
},
|
||||
"sshPrivateKey": {
|
||||
"type": "string"
|
||||
},
|
||||
"cpuAlertThreshold": {
|
||||
"type": "number",
|
||||
"default": 100
|
||||
@@ -10029,10 +9702,6 @@
|
||||
"minimum": 300000,
|
||||
"default": 300000
|
||||
},
|
||||
"dockerLogsEnabled": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"dnsServer": {
|
||||
"type": "string",
|
||||
"minLength": 1
|
||||
@@ -10468,6 +10137,9 @@
|
||||
"secret": {
|
||||
"type": "string"
|
||||
},
|
||||
"sshPrivateKey": {
|
||||
"type": "string"
|
||||
},
|
||||
"ignoreTlsErrors": {
|
||||
"type": "boolean"
|
||||
},
|
||||
@@ -10597,42 +10269,6 @@
|
||||
"type": "number",
|
||||
"minimum": 300000
|
||||
},
|
||||
"dockerLogsEnabled": {
|
||||
"type": "boolean"
|
||||
},
|
||||
"dockerTlsCa": {
|
||||
"anyOf": [
|
||||
{
|
||||
"type": "string"
|
||||
},
|
||||
{
|
||||
"type": "string",
|
||||
"enum": [""]
|
||||
}
|
||||
]
|
||||
},
|
||||
"dockerTlsCert": {
|
||||
"anyOf": [
|
||||
{
|
||||
"type": "string"
|
||||
},
|
||||
{
|
||||
"type": "string",
|
||||
"enum": [""]
|
||||
}
|
||||
]
|
||||
},
|
||||
"dockerTlsKey": {
|
||||
"anyOf": [
|
||||
{
|
||||
"type": "string"
|
||||
},
|
||||
{
|
||||
"type": "string",
|
||||
"enum": [""]
|
||||
}
|
||||
]
|
||||
},
|
||||
"dnsServer": {
|
||||
"type": "string",
|
||||
"minLength": 1
|
||||
@@ -13294,25 +12930,6 @@
|
||||
"globalProxyId": {
|
||||
"type": "string",
|
||||
"nullable": true
|
||||
},
|
||||
"egressCheckEnabled": {
|
||||
"type": "boolean"
|
||||
},
|
||||
"egressCheckTargets": {
|
||||
"type": "array",
|
||||
"items": {
|
||||
"type": "string",
|
||||
"minLength": 1,
|
||||
"maxLength": 253
|
||||
},
|
||||
"maxItems": 10
|
||||
},
|
||||
"egressNotifications": {
|
||||
"type": "array",
|
||||
"items": {
|
||||
"type": "string",
|
||||
"pattern": "^[0-9a-fA-F]{24}$"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Generated
-7
@@ -18,7 +18,6 @@
|
||||
"compression": "1.8.1",
|
||||
"cookie-parser": "^1.4.7",
|
||||
"cors": "^2.8.5",
|
||||
"dayjs": "^1.11.23",
|
||||
"dockerode": "5.0.0",
|
||||
"dotenv": "^16.4.5",
|
||||
"express": "^4.19.2",
|
||||
@@ -5804,12 +5803,6 @@
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/dayjs": {
|
||||
"version": "1.11.23",
|
||||
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.23.tgz",
|
||||
"integrity": "sha512-QDTCU0M0MxR3hQfnlDJfwekQiaanm1ubOD231u73WBckQ/fsamwRLiE2GBz6D3a/xF1NgfiDLJjXBa1hYOYTtQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/debug": {
|
||||
"version": "4.4.3",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
|
||||
|
||||
+1
-2
@@ -15,7 +15,7 @@
|
||||
"worker": "QUEUE_MODE=worker node ./dist/index.js",
|
||||
"worker:dev": "QUEUE_MODE=worker nodemon --exec tsx src/index.js",
|
||||
"clean": "rm -rf dist",
|
||||
"build": "npm run clean && npm run build:openapi && tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json && cp -r src/templates dist/templates && mkdir -p dist/service && cp -r src/service/protos dist/service/",
|
||||
"build": "npm run clean && npm run build:openapi && tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json && cp -r src/templates dist/templates",
|
||||
"typeCheck": "tsc --noEmit",
|
||||
"build:openapi": "tsc --noEmit && tsx scripts/buildOpenApi.ts",
|
||||
"lint": "eslint .",
|
||||
@@ -42,7 +42,6 @@
|
||||
"compression": "1.8.1",
|
||||
"cookie-parser": "^1.4.7",
|
||||
"cors": "^2.8.5",
|
||||
"dayjs": "^1.11.23",
|
||||
"dockerode": "5.0.0",
|
||||
"dotenv": "^16.4.5",
|
||||
"express": "^4.19.2",
|
||||
|
||||
@@ -5,7 +5,6 @@ import { requireTeamId, requireUserEmail, requireUserId, requireUserRoles } from
|
||||
|
||||
import {
|
||||
registrationBodyValidation,
|
||||
registerInviteTokenValidation,
|
||||
loginValidation,
|
||||
recoveryValidation,
|
||||
recoveryTokenBodyValidation,
|
||||
@@ -49,7 +48,7 @@ class AuthController implements IAuthController {
|
||||
|
||||
registerUser = catchAsync(async (req: Request, res: Response) => {
|
||||
const newUser = req.body.user;
|
||||
const newUserToken = registerInviteTokenValidation.parse(req.body.token);
|
||||
const newUserToken = req.body.token;
|
||||
if (newUser?.email) {
|
||||
const newUserEmail = requireUserEmail(newUser.email);
|
||||
newUser.email = newUserEmail.toLowerCase();
|
||||
|
||||
@@ -10,10 +10,7 @@ type WhoisModule = typeof whoiser;
|
||||
export const fetchMonitorCertificate = async (checker: SSLCheckerType, monitor: Monitor): Promise<SSLDetails> => {
|
||||
const monitorUrl = new URL(monitor.url);
|
||||
const hostname = monitorUrl.hostname;
|
||||
// An explicit port in the URL is the most visible to the user, so it takes precedence over monitor.port.
|
||||
const urlPort = monitorUrl.port ? Number(monitorUrl.port) : undefined;
|
||||
const port = urlPort ?? monitor.port;
|
||||
const cert = await checker(hostname, port !== undefined ? { port } : undefined);
|
||||
const cert = await checker(hostname);
|
||||
if (cert?.validTo === null || cert?.validTo === undefined) {
|
||||
throw new Error("Certificate not found");
|
||||
}
|
||||
|
||||
@@ -6,7 +6,6 @@ import { AppError } from "@/utils/AppError.js";
|
||||
import { ISettingsService } from "@/domain/app-settings/app-settings.service.js";
|
||||
import { IEmailService } from "@/service/emailService.js";
|
||||
import { IProxiesService } from "@/domain/proxies/proxy.service.js";
|
||||
import { IEgressStateService } from "@/domain/egress/egress-state.service.js";
|
||||
import { Settings } from "@/domain/app-settings/app-settings.type.js";
|
||||
|
||||
export interface ISettingsController {
|
||||
@@ -19,17 +18,10 @@ class SettingsController implements ISettingsController {
|
||||
private settingsService: ISettingsService;
|
||||
private emailService: IEmailService;
|
||||
private proxiesService: IProxiesService;
|
||||
private egressStateService: IEgressStateService;
|
||||
constructor(
|
||||
settingsService: ISettingsService,
|
||||
emailService: IEmailService,
|
||||
proxiesService: IProxiesService,
|
||||
egressStateService: IEgressStateService
|
||||
) {
|
||||
constructor(settingsService: ISettingsService, emailService: IEmailService, proxiesService: IProxiesService) {
|
||||
this.settingsService = settingsService;
|
||||
this.emailService = emailService;
|
||||
this.proxiesService = proxiesService;
|
||||
this.egressStateService = egressStateService;
|
||||
}
|
||||
|
||||
buildAppSettings = async (dbSettings: Settings) => {
|
||||
@@ -78,14 +70,7 @@ class SettingsController implements ISettingsController {
|
||||
}
|
||||
}
|
||||
|
||||
const previousSettings = await this.settingsService.getDBSettings();
|
||||
const updatedSettings = await this.settingsService.updateDbSettings(validatedBody);
|
||||
|
||||
// Switching the egress check on or off starts from a clean state: no degraded episode, no pending recovery job
|
||||
if (validatedBody.egressCheckEnabled !== undefined && validatedBody.egressCheckEnabled !== previousSettings.egressCheckEnabled) {
|
||||
await this.egressStateService.reset();
|
||||
}
|
||||
|
||||
const returnSettings = await this.buildAppSettings(updatedSettings);
|
||||
return res.status(200).json({
|
||||
success: true,
|
||||
|
||||
@@ -7,8 +7,6 @@ import {
|
||||
getStatusPageQueryValidation,
|
||||
imageValidation,
|
||||
resolveStatusPageQueryValidation,
|
||||
getPublicMonitorIncidentsParamValidation,
|
||||
getPublicMonitorIncidentsQueryValidation,
|
||||
} from "@/api/validation/statusPageValidation.js";
|
||||
import { AppError } from "@/utils/AppError.js";
|
||||
import { requireTeamId, requireUserId } from "@/api/controllers/controllerUtils.js";
|
||||
@@ -19,7 +17,6 @@ export interface IStatusPageController {
|
||||
createStatusPage: RequestHandler;
|
||||
updateStatusPage: RequestHandler;
|
||||
getStatusPageByUrl: RequestHandler;
|
||||
getPublicMonitorIncidents: RequestHandler;
|
||||
resolveStatusPageByDomain: RequestHandler;
|
||||
getStatusPagesByTeamId: RequestHandler;
|
||||
deleteStatusPage: RequestHandler;
|
||||
@@ -88,19 +85,6 @@ class StatusPageController implements IStatusPageController {
|
||||
});
|
||||
});
|
||||
|
||||
getPublicMonitorIncidents = catchAsync(async (req: Request, res: Response) => {
|
||||
const { url, monitorId } = getPublicMonitorIncidentsParamValidation.parse(req.params);
|
||||
const { date } = getPublicMonitorIncidentsQueryValidation.parse(req.query);
|
||||
|
||||
const incidents = await this.statusPageService.getPublicMonitorIncidents(url, monitorId, date, req.user?.teamId);
|
||||
|
||||
return res.status(200).json({
|
||||
success: true,
|
||||
msg: "Incidents retrieved successfully",
|
||||
data: { incidents },
|
||||
});
|
||||
});
|
||||
|
||||
resolveStatusPageByDomain = catchAsync(async (req: Request, res: Response) => {
|
||||
const { range } = resolveStatusPageQueryValidation.parse(req.query);
|
||||
const domain = resolveStatusPageDomainFromRequest(req.hostname, req.query.domain as string | undefined);
|
||||
|
||||
@@ -16,15 +16,7 @@ export const isPublicStatusPageApiPath = (method: string, path: string): boolean
|
||||
return true;
|
||||
}
|
||||
|
||||
if (!slug || slug === "team") {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (slug.includes("/")) {
|
||||
const parts = slug.split("/");
|
||||
if (parts.length === 3 && parts[1] === "incidents") {
|
||||
return true;
|
||||
}
|
||||
if (!slug || slug === "team" || slug.includes("/")) {
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
@@ -14,7 +14,6 @@ export const createStatusPageRoutes = (
|
||||
router.put("/:id", imageUpload.single("logo"), verifyJWT, isAllowed(["admin", "superadmin"]), statusPageController.updateStatusPage);
|
||||
router.get("/resolve", statusPageController.resolveStatusPageByDomain);
|
||||
router.get("/:url", verifyStatusPageAccess, statusPageController.getStatusPageByUrl);
|
||||
router.get("/:url/incidents/:monitorId", verifyStatusPageAccess, statusPageController.getPublicMonitorIncidents);
|
||||
router.delete("/:id", verifyJWT, isAllowed(["admin", "superadmin"]), statusPageController.deleteStatusPage);
|
||||
return router;
|
||||
};
|
||||
@@ -23,8 +23,6 @@ export const registrationBodyValidation = z.object({
|
||||
inviteToken: z.string().optional().default(""),
|
||||
});
|
||||
|
||||
export const registerInviteTokenValidation = z.string().optional().default("");
|
||||
|
||||
export const recoveryValidation = z.object({
|
||||
email: z.email("Must be a valid email address"),
|
||||
});
|
||||
|
||||
@@ -15,9 +15,6 @@ import {
|
||||
import { DateRanges, SortOrders } from "@/types/query.js";
|
||||
import { DockerContainerStates, DockerHealthStatuses, DockerLogStreams, DockerPortProtocols } from "@/domain/docker/docker.type.js";
|
||||
import { DOCKER_LOG_PAGE_DEFAULT, DOCKER_LOG_PAGE_MAX } from "@/domain/docker/docker-log.type.js";
|
||||
import { isCaptureDockerUrl, isDockerSocketUrl, isDockerTlsUrl } from "@/utils/dockerHost.js";
|
||||
import { X509Certificate } from "node:crypto";
|
||||
import { keyMatchesCertificate, parseCertificates, parsePrivateKey } from "@/utils/pem.js";
|
||||
|
||||
const httpStatusCode = z.number().refine((code) => HttpStatusCodeSet.has(code), { message: "Must be a valid HTTP status code" });
|
||||
|
||||
@@ -123,66 +120,19 @@ const refineProxySelection = (body: { proxyMode?: string; proxyId?: string }, ct
|
||||
}
|
||||
};
|
||||
|
||||
const dockerUrlRegex = /^(?:unix:\/\/\/\S+|\/\S+)$/;
|
||||
|
||||
const refineDockerUrl = (data: { type?: string; url?: string }, ctx: z.RefinementCtx) => {
|
||||
if (data.type !== "docker" || data.url === undefined) return;
|
||||
if (!isDockerSocketUrl(data.url) && !isDockerTlsUrl(data.url) && !isCaptureDockerUrl(data.url)) {
|
||||
if (!dockerUrlRegex.test(data.url)) {
|
||||
ctx.addIssue({
|
||||
code: "custom",
|
||||
path: ["url"],
|
||||
message: "Docker host must be a socket path, a TLS daemon URL, or a Capture /metrics/docker endpoint",
|
||||
message: "Docker host must be unix:///path or an absolute socket path",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Edits are checked in the monitor service against the stored secret, since the body may omit either the url or the secret.
|
||||
const refineCaptureSecret = (data: { type?: string; url?: string; secret?: string }, ctx: z.RefinementCtx) => {
|
||||
if (data.type !== "docker" || !isCaptureDockerUrl(data.url)) return;
|
||||
if (!data.secret?.trim()) ctx.addIssue({ code: "custom", path: ["secret"], message: "Capture API secret is required" });
|
||||
};
|
||||
|
||||
type DockerTlsFields = {
|
||||
type?: string;
|
||||
url?: string;
|
||||
ignoreTlsErrors?: boolean;
|
||||
dockerTlsCa?: string;
|
||||
dockerTlsCert?: string;
|
||||
dockerTlsKey?: string;
|
||||
};
|
||||
|
||||
const refineDockerTls = (mode: "create" | "edit") => (data: DockerTlsFields, ctx: z.RefinementCtx) => {
|
||||
if (data.type !== "docker" || !isDockerTlsUrl(data.url)) return;
|
||||
const issue = (path: string, message: string) => ctx.addIssue({ code: "custom", path: [path], message });
|
||||
|
||||
if (!data.dockerTlsCert) issue("dockerTlsCert", "TLS certificate is required for a TLS Docker host");
|
||||
|
||||
if (mode === "create" && !data.dockerTlsKey) issue("dockerTlsKey", "TLS key is required for a TLS Docker host");
|
||||
|
||||
if (!data.ignoreTlsErrors && !data.dockerTlsCa) issue("dockerTlsCa", "CA certificate is required unless TLS errors are ignored");
|
||||
|
||||
let certificate: X509Certificate | undefined;
|
||||
|
||||
try {
|
||||
if (data.dockerTlsCa) parseCertificates(data.dockerTlsCa);
|
||||
} catch (error: unknown) {
|
||||
issue("dockerTlsCa", error instanceof Error ? error.message : "Docker TLS CA error");
|
||||
}
|
||||
|
||||
try {
|
||||
if (data.dockerTlsCert) [certificate] = parseCertificates(data.dockerTlsCert);
|
||||
} catch (error) {
|
||||
issue("dockerTlsCert", error instanceof Error ? error.message : "Docker TLS cert error");
|
||||
}
|
||||
|
||||
try {
|
||||
if (data.dockerTlsKey) {
|
||||
const key = parsePrivateKey(data.dockerTlsKey);
|
||||
if (certificate && !keyMatchesCertificate(key, certificate)) issue("dockerTlsKey", "Key does not match certificate");
|
||||
}
|
||||
} catch (error: unknown) {
|
||||
issue("dockerTlsKey", error instanceof Error ? error.message : "Docker TLS key error");
|
||||
}
|
||||
};
|
||||
|
||||
export const createMonitorBodyValidation = z
|
||||
.object({
|
||||
_id: z.string().optional(),
|
||||
@@ -220,9 +170,6 @@ export const createMonitorBodyValidation = z
|
||||
geoCheckLocations: z.array(z.enum(GeoContinents)).optional(),
|
||||
geoCheckInterval: z.number().min(300000).optional(),
|
||||
dockerLogsEnabled: z.boolean().optional(),
|
||||
dockerTlsCa: z.union([z.string(), z.literal("")]).optional(),
|
||||
dockerTlsCert: z.union([z.string(), z.literal("")]).optional(),
|
||||
dockerTlsKey: z.union([z.string(), z.literal("")]).optional(),
|
||||
dnsServer: dnsServerValidation.optional(),
|
||||
dnsRecordType: z.enum(DnsRecordTypes).optional(),
|
||||
})
|
||||
@@ -231,9 +178,7 @@ export const createMonitorBodyValidation = z
|
||||
.superRefine(refineHeadMatching)
|
||||
.superRefine(refineRegexPattern)
|
||||
.superRefine(refineProxySelection)
|
||||
.superRefine(refineDockerUrl)
|
||||
.superRefine(refineCaptureSecret)
|
||||
.superRefine(refineDockerTls("create"));
|
||||
.superRefine(refineDockerUrl);
|
||||
|
||||
export const editMonitorBodyValidation = z
|
||||
.object({
|
||||
@@ -270,9 +215,6 @@ export const editMonitorBodyValidation = z
|
||||
geoCheckLocations: z.array(z.enum(GeoContinents)).optional(),
|
||||
geoCheckInterval: z.number().min(300000).optional(),
|
||||
dockerLogsEnabled: z.boolean().optional(),
|
||||
dockerTlsCa: z.union([z.string(), z.literal("")]).optional(),
|
||||
dockerTlsCert: z.union([z.string(), z.literal("")]).optional(),
|
||||
dockerTlsKey: z.union([z.string(), z.literal("")]).optional(),
|
||||
dnsServer: dnsServerValidation.optional(),
|
||||
dnsRecordType: z.enum(DnsRecordTypes).optional(),
|
||||
})
|
||||
@@ -281,8 +223,7 @@ export const editMonitorBodyValidation = z
|
||||
.superRefine(refineHeadMatching)
|
||||
.superRefine(refineRegexPattern)
|
||||
.superRefine(refineProxySelection)
|
||||
.superRefine(refineDockerUrl)
|
||||
.superRefine(refineDockerTls("edit"));
|
||||
.superRefine(refineDockerUrl);
|
||||
|
||||
export const pauseMonitorParamValidation = z.object({
|
||||
monitorId: z.string().min(1, "Monitor ID is required"),
|
||||
@@ -350,6 +291,7 @@ const importedMonitorSchema = z
|
||||
geoCheckLocations: z.array(z.enum(GeoContinents)).default([]),
|
||||
geoCheckInterval: z.number().min(300000).default(300000),
|
||||
dockerLogsEnabled: z.boolean().default(false),
|
||||
|
||||
dnsServer: dnsServerValidation.optional(),
|
||||
dnsRecordType: z.enum(DnsRecordTypes).optional(),
|
||||
createdAt: z.string().optional(),
|
||||
@@ -360,8 +302,7 @@ const importedMonitorSchema = z
|
||||
.superRefine(refineHeadMatching)
|
||||
.superRefine(refineRegexPattern)
|
||||
.superRefine(refineProxySelection)
|
||||
.superRefine(refineDockerUrl)
|
||||
.superRefine(refineCaptureSecret);
|
||||
.superRefine(refineDockerUrl);
|
||||
|
||||
export const importMonitorsBodyValidation = z.object({
|
||||
monitors: z.array(importedMonitorSchema).min(1, "At least one monitor is required"),
|
||||
@@ -440,9 +381,6 @@ export const monitorResponseSchema = z
|
||||
geoCheckLocations: z.array(z.enum(GeoContinents)),
|
||||
geoCheckInterval: z.number(),
|
||||
dockerLogsEnabled: z.boolean(),
|
||||
dockerTlsCa: z.string().optional(),
|
||||
dockerTlsCert: z.string().optional(),
|
||||
dockerTlsKeySet: z.boolean().optional(),
|
||||
dnsServer: z.string().optional(),
|
||||
dnsRecordType: z.enum(DnsRecordTypes).optional(),
|
||||
teamId: z.string(),
|
||||
|
||||
@@ -1,17 +1,6 @@
|
||||
import { CHECK_TTL_SENTINEL } from "@/domain/checks/check.type.js";
|
||||
import { MAX_EGRESS_TARGETS } from "@/domain/egress/egress.type.js";
|
||||
import { parseEgressTarget } from "@/utils/egressTarget.js";
|
||||
import { z } from "zod";
|
||||
|
||||
// A reliability target is a bare host/IP (ICMP ping), host:port (TCP connect) or an http(s) URL.
|
||||
// Parsed with the same function the probe uses, so nothing the validator accepts can fail to probe.
|
||||
const egressTargetValidation = z
|
||||
.string()
|
||||
.trim()
|
||||
.min(1)
|
||||
.max(253)
|
||||
.refine((target) => parseEgressTarget(target) !== null, "Enter a hostname or IP address, host:port, or http(s) URL");
|
||||
|
||||
//****************************************
|
||||
// Settings Validations
|
||||
//****************************************
|
||||
@@ -53,10 +42,6 @@ export const updateAppSettingsBodyValidation = z
|
||||
.optional(),
|
||||
globalProxyEnabled: z.boolean().optional(),
|
||||
globalProxyId: z.string().nullable().optional(),
|
||||
|
||||
egressCheckEnabled: z.boolean().optional(),
|
||||
egressCheckTargets: z.array(egressTargetValidation).max(MAX_EGRESS_TARGETS).optional(), // empty list falls back to DEFAULT_EGRESS_TARGETS
|
||||
egressNotifications: z.array(z.string().regex(/^[0-9a-fA-F]{24}$/, "Invalid notification id")).optional(),
|
||||
})
|
||||
.strip()
|
||||
.superRefine((body, ctx) => {
|
||||
|
||||
Loaded 100 of 221 files, more files were not shown because too many files have changed in this diff.
Show more
Reference in new issue
Block a user