Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | 7x 1x 1x 1x 1x 1x 1x 5x 3x | import React from 'react';
import type {ICommanderViewerProps} from './registry.js';
import {useViewerContent, viewerLabelStyle, viewerRowStyle, viewerValueStyle} from './util.js';
const MESSAGE_FIELDS = ['topic', 'partition', 'offset', 'key', 'timestamp'];
/**
* MessageViewer — Kafka message leaf viewer.
* Renders the message envelope fields (topic/partition/offset/key/timestamp)
* plus the value (pretty-printed when it parses as JSON).
*/
export function MessageViewer({node, fetch, data, className}: ICommanderViewerProps) {
const content = useViewerContent(node, fetch, data);
const message = (content && typeof content === 'object' ? content : {}) as Record<string, unknown>;
let prettyValue = String(message.value ?? '');
try {
prettyValue = JSON.stringify(JSON.parse(prettyValue), null, 2);
} catch {
// keep raw text
}
return (
<div
className={`blong-viewer blong-viewer-message ${className ?? ''}`}
style={{padding: '0.75rem'}}
>
{MESSAGE_FIELDS.filter(field => message[field] !== undefined && message[field] !== null).map(
field => (
<div key={field} style={viewerRowStyle}>
<span style={viewerLabelStyle}>{field}</span>
<span style={viewerValueStyle}>{String(message[field])}</span>
</div>
),
)}
{message.value !== undefined && message.value !== null && (
<div style={{marginTop: '0.5rem'}}>
<div style={viewerLabelStyle}>value</div>
<pre
style={{
margin: '0.25rem 0 0',
padding: '0.5rem',
background: 'var(--surface-overlay)',
borderRadius: 'var(--border-radius)',
fontSize: '0.8rem',
whiteSpace: 'pre-wrap',
wordBreak: 'break-all',
}}
>
{prettyValue}
</pre>
</div>
)}
</div>
);
}
|