diff --git a/README.md b/README.md index c9c9073ad..7f7f0520d 100644 --- a/README.md +++ b/README.md @@ -50,7 +50,7 @@ Usage instructions can be found [here](https://docs.checkmate.so/checkmate-2.1). ## 🛠️ Installation -See installation instructions in [Checkmate documentation portal](https://docs.checkmate.so/checkmate-2.1/users-guide/quickstart). Alternatively, you can also use [Coolify](https://coolify.io/) or [Elestio](https://elest.io/open-source/checkmate) for a one-click Docker deployment. If you would like to monitor your server infrastructure, you'll need [Capture agent](https://github.com/bluewave-labs/capture). Capture repository also contains the installation instructions. +See installation instructions in [Checkmate documentation portal](https://docs.checkmate.so/checkmate-2.1/users-guide/quickstart). Alternatively, you can also use [Coolify](https://coolify.io/), [Elestio](https://elest.io/open-source/checkmate) or [Pikapods](https://www.pikapods.com/) to quickly spin off a Checkmate instance. If you would like to monitor your server infrastructure, you'll need [Capture agent](https://github.com/bluewave-labs/capture). Capture repository also contains the installation instructions. ## 🏁 Translations diff --git a/client/src/Components/Fallback/index.css b/client/src/Components/Fallback/index.css index cad46300b..357988b07 100644 --- a/client/src/Components/Fallback/index.css +++ b/client/src/Components/Fallback/index.css @@ -1,19 +1,22 @@ [class*="fallback__"] { width: fit-content; margin: auto; - margin-top: 100px; } + [class*="fallback__"] h1.MuiTypography-root { font-size: var(--env-var-font-size-large); font-weight: 600; } + [class*="fallback__"] button.MuiButtonBase-root, [class*="fallback__"] .check { width: max-content; } + [class*="fallback__"] button.MuiButtonBase-root { min-height: 34px; } + [class*="fallback__"] .check span.MuiTypography-root, [class*="fallback__"] button.MuiButtonBase-root { font-size: var(--env-var-font-size-medium); @@ -35,6 +38,7 @@ background-size: cover; background-repeat: no-repeat; } + .fallback__status > .MuiStack-root { margin-left: var(--env-var-spacing-2); } diff --git a/client/src/Components/Fallback/index.jsx b/client/src/Components/Fallback/index.jsx index b77432d58..e5a212c00 100644 --- a/client/src/Components/Fallback/index.jsx +++ b/client/src/Components/Fallback/index.jsx @@ -67,113 +67,135 @@ const Fallback = ({ ); }; - return ( - - {mode === "light" ? ( - - ) : ( - - )} - - - - + ) : ( + + )} + - {vowelStart ? "An" : "A"} {title} is used to: - - {checks?.map((check, index) => ( - - ))} - - {/* TODO - display a different fallback if user is not an admin*/} - {isAdmin && ( - <> - - {/* Bulk create of uptime monitors */} - {title === "uptime monitor" && ( + {vowelStart ? "An" : "A"} {title} is used to: + + {checks?.map((check, index) => ( + + ))} + + {/* TODO - display a different fallback if user is not an admin*/} + {isAdmin && ( + <> - )} - - {/* Warning box for PageSpeed monitor */} - {title === "pagespeed monitor" && showPageSpeedWarning && ( - - svg": { - color: theme.palette.warningSecondary.contrastText, - }, - }, - }} + {/* Bulk create of uptime monitors */} + {title === "uptime monitor" && ( + + )} + + {/* Warning box for PageSpeed monitor */} + {title === "pagespeed monitor" && showPageSpeedWarning && ( + + svg": { + color: theme.palette.warningSecondary.contrastText, + }, + }, + }} + > + {settingsData?.pagespeedKeySet === false && ( + + )} + - - )} - - )} - + )} + + )} + + ); }; diff --git a/client/src/Components/MonitorDetailsControlHeader/index.jsx b/client/src/Components/MonitorDetailsControlHeader/index.jsx index 1d253e3d5..4674a1fb7 100644 --- a/client/src/Components/MonitorDetailsControlHeader/index.jsx +++ b/client/src/Components/MonitorDetailsControlHeader/index.jsx @@ -2,6 +2,7 @@ import Stack from "@mui/material/Stack"; import Status from "./status"; import Skeleton from "./skeleton"; import Button from "@mui/material/Button"; +import { Tooltip } from "@mui/material"; import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined"; import PauseOutlinedIcon from "@mui/icons-material/PauseOutlined"; import PlayArrowOutlinedIcon from "@mui/icons-material/PlayArrowOutlined"; @@ -40,6 +41,10 @@ const MonitorDetailsControlHeader = ({ const { t } = useTranslation(); const [pauseMonitor, isPausing, error] = usePauseMonitor(); + const isTestNotificationsDisabled = monitor?.notifications?.length === 0; + + const tooltipTitle = isTestNotificationsDisabled ? t("testNotificationsDisabled") : ""; + // const [isSending, emailError, sendTestEmail] = useSendTestEmail(); const [testAllNotifications, isSending, errorAllNotifications] = @@ -60,20 +65,29 @@ const MonitorDetailsControlHeader = ({ direction="row" gap={theme.spacing(2)} > - + + + + + ) : ( + + {t("incidentsTableResolvedAt")}{" "} + {formatDateWithTz(row.ackAt, "YYYY-MM-DD HH:mm:ss A", uiTimezone)} + + ); + }, + }, ]; - if (!shouldRender || isLoading) return ; + if (isLoading || resolveLoading) return ; if (networkError) { return ( @@ -149,10 +184,12 @@ const IncidentTable = ({ }; IncidentTable.propTypes = { - shouldRender: PropTypes.bool, + isLoading: PropTypes.bool, monitors: PropTypes.object, selectedMonitor: PropTypes.string, filter: PropTypes.string, dateRange: PropTypes.string, + updateTrigger: PropTypes.bool, + setUpdateTrigger: PropTypes.func, }; export default IncidentTable; diff --git a/client/src/Pages/Incidents/Components/OptionsHeader/index.jsx b/client/src/Pages/Incidents/Components/OptionsHeader/index.jsx index 457c6fd96..259880223 100644 --- a/client/src/Pages/Incidents/Components/OptionsHeader/index.jsx +++ b/client/src/Pages/Incidents/Components/OptionsHeader/index.jsx @@ -21,6 +21,12 @@ const OptionsHeader = ({ const theme = useTheme(); const { t } = useTranslation(); const monitorNames = typeof monitors !== "undefined" ? Object.values(monitors) : []; + const filterOptions = [ + { _id: "all", name: t("incidentsOptionsHeaderFilterAll") }, + { _id: "down", name: t("incidentsOptionsHeaderFilterDown") }, + { _id: "resolve", name: t("incidentsOptionsHeaderFilterCannotResolve") }, + { _id: "resolved", name: t("incidentsOptionsHeaderFilterResolved") }, + ]; // The stacks below which are three in number have the same style so const stackStyles = { @@ -65,36 +71,16 @@ const OptionsHeader = ({ > {t("incidentsOptionsHeaderFilterBy")} - - - - - {/* */} - +