konnosDashboard
EdgeFunctionUsageSection.tsx158 lines · main
1import { useMemo } from 'react'
2import { ChartMetric } from 'ui-patterns/Chart'
3import { PageContainer } from 'ui-patterns/PageContainer'
4import {
5 PageSection,
6 PageSectionContent,
7 PageSectionMeta,
8 PageSectionSummary,
9 PageSectionTitle,
10} from 'ui-patterns/PageSection'
11
12import { getCpuTooltipDetails, getMemoryTooltipDetails } from './EdgeFunctionMetricTooltipDetails'
13import {
14 CPU_TIME_CHART_CONFIG,
15 formatMetric,
16 formatRate,
17 getChartEmptyStateCopy,
18 MEMORY_CHART_CONFIG,
19} from './EdgeFunctionOverview.utils'
20import type { EdgeFunctionChartDatum } from './EdgeFunctionOverview.utils'
21import { EdgeFunctionTimeSeriesChartCard } from './EdgeFunctionTimeSeriesChartCard'
22
23interface EdgeFunctionUsageSectionProps {
24 data: EdgeFunctionChartDatum[]
25 dateTimeFormat: string
26 isLoading: boolean
27 isError: boolean
28 errorMessage?: string
29 averageCpuTime: number
30 maxCpuTime: number
31 averageMemoryUsage: number
32 totalHeapMemory: number
33 totalExternalMemory: number
34 totalMemoryByType: number
35}
36
37export const EdgeFunctionUsageSection = ({
38 data,
39 dateTimeFormat,
40 isLoading,
41 isError,
42 errorMessage,
43 averageCpuTime,
44 maxCpuTime,
45 averageMemoryUsage,
46 totalHeapMemory,
47 totalExternalMemory,
48 totalMemoryByType,
49}: EdgeFunctionUsageSectionProps) => {
50 const cpuEmptyStateCopy = getChartEmptyStateCopy('CPU time', isError, errorMessage)
51 const memoryEmptyStateCopy = getChartEmptyStateCopy('memory usage', isError, errorMessage)
52 const cpuTooltipDetails = useMemo(() => getCpuTooltipDetails(averageCpuTime), [averageCpuTime])
53 const memoryTooltipDetails = useMemo(
54 () => getMemoryTooltipDetails(averageMemoryUsage),
55 [averageMemoryUsage]
56 )
57 const cpuMetrics = (
58 <div className="flex flex-wrap gap-x-8 gap-y-4">
59 <ChartMetric
60 label="Average CPU Time"
61 value={formatMetric(averageCpuTime, 'ms')}
62 tooltip="Average CPU time usage for the function"
63 />
64 <ChartMetric
65 label="Max CPU Time"
66 value={formatMetric(maxCpuTime, 'ms')}
67 tooltip="Maximum CPU time usage for the function"
68 />
69 </div>
70 )
71 const memoryMetrics = (
72 <div className="flex flex-wrap gap-x-8 gap-y-4">
73 <ChartMetric
74 label="Average Memory Usage"
75 value={formatMetric(averageMemoryUsage, 'MB')}
76 tooltip="Average memory usage for the function"
77 />
78 <ChartMetric
79 label="Heap"
80 value={formatRate(totalHeapMemory, totalMemoryByType)}
81 tooltip="Share of memory attributed to heap usage over the selected interval"
82 />
83 <ChartMetric
84 label="External"
85 value={formatRate(totalExternalMemory, totalMemoryByType)}
86 tooltip="Share of memory attributed to external usage over the selected interval"
87 />
88 </div>
89 )
90
91 return (
92 <PageSection>
93 <PageSectionContent>
94 <PageContainer size="full">
95 <div className="flex flex-col gap-6">
96 <PageSectionMeta>
97 <PageSectionSummary>
98 <PageSectionTitle>Usage</PageSectionTitle>
99 </PageSectionSummary>
100 </PageSectionMeta>
101
102 <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
103 <EdgeFunctionTimeSeriesChartCard
104 data={data}
105 dateTimeFormat={dateTimeFormat}
106 isLoading={isLoading}
107 isError={isError}
108 emptyTitle={cpuEmptyStateCopy.title}
109 emptyDescription={cpuEmptyStateCopy.description}
110 metrics={cpuMetrics}
111 dataKey="max_cpu_time_used"
112 config={CPU_TIME_CHART_CONFIG}
113 tooltipDetails={cpuTooltipDetails}
114 referenceLines={[
115 {
116 y: averageCpuTime,
117 label: 'average',
118 stroke: 'hsl(var(--foreground-default))',
119 strokeWidth: 1.5,
120 },
121 ]}
122 yAxisProps={{
123 width: 64,
124 tickFormatter: (value: number) => `${Math.round(value)}ms`,
125 }}
126 />
127
128 <EdgeFunctionTimeSeriesChartCard
129 data={data}
130 dateTimeFormat={dateTimeFormat}
131 isLoading={isLoading}
132 isError={isError}
133 emptyTitle={memoryEmptyStateCopy.title}
134 emptyDescription={memoryEmptyStateCopy.description}
135 metrics={memoryMetrics}
136 dataKey="avg_memory_used"
137 config={MEMORY_CHART_CONFIG}
138 tooltipDetails={memoryTooltipDetails}
139 referenceLines={[
140 {
141 y: averageMemoryUsage,
142 label: 'average',
143 stroke: 'hsl(var(--foreground-default))',
144 strokeWidth: 1.5,
145 },
146 ]}
147 yAxisProps={{
148 width: 64,
149 tickFormatter: (value: number) => `${Number(value).toFixed(1)}MB`,
150 }}
151 />
152 </div>
153 </div>
154 </PageContainer>
155 </PageSectionContent>
156 </PageSection>
157 )
158}