Skip to content

vmui: support collapse/expand for nested JSON in JSON view #1265

@func25

Description

@func25

Is your feature request related to a problem? Please describe

The current JSON view in vmui renders logs as pretty-printed text only. This makes nested JSON (with dot in field name) hard to inspect when logs contain large objects or arrays, since users cannot collapse or expand sections interactively.

{
    "_msg": "[2026-04-05T14:31:22.416Z] \"GET /api/cart HTTP/1.1\" 200 - via_upstream - \"-\" 0 24 15 14 \"-\" \"python-requests/2.32.5\" \"e0698bfb-ddb9-929a-bf8f-e8fb4fb769cf\" \"frontend-proxy:8080\" \"10.71.129.233:8080\" frontend 10.71.12.27:55800 10.71.12.27:8080 10.71.12.37:47226 - -\n",
    "_stream": "{collector=\"otel-collector\",k8s.namespace.name=\"play-otel\",k8s.pod.name=\"frontend-proxy-6f796d6c45-gwdq9\",service.name=\"frontend-proxy\"}",
    "_stream_id": "0000000000000000d9334d35f128ed7347a3f4f195ef79b4",
    "_time": "2026-04-05T14:31:22.41606Z",
    "collector": "otel-collector",
    "destination.address": "10.71.129.233",
    "event.name": "proxy.access",
    "host.name": "otel-collector-b9dd8f965-4h8zs",
    "k8s.deployment.name": "frontend-proxy",
    "k8s.namespace.name": "play-otel",
    "k8s.node.name": "gke-sandbox-n2d-std-8-202603301026051-852214e6-6vfd",
    "k8s.pod.ip": "10.71.12.27",
    "k8s.pod.name": "frontend-proxy-6f796d6c45-gwdq9",
    "k8s.pod.start_time": "2026-03-30T10:51:32Z",
    "k8s.pod.uid": "d217068a-1b28-4e3b-b55d-e96d2acf2d4e",
    "log_name": "otel_envoy_access_log",
    "os.type": "linux",
    "scope.name": "unknown",
    "scope.version": "unknown",
    "server.address": "10.71.12.27:8080",
    "service.instance.id": "d217068a-1b28-4e3b-b55d-e96d2acf2d4e",
    "service.name": "frontend-proxy",
    "severity": "Unspecified",
    "source.address": "10.71.12.37",
    "span_id": "cbdd7cbd5c42d5df",
    "trace_id": "4fa6ff21e7bb3730df593322e8e71eef",
    "upstream.cluster": "frontend",
    "upstream.host": "10.71.129.233:8080",
    "url.full": "http://frontend-proxy:8080/api/cart",
    "url.path": "/api/cart",
    "url.query": "-",
    "url.template": "-",
    "user_agent.original": "python-requests/2.32.5"
}

Describe the solution you'd like

Render JSON logs with a tree-style viewer instead of plain text, with support for collapsing and expanding nested objects and arrays

This would make the JSON view much more usable for structured logs with deep nesting.

Describe alternatives you've considered

  1. Showing JSON with collapse and expand functionality could be misleading. In that case, it may be helpful to add a tree view instead: app/vmui: add Tree View tab to explore nest json fields with indented structure #1093. The downside is that this introduces additional cognitive load to the UI.
  2. Add a dedicated button in the JSON view to toggle expand/collapse mode

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or requestweb-uiIssues related to the user interface: layout, styling, usability, or UI-specific bugs.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions