wisemapping-frontend/packages/webapp/src/classes/client/client-health-sentinel/index.tsx

import { useSelector } from 'react-redux';
import React from "react";
import { activeInstanceStatus, ClientStatus } from '../../../redux/clientSlice';
import { FormattedMessage } from 'react-intl';
import Dialog from '@material-ui/core/Dialog';
import DialogTitle from '@material-ui/core/DialogTitle';
import DialogContent from '@material-ui/core/DialogContent';
import Alert from '@material-ui/lab/Alert';
import DialogActions from '@material-ui/core/DialogActions';
import Button from '@material-ui/core/Button';
import AlertTitle from '@material-ui/lab/AlertTitle';

const ClientHealthSentinel = (): React.ReactElement => {
    const status: ClientStatus = useSelector(activeInstanceStatus);

    const handleOnClose = () => {
        window.location.href = '/c/login';
    }

    return (
        <div>
            <Dialog
                open={status.state != 'healthy'}
                onClose={handleOnClose}
                maxWidth="sm"
                fullWidth={true}>

                <DialogTitle>
                    <FormattedMessage id="expired.title" defaultMessage="Your session has expired" />
                </DialogTitle>

                <DialogContent>
                    <Alert severity="error">
                        <AlertTitle><FormattedMessage id="expired.description" defaultMessage="Your current session has expired. Please, sign in and try again." /></AlertTitle>
                    </Alert>
                </DialogContent>

                <DialogActions>
                    <Button
                        type="button"
                        color="primary"
                        size="medium"
                        onClick={handleOnClose} >
                        <FormattedMessage id="action.close-button" defaultMessage="Close" />
                    </Button>
                </DialogActions>

            </Dialog>
        </div>
    )
};
export default ClientHealthSentinel;