openstatus.dev
Openstatus
www.openstatus.dev
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>
authored by
Maximilian Kaske
autofix-ci[bot]
and committed by
GitHub
ff99d321
26796044
+54
-2
+3
apps/web/src/app/app/[workspaceSlug]/(dashboard)/monitors/[id]/layout.tsx
+3
apps/web/src/app/app/[workspaceSlug]/(dashboard)/monitors/[id]/layout.tsx
···
4
4
5
5
import { Header } from "@/components/dashboard/header";
6
6
import AppPageWithSidebarLayout from "@/components/layout/app-page-with-sidebar-layout";
7
+
import { JobTypeIconWithTooltip } from "@/components/monitor/job-type-icon-with-tooltip";
7
8
import { StatusDotWithTooltip } from "@/components/monitor/status-dot-with-tooltip";
8
9
import { TagBadgeWithTooltip } from "@/components/monitor/tag-badge-with-tooltip";
9
10
import { api } from "@/trpc/server";
···
63
64
<span className="text-sm">
64
65
every <code>{monitor.periodicity}</code>
65
66
</span>
67
+
<span className="text-muted-foreground/50 text-xs">•</span>
68
+
<JobTypeIconWithTooltip jobType={monitor.jobType} />
66
69
{monitor.public ? (
67
70
<>
68
71
<span className="text-muted-foreground/50 text-xs">•</span>
+5
-2
apps/web/src/components/icons.tsx
+5
-2
apps/web/src/components/icons.tsx
···
18
18
FileClock,
19
19
Fingerprint,
20
20
Gauge,
21
-
Globe2,
21
+
Globe,
22
22
Hammer,
23
23
Hourglass,
24
24
Image,
···
44
44
Ratio,
45
45
Search,
46
46
SearchCheck,
47
+
Server,
47
48
Siren,
48
49
Sparkles,
49
50
SunMedium,
···
62
63
import type { LucideIcon, LucideProps } from "lucide-react";
63
64
64
65
export type Icon = LucideIcon;
66
+
export type IconProps = LucideProps;
65
67
export type ValidIcon = keyof typeof Icons;
66
68
67
69
export const Icons = {
···
86
88
tag: Tag,
87
89
trash: Trash,
88
90
twitter: TwitterIcon,
89
-
globe: Globe2,
91
+
globe: Globe,
90
92
plug: Plug,
91
93
copy: Copy,
92
94
check: Check,
···
124
126
camera: Camera,
125
127
"book-open-check": BookOpenCheck,
126
128
info: Info,
129
+
server: Server,
127
130
discord: ({ ...props }: LucideProps) => (
128
131
<svg viewBox="0 0 640 512" {...props}>
129
132
<path
+46
apps/web/src/components/monitor/job-type-icon-with-tooltip.tsx
+46
apps/web/src/components/monitor/job-type-icon-with-tooltip.tsx
···
1
+
import { cn } from "@/lib/utils";
2
+
import type { Monitor } from "@openstatus/db/src/schema";
3
+
import {
4
+
Tooltip,
5
+
TooltipContent,
6
+
TooltipProvider,
7
+
TooltipTrigger,
8
+
} from "@openstatus/ui/src/components/tooltip";
9
+
import { type IconProps, Icons, type ValidIcon } from "../icons";
10
+
11
+
// TODO: extend once we have more job types
12
+
function getIcon(jobType: Monitor["jobType"]): ValidIcon {
13
+
switch (jobType) {
14
+
case "http":
15
+
return "globe";
16
+
case "tcp":
17
+
return "server";
18
+
default:
19
+
return "cog";
20
+
}
21
+
}
22
+
23
+
interface JobTypeIconWithTooltipProps extends IconProps {
24
+
jobType: Monitor["jobType"];
25
+
}
26
+
27
+
export function JobTypeIconWithTooltip({
28
+
jobType,
29
+
className,
30
+
...props
31
+
}: JobTypeIconWithTooltipProps) {
32
+
const icon = getIcon(jobType);
33
+
const Icon = Icons[icon];
34
+
return (
35
+
<TooltipProvider delayDuration={50}>
36
+
<Tooltip>
37
+
<TooltipTrigger>
38
+
<Icon className={cn("h-3 w-3", className)} {...props} />
39
+
</TooltipTrigger>
40
+
<TooltipContent>
41
+
<p className="uppercase">{jobType}</p>
42
+
</TooltipContent>
43
+
</Tooltip>
44
+
</TooltipProvider>
45
+
);
46
+
}