From 90eca83e80ef55147291081ca5f66df6c9054144 Mon Sep 17 00:00:00 2001
From: John Goh <john@flanksource.com>
Date: Mon, 29 Nov 2021 15:22:37 +0800
Subject: [PATCH] fix: refactor CanaryPopup-related files

---
 .../Canary/CanaryPopup/CheckDetails.js        | 151 ++++++++
 .../Canary/CanaryPopup/CheckStat.js           |  20 +
 .../Canary/CanaryPopup/CheckTitle.js          |  52 +++
 .../Canary/CanaryPopup/DetailField.js         |  14 +
 .../Canary/CanaryPopup/StatusHistory.js       |  44 +++
 src/components/Canary/CanaryPopup/index.js    | 345 ------------------
 src/components/Canary/CanaryPopup/tabs.js     |  69 ++++
 src/components/Canary/CanaryPopup/utils.js    |   7 +
 src/components/Canary/index.js                |   3 +-
 9 files changed, 359 insertions(+), 346 deletions(-)
 create mode 100644 src/components/Canary/CanaryPopup/CheckDetails.js
 create mode 100644 src/components/Canary/CanaryPopup/CheckStat.js
 create mode 100644 src/components/Canary/CanaryPopup/CheckTitle.js
 create mode 100644 src/components/Canary/CanaryPopup/DetailField.js
 create mode 100644 src/components/Canary/CanaryPopup/StatusHistory.js
 delete mode 100644 src/components/Canary/CanaryPopup/index.js
 create mode 100644 src/components/Canary/CanaryPopup/tabs.js
 create mode 100644 src/components/Canary/CanaryPopup/utils.js

