Merge pull request #122 from appsignal/fix-nan-uptime

Fix `NaN` uptime percentage
appsignal · Aug 19, 2024 · 9b33957 · 9b33957
2 parents 1e1b863 + a4675ac
commit 9b33957
Show file tree

Hide file tree

Showing 7 changed files with 1,205 additions and 1 deletion.
diff --git a/components/Outages/Outages.js b/components/Outages/Outages.js
@@ -1,3 +1,4 @@
+import PropTypes from "prop-types";
 import OutagesByDay from "../OutagesByDay";
 import { timeseriesByDay } from "../../utils";
 
@@ -23,4 +24,9 @@ const Outages = ({ timeseries, regions }) => {
   }
 };
 
+Outages.propTypes = {
+  timeseries: PropTypes.array.isRequired,
+  regions: PropTypes.array.isRequired,
+};
+
 export default Outages;
diff --git a/components/UptimeMonitor/UptimeMonitor.js b/components/UptimeMonitor/UptimeMonitor.js
@@ -41,6 +41,10 @@ export const calculateUptime = (timeseries, regions) => {
   const downtimePerRegion = [];
 
   regions.map((region) => {
+    if (timeSeriesLast30Days.length == 0) {
+      return 0;
+    }
+
     const downtimeInMinutes = timeSeriesLast30Days.reduce((acc, item) => {
       return acc + item.values[region];
     }, 0);
@@ -63,6 +67,10 @@ export const calculateUptime = (timeseries, regions) => {
 };
 
 export const averageDowntimeOverRegions = (downtimePerRegion) => {
+  if (Object.keys(downtimePerRegion).length == 0) {
+    return 0;
+  }
+
   const average =
     Object.values(downtimePerRegion).reduce((acc, item) => {
       return (acc += item.percentage);

diff --git a/components/UptimeMonitor/UptimeMonitor.test.js b/components/UptimeMonitor/UptimeMonitor.test.js
@@ -1,6 +1,9 @@
 import { render, screen, waitFor } from "@testing-library/react";
 
-import UptimeMonitor, { UptimeMonitorLoading } from "./UptimeMonitor";
+import UptimeMonitor, {
+  UptimeMonitorLoading,
+  averageDowntimeOverRegions,
+} from "./UptimeMonitor";
 import statusPageMock from "../../mocks/status_pages/appsignal.json";
 
 const build = (props = {}) => {
@@ -67,4 +70,10 @@ describe("UptimeMonitorLoading", () => {
     const loadingDots = screen.getAllByTestId("loadingDot");
     expect(loadingDots.length).toEqual(30);
   });
+
+  describe("averageDowntimeOverRegions", () => {
+    test("returns 0 if no regions are present", () => {
+      expect(averageDowntimeOverRegions([])).toEqual(0);
+    });
+  });
 });
diff --git a/components/UptimeMonitors/__snapshots__/UptimeMonitors.test.js.snap b/components/UptimeMonitors/__snapshots__/UptimeMonitors.test.js.snap
@@ -458,6 +458,155 @@ exports[`UptimeMonitors renders without problems 1`] = `
             />
           </div>
         </div>
+        <div
+          class="px-6 py-5 space-y-3"
+          data-testid="UptimeMonitor"
+        >
+          <div
+            class="sm:flex justify-between"
+          >
+            <h2>
+              <button
+                class="c_h-heading focus:outline-none"
+              >
+                only one metric
+                 
+              </button>
+            </h2>
+            <p
+              class="mt-1 sm:mt-0 text-gray-700"
+            >
+              Monitoring from 
+              1
+               
+              location
+            </p>
+          </div>
+          <div
+            class="flex space-x-1"
+          >
+            <div
+              class="h-8 flex-grow animate-pulse bg-gray-200 rounded"
+              data-testid="loadingDot"
+            />
+            <div
+              class="h-8 flex-grow animate-pulse bg-gray-200 rounded"
+              data-testid="loadingDot"
+            />
+            <div
+              class="h-8 flex-grow animate-pulse bg-gray-200 rounded"
+              data-testid="loadingDot"
+            />
+            <div
+              class="h-8 flex-grow animate-pulse bg-gray-200 rounded"
+              data-testid="loadingDot"
+            />
+            <div
+              class="h-8 flex-grow animate-pulse bg-gray-200 rounded"
+              data-testid="loadingDot"
+            />
+            <div
+              class="h-8 flex-grow animate-pulse bg-gray-200 rounded"
+              data-testid="loadingDot"
+            />
+            <div
+              class="h-8 flex-grow animate-pulse bg-gray-200 rounded"
+              data-testid="loadingDot"
+            />
+            <div
+              class="h-8 flex-grow animate-pulse bg-gray-200 rounded"
+              data-testid="loadingDot"
+            />
+            <div
+              class="h-8 flex-grow animate-pulse bg-gray-200 rounded"
+              data-testid="loadingDot"
+            />
+            <div
+              class="h-8 flex-grow animate-pulse bg-gray-200 rounded"
+              data-testid="loadingDot"
+            />
+            <div
+              class="h-8 flex-grow animate-pulse bg-gray-200 rounded"
+              data-testid="loadingDot"
+            />
+            <div
+              class="h-8 flex-grow animate-pulse bg-gray-200 rounded"
+              data-testid="loadingDot"
+            />
+            <div
+              class="h-8 flex-grow animate-pulse bg-gray-200 rounded"
+              data-testid="loadingDot"
+            />
+            <div
+              class="h-8 flex-grow animate-pulse bg-gray-200 rounded"
+              data-testid="loadingDot"
+            />
+            <div
+              class="h-8 flex-grow animate-pulse bg-gray-200 rounded"
+              data-testid="loadingDot"
+            />
+            <div
+              class="h-8 flex-grow animate-pulse bg-gray-200 rounded"
+              data-testid="loadingDot"
+            />
+            <div
+              class="h-8 flex-grow animate-pulse bg-gray-200 rounded"
+              data-testid="loadingDot"
+            />
+            <div
+              class="h-8 flex-grow animate-pulse bg-gray-200 rounded"
+              data-testid="loadingDot"
+            />
+            <div
+              class="h-8 flex-grow animate-pulse bg-gray-200 rounded"
+              data-testid="loadingDot"
+            />
+            <div
+              class="h-8 flex-grow animate-pulse bg-gray-200 rounded"
+              data-testid="loadingDot"
+            />
+            <div
+              class="h-8 flex-grow animate-pulse bg-gray-200 rounded"
+              data-testid="loadingDot"
+            />
+            <div
+              class="h-8 flex-grow animate-pulse bg-gray-200 rounded"
+              data-testid="loadingDot"
+            />
+            <div
+              class="h-8 flex-grow animate-pulse bg-gray-200 rounded"
+              data-testid="loadingDot"
+            />
+            <div
+              class="h-8 flex-grow animate-pulse bg-gray-200 rounded"
+              data-testid="loadingDot"
+            />
+            <div
+              class="h-8 flex-grow animate-pulse bg-gray-200 rounded"
+              data-testid="loadingDot"
+            />
+            <div
+              class="h-8 flex-grow animate-pulse bg-gray-200 rounded"
+              data-testid="loadingDot"
+            />
+            <div
+              class="h-8 flex-grow animate-pulse bg-gray-200 rounded"
+              data-testid="loadingDot"
+            />
+            <div
+              class="h-8 flex-grow animate-pulse bg-gray-200 rounded"
+              data-testid="loadingDot"
+            />
+            <div
+              class="h-8 flex-grow animate-pulse bg-gray-200 rounded"
+              data-testid="loadingDot"
+            />
+            <div
+              class="h-8 flex-grow animate-pulse bg-gray-200 rounded"
+              data-testid="loadingDot"
+            />
+          </div>
+        </div>
       </div>
     </div>
   </section>

diff --git a/mocks/handlers.js b/mocks/handlers.js
@@ -3,11 +3,13 @@ import { rest } from "msw";
 const alwaysDown = require("./monitors/always-down.json");
 const blog = require("./monitors/blog.json");
 const homepage = require("./monitors/homepage.json");
+const onlyOneMetric = require("./monitors/only-one-metric.json");
 
 const monitorMapping = {
   "always-down": alwaysDown,
   blog,
   homepage,
+  "only-one-metric": onlyOneMetric,
 };
 
 export const handlers = [