From 4d473493e5195b0b2c39af54f5a267ee826aabcb Mon Sep 17 00:00:00 2001
From: Brian Ridsdalea <dynamikarray@gmail.com>
Date: Thu, 27 Jan 2022 23:22:55 -0500
Subject: [PATCH 1/7] Updated vue config for development server proxy port to
 match default node port

---
 client/socket.config.js | 3 ---
 client/vue.config.js    | 2 +-
 2 files changed, 1 insertion(+), 4 deletions(-)
 delete mode 100644 client/socket.config.js

diff --git a/client/socket.config.js b/client/socket.config.js
deleted file mode 100644
index 8f840f7..0000000
--- a/client/socket.config.js
+++ /dev/null
@@ -1,3 +0,0 @@
-module.exports = {
-  socketUrl: "http://localhost:8080",
-};
diff --git a/client/vue.config.js b/client/vue.config.js
index b3db57a..15c5f21 100644
--- a/client/vue.config.js
+++ b/client/vue.config.js
@@ -17,7 +17,7 @@ module.exports = {
     disableHostCheck: false,
     proxy: {
       "/*": {
-        target: "http://localhost:8080",
+        target: "http://localhost:3000",
       },
     },
     stats: {

From 5bdb2c06bfc3b2a370b92575e312105c148b7675 Mon Sep 17 00:00:00 2001
From: Brian Ridsdalea <dynamikarray@gmail.com>
Date: Fri, 28 Jan 2022 00:46:02 -0500
Subject: [PATCH 2/7] Added results and stats to /ogs endpoint

---
 server/controllers/v1/logs/logsController.js | 11 ++++++-
 server/index.js                              | 21 ++++++++-----
 server/models/logSchema.js                   | 31 ++++++++++++++++++++
 server/services/speedtestService.js          |  9 ------
 4 files changed, 55 insertions(+), 17 deletions(-)

diff --git a/server/controllers/v1/logs/logsController.js b/server/controllers/v1/logs/logsController.js
index 932e2a1..d9626e1 100644
--- a/server/controllers/v1/logs/logsController.js
+++ b/server/controllers/v1/logs/logsController.js
@@ -1,6 +1,15 @@
+const { logger } = require("../../../util/logger");
+const SpeedTestLogs = require("../../../models/logSchema.js");
+
 async function home(req, res, next) {
   try {
-    res.send("We Made It");
+
+    const results = await Promise.all([
+      await SpeedTestLogs.getCurrentStats(),
+      await SpeedTestLogs.getLatestResults(),
+    ]);
+    
+    res.send({stats: results[0], results: results[1]});
     //
   } catch (e) {
     //correctly json handle this error message
diff --git a/server/index.js b/server/index.js
index b1126e2..d9425cf 100644
--- a/server/index.js
+++ b/server/index.js
@@ -13,28 +13,35 @@ const { runSpeedTestLog } = require("./services/speedtestService.js");
 
 logger.info(`Speedtester Starting in ${process.env.NODE_ENV} mode`);
 
+
 const {install} = require("../config/install");
 
 //Once connect launch our server
 connectDb().then(async () => {
   logger.info("Speedtester Connected to Mongo");
 
-  logger.info("Speedtester Accepting Liscensce for Speedtest.net");
-  await install();
+  //Liscense check for production only instances built through docker images
+  if(process.env.NODE_ENV == 'production'){
+    logger.info("Speedtester Accepting Liscensce for Speedtest.net");
+    await install();
+  }
   
-  //Start Server
-  const port = process.env.APP_PORT || 3000;
-  server.listen(port);
-
   //setup Events Emitter for sockets
   const events = require("events");
   const em = new events.EventEmitter();
 
+  //Pass Events Emitter to Socket Routes
   require("./routes/socket")(io, em);
-  
+
+  //setup scheduled jobs
   if (RUN_SCHEDULED_JOB == true) {
     const speedtestIntervalJob = schedule.scheduleJob(SPEEDTEST_INTERVAL, runSpeedTestLog);
   }
 
+  //Start Server
+  const port = process.env.APP_PORT || 3000;
+  server.listen(port);
+
+
   logger.info(`Speedtester API is running on port: ${port}`);
 });
diff --git a/server/models/logSchema.js b/server/models/logSchema.js
index 401bceb..7dc124a 100644
--- a/server/models/logSchema.js
+++ b/server/models/logSchema.js
@@ -1,4 +1,5 @@
 const mongoose = require("mongoose");
+const { logger } = require("../util/logger");
 
 const LogSchema = new mongoose.Schema({
   timestamp: {
@@ -77,4 +78,34 @@ const LogSchema = new mongoose.Schema({
 //Make this collection singular later?
 const Log = mongoose.model("Log", LogSchema);
 
+Log.getLatestResults = async function () {
+  try {
+    const results = await Log.find().sort({_id: -1}).limit(500);
+    return results; 
+  } catch (error) {
+    logger.error("logSchema | getLatestResults | Error=", error.message);
+  }
+}
+
+Log.getCurrentStats = async function () {
+  try {
+    const results = await Log.aggregate([
+      {$sort: {timestamp: -1}},      
+      {
+        $group:
+        {
+          "_id": null,
+          avgDownload: {$avg: "$download.bandwidth"} ,
+          avgUpload: {$avg: "$upload.bandwidth"}  
+        }
+      }      
+    ]);
+    return results; 
+  } catch (error) {
+    logger.error("logSchema | getCurrentStats | Error=", error);
+  }
+}
+
+
+
 module.exports = Log;
diff --git a/server/services/speedtestService.js b/server/services/speedtestService.js
index 79eda49..a5f6416 100644
--- a/server/services/speedtestService.js
+++ b/server/services/speedtestService.js
@@ -54,12 +54,3 @@ const speedtestService = {
 };
 
 module.exports = speedtestService;
-
-/**
-
-const { convertToMegabits } = require("../util/utilities.js");
-
-async function handleProgress(testEvent) {
-  console.log(testEvent);
-}
- */

From 965505462d7b30b315fa7641ac76faac66cd4fff Mon Sep 17 00:00:00 2001
From: Brian Ridsdalea <dynamikarray@gmail.com>
Date: Fri, 28 Jan 2022 01:47:29 -0500
Subject: [PATCH 3/7] Added Endpoint for logs and stats, built out basic vuex
 store module

---
 .prettierrc.json                              |   3 -
 client/package-lock.json                      |  20 ++-
 client/package.json                           |   1 +
 client/src/App.vue                            |   6 +
 client/src/components/Layout/Header.vue       |   4 +-
 .../Speedtest/SpeedtestPastResults.vue        |  10 ++
 .../Speedtest/SpeedtestProgressCard.vue       |  14 +-
 .../Speedtest/SpeedtestResultsCard.vue        |  26 ++-
 .../components/Speedtest/SpeedtestWrapper.vue |  19 ++-
 client/src/store/api/index.js                 |  66 ++++++++
 client/src/store/index.js                     |   7 +
 client/src/store/logs/index.js                |  55 ++++++
 client/src/store/store.constants.js           |  14 ++
 client/src/util/axios.js                      |  10 ++
 package-lock.json                             | 158 ++++++++++++++++++
 server/controllers/v1/logs/logsController.js  |   2 +-
 16 files changed, 394 insertions(+), 21 deletions(-)
 delete mode 100644 .prettierrc.json
 create mode 100644 client/src/store/api/index.js
 create mode 100644 client/src/store/logs/index.js
 create mode 100644 client/src/store/store.constants.js
 create mode 100644 client/src/util/axios.js

diff --git a/.prettierrc.json b/.prettierrc.json
deleted file mode 100644
index 963354f..0000000
--- a/.prettierrc.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "printWidth": 120
-}
diff --git a/client/package-lock.json b/client/package-lock.json
index daa018a..c1fbb81 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -2491,6 +2491,14 @@
       "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
       "dev": true
     },
+    "axios": {
+      "version": "0.25.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.25.0.tgz",
+      "integrity": "sha512-cD8FOb0tRH3uuEe6+evtAbgJtfxr7ly3fQjYcMcuPlgkwVS9xboaVIpcDV+cYQe+yGykgwZCs1pzjntcGa6l5g==",
+      "requires": {
+        "follow-redirects": "^1.14.7"
+      }
+    },
     "babel-eslint": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
@@ -3089,6 +3097,10 @@
       "integrity": "sha512-csfD/GpHMqgEL3V3uIgosvh+SVIQvCh43SNu9HRbP1lnxkKm1kjDG4f32PP571JplkLjfS+mg2p1gxR7MYrrIA==",
       "dev": true
     },
+    "canvas-gauges": {
+      "version": "github:Mikhus/canvas-gauges#6b179f83b7f03926a4d58ac09e15525d19fad3d1",
+      "from": "github:Mikhus/canvas-gauges"
+    },
     "case-sensitive-paths-webpack-plugin": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz",
@@ -5646,8 +5658,7 @@
     "follow-redirects": {
       "version": "1.14.7",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.7.tgz",
-      "integrity": "sha512-+hbxoLbFMbRKDwohX8GkTataGqO6Jb7jGwpAlwgy2bIz25XtRm7KEzJM76R1WiNT5SwZkX4Y75SwBolkpmE7iQ==",
-      "dev": true
+      "integrity": "sha512-+hbxoLbFMbRKDwohX8GkTataGqO6Jb7jGwpAlwgy2bIz25XtRm7KEzJM76R1WiNT5SwZkX4Y75SwBolkpmE7iQ=="
     },
     "for-in": {
       "version": "1.0.2",
@@ -11518,7 +11529,10 @@
     "vue-canvas-gauges": {
       "version": "0.0.0",
       "resolved": "https://registry.npmjs.org/vue-canvas-gauges/-/vue-canvas-gauges-0.0.0.tgz",
-      "integrity": "sha1-0GhVYS+AgqsmLPwiRrO/7QVfTvc="
+      "integrity": "sha1-0GhVYS+AgqsmLPwiRrO/7QVfTvc=",
+      "requires": {
+        "canvas-gauges": "github:Mikhus/canvas-gauges"
+      }
     },
     "vue-cli-plugin-vuetify": {
       "version": "2.4.5",
diff --git a/client/package.json b/client/package.json
index c203e0d..2c2caad 100644
--- a/client/package.json
+++ b/client/package.json
@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "5.15.3",
+    "axios": "^0.25.0",
     "core-js": "^3.6.5",
     "roboto-fontface": "*",
     "socket.io-client": "2.3.1",
diff --git a/client/src/App.vue b/client/src/App.vue
index 843cb9b..beabb6b 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -9,6 +9,8 @@
 
 <script>
 import Header from "@/components/Layout/Header";
+import { LOGS_FETCH_RECENT } from "@/store/store.constants.js";
+
 export default {
   name: "App",
   components: {
@@ -17,6 +19,10 @@ export default {
   data: () => ({
     //
   }),
+  mounted() {
+    console.log(this.$store);
+    this.$store.dispatch(`logs/${LOGS_FETCH_RECENT}`, null, { root: true });
+  },
 };
 </script>
 
diff --git a/client/src/components/Layout/Header.vue b/client/src/components/Layout/Header.vue
index 94da5c2..4817400 100644
--- a/client/src/components/Layout/Header.vue
+++ b/client/src/components/Layout/Header.vue
@@ -1,6 +1,8 @@
 <template>
   <v-app-bar app color="primary" dark :maxHeight="50">
-    <div class="d-flex align-center"><h3 class="shadow">Horizon Speed Tester</h3></div>
+    <div class="d-flex align-center">
+      <h3 class="shadow">Horizon Speed Tester</h3>
+    </div>
 
     <v-spacer></v-spacer>
 
diff --git a/client/src/components/Speedtest/SpeedtestPastResults.vue b/client/src/components/Speedtest/SpeedtestPastResults.vue
index 285fed3..643b81e 100644
--- a/client/src/components/Speedtest/SpeedtestPastResults.vue
+++ b/client/src/components/Speedtest/SpeedtestPastResults.vue
@@ -1,12 +1,22 @@
 <template>
   <div>
     <div class="text-h4">Past Results</div>
+    <div class="text-body">
+      {{ stats.avgDownload | convertToMegabits }}
+    </div>
   </div>
 </template>
 
 <script>
+import { mapGetters } from "vuex";
 export default {
   name: "SpeedtestPastResults",
+  computed: {
+    ...mapGetters({
+      stats: "logs/getStats",
+      results: "logs/getResults",
+    }),
+  },
 };
 </script>
 
diff --git a/client/src/components/Speedtest/SpeedtestProgressCard.vue b/client/src/components/Speedtest/SpeedtestProgressCard.vue
index 33d3628..fe99275 100644
--- a/client/src/components/Speedtest/SpeedtestProgressCard.vue
+++ b/client/src/components/Speedtest/SpeedtestProgressCard.vue
@@ -2,11 +2,21 @@
   <div class="d-flex align-center justify-center">
     <v-card color="secondary darken-4 pa-5" rounded="10">
       <h1 class="text-h3">{{ progressTypeLabel }}</h1>
-      <h1 class="text-h1">{{ progressSpeedValue | convertToMegabits }}<span class="text-h3 mx-4">Mbps</span></h1>
+      <h1 class="text-h1">
+        {{ progressSpeedValue | convertToMegabits
+        }}<span class="text-h3 mx-4">Mbps</span>
+      </h1>
 
       <div>
         <h5 class="mx-3">Time Remaining:</h5>
-        <v-progress-linear :value="progressPercent" rounded striped stream height="20" buffer-value="0" />
+        <v-progress-linear
+          :value="progressPercent"
+          rounded
+          striped
+          stream
+          height="20"
+          buffer-value="0"
+        />
       </div>
     </v-card>
   </div>
diff --git a/client/src/components/Speedtest/SpeedtestResultsCard.vue b/client/src/components/Speedtest/SpeedtestResultsCard.vue
index 282c03e..dc2e333 100644
--- a/client/src/components/Speedtest/SpeedtestResultsCard.vue
+++ b/client/src/components/Speedtest/SpeedtestResultsCard.vue
@@ -2,17 +2,24 @@
   <v-card v-if="results" color="secondary darken-3 pa-0 ma-0" rounded="10">
     <div class="pa-4">
       <div class="d-flex flex-wrap align-start justify-center">
-        <div class="mx-2 d-flex order-first flex-column align-start secondary darken-2 pa-2 ma-3 rounded-lg">
+        <div
+          class="mx-2 d-flex order-first flex-column align-start secondary darken-2 pa-2 ma-3 rounded-lg"
+        >
           <div class="text-h5">Download</div>
           <div class="text-h1 font-weight-bold">
-            {{ downloadSpeed | convertToMegabits }}<span class="text-h4 mx-4">Mbps</span>
+            {{ downloadSpeed | convertToMegabits
+            }}<span class="text-h4 mx-4">Mbps</span>
           </div>
         </div>
 
-        <div class="mx-4 d-flex order-last flex-column align-center secondary darken-2 pa-2 ma-3 rounded-lg mb-2">
+        <div
+          class="mx-4 d-flex order-last flex-column align-center secondary darken-2 pa-2 ma-3 rounded-lg mb-2"
+        >
           <div class="d-flex align-center justify-center">
             <div class="d-flex align-baseline justify-start">
-              <div class="font-weight-bold text-subTitle mx-2 align-baseline">Host:</div>
+              <div class="font-weight-bold text-subTitle mx-2 align-baseline">
+                Host:
+              </div>
               <div class="d-flex flex-column align-start justify-start">
                 <div class="font-weight-bold text-body-2 mx-2">
                   {{ serverInfo.host }}
@@ -40,15 +47,20 @@
           </div>
         </div>
 
-        <div class="mx-2 d-flex flex-column align-start secondary darken-2 pa-2 ma-3 rounded-lg">
+        <div
+          class="mx-2 d-flex flex-column align-start secondary darken-2 pa-2 ma-3 rounded-lg"
+        >
           <div class="text-h5">Upload</div>
           <div class="text-h1 font-weight-bold">
-            {{ uploadSpeed | convertToMegabits }}<span class="text-h4 mx-4">Mbps</span>
+            {{ uploadSpeed | convertToMegabits
+            }}<span class="text-h4 mx-4">Mbps</span>
           </div>
         </div>
       </div>
 
-      <div class="d-flex align-start justify-space-around pa-1 secondary darken-2 ma-2 rounded-lg">
+      <div
+        class="d-flex align-start justify-space-around pa-1 secondary darken-2 ma-2 rounded-lg"
+      >
         <div class="d-flex align-center justify-start">
           <div class="font-weight-bold text-heading mx-2">Isp:</div>
           <div class="d-flex flex-column align-baseline justify-start">
diff --git a/client/src/components/Speedtest/SpeedtestWrapper.vue b/client/src/components/Speedtest/SpeedtestWrapper.vue
index 52a2182..585f46d 100644
--- a/client/src/components/Speedtest/SpeedtestWrapper.vue
+++ b/client/src/components/Speedtest/SpeedtestWrapper.vue
@@ -6,16 +6,27 @@
           <div class="my-3 text-h3">Test Our Internet Speed</div>
 
           <div v-if="isRunning && speedTestEventData">
-            <SpeedtestProgressCard :progressEvent="speedTestEventData"></SpeedtestProgressCard>
+            <SpeedtestProgressCard
+              :progressEvent="speedTestEventData"
+            ></SpeedtestProgressCard>
           </div>
 
           <div v-if="speedTestResults" class="d-flex">
-            <SpeedtestResultsCard :results="speedTestResults"></SpeedtestResultsCard>
+            <SpeedtestResultsCard
+              :results="speedTestResults"
+            ></SpeedtestResultsCard>
           </div>
 
-          <v-btn large v-if="!isRunning" color="green" class="my-6 shadow-sm" @click="startSpeedTest"
+          <v-btn
+            large
+            v-if="!isRunning"
+            color="green"
+            class="my-6 shadow-sm"
+            @click="startSpeedTest"
             ><v-icon large class="mr-2">fa-tachometer-alt</v-icon>
-            <div class="text-h5 font-weight-bold pa-2">Run A Speed Test</div></v-btn
+            <div class="text-h5 font-weight-bold pa-2">
+              Run A Speed Test
+            </div></v-btn
           >
         </div>
       </v-col>
diff --git a/client/src/store/api/index.js b/client/src/store/api/index.js
new file mode 100644
index 0000000..712650b
--- /dev/null
+++ b/client/src/store/api/index.js
@@ -0,0 +1,66 @@
+import Vue from "vue";
+import Vuex from "vuex";
+Vue.use(Vuex);
+
+import { axiosClient } from "@/util/axios";
+
+import {
+  MAKE_API_CALL,
+  ADD_API_CALL,
+  REMOVE_API_CALL,
+} from "../store.constants";
+
+//import { USER_LOGOUT } from "@/components/User/store/actionTypes";
+
+const api = {
+  namespaced: true,
+  state: {
+    loading: false,
+  },
+  getters: {},
+  mutations: {
+    [ADD_API_CALL](state) {
+      state.loading++;
+    },
+    [REMOVE_API_CALL](state) {
+      state.loading--;
+    },
+  },
+  actions: {
+    async [MAKE_API_CALL]({ commit }, payload) {
+      const { headers, method, url, params, loading } = payload;
+
+      //commit the loading mutation for our indicator
+      if (loading) commit(loading, { loading: true }, { root: true });
+
+      let config = { headers, method, url: `${url}` };
+      //set params for request
+      if (method === "post") config.data = { ...params };
+      if (method === "get") config.params = { ...params };
+      if (method === "put") config.data = { ...params };
+
+      try {
+        commit(`${ADD_API_CALL}`);
+        return await axiosClient({
+          ...axiosClient.defaults,
+          ...config,
+        });
+      } catch (e) {
+        if (e.response.status === 401 || e.response.status === 403) {
+          if (this.$app.$router.history.current.name !== "Login")
+            this.$app.$router.push({ path: "login" });
+          this.$app.$toastr.e("You need to be logged in to continue.");
+        } else {
+          console.log(e);
+          if (e.message) this.$app.$toastr.e(e.message);
+        }
+        return false;
+      } finally {
+        commit(`${REMOVE_API_CALL}`);
+        if (loading) commit(loading, { loading: false }, { root: true });
+      }
+    },
+  },
+};
+
+export default api;
diff --git a/client/src/store/index.js b/client/src/store/index.js
index af6ae10..80b6564 100644
--- a/client/src/store/index.js
+++ b/client/src/store/index.js
@@ -3,7 +3,14 @@ import Vuex from "vuex";
 
 Vue.use(Vuex);
 
+import api from "./api";
+import logs from "./logs";
+
 export default new Vuex.Store({
+  modules: {
+    api,
+    logs,
+  },
   state: {
     socketStatus: false,
     socketStatusMessage: false,
diff --git a/client/src/store/logs/index.js b/client/src/store/logs/index.js
new file mode 100644
index 0000000..1eeafdb
--- /dev/null
+++ b/client/src/store/logs/index.js
@@ -0,0 +1,55 @@
+import Vue from "vue";
+import Vuex from "vuex";
+Vue.use(Vuex);
+
+import {
+  //mutations
+  LOGS_RESULTS,
+  LOGS_LOADING,
+  //actions
+  LOGS_FETCH_RECENT,
+  MAKE_API_CALL,
+} from "../store.constants";
+
+const logs = {
+  namespaced: true,
+  state: {
+    items: [],
+    stats: false,
+    loading: false,
+  },
+  getters: {
+    getStats: (state) => {
+      return state.stats;
+    },
+    getResults: (state) => {
+      return state.items;
+    },
+  },
+  mutations: {
+    [LOGS_LOADING](state, { loading }) {
+      state.loading = loading;
+    },
+    [LOGS_RESULTS](state, { stats, results }) {
+      state.items = results;
+      state.stats = stats;
+    },
+  },
+  actions: {
+    async [LOGS_FETCH_RECENT]({ commit, dispatch }) {
+      const result = await dispatch(
+        `api/${MAKE_API_CALL}`,
+        {
+          method: "get",
+          url: "/logs/",
+          loading: `logs/${LOGS_LOADING}`,
+        },
+        { root: true }
+      );
+      if (result.data)
+        commit(`logs/${LOGS_RESULTS}`, result.data, { root: true });
+    },
+  },
+};
+
+export default logs;
diff --git a/client/src/store/store.constants.js b/client/src/store/store.constants.js
new file mode 100644
index 0000000..e08c28a
--- /dev/null
+++ b/client/src/store/store.constants.js
@@ -0,0 +1,14 @@
+const ACTION_TYPES = {
+  MAKE_API_CALL: "MAKE_API_CALL",
+  LOGS_FETCH_RECENT: "LOGS_FETCH_RECENT",
+};
+
+//actions
+const MUTATION_TYPES = {
+  ADD_API_CALL: "ADD_API_CALL",
+  REMOVE_API_CALL: "REMOVE_API_CALL",
+  LOGS_RESULTS: "LOGS_RESULTS",
+  LOGS_LOADING: "LOGS_LOADING",
+};
+
+module.exports = { ...ACTION_TYPES, ...MUTATION_TYPES };
diff --git a/client/src/util/axios.js b/client/src/util/axios.js
new file mode 100644
index 0000000..589bb2d
--- /dev/null
+++ b/client/src/util/axios.js
@@ -0,0 +1,10 @@
+import axios from "axios";
+
+const config = {
+  baseURL: "/v1/",
+  timeout: 30000,
+};
+
+const axiosClient = axios.create({ ...config });
+
+export { axiosClient };
diff --git a/package-lock.json b/package-lock.json
index 9c4375d..820c913 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -52,6 +52,16 @@
         "negotiator": "0.6.2"
       }
     },
+    "acorn": {
+      "version": "8.7.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.0.tgz",
+      "integrity": "sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ=="
+    },
+    "acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ=="
+    },
     "after": {
       "version": "0.8.2",
       "resolved": "https://registry.npmjs.org/after/-/after-0.8.2.tgz",
@@ -761,6 +771,87 @@
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
       "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
     },
+    "eslint-plugin-vue": {
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-8.4.0.tgz",
+      "integrity": "sha512-Ga96QRG8GA9AyzKtEDxqYRCMt/VJM4SLkcNmm4FvUiFBE4jpaBr25unRBi9iVmHLYhA9EZ/4I+jD8n1vfWzyAA==",
+      "requires": {
+        "eslint-utils": "^3.0.0",
+        "natural-compare": "^1.4.0",
+        "semver": "^7.3.5",
+        "vue-eslint-parser": "^8.0.1"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "7.3.5",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
+          "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        }
+      }
+    },
+    "eslint-scope": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.0.tgz",
+      "integrity": "sha512-aWwkhnS0qAXqNOgKOK0dJ2nvzEbhEvpy8OlJ9kZ0FeZnA6zpjv1/Vei+puGFFX7zkPCkHHXb7IDX3A+7yPrRWg==",
+      "requires": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      }
+    },
+    "eslint-utils": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-3.0.0.tgz",
+      "integrity": "sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==",
+      "requires": {
+        "eslint-visitor-keys": "^2.0.0"
+      }
+    },
+    "eslint-visitor-keys": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
+      "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw=="
+    },
+    "espree": {
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-9.3.0.tgz",
+      "integrity": "sha512-d/5nCsb0JcqsSEeQzFZ8DH1RmxPcglRWh24EFTlUEmCKoehXGdpsx0RkHDubqUI8LSAIKMQp4r9SzQ3n+sm4HQ==",
+      "requires": {
+        "acorn": "^8.7.0",
+        "acorn-jsx": "^5.3.1",
+        "eslint-visitor-keys": "^3.1.0"
+      },
+      "dependencies": {
+        "eslint-visitor-keys": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.2.0.tgz",
+          "integrity": "sha512-IOzT0X126zn7ALX0dwFiUQEdsfzrm4+ISsQS8nukaJXwEyYKRSnEIIDULYg1mCtGp7UUXgfGl7BIolXREQK+XQ=="
+        }
+      }
+    },
+    "esquery": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.4.0.tgz",
+      "integrity": "sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==",
+      "requires": {
+        "estraverse": "^5.1.0"
+      }
+    },
+    "esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "requires": {
+        "estraverse": "^5.2.0"
+      }
+    },
+    "estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA=="
+    },
     "etag": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
@@ -1256,6 +1347,11 @@
       "resolved": "https://registry.npmjs.org/kuler/-/kuler-2.0.0.tgz",
       "integrity": "sha512-Xq9nH7KlWZmXAtodXDDRE7vs6DU1gTU8zYDHDiWLSip45Egwq3plLHzPn27NgvzL2r1LMPC1vdqh98sQxtqj4A=="
     },
