666 lines
27 KiB
TypeScript
666 lines
27 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { useFormState } from "react-dom";
|
|
import { Alert, Box, Button, Card, CardContent, Checkbox, FormControlLabel, MenuItem, Stack, TextField, Typography } from "@mui/material";
|
|
import type { GeneralSettings, AuthentikSettings, MetricsSettings, LoggingSettings, DnsSettings } from "@/src/lib/settings";
|
|
import {
|
|
updateCloudflareSettingsAction,
|
|
updateGeneralSettingsAction,
|
|
updateAuthentikSettingsAction,
|
|
updateMetricsSettingsAction,
|
|
updateLoggingSettingsAction,
|
|
updateDnsSettingsAction,
|
|
updateInstanceModeAction,
|
|
updateSlaveMasterTokenAction,
|
|
createSlaveInstanceAction,
|
|
deleteSlaveInstanceAction,
|
|
toggleSlaveInstanceAction,
|
|
syncSlaveInstancesAction
|
|
} from "./actions";
|
|
|
|
type Props = {
|
|
general: GeneralSettings | null;
|
|
cloudflare: {
|
|
hasToken: boolean;
|
|
zoneId?: string;
|
|
accountId?: string;
|
|
};
|
|
authentik: AuthentikSettings | null;
|
|
metrics: MetricsSettings | null;
|
|
logging: LoggingSettings | null;
|
|
dns: DnsSettings | null;
|
|
instanceSync: {
|
|
mode: "standalone" | "master" | "slave";
|
|
modeFromEnv: boolean;
|
|
tokenFromEnv: boolean;
|
|
overrides: {
|
|
general: boolean;
|
|
cloudflare: boolean;
|
|
authentik: boolean;
|
|
metrics: boolean;
|
|
logging: boolean;
|
|
dns: boolean;
|
|
};
|
|
slave: {
|
|
hasToken: boolean;
|
|
lastSyncAt: string | null;
|
|
lastSyncError: string | null;
|
|
} | null;
|
|
master: {
|
|
instances: Array<{
|
|
id: number;
|
|
name: string;
|
|
base_url: string;
|
|
enabled: boolean;
|
|
last_sync_at: string | null;
|
|
last_sync_error: string | null;
|
|
}>;
|
|
envInstances: Array<{
|
|
name: string;
|
|
url: string;
|
|
}>;
|
|
} | null;
|
|
};
|
|
};
|
|
|
|
export default function SettingsClient({ general, cloudflare, authentik, metrics, logging, dns, instanceSync }: Props) {
|
|
const [generalState, generalFormAction] = useFormState(updateGeneralSettingsAction, null);
|
|
const [cloudflareState, cloudflareFormAction] = useFormState(updateCloudflareSettingsAction, null);
|
|
const [authentikState, authentikFormAction] = useFormState(updateAuthentikSettingsAction, null);
|
|
const [metricsState, metricsFormAction] = useFormState(updateMetricsSettingsAction, null);
|
|
const [loggingState, loggingFormAction] = useFormState(updateLoggingSettingsAction, null);
|
|
const [dnsState, dnsFormAction] = useFormState(updateDnsSettingsAction, null);
|
|
const [instanceModeState, instanceModeFormAction] = useFormState(updateInstanceModeAction, null);
|
|
const [slaveTokenState, slaveTokenFormAction] = useFormState(updateSlaveMasterTokenAction, null);
|
|
const [slaveInstanceState, slaveInstanceFormAction] = useFormState(createSlaveInstanceAction, null);
|
|
const [syncState, syncFormAction] = useFormState(syncSlaveInstancesAction, null);
|
|
|
|
const isSlave = instanceSync.mode === "slave";
|
|
const isMaster = instanceSync.mode === "master";
|
|
const [generalOverride, setGeneralOverride] = useState(instanceSync.overrides.general);
|
|
const [cloudflareOverride, setCloudflareOverride] = useState(instanceSync.overrides.cloudflare);
|
|
const [authentikOverride, setAuthentikOverride] = useState(instanceSync.overrides.authentik);
|
|
const [metricsOverride, setMetricsOverride] = useState(instanceSync.overrides.metrics);
|
|
const [loggingOverride, setLoggingOverride] = useState(instanceSync.overrides.logging);
|
|
const [dnsOverride, setDnsOverride] = useState(instanceSync.overrides.dns);
|
|
|
|
return (
|
|
<Stack spacing={4} sx={{ width: "100%" }}>
|
|
<Stack spacing={1}>
|
|
<Typography variant="h4" fontWeight={600}>
|
|
Settings
|
|
</Typography>
|
|
<Typography color="text.secondary">Configure organization-wide defaults and DNS automation.</Typography>
|
|
</Stack>
|
|
|
|
<Card>
|
|
<CardContent>
|
|
<Typography variant="h6" fontWeight={600} gutterBottom>
|
|
Instance Sync
|
|
</Typography>
|
|
<Typography color="text.secondary" variant="body2" sx={{ mb: 2 }}>
|
|
Choose whether this instance acts independently, pushes configuration to slave nodes, or pulls configuration from a master.
|
|
</Typography>
|
|
<Stack component="form" action={instanceModeFormAction} spacing={2}>
|
|
{instanceSync.modeFromEnv && (
|
|
<Alert severity="info">
|
|
Instance mode is configured via INSTANCE_MODE environment variable and cannot be changed at runtime.
|
|
</Alert>
|
|
)}
|
|
{instanceModeState?.message && (
|
|
<Alert severity={instanceModeState.success ? "success" : "error"}>
|
|
{instanceModeState.message}
|
|
</Alert>
|
|
)}
|
|
<TextField
|
|
name="mode"
|
|
label="Instance mode"
|
|
select
|
|
defaultValue={instanceSync.mode}
|
|
disabled={instanceSync.modeFromEnv}
|
|
fullWidth
|
|
>
|
|
<MenuItem value="standalone">Standalone</MenuItem>
|
|
<MenuItem value="master">Master</MenuItem>
|
|
<MenuItem value="slave">Slave</MenuItem>
|
|
</TextField>
|
|
<Box sx={{ display: "flex", justifyContent: "flex-end" }}>
|
|
<Button type="submit" variant="contained" disabled={instanceSync.modeFromEnv}>
|
|
Save instance mode
|
|
</Button>
|
|
</Box>
|
|
</Stack>
|
|
|
|
{isSlave && (
|
|
<Stack spacing={2} sx={{ mt: 3 }}>
|
|
<Typography variant="subtitle1" fontWeight={600}>
|
|
Master Connection
|
|
</Typography>
|
|
<Stack component="form" action={slaveTokenFormAction} spacing={2}>
|
|
{instanceSync.tokenFromEnv && (
|
|
<Alert severity="info">
|
|
Sync token is configured via INSTANCE_SYNC_TOKEN environment variable and cannot be changed at runtime.
|
|
</Alert>
|
|
)}
|
|
{slaveTokenState?.message && (
|
|
<Alert severity={slaveTokenState.success ? "success" : "error"}>
|
|
{slaveTokenState.message}
|
|
</Alert>
|
|
)}
|
|
{instanceSync.slave?.hasToken && !instanceSync.tokenFromEnv && (
|
|
<Alert severity="info">
|
|
A master sync token is configured. Leave the token field blank to keep it, or select "Remove existing token" to delete it.
|
|
</Alert>
|
|
)}
|
|
<TextField
|
|
name="masterToken"
|
|
label="Master sync token"
|
|
type="password"
|
|
autoComplete="new-password"
|
|
placeholder="Enter new token"
|
|
disabled={instanceSync.tokenFromEnv}
|
|
fullWidth
|
|
/>
|
|
<FormControlLabel
|
|
control={<Checkbox name="clearToken" />}
|
|
label="Remove existing token"
|
|
disabled={!instanceSync.slave?.hasToken || instanceSync.tokenFromEnv}
|
|
/>
|
|
<Box sx={{ display: "flex", justifyContent: "flex-end" }}>
|
|
<Button type="submit" variant="contained" disabled={instanceSync.tokenFromEnv}>
|
|
Save master token
|
|
</Button>
|
|
</Box>
|
|
</Stack>
|
|
<Alert severity={instanceSync.slave?.lastSyncError ? "warning" : "info"}>
|
|
{instanceSync.slave?.lastSyncAt
|
|
? `Last sync: ${instanceSync.slave.lastSyncAt}${instanceSync.slave.lastSyncError ? ` (${instanceSync.slave.lastSyncError})` : ""}`
|
|
: "No sync payload has been received yet."}
|
|
</Alert>
|
|
</Stack>
|
|
)}
|
|
|
|
{isMaster && (
|
|
<Stack spacing={2} sx={{ mt: 3 }}>
|
|
<Typography variant="subtitle1" fontWeight={600}>
|
|
Slave Instances
|
|
</Typography>
|
|
<Stack component="form" action={slaveInstanceFormAction} spacing={2}>
|
|
{slaveInstanceState?.message && (
|
|
<Alert severity={slaveInstanceState.success ? "success" : "error"}>
|
|
{slaveInstanceState.message}
|
|
</Alert>
|
|
)}
|
|
<TextField name="name" label="Instance name" placeholder="Edge node EU-1" fullWidth />
|
|
<TextField name="baseUrl" label="Base URL" placeholder="https://slave-1.example.com" fullWidth />
|
|
<TextField name="apiToken" label="Slave API token" type="password" autoComplete="new-password" fullWidth />
|
|
<Box sx={{ display: "flex", justifyContent: "flex-end" }}>
|
|
<Button type="submit" variant="contained">
|
|
Add slave instance
|
|
</Button>
|
|
</Box>
|
|
</Stack>
|
|
|
|
<Stack component="form" action={syncFormAction} spacing={2}>
|
|
{syncState?.message && (
|
|
<Alert severity={syncState.success ? "success" : "warning"}>
|
|
{syncState.message}
|
|
</Alert>
|
|
)}
|
|
<Box sx={{ display: "flex", justifyContent: "flex-end" }}>
|
|
<Button type="submit" variant="outlined">
|
|
Sync now
|
|
</Button>
|
|
</Box>
|
|
</Stack>
|
|
|
|
{instanceSync.master?.instances.length === 0 && instanceSync.master?.envInstances.length === 0 && (
|
|
<Alert severity="info">No slave instances configured yet.</Alert>
|
|
)}
|
|
|
|
{instanceSync.master?.envInstances && instanceSync.master.envInstances.length > 0 && (
|
|
<>
|
|
<Typography variant="subtitle2" color="text.secondary" sx={{ mt: 1 }}>
|
|
Environment-configured instances (via INSTANCE_SLAVES)
|
|
</Typography>
|
|
{instanceSync.master.envInstances.map((instance, index) => (
|
|
<Box
|
|
key={`env-${index}`}
|
|
sx={{
|
|
border: "1px solid",
|
|
borderColor: "divider",
|
|
borderRadius: 2,
|
|
p: 2,
|
|
display: "flex",
|
|
flexWrap: "wrap",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
gap: 2,
|
|
bgcolor: "action.hover"
|
|
}}
|
|
>
|
|
<Box>
|
|
<Typography fontWeight={600}>{instance.name}</Typography>
|
|
<Typography variant="body2" color="text.secondary">
|
|
{instance.url}
|
|
</Typography>
|
|
<Typography variant="caption" color="text.secondary">
|
|
Configured via environment variable
|
|
</Typography>
|
|
</Box>
|
|
</Box>
|
|
))}
|
|
</>
|
|
)}
|
|
|
|
{instanceSync.master?.instances && instanceSync.master.instances.length > 0 && (
|
|
<Typography variant="subtitle2" color="text.secondary" sx={{ mt: 1 }}>
|
|
UI-configured instances
|
|
</Typography>
|
|
)}
|
|
{instanceSync.master?.instances.map((instance) => (
|
|
<Box
|
|
key={instance.id}
|
|
sx={{
|
|
border: "1px solid",
|
|
borderColor: "divider",
|
|
borderRadius: 2,
|
|
p: 2,
|
|
display: "flex",
|
|
flexWrap: "wrap",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
gap: 2
|
|
}}
|
|
>
|
|
<Box>
|
|
<Typography fontWeight={600}>{instance.name}</Typography>
|
|
<Typography variant="body2" color="text.secondary">
|
|
{instance.base_url}
|
|
</Typography>
|
|
<Typography variant="caption" color="text.secondary">
|
|
{instance.last_sync_at ? `Last sync: ${instance.last_sync_at}` : "No sync yet"}
|
|
</Typography>
|
|
{instance.last_sync_error && (
|
|
<Typography variant="caption" color="error" display="block">
|
|
{instance.last_sync_error}
|
|
</Typography>
|
|
)}
|
|
</Box>
|
|
<Stack direction="row" spacing={1}>
|
|
<Box component="form" action={toggleSlaveInstanceAction}>
|
|
<input type="hidden" name="instanceId" value={instance.id} />
|
|
<input type="hidden" name="enabled" value={instance.enabled ? "" : "on"} />
|
|
<Button type="submit" variant="outlined" color={instance.enabled ? "warning" : "success"}>
|
|
{instance.enabled ? "Disable" : "Enable"}
|
|
</Button>
|
|
</Box>
|
|
<Box component="form" action={deleteSlaveInstanceAction}>
|
|
<input type="hidden" name="instanceId" value={instance.id} />
|
|
<Button type="submit" variant="outlined" color="error">
|
|
Remove
|
|
</Button>
|
|
</Box>
|
|
</Stack>
|
|
</Box>
|
|
))}
|
|
</Stack>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardContent>
|
|
<Typography variant="h6" fontWeight={600} gutterBottom>
|
|
General
|
|
</Typography>
|
|
<Stack component="form" action={generalFormAction} spacing={2}>
|
|
{generalState?.message && (
|
|
<Alert severity={generalState.success ? "success" : "error"}>
|
|
{generalState.message}
|
|
</Alert>
|
|
)}
|
|
{isSlave && (
|
|
<FormControlLabel
|
|
control={
|
|
<Checkbox
|
|
name="overrideEnabled"
|
|
checked={generalOverride}
|
|
onChange={(event) => setGeneralOverride(event.target.checked)}
|
|
/>
|
|
}
|
|
label="Override master settings"
|
|
/>
|
|
)}
|
|
<TextField
|
|
name="primaryDomain"
|
|
label="Primary domain"
|
|
defaultValue={general?.primaryDomain ?? "caddyproxymanager.com"}
|
|
required
|
|
disabled={isSlave && !generalOverride}
|
|
fullWidth
|
|
/>
|
|
<TextField
|
|
name="acmeEmail"
|
|
label="ACME contact email"
|
|
type="email"
|
|
defaultValue={general?.acmeEmail ?? ""}
|
|
disabled={isSlave && !generalOverride}
|
|
fullWidth
|
|
/>
|
|
<Box sx={{ display: "flex", justifyContent: "flex-end" }}>
|
|
<Button type="submit" variant="contained">
|
|
Save general settings
|
|
</Button>
|
|
</Box>
|
|
</Stack>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardContent>
|
|
<Typography variant="h6" fontWeight={600} gutterBottom>
|
|
Cloudflare DNS
|
|
</Typography>
|
|
<Typography color="text.secondary" variant="body2" sx={{ mb: 2 }}>
|
|
Configure a Cloudflare API token with Zone.DNS Edit permissions to enable DNS-01 challenges for wildcard certificates.
|
|
</Typography>
|
|
{cloudflare.hasToken && (
|
|
<Alert severity="info">
|
|
A Cloudflare API token is already configured. Leave the token field blank to keep it, or select “Remove existing token” to delete it.
|
|
</Alert>
|
|
)}
|
|
<Stack component="form" action={cloudflareFormAction} spacing={2}>
|
|
{cloudflareState?.message && (
|
|
<Alert severity={cloudflareState.success ? "success" : "warning"}>
|
|
{cloudflareState.message}
|
|
</Alert>
|
|
)}
|
|
{isSlave && (
|
|
<FormControlLabel
|
|
control={
|
|
<Checkbox
|
|
name="overrideEnabled"
|
|
checked={cloudflareOverride}
|
|
onChange={(event) => setCloudflareOverride(event.target.checked)}
|
|
/>
|
|
}
|
|
label="Override master settings"
|
|
/>
|
|
)}
|
|
<TextField
|
|
name="apiToken"
|
|
label="API token"
|
|
type="password"
|
|
autoComplete="new-password"
|
|
placeholder="Enter new token"
|
|
disabled={isSlave && !cloudflareOverride}
|
|
fullWidth
|
|
/>
|
|
<FormControlLabel
|
|
control={<Checkbox name="clearToken" />}
|
|
label="Remove existing token"
|
|
disabled={!cloudflare.hasToken || (isSlave && !cloudflareOverride)}
|
|
/>
|
|
<TextField name="zoneId" label="Zone ID" defaultValue={cloudflare.zoneId ?? ""} disabled={isSlave && !cloudflareOverride} fullWidth />
|
|
<TextField name="accountId" label="Account ID" defaultValue={cloudflare.accountId ?? ""} disabled={isSlave && !cloudflareOverride} fullWidth />
|
|
<Box sx={{ display: "flex", justifyContent: "flex-end" }}>
|
|
<Button type="submit" variant="contained">
|
|
Save Cloudflare settings
|
|
</Button>
|
|
</Box>
|
|
</Stack>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardContent>
|
|
<Typography variant="h6" fontWeight={600} gutterBottom>
|
|
DNS Resolvers
|
|
</Typography>
|
|
<Typography color="text.secondary" variant="body2" sx={{ mb: 2 }}>
|
|
Configure custom DNS resolvers for ACME DNS-01 challenges. These resolvers will be used to verify DNS records during certificate issuance.
|
|
</Typography>
|
|
<Stack component="form" action={dnsFormAction} spacing={2}>
|
|
{dnsState?.message && (
|
|
<Alert severity={dnsState.success ? "success" : "error"}>
|
|
{dnsState.message}
|
|
</Alert>
|
|
)}
|
|
{isSlave && (
|
|
<FormControlLabel
|
|
control={
|
|
<Checkbox
|
|
name="overrideEnabled"
|
|
checked={dnsOverride}
|
|
onChange={(event) => setDnsOverride(event.target.checked)}
|
|
/>
|
|
}
|
|
label="Override master settings"
|
|
/>
|
|
)}
|
|
<FormControlLabel
|
|
control={<Checkbox name="enabled" defaultChecked={dns?.enabled ?? false} disabled={isSlave && !dnsOverride} />}
|
|
label="Enable custom DNS resolvers"
|
|
/>
|
|
<TextField
|
|
name="resolvers"
|
|
label="Primary DNS Resolvers"
|
|
placeholder="1.1.1.1 8.8.8.8"
|
|
defaultValue={dns?.resolvers?.join("\n") ?? ""}
|
|
helperText="One resolver per line (e.g., 1.1.1.1, 8.8.8.8). Used for ACME DNS verification."
|
|
multiline
|
|
minRows={2}
|
|
disabled={isSlave && !dnsOverride}
|
|
fullWidth
|
|
/>
|
|
<TextField
|
|
name="fallbacks"
|
|
label="Fallback DNS Resolvers (Optional)"
|
|
placeholder="8.8.4.4 1.0.0.1"
|
|
defaultValue={dns?.fallbacks?.join("\n") ?? ""}
|
|
helperText="Fallback resolvers if primary fails. One per line."
|
|
multiline
|
|
minRows={2}
|
|
disabled={isSlave && !dnsOverride}
|
|
fullWidth
|
|
/>
|
|
<TextField
|
|
name="timeout"
|
|
label="DNS Query Timeout"
|
|
placeholder="5s"
|
|
defaultValue={dns?.timeout ?? ""}
|
|
helperText="Timeout for DNS queries (e.g., 5s, 10s)"
|
|
disabled={isSlave && !dnsOverride}
|
|
fullWidth
|
|
/>
|
|
<Alert severity="info">
|
|
Custom DNS resolvers are useful when your DNS provider has slow propagation or when using split-horizon DNS.
|
|
Common public resolvers: 1.1.1.1 (Cloudflare), 8.8.8.8 (Google), 9.9.9.9 (Quad9).
|
|
</Alert>
|
|
<Box sx={{ display: "flex", justifyContent: "flex-end" }}>
|
|
<Button type="submit" variant="contained">
|
|
Save DNS settings
|
|
</Button>
|
|
</Box>
|
|
</Stack>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardContent>
|
|
<Typography variant="h6" fontWeight={600} gutterBottom>
|
|
Authentik Defaults
|
|
</Typography>
|
|
<Typography color="text.secondary" variant="body2" sx={{ mb: 2 }}>
|
|
Set default Authentik forward authentication values. These will be pre-filled when creating new proxy hosts but can be customized per host.
|
|
</Typography>
|
|
<Stack component="form" action={authentikFormAction} spacing={2}>
|
|
{authentikState?.message && (
|
|
<Alert severity={authentikState.success ? "success" : "error"}>
|
|
{authentikState.message}
|
|
</Alert>
|
|
)}
|
|
{isSlave && (
|
|
<FormControlLabel
|
|
control={
|
|
<Checkbox
|
|
name="overrideEnabled"
|
|
checked={authentikOverride}
|
|
onChange={(event) => setAuthentikOverride(event.target.checked)}
|
|
/>
|
|
}
|
|
label="Override master settings"
|
|
/>
|
|
)}
|
|
<TextField
|
|
name="outpostDomain"
|
|
label="Outpost Domain"
|
|
placeholder="outpost.goauthentik.io"
|
|
defaultValue={authentik?.outpostDomain ?? ""}
|
|
helperText="Authentik outpost domain"
|
|
required
|
|
disabled={isSlave && !authentikOverride}
|
|
fullWidth
|
|
/>
|
|
<TextField
|
|
name="outpostUpstream"
|
|
label="Outpost Upstream"
|
|
placeholder="http://authentik-server:9000"
|
|
defaultValue={authentik?.outpostUpstream ?? ""}
|
|
helperText="Internal URL of Authentik outpost"
|
|
required
|
|
disabled={isSlave && !authentikOverride}
|
|
fullWidth
|
|
/>
|
|
<TextField
|
|
name="authEndpoint"
|
|
label="Authpost Endpoint"
|
|
placeholder="/outpost.goauthentik.io/auth/caddy"
|
|
defaultValue={authentik?.authEndpoint ?? ""}
|
|
helperText="Authpost endpoint path"
|
|
disabled={isSlave && !authentikOverride}
|
|
fullWidth
|
|
/>
|
|
<Box sx={{ display: "flex", justifyContent: "flex-end" }}>
|
|
<Button type="submit" variant="contained">
|
|
Save Authentik defaults
|
|
</Button>
|
|
</Box>
|
|
</Stack>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardContent>
|
|
<Typography variant="h6" fontWeight={600} gutterBottom>
|
|
Metrics & Monitoring
|
|
</Typography>
|
|
<Typography color="text.secondary" variant="body2" sx={{ mb: 2 }}>
|
|
Enable Caddy metrics exposure for monitoring with Prometheus, Grafana, or other observability tools.
|
|
Metrics will be available at http://caddy:{metrics?.port ?? 9090}/metrics on a separate port (NOT the admin API port for security).
|
|
</Typography>
|
|
<Stack component="form" action={metricsFormAction} spacing={2}>
|
|
{metricsState?.message && (
|
|
<Alert severity={metricsState.success ? "success" : "warning"}>
|
|
{metricsState.message}
|
|
</Alert>
|
|
)}
|
|
{isSlave && (
|
|
<FormControlLabel
|
|
control={
|
|
<Checkbox
|
|
name="overrideEnabled"
|
|
checked={metricsOverride}
|
|
onChange={(event) => setMetricsOverride(event.target.checked)}
|
|
/>
|
|
}
|
|
label="Override master settings"
|
|
/>
|
|
)}
|
|
<FormControlLabel
|
|
control={<Checkbox name="enabled" defaultChecked={metrics?.enabled ?? false} disabled={isSlave && !metricsOverride} />}
|
|
label="Enable metrics endpoint"
|
|
/>
|
|
<TextField
|
|
name="port"
|
|
label="Metrics Port"
|
|
type="number"
|
|
defaultValue={metrics?.port ?? 9090}
|
|
helperText="Port to expose metrics on (default: 9090, separate from admin API on 2019)"
|
|
disabled={isSlave && !metricsOverride}
|
|
fullWidth
|
|
/>
|
|
<Alert severity="info">
|
|
After enabling metrics, configure your monitoring tool to scrape http://caddy-proxy-manager-caddy:{metrics?.port ?? 9090}/metrics from within the Docker network.
|
|
To expose metrics externally, add a port mapping like "{metrics?.port ?? 9090}:{metrics?.port ?? 9090}" in docker-compose.yml.
|
|
</Alert>
|
|
<Box sx={{ display: "flex", justifyContent: "flex-end" }}>
|
|
<Button type="submit" variant="contained">
|
|
Save metrics settings
|
|
</Button>
|
|
</Box>
|
|
</Stack>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardContent>
|
|
<Typography variant="h6" fontWeight={600} gutterBottom>
|
|
Access Logging
|
|
</Typography>
|
|
<Typography color="text.secondary" variant="body2" sx={{ mb: 2 }}>
|
|
Enable HTTP access logging to track all requests going through your proxy hosts.
|
|
Logs will be stored in the caddy-logs directory and mounted at /logs/access.log inside the container.
|
|
</Typography>
|
|
<Stack component="form" action={loggingFormAction} spacing={2}>
|
|
{loggingState?.message && (
|
|
<Alert severity={loggingState.success ? "success" : "warning"}>
|
|
{loggingState.message}
|
|
</Alert>
|
|
)}
|
|
{isSlave && (
|
|
<FormControlLabel
|
|
control={
|
|
<Checkbox
|
|
name="overrideEnabled"
|
|
checked={loggingOverride}
|
|
onChange={(event) => setLoggingOverride(event.target.checked)}
|
|
/>
|
|
}
|
|
label="Override master settings"
|
|
/>
|
|
)}
|
|
<FormControlLabel
|
|
control={<Checkbox name="enabled" defaultChecked={logging?.enabled ?? false} disabled={isSlave && !loggingOverride} />}
|
|
label="Enable access logging"
|
|
/>
|
|
<TextField
|
|
name="format"
|
|
label="Log Format"
|
|
select
|
|
defaultValue={logging?.format ?? "json"}
|
|
helperText="Format for access logs"
|
|
disabled={isSlave && !loggingOverride}
|
|
fullWidth
|
|
>
|
|
<MenuItem value="json">JSON</MenuItem>
|
|
<MenuItem value="console">Console (Common Log Format)</MenuItem>
|
|
</TextField>
|
|
<Alert severity="info">
|
|
Access logs are stored in the caddy-logs Docker volume.
|
|
You can view them with: docker exec caddy-proxy-manager-caddy tail -f /logs/access.log
|
|
</Alert>
|
|
<Box sx={{ display: "flex", justifyContent: "flex-end" }}>
|
|
<Button type="submit" variant="contained">
|
|
Save logging settings
|
|
</Button>
|
|
</Box>
|
|
</Stack>
|
|
</CardContent>
|
|
</Card>
|
|
</Stack>
|
|
);
|
|
}
|