Skip to content

feat(new-webui): Add uncompressed and compressed data size cards (resolves #946). #958

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
davemarco merged 8 commits into from
Jun 10, 2025
Merged

feat(new-webui): Add uncompressed and compressed data size cards (resolves #946). #958

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
3cfb1a5
latest
Jun 3, 2025
16ed981
latest
Jun 3, 2025
3d3a361
latest
Jun 3, 2025
937e724
review
Jun 9, 2025
b35f9ae
latest
Jun 9, 2025
b7330ac
Merge branch 'main' into size
davemarco Jun 9, 2025
1f4ca11
Merge branch 'main' into size
davemarco Jun 10, 2025
8c262bd
Merge branch 'main' into size
davemarco Jun 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion components/log-viewer-webui/client/src/pages/IngestPage/Details/DetailsCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const DetailsCard = ({title, stat}: DetailsCardProps) => {
<StatCard
stat={stat}
statColor={token.colorTextSecondary}
statSize={"1.3rem"}
statSize={"1.4rem"}
title={title}/>
);
};
Expand Down
4 changes: 4 additions & 0 deletions components/log-viewer-webui/client/src/pages/IngestPage/Details/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,10 @@
}

.timeRange {
display: flex;
grid-column: span 2;
}

.timeRange :global(.ant-card) {
flex: 1;
}
24 changes: 24 additions & 0 deletions components/log-viewer-webui/client/src/pages/IngestPage/SpaceSavings/CompressedSize.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import DetailsCard from "../Details/DetailsCard";
import {formatSizeInBytes} from "../Jobs/units";


interface CompressedSizeProps {
compressedSize: number;
}

/**
* Renders the compressed size statistic.
*
* @param props
* @param props.compressedSize
* @return
*/
const CompressedSize = ({compressedSize}: CompressedSizeProps) => {
return (
<DetailsCard
stat={formatSizeInBytes(compressedSize, false)}
title={"Compressed Size"}/>
);
};

export default CompressedSize;
24 changes: 24 additions & 0 deletions components/log-viewer-webui/client/src/pages/IngestPage/SpaceSavings/UncompressedSize.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import DetailsCard from "../Details/DetailsCard";
import {formatSizeInBytes} from "../Jobs/units";
Comment on lines +1 to +2

@coderabbitai coderabbitai Bot Jun 3, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 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.



interface UncompressedSizeProps {
uncompressedSize: number;
}

/**
* Renders the uncompressed size statistic.
*
* @param props
* @param props.uncompressedSize
* @return
*/
Comment on lines +9 to +15

@coderabbitai coderabbitai Bot Jun 3, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 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.

const UncompressedSize = ({uncompressedSize}: UncompressedSizeProps) => {
return (
<DetailsCard
stat={formatSizeInBytes(uncompressedSize, false)}
title={"Uncompressed Size"}/>
);
};
Comment on lines +16 to +22

@coderabbitai coderabbitai Bot Jun 3, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 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.


export default UncompressedSize;
15 changes: 15 additions & 0 deletions components/log-viewer-webui/client/src/pages/IngestPage/SpaceSavings/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
.spaceSavingsGrid {
display: grid;
grid-template-columns: repeat(2, minmax(200px, 1fr));
gap: 8px;
align-items: stretch;
}

.spaceSavingsCard {
display: flex;
grid-column: span 2;
}

.spaceSavingsCard :global(.ant-card) {
flex: 1;
}
23 changes: 16 additions & 7 deletions components/log-viewer-webui/client/src/pages/IngestPage/SpaceSavings/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,13 @@ import {theme} from "antd";
import StatCard from "../../../components/StatCard";
import useIngestStatsStore from "../ingestStatsStore";
import {querySql} from "../sqlConfig";
import CompressedSize from "./CompressedSize";
import styles from "./index.module.css";
import {
getSpaceSavingsSql,
SpaceSavingsResp,
} from "./sql";
import UncompressedSize from "./UncompressedSize";


/**
Expand Down Expand Up @@ -72,13 +75,19 @@ const SpaceSavings = () => {
const spaceSavingsPercentText = `${spaceSavingsPercent.toFixed(2)}%`;

return (
<StatCard
backgroundColor={token.colorPrimary}
stat={spaceSavingsPercentText}
statColor={token.colorWhite}
statSize={"6rem"}
title={"Space Savings"}
titleColor={token.colorWhite}/>
<div className={styles["spaceSavingsGrid"]}>
<div className={styles["spaceSavingsCard"]}>
<StatCard
backgroundColor={token.colorPrimary}
stat={spaceSavingsPercentText}
statColor={token.colorWhite}
statSize={"5.5rem"}
title={"Space Savings"}
titleColor={token.colorWhite}/>
</div>
<UncompressedSize uncompressedSize={uncompressedSize}/>
<CompressedSize compressedSize={compressedSize}/>
</div>
);
};

Expand Down
2 changes: 1 addition & 1 deletion components/log-viewer-webui/client/src/pages/IngestPage/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
/* Limits dashboard to two columns */
max-width: 1200px;
max-width: 1250px;

@junhaoliao junhaoliao Jun 9, 2025

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why did we increase this by 50px?

@davemarco davemarco Jun 9, 2025

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Uncompressed Size was wrapping to two lines, so this lets the cards expand a bit more

padding: 20px;
gap: 20px;
}
Expand Down