feat(ui): mqtt status on config page

api/src/controllers/status.controller.js

@@ -0,0 +1,5 @@
+const { connected } = require('../util/mqtt.util');
+
+module.exports.mqtt = (req, res) => {
+  res.send({ status: connected() });
+};

api/src/routes/index.js

@@ -14,6 +14,7 @@ router.use('/train', require('./train.routes'));
 router.use('/storage', require('./storage.routes'));
 router.use('/proxy', require('./proxy.routes'));
 router.use('/logger', require('./logger.routes'));
+router.use('/status', require('./status.routes'));
 
 router.use(STORAGE.TMP.PATH, express.static(STORAGE.TMP.PATH));
 router.all('*', (req, res) => res.status(NOT_FOUND).error(`${req.originalUrl} not found`));

api/src/routes/status.routes.js

@@ -0,0 +1,8 @@
+const express = require('express');
+const { mqtt } = require('../controllers/status.controller');
+
+const router = express.Router();
+
+router.get('/mqtt', mqtt);
+
+module.exports = router;

api/src/util/mqtt.util.js

@@ -302,3 +302,5 @@ module.exports.publish = (data) => {
   const messages = single ? [{ ...data }] : data;
   messages.forEach((message) => CLIENT.publish(message.topic, message.message, { retain: true }));
 };
+
+module.exports.connected = () => CLIENT.connected;

frontend/src/views/Config.vue

@@ -201,6 +201,11 @@ export default {
       version,
       buildTag: null,
     },
+    mqtt: {
+      configured: false,
+      status: null,
+      name: 'MQTT',
+    },
     frigate: {
       configured: false,
       status: null,
@@ -249,9 +254,11 @@ export default {
   },
   computed: {
     combined() {
-      return this.frigate.configured
-        ? [{ ...this.doubleTake }, { ...this.frigate }, ...this.services]
-        : [{ ...this.doubleTake }, ...this.services];
+      const extra = [];
+      if (this.mqtt.configured) extra.push(this.mqtt);
+      if (this.frigate.configured) extra.push(this.frigate);
+
+      return [{ ...this.doubleTake }, ...extra, ...this.services];
     },
   },
   methods: {
@@ -335,12 +342,23 @@ export default {
         this.frigate.status = status;
       }
     },
+    async checkMQTT() {
+      try {
+        const { data } = await ApiService.get('status/mqtt');
+        this.mqtt.status = data.status ? 200 : 500;
+      } catch (error) {
+        this.mqtt.status = 500;
+      }
+    },
     async checkDetectors() {
       const { data } = await ApiService.get('config?format=json');
 
-      this.frigate.configured = data.frigate && data.frigate.url;
+      this.frigate.configured = data.frigate?.url;
       if (this.frigate.configured) this.checkFrigate(data.frigate.url);
 
+      this.mqtt.configured = data.mqtt?.host;
+      if (this.mqtt.configured) this.checkMQTT();
+
       this.services = data?.detectors
         ? Object.keys(data.detectors).map((item) => ({ name: this.formatName(item), status: null }))
         : [];
@@ -382,6 +400,7 @@ export default {
           delete detector.status;
         });
         delete this.doubleTake.status;
+        delete this.mqtt.status;
         delete this.frigate.status;
         this.waitForRestart();
       } catch (error) {