Skip to content

Commit

Permalink
Merge branch 'main' into lint_workflow
Browse files Browse the repository at this point in the history
Signed-off-by: Dhairya Majmudar <[email protected]>
  • Loading branch information
DhairyaMajmudar authored May 21, 2024
2 parents dea90fb + dcff8be commit 15db9aa
Show file tree
Hide file tree
Showing 18 changed files with 593 additions and 136 deletions.
1 change: 1 addition & 0 deletions website/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
"@nivo/line": "^0.83.0",
"@radix-ui/react-dialog": "^1.0.5",
"@radix-ui/react-dropdown-menu": "^2.0.6",
"@radix-ui/react-select": "^2.0.0",
"@radix-ui/react-slot": "^1.0.2",
"bytes": "^3.1.2",
"class-variance-authority": "^0.7.0",
Expand Down
174 changes: 174 additions & 0 deletions website/src/components/ui/select.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,174 @@
/*
Copyright 2023 The Vitess Authors.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

import * as React from "react"
import * as SelectPrimitive from "@radix-ui/react-select"
import { Check, ChevronDown, ChevronUp } from "lucide-react"

import { cn } from "@/library/utils"

const Select = SelectPrimitive.Root

const SelectGroup = SelectPrimitive.Group

const SelectValue = SelectPrimitive.Value

const SelectTrigger = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Trigger>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
<SelectPrimitive.Trigger
ref={ref}
className={cn(
"flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
className
)}
{...props}
>
{children}
<SelectPrimitive.Icon asChild>
<ChevronDown className="h-4 w-4 opacity-50" />
</SelectPrimitive.Icon>
</SelectPrimitive.Trigger>
))
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName

const SelectScrollUpButton = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
>(({ className, ...props }, ref) => (
<SelectPrimitive.ScrollUpButton
ref={ref}
className={cn(
"flex cursor-default items-center justify-center py-1",
className
)}
{...props}
>
<ChevronUp className="h-4 w-4" />
</SelectPrimitive.ScrollUpButton>
))
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName

const SelectScrollDownButton = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
>(({ className, ...props }, ref) => (
<SelectPrimitive.ScrollDownButton
ref={ref}
className={cn(
"flex cursor-default items-center justify-center py-1",
className
)}
{...props}
>
<ChevronDown className="h-4 w-4" />
</SelectPrimitive.ScrollDownButton>
))
SelectScrollDownButton.displayName =
SelectPrimitive.ScrollDownButton.displayName

const SelectContent = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
>(({ className, children, position = "popper", ...props }, ref) => (
<SelectPrimitive.Portal>
<SelectPrimitive.Content
ref={ref}
className={cn(
"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
position === "popper" &&
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
className
)}
position={position}
{...props}
>
<SelectScrollUpButton />
<SelectPrimitive.Viewport
className={cn(
"p-1",
position === "popper" &&
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
)}
>
{children}
</SelectPrimitive.Viewport>
<SelectScrollDownButton />
</SelectPrimitive.Content>
</SelectPrimitive.Portal>
))
SelectContent.displayName = SelectPrimitive.Content.displayName

const SelectLabel = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Label>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
>(({ className, ...props }, ref) => (
<SelectPrimitive.Label
ref={ref}
className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
{...props}
/>
))
SelectLabel.displayName = SelectPrimitive.Label.displayName

const SelectItem = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
>(({ className, children, ...props }, ref) => (
<SelectPrimitive.Item
ref={ref}
className={cn(
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className
)}
{...props}
>
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<SelectPrimitive.ItemIndicator>
<Check className="h-4 w-4" />
</SelectPrimitive.ItemIndicator>
</span>

<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
</SelectPrimitive.Item>
))
SelectItem.displayName = SelectPrimitive.Item.displayName

const SelectSeparator = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Separator>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
>(({ className, ...props }, ref) => (
<SelectPrimitive.Separator
ref={ref}
className={cn("-mx-1 my-1 h-px bg-muted", className)}
{...props}
/>
))
SelectSeparator.displayName = SelectPrimitive.Separator.displayName

export {
Select,
SelectGroup,
SelectValue,
SelectTrigger,
SelectContent,
SelectLabel,
SelectItem,
SelectSeparator,
SelectScrollUpButton,
SelectScrollDownButton,
}
16 changes: 9 additions & 7 deletions website/src/pages/ComparePage/ComparePage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@ import RingLoader from "react-spinners/RingLoader";
import useApiCall from "../../utils/Hook";
import Hero from "./components/Hero";
import Macrobench from "../../common/Macrobench";
import Microbench from "../MicroPage/components/Microbench/Microbench";

import { CompareData } from '@/types'
export default function Compare() {
const urlParams = new URLSearchParams(window.location.search);

Expand All @@ -31,12 +31,14 @@ export default function Compare() {
});

const {
data: dataMacrobench,
data: compareData,
isLoading: isMacrobenchLoading,
textLoading: macrobenchTextLoading,
error: macrobenchError,
} = useApiCall(
`${import.meta.env.VITE_API_URL}macrobench/compare?new=${gitRef.new}&old=${gitRef.old}`,

} = useApiCall<CompareData>(
`${import.meta.env.VITE_API_URL}macrobench/compare?new=${gitRef.new}&old=${gitRef.old}`

);

const navigate = useNavigate();
Expand All @@ -62,11 +64,11 @@ export default function Compare() {
</div>
)}

{!isMacrobenchLoading && !macrobenchTextLoading && dataMacrobench && (
{!isMacrobenchLoading && !macrobenchTextLoading && compareData && compareData.length > 0 && (
<section className="flex flex-col items-center">
<h3 className="my-6 text-primary text-2xl">Macro Benchmarks</h3>
<div className="flex flex-col gap-y-20">
{dataMacrobench.map((macro, index) => {
{compareData.map((macro, index) => {
return (
<div key={index}>
<Macrobench
Expand Down
44 changes: 31 additions & 13 deletions website/src/pages/DailyPage/DailyPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,41 +22,55 @@ import useApiCall from "../../utils/Hook";
import ResponsiveChart from "./components/Chart";
import DailySummary from "./components/DailySummary";
import Hero from "./components/Hero";
import { MacroData, MacroDataValue } from "@/types";

import { secondToMicrosecond } from "../../utils/Utils";

interface DailySummarydata {
name: string;
data : { total_qps: MacroDataValue }[];
}

type NumberDataPoint = { x: string; y: number};
type StringDataPoint = { x: string; y: string };

type ChartDataItem =
| { id: string; data: NumberDataPoint[] }
| { id: string; data: StringDataPoint[] };

export default function DailyPage() {
const urlParams = new URLSearchParams(window.location.search);
const [benchmarkType, setBenchmarktype] = useState(
urlParams.get("type") == null ? "OLTP" : urlParams.get("type"),

const [benchmarkType, setBenchmarktype] = useState<string>(
urlParams.get("type") ?? "OLTP"
);

const {
data: dataDailySummary,
isLoading: isLoadingDailySummary,
error: errorDailySummary,
} = useApiCall(`${import.meta.env.VITE_API_URL}daily/summary`);
} = useApiCall<DailySummarydata>(`${import.meta.env.VITE_API_URL}daily/summary`);

const {
data: dataDaily,
error: dailyError,
textLoading: dailyTextLoading,
} = useApiCall(`${import.meta.env.VITE_API_URL}daily?type=${benchmarkType}`);
} = useApiCall<MacroData>(`${import.meta.env.VITE_API_URL}daily?type=${benchmarkType}`);

const navigate = useNavigate();

useEffect(() => {
navigate(`?type=${benchmarkType}`);
}, [benchmarkType]);

const TPSData = [
const TPSData: { id: string; data: NumberDataPoint[] }[] = [
{
id: "TPS",
data: [],
},
];

const QPSData = [
const QPSData: { id: string; data: NumberDataPoint[] }[] = [
{
id: "Reads",
data: [],
Expand All @@ -77,14 +91,14 @@ export default function DailyPage() {
},
];

const latencyData = [
const latencyData: { id: string; data: NumberDataPoint[] }[] = [
{
id: "Latency",
data: [],
},
];

const CPUTimeData = [
const CPUTimeData : { id: string; data: StringDataPoint[] }[]= [
{
id: "Total",
data: [],
Expand All @@ -99,7 +113,7 @@ export default function DailyPage() {
},
];

const MemBytesData = [
const MemBytesData: { id: string; data: NumberDataPoint[] }[] = [
{
id: "Total",
data: [],
Expand Down Expand Up @@ -188,7 +202,11 @@ export default function DailyPage() {
});
}

const allChartData = [
const allChartData: {
data: ChartDataItem[];
title: string;
colors: string[];
}[] = [
{
data: QPSData,
title: "QPS (Queries per second)",
Expand Down Expand Up @@ -234,9 +252,9 @@ export default function DailyPage() {
</div>
)}

{!errorDailySummary && dataDailySummary && (
{!errorDailySummary && dataDailySummary && dataDailySummary.length > 0 &&(
<>
<section className="flex p-page justify-center flex-wrap gap-10 py-10">
<section className="flex p-page justif-center flex-wrap gap-10 py-10">
{dataDailySummary.map((dailySummary, index) => {
return (
<DailySummary
Expand All @@ -258,7 +276,7 @@ export default function DailyPage() {
{allChartData.map((chartData, index) => (
<div key={index} className="relative w-full h-[500px]">
<ResponsiveChart
data={chartData.data}
data={chartData.data as any}
title={chartData.title}
colors={chartData.colors}
isFirstChart={index === 0}
Expand Down
29 changes: 21 additions & 8 deletions website/src/pages/ForeignKeysPage/ForeignKeysPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,22 +17,35 @@ limitations under the License.
import React, { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import RingLoader from "react-spinners/RingLoader";

import { MacrosData } from '@/types'
import { errorApi } from "../../utils/Utils";
import Hero from "./components/Hero";
import FK from "./components/FK";

const ForeignKeys = () => {
interface Ref {
Name: string;
CommitHash: string;
Version: {
Major: number;
Minor: number;
Patch: number;
};
RCnumber: number;
}

interface ForeignKeysProps {}

const ForeignKeys: React.FC<ForeignKeysProps> = () => {
const urlParams = new URLSearchParams(window.location.search);

const [gitRef, setGitRef] = useState({
const [gitRef, setGitRef] = useState<{ tag: string }>({
tag: urlParams.get("tag") || "",
});

const [dataRefs, setDataRefs] = useState();
const [dataFKs, setDataFKs] = useState([]);
const [error, setError] = useState(null);
const [loading, setLoading] = useState(true);
const [dataRefs, setDataRefs] = useState<Ref[] | undefined>();
const [dataFKs, setDataFKs] = useState<MacrosData[]>([]);
const [error, setError] = useState<string | null>(null);
const [loading, setLoading] = useState<boolean>(true);

async function loadRefs() {
try {
Expand All @@ -48,7 +61,7 @@ const ForeignKeys = () => {

async function loadData() {
const commits = {
tag: dataRefs.filter((r) => r.Name === gitRef.tag)[0].CommitHash,
tag: dataRefs?.filter((r) => r.Name === gitRef.tag)[0]?.CommitHash || "",
};

setLoading(true);
Expand Down
Loading

0 comments on commit 15db9aa

Please sign in to comment.