Skip to content
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.

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

Refactor homepage #567

Merged
merged 16 commits into from
Jul 9, 2024
Prev Previous commit
Next Next commit
refactor: enhance homepage
Signed-off-by: Jad Chahed <[email protected]>
  • Loading branch information
Jad31 committed Jul 9, 2024
commit 4c4886c872d268f705225b942147565f51bac572
63 changes: 43 additions & 20 deletions website/src/common/DailySummary.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@ import {
ChartConfig,
ChartContainer,
ChartTooltip,
ChartTooltipContent,
} from "@/components/ui/chart";
import { DailySummarydata } from "@/types";
import PropTypes from "prop-types";
Expand All @@ -38,23 +37,25 @@ export type DailySummaryProps = {
};

export default function DailySummary({ data }: DailySummaryProps) {
const chartData: any[] | undefined = [];
type ChartData = { name: string; totalQps: number };
const chartData: ChartData[] = [];

const chartConfig = {
desktop: {
label: "Desktop",
label: "Total QPS",
color: "hsl(var(--primary))",
},
mobile: {
label: "Mobile",
label: "Total QPS",
color: "hsl(var(--primary))",
},
} satisfies ChartConfig;

if (data.data !== null) {
data.data.map((item) => ({
totalQps: chartData.push({
totalQps: item.total_qps.center / 2,
name: "Total QPS",
totalQps: item.total_qps.center,
}),
}));
}
Expand All @@ -65,16 +66,17 @@ export default function DailySummary({ data }: DailySummaryProps) {
<CardTitle className="font-light text-sm">{data.name}</CardTitle>
</CardHeader>
<CardContent className="max-h-[4vh] md:max-h-[7vh]">
<ChartContainer config={chartConfig}>
<ChartContainer
config={chartConfig}
className="md:h-[80px] h-[60px] w-full"
>
<LineChart data={chartData}>
<XAxis dataKey="time" tickLine={false} axisLine={false} />
<ChartTooltip
cursor={false}
content={<ChartTooltipContent hideLabel />}
/>
<ChartTooltip cursor={false} content={<CustomTooltip />} />
<Line
dataKey="totalQps"
type="natural"
type="monotone"
label="Total QPS"
stroke="var(--color-desktop)"
strokeWidth={1}
dot={{
Expand All @@ -87,18 +89,39 @@ export default function DailySummary({ data }: DailySummaryProps) {
</LineChart>
</ChartContainer>
</CardContent>
<CardFooter className="bottom-0">
<i className="fa-solid fa-arrow-right daily--fa-arrow-right"></i>
<CardFooter>
<i className="h-4 w-4 text-foreground fa-solid fa-arrow-right daily--fa-arrow-right"></i>
</CardFooter>
</Card>
);
}

DailySummary.propTypes = {
data: PropTypes.shape({
name: PropTypes.string.isRequired,
data: PropTypes.array,
}),
setBenchmarktype: PropTypes.func.isRequired,
isSelected: PropTypes.bool,
const CustomTooltip = ({
active,
payload,
}: {
active?: boolean;
payload?: { value: number }[];
}) => {
if (active && payload && payload.length) {
return (
<div className="custom-tooltip p-2 border border-border shadow-lg rounded">
<p className="label flex items-center">
<span
className="inline-block w-2 h-2 mr-2"
style={{ backgroundColor: "hsl(var(--primary))" }}
></span>
{`Total QPS: ${payload[0].value.toFixed(0)}`}
</p>
</div>
);
}

return null;
};

CustomTooltip.propTypes = {
active: PropTypes.bool,
payload: PropTypes.array,
label: PropTypes.string,
};
6 changes: 0 additions & 6 deletions website/src/pages/DailyPage/DailyPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -235,12 +235,6 @@ export default function DailyPage() {
} = useDailySummaryData(["OLTP", "OLTP-READONLY", "OLTP-SET", "TPCC", "TPCC_FK", "TPCC_UNSHARDED", "TPCC_FK_UNMANAGED"]);

return (

console.log({
dataDailySummary,
isLoadingDailySummary,
errorDailySummary,
}),
<>
<DailyHero />

Expand Down
18 changes: 13 additions & 5 deletions website/src/pages/HomePage/components/Diagram.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,19 @@ export default function Diagram() {
</h2>
<Card className="w-full max-w-screen-xl my-8 border-border">
<CardContent className="flex justify-center">
<img
className="w-full"
src="/images/execution-pipeline-dark.png"
alt="execution pipeline"
/>
<div className="relative duration-1000">
<img
className="duration-inherit"
src="/images/execution-pipeline-dark.png"
alt="execution pipeline"
/>

<img
className={"absolute-cover duration-inherit dark:opacity-0"}
src="/images/execution-pipeline.png"
alt="execution pipeline"
/>
</div>
</CardContent>
</Card>
</section>
Expand Down
99 changes: 0 additions & 99 deletions website/src/pages/HomePage/components/HomePageChart.tsx

This file was deleted.

18 changes: 9 additions & 9 deletions website/src/pages/HomePage/components/HomePageHero.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -31,11 +31,11 @@ export default function HomePageHero() {
} = useDailySummaryData(['OLTP', 'TPCC']);

return (
<section className="flex flex-col items-center h-screen p-page">
<h1 className="text-3xl md:text-6xl font-semibold text-center mt-10 leading-normal">
Benchmarking <br />
System for <br />
<span className="text-orange-500"> Vitess</span>
<section className="flex flex-col items-center h-fit my-12">
<h1 className="flex flex-col gap-8 text-3xl md:text-6xl font-semibold text-center">
<p>Benchmarking</p>
<p> System for</p>
<p className="text-primary"> Vitess</p>
</h1>
<div className="flex md:flex-row flex-col gap-4 mt-10">
<div className="flex flex-row gap-4">
Expand Down Expand Up @@ -88,11 +88,11 @@ export default function HomePageHero() {
</Button>
</div>
</div>
<h2 className="text-lg md:text-2xl font-medium mt-20">
Historical results on the <Link className="text-primary" to="https://github.com/vitessio/arewefastyet/tree/main" target="_blank">main</Link>{" "}
<h2 className="text-lg md:text-2xl font-medium mt-12">
Historical results on the <Link className="text-primary" to="https://github.com/vitessio/vitess/tree/main/" target="_blank">main</Link>{" "}
branch
</h2>
<section className="flex md:flex-row flex-col justif-center gap-10 py-10 my-10">
<section className="flex md:flex-row flex-col justif-center gap-10 my-20">
{isLoadingDailySummary && (
<>
<Skeleton className="w-[250px] h-[150px] md:w-[316px] md:h-[186px] rounded-lg" />
Expand All @@ -116,7 +116,7 @@ export default function HomePageHero() {
</section>
<Link
to="/daily"
className="text-primary text-xs md:text-lg mt-10"
className="text-primary text-xs md:text-lg"
>
See more historical results {">"}
</Link>
Expand Down
4 changes: 2 additions & 2 deletions website/src/pages/HomePage/components/HowItWorks.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const items: HowItWorksCardItem[] = [
content: (
<>
Seven workloads are executed against every commit we decide to benchmark. These workloads define the SQL schema, the queries we execute, the configuration of the Vitess cluster, and the configuration of sysbench. The settings of our workload can be found on the
<Link to="" className="text-primary"> arewefastyet repository</Link>
<Link to="" className="text-primary"> arewefastyet repository</Link>.
<br />
<br />
We have two categories of workloads: OLTP and TPCC, both are a modified version of the official workloads.
Expand All @@ -25,7 +25,7 @@ const items: HowItWorksCardItem[] = [
content: (
<>
There are three cron schedules that enable us to periodically benchmark Vitess, the definition of these schedules is
<Link to="" className="text-primary"> available in our yaml configuration</Link>
<Link to="" className="text-primary"> available in our yaml configuration</Link>.
<br />
<br />
Generally, we benchmark the main and release branches of Vitess every night at midnight UTC. We also detect new PRs that need to be benchmarked every five minutes, and new tags/releases every minute. </>
Expand Down
Loading