2189-Add-spacing-around-and-graysacale-in-check-names

src/components/Canary/CanaryCards.tsx

@@ -1,7 +1,6 @@
-import React from "react";
-import { GetName } from "./data";
-import { Title, StatusList } from "./renderers";
 import { HealthCheck } from "../../api/types/health";
+import { GetName } from "./data";
+import { CanaryCheckName, StatusList } from "./renderers";
 
 type CanaryCardProps = {
   checks: HealthCheck[];
@@ -23,7 +22,10 @@ export function CanaryCards({ checks, onClick }: CanaryCardProps) {
           >
             <div className="flex-1 py-2 text-sm">
               <span className="truncate font-medium text-gray-900 hover:text-gray-600">
-                <Title title={GetName(check)} icon={check.icon || check.type} />
+                <CanaryCheckName
+                  title={GetName(check)}
+                  icon={check.icon || check.type}
+                />
               </span>
               <div className="float-right mr-2">
                 <StatusList check={check} />

src/components/Canary/Columns/index.tsx

@@ -6,7 +6,13 @@ import dayjs from "dayjs";
 import { Status } from "../../Status";
 import { GetName } from "../data";
 import style from "../index.module.css";
-import { Duration, Percentage, StatusList, Title, empty } from "../renderers";
+import {
+  CanaryCheckName,
+  Duration,
+  empty,
+  Percentage,
+  StatusList
+} from "../renderers";
 import { removeNamespacePrefix } from "../utils";
 import {
   getHealthPercentageScore,
@@ -131,7 +137,7 @@ export function TitleCell({
         //   paddingLeft: `${row.depth * 1.1}rem`
         // }}
       >
-        <Title
+        <CanaryCheckName
           title={title}
           icon={rowValues.icon || rowValues.type}
           isDeleted={!!row.original.deleted_at}

src/components/Canary/renderers.tsx

@@ -120,17 +120,52 @@ export function Percentage({ val, upper, lower }: PercentageProps) {
   );
 }
 
-type TitleProps = {
+type CanaryCheckNameProps = {
   icon?: string;
   title: string;
   isDeleted?: boolean;
 };
 
-export function Title({ icon, title, isDeleted }: TitleProps) {
+export function CanaryCheckName({
+  icon,
+  title,
+  isDeleted
+}: CanaryCheckNameProps) {
+  const hasSlash = title.includes("/");
+
+  if (hasSlash) {
+    const parts = title.split("/");
+    return (
+      <>
+        {icon && <Icon name={icon} className="h-6 w-auto pr-1" />}
+        {parts.map((part, idx) => {
+          // if not last part
+          if (idx !== parts.length - 1) {
+            return (
+              <>
+                <span key={part} className="text-sm text-gray-500">
+                  {part}
+                </span>
+                <span className="text-light px-0.5 text-gray-500">/</span>
+              </>
+            );
+          }
+          // last part
+          return (
+            <span key={part} className="text-sm">
+              {part}
+            </span>
+          );
+        })}
+        {isDeleted && <TbTrash />}
+      </>
+    );
+  }
+
   return (
     <>
       {icon && <Icon name={icon} className="h-6 w-auto" />}
-      <span className="pl-1 text-sm">{title}</span> {isDeleted && <TbTrash />}
+      <span className="pl-1 text-sm">{title} </span> {isDeleted && <TbTrash />}
     </>
   );
 }