From 7b3b42597ed52fb4f86924cc56142f4eedc9f3dd Mon Sep 17 00:00:00 2001
From: David Jakowenko <jakowenko@gmail.com>
Date: Thu, 30 Sep 2021 02:04:09 -0400
Subject: [PATCH] feat(ui): mqtt status on config page

---
 api/src/controllers/status.controller.js |  5 +++++
 api/src/routes/index.js                  |  1 +
 api/src/routes/status.routes.js          |  8 +++++++
 api/src/util/mqtt.util.js                |  2 ++
 frontend/src/views/Config.vue            | 27 ++++++++++++++++++++----
 5 files changed, 39 insertions(+), 4 deletions(-)
 create mode 100644 api/src/controllers/status.controller.js
 create mode 100644 api/src/routes/status.routes.js

diff --git a/api/src/controllers/status.controller.js b/api/src/controllers/status.controller.js
new file mode 100644
index 00000000..53723d19
--- /dev/null
+++ b/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() });
+};
diff --git a/api/src/routes/index.js b/api/src/routes/index.js
index 6e9147d2..a21406b6 100644
--- a/api/src/routes/index.js
+++ b/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`));
diff --git a/api/src/routes/status.routes.js b/api/src/routes/status.routes.js
new file mode 100644
index 00000000..841df0ed
--- /dev/null
+++ b/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;
diff --git a/api/src/util/mqtt.util.js b/api/src/util/mqtt.util.js
index fdccdeec..a289ea42 100644
--- a/api/src/util/mqtt.util.js
+++ b/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;
diff --git a/frontend/src/views/Config.vue b/frontend/src/views/Config.vue
index a227b3d5..e6136c3c 100644
--- a/frontend/src/views/Config.vue
+++ b/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) {