Skip to content

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

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.

Sign up for GitHub

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

Open
wants to merge 7 commits into
base: develop
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
488fe76
Implementing feature Closes #2924
bansalhimanshu0296 Oct 17, 2025
729be8b
Removing Console Closing #2924
bansalhimanshu0296 Oct 17, 2025
309964a
Resolving coderabbitai comments
bansalhimanshu0296 Oct 17, 2025
d233d02
Resolving llamapreview comments
bansalhimanshu0296 Oct 17, 2025
a7500d2
Resolving llamapreview comments
bansalhimanshu0296 Oct 17, 2025
93b38ba
Resolving coderabbitai comments
bansalhimanshu0296 Oct 17, 2025
9c21de7
Removing unused import
bansalhimanshu0296 Oct 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions ...s/Components/Charts/ResponseTimeChart.jsx → ...s/ResponseTimeChart/ResponseTimeChart.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import ChartBox from "@/Components/v1/Charts/ChartBox/index.jsx";
import MonitorDetailsAreaChart from "@/Components/v1/Charts/MonitorDetailsAreaChart/index.jsx";
import ResponseTimeIcon from "../../../../../../assets/icons/response-time-icon.svg?react";
import ResponseTimeIcon from "../../../../assets/icons/response-time-icon.svg?react";
import SkeletonLayout from "./ResponseTimeChartSkeleton.jsx";
import PropTypes from "prop-types";

const ResponseTImeChart = ({ isLoading = false, groupedChecks = [], dateRange }) => {
const ResponseTimeChart = ({ isLoading = false, groupedChecks = [], dateRange }) => {
if (isLoading) {
return <SkeletonLayout />;
}
Expand All @@ -22,10 +22,10 @@ const ResponseTImeChart = ({ isLoading = false, groupedChecks = [], dateRange })
);
};

