feat(ui): show config errors

api/src/controllers/status.controller.js

@@ -1,4 +1,6 @@
 const axios = require('axios');
+const config = require('../constants/config');
+const validate = require('../schemas/validate');
 const { tryParseJSON } = require('../util/validators.util');
 const mqtt = require('../util/mqtt.util');
 const { auth, jwt } = require('../util/auth.util');
@@ -32,3 +34,5 @@ module.exports.frigate = async (req, res) => {
 
   res.send({ version, last: { time, camera } });
 };
+
+module.exports.config = (req, res) => res.send(validate(config()));

api/src/routes/status.routes.js

@@ -1,9 +1,13 @@
 const express = require('express');
 const { jwt } = require('../middlewares');
-const { auth, mqtt, frigate } = require('../controllers/status.controller');
+const { auth, mqtt, frigate, config } = require('../controllers/status.controller');
 
 const router = express.Router();
 
-router.get('/auth', auth).get('/mqtt', jwt, mqtt).get('/frigate', jwt, frigate);
+router
+  .get('/auth', auth)
+  .get('/mqtt', jwt, mqtt)
+  .get('/frigate', jwt, frigate)
+  .get('/config', jwt, config);
 
 module.exports = router;

api/src/schemas/validate.js

@@ -1,17 +1,21 @@
 const { Validator } = require('jsonschema');
 const { config, detect, zones } = require('.');
 
-module.exports = (object) => {
+module.exports = (object, log = true) => {
   const v = new Validator();
   v.addSchema(detect);
   v.addSchema(zones);
 
+  const messages = [];
   const { errors } = v.validate(object, config);
   if (errors.length)
     console.error(`${errors.length} validation ${errors.length === 1 ? 'error' : 'errors'}`);
   errors.forEach((error) => {
     const path = !error.path.length ? 'config' : error.path.join('.');
     const instance = typeof error.instance === 'string' ? ` (${error.instance})` : '';
-    console.error(`${path}${instance} ${error.message}`);
+    const message = `${path}${instance} ${error.message}`;
+    if (log) console.error(message);
+    messages.push(message);
   });
+  return messages;
 };

frontend/src/views/Config.vue

@@ -17,7 +17,13 @@
             <div
               v-if="service.status"
               class="icon p-badge"
-              :class="service.status === 200 ? 'p-badge-success' : 'p-badge-danger'"
+              :class="
+                service.status === 200
+                  ? 'p-badge-success'
+                  : service.status === 'warn'
+                  ? 'p-badge-warning'
+                  : 'p-badge-danger'
+              "
             ></div>
             <div v-else class="icon pulse p-badge p-badge-secondary"></div>
           </div>
@@ -269,11 +275,13 @@ export default {
       this.updateHeight();
       await this.editorData();
       this.checkStatus();
+      this.checkForConfigErrors();
       this.checkDetectors();
 
       if (this.socket) {
         this.socket.on('connect', () => {
           if (this.waitForRestart) this.postRestart();
+          this.checkForConfigErrors();
           this.doubleTake.status = 200;
         });
         this.socket.on('disconnect', () => {
@@ -319,6 +327,13 @@ export default {
     },
   },
   methods: {
+    async checkForConfigErrors() {
+      ApiService.get('status/config').then(({ data: errors }) => {
+        if (errors.length) this.doubleTake.status = 'warn';
+        // eslint-disable-next-line no-restricted-syntax
+        for (const error of errors) this.emitter.emit('toast', { severity: 'warn', message: error, life: 5000 });
+      });
+    },
     async editorData() {
       this.loading = true;
       await this.getThemes();