diff --git a/studio/components/interfaces/Reports/Reports.constants.ts b/studio/components/interfaces/Reports/Reports.constants.ts
index 718250d0cc4..914c8a068ae 100644
--- a/studio/components/interfaces/Reports/Reports.constants.ts
+++ b/studio/components/interfaces/Reports/Reports.constants.ts
@@ -278,3 +278,4 @@ select
}
export const DATETIME_FORMAT = 'MMM D, ha'
+export const DATETIME_SECOND_FORMAT = 'MMM D, ha'
diff --git a/studio/components/interfaces/Settings/Logs/Logs.utils.ts b/studio/components/interfaces/Settings/Logs/Logs.utils.ts
index 0759259ff80..a2f60548bcf 100644
--- a/studio/components/interfaces/Settings/Logs/Logs.utils.ts
+++ b/studio/components/interfaces/Settings/Logs/Logs.utils.ts
@@ -389,6 +389,7 @@ export const fillTimeseries = (
})
const diff = maxDate.diff(minDate, truncation as dayjs.UnitType)
+ console.log({diff})
for (let i = 0; i <= diff; i++) {
const dateToMaybeAdd = minDate.add(i, truncation as dayjs.ManipulateType)
@@ -429,5 +430,6 @@ export const getTimestampTruncation = (datetime: string): 'second' | 'minute' |
2: 'hour' as const,
3: 'day' as const,
}[zeroCount]!
+ console.log({truncation})
return truncation
}
diff --git a/studio/pages/project/[ref]/functions/[functionSlug]/index.tsx b/studio/pages/project/[ref]/functions/[functionSlug]/index.tsx
index 7e03f65d572..2e677cc2f81 100644
--- a/studio/pages/project/[ref]/functions/[functionSlug]/index.tsx
+++ b/studio/pages/project/[ref]/functions/[functionSlug]/index.tsx
@@ -17,15 +17,17 @@ import AreaChart from 'components/ui/Charts/AreaChart'
import { isUnixMicro, unixMicroToIsoTimestamp } from 'components/interfaces/Settings/Logs'
import meanBy from 'lodash/meanBy'
import sumBy from 'lodash/sumBy'
+import useFillTimeseriesSorted from 'hooks/analytics/useFillTimeseriesSorted'
const CHART_INTERVALS: ChartIntervals[] = [
{
key: '5min',
label: '5 min',
- startValue: 1,
- startUnit: 'hour',
+ startValue: 5,
+ startUnit: 'minute',
+ format: 'MMM D, h:mm:ssa',
},
- { key: '15min', label: '15 min', startValue: 15, startUnit: 'min' },
+ { key: '15min', label: '15 min', startValue: 15, startUnit: 'minute' },
{ key: '1hr', label: '1 hour', startValue: 1, startUnit: 'hour' },
{ key: '1day', label: '1 day', startValue: 1, startUnit: 'day' },
{ key: '7day', label: '7 days', startValue: 7, startUnit: 'day' },
@@ -45,7 +47,7 @@ const PageLayout: NextPageWithLayout = () => {
interval: selectedInterval.key,
})
const isChartLoading = !data?.result && !error ? true : false
- const chartData = useMemo(() => {
+ const normalizedData = useMemo(() => {
return (data?.result || []).map((d: any) => ({
...d,
timestamp: isUnixMicro(d.timestamp) ? unixMicroToIsoTimestamp(d.timestamp) : d.timestamp,
@@ -56,6 +58,16 @@ const PageLayout: NextPageWithLayout = () => {
selectedInterval.startValue,
selectedInterval.startUnit as dayjs.ManipulateType
)
+
+ const chartData = useFillTimeseriesSorted(
+ normalizedData,
+ 'timestamp',
+ ['avg_execution_time', 'count'],
+ 0,
+ startDate.toISOString(),
+ dayjs().toISOString()
+ )
+
const canReadFunction = checkPermissions(PermissionAction.FUNCTIONS_READ, functionSlug as string)
if (!canReadFunction) {
return
@@ -103,6 +115,7 @@ const PageLayout: NextPageWithLayout = () => {
{
yAxisKey="count"
data={props.data}
highlightedValue={sumBy(props.data, 'count')}
+ customDateFormat={selectedInterval.format}
onBarClick={(v) => {
router.push(
`/project/${projectRef}/functions/${functionSlug}/invocations?its=${startDate.toISOString()}&ite=${
diff --git a/studio/types/ui.ts b/studio/types/ui.ts
index 114f8bac3cb..7ed014c462c 100644
--- a/studio/types/ui.ts
+++ b/studio/types/ui.ts
@@ -19,8 +19,8 @@ export interface ChartIntervals {
key: 'minutely' | 'hourly' | 'daily' | '5min' | '15min' | '1hr' | '1day' | '7day'
label: string
startValue: number
- startUnit: 'min' | 'hour' | 'day'
- format?: 'MMM D, h:mma' | 'MMM D, ha' | 'MMM D'
+ startUnit: 'minute' | 'hour' | 'day'
+ format?: 'MMM D, h:mm:ssa' | 'MMM D, h:mma' | 'MMM D, ha' | 'MMM D'
}
export interface VaultSecret {