+    "lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
     "logform": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/logform/-/logform-2.3.2.tgz",
@@ -1278,6 +1374,21 @@
       "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.1.tgz",
       "integrity": "sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA=="
     },
+    "lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "requires": {
+        "yallist": "^4.0.0"
+      },
+      "dependencies": {
+        "yallist": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+        }
+      }
+    },
     "luxon": {
       "version": "1.28.0",
       "resolved": "https://registry.npmjs.org/luxon/-/luxon-1.28.0.tgz",
@@ -1509,6 +1620,11 @@
       "resolved": "https://registry.npmjs.org/nan/-/nan-2.15.0.tgz",
       "integrity": "sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ=="
     },
+    "natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc="
+    },
     "needle": {
       "version": "2.9.1",
       "resolved": "https://registry.npmjs.org/needle/-/needle-2.9.1.tgz",
@@ -2408,6 +2524,48 @@
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
       "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="
     },
+    "vue-eslint-parser": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-8.2.0.tgz",
+      "integrity": "sha512-hvl8OVT8imlKk/lQyhkshqwQQChzHETcBd5abiO4ePw7ib7QUZLfW+2TUrJHKUvFOCFRJrDin5KJO9OHzB5bRQ==",
+      "requires": {
+        "debug": "^4.3.2",
+        "eslint-scope": "^7.0.0",
+        "eslint-visitor-keys": "^3.1.0",
+        "espree": "^9.0.0",
+        "esquery": "^1.4.0",
+        "lodash": "^4.17.21",
+        "semver": "^7.3.5"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "4.3.3",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",
+          "integrity": "sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==",
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
+        "eslint-visitor-keys": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.2.0.tgz",
+          "integrity": "sha512-IOzT0X126zn7ALX0dwFiUQEdsfzrm4+ISsQS8nukaJXwEyYKRSnEIIDULYg1mCtGp7UUXgfGl7BIolXREQK+XQ=="
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+        },
+        "semver": {
+          "version": "7.3.5",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
+          "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        }
+      }
+    },
     "webidl-conversions": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
