feat: add Attributes column to Dashboard exchanges table
Shows up to 2 attribute badges (color="auto") per row with a +N overflow indicator; empty rows render a muted dash. Uses CSS module classes only. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -239,6 +239,22 @@
|
|||||||
opacity: 1;
|
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 */
|
/* Open full details link in panel */
|
||||||
.openDetailLink {
|
.openDetailLink {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
|
|||||||
@@ -123,6 +123,27 @@ function buildBaseColumns(): Column<Row>[] {
|
|||||||
<span className={styles.appName}>{row.applicationName ?? ''}</span>
|
<span className={styles.appName}>{row.applicationName ?? ''}</span>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
key: 'attributes',
|
||||||
|
header: 'Attributes',
|
||||||
|
render: (_, row) => {
|
||||||
|
const attrs = row.attributes;
|
||||||
|
if (!attrs || Object.keys(attrs).length === 0) return <span className={styles.muted}>—</span>;
|
||||||
|
const entries = Object.entries(attrs);
|
||||||
|
const shown = entries.slice(0, 2);
|
||||||
|
const overflow = entries.length - 2;
|
||||||
|
return (
|
||||||
|
<div className={styles.attrCell}>
|
||||||
|
{shown.map(([k, v]) => (
|
||||||
|
<span key={k} title={k}>
|
||||||
|
<Badge label={String(v)} color="auto" />
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
{overflow > 0 && <span className={styles.attrOverflow}>+{overflow}</span>}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
{
|
{
|
||||||
key: 'executionId',
|
key: 'executionId',
|
||||||
header: 'Exchange ID',
|
header: 'Exchange ID',
|
||||||
|
|||||||
Reference in New Issue
Block a user