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 | 3x 3x 3x 3x 3x 3x 4x 3x 1x 1x 1x 1x 4x | /*
* Copyright 2021 Harness Inc. All rights reserved.
* Use of this source code is governed by the PolyForm Shield 1.0.0 license
* that can be found in the licenses directory at the root of this repository, also available at
* https://polyformproject.org/wp-content/uploads/2020/06/PolyForm-Shield-1.0.0.txt.
*/
import React from 'react'
import cx from 'classnames'
import { Spinner } from '@blueprintjs/core'
import { LogLine, LogLineProps } from './LogLine'
import css from './SimpleLogViewer.module.scss'
export interface SimpleLogViewerProps {
data: string
className?: string
loading?: boolean
}
export interface SimpleLogLineProps extends LogLineProps {
lineNumber: number
}
export function SimpleLogLine(props: SimpleLogLineProps) {
return (
<div className={css.line}>
<span className={css.lineNumber}>{props.lineNumber}</span>
<LogLine data={props.data} />
</div>
)
}
export function SimpleLogViewer(props: SimpleLogViewerProps): React.ReactElement {
const { data = '', className, loading } = props
const linesData = React.useMemo(() => {
return data.split(/\r?\n/)
}, [data])
return (
<div
className={cx(css.logViewer, className)}
style={{ '--char-size': `${linesData.length.toString().length + 1}ch` } as any}
>
{loading ? (
<Spinner />
) : (
<pre>
{linesData.map((row, index) => {
return <SimpleLogLine data={row} lineNumber={index + 1} key={`${row}_${index}`} />
})}
</pre>
)}
</div>
)
}
|