Add Response Time Chart option to Status Page configuration and display Closes #2924

[bansalhimanshu0296]

Describe your changes

###Summary: This PR introduces a new feature that allows users to toggle and view a Response Time Chart for monitors on the public status page. It adds both frontend and backend support to manage the visibility of this chart. Key Changes: 🖥️ Frontend Updates

• Added ResponseTimeChart component integration
  • Imported and rendered the new chart in MonitorsList under each monitor (visible if showResponseTimeChart is enabled).
  • Connected to useFetchUptimeMonitorById for fetching groupedChecks data.
• Created configuration toggle
  • Added new checkbox showResponseTimeChart in Status Page → Create/Edit → Features tab (Content.jsx).
  • Updated Create/index.jsx form state and submission logic to include showResponseTimeChart.
• Form & validation
  • Extended NetworkService.js to include showResponseTimeChart in API form submission.
  • Added Joi validation for showResponseTimeChart in validation.js.
• Localization
  • Added "showResponseTimeChart" key across all locale files (EN, DE, FR, PT-BR, etc.) for internationalization support.
• UI Components
  • Refactored and fixed naming in ResponseTimeChart component (typo fix from ResponseTImeChart → ResponseTimeChart).
  • Added skeleton loader for loading states.

⚙️ Backend Updates

• Database Schema
  • Added showResponseTimeChart field to StatusPage Mongoose schema with default true.
• Modules & Data Flow
  • Updated statusPageModule.js to:
    • Include showResponseTimeChart in both creation and response payloads.
    • Preserve the value across status page reads/writes.
• Validation
  • Added showResponseTimeChart to Joi validation in server/src/validation/joi.js.
• User Impact:
  • User can now choose whether to show a response time chart on their public status page.
  • End users viewing the status page will see an additional visualization of response time trends (if enabled).

https://github.com/user-attachments/assets/f31442b4-9be9-4ad7-b238-50ebbe85af6b

Write your issue number after "Fixes "

Fixes #2924

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.

• [x] (Do not skip this or your PR will be closed) I deployed the application locally.
• [x] (Do not skip this or your PR will be closed) I have performed a self-review and testing of my code.
• [x] I have included the issue # in the PR.
• [x] I have added i18n support to visible strings (instead of <div>Add</div>, use):

const { t } = useTranslation();
<div>{t('add')}</div>

• [x] 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
• [x] I didn't use any hardcoded values (otherwise it will not scale, and will make it difficult to maintain consistency across the application).
• [x] I made sure font sizes, color choices etc are all referenced from the theme. I don't have any hardcoded dimensions.
• [x] My PR is granular and targeted to one specific feature.
• [x] I ran npm run format in server and client directories, which automatically formats your code.
• [x] I took a screenshot or a video and attached to this PR if there is a UI change.

Summary by CodeRabbit

• Bug Fixes

  • Fixed a component naming typo affecting chart rendering.

• New Features

  • Per-monitor response time charts with date-range support.
  • Added a "Show Response Time Chart" toggle (enabled by default); setting is persisted and served by the backend.

• Localization

  • Added translations for the response time chart option across multiple locales.

[coderabbitai[bot]]

Walkthrough

Adds showResponseTimeChart end-to-end: UI toggle, form state, submission, client/server validation, DB schema, locale entries, per-monitor conditional ResponseTimeChart rendering, and renames/prop rename of the ResponseTimeChart component to use monitorIsLoading.

Changes

