From 7d5ab47f2064dc00615bcacb70f29c4bbf6509eb Mon Sep 17 00:00:00 2001 From: TzeYiing Date: Thu, 4 May 2023 20:06:19 +0900 Subject: [PATCH 1/4] chore: refactor of project usage charts to use client-side data timestamp filling --- studio/components/interfaces/Home/ProjectUsageSection.tsx | 2 +- studio/data/analytics/project-log-stats-query.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/studio/components/interfaces/Home/ProjectUsageSection.tsx b/studio/components/interfaces/Home/ProjectUsageSection.tsx index 932f22577be..2da74e27413 100644 --- a/studio/components/interfaces/Home/ProjectUsageSection.tsx +++ b/studio/components/interfaces/Home/ProjectUsageSection.tsx @@ -43,7 +43,7 @@ const ProjectUsageSection: FC = observer(({}) => {

Retrieving project usage statistics

- ) : hasProjectData ? ( + ) : true ? ( ) : ( diff --git a/studio/data/analytics/project-log-stats-query.ts b/studio/data/analytics/project-log-stats-query.ts index 023b1c0cfdb..db294c11124 100644 --- a/studio/data/analytics/project-log-stats-query.ts +++ b/studio/data/analytics/project-log-stats-query.ts @@ -44,7 +44,7 @@ export async function getProjectLogStats( return response as ProjectLogStatsResponse } -export type ProjectLogStatsData = Awaited> +export type ProjectLogStatsData = Awaited> export type ProjectLogStatsError = unknown export const useProjectLogStatsQuery = ( From f923ea6da186ddbafd99e8cd03fbf3e768ecda62 Mon Sep 17 00:00:00 2001 From: TzeYiing Date: Tue, 9 May 2023 21:10:47 +0900 Subject: [PATCH 2/4] fix: chart timestamp filling and data truncation --- .../interfaces/Reports/Reports.constants.ts | 1 + .../interfaces/Settings/Logs/Logs.utils.ts | 2 ++ .../[ref]/functions/[functionSlug]/index.tsx | 22 +++++++++++++++---- studio/types/ui.ts | 4 ++-- 4 files changed, 23 insertions(+), 6 deletions(-) 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 { From 29bc60ca7be2b4c4f8cb1a5fd8cfc500933ac400 Mon Sep 17 00:00:00 2001 From: TzeYiing Date: Tue, 9 May 2023 21:12:26 +0900 Subject: [PATCH 3/4] chore: remove logging --- studio/components/interfaces/Settings/Logs/Logs.utils.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/studio/components/interfaces/Settings/Logs/Logs.utils.ts b/studio/components/interfaces/Settings/Logs/Logs.utils.ts index a2f60548bcf..0759259ff80 100644 --- a/studio/components/interfaces/Settings/Logs/Logs.utils.ts +++ b/studio/components/interfaces/Settings/Logs/Logs.utils.ts @@ -389,7 +389,6 @@ 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) @@ -430,6 +429,5 @@ export const getTimestampTruncation = (datetime: string): 'second' | 'minute' | 2: 'hour' as const, 3: 'day' as const, }[zeroCount]! - console.log({truncation}) return truncation } From 75cca07bb94a8fb6decabaff51b70f9e5143c855 Mon Sep 17 00:00:00 2001 From: TzeYiing Date: Wed, 17 May 2023 12:24:31 +0800 Subject: [PATCH 4/4] chore: fix typing issue --- studio/data/analytics/project-log-stats-query.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/studio/data/analytics/project-log-stats-query.ts b/studio/data/analytics/project-log-stats-query.ts index db294c11124..023b1c0cfdb 100644 --- a/studio/data/analytics/project-log-stats-query.ts +++ b/studio/data/analytics/project-log-stats-query.ts @@ -44,7 +44,7 @@ export async function getProjectLogStats( return response as ProjectLogStatsResponse } -export type ProjectLogStatsData = Awaited> +export type ProjectLogStatsData = Awaited> export type ProjectLogStatsError = unknown export const useProjectLogStatsQuery = (