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

client/src/Pages/v1/Uptime/Details/Components/Charts/ResponseTimeChart.jsx → client/src/Components/v1/Charts/ResponseTimeChart/ResponseTimeChart.jsx

@@ -1,11 +1,15 @@
 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 }) => {
-	if (isLoading) {
+const ResponseTimeChart = ({
+	monitorIsLoading = false,
+	groupedChecks = [],
+	dateRange,
+}) => {
+	if (monitorIsLoading) {
 		return <SkeletonLayout />;
 	}
 
@@ -22,10 +26,10 @@ const ResponseTImeChart = ({ isLoading = false, groupedChecks = [], dateRange })
 	);
 };
 
-ResponseTImeChart.propTypes = {
-	isLoading: PropTypes.bool,
+ResponseTimeChart.propTypes = {
+	monitorIsLoading: PropTypes.bool,
 	groupedChecks: PropTypes.array,
 	dateRange: PropTypes.string,
 };
 
-export default ResponseTImeChart;
+export default ResponseTimeChart;

client/src/Pages/v1/StatusPage/Create/Components/Tabs/Content.jsx

@@ -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"

client/src/Pages/v1/StatusPage/Create/index.jsx

@@ -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 = () => {
@@ -41,6 +47,7 @@ const CreateStatusPage = () => {
 		monitors: [],
 		showCharts: true,
 		showUptimePercentage: true,
+		showResponseTimeChart: true,
 		showAdminLoginLink: false,
 	});
 	const [errors, setErrors] = useState({});
@@ -210,6 +217,7 @@ const CreateStatusPage = () => {
 				logo: newLogo,
 				showCharts: statusPage?.showCharts ?? true,
 				showUptimePercentage: statusPage?.showUptimePercentage ?? true,
+				showResponseTimeChart: statusPage?.showResponseTimeChart ?? true,
 				showAdminLoginLink: statusPage?.showAdminLoginLink ?? false,
 			};
 		});

client/src/Pages/v1/StatusPage/Status/Components/MonitorsList/index.jsx

