mirror of https://github.com/buster-so/buster.git
fetch dashboard
This commit is contained in:
parent
a05a81feaf
commit
6c4e96a73f
|
@ -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),
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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>
|
||||||
</>
|
</>
|
||||||
|
|
|
@ -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);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
@ -13,7 +13,7 @@ export const DashboardLayoutContainer: React.FC<{
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{children}
|
{children}
|
||||||
<MemoizedAddToDashboardModal dashboardId={dashboardId} />
|
{/* <MemoizedAddToDashboardModal dashboardId={dashboardId} /> */}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue