Skip to content

Commit a6bb756

Browse files
Br0wnHammerBr0wnHammer
committed
Feat: Empty View Component on restructured code
1 parent d3fa71f commit a6bb756

File tree

2 files changed

+102
-56
lines changed

2 files changed

+102
-56
lines changed

‎src/Pages/Uptime/Details/Components/ChartBoxes/EmptyView.jsx

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
// Components
2+
import { Typography, Box } from "@mui/material";
3+
import PropTypes from "prop-types";
4+
5+
const EmptyView = ({ message = "No Data", size = "h2" }) => {
6+
return (
7+
<Box m="auto" marginY="25%">
8+
<Typography variant={size}>
9+
{message}
10+
</Typography>
11+
</Box>
12+
);
13+
};
14+
15+
EmptyView.propTypes = {
16+
message: PropTypes.string,
17+
size: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'body1', 'body2'])
18+
};
19+
20+
export default EmptyView;

‎src/Pages/Uptime/Details/Components/ChartBoxes/index.jsx

+82-56
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import UpBarChart from "../Charts/UpBarChart";
88
import DownBarChart from "../Charts/DownBarChart";
99
import ResponseGaugeChart from "../Charts/ResponseGaugeChart";
1010
import SkeletonLayout from "./skeleton";
11+
import EmptyView from "./EmptyView";
1112
// Utils
1213
import { formatDateWithTz } from "../../../../../Utils/timeUtils";
1314
import PropTypes from "prop-types";
@@ -36,6 +37,83 @@ const ChartBoxes = ({
3637
totalUpChecks + totalDownChecks > 0 ? totalUpChecks + totalDownChecks : 1;
3738
const groupedUptimePercentage = (totalUpChecks / denominator) * 100;
3839

40+
const renderUptime = () => {
41+
const upCheck = monitor?.groupedUpChecks?.reduce((count, checkGroup) => count + checkGroup.totalChecks, 0);
42+
if (!hoveredUptimeData && !upCheck) {
43+
return <EmptyView />;
44+
}
45+
return (
46+
<>
47+
<Box position="relative">
48+
<Typography>Total Checks</Typography>
49+
<Typography component="span">
50+
{hoveredUptimeData !== null
51+
? hoveredUptimeData.totalChecks
52+
: upCheck}
53+
</Typography>
54+
{hoveredUptimeData !== null && hoveredUptimeData.time !== null && (
55+
<Typography
56+
component="h5"
57+
position="absolute"
58+
top="100%"
59+
fontSize={11}
60+
color={theme.palette.primary.contrastTextTertiary}
61+
>
62+
{formatDateWithTz(hoveredUptimeData._id, dateFormat, uiTimezone)}
63+
</Typography>
64+
)}
65+
</Box>
66+
<Box>
67+
<Typography>
68+
{hoveredUptimeData !== null ? "Avg Response Time" : "Uptime Percentage"}
69+
</Typography>
70+
<Typography component="span">
71+
{hoveredUptimeData !== null
72+
? Math.floor(hoveredUptimeData?.avgResponseTime ?? 0)
73+
: Math.floor(groupedUptimePercentage)}
74+
<Typography component="span">
75+
{hoveredUptimeData !== null ? " ms" : " %"}
76+
</Typography>
77+
</Typography>
78+
</Box>
79+
</>
80+
);
81+
};
82+
83+
const renderIncidents = () => {
84+
const downChecks = monitor?.groupedDownChecks?.reduce((count, checkGroup) => count + checkGroup.totalChecks, 0);
85+
if (!downChecks && !hoveredIncidentsData) {
86+
return <EmptyView message="Great. No incidents, yet!" />;
87+
}
88+
return (
89+
<Box position="relative">
90+
<Typography component="span">
91+
{hoveredIncidentsData !== null
92+
? hoveredIncidentsData.totalChecks
93+
: downChecks}
94+
</Typography>
95+
{hoveredIncidentsData !== null && hoveredIncidentsData.time !== null && (
96+
<Typography
97+
component="h5"
98+
position="absolute"
99+
top="100%"
100+
fontSize={11}
101+
color={theme.palette.primary.contrastTextTertiary}
102+
>
103+
{formatDateWithTz(hoveredIncidentsData._id, dateFormat, uiTimezone)}
104+
</Typography>
105+
)}
106+
</Box>
107+
);
108+
}
109+
110+
const renderResponseTime = () => {
111+
if (!monitor?.avgResponseTime) {
112+
return <EmptyView />;
113+
}
114+
return <ResponseGaugeChart avgResponseTime={monitor.avgResponseTime} />;
115+
};
116+
39117
return (
40118
<Stack
41119
direction="row"
@@ -51,40 +129,7 @@ const ChartBoxes = ({
51129
justifyContent="space-between"
52130
direction="row"
53131
>
54-
<Box position="relative">
55-
<Typography>Total Checks</Typography>
56-
<Typography component="span">
57-
{hoveredUptimeData !== null
58-
? hoveredUptimeData.totalChecks
59-
: (monitor?.groupedUpChecks?.reduce((count, checkGroup) => {
60-
return count + checkGroup.totalChecks;
61-
}, 0) ?? 0)}
62-
</Typography>
63-
{hoveredUptimeData !== null && hoveredUptimeData.time !== null && (
64-
<Typography
65-
component="h5"
66-
position="absolute"
67-
top="100%"
68-
fontSize={11}
69-
color={theme.palette.primary.contrastTextTertiary}
70-
>
71-
{formatDateWithTz(hoveredUptimeData._id, dateFormat, uiTimezone)}
72-
</Typography>
73-
)}
74-
</Box>
75-
<Box>
76-
<Typography>
77-
{hoveredUptimeData !== null ? "Avg Response Time" : "Uptime Percentage"}
78-
</Typography>
79-
<Typography component="span">
80-
{hoveredUptimeData !== null
81-
? Math.floor(hoveredUptimeData?.avgResponseTime ?? 0)
82-
: Math.floor(groupedUptimePercentage)}
83-
<Typography component="span">
84-
{hoveredUptimeData !== null ? " ms" : " %"}
85-
</Typography>
86-
</Typography>
87-
</Box>
132+
{renderUptime()}
88133
</Stack>
89134
<UpBarChart
90135
monitor={monitor}
@@ -96,27 +141,8 @@ const ChartBoxes = ({
96141
icon={<IncidentsIcon />}
97142
header="Incidents"
98143
>
99-
<Stack width={"100%"}>
100-
<Box position="relative">
101-
<Typography component="span">
102-
{hoveredIncidentsData !== null
103-
? hoveredIncidentsData.totalChecks
104-
: (monitor?.groupedDownChecks?.reduce((count, checkGroup) => {
105-
return count + checkGroup.totalChecks;
106-
}, 0) ?? 0)}
107-
</Typography>
108-
{hoveredIncidentsData !== null && hoveredIncidentsData.time !== null && (
109-
<Typography
110-
component="h5"
111-
position="absolute"
112-
top="100%"
113-
fontSize={11}
114-
color={theme.palette.primary.contrastTextTertiary}
115-
>
116-
{formatDateWithTz(hoveredIncidentsData._id, dateFormat, uiTimezone)}
117-
</Typography>
118-
)}
119-
</Box>
144+
<Stack width="100%">
145+
{renderIncidents()}
120146
</Stack>
121147
<DownBarChart
122148
monitor={monitor}
@@ -128,7 +154,7 @@ const ChartBoxes = ({
128154
icon={<AverageResponseIcon />}
129155
header="Average Response Time"
130156
>
131-
<ResponseGaugeChart avgResponseTime={monitor?.avgResponseTime ?? 0} />
157+
{renderResponseTime()}
132158
</ChartBox>
133159
</Stack>
134160
);

0 commit comments

Comments
 (0)