From 438d31c9d76e895c4843306e02b680e69e9f74ae Mon Sep 17 00:00:00 2001 From: Julian Bez Date: Thu, 8 Feb 2024 08:57:16 +0000 Subject: [PATCH] fix: Fix auto refresh toggle (#20174) * Clean up cause of error Warning: You provided a `checked` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultChecked`. Otherwise, set either `onChange` or `readOnly`. * Fix refresh logic * Consolidate refresh --- .../src/lib/lemon-ui/LemonRadio/LemonRadio.tsx | 18 ++++++++++-------- .../src/scenes/dashboard/DashboardItems.tsx | 2 +- .../scenes/dashboard/DashboardReloadAction.tsx | 13 ++++++++----- .../scenes/dashboard/dashboardLogic.test.ts | 2 +- .../src/scenes/dashboard/dashboardLogic.tsx | 17 +++++++++++------ .../src/scenes/insights/InsightPageHeader.tsx | 2 +- 6 files changed, 32 insertions(+), 22 deletions(-) diff --git a/frontend/src/lib/lemon-ui/LemonRadio/LemonRadio.tsx b/frontend/src/lib/lemon-ui/LemonRadio/LemonRadio.tsx index de04bca2a0781..03fb7ecbdb326 100644 --- a/frontend/src/lib/lemon-ui/LemonRadio/LemonRadio.tsx +++ b/frontend/src/lib/lemon-ui/LemonRadio/LemonRadio.tsx @@ -26,6 +26,7 @@ export function LemonRadio({ {options.map((option) => { const content = ( ) - return option.disabledReason ? ( - - {content} - - ) : ( - content - ) + if (option.disabledReason) { + return ( + + {content} + + ) + } + return content })} ) diff --git a/frontend/src/scenes/dashboard/DashboardItems.tsx b/frontend/src/scenes/dashboard/DashboardItems.tsx index 079f3a9631cef..0c5156c4c4c88 100644 --- a/frontend/src/scenes/dashboard/DashboardItems.tsx +++ b/frontend/src/scenes/dashboard/DashboardItems.tsx @@ -138,7 +138,7 @@ export function DashboardItems(): JSX.Element { highlighted={highlightedInsightId && insight.short_id === highlightedInsightId} updateColor={(color) => updateTileColor(tile.id, color)} ribbonColor={tile.color} - refresh={() => refreshAllDashboardItems({ tiles: [tile], action: 'refresh_manual' })} + refresh={() => refreshAllDashboardItems({ tiles: [tile], action: 'refresh' })} rename={() => renameInsight(insight)} duplicate={() => duplicateInsight(insight)} showDetailsControls={placement != DashboardPlacement.Export} diff --git a/frontend/src/scenes/dashboard/DashboardReloadAction.tsx b/frontend/src/scenes/dashboard/DashboardReloadAction.tsx index bda68b97bc5ad..86ce333aa1cc7 100644 --- a/frontend/src/scenes/dashboard/DashboardReloadAction.tsx +++ b/frontend/src/scenes/dashboard/DashboardReloadAction.tsx @@ -14,11 +14,14 @@ export const LastRefreshText = (): JSX.Element => { return Last updated {lastRefreshed ? dayjs(lastRefreshed).fromNow() : 'a while ago'} } -// in seconds +const refreshIntervalSeconds = [1800, 3600] +if (process.env.NODE_ENV === 'development') { + refreshIntervalSeconds.push(10) +} const intervalOptions = [ - ...Array.from([1800, 3600], (v) => ({ - label: humanFriendlyDuration(v), - value: v, + ...Array.from(refreshIntervalSeconds, (value) => ({ + label: humanFriendlyDuration(value), + value: value, })), ] @@ -61,7 +64,7 @@ export function DashboardReloadAction(): JSX.Element { id="auto-refresh-picker" >
diff --git a/frontend/src/scenes/dashboard/dashboardLogic.test.ts b/frontend/src/scenes/dashboard/dashboardLogic.test.ts index baf761f3e98f9..3ff6ee22c6b98 100644 --- a/frontend/src/scenes/dashboard/dashboardLogic.test.ts +++ b/frontend/src/scenes/dashboard/dashboardLogic.test.ts @@ -579,7 +579,7 @@ describe('dashboardLogic', () => { await expectLogic(logic, () => { logic.actions.refreshAllDashboardItems({ tiles: [dashboards['5'].tiles[0]], - action: 'refresh_manual', + action: 'refresh', }) }) .toFinishAllListeners() diff --git a/frontend/src/scenes/dashboard/dashboardLogic.tsx b/frontend/src/scenes/dashboard/dashboardLogic.tsx index 821def0390e35..c36b1f31c6fab 100644 --- a/frontend/src/scenes/dashboard/dashboardLogic.tsx +++ b/frontend/src/scenes/dashboard/dashboardLogic.tsx @@ -912,7 +912,7 @@ export const dashboardLogic = kea([ refreshAllDashboardItemsManual: () => { // reset auto refresh interval actions.resetInterval() - actions.refreshAllDashboardItems({ action: 'refresh_manual' }) + actions.refreshAllDashboardItems({ action: 'refresh' }) }, refreshAllDashboardItems: async ({ tiles, action, initialLoad, dashboardQueryId = uuid() }, breakpoint) => { if (!props.id) { @@ -949,9 +949,7 @@ export const dashboardLogic = kea([ let refreshesFinished = 0 let totalResponseBytes = 0 - const hardRefreshWithoutCache = ['refresh_manual', 'refresh_above_threshold', 'load_missing'].includes( - action - ) + const hardRefreshWithoutCache = ['refresh', 'load_missing'].includes(action) // array of functions that reload each item const fetchItemFunctions = insights.map((insight) => async () => { @@ -1076,8 +1074,15 @@ export const dashboardLogic = kea([ } if (values.autoRefresh.enabled) { + // Refresh right now after enabling if we haven't refreshed recently + if ( + values.lastRefreshed && + values.lastRefreshed.isBefore(now().subtract(values.autoRefresh.interval, 'seconds')) + ) { + actions.refreshAllDashboardItems({ action: 'refresh' }) + } cache.autoRefreshInterval = window.setInterval(() => { - actions.refreshAllDashboardItems({ action: 'refresh_automatic' }) + actions.refreshAllDashboardItems({ action: 'refresh' }) }, values.autoRefresh.interval * 1000) } }, @@ -1097,7 +1102,7 @@ export const dashboardLogic = kea([ values.lastRefreshed.isBefore(now().subtract(AUTO_REFRESH_DASHBOARD_THRESHOLD_HOURS, 'hours')) && !process.env.STORYBOOK // allow mocking of date in storybook without triggering refresh ) { - actions.refreshAllDashboardItems({ action: 'refresh_above_threshold', initialLoad, dashboardQueryId }) + actions.refreshAllDashboardItems({ action: 'refresh', initialLoad, dashboardQueryId }) allLoaded = false } else { const tilesWithNoResults = values.tiles?.filter((t) => !!t.insight && !t.insight.result) || [] diff --git a/frontend/src/scenes/insights/InsightPageHeader.tsx b/frontend/src/scenes/insights/InsightPageHeader.tsx index f5a7e358f26b3..ae9e70553e79c 100644 --- a/frontend/src/scenes/insights/InsightPageHeader.tsx +++ b/frontend/src/scenes/insights/InsightPageHeader.tsx @@ -180,7 +180,7 @@ export function InsightPageHeader({ insightLogicProps }: { insightLogicProps: In toggleQueryEditorPanel() }} fullWidth - label="View Source" + label="View source" /> {hogQL && ( <>