Skip to content

refactor(new-webui): Remove redundant StatCard and DetailsCard. #1088

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
hoophalab merged 4 commits into from
Jul 10, 2025
Merged

refactor(new-webui): Remove redundant StatCard and DetailsCard. #1088

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0ccee94
refactor: Replace with `StatCard` and `DetailsCard` with dependency i…
hoophalab Jul 8, 2025
81d9e33
Fix typo and make stat accept text instead of children.
hoophalab Jul 9, 2025
3267a09
Rename Jobs -> JobsGrid in css.
hoophalab Jul 9, 2025
b419a70
Merge branch 'main' into card-refactor
hoophalab Jul 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
34 changes: 34 additions & 0 deletions components/webui/client/src/components/Stat/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import {
theme,
Typography,
} from "antd";


const {Text} = Typography;

interface StatProps {
text: string;
fontSize?: string;
color?: string;
}

/**
* A text component for displaying statistical values.
*
* @param props
* @param props.text
* @param props.color
* @param props.fontSize
* @return
*/
const Stat = ({text, color, fontSize}: StatProps) => {
const {token} = theme.useToken();
return (
<Text style={{color: color ?? token.colorTextSecondary, fontSize: fontSize ?? "1.4rem"}}>
{text}
</Text>
);
};


export default Stat;
Empty file removed components/webui/client/src/components/StatCard/index.module.css
View file
Open in desktop
Empty file.
62 changes: 0 additions & 62 deletions components/webui/client/src/components/StatCard/index.tsx
View file
Open in desktop

This file was deleted.

33 changes: 0 additions & 33 deletions components/webui/client/src/pages/IngestPage/Details/DetailsCard.tsx
View file
Open in desktop

This file was deleted.

11 changes: 7 additions & 4 deletions components/webui/client/src/pages/IngestPage/Details/Files.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import {Nullable} from "src/typings/common";

import DetailsCard from "./DetailsCard";
import {DashboardCard} from "../../../components/DashboardCard";
import Stat from "../../../components/Stat";


