1// Copyright 2020 The Pigweed Authors 2// 3// Licensed under the Apache License, Version 2.0 (the "License"); you may not 4// use this file except in compliance with the License. You may obtain a copy of 5// the License at 6// 7// https://www.apache.org/licenses/LICENSE-2.0 8// 9// Unless required by applicable law or agreed to in writing, software 10// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT 11// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the 12// License for the specific language governing permissions and limitations under 13// the License. 14 15/* eslint-env browser */ 16import {makeStyles, Paper, Box} from '@material-ui/core'; 17import * as React from 'react'; 18import {FrameStatus, Frame} from '@pigweed/pw_hdlc'; 19 20type Props = { 21 frames: Frame[]; 22}; 23 24const useStyles = makeStyles(() => ({ 25 root: { 26 padding: '8px', 27 'background-color': '#131416', 28 height: '500px', 29 'overflow-y': 'auto', 30 width: '100%', 31 color: 'white', 32 }, 33})); 34 35export function SerialLog(props: Props) { 36 const classes = useStyles(); 37 const decoder = new TextDecoder(); 38 39 // TODO(b/199515206): Display HDLC packets in user friendly manner. 40 // 41 // See the python console serial debug window for reference. 42 function row(frame: Frame, index: number) { 43 let rowText = ''; 44 if (frame.status === FrameStatus.OK) { 45 rowText = decoder.decode(frame.data); 46 } else { 47 rowText = `[${frame.rawDecoded}]`; 48 } 49 50 return ( 51 <div key={index}> 52 {frame.status}: {rowText} 53 </div> 54 ); 55 } 56 57 return ( 58 <Paper className={classes.root}> 59 <Box sx={{fontFamily: 'Monospace'}}> 60 {props.frames.map((frame: Frame, index: number) => row(frame, index))} 61 </Box> 62 </Paper> 63 ); 64} 65