Add dark mode, UI improvements, and Select File button to CCP Log Parser - #109
Add dark mode, UI improvements, and Select File button to CCP Log Parser#109aws-kwyee wants to merge 2 commits into
Conversation
- Guard API_REPLY handler against undefined matched[3] before JSON.parse - Wrap API error-details JSON.parse in try/catch with fallback - Accept files by .json/.txt extension when MIME type is missing - Validate file content before JSON.parse; surface clearer error messages - Handle FileReader onerror - Skip log events missing a timestamp instead of crashing
- Add dark mode with theme toggle button and ThemeContext provider - Allow containers to use full viewport width - Improve UI layout with fixed AppBar and responsive scrollable containers - Add Select File button to drag-and-drop area - Update version to 2026.01.07 - Fix ESLint errors and build issues - Add .eslintrc.js configuration
| /> | ||
| </div> | ||
| { !isExpanded | ||
| ? <Button variant="link" className={classes.expand} onClick={() => expand()}><UnfoldMore style={{ transform: 'rotate(90deg)' }} /></Button> |
There was a problem hiding this comment.
Recommendation generated by Amazon CodeGuru Reviewer. Leave feedback on this recommendation by replying to the comment or by reacting to the comment using emoji.
Using Function.prototype.bind and arrows functions as attributes will negatively impact performance in React. Each time the parent is rendered, the function will be re-created and trigger a render of the component causing excessive renders and more memory use.
| isMessageContained={isMessageContained} | ||
| cause={cause} | ||
| hasMoreInfo={hasMoreInfo} | ||
| toggleMoreInfo={() => this.toggleMoreInfo()} |
There was a problem hiding this comment.
Recommendation generated by Amazon CodeGuru Reviewer. Leave feedback on this recommendation by replying to the comment or by reacting to the comment using emoji.
Using Function.prototype.bind and arrows functions as attributes will negatively impact performance in React. Each time the parent is rendered, the function will be re-created and trigger a render of the component causing excessive renders and more memory use.
| </div> | ||
| { !isExpanded | ||
| ? <Button variant="link" className={classes.expand} onClick={() => expand()}><UnfoldMore style={{ transform: 'rotate(90deg)' }} /></Button> | ||
| : <Button variant="link" className={classes.expand} onClick={() => expand()}><UnfoldLess style={{ transform: 'rotate(90deg)' }} /></Button> } |
There was a problem hiding this comment.
Recommendation generated by Amazon CodeGuru Reviewer. Leave feedback on this recommendation by replying to the comment or by reacting to the comment using emoji.
Using Function.prototype.bind and arrows functions as attributes will negatively impact performance in React. Each time the parent is rendered, the function will be re-created and trigger a render of the component causing excessive renders and more memory use.
2 participants
Summary
Adds dark mode support, UI layout improvements, and a Select File button to the CCP Log Parser tool.
Changes
Dark mode (
ThemeContext.jsx, all view components)ThemeContextprovider with light/dark theme definitionsDraggingView,EmptyView,LoadingView,LogLineView,LogView,SnapshotListView) updated to consume theme contextThemedMetricsViewwrapper for metrics componentsUI layout improvements (
App.jsx)AppBarchanged fromstatictofixedpositioning with proper content offsetmaxWidth={false})calc(100vh - ...)for proper overflow handlingSelect File button (
EmptyView.jsx,App.jsx)dropzoneRefBuild fixes
.eslintrc.jsconfigurationFiles changed
.eslintrc.js(new)src/ThemeContext.jsx(new)src/ThemedMetricsView.jsx(new)package.json,package-lock.jsonsrc/App.css,src/App.jsxsrc/DraggingView.jsx,src/EmptyView.jsx,src/LoadingView.jsxsrc/LogLineView.jsx,src/LogView.jsx,src/MetricsView.jsx,src/SnapshotListView.jsxsrc/utils/findExtras.jsTesting
Verified locally — dark/light toggle works, layout is responsive, Select File button opens file picker correctly.