diff --git a/server/controllers/v1/logs/logsController.js b/server/controllers/v1/logs/logsController.js
index d9626e1..e822cfb 100644
--- a/server/controllers/v1/logs/logsController.js
+++ b/server/controllers/v1/logs/logsController.js
@@ -9,7 +9,7 @@ async function home(req, res, next) {
       await SpeedTestLogs.getLatestResults(),
     ]);
     
-    res.send({stats: results[0], results: results[1]});
+    res.send({stats: results[0][0], results: results[1]});
     //
   } catch (e) {
     //correctly json handle this error message

From c9e6594c23832a0c62ab7554c80cb371bbfd9144 Mon Sep 17 00:00:00 2001
From: Brian Ridsdalea <dynamikarray@gmail.com>
Date: Fri, 28 Jan 2022 19:55:03 -0500
Subject: [PATCH 4/7] Added basic datatable for viewing past results run from
 scheduled job.

---
 client/package-lock.json                      |  5 ++
 client/package.json                           |  1 +
 client/src/App.vue                            |  1 -
 .../Datatable/SpeedTestDataTable.vue          | 61 +++++++++++++++++++
 .../components/Speedtest/Datatable/headers.js | 48 +++++++++++++++
 .../Speedtest/SpeedtestPastResults.vue        | 14 +++--
 .../components/Speedtest/SpeedtestWrapper.vue |  8 +--
 client/src/main.js                            |  6 ++
 client/src/views/Home.vue                     |  4 +-
 config/config.js                              |  4 +-
 10 files changed, 138 insertions(+), 14 deletions(-)
 create mode 100644 client/src/components/Speedtest/Datatable/SpeedTestDataTable.vue
 create mode 100644 client/src/components/Speedtest/Datatable/headers.js

diff --git a/client/package-lock.json b/client/package-lock.json
index c1fbb81..5374e42 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -4179,6 +4179,11 @@
         "assert-plus": "^1.0.0"
       }
     },
+    "date-fns": {
+      "version": "2.28.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.28.0.tgz",
+      "integrity": "sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw=="
+    },
     "de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
diff --git a/client/package.json b/client/package.json
index 2c2caad..88659ea 100644
--- a/client/package.json
+++ b/client/package.json
@@ -11,6 +11,7 @@
     "@fortawesome/fontawesome-free": "5.15.3",
     "axios": "^0.25.0",
     "core-js": "^3.6.5",
+    "date-fns": "^2.28.0",
     "roboto-fontface": "*",
     "socket.io-client": "2.3.1",
     "vue": "^2.6.11",
diff --git a/client/src/App.vue b/client/src/App.vue
index beabb6b..4ff58d9 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -20,7 +20,6 @@ export default {
     //
   }),
   mounted() {
-    console.log(this.$store);
     this.$store.dispatch(`logs/${LOGS_FETCH_RECENT}`, null, { root: true });
   },
 };
diff --git a/client/src/components/Speedtest/Datatable/SpeedTestDataTable.vue b/client/src/components/Speedtest/Datatable/SpeedTestDataTable.vue
new file mode 100644
index 0000000..3f7c006
--- /dev/null
+++ b/client/src/components/Speedtest/Datatable/SpeedTestDataTable.vue
@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <v-data-table ref="dtSpeedTestResults" :items="items" :headers="headers">
+      <template v-slot:item.timestamp="{ item }">
+        {{ item.timestamp | formatDateTime }}
+      </template>
+
+      <template v-slot:item.download="{ item }">
+        <div class="text-h5">
+          {{ item.download.bandwidth | convertToMegabits }}
+          <span class="text-subtitle-2">Mbps</span>
+        </div>
+      </template>
+
+      <template v-slot:item.upload="{ item }">
+        <div class="text-h5">
+          {{ item.upload.bandwidth | convertToMegabits }}
+          <span class="text-subtitle-2">Mbps</span>
+        </div>
+      </template>
+
+      <template v-slot:item.interface.internalIp="{ item }">
+        {{ item.interface.internalIp }}
+      </template>
+
+      <template v-slot:item.interface.macAddr="{ item }">
+        {{ item.interface.macAddr }}
+      </template>
+
+      <template v-slot:item.server="{ item }">
+        <div class="d-flex flex-column align-start justify-start">
+          <div class="d-flex">
+            {{ item.server.name }}
+          </div>
+          <div class="d-flex">
+            {{ item.server.location }}
+          </div>
+        </div>
+      </template>
+    </v-data-table>
+  </div>
+</template>
+
+<script>
+import { headers } from "./headers.js";
+
+export default {
+  name: "SpeedTestDataTable",
+  components: {},
+  data: () => ({
+    headers,
+  }),
+  props: {
+    items: {
+      type: [Boolean, Array],
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/client/src/components/Speedtest/Datatable/headers.js b/client/src/components/Speedtest/Datatable/headers.js
new file mode 100644
index 0000000..881f773
--- /dev/null
+++ b/client/src/components/Speedtest/Datatable/headers.js
@@ -0,0 +1,48 @@
+export const headers = [
+  {
+    text: "Time",
+    value: "timestamp",
+    sortable: true,
+    align: "center",
+    width: "130px",
+  },
+  {
+    text: "Download",
+    value: "download",
+    sortable: true,
+    align: "center",
+    width: "180px",
+  },
+  {
+    text: "Upload",
+    value: "upload",
+    sortable: true,
+    align: "center",
+    width: "180px",
+  },
+  {
+    text: "ISP",
+    value: "isp",
+    sortable: true,
+    align: "center",
+    width: "100px",
+  },
+  {
+    text: "Internal IP",
+    value: "interface.internalIp",
+    sortable: true,
+    align: "center",
+  },
+  {
+    text: "Mac",
+    value: "interface.macAddr",
+    sortable: true,
+    align: "center",
+  },
+  {
+    text: "Server",
+    value: "server",
+    sortable: true,
+    align: "center",
+  },
+];
diff --git a/client/src/components/Speedtest/SpeedtestPastResults.vue b/client/src/components/Speedtest/SpeedtestPastResults.vue
index 643b81e..4cc01e4 100644
--- a/client/src/components/Speedtest/SpeedtestPastResults.vue
+++ b/client/src/components/Speedtest/SpeedtestPastResults.vue
@@ -1,16 +1,20 @@
 <template>
-  <div>
-    <div class="text-h4">Past Results</div>
-    <div class="text-body">
-      {{ stats.avgDownload | convertToMegabits }}
-    </div>
+  <div class="SpeedTestPastResults">
+    <div class="text-h4 mb-1">Past Results</div>
+    <SpeedTestDataTable :items="results" />
   </div>
 </template>
 
 <script>
 import { mapGetters } from "vuex";
+
+import SpeedTestDataTable from "./Datatable/SpeedTestDataTable";
+
 export default {
   name: "SpeedtestPastResults",
+  components: {
+    SpeedTestDataTable,
+  },
   computed: {
     ...mapGetters({
       stats: "logs/getStats",
diff --git a/client/src/components/Speedtest/SpeedtestWrapper.vue b/client/src/components/Speedtest/SpeedtestWrapper.vue
index 585f46d..fcc2f0c 100644
--- a/client/src/components/Speedtest/SpeedtestWrapper.vue
+++ b/client/src/components/Speedtest/SpeedtestWrapper.vue
@@ -1,9 +1,9 @@
 <template>
-  <v-container class="speedtestWrapper">
-    <v-row>
+  <v-container fluid class="speedtestWrapper pa-0">
+    <v-row dense>
       <v-col>
-        <div class="d-flex flex-column align-center">
-          <div class="my-3 text-h3">Test Our Internet Speed</div>
+        <div class="d-flex flex-column align-start">
+          <div class="text-h5">Run Speed Test</div>
 
           <div v-if="isRunning && speedTestEventData">
             <SpeedtestProgressCard
diff --git a/client/src/main.js b/client/src/main.js
index 9c06b80..2ba0c26 100644
--- a/client/src/main.js
+++ b/client/src/main.js
@@ -6,6 +6,8 @@ import vuetify from "./plugins/vuetify";
 
 import("./plugins/vueSocketIo");
 
+import { format } from "date-fns";
+
 import "roboto-fontface/css/roboto/roboto-fontface.css";
 import "@fortawesome/fontawesome-free/css/all.css";
 
@@ -15,6 +17,10 @@ Vue.filter("convertToMegabits", (bytes) => {
   return formatted;
 });
 
+Vue.filter("formatDateTime", (timestamp) => {
+  return format(new Date(timestamp), "MMM dd, yyyy  hh:mm a");
+});
+
 Vue.config.productionTip = false;
 
 new Vue({
diff --git a/client/src/views/Home.vue b/client/src/views/Home.vue
index ab4e64f..d1eba0d 100644
--- a/client/src/views/Home.vue
+++ b/client/src/views/Home.vue
@@ -1,6 +1,6 @@
 <template>
-  <v-container>
-    <v-row class="text-center">
+  <v-container fluid class="px-3">
+    <v-row class="text-center" dense>
       <v-col cols="12">
         <SpeedtestWrapper />
       </v-col>
diff --git a/config/config.js b/config/config.js
index 893c137..f3810ae 100644
--- a/config/config.js
+++ b/config/config.js
@@ -4,8 +4,8 @@
 let config = {
   DB_NAME: "speedtester",
   DB_URL: "localhost",
-  SPEEDTEST_INTERVAL: "*/1 * * * *",
-  RUN_SCHEDULED_JOB: false,
+  SPEEDTEST_INTERVAL: "*/30 * * * *",
+  RUN_SCHEDULED_JOB: true,
 };
 
 //Production Overrides

From 9cf203c405ea22af926fe52abcbeca976bf45c2d Mon Sep 17 00:00:00 2001
From: Brian Ridsdalea <dynamikarray@gmail.com>
Date: Fri, 28 Jan 2022 19:55:03 -0500
Subject: [PATCH 5/7] Added basic datatable for viewing past results run from
 scheduled job.

Updated UI, added better results and test and history

Save Results after they are ran, return latest on completition

Updated Cron Job
---
 client/package-lock.json                      | 306 +++++++++++++++++-
 client/package.json                           |   2 +
 client/src/App.vue                            |   1 -
 .../Datatable/SpeedTestDataTable.vue          |  61 ++++
 .../components/Speedtest/Datatable/headers.js |  50 +++
 .../Speedtest/SpeedtestPastResults.vue        |  14 +-
 .../Speedtest/SpeedtestProgressCard.vue       |  58 +++-
 .../Speedtest/SpeedtestResultsCard.vue        |  20 +-
 .../components/Speedtest/SpeedtestWrapper.vue |  59 ++--
 client/src/main.js                            |   6 +
 client/src/scss/variables.scss                |  10 +
 client/src/store/index.js                     |   6 +
 client/src/views/Home.vue                     |   4 +-
 client/vue.config.js                          |   2 +
 config/config.js                              |   6 +-
 docker-compose.yml                            |   2 +-
 server/routes/socket/liveTest/liveTest.js     |  22 +-
 server/services/speedtestService.js           |   1 -
 18 files changed, 559 insertions(+), 71 deletions(-)
 create mode 100644 client/src/components/Speedtest/Datatable/SpeedTestDataTable.vue
 create mode 100644 client/src/components/Speedtest/Datatable/headers.js
 create mode 100644 client/src/scss/variables.scss

diff --git a/client/package-lock.json b/client/package-lock.json
index c1fbb81..40872c5 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -1084,7 +1084,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.7.tgz",
       "integrity": "sha512-9E9FJowqAsytyOY6LG+1KuueckRL+aQW+mKvXRXnuFGyRAyepJPmEo9vgMfXUA6O9u3IeEdv9MAkppFcaQwogQ==",
-      "dev": true,
       "requires": {
         "regenerator-runtime": "^0.13.4"
       }
@@ -3485,8 +3484,7 @@
     "commander": {
       "version": "2.20.3",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-      "dev": true
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
     },
     "commondir": {
       "version": "1.0.1",
@@ -4170,6 +4168,270 @@
       "integrity": "sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=",
       "dev": true
     },
+    "d3": {
+      "version": "5.16.0",
+      "resolved": "https://registry.npmjs.org/d3/-/d3-5.16.0.tgz",
+      "integrity": "sha512-4PL5hHaHwX4m7Zr1UapXW23apo6pexCgdetdJ5kTmADpG/7T9Gkxw0M0tf/pjoB63ezCCm0u5UaFYy2aMt0Mcw==",
+      "requires": {
+        "d3-array": "1",
+        "d3-axis": "1",
+        "d3-brush": "1",
+        "d3-chord": "1",
+        "d3-collection": "1",
+        "d3-color": "1",
+        "d3-contour": "1",
+        "d3-dispatch": "1",
+        "d3-drag": "1",
+        "d3-dsv": "1",
+        "d3-ease": "1",
+        "d3-fetch": "1",
+        "d3-force": "1",
+        "d3-format": "1",
+        "d3-geo": "1",
+        "d3-hierarchy": "1",
+        "d3-interpolate": "1",
+        "d3-path": "1",
+        "d3-polygon": "1",
+        "d3-quadtree": "1",
+        "d3-random": "1",
+        "d3-scale": "2",
+        "d3-scale-chromatic": "1",
+        "d3-selection": "1",
+        "d3-shape": "1",
+        "d3-time": "1",
+        "d3-time-format": "2",
+        "d3-timer": "1",
+        "d3-transition": "1",
+        "d3-voronoi": "1",
+        "d3-zoom": "1"
+      }
+    },
+    "d3-array": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.2.4.tgz",
+      "integrity": "sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw=="
+    },
+    "d3-axis": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-1.0.12.tgz",
+      "integrity": "sha512-ejINPfPSNdGFKEOAtnBtdkpr24c4d4jsei6Lg98mxf424ivoDP2956/5HDpIAtmHo85lqT4pruy+zEgvRUBqaQ=="
+    },
+    "d3-brush": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-1.1.6.tgz",
+      "integrity": "sha512-7RW+w7HfMCPyZLifTz/UnJmI5kdkXtpCbombUSs8xniAyo0vIbrDzDwUJB6eJOgl9u5DQOt2TQlYumxzD1SvYA==",
+      "requires": {
+        "d3-dispatch": "1",
+        "d3-drag": "1",
+        "d3-interpolate": "1",
+        "d3-selection": "1",
+        "d3-transition": "1"
+      }
+    },
+    "d3-chord": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-1.0.6.tgz",
+      "integrity": "sha512-JXA2Dro1Fxw9rJe33Uv+Ckr5IrAa74TlfDEhE/jfLOaXegMQFQTAgAw9WnZL8+HxVBRXaRGCkrNU7pJeylRIuA==",
+      "requires": {
+        "d3-array": "1",
+        "d3-path": "1"
+      }
+    },
+    "d3-collection": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/d3-collection/-/d3-collection-1.0.7.tgz",
+      "integrity": "sha512-ii0/r5f4sjKNTfh84Di+DpztYwqKhEyUlKoPrzUFfeSkWxjW49xU2QzO9qrPrNkpdI0XJkfzvmTu8V2Zylln6A=="
+    },
+    "d3-color": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.4.1.tgz",
+      "integrity": "sha512-p2sTHSLCJI2QKunbGb7ocOh7DgTAn8IrLx21QRc/BSnodXM4sv6aLQlnfpvehFMLZEfBc6g9pH9SWQccFYfJ9Q=="
+    },
+    "d3-contour": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-1.3.2.tgz",
+      "integrity": "sha512-hoPp4K/rJCu0ladiH6zmJUEz6+u3lgR+GSm/QdM2BBvDraU39Vr7YdDCicJcxP1z8i9B/2dJLgDC1NcvlF8WCg==",
+      "requires": {
+        "d3-array": "^1.1.1"
+      }
+    },
+    "d3-dispatch": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.6.tgz",
+      "integrity": "sha512-fVjoElzjhCEy+Hbn8KygnmMS7Or0a9sI2UzGwoB7cCtvI1XpVN9GpoYlnb3xt2YV66oXYb1fLJ8GMvP4hdU1RA=="
+    },
+    "d3-drag": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-1.2.5.tgz",
+      "integrity": "sha512-rD1ohlkKQwMZYkQlYVCrSFxsWPzI97+W+PaEIBNTMxRuxz9RF0Hi5nJWHGVJ3Om9d2fRTe1yOBINJyy/ahV95w==",
+      "requires": {
+        "d3-dispatch": "1",
+        "d3-selection": "1"
+      }
+    },
+    "d3-dsv": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-1.2.0.tgz",
+      "integrity": "sha512-9yVlqvZcSOMhCYzniHE7EVUws7Fa1zgw+/EAV2BxJoG3ME19V6BQFBwI855XQDsxyOuG7NibqRMTtiF/Qup46g==",
+      "requires": {
+        "commander": "2",
+        "iconv-lite": "0.4",
+        "rw": "1"
+      }
+    },
+    "d3-ease": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-1.0.7.tgz",
+      "integrity": "sha512-lx14ZPYkhNx0s/2HX5sLFUI3mbasHjSSpwO/KaaNACweVwxUruKyWVcb293wMv1RqTPZyZ8kSZ2NogUZNcLOFQ=="
+    },
+    "d3-fetch": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-1.2.0.tgz",
+      "integrity": "sha512-yC78NBVcd2zFAyR/HnUiBS7Lf6inSCoWcSxFfw8FYL7ydiqe80SazNwoffcqOfs95XaLo7yebsmQqDKSsXUtvA==",
+      "requires": {
+        "d3-dsv": "1"
+      }
+    },
+    "d3-force": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-1.2.1.tgz",
+      "integrity": "sha512-HHvehyaiUlVo5CxBJ0yF/xny4xoaxFxDnBXNvNcfW9adORGZfyNF1dj6DGLKyk4Yh3brP/1h3rnDzdIAwL08zg==",
+      "requires": {
+        "d3-collection": "1",
+        "d3-dispatch": "1",
+        "d3-quadtree": "1",
+        "d3-timer": "1"
+      }
+    },
+    "d3-format": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.4.5.tgz",
+      "integrity": "sha512-J0piedu6Z8iB6TbIGfZgDzfXxUFN3qQRMofy2oPdXzQibYGqPB/9iMcxr/TGalU+2RsyDO+U4f33id8tbnSRMQ=="
+    },
+    "d3-geo": {
+      "version": "1.12.1",
+      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-1.12.1.tgz",
+      "integrity": "sha512-XG4d1c/UJSEX9NfU02KwBL6BYPj8YKHxgBEw5om2ZnTRSbIcego6dhHwcxuSR3clxh0EpE38os1DVPOmnYtTPg==",
+      "requires": {
+        "d3-array": "1"
+      }
+    },
+    "d3-hierarchy": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-1.1.9.tgz",
+      "integrity": "sha512-j8tPxlqh1srJHAtxfvOUwKNYJkQuBFdM1+JAUfq6xqH5eAqf93L7oG1NVqDa4CpFZNvnNKtCYEUC8KY9yEn9lQ=="
+    },
+    "d3-interpolate": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.4.0.tgz",
+      "integrity": "sha512-V9znK0zc3jOPV4VD2zZn0sDhZU3WAE2bmlxdIwwQPPzPjvyLkd8B3JUVdS1IDUFDkWZ72c9qnv1GK2ZagTZ8EA==",
+      "requires": {
+        "d3-color": "1"
+      }
+    },
+    "d3-path": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
+      "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg=="
+    },
+    "d3-polygon": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-1.0.6.tgz",
+      "integrity": "sha512-k+RF7WvI08PC8reEoXa/w2nSg5AUMTi+peBD9cmFc+0ixHfbs4QmxxkarVal1IkVkgxVuk9JSHhJURHiyHKAuQ=="
+    },
+    "d3-quadtree": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-1.0.7.tgz",
+      "integrity": "sha512-RKPAeXnkC59IDGD0Wu5mANy0Q2V28L+fNe65pOCXVdVuTJS3WPKaJlFHer32Rbh9gIo9qMuJXio8ra4+YmIymA=="
+    },
+    "d3-random": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-1.1.2.tgz",
+      "integrity": "sha512-6AK5BNpIFqP+cx/sreKzNjWbwZQCSUatxq+pPRmFIQaWuoD+NrbVWw7YWpHiXpCQ/NanKdtGDuB+VQcZDaEmYQ=="
+    },
+    "d3-scale": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-2.2.2.tgz",
+      "integrity": "sha512-LbeEvGgIb8UMcAa0EATLNX0lelKWGYDQiPdHj+gLblGVhGLyNbaCn3EvrJf0A3Y/uOOU5aD6MTh5ZFCdEwGiCw==",
+      "requires": {
+        "d3-array": "^1.2.0",
+        "d3-collection": "1",
+        "d3-format": "1",
+        "d3-interpolate": "1",
+        "d3-time": "1",
+        "d3-time-format": "2"
+      }
+    },
+    "d3-scale-chromatic": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-1.5.0.tgz",
+      "integrity": "sha512-ACcL46DYImpRFMBcpk9HhtIyC7bTBR4fNOPxwVSl0LfulDAwyiHyPOTqcDG1+t5d4P9W7t/2NAuWu59aKko/cg==",
+      "requires": {
+        "d3-color": "1",
+        "d3-interpolate": "1"
+      }
+    },
+    "d3-selection": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.4.2.tgz",
+      "integrity": "sha512-SJ0BqYihzOjDnnlfyeHT0e30k0K1+5sR3d5fNueCNeuhZTnGw4M4o8mqJchSwgKMXCNFo+e2VTChiSJ0vYtXkg=="
+    },
+    "d3-shape": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
+      "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
+      "requires": {
+        "d3-path": "1"
+      }
+    },
+    "d3-time": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-1.1.0.tgz",
+      "integrity": "sha512-Xh0isrZ5rPYYdqhAVk8VLnMEidhz5aP7htAADH6MfzgmmicPkTo8LhkLxci61/lCB7n7UmE3bN0leRt+qvkLxA=="
+    },
+    "d3-time-format": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-2.3.0.tgz",
+      "integrity": "sha512-guv6b2H37s2Uq/GefleCDtbe0XZAuy7Wa49VGkPVPMfLL9qObgBST3lEHJBMUp8S7NdLQAGIvr2KXk8Hc98iKQ==",
+      "requires": {
+        "d3-time": "1"
+      }
+    },
+    "d3-timer": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-1.0.10.tgz",
+      "integrity": "sha512-B1JDm0XDaQC+uvo4DT79H0XmBskgS3l6Ve+1SBCfxgmtIb1AVrPIoqd+nPSv+loMX8szQ0sVUhGngL7D5QPiXw=="
+    },
+    "d3-transition": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-1.3.2.tgz",
+      "integrity": "sha512-sc0gRU4PFqZ47lPVHloMn9tlPcv8jxgOQg+0zjhfZXMQuvppjG6YuwdMBE0TuqCZjeJkLecku/l9R0JPcRhaDA==",
+      "requires": {
+        "d3-color": "1",
+        "d3-dispatch": "1",
+        "d3-ease": "1",
+        "d3-interpolate": "1",
+        "d3-selection": "^1.1.0",
+        "d3-timer": "1"
+      }
+    },
+    "d3-voronoi": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/d3-voronoi/-/d3-voronoi-1.1.4.tgz",
+      "integrity": "sha512-dArJ32hchFsrQ8uMiTBLq256MpnZjeuBtdHpaDlYuQyjU0CVzCJl/BVW+SkszaAeH95D/8gxqAhgx0ouAWAfRg=="
+    },
+    "d3-zoom": {
+      "version": "1.8.3",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-1.8.3.tgz",
+      "integrity": "sha512-VoLXTK4wvy1a0JpH2Il+F2CiOhVu7VRXWF5M/LroMIh3/zBAC3WAt7QoIvPibOavVo20hN6/37vwAsdBejLyKQ==",
+      "requires": {
+        "d3-dispatch": "1",
+        "d3-drag": "1",
+        "d3-interpolate": "1",
+        "d3-selection": "1",
+        "d3-transition": "1"
+      }
+    },
     "dashdash": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
