chore: add job type icon (#1025)

* chore: add job type icon

* ci: apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

apps/web/src/app/app/[workspaceSlug]/(dashboard)/monitors/[id]/layout.tsx

@@ -4,6 +4,7 @@ import { Badge } from "@openstatus/ui/src/components/badge";
 
 import { Header } from "@/components/dashboard/header";
 import AppPageWithSidebarLayout from "@/components/layout/app-page-with-sidebar-layout";
+import { JobTypeIconWithTooltip } from "@/components/monitor/job-type-icon-with-tooltip";
 import { StatusDotWithTooltip } from "@/components/monitor/status-dot-with-tooltip";
 import { TagBadgeWithTooltip } from "@/components/monitor/tag-badge-with-tooltip";
 import { api } from "@/trpc/server";
@@ -63,6 +64,8 @@ export default async function Layout({
             <span className="text-sm">
               every <code>{monitor.periodicity}</code>
             </span>
+            <span className="text-muted-foreground/50 text-xs">•</span>
+            <JobTypeIconWithTooltip jobType={monitor.jobType} />
             {monitor.public ? (
               <>
                 <span className="text-muted-foreground/50 text-xs">•</span>

apps/web/src/components/icons.tsx

@@ -18,7 +18,7 @@ import {
   FileClock,
   Fingerprint,
   Gauge,
-  Globe2,
+  Globe,
   Hammer,
   Hourglass,
   Image,
@@ -44,6 +44,7 @@ import {
   Ratio,
   Search,
   SearchCheck,
+  Server,
   Siren,
   Sparkles,
   SunMedium,
@@ -62,6 +63,7 @@ import {
 import type { LucideIcon, LucideProps } from "lucide-react";
 
 export type Icon = LucideIcon;
+export type IconProps = LucideProps;
 export type ValidIcon = keyof typeof Icons;
 
 export const Icons = {
@@ -86,7 +88,7 @@ export const Icons = {
   tag: Tag,
   trash: Trash,
   twitter: TwitterIcon,
-  globe: Globe2,
+  globe: Globe,
   plug: Plug,
   copy: Copy,
   check: Check,
@@ -124,6 +126,7 @@ export const Icons = {
   camera: Camera,
   "book-open-check": BookOpenCheck,
   info: Info,
+  server: Server,
   discord: ({ ...props }: LucideProps) => (
     <svg viewBox="0 0 640 512" {...props}>
       <path

apps/web/src/components/monitor/job-type-icon-with-tooltip.tsx

@@ -0,0 +1,46 @@
+import { cn } from "@/lib/utils";
+import type { Monitor } from "@openstatus/db/src/schema";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@openstatus/ui/src/components/tooltip";
+import { type IconProps, Icons, type ValidIcon } from "../icons";
+
+// TODO: extend once we have more job types
+function getIcon(jobType: Monitor["jobType"]): ValidIcon {
+  switch (jobType) {
+    case "http":
+      return "globe";
+    case "tcp":
+      return "server";
+    default:
+      return "cog";
+  }
+}
+
+interface JobTypeIconWithTooltipProps extends IconProps {
+  jobType: Monitor["jobType"];
+}
+
+export function JobTypeIconWithTooltip({
+  jobType,
+  className,
+  ...props
+}: JobTypeIconWithTooltipProps) {
+  const icon = getIcon(jobType);
+  const Icon = Icons[icon];
+  return (
+    <TooltipProvider delayDuration={50}>
+      <Tooltip>
+        <TooltipTrigger>
+          <Icon className={cn("h-3 w-3", className)} {...props} />
+        </TooltipTrigger>
+        <TooltipContent>
+          <p className="uppercase">{jobType}</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}