Ling0925
/
buster
mirror of https://github.com/buster-so/buster.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

mock data update

This commit is contained in:
Nate Kelley 2025-02-05 22:35:46 -07:00
parent 6c5f4c7b5f
commit f3a4fb96ef
No known key found for this signature in database
GPG Key ID: FD90372AB8D98B4F
11 changed files with 203 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/app/app/_controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardContentController.tsx
View File

@ -105,7 +105,7 @@ export const DashboardContentController: React.FC<{
}, [dashboard.id, remapMetrics]);
return (
<div className="h-full w-full">
<div className="dashboard-content-controller">
{hasMetrics && !!dashboardRows.length ? (
<DashboardContentControllerProvider dashboard={dashboard}>
<BusterResizeableGrid

26
web/src/app/app/_controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardMetricItem/DashboardMetricItem.tsx
View File

@ -5,7 +5,7 @@ import { useDashboardMetric } from './useDashboardMetric';
import { BusterChart } from '@/components/charts';
import { MetricTitle } from './MetricTitle';
import { createBusterRoute, BusterRoutes } from '@/routes';
import { useMemoizedFn, useWhyDidYouUpdate } from 'ahooks';
import { useMemoizedFn } from 'ahooks';
const _DashboardMetricItem: React.FC<{
metricId: string;
@ -37,7 +37,7 @@ const _DashboardMetricItem: React.FC<{
const chartOptions = metric.chart_config;
const data = metricData.data || null;
const loading = loadingMetricData;
const animate = !initialAnimationEnded && !isDragOverlay && numberOfMetrics <= 8;
const animate = !initialAnimationEnded && !isDragOverlay && numberOfMetrics <= 12;
const isTable = metric.chart_config.selectedChartType === 'table';
const error = useMemo(() => {
@ -69,28 +69,6 @@ const _DashboardMetricItem: React.FC<{
};
}, [isTable]);
useWhyDidYouUpdate('DashboardMetricItem', {
metricId,
dashboardId,
allowEdit,
className,
isDragOverlay,
numberOfMetrics,
renderChart,
loading,
error,
metricLink,
onInitialAnimationEndPreflight,
cardClassNamesMemoized,
metric,
metricData,
initialAnimationEnded,
setInitialAnimationEnded,
data,
loadingMetricData,
chartOptions
});
return (
<Card
ref={conatinerRef}

3
web/src/app/app/_controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardMetricItem/useDashboardMetric.ts
View File

@ -28,7 +28,8 @@ export const useDashboardMetric = ({ metricId }: { metricId: string }) => {
});
const initialAnimationEnded = metricMetadata?.initialAnimationEnded || false;
const renderChart = metricMetadata?.hasBeenScrolledIntoView || isOnFirstTwoRows;
const renderChart =
true || ((metricMetadata?.hasBeenScrolledIntoView || isOnFirstTwoRows) && metric?.fetched);
useEffect(() => {
if (inViewport) {

2
web/src/app/app/_controllers/DashboardController/DashboardViewDashboardController/DashboardEditTitle.tsx
View File

@ -26,7 +26,7 @@ export const DashboardEditTitles: React.FC<{
);
return (
<div className="flex flex-col space-y-1.5">
<div className="flex flex-col space-y-0">
<EditableTitle
className="w-full truncate"
disabled={!allowEdit}

2
web/src/app/app/_controllers/DashboardController/DashboardViewDashboardController/DashboardViewDashboardController.tsx
View File

@ -25,7 +25,7 @@ export const DashboardViewDashboardController: React.FC<DashboardViewProps> = ({
});
return (
<div className="flex h-full flex-col space-y-3 p-5">
<div className="flex flex-col space-y-3 overflow-y-auto p-5">
<DashboardEditTitles
onUpdateDashboard={onUpdateDashboard}
allowEdit={allowEdit}

2
web/src/components/charts/BusterChartJS/BusterChartJSComponent.tsx
View File

@ -183,7 +183,7 @@ export const BusterChartJSComponent = React.memo(
<React.Fragment>
<Chart
className={className}
ref={ref}
// ref={ref}
options={options}
data={data}
type={type}

131
web/src/context/Dashboards/MOCK_DASHBOARD.ts
View File

@ -4,10 +4,39 @@ import {
VerificationStatus
} from '@/api/asset_interfaces';
import { ShareRole } from '@/api/asset_interfaces';
import { createMockMetric } from '../Metrics/MOCK_METRIC';
const mockMetric1 = createMockMetric('123456');
const mockMetric2 = createMockMetric('123');
import {
createMockMetric,
mockMetric1,
mockMetric2,
mockMetric3,
mockMetric4,
mockMetric5,
mockMetric6,
mockMetric7,
mockMetric8,
mockMetric9,
mockMetric10,
mockMetric11,
mockMetric12,
mockMetric13,
mockMetric14,
mockMetric15,
mockMetric16,
mockMetric17,
mockMetric18,
mockMetric19,
mockMetric20,
mockMetric21,
mockMetric22,
mockMetric23,
mockMetric24,
mockMetric25,
mockMetric26,
mockMetric27,
mockMetric28,
mockMetric29,
mockMetric30
} from '../Metrics/MOCK_METRIC';
const MOCK_DASHBOARD: BusterDashboard = {
id: '123',
@ -22,10 +51,65 @@ const MOCK_DASHBOARD: BusterDashboard = {
config: {
rows: [
{
id: 'my-row',
columnSizes: [12],
items: [{ id: mockMetric2.id }]
id: 'row-1',
columnSizes: [3, 3, 3, 3],
items: [
{ id: mockMetric1.id },
{ id: mockMetric2.id },
{ id: mockMetric3.id },
{ id: mockMetric4.id }
]
},
{
id: 'row-2',
columnSizes: [4, 4, 4],
items: [{ id: mockMetric5.id }, { id: mockMetric6.id }, { id: mockMetric7.id }]
},
{
id: 'row-3',
columnSizes: [6, 6],
items: [{ id: mockMetric8.id }, { id: mockMetric9.id }]
},
{
id: 'row-4',
columnSizes: [3, 3, 6],
items: [{ id: mockMetric10.id }, { id: mockMetric11.id }, { id: mockMetric12.id }]
}
// {
// id: 'row-5',
// columnSizes: [6, 3, 3],
// items: [{ id: mockMetric13.id }, { id: mockMetric14.id }, { id: mockMetric15.id }]
// }
// {
// id: 'row-6',
// columnSizes: [4, 4, 4],
// items: [{ id: mockMetric16.id }, { id: mockMetric17.id }, { id: mockMetric18.id }]
// }
// {
// id: 'row-6-5',
// columnSizes: [12],
// items: [{ id: mockMetric19.id }]
// },
// {
// id: 'row-7',
// columnSizes: [3, 3, 6],
// items: [{ id: mockMetric20.id }, { id: mockMetric21.id }, { id: mockMetric22.id }]
// },
// {
// id: 'row-8',
// columnSizes: [6, 3, 3],
// items: [{ id: mockMetric23.id }, { id: mockMetric24.id }, { id: mockMetric25.id }]
// },
// {
// id: 'row-9',
// columnSizes: [4, 4, 4],
// items: [{ id: mockMetric26.id }, { id: mockMetric27.id }, { id: mockMetric28.id }]
// },
// {
// id: 'row-10',
// columnSizes: [6, 6],
// items: [{ id: mockMetric29.id }, { id: mockMetric30.id }]
// }
]
},
sharingKey: 'mock-sharing-key',
@ -38,7 +122,38 @@ const MOCK_DASHBOARD: BusterDashboard = {
export const MOCK_DASHBOARD_RESPONSE: BusterDashboardResponse = {
access: ShareRole.EDITOR,
metrics: [mockMetric2],
metrics: [
mockMetric1,
mockMetric2,
mockMetric3,
mockMetric4,
mockMetric5,
mockMetric6,
mockMetric7,
mockMetric8,
mockMetric9,
mockMetric10,
mockMetric11,
mockMetric12,
mockMetric13,
mockMetric14,
mockMetric15
// mockMetric16,
// mockMetric17,
// mockMetric18
// mockMetric19,
// mockMetric20,
// mockMetric21,
// mockMetric22,
// mockMetric23,
// mockMetric24,
// mockMetric25,
// mockMetric26,
// mockMetric27,
// mockMetric28,
// mockMetric29,
// mockMetric30
],
dashboard: MOCK_DASHBOARD,
permission: ShareRole.EDITOR,
public_password: null,

35
web/src/context/MetricData/BusterMetricDataProvider.tsx
View File

@ -1,4 +1,4 @@
import React, { PropsWithChildren, useCallback, useRef, useState, useTransition } from 'react';
import React, { PropsWithChildren, useCallback, useRef, useTransition } from 'react';
import {
createContext,
ContextSelector,
@ -21,7 +21,12 @@ const useMetricData = () => {
(metricId: string, newMetricData: Partial<BusterMetricData>) => {
metricDataRef.current = {
...metricDataRef.current,
[metricId]: { ...metricDataRef.current[metricId], ...newMetricData, metricId }
[metricId]: {
...DEFAULT_MESSAGE_DATA,
...metricDataRef.current[metricId],
...newMetricData,
metricId
}
};
startTransition(() => {
//trigger re-render
@ -31,12 +36,12 @@ const useMetricData = () => {
const _onGetFetchingData = useMemoizedFn((payload: MetricEvent_fetchingData) => {
const { data, data_metadata, code, progress, metric_id: metricId } = payload;
const currentMetric = getMetricData(metricId);
const currentMetric = getDataByMetricId(metricId);
const fallbackData = data || currentMetric?.data;
const fallbackDataMetadata = data_metadata || currentMetric?.data_metadata;
const isCompleted = progress === 'completed';
onSetMetricData({
onSetDataForMetric({
metricId,
data: fallbackData,
data_metadata: fallbackDataMetadata,
@ -47,7 +52,7 @@ const useMetricData = () => {
});
});
const onSetMetricData = useMemoizedFn(
const onSetDataForMetric = useMemoizedFn(
({
metricId,
data,
@ -66,7 +71,7 @@ const useMetricData = () => {
code: string | null;
}) => {
const setKey = isDataFromRerun ? 'dataFromRerun' : 'data';
const prev = getMetricData(metricId);
const prev = getDataByMetricId(metricId);
_setMetricData(metricId, {
[setKey]: data,
fetchedAt: Date.now(),
@ -85,7 +90,7 @@ const useMetricData = () => {
);
const fetchDataByMetricId = useMemoizedFn(async ({ metricId }: { metricId: string }) => {
const selectedMetricData = getMetricData(metricId);
const selectedMetricData = getDataByMetricId(metricId);
if (selectedMetricData?.fetching || selectedMetricData?.fetched) {
return;
@ -98,11 +103,11 @@ const useMetricData = () => {
setTimeout(() => {
//TODO: remove mock data
// _setMetricData(metricId, { ...MOCK_DATA, fetched: true });
onSetMetricData({
onSetDataForMetric({
...MOCK_DATA,
metricId
});
}, 1800);
}, Math.random() * 10800);
return await busterSocket.emitAndOnce({
emitEvent: {
@ -116,17 +121,17 @@ const useMetricData = () => {
});
});
const getMetricData = useCallback(
const getDataByMetricId = useCallback(
(metricId: string | undefined) => {
if (metricId && metricDataRef.current[metricId]) {
return metricDataRef.current[metricId];
}
return DEFAULT_MESSAGE_DATA;
return { ...DEFAULT_MESSAGE_DATA, metricId };
},
[isPending]
);
const getAllMetricDataMemoized = useMemoizedFn(
const getDataByMetricIdMemoized = useMemoizedFn(
(metricId: string): BusterMetricData | undefined => {
return metricDataRef.current[metricId];
}
@ -142,10 +147,10 @@ const useMetricData = () => {
return {
metricData: metricDataRef.current,
onSetMetricDataCode,
onSetMetricData,
onSetDataForMetric,
fetchDataByMetricId,
getMetricData,
getAllMetricDataMemoized
getDataByMetricId,
getDataByMetricIdMemoized
};
};

17
web/src/context/Metrics/BusterMetricsProvider.tsx
View File

@ -17,7 +17,7 @@ import { RustApiError } from '@/api/buster_rest/errors';
import { resolveEmptyMetric, upgradeMetricToIMetric } from './helpers';
import { MetricUpdateMetric } from '@/api/buster_socket/metrics';
import { useBusterMetricDataContextSelector } from '../MetricData';
import { MOCK_METRIC } from './MOCK_METRIC';
import { createMockMetric, MOCK_METRIC } from './MOCK_METRIC';
import { useUpdateMetricConfig } from './useUpdateMetricConfig';
import { useUpdateMetricAssosciations } from './useUpdateMetricAssosciations';
@ -37,7 +37,7 @@ export const useBusterMetrics = () => {
});
const setMetrics = useMemoizedFn((newMetrics: Record<string, IBusterMetric>) => {
metricsRef.current = { ...newMetrics };
metricsRef.current = { ...metricsRef.current, ...newMetrics };
startTransition(() => {
//trigger a rerender
});
@ -89,7 +89,7 @@ export const useBusterMetrics = () => {
const upgradedMetric = upgradeMetricToIMetric(newMetric, oldMetric);
onUpdateMetric(upgradedMetric);
onUpdateMetric(upgradedMetric, false);
});
const _setLoadingMetric = useMemoizedFn((metricId: string) => {
@ -143,10 +143,7 @@ export const useBusterMetrics = () => {
//TODO: remove this
setTimeout(() => {
_onGetMetricState({
...MOCK_METRIC,
id: metricId
});
_onGetMetricState(createMockMetric(metricId));
}, 300);
return await busterSocket.emitAndOnce({
@ -277,12 +274,12 @@ export const useBusterMetricIndividual = ({ metricId }: { metricId: string }) =>
const subscribeToMetric = useBusterMetricsContextSelector((x) => x.subscribeToMetric);
const fetchDataByMetricId = useBusterMetricDataContextSelector((x) => x.fetchDataByMetricId);
const metric = useBusterMetricsContextSelector((x) => x.metrics[metricId]);
const metricData = useBusterMetricDataContextSelector(({ getMetricData }) =>
getMetricData(metricId)
const metricData = useBusterMetricDataContextSelector(({ getDataByMetricId }) =>
getDataByMetricId(metricId)
);
useMount(() => {
// subscribeToMetric({ metricId });
subscribeToMetric({ metricId });
fetchDataByMetricId({ metricId });
});

45
web/src/context/Metrics/MOCK_METRIC.ts
View File

@ -58,12 +58,12 @@ const dataMetadata: DataMetadata = {
row_count: 10
};
export const MOCK_METRIC: IBusterMetric = {
id: '123',
title: 'Mock Metric',
export const MOCK_METRIC = (id = ''): IBusterMetric => ({
id: id || '123',
title: id + ' - ' + faker.lorem.words({ min: 2, max: 6 }),
version_number: 1,
file_name: 'mock_metric.yml',
description: faker.lorem.sentence(33),
file_name: `${faker.lorem.words({ min: 1, max: 3 })}.yml`,
description: faker.commerce.productName(),
data_source_id: '6840fa04-c0d7-4e0e-8d3d-ea9190d93874',
time_frame: '1d',
type: 'metric',
@ -152,11 +152,42 @@ SELECT * FROM records;`,
publicly_accessible: false,
public_password: '',
permission: ShareRole.OWNER
};
});
export const createMockMetric = (id: string): IBusterMetric => {
return {
...MOCK_METRIC,
...MOCK_METRIC(id),
id
};
};
export const mockMetric1 = createMockMetric('number1');
export const mockMetric2 = createMockMetric('number2');
export const mockMetric3 = createMockMetric('number3');
export const mockMetric4 = createMockMetric('number4');
export const mockMetric5 = createMockMetric('number5');
export const mockMetric6 = createMockMetric('number6');
export const mockMetric7 = createMockMetric('number7');
export const mockMetric8 = createMockMetric('number8');
export const mockMetric9 = createMockMetric('number9');
export const mockMetric10 = createMockMetric('number10');
export const mockMetric11 = createMockMetric('number11');
export const mockMetric12 = createMockMetric('number12');
export const mockMetric13 = createMockMetric('number13');
export const mockMetric14 = createMockMetric('number14');
export const mockMetric15 = createMockMetric('number15');
export const mockMetric16 = createMockMetric('number16');
export const mockMetric17 = createMockMetric('number17');
export const mockMetric18 = createMockMetric('number18');
export const mockMetric19 = createMockMetric('number19');
export const mockMetric20 = createMockMetric('number20');
export const mockMetric21 = createMockMetric('number21');
export const mockMetric22 = createMockMetric('number22');
export const mockMetric23 = createMockMetric('number23');
export const mockMetric24 = createMockMetric('number24');
export const mockMetric25 = createMockMetric('number25');
export const mockMetric26 = createMockMetric('number26');
export const mockMetric27 = createMockMetric('number27');
export const mockMetric28 = createMockMetric('number28');
export const mockMetric29 = createMockMetric('number29');
export const mockMetric30 = createMockMetric('number30');

14
web/src/context/SQL/useSQLProvider.tsx
View File

@ -17,9 +17,9 @@ import { runSQL as runSQLRest } from '@/api/buster_rest';
export const useSQLProvider = () => {
const { openSuccessNotification } = useBusterNotifications();
const onUpdateMetric = useBusterMetricsContextSelector((x) => x.onUpdateMetric);
const onSetMetricData = useBusterMetricDataContextSelector((x) => x.onSetMetricData);
const getAllMetricDataMemoized = useBusterMetricDataContextSelector(
(x) => x.getAllMetricDataMemoized
const onSetDataForMetric = useBusterMetricDataContextSelector((x) => x.onSetDataForMetric);
const getDataByMetricIdMemoized = useBusterMetricDataContextSelector(
(x) => x.getDataByMetricIdMemoized
);
const updateMetricToServer = useBusterMetricsContextSelector((x) => x.updateMetricToServer);
const getMetric = useBusterMetricsContextSelector((x) => x.getMetricMemoized);
@ -44,7 +44,7 @@ export const useSQLProvider = () => {
if (metricId) {
const { data, data_metadata } = d;
const metricMessage = getMetric({ metricId });
const currentMessageData = getAllMetricDataMemoized(metricId);
const currentMessageData = getDataByMetricIdMemoized(metricId);
if (!originalConfigs.current[metricId]) {
originalConfigs.current[metricId] = {
chartConfig: metricMessage?.chart_config!,
@ -63,7 +63,7 @@ export const useSQLProvider = () => {
? simplifyChatConfigForSQLChange(metricMessage.chart_config, data_metadata)
: metricMessage.chart_config;
onSetMetricData({
onSetDataForMetric({
metricId,
data,
isDataFromRerun: true,
@ -114,7 +114,7 @@ export const useSQLProvider = () => {
id: metricId,
chart_config: oldConfig
});
onSetMetricData({
onSetDataForMetric({
metricId,
data: originalConfigs.current[metricId]?.data!,
data_metadata: originalConfigs.current[metricId]?.dataMetadata!,
@ -165,7 +165,7 @@ export const useSQLProvider = () => {
setWarnBeforeNavigating(false);
if (originalConfigs.current[metricId]) {
onSetMetricData({
onSetDataForMetric({
metricId,
data: originalConfigs.current[metricId]?.data!,
data_metadata: originalConfigs.current[metricId]?.dataMetadata!,