Skip to content

Commit 86cfc89

Browse files
ajhollidajhollid
committed
docker details tweaks
1 parent 5c9d6b5 commit 86cfc89

File tree

5 files changed

+85
-43
lines changed

5 files changed

+85
-43
lines changed

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

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,11 @@ import {
1212
} from "recharts";
1313
import { XTick } from "@/components/monitors/ChartResponseTime";
1414
import { useTheme } from "@mui/material/styles";
15+
import useMediaQuery from "@mui/material/useMediaQuery";
1516
import { BaseBox } from "@/components/design-elements";
1617
import { useAppSelector } from "@/hooks/AppHooks";
1718
import { formatDateWithTz, tooltipDateFormatLookup } from "@/utils/TimeUtils";
19+
import { useTranslation } from "react-i18next";
1820

1921
type Datum = Record<string, unknown> & { _id: string | number };
2022

@@ -33,32 +35,42 @@ export const BarDockerCount = ({
3335
}) => {
3436
const theme = useTheme();
3537
const hasData = Array.isArray(data) && data.length > 0;
38+
const isSmall = useMediaQuery(theme.breakpoints.down("sm"));
3639
const uiTimezone = useAppSelector((state: any) => state.ui.timezone);
40+
const { t } = useTranslation();
3741

3842
const CountTooltip = ({ active, payload, label }: any) => {
3943
if (!active || !payload || !label) return null;
40-
console.log(JSON.stringify(payload, null, 2));
4144
const fmt = tooltipDateFormatLookup(range);
4245
const value = payload?.[0]?.payload?.[dataKey] ?? 0;
4346
return (
4447
<BaseBox sx={{ py: theme.spacing(2), px: theme.spacing(4) }}>
4548
<Typography>
4649
{formatDateWithTz(String(label), fmt, uiTimezone)}
4750
</Typography>
48-
<Typography>Containers: {value}</Typography>
51+
<Typography>
52+
{t("monitors.docker.details.tooltips.containers", { value })}
53+
</Typography>
4954
</BaseBox>
5055
);
5156
};
5257

5358
return (
54-
<BaseChart title={title} icon={null}>
59+
<BaseChart
60+
title={title}
61+
icon={null}
62+
padding={{ xs: theme.spacing(4), md: theme.spacing(8) }}
63+
>
5564
{!hasData ? (
5665
<Stack height={"100%"} alignItems={"center"} justifyContent={"center"}>
5766
<Typography variant="h2">{emptyText || "No data"}</Typography>
5867
</Stack>
5968
) : (
6069
<ResponsiveContainer width="100%" height={200}>
61-
<BarChart data={data}>
70+
<BarChart
71+
data={data}
72+
margin={{ top: 8, right: 8, left: isSmall ? 4 : 12, bottom: 8 }}
73+
>
6274
<defs>
6375
<linearGradient id={"gradient"} x1="0" y1="0" x2="0" y2="1">
6476
<stop
@@ -82,7 +94,12 @@ export const BarDockerCount = ({
8294
dataKey={"_id"}
8395
tick={(props) => <XTick {...props} range={range} />}
8496
/>
85-
<YAxis allowDecimals={false} />
97+
<YAxis
98+
allowDecimals={false}
99+
width={isSmall ? 24 : 36}
100+
tick={{ fontSize: isSmall ? 10 : 11 }}
101+
tickMargin={4}
102+
/>
86103
<Tooltip content={<CountTooltip />} cursor={false} />
87104
<Bar dataKey={dataKey} fill={`url(#gradient)`} />
88105
</BarChart>

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { BaseBox } from "../design-elements";
22
import Stack from "@mui/material/Stack";
33
import Box from "@mui/material/Box";
44
import Typography from "@mui/material/Typography";
5+
import type { ResponsiveStyleValue } from "@mui/system";
56

67
import { useTheme } from "@mui/material/styles";
78

@@ -10,6 +11,7 @@ type BaseChartProps = React.PropsWithChildren<{
1011
title: string;
1112
width?: number | string;
1213
maxWidth?: number | string;
14+
padding?: number | string | ResponsiveStyleValue<number | string>;
1315
}>;
1416

1517
export const BaseChart = ({
@@ -18,13 +20,13 @@ export const BaseChart = ({
1820
title,
1921
width = "100%",
2022
maxWidth = "100%",
23+
padding,
2124
}: BaseChartProps) => {
2225
const theme = useTheme();
23-
2426
return (
2527
<BaseBox
2628
sx={{
27-
padding: theme.spacing(8),
29+
padding: padding ?? theme.spacing(8),
2830
display: "flex",
2931
flex: 1,
3032
width: width,

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

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
} from "recharts";
1212
import { XTick } from "@/components/monitors/ChartResponseTime";
1313
import { useTheme } from "@mui/material/styles";
14+
import useMediaQuery from "@mui/material/useMediaQuery";
1415

1516
export const HistogramDockerPercentage = ({
1617
data,
@@ -26,17 +27,25 @@ export const HistogramDockerPercentage = ({
2627
emptyText?: string;
2728
}) => {
2829
const theme = useTheme();
30+
const isSmall = useMediaQuery(theme.breakpoints.down("sm"));
2931
const hasData = Array.isArray(data) && data.length > 0;
3032

3133
return (
32-
<BaseChart title={title} icon={null}>
34+
<BaseChart
35+
title={title}
36+
icon={null}
37+
padding={{ xs: theme.spacing(4), md: theme.spacing(8) }}
38+
>
3339
{!hasData ? (
3440
<Stack height={"100%"} alignItems={"center"} justifyContent={"center"}>
3541
<Typography variant="h2">{emptyText || "No data"}</Typography>
3642
</Stack>
3743
) : (
38-
<ResponsiveContainer width="100%" height={155}>
39-
<AreaChart data={data}>
44+
<ResponsiveContainer width="100%" height={200}>
45+
<AreaChart
46+
data={data}
47+
margin={{ top: 8, right: 8, left: isSmall ? 0 : 8, bottom: 8 }}
48+
>
4049
<CartesianGrid
4150
stroke={theme.palette.divider}
4251
strokeWidth={1}
@@ -60,9 +69,15 @@ export const HistogramDockerPercentage = ({
6069
</defs>
6170
<XAxis
6271
dataKey={"_id"}
72+
axisLine={false}
73+
tickLine={false}
6374
tick={(props) => <XTick {...props} range={range} />}
6475
/>
65-
<YAxis />
76+
<YAxis
77+
width={isSmall ? 24 : 36}
78+
tick={{ fontSize: isSmall ? 10 : 11 }}
79+
tickMargin={4}
80+
/>
6681
<Area
6782
dataKey={dataKey}
6883
stroke={theme.palette.primary.main}

‎client/src/locales/en.json‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -547,6 +547,9 @@
547547
"runningCountChart": {
548548
"empty": "No data",
549549
"title": "# of running containers"
550+
},
551+
"tooltips": {
552+
"containers": "Containers: {{value}}"
550553
}
551554
},
552555
"fallback": {
@@ -585,7 +588,7 @@
585588
"optionCpuUsage": "CPU usage (%)",
586589
"optionDiskUsage": "Disk usage (%)",
587590
"optionMemoryUsage": "Memory usage (%)",
588-
"optionTemperature": "Temperature (°C)",
591+
"optionTemperature": "Temperature (\u00b0C)",
589592
"title": "Thresholds for alerts"
590593
}
591594
},
@@ -715,7 +718,7 @@
715718
},
716719
"form": {
717720
"discord": {
718-
"description": "Configure your Discord webhook URL. Create one in Discord: Settings & administration → Manage apps → Custom Integrations → Incoming Webhooks",
721+
"description": "Configure your Discord webhook URL. Create one in Discord: Settings & administration \u2192 Manage apps \u2192 Custom Integrations \u2192 Incoming Webhooks",
719722
"option": "Webhook URL",
720723
"placeholder": "https://discord.com/api/webhooks/YOUR/WEBHOOK/URL",
721724
"title": "Discord configuration"
@@ -733,7 +736,7 @@
733736
"title": "Channel name"
734737
},
735738
"slack": {
736-
"description": "Configure your Slack webhook URL. Create one in Slack: Settings & administration → Manage apps → Custom Integrations → Incoming Webhooks",
739+
"description": "Configure your Slack webhook URL. Create one in Slack: Settings & administration \u2192 Manage apps \u2192 Custom Integrations \u2192 Incoming Webhooks",
737740
"option": "Webhook URL",
738741
"placeholder": "https://hooks.slack.com/services/YOUR/WEBHOOK/URL",
739742
"title": "Slack configuration"
@@ -891,4 +894,4 @@
891894
}
892895
}
893896
}
894-
}
897+
}

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

Lines changed: 33 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -86,34 +86,39 @@ const DockerDetailsPage = () => {
8686
<CardDockerContainer key={c.container_id} container={c} />
8787
))}
8888
</Stack>
89-
<BarDockerCount
90-
data={checks}
91-
dataKey="healthyContainers"
92-
range={range}
93-
title={t("monitors.docker.details.healthyCountChart.title")}
94-
emptyText={t("monitors.docker.details.healthyCountChart.empty")}
95-
/>
96-
<BarDockerCount
97-
data={checks}
98-
dataKey="runningContainers"
99-
range={range}
100-
title={t("monitors.docker.details.runningCountChart.title")}
101-
emptyText={t("monitors.docker.details.runningCountChart.empty")}
102-
/>
103-
<HistogramDockerPercentage
104-
data={checks}
105-
dataKey="healthyPercent"
106-
range={range}
107-
title={t("monitors.docker.details.healthyChart.title")}
108-
emptyText={t("monitors.docker.details.healthyChart.empty")}
109-
/>
110-
<HistogramDockerPercentage
111-
data={checks}
112-
dataKey="runningPercent"
113-
range={range}
114-
title={t("monitors.docker.details.healthyChart.title")}
115-
emptyText={t("monitors.docker.details.healthyChart.empty")}
116-
/>
89+
<Stack gap={theme.spacing(6)} direction={{ xs: "column", lg: "row" }}>
90+
<HistogramDockerPercentage
91+
data={checks}
92+
dataKey="healthyPercent"
93+
range={range}
94+
title={t("monitors.docker.details.healthyChart.title")}
95+
emptyText={t("monitors.docker.details.healthyChart.empty")}
96+
/>
97+
<BarDockerCount
98+
data={checks}
99+
dataKey="healthyContainers"
100+
range={range}
101+
title={t("monitors.docker.details.healthyCountChart.title")}
102+
emptyText={t("monitors.docker.details.healthyCountChart.empty")}
103+
/>
104+
</Stack>
105+
106+
<Stack gap={theme.spacing(6)} direction={{ xs: "column", lg: "row" }}>
107+
<HistogramDockerPercentage
108+
data={checks}
109+
dataKey="runningPercent"
110+
range={range}
111+
title={t("monitors.docker.details.runningChart.title")}
112+
emptyText={t("monitors.docker.details.runningChart.empty")}
113+
/>
114+
<BarDockerCount
115+
data={checks}
116+
dataKey="runningContainers"
117+
range={range}
118+
title={t("monitors.docker.details.runningCountChart.title")}
119+
emptyText={t("monitors.docker.details.runningCountChart.empty")}
120+
/>
121+
</Stack>
117122
</BasePage>
118123
);
119124
};

0 commit comments

Comments
 (0)