enchants reset/shutdown ux

xchwarze · xchwarze · commit cc4e9c82bc82 · 2026-05-28T01:03:32.000-03:00
diff --git a/frieren-front/src/components/SystemActionsDropdown/index.jsx b/frieren-front/src/components/SystemActionsDropdown/index.jsx
@@ -13,34 +13,45 @@ import useUserLogoutMutation from '@src/hooks/useUserLogoutMutation';
 import Icon from '@src/components/Icon';
 import ConfirmationModal from '@src/components/ConfirmationModal';
 import AboutModal from '@src/components/AboutModal';
+import SystemStatusModal from '@src/components/SystemStatusModal';
 
 /**
  * Actions for system control.
  */
 const RESET_ACTION = 'reset';
 const SHUTDOWN_ACTION = 'shutdown';
 
+const ACTION_TO_STATUS = {
+    [RESET_ACTION]: 'restart',
+    [SHUTDOWN_ACTION]: 'shutdown',
+};
+
 /**
  * Dropdown component for system actions including reset, shutdown, and logout.
- * Provides confirmation modals for reset and shutdown actions.
+ * Provides confirmation modals for reset and shutdown actions, and a status
+ * modal that tracks device state during restart or shutdown operations.
  *
- * @returns {ReactElement} The system actions dropdown with confirmation modals.
+ * @returns {ReactElement} The system actions dropdown with confirmation and status modals.
  */
 const SystemActionsDropdown = () => {
-    const { mutate: resetMutation } = useResetMutation();
-    const { mutate: shutDownMutation } = useShutDownMutation();
+    const resetMutation = useResetMutation();
+    const shutDownMutation = useShutDownMutation();
     const { mutate: logoffMutation } = useUserLogoutMutation();
     const [showConfirmModal, setShowConfirmModal] = useState(false);
     const [currentAction, setCurrentAction] = useState('');
+    const [systemStatus, setSystemStatus] = useState(null);
     const [showAbout, setShowAbout] = useState(false);
 
     const handleConfirm = () => {
-        if (currentAction === RESET_ACTION) {
-            resetMutation();
-        } else if (currentAction === SHUTDOWN_ACTION) {
-            shutDownMutation();
-        }
-        handleCloseModal();
+        const mutation = currentAction === RESET_ACTION ? resetMutation : shutDownMutation;
+        const status = ACTION_TO_STATUS[currentAction];
+
+        mutation.mutate(undefined, {
+            onSuccess: () => {
+                handleCloseModal();
+                setSystemStatus(status);
+            },
+        });
     };
 
     const handleOpenModal = (action) => {
@@ -53,6 +64,8 @@ const SystemActionsDropdown = () => {
         setCurrentAction('');
     };
 
+    const isActionPending = resetMutation.isPending || shutDownMutation.isPending;
+
     return (
         <>
             <NavDropdown title={<Icon name={'more-vertical'} />} align={'end'}>
@@ -76,11 +89,13 @@ const SystemActionsDropdown = () => {
                 onConfirm={handleConfirm}
                 title={`Confirm ${currentAction}`}
                 description={`Are you sure you want to ${currentAction} the hardware?`}
+                isConfirmLoading={isActionPending}
             />
             <AboutModal
                 show={showAbout}
                 onHide={() => setShowAbout(false)}
             />
+            <SystemStatusModal action={systemStatus} />
         </>
     );
 };
diff --git a/frieren-front/src/components/SystemStatusModal/index.jsx b/frieren-front/src/components/SystemStatusModal/index.jsx
@@ -0,0 +1,131 @@
+/*
+ * Project: Frieren Framework
+ * Copyright (C) 2026 DSR! <xchwarze@gmail.com>
+ * SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
+ * More info at: https://github.com/xchwarze/frieren
+ */
+import { useState, useEffect, useCallback } from 'react';
+import { Modal, Spinner } from 'react-bootstrap';
+import { useQueryClient } from '@tanstack/react-query';
+import { useSetAtom } from 'jotai';
+import { useLocation } from 'wouter';
+import PropTypes from 'prop-types';
+
+import authAtom from '@src/atoms/authAtom.js';
+import Icon from '@src/components/Icon';
+import { fetchPost } from '@src/services/fetchService.js';
+
+const REBOOT_POLL_INTERVAL = 20000;
+const SHUTDOWN_DISCONNECT_DELAY = 30000;
+
+/**
+ * Checks whether a fetch error indicates the device is unreachable (network failure or timeout).
+ *
+ * @param {Error} error - The error thrown by fetchPost.
+ * @return {boolean} True if the device could not be reached at all.
+ */
+const isDeviceUnreachable = (error) =>
+    error instanceof TypeError || error.message === 'Request timed out';
+
+/**
+ * Modal that displays device status during restart or shutdown operations.
+ * On restart: polls the server every 20 seconds and redirects to login when the device responds.
+ * On shutdown: shows a progress message, then a disconnect prompt after 30 seconds.
+ *
+ * @param {string|null} action - Current action: 'restart', 'shutdown', or null.
+ * @returns {ReactElement|null} The status modal or null when no action is active.
+ */
+const SystemStatusModal = ({ action }) => {
+    const setAuth = useSetAtom(authAtom);
+    const [, setLocation] = useLocation();
+    const queryClient = useQueryClient();
+    const [canDisconnect, setCanDisconnect] = useState(false);
+
+    const redirectToLogin = useCallback(() => {
+        setAuth(false);
+        setLocation('/');
+        queryClient.clear();
+    }, [setAuth, setLocation, queryClient]);
+
+    useEffect(() => {
+        if (action !== 'restart') return;
+
+        let timeoutId;
+        let cancelled = false;
+
+        const poll = async () => {
+            try {
+                await fetchPost({ module: 'header', action: 'serverPing' });
+                if (!cancelled) redirectToLogin();
+            } catch (error) {
+                if (!cancelled && !isDeviceUnreachable(error)) {
+                    redirectToLogin();
+                    return;
+                }
+            }
+
+            if (!cancelled) {
+                timeoutId = setTimeout(poll, REBOOT_POLL_INTERVAL);
+            }
+        };
+
+        timeoutId = setTimeout(poll, REBOOT_POLL_INTERVAL);
+
+        return () => {
+            cancelled = true;
+            clearTimeout(timeoutId);
+        };
+    }, [action, redirectToLogin]);
+
+    useEffect(() => {
+        if (action !== 'shutdown') return;
+
+        const timeoutId = setTimeout(() => {
+            setCanDisconnect(true);
+        }, SHUTDOWN_DISCONNECT_DELAY);
+
+        return () => clearTimeout(timeoutId);
+    }, [action]);
+
+    if (!action) {
+        return null;
+    }
+
+    if (action === 'restart') {
+        return (
+            <Modal show backdrop={'static'} keyboard={false} centered>
+                <Modal.Body className={'text-center py-5'}>
+                    <Spinner animation={'border'} className={'mb-3'} />
+                    <h5>Restarting device...</h5>
+                    <p className={'text-muted mb-0'}>Checking connectivity every 20 seconds</p>
+                </Modal.Body>
+            </Modal>
+        );
+    }
+
+    return (
+        <Modal show backdrop={'static'} keyboard={false} centered>
+            <Modal.Body className={'text-center py-5'}>
+                {canDisconnect ? (
+                    <>
+                        <div className={'mb-3'}>
+                            <Icon name={'check-circle'} style={{ fontSize: '2.5rem' }} />
+                        </div>
+                        <h5>You can now disconnect the device</h5>
+                    </>
+                ) : (
+                    <>
+                        <Spinner animation={'border'} className={'mb-3'} />
+                        <h5>Shutting down device...</h5>
+                    </>
+                )}
+            </Modal.Body>
+        </Modal>
+    );
+};
+
+SystemStatusModal.propTypes = {
+    action: PropTypes.oneOf(['restart', 'shutdown']),
+};
+
+export default SystemStatusModal;
diff --git a/frieren-front/src/hooks/useResetMutation.js b/frieren-front/src/hooks/useResetMutation.js
@@ -4,40 +4,21 @@
  * SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
  * More info at: https://github.com/xchwarze/frieren
  */
-import { useQueryClient } from '@tanstack/react-query';
-import { useSetAtom } from 'jotai'
-import { useLocation } from 'wouter';
-import { toast } from 'react-toastify';
-
-import authAtom from '@src/atoms/authAtom.js';
 import { fetchPost } from '@src/services/fetchService.js';
 import useAuthenticatedMutation from '@src/hooks/useAuthenticatedMutation.js';
 
 /**
- * Restart the real hardware.
+ * Sends a reboot command to the hardware.
  *
- * @return {Function} The mutation function
+ * @return {Object} The mutation object for hardware reset.
  */
-const useResetMutation = () => {
-  const queryClient = useQueryClient();
-  const setAuth = useSetAtom(authAtom)
-  const [, setLocation] = useLocation();
-
-  return useAuthenticatedMutation({
-    mutationFn: () => fetchPost({
-      module: 'header',
-      action: 'resetHardware',
-    }),
-    onSuccess: () => {
-      setAuth(false);
-      setLocation('/');
-      queryClient.clear();
-      toast.success('Device is rebooting');
-    },
-    onError: () => {
-      toast.error('Reboot failed');
-    }
-  });
-};
+const useResetMutation = () => (
+    useAuthenticatedMutation({
+        mutationFn: () => fetchPost({
+            module: 'header',
+            action: 'resetHardware',
+        }),
+    })
+);
 
 export default useResetMutation;
diff --git a/frieren-front/src/hooks/useShutDownMutation.js b/frieren-front/src/hooks/useShutDownMutation.js
@@ -4,40 +4,21 @@
  * SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
  * More info at: https://github.com/xchwarze/frieren
  */
-import { useQueryClient } from '@tanstack/react-query';
-import { useSetAtom } from 'jotai'
-import { useLocation } from 'wouter';
-import { toast } from 'react-toastify';
-
-import authAtom from '@src/atoms/authAtom.js';
 import { fetchPost } from '@src/services/fetchService.js';
 import useAuthenticatedMutation from '@src/hooks/useAuthenticatedMutation.js';
 
 /**
- * Shut down the real hardware.
+ * Sends a shutdown command to the hardware.
  *
- * @return {Function} The mutation function for user logout
+ * @return {Object} The mutation object for hardware shutdown.
  */
-const useShutDownMutation = () => {
-  const queryClient = useQueryClient();
-  const setAuth = useSetAtom(authAtom)
-  const [, setLocation] = useLocation();
-
-  return useAuthenticatedMutation({
-    mutationFn: () => fetchPost({
-      module: 'header',
-      action: 'shutDownHardware',
-    }),
-    onSuccess: () => {
-      setAuth(false);
-      setLocation('/');
-      queryClient.clear();
-      toast.success('Device is shutting down');
-    },
-    onError: () => {
-      toast.error('Shutdown failed');
-    }
-  });
-};
+const useShutDownMutation = () => (
+    useAuthenticatedMutation({
+        mutationFn: () => fetchPost({
+            module: 'header',
+            action: 'shutDownHardware',
+        }),
+    })
+);
 
 export default useShutDownMutation;
