feat: add group by latency and uptime

Closes #1434

src/components/Canary/grouping.ts

@@ -33,6 +33,43 @@ export function getGroupedChecks(checks: HealthCheck[] = [], groupBy?: string) {
     return groupedChecks;
   }
 
+  if (groupBy === "latency") {
+    const groupedChecks: Record<string, HealthCheck[]> = {};
+    const groupNames: string[] = [];
+    checks.forEach((check) => {
+      const value = check[groupBy].p95
+        ? "p95"
+        : check[groupBy].p97
+        ? "p97"
+        : "p99" ?? "(unknown)";
+      if (groupNames.indexOf(value.toString()) === -1) {
+        groupNames.push(value.toString());
+        groupedChecks[value] = [];
+      }
+      groupedChecks[value].push(check);
+    });
+    return groupedChecks;
+  }
+
+  if (groupBy === "uptime") {
+    const groupedChecks: Record<string, HealthCheck[]> = {};
+    const groupNames: string[] = [];
+    checks.forEach((check) => {
+      const value =
+        (
+          (check[groupBy].passed /
+            (check[groupBy].failed + check[groupBy].passed)) *
+          100
+        ).toFixed() + "%" || "(unknown)";
+      if (groupNames.indexOf(value.toString()) === -1) {
+        groupNames.push(value.toString());
+        groupedChecks[value] = [];
+      }
+      groupedChecks[value].push(check);
+    });
+    return groupedChecks;
+  }
+
   const groupedChecks: Record<string, HealthCheck[]> = { Others: [] };
   const groupNames = ["Others"];
   checks.forEach((check) => {

src/components/Dropdown/GroupByDropdown.tsx

@@ -5,6 +5,9 @@ import { getLabelSelections } from "./lib/lists";
 import { ReactSelectDropdown } from "../ReactSelectDropdown";
 import { ComponentProps } from "react";
 import { HealthCheck } from "../../api/types/health";
+import { BsSpeedometer } from "react-icons/bs";
+import { FaClock } from "react-icons/fa";
+import { GoClock } from "react-icons/go";
 
 const defaultGroupSelections = {
   "no-group": {
@@ -42,6 +45,24 @@ const defaultGroupSelections = {
     value: "description",
     labelValue: null,
     key: "description"
+  },
+  latency: {
+    id: "latency",
+    name: "latency",
+    icon: <BsSpeedometer />,
+    description: "Latency",
+    value: "latency",
+    labelValue: null,
+    key: "latency"
+  },
+  uptime: {
+    id: "uptime",
+    name: "uptime",
+    icon: <GoClock />,
+    description: "Uptime",
+    value: "uptime",
+    labelValue: null,
+    key: "uptime"
   }
 };