Skip to content

Conversation

antonstrover
Copy link

@antonstrover antonstrover commented Aug 28, 2025

Describe your changes

  • Resolve React warnings on Status page: wrap Bar with forwardRef, ensure Tooltip child supports refs, and compute width as a string via useMediaQuery to remove prop-type errors.
  • Improve chart UX: enforce a small minimum bar height so tiny values remain visible.
  • Add status page controls: gate uptime percentage and charts via statusPage.showUptimePercentage and statusPage.showCharts, and adjust layout when charts are hidden; pass statusPage prop through.
  • Add resilience: handle missing uptimePercentage in useMonitorUtils by showing “--” with secondary color.
  • Backend updates: compute monitors.uptimePercentage in Mongo aggregation; replace wildcard CORS allowedHeaders with an explicit list.

Write your issue number after "Fixes "

Fixes #2864

Please ensure all items are checked off before requesting a review. "Checked off" means you need to add an "x" character between brackets so they turn into checkmarks.

  • (Do not skip this or your PR will be closed) I deployed the application locally.
  • (Do not skip this or your PR will be closed) I have performed a self-review and testing of my code.
  • I have included the issue # in the PR.
  • I have added i18n support to visible strings (or did not introduce new visible strings).
  • I have not included any files that are not related to my pull request, including package-lock and package-json if dependencies have not changed.
  • I didn't use any hardcoded values (otherwise it will not scale, and will make it difficult to maintain consistency across the application).
  • I made sure font sizes, color choices etc are all referenced from the theme.
  • My PR is granular and targeted to one specific feature.
  • I ran npm run format in server and client directories, which automatically formats your code.
  • I took a screenshot or a video and attached to this PR if there is a UI change.

Summary by CodeRabbit

  • New Features
    • Status page now supports showing or hiding monitor charts based on page settings; when charts are hidden, the list layout expands for improved readability.
    • Uptime percentage for each monitor is now surfaced, providing clearer at-a-glance reliability insights on the status page.
    • Chart and label areas dynamically adjust to maintain a balanced layout whether charts are shown or hidden.

Copy link

coderabbitai bot commented Aug 28, 2025

Walkthrough

Introduces a statusPage prop to control conditional rendering of StatusPageBarChart, wires it through the Status page, and augments the server aggregation to include monitors’ uptimePercentage. Refactors the Bar component in StatusPageBarChart to use forwardRef without changing its behavior or public API.

Changes

Cohort / File(s) Summary
Status page UI: conditional charts
client/src/Pages/StatusPage/Status/Components/MonitorsList/index.jsx, client/src/Pages/StatusPage/Status/index.jsx
Adds statusPage prop plumbing; MonitorsList conditionally renders StatusPageBarChart when statusPage.showCharts !== false; adjusts layout flex values accordingly.
Charts component refactor
client/src/Components/Charts/StatusPageBarChart/index.jsx
Refactors Bar to use React.forwardRef; forwards ref to underlying Box; spreads additional props; no behavioral change intended.
Server aggregation: uptime for monitors
server/src/db/mongo/modules/statusPageModule.js
Extends getStatusPageByUrl pipeline with $lookup to monitorstats; adds monitors.uptimePercentage via $arrayElemAt of stats.uptimePercentage.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor U as User
  participant C as Client (Status Page)
  participant S as Server (statusPageModule)
  participant DB as MongoDB

  U->>C: Load Status Page
  C->>S: GET /statusPage/:url
  S->>DB: Aggregate statusPage + monitors
  DB-->>S: monitors + monitorstats
  S-->>C: { monitors[...uptimePercentage], statusPage }

  alt showCharts !== false
    C->>C: Render MonitorsList + StatusPageBarChart
  else showCharts === false
    C->>C: Render MonitorsList without chart
  end
Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Assessment against linked issues

