EdgeFunctionMetricTooltipDetails.tsx93 lines · main

1	import type { ChartLineProps } from 'ui-patterns/Chart'
2
3	import type { EdgeFunctionChartDatum } from './EdgeFunctionOverview.utils'
4	import { formatReferenceDelta, getMemoryTooltipDetail } from './EdgeFunctionOverview.utils'
5
6	export const ExecutionTooltipDetail = ({
7	averageExecutionTime,
8	metricKey,
9	value,
10	}: {
11	averageExecutionTime: number
12	metricKey: string
13	value: unknown
14	}) => {
15	if (metricKey !== 'max_execution_time') return null
16
17	return (
18	<span className="text-foreground">
19	{formatReferenceDelta(Number(value ?? 0), averageExecutionTime)}
20	</span>
21	)
22	}
23
24	export const CpuTooltipDetail = ({
25	averageCpuTime,
26	value,
27	}: {
28	averageCpuTime: number
29	value: unknown
30	}) => {
31	return (
32	<span className="text-foreground">
33	{formatReferenceDelta(Number(value ?? 0), averageCpuTime)}
34	</span>
35	)
36	}
37
38	export const MemoryTooltipDetail = ({
39	averageMemoryUsage,
40	datum,
41	value,
42	}: {
43	averageMemoryUsage: number
44	datum: EdgeFunctionChartDatum
45	value: unknown
46	}) => {
47	return (
48	<>
49	<span className="text-foreground">
50	{formatReferenceDelta(Number(value ?? 0), averageMemoryUsage)}
51	</span>
52	<span className="text-foreground-light">
53	{getMemoryTooltipDetail(datum.avg_heap_memory_used, datum.avg_external_memory_used)}
54	</span>
55	</>
56	)
57	}
58
59	export const getExecutionTooltipDetails = (
60	averageExecutionTime: number
61	): NonNullable<ChartLineProps['tooltipDetails']> => {
62	return function renderExecutionTooltipDetails(_, key, value) {
63	return (
64	<ExecutionTooltipDetail
65	averageExecutionTime={averageExecutionTime}
66	metricKey={key}
67	value={value}
68	/>
69	)
70	}
71	}
72
73	export const getCpuTooltipDetails = (
74	averageCpuTime: number
75	): NonNullable<ChartLineProps['tooltipDetails']> => {
76	return function renderCpuTooltipDetails(_, __, value) {
77	return <CpuTooltipDetail averageCpuTime={averageCpuTime} value={value} />
78	}
79	}
80
81	export const getMemoryTooltipDetails = (
82	averageMemoryUsage: number
83	): NonNullable<ChartLineProps['tooltipDetails']> => {
84	return function renderMemoryTooltipDetails(datum, _, value) {
85	return (
86	<MemoryTooltipDetail
87	averageMemoryUsage={averageMemoryUsage}
88	datum={datum as EdgeFunctionChartDatum}
89	value={value}
90	/>
91	)
92	}
93	}