Get yaml validation working

frigate/http.py

@@ -680,7 +680,7 @@ def config_save():
     return "Config successfully saved, restarting...", 200
 
 
-@bp.route("/config/schema")
+@bp.route("/config/schema.json")
 def config_schema():
     return current_app.response_class(
         current_app.frigate_config.schema_json(), mimetype="application/json"

web/package-lock.json

@@ -13,6 +13,7 @@
         "date-fns": "^2.29.3",
         "idb-keyval": "^6.2.0",
         "immer": "^9.0.16",
+        "monaco-yaml": "^4.0.2",
         "preact": "^10.11.3",
         "preact-async-route": "^2.2.1",
         "preact-router": "^4.1.0",
@@ -1362,8 +1363,7 @@
     "node_modules/@types/json-schema": {
       "version": "7.0.11",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
-      "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
+      "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ=="
-      "dev": true
     },
     "node_modules/@types/ms": {
       "version": "0.7.31",
@@ -6258,6 +6258,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/jsonc-parser": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
+      "integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w=="
+    },
     "node_modules/jsx-ast-utils": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.3.tgz",
@@ -6605,6 +6610,56 @@
       "integrity": "sha512-FKc80TyiMaruhJKKPz5SpJPIjL+dflGvz4CpuThaPMc94AyN7SeC9HQ8hrvaxX7EyHdJcUY5i4D0gNyJj1vSZQ==",
       "peer": true
     },
+    "node_modules/monaco-marker-data-provider": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/monaco-marker-data-provider/-/monaco-marker-data-provider-1.1.1.tgz",
+      "integrity": "sha512-PGB7TJSZE5tmHzkxv/OEwK2RGNC2A7dcq4JRJnnj31CUAsfmw0Gl+1QTrH0W0deKhcQmQM0YVPaqgQ+0wCt8Mg==",
+      "funding": {
+        "url": "https://github.com/sponsors/remcohaszing"
+      },
+      "peerDependencies": {
+        "monaco-editor": ">=0.30.0"
+      }
+    },
+    "node_modules/monaco-worker-manager": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/monaco-worker-manager/-/monaco-worker-manager-2.0.1.tgz",
+      "integrity": "sha512-kdPL0yvg5qjhKPNVjJoym331PY/5JC11aPJXtCZNwWRvBr6jhkIamvYAyiY5P1AWFmNOy0aRDRoMdZfa71h8kg==",
+      "peerDependencies": {
+        "monaco-editor": ">=0.30.0"
+      }
+    },
+    "node_modules/monaco-yaml": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/monaco-yaml/-/monaco-yaml-4.0.2.tgz",
+      "integrity": "sha512-Wxn6CblkQDLOUusfi0eZ3qZhkuKYIrK7fXlkJOOG+W18zgKePbuZW0XNWpczlxDC27D753dB18pMnx4U7MZ3yg==",
+      "dependencies": {
+        "@types/json-schema": "^7.0.0",
+        "jsonc-parser": "^3.0.0",
+        "monaco-marker-data-provider": "^1.0.0",
+        "monaco-worker-manager": "^2.0.0",
+        "path-browserify": "^1.0.0",
+        "prettier": "^2.0.0",
+        "vscode-languageserver-textdocument": "^1.0.0",
+        "vscode-languageserver-types": "^3.0.0",
+        "vscode-uri": "^3.0.0",
+        "yaml": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/remcohaszing"
+      },
+      "peerDependencies": {
+        "monaco-editor": ">=0.30"
+      }
+    },
+    "node_modules/monaco-yaml/node_modules/yaml": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.1.3.tgz",
+      "integrity": "sha512-AacA8nRULjKMX2DvWvOAdBZMOfQlypSFkjcOcu9FalllIDJ1kvlREzcdIZmidQUqqeMv7jorHjq2HlLv/+c2lg==",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/mpd-parser": {
       "version": "0.21.1",
       "resolved": "https://registry.npmjs.org/mpd-parser/-/mpd-parser-0.21.1.tgz",
@@ -7188,6 +7243,11 @@
         "url": "https://github.com/inikulin/parse5?sponsor=1"
       }
     },
+    "node_modules/path-browserify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
+      "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g=="
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -7445,7 +7505,6 @@
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.0.tgz",
       "integrity": "sha512-9Lmg8hTFZKG0Asr/kW9Bp8tJjRVluO8EJQVfY2T7FMw9T5jy4I/Uvx0Rca/XWf50QQ1/SS48+6IJWnrb+2yemA==",