Objective Addressed Explanation
Charts visibility reflects feature checkbox on status page [#2864]
Other feature checkboxes affect status page content as intended [#2864] Only charts toggle is evident; no changes for other features found in diff.

Assessment against linked issues: Out-of-scope changes

Code Change Explanation
Refactor to use React.forwardRef in Bar (client/src/Components/Charts/StatusPageBarChart/index.jsx) Does not relate to feature checkbox functionality; appears unrelated to enabling/disabling status page features.

P.S. Canadians say “sorry” when they bump into you; Americans say “lawsuit.”

Tip

🔌 Remote MCP (Model Context Protocol) integration is now available!

Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats.

✨ Finishing Touches
  • 📝 Generate Docstrings
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbit in a new review comment at the desired location with your query.
  • PR comments: Tag @coderabbit in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbit gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbit read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbit help to get the list of available commands.

Other keywords and placeholders

  • Add @coderabbit ignore or @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbit summary or @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbit or @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Status, Documentation and Community

  • Visit our Status Page to check the current availability of CodeRabbit.
  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (2)
client/src/Components/Charts/StatusPageBarChart/index.jsx (1)

63-66: Don’t mutate props; copy the single-check array.

Mutating checks[0] can cause subtle React bugs.

-	if (checks.length === 1) {
-		checks[0] = { ...checks[0], responseTime: 50 };
-	}
+	if (checks.length === 1) {
+		checks = [{ ...checks[0], responseTime: 50 }];
+	}
client/src/Pages/StatusPage/Status/Components/MonitorsList/index.jsx (1)

20-24: Derive percentage fields here to guarantee presence.

Monitors may not come pre-augmented. Use getMonitorWithPercentage to avoid nulls and unlock the new fallback logic.

-	const { determineState } = useMonitorUtils();
+	const { determineState, getMonitorWithPercentage } = useMonitorUtils();-			{monitors?.map((monitor) => {
+			{monitors?.map((monitor) => {
+				const withPct = getMonitorWithPercentage(monitor, theme);
 				const status = determineState(monitor);
 				return (
…
 							<Host
 								key={monitor._id}
 								url={monitor.url}
 								title={monitor.name}
 								percentageColor={
-								statusPage.showUptimePercentage ? monitor.percentageColor : null
+								statusPage.showUptimePercentage !== false ? withPct.percentageColor : null
 								}
-							percentage={statusPage.showUptimePercentage ? monitor.percentage : null}
+							percentage={statusPage.showUptimePercentage !== false ? withPct.percentage : null}
 								showURL={showURL}
 							/>

Also applies to: 27-44

🧹 Nitpick comments (7)
client/src/Hooks/useMonitorUtils.js (3)

41-41: Use strict equality for status check.

Avoid loose coercion.

-		return monitor?.status == true ? "up" : "down";
+		return monitor?.status === true ? "up" : "down";

5-7: Remove theme param; use hook theme to simplify and prevent misuse.

getMonitorWithPercentage already lives in a hook—close over theme and drop the second param.

-const getMonitorWithPercentage = useCallback((monitor, theme) => {
+const theme = useTheme();
+const getMonitorWithPercentage = useCallback((monitor) => {
   let uptimePercentage = "";
   let percentageColor = "";
   …
   return {
     ...monitor,
     percentage: uptimePercentage,
     percentageColor,
-    monitor: monitor,
   };
-}, []);
+}, [theme]);

Also removes the redundant “monitor” field.

Also applies to: 29-35, 44-59


15-23: Color thresholds look duplicated.

Both 0.5–0.75 and 0.75–1 map to success.main. If intentional, ignore. Otherwise consider a distinct color for 0.5–0.75.

client/src/Components/Charts/StatusPageBarChart/index.jsx (3)

147-148: Stabilize keys to prevent collisions.

use id when present; fall back to index.

-						key={`check-${check?._id}`}
+						key={`check-${check?._id ?? index}`}

101-105: Time format mixes 24h and AM/PM.

Use “hh:mm A” for 12h or “HH:mm” for 24h.

-										"ddd, MMMM D, YYYY, HH:mm A",
+										"ddd, MMMM D, YYYY, hh:mm A",

1-2: Unify theme hook imports across app.

Elsewhere you import useTheme from @mui/material/styles. Consider aligning here for consistency.

-import { useTheme } from "@emotion/react";
+import { useTheme } from "@mui/material/styles";
client/src/Pages/StatusPage/Status/Components/MonitorsList/index.jsx (1)

31-37: Minor: duplicate keys.

You use key={monitor._id} on both Stack and Host siblings. Keep it on the top-level mapped element only.

-					<Stack
-						key={monitor._id}
+					<Stack
+						key={monitor._id}
 						width="100%"
 						gap={theme.spacing(2)}
 					>
-						<Host
-							key={monitor._id}
+						<Host
 							url={monitor.url}
📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

  • MCP integration is disabled by default for public repositories
  • Jira integration is disabled by default for public repositories
  • Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 0ad759a and 8e81ef8.

📒 Files selected for processing (5)
  • client/src/Components/Charts/StatusPageBarChart/index.jsx (4 hunks)
  • client/src/Hooks/useMonitorUtils.js (1 hunks)
  • client/src/Pages/StatusPage/Status/Components/MonitorsList/index.jsx (3 hunks)
  • client/src/Pages/StatusPage/Status/index.jsx (1 hunks)
  • server/src/db/mongo/modules/statusPageModule.js (1 hunks)
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-07-24T17:52:55.506Z
Learnt from: Jesulayomy
PR: bluewave-labs/Checkmate#2664
File: client/src/Pages/Uptime/Create/index.jsx:92-96
Timestamp: 2025-07-24T17:52:55.506Z
Learning: In the Uptime monitor components, the `formatAndSet` function was deprecated due to rendering issues caused by state mutations. The current approach stores intervals internally in milliseconds (API format) but converts for display using `const displayInterval = monitor?.interval / MS_PER_MINUTE || 1;` and converts user input back to milliseconds using `value = value * MS_PER_MINUTE` in the onChange handler.

Applied to files:

  • client/src/Hooks/useMonitorUtils.js
  • client/src/Pages/StatusPage/Status/Components/MonitorsList/index.jsx
🧬 Code graph analysis (2)
client/src/Pages/StatusPage/Status/index.jsx (2)
client/src/Pages/StatusPage/Status/Components/MonitorsList/index.jsx (1)
  • MonitorsList (14-68)
client/src/Pages/StatusPage/Create/index.jsx (2)
  • monitors (56-56)
  • statusPage (61-62)
client/src/Pages/StatusPage/Status/Components/MonitorsList/index.jsx (2)
client/src/Pages/StatusPage/Status/index.jsx (2)
  • statusPage (29-29)
  • theme (24-24)
client/src/Components/Charts/StatusPageBarChart/index.jsx (3)
  • theme (22-22)
  • theme (52-52)
  • StatusPageBarChart (51-211)
🪛 Biome (2.1.2)
server/src/db/mongo/modules/statusPageModule.js

[error] 187-187: Do not add then to an object.

(lint/suspicious/noThenProperty)

🔇 Additional comments (7)
server/src/db/mongo/modules/statusPageModule.js (1)

150-164: Confirm intent: uptimePercentage is computed over only the last 25 checks.

This yields a “recent uptime” metric, not all-time or time-windowed uptime. If that’s desired—great. If not, adjust the $limit or compute over a defined window.

If you want a time-window (e.g., 24h), swap the $limit with a $match on createdAt >= now - 24h, then (optionally) $limit for performance.

Also applies to: 184-202

client/src/Hooks/useMonitorUtils.js (1)

23-27: Good fallback for missing uptime.

Solid UX default (“--” + secondary color) when backend doesn’t provide uptime.

client/src/Components/Charts/StatusPageBarChart/index.jsx (2)

20-41: Forwarding ref fixes Tooltip warnings.

This resolves React/MUI ref warnings on Tooltip children.


194-194: Minimum bar height is a nice UX touch.

Keeps tiny values visible without distorting overall perception.

client/src/Pages/StatusPage/Status/index.jsx (1)

157-160: Propagating statusPage to MonitorsList is correct.

This wires the toggles end-to-end from fetch → UI.

client/src/Pages/StatusPage/Status/Components/MonitorsList/index.jsx (2)

50-56: Chart toggle logic LGTM.

“!== false” gives a sensible default. If Americans can agree on ranch vs. blue cheese, we can agree this default is friendly; Canadians would politely concur.


71-73: PropTypes update is correct.

statusPage is optional; matches new usage.

Comment on lines 39 to 41
percentageColor={
statusPage.showUptimePercentage ? monitor.percentageColor : null
}
percentage={statusPage.showUptimePercentage ? monitor.percentage : null}
showURL={showURL}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Default to showing uptime unless explicitly disabled (align with showCharts semantics).

Currently uptime hides when showUptimePercentage is undefined. Mirror the “!== false” pattern.

-							percentageColor={
-								statusPage.showUptimePercentage ? monitor.percentageColor : null
-							}
-							percentage={statusPage.showUptimePercentage ? monitor.percentage : null}
+							percentageColor={
+								statusPage.showUptimePercentage !== false ? monitor.percentageColor : null
+							}
+							percentage={statusPage.showUptimePercentage !== false ? monitor.percentage : null}
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
percentageColor={
statusPage.showUptimePercentage ? monitor.percentageColor : null
}
percentage={statusPage.showUptimePercentage ? monitor.percentage : null}
showURL={showURL}
percentageColor={
statusPage.showUptimePercentage !== false
? monitor.percentageColor
: null
}
percentage={
statusPage.showUptimePercentage !== false
? monitor.percentage
: null
}
showURL={showURL}
🤖 Prompt for AI Agents
In client/src/Pages/StatusPage/Status/Components/MonitorsList/index.jsx around
lines 39 to 43, the uptime props currently only show when
statusPage.showUptimePercentage is truthy, causing uptime to hide when the flag
is undefined; change the checks to use "!== false" so uptime is shown by default
(i.e., pass monitor.percentageColor and monitor.percentage when
statusPage.showUptimePercentage !== false, otherwise null) and leave showURL
as-is.

Copy link

@llamapreview llamapreview bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Auto Pull Request Review from LlamaPReview

🎯 TL;DR & Recommendation

Recommendation: Request Changes

This PR enhances the status page with new toggles and fixes warnings but introduces a critical data inconsistency in uptime calculations that could mislead users.

🌟 Strengths

  • Successfully resolves React prop-type and ref warnings, improving code quality.
  • Adds configurable visibility for uptime percentages and charts, enhancing user control.

🚨 Critical Issues (P1)

  • server/src/db/mongo/modules/statusPageModule.js: Introduces a data inconsistency that could confuse users with divergent uptime values between different pages.

💡 Suggestions (P2)

  • client/src/Hooks/useMonitorUtils.js: Changes return type to string, risking breakage in other components expecting numeric percentages.
  • client/src/Pages/StatusPage/Status/Components/MonitorsList/index.jsx: Uses hardcoded flex values, potentially causing layout overflow or misalignment on different screens.
  • client/src/Components/Charts/StatusPageBarChart/index.jsx: Enforces minimum bar height, which distorts proportional accuracy of response times.
  • server/src/db/mongo/modules/statusPageModule.js: CORS changes not visible; if implemented, incomplete headers could break client requests.
⚠️ **Unanchored Suggestions (Manual Review Recommended)**

The following suggestions could not be precisely anchored to a specific line in the diff. This can happen if the code is outside the changed lines, has been significantly refactored, or if the suggestion is a general observation. Please review them carefully in the context of the full file.


📁 File: server/src/db/mongo/modules/statusPageModule.js

Speculative: The PR description claims CORS wildcard headers were replaced with an explicit list, but the provided diff does not show this change. If implemented, explicit headers reduce attack surface but risk breaking clients if the list is incomplete. Without code visibility, we cannot assess the completeness of the allowed headers.

Suggestion:

Ensure allowed headers include all required headers (e.g., `Content-Type`, `Authorization`, custom headers). Validate against frontend requests.

Related Code:

[Snippet not available]


💡 LlamaPReview Community
Have feedback on this AI Code review tool? Join our GitHub Discussions to share your thoughts and help shape the future of LlamaPReview.

@@ -181,6 +181,25 @@ class StatusPageModule {
},
},
},
"monitors.uptimePercentage": {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1 | Confidence: High

The PR introduces a new server-side computation for monitors.uptimePercentage in the status page aggregation pipeline. However, the existing architecture already maintains an uptimePercentage field in the MonitorStats model (evidenced by related_context), which is updated by statusService.js using the formula stats.totalUpChecks / stats.totalChecks. This creates two independent calculations for the same metric. The aggregation uses the current monitor's checks array, which may be limited to recent checks (e.g., last 24 hours), while MonitorStats aggregates all historical checks. This inconsistency could cause divergent uptime values between the status page and other system components (e.g., monitor details views), confusing users and undermining data reliability.

Code Suggestion:

Consider using the precomputed `MonitorStats.uptimePercentage` instead of recalculating it in the aggregation. Alternatively, ensure the aggregation uses the same data scope as `MonitorStats` (all checks, not a subset).

<StatusPageBarChart checks={monitor?.checks?.slice().reverse()} />
</Box>
)}
<Box flex={statusPage.showCharts !== false ? 1 : 10}>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 | Confidence: High

The conditional flex values (1 vs 10) introduce layout fragility. The hardcoded values assume a specific ratio between chart and label space, which may not hold across different screen sizes or content lengths. This could cause overflow or alignment issues when charts are hidden, especially if status labels vary in length. The related_context does not show similar layout patterns elsewhere, increasing maintenance overhead.

Code Suggestion:

Use responsive flex values (e.g., `{ xs: 1, md: 10 }`) or CSS Grid for more robust layout control.

@@ -20,6 +20,10 @@ const useMonitorUtils = () => {
: monitor?.uptimePercentage < 0.75
? theme.palette.success.main
: theme.palette.success.main;
} else {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 | Confidence: Medium

The fallback for missing uptimePercentage changes the return type of getMonitorWithPercentage() from a number to a string ("--") in some cases. The related_context shows this hook is widely used (e.g., monitorHooks.js, useStatusPageFetch.jsx), and consumers may expect a numeric percentage for formatting or calculations. While the immediate usage in MonitorsList (updated in this PR) handles strings, other consumers might break if they assume numeric input. This type inconsistency introduces subtle technical debt.

Code Suggestion:

Consider maintaining numeric types consistently (e.g., return `0` or `null` for missing data) and let UI components handle presentation fallbacks.

@bluewave-labs bluewave-labs deleted a comment from llamapreview bot Aug 28, 2025
@ajhollid
Copy link
Collaborator

Hi @antonstrover,

Can you please separate this pull request into individual features/fixes so we can address them one at a time?

I realize the changes aren't huge, but it is far easier for us to review and approve code if each PR is focused on one feature or fix.

Thank you!

@antonstrover antonstrover force-pushed the fix/uptime%-charts-toggles branch from 8e81ef8 to 27d613b Compare August 29, 2025 09:49
Copy link
Author

@antonstrover antonstrover Aug 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Imports

Added forwardRef from react.

Kept useTheme, MUI imports, and utilities.

Component: Bar

Before:

const Bar = ({ width, height, backgroundColor, borderRadius, children, ...otherProps }) => { … }

After is wrapped with forwardRef:

const Bar = forwardRef((props, ref) => …) so MUI Tooltip can attach a ref to the rendered element.

Forwarded ref to <Box ref={ref} … />

Continued to compute sx={{ borderRadius: borderRadius || theme.spacing(1.5) }} using theme.spacing(1.5) gives you a consistent fallback radius.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
client/src/Pages/StatusPage/Status/Components/MonitorsList/index.jsx (1)

39-42: Wire the uptime toggle (showUptimePercentage) — currently always shows.

Respect statusPage.showUptimePercentage (default show unless explicitly false).

Apply:

-							percentageColor={monitor.percentageColor}
-							percentage={monitor.percentage}
+							percentageColor={
+								statusPage.showUptimePercentage !== false ? monitor.percentageColor : null
+							}
+							percentage={
+								statusPage.showUptimePercentage !== false ? monitor.percentage : null
+							}
♻️ Duplicate comments (1)
server/src/db/mongo/modules/statusPageModule.js (1)

165-172: Good fix: reuse precomputed uptime; avoids divergence with other views.

Switching from recomputing over checks to using MonitorStats resolves the duplicate-calculation concern raised earlier. ✅

Also applies to: 192-195

🧹 Nitpick comments (5)
server/src/db/mongo/modules/statusPageModule.js (2)

165-172: Constrain $lookup payload and rely on index; switch to pipeline form.

Use pipeline lookup to project only uptimePercentage and avoid pulling full docs. Also ensure an index on monitorstats.monitorId for this join.

Apply:

-				{
-					$lookup: {
-						from: "monitorstats",
-						localField: "monitors._id",
-						foreignField: "monitorId",
-						as: "monitors.stats",
-					},
-				},
+				{
+					$lookup: {
+						from: "monitorstats",
+						let: { monitorId: "$monitors._id" },
+						pipeline: [
+							{ $match: { $expr: { $eq: ["$monitorId", "$$monitorId"] } } },
+							{ $project: { _id: 0, uptimePercentage: 1 } }
+						],
+						as: "monitors.stats",
+					},
+				},

192-195: Guard missing stats and align with frontend “--” fallback.

Default to null when stats are absent so the UI can render “--” cleanly; optionally round for consistency.

Apply:

-						"monitors.uptimePercentage": {
-							$arrayElemAt: ["$monitors.stats.uptimePercentage", 0],
-						},
+						"monitors.uptimePercentage": {
+							$ifNull: [
+								{ $arrayElemAt: ["$monitors.stats.uptimePercentage", 0] },
+								null
+							]
+						},

Please confirm MonitorStats.uptimePercentage is in the same unit expected by the UI (ratio vs percent). If it’s a ratio (0–1), either multiply by 100 here or in the client before display.

client/src/Pages/StatusPage/Status/Components/MonitorsList/index.jsx (3)

48-54: DRY the showCharts check and make layout responsive to avoid fragile ratios.

Extract a showCharts const and use responsive flex values. Fewer magic numbers than American coffee sizes.

Apply:

-							{statusPage.showCharts !== false && (
-								<Box flex={9}>
+							{(statusPage.showCharts !== false) && (
+								<Box flex={{ xs: 6, md: 9 }}>
 									<StatusPageBarChart checks={monitor?.checks?.slice().reverse()} />
 								</Box>
 							)}
-							<Box flex={statusPage.showCharts !== false ? 1 : 10}>
+							<Box flex={(statusPage.showCharts !== false) ? { xs: 6, md: 3 } : { xs: 12 }}>

Or:

+	const showCharts = statusPage?.showCharts !== false;
...
-							{statusPage.showCharts !== false && (
+							{showCharts && (
-							<Box flex={statusPage.showCharts !== false ? 1 : 10}>
+							<Box flex={showCharts ? { xs: 6, md: 3 } : { xs: 12 }}>

14-19: Remove unused props (isLoading, shouldRender) or implement them.

They’re not referenced and add noise.

Apply:

-const MonitorsList = ({
-	isLoading = false,
-	shouldRender = true,
-	monitors = [],
-	statusPage = {},
-}) => {
+const MonitorsList = ({ monitors = [], statusPage = {} }) => {

36-37: Drop redundant key on Host.

Key on the wrapping Stack is sufficient; duplicate keys don’t help.

Apply:

-						<Host
-							key={monitor._id}
+						<Host
 							url={monitor.url}
📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

  • MCP integration is disabled by default for public repositories
  • Jira integration is disabled by default for public repositories
  • Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 8e81ef8 and 27d613b.

📒 Files selected for processing (4)
  • client/src/Components/Charts/StatusPageBarChart/index.jsx (2 hunks)
  • client/src/Pages/StatusPage/Status/Components/MonitorsList/index.jsx (3 hunks)
  • client/src/Pages/StatusPage/Status/index.jsx (1 hunks)
  • server/src/db/mongo/modules/statusPageModule.js (2 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
  • client/src/Components/Charts/StatusPageBarChart/index.jsx
  • client/src/Pages/StatusPage/Status/index.jsx
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-07-24T17:52:55.506Z
Learnt from: Jesulayomy
PR: bluewave-labs/Checkmate#2664
File: client/src/Pages/Uptime/Create/index.jsx:92-96
Timestamp: 2025-07-24T17:52:55.506Z
Learning: In the Uptime monitor components, the `formatAndSet` function was deprecated due to rendering issues caused by state mutations. The current approach stores intervals internally in milliseconds (API format) but converts for display using `const displayInterval = monitor?.interval / MS_PER_MINUTE || 1;` and converts user input back to milliseconds using `value = value * MS_PER_MINUTE` in the onChange handler.

Applied to files:

  • client/src/Pages/StatusPage/Status/Components/MonitorsList/index.jsx
🧬 Code graph analysis (1)
client/src/Pages/StatusPage/Status/Components/MonitorsList/index.jsx (2)
client/src/Pages/StatusPage/Status/index.jsx (1)
  • statusPage (29-29)
client/src/Components/Charts/StatusPageBarChart/index.jsx (1)
  • StatusPageBarChart (51-213)
🔇 Additional comments (1)
client/src/Pages/StatusPage/Status/Components/MonitorsList/index.jsx (1)

39-41: No action needed: monitors are normalized in useStatusPageFetch via getMonitorWithPercentage, mapping uptimePercentage to percentage & percentageColor so Host receives the correct values. Let’s call it 100% accurate—whether you’re from the Great White North or the Land of the Free!

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Signature & props

Before: const MonitorsList = ({ isLoading = false, shouldRender = true, monitors = [] }) => { … }

After: const MonitorsList = ({ isLoading = false, shouldRender = true, monitors = [], statusPage = {} }) => { … }
Added statusPage input so the list can respect page-level toggles.

Rendering changes

Previously always rendered the chart area; you had:

<Box flex={9}>
  <StatusPageBarChart checks={(monitor?.checks).slice().reverse()} />
</Box>

Now guard it:

{statusPage.showCharts !== false && (
  <Box flex={9}>
    <StatusPageBarChart checks={monitor?.checks?.slice()?.reverse()} />
  </Box>
)}

Meaning: charts render by default, but a showCharts: false flag on the status page hides them.

PropTypes

Added statusPage: PropTypes.object alongside the existing monitors: PropTypes.array.isRequired.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added a $lookup to join monitorstats:

{ $lookup: { from: "monitorstats", localField: "monitors._id", foreignField: "monitorId", as: "monitors.stats", } }
Use precomputed uptime rather than recalculating:
{ $addFields: { "monitors.uptimePercentage": { $arrayElemAt: ["$monitors.stats.uptimePercentage", 0] }, }}

Copy link
Author

@antonstrover antonstrover left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed the extra stuff and now just fixes the individual issues raised in PR

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Features tick boxes on status page config dont work
2 participants