@@ -4179,6 +4441,11 @@
         "assert-plus": "^1.0.0"
       }
     },
+    "date-fns": {
+      "version": "2.28.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.28.0.tgz",
+      "integrity": "sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw=="
+    },
     "de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
@@ -6368,7 +6635,6 @@
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
       "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
-      "dev": true,
       "requires": {
         "safer-buffer": ">= 2.1.2 < 3"
       }
@@ -7331,6 +7597,11 @@
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "dev": true
     },
+    "lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
     "lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -7450,6 +7721,11 @@
       "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=",
       "dev": true
     },
+    "memoize-one": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
+      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
+    },
     "memory-fs": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
@@ -9394,8 +9670,7 @@
     "regenerator-runtime": {
       "version": "0.13.9",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
-      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==",
-      "dev": true
+      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
     },
     "regenerator-transform": {
       "version": "0.14.5",
@@ -9730,6 +10005,11 @@
         "aproba": "^1.1.1"
       }
     },
+    "rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha1-P4Yt+pGrdmsUiF700BEkv9oHT7Q="
+    },
     "rxjs": {
       "version": "6.6.7",
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz",
@@ -9757,8 +10037,7 @@
     "safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "dev": true
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "sass": {
       "version": "1.32.13",
@@ -11638,6 +11917,17 @@
         "@types/socket.io-client": "1.4.36"
       }
     },
