supabase/apps/studio/components/interfaces/Functions/EdgeFunctionOverview/EdgeFunctionPerformanceSection.tsx

import { useMemo } from 'react'
import { ChartMetric } from 'ui-patterns/Chart'
import {
  PageSection,
  PageSectionContent,
  PageSectionMeta,
  PageSectionSummary,
  PageSectionTitle,
} from 'ui-patterns/PageSection'

import { getExecutionTooltipDetails } from './EdgeFunctionMetricTooltipDetails'
import {
  EXECUTION_TIME_CHART_CONFIG,
  formatMetric,
  getChartEmptyStateCopy,
} from './EdgeFunctionOverview.utils'
import type { EdgeFunctionChartDatum } from './EdgeFunctionOverview.utils'
import { EdgeFunctionTimeSeriesChartCard } from './EdgeFunctionTimeSeriesChartCard'

interface EdgeFunctionPerformanceSectionProps {
  data: EdgeFunctionChartDatum[]
  dateTimeFormat: string
  isLoading: boolean
  isError: boolean
  errorMessage?: string
  averageExecutionTime: number
  maxExecutionTime: number
}

export const EdgeFunctionPerformanceSection = ({
  data,
  dateTimeFormat,
  isLoading,
  isError,
  errorMessage,
  averageExecutionTime,
  maxExecutionTime,
}: EdgeFunctionPerformanceSectionProps) => {
  const emptyStateCopy = getChartEmptyStateCopy('execution time', isError, errorMessage)
  const tooltipDetails = useMemo(
    () => getExecutionTooltipDetails(averageExecutionTime),
    [averageExecutionTime]
  )
  const metrics = (
    <div className="flex flex-wrap gap-x-8 gap-y-4">
      <ChartMetric
        label="Average Execution Time"
        value={formatMetric(averageExecutionTime, 'ms')}
        tooltip="Average execution time of function invocations"
      />
      <ChartMetric
        label="Max Execution Time"
        value={formatMetric(maxExecutionTime, 'ms')}
        tooltip="Maximum execution time of function invocations"
      />
    </div>
  )

  return (
    <PageSection>
      <PageSectionMeta>
        <PageSectionSummary>
          <PageSectionTitle>Performance</PageSectionTitle>
        </PageSectionSummary>
      </PageSectionMeta>
      <PageSectionContent>
        <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
          <EdgeFunctionTimeSeriesChartCard
            className="lg:col-span-2"
            data={data}
            dateTimeFormat={dateTimeFormat}
            isLoading={isLoading}
            isError={isError}
            emptyTitle={emptyStateCopy.title}
            emptyDescription={emptyStateCopy.description}
            metrics={metrics}
            dataKey="max_execution_time"
            dataKeys={['avg_execution_time', 'max_execution_time']}
            config={EXECUTION_TIME_CHART_CONFIG}
            tooltipDetails={tooltipDetails}
            referenceLines={[
              {
                y: averageExecutionTime,
                label: 'average',
                stroke: 'var(--foreground-default)',
                strokeWidth: 1.5,
              },
            ]}
            yAxisProps={{
              tickFormatter: (value: number) => `${Math.round(value)}ms`,
            }}
          />
        </div>
      </PageSectionContent>
    </PageSection>
  )
}