16679: Adds AutoLogout component that closes the session if configured.

When Workbench.IdleTimeout is set to a non-zero value, it is used to
check for user inactivity; 1 minute before closing the session, a warning
snackbar is displayed until the session is auto-closed or user activity is
detected.

Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas@di-pentima.com.ar>

diff --git a/package.json b/package.json
index 57c6e311a212eeec8566b4fb7bafd91f2d79468d..346d4910c19bb51899bf6e71f5626ae5e05aeb5b 100644 (file)
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
     "lodash.mergewith": "4.6.2",
     "lodash.template": "4.5.0",
     "mem": "4.0.0",
+    "parse-duration": "0.4.4",
     "prop-types": "15.7.2",
     "query-string": "6.9.0",
     "react": "16.8.6",
@@ -47,6 +48,7 @@
     "react-dom": "16.8.6",
     "react-dropzone": "5.1.1",
     "react-highlight-words": "0.14.0",
+    "react-idle-timer": "4.3.6",
     "react-redux": "5.0.7",
     "react-router": "4.3.1",
     "react-router-dom": "4.3.1",

diff --git a/src/common/config.ts b/src/common/config.ts
index dd812c65bb488cce168fa6a178b4529a0cc58206..0f935602917e0829b8416aa8794aa2d8453b0277 100644 (file)
--- a/src/common/config.ts
+++ b/src/common/config.ts
@@ -58,6 +58,7 @@ export interface ClusterConfigJSON {
         SSHHelpPageHTML: string;
         SSHHelpHostSuffix: string;
         SiteName: string;
+        IdleTimeout: string;
     };
     Login: {
         LoginCluster: string;
@@ -216,6 +217,7 @@ export const mockClusterConfigJSON = (config: Partial<ClusterConfigJSON>): Clust
         SSHHelpPageHTML: "",
         SSHHelpHostSuffix: "",
         SiteName: "",
+        IdleTimeout: "0s",
     },
     Login: {
         LoginCluster: "",

diff --git a/src/views-components/auto-logout/auto-logout.tsx b/src/views-components/auto-logout/auto-logout.tsx
new file mode 100644 (file)
index 0000000..52a1950
--- /dev/null
+++ b/src/views-components/auto-logout/auto-logout.tsx
@@ -0,0 +1,72 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import { connect } from "react-redux";
+import { useIdleTimer } from "react-idle-timer";
+import { Dispatch } from "redux";
+
+import { RootState } from "~/store/store";
+import { SnackbarKind, snackbarActions } from "~/store/snackbar/snackbar-actions";
+import { logout } from "~/store/auth/auth-action";
+import parse from "parse-duration";
+import * as React from "react";
+import { min } from "lodash";
+
+interface AutoLogoutDataProps {
+    sessionIdleTimeout: number;
+    lastWarningDuration: number;
+}
+
+interface AutoLogoutActionProps {
+    doLogout: () => void;
+    doWarn: (message: string, duration: number) => void;
+    doCloseWarn: () => void;
+}
+
+const mapStateToProps = (state: RootState, ownProps: any): AutoLogoutDataProps => {
+    return {
+        sessionIdleTimeout: parse(state.auth.config.clusterConfig.Workbench.IdleTimeout, 's') || 0,
+        lastWarningDuration: ownProps.lastWarningDuration || 60,
+    };
+};
+
+const mapDispatchToProps = (dispatch: Dispatch): AutoLogoutActionProps => ({
+    doLogout: () => dispatch<any>(logout(true)),
+    doWarn: (message: string, duration: number) =>
+        dispatch(snackbarActions.OPEN_SNACKBAR({
+            message, hideDuration: duration, kind: SnackbarKind.WARNING })),
+    doCloseWarn: () => dispatch(snackbarActions.CLOSE_SNACKBAR()),
+});
+
+type AutoLogoutProps = AutoLogoutDataProps & AutoLogoutActionProps;
+
+export const AutoLogout = connect(mapStateToProps, mapDispatchToProps)(
+    (props: AutoLogoutProps) => {
+        let logoutTimer: NodeJS.Timer;
+        const lastWarningDuration = min([props.lastWarningDuration, props.sessionIdleTimeout])! * 1000 ;
+
+        const handleOnIdle = () => {
+            logoutTimer = setTimeout(
+                () => props.doLogout(), lastWarningDuration);
+            props.doWarn(
+                "Your session is about to be closed due to inactivity",
+                lastWarningDuration);
+        };
+
+        const handleOnActive = () => {
+            clearTimeout(logoutTimer);
+            props.doCloseWarn();
+        };
+
+        useIdleTimer({
+            timeout: (props.lastWarningDuration < props.sessionIdleTimeout)
+                ? 1000 * (props.sessionIdleTimeout - props.lastWarningDuration)
+                : 1,
+            onIdle: handleOnIdle,
+            onActive: handleOnActive,
+            debounce: 500
+        });
+
+        return <span />;
+    });

diff --git a/src/views/main-panel/main-panel-root.tsx b/src/views/main-panel/main-panel-root.tsx
index 5806f5b8276593a7a101f66f7ef3c39bdf6f2f6e..acaa43ad2b8b67741ae6babf238d65f38cf832fa 100644 (file)
--- a/src/views/main-panel/main-panel-root.tsx
+++ b/src/views/main-panel/main-panel-root.tsx
@@ -31,13 +31,14 @@ export interface MainPanelRootDataProps {
     isNotLinking: boolean;
     isLinkingPath: boolean;
     siteBanner: string;
+    sessionIdleTimeout: number;
 }
 
 type MainPanelRootProps = MainPanelRootDataProps & WithStyles<CssRules>;
 
 export const MainPanelRoot = withStyles(styles)(
     ({ classes, loading, working, user, buildInfo, uuidPrefix,
-        isNotLinking, isLinkingPath, siteBanner }: MainPanelRootProps) =>
+        isNotLinking, isLinkingPath, siteBanner, sessionIdleTimeout }: MainPanelRootProps) =>
         loading
             ? <WorkbenchLoadingScreen />
             : <>
