Skip to content

Commit 9d27437

Browse files
ajhollidajhollid
committed
make status page responsive
1 parent 4e76000 commit 9d27437

File tree

8 files changed

+58
-23
lines changed

8 files changed

+58
-23
lines changed

‎src/Components/Subheader/index.jsx

+8-4
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import PropTypes from "prop-types";
22
import { useTheme } from "@emotion/react";
3-
import { Box, Stack, Typography } from "@mui/material";
4-
import { RowContainer } from "../StandardContainer";
3+
import { Stack, Typography } from "@mui/material";
54

65
/**
76
87
*
98
* @component
109
* @example
1110
*
11+
* @param {string} props.direction - Direction of the subheader
1212
* @param {string} props.headerText - Header text
1313
* @param {number} props.headerLevel - Font characteristic of the header
1414
* @param {string} props.subHeaderText - Subheader text
@@ -19,19 +19,22 @@ import { RowContainer } from "../StandardContainer";
1919
*/
2020

2121
const SubHeader = ({
22+
direction = "row",
2223
headerText,
2324
headerLevel = 1,
2425
subHeaderText,
2526
subHeaderLevel = 1,
2627
alignItems = "center",
2728
children,
29+
...props
2830
}) => {
2931
const theme = useTheme();
3032
return (
3133
<Stack
32-
direction="row"
34+
direction={direction}
3335
alignItems={alignItems}
3436
justifyContent="space-between"
37+
{...props}
3538
>
3639
<Stack direction={"column"}>
3740
<Typography
@@ -60,11 +63,12 @@ const SubHeader = ({
6063
};
6164

6265
SubHeader.propTypes = {
66+
direction: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
6367
headerText: PropTypes.string,
6468
headerLevel: PropTypes.number,
6569
subHeaderText: PropTypes.string,
6670
subHeaderLevel: PropTypes.number,
67-
alignItems: PropTypes.string,
71+
alignItems: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
6872
children: PropTypes.node,
6973
};
7074

‎src/Pages/DistributedUptime/Details/Components/DeviceTicker/index.jsx

+12-6
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
1+
// Components
12
import { Stack, Typography } from "@mui/material";
2-
import { useTheme } from "@emotion/react";
33
import PulseDot from "../../../../../Components/Animated/PulseDot";
44
import "flag-icons/css/flag-icons.min.css";
55
import { ColContainer } from "../../../../../Components/StandardContainer";
66

7-
const BASE_BOX_PADDING_VERTICAL = 16;
8-
const BASE_BOX_PADDING_HORIZONTAL = 8;
9-
7+
// Utils
8+
import { useMediaQuery } from "@mui/material";
9+
import { useTheme } from "@emotion/react";
10+
import { safelyParseFloat } from "../../../../../Utils/utils";
1011
const DeviceTicker = ({ data, width = "100%", connectionStatus }) => {
1112
const theme = useTheme();
13+
const isSmallScreen = useMediaQuery(theme.breakpoints.down("sm"));
14+
1215
const statusColor = {
1316
up: theme.palette.success.main,
1417
down: theme.palette.error.main,
@@ -43,7 +46,7 @@ const DeviceTicker = ({ data, width = "100%", connectionStatus }) => {
4346
<Typography>RESPONSE</Typography>
4447
</th>
4548
<th style={{ textAlign: "right" }}>
46-
<Typography>UPT BURNED</Typography>
49+
<Typography>{isSmallScreen ? "UPT" : "UPT BURNED"}</Typography>
4750
</th>
4851
</tr>
4952
</thead>
@@ -68,7 +71,10 @@ const DeviceTicker = ({ data, width = "100%", connectionStatus }) => {
6871
</td>
6972
<td style={{ textAlign: "right" }}>
7073
<Typography color={theme.palette.warning.main}>
71-
+{dataPoint.uptBurnt}
74+
+
75+
{isSmallScreen
76+
? safelyParseFloat(dataPoint.uptBurnt).toFixed(4)
77+
: dataPoint.uptBurnt}
7278
</Typography>
7379
</td>
7480
</tr>

‎src/Pages/DistributedUptime/Details/Components/DistributedUptimeMap/index.jsx

+9-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,12 @@ import maplibregl from "maplibre-gl";
66
import { useSelector } from "react-redux";
77
import buildStyle from "./buildStyle";
88

9-
const DistributedUptimeMap = ({ width = "100%", checks }) => {
9+
const DistributedUptimeMap = ({
10+
width = "100%",
11+
checks,
12+
height,
13+
minHeight = "350px",
14+
}) => {
1015
const mapContainer = useRef(null);
1116
const map = useRef(null);
1217
const theme = useTheme();
@@ -92,6 +97,8 @@ const DistributedUptimeMap = ({ width = "100%", checks }) => {
9297
ref={mapContainer}
9398
style={{
9499
width: width,
100+
height: height,
101+
minHeight: minHeight,
95102
borderRadius: theme.spacing(4),
96103
borderColor: theme.palette.primary.lowContrast,
97104
borderStyle: "solid",
@@ -105,6 +112,7 @@ DistributedUptimeMap.propTypes = {
105112
checks: PropTypes.array,
106113
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
107114
height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
115+
minHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
108116
};
109117

110118
export default DistributedUptimeMap;

‎src/Pages/DistributedUptime/Details/Components/StatBoxes/index.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
import { Stack } from "@mui/material";
33
import InfoBox from "../../../../../Components/InfoBox";
44
import LastUpdate from "../LastUpdate";
5-
import UptLogo from "../../../../../assets/icons/upt_logo.png";
65

76
// Utils
87
import { useTheme } from "@mui/material/styles";
@@ -15,6 +14,7 @@ const StatBoxes = ({ monitor, lastUpdateTrigger }) => {
1514
<Stack
1615
direction="row"
1716
justifyContent="space-between"
17+
flexWrap="wrap"
1818
gap={theme.spacing(8)}
1919
>
2020
<InfoBox

‎src/Pages/DistributedUptime/Details/Components/StatusHeader/index.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const StatusHeader = ({ monitor, connectionStatus, elementToCapture }) => {
3232
return (
3333
<ColContainer backgroundColor={bgColor}>
3434
<Stack
35-
direction="row"
35+
direction={{ s: "column", md: "row" }}
3636
justifyContent="space-between"
3737
gap={theme.spacing(8)}
3838
>

‎src/Pages/DistributedUptimeStatus/Status/Components/TimeframeHeader/index.jsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import { Stack, Button, ButtonGroup } from "@mui/material";
2-
import { RowContainer } from "../../../../../Components/StandardContainer";
32
import { useTheme } from "@emotion/react";
43

5-
const TimeFrameHeader = ({ timeFrame, setTimeFrame }) => {
4+
const TimeFrameHeader = ({ timeFrame, setTimeFrame, sx, ...props }) => {
65
const theme = useTheme();
76
return (
87
<Stack
98
direction="row"
109
justifyContent="flex-end"
10+
sx={{ ...sx }}
11+
{...props}
1112
>
1213
<ButtonGroup>
1314
<Button

‎src/Pages/DistributedUptimeStatus/Status/index.jsx

+17-8
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,13 @@ import { useDUStatusPageFetchByUrl } from "./Hooks/useDUStatusPageFetchByUrl";
2828
import { useStatusPageDelete } from "../../StatusPage/Status/Hooks/useStatusPageDelete";
2929
import TimeFrameHeader from "./Components/TimeframeHeader";
3030
import SubHeader from "../../../Components/Subheader";
31-
31+
import { safelyParseFloat } from "../../../Utils/utils";
3232
import { useNavigate, useLocation } from "react-router-dom";
3333
import { useTranslation } from "react-i18next";
3434

35+
// Responsive
36+
import { useMediaQuery } from "@mui/material";
37+
3538
const DistributedUptimeStatus = () => {
3639
const { url } = useParams();
3740
const location = useLocation();
@@ -45,6 +48,7 @@ const DistributedUptimeStatus = () => {
4548
const [timeFrame, setTimeFrame] = useState(30);
4649
// Utils
4750
const theme = useTheme();
51+
const isSmallScreen = useMediaQuery(theme.breakpoints.down("sm"));
4852
const navigate = useNavigate();
4953

5054
const [
@@ -170,8 +174,11 @@ const DistributedUptimeStatus = () => {
170174
/>
171175

172176
<SubHeader
177+
direction={{ s: "column", md: "row" }}
173178
headerText={t("distributedStatusHeaderText")}
174179
subHeaderText={t("distributedStatusSubHeaderText")}
180+
gap={isSmallScreen ? theme.spacing(10) : 0}
181+
alignItems={{ s: "flex-start", md: "flex-end" }}
175182
>
176183
<RowContainer>
177184
<Stack>
@@ -195,16 +202,15 @@ const DistributedUptimeStatus = () => {
195202
setDateRange={setDateRange}
196203
/>
197204
<Stack
198-
direction="row"
199205
gap={theme.spacing(8)}
206+
direction={{ s: "column", md: "row" }}
200207
>
201208
<DistributedUptimeMap
202209
checks={monitor?.groupedMapChecks ?? []}
203-
height={"100%"}
204-
width={"50%"}
210+
width={isSmallScreen ? "100%" : "50%"}
205211
/>
206212
<Stack
207-
width={"50%"}
213+
width={{ s: "100%", md: "50%" }}
208214
gap={theme.spacing(8)}
209215
>
210216
<Stack
@@ -219,8 +225,8 @@ const DistributedUptimeStatus = () => {
219225
sx={{ width: "50%" }}
220226
/>
221227
<InfoBox
222-
heading="UPT Burned"
223-
subHeading={monitor?.totalUptBurnt ?? 0}
228+
heading={isSmallScreen ? "UPT" : "UPT Burned"}
229+
subHeading={safelyParseFloat(monitor?.totalUptBurnt).toFixed(4)}
224230
img={UptLogo}
225231
alt="Upt Logo"
226232
sx={{ width: "50%" }}
@@ -240,13 +246,16 @@ const DistributedUptimeStatus = () => {
240246
/>
241247

242248
<SubHeader
249+
direction={{ s: "column", md: "row" }}
243250
headerText={t("distributedStatusServerMonitors")}
244251
subHeaderText={t("distributedStatusServerMonitorsDescription")}
245-
alignItems="end"
252+
gap={isSmallScreen ? theme.spacing(10) : 0}
253+
alignItems={{ s: "flex-start", md: "flex-end" }}
246254
>
247255
<TimeFrameHeader
248256
timeFrame={timeFrame}
249257
setTimeFrame={setTimeFrame}
258+
alignSelf="flex-start"
250259
/>
251260
</SubHeader>
252261

‎src/Utils/utils.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export const safelyParseFloat = (value) => {
2+
const parsedValue = parseFloat(value);
3+
if (isNaN(parsedValue)) {
4+
return 0;
5+
}
6+
return parsedValue;
7+
};

0 commit comments

Comments
 (0)