+    "vue-speedometer": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/vue-speedometer/-/vue-speedometer-1.8.0.tgz",
+      "integrity": "sha512-8qDdevrG900XmGD3MGiLlnUFdqFlOP+TxBsL8gHqv8tNjTf/6XAY4O0+MdvZ8ZEGaRYPsSk9jZYuSwOndtbCBQ==",
+      "requires": {
+        "@babel/runtime": "^7.11.2",
+        "d3": "^5.9.2",
+        "lodash-es": "^4.17.15",
+        "memoize-one": "^5.0.5"
+      }
+    },
     "vue-style-loader": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
diff --git a/client/package.json b/client/package.json
index 2c2caad..e5171d9 100644
--- a/client/package.json
+++ b/client/package.json
@@ -11,12 +11,14 @@
     "@fortawesome/fontawesome-free": "5.15.3",
     "axios": "^0.25.0",
     "core-js": "^3.6.5",
+    "date-fns": "^2.28.0",
     "roboto-fontface": "*",
     "socket.io-client": "2.3.1",
     "vue": "^2.6.11",
     "vue-canvas-gauges": "0.0.0",
     "vue-router": "^3.2.0",
     "vue-socket.io-extended": "^4.1.0",
+    "vue-speedometer": "^1.8.0",
     "vuetify": "^2.4.0",
     "vuex": "^3.4.0"
   },
diff --git a/client/src/App.vue b/client/src/App.vue
index beabb6b..4ff58d9 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -20,7 +20,6 @@ export default {
     //
   }),
   mounted() {
-    console.log(this.$store);
     this.$store.dispatch(`logs/${LOGS_FETCH_RECENT}`, null, { root: true });
   },
 };
