From 3b3a63e21efb90f5dcd978bba5630bed193e42c8 Mon Sep 17 00:00:00 2001 From: utnim2 Date: Fri, 26 Apr 2024 13:33:47 +0530 Subject: [PATCH 1/4] added types in `useApiCall` hooks --- website/src/pages/PRPage/PRPage.tsx | 23 ++++--- website/src/pages/PRsPage/PRsPage.tsx | 3 +- website/src/pages/SearchPage/SearchPage.tsx | 37 ++++++---- .../SearchPage/components/SearchMacro.tsx | 37 +++++----- website/src/pages/StatusPage/StatusPage.tsx | 4 +- .../src/pages/StatusPage/components/Hero.tsx | 3 +- website/src/types/index.ts | 67 +++++++++++++++++++ website/src/utils/Hook.tsx | 4 +- 8 files changed, 135 insertions(+), 43 deletions(-) diff --git a/website/src/pages/PRPage/PRPage.tsx b/website/src/pages/PRPage/PRPage.tsx index 1dcf5a80f..c397a0430 100644 --- a/website/src/pages/PRPage/PRPage.tsx +++ b/website/src/pages/PRPage/PRPage.tsx @@ -20,6 +20,7 @@ import useApiCall from "../../utils/Hook"; import RingLoader from "react-spinners/RingLoader"; import { formatDate, errorApi } from "../../utils/Utils"; +import { prDataTypes } from "@/types"; export default function PRPage() { const { pull_nb } = useParams(); @@ -28,13 +29,15 @@ export default function PRPage() { data: dataSinglePr, isLoading: singlePrLoading, error: singlePrError, - } = useApiCall(`${import.meta.env.VITE_API_URL}pr/info/${pull_nb}`, []); + } = useApiCall(`${import.meta.env.VITE_API_URL}pr/info/${pull_nb}`); + + const singlePrData = dataSinglePr.length > 0 ? dataSinglePr[0] : null; const isComparisonAvailable = - dataSinglePr.Base !== "" && dataSinglePr.Head !== ""; + singlePrData?.Base !== "" && singlePrData?.Head !== ""; if ( - dataSinglePr.error == + singlePrData?.error == "GET https://api.github.com/repos/vitessio/vitess/pulls/13675: 404 Not Found []" ) { return ( @@ -65,11 +68,11 @@ export default function PRPage() { > [#{pull_nb}] {" "} - {dataSinglePr.Title} + {singlePrData?.Title} - By {dataSinglePr.Author} at{" "} - {formatDate(dataSinglePr.CreatedAt)}{" "} + By {singlePrData?.Author} at{" "} + {formatDate(singlePrData?.CreatedAt)}{" "} @@ -77,7 +80,7 @@ export default function PRPage() {
Compare with base commit @@ -87,8 +90,8 @@ export default function PRPage() {
{isComparisonAvailable ? ( <> - Base: {dataSinglePr.Base} - Head: {dataSinglePr.Head} + Base: {singlePrData?.Base} + Head: {singlePrData?.Head} ) : (
@@ -96,7 +99,7 @@ export default function PRPage() { pull request.
)} - {dataSinglePr.error} + {singlePrData?.error}
)} diff --git a/website/src/pages/PRsPage/PRsPage.tsx b/website/src/pages/PRsPage/PRsPage.tsx index 6590ff362..a44f3ba8d 100644 --- a/website/src/pages/PRsPage/PRsPage.tsx +++ b/website/src/pages/PRsPage/PRsPage.tsx @@ -21,13 +21,14 @@ import useApiCall from "../../utils/Hook"; import RingLoader from "react-spinners/RingLoader"; import PRTable from "./components/PRTable"; +import { prDataTypes } from "@/types"; export default function PRsPage() { const { data: dataPRList, isLoading: isPRListLoading, error: PRListError, - } = useApiCall(`${import.meta.env.VITE_API_URL}pr/list`, []); + } = useApiCall(`${import.meta.env.VITE_API_URL}pr/list`); return ( <> diff --git a/website/src/pages/SearchPage/SearchPage.tsx b/website/src/pages/SearchPage/SearchPage.tsx index 492f53e52..3b8198a8a 100644 --- a/website/src/pages/SearchPage/SearchPage.tsx +++ b/website/src/pages/SearchPage/SearchPage.tsx @@ -21,6 +21,7 @@ import useApiCall from "../../utils/Hook"; import Hero from "./components/Hero"; import SearchMacro from "./components/SearchMacro"; +import { SearchData } from "@/types"; export default function SearchPage() { const urlParams = new URLSearchParams(window.location.search); @@ -30,7 +31,9 @@ export default function SearchPage() { data: dataSearch, isLoading: isSearchLoading, error: searchError, - } = useApiCall(`${import.meta.env.VITE_API_URL}search?sha=${gitRef}`); + } = useApiCall( + `${import.meta.env.VITE_API_URL}search?sha=${gitRef}` + ); const navigate = useNavigate(); @@ -42,7 +45,9 @@ export default function SearchPage() { <> - {searchError &&
{searchError}
} + {searchError && ( +
{searchError}
+ )} {isSearchLoading && (
@@ -50,19 +55,25 @@ export default function SearchPage() {
)} - {!isSearchLoading && dataSearch && ( + {!isSearchLoading && dataSearch && dataSearch.length > 0 && (
- {dataSearch.Macros && - typeof dataSearch.Macros === "object" && - Object.entries(dataSearch.Macros).map(function ( - searchMacro, - index - ) { - return ( - - ); - })} + {dataSearch.map((searchData, index) => ( +
+ {searchData.Macros && + typeof searchData.Macros === "object" && + Object.entries(searchData.Macros).map( + ([macroName, macroData], idx) => ( + + ) + )} +
+ ))}
)} diff --git a/website/src/pages/SearchPage/components/SearchMacro.tsx b/website/src/pages/SearchPage/components/SearchMacro.tsx index 685b21a1c..655bface7 100644 --- a/website/src/pages/SearchPage/components/SearchMacro.tsx +++ b/website/src/pages/SearchPage/components/SearchMacro.tsx @@ -20,12 +20,19 @@ import { formatByte, secondToMicrosecond } from "../../../utils/Utils"; import { Link } from "react-router-dom"; import {getRange} from "@/common/Macrobench"; import PropTypes from "prop-types"; +import { MacroData } from "@/types"; -export default function SearchMacro({ data, gitRef }) { +interface SearchMacroProps { + macroName: string; + macroData: MacroData; + gitRef: string; +} + +export default function SearchMacro({ macroName, macroData, gitRef }: SearchMacroProps) { return (
-

{data[0]}

+

{macroName}

diff --git a/website/src/pages/StatusPage/StatusPage.tsx b/website/src/pages/StatusPage/StatusPage.tsx index 35842831a..69cb1e0ca 100644 --- a/website/src/pages/StatusPage/StatusPage.tsx +++ b/website/src/pages/StatusPage/StatusPage.tsx @@ -17,17 +17,19 @@ limitations under the License. import React from "react"; import RingLoader from "react-spinners/RingLoader"; import useApiCall from "../../utils/Hook"; +import { statusDataTypes } from "@/types"; import Hero from "./components/Hero"; import ExecutionQueue from "./components/PreviousExecutions"; import PreviousExecutions from "./components/PreviousExecutions"; + export default function StatusPage() { const { data: dataQueue, isLoading: isLoadingQueue, error: errorQueue, - } = useApiCall(`${import.meta.env.VITE_API_URL}queue`); + } = useApiCall(`${import.meta.env.VITE_API_URL}queue`); const { data: dataPreviousExe, isLoading: isLoadingPreviousExe } = useApiCall( `${import.meta.env.VITE_API_URL}recent` ); diff --git a/website/src/pages/StatusPage/components/Hero.tsx b/website/src/pages/StatusPage/components/Hero.tsx index 286b5ad31..fd283f307 100644 --- a/website/src/pages/StatusPage/components/Hero.tsx +++ b/website/src/pages/StatusPage/components/Hero.tsx @@ -15,6 +15,7 @@ limitations under the License. */ import React from "react"; import useApiCall from "../../../utils/Hook"; +import { statusDataTypes } from "@/types"; const info = [ { title: "Total Benchmarks", content: "Total" }, @@ -23,7 +24,7 @@ const info = [ ]; export default function Hero() { - const { data: dataStatusStats } = useApiCall( + const { data: dataStatusStats } = useApiCall( `${import.meta.env.VITE_API_URL}status/stats` ); diff --git a/website/src/types/index.ts b/website/src/types/index.ts index 537a73739..25a245a9c 100644 --- a/website/src/types/index.ts +++ b/website/src/types/index.ts @@ -15,3 +15,70 @@ limitations under the License. */ export type Theme = "default" | "dark"; + +export type statusDataTypes = { + uuid: string; + git_ref: string; + source: string; + started_at: string; + finished_at: string; + type_of: string; + pull_nb?: number; + golang_version: string; + status: string; +} + +export type prDataTypes = { + ID: number; + Author: string; + Title: string; + CreatedAt: string; + Base: string; + Head: string; + error?: any +} + +export interface Range { + infinite: boolean; + unknown: boolean; + value: number; +} + +export interface MacroDataValue { + center: number; + confidence: number; + range: Range; +} + +export interface ComponentsCpuTime { + vtgate: MacroDataValue; + vttablet: MacroDataValue; +} + +export interface ComponentsMemStatsAllocBytes { + vtgate: MacroDataValue; + vttablet: MacroDataValue; +} + +export interface MacroData { + git_ref: string; + total_qps: MacroDataValue; + reads_qps: MacroDataValue; + writes_qps: MacroDataValue; + other_qps: MacroDataValue; + tps: MacroDataValue; + latency: MacroDataValue; + errors: MacroDataValue; + total_components_cpu_time: MacroDataValue; + components_cpu_time: ComponentsCpuTime; + total_components_mem_stats_alloc_bytes: MacroDataValue; + components_mem_stats_alloc_bytes: ComponentsMemStatsAllocBytes; +} + +export interface MacrosData { + [key: string]: MacroData; +} + +export interface SearchData { + Macros: MacrosData; +} \ No newline at end of file diff --git a/website/src/utils/Hook.tsx b/website/src/utils/Hook.tsx index 8587e2fe8..474454ed3 100644 --- a/website/src/utils/Hook.tsx +++ b/website/src/utils/Hook.tsx @@ -18,8 +18,8 @@ import { useState, useEffect } from "react"; import { errorApi } from "./Utils"; -const useApiCall = (url: string) => { - const [data, setData] = useState([]); +const useApiCall = (url: string) : { data: T[], isLoading: boolean, error: string | null, textLoading: boolean } => { + const [data, setData] = useState([]); const [isLoading, setIsLoading] = useState(true); const [error, setError] = useState(null); const [textLoading, setTextLoading] = useState(true); From 79dddd06a2c547a2ec9cd057310ea03bf3efd8ed Mon Sep 17 00:00:00 2001 From: utnim2 Date: Tue, 7 May 2024 02:40:24 +0530 Subject: [PATCH 2/4] added types for `compare`,`daily`, `FK` page --- website/src/pages/ComparePage/ComparePage.tsx | 12 +++--- website/src/pages/DailyPage/DailyPage.tsx | 34 ++++++++++------ .../pages/ForeignKeysPage/ForeignKeysPage.tsx | 29 ++++++++++---- website/src/types/index.ts | 40 +++++++++++++++---- 4 files changed, 81 insertions(+), 34 deletions(-) diff --git a/website/src/pages/ComparePage/ComparePage.tsx b/website/src/pages/ComparePage/ComparePage.tsx index 0ee3bd31c..946fe33d6 100644 --- a/website/src/pages/ComparePage/ComparePage.tsx +++ b/website/src/pages/ComparePage/ComparePage.tsx @@ -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); @@ -31,11 +31,11 @@ export default function Compare() { }); const { - data: dataMacrobench, + data: compareData, isLoading: isMacrobenchLoading, textLoading: macrobenchTextLoading, error: macrobenchError, - } = useApiCall( + } = useApiCall( `${import.meta.env.VITE_API_URL}macrobench/compare?new=${gitRef.new}&old=${gitRef.old}` ); @@ -62,11 +62,11 @@ export default function Compare() {
)} - {!isMacrobenchLoading && !macrobenchTextLoading && dataMacrobench && ( + {!isMacrobenchLoading && !macrobenchTextLoading && compareData && compareData.length > 0 && (

Macro Benchmarks

- {dataMacrobench.map((macro, index) => { + {compareData.map((macro, index) => { return (
( + urlParams.get("type") ?? "OLTP" ); const { data: dataDailySummary, isLoading: isLoadingDailySummary, error: errorDailySummary, - } = useApiCall(`${import.meta.env.VITE_API_URL}daily/summary`); + } = useApiCall(`${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(`${import.meta.env.VITE_API_URL}daily?type=${benchmarkType}`); const navigate = useNavigate(); @@ -49,14 +55,14 @@ export default function DailyPage() { navigate(`?type=${benchmarkType}`); }, [benchmarkType]); - const TPSData = [ + const TPSData: { id: string; data: { x: string; y: number }[] }[] = [ { id: "TPS", data: [], }, ]; - const QPSData = [ + const QPSData: { id: string; data: { x: string; y: number }[] }[] = [ { id: "Reads", data: [], @@ -77,14 +83,14 @@ export default function DailyPage() { }, ]; - const latencyData = [ + const latencyData: { id: string; data: { x: string; y: number }[] }[] = [ { id: "Latency", data: [], }, ]; - const CPUTimeData = [ + const CPUTimeData : { id: string; data: { x: string; y: number }[] }[]= [ { id: "Total", data: [], @@ -99,7 +105,7 @@ export default function DailyPage() { }, ]; - const MemBytesData = [ + const MemBytesData: { id: string; data: { x: string; y: number }[] }[] = [ { id: "Total", data: [], @@ -188,7 +194,11 @@ export default function DailyPage() { }); } - const allChartData = [ + const allChartData: { + data: { id: string; data: { x: string; y: number }[] }[]; + title: string; + colors: string[]; + }[] = [ { data: QPSData, title: "QPS (Queries per second)", @@ -234,9 +244,9 @@ export default function DailyPage() {
)} - {!errorDailySummary && dataDailySummary && ( + {!errorDailySummary && dataDailySummary && dataDailySummary.length > 0 &&( <> -
+
{dataDailySummary.map((dailySummary, index) => { return ( { +interface Ref { + Name: string; + CommitHash: string; + Version: { + Major: number; + Minor: number; + Patch: number; + }; + RCnumber: number; +} + +interface ForeignKeysProps {} + +const ForeignKeys: React.FC = () => { 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(); + const [dataFKs, setDataFKs] = useState([]); + const [error, setError] = useState(null); + const [loading, setLoading] = useState(true); async function loadRefs() { try { @@ -49,7 +62,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); diff --git a/website/src/types/index.ts b/website/src/types/index.ts index 25a245a9c..2add5b824 100644 --- a/website/src/types/index.ts +++ b/website/src/types/index.ts @@ -50,12 +50,7 @@ export interface MacroDataValue { range: Range; } -export interface ComponentsCpuTime { - vtgate: MacroDataValue; - vttablet: MacroDataValue; -} - -export interface ComponentsMemStatsAllocBytes { +export interface ComponentStats { vtgate: MacroDataValue; vttablet: MacroDataValue; } @@ -70,9 +65,9 @@ export interface MacroData { latency: MacroDataValue; errors: MacroDataValue; total_components_cpu_time: MacroDataValue; - components_cpu_time: ComponentsCpuTime; + components_cpu_time: ComponentStats; total_components_mem_stats_alloc_bytes: MacroDataValue; - components_mem_stats_alloc_bytes: ComponentsMemStatsAllocBytes; + components_mem_stats_alloc_bytes: ComponentStats; } export interface MacrosData { @@ -81,4 +76,33 @@ export interface MacrosData { export interface SearchData { Macros: MacrosData; +} + +export interface Range { + infinite: boolean; + unknown: boolean; + value: number; +} + +export interface ComparedValue { + insignificant: boolean; + delta: number; + p: number; + n1: number; + n2: number; + old: MacroDataValue; + new: MacroDataValue; +} + +export interface CompareResult { + total_qps: ComparedValue; + reads_qps: ComparedValue; + writes_qps: ComparedValue; + other_qps: ComparedValue; + tps: ComparedValue; +} + +export interface CompareData { + type: string; + result: CompareResult; } \ No newline at end of file From c521543a2a879834539b3ae1e3282830d667e790 Mon Sep 17 00:00:00 2001 From: utnim2 Date: Fri, 10 May 2024 13:19:31 +0530 Subject: [PATCH 3/4] added xy types of dailyPage --- website/src/pages/DailyPage/DailyPage.tsx | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/website/src/pages/DailyPage/DailyPage.tsx b/website/src/pages/DailyPage/DailyPage.tsx index 8fc88184a..2e836fe9f 100644 --- a/website/src/pages/DailyPage/DailyPage.tsx +++ b/website/src/pages/DailyPage/DailyPage.tsx @@ -30,6 +30,10 @@ interface DailySummarydata { name: string; data : { total_qps: MacroDataValue }[]; } + interface dataXY { + x: string; + y: number; + } export default function DailyPage() { const urlParams = new URLSearchParams(window.location.search); @@ -55,14 +59,14 @@ export default function DailyPage() { navigate(`?type=${benchmarkType}`); }, [benchmarkType]); - const TPSData: { id: string; data: { x: string; y: number }[] }[] = [ + const TPSData: { id: string; data: dataXY[] }[] = [ { id: "TPS", data: [], }, ]; - const QPSData: { id: string; data: { x: string; y: number }[] }[] = [ + const QPSData: { id: string; data: dataXY[] }[] = [ { id: "Reads", data: [], @@ -83,14 +87,14 @@ export default function DailyPage() { }, ]; - const latencyData: { id: string; data: { x: string; y: number }[] }[] = [ + const latencyData: { id: string; data: dataXY[] }[] = [ { id: "Latency", data: [], }, ]; - const CPUTimeData : { id: string; data: { x: string; y: number }[] }[]= [ + const CPUTimeData : { id: string; data: dataXY[] }[]= [ { id: "Total", data: [], @@ -105,7 +109,7 @@ export default function DailyPage() { }, ]; - const MemBytesData: { id: string; data: { x: string; y: number }[] }[] = [ + const MemBytesData: { id: string; data: dataXY[] }[] = [ { id: "Total", data: [], @@ -195,7 +199,7 @@ export default function DailyPage() { } const allChartData: { - data: { id: string; data: { x: string; y: number }[] }[]; + data: { id: string; data: dataXY[] }[]; title: string; colors: string[]; }[] = [ From 687958d11e7fa156afd2f865e78ef437c0f5ee1a Mon Sep 17 00:00:00 2001 From: utnim2 Date: Sat, 11 May 2024 00:30:28 +0530 Subject: [PATCH 4/4] cleanup --- website/src/pages/DailyPage/DailyPage.tsx | 25 +++++++++++-------- .../SearchPage/components/SearchMacro.tsx | 2 +- 2 files changed, 15 insertions(+), 12 deletions(-) diff --git a/website/src/pages/DailyPage/DailyPage.tsx b/website/src/pages/DailyPage/DailyPage.tsx index 2e836fe9f..285c303ee 100644 --- a/website/src/pages/DailyPage/DailyPage.tsx +++ b/website/src/pages/DailyPage/DailyPage.tsx @@ -30,10 +30,13 @@ interface DailySummarydata { name: string; data : { total_qps: MacroDataValue }[]; } - interface dataXY { - x: string; - y: number; - } + +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); @@ -59,14 +62,14 @@ export default function DailyPage() { navigate(`?type=${benchmarkType}`); }, [benchmarkType]); - const TPSData: { id: string; data: dataXY[] }[] = [ + const TPSData: { id: string; data: NumberDataPoint[] }[] = [ { id: "TPS", data: [], }, ]; - const QPSData: { id: string; data: dataXY[] }[] = [ + const QPSData: { id: string; data: NumberDataPoint[] }[] = [ { id: "Reads", data: [], @@ -87,14 +90,14 @@ export default function DailyPage() { }, ]; - const latencyData: { id: string; data: dataXY[] }[] = [ + const latencyData: { id: string; data: NumberDataPoint[] }[] = [ { id: "Latency", data: [], }, ]; - const CPUTimeData : { id: string; data: dataXY[] }[]= [ + const CPUTimeData : { id: string; data: StringDataPoint[] }[]= [ { id: "Total", data: [], @@ -109,7 +112,7 @@ export default function DailyPage() { }, ]; - const MemBytesData: { id: string; data: dataXY[] }[] = [ + const MemBytesData: { id: string; data: NumberDataPoint[] }[] = [ { id: "Total", data: [], @@ -199,7 +202,7 @@ export default function DailyPage() { } const allChartData: { - data: { id: string; data: dataXY[] }[]; + data: ChartDataItem[]; title: string; colors: string[]; }[] = [ @@ -272,7 +275,7 @@ export default function DailyPage() { {allChartData.map((chartData, index) => (