All files / core/blong-browser/src/viewers PodLogViewer.tsx

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React, {useEffect, useState} from 'react';
import type {ICommanderViewerProps} from './registry.js';
 
/**
 * PodLogViewer — monospace container-log leaf viewer.
 * Base for Kubernetes pod logs. Expects the fetcher to resolve
 * `{logs: string}` (see the `{ns}.pod.log` adapter operation).
 */
export function PodLogViewer({fetch, data, className}: ICommanderViewerProps) {
    const [fetched, setFetched] = useState<unknown>(undefined);
 
    useEffect(() => {
        if (!fetch || data !== undefined) return;
        let cancelled = false;
        void fetch().then(result => {
            if (!cancelled) setFetched(result);
        });
        return () => {
            cancelled = true;
        };
    }, [data, fetch]);
 
    const logs =
        data !== undefined
            ? typeof data === 'string'
                ? data
                : JSON.stringify(data, null, 2)
            : (() => {
                  const r = fetched as {logs?: string} | undefined;
                  if (!r) return '';
                  return typeof r.logs === 'string' ? r.logs : JSON.stringify(r, null, 2);
              })();
 
    return (
        <pre
            className={`blong-viewer blong-viewer-log ${className ?? ''}`}
            style={{
                margin: 0,
                padding: '0.5rem',
                overflow: 'auto',
                fontFamily: 'monospace',
                fontSize: '0.8rem',
                lineHeight: 1.35,
                whiteSpace: 'pre-wrap',
                wordBreak: 'break-all',
                background: 'var(--surface-overlay)',
                borderRadius: 'var(--border-radius)',
            }}
        >
            {logs || 'No logs.'}
        </pre>
    );
}