diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 10bf888d9..8b1378917 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -1 +1 @@ -* @ajhollid @mohicody @Br0wnHammer @Owaiseimdad @karenvicent @shanikauwu1 \ No newline at end of file + diff --git a/README.md b/README.md index bb5185378..1b5b74dc9 100644 --- a/README.md +++ b/README.md @@ -36,8 +36,7 @@ [![Run on PikaPods](https://www.pikapods.com/static/run-button.svg)](https://www.pikapods.com/pods?run=checkmate) - -image +image


@@ -93,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), [K8s](../../charts/helm/checkmate/INSTALLATION.md), [Sive Host](https://sive.host) or [Cloudzy](https://cloudzy.com/marketplace/checkmate). +[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). 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. ### Configuration @@ -105,7 +104,15 @@ 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: @@ -119,12 +126,119 @@ 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), [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) (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. ### 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 connects to a Docker daemon and reports on every container it runs. The daemon's ping response decides whether the monitor is up or down and its latency is the response time. Each check also records every container's 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 check; logs are kept for 7 days. + +The **Docker host** field accepts two 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. | + +**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 < 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/). @@ -134,7 +248,7 @@ Thanks to extensive optimizations, Checkmate operates with an exceptionally smal ![image](https://github.com/user-attachments/assets/37e04a75-d83a-488f-b25c-025511b492c9) -You can see the memory footprint of MongoDB and Redis on the same server (398Mb and 15Mb) for the same amount of servers: +You can see the memory footprint of MongoDB on the same server (398Mb) for the same amount of servers: ![image](https://github.com/user-attachments/assets/3b469e85-e675-4040-a162-3f24c1afc751) @@ -152,16 +266,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: Uptime, Docker, Ping, SSL, Port, Game server +- Several monitoring options: HTTP (with SSL certificate expiry), Ping, Port, DNS, Docker, gRPC, WebSocket, 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 4 beautiful themes -- E-mail, Webhooks, Discord, Slack, PagerDuty, Matrix, Rocket.Chat, Microsoft Teams, Telegram, Pushover, Twilio (SMS) notifications +- Status pages with 5 beautiful themes +- E-mail, Webhooks, Discord, Slack, PagerDuty, Matrix, Rocket.Chat, Microsoft Teams, Telegram, Pushover, ntfy, SignalGrid, Twilio (SMS) notifications - Scheduled maintenance - JSON query monitoring -- Multi-language support for Arabic, Chinese (Simplified), Chinese (Traditional, Taiwan), Czech, English, Finnish, French, German, Japanese, Portuguese (Brazil), Russian, Spanish, Thai, Turkish, Ukrainian, and Vietnamese +- 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 ## Monitor Lifecycle @@ -212,9 +326,9 @@ Feel free to ask questions or share your ideas - we'd love to hear from you! ## Contributing -We are [Alex](http://github.com/ajhollid) (team lead), [Gorkem](http://github.com/gorkem-bwl/), [Aryaman](https://github.com/Br0wnHammer) and [Mert](https://github.com/mertssmnoglu) helping individuals and businesses monitor their infra and servers. +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! diff --git a/client/package-lock.json b/client/package-lock.json index 6cee968e3..ef226f507 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -1,16 +1,17 @@ { "name": "client", - "version": "3.11.0", + "version": "3.12.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "client", - "version": "3.11.0", + "version": "3.12.0", "dependencies": { "@csstools/css-tokenizer": "^3.0.4", "@emotion/react": "^11.13.3", "@emotion/styled": "^11.13.0", + "@fontsource-variable/geist": "^5.3.0", "@hello-pangea/dnd": "^18.0.0", "@hookform/resolvers": "5.2.2", "@mui/lab": "7.0.0", @@ -92,6 +93,7 @@ "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.7.tgz", "integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==", "license": "MIT", + "peer": true, "dependencies": { "@babel/code-frame": "^7.29.7", "@babel/generator": "^7.29.7", @@ -407,6 +409,7 @@ "node_modules/@emotion/react": { "version": "11.14.0", "license": "MIT", + "peer": true, "dependencies": { "@babel/runtime": "^7.18.3", "@emotion/babel-plugin": "^11.13.5", @@ -444,6 +447,7 @@ "node_modules/@emotion/styled": { "version": "11.14.1", "license": "MIT", + "peer": true, "dependencies": { "@babel/runtime": "^7.18.3", "@emotion/babel-plugin": "^11.13.5", @@ -950,6 +954,15 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@fontsource-variable/geist": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/@fontsource-variable/geist/-/geist-5.3.0.tgz", + "integrity": "sha512-j0m+vLQuG5XAYoHtGCVu0spvlGreR3EzpECUVzkFmI1mTVnAO38l/NEPDCFgZ177JxzYJCLSmTQibIiYPilGrA==", + "license": "OFL-1.1", + "funding": { + "url": "https://github.com/sponsors/ayuhito" + } + }, "node_modules/@hapi/hoek": { "version": "9.3.0", "license": "BSD-3-Clause" @@ -1223,6 +1236,7 @@ "node_modules/@mui/material": { "version": "7.3.7", "license": "MIT", + "peer": true, "dependencies": { "@babel/runtime": "^7.28.4", "@mui/core-downloads-tracker": "^7.3.7", @@ -1327,6 +1341,7 @@ "node_modules/@mui/system": { "version": "7.3.7", "license": "MIT", + "peer": true, "dependencies": { "@babel/runtime": "^7.28.4", "@mui/private-theming": "^7.3.7", @@ -2371,6 +2386,7 @@ "version": "24.5.2", "devOptional": true, "license": "MIT", + "peer": true, "dependencies": { "undici-types": "~7.12.0" } @@ -2386,6 +2402,7 @@ "node_modules/@types/react": { "version": "18.3.27", "license": "MIT", + "peer": true, "dependencies": { "@types/prop-types": "*", "csstype": "^3.2.2" @@ -2476,6 +2493,7 @@ "integrity": "sha512-4Z+L8I2OqhZV8qA132M4wNL30ypZGYOQVBfMgxDH/K5UX0PNqTu1c6za9ST5r9+tavvHiTWmBnKzpCJ/GlVFtg==", "dev": true, "license": "BSD-2-Clause", + "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "7.18.0", "@typescript-eslint/types": "7.18.0", @@ -2756,6 +2774,7 @@ "version": "8.15.0", "dev": true, "license": "MIT", + "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -3112,6 +3131,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "baseline-browser-mapping": "^2.10.42", "caniuse-lite": "^1.0.30001800", @@ -3555,7 +3575,8 @@ }, "node_modules/dayjs": { "version": "1.11.13", - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/debug": { "version": "4.4.3", @@ -3954,6 +3975,7 @@ "version": "8.57.1", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.6.1", @@ -4766,6 +4788,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "@babel/runtime": "^7.27.6" }, @@ -5577,6 +5600,7 @@ "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-5.19.0.tgz", "integrity": "sha512-REhYUN8gNP3HlcIZS6QU2uy8iovl31cXsrNDkCcqWSQbCkcpdYLczqDz5PVIwNH42UQNyvukjes/RoHPDrOUmQ==", "license": "BSD-3-Clause", + "peer": true, "dependencies": { "@mapbox/geojson-rewind": "^0.5.2", "@mapbox/jsonlint-lines-primitives": "^2.0.2", @@ -6358,6 +6382,7 @@ "node_modules/react-dom": { "version": "18.3.1", "license": "MIT", + "peer": true, "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.2" @@ -6369,6 +6394,7 @@ "node_modules/react-hook-form": { "version": "7.71.1", "license": "MIT", + "peer": true, "engines": { "node": ">=18.0.0" }, @@ -6572,7 +6598,8 @@ }, "node_modules/redux": { "version": "5.0.1", - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/redux-persist": { "version": "6.0.0", @@ -6722,6 +6749,7 @@ "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.62.2.tgz", "integrity": "sha512-RFnrW4lhXA3s3eqHDZvN654g8OTjzRfqpIRJYczCGB6HzphckVAi/Qh4tbPUbRuDi7s1Llv8g/NspLkttY3gTA==", "license": "MIT", + "peer": true, "dependencies": { "@types/estree": "1.0.9" }, @@ -7563,6 +7591,7 @@ "version": "5.9.3", "devOptional": true, "license": "Apache-2.0", + "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -7700,6 +7729,7 @@ "resolved": "https://registry.npmjs.org/vite/-/vite-6.4.3.tgz", "integrity": "sha512-NTKlcQjlAK7MlQoyb6LgaqHc8sso/pVyUJYWMws3jg21uTJw/LddqIFPcPqP6PzpgbIcZyKI85sFE4HBrQDA8A==", "license": "MIT", + "peer": true, "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.4.4", diff --git a/client/package.json b/client/package.json index ce2e481ba..a9e53f93c 100644 --- a/client/package.json +++ b/client/package.json @@ -1,7 +1,7 @@ { "name": "client", "private": true, - "version": "3.11.0", + "version": "3.12.0", "type": "module", "scripts": { "lockfile": "docker run --rm -v \"$PWD\":/w -w /w $(grep -m1 -o 'node:[^ ]*' ../docker/Dockerfile) npm install --package-lock-only", @@ -12,7 +12,8 @@ "lint-strict": "eslint . --ext js,jsx,ts,tsx --report-unused-disable-directives --max-warnings 0", "preview": "vite preview", "format": "prettier --write .", - "format-check": "prettier --check ." + "format-check": "prettier --check .", + "compile": "tsc -b" }, "lint-staged": { "**/*": "prettier --write --ignore-unknown" @@ -21,6 +22,7 @@ "@csstools/css-tokenizer": "^3.0.4", "@emotion/react": "^11.13.3", "@emotion/styled": "^11.13.0", + "@fontsource-variable/geist": "^5.3.0", "@hello-pangea/dnd": "^18.0.0", "@hookform/resolvers": "5.2.2", "@mui/lab": "7.0.0", diff --git a/client/src/Components/design-elements/BaseBox.tsx b/client/src/Components/design-elements/BaseBox.tsx index 580d15dcf..d5af820e6 100644 --- a/client/src/Components/design-elements/BaseBox.tsx +++ b/client/src/Components/design-elements/BaseBox.tsx @@ -1,10 +1,12 @@ import Box, { type BoxProps } from "@mui/material/Box"; import { useTheme } from "@mui/material/styles"; +import { forwardRef } from "react"; -export const BaseBox = ({ sx, ...rest }: BoxProps) => { +export const BaseBox = forwardRef(({ sx, ...rest }, ref) => { const theme = useTheme(); return ( { }} /> ); -}; +}); + +BaseBox.displayName = "BaseBox"; diff --git a/client/src/Components/design-elements/Icon.tsx b/client/src/Components/design-elements/Icon.tsx index 95e68826b..f0de97dd4 100644 --- a/client/src/Components/design-elements/Icon.tsx +++ b/client/src/Components/design-elements/Icon.tsx @@ -8,7 +8,7 @@ interface IconProps { color?: string; } -const Icon = ({ icon: Icon, size = 20, strokeWidth = 1.5, color }: IconProps) => { +const Icon = ({ icon: Icon, size = 16, strokeWidth = 1.5, color }: IconProps) => { return ( { left: 0, right: 0, zIndex: theme.zIndex.snackbar, - backgroundColor: theme.palette.error.main, - color: theme.palette.error.contrastText, + backgroundColor: theme.palette.error.dark, + color: "#FFFFFF", px: theme.spacing(8), py: theme.spacing(4), transition: "top 1s ease-in-out", diff --git a/client/src/Components/design-elements/PageHeader.tsx b/client/src/Components/design-elements/PageHeader.tsx index 84b0f61c6..5bf00c151 100644 --- a/client/src/Components/design-elements/PageHeader.tsx +++ b/client/src/Components/design-elements/PageHeader.tsx @@ -6,6 +6,7 @@ import { Link as RouterLink } from "react-router-dom"; import { useTranslation } from "react-i18next"; import { useTheme } from "@mui/material/styles"; import { ChevronLeft, HelpCircle, FileText, Code } from "lucide-react"; +import { INPUT_BASE_HEIGHT } from "@/Utils/Theme/constants"; import type { ReactNode } from "react"; @@ -109,7 +110,7 @@ export const PageHeader = ({ fontSize: 14, color: theme.palette.text.secondary, lineHeight: 1.55, - maxWidth: 640, + maxWidth: "108ch", }} > {description} @@ -142,7 +143,7 @@ export const PageHeader = ({ alignItems: "center", justifyContent: "center", width: 36, - height: 32, + height: INPUT_BASE_HEIGHT, color: theme.palette.text.secondary, borderRight: idx < linkItems.length - 1 diff --git a/client/src/Components/design-elements/SkeletonCard.tsx b/client/src/Components/design-elements/SkeletonCard.tsx index 05f0c462a..add7a69eb 100644 --- a/client/src/Components/design-elements/SkeletonCard.tsx +++ b/client/src/Components/design-elements/SkeletonCard.tsx @@ -1,4 +1,5 @@ import { Box, Stack, useTheme } from "@mui/material"; +import { INPUT_BASE_HEIGHT } from "@/Utils/Theme/constants"; interface SkeletonCardProps { width?: number | string | { xs?: number | string; md?: number | string }; @@ -44,7 +45,7 @@ export const SkeletonCard = ({ const blockStyle = { width: 55, - height: 34, + height: INPUT_BASE_HEIGHT, borderRadius: theme.shape.borderRadius, background: theme.palette.secondary.main, border: `1px solid ${theme.palette.divider}`, diff --git a/client/src/Components/design-elements/StatBox.tsx b/client/src/Components/design-elements/StatBox.tsx index 1543766fc..453a83687 100644 --- a/client/src/Components/design-elements/StatBox.tsx +++ b/client/src/Components/design-elements/StatBox.tsx @@ -2,7 +2,7 @@ import Stack from "@mui/material/Stack"; import Typography from "@mui/material/Typography"; import Box from "@mui/material/Box"; import { useTheme } from "@mui/material/styles"; -import { lighten } from "@mui/material/styles"; +import { darken, lighten } from "@mui/material/styles"; import useMediaQuery from "@mui/material/useMediaQuery"; import type { PaletteKey } from "@/Utils/Theme/Theme"; import { BaseBox, TooltipWithInfo } from "@/Components/design-elements"; @@ -19,10 +19,10 @@ export const GradientBox = ({ children, palette, sx, interactive }: GradientBox) const isSmall = useMediaQuery(theme.breakpoints.down("md")); const isLight = theme.palette.mode === "light"; const paper = theme.palette.background.paper; - const paperStart = lighten(paper, isLight ? 0.06 : 0.08); + const paperStart = isLight ? darken(paper, 0.02) : lighten(paper, 0.08); const paperEnd = paper; const bg = palette - ? `linear-gradient(135deg, ${theme.palette[palette].light} 0%, ${theme.palette[palette].main} 100%)` + ? `linear-gradient(135deg, ${lighten(theme.palette[palette].main, 0.12)} 0%, ${theme.palette[palette].main} 100%)` : `linear-gradient(135deg, ${paperStart} 0%, ${paperEnd} 100%)`; return ( diff --git a/client/src/Components/design-elements/StatusBox.tsx b/client/src/Components/design-elements/StatusBox.tsx index 017873eb9..a94bd0007 100644 --- a/client/src/Components/design-elements/StatusBox.tsx +++ b/client/src/Components/design-elements/StatusBox.tsx @@ -5,7 +5,7 @@ import { BaseBox } from "@/Components/design-elements"; import { useTranslation } from "react-i18next"; import type { SxProps } from "@mui/material"; -import { useTheme } from "@mui/material/styles"; +import { alpha, useTheme } from "@mui/material/styles"; type StatusBoxProps = React.PropsWithChildren<{ children: React.ReactNode; @@ -34,8 +34,8 @@ export const BGBox = ({ children, sx }: StatusBoxProps) => { sx={{ pointerEvents: "none", backgroundImage: ` - linear-gradient(${theme.palette.divider} 1px, transparent 1px), - linear-gradient(90deg, ${theme.palette.divider} 1px, transparent 1px) + linear-gradient(${alpha(theme.palette.divider, 0.4)} 1px, transparent 1px), + linear-gradient(90deg, ${alpha(theme.palette.divider, 0.4)} 1px, transparent 1px) `, backgroundSize: "24px 24px", maskImage: diff --git a/client/src/Components/design-elements/Table.tsx b/client/src/Components/design-elements/Table.tsx index df0d52b16..09db0b4c0 100644 --- a/client/src/Components/design-elements/Table.tsx +++ b/client/src/Components/design-elements/Table.tsx @@ -52,6 +52,7 @@ type DataTableProps = emptyViewText?: string; emptyViewPositive?: boolean; getRowSx?: (row: T) => SxProps; + isRowSelected?: (row: T) => boolean; }; export function DataTable< @@ -70,6 +71,7 @@ export function DataTable< emptyViewText, emptyViewPositive, getRowSx, + isRowSelected, }: DataTableProps) { const theme = useTheme(); const [expanded, setExpanded] = useState<(string | number) | null>(null); @@ -79,6 +81,21 @@ export function DataTable< }; const isSmall = useMediaQuery(theme.breakpoints.down("md")); + + const hasTextSelectionWithin = (element: Element) => { + const selection = window.getSelection(); + if (!selection || selection.isCollapsed || !selection.toString().trim()) { + return false; + } + return ( + selection.anchorNode !== null && + element.contains( + selection.anchorNode.nodeType === Node.TEXT_NODE + ? selection.anchorNode.parentNode + : selection.anchorNode + ) + ); + }; const isInteractive = Boolean(onRowClick) || expandableRows; if (data.length === 0 || headers.length === 0) { @@ -100,7 +117,10 @@ export function DataTable< keys.push(key); return ( (onRowClick ? onRowClick(row) : null)} + onClick={(e) => { + if (hasTextSelectionWithin(e.currentTarget)) return; + if (onRowClick) onRowClick(row); + }} spacing={theme.spacing(LAYOUT.XS)} sx={{ borderStyle: "solid", @@ -197,7 +217,7 @@ export function DataTable< "& :is(th)": { backgroundColor: theme.palette.background.paper, color: theme.palette.text.secondary, - fontWeight: 500, + fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.08em", padding: `${theme.spacing(SPACING.LG)} ${theme.spacing(LAYOUT.MD)}`, @@ -213,10 +233,6 @@ export function DataTable< "& .MuiTableBody-root .MuiTableRow-root:last-child .MuiTableCell-root": { borderBottom: "none", }, - "& .MuiTableBody-root .MuiTableRow-root.is-clickable:hover .MuiTableCell-root": - { - backgroundColor: theme.palette.action.rowHover, - }, }} > @@ -237,16 +253,29 @@ export function DataTable< {data.map((row) => { const key = row.id || row._id || Math.random(); const isExpanded = expanded === key; + const selected = isRowSelected?.(row); return ( { + onClick={(e) => { + if (hasTextSelectionWithin(e.currentTarget)) return; if (expandableRows) handleExpand(row); else if (onRowClick) onRowClick(row); }} diff --git a/client/src/Components/design-elements/Tabs.tsx b/client/src/Components/design-elements/Tabs.tsx index 149c0bd93..d87b286ef 100644 --- a/client/src/Components/design-elements/Tabs.tsx +++ b/client/src/Components/design-elements/Tabs.tsx @@ -1,6 +1,8 @@ import MuiTabs from "@mui/material/Tabs"; import type { TabsProps } from "@mui/material/Tabs"; import { useTheme } from "@mui/material/styles"; +import { typographyLevels } from "@/Utils/Theme/Palette"; +import { INPUT_BASE_HEIGHT } from "@/Utils/Theme/constants"; interface CustomTabsProps extends TabsProps {} export const Tabs = (props: CustomTabsProps) => { @@ -8,7 +10,7 @@ export const Tabs = (props: CustomTabsProps) => { return ( { iconPosition="start" sx={{ textTransform: "none", - fontSize: 14, + fontSize: typographyLevels.m, fontWeight: 500, - minHeight: 34, + minHeight: INPUT_BASE_HEIGHT, padding: theme.spacing(1, 0), paddingBottom: 0, minWidth: "auto", @@ -48,7 +50,6 @@ export const Tab = (props: CustomTabProps) => { color: theme.palette.text.secondary, "&.Mui-selected": { color: theme.palette.primary.main, - fontWeight: 600, }, "&:hover": { color: theme.palette.text.secondary, diff --git a/client/src/Components/inputs/Button.tsx b/client/src/Components/inputs/Button.tsx index 4eae654b2..33bec7fe8 100644 --- a/client/src/Components/inputs/Button.tsx +++ b/client/src/Components/inputs/Button.tsx @@ -1,7 +1,7 @@ import Button from "@mui/material/Button"; import type { ButtonProps } from "@mui/material/Button"; import { useTheme, darken } from "@mui/material/styles"; -import { HOVER } from "@/Utils/Theme/constants"; +import { INPUT_BASE_HEIGHT, HOVER } from "@/Utils/Theme/constants"; const PALETTE_COLORS = [ "primary", @@ -43,7 +43,8 @@ export const ButtonInput = ({ sx, ...props }: ButtonProps) => { {...props} sx={{ textTransform: "none", - height: 34, + height: INPUT_BASE_HEIGHT, + lineHeight: 1.2, fontWeight: 400, borderRadius: 2, whiteSpace: "nowrap", diff --git a/client/src/Components/inputs/ColorPicker.tsx b/client/src/Components/inputs/ColorPicker.tsx index de736c85d..c65c3f8c7 100644 --- a/client/src/Components/inputs/ColorPicker.tsx +++ b/client/src/Components/inputs/ColorPicker.tsx @@ -4,6 +4,7 @@ import { typographyLevels } from "@/Utils/Theme/Palette"; import { useTheme } from "@mui/material"; import Stack from "@mui/material/Stack"; import { FieldLabel } from "@/Components/inputs/FieldLabel"; +import { INPUT_BASE_HEIGHT } from "@/Utils/Theme/constants"; interface ColorPickerProps extends MuiColorInputProps { fieldLabel?: string; @@ -18,7 +19,7 @@ export const ColorInput = ({ fieldLabel, required, ...props }: ColorPickerProps) sx={{ "& .MuiOutlinedInput-root": { borderRadius: theme.shape.borderRadius, - height: 34, + height: INPUT_BASE_HEIGHT, fontSize: typographyLevels.base, }, "& .MuiOutlinedInput-notchedOutline": { diff --git a/client/src/Components/inputs/DatePicker.tsx b/client/src/Components/inputs/DatePicker.tsx index c63c5ce08..3d82a0fa7 100644 --- a/client/src/Components/inputs/DatePicker.tsx +++ b/client/src/Components/inputs/DatePicker.tsx @@ -8,6 +8,7 @@ import { FieldLabel } from "./FieldLabel"; import { Calendar } from "lucide-react"; import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs"; import { LocalizationProvider } from "@mui/x-date-pickers"; +import { INPUT_BASE_HEIGHT } from "@/Utils/Theme/constants"; interface DatePickerComponentProps extends Omit, "label"> { fieldLabel?: string; @@ -55,7 +56,7 @@ export const DatePickerComponent = ({ flexDirection: "row-reverse", }, "& input": { - minHeight: 34, + minHeight: INPUT_BASE_HEIGHT, p: 0, pl: theme.spacing(3), pr: theme.spacing(5), @@ -66,7 +67,9 @@ export const DatePickerComponent = ({ }, "&:not(:has(.Mui-disabled)):not(:has(.Mui-error)) .MuiOutlinedInput-root:not(:has(input:focus)):hover fieldset": { - borderColor: error ? theme.palette.error.main : theme.palette.divider, + borderColor: error + ? theme.palette.error.main + : theme.palette.text.disabled, }, }, }, diff --git a/client/src/Components/inputs/Select.tsx b/client/src/Components/inputs/Select.tsx index 0077d2be6..eda59a9d1 100644 --- a/client/src/Components/inputs/Select.tsx +++ b/client/src/Components/inputs/Select.tsx @@ -6,6 +6,7 @@ import Stack from "@mui/material/Stack"; import { FieldLabel } from "./FieldLabel"; import { ChevronDown } from "lucide-react"; import Typography from "@mui/material/Typography"; +import { INPUT_BASE_HEIGHT } from "@/Utils/Theme/constants"; interface SelectInputProps extends Omit, "label"> { fieldLabel?: string; @@ -71,7 +72,7 @@ const SelectInputInner = ( /> )} sx={{ - height: "34px", + height: `${INPUT_BASE_HEIGHT}px`, "& .MuiSelect-select": { display: "flex", alignItems: "center", @@ -83,10 +84,6 @@ const SelectInputInner = ( }, "& .MuiOutlinedInput-notchedOutline": { borderRadius: theme.shape.borderRadius, - borderColor: theme.palette.divider, - }, - "&:hover .MuiOutlinedInput-notchedOutline": { - borderColor: theme.palette.divider, }, ...props.sx, }} diff --git a/client/src/Components/inputs/TextInput.tsx b/client/src/Components/inputs/TextInput.tsx index 230e7650b..5fe644ca6 100644 --- a/client/src/Components/inputs/TextInput.tsx +++ b/client/src/Components/inputs/TextInput.tsx @@ -5,7 +5,7 @@ import { typographyLevels } from "@/Utils/Theme/Palette"; import { useTheme } from "@mui/material/styles"; import Stack from "@mui/material/Stack"; import { FieldLabel } from "./FieldLabel"; -import { LAYOUT } from "@/Utils/Theme/constants"; +import { INPUT_BASE_HEIGHT, LAYOUT } from "@/Utils/Theme/constants"; interface TextInputProps extends Omit { fieldLabel?: string; @@ -22,16 +22,10 @@ export const TextInput = forwardRef(function T width: "100%", "& .MuiOutlinedInput-root": { borderRadius: theme.shape.borderRadius, - height: props.multiline ? "auto" : 34, + height: props.multiline ? "auto" : INPUT_BASE_HEIGHT, fontSize: typographyLevels.base, overflow: "hidden", }, - "& .MuiOutlinedInput-notchedOutline": { - borderColor: theme.palette.divider, - }, - "&:hover .MuiOutlinedInput-notchedOutline": { - borderColor: theme.palette.divider, - }, "& .MuiFormHelperText-root": { marginLeft: 0, marginRight: 0, @@ -39,7 +33,7 @@ export const TextInput = forwardRef(function T }, "& input:-webkit-autofill, & input:-webkit-autofill:hover, & input:-webkit-autofill:focus, & input:-webkit-autofill:active": { - WebkitBoxShadow: `0 0 0 100px ${theme.palette.background.default} inset !important`, + WebkitBoxShadow: `0 0 0 100px ${theme.palette.background.paper} inset !important`, WebkitTextFillColor: `${theme.palette.text.primary} !important`, caretColor: theme.palette.text.primary, transition: "background-color 5000s ease-in-out 0s", diff --git a/client/src/Components/inputs/TimePicker.tsx b/client/src/Components/inputs/TimePicker.tsx index b82df1f15..46345cfcb 100644 --- a/client/src/Components/inputs/TimePicker.tsx +++ b/client/src/Components/inputs/TimePicker.tsx @@ -7,6 +7,7 @@ import Typography from "@mui/material/Typography"; import { FieldLabel } from "./FieldLabel"; import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs"; import { LocalizationProvider } from "@mui/x-date-pickers"; +import { INPUT_BASE_HEIGHT } from "@/Utils/Theme/constants"; interface TimePickerComponentProps extends Omit, "label"> { fieldLabel?: string; @@ -33,7 +34,7 @@ export const TimePickerComponent = ({ sx: { width: "fit-content", "& input": { - minHeight: 34, + minHeight: INPUT_BASE_HEIGHT, p: 0, px: theme.spacing(5), }, diff --git a/client/src/Components/inputs/ToggleButton.tsx b/client/src/Components/inputs/ToggleButton.tsx index a2b392357..7a344c071 100644 --- a/client/src/Components/inputs/ToggleButton.tsx +++ b/client/src/Components/inputs/ToggleButton.tsx @@ -4,6 +4,7 @@ import type { ToggleButtonProps } from "@mui/material/ToggleButton"; import type { ToggleButtonGroupProps } from "@mui/material/ToggleButtonGroup"; import { useTheme } from "@mui/material/styles"; import { alpha } from "@mui/material/styles"; +import { INPUT_BASE_HEIGHT } from "@/Utils/Theme/constants"; export const ToggleButtonInput = ({ sx, ...props }: ToggleButtonProps) => { const theme = useTheme(); @@ -20,7 +21,7 @@ export const ToggleButtonInput = ({ sx, ...props }: ToggleButtonProps) => { sx={{ px: 8, textTransform: "none", - height: 34, + height: INPUT_BASE_HEIGHT, fontWeight: 400, whiteSpace: "nowrap", textOverflow: "ellipsis", @@ -34,7 +35,6 @@ export const ToggleButtonInput = ({ sx, ...props }: ToggleButtonProps) => { "&.Mui-selected": { backgroundColor: selectedBg, color: theme.palette.text.primary, - fontWeight: 500, "&:hover": { backgroundColor: selectedHoverBg, }, diff --git a/client/src/Components/inputs/forms/FormAutoCompleteField.tsx b/client/src/Components/inputs/forms/FormAutoCompleteField.tsx index 1dbc65118..3af48efb3 100644 --- a/client/src/Components/inputs/forms/FormAutoCompleteField.tsx +++ b/client/src/Components/inputs/forms/FormAutoCompleteField.tsx @@ -5,9 +5,10 @@ import { type FieldValues, } from "react-hook-form"; import { Autocomplete } from "@/Components/inputs"; +import type { AutocompleteProps } from "@mui/material/Autocomplete"; export interface AutocompleteOption { - id: string; + id: string | number; name: string; } @@ -16,6 +17,9 @@ interface FormAutocompleteProps["filterOptions"]; + getOptionDisabled?: AutocompleteProps["getOptionDisabled"]; + disableClearable?: boolean; } export const FormAutocompleteField = < @@ -26,6 +30,9 @@ export const FormAutocompleteField = < options, fieldLabel, placeholder, + filterOptions, + getOptionDisabled, + disableClearable, }: FormAutocompleteProps) => { const { control } = useFormContext(); return ( @@ -39,10 +46,14 @@ 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 ?? ""} /> diff --git a/client/src/Components/monitors/HeaderMonitorControls.tsx b/client/src/Components/monitors/HeaderMonitorControls.tsx index 7f6968f0b..c907b96bc 100644 --- a/client/src/Components/monitors/HeaderMonitorControls.tsx +++ b/client/src/Components/monitors/HeaderMonitorControls.tsx @@ -60,20 +60,22 @@ export const HeaderMonitorControls = ({ direction={{ xs: "column", md: "row" }} gap={theme.spacing(2)} > - + {isAdmin && ( + + )} @@ -144,12 +144,12 @@ export const MonitorListPage = ({ )} {children} ); diff --git a/client/src/Components/monitors/charts/HistogramDockerContainer.tsx b/client/src/Components/monitors/charts/HistogramDockerContainer.tsx index b7a420fc9..fe6175cdd 100644 --- a/client/src/Components/monitors/charts/HistogramDockerContainer.tsx +++ b/client/src/Components/monitors/charts/HistogramDockerContainer.tsx @@ -1,15 +1,58 @@ -import { BaseChart } from "@/Components/design-elements"; -import { Area, AreaChart, CartesianGrid, ResponsiveContainer } from "recharts"; +import { BaseChart, BaseBox } from "@/Components/design-elements"; +import { Area, AreaChart, CartesianGrid, ResponsiveContainer, Tooltip } from "recharts"; +import Typography from "@mui/material/Typography"; // 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 & { + 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 ( + + {formatDateWithTz(ts, format, uiTimezone)} + {t(labelKey, { value: valueFormatter(dataPoint) })} + + ); +}; interface HistogramDockerContainerProps { title: string; rightTitle: string; @@ -17,6 +60,9 @@ interface HistogramDockerContainerProps { dataKey: string; strokeColor: string; gradientStartColor: string; + range: DateRange; + formatter: (value: number) => string; + labelKey: string; } export const HistogramDockerContainer = ({ @@ -26,11 +72,14 @@ 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 ( ( + + )} + /> { icon: , }, { - name: t("components.sidebar.menu.pagespeed"), - path: "pagespeed", - icon: , + name: t("components.sidebar.menu.docker"), + path: "docker", + icon: , }, { name: t("components.sidebar.menu.infrastructure"), @@ -42,9 +42,9 @@ export const getMenu = (t: Function) => { icon: , }, { - name: t("components.sidebar.menu.docker"), - path: "docker", - icon: , + name: t("components.sidebar.menu.pagespeed"), + path: "pagespeed", + icon: , }, ], }, diff --git a/client/src/Components/sidebar/NavItem.tsx b/client/src/Components/sidebar/NavItem.tsx index 24f2c5778..d573c884f 100644 --- a/client/src/Components/sidebar/NavItem.tsx +++ b/client/src/Components/sidebar/NavItem.tsx @@ -25,11 +25,10 @@ export const NavItem = ({ const iconStroke = selected ? theme.palette.sidebar.accent : theme.palette.text.secondary; - const buttonBgColor = selected ? theme.palette.action.selected : "transparent"; const buttonBgHoverColor = selected - ? theme.palette.action.selected - : theme.palette.action.hover; + ? theme.palette.action.selectedHover + : theme.palette.action.rowHover; const fontWeight = selected ? 600 : 400; return ( { gap={theme.spacing(LAYOUT.SM)} borderRight={`1px solid ${theme.palette.divider}`} width={width} + bgcolor={theme.palette.background.paper} sx={{ touchAction: "none", transition: transition, zIndex: 1000, - backdropFilter: "blur(8px)", }} > { +export interface ApiResponse { success: boolean; msg: string; data: T; diff --git a/client/src/Hooks/UseToast.ts b/client/src/Hooks/UseToast.ts index a0da495bc..29f340238 100644 --- a/client/src/Hooks/UseToast.ts +++ b/client/src/Hooks/UseToast.ts @@ -1,27 +1,30 @@ import { toast, type ToastOptions } from "react-toastify"; +import { useMemo } from "react"; export const useToast = () => { - const showToast = (message: string, options?: ToastOptions) => { - toast.dismiss(); - const baseStyle: React.CSSProperties = { - whiteSpace: "nowrap", - overflow: "hidden", - textOverflow: "ellipsis", + return useMemo(() => { + const showToast = (message: string, options?: ToastOptions) => { + toast.dismiss(); + const baseStyle: React.CSSProperties = { + whiteSpace: "nowrap", + overflow: "hidden", + textOverflow: "ellipsis", + }; + toast(message, { + ...options, + style: { ...baseStyle, ...(options?.style || {}) }, + }); }; - toast(message, { - ...options, - style: { ...baseStyle, ...(options?.style || {}) }, - }); - }; - const toastSuccess = (msg: string, opts?: ToastOptions) => - showToast(msg, { ...opts, type: "success" }); - const toastError = (msg: string, opts?: ToastOptions) => - showToast(msg, { ...opts, type: "error" }); - const toastInfo = (msg: string, opts?: ToastOptions) => - showToast(msg, { ...opts, type: "info" }); - const toastWarning = (msg: string, opts?: ToastOptions) => - showToast(msg, { ...opts, type: "warning" }); + const toastSuccess = (msg: string, opts?: ToastOptions) => + showToast(msg, { ...opts, type: "success" }); + const toastError = (msg: string, opts?: ToastOptions) => + showToast(msg, { ...opts, type: "error" }); + const toastInfo = (msg: string, opts?: ToastOptions) => + showToast(msg, { ...opts, type: "info" }); + const toastWarning = (msg: string, opts?: ToastOptions) => + showToast(msg, { ...opts, type: "warning" }); - return { showToast, toastSuccess, toastError, toastInfo, toastWarning }; + return { showToast, toastSuccess, toastError, toastInfo, toastWarning }; + }, []); }; diff --git a/client/src/Hooks/useMonitorForm.ts b/client/src/Hooks/useMonitorForm.ts index 5458a75d8..89ed0f066 100644 --- a/client/src/Hooks/useMonitorForm.ts +++ b/client/src/Hooks/useMonitorForm.ts @@ -77,6 +77,13 @@ export const getMonitorDefaults = ( ...base, type: "docker", url: data?.url || "", + 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; case "game": diff --git a/client/src/Pages/Account/components/HeaderTeamControls.tsx b/client/src/Pages/Account/components/HeaderTeamControls.tsx index 51fea25b6..b3c0f3293 100644 --- a/client/src/Pages/Account/components/HeaderTeamControls.tsx +++ b/client/src/Pages/Account/components/HeaderTeamControls.tsx @@ -59,7 +59,12 @@ export const HeaderTeamControls = ({ + )} + + )} + {rows.map((row) => { + return ( + + ); + })} + + + ); }; diff --git a/client/src/Pages/Docker/ContainerDetails/TabOverview.tsx b/client/src/Pages/Docker/ContainerDetails/TabOverview.tsx index 32ad93c2f..395aa00d6 100644 --- a/client/src/Pages/Docker/ContainerDetails/TabOverview.tsx +++ b/client/src/Pages/Docker/ContainerDetails/TabOverview.tsx @@ -17,6 +17,7 @@ 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) => [ { @@ -24,20 +25,29 @@ 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 }: { stats: DockerContainerStats }) => { +export const TabOverview = ({ + stats, + range, +}: { + stats: DockerContainerStats; + range: DateRange; +}) => { const theme = useTheme(); const { t } = useTranslation(); const isSmall = useMediaQuery(theme.breakpoints.down("md")); - const { ports, mounts } = stats?.latest?.container ?? {}; const dedupedPorts = dedupeDockerPorts(ports ?? []); return ( @@ -58,6 +68,9 @@ export const TabOverview = ({ stats }: { stats: DockerContainerStats }) => { dataKey={config.key} strokeColor={config.color} gradientStartColor={config.color} + range={range} + formatter={config.formatter} + labelKey={config.labelKey} /> ); diff --git a/client/src/Pages/Docker/ContainerDetails/index.tsx b/client/src/Pages/Docker/ContainerDetails/index.tsx index b4583e4c1..f394559b6 100644 --- a/client/src/Pages/Docker/ContainerDetails/index.tsx +++ b/client/src/Pages/Docker/ContainerDetails/index.tsx @@ -69,8 +69,19 @@ const DockerDetailsPage = ({ open = "overview" }: DockerContainerDetailsProps) = - {activeTab === 0 && } - {activeTab === 1 && } + {activeTab === 0 && ( + + )} + {activeTab === 1 && ( + + )} ); }; diff --git a/client/src/Pages/Docker/Monitors/Components/DockerMonitorsTable.tsx b/client/src/Pages/Docker/Monitors/Components/DockerMonitorsTable.tsx index 7b35e6bfe..ea06557f6 100644 --- a/client/src/Pages/Docker/Monitors/Components/DockerMonitorsTable.tsx +++ b/client/src/Pages/Docker/Monitors/Components/DockerMonitorsTable.tsx @@ -327,11 +327,7 @@ export const DockerMonitorsTable = ({ onRowClick={(row) => { navigate(`/docker/host/${row.id}`); }} - getRowSx={(row) => ({ - backgroundColor: isRowSelected(row.id) - ? theme.palette.action.selected - : "inherit", - })} + isRowSelected={(row) => isRowSelected(row.id)} /> { direction="row" alignItems="center" gap={theme.spacing(2)} + sx={{ "& svg": { color: theme.palette.text.secondary } }} > {icon} {label} @@ -143,7 +144,10 @@ const SummaryIncidentItem = ({ incident }: { incident: IncidentSummaryItem }) => gap: theme.spacing(2), }} > - + { navigate(`/infrastructure/${row.id}`); }} - getRowSx={(row) => ({ - backgroundColor: isRowSelected(row.id) - ? theme.palette.action.selected - : "inherit", - })} + isRowSelected={(row) => isRowSelected(row.id)} /> { alignItems="center" > { {watchedType !== "matrix" && watchedType !== "telegram" && watchedType !== "pushover" && + watchedType !== "signalgrid" && watchedType !== "twilio" && watchedType !== "ntfy" && ( { } /> )} + {watchedType === "signalgrid" && ( + + + + + + } + /> + )} {watchedType === "twilio" && ( } + startIcon={ + + } onClick={onDelete} > {translate.t("common.buttons.delete")} diff --git a/client/src/Pages/StatusPage/Status/Components/HeaderStatusPageControls.tsx b/client/src/Pages/StatusPage/Status/Components/HeaderStatusPageControls.tsx index 93c29d188..1fc25a154 100644 --- a/client/src/Pages/StatusPage/Status/Components/HeaderStatusPageControls.tsx +++ b/client/src/Pages/StatusPage/Status/Components/HeaderStatusPageControls.tsx @@ -77,7 +77,12 @@ export const HeaderStatusPageControls = ({