🚨 [security] Upgrade next: 11.1.1 → 12.1.6 (major)

components/Outages/Outages.js

@@ -1,10 +1,16 @@
 import OutagesByDay from "../OutagesByDay";
 import { timeseriesByDay } from "../../utils";
 
-const Outages = ({ timeseries, regions }) => {
+const DEFAULT_THRESHOLD = 5;
+
+const Outages = ({ timeseries, regions, threshold }) => {
+  if (threshold === null) threshold = DEFAULT_THRESHOLD;
   const filteredTimeseries = timeseriesByDay(timeseries, regions).filter(
     (timeserie) => {
-      return Object.values(timeserie.values).reduce((a, b) => a + b, 0) > 0;
+      return (
+        Object.values(timeserie.values).reduce((a, b) => Math.max(a, b)) >
+        threshold
+      );
     }
   );
 
@@ -13,7 +19,7 @@ const Outages = ({ timeseries, regions }) => {
       <ul className="space-y-6">
         {filteredTimeseries.reverse().map((timeserie) => (
           <li key={timeserie.timestamp}>
-            <OutagesByDay timeserie={timeserie} />
+            <OutagesByDay timeserie={timeserie} threshold={threshold} />
           </li>
         ))}
       </ul>

components/Outages/Outages.test.js

@@ -9,7 +9,11 @@ const regions = ["europe", "asia-pacific", "south-america", "north-america"];
 describe("Outages", () => {
   test("renders without errors", () => {
     const { container } = render(
-      <Outages timeseries={homepageMock.timeseries} regions={regions} />
+      <Outages
+        timeseries={homepageMock.timeseries}
+        regions={regions}
+        threshold={0}
+      />
     );
 
     expect(container).toMatchSnapshot();
@@ -18,7 +22,11 @@ describe("Outages", () => {
   describe("renders only the timeseries that had an outage", () => {
     test("with a small set of outages", () => {
       render(
-        <Outages timeseries={homepageMock.timeseries} regions={regions} />
+        <Outages
+          timeseries={homepageMock.timeseries}
+          regions={regions}
+          threshold={0}
+        />
       );
 
       const outages = screen.getAllByTestId("outage");
@@ -27,7 +35,11 @@ describe("Outages", () => {
 
     test("with a full set of outages", () => {
       render(
-        <Outages timeseries={alwaysDownMock.timeseries} regions={regions} />
+        <Outages
+          timeseries={alwaysDownMock.timeseries}
+          regions={regions}
+          threshold={0}
+        />
       );
 
       const outages = screen.getAllByTestId("outage");

components/OutagesByDay/OutagesByDay.js

@@ -2,14 +2,14 @@ import PropTypes from "prop-types";
 
 import Outage from "../Outage";
 
-const OutagesByDay = ({ timeserie }) => {
+const OutagesByDay = ({ timeserie, threshold }) => {
   return (
     <>
       <h3 className="text-gray-700 mb-4">
         {new Date(timeserie.timestamp).toLocaleDateString()}
       </h3>
       {Object.keys(timeserie.values)
-        .filter((region) => timeserie.values[region] > 0)
+        .filter((region) => timeserie.values[region] > threshold)
         .map((region) => (
           <Outage
             outage={{ region, minutes: timeserie.values[region] }}
@@ -22,6 +22,7 @@ const OutagesByDay = ({ timeserie }) => {
 
 OutagesByDay.propTypes = {
   timeserie: PropTypes.object.isRequired,
+  threshold: PropTypes.number,
 };
 
 export default OutagesByDay;

components/OutagesOverlay/OutagesOverlay.js

@@ -5,7 +5,14 @@ import { faTimes } from "@fortawesome/free-solid-svg-icons";
 import Overlay from "../Overlay/Overlay";
 import Outages from "../Outages";
 
-const OutagesOverlay = ({ timeseries, regions, open, handleClose, title }) => {
+const OutagesOverlay = ({
+  timeseries,
+  regions,
+  open,
+  handleClose,
+  title,
+  threshold,
+}) => {
   return (
     <Overlay open={open}>
       <div className="flex justify-end">
@@ -18,7 +25,11 @@ const OutagesOverlay = ({ timeseries, regions, open, handleClose, title }) => {
           </div>
 
           <div className="p-6 self-strech overflow-y-auto">
-            <Outages timeseries={timeseries} regions={regions} />
+            <Outages
+              timeseries={timeseries}
+              regions={regions}
+              threshold={threshold}
+            />
           </div>
         </div>
       </div>
@@ -32,6 +43,7 @@ OutagesOverlay.propTypes = {
   handleClose: PropTypes.func.isRequired,
   title: PropTypes.string.isRequired,
   regions: PropTypes.array.isRequired,
+  threshold: PropTypes.number,
 };
 
 export default OutagesOverlay;

components/UptimeMonitor/UptimeMonitor.js

@@ -79,6 +79,7 @@ const UptimeMonitor = ({ uptimeMonitor, threshold }) => {
           handleClose={() => setOverlayOpen(false)}
           timeseries={monitor.timeseries}
           title={`All outages for ${uptimeMonitor.title}`}
+          threshold={threshold}
         />
       )}
     </>

package.json

@@ -22,7 +22,7 @@
     "autoprefixer": "^10.0.2",
     "dayjs": "^1.10.6",
     "msw": "^0.35.0",
-    "next": "11.1.1",
+    "next": "12.1.6",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-test-renderer": "^17.0.2",