Files
supabase/apps/studio/components/interfaces/Settings/Logs/LogsBarChart.utils.ts
Jordi Enric 24f8549e41 fix(studio): open edge function logs from chart clicks FE-3922 (#50364)
## Problem

Clicking an invocation bar on the Edge Function overview did not
preserve the selected chart segment, so the destination could not open a
focused investigation window.

## Fix

Forward the clicked bar timestamp and navigate to Logs or Invocations
with an encoded, focused time range. Share the existing chart range
calculation and add real Recharts interaction coverage.

## How to test

- Open an Edge Function Overview page with invocation data.
- Click a populated bar in the Total Invocations chart.
- Expected result: Logs or Invocations opens with its and ite query
parameters centered on the clicked bar.
- Repeat with unified logs enabled and disabled to verify both
destinations.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
- Clicking a bar in the Edge Function invocations chart now opens the
relevant logs or invocations view.
- The destination is focused on a time window surrounding the selected
invocation, making investigation faster.
- Chart bars now provide a pointer cursor to indicate they are
interactive.

- **Bug Fixes**
- Chart clicks without valid invocation data no longer trigger incorrect
navigation.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-09-15 11:06:37 +02:00

34 lines
952 B
TypeScript

import dayjs from 'dayjs'
export const calculateBarClickTimeRange = (
currentRangeStart: string,
currentRangeEnd: string | undefined,
clickedTimestamp: string
) => {
const datumTimestamp = dayjs(clickedTimestamp).toISOString()
const endTime = currentRangeEnd ? dayjs(currentRangeEnd) : dayjs()
const currentRangeDuration = endTime.diff(dayjs(currentRangeStart), 'hour', true)
let rangeOffset: number
let rangeUnit: dayjs.ManipulateType
if (currentRangeDuration >= 12) {
rangeOffset = 0.5
rangeUnit = 'hour'
} else if (currentRangeDuration >= 1) {
rangeOffset = 2.5
rangeUnit = 'minute'
} else if (currentRangeDuration >= 1 / 30) {
rangeOffset = 1
rangeUnit = 'minute'
} else {
rangeOffset = 7.5
rangeUnit = 'second'
}
return {
start: dayjs(datumTimestamp).subtract(rangeOffset, rangeUnit).toISOString(),
end: dayjs(datumTimestamp).add(rangeOffset, rangeUnit).toISOString(),
}
}