17951: Remove compute node ui and associated code
[arvados.git] / src / views-components / auto-logout / auto-logout.tsx
1 // Copyright (C) The Arvados Authors. All rights reserved.
2 //
3 // SPDX-License-Identifier: AGPL-3.0
4
5 import { connect } from "react-redux";
6 import { useIdleTimer } from "react-idle-timer";
7 import { Dispatch } from "redux";
8
9 import { RootState } from "store/store";
10 import { SnackbarKind, snackbarActions } from "store/snackbar/snackbar-actions";
11 import { logout } from "store/auth/auth-action";
12 import parse from "parse-duration";
13 import React from "react";
14 import { min } from "lodash";
15
16 interface AutoLogoutDataProps {
17     sessionIdleTimeout: number;
18     lastWarningDuration: number;
19 }
20
21 interface AutoLogoutActionProps {
22     doLogout: () => void;
23     doWarn: (message: string, duration: number) => void;
24     doCloseWarn: () => void;
25 }
26
27 const mapStateToProps = (state: RootState, ownProps: any): AutoLogoutDataProps => ({
28     sessionIdleTimeout: parse(state.auth.config.clusterConfig.Workbench.IdleTimeout, 's') || 0,
29     lastWarningDuration: ownProps.lastWarningDuration || 60,
30 });
31
32 const mapDispatchToProps = (dispatch: Dispatch): AutoLogoutActionProps => ({
33     doLogout: () => dispatch<any>(logout(true)),
34     doWarn: (message: string, duration: number) =>
35         dispatch(snackbarActions.OPEN_SNACKBAR({
36             message, hideDuration: duration, kind: SnackbarKind.WARNING })),
37     doCloseWarn: () => dispatch(snackbarActions.CLOSE_SNACKBAR()),
38 });
39
40 export type AutoLogoutProps = AutoLogoutDataProps & AutoLogoutActionProps;
41
42 const debounce = (delay: number | undefined, fn: Function) => {
43     let timerId: NodeJS.Timer | null;
44     return (...args: any[]) => {
45         if (timerId) { clearTimeout(timerId); }
46         timerId = setTimeout(() => {
47             fn(...args);
48             timerId = null;
49         }, delay);
50     };
51 };
52
53 export const LAST_ACTIVE_TIMESTAMP = 'lastActiveTimestamp';
54
55 export const AutoLogoutComponent = (props: AutoLogoutProps) => {
56     let logoutTimer: NodeJS.Timer;
57     const lastWarningDuration = min([props.lastWarningDuration, props.sessionIdleTimeout])! * 1000;
58
59     // Runs once after render
60     React.useEffect(() => {
61         window.addEventListener('storage', handleStorageEvents);
62         // Component cleanup
63         return () => {
64             window.removeEventListener('storage', handleStorageEvents);
65         };
66     });
67
68     const handleStorageEvents = (e: StorageEvent) => {
69         if (e.key === LAST_ACTIVE_TIMESTAMP) {
70             // Other tab activity detected by a localStorage change event.
71             debounce(500, () => {
72                 handleOnActive();
73                 reset();
74             })();
75         }
76     };
77
78     const handleOnIdle = () => {
79         logoutTimer = setTimeout(
80             () => props.doLogout(), lastWarningDuration);
81         props.doWarn(
82             "Your session is about to be closed due to inactivity",
83             lastWarningDuration);
84     };
85
86     const handleOnActive = () => {
87         if (logoutTimer) { clearTimeout(logoutTimer); }
88         props.doCloseWarn();
89     };
90
91     const handleOnAction = () => {
92         // Notify the other tabs there was some activity.
93         const now = (new Date()).getTime();
94         localStorage.setItem(LAST_ACTIVE_TIMESTAMP, now.toString());
95     };
96
97     const { reset } = useIdleTimer({
98         timeout: (props.lastWarningDuration < props.sessionIdleTimeout)
99             ? 1000 * (props.sessionIdleTimeout - props.lastWarningDuration)
100             : 1,
101         onIdle: handleOnIdle,
102         onActive: handleOnActive,
103         onAction: handleOnAction,
104         debounce: 500
105     });
106
107     return <span />;
108 };
109
110 export const AutoLogout = connect(mapStateToProps, mapDispatchToProps)(AutoLogoutComponent);