From 8a03d576ff55eeda20a7d4e6c5c38169bba3009d Mon Sep 17 00:00:00 2001 From: Nate Kelley Date: Mon, 6 Oct 2025 12:45:06 -0600 Subject: [PATCH] styles pass through --- apps/web/src/routes/screenshots.tsx | 17 ++++++++++- .../dashboards.$dashboardId.content.tsx | 29 +++++++++++++------ .../screenshots/reports.$reportId.content.tsx | 16 +++++++++- apps/web/src/styles/styles.css | 2 -- apps/web/src/styles/tailwind.css | 2 +- .../server-shared/src/screenshots/index.ts | 1 + .../src/screenshots/requests.base.ts | 7 +++++ .../src/screenshots/requests.chats.ts | 13 +++++---- .../src/screenshots/requests.dashboards.ts | 15 ++++++---- .../src/screenshots/requests.metrics.ts | 15 ++++++---- .../src/screenshots/requests.reports.ts | 15 ++++++---- 11 files changed, 95 insertions(+), 37 deletions(-) create mode 100644 packages/server-shared/src/screenshots/requests.base.ts diff --git a/apps/web/src/routes/screenshots.tsx b/apps/web/src/routes/screenshots.tsx index d62df4dc8..3045652f2 100644 --- a/apps/web/src/routes/screenshots.tsx +++ b/apps/web/src/routes/screenshots.tsx @@ -1,12 +1,27 @@ +import { BaseScreenshotSearchSchema } from '@buster/server-shared/screenshots'; import { createFileRoute, Outlet } from '@tanstack/react-router'; import { ensureGetMyUserInfo } from '@/api/buster_rest/users'; export const Route = createFileRoute('/screenshots')({ ssr: true, component: RouteComponent, - beforeLoad: async ({ context }) => { + beforeLoad: async ({ context, search }) => { await ensureGetMyUserInfo(context.queryClient); + return { + backgroundColor: search.backgroundColor, + }; }, + validateSearch: BaseScreenshotSearchSchema, + loader: ({ context }) => ({ + backgroundColor: context.backgroundColor, + }), + head: ({ loaderData }) => ({ + styles: [ + { + children: `body { background: ${loaderData?.backgroundColor}; }`, + }, + ], + }), }); function RouteComponent() { diff --git a/apps/web/src/routes/screenshots/dashboards.$dashboardId.content.tsx b/apps/web/src/routes/screenshots/dashboards.$dashboardId.content.tsx index d5d3204b2..884cbc1a4 100644 --- a/apps/web/src/routes/screenshots/dashboards.$dashboardId.content.tsx +++ b/apps/web/src/routes/screenshots/dashboards.$dashboardId.content.tsx @@ -20,10 +20,23 @@ export const Route = createFileRoute('/screenshots/dashboards/$dashboardId/conte throw new Error('Dashboard not found'); } + const numberOfMetrics = 8; const allMetrics = Object.entries(dashboard?.metrics || {}); + const firstXMetrics = allMetrics.slice(0, numberOfMetrics); + const restMetrics = allMetrics.slice(numberOfMetrics); + Promise.all( + restMetrics.map(([metricId, metric]) => { + return ensureMetricData(context.queryClient, { + id: metricId, + version_number: metric.version_number, + }); + }) + ); + + //Only really need to wait for the first X metrics to be loaded await Promise.all( - allMetrics.map(([metricId, metric]) => { + firstXMetrics.map(([metricId, metric]) => { return ensureMetricData(context.queryClient, { id: metricId, version_number: metric.version_number, @@ -38,13 +51,11 @@ export const Route = createFileRoute('/screenshots/dashboards/$dashboardId/conte function RouteComponent() { const { dashboardId, dashboardVersionNumber } = useGetDashboardParams(); return ( -
- -
+ ); } diff --git a/apps/web/src/routes/screenshots/reports.$reportId.content.tsx b/apps/web/src/routes/screenshots/reports.$reportId.content.tsx index 1c3a70ccf..bece3d42d 100644 --- a/apps/web/src/routes/screenshots/reports.$reportId.content.tsx +++ b/apps/web/src/routes/screenshots/reports.$reportId.content.tsx @@ -1,6 +1,8 @@ import { GetReportScreenshotQuerySchema } from '@buster/server-shared/screenshots'; import { createFileRoute } from '@tanstack/react-router'; +import { ensureMetricData } from '@/api/buster_rest/metrics'; import { prefetchGetReport } from '@/api/buster_rest/reports'; +import { ReportPageController } from '@/controllers/ReportPageControllers'; export const Route = createFileRoute('/screenshots/reports/$reportId/content')({ component: RouteComponent, @@ -17,10 +19,22 @@ export const Route = createFileRoute('/screenshots/reports/$reportId/content')({ throw new Error('Report not found'); } + const allMetrics = Object.entries(report?.metrics || {}); + + await Promise.all( + allMetrics.map(([metricId, metric]) => { + return ensureMetricData(context.queryClient, { + id: metricId, + version_number: metric.version_number, + }); + }) + ); + return { report }; }, }); function RouteComponent() { - return
Hello "/screenshots/_content/reports/$reportId/conent"!
; + const { reportId } = Route.useParams(); + return ; } diff --git a/apps/web/src/styles/styles.css b/apps/web/src/styles/styles.css index 8b3fc4339..dcf5150b4 100644 --- a/apps/web/src/styles/styles.css +++ b/apps/web/src/styles/styles.css @@ -34,8 +34,6 @@ pre { html, body { - background-color: var(--color-background-secondary); - min-width: 800px; /* // @media (prefers-color-scheme: dark) { // background-color: #000000; // color: #ffffff; diff --git a/apps/web/src/styles/tailwind.css b/apps/web/src/styles/tailwind.css index 2c732de32..9fcacbc5d 100644 --- a/apps/web/src/styles/tailwind.css +++ b/apps/web/src/styles/tailwind.css @@ -276,7 +276,7 @@ @apply border-border outline-ring/0; } body { - @apply bg-background-secondary text-foreground text-base h-full w-full; + @apply bg-background-secondary text-foreground text-base h-full w-full min-w-[800px]; } html { @apply h-full w-full; diff --git a/packages/server-shared/src/screenshots/index.ts b/packages/server-shared/src/screenshots/index.ts index 94dcc201b..e21ddf45b 100644 --- a/packages/server-shared/src/screenshots/index.ts +++ b/packages/server-shared/src/screenshots/index.ts @@ -3,3 +3,4 @@ export * from './requests.metrics'; export * from './requests.dashboards'; export * from './requests.reports'; export * from './requests.chats'; +export * from './requests.base'; diff --git a/packages/server-shared/src/screenshots/requests.base.ts b/packages/server-shared/src/screenshots/requests.base.ts new file mode 100644 index 000000000..8534a360d --- /dev/null +++ b/packages/server-shared/src/screenshots/requests.base.ts @@ -0,0 +1,7 @@ +import { z } from 'zod'; + +export const BaseScreenshotSearchSchema = z.object({ + backgroundColor: z.string().optional().default('#ffffff'), +}); + +export type ScreenshotSearch = z.infer; diff --git a/packages/server-shared/src/screenshots/requests.chats.ts b/packages/server-shared/src/screenshots/requests.chats.ts index 0a552fdc1..eda4e883b 100644 --- a/packages/server-shared/src/screenshots/requests.chats.ts +++ b/packages/server-shared/src/screenshots/requests.chats.ts @@ -1,4 +1,5 @@ import { z } from 'zod'; +import { BaseScreenshotSearchSchema } from './requests.base'; export const PutChatScreenshotRequestSchema = z.object({ base64Image: z.string(), @@ -12,10 +13,12 @@ export const GetChatScreenshotParamsSchema = z.object({ export type GetChatScreenshotParams = z.infer; -export const GetChatScreenshotQuerySchema = z.object({ - width: z.coerce.number().min(600).max(3840).default(600), - height: z.coerce.number().min(300).max(2160).default(338), - type: z.enum(['png', 'jpeg']).default('png'), -}); +export const GetChatScreenshotQuerySchema = z + .object({ + width: z.coerce.number().min(600).max(3840).default(600), + height: z.coerce.number().min(300).max(2160).default(338), + type: z.enum(['png', 'jpeg']).default('png'), + }) + .merge(BaseScreenshotSearchSchema); export type GetChatScreenshotQuery = z.infer; diff --git a/packages/server-shared/src/screenshots/requests.dashboards.ts b/packages/server-shared/src/screenshots/requests.dashboards.ts index 50b41d022..d2363d6dd 100644 --- a/packages/server-shared/src/screenshots/requests.dashboards.ts +++ b/packages/server-shared/src/screenshots/requests.dashboards.ts @@ -1,4 +1,5 @@ import { z } from 'zod'; +import { BaseScreenshotSearchSchema } from './requests.base'; export const PutDashboardScreenshotRequestSchema = z.object({ base64Image: z.string(), @@ -12,11 +13,13 @@ export const GetDashboardScreenshotParamsSchema = z.object({ export type GetDashboardScreenshotParams = z.infer; -export const GetDashboardScreenshotQuerySchema = z.object({ - width: z.coerce.number().min(100).max(3840).default(800), - height: z.coerce.number().min(100).max(4160).default(450), - type: z.enum(['png', 'jpeg']).default('png'), - version_number: z.coerce.number().optional(), -}); +export const GetDashboardScreenshotQuerySchema = z + .object({ + width: z.coerce.number().min(100).max(3840).default(800), + height: z.coerce.number().min(100).max(4160).default(450), + type: z.enum(['png', 'jpeg']).default('png'), + version_number: z.coerce.number().optional(), + }) + .merge(BaseScreenshotSearchSchema); export type GetDashboardScreenshotQuery = z.infer; diff --git a/packages/server-shared/src/screenshots/requests.metrics.ts b/packages/server-shared/src/screenshots/requests.metrics.ts index 6eb130c3e..8a68ee0fc 100644 --- a/packages/server-shared/src/screenshots/requests.metrics.ts +++ b/packages/server-shared/src/screenshots/requests.metrics.ts @@ -1,15 +1,18 @@ import { z } from 'zod'; +import { BaseScreenshotSearchSchema } from './requests.base'; export const GetMetricScreenshotParamsSchema = z.object({ id: z.string(), }); -export const GetMetricScreenshotQuerySchema = z.object({ - version_number: z.coerce.number().min(1).optional(), - width: z.coerce.number().min(100).max(3840).default(800), - height: z.coerce.number().min(100).max(2160).default(450), - type: z.enum(['png', 'jpeg']).default('png'), -}); +export const GetMetricScreenshotQuerySchema = z + .object({ + version_number: z.coerce.number().min(1).optional(), + width: z.coerce.number().min(100).max(3840).default(800), + height: z.coerce.number().min(100).max(2160).default(450), + type: z.enum(['png', 'jpeg']).default('png'), + }) + .merge(BaseScreenshotSearchSchema); export type GetMetricScreenshotParams = z.infer; export type GetMetricScreenshotQuery = z.infer; diff --git a/packages/server-shared/src/screenshots/requests.reports.ts b/packages/server-shared/src/screenshots/requests.reports.ts index a85f72f7e..33c569019 100644 --- a/packages/server-shared/src/screenshots/requests.reports.ts +++ b/packages/server-shared/src/screenshots/requests.reports.ts @@ -1,4 +1,5 @@ import { z } from 'zod'; +import { BaseScreenshotSearchSchema } from './requests.base'; export const PutReportScreenshotRequestSchema = z.object({ base64Image: z.string(), @@ -12,11 +13,13 @@ export const GetReportScreenshotParamsSchema = z.object({ export type GetReportScreenshotParams = z.infer; -export const GetReportScreenshotQuerySchema = z.object({ - width: z.coerce.number().min(100).max(3840).default(800), - height: z.coerce.number().min(100).max(2160).default(450), - type: z.enum(['png', 'jpeg']).default('png'), - version_number: z.coerce.number().optional(), -}); +export const GetReportScreenshotQuerySchema = z + .object({ + width: z.coerce.number().min(100).max(3840).default(800), + height: z.coerce.number().min(100).max(2160).default(450), + type: z.enum(['png', 'jpeg']).default('png'), + version_number: z.coerce.number().optional(), + }) + .merge(BaseScreenshotSearchSchema); export type GetReportScreenshotQuery = z.infer;