diff --git a/client/src/components/Speedtest/Datatable/SpeedTestDataTable.vue b/client/src/components/Speedtest/Datatable/SpeedTestDataTable.vue
new file mode 100644
index 0000000..857811c
--- /dev/null
+++ b/client/src/components/Speedtest/Datatable/SpeedTestDataTable.vue
@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <v-data-table ref="dtSpeedTestResults" :items="items" :headers="headers">
+      <template v-slot:item.timestamp="{ item }">
+        <div class="text-caption">{{ item.timestamp | formatDateTime }}</div>
+      </template>
+
+      <template v-slot:item.download="{ item }">
+        <div class="text-h5">
+          {{ item.download.bandwidth | convertToMegabits }}
+          <span class="text-subtitle-2">Mbps</span>
+        </div>
+      </template>
+
+      <template v-slot:item.upload="{ item }">
+        <div class="text-h5">
+          {{ item.upload.bandwidth | convertToMegabits }}
+          <span class="text-subtitle-2">Mbps</span>
+        </div>
+      </template>
+
+      <template v-slot:item.interface.internalIp="{ item }">
+        <div class="text-caption">{{ item.interface.internalIp }}</div>
+      </template>
+
+      <template v-slot:item.interface.macAddr="{ item }">
+        <div class="text-caption">{{ item.interface.macAddr }}</div>
+      </template>
+
+      <template v-slot:item.server="{ item }">
+        <div class="d-flex flex-column align-start justify-start">
+          <div class="d-flex">
+            {{ item.server.name }}
+          </div>
+          <div class="d-flex">
+            {{ item.server.location }}
+          </div>
+        </div>
+      </template>
+    </v-data-table>
+  </div>
+</template>
+
+<script>
+import { headers } from "./headers.js";
+
+export default {
+  name: "SpeedTestDataTable",
+  components: {},
+  data: () => ({
+    headers,
+  }),
+  props: {
+    items: {
+      type: [Boolean, Array],
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/client/src/components/Speedtest/Datatable/headers.js b/client/src/components/Speedtest/Datatable/headers.js
new file mode 100644
index 0000000..916c41f
--- /dev/null
+++ b/client/src/components/Speedtest/Datatable/headers.js
@@ -0,0 +1,50 @@
+export const headers = [
+  {
+    text: "Time",
+    value: "timestamp",
+    sortable: true,
+    align: "center",
+    width: "130px",
+  },
+  {
+    text: "Download",
+    value: "download",
+    sortable: true,
+    align: "center",
+    width: "180px",
+  },
+  {
+    text: "Upload",
+    value: "upload",
+    sortable: true,
+    align: "center",
+    width: "180px",
+  },
+  /*
+  {
+    text: "ISP",
+    value: "isp",
+    sortable: true,
+    align: "center",
+    width: "100px",
+  },
+  */
+  {
+    text: "Internal IP",
+    value: "interface.internalIp",
+    sortable: true,
+    align: "center",
+  },
+  {
+    text: "Mac",
+    value: "interface.macAddr",
+    sortable: true,
+    align: "center",
+  },
+  {
+    text: "Server",
+    value: "server",
+    sortable: true,
+    align: "center",
+  },
+];
diff --git a/client/src/components/Speedtest/SpeedtestPastResults.vue b/client/src/components/Speedtest/SpeedtestPastResults.vue
index 643b81e..e137d63 100644
--- a/client/src/components/Speedtest/SpeedtestPastResults.vue
+++ b/client/src/components/Speedtest/SpeedtestPastResults.vue
@@ -1,16 +1,20 @@
 <template>
-  <div>
-    <div class="text-h4">Past Results</div>
-    <div class="text-body">
-      {{ stats.avgDownload | convertToMegabits }}
-    </div>
+  <div class="SpeedTestPastResults">
+    <div class="text-h4 mb-1 text-left">Past Results</div>
+    <SpeedTestDataTable :items="results" />
   </div>
 </template>
 
 <script>
 import { mapGetters } from "vuex";
+
+import SpeedTestDataTable from "./Datatable/SpeedTestDataTable";
+
 export default {
   name: "SpeedtestPastResults",
+  components: {
+    SpeedTestDataTable,
+  },
   computed: {
     ...mapGetters({
       stats: "logs/getStats",
diff --git a/client/src/components/Speedtest/SpeedtestProgressCard.vue b/client/src/components/Speedtest/SpeedtestProgressCard.vue
index fe99275..0fc3424 100644
--- a/client/src/components/Speedtest/SpeedtestProgressCard.vue
+++ b/client/src/components/Speedtest/SpeedtestProgressCard.vue
@@ -1,11 +1,28 @@
 <template>
-  <div class="d-flex align-center justify-center">
-    <v-card color="secondary darken-4 pa-5" rounded="10">
+  <div class="speedTestProgressCard align-center justify-center">
+    <v-card color="secondary darken-4 pa-1" rounded="10">
       <h1 class="text-h3">{{ progressTypeLabel }}</h1>
-      <h1 class="text-h1">
+
+      <div class="">
+        <VueSpeedometer
+          :value="progressSpeedValueForNeedle"
+          :minValue="0"
+          :maxValue="1000"
+          :width="300"
+          :height="170"
+          needleColor="#EEE"
+          textColor="#EEE"
+          :needleHeightRatio="0.7"
+          :ringWidth="30"
+          valueTextFontSize="0px"
+          labelFontSize="14px"
+        />
+      </div>
+
+      <div class="text-h3 pt-0 mt-0">
         {{ progressSpeedValue | convertToMegabits
-        }}<span class="text-h3 mx-4">Mbps</span>
-      </h1>
+        }}<span class="text-h5 mx-4">Mbps</span>
+      </div>
 
       <div>
         <h5 class="mx-3">Time Remaining:</h5>
@@ -23,15 +40,27 @@
 </template>
 
 <script>
+import VueSpeedometer from "vue-speedometer";
 export default {
   name: "SpeedtestProgressCard",
+  components: {
+    VueSpeedometer,
+  },
   props: {
     progressEvent: {
       type: [Object, Boolean],
     },
   },
-  components: {},
+  data: () => ({}),
   computed: {
+    isUpload() {
+      if (this.progressEvent.type == "upload") return true;
+      return false;
+    },
+    isDownload() {
+      if (this.progressEvent.type == "download") return true;
+      return false;
+    },
     progressTimeStamp() {
       return this.progressEvent.timestamp;
     },
@@ -42,16 +71,19 @@ export default {
       return this.progressEvent.progress * 100;
     },
     progressSpeedValue() {
-      if (this.progressEvent.type == "upload") {
-        return this.progressEvent.upload.bandwidth;
-      }
-      if (this.progressEvent.type == "download") {
-        return this.progressEvent.download.bandwidth;
-      }
+      if (this.isUpload) return this.progressEvent.upload.bandwidth;
+      if (this.isDownload) return this.progressEvent.download.bandwidth;
       return 0;
     },
+    progressSpeedValueForNeedle() {
+      return this.$options.filters.convertToMegabits(this.progressSpeedValue);
+    },
   },
 };
 </script>
 
-<style scoped></style>
+<style>
+.speedTestProgressCard {
+  max-width: 400px;
+}
+</style>
diff --git a/client/src/components/Speedtest/SpeedtestResultsCard.vue b/client/src/components/Speedtest/SpeedtestResultsCard.vue
index dc2e333..d46954f 100644
--- a/client/src/components/Speedtest/SpeedtestResultsCard.vue
+++ b/client/src/components/Speedtest/SpeedtestResultsCard.vue
@@ -3,17 +3,17 @@
     <div class="pa-4">
       <div class="d-flex flex-wrap align-start justify-center">
         <div
-          class="mx-2 d-flex order-first flex-column align-start secondary darken-2 pa-2 ma-3 rounded-lg"
+          class="mx-2 d-flex order-sm-first order-md-first flex-column align-start secondary darken-2 pa-2 ma-3 rounded-lg"
         >
           <div class="text-h5">Download</div>
-          <div class="text-h1 font-weight-bold">
+          <div class="text-h3 font-weight-bold">
             {{ downloadSpeed | convertToMegabits
             }}<span class="text-h4 mx-4">Mbps</span>
           </div>
         </div>
 
         <div
-          class="mx-4 d-flex order-last flex-column align-center secondary darken-2 pa-2 ma-3 rounded-lg mb-2"
+          class="mx-4 d-flex order-sm-last order-md-1 flex-column align-center secondary darken-2 pa-2 ma-3 rounded-lg mb-2"
         >
           <div class="d-flex align-center justify-center">
             <div class="d-flex align-baseline justify-start">
@@ -37,10 +37,10 @@
             </div>
           </div>
 
-          <div class="d-flex align-center justify-center mt-3">
-            <div class="d-flex align-center justify-center">
-              <div class="font-weight-bold text-heading mx-2">Ping</div>
-              <div class="font-weight-bold text-h4 mx-2">
+          <div class="d-flex align-center justify-start mt-3">
+            <div class="d-flex align-center justify-start">
+              <div class="font-weight-bold text-heading">Ping</div>
+              <div class="font-weight-bold text-h6 mx-2">
                 {{ latency }}
               </div>
             </div>
@@ -48,10 +48,10 @@
         </div>
 
         <div
-          class="mx-2 d-flex flex-column align-start secondary darken-2 pa-2 ma-3 rounded-lg"
+          class="mx-2 d-flex order-sm-1 order-md-last flex-column align-start secondary darken-2 pa-2 ma-3 rounded-lg"
         >
           <div class="text-h5">Upload</div>
-          <div class="text-h1 font-weight-bold">
+          <div class="text-h3 font-weight-bold">
             {{ uploadSpeed | convertToMegabits
             }}<span class="text-h4 mx-4">Mbps</span>
           </div>
@@ -59,7 +59,7 @@
       </div>
 
       <div
-        class="d-flex align-start justify-space-around pa-1 secondary darken-2 ma-2 rounded-lg"
+        class="d-flex flex-wrap align-start justify-space-around pa-1 secondary darken-2 ma-2 rounded-lg"
       >
         <div class="d-flex align-center justify-start">
           <div class="font-weight-bold text-heading mx-2">Isp:</div>
diff --git a/client/src/components/Speedtest/SpeedtestWrapper.vue b/client/src/components/Speedtest/SpeedtestWrapper.vue
index 585f46d..d63f0a3 100644
--- a/client/src/components/Speedtest/SpeedtestWrapper.vue
+++ b/client/src/components/Speedtest/SpeedtestWrapper.vue
@@ -1,33 +1,52 @@
 <template>
-  <v-container class="speedtestWrapper">
-    <v-row>
+  <v-container fluid class="speedtestWrapper pa-0">
+    <v-row dense>
       <v-col>
-        <div class="d-flex flex-column align-center">
-          <div class="my-3 text-h3">Test Our Internet Speed</div>
+        <!--Run Test -->
+        <div class="d-flex flex-wrap align-start justify-center">
+          <div
+            class="d-flex flex-column align-center justify-start secondary darken-4 pa-4 rounded-lg"
+          >
+            <div v-if="!isRunning">
+              <div class="text-h5 mb-3">Run Speed Test</div>
+              <v-btn
+                v-if="!isRunning"
+                color="green"
+                class="shadow-sm"
+                @click="startSpeedTest"
+                ><v-icon class="mr-2">fa-tachometer-alt</v-icon>
+                <div class="font-weight-bold pa-2">Start A Test</div>
+              </v-btn>
+            </div>
+
+            <div v-if="isRunning && !speedTestEventData">
+              <div class="text-h3">Preparing Tests</div>
+            </div>
 
-          <div v-if="isRunning && speedTestEventData">
-            <SpeedtestProgressCard
-              :progressEvent="speedTestEventData"
-            ></SpeedtestProgressCard>
+            <div v-if="isRunning && speedTestEventData">
+              <div
+                class="d-flex align-start justify-start secondary darken-4 pa-4 rounded-lg"
+              >
+                <!-- Live Test -->
+                <div class="d-flex flex-column align-center">
+                  <div v-if="isRunning && speedTestEventData">
+                    <SpeedtestProgressCard
+                      :progressEvent="speedTestEventData"
+                    ></SpeedtestProgressCard>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
+        </div>
 
+        <!-- Results Card -->
+        <div class="d-flex align-center justify-center my-2">
           <div v-if="speedTestResults" class="d-flex">
             <SpeedtestResultsCard
               :results="speedTestResults"
             ></SpeedtestResultsCard>
           </div>
-
-          <v-btn
-            large
-            v-if="!isRunning"
-            color="green"
-            class="my-6 shadow-sm"
-            @click="startSpeedTest"
-            ><v-icon large class="mr-2">fa-tachometer-alt</v-icon>
-            <div class="text-h5 font-weight-bold pa-2">
-              Run A Speed Test
-            </div></v-btn
-          >
         </div>
       </v-col>
     </v-row>
diff --git a/client/src/main.js b/client/src/main.js
index 9c06b80..2ba0c26 100644
--- a/client/src/main.js
+++ b/client/src/main.js
@@ -6,6 +6,8 @@ import vuetify from "./plugins/vuetify";
 
 import("./plugins/vueSocketIo");
 
+import { format } from "date-fns";
+
 import "roboto-fontface/css/roboto/roboto-fontface.css";
 import "@fortawesome/fontawesome-free/css/all.css";
 
@@ -15,6 +17,10 @@ Vue.filter("convertToMegabits", (bytes) => {
   return formatted;
 });
 
+Vue.filter("formatDateTime", (timestamp) => {
+  return format(new Date(timestamp), "MMM dd, yyyy  hh:mm a");
+});
+
 Vue.config.productionTip = false;
 
 new Vue({
diff --git a/client/src/scss/variables.scss b/client/src/scss/variables.scss
new file mode 100644
index 0000000..fb232cb
--- /dev/null
+++ b/client/src/scss/variables.scss
@@ -0,0 +1,10 @@
+/*
+@import url("https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap");
+$body-font-family: "Shadows Into Light", cursive;
+*/
+
+// @import url("https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap");
+// $body-font-family: "Permanent Marker", cursive;
+
+@import url("https://fonts.googleapis.com/css2?family=Exo:wght@200;300;400;500;700&display=swap");
+$body-font-family: "Exo", sans-serif;
diff --git a/client/src/store/index.js b/client/src/store/index.js
index 80b6564..7e76390 100644
--- a/client/src/store/index.js
+++ b/client/src/store/index.js
@@ -6,6 +6,8 @@ Vue.use(Vuex);
 import api from "./api";
 import logs from "./logs";
 
+import { LOGS_FETCH_RECENT } from "@/store/store.constants.js";
+
 export default new Vuex.Store({
   modules: {
     api,
@@ -83,5 +85,9 @@ export default new Vuex.Store({
       commit("clearSpeedTestResults");
       this._vm.$socket.client.emit("startSpeedTest", { start: true });
     },
+    socket_finishedSpeedtestEvent({ dispatch }) {
+      //commit("SOCKET_FINISHED_SPEEDTEST_EVENT", data);
+      dispatch(`logs/${LOGS_FETCH_RECENT}`);
+    },
   },
 });
diff --git a/client/src/views/Home.vue b/client/src/views/Home.vue
index ab4e64f..d1eba0d 100644
--- a/client/src/views/Home.vue
+++ b/client/src/views/Home.vue
@@ -1,6 +1,6 @@
 <template>
-  <v-container>
-    <v-row class="text-center">
+  <v-container fluid class="px-3">
+    <v-row class="text-center" dense>
       <v-col cols="12">
         <SpeedtestWrapper />
       </v-col>
diff --git a/client/vue.config.js b/client/vue.config.js
index 15c5f21..259e560 100644
--- a/client/vue.config.js
+++ b/client/vue.config.js
@@ -4,6 +4,8 @@ module.exports = {
   publicPath: "/",
   outputDir: "dist",
 
+  runtimeCompiler: true,
+
   devServer: {
     headers: { "Access-Control-Allow-Origin": "*" },
     contentBase: path.join(__dirname, "dist"),
diff --git a/config/config.js b/config/config.js
index 893c137..4f89521 100644
--- a/config/config.js
+++ b/config/config.js
@@ -4,8 +4,8 @@
 let config = {
   DB_NAME: "speedtester",
   DB_URL: "localhost",
-  SPEEDTEST_INTERVAL: "*/1 * * * *",
-  RUN_SCHEDULED_JOB: false,
+  SPEEDTEST_INTERVAL: "*/30 * * * *",
+  RUN_SCHEDULED_JOB: true,
 };
 
 //Production Overrides
@@ -13,7 +13,7 @@ if (process.env.NODE_ENV == "production") {
   config = {
     ...config,
     DB_URL: "mongo",
-    SPEEDTEST_INTERVAL: "*/15 * * * *",
+    SPEEDTEST_INTERVAL: "* */2 * * *",
     RUN_SCHEDULED_JOB: true,
   };
 }
diff --git a/docker-compose.yml b/docker-compose.yml
index 925afbf..f4c2dbe 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -13,6 +13,6 @@ services:
     restart: always
     image: ${MONGO_IMAGE_NAME}
     volumes:
-      - ./data:/data/db
+      - /data/db
     ports:
       - '27017:27017'
\ No newline at end of file
diff --git a/server/routes/socket/liveTest/liveTest.js b/server/routes/socket/liveTest/liveTest.js
index d5a8de8..d600c7e 100644
--- a/server/routes/socket/liveTest/liveTest.js
+++ b/server/routes/socket/liveTest/liveTest.js
@@ -1,17 +1,25 @@
+const { logger } = require("../../../util/logger");
+const logsModel = require("../../../models/logSchema.js");
+
 module.exports = async (socket, em) => {
   //already connected so what do we want to do in here
-  em.on("progressEvent", async function (progressEvent) {
-    // console.log("emitting progress event to ", socket.id);
+  em.on("progressEvent", async function (progressEvent) {    
     socket.emit("PROGRESS_EVENT", progressEvent);
   });
 
-  em.on("runningSpeedTestEvent", async function (params) {
-    //console.log("runningSpeedTestEvent -  " + JSON.stringify(params) + " sending event to ", socket.id);
+  em.on("runningSpeedTestEvent", async function (params) {    
     socket.emit("RUNNING_SPEEDTEST_EVENT", params);
   });
 
-  em.on("testResults", async function (testResults) {
-    //console.log("testResults -  " + JSON.stringify(testResults) + " sending event to ", socket.id);
-    socket.emit("FINISHED_SPEEDTEST_EVENT", testResults);
+  em.on("testResults", async function (testResults) {    
+    console.log("TEST RESULTS???");
+    socket.emit("FINISHED_SPEEDTEST_EVENT", testResults);    
+    try {
+      const newLog = new logsModel(testResults);
+      const logSaveResult = await newLog.save();  
+      console.log("MODEL SAVED->",logSaveResult);
+    } catch (error) {
+      logger.error("liveTest | testResults | error=" + e.message);
+    }   
   });
 };
diff --git a/server/services/speedtestService.js b/server/services/speedtestService.js
index a5f6416..ea92b11 100644
--- a/server/services/speedtestService.js
+++ b/server/services/speedtestService.js
@@ -1,7 +1,6 @@
 const speedTest = require("speedtest-net");
 const { logger } = require("../util/logger");
 
-const mongooseService = require("../services/mongooseService.js");
 const logsModel = require("../models/logSchema.js");
 
 const events = require("events");

From 9176927022a2bf2aceeb17d632eedf624faacf40 Mon Sep 17 00:00:00 2001
From: Dynamik Array <dynamikarray@gmail.com>
Date: Sun, 30 Jan 2022 15:19:20 -0500
Subject: [PATCH 6/7] Deployment Environment Tweaks

---
 .dockerIgnore      | 3 ++-
 .gitignore         | 2 +-
 docker-compose.yml | 6 ++++--
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/.dockerIgnore b/.dockerIgnore
index 5171c54..050f13a 100644
--- a/.dockerIgnore
+++ b/.dockerIgnore
@@ -1,2 +1,3 @@
 node_modules
-npm-debug.log
\ No newline at end of file
+npm-debug.log
+./dbdata/
diff --git a/.gitignore b/.gitignore
index 02c607c..b3e052e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,3 @@
 node_modules
 .env
-data
\ No newline at end of file
+dbdata
\ No newline at end of file
diff --git a/docker-compose.yml b/docker-compose.yml
index f4c2dbe..8c1fa76 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -13,6 +13,8 @@ services:
     restart: always
     image: ${MONGO_IMAGE_NAME}
     volumes:
-      - /data/db
+      - ./dbdata:/data/db
     ports:
-      - '27017:27017'
\ No newline at end of file
+      - '27017:27017'
+volumes: 
+  dbdata:
\ No newline at end of file

From 47534d633d198c99e629c47b95670bb4f92b8c53 Mon Sep 17 00:00:00 2001
From: Brian Ridsdalea <dynamikarray@gmail.com>
Date: Tue, 1 Feb 2022 19:08:22 -0500
Subject: [PATCH 7/7] Fixes: Multiple Log Entries being written

---
 docker-compose.yml                        |  5 +++--
 server/routes/socket/index.js             | 15 +++++++++++++++
 server/routes/socket/liveTest/liveTest.js | 17 +++++------------
 3 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/docker-compose.yml b/docker-compose.yml
index f4c2dbe..ccb23eb 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -13,6 +13,7 @@ services:
     restart: always
     image: ${MONGO_IMAGE_NAME}
     volumes:
-      - /data/db
+      - ~/mongo/data:/data/db
     ports:
-      - '27017:27017'
\ No newline at end of file
+      - '27017:27017'
+    
\ No newline at end of file
diff --git a/server/routes/socket/index.js b/server/routes/socket/index.js
index 91aadcd..a76563a 100644
--- a/server/routes/socket/index.js
+++ b/server/routes/socket/index.js
@@ -1,4 +1,6 @@
 const { logger } = require("../../util/logger");
+const logsModel = require("../../models/logSchema.js");
+
 
 const speedtestService = require("../../services/speedtestService");
 
@@ -14,4 +16,17 @@ module.exports = (io, em) => {
 
     require("./liveTest/liveTest")(socket, em);
   });
+
+
+  //Handle saving new log results?
+  //This needs a better events patter ?
+  em.on("testResults", async function (testResults) {            
+    try {
+      const newLog = new logsModel(testResults);
+      const logSaveResult = await newLog.save();        
+    } catch (error) {
+      logger.error("liveTest | testResults | error=" + error.message);
+    }   
+  });
+
 };
diff --git a/server/routes/socket/liveTest/liveTest.js b/server/routes/socket/liveTest/liveTest.js
index d600c7e..c0c19a8 100644
--- a/server/routes/socket/liveTest/liveTest.js
+++ b/server/routes/socket/liveTest/liveTest.js
@@ -1,5 +1,4 @@
 const { logger } = require("../../../util/logger");
-const logsModel = require("../../../models/logSchema.js");
 
 module.exports = async (socket, em) => {
   //already connected so what do we want to do in here
@@ -7,19 +6,13 @@ module.exports = async (socket, em) => {
     socket.emit("PROGRESS_EVENT", progressEvent);
   });
 
-  em.on("runningSpeedTestEvent", async function (params) {    
+  em.on("runningSpeedTestEvent", async function (params) {
+    //console.log("running speedtest");
     socket.emit("RUNNING_SPEEDTEST_EVENT", params);
   });
 
-  em.on("testResults", async function (testResults) {    
-    console.log("TEST RESULTS???");
-    socket.emit("FINISHED_SPEEDTEST_EVENT", testResults);    
-    try {
-      const newLog = new logsModel(testResults);
-      const logSaveResult = await newLog.save();  
-      console.log("MODEL SAVED->",logSaveResult);
-    } catch (error) {
-      logger.error("liveTest | testResults | error=" + e.message);
-    }   
+  em.on("testResults", async function (testResults) {        
+    //console.log("TEST RESULTS???",em, socket.conn.id);
+    socket.emit("FINISHED_SPEEDTEST_EVENT", testResults);        
   });
 };