many dashboard updates

This commit is contained in:
Nate Kelley 2025-04-16 12:57:39 -06:00
parent 294ea785d7
commit e576738d31
No known key found for this signature in database
GPG Key ID: FD90372AB8D98B4F
5 changed files with 66 additions and 70 deletions

View File

@ -34,23 +34,6 @@ import { useParams, useSearchParams } from 'next/navigation';
import { RustApiError } from '../errors'; import { RustApiError } from '../errors';
import { useOriginalDashboardStore } from '@/context/Dashboards'; import { useOriginalDashboardStore } from '@/context/Dashboards';
export const useGetDashboardsList = (
params: Omit<Parameters<typeof dashboardsGetList>[0], 'page_token' | 'page_size'>
) => {
const filters = useMemo(() => {
return {
...params,
page_token: 0,
page_size: 3000
};
}, [params]);
return useQuery({
...dashboardQueryKeys.dashboardGetList(params),
queryFn: () => dashboardsGetList(filters)
});
};
const useGetDashboardAndInitializeMetrics = (prefetchData: boolean = true) => { const useGetDashboardAndInitializeMetrics = (prefetchData: boolean = true) => {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const setOriginalDashboards = useOriginalDashboardStore((x) => x.setOriginalDashboard); const setOriginalDashboards = useOriginalDashboardStore((x) => x.setOriginalDashboard);
@ -80,7 +63,6 @@ const useGetDashboardAndInitializeMetrics = (prefetchData: boolean = true) => {
return dashboardsGetDashboard({ id: id!, password, version_number }).then((data) => { return dashboardsGetDashboard({ id: id!, password, version_number }).then((data) => {
initializeMetrics(data.metrics); initializeMetrics(data.metrics);
setOriginalDashboards(data.dashboard); setOriginalDashboards(data.dashboard);
if (!version_number && data.dashboard.version_number) { if (!version_number && data.dashboard.version_number) {
@ -99,12 +81,13 @@ const useGetDashboardVersionNumber = (props?: {
versionNumber?: number | null; //if null it will not use a params from the query params versionNumber?: number | null; //if null it will not use a params from the query params
}) => { }) => {
const { versionNumber: versionNumberProp } = props || {}; const { versionNumber: versionNumberProp } = props || {};
const { versionNumber: versionNumberPathParam, metricId: metricIdPathParam } = useParams() as { const { versionNumber: versionNumberPathParam, dashboardId: dashboardIdPathParam } =
versionNumber: string | undefined; useParams() as {
metricId: string | undefined; versionNumber: string | undefined;
}; dashboardId: string | undefined;
};
const versionNumberQueryParam = useSearchParams().get('dashboard_version_number'); const versionNumberQueryParam = useSearchParams().get('dashboard_version_number');
const versionNumberFromParams = metricIdPathParam const versionNumberFromParams = dashboardIdPathParam
? versionNumberQueryParam || versionNumberPathParam ? versionNumberQueryParam || versionNumberPathParam
: undefined; : undefined;
@ -135,23 +118,20 @@ export const useGetDashboard = <TData = BusterDashboardResponse>(
return useQuery({ return useQuery({
...dashboardQueryKeys.dashboardGetDashboard(id!, versionNumber), ...dashboardQueryKeys.dashboardGetDashboard(id!, versionNumber),
queryFn: () => queryFn(id!, versionNumber), queryFn: () => queryFn(id!, versionNumber),
enabled: !!id, //it is false because we fetch the dashboard server side enabled: false, //we made this false because we want to be explicit about the fact that we fetch the dashboard server side
select: params?.select, select: params?.select,
...params ...params
}); });
}; };
export const useCreateDashboard = () => { export const usePrefetchGetDashboardClient = () => {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
return useMutation({ const queryFn = useGetDashboardAndInitializeMetrics(false);
mutationFn: dashboardsCreateDashboard, return useMemoizedFn((id: string, versionNumber: number) => {
onSuccess: () => { return queryClient.prefetchQuery({
setTimeout(() => { ...dashboardQueryKeys.dashboardGetDashboard(id, versionNumber),
queryClient.invalidateQueries({ queryFn: () => queryFn(id, versionNumber)
queryKey: dashboardQueryKeys.dashboardGetList({}).queryKey });
});
}, 350);
}
}); });
}; };
@ -183,7 +163,6 @@ export const useSaveDashboard = (params?: { updateOnSave?: boolean }) => {
data data
); );
} }
console.log('setting original dashboard', data.dashboard);
setOriginalDashboard(data.dashboard); setOriginalDashboard(data.dashboard);
} }
} }
@ -209,31 +188,25 @@ export const useUpdateDashboard = (params?: {
update_version: updateVersion update_version: updateVersion
}); });
} }
const newDashboard = create(getOriginalDashboard(variables.id), (draft) => {
Object.assign(draft!, variables);
});
return newDashboard;
} }
); );
return useMutation({ return useMutation({
mutationFn, mutationFn,
onMutate: (variables) => { onMutate: (variables) => {
const originalDashboard = getOriginalDashboard(variables.id);
const updatedDashboard = create(originalDashboard!, (draft) => {
Object.assign(draft, variables);
});
const queryKey = dashboardQueryKeys.dashboardGetDashboard( const queryKey = dashboardQueryKeys.dashboardGetDashboard(
variables.id, variables.id,
versionNumber updatedDashboard.version_number
).queryKey; ).queryKey;
queryClient.setQueryData(queryKey, (previousData) => { queryClient.setQueryData(queryKey, (previousData) => {
const newDashboardState: BusterDashboardResponse = create(previousData!, (draft) => { return create(previousData!, (draft) => {
draft.dashboard = create(draft.dashboard, (draft) => { draft.dashboard = updatedDashboard;
Object.assign(draft, variables);
});
}); });
console.log('newDashboardState', newDashboardState.dashboard.config.rows?.[0]);
return newDashboardState!;
}); });
} }
}); });
@ -258,11 +231,9 @@ export const useUpdateDashboardConfig = () => {
const previousDashboard = queryClient.getQueryData(options.queryKey); const previousDashboard = queryClient.getQueryData(options.queryKey);
const previousConfig = previousDashboard?.dashboard?.config; const previousConfig = previousDashboard?.dashboard?.config;
if (previousConfig) { if (previousConfig) {
console.log('previousConfig', previousConfig.rows?.[0]);
const newConfig = create(previousConfig!, (draft) => { const newConfig = create(previousConfig!, (draft) => {
Object.assign(draft, newDashboard); Object.assign(draft, newDashboard);
}); });
console.log('newConfig', newConfig.rows?.[0]);
return mutateAsync({ return mutateAsync({
id: dashboardId, id: dashboardId,
config: newConfig config: newConfig
@ -276,6 +247,20 @@ export const useUpdateDashboardConfig = () => {
}); });
}; };
export const useCreateDashboard = () => {
const queryClient = useQueryClient();
return useMutation({
mutationFn: dashboardsCreateDashboard,
onSuccess: () => {
setTimeout(() => {
queryClient.invalidateQueries({
queryKey: dashboardQueryKeys.dashboardGetList({}).queryKey
});
}, 350);
}
});
};
export const useDeleteDashboards = () => { export const useDeleteDashboards = () => {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const { openConfirmModal } = useBusterNotifications(); const { openConfirmModal } = useBusterNotifications();
@ -655,3 +640,20 @@ export const useRemoveMetricsFromDashboard = () => {
} }
}); });
}; };
export const useGetDashboardsList = (
params: Omit<Parameters<typeof dashboardsGetList>[0], 'page_token' | 'page_size'>
) => {
const filters = useMemo(() => {
return {
...params,
page_token: 0,
page_size: 3000
};
}, [params]);
return useQuery({
...dashboardQueryKeys.dashboardGetList(params),
queryFn: () => dashboardsGetList(filters)
});
};

