Skip to content

Commit

Permalink
update to fetch from real data source
Browse files Browse the repository at this point in the history
  • Loading branch information
ProjectsByJackHe committed Dec 5, 2023
1 parent 0afba87 commit 4121493
Show file tree
Hide file tree
Showing 4 changed files with 191 additions and 88 deletions.
29 changes: 29 additions & 0 deletions dashboard/src/hooks/use-fetch-data.js
Original file line number Diff line number Diff line change
@@ -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;
183 changes: 95 additions & 88 deletions dashboard/src/pages/throughput.jsx
Original file line number Diff line number Diff line change
@@ -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 = <div />
let downloadThroughput = <div />

if (isLoading) {
console.log("Loading...");
Expand All @@ -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 = <GraphView title="Upload Throughput"
subheader='Tested using Windows Server 2022 (Client and Server). Linux Ubuntu 20.04.3 LTS (Client and Server)'
labels={commits}
series={[
{
name: 'Linux + TCP',
type: 'line',
fill: 'solid',
data: linuxTcpUpload,

},
{
name: 'Windows + TCP',
type: 'line',
fill: 'solid',
data: windowsTcpUpload,
},
{
name: 'Linux + QUIC',
type: 'line',
fill: 'solid',
data: linuxQuicUpload,
},
{
name: 'Windows + QUIC',
type: 'line',
fill: 'solid',
data: windowsQuicUpload,
},
]} />
downloadThroughput = <GraphView title="Download Throughput"
subheader='Tested using Windows 11 build 22000.282, Linux Ubuntu 20.04.3 LTS'
labels={commits}
series={[
{
name: 'Linux + TCP',
type: 'line',
fill: 'solid',
data: linuxTcpDownload,

},
{
name: 'Windows + TCP',
type: 'line',
fill: 'solid',
data: windowsTcpDownload,
},
{
name: 'Linux + QUIC',
type: 'line',
fill: 'solid',
data: linuxQuicDownload,
},
{
name: 'Windows + QUIC',
type: 'line',
fill: 'solid',
data: windowsQuicDownload,
},
]}
/>
}

return (
Expand All @@ -61,68 +128,8 @@ export default function ThroughputPage() {
Detailed Throughput
</Typography>
<Grid container spacing={3}>
<GraphView title="Download Throughput"
subheader='Tested using Windows 11 build 22000.282, Linux Ubuntu 20.04.3 LTS'
labels={['Commit 1', 'Commit 2', 'Commit 3', 'Commit 4', 'Commit 5', 'Commit 6']}
series={[
{
name: 'Linux + TCP',
type: 'line',
fill: 'solid',
data: [23, 30, 22, 43, 32, 44],

},
{
name: 'Windows + TCP',
type: 'line',
fill: 'solid',
data: [10, 5, 21, 12, 32, 44],
},
{
name: 'Linux + QUIC',
type: 'line',
fill: 'solid',
data: [32, 43, 53, 43, 24, 44],
},
{
name: 'Windows + QUIC',
type: 'line',
fill: 'solid',
data: [50, 55, 34, 23, 78, 44],
},
]}
/>
<GraphView title="Upload Throughput"
subheader='Tested using Windows 11 build 22000.282, Linux Ubuntu 20.04.3 LTS'
labels={['Commit 1', 'Commit 2', 'Commit 3', 'Commit 4', 'Commit 5', 'Commit 6']}
series={[
{
name: 'Linux + TCP',
type: 'line',
fill: 'solid',
data: [23, 30, 22, 43, 32, 44],

},
{
name: 'Windows + TCP',
type: 'line',
fill: 'solid',
data: [10, 5, 21, 12, 32, 44],
},
{
name: 'Linux + QUIC',
type: 'line',
fill: 'solid',
data: [32, 43, 53, 43, 24, 44],
},
{
name: 'Windows + QUIC',
type: 'line',
fill: 'solid',
data: [50, 55, 34, 23, 78, 44],
},
]}
/>
{uploadThroughput}
{downloadThroughput}
</Grid>
</Container>
</>
Expand Down
48 changes: 48 additions & 0 deletions dashboard/src/pages/util/parser.js
Original file line number Diff line number Diff line change
@@ -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 []
}
19 changes: 19 additions & 0 deletions dashboard/src/sections/overview/view/app-view.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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 (
<Container maxWidth="xl">
<Typography variant="h3" sx={{ mb: 5 }}>
Expand Down

0 comments on commit 4121493

Please sign in to comment.