ResponseTImeChart.propTypes = {
ResponseTimeChart.propTypes = {
isLoading: PropTypes.bool,
groupedChecks: PropTypes.array,
dateRange: PropTypes.string,
};
Comment on lines 29 to 33
Copy link

@coderabbitai coderabbitai bot Oct 17, 2025

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🔴 Critical

Fix PropTypes: update isLoading to monitorIsLoading.

The PropTypes definition still references isLoading, but the component now uses monitorIsLoading. This mismatch will cause PropTypes validation warnings and confusion.

Apply this diff to fix the PropTypes definition:

 ResponseTimeChart.propTypes = {
-	isLoading: PropTypes.bool,
+	monitorIsLoading: PropTypes.bool,
 	groupedChecks: PropTypes.array,
 	dateRange: PropTypes.string,
 };
📝 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
ResponseTimeChart.propTypes = {
isLoading: PropTypes.bool,
groupedChecks: PropTypes.array,
dateRange: PropTypes.string,
};
ResponseTimeChart.propTypes = {
monitorIsLoading: PropTypes.bool,
groupedChecks: PropTypes.array,
dateRange: PropTypes.string,
};
🤖 Prompt for AI Agents 
In client/src/Components/v1/Charts/ResponseTimeChart/ResponseTimeChart.jsx
around lines 29 to 33, the PropTypes object still defines isLoading but the
component uses monitorIsLoading; update the PropTypes key to monitorIsLoading:
PropTypes.bool (replacing isLoading) so the prop name matches the component and
avoids validation warnings.


export default ResponseTImeChart;
export default ResponseTimeChart;
0 ...ents/Charts/ResponseTimeChartSkeleton.jsx → ...seTimeChart/ResponseTimeChartSkeleton.jsx
View file
Open in desktop
File renamed without changes.
7 changes: 7 additions & 0 deletions client/src/Pages/v1/StatusPage/Create/Components/Tabs/Content.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,13 @@ const Content = ({
isChecked={form.showUptimePercentage}
onChange={handleFormChange}
/>
<Checkbox
id="showResponseTimeChart"
name="showResponseTimeChart"
label={t("showResponseTimeChart")}
isChecked={form.showResponseTimeChart}
onChange={handleFormChange}
/>
<Checkbox
id="showAdminLoginLink"
name="showAdminLoginLink"
Expand Down
10 changes: 9 additions & 1 deletion client/src/Pages/v1/StatusPage/Create/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,13 @@ import { useStatusPageDelete } from "../Status/Hooks/useStatusPageDelete.jsx";
//Constants
const ERROR_TAB_MAPPING = [
["companyName", "url", "timezone", "color", "isPublished", "logo"],
["monitors", "showUptimePercentage", "showCharts", "showAdminLoginLink"],
[
"monitors",
"showUptimePercentage",
"showResponseTimeChart",
"showCharts",
"showAdminLoginLink",
],
];

const CreateStatusPage = () => {
Expand All @@ -41,6 +47,7 @@ const CreateStatusPage = () => {
monitors: [],
showCharts: true,
showUptimePercentage: true,
showResponseTimeChart: true,
showAdminLoginLink: false,
});
const [errors, setErrors] = useState({});
Expand Down Expand Up @@ -210,6 +217,7 @@ const CreateStatusPage = () => {
logo: newLogo,
showCharts: statusPage?.showCharts ?? true,
showUptimePercentage: statusPage?.showUptimePercentage ?? true,
showResponseTimeChart: statusPage?.showResponseTimeChart ?? true,
showAdminLoginLink: statusPage?.showAdminLoginLink ?? false,
};
});
Expand Down
25 changes: 25 additions & 0 deletions client/src/Pages/v1/StatusPage/Status/Components/MonitorsList/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,9 @@ import { useMonitorUtils } from "../../../../../../Hooks/v1/useMonitorUtils.js";
import PropTypes from "prop-types";

import { useSelector } from "react-redux";
import ResponseTimeChart from "@/Components/v1/Charts/ResponseTimeChart/ResponseTimeChart.jsx";
import { useState } from "react";
import { useFetchUptimeMonitorById } from "@/Hooks/v1/monitorHooks.js";

const MonitorsList = ({
isLoading = false,
Expand All @@ -19,13 +22,20 @@ const MonitorsList = ({
}) => {
const theme = useTheme();
const { determineState } = useMonitorUtils();
const [dateRange, setDateRange] = useState("recent");

const { showURL } = useSelector((state) => state.ui);

return (
<>
{monitors?.map((monitor) => {
const status = determineState(monitor);
const [monitorData, monitorStats, monitorIsLoading, monitorNetworkError] =
useFetchUptimeMonitorById({
monitorId: monitor._id,
dateRange,
trigger: false,
});
return (
<Stack
key={monitor._id}
Expand All @@ -50,6 +60,7 @@ const MonitorsList = ({
<StatusPageBarChart checks={monitor?.checks?.slice().reverse()} />
</Box>
)}

<Box flex={statusPage.showCharts !== false ? 1 : 10}>
<StatusLabel
status={status}
Expand All @@ -58,6 +69,20 @@ const MonitorsList = ({
/>
</Box>
</Stack>
{statusPage.showResponseTimeChart !== false && (
<Stack
direction="row"
alignItems="center"
gap={theme.spacing(20)}
mt={2}
>
<ResponseTimeChart
isLoading={isLoading}
groupedChecks={monitorData?.groupedChecks}
dateRange={dateRange}
/>
</Stack>
)}
</Stack>
);
})}
Expand Down
2 changes: 1 addition & 1 deletion client/src/Pages/v1/Uptime/Details/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import Breadcrumbs from "@/Components/v1/Breadcrumbs/index.jsx";
import MonitorDetailsControlHeader from "@/Components/v1/MonitorDetailsControlHeader/index.jsx";
import MonitorTimeFrameHeader from "@/Components/v1/MonitorTimeFrameHeader/index.jsx";
import ChartBoxes from "./Components/ChartBoxes/index.jsx";
import ResponseTimeChart from "./Components/Charts/ResponseTimeChart.jsx";
import ResponseTimeChart from "../../../../Components/v1/Charts/ResponseTimeChart/ResponseTimeChart.jsx";
Copy link

@llamapreview llamapreview bot Oct 17, 2025

Choose a reason for hiding this comment

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

P2 | Confidence: High

The component sharing between status page and uptime details is architecturally sound. However, the import path uses deep relative imports (../../../../) which are fragile and hard to maintain. Consider using the established @/ alias pattern for better maintainability.

Suggested change
import ResponseTimeChart from "../../../../Components/v1/Charts/ResponseTimeChart/ResponseTimeChart.jsx";
import ResponseTimeChart from "@/Components/v1/Charts/ResponseTimeChart/ResponseTimeChart.jsx";

import ResponseTable from "./Components/ResponseTable/index.jsx";
import UptimeStatusBoxes from "./Components/UptimeStatusBoxes/index.jsx";
import GenericFallback from "@/Components/v1/GenericFallback/index.jsx";
Expand Down
3 changes: 3 additions & 0 deletions client/src/Utils/NetworkService.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -929,6 +929,9 @@ class NetworkService {
if (form.showUptimePercentage !== undefined) {
fd.append("showUptimePercentage", String(form.showUptimePercentage));
}
if (form.showResponseTimeChart !== undefined) {
fd.append("showResponseTimeChart", String(form.showResponseTimeChart));
}
if (form.showAdminLoginLink !== undefined) {
fd.append("showAdminLoginLink", String(form.showAdminLoginLink));
}
Expand Down
1 change: 1 addition & 0 deletions client/src/Validation/validation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -303,6 +303,7 @@ const statusPageValidation = joi.object({
subMonitors: joi.array().optional(),
logo: logoImageValidation,
showUptimePercentage: joi.boolean(),
showResponseTimeChart: joi.boolean(),
showCharts: joi.boolean(),
showAdminLoginLink: joi.boolean(),
});
Expand Down
1 change: 1 addition & 0 deletions client/src/locales/ar.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -283,6 +283,7 @@
"statusPageCreateTabsContentFeaturesDescription": "",
"showCharts": "",
"showUptimePercentage": "",
"showResponseTimeChart": "",
"removeLogo": "",
"statusPageStatus": "",
"statusPageStatusContactAdmin": "",
Expand Down
1 change: 1 addition & 0 deletions client/src/locales/cs.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -283,6 +283,7 @@
"statusPageCreateTabsContentFeaturesDescription": "",
"showCharts": "",
"showUptimePercentage": "",
"showResponseTimeChart": "",
"removeLogo": "",
"statusPageStatus": "",
"statusPageStatusContactAdmin": "",
Expand Down
1 change: 1 addition & 0 deletions client/src/locales/de.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -287,6 +287,7 @@
"statusPageCreateTabsContentFeaturesDescription": "Mehr Details auf der Statusseite anzeigen",
"showCharts": "Diagramme anzeigen",
"showUptimePercentage": "Verfügbarkeitsprozentsatz anzeigen",
"showResponseTimeChart": "Reaktionszeitdiagramm anzeigen",
"removeLogo": "Entferne Logo",
"statusPageStatus": "Eine öffentliche Statusseite ist nicht eingerichtet.",
"statusPageStatusContactAdmin": "Bitte wenden Sie sich an Ihren Administrator",
Expand Down
1 change: 1 addition & 0 deletions client/src/locales/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -287,6 +287,7 @@
"statusPageCreateTabsContentFeaturesDescription": "Show more details on the status page",
"showCharts": "Show charts",
"showUptimePercentage": "Show uptime percentage",
"showResponseTimeChart": "Show Response Time Chart",
"removeLogo": "Remove Logo",
"statusPageStatus": "A public status page is not set up.",
"statusPageStatusContactAdmin": "Please contact to your administrator",
Expand Down
1 change: 1 addition & 0 deletions client/src/locales/es.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -283,6 +283,7 @@
"statusPageCreateTabsContentFeaturesDescription": "",
"showCharts": "",
"showUptimePercentage": "",
"showResponseTimeChart": "",
"removeLogo": "",
"statusPageStatus": "",
"statusPageStatusContactAdmin": "",
Expand Down
1 change: 1 addition & 0 deletions client/src/locales/fi.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -283,6 +283,7 @@
"statusPageCreateTabsContentFeaturesDescription": "",
"showCharts": "Näytä kaaviot",
"showUptimePercentage": "",
"showResponseTimeChart": "Näytä vasteaikakaavio",
"removeLogo": "Poista logo",
"statusPageStatus": "",
"statusPageStatusContactAdmin": "Ota yhteyttä järjestelmänvalvojaan",
Expand Down
1 change: 1 addition & 0 deletions client/src/locales/fr.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -287,6 +287,7 @@
"statusPageCreateTabsContentFeaturesDescription": "Voir plus de détails sur la page de statut",
"showCharts": "Voir les graphiques",
"showUptimePercentage": "Voir le pourcentage de temps en ligne",
"showResponseTimeChart": "Afficher le graphique des temps de réponse",
"removeLogo": "Supprimer le logo",
"statusPageStatus": "Aucune page de statut publique n'est déployée",
"statusPageStatusContactAdmin": "Merci de contacter votre administrateur",
Expand Down
1 change: 1 addition & 0 deletions client/src/locales/ja.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -287,6 +287,7 @@
"statusPageCreateTabsContentFeaturesDescription": "ステータスページでより多くの詳細を表示",
"showCharts": "チャートを表示",
"showUptimePercentage": "稼働率を表示",
"showResponseTimeChart": "応答時間チャートを表示",
"removeLogo": "ロゴを削除",
"statusPageStatus": "公開ステータスページが設定されていません。",
"statusPageStatusContactAdmin": "管理者にお問い合わせください",
Expand Down
1 change: 1 addition & 0 deletions client/src/locales/pt-BR.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -287,6 +287,7 @@
"statusPageCreateTabsContentFeaturesDescription": "Mostrar mais detalhes na página de status",
"showCharts": "Mostrar gráficos",
"showUptimePercentage": "Mostrar porcentagem de Uptime",
"showResponseTimeChart": "Mostrar gráfico de tempo de resposta",
"removeLogo": "Remover logo",
"statusPageStatus": "Uma página de status pública não está configurada.",
"statusPageStatusContactAdmin": "Entre em contato com seu administrador",
Expand Down
1 change: 1 addition & 0 deletions client/src/locales/ru.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -283,6 +283,7 @@
"statusPageCreateTabsContentFeaturesDescription": "Показать больше подробностей на странице статуса",
"showCharts": "Показать графики",
"showUptimePercentage": "Показать процент работоспособности",
"showResponseTimeChart": "Показать диаграмму времени отклика",
"removeLogo": "Удалить логотип",
"statusPageStatus": "Публичная страница статуса не создана.",
"statusPageStatusContactAdmin": "Пожалуйста, свяжитесь с вашим администратором.",
Expand Down
1 change: 1 addition & 0 deletions client/src/locales/th.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -287,6 +287,7 @@
"statusPageCreateTabsContentFeaturesDescription": "แสดงรายละเอียดเพิ่มเติมบนหน้าสถานะ",
"showCharts": "แสดงแผนภูมิ",
"showUptimePercentage": "แสดงเปอร์เซ็นต์ความพร้อมใช้งาน",
"showResponseTimeChart": "แสดงแผนภูมิเวลาตอบสนอง",
"removeLogo": "ลบโลโก้",
"statusPageStatus": "ยังไม่ได้ตั้งค่าหน้าสถานะสาธารณะ",
"statusPageStatusContactAdmin": "กรุณาติดต่อผู้ดูแลระบบของคุณ",
Expand Down
1 change: 1 addition & 0 deletions client/src/locales/tr.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -283,6 +283,7 @@
"statusPageCreateTabsContentFeaturesDescription": "Durum sayfasında daha fazla bilgi göster",
"showCharts": "Çizelgeleri göster",
"showUptimePercentage": "Çalışma süresi yüzdesini göster",
"showResponseTimeChart": "Tepki Süresi Tablosunu Göster",
"removeLogo": "Logoyu sil",
"statusPageStatus": "Herkese açık bir durum sayfası henüz oluşturulmadı.",
"statusPageStatusContactAdmin": "Lütfen yöneticinizle iletişime geçin.",
Expand Down
1 change: 1 addition & 0 deletions client/src/locales/uk.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -284,6 +284,7 @@
"statusPageCreateTabsContentFeaturesDescription": "",
"showCharts": "",
"showUptimePercentage": "",
"showResponseTimeChart": "",
"removeLogo": "",
"statusPageStatus": "",
"statusPageStatusContactAdmin": "",
Expand Down
1 change: 1 addition & 0 deletions client/src/locales/vi.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -284,6 +284,7 @@
"statusPageCreateTabsContentFeaturesDescription": "",
"showCharts": "",
"showUptimePercentage": "",
"showResponseTimeChart": "",
"removeLogo": "",
"statusPageStatus": "",
"statusPageStatusContactAdmin": "",
Expand Down
1 change: 1 addition & 0 deletions client/src/locales/zh-CN.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -287,6 +287,7 @@
"statusPageCreateTabsContentFeaturesDescription": "在状态页上显示更多详细信息",
"showCharts": "显示图表",
"showUptimePercentage": "显示正常运行时间百分比",
"showResponseTimeChart": "显示响应时间图表",
"removeLogo": "移除Logo",
"statusPageStatus": "未设置公开状态页面。",
"statusPageStatusContactAdmin": "请联系您的管理员",
Expand Down
1 change: 1 addition & 0 deletions client/src/locales/zh-TW.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -287,6 +287,7 @@
"statusPageCreateTabsContentFeaturesDescription": "",
"showCharts": "",
"showUptimePercentage": "",
"showResponseTimeChart": "",
"removeLogo": "",
"statusPageStatus": "",
"statusPageStatusContactAdmin": "",
Expand Down
Loading