diff --git a/ui/src/pages/Dashboard/Dashboard.module.css b/ui/src/pages/Dashboard/Dashboard.module.css index 2272aba6..efb40da7 100644 --- a/ui/src/pages/Dashboard/Dashboard.module.css +++ b/ui/src/pages/Dashboard/Dashboard.module.css @@ -239,6 +239,22 @@ opacity: 1; } +/* Attributes cell in table */ +.attrCell { + display: flex; + gap: 4px; + align-items: center; +} + +.attrOverflow { + font-size: 10px; + color: var(--text-muted); +} + +.muted { + color: var(--text-muted); +} + /* Open full details link in panel */ .openDetailLink { background: transparent; diff --git a/ui/src/pages/Dashboard/Dashboard.tsx b/ui/src/pages/Dashboard/Dashboard.tsx index 30fcc1d1..23cffd7d 100644 --- a/ui/src/pages/Dashboard/Dashboard.tsx +++ b/ui/src/pages/Dashboard/Dashboard.tsx @@ -123,6 +123,27 @@ function buildBaseColumns(): Column[] { {row.applicationName ?? ''} ), }, + { + key: 'attributes', + header: 'Attributes', + render: (_, row) => { + const attrs = row.attributes; + if (!attrs || Object.keys(attrs).length === 0) return ; + const entries = Object.entries(attrs); + const shown = entries.slice(0, 2); + const overflow = entries.length - 2; + return ( +
+ {shown.map(([k, v]) => ( + + + + ))} + {overflow > 0 && +{overflow}} +
+ ); + }, + }, { key: 'executionId', header: 'Exchange ID',