From 6b1839b172832c3254deb31d38bf461d090f59d8 Mon Sep 17 00:00:00 2001
From: Maina Wycliffe <wmmaina7@gmail.com>
Date: Wed, 8 Nov 2023 23:50:29 +0300
Subject: [PATCH] fix: use an appropriate runtime if check is older than 1h

Closes #1478
---
 .../Canary/CanaryPopup/CheckDetails.tsx       | 100 +++++++++++++++++-
 1 file changed, 98 insertions(+), 2 deletions(-)

diff --git a/src/components/Canary/CanaryPopup/CheckDetails.tsx b/src/components/Canary/CanaryPopup/CheckDetails.tsx
index b8b24add3..c202cccb2 100644
--- a/src/components/Canary/CanaryPopup/CheckDetails.tsx
+++ b/src/components/Canary/CanaryPopup/CheckDetails.tsx
@@ -1,4 +1,4 @@
-import React, { Suspense, useRef } from "react";
+import React, { Suspense, useMemo, useRef } from "react";
 import { useCanaryGraphQuery } from "../../../api/query-hooks/health";
 import { HealthCheck } from "../../../api/types/health";
 import {
@@ -16,6 +16,7 @@ import { CheckStat } from "./CheckStat";
 import { StatusHistory } from "./StatusHistory/StatusHistory";
 import { PopupTabs } from "./tabs";
 import { getUptimePercentage } from "./utils";
+import dayjs from "dayjs";
 const CanaryStatusChart = React.lazy(() =>
   import("../CanaryStatusChart").then(({ CanaryStatusChart }) => ({
     default: CanaryStatusChart
@@ -27,13 +28,108 @@ type CheckDetailsProps = React.HTMLProps<HTMLDivElement> & {
   timeRange: string;
 };
 
-export function CheckDetails({ check, timeRange, ...rest }: CheckDetailsProps) {
+export function CheckDetails({ check, ...rest }: CheckDetailsProps) {
   const containerRef = useRef<HTMLDivElement>(null);
   const statsRef = useRef<HTMLDivElement>(null);
 
   const prevCheck = usePrevious(check);
   const validCheck = check || prevCheck;
 
+  const timeRange = useMemo(() => {
+    // get time passed since last runtime
+    const lapsedTime = dayjs(validCheck?.lastRuntime!).diff(dayjs(), "minute");
+    // if passed time is less than 1 hour, use 1 hour time range
+    if (lapsedTime < 60) {
+      return "1h";
+    }
+    // if passed time is less than 3 hours, use 3 hours time range
+    if (lapsedTime < 180) {
+      return "3h";
+    }
+
+    // if passed time is less than 6 hours, use 6 hours time range
+    if (lapsedTime < 360) {
+      return "6h";
+    }
+
+    // if passed time is less than 12 hours, use 12 hours time range
+    if (lapsedTime < 720) {
+      return "12h";
+    }
+
+    // if passed time is less than 1 day, use 1 day time range
+    if (lapsedTime < 1440) {
+      return "1d";
+    }
+
+    // if passed time is less than 2 days, use 2 days time range
+    if (lapsedTime < 2880) {
+      return "2d";
+    }
+
+    // if passed time is less than 3 days, use 3 days time range
+    if (lapsedTime < 4320) {
+      return "3d";
+    }
+
+    // if passed time is less than 1 week, use 1 week time range
+    if (lapsedTime < 10080) {
+      return "1w";
+    }
+
+    // if passed time is less than 2 weeks, use 2 weeks time range
+    if (lapsedTime < 20160) {
+      return "2w";
+    }
+
+    // if passed time is less than 3 weeks, use 3 weeks time range
+    if (lapsedTime < 30240) {
+      return "3w";
+    }
+
+    // if passed time is less than 1 month, use 1 month time range
+    if (lapsedTime < 43200) {
+      return "1mo";
+    }
+
+    // if passed time is less than 2 months, use 2 months time range
+    if (lapsedTime < 86400) {
+      return "2mo";
+    }
+
+    // if passed time is less than 3 months, use 3 months time range
+    if (lapsedTime < 129600) {
+      return "3mo";
+    }
+
+    // if passed time is less than 6 months, use 6 months time range
+    if (lapsedTime < 259200) {
+      return "6mo";
+    }
+
+    // if passed time is less than 1 year, use 1 year time range
+    if (lapsedTime < 525600) {
+      return "1y";
+    }
+
+    // if passed time is less than 2 years, use 2 years time range
+    if (lapsedTime < 1051200) {
+      return "2y";
+    }
+
+    // if passed time is less than 3 years, use 3 years time range
+    if (lapsedTime < 1576800) {
+      return "3y";
+    }
+
+    // if passed time is more than 3 years, use 3 years time range
+    if (lapsedTime > 1576800) {
+      return "5y";
+    }
+
+    return "1h";
+  }, [validCheck?.lastRuntime]);
+
   const { data } = useCanaryGraphQuery(timeRange, validCheck);
 
   const uptimeValue = toFixedIfNecessary(