Storage: location based speed results

src/components/Storage/index.tsx

@@ -3,6 +3,7 @@ import { Button } from "react-bootstrap";
 import Loading from "../Loading";
 import moment from "moment";
 import Provider from "./Provider";
+import axios from "axios";
 
 interface IProps {
   assets: string[];
@@ -20,6 +21,7 @@ class Storage extends React.Component<IProps, IState> {
       number: 10,
       loading: {},
       assets: [],
+      speeds: {},
     };
     this.startTest = this.startTest.bind(this);
     this.loadAsset = this.loadAsset.bind(this);
@@ -27,9 +29,17 @@ class Storage extends React.Component<IProps, IState> {
   }
 
   componentDidMount() {
+    this.fetchSpeeds();
     //setInterval(this.forceUpdate, 5000);
   }
 
+  async fetchSpeeds() {
+    const { data } = await axios.get(`/static/speeds2.json`);
+    if (data.error) return;
+    console.log(`received results for`, Object.keys(data).join(`, `));
+    this.setState({ speeds: data });
+  }
+
   startTest(test: number) {
     const { hash, number } = this.state;
     const { assets } = this.props;
@@ -70,14 +80,21 @@ class Storage extends React.Component<IProps, IState> {
   }
 
   render() {
-    const { selectedAssets, hash, number, loading, startedAt } = this.state;
+    const {
+      speeds,
+      selectedAssets,
+      hash,
+      number,
+      loading,
+      startedAt,
+    } = this.state;
     const { providers, assets } = this.props;
 
     if (!providers.length) return <Loading target="storage providers" />;
     if (!assets.length) return <Loading target="assets" />;
 
     return (
-      <div className="p-3 text-light">
+      <div className="m-2 p-2 bg-light">
         <h2>Storage Providers</h2>
         <div className="form-group">
           <input
@@ -118,6 +135,17 @@ class Storage extends React.Component<IProps, IState> {
             />
           ))) || <Loading target="provider list" />}
 
+        <h2>Latest Speed Test</h2>
+        <div className="d-flex flex-wrap ">
+          {Object.keys(speeds).map((location) => (
+            <Location
+              key={location}
+              location={location}
+              providers={speeds[location]}
+            />
+          ))}
+        </div>
+
         <div className="position-fixed" style={{ right: "0px", top: "0px" }}>
           <a href="/">Back</a>
         </div>
@@ -127,3 +155,59 @@ class Storage extends React.Component<IProps, IState> {
 }
 
 export default Storage;
+
+interface Asset {
+  provider: string;
+  timestamp: string;
+  asset: string;
+  speed: {
+    dnslookup: number;
+    connect: number;
+    appconnect: number;
+    pretransfer: number;
+    redirect: number;
+    starttransfer: number;
+    total: number;
+    size: number;
+  };
+}
+
+const calculateSpeed = (provider: Asset[]) => {
+  let transferred: number = 0;
+  let duration: number = 0;
+  let assets: string[] = [];
+  let url: string;
+  provider.map(({ speed, provider, asset }: Asset) => {
+    const { total, size } = speed;
+    transferred += size / 1000000;
+    duration += total;
+    assets.push(asset);
+    url = provider;
+  });
+  const speed = transferred / duration;
+  return { transferred, duration, assets, speed, url };
+};
+
+const Location = (props: { location: string; providers: any[] }) => {
+  const { location, providers } = props;
+  const speeds = providers.map((provider) => calculateSpeed(provider));
+  const sorted = speeds.sort((a, b) => b.speed - a.speed);
+  //console.log(location, sorted);
+  return (
+    <div className="col-3 mb-3">
+      <h3>{location}</h3>
+      {sorted
+        .slice(0, 5)
+        .map(({ url, assets, speed, duration, transferred }, i: number) => (
+          <div key={url} className="mb-1">
+            <b>
+              {i + 1}. {url}
+            </b>
+            <div>speed: {speed.toFixed()} mb/s</div>
+            <div>transferred: {transferred.toFixed()} mb</div>
+            <div>duration: {duration.toFixed()} s</div>
+          </div>
+        ))}
+    </div>
+  );
+};