import React from 'react' ; import BpfViewer , { formatEvents } from 'shared/components/BpfViewer' ; import useTtyBpfMapper from './useTtyBpfMapper' ; export default function BpfLogs ( { tty , events , split } ) { const cursor = useTtyBpfMapper ( tty , events ) ; const ref = React . useRef ( ) ; React . useEffect ( ( ) => { const { session , editor } = ref . current ; const length = session . getLength ( ) ; const doc = session . getDocument ( ) ; if ( cursor === 0 ) { doc . removeFullLines ( 0 , length ) ; editor . insert ( formatEvents ( [ events [ 0 ] ] ) . join ( '\n' ) ) ; } else if ( cursor > length ) { const sliced = formatEvents ( events . slice ( length , cursor ) ) ; const formatted = `\n${ sliced . join ( '\n' ) }` ; session . insert ( { row : length , column : 0 } , formatted ) ; } else if ( cursor < length ) { doc . removeFullLines ( cursor , length ) ; } editor . gotoLine ( cursor ) ; } , [ cursor ] ) ; React . useEffect ( ( ) => { ref . current . editor . resize ( ) ; } , [ split ] ) ; return < BpfViewer showGutter = { false } ref = { ref } events = { [ ] } / > ; }