fetch dashboard

This commit is contained in:
Nate Kelley 2025-04-08 22:15:35 -06:00
parent a05a81feaf
commit 6c4e96a73f
No known key found for this signature in database
GPG Key ID: FD90372AB8D98B4F
7 changed files with 62 additions and 31 deletions

View File

@ -72,8 +72,8 @@ const useGetDashboardAndInitializeMetrics = () => {
export const useGetDashboard = <TData = BusterDashboardResponse>( export const useGetDashboard = <TData = BusterDashboardResponse>(
{ {
id, id,
version_number: version_number_prop versionNumber: versionNumberProp
}: { id: string | undefined; version_number?: number | null }, }: { id: string | undefined; versionNumber?: number | null },
params?: Omit< params?: Omit<
UseQueryOptions<BusterDashboardResponse, RustApiError, TData>, UseQueryOptions<BusterDashboardResponse, RustApiError, TData>,
'queryKey' | 'queryFn' 'queryKey' | 'queryFn'
@ -85,12 +85,14 @@ export const useGetDashboard = <TData = BusterDashboardResponse>(
}; };
const versionNumberQueryParam = useSearchParams().get('versionNumber'); const versionNumberQueryParam = useSearchParams().get('versionNumber');
const versionNumber = versionNumberQueryParam || verionNumberPathParam; const versionNumberFromParams = versionNumberQueryParam || verionNumberPathParam;
const version_number = useMemo(() => { const version_number = useMemo(() => {
if (version_number_prop === null) return undefined; if (versionNumberProp === null) return undefined;
return version_number_prop || versionNumber ? parseInt(versionNumber!) : undefined; return versionNumberProp || versionNumberFromParams
}, [version_number_prop, versionNumber]); ? parseInt(versionNumberFromParams!)
: undefined;
}, [versionNumberProp, versionNumberFromParams]);
return useQuery({ return useQuery({
...dashboardQueryKeys.dashboardGetDashboard(id!, version_number), ...dashboardQueryKeys.dashboardGetDashboard(id!, version_number),

View File

@ -5,12 +5,12 @@ export default async function MetricLayout({
params params
}: { }: {
children: React.ReactNode; children: React.ReactNode;
params: Promise<{ metricId: string }>; params: Promise<{ metricId: string; versionNumber?: number }>;
}) { }) {
const { metricId } = await params; const { metricId, versionNumber } = await params;
return ( return (
<AppAssetCheckLayout assetId={metricId} type="metric"> <AppAssetCheckLayout assetId={metricId} type="metric" versionNumber={versionNumber}>
{children} {children}
</AppAssetCheckLayout> </AppAssetCheckLayout>
); );

View File

@ -15,14 +15,15 @@ import { HydrationBoundaryAssetStore } from '@/context/Assets/HydrationBoundaryA
export type AppAssetCheckLayoutProps = { export type AppAssetCheckLayoutProps = {
assetId: string; assetId: string;
type: 'metric' | 'dashboard'; type: 'metric' | 'dashboard';
versionNumber?: number;
}; };
export const AppAssetCheckLayout: React.FC< export const AppAssetCheckLayout: React.FC<
{ {
children: React.ReactNode; children: React.ReactNode;
} & AppAssetCheckLayoutProps } & AppAssetCheckLayoutProps
> = async ({ children, type, assetId }) => { > = async ({ children, type, assetId, versionNumber }) => {
const queryClient = await prefetchAsset(assetId, type); const queryClient = await prefetchAsset(assetId, type, versionNumber);
const { const {
has_access, has_access,
@ -55,7 +56,7 @@ export const AppAssetCheckLayout: React.FC<
return ( return (
<HydrationBoundary state={dehydratedState}> <HydrationBoundary state={dehydratedState}>
<HydrationBoundaryAssetStore asset={queryData}> <HydrationBoundaryAssetStore asset={queryData}>
<AppAssetLoadingContainer assetId={assetId} type={type}> <AppAssetLoadingContainer assetId={assetId} type={type} versionNumber={versionNumber}>
{Component} {Component}
</AppAssetLoadingContainer> </AppAssetLoadingContainer>
</HydrationBoundaryAssetStore> </HydrationBoundaryAssetStore>
@ -63,15 +64,25 @@ export const AppAssetCheckLayout: React.FC<
); );
}; };
const prefetchAsset = async (assetId: string, type: 'metric' | 'dashboard') => { const prefetchAsset = async (
assetId: string,
type: 'metric' | 'dashboard',
versionNumber?: number
) => {
let queryClient = new QueryClient(); let queryClient = new QueryClient();
switch (type) { switch (type) {
case 'metric': case 'metric':
queryClient = await prefetchGetMetric({ id: assetId }, queryClient); queryClient = await prefetchGetMetric(
{ id: assetId, version_number: versionNumber },
queryClient
);
break; break;
case 'dashboard': case 'dashboard':
queryClient = await prefetchGetDashboard({ id: assetId }, queryClient); queryClient = await prefetchGetDashboard(
{ id: assetId, version_number: versionNumber },
queryClient
);
break; break;
default: default:
const _exhaustiveCheck: never = type; const _exhaustiveCheck: never = type;

View File

@ -2,24 +2,23 @@
import { useGetDashboard } from '@/api/buster_rest/dashboards'; import { useGetDashboard } from '@/api/buster_rest/dashboards';
import { useGetMetric, useGetMetricData } from '@/api/buster_rest/metrics'; import { useGetMetric, useGetMetricData } from '@/api/buster_rest/metrics';
import { metricsQueryKeys } from '@/api/query_keys/metric';
import { FileIndeterminateLoader } from '@/components/features/FileIndeterminateLoader'; import { FileIndeterminateLoader } from '@/components/features/FileIndeterminateLoader';
import { useMount } from '@/hooks'; import React, { useMemo } from 'react';
import { useQuery, useQueryClient } from '@tanstack/react-query';
import React, { useEffect, useMemo, useState } from 'react';
export const AppAssetLoadingContainer: React.FC<{ export const AppAssetLoadingContainer: React.FC<{
assetId: string; assetId: string;
type: 'metric' | 'dashboard'; type: 'metric' | 'dashboard';
children: React.ReactNode; children: React.ReactNode;
}> = React.memo(({ assetId, type, children }) => { versionNumber: number | undefined;
}> = React.memo(({ assetId, type, children, versionNumber }) => {
const { const {
isFetchedConfig: isFetchedMetricConfig, isFetchedConfig: isFetchedMetricConfig,
isFetchedData: isFetchedMetricData, isFetchedData: isFetchedMetricData,
error: metricError error: metricError
} = useGetMetricAssetData({ } = useGetMetricAssetData({
assetId, assetId,
enabled: type === 'metric' enabled: type === 'metric',
versionNumber
}); });
const { const {
isFetchedConfig: isFetchedDashboardConfig, isFetchedConfig: isFetchedDashboardConfig,
@ -27,7 +26,8 @@ export const AppAssetLoadingContainer: React.FC<{
error: dashboardError error: dashboardError
} = useGetDashboardAssetData({ } = useGetDashboardAssetData({
assetId, assetId,
enabled: type === 'dashboard' enabled: type === 'dashboard',
versionNumber
}); });
const showLoader = useMemo(() => { const showLoader = useMemo(() => {
@ -60,12 +60,22 @@ export const AppAssetLoadingContainer: React.FC<{
AppAssetLoadingContainer.displayName = 'AppAssetLoadingContainer'; AppAssetLoadingContainer.displayName = 'AppAssetLoadingContainer';
const useGetMetricAssetData = ({ assetId, enabled }: { assetId: string; enabled: boolean }) => { const useGetMetricAssetData = ({
assetId,
enabled,
versionNumber
}: {
assetId: string;
enabled: boolean;
versionNumber: number | undefined;
}) => {
const { isFetched: isMetricFetched, ...rest } = useGetMetric({ const { isFetched: isMetricFetched, ...rest } = useGetMetric({
id: enabled ? assetId : undefined id: enabled ? assetId : undefined,
versionNumber
}); });
const { isFetched: isMetricDataFetched } = useGetMetricData({ const { isFetched: isMetricDataFetched } = useGetMetricData({
id: enabled ? assetId : undefined id: enabled ? assetId : undefined,
versionNumber
}); });
return { return {
@ -75,9 +85,18 @@ const useGetMetricAssetData = ({ assetId, enabled }: { assetId: string; enabled:
}; };
}; };
const useGetDashboardAssetData = ({ assetId, enabled }: { assetId: string; enabled: boolean }) => { const useGetDashboardAssetData = ({
assetId,
enabled,
versionNumber
}: {
assetId: string;
enabled: boolean;
versionNumber: number | undefined;
}) => {
const { isFetched: isDashboardFetched, error: dashboardError } = useGetDashboard({ const { isFetched: isDashboardFetched, error: dashboardError } = useGetDashboard({
id: enabled ? assetId : undefined id: enabled ? assetId : undefined,
versionNumber
}); });
return { return {

View File

@ -65,7 +65,7 @@ const FileContainerHeaderStandard: React.FC<{
/> />
)} )}
</div> </div>
<div className="flex-1"> <div className="flex flex-1 items-center justify-end">
<SelectedFileButtons selectedFileView={selectedFileView} selectedFileId={selectedFileId} /> <SelectedFileButtons selectedFileView={selectedFileView} selectedFileId={selectedFileId} />
</div> </div>
</> </>

View File

@ -21,14 +21,13 @@ export const useCloseVersionHistory = () => {
chatId: string | undefined; chatId: string | undefined;
}) => { }) => {
closeSecondaryView(); closeSecondaryView();
await timeout(chatId ? 250 : 0); await timeout(chatId ? 250 : 0); //wait for the secondary view to close
startTransition(() => { startTransition(() => {
const link = getFileLink({ const link = getFileLink({
fileId: assetId, fileId: assetId,
fileType: type, fileType: type,
chatId chatId
}); });
alert(link);
if (link) onChangePage(link); if (link) onChangePage(link);
}); });
} }

View File

@ -13,7 +13,7 @@ export const DashboardLayoutContainer: React.FC<{
return ( return (
<> <>
{children} {children}
<MemoizedAddToDashboardModal dashboardId={dashboardId} /> {/* <MemoizedAddToDashboardModal dashboardId={dashboardId} /> */}
</> </>
); );
}; };