-      "dev": true,
       "bin": {
         "prettier": "bin-prettier.js"
       },
@@ -8850,6 +8909,21 @@
         }
       }
     },
+    "node_modules/vscode-languageserver-textdocument": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/vscode-languageserver-textdocument/-/vscode-languageserver-textdocument-1.0.7.tgz",
+      "integrity": "sha512-bFJH7UQxlXT8kKeyiyu41r22jCZXG8kuuVVA33OEJn1diWOZK5n8zBSPZFHVBOu8kXZ6h0LIRhf5UnCo61J4Hg=="
+    },
+    "node_modules/vscode-languageserver-types": {
+      "version": "3.17.2",
+      "resolved": "https://registry.npmjs.org/vscode-languageserver-types/-/vscode-languageserver-types-3.17.2.tgz",
+      "integrity": "sha512-zHhCWatviizPIq9B7Vh9uvrH6x3sK8itC84HkamnBWoDFJtzBf7SWlpLCZUit72b3os45h6RWQNC9xHRDF8dRA=="
+    },
+    "node_modules/vscode-uri": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.0.6.tgz",
+      "integrity": "sha512-fmL7V1eiDBFRRnu+gfRWTzyPpNIHJTc4mWnFkwBUmO9U3KPgJAmTx7oxi2bl/Rh6HLdU7+4C9wlj0k2E4AdKFQ=="
+    },
     "node_modules/w3c-xmlserializer": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz",
@@ -10175,8 +10249,7 @@
     "@types/json-schema": {
       "version": "7.0.11",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
-      "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
+      "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ=="
-      "dev": true
     },
     "@types/ms": {
       "version": "0.7.31",
@@ -13637,6 +13710,11 @@
       "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==",
       "dev": true
     },
+    "jsonc-parser": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
+      "integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w=="
+    },
     "jsx-ast-utils": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.3.tgz",
@@ -13896,6 +13974,42 @@
       "integrity": "sha512-FKc80TyiMaruhJKKPz5SpJPIjL+dflGvz4CpuThaPMc94AyN7SeC9HQ8hrvaxX7EyHdJcUY5i4D0gNyJj1vSZQ==",
       "peer": true
     },
+    "monaco-marker-data-provider": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/monaco-marker-data-provider/-/monaco-marker-data-provider-1.1.1.tgz",
+      "integrity": "sha512-PGB7TJSZE5tmHzkxv/OEwK2RGNC2A7dcq4JRJnnj31CUAsfmw0Gl+1QTrH0W0deKhcQmQM0YVPaqgQ+0wCt8Mg==",
+      "requires": {}
+    },
+    "monaco-worker-manager": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/monaco-worker-manager/-/monaco-worker-manager-2.0.1.tgz",
+      "integrity": "sha512-kdPL0yvg5qjhKPNVjJoym331PY/5JC11aPJXtCZNwWRvBr6jhkIamvYAyiY5P1AWFmNOy0aRDRoMdZfa71h8kg==",
+      "requires": {}
+    },
+    "monaco-yaml": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/monaco-yaml/-/monaco-yaml-4.0.2.tgz",
+      "integrity": "sha512-Wxn6CblkQDLOUusfi0eZ3qZhkuKYIrK7fXlkJOOG+W18zgKePbuZW0XNWpczlxDC27D753dB18pMnx4U7MZ3yg==",
+      "requires": {
+        "@types/json-schema": "^7.0.0",
+        "jsonc-parser": "^3.0.0",
+        "monaco-marker-data-provider": "^1.0.0",
+        "monaco-worker-manager": "^2.0.0",
+        "path-browserify": "^1.0.0",
+        "prettier": "^2.0.0",
+        "vscode-languageserver-textdocument": "^1.0.0",
+        "vscode-languageserver-types": "^3.0.0",
+        "vscode-uri": "^3.0.0",
+        "yaml": "^2.0.0"
+      },
+      "dependencies": {
+        "yaml": {
+          "version": "2.1.3",
+          "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.1.3.tgz",
+          "integrity": "sha512-AacA8nRULjKMX2DvWvOAdBZMOfQlypSFkjcOcu9FalllIDJ1kvlREzcdIZmidQUqqeMv7jorHjq2HlLv/+c2lg=="
+        }
+      }
+    },
     "mpd-parser": {
       "version": "0.21.1",
       "resolved": "https://registry.npmjs.org/mpd-parser/-/mpd-parser-0.21.1.tgz",
@@ -14308,6 +14422,11 @@
         "entities": "^4.4.0"
       }
     },
