diff --git a/src/components/Canary/CanaryCards.tsx b/src/components/Canary/CanaryCards.tsx index dd609905b..9cc3b64ea 100644 --- a/src/components/Canary/CanaryCards.tsx +++ b/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) { >
- + <CanaryCheckName + title={GetName(check)} + icon={check.icon || check.type} + /> </span> <div className="float-right mr-2"> <StatusList check={check} /> diff --git a/src/components/Canary/Columns/index.tsx b/src/components/Canary/Columns/index.tsx index fcd0289a3..5e5e91dad 100644 --- a/src/components/Canary/Columns/index.tsx +++ b/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} diff --git a/src/components/Canary/renderers.tsx b/src/components/Canary/renderers.tsx index 182eac64d..fda97f7e3 100644 --- a/src/components/Canary/renderers.tsx +++ b/src/components/Canary/renderers.tsx @@ -120,13 +120,17 @@ 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) { return ( <> {icon && <Icon name={icon} className="h-6 w-auto" />}