Merge pull request #591 from henrywhitaker3/dependabot/add-v2-config-file

Upgrade to GitHub-native Dependabot

.github/dependabot.yml

@@ -0,0 +1,79 @@
+version: 2
+updates:
+- package-ecosystem: composer
+  directory: "/"
+  schedule:
+    interval: daily
+  open-pull-requests-limit: 10
+  target-branch: dev
+  ignore:
+  - dependency-name: laravel/framework
+    versions:
+    - 7.30.3
+    - 8.36.2
+    - 8.37.0
+    - 8.38.0
+  - dependency-name: doctrine/dbal
+    versions:
+    - 2.13.0
+    - 3.0.0
+  - dependency-name: phpunit/phpunit
+    versions:
+    - 9.5.1
+    - 9.5.3
+  - dependency-name: facade/ignition
+    versions:
+    - 2.5.10
+    - 2.5.11
+    - 2.5.12
+    - 2.5.13
+    - 2.5.9
+  - dependency-name: laravel/tinker
+    versions:
+    - 2.6.0
+  - dependency-name: nunomaduro/collision
+    versions:
+    - 5.3.0
+  - dependency-name: nunomaduro/larastan
+    versions:
+    - 0.6.13
+- package-ecosystem: npm
+  directory: "/"
+  schedule:
+    interval: daily
+  open-pull-requests-limit: 10
+  target-branch: dev
+  ignore:
+  - dependency-name: chart.js
+    versions:
+    - 3.1.0
+    - 3.1.1
+  - dependency-name: laravel-mix
+    versions:
+    - 6.0.16
+  - dependency-name: y18n
+    versions:
+    - 4.0.1
+    - 4.0.2
+  - dependency-name: react-dom
+    versions:
+    - 17.0.2
+  - dependency-name: react
+    versions:
+    - 17.0.2
+  - dependency-name: react-bootstrap
+    versions:
+    - 1.4.3
+    - 1.5.0
+  - dependency-name: sass
+    versions:
+    - 1.32.5
+    - 1.32.6
+    - 1.32.7
+  - dependency-name: "@babel/plugin-proposal-class-properties"
+    versions:
+    - 7.12.13
+  - dependency-name: react-toastify
+    versions:
+    - 7.0.1
+    - 7.0.2

.github/workflows/docker-image-pr.yml

@@ -0,0 +1,16 @@
+name: DockerPR
+
+on:
+  pull_request:
+    branches: [ docker, dev-docker, alpha-docker ]
+
+jobs:
+
+  build:
+
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Build the Docker image
+      run: docker build . --file Dockerfile --tag my-image-name:$(date +%s)

.github/workflows/laravel-dev.yml

@@ -10,6 +10,9 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
+    - uses: shivammathur/setup-php@b7d1d9c9a92d8d8463ce36d7f60da34d461724f8
+      with:
+        php-version: '7.4'
     - uses: actions/checkout@v2
     - name: Copy .env
       run: php -r "file_exists('.env') || copy('.env.example', '.env');"
@@ -43,7 +46,7 @@ jobs:
     - name: Directory Permissions
       run: chmod -R 777 storage bootstrap/cache
     - name: Download Speedtest binary
-      run: wget https://bintray.com/ookla/download/download_file?file_path=ookla-speedtest-1.0.0-x86_64-linux.tgz -O speedtest.tgz && tar zxvf speedtest.tgz && mv speedtest app/Bin/
+      run: wget https://install.speedtest.net/app/cli/ookla-speedtest-1.0.0-x86_64-linux.tgz -O speedtest.tgz && tar zxvf speedtest.tgz && mv speedtest app/Bin/
     - name: Accept EULA
       env:
         DB_CONNECTION: sqlite

.github/workflows/laravel-pr.yml

@@ -10,6 +10,9 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
+    - uses: shivammathur/setup-php@b7d1d9c9a92d8d8463ce36d7f60da34d461724f8
+      with:
+        php-version: '7.4'
     - uses: actions/checkout@v2
     - name: Copy .env
       run: php -r "file_exists('.env') || copy('.env.example', '.env');"
@@ -43,7 +46,7 @@ jobs:
     - name: Directory Permissions
       run: chmod -R 777 storage bootstrap/cache
     - name: Download Speedtest binary
-      run: wget https://bintray.com/ookla/download/download_file?file_path=ookla-speedtest-1.0.0-x86_64-linux.tgz -O speedtest.tgz && tar zxvf speedtest.tgz && mv speedtest app/Bin/
+      run: wget https://install.speedtest.net/app/cli/ookla-speedtest-1.0.0-x86_64-linux.tgz -O speedtest.tgz && tar zxvf speedtest.tgz && mv speedtest app/Bin/
     - name: Accept EULA
       env:
         DB_CONNECTION: sqlite
@@ -53,4 +56,4 @@ jobs:
       env:
         DB_CONNECTION: sqlite
         DB_DATABASE: database/database.sqlite
-      run: vendor/bin/phpunit
+      run: php artisan test --parallel

.github/workflows/laravel-stable.yml

@@ -10,6 +10,9 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
+    - uses: shivammathur/setup-php@b7d1d9c9a92d8d8463ce36d7f60da34d461724f8
+      with:
+        php-version: '7.4'
     - uses: actions/checkout@v2
     - name: Copy .env
       run: php -r "file_exists('.env') || copy('.env.example', '.env');"
@@ -43,7 +46,7 @@ jobs:
     - name: Directory Permissions
       run: chmod -R 777 storage bootstrap/cache
     - name: Download Speedtest binary
-      run: wget https://bintray.com/ookla/download/download_file?file_path=ookla-speedtest-1.0.0-x86_64-linux.tgz -O speedtest.tgz && tar zxvf speedtest.tgz && mv speedtest app/Bin/
+      run: wget https://install.speedtest.net/app/cli/ookla-speedtest-1.0.0-x86_64-linux.tgz -O speedtest.tgz && tar zxvf speedtest.tgz && mv speedtest app/Bin/
     - name: Accept EULA
       env:
         DB_CONNECTION: sqlite

README.md

@@ -1,9 +1,11 @@
 # Speedtest Tracker
 
