diff --git a/app/Http/Controllers/HomepageDataController.php b/app/Http/Controllers/HomepageDataController.php
index fc69020a..256fe189 100644
--- a/app/Http/Controllers/HomepageDataController.php
+++ b/app/Http/Controllers/HomepageDataController.php
@@ -5,6 +5,7 @@ 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;
@@ -28,6 +29,7 @@ class HomepageDataController extends Controller
'latest' => run(GetLatestSpeedtestData::class),
'time' => run(GetSpeedtestTimeData::class),
'fail' => run(GetFailedSpeedtestData::class),
+ 'config' => SettingsHelper::getConfig(),
];
}
}
diff --git a/public/js/app.js b/public/js/app.js
index c27d0f3c..4b930133 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -134704,239 +134704,23 @@ var HistoryGraph = /*#__PURE__*/function (_Component) {
_this = _super.call(this, props);
- _defineProperty(_assertThisInitialized(_this), "componentDidMount", function () {
- _this.getData();
-
- var _int = setInterval(_this.getData, 10000);
-
- _this.setState({
- interval: _int
- });
- });
-
- _defineProperty(_assertThisInitialized(_this), "getDLULPing", function (days) {
- var url = 'api/speedtest/time/' + days;
- axios__WEBPACK_IMPORTED_MODULE_2___default.a.get(url).then(function (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: function label(item) {
- return "".concat(item.yLabel, " Mbit/s");
- }
- }
- },
- 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
- }
- }
- };
- var pingData = {
- labels: [],
- datasets: [{
- data: [],
- label: 'Ping',
- borderColor: "#07db71",
- fill: false
- }]
- };
- var pingOptions = {
- maintainAspectRatio: false,
- responsive: true,
- tooltips: {
- callbacks: {
- label: function label(item) {
- return "".concat(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
- }
- }
- };
- resp.data.data.forEach(function (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"](function (err) {
- console.log(err);
- });
- });
-
- _defineProperty(_assertThisInitialized(_this), "getFailure", function (days) {
- var url = 'api/speedtest/fail/' + days;
- axios__WEBPACK_IMPORTED_MODULE_2___default.a.get(url).then(function (resp) {
- var failData = {
- labels: [],
- datasets: [{
- data: [],
- label: 'Successful',
- backgroundColor: '#07db71'
- }, {
- data: [],
- label: 'Failed',
- backgroundColor: '#E74C3C'
- }]
- };
- var failOptions = {
- maintainAspectRatio: false,
- responsive: true,
- tooltips: {
- callbacks: {
- label: function label(item) {
- return "".concat(item.yLabel, " speedtests");
- }
- }
- },
- scales: {
- xAxes: [{
- stacked: true
- }],
- yAxes: [{
- stacked: true
- }]
- }
- };
- resp.data.data.forEach(function (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"](function (err) {
- console.log(err);
- });
- });
-
- _defineProperty(_assertThisInitialized(_this), "getData", function () {
- var days = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.state.days;
- axios__WEBPACK_IMPORTED_MODULE_2___default.a.get('api/settings/config').then(function (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
- });
-
- _this.getDLULPing(days);
-
- _this.getFailure(days);
- })["catch"](function (err) {
- console.log('Couldn\'t get the site config');
- console.log(err);
- });
- });
+ _defineProperty(_assertThisInitialized(_this), "componentDidMount", function () {});
_defineProperty(_assertThisInitialized(_this), "updateDays", function (e) {
var days = e.target.value;
if (days) {
- _this.getData(days);
-
- clearInterval(_this.state["int"]);
-
- var _int2 = setInterval(_this.getData, 10000);
-
react_toastify__WEBPACK_IMPORTED_MODULE_5__["toast"].info('Showing results for the last ' + days + ' days');
- _this.setState({
- days: days,
- interval: _int2
- });
+ _this.props.updateDays(days);
}
});
_this.state = {
- days: 7,
+ days: props.days,
+ time: props.dlUl,
+ fail: props.fail,
+ config: props.config,
duData: {},
duOptions: {},
pingData: {},
@@ -134950,15 +134734,224 @@ var HistoryGraph = /*#__PURE__*/function (_Component) {
graph_failure_enabled: true,
graph_failure_width: 6,
graph_ping_enabled: true,
- graph_ping_width: 6
+ graph_ping_width: 6,
+ firstUpdate: false
};
return _this;
}
_createClass(HistoryGraph, [{
- key: "componentWillUnmount",
- value: function componentWillUnmount() {
- clearInterval(this.state.interval);
+ key: "componentDidUpdate",
+ value: function 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
+ });
+ }
+ }
+ }, {
+ key: "processData",
+ value: function processData() {
+ this.processConfig();
+ this.processDlUlPing();
+ this.processFailure();
+ }
+ }, {
+ key: "processConfig",
+ value: function processConfig() {
+ this.setState({
+ 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
+ });
+ }
+ }, {
+ key: "processDlUlPing",
+ value: function processDlUlPing() {
+ var days = this.state.days;
+ 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: function label(item) {
+ return "".concat(item.yLabel, " Mbit/s");
+ }
+ }
+ },
+ 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
+ }
+ }
+ };
+ var pingData = {
+ labels: [],
+ datasets: [{
+ data: [],
+ label: 'Ping',
+ borderColor: "#07db71",
+ fill: false
+ }]
+ };
+ var pingOptions = {
+ maintainAspectRatio: false,
+ responsive: true,
+ tooltips: {
+ callbacks: {
+ label: function label(item) {
+ return "".concat(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(function (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
+ });
+ }
+ }, {
+ key: "processFailure",
+ value: function processFailure() {
+ var days = this.state.days;
+ var failData = {
+ labels: [],
+ datasets: [{
+ data: [],
+ label: 'Successful',
+ backgroundColor: '#07db71'
+ }, {
+ data: [],
+ label: 'Failed',
+ backgroundColor: '#E74C3C'
+ }]
+ };
+ var failOptions = {
+ maintainAspectRatio: false,
+ responsive: true,
+ tooltips: {
+ callbacks: {
+ label: function label(item) {
+ return "".concat(item.yLabel, " speedtests");
+ }
+ }
+ },
+ scales: {
+ xAxes: [{
+ stacked: true
+ }],
+ yAxes: [{
+ stacked: true
+ }]
+ }
+ };
+ this.state.fail.forEach(function (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
+ });
}
}, {
key: "render",
@@ -135187,32 +135180,6 @@ var LatestResults = /*#__PURE__*/function (_Component) {
_this = _super.call(this, props);
- _defineProperty(_assertThisInitialized(_this), "componentDidMount", function () {
- _this.getData();
-
- var _int = setInterval(_this.getData, 10000);
-
- _this.setState({
- interval: _int
- });
- });
-
- _defineProperty(_assertThisInitialized(_this), "getData", function () {
- var url = 'api/speedtest/latest';
- axios__WEBPACK_IMPORTED_MODULE_2___default.a.get(url).then(function (resp) {
- _this.setState({
- data: resp.data,
- loading: false
- });
- })["catch"](function (err) {
- _this.setState({
- data: false
- });
-
- console.log(err);
- });
- });
-
_defineProperty(_assertThisInitialized(_this), "newScan", function () {
var url = 'api/speedtest/run?token=' + window.token;
axios__WEBPACK_IMPORTED_MODULE_2___default.a.get(url).then(function (resp) {
@@ -135231,7 +135198,7 @@ var LatestResults = /*#__PURE__*/function (_Component) {
});
_this.state = {
- data: {},
+ data: props.data,
interval: null,
loading: true
};
@@ -135239,6 +135206,16 @@ var LatestResults = /*#__PURE__*/function (_Component) {
}
_createClass(LatestResults, [{
+ key: "componentDidUpdate",
+ value: function componentDidUpdate() {
+ if (this.state.data !== this.props.data) {
+ this.setState({
+ data: this.props.data,
+ loading: false
+ });
+ }
+ }
+ }, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
clearInterval(this.state.interval);
@@ -136022,6 +135999,8 @@ __webpack_require__.r(__webpack_exports__);
/* harmony import */ var _Login__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../Login */ "./resources/js/components/Login.js");
/* harmony import */ var _Authentication_Authentication__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../Authentication/Authentication */ "./resources/js/components/Authentication/Authentication.js");
/* harmony import */ var _Navbar__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../Navbar */ "./resources/js/components/Navbar.js");
+/* harmony import */ var axios__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! axios */ "./node_modules/axios/index.js");
+/* harmony import */ var axios__WEBPACK_IMPORTED_MODULE_10___default = /*#__PURE__*/__webpack_require__.n(axios__WEBPACK_IMPORTED_MODULE_10__);
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -136044,6 +136023,9 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+
@@ -136060,18 +136042,79 @@ var HomePage = /*#__PURE__*/function (_Component) {
var _super = _createSuper(HomePage);
- function HomePage() {
+ function HomePage(props) {
+ var _this;
+
_classCallCheck(this, HomePage);
- return _super.apply(this, arguments);
+ _this = _super.call(this, props);
+
+ _defineProperty(_assertThisInitialized(_this), "componentDidMount", function () {
+ _this.getData();
+
+ var interval = setInterval(_this.getData, 10000);
+
+ _this.setState({
+ interval: interval
+ });
+ });
+
+ _defineProperty(_assertThisInitialized(_this), "updateDays", function (days) {
+ _this.setState({
+ days: days
+ });
+
+ _this.getData();
+ });
+
+ _defineProperty(_assertThisInitialized(_this), "getData", function () {
+ axios__WEBPACK_IMPORTED_MODULE_10___default.a.get('api/speedtest/home/' + _this.state.days).then(function (resp) {
+ _this.setState({
+ latest: resp.data.latest,
+ time: resp.data.time,
+ fail: resp.data.fail,
+ config: resp.data.config
+ });
+ })["catch"](function (err) {
+ console.log(err);
+ });
+ });
+
+ _this.state = {
+ latest: null,
+ time: null,
+ fail: null,
+ config: null,
+ days: 7,
+ interval: null
+ };
+ return _this;
}
_createClass(HomePage, [{
+ key: "componentWillUnmount",
+ value: function componentWillUnmount() {
+ clearInterval(this.state.interval);
+ }
+ }, {
key: "render",
value: function render() {
+ var latest = this.state.latest;
+ var time = this.state.time;
+ var fail = this.state.fail;
+ var config = this.state.config;
+ var days = this.state.days;
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_Navbar__WEBPACK_IMPORTED_MODULE_9__["default"], null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
className: "my-4"
- }, window.config.auth == true && window.authenticated == false && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_Login__WEBPACK_IMPORTED_MODULE_7__["default"], null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_Graphics_LatestResults__WEBPACK_IMPORTED_MODULE_3__["default"], null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_Graphics_HistoryGraph__WEBPACK_IMPORTED_MODULE_2__["default"], null)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_Footer__WEBPACK_IMPORTED_MODULE_4__["default"], null));
+ }, window.config.auth == true && window.authenticated == false && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_Login__WEBPACK_IMPORTED_MODULE_7__["default"], null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_Graphics_LatestResults__WEBPACK_IMPORTED_MODULE_3__["default"], {
+ data: latest
+ }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_Graphics_HistoryGraph__WEBPACK_IMPORTED_MODULE_2__["default"], {
+ updateDays: this.updateDays,
+ dlUl: time,
+ fail: fail,
+ config: config,
+ days: days
+ })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_Footer__WEBPACK_IMPORTED_MODULE_4__["default"], null));
}
}]);
diff --git a/resources/js/components/Graphics/HistoryGraph.js b/resources/js/components/Graphics/HistoryGraph.js
index 4eb4e49f..d1620a9b 100644
--- a/resources/js/components/Graphics/HistoryGraph.js
+++ b/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,233 +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,
});
}
- componentWillUnmount() {
- clearInterval(this.state.interval);
- }
+ processDlUlPing() {
+ let days = this.state.days;
- getDLULPing = (days) => {
- var url = 'api/speedtest/time/' + 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);
}
}
diff --git a/resources/js/components/Graphics/LatestResults.js b/resources/js/components/Graphics/LatestResults.js
index dd1bd5dc..c2a4fe01 100644
--- a/resources/js/components/Graphics/LatestResults.js
+++ b/resources/js/components/Graphics/LatestResults.js
@@ -12,42 +12,25 @@ 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,
+ });
+ }
}
componentWillUnmount() {
clearInterval(this.state.interval);
}
- 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);
- })
- }
-
newScan = () => {
var url = 'api/speedtest/run?token=' + window.token;
diff --git a/resources/js/components/Home/HomePage.js b/resources/js/components/Home/HomePage.js
index 9c1a20b2..58544c71 100644
--- a/resources/js/components/Home/HomePage.js
+++ b/resources/js/components/Home/HomePage.js
@@ -8,10 +8,62 @@ import TestsTable from '../Graphics/TestsTable';
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 (
@@ -19,8 +71,8 @@ export default class HomePage extends Component {
{(window.config.auth == true && window.authenticated == false) &&
}
-
-
+
+
diff --git a/routes/api.php b/routes/api.php
index 5e2913ae..939628e3 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -1,7 +1,12 @@
[ 'api' ],
+ 'middleware' => ['api'],
'prefix' => 'speedtest'
-], function($router) {
- Route::get('/', 'SpeedtestController@index')
- ->name('speedtest.index');
- Route::get('latest', 'SpeedtestController@latest')
- ->name('speedtest.latest');
- Route::get('time/{time}', 'SpeedtestController@time')
- ->name('speedtest.time');
- Route::get('fail/{time}', 'SpeedtestController@fail')
- ->name('speedtest.fail');
- Route::get('run', 'SpeedtestController@run')
- ->name('speedtest.run');
+], function ($router) {
+ Route::get('/', [SpeedtestController::class, 'index'])
+ ->name('speedtest.index');
+ Route::get('latest', [SpeedtestController::class, 'latest'])
+ ->name('speedtest.latest');
+ Route::get('time/{time}', [SpeedtestController::class, 'time'])
+ ->name('speedtest.time');
+ Route::get('fail/{time}', [SpeedtestController::class, 'fail'])
+ ->name('speedtest.fail');
+ Route::get('run', [SpeedtestController::class, 'run'])
+ ->name('speedtest.run');
+ Route::get('home/{time}', HomepageDataController::class)
+ ->name('speedtest.home');
Route::group([
'prefix' => 'delete'
], function () {
- Route::delete('all', 'SpeedtestController@deleteAll');
- Route::delete('{speedtest}', 'SpeedtestController@delete');
+ Route::delete('all', [SpeedtestController::class, 'deleteAll']);
+ Route::delete('{speedtest}', [SpeedtestController::class, 'delete']);
});
});
Route::group([
'middleware' => 'api'
], function () {
- Route::get('backup', 'BackupController@backup')
- ->name('data.backup');
- Route::post('restore', 'BackupController@restore')
- ->name('data.restore');
+ Route::get('backup', [BackupController::class, 'backup'])
+ ->name('data.backup');
+ Route::post('restore', [BackupController::class, 'restore'])
+ ->name('data.restore');
});
Route::group([
'middleware' => 'api',
'prefix' => 'update',
], function () {
- Route::get('changelog', 'UpdateController@changelog')
- ->name('update.changelog');
- Route::get('check', 'UpdateController@checkForUpdate')
- ->name('update.check');
- Route::get('download', 'UpdateController@downloadUpdate')
- ->name('update.download');
- Route::get('extract', 'UpdateController@extractUpdate')
- ->name('update.extract');
- Route::get('move', 'UpdateController@moveUpdate')
- ->name('update.move');
+ Route::get('changelog', [UpdateController::class, 'changelog'])
+ ->name('update.changelog');
+ Route::get('check', [UpdateController::class, 'checkForUpdate'])
+ ->name('update.check');
+ Route::get('download', [UpdateController::class, 'downloadUpdate'])
+ ->name('update.download');
+ Route::get('extract', [UpdateController::class, 'extractUpdate'])
+ ->name('update.extract');
+ Route::get('move', [UpdateController::class, 'moveUpdate'])
+ ->name('update.move');
});
Route::group([
'middleware' => 'api',
'prefix' => 'settings'
], function () {
- Route::get('/config', 'SettingsController@config')
- ->name('settings.config');
+ Route::get('/config', [SettingsController::class, 'config'])
+ ->name('settings.config');
Route::get('/test-notification', 'IntegrationsController@testNotification')
- ->name('settings.test_notification');
+ ->name('settings.test_notification');
Route::get('/test-healthchecks/{method}', 'IntegrationsController@testHealthchecks')
- ->name('settings.test_notification');
- Route::get('/', 'SettingsController@index')
- ->name('settings.index');
- Route::put('/', 'SettingsController@store')
- ->name('settings.store');
- Route::post('/', 'SettingsController@store')
- ->name('settings.update');
- Route::post('/bulk', 'SettingsController@bulkStore')
- ->name('settings.bulk.update');
+ ->name('settings.test_notification');
+ Route::get('/', [SettingsController::class, 'index'])
+ ->name('settings.index');
+ Route::put('/', [SettingsController::class, 'store'])
+ ->name('settings.store');
+ Route::post('/', [SettingsController::class, 'store'])
+ ->name('settings.update');
+ Route::post('/bulk', [SettingsController::class, 'bulkStore'])
+ ->name('settings.bulk.update');
});
Route::group(
@@ -91,21 +98,21 @@ Route::group(
'prefix' => 'auth'
],
function ($router) {
- Route::post('register', 'AuthController@register')->name('auth.register');
- Route::post('login', 'AuthController@login')->middleware('throttle:60,1')->name('auth.login');
- Route::get('logout', 'AuthController@logout')->name('auth.logout');
- Route::get('refresh', 'AuthController@refresh')->middleware('throttle:60,1')->name('auth.refresh');
- Route::get('me', 'AuthController@me')->middleware('session_active')->name('auth.me');
- Route::post('change-password', 'AuthController@changePassword')->middleware('session_active')->name('auth.change_password');
+ Route::post('register', [AuthController::class, 'register'])->name('auth.register');
+ Route::post('login', [AuthController::class, 'login'])->middleware('throttle:60,1')->name('auth.login');
+ Route::get('logout', [AuthController::class, 'logout'])->name('auth.logout');
+ Route::get('refresh', [AuthController::class, 'refresh'])->middleware('throttle:60,1')->name('auth.refresh');
+ Route::get('me', [AuthController::class, 'me'])->middleware('session_active')->name('auth.me');
+ Route::post('change-password', [AuthController::class, 'changePassword'])->middleware('session_active')->name('auth.change_password');
Route::group(
[
'middleware' => ['api', 'session_active'],
'prefix' => 'sessions'
],
- function($router) {
- Route::get('/', 'AuthController@getSessions')->name('auth.sessions.all');
- Route::delete('/{id}', 'AuthController@deleteSession')->name('auth.sessions.delete');
+ function ($router) {
+ Route::get('/', [AuthController::class, 'getSessions'])->name('auth.sessions.all');
+ Route::delete('/{id}', [AuthController::class, 'deleteSession'])->name('auth.sessions.delete');
}
);
}