konnosDashboard
EdgeFunctionsListItem.tsx172 lines · main
1import { IS_PLATFORM, useFlag } from 'common'
2import { useParams } from 'common/hooks'
3import dayjs from 'dayjs'
4import { Check, Copy } from 'lucide-react'
5import { useRouter } from 'next/router'
6import { useMemo, useState, type MouseEvent } from 'react'
7import { cn, copyToClipboard, TableCell, TableRow } from 'ui'
8import { ShimmeringLoader, TimestampInfo } from 'ui-patterns'
9
10import { formatErrorRate } from './EdgeFunctionsListItem.utils'
11import { useProjectApiUrl } from '@/data/config/project-endpoint-query'
12import { useEdgeFunctionsLastHourStatsQuery } from '@/data/edge-functions/edge-functions-last-hour-stats-query'
13import {
14 useEdgeFunctionsQuery,
15 type EdgeFunctionsResponse,
16} from '@/data/edge-functions/edge-functions-query'
17import { normalizeFunctionIds } from '@/data/edge-functions/keys'
18import { createNavigationHandler } from '@/lib/navigation'
19
20interface EdgeFunctionsListItemProps {
21 function: EdgeFunctionsResponse
22}
23
24export const EdgeFunctionsListItem = ({ function: item }: EdgeFunctionsListItemProps) => {
25 const router = useRouter()
26 const { ref } = useParams()
27 const [isCopied, setIsCopied] = useState(false)
28
29 const showLastHourStats = useFlag('edgeFunctionsRequestMetrics')
30
31 const { data: endpoint } = useProjectApiUrl({ projectRef: ref })
32 const functionUrl = `${endpoint}/functions/v1/${item.slug}`
33
34 const handleNavigation = createNavigationHandler(
35 `/project/${ref}/functions/${item.slug}${IS_PLATFORM ? '' : `/details`}`,
36 router
37 )
38
39 const { data: functions } = useEdgeFunctionsQuery({ projectRef: ref })
40 const functionIds = useMemo(() => {
41 if (!showLastHourStats || !functions) return []
42 return normalizeFunctionIds(functions.map((item) => item.id))
43 }, [functions, showLastHourStats])
44
45 // [Joshen] We may be paginating the edge functions query in the future
46 // So this will eventually need to be a list of visibleFunctionIds instead + debounced
47 const {
48 data: lastHourStatsAll,
49 isPending: isStatsPending,
50 isError: isStatsError,
51 } = useEdgeFunctionsLastHourStatsQuery(
52 { projectRef: ref, functionIds },
53 { enabled: showLastHourStats }
54 )
55 const lastHourStats = lastHourStatsAll?.[item.id]
56
57 return (
58 <TableRow
59 key={item.id}
60 onClick={handleNavigation}
61 onAuxClick={handleNavigation}
62 onKeyDown={handleNavigation}
63 tabIndex={0}
64 className="cursor-pointer inset-focus"
65 >
66 <TableCell>
67 <p className="text-sm text-foreground whitespace-nowrap py-2">{item.name}</p>
68 </TableCell>
69 <TableCell>
70 <div className="text-xs text-foreground-light flex gap-2 items-center truncate">
71 <p title={functionUrl} className="font-mono truncate hidden md:inline max-w-120">
72 {functionUrl}
73 </p>
74 <button
75 type="button"
76 className="text-foreground-lighter hover:text-foreground transition"
77 onClick={(event: MouseEvent<HTMLButtonElement>) => {
78 function onCopy(value: string) {
79 setIsCopied(true)
80 copyToClipboard(value)
81 setTimeout(() => setIsCopied(false), 3000)
82 }
83 event.stopPropagation()
84 onCopy(functionUrl)
85 }}
86 >
87 {isCopied ? (
88 <div className="text-brand">
89 <Check size={14} strokeWidth={3} />
90 </div>
91 ) : (
92 <div className="relative">
93 <div className="block">
94 <Copy size={14} strokeWidth={1.5} />
95 </div>
96 </div>
97 )}
98 </button>
99 </div>
100 </TableCell>
101 <TableCell className="hidden 2xl:table-cell whitespace-nowrap">
102 {item.created_at ? (
103 <TimestampInfo
104 className="text-sm text-foreground-light whitespace-nowrap"
105 utcTimestamp={item.created_at}
106 label={dayjs(item.created_at).fromNow()}
107 />
108 ) : (
109 <span className="text-sm text-foreground-light">–</span>
110 )}
111 </TableCell>
112 <TableCell className="lg:table-cell">
113 {item.updated_at ? (
114 <TimestampInfo
115 className="text-sm text-foreground-light whitespace-nowrap"
116 utcTimestamp={item.updated_at}
117 label={dayjs(item.updated_at).fromNow()}
118 />
119 ) : (
120 <span className="text-sm text-foreground-light">–</span>
121 )}
122 </TableCell>
123 {showLastHourStats && (
124 <>
125 <TableCell className="lg:table-cell whitespace-nowrap">
126 {isStatsPending ? (
127 <ShimmeringLoader className="w-12" />
128 ) : isStatsError ? (
129 <p className="text-foreground-lighter" title="Failed to load stats">
130 -
131 </p>
132 ) : (
133 <p className="text-foreground-light">
134 {lastHourStats !== undefined ? lastHourStats.requestsCount.toLocaleString() : '-'}
135 </p>
136 )}
137 </TableCell>
138 <TableCell className="lg:table-cell whitespace-nowrap">
139 {isStatsPending ? (
140 <ShimmeringLoader className="w-12" />
141 ) : isStatsError ? (
142 <p className="text-foreground-lighter" title="Failed to load stats">
143 -
144 </p>
145 ) : lastHourStats !== undefined ? (
146 <span
147 className={cn(
148 'text-sm',
149 lastHourStats.errorRate >= 1
150 ? 'text-destructive'
151 : lastHourStats.errorRate > 0.1
152 ? 'text-warning'
153 : 'text-foreground-light'
154 )}
155 >
156 {formatErrorRate(lastHourStats.errorRate)}
157 </span>
158 ) : (
159 <p className="text-foreground-lighter">-</p>
160 )}
161 </TableCell>
162 </>
163 )}
164 <TableCell className="hidden 2xl:table-cell">
165 <p className="text-foreground-light">{item.version}</p>
166 <button tabIndex={-1} className="sr-only">
167 Go to function details
168 </button>
169 </TableCell>
170 </TableRow>
171 )
172}