Skip to content

Commit 8c8a163

Browse files
asalem1asalem1
authored
feat: add auto refresh to notebooks (#3646)
1 parent 43e370d commit 8c8a163

File tree

7 files changed

+134
-88
lines changed

7 files changed

+134
-88
lines changed

‎src/dashboards/components/DashboardContainer.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ import {AUTOREFRESH_DEFAULT} from 'src/shared/constants'
2222
import {AppState, ResourceType, AutoRefreshStatus} from 'src/types'
2323

2424
// Notifications
25-
import {dashboardAutoRefreshTimeoutSuccess} from 'src/shared/copy/notifications'
25+
import {autoRefreshTimeoutSuccess} from 'src/shared/copy/notifications'
2626
import {notify} from 'src/shared/actions/notifications'
2727

2828
// History
@@ -48,7 +48,7 @@ const DashboardContainer: FC = () => {
4848

4949
const timeoutFunction = useCallback(() => {
5050
dispatch(resetAutoRefresh(`dashboard-${dashboardID}`))
51-
dispatch(notify(dashboardAutoRefreshTimeoutSuccess()))
51+
dispatch(notify(autoRefreshTimeoutSuccess()))
5252
GlobalAutoRefresher.onDisconnect()
5353
event('dashboards.autorefresh.dashboardcontainer.inactivitytimeout', {
5454
timeout: autoRefresh.inactivityTimeout,

‎src/flows/components/header/AutoRefreshButton.tsx

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
import React, {FC, useCallback, useContext, useEffect} from 'react'
2+
import {useDispatch, useSelector} from 'react-redux'
3+
import {Button, ComponentColor} from '@influxdata/clockface'
4+
import {PROJECT_NAME} from 'src/flows'
5+
import {AppState, AutoRefreshStatus} from 'src/types'
6+
import {resetAutoRefresh} from 'src/shared/actions/autoRefresh'
7+
import {dismissOverlay, showOverlay} from 'src/overlays/actions/overlays'
8+
import {GlobalAutoRefresher} from 'src/utils/AutoRefresher'
9+
import {notify} from 'src/shared/actions/notifications'
10+
import {autoRefreshTimeoutSuccess} from 'src/shared/copy/notifications'
11+
import {event} from 'src/cloud/utils/reporting'
12+
import {AUTOREFRESH_DEFAULT} from 'src/shared/constants'
13+
import {FlowContext} from 'src/flows/context/flow.current'
14+
import {FlowQueryContext} from 'src/flows/context/flow.query'
15+
import {isFlagEnabled} from 'src/shared/utils/featureFlag'
16+
17+
const AutoRefreshButton: FC = () => {
18+
const {flow} = useContext(FlowContext)
19+
const {queryAll} = useContext(FlowQueryContext)
20+
const dispatch = useDispatch()
21+
22+
const autoRefresh = useSelector(
23+
(state: AppState) =>
24+
state.autoRefresh?.[`${PROJECT_NAME}-${flow?.id}`] ?? AUTOREFRESH_DEFAULT
25+
)
26+
27+
const timeoutFunction = useCallback(() => {
28+
if (isFlagEnabled('flowAutoRefresh')) {
29+
dispatch(resetAutoRefresh(`${PROJECT_NAME}-${flow?.id}`))
30+
dispatch(notify(autoRefreshTimeoutSuccess()))
31+
GlobalAutoRefresher.onDisconnect()
32+
event('flow inactivitytimeout', {
33+
timeout: autoRefresh.inactivityTimeout,
34+
})
35+
}
36+
}, [autoRefresh.inactivityTimeout, flow?.id, dispatch])
37+
38+
const startTimeout = useCallback(() => {
39+
if (isFlagEnabled('flowAutoRefresh')) {
40+
GlobalAutoRefresher.startTimeout(
41+
timeoutFunction,
42+
autoRefresh.inactivityTimeout
43+
)
44+
}
45+
}, [autoRefresh.inactivityTimeout, timeoutFunction])
46+
47+
const stopFunc = useCallback(() => {
48+
if (isFlagEnabled('flowAutoRefresh')) {
49+
if (
50+
!autoRefresh.infiniteDuration &&
51+
new Date(autoRefresh?.duration?.upper).getTime() <= new Date().getTime()
52+
) {
53+
GlobalAutoRefresher.stopPolling()
54+
dispatch(resetAutoRefresh(`${PROJECT_NAME}-${flow?.id}`))
55+
}
56+
}
57+
}, [
58+
flow?.id,
59+
dispatch,
60+
autoRefresh?.duration?.upper,
61+
autoRefresh.infiniteDuration,
62+
])
63+
64+
useEffect(() => {
65+
if (isFlagEnabled('flowAutoRefresh')) {
66+
if (autoRefresh?.status === AutoRefreshStatus.Active) {
67+
GlobalAutoRefresher.poll(autoRefresh, stopFunc)
68+
if (autoRefresh.inactivityTimeout > 0) {
69+
GlobalAutoRefresher.onDisconnect()
70+
startTimeout()
71+
GlobalAutoRefresher.onConnect()
72+
}
73+
} else {
74+
GlobalAutoRefresher.onDisconnect()
75+
}
76+
}
77+
78+
return () => {
79+
if (isFlagEnabled('flowAutoRefresh')) {
80+
GlobalAutoRefresher.onDisconnect()
81+
GlobalAutoRefresher.stopPolling()
82+
}
83+
}
84+
}, [
85+
autoRefresh.interval,
86+
autoRefresh?.status,
87+
autoRefresh.inactivityTimeout,
88+
stopFunc,
89+
startTimeout,
90+
])
91+
92+
useEffect(() => {
93+
GlobalAutoRefresher.subscribe(queryAll)
94+
95+
return () => GlobalAutoRefresher.unsubscribe(queryAll)
96+
}, [queryAll])
97+
98+
const isActive = autoRefresh?.status === AutoRefreshStatus.Active
99+
100+
return (
101+
<Button
102+
text={
103+
isActive
104+
? `Refreshing Every ${autoRefresh?.label}`
105+
: 'Enable Auto Refresh'
106+
}
107+
color={isActive ? ComponentColor.Secondary : ComponentColor.Default}
108+
onClick={
109+
isActive
110+
? () => dispatch(resetAutoRefresh(`${PROJECT_NAME}-${flow?.id}`))
111+
: () =>
112+
dispatch(
113+
showOverlay(
114+
'toggle-auto-refresh',
115+
{id: `${PROJECT_NAME}-${flow?.id}`},
116+
() => dispatch(dismissOverlay())
117+
)
118+
)
119+
}
120+
testID="enable-auto-refresh-button"
121+
/>
122+
)
123+
}
124+
125+
export default AutoRefreshButton

‎src/flows/components/header/AutoRefreshDropdown.tsx

Lines changed: 0 additions & 42 deletions
This file was deleted.

‎src/flows/components/header/index.tsx

Lines changed: 4 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// Libraries
22
import React, {FC, useContext, useState, useEffect} from 'react'
33
import {useHistory, Link} from 'react-router-dom'
4-
import {useSelector, useDispatch} from 'react-redux'
4+
import {useSelector} from 'react-redux'
55

66
// Contexts
77
import {FlowContext} from 'src/flows/context/flow.current'
@@ -11,7 +11,6 @@ import {deletePinnedItemByParam} from 'src/shared/contexts/pinneditems'
1111

1212
// Components
1313
import {
14-
Button,
1514
Page,
1615
SquareButton,
1716
IconFont,
@@ -22,6 +21,7 @@ import {
2221
Dropdown,
2322
ErrorTooltip,
2423
} from '@influxdata/clockface'
24+
import AutoRefreshButton from 'src/flows/components/header/AutoRefreshButton'
2525
import TimeZoneDropdown from 'src/shared/components/TimeZoneDropdown'
2626
import TimeRangeDropdown from 'src/flows/components/header/TimeRangeDropdown'
2727
import Submit from 'src/flows/components/header/Submit'
@@ -38,15 +38,13 @@ import {
3838
postNotebooksShare,
3939
} from 'src/client/notebooksRoutes'
4040
import {event} from 'src/cloud/utils/reporting'
41-
import {dismissOverlay, showOverlay} from 'src/overlays/actions/overlays'
42-
import {resetAutoRefresh} from 'src/shared/actions/autoRefresh'
4341
import {serialize} from 'src/flows/context/flow.list'
4442
import {updatePinnedItemByParam} from 'src/shared/contexts/pinneditems'
4543
import {getOrg} from 'src/organizations/selectors'
4644
import {getAuthorizations} from 'src/client/generatedRoutes'
4745

4846
// Types
49-
import {AppState, AutoRefreshStatus, RemoteDataState} from 'src/types'
47+
import {RemoteDataState} from 'src/types'
5048

5149
// Constants
5250
import {
@@ -70,10 +68,6 @@ const FlowHeader: FC = () => {
7068
const {flow, updateOther} = useContext(FlowContext)
7169
const history = useHistory()
7270
const {id: orgID} = useSelector(getOrg)
73-
const autoRefresh = useSelector(
74-
(state: AppState) => state.autoRefresh?.[`${PROJECT_NAME}-${flow?.id}`]
75-
)
76-
const dispatch = useDispatch()
7771
const [sharing, setSharing] = useState(false)
7872
const [token, setToken] = useState<Token>()
7973
const [loadingToken, setLoadingToken] = useState(RemoteDataState.NotStarted)
@@ -219,8 +213,6 @@ const FlowHeader: FC = () => {
219213
</Dropdown.Item>
220214
))
221215

222-
const isActive = autoRefresh?.status === AutoRefreshStatus.Active
223-
224216
return (
225217
<>
226218
<Page.Header fullWidth>
@@ -241,34 +233,7 @@ const FlowHeader: FC = () => {
241233
<PresentationMode />
242234
<TimeZoneDropdown />
243235
<TimeRangeDropdown />
244-
{isFlagEnabled('flowAutoRefresh') && (
245-
<Button
246-
text={
247-
isActive
248-
? `Refreshing Every ${autoRefresh.label}`
249-
: 'Enable Auto Refresh'
250-
}
251-
color={
252-
isActive ? ComponentColor.Secondary : ComponentColor.Default
253-
}
254-
onClick={
255-
isActive
256-
? () =>
257-
dispatch(
258-
resetAutoRefresh(`${PROJECT_NAME}-${flow?.id}`)
259-
)
260-
: () =>
261-
dispatch(
262-
showOverlay(
263-
'toggle-auto-refresh',
264-
{id: `${PROJECT_NAME}-${flow?.id}`},
265-
() => dispatch(dismissOverlay())
266-
)
267-
)
268-
}
269-
testID="enable-auto-refresh-button"
270-
/>
271-
)}
236+
{isFlagEnabled('flowAutoRefresh') && <AutoRefreshButton />}
272237
{flow?.id && (
273238
<>
274239
<ConfirmationButton

‎src/flows/context/flow.current.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,6 @@ let GENERATOR_INDEX = 0
4545
export const FlowProvider: FC = ({children}) => {
4646
const {flows, update, currentID} = useContext(FlowListContext)
4747
const [currentFlow, setCurrentFlow] = useState<Flow>()
48-
4948
const provider = useRef<WebsocketProvider>()
5049
const yDoc = useRef(new Y.Doc())
5150
function disconnectProvider() {

‎src/shared/constants/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ export const AUTOREFRESH_DEFAULT = {
5757
duration: null,
5858
inactivityTimeout: 0,
5959
infiniteDuration: false,
60+
label: '',
6061
}
6162

6263
export const LAYOUT_MARGIN = 4

‎src/shared/copy/notifications.ts

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1353,13 +1353,11 @@ export const annotationsUnsupportedOnGraph = (
13531353
message: `${graphType} does not support adding annotations.`,
13541354
})
13551355

1356-
export const dashboardAutoRefreshTimeoutSuccess = (
1357-
time?: string
1358-
): Notification => ({
1356+
export const autoRefreshTimeoutSuccess = (time?: string): Notification => ({
13591357
...defaultSuccessNotification,
13601358
duration: INDEFINITE,
13611359
icon: IconFont.Clock_New,
1362-
message: `Your dashboard auto refresh settings have been reset due to inactivity ${
1360+
message: `Your auto refresh settings have been reset due to inactivity ${
13631361
time ? 'over the last' + time : ''
13641362
}`,
13651363
})

0 commit comments

Comments
 (0)