220 files changed
+13240
-8801
No files matched your search
@@ -0,0 +1,22 @@
|
||||
name: Lockfile Check (Client & Server)
|
||||
on:
|
||||
pull_request:
|
||||
workflow_dispatch:
|
||||
|
||||
jobs:
|
||||
check-lockfiles:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
|
||||
# Validate with the same node image the production build uses, so a lock
|
||||
# that passes here cannot fail the image build's npm ci.
|
||||
- name: Resolve node image from Dockerfile
|
||||
id: node-image
|
||||
run: echo "image=$(grep -m1 -o 'node:[^ ]*' docker/Dockerfile)" >> "$GITHUB_OUTPUT"
|
||||
|
||||
- name: Check server lockfile
|
||||
run: docker run --rm -v "$PWD/server":/w -w /w ${{ steps.node-image.outputs.image }} npm ci --dry-run
|
||||
|
||||
- name: Check client lockfile
|
||||
run: docker run --rm -v "$PWD/client":/w -w /w ${{ steps.node-image.outputs.image }} npm ci --dry-run
|
||||
@@ -1,138 +0,0 @@
|
||||
name: POEditor Translation Synchronization (disabled)
|
||||
|
||||
# This workflow is intentionally disabled — kept for reference only.
|
||||
# The full definition is preserved commented-out below. To re-enable,
|
||||
# delete the stub job and uncomment the section starting at `on:`.
|
||||
|
||||
on:
|
||||
workflow_dispatch:
|
||||
|
||||
jobs:
|
||||
disabled:
|
||||
if: false
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- run: echo "This workflow is disabled. See comments below for the original definition."
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# Original (disabled) workflow below. Do not uncomment if you don't know what you're doing.
|
||||
# ---------------------------------------------------------------------------
|
||||
|
||||
# on:
|
||||
# # For manual triggering
|
||||
# workflow_dispatch:
|
||||
# inputs:
|
||||
# languages:
|
||||
# description: "Languages to synchronize (comma separated, e.g.: tr,en,es)"
|
||||
# required: false
|
||||
# default: "ar,zh-tw,cs,en,fi,fr,de,pt-br,ru,es,tr,ja,zh-cn,th"
|
||||
# format:
|
||||
# description: "Export format (key_value_json or json)"
|
||||
# required: false
|
||||
# default: "key_value_json"
|
||||
|
||||
# permissions:
|
||||
# contents: write
|
||||
# pull-requests: write
|
||||
|
||||
# jobs:
|
||||
# sync-translations:
|
||||
# runs-on: ubuntu-latest
|
||||
# permissions:
|
||||
# contents: write
|
||||
# issues: write
|
||||
# pull-requests: write
|
||||
|
||||
# steps:
|
||||
# - name: Checkout code
|
||||
# uses: actions/checkout@v3
|
||||
# with:
|
||||
# token: ${{ secrets.GITHUB_TOKEN }}
|
||||
# fetch-depth: 0
|
||||
|
||||
# - name: Setup Node.js
|
||||
# uses: actions/setup-node@v3
|
||||
# with:
|
||||
# node-version: "22"
|
||||
|
||||
# - name: Create package.json for scripts
|
||||
# run: |
|
||||
# mkdir -p .github/scripts
|
||||
# cat > .github/scripts/package.json << EOF
|
||||
# {
|
||||
# "name": "poeditor-scripts",
|
||||
# "version": "1.0.0",
|
||||
# "private": true,
|
||||
# "type": "module",
|
||||
# "dependencies": {
|
||||
# "axios": "^1.6.0",
|
||||
# "fs-extra": "^11.1.1"
|
||||
# }
|
||||
# }
|
||||
# EOF
|
||||
|
||||
# - name: Install dependencies
|
||||
# run: |
|
||||
# cd .github/scripts
|
||||
# npm install
|
||||
|
||||
# - name: Download translations from POEditor
|
||||
# env:
|
||||
# POEDITOR_API: ${{ secrets.POEDITOR_API }}
|
||||
# POEDITOR_PROJECT_ID: ${{ secrets.POEDITOR_PROJECT_ID }}
|
||||
# LANGUAGES: ${{ github.event.inputs.languages || 'tr,en' }}
|
||||
# EXPORT_FORMAT: ${{ github.event.inputs.format || 'key_value_json' }}
|
||||
# run: |
|
||||
# mkdir -p temp
|
||||
# node .github/scripts/download-translations.js
|
||||
|
||||
# - name: Verify translation files
|
||||
# run: |
|
||||
# echo "Verifying translation files..."
|
||||
# for file in temp/*.json; do
|
||||
# echo "Checking $file"
|
||||
# if [ ! -s "$file" ]; then
|
||||
# echo "Error: $file is empty or does not exist"
|
||||
# exit 1
|
||||
# fi
|
||||
# # Validate JSON format
|
||||
# cat "$file" | jq . > /dev/null || { echo "Error: $file is not valid JSON"; exit 1; }
|
||||
# done
|
||||
# echo "All translation files are valid"
|
||||
|
||||
# - name: Copy translations to project
|
||||
# run: |
|
||||
# mkdir -p client/src/locales
|
||||
# cp -r temp/* client/src/locales/
|
||||
# echo "Translation files copied to client/src/locales/"
|
||||
|
||||
# - name: Get current date
|
||||
# id: date
|
||||
# run: echo "date=$(date +'%Y-%m-%d %H:%M:%S')" >> $GITHUB_OUTPUT
|
||||
|
||||
# - name: Format client code
|
||||
# run: |
|
||||
# cd client
|
||||
# npm ci
|
||||
# npm run format
|
||||
|
||||
# - name: Create Pull Request
|
||||
# uses: peter-evans/create-pull-request@v7
|
||||
# with:
|
||||
# token: ${{ secrets.GITHUB_TOKEN }}
|
||||
# commit-message: "feat: translations updated from POEditor"
|
||||
# title: "🌐 Updated Translations from POEditor"
|
||||
# body: |
|
||||
# This PR contains the latest translations from POEditor.
|
||||
|
||||
# 📅 Update Date: ${{ steps.date.outputs.date }}
|
||||
# 🔄 Updated Languages: ${{ github.event.inputs.languages || 'tr,en' }}
|
||||
|
||||
# ⚠️ Please review the translations and approve the PR if everything looks correct.
|
||||
# branch: translation-update-${{ github.run_number }}
|
||||
# delete-branch: true
|
||||
# base: develop
|
||||
# add-paths: |
|
||||
# client/src/locales/*.json
|
||||
# committer: GitHub Action <github-actions[bot]@users.noreply.github.com>
|
||||
# author: GitHub Action <github-actions[bot]@users.noreply.github.com>
|
||||
@@ -1,113 +0,0 @@
|
||||
name: Upload Translations to POEditor on PR Merge
|
||||
|
||||
on:
|
||||
pull_request:
|
||||
types: [closed]
|
||||
branches:
|
||||
- develop
|
||||
paths:
|
||||
- "client/src/locales/**"
|
||||
|
||||
jobs:
|
||||
upload-translations:
|
||||
# Only run if the PR was merged (not just closed) or manually triggered
|
||||
if: github.event.pull_request.merged == true
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- name: Checkout code
|
||||
uses: actions/checkout@v3
|
||||
with:
|
||||
fetch-depth: 0 # Fetch all history to get changed files
|
||||
|
||||
- name: Setup Node.js
|
||||
uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: "22"
|
||||
|
||||
- name: Create package.json for scripts
|
||||
run: |
|
||||
mkdir -p .github/scripts
|
||||
cat > .github/scripts/package.json << EOF
|
||||
{
|
||||
"name": "poeditor-scripts",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"axios": "^1.6.0",
|
||||
"fs-extra": "^11.1.1",
|
||||
"form-data": "^4.0.0"
|
||||
}
|
||||
}
|
||||
EOF
|
||||
|
||||
- name: Install dependencies
|
||||
run: |
|
||||
cd .github/scripts
|
||||
npm install
|
||||
|
||||
- name: Get changed locale files
|
||||
id: changed-files
|
||||
if: github.event_name == 'pull_request'
|
||||
run: |
|
||||
# Get base and head commits
|
||||
BASE_SHA=${{ github.event.pull_request.base.sha }}
|
||||
HEAD_SHA=${{ github.event.pull_request.head.sha }}
|
||||
|
||||
echo "Base SHA: $BASE_SHA"
|
||||
echo "Head SHA: $HEAD_SHA"
|
||||
|
||||
# Get list of changed files in client/src/locales directory
|
||||
CHANGED_FILES=$(git diff --name-only $BASE_SHA..$HEAD_SHA -- 'client/src/locales/*.json' || git ls-files 'client/src/locales/*.json')
|
||||
|
||||
if [ -z "$CHANGED_FILES" ]; then
|
||||
echo "No changes detected in locale files"
|
||||
echo "CHANGED_FILES=" >> $GITHUB_ENV
|
||||
else
|
||||
echo "Changed files:"
|
||||
echo "$CHANGED_FILES"
|
||||
echo "CHANGED_FILES<<EOF" >> $GITHUB_ENV
|
||||
echo "$CHANGED_FILES" >> $GITHUB_ENV
|
||||
echo "EOF" >> $GITHUB_ENV
|
||||
fi
|
||||
|
||||
- name: Upload changed translations to POEditor
|
||||
if: env.CHANGED_FILES != ''
|
||||
env:
|
||||
POEDITOR_API: ${{ secrets.POEDITOR_API }}
|
||||
POEDITOR_PROJECT_ID: ${{ secrets.POEDITOR_PROJECT_ID }}
|
||||
run: |
|
||||
# Process each changed file
|
||||
for FILE in $CHANGED_FILES; do
|
||||
if [[ -f "$FILE" ]]; then
|
||||
# Extract language code from filename (e.g., client/src/locales/en.json -> en)
|
||||
FILENAME=$(basename "$FILE")
|
||||
|
||||
# Special case: map gb.json to en language code
|
||||
if [ "$FILENAME" == "gb.json" ]; then
|
||||
LANG="en"
|
||||
echo "Found gb.json, mapping to language code 'en'"
|
||||
else
|
||||
LANG=$(basename "$FILE" .json)
|
||||
fi
|
||||
|
||||
echo "Processing $FILE for language $LANG"
|
||||
|
||||
# Upload to POEditor
|
||||
LANGUAGE=$LANG FILE_PATH=$FILE node .github/scripts/upload-translations.js
|
||||
fi
|
||||
done
|
||||
|
||||
- name: Notify on success
|
||||
if: success() && env.CHANGED_FILES != ''
|
||||
run: |
|
||||
echo "Successfully uploaded translation files to POEditor."
|
||||
if [ "${{ github.event_name }}" == "workflow_dispatch" ]; then
|
||||
echo "Manual trigger comment: ${{ github.event.inputs.comment }}"
|
||||
fi
|
||||
|
||||
- name: Notify on no changes
|
||||
if: env.CHANGED_FILES == ''
|
||||
run: |
|
||||
echo "No translation files were found to upload."
|
||||
@@ -32,12 +32,13 @@
|
||||
|
||||
<h1 align="center"><a href="https://bluewavelabs.ca" target="_blank">Checkmate</a></h1>
|
||||
|
||||
<p align="center"><strong>An open source uptime and infrastructure monitoring application</strong></p>
|
||||
<p align="center"><strong>An open source uptime and infrastructure monitoring application</strong>
|
||||
|
||||
[](https://www.pikapods.com/pods?run=checkmate)
|
||||
|
||||
<img width="1703" height="1041" alt="image" src="https://github.com/user-attachments/assets/0f4dcf38-9b42-4b84-8633-ff34778df1a8" />
|
||||
|
||||
<img width="1703" height="1041" alt="image" src="https://github.com/user-attachments/assets/0f4dcf38-9b42-4b84-8633-ff34778df1a8" />
|
||||
</p>
|
||||
<br>
|
||||
|
||||
|
||||
@@ -80,7 +81,9 @@ Usage instructions can be found [here](https://checkmate.so/docs).
|
||||
<a id="installation"></a>
|
||||
## Installation
|
||||
|
||||
The quickest way to run Checkmate is the reference Docker Compose file, which runs the all-in-one image (`ghcr.io/bluewave-labs/checkmate`) plus MongoDB:
|
||||
The quickest way to run Checkmate is the reference Docker Compose file. It starts two services: the all-in-one Checkmate application image (`ghcr.io/bluewave-labs/checkmate`) and a separate MongoDB service.
|
||||
|
||||
> **What “all-in-one” means:** the Checkmate application is packaged in a single image; MongoDB is not embedded in that image and remains required. The reference Compose file starts MongoDB for you. For custom deployments, configure `DB_CONNECTION_STRING` to use an external MongoDB instance.
|
||||
|
||||
```bash
|
||||
curl -O https://raw.githubusercontent.com/bluewave-labs/checkmate/master/docker/docker-compose.yaml
|
||||
@@ -89,6 +92,10 @@ 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).
|
||||
|
||||
|
||||
### Configuration
|
||||
|
||||
The image is configured entirely through environment variables on the server container:
|
||||
@@ -151,7 +158,7 @@ Feel free to ask questions or share your ideas - we'd love to hear from you!
|
||||
- Selective disk monitoring with mountpoint selection
|
||||
- Incidents at a glance
|
||||
- Status pages with 4 beautiful themes
|
||||
- E-mail, Webhooks, Discord, Slack, PagerDuty, Matrix, Microsoft Teams, Telegram, Pushover, Twilio (SMS) notifications
|
||||
- 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, Chinese (Simplified), Chinese (Traditional, Taiwan), Czech, English, Finnish, French, German, Japanese, Portuguese (Brazil), Russian, Spanish, Thai, Turkish, Ukrainian, and Vietnamese
|
||||
@@ -205,9 +212,9 @@ Feel free to ask questions or share your ideas - we'd love to hear from you!
|
||||
<a id="contributing"></a>
|
||||
## Contributing
|
||||
|
||||
We are [Alex](http://github.com/ajhollid) (team lead), [Gorkem](http://github.com/gorkem-bwl/), [Aryaman](https://github.com/Br0wnHammer), [Mert](https://github.com/mertssmnoglu) and [Karen](https://github.com/karenvicent) 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) 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 7000+ stars and attracted 90+ 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
+2
-2
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "client",
|
||||
"version": "3.10.0",
|
||||
"version": "3.11.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "client",
|
||||
"version": "3.10.0",
|
||||
"version": "3.11.0",
|
||||
"dependencies": {
|
||||
"@csstools/css-tokenizer": "^3.0.4",
|
||||
"@emotion/react": "^11.13.3",
|
||||
|
||||
+2
-1
@@ -1,9 +1,10 @@
|
||||
{
|
||||
"name": "client",
|
||||
"private": true,
|
||||
"version": "3.10.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",
|
||||
"dev": "vite",
|
||||
"build": "tsc -b && vite build",
|
||||
"build-dev": "tsc -b && vite build --mode development",
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import Stack from "@mui/material/Stack";
|
||||
import Tooltip from "@mui/material/Tooltip";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import { formatDateWithTz } from "@/Utils/TimeUtils";
|
||||
import { formatDateWithTz, formatMs } from "@/Utils/TimeUtils";
|
||||
import type { CheckSnapshot } from "@/Types/Check";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import { useSelector } from "react-redux";
|
||||
@@ -58,7 +58,7 @@ export const HeatmapResponseTimeTooltip = ({
|
||||
</Typography>
|
||||
<Typography>
|
||||
{t("common.labels.responseTime")}:{" "}
|
||||
{check?.originalResponseTime?.toFixed() ?? "N/A"} ms
|
||||
{check?.responseTime ? formatMs(check.responseTime) : "N/A"}
|
||||
</Typography>
|
||||
<Typography textTransform={"capitalize"}>
|
||||
Status:{" "}
|
||||
|
||||
@@ -8,6 +8,8 @@ import { HeatmapResponseTimeTooltip } from "./HeatmapResponseTimeTooltip";
|
||||
import { useMemo } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { MAX_RECENT_CHECKS } from "@/Types/Monitor";
|
||||
import { computeBarHeights } from "@/Utils/DataUtils";
|
||||
import { formatMs } from "@/Utils/TimeUtils";
|
||||
|
||||
interface HistogramResponseTimeProps {
|
||||
checks: CheckSnapshot[];
|
||||
@@ -18,25 +20,25 @@ interface HistogramResponseTimeProps {
|
||||
}
|
||||
|
||||
interface ResponseTimeStats {
|
||||
max: number | string;
|
||||
avg: number | string;
|
||||
max: string | null;
|
||||
avg: string | null;
|
||||
}
|
||||
|
||||
const DEFAULT_HEIGHT = 50;
|
||||
|
||||
const calculateResponseTimeStats = (checks: CheckSnapshot[]): ResponseTimeStats => {
|
||||
if (!Array.isArray(checks) || checks.length === 0) {
|
||||
return { max: "-", avg: "-" };
|
||||
return { max: null, avg: null };
|
||||
}
|
||||
|
||||
const validChecks = checks.filter((check) => check.originalResponseTime != null);
|
||||
const validChecks = checks.filter((check) => check.responseTime != null);
|
||||
if (validChecks.length === 0) {
|
||||
return { max: "-", avg: "-" };
|
||||
return { max: null, avg: null };
|
||||
}
|
||||
|
||||
const responseTimes = validChecks.map((check) => check.originalResponseTime);
|
||||
const max = Math.round(Math.max(...responseTimes));
|
||||
const avg = Math.round(
|
||||
const responseTimes = validChecks.map((check) => check.responseTime);
|
||||
const max = formatMs(Math.max(...responseTimes));
|
||||
const avg = formatMs(
|
||||
responseTimes.reduce((sum, time) => sum + time, 0) / responseTimes.length
|
||||
);
|
||||
|
||||
@@ -54,7 +56,7 @@ export const HistogramResponseTime = ({
|
||||
const { t } = useTranslation();
|
||||
|
||||
const stats = useMemo(() => calculateResponseTimeStats(checks), [checks]);
|
||||
|
||||
const barHeights = useMemo(() => computeBarHeights(checks), [checks]);
|
||||
if (!Array.isArray(checks) || checks.length === 0) return null;
|
||||
|
||||
const data =
|
||||
@@ -68,29 +70,28 @@ export const HistogramResponseTime = ({
|
||||
const chartHeight = typeof height === "number" ? `${height}px` : height;
|
||||
const gridGap = gap ?? theme.spacing(0.5);
|
||||
|
||||
const statsContent = showStats &&
|
||||
(typeof stats.max === "number" || typeof stats.avg === "number") && (
|
||||
<Stack
|
||||
justifyContent="center"
|
||||
alignItems={statsPosition === "left" ? "flex-end" : "flex-start"}
|
||||
width={110}
|
||||
pr={statsPosition === "left" ? theme.spacing(8) : 0}
|
||||
pl={statsPosition === "right" ? theme.spacing(8) : 0}
|
||||
const statsContent = showStats && (stats.max !== null || stats.avg !== null) && (
|
||||
<Stack
|
||||
justifyContent="center"
|
||||
alignItems={statsPosition === "left" ? "flex-end" : "flex-start"}
|
||||
width={110}
|
||||
pr={statsPosition === "left" ? theme.spacing(8) : 0}
|
||||
pl={statsPosition === "right" ? theme.spacing(8) : 0}
|
||||
>
|
||||
<Typography
|
||||
variant="body2"
|
||||
noWrap
|
||||
>
|
||||
<Typography
|
||||
variant="body2"
|
||||
noWrap
|
||||
>
|
||||
{t("common.charts.histogram.avg", { value: stats.avg })}
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
noWrap
|
||||
>
|
||||
{t("common.charts.histogram.max", { value: stats.max })}
|
||||
</Typography>
|
||||
</Stack>
|
||||
);
|
||||
{t("common.charts.histogram.avg", { value: stats.avg })}
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
noWrap
|
||||
>
|
||||
{t("common.charts.histogram.max", { value: stats.max })}
|
||||
</Typography>
|
||||
</Stack>
|
||||
);
|
||||
|
||||
return (
|
||||
<Stack
|
||||
@@ -111,7 +112,7 @@ export const HistogramResponseTime = ({
|
||||
>
|
||||
{data.map((check, index) => {
|
||||
const isPlaceholder = (check as any).status === "placeholder";
|
||||
const heightPct = `${Math.max(0, Math.min(100, (check as any).responseTime ?? 0))}%`;
|
||||
const heightPct = `${barHeights[index] ?? 0}%`;
|
||||
const barColor =
|
||||
check.status === true
|
||||
? theme.palette.success.light
|
||||
|
||||
@@ -1,18 +1,28 @@
|
||||
import type { CSSProperties } from "react";
|
||||
|
||||
export const DotSizes = ["xs", "sm", "md", "lg"] as const;
|
||||
export type DotSize = (typeof DotSizes)[number];
|
||||
|
||||
const DOT_SIZE_PX: Record<DotSize, string> = {
|
||||
xs: "2px",
|
||||
sm: "4px",
|
||||
md: "8px",
|
||||
lg: "12px",
|
||||
};
|
||||
|
||||
interface DotProps {
|
||||
color?: string;
|
||||
size?: string;
|
||||
size?: DotSize;
|
||||
style?: CSSProperties;
|
||||
}
|
||||
|
||||
export const Dot = ({ color = "gray", size = "4px", style }: DotProps) => {
|
||||
export const Dot = ({ color = "gray", size = "sm", style }: DotProps) => {
|
||||
return (
|
||||
<span
|
||||
style={{
|
||||
content: '""',
|
||||
width: size,
|
||||
height: size,
|
||||
width: DOT_SIZE_PX[size],
|
||||
height: DOT_SIZE_PX[size],
|
||||
borderRadius: "50%",
|
||||
backgroundColor: color,
|
||||
opacity: 0.8,
|
||||
|
||||
@@ -5,13 +5,15 @@ interface IconProps {
|
||||
size?: number;
|
||||
strokeWidth?: number;
|
||||
stroke?: string;
|
||||
color?: string;
|
||||
}
|
||||
|
||||
const Icon = ({ icon: Icon, size = 20, strokeWidth = 1.5 }: IconProps) => {
|
||||
const Icon = ({ icon: Icon, size = 20, strokeWidth = 1.5, color }: IconProps) => {
|
||||
return (
|
||||
<Icon
|
||||
size={size}
|
||||
strokeWidth={strokeWidth}
|
||||
color={color}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -4,10 +4,10 @@ import Typography from "@mui/material/Typography";
|
||||
import { PulseDot, Dot, StrategyBadge } from "@/Components/design-elements";
|
||||
import { getStatusColor, formatUrl } from "@/Utils/MonitorUtils";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import prettyMilliseconds from "pretty-ms";
|
||||
import { typographyLevels } from "@/Utils/Theme/Palette";
|
||||
import useMediaQuery from "@mui/material/useMediaQuery";
|
||||
import { LAYOUT } from "@/Utils/Theme/constants";
|
||||
import { formatDuration } from "@/Utils/TimeUtils";
|
||||
export const MonitorStatus = ({ monitor }: { monitor: Monitor }) => {
|
||||
const theme = useTheme();
|
||||
const isSmall = useMediaQuery(theme.breakpoints.down("md"));
|
||||
@@ -52,7 +52,7 @@ export const MonitorStatus = ({ monitor }: { monitor: Monitor }) => {
|
||||
<>
|
||||
<Dot />
|
||||
<Typography>
|
||||
Checking every {prettyMilliseconds(monitor?.interval, { verbose: true })}
|
||||
Checking every {formatDuration(monitor?.interval, true)}
|
||||
</Typography>
|
||||
</>
|
||||
)}
|
||||
|
||||
@@ -6,6 +6,7 @@ import Stack from "@mui/material/Stack";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import { FieldLabel } from "./FieldLabel";
|
||||
import { ChevronDown } from "lucide-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
type AutoCompleteInputProps = Omit<
|
||||
AutocompleteProps<any, boolean, boolean, boolean>,
|
||||
@@ -15,6 +16,9 @@ type AutoCompleteInputProps = Omit<
|
||||
fieldLabel?: string;
|
||||
required?: boolean;
|
||||
renderOptionContent?: (option: any) => React.ReactNode;
|
||||
placeholder?: string;
|
||||
error?: boolean;
|
||||
helperText?: string;
|
||||
};
|
||||
|
||||
export const AutoCompleteInput = ({
|
||||
@@ -22,15 +26,21 @@ export const AutoCompleteInput = ({
|
||||
required,
|
||||
renderInput,
|
||||
renderOptionContent,
|
||||
placeholder,
|
||||
error,
|
||||
helperText,
|
||||
...props
|
||||
}: AutoCompleteInputProps) => {
|
||||
const theme = useTheme();
|
||||
const { t } = useTranslation();
|
||||
const multiple = props.multiple;
|
||||
const { renderOption: customRenderOption, ...autocompleteProps } = props;
|
||||
const defaultRenderInput = (params: any) => (
|
||||
<TextField
|
||||
{...params}
|
||||
placeholder="Type to search"
|
||||
placeholder={placeholder ?? t("common.form.autocomplete.placeholder")}
|
||||
error={error}
|
||||
helperText={helperText}
|
||||
/>
|
||||
);
|
||||
|
||||
|
||||
@@ -42,6 +42,9 @@ export const RadioWithDescription = ({
|
||||
"& .MuiButtonBase-root": {
|
||||
mr: theme.spacing(6),
|
||||
},
|
||||
"&:has(.Mui-focusVisible)": {
|
||||
backgroundColor: theme.palette.action.hover,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -11,10 +11,11 @@ interface SelectInputProps<T> extends Omit<SelectProps<T>, "label"> {
|
||||
fieldLabel?: string;
|
||||
required?: boolean;
|
||||
placeholder?: string;
|
||||
helperText?: string;
|
||||
}
|
||||
|
||||
const SelectInputInner = <T,>(
|
||||
{ fieldLabel, required, placeholder, ...props }: SelectInputProps<T>,
|
||||
{ fieldLabel, required, placeholder, helperText, ...props }: SelectInputProps<T>,
|
||||
ref: React.ForwardedRef<HTMLDivElement>
|
||||
) => {
|
||||
const theme = useTheme();
|
||||
@@ -27,7 +28,7 @@ const SelectInputInner = <T,>(
|
||||
: selected === undefined || selected === null || selected === "";
|
||||
|
||||
if (isEmpty && placeholder) {
|
||||
return <Typography sx={{ color: emptyPlaceholderColor }}>{placeholder}</Typography>;
|
||||
return <Typography color={emptyPlaceholderColor}>{placeholder}</Typography>;
|
||||
}
|
||||
|
||||
if (isMultiple) {
|
||||
@@ -92,11 +93,21 @@ const SelectInputInner = <T,>(
|
||||
/>
|
||||
);
|
||||
|
||||
if (fieldLabel) {
|
||||
const helper = helperText ? (
|
||||
<Typography
|
||||
variant="caption"
|
||||
color={props.error ? theme.palette.error.main : theme.palette.text.secondary}
|
||||
>
|
||||
{helperText}
|
||||
</Typography>
|
||||
) : null;
|
||||
|
||||
if (fieldLabel || helper) {
|
||||
return (
|
||||
<Stack spacing={theme.spacing(2)}>
|
||||
<FieldLabel required={required}>{fieldLabel}</FieldLabel>
|
||||
{fieldLabel && <FieldLabel required={required}>{fieldLabel}</FieldLabel>}
|
||||
{select}
|
||||
{helper}
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,6 +3,7 @@ import type { MobileTimePickerProps } from "@mui/x-date-pickers/MobileTimePicker
|
||||
import type { Dayjs } from "dayjs";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import Stack from "@mui/material/Stack";
|
||||
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";
|
||||
@@ -10,11 +11,15 @@ import { LocalizationProvider } from "@mui/x-date-pickers";
|
||||
interface TimePickerComponentProps extends Omit<MobileTimePickerProps<Dayjs>, "label"> {
|
||||
fieldLabel?: string;
|
||||
required?: boolean;
|
||||
error?: boolean;
|
||||
helperText?: string;
|
||||
}
|
||||
|
||||
export const TimePickerComponent = ({
|
||||
fieldLabel,
|
||||
required,
|
||||
error,
|
||||
helperText,
|
||||
...props
|
||||
}: TimePickerComponentProps) => {
|
||||
const theme = useTheme();
|
||||
@@ -33,12 +38,12 @@ export const TimePickerComponent = ({
|
||||
px: theme.spacing(5),
|
||||
},
|
||||
"& fieldset": {
|
||||
borderColor: theme.palette.divider,
|
||||
borderColor: error ? theme.palette.error.main : theme.palette.divider,
|
||||
borderRadius: theme.shape.borderRadius,
|
||||
},
|
||||
"&:not(:has(.Mui-disabled)):not(:has(.Mui-error)) .MuiOutlinedInput-root:not(:has(input:focus)):hover fieldset":
|
||||
{
|
||||
borderColor: theme.palette.divider,
|
||||
borderColor: error ? theme.palette.error.main : theme.palette.divider,
|
||||
},
|
||||
},
|
||||
},
|
||||
@@ -48,14 +53,18 @@ export const TimePickerComponent = ({
|
||||
</LocalizationProvider>
|
||||
);
|
||||
|
||||
if (fieldLabel) {
|
||||
return (
|
||||
<Stack spacing={theme.spacing(2)}>
|
||||
<FieldLabel required={required}>{fieldLabel}</FieldLabel>
|
||||
{picker}
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
return picker;
|
||||
return (
|
||||
<Stack spacing={theme.spacing(2)}>
|
||||
{fieldLabel && <FieldLabel required={required}>{fieldLabel}</FieldLabel>}
|
||||
{picker}
|
||||
{helperText && (
|
||||
<Typography
|
||||
variant="caption"
|
||||
color={error ? "error" : "text.secondary"}
|
||||
>
|
||||
{helperText}
|
||||
</Typography>
|
||||
)}
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,52 @@
|
||||
import {
|
||||
Controller,
|
||||
useFormContext,
|
||||
type FieldPath,
|
||||
type FieldValues,
|
||||
} from "react-hook-form";
|
||||
import { Autocomplete } from "@/Components/inputs";
|
||||
|
||||
export interface AutocompleteOption {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
interface FormAutocompleteProps<T extends FieldValues, O extends AutocompleteOption> {
|
||||
name: FieldPath<T>;
|
||||
options: O[];
|
||||
fieldLabel?: string;
|
||||
placeholder?: string;
|
||||
}
|
||||
|
||||
export const FormAutocompleteField = <
|
||||
T extends FieldValues,
|
||||
O extends AutocompleteOption,
|
||||
>({
|
||||
name,
|
||||
options,
|
||||
fieldLabel,
|
||||
placeholder,
|
||||
}: FormAutocompleteProps<T, O>) => {
|
||||
const { control } = useFormContext<T>();
|
||||
return (
|
||||
<Controller
|
||||
name={name}
|
||||
control={control}
|
||||
render={({ field, fieldState }) => (
|
||||
<Autocomplete
|
||||
options={options}
|
||||
getOptionLabel={(option) => option.name}
|
||||
isOptionEqualToValue={(option, value) => option.id === value.id}
|
||||
value={options.find((o) => o.id === field.value) ?? null}
|
||||
onChange={(_: unknown, newValue: O | null) => {
|
||||
field.onChange(newValue?.id ?? "");
|
||||
}}
|
||||
fieldLabel={fieldLabel}
|
||||
placeholder={placeholder}
|
||||
error={!!fieldState.error}
|
||||
helperText={fieldState.error?.message ?? ""}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,38 @@
|
||||
import {
|
||||
Controller,
|
||||
useFormContext,
|
||||
type FieldPath,
|
||||
type FieldValues,
|
||||
} from "react-hook-form";
|
||||
import FormControlLabel from "@mui/material/FormControlLabel";
|
||||
import { Checkbox } from "@/Components/inputs";
|
||||
|
||||
interface FormCheckboxFieldProps<T extends FieldValues> {
|
||||
name: FieldPath<T>;
|
||||
label: string;
|
||||
}
|
||||
|
||||
export const FormCheckboxField = <T extends FieldValues>({
|
||||
name,
|
||||
label,
|
||||
}: FormCheckboxFieldProps<T>) => {
|
||||
const { control } = useFormContext<T>();
|
||||
|
||||
return (
|
||||
<Controller
|
||||
name={name}
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
checked={field.value ?? false}
|
||||
onChange={(e) => field.onChange(e.target.checked)}
|
||||
/>
|
||||
}
|
||||
label={label}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,35 @@
|
||||
import {
|
||||
Controller,
|
||||
useFormContext,
|
||||
type FieldPath,
|
||||
type FieldValues,
|
||||
} from "react-hook-form";
|
||||
import { ColorInput } from "@/Components/inputs";
|
||||
|
||||
interface FormColorFieldProps<T extends FieldValues> {
|
||||
name: FieldPath<T>;
|
||||
fieldLabel?: string;
|
||||
}
|
||||
|
||||
export const FormColorField = <T extends FieldValues>({
|
||||
name,
|
||||
fieldLabel,
|
||||
}: FormColorFieldProps<T>) => {
|
||||
const { control } = useFormContext<T>();
|
||||
return (
|
||||
<Controller
|
||||
name={name}
|
||||
control={control}
|
||||
render={({ field, fieldState }) => (
|
||||
<ColorInput
|
||||
format="hex"
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
fieldLabel={fieldLabel}
|
||||
error={!!fieldState.error}
|
||||
helperText={fieldState.error?.message ?? ""}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,81 @@
|
||||
import {
|
||||
Controller,
|
||||
useFormContext,
|
||||
type FieldPath,
|
||||
type FieldValues,
|
||||
} from "react-hook-form";
|
||||
import dayjs, { type Dayjs } from "dayjs";
|
||||
import { DatePicker, TimePicker } from "@/Components/inputs";
|
||||
|
||||
export interface FormPickerFieldProps<T extends FieldValues> {
|
||||
name: FieldPath<T>;
|
||||
fieldLabel?: string;
|
||||
format?: string;
|
||||
onValueChange?: (value: string) => void; // e.g. () => trigger("startDate")
|
||||
}
|
||||
|
||||
interface DayjsPickerProps {
|
||||
fieldLabel?: string;
|
||||
value: Dayjs | null;
|
||||
onChange: (value: Dayjs | null) => void;
|
||||
error?: boolean;
|
||||
helperText?: string;
|
||||
}
|
||||
|
||||
interface FormDayjsPickerFieldProps<
|
||||
T extends FieldValues,
|
||||
> extends FormPickerFieldProps<T> {
|
||||
picker: React.ComponentType<DayjsPickerProps>;
|
||||
format: string;
|
||||
}
|
||||
|
||||
const FormDayjsPickerField = <T extends FieldValues>({
|
||||
name,
|
||||
fieldLabel,
|
||||
format,
|
||||
onValueChange,
|
||||
picker: Picker,
|
||||
}: FormDayjsPickerFieldProps<T>) => {
|
||||
const { control } = useFormContext<T>();
|
||||
return (
|
||||
<Controller
|
||||
name={name}
|
||||
control={control}
|
||||
render={({ field, fieldState }) => (
|
||||
<Picker
|
||||
fieldLabel={fieldLabel}
|
||||
value={field.value ? dayjs(field.value, format) : null}
|
||||
onChange={(value) => {
|
||||
const next = value ? value.format(format) : "";
|
||||
field.onChange(next);
|
||||
onValueChange?.(next);
|
||||
}}
|
||||
error={!!fieldState.error}
|
||||
helperText={fieldState.error?.message}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const FormDatePickerField = <T extends FieldValues>({
|
||||
format = "YYYY-MM-DD",
|
||||
...rest
|
||||
}: FormPickerFieldProps<T>) => (
|
||||
<FormDayjsPickerField
|
||||
{...rest}
|
||||
format={format}
|
||||
picker={DatePicker}
|
||||
/>
|
||||
);
|
||||
|
||||
export const FormTimePickerField = <T extends FieldValues>({
|
||||
format = "HH:mm",
|
||||
...rest
|
||||
}: FormPickerFieldProps<T>) => (
|
||||
<FormDayjsPickerField
|
||||
{...rest}
|
||||
format={format}
|
||||
picker={TimePicker}
|
||||
/>
|
||||
);
|
||||
@@ -0,0 +1,187 @@
|
||||
import { useMemo } from "react";
|
||||
import {
|
||||
Controller,
|
||||
useFormContext,
|
||||
type FieldPath,
|
||||
type FieldValues,
|
||||
} from "react-hook-form";
|
||||
import Stack from "@mui/material/Stack";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import { Trash2, GripVertical } from "lucide-react";
|
||||
import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
|
||||
import type { DropResult } from "@hello-pangea/dnd";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Autocomplete } from "@/Components/inputs";
|
||||
import { SPACING, LAYOUT } from "@/Utils/Theme/constants";
|
||||
|
||||
export interface MultiSelectOption {
|
||||
id: string | number;
|
||||
name: string;
|
||||
}
|
||||
|
||||
interface FormMultiSelectFieldProps<T extends FieldValues, O extends MultiSelectOption> {
|
||||
name: FieldPath<T>;
|
||||
options: O[];
|
||||
fieldLabel?: string;
|
||||
placeholder?: string;
|
||||
description?: string;
|
||||
renderRow?: (option: O) => React.ReactNode;
|
||||
renderOptionContent?: (option: O) => React.ReactNode;
|
||||
sortable?: boolean;
|
||||
}
|
||||
|
||||
export const FormMultiSelectField = <T extends FieldValues, O extends MultiSelectOption>({
|
||||
name,
|
||||
options,
|
||||
fieldLabel,
|
||||
placeholder,
|
||||
description,
|
||||
renderRow,
|
||||
renderOptionContent,
|
||||
sortable = false,
|
||||
}: FormMultiSelectFieldProps<T, O>) => {
|
||||
const { control } = useFormContext<T>();
|
||||
const theme = useTheme();
|
||||
const { t } = useTranslation();
|
||||
const optionsById = useMemo(
|
||||
() => new Map<O["id"], O>(options.map((o) => [o.id, o])),
|
||||
[options]
|
||||
);
|
||||
return (
|
||||
<Controller
|
||||
name={name}
|
||||
control={control}
|
||||
render={({ field, fieldState }) => {
|
||||
const selectedIds: O["id"][] = field.value ?? [];
|
||||
const selected = selectedIds
|
||||
.map((id) => optionsById.get(id))
|
||||
.filter((o): o is O => o !== undefined);
|
||||
|
||||
const handleDragEnd = (result: DropResult) => {
|
||||
if (!result.destination) return;
|
||||
const reordered = selected.map((o) => o.id);
|
||||
const [moved] = reordered.splice(result.source.index, 1);
|
||||
reordered.splice(result.destination.index, 0, moved);
|
||||
const unresolved = selectedIds.filter((id) => !optionsById.has(id));
|
||||
field.onChange([...reordered, ...unresolved]);
|
||||
};
|
||||
|
||||
const rowContent = (option: O) =>
|
||||
renderRow ? (
|
||||
renderRow(option)
|
||||
) : (
|
||||
<Typography flexGrow={1}>{option.name}</Typography>
|
||||
);
|
||||
|
||||
const removeButton = (option: O) => (
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => {
|
||||
field.onChange(selectedIds.filter((id) => id !== option.id));
|
||||
}}
|
||||
aria-label={t("common.buttons.removeItem", { item: option.name })}
|
||||
>
|
||||
<Trash2 size={16} />
|
||||
</IconButton>
|
||||
);
|
||||
|
||||
return (
|
||||
<Stack spacing={theme.spacing(LAYOUT.MD)}>
|
||||
<Autocomplete
|
||||
multiple
|
||||
autoHighlight
|
||||
options={options}
|
||||
value={selected}
|
||||
getOptionLabel={(option) => option.name}
|
||||
isOptionEqualToValue={(option, value) => option.id === value.id}
|
||||
onChange={(_: unknown, newValue: O[]) => {
|
||||
// The Autocomplete only sees resolved options, so ids missing
|
||||
// from options must be re-appended or they'd be silently
|
||||
// dropped (e.g. a role excluded from the selectable list).
|
||||
const unresolved = selectedIds.filter((id) => !optionsById.has(id));
|
||||
field.onChange([...newValue.map((o) => o.id), ...unresolved]);
|
||||
}}
|
||||
fieldLabel={fieldLabel}
|
||||
placeholder={selected.length > 0 ? "" : placeholder}
|
||||
renderOptionContent={renderOptionContent}
|
||||
error={!!fieldState.error}
|
||||
helperText={fieldState.error?.message ?? ""}
|
||||
/>
|
||||
{description && (
|
||||
<Typography
|
||||
component="span"
|
||||
color={theme.palette.text.secondary}
|
||||
sx={{ opacity: 0.8 }}
|
||||
>
|
||||
{description}
|
||||
</Typography>
|
||||
)}
|
||||
{sortable
|
||||
? selected.length > 0 && (
|
||||
<DragDropContext onDragEnd={handleDragEnd}>
|
||||
<Droppable droppableId={`${name}-list`}>
|
||||
{(provided) => (
|
||||
<Stack
|
||||
{...provided.droppableProps}
|
||||
ref={provided.innerRef}
|
||||
>
|
||||
{selected.map((option, index) => (
|
||||
<Draggable
|
||||
key={option.id}
|
||||
draggableId={String(option.id)}
|
||||
index={index}
|
||||
>
|
||||
{(provided) => (
|
||||
<Stack
|
||||
ref={provided.innerRef}
|
||||
{...provided.draggableProps}
|
||||
{...provided.dragHandleProps}
|
||||
direction="row"
|
||||
alignItems="center"
|
||||
spacing={theme.spacing(LAYOUT.XS)}
|
||||
padding={theme.spacing(LAYOUT.XS)}
|
||||
marginTop={theme.spacing(SPACING.LG)}
|
||||
borderRadius={1}
|
||||
border={`1px solid ${theme.palette.divider}`}
|
||||
sx={{
|
||||
cursor: "grab",
|
||||
"&:active": { cursor: "grabbing" },
|
||||
}}
|
||||
>
|
||||
<GripVertical size={20} />
|
||||
{rowContent(option)}
|
||||
{removeButton(option)}
|
||||
</Stack>
|
||||
)}
|
||||
</Draggable>
|
||||
))}
|
||||
{provided.placeholder}
|
||||
</Stack>
|
||||
)}
|
||||
</Droppable>
|
||||
</DragDropContext>
|
||||
)
|
||||
: selected.map((option) => (
|
||||
<Stack
|
||||
key={option.id}
|
||||
direction="row"
|
||||
alignItems="center"
|
||||
spacing={theme.spacing(LAYOUT.XS)}
|
||||
padding={theme.spacing(LAYOUT.XS)}
|
||||
marginTop={theme.spacing(SPACING.LG)}
|
||||
borderRadius={1}
|
||||
border={`1px solid ${theme.palette.divider}`}
|
||||
width="100%"
|
||||
>
|
||||
{rowContent(option)}
|
||||
{removeButton(option)}
|
||||
</Stack>
|
||||
))}
|
||||
</Stack>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,46 @@
|
||||
import {
|
||||
Controller,
|
||||
useFormContext,
|
||||
type FieldPath,
|
||||
type FieldValues,
|
||||
} from "react-hook-form";
|
||||
import { TextField } from "@/Components/inputs";
|
||||
|
||||
interface FormNumberFieldProps<T extends FieldValues> extends Omit<
|
||||
React.ComponentProps<typeof TextField>,
|
||||
"name" | "error" | "helperText" | "type"
|
||||
> {
|
||||
name: FieldPath<T>;
|
||||
emptyValue?: number; // what an empty input writes to the form; 0 keeps today's sentinel
|
||||
}
|
||||
|
||||
export const FormNumberField = <T extends FieldValues>({
|
||||
name,
|
||||
emptyValue = 0,
|
||||
...rest
|
||||
}: FormNumberFieldProps<T>) => {
|
||||
const { control } = useFormContext<T>();
|
||||
return (
|
||||
<Controller
|
||||
name={name}
|
||||
control={control}
|
||||
render={({ field, fieldState }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
type="number"
|
||||
value={
|
||||
field.value === undefined || field.value === emptyValue ? "" : field.value
|
||||
}
|
||||
onChange={(e) => {
|
||||
const val = e.target.value;
|
||||
field.onChange(val === "" ? emptyValue : Number(val));
|
||||
}}
|
||||
error={!!fieldState.error}
|
||||
helperText={fieldState.error?.message ?? ""}
|
||||
fullWidth
|
||||
{...rest}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,54 @@
|
||||
import { RadioGroup, useTheme } from "@mui/material";
|
||||
import FormControl from "@mui/material/FormControl";
|
||||
import {
|
||||
Controller,
|
||||
useFormContext,
|
||||
type FieldPath,
|
||||
type FieldValues,
|
||||
} from "react-hook-form";
|
||||
import { LAYOUT } from "@/Utils/Theme/constants";
|
||||
import { RadioWithDescription } from "@/Components/inputs/Radio";
|
||||
import { FieldLabel } from "@/Components/inputs/FieldLabel";
|
||||
export interface FormRadioOption {
|
||||
value: string;
|
||||
label: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
interface FormRadioGroupProps<T extends FieldValues> {
|
||||
name: FieldPath<T>;
|
||||
options: FormRadioOption[];
|
||||
fieldLabel?: string;
|
||||
}
|
||||
export const FormRadioGroup = <T extends FieldValues>({
|
||||
name,
|
||||
options,
|
||||
fieldLabel,
|
||||
}: FormRadioGroupProps<T>) => {
|
||||
const { control } = useFormContext<T>();
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<Controller
|
||||
name={name}
|
||||
control={control}
|
||||
render={({ field, fieldState }) => (
|
||||
<FormControl error={!!fieldState.error}>
|
||||
{fieldLabel && <FieldLabel>{fieldLabel}</FieldLabel>}
|
||||
<RadioGroup
|
||||
{...field}
|
||||
sx={{ gap: theme.spacing(LAYOUT.MD) }}
|
||||
>
|
||||
{options.map((option) => (
|
||||
<RadioWithDescription
|
||||
key={option.value}
|
||||
value={option.value}
|
||||
label={option.label}
|
||||
description={option.description}
|
||||
/>
|
||||
))}
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,61 @@
|
||||
import {
|
||||
Controller,
|
||||
useFormContext,
|
||||
type FieldValues,
|
||||
type FieldPath,
|
||||
} from "react-hook-form";
|
||||
import MenuItem from "@mui/material/MenuItem";
|
||||
import { Select } from "@/Components/inputs";
|
||||
|
||||
export interface FormSelectOption {
|
||||
value: string | number;
|
||||
label: string;
|
||||
}
|
||||
|
||||
interface FormSelectProps<T extends FieldValues> extends Omit<
|
||||
React.ComponentProps<typeof Select>,
|
||||
"name" | "error" | "value" | "onChange"
|
||||
> {
|
||||
name: FieldPath<T>;
|
||||
options: FormSelectOption[];
|
||||
fallbackValue?: string | number; // display value while the field is undefined
|
||||
onValueChange?: (value: string | number) => void; // side effects, see Notes
|
||||
}
|
||||
|
||||
export const FormSelectField = <T extends FieldValues>({
|
||||
name,
|
||||
options,
|
||||
fallbackValue,
|
||||
onValueChange,
|
||||
...rest
|
||||
}: FormSelectProps<T>) => {
|
||||
const { control } = useFormContext<T>();
|
||||
return (
|
||||
<Controller
|
||||
name={name}
|
||||
control={control}
|
||||
render={({ field, fieldState }) => (
|
||||
<Select
|
||||
{...field}
|
||||
value={field.value ?? fallbackValue ?? ""}
|
||||
onChange={(e) => {
|
||||
field.onChange(e.target.value);
|
||||
onValueChange?.(e.target.value as string | number);
|
||||
}}
|
||||
error={!!fieldState.error}
|
||||
{...rest}
|
||||
helperText={fieldState.error?.message ?? rest.helperText}
|
||||
>
|
||||
{options.map((option) => (
|
||||
<MenuItem
|
||||
key={option.value}
|
||||
value={option.value}
|
||||
>
|
||||
{option.label}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,34 @@
|
||||
import {
|
||||
Controller,
|
||||
useFormContext,
|
||||
type FieldPath,
|
||||
type FieldValues,
|
||||
} from "react-hook-form";
|
||||
import { SliderWithLabel } from "@/Components/inputs";
|
||||
|
||||
interface FormSliderProps<T extends FieldValues> extends Omit<
|
||||
React.ComponentProps<typeof SliderWithLabel>,
|
||||
"name" | "value" | "onChange"
|
||||
> {
|
||||
name: FieldPath<T>;
|
||||
}
|
||||
|
||||
export const FormSliderField = <T extends FieldValues>({
|
||||
name,
|
||||
...rest
|
||||
}: FormSliderProps<T>) => {
|
||||
const { control } = useFormContext<T>();
|
||||
return (
|
||||
<Controller
|
||||
name={name}
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<SliderWithLabel
|
||||
{...field}
|
||||
sliderMaxWidth={{ xs: "100%", md: "50%" }}
|
||||
{...rest}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,59 @@
|
||||
import {
|
||||
Controller,
|
||||
useFormContext,
|
||||
type FieldPath,
|
||||
type FieldValues,
|
||||
} from "react-hook-form";
|
||||
import Stack from "@mui/material/Stack";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import { SwitchComponent } from "@/Components/inputs";
|
||||
import { SPACING } from "@/Utils/Theme/constants";
|
||||
|
||||
interface FormSwitchProps<T extends FieldValues> {
|
||||
name: FieldPath<T>;
|
||||
label: string;
|
||||
labelPlacement?: "start" | "end"; // left | right
|
||||
}
|
||||
|
||||
export const FormSwitchField = <T extends FieldValues>({
|
||||
name,
|
||||
label,
|
||||
labelPlacement = "end",
|
||||
}: FormSwitchProps<T>) => {
|
||||
const { control } = useFormContext<T>();
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<Controller
|
||||
name={name}
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<Stack
|
||||
direction="row"
|
||||
alignItems="center"
|
||||
spacing={labelPlacement === "start" ? undefined : theme.spacing(SPACING.LG)}
|
||||
justifyContent={labelPlacement === "start" ? "space-between" : undefined}
|
||||
>
|
||||
{labelPlacement === "start" ? (
|
||||
<>
|
||||
<Typography>{label}</Typography>
|
||||
<SwitchComponent
|
||||
checked={field.value ?? false}
|
||||
onChange={(e) => field.onChange(e.target.checked)}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<SwitchComponent
|
||||
checked={field.value ?? false}
|
||||
onChange={(e) => field.onChange(e.target.checked)}
|
||||
/>
|
||||
<Typography>{label}</Typography>
|
||||
</>
|
||||
)}
|
||||
</Stack>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,40 @@
|
||||
import {
|
||||
Controller,
|
||||
useFormContext,
|
||||
type FieldPath,
|
||||
type FieldValues,
|
||||
} from "react-hook-form";
|
||||
|
||||
import { TextField } from "@/Components/inputs";
|
||||
|
||||
interface FormTextFieldProps<T extends FieldValues> extends Omit<
|
||||
React.ComponentProps<typeof TextField>,
|
||||
"name" | "error" | "helperText"
|
||||
> {
|
||||
name: FieldPath<T>;
|
||||
helperText?: string;
|
||||
}
|
||||
|
||||
export const FormTextField = <T extends FieldValues>({
|
||||
name,
|
||||
...rest
|
||||
}: FormTextFieldProps<T>) => {
|
||||
const { control } = useFormContext<T>();
|
||||
return (
|
||||
<Controller
|
||||
name={name}
|
||||
control={control}
|
||||
render={({ field, fieldState }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
type="text"
|
||||
{...rest}
|
||||
value={field.value ?? ""}
|
||||
error={!!fieldState.error}
|
||||
helperText={fieldState.error?.message ?? rest.helperText ?? ""}
|
||||
fullWidth
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@@ -18,15 +18,13 @@ const RootLayout = () => {
|
||||
flex={1}
|
||||
padding={6}
|
||||
overflow={"hidden"}
|
||||
sx={{
|
||||
backgroundColor:
|
||||
theme.palette.mode === "dark"
|
||||
? "rgba(255, 255, 255, 0.01)"
|
||||
: "rgba(0, 0, 0, 0.01)",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
paddingLeft: isSmall ? `${collapsedWidth + 12}px` : 12,
|
||||
}}
|
||||
bgcolor={
|
||||
theme.palette.mode === "dark"
|
||||
? "rgba(255, 255, 255, 0.01)"
|
||||
: "rgba(124, 116, 116, 0.01)"
|
||||
}
|
||||
alignItems="center"
|
||||
paddingLeft={isSmall ? `${collapsedWidth + 12}px` : 12}
|
||||
>
|
||||
<Stack
|
||||
maxWidth={1280}
|
||||
|
||||
@@ -6,6 +6,7 @@ import type { FlatGeoCheck } from "@/Types/GeoCheck";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { formatStatusCode } from "@/Utils/statusCode";
|
||||
import "maplibre-gl/dist/maplibre-gl.css";
|
||||
import { formatMs } from "@/Utils/TimeUtils";
|
||||
|
||||
interface GeoChecksMapProps {
|
||||
geoChecks: FlatGeoCheck[];
|
||||
@@ -83,10 +84,6 @@ export const GeoChecksMap = ({ geoChecks }: GeoChecksMapProps) => {
|
||||
return status ? theme.palette.success.main : theme.palette.error.main;
|
||||
};
|
||||
|
||||
const formatResponseTime = (timing: number): string => {
|
||||
return `${timing.toFixed(0)}ms`;
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{mapPopupStyles}
|
||||
@@ -186,7 +183,7 @@ export const GeoChecksMap = ({ geoChecks }: GeoChecksMapProps) => {
|
||||
>
|
||||
Response Time:
|
||||
</Typography>{" "}
|
||||
{formatResponseTime(selectedCheck.timings.total)}
|
||||
{formatMs(selectedCheck.timings.total)}
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="caption"
|
||||
|
||||
@@ -1,22 +1,24 @@
|
||||
import Stack from "@mui/material/Stack";
|
||||
import { StatBox } from "@/Components/design-elements";
|
||||
|
||||
import prettyMilliseconds from "pretty-ms";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import type { MonitorStats, Monitor } from "@/Types/Monitor";
|
||||
import { getStatusPalette } from "@/Utils/MonitorUtils";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { formatMs, formatDuration } from "@/Utils/TimeUtils";
|
||||
|
||||
interface MonitorStatBoxesProps {
|
||||
monitor?: Monitor;
|
||||
monitorStats: MonitorStats | null;
|
||||
certificateExpiry?: string;
|
||||
domainExpiry?: string;
|
||||
}
|
||||
|
||||
export const MonitorStatBoxes = ({
|
||||
monitor,
|
||||
monitorStats,
|
||||
certificateExpiry,
|
||||
domainExpiry,
|
||||
}: MonitorStatBoxesProps) => {
|
||||
const theme = useTheme();
|
||||
const { t } = useTranslation();
|
||||
@@ -31,14 +33,9 @@ export const MonitorStatBoxes = ({
|
||||
const timeOfLastCheck = monitorStats?.lastCheckTimestamp || 0;
|
||||
const timeSinceLastCheck = Date.now() - timeOfLastCheck || 0;
|
||||
|
||||
const options = {
|
||||
secondsDecimalDigits: 0,
|
||||
millisecondsDecimalDigits: 0,
|
||||
};
|
||||
const streakTime = formatDuration(timeSinceLastFailure);
|
||||
|
||||
const streakTime = prettyMilliseconds(timeSinceLastFailure, options);
|
||||
|
||||
const lastCheckTime = prettyMilliseconds(timeSinceLastCheck, options);
|
||||
const lastCheckTime = formatDuration(timeSinceLastCheck);
|
||||
const isActive =
|
||||
monitor?.status === "up" ||
|
||||
monitor?.status === "paused" ||
|
||||
@@ -67,14 +64,20 @@ export const MonitorStatBoxes = ({
|
||||
/>
|
||||
<StatBox
|
||||
title={t("pages.common.monitors.statBoxes.lastResponseTime")}
|
||||
subtitle={prettyMilliseconds(monitorStats?.lastResponseTime ?? 0)}
|
||||
subtitle={formatMs(monitorStats?.lastResponseTime ?? 0)}
|
||||
/>
|
||||
|
||||
{monitor?.type === "http" && (
|
||||
<StatBox
|
||||
title={t("pages.common.monitors.statBoxes.certificateExpiry")}
|
||||
subtitle={certificateExpiry || "N/A"}
|
||||
/>
|
||||
<>
|
||||
<StatBox
|
||||
title={t("pages.common.monitors.statBoxes.certificateExpiry")}
|
||||
subtitle={certificateExpiry || "N/A"}
|
||||
/>
|
||||
<StatBox
|
||||
title={t("pages.common.monitors.statBoxes.domainExpiry")}
|
||||
subtitle={domainExpiry || "N/A"}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</Stack>
|
||||
);
|
||||
|
||||
@@ -23,11 +23,12 @@ export const PHASE_COLOR_KEYS = {
|
||||
avgDownload: "download",
|
||||
} as const;
|
||||
|
||||
export const PHASE_LABELS: Record<(typeof PHASE_KEYS)[number], string> = {
|
||||
avgDns: "DNS",
|
||||
avgTcp: "TCP",
|
||||
avgTls: "TLS",
|
||||
avgRequest: "Request",
|
||||
avgFirstByte: "First byte",
|
||||
avgDownload: "Download",
|
||||
// i18n keys, resolved with t() at render
|
||||
export const PHASE_LABEL_KEYS: Record<(typeof PHASE_KEYS)[number], string> = {
|
||||
avgDns: "common.charts.phases.dns",
|
||||
avgTcp: "common.charts.phases.tcp",
|
||||
avgTls: "common.charts.phases.tls",
|
||||
avgRequest: "common.charts.phases.request",
|
||||
avgFirstByte: "common.charts.phases.firstByte",
|
||||
avgDownload: "common.charts.phases.download",
|
||||
};
|
||||
@@ -14,10 +14,10 @@ import {
|
||||
import type { TooltipProps } from "recharts";
|
||||
import type { NameType, ValueType } from "recharts/types/component/DefaultTooltipContent";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import prettyMilliseconds from "pretty-ms";
|
||||
import { XTick } from "@/Components/monitors/charts/XTick";
|
||||
import { useSelector } from "react-redux";
|
||||
import { formatDateWithTz, tooltipDateFormatLookup } from "@/Utils/TimeUtils";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { formatDateWithTz, formatMs, tooltipDateFormatLookup } from "@/Utils/TimeUtils";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import type { Theme } from "@mui/material/styles";
|
||||
import type { GroupedCheck, GroupedUptimeCheck } from "@/Types/Check";
|
||||
@@ -25,11 +25,11 @@ import type { RootState } from "@/Types/state";
|
||||
import { computeYAxisCap } from "@/Components/monitors/charts/ChartUtils";
|
||||
|
||||
import { useMemo, useState } from "react";
|
||||
import { SPACING } from "@/Utils/Theme/constants";
|
||||
import { LAYOUT, SPACING } from "@/Utils/Theme/constants";
|
||||
import {
|
||||
PHASE_COLOR_KEYS,
|
||||
PHASE_KEYS,
|
||||
PHASE_LABELS,
|
||||
PHASE_LABEL_KEYS,
|
||||
} from "@/Components/monitors/charts/ChartUtils";
|
||||
|
||||
type DetailsCheck = GroupedCheck &
|
||||
@@ -49,18 +49,20 @@ const ResponseTimeToolTip = ({
|
||||
theme,
|
||||
uiTimezone,
|
||||
}: ResponseTimeToolTipProps) => {
|
||||
const { t } = useTranslation();
|
||||
if (!label) return null;
|
||||
if (!payload) return null;
|
||||
if (!active) return null;
|
||||
|
||||
const format = tooltipDateFormatLookup(range);
|
||||
const responseTime = Math.floor(payload[0]?.payload?.avgResponseTime || 0);
|
||||
const responseTime = payload[0]?.payload?.avgResponseTime ?? 0;
|
||||
return (
|
||||
<BaseBox sx={{ py: theme.spacing(2), px: theme.spacing(4) }}>
|
||||
<Typography>{formatDateWithTz(String(label), format, uiTimezone)}</Typography>
|
||||
<Typography>
|
||||
Response time:{" "}
|
||||
{prettyMilliseconds(responseTime, { formatSubMilliseconds: true, compact: true })}
|
||||
{t("common.charts.histogram.responseTime", {
|
||||
value: formatMs(responseTime),
|
||||
})}
|
||||
</Typography>
|
||||
</BaseBox>
|
||||
);
|
||||
@@ -79,6 +81,7 @@ const TimingPhasesToolTip = ({
|
||||
theme,
|
||||
uiTimezone,
|
||||
}: TimingPhaseToolTipProps) => {
|
||||
const { t } = useTranslation();
|
||||
if (!active || !payload?.length) return null;
|
||||
const bucket = payload[0].payload as GroupedUptimeCheck;
|
||||
const total = PHASE_KEYS.reduce((sum, key) => sum + bucket[key], 0);
|
||||
@@ -86,7 +89,9 @@ const TimingPhasesToolTip = ({
|
||||
return (
|
||||
<BaseBox sx={{ py: theme.spacing(2), px: theme.spacing(4) }}>
|
||||
<Typography>{formatDateWithTz(bucket.bucketDate, format, uiTimezone)}</Typography>
|
||||
<Typography>Total: {prettyMilliseconds(total)}</Typography>
|
||||
<Typography>
|
||||
{t("common.charts.histogram.total", { value: formatMs(total) })}
|
||||
</Typography>
|
||||
{PHASE_KEYS.map((key) => (
|
||||
<Stack
|
||||
alignItems={"center"}
|
||||
@@ -95,15 +100,11 @@ const TimingPhasesToolTip = ({
|
||||
gap={SPACING.LG}
|
||||
>
|
||||
<Dot
|
||||
size={"12px"}
|
||||
size="lg"
|
||||
color={theme.palette.chart.phases[PHASE_COLOR_KEYS[key]]}
|
||||
/>
|
||||
<Typography>
|
||||
{PHASE_LABELS[key]}:{" "}
|
||||
{prettyMilliseconds(bucket[key], {
|
||||
formatSubMilliseconds: true,
|
||||
compact: true,
|
||||
})}
|
||||
{t(PHASE_LABEL_KEYS[key])}: {formatMs(bucket[key])}
|
||||
</Typography>
|
||||
</Stack>
|
||||
))}
|
||||
@@ -119,6 +120,9 @@ export const HistogramDetails = ({
|
||||
range: string;
|
||||
}) => {
|
||||
const [showTimingPhases, setShowTimingPhases] = useState(false);
|
||||
const [hoveredPhase, setHoveredPhase] = useState<string | null>(null);
|
||||
|
||||
const { t } = useTranslation();
|
||||
const theme = useTheme();
|
||||
const uiTimezone = useSelector((state: RootState) => state.ui.timezone);
|
||||
const yMax = useMemo(() => {
|
||||
@@ -142,7 +146,11 @@ export const HistogramDetails = ({
|
||||
strokeWidth={1.5}
|
||||
/>
|
||||
}
|
||||
title={showTimingPhases ? "Timing Phases" : "Response Time"}
|
||||
title={
|
||||
showTimingPhases
|
||||
? t("common.charts.labels.timingPhases")
|
||||
: t("common.charts.labels.responseTime")
|
||||
}
|
||||
onClick={() => {
|
||||
if (!hasTimingPhases) return;
|
||||
setShowTimingPhases((prev) => !prev);
|
||||
@@ -253,6 +261,7 @@ export const HistogramDetails = ({
|
||||
{hasTimingPhases &&
|
||||
showTimingPhases &&
|
||||
PHASE_KEYS.map((key) => {
|
||||
const dimmed = hoveredPhase !== null && hoveredPhase !== key;
|
||||
return (
|
||||
<Area
|
||||
key={key}
|
||||
@@ -261,11 +270,56 @@ export const HistogramDetails = ({
|
||||
dataKey={key}
|
||||
stroke={theme.palette.chart.phases[PHASE_COLOR_KEYS[key]]}
|
||||
fill={`url(#phaseGradient-${key})`}
|
||||
fillOpacity={dimmed ? 0.2 : undefined}
|
||||
strokeOpacity={dimmed ? 0.2 : undefined}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
<Stack
|
||||
justifyContent={"center"}
|
||||
gap={LAYOUT.XS}
|
||||
direction={"row"}
|
||||
flexWrap={"wrap"}
|
||||
>
|
||||
{showTimingPhases ? (
|
||||
PHASE_KEYS.map((key) => {
|
||||
return (
|
||||
<Stack
|
||||
direction="row"
|
||||
alignItems="center"
|
||||
gap={SPACING.LG}
|
||||
key={key}
|
||||
onMouseEnter={() => setHoveredPhase(key)}
|
||||
onMouseLeave={() => setHoveredPhase(null)}
|
||||
>
|
||||
<Dot
|
||||
color={theme.palette.chart.phases[PHASE_COLOR_KEYS[key]]}
|
||||
size="lg"
|
||||
/>
|
||||
<Typography lineHeight={1}>{t(PHASE_LABEL_KEYS[key])}</Typography>
|
||||
</Stack>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<Stack
|
||||
direction="row"
|
||||
alignItems="center"
|
||||
gap={SPACING.LG}
|
||||
onMouseEnter={() => setHoveredPhase("avgResponseTime")}
|
||||
onMouseLeave={() => setHoveredPhase(null)}
|
||||
>
|
||||
<Dot
|
||||
color={theme.palette.primary.main}
|
||||
size="lg"
|
||||
/>
|
||||
<Typography lineHeight={1}>
|
||||
{t("common.charts.labels.totalResponseTime")}
|
||||
</Typography>
|
||||
</Stack>
|
||||
)}
|
||||
</Stack>
|
||||
</BaseChart>
|
||||
);
|
||||
};
|
||||
@@ -1,207 +0,0 @@
|
||||
import type { GroupedUptimeCheck } from "@/Types/Check";
|
||||
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";
|
||||
import { Clock } from "lucide-react";
|
||||
import prettyMilliseconds from "pretty-ms";
|
||||
|
||||
import Stack from "@mui/material/Stack";
|
||||
import {
|
||||
Area,
|
||||
AreaChart,
|
||||
CartesianGrid,
|
||||
ResponsiveContainer,
|
||||
YAxis,
|
||||
XAxis,
|
||||
Tooltip,
|
||||
} from "recharts";
|
||||
import { BaseBox, BaseChart, Dot } from "@/Components/design-elements";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import { XTick } from "@/Components/monitors/charts/XTick";
|
||||
|
||||
import { formatDateWithTz, tooltipDateFormatLookup } from "@/Utils/TimeUtils";
|
||||
import { useSelector } from "react-redux";
|
||||
import { useMemo } from "react";
|
||||
import { useTheme } from "@mui/material";
|
||||
import { SPACING } from "@/Utils/Theme/constants";
|
||||
import { computeYAxisCap } from "@/Components/monitors/charts/ChartUtils";
|
||||
|
||||
export const PHASE_KEYS = [
|
||||
"avgDns",
|
||||
"avgTcp",
|
||||
"avgTls",
|
||||
"avgRequest",
|
||||
"avgFirstByte",
|
||||
"avgDownload",
|
||||
] as const;
|
||||
|
||||
const PHASE_COLOR_KEYS = {
|
||||
avgDns: "dns",
|
||||
avgTcp: "tcp",
|
||||
avgTls: "tls",
|
||||
avgRequest: "request",
|
||||
avgFirstByte: "firstByte",
|
||||
avgDownload: "download",
|
||||
} as const;
|
||||
|
||||
const PHASE_LABELS: Record<(typeof PHASE_KEYS)[number], string> = {
|
||||
avgDns: "DNS",
|
||||
avgTcp: "TCP",
|
||||
avgTls: "TLS",
|
||||
avgRequest: "Request",
|
||||
avgFirstByte: "First byte",
|
||||
avgDownload: "Download",
|
||||
};
|
||||
|
||||
type TimingPhaseToolTipProps = TooltipProps<ValueType, NameType> & {
|
||||
range: string;
|
||||
theme: Theme;
|
||||
uiTimezone: string;
|
||||
};
|
||||
|
||||
const TimingPhasesToolTip = ({
|
||||
active,
|
||||
payload,
|
||||
range,
|
||||
theme,
|
||||
uiTimezone,
|
||||
}: TimingPhaseToolTipProps) => {
|
||||
if (!active || !payload?.length) return null;
|
||||
const bucket = payload[0].payload as GroupedUptimeCheck;
|
||||
const total = PHASE_KEYS.reduce((sum, key) => sum + bucket[key], 0);
|
||||
const format = tooltipDateFormatLookup(range);
|
||||
return (
|
||||
<BaseBox sx={{ py: theme.spacing(2), px: theme.spacing(4) }}>
|
||||
<Typography>{formatDateWithTz(bucket.bucketDate, format, uiTimezone)}</Typography>
|
||||
<Typography>Total: {prettyMilliseconds(total)}</Typography>
|
||||
{PHASE_KEYS.map((key) => (
|
||||
<Stack
|
||||
alignItems={"center"}
|
||||
direction="row"
|
||||
key={key}
|
||||
gap={SPACING.LG}
|
||||
>
|
||||
<Dot
|
||||
size={"12px"}
|
||||
color={theme.palette.chart.phases[PHASE_COLOR_KEYS[key]]}
|
||||
/>
|
||||
<Typography>
|
||||
{PHASE_LABELS[key]}:{" "}
|
||||
{prettyMilliseconds(bucket[key], {
|
||||
formatSubMilliseconds: true,
|
||||
compact: true,
|
||||
})}
|
||||
</Typography>
|
||||
</Stack>
|
||||
))}
|
||||
</BaseBox>
|
||||
);
|
||||
};
|
||||
|
||||
export const HistogramDetailsStacked = ({
|
||||
checks = [],
|
||||
range,
|
||||
}: {
|
||||
checks: GroupedUptimeCheck[];
|
||||
range: string;
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
const uiTimezone = useSelector((state: RootState) => state.ui.timezone);
|
||||
|
||||
// Cap the y domain at 2x the p95 of bucket totals, so typical stacks sit
|
||||
// around mid-height with headroom above
|
||||
const yMax = useMemo(() => {
|
||||
const totals = checks.map((check) =>
|
||||
PHASE_KEYS.reduce((sum, key) => sum + check[key], 0)
|
||||
);
|
||||
return computeYAxisCap(totals);
|
||||
}, [checks]);
|
||||
|
||||
return (
|
||||
<BaseChart
|
||||
icon={
|
||||
<Clock
|
||||
size={20}
|
||||
strokeWidth={1.5}
|
||||
/>
|
||||
}
|
||||
title="Timing phases"
|
||||
>
|
||||
<ResponsiveContainer
|
||||
width="100%"
|
||||
height={300}
|
||||
>
|
||||
<AreaChart data={checks.slice()}>
|
||||
<CartesianGrid
|
||||
stroke={theme.palette.divider}
|
||||
strokeWidth={1}
|
||||
strokeOpacity={1}
|
||||
fill="transparent"
|
||||
vertical={false}
|
||||
/>
|
||||
<defs>
|
||||
{PHASE_KEYS.map((key) => (
|
||||
<linearGradient
|
||||
key={key}
|
||||
id={`phaseGradient-${key}`}
|
||||
x1="0"
|
||||
y1="0"
|
||||
x2="0"
|
||||
y2="1"
|
||||
>
|
||||
<stop
|
||||
offset="0%"
|
||||
stopColor={theme.palette.chart.phases[PHASE_COLOR_KEYS[key]]}
|
||||
stopOpacity={0.8}
|
||||
/>
|
||||
<stop
|
||||
offset="100%"
|
||||
stopColor={theme.palette.chart.phases[PHASE_COLOR_KEYS[key]]}
|
||||
stopOpacity={0.2}
|
||||
/>
|
||||
</linearGradient>
|
||||
))}
|
||||
</defs>
|
||||
<YAxis
|
||||
hide
|
||||
// scale="sqrt"
|
||||
domain={[0, yMax ?? "auto"]}
|
||||
allowDataOverflow
|
||||
/>
|
||||
<XAxis
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
dataKey="bucketDate"
|
||||
tick={(props) => (
|
||||
<XTick
|
||||
{...props}
|
||||
range={range}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Tooltip
|
||||
content={(props) => (
|
||||
<TimingPhasesToolTip
|
||||
{...props}
|
||||
range={range}
|
||||
theme={theme}
|
||||
uiTimezone={uiTimezone}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{PHASE_KEYS.map((key) => (
|
||||
<Area
|
||||
key={key}
|
||||
type="monotone"
|
||||
stackId={1}
|
||||
dataKey={key}
|
||||
stroke={theme.palette.chart.phases[PHASE_COLOR_KEYS[key]]}
|
||||
fill={`url(#phaseGradient-${key})`}
|
||||
/>
|
||||
))}
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
</BaseChart>
|
||||
);
|
||||
};
|
||||
@@ -3,7 +3,7 @@ import Typography from "@mui/material/Typography";
|
||||
import { BaseChart } from "@/Components/design-elements";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import { useSelector } from "react-redux";
|
||||
import { formatDateWithTz } from "@/Utils/TimeUtils";
|
||||
import { formatDateWithTz, formatMs } from "@/Utils/TimeUtils";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { ResponsiveContainer, BarChart, XAxis, Bar, Cell, Tooltip } from "recharts";
|
||||
import { getResponseTimeColor } from "@/Utils/MonitorUtils";
|
||||
@@ -100,7 +100,7 @@ export const HistogramStatus = ({
|
||||
</Typography>
|
||||
) : null}
|
||||
<Typography variant="caption">{titleText}</Typography>
|
||||
<Typography variant="body2">{Math.floor(avg)} ms</Typography>
|
||||
<Typography variant="body2">{formatMs(avg)}</Typography>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -7,6 +7,7 @@ import { Cell, RadialBarChart, RadialBar, ResponsiveContainer } from "recharts";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { getResponseTimeColor } from "@/Utils/MonitorUtils";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import { formatMs } from "@/Utils/TimeUtils";
|
||||
|
||||
export const RadialAvgResponse = ({ avg, max }: { avg: number; max: number }) => {
|
||||
const { t } = useTranslation();
|
||||
@@ -84,7 +85,9 @@ export const RadialAvgResponse = ({ avg, max }: { avg: number; max: number }) =>
|
||||
<Typography
|
||||
variant="h1"
|
||||
textAlign={"center"}
|
||||
>{`${avg?.toFixed()}ms`}</Typography>
|
||||
>
|
||||
{formatMs(avg)}
|
||||
</Typography>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</BaseChart>
|
||||
|
||||
@@ -10,10 +10,11 @@ import { useSelector, useDispatch } from "react-redux";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useState } from "react";
|
||||
import { useNavigate } from "react-router";
|
||||
import { MoreVertical, LogOut } from "lucide-react";
|
||||
import { MoreVertical, LogOut, Moon, Sun } from "lucide-react";
|
||||
import { Avatar, Icon } from "@/Components/design-elements";
|
||||
import { clearAuthState } from "@/Features/Auth/authSlice.js";
|
||||
import type { RootState } from "@/Types/state.js";
|
||||
import { setMode } from "@/Features/UI/uiSlice.js";
|
||||
|
||||
interface AuthFooterProps {
|
||||
collapsed: boolean;
|
||||
@@ -27,6 +28,7 @@ interface AuthFooterProps {
|
||||
export const AuthFooter = ({ collapsed, accountMenuItems }: AuthFooterProps) => {
|
||||
const { t } = useTranslation();
|
||||
const theme = useTheme();
|
||||
const mode = useSelector((state: RootState) => state.ui.mode);
|
||||
const user = useSelector((state: RootState) => state.auth.user);
|
||||
const navigate = useNavigate();
|
||||
const dispatch = useDispatch();
|
||||
@@ -105,13 +107,14 @@ export const AuthFooter = ({ collapsed, accountMenuItems }: AuthFooterProps) =>
|
||||
<Typography
|
||||
fontWeight={500}
|
||||
noWrap
|
||||
sx={{ color: theme.palette.text.primary }}
|
||||
color={theme.palette.text.primary}
|
||||
>
|
||||
{user?.firstName} {user?.lastName}
|
||||
</Typography>
|
||||
<Typography
|
||||
noWrap
|
||||
sx={{ textTransform: "capitalize", color: theme.palette.text.secondary }}
|
||||
textTransform={"capitalize"}
|
||||
color={theme.palette.text.secondary}
|
||||
>
|
||||
{getRoleText()}
|
||||
</Typography>
|
||||
@@ -154,15 +157,12 @@ export const AuthFooter = ({ collapsed, accountMenuItems }: AuthFooterProps) =>
|
||||
pb={2}
|
||||
sx={{ pointerEvents: "none" }}
|
||||
>
|
||||
<Typography
|
||||
fontWeight={500}
|
||||
fontSize={13}
|
||||
>
|
||||
<Typography fontWeight={500}>
|
||||
{user?.firstName} {user?.lastName}
|
||||
</Typography>
|
||||
<Typography
|
||||
fontSize={12}
|
||||
sx={{ textTransform: "capitalize" }}
|
||||
variant="body2"
|
||||
textTransform={"capitalize"}
|
||||
>
|
||||
{getRoleText()}
|
||||
</Typography>
|
||||
@@ -178,6 +178,18 @@ export const AuthFooter = ({ collapsed, accountMenuItems }: AuthFooterProps) =>
|
||||
{item.name}
|
||||
</MenuItem>
|
||||
))}
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
dispatch(setMode(mode === "light" ? "dark" : "light"));
|
||||
handleMenuClose();
|
||||
}}
|
||||
sx={menuItemSx}
|
||||
>
|
||||
<Icon icon={mode === "light" ? Moon : Sun} />
|
||||
{mode === "light"
|
||||
? t("pages.settings.form.ui.option.theme.dark")
|
||||
: t("pages.settings.form.ui.option.theme.light")}
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
onClick={handleLogout}
|
||||
sx={menuItemSx}
|
||||
|
||||
@@ -18,8 +18,8 @@ import {
|
||||
Lock,
|
||||
Users,
|
||||
Tag,
|
||||
Waypoints,
|
||||
} from "lucide-react";
|
||||
|
||||
export const getMenu = (t: Function) => {
|
||||
return [
|
||||
{
|
||||
@@ -47,6 +47,11 @@ export const getMenu = (t: Function) => {
|
||||
path: "tags",
|
||||
icon: <Icon icon={Tag} />,
|
||||
},
|
||||
{
|
||||
name: t("components.sidebar.menu.proxies"),
|
||||
path: "proxies",
|
||||
icon: <Icon icon={Waypoints} />,
|
||||
},
|
||||
{
|
||||
name: t("components.sidebar.menu.checks"),
|
||||
path: "checks",
|
||||
|
||||
@@ -102,6 +102,7 @@ export const Sidebar = () => {
|
||||
})}
|
||||
</List>
|
||||
<StarPrompt />
|
||||
|
||||
<Divider sx={{ borderColor: theme.palette.divider }} />
|
||||
|
||||
<AuthFooter
|
||||
|
||||
@@ -1,6 +1,11 @@
|
||||
import { useMemo } from "react";
|
||||
import { monitorSchema, type MonitorFormData } from "@/Validation/monitor";
|
||||
import { DefaultHttpMethod, DefaultPageSpeedStrategy } from "@/Types/Monitor";
|
||||
import {
|
||||
DefaultHttpMethod,
|
||||
DefaultMonitorMatchMethod,
|
||||
DefaultPageSpeedStrategy,
|
||||
DefaultProxyMode,
|
||||
} from "@/Types/Monitor";
|
||||
import type { Monitor, MonitorType } from "@/Types/Monitor";
|
||||
|
||||
interface UseMonitorFormOptions {
|
||||
@@ -42,8 +47,10 @@ export const getMonitorDefaults = (
|
||||
url: data?.url || "",
|
||||
method: data?.method ?? DefaultHttpMethod,
|
||||
ignoreTlsErrors: data?.ignoreTlsErrors || false,
|
||||
proxyMode: data?.proxyMode ?? DefaultProxyMode,
|
||||
proxyId: data?.proxyId || "",
|
||||
useAdvancedMatching: data?.useAdvancedMatching || false,
|
||||
matchMethod: data?.matchMethod || "",
|
||||
matchMethod: data?.matchMethod || DefaultMonitorMatchMethod,
|
||||
expectedValue: data?.expectedValue || "",
|
||||
jsonPath: data?.jsonPath || "",
|
||||
customUpCodes: data?.customUpCodes || [],
|
||||
@@ -137,8 +144,10 @@ export const getMonitorDefaults = (
|
||||
url: "",
|
||||
method: DefaultHttpMethod,
|
||||
ignoreTlsErrors: false,
|
||||
proxyMode: DefaultProxyMode,
|
||||
proxyId: "",
|
||||
useAdvancedMatching: false,
|
||||
matchMethod: "",
|
||||
matchMethod: DefaultMonitorMatchMethod,
|
||||
expectedValue: "",
|
||||
jsonPath: "",
|
||||
customUpCodes: [],
|
||||
|
||||
@@ -8,89 +8,17 @@ interface UseNotificationFormOptions {
|
||||
}
|
||||
|
||||
function buildDefaults(data: Notification | null): NotificationFormData {
|
||||
if (data?.type === "matrix") {
|
||||
return {
|
||||
type: "matrix",
|
||||
notificationName: data.notificationName || "",
|
||||
homeserverUrl: data.homeserverUrl || "",
|
||||
roomId: data.roomId || "",
|
||||
accessToken: data.accessToken || "",
|
||||
};
|
||||
}
|
||||
if (data?.type === "telegram") {
|
||||
return {
|
||||
type: "telegram",
|
||||
notificationName: data.notificationName || "",
|
||||
address: data.address || "",
|
||||
accessToken: data.accessToken || "",
|
||||
};
|
||||
}
|
||||
if (data?.type === "slack") {
|
||||
return {
|
||||
type: "slack",
|
||||
notificationName: data.notificationName || "",
|
||||
address: data.address || "",
|
||||
};
|
||||
}
|
||||
if (data?.type === "discord") {
|
||||
return {
|
||||
type: "discord",
|
||||
notificationName: data.notificationName || "",
|
||||
address: data.address || "",
|
||||
};
|
||||
}
|
||||
if (data?.type === "webhook") {
|
||||
return {
|
||||
type: "webhook",
|
||||
notificationName: data.notificationName || "",
|
||||
address: data.address || "",
|
||||
};
|
||||
}
|
||||
if (data?.type === "pager_duty") {
|
||||
return {
|
||||
type: "pager_duty",
|
||||
notificationName: data.notificationName || "",
|
||||
address: data.address || "",
|
||||
};
|
||||
}
|
||||
if (data?.type === "teams") {
|
||||
return {
|
||||
type: "teams",
|
||||
notificationName: data.notificationName || "",
|
||||
address: data.address || "",
|
||||
};
|
||||
}
|
||||
if (data?.type === "twilio") {
|
||||
return {
|
||||
type: "twilio",
|
||||
notificationName: data.notificationName || "",
|
||||
accountSid: data.accountSid || "",
|
||||
accessToken: data.accessToken || "",
|
||||
phone: data.phone || "",
|
||||
twilioPhoneNumber: data.twilioPhoneNumber || "",
|
||||
};
|
||||
}
|
||||
if (data?.type === "pushover") {
|
||||
return {
|
||||
type: "pushover",
|
||||
notificationName: data.notificationName || "",
|
||||
address: data.address || "",
|
||||
accessToken: data.accessToken || "",
|
||||
};
|
||||
}
|
||||
if (data?.type === "ntfy") {
|
||||
return {
|
||||
type: "ntfy",
|
||||
notificationName: data.notificationName || "",
|
||||
address: data.address || "",
|
||||
topic: data.topic || "",
|
||||
};
|
||||
}
|
||||
// Default: email (covers both data === null and data.type === "email")
|
||||
return {
|
||||
type: "email",
|
||||
type: data?.type ?? "email",
|
||||
notificationName: data?.notificationName || "",
|
||||
address: data?.address || "",
|
||||
accessToken: data?.accessToken || "",
|
||||
accountSid: data?.accountSid || "",
|
||||
phone: data?.phone || "",
|
||||
twilioPhoneNumber: data?.twilioPhoneNumber || "",
|
||||
homeserverUrl: data?.homeserverUrl || "",
|
||||
roomId: data?.roomId || "",
|
||||
topic: data?.topic || "",
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,22 @@
|
||||
import { useMemo } from "react";
|
||||
import { proxySchema, type ProxyFormData } from "@/Validation/proxy";
|
||||
import type { ProxyResponse } from "@/Types/Proxy";
|
||||
|
||||
interface UseProxiesFormOptions {
|
||||
data?: ProxyResponse | null;
|
||||
}
|
||||
|
||||
export const useProxiesForm = ({ data }: UseProxiesFormOptions) => {
|
||||
return useMemo(() => {
|
||||
const defaults: ProxyFormData = {
|
||||
name: data?.name ?? "",
|
||||
protocol: data?.protocol ?? "http",
|
||||
host: data?.host ?? "",
|
||||
port: data?.port ?? 8080,
|
||||
username: "",
|
||||
password: "",
|
||||
};
|
||||
|
||||
return { schema: proxySchema, defaults };
|
||||
}, [data]);
|
||||
};
|
||||
@@ -43,6 +43,8 @@ export const useSettingsForm = ({ data = null }: UseSettingsFormOptions = {}) =>
|
||||
checkTTL: data?.checkTTL ?? 30,
|
||||
pagespeedApiKey: "",
|
||||
systemEmailPassword: "",
|
||||
globalProxyEnabled: data?.globalProxyEnabled ?? false,
|
||||
globalProxyId: data?.globalProxyId ?? null,
|
||||
};
|
||||
|
||||
return { schema: settingsSchema, defaults };
|
||||
|
||||
@@ -1,11 +1,6 @@
|
||||
import { Trash2 } from "lucide-react";
|
||||
import { TextField, Button, Autocomplete } from "@/Components/inputs";
|
||||
import { TextField, Button } from "@/Components/inputs";
|
||||
import Stack from "@mui/material/Stack";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
import Divider from "@mui/material/Divider";
|
||||
import FormHelperText from "@mui/material/FormHelperText";
|
||||
import { useForm, Controller } from "react-hook-form";
|
||||
import { FormProvider, useForm } from "react-hook-form";
|
||||
import { ConfigBox, BasePage } from "@/Components/design-elements";
|
||||
|
||||
import { UserRoles } from "@/Types/User";
|
||||
@@ -22,6 +17,8 @@ import { useSelector } from "react-redux";
|
||||
import type { RootState } from "@/Types/state";
|
||||
import { LAYOUT } from "@/Utils/Theme/constants";
|
||||
import { useIsAdmin, useIsSuperAdmin } from "@/Hooks/useIsAdmin";
|
||||
import { FormTextField } from "@/Components/inputs/forms/FormTextField";
|
||||
import { FormMultiSelectField } from "@/Components/inputs/forms/FormMultiSelectField";
|
||||
|
||||
interface RoleOption {
|
||||
id: UserRole;
|
||||
@@ -43,10 +40,11 @@ const EditUserPage = () => {
|
||||
|
||||
const { data: user, isLoading } = useGet<User>(`/auth/users/${userId}`);
|
||||
|
||||
const { control, handleSubmit, reset, watch, setValue } = useForm<EditUserFormData>({
|
||||
const form = useForm<EditUserFormData>({
|
||||
resolver,
|
||||
defaultValues: defaults,
|
||||
});
|
||||
const { handleSubmit, reset } = form;
|
||||
|
||||
useEffect(() => {
|
||||
if (user) {
|
||||
@@ -64,13 +62,6 @@ const EditUserPage = () => {
|
||||
name: t(`common.auth.roles.${role}`),
|
||||
}));
|
||||
|
||||
const watchedRoles = watch("role");
|
||||
const selectedRoles = roleOptions.filter((r) => watchedRoles?.includes(r.id));
|
||||
const handleRemoveRole = (roleToRemove: UserRole) => {
|
||||
const newRoles = watchedRoles.filter((role) => role !== roleToRemove);
|
||||
setValue("role", newRoles, { shouldValidate: true });
|
||||
};
|
||||
|
||||
const canDeleteUser =
|
||||
isAdmin &&
|
||||
userId !== currentUser?.id &&
|
||||
@@ -90,42 +81,31 @@ const EditUserPage = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<BasePage loading={isLoading}>
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<FormProvider {...form}>
|
||||
<BasePage
|
||||
loading={isLoading}
|
||||
component={"form"}
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
>
|
||||
<Stack gap={theme.spacing(8)}>
|
||||
<ConfigBox
|
||||
title={t("pages.account.form.name.title")}
|
||||
subtitle={t("pages.account.form.name.description")}
|
||||
rightContent={
|
||||
<Stack gap={theme.spacing(8)}>
|
||||
<Controller
|
||||
<FormTextField
|
||||
name="firstName"
|
||||
control={control}
|
||||
render={({ field, fieldState }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
fieldLabel={t("common.form.name.option.firstName.label")}
|
||||
placeholder={t("common.form.name.option.firstName.placeholder")}
|
||||
error={!!fieldState.error}
|
||||
helperText={fieldState.error?.message}
|
||||
autoComplete="given-name"
|
||||
/>
|
||||
)}
|
||||
autoComplete="given-name"
|
||||
fieldLabel={t("common.form.name.option.firstName.label")}
|
||||
placeholder={t("common.form.name.option.firstName.placeholder")}
|
||||
/>
|
||||
<Controller
|
||||
<FormTextField
|
||||
name="lastName"
|
||||
control={control}
|
||||
render={({ field, fieldState }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
fieldLabel={t("common.form.name.option.lastName.label")}
|
||||
placeholder={t("common.form.name.option.lastName.placeholder")}
|
||||
error={!!fieldState.error}
|
||||
helperText={fieldState.error?.message}
|
||||
autoComplete="family-name"
|
||||
/>
|
||||
)}
|
||||
autoComplete="family-name"
|
||||
fieldLabel={t("common.form.name.option.lastName.label")}
|
||||
placeholder={t("common.form.name.option.lastName.placeholder")}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
fieldLabel={t("common.form.email.option.email.label")}
|
||||
placeholder={t("common.form.email.option.email.placeholder")}
|
||||
@@ -139,55 +119,11 @@ const EditUserPage = () => {
|
||||
title={t("pages.editUser.form.roles.title")}
|
||||
subtitle={t("pages.editUser.form.roles.description")}
|
||||
rightContent={
|
||||
<Stack spacing={theme.spacing(4)}>
|
||||
<Controller
|
||||
name="role"
|
||||
control={control}
|
||||
render={({ field, fieldState }) => (
|
||||
<>
|
||||
<Autocomplete
|
||||
fieldLabel={t("common.form.role.option.role.label")}
|
||||
multiple
|
||||
options={roleOptions}
|
||||
value={selectedRoles}
|
||||
getOptionLabel={(option) => option.name}
|
||||
onChange={(_: unknown, newValue: RoleOption[]) => {
|
||||
field.onChange(newValue.map((r) => r.id));
|
||||
}}
|
||||
isOptionEqualToValue={(option, value) => option.id === value.id}
|
||||
/>
|
||||
{fieldState.error && (
|
||||
<FormHelperText error>{fieldState.error.message}</FormHelperText>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
{selectedRoles.length > 0 && (
|
||||
<Stack
|
||||
flex={1}
|
||||
width="100%"
|
||||
>
|
||||
{selectedRoles.map((role, index) => (
|
||||
<Stack
|
||||
direction="row"
|
||||
alignItems="center"
|
||||
key={role.id}
|
||||
width="100%"
|
||||
>
|
||||
<Typography flexGrow={1}>{role.name}</Typography>
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => handleRemoveRole(role.id)}
|
||||
aria-label="Remove role"
|
||||
>
|
||||
<Trash2 size={16} />
|
||||
</IconButton>
|
||||
{index < selectedRoles.length - 1 && <Divider />}
|
||||
</Stack>
|
||||
))}
|
||||
</Stack>
|
||||
)}
|
||||
</Stack>
|
||||
<FormMultiSelectField
|
||||
name="role"
|
||||
fieldLabel={t("common.form.role.option.role.label")}
|
||||
options={roleOptions}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Stack
|
||||
@@ -217,19 +153,19 @@ const EditUserPage = () => {
|
||||
</Button>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</form>
|
||||
<DialogInput
|
||||
open={showDeleteDialog}
|
||||
title={t("pages.editUser.dialog.removeUser.title")}
|
||||
content={t("pages.editUser.dialog.removeUser.content", {
|
||||
name: `${user?.firstName} ${user?.lastName}`,
|
||||
})}
|
||||
onCancel={() => setShowDeleteDialog(false)}
|
||||
onConfirm={handleDeleteUser}
|
||||
confirmText={t("common.buttons.removeUser")}
|
||||
loading={isDeleting}
|
||||
/>
|
||||
</BasePage>
|
||||
<DialogInput
|
||||
open={showDeleteDialog}
|
||||
title={t("pages.editUser.dialog.removeUser.title")}
|
||||
content={t("pages.editUser.dialog.removeUser.content", {
|
||||
name: `${user?.firstName} ${user?.lastName}`,
|
||||
})}
|
||||
onCancel={() => setShowDeleteDialog(false)}
|
||||
onConfirm={handleDeleteUser}
|
||||
confirmText={t("common.buttons.removeUser")}
|
||||
loading={isDeleting}
|
||||
/>
|
||||
</BasePage>
|
||||
</FormProvider>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,13 +1,15 @@
|
||||
import { Stack } from "@mui/material";
|
||||
import { ConfigBox } from "@/Components/design-elements";
|
||||
import { TextField, Button } from "@/Components/inputs";
|
||||
import { Button } from "@/Components/inputs";
|
||||
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useTheme } from "@mui/material";
|
||||
import { useForm, Controller } from "react-hook-form";
|
||||
import { useForm, FormProvider } from "react-hook-form";
|
||||
import { usePasswordForm } from "@/Hooks/usePasswordForm";
|
||||
import { usePatch } from "@/Hooks/UseApi";
|
||||
import type { PasswordFormData } from "@/Validation/password";
|
||||
import { FormTextField } from "@/Components/inputs/forms/FormTextField";
|
||||
import { LAYOUT } from "@/Utils/Theme/constants";
|
||||
|
||||
export const TabPassword = () => {
|
||||
const { t } = useTranslation();
|
||||
@@ -15,10 +17,11 @@ export const TabPassword = () => {
|
||||
const { resolver, defaults } = usePasswordForm();
|
||||
const { patch, loading } = usePatch<FormData, void>();
|
||||
|
||||
const { control, handleSubmit, reset } = useForm<PasswordFormData>({
|
||||
const form = useForm<PasswordFormData>({
|
||||
resolver,
|
||||
defaultValues: defaults,
|
||||
});
|
||||
const { handleSubmit, reset } = form;
|
||||
|
||||
const onSubmit = async (data: PasswordFormData) => {
|
||||
const fd = new FormData();
|
||||
@@ -32,85 +35,61 @@ export const TabPassword = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<Stack
|
||||
gap={theme.spacing(8)}
|
||||
component="form"
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
>
|
||||
<ConfigBox
|
||||
title={t("pages.account.form.currentPassword.title")}
|
||||
subtitle={t("pages.account.form.currentPassword.description")}
|
||||
rightContent={
|
||||
<Controller
|
||||
name="currentPassword"
|
||||
control={control}
|
||||
render={({ field, fieldState }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
type="password"
|
||||
fieldLabel={t("pages.account.form.currentPassword.option.label")}
|
||||
placeholder={t("pages.account.form.currentPassword.option.placeholder")}
|
||||
autoComplete="current-password"
|
||||
error={!!fieldState.error}
|
||||
helperText={fieldState.error?.message ?? ""}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<ConfigBox
|
||||
title={t("pages.account.form.newPassword.title")}
|
||||
subtitle={t("pages.account.form.newPassword.description")}
|
||||
rightContent={
|
||||
<Stack gap={theme.spacing(8)}>
|
||||
<Controller
|
||||
name="newPassword"
|
||||
control={control}
|
||||
render={({ field, fieldState }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
type="password"
|
||||
fieldLabel={t(
|
||||
"pages.account.form.newPassword.option.newPassword.label"
|
||||
)}
|
||||
placeholder={t(
|
||||
"pages.account.form.newPassword.option.newPassword.placeholder"
|
||||
)}
|
||||
autoComplete="new-password"
|
||||
error={!!fieldState.error}
|
||||
helperText={fieldState.error?.message ?? ""}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="confirm"
|
||||
control={control}
|
||||
render={({ field, fieldState }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
type="password"
|
||||
fieldLabel={t("pages.account.form.newPassword.option.confirm.label")}
|
||||
placeholder={t(
|
||||
"pages.account.form.newPassword.option.confirm.placeholder"
|
||||
)}
|
||||
autoComplete="new-password"
|
||||
error={!!fieldState.error}
|
||||
helperText={fieldState.error?.message ?? ""}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Stack>
|
||||
}
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="contained"
|
||||
color="primary"
|
||||
loading={loading}
|
||||
sx={{ alignSelf: "flex-end", minWidth: 100 }}
|
||||
<FormProvider {...form}>
|
||||
<Stack
|
||||
gap={theme.spacing(LAYOUT.MD)}
|
||||
component="form"
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
>
|
||||
{t("common.buttons.save")}
|
||||
</Button>
|
||||
</Stack>
|
||||
<ConfigBox
|
||||
title={t("pages.account.form.currentPassword.title")}
|
||||
subtitle={t("pages.account.form.currentPassword.description")}
|
||||
rightContent={
|
||||
<FormTextField
|
||||
name="currentPassword"
|
||||
type="password"
|
||||
autoComplete="current-password"
|
||||
fieldLabel={t("pages.account.form.currentPassword.option.label")}
|
||||
placeholder={t("pages.account.form.currentPassword.option.placeholder")}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<ConfigBox
|
||||
title={t("pages.account.form.newPassword.title")}
|
||||
subtitle={t("pages.account.form.newPassword.description")}
|
||||
rightContent={
|
||||
<Stack gap={theme.spacing(LAYOUT.MD)}>
|
||||
<FormTextField
|
||||
name="newPassword"
|
||||
type="password"
|
||||
autoComplete="new-password"
|
||||
fieldLabel={t("pages.account.form.newPassword.option.newPassword.label")}
|
||||
placeholder={t(
|
||||
"pages.account.form.newPassword.option.newPassword.placeholder"
|
||||
)}
|
||||
/>
|
||||
<FormTextField
|
||||
name="confirm"
|
||||
type="password"
|
||||
autoComplete="new-password"
|
||||
fieldLabel={t("pages.account.form.newPassword.option.confirm.label")}
|
||||
placeholder={t(
|
||||
"pages.account.form.newPassword.option.confirm.placeholder"
|
||||
)}
|
||||
/>
|
||||
</Stack>
|
||||
}
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="contained"
|
||||
color="primary"
|
||||
loading={loading}
|
||||
sx={{ alignSelf: "flex-end", minWidth: 100 }}
|
||||
>
|
||||
{t("common.buttons.save")}
|
||||
</Button>
|
||||
</Stack>
|
||||
</FormProvider>
|
||||
);
|
||||
};
|
||||
@@ -1,11 +1,11 @@
|
||||
import { Stack } from "@mui/material";
|
||||
import { ConfigBox } from "@/Components/design-elements";
|
||||
import { TextField, Button } from "@/Components/inputs";
|
||||
import { Button } from "@/Components/inputs";
|
||||
import { ImageUpload } from "@/Components/inputs";
|
||||
|
||||
import { useTheme } from "@mui/material";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useForm, Controller } from "react-hook-form";
|
||||
import { useForm, FormProvider } from "react-hook-form";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
import { useProfileForm } from "@/Hooks/useProfileForm";
|
||||
import { usePatch } from "@/Hooks/UseApi";
|
||||
@@ -13,6 +13,8 @@ import { setUser } from "@/Features/Auth/authSlice";
|
||||
import type { ProfileFormData } from "@/Validation/profile";
|
||||
import type { RootState } from "@/Types/state";
|
||||
import type { User } from "@/Types/User";
|
||||
import { FormTextField } from "@/Components/inputs/forms/FormTextField";
|
||||
import { LAYOUT } from "@/Utils/Theme/constants";
|
||||
|
||||
export const TabProfile = () => {
|
||||
const theme = useTheme();
|
||||
@@ -22,7 +24,7 @@ export const TabProfile = () => {
|
||||
const { resolver, defaults } = useProfileForm();
|
||||
const { patch, loading: patchLoading } = usePatch<FormData, User>();
|
||||
|
||||
const { control, handleSubmit, setValue, watch } = useForm<ProfileFormData>({
|
||||
const form = useForm<ProfileFormData>({
|
||||
resolver,
|
||||
defaultValues: {
|
||||
firstName: user?.firstName ?? defaults.firstName,
|
||||
@@ -31,7 +33,7 @@ export const TabProfile = () => {
|
||||
deleteProfileImage: defaults.deleteProfileImage,
|
||||
},
|
||||
});
|
||||
|
||||
const { handleSubmit, setValue, watch } = form;
|
||||
const currentImage = watch("profileImage");
|
||||
const deleteImage = watch("deleteProfileImage");
|
||||
|
||||
@@ -74,66 +76,52 @@ export const TabProfile = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<Stack
|
||||
gap={theme.spacing(8)}
|
||||
component="form"
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
>
|
||||
<ConfigBox
|
||||
title={t("pages.account.form.name.title")}
|
||||
subtitle={t("pages.account.form.name.description")}
|
||||
rightContent={
|
||||
<Stack gap={theme.spacing(8)}>
|
||||
<Controller
|
||||
name="firstName"
|
||||
control={control}
|
||||
render={({ field, fieldState }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
fieldLabel={t("common.form.name.option.firstName.label")}
|
||||
placeholder={t("common.form.name.option.firstName.placeholder")}
|
||||
autoComplete="given-name"
|
||||
error={!!fieldState.error}
|
||||
helperText={fieldState.error?.message ?? ""}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="lastName"
|
||||
control={control}
|
||||
render={({ field, fieldState }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
fieldLabel={t("common.form.name.option.lastName.label")}
|
||||
placeholder={t("common.form.name.option.lastName.placeholder")}
|
||||
autoComplete="family-name"
|
||||
error={!!fieldState.error}
|
||||
helperText={fieldState.error?.message ?? ""}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Stack>
|
||||
}
|
||||
/>
|
||||
<ConfigBox
|
||||
title={t("pages.account.form.photo.title")}
|
||||
subtitle={t("pages.account.form.photo.description")}
|
||||
rightContent={
|
||||
<ImageUpload
|
||||
src={getCurrentImageSrc()}
|
||||
onChange={handleImageChange}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="contained"
|
||||
color="primary"
|
||||
loading={patchLoading}
|
||||
sx={{ alignSelf: "flex-end", minWidth: 100 }}
|
||||
<FormProvider {...form}>
|
||||
<Stack
|
||||
gap={theme.spacing(LAYOUT.MD)}
|
||||
component="form"
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
>
|
||||
{t("common.buttons.save")}
|
||||
</Button>
|
||||
</Stack>
|
||||
<ConfigBox
|
||||
title={t("pages.account.form.name.title")}
|
||||
subtitle={t("pages.account.form.name.description")}
|
||||
rightContent={
|
||||
<Stack gap={theme.spacing(LAYOUT.MD)}>
|
||||
<FormTextField
|
||||
name="firstName"
|
||||
autoComplete="given-name"
|
||||
fieldLabel={t("common.form.name.option.firstName.label")}
|
||||
placeholder={t("common.form.name.option.firstName.placeholder")}
|
||||
/>
|
||||
<FormTextField
|
||||
name="lastName"
|
||||
autoComplete="family-name"
|
||||
fieldLabel={t("common.form.name.option.lastName.label")}
|
||||
placeholder={t("common.form.name.option.lastName.placeholder")}
|
||||
/>
|
||||
</Stack>
|
||||
}
|
||||
/>
|
||||
<ConfigBox
|
||||
title={t("pages.account.form.photo.title")}
|
||||
subtitle={t("pages.account.form.photo.description")}
|
||||
rightContent={
|
||||
<ImageUpload
|
||||
src={getCurrentImageSrc()}
|
||||
onChange={handleImageChange}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="contained"
|
||||
color="primary"
|
||||
loading={patchLoading}
|
||||
sx={{ alignSelf: "flex-end", minWidth: 100 }}
|
||||
>
|
||||
{t("common.buttons.save")}
|
||||
</Button>
|
||||
</Stack>
|
||||
</FormProvider>
|
||||
);
|
||||
};
|
||||
@@ -1,15 +1,16 @@
|
||||
import { Stack } from "@mui/material";
|
||||
import MenuItem from "@mui/material/MenuItem";
|
||||
import { useTheme } from "@mui/material";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useForm, Controller } from "react-hook-form";
|
||||
import { useForm, FormProvider } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod/dist/zod.js";
|
||||
import { Dialog, TextField, Select } from "@/Components/inputs";
|
||||
import { Dialog } from "@/Components/inputs";
|
||||
import { useAddTeamMemberForm } from "@/Hooks/useAddTeamMemberForm";
|
||||
import type { AddTeamMemberFormData } from "@/Validation/addTeamMember";
|
||||
import type { UserRole, User } from "@/Types/User";
|
||||
import type { User } from "@/Types/User";
|
||||
import { usePost } from "@/Hooks/UseApi";
|
||||
import { LAYOUT } from "@/Utils/Theme/constants";
|
||||
import { FormTextField } from "@/Components/inputs/forms/FormTextField";
|
||||
import { RoleSelectField } from "./RoleSelectField";
|
||||
|
||||
interface AddTeamMemberDialogProps {
|
||||
open: boolean;
|
||||
@@ -35,17 +36,13 @@ export const AddTeamMemberDialog = ({
|
||||
const { schema, defaults } = useAddTeamMemberForm();
|
||||
const { post, loading } = usePost<RegisterPayload, User>();
|
||||
|
||||
const { control, handleSubmit, reset, setError } = useForm<AddTeamMemberFormData>({
|
||||
const form = useForm<AddTeamMemberFormData>({
|
||||
resolver: zodResolver(schema),
|
||||
defaultValues: defaults,
|
||||
values: defaults,
|
||||
});
|
||||
|
||||
const roleOptions: { value: UserRole; label: string }[] = [
|
||||
{ value: "admin", label: t("common.auth.roles.admin") },
|
||||
{ value: "user", label: t("common.auth.roles.user") },
|
||||
{ value: "demo", label: t("common.auth.roles.demo") },
|
||||
];
|
||||
const { handleSubmit, reset, setError } = form;
|
||||
|
||||
const handleClose = () => {
|
||||
reset();
|
||||
@@ -55,7 +52,7 @@ export const AddTeamMemberDialog = ({
|
||||
const onSubmit = async (data: AddTeamMemberFormData) => {
|
||||
if (loading) return;
|
||||
|
||||
const { confirm, ...userData } = data;
|
||||
const { confirm: _confirm, ...userData } = data;
|
||||
const payload: RegisterPayload = userData;
|
||||
|
||||
const result = await post("/auth/users", payload);
|
||||
@@ -72,124 +69,64 @@ export const AddTeamMemberDialog = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open={open}
|
||||
title={t("pages.account.team.addMember.title")}
|
||||
content={t("pages.account.team.addMember.description")}
|
||||
onCancel={handleClose}
|
||||
onConfirm={handleSubmit(onSubmit)}
|
||||
confirmText={t("common.buttons.addMember")}
|
||||
loading={loading}
|
||||
maxWidth="sm"
|
||||
fullWidth
|
||||
>
|
||||
<Stack gap={theme.spacing(LAYOUT.XS)}>
|
||||
<Stack
|
||||
direction="row"
|
||||
gap={theme.spacing(LAYOUT.XS)}
|
||||
>
|
||||
<Controller
|
||||
name="firstName"
|
||||
control={control}
|
||||
render={({ field, fieldState }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
fieldLabel={t("common.form.name.option.firstName.label")}
|
||||
placeholder={t("common.form.name.option.firstName.placeholder")}
|
||||
error={!!fieldState.error}
|
||||
helperText={fieldState.error?.message ?? ""}
|
||||
sx={{ flex: 1 }}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="lastName"
|
||||
control={control}
|
||||
render={({ field, fieldState }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
fieldLabel={t("common.form.name.option.lastName.label")}
|
||||
placeholder={t("common.form.name.option.lastName.placeholder")}
|
||||
error={!!fieldState.error}
|
||||
helperText={fieldState.error?.message ?? ""}
|
||||
sx={{ flex: 1 }}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Stack>
|
||||
<Controller
|
||||
name="email"
|
||||
control={control}
|
||||
render={({ field, fieldState }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
fieldLabel={t("common.form.email.option.email.label")}
|
||||
placeholder={t("common.form.email.option.email.placeholder")}
|
||||
type="email"
|
||||
error={!!fieldState.error}
|
||||
helperText={fieldState.error?.message ?? ""}
|
||||
fullWidth
|
||||
<FormProvider {...form}>
|
||||
<Dialog
|
||||
open={open}
|
||||
title={t("pages.account.team.addMember.title")}
|
||||
content={t("pages.account.team.addMember.description")}
|
||||
onCancel={handleClose}
|
||||
onConfirm={handleSubmit(onSubmit)}
|
||||
confirmText={t("common.buttons.addMember")}
|
||||
loading={loading}
|
||||
maxWidth="sm"
|
||||
fullWidth
|
||||
>
|
||||
<Stack gap={theme.spacing(LAYOUT.XS)}>
|
||||
<Stack
|
||||
direction="row"
|
||||
gap={theme.spacing(LAYOUT.XS)}
|
||||
>
|
||||
<FormTextField
|
||||
name="firstName"
|
||||
fieldLabel={t("common.form.name.option.firstName.label")}
|
||||
placeholder={t("common.form.name.option.firstName.placeholder")}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="role"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<Select
|
||||
{...field}
|
||||
value={field.value[0] ?? "user"}
|
||||
onChange={(e) => field.onChange([e.target.value])}
|
||||
fieldLabel={t("common.form.role.option.role.label")}
|
||||
fullWidth
|
||||
>
|
||||
{roleOptions.map((option) => (
|
||||
<MenuItem
|
||||
key={option.value}
|
||||
value={option.value}
|
||||
>
|
||||
{option.label}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
)}
|
||||
/>
|
||||
<Stack
|
||||
direction="row"
|
||||
gap={theme.spacing(LAYOUT.XS)}
|
||||
>
|
||||
<Controller
|
||||
name="password"
|
||||
control={control}
|
||||
render={({ field, fieldState }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
fieldLabel={t("pages.auth.common.form.option.password.label")}
|
||||
placeholder={t("pages.auth.common.form.option.password.placeholder")}
|
||||
type="password"
|
||||
error={!!fieldState.error}
|
||||
helperText={fieldState.error?.message ?? ""}
|
||||
sx={{ flex: 1 }}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="confirm"
|
||||
control={control}
|
||||
render={({ field, fieldState }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
fieldLabel={t("pages.auth.common.form.option.confirmPassword.label")}
|
||||
placeholder={t("pages.auth.common.form.option.password.placeholder")}
|
||||
type="password"
|
||||
error={!!fieldState.error}
|
||||
helperText={fieldState.error?.message ?? ""}
|
||||
sx={{ flex: 1 }}
|
||||
/>
|
||||
)}
|
||||
<FormTextField
|
||||
name="lastName"
|
||||
fieldLabel={t("common.form.name.option.lastName.label")}
|
||||
placeholder={t("common.form.name.option.lastName.placeholder")}
|
||||
/>
|
||||
</Stack>
|
||||
<FormTextField
|
||||
name="email"
|
||||
type="email"
|
||||
fieldLabel={t("common.form.email.option.email.label")}
|
||||
placeholder={t("common.form.email.option.email.placeholder")}
|
||||
/>
|
||||
|
||||
<RoleSelectField />
|
||||
|
||||
<Stack
|
||||
direction="row"
|
||||
gap={theme.spacing(LAYOUT.XS)}
|
||||
>
|
||||
<FormTextField
|
||||
name="password"
|
||||
fieldLabel={t("pages.auth.common.form.option.password.label")}
|
||||
placeholder={t("pages.auth.common.form.option.password.placeholder")}
|
||||
type="password"
|
||||
sx={{ flex: 1 }}
|
||||
/>
|
||||
|
||||
<FormTextField
|
||||
name="confirm"
|
||||
fieldLabel={t("pages.auth.common.form.option.confirmPassword.label")}
|
||||
placeholder={t("pages.auth.common.form.option.password.placeholder")}
|
||||
type="password"
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Dialog>
|
||||
</Dialog>
|
||||
</FormProvider>
|
||||
);
|
||||
};
|
||||
@@ -1,16 +1,16 @@
|
||||
import { Stack } from "@mui/material";
|
||||
import MenuItem from "@mui/material/MenuItem";
|
||||
import { useTheme, FormHelperText, Typography } from "@mui/material";
|
||||
import { useTheme, Typography } from "@mui/material";
|
||||
import { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useForm, Controller } from "react-hook-form";
|
||||
import { Dialog, TextField, Select, Button } from "@/Components/inputs";
|
||||
import type { UserRole } from "@/Types/User";
|
||||
import { useForm, FormProvider } from "react-hook-form";
|
||||
import { Dialog, TextField, Button } from "@/Components/inputs";
|
||||
import { useInviteForm } from "@/Hooks/useInviteForm";
|
||||
import type { InviteFormData } from "@/Validation/invite";
|
||||
import { usePost } from "@/Hooks/UseApi";
|
||||
import { LAYOUT } from "@/Utils/Theme/constants";
|
||||
import { runtimeConfig } from "@/Utils/runtimeConfig";
|
||||
import { FormTextField } from "@/Components/inputs/forms/FormTextField";
|
||||
import { RoleSelectField } from "./RoleSelectField";
|
||||
|
||||
const CLIENT_HOST = runtimeConfig.clientHost || import.meta.env.VITE_APP_CLIENT_HOST;
|
||||
|
||||
@@ -31,11 +31,12 @@ export const InviteTeamMemberDialog = ({
|
||||
const { t } = useTranslation();
|
||||
const { resolver, defaults } = useInviteForm();
|
||||
|
||||
const { control, handleSubmit, reset } = useForm<InviteFormData>({
|
||||
const form = useForm<InviteFormData>({
|
||||
resolver,
|
||||
defaultValues: defaults,
|
||||
values: defaults,
|
||||
});
|
||||
const { handleSubmit, reset } = form;
|
||||
|
||||
const { post: generateToken, loading: generateLoading } = usePost<
|
||||
InviteFormData,
|
||||
@@ -47,12 +48,6 @@ export const InviteTeamMemberDialog = ({
|
||||
>();
|
||||
const [inviteLink, setInviteLink] = useState<string | null>(null);
|
||||
|
||||
const roleOptions: { value: UserRole; label: string }[] = [
|
||||
{ value: "admin", label: t("common.auth.roles.admin") },
|
||||
{ value: "user", label: t("common.auth.roles.user") },
|
||||
{ value: "demo", label: t("common.auth.roles.demo") },
|
||||
];
|
||||
|
||||
const handleGenerateToken = async (data: InviteFormData) => {
|
||||
const result = await generateToken("/invite", data);
|
||||
if (result?.data?.token) {
|
||||
@@ -76,88 +71,55 @@ export const InviteTeamMemberDialog = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open={open}
|
||||
title={t("pages.account.team.invite.title")}
|
||||
content={t("pages.account.team.invite.description")}
|
||||
onCancel={handleClose}
|
||||
onConfirm={handleSubmit(handleSendInvite)}
|
||||
confirmText={t("common.buttons.sendInvite")}
|
||||
loading={sendLoading || generateLoading}
|
||||
maxWidth="sm"
|
||||
fullWidth
|
||||
additionalButtons={
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={handleSubmit(handleGenerateToken)}
|
||||
loading={generateLoading || sendLoading}
|
||||
>
|
||||
{t("common.buttons.generateToken")}
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
<Stack gap={theme.spacing(LAYOUT.XS)}>
|
||||
<Controller
|
||||
name="email"
|
||||
control={control}
|
||||
render={({ field, fieldState }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
fieldLabel={t("common.form.email.option.email.label")}
|
||||
placeholder={t("common.form.email.option.email.placeholder")}
|
||||
type="email"
|
||||
fullWidth
|
||||
error={!!fieldState.error}
|
||||
helperText={fieldState.error?.message ?? ""}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="role"
|
||||
control={control}
|
||||
render={({ field: { value, onChange, ...field }, fieldState }) => (
|
||||
<FormProvider {...form}>
|
||||
<Dialog
|
||||
open={open}
|
||||
title={t("pages.account.team.invite.title")}
|
||||
content={t("pages.account.team.invite.description")}
|
||||
onCancel={handleClose}
|
||||
onConfirm={handleSubmit(handleSendInvite)}
|
||||
confirmText={t("common.buttons.sendInvite")}
|
||||
loading={sendLoading || generateLoading}
|
||||
maxWidth="sm"
|
||||
fullWidth
|
||||
additionalButtons={
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={handleSubmit(handleGenerateToken)}
|
||||
loading={generateLoading || sendLoading}
|
||||
>
|
||||
{t("common.buttons.generateToken")}
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
<Stack gap={theme.spacing(LAYOUT.XS)}>
|
||||
<FormTextField
|
||||
name="email"
|
||||
type="email"
|
||||
fieldLabel={t("common.form.email.option.email.label")}
|
||||
placeholder={t("common.form.email.option.email.placeholder")}
|
||||
/>
|
||||
|
||||
<RoleSelectField />
|
||||
{inviteLink && (
|
||||
<>
|
||||
<Select
|
||||
{...field}
|
||||
value={Array.isArray(value) ? (value[0] ?? "") : ""}
|
||||
onChange={(e) => onChange([e.target.value as UserRole])}
|
||||
fieldLabel={t("common.form.role.option.role.label")}
|
||||
<Typography variant="body2">
|
||||
{t("pages.account.team.invite.linkLabel")}
|
||||
</Typography>
|
||||
<TextField
|
||||
value={inviteLink}
|
||||
fullWidth
|
||||
error={!!fieldState.error}
|
||||
>
|
||||
{roleOptions.map((option) => (
|
||||
<MenuItem
|
||||
key={option.value}
|
||||
value={option.value}
|
||||
>
|
||||
{option.label}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
{fieldState.error && (
|
||||
<FormHelperText error>{fieldState.error.message}</FormHelperText>
|
||||
)}
|
||||
slotProps={{
|
||||
input: {
|
||||
readOnly: true,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
{inviteLink && (
|
||||
<>
|
||||
<Typography variant="body2">
|
||||
{t("pages.account.team.invite.linkLabel")}
|
||||
</Typography>
|
||||
<TextField
|
||||
value={inviteLink}
|
||||
fullWidth
|
||||
slotProps={{
|
||||
input: {
|
||||
readOnly: true,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</Stack>
|
||||
</Dialog>
|
||||
</Stack>
|
||||
</Dialog>
|
||||
</FormProvider>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,45 @@
|
||||
import MenuItem from "@mui/material/MenuItem";
|
||||
import FormHelperText from "@mui/material/FormHelperText";
|
||||
import { useController } from "react-hook-form";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Select } from "@/Components/inputs";
|
||||
import { UserRoles } from "@/Types/User";
|
||||
import type { UserRole } from "@/Types/User";
|
||||
|
||||
export const RoleSelectField = () => {
|
||||
const { t } = useTranslation();
|
||||
const { field, fieldState } = useController<{ role: UserRole[] }, "role">({
|
||||
name: "role",
|
||||
});
|
||||
|
||||
const editableRoles = UserRoles.filter((role) => role !== "superadmin");
|
||||
const roleOptions: { value: UserRole; label: string }[] = editableRoles.map((role) => ({
|
||||
value: role,
|
||||
label: t(`common.auth.roles.${role}`),
|
||||
}));
|
||||
|
||||
return (
|
||||
<>
|
||||
<Select
|
||||
{...field}
|
||||
value={field.value[0] ?? "user"}
|
||||
onChange={(e) => field.onChange([e.target.value])}
|
||||
fieldLabel={t("common.form.role.option.role.label")}
|
||||
fullWidth
|
||||
error={!!fieldState.error}
|
||||
>
|
||||
{roleOptions.map((option) => (
|
||||
<MenuItem
|
||||
key={option.value}
|
||||
value={option.value}
|
||||
>
|
||||
{option.label}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
{fieldState.error && (
|
||||
<FormHelperText error>{fieldState.error.message}</FormHelperText>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -1,9 +1,9 @@
|
||||
import { BaseAuthPage, TextLink } from "@/Components/design-elements";
|
||||
import { Button, TextField } from "@/Components/inputs";
|
||||
import { Button } from "@/Components/inputs";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useForm, Controller } from "react-hook-form";
|
||||
import { useForm, FormProvider } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod/dist/zod.js";
|
||||
import { useLoginForm } from "@/Hooks/useLoginForm";
|
||||
import type { LoginFormData } from "@/Validation/login";
|
||||
@@ -11,6 +11,7 @@ import { useDispatch } from "react-redux";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { setAuthState } from "@/Features/Auth/authSlice";
|
||||
import { useLazyGet, usePost } from "@/Hooks/UseApi";
|
||||
import { FormTextField } from "@/Components/inputs/forms/FormTextField";
|
||||
|
||||
const LoginPage = () => {
|
||||
const { t } = useTranslation();
|
||||
@@ -31,11 +32,13 @@ const LoginPage = () => {
|
||||
|
||||
const { schema, defaults } = useLoginForm();
|
||||
|
||||
const { control, handleSubmit } = useForm<LoginFormData>({
|
||||
const form = useForm<LoginFormData>({
|
||||
resolver: zodResolver(schema),
|
||||
defaultValues: defaults,
|
||||
});
|
||||
|
||||
const { handleSubmit } = form;
|
||||
|
||||
if (isCheckingAdmin) return null;
|
||||
|
||||
const onSubmit = async (data: LoginFormData) => {
|
||||
@@ -50,53 +53,39 @@ const LoginPage = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<BaseAuthPage
|
||||
component="form"
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
title={t("pages.auth.login.title")}
|
||||
subtitle={t("pages.auth.login.subtitle")}
|
||||
>
|
||||
<Controller
|
||||
name="email"
|
||||
control={control}
|
||||
render={({ field, fieldState }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
fieldLabel={t("pages.auth.common.form.option.email.label")}
|
||||
placeholder={t("pages.auth.common.form.option.email.placeholder")}
|
||||
error={!!fieldState.error}
|
||||
helperText={fieldState.error ? t(fieldState.error.message ?? "") : ""}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="password"
|
||||
control={control}
|
||||
render={({ field, fieldState }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
type="password"
|
||||
fieldLabel={t("pages.auth.common.form.option.password.label")}
|
||||
placeholder={t("pages.auth.common.form.option.password.placeholder")}
|
||||
error={!!fieldState.error}
|
||||
helperText={fieldState.error ? t(fieldState.error.message ?? "") : ""}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Button
|
||||
variant="contained"
|
||||
type="submit"
|
||||
loading={loading}
|
||||
<FormProvider {...form}>
|
||||
<BaseAuthPage
|
||||
component="form"
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
title={t("pages.auth.login.title")}
|
||||
subtitle={t("pages.auth.login.subtitle")}
|
||||
>
|
||||
{t("pages.auth.login.submit")}
|
||||
</Button>
|
||||
<TextLink
|
||||
alignSelf={"center"}
|
||||
text={t("pages.auth.login.links.forgotPassword.text")}
|
||||
linkText={t("pages.auth.login.links.forgotPassword.linkText")}
|
||||
href="/forgot-password"
|
||||
/>
|
||||
</BaseAuthPage>
|
||||
<FormTextField
|
||||
name="email"
|
||||
fieldLabel={t("pages.auth.common.form.option.email.label")}
|
||||
placeholder={t("pages.auth.common.form.option.email.placeholder")}
|
||||
/>
|
||||
<FormTextField
|
||||
name="password"
|
||||
type="password"
|
||||
fieldLabel={t("pages.auth.common.form.option.password.label")}
|
||||
placeholder={t("pages.auth.common.form.option.password.placeholder")}
|
||||
/>
|
||||
<Button
|
||||
variant="contained"
|
||||
type="submit"
|
||||
loading={loading}
|
||||
>
|
||||
{t("pages.auth.login.submit")}
|
||||
</Button>
|
||||
<TextLink
|
||||
alignSelf={"center"}
|
||||
text={t("pages.auth.login.links.forgotPassword.text")}
|
||||
linkText={t("pages.auth.login.links.forgotPassword.linkText")}
|
||||
href="/forgot-password"
|
||||
/>
|
||||
</BaseAuthPage>
|
||||
</FormProvider>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,12 +1,13 @@
|
||||
import { Button, TextField } from "@/Components/inputs";
|
||||
import { Button } from "@/Components/inputs";
|
||||
import { BaseAuthPage, TextLink } from "@/Components/design-elements";
|
||||
|
||||
import { useForm, Controller } from "react-hook-form";
|
||||
import { useForm, FormProvider } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod/dist/zod.js";
|
||||
import { useRecoveryForm } from "@/Hooks/useRecoveryForm";
|
||||
import type { RecoveryFormData } from "@/Validation/recovery";
|
||||
import { usePost } from "@/Hooks/UseApi";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { FormTextField } from "@/Components/inputs/forms/FormTextField";
|
||||
|
||||
const ForgotPasswordPage = () => {
|
||||
const { t } = useTranslation();
|
||||
@@ -14,10 +15,11 @@ const ForgotPasswordPage = () => {
|
||||
|
||||
const { schema, defaults } = useRecoveryForm();
|
||||
|
||||
const { control, handleSubmit } = useForm<RecoveryFormData>({
|
||||
const form = useForm<RecoveryFormData>({
|
||||
resolver: zodResolver(schema),
|
||||
defaultValues: defaults,
|
||||
});
|
||||
const { handleSubmit } = form;
|
||||
|
||||
const onSubmit = async (data: RecoveryFormData) => {
|
||||
if (loading) return;
|
||||
@@ -30,39 +32,33 @@ const ForgotPasswordPage = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<BaseAuthPage
|
||||
component="form"
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
title={t("pages.auth.forgotPassword.title")}
|
||||
subtitle={t("pages.auth.forgotPassword.subtitle")}
|
||||
>
|
||||
<Controller
|
||||
name="email"
|
||||
control={control}
|
||||
render={({ field, fieldState }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
fieldLabel={t("pages.auth.common.form.option.email.label")}
|
||||
placeholder={t("pages.auth.common.form.option.email.placeholder")}
|
||||
error={!!fieldState.error}
|
||||
helperText={fieldState.error ? t(fieldState.error.message ?? "") : ""}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Button
|
||||
variant="contained"
|
||||
type="submit"
|
||||
loading={loading}
|
||||
<FormProvider {...form}>
|
||||
<BaseAuthPage
|
||||
component="form"
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
title={t("pages.auth.forgotPassword.title")}
|
||||
subtitle={t("pages.auth.forgotPassword.subtitle")}
|
||||
>
|
||||
{t("pages.auth.forgotPassword.submit")}
|
||||
</Button>
|
||||
<TextLink
|
||||
alignSelf={"center"}
|
||||
text={t("pages.auth.forgotPassword.links.login.text")}
|
||||
linkText={t("pages.auth.forgotPassword.links.login.linkText")}
|
||||
href="/login"
|
||||
/>
|
||||
</BaseAuthPage>
|
||||
<FormTextField
|
||||
name="email"
|
||||
fieldLabel={t("pages.auth.common.form.option.email.label")}
|
||||
placeholder={t("pages.auth.common.form.option.email.placeholder")}
|
||||
/>
|
||||
<Button
|
||||
variant="contained"
|
||||
type="submit"
|
||||
loading={loading}
|
||||
>
|
||||
{t("pages.auth.forgotPassword.submit")}
|
||||
</Button>
|
||||
<TextLink
|
||||
alignSelf={"center"}
|
||||
text={t("pages.auth.forgotPassword.links.login.text")}
|
||||
linkText={t("pages.auth.forgotPassword.links.login.linkText")}
|
||||
href="/login"
|
||||
/>
|
||||
</BaseAuthPage>
|
||||
</FormProvider>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { BaseAuthPage } from "@/Components/design-elements";
|
||||
import { Button, TextField } from "@/Components/inputs";
|
||||
import { Button } from "@/Components/inputs";
|
||||
import Alert from "@mui/material/Alert";
|
||||
import { useForm, Controller } from "react-hook-form";
|
||||
import { useForm, FormProvider } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod/dist/zod.js";
|
||||
import { useRegisterForm } from "@/Hooks/useRegisterForm";
|
||||
import type { RegisterFormData } from "@/Validation/register";
|
||||
@@ -12,6 +12,7 @@ import { useDispatch } from "react-redux";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import type { AuthResponse } from "@/Types/User";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { FormTextField } from "@/Components/inputs/forms/FormTextField";
|
||||
|
||||
interface RegisterPayload {
|
||||
user: Omit<RegisterFormData, "confirm">;
|
||||
@@ -45,10 +46,11 @@ const RegisterPage = () => {
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
const { control, handleSubmit, setError, reset } = useForm<RegisterFormData>({
|
||||
const form = useForm<RegisterFormData>({
|
||||
resolver: zodResolver(schema),
|
||||
defaultValues: defaults,
|
||||
});
|
||||
const { handleSubmit, setError, reset } = form;
|
||||
|
||||
useEffect(() => {
|
||||
if (!token || hasVerified.current) return;
|
||||
@@ -64,14 +66,14 @@ const RegisterPage = () => {
|
||||
navigate("/register", { replace: true });
|
||||
}
|
||||
});
|
||||
}, [token]);
|
||||
}, [token, defaults, navigate, reset, verifyToken]);
|
||||
|
||||
if (isCheckingAdmin) return null;
|
||||
|
||||
const onSubmit = async (data: RegisterFormData) => {
|
||||
if (loading) return;
|
||||
|
||||
const { confirm, ...userData } = data;
|
||||
const { confirm: _confirm, ...userData } = data;
|
||||
const payload: RegisterPayload = { user: userData };
|
||||
if (token) {
|
||||
payload.token = token;
|
||||
@@ -89,105 +91,70 @@ const RegisterPage = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<BaseAuthPage
|
||||
component="form"
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
title={t("pages.auth.register.title")}
|
||||
subtitle={t("pages.auth.register.subtitle")}
|
||||
>
|
||||
{!token && (
|
||||
<Alert
|
||||
severity="info"
|
||||
icon={false}
|
||||
sx={(theme) => ({
|
||||
fontSize: 13,
|
||||
lineHeight: 1.55,
|
||||
color: theme.palette.text.secondary,
|
||||
backgroundColor: theme.palette.action.hover,
|
||||
border: `1px solid ${theme.palette.divider}`,
|
||||
borderRadius: 1,
|
||||
"& .MuiAlert-message": { padding: 0 },
|
||||
})}
|
||||
>
|
||||
{t("pages.auth.register.setupNotice")}
|
||||
</Alert>
|
||||
)}
|
||||
<Controller
|
||||
name="firstName"
|
||||
control={control}
|
||||
render={({ field, fieldState }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
fieldLabel={t("common.form.name.option.firstName.label")}
|
||||
placeholder={t("common.form.name.option.firstName.placeholder")}
|
||||
error={!!fieldState.error}
|
||||
helperText={fieldState.error?.message ?? ""}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="lastName"
|
||||
control={control}
|
||||
render={({ field, fieldState }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
fieldLabel={t("common.form.name.option.lastName.label")}
|
||||
placeholder={t("common.form.name.option.lastName.placeholder")}
|
||||
error={!!fieldState.error}
|
||||
helperText={fieldState.error?.message ?? ""}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="email"
|
||||
control={control}
|
||||
render={({ field, fieldState }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
disabled={!!token}
|
||||
fieldLabel={t("common.form.email.option.email.label")}
|
||||
placeholder={t("common.form.email.option.email.placeholder")}
|
||||
error={!!fieldState.error}
|
||||
helperText={fieldState.error?.message ?? ""}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="password"
|
||||
control={control}
|
||||
render={({ field, fieldState }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
type="password"
|
||||
fieldLabel={t("pages.auth.common.form.option.password.label")}
|
||||
placeholder={t("pages.auth.common.form.option.password.placeholder")}
|
||||
error={!!fieldState.error}
|
||||
helperText={fieldState.error?.message ?? ""}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="confirm"
|
||||
control={control}
|
||||
render={({ field, fieldState }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
type="password"
|
||||
fieldLabel={t("pages.auth.common.form.option.confirmPassword.label")}
|
||||
placeholder={t("pages.auth.common.form.option.password.placeholder")}
|
||||
error={!!fieldState.error}
|
||||
helperText={fieldState.error?.message ?? ""}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Button
|
||||
variant="contained"
|
||||
type="submit"
|
||||
loading={loading}
|
||||
<FormProvider {...form}>
|
||||
<BaseAuthPage
|
||||
component="form"
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
title={t("pages.auth.register.title")}
|
||||
subtitle={t("pages.auth.register.subtitle")}
|
||||
>
|
||||
{t("pages.auth.register.submit")}
|
||||
</Button>
|
||||
</BaseAuthPage>
|
||||
{!token && (
|
||||
<Alert
|
||||
severity="info"
|
||||
icon={false}
|
||||
sx={(theme) => ({
|
||||
fontSize: 13,
|
||||
lineHeight: 1.55,
|
||||
color: theme.palette.text.secondary,
|
||||
backgroundColor: theme.palette.action.hover,
|
||||
border: `1px solid ${theme.palette.divider}`,
|
||||
borderRadius: 1,
|
||||
"& .MuiAlert-message": { padding: 0 },
|
||||
})}
|
||||
>
|
||||
{t("pages.auth.register.setupNotice")}
|
||||
</Alert>
|
||||
)}
|
||||
<FormTextField
|
||||
name="firstName"
|
||||
fieldLabel={t("common.form.name.option.firstName.label")}
|
||||
placeholder={t("common.form.name.option.firstName.placeholder")}
|
||||
/>
|
||||
<FormTextField
|
||||
name="lastName"
|
||||
fieldLabel={t("common.form.name.option.lastName.label")}
|
||||
placeholder={t("common.form.name.option.lastName.placeholder")}
|
||||
/>
|
||||
<FormTextField
|
||||
name="email"
|
||||
disabled={!!token}
|
||||
fieldLabel={t("common.form.email.option.email.label")}
|
||||
placeholder={t("common.form.email.option.email.placeholder")}
|
||||
/>
|
||||
|
||||
<FormTextField
|
||||
name="password"
|
||||
type="password"
|
||||
fieldLabel={t("pages.auth.common.form.option.password.label")}
|
||||
placeholder={t("pages.auth.common.form.option.password.placeholder")}
|
||||
/>
|
||||
|
||||
<FormTextField
|
||||
name="confirm"
|
||||
type="password"
|
||||
fieldLabel={t("pages.auth.common.form.option.confirmPassword.label")}
|
||||
placeholder={t("pages.auth.common.form.option.password.placeholder")}
|
||||
/>
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
type="submit"
|
||||
loading={loading}
|
||||
>
|
||||
{t("pages.auth.register.submit")}
|
||||
</Button>
|
||||
</BaseAuthPage>
|
||||
</FormProvider>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import { BaseAuthPage, BulletPointCheck, TextLink } from "@/Components/design-elements";
|
||||
import { Button, TextField } from "@/Components/inputs";
|
||||
import { Button } from "@/Components/inputs";
|
||||
import Stack from "@mui/material/Stack";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useForm, Controller } from "react-hook-form";
|
||||
import { useForm, FormProvider } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod/dist/zod.js";
|
||||
import { useSetNewPasswordForm } from "@/Hooks/useSetNewPasswordForm";
|
||||
import type { SetNewPasswordFormData } from "@/Validation/setNewPassword";
|
||||
@@ -12,6 +12,7 @@ import { useParams, useNavigate } from "react-router-dom";
|
||||
import { usePost } from "@/Hooks/UseApi";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { setAuthState } from "@/Features/Auth/authSlice";
|
||||
import { FormTextField } from "@/Components/inputs/forms/FormTextField";
|
||||
|
||||
const SetNewPasswordPage = () => {
|
||||
const theme = useTheme();
|
||||
@@ -23,11 +24,11 @@ const SetNewPasswordPage = () => {
|
||||
|
||||
const { schema, defaults } = useSetNewPasswordForm();
|
||||
|
||||
const { control, handleSubmit, watch } = useForm<SetNewPasswordFormData>({
|
||||
const form = useForm<SetNewPasswordFormData>({
|
||||
resolver: zodResolver(schema),
|
||||
defaultValues: defaults,
|
||||
});
|
||||
|
||||
const { handleSubmit, watch } = form;
|
||||
const password = watch("password");
|
||||
const confirm = watch("confirm");
|
||||
|
||||
@@ -57,81 +58,68 @@ const SetNewPasswordPage = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<BaseAuthPage
|
||||
component="form"
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
title={t("pages.auth.setNewPassword.title")}
|
||||
subtitle={t("pages.auth.setNewPassword.subtitle")}
|
||||
>
|
||||
<Controller
|
||||
name="password"
|
||||
control={control}
|
||||
render={({ field, fieldState }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
type="password"
|
||||
fieldLabel={t("pages.auth.common.form.option.password.label")}
|
||||
placeholder={t("pages.auth.common.form.option.password.placeholder")}
|
||||
error={!!fieldState.error}
|
||||
helperText={fieldState.error?.message ?? ""}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="confirm"
|
||||
control={control}
|
||||
render={({ field, fieldState }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
type="password"
|
||||
fieldLabel={t("pages.auth.common.form.option.confirmPassword.label")}
|
||||
placeholder={t("pages.auth.common.form.option.password.placeholder")}
|
||||
error={!!fieldState.error}
|
||||
helperText={fieldState.error?.message ?? ""}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Stack gap={theme.spacing(4)}>
|
||||
<BulletPointCheck
|
||||
text={t("pages.auth.common.passwordRules.length")}
|
||||
variant={getVariant(hasLength)}
|
||||
/>
|
||||
<BulletPointCheck
|
||||
text={t("pages.auth.common.passwordRules.special")}
|
||||
variant={getVariant(hasSpecial)}
|
||||
/>
|
||||
<BulletPointCheck
|
||||
text={t("pages.auth.common.passwordRules.number")}
|
||||
variant={getVariant(hasNumber)}
|
||||
/>
|
||||
<BulletPointCheck
|
||||
text={t("pages.auth.common.passwordRules.uppercase")}
|
||||
variant={getVariant(hasUppercase)}
|
||||
/>
|
||||
<BulletPointCheck
|
||||
text={t("pages.auth.common.passwordRules.lowercase")}
|
||||
variant={getVariant(hasLowercase)}
|
||||
/>
|
||||
<BulletPointCheck
|
||||
text={t("pages.auth.common.passwordRules.match")}
|
||||
variant={getVariant(passwordsMatch)}
|
||||
/>
|
||||
</Stack>
|
||||
<Button
|
||||
variant="contained"
|
||||
type="submit"
|
||||
fullWidth
|
||||
loading={loading}
|
||||
<FormProvider {...form}>
|
||||
<BaseAuthPage
|
||||
component="form"
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
title={t("pages.auth.setNewPassword.title")}
|
||||
subtitle={t("pages.auth.setNewPassword.subtitle")}
|
||||
>
|
||||
{t("common.buttons.resetPassword")}
|
||||
</Button>
|
||||
<TextLink
|
||||
alignSelf="center"
|
||||
text={t("pages.auth.forgotPassword.links.login.text")}
|
||||
linkText={t("pages.auth.forgotPassword.links.login.linkText")}
|
||||
href="/login"
|
||||
/>
|
||||
</BaseAuthPage>
|
||||
<FormTextField
|
||||
name="password"
|
||||
type="password"
|
||||
fieldLabel={t("pages.auth.common.form.option.password.label")}
|
||||
placeholder={t("pages.auth.common.form.option.password.placeholder")}
|
||||
/>
|
||||
<FormTextField
|
||||
name="confirm"
|
||||
type="password"
|
||||
fieldLabel={t("pages.auth.common.form.option.confirmPassword.label")}
|
||||
placeholder={t("pages.auth.common.form.option.password.placeholder")}
|
||||
/>
|
||||
|
||||
<Stack gap={theme.spacing(4)}>
|
||||
<BulletPointCheck
|
||||
text={t("pages.auth.common.passwordRules.length")}
|
||||
variant={getVariant(hasLength)}
|
||||
/>
|
||||
<BulletPointCheck
|
||||
text={t("pages.auth.common.passwordRules.special")}
|
||||
variant={getVariant(hasSpecial)}
|
||||
/>
|
||||
<BulletPointCheck
|
||||
text={t("pages.auth.common.passwordRules.number")}
|
||||
variant={getVariant(hasNumber)}
|
||||
/>
|
||||
<BulletPointCheck
|
||||
text={t("pages.auth.common.passwordRules.uppercase")}
|
||||
variant={getVariant(hasUppercase)}
|
||||
/>
|
||||
<BulletPointCheck
|
||||
text={t("pages.auth.common.passwordRules.lowercase")}
|
||||
variant={getVariant(hasLowercase)}
|
||||
/>
|
||||
<BulletPointCheck
|
||||
text={t("pages.auth.common.passwordRules.match")}
|
||||
variant={getVariant(passwordsMatch)}
|
||||
/>
|
||||
</Stack>
|
||||
<Button
|
||||
variant="contained"
|
||||
type="submit"
|
||||
fullWidth
|
||||
loading={loading}
|
||||
>
|
||||
{t("common.buttons.resetPassword")}
|
||||
</Button>
|
||||
<TextLink
|
||||
alignSelf="center"
|
||||
text={t("pages.auth.forgotPassword.links.login.text")}
|
||||
linkText={t("pages.auth.forgotPassword.links.login.linkText")}
|
||||
href="/login"
|
||||
/>
|
||||
</BaseAuthPage>
|
||||
</FormProvider>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
File diff suppressed because it is too large.
Load diff
@@ -1,5 +1,5 @@
|
||||
import type { Incident, IncidentSummaryItem } from "@/Types/Incident";
|
||||
import prettyMilliseconds from "pretty-ms";
|
||||
import { formatDuration } from "@/Utils/TimeUtils";
|
||||
|
||||
type IncidentLike = Pick<Incident, "startTime" | "endTime" | "status">;
|
||||
|
||||
@@ -24,8 +24,5 @@ export const getIncidentsDuration = (incident: IncidentLike | IncidentSummaryIte
|
||||
return "-";
|
||||
}
|
||||
|
||||
return prettyMilliseconds(durationMs, {
|
||||
secondsDecimalDigits: 0,
|
||||
millisecondsDecimalDigits: 0,
|
||||
});
|
||||
return formatDuration(durationMs);
|
||||
};
|
||||
@@ -11,7 +11,8 @@ export const StatusBoxes = ({ monitor }: { monitor: Monitor }) => {
|
||||
const { t } = useTranslation();
|
||||
const theme = useTheme();
|
||||
|
||||
const latestCheck = monitor?.recentChecks?.[0];
|
||||
const recentChecks = monitor?.recentChecks ?? [];
|
||||
const latestCheck = recentChecks[recentChecks.length - 1];
|
||||
// Get data from latest check
|
||||
const physicalCores = getCores(latestCheck?.cpu?.physical_core);
|
||||
const logicalCores = getCores(latestCheck?.cpu?.logical_core);
|
||||
@@ -21,13 +22,7 @@ export const StatusBoxes = ({ monitor }: { monitor: Monitor }) => {
|
||||
const memoryTotalBytes = latestCheck?.memory?.total_bytes ?? 0;
|
||||
const diskTotalBytes =
|
||||
latestCheck?.disk?.reduce((acc, disk) => acc + (disk.total_bytes || 0), 0) || 0;
|
||||
const os = getOsAndPlatform(latestCheck?.host);
|
||||
|
||||
const platform = latestCheck?.host?.platform ?? undefined;
|
||||
const osPlatform =
|
||||
typeof os === "undefined" && typeof platform === "undefined"
|
||||
? undefined
|
||||
: `${os} ${platform}`;
|
||||
const osPlatform = getOsAndPlatform(latestCheck?.host);
|
||||
|
||||
return (
|
||||
<Stack
|
||||
|
||||
@@ -21,10 +21,11 @@ export const TabOverview = ({
|
||||
}
|
||||
|
||||
const checks = stats?.checks || [];
|
||||
const recentChecks = monitor.recentChecks ?? [];
|
||||
return (
|
||||
<Stack gap={theme.spacing(8)}>
|
||||
<StatusBoxes monitor={monitor} />
|
||||
<InfraDetailsGauges snapshot={monitor.recentChecks?.[0]} />
|
||||
<InfraDetailsGauges snapshot={recentChecks[recentChecks.length - 1]} />
|
||||
<InfraDetailsCharts
|
||||
checks={checks}
|
||||
dateRange={dateRange}
|
||||
|
||||
@@ -248,7 +248,8 @@ export const InfraMonitorsTable = ({
|
||||
id: "cpu",
|
||||
content: t("pages.infrastructure.table.headers.cpu"),
|
||||
render: (row) => {
|
||||
const check = row.recentChecks?.[0];
|
||||
const recentChecks = row.recentChecks ?? [];
|
||||
const check = recentChecks[recentChecks.length - 1];
|
||||
const cpuUsage = (check?.cpu?.usage_percent || 0) * 100;
|
||||
return <Gauge progress={cpuUsage} />;
|
||||
},
|
||||
@@ -257,7 +258,8 @@ export const InfraMonitorsTable = ({
|
||||
id: "memory",
|
||||
content: t("pages.infrastructure.table.headers.memory"),
|
||||
render: (row) => {
|
||||
const check = row.recentChecks?.[0];
|
||||
const recentChecks = row.recentChecks ?? [];
|
||||
const check = recentChecks[recentChecks.length - 1];
|
||||
const memoryUsage = (check?.memory?.usage_percent || 0) * 100;
|
||||
return <Gauge progress={memoryUsage} />;
|
||||
},
|
||||
@@ -266,7 +268,8 @@ export const InfraMonitorsTable = ({
|
||||
id: "disk",
|
||||
content: t("pages.infrastructure.table.headers.disk"),
|
||||
render: (row) => {
|
||||
const check = row.recentChecks?.[0];
|
||||
const recentChecks = row.recentChecks ?? [];
|
||||
const check = recentChecks[recentChecks.length - 1];
|
||||
|
||||
const totalDiskUsage = check?.disk?.reduce(
|
||||
(acc, disk) => acc + (disk?.usage_percent || 0),
|
||||
|
||||
@@ -2,10 +2,10 @@ import Box from "@mui/material/Box";
|
||||
import { StatBox } from "@/Components/design-elements";
|
||||
|
||||
import prettyBytes from "pretty-bytes";
|
||||
import prettyMilliseconds from "pretty-ms";
|
||||
import { useTheme } from "@mui/material";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import type { Diagnostics } from "@/Types/Diagnostics";
|
||||
import { formatDuration, formatMs } from "@/Utils/TimeUtils";
|
||||
|
||||
interface StatsProps {
|
||||
diagnostics: Diagnostics | null;
|
||||
@@ -18,13 +18,9 @@ export const Stats = ({ diagnostics }: StatsProps) => {
|
||||
const theme = useTheme();
|
||||
|
||||
const eventLoopDelay = diagnostics
|
||||
? prettyMilliseconds(diagnostics.eventLoopDelayMs ?? 0, {
|
||||
millisecondsDecimalDigits: 2,
|
||||
})
|
||||
: PLACEHOLDER;
|
||||
const uptime = diagnostics
|
||||
? prettyMilliseconds(diagnostics.uptimeMs ?? 0, { hideSeconds: true })
|
||||
? formatMs(diagnostics.eventLoopDelayMs ?? 0)
|
||||
: PLACEHOLDER;
|
||||
const uptime = diagnostics ? formatDuration(diagnostics.uptimeMs ?? 0) : PLACEHOLDER;
|
||||
const usedHeap = diagnostics
|
||||
? prettyBytes(diagnostics.v8HeapStats?.usedHeapSizeBytes ?? 0)
|
||||
: PLACEHOLDER;
|
||||
@@ -37,10 +33,10 @@ export const Stats = ({ diagnostics }: StatsProps) => {
|
||||
|
||||
return (
|
||||
<Box
|
||||
display="grid"
|
||||
gap={theme.spacing(8)}
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: { xs: "1fr", md: "repeat(5, 1fr)" },
|
||||
gap: theme.spacing(8),
|
||||
"& > *": { width: "100% !important" },
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { Table, Pagination } from "@/Components/design-elements";
|
||||
import { Typography, useTheme } from "@mui/material";
|
||||
import prettyMilliseconds from "pretty-ms";
|
||||
import { formatTimestamp } from "@/Utils/TimeUtils";
|
||||
import { formatDuration, formatTimestamp } from "@/Utils/TimeUtils";
|
||||
|
||||
import { useTranslation } from "react-i18next";
|
||||
import type { QueueJobFailure, QueueJobSummary, QueueMetrics } from "@/Types/Queue";
|
||||
@@ -84,7 +83,7 @@ export const TableJobs = ({
|
||||
id: "interval",
|
||||
content: t("common.table.headers.interval"),
|
||||
render: (row) => (
|
||||
<Typography sx={cellSx}>{prettyMilliseconds(row.monitorInterval ?? 0)}</Typography>
|
||||
<Typography sx={cellSx}>{formatDuration(row.monitorInterval ?? 0)}</Typography>
|
||||
),
|
||||
},
|
||||
{
|
||||
|
||||
@@ -4,7 +4,6 @@ import { Pagination } from "@/Components/design-elements/Table";
|
||||
import { ActionsMenu } from "@/Components/actions-menu";
|
||||
import { DialogInput } from "@/Components/inputs/Dialog";
|
||||
|
||||
import prettyMilliseconds from "pretty-ms";
|
||||
import { useTheme } from "@mui/material";
|
||||
import type { Header } from "@/Components/design-elements/Table";
|
||||
import type { ActionMenuItem } from "@/Components/actions-menu";
|
||||
@@ -18,6 +17,7 @@ import { setRowsPerPage } from "@/Features/UI/uiSlice";
|
||||
import dayjs from "dayjs";
|
||||
import { useState } from "react";
|
||||
import { useDelete, usePatch } from "@/Hooks/UseApi";
|
||||
import { formatDuration } from "@/Utils/TimeUtils";
|
||||
|
||||
interface MaintenanceWindowTableProps {
|
||||
maintenanceWindows: MaintenanceWindow[];
|
||||
@@ -51,7 +51,7 @@ const getTimeToNextWindow = (
|
||||
|
||||
// Window is in the future
|
||||
if (start.isAfter(now)) {
|
||||
return prettyMilliseconds(start.diff(now), { unitCount: 2, hideSeconds: true });
|
||||
return formatDuration(start.diff(now));
|
||||
}
|
||||
|
||||
return "N/A";
|
||||
@@ -152,9 +152,7 @@ export const MaintenanceWindowTable = ({
|
||||
id: "repeat",
|
||||
content: t("pages.maintenanceWindow.table.headers.repeat"),
|
||||
render: (row) =>
|
||||
row.repeat === 0
|
||||
? t("common.labels.na")
|
||||
: prettyMilliseconds(row.repeat, { verbose: true }),
|
||||
row.repeat === 0 ? t("common.labels.na") : formatDuration(row.repeat),
|
||||
},
|
||||
{
|
||||
id: "actions",
|
||||
|
||||
@@ -1,18 +1,8 @@
|
||||
import Stack from "@mui/material/Stack";
|
||||
import MenuItem from "@mui/material/MenuItem";
|
||||
import { logger } from "@/Utils/logger";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
import { SPACING, LAYOUT } from "@/Utils/Theme/constants";
|
||||
import { BasePage, ConfigBox } from "@/Components/design-elements";
|
||||
import {
|
||||
TextField,
|
||||
Select,
|
||||
DatePicker,
|
||||
TimePicker,
|
||||
Button,
|
||||
Autocomplete,
|
||||
} from "@/Components/inputs";
|
||||
import { Button } from "@/Components/inputs";
|
||||
|
||||
import { useTheme } from "@mui/material";
|
||||
import { useTranslation } from "react-i18next";
|
||||
@@ -25,10 +15,17 @@ import { useGet, usePost, usePatch } from "@/Hooks/UseApi";
|
||||
import { mutate } from "swr";
|
||||
import { useParams, useNavigate } from "react-router-dom";
|
||||
import type { Monitor } from "@/Types/Monitor";
|
||||
import { useForm, Controller } from "react-hook-form";
|
||||
import { useForm, FormProvider } from "react-hook-form";
|
||||
import { useEffect } from "react";
|
||||
import { zodResolver } from "@hookform/resolvers/zod/dist/zod.js";
|
||||
import { Trash2 } from "lucide-react";
|
||||
import { FormTextField } from "@/Components/inputs/forms/FormTextField";
|
||||
import { FormSelectField } from "@/Components/inputs/forms/FormSelectField";
|
||||
import {
|
||||
FormDatePickerField,
|
||||
FormTimePickerField,
|
||||
} from "@/Components/inputs/forms/FormDateTimePickerField";
|
||||
import { FormMultiSelectField } from "@/Components/inputs/forms/FormMultiSelectField";
|
||||
import { FormNumberField } from "@/Components/inputs/forms/FormNumberField";
|
||||
|
||||
const CreateMaintenanceWindowPage = () => {
|
||||
const theme = useTheme();
|
||||
@@ -57,7 +54,7 @@ const CreateMaintenanceWindowPage = () => {
|
||||
defaultValues: defaults,
|
||||
});
|
||||
|
||||
const { control, handleSubmit, trigger } = form;
|
||||
const { handleSubmit, trigger } = form;
|
||||
useEffect(() => {
|
||||
if (existingMaintenanceWindow) {
|
||||
form.reset(defaults);
|
||||
@@ -114,255 +111,117 @@ const CreateMaintenanceWindowPage = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<BasePage
|
||||
component={"form"}
|
||||
onSubmit={handleSubmit(onSubmit, onError)}
|
||||
>
|
||||
<ConfigBox
|
||||
title={t("pages.maintenanceWindow.form.general.title")}
|
||||
subtitle={t("pages.maintenanceWindow.form.general.description")}
|
||||
rightContent={
|
||||
<Stack spacing={theme.spacing(LAYOUT.MD)}>
|
||||
<Controller
|
||||
name="name"
|
||||
control={control}
|
||||
defaultValue={defaults.name}
|
||||
render={({ field, fieldState }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
type="text"
|
||||
fieldLabel={t("pages.maintenanceWindow.form.general.option.name.label")}
|
||||
placeholder={t(
|
||||
"pages.maintenanceWindow.form.general.option.name.placeholder"
|
||||
)}
|
||||
fullWidth
|
||||
error={!!fieldState.error}
|
||||
helperText={fieldState.error?.message ?? ""}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="repeat"
|
||||
control={control}
|
||||
defaultValue={defaults.repeat}
|
||||
render={({ field, fieldState }) => (
|
||||
<Select
|
||||
value={field.value}
|
||||
fieldLabel={t(
|
||||
"pages.maintenanceWindow.form.general.option.repeat.label"
|
||||
)}
|
||||
error={!!fieldState.error}
|
||||
onChange={field.onChange}
|
||||
>
|
||||
{repeatOptions.map((option) => (
|
||||
<MenuItem
|
||||
key={option.id}
|
||||
value={option.id}
|
||||
>
|
||||
<Typography>{option.name}</Typography>
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
)}
|
||||
/>
|
||||
</Stack>
|
||||
}
|
||||
/>
|
||||
<ConfigBox
|
||||
title={t("pages.maintenanceWindow.form.startDate.title")}
|
||||
subtitle={t("pages.maintenanceWindow.form.startDate.description")}
|
||||
rightContent={
|
||||
<Stack spacing={theme.spacing(LAYOUT.MD)}>
|
||||
<Controller
|
||||
name="startDate"
|
||||
control={control}
|
||||
defaultValue={defaults.startDate}
|
||||
render={({ field, fieldState }) => (
|
||||
<DatePicker
|
||||
fieldLabel={t(
|
||||
"pages.maintenanceWindow.form.startDate.option.startDate.label"
|
||||
)}
|
||||
value={field.value ? dayjs(field.value, "YYYY-MM-DD") : null}
|
||||
onChange={(date) => {
|
||||
field.onChange(date ? date.format("YYYY-MM-DD") : "");
|
||||
trigger("startDate");
|
||||
}}
|
||||
error={!!fieldState.error}
|
||||
helperText={fieldState.error?.message}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Stack>
|
||||
}
|
||||
/>
|
||||
<ConfigBox
|
||||
title={t("pages.maintenanceWindow.form.startTime.title")}
|
||||
subtitle={t("pages.maintenanceWindow.form.startTime.description")}
|
||||
rightContent={
|
||||
<Stack spacing={theme.spacing(LAYOUT.MD)}>
|
||||
<Controller
|
||||
name="startTime"
|
||||
control={control}
|
||||
defaultValue={defaults.startTime}
|
||||
render={({ field }) => (
|
||||
<TimePicker
|
||||
fieldLabel={t(
|
||||
"pages.maintenanceWindow.form.startTime.option.startTime.label"
|
||||
)}
|
||||
value={field.value ? dayjs(field.value, "HH:mm") : null}
|
||||
onChange={(time) => {
|
||||
field.onChange(time ? time.format("HH:mm") : "");
|
||||
trigger("startDate");
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Stack
|
||||
direction="row"
|
||||
alignItems="flex-start"
|
||||
spacing={theme.spacing(LAYOUT.MD)}
|
||||
>
|
||||
<Controller
|
||||
name="duration"
|
||||
control={control}
|
||||
defaultValue={defaults.duration}
|
||||
render={({ field, fieldState }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
type="number"
|
||||
fieldLabel={t(
|
||||
"pages.maintenanceWindow.form.startTime.option.duration.label"
|
||||
)}
|
||||
value={field.value === 0 ? "" : field.value}
|
||||
onChange={(e) => {
|
||||
const val = e.target.value;
|
||||
field.onChange(val === "" ? 0 : Number(val));
|
||||
}}
|
||||
error={!!fieldState.error}
|
||||
helperText={fieldState.error?.message ?? ""}
|
||||
sx={{ width: 120 }}
|
||||
/>
|
||||
<FormProvider {...form}>
|
||||
<BasePage
|
||||
component={"form"}
|
||||
onSubmit={handleSubmit(onSubmit, onError)}
|
||||
>
|
||||
<ConfigBox
|
||||
title={t("pages.maintenanceWindow.form.general.title")}
|
||||
subtitle={t("pages.maintenanceWindow.form.general.description")}
|
||||
rightContent={
|
||||
<Stack spacing={theme.spacing(LAYOUT.MD)}>
|
||||
<FormTextField
|
||||
name="name"
|
||||
fieldLabel={t("pages.maintenanceWindow.form.general.option.name.label")}
|
||||
placeholder={t(
|
||||
"pages.maintenanceWindow.form.general.option.name.placeholder"
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="durationUnit"
|
||||
control={control}
|
||||
defaultValue={defaults.durationUnit}
|
||||
render={({ field }) => (
|
||||
<Select
|
||||
fieldLabel=" "
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
sx={{ minWidth: 120 }}
|
||||
>
|
||||
{durationUnitOptions.map((option) => (
|
||||
<MenuItem
|
||||
key={option.id}
|
||||
value={option.id}
|
||||
>
|
||||
<Typography>{option.name}</Typography>
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
)}
|
||||
<FormSelectField
|
||||
name="repeat"
|
||||
fieldLabel={t("pages.maintenanceWindow.form.general.option.repeat.label")}
|
||||
options={repeatOptions.map((option) => ({
|
||||
value: option.id,
|
||||
label: option.name,
|
||||
}))}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
}
|
||||
/>
|
||||
<ConfigBox
|
||||
title={t("pages.maintenanceWindow.form.startTime.monitors.title")}
|
||||
subtitle={t("pages.maintenanceWindow.form.startTime.monitors.description")}
|
||||
rightContent={
|
||||
<Controller
|
||||
name="monitors"
|
||||
control={control}
|
||||
defaultValue={defaults.monitors}
|
||||
render={({ field, fieldState }) => {
|
||||
const monitorsList = monitors ?? [];
|
||||
const selectedMonitors = field.value
|
||||
.map((id: string) => monitorsList.find((m) => m.id === id))
|
||||
.filter((m): m is Monitor => m !== undefined);
|
||||
|
||||
return (
|
||||
<Stack spacing={theme.spacing(LAYOUT.MD)}>
|
||||
<Autocomplete
|
||||
multiple
|
||||
options={monitorsList}
|
||||
getOptionLabel={(option: Monitor) => option.name}
|
||||
value={selectedMonitors}
|
||||
onChange={(_, newValue) => {
|
||||
field.onChange(newValue.map((m: Monitor) => m.id));
|
||||
}}
|
||||
fieldLabel={t(
|
||||
"pages.maintenanceWindow.form.startTime.monitors.option.addMonitors.label"
|
||||
)}
|
||||
renderInput={(params) => (
|
||||
<TextField
|
||||
{...params}
|
||||
placeholder={
|
||||
selectedMonitors.length === 0
|
||||
? t(
|
||||
"pages.maintenanceWindow.form.startTime.monitors.option.addMonitors.label"
|
||||
)
|
||||
: ""
|
||||
}
|
||||
error={!!fieldState.error}
|
||||
helperText={fieldState.error?.message}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{selectedMonitors.length > 0 && (
|
||||
<Stack>
|
||||
{selectedMonitors.map((monitor) => (
|
||||
<Stack
|
||||
key={monitor.id}
|
||||
direction="row"
|
||||
alignItems="center"
|
||||
padding={theme.spacing(LAYOUT.XS)}
|
||||
marginTop={theme.spacing(SPACING.LG)}
|
||||
borderRadius={1}
|
||||
sx={{
|
||||
border: `1px solid ${theme.palette.divider}`,
|
||||
}}
|
||||
>
|
||||
<Typography flexGrow={1}>{monitor.name}</Typography>
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => {
|
||||
field.onChange(
|
||||
field.value.filter((id: string) => id !== monitor.id)
|
||||
);
|
||||
}}
|
||||
aria-label="Remove monitor"
|
||||
>
|
||||
<Trash2 size={16} />
|
||||
</IconButton>
|
||||
</Stack>
|
||||
))}
|
||||
</Stack>
|
||||
}
|
||||
/>
|
||||
<ConfigBox
|
||||
title={t("pages.maintenanceWindow.form.startDate.title")}
|
||||
subtitle={t("pages.maintenanceWindow.form.startDate.description")}
|
||||
rightContent={
|
||||
<Stack spacing={theme.spacing(LAYOUT.MD)}>
|
||||
<FormDatePickerField
|
||||
name="startDate"
|
||||
fieldLabel={t(
|
||||
"pages.maintenanceWindow.form.startDate.option.startDate.label"
|
||||
)}
|
||||
onValueChange={() => trigger("startDate")}
|
||||
/>
|
||||
</Stack>
|
||||
}
|
||||
/>
|
||||
<ConfigBox
|
||||
title={t("pages.maintenanceWindow.form.startTime.title")}
|
||||
subtitle={t("pages.maintenanceWindow.form.startTime.description")}
|
||||
rightContent={
|
||||
<Stack spacing={theme.spacing(LAYOUT.MD)}>
|
||||
<FormTimePickerField
|
||||
name="startTime"
|
||||
fieldLabel={t(
|
||||
"pages.maintenanceWindow.form.startTime.option.startTime.label"
|
||||
)}
|
||||
onValueChange={() => trigger("startDate")}
|
||||
/>
|
||||
<Stack
|
||||
direction="row"
|
||||
alignItems="flex-start"
|
||||
spacing={theme.spacing(LAYOUT.MD)}
|
||||
>
|
||||
<FormNumberField
|
||||
name="duration"
|
||||
fieldLabel={t(
|
||||
"pages.maintenanceWindow.form.startTime.option.duration.label"
|
||||
)}
|
||||
</Stack>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Stack
|
||||
direction="row"
|
||||
justifyContent="flex-end"
|
||||
spacing={theme.spacing(SPACING.LG)}
|
||||
>
|
||||
<Button
|
||||
loading={isLoading}
|
||||
type="submit"
|
||||
variant="contained"
|
||||
color="primary"
|
||||
sx={{ width: 120 }}
|
||||
/>
|
||||
<FormSelectField
|
||||
name="durationUnit"
|
||||
fieldLabel={" "}
|
||||
options={durationUnitOptions.map((option) => ({
|
||||
value: option.id,
|
||||
label: option.name,
|
||||
}))}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
}
|
||||
/>
|
||||
<ConfigBox
|
||||
title={t("pages.maintenanceWindow.form.startTime.monitors.title")}
|
||||
subtitle={t("pages.maintenanceWindow.form.startTime.monitors.description")}
|
||||
rightContent={
|
||||
<FormMultiSelectField
|
||||
name="monitors"
|
||||
fieldLabel={t(
|
||||
"pages.maintenanceWindow.form.startTime.monitors.option.addMonitors.label"
|
||||
)}
|
||||
placeholder={t(
|
||||
"pages.maintenanceWindow.form.startTime.monitors.option.addMonitors.label"
|
||||
)}
|
||||
options={monitors ?? []}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Stack
|
||||
direction="row"
|
||||
justifyContent="flex-end"
|
||||
spacing={theme.spacing(SPACING.LG)}
|
||||
>
|
||||
{t("common.buttons.save")}
|
||||
</Button>
|
||||
</Stack>
|
||||
</BasePage>
|
||||
<Button
|
||||
loading={isLoading}
|
||||
type="submit"
|
||||
variant="contained"
|
||||
color="primary"
|
||||
>
|
||||
{t("common.buttons.save")}
|
||||
</Button>
|
||||
</Stack>
|
||||
</BasePage>
|
||||
</FormProvider>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,14 +1,12 @@
|
||||
import { BasePage, ConfigBox } from "@/Components/design-elements";
|
||||
import { TextField, Select, Button } from "@/Components/inputs";
|
||||
import MenuItem from "@mui/material/MenuItem";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import { Button } from "@/Components/inputs";
|
||||
import Stack from "@mui/material/Stack";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
|
||||
import { useEffect, useMemo } from "react";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import { FormProvider, useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useGet, usePost, usePatch } from "@/Hooks/UseApi";
|
||||
import { useNotificationForm } from "@/Hooks/useNotificationForm";
|
||||
@@ -16,6 +14,8 @@ import type { NotificationFormData } from "@/Validation/notifications";
|
||||
import type { Notification } from "@/Types/Notification";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { NotificationChannels } from "@/Types/Notification";
|
||||
import { FormTextField } from "@/Components/inputs/forms/FormTextField";
|
||||
import { FormSelectField } from "@/Components/inputs/forms/FormSelectField";
|
||||
|
||||
const NotificationsCreatePage = () => {
|
||||
const { t } = useTranslation();
|
||||
@@ -39,7 +39,7 @@ const NotificationsCreatePage = () => {
|
||||
defaultValues: defaults,
|
||||
});
|
||||
|
||||
const { control, watch, reset, handleSubmit, clearErrors, trigger, getValues } = form;
|
||||
const { watch, reset, handleSubmit, clearErrors, trigger, getValues } = form;
|
||||
|
||||
useEffect(() => {
|
||||
reset(defaults);
|
||||
@@ -93,384 +93,195 @@ const NotificationsCreatePage = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<BasePage
|
||||
component="form"
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
>
|
||||
<ConfigBox
|
||||
title={t("pages.notifications.form.notificationName.title")}
|
||||
subtitle={t("pages.notifications.form.notificationName.description")}
|
||||
rightContent={
|
||||
<Controller
|
||||
name="notificationName"
|
||||
control={control}
|
||||
defaultValue={defaults.notificationName}
|
||||
render={({ field, fieldState }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
type="text"
|
||||
fieldLabel={t("pages.notifications.form.notificationName.optionName")}
|
||||
placeholder={t("pages.notifications.form.notificationName.placeholder")}
|
||||
fullWidth
|
||||
error={!!fieldState.error}
|
||||
helperText={fieldState.error?.message ?? ""}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<ConfigBox
|
||||
title={t("pages.notifications.form.type.title")}
|
||||
subtitle={t("pages.notifications.form.type.description")}
|
||||
rightContent={
|
||||
<Controller
|
||||
name="type"
|
||||
control={control}
|
||||
defaultValue={defaults.type}
|
||||
render={({ field, fieldState }) => (
|
||||
<Select
|
||||
value={field.value}
|
||||
fieldLabel={t("pages.notifications.form.type.optionType")}
|
||||
error={!!fieldState.error}
|
||||
onChange={field.onChange}
|
||||
>
|
||||
{NotificationChannels.map((type: string) => (
|
||||
<MenuItem
|
||||
key={type}
|
||||
value={type}
|
||||
>
|
||||
<Typography textTransform="capitalize">{type}</Typography>
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
)}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
{watchedType !== "matrix" &&
|
||||
watchedType !== "telegram" &&
|
||||
watchedType !== "pushover" &&
|
||||
watchedType !== "twilio" &&
|
||||
watchedType !== "ntfy" && (
|
||||
<FormProvider {...form}>
|
||||
<BasePage
|
||||
component="form"
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
>
|
||||
<ConfigBox
|
||||
title={t("pages.notifications.form.notificationName.title")}
|
||||
subtitle={t("pages.notifications.form.notificationName.description")}
|
||||
rightContent={
|
||||
<FormTextField
|
||||
name="notificationName"
|
||||
fieldLabel={t("pages.notifications.form.notificationName.optionName")}
|
||||
placeholder={t("pages.notifications.form.notificationName.placeholder")}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<ConfigBox
|
||||
title={t("pages.notifications.form.type.title")}
|
||||
subtitle={t("pages.notifications.form.type.description")}
|
||||
rightContent={
|
||||
<FormSelectField
|
||||
name="type"
|
||||
fieldLabel={t("pages.notifications.form.type.optionType")}
|
||||
options={NotificationChannels.map((channel) => ({
|
||||
value: channel,
|
||||
label: t(`pages.notifications.form.type.value.${channel}`),
|
||||
}))}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
{watchedType !== "matrix" &&
|
||||
watchedType !== "telegram" &&
|
||||
watchedType !== "pushover" &&
|
||||
watchedType !== "twilio" &&
|
||||
watchedType !== "ntfy" && (
|
||||
<ConfigBox
|
||||
title={addressConfig.title}
|
||||
subtitle={addressConfig.description}
|
||||
rightContent={
|
||||
<FormTextField
|
||||
name="address"
|
||||
fieldLabel={addressConfig.fieldLabel}
|
||||
placeholder={addressConfig.placeholder}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{watchedType === "ntfy" && (
|
||||
<ConfigBox
|
||||
title={addressConfig.title}
|
||||
subtitle={addressConfig.description}
|
||||
title={t("pages.notifications.form.ntfy.title")}
|
||||
subtitle={t("pages.notifications.form.ntfy.description")}
|
||||
rightContent={
|
||||
<Controller
|
||||
name="address"
|
||||
control={control}
|
||||
defaultValue={"address" in defaults ? defaults.address : ""}
|
||||
render={({ field, fieldState }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
type="text"
|
||||
fieldLabel={addressConfig.fieldLabel}
|
||||
placeholder={addressConfig.placeholder}
|
||||
fullWidth
|
||||
error={!!fieldState.error}
|
||||
helperText={fieldState.error?.message ?? ""}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Stack spacing={theme.spacing(8)}>
|
||||
<FormTextField
|
||||
name="address"
|
||||
fieldLabel={t("pages.notifications.form.ntfy.optionServerUrl")}
|
||||
placeholder={t("pages.notifications.form.ntfy.placeholderServerUrl")}
|
||||
/>
|
||||
<FormTextField
|
||||
name="topic"
|
||||
fieldLabel={t("pages.notifications.form.ntfy.optionTopic")}
|
||||
placeholder={t("pages.notifications.form.ntfy.placeholderTopic")}
|
||||
/>
|
||||
</Stack>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{watchedType === "ntfy" && (
|
||||
<ConfigBox
|
||||
title={t("pages.notifications.form.ntfy.title")}
|
||||
subtitle={t("pages.notifications.form.ntfy.description")}
|
||||
rightContent={
|
||||
<Stack spacing={theme.spacing(8)}>
|
||||
<Controller
|
||||
name="address"
|
||||
control={control}
|
||||
defaultValue={"address" in defaults ? defaults.address : ""}
|
||||
render={({ field, fieldState }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
type="text"
|
||||
fieldLabel={t("pages.notifications.form.ntfy.optionServerUrl")}
|
||||
placeholder={t("pages.notifications.form.ntfy.placeholderServerUrl")}
|
||||
fullWidth
|
||||
error={!!fieldState.error}
|
||||
helperText={fieldState.error?.message ?? ""}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="topic"
|
||||
control={control}
|
||||
defaultValue={"topic" in defaults ? defaults.topic : ""}
|
||||
render={({ field, fieldState }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
type="text"
|
||||
fieldLabel={t("pages.notifications.form.ntfy.optionTopic")}
|
||||
placeholder={t("pages.notifications.form.ntfy.placeholderTopic")}
|
||||
fullWidth
|
||||
error={!!fieldState.error}
|
||||
helperText={fieldState.error?.message ?? ""}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Stack>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{watchedType === "telegram" && (
|
||||
<ConfigBox
|
||||
title={t("pages.notifications.form.telegram.title")}
|
||||
subtitle={t("pages.notifications.form.telegram.description")}
|
||||
rightContent={
|
||||
<Stack spacing={theme.spacing(8)}>
|
||||
<Controller
|
||||
name="accessToken"
|
||||
control={control}
|
||||
defaultValue={"accessToken" in defaults ? defaults.accessToken : ""}
|
||||
render={({ field, fieldState }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
type="text"
|
||||
fieldLabel={t("pages.notifications.form.telegram.optionBotToken")}
|
||||
placeholder={t(
|
||||
"pages.notifications.form.telegram.placeholderBotToken"
|
||||
)}
|
||||
fullWidth
|
||||
error={!!fieldState.error}
|
||||
helperText={fieldState.error?.message ?? ""}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="address"
|
||||
control={control}
|
||||
render={({ field, fieldState }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
type="text"
|
||||
fieldLabel={t("pages.notifications.form.telegram.optionChatId")}
|
||||
placeholder={t("pages.notifications.form.telegram.placeholderChatId")}
|
||||
fullWidth
|
||||
error={!!fieldState.error}
|
||||
helperText={fieldState.error?.message ?? ""}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Stack>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{watchedType === "pushover" && (
|
||||
<ConfigBox
|
||||
title={t("pages.notifications.form.pushover.title")}
|
||||
subtitle={t("pages.notifications.form.pushover.description")}
|
||||
rightContent={
|
||||
<Stack spacing={theme.spacing(8)}>
|
||||
<Controller
|
||||
name="accessToken"
|
||||
control={control}
|
||||
defaultValue={"accessToken" in defaults ? defaults.accessToken : ""}
|
||||
render={({ field, fieldState }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
type="text"
|
||||
fieldLabel={t("pages.notifications.form.pushover.optionAppToken")}
|
||||
placeholder={t(
|
||||
"pages.notifications.form.pushover.placeholderAppToken"
|
||||
)}
|
||||
fullWidth
|
||||
error={!!fieldState.error}
|
||||
helperText={fieldState.error?.message ?? ""}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="address"
|
||||
control={control}
|
||||
defaultValue={"address" in defaults ? defaults.address : ""}
|
||||
render={({ field, fieldState }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
type="text"
|
||||
fieldLabel={t("pages.notifications.form.pushover.optionUserKey")}
|
||||
placeholder={t(
|
||||
"pages.notifications.form.pushover.placeholderUserKey"
|
||||
)}
|
||||
fullWidth
|
||||
error={!!fieldState.error}
|
||||
helperText={fieldState.error?.message ?? ""}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Stack>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{watchedType === "twilio" && (
|
||||
<ConfigBox
|
||||
title={t("pages.notifications.form.twilio.title")}
|
||||
subtitle={t("pages.notifications.form.twilio.description")}
|
||||
rightContent={
|
||||
<Stack spacing={theme.spacing(8)}>
|
||||
<Controller
|
||||
name="accountSid"
|
||||
control={control}
|
||||
defaultValue={"accountSid" in defaults ? defaults.accountSid : ""}
|
||||
render={({ field, fieldState }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
type="text"
|
||||
fieldLabel={t("pages.notifications.form.twilio.optionAccountSid")}
|
||||
placeholder={t(
|
||||
"pages.notifications.form.twilio.placeholderAccountSid"
|
||||
)}
|
||||
fullWidth
|
||||
error={!!fieldState.error}
|
||||
helperText={fieldState.error?.message ?? ""}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="accessToken"
|
||||
control={control}
|
||||
defaultValue={"accessToken" in defaults ? defaults.accessToken : ""}
|
||||
render={({ field, fieldState }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
type="text"
|
||||
fieldLabel={t("pages.notifications.form.twilio.optionAuthToken")}
|
||||
placeholder={t(
|
||||
"pages.notifications.form.twilio.placeholderAuthToken"
|
||||
)}
|
||||
fullWidth
|
||||
error={!!fieldState.error}
|
||||
helperText={fieldState.error?.message ?? ""}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="twilioPhoneNumber"
|
||||
control={control}
|
||||
defaultValue={
|
||||
"twilioPhoneNumber" in defaults ? defaults.twilioPhoneNumber : ""
|
||||
}
|
||||
render={({ field, fieldState }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
type="text"
|
||||
fieldLabel={t("pages.notifications.form.twilio.optionFromNumber")}
|
||||
placeholder={t(
|
||||
"pages.notifications.form.twilio.placeholderFromNumber"
|
||||
)}
|
||||
fullWidth
|
||||
error={!!fieldState.error}
|
||||
helperText={fieldState.error?.message ?? ""}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="phone"
|
||||
control={control}
|
||||
defaultValue={"phone" in defaults ? defaults.phone : ""}
|
||||
render={({ field, fieldState }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
type="text"
|
||||
fieldLabel={t("pages.notifications.form.twilio.optionToNumber")}
|
||||
placeholder={t("pages.notifications.form.twilio.placeholderToNumber")}
|
||||
fullWidth
|
||||
error={!!fieldState.error}
|
||||
helperText={fieldState.error?.message ?? ""}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Stack>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{watchedType === "matrix" && (
|
||||
<ConfigBox
|
||||
title={t("pages.notifications.form.matrix.title")}
|
||||
subtitle={t("pages.notifications.form.matrix.description")}
|
||||
rightContent={
|
||||
<Stack spacing={theme.spacing(8)}>
|
||||
<Controller
|
||||
name="homeserverUrl"
|
||||
control={control}
|
||||
defaultValue={"homeserverUrl" in defaults ? defaults.homeserverUrl : ""}
|
||||
render={({ field, fieldState }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
type="text"
|
||||
fieldLabel={t("pages.notifications.form.homeServer.optionHomeServer")}
|
||||
placeholder={t("pages.notifications.form.homeServer.placeholder")}
|
||||
fullWidth
|
||||
error={!!fieldState.error}
|
||||
helperText={fieldState.error?.message ?? ""}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="roomId"
|
||||
control={control}
|
||||
defaultValue={"roomId" in defaults ? defaults.roomId : ""}
|
||||
render={({ field, fieldState }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
type="text"
|
||||
fieldLabel={t("pages.notifications.form.roomId.optionRoomId")}
|
||||
placeholder={t("pages.notifications.form.roomId.placeholder")}
|
||||
fullWidth
|
||||
error={!!fieldState.error}
|
||||
helperText={fieldState.error?.message ?? ""}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="accessToken"
|
||||
control={control}
|
||||
defaultValue={"accessToken" in defaults ? defaults.accessToken : ""}
|
||||
render={({ field, fieldState }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
type="text"
|
||||
fieldLabel={t(
|
||||
"pages.notifications.form.accessToken.optionAccessToken"
|
||||
)}
|
||||
placeholder={t("pages.notifications.form.accessToken.placeholder")}
|
||||
fullWidth
|
||||
error={!!fieldState.error}
|
||||
helperText={fieldState.error?.message ?? ""}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Stack>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
<Stack
|
||||
direction="row"
|
||||
justifyContent="flex-end"
|
||||
spacing={theme.spacing(2)}
|
||||
>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={handleTest}
|
||||
loading={isTesting}
|
||||
{watchedType === "telegram" && (
|
||||
<ConfigBox
|
||||
title={t("pages.notifications.form.telegram.title")}
|
||||
subtitle={t("pages.notifications.form.telegram.description")}
|
||||
rightContent={
|
||||
<Stack spacing={theme.spacing(8)}>
|
||||
<FormTextField
|
||||
name="accessToken"
|
||||
fieldLabel={t("pages.notifications.form.telegram.optionBotToken")}
|
||||
placeholder={t("pages.notifications.form.telegram.placeholderBotToken")}
|
||||
/>
|
||||
<FormTextField
|
||||
name="address"
|
||||
fieldLabel={t("pages.notifications.form.telegram.optionChatId")}
|
||||
placeholder={t("pages.notifications.form.telegram.placeholderChatId")}
|
||||
/>
|
||||
</Stack>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{watchedType === "pushover" && (
|
||||
<ConfigBox
|
||||
title={t("pages.notifications.form.pushover.title")}
|
||||
subtitle={t("pages.notifications.form.pushover.description")}
|
||||
rightContent={
|
||||
<Stack spacing={theme.spacing(8)}>
|
||||
<FormTextField
|
||||
name="accessToken"
|
||||
fieldLabel={t("pages.notifications.form.pushover.optionAppToken")}
|
||||
placeholder={t("pages.notifications.form.pushover.placeholderAppToken")}
|
||||
/>
|
||||
|
||||
<FormTextField
|
||||
name="address"
|
||||
fieldLabel={t("pages.notifications.form.pushover.optionUserKey")}
|
||||
placeholder={t("pages.notifications.form.pushover.placeholderUserKey")}
|
||||
/>
|
||||
</Stack>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{watchedType === "twilio" && (
|
||||
<ConfigBox
|
||||
title={t("pages.notifications.form.twilio.title")}
|
||||
subtitle={t("pages.notifications.form.twilio.description")}
|
||||
rightContent={
|
||||
<Stack spacing={theme.spacing(8)}>
|
||||
<FormTextField
|
||||
name="accountSid"
|
||||
fieldLabel={t("pages.notifications.form.twilio.optionAccountSid")}
|
||||
placeholder={t("pages.notifications.form.twilio.placeholderAccountSid")}
|
||||
/>
|
||||
<FormTextField
|
||||
name="accessToken"
|
||||
fieldLabel={t("pages.notifications.form.twilio.optionAuthToken")}
|
||||
placeholder={t("pages.notifications.form.twilio.placeholderAuthToken")}
|
||||
/>
|
||||
|
||||
<FormTextField
|
||||
name="twilioPhoneNumber"
|
||||
fieldLabel={t("pages.notifications.form.twilio.optionFromNumber")}
|
||||
placeholder={t("pages.notifications.form.twilio.placeholderFromNumber")}
|
||||
/>
|
||||
|
||||
<FormTextField
|
||||
name="phone"
|
||||
fieldLabel={t("pages.notifications.form.twilio.optionToNumber")}
|
||||
placeholder={t("pages.notifications.form.twilio.placeholderToNumber")}
|
||||
/>
|
||||
</Stack>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{watchedType === "matrix" && (
|
||||
<ConfigBox
|
||||
title={t("pages.notifications.form.matrix.title")}
|
||||
subtitle={t("pages.notifications.form.matrix.description")}
|
||||
rightContent={
|
||||
<Stack spacing={theme.spacing(8)}>
|
||||
<FormTextField
|
||||
name="homeserverUrl"
|
||||
fieldLabel={t("pages.notifications.form.homeServer.optionHomeServer")}
|
||||
placeholder={t("pages.notifications.form.homeServer.placeholder")}
|
||||
/>
|
||||
<FormTextField
|
||||
name="roomId"
|
||||
fieldLabel={t("pages.notifications.form.roomId.optionRoomId")}
|
||||
placeholder={t("pages.notifications.form.roomId.placeholder")}
|
||||
/>
|
||||
<FormTextField
|
||||
name="accessToken"
|
||||
fieldLabel={t("pages.notifications.form.accessToken.optionAccessToken")}
|
||||
placeholder={t("pages.notifications.form.accessToken.placeholder")}
|
||||
/>
|
||||
</Stack>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
<Stack
|
||||
direction="row"
|
||||
justifyContent="flex-end"
|
||||
spacing={theme.spacing(2)}
|
||||
>
|
||||
{t("common.buttons.test")}
|
||||
</Button>
|
||||
<Button
|
||||
loading={isSubmitting || isPatching}
|
||||
type="submit"
|
||||
variant="contained"
|
||||
color="primary"
|
||||
>
|
||||
{t("common.buttons.save")}
|
||||
</Button>
|
||||
</Stack>
|
||||
</BasePage>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={handleTest}
|
||||
loading={isTesting}
|
||||
>
|
||||
{t("common.buttons.test")}
|
||||
</Button>
|
||||
<Button
|
||||
loading={isSubmitting || isPatching}
|
||||
type="submit"
|
||||
variant="contained"
|
||||
color="primary"
|
||||
>
|
||||
{t("common.buttons.save")}
|
||||
</Button>
|
||||
</Stack>
|
||||
</BasePage>
|
||||
</FormProvider>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -45,6 +45,8 @@ const PageSpeedDetails = () => {
|
||||
const monitor = monitorData?.monitorData?.monitor;
|
||||
const groupedChecks = monitorData?.monitorData?.groupedChecks || [];
|
||||
const monitorStats = monitorData?.monitorStats || null;
|
||||
const recentChecks = monitor?.recentChecks ?? [];
|
||||
const latestCheck = recentChecks[recentChecks.length - 1];
|
||||
|
||||
return (
|
||||
<BasePage
|
||||
@@ -75,8 +77,8 @@ const PageSpeedDetails = () => {
|
||||
direction={{ xs: "column", md: "row" }}
|
||||
gap={theme.spacing(10)}
|
||||
>
|
||||
<PiePageSpeed latestCheck={monitor?.recentChecks?.[0]} />
|
||||
<PiePageSpeedLegend latestCheck={monitor?.recentChecks?.[0]} />
|
||||
<PiePageSpeed latestCheck={latestCheck} />
|
||||
<PiePageSpeedLegend latestCheck={latestCheck} />
|
||||
</Stack>
|
||||
</BasePage>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,103 @@
|
||||
import { ActionsMenu, type ActionMenuItem } from "@/Components/actions-menu";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import type { Header } from "@/Components/design-elements/Table";
|
||||
import { Table } from "@/Components/design-elements";
|
||||
import { Pagination } from "@/Components/design-elements/Table";
|
||||
import { useClientPagination } from "@/Hooks/useClientPagination";
|
||||
|
||||
import type { ProxyResponse } from "@/Types/Proxy";
|
||||
import { useNavigate } from "react-router";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useTheme } from "@mui/material";
|
||||
|
||||
interface ProxiesTableProps {
|
||||
proxies: ProxyResponse[];
|
||||
setSelectedProxy: Function;
|
||||
}
|
||||
|
||||
export const ProxiesTable = ({ proxies, setSelectedProxy }: ProxiesTableProps) => {
|
||||
const navigate = useNavigate();
|
||||
const { t } = useTranslation();
|
||||
const theme = useTheme();
|
||||
const { pagedRows, paginationProps } = useClientPagination(proxies);
|
||||
|
||||
const getActions = (proxy: ProxyResponse): ActionMenuItem[] => {
|
||||
return [
|
||||
{
|
||||
id: 1,
|
||||
label: t("pages.common.monitors.actions.configure"),
|
||||
action: () => {
|
||||
navigate(`/proxies/configure/${proxy.id}`);
|
||||
},
|
||||
closeMenu: true,
|
||||
},
|
||||
|
||||
{
|
||||
id: 2,
|
||||
label: (
|
||||
<Typography color={theme.palette.error.main}>
|
||||
{t("pages.common.monitors.actions.delete")}
|
||||
</Typography>
|
||||
),
|
||||
action: async () => {
|
||||
setSelectedProxy(proxy);
|
||||
},
|
||||
closeMenu: true,
|
||||
},
|
||||
];
|
||||
};
|
||||
|
||||
const getHeaders = () => {
|
||||
const headers: Header<ProxyResponse>[] = [
|
||||
{
|
||||
id: "name",
|
||||
content: t("common.table.headers.name"),
|
||||
render: (row) => {
|
||||
return <Typography>{row?.name}</Typography>;
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "protocol",
|
||||
content: t("pages.proxies.table.headers.protocol"),
|
||||
render: (row) => {
|
||||
return <Typography>{row?.protocol}</Typography>;
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "host",
|
||||
content: t("pages.proxies.table.headers.host"),
|
||||
render: (row) => {
|
||||
return <Typography>{row?.host}</Typography>;
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "port",
|
||||
content: t("pages.proxies.table.headers.port"),
|
||||
render: (row) => {
|
||||
return <Typography>{row?.port}</Typography>;
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "actions",
|
||||
content: t("common.table.headers.actions"),
|
||||
render: (row) => {
|
||||
return <ActionsMenu items={getActions(row)} />;
|
||||
},
|
||||
},
|
||||
];
|
||||
return headers;
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Table
|
||||
headers={getHeaders()}
|
||||
data={pagedRows}
|
||||
onRowClick={(row) => {
|
||||
navigate(`/proxies/configure/${row.id}`);
|
||||
}}
|
||||
/>
|
||||
{proxies.length > 0 && <Pagination {...paginationProps} />}
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,213 @@
|
||||
import { BasePage, ConfigBox } from "@/Components/design-elements";
|
||||
import { LAYOUT } from "@/Utils/Theme/constants";
|
||||
import { Button, FieldLabel } from "@/Components/inputs";
|
||||
import Box from "@mui/material/Box";
|
||||
import Stack from "@mui/material/Stack";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useForm, FormProvider } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { mutate } from "swr";
|
||||
import { useGet, usePost, usePatch } from "@/Hooks/UseApi";
|
||||
import type { ProxyFormData } from "@/Validation/proxy";
|
||||
import { ProxyProtocols, type ProxyResponse } from "@/Types/Proxy";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useProxiesForm } from "@/Hooks/useProxiesForm";
|
||||
import { FormTextField } from "@/Components/inputs/forms/FormTextField";
|
||||
import { FormSelectField } from "@/Components/inputs/forms/FormSelectField";
|
||||
import { useMemo } from "react";
|
||||
import { FormNumberField } from "@/Components/inputs/forms/FormNumberField";
|
||||
const ProxiesCreatePage = () => {
|
||||
const { t } = useTranslation();
|
||||
const theme = useTheme();
|
||||
const navigate = useNavigate();
|
||||
const { proxyId } = useParams<{ proxyId: string }>();
|
||||
const isEditMode = Boolean(proxyId);
|
||||
|
||||
const { data: existingProxy } = useGet<ProxyResponse>(
|
||||
isEditMode ? `/proxies/${proxyId}` : null
|
||||
);
|
||||
|
||||
const { post, loading: isSubmitting } = usePost<ProxyFormData, ProxyResponse>();
|
||||
const { patch, loading: isPatching } = usePatch<ProxyFormData, ProxyResponse>();
|
||||
|
||||
const { schema, defaults } = useProxiesForm({ data: existingProxy });
|
||||
|
||||
const form = useForm<ProxyFormData>({
|
||||
resolver: zodResolver(schema),
|
||||
defaultValues: defaults,
|
||||
});
|
||||
|
||||
const { reset, handleSubmit } = form;
|
||||
|
||||
const isPasswordSet = existingProxy?.hasPassword ?? false;
|
||||
const [passwordHasBeenReset, setPasswordHasBeenReset] = useState(false);
|
||||
|
||||
const handleResetPassword = () => {
|
||||
form.setValue("password", "");
|
||||
setPasswordHasBeenReset(true);
|
||||
};
|
||||
|
||||
const isUsernameSet = Boolean(existingProxy?.username);
|
||||
const [usernameHasBeenReset, setUsernameHasBeenReset] = useState(false);
|
||||
|
||||
const handleResetUsername = () => {
|
||||
form.setValue("username", "");
|
||||
setUsernameHasBeenReset(true);
|
||||
};
|
||||
|
||||
const protocolOptions = useMemo(
|
||||
() =>
|
||||
ProxyProtocols.map((protocol) => ({
|
||||
value: protocol,
|
||||
label: protocol,
|
||||
})),
|
||||
[]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
reset(defaults);
|
||||
}, [defaults, reset]);
|
||||
|
||||
const onSubmit = async (data: ProxyFormData) => {
|
||||
const payload: ProxyFormData & { clearPassword?: boolean; clearUsername?: boolean } =
|
||||
{
|
||||
...data,
|
||||
};
|
||||
// Don't send password/username if one is set and the user hasn't clicked reset
|
||||
if (isPasswordSet && !passwordHasBeenReset) {
|
||||
delete payload.password;
|
||||
} else if (passwordHasBeenReset && !payload.password) {
|
||||
payload.clearPassword = true;
|
||||
}
|
||||
if (isUsernameSet && !usernameHasBeenReset) {
|
||||
delete payload.username;
|
||||
} else if (usernameHasBeenReset && !payload.username) {
|
||||
payload.clearUsername = true;
|
||||
}
|
||||
const result = isEditMode
|
||||
? await patch(`/proxies/${proxyId}`, payload)
|
||||
: await post("/proxies", payload);
|
||||
if (result?.success) {
|
||||
await mutate((key) => typeof key === "string" && key.startsWith("/proxies"));
|
||||
navigate("/proxies");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<FormProvider {...form}>
|
||||
<BasePage
|
||||
component="form"
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
>
|
||||
<ConfigBox
|
||||
title={t("pages.proxies.form.name.title")}
|
||||
subtitle={t("pages.proxies.form.name.description")}
|
||||
rightContent={
|
||||
<FormTextField
|
||||
name="name"
|
||||
fieldLabel={t("pages.proxies.form.name.optionName")}
|
||||
placeholder={t("pages.proxies.form.name.placeholder")}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<ConfigBox
|
||||
title={t("pages.proxies.form.server.title")}
|
||||
subtitle={t("pages.proxies.form.server.description")}
|
||||
rightContent={
|
||||
<Stack gap={theme.spacing(LAYOUT.MD)}>
|
||||
<FormSelectField
|
||||
name="protocol"
|
||||
fieldLabel={t("pages.proxies.form.server.option.protocol.label")}
|
||||
options={protocolOptions}
|
||||
/>
|
||||
<FormTextField
|
||||
name="host"
|
||||
fieldLabel={t("pages.proxies.form.server.option.host.label")}
|
||||
placeholder={t("pages.proxies.form.server.option.host.placeholder")}
|
||||
/>
|
||||
<FormNumberField
|
||||
name="port"
|
||||
fieldLabel={t("pages.proxies.form.server.option.port.label")}
|
||||
/>
|
||||
</Stack>
|
||||
}
|
||||
/>
|
||||
|
||||
<ConfigBox
|
||||
title={t("pages.proxies.form.auth.title")}
|
||||
subtitle={t("pages.proxies.form.auth.description")}
|
||||
rightContent={
|
||||
<Stack gap={theme.spacing(LAYOUT.MD)}>
|
||||
{(isUsernameSet === false || usernameHasBeenReset === true) && (
|
||||
<FormTextField
|
||||
name="username"
|
||||
fieldLabel={t("pages.proxies.form.auth.option.username.label")}
|
||||
placeholder={t("pages.proxies.form.auth.option.username.placeholder")}
|
||||
/>
|
||||
)}
|
||||
|
||||
{isUsernameSet === true && usernameHasBeenReset === false && (
|
||||
<Box>
|
||||
<FieldLabel>
|
||||
{t("pages.proxies.form.auth.option.username.labelSet")}
|
||||
</FieldLabel>
|
||||
<Button
|
||||
onClick={handleResetUsername}
|
||||
variant="contained"
|
||||
color="error"
|
||||
>
|
||||
{t("common.buttons.reset")}
|
||||
</Button>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{(isPasswordSet === false || passwordHasBeenReset === true) && (
|
||||
<FormTextField
|
||||
name="password"
|
||||
type="password"
|
||||
fieldLabel={t("pages.proxies.form.auth.option.password.label")}
|
||||
/>
|
||||
)}
|
||||
|
||||
{isPasswordSet === true && passwordHasBeenReset === false && (
|
||||
<Box>
|
||||
<FieldLabel>
|
||||
{t("pages.proxies.form.auth.option.password.labelSet")}
|
||||
</FieldLabel>
|
||||
<Button
|
||||
onClick={handleResetPassword}
|
||||
variant="contained"
|
||||
color="error"
|
||||
>
|
||||
{t("common.buttons.reset")}
|
||||
</Button>
|
||||
</Box>
|
||||
)}
|
||||
</Stack>
|
||||
}
|
||||
/>
|
||||
|
||||
<Stack
|
||||
direction="row"
|
||||
justifyContent="flex-end"
|
||||
spacing={theme.spacing(2)}
|
||||
>
|
||||
<Button
|
||||
loading={isSubmitting || isPatching}
|
||||
type="submit"
|
||||
variant="contained"
|
||||
color="primary"
|
||||
>
|
||||
{t("common.buttons.save")}
|
||||
</Button>
|
||||
</Stack>
|
||||
</BasePage>
|
||||
</FormProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProxiesCreatePage;
|
||||
@@ -0,0 +1,72 @@
|
||||
import { BasePageWithStates } from "@/Components/design-elements";
|
||||
import { ProxiesTable } from "@/Pages/Proxies/components/ProxiesTable";
|
||||
import { Dialog } from "@/Components/inputs";
|
||||
import { HeaderCreate } from "@/Components/common";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useGet, useDelete } from "@/Hooks/UseApi";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import type { ProxyResponse } from "@/Types/Proxy";
|
||||
import { useIsAdmin } from "@/Hooks/useIsAdmin";
|
||||
|
||||
const ProxiesPage = () => {
|
||||
const { t } = useTranslation();
|
||||
const isAdmin = useIsAdmin();
|
||||
|
||||
const [selectedProxy, setSelectedProxy] = useState<ProxyResponse | null>(null);
|
||||
const isDialogOpen = Boolean(selectedProxy);
|
||||
|
||||
const {
|
||||
data: proxies,
|
||||
isLoading,
|
||||
isValidating,
|
||||
error,
|
||||
refetch,
|
||||
} = useGet<ProxyResponse[]>("/proxies/team", {}, { keepPreviousData: true });
|
||||
|
||||
const { deleteFn, loading: isDeleting } = useDelete();
|
||||
|
||||
const handleConfirm = async () => {
|
||||
if (!selectedProxy) return;
|
||||
await deleteFn(`/proxies/${selectedProxy.id}`);
|
||||
setSelectedProxy(null);
|
||||
refetch();
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
setSelectedProxy(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<BasePageWithStates
|
||||
headerKey="proxies"
|
||||
page={t("pages.proxies.fallback.title")}
|
||||
description={t("pages.proxies.fallback.description")}
|
||||
loading={isLoading || isValidating}
|
||||
error={!!error}
|
||||
totalCount={proxies?.length ?? 0}
|
||||
actionButtonText={t("pages.proxies.fallback.actionButton")}
|
||||
actionLink="/proxies/create"
|
||||
>
|
||||
<HeaderCreate
|
||||
path="/proxies/create"
|
||||
isLoading={isLoading || isValidating}
|
||||
isAdmin={isAdmin}
|
||||
/>
|
||||
<ProxiesTable
|
||||
proxies={proxies ?? []}
|
||||
setSelectedProxy={setSelectedProxy}
|
||||
/>
|
||||
<Dialog
|
||||
open={isDialogOpen}
|
||||
title={t("common.dialogs.delete.title")}
|
||||
content={t("common.dialogs.delete.description")}
|
||||
onConfirm={handleConfirm}
|
||||
onCancel={handleCancel}
|
||||
loading={isDeleting}
|
||||
/>
|
||||
</BasePageWithStates>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProxiesPage;
|
||||
@@ -13,13 +13,12 @@ const generateDummyChecks = (): CheckSnapshot[] => {
|
||||
const checks: CheckSnapshot[] = [];
|
||||
for (let i = 0; i < MAX_RECENT_CHECKS; i++) {
|
||||
const isUp = Math.random() > 0.1;
|
||||
const responseTime = Math.floor(Math.random() * 80) + 20;
|
||||
const responseTime = Math.floor(Math.random() * 800) + 20;
|
||||
checks.push({
|
||||
id: `dummy-${i}`,
|
||||
status: isUp,
|
||||
statusCode: isUp ? 200 : 500,
|
||||
responseTime: responseTime,
|
||||
originalResponseTime: responseTime,
|
||||
message: "",
|
||||
createdAt: new Date(Date.now() - i * 60000).toISOString(),
|
||||
});
|
||||
|
||||
+650
-781
File diff suppressed because it is too large.
Load diff
@@ -1,56 +1,81 @@
|
||||
import { BasePage, ConfigBox, StepProgress } from "@/Components/design-elements";
|
||||
import {
|
||||
BasePage,
|
||||
ColoredLabel,
|
||||
ConfigBox,
|
||||
StepProgress,
|
||||
} from "@/Components/design-elements";
|
||||
import Stack from "@mui/material/Stack";
|
||||
import { logger } from "@/Utils/logger";
|
||||
import { SPACING, LAYOUT } from "@/Utils/Theme/constants";
|
||||
import { LAYOUT } from "@/Utils/Theme/constants";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
import FormControlLabel from "@mui/material/FormControlLabel";
|
||||
import { Trash2, GripVertical } from "lucide-react";
|
||||
import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
|
||||
import type { DropResult } from "@hello-pangea/dnd";
|
||||
import {
|
||||
ImageUpload,
|
||||
SwitchComponent,
|
||||
Button,
|
||||
TextField,
|
||||
Autocomplete,
|
||||
Checkbox,
|
||||
Dialog,
|
||||
ColorInput,
|
||||
} from "@/Components/inputs";
|
||||
import { ImageUpload, Button, Dialog } from "@/Components/inputs";
|
||||
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useForm, Controller } from "react-hook-form";
|
||||
import { useForm, FormProvider, useController } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useStatusPageForm } from "@/Hooks/useStatusPageForm";
|
||||
import type { StatusPageFormData } from "@/Validation/statusPage";
|
||||
import { statusPageStepCount, statusPageStepFieldsFor } from "@/Validation/statusPage";
|
||||
import { useGet, usePost, usePut, useDelete } from "@/Hooks/UseApi";
|
||||
import type { Monitor } from "@/Types/Monitor";
|
||||
import { SelectableMonitorTypes } from "@/Types/Monitor";
|
||||
import type { Tag } from "@/Types/Tag";
|
||||
import type { MonitorDisplayType, StatusPageResponse } from "@/Types/StatusPage";
|
||||
import { getMonitorTypeLabel } from "@/Types/StatusPage";
|
||||
import timezones from "@/Utils/timezones.json";
|
||||
import { timezoneOptions } from "@/Utils/timezoneOptions";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import { mutate } from "swr";
|
||||
import axios from "axios";
|
||||
import { HeaderConfigStatusControls } from "./Components/HeaderConfigStatusControls";
|
||||
import { ThemePicker } from "./Components/ThemePicker";
|
||||
import { FormSwitchField } from "@/Components/inputs/forms/FormSwitchField";
|
||||
import { FormTextField } from "@/Components/inputs/forms/FormTextField";
|
||||
import { FormMultiSelectField } from "@/Components/inputs/forms/FormMultiSelectField";
|
||||
import { FormAutocompleteField } from "@/Components/inputs/forms/FormAutoCompleteField";
|
||||
import { FormCheckboxField } from "@/Components/inputs/forms/FormCheckboxField";
|
||||
import { FormColorField } from "@/Components/inputs/forms/FormColorField";
|
||||
|
||||
const ThemePickerField = () => {
|
||||
const { field: themeField } = useController<StatusPageFormData, "theme">({
|
||||
name: "theme",
|
||||
});
|
||||
const { field: modeField } = useController<StatusPageFormData, "themeMode">({
|
||||
name: "themeMode",
|
||||
});
|
||||
return (
|
||||
<ThemePicker
|
||||
theme={themeField.value ?? "refined"}
|
||||
themeMode={modeField.value ?? "auto"}
|
||||
onThemeChange={themeField.onChange}
|
||||
onThemeModeChange={modeField.onChange}
|
||||
/>
|
||||
);
|
||||
};
|
||||
const LogoUploadField = () => {
|
||||
const { field } = useController<StatusPageFormData, "logo">({ name: "logo" });
|
||||
return (
|
||||
<ImageUpload
|
||||
src={field.value?.data}
|
||||
onChange={(file) => {
|
||||
field.onChange(
|
||||
file ? { data: file.src, contentType: file.file.type, file: file.file } : null
|
||||
);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
// Derived from SelectableMonitorTypes so a newly supported monitor type is
|
||||
// offered here automatically; the previous hardcoded list silently omitted DNS.
|
||||
// "hardware" is appended because infrastructure monitors are created on their
|
||||
// own page and so are absent from the selectable set.
|
||||
const monitorsUrl = (() => {
|
||||
const params = new URLSearchParams();
|
||||
["http", "ping", "port", "docker", "game", "grpc", "websocket", "hardware"].forEach(
|
||||
(type) => params.append("type", type)
|
||||
);
|
||||
[...SelectableMonitorTypes, "hardware"].forEach((type) => params.append("type", type));
|
||||
return `/monitors/team?${params.toString()}`;
|
||||
})();
|
||||
|
||||
interface TimezoneOption {
|
||||
_id: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
const buildStatusPageKey = (slug: string | null | undefined) =>
|
||||
slug ? `/status-page/${slug}?type=uptime&type=infrastructure` : null;
|
||||
|
||||
@@ -67,7 +92,9 @@ const CreateStatusPage = () => {
|
||||
useGet<StatusPageResponse>(isCreate ? null : buildStatusPageKey(url));
|
||||
|
||||
const { data: monitorsResponse } = useGet<Monitor[]>(monitorsUrl);
|
||||
const monitors = monitorsResponse ?? [];
|
||||
const monitors = useMemo(() => monitorsResponse ?? [], [monitorsResponse]);
|
||||
const { data: tagsResponse } = useGet<Tag[]>("/tags/team");
|
||||
const tags = useMemo(() => tagsResponse ?? [], [tagsResponse]);
|
||||
|
||||
const { post, loading: isSubmittingPost } = usePost();
|
||||
const { put, loading: isSubmittingPut } = usePut();
|
||||
@@ -87,7 +114,7 @@ const CreateStatusPage = () => {
|
||||
defaultValues: defaults,
|
||||
});
|
||||
|
||||
const { control, reset, handleSubmit, trigger } = form;
|
||||
const { reset, handleSubmit, trigger } = form;
|
||||
|
||||
// Reset form when defaults change (from fetched data)
|
||||
useEffect(() => {
|
||||
@@ -108,7 +135,7 @@ const CreateStatusPage = () => {
|
||||
};
|
||||
const handleBack = () => setCurrentStep((step) => step - 1);
|
||||
|
||||
const watchedMonitorIds: string[] = form.watch("monitors") ?? [];
|
||||
const watchedMonitorIds: string[] = form.watch("monitors");
|
||||
const computedTypes: MonitorDisplayType[] = useMemo(() => {
|
||||
const selectedMonitors = (watchedMonitorIds ?? [])
|
||||
.map((id) => monitors.find((m) => m.id === id))
|
||||
@@ -124,7 +151,7 @@ const CreateStatusPage = () => {
|
||||
|
||||
useEffect(() => {
|
||||
form.setValue("type", computedTypes);
|
||||
}, [computedTypes]);
|
||||
}, [computedTypes, form]);
|
||||
|
||||
const onError = (errors: any) => {
|
||||
logger.debug("Status page validation errors", errors);
|
||||
@@ -178,18 +205,8 @@ const CreateStatusPage = () => {
|
||||
if (data.logo === null) {
|
||||
// Signal to remove the logo
|
||||
fd.append("removeLogo", "true");
|
||||
} else if (data.logo?.data && data.logo.data !== "") {
|
||||
if (data.logo.data.startsWith("blob:")) {
|
||||
try {
|
||||
const imageResult = await axios.get(data.logo.data, {
|
||||
responseType: "blob",
|
||||
});
|
||||
fd.append("logo", imageResult.data);
|
||||
URL.revokeObjectURL(data.logo.data);
|
||||
} catch (e) {
|
||||
logger.error("Failed to fetch logo blob", e instanceof Error ? e : undefined);
|
||||
}
|
||||
}
|
||||
} else if (data.logo?.file) {
|
||||
fd.append("logo", data.logo.file);
|
||||
}
|
||||
|
||||
let result;
|
||||
@@ -216,470 +233,249 @@ const CreateStatusPage = () => {
|
||||
return <BasePage>Loading...</BasePage>;
|
||||
}
|
||||
return (
|
||||
<BasePage
|
||||
component="form"
|
||||
onSubmit={handleSubmit(onSubmit, onError)}
|
||||
>
|
||||
{!isCreate && <HeaderConfigStatusControls onDelete={handleDeleteClick} />}
|
||||
{isCreate && (
|
||||
<StepProgress
|
||||
steps={totalSteps}
|
||||
current={currentStep}
|
||||
/>
|
||||
)}
|
||||
{showStep(0) && (
|
||||
<ConfigBox
|
||||
title={t("pages.statusPages.form.access.title")}
|
||||
subtitle={t("pages.statusPages.form.access.description")}
|
||||
rightContent={
|
||||
<Stack
|
||||
direction="row"
|
||||
alignItems="center"
|
||||
spacing={theme.spacing(SPACING.MD)}
|
||||
>
|
||||
<Controller
|
||||
<FormProvider {...form}>
|
||||
<BasePage
|
||||
component="form"
|
||||
onSubmit={handleSubmit(onSubmit, onError)}
|
||||
>
|
||||
{!isCreate && <HeaderConfigStatusControls onDelete={handleDeleteClick} />}
|
||||
{isCreate && (
|
||||
<StepProgress
|
||||
steps={totalSteps}
|
||||
current={currentStep}
|
||||
/>
|
||||
)}
|
||||
{showStep(0) && (
|
||||
<ConfigBox
|
||||
title={t("pages.statusPages.form.access.title")}
|
||||
subtitle={t("pages.statusPages.form.access.description")}
|
||||
rightContent={
|
||||
<FormSwitchField
|
||||
name="isPublished"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<SwitchComponent
|
||||
checked={field.value ?? false}
|
||||
onChange={(e) => field.onChange(e.target.checked)}
|
||||
/>
|
||||
)}
|
||||
label={t("pages.statusPages.form.access.option.published.name")}
|
||||
/>
|
||||
<Typography>
|
||||
{t("pages.statusPages.form.access.option.published.name")}
|
||||
</Typography>
|
||||
</Stack>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{showStep(0) && (
|
||||
<ConfigBox
|
||||
title={t("pages.statusPages.form.basicInfo.title")}
|
||||
subtitle={t("pages.statusPages.form.basicInfo.description")}
|
||||
rightContent={
|
||||
<Stack spacing={theme.spacing(LAYOUT.MD)}>
|
||||
<Controller
|
||||
name="companyName"
|
||||
control={control}
|
||||
render={({ field, fieldState }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
fieldLabel={t("pages.statusPages.form.basicInfo.option.name.label")}
|
||||
placeholder={t(
|
||||
"pages.statusPages.form.basicInfo.option.name.placeholder"
|
||||
)}
|
||||
error={!!fieldState.error}
|
||||
helperText={fieldState.error?.message}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="url"
|
||||
control={control}
|
||||
render={({ field, fieldState }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
fieldLabel={t("pages.statusPages.form.basicInfo.option.url.label")}
|
||||
placeholder={t(
|
||||
"pages.statusPages.form.basicInfo.option.url.placeholder"
|
||||
)}
|
||||
error={!!fieldState.error}
|
||||
helperText={fieldState.error?.message}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="customDomain"
|
||||
control={control}
|
||||
render={({ field, fieldState }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
value={field.value ?? ""}
|
||||
fieldLabel={t(
|
||||
"pages.statusPages.form.basicInfo.option.customDomain.label"
|
||||
)}
|
||||
placeholder={t(
|
||||
"pages.statusPages.form.basicInfo.option.customDomain.placeholder"
|
||||
)}
|
||||
helperText={
|
||||
fieldState.error?.message ||
|
||||
t("pages.statusPages.form.basicInfo.option.customDomain.helper")
|
||||
}
|
||||
error={!!fieldState.error}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Stack>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{showStep(0) && (
|
||||
<ConfigBox
|
||||
title={t("pages.statusPages.form.monitors.title")}
|
||||
subtitle={t("pages.statusPages.form.monitors.description")}
|
||||
rightContent={
|
||||
<Controller
|
||||
name="monitors"
|
||||
control={control}
|
||||
render={({ field, fieldState }) => {
|
||||
const selectedMonitors = field.value
|
||||
.map((id: string) => monitors.find((m) => m.id === id))
|
||||
.filter((m): m is Monitor => m !== undefined);
|
||||
|
||||
const handleDragEnd = (result: DropResult) => {
|
||||
if (!result.destination) return;
|
||||
const reordered = Array.from(field.value);
|
||||
const [removed] = reordered.splice(result.source.index, 1);
|
||||
reordered.splice(result.destination.index, 0, removed);
|
||||
field.onChange(reordered);
|
||||
};
|
||||
|
||||
return (
|
||||
<Stack spacing={theme.spacing(LAYOUT.MD)}>
|
||||
<Autocomplete
|
||||
multiple
|
||||
options={monitors}
|
||||
getOptionLabel={(option: Monitor) => option.name}
|
||||
value={selectedMonitors}
|
||||
onChange={(_, newValue) => {
|
||||
field.onChange(newValue.map((m: Monitor) => m.id));
|
||||
}}
|
||||
fieldLabel={t(
|
||||
"pages.statusPages.form.monitors.option.monitors.label"
|
||||
)}
|
||||
renderInput={(params) => (
|
||||
<TextField
|
||||
{...params}
|
||||
placeholder={
|
||||
selectedMonitors.length === 0
|
||||
? t(
|
||||
"pages.statusPages.form.monitors.option.monitors.placeholder"
|
||||
)
|
||||
: ""
|
||||
}
|
||||
error={!!fieldState.error}
|
||||
helperText={fieldState.error?.message}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{selectedMonitors.length > 0 && (
|
||||
<DragDropContext onDragEnd={handleDragEnd}>
|
||||
<Droppable droppableId="monitors-list">
|
||||
{(provided) => (
|
||||
<Stack
|
||||
{...provided.droppableProps}
|
||||
ref={provided.innerRef}
|
||||
>
|
||||
{selectedMonitors.map((monitor, index) => (
|
||||
<Draggable
|
||||
key={monitor.id}
|
||||
draggableId={monitor.id}
|
||||
index={index}
|
||||
>
|
||||
{(provided) => (
|
||||
<Stack
|
||||
ref={provided.innerRef}
|
||||
{...provided.draggableProps}
|
||||
{...provided.dragHandleProps}
|
||||
direction="row"
|
||||
alignItems="center"
|
||||
spacing={theme.spacing(LAYOUT.XS)}
|
||||
padding={theme.spacing(LAYOUT.XS)}
|
||||
marginTop={theme.spacing(SPACING.LG)}
|
||||
borderRadius={1}
|
||||
sx={{
|
||||
border: `1px solid ${theme.palette.divider}`,
|
||||
cursor: "grab",
|
||||
"&:active": { cursor: "grabbing" },
|
||||
}}
|
||||
>
|
||||
<GripVertical size={20} />
|
||||
<Typography
|
||||
flexGrow={1}
|
||||
>{`${monitor.name} (${getMonitorTypeLabel(monitor.type, t)})`}</Typography>
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => {
|
||||
field.onChange(
|
||||
field.value.filter(
|
||||
(id: string) => id !== monitor.id
|
||||
)
|
||||
);
|
||||
}}
|
||||
aria-label="Remove monitor"
|
||||
>
|
||||
<Trash2 size={16} />
|
||||
</IconButton>
|
||||
</Stack>
|
||||
)}
|
||||
</Draggable>
|
||||
))}
|
||||
{provided.placeholder}
|
||||
</Stack>
|
||||
)}
|
||||
</Droppable>
|
||||
</DragDropContext>
|
||||
)}
|
||||
</Stack>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{showStep(0) && (
|
||||
<ConfigBox
|
||||
title={t("pages.statusPages.form.timezone.title")}
|
||||
subtitle={t("pages.statusPages.form.timezone.description")}
|
||||
rightContent={
|
||||
<Controller
|
||||
name="timezone"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<Autocomplete
|
||||
options={timezones}
|
||||
getOptionLabel={(option: TimezoneOption) => option.name}
|
||||
value={
|
||||
timezones.find((tz: TimezoneOption) => tz._id === field.value) ?? null
|
||||
}
|
||||
onChange={(_, newValue: TimezoneOption | null) => {
|
||||
field.onChange(newValue?._id ?? "");
|
||||
}}
|
||||
fieldLabel={t("pages.statusPages.form.timezone.option.timezone.label")}
|
||||
renderInput={(params) => (
|
||||
<TextField
|
||||
{...params}
|
||||
placeholder={t(
|
||||
"pages.statusPages.form.timezone.option.timezone.placeholder"
|
||||
)}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{showStep(0) && (
|
||||
<ConfigBox
|
||||
title={t("pages.statusPages.form.basicInfo.title")}
|
||||
subtitle={t("pages.statusPages.form.basicInfo.description")}
|
||||
rightContent={
|
||||
<Stack spacing={theme.spacing(LAYOUT.MD)}>
|
||||
<FormTextField
|
||||
name="companyName"
|
||||
fieldLabel={t("pages.statusPages.form.basicInfo.option.name.label")}
|
||||
placeholder={t(
|
||||
"pages.statusPages.form.basicInfo.option.name.placeholder"
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{showStep(1) && (
|
||||
<ConfigBox
|
||||
title={t("pages.statusPages.form.appearance.title")}
|
||||
subtitle={t("pages.statusPages.form.appearance.description")}
|
||||
rightContent={
|
||||
<Stack spacing={theme.spacing(LAYOUT.MD)}>
|
||||
<Stack alignItems={"center"}>
|
||||
<Controller
|
||||
name="logo"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<ImageUpload
|
||||
src={field.value?.data}
|
||||
onChange={(file) => {
|
||||
if (file) {
|
||||
field.onChange({
|
||||
data: file.src,
|
||||
contentType: file.file.type,
|
||||
});
|
||||
} else {
|
||||
field.onChange(null);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
<FormTextField
|
||||
name="url"
|
||||
fieldLabel={t("pages.statusPages.form.basicInfo.option.url.label")}
|
||||
placeholder={t(
|
||||
"pages.statusPages.form.basicInfo.option.url.placeholder"
|
||||
)}
|
||||
/>
|
||||
<FormTextField
|
||||
name="customDomain"
|
||||
fieldLabel={t(
|
||||
"pages.statusPages.form.basicInfo.option.customDomain.label"
|
||||
)}
|
||||
placeholder={t(
|
||||
"pages.statusPages.form.basicInfo.option.customDomain.placeholder"
|
||||
)}
|
||||
helperText={t(
|
||||
"pages.statusPages.form.basicInfo.option.customDomain.helper"
|
||||
)}
|
||||
/>
|
||||
</Stack>
|
||||
<Controller
|
||||
name="color"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<ColorInput
|
||||
format="hex"
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
fieldLabel={t("pages.statusPages.form.appearance.option.color.label")}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{showStep(0) && (
|
||||
<ConfigBox
|
||||
title={t("pages.statusPages.form.monitors.title")}
|
||||
subtitle={t("pages.statusPages.form.monitors.description")}
|
||||
rightContent={
|
||||
<FormMultiSelectField
|
||||
sortable
|
||||
name="monitors"
|
||||
fieldLabel={t("pages.statusPages.form.monitors.option.monitors.label")}
|
||||
placeholder={t(
|
||||
"pages.statusPages.form.monitors.option.monitors.placeholder"
|
||||
)}
|
||||
options={monitors}
|
||||
renderOptionContent={(monitor) => (
|
||||
<Stack
|
||||
direction="row"
|
||||
alignItems="center"
|
||||
gap={theme.spacing(2)}
|
||||
flexWrap="wrap"
|
||||
>
|
||||
<Typography>
|
||||
{`${monitor.name} (${getMonitorTypeLabel(monitor.type, t)})`}
|
||||
</Typography>
|
||||
{monitor.tags.map((tagId) => {
|
||||
const tag = tags.find(({ id }) => id === tagId);
|
||||
return tag ? (
|
||||
<ColoredLabel
|
||||
key={tag.id}
|
||||
text={tag.name}
|
||||
color={tag.color}
|
||||
/>
|
||||
) : null;
|
||||
})}
|
||||
</Stack>
|
||||
)}
|
||||
renderRow={(monitor) => (
|
||||
<Typography flexGrow={1}>
|
||||
{`${monitor.name} (${getMonitorTypeLabel(monitor.type, t)})`}
|
||||
</Typography>
|
||||
)}
|
||||
/>
|
||||
</Stack>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{showStep(1) && (
|
||||
<ConfigBox
|
||||
title={t("pages.statusPages.form.theme.title")}
|
||||
subtitle={t("pages.statusPages.form.theme.description")}
|
||||
rightContent={
|
||||
<Controller
|
||||
name="theme"
|
||||
control={control}
|
||||
render={({ field: themeField }) => (
|
||||
<Controller
|
||||
name="themeMode"
|
||||
control={control}
|
||||
render={({ field: modeField }) => (
|
||||
<ThemePicker
|
||||
theme={themeField.value ?? "refined"}
|
||||
themeMode={modeField.value ?? "auto"}
|
||||
onThemeChange={themeField.onChange}
|
||||
onThemeModeChange={modeField.onChange}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{showStep(0) && (
|
||||
<ConfigBox
|
||||
title={t("pages.statusPages.form.timezone.title")}
|
||||
subtitle={t("pages.statusPages.form.timezone.description")}
|
||||
rightContent={
|
||||
<FormAutocompleteField
|
||||
name="timezone"
|
||||
options={timezoneOptions}
|
||||
fieldLabel={t("pages.statusPages.form.timezone.option.timezone.label")}
|
||||
placeholder={t(
|
||||
"pages.statusPages.form.timezone.option.timezone.placeholder"
|
||||
)}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{showStep(1) && (
|
||||
<ConfigBox
|
||||
title={t("pages.statusPages.form.appearance.title")}
|
||||
subtitle={t("pages.statusPages.form.appearance.description")}
|
||||
rightContent={
|
||||
<Stack spacing={theme.spacing(LAYOUT.MD)}>
|
||||
<Stack alignItems={"center"}>
|
||||
<LogoUploadField />
|
||||
</Stack>
|
||||
<FormColorField
|
||||
name="color"
|
||||
fieldLabel={t("pages.statusPages.form.appearance.option.color.label")}
|
||||
/>
|
||||
</Stack>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{showStep(1) && (
|
||||
<ConfigBox
|
||||
title={t("pages.statusPages.form.theme.title")}
|
||||
subtitle={t("pages.statusPages.form.theme.description")}
|
||||
rightContent={<ThemePickerField />}
|
||||
/>
|
||||
)}
|
||||
{showStep(1) && (
|
||||
<ConfigBox
|
||||
title={t("pages.statusPages.form.customCSS.title")}
|
||||
subtitle={t("pages.statusPages.form.customCSS.description")}
|
||||
rightContent={
|
||||
<FormTextField
|
||||
name="customCSS"
|
||||
multiline
|
||||
rows={8}
|
||||
fieldLabel={t("pages.statusPages.form.customCSS.option.customCSS.label")}
|
||||
placeholder={t(
|
||||
"pages.statusPages.form.customCSS.option.customCSS.placeholder"
|
||||
)}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{showStep(1) && (
|
||||
<ConfigBox
|
||||
title={t("pages.statusPages.form.features.title")}
|
||||
subtitle={t("pages.statusPages.form.features.description")}
|
||||
rightContent={
|
||||
<Stack spacing={theme.spacing(LAYOUT.MD)}>
|
||||
<FormCheckboxField
|
||||
name="showCharts"
|
||||
label={t("pages.statusPages.form.features.option.showCharts.label")}
|
||||
/>
|
||||
<FormCheckboxField
|
||||
name="showInfrastructure"
|
||||
label={t(
|
||||
"pages.statusPages.form.features.option.showInfrastructure.label"
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{showStep(1) && (
|
||||
<ConfigBox
|
||||
title={t("pages.statusPages.form.customCSS.title")}
|
||||
subtitle={t("pages.statusPages.form.customCSS.description")}
|
||||
rightContent={
|
||||
<Controller
|
||||
name="customCSS"
|
||||
control={control}
|
||||
render={({ field, fieldState }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
multiline
|
||||
rows={8}
|
||||
fieldLabel={t(
|
||||
"pages.statusPages.form.customCSS.option.customCSS.label"
|
||||
)}
|
||||
placeholder={t(
|
||||
"pages.statusPages.form.customCSS.option.customCSS.placeholder"
|
||||
)}
|
||||
error={!!fieldState.error}
|
||||
helperText={fieldState.error?.message}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{showStep(1) && (
|
||||
<ConfigBox
|
||||
title={t("pages.statusPages.form.features.title")}
|
||||
subtitle={t("pages.statusPages.form.features.description")}
|
||||
rightContent={
|
||||
<Stack spacing={theme.spacing(LAYOUT.MD)}>
|
||||
<Controller
|
||||
name="showCharts"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
checked={field.value}
|
||||
onChange={field.onChange}
|
||||
/>
|
||||
}
|
||||
label={t("pages.statusPages.form.features.option.showCharts.label")}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="showInfrastructure"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
checked={field.value}
|
||||
onChange={field.onChange}
|
||||
/>
|
||||
}
|
||||
label={t(
|
||||
"pages.statusPages.form.features.option.showInfrastructure.label"
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{/* <Controller
|
||||
name="showUptimePercentage"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
checked={field.value}
|
||||
onChange={field.onChange}
|
||||
/>
|
||||
}
|
||||
{/*
|
||||
<FormCheckboxField
|
||||
name="showUptimePercentage"
|
||||
label={t(
|
||||
"pages.statusPages.form.features.option.showUptimePercentage.label"
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="showAdminLoginLink"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
checked={field.value}
|
||||
onChange={field.onChange}
|
||||
/>
|
||||
}
|
||||
|
||||
<FormCheckboxField
|
||||
name="showAdminLoginLink"
|
||||
label={t(
|
||||
"pages.statusPages.form.features.option.showAdminLoginLink.label"
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
/> */}
|
||||
</Stack>
|
||||
}
|
||||
/> */}
|
||||
</Stack>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
<Stack
|
||||
direction="row"
|
||||
justifyContent={isCreate ? "space-between" : "flex-end"}
|
||||
>
|
||||
{isCreate && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="outlined"
|
||||
color="secondary"
|
||||
disabled={currentStep === 0}
|
||||
onClick={handleBack}
|
||||
>
|
||||
{t("common.buttons.back")}
|
||||
</Button>
|
||||
)}
|
||||
{isCreate && currentStep < totalSteps - 1 ? (
|
||||
<Button
|
||||
key="wizard-next"
|
||||
type="button"
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={handleNext}
|
||||
>
|
||||
{t("common.buttons.next")}
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
key="wizard-save"
|
||||
loading={isSubmitting}
|
||||
type="submit"
|
||||
variant="contained"
|
||||
color="primary"
|
||||
>
|
||||
{t("common.buttons.save")}
|
||||
</Button>
|
||||
)}
|
||||
</Stack>
|
||||
<Dialog
|
||||
open={isDeleteDialogOpen}
|
||||
title={t("common.dialogs.delete.title")}
|
||||
content={t("common.dialogs.delete.description")}
|
||||
onConfirm={handleDeleteConfirm}
|
||||
onCancel={handleDeleteCancel}
|
||||
loading={isDeleting}
|
||||
/>
|
||||
)}
|
||||
<Stack
|
||||
direction="row"
|
||||
justifyContent={isCreate ? "space-between" : "flex-end"}
|
||||
>
|
||||
{isCreate && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="outlined"
|
||||
color="secondary"
|
||||
disabled={currentStep === 0}
|
||||
onClick={handleBack}
|
||||
>
|
||||
{t("common.buttons.back")}
|
||||
</Button>
|
||||
)}
|
||||
{isCreate && currentStep < totalSteps - 1 ? (
|
||||
<Button
|
||||
key="wizard-next"
|
||||
type="button"
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={handleNext}
|
||||
>
|
||||
{t("common.buttons.next")}
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
key="wizard-save"
|
||||
loading={isSubmitting}
|
||||
type="submit"
|
||||
variant="contained"
|
||||
color="primary"
|
||||
>
|
||||
{t("common.buttons.save")}
|
||||
</Button>
|
||||
)}
|
||||
</Stack>
|
||||
<Dialog
|
||||
open={isDeleteDialogOpen}
|
||||
title={t("common.dialogs.delete.title")}
|
||||
content={t("common.dialogs.delete.description")}
|
||||
onConfirm={handleDeleteConfirm}
|
||||
onCancel={handleDeleteCancel}
|
||||
loading={isDeleting}
|
||||
/>
|
||||
</BasePage>
|
||||
</BasePage>
|
||||
</FormProvider>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { BasePage, BaseFallback } from "@/Components/design-elements";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import { Link } from "react-router-dom";
|
||||
import { Link, useSearchParams } from "react-router-dom";
|
||||
import Stack from "@mui/material/Stack";
|
||||
import Box from "@mui/material/Box";
|
||||
|
||||
@@ -9,7 +9,11 @@ import { useTranslation } from "react-i18next";
|
||||
import { useIsAdmin } from "@/Hooks/useIsAdmin";
|
||||
import { useLocation, useParams } from "react-router-dom";
|
||||
import { useGet } from "@/Hooks/UseApi";
|
||||
import { resolveStatusPageTheme } from "@/Types/StatusPage";
|
||||
import {
|
||||
isStatusPageRange,
|
||||
resolveStatusPageTheme,
|
||||
type StatusPageRange,
|
||||
} from "@/Types/StatusPage";
|
||||
import {
|
||||
PUBLIC_STATUS_PAGE_PREFIX,
|
||||
type StatusPageResponse,
|
||||
@@ -80,21 +84,37 @@ const StatusPageView = () => {
|
||||
const { url } = useParams();
|
||||
const isAdmin = useIsAdmin();
|
||||
const location = useLocation();
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
|
||||
const onRangeChange = (next: StatusPageRange) => {
|
||||
const updated = new URLSearchParams(searchParams);
|
||||
if (next === "latest") {
|
||||
updated.delete("range");
|
||||
} else {
|
||||
updated.set("range", next);
|
||||
}
|
||||
setSearchParams(updated, { replace: true });
|
||||
};
|
||||
|
||||
const onCustomDomainHost = isCustomDomainHost();
|
||||
const isPublic =
|
||||
onCustomDomainHost || location.pathname.startsWith(PUBLIC_STATUS_PAGE_PREFIX);
|
||||
|
||||
const rawRange = searchParams.get("range");
|
||||
const range = isStatusPageRange(rawRange) ? rawRange : "latest";
|
||||
|
||||
const apiUrl = buildStatusPageApiPath({
|
||||
url,
|
||||
useCustomDomain: onCustomDomainHost,
|
||||
range,
|
||||
});
|
||||
|
||||
const { data, isLoading, error } = useGet<StatusPageResponse>(
|
||||
apiUrl,
|
||||
{},
|
||||
{
|
||||
refreshInterval: 10000,
|
||||
keepPreviousData: true,
|
||||
refreshInterval: range === "latest" ? 10000 : 60000,
|
||||
}
|
||||
);
|
||||
|
||||
@@ -150,6 +170,10 @@ const StatusPageView = () => {
|
||||
statusPage={statusPage}
|
||||
monitors={monitors}
|
||||
config={themeConfig}
|
||||
range={range}
|
||||
onRangeChange={onRangeChange}
|
||||
bucketTimezone={data.bucketTimezone ?? "Etc/UTC"}
|
||||
checkTTLDays={data.checkTTLDays}
|
||||
/>
|
||||
</StatusPageThemeProvider>
|
||||
);
|
||||
|
||||
@@ -4,8 +4,10 @@ import { type OverallTone, toneColor, toneSoft } from "../shared/overallStatus";
|
||||
import { BOLD_SANS_STACK, MONO_STACK } from "../shared/fontStacks";
|
||||
import { MAX_RECENT_CHECKS } from "@/Types/Monitor";
|
||||
|
||||
export type BoldHeatCell = "fast" | "med" | "slow" | "down" | "empty";
|
||||
export type BoldBarKind = "up" | "down" | "empty";
|
||||
import type { BarKind, HeatCellKind } from "../shared/ChartCells";
|
||||
|
||||
export type BoldHeatCell = HeatCellKind;
|
||||
export type BoldBarKind = BarKind;
|
||||
export type BoldGaugeFill = "ok" | "warm" | "hot";
|
||||
|
||||
export interface BoldStyles {
|
||||
@@ -55,6 +57,7 @@ export const boldStyles = (
|
||||
fast: tokens.up,
|
||||
med: `color-mix(in srgb, ${tokens.up} 70%, #ffffff 30%)`,
|
||||
slow: tokens.warn,
|
||||
degraded: tokens.degraded,
|
||||
down: tokens.down,
|
||||
empty: tokens.border,
|
||||
};
|
||||
@@ -62,12 +65,14 @@ export const boldStyles = (
|
||||
fast: `0 0 6px color-mix(in srgb, ${tokens.up} 18%, transparent)`,
|
||||
med: `0 0 6px color-mix(in srgb, ${tokens.up} 18%, transparent)`,
|
||||
slow: `0 0 6px color-mix(in srgb, ${tokens.warn} 20%, transparent)`,
|
||||
degraded: `0 0 6px color-mix(in srgb, ${tokens.degraded} 20%, transparent)`,
|
||||
down: `0 0 6px color-mix(in srgb, ${tokens.down} 20%, transparent)`,
|
||||
empty: "none",
|
||||
};
|
||||
|
||||
const barBg: Record<BoldBarKind, string> = {
|
||||
up: tokens.up,
|
||||
degraded: tokens.degraded,
|
||||
down: tokens.down,
|
||||
empty: tokens.border,
|
||||
};
|
||||
|
||||
@@ -8,8 +8,10 @@ import {
|
||||
} from "../shared/fontStacks";
|
||||
import { MAX_RECENT_CHECKS } from "@/Types/Monitor";
|
||||
|
||||
export type EditorialHeatCell = "fast" | "med" | "slow" | "down" | "empty";
|
||||
export type EditorialBarKind = "up" | "down" | "empty";
|
||||
import type { BarKind, HeatCellKind } from "../shared/ChartCells";
|
||||
|
||||
export type EditorialHeatCell = HeatCellKind;
|
||||
export type EditorialBarKind = BarKind;
|
||||
export type EditorialGaugeFill = "ok" | "warm" | "hot";
|
||||
|
||||
export interface EditorialStyles {
|
||||
@@ -59,12 +61,14 @@ export const editorialStyles = (
|
||||
fast: tokens.up,
|
||||
med: `color-mix(in srgb, ${tokens.up} 60%, ${tokens.bg})`,
|
||||
slow: tokens.warn,
|
||||
degraded: tokens.degraded,
|
||||
down: tokens.down,
|
||||
empty: tokens.border,
|
||||
};
|
||||
|
||||
const barBg: Record<EditorialBarKind, string> = {
|
||||
up: tokens.up,
|
||||
degraded: tokens.degraded,
|
||||
down: tokens.down,
|
||||
empty: tokens.border,
|
||||
};
|
||||
|
||||
@@ -5,8 +5,10 @@ import { type OverallTone, toneColor, toneSoft } from "../shared/overallStatus";
|
||||
import { MONO_STACK, SANS_STACK } from "../shared/fontStacks";
|
||||
import { MAX_RECENT_CHECKS } from "@/Types/Monitor";
|
||||
|
||||
export type ModernHeatCell = "fast" | "med" | "slow" | "down" | "empty";
|
||||
export type ModernBarKind = "up" | "down" | "empty";
|
||||
import type { BarKind, HeatCellKind } from "../shared/ChartCells";
|
||||
|
||||
export type ModernHeatCell = HeatCellKind;
|
||||
export type ModernBarKind = BarKind;
|
||||
export type ModernGaugeFill = "ok" | "warm" | "hot";
|
||||
|
||||
export interface ModernStyles {
|
||||
@@ -86,12 +88,14 @@ export const modernStyles = (
|
||||
fast: `linear-gradient(180deg, ${tokens.up}, ${tokens.upStrong})`,
|
||||
med: `linear-gradient(180deg, color-mix(in srgb, ${tokens.up} 70%, #ffffff 30%), ${tokens.up})`,
|
||||
slow: `linear-gradient(180deg, ${tokens.warn}, ${tokens.degraded})`,
|
||||
degraded: `linear-gradient(180deg, ${tokens.degraded}, color-mix(in srgb, ${tokens.degraded} 70%, #000000 30%))`,
|
||||
down: `linear-gradient(180deg, ${tokens.down}, color-mix(in srgb, ${tokens.down} 70%, #000000 30%))`,
|
||||
empty: tokens.border,
|
||||
};
|
||||
|
||||
const barBg: Record<ModernBarKind, string> = {
|
||||
up: tokens.up,
|
||||
degraded: tokens.degraded,
|
||||
down: tokens.down,
|
||||
empty: tokens.border,
|
||||
};
|
||||
|
||||
@@ -3,8 +3,10 @@ import type { StatusPageThemeTokens } from "../tokens";
|
||||
import { type OverallTone, toneColor, toneSoft } from "../shared/overallStatus";
|
||||
import { MONO_STACK, SANS_STACK } from "../shared/fontStacks";
|
||||
|
||||
export type RefinedHeatCell = "fast" | "med" | "slow" | "down" | "empty";
|
||||
export type RefinedBarKind = "up" | "down" | "empty";
|
||||
import type { BarKind, HeatCellKind } from "../shared/ChartCells";
|
||||
|
||||
export type RefinedHeatCell = HeatCellKind;
|
||||
export type RefinedBarKind = BarKind;
|
||||
export type RefinedGaugeFill = "ok" | "warm" | "hot";
|
||||
import { MAX_RECENT_CHECKS } from "@/Types/Monitor";
|
||||
|
||||
@@ -71,12 +73,14 @@ export const refinedStyles = (
|
||||
fast: tokens.up,
|
||||
med: `color-mix(in srgb, ${tokens.up} 60%, #ffffff 40%)`,
|
||||
slow: tokens.warn,
|
||||
degraded: tokens.degraded,
|
||||
down: tokens.down,
|
||||
empty: tokens.border,
|
||||
};
|
||||
|
||||
const barBg: Record<RefinedBarKind, string> = {
|
||||
up: tokens.up,
|
||||
degraded: tokens.degraded,
|
||||
down: tokens.down,
|
||||
empty: tokens.border,
|
||||
};
|
||||
|
||||
@@ -1,20 +1,19 @@
|
||||
import { useMemo, useState } from "react";
|
||||
import Box from "@mui/material/Box";
|
||||
import Stack from "@mui/material/Stack";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import { TriangleAlert } from "lucide-react";
|
||||
|
||||
import type { SxProps, Theme } from "@mui/material/styles";
|
||||
import type { Monitor } from "@/Types/Monitor";
|
||||
import type { StatusPage } from "@/Types/StatusPage";
|
||||
import { getMonitorTypeLabel } from "@/Types/StatusPage";
|
||||
import type { StatusPage, StatusPageRange } from "@/Types/StatusPage";
|
||||
import {
|
||||
getMonitorTypeLabel,
|
||||
STATUS_PAGE_RANGE_DAYS,
|
||||
STATUS_PAGE_RANGES,
|
||||
} from "@/Types/StatusPage";
|
||||
import type { StatusPageThemeTokens } from "@/Pages/StatusPage/Status/themes/tokens";
|
||||
import {
|
||||
ThemedHeatmap,
|
||||
type HeatCellKind,
|
||||
} from "@/Pages/StatusPage/Status/themes/shared/ThemedHeatmap";
|
||||
import {
|
||||
ThemedHistogram,
|
||||
type BarKind,
|
||||
} from "@/Pages/StatusPage/Status/themes/shared/ThemedHistogram";
|
||||
import { ThemedHeatmap } from "@/Pages/StatusPage/Status/themes/shared/ThemedHeatmap";
|
||||
import { ThemedHistogram } from "@/Pages/StatusPage/Status/themes/shared/ThemedHistogram";
|
||||
import {
|
||||
ThemedInfrastructure,
|
||||
type GaugeFillLevel,
|
||||
@@ -26,10 +25,22 @@ import {
|
||||
resolveOverallStatus,
|
||||
statusBadgeKey,
|
||||
} from "@/Pages/StatusPage/Status/themes/shared/overallStatus";
|
||||
import { useStatusPageTheme } from "@/Pages/StatusPage/Status/themes/StatusPageThemeProvider";
|
||||
import { formatPercentage } from "@/Utils/FormatUtils";
|
||||
import {
|
||||
checksToCells,
|
||||
dailyBucketsToCells,
|
||||
type BarKind,
|
||||
type HeatCellKind,
|
||||
} from "@/Pages/StatusPage/Status/themes/shared/ChartCells";
|
||||
import { LAYOUT } from "@/Utils/Theme/constants";
|
||||
import { Icon } from "@/Components/design-elements";
|
||||
|
||||
type StatusPageMonitor = Monitor & { checks?: Monitor["recentChecks"] };
|
||||
import { useStatusPageTheme } from "@/Pages/StatusPage/Status/themes/StatusPageThemeProvider";
|
||||
import { useMemo, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useTheme } from "@mui/material";
|
||||
|
||||
type StatusPageMonitor = Monitor;
|
||||
|
||||
export interface BaseStyles {
|
||||
page: SxProps<Theme>;
|
||||
@@ -82,9 +93,22 @@ interface Props {
|
||||
statusPage: StatusPage;
|
||||
monitors: StatusPageMonitor[];
|
||||
config: ThemeConfig<any>;
|
||||
range: StatusPageRange;
|
||||
onRangeChange: (range: StatusPageRange) => void;
|
||||
bucketTimezone: string;
|
||||
checkTTLDays?: number;
|
||||
}
|
||||
|
||||
export const BaseStatusPage = ({ statusPage, monitors, config }: Props) => {
|
||||
export const BaseStatusPage = ({
|
||||
statusPage,
|
||||
monitors,
|
||||
config,
|
||||
range,
|
||||
onRangeChange,
|
||||
bucketTimezone,
|
||||
checkTTLDays,
|
||||
}: Props) => {
|
||||
const theme = useTheme();
|
||||
const { t } = useTranslation();
|
||||
const { tokens, mode } = useStatusPageTheme();
|
||||
const styles = useMemo(
|
||||
@@ -126,33 +150,75 @@ export const BaseStatusPage = ({ statusPage, monitors, config }: Props) => {
|
||||
/>
|
||||
|
||||
{statusPage.showCharts && (
|
||||
<Box sx={styles.chartSwitchWrap}>
|
||||
<Box
|
||||
sx={styles.chartSwitch}
|
||||
role="radiogroup"
|
||||
>
|
||||
<Stack>
|
||||
<Box sx={styles.chartSwitchWrap}>
|
||||
<Box
|
||||
component="button"
|
||||
type="button"
|
||||
role="radio"
|
||||
aria-checked={chartMode === "heatmap"}
|
||||
onClick={() => setChartMode("heatmap")}
|
||||
sx={styles.chartSwitchButton(chartMode === "heatmap")}
|
||||
sx={styles.chartSwitch}
|
||||
role="radiogroup"
|
||||
>
|
||||
{t("pages.statusPages.monitorsList.chartTypeHeatmap")}
|
||||
</Box>
|
||||
<Box
|
||||
component="button"
|
||||
type="button"
|
||||
role="radio"
|
||||
aria-checked={chartMode === "histogram"}
|
||||
onClick={() => setChartMode("histogram")}
|
||||
sx={styles.chartSwitchButton(chartMode === "histogram")}
|
||||
>
|
||||
{t("pages.statusPages.monitorsList.chartTypeHistogram")}
|
||||
<Box
|
||||
component="button"
|
||||
type="button"
|
||||
role="radio"
|
||||
aria-checked={chartMode === "heatmap"}
|
||||
onClick={() => setChartMode("heatmap")}
|
||||
sx={styles.chartSwitchButton(chartMode === "heatmap")}
|
||||
>
|
||||
{t("pages.statusPages.monitorsList.chartTypeHeatmap")}
|
||||
</Box>
|
||||
<Box
|
||||
component="button"
|
||||
type="button"
|
||||
role="radio"
|
||||
aria-checked={chartMode === "histogram"}
|
||||
onClick={() => setChartMode("histogram")}
|
||||
sx={styles.chartSwitchButton(chartMode === "histogram")}
|
||||
>
|
||||
{t("pages.statusPages.monitorsList.chartTypeHistogram")}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box sx={styles.chartSwitchWrap}>
|
||||
<Box
|
||||
sx={styles.chartSwitch}
|
||||
role="radiogroup"
|
||||
aria-label={t("pages.statusPages.rangeSelectorAria")}
|
||||
>
|
||||
{STATUS_PAGE_RANGES.map((value) => (
|
||||
<Box
|
||||
component="button"
|
||||
type="button"
|
||||
role="radio"
|
||||
key={value}
|
||||
aria-checked={range === value}
|
||||
onClick={() => onRangeChange(value)}
|
||||
sx={styles.chartSwitchButton(range === value)}
|
||||
>
|
||||
{t(`pages.statusPages.range.${value}`)}
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
{range !== "latest" &&
|
||||
checkTTLDays &&
|
||||
STATUS_PAGE_RANGE_DAYS[range] > checkTTLDays && (
|
||||
<Stack
|
||||
mb={LAYOUT.XS}
|
||||
alignSelf="flex-end"
|
||||
direction="row"
|
||||
alignItems="center"
|
||||
gap={LAYOUT.XXS}
|
||||
>
|
||||
<Icon
|
||||
icon={TriangleAlert}
|
||||
color={theme.palette.warning.main}
|
||||
/>
|
||||
<Typography>
|
||||
{t("pages.statusPages.rangeExceedsRetention", { days: checkTTLDays })}
|
||||
</Typography>
|
||||
</Stack>
|
||||
)}
|
||||
</Stack>
|
||||
)}
|
||||
|
||||
<Stack
|
||||
@@ -166,6 +232,16 @@ export const BaseStatusPage = ({ statusPage, monitors, config }: Props) => {
|
||||
const badgeTone = monitorBadgeTone(monitor.status);
|
||||
const uptimePercentage = formatPercentage(monitor.uptimePercentage ?? 0);
|
||||
|
||||
const cells =
|
||||
range === "latest"
|
||||
? checksToCells(monitor.recentChecks ?? [])
|
||||
: dailyBucketsToCells(
|
||||
monitor.dailyChecks ?? [],
|
||||
STATUS_PAGE_RANGE_DAYS[range],
|
||||
bucketTimezone,
|
||||
t
|
||||
);
|
||||
|
||||
return (
|
||||
<Box
|
||||
component="li"
|
||||
@@ -226,13 +302,13 @@ export const BaseStatusPage = ({ statusPage, monitors, config }: Props) => {
|
||||
{showChart &&
|
||||
(chartMode === "heatmap" ? (
|
||||
<ThemedHeatmap
|
||||
checks={monitor.recentChecks ?? []}
|
||||
cells={cells}
|
||||
containerSx={styles.heatmap}
|
||||
cellSx={styles.heatmapCell}
|
||||
/>
|
||||
) : (
|
||||
<ThemedHistogram
|
||||
checks={monitor.recentChecks ?? []}
|
||||
cells={cells}
|
||||
containerSx={styles.histogram}
|
||||
barSx={styles.bar}
|
||||
statsSx={styles.chartStats}
|
||||
|
||||
@@ -0,0 +1,113 @@
|
||||
import {
|
||||
ThemedChartTooltip,
|
||||
ThemedDailyTooltip,
|
||||
} from "@/Pages/StatusPage/Status/themes/shared/ThemedChartTooltip";
|
||||
import type { CheckSnapshot, DailyCheckBucket } from "@/Types/Check";
|
||||
import { MAX_RECENT_CHECKS } from "@/Types/Monitor";
|
||||
import {
|
||||
computeBarHeights,
|
||||
computeDayBarHeights,
|
||||
MIN_HEIGHT_PCT,
|
||||
} from "@/Utils/DataUtils";
|
||||
import { formatPercentage } from "@/Utils/FormatUtils";
|
||||
import { enumerateDays, formatMs } from "@/Utils/TimeUtils";
|
||||
import type { TFunction } from "i18next";
|
||||
|
||||
export type BarKind = "up" | "degraded" | "down" | "empty";
|
||||
export type HeatCellKind = "fast" | "med" | "slow" | "degraded" | "down" | "empty";
|
||||
|
||||
export interface ChartCell {
|
||||
key: string;
|
||||
barKind: BarKind;
|
||||
heatKind: HeatCellKind;
|
||||
heightPct: number; // histogram bar height
|
||||
responseTime: number; // 0 for empty cells
|
||||
tooltip: React.ReactNode | null;
|
||||
ariaLabel: string;
|
||||
}
|
||||
|
||||
const DAY_DOWN_THRESHOLD = 0.5;
|
||||
|
||||
const classifyDay = (bucket: DailyCheckBucket): BarKind => {
|
||||
if (bucket.totalChecks === 0) return "empty";
|
||||
const upRatio = bucket.upChecks / bucket.totalChecks;
|
||||
if (upRatio >= 1) return "up";
|
||||
if (upRatio < DAY_DOWN_THRESHOLD) return "down";
|
||||
return "degraded";
|
||||
};
|
||||
|
||||
export const classifyResponseTime = (
|
||||
status: boolean,
|
||||
responseTime: number | undefined
|
||||
): Exclude<HeatCellKind, "empty"> => {
|
||||
if (!status) return "down";
|
||||
const rt = responseTime ?? 0;
|
||||
if (rt > 500) return "slow";
|
||||
if (rt > 250) return "med";
|
||||
return "fast";
|
||||
};
|
||||
|
||||
const emptyCell = (key: string): ChartCell => ({
|
||||
key,
|
||||
barKind: "empty",
|
||||
heatKind: "empty",
|
||||
heightPct: MIN_HEIGHT_PCT,
|
||||
responseTime: 0,
|
||||
tooltip: null,
|
||||
ariaLabel: "",
|
||||
});
|
||||
|
||||
const padCells = (cells: ChartCell[], length: number): ChartCell[] => [
|
||||
...cells,
|
||||
...Array.from({ length: Math.max(0, length - cells.length) }, (_, i) =>
|
||||
emptyCell(`empty-${cells.length + i}`)
|
||||
),
|
||||
];
|
||||
|
||||
export const checksToCells = (checks: CheckSnapshot[]): ChartCell[] => {
|
||||
const source = checks.slice(-MAX_RECENT_CHECKS);
|
||||
const heights = computeBarHeights(source);
|
||||
const cells = source.map(
|
||||
(check, i): ChartCell => ({
|
||||
key: check.id ?? String(i),
|
||||
barKind: check.status ? "up" : "down",
|
||||
heatKind: classifyResponseTime(check.status, check.responseTime),
|
||||
heightPct: heights[i] ?? MIN_HEIGHT_PCT,
|
||||
responseTime: check.responseTime ?? 0,
|
||||
tooltip: <ThemedChartTooltip check={check} />,
|
||||
ariaLabel: `${formatMs(check.responseTime)}, ${check.status ? "up" : "down"}`,
|
||||
})
|
||||
);
|
||||
return padCells(cells, MAX_RECENT_CHECKS);
|
||||
};
|
||||
|
||||
export const dailyBucketsToCells = (
|
||||
buckets: DailyCheckBucket[],
|
||||
days: number,
|
||||
bucketTimezone: string,
|
||||
t: TFunction
|
||||
): ChartCell[] => {
|
||||
const byDate = new Map(buckets.map((b) => [b.date, b]));
|
||||
const heights = computeDayBarHeights(buckets);
|
||||
const enumerated = enumerateDays(days, bucketTimezone);
|
||||
return enumerated.map((date) => {
|
||||
const bucket = byDate.get(date);
|
||||
if (!bucket) return emptyCell(`day-${date}`);
|
||||
const barKind = classifyDay(bucket);
|
||||
return {
|
||||
key: `day-${date}`,
|
||||
barKind,
|
||||
heatKind:
|
||||
barKind === "up"
|
||||
? classifyResponseTime(true, bucket.avgResponseTime ?? 0)
|
||||
: barKind,
|
||||
heightPct: heights.get(date) ?? MIN_HEIGHT_PCT,
|
||||
responseTime: bucket.avgResponseTime ?? 0,
|
||||
tooltip: <ThemedDailyTooltip bucket={bucket} />,
|
||||
ariaLabel: t("pages.statusPages.monitorsList.chart.dayAria", {
|
||||
date,
|
||||
uptime: formatPercentage(bucket.upChecks / bucket.totalChecks),
|
||||
}),
|
||||
};
|
||||
});
|
||||
};
|
||||
@@ -0,0 +1,64 @@
|
||||
import type { CheckSnapshot, DailyCheckBucket } from "@/Types/Check";
|
||||
import Stack from "@mui/material/Stack";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import { formatDateWithTz, formatMs } from "@/Utils/TimeUtils";
|
||||
import { formatPercentage } from "@/Utils/FormatUtils";
|
||||
import { useStatusPageTheme } from "@/Pages/StatusPage/Status/themes/StatusPageThemeProvider";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
export const ThemedChartTooltip = ({ check }: { check: CheckSnapshot }) => {
|
||||
const { t } = useTranslation();
|
||||
const { timezone } = useStatusPageTheme();
|
||||
return (
|
||||
<Stack gap={0.25}>
|
||||
<Typography
|
||||
variant="caption"
|
||||
fontWeight={600}
|
||||
>
|
||||
{check.status
|
||||
? formatMs(check.responseTime)
|
||||
: t("pages.statusPages.monitorsList.chart.downTooltip")}
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="caption"
|
||||
sx={{ opacity: 0.8 }}
|
||||
>
|
||||
{formatDateWithTz(check.createdAt, "ddd, MMMM D, YYYY, HH:mm A", timezone)}
|
||||
</Typography>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
export const ThemedDailyTooltip = ({ bucket }: { bucket: DailyCheckBucket }) => {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<Stack gap={0.25}>
|
||||
<Typography
|
||||
variant="caption"
|
||||
fontWeight={600}
|
||||
>
|
||||
{bucket.date}
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="caption"
|
||||
sx={{ opacity: 0.8 }}
|
||||
>
|
||||
{t("pages.statusPages.monitorsList.chart.dayUptime", {
|
||||
uptime: formatPercentage(bucket.upChecks / bucket.totalChecks),
|
||||
upChecks: bucket.upChecks.toLocaleString(),
|
||||
totalChecks: bucket.totalChecks.toLocaleString(),
|
||||
})}
|
||||
</Typography>
|
||||
{bucket.avgResponseTime !== null && (
|
||||
<Typography
|
||||
variant="caption"
|
||||
sx={{ opacity: 0.8 }}
|
||||
>
|
||||
{t("pages.statusPages.monitorsList.chart.dayAvgResponse", {
|
||||
value: formatMs(bucket.avgResponseTime),
|
||||
})}
|
||||
</Typography>
|
||||
)}
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
@@ -1,86 +1,49 @@
|
||||
import Tooltip from "@mui/material/Tooltip";
|
||||
import Box from "@mui/material/Box";
|
||||
import Stack from "@mui/material/Stack";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import type { SxProps, Theme } from "@mui/material/styles";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import type { CheckSnapshot } from "@/Types/Check";
|
||||
import { formatDateWithTz } from "@/Utils/TimeUtils";
|
||||
import { MAX_RECENT_CHECKS } from "@/Types/Monitor";
|
||||
import { useStatusPageTheme } from "../StatusPageThemeProvider";
|
||||
|
||||
const CELLS = MAX_RECENT_CHECKS;
|
||||
|
||||
export type HeatCellKind = "fast" | "med" | "slow" | "down" | "empty";
|
||||
import type {
|
||||
ChartCell,
|
||||
HeatCellKind,
|
||||
} from "@/Pages/StatusPage/Status/themes/shared/ChartCells";
|
||||
|
||||
interface Props {
|
||||
checks: CheckSnapshot[];
|
||||
cells: ChartCell[];
|
||||
containerSx: SxProps<Theme>;
|
||||
cellSx: (kind: HeatCellKind) => SxProps<Theme>;
|
||||
}
|
||||
|
||||
const classify = (check: CheckSnapshot): Exclude<HeatCellKind, "empty"> => {
|
||||
if (!check.status) return "down";
|
||||
const rt = check.responseTime ?? 0;
|
||||
if (rt > 500) return "slow";
|
||||
if (rt > 250) return "med";
|
||||
return "fast";
|
||||
};
|
||||
|
||||
export const ThemedHeatmap = ({ checks, containerSx, cellSx }: Props) => {
|
||||
export const ThemedHeatmap = ({ cells, containerSx, cellSx }: Props) => {
|
||||
const { t } = useTranslation();
|
||||
const { timezone } = useStatusPageTheme();
|
||||
|
||||
const source = checks.slice(-CELLS);
|
||||
const padded: (CheckSnapshot | null)[] = [
|
||||
...source,
|
||||
...Array.from({ length: Math.max(0, CELLS - source.length) }, () => null),
|
||||
];
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={containerSx}
|
||||
sx={[
|
||||
...(Array.isArray(containerSx) ? containerSx : [containerSx]),
|
||||
{ gridTemplateColumns: `repeat(${cells.length}, 1fr)` },
|
||||
]}
|
||||
role="img"
|
||||
aria-label={t("pages.statusPages.monitorsList.chart.heatmapAria")}
|
||||
>
|
||||
{padded.map((check, i) => {
|
||||
if (!check) {
|
||||
{cells.map((cell) => {
|
||||
if (cell.heatKind === "empty") {
|
||||
return (
|
||||
<Box
|
||||
key={`empty-${i}`}
|
||||
key={cell.key}
|
||||
sx={cellSx("empty")}
|
||||
/>
|
||||
);
|
||||
}
|
||||
const kind = classify(check);
|
||||
const tooltipContent = (
|
||||
<Stack gap={0.25}>
|
||||
<Typography
|
||||
variant="caption"
|
||||
fontWeight={600}
|
||||
>
|
||||
{check.status
|
||||
? `${check.responseTime} ms`
|
||||
: t("pages.statusPages.monitorsList.chart.downTooltip")}
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="caption"
|
||||
sx={{ opacity: 0.8 }}
|
||||
>
|
||||
{formatDateWithTz(check.createdAt, "ddd, MMMM D, YYYY, HH:mm A", timezone)}
|
||||
</Typography>
|
||||
</Stack>
|
||||
);
|
||||
return (
|
||||
<Tooltip
|
||||
key={check.id ?? i}
|
||||
title={tooltipContent}
|
||||
key={cell.key}
|
||||
title={cell.tooltip}
|
||||
arrow
|
||||
placement="top"
|
||||
>
|
||||
<Box
|
||||
sx={cellSx(kind)}
|
||||
aria-label={`${check.responseTime} ms, ${check.status ? "up" : "down"}`}
|
||||
sx={cellSx(cell.heatKind)}
|
||||
aria-label={cell.ariaLabel}
|
||||
/>
|
||||
</Tooltip>
|
||||
);
|
||||
|
||||
@@ -2,101 +2,67 @@ import { useMemo } from "react";
|
||||
import Tooltip from "@mui/material/Tooltip";
|
||||
import Box from "@mui/material/Box";
|
||||
import Stack from "@mui/material/Stack";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import type { SxProps, Theme } from "@mui/material/styles";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import type { CheckSnapshot } from "@/Types/Check";
|
||||
import { formatDateWithTz } from "@/Utils/TimeUtils";
|
||||
import { MAX_RECENT_CHECKS } from "@/Types/Monitor";
|
||||
import { useStatusPageTheme } from "../StatusPageThemeProvider";
|
||||
const CELLS = MAX_RECENT_CHECKS;
|
||||
const MIN_HEIGHT_PCT = 6;
|
||||
|
||||
export type BarKind = "up" | "down" | "empty";
|
||||
import { formatMs } from "@/Utils/TimeUtils";
|
||||
import type {
|
||||
BarKind,
|
||||
ChartCell,
|
||||
} from "@/Pages/StatusPage/Status/themes/shared/ChartCells";
|
||||
|
||||
interface Props {
|
||||
checks: CheckSnapshot[];
|
||||
cells: ChartCell[];
|
||||
containerSx: SxProps<Theme>;
|
||||
barSx: (kind: BarKind, heightPct: number) => SxProps<Theme>;
|
||||
statsSx: SxProps<Theme>;
|
||||
statsGap?: number;
|
||||
}
|
||||
|
||||
const tone = (check: CheckSnapshot): Exclude<BarKind, "empty"> =>
|
||||
check.status ? "up" : "down";
|
||||
|
||||
export const ThemedHistogram = ({
|
||||
checks,
|
||||
cells,
|
||||
containerSx,
|
||||
barSx,
|
||||
statsSx,
|
||||
statsGap = 1,
|
||||
}: Props) => {
|
||||
const { t } = useTranslation();
|
||||
const { timezone } = useStatusPageTheme();
|
||||
|
||||
const { padded, max, avg, peak } = useMemo(() => {
|
||||
const source = checks.slice(-CELLS);
|
||||
const out: (CheckSnapshot | null)[] = [
|
||||
...source,
|
||||
...Array.from({ length: Math.max(0, CELLS - source.length) }, () => null),
|
||||
];
|
||||
const valid = out.filter((c): c is CheckSnapshot => c !== null && c.responseTime > 0);
|
||||
const maxRt = valid.length ? Math.max(...valid.map((c) => c.responseTime)) : 1;
|
||||
const { avg, peak } = useMemo(() => {
|
||||
const valid = cells.filter((cell) => cell.responseTime > 0);
|
||||
const maxRt = valid.length ? Math.max(...valid.map((cell) => cell.responseTime)) : 0;
|
||||
const avgRt = valid.length
|
||||
? Math.round(valid.reduce((s, c) => s + c.responseTime, 0) / valid.length)
|
||||
? valid.reduce((sum, cell) => sum + cell.responseTime, 0) / valid.length
|
||||
: 0;
|
||||
return { padded: out, max: maxRt, avg: avgRt, peak: valid.length ? maxRt : 0 };
|
||||
}, [checks]);
|
||||
return { avg: formatMs(avgRt), peak: formatMs(maxRt) };
|
||||
}, [cells]);
|
||||
|
||||
return (
|
||||
<Stack gap={statsGap}>
|
||||
<Box sx={containerSx}>
|
||||
{padded.map((check, i) => {
|
||||
if (!check) {
|
||||
<Box
|
||||
sx={[
|
||||
...(Array.isArray(containerSx) ? containerSx : [containerSx]),
|
||||
{ gridTemplateColumns: `repeat(${cells.length}, 1fr)` },
|
||||
]}
|
||||
>
|
||||
{cells.map((cell) => {
|
||||
if (cell.barKind === "empty") {
|
||||
return (
|
||||
<Box
|
||||
key={`empty-${i}`}
|
||||
sx={barSx("empty", MIN_HEIGHT_PCT)}
|
||||
key={cell.key}
|
||||
sx={barSx("empty", cell.heightPct)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
const height = Math.max(
|
||||
MIN_HEIGHT_PCT,
|
||||
Math.round((check.responseTime / max) * 100)
|
||||
);
|
||||
const tooltipContent = (
|
||||
<Stack gap={0.25}>
|
||||
<Typography
|
||||
variant="caption"
|
||||
fontWeight={600}
|
||||
>
|
||||
{check.status
|
||||
? `${check.responseTime} ms`
|
||||
: t("pages.statusPages.monitorsList.chart.downTooltip")}
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="caption"
|
||||
sx={{ opacity: 0.8 }}
|
||||
>
|
||||
{formatDateWithTz(
|
||||
check.createdAt,
|
||||
"ddd, MMMM D, YYYY, HH:mm A",
|
||||
timezone
|
||||
)}
|
||||
</Typography>
|
||||
</Stack>
|
||||
);
|
||||
return (
|
||||
<Tooltip
|
||||
key={check.id ?? i}
|
||||
title={tooltipContent}
|
||||
key={cell.key}
|
||||
title={cell.tooltip}
|
||||
arrow
|
||||
placement="top"
|
||||
>
|
||||
<Box
|
||||
sx={barSx(tone(check), height)}
|
||||
aria-label={`${check.responseTime} ms`}
|
||||
sx={barSx(cell.barKind, cell.heightPct)}
|
||||
aria-label={cell.ariaLabel}
|
||||
/>
|
||||
</Tooltip>
|
||||
);
|
||||
|
||||
@@ -18,7 +18,7 @@ export interface InfraSx {
|
||||
}
|
||||
|
||||
interface Props {
|
||||
monitor: Monitor & { checks?: Monitor["recentChecks"] };
|
||||
monitor: Monitor;
|
||||
sxApi: InfraSx;
|
||||
}
|
||||
|
||||
@@ -36,7 +36,8 @@ const heatLevel = (value: number): GaugeFillLevel =>
|
||||
|
||||
export const ThemedInfrastructure = ({ monitor, sxApi }: Props) => {
|
||||
const { t } = useTranslation();
|
||||
const latest = monitor.recentChecks?.[0] ?? monitor.checks?.[0];
|
||||
const recentChecks = monitor.recentChecks ?? [];
|
||||
const latest = recentChecks[recentChecks.length - 1];
|
||||
|
||||
const renderEmpty = () => (
|
||||
<Box sx={sxApi.emptySx}>{t("pages.statusPages.monitorsList.noData")}</Box>
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
import { BasePage, ConfigBox } from "@/Components/design-elements";
|
||||
import { TextField, Button, ColorInput } from "@/Components/inputs";
|
||||
import { Button } from "@/Components/inputs";
|
||||
import Stack from "@mui/material/Stack";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
|
||||
import { useEffect } from "react";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import { useForm, FormProvider } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { mutate } from "swr";
|
||||
import { useGet, usePost, usePatch } from "@/Hooks/UseApi";
|
||||
@@ -14,6 +14,8 @@ import type { TagFormData } from "@/Validation/tag";
|
||||
import type { Tag } from "@/Types/Tag";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useTagsForm } from "@/Hooks/useTagsForm";
|
||||
import { FormTextField } from "@/Components/inputs/forms/FormTextField";
|
||||
import { FormColorField } from "@/Components/inputs/forms/FormColorField";
|
||||
|
||||
const TagsCreatePage = () => {
|
||||
const { t } = useTranslation();
|
||||
@@ -34,7 +36,7 @@ const TagsCreatePage = () => {
|
||||
defaultValues: defaults,
|
||||
});
|
||||
|
||||
const { control, reset, handleSubmit } = form;
|
||||
const { reset, handleSubmit } = form;
|
||||
|
||||
useEffect(() => {
|
||||
reset(defaults);
|
||||
@@ -51,67 +53,49 @@ const TagsCreatePage = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<BasePage
|
||||
component="form"
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
>
|
||||
<ConfigBox
|
||||
title={t("pages.tags.form.name.title")}
|
||||
subtitle={t("pages.tags.form.name.description")}
|
||||
rightContent={
|
||||
<Controller
|
||||
name="name"
|
||||
control={control}
|
||||
defaultValue={defaults.name}
|
||||
render={({ field, fieldState }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
type="text"
|
||||
fieldLabel={t("pages.tags.form.name.optionName")}
|
||||
placeholder={t("pages.tags.form.name.placeholder")}
|
||||
fullWidth
|
||||
error={!!fieldState.error}
|
||||
helperText={fieldState.error?.message ?? ""}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<ConfigBox
|
||||
title={t("pages.tags.form.color.title")}
|
||||
subtitle={t("pages.tags.form.color.description")}
|
||||
rightContent={
|
||||
<Controller
|
||||
name="color"
|
||||
control={control}
|
||||
defaultValue={defaults.color}
|
||||
render={({ field }) => (
|
||||
<ColorInput
|
||||
format="hex"
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
fieldLabel={t("pages.tags.form.color.optionName")}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
||||
<Stack
|
||||
direction="row"
|
||||
justifyContent="flex-end"
|
||||
spacing={theme.spacing(2)}
|
||||
<FormProvider {...form}>
|
||||
<BasePage
|
||||
component="form"
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
>
|
||||
<Button
|
||||
loading={isSubmitting || isPatching}
|
||||
type="submit"
|
||||
variant="contained"
|
||||
color="primary"
|
||||
<ConfigBox
|
||||
title={t("pages.tags.form.name.title")}
|
||||
subtitle={t("pages.tags.form.name.description")}
|
||||
rightContent={
|
||||
<FormTextField
|
||||
name="name"
|
||||
fieldLabel={t("pages.tags.form.name.optionName")}
|
||||
placeholder={t("pages.tags.form.name.placeholder")}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<ConfigBox
|
||||
title={t("pages.tags.form.color.title")}
|
||||
subtitle={t("pages.tags.form.color.description")}
|
||||
rightContent={
|
||||
<FormColorField
|
||||
name="color"
|
||||
fieldLabel={t("pages.tags.form.color.optionName")}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
||||
<Stack
|
||||
direction="row"
|
||||
justifyContent="flex-end"
|
||||
spacing={theme.spacing(2)}
|
||||
>
|
||||
{t("common.buttons.save")}
|
||||
</Button>
|
||||
</Stack>
|
||||
</BasePage>
|
||||
<Button
|
||||
loading={isSubmitting || isPatching}
|
||||
type="submit"
|
||||
variant="contained"
|
||||
color="primary"
|
||||
>
|
||||
{t("common.buttons.save")}
|
||||
</Button>
|
||||
</Stack>
|
||||
</BasePage>
|
||||
</FormProvider>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -8,10 +8,9 @@ import Box from "@mui/material/Box";
|
||||
import type { Header } from "@/Components/design-elements";
|
||||
import type { FlatGeoCheck } from "@/Types/GeoCheck";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { formatDateWithTz } from "@/Utils/TimeUtils";
|
||||
import { formatDateWithTz, formatMs } from "@/Utils/TimeUtils";
|
||||
import type { RootState } from "@/Types/state";
|
||||
import { useSelector } from "react-redux";
|
||||
import prettyMilliseconds from "pretty-ms";
|
||||
|
||||
export const GeoChecksTable = ({
|
||||
geoChecks,
|
||||
@@ -69,7 +68,7 @@ export const GeoChecksTable = ({
|
||||
content: t("common.table.headers.responseTime"),
|
||||
render: (row) => {
|
||||
if (!row.timings?.total) return "N/A";
|
||||
return prettyMilliseconds(row.timings.total, { compact: true });
|
||||
return formatMs(row.timings.total);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
@@ -38,6 +38,11 @@ interface CertificateResponse {
|
||||
certificateDate: string;
|
||||
}
|
||||
|
||||
interface DomainResponse {
|
||||
domain: string;
|
||||
expiryDate: string;
|
||||
}
|
||||
|
||||
const UptimeDetailsPage = () => {
|
||||
const theme = useTheme();
|
||||
const isAdmin = useIsAdmin();
|
||||
@@ -102,6 +107,29 @@ const UptimeDetailsPage = () => {
|
||||
);
|
||||
}, [certificateData, uiTimezone]);
|
||||
|
||||
// Domain expiry fetch - only for HTTP monitors
|
||||
const domainUrl = useMemo(() => {
|
||||
if (!monitorId || monitor?.type !== "http") {
|
||||
return null;
|
||||
}
|
||||
return `/monitors/domain/${monitorId}`;
|
||||
}, [monitorId, monitor?.type]);
|
||||
|
||||
const { data: domainData } = useGet<DomainResponse>(
|
||||
domainUrl,
|
||||
{},
|
||||
{ revalidateOnFocus: false }
|
||||
);
|
||||
|
||||
const domainExpiry = useMemo(() => {
|
||||
if (!domainData?.expiryDate) {
|
||||
return undefined;
|
||||
}
|
||||
return (
|
||||
formatDateWithTz(domainData.expiryDate, certificateDateFormat, uiTimezone) ?? "N/A"
|
||||
);
|
||||
}, [domainData, uiTimezone]);
|
||||
|
||||
const checksUrl = useMemo(() => {
|
||||
if (!monitorId || !monitor?.type) {
|
||||
return null;
|
||||
@@ -193,6 +221,7 @@ const UptimeDetailsPage = () => {
|
||||
monitor={monitor}
|
||||
monitorStats={monitorStats}
|
||||
certificateExpiry={certificateExpiry}
|
||||
domainExpiry={domainExpiry}
|
||||
/>
|
||||
<HeaderTimeRange
|
||||
isLoading={monitorIsLoading || checksIsLoading}
|
||||
|
||||
@@ -39,11 +39,14 @@ import CreateNotifications from "@/Pages/Notifications/create";
|
||||
import Tags from "@/Pages/Tags";
|
||||
import CreateTags from "@/Pages/Tags/create";
|
||||
|
||||
// Proxies
|
||||
import Proxies from "@/Pages/Proxies";
|
||||
import CreateProxies from "@/Pages/Proxies/create";
|
||||
|
||||
// Settings
|
||||
import Account from "@/Pages/Account";
|
||||
import EditUser from "@/Pages/Account/EditUser";
|
||||
import Settings from "@/Pages/Settings";
|
||||
|
||||
import Maintenance from "@/Pages/Maintenance";
|
||||
import CreateNewMaintenanceWindow from "@/Pages/Maintenance/create";
|
||||
|
||||
@@ -52,10 +55,8 @@ import Logs from "@/Pages/Logs";
|
||||
|
||||
// Routing
|
||||
import { ProtectedRoute, RoleProtectedRoute } from "@/Components/routing/RouteProtected";
|
||||
|
||||
import CreateMonitor from "@/Pages/CreateMonitor";
|
||||
import { isCustomDomainHost } from "@/Utils/statusPageUrl";
|
||||
|
||||
const Routes = () => {
|
||||
if (isCustomDomainHost()) {
|
||||
return (
|
||||
@@ -188,12 +189,24 @@ const Routes = () => {
|
||||
path="tags/create"
|
||||
element={<CreateTags />}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path="tags/configure/:tagId"
|
||||
element={<CreateTags />}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path="proxies"
|
||||
element={<Proxies />}
|
||||
/>
|
||||
<Route
|
||||
path="proxies/create"
|
||||
element={<CreateProxies />}
|
||||
/>
|
||||
<Route
|
||||
path="proxies/configure/:proxyId"
|
||||
element={<CreateProxies />}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path="maintenance"
|
||||
element={<Maintenance />}
|
||||
|
||||
@@ -250,14 +250,53 @@ export interface ChecksSummary {
|
||||
downChecks: number;
|
||||
}
|
||||
|
||||
export type CheckSnapshot = Omit<Check, "metadata" | "__v" | "updatedAt"> & {
|
||||
originalResponseTime: number;
|
||||
};
|
||||
export type SnapshotCpuInfo = Pick<
|
||||
CheckCpuInfo,
|
||||
| "physical_core"
|
||||
| "logical_core"
|
||||
| "frequency"
|
||||
| "current_frequency"
|
||||
| "temperature"
|
||||
| "usage_percent"
|
||||
>;
|
||||
export type SnapshotMemoryInfo = Pick<
|
||||
CheckMemoryInfo,
|
||||
"total_bytes" | "used_bytes" | "usage_percent"
|
||||
>;
|
||||
export type SnapshotDiskInfo = Pick<
|
||||
CheckDiskInfo,
|
||||
"device" | "total_bytes" | "used_bytes" | "usage_percent"
|
||||
>;
|
||||
export type SnapshotHostInfo = Pick<CheckHostInfo, "os" | "platform" | "pretty_name">;
|
||||
|
||||
export type CheckSnapshot = Pick<
|
||||
Check,
|
||||
| "id"
|
||||
| "status"
|
||||
| "responseTime"
|
||||
| "statusCode"
|
||||
| "message"
|
||||
| "createdAt"
|
||||
| "accessibility"
|
||||
| "bestPractices"
|
||||
| "seo"
|
||||
| "performance"
|
||||
| "audits"
|
||||
> & {
|
||||
cpu?: SnapshotCpuInfo;
|
||||
memory?: SnapshotMemoryInfo;
|
||||
disk?: SnapshotDiskInfo[];
|
||||
host?: SnapshotHostInfo;
|
||||
};
|
||||
export interface HasResponseTime {
|
||||
responseTime: number;
|
||||
}
|
||||
|
||||
export type NormalizedCheck<T extends HasResponseTime = Check> = T & {
|
||||
originalResponseTime: number;
|
||||
};
|
||||
export interface DailyCheckBucket {
|
||||
monitorId: string;
|
||||
date: string;
|
||||
totalChecks: number;
|
||||
upChecks: number;
|
||||
downChecks: number;
|
||||
avgResponseTime: number | null; // null when no check that day recorded a response time
|
||||
}
|
||||
@@ -1,4 +1,9 @@
|
||||
import type { GroupedCheck, CheckSnapshot, GroupedUptimeCheck } from "@/Types/Check";
|
||||
import type {
|
||||
GroupedCheck,
|
||||
CheckSnapshot,
|
||||
GroupedUptimeCheck,
|
||||
DailyCheckBucket,
|
||||
} from "@/Types/Check";
|
||||
import type { PageSpeedGroupedCheck } from "@/Types/Check";
|
||||
import type { GeoContinent } from "@/Types/GeoCheck";
|
||||
export type { GeoContinent } from "@/Types/GeoCheck";
|
||||
@@ -20,6 +25,56 @@ export const MonitorTypes = [
|
||||
] as const;
|
||||
export type MonitorType = (typeof MonitorTypes)[number];
|
||||
|
||||
// The subset offered by the CreateMonitor type selector, in display order.
|
||||
// pagespeed/hardware are set by their own pages; unknown is never selectable.
|
||||
export const SelectableMonitorTypes = [
|
||||
"http",
|
||||
"ping",
|
||||
"docker",
|
||||
"port",
|
||||
"game",
|
||||
"grpc",
|
||||
"websocket",
|
||||
"dns",
|
||||
] as const;
|
||||
export type SelectableMonitorType = (typeof SelectableMonitorTypes)[number];
|
||||
|
||||
// Irregular i18n key fragments shared by the type selector's label
|
||||
// (pages.common.monitors.monitorTypes.<fragment>), its description
|
||||
// (pages.createMonitor.form.type.<fragment>Description), and status page
|
||||
// type labels (via getMonitorTypeLabel). Covers every type with a label;
|
||||
// only selectable types have description keys.
|
||||
export const monitorTypeLabelKey: Record<SelectableMonitorType, string> &
|
||||
Partial<Record<MonitorType, string>> = {
|
||||
http: "optionHttp",
|
||||
ping: "optionPing",
|
||||
docker: "optionDocker",
|
||||
port: "optionPort",
|
||||
game: "optionGame",
|
||||
grpc: "optionGrpc",
|
||||
websocket: "optionWebSocket",
|
||||
dns: "optionDns",
|
||||
hardware: "optionHardware",
|
||||
pagespeed: "optionPagespeed",
|
||||
};
|
||||
|
||||
export const MonitorIntervalOptions = [
|
||||
{ value: 15000, labelKey: "fifteenSeconds" },
|
||||
{ value: 30000, labelKey: "thirtySeconds" },
|
||||
{ value: 60000, labelKey: "oneMinute" },
|
||||
{ value: 120000, labelKey: "twoMinutes" },
|
||||
{ value: 180000, labelKey: "threeMinutes" },
|
||||
{ value: 240000, labelKey: "fourMinutes" },
|
||||
{ value: 300000, labelKey: "fiveMinutes" },
|
||||
{ value: 600000, labelKey: "tenMinutes" },
|
||||
{ value: 900000, labelKey: "fifteenMinutes" },
|
||||
{ value: 1800000, labelKey: "thirtyMinutes" },
|
||||
] as const;
|
||||
|
||||
export const GeoCheckIntervalOptions = MonitorIntervalOptions.filter(
|
||||
({ value }) => value >= 300000
|
||||
);
|
||||
|
||||
export const DnsRecordTypes = ["A", "AAAA", "CNAME", "MX", "TXT", "NS"] as const;
|
||||
export type DnsRecordType = (typeof DnsRecordTypes)[number];
|
||||
|
||||
@@ -42,7 +97,9 @@ export const MonitorStatuses = [
|
||||
] as const;
|
||||
export type MonitorStatus = (typeof MonitorStatuses)[number];
|
||||
|
||||
export type MonitorMatchMethod = "equal" | "include" | "regex" | "";
|
||||
export const MonitorMatchMethods = ["equal", "include", "regex"] as const;
|
||||
export type MonitorMatchMethod = (typeof MonitorMatchMethods)[number] | "";
|
||||
export const DefaultMonitorMatchMethod: MonitorMatchMethod = "equal";
|
||||
|
||||
export const PageSpeedStrategies = ["desktop", "mobile"] as const;
|
||||
export type PageSpeedStrategy = (typeof PageSpeedStrategies)[number];
|
||||
@@ -52,6 +109,10 @@ export const HttpMethods = ["GET", "HEAD"] as const;
|
||||
export type HttpMethod = (typeof HttpMethods)[number];
|
||||
export const DefaultHttpMethod: HttpMethod = "GET";
|
||||
|
||||
export const ProxyModes = ["inherit", "none", "custom"] as const;
|
||||
export type ProxyMode = (typeof ProxyModes)[number];
|
||||
export const DefaultProxyMode: ProxyMode = "inherit";
|
||||
|
||||
export interface Monitor {
|
||||
id: string;
|
||||
userId: string;
|
||||
@@ -64,6 +125,8 @@ export interface Monitor {
|
||||
statusWindowThreshold: number;
|
||||
type: MonitorType;
|
||||
ignoreTlsErrors: boolean;
|
||||
proxyMode: ProxyMode;
|
||||
proxyId?: string;
|
||||
useAdvancedMatching: boolean;
|
||||
jsonPath?: string;
|
||||
expectedValue?: string;
|
||||
@@ -97,6 +160,7 @@ export interface Monitor {
|
||||
dnsServer?: string;
|
||||
dnsRecordType?: DnsRecordType;
|
||||
recentChecks: CheckSnapshot[];
|
||||
dailyChecks?: DailyCheckBucket[];
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
@@ -3,6 +3,7 @@ export const NotificationChannels = [
|
||||
"slack",
|
||||
"discord",
|
||||
"webhook",
|
||||
"rocket_chat",
|
||||
"pager_duty",
|
||||
"matrix",
|
||||
"teams",
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
export const ProxyProtocols = ["http", "https"] as const;
|
||||
export type ProxyProtocol = (typeof ProxyProtocols)[number];
|
||||
|
||||
export interface Proxy {
|
||||
id: string;
|
||||
teamId: string;
|
||||
name: string;
|
||||
protocol: ProxyProtocol;
|
||||
host: string;
|
||||
port: number;
|
||||
username?: string;
|
||||
password?: string;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
export type ProxyResponse = Omit<Proxy, "password"> & { hasPassword: boolean };
|
||||
@@ -24,6 +24,8 @@ export interface Settings {
|
||||
showURL: boolean;
|
||||
singleton: boolean;
|
||||
globalThresholds?: SettingsThresholds;
|
||||
globalProxyEnabled: boolean;
|
||||
globalProxyId?: string | null;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
@@ -31,5 +33,11 @@ export interface Settings {
|
||||
export interface AppSettingsResponse {
|
||||
pagespeedKeySet: boolean;
|
||||
emailPasswordSet: boolean;
|
||||
globalProxy: {
|
||||
id: string;
|
||||
name: string;
|
||||
host: string;
|
||||
port: number;
|
||||
} | null;
|
||||
settings: Settings;
|
||||
}
|
||||
@@ -1,24 +1,13 @@
|
||||
import { monitorTypeLabelKey } from "@/Types/Monitor";
|
||||
import type { Monitor, MonitorType } from "@/Types/Monitor";
|
||||
export type MonitorDisplayType = "uptime" | "infrastructure";
|
||||
|
||||
export const MONITOR_TYPE_KEYS: Partial<Record<MonitorType, string>> = {
|
||||
http: "pages.common.monitors.monitorTypes.optionHttp",
|
||||
ping: "pages.common.monitors.monitorTypes.optionPing",
|
||||
docker: "pages.common.monitors.monitorTypes.optionDocker",
|
||||
port: "pages.common.monitors.monitorTypes.optionPort",
|
||||
game: "pages.common.monitors.monitorTypes.optionGame",
|
||||
grpc: "pages.common.monitors.monitorTypes.optionGrpc",
|
||||
websocket: "pages.common.monitors.monitorTypes.optionWebSocket",
|
||||
hardware: "pages.common.monitors.monitorTypes.optionHardware",
|
||||
pagespeed: "pages.common.monitors.monitorTypes.optionPagespeed",
|
||||
};
|
||||
|
||||
export const getMonitorTypeLabel = (
|
||||
type: MonitorType,
|
||||
t: (key: string) => string
|
||||
): string => {
|
||||
const key = MONITOR_TYPE_KEYS[type];
|
||||
return key ? t(key) : type;
|
||||
const fragment = monitorTypeLabelKey[type];
|
||||
return fragment ? t(`pages.common.monitors.monitorTypes.${fragment}`) : type;
|
||||
};
|
||||
|
||||
export const STATUS_PAGE_THEMES = [
|
||||
@@ -35,6 +24,20 @@ export const STATUS_PAGE_THEME_MODES = ["auto", "light", "dark"] as const;
|
||||
export type StatusPageThemeMode = (typeof STATUS_PAGE_THEME_MODES)[number];
|
||||
export const DEFAULT_STATUS_PAGE_THEME_MODE: StatusPageThemeMode = "auto";
|
||||
|
||||
export const STATUS_PAGE_DAY_RANGES = ["30d", "60d", "90d"] as const;
|
||||
export type StatusPageDayRange = (typeof STATUS_PAGE_DAY_RANGES)[number];
|
||||
export const STATUS_PAGE_RANGES = ["latest", ...STATUS_PAGE_DAY_RANGES] as const;
|
||||
export type StatusPageRange = (typeof STATUS_PAGE_RANGES)[number];
|
||||
|
||||
export const STATUS_PAGE_RANGE_DAYS: Record<StatusPageDayRange, number> = {
|
||||
"30d": 30,
|
||||
"60d": 60,
|
||||
"90d": 90,
|
||||
};
|
||||
|
||||
export const isStatusPageRange = (value: string | null): value is StatusPageRange =>
|
||||
STATUS_PAGE_RANGES.some((range) => range === value);
|
||||
|
||||
export const resolveStatusPageTheme = (
|
||||
value: string | null | undefined
|
||||
): StatusPageTheme =>
|
||||
@@ -78,4 +81,7 @@ export interface StatusPage {
|
||||
export interface StatusPageResponse {
|
||||
statusPage: StatusPage;
|
||||
monitors: Monitor[];
|
||||
range?: StatusPageDayRange; // present only when range !== "latest"
|
||||
bucketTimezone?: string;
|
||||
checkTTLDays?: number;
|
||||
}
|
||||
@@ -1,47 +1,3 @@
|
||||
const MIN_OUT = 10;
|
||||
const MAX_OUT = 100;
|
||||
|
||||
export const normalizeResponseTimes = <T, K extends keyof T>(
|
||||
checks: T[],
|
||||
key: K
|
||||
): (T & { normalResponseTime: number })[] => {
|
||||
if (!Array.isArray(checks) || checks.length === 0)
|
||||
return checks as (T & {
|
||||
normalResponseTime: number;
|
||||
})[];
|
||||
|
||||
if (checks.length === 1) {
|
||||
return [
|
||||
{
|
||||
...checks[0],
|
||||
normalResponseTime: 50,
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
const getVal = (check: T): number => {
|
||||
const v = check[key] as unknown;
|
||||
return typeof v === "number" && Number.isFinite(v) ? v : 0;
|
||||
};
|
||||
|
||||
const { min, max } = checks.reduce(
|
||||
(acc, check) => {
|
||||
const v = getVal(check);
|
||||
if (v > acc.max) acc.max = v;
|
||||
if (v < acc.min) acc.min = v;
|
||||
return acc;
|
||||
},
|
||||
{ max: -Infinity, min: Infinity }
|
||||
);
|
||||
|
||||
const range = max - min || 1;
|
||||
|
||||
return checks.map((check) => ({
|
||||
...check,
|
||||
normalResponseTime: MIN_OUT + ((getVal(check) - min) * (MAX_OUT - MIN_OUT)) / range,
|
||||
}));
|
||||
};
|
||||
|
||||
// Interpolate color between three theme colors over 0-100 range.
|
||||
// 0-50 => start (success.light), 50-75 => mid (warning.light), 75-100 => end (error.light)
|
||||
export const getResponseColor = (
|
||||
@@ -129,3 +85,53 @@ export const getResponseColor = (
|
||||
}
|
||||
return normalizeToHex(safe.end);
|
||||
};
|
||||
|
||||
export const MIN_HEIGHT_PCT = 8;
|
||||
const CAP_PERCENTILE = 95;
|
||||
|
||||
const percentile = (sortedValues: number[], p: number): number => {
|
||||
const index = (p / 100) * (sortedValues.length - 1);
|
||||
const lower = Math.floor(index);
|
||||
const upper = lower + 1;
|
||||
const weight = index % 1;
|
||||
if (upper >= sortedValues.length) return sortedValues[lower];
|
||||
return sortedValues[lower] * (1 - weight) + sortedValues[upper] * weight;
|
||||
};
|
||||
|
||||
export const computeBarHeights = (
|
||||
checks: { responseTime?: number | null }[]
|
||||
): number[] => {
|
||||
const values = checks.map((check) => {
|
||||
return typeof check.responseTime === "number" && Number.isFinite(check.responseTime)
|
||||
? Math.max(0, check.responseTime)
|
||||
: 0;
|
||||
});
|
||||
|
||||
const sorted = values.slice().sort((a, b) => a - b);
|
||||
const cap = percentile(sorted, CAP_PERCENTILE);
|
||||
if (cap <= 0) return values.map(() => MIN_HEIGHT_PCT);
|
||||
return values.map((value) => {
|
||||
return Math.max(MIN_HEIGHT_PCT, Math.min(100, (value / cap) * 100));
|
||||
});
|
||||
};
|
||||
|
||||
export const computeDayBarHeights = (
|
||||
buckets: { date: string; avgResponseTime: number | null }[]
|
||||
): Map<string, number> => {
|
||||
const values = buckets.map((bucket) =>
|
||||
typeof bucket.avgResponseTime === "number" && Number.isFinite(bucket.avgResponseTime)
|
||||
? Math.max(0, bucket.avgResponseTime)
|
||||
: 0
|
||||
);
|
||||
|
||||
const sorted = values.slice().sort((a, b) => a - b);
|
||||
const cap = percentile(sorted, CAP_PERCENTILE);
|
||||
return new Map(
|
||||
buckets.map((bucket, i) => [
|
||||
bucket.date,
|
||||
cap <= 0
|
||||
? MIN_HEIGHT_PCT
|
||||
: Math.max(MIN_HEIGHT_PCT, Math.min(100, (values[i] / cap) * 100)),
|
||||
])
|
||||
);
|
||||
};
|
||||
@@ -1,25 +1,31 @@
|
||||
/**
|
||||
* Intl.NumberFormat instance for percentage formatting.
|
||||
* Reused across all formatting calls for performance.
|
||||
*
|
||||
* Two decimals rather than one: at a single decimal every value above 99.95%
|
||||
* renders as "100.0%", so a period containing real downtime is reported as
|
||||
* flawless. It also collapses 99.9 / 99.95 / 99.99 — three materially
|
||||
* different SLA commitments — into the same figure.
|
||||
*/
|
||||
const percentageFormatter = new Intl.NumberFormat("en-US", {
|
||||
style: "percent",
|
||||
minimumFractionDigits: 1,
|
||||
maximumFractionDigits: 1,
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2,
|
||||
});
|
||||
|
||||
/**
|
||||
* Formats a decimal value as a percentage string.
|
||||
* @param value - Decimal value (e.g., 0.75 for 75%)
|
||||
* @returns Formatted percentage string (e.g., "75.0%")
|
||||
* @returns Formatted percentage string (e.g., "75.00%")
|
||||
* @example
|
||||
* formatPercentage(0.75) // "75.0%"
|
||||
* formatPercentage(1) // "100.0%"
|
||||
* formatPercentage(0.5432) // "54.3%"
|
||||
* formatPercentage(0.75) // "75.00%"
|
||||
* formatPercentage(1) // "100.00%"
|
||||
* formatPercentage(0.5432) // "54.32%"
|
||||
* formatPercentage(0.9999) // "99.99%"
|
||||
*/
|
||||
export const formatPercentage = (value: number): string => {
|
||||
if (typeof value !== "number" || Number.isNaN(value)) {
|
||||
return "0.0%";
|
||||
return "0.00%";
|
||||
}
|
||||
return percentageFormatter.format(value);
|
||||
};
|
||||
@@ -27,11 +33,11 @@ export const formatPercentage = (value: number): string => {
|
||||
/**
|
||||
* Formats a whole number percentage value as a percentage string.
|
||||
* @param value - Whole number percentage (e.g., 75 for 75%)
|
||||
* @returns Formatted percentage string (e.g., "75.0%")
|
||||
* @returns Formatted percentage string (e.g., "75.00%")
|
||||
* @example
|
||||
* formatPercentageFromWhole(75) // "75.0%"
|
||||
* formatPercentageFromWhole(100) // "100.0%"
|
||||
* formatPercentageFromWhole(54.32) // "54.3%"
|
||||
* formatPercentageFromWhole(75) // "75.00%"
|
||||
* formatPercentageFromWhole(100) // "100.00%"
|
||||
* formatPercentageFromWhole(54.32) // "54.32%"
|
||||
*/
|
||||
export const formatPercentageFromWhole = (value: number): string => {
|
||||
return formatPercentage(value / 100);
|
||||
|
||||
@@ -124,6 +124,14 @@ export const theme = (mode: string, palette: any) =>
|
||||
disableTouchRipple: true,
|
||||
disableFocusRipple: true,
|
||||
},
|
||||
styleOverrides: {
|
||||
root: ({ theme }) => ({
|
||||
"&.Mui-focusVisible": {
|
||||
outline: `1px solid ${theme.palette.primary.main}`,
|
||||
outlineOffset: 2,
|
||||
},
|
||||
}),
|
||||
},
|
||||
},
|
||||
MuiIconButton: {
|
||||
defaultProps: {
|
||||
|
||||
@@ -3,6 +3,7 @@ import duration from "dayjs/plugin/duration";
|
||||
import utc from "dayjs/plugin/utc";
|
||||
import timezone from "dayjs/plugin/timezone";
|
||||
import customParseFormat from "dayjs/plugin/customParseFormat";
|
||||
import prettyMilliseconds from "pretty-ms";
|
||||
|
||||
dayjs.extend(utc);
|
||||
dayjs.extend(timezone);
|
||||
@@ -77,3 +78,60 @@ export const formatTimestamp = (timestamp: string | number | null): string => {
|
||||
const date = new Date(timestamp);
|
||||
return date.toLocaleString();
|
||||
};
|
||||
|
||||
const DISPLAY_UNITS = [MS_PER_DAY, MS_PER_HOUR, MS_PER_MINUTE, MS_PER_SECOND];
|
||||
|
||||
// pretty-ms floors seconds-and-above and truncates fractional ms, so values
|
||||
// must be rounded to their display unit first to land on the nearest whole
|
||||
// unit (53.6 → "54 ms", 1937 → "2 s", 59500 → "1 m").
|
||||
const roundToDisplayUnit = (ms: number): number => {
|
||||
for (const unit of DISPLAY_UNITS) {
|
||||
if (ms >= unit) return Math.round(ms / unit) * unit;
|
||||
}
|
||||
return ms >= 1 ? Math.round(ms) : ms;
|
||||
};
|
||||
|
||||
export const formatMs = (ms: number, hasSpace: boolean = true): string => {
|
||||
const formatted = prettyMilliseconds(roundToDisplayUnit(ms), {
|
||||
compact: true,
|
||||
formatSubMilliseconds: true,
|
||||
secondsDecimalDigits: 0,
|
||||
});
|
||||
|
||||
if (hasSpace) {
|
||||
return formatted.replace(/^(\d+)(\D+)$/, "$1 $2");
|
||||
}
|
||||
return formatted;
|
||||
};
|
||||
|
||||
export const formatDuration = (ms: number, verbose: boolean = false, hasSpace = true) => {
|
||||
if (verbose) {
|
||||
return prettyMilliseconds(ms, { verbose: true });
|
||||
}
|
||||
|
||||
const formatted = prettyMilliseconds(ms, {
|
||||
unitCount: 2,
|
||||
secondsDecimalDigits: 0,
|
||||
millisecondsDecimalDigits: 0,
|
||||
});
|
||||
|
||||
if (hasSpace) {
|
||||
return formatted.replace(/^(\d+)(\D+)$/, "$1 $2");
|
||||
}
|
||||
return formatted;
|
||||
};
|
||||
|
||||
export const enumerateDays = (days: number, timeZone: string): string[] => {
|
||||
const formatter = new Intl.DateTimeFormat("en-CA", {
|
||||
timeZone,
|
||||
year: "numeric",
|
||||
month: "2-digit",
|
||||
day: "2-digit",
|
||||
});
|
||||
const [year, month, day] = formatter.format(new Date()).split("-").map(Number);
|
||||
const todayUtc = Date.UTC(year, month - 1, day);
|
||||
const DAY_MS = 24 * 60 * 60 * 1000;
|
||||
return Array.from({ length: days }, (_, i) =>
|
||||
new Date(todayUtc - (days - 1 - i) * DAY_MS).toISOString().slice(0, 10)
|
||||
);
|
||||
};
|
||||
+128
-17
@@ -16,11 +16,7 @@ interface ErrorLogData {
|
||||
timestamp: string;
|
||||
level: LogLevel;
|
||||
message: string;
|
||||
error?: {
|
||||
message: string;
|
||||
name: string;
|
||||
stack?: string;
|
||||
};
|
||||
error?: Record<string, unknown>;
|
||||
context?: LogContext;
|
||||
url: string;
|
||||
userAgent: string;
|
||||
@@ -34,14 +30,127 @@ const shouldLog = (level: LogLevel): boolean => {
|
||||
return LOG_LEVEL_PRIORITY[level] >= configuredPriority;
|
||||
};
|
||||
|
||||
const formatError = (error?: Error) => {
|
||||
if (!error) return undefined;
|
||||
/**
|
||||
* Keys whose values must never reach the console. Matched case-insensitively
|
||||
* against a substring of the key, so `newPassword` and `X-Api-Key` are covered
|
||||
* by `password` and `apikey` respectively.
|
||||
*/
|
||||
const SENSITIVE_KEY_PATTERNS = [
|
||||
"password",
|
||||
"passwd",
|
||||
"pwd",
|
||||
"secret",
|
||||
"token",
|
||||
"authorization",
|
||||
"apikey",
|
||||
"credential",
|
||||
"passphrase",
|
||||
"cookie",
|
||||
"jwt",
|
||||
"privatekey",
|
||||
"sessionid",
|
||||
"csrf",
|
||||
] as const;
|
||||
|
||||
return {
|
||||
message: error.message,
|
||||
const REDACTED = "[REDACTED]";
|
||||
|
||||
const isSensitiveKey = (key: string): boolean => {
|
||||
const normalized = key.toLowerCase().replace(/[-_]/g, "");
|
||||
return SENSITIVE_KEY_PATTERNS.some((pattern) => normalized.includes(pattern));
|
||||
};
|
||||
|
||||
/**
|
||||
* Opaque browser types that must not be walked: they carry no useful log data
|
||||
* and may hold large buffers. Resolved defensively because these globals are
|
||||
* absent in SSR and some test environments.
|
||||
*/
|
||||
const isOpaqueObject = (value: object): boolean => {
|
||||
const opaqueTypes = ["FormData", "Blob", "File", "ArrayBuffer"] as const;
|
||||
return opaqueTypes.some((name) => {
|
||||
const ctor = (globalThis as Record<string, unknown>)[name];
|
||||
return typeof ctor === "function" && value instanceof (ctor as new () => object);
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Deep-copies a value with sensitive fields replaced by a placeholder. Walks
|
||||
* class instances as well as object literals, so a credential on a DTO is
|
||||
* redacted too. Opaque types (FormData, Blob) render as a type marker.
|
||||
*
|
||||
* `ancestors` tracks only the current path, so the same object appearing twice
|
||||
* as a sibling is still rendered in full — only a genuine cycle is cut.
|
||||
*/
|
||||
const redactSensitive = (value: unknown, ancestors: readonly object[] = []): unknown => {
|
||||
if (value === null || typeof value !== "object") return value;
|
||||
|
||||
if (ancestors.includes(value)) return "[CIRCULAR]";
|
||||
|
||||
if (isOpaqueObject(value)) return `[${value.constructor?.name ?? "Object"}]`;
|
||||
|
||||
// Dates and RegExps stringify usefully on their own; walking them yields nothing.
|
||||
if (value instanceof Date || value instanceof RegExp) return value;
|
||||
|
||||
const path = [...ancestors, value];
|
||||
|
||||
if (Array.isArray(value)) {
|
||||
return value.map((item) => redactSensitive(item, path));
|
||||
}
|
||||
|
||||
// Walk own enumerable properties of ANY object, including class instances —
|
||||
// a credential on a DTO must be redacted just as it is on an object literal.
|
||||
const result: Record<string, unknown> = {};
|
||||
for (const [key, entry] of Object.entries(value as Record<string, unknown>)) {
|
||||
result[key] = isSensitiveKey(key) ? REDACTED : redactSensitive(entry, path);
|
||||
}
|
||||
return result;
|
||||
};
|
||||
|
||||
/**
|
||||
* Parses a serialized request body so its fields can be redacted by key. A body
|
||||
* that is not JSON is replaced wholesale rather than logged raw, since an
|
||||
* unparseable payload (e.g. form-encoded) may still carry credentials.
|
||||
*/
|
||||
const safeJsonParse = (raw: string): unknown => {
|
||||
try {
|
||||
const parsed = JSON.parse(raw);
|
||||
return typeof parsed === "object" && parsed !== null ? parsed : "[UNPARSED BODY]";
|
||||
} catch {
|
||||
return "[UNPARSED BODY]";
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Errors are logged as-is by the debug branches, but an AxiosError carries the
|
||||
* outgoing request on `config` — including the serialized body and the
|
||||
* Authorization header — so the raw object cannot be handed to the console.
|
||||
* Returns a redacted plain object safe to print.
|
||||
*/
|
||||
const toSafeError = (error: Error): Record<string, unknown> => {
|
||||
const candidate = error as unknown as {
|
||||
config?: { url?: string; method?: string; data?: unknown; headers?: unknown };
|
||||
response?: { status?: number };
|
||||
};
|
||||
|
||||
const safe: Record<string, unknown> = {
|
||||
name: error.name,
|
||||
message: error.message,
|
||||
stack: error.stack,
|
||||
};
|
||||
|
||||
if (candidate.config) {
|
||||
const { url, method, data, headers } = candidate.config;
|
||||
safe.config = {
|
||||
url,
|
||||
method,
|
||||
// Axios serializes the request body to a string, so key-based
|
||||
// redaction cannot reach into it — parse it back first.
|
||||
data: redactSensitive(typeof data === "string" ? safeJsonParse(data) : data),
|
||||
headers: redactSensitive(headers),
|
||||
};
|
||||
safe.status = candidate.response?.status;
|
||||
}
|
||||
|
||||
return redactSensitive(safe) as Record<string, unknown>;
|
||||
};
|
||||
|
||||
const createLogData = (
|
||||
@@ -54,8 +163,8 @@ const createLogData = (
|
||||
timestamp: new Date().toISOString(),
|
||||
level,
|
||||
message,
|
||||
error: formatError(error),
|
||||
context,
|
||||
error: error === undefined ? undefined : toSafeError(error),
|
||||
context: context === undefined ? undefined : (redactSensitive(context) as LogContext),
|
||||
url: window.location.href,
|
||||
userAgent: navigator.userAgent,
|
||||
};
|
||||
@@ -69,10 +178,10 @@ const error = (message: string, error?: Error, context?: LogContext): void => {
|
||||
if (configuredLevel === "debug") {
|
||||
console.group(`ERROR: ${message}`);
|
||||
if (error) {
|
||||
console.error("Error:", error);
|
||||
console.error("Error:", toSafeError(error));
|
||||
}
|
||||
if (context && Object.keys(context).length > 0) {
|
||||
console.log("Context:", context);
|
||||
console.log("Context:", logData.context);
|
||||
}
|
||||
console.log("URL:", logData.url);
|
||||
console.log("Timestamp:", logData.timestamp);
|
||||
@@ -90,7 +199,7 @@ const warn = (message: string, context?: LogContext): void => {
|
||||
if (configuredLevel === "debug") {
|
||||
console.group(`WARN: ${message}`);
|
||||
if (context && Object.keys(context).length > 0) {
|
||||
console.log("Context:", context);
|
||||
console.log("Context:", logData.context);
|
||||
}
|
||||
console.groupEnd();
|
||||
} else {
|
||||
@@ -103,7 +212,7 @@ const debug = (message: string, data?: any): void => {
|
||||
|
||||
console.group(`DEBUG: ${message}`);
|
||||
if (data !== undefined) {
|
||||
console.log(data);
|
||||
console.log(redactSensitive(data));
|
||||
}
|
||||
console.groupEnd();
|
||||
};
|
||||
@@ -111,14 +220,16 @@ const debug = (message: string, data?: any): void => {
|
||||
const info = (message: string, data?: any): void => {
|
||||
if (!shouldLog("info")) return;
|
||||
|
||||
const safeData = data === undefined ? undefined : redactSensitive(data);
|
||||
|
||||
if (configuredLevel === "debug") {
|
||||
console.log(`INFO: ${message}`, data);
|
||||
console.log(`INFO: ${message}`, safeData);
|
||||
} else {
|
||||
const logData = {
|
||||
timestamp: new Date().toISOString(),
|
||||
level: "info" as LogLevel,
|
||||
message,
|
||||
data,
|
||||
data: safeData,
|
||||
};
|
||||
console.log(JSON.stringify(logData));
|
||||
}
|
||||
|
||||
@@ -1,4 +1,8 @@
|
||||
import { PUBLIC_STATUS_PAGE_PREFIX, type StatusPage } from "@/Types/StatusPage";
|
||||
import {
|
||||
PUBLIC_STATUS_PAGE_PREFIX,
|
||||
type StatusPage,
|
||||
type StatusPageRange,
|
||||
} from "@/Types/StatusPage";
|
||||
import { runtimeConfig } from "@/Utils/runtimeConfig";
|
||||
|
||||
const CLIENT_HOST =
|
||||
@@ -86,8 +90,12 @@ export const getStatusPagePreviewUrl = (statusPage: Pick<StatusPage, "url">): st
|
||||
export const buildStatusPageApiPath = (options: {
|
||||
url?: string;
|
||||
useCustomDomain?: boolean;
|
||||
range?: StatusPageRange;
|
||||
}): string | null => {
|
||||
const query = "type=uptime&type=infrastructure";
|
||||
let query = "type=uptime&type=infrastructure";
|
||||
if (options.range && options.range !== "latest") {
|
||||
query += `&range=${options.range}`;
|
||||
}
|
||||
|
||||
if (options.useCustomDomain && typeof window !== "undefined") {
|
||||
const domain = encodeURIComponent(window.location.hostname);
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
import timezones from "@/Utils/timezones.json";
|
||||
|
||||
export interface TimezoneOption {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
// timezones.json uses Mongo-style _id; remap once at module load to the
|
||||
// { id, name } shape AutoComplete expects.
|
||||
export const timezoneOptions: TimezoneOption[] = timezones.map((tz) => ({
|
||||
id: tz._id,
|
||||
name: tz.name,
|
||||
}));
|
||||
@@ -5,6 +5,7 @@ import {
|
||||
DnsRecordTypes,
|
||||
HttpMethods,
|
||||
PageSpeedStrategies,
|
||||
ProxyModes,
|
||||
type MonitorType,
|
||||
} from "@/Types/Monitor";
|
||||
import { ALL_HTTP_STATUS_CODES } from "@/Utils/statusCode";
|
||||
@@ -67,6 +68,8 @@ const httpStatusCode = z.number().refine((code) => httpStatusCodeSet.has(code),
|
||||
const httpSchema = baseSchema.extend({
|
||||
type: z.literal("http"),
|
||||
url: urlSchema,
|
||||
proxyMode: z.enum(ProxyModes),
|
||||
proxyId: z.string().optional(),
|
||||
method: z.enum(HttpMethods).optional().register(monitorStepRegistry, { step: 2 }),
|
||||
ignoreTlsErrors: z.boolean().register(monitorStepRegistry, { step: 2 }),
|
||||
useAdvancedMatching: z.boolean().register(monitorStepRegistry, { step: 2 }),
|
||||
@@ -195,7 +198,7 @@ const dnsSchema = baseSchema.extend({
|
||||
});
|
||||
|
||||
// Discriminated union of all monitor types
|
||||
export const monitorSchema = z.discriminatedUnion("type", [
|
||||
const monitorSchemaUnion = z.discriminatedUnion("type", [
|
||||
httpSchema,
|
||||
pingSchema,
|
||||
portSchema,
|
||||
@@ -208,10 +211,21 @@ export const monitorSchema = z.discriminatedUnion("type", [
|
||||
dnsSchema,
|
||||
]);
|
||||
|
||||
// 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({
|
||||
code: "custom",
|
||||
path: ["proxyId"],
|
||||
message: "A proxy must be selected when proxy mode is custom",
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
export type MonitorFormData = z.infer<typeof monitorSchema>;
|
||||
|
||||
const optionForType = (type: MonitorType) =>
|
||||
monitorSchema.options.find((o) => o.shape.type.value === type);
|
||||
monitorSchemaUnion.options.find((o) => o.shape.type.value === type);
|
||||
|
||||
// The step each field of a type is validated on, from the per-field
|
||||
// `monitorStepRegistry` metadata (unannotated fields default to step 0).
|
||||
|
||||
@@ -30,6 +30,14 @@ const webhookSchema = baseSchema.extend({
|
||||
address: z.string().min(1, "Webhook URL is required").url("Please enter a valid URL"),
|
||||
});
|
||||
|
||||
const rocketChatSchema = baseSchema.extend({
|
||||
type: z.literal("rocket_chat"),
|
||||
address: z
|
||||
.string()
|
||||
.min(1, "Webhook URL is required")
|
||||
.url({ protocol: /^https?$/, message: "Please enter a valid URL" }),
|
||||
});
|
||||
|
||||
const pagerDutySchema = baseSchema.extend({
|
||||
type: z.literal("pager_duty"),
|
||||
address: z.string().min(1, "Integration key is required"),
|
||||
@@ -81,6 +89,7 @@ export const notificationSchema = z.discriminatedUnion("type", [
|
||||
slackSchema,
|
||||
discordSchema,
|
||||
webhookSchema,
|
||||
rocketChatSchema,
|
||||
pagerDutySchema,
|
||||
matrixSchema,
|
||||
teamsSchema,
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
import { z } from "zod";
|
||||
import { ProxyProtocols } from "@/Types/Proxy";
|
||||
|
||||
export const proxySchema = z.object({
|
||||
name: z.string().min(1, "Proxy name is required"),
|
||||
protocol: z.enum(ProxyProtocols, "Invalid proxy protocol"),
|
||||
host: z.string().min(1, "Proxy host is required"),
|
||||
port: z
|
||||
.number()
|
||||
.int()
|
||||
.min(1, "Proxy port is required")
|
||||
.max(65535, "Proxy port must be between 1 and 65535"),
|
||||
username: z.string().optional(),
|
||||
password: z.string().optional(),
|
||||
});
|
||||
|
||||
export type ProxyFormData = z.infer<typeof proxySchema>;
|
||||
@@ -1,61 +1,73 @@
|
||||
import { CHECK_TTL_SENTINEL } from "@/Types/Check";
|
||||
import { z } from "zod";
|
||||
|
||||
export const settingsSchema = z.object({
|
||||
systemEmailIgnoreTLS: z.boolean(),
|
||||
systemEmailRequireTLS: z.boolean(),
|
||||
systemEmailRejectUnauthorized: z.boolean(),
|
||||
systemEmailConnectionHost: z
|
||||
.string()
|
||||
.transform((val) => (val.trim() === "" ? null : val.trim()))
|
||||
.optional(),
|
||||
systemEmailSecure: z.boolean().optional(),
|
||||
systemEmailPool: z.boolean().optional(),
|
||||
showURL: z.boolean().optional(),
|
||||
checkTTL: z
|
||||
.number()
|
||||
.int()
|
||||
.min(1, "Please enter a value")
|
||||
.max(CHECK_TTL_SENTINEL, `Maximum ${CHECK_TTL_SENTINEL}`),
|
||||
pagespeedApiKey: z
|
||||
.string()
|
||||
.transform((val) => (val.trim() === "" ? null : val.trim()))
|
||||
.optional(),
|
||||
systemEmailHost: z
|
||||
.string()
|
||||
.regex(/^[a-zA-Z0-9.-]*$/, "Invalid hostname or IP address")
|
||||
.transform((val) => (val.trim() === "" ? null : val.trim()))
|
||||
.optional(),
|
||||
systemEmailPort: z.number().int().min(1).max(65535).optional(),
|
||||
systemEmailAddress: z
|
||||
.email("Please enter a valid email address")
|
||||
.or(z.literal(""))
|
||||
.transform((val) => (val === "" ? null : val.toLowerCase().trim()))
|
||||
.optional(),
|
||||
systemEmailDisplayName: z
|
||||
.string()
|
||||
.max(100, "Display name must be 100 characters or fewer")
|
||||
.transform((val) => (val.trim() === "" ? null : val.trim()))
|
||||
.optional(),
|
||||
systemEmailUser: z
|
||||
.string()
|
||||
.transform((val) => (val.trim() === "" ? null : val.trim()))
|
||||
.optional(),
|
||||
systemEmailPassword: z
|
||||
.string()
|
||||
.transform((val) => (val.trim() === "" ? null : val.trim()))
|
||||
.optional(),
|
||||
systemEmailTLSServername: z
|
||||
.string()
|
||||
.transform((val) => (val.trim() === "" ? null : val.trim()))
|
||||
.optional(),
|
||||
globalThresholds: z.object({
|
||||
cpu: z.number().int().min(1).max(100),
|
||||
memory: z.number().int().min(1).max(100),
|
||||
disk: z.number().int().min(1).max(100),
|
||||
temperature: z.number().int().min(1).max(150),
|
||||
}),
|
||||
});
|
||||
export const settingsSchema = z
|
||||
.object({
|
||||
systemEmailIgnoreTLS: z.boolean(),
|
||||
systemEmailRequireTLS: z.boolean(),
|
||||
systemEmailRejectUnauthorized: z.boolean(),
|
||||
systemEmailConnectionHost: z
|
||||
.string()
|
||||
.transform((val) => (val.trim() === "" ? null : val.trim()))
|
||||
.optional(),
|
||||
systemEmailSecure: z.boolean().optional(),
|
||||
systemEmailPool: z.boolean().optional(),
|
||||
showURL: z.boolean().optional(),
|
||||
checkTTL: z
|
||||
.number()
|
||||
.int()
|
||||
.min(1, "Please enter a value")
|
||||
.max(CHECK_TTL_SENTINEL, `Maximum ${CHECK_TTL_SENTINEL}`),
|
||||
pagespeedApiKey: z
|
||||
.string()
|
||||
.transform((val) => (val.trim() === "" ? null : val.trim()))
|
||||
.optional(),
|
||||
systemEmailHost: z
|
||||
.string()
|
||||
.regex(/^[a-zA-Z0-9.-]*$/, "Invalid hostname or IP address")
|
||||
.transform((val) => (val.trim() === "" ? null : val.trim()))
|
||||
.optional(),
|
||||
systemEmailPort: z.number().int().min(1).max(65535).optional(),
|
||||
systemEmailAddress: z
|
||||
.email("Please enter a valid email address")
|
||||
.or(z.literal(""))
|
||||
.transform((val) => (val === "" ? null : val.toLowerCase().trim()))
|
||||
.optional(),
|
||||
systemEmailDisplayName: z
|
||||
.string()
|
||||
.max(100, "Display name must be 100 characters or fewer")
|
||||
.transform((val) => (val.trim() === "" ? null : val.trim()))
|
||||
.optional(),
|
||||
systemEmailUser: z
|
||||
.string()
|
||||
.transform((val) => (val.trim() === "" ? null : val.trim()))
|
||||
.optional(),
|
||||
systemEmailPassword: z
|
||||
.string()
|
||||
.transform((val) => (val.trim() === "" ? null : val.trim()))
|
||||
.optional(),
|
||||
systemEmailTLSServername: z
|
||||
.string()
|
||||
.transform((val) => (val.trim() === "" ? null : val.trim()))
|
||||
.optional(),
|
||||
globalThresholds: z.object({
|
||||
cpu: z.number().int().min(1).max(100),
|
||||
memory: z.number().int().min(1).max(100),
|
||||
disk: z.number().int().min(1).max(100),
|
||||
temperature: z.number().int().min(1).max(150),
|
||||
}),
|
||||
globalProxyEnabled: z.boolean(),
|
||||
globalProxyId: z.string().nullable().optional(),
|
||||
})
|
||||
.superRefine((body, ctx) => {
|
||||
if (body.globalProxyEnabled === true && !body.globalProxyId) {
|
||||
ctx.addIssue({
|
||||
code: "custom",
|
||||
path: ["globalProxyId"],
|
||||
message: "A proxy must be selected to enable the global proxy",
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
export type SettingsFormInput = z.input<typeof settingsSchema>;
|
||||
export type SettingsFormData = z.infer<typeof settingsSchema>;
|
||||
Loaded 100 of 220 files, more files were not shown because too many files have changed in this diff.
Show more
Reference in new issue
Block a user