diff --git a/src/components/Canary/CanaryPopup/CheckDetails.js b/src/components/Canary/CanaryPopup/CheckDetails.js
new file mode 100644
index 000000000..eaf59e176
--- /dev/null
+++ b/src/components/Canary/CanaryPopup/CheckDetails.js
@@ -0,0 +1,151 @@
+import React from "react";
+import { usePrevious } from "../../../utils/hooks";
+import { Badge } from "../../Badge";
+import { toFormattedDuration } from "../renderers";
+import { AccordionBox } from "../../AccordionBox";
+import {
+  capitalizeFirstLetter,
+  toFixedIfNecessary
+} from "../../../utils/common";
+import styles from "../index.module.css";
+import { PopupTabs } from "./tabs";
+import { CheckStat } from "./CheckStat";
+import { getUptimePercentage } from "./utils";
+import { StatusHistory } from "./StatusHistory";
+import { DetailField } from "./DetailField";
+
+export function CheckDetails({ check, ...rest }) {
+  const prevCheck = usePrevious(check);
+  const validCheck = check || prevCheck;
+
+  const [val, unit] = toFormattedDuration(validCheck?.latency?.rolling1h);
+  const latencyValue = validCheck?.latency?.rolling1h ? `${val}${unit}` : "-";
+  const uptimeValue = toFixedIfNecessary(getUptimePercentage(validCheck), 2);
+  const validUptime =
+    !Number.isNaN(validCheck?.uptime?.passed) &&
+    !Number.isNaN(validCheck?.uptime?.failed);
+  const severityValue = validCheck?.severity || "-";
+  const statusHistoryList = validCheck?.checkStatuses;
+
+  const details = {
+    Name:
+      validCheck?.name || validCheck?.canaryName || validCheck?.endpoint || "-",
+    Type: validCheck?.type || "-",
+    Labels: (
+      <>
+        {validCheck?.labels &&
+          Object.entries(validCheck?.labels).map((entry) => {
+            const key = entry[0];
+            return <Badge className="mr-1 mb-1" key={key} text={key} />;
+          })}
+      </>
+    ),
+    Owner: validCheck?.owner || "-",
+    Interval: validCheck?.interval || "-",
+    Location: validCheck?.location || "-",
+    Schedule: validCheck?.schedule || "-"
+  };
+
+  return (
+    <div {...rest}>
+      {/* stats section */}
+      <div className="flex flex-row flex-wrap mb-2">
+        <CheckStat
+          containerClass="w-52 mb-4"
+          title="Uptime"
+          value={
+            !Number.isNaN(uptimeValue)
+              ? `${toFixedIfNecessary(uptimeValue, 2)}%`
+              : "-"
+          }
+          append={
+            validUptime &&
+            !Number.isNaN(uptimeValue) && (
+              <div className="flex flex-col justify-center mx-2 mt-0.5">
+                <span className="text-xs text-green-700 ">
+                  {validCheck?.uptime?.passed} passed
+                </span>
+                <span className="text-xs text-red-600">
+                  {validCheck?.uptime?.failed} failed
+                </span>
+              </div>
+            )
+          }
+        />
+        <CheckStat
+          containerClass="w-52 mb-4"
+          title="Latency"
+          value={latencyValue}
+        />
+        <CheckStat
+          containerClass="w-52 mb-4"
+          title="Severity"
+          value={capitalizeFirstLetter(severityValue)}
+        />
+      </div>
+      {/* chart section */}
+      <div className="mb-6">
+        <div className="flex justify-between items-center mb-2">
+          <span className="text-lg font-medium">Health overview</span>
+          <span className="text-sm font-medium">(time dropdown)</span>
+        </div>
+        <div className="bg-gray-100 w-full h-52" />
+      </div>
+      <PopupTabs
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          overflowY: "hidden"
+        }}
+        contentStyle={{
+          marginTop: "-1px",
+          display: "flex",
+          flexDirection: "column",
+          overflowY: "hidden"
+        }}
+        tabs={{
+          statusHistory: {
+            label: "Status history",
+            content: (
+              <div
+                key="status-history"
+                className={`border border-b-0 border-gray-300 overflow-hidden overflow-y-auto relative -mb-px ${styles.appleScrollbar}`}
+              >
+                {statusHistoryList && statusHistoryList.length > 0 ? (
+                  <StatusHistory check={validCheck} sticky />
+                ) : (
+                  <div className="h-64 flex items-center justify-center text-gray-400 text-md">
+                    No status history available
+                  </div>
+                )}
+              </div>
+            ),
+            class: "flex flex-col overflow-y-hidden border-b border-gray-300"
+          },
+          checkDetails: {
+            label: "Check details",
+            content: (
+              <div key="check-details" className="px-6 py-6">
+                <AccordionBox
+                  content={
+                    <div className="flex flex-row flex-wrap">
+                      {Object.entries(details).map(([label, value]) => (
+                        <DetailField
+                          key={label}
+                          className="w-1/2 mb-3 whitespace-nowrap"
+                          label={label}
+                          value={value}
+                        />
+                      ))}
+                    </div>
+                  }
+                />
+              </div>
+            ),
+            class: `flex flex-col overflow-y-auto  border border-gray-300 ${styles.appleScrollbar}`
+          }
+        }}
+      />
+    </div>
+  );
+}
diff --git a/src/components/Canary/CanaryPopup/CheckStat.js b/src/components/Canary/CanaryPopup/CheckStat.js
new file mode 100644
index 000000000..d400b87f1
--- /dev/null
+++ b/src/components/Canary/CanaryPopup/CheckStat.js
@@ -0,0 +1,20 @@
+import React from "react";
+
+export function CheckStat({
+  title,
+  value,
+  append,
+  containerClass,
+  className,
+  ...rest
+}) {
+  return (
+    <div className={`flex flex-col ${containerClass} ${className}`} {...rest}>
+      <div className="text-sm font-medium text-gray-500">{title}</div>
+      <div className="flex">
+        <span className="text-4xl font-bold">{value}</span>
+        {append}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Canary/CanaryPopup/CheckTitle.js b/src/components/Canary/CanaryPopup/CheckTitle.js
new file mode 100644
index 000000000..a01f5b607
--- /dev/null
+++ b/src/components/Canary/CanaryPopup/CheckTitle.js
@@ -0,0 +1,52 @@
+import React from "react";
+import { usePrevious } from "../../../utils/hooks";
+import { Badge } from "../../Badge";
+import { Icon } from "../../Icon";
+
+export function CheckTitle({ check, className, ...rest }) {
+  const prevCheck = usePrevious(check);
+  const validCheck = check || prevCheck;
+
+  return (
+    <div className={`flex flex-row ${className}`} {...rest}>
+      <div className="w-14 flex-shrink-0 pr-3">
+        <Icon
+          name={validCheck?.icon || validCheck?.type}
+          className="w-full h-12"
+          size="2xl"
+        />
+      </div>
+      <div className="overflow-hidden mr-10">
+        <div className="flex flex-row items-center">
+          <span
+            title={validCheck?.name}
+            className="text-gray-800 text-2xl font-semibold whitespace-nowrap overflow-ellipsis overflow-hidden pr-4"
+          >
+            {validCheck?.name}
+          </span>
+          <span
+            className="hidden sm:block "
+            title={`Namespace for ${validCheck?.name}`}
+            style={{ paddingTop: "1px" }}
+          >
+            <Badge text={validCheck?.namespace} />
+          </span>
+        </div>
+        {true && (
+          <div
+            title={`Endpoint for ${validCheck?.name}`}
+            className="text-sm text-gray-400 mt-0.5 overflow-x-hidden overflow-ellipsis break-all"
+          >
+            {validCheck?.endpoint}
+          </div>
+        )}
+        <span
+          className="block sm:hidden mt-2"
+          title={`Namespace for ${validCheck?.name}`}
+        >
+          <Badge text={validCheck?.namespace} />
+        </span>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Canary/CanaryPopup/DetailField.js b/src/components/Canary/CanaryPopup/DetailField.js
new file mode 100644
index 000000000..f1c414485
--- /dev/null
+++ b/src/components/Canary/CanaryPopup/DetailField.js
@@ -0,0 +1,14 @@
+import React from "react";
+
+export function DetailField({ label, value, className, ...rest }) {
+  return (
+    <div className={`flex flex-col flex-shrink-0 pr-6 ${className}`} {...rest}>
+      <div className="text-sm font-medium text-gray-500 break-all overflow-hidden overflow-ellipsis">
+        {label}
+      </div>
+      <div className="mt-1 text-sm text-gray-900 break-all overflow-hidden overflow-ellipsis">
+        {value}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Canary/CanaryPopup/StatusHistory.js b/src/components/Canary/CanaryPopup/StatusHistory.js
new file mode 100644
index 000000000..30783b1eb
--- /dev/null
+++ b/src/components/Canary/CanaryPopup/StatusHistory.js
@@ -0,0 +1,44 @@
+import React from "react";
+import { format } from "timeago.js";
+import { CanaryStatus, Duration } from "../renderers";
+import { isEmpty } from "../utils";
+import { Table } from "../../Table";
+
+export function StatusHistory({ check, sticky = "false" }) {
+  const statii = check
+    ? check.checkStatuses != null
+      ? check.checkStatuses
+      : []
+    : [];
+  const data = [];
+  statii.forEach((status) => {
+    data.push({
+      key: `${check.key}.${check.description}`,
+      age: format(`${status.time} UTC`),
+      message: (
+        <>
+          <CanaryStatus status={status} /> {status.message}{" "}
+          {!isEmpty(status.error) &&
+            status.error.split("\n").map((item) => (
+              <>
+                {item}
+                <br />
+              </>
+            ))}
+        </>
+      ),
+      duration: <Duration ms={status.duration} />
+    });
+  });
+
+  return (
+    check && (
+      <Table
+        id={`${check.key}-table`}
+        data={data}
+        columns={["Age", "Duration", "Message"]}
+        sticky={sticky}
+      />
+    )
+  );
+}
diff --git a/src/components/Canary/CanaryPopup/index.js b/src/components/Canary/CanaryPopup/index.js
deleted file mode 100644
index 3b4dc80b8..000000000
--- a/src/components/Canary/CanaryPopup/index.js
+++ /dev/null
@@ -1,345 +0,0 @@
-import React, { useState } from "react";
-import { format } from "timeago.js";
-import { usePrevious } from "../../../utils/hooks";
-import { Badge } from "../../Badge";
-import { Icon } from "../../Icon";
-import { CanaryStatus, Duration, toFormattedDuration } from "../renderers";
-import { AccordionBox } from "../../AccordionBox";
-import { Table } from "../../Table";
-import { isEmpty } from "../utils";
-import {
-  capitalizeFirstLetter,
-  toFixedIfNecessary
-} from "../../../utils/common";
-import styles from "../index.module.css";
-
-export function CheckTitle({ check, className, ...rest }) {
-  const prevCheck = usePrevious(check);
-  const validCheck = check || prevCheck;
-
-  return (
-    <div className={`flex flex-row ${className}`} {...rest}>
-      <div className="w-14 flex-shrink-0 pr-3">
-        <Icon
-          name={validCheck?.icon || validCheck?.type}
-          className="w-full h-12"
-          size="2xl"
-        />
-      </div>
-      <div className="overflow-hidden mr-10">
-        <div className="flex flex-row items-center">
-          <span
-            title={validCheck?.name}
-            className="text-gray-800 text-2xl font-semibold whitespace-nowrap overflow-ellipsis overflow-hidden pr-4"
-          >
-            {validCheck?.name}
-          </span>
-          <span
-            className="hidden sm:block "
-            title={`Namespace for ${validCheck?.name}`}
-            style={{ paddingTop: "1px" }}
-          >
-            <Badge text={validCheck?.namespace} />
-          </span>
-        </div>
-        {true && (
-          <div
-            title={`Endpoint for ${validCheck?.name}`}
-            className="text-sm text-gray-400 mt-0.5 overflow-x-hidden overflow-ellipsis break-all"
-          >
-            {validCheck?.endpoint}
-          </div>
-        )}
-        <span
-          className="block sm:hidden mt-2"
-          title={`Namespace for ${validCheck?.name}`}
-        >
-          <Badge text={validCheck?.namespace} />
-        </span>
-      </div>
-    </div>
-  );
-}
-
-export function CheckDetails({ check, ...rest }) {
-  const prevCheck = usePrevious(check);
-  const validCheck = check || prevCheck;
-
-  const [val, unit] = toFormattedDuration(validCheck?.latency?.rolling1h);
-  const latencyValue = validCheck?.latency?.rolling1h ? `${val}${unit}` : "-";
-  const uptimeValue = toFixedIfNecessary(getUptimePercentage(validCheck), 2);
-  const validUptime =
-    !Number.isNaN(validCheck?.uptime?.passed) &&
-    !Number.isNaN(validCheck?.uptime?.failed);
-  const severityValue = validCheck?.severity || "-";
-  const statusHistoryList = validCheck?.checkStatuses;
-
-  const details = {
-    Name:
-      validCheck?.name || validCheck?.canaryName || validCheck?.endpoint || "-",
-    Type: validCheck?.type || "-",
-    Labels: (
-      <>
-        {validCheck?.labels &&
-          Object.entries(validCheck?.labels).map((entry) => {
-            const key = entry[0];
-            return <Badge className="mr-1 mb-1" key={key} text={key} />;
-          })}
-      </>
-    ),
-    Owner: validCheck?.owner || "-",
-    Interval: validCheck?.interval || "-",
-    Location: validCheck?.location || "-",
-    Schedule: validCheck?.schedule || "-"
-  };
-
-  return (
-    <div {...rest}>
-      {/* stats section */}
-      <div className="flex flex-row flex-wrap mb-2">
-        <CheckStat
-          containerClass="w-52 mb-4"
-          title="Uptime"
-          value={
-            !Number.isNaN(uptimeValue)
-              ? `${toFixedIfNecessary(uptimeValue, 2)}%`
-              : "-"
-          }
-          append={
-            validUptime &&
-            !Number.isNaN(uptimeValue) && (
-              <div className="flex flex-col justify-center mx-2 mt-0.5">
-                <span className="text-xs text-green-700 ">
-                  {validCheck?.uptime?.passed} passed
-                </span>
-                <span className="text-xs text-red-600">
-                  {validCheck?.uptime?.failed} failed
-                </span>
-              </div>
-            )
-          }
-        />
-        <CheckStat
-          containerClass="w-52 mb-4"
-          title="Latency"
-          value={latencyValue}
-        />
-        <CheckStat
-          containerClass="w-52 mb-4"
-          title="Severity"
-          value={capitalizeFirstLetter(severityValue)}
-        />
-      </div>
-      {/* chart section */}
-      <div className="mb-6">
-        <div className="flex justify-between items-center mb-2">
-          <span className="text-lg font-medium">Health overview</span>
-          <span className="text-sm font-medium">(time dropdown)</span>
-        </div>
-        <div className="bg-gray-100 w-full h-52" />
-      </div>
-      <PopupTabs
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          overflowY: "hidden"
-        }}
-        contentStyle={{
-          marginTop: "-1px",
-          display: "flex",
-          flexDirection: "column",
-          overflowY: "hidden"
-        }}
-        tabs={{
-          statusHistory: {
-            label: "Status history",
-            content: (
-              <div
-                key="status-history"
-                className={`border border-b-0 border-gray-300 overflow-hidden overflow-y-auto relative -mb-px ${styles.appleScrollbar}`}
-              >
-                {statusHistoryList && statusHistoryList.length > 0 ? (
-                  <StatusHistory check={validCheck} sticky />
-                ) : (
-                  <div className="h-64 flex items-center justify-center text-gray-400 text-md">
-                    No status history available
-                  </div>
-                )}
-              </div>
-            ),
-            class: "flex flex-col overflow-y-hidden border-b border-gray-300"
-          },
-          checkDetails: {
-            label: "Check details",
-            content: (
-              <div key="check-details" className="px-6 py-6">
-                <AccordionBox
-                  content={
-                    <div className="flex flex-row flex-wrap">
-                      {Object.entries(details).map(([label, value]) => (
-                        <DetailField
-                          key={label}
-                          className="w-1/2 mb-3 whitespace-nowrap"
-                          label={label}
-                          value={value}
-                        />
-                      ))}
-                    </div>
-                  }
-                />
-              </div>
-            ),
-            class: `flex flex-col overflow-y-auto  border border-gray-300 ${styles.appleScrollbar}`
-          }
-        }}
-      />
-    </div>
-  );
-}
-
-function CheckStat({
-  title,
-  value,
-  append,
-  containerClass,
-  className,
-  ...rest
-}) {
-  return (
-    <div className={`flex flex-col ${containerClass} ${className}`} {...rest}>
-      <div className="text-sm font-medium text-gray-500">{title}</div>
-      <div className="flex">
-        <span className="text-4xl font-bold">{value}</span>
-        {append}
-      </div>
-    </div>
-  );
-}
-
-export function getUptimePercentage(check) {
-  const uptime = check?.uptime;
-  const passed = uptime?.passed;
-  const failed = uptime?.failed;
-  const valid = !Number.isNaN(passed) && !Number.isNaN(failed);
-  return valid ? (passed / (passed + failed)) * 100 : null;
-}
-
-function DetailField({ label, value, className, ...rest }) {
-  return (
-    <div className={`flex flex-col flex-shrink-0 pr-6 ${className}`} {...rest}>
-      <div className="text-sm font-medium text-gray-500 break-all overflow-hidden overflow-ellipsis">
-        {label}
-      </div>
-      <div className="mt-1 text-sm text-gray-900 break-all overflow-hidden overflow-ellipsis">
-        {value}
-      </div>
-    </div>
-  );
-}
-
-function StatusHistory({ check, sticky = "false" }) {
-  const statii = check
-    ? check.checkStatuses != null
-      ? check.checkStatuses
-      : []
-    : [];
-  const data = [];
-  statii.forEach((status) => {
-    data.push({
-      key: `${check.key}.${check.description}`,
-      age: format(`${status.time} UTC`),
-      message: (
-        <>
-          <CanaryStatus status={status} /> {status.message}{" "}
-          {!isEmpty(status.error) &&
-            status.error.split("\n").map((item) => (
-              <>
-                {item}
-                <br />
-              </>
-            ))}
-        </>
-      ),
-      duration: <Duration ms={status.duration} />
-    });
-  });
-
-  return (
-    check && (
-      <Table
-        id={`${check.key}-table`}
-        data={data}
-        columns={["Age", "Duration", "Message"]}
-        sticky={sticky}
-      />
-    )
-  );
-}
-
-export function PopupTabs({
-  tabs,
-  contentStyle,
-  contentClass,
-  variant = "line",
-  ...rest
-}) {
-  const [selected, setSelected] = useState(Object.keys(tabs)[0]);
-
-  const buttonStyles = {
-    line: {
-      container: "flex space-x-4 border-b border-gray-300 z-10",
-      button: "border-b-2 font-medium text-sm py-2 px-1",
-      active: "border-indigo-500 text-indigo-600",
-      inactive:
-        "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
-    },
-    simple: {
-      container: "flex flex-wrap border-b border-gray-300 z-10",
-      button:
-        "-mb-px z-10 bg-white px-4 py-2 font-medium text-sm rounded-t-md border-gray-300 hover:text-gray-900",
-      active: "text-gray-900 border",
-      inactive: "text-gray-500 border-b",
-      styles: {
-        active: {
-          borderBottomColor: "white"
-        }
-      }
-    }
-  };
-  return (
-    <div {...rest}>
-      <div className={buttonStyles[variant].container} aria-label="Tabs">
-        {Object.entries(tabs).map(([key, tab]) => (
-          <button
-            type="button"
-            key={key}
-            onClick={() => setSelected(key)}
-            className={`${buttonStyles[variant].button} ${
-              selected === key
-                ? buttonStyles[variant].active
-                : buttonStyles[variant].inactive
-            }`}
-            style={{
-              ...buttonStyles[variant]?.styles?.button,
-              ...(selected === key
-                ? buttonStyles[variant]?.styles?.active
-                : buttonStyles[variant]?.styles?.inactive)
-            }}
-          >
-            {tab.label}
-          </button>
-        ))}
-      </div>
-      <div style={contentStyle} className={contentClass}>
-        {Object.entries(tabs).map(
-          ([key, tab]) =>
-            selected === key && (
-              <div className={tab.class} key={key}>
-                {tab.content}
-              </div>
-            )
-        )}
-      </div>
-    </div>
-  );
-}
diff --git a/src/components/Canary/CanaryPopup/tabs.js b/src/components/Canary/CanaryPopup/tabs.js
new file mode 100644
index 000000000..0c020144f
--- /dev/null
+++ b/src/components/Canary/CanaryPopup/tabs.js
@@ -0,0 +1,69 @@
+import React, { useState } from "react";
+
+export function PopupTabs({
+  tabs,
+  contentStyle,
+  contentClass,
+  variant = "line",
+  ...rest
+}) {
+  const [selected, setSelected] = useState(Object.keys(tabs)[0]);
+
+  const buttonStyles = {
+    line: {
+      container: "flex space-x-4 border-b border-gray-300 z-10",
+      button: "border-b-2 font-medium text-sm py-2 px-1",
+      active: "border-indigo-500 text-indigo-600",
+      inactive:
+        "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
+    },
+    simple: {
+      container: "flex flex-wrap border-b border-gray-300 z-10",
+      button:
+        "-mb-px z-10 bg-white px-4 py-2 font-medium text-sm rounded-t-md border-gray-300 hover:text-gray-900",
+      active: "text-gray-900 border",
+      inactive: "text-gray-500 border-b",
+      styles: {
+        active: {
+          borderBottomColor: "white"
+        }
+      }
+    }
+  };
+  return (
+    <div {...rest}>
+      <div className={buttonStyles[variant].container} aria-label="Tabs">
+        {Object.entries(tabs).map(([key, tab]) => (
+          <button
+            type="button"
+            key={key}
+            onClick={() => setSelected(key)}
+            className={`${buttonStyles[variant].button} ${
+              selected === key
+                ? buttonStyles[variant].active
+                : buttonStyles[variant].inactive
+            }`}
+            style={{
+              ...buttonStyles[variant]?.styles?.button,
+              ...(selected === key
+                ? buttonStyles[variant]?.styles?.active
+                : buttonStyles[variant]?.styles?.inactive)
+            }}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </div>
+      <div style={contentStyle} className={contentClass}>
+        {Object.entries(tabs).map(
+          ([key, tab]) =>
+            selected === key && (
+              <div className={tab.class} key={key}>
+                {tab.content}
+              </div>
+            )
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Canary/CanaryPopup/utils.js b/src/components/Canary/CanaryPopup/utils.js
new file mode 100644
index 000000000..56f4c5480
--- /dev/null
+++ b/src/components/Canary/CanaryPopup/utils.js
@@ -0,0 +1,7 @@
+export function getUptimePercentage(check) {
+  const uptime = check?.uptime;
+  const passed = uptime?.passed;
+  const failed = uptime?.failed;
+  const valid = !Number.isNaN(passed) && !Number.isNaN(failed);
+  return valid ? (passed / (passed + failed)) * 100 : null;
+}
diff --git a/src/components/Canary/index.js b/src/components/Canary/index.js
index fe9ccf0b8..f52c451a5 100644
--- a/src/components/Canary/index.js
+++ b/src/components/Canary/index.js
@@ -25,7 +25,8 @@ import { SidebarSubPanel } from "./SidebarSubPanel";
 import { RefreshIntervalDropdown } from "../Dropdown/RefreshIntervalDropdown";
 import { getLocalItem, setLocalItem } from "../../utils/storage";
 import { Modal } from "../Modal";
-import { CheckDetails, CheckTitle } from "./CanaryPopup";
+import { CheckTitle } from "./CanaryPopup/CheckTitle";
+import { CheckDetails } from "./CanaryPopup/CheckDetails";
 
 import styles from "./index.module.css";