From 41214930b3f353d627efb7e38d1e38f5b92bd8d6 Mon Sep 17 00:00:00 2001 From: Jack He Date: Mon, 4 Dec 2023 22:32:48 -0800 Subject: [PATCH] update to fetch from real data source --- dashboard/src/hooks/use-fetch-data.js | 29 +++ dashboard/src/pages/throughput.jsx | 183 +++++++++--------- dashboard/src/pages/util/parser.js | 48 +++++ .../src/sections/overview/view/app-view.jsx | 19 ++ 4 files changed, 191 insertions(+), 88 deletions(-) create mode 100644 dashboard/src/hooks/use-fetch-data.js create mode 100644 dashboard/src/pages/util/parser.js diff --git a/dashboard/src/hooks/use-fetch-data.js b/dashboard/src/hooks/use-fetch-data.js new file mode 100644 index 00000000..231eec6b --- /dev/null +++ b/dashboard/src/hooks/use-fetch-data.js @@ -0,0 +1,29 @@ +import { useState, useEffect } from 'react'; + +function useFetchData(url) { + const [data, setData] = useState(null); + const [isLoading, setIsLoading] = useState(true); + const [error, setError] = useState(null); + + useEffect(() => { + fetch(url) + .then(response => { + if (!response.ok) { + throw new Error('Network response was not ok'); + } + return response.json(); + }) + .then(json => { + setData(json); + setIsLoading(false); + }) + .catch(err => { + setError(err); + setIsLoading(false); + }); + }, [url]); // Dependency array includes url to re-run the effect if the url changes + + return { data, isLoading, error }; +} + +export default useFetchData; diff --git a/dashboard/src/pages/throughput.jsx b/dashboard/src/pages/throughput.jsx index 354c2754..12754aff 100644 --- a/dashboard/src/pages/throughput.jsx +++ b/dashboard/src/pages/throughput.jsx @@ -1,42 +1,37 @@ import { Helmet } from 'react-helmet-async'; -import { useState, useEffect } from 'react'; import Grid from '@mui/material/Unstable_Grid2'; import Container from '@mui/material/Container'; import Typography from '@mui/material/Typography'; +import useFetchData from 'src/hooks/use-fetch-data'; + import { GraphView } from 'src/sections/overview/graphing'; +import { + parseLinuxDownloadQuic, + parseLinuxDownloadTcp, + parseLinuxUploadQuic, + parseLinuxUploadTcp, + parseWindowsDownloadQuic, + parseWindowsDownloadTcp, + parseWindowsUploadQuic, + parseWindowsUploadTcp, + parseCommitsList, + parseRunDates, +} from './util/parser'; + + // ---------------------------------------------------------------------- export default function ThroughputPage() { - // TODO: Once you have the pipeline to auto-update based on the last ~20 commits, update this URL. - const URL = "https://microsoft.github.io/netperf/data/secnetperf/2023-12-01-20-25-09._.67ee09354f52d014ad4e9ec85fcb6b9260890134.json/test_result.json"; - - const [data, setData] = useState(null); - const [isLoading, setIsLoading] = useState(true); - const [error, setError] = useState(null); - - - useEffect(() => { - fetch(URL) - .then(response => { - if (!response.ok) { - throw new Error('Network response was not ok'); - } - return response.json(); - }) - .then(json => { - setData(json); - setIsLoading(false); - }) - .catch(err => { - setError(err); - setIsLoading(false); - }); - }, []); + const URL = "https://microsoft.github.io/netperf/data/secnetperf/dashboard.json"; + const { data, isLoading, error } = useFetchData(URL); + + let uploadThroughput =
+ let downloadThroughput =
if (isLoading) { console.log("Loading..."); @@ -48,6 +43,78 @@ export default function ThroughputPage() { if (data) { console.log(data); + const commits = parseCommitsList(data); + const runDates = parseRunDates(data); + const windowsTcpUpload = parseWindowsUploadTcp(data); + const windowsTcpDownload = parseWindowsDownloadTcp(data); + const windowsQuicUpload = parseWindowsUploadQuic(data); + const windowsQuicDownload = parseWindowsDownloadQuic(data); + const linuxTcpUpload = parseLinuxUploadTcp(data); + const linuxTcpDownload = parseLinuxDownloadTcp(data); + const linuxQuicUpload = parseLinuxUploadQuic(data); + const linuxQuicDownload = parseLinuxDownloadQuic(data); + + uploadThroughput = + downloadThroughput = } return ( @@ -61,68 +128,8 @@ export default function ThroughputPage() { Detailed Throughput - - + {uploadThroughput} + {downloadThroughput} diff --git a/dashboard/src/pages/util/parser.js b/dashboard/src/pages/util/parser.js new file mode 100644 index 00000000..0f5c4380 --- /dev/null +++ b/dashboard/src/pages/util/parser.js @@ -0,0 +1,48 @@ +export function parseWindowsUploadTcp(data) { + return [900000, 901000, 500304] +} + +export function parseWindowsDownloadTcp(data) { + + return [] +} + +export function parseWindowsUploadQuic(data) { + + return [890000, 899999, 500304] +} + +export function parseWindowsDownloadQuic(data) { + + return [] +} + +export function parseLinuxUploadTcp(data) { + + return [] +} + +export function parseLinuxDownloadTcp(data) { + + return [] +} + +export function parseLinuxUploadQuic(data) { + + return [] +} + +export function parseLinuxDownloadQuic(data) { + + return [] +} + +export function parseCommitsList(data) { + + return ['xyz', 'ijk', 'abc'] +} + +export function parseRunDates(data) { + + return [] +} diff --git a/dashboard/src/sections/overview/view/app-view.jsx b/dashboard/src/sections/overview/view/app-view.jsx index 1fd1ac7f..682c16ab 100644 --- a/dashboard/src/sections/overview/view/app-view.jsx +++ b/dashboard/src/sections/overview/view/app-view.jsx @@ -5,6 +5,7 @@ import Grid from '@mui/material/Unstable_Grid2'; import Typography from '@mui/material/Typography'; // import Iconify from 'src/components/iconify'; +import useFetchData from 'src/hooks/use-fetch-data'; // import AppTasks from '../app-tasks'; // import AppNewsUpdate from '../app-news-update'; // import AppOrderTimeline from '../app-order-timeline'; @@ -15,9 +16,27 @@ import AppWidgetSummary from '../app-widget-summary'; // import AppCurrentSubject from '../app-current-subject'; // import AppConversionRates from '../app-conversion-rates'; + + // ---------------------------------------------------------------------- export default function AppView() { + + const URL = "https://microsoft.github.io/netperf/data/secnetperf/dashboard.json"; + const { data, isLoading, error } = useFetchData(URL); + + if (isLoading) { + console.log("Loading..."); + } + + if (error) { + console.log("Error!"); + } + + if (data) { + console.log(data); + } + return (