@@ -10,6 +10,8 @@ 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 { useFetchUptimeMonitorById } from "@/Hooks/v1/monitorHooks.js";
 
 const MonitorsList = ({
 	isLoading = false,
@@ -24,47 +26,91 @@ const MonitorsList = ({
 
 	return (
 		<>
-			{monitors?.map((monitor) => {
-				const status = determineState(monitor);
-				return (
-					<Stack
-						key={monitor._id}
-						width="100%"
-						gap={theme.spacing(2)}
-					>
-						<Host
-							key={monitor._id}
-							url={monitor.url}
-							title={monitor.name}
-							percentageColor={monitor.percentageColor}
-							percentage={monitor.percentage}
-							showURL={showURL}
-						/>
-						<Stack
-							direction="row"
-							alignItems="center"
-							gap={theme.spacing(20)}
-						>
-							{statusPage.showCharts !== false && (
-								<Box flex={9}>
-									<StatusPageBarChart checks={monitor?.checks?.slice().reverse()} />
-								</Box>
-							)}
-							<Box flex={statusPage.showCharts !== false ? 1 : 10}>
-								<StatusLabel
-									status={status}
-									text={status}
-									customStyles={{ textTransform: "capitalize" }}
-								/>
-							</Box>
-						</Stack>
-					</Stack>
-				);
-			})}
+			{monitors?.map((monitor) => (
+				<MonitorListItem
+					key={monitor._id}
+					monitor={monitor}
+					statusPage={statusPage}
+					showURL={showURL}
+					dateRange="recent"
+				/>
+			))}
 		</>
 	);
 };
 
+function MonitorListItem({ monitor, statusPage, showURL, dateRange }) {
+	const theme = useTheme();
+	const { determineState } = useMonitorUtils();
+	const status = determineState(monitor);
+	const [monitorData, , monitorIsLoading] = useFetchUptimeMonitorById({
+		monitorId: monitor._id,
+		dateRange,
+		trigger: false,
+	});
+
+	return (
+		<Stack
+			width="100%"
+			gap={theme.spacing(2)}
+		>
+			<Host
+				url={monitor.url}
+				title={monitor.name}
+				percentageColor={monitor.percentageColor}
+				percentage={monitor.percentage}
+				showURL={showURL}
+			/>
+			<Stack
+				direction="row"
+				alignItems="center"
+				gap={theme.spacing(20)}
+			>
+				{statusPage.showCharts !== false && (
+					<Box flex={9}>
+						<StatusPageBarChart checks={monitor?.checks?.slice().reverse()} />
+					</Box>
+				)}
+				<Box flex={statusPage.showCharts !== false ? 1 : 10}>
+					<StatusLabel
+						status={status}
+						text={status}
+						customStyles={{ textTransform: "capitalize" }}
+					/>
+				</Box>
+			</Stack>
+			{statusPage.showResponseTimeChart !== false && (
+				<Stack
+					direction="row"
+					alignItems="center"
+					gap={theme.spacing(20)}
+					mt={2}
+				>
+					<ResponseTimeChart
+						monitorIsLoading={monitorIsLoading}
+						groupedChecks={monitorData?.groupedChecks}
+						dateRange={dateRange}
+					/>
+				</Stack>
+			)}
+		</Stack>
+	);
+}
+
+MonitorListItem.propTypes = {
+	monitor: PropTypes.shape({
+		_id: PropTypes.string.isRequired,
+		url: PropTypes.string,
+		name: PropTypes.string,
+		percentageColor: PropTypes.string,
+		percentage: PropTypes.number,
+		checks: PropTypes.array,
+	}).isRequired,
+	statusPage: PropTypes.object,
+	showURL: PropTypes.bool,
+	dateRange: PropTypes.string.isRequired,
+};
+
 MonitorsList.propTypes = {
 	monitors: PropTypes.array.isRequired,
 	statusPage: PropTypes.object,

client/src/Pages/v1/Uptime/Details/index.jsx

@@ -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";
 import ResponseTable from "./Components/ResponseTable/index.jsx";
 import UptimeStatusBoxes from "./Components/UptimeStatusBoxes/index.jsx";
 import GenericFallback from "@/Components/v1/GenericFallback/index.jsx";
@@ -169,7 +169,7 @@ const UptimeDetails = () => {
 				dateFormat={dateFormat}
 			/>
 			<ResponseTimeChart
-				isLoading={monitorIsLoading}
+				monitorIsLoading={monitorIsLoading}
 				groupedChecks={monitorData?.groupedChecks}
 				dateRange={dateRange}
 			/>

client/src/Utils/NetworkService.js

@@ -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));
 		}

client/src/Validation/validation.js

@@ -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(),
 });

client/src/locales/ar.json

@@ -283,6 +283,7 @@
 	"statusPageCreateTabsContentFeaturesDescription": "",
 	"showCharts": "",
 	"showUptimePercentage": "",
+	"showResponseTimeChart": "",
 	"removeLogo": "",
 	"statusPageStatus": "",
 	"statusPageStatusContactAdmin": "",

client/src/locales/cs.json

@@ -283,6 +283,7 @@
 	"statusPageCreateTabsContentFeaturesDescription": "",
 	"showCharts": "",
 	"showUptimePercentage": "",
+	"showResponseTimeChart": "",
 	"removeLogo": "",
 	"statusPageStatus": "",
 	"statusPageStatusContactAdmin": "",

client/src/locales/de.json

@@ -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",

client/src/locales/en.json

@@ -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",

client/src/locales/es.json

@@ -283,6 +283,7 @@
 	"statusPageCreateTabsContentFeaturesDescription": "",
 	"showCharts": "",
 	"showUptimePercentage": "",
+	"showResponseTimeChart": "",
 	"removeLogo": "",
 	"statusPageStatus": "",
 	"statusPageStatusContactAdmin": "",

client/src/locales/fi.json

