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,