ensure color pallets for screenshots

apps/server/src/api/v2/reports/[id]/GET.ts

@@ -90,7 +90,7 @@ const app = new Hono()
         password
       );
 
-      await triggerScreenshotIfNeeded<TakeReportScreenshotTrigger>({
+      triggerScreenshotIfNeeded<TakeReportScreenshotTrigger>({
         tag: `take-report-screenshot-${reportId}`,
         key: screenshots_task_keys.take_report_screenshot,
         context: c,

apps/server/src/shared-helpers/screenshots.ts

@@ -71,6 +71,6 @@ export async function triggerScreenshotIfNeeded<TTrigger>({
       context,
     }))
   ) {
-    tasks.trigger(key, payload, { tags: [tag], idempotencyKey: tag });
+    tasks.trigger(key, payload, { tags: [tag] });
   }
 }

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',

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,

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,

apps/web/src/api/buster_rest/metrics/getMetricQueryRequests.ts

@@ -189,13 +189,16 @@ export const useGetMetricData = <TData = BusterMetricDataExtended>(
       !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 = <TData = BusterMetricDataExtended>(
   });
 };
 
+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,
+      });
+    },
   });
 };
 

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;'
     );

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 }) => ({
+  loader: async ({ context }) => {
+    await Promise.all([
+      ensureGetMyUserInfo(context.queryClient),
+      ensureColorPalettes(context.queryClient),
+    ]);
+    return {
       backgroundColor: context.backgroundColor,
-  }),
+    };
+  },
   head: ({ loaderData }) => ({
     styles: [
       {

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');
+    }
   },
 });
 

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(),
     ],