@@ -283,6 +283,7 @@
 	"statusPageCreateTabsContentFeaturesDescription": "",
 	"showCharts": "Näytä kaaviot",
 	"showUptimePercentage": "",
+	"showResponseTimeChart": "Näytä vasteaikakaavio",
 	"removeLogo": "Poista logo",
 	"statusPageStatus": "",
 	"statusPageStatusContactAdmin": "Ota yhteyttä järjestelmänvalvojaan",

client/src/locales/fr.json

@@ -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",

client/src/locales/ja.json

@@ -287,6 +287,7 @@
 	"statusPageCreateTabsContentFeaturesDescription": "ステータスページでより多くの詳細を表示",
 	"showCharts": "チャートを表示",
 	"showUptimePercentage": "稼働率を表示",
+	"showResponseTimeChart": "応答時間チャートを表示",
 	"removeLogo": "ロゴを削除",
 	"statusPageStatus": "公開ステータスページが設定されていません。",
 	"statusPageStatusContactAdmin": "管理者にお問い合わせください",

client/src/locales/pt-BR.json

@@ -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",

client/src/locales/ru.json

@@ -283,6 +283,7 @@
 	"statusPageCreateTabsContentFeaturesDescription": "Показать больше подробностей на странице статуса",
 	"showCharts": "Показать графики",
 	"showUptimePercentage": "Показать процент работоспособности",
+	"showResponseTimeChart": "Показать диаграмму времени отклика",
 	"removeLogo": "Удалить логотип",
 	"statusPageStatus": "Публичная страница статуса не создана.",
 	"statusPageStatusContactAdmin": "Пожалуйста, свяжитесь с вашим администратором.",

client/src/locales/th.json

@@ -287,6 +287,7 @@
 	"statusPageCreateTabsContentFeaturesDescription": "แสดงรายละเอียดเพิ่มเติมบนหน้าสถานะ",
 	"showCharts": "แสดงแผนภูมิ",
 	"showUptimePercentage": "แสดงเปอร์เซ็นต์ความพร้อมใช้งาน",
+	"showResponseTimeChart": "แสดงแผนภูมิเวลาตอบสนอง",
 	"removeLogo": "ลบโลโก้",
 	"statusPageStatus": "ยังไม่ได้ตั้งค่าหน้าสถานะสาธารณะ",
 	"statusPageStatusContactAdmin": "กรุณาติดต่อผู้ดูแลระบบของคุณ",

client/src/locales/tr.json

@@ -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.",

client/src/locales/uk.json

@@ -284,6 +284,7 @@
 	"statusPageCreateTabsContentFeaturesDescription": "",
 	"showCharts": "",
 	"showUptimePercentage": "",
+	"showResponseTimeChart": "",
 	"removeLogo": "",
 	"statusPageStatus": "",
 	"statusPageStatusContactAdmin": "",

client/src/locales/vi.json

@@ -284,6 +284,7 @@
 	"statusPageCreateTabsContentFeaturesDescription": "",
 	"showCharts": "",
 	"showUptimePercentage": "",
+	"showResponseTimeChart": "",
 	"removeLogo": "",
 	"statusPageStatus": "",
 	"statusPageStatusContactAdmin": "",

client/src/locales/zh-CN.json

@@ -287,6 +287,7 @@
 	"statusPageCreateTabsContentFeaturesDescription": "在状态页上显示更多详细信息",
 	"showCharts": "显示图表",
 	"showUptimePercentage": "显示正常运行时间百分比",
+	"showResponseTimeChart": "显示响应时间图表",
 	"removeLogo": "移除Logo",
 	"statusPageStatus": "未设置公开状态页面。",
 	"statusPageStatusContactAdmin": "请联系您的管理员",

client/src/locales/zh-TW.json

@@ -287,6 +287,7 @@
 	"statusPageCreateTabsContentFeaturesDescription": "",
 	"showCharts": "",
 	"showUptimePercentage": "",
+	"showResponseTimeChart": "",
 	"removeLogo": "",
 	"statusPageStatus": "",
 	"statusPageStatusContactAdmin": "",