Skip to content

Commit e5ef142

Browse files
ajhollidajhollid
committed
status pages
1 parent 602597a commit e5ef142

File tree

14 files changed

+76
-59
lines changed

14 files changed

+76
-59
lines changed

‎client/src/components/monitors/BarDockerCount.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,17 +17,15 @@ import { BaseBox } from "@/components/design-elements";
1717
import { useAppSelector } from "@/hooks/AppHooks";
1818
import { formatDateWithTz, tooltipDateFormatLookup } from "@/utils/TimeUtils";
1919
import { useTranslation } from "react-i18next";
20-
21-
type Datum = Record<string, unknown> & { _id: string | number };
22-
20+
import type { GroupedCheck } from "@/types/check";
2321
export const BarDockerCount = ({
2422
data,
2523
dataKey,
2624
range,
2725
title,
2826
emptyText,
2927
}: {
30-
data: Datum[];
28+
data: GroupedCheck[];
3129
dataKey: string;
3230
range: string;
3331
title: string;

‎client/src/components/monitors/HeaderControls.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export const HeaderControls = ({
4848
loading={isPosting || isPatching}
4949
startIcon={<Mail size={20} strokeWidth={1.5} />}
5050
onClick={async () => {
51-
await post(`/monitors/${monitor._id}/notifications/test`, {});
51+
await post(`/monitors/${monitor.id}/notifications/test`, {});
5252
}}
5353
>
5454
{t("common.buttons.testNotification")}
@@ -57,15 +57,15 @@ export const HeaderControls = ({
5757
<Button
5858
startIcon={<Bug size={20} strokeWidth={1.5} />}
5959
onClick={() => {
60-
navigate(`/incidents?monitorId=${monitor._id}`);
60+
navigate(`/incidents?monitorId=${monitor.id}`);
6161
}}
6262
>
6363
{t("common.buttons.incidents")}
6464
</Button>
6565
<Button
6666
loading={isPatching || isPosting}
6767
onClick={async () => {
68-
await patch(`/monitors/${monitor._id}/active`);
68+
await patch(`/monitors/${monitor.id}/active`);
6969
refetch();
7070
}}
7171
startIcon={
@@ -83,7 +83,7 @@ export const HeaderControls = ({
8383
<Button
8484
startIcon={<Settings size={20} strokeWidth={1.5} />}
8585
onClick={() => {
86-
navigate(`${path}/${monitor._id}/configure`);
86+
navigate(`${path}/${monitor.id}/configure`);
8787
}}
8888
>
8989
{t("common.buttons.configure")}

‎client/src/components/status-pages/NameHeader.tsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,10 @@ import Link from "@mui/material/Link";
55
import { config } from "@/config/index";
66
import { useTranslation } from "react-i18next";
77

8-
import type { IStatusPageWithMonitors } from "@/types/status-page";
8+
import type { IStatusPage } from "@/types/status-page";
99
const HOST = config.HOST;
1010

11-
export const NameHeader = ({
12-
statusPage,
13-
}: {
14-
statusPage: IStatusPageWithMonitors;
15-
}) => {
11+
export const NameHeader = ({ statusPage }: { statusPage: IStatusPage }) => {
1612
const { t } = useTranslation();
1713
return (
1814
<Stack direction={"row"} alignItems={"flex-end"} spacing={4}>

‎client/src/components/status-pages/StatusHeader.tsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,11 @@ import Typography from "@mui/material/Typography";
22
import Stack from "@mui/material/Stack";
33

44
import { getStatusPageHeaderConfig } from "@/utils/MonitorUtils";
5-
import type { IStatusPageWithMonitors } from "@/types/status-page";
5+
import type { IStatusPage } from "@/types/status-page";
66
import { useTheme } from "@mui/material/styles";
77
import { useTranslation } from "react-i18next";
88

9-
export const StatusHeader = ({
10-
statusPage,
11-
}: {
12-
statusPage: IStatusPageWithMonitors;
13-
}) => {
9+
export const StatusHeader = ({ statusPage }: { statusPage: IStatusPage }) => {
1410
const theme = useTheme();
1511
const { t } = useTranslation();
1612
const headerConfig = getStatusPageHeaderConfig(statusPage?.monitors || [], t);

‎client/src/components/status-pages/StatusPageRow.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,9 @@ import { useTheme } from "@mui/material/styles";
88
import { useAppSelector } from "@/hooks/AppHooks";
99
import type { IMonitor } from "@/types/monitor";
1010

11-
export const StatusPageRow = ({ monitor }: { monitor: IMonitor }) => {
11+
type Props = { monitor: IMonitor; checks: any[] };
12+
13+
export const StatusPageRow = ({ monitor, checks }: Props) => {
1214
const theme = useTheme();
1315
const type = useAppSelector((state) => state?.ui?.chartType || "heatmap");
1416

@@ -32,7 +34,7 @@ export const StatusPageRow = ({ monitor }: { monitor: IMonitor }) => {
3234
{type === "heatmap" && (
3335
<HeatmapResponseTime
3436
gap={{ xs: theme.spacing(0.5), md: theme.spacing(2) }}
35-
checks={monitor?.latestChecks ?? []}
37+
checks={checks ?? []}
3638
availabilityCellSx={{
3739
borderRadius: {
3840
xs: theme.spacing(0.5),
@@ -49,7 +51,7 @@ export const StatusPageRow = ({ monitor }: { monitor: IMonitor }) => {
4951
)}
5052
{type === "histogram" && (
5153
<HistogramResponseTime
52-
checks={monitor?.latestChecks ?? []}
54+
checks={checks ?? []}
5355
height={{ xs: 50, md: 100 }}
5456
gap={{ xs: 0.5, md: theme.spacing(4) }}
5557
/>

‎client/src/pages/checks/ChecksPage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ const ChecksPage = () => {
7373
>
7474
<MenuItem value="all">All monitors</MenuItem>
7575
{monitors.map((monitor) => (
76-
<MenuItem key={monitor._id} value={monitor._id}>
76+
<MenuItem key={monitor.id} value={monitor.id}>
7777
{monitor.name}
7878
</MenuItem>
7979
))}

‎client/src/pages/docker/DockerDetails.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,11 @@ const DockerDetailsPage = () => {
3838

3939
const monitor = response?.data?.monitor;
4040
const stats = response?.data?.stats;
41-
const checks = (response?.data?.checks || []) as any;
42-
const snapshot = monitor?.latestChecks?.[0]?.dockerContainers ?? [];
41+
const checks = response?.data?.checks || [];
42+
// TODO snapshot no longer added to checks
43+
const latestBucket =
44+
Array.isArray(checks) && checks.length > 0 ? checks[0] : null;
45+
const snapshot = latestBucket?.runningContainersSnapshot ?? [];
4346
const palette = getStatusPalette(monitor?.status || "initializing");
4447

4548
const streakDuration = stats?.currentStreakStartedAt

‎client/src/pages/incidents/IncidentsPage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ const IncidentsPage = () => {
9393
>
9494
<MenuItem value="all">All monitors</MenuItem>
9595
{monitors.map((monitor) => (
96-
<MenuItem key={monitor._id} value={monitor._id}>
96+
<MenuItem key={monitor.id} value={monitor.id}>
9797
{monitor.name}
9898
</MenuItem>
9999
))}

‎client/src/pages/status-page/StatusPageConfig.tsx‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,24 +5,27 @@ import { useNavigate } from "react-router";
55
import { usePatch, useGet } from "@/hooks/UseApi";
66
import type { ApiResponse } from "@/types/api";
77
import type { IMonitor } from "@/types/monitor";
8-
import type { IStatusPageWithMonitors } from "@/types/status-page";
8+
import type {
9+
IStatusPage,
10+
IStatusPageWithChecksMap,
11+
} from "@/types/status-page";
912
import type { FormValues } from "@/pages/status-page/StatusPageForm";
1013

1114
const StatusPageConfigPage = () => {
1215
const navigate = useNavigate();
1316
const { id } = useParams();
1417

15-
const { patch, loading } = usePatch<FormValues, IStatusPageWithMonitors>();
18+
const { patch, loading } = usePatch<FormValues, IStatusPage>();
1619
const { response, isValidating } =
1720
useGet<ApiResponse<IMonitor[]>>("/monitors");
18-
const { response: statusPageResponse } = useGet<ApiResponse<any>>(
19-
`/status-pages/${id}`
20-
);
21+
const { response: statusPageResponse } = useGet<
22+
ApiResponse<IStatusPageWithChecksMap>
23+
>(`/status-pages/${id}`);
2124

2225
const monitors = response?.data || [];
23-
const initialData = statusPageResponse?.data || {};
26+
const initialData: any = statusPageResponse?.data?.statusPage || {};
2427
initialData.monitors =
25-
initialData?.monitors?.map((monitor: IMonitor) => monitor?._id) || [];
28+
initialData?.monitors?.map((monitor: any) => monitor?._id) || [];
2629

2730
const onSubmit = async (data: FormValues) => {
2831
const res = await patch(`/status-pages/${id}`, data);

‎client/src/pages/status-page/StatusPageDetails.tsx‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,25 @@ import { StatusPageRow } from "@/components/status-pages/StatusPageRow";
44
import { BasePage } from "@/components/design-elements";
55

66
import { useTheme } from "@mui/material/styles";
7-
import type { IMonitor } from "@/types/monitor";
87
import { useGet } from "@/hooks/UseApi";
98
import type { ApiResponse } from "@/types/api";
109
import { useParams } from "react-router";
11-
import type { IStatusPageWithMonitors } from "@/types/status-page";
10+
import type { IStatusPageWithChecksMap } from "@/types/status-page";
1211
import { NameHeader } from "@/components/status-pages/NameHeader";
1312
import { config } from "@/config/index";
1413

1514
const GLOBAL_REFRESH = config.GLOBAL_REFRESH;
1615
const StatusPages = () => {
1716
const theme = useTheme();
1817
const { id } = useParams();
19-
const { response, loading } = useGet<ApiResponse<IStatusPageWithMonitors>>(
18+
const { response, loading } = useGet<ApiResponse<IStatusPageWithChecksMap>>(
2019
`/status-pages/${id}`,
2120
{},
2221
{ refreshInterval: GLOBAL_REFRESH, keepPreviousData: true }
2322
);
24-
const statusPage = response?.data;
25-
const monitors: IMonitor[] = statusPage?.monitors || [];
23+
const statusPage = response?.data?.statusPage;
24+
const monitors = statusPage?.monitors || [];
25+
const checksMap: Record<string, any[]> = response?.data?.checksMap || {};
2626

2727
if (!statusPage) {
2828
return null;
@@ -33,8 +33,15 @@ const StatusPages = () => {
3333
<Stack minWidth={"66vw"} spacing={theme.spacing(8)}>
3434
<NameHeader statusPage={statusPage} />
3535
<StatusHeader statusPage={statusPage} />
36-
{monitors?.map((monitor: IMonitor) => {
37-
return <StatusPageRow key={monitor?._id} monitor={monitor} />;
36+
{monitors?.map((monitor: any) => {
37+
const checks = checksMap?.[monitor?._id as any] || [];
38+
return (
39+
<StatusPageRow
40+
key={monitor?._id}
41+
monitor={monitor}
42+
checks={checks}
43+
/>
44+
);
3845
})}
3946
</Stack>
4047
</BasePage>

0 commit comments

Comments
 (0)