View File

@ -1,6 +1,10 @@
'use client'; 'use client';
import { useGetDashboard, useUpdateDashboard } from '@/api/buster_rest/dashboards'; import {
useGetDashboard,
usePrefetchGetDashboardClient,
useSaveDashboard
} from '@/api/buster_rest/dashboards';
import { import {
useGetMetric, useGetMetric,
usePrefetchGetMetricDataClient, usePrefetchGetMetricDataClient,
@ -142,15 +146,14 @@ const useListDashboardVersions = ({
assetId: string; assetId: string;
type: 'metric' | 'dashboard'; type: 'metric' | 'dashboard';
}): UseListVersionReturn => { }): UseListVersionReturn => {
const prefetchGetDashboard = usePrefetchGetDashboardClient();
const dashboardVersionNumber = useChatLayoutContextSelector((x) => x.dashboardVersionNumber); const dashboardVersionNumber = useChatLayoutContextSelector((x) => x.dashboardVersionNumber);
const { mutateAsync: updateDashboard, isPending: isSaving } = useUpdateDashboard({ const { mutateAsync: updateDashboard, isPending: isSaving } = useSaveDashboard({
saveToServer: true, updateOnSave: true
updateVersion: true
}); });
const { data: dashboardData } = useGetDashboard( const { data: dashboardData, isFetched } = useGetDashboard(
{ {
id: type === 'dashboard' ? assetId : undefined, id: type === 'dashboard' ? assetId : undefined
versionNumber: null
}, },
{ {
select: (x) => ({ select: (x) => ({
@ -161,7 +164,7 @@ const useListDashboardVersions = ({
); );
const versions = dashboardData?.versions; const versions = dashboardData?.versions;
const currentVersionNumber = dashboardData?.version_number; const currentVersionNumber = last(versions)?.version_number;
const selectedQueryVersion = useMemo(() => { const selectedQueryVersion = useMemo(() => {
if (dashboardVersionNumber) return dashboardVersionNumber; if (dashboardVersionNumber) return dashboardVersionNumber;
@ -176,7 +179,7 @@ const useListDashboardVersions = ({
}); });
const onPrefetchAsset = useMemoizedFn(async (versionNumber: number) => { const onPrefetchAsset = useMemoizedFn(async (versionNumber: number) => {
// prefetchGetDashboard(assetId, versionNumber);
}); });
return useMemo(() => { return useMemo(() => {
@ -210,7 +213,6 @@ const useListMetricVersions = ({
}); });
const prefetchGetMetric = usePrefetchGetMetricClient(); const prefetchGetMetric = usePrefetchGetMetricClient();
const prefetchGetMetricData = usePrefetchGetMetricDataClient(); const prefetchGetMetricData = usePrefetchGetMetricDataClient();
const metricVersionNumber = useChatLayoutContextSelector((x) => x.metricVersionNumber); const metricVersionNumber = useChatLayoutContextSelector((x) => x.metricVersionNumber);
const { data: metric } = useGetMetric( const { data: metric } = useGetMetric(
@ -225,7 +227,7 @@ const useListMetricVersions = ({
} }
); );
const versions = metric?.versions; const versions = metric?.versions;
const currentVersionNumber = metricVersionNumber || metric?.version_number; const currentVersionNumber = last(versions)?.version_number;
const selectedQueryVersion = useMemo(() => { const selectedQueryVersion = useMemo(() => {
if (metricVersionNumber) return metricVersionNumber; if (metricVersionNumber) return metricVersionNumber;

View File

@ -57,14 +57,6 @@ export const useIsDashboardChanged = ({ dashboardId }: { dashboardId: string })
); );
}, [originalDashboard, currentDashboard]); }, [originalDashboard, currentDashboard]);
console.log(
'originalDashboard',
isDashboardChanged,
latestVersionNumber,
currentDashboard?.config.rows?.[0],
originalDashboard?.config.rows?.[0]
);
return { return {
onResetDashboardToOriginal, onResetDashboardToOriginal,
isDashboardChanged isDashboardChanged

View File

@ -14,6 +14,7 @@ export const DashboardSavePopup: React.FC<{ dashboardId: string }> = React.memo(
}); });
const { mutateAsync: onSaveDashboard, isPending: isSaving } = useUpdateDashboard({ const { mutateAsync: onSaveDashboard, isPending: isSaving } = useUpdateDashboard({
saveToServer: true, saveToServer: true,
updateOnSave: true,
updateVersion: !chatId updateVersion: !chatId
}); });

View File

@ -51,7 +51,6 @@ export const useAutoChangeLayout = ({
previousLastMessageId.current !== lastMessageId && previousLastMessageId.current !== lastMessageId &&
chatId chatId
) { ) {
console.log('trigger reasoning page!', previousLastMessageId.current, lastMessageId);
previousLastMessageId.current = lastMessageId; previousLastMessageId.current = lastMessageId;
onSetSelectedFile({ id: lastMessageId, type: 'reasoning', versionNumber: undefined }); onSetSelectedFile({ id: lastMessageId, type: 'reasoning', versionNumber: undefined });
} }