diff --git a/frontend/src/pages/SnapshotDashboard.tsx b/frontend/src/pages/SnapshotDashboard.tsx
index ac435dc..7e373b7 100644
--- a/frontend/src/pages/SnapshotDashboard.tsx
+++ b/frontend/src/pages/SnapshotDashboard.tsx
@@ -491,17 +491,18 @@ function highlightIni(text: string): React.ReactNode[] {
let node: React.ReactNode
if (/^\s*[#;]/.test(line)) {
node = {line}
- } else if (/^\s*\[.+\]/.test(line)) {
+ } else if (/^\s*\[.+\]/.test(line) && !line.includes('=')) {
node = {line}
} else if (line.includes('=')) {
const eqIdx = line.indexOf('=')
const key = line.slice(0, eqIdx)
- const value = line.slice(eqIdx)
+ const eq = '='
+ const value = line.slice(eqIdx + 1)
node = (
<>
{key}
- {value.charAt(0)}
- {value.slice(1)}
+ {eq}
+ {highlightValue(value)}
>
)
} else {
@@ -511,6 +512,44 @@ function highlightIni(text: string): React.ReactNode[] {
})
}
+function highlightValue(value: string): React.ReactNode {
+ const parts: React.ReactNode[] = []
+ let i = 0
+ let key = 0
+ while (i < value.length) {
+ const ch = value[i]
+ if (ch === '"') {
+ const end = value.indexOf('"', i + 1)
+ if (end !== -1) {
+ const str = value.slice(i, end + 1)
+ parts.push({str})
+ i = end + 1
+ } else {
+ parts.push({value.slice(i)})
+ break
+ }
+ } else if (ch === '{' || ch === '}' || ch === '[' || ch === ']' || ch === ':' || ch === ',') {
+ parts.push({ch})
+ i++
+ } else if (/\d/.test(ch)) {
+ let num = ''
+ while (i < value.length && /[\d.]/.test(value[i])) {
+ num += value[i]
+ i++
+ }
+ parts.push({num})
+ } else if (value.slice(i).startsWith('true') || value.slice(i).startsWith('false') || value.slice(i).startsWith('null')) {
+ const word = value.slice(i).startsWith('true') ? 'true' : value.slice(i).startsWith('false') ? 'false' : 'null'
+ parts.push({word})
+ i += word.length
+ } else {
+ parts.push({ch})
+ i++
+ }
+ }
+ return <>{parts}>
+}
+
function DevicesList({
objId,
objName,