diff --git a/src/components/Canary/grouping.ts b/src/components/Canary/grouping.ts index b28279c901..e9973fbd09 100644 --- a/src/components/Canary/grouping.ts +++ b/src/components/Canary/grouping.ts @@ -33,6 +33,43 @@ export function getGroupedChecks(checks: HealthCheck[] = [], groupBy?: string) { return groupedChecks; } + if (groupBy === "latency") { + const groupedChecks: Record = {}; + 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 = {}; + 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 = { Others: [] }; const groupNames = ["Others"]; checks.forEach((check) => { diff --git a/src/components/Dropdown/GroupByDropdown.tsx b/src/components/Dropdown/GroupByDropdown.tsx index 1ae69a2fed..80df6184b2 100644 --- a/src/components/Dropdown/GroupByDropdown.tsx +++ b/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: , + description: "Latency", + value: "latency", + labelValue: null, + key: "latency" + }, + uptime: { + id: "uptime", + name: "uptime", + icon: , + description: "Uptime", + value: "uptime", + labelValue: null, + key: "uptime" } };