Fix NaN uptime percentage

This commit fixes an issue if there's no data for a region, it results in a `NaN` uptime percentage

* Return `0` when no regions with timeseries are present.

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;

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

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

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 = [