Cohort / File(s)	Summary
Chart Component Rename & Prop Change client/src/Components/v1/Charts/ResponseTimeChart/ResponseTimeChart.jsx	Renamed component ResponseTImeChart → ResponseTimeChart; prop renamed isLoading → monitorIsLoading; updated PropTypes, import path, and default export.
Status Page Create UI & Flow client/src/Pages/v1/StatusPage/Create/Components/Tabs/Content.jsx, client/src/Pages/v1/StatusPage/Create/index.jsx	Added showResponseTimeChart checkbox to features UI, integrated into form state (default true), included in tab/error mapping, and persisted via form submit/load.
Monitors List & Per-monitor Charts client/src/Pages/v1/StatusPage/Status/Components/MonitorsList/index.jsx	Introduced MonitorListItem component, per-monitor fetch (useFetchUptimeMonitorById), and conditional ResponseTimeChart rendering based on statusPage.showResponseTimeChart.
Uptime Details Import Update client/src/Pages/v1/Uptime/Details/index.jsx	Updated ResponseTimeChart import path and call site to pass monitorIsLoading instead of isLoading.
Client Validation & NetworkService client/src/Validation/validation.js, client/src/Utils/NetworkService.js	Added showResponseTimeChart: joi.boolean() to client validation and included showResponseTimeChart in createStatusPage FormData when defined.
Server Validation & Model server/src/validation/joi.js, server/src/db/v1/models/StatusPage.js	Added showResponseTimeChart to server Joi schema and to StatusPage Mongoose schema with default true.
Status Page Module Projection server/src/db/v1/modules/statusPageModule.js	Propagated showResponseTimeChart through aggregation projection and included it in early-return statusPage object.
Localization client/src/locales/* client/src/locales/ar.json, .../cs.json, .../de.json, .../en.json, .../es.json, .../fi.json, .../fr.json, .../ja.json, .../pt-BR.json, .../ru.json, .../th.json, .../tr.json, .../uk.json, .../vi.json, .../zh-CN.json, .../zh-TW.json	Added showResponseTimeChart translation key across locale files (some translated, others empty).
Build Metadata client/tsconfig.tsbuildinfo	Non-functional newline/EOL differences only.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant UI as StatusPage Create UI
    participant Form as Form State
    participant API as NetworkService
    participant Server
    participant DB as Database
    participant View as Status Page View
    participant Monitors as MonitorsList

    User->>UI: Toggle showResponseTimeChart
    UI->>Form: handleFormChange(showResponseTimeChart)
    User->>UI: Submit form
    UI->>API: createStatusPage(form with showResponseTimeChart)
    API->>Server: POST payload
    Server->>Server: Joi validation (includes showResponseTimeChart)
    Server->>DB: Save StatusPage (showResponseTimeChart default true)
    Server-->>API: Success
    API-->>UI: Confirm

    Note over View,Monitors: Rendering status page monitors
    View->>Monitors: pass statusPage.showResponseTimeChart
    alt showResponseTimeChart enabled
        Monitors->>Monitors: fetch monitor stats per monitor
        Monitors->>Monitors: render ResponseTimeChart per monitor (passes monitorIsLoading)
    else disabled
        Monitors->>Monitors: skip chart rendering
    end

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐰 I hopped into code with a curious twitch,
A tiny new toggle — a neat little switch,
Charts tucked beneath each heartbeat bar,
Translated and saved, now visible far,
Cheers from the burrow — a status page stitch!

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The pull request title "Add Response Time Chart option to Status Page configuration and display Closes #2924" accurately and clearly describes the main change in the changeset. It specifies what feature is being added (Response Time Chart option), where it's being added (Status Page configuration), and references the associated issue number. The title is concise, specific, and would be immediately understandable to someone reviewing commit history.
Linked Issues Check	✅ Passed	The code changes comprehensively address all requirements from issue #2924. The frontend implementation adds the showResponseTimeChart configuration toggle in the Status Page Create/Edit Features tab [Content.jsx, Create/index.jsx], renders the ResponseTimeChart component conditionally beneath each monitor's heartbeat bar using the new MonitorListItem component [MonitorsList/index.jsx], and includes i18n support across all locale files. The backend implementation adds the showResponseTimeChart field to the StatusPage database schema with default true [StatusPage.js], persists the field through the data module [statusPageModule.js], and includes server-side validation [joi.js]. All changes directly support the stated objectives of allowing users to toggle response time chart visibility and displaying response time trends to end users.
Out of Scope Changes Check	✅ Passed	All code changes in this pull request are directly scoped to implementing the Response Time Chart feature on status pages. Changes include component integration (ResponseTimeChart renamed and refactored), UI configuration (showResponseTimeChart checkbox added), form and validation layer updates, database schema changes, and localization across all supported languages. The only minor observation is that client/tsconfig.tsbuildinfo (a TypeScript build artifact) shows only a newline change with no functional impact, and ideally auto-generated build artifacts should not be committed to version control, though this does not represent out-of-scope functionality.
Description Check	✅ Passed	The pull request description is comprehensive and well-structured, covering all required template sections with clear organization into Frontend Updates, Backend Updates, and User Impact. The author has completed all checklist items (marked with [x]), included the issue number after "Fixes #2924", provided a detailed summary of changes, and attached a video demonstrating the feature. The description accurately reflects the code changes in the raw summary and provides context for reviewers to understand both the scope and implementation approach.

✨ Finishing touches

• [ ] 📝 Generate docstrings

🧪 Generate unit tests (beta)

• [ ] 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

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}