@@ -53,7 +54,7 @@ export const MainPanelRoot = withStyles(styles)(
                 <Grid container direction="column" className={classes.root}>
                     {user
                         ? (user.isActive || (!user.isActive && isLinkingPath)
-                            ? <WorkbenchPanel isNotLinking={isNotLinking} isUserActive={user.isActive} />
+                            ? <WorkbenchPanel isNotLinking={isNotLinking} isUserActive={user.isActive} sessionIdleTimeout={sessionIdleTimeout} />
                             : <InactivePanel />)
                         : <LoginPanel />}
                 </Grid>

diff --git a/src/views/main-panel/main-panel.tsx b/src/views/main-panel/main-panel.tsx
index 5828c6db9054e8fc980a7029b174f7f6816c5893..edbf5cc4c7886f6473ff6a7d28c31c91d29ae283 100644 (file)
--- a/src/views/main-panel/main-panel.tsx
+++ b/src/views/main-panel/main-panel.tsx
@@ -4,6 +4,7 @@
 
 import { RootState } from '~/store/store';
 import { connect } from 'react-redux';
+import parse from 'parse-duration';
 import { MainPanelRoot, MainPanelRootDataProps } from '~/views/main-panel/main-panel-root';
 import { isSystemWorking } from '~/store/progress-indicator/progress-indicator-reducer';
 import { isWorkbenchLoading } from '~/store/workbench/workbench-actions';
@@ -19,7 +20,8 @@ const mapStateToProps = (state: RootState): MainPanelRootDataProps => {
         uuidPrefix: state.auth.localCluster,
         isNotLinking: state.linkAccountPanel.status === LinkAccountPanelStatus.NONE || state.linkAccountPanel.status === LinkAccountPanelStatus.INITIAL,
         isLinkingPath: state.router.location ? matchLinkAccountRoute(state.router.location.pathname) !== null : false,
-        siteBanner: state.auth.config.clusterConfig.Workbench.SiteName
+        siteBanner: state.auth.config.clusterConfig.Workbench.SiteName,
+        sessionIdleTimeout: parse(state.auth.config.clusterConfig.Workbench.IdleTimeout, 's') || 0
     };
 };
 

diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index 906c649c293404371fb68fc9994f454bd488c31e..b0f90894a91ed4bd68b514061b2c21df60ee07b0 100644 (file)
--- a/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@ -98,6 +98,7 @@ import { FedLogin } from './fed-login';
 import { CollectionsContentAddressPanel } from '~/views/collection-content-address-panel/collection-content-address-panel';
 import { AllProcessesPanel } from '../all-processes-panel/all-processes-panel';
 import { NotFoundPanel } from '../not-found-panel/not-found-panel';
+import { AutoLogout } from '~/views-components/auto-logout/auto-logout';
 
 type CssRules = 'root' | 'container' | 'splitter' | 'asidePanel' | 'contentWrapper' | 'content';
 
@@ -132,6 +133,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
 interface WorkbenchDataProps {
     isUserActive: boolean;
     isNotLinking: boolean;
+    sessionIdleTimeout: number;
 }
 
 type WorkbenchPanelProps = WithStyles<CssRules> & WorkbenchDataProps;
@@ -148,6 +150,7 @@ const saveSplitterSize = (size: number) => localStorage.setItem('splitterSize',
 export const WorkbenchPanel =
     withStyles(styles)((props: WorkbenchPanelProps) =>
         <Grid container item xs className={props.classes.root}>
+            { props.sessionIdleTimeout > 0 && <AutoLogout />}
             <Grid container item xs className={props.classes.container}>
                 <SplitterLayout customClassName={props.classes.splitter} percentage={true}
                     primaryIndex={0} primaryMinSize={10}

diff --git a/yarn.lock b/yarn.lock
index 742db46569dd5fa57f5db3662f79b8d6d08df7b1..842d6cf837166f6369177b2ee8b64ae9002c0993 100644 (file)
--- a/yarn.lock
+++ b/yarn.lock
@@ -8010,6 +8010,11 @@ parse-asn1@^5.0.0:
     pbkdf2 "^3.0.3"
     safe-buffer "^5.1.1"
 
+parse-duration@0.4.4:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/parse-duration/-/parse-duration-0.4.4.tgz#11c0f51a689e97d06c57bd772f7fda7dc013243c"
+  integrity sha512-KbAJuYGUhZkB9gotDiKLnZ7Z3VTacK3fgwmDdB6ZVDtJbMBT6MfLga0WJaYpPDu0mzqT0NgHtHDt5PY4l0nidg==
+
 parse-glob@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/parse-glob/-/parse-glob-3.0.4.tgz#b2c376cfb11f35513badd173ef0bb6e3a388391c"
@@ -8948,6 +8953,11 @@ react-highlight-words@0.14.0:
     memoize-one "^4.0.0"
     prop-types "^15.5.8"
 
+react-idle-timer@4.3.6:
+  version "4.3.6"
+  resolved "https://registry.yarnpkg.com/react-idle-timer/-/react-idle-timer-4.3.6.tgz#bdf56cee6ccc8c144ece18d152b3e304e13f3fa2"
+  integrity sha512-sJS4w123E4HkuM/l3j8FTVl0St6ghGA22Ich/Nz/luJSM4MEA6PvSwEBaAXLx3uCLB1fK7CACjvB4ozW3uWuCA==
+
 react-is@^16.4.2, react-is@^16.6.3, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.6, react-is@^16.9.0:
   version "16.11.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.11.0.tgz#b85dfecd48ad1ce469ff558a882ca8e8313928fa"