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 58 | 1x 1x 1x 1x 2x 2x 2x 1x 1x 1x | import React from 'react';
import type {ICommanderViewerProps} from './registry.js';
import {useViewerContent} from './util.js';
/** Minimal object → YAML-ish serializer (display only; no YAML dependency). */
function toYaml(value: unknown, indent = 0): string {
const pad = ' '.repeat(indent);
Iif (Array.isArray(value)) {
return value
.map(item =>
item !== null && typeof item === 'object'
? `${pad}-\n${toYaml(item, indent + 1)}`
: `${pad}- ${String(item)}`,
)
.join('\n');
}
Eif (value !== null && typeof value === 'object') {
return Object.entries(value as Record<string, unknown>)
.map(([key, val]) => {
Iif (val === null || val === undefined) return `${pad}${key}: null`;
Iif (typeof val === 'object')
return `${pad}${key}:\n${toYaml(val, indent + 1)}`;
return `${pad}${key}: ${typeof val === 'string' ? val : String(val)}`;
})
.join('\n');
}
return `${pad}${String(value)}`;
}
/**
* YamlViewer — YAML-ish manifest leaf viewer.
* Covers Kubernetes manifests and other declarative payloads. String content is
* shown as-is; objects/arrays are serialised in a readable YAML-like form.
*/
export function YamlViewer({node, fetch, data, className}: ICommanderViewerProps) {
const content = useViewerContent(node, fetch, data);
const text = typeof content === 'string' ? content : toYaml(content);
return (
<pre
className={`blong-viewer blong-viewer-yaml ${className ?? ''}`}
style={{
margin: 0,
padding: '0.75rem',
overflow: 'auto',
fontSize: '0.85rem',
lineHeight: 1.4,
whiteSpace: 'pre-wrap',
wordBreak: 'break-word',
background: 'var(--surface-overlay)',
borderRadius: 'var(--border-radius)',
}}
>
{text}
</pre>
);
}
|