mirror of
https://github.com/bluewave-labs/Checkmate.git
synced 2025-12-22 10:47:08 +00:00
Merge branch 'develop' into feat/choose-disks-monitor
This commit is contained in:
Alexander Holliday
@@ -26,6 +26,7 @@ Edit `values.yaml` to update:
|
||||
- Old: `persistence.redisSize` → New: `persistence.redis.size`
|
||||
- Add: `persistence.mongo.storageClass` and `persistence.redis.storageClass` (leave empty for default)
|
||||
- Secrets under the `secrets` section (`JWT_SECRET`, email credentials, API keys, etc.) — replace all change_me values
|
||||
- **For TLS/HTTPS**: Configure ingress TLS settings (see section below)
|
||||
|
||||
### 3. Deploy the Helm chart
|
||||
```bash
|
||||
@@ -41,3 +42,75 @@ kubectl get svc
|
||||
```
|
||||
|
||||
Once all pods are `Running` and `Ready`, you can access Checkmate via the configured ingress hosts.
|
||||
|
||||
## Enabling TLS/HTTPS with cert-manager
|
||||
|
||||
If you have [cert-manager](https://cert-manager.io/) installed in your cluster, you can enable automatic TLS certificate provisioning using Let's Encrypt or other certificate issuers.
|
||||
|
||||
### Prerequisites
|
||||
- cert-manager installed in your cluster
|
||||
- A ClusterIssuer or Issuer configured (e.g., `letsencrypt-prod`)
|
||||
|
||||
### Configuration
|
||||
|
||||
Edit `values.yaml` to enable TLS (and update protocols to https):
|
||||
|
||||
```yaml
|
||||
client:
|
||||
protocol: https
|
||||
ingress:
|
||||
enabled: true
|
||||
host: checkmate.example.com
|
||||
className: nginx
|
||||
annotations:
|
||||
cert-manager.io/cluster-issuer: "letsencrypt-prod"
|
||||
tls:
|
||||
enabled: true
|
||||
secretName: checkmate-client-tls
|
||||
|
||||
server:
|
||||
protocol: https
|
||||
ingress:
|
||||
enabled: true
|
||||
host: checkmate.example.com
|
||||
className: nginx
|
||||
annotations:
|
||||
cert-manager.io/cluster-issuer: "letsencrypt-prod"
|
||||
tls:
|
||||
enabled: true
|
||||
secretName: checkmate-server-tls
|
||||
```
|
||||
|
||||
### Alternative: Using --set flags
|
||||
|
||||
You can also enable TLS during installation using Helm's `--set` flags:
|
||||
|
||||
```bash
|
||||
helm install checkmate ./charts/helm/checkmate \
|
||||
--set client.protocol=https \
|
||||
--set server.protocol=https \
|
||||
--set client.ingress.annotations."cert-manager\.io/cluster-issuer"="letsencrypt-prod" \
|
||||
--set client.ingress.tls.enabled=true \
|
||||
--set client.ingress.tls.secretName=checkmate-client-tls \
|
||||
--set server.ingress.annotations."cert-manager\.io/cluster-issuer"="letsencrypt-prod" \
|
||||
--set server.ingress.tls.enabled=true \
|
||||
--set server.ingress.tls.secretName=checkmate-server-tls
|
||||
```
|
||||
|
||||
### Verification
|
||||
|
||||
After deployment, cert-manager will automatically create the TLS secrets. You can verify the certificate status:
|
||||
|
||||
```bash
|
||||
# Check certificates
|
||||
kubectl get certificates
|
||||
|
||||
# Check certificate details
|
||||
kubectl describe certificate checkmate-client-tls
|
||||
kubectl describe certificate checkmate-server-tls
|
||||
|
||||
# Verify the secrets were created
|
||||
kubectl get secrets | grep checkmate-tls
|
||||
```
|
||||
|
||||
The ingress will automatically use these secrets to enable HTTPS access to your Checkmate instance.
|
||||
|
||||
@@ -1,12 +0,0 @@
|
||||
{{- if eq .Values.client.ingress.host "change_me" }}
|
||||
{{- fail "client.ingress.host must be overridden and not set to 'change_me'" }}
|
||||
{{- end }}
|
||||
|
||||
{{- if eq .Values.server.ingress.host "change_me" }}
|
||||
{{- fail "server.ingress.host must be overridden and not set to 'change_me'" }}
|
||||
{{- end }}
|
||||
|
||||
{{- $protocol := .Values.server.protocol }}
|
||||
{{- if not (or (eq $protocol "http") (eq $protocol "https")) }}
|
||||
{{- fail "server.protocol must be either 'http' or 'https'" }}
|
||||
{{- end }}
|
||||
@@ -11,6 +11,12 @@ metadata:
|
||||
{{- end }}
|
||||
spec:
|
||||
ingressClassName: {{ .Values.client.ingress.className }}
|
||||
{{- if .Values.client.ingress.tls.enabled }}
|
||||
tls:
|
||||
- hosts:
|
||||
- {{ .Values.client.ingress.host }}
|
||||
secretName: {{ default (printf "%s-client-tls" .Release.Name) .Values.client.ingress.tls.secretName }}
|
||||
{{- end }}
|
||||
rules:
|
||||
- host: {{ .Values.client.ingress.host }}
|
||||
http:
|
||||
|
||||
48
charts/helm/checkmate/templates/prechecks.yaml
Normal file
48
charts/helm/checkmate/templates/prechecks.yaml
Normal file
@@ -0,0 +1,48 @@
|
||||
{{- if eq .Values.client.ingress.host "change_me" }}
|
||||
{{- fail "client.ingress.host must be overridden and not set to 'change_me'" }}
|
||||
{{- end }}
|
||||
|
||||
{{- if eq .Values.server.ingress.host "change_me" }}
|
||||
{{- fail "server.ingress.host must be overridden and not set to 'change_me'" }}
|
||||
{{- end }}
|
||||
|
||||
{{- $serverProtocol := .Values.server.protocol }}
|
||||
{{- if not (or (eq $serverProtocol "http") (eq $serverProtocol "https")) }}
|
||||
{{- fail "server.protocol must be either 'http' or 'https'" }}
|
||||
{{- end }}
|
||||
|
||||
{{- $clientProtocol := .Values.client.protocol }}
|
||||
{{- if not (or (eq $clientProtocol "http") (eq $clientProtocol "https")) }}
|
||||
{{- fail "client.protocol must be either 'http' or 'https'" }}
|
||||
{{- end }}
|
||||
|
||||
{{/* Enforce protocol when TLS is enabled to avoid mixed-content */}}
|
||||
{{- if and .Values.client.ingress.tls.enabled (ne $clientProtocol "https") }}
|
||||
{{- fail "client.ingress.tls.enabled is true but client.protocol is not 'https'. Set client.protocol: https to avoid mixed content." }}
|
||||
{{- end }}
|
||||
|
||||
{{- if and .Values.server.ingress.tls.enabled (ne $serverProtocol "https") }}
|
||||
{{- fail "server.ingress.tls.enabled is true but server.protocol is not 'https'. Set server.protocol: https to ensure correct API base URL." }}
|
||||
{{- end }}
|
||||
|
||||
{{/* If client runs on https, API must also be https to avoid mixed content */}}
|
||||
{{- if and (eq $clientProtocol "https") (ne $serverProtocol "https") }}
|
||||
{{- fail "client.protocol is 'https' but server.protocol is not. Set server.protocol: https to prevent browser mixed-content issues." }}
|
||||
{{- end }}
|
||||
|
||||
{{/* Fail early if TLS enabled without cert-manager annotations (cluster-issuer or issuer) */}}
|
||||
{{- $cAnn := .Values.client.ingress.annotations | default dict }}
|
||||
{{- $sAnn := .Values.server.ingress.annotations | default dict }}
|
||||
|
||||
{{- $clientHasIssuer := or (hasKey $cAnn "cert-manager.io/cluster-issuer") (hasKey $cAnn "cert-manager.io/issuer") }}
|
||||
{{- $serverHasIssuer := or (hasKey $sAnn "cert-manager.io/cluster-issuer") (hasKey $sAnn "cert-manager.io/issuer") }}
|
||||
|
||||
{{- if and .Values.client.ingress.tls.enabled (not $clientHasIssuer) }}
|
||||
{{- fail "client.ingress.tls.enabled is true but no cert-manager issuer annotation found. Add 'cert-manager.io/cluster-issuer' or 'cert-manager.io/issuer'." }}
|
||||
{{- end }}
|
||||
|
||||
{{- if and .Values.server.ingress.tls.enabled (not $serverHasIssuer) }}
|
||||
{{- fail "server.ingress.tls.enabled is true but no cert-manager issuer annotation found. Add 'cert-manager.io/cluster-issuer' or 'cert-manager.io/issuer'." }}
|
||||
{{- end }}
|
||||
|
||||
{{/* Secret name can be omitted; we default to <release>-client|server-tls in templates */}}
|
||||
@@ -18,6 +18,12 @@ metadata:
|
||||
#nginx.ingress.kubernetes.io/cors-allow-credentials: "true"*/}}
|
||||
spec:
|
||||
ingressClassName: {{ .Values.server.ingress.className }}
|
||||
{{- if .Values.server.ingress.tls.enabled }}
|
||||
tls:
|
||||
- hosts:
|
||||
- {{ .Values.server.ingress.host }}
|
||||
secretName: {{ default (printf "%s-server-tls" .Release.Name) .Values.server.ingress.tls.secretName }}
|
||||
{{- end }}
|
||||
rules:
|
||||
- host: {{ .Values.server.ingress.host }}
|
||||
http:
|
||||
|
||||
@@ -7,6 +7,15 @@ client:
|
||||
host: change_me
|
||||
className: nginx
|
||||
annotations: {}
|
||||
# Example annotations for cert-manager:
|
||||
# annotations:
|
||||
# cert-manager.io/cluster-issuer: "letsencrypt-prod"
|
||||
tls:
|
||||
enabled: false
|
||||
# secretName: {{ .Release.Name }}-client-tls # Optional; defaults to <release>-client-tls if omitted
|
||||
# Note: when enabling TLS, also set client.protocol: https and add
|
||||
# a cert-manager issuer annotation (e.g. cert-manager.io/cluster-issuer: "letsencrypt-prod").
|
||||
# The secret will be automatically created by cert-manager when using the cert-manager.io/cluster-issuer annotation
|
||||
|
||||
server:
|
||||
image: ghcr.io/bluewave-labs/checkmate-backend:v3.2.0
|
||||
@@ -17,6 +26,15 @@ server:
|
||||
host: change_me
|
||||
className: nginx
|
||||
annotations: {}
|
||||
# Example annotations for cert-manager:
|
||||
# annotations:
|
||||
# cert-manager.io/cluster-issuer: "letsencrypt-prod"
|
||||
tls:
|
||||
enabled: false
|
||||
# secretName: {{ .Release.Name }}-server-tls # Optional; defaults to <release>-server-tls if omitted
|
||||
# Note: when enabling TLS, also set server.protocol: https and add
|
||||
# a cert-manager issuer annotation (e.g. cert-manager.io/cluster-issuer: "letsencrypt-prod").
|
||||
# The secret will be automatically created by cert-manager when using the cert-manager.io/cluster-issuer annotation
|
||||
|
||||
redis:
|
||||
enabled: false
|
||||
|
||||
@@ -40,13 +40,13 @@ const GenericFallback = ({ children }) => {
|
||||
<Box
|
||||
component="img"
|
||||
src={mode === "light" ? OutputAnimation : DarkmodeOutput}
|
||||
Background="transparent"
|
||||
alt="Loading animation"
|
||||
sx={{
|
||||
zIndex: 1,
|
||||
border: "none",
|
||||
borderRadius: theme.spacing(8),
|
||||
width: "100%",
|
||||
backgroundColor: "transparent",
|
||||
}}
|
||||
/>
|
||||
<Box
|
||||
|
||||
@@ -48,6 +48,7 @@ const getMenu = (t) => [
|
||||
path: "notifications",
|
||||
icon: <Notifications />,
|
||||
},
|
||||
{ name: t("menu.checks"), path: "checks", icon: <Docs /> },
|
||||
{ name: t("menu.incidents"), path: "incidents", icon: <Incidents /> },
|
||||
|
||||
{ name: t("menu.statusPages"), path: "status", icon: <StatusPages /> },
|
||||
|
||||
@@ -1,53 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
import Menu from "@mui/material/Menu";
|
||||
import MenuItem from "@mui/material/MenuItem";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
import Settings from "@/assets/icons/settings-bold.svg?react";
|
||||
|
||||
export type ActionMenuItem = {
|
||||
id: number | string;
|
||||
label: React.ReactNode;
|
||||
action: Function;
|
||||
closeMenu?: boolean;
|
||||
};
|
||||
|
||||
export const ActionsMenu = ({ items }: { items: ActionMenuItem[] }) => {
|
||||
const [anchorEl, setAnchorEl] = useState<null | any>(null);
|
||||
const open = Boolean(anchorEl);
|
||||
|
||||
const handleClick = (e: React.MouseEvent<any>) => {
|
||||
e.stopPropagation();
|
||||
setAnchorEl(e.currentTarget);
|
||||
};
|
||||
|
||||
const handleClose = (e: React.MouseEvent<any>) => {
|
||||
e.stopPropagation();
|
||||
setAnchorEl(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<IconButton onClick={handleClick}>
|
||||
<Settings />
|
||||
</IconButton>
|
||||
<Menu
|
||||
anchorEl={anchorEl}
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
>
|
||||
{items.map((item) => (
|
||||
<MenuItem
|
||||
key={item.id}
|
||||
onClick={(e: React.MouseEvent<HTMLLIElement>) => {
|
||||
e.stopPropagation();
|
||||
if (item.closeMenu) handleClose(e);
|
||||
item.action();
|
||||
}}
|
||||
>
|
||||
{item.label}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Menu>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,36 +0,0 @@
|
||||
import LeftArrow from "@/assets/icons/left-arrow.svg?react";
|
||||
import LeftArrowDouble from "@/assets/icons/left-arrow-double.svg?react";
|
||||
import LeftArrowLong from "@/assets/icons/left-arrow-long.svg?react";
|
||||
|
||||
export const ArrowLeft = ({
|
||||
type,
|
||||
color = "#667085",
|
||||
...props
|
||||
}: {
|
||||
type?: string;
|
||||
color?: string | undefined;
|
||||
[key: string]: any;
|
||||
}) => {
|
||||
if (type === "double") {
|
||||
return (
|
||||
<LeftArrowDouble
|
||||
style={{ color }}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
} else if (type === "long") {
|
||||
return (
|
||||
<LeftArrowLong
|
||||
style={{ color }}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<LeftArrow
|
||||
style={{ color }}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
};
|
||||
@@ -1,28 +0,0 @@
|
||||
import RightArrow from "@/assets/icons/right-arrow.svg?react";
|
||||
import RightArrowDouble from "@/assets/icons/right-arrow-double.svg?react";
|
||||
|
||||
export const ArrowRight = ({
|
||||
type,
|
||||
color = "#667085",
|
||||
...props
|
||||
}: {
|
||||
type?: string;
|
||||
color?: string | undefined;
|
||||
[key: string]: any;
|
||||
}) => {
|
||||
if (type === "double") {
|
||||
return (
|
||||
<RightArrowDouble
|
||||
style={{ color }}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<RightArrow
|
||||
style={{ color }}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
};
|
||||
@@ -1,48 +0,0 @@
|
||||
import Stack from "@mui/material/Stack";
|
||||
import Box from "@mui/material/Box";
|
||||
import { HeaderAuth } from "@/Components/v2/Auth";
|
||||
import Logo from "@/assets/icons/checkmate-icon.svg?react";
|
||||
|
||||
import type { StackProps } from "@mui/material/Stack";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import { Typography } from "@mui/material";
|
||||
|
||||
interface AuthBasePageProps extends StackProps {
|
||||
title?: string;
|
||||
subtitle?: string;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export const AuthBasePage: React.FC<AuthBasePageProps> = ({
|
||||
children,
|
||||
title,
|
||||
subtitle,
|
||||
...props
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<Stack
|
||||
gap={theme.spacing(10)}
|
||||
minHeight="100vh"
|
||||
{...props}
|
||||
>
|
||||
<HeaderAuth />
|
||||
<Stack
|
||||
alignItems="center"
|
||||
margin="auto"
|
||||
width="100%"
|
||||
gap={theme.spacing(4)}
|
||||
>
|
||||
<Box
|
||||
width={{ xs: 60, sm: 70, md: 80 }}
|
||||
mb={theme.spacing(10)}
|
||||
>
|
||||
<Logo style={{ width: "100%", height: "100%" }} />
|
||||
</Box>
|
||||
<Typography variant="h1">{title}</Typography>
|
||||
<Typography variant="h1">{subtitle}</Typography>
|
||||
{children}
|
||||
</Stack>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
@@ -1,26 +0,0 @@
|
||||
import Stack from "@mui/material/Stack";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import Logo from "@/assets/icons/checkmate-icon.svg?react";
|
||||
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { LanguageSelector, ThemeSwitch } from "@/Components/v2/Inputs";
|
||||
|
||||
export const HeaderAuth = () => {
|
||||
const theme = useTheme();
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<Stack
|
||||
width={"100%"}
|
||||
direction="row"
|
||||
alignItems="center"
|
||||
justifyContent="flex-end"
|
||||
py={theme.spacing(4)}
|
||||
px={theme.spacing(12)}
|
||||
gap={theme.spacing(4)}
|
||||
>
|
||||
<LanguageSelector />
|
||||
<ThemeSwitch color="red" />
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
@@ -1,2 +0,0 @@
|
||||
export { HeaderAuth } from "./HeaderAuth";
|
||||
export { AuthBasePage } from "./AuthBasePage";
|
||||
@@ -1,23 +0,0 @@
|
||||
import Box from "@mui/material/Box";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import type { SxProps } from "@mui/material/styles";
|
||||
|
||||
type BaseBoxProps = React.PropsWithChildren<{ sx?: SxProps }>;
|
||||
|
||||
export const BaseBox: React.FC<BaseBoxProps> = ({ children, sx }) => {
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
border: 1,
|
||||
borderStyle: "solid",
|
||||
borderColor: theme.palette.primary.lowContrast,
|
||||
borderRadius: theme.shape.borderRadius,
|
||||
...sx,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
@@ -1,80 +0,0 @@
|
||||
import Stack from "@mui/material/Stack";
|
||||
import { ErrorFallback, EmptyFallback } from "./Fallback";
|
||||
|
||||
import type { StackProps } from "@mui/material/Stack";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import { useTranslation } from "react-i18next";
|
||||
interface BasePageProps extends StackProps {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export const BasePage: React.FC<BasePageProps> = ({
|
||||
children,
|
||||
...props
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<Stack
|
||||
spacing={theme.spacing(10)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
interface BasePageWithStatesProps extends StackProps {
|
||||
loading: boolean;
|
||||
error: any;
|
||||
items: any[];
|
||||
page: string;
|
||||
actionLink?: string;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
const isEmpty = (items: any[]) => {
|
||||
if (!items) return true;
|
||||
if (Array.isArray(items) && items.length === 0) return true;
|
||||
return false;
|
||||
};
|
||||
|
||||
export const BasePageWithStates: React.FC<BasePageWithStatesProps> = ({
|
||||
loading,
|
||||
error,
|
||||
items,
|
||||
page,
|
||||
actionLink,
|
||||
children,
|
||||
...props
|
||||
}: BasePageWithStatesProps) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
if (loading) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<ErrorFallback
|
||||
title="Something went wrong..."
|
||||
subtitle="Please try again later"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (isEmpty(items)) {
|
||||
return (
|
||||
<EmptyFallback
|
||||
page={page}
|
||||
title={t(`${page}Monitor.fallback.title`)}
|
||||
bullets={t(`${page}Monitor.fallback.checks`, { returnObjects: true })}
|
||||
actionButtonText={t(`${page}Monitor.fallback.actionButton`)}
|
||||
actionLink={actionLink || ""}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return <BasePage {...props}>{children}</BasePage>;
|
||||
};
|
||||
@@ -1,45 +0,0 @@
|
||||
import Stack from "@mui/material/Stack";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import CheckOutlined from "@/assets/icons/check-outlined.svg?react";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
|
||||
export const BulletPointCheck = ({
|
||||
text,
|
||||
variant = "info",
|
||||
}: {
|
||||
text: string;
|
||||
noHighlightText?: string;
|
||||
variant?: "success" | "error" | "info";
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
const colors: Record<string, string | undefined> = {
|
||||
success: theme.palette.success.main,
|
||||
error: theme.palette.error.main,
|
||||
info: theme.palette.primary.contrastTextSecondary,
|
||||
};
|
||||
|
||||
return (
|
||||
<Stack
|
||||
direction="row"
|
||||
className="check"
|
||||
gap={theme.spacing(6)}
|
||||
alignItems="center"
|
||||
>
|
||||
<CheckOutlined />
|
||||
<Typography
|
||||
component="span"
|
||||
color={
|
||||
variant === "info"
|
||||
? theme.palette.primary.contrastTextSecondary
|
||||
: colors[variant]
|
||||
}
|
||||
fontWeight={450}
|
||||
sx={{
|
||||
opacity: 0.9,
|
||||
}}
|
||||
>
|
||||
{text}
|
||||
</Typography>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
@@ -1,23 +0,0 @@
|
||||
export const Dot = ({
|
||||
color = "gray",
|
||||
size = "4px",
|
||||
style,
|
||||
}: {
|
||||
color?: string;
|
||||
size?: string;
|
||||
style?: React.CSSProperties;
|
||||
}) => {
|
||||
return (
|
||||
<span
|
||||
style={{
|
||||
content: '""',
|
||||
width: size,
|
||||
height: size,
|
||||
borderRadius: "50%",
|
||||
backgroundColor: color,
|
||||
opacity: 0.8,
|
||||
...style,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@@ -1,158 +0,0 @@
|
||||
import Box from "@mui/material/Box";
|
||||
import Stack from "@mui/material/Stack";
|
||||
import OutputAnimation from "@/assets/Animations/output.gif";
|
||||
import DarkmodeOutput from "@/assets/Animations/darkmodeOutput.gif";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import { BulletPointCheck } from "@/Components/v2/DesignElements";
|
||||
import { Button } from "@/Components/v2/Inputs";
|
||||
|
||||
import { useNavigate } from "react-router";
|
||||
import { useMediaQuery } from "@mui/material";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import { useSelector } from "react-redux";
|
||||
|
||||
import type { BoxProps } from "@mui/material";
|
||||
|
||||
interface BaseFallbackProps extends BoxProps {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export const BaseFallback: React.FC<BaseFallbackProps> = ({ children, ...props }) => {
|
||||
const theme = useTheme();
|
||||
const mode = useSelector((state: any) => state.ui.mode);
|
||||
const isSmall = useMediaQuery(theme.breakpoints.down("md"));
|
||||
|
||||
return (
|
||||
<Box
|
||||
margin={isSmall ? "inherit" : "auto"}
|
||||
marginTop={isSmall ? "33%" : "auto"}
|
||||
width={{
|
||||
sm: "90%",
|
||||
md: "70%",
|
||||
lg: "50%",
|
||||
xl: "40%",
|
||||
}}
|
||||
padding={theme.spacing(16)}
|
||||
bgcolor={theme.palette.primary.main}
|
||||
position="relative"
|
||||
border={1}
|
||||
borderColor={theme.palette.primary.lowContrast}
|
||||
borderRadius={theme.shape.borderRadius}
|
||||
overflow="hidden"
|
||||
sx={{
|
||||
borderStyle: "dashed",
|
||||
}}
|
||||
{...props}
|
||||
>
|
||||
<Stack
|
||||
alignItems="center"
|
||||
gap={theme.spacing(20)}
|
||||
sx={{
|
||||
width: "fit-content",
|
||||
margin: "auto",
|
||||
marginTop: "100px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
component="img"
|
||||
src={mode === "light" ? OutputAnimation : DarkmodeOutput}
|
||||
bgcolor="transparent"
|
||||
alt="Loading animation"
|
||||
width="100%"
|
||||
sx={{
|
||||
zIndex: 1,
|
||||
border: "none",
|
||||
borderRadius: theme.spacing(8),
|
||||
}}
|
||||
/>
|
||||
|
||||
<Stack
|
||||
gap={theme.spacing(4)}
|
||||
alignItems="center"
|
||||
maxWidth={"300px"}
|
||||
zIndex={1}
|
||||
>
|
||||
{children}
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export const ErrorFallback = ({
|
||||
title,
|
||||
subtitle,
|
||||
}: {
|
||||
title: string;
|
||||
subtitle: string;
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<BaseFallback>
|
||||
<Typography
|
||||
variant="h1"
|
||||
marginY={theme.spacing(4)}
|
||||
color={theme.palette.primary.contrastTextTertiary}
|
||||
>
|
||||
{title}
|
||||
</Typography>
|
||||
<Typography>{subtitle}</Typography>
|
||||
</BaseFallback>
|
||||
);
|
||||
};
|
||||
|
||||
export const EmptyFallback = ({
|
||||
page,
|
||||
title,
|
||||
bullets,
|
||||
actionButtonText,
|
||||
actionLink,
|
||||
}: {
|
||||
page: string;
|
||||
title: string;
|
||||
bullets: any;
|
||||
actionButtonText: string;
|
||||
actionLink: string;
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<BaseFallback>
|
||||
<Stack
|
||||
gap={theme.spacing(10)}
|
||||
zIndex={1}
|
||||
alignItems="center"
|
||||
>
|
||||
<Typography
|
||||
component="h1"
|
||||
color={theme.palette.primary.contrastText}
|
||||
>
|
||||
{title}
|
||||
</Typography>
|
||||
<Stack
|
||||
sx={{
|
||||
flexWrap: "wrap",
|
||||
gap: theme.spacing(2),
|
||||
maxWidth: { xs: "90%", md: "80%", lg: "75%" },
|
||||
}}
|
||||
>
|
||||
{bullets?.map((bullet: string, index: number) => (
|
||||
<BulletPointCheck
|
||||
text={bullet}
|
||||
key={`${(page + "Monitors").trim().split(" ")[0]}-${index}`}
|
||||
/>
|
||||
))}
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="accent"
|
||||
onClick={() => navigate(actionLink)}
|
||||
>
|
||||
{actionButtonText}
|
||||
</Button>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</BaseFallback>
|
||||
);
|
||||
};
|
||||
@@ -1,44 +0,0 @@
|
||||
import Stack from "@mui/material/Stack";
|
||||
import Box from "@mui/material/Box";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
export const PulseDot = ({ color }: { color: string }) => {
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<Stack
|
||||
width="26px"
|
||||
height="24px"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
>
|
||||
<Box
|
||||
minWidth="18px"
|
||||
minHeight="18px"
|
||||
sx={{
|
||||
position: "relative",
|
||||
backgroundColor: color,
|
||||
borderRadius: "50%",
|
||||
"&::before": {
|
||||
content: `""`,
|
||||
position: "absolute",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
backgroundColor: "inherit",
|
||||
borderRadius: "50%",
|
||||
animation: "ripple 1.8s ease-out infinite",
|
||||
},
|
||||
"&::after": {
|
||||
content: `""`,
|
||||
position: "absolute",
|
||||
width: "7px",
|
||||
height: "7px",
|
||||
borderRadius: "50%",
|
||||
backgroundColor: theme.palette.accent.contrastText,
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
@@ -1,68 +0,0 @@
|
||||
import { Fragment } from "react";
|
||||
import Stack from "@mui/material/Stack";
|
||||
import Box from "@mui/material/Box";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import { useMediaQuery } from "@mui/material";
|
||||
export const SplitBox = ({
|
||||
left,
|
||||
right,
|
||||
}: {
|
||||
left: React.ReactNode;
|
||||
right: React.ReactNode;
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
const isSmall = useMediaQuery(theme.breakpoints.down("md"));
|
||||
return (
|
||||
<Stack
|
||||
direction={isSmall ? "column" : "row"}
|
||||
bgcolor={theme.palette.primary.main}
|
||||
border={1}
|
||||
borderColor={theme.palette.primary.lowContrast}
|
||||
borderRadius={theme.spacing(2)}
|
||||
>
|
||||
<Box
|
||||
padding={theme.spacing(15)}
|
||||
borderRight={isSmall ? 0 : 1}
|
||||
borderBottom={isSmall ? 1 : 0}
|
||||
borderColor={theme.palette.primary.lowContrast}
|
||||
flex={0.7}
|
||||
>
|
||||
{left}
|
||||
</Box>
|
||||
<Box
|
||||
flex={1}
|
||||
padding={theme.spacing(15)}
|
||||
>
|
||||
{right}
|
||||
</Box>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
export const ConfigBox = ({
|
||||
title,
|
||||
subtitle,
|
||||
rightContent,
|
||||
}: {
|
||||
title: string;
|
||||
subtitle: string;
|
||||
rightContent: React.ReactNode;
|
||||
}) => {
|
||||
return (
|
||||
<SplitBox
|
||||
left={
|
||||
<Fragment>
|
||||
<Typography
|
||||
component="h2"
|
||||
variant="h2"
|
||||
>
|
||||
{title}
|
||||
</Typography>
|
||||
<Typography component="p">{subtitle}</Typography>
|
||||
</Fragment>
|
||||
}
|
||||
right={rightContent}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@@ -1,57 +0,0 @@
|
||||
import Stack from "@mui/material/Stack";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import { useMediaQuery } from "@mui/material";
|
||||
import type { PaletteKey } from "@/Utils/Theme/v2/theme";
|
||||
import { BaseBox } from "@/Components/v2/DesignElements";
|
||||
|
||||
type GradientBox = React.PropsWithChildren<{ palette?: PaletteKey }>;
|
||||
|
||||
export const GradientBox: React.FC<GradientBox> = ({ children, palette }) => {
|
||||
const theme = useTheme();
|
||||
const isSmall = useMediaQuery(theme.breakpoints.down("md"));
|
||||
const bg = palette
|
||||
? `linear-gradient(to bottom right, ${theme.palette[palette].main} 30%, ${theme.palette[palette].lowContrast} 70%)`
|
||||
: `linear-gradient(340deg, ${theme.palette.tertiary.main} 10%, ${theme.palette.primary.main} 45%)`;
|
||||
|
||||
return (
|
||||
<BaseBox
|
||||
sx={{
|
||||
padding: `${theme.spacing(4)} ${theme.spacing(8)}`,
|
||||
width: isSmall
|
||||
? `calc(50% - (1 * ${theme.spacing(8)} / 2))`
|
||||
: `calc(25% - (3 * ${theme.spacing(8)} / 4))`,
|
||||
|
||||
background: bg,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</BaseBox>
|
||||
);
|
||||
};
|
||||
|
||||
type StatBoxProps = React.PropsWithChildren<{
|
||||
title: string;
|
||||
subtitle: string;
|
||||
palette?: PaletteKey;
|
||||
}>;
|
||||
|
||||
export const StatBox: React.FC<StatBoxProps> = ({
|
||||
title,
|
||||
subtitle,
|
||||
palette,
|
||||
children,
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
const textColor = palette ? theme.palette[palette].contrastText : "inherit";
|
||||
|
||||
return (
|
||||
<GradientBox palette={palette}>
|
||||
<Stack>
|
||||
<Typography color={textColor}>{title}</Typography>
|
||||
<Typography color={textColor}>{subtitle}</Typography>
|
||||
{children}
|
||||
</Stack>
|
||||
</GradientBox>
|
||||
);
|
||||
};
|
||||
@@ -1,100 +0,0 @@
|
||||
import Stack from "@mui/material/Stack";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import Box from "@mui/material/Box";
|
||||
import { BaseBox } from "@/Components/v2/DesignElements";
|
||||
import Background from "@/assets/Images/background-grid.svg?react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
|
||||
type StatusBoxProps = React.PropsWithChildren<{}>;
|
||||
|
||||
export const BGBox: React.FC<StatusBoxProps> = ({ children }) => {
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<BaseBox
|
||||
sx={{
|
||||
overflow: "hidden",
|
||||
position: "relative",
|
||||
flex: 1,
|
||||
padding: theme.spacing(8),
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
position="absolute"
|
||||
top="-10%"
|
||||
left="5%"
|
||||
>
|
||||
<Background />
|
||||
</Box>
|
||||
{children}
|
||||
</BaseBox>
|
||||
);
|
||||
};
|
||||
|
||||
const StatusBox = ({
|
||||
label,
|
||||
n,
|
||||
color,
|
||||
}: {
|
||||
label: string;
|
||||
n: number;
|
||||
color: string | undefined;
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<BGBox>
|
||||
<Stack spacing={theme.spacing(8)}>
|
||||
<Typography
|
||||
variant={"h2"}
|
||||
textTransform="uppercase"
|
||||
color={theme.palette.primary.contrastTextTertiary}
|
||||
>
|
||||
{label}
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="h1"
|
||||
color={color}
|
||||
>
|
||||
{n}
|
||||
</Typography>
|
||||
</Stack>
|
||||
</BGBox>
|
||||
);
|
||||
};
|
||||
|
||||
export const UpStatusBox = ({ n }: { n: number }) => {
|
||||
const theme = useTheme();
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<StatusBox
|
||||
label={t("monitorStatus.up")}
|
||||
n={n}
|
||||
color={theme.palette.success.lowContrast}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const DownStatusBox = ({ n }: { n: number }) => {
|
||||
const theme = useTheme();
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<StatusBox
|
||||
label={t("monitorStatus.down")}
|
||||
n={n}
|
||||
color={theme.palette.error.lowContrast}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const PausedStatusBox = ({ n }: { n: number }) => {
|
||||
const theme = useTheme();
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<StatusBox
|
||||
label={t("monitorStatus.paused")}
|
||||
n={n}
|
||||
color={theme.palette.warning.lowContrast}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@@ -1,41 +0,0 @@
|
||||
import Box from "@mui/material/Box";
|
||||
import { BaseBox } from "@/Components/v2/DesignElements";
|
||||
import type { MonitorStatus } from "@/Types/Monitor";
|
||||
|
||||
import { getStatusPalette } from "@/Utils/v2/MonitorUtils";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
|
||||
export const StatusLabel = ({
|
||||
status,
|
||||
isActive,
|
||||
}: {
|
||||
status: MonitorStatus;
|
||||
isActive?: boolean;
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
const palette = getStatusPalette(status);
|
||||
const transformedText = status.charAt(0).toUpperCase() + status.slice(1).toLowerCase();
|
||||
|
||||
return (
|
||||
<BaseBox
|
||||
sx={{
|
||||
display: "inline-flex",
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
padding: theme.spacing(3, 5),
|
||||
color: theme.palette[palette].main,
|
||||
borderColor: theme.palette[palette].lowContrast,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
width={7}
|
||||
height={7}
|
||||
bgcolor={theme.palette[palette].lowContrast}
|
||||
borderRadius="50%"
|
||||
marginRight="5px"
|
||||
/>
|
||||
{isActive === false ? "Paused" : transformedText}
|
||||
</BaseBox>
|
||||
);
|
||||
};
|
||||
@@ -1,215 +0,0 @@
|
||||
import Paper from "@mui/material/Paper";
|
||||
import Table from "@mui/material/Table";
|
||||
import TableBody from "@mui/material/TableBody";
|
||||
import TableCell from "@mui/material/TableCell";
|
||||
import TableContainer from "@mui/material/TableContainer";
|
||||
import TableHead from "@mui/material/TableHead";
|
||||
import TableRow from "@mui/material/TableRow";
|
||||
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
import LastPageIcon from "@mui/icons-material/LastPage";
|
||||
import FirstPageIcon from "@mui/icons-material/FirstPage";
|
||||
import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
|
||||
import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
|
||||
|
||||
import Box from "@mui/material/Box";
|
||||
import TablePagination from "@mui/material/TablePagination";
|
||||
import type { TablePaginationProps } from "@mui/material/TablePagination";
|
||||
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import { useMediaQuery } from "@mui/material";
|
||||
export type Header<T> = {
|
||||
id: number | string;
|
||||
content: React.ReactNode;
|
||||
onClick?: (event: React.MouseEvent<HTMLTableCellElement | null>, row: T) => void;
|
||||
render: (row: T) => React.ReactNode;
|
||||
};
|
||||
|
||||
type DataTableProps<T extends { id?: string | number; _id?: string | number }> = {
|
||||
headers: Header<T>[];
|
||||
data: T[];
|
||||
onRowClick?: (row: T) => void;
|
||||
};
|
||||
|
||||
export function DataTable<
|
||||
T extends {
|
||||
id?: string | number;
|
||||
_id?: string | number;
|
||||
onRowClick?: (row: T) => void;
|
||||
},
|
||||
>({ headers, data, onRowClick }: DataTableProps<T>) {
|
||||
const theme = useTheme();
|
||||
if (data.length === 0 || headers.length === 0) return <div>No data</div>;
|
||||
return (
|
||||
<TableContainer component={Paper}>
|
||||
<Table
|
||||
stickyHeader
|
||||
sx={{
|
||||
"&.MuiTable-root :is(.MuiTableHead-root, .MuiTableBody-root) :is(th, td)": {
|
||||
paddingLeft: theme.spacing(8),
|
||||
},
|
||||
"& :is(th)": {
|
||||
backgroundColor: theme.palette.secondary.main,
|
||||
color: theme.palette.secondary.contrastText,
|
||||
fontWeight: 600,
|
||||
},
|
||||
"& :is(td)": {
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
color: theme.palette.primary.contrastTextSecondary,
|
||||
},
|
||||
"& .MuiTableBody-root .MuiTableRow-root:last-child .MuiTableCell-root": {
|
||||
borderBottom: "none",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
{headers.map((header, idx) => {
|
||||
return (
|
||||
<TableCell
|
||||
align={idx === 0 ? "left" : "center"}
|
||||
key={header.id}
|
||||
>
|
||||
{header.content}
|
||||
</TableCell>
|
||||
);
|
||||
})}
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{data.map((row) => {
|
||||
const key = row.id || row._id || Math.random();
|
||||
|
||||
return (
|
||||
<TableRow
|
||||
key={key}
|
||||
sx={{ cursor: onRowClick ? "pointer" : "default" }}
|
||||
onClick={() => (onRowClick ? onRowClick(row) : null)}
|
||||
>
|
||||
{headers.map((header, index) => {
|
||||
return (
|
||||
<TableCell
|
||||
align={index === 0 ? "left" : "center"}
|
||||
key={header.id}
|
||||
onClick={
|
||||
header.onClick ? (e) => header.onClick!(e, row) : undefined
|
||||
}
|
||||
>
|
||||
{header.render(row)}
|
||||
</TableCell>
|
||||
);
|
||||
})}
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
);
|
||||
}
|
||||
|
||||
interface TablePaginationActionsProps {
|
||||
count: number;
|
||||
page: number;
|
||||
rowsPerPage: number;
|
||||
onPageChange: (event: React.MouseEvent<HTMLButtonElement>, newPage: number) => void;
|
||||
}
|
||||
|
||||
function TablePaginationActions(props: TablePaginationActionsProps) {
|
||||
const theme = useTheme();
|
||||
const { count, page, rowsPerPage, onPageChange } = props;
|
||||
|
||||
const handleFirstPageButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
|
||||
onPageChange(event, 0);
|
||||
};
|
||||
|
||||
const handleBackButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
|
||||
onPageChange(event, page - 1);
|
||||
};
|
||||
|
||||
const handleNextButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
|
||||
onPageChange(event, page + 1);
|
||||
};
|
||||
|
||||
const handleLastPageButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
|
||||
onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
|
||||
};
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{ flexShrink: 0, ml: 2.5 }}
|
||||
className="table-pagination-actions"
|
||||
>
|
||||
<IconButton
|
||||
onClick={handleFirstPageButtonClick}
|
||||
disabled={page === 0}
|
||||
aria-label="first page"
|
||||
>
|
||||
{theme.direction === "rtl" ? <LastPageIcon /> : <FirstPageIcon />}
|
||||
</IconButton>
|
||||
<IconButton
|
||||
onClick={handleBackButtonClick}
|
||||
disabled={page === 0}
|
||||
aria-label="previous page"
|
||||
>
|
||||
{theme.direction === "rtl" ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}
|
||||
</IconButton>
|
||||
<IconButton
|
||||
onClick={handleNextButtonClick}
|
||||
disabled={page >= Math.ceil(count / rowsPerPage) - 1}
|
||||
aria-label="next page"
|
||||
>
|
||||
{theme.direction === "rtl" ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}
|
||||
</IconButton>
|
||||
<IconButton
|
||||
onClick={handleLastPageButtonClick}
|
||||
disabled={page >= Math.ceil(count / rowsPerPage) - 1}
|
||||
aria-label="last page"
|
||||
>
|
||||
{theme.direction === "rtl" ? <FirstPageIcon /> : <LastPageIcon />}
|
||||
</IconButton>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export const Pagination: React.FC<TablePaginationProps> = ({ ...props }) => {
|
||||
const isSmall = useMediaQuery((theme: any) => theme.breakpoints.down("sm"));
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<TablePagination
|
||||
ActionsComponent={TablePaginationActions}
|
||||
rowsPerPageOptions={[5, 10, 25]}
|
||||
{...props}
|
||||
sx={{
|
||||
"& .MuiTablePagination-toolbar": {
|
||||
display: isSmall ? "grid" : "flex",
|
||||
},
|
||||
"& .MuiTablePagination-selectLabel": {
|
||||
gridColumn: "1",
|
||||
gridRow: "1",
|
||||
justifySelf: "center",
|
||||
},
|
||||
"& .MuiTablePagination-select": {
|
||||
gridColumn: "2",
|
||||
gridRow: "1",
|
||||
justifySelf: "center",
|
||||
},
|
||||
"& .MuiTablePagination-displayedRows": {
|
||||
gridColumn: "2",
|
||||
gridRow: "2",
|
||||
justifySelf: "center ",
|
||||
},
|
||||
"& .table-pagination-actions": {
|
||||
gridColumn: "1",
|
||||
gridRow: "2",
|
||||
justifySelf: "center",
|
||||
},
|
||||
"& .MuiSelect-select": {
|
||||
border: 1,
|
||||
borderColor: theme.palette.primary.lowContrast,
|
||||
borderRadius: theme.shape.borderRadius,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@@ -1,9 +0,0 @@
|
||||
export { SplitBox as HorizontalSplitBox, ConfigBox } from "./SplitBox";
|
||||
export { BasePage, BasePageWithStates } from "./BasePage";
|
||||
export { BGBox, UpStatusBox, DownStatusBox, PausedStatusBox } from "./StatusBox";
|
||||
export { DataTable as Table, Pagination } from "./Table";
|
||||
export { GradientBox, StatBox } from "./StatBox";
|
||||
export { BaseBox } from "./BaseBox";
|
||||
export { StatusLabel } from "./StatusLabel";
|
||||
export { BaseFallback, ErrorFallback, EmptyFallback } from "./Fallback";
|
||||
export { BulletPointCheck } from "./BulletPointCheck";
|
||||
@@ -1,48 +0,0 @@
|
||||
import Autocomplete from "@mui/material/Autocomplete";
|
||||
import type { AutocompleteProps } from "@mui/material/Autocomplete";
|
||||
import { TextInput } from "@/Components/v2/Inputs/TextInput";
|
||||
import { CheckboxInput } from "@/Components/v2/Inputs/Checkbox";
|
||||
import ListItem from "@mui/material/ListItem";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
|
||||
type AutoCompleteInputProps = Omit<
|
||||
AutocompleteProps<any, boolean, boolean, boolean>,
|
||||
"renderInput"
|
||||
> & {
|
||||
renderInput?: AutocompleteProps<any, boolean, boolean, boolean>["renderInput"];
|
||||
};
|
||||
|
||||
export const AutoCompleteInput: React.FC<AutoCompleteInputProps> = ({ ...props }) => {
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<Autocomplete
|
||||
{...props}
|
||||
disableCloseOnSelect
|
||||
renderInput={(params) => (
|
||||
<TextInput
|
||||
{...params}
|
||||
placeholder="Type to search"
|
||||
/>
|
||||
)}
|
||||
getOptionKey={(option) => option._id}
|
||||
renderTags={() => null}
|
||||
renderOption={(props, option, { selected }) => {
|
||||
const { key, ...optionProps } = props;
|
||||
return (
|
||||
<ListItem
|
||||
key={key}
|
||||
{...optionProps}
|
||||
>
|
||||
<CheckboxInput checked={selected} />
|
||||
{option.name}
|
||||
</ListItem>
|
||||
);
|
||||
}}
|
||||
sx={{
|
||||
"&.MuiAutocomplete-root .MuiAutocomplete-input": {
|
||||
padding: `0 ${theme.spacing(5)}`,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@@ -1,11 +0,0 @@
|
||||
import Button from "@mui/material/Button";
|
||||
import type { ButtonProps } from "@mui/material/Button";
|
||||
|
||||
export const ButtonInput: React.FC<ButtonProps> = ({ sx, ...props }) => {
|
||||
return (
|
||||
<Button
|
||||
{...props}
|
||||
sx={{ textTransform: "none", height: 34, fontWeight: 400, borderRadius: 2, ...sx }}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@@ -1,13 +0,0 @@
|
||||
import ButtonGroup from "@mui/material/ButtonGroup";
|
||||
import type { ButtonGroupProps } from "@mui/material/ButtonGroup";
|
||||
export const ButtonGroupInput: React.FC<ButtonGroupProps> = ({
|
||||
orientation,
|
||||
...props
|
||||
}) => {
|
||||
return (
|
||||
<ButtonGroup
|
||||
orientation={orientation}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@@ -1,23 +0,0 @@
|
||||
import Checkbox from "@mui/material/Checkbox";
|
||||
import type { CheckboxProps } from "@mui/material/Checkbox";
|
||||
import CheckboxOutline from "@/assets/icons/checkbox-outline.svg?react";
|
||||
import CheckboxFilled from "@/assets/icons/checkbox-filled.svg?react";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
type CheckboxInputProps = CheckboxProps & {
|
||||
label?: string;
|
||||
};
|
||||
|
||||
export const CheckboxInput: React.FC<CheckboxInputProps> = ({ label, ...props }) => {
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<Checkbox
|
||||
{...props}
|
||||
icon={<CheckboxOutline />}
|
||||
checkedIcon={<CheckboxFilled />}
|
||||
sx={{
|
||||
"&:hover": { backgroundColor: "transparent" },
|
||||
"& svg": { width: theme.spacing(8), height: theme.spacing(8) },
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@@ -1,64 +0,0 @@
|
||||
import "flag-icons/css/flag-icons.min.css";
|
||||
import { Select } from "@/Components/v2/Inputs";
|
||||
import MenuItem from "@mui/material/MenuItem";
|
||||
import Stack from "@mui/material/Stack";
|
||||
import Typography from "@mui/material/Typography";
|
||||
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { useSelector } from "react-redux";
|
||||
import { setLanguage } from "@/Features/UI/uiSlice";
|
||||
import type { SelectChangeEvent } from "@mui/material/Select";
|
||||
|
||||
export const LanguageSelector = () => {
|
||||
const { i18n } = useTranslation();
|
||||
const theme = useTheme();
|
||||
const dispatch = useDispatch();
|
||||
const language = useSelector((state: any) => state.ui.language);
|
||||
const languages = Object.keys(i18n.options.resources || {});
|
||||
const languageMap: Record<string, string> = {
|
||||
cs: "cz",
|
||||
ja: "jp",
|
||||
uk: "ua",
|
||||
vi: "vn",
|
||||
};
|
||||
|
||||
const handleChange = (event: SelectChangeEvent<unknown>) => {
|
||||
const newLang = event.target.value;
|
||||
dispatch(setLanguage(newLang));
|
||||
};
|
||||
|
||||
const languagesForDisplay = languages.map((l) => {
|
||||
let formattedLanguage = l === "en" ? "gb" : l;
|
||||
formattedLanguage = formattedLanguage.includes("-")
|
||||
? formattedLanguage.split("-")[1].toLowerCase()
|
||||
: formattedLanguage;
|
||||
formattedLanguage = languageMap[formattedLanguage] || formattedLanguage;
|
||||
const flag = formattedLanguage ? `fi fi-${formattedLanguage}` : null;
|
||||
|
||||
return (
|
||||
<MenuItem
|
||||
key={l}
|
||||
value={l}
|
||||
>
|
||||
<Stack
|
||||
direction="row"
|
||||
gap={theme.spacing(4)}
|
||||
>
|
||||
{flag && <span className={flag} />}
|
||||
<Typography textTransform={"uppercase"}>{l}</Typography>
|
||||
</Stack>
|
||||
</MenuItem>
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<Select
|
||||
value={language}
|
||||
onChange={handleChange}
|
||||
>
|
||||
{languagesForDisplay}
|
||||
</Select>
|
||||
);
|
||||
};
|
||||
@@ -1,66 +0,0 @@
|
||||
import Radio from "@mui/material/Radio";
|
||||
import type { RadioProps } from "@mui/material/Radio";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import RadioChecked from "@/assets/icons/radio-checked.svg?react";
|
||||
import FormControlLabel from "@mui/material/FormControlLabel";
|
||||
import Typography from "@mui/material/Typography";
|
||||
|
||||
interface RadioInputProps extends RadioProps {}
|
||||
|
||||
export const RadioInput: React.FC<RadioInputProps> = ({ ...props }) => {
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<Radio
|
||||
{...props}
|
||||
checkedIcon={<RadioChecked />}
|
||||
sx={{
|
||||
color: "transparent",
|
||||
boxShadow: `inset 0 0 0 1px ${theme.palette.secondary.main}`,
|
||||
"&:not(.Mui-checked)": {
|
||||
boxShadow: `inset 0 0 0 1px ${theme.palette.primary.contrastText}70`, // Use theme text color for the outline
|
||||
},
|
||||
mt: theme.spacing(0.5),
|
||||
padding: 0,
|
||||
"& .MuiSvgIcon-root": {
|
||||
fontSize: 16,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const RadioWithDescription: React.FC<
|
||||
RadioInputProps & { label: string; description: string }
|
||||
> = ({ label, description, ...props }) => {
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<FormControlLabel
|
||||
control={<RadioInput {...props} />}
|
||||
label={
|
||||
<>
|
||||
<Typography component="p">{label}</Typography>
|
||||
<Typography
|
||||
component="h6"
|
||||
color={theme.palette.primary.contrastTextSecondary}
|
||||
>
|
||||
{description}
|
||||
</Typography>
|
||||
</>
|
||||
}
|
||||
sx={{
|
||||
alignItems: "flex-start",
|
||||
p: theme.spacing(2.5),
|
||||
m: theme.spacing(-2.5),
|
||||
borderRadius: theme.shape.borderRadius,
|
||||
|
||||
"&:hover": {
|
||||
backgroundColor: theme.palette.tertiary.main,
|
||||
},
|
||||
"& .MuiButtonBase-root": {
|
||||
p: 0,
|
||||
mr: theme.spacing(6),
|
||||
},
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@@ -1,88 +0,0 @@
|
||||
import { Typography, Select } from "@mui/material";
|
||||
import MenuItem from "@mui/material/MenuItem";
|
||||
import type { SelectProps } from "@mui/material/Select";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
|
||||
|
||||
export const SelectInput: React.FC<SelectProps> = ({ ...props }) => {
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<Select
|
||||
{...props}
|
||||
sx={{
|
||||
height: "34px",
|
||||
"& .MuiOutlinedInput-notchedOutline": {
|
||||
borderRadius: theme.shape.borderRadius,
|
||||
borderColor: theme.palette.primary.lowContrast,
|
||||
},
|
||||
"&:hover .MuiOutlinedInput-notchedOutline": {
|
||||
borderColor: theme.palette.primary.lowContrast,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
type ItemTypes = string | number;
|
||||
interface SelectItem {
|
||||
_id: ItemTypes;
|
||||
name: string;
|
||||
}
|
||||
export type CustomSelectProps = SelectProps & {
|
||||
items: SelectItem[];
|
||||
placeholder?: string;
|
||||
isHidden?: boolean;
|
||||
hasError?: boolean;
|
||||
};
|
||||
|
||||
export const SelectFromItems: React.FC<CustomSelectProps> = ({
|
||||
items,
|
||||
placeholder,
|
||||
isHidden = false,
|
||||
hasError = false,
|
||||
...props
|
||||
}) => {
|
||||
return (
|
||||
<SelectInput
|
||||
error={hasError}
|
||||
IconComponent={KeyboardArrowDownIcon}
|
||||
displayEmpty
|
||||
MenuProps={{ disableScrollLock: true }}
|
||||
renderValue={(selected) => {
|
||||
if (!selected) {
|
||||
return (
|
||||
<Typography
|
||||
noWrap
|
||||
color="text.secondary"
|
||||
>
|
||||
{placeholder ?? ""}
|
||||
</Typography>
|
||||
);
|
||||
}
|
||||
const selectedItem = items.find((item) => item._id === selected);
|
||||
const displayName = selectedItem ? selectedItem.name : placeholder;
|
||||
return (
|
||||
<Typography
|
||||
noWrap
|
||||
title={displayName}
|
||||
>
|
||||
{displayName}
|
||||
</Typography>
|
||||
);
|
||||
}}
|
||||
{...props}
|
||||
>
|
||||
{items.map((item) => (
|
||||
<MenuItem
|
||||
key={item._id}
|
||||
value={item._id}
|
||||
>
|
||||
{item.name}
|
||||
</MenuItem>
|
||||
))}
|
||||
</SelectInput>
|
||||
);
|
||||
};
|
||||
|
||||
SelectInput.displayName = "SelectInput";
|
||||
SelectFromItems.displayName = "SelectFromItems";
|
||||
@@ -1,22 +0,0 @@
|
||||
import { forwardRef } from "react";
|
||||
import TextField from "@mui/material/TextField";
|
||||
import type { TextFieldProps } from "@mui/material";
|
||||
import { typographyLevels } from "@/Utils/Theme/v2/palette";
|
||||
|
||||
export const TextInput = forwardRef<HTMLInputElement, TextFieldProps>(
|
||||
function TextInput(props, ref) {
|
||||
return (
|
||||
<TextField
|
||||
{...props}
|
||||
inputRef={ref}
|
||||
sx={{
|
||||
"& .MuiOutlinedInput-root": {
|
||||
height: 34,
|
||||
fontSize: typographyLevels.base,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
);
|
||||
TextInput.displayName = "TextInput";
|
||||
@@ -1,37 +0,0 @@
|
||||
import Typography from "@mui/material/Typography";
|
||||
import Stack from "@mui/material/Stack";
|
||||
import Link from "@mui/material/Link";
|
||||
import { Link as RouterLink } from "react-router-dom";
|
||||
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
|
||||
export const TextLink = ({
|
||||
text,
|
||||
linkText,
|
||||
href,
|
||||
target = "_self",
|
||||
}: {
|
||||
text: string;
|
||||
linkText: string;
|
||||
href: string;
|
||||
target?: string;
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<Stack
|
||||
direction="row"
|
||||
gap={theme.spacing(4)}
|
||||
>
|
||||
<Typography>{text}</Typography>
|
||||
<Link
|
||||
color="accent"
|
||||
to={href}
|
||||
component={RouterLink}
|
||||
target={target}
|
||||
>
|
||||
{linkText}
|
||||
</Link>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
@@ -1,135 +0,0 @@
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { setMode } from "@/Features/UI/uiSlice.js";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
|
||||
const SunAndMoonIcon = () => {
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<svg
|
||||
className="sun-and-moon"
|
||||
aria-hidden="true"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<mask
|
||||
className="moon"
|
||||
id="moon-mask"
|
||||
>
|
||||
<rect
|
||||
x="0"
|
||||
y="0"
|
||||
width="100%"
|
||||
height="100%"
|
||||
fill="#fff"
|
||||
/>
|
||||
<circle
|
||||
cx="24"
|
||||
cy="10"
|
||||
r="6"
|
||||
fill="#000"
|
||||
/>
|
||||
</mask>
|
||||
<circle
|
||||
className="sun"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="6"
|
||||
fill={theme.palette.primary.contrastTextSecondary}
|
||||
mask="url(#moon-mask)"
|
||||
/>
|
||||
<g
|
||||
className="sun-beams"
|
||||
stroke={theme.palette.primary.contrastTextSecondary}
|
||||
>
|
||||
<line
|
||||
x1="12"
|
||||
y1="1"
|
||||
x2="12"
|
||||
y2="3"
|
||||
/>
|
||||
<line
|
||||
x1="12"
|
||||
y1="21"
|
||||
x2="12"
|
||||
y2="23"
|
||||
/>
|
||||
<line
|
||||
x1="4.22"
|
||||
y1="4.22"
|
||||
x2="5.64"
|
||||
y2="5.64"
|
||||
/>
|
||||
<line
|
||||
x1="18.36"
|
||||
y1="18.36"
|
||||
x2="19.78"
|
||||
y2="19.78"
|
||||
/>
|
||||
<line
|
||||
x1="1"
|
||||
y1="12"
|
||||
x2="3"
|
||||
y2="12"
|
||||
/>
|
||||
<line
|
||||
x1="21"
|
||||
y1="12"
|
||||
x2="23"
|
||||
y2="12"
|
||||
/>
|
||||
<line
|
||||
x1="4.22"
|
||||
y1="19.78"
|
||||
x2="5.64"
|
||||
y2="18.36"
|
||||
/>
|
||||
<line
|
||||
x1="18.36"
|
||||
y1="5.64"
|
||||
x2="19.78"
|
||||
y2="4.22"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export const ThemeSwitch = ({
|
||||
width = 48,
|
||||
height = 48,
|
||||
}: {
|
||||
width?: number;
|
||||
height?: number;
|
||||
}) => {
|
||||
const mode = useSelector((state: any) => state.ui.mode);
|
||||
const dispatch = useDispatch();
|
||||
const { t } = useTranslation();
|
||||
|
||||
const handleChange = () => {
|
||||
dispatch(setMode(mode === "light" ? "dark" : "light"));
|
||||
};
|
||||
|
||||
return (
|
||||
<IconButton
|
||||
id="theme-toggle"
|
||||
title={t("common.buttons.toggleTheme")}
|
||||
className={`theme-${mode}`}
|
||||
aria-label="auto"
|
||||
aria-live="polite"
|
||||
onClick={handleChange}
|
||||
sx={{
|
||||
width,
|
||||
height,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<SunAndMoonIcon />
|
||||
</IconButton>
|
||||
);
|
||||
};
|
||||
@@ -1,7 +0,0 @@
|
||||
export { ButtonInput as Button } from "./Button";
|
||||
export { ButtonGroupInput as ButtonGroup } from "./ButtonGroup";
|
||||
export { TextInput } from "./TextInput";
|
||||
export { SelectInput as Select } from "./Select";
|
||||
export { LanguageSelector } from "./LanguageSelector";
|
||||
export { ThemeSwitch } from "./ThemeSwitch";
|
||||
export { TextLink } from "./TextLink";
|
||||
@@ -1,23 +0,0 @@
|
||||
import { Outlet } from "react-router";
|
||||
import Stack from "@mui/material/Stack";
|
||||
import { SideBar } from "@/Components/v2/Layouts/Sidebar";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
const RootLayout = () => {
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<Stack
|
||||
direction="row"
|
||||
minHeight="100vh"
|
||||
>
|
||||
<SideBar />
|
||||
<Stack
|
||||
flex={1}
|
||||
padding={theme.spacing(12)}
|
||||
>
|
||||
<Outlet />
|
||||
</Stack>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
export default RootLayout;
|
||||
@@ -1,16 +0,0 @@
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
|
||||
import Stack from "@mui/material/Stack";
|
||||
|
||||
export const BottomControls = ({}) => {
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<Stack
|
||||
direction="row"
|
||||
height={50}
|
||||
py={theme.spacing(4)}
|
||||
px={theme.spacing(8)}
|
||||
gap={theme.spacing(2)}
|
||||
></Stack>
|
||||
);
|
||||
};
|
||||
@@ -1,50 +0,0 @@
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
import { ArrowRight } from "@/Components/v2/Arrows/ArrowRight";
|
||||
import { ArrowLeft } from "@/Components/v2/Arrows/ArrowLeft";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { toggleSidebar } from "../../../../Features/UI/uiSlice.js";
|
||||
|
||||
export const CollapseButton = ({ collapsed }: { collapsed: boolean }) => {
|
||||
const theme = useTheme();
|
||||
const dispatch = useDispatch();
|
||||
const arrowIcon = collapsed ? (
|
||||
<ArrowRight
|
||||
height={theme.spacing(8)}
|
||||
width={theme.spacing(8)}
|
||||
color={theme.palette.primary.contrastTextSecondary}
|
||||
/>
|
||||
) : (
|
||||
<ArrowLeft
|
||||
height={theme.spacing(8)}
|
||||
width={theme.spacing(8)}
|
||||
color={theme.palette.primary.contrastTextSecondary}
|
||||
/>
|
||||
);
|
||||
|
||||
return (
|
||||
<IconButton
|
||||
sx={{
|
||||
position: "absolute",
|
||||
/* TODO 60 is a magic number. if logo chnges size this might break */
|
||||
top: 60,
|
||||
right: 0,
|
||||
transform: `translate(50%, 0)`,
|
||||
backgroundColor: theme.palette.tertiary.main,
|
||||
border: `1px solid ${theme.palette.primary.lowContrast}`,
|
||||
p: theme.spacing(2.5),
|
||||
|
||||
"&:focus": { outline: "none" },
|
||||
"&:hover": {
|
||||
backgroundColor: theme.palette.primary.lowContrast,
|
||||
borderColor: theme.palette.primary.lowContrast,
|
||||
},
|
||||
}}
|
||||
onClick={() => {
|
||||
dispatch(toggleSidebar());
|
||||
}}
|
||||
>
|
||||
{arrowIcon}
|
||||
</IconButton>
|
||||
);
|
||||
};
|
||||
@@ -1,59 +0,0 @@
|
||||
import Stack from "@mui/material/Stack";
|
||||
import Box from "@mui/material/Box";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import { useNavigate } from "react-router";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
export const Logo = ({ collapsed }: { collapsed: boolean }) => {
|
||||
const { t } = useTranslation();
|
||||
const theme = useTheme();
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<Stack
|
||||
pt={theme.spacing(6)}
|
||||
pb={theme.spacing(12)}
|
||||
pl={theme.spacing(8)}
|
||||
direction="row"
|
||||
alignItems="center"
|
||||
gap={theme.spacing(4)}
|
||||
onClick={() => navigate("/")}
|
||||
sx={{ cursor: "pointer" }}
|
||||
>
|
||||
<Typography
|
||||
pl={theme.spacing("1px")}
|
||||
minWidth={theme.spacing(16)}
|
||||
minHeight={theme.spacing(16)}
|
||||
display={"flex"}
|
||||
justifyContent={"center"}
|
||||
alignItems={"center"}
|
||||
bgcolor={theme.palette.accent.main}
|
||||
borderRadius={theme.shape.borderRadius}
|
||||
color={theme.palette.accent.contrastText}
|
||||
fontSize={18}
|
||||
>
|
||||
C
|
||||
</Typography>
|
||||
<Box
|
||||
overflow={"hidden"}
|
||||
sx={{
|
||||
transition: "opacity 900ms ease, width 900ms ease",
|
||||
opacity: collapsed ? 0 : 1,
|
||||
whiteSpace: "nowrap",
|
||||
width: collapsed ? 0 : "100%",
|
||||
}}
|
||||
>
|
||||
{" "}
|
||||
<Typography
|
||||
lineHeight={1}
|
||||
mt={theme.spacing(2)}
|
||||
color={theme.palette.primary.contrastText}
|
||||
variant="h2"
|
||||
>
|
||||
{t("common.appName")}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
@@ -1,58 +0,0 @@
|
||||
// import Notifications from "@/assets/icons/notifications.svg?react";
|
||||
import Monitors from "@/assets/icons/monitors.svg?react";
|
||||
// import PageSpeed from "@/assets/icons/page-speed.svg?react";
|
||||
// import Integrations from "@/assets/icons/integrations.svg?react";
|
||||
// import Incidents from "@/assets/icons/incidents.svg?react";
|
||||
// import StatusPages from "@/assets/icons/status-pages.svg?react";
|
||||
// import Maintenance from "@/assets/icons/maintenance.svg?react";
|
||||
// import Logs from "@/assets/icons/logs.svg?react";
|
||||
// import Settings from "@/assets/icons/settings.svg?react";
|
||||
import Support from "@/assets/icons/support.svg?react";
|
||||
import Discussions from "@/assets/icons/discussions.svg?react";
|
||||
import Docs from "@/assets/icons/docs.svg?react";
|
||||
import ChangeLog from "@/assets/icons/changeLog.svg?react";
|
||||
|
||||
export const getMenu = (t: Function) => [
|
||||
{ name: t("menu.uptime"), path: "v2/uptime", icon: <Monitors /> },
|
||||
// { name: t("menu.pagespeed"), path: "pagespeed", icon: <PageSpeed /> },
|
||||
|
||||
// { name: t("menu.infrastructure"), path: "infrastructure", icon: <Integrations /> },
|
||||
// {
|
||||
// name: t("menu.notifications"),
|
||||
// path: "notifications",
|
||||
// icon: <Notifications />,
|
||||
// },
|
||||
// { name: t("menu.incidents"), path: "incidents", icon: <Incidents /> },
|
||||
|
||||
// { name: t("menu.statusPages"), path: "status", icon: <StatusPages /> },
|
||||
// { name: t("menu.maintenance"), path: "maintenance", icon: <Maintenance /> },
|
||||
// { name: t("menu.logs"), path: "logs", icon: <Logs /> },
|
||||
|
||||
// {
|
||||
// name: t("menu.settings"),
|
||||
// icon: <Settings />,
|
||||
// path: "settings",
|
||||
// },
|
||||
];
|
||||
|
||||
export const getBottomMenu = (t: Function) => [
|
||||
{ name: t("menu.support"), path: "support", icon: <Support />, url: "invite" },
|
||||
{
|
||||
name: t("menu.discussions"),
|
||||
path: "discussions",
|
||||
icon: <Discussions />,
|
||||
url: "https://github.com/bluewave-labs/checkmate/discussions",
|
||||
},
|
||||
{
|
||||
name: t("menu.docs"),
|
||||
path: "docs",
|
||||
icon: <Docs />,
|
||||
url: "https://bluewavelabs.gitbook.io/checkmate",
|
||||
},
|
||||
{
|
||||
name: t("menu.changelog"),
|
||||
path: "changelog",
|
||||
icon: <ChangeLog />,
|
||||
url: "https://github.com/bluewave-labs/checkmate/releases",
|
||||
},
|
||||
];
|
||||
@@ -1,103 +0,0 @@
|
||||
import Tooltip from "@mui/material/Tooltip";
|
||||
import ListItemButton from "@mui/material/ListItemButton";
|
||||
import ListItemIcon from "@mui/material/ListItemIcon";
|
||||
import Box from "@mui/material/Box";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
|
||||
export interface NavData {
|
||||
name: string;
|
||||
icon: JSX.Element;
|
||||
}
|
||||
|
||||
export const NavItem = ({
|
||||
item,
|
||||
collapsed,
|
||||
selected,
|
||||
onClick,
|
||||
}: {
|
||||
item: NavData;
|
||||
collapsed: boolean;
|
||||
selected: boolean;
|
||||
onClick: (event: React.MouseEvent) => void;
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
const iconStroke = selected
|
||||
? theme.palette.primary.contrastText
|
||||
: theme.palette.primary.contrastTextTertiary;
|
||||
|
||||
const buttonBgColor = selected ? theme.palette.secondary.main : "transparent";
|
||||
const buttonBgHoverColor = selected
|
||||
? theme.palette.secondary.main
|
||||
: theme.palette.tertiary.main;
|
||||
const fontWeight = selected ? 600 : 400;
|
||||
return (
|
||||
<Tooltip
|
||||
placement="right"
|
||||
title={collapsed ? item.name : ""}
|
||||
slotProps={{
|
||||
popper: {
|
||||
modifiers: [
|
||||
{
|
||||
name: "offset",
|
||||
options: {
|
||||
offset: [0, -16],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
}}
|
||||
disableInteractive
|
||||
>
|
||||
<ListItemButton
|
||||
sx={{
|
||||
backgroundColor: buttonBgColor,
|
||||
"&:hover": {
|
||||
backgroundColor: buttonBgHoverColor,
|
||||
},
|
||||
height: 37,
|
||||
gap: theme.spacing(4),
|
||||
borderRadius: theme.shape.borderRadius,
|
||||
px: theme.spacing(4),
|
||||
pl: theme.spacing(5),
|
||||
}}
|
||||
onClick={onClick}
|
||||
>
|
||||
<ListItemIcon
|
||||
sx={{
|
||||
minWidth: 0,
|
||||
"& svg": {
|
||||
height: 20,
|
||||
width: 20,
|
||||
opacity: 0.81,
|
||||
},
|
||||
"& svg path": {
|
||||
stroke: iconStroke,
|
||||
},
|
||||
}}
|
||||
>
|
||||
{item.icon}
|
||||
</ListItemIcon>
|
||||
<Box
|
||||
sx={{
|
||||
overflow: "hidden",
|
||||
transition: "opacity 900ms ease",
|
||||
opacity: collapsed ? 0 : 1,
|
||||
whiteSpace: "nowrap",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="body1"
|
||||
color={theme.palette.primary.contrastText}
|
||||
sx={{
|
||||
fontWeight: fontWeight,
|
||||
opacity: 0.9,
|
||||
}}
|
||||
>
|
||||
{item.name}
|
||||
</Typography>
|
||||
</Box>
|
||||
</ListItemButton>
|
||||
</Tooltip>
|
||||
);
|
||||
};
|
||||
@@ -1,106 +0,0 @@
|
||||
import { useEffect } from "react";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
import { setCollapsed } from "@/Features/UI/uiSlice";
|
||||
import useMediaQuery from "@mui/material/useMediaQuery";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useNavigate, useLocation } from "react-router-dom";
|
||||
|
||||
import { CollapseButton } from "@/Components/v2/Layouts/Sidebar/CollapseButton";
|
||||
import Stack from "@mui/material/Stack";
|
||||
import List from "@mui/material/List";
|
||||
import Divider from "@mui/material/Divider";
|
||||
import { Logo } from "@/Components/v2/Layouts/Sidebar/Logo";
|
||||
import { getMenu, getBottomMenu } from "@/Components/v2/Layouts/Sidebar/Menu";
|
||||
import { NavItem } from "@/Components/v2/Layouts/Sidebar/NavItem";
|
||||
import { BottomControls } from "@/Components/v2/Layouts/Sidebar/BottomControls";
|
||||
|
||||
export const COLLAPSED_WIDTH = 64;
|
||||
export const EXPANDED_WIDTH = 250;
|
||||
|
||||
export const SideBar = () => {
|
||||
const theme = useTheme();
|
||||
const isSmall = useMediaQuery(theme.breakpoints.down("md"));
|
||||
const dispatch = useDispatch();
|
||||
const collapsed = useSelector((state: any) => state.ui.sidebar.collapsed);
|
||||
const { t } = useTranslation();
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const menu = getMenu(t);
|
||||
const bottomMenu = getBottomMenu(t);
|
||||
|
||||
useEffect(() => {
|
||||
dispatch(setCollapsed({ collapsed: isSmall }));
|
||||
}, [isSmall]);
|
||||
|
||||
return (
|
||||
<Stack
|
||||
component="aside"
|
||||
position="sticky"
|
||||
top={0}
|
||||
minHeight={"100vh"}
|
||||
maxHeight={"100vh"}
|
||||
paddingTop={theme.spacing(6)}
|
||||
paddingBottom={theme.spacing(6)}
|
||||
gap={theme.spacing(6)}
|
||||
borderRight={`1px solid ${theme.palette.primary.lowContrast}`}
|
||||
width={collapsed ? COLLAPSED_WIDTH : EXPANDED_WIDTH}
|
||||
sx={{
|
||||
transition: "width 650ms cubic-bezier(0.36, -0.01, 0, 0.77)",
|
||||
}}
|
||||
>
|
||||
<CollapseButton collapsed={collapsed} />
|
||||
<Logo collapsed={collapsed} />
|
||||
<List
|
||||
component="nav"
|
||||
disablePadding
|
||||
sx={{
|
||||
px: theme.spacing(6),
|
||||
height: "100%",
|
||||
}}
|
||||
>
|
||||
{menu.map((item) => {
|
||||
const selected = location.pathname.startsWith(`/${item.path}`);
|
||||
return (
|
||||
<NavItem
|
||||
key={item.path}
|
||||
item={item}
|
||||
collapsed={collapsed}
|
||||
selected={selected}
|
||||
onClick={() => navigate(`/${item.path}`)}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</List>
|
||||
<List
|
||||
component="nav"
|
||||
disablePadding
|
||||
sx={{
|
||||
px: theme.spacing(6),
|
||||
}}
|
||||
>
|
||||
{bottomMenu.map((item) => {
|
||||
const selected = location.pathname.startsWith(`/${item.path}`);
|
||||
|
||||
return (
|
||||
<NavItem
|
||||
key={item.path}
|
||||
item={item}
|
||||
collapsed={collapsed}
|
||||
selected={selected}
|
||||
onClick={() => {
|
||||
if (item.url) {
|
||||
window.open(item.url, "_blank", "noreferrer");
|
||||
} else {
|
||||
navigate(`/${item.path}`);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</List>
|
||||
<Divider sx={{ mt: "auto", borderColor: theme.palette.primary.lowContrast }} />
|
||||
<BottomControls />
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
@@ -1,84 +0,0 @@
|
||||
import { BaseChart } from "./HistogramStatus";
|
||||
import Stack from "@mui/material/Stack";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import AverageResponseIcon from "@/assets/icons/average-response-icon.svg?react";
|
||||
import { Cell, RadialBarChart, RadialBar, ResponsiveContainer } from "recharts";
|
||||
|
||||
import { getResponseTimeColor } from "@/Utils/v2/MonitorUtils";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
|
||||
export const ChartAvgResponse = ({ avg, max }: { avg: number; max: number }) => {
|
||||
const theme = useTheme();
|
||||
const chartData = [
|
||||
{ name: "max", value: max - avg, color: "transparent" },
|
||||
{ name: "avg", value: avg, color: "red" },
|
||||
];
|
||||
|
||||
const palette = getResponseTimeColor(avg);
|
||||
const msg: Record<string, string> = {
|
||||
success: "Excellent",
|
||||
warning: "Average",
|
||||
danger: "Poor",
|
||||
};
|
||||
|
||||
return (
|
||||
<BaseChart
|
||||
icon={<AverageResponseIcon />}
|
||||
title={"Average response time"}
|
||||
>
|
||||
<Stack
|
||||
height="100%"
|
||||
position={"relative"}
|
||||
justifyContent={"space-between"}
|
||||
>
|
||||
<ResponsiveContainer
|
||||
width="100%"
|
||||
height={155}
|
||||
>
|
||||
<RadialBarChart
|
||||
cy="89%"
|
||||
data={chartData}
|
||||
startAngle={180}
|
||||
endAngle={0}
|
||||
innerRadius={"120%"}
|
||||
outerRadius={"200%"}
|
||||
>
|
||||
<RadialBar
|
||||
dataKey="value"
|
||||
background={{ fill: theme.palette[palette].lowContrast }}
|
||||
>
|
||||
<Cell visibility={"hidden"} />
|
||||
<Cell fill={theme.palette[palette].main} />
|
||||
</RadialBar>
|
||||
</RadialBarChart>
|
||||
</ResponsiveContainer>
|
||||
<Stack
|
||||
direction={"row"}
|
||||
justifyContent={"space-between"}
|
||||
>
|
||||
<Typography variant="body2">Low</Typography>
|
||||
<Typography variant="body2">High</Typography>
|
||||
</Stack>
|
||||
<Stack
|
||||
position="absolute"
|
||||
top={"50%"}
|
||||
right={"50%"}
|
||||
sx={{
|
||||
transform: "translate(50%, 0%)",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="h6"
|
||||
textAlign={"center"}
|
||||
>
|
||||
{msg[palette]}
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="h6"
|
||||
textAlign={"center"}
|
||||
>{`${avg?.toFixed()}ms`}</Typography>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</BaseChart>
|
||||
);
|
||||
};
|
||||
@@ -1,163 +0,0 @@
|
||||
import { BaseChart } from "./HistogramStatus";
|
||||
import { BaseBox } from "../DesignElements";
|
||||
import ResponseTimeIcon from "@/assets/icons/response-time-icon.svg?react";
|
||||
import { normalizeResponseTimes } from "@/Utils/v2/DataUtils";
|
||||
import {
|
||||
AreaChart,
|
||||
Area,
|
||||
XAxis,
|
||||
Tooltip,
|
||||
CartesianGrid,
|
||||
ResponsiveContainer,
|
||||
Text,
|
||||
} from "recharts";
|
||||
import Typography from "@mui/material/Typography";
|
||||
|
||||
import {
|
||||
formatDateWithTz,
|
||||
tickDateFormatLookup,
|
||||
tooltipDateFormatLookup,
|
||||
} from "@/Utils/v2/TimeUtils";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import type { GroupedCheck } from "@/Types/Check";
|
||||
import { useSelector } from "react-redux";
|
||||
|
||||
type XTickProps = {
|
||||
x: number;
|
||||
y: number;
|
||||
payload: { value: any };
|
||||
range: string;
|
||||
};
|
||||
|
||||
const XTick: React.FC<XTickProps> = ({ x, y, payload, range }) => {
|
||||
const format = tickDateFormatLookup(range);
|
||||
const theme = useTheme();
|
||||
const uiTimezone = useSelector((state: any) => state.ui.timezone);
|
||||
return (
|
||||
<Text
|
||||
x={x}
|
||||
y={y + 10}
|
||||
textAnchor="middle"
|
||||
fill={theme.palette.primary.contrastTextTertiary}
|
||||
fontSize={11}
|
||||
fontWeight={400}
|
||||
>
|
||||
{formatDateWithTz(payload?.value, format, uiTimezone)}
|
||||
</Text>
|
||||
);
|
||||
};
|
||||
|
||||
type ResponseTimeToolTipProps = {
|
||||
active?: boolean | undefined;
|
||||
payload?: any[];
|
||||
label?: string;
|
||||
range: string;
|
||||
theme: any;
|
||||
uiTimezone: string;
|
||||
};
|
||||
|
||||
const ResponseTimeToolTip: React.FC<ResponseTimeToolTipProps> = ({
|
||||
active,
|
||||
payload,
|
||||
label,
|
||||
range,
|
||||
theme,
|
||||
uiTimezone,
|
||||
}) => {
|
||||
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);
|
||||
return (
|
||||
<BaseBox sx={{ py: theme.spacing(2), px: theme.spacing(4) }}>
|
||||
<Typography>{formatDateWithTz(label, format, uiTimezone)}</Typography>
|
||||
<Typography>Response time: {responseTime} ms</Typography>
|
||||
</BaseBox>
|
||||
);
|
||||
};
|
||||
|
||||
export const ChartResponseTime = ({
|
||||
checks,
|
||||
range,
|
||||
}: {
|
||||
checks: GroupedCheck[];
|
||||
range: string;
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
const uiTimezone = useSelector((state: any) => state.ui.timezone);
|
||||
const normalized = normalizeResponseTimes<GroupedCheck, "avgResponseTime">(
|
||||
checks,
|
||||
"avgResponseTime"
|
||||
);
|
||||
return (
|
||||
<BaseChart
|
||||
icon={<ResponseTimeIcon />}
|
||||
title="Response times"
|
||||
>
|
||||
<ResponsiveContainer
|
||||
width="100%"
|
||||
height={300}
|
||||
>
|
||||
<AreaChart data={normalized?.slice().reverse()}>
|
||||
<CartesianGrid
|
||||
stroke={theme.palette.primary.lowContrast}
|
||||
strokeWidth={1}
|
||||
strokeOpacity={1}
|
||||
fill="transparent"
|
||||
vertical={false}
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="colorUv"
|
||||
x1="0"
|
||||
y1="0"
|
||||
x2="0"
|
||||
y2="1"
|
||||
>
|
||||
<stop
|
||||
offset="0%"
|
||||
stopColor={theme.palette.accent.main}
|
||||
stopOpacity={0.8}
|
||||
/>
|
||||
<stop
|
||||
offset="100%"
|
||||
stopColor={theme.palette.accent.light}
|
||||
stopOpacity={0}
|
||||
/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<XAxis
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
dataKey="_id"
|
||||
tick={(props) => (
|
||||
<XTick
|
||||
{...props}
|
||||
range={range}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Tooltip
|
||||
content={(props) => (
|
||||
<ResponseTimeToolTip
|
||||
{...props}
|
||||
range={range}
|
||||
theme={theme}
|
||||
uiTimezone={uiTimezone}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="normalResponseTime"
|
||||
stroke={theme.palette.accent.main}
|
||||
fill="url(#colorUv)"
|
||||
/>
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
</BaseChart>
|
||||
);
|
||||
};
|
||||
@@ -1,67 +0,0 @@
|
||||
import Stack from "@mui/material/Stack";
|
||||
import { MonitorStatus } from "@/Components/v2/Monitors/MonitorStatus";
|
||||
import { ButtonGroup, Button } from "@/Components/v2/Inputs";
|
||||
import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined";
|
||||
import PauseOutlinedIcon from "@mui/icons-material/PauseOutlined";
|
||||
import PlayArrowOutlinedIcon from "@mui/icons-material/PlayArrowOutlined";
|
||||
import EmailIcon from "@mui/icons-material/Email";
|
||||
import BugReportOutlinedIcon from "@mui/icons-material/BugReportOutlined";
|
||||
|
||||
import { useMediaQuery } from "@mui/material";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
|
||||
import type { IMonitor } from "@/Types/Monitor";
|
||||
|
||||
export const HeaderControls = ({
|
||||
monitor,
|
||||
patch,
|
||||
isPatching,
|
||||
refetch,
|
||||
}: {
|
||||
monitor: IMonitor;
|
||||
patch: Function;
|
||||
isPatching: boolean;
|
||||
refetch: Function;
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const theme = useTheme();
|
||||
const isSmall = useMediaQuery(theme.breakpoints.down("md"));
|
||||
|
||||
return (
|
||||
<Stack
|
||||
direction={isSmall ? "column" : "row"}
|
||||
spacing={isSmall ? theme.spacing(4) : 0}
|
||||
justifyContent={"space-between"}
|
||||
>
|
||||
<MonitorStatus monitor={monitor} />
|
||||
<Stack
|
||||
direction={"row"}
|
||||
spacing={theme.spacing(2)}
|
||||
>
|
||||
<ButtonGroup
|
||||
orientation={isSmall ? "vertical" : "horizontal"}
|
||||
fullWidth={isSmall}
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
>
|
||||
<Button startIcon={<EmailIcon />}>{t("sendTestNotifications")}</Button>
|
||||
<Button startIcon={<BugReportOutlinedIcon />}>{t("menu.incidents")}</Button>
|
||||
<Button
|
||||
loading={isPatching}
|
||||
onClick={async () => {
|
||||
await patch(`/monitors/${monitor._id}/active`);
|
||||
refetch();
|
||||
}}
|
||||
startIcon={
|
||||
monitor?.isActive ? <PauseOutlinedIcon /> : <PlayArrowOutlinedIcon />
|
||||
}
|
||||
>
|
||||
{monitor?.isActive ? t("pause") : t("resume")}
|
||||
</Button>
|
||||
<Button startIcon={<SettingsOutlinedIcon />}>{t("configure")}</Button>
|
||||
</ButtonGroup>
|
||||
</Stack>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
@@ -1,35 +0,0 @@
|
||||
import Stack from "@mui/material/Stack";
|
||||
import { Button } from "@/Components/v2/Inputs";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useNavigate } from "react-router";
|
||||
export const HeaderCreate = ({
|
||||
label,
|
||||
isLoading,
|
||||
path,
|
||||
}: {
|
||||
label?: string;
|
||||
isLoading: boolean;
|
||||
path: string;
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
const { t } = useTranslation();
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<Stack
|
||||
direction="row"
|
||||
justifyContent="end"
|
||||
alignItems="center"
|
||||
gap={theme.spacing(6)}
|
||||
>
|
||||
<Button
|
||||
loading={isLoading}
|
||||
variant="contained"
|
||||
color="accent"
|
||||
onClick={() => navigate(path)}
|
||||
>
|
||||
{label || t("createNew")}
|
||||
</Button>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
@@ -1,62 +0,0 @@
|
||||
import Stack from "@mui/material/Stack";
|
||||
import { ButtonGroup, Button } from "@/Components/v2/Inputs";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import { useMediaQuery } from "@mui/material";
|
||||
export const HeaderRange = ({
|
||||
range,
|
||||
setRange,
|
||||
loading,
|
||||
}: {
|
||||
range: string;
|
||||
setRange: Function;
|
||||
loading: boolean;
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
const isSmall = useMediaQuery(theme.breakpoints.down("md"));
|
||||
return (
|
||||
<Stack
|
||||
gap={theme.spacing(9)}
|
||||
direction={isSmall ? "column" : "row"}
|
||||
alignItems={"center"}
|
||||
justifyContent="flex-end"
|
||||
>
|
||||
<Typography variant="body2">{`Showing statistics for past ${range}`}</Typography>
|
||||
<ButtonGroup
|
||||
orientation={isSmall ? "vertical" : "horizontal"}
|
||||
fullWidth={isSmall}
|
||||
variant="contained"
|
||||
color={"primary"}
|
||||
>
|
||||
<Button
|
||||
color={range === "2h" ? "secondary" : "inherit"}
|
||||
onClick={() => setRange("2h")}
|
||||
loading={loading}
|
||||
>
|
||||
Recent
|
||||
</Button>
|
||||
<Button
|
||||
color={range === "24h" ? "secondary" : "inherit"}
|
||||
onClick={() => setRange("24h")}
|
||||
loading={loading}
|
||||
>
|
||||
Day
|
||||
</Button>
|
||||
<Button
|
||||
color={range === "7d" ? "secondary" : "inherit"}
|
||||
onClick={() => setRange("7d")}
|
||||
loading={loading}
|
||||
>
|
||||
7 days
|
||||
</Button>
|
||||
<Button
|
||||
color={range === "30d" ? "secondary" : "inherit"}
|
||||
onClick={() => setRange("30d")}
|
||||
loading={loading}
|
||||
>
|
||||
30 days
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
@@ -1,87 +0,0 @@
|
||||
import Stack from "@mui/material/Stack";
|
||||
import Box from "@mui/material/Box";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import type { Check } from "@/Types/Check";
|
||||
import { HistogramResponseTimeTooltip } from "@/Components/v2/Monitors/HistogramResponseTimeTooltip";
|
||||
import { normalizeResponseTimes } from "@/Utils/v2/DataUtils";
|
||||
|
||||
export const HistogramResponseTime = ({ checks }: { checks: Check[] }) => {
|
||||
const normalChecks = normalizeResponseTimes(checks, "responseTime");
|
||||
let data = Array<any>();
|
||||
|
||||
if (!normalChecks || normalChecks.length === 0) {
|
||||
return null;
|
||||
}
|
||||
if (normalChecks.length !== 25) {
|
||||
const placeholders = Array(25 - normalChecks.length).fill("placeholder");
|
||||
data = [...normalChecks, ...placeholders];
|
||||
} else {
|
||||
data = normalChecks;
|
||||
}
|
||||
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<Stack
|
||||
direction="row"
|
||||
flexWrap="nowrap"
|
||||
gap={theme.spacing(1.5)}
|
||||
height="50px"
|
||||
width="fit-content"
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
sx={{
|
||||
cursor: "default",
|
||||
}}
|
||||
>
|
||||
{data.map((check, index) => {
|
||||
if (check === "placeholder") {
|
||||
return (
|
||||
<Box
|
||||
key={`${check}-${index}`}
|
||||
position="relative"
|
||||
width={theme.spacing(4.5)}
|
||||
height="100%"
|
||||
bgcolor={theme.palette.primary.lowContrast}
|
||||
sx={{
|
||||
borderRadius: theme.spacing(1.5),
|
||||
}}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<HistogramResponseTimeTooltip
|
||||
key={`${check}-${index}`}
|
||||
check={check}
|
||||
>
|
||||
<Box
|
||||
position="relative"
|
||||
width="9px"
|
||||
height="100%"
|
||||
bgcolor={theme.palette.primary.lowContrast}
|
||||
sx={{
|
||||
borderRadius: theme.spacing(1.5),
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
position="absolute"
|
||||
bottom={0}
|
||||
width="100%"
|
||||
height={`${check.normalResponseTime}%`}
|
||||
bgcolor={
|
||||
check.status
|
||||
? theme.palette.success.lowContrast
|
||||
: theme.palette.error.lowContrast
|
||||
}
|
||||
sx={{
|
||||
borderRadius: theme.spacing(1.5),
|
||||
transition: "height 600ms cubic-bezier(0.4, 0, 0.2, 1)",
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</HistogramResponseTimeTooltip>
|
||||
);
|
||||
}
|
||||
})}
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
@@ -1,29 +0,0 @@
|
||||
import Stack from "@mui/material/Stack";
|
||||
import Tooltip from "@mui/material/Tooltip";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import { formatDateWithTz } from "@/Utils/v2/TimeUtils";
|
||||
import { useSelector } from "react-redux";
|
||||
import type { LatestCheck } from "@/Types/Check";
|
||||
|
||||
export const HistogramResponseTimeTooltip: React.FC<{
|
||||
children: React.ReactElement;
|
||||
check: LatestCheck;
|
||||
}> = ({ children, check }) => {
|
||||
const uiTimezone = useSelector((state: any) => state.ui.timezone);
|
||||
return (
|
||||
<Tooltip
|
||||
title={
|
||||
<Stack>
|
||||
<Typography>
|
||||
{formatDateWithTz(check?.checkedAt, "ddd, MMMM D, YYYY, HH:mm A", uiTimezone)}
|
||||
</Typography>
|
||||
{check?.responseTime && (
|
||||
<Typography>Response Time: {check.responseTime} ms</Typography>
|
||||
)}
|
||||
</Stack>
|
||||
}
|
||||
>
|
||||
{children}
|
||||
</Tooltip>
|
||||
);
|
||||
};
|
||||
@@ -1,218 +0,0 @@
|
||||
import Stack from "@mui/material/Stack";
|
||||
import Box from "@mui/material/Box";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import { BaseBox } from "@/Components/v2/DesignElements";
|
||||
import { ResponsiveContainer, BarChart, XAxis, Bar, Cell } from "recharts";
|
||||
import UptimeIcon from "@/assets/icons/uptime-icon.svg?react";
|
||||
import IncidentsIcon from "@/assets/icons/incidents.svg?react";
|
||||
|
||||
import type { GroupedCheck } from "@/Types/Check";
|
||||
import type { MonitorStatus } from "@/Types/Monitor";
|
||||
|
||||
import { normalizeResponseTimes } from "@/Utils/v2/DataUtils";
|
||||
import { useState } from "react";
|
||||
import { formatDateWithTz } from "@/Utils/v2/TimeUtils";
|
||||
import { useSelector } from "react-redux";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import { getResponseTimeColor } from "@/Utils/v2/MonitorUtils";
|
||||
|
||||
const XLabel = ({
|
||||
p1,
|
||||
p2,
|
||||
range,
|
||||
}: {
|
||||
p1: GroupedCheck;
|
||||
p2: GroupedCheck;
|
||||
range: string;
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
const uiTimezone = useSelector((state: any) => state.ui.timezone);
|
||||
const dateFormat = range === "day" ? "MMM D, h:mm A" : "MMM D";
|
||||
return (
|
||||
<>
|
||||
<text
|
||||
x={0}
|
||||
y="100%"
|
||||
dy={-3}
|
||||
textAnchor="start"
|
||||
fontSize={11}
|
||||
fill={theme.palette.primary.contrastTextTertiary}
|
||||
>
|
||||
{formatDateWithTz(p1._id, dateFormat, uiTimezone)}
|
||||
</text>
|
||||
<text
|
||||
x="100%"
|
||||
y="100%"
|
||||
dy={-3}
|
||||
textAnchor="end"
|
||||
fontSize={11}
|
||||
fill={theme.palette.primary.contrastTextTertiary}
|
||||
>
|
||||
{formatDateWithTz(p2._id, dateFormat, uiTimezone)}
|
||||
</text>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
type BaseChartProps = React.PropsWithChildren<{
|
||||
icon: React.ReactNode;
|
||||
title: string;
|
||||
}>;
|
||||
|
||||
export const BaseChart: React.FC<BaseChartProps> = ({ children, icon, title }) => {
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<BaseBox
|
||||
sx={{
|
||||
padding: theme.spacing(8),
|
||||
display: "flex",
|
||||
flex: 1,
|
||||
}}
|
||||
>
|
||||
<Stack
|
||||
gap={theme.spacing(8)}
|
||||
flex={1}
|
||||
>
|
||||
<Stack
|
||||
direction="row"
|
||||
alignItems={"center"}
|
||||
gap={theme.spacing(4)}
|
||||
>
|
||||
<BaseBox
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
width: 34,
|
||||
height: 34,
|
||||
backgroundColor: theme.palette.tertiary.main,
|
||||
"& svg": {
|
||||
width: 20,
|
||||
height: 20,
|
||||
"& path": {
|
||||
stroke: theme.palette.primary.contrastTextTertiary,
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
{icon}
|
||||
</BaseBox>
|
||||
<Typography variant="h2">{title}</Typography>
|
||||
</Stack>
|
||||
<Box flex={1}>{children}</Box>
|
||||
</Stack>
|
||||
</BaseBox>
|
||||
);
|
||||
};
|
||||
|
||||
export const HistogramStatus = ({
|
||||
checks,
|
||||
status,
|
||||
range,
|
||||
title,
|
||||
}: {
|
||||
checks: GroupedCheck[];
|
||||
status: MonitorStatus;
|
||||
range: string;
|
||||
title: string;
|
||||
}) => {
|
||||
const uiTimezone = useSelector((state: any) => state.ui.timezone);
|
||||
|
||||
const icon = status === "up" ? <UptimeIcon /> : <IncidentsIcon />;
|
||||
const theme = useTheme();
|
||||
const [idx, setIdx] = useState<number | null>(null);
|
||||
const dateFormat = range === "1d" || range === "2h" ? "MMM D, h A" : "MMM D";
|
||||
const normalChecks = normalizeResponseTimes(checks, "avgResponseTime");
|
||||
|
||||
if (normalChecks.length === 0) {
|
||||
return (
|
||||
<BaseChart
|
||||
icon={icon}
|
||||
title={title}
|
||||
>
|
||||
<Stack
|
||||
height={"100%"}
|
||||
alignItems={"center"}
|
||||
justifyContent={"center"}
|
||||
>
|
||||
<Typography variant="h2">
|
||||
{status === "up" ? "No checks yet" : "Great, no downtime yet!"}
|
||||
</Typography>
|
||||
</Stack>
|
||||
</BaseChart>
|
||||
);
|
||||
}
|
||||
|
||||
const totalChecks = normalChecks.reduce((count, check) => {
|
||||
return count + check.count;
|
||||
}, 0);
|
||||
|
||||
return (
|
||||
<BaseChart
|
||||
icon={icon}
|
||||
title={title}
|
||||
>
|
||||
<Stack gap={theme.spacing(8)}>
|
||||
<Stack
|
||||
position="relative"
|
||||
direction="row"
|
||||
justifyContent="space-between"
|
||||
>
|
||||
<Stack>
|
||||
<Typography>Total checks</Typography>
|
||||
{idx ? (
|
||||
<Stack>
|
||||
<Typography variant="h2">{normalChecks[idx].count}</Typography>
|
||||
<Typography
|
||||
position={"absolute"}
|
||||
top={"100%"}
|
||||
>
|
||||
{formatDateWithTz(normalChecks[idx]._id, dateFormat, uiTimezone)}
|
||||
</Typography>
|
||||
</Stack>
|
||||
) : (
|
||||
<Typography variant="h2">{totalChecks}</Typography>
|
||||
)}
|
||||
</Stack>
|
||||
</Stack>
|
||||
<ResponsiveContainer
|
||||
width="100%"
|
||||
height={155}
|
||||
>
|
||||
<BarChart data={normalChecks}>
|
||||
<XAxis
|
||||
stroke={theme.palette.primary.lowContrast}
|
||||
height={15}
|
||||
tick={false}
|
||||
label={
|
||||
<XLabel
|
||||
p1={normalChecks[0]}
|
||||
p2={normalChecks[normalChecks.length - 1]}
|
||||
range={range}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="normalResponseTime"
|
||||
maxBarSize={7}
|
||||
background={{ fill: "transparent" }}
|
||||
>
|
||||
{normalChecks?.map((groupedCheck, idx) => {
|
||||
const fillColor = getResponseTimeColor(groupedCheck.normalResponseTime);
|
||||
return (
|
||||
<Cell
|
||||
onMouseEnter={() => setIdx(idx)}
|
||||
onMouseLeave={() => setIdx(null)}
|
||||
key={groupedCheck._id}
|
||||
fill={theme.palette[fillColor].main}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</Bar>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</Stack>
|
||||
</BaseChart>
|
||||
);
|
||||
};
|
||||
@@ -1,60 +0,0 @@
|
||||
import type { IMonitor } from "@/Types/Monitor";
|
||||
import Stack from "@mui/material/Stack";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import { PulseDot } from "@/Components/v2/DesignElements/PulseDot";
|
||||
import { Dot } from "@/Components/v2/DesignElements/Dot";
|
||||
import { getStatusColor, formatUrl } from "@/Utils/v2/MonitorUtils";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import prettyMilliseconds from "pretty-ms";
|
||||
import { typographyLevels } from "@/Utils/Theme/v2/palette";
|
||||
import { useMediaQuery } from "@mui/material";
|
||||
export const MonitorStatus = ({ monitor }: { monitor: IMonitor }) => {
|
||||
const theme = useTheme();
|
||||
const isSmall = useMediaQuery(theme.breakpoints.down("md"));
|
||||
|
||||
if (!monitor) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<Stack>
|
||||
<Typography
|
||||
fontSize={typographyLevels.xl}
|
||||
fontWeight={500}
|
||||
color={theme.palette.primary.contrastText}
|
||||
overflow={"hidden"}
|
||||
textOverflow={"ellipsis"}
|
||||
whiteSpace={"nowrap"}
|
||||
maxWidth={isSmall ? "100%" : "calc((100vw - var(--env-var-width-2)) / 2)"}
|
||||
>
|
||||
{monitor.name}
|
||||
</Typography>
|
||||
<Stack
|
||||
direction="row"
|
||||
alignItems={"center"}
|
||||
gap={theme.spacing(4)}
|
||||
>
|
||||
<PulseDot color={getStatusColor(monitor.status, theme)} />
|
||||
<Typography
|
||||
color={theme.palette.primary.contrastTextSecondary}
|
||||
fontSize={typographyLevels.l}
|
||||
fontWeight={"bolder"}
|
||||
fontFamily={"monospace"}
|
||||
overflow={"hidden"}
|
||||
textOverflow={"ellipsis"}
|
||||
whiteSpace={"nowrap"}
|
||||
maxWidth={isSmall ? "100%" : "calc((100vw - var(--env-var-width-2)) / 2)"}
|
||||
>
|
||||
{formatUrl(monitor?.url)}
|
||||
</Typography>
|
||||
{!isSmall && (
|
||||
<>
|
||||
<Dot />
|
||||
<Typography>
|
||||
Checking every {prettyMilliseconds(monitor?.interval, { verbose: true })}
|
||||
</Typography>
|
||||
</>
|
||||
)}
|
||||
</Stack>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
@@ -1 +0,0 @@
|
||||
export { HeaderCreate } from "./HeaderCreate";
|
||||
@@ -1,19 +0,0 @@
|
||||
import { createSlice } from "@reduxjs/toolkit";
|
||||
|
||||
const initialState = {
|
||||
isAuthenticated: false,
|
||||
};
|
||||
|
||||
const v2AuthSlice = createSlice({
|
||||
name: "v2Auth",
|
||||
initialState,
|
||||
reducers: {
|
||||
setIsAuthenticated: (state, action) => {
|
||||
const { authenticated } = action.payload;
|
||||
state.isAuthenticated = authenticated;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export default v2AuthSlice.reducer;
|
||||
export const { setIsAuthenticated } = v2AuthSlice.actions;
|
||||
@@ -1,90 +0,0 @@
|
||||
import { useState } from "react";
|
||||
import useSWR from "swr";
|
||||
import type { SWRConfiguration } from "swr";
|
||||
import type { AxiosRequestConfig } from "axios";
|
||||
import { get, post, patch } from "@/Utils/v2/ApiClient"; // your axios wrapper
|
||||
|
||||
export type ApiResponse = {
|
||||
message: string;
|
||||
data: any;
|
||||
};
|
||||
|
||||
// Generic fetcher for GET requests
|
||||
const fetcher = async <T,>(url: string, config?: AxiosRequestConfig) => {
|
||||
const res = await get<T>(url, config);
|
||||
return res.data;
|
||||
};
|
||||
|
||||
export const useGet = <T,>(
|
||||
url: string,
|
||||
axiosConfig?: AxiosRequestConfig,
|
||||
swrConfig?: SWRConfiguration<T, Error>
|
||||
) => {
|
||||
const { data, error, isLoading, isValidating, mutate } = useSWR<T>(
|
||||
url,
|
||||
(url) => fetcher<T>(url, axiosConfig),
|
||||
swrConfig
|
||||
);
|
||||
|
||||
return {
|
||||
response: data ?? null,
|
||||
loading: isLoading,
|
||||
isValidating,
|
||||
error: error?.message ?? null,
|
||||
refetch: mutate,
|
||||
};
|
||||
};
|
||||
|
||||
export const usePost = <B = any, R = any>() => {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const postFn = async (
|
||||
endpoint: string,
|
||||
body: B,
|
||||
config?: AxiosRequestConfig
|
||||
): Promise<R | null> => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const res = await post<R>(endpoint, body, config);
|
||||
return res.data;
|
||||
} catch (err: any) {
|
||||
const errMsg = err?.response?.data?.msg || err.message || "An error occurred";
|
||||
setError(errMsg);
|
||||
return null;
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return { post: postFn, loading, error };
|
||||
};
|
||||
|
||||
export const usePatch = <B = any, R = any>() => {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const patchFn = async (
|
||||
endpoint: string,
|
||||
body?: B,
|
||||
config?: AxiosRequestConfig
|
||||
): Promise<R | null> => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const res = await patch<R>(endpoint, body, config);
|
||||
return res.data;
|
||||
} catch (err: any) {
|
||||
const errMsg = err?.response?.data?.msg || err.message || "An error occurred";
|
||||
setError(errMsg);
|
||||
return null;
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return { patch: patchFn, loading, error };
|
||||
};
|
||||
@@ -1,17 +0,0 @@
|
||||
import { monitorSchema } from "@/Validation/v2/zod";
|
||||
import { z } from "zod";
|
||||
export const useInitForm = ({
|
||||
initialData,
|
||||
}: {
|
||||
initialData: Partial<z.infer<typeof monitorSchema>> | undefined;
|
||||
}) => {
|
||||
const defaults: z.infer<typeof monitorSchema> = {
|
||||
type: initialData?.type || "http",
|
||||
url: initialData?.url || "",
|
||||
n: initialData?.n || 3,
|
||||
notificationChannels: initialData?.notificationChannels || [],
|
||||
name: initialData?.name || "",
|
||||
interval: initialData?.interval || "1 minute",
|
||||
};
|
||||
return { defaults };
|
||||
};
|
||||
@@ -18,13 +18,11 @@ import { useTranslation } from "react-i18next";
|
||||
import { useParams } from "react-router-dom";
|
||||
|
||||
//Constants
|
||||
const Incidents = () => {
|
||||
const Checks = () => {
|
||||
// Redux state
|
||||
const { t } = useTranslation();
|
||||
|
||||
const BREADCRUMBS = [
|
||||
{ name: t("incidentsPageTitle", "Incidents"), path: "/incidents" },
|
||||
];
|
||||
const BREADCRUMBS = [{ name: t("checksPageTitle"), path: "/checks" }];
|
||||
|
||||
// Local state
|
||||
const [selectedMonitor, setSelectedMonitor] = useState("0");
|
||||
@@ -86,8 +84,8 @@ const Incidents = () => {
|
||||
disabled={isLoadingAcknowledge}
|
||||
>
|
||||
{selectedMonitor === "0"
|
||||
? t("incidentsPageActionResolveAll")
|
||||
: t("incidentsPageActionResolveMonitor")}
|
||||
? t("checksPageActionResolveAllMonitor")
|
||||
: t("checksPageActionResolveMonitor")}
|
||||
</Button>
|
||||
</Box>
|
||||
<StatusBoxes
|
||||
@@ -117,4 +115,4 @@ const Incidents = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default Incidents;
|
||||
export default Checks;
|
||||
|
||||
@@ -0,0 +1,145 @@
|
||||
import PropTypes from "prop-types";
|
||||
import { Box, Stack, Typography } from "@mui/material";
|
||||
import { useTheme } from "@emotion/react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import PanelSkeleton from "../IncidentsSummaryPanel/skeleton.jsx";
|
||||
import Incidents from "@/assets/icons/incidents.svg?react";
|
||||
import CheckIcon from "@/assets/icons/check-icon.svg?react";
|
||||
import SummaryCard from "../SummaryCard/index.jsx";
|
||||
|
||||
/**
|
||||
* ActiveIncidentsPanel Component
|
||||
*
|
||||
* Displays a quick overview of currently active incidents.
|
||||
* Shows only essential information: monitor name, status badge, and duration.
|
||||
*
|
||||
* @param {Object} props
|
||||
* @param {Array} props.incidents - Array of active incidents
|
||||
* @param {number} props.totalCount - Total count of active incidents (for badge)
|
||||
* @param {boolean} props.isLoading - Loading state
|
||||
* @param {Object} props.error - Error object if any
|
||||
* @param {Function} props.onIncidentClick - Callback when incident is clicked (optional)
|
||||
*/
|
||||
const ActiveIncidentsPanel = ({ totalCount = 0, isLoading = false, error = null }) => {
|
||||
const theme = useTheme();
|
||||
const { t } = useTranslation();
|
||||
|
||||
if (isLoading) {
|
||||
return <PanelSkeleton />;
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<SummaryCard>
|
||||
<Typography
|
||||
color="error"
|
||||
align="center"
|
||||
>
|
||||
{t("incidentsPage.incidentsActivePanelError")}
|
||||
</Typography>
|
||||
</SummaryCard>
|
||||
);
|
||||
}
|
||||
|
||||
if (!totalCount || totalCount === 0) {
|
||||
return (
|
||||
<SummaryCard>
|
||||
<Stack
|
||||
direction="column"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
padding={theme.spacing(10)}
|
||||
gap={theme.spacing(4)}
|
||||
sx={{ flex: 1 }}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
color: theme.palette.success.main,
|
||||
"& svg": {
|
||||
width: 60,
|
||||
height: 60,
|
||||
|
||||
"& path": { stroke: "currentColor", strokeWidth: 2 },
|
||||
},
|
||||
mb: theme.spacing(2),
|
||||
}}
|
||||
>
|
||||
<CheckIcon />
|
||||
</Box>
|
||||
|
||||
<Typography
|
||||
variant="h1"
|
||||
color={theme.palette.primary.contrastTextSecondary}
|
||||
sx={{
|
||||
textTransform: "uppercase",
|
||||
fontWeight: 600,
|
||||
textAlign: "center",
|
||||
color: theme.palette.success.lowContrast,
|
||||
letterSpacing: theme.spacing(0.4),
|
||||
}}
|
||||
>
|
||||
{t("incidentsPage.allSystemsAreOperational")}
|
||||
</Typography>
|
||||
</Stack>
|
||||
</SummaryCard>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<SummaryCard isHighPriority={true}>
|
||||
<Stack
|
||||
direction="column"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
spacing={theme.spacing(4)}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
color: theme.palette.error.lowContrast,
|
||||
padding: theme.spacing(2),
|
||||
"& svg": {
|
||||
width: 60,
|
||||
height: 60,
|
||||
|
||||
"& path": { stroke: "currentColor", strokeWidth: 2 },
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Incidents />
|
||||
</Box>
|
||||
|
||||
<Typography
|
||||
variant="h1"
|
||||
sx={{
|
||||
fontSize: `calc(${theme.typography.h1.fontSize} * 2.5)`,
|
||||
fontWeight: 700,
|
||||
color: theme.palette.error.lowContrast,
|
||||
lineHeight: 1,
|
||||
}}
|
||||
>
|
||||
{totalCount}
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="h2"
|
||||
sx={{
|
||||
textTransform: "uppercase",
|
||||
fontWeight: 700,
|
||||
letterSpacing: theme.spacing(0.4),
|
||||
paddingTop: theme.spacing(3),
|
||||
}}
|
||||
>
|
||||
{t("incidentsPage.incidentsActivePanelTitle")}
|
||||
</Typography>
|
||||
</Stack>
|
||||
</SummaryCard>
|
||||
);
|
||||
};
|
||||
|
||||
ActiveIncidentsPanel.propTypes = {
|
||||
totalCount: PropTypes.number,
|
||||
isLoading: PropTypes.bool,
|
||||
error: PropTypes.object,
|
||||
onIncidentClick: PropTypes.func,
|
||||
};
|
||||
|
||||
export default ActiveIncidentsPanel;
|
||||
@@ -0,0 +1,204 @@
|
||||
//Components
|
||||
import DataTable from "@/Components/v1/Table/index.jsx";
|
||||
import TableSkeleton from "@/Components/v1/Table/skeleton.jsx";
|
||||
import Pagination from "@/Components/v1/Table/TablePagination/index.jsx";
|
||||
import { StatusLabel } from "@/Components/v1/Label/index.jsx";
|
||||
import { HttpStatusLabel } from "@/Components/v1/HttpStatusLabel/index.jsx";
|
||||
import GenericFallback from "@/Components/v1/GenericFallback/index.jsx";
|
||||
import NetworkError from "@/Components/v1/GenericFallback/NetworkError.jsx";
|
||||
|
||||
//Utils
|
||||
import { formatDateWithTz } from "../../../../../Utils/timeUtils.js";
|
||||
import { useSelector } from "react-redux";
|
||||
import PropTypes from "prop-types";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Button, Typography, useTheme } from "@mui/material";
|
||||
|
||||
const IncidentTable = ({
|
||||
incidents = [],
|
||||
incidentsCount = 0,
|
||||
isLoading = false,
|
||||
networkError = false,
|
||||
page = 0,
|
||||
rowsPerPage = 10,
|
||||
handleChangePage,
|
||||
handleChangeRowsPerPage,
|
||||
resolveIncident,
|
||||
handleUpdateTrigger,
|
||||
}) => {
|
||||
const uiTimezone = useSelector((state) => state.ui.timezone);
|
||||
|
||||
const { t } = useTranslation();
|
||||
const theme = useTheme();
|
||||
|
||||
const handleResolveIncident = async (incidentId) => {
|
||||
try {
|
||||
await resolveIncident(incidentId);
|
||||
handleUpdateTrigger();
|
||||
} catch (error) {
|
||||
console.error(t("incidentsPage.errorResolvingIncident"), error);
|
||||
}
|
||||
};
|
||||
|
||||
const headers = [
|
||||
{
|
||||
id: "monitorName",
|
||||
content: t("incidentsTableMonitorName"),
|
||||
render: (row) => row.monitorName ?? "N/A",
|
||||
},
|
||||
{
|
||||
id: "status",
|
||||
content: t("incidentsTableStatus"),
|
||||
render: (row) => {
|
||||
const status = row.status === true ? "down" : "up";
|
||||
const statusText =
|
||||
row.status === true ? t("incidentsPage.active") : t("incidentsPage.resolved");
|
||||
return (
|
||||
<StatusLabel
|
||||
status={status}
|
||||
text={statusText}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "startTime",
|
||||
content: t("incidentsPage.startTime"),
|
||||
render: (row) => {
|
||||
const formattedDate = formatDateWithTz(
|
||||
row.startTime || row.createdAt,
|
||||
"YYYY-MM-DD HH:mm:ss A",
|
||||
uiTimezone
|
||||
);
|
||||
return formattedDate;
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "endTime",
|
||||
content: t("incidentsPage.endTime"),
|
||||
render: (row) => {
|
||||
if (row.endTime) {
|
||||
return formatDateWithTz(row.endTime, "YYYY-MM-DD HH:mm:ss A", uiTimezone);
|
||||
}
|
||||
return "-";
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "resolutionType",
|
||||
content: t("incidentsPage.resolutionType"),
|
||||
render: (row) => {
|
||||
if (row.resolutionType) {
|
||||
return (
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
textTransform: "capitalize",
|
||||
color:
|
||||
row.resolutionType === "manual"
|
||||
? theme.palette.accent.main
|
||||
: theme.palette.success.main,
|
||||
}}
|
||||
>
|
||||
{row.resolutionType}
|
||||
</Typography>
|
||||
);
|
||||
}
|
||||
return "-";
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "statusCode",
|
||||
content: t("incidentsTableStatusCode"),
|
||||
render: (row) => <HttpStatusLabel status={row.statusCode} />,
|
||||
},
|
||||
{
|
||||
id: "message",
|
||||
content: t("incidentsTableMessage"),
|
||||
render: (row) => row.message || "-",
|
||||
},
|
||||
{
|
||||
id: "action",
|
||||
content: t("actions"),
|
||||
render: (row) => {
|
||||
if (row.status === true) {
|
||||
return (
|
||||
<Button
|
||||
variant="contained"
|
||||
color="accent"
|
||||
sx={{
|
||||
minHeight: "max-content",
|
||||
lineHeight: 1.2,
|
||||
}}
|
||||
onClick={() => {
|
||||
handleResolveIncident(row._id);
|
||||
}}
|
||||
>
|
||||
{t("incidentsPage.incidentsTableActionResolveManually")}
|
||||
</Button>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<Typography
|
||||
variant="body2"
|
||||
color={theme.palette.primary.contrastTextSecondary}
|
||||
>
|
||||
{t("incidentsPage.incidentsTableResolved")}
|
||||
</Typography>
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
if (isLoading) return <TableSkeleton />;
|
||||
|
||||
if (networkError) {
|
||||
return (
|
||||
<GenericFallback>
|
||||
<NetworkError />
|
||||
</GenericFallback>
|
||||
);
|
||||
}
|
||||
|
||||
if (!isLoading && !networkError && incidents?.length === 0) {
|
||||
return (
|
||||
<GenericFallback>
|
||||
{t("incidentsTableNoIncidents", "No incidents found")}
|
||||
</GenericFallback>
|
||||
);
|
||||
}
|
||||
|
||||
const incidentsData = Array.isArray(incidents) ? incidents : [];
|
||||
|
||||
return (
|
||||
<>
|
||||
<DataTable
|
||||
headers={headers}
|
||||
data={incidentsData}
|
||||
/>
|
||||
<Pagination
|
||||
paginationLabel={t("incidentsTablePaginationLabel", "Incidents")}
|
||||
itemCount={incidentsCount || 0}
|
||||
page={page}
|
||||
rowsPerPage={rowsPerPage}
|
||||
handleChangePage={handleChangePage}
|
||||
handleChangeRowsPerPage={handleChangeRowsPerPage}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
IncidentTable.propTypes = {
|
||||
incidents: PropTypes.array.isRequired, // Array of incident objects
|
||||
incidentsCount: PropTypes.number.isRequired, // Total count for pagination
|
||||
isLoading: PropTypes.bool.isRequired, // Loading state
|
||||
networkError: PropTypes.bool, // Network error object
|
||||
page: PropTypes.number.isRequired, // Current page number
|
||||
rowsPerPage: PropTypes.number.isRequired, // Number of rows per page
|
||||
handleChangePage: PropTypes.func.isRequired, // Handler for page change
|
||||
handleChangeRowsPerPage: PropTypes.func.isRequired, // Handler for rows per page change
|
||||
resolveIncident: PropTypes.func.isRequired,
|
||||
handleUpdateTrigger: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
export default IncidentTable;
|
||||
@@ -0,0 +1,100 @@
|
||||
import { useEffect, useState } from "react";
|
||||
// Hooks
|
||||
import useFetchIncidents from "../../hooks/useFetchIncidents.js";
|
||||
import PropTypes from "prop-types";
|
||||
// Components
|
||||
import { Grid } from "@mui/material";
|
||||
import ActiveIncidentsPanel from "../ActiveIncidentsPanel/index.jsx";
|
||||
import LatestIncidentsPanel from "../LatestIncidentsPanel/index.jsx";
|
||||
import StatisticsPanel from "../StatisticsPanel/index.jsx";
|
||||
|
||||
const IncidentsSummaryPanel = ({ updateTrigger }) => {
|
||||
const { fetchIncidentSummary } = useFetchIncidents();
|
||||
const [summary, setSummary] = useState({
|
||||
totalActive: 0,
|
||||
avgResolutionTimeHours: 0,
|
||||
total: 0,
|
||||
topMonitor: null,
|
||||
totalManualResolutions: 0,
|
||||
totalAutomaticResolutions: 0,
|
||||
latestIncidents: [],
|
||||
});
|
||||
|
||||
const [isLoadingSummary, setIsLoadingSummary] = useState(false);
|
||||
const [summaryError, setSummaryError] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchSummary = async () => {
|
||||
setIsLoadingSummary(true);
|
||||
setSummaryError(null);
|
||||
|
||||
try {
|
||||
const summaryData = await fetchIncidentSummary({
|
||||
limit: 3,
|
||||
});
|
||||
|
||||
if (summaryData) {
|
||||
setSummary(summaryData);
|
||||
} else {
|
||||
setSummaryError(new Error("Failed to fetch summary"));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching incident summary:", error);
|
||||
setSummaryError(error);
|
||||
} finally {
|
||||
setIsLoadingSummary(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchSummary();
|
||||
}, [fetchIncidentSummary, updateTrigger]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Grid
|
||||
container
|
||||
spacing={3}
|
||||
>
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
sm={4}
|
||||
>
|
||||
<ActiveIncidentsPanel
|
||||
totalCount={summary.totalActive || 0}
|
||||
isLoading={isLoadingSummary}
|
||||
error={summaryError}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
sm={4}
|
||||
>
|
||||
<LatestIncidentsPanel
|
||||
incidents={summary.latestIncidents || []}
|
||||
isLoading={isLoadingSummary}
|
||||
error={summaryError}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
sm={4}
|
||||
>
|
||||
<StatisticsPanel
|
||||
summary={summary}
|
||||
isLoading={isLoadingSummary}
|
||||
error={summaryError}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
IncidentsSummaryPanel.propTypes = {
|
||||
updateTrigger: PropTypes.bool.isRequired,
|
||||
};
|
||||
export default IncidentsSummaryPanel;
|
||||
@@ -0,0 +1,20 @@
|
||||
import { Skeleton } from "@mui/material";
|
||||
import SummaryCard from "../SummaryCard/index.jsx";
|
||||
|
||||
/**
|
||||
* Simple skeleton loader for summary panels
|
||||
* Reusable for ActiveIncidentsPanel, LatestIncidentsPanel, and StatisticsPanel
|
||||
*/
|
||||
const PanelSkeleton = () => {
|
||||
return (
|
||||
<SummaryCard sx={{ minHeight: "25vh" }}>
|
||||
<Skeleton
|
||||
variant="rounded"
|
||||
width="100%"
|
||||
height="100%"
|
||||
/>
|
||||
</SummaryCard>
|
||||
);
|
||||
};
|
||||
|
||||
export default PanelSkeleton;
|
||||
@@ -0,0 +1,153 @@
|
||||
import PropTypes from "prop-types";
|
||||
import { Box, Stack, Typography } from "@mui/material";
|
||||
import { useTheme } from "@emotion/react";
|
||||
import { StatusLabel } from "@/Components/v1/Label/index.jsx";
|
||||
import { getHumanReadableDuration } from "@/Utils/timeUtils.js";
|
||||
import Monitors from "@/assets/icons/monitors.svg?react";
|
||||
import AverageResponseIcon from "@/assets/icons/status-pages.svg?react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
const IncidentItem = ({ incident }) => {
|
||||
const { t } = useTranslation();
|
||||
const theme = useTheme();
|
||||
const isActive = incident.status === true;
|
||||
const calculateDuration = () => {
|
||||
if (!incident.startTime) {
|
||||
return "-";
|
||||
}
|
||||
const startTime = new Date(incident.startTime);
|
||||
const endTime = isActive
|
||||
? new Date()
|
||||
: incident.endTime
|
||||
? new Date(incident.endTime)
|
||||
: null;
|
||||
|
||||
if (!endTime) {
|
||||
return "-";
|
||||
}
|
||||
|
||||
const durationMs = endTime.getTime() - startTime.getTime();
|
||||
|
||||
if (durationMs < 0) {
|
||||
return "-";
|
||||
}
|
||||
|
||||
return getHumanReadableDuration(durationMs);
|
||||
};
|
||||
|
||||
const duration = calculateDuration();
|
||||
const iconWrapperStyle = {
|
||||
px: theme.spacing(2),
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
color: theme.palette.primary.contrastTextTertiary,
|
||||
"& svg path": {
|
||||
stroke: "currentColor",
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
cursor: "pointer",
|
||||
width: "100%",
|
||||
py: theme.spacing(0.5),
|
||||
"&:hover": { opacity: 0.8 },
|
||||
}}
|
||||
>
|
||||
<Stack
|
||||
direction="column"
|
||||
gap={theme.spacing(1.5)}
|
||||
>
|
||||
<Stack
|
||||
direction="row"
|
||||
alignItems="center"
|
||||
gap={theme.spacing(1)}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
...iconWrapperStyle,
|
||||
}}
|
||||
>
|
||||
<Monitors />
|
||||
</Box>
|
||||
|
||||
<Stack
|
||||
direction="row"
|
||||
gap={theme.spacing(4)}
|
||||
alignItems="baseline"
|
||||
>
|
||||
<Typography variant="body1">
|
||||
{t("incidentsPage.incidentItemMonitor")}:
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body1"
|
||||
fontWeight={600}
|
||||
>
|
||||
{incident.monitorName || t("incidentsPage.unknownMonitor")}
|
||||
</Typography>
|
||||
</Stack>
|
||||
</Stack>
|
||||
|
||||
<Stack
|
||||
direction="row"
|
||||
alignItems="center"
|
||||
width="100%"
|
||||
marginTop={theme.spacing(1)}
|
||||
>
|
||||
<Stack
|
||||
direction="row"
|
||||
alignItems="center"
|
||||
gap={theme.spacing(3)}
|
||||
>
|
||||
<Box sx={{ ...iconWrapperStyle }}>
|
||||
<AverageResponseIcon />
|
||||
</Box>
|
||||
<Stack
|
||||
direction="row"
|
||||
alignItems="center"
|
||||
spacing={2}
|
||||
>
|
||||
<Typography variant="body1">
|
||||
{t("incidentsPage.incidentItemStatus")}:
|
||||
</Typography>
|
||||
</Stack>
|
||||
|
||||
<StatusLabel
|
||||
status={isActive ? "down" : "up"}
|
||||
text={isActive ? t("incidentsPage.active") : t("incidentsPage.resolved")}
|
||||
customStyles={{
|
||||
textTransform: "capitalize",
|
||||
}}
|
||||
/>
|
||||
</Stack>
|
||||
|
||||
<Box sx={{ flexGrow: 1 }} />
|
||||
|
||||
<Typography
|
||||
variant="body1"
|
||||
fontWeight={500}
|
||||
>
|
||||
{duration}
|
||||
</Typography>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
IncidentItem.propTypes = {
|
||||
incident: PropTypes.shape({
|
||||
_id: PropTypes.string,
|
||||
id: PropTypes.string,
|
||||
monitorId: PropTypes.string,
|
||||
monitorName: PropTypes.string,
|
||||
status: PropTypes.bool,
|
||||
startTime: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
|
||||
endTime: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
|
||||
resolutionType: PropTypes.oneOf(["automatic", "manual"]),
|
||||
}),
|
||||
onClick: PropTypes.func,
|
||||
};
|
||||
|
||||
export default IncidentItem;
|
||||
@@ -0,0 +1,99 @@
|
||||
import PropTypes from "prop-types";
|
||||
import { Box, Stack, Typography, Divider } from "@mui/material";
|
||||
import { useTheme } from "@emotion/react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import PanelSkeleton from "../IncidentsSummaryPanel/skeleton.jsx";
|
||||
import IncidentItem from "./IncidentItem.jsx";
|
||||
import SummaryCard from "../SummaryCard/index.jsx";
|
||||
|
||||
/**
|
||||
* LatestIncidentsPanel Component
|
||||
*
|
||||
* Displays a quick overview of recent incidents (both active and resolved).
|
||||
* Shows only essential information: monitor name, status, duration, and resolution type.
|
||||
*
|
||||
* @param {Object} props
|
||||
* @param {Array} props.incidents - Array of recent incidents
|
||||
* @param {boolean} props.isLoading - Loading state
|
||||
* @param {Object} props.error - Error object if any
|
||||
*/
|
||||
const LatestIncidentsPanel = ({ incidents = [], isLoading = false, error = null }) => {
|
||||
const theme = useTheme();
|
||||
const { t } = useTranslation();
|
||||
|
||||
if (isLoading) {
|
||||
return <PanelSkeleton />;
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<SummaryCard>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
height: "100%",
|
||||
minHeight: 200,
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
color="error"
|
||||
align="center"
|
||||
>
|
||||
{t("incidentsPage.incidentsLatestPanelError")}
|
||||
</Typography>
|
||||
</Box>
|
||||
</SummaryCard>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<SummaryCard title={t("incidentsPage.incidentsLatestPanelTitle")}>
|
||||
{!incidents || incidents.length === 0 ? (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
flexGrow: 1,
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="body2"
|
||||
textAlign="center"
|
||||
>
|
||||
{t("incidentsPage.incidentsLatestPanelEmpty")}
|
||||
</Typography>
|
||||
</Box>
|
||||
) : (
|
||||
<Stack gap={theme.spacing(4)}>
|
||||
{incidents.map((incident, index) => (
|
||||
<Box key={incident._id}>
|
||||
<IncidentItem incident={incident} />
|
||||
{index < incidents.length - 1 && <Divider sx={{ mt: theme.spacing(2) }} />}
|
||||
</Box>
|
||||
))}
|
||||
</Stack>
|
||||
)}
|
||||
</SummaryCard>
|
||||
);
|
||||
};
|
||||
|
||||
LatestIncidentsPanel.propTypes = {
|
||||
incidents: PropTypes.arrayOf(
|
||||
PropTypes.shape({
|
||||
_id: PropTypes.string,
|
||||
monitorId: PropTypes.string,
|
||||
monitorName: PropTypes.string,
|
||||
status: PropTypes.bool,
|
||||
duration: PropTypes.string,
|
||||
resolutionType: PropTypes.oneOf(["automatic", "manual"]),
|
||||
})
|
||||
),
|
||||
isLoading: PropTypes.bool,
|
||||
error: PropTypes.object,
|
||||
onIncidentClick: PropTypes.func,
|
||||
};
|
||||
|
||||
export default LatestIncidentsPanel;
|
||||
@@ -0,0 +1,138 @@
|
||||
// Components
|
||||
import { Stack, Typography, Button, ButtonGroup } from "@mui/material";
|
||||
import Select from "@/Components/v1/Inputs/Select/index.jsx";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
//Utils
|
||||
import { useTheme } from "@emotion/react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
const OptionsHeader = ({
|
||||
shouldRender,
|
||||
selectedMonitor = 0,
|
||||
setSelectedMonitor,
|
||||
monitors,
|
||||
filter = "all",
|
||||
setFilter,
|
||||
dateRange = "all",
|
||||
setDateRange,
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
const { t } = useTranslation();
|
||||
const monitorNames = typeof monitors !== "undefined" ? Object.values(monitors) : [];
|
||||
|
||||
const filterOptions = [
|
||||
{ _id: "all", name: t("incidentsPage.incidentsOptionsHeaderFilterAll") },
|
||||
{ _id: "active", name: t("incidentsPage.incidentsOptionsHeaderFilterActive") },
|
||||
{ _id: "resolved", name: t("incidentsPage.incidentsOptionsHeaderFilterResolved") },
|
||||
{ _id: "manual", name: t("incidentsPage.incidentsOptionsHeaderFilterManual") },
|
||||
];
|
||||
|
||||
const stackStyles = {
|
||||
direction: "row",
|
||||
alignItems: "center",
|
||||
gap: theme.spacing(6),
|
||||
};
|
||||
|
||||
if (!shouldRender) return;
|
||||
|
||||
return (
|
||||
<Stack
|
||||
direction="row"
|
||||
justifyContent="space-between"
|
||||
>
|
||||
<Stack {...stackStyles}>
|
||||
<Typography
|
||||
display="inline-block"
|
||||
component="h1"
|
||||
color={theme.palette.primary.contrastTextSecondary}
|
||||
>
|
||||
{t("incidentsOptionsHeader")}
|
||||
</Typography>
|
||||
<Select
|
||||
id="incidents-select-monitor"
|
||||
placeholder={t("incidentsOptionsPlaceholderAllServers")}
|
||||
value={selectedMonitor}
|
||||
onChange={(e) => setSelectedMonitor(e.target.value)}
|
||||
items={monitorNames}
|
||||
sx={{
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
color: theme.palette.primary.contrastTextSecondary,
|
||||
}}
|
||||
maxWidth={250}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack {...stackStyles}>
|
||||
<Typography
|
||||
display="inline-block"
|
||||
component="h1"
|
||||
color={theme.palette.primary.contrastTextSecondary}
|
||||
>
|
||||
{t("incidentsOptionsHeaderFilterBy")}
|
||||
</Typography>
|
||||
<Select
|
||||
id="incidents-select-filter"
|
||||
value={filter}
|
||||
onChange={(e) => setFilter(e.target.value)}
|
||||
items={filterOptions}
|
||||
sx={{
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
color: theme.palette.primary.contrastTextSecondary,
|
||||
}}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack {...stackStyles}>
|
||||
<Typography
|
||||
display="inline-block"
|
||||
component="h1"
|
||||
color={theme.palette.primary.contrastTextSecondary}
|
||||
>
|
||||
{t("incidentsOptionsHeaderShow")}
|
||||
</Typography>
|
||||
<ButtonGroup>
|
||||
<Button
|
||||
variant="group"
|
||||
filled={(dateRange === "hour").toString()}
|
||||
onClick={() => setDateRange("hour")}
|
||||
>
|
||||
{t("incidentsOptionsHeaderLastHour")}
|
||||
</Button>
|
||||
<Button
|
||||
variant="group"
|
||||
filled={(dateRange === "day").toString()}
|
||||
onClick={() => setDateRange("day")}
|
||||
>
|
||||
{t("incidentsOptionsHeaderLastDay")}
|
||||
</Button>
|
||||
<Button
|
||||
variant="group"
|
||||
filled={(dateRange === "week").toString()}
|
||||
onClick={() => setDateRange("week")}
|
||||
>
|
||||
{t("incidentsOptionsHeaderLastWeek")}
|
||||
</Button>
|
||||
<Button
|
||||
variant="group"
|
||||
filled={(dateRange === "all").toString()}
|
||||
onClick={() => setDateRange("all")}
|
||||
>
|
||||
{t("incidentsOptionsHeaderFilterAll")}
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
</Stack>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
OptionsHeader.propTypes = {
|
||||
shouldRender: PropTypes.bool,
|
||||
selectedMonitor: PropTypes.string,
|
||||
setSelectedMonitor: PropTypes.func,
|
||||
monitors: PropTypes.object,
|
||||
filter: PropTypes.string,
|
||||
setFilter: PropTypes.func,
|
||||
dateRange: PropTypes.string,
|
||||
setDateRange: PropTypes.func,
|
||||
};
|
||||
|
||||
export default OptionsHeader;
|
||||
@@ -0,0 +1,234 @@
|
||||
import PropTypes from "prop-types";
|
||||
import { Box, Stack, Typography } from "@mui/material";
|
||||
import { useTheme } from "@emotion/react";
|
||||
import PanelSkeleton from "../IncidentsSummaryPanel/skeleton.jsx";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Divider } from "@mui/material";
|
||||
import Clock from "@/assets/icons/maintenance.svg?react";
|
||||
import Incidents from "@/assets/icons/incidents.svg?react";
|
||||
import ResolutionItem from "@/assets/icons/interval-check.svg?react";
|
||||
import NotificationIcon from "@/assets/icons/notifications.svg?react";
|
||||
import SummaryCard from "../SummaryCard/index.jsx";
|
||||
|
||||
/**
|
||||
* StatisticsPanel Component
|
||||
*
|
||||
* Displays key metrics and statistics about incidents.
|
||||
*
|
||||
* @param {Object} props
|
||||
* @param {Object} props.statistics - Statistics data object
|
||||
* @param {number} props.statistics.total - Total incidents count
|
||||
* @param {number} props.statistics.totalTrend - Trend percentage for total (optional)
|
||||
* @param {string} props.statistics.mttr - Mean Time To Resolve (formatted string, e.g., "2h 15m")
|
||||
* @param {number} props.statistics.mttrTrend - Trend percentage for MTTR (optional)
|
||||
* @param {Object} props.statistics.topMonitor - Top monitor with most incidents
|
||||
* @param {string} props.statistics.topMonitor.name - Monitor name
|
||||
* @param {number} props.statistics.topMonitor.count - Incident count
|
||||
* @param {number} props.statistics.topMonitor.percentage - Percentage of total
|
||||
* @param {string} props.statistics.uptimeAffected - Total downtime (formatted string, e.g., "12h 45m")
|
||||
* @param {number} props.statistics.availability - Availability percentage
|
||||
* @param {boolean} props.isLoading - Loading state
|
||||
* @param {Object} props.error - Error object if any
|
||||
*/
|
||||
const StatisticsPanel = ({ isLoading = false, error = null, summary = {} }) => {
|
||||
const theme = useTheme();
|
||||
const { t } = useTranslation();
|
||||
const totalResolutions =
|
||||
(summary?.totalManualResolutions || 0) + (summary?.totalAutomaticResolutions || 0);
|
||||
const automaticPercentage =
|
||||
totalResolutions > 0
|
||||
? (summary?.totalAutomaticResolutions / totalResolutions) * 100
|
||||
: 0;
|
||||
|
||||
const iconWrapperStyle = {
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
mx: theme.spacing(3),
|
||||
color: theme.palette.primary.contrastTextTertiary,
|
||||
"& svg path": {
|
||||
stroke: "currentColor",
|
||||
},
|
||||
};
|
||||
if (isLoading) {
|
||||
return <PanelSkeleton />;
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<SummaryCard>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
height: "100%",
|
||||
minHeight: 200,
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
color="error"
|
||||
align="center"
|
||||
>
|
||||
{t("incidentsPage.incidentsStatisticsPanelError")}
|
||||
</Typography>
|
||||
</Box>
|
||||
</SummaryCard>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<SummaryCard title={t("incidentsPage.incidentsStatisticsPanelTitle")}>
|
||||
<Stack gap={theme.spacing(4)}>
|
||||
<Stack
|
||||
direction="row"
|
||||
alignItems="center"
|
||||
gap={theme.spacing(3)}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
...iconWrapperStyle,
|
||||
}}
|
||||
>
|
||||
<NotificationIcon />
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography
|
||||
variant="body1"
|
||||
sx={{
|
||||
fontWeight: 500,
|
||||
lineHeight: 1.2,
|
||||
}}
|
||||
>
|
||||
{t("incidentsPage.totalIncidents")} : {summary.total || 0}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Stack>
|
||||
<Divider />
|
||||
<Stack
|
||||
direction="row"
|
||||
alignItems="center"
|
||||
gap={theme.spacing(2)}
|
||||
>
|
||||
<Box sx={iconWrapperStyle}>
|
||||
<Incidents />
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography
|
||||
variant="body1"
|
||||
sx={{
|
||||
fontWeight: 500,
|
||||
lineHeight: 1.2,
|
||||
}}
|
||||
>
|
||||
{t("incidentsPage.mostAffectedMonitor")} :{" "}
|
||||
{summary.topMonitor?.monitorName || t("incidentsPage.unknownMonitor")}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Stack>
|
||||
<Divider />
|
||||
<Stack
|
||||
direction="row"
|
||||
alignItems="center"
|
||||
gap={theme.spacing(2)}
|
||||
>
|
||||
<Box sx={iconWrapperStyle}>
|
||||
<Clock />
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography
|
||||
variant="body1"
|
||||
sx={{
|
||||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
{t("incidentsPage.avgResolutionTime")} :{" "}
|
||||
{summary.avgResolutionTimeHours || 0} {t("incidentsPage.hours")}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Stack>
|
||||
<Divider />
|
||||
|
||||
<Box padding={theme.spacing(2)}>
|
||||
<Stack
|
||||
direction="row"
|
||||
alignItems="center"
|
||||
gap={theme.spacing(2)}
|
||||
mb={theme.spacing(1.5)}
|
||||
>
|
||||
<Box sx={iconWrapperStyle}>
|
||||
<ResolutionItem />
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Typography
|
||||
variant="body1"
|
||||
sx={{
|
||||
fontWeight: 500,
|
||||
lineHeight: 1.2,
|
||||
}}
|
||||
>
|
||||
{t("incidentsPage.resolutions")}: {totalResolutions}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Stack>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
height: 8,
|
||||
borderRadius: 4,
|
||||
overflow: "hidden",
|
||||
bgcolor: theme.palette.accent.main,
|
||||
width: "100%",
|
||||
marginTop: theme.spacing(4),
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: `${automaticPercentage}%`,
|
||||
|
||||
bgcolor: theme.palette.warningSecondary.lowContrast,
|
||||
height: "100%",
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
paddingTop: theme.spacing(4),
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
{summary.totalAutomaticResolutions > 0 && (
|
||||
<Typography
|
||||
variant="body2"
|
||||
fontWeight={500}
|
||||
color={theme.palette.warningSecondary.contrastText}
|
||||
>
|
||||
{t("incidentsPage.automatic")} ({summary.totalAutomaticResolutions})
|
||||
</Typography>
|
||||
)}
|
||||
{summary.totalManualResolutions > 0 && (
|
||||
<Typography
|
||||
variant="body2"
|
||||
fontWeight={500}
|
||||
color={theme.palette.accent.main}
|
||||
>
|
||||
{t("incidentsPage.manual")} ({summary.totalManualResolutions})
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
</Stack>
|
||||
</SummaryCard>
|
||||
);
|
||||
};
|
||||
|
||||
StatisticsPanel.propTypes = {
|
||||
summary: PropTypes.object,
|
||||
isLoading: PropTypes.bool,
|
||||
error: PropTypes.object,
|
||||
};
|
||||
|
||||
export default StatisticsPanel;
|
||||
@@ -0,0 +1,68 @@
|
||||
import { Paper } from "@mui/material";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import PropTypes from "prop-types";
|
||||
import { Box, Stack, Typography, Divider } from "@mui/material";
|
||||
const SummaryCard = ({ children, isHighPriority = false, sx = {}, title = null }) => {
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<Paper
|
||||
elevation={0}
|
||||
sx={{
|
||||
padding: theme.spacing(4),
|
||||
borderRadius: 3,
|
||||
height: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
border: isHighPriority
|
||||
? `${theme.spacing(1.5)} solid ${theme.palette.error.lowContrast}`
|
||||
: `${theme.spacing(1)} solid ${theme.palette.divider}`,
|
||||
boxShadow: theme.palette.tertiary.cardShadow,
|
||||
color: theme.palette.primary.contrastTextTertiary,
|
||||
fontSize: theme.typography.body1.fontSize,
|
||||
...sx,
|
||||
}}
|
||||
>
|
||||
{title && (
|
||||
<Box>
|
||||
<Stack
|
||||
direction="row"
|
||||
sx={{
|
||||
padding: theme.spacing(2),
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="h6"
|
||||
sx={{
|
||||
textTransform: "uppercase",
|
||||
fontWeight: 700,
|
||||
fontSize: theme.typography.h2.fontSize,
|
||||
|
||||
letterSpacing: theme.spacing(0.5),
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</Typography>
|
||||
</Stack>
|
||||
<Divider />
|
||||
</Box>
|
||||
)}
|
||||
<Stack
|
||||
mt={theme.spacing(4)}
|
||||
paddingTop={theme.spacing(5)}
|
||||
gap={theme.spacing(4)}
|
||||
sx={{ height: "100%" }}
|
||||
>
|
||||
{children}
|
||||
</Stack>
|
||||
</Paper>
|
||||
);
|
||||
};
|
||||
SummaryCard.propTypes = {
|
||||
children: PropTypes.node,
|
||||
isHighPriority: PropTypes.bool,
|
||||
sx: PropTypes.object,
|
||||
title: PropTypes.string,
|
||||
};
|
||||
export default SummaryCard;
|
||||
205
client/src/Pages/v1/Incidents2/hooks/useFetchIncidents.js
Normal file
205
client/src/Pages/v1/Incidents2/hooks/useFetchIncidents.js
Normal file
@@ -0,0 +1,205 @@
|
||||
import { useState, useCallback } from "react";
|
||||
import { networkService } from "../../../../main.jsx";
|
||||
import { createToast } from "../../../../Utils/toastUtils.jsx";
|
||||
import { useTranslation } from "react-i18next";
|
||||
/**
|
||||
* Hook to fetch and manage incidents
|
||||
*
|
||||
* Provides multiple functions to fetch incidents with different filters.
|
||||
*
|
||||
* @returns {Object} {
|
||||
* incidents,
|
||||
* incidentsCount,
|
||||
* isLoading,
|
||||
* networkError,
|
||||
* fetchIncidents,
|
||||
* fetchActiveIncidents,
|
||||
* fetchResolvedIncidents,
|
||||
* fetchIncidentsByTeam,
|
||||
* fetchIncidentById,
|
||||
* resolveIncident,
|
||||
* fetchIncidentSummary
|
||||
* }
|
||||
*/
|
||||
const useFetchIncidents = () => {
|
||||
const [incidents, setIncidents] = useState(null);
|
||||
const [incidentsCount, setIncidentsCount] = useState(null);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [networkError, setNetworkError] = useState(false);
|
||||
const { t } = useTranslation();
|
||||
/**
|
||||
* Generic function to fetch incidents by team with custom config
|
||||
*
|
||||
* @param {Object} config - Configuration object
|
||||
* @param {string} [config.monitorId] - Filter by monitor ID
|
||||
* @param {boolean} [config.status] - Filter by status (true=active, false=resolved)
|
||||
* @param {string} [config.resolutionType] - Filter by resolution type (automatic/manual)
|
||||
* @param {string} [config.sortOrder] - Sort order (asc/desc)
|
||||
* @param {string} [config.dateRange] - Date range filter
|
||||
* @param {number} [config.page] - Page number
|
||||
* @param {number} [config.rowsPerPage] - Rows per page
|
||||
*/
|
||||
const fetchIncidentsByTeam = useCallback(async (config = {}) => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
setNetworkError(false);
|
||||
|
||||
const res = await networkService.getIncidentsByTeam(config);
|
||||
|
||||
setIncidents(res.data?.data?.incidents || []);
|
||||
setIncidentsCount(res.data?.data?.incidentsCount || 0);
|
||||
} catch (error) {
|
||||
setNetworkError(true);
|
||||
console.error(t("incidentsPage.errorFetchingIncidents"), error);
|
||||
createToast({ body: error.message || t("incidentsPage.errorFetchingIncidents") });
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
/**
|
||||
* Fetch active (open) incidents - Default function
|
||||
*
|
||||
* @param {Object} config - Additional configuration
|
||||
*/
|
||||
const fetchActiveIncidents = useCallback(
|
||||
async (config = {}) => {
|
||||
await fetchIncidentsByTeam({
|
||||
status: true,
|
||||
sortOrder: "desc",
|
||||
...config,
|
||||
});
|
||||
},
|
||||
[fetchIncidentsByTeam]
|
||||
);
|
||||
|
||||
/**
|
||||
* Fetch resolved incidents
|
||||
*
|
||||
* @param {Object} config - Additional configuration
|
||||
*/
|
||||
const fetchResolvedIncidents = useCallback(
|
||||
async (config = {}) => {
|
||||
await fetchIncidentsByTeam({
|
||||
status: false,
|
||||
sortOrder: "desc",
|
||||
...config,
|
||||
});
|
||||
},
|
||||
[fetchIncidentsByTeam]
|
||||
);
|
||||
|
||||
/**
|
||||
* Fetch incidents with custom filters (alias for fetchIncidentsByTeam)
|
||||
*
|
||||
* @param {Object} config - Configuration object
|
||||
*/
|
||||
const fetchIncidents = useCallback(
|
||||
async (config = {}) => {
|
||||
await fetchIncidentsByTeam(config);
|
||||
},
|
||||
[fetchIncidentsByTeam]
|
||||
);
|
||||
|
||||
/**
|
||||
* Fetch a single incident by ID
|
||||
*
|
||||
* @param {string} incidentId - The ID of the incident to fetch
|
||||
* @returns {Promise<Object|null>} The incident object or null if not found
|
||||
*/
|
||||
const fetchIncidentById = useCallback(async (incidentId) => {
|
||||
if (!incidentId) {
|
||||
console.error(t("incidentsPage.noIncidentIdProvided"));
|
||||
return null;
|
||||
}
|
||||
|
||||
try {
|
||||
setIsLoading(true);
|
||||
setNetworkError(false);
|
||||
|
||||
const res = await networkService.getIncidentById(incidentId);
|
||||
return res.data?.data || null;
|
||||
} catch (error) {
|
||||
setNetworkError(true);
|
||||
console.error(t("incidentsPage.errorFetchingIncident"), error);
|
||||
createToast({ body: error.message || t("incidentsPage.errorFetchingIncident") });
|
||||
return null;
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
/**
|
||||
* Resolve an incident manually
|
||||
*
|
||||
* @param {string} incidentId - The ID of the incident to resolve
|
||||
* @param {Object} options - Resolution options
|
||||
* @param {string} [options.comment] - Optional comment about the resolution
|
||||
* @param {Function} [onSuccess] - Callback function to call on success
|
||||
* @param {Function} [onError] - Callback function to call on error
|
||||
*/
|
||||
const resolveIncident = useCallback(async (incidentId, options = {}) => {
|
||||
if (!incidentId) {
|
||||
console.error(t("incidentsPage.noIncidentIdProvided"));
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setIsLoading(true);
|
||||
setNetworkError(false);
|
||||
|
||||
const res = await networkService.resolveIncidentManually(incidentId, options);
|
||||
if (res.data?.success) {
|
||||
createToast({ body: t("incidentsPage.incidentResolvedSuccessfully") });
|
||||
} else {
|
||||
createToast({ body: t("incidentsPage.errorResolvingIncident") });
|
||||
}
|
||||
} catch (error) {
|
||||
setNetworkError(true);
|
||||
console.error(t("incidentsPage.errorResolvingIncident"), error);
|
||||
const errorMessage =
|
||||
error.response?.data?.message ||
|
||||
error.message ||
|
||||
t("incidentsPage.errorResolvingIncident");
|
||||
createToast({ body: errorMessage });
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
/**
|
||||
* Fetch incident summary
|
||||
*
|
||||
* @param {Object} config - Configuration object
|
||||
* @param {number} [config.limit=10] - Number of latest incidents to return
|
||||
* @returns {Promise<Object|null>} The summary object or null if error
|
||||
*/
|
||||
const fetchIncidentSummary = useCallback(async (config = {}) => {
|
||||
try {
|
||||
const res = await networkService.getIncidentSummary(config);
|
||||
return res.data?.data || null;
|
||||
} catch (error) {
|
||||
console.error(t("incidentsPage.errorFetchingIncidentSummary"), error);
|
||||
createToast({
|
||||
body: error.message || t("incidentsPage.errorFetchingIncidentSummary"),
|
||||
});
|
||||
return null;
|
||||
}
|
||||
}, []);
|
||||
|
||||
return {
|
||||
incidents,
|
||||
incidentsCount,
|
||||
isLoading,
|
||||
networkError,
|
||||
fetchIncidents,
|
||||
fetchActiveIncidents,
|
||||
fetchResolvedIncidents,
|
||||
fetchIncidentsByTeam,
|
||||
fetchIncidentById,
|
||||
resolveIncident,
|
||||
fetchIncidentSummary,
|
||||
};
|
||||
};
|
||||
|
||||
export default useFetchIncidents;
|
||||
150
client/src/Pages/v1/Incidents2/index.jsx
Normal file
150
client/src/Pages/v1/Incidents2/index.jsx
Normal file
@@ -0,0 +1,150 @@
|
||||
// Components
|
||||
import { Stack } from "@mui/material";
|
||||
import Breadcrumbs from "@/Components/v1/Breadcrumbs/index.jsx";
|
||||
import GenericFallback from "@/Components/v1/GenericFallback/index.jsx";
|
||||
import IncidentTable from "./Components/IncidentTable/index.jsx";
|
||||
import OptionsHeader from "./Components/OptionsHeader/index.jsx";
|
||||
import IncidentsSummaryPanel from "./Components/IncidentsSummaryPanel/index.jsx";
|
||||
|
||||
//Utils
|
||||
import { useTheme } from "@emotion/react";
|
||||
import { useState, useEffect } from "react";
|
||||
import NetworkError from "@/Components/v1/GenericFallback/NetworkError.jsx";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
// Hooks
|
||||
import useFetchIncidents from "./hooks/useFetchIncidents.js";
|
||||
import { useFetchMonitorsByTeamId } from "../../../Hooks/v1/monitorHooks.js";
|
||||
|
||||
const Incidents2 = () => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const BREADCRUMBS = [
|
||||
{ name: t("incidentsPageTitle", "Incidents"), path: "/incidents" },
|
||||
];
|
||||
|
||||
const [selectedMonitor, setSelectedMonitor] = useState("0");
|
||||
const [filter, setFilter] = useState("all");
|
||||
const [dateRange, setDateRange] = useState("all");
|
||||
const [page, setPage] = useState(0);
|
||||
const [rowsPerPage, setRowsPerPage] = useState(10);
|
||||
const [monitorLookup, setMonitorLookup] = useState(undefined);
|
||||
const [updateTrigger, setUpdateTrigger] = useState(false);
|
||||
const handleUpdateTrigger = () => {
|
||||
setUpdateTrigger((prev) => !prev);
|
||||
};
|
||||
|
||||
const [monitors, , isLoadingMonitors, monitorsNetworkError] = useFetchMonitorsByTeamId(
|
||||
{}
|
||||
);
|
||||
|
||||
const {
|
||||
incidents,
|
||||
incidentsCount,
|
||||
isLoading: isLoadingIncidents,
|
||||
networkError: incidentsNetworkError,
|
||||
fetchIncidents,
|
||||
fetchActiveIncidents,
|
||||
fetchResolvedIncidents,
|
||||
resolveIncident,
|
||||
} = useFetchIncidents();
|
||||
|
||||
const networkError = monitorsNetworkError || incidentsNetworkError;
|
||||
|
||||
const theme = useTheme();
|
||||
|
||||
useEffect(() => {
|
||||
setPage(0);
|
||||
}, [selectedMonitor, filter, dateRange]);
|
||||
|
||||
useEffect(() => {
|
||||
const config = {
|
||||
monitorId: selectedMonitor !== "0" ? selectedMonitor : undefined,
|
||||
sortOrder: "desc",
|
||||
dateRange,
|
||||
page,
|
||||
rowsPerPage,
|
||||
};
|
||||
|
||||
if (filter === "active") {
|
||||
fetchActiveIncidents(config);
|
||||
} else if (filter === "resolved") {
|
||||
fetchResolvedIncidents(config);
|
||||
} else {
|
||||
fetchIncidents(config);
|
||||
}
|
||||
}, [
|
||||
selectedMonitor,
|
||||
filter,
|
||||
dateRange,
|
||||
page,
|
||||
rowsPerPage,
|
||||
updateTrigger,
|
||||
fetchActiveIncidents,
|
||||
fetchResolvedIncidents,
|
||||
fetchIncidents,
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
const lookup = monitors?.reduce((acc, monitor) => {
|
||||
acc[monitor._id] = {
|
||||
_id: monitor._id,
|
||||
name: monitor.name,
|
||||
type: monitor.type,
|
||||
};
|
||||
return acc;
|
||||
}, {});
|
||||
setMonitorLookup(lookup);
|
||||
}, [monitors]);
|
||||
|
||||
if (networkError) {
|
||||
return (
|
||||
<GenericFallback>
|
||||
<NetworkError />
|
||||
</GenericFallback>
|
||||
);
|
||||
}
|
||||
|
||||
const handleChangePage = (_, newPage) => {
|
||||
setPage(newPage);
|
||||
};
|
||||
|
||||
const handleChangeRowsPerPage = (event) => {
|
||||
setRowsPerPage(parseInt(event.target.value, 10));
|
||||
setPage(0);
|
||||
};
|
||||
|
||||
return (
|
||||
<Stack gap={theme.spacing(10)}>
|
||||
<Breadcrumbs list={BREADCRUMBS} />
|
||||
|
||||
<IncidentsSummaryPanel updateTrigger={updateTrigger} />
|
||||
|
||||
<OptionsHeader
|
||||
shouldRender={!isLoadingMonitors}
|
||||
monitors={monitorLookup}
|
||||
selectedMonitor={selectedMonitor}
|
||||
setSelectedMonitor={setSelectedMonitor}
|
||||
filter={filter}
|
||||
setFilter={setFilter}
|
||||
dateRange={dateRange}
|
||||
setDateRange={setDateRange}
|
||||
/>
|
||||
|
||||
<IncidentTable
|
||||
incidents={incidents || []}
|
||||
incidentsCount={incidentsCount || 0}
|
||||
isLoading={isLoadingIncidents}
|
||||
networkError={incidentsNetworkError}
|
||||
page={page}
|
||||
rowsPerPage={rowsPerPage}
|
||||
handleChangePage={handleChangePage}
|
||||
handleChangeRowsPerPage={handleChangeRowsPerPage}
|
||||
resolveIncident={resolveIncident}
|
||||
handleUpdateTrigger={handleUpdateTrigger}
|
||||
/>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
export default Incidents2;
|
||||
@@ -1,136 +0,0 @@
|
||||
import { AuthBasePage } from "@/Components/v2/Auth";
|
||||
import { Button } from "@/Components/v2/Inputs";
|
||||
import Stack from "@mui/material/Stack";
|
||||
import { TextInput, TextLink } from "@/Components/v2/Inputs";
|
||||
|
||||
import type { ApiResponse } from "@/Hooks/v2/UseApi";
|
||||
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { usePost } from "@/Hooks/v2/UseApi";
|
||||
import { useNavigate } from "react-router";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { setIsAuthenticated } from "@/Features/Auth/v2AuthSlice";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { z } from "zod";
|
||||
import { useForm, Controller } from "react-hook-form";
|
||||
|
||||
const schema = z.object({
|
||||
email: z.email("Invalid email address"),
|
||||
password: z.string().min(6, "Password must be at least 6 characters"),
|
||||
});
|
||||
|
||||
type FormData = z.infer<typeof schema>;
|
||||
|
||||
const Login = () => {
|
||||
const { t } = useTranslation();
|
||||
const dispatch = useDispatch();
|
||||
const theme = useTheme();
|
||||
const { post, loading } = usePost<FormData, ApiResponse>();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const {
|
||||
handleSubmit,
|
||||
control,
|
||||
formState: { errors },
|
||||
} = useForm<FormData>({
|
||||
resolver: zodResolver(schema),
|
||||
defaultValues: {
|
||||
email: "",
|
||||
password: "",
|
||||
},
|
||||
});
|
||||
|
||||
const onSubmit = async (data: FormData) => {
|
||||
const result = await post("/auth/login", data);
|
||||
if (result) {
|
||||
dispatch(setIsAuthenticated({ authenticated: true }));
|
||||
navigate("/v2/uptime");
|
||||
} else {
|
||||
dispatch(setIsAuthenticated({ authenticated: false }));
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<AuthBasePage
|
||||
title={t("auth.login.welcome")}
|
||||
subtitle={t("auth.login.heading")}
|
||||
>
|
||||
<Stack
|
||||
width={"100%"}
|
||||
alignItems={"center"}
|
||||
justifyContent={"center"}
|
||||
gap={theme.spacing(8)}
|
||||
>
|
||||
<Stack
|
||||
component="form"
|
||||
padding={theme.spacing(8)}
|
||||
gap={theme.spacing(12)}
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
maxWidth={400}
|
||||
sx={{
|
||||
width: {
|
||||
sm: "80%",
|
||||
md: "70%",
|
||||
lg: "65%",
|
||||
xl: "65%",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Controller
|
||||
name="email"
|
||||
control={control}
|
||||
defaultValue=""
|
||||
render={({ field }) => (
|
||||
<TextInput
|
||||
{...field}
|
||||
label={t("auth.common.inputs.email.label")}
|
||||
fullWidth
|
||||
placeholder={t("auth.common.inputs.email.placeholder")}
|
||||
error={!!errors.email}
|
||||
helperText={errors.email ? errors.email.message : ""}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="password"
|
||||
control={control}
|
||||
defaultValue=""
|
||||
render={({ field }) => (
|
||||
<TextInput
|
||||
{...field}
|
||||
type="password"
|
||||
label={t("auth.common.inputs.password.label")}
|
||||
fullWidth
|
||||
placeholder="••••••••••"
|
||||
error={!!errors.password}
|
||||
helperText={errors.password ? errors.password.message : ""}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Button
|
||||
variant="contained"
|
||||
loading={loading}
|
||||
color="accent"
|
||||
type="submit"
|
||||
sx={{ width: "100%", alignSelf: "center", fontWeight: 700 }}
|
||||
>
|
||||
Login
|
||||
</Button>
|
||||
</Stack>
|
||||
<TextLink
|
||||
text={t("auth.login.links.forgotPassword")}
|
||||
linkText={t("auth.login.links.forgotPasswordLink")}
|
||||
href="/forgot-password"
|
||||
/>
|
||||
<TextLink
|
||||
text={t("auth.login.links.register")}
|
||||
linkText={t("auth.login.links.registerLink")}
|
||||
href="/register"
|
||||
/>
|
||||
</Stack>
|
||||
</AuthBasePage>
|
||||
);
|
||||
};
|
||||
|
||||
export default Login;
|
||||
@@ -1,177 +0,0 @@
|
||||
import { AuthBasePage } from "@/Components/v2/Auth";
|
||||
import { TextInput } from "@/Components/v2/Inputs";
|
||||
import { Button } from "@/Components/v2/Inputs";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import Stack from "@mui/material/Stack";
|
||||
|
||||
import type { ApiResponse } from "@/Hooks/v2/UseApi";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { z } from "zod";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useForm, Controller } from "react-hook-form";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import { usePost } from "@/Hooks/v2/UseApi";
|
||||
import { useNavigate } from "react-router";
|
||||
|
||||
const schema = z
|
||||
.object({
|
||||
email: z.email({ message: "Invalid email address" }),
|
||||
firstName: z.string().min(1, { message: "First Name is required" }),
|
||||
lastName: z.string().min(1, { message: "Last Name is required" }),
|
||||
password: z.string().min(6, { message: "Password must be at least 6 characters" }),
|
||||
confirmPassword: z
|
||||
.string()
|
||||
.min(6, { message: "Confirm Password must be at least 6 characters" }),
|
||||
})
|
||||
.refine((data) => data.password === data.confirmPassword, {
|
||||
path: ["confirmPassword"],
|
||||
message: "Passwords must match",
|
||||
});
|
||||
|
||||
type FormData = z.infer<typeof schema>;
|
||||
|
||||
const Register = () => {
|
||||
const { t } = useTranslation();
|
||||
const theme = useTheme();
|
||||
const navigate = useNavigate();
|
||||
const { post, loading, error } = usePost<FormData, ApiResponse>();
|
||||
|
||||
const {
|
||||
handleSubmit,
|
||||
control,
|
||||
formState: { errors },
|
||||
} = useForm<FormData>({
|
||||
resolver: zodResolver(schema),
|
||||
defaultValues: {
|
||||
email: "",
|
||||
password: "",
|
||||
},
|
||||
});
|
||||
|
||||
const onSubmit = async (data: FormData) => {
|
||||
const result = await post("/auth/register", data);
|
||||
if (result) {
|
||||
navigate("/v2/uptime");
|
||||
} else {
|
||||
console.error("Login failed:", error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<AuthBasePage
|
||||
title={t("auth.registration.welcome")}
|
||||
subtitle={t("auth.registration.heading.user")}
|
||||
>
|
||||
<Stack
|
||||
alignItems={"center"}
|
||||
width={"100%"}
|
||||
>
|
||||
<Stack
|
||||
component="form"
|
||||
padding={theme.spacing(8)}
|
||||
gap={theme.spacing(12)}
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
maxWidth={400}
|
||||
sx={{
|
||||
width: {
|
||||
sm: "80%",
|
||||
md: "70%",
|
||||
lg: "65%",
|
||||
xl: "65%",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Controller
|
||||
name="email"
|
||||
control={control}
|
||||
defaultValue=""
|
||||
render={({ field }) => (
|
||||
<TextInput
|
||||
{...field}
|
||||
label={t("auth.common.inputs.email.label")}
|
||||
fullWidth
|
||||
placeholder={t("auth.common.inputs.email.placeholder")}
|
||||
error={!!errors.email}
|
||||
helperText={errors.email ? errors.email.message : ""}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="firstName"
|
||||
control={control}
|
||||
defaultValue=""
|
||||
render={({ field }) => (
|
||||
<TextInput
|
||||
{...field}
|
||||
label={t("auth.common.inputs.firstName.label")}
|
||||
fullWidth
|
||||
placeholder={t("auth.common.inputs.firstName.placeholder")}
|
||||
error={!!errors.firstName}
|
||||
helperText={errors.firstName ? errors.firstName.message : ""}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="lastName"
|
||||
control={control}
|
||||
defaultValue=""
|
||||
render={({ field }) => (
|
||||
<TextInput
|
||||
{...field}
|
||||
label={t("auth.common.inputs.lastName.label")}
|
||||
fullWidth
|
||||
placeholder={t("auth.common.inputs.lastName.placeholder")}
|
||||
error={!!errors.lastName}
|
||||
helperText={errors.lastName ? errors.lastName.message : ""}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="password"
|
||||
control={control}
|
||||
defaultValue=""
|
||||
render={({ field }) => (
|
||||
<TextInput
|
||||
{...field}
|
||||
type="password"
|
||||
label={t("auth.common.inputs.password.label")}
|
||||
fullWidth
|
||||
placeholder="••••••••••"
|
||||
error={!!errors.password}
|
||||
helperText={errors.password ? errors.password.message : ""}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="confirmPassword"
|
||||
control={control}
|
||||
defaultValue=""
|
||||
render={({ field }) => (
|
||||
<TextInput
|
||||
{...field}
|
||||
type="password"
|
||||
label={t("auth.common.inputs.passwordConfirm.label")}
|
||||
fullWidth
|
||||
placeholder={t("auth.common.inputs.passwordConfirm.placeholder")}
|
||||
error={!!errors.confirmPassword}
|
||||
helperText={errors.confirmPassword ? errors.confirmPassword.message : ""}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Button
|
||||
variant="contained"
|
||||
loading={loading}
|
||||
color="accent"
|
||||
type="submit"
|
||||
sx={{ width: "100%", alignSelf: "center", fontWeight: 700 }}
|
||||
>
|
||||
Register
|
||||
</Button>
|
||||
{error && <Typography color="error">{error}</Typography>}
|
||||
</Stack>
|
||||
</Stack>
|
||||
</AuthBasePage>
|
||||
);
|
||||
};
|
||||
|
||||
export default Register;
|
||||
@@ -1,93 +0,0 @@
|
||||
import { Table, Pagination } from "@/Components/v2/DesignElements";
|
||||
import { StatusLabel } from "@/Components/v2/DesignElements";
|
||||
import Box from "@mui/material/Box";
|
||||
|
||||
import type { Header } from "@/Components/v2/DesignElements/Table";
|
||||
import type { Check } from "@/Types/Check";
|
||||
import type { ApiResponse } from "@/Hooks/v2/UseApi";
|
||||
import type { MonitorStatus } from "@/Types/Monitor";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useGet } from "@/Hooks/v2/UseApi";
|
||||
import { formatDateWithTz } from "@/Utils/v2/TimeUtils";
|
||||
import { useSelector } from "react-redux";
|
||||
const getHeaders = (t: Function, uiTimezone: string) => {
|
||||
const headers: Header<Check>[] = [
|
||||
{
|
||||
id: "status",
|
||||
content: t("status"),
|
||||
render: (row) => {
|
||||
return <StatusLabel status={row.status as MonitorStatus} />;
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "date",
|
||||
content: t("date&Time"),
|
||||
render: (row) => {
|
||||
return formatDateWithTz(row.createdAt, "ddd, MMMM D, YYYY, HH:mm A", uiTimezone);
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "statusCode",
|
||||
content: t("statusCode"),
|
||||
render: (row) => {
|
||||
return row.httpStatusCode || "N/A";
|
||||
},
|
||||
},
|
||||
];
|
||||
return headers;
|
||||
};
|
||||
|
||||
export const CheckTable = ({ monitorId }: { monitorId: string }) => {
|
||||
const [page, setPage] = useState(0);
|
||||
const [rowsPerPage, setRowsPerPage] = useState(5);
|
||||
const { t } = useTranslation();
|
||||
const uiTimezone = useSelector((state: any) => state.ui.timezone);
|
||||
const headers = getHeaders(t, uiTimezone);
|
||||
|
||||
const { response, error } = useGet<ApiResponse>(
|
||||
`/monitors/${monitorId}/checks?page=${page}&rowsPerPage=${rowsPerPage}`,
|
||||
{},
|
||||
{ keepPreviousData: true }
|
||||
);
|
||||
|
||||
const checks = response?.data?.checks || [];
|
||||
const count = response?.data?.count || 0;
|
||||
|
||||
const handlePageChange = (
|
||||
_e: React.MouseEvent<HTMLButtonElement> | null,
|
||||
newPage: number
|
||||
) => {
|
||||
setPage(newPage);
|
||||
};
|
||||
|
||||
const handleRowsPerPageChange = (
|
||||
e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
|
||||
) => {
|
||||
const value = Number(e.target.value);
|
||||
setPage(0);
|
||||
setRowsPerPage(value);
|
||||
};
|
||||
|
||||
if (error) {
|
||||
console.error(error);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Table
|
||||
headers={headers}
|
||||
data={checks}
|
||||
/>
|
||||
<Pagination
|
||||
component="div"
|
||||
count={count}
|
||||
page={page}
|
||||
rowsPerPage={rowsPerPage}
|
||||
onPageChange={handlePageChange}
|
||||
onRowsPerPageChange={handleRowsPerPageChange}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
@@ -1,43 +0,0 @@
|
||||
import { monitorSchema } from "@/Validation/v2/zod";
|
||||
import { useGet, usePost } from "@/Hooks/v2/UseApi";
|
||||
import { UptimeForm } from "@/Pages/v2/Uptime/UptimeForm";
|
||||
|
||||
import { useParams } from "react-router";
|
||||
import type { ApiResponse } from "@/Hooks/v2/UseApi";
|
||||
import humanInterval from "human-interval";
|
||||
import { z } from "zod";
|
||||
|
||||
export const UptimeConfigurePage = () => {
|
||||
type FormValues = z.infer<typeof monitorSchema>;
|
||||
type SubmitValues = Omit<FormValues, "interval"> & { interval: number | undefined };
|
||||
|
||||
const { id } = useParams();
|
||||
const { response } = useGet<ApiResponse>("/notification-channels");
|
||||
const { response: monitorResponse } = useGet<ApiResponse>(`/monitors/${id}`);
|
||||
const monitor = monitorResponse?.data || null;
|
||||
const notificationOptions = response?.data ?? [];
|
||||
|
||||
const { post, loading, error } = usePost<SubmitValues, ApiResponse>();
|
||||
|
||||
const onSubmit = async (data: FormValues) => {
|
||||
let interval = humanInterval(data.interval);
|
||||
if (!interval) interval = 60000;
|
||||
const submitData = { ...data, interval };
|
||||
const result = await post("/monitors", submitData);
|
||||
if (result) {
|
||||
console.log(result);
|
||||
} else {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<UptimeForm
|
||||
initialData={{
|
||||
...monitor,
|
||||
}}
|
||||
onSubmit={onSubmit}
|
||||
notificationOptions={notificationOptions}
|
||||
loading={loading}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@@ -1,262 +0,0 @@
|
||||
import Stack from "@mui/material/Stack";
|
||||
import { TextInput } from "@/Components/v2/Inputs/TextInput";
|
||||
import { AutoCompleteInput } from "@/Components/v2/Inputs/AutoComplete";
|
||||
import { ConfigBox, BasePage } from "@/Components/v2/DesignElements";
|
||||
import RadioGroup from "@mui/material/RadioGroup";
|
||||
import FormControl from "@mui/material/FormControl";
|
||||
import { RadioWithDescription } from "@/Components/v2/Inputs/RadioInput";
|
||||
import { Button } from "@/Components/v2/Inputs";
|
||||
import DeleteOutlineRoundedIcon from "@mui/icons-material/DeleteOutlineRounded";
|
||||
import { Typography } from "@mui/material";
|
||||
import humanInterval from "human-interval";
|
||||
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useForm, Controller, useWatch } from "react-hook-form";
|
||||
import { z } from "zod";
|
||||
import { monitorSchema } from "@/Validation/v2/zod";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useGet, usePost } from "@/Hooks/v2/UseApi";
|
||||
import type { ApiResponse } from "@/Hooks/v2/UseApi";
|
||||
|
||||
const UptimeCreatePage = () => {
|
||||
const { t } = useTranslation();
|
||||
const theme = useTheme();
|
||||
|
||||
type FormValues = z.infer<typeof monitorSchema>;
|
||||
type SubmitValues = Omit<FormValues, "interval"> & { interval: number | undefined };
|
||||
|
||||
const {
|
||||
handleSubmit,
|
||||
control,
|
||||
setValue,
|
||||
formState: { errors },
|
||||
} = useForm<FormValues>({
|
||||
resolver: zodResolver(monitorSchema) as any,
|
||||
defaultValues: {
|
||||
type: "http",
|
||||
url: "",
|
||||
n: 3,
|
||||
notificationChannels: [],
|
||||
name: "",
|
||||
interval: "1 minute",
|
||||
},
|
||||
mode: "onChange",
|
||||
});
|
||||
const { response } = useGet<ApiResponse>("/notification-channels");
|
||||
const { post, loading, error } = usePost<SubmitValues>();
|
||||
const selectedType = useWatch({
|
||||
control,
|
||||
name: "type",
|
||||
});
|
||||
const notificationChannels = useWatch({
|
||||
control,
|
||||
name: "notificationChannels",
|
||||
});
|
||||
|
||||
const onSubmit = async (data: FormValues) => {
|
||||
let interval = humanInterval(data.interval);
|
||||
if (!interval) interval = 60000;
|
||||
const submitData = { ...data, interval };
|
||||
const result = await post("/monitors", submitData);
|
||||
if (result) {
|
||||
console.log(result);
|
||||
} else {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
const notificationOptions = response?.data ?? [];
|
||||
return (
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<BasePage>
|
||||
<ConfigBox
|
||||
title={t("distributedUptimeCreateChecks")}
|
||||
subtitle={t("distributedUptimeCreateChecksDescription")}
|
||||
rightContent={
|
||||
<Controller
|
||||
name="type"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<FormControl error={!!errors.type}>
|
||||
<RadioGroup
|
||||
{...field}
|
||||
sx={{ gap: theme.spacing(6) }}
|
||||
>
|
||||
<RadioWithDescription
|
||||
value="http"
|
||||
label={"HTTP"}
|
||||
description={"Use HTTP to monitor your website or API endpoint."}
|
||||
/>
|
||||
<RadioWithDescription
|
||||
value="https"
|
||||
label="HTTPS"
|
||||
description="Use HTTPS to monitor your website or API endpoint.
|
||||
"
|
||||
/>
|
||||
<RadioWithDescription
|
||||
value="ping"
|
||||
label={t("pingMonitoring")}
|
||||
description={t("pingMonitoringDescription")}
|
||||
/>
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<ConfigBox
|
||||
title={t("settingsGeneralSettings")}
|
||||
subtitle={t(`uptimeGeneralInstructions.${selectedType}`)}
|
||||
rightContent={
|
||||
<Stack gap={theme.spacing(8)}>
|
||||
<Controller
|
||||
name="url"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<TextInput
|
||||
{...field}
|
||||
type="text"
|
||||
label={t("url")}
|
||||
fullWidth
|
||||
error={!!errors.url}
|
||||
helperText={errors.url ? errors.url.message : ""}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="name"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<TextInput
|
||||
{...field}
|
||||
type="text"
|
||||
label={t("displayName")}
|
||||
fullWidth
|
||||
error={!!errors.name}
|
||||
helperText={errors.name ? errors.name.message : ""}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Stack>
|
||||
}
|
||||
/>
|
||||
<ConfigBox
|
||||
title={t("createMonitorPage.incidentConfigTitle")}
|
||||
subtitle={t("createMonitorPage.incidentConfigDescriptionV2")}
|
||||
rightContent={
|
||||
<Controller
|
||||
name="n"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<TextInput
|
||||
{...field}
|
||||
type="number"
|
||||
label={t("createMonitorPage.incidentConfigStatusCheckNumber")}
|
||||
fullWidth
|
||||
error={!!errors.n}
|
||||
helperText={errors.n ? errors.n.message : ""}
|
||||
onChange={(e) => {
|
||||
const target = e.target as HTMLInputElement;
|
||||
field.onChange(target.valueAsNumber);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<ConfigBox
|
||||
title={t("notificationConfig.title")}
|
||||
subtitle={t("notificationConfig.description")}
|
||||
rightContent={
|
||||
<Stack>
|
||||
<Controller
|
||||
name="notificationChannels"
|
||||
control={control}
|
||||
defaultValue={[]} // important!
|
||||
render={({ field }) => (
|
||||
<AutoCompleteInput
|
||||
multiple
|
||||
options={notificationOptions}
|
||||
getOptionLabel={(option) => option.name}
|
||||
value={notificationOptions.filter((o: any) =>
|
||||
(field.value || []).includes(o._id)
|
||||
)}
|
||||
onChange={(_, newValue) => {
|
||||
field.onChange(newValue.map((o: any) => o._id));
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Stack
|
||||
gap={theme.spacing(2)}
|
||||
mt={theme.spacing(2)}
|
||||
>
|
||||
{notificationChannels.map((notificationId) => {
|
||||
const option = notificationOptions.find(
|
||||
(o: any) => o._id === notificationId
|
||||
);
|
||||
if (!option) return null;
|
||||
return (
|
||||
<Stack
|
||||
width={"100%"}
|
||||
justifyContent={"space-between"}
|
||||
direction="row"
|
||||
key={notificationId}
|
||||
>
|
||||
<Typography>{option.name}</Typography>
|
||||
<DeleteOutlineRoundedIcon
|
||||
onClick={() => {
|
||||
const updated = notificationChannels.filter(
|
||||
(id) => id !== notificationId
|
||||
);
|
||||
setValue("notificationChannels", updated);
|
||||
}}
|
||||
sx={{ cursor: "pointer" }}
|
||||
/>
|
||||
</Stack>
|
||||
);
|
||||
})}
|
||||
</Stack>
|
||||
</Stack>
|
||||
}
|
||||
/>
|
||||
<ConfigBox
|
||||
title={t("createMonitorPage.intervalTitle")}
|
||||
subtitle="How often to check the URL"
|
||||
rightContent={
|
||||
<Controller
|
||||
name="interval"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<TextInput
|
||||
{...field}
|
||||
type="text"
|
||||
label={t("createMonitorPage.intervalDescription")}
|
||||
fullWidth
|
||||
error={!!errors.interval}
|
||||
helperText={errors.interval ? errors.interval.message : ""}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Stack
|
||||
direction="row"
|
||||
justifyContent="flex-end"
|
||||
>
|
||||
<Button
|
||||
loading={loading}
|
||||
type="submit"
|
||||
variant="contained"
|
||||
color="accent"
|
||||
>
|
||||
{t("settingsSave")}
|
||||
</Button>
|
||||
</Stack>
|
||||
</BasePage>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
export default UptimeCreatePage;
|
||||
@@ -1,157 +0,0 @@
|
||||
import { BasePage } from "@/Components/v2/DesignElements";
|
||||
import { HeaderControls } from "@/Components/v2/Monitors/HeaderControls";
|
||||
import Stack from "@mui/material/Stack";
|
||||
import { StatBox } from "@/Components/v2/DesignElements";
|
||||
import { HistogramStatus } from "@/Components/v2/Monitors/HistogramStatus";
|
||||
import { ChartAvgResponse } from "@/Components/v2/Monitors/ChartAvgResponse";
|
||||
import { ChartResponseTime } from "@/Components/v2/Monitors/ChartResponseTime";
|
||||
import { HeaderRange } from "@/Components/v2/Monitors/HeaderRange";
|
||||
import { CheckTable } from "@/Pages/v2/Uptime/CheckTable";
|
||||
|
||||
import type { IMonitor } from "@/Types/Monitor";
|
||||
import { useMediaQuery } from "@mui/material";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import { useParams } from "react-router";
|
||||
import { useGet, usePatch, type ApiResponse } from "@/Hooks/v2/UseApi";
|
||||
import { useState } from "react";
|
||||
import { getStatusPalette } from "@/Utils/v2/MonitorUtils";
|
||||
import prettyMilliseconds from "pretty-ms";
|
||||
|
||||
const UptimeDetailsPage = () => {
|
||||
const { id } = useParams();
|
||||
const theme = useTheme();
|
||||
const isSmall = useMediaQuery(theme.breakpoints.down("md"));
|
||||
|
||||
// Local state
|
||||
const [range, setRange] = useState("2h");
|
||||
|
||||
const { response, isValidating, error, refetch } = useGet<ApiResponse>(
|
||||
`/monitors/${id}?embedChecks=true&range=${range}`,
|
||||
|
||||
{},
|
||||
{ refreshInterval: 30000, keepPreviousData: true }
|
||||
);
|
||||
|
||||
const {
|
||||
response: upResponse,
|
||||
isValidating: upIsValidating,
|
||||
error: upError,
|
||||
} = useGet<ApiResponse>(
|
||||
`/monitors/${id}?embedChecks=true&range=${range}&status=up`,
|
||||
{},
|
||||
{ keepPreviousData: true }
|
||||
);
|
||||
|
||||
const {
|
||||
response: downResponse,
|
||||
error: downError,
|
||||
isValidating: downIsValidating,
|
||||
} = useGet<ApiResponse>(
|
||||
`/monitors/${id}?embedChecks=true&range=${range}&status=down`,
|
||||
{},
|
||||
{ keepPreviousData: true }
|
||||
);
|
||||
|
||||
const { patch, loading: isPatching, error: postError } = usePatch<ApiResponse>();
|
||||
|
||||
const monitor: IMonitor = response?.data?.monitor;
|
||||
|
||||
if (!monitor) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const stats = response?.data?.stats || null;
|
||||
const avgResponseTime = stats?.avgResponseTime || 0;
|
||||
const maxResponseTime = stats?.maxResponseTime || 0;
|
||||
|
||||
const streakDuration = stats?.currentStreakStartedAt
|
||||
? Date.now() - stats?.currentStreakStartedAt
|
||||
: 0;
|
||||
|
||||
const lastChecked = stats?.lastCheckTimestamp
|
||||
? Date.now() - stats?.lastCheckTimestamp
|
||||
: -1;
|
||||
|
||||
const checks = response?.data?.checks || [];
|
||||
const upChecks = upResponse?.data?.checks ? [...upResponse.data.checks].reverse() : [];
|
||||
const downChecks = downResponse?.data?.checks
|
||||
? [...downResponse.data.checks].reverse()
|
||||
: [];
|
||||
|
||||
const palette = getStatusPalette(monitor?.status);
|
||||
|
||||
if (error || upError || downError || postError) {
|
||||
console.error("Error fetching monitor data:", {
|
||||
error,
|
||||
upError,
|
||||
downError,
|
||||
postError,
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<BasePage>
|
||||
<HeaderControls
|
||||
monitor={monitor}
|
||||
patch={patch}
|
||||
isPatching={isPatching}
|
||||
refetch={refetch}
|
||||
/>
|
||||
<Stack
|
||||
direction="row"
|
||||
gap={theme.spacing(8)}
|
||||
>
|
||||
<StatBox
|
||||
palette={palette}
|
||||
title="Active for"
|
||||
subtitle={prettyMilliseconds(streakDuration, { secondsDecimalDigits: 0 })}
|
||||
/>
|
||||
<StatBox
|
||||
title="Last check"
|
||||
subtitle={
|
||||
lastChecked >= 0
|
||||
? `${prettyMilliseconds(lastChecked, { secondsDecimalDigits: 0 })} ago`
|
||||
: "N/A"
|
||||
}
|
||||
/>
|
||||
<StatBox
|
||||
title="Last response time"
|
||||
subtitle={stats?.lastResponseTime ? `${stats?.lastResponseTime} ms` : "N/A"}
|
||||
/>
|
||||
</Stack>
|
||||
<HeaderRange
|
||||
loading={isValidating || upIsValidating || downIsValidating}
|
||||
range={range}
|
||||
setRange={setRange}
|
||||
/>
|
||||
<Stack
|
||||
direction={isSmall ? "column" : "row"}
|
||||
gap={theme.spacing(8)}
|
||||
>
|
||||
<HistogramStatus
|
||||
title="Uptime"
|
||||
status={"up"}
|
||||
checks={upChecks}
|
||||
range={range}
|
||||
/>
|
||||
<HistogramStatus
|
||||
title="Incidents"
|
||||
checks={downChecks}
|
||||
status={"down"}
|
||||
range={range}
|
||||
/>
|
||||
<ChartAvgResponse
|
||||
avg={avgResponseTime}
|
||||
max={maxResponseTime}
|
||||
/>
|
||||
</Stack>
|
||||
<ChartResponseTime
|
||||
checks={checks}
|
||||
range={range}
|
||||
/>
|
||||
<CheckTable monitorId={monitor?._id} />
|
||||
</BasePage>
|
||||
);
|
||||
};
|
||||
|
||||
export default UptimeDetailsPage;
|
||||
@@ -1,158 +0,0 @@
|
||||
import Stack from "@mui/material/Stack";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import { Table } from "@/Components/v2/DesignElements";
|
||||
import { HistogramResponseTime } from "@/Components/v2/Monitors/HistogramResponseTime";
|
||||
import type { Header } from "@/Components/v2/DesignElements/Table";
|
||||
import { ActionsMenu } from "@/Components/v2/ActionsMenu";
|
||||
import { StatusLabel } from "@/Components/v2/DesignElements";
|
||||
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useMediaQuery } from "@mui/material";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { usePatch } from "@/Hooks/v2/UseApi";
|
||||
import type { ApiResponse } from "@/Hooks/v2/UseApi";
|
||||
|
||||
import type { IMonitor } from "@/Types/Monitor";
|
||||
import type { ActionMenuItem } from "@/Components/v2/ActionsMenu";
|
||||
|
||||
export const MonitorTable = ({
|
||||
monitors,
|
||||
refetch,
|
||||
}: {
|
||||
monitors: IMonitor[];
|
||||
refetch: Function;
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const theme = useTheme();
|
||||
const isSmall = useMediaQuery(theme.breakpoints.down("md"));
|
||||
const navigate = useNavigate();
|
||||
const {
|
||||
patch,
|
||||
// loading: isPatching,
|
||||
// error: postError,
|
||||
} = usePatch<ApiResponse>();
|
||||
|
||||
const getActions = (monitor: IMonitor): ActionMenuItem[] => {
|
||||
return [
|
||||
{
|
||||
id: 1,
|
||||
label: "Open site",
|
||||
action: () => {
|
||||
window.open(monitor.url, "_blank", "noreferrer");
|
||||
},
|
||||
closeMenu: true,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: "Details",
|
||||
action: () => {
|
||||
navigate(`${monitor._id}`);
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
label: "Incidents",
|
||||
action: () => {
|
||||
navigate(`/v2/incidents/${monitor._id}`);
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
label: "Configure",
|
||||
action: () => {
|
||||
console.log("Open configure");
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
label: "Clone",
|
||||
action: () => {
|
||||
console.log("Open clone");
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
label: monitor.isActive ? "Pause" : "Resume",
|
||||
action: async () => {
|
||||
await patch(`/monitors/${monitor._id}/active`);
|
||||
refetch();
|
||||
},
|
||||
closeMenu: true,
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
label: <Typography color={theme.palette.error.main}>Remove</Typography>,
|
||||
action: () => {
|
||||
console.log("Open delete");
|
||||
},
|
||||
closeMenu: true,
|
||||
},
|
||||
];
|
||||
};
|
||||
|
||||
const getHeaders = () => {
|
||||
const headers: Header<IMonitor>[] = [
|
||||
{
|
||||
id: "name",
|
||||
content: t("host"),
|
||||
render: (row) => {
|
||||
return row.name;
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "status",
|
||||
content: t("status"),
|
||||
render: (row) => {
|
||||
return (
|
||||
<StatusLabel
|
||||
status={row.status}
|
||||
isActive={row.isActive}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "histogram",
|
||||
content: t("responseTime"),
|
||||
render: (row) => {
|
||||
return (
|
||||
<Stack alignItems={"center"}>
|
||||
<HistogramResponseTime checks={row.latestChecks} />
|
||||
</Stack>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "type",
|
||||
content: t("type"),
|
||||
render: (row) => {
|
||||
return row.type;
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "actions",
|
||||
content: t("actions"),
|
||||
render: (row) => {
|
||||
return <ActionsMenu items={getActions(row)} />;
|
||||
},
|
||||
},
|
||||
];
|
||||
return headers;
|
||||
};
|
||||
|
||||
let headers = getHeaders();
|
||||
|
||||
if (isSmall) {
|
||||
headers = headers.filter((h) => h.id !== "histogram");
|
||||
}
|
||||
return (
|
||||
<Table
|
||||
headers={headers}
|
||||
data={monitors}
|
||||
onRowClick={(row) => {
|
||||
navigate(row._id);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@@ -1,247 +0,0 @@
|
||||
import Stack from "@mui/material/Stack";
|
||||
import { TextInput } from "@/Components/v2/Inputs/TextInput";
|
||||
import { AutoCompleteInput } from "@/Components/v2/Inputs/AutoComplete";
|
||||
import { ConfigBox, BasePage } from "@/Components/v2/DesignElements";
|
||||
import RadioGroup from "@mui/material/RadioGroup";
|
||||
import FormControl from "@mui/material/FormControl";
|
||||
import { RadioWithDescription } from "@/Components/v2/Inputs/RadioInput";
|
||||
import { Button } from "@/Components/v2/Inputs";
|
||||
import DeleteOutlineRoundedIcon from "@mui/icons-material/DeleteOutlineRounded";
|
||||
import { Typography } from "@mui/material";
|
||||
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { monitorSchema } from "@/Validation/v2/zod";
|
||||
import { z } from "zod";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useForm, Controller, useWatch, type SubmitHandler } from "react-hook-form";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import { useInitForm } from "@/Hooks/v2/useInitMonitorForm";
|
||||
|
||||
type FormValues = z.infer<typeof monitorSchema>;
|
||||
|
||||
export const UptimeForm = ({
|
||||
initialData,
|
||||
onSubmit,
|
||||
notificationOptions,
|
||||
loading,
|
||||
}: {
|
||||
initialData?: Partial<FormValues>;
|
||||
onSubmit: SubmitHandler<FormValues>;
|
||||
notificationOptions: any[];
|
||||
loading: boolean;
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const theme = useTheme();
|
||||
const { defaults } = useInitForm({ initialData: initialData });
|
||||
const {
|
||||
handleSubmit,
|
||||
control,
|
||||
setValue,
|
||||
formState: { errors },
|
||||
} = useForm<FormValues>({
|
||||
resolver: zodResolver(monitorSchema) as any,
|
||||
defaultValues: defaults,
|
||||
mode: "onChange",
|
||||
});
|
||||
|
||||
const selectedType = useWatch({
|
||||
control,
|
||||
name: "type",
|
||||
});
|
||||
const notificationChannels = useWatch({
|
||||
control,
|
||||
name: "notificationChannels",
|
||||
});
|
||||
|
||||
return (
|
||||
<BasePage
|
||||
component={"form"}
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
>
|
||||
<ConfigBox
|
||||
title={t("distributedUptimeCreateChecks")}
|
||||
subtitle={t("distributedUptimeCreateChecksDescription")}
|
||||
rightContent={
|
||||
<Controller
|
||||
name="type"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<FormControl error={!!errors.type}>
|
||||
<RadioGroup
|
||||
{...field}
|
||||
sx={{ gap: theme.spacing(6) }}
|
||||
>
|
||||
<RadioWithDescription
|
||||
value="http"
|
||||
label={"HTTP"}
|
||||
description={"Use HTTP to monitor your website or API endpoint."}
|
||||
/>
|
||||
<RadioWithDescription
|
||||
value="https"
|
||||
label="HTTPS"
|
||||
description="Use HTTPS to monitor your website or API endpoint.
|
||||
"
|
||||
/>
|
||||
<RadioWithDescription
|
||||
value="ping"
|
||||
label={t("pingMonitoring")}
|
||||
description={t("pingMonitoringDescription")}
|
||||
/>
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<ConfigBox
|
||||
title={t("settingsGeneralSettings")}
|
||||
subtitle={t(`uptimeGeneralInstructions.${selectedType}`)}
|
||||
rightContent={
|
||||
<Stack gap={theme.spacing(8)}>
|
||||
<Controller
|
||||
name="url"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<TextInput
|
||||
{...field}
|
||||
type="text"
|
||||
label={t("url")}
|
||||
fullWidth
|
||||
error={!!errors.url}
|
||||
helperText={errors.url ? errors.url.message : ""}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="name"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<TextInput
|
||||
{...field}
|
||||
type="text"
|
||||
label={t("displayName")}
|
||||
fullWidth
|
||||
error={!!errors.name}
|
||||
helperText={errors.name ? errors.name.message : ""}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Stack>
|
||||
}
|
||||
/>
|
||||
<ConfigBox
|
||||
title={t("createMonitorPage.incidentConfigTitle")}
|
||||
subtitle={t("createMonitorPage.incidentConfigDescriptionV2")}
|
||||
rightContent={
|
||||
<Controller
|
||||
name="n"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<TextInput
|
||||
{...field}
|
||||
type="number"
|
||||
label={t("createMonitorPage.incidentConfigStatusCheckNumber")}
|
||||
fullWidth
|
||||
error={!!errors.n}
|
||||
helperText={errors.n ? errors.n.message : ""}
|
||||
onChange={(e) => {
|
||||
const target = e.target as HTMLInputElement;
|
||||
field.onChange(target.valueAsNumber);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<ConfigBox
|
||||
title={t("notificationConfig.title")}
|
||||
subtitle={t("notificationConfig.description")}
|
||||
rightContent={
|
||||
<Stack>
|
||||
<Controller
|
||||
name="notificationChannels"
|
||||
control={control}
|
||||
defaultValue={[]} // important!
|
||||
render={({ field }) => (
|
||||
<AutoCompleteInput
|
||||
multiple
|
||||
options={notificationOptions}
|
||||
getOptionLabel={(option) => option.name}
|
||||
value={notificationOptions.filter((o: any) =>
|
||||
(field.value || []).includes(o._id)
|
||||
)}
|
||||
onChange={(_, newValue) => {
|
||||
field.onChange(newValue.map((o: any) => o._id));
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Stack
|
||||
gap={theme.spacing(2)}
|
||||
mt={theme.spacing(2)}
|
||||
>
|
||||
{notificationChannels.map((notificationId) => {
|
||||
const option = notificationOptions.find(
|
||||
(o: any) => o._id === notificationId
|
||||
);
|
||||
if (!option) return null;
|
||||
return (
|
||||
<Stack
|
||||
width={"100%"}
|
||||
justifyContent={"space-between"}
|
||||
direction="row"
|
||||
key={notificationId}
|
||||
>
|
||||
<Typography>{option.name}</Typography>
|
||||
<DeleteOutlineRoundedIcon
|
||||
onClick={() => {
|
||||
const updated = notificationChannels.filter(
|
||||
(id) => id !== notificationId
|
||||
);
|
||||
setValue("notificationChannels", updated);
|
||||
}}
|
||||
sx={{ cursor: "pointer" }}
|
||||
/>
|
||||
</Stack>
|
||||
);
|
||||
})}
|
||||
</Stack>
|
||||
</Stack>
|
||||
}
|
||||
/>
|
||||
<ConfigBox
|
||||
title={t("createMonitorPage.intervalTitle")}
|
||||
subtitle="How often to check the URL"
|
||||
rightContent={
|
||||
<Controller
|
||||
name="interval"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<TextInput
|
||||
{...field}
|
||||
type="text"
|
||||
label={t("createMonitorPage.intervalDescription")}
|
||||
fullWidth
|
||||
error={!!errors.interval}
|
||||
helperText={errors.interval ? errors.interval.message : ""}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Stack
|
||||
direction="row"
|
||||
justifyContent="flex-end"
|
||||
>
|
||||
<Button
|
||||
loading={loading}
|
||||
type="submit"
|
||||
variant="contained"
|
||||
color="accent"
|
||||
>
|
||||
{t("settingsSave")}
|
||||
</Button>
|
||||
</Stack>
|
||||
</BasePage>
|
||||
);
|
||||
};
|
||||
@@ -1,74 +0,0 @@
|
||||
import {
|
||||
BasePageWithStates,
|
||||
UpStatusBox,
|
||||
DownStatusBox,
|
||||
PausedStatusBox,
|
||||
} from "@/Components/v2/DesignElements";
|
||||
import { HeaderCreate } from "@/Components/v2/Monitors";
|
||||
import Stack from "@mui/material/Stack";
|
||||
import { MonitorTable } from "@/Pages/v2/Uptime/MonitorTable";
|
||||
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import { useGet } from "@/Hooks/v2/UseApi";
|
||||
import type { ApiResponse } from "@/Hooks/v2/UseApi";
|
||||
import type { IMonitor } from "@/Types/Monitor";
|
||||
import { useMediaQuery } from "@mui/material";
|
||||
|
||||
const UptimeMonitors = () => {
|
||||
const theme = useTheme();
|
||||
const isSmall = useMediaQuery(theme.breakpoints.down("md"));
|
||||
|
||||
const { response, isValidating, error, refetch } = useGet<ApiResponse>(
|
||||
"/monitors?embedChecks=true",
|
||||
{},
|
||||
{ refreshInterval: 30000, keepPreviousData: true }
|
||||
);
|
||||
const monitors: IMonitor[] = response?.data ?? ([] as IMonitor[]);
|
||||
|
||||
const monitorStatuses = monitors.reduce(
|
||||
(acc, monitor) => {
|
||||
if (monitor.status === "up") {
|
||||
acc.up += 1;
|
||||
} else if (monitor.status === "down") {
|
||||
acc.down += 1;
|
||||
} else if (monitor.isActive === false) {
|
||||
acc.paused += 1;
|
||||
}
|
||||
return acc;
|
||||
},
|
||||
{
|
||||
up: 0,
|
||||
down: 0,
|
||||
paused: 0,
|
||||
}
|
||||
);
|
||||
|
||||
return (
|
||||
<BasePageWithStates
|
||||
loading={isValidating}
|
||||
error={error}
|
||||
items={monitors}
|
||||
page="uptime"
|
||||
actionLink="create"
|
||||
>
|
||||
<HeaderCreate
|
||||
isLoading={isValidating}
|
||||
path="/v2/uptime/create"
|
||||
/>
|
||||
<Stack
|
||||
direction={isSmall ? "column" : "row"}
|
||||
gap={theme.spacing(8)}
|
||||
>
|
||||
<UpStatusBox n={monitorStatuses.up} />
|
||||
<DownStatusBox n={monitorStatuses.down} />
|
||||
<PausedStatusBox n={monitorStatuses.paused} />
|
||||
</Stack>
|
||||
<MonitorTable
|
||||
monitors={monitors}
|
||||
refetch={refetch}
|
||||
/>
|
||||
</BasePageWithStates>
|
||||
);
|
||||
};
|
||||
|
||||
export default UptimeMonitors;
|
||||
@@ -1,5 +1,4 @@
|
||||
import { useSelector } from "react-redux";
|
||||
import { lightTheme, darkTheme } from "@/Utils/Theme/v2/theme";
|
||||
import { Navigate, Route, Routes as LibRoutes } from "react-router";
|
||||
import HomeLayout from "@/Components/v1/Layouts/HomeLayout";
|
||||
import NotFound from "../Pages/v1/NotFound";
|
||||
@@ -30,7 +29,8 @@ import InfrastructureDetails from "../Pages/v1/Infrastructure/Details";
|
||||
import ServerUnreachable from "../Pages/v1/ServerUnreachable.jsx";
|
||||
|
||||
// Incidents
|
||||
import Incidents from "../Pages/v1/Incidents";
|
||||
import Checks from "../Pages/v1/Incidents";
|
||||
import Incidents2 from "../Pages/v1/Incidents2";
|
||||
|
||||
// Status pages
|
||||
import CreateStatus from "../Pages/v1/StatusPage/Create";
|
||||
@@ -54,18 +54,11 @@ import withAdminCheck from "@/Components/v1/HOC/withAdminCheck";
|
||||
import BulkImport from "../Pages/v1/Uptime/BulkImport";
|
||||
import Logs from "../Pages/v1/Logs";
|
||||
|
||||
import V2Routes from "@/Routes/v2router";
|
||||
|
||||
const Routes = () => {
|
||||
const mode = useSelector((state) => state.ui.mode);
|
||||
const AdminCheckedRegister = withAdminCheck(AuthRegister);
|
||||
return (
|
||||
<LibRoutes>
|
||||
<Route
|
||||
path="/v2/*"
|
||||
element={<V2Routes mode={mode} />}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path="/"
|
||||
element={
|
||||
@@ -137,9 +130,13 @@ const Routes = () => {
|
||||
path="infrastructure/:monitorId"
|
||||
element={<InfrastructureDetails />}
|
||||
/>
|
||||
<Route
|
||||
path="checks/:monitorId?"
|
||||
element={<Checks />}
|
||||
/>
|
||||
<Route
|
||||
path="incidents/:monitorId?"
|
||||
element={<Incidents />}
|
||||
element={<Incidents2 />}
|
||||
/>
|
||||
|
||||
<Route
|
||||
|
||||
@@ -1,52 +0,0 @@
|
||||
import { Routes, Route } from "react-router";
|
||||
import { ThemeProvider } from "@emotion/react";
|
||||
import { lightTheme, darkTheme } from "@/Utils/Theme/v2/theme";
|
||||
|
||||
import AuthLoginV2 from "@/Pages/v2/Auth/Login";
|
||||
import AuthRegisterV2 from "@/Pages/v2/Auth/Register";
|
||||
import UptimeMonitorsPage from "@/Pages/v2/Uptime/UptimeMonitors";
|
||||
import UptimeCreatePage from "@/Pages/v2/Uptime/Create";
|
||||
import UptimeDetailsPage from "@/Pages/v2/Uptime/Details";
|
||||
import RootLayout from "@/Components/v2/Layouts/RootLayout";
|
||||
|
||||
const V2Routes = ({ mode = "light" }) => {
|
||||
const v2Theme = mode === "light" ? lightTheme : darkTheme;
|
||||
|
||||
return (
|
||||
<ThemeProvider theme={v2Theme}>
|
||||
<Routes>
|
||||
<Route
|
||||
path="login"
|
||||
element={<AuthLoginV2 />}
|
||||
/>
|
||||
<Route
|
||||
path="register"
|
||||
element={<AuthRegisterV2 />}
|
||||
/>
|
||||
<Route
|
||||
path="/"
|
||||
element={<RootLayout />}
|
||||
>
|
||||
<Route
|
||||
index
|
||||
element={<UptimeMonitorsPage />}
|
||||
/>
|
||||
<Route
|
||||
path="uptime"
|
||||
element={<UptimeMonitorsPage />}
|
||||
/>
|
||||
<Route
|
||||
path="uptime/:id"
|
||||
element={<UptimeDetailsPage />}
|
||||
/>
|
||||
<Route
|
||||
path="uptime/create"
|
||||
element={<UptimeCreatePage />}
|
||||
/>
|
||||
</Route>
|
||||
</Routes>
|
||||
</ThemeProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default V2Routes;
|
||||
@@ -1149,6 +1149,37 @@ class NetworkService {
|
||||
async fetchJson() {
|
||||
return this.axiosInstance.get("/monitors/export/json");
|
||||
}
|
||||
|
||||
getIncidentsByTeam = async (config) => {
|
||||
const params = new URLSearchParams();
|
||||
if (config.monitorId) params.append("monitorId", config.monitorId);
|
||||
if (config.status !== undefined) params.append("status", config.status);
|
||||
if (config.resolutionType) params.append("resolutionType", config.resolutionType);
|
||||
if (config.sortOrder) params.append("sortOrder", config.sortOrder);
|
||||
if (config.dateRange) params.append("dateRange", config.dateRange);
|
||||
if (config.page) params.append("page", config.page);
|
||||
if (config.rowsPerPage) params.append("rowsPerPage", config.rowsPerPage);
|
||||
return this.axiosInstance.get(`/incidents/team?${params.toString()}`);
|
||||
};
|
||||
|
||||
getIncidentById = async (incidentId) => {
|
||||
return this.axiosInstance.get(`/incidents/${incidentId}`);
|
||||
};
|
||||
|
||||
resolveIncidentManually = async (incidentId, options = {}) => {
|
||||
const body = {};
|
||||
if (options.comment) body.comment = options.comment;
|
||||
return this.axiosInstance.put(`/incidents/${incidentId}/resolve`, body);
|
||||
};
|
||||
|
||||
getIncidentSummary = async (config = {}) => {
|
||||
const params = new URLSearchParams();
|
||||
if (config.limit) params.append("limit", config.limit);
|
||||
const queryString = params.toString();
|
||||
return this.axiosInstance.get(
|
||||
`/incidents/team/summary${queryString ? `?${queryString}` : ""}`
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export default NetworkService;
|
||||
|
||||
@@ -1,124 +0,0 @@
|
||||
import { lighten, darken } from "@mui/material/styles";
|
||||
|
||||
const typographyBase = 13;
|
||||
|
||||
export const typographyLevels = {
|
||||
base: typographyBase,
|
||||
xs: `${(typographyBase - 4) / 16}rem`,
|
||||
s: `${(typographyBase - 2) / 16}rem`,
|
||||
m: `${typographyBase / 16}rem`,
|
||||
l: `${(typographyBase + 2) / 16}rem`,
|
||||
xl: `${(typographyBase + 10) / 16}rem`,
|
||||
};
|
||||
|
||||
const colors = {
|
||||
offWhite: "#FEFEFE",
|
||||
offBlack: "#131315",
|
||||
gray0: "#FDFDFD",
|
||||
gray10: "#F4F4FF",
|
||||
gray50: "#F9F9F9",
|
||||
gray100: "#F3F3F3",
|
||||
gray200: "#EFEFEF",
|
||||
gray250: "#DADADA",
|
||||
gray500: "#A2A3A3",
|
||||
gray900: "#1c1c1c",
|
||||
blueGray50: "#E8F0FE",
|
||||
blueGray500: "#475467",
|
||||
blueGray600: "#344054",
|
||||
blueGray800: "#1C2130",
|
||||
blueGray900: "#515151",
|
||||
blueBlueWave: "#1570EF",
|
||||
lightBlueWave: "#CDE2FF",
|
||||
green100: "#67cd78",
|
||||
green200: "#4B9B77",
|
||||
green400: "#079455",
|
||||
green700: "#026513",
|
||||
orange100: "#FD8F22",
|
||||
orange200: "#D69A5D",
|
||||
orange600: "#9B734B",
|
||||
orange700: "#884605",
|
||||
red100: "#F27C7C",
|
||||
red400: "#D92020",
|
||||
red600: "#9B4B4B",
|
||||
red700: "#980303",
|
||||
};
|
||||
|
||||
export const lightPalette = {
|
||||
accent: {
|
||||
main: colors.blueBlueWave,
|
||||
light: lighten(colors.blueBlueWave, 0.2),
|
||||
dark: darken(colors.blueBlueWave, 0.2),
|
||||
contrastText: colors.offWhite,
|
||||
},
|
||||
primary: {
|
||||
main: colors.offWhite,
|
||||
contrastText: colors.blueGray800,
|
||||
contrastTextSecondary: colors.blueGray600,
|
||||
contrastTextTertiary: colors.blueGray500,
|
||||
lowContrast: colors.gray250,
|
||||
},
|
||||
secondary: {
|
||||
main: colors.gray200,
|
||||
light: colors.lightBlueWave,
|
||||
contrastText: colors.blueGray600,
|
||||
},
|
||||
tertiary: {
|
||||
main: colors.gray100,
|
||||
contrastText: colors.blueGray800,
|
||||
},
|
||||
success: {
|
||||
main: colors.green700,
|
||||
contrastText: colors.offWhite,
|
||||
lowContrast: colors.green400,
|
||||
},
|
||||
warning: {
|
||||
main: colors.orange700,
|
||||
contrastText: colors.offWhite,
|
||||
lowContrast: colors.orange100,
|
||||
},
|
||||
error: {
|
||||
main: colors.red700,
|
||||
contrastText: colors.offWhite,
|
||||
lowContrast: colors.red400,
|
||||
},
|
||||
};
|
||||
|
||||
export const darkPalette = {
|
||||
accent: {
|
||||
main: colors.blueBlueWave,
|
||||
light: lighten(colors.blueBlueWave, 0.2),
|
||||
dark: darken(colors.blueBlueWave, 0.2),
|
||||
contrastText: colors.offWhite,
|
||||
},
|
||||
primary: {
|
||||
main: colors.offBlack,
|
||||
contrastText: colors.blueGray50,
|
||||
contrastTextSecondary: colors.gray200,
|
||||
contrastTextTertiary: colors.gray500,
|
||||
lowContrast: colors.blueGray600,
|
||||
},
|
||||
secondary: {
|
||||
main: "#313131",
|
||||
light: colors.lightBlueWave,
|
||||
contrastText: colors.gray200,
|
||||
},
|
||||
tertiary: {
|
||||
main: colors.blueGray800,
|
||||
contrastText: colors.gray100,
|
||||
},
|
||||
success: {
|
||||
main: colors.green100,
|
||||
contrastText: colors.offBlack,
|
||||
lowContrast: colors.green200,
|
||||
},
|
||||
warning: {
|
||||
main: colors.orange200,
|
||||
contrastText: colors.offBlack,
|
||||
lowContrast: colors.orange600,
|
||||
},
|
||||
error: {
|
||||
main: colors.red100,
|
||||
contrastText: colors.offBlack,
|
||||
lowContrast: colors.red600,
|
||||
},
|
||||
};
|
||||
@@ -1,103 +0,0 @@
|
||||
import { createTheme } from "@mui/material";
|
||||
import { lightPalette, darkPalette, typographyLevels } from "./palette";
|
||||
|
||||
import type { Theme } from "@mui/material/styles";
|
||||
|
||||
export type PaletteKey = {
|
||||
[K in keyof Theme["palette"]]: Theme["palette"][K] extends { main: any } ? K : never;
|
||||
}[keyof Theme["palette"]];
|
||||
|
||||
const fontFamilyPrimary = '"Inter" , sans-serif';
|
||||
const shadow =
|
||||
"0px 4px 24px -4px rgba(16, 24, 40, 0.08), 0px 3px 3px -3px rgba(16, 24, 40, 0.03)";
|
||||
|
||||
export const theme = (mode: string, palette: any) =>
|
||||
createTheme({
|
||||
spacing: 2,
|
||||
palette: {
|
||||
mode: mode,
|
||||
...palette,
|
||||
},
|
||||
typography: {
|
||||
fontFamily: fontFamilyPrimary,
|
||||
fontSize: typographyLevels.base,
|
||||
h1: {
|
||||
fontSize: typographyLevels.xl,
|
||||
color: palette.primary.contrastText,
|
||||
fontWeight: 500,
|
||||
},
|
||||
h2: {
|
||||
fontSize: typographyLevels.l,
|
||||
color: palette.primary.contrastTextSecondary,
|
||||
fontWeight: 400,
|
||||
},
|
||||
|
||||
body1: {
|
||||
fontSize: typographyLevels.m,
|
||||
color: palette.primary.contrastTextTertiary,
|
||||
fontWeight: 400,
|
||||
},
|
||||
body2: {
|
||||
fontSize: typographyLevels.s,
|
||||
color: palette.primary.contrastTextTertiary,
|
||||
fontWeight: 400,
|
||||
},
|
||||
},
|
||||
|
||||
components: {
|
||||
MuiFormLabel: {
|
||||
styleOverrides: {
|
||||
root: ({ theme }) => ({
|
||||
fontSize: typographyLevels.base,
|
||||
"&.Mui-focused": {
|
||||
color: theme.palette.secondary.contrastText,
|
||||
},
|
||||
}),
|
||||
},
|
||||
},
|
||||
MuiInputLabel: {
|
||||
styleOverrides: {
|
||||
root: ({ theme }) => ({
|
||||
top: `-${theme.spacing(4)}`,
|
||||
"&.MuiInputLabel-shrink": {
|
||||
top: 0,
|
||||
},
|
||||
}),
|
||||
},
|
||||
},
|
||||
|
||||
MuiOutlinedInput: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
|
||||
borderColor: palette.accent.main,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
MuiPaper: {
|
||||
styleOverrides: {
|
||||
root: ({ theme }) => {
|
||||
return {
|
||||
marginTop: 4,
|
||||
padding: 0,
|
||||
border: 1,
|
||||
borderStyle: "solid",
|
||||
borderColor: theme.palette.primary.lowContrast,
|
||||
borderRadius: 4,
|
||||
boxShadow: shadow,
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
backgroundImage: "none",
|
||||
};
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
shape: {
|
||||
borderRadius: 2,
|
||||
},
|
||||
});
|
||||
|
||||
export const lightTheme = createTheme(theme("light", lightPalette));
|
||||
export const darkTheme = createTheme(theme("dark", darkPalette));
|
||||
@@ -1,26 +0,0 @@
|
||||
import axios from "axios";
|
||||
import type { AxiosRequestConfig, AxiosResponse } from "axios";
|
||||
const BASE_URL = import.meta.env.VITE_APP_API_V2_BASE_URL;
|
||||
const api = axios.create({
|
||||
baseURL: BASE_URL || "http://localhost:55555/api/v2",
|
||||
withCredentials: true,
|
||||
});
|
||||
|
||||
export const get = <T>(
|
||||
url: string,
|
||||
config: AxiosRequestConfig = {}
|
||||
): Promise<AxiosResponse<T>> => api.get<T>(url, config);
|
||||
|
||||
export const post = <T>(
|
||||
url: string,
|
||||
data: any,
|
||||
config: AxiosRequestConfig = {}
|
||||
): Promise<AxiosResponse<T>> => api.post<T>(url, data, config);
|
||||
|
||||
export const patch = <T>(
|
||||
url: string,
|
||||
data: any,
|
||||
config: AxiosRequestConfig = {}
|
||||
): Promise<AxiosResponse<T>> => api.patch<T>(url, data, config);
|
||||
|
||||
export default api;
|
||||
@@ -1,37 +0,0 @@
|
||||
const MIN_OUT = 10;
|
||||
const MAX_OUT = 100;
|
||||
|
||||
export const normalizeResponseTimes = <T extends Record<K, number>, 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 { min, max } = checks.reduce(
|
||||
(acc, check) => {
|
||||
if (check[key] > acc.max) acc.max = check[key];
|
||||
if (check[key] < acc.min) acc.min = check[key];
|
||||
return acc;
|
||||
},
|
||||
{ max: -Infinity, min: Infinity }
|
||||
);
|
||||
|
||||
const range = max - min || 1;
|
||||
|
||||
return checks.map((check) => ({
|
||||
...check,
|
||||
normalResponseTime: MIN_OUT + ((check[key] - min) * (MAX_OUT - MIN_OUT)) / range,
|
||||
}));
|
||||
};
|
||||
@@ -1,38 +0,0 @@
|
||||
import type { MonitorStatus } from "@/Types/Monitor";
|
||||
import type { PaletteKey } from "@/Utils/Theme/v2/theme";
|
||||
export const getStatusPalette = (status: MonitorStatus): PaletteKey => {
|
||||
const paletteMap: Record<MonitorStatus, PaletteKey> = {
|
||||
up: "success",
|
||||
down: "error",
|
||||
initializing: "warning",
|
||||
};
|
||||
return paletteMap[status];
|
||||
};
|
||||
|
||||
export const getStatusColor = (status: MonitorStatus, theme: any): string => {
|
||||
const statusColors: Record<MonitorStatus, string> = {
|
||||
up: theme.palette.success.lowContrast,
|
||||
down: theme.palette.error.lowContrast,
|
||||
initializing: theme.palette.warning.lowContrast,
|
||||
};
|
||||
return statusColors[status];
|
||||
};
|
||||
|
||||
export const getResponseTimeColor = (responseTime: number): PaletteKey => {
|
||||
if (responseTime < 200) {
|
||||
return "success";
|
||||
} else if (responseTime < 300) {
|
||||
return "warning";
|
||||
} else {
|
||||
return "error";
|
||||
}
|
||||
};
|
||||
|
||||
export const formatUrl = (url: string, maxLength: number = 55) => {
|
||||
if (!url) return "";
|
||||
|
||||
const strippedUrl = url.replace(/^https?:\/\//, "");
|
||||
return strippedUrl.length > maxLength
|
||||
? `${strippedUrl.slice(0, maxLength)}…`
|
||||
: strippedUrl;
|
||||
};
|
||||
@@ -1,53 +0,0 @@
|
||||
import dayjs from "dayjs";
|
||||
import duration from "dayjs/plugin/duration";
|
||||
import utc from "dayjs/plugin/utc";
|
||||
import timezone from "dayjs/plugin/timezone";
|
||||
import customParseFormat from "dayjs/plugin/customParseFormat";
|
||||
|
||||
dayjs.extend(utc);
|
||||
dayjs.extend(timezone);
|
||||
dayjs.extend(customParseFormat);
|
||||
dayjs.extend(duration);
|
||||
|
||||
export const MS_PER_SECOND = 1000;
|
||||
export const MS_PER_MINUTE = 60 * MS_PER_SECOND;
|
||||
export const MS_PER_HOUR = 60 * MS_PER_MINUTE;
|
||||
export const MS_PER_DAY = 24 * MS_PER_HOUR;
|
||||
export const MS_PER_WEEK = MS_PER_DAY * 7;
|
||||
|
||||
export const formatDateWithTz = (timestamp: string, format: string, timezone: string) => {
|
||||
if (!timestamp) {
|
||||
return "Unknown time";
|
||||
}
|
||||
|
||||
const formattedDate = dayjs(timestamp).tz(timezone).format(format);
|
||||
return formattedDate;
|
||||
};
|
||||
|
||||
export const tickDateFormatLookup = (range: string) => {
|
||||
const tickFormatLookup: Record<string, string> = {
|
||||
"2h": "h:mm A",
|
||||
"24h": "h:mm A",
|
||||
"7d": "MM/D, h:mm A",
|
||||
"30d": "ddd. M/D",
|
||||
};
|
||||
const format = tickFormatLookup[range];
|
||||
if (format === undefined) {
|
||||
return "";
|
||||
}
|
||||
return format;
|
||||
};
|
||||
|
||||
export const tooltipDateFormatLookup = (range: string) => {
|
||||
const dateFormatLookup: Record<string, string> = {
|
||||
"2h": "ddd. MMMM D, YYYY, hh:mm A",
|
||||
"24h": "ddd. MMMM D, YYYY, hh:mm A",
|
||||
"7d": "ddd. MMMM D, YYYY, hh:mm A",
|
||||
"30d": "ddd. MMMM D, YYYY",
|
||||
};
|
||||
const format = dateFormatLookup[range];
|
||||
if (format === undefined) {
|
||||
return "";
|
||||
}
|
||||
return format;
|
||||
};
|
||||
@@ -1,36 +0,0 @@
|
||||
import { z } from "zod";
|
||||
import humanInterval from "human-interval";
|
||||
const urlRegex =
|
||||
/^(?:https?:\/\/)?([a-zA-Z0-9.-]+|\d{1,3}(\.\d{1,3}){3}|\[[0-9a-fA-F:]+\])(:\d{1,5})?$/;
|
||||
|
||||
const durationSchema = z
|
||||
.string()
|
||||
.optional()
|
||||
.superRefine((val, ctx) => {
|
||||
if (!val || val.trim() === "") return;
|
||||
const ms = humanInterval(val);
|
||||
|
||||
if (!ms || isNaN(ms)) {
|
||||
ctx.addIssue({
|
||||
code: "custom",
|
||||
message: "Invalid duration format",
|
||||
});
|
||||
} else if (ms < 10000) {
|
||||
ctx.addIssue({
|
||||
code: "custom",
|
||||
message: "Minimum duration is 10 seconds",
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
export const monitorSchema = z.object({
|
||||
type: z.string().min(1, "You must select an option"),
|
||||
url: z.string().min(1, "URL is required").regex(urlRegex, "Invalid URL"),
|
||||
n: z.coerce
|
||||
.number({ message: "Number required" })
|
||||
.min(1, "Minimum value is 1")
|
||||
.max(25, "Maximum value is 25"),
|
||||
notificationChannels: z.array(z.string()).optional().default([]),
|
||||
name: z.string().min(1, "Display name is required"),
|
||||
interval: durationSchema,
|
||||
});
|
||||
@@ -163,6 +163,7 @@
|
||||
"incidentsOptionsHeader": "Incidents for:",
|
||||
"incidentsOptionsHeaderFilterBy": "Filter by:",
|
||||
"incidentsOptionsHeaderFilterAll": "All",
|
||||
"incidentsOptionsHeaderFilterActive": "Active",
|
||||
"incidentsOptionsHeaderFilterDown": "Down",
|
||||
"incidentsOptionsHeaderFilterCannotResolve": "Cannot Resolve",
|
||||
"incidentsOptionsHeaderShow": "Show:",
|
||||
@@ -463,7 +464,8 @@
|
||||
"team": "Team",
|
||||
"logOut": "Log out",
|
||||
"notifications": "Notifications",
|
||||
"logs": "Logs"
|
||||
"logs": "Logs",
|
||||
"checks": "Checks"
|
||||
},
|
||||
"settingsEmailUser": "Email user - Username for authentication, overrides email address if specified",
|
||||
"state": "State",
|
||||
@@ -472,6 +474,7 @@
|
||||
"commonSaving": "Saving...",
|
||||
"navControls": "Controls",
|
||||
"incidentsPageTitle": "Incidents",
|
||||
"checksPageTitle": "Checks",
|
||||
"passwordPanel": {
|
||||
"passwordChangedSuccess": "Your password was changed successfully.",
|
||||
"passwordInputIncorrect": "Your password input was incorrect.",
|
||||
@@ -1062,7 +1065,9 @@
|
||||
}
|
||||
},
|
||||
"incidentsPageActionResolveMonitor": "Resolve monitor incidents",
|
||||
"checksPageActionResolveMonitor": "Resolve monitor checks",
|
||||
"incidentsPageActionResolveAll": "Resolve all incidents",
|
||||
"checksPageActionResolveAllMonitor": "Resolve all checks",
|
||||
"matchMethodOptions": {
|
||||
"equal": "Equal",
|
||||
"equalPlaceholder": "success",
|
||||
@@ -1143,5 +1148,50 @@
|
||||
"disk_selection_info": "No disk detected for the moment.",
|
||||
"disk_selection_description": "Select the specific disks you want to monitor."
|
||||
}
|
||||
"incidentsPage": {
|
||||
"title": "Incidents",
|
||||
"description": "Manage incidents for your monitors. You can resolve incidents here.",
|
||||
"resolved": "Resolved",
|
||||
"active": "Active",
|
||||
"startTime": "Start Time",
|
||||
"endTime": "End Time",
|
||||
"resolutionType": "Resolution Type",
|
||||
"unresolved": "Unresolved",
|
||||
"all": "All",
|
||||
"filterByMonitor": "Filter by monitor",
|
||||
"filterByStatus": "Filter by status",
|
||||
"filterByType": "Filter by type",
|
||||
"filterByDate": "Filter by date",
|
||||
"filterByPriority": "Filter by priority",
|
||||
"incidentsActivePanelError": "Error loading active incidents",
|
||||
"allSystemsAreOperational": "All Systems Are Operational",
|
||||
"incidentsActivePanelTitle": "Total Active Incidents",
|
||||
"incidentsLatestPanelError": "Error loading latest incidents",
|
||||
"incidentsLatestPanelTitle": "Latest Incidents",
|
||||
"incidentsLatestPanelEmpty": "No recent incidents",
|
||||
"incidentItemMonitor": "Monitor",
|
||||
"incidentItemStatus": "Status",
|
||||
"unknownMonitor": "Unknown Monitor",
|
||||
"incidentsStatisticsPanelError": "Error loading statistics",
|
||||
"incidentsStatisticsPanelTitle": "General Statistics",
|
||||
"totalIncidents": "Total Incidents",
|
||||
"mostAffectedMonitor": "Most Affected Monitor",
|
||||
"avgResolutionTime": "Avg. Resolution Time",
|
||||
"resolutions": "Resolutions",
|
||||
"automatic": "Automatic",
|
||||
"manual": "Manual",
|
||||
"incidentResolvedSuccessfully": "Incident resolved successfully",
|
||||
"incidentResolvedFailed": "Error resolving incident",
|
||||
"errorFetchingIncidents": "Error fetching incidents",
|
||||
"errorFetchingIncident": "Error fetching incident",
|
||||
"noIncidentIdProvided": "No incident ID provided",
|
||||
"errorFetchingIncidentSummary": "Error fetching incident summary",
|
||||
"incidentsOptionsHeaderFilterManual": "Manual",
|
||||
"incidentsOptionsHeaderFilterAll": "All",
|
||||
"incidentsOptionsHeaderFilterActive": "Active",
|
||||
"incidentsOptionsHeaderFilterResolved": "Resolved",
|
||||
"incidentsTableResolved": "Closed",
|
||||
"incidentsTableActionResolveManually": "Resolve Manually",
|
||||
"hours": "hours"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { configureStore, combineReducers } from "@reduxjs/toolkit";
|
||||
|
||||
import authReducer from "./Features/Auth/authSlice";
|
||||
import v2AuthReducer from "./Features/Auth/v2AuthSlice";
|
||||
import uiReducer from "./Features/UI/uiSlice";
|
||||
import storage from "redux-persist/lib/storage";
|
||||
import { persistReducer, persistStore, createTransform } from "redux-persist";
|
||||
@@ -20,13 +19,12 @@ const authTransform = createTransform(
|
||||
const persistConfig = {
|
||||
key: "root",
|
||||
storage,
|
||||
whitelist: ["auth", "v2Auth", "ui"],
|
||||
whitelist: ["auth", "ui"],
|
||||
transforms: [authTransform],
|
||||
};
|
||||
|
||||
const rootReducer = combineReducers({
|
||||
auth: authReducer,
|
||||
v2Auth: v2AuthReducer,
|
||||
ui: uiReducer,
|
||||
});
|
||||
|
||||
|
||||
@@ -16,13 +16,6 @@ import NotificationController from "../controllers/v1/notificationController.js"
|
||||
import DiagnosticController from "../controllers/v1/diagnosticController.js";
|
||||
import IncidentController from "../controllers/v1/incidentController.js";
|
||||
|
||||
// V2 Controllers
|
||||
import AuthControllerV2 from "../controllers/v2/AuthController.js";
|
||||
import InviteControllerV2 from "../controllers/v2/InviteController.js";
|
||||
import MaintenanceControllerV2 from "../controllers/v2/MaintenanceController.js";
|
||||
import MonitorControllerV2 from "../controllers/v2/MonitorController.js";
|
||||
import NotificationChannelControllerV2 from "../controllers/v2/NotificationChannelController.js";
|
||||
import QueueControllerV2 from "../controllers/v2/QueueController.js";
|
||||
export const initializeControllers = (services) => {
|
||||
const controllers = {};
|
||||
const commonDependencies = createCommonDependencies(services.db, services.errorService, services.logger, services.stringService);
|
||||
@@ -75,13 +68,5 @@ export const initializeControllers = (services) => {
|
||||
incidentService: services.incidentService,
|
||||
});
|
||||
|
||||
//V2
|
||||
controllers.authControllerV2 = new AuthControllerV2(services.authServiceV2, services.inviteServiceV2);
|
||||
controllers.inviteControllerV2 = new InviteControllerV2(services.inviteServiceV2);
|
||||
controllers.maintenanceControllerV2 = new MaintenanceControllerV2(services.maintenanceServiceV2);
|
||||
controllers.monitorControllerV2 = new MonitorControllerV2(services.monitorServiceV2, services.checkServiceV2);
|
||||
controllers.notificationChannelControllerV2 = new NotificationChannelControllerV2(services.notificationChannelServiceV2);
|
||||
controllers.queueControllerV2 = new QueueControllerV2(services.jobQueueV2);
|
||||
|
||||
return controllers;
|
||||
};
|
||||
|
||||
@@ -15,14 +15,6 @@ import NotificationRoutes from "../routes/v1/notificationRoute.js";
|
||||
|
||||
import IncidentRoutes from "../routes/v1/incidentRoute.js";
|
||||
|
||||
//V2
|
||||
import AuthRoutesV2 from "../routes/v2/auth.js";
|
||||
import InviteRoutesV2 from "../routes/v2/invite.js";
|
||||
import MaintenanceRoutesV2 from "../routes/v2/maintenance.js";
|
||||
import MonitorRoutesV2 from "../routes/v2/monitors.js";
|
||||
import NotificationChannelRoutesV2 from "../routes/v2/notificationChannels.js";
|
||||
import QueueRoutesV2 from "../routes/v2/queue.js";
|
||||
|
||||
export const setupRoutes = (app, controllers) => {
|
||||
// V1
|
||||
const authRoutes = new AuthRoutes(controllers.authController);
|
||||
@@ -50,19 +42,4 @@ export const setupRoutes = (app, controllers) => {
|
||||
app.use("/api/v1/notifications", verifyJWT, notificationRoutes.getRouter());
|
||||
app.use("/api/v1/diagnostic", verifyJWT, diagnosticRoutes.getRouter());
|
||||
app.use("/api/v1/incidents", verifyJWT, incidentRoutes.getRouter());
|
||||
|
||||
// V2
|
||||
const authRoutesV2 = new AuthRoutesV2(controllers.authControllerV2);
|
||||
const inviteRoutesV2 = new InviteRoutesV2(controllers.inviteControllerV2);
|
||||
const maintenanceRoutesV2 = new MaintenanceRoutesV2(controllers.maintenanceControllerV2);
|
||||
const monitorRoutesV2 = new MonitorRoutesV2(controllers.monitorControllerV2);
|
||||
const notificationChannelRoutesV2 = new NotificationChannelRoutesV2(controllers.notificationChannelControllerV2);
|
||||
const queueRoutesV2 = new QueueRoutesV2(controllers.queueControllerV2);
|
||||
|
||||
app.use("/api/v2/auth", authApiLimiter, authRoutesV2.getRouter());
|
||||
app.use("/api/v2/invite", inviteRoutesV2.getRouter());
|
||||
app.use("/api/v2/maintenance", maintenanceRoutesV2.getRouter());
|
||||
app.use("/api/v2/monitors", monitorRoutesV2.getRouter());
|
||||
app.use("/api/v2/notification-channels", notificationChannelRoutesV2.getRouter());
|
||||
app.use("/api/v2/queue", queueRoutesV2.getRouter());
|
||||
};
|
||||
|
||||
@@ -71,28 +71,6 @@ import RecoveryModule from "../db/v1/modules/recoveryModule.js";
|
||||
import SettingsModule from "../db/v1/modules/settingsModule.js";
|
||||
import IncidentModule from "../db/v1/modules/incidentModule.js";
|
||||
|
||||
// V2 Business
|
||||
import AuthServiceV2 from "../service/v2/business/AuthService.js";
|
||||
import CheckServiceV2 from "../service/v2/business/CheckService.js";
|
||||
import InviteServiceV2 from "../service/v2/business/InviteService.js";
|
||||
import MaintenanceServiceV2 from "../service/v2/business/MaintenanceService.js";
|
||||
import MonitorServiceV2 from "../service/v2/business/MonitorService.js";
|
||||
import MonitorStatsServiceV2 from "../service/v2/business/MonitorStatsService.js";
|
||||
import NotificationChannelServiceV2 from "../service/v2/business/NotificationChannelService.js";
|
||||
import QueueServiceV2 from "../service/v2/business/QueueService.js";
|
||||
import UserServiceV2 from "../service/v2/business/UserService.js";
|
||||
|
||||
// V2 Infra
|
||||
import DiscordServiceV2 from "../service/v2/infrastructure/NotificationServices/Discord.js";
|
||||
import EmailServiceV2 from "../service/v2/infrastructure/NotificationServices/Email.js";
|
||||
import SlackServiceV2 from "../service/v2/infrastructure/NotificationServices/Slack.js";
|
||||
import WebhookServiceV2 from "../service/v2/infrastructure/NotificationServices/Webhook.js";
|
||||
import JobGeneratorV2 from "../service/v2/infrastructure/JobGenerator.js";
|
||||
import JobQueueV2 from "../service/v2/infrastructure/JobQueue.js";
|
||||
import NetworkServiceV2 from "../service/v2/infrastructure/NetworkService.js";
|
||||
import NotificationServiceV2 from "../service/v2/infrastructure/NotificationService.js";
|
||||
import StatusServiceV2 from "../service/v2/infrastructure/StatusService.js";
|
||||
|
||||
export const initializeServices = async ({ logger, envSettings, settingsService }) => {
|
||||
const serviceRegistry = new ServiceRegistry({ logger });
|
||||
ServiceRegistry.instance = serviceRegistry;
|
||||
@@ -244,33 +222,6 @@ export const initializeServices = async ({ logger, envSettings, settingsService
|
||||
games,
|
||||
});
|
||||
|
||||
// V2 Services
|
||||
const checkServiceV2 = new CheckServiceV2();
|
||||
const inviteServiceV2 = new InviteServiceV2();
|
||||
const maintenanceServiceV2 = new MaintenanceServiceV2();
|
||||
const monitorStatsServiceV2 = new MonitorStatsServiceV2();
|
||||
const notificationChannelServiceV2 = new NotificationChannelServiceV2();
|
||||
const userServiceV2 = new UserServiceV2();
|
||||
const discordServiceV2 = new DiscordServiceV2();
|
||||
const emailServiceV2 = new EmailServiceV2(userServiceV2);
|
||||
const slackServiceV2 = new SlackServiceV2();
|
||||
const webhookServiceV2 = new WebhookServiceV2();
|
||||
const networkServiceV2 = new NetworkServiceV2();
|
||||
const statusServiceV2 = new StatusServiceV2();
|
||||
const notificationServiceV2 = new NotificationServiceV2(userServiceV2);
|
||||
const jobGeneratorV2 = new JobGeneratorV2(
|
||||
networkServiceV2,
|
||||
checkServiceV2,
|
||||
monitorStatsServiceV2,
|
||||
statusServiceV2,
|
||||
notificationServiceV2,
|
||||
maintenanceServiceV2
|
||||
);
|
||||
const jobQueueV2 = await JobQueueV2.create(jobGeneratorV2);
|
||||
const authServiceV2 = new AuthServiceV2(jobQueueV2);
|
||||
const monitorServiceV2 = new MonitorServiceV2(jobQueueV2);
|
||||
const queueServiceV2 = new QueueServiceV2(jobQueueV2);
|
||||
|
||||
const services = {
|
||||
//v1
|
||||
settingsService,
|
||||
@@ -292,25 +243,6 @@ export const initializeServices = async ({ logger, envSettings, settingsService
|
||||
incidentService,
|
||||
errorService,
|
||||
logger,
|
||||
//v2
|
||||
jobQueueV2,
|
||||
authServiceV2,
|
||||
checkServiceV2,
|
||||
inviteServiceV2,
|
||||
maintenanceServiceV2,
|
||||
monitorServiceV2,
|
||||
monitorStatsServiceV2,
|
||||
notificationChannelServiceV2,
|
||||
queueServiceV2,
|
||||
userServiceV2,
|
||||
discordServiceV2,
|
||||
emailServiceV2,
|
||||
slackServiceV2,
|
||||
webhookServiceV2,
|
||||
networkServiceV2,
|
||||
statusServiceV2,
|
||||
notificationServiceV2,
|
||||
jobGeneratorV2,
|
||||
};
|
||||
|
||||
Object.values(services).forEach((service) => {
|
||||
|
||||
@@ -77,13 +77,20 @@ class IncidentController extends BaseController {
|
||||
* @function getIncidentSummary
|
||||
* @param {Object} req - Express request object
|
||||
* @param {Object} req.query - Query parameters
|
||||
* @param {string} [req.query.dateRange] - Date range filter
|
||||
* @param {number} [req.query.limit=10] - Number of latest incidents to return
|
||||
* @param {Object} req.user - Current authenticated user (from JWT)
|
||||
* @param {string} req.user.teamId - User's team ID
|
||||
* @param {Object} res - Express response object
|
||||
* @returns {Promise<Object>} Success response with incidents summary
|
||||
* @returns {Promise<Object>} Success response with incidents summary containing:
|
||||
* - totalActive: Number of active incidents
|
||||
* - avgResolutionTimeHours: Average time to resolve incidents in hours
|
||||
* - topMonitor: Monitor with most incidents (monitorId, monitorName, incidentCount)
|
||||
* - total: Total number of incidents
|
||||
* - totalManualResolutions: Total incidents resolved manually
|
||||
* - totalAutomaticResolutions: Total incidents resolved automatically
|
||||
* - latestIncidents: Array of latest incidents created
|
||||
* @example
|
||||
* GET /incidents/summary?dateRange=week
|
||||
* GET /incidents/team/summary?limit=5
|
||||
* // Requires JWT authentication
|
||||
*/
|
||||
getIncidentSummary = this.asyncHandler(
|
||||
|
||||
@@ -380,7 +380,7 @@ class MonitorController extends BaseController {
|
||||
const result = await this.monitorService.getMonitorsAndSummaryByTeamId({ teamId, type, explain });
|
||||
|
||||
return res.success({
|
||||
msg: "OK", // TODO
|
||||
msg: this.stringService.monitorSummaryByTeamId,
|
||||
data: result,
|
||||
});
|
||||
},
|
||||
@@ -413,7 +413,7 @@ class MonitorController extends BaseController {
|
||||
});
|
||||
|
||||
return res.success({
|
||||
msg: "OK",
|
||||
msg: this.stringService.monitorGetByTeamId,
|
||||
data: monitors,
|
||||
});
|
||||
},
|
||||
@@ -452,7 +452,7 @@ class MonitorController extends BaseController {
|
||||
const json = await this.monitorService.exportMonitorsToJSON({ teamId });
|
||||
|
||||
return res.success({
|
||||
msg: "OK",
|
||||
msg: this.stringService.monitorExportSuccess,
|
||||
data: json,
|
||||
});
|
||||
},
|
||||
@@ -463,7 +463,7 @@ class MonitorController extends BaseController {
|
||||
getAllGames = this.asyncHandler(
|
||||
async (req, res) => {
|
||||
return res.success({
|
||||
msg: "OK",
|
||||
msg: this.stringService.gameListSuccess,
|
||||
data: this.monitorService.getAllGames(),
|
||||
});
|
||||
},
|
||||
@@ -481,7 +481,7 @@ class MonitorController extends BaseController {
|
||||
const groups = await this.monitorService.getGroupsByTeamId({ teamId });
|
||||
|
||||
return res.success({
|
||||
msg: "OK",
|
||||
msg: this.stringService.groupsByTeamId,
|
||||
data: groups,
|
||||
});
|
||||
},
|
||||
|
||||
@@ -1,150 +0,0 @@
|
||||
import { Request, Response, NextFunction } from "express";
|
||||
import { encode, decode } from "../../utils/JWTUtils.js";
|
||||
import AuthService from "../../service/v2/business/AuthService.js";
|
||||
import ApiError from "../../utils/ApiError.js";
|
||||
import InviteService from "../../service/v2/business/InviteService.js";
|
||||
import { IInvite } from "../../db/v2/models/index.js";
|
||||
|
||||
class AuthController {
|
||||
private authService: AuthService;
|
||||
private inviteService: InviteService;
|
||||
constructor(authService: AuthService, inviteService: InviteService) {
|
||||
this.authService = authService;
|
||||
this.inviteService = inviteService;
|
||||
}
|
||||
|
||||
register = async (req: Request, res: Response, next: NextFunction) => {
|
||||
try {
|
||||
const { email, firstName, lastName, password } = req.body;
|
||||
|
||||
if (!email || !firstName || !lastName || !password) {
|
||||
throw new Error("Email, firstName, lastName, and password are required");
|
||||
}
|
||||
|
||||
const result = await this.authService.register({
|
||||
email,
|
||||
firstName,
|
||||
lastName,
|
||||
password,
|
||||
});
|
||||
|
||||
const token = encode(result);
|
||||
|
||||
res.cookie("token", token, {
|
||||
httpOnly: true,
|
||||
secure: process.env.NODE_ENV === "production",
|
||||
sameSite: "strict",
|
||||
maxAge: 7 * 24 * 60 * 60 * 1000, // 1 week
|
||||
});
|
||||
|
||||
res.status(201).json({
|
||||
message: "User created successfully",
|
||||
});
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
};
|
||||
|
||||
registerWithInvite = async (req: Request, res: Response, next: NextFunction) => {
|
||||
try {
|
||||
const token = req.params.token;
|
||||
if (!token) {
|
||||
throw new ApiError("Invite token is required", 400);
|
||||
}
|
||||
|
||||
const invite: IInvite = await this.inviteService.get(token);
|
||||
|
||||
const { firstName, lastName, password } = req.body;
|
||||
const email = invite?.email;
|
||||
const roles = invite?.roles;
|
||||
|
||||
if (!email || !firstName || !lastName || !password || !roles || roles.length === 0) {
|
||||
throw new Error("Email, firstName, lastName, password, and roles are required");
|
||||
}
|
||||
|
||||
const result = await this.authService.registerWithInvite({
|
||||
email,
|
||||
firstName,
|
||||
lastName,
|
||||
password,
|
||||
roles,
|
||||
});
|
||||
|
||||
if (!result) {
|
||||
throw new Error("Registration failed");
|
||||
}
|
||||
|
||||
await this.inviteService.delete(invite._id.toString());
|
||||
|
||||
const jwt = encode(result);
|
||||
|
||||
res.cookie("token", jwt, {
|
||||
httpOnly: true,
|
||||
secure: process.env.NODE_ENV === "production",
|
||||
sameSite: "strict",
|
||||
maxAge: 7 * 24 * 60 * 60 * 1000, // 1 week
|
||||
});
|
||||
|
||||
res.status(201).json({ message: "User created successfully" });
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
};
|
||||
|
||||
login = async (req: Request, res: Response, next: NextFunction) => {
|
||||
try {
|
||||
const { email, password } = req.body;
|
||||
// Validation
|
||||
if (!email || !password) {
|
||||
return res.status(400).json({ message: "Email and password are required" });
|
||||
}
|
||||
const result = await this.authService.login({ email, password });
|
||||
|
||||
const token = encode(result);
|
||||
|
||||
res.cookie("token", token, {
|
||||
httpOnly: true,
|
||||
secure: process.env.NODE_ENV === "production",
|
||||
sameSite: "strict",
|
||||
maxAge: 7 * 24 * 60 * 60 * 1000, // 1 week
|
||||
});
|
||||
|
||||
res.status(200).json({
|
||||
message: "Login successful",
|
||||
});
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
};
|
||||
|
||||
logout = (req: Request, res: Response) => {
|
||||
res.clearCookie("token", {
|
||||
httpOnly: true,
|
||||
secure: process.env.NODE_ENV === "production",
|
||||
sameSite: "strict",
|
||||
});
|
||||
res.status(200).json({ message: "Logout successful" });
|
||||
};
|
||||
|
||||
me = (req: Request, res: Response, next: NextFunction) => {
|
||||
return res.status(200).json({ message: "OK" });
|
||||
};
|
||||
|
||||
cleanup = async (req: Request, res: Response) => {
|
||||
try {
|
||||
await this.authService.cleanup();
|
||||
res.status(200).json({ message: "Cleanup successful" });
|
||||
} catch (error) {}
|
||||
};
|
||||
|
||||
cleanMonitors = async (req: Request, res: Response) => {
|
||||
try {
|
||||
await this.authService.cleanMonitors();
|
||||
res.status(200).json({ message: "Monitors cleanup successful" });
|
||||
} catch (error) {
|
||||
res.status(500).json({ message: "Internal server error" });
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export default AuthController;
|
||||
@@ -1,62 +0,0 @@
|
||||
import { Request, Response, NextFunction } from "express";
|
||||
import InviteService from "../../service/v2/business/InviteService.js";
|
||||
|
||||
class InviteController {
|
||||
private inviteService: InviteService;
|
||||
constructor(inviteService: InviteService) {
|
||||
this.inviteService = inviteService;
|
||||
}
|
||||
|
||||
create = async (req: Request, res: Response, next: NextFunction) => {
|
||||
try {
|
||||
const tokenizedUser = req.user;
|
||||
if (!tokenizedUser) {
|
||||
return res.status(401).json({ message: "Unauthorized" });
|
||||
}
|
||||
const invite = await this.inviteService.create(tokenizedUser, req.body);
|
||||
res.status(201).json({ message: "OK", data: invite });
|
||||
} catch (error: any) {
|
||||
next(error);
|
||||
}
|
||||
};
|
||||
|
||||
getAll = async (req: Request, res: Response, next: NextFunction) => {
|
||||
try {
|
||||
const invites = await this.inviteService.getAll();
|
||||
res.status(200).json({
|
||||
message: "OK",
|
||||
data: invites,
|
||||
});
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
};
|
||||
|
||||
get = async (req: Request, res: Response, next: NextFunction) => {
|
||||
try {
|
||||
const token = req.params.token;
|
||||
if (!token) {
|
||||
return res.status(400).json({ message: "Token parameter is required" });
|
||||
}
|
||||
const invite = await this.inviteService.get(token);
|
||||
res.status(200).json({ message: "OK", data: invite });
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
};
|
||||
|
||||
delete = async (req: Request, res: Response, next: NextFunction) => {
|
||||
try {
|
||||
const id = req.params.id;
|
||||
if (!id) {
|
||||
return res.status(400).json({ message: "ID parameter is required" });
|
||||
}
|
||||
await this.inviteService.delete(id);
|
||||
res.status(204).json({ message: "OK" });
|
||||
} catch (error: any) {
|
||||
next(error);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export default InviteController;
|
||||
@@ -1,96 +0,0 @@
|
||||
import { Request, Response, NextFunction } from "express";
|
||||
import MaintenanceService from "../../service/v2/business/MaintenanceService.js";
|
||||
|
||||
class MaintenanceController {
|
||||
private maintenanceService: MaintenanceService;
|
||||
constructor(maintenanceService: MaintenanceService) {
|
||||
this.maintenanceService = maintenanceService;
|
||||
}
|
||||
|
||||
create = async (req: Request, res: Response, next: NextFunction) => {
|
||||
try {
|
||||
const tokenizedUser = req.user;
|
||||
if (!tokenizedUser) {
|
||||
return res.status(401).json({ message: "Unauthorized" });
|
||||
}
|
||||
const maintenance = await this.maintenanceService.create(tokenizedUser, req.body);
|
||||
res.status(201).json({ message: "OK", data: maintenance });
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
};
|
||||
|
||||
getAll = async (req: Request, res: Response, next: NextFunction) => {
|
||||
try {
|
||||
const maintenances = await this.maintenanceService.getAll();
|
||||
res.status(200).json({
|
||||
message: "OK",
|
||||
data: maintenances,
|
||||
});
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
};
|
||||
|
||||
toggleActive = async (req: Request, res: Response, next: NextFunction) => {
|
||||
try {
|
||||
const tokenizedUser = req.user;
|
||||
if (!tokenizedUser) {
|
||||
return res.status(401).json({ message: "Unauthorized" });
|
||||
}
|
||||
const id = req.params.id;
|
||||
if (!id) {
|
||||
return res.status(400).json({ message: "ID parameter is required" });
|
||||
}
|
||||
const maintenance = await this.maintenanceService.toggleActive(tokenizedUser, id);
|
||||
res.status(200).json({ message: "OK", data: maintenance });
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
};
|
||||
|
||||
update = async (req: Request, res: Response, next: NextFunction) => {
|
||||
try {
|
||||
const tokenizedUser = req.user;
|
||||
if (!tokenizedUser) {
|
||||
return res.status(401).json({ message: "Unauthorized" });
|
||||
}
|
||||
const id = req.params.id;
|
||||
if (!id) {
|
||||
return res.status(400).json({ message: "ID parameter is required" });
|
||||
}
|
||||
const updatedMaintenance = await this.maintenanceService.update(tokenizedUser, id, req.body);
|
||||
res.status(200).json({ message: "OK", data: updatedMaintenance });
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
};
|
||||
|
||||
get = async (req: Request, res: Response, next: NextFunction) => {
|
||||
try {
|
||||
const id = req.params.id;
|
||||
if (!id) {
|
||||
return res.status(400).json({ message: "ID parameter is required" });
|
||||
}
|
||||
const maintenance = await this.maintenanceService.get(id);
|
||||
res.status(200).json({ message: "OK", data: maintenance });
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
};
|
||||
|
||||
delete = async (req: Request, res: Response, next: NextFunction) => {
|
||||
try {
|
||||
const id = req.params.id;
|
||||
if (!id) {
|
||||
return res.status(400).json({ message: "ID parameter is required" });
|
||||
}
|
||||
await this.maintenanceService.delete(id);
|
||||
res.status(204).json({ message: "OK" });
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export default MaintenanceController;
|
||||
@@ -1,191 +0,0 @@
|
||||
import { Request, Response, NextFunction } from "express";
|
||||
import ApiError from "../../utils/ApiError.js";
|
||||
import MonitorService from "../../service/v2/business/MonitorService.js";
|
||||
import { MonitorType } from "../../db/v2/models/monitors/Monitor.js";
|
||||
import CheckService from "../../service/v2/business/CheckService.js";
|
||||
class MonitorController {
|
||||
private monitorService: MonitorService;
|
||||
private checkService: CheckService;
|
||||
constructor(monitorService: MonitorService, checkService: CheckService) {
|
||||
this.monitorService = monitorService;
|
||||
this.checkService = checkService;
|
||||
}
|
||||
|
||||
create = async (req: Request, res: Response, next: NextFunction) => {
|
||||
try {
|
||||
const tokenizedUser = req.user;
|
||||
if (!tokenizedUser) {
|
||||
return res.status(401).json({ message: "Unauthorized" });
|
||||
}
|
||||
|
||||
const monitor = await this.monitorService.create(tokenizedUser, req.body);
|
||||
res.status(201).json({
|
||||
message: "Monitor created successfully",
|
||||
data: monitor,
|
||||
});
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
};
|
||||
|
||||
getAll = async (req: Request, res: Response, next: NextFunction) => {
|
||||
try {
|
||||
const tokenizedUser = req.user;
|
||||
if (!tokenizedUser) {
|
||||
return res.status(401).json({ message: "Unauthorized" });
|
||||
}
|
||||
|
||||
let monitors;
|
||||
if (req.query.embedChecks === "true") {
|
||||
const page = Math.max(1, Number(req.query.page) || 1);
|
||||
const limit = Math.max(1, Number(req.query.limit) || 10);
|
||||
const type: MonitorType[] = req.query.type as MonitorType[];
|
||||
|
||||
monitors = await this.monitorService.getAllEmbedChecks(page, limit, type);
|
||||
} else {
|
||||
monitors = await this.monitorService.getAll();
|
||||
}
|
||||
|
||||
res.status(200).json({
|
||||
message: "Monitors retrieved successfully",
|
||||
data: monitors,
|
||||
});
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
};
|
||||
|
||||
getChecks = async (req: Request, res: Response, next: NextFunction) => {
|
||||
try {
|
||||
const tokenizedUser = req.user;
|
||||
if (!tokenizedUser) {
|
||||
return res.status(401).json({ message: "Unauthorized" });
|
||||
}
|
||||
|
||||
const id = req.params.id;
|
||||
if (!id) {
|
||||
throw new ApiError("Monitor ID is required", 400);
|
||||
}
|
||||
|
||||
const page = Number(req.query.page);
|
||||
const rowsPerPage = Number(req.query.rowsPerPage);
|
||||
|
||||
if (isNaN(page)) throw new ApiError("Page query parameter must be a number", 400);
|
||||
if (isNaN(rowsPerPage)) throw new ApiError("rowsPerPage query parameter must be a number", 400);
|
||||
|
||||
if (page < 0) throw new ApiError("Page must be greater than 0", 400);
|
||||
if (rowsPerPage < 0) throw new ApiError("rowsPerPage must be greater than 0", 400);
|
||||
|
||||
const { count, checks } = await this.checkService.getChecks(id, page, rowsPerPage);
|
||||
res.status(200).json({
|
||||
message: "Checks retrieved successfully",
|
||||
data: { count, checks },
|
||||
});
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
};
|
||||
|
||||
toggleActive = async (req: Request, res: Response, next: NextFunction) => {
|
||||
try {
|
||||
const tokenizedUser = req.user;
|
||||
if (!tokenizedUser) {
|
||||
return res.status(401).json({ message: "Unauthorized" });
|
||||
}
|
||||
|
||||
const id = req.params.id;
|
||||
if (!id) {
|
||||
throw new ApiError("Monitor ID is required", 400);
|
||||
}
|
||||
|
||||
const monitor = await this.monitorService.toggleActive(id, tokenizedUser);
|
||||
res.status(200).json({
|
||||
message: "Monitor paused/unpaused successfully",
|
||||
data: monitor,
|
||||
});
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
};
|
||||
|
||||
get = async (req: Request, res: Response, next: NextFunction) => {
|
||||
try {
|
||||
const tokenizedUser = req.user;
|
||||
if (!tokenizedUser) {
|
||||
return res.status(401).json({ message: "Unauthorized" });
|
||||
}
|
||||
|
||||
const id = req.params.id;
|
||||
if (!id) {
|
||||
throw new ApiError("Monitor ID is required", 400);
|
||||
}
|
||||
|
||||
const range = req.query.range;
|
||||
if (!range || typeof range !== "string") throw new ApiError("Range query parameter is required", 400);
|
||||
|
||||
let monitor;
|
||||
|
||||
const status = req.query.status;
|
||||
if (status && typeof status !== "string") {
|
||||
throw new ApiError("Status query parameter must be a string", 400);
|
||||
}
|
||||
|
||||
if (req.query.embedChecks === "true") {
|
||||
monitor = await this.monitorService.getEmbedChecks(id, range, status);
|
||||
} else {
|
||||
monitor = await this.monitorService.get(id);
|
||||
}
|
||||
|
||||
res.status(200).json({
|
||||
message: "Monitor retrieved successfully",
|
||||
data: monitor,
|
||||
});
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
};
|
||||
|
||||
update = async (req: Request, res: Response, next: NextFunction) => {
|
||||
try {
|
||||
const tokenizedUser = req.user;
|
||||
if (!tokenizedUser) {
|
||||
return res.status(401).json({ message: "Unauthorized" });
|
||||
}
|
||||
|
||||
const id = req.params.id;
|
||||
if (!id) {
|
||||
throw new ApiError("Monitor ID is required", 400);
|
||||
}
|
||||
|
||||
const monitor = await this.monitorService.update(tokenizedUser, id, req.body);
|
||||
res.status(200).json({
|
||||
message: "Monitor updated successfully",
|
||||
data: monitor,
|
||||
});
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
};
|
||||
|
||||
delete = async (req: Request, res: Response, next: NextFunction) => {
|
||||
try {
|
||||
const tokenizedUser = req.user;
|
||||
if (!tokenizedUser) {
|
||||
return res.status(401).json({ message: "Unauthorized" });
|
||||
}
|
||||
const id = req.params.id;
|
||||
if (!id) {
|
||||
throw new ApiError("Monitor ID is required", 400);
|
||||
}
|
||||
await this.monitorService.delete(id);
|
||||
|
||||
res.status(200).json({
|
||||
message: "Monitor deleted successfully",
|
||||
});
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export default MonitorController;
|
||||
@@ -1,96 +0,0 @@
|
||||
import { Request, Response, NextFunction } from "express";
|
||||
import NotificationService from "../../service/v2/business/NotificationChannelService.js";
|
||||
|
||||
class NotificationChannelController {
|
||||
private notificationService: NotificationService;
|
||||
constructor(notificationService: NotificationService) {
|
||||
this.notificationService = notificationService;
|
||||
}
|
||||
|
||||
create = async (req: Request, res: Response, next: NextFunction) => {
|
||||
try {
|
||||
const tokenizedUser = req.user;
|
||||
if (!tokenizedUser) {
|
||||
return res.status(401).json({ message: "Unauthorized" });
|
||||
}
|
||||
const channel = await this.notificationService.create(tokenizedUser, req.body);
|
||||
res.status(201).json({ message: "OK", data: channel });
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
};
|
||||
|
||||
getAll = async (req: Request, res: Response, next: NextFunction) => {
|
||||
try {
|
||||
const notificationChannels = await this.notificationService.getAll();
|
||||
res.status(200).json({
|
||||
message: "OK",
|
||||
data: notificationChannels,
|
||||
});
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
};
|
||||
|
||||
toggleActive = async (req: Request, res: Response, next: NextFunction) => {
|
||||
try {
|
||||
const tokenizedUser = req.user;
|
||||
if (!tokenizedUser) {
|
||||
return res.status(401).json({ message: "Unauthorized" });
|
||||
}
|
||||
const id = req.params.id;
|
||||
if (!id) {
|
||||
return res.status(400).json({ message: "ID parameter is required" });
|
||||
}
|
||||
const notificationChannel = await this.notificationService.toggleActive(tokenizedUser, id);
|
||||
res.status(200).json({ message: "OK", data: notificationChannel });
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
};
|
||||
|
||||
update = async (req: Request, res: Response, next: NextFunction) => {
|
||||
try {
|
||||
const tokenizedUser = req.user;
|
||||
if (!tokenizedUser) {
|
||||
return res.status(401).json({ message: "Unauthorized" });
|
||||
}
|
||||
const id = req.params.id;
|
||||
if (!id) {
|
||||
return res.status(400).json({ message: "ID parameter is required" });
|
||||
}
|
||||
const updatedChannel = await this.notificationService.update(tokenizedUser, id, req.body);
|
||||
res.status(200).json({ message: "OK", data: updatedChannel });
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
};
|
||||
|
||||
get = async (req: Request, res: Response, next: NextFunction) => {
|
||||
try {
|
||||
const id = req.params.id;
|
||||
if (!id) {
|
||||
return res.status(400).json({ message: "ID parameter is required" });
|
||||
}
|
||||
const notificationChannel = await this.notificationService.get(id);
|
||||
res.status(200).json({ message: "OK", data: notificationChannel });
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
};
|
||||
|
||||
delete = async (req: Request, res: Response, next: NextFunction) => {
|
||||
try {
|
||||
const id = req.params.id;
|
||||
if (!id) {
|
||||
return res.status(400).json({ message: "ID parameter is required" });
|
||||
}
|
||||
await this.notificationService.delete(id);
|
||||
res.status(204).json({ message: "OK" });
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export default NotificationChannelController;
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user