-[![Docker pulls](https://img.shields.io/docker/pulls/henrywhitaker3/speedtest-tracker?style=flat-square)](https://hub.docker.com/r/henrywhitaker3/speedtest-tracker) [![GitHub Workflow Status](https://img.shields.io/github/workflow/status/henrywhitaker3/Speedtest-Tracker/Stable?label=master&logo=github&style=flat-square)](https://github.com/henrywhitaker3/Speedtest-Tracker/actions) [![GitHub Workflow Status](https://img.shields.io/github/workflow/status/henrywhitaker3/Speedtest-Tracker/Dev?label=dev&logo=github&style=flat-square)](https://github.com/henrywhitaker3/Speedtest-Tracker/actions) [![last_commit](https://img.shields.io/github/last-commit/henrywhitaker3/Speedtest-Tracker?style=flat-square)](https://github.com/henrywhitaker3/Speedtest-Tracker/commits) [![issues](https://img.shields.io/github/issues/henrywhitaker3/Speedtest-Tracker?style=flat-square)](https://github.com/henrywhitaker3/Speedtest-Tracker/issues) [![commit_freq](https://img.shields.io/github/commit-activity/m/henrywhitaker3/Speedtest-Tracker?style=flat-square)](https://github.com/henrywhitaker3/Speedtest-Tracker/commits) ![version](https://img.shields.io/badge/version-v1.9.4-success?style=flat-square) [![license](https://img.shields.io/github/license/henrywhitaker3/Speedtest-Tracker?style=flat-square)](https://github.com/henrywhitaker3/Speedtest-Tracker/blob/master/LICENSE)
+[![Docker pulls](https://img.shields.io/docker/pulls/henrywhitaker3/speedtest-tracker?style=flat-square)](https://hub.docker.com/r/henrywhitaker3/speedtest-tracker) [![GitHub Workflow Status](https://img.shields.io/github/workflow/status/henrywhitaker3/Speedtest-Tracker/Stable?label=master&logo=github&style=flat-square)](https://github.com/henrywhitaker3/Speedtest-Tracker/actions) [![GitHub Workflow Status](https://img.shields.io/github/workflow/status/henrywhitaker3/Speedtest-Tracker/Dev?label=dev&logo=github&style=flat-square)](https://github.com/henrywhitaker3/Speedtest-Tracker/actions) [![last_commit](https://img.shields.io/github/last-commit/henrywhitaker3/Speedtest-Tracker?style=flat-square)](https://github.com/henrywhitaker3/Speedtest-Tracker/commits) [![issues](https://img.shields.io/github/issues/henrywhitaker3/Speedtest-Tracker?style=flat-square)](https://github.com/henrywhitaker3/Speedtest-Tracker/issues) [![commit_freq](https://img.shields.io/github/commit-activity/m/henrywhitaker3/Speedtest-Tracker?style=flat-square)](https://github.com/henrywhitaker3/Speedtest-Tracker/commits) ![version](https://img.shields.io/badge/version-v1.12.0-success?style=flat-square) [![license](https://img.shields.io/github/license/henrywhitaker3/Speedtest-Tracker?style=flat-square)](https://github.com/henrywhitaker3/Speedtest-Tracker/blob/master/LICENSE)
 
 This program runs a speedtest check every hour and graphs the results. The back-end is written in [Laravel](https://laravel.com/) and the front-end uses [React](https://reactjs.org/). It uses the [Ookla's speedtest cli](https://www.speedtest.net/apps/cli) package to get the data and uses [Chart.js](https://www.chartjs.org/) to plot the results.
 
+A demo can be found [here](https://speedtest.henrywhitaker.com)
+
 Disclaimer: You will need to accept Ookla's EULA and privacy agreements in order to use this container.
 
 ![speedtest](https://user-images.githubusercontent.com/36062479/78822484-a82b8300-79ca-11ea-8525-fdeae496a0bd.gif)
@@ -16,6 +18,7 @@ Disclaimer: You will need to accept Ookla's EULA and privacy agreements in order
 - Slack/Discord/Telegram notifications
 - [healthchecks.io](https://healthchecks.io) integration
 - Organizr integration
+- InfluxDB integration (currently v1 only, v2 is a WIP)
 
 ## Installation & Setup
 
@@ -82,6 +85,8 @@ Container images are configured using parameters passed at runtime (such as thos
 |     `-e PUID`             |   Optional. Supply a local user ID for volume permissions   |
 |     `-e PGID`             |   Optional. Supply a local group ID for volume permissions  |
 |     `-e AUTH`             |   Optional. Set to 'true' to enable authentication for the app |
+|     `-e INFLUXDB_RETENTION`|  Optional. Sets the InfluxDB retention period, defaults to `30d` |
+|     `-e INFLUXDB_HOST_TAG |   Optional. Sets the InfluxDB host tag value, defaults to `speedtest` |
 
 ### Authentication
 
@@ -98,4 +103,8 @@ After enabling, you should change the password through the web UI.
     
 ### Manual Install
 
-For manual installtions, please follow the instrucitons [here](https://github.com/henrywhitaker3/Speedtest-Tracker/wiki/Manual-Installation).
+For manual installations, please follow the instructions [here](https://github.com/henrywhitaker3/Speedtest-Tracker/wiki/Manual-Installation).
+
+### Kubernetes
+
+There is a 3rd party helm chart available [here](https://github.com/sOblivionsCall/charts).

app/Actions/GetFailedSpeedtestData.php

@@ -0,0 +1,48 @@
+<?php
+
+namespace App\Actions;
+
+use App\Models\Speedtest;
+use Cache;
+use Carbon\Carbon;
+use DB;
+use Henrywhitaker3\LaravelActions\Interfaces\ActionInterface;
+
+class GetFailedSpeedtestData implements ActionInterface
+{
+    /**
+     * Run the action.
+     *
+     * @return mixed
+     */
+    public function run($days = 7)
+    {
+        $ttl = Carbon::now()->addDays(1);
+
+        return Cache::remember('failure-rate-' . $days, $ttl, function () use ($days) {
+            $range = [
+                Carbon::today()
+            ];
+            for ($i = 0; $i < ($days - 1); $i++) {
+                $prev = end($range);
+                $new = $prev->copy()->subDays(1);
+                array_push($range, $new);
+            }
+
+            $rate = [];
+
+            foreach ($range as $day) {
+                $success = Speedtest::select(DB::raw('COUNT(id) as rate'))->whereDate('created_at', $day)->where('failed', false)->get()[0]['rate'];
+                $fail = Speedtest::select(DB::raw('COUNT(id) as rate'))->whereDate('created_at', $day)->where('failed', true)->get()[0]['rate'];
+
+                array_push($rate, [
+                    'date' => $day->toDateString(),
+                    'success' => $success,
+                    'failure' => $fail,
+                ]);
+            }
+
+            return array_reverse($rate);
+        });
+    }
+}

app/Actions/GetLatestSpeedtestData.php

@@ -0,0 +1,52 @@
+<?php
+
+namespace App\Actions;
+
+use App\Helpers\SettingsHelper;
+use App\Helpers\SpeedtestHelper;
+use App\Models\Speedtest;
+use DB;
+use Henrywhitaker3\LaravelActions\Interfaces\ActionInterface;
+
+class GetLatestSpeedtestData implements ActionInterface
+{
+    /**
+     * Run the action.
+     *
+     * @return mixed
+     */
+    public function run()
+    {
+        $data = SpeedtestHelper::latest();
+
+        $response = [
+            'data' => $data,
+        ];
+
+        if (SettingsHelper::get('show_average')) {
+            $avg = Speedtest::select(DB::raw('AVG(ping) as ping, AVG(download) as download, AVG(upload) as upload'))
+                ->where('failed', false)
+                ->first()
+                ->toArray();
+            $response['average'] = $avg;
+        }
+
+        if (SettingsHelper::get('show_max')) {
+            $max = Speedtest::select(DB::raw('MAX(ping) as ping, MAX(download) as download, MAX(upload) as upload'))
+                ->where('failed', false)
+                ->first()
+                ->toArray();
+            $response['maximum'] = $max;
+        }
+
+        if (SettingsHelper::get('show_min')) {
+            $min = Speedtest::select(DB::raw('MIN(ping) as ping, MIN(download) as download, MIN(upload) as upload'))
+                ->where('failed', false)
+                ->first()
+                ->toArray();
+            $response['minimum'] = $min;
+        }
+
+        return $response;
+    }
+}

app/Actions/GetSpeedtestTimeData.php

@@ -0,0 +1,37 @@
+<?php
+
+namespace App\Actions;
+
+use App\Helpers\SettingsHelper;
+use App\Models\Speedtest;
+use Cache;
+use Carbon\Carbon;
+use Henrywhitaker3\LaravelActions\Interfaces\ActionInterface;
+
+class GetSpeedtestTimeData implements ActionInterface
+{
+    /**
+     * Run the action.
+     *
+     * @return mixed
+     */
+    public function run($days = 7)
+    {
+        $ttl = Carbon::now()->addDays(1);
+
+        return Cache::remember('speedtest-days-' . $days, $ttl, function () use ($days) {
+            $showFailed = (bool)SettingsHelper::get('show_failed_tests_on_graph')->value;
+
+            if ($showFailed === true) {
+                return Speedtest::where('created_at', '>=', Carbon::now()->subDays($days))
+                    ->orderBy('created_at', 'asc')
+                    ->get();
+            }
+
+            return Speedtest::where('created_at', '>=', Carbon::now()->subDays($days))
+                ->where('failed', false)
+                ->orderBy('created_at', 'asc')
+                ->get();
+        });
+    }
+}

app/Actions/QueueSpeedtest.php

@@ -0,0 +1,35 @@
+<?php
+
+namespace App\Actions;
+
+use App\Helpers\SettingsHelper;
+use App\Interfaces\SpeedtestProvider;
+use App\Jobs\SpeedtestJob;
+use Henrywhitaker3\LaravelActions\Interfaces\ActionInterface;
+
+class QueueSpeedtest implements ActionInterface
+{
+    private SpeedtestProvider $speedtestProvider;
+
+    /**
+     * Create a new action instance.
+     *
+     * @return void
+     */
+    public function __construct(SpeedtestProvider $speedtestProvider)
+    {
+        $this->speedtestProvider = $speedtestProvider;
+    }
+
+    /**
+     * Run the action.
+     *
+     * @return mixed
+     */
+    public function run()
+    {
+        SettingsHelper::loadIntegrationConfig();
+
+        SpeedtestJob::dispatch(false, config('integrations'), $this->speedtestProvider);
+    }
+}

app/Casts/CommaSeparatedArrayCast.php

@@ -0,0 +1,52 @@
+<?php
+
+namespace App\Casts;
+
+use Illuminate\Contracts\Database\Eloquent\CastsAttributes;
+
+class CommaSeparatedArrayCast implements CastsAttributes
+{
+    /**
+     * Array of settings that should be cast
+     */
+    private array $shouldCast = [
+        'visible_columns',
+        'hidden_columns',
+    ];
+
+    /**
+     * Cast the given value.
+     *
+     * @param  \Illuminate\Database\Eloquent\Model  $model
+     * @param  string  $key
+     * @param  mixed  $value
+     * @param  array  $attributes
+     * @return mixed
+     */
+    public function get($model, $key, $value, $attributes)
+    {
+        if (!in_array($model->name, $this->shouldCast)) {
+            return $value;
+        }
+
+        return explode(',', $value);
+    }
+
+    /**
+     * Prepare the given value for storage.
+     *
+     * @param  \Illuminate\Database\Eloquent\Model  $model
+     * @param  string  $key
+     * @param  mixed  $value
+     * @param  array  $attributes
+     * @return mixed
+     */
+    public function set($model, $key, $value, $attributes)
+    {
+        if (!in_array($model->name, $this->shouldCast)) {
+            return $value;
+        }
+
+        return implode(',', $value);
+    }
+}

app/Console/Commands/AcceptEULACommand.php

@@ -38,6 +38,7 @@ class AcceptEULACommand extends Command
      */
     public function handle()
     {
-        shell_exec(config('speedtest.home') . ' && ' . app_path() . '/Bin/speedtest --accept-license --accept-gdpr');
+        $this->info('Acceping EULA');
+        shell_exec(config('speedtest.home') . ' && timeout 3s ' . app_path() . '/Bin/speedtest --accept-license --accept-gdpr');
     }
 }

app/Console/Commands/ClearOldSessionsCommand.php

@@ -2,7 +2,7 @@
 
 namespace App\Console\Commands;
 
-use App\Auth\LoginSession;
+use App\Models\Auth\LoginSession;
 use Carbon\Carbon;
 use Illuminate\Console\Command;
 use Log;

app/Console/Commands/SpeedtestCommand.php

@@ -2,7 +2,9 @@
 
 namespace App\Console\Commands;
 
+use App\Exceptions\SpeedtestFailureException;
 use App\Helpers\SpeedtestHelper;
+use App\Interfaces\SpeedtestProvider;
 use Illuminate\Console\Command;
 
 class SpeedtestCommand extends Command
@@ -21,13 +23,17 @@ class SpeedtestCommand extends Command
      */
     protected $description = 'Performs a new speedtest';
 
+    private SpeedtestProvider $speedtestProvider;
+
     /**
      * Create a new command instance.
      *
      * @return void
      */
-    public function __construct()
+    public function __construct(SpeedtestProvider $speedtestProvider)
     {
+        $this->speedtestProvider = $speedtestProvider;
+
         parent::__construct();
     }
 
@@ -40,14 +46,14 @@ class SpeedtestCommand extends Command
     {
         $this->info('Running speedtest, this might take a while...');
 
-        $results = SpeedtestHelper::runSpeedtest(false, false);
-
-        if(!is_object($results)) {
+        try {
+            $results = $this->speedtestProvider->run(false, false);
+        } catch (SpeedtestFailureException $e) {
             $this->error('Something went wrong running the speedtest.');
             exit();
         }
 
-        if(property_exists($results, 'ping') && property_exists($results, 'download') && property_exists($results, 'upload')) {
+        if (property_exists($results, 'ping') && property_exists($results, 'download') && property_exists($results, 'upload')) {
             $this->error('Something went wrong running the speedtest.');
             exit();
         }

app/Console/Commands/SpeedtestLatestCommand.php

@@ -3,6 +3,7 @@
 namespace App\Console\Commands;
 
 use App\Helpers\SpeedtestHelper;
+use App\Interfaces\SpeedtestProvider;
 use Illuminate\Console\Command;
 use Illuminate\Support\Facades\Artisan;
 
@@ -22,13 +23,17 @@ class SpeedtestLatestCommand extends Command
      */
     protected $description = 'Returns the latest speedtest result';
 
+    private SpeedtestProvider $speedtestProvider;
+
     /**
      * Create a new command instance.
      *
      * @return void
      */
-    public function __construct()
+    public function __construct(SpeedtestProvider $speedtestProvider)
     {
+        $this->speedtestProvider = $speedtestProvider;
+
         parent::__construct();
     }
 
@@ -41,8 +46,8 @@ class SpeedtestLatestCommand extends Command
     {
         $latest = SpeedtestHelper::latest();
 
-        if($latest) {
-            if($latest->scheduled) {
+        if ($latest) {
+            if ($latest->scheduled) {
                 $extra = '(scheduled)';
             } else {
                 $extra = '(manual)';
@@ -50,7 +55,7 @@ class SpeedtestLatestCommand extends Command
 
             $this->info('Last speedtest run at: ' . $latest->created_at . ' ' . $extra);
 
-            if($latest->failed) {
+            if ($latest->failed) {
                 $this->error('Speedtest failed');
             } else {
                 $this->info('Ping: ' . $latest->ping . ' ms');
@@ -62,7 +67,7 @@ class SpeedtestLatestCommand extends Command
 
             $this->info('Running speedtest, this might take a while...');
 
-            $results = SpeedtestHelper::runSpeedtest();
+            $results = $this->speedtestProvider->run();
 
             $this->info('Ping: ' . $results->ping . ' ms');
             $this->info('Download: ' . $results->download . ' Mbit/s');

app/Console/Kernel.php

@@ -5,6 +5,7 @@ namespace App\Console;
 use App\Events\SpeedtestOverviewEvent;
 use App\Helpers\SettingsHelper;
 use App\Helpers\SpeedtestHelper;
+use App\Interfaces\SpeedtestProvider;
 use App\Jobs\SpeedtestJob;
 use Illuminate\Console\Scheduling\Schedule;
 use Illuminate\Foundation\Console\Kernel as ConsoleKernel;
@@ -28,8 +29,18 @@ class Kernel extends ConsoleKernel
      */
     protected function schedule(Schedule $schedule)
     {
-        $schedule->job(new SpeedtestJob(true, config('integrations')))->cron(SettingsHelper::get('schedule')['value']);
-        $schedule->command('speedtest:overview')->cron('0 ' . SettingsHelper::get('speedtest_overview_time')->value . ' * * *');
+        if ((bool)SettingsHelper::get('schedule_enabled')->value) {
+            $schedule->job(
+                new SpeedtestJob(
+                    true,
+                    config('integrations'),
+                    app()->make(SpeedtestProvider::class)
+                )
+            )
+                ->cron(SettingsHelper::get('schedule')['value'])
+                ->timezone(env('TZ', 'UTC'));
+        }
+        $schedule->command('speedtest:overview')->cron('0 ' . SettingsHelper::get('speedtest_overview_time')->value . ' * * *')->timezone(env('TZ', 'UTC'));
         $schedule->command('speedtest:clear-sessions')->everyMinute();
     }
 
@@ -40,7 +51,7 @@ class Kernel extends ConsoleKernel
      */
     protected function commands()
     {
-        $this->load(__DIR__.'/Commands');
+        $this->load(__DIR__ . '/Commands');
 
         require base_path('routes/console.php');
     }

app/Exceptions/InfluxDBConnectionErrorException.php

@@ -0,0 +1,10 @@
+<?php
+
+namespace App\Exceptions;
+
+use Exception;
+
+class InfluxDBConnectionErrorException extends Exception
+{
+    //
+}

app/Exceptions/InfluxDBNotEnabledException.php

@@ -0,0 +1,10 @@
+<?php
+
+namespace App\Exceptions;
+
+use Exception;
+
+class InfluxDBNotEnabledException extends Exception
+{
+    //
+}

app/Exceptions/SpeedtestFailureException.php

@@ -0,0 +1,10 @@
+<?php
+
+namespace App\Exceptions;
+
+use Exception;
+
+class SpeedtestFailureException extends Exception
+{
+    //
+}

app/Helpers/BackupHelper.php

@@ -2,7 +2,8 @@
 
 namespace App\Helpers;
 
-use App\Speedtest;
+use App\Models\Speedtest;
+use Cache;
 use DateTime;
 use Exception;
 use Illuminate\Support\Facades\Log;
@@ -59,6 +60,7 @@ class BackupHelper {
      */
     public static function restore($array, $format)
     {
+        Cache::flush();
         if($format == 'json') {
             foreach($array as $test) {
                 try {

app/Helpers/EmailVerificationHelper.php

@@ -2,8 +2,8 @@
 
 namespace App\Helpers;
 
-use App\Auth\EmailVerification;
-use App\User;
+use App\Models\Auth\EmailVerification;
+use App\Models\User;
 
 class EmailVerificationHelper {
     public static function checkVerificationAttempt($userID, $token)

app/Helpers/SettingsHelper.php

@@ -3,10 +3,13 @@
 namespace App\Helpers;
 
 use App\Events\TestNotificationEvent;
-use App\Setting;
+use App\Models\Setting;
+use Cache;
 use Carbon\Carbon;
 
-class SettingsHelper {
+class SettingsHelper
+{
+    private static $settings = null;
 
     /**
      * Get a Setting object by name
@@ -18,10 +21,10 @@ class SettingsHelper {
     {
         $name = Setting::where('name', $name)->get();
 
-        if(sizeof($name) == 0) {
+        if (sizeof($name) == 0) {
             return false;
-        } else if(sizeof($name) == 1) {
-            return $name[0];
+        } else if (sizeof($name) == 1) {
+            return $name->first();
         } else {
             $name = $name->keyBy('name');
             return $name->all();
@@ -39,11 +42,11 @@ class SettingsHelper {
     {
         $setting = SettingsHelper::get($name);
 
-        if($value === false) {
+        if ($value === false) {
             $value = "0";
         }
 
-        if($setting !== false) {
+        if ($setting !== false) {
             $setting->value = $value;
             $setting->save();
         } else {
@@ -53,6 +56,10 @@ class SettingsHelper {
             ]);
         }
 
+        if ($name == 'show_failed_tests_on_graph') {
+            Cache::flush();
+        }
+
         return $setting;
     }
 
@@ -64,13 +71,13 @@ class SettingsHelper {
     public static function getBase()
     {
         $base = env('BASE_PATH', '/');
-        if($base == '') {
+        if ($base == '') {
             $base = '/';
         } else {
-            if($base[0] != '/') {
+            if ($base[0] != '/') {
                 $base = '/' . $base;
             }
-            if($base[-1] != '/') {
+            if ($base[-1] != '/') {
                 $base = $base . '/';
             }
         }
@@ -85,12 +92,17 @@ class SettingsHelper {
      */
     public static function settingIsEditable(string $key)
     {
+        // Manual override for app_name
+        if ($key === 'app_name') {
+            return true;
+        }
+
         $results = [];
 
         // Try exact key
         $val = exec('echo $' . $key);
 
-        if($val == "") {
+        if ($val == "") {
             array_push($results, true);
         } else {
             array_push($results, false);
@@ -99,25 +111,25 @@ class SettingsHelper {
         // Try key all caps
         $val = exec('echo $' . strtoupper($key));
 
-        if($val == "") {
+        if ($val == "") {
             array_push($results, true);
         } else {
             array_push($results, false);
         }
 
-        if(env($key, false) == false) {
+        if (env($key, false) == false) {
             array_push($results, true);
         } else {
             array_push($results, false);
         }
 
-        if(env(strtoupper($key), false) == false) {
+        if (env(strtoupper($key), false) == false) {
             array_push($results, true);
         } else {
             array_push($results, false);
         }
 
-        if(in_array(false, $results)) {
+        if (in_array(false, $results)) {
             return false;
         }
 
@@ -133,6 +145,12 @@ class SettingsHelper {
     {
         return [
             'base' => SettingsHelper::getBase(),
+            'name' => SettingsHelper::get('app_name')->value,
+            'widgets' => [
+                'show_average' => (bool)SettingsHelper::get('show_average')->value,
+                'show_max' => (bool)SettingsHelper::get('show_max')->value,
+                'show_min' => (bool)SettingsHelper::get('show_min')->value,
+            ],
             'graphs' => [
                 'download_upload_graph_enabled' => SettingsHelper::get('download_upload_graph_enabled'),
                 'download_upload_graph_width' => SettingsHelper::get('download_upload_graph_width'),
@@ -146,6 +164,10 @@ class SettingsHelper {
                 'telegram_bot_token' => SettingsHelper::settingIsEditable('telegram_bot_token'),
                 'telegram_chat_id' => SettingsHelper::settingIsEditable('telegram_chat_id'),
             ],
+            'tables' => [
+                'visible_columns' => SettingsHelper::get('visible_columns')->value,
+                'hidden_columns' => SettingsHelper::get('hidden_columns')->value,
+            ],
             'auth' => (bool)SettingsHelper::get('auth')->value
         ];
     }
@@ -158,15 +180,15 @@ class SettingsHelper {
      */
     public static function testNotification($agent = true)
     {
-        $agents = [ 'slack', 'telegram' ];
+        $agents = ['slack', 'telegram'];
 
-        if($agent === true) {
+        if ($agent === true) {
             event(new TestNotificationEvent($agents));
             return true;
         }
 
-        if(in_array($agent, $agents)) {
-            event(new TestNotificationEvent([ $agent ]));
+        if (in_array($agent, $agents)) {
+            event(new TestNotificationEvent([$agent]));
             return true;
         }
 
@@ -183,14 +205,14 @@ class SettingsHelper {
             'telegram_chat_id' => SettingsHelper::get('telegram_chat_id')->value,
         ];
 
-        foreach($settings as $key => $value) {
+        foreach ($settings as $key => $value) {
             $key = 'integrations.' . $key;
 
-            if($value === "") {
+            if ($value === "") {
                 $value = null;
             }
 
-            config()->set([ $key => $value ]);
+            config()->set([$key => $value]);
         }
     }
 }

app/Helpers/SpeedtestHelper.php

@@ -2,7 +2,9 @@
 
 namespace App\Helpers;
 
-use App\Speedtest;
+use App\Interfaces\SpeedtestProvider;
+use App\Models\Speedtest;
+use App\Utils\OoklaTester;
 use Carbon\Carbon;
 use Exception;
 use Henrywhitaker3\Healthchecks\Healthchecks;
@@ -13,7 +15,8 @@ use Illuminate\Support\Facades\Log;
 use InvalidArgumentException;
 use JsonException;
 
-class SpeedtestHelper {
+class SpeedtestHelper
+{
 
     /**
      * Runs/processes speedtest output to created a Speedtest object
@@ -21,79 +24,10 @@ class SpeedtestHelper {
      * @param   boolean|string  $output If false, new speedtest runs. If anything else, will try to parse as JSON for speedtest results.
      * @return \App\Speedtest|bool
      */
-    public static function runSpeedtest($output = false, $scheduled = true)
+    public static function runSpeedtest()
     {
-        if($output === false) {
-            $output = SpeedtestHelper::output();
-        }
-
-        try {
-            $output = json_decode($output, true, 512, JSON_THROW_ON_ERROR);
-
-            if(!SpeedtestHelper::checkOutputIsComplete($output)) {
-                $test = false;
-            }
-
-            $test = Speedtest::create([
-                'ping' => $output['ping']['latency'],
-                'download' => SpeedtestHelper::convert($output['download']['bandwidth']),
-                'upload' => SpeedtestHelper::convert($output['upload']['bandwidth']),
-                'server_id' => $output['server']['id'],
-                'server_name' => $output['server']['name'],
-                'server_host' => $output['server']['host'] . ':' . $output['server']['port'],
-                'url' => $output['result']['url'],
-                'scheduled' => $scheduled
-            ]);
-        } catch(JsonException $e) {
-            Log::error('Failed to parse speedtest JSON');
-            Log::error($output);
-            $test = false;
-        } catch(Exception $e) {
-            Log::error($e->getMessage());
-            $test = false;
-        }
-
-        if($test == false) {
-            Speedtest::create([
-                'ping' => 0,
-                'upload' => 0,
-                'download' => 0,
-                'failed' => true,
-                'scheduled' => $scheduled,
-            ]);
-
-            return false;
-        }
-
-        Cache::flush();
-
-        return $test;
-    }
-
-    /**
-     * Gets the output of executing speedtest binary.
-     *
-     * @return boolean|string
-     */
-    public static function output()
-    {
-        $server = SettingsHelper::get('server')['value'];
-
-        $binPath = app_path() . DIRECTORY_SEPARATOR . 'Bin' . DIRECTORY_SEPARATOR . 'speedtest';
-        $homePrefix = config('speedtest.home') . ' && ';
-
-        if($server != '' && $server != false) {
-            $server = explode(',', $server);
-            $server = $server[array_rand($server)];
-            if($server == false) {
-                Log::error('Speedtest server undefined');
-                return false;
-            }
-
-            return shell_exec($homePrefix . $binPath . ' -f json -s ' . $server);
-        }
-
-        return shell_exec($homePrefix . $binPath . ' -f json');
+        $tester = app()->make(SpeedtestProvider::class);
+        return $tester->run();
     }
 
     /**
@@ -105,10 +39,10 @@ class SpeedtestHelper {
     {
         $t = Carbon::now()->subDay();
         $s = Speedtest::select(DB::raw('AVG(ping) as ping, AVG(download) as download, AVG(upload) as upload'))
-                      ->where('created_at', '>=', $t)
-                      ->where('failed', false)
-                      ->first()
-                      ->toArray();
+            ->where('created_at', '>=', $t)
+            ->where('failed', false)
+            ->first()
+            ->toArray();
 
         return $s;
     }
@@ -119,8 +53,9 @@ class SpeedtestHelper {
      * @param   int|float   $bytes
      * @return int|float
      */
-    public static function convert($bytes) {
-        return ( $bytes * 8 ) / 1000000;
+    public static function convert($bytes)
+    {
+        return ($bytes * 8) / 1000000;
     }
 
     /**
@@ -132,7 +67,7 @@ class SpeedtestHelper {
     {
         $data = Speedtest::latest()->get();
 
-        if($data->isEmpty()) {
+        if ($data->isEmpty()) {
             return false;
         }
 
@@ -152,7 +87,7 @@ class SpeedtestHelper {
         $val = (float)$input[0];
         $unit = explode('/', $input[1])[0];
 
-        switch($unit) {
+        switch ($unit) {
             case 'Mbyte':
                 $val = $val * 8;
                 break;
@@ -173,86 +108,6 @@ class SpeedtestHelper {
         ];
     }
 
-    /**
-     * Checks that the speedtest JSON output is complete/valid
-     *
-     * @param array $output
-     * @return boolean
-     */
-    public static function checkOutputIsComplete($output)
-    {
-        /**
-         * Array of indexes that must exist in $output
-         */
-        $checks = [
-            'type' => 'result',
-            'download' => [ 'bandwidth' => '*' ],
-            'upload' => [ 'bandwidth' => '*' ],
-            'ping' => [ 'latency' => '*' ],
-            'server' => [
-                'id' => '*',
-                'name' => '*',
-                'host' => '*',
-                'port' => '*'
-            ],
-            'result' => [
-                'url' => '*'
-            ],
-        ];
-        /**
-         * Array of indexes that must not exist
-         */
-        $checkMissing = [
-            'type' => 'error'
-        ];
-
-        foreach($checks as $key => $value) {
-            if(!isset($output[$key])) {
-                return false;
-            }
-        }
-
-        return true;
-    }
-
-    /**
-     * Get a percentage rate of failure by days
-     *
-     * @param integer $days number of days to get rate for
-     * @return integer percentage fail rate
-     */
-    public static function failureRate(int $days)
-    {
-        $ttl = Carbon::now()->addDays(1);
-        $rate = Cache::remember('failure-rate-' . $days, $ttl, function () use ($days) {
-            $range = [
-                Carbon::today()
-            ];
-            for($i = 0; $i < ($days - 1); $i++) {
-                $prev = end($range);
-                $new = $prev->copy()->subDays(1);
-                array_push($range, $new);
-            }
-
-            $rate = [];
-
-            foreach($range as $day) {
-                $success = Speedtest::select(DB::raw('COUNT(id) as rate'))->whereDate('created_at', $day)->where('failed', false)->get()[0]['rate'];
-                $fail = Speedtest::select(DB::raw('COUNT(id) as rate'))->whereDate('created_at', $day)->where('failed', true)->get()[0]['rate'];
-
-                array_push($rate, [
-                    'date' => $day->toDateString(),
-                    'success' => $success,
-                    'failure' => $fail,
-                ]);
-            }
-
-            return array_reverse($rate);
-        });
-
-        return $rate;
-    }
-
     /**
      * Create a backup of the SQLite database
      *
@@ -260,14 +115,14 @@ class SpeedtestHelper {
      */
     public static function dbBackup()
     {
-        if(env('DB_CONNECTION') === 'sqlite') {
-            if(env('DB_DATABASE') !== null) {
+        if (env('DB_CONNECTION') === 'sqlite') {
+            if (env('DB_DATABASE') !== null) {
                 $current = env('DB_DATABASE');
                 try {
-                    if(File::copy($current, $current . '.bak')) {
+                    if (File::copy($current, $current . '.bak')) {
                         return true;
                     }
-                }catch(Exception $e) {
+                } catch (Exception $e) {
                     return false;
                 }
             }
@@ -289,8 +144,8 @@ class SpeedtestHelper {
 
         SpeedtestHelper::dbBackup();
 
-        if(sizeof(Speedtest::whereNotNull('id')->get()) > 0) {
-            if(Speedtest::whereNotNull('id')->delete()) {
+        if (sizeof(Speedtest::whereNotNull('id')->get()) > 0) {
+            if (Speedtest::whereNotNull('id')->delete()) {
                 return [
                     'success' => true,
                 ];
@@ -311,31 +166,31 @@ class SpeedtestHelper {
      */
     public static function testIsLowerThanThreshold(String $type, Speedtest $test)
     {
-        if($type == 'percentage') {
+        if ($type == 'percentage') {
             $avg = Speedtest::select(DB::raw('AVG(ping) as ping, AVG(download) as download, AVG(upload) as upload'))
-                        ->where('failed', false)
-                        ->get()
-                        ->toArray()[0];
+                ->where('failed', false)
+                ->get()
+                ->toArray()[0];
 
             $threshold = SettingsHelper::get('threshold_alert_percentage')->value;
 
-            if($threshold == '') {
+            if ($threshold == '') {
                 return [];
             }
 
             $errors = [];
 
-            foreach($avg as $key => $value) {
-                if($key == 'ping') {
-                    $threshold = (float)$value * (1 + ( $threshold / 100 ));
+            foreach ($avg as $key => $value) {
+                if ($key == 'ping') {
+                    $threshold = (float)$value * (1 + ($threshold / 100));
 
-                    if($test->$key > $threshold) {
+                    if ($test->$key > $threshold) {
                         array_push($errors, $key);
                     }
-                } else  {
-                    $threshold = (float)$value * (1 - ( $threshold / 100 ));
+                } else {
+                    $threshold = (float)$value * (1 - ($threshold / 100));
 
-                    if($test->$key < $threshold) {
+                    if ($test->$key < $threshold) {
                         array_push($errors, $key);
                     }
                 }
@@ -344,7 +199,7 @@ class SpeedtestHelper {
             return $errors;
         }
 
-        if($type == 'absolute') {
+        if ($type == 'absolute') {
             $thresholds = [
                 'download' => SettingsHelper::get('threshold_alert_absolute_download')->value,
                 'upload' => SettingsHelper::get('threshold_alert_absolute_upload')->value,
@@ -353,17 +208,17 @@ class SpeedtestHelper {
 
             $errors = [];
 
-            foreach($thresholds as $key => $value) {
-                if($value == '') {
+            foreach ($thresholds as $key => $value) {
+                if ($value == '') {
                     continue;
                 }
 
-                if($key == 'ping') {
-                    if($test->$key > $value) {
+                if ($key == 'ping') {
+                    if ($test->$key > $value) {
                         array_push($errors, $key);
                     }
                 } else {
-                    if($test->$key < $value) {
+                    if ($test->$key < $value) {
                         array_push($errors, $key);
                     }
                 }
@@ -374,4 +229,42 @@ class SpeedtestHelper {
 
         throw new InvalidArgumentException();
     }
+
+    /**
+     * Get a percentage rate of failure by days
+     *
+     * @param integer $days number of days to get rate for
+     * @return integer percentage fail rate
+     */
+    public static function failureRate(int $days)
+    {
+        $ttl = Carbon::now()->addDays(1);
+        $rate = Cache::remember('failure-rate-' . $days, $ttl, function () use ($days) {
+            $range = [
+                Carbon::today()
+            ];
+            for ($i = 0; $i < ($days - 1); $i++) {
+                $prev = end($range);
+                $new = $prev->copy()->subDays(1);
+                array_push($range, $new);
+            }
+
+            $rate = [];
+
+            foreach ($range as $day) {
+                $success = Speedtest::select(DB::raw('COUNT(id) as rate'))->whereDate('created_at', $day)->where('failed', false)->get()[0]['rate'];
+                $fail = Speedtest::select(DB::raw('COUNT(id) as rate'))->whereDate('created_at', $day)->where('failed', true)->get()[0]['rate'];
+
+                array_push($rate, [
+                    'date' => $day->toDateString(),
+                    'success' => $success,
+                    'failure' => $fail,
+                ]);
+            }
+
+            return array_reverse($rate);
+        });
+
+        return $rate;
+    }
 }

app/Http/Controllers/AuthController.php

@@ -2,14 +2,14 @@
 
 namespace App\Http\Controllers;
 
-use App\Auth\EmailVerification;
-use App\Auth\LoginSession as AuthLoginSession;
+use App\Models\Auth\EmailVerification;
+use App\Models\Auth\LoginSession as AuthLoginSession;
 use App\Helpers\EmailVerificationHelper;
 use Illuminate\Support\Facades\Auth;
 use App\Http\Controllers\Controller;
 use App\LoginSession;
 use App\Rules\CurrentPasswordMatches;
-use App\User;
+use App\Models\User;
 use DateTime;
 use Hash;
 use Illuminate\Support\Facades\Request as RequestFacade;

app/Http/Controllers/HomepageDataController.php

@@ -0,0 +1,35 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\GetFailedSpeedtestData;
+use App\Actions\GetLatestSpeedtestData;
+use App\Actions\GetSpeedtestTimeData;
+use App\Helpers\SettingsHelper;
+use Illuminate\Http\Request;
+use Validator;
+
+class HomepageDataController extends Controller
+{
+    public function __invoke($days)
+    {
+        $validator = Validator::make(
+            ['days' => $days],
+            ['days' => ['required', 'numeric']],
+        );
+
+        if ($validator->fails()) {
+            return response()->json([
+                'method' => 'get speedtests in last x days',
+                'error' => $validator->errors(),
+            ], 422);
+        }
+
+        return [
+            'latest' => run(GetLatestSpeedtestData::class),
+            'time' => run(GetSpeedtestTimeData::class),
+            'fail' => run(GetFailedSpeedtestData::class),
+            'config' => SettingsHelper::getConfig(),
+        ];
+    }
+}

app/Http/Controllers/SettingsController.php

@@ -4,7 +4,7 @@ namespace App\Http\Controllers;
 
 use App\Helpers\SettingsHelper;
 use App\Rules\Cron;
-use App\Setting;
+use App\Models\Setting;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Log;
 use Illuminate\Support\Facades\Validator;
@@ -15,9 +15,9 @@ class SettingsController extends Controller
 {
     public function __construct()
     {
-        if((bool)SettingsHelper::get('auth')->value === true) {
+        if ((bool)SettingsHelper::get('auth')->value === true) {
             $this->middleware('auth:api')
-                 ->except([ 'config' ]);
+                ->except(['config']);
         }
     }
 
@@ -51,21 +51,21 @@ class SettingsController extends Controller
     public function store(Request $request)
     {
         $rule = [
-            'name' => [ 'required', 'string', 'min:1' ],
+            'name' => ['required', 'string', 'min:1'],
         ];
-        if($request->name == 'schedule') {
-            $rule['value'] = [ 'required', new Cron ];
+        if ($request->name == 'schedule') {
+            $rule['value'] = ['required', new Cron];
         }
 
         $validator = Validator::make($request->all(), $rule);
-        if($validator->fails()) {
+        if ($validator->fails()) {
             return response()->json([
                 'method' => 'Store a setting',
                 'error' => $validator->errors()
             ], 422);
         }
 
-        if(!isset($request->value)) {
+        if (!isset($request->value)) {
             $request->value = '';
         }
 
@@ -86,12 +86,12 @@ class SettingsController extends Controller
     public function bulkStore(Request $request)
     {
         $rule = [
-            'data' => [ 'array', 'required' ],
-            'data.*.name' => [ 'string', 'required' ],
+            'data' => ['array', 'required'],
+            'data.*.name' => ['string', 'required'],
         ];
 
         $validator = Validator::make($request->all(), $rule);
-        if($validator->fails()) {
+        if ($validator->fails()) {
             return response()->json([
                 'method' => 'Bulk store a setting',
                 'error' => $validator->errors()
@@ -99,14 +99,14 @@ class SettingsController extends Controller
         }
 
         $settings = [];
-        foreach($request->data as $d) {
-            if(!isset($d['value']) || $d['value'] == null) {
-                    $d['value'] = '';
+        foreach ($request->data as $d) {
+            if (!isset($d['value']) || $d['value'] == null) {
+                $d['value'] = '';
             }
 
-            if($d['name'] == 'speedtest_overview_time') {
-                $ok = [ '00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23' ];
-                if(!in_array($d['value'], $ok)) {
+            if ($d['name'] == 'speedtest_overview_time') {
+                $ok = ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'];
+                if (!in_array($d['value'], $ok)) {
                     return response()->json([
                         'method' => 'Bulk store a setting',
                         'error' => 'Invalid speedtest_overview_time value'
@@ -116,9 +116,9 @@ class SettingsController extends Controller
 
             $setting = SettingsHelper::get($d['name']);
 
-            if($setting == false) {
+            if ($setting == false) {
                 $setting = SettingsHelper::set($d['name'], $d['value']);
-            } else if(SettingsHelper::settingIsEditable($setting->name)) {
+            } else if (SettingsHelper::settingIsEditable($setting->name)) {
                 $setting = SettingsHelper::set($d['name'], $d['value']);
             } else {
                 continue;

app/Http/Controllers/SpeedtestController.php

@@ -2,10 +2,14 @@
 
 namespace App\Http\Controllers;
 
+use App\Actions\GetFailedSpeedtestData;
+use App\Actions\GetLatestSpeedtestData;
+use App\Actions\GetSpeedtestTimeData;
+use App\Actions\QueueSpeedtest;
 use App\Helpers\SettingsHelper;
 use App\Helpers\SpeedtestHelper;
 use App\Jobs\SpeedtestJob;
-use App\Speedtest;
+use App\Models\Speedtest;
 use Carbon\Carbon;
 use Exception;
 use Illuminate\Http\Request;
@@ -18,9 +22,9 @@ class SpeedtestController extends Controller
 {
     public function __construct()
     {
-        if((bool)SettingsHelper::get('auth')->value === true) {
+        if ((bool)SettingsHelper::get('auth')->value === true) {
             $this->middleware('auth:api')
-                 ->only([ 'run', 'delete', 'deleteAll' ]);
+                ->only(['run', 'delete', 'deleteAll']);
         }
     }
 
@@ -32,7 +36,7 @@ class SpeedtestController extends Controller
     public function index()
     {
         $data = Speedtest::orderBy('created_at', 'desc')
-                         ->paginate();
+            ->paginate();
 
         return response()->json([
             'method' => 'index of speedtests',
@@ -49,25 +53,19 @@ class SpeedtestController extends Controller
     public function time($days)
     {
         $rule = [
-            'days' => [ 'required', 'integer' ],
+            'days' => ['required', 'integer'],
         ];
 
-        $validator = Validator::make([ 'days' => $days ], $rule);
+        $validator = Validator::make(['days' => $days], $rule);
 
-        if($validator->fails()) {
+        if ($validator->fails()) {
             return response()->json([
                 'method' => 'get speedtests in last x days',
                 'error' => $validator->errors(),
             ], 422);
         }
 
-        $ttl = Carbon::now()->addDays(1);
-        $data = Cache::remember('speedtest-days-' . $days, $ttl, function () use ($days) {
-            return Speedtest::where('created_at', '>=', Carbon::now()->subDays($days))
-                             ->where('failed', false)
-                             ->orderBy('created_at', 'asc')
-                             ->get();
-        });
+        $data = run(GetSpeedtestTimeData::class, $days);
 
         return response()->json([
             'method' => 'get speedtests in last x days',
@@ -85,19 +83,19 @@ class SpeedtestController extends Controller
     public function fail($days)
     {
         $rule = [
-            'days' => [ 'required', 'integer' ],
+            'days' => ['required', 'integer'],
         ];
 
-        $validator = Validator::make([ 'days' => $days ], $rule);
+        $validator = Validator::make(['days' => $days], $rule);
 
-        if($validator->fails()) {
+        if ($validator->fails()) {
             return response()->json([
                 'method' => 'get speedtests in last x days',
                 'error' => $validator->errors(),
             ], 422);
         }
 
-        $data = SpeedtestHelper::failureRate($days);
+        $data = run(GetFailedSpeedtestData::class, $days);
 
         return response()->json([
             'method' => 'get speedtests in last x days',
@@ -113,21 +111,10 @@ class SpeedtestController extends Controller
      */
     public function latest()
     {
-        $data = SpeedtestHelper::latest();
-        $avg = Speedtest::select(DB::raw('AVG(ping) as ping, AVG(download) as download, AVG(upload) as upload'))
-                        ->where('failed', false)
-                        ->get();
-        $max = Speedtest::select(DB::raw('MAX(ping) as ping, MAX(download) as download, MAX(upload) as upload'))
-                        ->where('failed', false)
-                        ->get();
+        $data = run(GetLatestSpeedtestData::class);
 
-        if($data) {
-            return response()->json([
-                'method' => 'get latest speedtest',
-                'data' => $data,
-                'average' => $avg[0],
-                'max' => $max[0],
-            ], 200);
+        if ($data['data']) {
+            return response()->json($data, 200);
         } else {
             return response()->json([
                 'method' => 'get latest speedtest',
@@ -144,13 +131,13 @@ class SpeedtestController extends Controller
     public function run()
     {
         try {
-            SettingsHelper::loadIntegrationConfig();
-            $data = SpeedtestJob::dispatch(false, config('integrations'));
+            run(QueueSpeedtest::class);
+
             return response()->json([
                 'method' => 'run speedtest',
                 'data' => 'a new speedtest has been added to the queue'
             ], 200);
-        } catch(Exception $e) {
+        } catch (Exception $e) {
             return response()->json([
                 'method' => 'run speedtest',
                 'error' => $e
@@ -167,7 +154,7 @@ class SpeedtestController extends Controller
     {
         $ret = SpeedtestHelper::deleteAll();
 
-        if($ret['success']) {
+        if ($ret['success']) {
             return response()->json([
                 'method' => 'delete all speedtests from the database',
                 'success' => true

app/Http/Middleware/CheckActiveSession.php

@@ -2,7 +2,7 @@
 
 namespace App\Http\Middleware;
 
-use App\Auth\LoginSession;
+use App\Models\Auth\LoginSession;
 use Closure;
 use Exception;
 

app/Interfaces/InfluxDBWrapperInterface.php

@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Interfaces;
+
+use App\Models\Speedtest;
+
+interface InfluxDBWrapperInterface
+{
+    public function testConnection(): bool;
+    public function doesDatabaseExist(string $database): bool;
+    public function createDatabase(string $database): bool;
+    public function store(Speedtest $speedtest): bool;
+}

app/Interfaces/SpeedtestProvider.php

@@ -0,0 +1,11 @@
+<?php
+
+namespace App\Interfaces;
+
+use App\Models\Speedtest;
+
+interface SpeedtestProvider
+{
+    public function run(): Speedtest;
+    public function output();
+}

app/Jobs/SpeedtestJob.php

@@ -6,6 +6,8 @@ use App\Events\SpeedtestCompleteEvent;
 use App\Events\SpeedtestFailedEvent;
 use App\Helpers\SettingsHelper;
 use App\Helpers\SpeedtestHelper;
+use App\Interfaces\SpeedtestProvider;
+use App\Utils\OoklaTester;
 use Exception;
 use Healthcheck;
 use Henrywhitaker3\Healthchecks\Healthchecks;
@@ -34,15 +36,18 @@ class SpeedtestJob implements ShouldQueue
      */
     private $config;
 
+    private SpeedtestProvider $speedtestProvider;
+
     /**
      * Create a new job instance.
      *
      * @return void
      */
-    public function __construct($scheduled = true, $config = [])
+    public function __construct($scheduled = true, $config = [], SpeedtestProvider $speedtestProvider)
     {
         $this->scheduled = $scheduled;
         $this->config = $config;
+        $this->speedtestProvider = $speedtestProvider;
     }
 
     /**
@@ -52,19 +57,19 @@ class SpeedtestJob implements ShouldQueue
      */
     public function handle()
     {
-        if($this->config['healthchecks_enabled'] === true) {
+        if ($this->config['healthchecks_enabled'] === true) {
             $this->healthcheck('start');
         }
-        $output = SpeedtestHelper::output();
-        $speedtest = SpeedtestHelper::runSpeedtest($output, $this->scheduled);
-        if($speedtest == false) {
-            if($this->config['healthchecks_enabled'] === true) {
+        $output = $this->speedtestProvider->output();
+        $speedtest = $this->speedtestProvider->run($output, $this->scheduled);
+        if ($speedtest == false) {
+            if ($this->config['healthchecks_enabled'] === true) {
                 $this->healthcheck('fail');
             }
 
             event(new SpeedtestFailedEvent());
         } else {
-            if($this->config['healthchecks_enabled'] === true) {
+            if ($this->config['healthchecks_enabled'] === true) {
                 $this->healthcheck('success');
             }
 
@@ -82,19 +87,19 @@ class SpeedtestJob implements ShouldQueue
     private function healthcheck(String $method)
     {
         try {
-            $hc = new Healthchecks(SettingsHelper::get('healthchecks_uuid')->value);
-            if($method === 'start') {
+            $hc = new Healthchecks(SettingsHelper::get('healthchecks_uuid')->value, SettingsHelper::get('healthchecks_server_url')->value);
+            if ($method === 'start') {
                 $hc->start();
             }
 
-            if($method === 'success') {
+            if ($method === 'success') {
                 $hc->success();
             }
 
-            if($method === 'fail') {
+            if ($method === 'fail') {
                 $hc->fail();
             }
-        } catch(Exception $e) {
+        } catch (Exception $e) {
             Log::error($e->getMessage());
         }
     }

app/Models/Auth/EmailVerification.php

@@ -1,6 +1,6 @@
 <?php
 
-namespace App\Auth;
+namespace App\Models\Auth;
 
 use Illuminate\Database\Eloquent\Model;
 

app/Models/Auth/LoginSession.php

@@ -1,6 +1,6 @@
 <?php
 
-namespace App\Auth;
+namespace App\Models\Auth;
 
 use Illuminate\Database\Eloquent\Model;
 

app/Models/Setting.php

@@ -1,7 +1,8 @@
 <?php
 
-namespace App;
+namespace App\Models;
 
+use App\Casts\CommaSeparatedArrayCast;
 use App\Helpers\SettingsHelper;
 use Illuminate\Database\Eloquent\Model;
 
@@ -17,4 +18,8 @@ class Setting extends Model
     ];
 
     protected $table = 'settings';
+
+    protected $casts = [
+        'value' => CommaSeparatedArrayCast::class,
+    ];
 }

app/Models/Speedtest.php

@@ -0,0 +1,45 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class Speedtest extends Model
+{
+    use HasFactory;
+
+    /**
+     * The attributes that are mass assignable.
+     *
+     * @var array
+     */
+    protected $fillable = [
+        'ping',
+        'download',
+        'upload',
+        'created_at',
+        'server_id',
+        'server_name',
+        'server_host',
+        'url',
+        'scheduled',
+        'failed',
+    ];
+
+    protected $table = 'speedtests';
+
+    public function formatForInfluxDB()
+    {
+        return [
+            'id' => (int) $this->id,
+            'download' => (float) $this->download,
+            'upload' => (float) $this->upload,
+            'ping' => (float) $this->ping,
+            'server_id' => (int) $this->server_id,
+            'server_host' => $this->server_host,
+            'server_name' => $this->server_name,
+            'scheduled' => (bool) $this->scheduled,
+        ];
+    }
+}

app/Models/User.php

@@ -1,6 +1,6 @@
 <?php
 
-namespace App;
+namespace App\Models;
 
 use Illuminate\Contracts\Auth\MustVerifyEmail;
 use Illuminate\Foundation\Auth\User as Authenticatable;
@@ -107,7 +107,7 @@ class User extends Authenticatable implements JWTSubject
 
     public function setPasswordAttribute($password)
     {
-        if ( !empty($password) ) {
+        if (!empty($password)) {
             $this->attributes['password'] = Hash::make($password);
         }
     }

app/Observers/SpeedtestObserver.php

@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Observers;
+
+use App\Exceptions\InfluxDBNotEnabledException;
+use App\Models\Speedtest;
+use App\Utils\InfluxDB\InfluxDB;
+use Exception;
+use Log;
+
+class SpeedtestObserver
+{
+    /**
+     * Handle the Speedtest "created" event.
+     *
+     * @param  \App\Speedtest  $speedtest
+     * @return void
+     */
+    public function created(Speedtest $speedtest)
+    {
+        try {
+            InfluxDB::connect()
+                ->store($speedtest);
+        } catch (InfluxDBNotEnabledException $e) {
+            // /
+        } catch (Exception $e) {
+            Log::error($e);
+        }
+    }
+}

app/Providers/EventServiceProvider.php

@@ -10,6 +10,8 @@ use App\Listeners\SpeedtestCompleteListener;
 use App\Listeners\SpeedtestFailedListener;
 use App\Listeners\SpeedtestOverviewListener;
 use App\Listeners\TestNotificationListener;
+use App\Observers\SpeedtestObserver;
+use App\Models\Speedtest;
 use Illuminate\Auth\Events\Registered;
 use Illuminate\Auth\Listeners\SendEmailVerificationNotification;
 use Illuminate\Foundation\Support\Providers\EventServiceProvider as ServiceProvider;
@@ -49,6 +51,6 @@ class EventServiceProvider extends ServiceProvider
     {
         parent::boot();
 
-        //
+        Speedtest::observe(SpeedtestObserver::class);
     }
 }

app/Providers/IntegrationsServiceProvider.php

@@ -35,18 +35,20 @@ class IntegrationsServiceProvider extends ServiceProvider
      */
     public function boot()
     {
-        if(File::exists(env('DB_DATABASE'))) {
-            if(Schema::hasTable('settings')) {
+        if (File::exists(env('DB_DATABASE'))) {
+            if (Schema::hasTable('settings')) {
                 $setting = SettingsHelper::get('healthchecks_uuid');
 
-                if($setting !== false) {
+                if ($setting !== false) {
                     try {
-                        App::bind('healthcheck', function() use ($setting) {
-                            return new Healthchecks($setting->value);
+                        SettingsHelper::loadIntegrationConfig();
+
+                        App::bind('healthcheck', function () use ($setting) {
+                            return new Healthchecks($setting->value, SettingsHelper::get('healthchecks_server_url')->value);
                         });
-                    } catch(InvalidUuidStringException $e) {
+                    } catch (InvalidUuidStringException $e) {
                         Log::error('Invalid healthchecks UUID');
-                    } catch(Exception $e) {
+                    } catch (Exception $e) {
                         Log::error($e->getMessage());
                     }
                 }

app/Providers/RouteServiceProvider.php

@@ -15,7 +15,7 @@ class RouteServiceProvider extends ServiceProvider
      *
      * @var string
      */
-    protected $namespace = 'App\Http\Controllers';
+    protected $namespace = null;
 
     /**
      * The path to the "home" route for your application.

app/Providers/SpeedtestServiceProvider.php

@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Providers;
+
+use App\Helpers\SettingsHelper;
+use App\Interfaces\SpeedtestProvider;
+use App\Utils\OoklaTester;
+use File;
+use Illuminate\Support\ServiceProvider;
+use Schema;
+
+class SpeedtestServiceProvider extends ServiceProvider
+{
+    /**
+     * Bootstrap services.
+     *
+     * @return void
+     */
+    public function boot()
+    {
+        $this->app->singleton(
+            SpeedtestProvider::class,
+            function () {
+                return new OoklaTester();
+            }
+        );
+    }
+}

app/Speedtest.php

@@ -1,28 +0,0 @@
-<?php
-
-namespace App;
-
-use Illuminate\Database\Eloquent\Model;
-
-class Speedtest extends Model
-{
-    /**
-     * The attributes that are mass assignable.
-     *
-     * @var array
-     */
-    protected $fillable = [
-        'ping',
-        'download',
-        'upload',
-        'created_at',
-        'server_id',
-        'server_name',
-        'server_host',
-        'url',
-        'scheduled',
-        'failed',
-    ];
-
-    protected $table = 'speedtests';
-}

app/Utils/InfluxDB/InfluxDB.php

@@ -0,0 +1,113 @@
+<?php
+
+namespace App\Utils\InfluxDB;
+
+use App\Exceptions\InfluxDBConnectionErrorException;
+use App\Exceptions\InfluxDBNotEnabledException;
+use App\Helpers\SettingsHelper;
+use App\Models\Speedtest;
+use InfluxDB\Client as Version1;
+use InfluxDB2\Client as Version2;
+use App\Interfaces\InfluxDBWrapperInterface as Client;
+
+class InfluxDB
+{
+    private Client $client;
+
+    private string $database;
+
+    public function __construct(Client $client)
+    {
+        $this->client = $client;
+    }
+
+    /**
+     * Connect to influx db
+     *
+     * @param string $host
+     * @param integer $port
+     * @param string $database
+     * @return InfluxDB
+     */
+    public static function connect()
+    {
+        if (!(bool) SettingsHelper::get('influx_db_enabled')->value) {
+            throw new InfluxDBNotEnabledException();
+        }
+
+        $host = SettingsHelper::get('influx_db_host')->value;
+        $port = SettingsHelper::get('influx_db_port')->value;
+        $username = SettingsHelper::get('influx_db_username')->value;
+        $password = SettingsHelper::get('influx_db_password')->value;
+        $database = SettingsHelper::get('influx_db_database')->value;
+        $version = (int) SettingsHelper::get('influx_db_version')->value;
+
+        $wrapper = $version === 1
+            ? new InfluxDBVersion1Wrapper(
+                new Version1(
+                    str_replace(['http://', 'https://'], '', $host),
+                    $port,
+                    $username,
+                    $password
+                )
+            )
+            : new InfluxDBVersion2Wrapper(
+                new Version2([
+                    'url' => $host . ':' . $port,
+                    'token' => '',
+                ])
+            );
+
+        return (new self($wrapper))->setDatabase($database)
+            ->testConnection();
+    }
+
+    /**
+     * Set the database field
+     *
+     * @param string $database
+     * @return InfluxDB
+     */
+    public function setDatabase(string $database): InfluxDB
+    {
+        $this->database = $database;
+
+        return $this;
+    }
+
+    /**
+     * Test the connection
+     *
+     * @throws InfluxDBConnectionErrorException
+     * @return InfluxDB
+     */
+    public function testConnection(): InfluxDB
+    {
+        if (!$this->client->testConnection()) {
+            throw new InfluxDBConnectionErrorException();
+        }
+
+        if (!$this->doesDatabaseExist()) {
+            $this->createDatabase();
+        }
+
+        return $this;
+    }
+
+    public function doesDatabaseExist(): bool
+    {
+        return $this->client->doesDatabaseExist($this->database);
+    }
+
+    public function createDatabase(): bool
+    {
+        return $this->client->createDatabase($this->database);
+    }
+
+    public function store(Speedtest $speedtest): InfluxDB
+    {
+        $this->client->store($speedtest);
+
+        return $this;
+    }
+}

app/Utils/InfluxDB/InfluxDBVersion1Wrapper.php

@@ -0,0 +1,74 @@
+<?php
+
+namespace App\Utils\InfluxDB;
+
+use App\Interfaces\InfluxDBWrapperInterface;
+use App\Models\Speedtest;
+use Exception;
+use InfluxDB\Client;
+use InfluxDB\Database;
+use InfluxDB\Database\RetentionPolicy;
+use InfluxDB\Point;
+use Log;
+
+class InfluxDBVersion1Wrapper implements InfluxDBWrapperInterface
+{
+    private Client $client;
+    private Database $database;
+
+    public function __construct(Client $client)
+    {
+        $this->client = $client;
+    }
+
+    public function testConnection(): bool
+    {
+        try {
+            $this->client->listDatabases();
+
+            return true;
+        } catch (Exception $e) {
+            Log::error($e);
+
+            return false;
+        }
+    }
+
+    public function doesDatabaseExist(string $database): bool
+    {
+        $this->database = $this->client->selectDB($database);
+
+        return (bool) $this->database->exists();
+    }
+
+    public function createDatabase(string $database): bool
+    {
+        try {
+            $this->database->create(
+                new RetentionPolicy(
+                    'speedtest_retention_policy',
+                    config('services.influxdb.retention'),
+                    1,
+                    true
+                )
+            );
+
+            return true;
+        } catch (Exception $e) {
+            Log::error($e);
+            return false;
+        }
+    }
+
+    public function store(Speedtest $speedtest): bool
+    {
+        return $this->database->writePoints([
+            new Point(
+                'speedtest',
+                null,
+                ['host' => config('services.influxdb.host')],
+                $speedtest->formatForInfluxDB(),
+            )
+        ]);
+    }
+}

app/Utils/InfluxDB/InfluxDBVersion2Wrapper.php

@@ -0,0 +1,37 @@
+<?php
+
+namespace App\Utils\InfluxDB;
+
+use App\Interfaces\InfluxDBWrapperInterface;
+use App\Models\Speedtest;
+use InfluxDB2\Client;
+
+class InfluxDBVersion2Wrapper implements InfluxDBWrapperInterface
+{
+    private Client $client;
+
+    public function __construct(Client $client)
+    {
+        $this->client = $client;
+    }
+
+    public function testConnection(): bool
+    {
+        return $this->client->health()->getStatus() !== 'pass';
+    }
+
+    public function doesDatabaseExist(string $database): bool
+    {
+        return true;
+    }
+
+    public function createDatabase(string $database): bool
+    {
+        return true;
+    }
+
+    public function store(Speedtest $speedtest): bool
+    {
+        return true;
+    }
+}

app/Utils/OoklaTester.php

@@ -0,0 +1,128 @@
+<?php
+
+namespace App\Utils;
+
+use App\Exceptions\SpeedtestFailureException;
+use App\Helpers\SettingsHelper;
+use App\Helpers\SpeedtestHelper;
+use App\Interfaces\SpeedtestProvider;
+use App\Models\Speedtest;
+use Cache;
+use Exception;
+use JsonException;
+use Log;
+
+class OoklaTester implements SpeedtestProvider
+{
+    public function run($output = false, $scheduled = true): Speedtest
+    {
+        if ($output === false) {
+            $output = $this->output();
+        }
+
+        try {
+            $output = json_decode($output, true, 512, JSON_THROW_ON_ERROR);
+
+            if (!$this->isOutputComplete($output)) {
+                $test = false;
+            }
+
+            $test = Speedtest::create([
+                'ping' => $output['ping']['latency'],
+                'download' => SpeedtestHelper::convert($output['download']['bandwidth']),
+                'upload' => SpeedtestHelper::convert($output['upload']['bandwidth']),
+                'server_id' => $output['server']['id'],
+                'server_name' => $output['server']['name'],
+                'server_host' => $output['server']['host'] . ':' . $output['server']['port'],
+                'url' => $output['result']['url'],
+                'scheduled' => $scheduled
+            ]);
+        } catch (JsonException $e) {
+            Log::error('Failed to parse speedtest JSON');
+            Log::error($output);
+            $test = false;
+        } catch (Exception $e) {
+            Log::error($e->getMessage());
+            $test = false;
+        }
+
+        if ($test == false) {
+            Speedtest::create([
+                'ping' => 0,
+                'upload' => 0,
+                'download' => 0,
+                'failed' => true,
+                'scheduled' => $scheduled,
+            ]);
+
+            throw new SpeedtestFailureException(json_encode($output));
+        }
+
+        Cache::flush();
+
+        return $test;
+    }
+
+    public function output()
+    {
+        $server = SettingsHelper::get('server')['value'];
+
+        $binPath = app_path() . DIRECTORY_SEPARATOR . 'Bin' . DIRECTORY_SEPARATOR . 'speedtest';
+        $homePrefix = config('speedtest.home') . ' && ';
+
+        if ($server != '' && $server != false) {
+            $server = explode(',', $server);
+            $server = $server[array_rand($server)];
+            if ($server == false) {
+                Log::error('Speedtest server undefined');
+                return false;
+            }
+
+            return shell_exec($homePrefix . $binPath . ' -f json -s ' . $server);
+        }
+
+        return shell_exec($homePrefix . $binPath . ' -f json');
+    }
+
+    /**
+     * Checks that the speedtest JSON output is complete/valid
+     *
+     * @param array $output
+     * @return boolean
+     */
+    public static function isOutputComplete($output)
+    {
+        /**
+         * Array of indexes that must exist in $output
+         */
+        $checks = [
+            'type' => 'result',
+            'download' => ['bandwidth' => '*'],
+            'upload' => ['bandwidth' => '*'],
+            'ping' => ['latency' => '*'],
+            'server' => [
+                'id' => '*',
+                'name' => '*',
+                'host' => '*',
+                'port' => '*'
+            ],
+            'result' => [
+                'url' => '*'
+            ],
+        ];
+        /**
+         * Array of indexes that must not exist
+         */
+        $checkMissing = [
+            'type' => 'error'
+        ];
+
+        foreach ($checks as $key => $value) {
+            if (!isset($output[$key])) {
+                return false;
+            }
+        }
+
+        return true;
+    }
+}

changelog.json

@@ -1,4 +1,120 @@
 {
+    "1.12.0": [
+        {
+            "description": "Added InfluxDB intergation.",
+            "link": ""
+        }
+    ],
+    "1.11.1": [
+        {
+            "description": "Add option to show/hide columns in the all tests table.",
+            "link": ""
+        },
+        {
+            "description": "Add option to delete failed tests.",
+            "link": ""
+        }
+    ],
+    "1.11.0": [
+        {
+            "description": "Upgrade to Laravel 8.",
+            "link": ""
+        },
+        {
+            "description": "Refactor loads of back-end stuff.",
+            "link": ""
+        },
+        {
+            "description": "Refactor front-end stuff.",
+            "link": ""
+        }
+    ],
+    "1.10.4": [
+        {
+            "description": "Updated dependencies.",
+            "link": ""
+        }
+    ],
+    "1.10.3": [
+        {
+            "description": "Moved stuff into pages.",
+            "link": ""
+        }
+    ],
+    "1.10.2": [
+        {
+            "description": "Added option to disable scheduled tests.",
+            "link": ""
+        }
+    ],
+    "1.10.1": [
+        {
+            "description": "Fixed integrations config being empty causing healthchecks to not run on scheduled tests.",
+            "link": ""
+        }
+    ],
+    "1.10.0": [
+        {
+            "description": "Added automated build for ARM.",
+            "link": ""
+        },
+        {
+            "description": "Updated dependencies.",
+            "link": ""
+        }
+    ],
+    "1.9.10": [
+        {
+            "description": "Laravel will now log into daily files and logs will only be kept for 7 days.",
+            "link": ""
+        }
+    ],
+    "1.9.9": [
+        {
+            "description": "Updated dependencies.",
+            "link": ""
+        }
+    ],
+    "1.9.8": [
+        {
+            "description": "Fixed bug with minimum display setting.",
+            "link": ""
+        }
+    ],
+    "1.9.7": [
+        {
+            "description": "Added option to display minimum values on the top widgets.",
+            "link": ""
+        },
+        {
+            "description": "New general settings section.",
+            "link": ""
+        },
+        {
+            "description": "Updated dependencies.",
+            "link": ""
+        }
+    ],
+    "1.9.6": [
+        {
+            "description": "Clear the cache on restore.",
+            "link": ""
+        },
+        {
+            "description": "Updated dependencies.",
+            "link": ""
+        }
+    ],
+    "1.9.5": [
+        {
+            "description": "Added toggle to show failed tests on graphs.",
+            "link": ""
+        },
+        {
+            "description": "Updated dependencies.",
+            "link": ""
+        }
+    ],
     "1.9.4": [
         {
             "description": "Changed integration config loading.",

composer.json

@@ -10,26 +10,30 @@
     "require": {
         "php": "^7.2.5",
         "doctrine/dbal": "^2.10",
-        "dragonmantank/cron-expression": "^2",
+        "dragonmantank/cron-expression": "^3",
         "fideloper/proxy": "^4.2",
         "fruitcake/laravel-cors": "^2.0",
-        "guzzlehttp/guzzle": "^7.0",
+        "guzzlehttp/guzzle": "^7.0.1",
         "henrywhitaker3/healthchecks-io": "^1.0",
-        "laravel-notification-channels/telegram": "^0.4.0",
-        "laravel/framework": "^7.0",
+        "henrywhitaker3/laravel-actions": "^1.0",
+        "influxdata/influxdb-client-php": "^1.12",
+        "influxdb/influxdb-php": "^1.15",
+        "laravel-notification-channels/telegram": "^0.5.0",
+        "laravel/framework": "^8.0",
         "laravel/slack-notification-channel": "^2.0",
         "laravel/tinker": "^2.0",
-        "laravel/ui": "^2.0",
+        "laravel/ui": "^3.0",
         "tymon/jwt-auth": "^1.0"
     },
     "require-dev": {
         "barryvdh/laravel-ide-helper": "^2.8",
-        "facade/ignition": "^2.0",
+        "brianium/paratest": "^6.2",
+        "facade/ignition": "^2.3.6",
         "fzaninotto/faker": "^1.9.1",
         "mockery/mockery": "^1.3.1",
-        "nunomaduro/collision": "^4.1",
-        "nunomaduro/larastan": "^0.6.2",
-        "phpunit/phpunit": "^8.5"
+        "nunomaduro/collision": "^5.3",
+        "nunomaduro/larastan": "^0.7.0",
+        "phpunit/phpunit": "^9.5"
     },
     "config": {
         "optimize-autoloader": true,
@@ -43,12 +47,10 @@
     },
     "autoload": {
         "psr-4": {
-            "App\\": "app/"
-        },
-        "classmap": [
-            "database/seeds",
-            "database/factories"
-        ]
+            "App\\": "app/",
+            "Database\\Factories\\": "database/factories/",
+            "Database\\Seeders\\": "database/seeders/"
+        }
     },
     "autoload-dev": {
         "psr-4": {

config/app.php

@@ -182,6 +182,7 @@ return [
          * Custom providers...
          */
         App\Providers\IntegrationsServiceProvider::class,
+        App\Providers\SpeedtestServiceProvider::class,
 
     ],
 

config/clockwork.php

@@ -0,0 +1,409 @@
+<?php
+
+return [
+
+    /*
+	|------------------------------------------------------------------------------------------------------------------
+	| Enable Clockwork
+	|------------------------------------------------------------------------------------------------------------------
+	|
+	| Clockwork is enabled by default only when your application is in debug mode. Here you can explicitly enable or
+	| disable Clockwork. When disabled, no data is collected and the api and web ui are inactive.
+	|
+	*/
+
+    'enable' => env('CLOCKWORK_ENABLE', null),
+
+    /*
+	|------------------------------------------------------------------------------------------------------------------
+	| Features
+	|------------------------------------------------------------------------------------------------------------------
+	|
+	| You can enable or disable various Clockwork features here. Some features have additional settings (eg. slow query
+	| threshold for database queries).
+	|
+	*/
+
+    'features' => [
+
+        // Cache usage stats and cache queries including results
+        'cache' => [
+            'enabled' => env('CLOCKWORK_CACHE_ENABLED', true),
+
+            // Collect cache queries including results (high performance impact with a high number of queries)
+            'collect_queries' => env('CLOCKWORK_CACHE_QUERIES', false)
+        ],
+
+        // Database usage stats and queries
+        'database' => [
+            'enabled' => env('CLOCKWORK_DATABASE_ENABLED', true),
+
+            // Collect database queries (high performance impact with a very high number of queries)
+            'collect_queries' => env('CLOCKWORK_DATABASE_COLLECT_QUERIES', true),
+
+            // Collect details of models updates (high performance impact with a lot of model updates)
+            'collect_models_actions' => env('CLOCKWORK_DATABASE_COLLECT_MODELS_ACTIONS', true),
+
+            // Collect details of retrieved models (very high performance impact with a lot of models retrieved)
+            'collect_models_retrieved' => env('CLOCKWORK_DATABASE_COLLECT_MODELS_RETRIEVED', false),
+
+            // Query execution time threshold in miliseconds after which the query will be marked as slow
+            'slow_threshold' => env('CLOCKWORK_DATABASE_SLOW_THRESHOLD'),
+
+            // Collect only slow database queries
+            'slow_only' => env('CLOCKWORK_DATABASE_SLOW_ONLY', false),
+
+            // Detect and report duplicate (N+1) queries
+            'detect_duplicate_queries' => env('CLOCKWORK_DATABASE_DETECT_DUPLICATE_QUERIES', false)
+        ],
+
+        // Dispatched events
+        'events' => [
+            'enabled' => env('CLOCKWORK_EVENTS_ENABLED', true),
+
+            // Ignored events (framework events are ignored by default)
+            'ignored_events' => [
+                // App\Events\UserRegistered::class,
+                // 'user.registered'
+            ],
+        ],
+
+        // Laravel log (you can still log directly to Clockwork with laravel log disabled)
+        'log' => [
+            'enabled' => env('CLOCKWORK_LOG_ENABLED', true)
+        ],
+
+        // Sent notifications
+        'notifications' => [
+            'enabled' => env('CLOCKWORK_NOTIFICATIONS_ENABLED', true),
+        ],
+
+        // Performance metrics
+        'performance' => [
+            // Allow collecting of client metrics. Requires separate clockwork-browser npm package.
+            'client_metrics' => env('CLOCKWORK_PERFORMANCE_CLIENT_METRICS', true)
+        ],
+
+        // Dispatched queue jobs
+        'queue' => [
+            'enabled' => env('CLOCKWORK_QUEUE_ENABLED', true)
+        ],
+
+        // Redis commands
+        'redis' => [
+            'enabled' => env('CLOCKWORK_REDIS_ENABLED', true)
+        ],
+
+        // Routes list
+        'routes' => [
+            'enabled' => env('CLOCKWORK_ROUTES_ENABLED', false)
+        ],
+
+        // Rendered views
+        'views' => [
+            'enabled' => env('CLOCKWORK_VIEWS_ENABLED', true),
+
+            // Collect views including view data (high performance impact with a high number of views)
+            'collect_data' => env('CLOCKWORK_VIEWS_COLLECT_DATA', false),
+
+            // Use Twig profiler instead of Laravel events for apps using laravel-twigbridge (more precise, but does
+            // not support collecting view data)
+            'use_twig_profiler' => env('CLOCKWORK_VIEWS_USE_TWIG_PROFILER', false)
+        ]
+
+    ],
+
+    /*
+	|------------------------------------------------------------------------------------------------------------------
+	| Enable web UI
+	|------------------------------------------------------------------------------------------------------------------
+	|
+	| Clockwork comes with a web UI accessibla via http://your.app/clockwork. Here you can enable or disable this
+	| feature. You can also set a custom path for the web UI.
+	|
+	*/
+
+    'web' => env('CLOCKWORK_WEB', true),
+
+    /*
+	|------------------------------------------------------------------------------------------------------------------
+	| Enable toolbar
+	|------------------------------------------------------------------------------------------------------------------
+	|
+	| Clockwork can show a toolbar with basic metrics on all responses. Here you can enable or disable this feature.
+	| Requires a separate clockwork-browser npm library.
+	|
+	*/
+
+    'toolbar' => env('CLOCKWORK_TOOLBAR', false),
+
+    /*
+	|------------------------------------------------------------------------------------------------------------------
+	| HTTP requests collection
+	|------------------------------------------------------------------------------------------------------------------
+	|
+	| Clockwork collects data about HTTP requests to your app. Here you can choose which requests should be collected.
+	|
+	*/
+
+    'requests' => [
+        // With on-demand mode enabled, Clockwork will only profile requests when the browser extension is open or you
+        // manually pass a "clockwork-profile" cookie or get/post data key.
+        // Optionally you can specify a "secret" that has to be passed as the value to enable profiling.
+        'on_demand' => env('CLOCKWORK_REQUESTS_ON_DEMAND', false),
+
+        // Collect only errors (requests with HTTP 4xx and 5xx responses)
+        'errors_only' => env('CLOCKWORK_REQUESTS_ERRORS_ONLY', false),
+
+        // Response time threshold in miliseconds after which the request will be marked as slow
+        'slow_threshold' => env('CLOCKWORK_REQUESTS_SLOW_THRESHOLD'),
+
+        // Collect only slow requests
+        'slow_only' => env('CLOCKWORK_REQUESTS_SLOW_ONLY', false),
+
+        // Sample the collected requests (eg. set to 100 to collect only 1 in 100 requests)
+        'sample' => env('CLOCKWORK_REQUESTS_SAMPLE', false),
+
+        // List of URIs that should not be collected
+        'except' => [
+            '/horizon/.*', // Laravel Horizon requests
+            '/telescope/.*', // Laravel Telescope requests
+            '/files/*'
+        ],
+
+        // List of URIs that should be collected, any other URI will not be collected if not empty
+        'only' => [
+            // '/api/.*'
+        ],
+
+        // Don't collect OPTIONS requests, mostly used in the CSRF pre-flight requests and are rarely of interest
+        'except_preflight' => env('CLOCKWORK_REQUESTS_EXCEPT_PREFLIGHT', true)
+    ],
+
+    /*
+	|------------------------------------------------------------------------------------------------------------------
+	| Artisan commands collection
+	|------------------------------------------------------------------------------------------------------------------
+	|
+	| Clockwork can collect data about executed artisan commands. Here you can enable and configure which commands
+	| should be collected.
+	|
+	*/
+
+    'artisan' => [
+        // Enable or disable collection of executed Artisan commands
+        'collect' => env('CLOCKWORK_ARTISAN_COLLECT', false),
+
+        // List of commands that should not be collected (built-in commands are not collected by default)
+        'except' => [
+            // 'inspire'
+        ],
+
+        // List of commands that should be collected, any other command will not be collected if not empty
+        'only' => [
+            // 'inspire'
+        ],
+
+        // Enable or disable collection of command output
+        'collect_output' => env('CLOCKWORK_ARTISAN_COLLECT_OUTPUT', false),
+
+        // Enable or disable collection of built-in Laravel commands
+        'except_laravel_commands' => env('CLOCKWORK_ARTISAN_EXCEPT_LARAVEL_COMMANDS', true)
+    ],
+
+    /*
+	|------------------------------------------------------------------------------------------------------------------
+	| Queue jobs collection
+	|------------------------------------------------------------------------------------------------------------------
+	|
+	| Clockwork can collect data about executed queue jobs. Here you can enable and configure which queue jobs should
+	| be collected.
+	|
+	*/
+
+    'queue' => [
+        // Enable or disable collection of executed queue jobs
+        'collect' => env('CLOCKWORK_QUEUE_COLLECT', false),
+
+        // List of queue jobs that should not be collected
+        'except' => [
+            // App\Jobs\ExpensiveJob::class
+        ],
+
+        // List of queue jobs that should be collected, any other queue job will not be collected if not empty
+        'only' => [
+            // App\Jobs\BuggyJob::class
+        ]
+    ],
+
+    /*
+	|------------------------------------------------------------------------------------------------------------------
+	| Tests collection
+	|------------------------------------------------------------------------------------------------------------------
+	|
+	| Clockwork can collect data about executed tests. Here you can enable and configure which tests should be
+	| collected.
+	|
+	*/
+
+    'tests' => [
+        // Enable or disable collection of ran tests
+        'collect' => env('CLOCKWORK_TESTS_COLLECT', false),
+
+        // List of tests that should not be collected
+        'except' => [
+            // Tests\Unit\ExampleTest::class
+        ]
+    ],
+
+    /*
+	|------------------------------------------------------------------------------------------------------------------
+	| Enable data collection when Clockwork is disabled
+	|------------------------------------------------------------------------------------------------------------------
+	|
+	| You can enable this setting to collect data even when Clockwork is disabled. Eg. for future analysis.
+	|
+	*/
+
+    'collect_data_always' => env('CLOCKWORK_COLLECT_DATA_ALWAYS', false),
+
+    /*
+	|------------------------------------------------------------------------------------------------------------------
+	| Metadata storage
+	|------------------------------------------------------------------------------------------------------------------
+	|
+	| Configure how is the metadata collected by Clockwork stored. Two options are available:
+	|   - files - A simple fast storage implementation storing data in one-per-request files.
+	|   - sql - Stores requests in a sql database. Supports MySQL, Postgresql, Sqlite and requires PDO.
+	|
+	*/
+
+    'storage' => env('CLOCKWORK_STORAGE', 'files'),
+
+    // Path where the Clockwork metadata is stored
+    'storage_files_path' => env('CLOCKWORK_STORAGE_FILES_PATH', storage_path('clockwork')),
+
+    // Compress the metadata files using gzip, trading a little bit of performance for lower disk usage
+    'storage_files_compress' => env('CLOCKWORK_STORAGE_FILES_COMPRESS', false),
+
+    // SQL database to use, can be a name of database configured in database.php or a path to a sqlite file
+    'storage_sql_database' => env('CLOCKWORK_STORAGE_SQL_DATABASE', storage_path('clockwork.sqlite')),
+
+    // SQL table name to use, the table is automatically created and udpated when needed
+    'storage_sql_table' => env('CLOCKWORK_STORAGE_SQL_TABLE', 'clockwork'),
+
+    // Maximum lifetime of collected metadata in minutes, older requests will automatically be deleted, false to disable
+    'storage_expiration' => env('CLOCKWORK_STORAGE_EXPIRATION', 60 * 24 * 7),
+
+    /*
+	|------------------------------------------------------------------------------------------------------------------
+	| Authentication
+	|------------------------------------------------------------------------------------------------------------------
+	|
+	| Clockwork can be configured to require authentication before allowing access to the collected data. This might be
+	| useful when the application is publicly accessible. Setting to true will enable a simple authentication with a
+	| pre-configured password. You can also pass a class name of a custom implementation.
+	|
+	*/
+
+    'authentication' => env('CLOCKWORK_AUTHENTICATION', false),
+
+    // Password for the simple authentication
+    'authentication_password' => env('CLOCKWORK_AUTHENTICATION_PASSWORD', 'VerySecretPassword'),
+
+    /*
+	|------------------------------------------------------------------------------------------------------------------
+	| Stack traces collection
+	|------------------------------------------------------------------------------------------------------------------
+	|
+	| Clockwork can collect stack traces for log messages and certain data like database queries. Here you can set
+	| whether to collect stack traces, limit the number of collected frames and set further configuration. Collecting
+	| long stack traces considerably increases metadata size.
+	|
+	*/
+
+    'stack_traces' => [
+        // Enable or disable collecting of stack traces
+        'enabled' => env('CLOCKWORK_STACK_TRACES_ENABLED', true),
+
+        // Limit the number of frames to be collected
+        'limit' => env('CLOCKWORK_STACK_TRACES_LIMIT', 10),
+
+        // List of vendor names to skip when determining caller, common vendors are automatically added
+        'skip_vendors' => [
+            // 'phpunit'
+        ],
+
+        // List of namespaces to skip when determining caller
+        'skip_namespaces' => [
+            // 'Laravel'
+        ],
+
+        // List of class names to skip when determining caller
+        'skip_classes' => [
+            // App\CustomLog::class
+        ]
+
+    ],
+
+    /*
+	|------------------------------------------------------------------------------------------------------------------
+	| Serialization
+	|------------------------------------------------------------------------------------------------------------------
+	|
+	| Clockwork serializes the collected data to json for storage and transfer. Here you can configure certain aspects
+	| of serialization. Serialization has a large effect on the cpu time and memory usage.
+	|
+	*/
+
+    // Maximum depth of serialized multi-level arrays and objects
+    'serialization_depth' => env('CLOCKWORK_SERIALIZATION_DEPTH', 10),
+
+    // A list of classes that will never be serialized (eg. a common service container class)
+    'serialization_blackbox' => [
+        \Illuminate\Container\Container::class,
+        \Illuminate\Foundation\Application::class,
+        \Laravel\Lumen\Application::class
+    ],
+
+    /*
+	|------------------------------------------------------------------------------------------------------------------
+	| Register helpers
+	|------------------------------------------------------------------------------------------------------------------
+	|
+	| Clockwork comes with a "clock" global helper function. You can use this helper to quickly log something and to
+	| access the Clockwork instance.
+	|
+	*/
+
+    'register_helpers' => env('CLOCKWORK_REGISTER_HELPERS', true),
+
+    /*
+	|------------------------------------------------------------------------------------------------------------------
+	| Send Headers for AJAX request
+	|------------------------------------------------------------------------------------------------------------------
+	|
+	| When trying to collect data the AJAX method can sometimes fail if it is missing required headers. For example, an
+	| API might require a version number using Accept headers to route the HTTP request to the correct codebase.
+	|
+	*/
+
+    'headers' => [
+        // 'Accept' => 'application/vnd.com.whatever.v1+json',
+    ],
+
+    /*
+	|------------------------------------------------------------------------------------------------------------------
+	| Server-Timing
+	|------------------------------------------------------------------------------------------------------------------
+	|
+	| Clockwork supports the W3C Server Timing specification, which allows for collecting a simple performance metrics
+	| in a cross-browser way. Eg. in Chrome, your app, database and timeline event timings will be shown in the Dev
+	| Tools network tab. This setting specifies the max number of timeline events that will be sent. Setting to false
+	| will disable the feature.
+	|
+	*/
+
+    'server_timing' => env('CLOCKWORK_SERVER_TIMING', 10)
+
+];

config/logging.php

@@ -37,7 +37,7 @@ return [
     'channels' => [
         'stack' => [
             'driver' => 'stack',
-            'channels' => ['single'],
+            'channels' => ['daily'],
             'ignore_exceptions' => false,
         ],
 
@@ -51,7 +51,7 @@ return [
             'driver' => 'daily',
             'path' => storage_path('logs/laravel.log'),
             'level' => 'debug',
-            'days' => 14,
+            'days' => 7,
         ],
 
         'slack' => [

config/services.php

@@ -34,4 +34,9 @@ return [
         'token' => env('TELEGRAM_BOT_TOKEN', 'YOUR BOT TOKEN HERE')
     ],
 
+    'influxdb' => [
+        'retention' => env('INFLUXDB_RETENTION', '30d'),
+        'host' => env('INFLUXDB_HOST_TAG', 'speedtest'),
+    ],
+
 ];

config/speedtest.php

@@ -7,7 +7,7 @@ return [
     |--------------------------------------------------------------------------
     */
 
-    'version' => '1.9.4',
+    'version' => '1.12.0',
 
     /*
     |--------------------------------------------------------------------------

database/.gitignore

@@ -1,3 +1,4 @@
 *.sqlite
 *.sqlite-journal
 *.bak
+*.db_test*

database/factories/SpeedtestFactory.php

@@ -0,0 +1,32 @@
+<?php
+
+namespace Database\Factories;
+
+use App\Models\Speedtest;
+use Illuminate\Database\Eloquent\Factories\Factory;
+
+class SpeedtestFactory extends Factory
+{
+    /**
+     * The name of the factory's corresponding model.
+     *
+     * @var string
+     */
+    protected $model = Speedtest::class;
+
+    /**
+     * Define the model's default state.
+     *
+     * @return array
+     */
+    public function definition()
+    {
+        return [
+            'download' => rand(15, 900),
+            'upload' => rand(15, 900),
+            'ping' => rand(1, 25),
+            'scheduled' => (bool) rand(0, 1),
+            'failed' => false,
+        ];
+    }
+}

database/factories/UserFactory.php

@@ -2,7 +2,7 @@
 
 /** @var \Illuminate\Database\Eloquent\Factory $factory */
 
-use App\User;
+use App\Models\User;
 use Faker\Generator as Faker;
 use Illuminate\Support\Str;
 

database/migrations/2014_10_12_000000_create_users_table.php

@@ -1,6 +1,6 @@
 <?php
 
-use App\User;
+use App\Models\User;
 use Illuminate\Database\Migrations\Migration;
 use Illuminate\Database\Schema\Blueprint;
 use Illuminate\Support\Facades\Schema;

database/migrations/2020_05_18_211812_create_settings_table.php

@@ -1,7 +1,7 @@
 <?php
 
 use App\Helpers\SettingsHelper;
-use App\Setting;
+use App\Models\Setting;
 use Illuminate\Database\Migrations\Migration;
 use Illuminate\Database\Schema\Blueprint;
 use Illuminate\Support\Facades\Schema;

database/migrations/2020_06_21_171849_add_notifications_settings.php

@@ -1,6 +1,6 @@
 <?php
 
-use App\Setting;
+use App\Models\Setting;
 use Illuminate\Database\Migrations\Migration;
 use Illuminate\Database\Schema\Blueprint;
 use Illuminate\Support\Facades\Schema;

database/migrations/2020_07_06_105930_add_graph_settings.php

@@ -1,6 +1,6 @@
 <?php
 
-use App\Setting;
+use App\Models\Setting;
 use Illuminate\Database\Migrations\Migration;
 use Illuminate\Database\Schema\Blueprint;
 use Illuminate\Support\Facades\Schema;

database/migrations/2020_07_07_215412_add_notification_agent_settings.php

@@ -1,7 +1,7 @@
 <?php
 
 use App\Helpers\SettingsHelper;
-use App\Setting;
+use App\Models\Setting;
 use Illuminate\Database\Migrations\Migration;
 use Illuminate\Database\Schema\Blueprint;
 use Illuminate\Support\Facades\Schema;

database/migrations/2020_08_12_123941_add_healthchecks_settings.php

@@ -1,7 +1,7 @@
 <?php
 
 use App\Helpers\SettingsHelper;
-use App\Setting;
+use App\Models\Setting;
 use Illuminate\Database\Migrations\Migration;
 use Illuminate\Database\Schema\Blueprint;
 use Illuminate\Support\Facades\Schema;

database/migrations/2020_08_21_133343_add_authentication_settings.php

@@ -1,7 +1,7 @@
 <?php
 
 use App\Helpers\SettingsHelper;
-use App\Setting;
+use App\Models\Setting;
 use Illuminate\Database\Migrations\Migration;
 use Illuminate\Database\Schema\Blueprint;
 use Illuminate\Support\Facades\Schema;

database/migrations/2020_08_21_204656_add_conditional_notifications_settings.php

@@ -1,7 +1,7 @@
 <?php
 
 use App\Helpers\SettingsHelper;
-use App\Setting;
+use App\Models\Setting;
 use Illuminate\Database\Migrations\Migration;
 use Illuminate\Database\Schema\Blueprint;
 use Illuminate\Support\Facades\Schema;

database/migrations/2020_08_28_192136_add_show_failed_tests_setting.php

@@ -0,0 +1,38 @@
+<?php
+
+use App\Helpers\SettingsHelper;
+use App\Models\Setting;
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class AddShowFailedTestsSetting extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        if(!SettingsHelper::get('show_failed_tests_on_graph')) {
+            Setting::create([
+                'name' => 'show_failed_tests_on_graph',
+                'value' => true,
+                'description' => 'If enabled, failed tests will appear on the graphs as 0.'
+            ]);
+        }
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Setting::whereIn('name', [
+            'show_failed_tests_on_graph',
+        ])->delete();
+    }
+}

database/migrations/2020_09_10_231121_add_widget_card_settings.php

@@ -0,0 +1,56 @@
+<?php
+
+use App\Helpers\SettingsHelper;
+use App\Models\Setting;
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class AddWidgetCardSettings extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        if (!SettingsHelper::get('show_average')) {
+            Setting::create([
+                'name' => 'show_average',
+                'value' => true,
+                'description' => 'If enabled, the average value for speedtests will be shown in the widgets.'
+            ]);
+        }
+
+        if (!SettingsHelper::get('show_max')) {
+            Setting::create([
+                'name' => 'show_max',
+                'value' => true,
+                'description' => 'If enabled, the maximum value for speedtests will be shown in the widgets.'
+            ]);
+        }
+
+        if (!SettingsHelper::get('show_min')) {
+            Setting::create([
+                'name' => 'show_min',
+                'value' => true,
+                'description' => 'If enabled, the minimum value for speedtests will be shown in the widgets.'
+            ]);
+        }
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Setting::whereIn('name', [
+            'show_average',
+            'show_max',
+            'show_min',
+        ])->delete();
+    }
+}

database/migrations/2020_12_19_211232_add_schedule_enabled_setting.php

@@ -0,0 +1,38 @@
+<?php
+
+use App\Helpers\SettingsHelper;
+use App\Models\Setting;
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class AddScheduleEnabledSetting extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        if (!SettingsHelper::get('schedule_enabled')) {
+            Setting::create([
+                'name' => 'schedule_enabled',
+                'value' => true,
+                'description' => 'Enable/disable the schedule worker'
+            ]);
+        }
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Setting::whereIn('name', [
+            'schedule_enabled',
+        ])->delete();
+    }
+}

database/migrations/2020_12_19_234248_add_app_name_setting.php

@@ -0,0 +1,38 @@
+<?php
+
+use App\Helpers\SettingsHelper;
+use App\Models\Setting;
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class AddAppNameSetting extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        if (!SettingsHelper::get('app_name')) {
+            Setting::create([
+                'name' => 'app_name',
+                'value' => 'Speedtest Tracker',
+                'description' => 'Set a custom app name'
+            ]);
+        }
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Setting::whereIn('name', [
+            'app_name',
+        ])->delete();
+    }
+}

database/migrations/2020_12_20_001345_add_custom_healthchecks_setting.php

@@ -0,0 +1,38 @@
+<?php
+
+use App\Helpers\SettingsHelper;
+use App\Models\Setting;
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class AddCustomHealthchecksSetting extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        if (!SettingsHelper::get('healthchecks_server_url')) {
+            Setting::create([
+                'name' => 'healthchecks_server_url',
+                'value' => 'https://hc-ping.com/',
+                'description' => 'The URL of the healthchecks.io server. Change this to use a self-hosted server.'
+            ]);
+        }
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Setting::whereIn('name', [
+            'healthchecks_server_url',
+        ])->delete();
+    }
+}

database/migrations/2021_03_07_101259_add_speedtest_provider_setting.php

@@ -0,0 +1,38 @@
+<?php
+
+use App\Helpers\SettingsHelper;
+use App\Models\Setting;
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class AddSpeedtestProviderSetting extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        if (!SettingsHelper::get('healthchecks_server_url')) {
+            Setting::create([
+                'name' => 'speedtest_provider',
+                'value' => 'ookla',
+                'description' => 'The provider/package used to run speedtests.'
+            ]);
+        }
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Setting::whereIn('name', [
+            'speedtest_provider',
+        ])->delete();
+    }
+}

database/migrations/2021_03_07_121716_update_speedtest_server_settings_text.php

@@ -0,0 +1,37 @@
+<?php
+
+use App\Models\Setting;
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class UpdateSpeedtestServerSettingsText extends Migration
+{
+    private Setting $setting;
+
+    public function __construct()
+    {
+        $this->setting = Setting::where('name', 'server')->first();
+    }
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        $this->setting->description = '<p class="d-inline">Comma-separated list of speedtest.net server IDs picked randomly. Leave blank to use default settings.</p>;';
+        $this->setting->save();
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        $this->setting->description = '<p class="d-inline">Comma-separated list of speedtest.net servers picked randomly. Leave blank to use default settings.</p>';
+        $this->setting->save();
+    }
+}

database/migrations/2021_04_10_082758_add_visible_columns_setting.php

@@ -0,0 +1,40 @@
+<?php
+
+use App\Helpers\SettingsHelper;
+use App\Models\Setting;
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class AddVisibleColumnsSetting extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        if (!SettingsHelper::get('visible_columns')) {
+            Setting::create([
+                'name' => 'visible_columns',
+                'value' => [
+                    'id', 'created_at', 'download', 'upload', 'ping'
+                ],
+                'description' => 'Choose and order the columns shown in the "All Tests" table.'
+            ]);
+        }
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Setting::whereIn('name', [
+            'visible_columns',
+        ])->delete();
+    }
+}

database/migrations/2021_04_10_102320_add_hidden_columns_setting.php

@@ -0,0 +1,40 @@
+<?php
+
+use App\Helpers\SettingsHelper;
+use App\Models\Setting;
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class AddHiddenColumnsSetting extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        if (!SettingsHelper::get('hidden_columns')) {
+            Setting::create([
+                'name' => 'hidden_columns',
+                'value' => [
+                    'server_id', 'server_name', 'server_host', 'url', 'scheduled',
+                ],
+                'description' => 'Columns hidden from the "All Tests" table.'
+            ]);
+        }
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Setting::whereIn('name', [
+            'hidden_columns',
+        ])->delete();
+    }
+}

database/migrations/2021_04_10_182503_add_influx_db_settings.php

@@ -0,0 +1,92 @@
+<?php
+
+use App\Helpers\SettingsHelper;
+use App\Models\Setting;
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class AddInfluxDbSettings extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        if (!SettingsHelper::get('influx_db_enabled')) {
+            Setting::create([
+                'name' => 'influx_db_enabled',
+                'value' => false,
+                'description' => 'Enable the InfluxDB integration for speedtests.'
+            ]);
+        }
+
+        if (!SettingsHelper::get('influx_db_host')) {
+            Setting::create([
+                'name' => 'influx_db_host',
+                'value' => '',
+                'description' => 'InfluxDB hostname, include the protocol (http:// or https://).'
+            ]);
+        }
+
+        if (!SettingsHelper::get('influx_db_port')) {
+            Setting::create([
+                'name' => 'influx_db_port',
+                'value' => '',
+                'description' => 'InfluxDB port'
+            ]);
+        }
+
+        if (!SettingsHelper::get('influx_db_database')) {
+            Setting::create([
+                'name' => 'influx_db_database',
+                'value' => '',
+                'description' => 'InfluxDB database'
+            ]);
+        }
+
+        if (!SettingsHelper::get('influx_db_username')) {
+            Setting::create([
+                'name' => 'influx_db_username',
+                'value' => '',
+                'description' => 'InfluxDB username'
+            ]);
+        }
+
+        if (!SettingsHelper::get('influx_db_password')) {
+            Setting::create([
+                'name' => 'influx_db_password',
+                'value' => '',
+                'description' => 'InfluxDB password'
+            ]);
+        }
+
+        if (!SettingsHelper::get('influx_db_version')) {
+            Setting::create([
+                'name' => 'influx_db_version',
+                'value' => 1,
+                'description' => 'InfluxDB version'
+            ]);
+        }
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Setting::whereIn('name', [
+            'influx_db_enabled',
+            'influx_db_host',
+            'influx_db_port',
+            'influx_db_database',
+            'influx_db_username',
+            'influx_db_password',
+            'influx_db_version',
+        ])->delete();
+    }
+}

database/seeders/DatabaseSeeder.php

@@ -1,5 +1,8 @@
 <?php
 
+namespace Database\Seeders;
+
+use Database\Seeders\SpeedtestSeeder;
 use Illuminate\Database\Seeder;
 
 class DatabaseSeeder extends Seeder
@@ -11,6 +14,6 @@ class DatabaseSeeder extends Seeder
      */
     public function run()
     {
-        // $this->call(UserSeeder::class);
+        $this->call(SpeedtestSeeder::class);
     }
 }

database/seeders/SpeedtestSeeder.php

@@ -0,0 +1,21 @@
+<?php
+
+namespace Database\Seeders;
+
+use App\Models\Speedtest;
+use Illuminate\Database\Seeder;
+
+class SpeedtestSeeder extends Seeder
+{
+    /**
+     * Run the database seeds.
+     *
+     * @return void
+     */
+    public function run()
+    {
+        Speedtest::factory()
+            ->count(250)
+            ->create();
+    }
+}

package.json

@@ -10,29 +10,30 @@
         "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
     },
     "devDependencies": {
-        "@babel/preset-react": "^7.10.4",
-        "axios": "^0.20",
-        "bootstrap": "^4.5.2",
+        "@babel/preset-react": "^7.12.13",
+        "axios": "^0.21",
+        "bootstrap": "^4.6.0",
         "cross-env": "^7.0",
         "jquery": "^3.5",
-        "laravel-mix": "^5.0.5",
-        "lodash": "^4.17.20",
+        "laravel-mix": "^5.0.9",
+        "lodash": "^4.17.21",
         "popper.js": "^1.12",
-        "react": "^16.2.0",
-        "react-dom": "^16.2.0",
-        "resolve-url-loader": "^3.1.0",
-        "sass": "^1.26.10",
-        "sass-loader": "^9.0.3"
+        "react": "^17.0.1",
+        "react-dom": "^17.0.1",
+        "resolve-url-loader": "^3.1.2",
+        "sass": "^1.32.8",
+        "sass-loader": "^10.1.1"
     },
     "dependencies": {
-        "@babel/plugin-proposal-class-properties": "^7.10.4",
-        "chart.js": "^2.9.3",
-        "csv-file-validator": "^1.8.0",
+        "@babel/plugin-proposal-class-properties": "^7.13.0",
+        "chart.js": "^2.9.4",
+        "csv-file-validator": "^1.10.1",
         "js-cookie": "^2.2.1",
-        "react-bootstrap": "^1.3.0",
-        "react-chartjs-2": "^2.10.0",
+        "react-beautiful-dnd": "^13.1.0",
+        "react-bootstrap": "^1.5.1",
+        "react-chartjs-2": "^2.11.1",
         "react-router": "^5.2.0",
         "react-router-dom": "^5.2.0",
-        "react-toastify": "^6.0.8"
+        "react-toastify": "^7.0.3"
     }
 }

phpunit.xml

@@ -1,29 +1,26 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<phpunit xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
-         xsi:noNamespaceSchemaLocation="./vendor/phpunit/phpunit/phpunit.xsd"
-         bootstrap="vendor/autoload.php"
-         colors="true">
-    <testsuites>
-        <testsuite name="Unit">
-            <directory suffix="Test.php">./tests/Unit</directory>
-        </testsuite>
-        <testsuite name="Feature">
-            <directory suffix="Test.php">./tests/Feature</directory>
-        </testsuite>
-    </testsuites>
-    <filter>
-        <whitelist processUncoveredFilesFromWhitelist="true">
-            <directory suffix=".php">./app</directory>
-        </whitelist>
-    </filter>
-    <php>
-        <server name="APP_ENV" value="testing"/>
-        <server name="BCRYPT_ROUNDS" value="4"/>
-        <server name="CACHE_DRIVER" value="array"/>
-        <server name="DB_CONNECTION" value="sqlite"/>
-        <server name="DB_DATABASE" value=":memory:"/>
-        <server name="MAIL_MAILER" value="array"/>
-        <server name="QUEUE_CONNECTION" value="sync"/>
-        <server name="SESSION_DRIVER" value="array"/>
-    </php>
+<phpunit xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="https://schema.phpunit.de/9.3/phpunit.xsd" bootstrap="vendor/autoload.php" colors="true">
+  <coverage processUncoveredFiles="true">
+    <include>
+      <directory suffix=".php">./app</directory>
+    </include>
+  </coverage>
+  <testsuites>
+    <testsuite name="Unit">
+      <directory suffix="Test.php">./tests/Unit</directory>
+    </testsuite>
+    <testsuite name="Feature">
+      <directory suffix="Test.php">./tests/Feature</directory>
+    </testsuite>
+  </testsuites>
+  <php>
+    <server name="APP_ENV" value="testing"/>
+    <server name="BCRYPT_ROUNDS" value="4"/>
+    <server name="CACHE_DRIVER" value="array"/>
+    <server name="DB_CONNECTION" value="sqlite"/>
+    <server name="DB_DATABASE" value=":memory:"/>
+    <server name="MAIL_MAILER" value="array"/>
+    <server name="QUEUE_CONNECTION" value="sync"/>
+    <server name="SESSION_DRIVER" value="array"/>
+  </php>
 </phpunit>

public/js/app.js.LICENSE.txt

@@ -12,7 +12,7 @@ License: MIT
 */
 
 /*!
-  * Bootstrap v4.5.2 (https://getbootstrap.com/)
+  * Bootstrap v4.5.3 (https://getbootstrap.com/)
   * Copyright 2011-2020 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
   * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
   */
@@ -24,9 +24,9 @@ License: MIT
 */
 
 /*!
- * Chart.js v2.9.3
+ * Chart.js v2.9.4
  * https://www.chartjs.org
- * (c) 2019 Chart.js Contributors
+ * (c) 2020 Chart.js Contributors
  * Released under the MIT License
  */
 
@@ -81,15 +81,6 @@ License: MIT
  * LICENSE file in the root directory of this source tree.
  */
 
-/** @license React v16.13.1
- * react-dom.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
 /** @license React v16.13.1
  * react-is.production.min.js
  *
@@ -99,7 +90,16 @@ License: MIT
  * LICENSE file in the root directory of this source tree.
  */
 
-/** @license React v16.13.1
+/** @license React v16.14.0
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v16.14.0
  * react.production.min.js
  *
  * Copyright (c) Facebook, Inc. and its affiliates.
@@ -132,3 +132,7 @@ License: MIT
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
+//! moment.js
+
+//! moment.js locale configuration

resources/js/components/Authentication/Authentication.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
-import { Container, Row, Col, Collapse, Button, Modal } from 'react-bootstrap';
+import { Row, Col} from 'react-bootstrap';
 import SessionsTable from './SessionsTable';
 import ResetPassword from './ResetPassword';
 
@@ -44,34 +44,18 @@ export default class Authentication extends Component {
 
         if( (window.config.auth == true && window.authenticated == true)) {
             return (
-                <Container className="mb-4">
+                <div>
                     <Row>
-                        <Col sm={{ span: 12 }} className="mb-3 text-center">
-                            <div className="mouse"  aria-controls="testsTable" onClick={this.toggleCollapse} aria-expanded={showCollapse}>
-                                <h4 className="d-inline mr-2">Authentication</h4>
-                                {(showCollapse) ?
-                                    <span className="ti-angle-up"></span>
-                                :
-                                    <span className="ti-angle-down"></span>
-                                }
-                            </div>
+                        <Col sm={{ span: 12 }} className="text-center">
+                            <ResetPassword />
                         </Col>
                     </Row>
-                    <Collapse in={showCollapse}>
-                        <div>
-                            <Row>
-                                <Col sm={{ span: 12 }} className="text-center">
-                                    <ResetPassword />
-                                </Col>
-                            </Row>
-                            <Row>
-                                <Col sm={{ span: 12 }} className="text-center">
-                                    <SessionsTable />
-                                </Col>
-                            </Row>
-                        </div>
-                    </Collapse>
-                </Container>
+                    <Row>
+                        <Col sm={{ span: 12 }} className="text-center">
+                            <SessionsTable />
+                        </Col>
+                    </Row>
+                </div>
             );
         } else {
             return (

resources/js/components/Graphics/HistoryGraph.js

@@ -11,7 +11,10 @@ export default class HistoryGraph extends Component {
         super(props)
 
         this.state = {
-            days: 7,
+            days: props.days,
+            time: props.dlUl,
+            fail: props.fail,
+            config: props.config,
             duData: {},
             duOptions: {},
             pingData: {},
@@ -26,229 +29,233 @@ export default class HistoryGraph extends Component {
             graph_failure_width: 6,
             graph_ping_enabled: true,
             graph_ping_width: 6,
+            firstUpdate: false,
         }
     }
 
     componentDidMount = () => {
-        this.getData();
-        var int = setInterval(this.getData, 10000);
+    }
+
+    componentDidUpdate() {
+        if(
+            this.state.time != this.props.dlUl ||
+            this.state.fail != this.props.fail ||
+            this.state.config != this.props.config ||
+            this.state.days != this.props.days
+        ) {
+            this.setState({
+                time: this.props.dlUl,
+                fail: this.props.fail,
+                config: this.props.config,
+                days: this.props.days
+            });
+
+            if(this.state.config !== null) {
+                this.processData();
+            }
+        }
+
+        if(
+            !this.state.firstUpdate &&
+            this.state.config !== null
+        ) {
+            this.processData();
+            this.setState({
+                firstUpdate: true,
+            });
+        }
+    }
+
+    processData() {
+        this.processConfig();
+        this.processDlUlPing();
+        this.processFailure();
+    }
+
+    processConfig() {
         this.setState({
-            interval: int,
+            graph_ul_dl_enabled: Boolean(Number(this.state.config.graphs.download_upload_graph_enabled.value)),
+            graph_ul_dl_width: this.state.config.graphs.download_upload_graph_width.value,
+            graph_ping_enabled: Boolean(Number(this.state.config.graphs.ping_graph_enabled.value)),
+            graph_ping_width: this.state.config.graphs.ping_graph_width.value,
+            graph_failure_enabled: Boolean(Number(this.state.config.graphs.failure_graph_enabled.value)),
+            graph_failure_width: this.state.config.graphs.failure_graph_width.value,
         });
     }
 
-    getDLULPing = (days) => {
-        var url = 'api/speedtest/time/' + days;
+    processDlUlPing() {
+        let days = this.state.days;
 
-        Axios.get(url)
-        .then((resp) => {
-            var duData = {
-                labels: [],
-                datasets:[
-                    {
-                        data: [],
-                        label: 'Download',
-                        borderColor: "#fca503",
-                        fill: false,
-                    },
-                    {
-                        data: [],
-                        label: 'Upload',
-                        borderColor: "#3e95cd",
-                        fill: false,
-                    }
-                ],
-            };
-            var duOptions = {
-                maintainAspectRatio: false,
-                responsive: true,
-                tooltips: {
-                    callbacks: {
-                      label: (item) => `${item.yLabel} Mbit/s`,
-                    },
+        var duData = {
+            labels: [],
+            datasets:[
+                {
+                    data: [],
+                    label: 'Download',
+                    borderColor: "#fca503",
+                    fill: false,
                 },
-                title: {
-                    display: false,
-                    text: 'Speedtests results for the last ' + days + ' days',
-                },
-                scales: {
-                    xAxes: [{
-                        display: false,
-                        scaleLabel: {
-                            display: true,
-                            labelString: 'DateTime'
-                        }
-                    }],
-                },
-                elements: {
-                    point:{
-                        radius: 0,
-                        hitRadius: 8
-                    }
+                {
+                    data: [],
+                    label: 'Upload',
+                    borderColor: "#3e95cd",
+                    fill: false,
                 }
-            };
-
-            var pingData = {
-                labels: [],
-                datasets:[
-                    {
-                        data: [],
-                        label: 'Ping',
-                        borderColor: "#07db71",
-                        fill: false,
-                    },
-                ],
-            };
-            var pingOptions = {
-                maintainAspectRatio: false,
-                responsive: true,
-                tooltips: {
-                    callbacks: {
-                      label: (item) => `${item.yLabel} ms`,
-                    },
+            ],
+        };
+        var duOptions = {
+            maintainAspectRatio: false,
+            responsive: true,
+            tooltips: {
+                callbacks: {
+                  label: (item) => `${item.yLabel} Mbit/s`,
                 },
-                title: {
+            },
+            title: {
+                display: false,
+                text: 'Speedtests results for the last ' + days + ' days',
+            },
+            scales: {
+                xAxes: [{
                     display: false,
-                    text: 'Ping results for the last ' + days + ' days',
-                },
-                scales: {
-                    xAxes: [{
-                        display: false,
-                        scaleLabel: {
-                            display: true,
-                            labelString: 'DateTime'
-                        }
-                    }],
-                },
-                elements: {
-                    point:{
-                        radius: 0,
-                        hitRadius: 8
+                    scaleLabel: {
+                        display: true,
+                        labelString: 'DateTime'
                     }
+                }],
+            },
+            elements: {
+                point:{
+                    radius: 0,
+                    hitRadius: 8
                 }
             }
+        };
 
-            resp.data.data.forEach(e => {
-                var download = {
-                    t: new Date(e.created_at),
-                    y: e.download,
-                };
-                var upload = {
-                    t: new Date(e.created_at),
-                    y: e.upload,
-                };
-                var ping = {
-                    t: new Date(e.created_at),
-                    y: parseFloat(e.ping)
-                }
-                duData.datasets[0].data.push(download);
-                duData.datasets[1].data.push(upload);
-                pingData.datasets[0].data.push(ping);
-                duData.labels.push(new Date(e.created_at).toLocaleString());
-                pingData.labels.push(new Date(e.created_at).toLocaleString());
-            });
-
-            this.setState({
-                duData: duData,
-                duOptions: duOptions,
-                pingData: pingData,
-                pingOptions: pingOptions,
-                loading: false,
-            });
-        })
-        .catch((err) => {
-            console.log(err);
-        })
-    }
-
-    getFailure = (days) => {
-        var url = 'api/speedtest/fail/' + days;
-        Axios.get(url)
-        .then((resp) => {
-            var failData = {
-                labels: [],
-                datasets: [
-                    {
-                        data: [],
-                        label: 'Successful',
-                        backgroundColor: '#07db71'
-                    },
-                    {
-                        data: [],
-                        label: 'Failed',
-                        backgroundColor: '#E74C3C'
-                    },
-                ],
-            };
-            var failOptions = {
-                maintainAspectRatio: false,
-                responsive: true,
-                tooltips: {
-                    callbacks: {
-                      label: (item) => `${item.yLabel} speedtests`,
-                    },
+        var pingData = {
+            labels: [],
+            datasets:[
+                {
+                    data: [],
+                    label: 'Ping',
+                    borderColor: "#07db71",
+                    fill: false,
                 },
-                scales: {
-                    xAxes: [{
-                        stacked: true
-                    }],
-                    yAxes: [{
-                        stacked: true
-                    }]
+            ],
+        };
+        var pingOptions = {
+            maintainAspectRatio: false,
+            responsive: true,
+            tooltips: {
+                callbacks: {
+                  label: (item) => `${item.yLabel} ms`,
+                },
+            },
+            title: {
+                display: false,
+                text: 'Ping results for the last ' + days + ' days',
+            },
+            scales: {
+                xAxes: [{
+                    display: false,
+                    scaleLabel: {
+                        display: true,
+                        labelString: 'DateTime'
+                    }
+                }],
+            },
+            elements: {
+                point:{
+                    radius: 0,
+                    hitRadius: 8
                 }
+            }
+        }
+
+        this.state.time.forEach(e => {
+            var download = {
+                t: new Date(e.created_at),
+                y: e.download,
             };
+            var upload = {
+                t: new Date(e.created_at),
+                y: e.upload,
+            };
+            var ping = {
+                t: new Date(e.created_at),
+                y: parseFloat(e.ping)
+            }
+            duData.datasets[0].data.push(download);
+            duData.datasets[1].data.push(upload);
+            pingData.datasets[0].data.push(ping);
+            duData.labels.push(new Date(e.created_at).toLocaleString());
+            pingData.labels.push(new Date(e.created_at).toLocaleString());
+        });
 
-            resp.data.data.forEach(e => {
-                var success = {x: e.date, y: e.success};
-                var fail = {x: e.date, y: e.failure};
-                failData.datasets[0].data.push(success);
-                failData.datasets[1].data.push(fail);
-                failData.labels.push(new Date(e.date).toLocaleString([], {year: '2-digit', month:'2-digit', day:'2-digit'}));
-            })
-
-            this.setState({
-                failData: failData,
-                failOptions: failOptions
-            });
-        })
-        .catch((err) => {
-            console.log(err);
-        })
+        this.setState({
+            duData: duData,
+            duOptions: duOptions,
+            pingData: pingData,
+            pingOptions: pingOptions,
+            loading: false,
+        });
     }
 
-    getData = (days = this.state.days) => {
-        Axios.get('api/settings/config')
-        .then((resp) => {
-            var data = resp.data.graphs;
-            this.setState({
-                graph_ul_dl_enabled: Boolean(Number(data.download_upload_graph_enabled.value)),
-                graph_ul_dl_width: data.download_upload_graph_width.value,
-                graph_ping_enabled: Boolean(Number(data.ping_graph_enabled.value)),
-                graph_ping_width: data.ping_graph_width.value,
-                graph_failure_enabled: Boolean(Number(data.failure_graph_enabled.value)),
-                graph_failure_width: data.failure_graph_width.value,
-            });
+    processFailure() {
+        let days = this.state.days;
 
-            this.getDLULPing(days);
-            this.getFailure(days);
-        })
-        .catch((err) => {
-            console.log('Couldn\'t get the site config');
-            console.log(err);
+        var failData = {
+            labels: [],
+            datasets: [
+                {
+                    data: [],
+                    label: 'Successful',
+                    backgroundColor: '#07db71'
+                },
+                {
+                    data: [],
+                    label: 'Failed',
+                    backgroundColor: '#E74C3C'
+                },
+            ],
+        };
+        var failOptions = {
+            maintainAspectRatio: false,
+            responsive: true,
+            tooltips: {
+                callbacks: {
+                  label: (item) => `${item.yLabel} speedtests`,
+                },
+            },
+            scales: {
+                xAxes: [{
+                    stacked: true
+                }],
+                yAxes: [{
+                    stacked: true
+                }]
+            }
+        };
+
+        this.state.fail.forEach(e => {
+            var success = {x: e.date, y: e.success};
+            var fail = {x: e.date, y: e.failure};
+            failData.datasets[0].data.push(success);
+            failData.datasets[1].data.push(fail);
+            failData.labels.push(new Date(e.date).toLocaleString([], {year: '2-digit', month:'2-digit', day:'2-digit'}));
         })
+
+        this.setState({
+            failData: failData,
+            failOptions: failOptions
+        });
     }
 
     updateDays = (e) => {
         var days = e.target.value;
         if(days) {
-            this.getData(days);
-            clearInterval(this.state.int);
-            var int = setInterval(this.getData, 10000);
             toast.info('Showing results for the last ' + days + ' days');
-            this.setState({
-                days: days,
-                interval: int
-            });
+            this.props.updateDays(days);
         }
     }
 

resources/js/components/Graphics/LatestResults.js

@@ -12,36 +12,23 @@ export default class LatestResults extends Component {
         super(props)
 
         this.state = {
-            data: {},
+            data: props.data,
             interval: null,
             loading: true,
         }
     }
 
-    componentDidMount = () => {
-        this.getData();
-        var int = setInterval(this.getData, 10000);
-        this.setState({
-            interval: int,
-        });
+    componentDidUpdate() {
+        if(this.state.data !== this.props.data) {
+            this.setState({
+                data: this.props.data,
+                loading: false,
+            });
+        }
     }
 
-    getData = () => {
-        var url = 'api/speedtest/latest';
-
-        Axios.get(url)
-        .then((resp) => {
-            this.setState({
-                data: resp.data,
-                loading: false
-            });
-        })
-        .catch((err) => {
-            this.setState({
-                data: false
-            });
-            console.log(err);
-        })
+    componentWillUnmount() {
+        clearInterval(this.state.interval);
     }
 
     newScan = () => {
@@ -131,9 +118,7 @@ export default class LatestResults extends Component {
                         >
                             <Widget
                                 title="Ping"
-                                value={parseFloat(data.data.ping).toFixed(1)}
-                                avg={parseFloat(data.average.ping).toFixed(1)}
-                                max={parseFloat(data.max.ping).toFixed(1)}
+                                data={data}
                                 failed={data.data.failed}
                                 unit="ms"
                                 icon="ping"
@@ -147,9 +132,7 @@ export default class LatestResults extends Component {
                         >
                             <Widget
                                 title="Download"
-                                value={parseFloat(data.data.download).toFixed(1)}
-                                avg={parseFloat(data.average.download).toFixed(1)}
-                                max={parseFloat(data.max.download).toFixed(1)}
+                                data={data}
                                 failed={data.data.failed}
                                 unit="Mbit/s"
                                 icon="dl"
@@ -163,9 +146,7 @@ export default class LatestResults extends Component {
                         >
                             <Widget
                                 title="Upload"
-                                value={parseFloat(data.data.upload).toFixed(1)}
-                                avg={parseFloat(data.average.upload).toFixed(1)}
-                                max={parseFloat(data.max.upload).toFixed(1)}
+                                data={data}
                                 failed={data.data.failed}
                                 unit="Mbit/s"
                                 icon="ul"

resources/js/components/Graphics/TableRow.js

@@ -28,7 +28,7 @@ export default class TableRow extends Component {
     }
 
     delete = (id) => {
-        var url = 'api/speedtest/delete/' + id;
+        var url = 'api/speedtest/delete/' + id + '?token=' + window.token;
 
         Axios.delete(url)
         .then((resp) => {
@@ -43,21 +43,66 @@ export default class TableRow extends Component {
             }
         })
 
+        this.props.refresh();
         this.toggleShow();
     }
 
+    getDataFields = () => {
+        let allFields = this.props.allFields;
+        let data = this.state.data;
+        let processedFields = [];
+
+        for(var key in allFields) {
+            let field = allFields[key];
+
+            let value = data[key];
+
+            if(field.type === 'date') {
+                value = new Date(value).toLocaleString();
+            } else if(field.type === 'bool') {
+                value = Boolean(value) ? field.if_true : field.if_false
+            }
+
+            let final = {
+                name: key,
+                key: field.alias,
+                value: value,
+                type: field.type
+            };
+
+            processedFields.push(final);
+        }
+
+        let visible = [];
+        let inModal = [];
+
+        window.config.tables.visible_columns.forEach(column => {
+            visible.push(processedFields.find(x => x.name == column));
+        });
+
+        inModal = processedFields.filter(el => {
+            return !visible.includes(el);
+        });
+
+        return {
+            visible: visible,
+            modal: inModal
+        };
+    }
+
     render() {
         var e = this.state.data;
         var show = this.state.show;
+        var fields = this.getDataFields();
 
         if(e.failed != true) {
             return (
                 <tr>
-                    <td>{e.id}</td>
-                    <td>{new Date(e.created_at).toLocaleString()}</td>
-                    <td>{e.download}</td>
-                    <td>{e.upload}</td>
-                    <td>{e.ping}</td>
+                    {fields.visible.map((e, i) => {
+                        return (
+                            <td key={i}>{e.value}</td>
+                        );
+                    })}
                     {e.server_host != null ?
                         <td>
                             <span onClick={this.toggleShow} className="ti-arrow-top-right mouse"></span>
@@ -66,13 +111,17 @@ export default class TableRow extends Component {
                                     <Modal.Title>More info</Modal.Title>
                                 </Modal.Header>
                                 <Modal.Body className="text-center">
-                                    <p>Server ID: {e.server_id}</p>
-                                    <p>Name: {e.server_name}</p>
-                                    <p>Host: {e.server_host}</p>
-                                    <p>URL: <a href={e.url} target="_blank" rel="noopener noreferer">Speedtest.net</a></p>
-                                    {e.scheduled != undefined &&
-                                        <p>Type: {e.scheduled == true ? 'scheduled' : 'manual'}</p>
-                                    }
+                                    {fields.modal.map((e, i) => {
+                                        if(e.type === 'url') {
+                                            return (
+                                                <p key={i}>{e.key}: <a href={e.value} target="_blank" rel="noopener noreferer">Speedtest.net</a></p>
+                                            );
+                                        } else {
+                                            return (
+                                                <p key={i}>{e.key}: {e.value}</p>
+                                            );
+                                        }
+                                    })}
                                     <Button variant="danger" onClick={() => { this.delete(e.id) }}>Delete</Button>
                                 </Modal.Body>
                             </Modal>
@@ -85,12 +134,23 @@ export default class TableRow extends Component {
         } else {
             return (
                 <tr>
-                    <td>{e.id}</td>
-                    <td>{new Date(e.created_at).toLocaleString()}</td>
-                    <td><span className="ti-close text-danger"></span></td>
-                    <td><span className="ti-close text-danger"></span></td>
-                    <td><span className="ti-close text-danger"></span></td>
-                    <td></td>
+                    {fields.visible.map((e, i) => {
+                        console.log(e);
+                        if(e.name === 'created_at') {
+                            return <td key={i}>{new Date(e.value).toLocaleString()}</td>
+                        } else if (e.name === 'id') {
+                            return <td key={i}>{e.value}</td>
+                        }
+
+                        return (
+                            <td key={i}><span className="ti-close text-danger"></span></td>
+                        );
+                    })}
+                    {(window.config.auth && window.authenticated) || !window.config.auth ?
+                        <td><Button variant="danger" onClick={() => { this.delete(e.id) }}>Delete</Button></td>
+                    :
+                        <td></td>
+                    }
                 </tr>
             );
         }

resources/js/components/Graphics/TestsTable.js

@@ -14,7 +14,51 @@ export default class TestsTable extends Component {
             data: [],
             showTable: false,
             refresh: true,
-            interval: null
+            interval: null,
+            allFields: {
+                id: {
+                    type: 'int',
+                    alias: 'ID'
+                },
+                created_at: {
+                    type: 'date',
+                    alias: 'Time'
+                },
+                download: {
+                    type: 'float',
+                    alias: 'Download (Mbit/s)'
+                },
+                upload: {
+                    type: 'float',
+                    alias: 'Upload (Mbit/s)'
+                },
+                ping: {
+                    type: 'float',
+                    alias: 'Ping (ms)'
+                },
+                server_id: {
+                    type: 'int',
+                    alias: 'Server ID'
+                },
+                server_name: {
+                    type: 'string',
+                    alias: 'Name'
+                },
+                server_host: {
+                    type: 'string',
+                    alias: 'Host'
+                },
+                url: {
+                    type: 'url',
+                    alias: 'URL'
+                },
+                scheduled: {
+                    type: 'bool',
+                    alias: 'Type',
+                    if_true: 'scheduled',
+                    if_false: 'manual'
+                }
+            }
         }
     }
 
@@ -26,6 +70,10 @@ export default class TestsTable extends Component {
         });
     }
 
+    componentWillUnmount() {
+        clearInterval(this.state.interval);
+    }
+
     getData = (page = this.state.page, refresh = true) => {
         var url = 'api/speedtest/?page=' + page;
 
@@ -80,62 +128,52 @@ export default class TestsTable extends Component {
         var data = this.state.data;
         var show = this.state.showTable;
         var refresh = this.state.refresh;
+        let allFields = this.state.allFields;
 
         if(data.length > 0) {
             return (
-                <Container className="mb-4 mt-4" fluid>
-                    <Row>
-                        <Col sm={{ span: 12 }} className="mb-3 text-center">
-                            <div className="mouse"  aria-controls="testsTable" onClick={this.toggleCollapse} aria-expanded={show}>
-                                <h4 className="d-inline mr-2">All tests</h4>
-                                {(show) ?
-                                    <span className="ti-angle-up"></span>
-                                :
-                                    <span className="ti-angle-down"></span>
-                                }
-                            </div>
-                            {(show) &&
-                                <div className="my-1">
+                <div>
+                    <Container className="mb-4 mt-4 px-5">
+                        <Row>
+                            <Col sm={{ span: 12 }} className="mb-3 text-center">
+                                <div>
+                                    <h4 className="d-inline mr-2">All tests</h4>
                                     <span className="text-muted">Auto refresh: {(refresh) ? 'On' : 'Off'}</span>
                                 </div>
-                            }
-                        </Col>
-                    </Row>
-                    <Collapse in={show}>
-                        <div>
-                            <Row>
-                                <Col sm={{ span: 12 }} id="testsTable">
-                                    <Table responsive>
-                                        <thead>
-                                            <tr>
-                                                <th>ID</th>
-                                                <th>Time</th>
-                                                <th>Download (Mbit/s)</th>
-                                                <th>Upload (Mbit/s)</th>
-                                                <th>Ping (ms)</th>
-                                                <th>More</th>
-                                            </tr>
-                                        </thead>
-                                        <tbody>
-                                            {data.map((e,i) => {
+                            </Col>
+                        </Row>
+                        <Row>
+                            <Col sm={{ span: 12 }} id="testsTable">
+                                <Table responsive>
+                                    <thead>
+                                        <tr>
+                                            {window.config.tables.visible_columns.map((e, i) => {
                                                 return (
-                                                    <TableRow key={e.id} data={e} />
+                                                    <th key={i}>{allFields[e].alias}</th>
                                                 );
                                             })}
-                                        </tbody>
-                                    </Table>
+                                            <th>More</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        {data.map((e,i) => {
+                                            return (
+                                                <TableRow key={e.id} data={e} allFields={allFields} refresh={this.getData} />
+                                            );
+                                        })}
+                                    </tbody>
+                                </Table>
+                            </Col>
+                        </Row>
+                        {page < lastPage &&
+                            <Row>
+                                <Col sm={{ span: 12 }} className="text-center">
+                                    <Button variant="primary" onClick={this.getMoreData}>Show more</Button>
                                 </Col>
                             </Row>
-                            {page < lastPage &&
-                                <Row>
-                                    <Col sm={{ span: 12 }} className="text-center">
-                                        <Button variant="primary" onClick={this.getMoreData}>Show more</Button>
-                                    </Col>
-                                </Row>
-                            }
-                        </div>
-                    </Collapse>
-                </Container>
+                        }
+                    </Container>
+                </div>
             );
         } else {
             return (

resources/js/components/Graphics/Widget.js

@@ -8,38 +8,88 @@ export default class Widget extends Component {
 
         this.state = {
             title: this.props.title,
-            value: this.props.value,
             unit: this.props.unit,
             icon: this.props.icon,
-            avg: this.props.avg,
-            max: this.props.max,
             failed: this.props.failed,
+            data: this.props.data
         }
     }
 
+    parseData(title, data) {
+        var returnData = {};
+
+
+        if(title == 'Ping') {
+            returnData.value = parseFloat(data.data.ping).toFixed(1);
+
+            if(window.config.widgets.show_average) {
+                returnData.avg = parseFloat(data.average.ping).toFixed(1);
+            }
+
+            if(window.config.widgets.show_max) {
+                returnData.max = parseFloat(data.maximum.ping).toFixed(1);
+            }
+
+            if(window.config.widgets.show_min) {
+                returnData.min = parseFloat(data.minimum.ping).toFixed(1);
+            }
+        }
+
+        if(title == 'Upload') {
+            returnData.value = parseFloat(data.data.upload).toFixed(1);
+
+            if(window.config.widgets.show_average) {
+                returnData.avg = parseFloat(data.average.upload).toFixed(1);
+            }
+
+            if(window.config.widgets.show_max) {
+                returnData.max = parseFloat(data.maximum.upload).toFixed(1);
+            }
+
+            if(window.config.widgets.show_min) {
+                returnData.min = parseFloat(data.minimum.upload).toFixed(1);
+            }
+        }
+
+        if(title == 'Download') {
+            returnData.value = parseFloat(data.data.download).toFixed(1);
+
+            if(window.config.widgets.show_average) {
+                returnData.avg = parseFloat(data.average.download).toFixed(1);
+            }
+
+            if(window.config.widgets.show_max) {
+                returnData.max = parseFloat(data.maximum.download).toFixed(1);
+            }
+
+            if(window.config.widgets.show_min) {
+                returnData.min = parseFloat(data.minimum.download).toFixed(1);
+            }
+        }
+
+        return returnData;
+    }
+
     componentDidUpdate = () => {
-        if(this.props.title != this.state.title || this.props.value != this.state.value || this.props.unit != this.state.unit || this.props.icon != this.state.icon || this.props.avg != this.state.avg || this.props.max != this.state.max || this.props.failed != this.state.failed) {
+        if(this.props.title != this.state.title || this.props.data != this.state.data || this.props.unit != this.state.unit || this.props.icon != this.state.icon || this.props.failed != this.state.failed) {
             this.setState({
                 title: this.props.title,
-                value: this.props.value,
                 unit: this.props.unit,
                 icon: this.props.icon,
-                avg: this.props.avg,
-                max: this.props.max,
                 failed: this.props.failed,
+                data: this.props.data
             });
         }
     }
 
     render() {
         var title = this.state.title;
-        var value = this.state.value;
         var unit = this.state.unit;
         var icon = this.state.icon;
-        var max = this.state.max;
-        var avg = this.state.avg;
         var failed = Boolean(Number(this.state.failed));
 
+        var data = this.parseData(title, this.state.data);
+
         switch(icon) {
             case 'ping':
                 icon = <span className="ti-pulse icon text-success"></span>;
@@ -63,17 +113,30 @@ export default class Widget extends Component {
                             </div>
 
                             <div className="text-truncate">
-                                <h3 className="d-inline">{(!failed) ? value : <span className="ti-close text-danger"></span> }</h3>
+                                <h3 className="d-inline">{(!failed) ? data.value : <span className="ti-close text-danger"></span> }</h3>
                                 <p className="d-inline ml-2">{unit} (current)</p>
                             </div>
-                            <div className="text-muted text-truncate">
-                                <h5 className="d-inline">{avg}</h5>
-                                <p className="d-inline ml-2">{unit} (average)</p>
-                            </div>
-                            <div className="text-muted text-truncate">
-                                <h5 className="d-inline">{max}</h5>
-                                <p className="d-inline ml-2">{unit} (maximum)</p>
-                            </div>
+
+                            {window.config.widgets.show_average &&
+                                <div className="text-muted text-truncate">
+                                    <h5 className="d-inline">{data.avg}</h5>
+                                    <p className="d-inline ml-2">{unit} (average)</p>
+                                </div>
+                            }
+
+                            {window.config.widgets.show_max &&
+                                <div className="text-muted text-truncate">
+                                    <h5 className="d-inline">{data.max}</h5>
+                                    <p className="d-inline ml-2">{unit} (maximum)</p>
+                                </div>
+                            }
+
+                            {window.config.widgets.show_min &&
+                                <div className="text-muted text-truncate">
+                                    <h5 className="d-inline">{data.min}</h5>
+                                    <p className="d-inline ml-2">{unit} (minimum)</p>
+                                </div>
+                            }
                         </div>
                     </div>
                 </Card.Body>

resources/js/components/Home/HomePage.js

@@ -5,25 +5,74 @@ import LatestResults from '../Graphics/LatestResults';
 import Footer from './Footer';
 import DataRow from '../Data/DataRow';
 import TestsTable from '../Graphics/TestsTable';
-import Settings from '../Settings/Settings';
 import Login from '../Login';
 import Authentication from '../Authentication/Authentication';
+import Navbar from '../Navbar';
+import axios from 'axios';
 
 export default class HomePage extends Component {
+    constructor(props) {
+        super(props)
+
+        this.state = {
+            latest: null,
+            time: null,
+            fail: null,
+            config: null,
+            days: 7,
+            interval: null,
+        }
+    }
+
+    componentDidMount = () => {
+        this.getData();
+        var interval = setInterval(this.getData, 10000);
+        this.setState({
+            interval: interval,
+        });
+    }
+
+    componentWillUnmount() {
+        clearInterval(this.state.interval);
+    }
+
+    updateDays = (days) => {
+        this.setState({ days: days });
+        this.getData();
+    }
+
+
+    getData = () => {
+        axios.get('api/speedtest/home/' + this.state.days)
+        .then((resp) => {
+            this.setState({
+                latest: resp.data.latest,
+                time: resp.data.time,
+                fail: resp.data.fail,
+                config: resp.data.config
+            });
+        })
+        .catch((err) => {
+            console.log(err);
+        })
+    }
 
     render() {
+        let latest = this.state.latest;
+        let time = this.state.time;
+        let fail = this.state.fail;
+        let config = this.state.config;
+        let days = this.state.days;
+
         return (
             <div>
+                <Navbar />
                 <div className="my-4">
                     {(window.config.auth == true && window.authenticated == false) &&
                         <Login />
                     }
-                    <LatestResults />
-                    <HistoryGraph />
-                    <TestsTable />
-                    <Settings />
-                    <Authentication />
-                    <DataRow />
+                    <LatestResults data={latest} />
+                    <HistoryGraph updateDays={this.updateDays} dlUl={time} fail={fail} config={config} days={days} />
                 </div>
                 <Footer />
             </div>

resources/js/components/Login.js

@@ -39,6 +39,9 @@ export default class Login extends Component {
             Cookies.set('auth', token, { expires: expires })
             window.location.reload(true);
         })
+        .catch((err) => {
+            toast.error('Something went wrong logging in.');
+        })
     }
 
     toggleShow = () => {

resources/js/components/Navbar.js

@@ -1,19 +1,77 @@
 import React, { Component } from 'react';
+import {Nav, Navbar as BootstrapNavbar, NavLink as BootstrapNavLink} from 'react-bootstrap';
 import ReactDOM from 'react-dom';
+import { Link, NavLink } from 'react-router-dom';
 
 export default class Navbar extends Component {
     constructor(props) {
         super(props)
 
         this.state = {
-
+            brand: {
+                name: window.config.name,
+                url: window.config.base
+            },
         }
     }
 
+    generatePagesArray() {
+        var pages = [
+            {
+                name: 'Home',
+                url: window.config.base,
+                authRequired: false
+            },
+            {
+                name: 'All Tests',
+                url: window.config.base + 'speedtests',
+                authRequired: false
+            },
+            {
+                name: 'Settings',
+                url: window.config.base + 'settings',
+                authRequired: true
+            },
+        ]
+
+        return pages;
+    }
+
+    generateLinks = () => {
+        var pages = this.generatePagesArray();
+
+        return pages.map(page => {
+            if(
+                page.authRequired === false ||
+                (
+                    page.authRequired === true &&
+                    window.config.auth &&
+                    window.authenticated
+                ) ||
+                (
+                    page.authRequired === true &&
+                    window.config.auth === false
+                )
+            ) {
+                return <BootstrapNavLink key={page.url} as={NavLink} to={page.url}>{page.name}</BootstrapNavLink>;
+            }
+        });
+    }
+
     render() {
+        var brand = this.state.brand;
+        var pages = this.generateLinks();
+
         return (
-            <div>
-            </div>
+            <BootstrapNavbar variant="dark" bg="dark" expand="sm">
+                <BootstrapNavbar.Brand as={Link} to={brand.url}><img style={{width: '15%'}} src={window.config.base + 'files/icons/fav/android-icon-192x192.png'} /> {brand.name}</BootstrapNavbar.Brand>
+                <BootstrapNavbar.Toggle  aria-controls="basic-navbar-nav" />
+                <BootstrapNavbar.Collapse id="basic-navbar-nav">
+                    <Nav className="ml-auto">
+                        {pages}
+                    </Nav>
+                </BootstrapNavbar.Collapse>
+            </BootstrapNavbar>
         );
     }
 }

resources/js/components/Settings/Setting.js

@@ -1,77 +0,0 @@
-import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
-import { Card, Form, Button } from 'react-bootstrap';
-import Axios from 'axios';
-import { toast } from 'react-toastify';
-
-export default class Setting extends Component {
-    constructor(props) {
-        super(props)
-
-        this.state = {
-            name: this.props.name,
-            value: this.props.value,
-            description: this.props.description,
-        }
-    }
-
-    ucfirst(string) {
-        return string.charAt(0).toUpperCase() + string.slice(1);
-    }
-
-    update = () => {
-        var url = 'api/settings?token=' + window.token;
-        var data = {
-            name: this.state.name,
-            value: this.state.value
-        };
-
-        Axios.post(url, data)
-        .then((resp) => {
-            toast.success(this.ucfirst(this.state.name) + ' updated');
-        })
-        .catch((err) => {
-            if(err.response.status == 422) {
-                var errors = err.response.data.error;
-                for(var key in errors) {
-                    var error = errors[key];
-                    toast.error(error[0])
-                }
-            } else {
-                toast.error('Something went wrong')
-            }
-        })
-    }
-
-    updateValue = (e) => {
-        this.setState({
-            value: e.target.value
-        });
-    }
-
-    render() {
-        var name = this.state.name;
-        var value = this.state.value;
-        var description = this.state.description;
-
-        return (
-            <Card className="m-2 setting-card">
-                <Card.Body className="d-flex align-items-center">
-                    <div>
-                        <h4>{this.ucfirst(name)}</h4>
-                        <div dangerouslySetInnerHTML={{ __html: description}} />
-                        <Form.Group controlId={name}>
-                            <Form.Label>{this.ucfirst(name)}</Form.Label>
-                            <Form.Control type="text" label={name} defaultValue={value} onInput={this.updateValue} />
-                        </Form.Group>
-                        <Button variant="primary" onClick={this.update}>Save</Button>
-                    </div>
-                </Card.Body>
-            </Card>
-        );
-    }
-}
-
-if (document.getElementById('Setting')) {
-    ReactDOM.render(<Setting />, document.getElementById('Setting'));
-}

resources/js/components/Settings/SettingWithModal.js

@@ -1,292 +0,0 @@
-import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
-import { Card, Form, Button, Modal, Row, Col } from 'react-bootstrap';
-import Axios from 'axios';
-import { toast } from 'react-toastify';
-import SettingsModalCard from '../Settings/SettingsModalCard';
-
-export default class SettingWithModal extends Component {
-    constructor(props) {
-        super(props)
-
-        this.state = {
-            title: this.props.title,
-            description: this.props.description,
-            settings: this.props.settings,
-            show: false,
-            autoClose: this.props.autoClose
-        }
-    }
-
-    ucfirst(string) {
-        return string.charAt(0).toUpperCase() + string.slice(1);
-    }
-
-    update = () => {
-        var url = 'api/settings/bulk?token=' + window.token;
-        var data = [];
-        var settings = this.state.settings;
-
-        settings.forEach(e => {
-            if(e.type !== 'button-get') {
-                var res = {
-                    name: e.obj.name,
-                    value: e.obj.value
-                };
-                data.push(res);
-            }
-        });
-
-        data = {
-            data: data
-        };
-
-        Axios.post(url, data)
-        .then((resp) => {
-            toast.success(this.state.title + ' updated');
-            if(this.state.autoClose) {
-                this.toggleShow();
-            }
-        })
-        .catch((err) => {
-            if(err.response.status == 422) {
-                toast.error('Your input was invalid');
-            } else {
-                toast.error('Something went wrong')
-            }
-        })
-    }
-
-    updateValue = (e) => {
-        var name = e.target.id;
-        if(e.target.type == 'checkbox') {
-            var val = e.target.checked;
-        } else {
-            var val = e.target.value;
-        }
-        var settings = this.state.settings;
-        var i = 0;
-        settings.forEach(ele => {
-            if(ele.obj.name == name) {
-                ele.obj.value = val;
-            }
-            settings[i] = ele;
-            i++;
-        });
-        this.setState({
-            settings: settings
-        });
-    }
-
-    toggleShow = () => {
-        var show = this.state.show;
-        if(show) {
-            this.setState({
-                show: false
-            });
-        } else {
-            this.setState({
-                show: true
-            });
-        }
-    }
-
-    render() {
-        var title = this.state.title;
-        var description = this.state.description;
-        var show = this.state.show;
-        var settings = this.state.settings;
-
-        return (
-            <>
-                <SettingsModalCard title={title} description={description} toggleShow={this.toggleShow} />
-                <Modal show={show} onHide={this.toggleShow}>
-                    <Modal.Header closeButton>
-                        <Modal.Title>{title}</Modal.Title>
-                    </Modal.Header>
-                    <Modal.Body>
-                        {settings.map((e,i) => {
-                            var name = e.obj.name.split('_');
-                            name[0] = this.ucfirst(name[0]);
-                            name = name.join(' ');
-
-                            if(e.obj.description == null || e.obj.description == '') {
-                                var sm = { span: 12 };
-                                var md = { span: 12 };
-                            } else {
-                                var sm = { span: 12 };
-                                var md = { span: 6 };
-                            }
-
-                            var readonly = false;
-                            if(window.config.editable[e.obj.name] == false) {
-                                readonly = true;
-                            }
-
-                            if(e.type == 'info') {
-                                return (
-                                    <Row key={e.obj.id} className="d-flex align-items-center">
-                                        <Col md={md} sm={sm}>
-                                            <p>{e.obj.content}</p>
-                                        </Col>
-                                    </Row>
-                                )
-                            } else if(e.type == 'checkbox') {
-                                return (
-                                    <Row key={e.obj.id} className="d-flex align-items-center">
-                                        <Col  md={md} sm={sm}>
-                                            <Form.Group controlId={e.obj.name}>
-                                                {readonly ?
-                                                    <>
-                                                        <Form.Check type="checkbox" disabled label={name} defaultChecked={Boolean(Number(e.obj.value))} onInput={this.updateValue} />
-                                                        <Form.Text className="text-muted">This setting is defined as an env variable and is not editable.</Form.Text>
-                                                    </>
-                                                :
-                                                    <Form.Check type="checkbox" label={name} defaultChecked={Boolean(Number(e.obj.value))} onInput={this.updateValue} />
-                                                }
-                                            </Form.Group>
-                                        </Col>
-                                        {e.description == null &&
-                                            <Col md={md} sm={sm}>
-                                                <p>{e.obj.description}</p>
-                                            </Col>
-                                        }
-                                    </Row>
-                                );
-                            } else if(e.type == 'number') {
-                                return (
-                                    <Row key={e.obj.id}>
-                                        <Col md={md} sm={sm}>
-                                            <Form.Group controlId={e.obj.name}>
-                                                <Form.Label>{name}</Form.Label>
-                                                {readonly ?
-                                                    <>
-                                                        <Form.Control type="number" disabled min={e.min} max={e.max} defaultValue={e.obj.value} onInput={this.updateValue} />
-                                                        <Form.Text className="text-muted">This setting is defined as an env variable and is not editable.</Form.Text>
-                                                    </>
-                                                :
-                                                    <Form.Control type="number" min={e.min} max={e.max} defaultValue={e.obj.value} onInput={this.updateValue} />
-                                                }
-                                            </Form.Group>
-                                        </Col>
-                                        {e.description == null &&
-                                            <Col md={md} sm={sm}>
-                                                <p>{e.obj.description}</p>
-                                            </Col>
-                                        }
-                                    </Row>
-                                );
-                            } else if(e.type == 'text') {
-                                return (
-                                    <Row key={e.obj.id}>
-                                        <Col md={md} sm={sm}>
-                                            <Form.Group controlId={e.obj.name}>
-                                                <Form.Label>{name}</Form.Label>
-                                                {readonly ?
-                                                    <>
-                                                        <Form.Control type="text" disabled defaultValue={e.obj.value} onInput={this.updateValue} />
-                                                        <Form.Text className="text-muted">This setting is defined as an env variable and is not editable.</Form.Text>
-                                                    </>
-                                                :
-                                                    <Form.Control type="text" defaultValue={e.obj.value} onInput={this.updateValue} />
-                                                }
-                                            </Form.Group>
-                                        </Col>
-                                        {e.description == null &&
-                                            <Col md={md} sm={sm}>
-                                                <p>{e.obj.description}</p>
-                                            </Col>
-                                        }
-                                    </Row>
-                                );
-                            } else if(e.type == 'select') {
-                                return (
-                                    <Row key={e.obj.id}>
-                                        <Col md={md} sm={sm}>
-                                            <Form.Group controlId={e.obj.name}>
-                                                <Form.Label>{name}</Form.Label>
-                                                {readonly ?
-                                                    <>
-                                                        <Form.Control as="select" disabled defaultValue={e.obj.value} onInput={this.updateValue}>
-                                                            {e.options.map((e,i) => {
-                                                                return (
-                                                                    <option key={i} value={e.value}>{e.name}</option>
-                                                                )
-                                                            })}
-                                                        </Form.Control>
-                                                        <Form.Text className="text-muted">This setting is defined as an env variable and is not editable.</Form.Text>
-                                                    </>
-                                                :
-                                                    <Form.Control as="select" defaultValue={e.obj.value} onInput={this.updateValue}>
-                                                        {e.options.map((e,i) => {
-                                                            return (
-                                                                <option key={i} value={e.value}>{e.name}</option>
-                                                            )
-                                                        })}
-                                                    </Form.Control>
-                                                }
-                                            </Form.Group>
-                                        </Col>
-                                        {e.description == null &&
-                                            <Col md={md} sm={sm}>
-                                                <p>{e.obj.description}</p>
-                                            </Col>
-                                        }
-                                    </Row>
-                                )
-                            } else if(e.type == 'button-get') {
-                                return (
-                                    <Row key={e.obj.id}>
-                                        <Col md={md} sm={sm}>
-                                            <p>{name}</p>
-                                            <Button onClick={() => { Axios.get(e.url) }} >{name}</Button>
-                                        </Col>
-                                        {e.description == null &&
-                                            <Col md={md} sm={sm}>
-                                                <p>{e.obj.description}</p>
-                                            </Col>
-                                        }
-                                    </Row>
-                                )
-                            } else if(e.type == 'group') {
-                                return (
-                                    <div key={e.obj.id}>
-                                        <Row>
-                                            <Col md={md} sm={sm}>
-                                                <p className="mb-0">{name}</p>
-                                            </Col>
-                                            {e.description == null &&
-                                                <Col md={md} sm={sm}>
-                                                    <p>{e.obj.description}</p>
-                                                </Col>
-                                            }
-                                        </Row>
-                                        <Row>
-                                            <Col sm={{ span: 12 }}>
-                                                {e.children.map((ee,ii) => {
-                                                    if(ee.type == 'button-get') {
-                                                        return (
-                                                            <Button key={ii} variant={ee.btnType} className={'mr-2 mb-3'} onClick={() => { Axios.get(ee.url)
-                                                                                                                                                .then((resp) => { toast.success('Healthcheck sent') })
-                                                                                                                                                .catch((resp) => { resp = resp.response; toast.error(resp.data.error) })
-                                                            }} >{ee.text}</Button>
-                                                        )
-                                                    }
-                                                })}
-                                            </Col>
-                                        </Row>
-                                    </div>
-                                )
-                            }
-                        })}
-                        <Button variant="primary" type="submit" onClick={this.update} >Save</Button>
-                    </Modal.Body>
-                </Modal>
-            </>
-        );
-    }
-}
-
-if (document.getElementById('Setting')) {
-    ReactDOM.render(<Setting />, document.getElementById('Setting'));
-}

resources/js/components/Settings/Settings.js

@@ -1,301 +0,0 @@
-import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
-import { Modal, Container, Row, Col, Collapse } from 'react-bootstrap';
-import Loader from '../Loader';
-import Axios from 'axios';
-import Setting from './Setting';
-import SettingWithModal from './SettingWithModal';
-import ResetSettings from './ResetSettings';
-
-export default class Settings extends Component {
-    constructor(props) {
-        super(props)
-
-        this.state = {
-            show: false,
-            loading: true,
-            data: [],
-        }
-    }
-
-    componentDidMount = () => {
-        if( (window.config.auth == true && window.authenticated == true) || window.config.auth == false) {
-            this.getData();
-        }
-    }
-
-    toggleShow = () => {
-        if(this.state.show) {
-            var show = false;
-        } else {
-            var show = true;
-        }
-
-        this.setState({
-            show: show
-        });
-    }
-
-    getData = () => {
-        var url = 'api/settings/?token=' + window.token;
-
-        Axios.get(url)
-        .then((resp) => {
-            this.setState({
-                loading: false,
-                data: resp.data
-            });
-        })
-        .catch((err) => {
-            if(err.response) {
-
-            }
-        })
-    }
-
-    buildSettingsCards = () => {
-        var e = this.state.data;
-
-        return (
-            <Row>
-                <Col lg={{ span: 4 }} md={{ span: 6 }} sm={{ span: 12 }}>
-                    <Setting name={e.schedule.name} value={e.schedule.value} description={e.schedule.description} />
-                </Col>
-                <Col lg={{ span: 4 }} md={{ span: 6 }} sm={{ span: 12 }}>
-                    <Setting name={e.server.name} value={e.server.value} description={e.server.description} />
-                </Col>
-                <Col lg={{ span: 4 }} md={{ span: 6 }} sm={{ span: 12 }}>
-                    <SettingWithModal title="Graph settings" description="Control settings for the graphs." autoClose={true} settings={[
-                        {
-                            obj: e.download_upload_graph_enabled,
-                            type: 'checkbox'
-                        },
-                        {
-                            obj: e.download_upload_graph_width,
-                            type: 'select',
-                            options: [
-                                {
-                                    name: 'Full-width',
-                                    'value': 12
-                                },
-                                {
-                                    name: 'Half-width',
-                                    'value': 6
-                                }
-                            ],
-                        },
-                        {
-                            obj: e.ping_graph_enabled,
-                            type: 'checkbox'
-                        },
-                        {
-                            obj: e.ping_graph_width,
-                            type: 'select',
-                            options: [
-                                {
-                                    name: 'Full-width',
-                                    'value': 12
-                                },
-                                {
-                                    name: 'Half-width',
-                                    'value': 6
-                                }
-                            ],
-                        },
-                        {
-                            obj: e.failure_graph_enabled,
-                            type: 'checkbox'
-                        },
-                        {
-                            obj: e.failure_graph_width,
-                            type: 'select',
-                            options: [
-                                {
-                                    name: 'Full-width',
-                                    'value': 12
-                                },
-                                {
-                                    name: 'Half-width',
-                                    'value': 6
-                                }
-                            ],
-                        }
-                    ]} />
-                </Col>
-                <Col lg={{ span: 4 }} md={{ span: 6 }} sm={{ span: 12 }}>
-                    <SettingWithModal title="Notification settings" description="Control which types of notifications the server sends." autoClose={false} settings={[
-                        {
-                            obj: e.slack_webhook,
-                            type: 'text'
-                        },
-                        {
-                            obj: e.telegram_bot_token,
-                            type: 'text'
-                        },
-                        {
-                            obj: e.telegram_chat_id,
-                            type: 'text'
-                        },
-                        {
-                            obj: {
-                                id: (Math.floor(Math.random() * 10000) + 1),
-                                name: "Test notifications",
-                                description: "After saving your updated notification settings, use this to check your settings are correct."
-                            },
-                            type: 'button-get',
-                            url: 'api/settings/test-notification?token=' + window.token
-                        },
-                        {
-                            obj: e.speedtest_notifications,
-                            type: 'checkbox'
-                        },
-                        {
-                            obj: e.speedtest_overview_notification,
-                            type: 'checkbox'
-                        },
-                        {
-                            obj: e.speedtest_overview_time,
-                            type: 'number',
-                            min: 0,
-                            max: 23
-                        },
-                        {
-                            obj: {
-                                id: (Math.floor(Math.random() * 10000) + 1),
-                                name: "Conditional Notifications",
-                                description: ""
-                            },
-                            type: 'group',
-                            children: [
-
-                            ]
-                        },
-                        {
-                            obj: e.threshold_alert_percentage_notifications,
-                            type: 'checkbox',
-                        },
-                        {
-                            obj: e.threshold_alert_percentage,
-                            type: 'number',
-                            min: 0,
-                            max: 100
-                        },
-                        {
-                            obj: e.threshold_alert_absolute_notifications,
-                            type: 'checkbox',
-                        },
-                        {
-                            obj: e.threshold_alert_absolute_download,
-                            type: 'number',
-                        },
-                        {
-                            obj: e.threshold_alert_absolute_upload,
-                            type: 'number',
-                        },
-                        {
-                            obj: e.threshold_alert_absolute_ping,
-                            type: 'number',
-                        }
-                    ]} />
-                </Col>
-                <Col lg={{ span: 4 }} md={{ span: 6 }} sm={{ span: 12 }}>
-                    <SettingWithModal title="healthchecks.io settings" description="Control settings for healthchecks.io" autoClose={false} settings={[
-                        {
-                            obj: e.healthchecks_uuid,
-                            type: 'text'
-                        },
-                        {
-                            obj: e.healthchecks_enabled,
-                            type: 'checkbox'
-                        },
-                        {
-                            obj: {
-                                id: (Math.floor(Math.random() * 10000) + 1),
-                                name: "Test healthchecks (after saving)",
-                                description: ""
-                            },
-                            type: 'group',
-                            children: [
-                                {
-                                    type: 'button-get',
-                                    url: 'api/settings/test-healthchecks/start?token=' + window.token,
-                                    btnType: 'outline-success',
-                                    text: 'Start',
-                                    inline: true,
-                                },
-                                {
-                                    type: 'button-get',
-                                    url: 'api/settings/test-healthchecks/success?token=' + window.token,
-                                    btnType: 'success',
-                                    text: 'Success',
-                                    inline: true,
-                                },
-                                {
-                                    type: 'button-get',
-                                    url: 'api/settings/test-healthchecks/fail?token=' + window.token,
-                                    btnType: 'danger',
-                                    text: 'Fail',
-                                    inline: true,
-                                },
-                            ]
-                        },
-                    ]} />
-                </Col>
-                <Col lg={{ span: 4 }} md={{ span: 6 }} sm={{ span: 12 }}>
-                    <ResetSettings />
-                </Col>
-            </Row>
-        )
-    }
-
-    render() {
-        var show = this.state.show;
-        var loading = this.state.loading;
-        var data = this.state.data;
-        if(!loading) {
-            var cards = this.buildSettingsCards();
-        }
-        if( (window.config.auth == true && window.authenticated == true) || window.config.auth == false) {
-            return (
-                <div>
-                    <Container className="my-4">
-                        <Row>
-                            <Col sm={{ span: 12 }} className="mb-3 text-center">
-                                <div className="mouse" onClick={this.toggleShow}>
-                                    <h4 className="mb-0 mr-2 d-inline">Settings</h4>
-                                    {(show) ?
-                                        <span className="ti-angle-up"></span>
-                                    :
-                                        <span className="ti-angle-down"></span>
-                                    }
-                                </div>
-                            </Col>
-                        </Row>
-                        <Collapse in={show}>
-                            <div>
-                                <Row>
-                                    <Col sm={{ span: 12 }}>
-                                        {loading ?
-                                            <Loader small />
-                                        :
-                                            cards
-                                        }
-                                    </Col>
-                                </Row>
-                            </div>
-                        </Collapse>
-                    </Container>
-
-                </div>
-            );
-        } else {
-            return(
-                <></>
-            )
-        }
-    }
-}
-
-if (document.getElementById('Settings')) {
-    ReactDOM.render(<Settings />, document.getElementById('Settings'));
-}

resources/js/components/Settings/SettingsIndex.js

@@ -0,0 +1,320 @@
+import Axios from 'axios';
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import Footer from '../Home/Footer';
+import Loader from '../Loader';
+import Navbar from '../Navbar';
+import SettingsTabs from './SettingsTabs';
+
+export default class SettingsIndex extends Component {
+    constructor(props) {
+        super(props)
+
+        this.state = {
+            data: null,
+            loading: true,
+        }
+    }
+
+    getData = () => {
+        var url = 'api/settings/?token=' + window.token;
+
+        Axios.get(url)
+        .then((resp) => {
+            this.setState({
+                data: this.sortSettings(resp.data),
+                loading: false,
+            });
+        })
+        .catch((err) => {
+            //
+        })
+    }
+
+    sortSettings = (data) => {
+        return {
+            General: [
+                {
+                    obj: data.app_name,
+                    type: 'text',
+                },
+                {
+                    obj: data.schedule_enabled,
+                    type: 'checkbox',
+                },
+                {
+                    obj: data.schedule,
+                    type: 'text',
+                },
+                {
+                    obj: data.server,
+                    type: 'text',
+                },
+                {
+                    obj: data.show_average,
+                    type: 'checkbox',
+                },
+                {
+                    obj: data.show_max,
+                    type: 'checkbox',
+                },
+                {
+                    obj: data.show_min,
+                    type: 'checkbox',
+                }
+            ],
+            Tables: [
+                {
+                    obj: data.visible_columns,
+                    type: 'list'
+                },
+                {
+                    obj: data.hidden_columns,
+                    type: 'list'
+                }
+            ],
+            Graphs: [
+                {
+                    obj: data.download_upload_graph_enabled,
+                    type: 'checkbox',
+                    hideDescription: true
+                },
+                {
+                    obj: data.download_upload_graph_width,
+                    type: 'select',
+                    options: [
+                        {
+                            name: 'Full-width',
+                            'value': 12
+                        },
+                        {
+                            name: 'Half-width',
+                            'value': 6
+                        }
+                    ],
+                },
+                {
+                    obj: data.ping_graph_enabled,
+                    type: 'checkbox',
+                    hideDescription: true
+                },
+                {
+                    obj: data.ping_graph_width,
+                    type: 'select',
+                    options: [
+                        {
+                            name: 'Full-width',
+                            'value': 12
+                        },
+                        {
+                            name: 'Half-width',
+                            'value': 6
+                        }
+                    ],
+                },
+                {
+                    obj: data.failure_graph_enabled,
+                    type: 'checkbox',
+                    hideDescription: true
+                },
+                {
+                    obj: data.failure_graph_width,
+                    type: 'select',
+                    options: [
+                        {
+                            name: 'Full-width',
+                            'value': 12
+                        },
+                        {
+                            name: 'Half-width',
+                            'value': 6
+                        }
+                    ],
+                },
+                {
+                    obj: data.show_failed_tests_on_graph,
+                    type: 'checkbox',
+                },
+            ],
+            Notifications: [
+                {
+                    obj: data.slack_webhook,
+                    type: 'text'
+                },
+                {
+                    obj: data.telegram_bot_token,
+                    type: 'text'
+                },
+                {
+                    obj: data.telegram_chat_id,
+                    type: 'text'
+                },
+                {
+                    type: 'btn-get',
+                    url: 'api/settings/test-notification?token=' + window.token,
+                    btnType: 'primary',
+                    obj: {
+                        id: (Math.floor(Math.random() * 10000) + 1),
+                        name: 'Test notifications',
+                        description: 'After saving your updated notification settings, use this to check your settings are correct.'
+                    }
+                },
+                {
+                    obj: data.speedtest_notifications,
+                    type: 'checkbox'
+                },
+                {
+                    obj: data.speedtest_overview_notification,
+                    type: 'checkbox'
+                },
+                {
+                    obj: data.speedtest_overview_time,
+                    type: 'number',
+                    min: 0,
+                    max: 23,
+                },
+                // Add handling for title stuff
+                {
+                    obj: data.threshold_alert_percentage,
+                    type: 'number',
+                    min: 0,
+                    max: 100
+                },
+                {
+                    obj: data.threshold_alert_absolute_notifications,
+                    type: 'checkbox'
+                },
+                {
+                    obj: data.threshold_alert_absolute_download,
+                    type: 'number'
+                },
+                {
+                    obj: data.threshold_alert_absolute_upload,
+                    type: 'number'
+                },
+                {
+                    obj: data.threshold_alert_absolute_ping,
+                    type: 'number'
+                },
+            ],
+            healthchecks: [
+                {
+                    obj: data.healthchecks_enabled,
+                    type: 'checkbox'
+                },
+                {
+                    obj: data.healthchecks_server_url,
+                    type: 'text'
+                },
+                {
+                    obj: data.healthchecks_uuid,
+                    type: 'text'
+                },
+                {
+                    obj: {
+                        id: (Math.floor(Math.random() * 10000) + 1),
+                        name: "Test healthchecks.io integration",
+                        description: ""
+                    },
+                },
+                {
+                    obj: {
+                        id: (Math.floor(Math.random() * 10000) + 1),
+                        name: "Start",
+                        description: ""
+                    },
+                    type: 'btn-get',
+                    url: 'api/settings/test-healthchecks/start?token=' + window.token,
+                    btnType: 'outline-success',
+                    inline: true,
+                    earlyReturn: true,
+                    classes: 'mr-2'
+                },
+                {
+                    obj: {
+                        id: (Math.floor(Math.random() * 10000) + 1),
+                        name: "Success",
+                        description: ""
+                    },
+                    type: 'btn-get',
+                    url: 'api/settings/test-healthchecks/success?token=' + window.token,
+                    btnType: 'success',
+                    text: 'Success',
+                    inline: true,
+                    earlyReturn: true,
+                    classes: 'mr-2'
+                },
+                {
+                    obj: {
+                        id: (Math.floor(Math.random() * 10000) + 1),
+                        name: "Fail",
+                        description: ""
+                    },
+                    type: 'btn-get',
+                    url: 'api/settings/test-healthchecks/fail?token=' + window.token,
+                    btnType: 'danger',
+                    text: 'Fail',
+                    inline: true,
+                    earlyReturn: true,
+                    classes: 'mr-2'
+                },
+
+            ],
+            influxdb: [
+                {
+                    obj: data.influx_db_enabled,
+                    type: 'checkbox'
+                },
+                {
+                    obj: data.influx_db_host,
+                    type: 'text'
+                },
+                {
+                    obj: data.influx_db_port,
+                    type: 'number'
+                },
+                {
+                    obj: data.influx_db_database,
+                    type: 'text'
+                },
+                {
+                    obj: data.influx_db_username,
+                    type: 'text',
+                    autoComplete: false,
+                },
+                {
+                    obj: data.influx_db_password,
+                    type: 'password',
+                    autoComplete: false,
+                }
+            ],
+        };
+    }
+
+    componentDidMount() {
+        this.getData();
+    }
+
+    render() {
+        var data = this.state.data;
+        var loading = this.state.loading;
+
+        return (
+            <div>
+                <Navbar />
+                <div className="container my-5">
+                    {loading ?
+                        <Loader />
+                        :
+                        <SettingsTabs data={data} refreshConfig={this.props.refreshConfig} />
+                    }
+                </div>
+                <Footer />
+            </div>
+        );
+    }
+}
+
+if (document.getElementById('settingsIndex')) {
+    ReactDOM.render(<SettingsIndex />, document.getElementById('settingsIndex'));
+}

resources/js/components/Settings/SettingsInput.js

@@ -0,0 +1,202 @@
+import React, { Component } from 'react';
+import { Form } from 'react-bootstrap';
+import ReactDOM from 'react-dom';
+
+export default class SettingsInput extends Component {
+    constructor(props) {
+        super(props)
+
+        this.state = {
+            type: this.props.type,
+            name: this.props.name,
+            displayName: (this.props.name) ? this.formatName(this.props.name) : '',
+            value: (this.props.value) ? this.props.value : '',
+            classes: this.props.classes,
+            id: this.props.id,
+            label: (this.props.label) ? this.props.label : false,
+            readonly: true,
+            description: (this.props.description) ? this.props.description : false,
+            options: this.props.options ? this.props.options : [],
+            hideDescription: this.props.hideDescription ? true : false,
+            min: this.props.min ? this.props.min : null,
+            max: this.props.max ? this.props.max : null,
+            url: this.props.url,
+            inline: this.props.inline ? 'd-inline-block' : 'd-block',
+            btnType: this.props.btnType,
+            earlyReturn: this.props.earlyReturn ? true : false,
+            autoComplete: String(this.props.autoComplete ? true : Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 7)),
+        }
+    }
+
+    componentDidMount() {
+        this.setState({
+            readonly: this.isReadOnly()
+        });
+    }
+
+    formatName(name) {
+        name = name.split('_').join(' ');
+
+        return name.charAt(0).toUpperCase() + name.slice(1);
+    }
+
+    handleInput = (evt) => {
+        var val = evt.target.value;
+
+        if(this.state.type === 'checkbox') {
+            val = evt.target.checked;
+        }
+
+        this.props.handler(
+            this.state.name,
+            val
+        );
+
+        this.setState({
+            value: val
+        });
+    }
+
+    isReadOnly = () => {
+        if(window.config.editable[this.state.name] == false) {
+            return true;
+        }
+
+        return false;
+    }
+
+    generateNumberInput(disabled) {
+        return <Form.Control
+            name={this.state.name}
+            type={this.state.type}
+            defaultValue={this.state.value}
+            disabled={disabled}
+            min={this.state.min}
+            max={this.state.max}
+            onInput={this.handleInput}
+            autoComplete={this.state.autoComplete} />
+    }
+
+    generateSelectInput(disabled) {
+        return (
+            <Form.Control
+                as="select"
+                name={this.state.name}
+                type={this.state.type}
+                defaultValue={this.state.value}
+                disabled={disabled}
+                onInput={this.handleInput}
+            >
+                {this.state.options.map((option,i) => {
+                    return <option key={i} value={option.value}>{option.name}</option>
+                })}
+            </Form.Control>
+        );
+    }
+
+    generateCheckboxInput(disabled) {
+        return <Form.Control
+            custom
+            className="ml-2"
+            name={this.state.name}
+            type={this.state.type}
+            defaultChecked={this.state.value}
+            disabled={disabled}
+            onInput={this.handleInput} />
+    }
+
+    generateTextInput(disabled) {
+        return <Form.Control
+            name={this.state.name}
+            type={this.state.type}
+            defaultValue={this.state.value}
+            disabled={disabled}
+            onInput={this.handleInput}
+            autoComplete={this.state.autoComplete} />
+    }
+
+    generatePasswordInput(disabled) {
+        return <Form.Control
+            name={this.state.name}
+            type={this.state.type}
+            defaultValue={this.state.value}
+            disabled={disabled}
+            onInput={this.handleInput}
+            autoComplete={this.state.autoComplete} />
+    }
+
+    generateButtonGetInput() {
+        var url = this.state.url;
+
+        return (
+            <button
+                type="button"
+                className={"btn btn-" + this.state.btnType + ' ' + this.state.inline + ' ' + this.state.classes}
+                onClick={() => {
+                    window.axios.get(url)
+                }}
+            >{this.state.displayName}</button>
+        );
+    }
+
+    generateInput = () => {
+        var disabled = (this.state.readonly) ? true : false;
+        var input = null;
+
+        if(this.state.type === 'number') {
+            input = this.generateNumberInput(disabled);
+        }
+
+        if(this.state.type === 'select') {
+            input = this.generateSelectInput(disabled);
+        }
+
+        if(this.state.type === 'checkbox') {
+            input = this.generateCheckboxInput(disabled);
+        }
+
+        if(this.state.type === 'text') {
+            input = this.generateTextInput(disabled);
+        }
+
+        if(this.state.type === 'password') {
+            input = this.generatePasswordInput(disabled);
+        }
+
+        if(this.state.type === 'btn-get') {
+            input = this.generateButtonGetInput();
+        }
+
+        if(this.state.earlyReturn) {
+            return input;
+        }
+
+        return (
+            <Form.Group controlId={this.state.id}>
+                {this.state.label &&
+                    <Form.Label style={{fontSize: '1.25rem'}}>{this.formatName(this.state.name)}</Form.Label>
+                }
+
+                {input}
+
+                {this.state.description && !this.state.hideDescription &&
+                    <p className="mt-1 text-muted" dangerouslySetInnerHTML={{ __html: this.state.description }}></p>
+                }
+
+                {this.state.readonly &&
+                    <Form.Text className="text-muted">This setting is defined as an env variable and is not editable.</Form.Text>
+                }
+            </Form.Group>
+        );
+    }
+
+    render() {
+        var input = this.generateInput();
+
+        return input;
+    }
+}
+
+if (document.getElementById('SettingsInput')) {
+    ReactDOM.render(<SettingsInput />, document.getElementById('SettingsInput'));
+}

resources/js/components/Settings/SettingsModalCard.js

@@ -1,37 +0,0 @@
-import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
-import { Card, Button } from 'react-bootstrap';
-
-export default class SettingsModalCard extends Component {
-    constructor(props) {
-        super(props)
-
-        this.state = {
-            title: this.props.title,
-            description: this.props.description,
-            toggleShow: this.props.toggleShow,
-        }
-    }
-
-    render() {
-        var title = this.state.title;
-        var description = this.state.description;
-        var toggleShow = this.state.toggleShow;
-
-        return (
-            <Card className="m-2 setting-card">
-                <Card.Body className="d-flex align-items-center">
-                    <div>
-                        <h4>{title}</h4>
-                        <p>{description}</p>
-                        <Button variant="primary" onClick={toggleShow}>Edit</Button>
-                    </div>
-                </Card.Body>
-            </Card>
-        );
-    }
-}
-
-if (document.getElementById('SettingModalCard')) {
-    ReactDOM.render(<SettingsModalCard />, document.getElementById('SettingModalCard'));
-}

resources/js/components/Settings/SettingsTabs.js

@@ -0,0 +1,192 @@
+import Axios from 'axios';
+import React, { Component } from 'react';
+import { Nav, Tab, Tabs } from 'react-bootstrap';
+import ReactDOM from 'react-dom';
+import { toast } from 'react-toastify';
+import SettingsInput from './SettingsInput';
+import ResetSettings from './tabs/ResetSettings';
+import BackupSettings from './tabs/BackupSettings';
+import GeneralSettings from './tabs/GeneralSettings';
+import GraphsSettings from './tabs/GraphsSettings';
+import HealthchecksSettings from './tabs/HealthchecksSettings';
+import NotificationsSettings from './tabs/NotificationsSettings';
+import Authentication from '../Authentication/Authentication';
+import TableSettings from './tabs/TableSettings';
+import InfluxDBSettings from './tabs/InfluxDBSettings';
+
+export default class SettingsTabs extends Component {
+    constructor(props) {
+        super(props)
+
+        this.state = {
+            tab: "General",
+            data: this.props.data
+        }
+    }
+
+    generateTabs = () => {
+        var tabs = [
+            'General',
+            'Graphs',
+            'Tables',
+            'Notifications',
+            'healthchecks.io',
+            'InfluxDB',
+            'Reset',
+            'Backup/Restore',
+        ];
+
+        if(window.config.auth) {
+            tabs.push('Authentication');
+        }
+
+        return tabs.map((tab) => {
+            return <Tab key={tab} eventKey={tab} title={tab} />
+        });
+    }
+
+    switchTab = (tab) => {
+        this.setState({
+            tab: tab
+        });
+    }
+
+    save = (settings, name) => {
+        var url = 'api/settings/bulk?token=' + window.token;
+        var data = [];
+
+        settings.forEach(e => {
+            if(e.type !== 'btn-get') {
+                var res = {
+                    name: e.obj.name,
+                    value: e.obj.value
+                };
+                data.push(res);
+            }
+        });
+
+        data = {
+            data: data
+        };
+
+        Axios.post(url, data)
+        .then((resp) => {
+            toast.success(name + ' settings updated');
+            Axios.get('api/settings/config')
+            .then((resp) => {
+                window.config = resp.data;
+            })
+        })
+        .catch((err) => {
+            if(err.response.status == 422) {
+                toast.error('Your input was invalid');
+            } else {
+                toast.error('Something went wrong')
+            }
+        })
+    }
+
+    generateInputs = (settings, handler) => {
+        return settings.map((setting) => {
+            return <SettingsInput
+                        key={setting.obj.id}
+                        name={setting.obj.name}
+                        id={setting.obj.id}
+                        type={setting.type}
+                        value={setting.obj.value}
+                        description={setting.obj.description}
+                        handler={handler}
+                        label={setting.obj.name}
+                        description={setting.obj.description}
+                        options={setting.type == 'select' ? setting.options : []}
+                        hideDescription={setting.hideDescription ? setting.hideDescription : false}
+                        min={setting.min ? setting.min : false}
+                        max={setting.max ? setting.max : false}
+                        btnType={setting.btnType}
+                        inline={setting.inline}
+                        url={setting.url}
+                        earlyReturn={setting.earlyReturn ? true : false}
+                        classes={setting.classes ? setting.classes : ''}
+                        autoComplete={setting.autoComplete ? true : false}
+                    />
+        })
+    }
+
+    getTabContent = () => {
+        var data = this.state.data;
+
+        switch(this.state.tab) {
+            case 'General':
+                return <GeneralSettings
+                            data={data.General}
+                            generateInputs={this.generateInputs}
+                            save={this.save} />
+            case 'Graphs':
+                return <GraphsSettings
+                            data={data.Graphs}
+                            generateInputs={this.generateInputs}
+                            save={this.save} />
+            case 'Tables':
+                return <TableSettings
+                            data={data.Tables}
+                            refreshConfig={this.props.refreshConfig}
+                            save={this.save} />
+            case 'Notifications':
+                return <NotificationsSettings
+                            data={data.Notifications}
+                            generateInputs={this.generateInputs}
+                            save={this.save} />
+            case 'healthchecks.io':
+                return <HealthchecksSettings
+                            data={data.healthchecks}
+                            generateInputs={this.generateInputs}
+                            save={this.save} />
+            case 'InfluxDB':
+                return <InfluxDBSettings
+                            data={data.influxdb}
+                            generateInputs={this.generateInputs}
+                            save={this.save} />
+            case 'Reset':
+                return <ResetSettings
+                            data={data.healthchecks}
+                            generateInputs={this.generateInputs}
+                            save={this.save} />
+            case 'Backup/Restore':
+                return <BackupSettings
+                            data={data.healthchecks}
+                            generateInputs={this.generateInputs}
+                            save={this.save} />
+            case 'Authentication':
+                return <Authentication
+                            data={data.healthchecks}
+                            generateInputs={this.generateInputs}
+                            save={this.save} />
+        }
+    }
+
+    render() {
+        var tabs = this.generateTabs();
+        var activeTab = this.state.tab;
+        var tabContent = this.getTabContent();
+
+        return (
+            <div>
+                <Tabs
+                    variant="tabs"
+                    onSelect={(tab) => { this.switchTab(tab) }}
+                    activeKey={activeTab}
+                >
+                    {tabs}
+                </Tabs>
+
+                <div className="mt-3">
+                    {tabContent}
+                </div>
+            </div>
+        );
+    }
+}
+
+if (document.getElementById('settingsTabs')) {
+    ReactDOM.render(<SettingsTabs />, document.getElementById('settingsTabs'));
+}