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 (