mirror of https://github.com/buster-so/buster.git
many dashboard updates
This commit is contained in:
parent
294ea785d7
commit
e576738d31
|
@ -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)
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -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 });
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue