-
-
Notifications
You must be signed in to change notification settings - Fork 537
fix(status-page): tooltip warnings; uptime% + toggles; stricter CORS #2867
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: develop
Are you sure you want to change the base?
fix(status-page): tooltip warnings; uptime% + toggles; stricter CORS #2867
Conversation
WalkthroughIntroduces 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
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
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Assessment against linked issues
Assessment against linked issues: Out-of-scope changes
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 unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this 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.
📒 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.
percentageColor={ | ||
statusPage.showUptimePercentage ? monitor.percentageColor : null | ||
} | ||
percentage={statusPage.showUptimePercentage ? monitor.percentage : null} | ||
showURL={showURL} |
There was a problem hiding this comment.
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.
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.
There was a problem hiding this 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": { |
There was a problem hiding this comment.
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}> |
There was a problem hiding this comment.
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.
client/src/Hooks/useMonitorUtils.js
Outdated
@@ -20,6 +20,10 @@ const useMonitorUtils = () => { | |||
: monitor?.uptimePercentage < 0.75 | |||
? theme.palette.success.main | |||
: theme.palette.success.main; | |||
} else { |
There was a problem hiding this comment.
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.
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! |
8e81ef8
to
27d613b
Compare
There was a problem hiding this comment.
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.
There was a problem hiding this 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.
📒 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!
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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] }, }}
There was a problem hiding this 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
Describe your changes
Bar
withforwardRef
, ensureTooltip
child supports refs, and computewidth
as a string viauseMediaQuery
to remove prop-type errors.statusPage.showUptimePercentage
andstatusPage.showCharts
, and adjust layout when charts are hidden; passstatusPage
prop through.uptimePercentage
inuseMonitorUtils
by showing “--” with secondary color.monitors.uptimePercentage
in Mongo aggregation; replace wildcard CORSallowedHeaders
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.
npm run format
in server and client directories, which automatically formats your code.Summary by CodeRabbit