interface FilesProps {
Expand All @@ -18,10 +19,12 @@ interface FilesProps {
*/
const Files = ({numFiles, isLoading}: FilesProps) => {
return (
<DetailsCard
<DashboardCard
isLoading={isLoading}
stat={(numFiles ?? 0).toString()}
title={"Files"}/>
title={"Files"}
>
<Stat text={(numFiles ?? 0).toString()}/>
</DashboardCard>
);
};

Expand Down
11 changes: 7 additions & 4 deletions components/webui/client/src/pages/IngestPage/Details/Messages.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import {Nullable} from "src/typings/common";

import DetailsCard from "./DetailsCard";
import {DashboardCard} from "../../../components/DashboardCard";
import Stat from "../../../components/Stat";


interface MessagesProps {
Expand All @@ -18,10 +19,12 @@ interface MessagesProps {
*/
const Messages = ({numMessages, isLoading}: MessagesProps) => {
return (
<DetailsCard
<DashboardCard
isLoading={isLoading}
stat={(numMessages ?? 0).toString()}
title={"Messages"}/>
title={"Messages"}
>
<Stat text={(numMessages ?? 0).toString()}/>
</DashboardCard>
);
};

Expand Down
11 changes: 7 additions & 4 deletions components/webui/client/src/pages/IngestPage/Details/TimeRange.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import {Dayjs} from "dayjs";

import DetailsCard from "./DetailsCard";
import {DashboardCard} from "../../../components/DashboardCard";
import Stat from "../../../components/Stat";


const DATE_FORMAT = "MMMM D, YYYY";
Expand Down Expand Up @@ -29,10 +30,12 @@ const TimeRange = ({beginDate, endDate, isLoading}: TimeRangeProps) => {
}

return (
<DetailsCard
<DashboardCard
isLoading={isLoading}
stat={stat}
title={"Time Range"}/>
title={"Time Range"}
>
<Stat text={stat}/>
</DashboardCard>
);
};

Expand Down
30 changes: 12 additions & 18 deletions components/webui/client/src/pages/IngestPage/Jobs/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,18 +18,12 @@ import {convertQueryJobsItemToJobData} from "./utils";

const DAYS_TO_SHOW: number = 30;

interface JobsProps {
className: string;
}

/**
* Renders table with ingestion jobs inside a card.
*
* @param props
* @param props.className
* @return
*/
const Jobs = ({className}: JobsProps) => {
const Jobs = () => {
const {data: jobs = [], isPending} = useQuery({
queryKey: ["jobs"],
queryFn: async () => {
Expand All @@ -41,17 +35,17 @@ const Jobs = ({className}: JobsProps) => {
});

return (
<div className={className}>
<DashboardCard title={"Ingestion Jobs"}>
<VirtualTable<JobData>
className={styles["jobs"] || ""}
columns={jobColumns}
dataSource={jobs}
loading={isPending}
pagination={false}
scroll={{y: 400}}/>
</DashboardCard>
</div>
<DashboardCard
isLoading={isPending}
title={"Ingestion Jobs"}
>
<VirtualTable<JobData>
className={styles["jobs"] || ""}
columns={jobColumns}
dataSource={jobs}
pagination={false}
scroll={{y: 400}}/>
</DashboardCard>
);
};

Expand Down
11 changes: 7 additions & 4 deletions components/webui/client/src/pages/IngestPage/SpaceSavings/CompressedSize.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import DetailsCard from "../Details/DetailsCard";
import {DashboardCard} from "../../../components/DashboardCard";
import Stat from "../../../components/Stat";
import {formatSizeInBytes} from "../Jobs/units";


Expand All @@ -17,10 +18,12 @@ interface CompressedSizeProps {
*/
const CompressedSize = ({compressedSize, isLoading}: CompressedSizeProps) => {
return (
<DetailsCard
<DashboardCard
isLoading={isLoading}
stat={formatSizeInBytes(compressedSize, false)}
title={"Compressed Size"}/>
title={"Compressed Size"}
>
<Stat text={formatSizeInBytes(compressedSize, false)}/>
</DashboardCard>
);
};

Expand Down
11 changes: 7 additions & 4 deletions components/webui/client/src/pages/IngestPage/SpaceSavings/UncompressedSize.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import DetailsCard from "../Details/DetailsCard";
import {DashboardCard} from "../../../components/DashboardCard";
import Stat from "../../../components/Stat";
import {formatSizeInBytes} from "../Jobs/units";


Expand All @@ -17,10 +18,12 @@ interface UncompressedSizeProps {
*/
const UncompressedSize = ({uncompressedSize, isLoading}: UncompressedSizeProps) => {
return (
<DetailsCard
<DashboardCard
isLoading={isLoading}
stat={formatSizeInBytes(uncompressedSize, false)}
title={"Uncompressed Size"}/>
title={"Uncompressed Size"}
>
<Stat text={formatSizeInBytes(uncompressedSize, false)}/>
</DashboardCard>
);
};

Expand Down
16 changes: 10 additions & 6 deletions components/webui/client/src/pages/IngestPage/SpaceSavings/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import {useQuery} from "@tanstack/react-query";
import {theme} from "antd";

import StatCard from "../../../components/StatCard";
import {DashboardCard} from "../../../components/DashboardCard";
import Stat from "../../../components/Stat";
import {
CLP_STORAGE_ENGINES,
SETTINGS_STORAGE_ENGINE,
Expand Down Expand Up @@ -58,14 +59,17 @@ const SpaceSavings = () => {
return (
<div className={styles["spaceSavingsGrid"]}>
<div className={styles["spaceSavingsCard"]}>
<StatCard
<DashboardCard
backgroundColor={token.colorPrimary}
isLoading={isPending}
stat={spaceSavingsPercentText}
statColor={token.colorWhite}
statSize={"5.5rem"}
title={"Space Savings"}
titleColor={token.colorWhite}/>
titleColor={token.colorWhite}
>
<Stat
color={token.colorWhite}
fontSize={"5.5rem"}
text={spaceSavingsPercentText}/>
</DashboardCard>
</div>
<UncompressedSize
isLoading={isPending}
Expand Down
2 changes: 1 addition & 1 deletion components/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 @@ -7,6 +7,6 @@
gap: 20px;
}

.jobs {
.jobsGrid {
grid-column: 1 / -1;
}
4 changes: 3 additions & 1 deletion components/webui/client/src/pages/IngestPage/index.tsx
View file
Open in desktop

@davemarco davemarco Jul 9, 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.

I think junhao wanted me to change this by passing class Name, but I think this is also good with the grid setting explicit on the outside. i am good with this.

@hoophalab hoophalab Jul 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.

I see... thanks for the context. This makes sense. I made the change because the other grids are explicitly set on the outside. We should check with Junhao later about whether all cards should have a className. He needs this for cloud as well.

Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,9 @@ const IngestPage = () => {
<div className={styles["ingestPageGrid"]}>
<SpaceSavings/>
<Details/>
<Jobs className={styles["jobs"] || ""}/>
<div className={styles["jobsGrid"] || ""}>
<Jobs/>
</div>
Comment thread
hoophalab marked this conversation as resolved.
Resolved
</div>
);
};
Expand Down