From c809afbcfd7648fc113f87716b22bc65ea219676 Mon Sep 17 00:00:00 2001 From: Nate Kelley Date: Thu, 9 Oct 2025 11:40:02 -0600 Subject: [PATCH] ensure color pallets for screenshots --- apps/server/src/api/v2/reports/[id]/GET.ts | 2 +- apps/server/src/shared-helpers/screenshots.ts | 2 +- .../take-metric-screenshot-handler.ts | 1 + .../screenshots/upload-screenshot-handler.ts | 2 +- .../buster_rest/dictionaries/queryRequests.ts | 9 ++++ .../metrics/getMetricQueryRequests.ts | 54 ++++++++++++++++--- .../context/AppVersion/useWelcomeConsole.tsx | 4 +- apps/web/src/routes/screenshots.tsx | 16 ++++-- .../screenshots/reports.$reportId.content.tsx | 9 ++-- apps/web/vite.config.ts | 2 +- 10 files changed, 80 insertions(+), 21 deletions(-) diff --git a/apps/server/src/api/v2/reports/[id]/GET.ts b/apps/server/src/api/v2/reports/[id]/GET.ts index d28cc1dee..c0b8a6f33 100644 --- a/apps/server/src/api/v2/reports/[id]/GET.ts +++ b/apps/server/src/api/v2/reports/[id]/GET.ts @@ -90,7 +90,7 @@ const app = new Hono() password ); - await triggerScreenshotIfNeeded({ + triggerScreenshotIfNeeded({ tag: `take-report-screenshot-${reportId}`, key: screenshots_task_keys.take_report_screenshot, context: c, diff --git a/apps/server/src/shared-helpers/screenshots.ts b/apps/server/src/shared-helpers/screenshots.ts index 02c477419..b3eac22f7 100644 --- a/apps/server/src/shared-helpers/screenshots.ts +++ b/apps/server/src/shared-helpers/screenshots.ts @@ -71,6 +71,6 @@ export async function triggerScreenshotIfNeeded({ context, })) ) { - tasks.trigger(key, payload, { tags: [tag], idempotencyKey: tag }); + tasks.trigger(key, payload, { tags: [tag] }); } } diff --git a/apps/trigger/src/tasks/screenshots/take-metric-screenshot-handler.ts b/apps/trigger/src/tasks/screenshots/take-metric-screenshot-handler.ts index aa38dd39d..6778dd6a8 100644 --- a/apps/trigger/src/tasks/screenshots/take-metric-screenshot-handler.ts +++ b/apps/trigger/src/tasks/screenshots/take-metric-screenshot-handler.ts @@ -42,6 +42,7 @@ export const takeMetricScreenshotHandlerTask: ReturnType< const screenshotBuffer = await getMetricScreenshot(args); logger.info('Metric screenshot taken', { screenshotBufferLength: screenshotBuffer.length }); + logger.log('This is the screenshot buffer', { screenshotBuffer }); const result = await uploadScreenshotHandler({ assetType: 'metric_file', diff --git a/apps/trigger/src/tasks/screenshots/upload-screenshot-handler.ts b/apps/trigger/src/tasks/screenshots/upload-screenshot-handler.ts index d81850723..c6a1eb0a2 100644 --- a/apps/trigger/src/tasks/screenshots/upload-screenshot-handler.ts +++ b/apps/trigger/src/tasks/screenshots/upload-screenshot-handler.ts @@ -182,7 +182,7 @@ export async function uploadScreenshotHandler( screenshotBucketKey: result.key, }); - logger.info('Screenshot uploaded', { resultOfUpload }); + logger.info('Result of upload', { resultOfUpload }); return PutScreenshotResponseSchema.parse({ success: true, diff --git a/apps/web/src/api/buster_rest/dictionaries/queryRequests.ts b/apps/web/src/api/buster_rest/dictionaries/queryRequests.ts index 796cdddfb..3d416c34c 100644 --- a/apps/web/src/api/buster_rest/dictionaries/queryRequests.ts +++ b/apps/web/src/api/buster_rest/dictionaries/queryRequests.ts @@ -22,6 +22,15 @@ export const prefetchColorPalettes = async (queryClient: QueryClient) => { return queryClient; }; +export const ensureColorPalettes = async (queryClient: QueryClient) => { + const res = await queryClient.ensureQueryData({ + ...dictionariesQueryKeys.colorPalettes, + queryFn: getColorPalettes, + }); + + return res; +}; + export const useGetCurrencies = () => { return useQuery({ ...dictionariesQueryKeys.getCurrencies, diff --git a/apps/web/src/api/buster_rest/metrics/getMetricQueryRequests.ts b/apps/web/src/api/buster_rest/metrics/getMetricQueryRequests.ts index d5a5fc101..ec7bdb0ec 100644 --- a/apps/web/src/api/buster_rest/metrics/getMetricQueryRequests.ts +++ b/apps/web/src/api/buster_rest/metrics/getMetricQueryRequests.ts @@ -189,13 +189,16 @@ export const useGetMetricData = ( !versionNumberProp || latestVersionNumber === chosenVersionNumber; if (isLatest) { - queryClient.setQueryData(metricsQueryKeys.metricsGetData(id, 'LATEST').queryKey, result); + queryClient.setQueryData( + metricsQueryKeys.metricsGetData(id, 'LATEST', cacheDataId).queryKey, + result + ); } return result; }; return useQuery({ - ...metricsQueryKeys.metricsGetData(id || '', versionNumberProp || 'LATEST'), + ...metricsQueryKeys.metricsGetData(id || '', versionNumberProp || 'LATEST', cacheDataId), queryFn, select: params?.select, ...params, @@ -213,16 +216,48 @@ export const useGetMetricData = ( }); }; +const prefetchGetMetricDataQueryFn = async ({ + id, + version_number, + report_file_id, + queryClient, +}: { + id: string; + version_number: number | undefined; + report_file_id?: string; + queryClient: QueryClient; +}) => { + const res = await getMetricData({ id, version_number, report_file_id }); + const latestVersion = queryClient.getQueryData( + metricsQueryKeys.metricsGetMetric(id, 'LATEST').queryKey + ); + const isLatest = latestVersion?.version_number === version_number || !version_number; + if (isLatest) { + queryClient.setQueryData( + metricsQueryKeys.metricsGetData(id, 'LATEST', report_file_id).queryKey, + res + ); + } + return res; +}; + export const prefetchGetMetricDataClient = async ( - { id, version_number }: { id: string; version_number: number }, + { + id, + version_number, + report_file_id, + }: { id: string; version_number: number | undefined; report_file_id?: string }, queryClient: QueryClient ) => { - const options = metricsQueryKeys.metricsGetData(id, version_number); + const chosenVersionNumber = version_number || 'LATEST'; + const options = metricsQueryKeys.metricsGetData(id, chosenVersionNumber, report_file_id); const existingData = queryClient.getQueryData(options.queryKey); if (!existingData && id) { await queryClient.prefetchQuery({ ...options, - queryFn: () => getMetricData({ id, version_number }), + queryFn: () => { + return prefetchGetMetricDataQueryFn({ id, version_number, report_file_id, queryClient }); + }, }); } }; @@ -235,7 +270,14 @@ export const ensureMetricData = async ( const options = metricsQueryKeys.metricsGetData(id, version_number || 'LATEST', report_file_id); return await queryClient.ensureQueryData({ ...options, - queryFn: () => getMetricData({ id, version_number, report_file_id }), + queryFn: async () => { + return await prefetchGetMetricDataQueryFn({ + id, + version_number, + report_file_id, + queryClient, + }); + }, }); }; diff --git a/apps/web/src/context/AppVersion/useWelcomeConsole.tsx b/apps/web/src/context/AppVersion/useWelcomeConsole.tsx index 08746fcbd..efa158237 100644 --- a/apps/web/src/context/AppVersion/useWelcomeConsole.tsx +++ b/apps/web/src/context/AppVersion/useWelcomeConsole.tsx @@ -3,11 +3,11 @@ import { formatDate } from '@/lib/date'; export const useWelcomeConsole = () => { useMount(() => { - console.log( + console.info( `%c🚀 Welcome to Buster #${import.meta.env.VITE_BUILD_ID}`, 'background: linear-gradient(to right, #a21caf, #8b1cb1, #6b21a8); color: white; font-size: 16px; font-weight: bold; padding: 10px; border-radius: 5px;' ); - console.log( + console.info( `%c🐛 Found a bug? The code is open-source! Report it at https://github.com/buster-so/buster or send a PR! 🚀 • This version was deployed on ${formatDate({ date: import.meta.env.VITE_BUILD_AT, format: 'LLL' })}`, 'background: #6b21a8; color: white !important; font-size: 10px; font-weight: 500; padding: 8px 12px; border-radius: 5px; text-decoration: none; --webkit-text-fill-color: white; --webkit-text-stroke-color: white;' ); diff --git a/apps/web/src/routes/screenshots.tsx b/apps/web/src/routes/screenshots.tsx index f27298315..354a63337 100644 --- a/apps/web/src/routes/screenshots.tsx +++ b/apps/web/src/routes/screenshots.tsx @@ -1,20 +1,26 @@ import { BaseScreenshotSearchSchema } from '@buster/server-shared/screenshots'; import { createFileRoute, Outlet } from '@tanstack/react-router'; +import { ensureColorPalettes } from '@/api/buster_rest/dictionaries'; import { ensureGetMyUserInfo } from '@/api/buster_rest/users'; export const Route = createFileRoute('/screenshots')({ ssr: true, component: RouteComponent, - beforeLoad: async ({ context, search }) => { - await ensureGetMyUserInfo(context.queryClient); + beforeLoad: async ({ search }) => { return { backgroundColor: search.backgroundColor, }; }, validateSearch: BaseScreenshotSearchSchema, - loader: ({ context }) => ({ - backgroundColor: context.backgroundColor, - }), + loader: async ({ context }) => { + await Promise.all([ + ensureGetMyUserInfo(context.queryClient), + ensureColorPalettes(context.queryClient), + ]); + return { + backgroundColor: context.backgroundColor, + }; + }, head: ({ loaderData }) => ({ styles: [ { diff --git a/apps/web/src/routes/screenshots/reports.$reportId.content.tsx b/apps/web/src/routes/screenshots/reports.$reportId.content.tsx index 642a32171..1aa98d3d9 100644 --- a/apps/web/src/routes/screenshots/reports.$reportId.content.tsx +++ b/apps/web/src/routes/screenshots/reports.$reportId.content.tsx @@ -30,15 +30,16 @@ export const Route = createFileRoute('/screenshots/reports/$reportId/content')({ return ensureMetricData(context.queryClient, { id: metricId, version_number: metric.version_number, + report_file_id: report.id, }); }) ); - res.forEach((metric) => { - console.log('metric', metric.data?.length); - }); + const allMetricsLoaded = res.every((metric) => !!metric.metricId); - return { report }; + if (!allMetricsLoaded) { + throw new Error('Not all metrics loaded'); + } }, }); diff --git a/apps/web/vite.config.ts b/apps/web/vite.config.ts index 50f5db65a..7842b1ac2 100644 --- a/apps/web/vite.config.ts +++ b/apps/web/vite.config.ts @@ -49,7 +49,7 @@ const config = defineConfig(({ command, mode }) => { tailwindcss(), tanstackStart(), nitroV2Plugin({ - preset: isLocalBuild && !isVercelBuild ? 'bun' : 'node-server', + preset: isLocalBuild || !isVercelBuild ? 'bun' : 'node-server', }), viteReact(), ],