feat: treat / in names as grouping

Closes #1453

fix: group by / instead of -

chore: normalize group checks

fix: fix issue reading original name

src/components/Canary/Rows/lib.ts

@@ -1,8 +1,8 @@
-import { GetName } from "../data";
-import { removeNamespacePrefix } from "../utils";
+import { HealthCheck } from "../../../api/types/health";
 import { isPlainObject } from "../../../lib/isPlainObject";
 import { aggregate } from "../aggregate";
-import { HealthCheck } from "../../../api/types/health";
+import { GetName } from "../data";
+import { removeNamespacePrefix } from "../utils";
 
 export function makeRow({
   row = {},

src/components/Canary/grouping.ts

@@ -1,12 +1,9 @@
+import { update } from "lodash";
 import { HealthCheck } from "../../api/types/health";
 
 // process table groupings, given a list of checks and a 'groupBy' object
 export function getGroupedChecks(checks: HealthCheck[] = [], groupBy?: string) {
-  if (
-    groupBy === "name" ||
-    groupBy === "description" ||
-    groupBy === "canary_name"
-  ) {
+  if (groupBy === "description" || groupBy === "canary_name") {
     const groupedChecks: Record<string, HealthCheck[]> = {};
     const groupNames: string[] = [];
     checks.forEach((check) => {
@@ -20,6 +17,61 @@ export function getGroupedChecks(checks: HealthCheck[] = [], groupBy?: string) {
     return groupedChecks;
   }
 
+  if (groupBy === "name") {
+    // when grouping by name, we want to split name by /, and group each part
+    const groupedChecks: Record<string, HealthCheck[]> = {};
+    checks.forEach((check) => {
+      const value = check[groupBy] || "(none)";
+      if (!value.includes("/")) {
+        update(groupedChecks, value, (current) => {
+          if (!current) {
+            return [check];
+          }
+          return [...current, check];
+        });
+        return;
+      }
+      const path = value.split("/")[0];
+      update(groupedChecks, path, (current) => {
+        const updatedCheck = {
+          ...check,
+          // if the name is a path, we want to show the last part of the path
+          name: value.split("/", 1)[1],
+          originalName: value
+        };
+        if (!current) {
+          return [updatedCheck];
+        }
+        return [...current, updatedCheck];
+      });
+    });
+
+    const normalizedGroupedChecks: Record<string, HealthCheck[]> = {};
+
+    Object.entries(groupedChecks).forEach(([key, value]) => {
+      // if there are multiple checks with the same name, we show the name with
+      // the prefix of the path
+      if (value.length > 1) {
+        normalizedGroupedChecks[key] = value;
+        return;
+      }
+      // if the name is a path, and there is only one check with that name, we
+      // want to show the full name as it won't be grouped
+      if ((value?.[0] as any)?.originalName?.includes("/")) {
+        normalizedGroupedChecks[key] = value.map((check) => ({
+          ...check,
+          // replace the name with the full path
+          name: (check as any).originalName
+        }));
+        return;
+      }
+      // if the name is not a path, we do nothing
+      normalizedGroupedChecks[key] = value;
+    });
+
+    return normalizedGroupedChecks;
+  }
+
   const groupedChecks: Record<string, HealthCheck[]> = { Others: [] };
   const groupNames = ["Others"];
   checks.forEach((check) => {