+    "path-browserify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
+      "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g=="
+    },
     "path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -14467,8 +14586,7 @@
     "prettier": {
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.0.tgz",
-      "integrity": "sha512-9Lmg8hTFZKG0Asr/kW9Bp8tJjRVluO8EJQVfY2T7FMw9T5jy4I/Uvx0Rca/XWf50QQ1/SS48+6IJWnrb+2yemA==",
+      "integrity": "sha512-9Lmg8hTFZKG0Asr/kW9Bp8tJjRVluO8EJQVfY2T7FMw9T5jy4I/Uvx0Rca/XWf50QQ1/SS48+6IJWnrb+2yemA=="
-      "dev": true
     },
     "pretty-format": {
       "version": "27.5.1",
@@ -15505,6 +15623,21 @@
         "vite": "^3.0.0"
       }
     },
+    "vscode-languageserver-textdocument": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/vscode-languageserver-textdocument/-/vscode-languageserver-textdocument-1.0.7.tgz",
+      "integrity": "sha512-bFJH7UQxlXT8kKeyiyu41r22jCZXG8kuuVVA33OEJn1diWOZK5n8zBSPZFHVBOu8kXZ6h0LIRhf5UnCo61J4Hg=="
+    },
+    "vscode-languageserver-types": {
+      "version": "3.17.2",
+      "resolved": "https://registry.npmjs.org/vscode-languageserver-types/-/vscode-languageserver-types-3.17.2.tgz",
+      "integrity": "sha512-zHhCWatviizPIq9B7Vh9uvrH6x3sK8itC84HkamnBWoDFJtzBf7SWlpLCZUit72b3os45h6RWQNC9xHRDF8dRA=="
+    },
+    "vscode-uri": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.0.6.tgz",
+      "integrity": "sha512-fmL7V1eiDBFRRnu+gfRWTzyPpNIHJTc4mWnFkwBUmO9U3KPgJAmTx7oxi2bl/Rh6HLdU7+4C9wlj0k2E4AdKFQ=="
+    },
     "w3c-xmlserializer": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz",

web/package.json

@@ -23,6 +23,7 @@
     "react": "npm:@preact/compat@^17.1.2",
     "react-dom": "npm:@preact/compat@^17.1.2",
     "vite-plugin-monaco-editor": "^1.1.0",
+    "monaco-yaml": "^4.0.2",
     "swr": "^1.3.0",
     "video.js": "^7.20.3",
     "videojs-playlist": "^5.0.0",

web/src/routes/Config.jsx

@@ -1,13 +1,17 @@
 import { h } from 'preact';
 import useSWR from 'swr';
 import axios from 'axios';
+import { useApiHost } from '../api';
 import ActivityIndicator from '../components/ActivityIndicator';
 import Heading from '../components/Heading';
 import { useEffect, useState } from 'preact/hooks';
 import Button from '../components/Button';
-import * as monaco from 'monaco-editor';
+import { editor, Uri } from 'monaco-editor';
+import { setDiagnosticsOptions } from 'monaco-yaml';
 
 export default function Config() {
+  const apiHost = useApiHost();
+
   const { data: config } = useSWR('config/raw');
   const [success, setSuccess] = useState();
   const [error, setError] = useState();
@@ -44,9 +48,25 @@ export default function Config() {
       return;
     }
 
-    window.editor = monaco.editor.create(document.getElementById('container'), {
+    const modelUri = Uri.parse('a://b/api/config/schema.json');
+
+    setDiagnosticsOptions({
+      enableSchemaRequest: true,
+      hover: true,
+      completion: true,
+      validate: true,
+      format: true,
+      schemas: [
+        {
+          uri: `${apiHost}/api/config/schema.json`,
+          fileMatch: [String(modelUri)],
+        },
+      ],
+    });
+
+    window.editor = editor.create(document.getElementById('container'), {
       language: 'yaml',
-      value: config,
+      model: editor.createModel(config, 'yaml', modelUri),
       scrollBeyondLastLine: false,
       theme: 'vs-dark',
     });

web/vite.config.ts

@@ -9,7 +9,9 @@ export default defineConfig({
   define: {
     'import.meta.vitest': 'undefined',
   },
-  plugins: [preact(), monacoEditorPlugin.default({})],
+  plugins: [preact(), monacoEditorPlugin.default({
+    customWorkers: [{label: 'yaml', entry: 'monaco-yaml/yaml.worker'}]
+  })],
   test: {
     environment: 'jsdom',
     alias: {