konnosDashboard
EdgeFunctionPerformanceSection.tsx104 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 { getExecutionTooltipDetails } from './EdgeFunctionMetricTooltipDetails'
13import {
14 EXECUTION_TIME_CHART_CONFIG,
15 formatMetric,
16 getChartEmptyStateCopy,
17} from './EdgeFunctionOverview.utils'
18import type { EdgeFunctionChartDatum } from './EdgeFunctionOverview.utils'
19import { EdgeFunctionTimeSeriesChartCard } from './EdgeFunctionTimeSeriesChartCard'
20
21interface EdgeFunctionPerformanceSectionProps {
22 data: EdgeFunctionChartDatum[]
23 dateTimeFormat: string
24 isLoading: boolean
25 isError: boolean
26 errorMessage?: string
27 averageExecutionTime: number
28 maxExecutionTime: number
29}
30
31export const EdgeFunctionPerformanceSection = ({
32 data,
33 dateTimeFormat,
34 isLoading,
35 isError,
36 errorMessage,
37 averageExecutionTime,
38 maxExecutionTime,
39}: EdgeFunctionPerformanceSectionProps) => {
40 const emptyStateCopy = getChartEmptyStateCopy('execution time', isError, errorMessage)
41 const tooltipDetails = useMemo(
42 () => getExecutionTooltipDetails(averageExecutionTime),
43 [averageExecutionTime]
44 )
45 const metrics = (
46 <div className="flex flex-wrap gap-x-8 gap-y-4">
47 <ChartMetric
48 label="Average Execution Time"
49 value={formatMetric(averageExecutionTime, 'ms')}
50 tooltip="Average execution time of function invocations"
51 />
52 <ChartMetric
53 label="Max Execution Time"
54 value={formatMetric(maxExecutionTime, 'ms')}
55 tooltip="Maximum execution time of function invocations"
56 />
57 </div>
58 )
59
60 return (
61 <PageSection>
62 <PageSectionContent>
63 <PageContainer size="full">
64 <div className="flex flex-col gap-6">
65 <PageSectionMeta>
66 <PageSectionSummary>
67 <PageSectionTitle>Performance</PageSectionTitle>
68 </PageSectionSummary>
69 </PageSectionMeta>
70
71 <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
72 <EdgeFunctionTimeSeriesChartCard
73 className="lg:col-span-2"
74 data={data}
75 dateTimeFormat={dateTimeFormat}
76 isLoading={isLoading}
77 isError={isError}
78 emptyTitle={emptyStateCopy.title}
79 emptyDescription={emptyStateCopy.description}
80 metrics={metrics}
81 dataKey="max_execution_time"
82 dataKeys={['avg_execution_time', 'max_execution_time']}
83 config={EXECUTION_TIME_CHART_CONFIG}
84 tooltipDetails={tooltipDetails}
85 referenceLines={[
86 {
87 y: averageExecutionTime,
88 label: 'average',
89 stroke: 'hsl(var(--foreground-default))',
90 strokeWidth: 1.5,
91 },
92 ]}
93 yAxisProps={{
94 width: 64,
95 tickFormatter: (value: number) => `${Math.round(value)}ms`,
96 }}
97 />
98 </div>
99 </div>
100 </PageContainer>
101 </PageSectionContent>
102 </PageSection>
103 )
104}