feat(new-webui): Add uncompressed and compressed data size cards (resolves #946).#958
Conversation
WalkthroughThis update introduces two new React components for displaying compressed and uncompressed sizes, and refactors the SpaceSavings component to present these metrics in a grid layout alongside the existing space savings statistic. Several CSS modules are updated or added to support the new grid and flexbox layouts, and some layout constraints are slightly adjusted. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant SpaceSavings
participant UncompressedSize
participant CompressedSize
User->>SpaceSavings: Render component (with sizes and savings)
SpaceSavings->>UncompressedSize: Pass uncompressedSize prop
SpaceSavings->>CompressedSize: Pass compressedSize prop
UncompressedSize-->>SpaceSavings: Render DetailsCard (Uncompressed Size)
CompressedSize-->>SpaceSavings: Render DetailsCard (Compressed Size)
SpaceSavings-->>User: Render grid with all three cards
Possibly related PRs
Suggested reviewers
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (3)
🧰 Additional context used📓 Path-based instructions (1)`**/*.{cpp,hpp,java,js,jsx,tpp,ts,tsx}`: - Prefer `false == ` rather than `!`.
🔇 Additional comments (4)
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Actionable comments posted: 3
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (6)
components/log-viewer-webui/client/src/pages/IngestPage/Details/index.module.css(1 hunks)components/log-viewer-webui/client/src/pages/IngestPage/SpaceSavings/CompressedSize.tsx(1 hunks)components/log-viewer-webui/client/src/pages/IngestPage/SpaceSavings/UncompressedSize.tsx(1 hunks)components/log-viewer-webui/client/src/pages/IngestPage/SpaceSavings/index.module.css(1 hunks)components/log-viewer-webui/client/src/pages/IngestPage/SpaceSavings/index.tsx(2 hunks)components/log-viewer-webui/client/src/pages/IngestPage/index.module.css(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
`**/*.{cpp,hpp,java,js,jsx,tpp,ts,tsx}`: - Prefer `false == ` rather than `!`.
**/*.{cpp,hpp,java,js,jsx,tpp,ts,tsx}: - Preferfalse == <expression>rather than!<expression>.
components/log-viewer-webui/client/src/pages/IngestPage/SpaceSavings/index.tsxcomponents/log-viewer-webui/client/src/pages/IngestPage/SpaceSavings/CompressedSize.tsxcomponents/log-viewer-webui/client/src/pages/IngestPage/SpaceSavings/UncompressedSize.tsx
🧬 Code Graph Analysis (2)
components/log-viewer-webui/client/src/pages/IngestPage/SpaceSavings/CompressedSize.tsx (2)
components/log-viewer-webui/client/src/pages/IngestPage/Jobs/units.ts (1)
formatSizeInBytes(40-40)components/webui/imports/ui/IngestView/panels/IngestionJobs/IngestionJobRow.jsx (1)
compressedSize(57-57)
components/log-viewer-webui/client/src/pages/IngestPage/SpaceSavings/UncompressedSize.tsx (2)
components/log-viewer-webui/client/src/pages/IngestPage/Jobs/units.ts (1)
formatSizeInBytes(40-40)components/webui/imports/ui/IngestView/panels/IngestionJobs/IngestionJobRow.jsx (1)
uncompressedSize(52-52)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: lint-check (macos-latest)
- GitHub Check: lint-check (ubuntu-latest)
🔇 Additional comments (11)
components/log-viewer-webui/client/src/pages/IngestPage/index.module.css (1)
5-5: LGTM! Layout adjustment supports new grid components.The increased max-width accommodates the expanded SpaceSavings grid layout with the new compressed and uncompressed size cards.
components/log-viewer-webui/client/src/pages/IngestPage/SpaceSavings/CompressedSize.tsx (1)
1-25:Details
✅ Verification successful
Well-structured component following React best practices.
The component is cleanly implemented with proper TypeScript interfaces, JSDoc documentation, and reuses existing UI components for consistency.
Verify formatSizeInBytes function signature.
Ensure the
formatSizeInBytesfunction accepts the expected parameters (number, boolean) as used on line 19.
🏁 Script executed:
#!/bin/bash # Description: Verify formatSizeInBytes function signature and usage # Expected: Function should accept (size: number, showUnit?: boolean) parameters # Search for formatSizeInBytes function definition ast-grep --pattern 'function formatSizeInBytes($_, $_) { $$$ }' # Also search for arrow function definition ast-grep --pattern 'const formatSizeInBytes = ($_, $_) => { $$$ }' # Search for export statement rg -A 3 "export.*formatSizeInBytes"Length of output: 274
🏁 Script executed:
#!/bin/bash # Display lines around the definition of formatSizeInBytes to verify its signature rg -n -C3 'formatSizeInBytes' components/log-viewer-webui/client/src/pages/IngestPage/Jobs/units.tsLength of output: 488
Signature Verified
The
formatSizeInBytesfunction is defined as:const formatSizeInBytes = ( value: number, useSiUnits: boolean = true, numFractionalDigits: number = 1 ) => { … };Passing
(compressedSize, false)aligns with its(number, boolean?)signature (the third parameter defaults to 1), so no changes are needed.components/log-viewer-webui/client/src/pages/IngestPage/Details/index.module.css (2)
8-8: Good flexbox implementation for responsive layout.Adding
display: flexenables the cards to properly expand within the time range container.
12-14: Proper use of global selector for Ant Design components.The
:global(.ant-card)selector correctly targets Ant Design card components andflex: 1ensures they expand to fill available space evenly.components/log-viewer-webui/client/src/pages/IngestPage/SpaceSavings/index.module.css (2)
1-6: Excellent CSS Grid implementation for responsive layout.The grid configuration with
minmax(200px, 1fr)provides responsive columns with sensible minimum widths, andalign-items: stretchensures consistent card heights.
8-15: Good use of grid-column span and flexbox for card layout.The combination of
grid-column: span 2for full-width cards andflex: 1for equal expansion follows modern CSS layout best practices.components/log-viewer-webui/client/src/pages/IngestPage/SpaceSavings/index.tsx (3)
78-91: Excellent refactor to grid layout with proper component composition.The transition from a single StatCard to a grid layout with three components is well-implemented:
- Proper CSS class usage for grid structure
- Appropriate prop passing to child components
- Maintained existing StatCard styling with slight size adjustment
- Clean component composition
84-84: Good adjustment of stat size for new layout.Increasing the
statSizefrom "6rem" to "6.5rem" likely improves visual balance in the new three-card grid layout.
12-13:Details
✅ Verification successful
Clean import organization for new components and styles.
The imports are well-organized and follow consistent patterns for component and CSS module imports.
Verify UncompressedSize component implementation.
The
UncompressedSizecomponent is imported but not included in the files for review. Ensure it follows the same pattern asCompressedSize.Also applies to: 18-18
🏁 Script executed:
#!/bin/bash # Description: Verify UncompressedSize component exists and follows similar pattern # Expected: Should find UncompressedSize.tsx with similar structure to CompressedSize.tsx # Search for UncompressedSize component file fd "UncompressedSize.tsx" # If found, examine its structure fd "UncompressedSize.tsx" --exec cat {}Length of output: 696
Verified UncompressedSize component exists and matches CompressedSize pattern
- Located at
components/log-viewer-webui/client/src/pages/IngestPage/SpaceSavings/UncompressedSize.tsx- Imports
DetailsCardandformatSizeInBytesand defines a numeric prop, mirroring the structure ofCompressedSizeNo further changes needed.
components/log-viewer-webui/client/src/pages/IngestPage/SpaceSavings/UncompressedSize.tsx (2)
5-7: Prop interface is well-defined
TheUncompressedSizePropsinterface clearly types theuncompressedSizeprop as a number. This aligns with TypeScript best practices for component props.
24-24: Default export is acceptable here
Using a default export for a single component file is a common pattern and is consistent with existing code.
| const UncompressedSize = ({uncompressedSize}: UncompressedSizeProps) => { | ||
| return ( | ||
| <DetailsCard | ||
| stat={formatSizeInBytes(uncompressedSize, false)} | ||
| title={"Uncompressed Size"}/> | ||
| ); | ||
| }; |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Wrap component in React.memo and add unit tests
This pure functional component can benefit from memoization to prevent unnecessary re-renders. Additionally, consider adding a unit test (e.g., with React Testing Library) to verify that the formatted size string renders correctly.
🤖 Prompt for AI Agents
In
components/log-viewer-webui/client/src/pages/IngestPage/SpaceSavings/UncompressedSize.tsx
around lines 16 to 22, wrap the UncompressedSize functional component with
React.memo to memoize it and avoid unnecessary re-renders. Additionally, create
a unit test using React Testing Library to render the component with a sample
uncompressedSize prop and verify that the formatted size string is displayed
correctly.
| /** | ||
| * Renders the uncompressed size statistic. | ||
| * | ||
| * @param props | ||
| * @param props.uncompressedSize | ||
| * @return | ||
| */ |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Remove or refine redundant JSDoc
The JSDoc comments for this simple React component are redundant with TypeScript typings and prop destructuring. You can remove them or refine them to add context about units (bytes) or edge-case behaviours.
🤖 Prompt for AI Agents
In
components/log-viewer-webui/client/src/pages/IngestPage/SpaceSavings/UncompressedSize.tsx
around lines 9 to 15, the JSDoc comments are redundant because TypeScript
typings and prop destructuring already provide the necessary information. Remove
the JSDoc comments entirely or refine them to add meaningful context such as
specifying that uncompressedSize is in bytes or describing any edge-case
behaviors related to this prop.
| import DetailsCard from "../Details/DetailsCard"; | ||
| import {formatSizeInBytes} from "../Jobs/units"; |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Ensure consistent import paths
Using relative imports can become brittle as the directory structure evolves. If your project is configured with path aliases (e.g., @/pages/...), consider switching to absolute imports for better maintainability.
🤖 Prompt for AI Agents
In
components/log-viewer-webui/client/src/pages/IngestPage/SpaceSavings/UncompressedSize.tsx
at lines 1 to 2, the imports use relative paths which can be fragile as the
project structure changes. Update these imports to use the project's configured
absolute path aliases (e.g., '@/pages/...') instead of relative paths to improve
maintainability and reduce breakage from directory changes.
|
|
||
|
|
| grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); | ||
| /* Limits dashboard to two columns */ | ||
| max-width: 1200px; | ||
| max-width: 1250px; |
There was a problem hiding this comment.
why did we increase this by 50px?
There was a problem hiding this comment.
Uncompressed Size was wrapping to two lines, so this lets the cards expand a bit more
|
I made the space savings text a bit smaller, to try and shrink size of cards on right side |
Description
Add compressed and uncompressed size cards. Originally wanted to put them on the right but then they wouldnt have access to size query. I would either have to query twice, or move state out of widget. Neither were desirable. So i moved to space savings side. Also, tried different background colours but they looked worse than just white.
Checklist
breaking change.
Validation performed
Values appeared on cards
Summary by CodeRabbit