diff --git a/website/src/assets/styles/tailwind.css b/website/src/assets/styles/tailwind.css index d2425f581..f50055422 100644 --- a/website/src/assets/styles/tailwind.css +++ b/website/src/assets/styles/tailwind.css @@ -13,6 +13,10 @@ @apply m-0 p-0; } + :root { + @apply duration-700; + } + /* Declaring Themes */ :root { --color-primary: 231 112 2; diff --git a/website/src/pages/Compare/Compare.jsx b/website/src/pages/ComparePage/Compare.jsx similarity index 100% rename from website/src/pages/Compare/Compare.jsx rename to website/src/pages/ComparePage/Compare.jsx diff --git a/website/src/pages/ComparePage/ComparePage.jsx b/website/src/pages/ComparePage/ComparePage.jsx new file mode 100644 index 000000000..56b3b98e1 --- /dev/null +++ b/website/src/pages/ComparePage/ComparePage.jsx @@ -0,0 +1,194 @@ +/* +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 React, { useState, useEffect } from "react"; +import { useNavigate } from "react-router-dom"; +import RingLoader from "react-spinners/RingLoader"; +import { SwiperSlide } from "swiper/react"; +import useApiCall from "../../utils/Hook"; + +import Macrobench from "../../components/MacroComponents/Macrobench/Macrobench"; +import MacrobenchMobile from "../../components/MacroComponents/MacrobenchMobile/MacrobenchMobile"; +import Microbench from "../../components/Microbench/Microbench"; +import Hero from "./components/Hero"; + +export default function Compare() { + const urlParams = new URLSearchParams(window.location.search); + // The following code sets up state variables `gitRef.left` and `gitRef.right` using the `useState` hook. + // The values of these variables are based on the query parameters extracted from the URL. + + // If the 'ltag' query parameter is null or undefined, set the initial value of `gitRef.left` to 'Left', + // otherwise, use the value of the 'ltag' query parameter. + const [gitRef, setGitRef] = useState({ + left: urlParams.get("ltag") || "Left", + right: urlParams.get("rtag") || "Right", + }); + const [currentSlideIndexMobile, setCurrentSlideIndexMobile] = useState( + urlParams.get("ptagM") || "0" + ); + const [isFormSubmitted, setIsFormSubmitted] = useState(false); + + const { + data: dataMacrobench, + isLoading: isMacrobenchLoading, + error: macrobenchError, + textLoading: macroTextLoading, + } = useApiCall( + `${import.meta.env.VITE_API_URL}macrobench/compare?rtag=${ + gitRef.right + }<ag=${gitRef.left}`, + [isFormSubmitted] + ); + + const { data: dataMicrobench } = useApiCall( + `${import.meta.env.VITE_API_URL}microbench/compare?rtag=${ + gitRef.right + }<ag=${gitRef.left}`, + [isFormSubmitted] + ); + + // Changing the URL relative to the reference of a selected benchmark. + // Storing the carousel position as a URL parameter. + const navigate = useNavigate(); + + useEffect(() => { + navigate( + `?ltag=${gitRef.left}&rtag=${gitRef.right}&ptagM=${currentSlideIndexMobile}` + ); + }, [gitRef.left, gitRef.right, currentSlideIndexMobile]); + + const handleInputChangeLeft = (e) => { + setgitRef.left(e.target.value); + }; + + const handleInputChangeRight = (e) => { + setgitRef.right(e.target.value); + }; + + const handleSlideChange = (swiper) => { + setCurrentSlideIndexMobile(swiper.realIndex); + }; + + const handleSubmit = (e) => { + e.preventDefault(); + setIsFormSubmitted((prevState) => !prevState); + }; + + return ( +
+
+ + + {macrobenchError ? ( +
{macrobenchError}
+ ) : isMacrobenchLoading ? ( +
+ +
+ ) : ( + <> +

Macro Benchmarks

+
+
+ {dataMacrobench.map((macro, index) => { + return ( +
+ + +
+ ); + })} +
+
+ +
+

Micro benchmarks

+
+ Package + Benchmark Name + + Number of Iterations + + Time/op + More +
+
+
+
+
+
+ {gitRef.left.slice(0, 8)} + {gitRef.right.slice(0, 8)} + Diff % +
+
+ {gitRef.left.slice(0, 8)} + {gitRef.right.slice(0, 8)} + Diff % +
+
+
+ {dataMicrobench.length > 0 && + dataMicrobench[0].PkgName !== "" && + dataMicrobench[0].Name !== "" && + dataMicrobench[0].SubBenchmarkName !== "" && + dataMicrobench.map((micro, index) => { + const isEvenIndex = index % 2 === 0; + const backgroundGrey = isEvenIndex ? "grey--background" : ""; + return ( + + ); + })} +
+ + )} +
+
+ ); +} diff --git a/website/src/pages/Compare/compare.css b/website/src/pages/ComparePage/compare.css similarity index 100% rename from website/src/pages/Compare/compare.css rename to website/src/pages/ComparePage/compare.css diff --git a/website/src/pages/ComparePage/components/Hero.jsx b/website/src/pages/ComparePage/components/Hero.jsx new file mode 100644 index 000000000..46037ab80 --- /dev/null +++ b/website/src/pages/ComparePage/components/Hero.jsx @@ -0,0 +1,45 @@ +import React from "react"; +import { twMerge } from "tailwind-merge"; + +export default function Hero(props) { + const { gitRef, setGitRef } = props; + + return ( +
+

Enter SHAs to compare commits

+
+ + +
+
+ ); +} + +function ComparisonInput(props) { + const { className, setGitRef, name } = props; + + return ( + + setGitRef((p) => { + return { ...p, [name]: event.target.value }; + }) + } + /> + ); +} diff --git a/website/src/pages/DailyPage/DailyPage.jsx b/website/src/pages/DailyPage/DailyPage.jsx index 1e01875be..13e0de2e7 100644 --- a/website/src/pages/DailyPage/DailyPage.jsx +++ b/website/src/pages/DailyPage/DailyPage.jsx @@ -52,6 +52,13 @@ export default function DailyPage() { navigate(`?type=${benchmarkType}`); }, [benchmarkType]); + useEffect(()=>{ + console.log(dataDailySummary) + console.log("\n\ndataDaily") + console.log(dataDaily) + console.log("\n\ndataDailySummary") + },[dataDaily,dataDailySummary]) + const TPSData = [ { id: "TPS", @@ -239,7 +246,7 @@ export default function DailyPage() { {dataDaily && dataDailySummary && ( <> -
+
{dataDailySummary.map((dailySummary, index) => { return ( { } /> } /> } /> - } /> + } /> } /> } /> } /> - } /> + } /> } /> } /> diff --git a/website/src/pages/StatusPage/components/PreviousExecutions.jsx b/website/src/pages/StatusPage/components/PreviousExecutions.jsx index 3aacc7006..89f35f2bf 100644 --- a/website/src/pages/StatusPage/components/PreviousExecutions.jsx +++ b/website/src/pages/StatusPage/components/PreviousExecutions.jsx @@ -28,9 +28,9 @@ export default function PreviousExecutions(props) { newData["Source"] = entry.source; - newData["Started"] = formatDate(entry.started_at); + newData["Started"] = formatDate(entry.started_at) || "N/A"; - newData["Finished"] = formatDate(entry.finished_at); + newData["Finished"] = formatDate(entry.finished_at) || "In Progress"; newData["Type"] = entry.type_of; diff --git a/website/src/utils/Utils.jsx b/website/src/utils/Utils.jsx index 59b9e14f4..7e71f0585 100644 --- a/website/src/utils/Utils.jsx +++ b/website/src/utils/Utils.jsx @@ -27,7 +27,16 @@ export const getStatusClass = (status) => { // FORMATDATE export const formatDate = (date) => { - return moment(date).format("MM/DD/YYYY HH:mm"); + if (!date || date === 0) return null; + + date = new Date(date); + const year = date.getFullYear(); + const month = String(date.getMonth() + 1).padStart(2, "0"); + const day = String(date.getDate()).padStart(2, "0"); + const hours = String(date.getHours()).padStart(2, "0"); + const minutes = String(date.getMinutes()).padStart(2, "0"); + + return `${month}/${day}/${year} ${hours}:${minutes}`; }; //FORMATTING BYTES TO GB