1
+ import React , { FC } from 'react' ;
2
+
3
+ import { LogEvent , LogLevel } from './types' ;
4
+ import { Theme , makeStyles , Box } from '@material-ui/core' ;
5
+ import { useWindowSize } from '../components' ;
6
+ import { formatIsoDateTimeToHr } from '../ntp/TimeFormat' ;
7
+
8
+ interface LogEventConsoleProps {
9
+ events : LogEvent [ ] ;
10
+ }
11
+ interface Offsets {
12
+ topOffset : ( ) => number ;
13
+ leftOffset : ( ) => number ;
14
+ }
15
+
16
+ const topOffset = ( ) => document . getElementById ( 'system-tabs' ) ?. getBoundingClientRect ( ) . bottom || 0 ;
17
+ const leftOffset = ( ) => document . getElementById ( 'system-tabs' ) ?. getBoundingClientRect ( ) . left || 0 ;
18
+
19
+ const useStyles = makeStyles ( ( theme : Theme ) => ( {
20
+ console : {
21
+ padding : theme . spacing ( 2 ) ,
22
+ position : "absolute" ,
23
+ left : ( offsets : Offsets ) => offsets . leftOffset ( ) ,
24
+ right : 0 ,
25
+ top : ( offsets : Offsets ) => offsets . topOffset ( ) ,
26
+ bottom : 0 ,
27
+ backgroundColor : "black" ,
28
+ overflow : "auto"
29
+ } ,
30
+ entry : {
31
+ color : "#bbbbbb" ,
32
+ fontFamily : "Courier New, monospace" ,
33
+ fontSize : "14px" ,
34
+ letterSpacing : "normal" ,
35
+ whiteSpace : "nowrap"
36
+ } ,
37
+ file : {
38
+ color : "#00ffff"
39
+ } ,
40
+ debug : {
41
+ color : "#0000ff"
42
+ } ,
43
+ info : {
44
+ color : "#00ff00"
45
+ } ,
46
+ warning : {
47
+ color : "#ffff00"
48
+ } ,
49
+ error : {
50
+ color : "#ff0000"
51
+ } ,
52
+ unknown : {
53
+ color : "#ffffff"
54
+ }
55
+ } ) ) ;
56
+
57
+
58
+ const LogEventConsole : FC < LogEventConsoleProps > = ( props ) => {
59
+ useWindowSize ( ) ;
60
+ const classes = useStyles ( { topOffset, leftOffset } ) ;
61
+ const { events } = props ;
62
+
63
+ const styleLevel = ( level : LogLevel ) => {
64
+ switch ( level ) {
65
+ case LogLevel . DEBUG :
66
+ return classes . debug ;
67
+ case LogLevel . INFO :
68
+ return classes . info ;
69
+ case LogLevel . WARNING :
70
+ return classes . warning ;
71
+ case LogLevel . ERROR :
72
+ return classes . error ;
73
+ default :
74
+ return classes . unknown ;
75
+ }
76
+ }
77
+
78
+ const levelLabel = ( level : LogLevel ) => {
79
+ switch ( level ) {
80
+ case LogLevel . DEBUG :
81
+ return "DEBUG" ;
82
+ case LogLevel . INFO :
83
+ return "INFO" ;
84
+ case LogLevel . WARNING :
85
+ return "WARNING" ;
86
+ case LogLevel . ERROR :
87
+ return "ERROR" ;
88
+ default :
89
+ return "UNKNOWN" ;
90
+ }
91
+ }
92
+
93
+ const paddedLevelLabel = ( level : LogLevel ) => {
94
+ let label = levelLabel ( level ) ;
95
+ return label . padStart ( 7 , '\xa0' ) ;
96
+ }
97
+
98
+ return (
99
+ < Box className = { classes . console } >
100
+ { events . map ( e => (
101
+ < div className = { classes . entry } >
102
+ < span > { formatIsoDateTimeToHr ( e . time ) } </ span >
103
+ < span className = { styleLevel ( e . level ) } > { paddedLevelLabel ( e . level ) } </ span >
104
+ < span className = { classes . file } > { `${ e . file } [${ e . line } ]` } </ span >
105
+ < span > { e . message } </ span >
106
+ </ div >
107
+ ) ) }
108
+ </ Box >
109
+ ) ;
110
+ } ;
111
+
112
+
113
+
114
+ export default LogEventConsole ;
0 commit comments