Improve restart from UI

frigate/mqtt.py

@@ -90,7 +90,10 @@ def create_mqtt_client(config: FrigateConfig, camera_metrics):
         client.publish(state_topic, payload, retain=True)
 
     def on_restart_command(client, userdata, message):
-        restart_frigate(client, mqtt_config.topic_prefix)
+        payload = message.payload.decode()
+
+        if payload == "please_restart":
+            restart_frigate()
 
     def on_connect(client, userdata, flags, rc):
         threading.current_thread().name = "mqtt"

frigate/util.py

@@ -519,14 +519,9 @@ def clipped(obj, frame_shape):
         return False
 
 
-def restart_frigate(mqtt_client, topic_prefix, from_ui = 1):
-
-    def on_publish(client,userdata,result):
+def restart_frigate():
     os.kill(os.getpid(), signal.SIGKILL)
 
-    mqtt_client.on_publish = on_publish
-    mqtt_client.publish(f"{topic_prefix}/restarted", int(from_ui))
-
 
 class EventsPerSecond:
     def __init__(self, max_events=1000):

web/src/components/DialogRestart.jsx

@@ -4,57 +4,43 @@ import { useCallback, useEffect, useState } from 'preact/hooks';
 import { useRestart } from '../api/mqtt';
 
 export default function DialogRestart({ show, setShow }) {
-  const { payload: detectRestarted = null, send: sendRestart } = useRestart();
-  const [dialogTitle, setDialogTitle] = useState('Restart in progress');
 
   useEffect(() => {
-    if (detectRestarted != null && Number.isInteger(detectRestarted)) {
-      if (!detectRestarted) {
-        setDialogTitle('Server-initiated startup');
-      }
-      setShow(false);
-    }
-  }, [detectRestarted]); // eslint-disable-line react-hooks/exhaustive-deps
+    if (show === 2) {
+      sendRestart('please_restart');
+      setTimeout(async () => {
+        const delay = (ms) => new Promise(res => setTimeout(res, ms));
 
-  const waitPlease = async () => {
-    const delay = ms => new Promise(res => setTimeout(res, ms));
-    await delay(3456);
-    /* eslint-disable no-constant-condition */
-    while (true) {
+        while (show === 2) {
           try {
             const response = await fetch('/api/config', { method: 'GET' });
             if (await response.status === 200) {
-          window.location.reload();
+              setShow(0);
+              continue;
             }
           }
           catch (e) {}
           await delay(987);
         }
-  };
+        window.location.reload();
 
-  const handleClick = useCallback(() => {
-    sendRestart();
-    setShow(false);
-    waitPlease();
-  }, [show]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  const handleDismiss = useCallback(() => {
-    setShow(false);
+      }, 3456);
+    }
   }, [show]); // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
     <Fragment>
-      {show ? (
+      {show === 2 ? (
+        <Dialog title="Restart in progress" text="This page should refresh as soon as the server is up and running…" />
+      ) : show === 1 && (
         <Dialog
-          onDismiss={handleDismiss}
+          onDismiss={() => setShow(0)}
           title="Restart Frigate"
           text="Are you sure?"
           actions={[
-            { text: 'Yes', color: 'red', onClick: handleClick },
-            { text: 'Cancel', onClick: handleDismiss } ]}
+            { text: 'Yes', color: 'red', onClick: () => setShow(2) },
+            { text: 'Cancel', onClick: () => setShow(0) } ]}
         />
-      ) : detectRestarted != null && (
-        <Dialog title={dialogTitle} text="This page should refresh as soon as the server is up and running…" />
       )}
     </Fragment>
   );