Merge pull request #685 from gnmyt/features/interface-chooser

👨‍💻 Interfaceauswahl hinzugefügt

Author: gnmyt

client/public/assets/locales/en.json

@@ -34,11 +34,11 @@
       "description": "MySpeed could not reach the API of this instance. Please try again later."
     },
     "provider": {
+      "interface": "Interface",
       "server": "Server",
       "server_id": "Server ID",
       "choose_automatically": "Choose automatically",
-      "ookla_license": "I have read and accept the <Eula>EULA</Eula>, <GDPR>privacy policy</GDPR> and <TOS>terms of service</TOS> of Ookla.",
-      "cloudflare_note": "Cloudflare does not require any additional settings"
+      "ookla_license": "I have read and accept the <Eula>EULA</Eula>, <GDPR>privacy policy</GDPR> and <TOS>terms of service</TOS> of Ookla."
     }
   },
   "dropdown": {
@@ -210,7 +210,7 @@
     },
     "result": {
       "title": "Test result",
-      "description": "This test achieved a maximum download speed of <Bold>{{down}} Mbps</Bold> and a maximum upload speed of <Bold>{{up}} Mbps</Bold>. It was created <Bold>{{type}}</Bold> and took <Bold>{{duration}} Seconds</Bold>.",
+      "description": "<Link>This test</Link> achieved a maximum download speed of <Bold>{{down}} Mbps</Bold> and a maximum upload speed of <Bold>{{up}} Mbps</Bold>. It was created <Bold>{{type}}</Bold> and took <Bold>{{duration}} Seconds</Bold>.",
       "from_you": "by you",
       "automatic": "automatically"
     },

client/src/common/components/ProviderDialog/ProviderDialog.jsx

@@ -28,6 +28,8 @@ export const Dialog = () => {
     const [licenseAccepted, setLicenseAccepted] = useState(false);
     const [licenseError, setLicenseError] = useState(false);
 
+    const [interfaces, setInterfaces] = useState({});
+    const [currentInterface, setCurrentInterface] = useState(config.interface || "none");
     const [ooklaServers, setOoklaServers] = useState({});
     const [libreServers, setLibreServers] = useState({});
 
@@ -40,6 +42,9 @@ export const Dialog = () => {
         jsonRequest("/info/server/libre").then((response) => {
             setLibreServers(response);
         });
+        jsonRequest("/info/interfaces").then((response) => {
+            setInterfaces(response);
+        });
     }, []);
 
     useEffect(() => {
@@ -62,6 +67,10 @@ export const Dialog = () => {
             await patchRequest("/config/" + provider + "Id", {value: serverId});
         }
 
+        if (currentInterface !== config.interface) {
+            await patchRequest("/config/interface", {value: currentInterface});
+        }
+
         reloadConfig();
         updateToast(t('dropdown.provider_changed'), "green", faCheck);
 
@@ -84,43 +93,53 @@ export const Dialog = () => {
                         </div>
                     ))}
                 </div>
-                {provider !== "cloudflare" && <div className="provider-content">
+                <div className="provider-content">
                     <div className="provider-setting">
-                        <h3>{t("dialog.provider.server")}</h3>
-                        <select className="dialog-input provider-input" value={serverId}
-                                onChange={(e) => setServerId(e.target.value)}>
-                            <option value="none">{t("dialog.provider.choose_automatically")}</option>
-                            {provider === "ookla" && Object.keys(ooklaServers).map((current, index) => (
-                                <option key={index} value={current}>{ooklaServers[current]}</option>
-                            ))}
-                            {provider === "libre" && Object.keys(libreServers).map((current, index) => (
-                                <option key={index} value={current}>{libreServers[current]}</option>
+                        <h3>{t("dialog.provider.interface")}</h3>
+                        <select className="dialog-input provider-input" value={currentInterface}
+                                onChange={(e) => setCurrentInterface(e.target.value)}>
+                            {interfaces && Object.keys(interfaces).map((current, index) => (
+                                <option key={index} value={current}>{current} ({interfaces[current]})</option>
                             ))}
                         </select>
                     </div>
-                    <div className="provider-setting">
-                        <h3>{t("dialog.provider.server_id")}</h3>
-                        <input type="text" className="dialog-input provider-input" value={serverId === "none" ? "" : serverId}
-                                 onChange={(e) => setServerId(e.target.value)}/>
-                    </div>
-                </div>}
-                {provider === "cloudflare" && <div className="provider-content">
-                    <p className="cloudflare-provider-info">{t("dialog.provider.cloudflare_note")}</p>
-                </div>}
+
+                    {provider !== "cloudflare" && <>
+                        <div className="provider-setting">
+                            <h3>{t("dialog.provider.server")}</h3>
+                            <select className="dialog-input provider-input" value={serverId}
+                                    onChange={(e) => setServerId(e.target.value)}>
+                                <option value="none">{t("dialog.provider.choose_automatically")}</option>
+                                {provider === "ookla" && Object.keys(ooklaServers).map((current, index) => (
+                                    <option key={index} value={current}>{ooklaServers[current]}</option>
+                                ))}
+                                {provider === "libre" && Object.keys(libreServers).map((current, index) => (
+                                    <option key={index} value={current}>{libreServers[current]}</option>
+                                ))}
+                            </select>
+                        </div>
+                        <div className="provider-setting">
+                            <h3>{t("dialog.provider.server_id")}</h3>
+                            <input type="text" className="dialog-input provider-input"
+                                   value={serverId === "none" ? "" : serverId}
+                                   onChange={(e) => setServerId(e.target.value)}/>
+                        </div>
+                    </>}
+                </div>
             </div>
             <div className="provider-dialog-footer">
                 <div className="provider-license-box">
                     {provider === "ookla" && <>
                         <input type="checkbox" className={licenseError ? "cb-error" : ""} id="license" name="license"
-                                 onChange={(e) => setLicenseAccepted(e.target.checked)}/>
+                               onChange={(e) => setLicenseAccepted(e.target.checked)}/>
                         <label htmlFor="license"
                         ><Trans components={{
                             Eula: <a href="https://www.speedtest.net/about/eula" target="_blank"
-                                     rel="noreferrer" />,
+                                     rel="noreferrer"/>,
                             GDPR: <a href="https://www.speedtest.net/about/privacy" target="_blank"
-                                     rel="noreferrer" />,
+                                     rel="noreferrer"/>,
                             TOS: <a href="https://www.speedtest.net/about/terms" target="_blank"
-                                    rel="noreferrer" />}}>dialog.provider.ookla_license</Trans></label>
+                                    rel="noreferrer"/>}}>dialog.provider.ookla_license</Trans></label>
                     </>}
                 </div>
 

client/src/common/contexts/Dialog/styles.sass

@@ -66,6 +66,7 @@
 
 .dialog-description a
   color: $green
+  text-decoration: underline
 
 .dialog-value
   color: $green

client/src/pages/Home/components/Speedtest/utils/infos.jsx

@@ -2,11 +2,14 @@ import React from "react";
 import {Trans} from "react-i18next";
 import {t} from "i18next";
 
+const RESULT_URL = "https://www.speedtest.net/result/c/";
+
 export const averageResultDialog = (timeString, props) => <Trans components={{Bold: <span className="dialog-value"/> }}
                                                                  values={{amount: props.amount, date: timeString, down: props.down,
                                                                      up: props.up, duration: props.duration}}>test.average.description</Trans>
 
-export const resultDialog = (props) => <Trans components={{Bold: <span className="dialog-value"/> }}
+export const resultDialog = (props) => <Trans components={{Bold: <span className="dialog-value"/>,
+    Link: (props.resultId ? <a href={RESULT_URL + props.resultId} target="_blank" rel="noreferrer"/> : <span/>) }}
                                               values={{down: props.down, up: props.up,
                                                   type: t("test.result." + (props.type === "custom" ? "from_you" : "automatic")),
                                                   duration: props.duration}}>test.result.description</Trans>

client/src/pages/Home/components/TestArea/TestAreaComponent.jsx

@@ -36,6 +36,7 @@ function TestArea() {
                                   type={test.type}
                                   duration={test.time}
                                   amount={test.amount}
+                                  resultId={test.resultId}
                                   id={id}
                 />
             }) : ""}

server/controller/config.js

@@ -10,6 +10,7 @@ const cron = require('cron-validator');
 const db = require("../config/database");
 const fs = require('fs');
 const path = require('path');
+const interfaces = require('../util/loadInterfaces');
 
 const configDefaults = {
     ping: "25",
@@ -20,14 +21,23 @@ const configDefaults = {
     ooklaId: "none",
     libreId: "none",
     password: "none",
-    passwordLevel: "none"
+    passwordLevel: "none",
+    interface: "none"
 }
 
 module.exports.insertDefaults = async () => {
     let insert = [];
     for (let key in configDefaults) {
-        if (!(await config.findOne({where: {key: key}})))
+        if (key !== "interface" && !(await config.findOne({where: {key: key}})))
             insert.push({key: key, value: configDefaults[key]});
+
+        if (key === "interface") {
+            const ips = Object.keys(interfaces.interfaces);
+            let ip = ips.length > 0 ? ips[0] : "none";
+
+            if (!(await config.findOne({where: {key: key}})))
+                insert.push({key: key, value: ip});
+        }
     }
 
     await config.bulkCreate(insert, {validate: true});
@@ -94,6 +104,9 @@ module.exports.validateInput = async (key, value) => {
     if (key === "cron" && !cron.isValidCron(value.toString()))
         return "Not a valid cron expression";
 
+    if (key === "interface" && !Object.keys(interfaces.interfaces).includes(value))
+        return "The provided interface does not exist";
+
     if (configDefaults[key] === undefined)
         return "The provided key does not exist";
 
@@ -174,5 +187,7 @@ module.exports.factoryReset = async () => {
     timer.stopTimer();
     timer.startTimer(configDefaults.cron);
 
+    interfaces.requestInterfaces();
+
     return true;
 }

server/controller/speedtests.js

@@ -2,8 +2,8 @@ const tests = require('../models/Speedtests');
 const {Op, Sequelize} = require("sequelize");
 const {mapFixed, mapRounded, calculateTestAverages} = require("../util/helpers");
 
-module.exports.create = async (ping, download, upload, time, serverId, type = "auto", error = null) => {
-    return (await tests.create({ping, download, upload, error, serverId, type, time})).id;
+module.exports.create = async (ping, download, upload, time, serverId, type = "auto", resultId = null, error = null) => {
+    return (await tests.create({ping, download, upload, error, serverId, type, resultId, time, created: new Date().toISOString()})).id;
 }
 
 module.exports.getOne = async (id) => {
@@ -15,8 +15,10 @@ module.exports.getOne = async (id) => {
 
 module.exports.listAll = async () => {
     let dbEntries = await tests.findAll({order: [["created", "DESC"]]});
-    for (let dbEntry of dbEntries)
+    for (let dbEntry of dbEntries) {
         if (dbEntry.error === null) delete dbEntry.error;
+        if (dbEntry.resultId === null) delete dbEntry.resultId;
+    }
 
     return dbEntries;
 }
@@ -28,8 +30,10 @@ module.exports.listTests = async (hours = 24, start, limit) => {
     let dbEntries = (await tests.findAll({where: whereClause, order: [["created", "DESC"]], limit}))
         .filter((entry) => new Date(entry.created) > new Date().getTime() - hours * 3600000);
 
-    for (let dbEntry of dbEntries)
+    for (let dbEntry of dbEntries) {
         if (dbEntry.error === null) delete dbEntry.error;
+        if (dbEntry.resultId === null) delete dbEntry.resultId;
+    }
 
     return dbEntries;
 }
@@ -84,6 +88,7 @@ module.exports.importTests = async (data) => {
 
     for (let entry of data) {
         if (entry.error === null) delete entry.error;
+        if (entry.resultId === null) delete entry.resultId;
         try {
             await tests.create(entry);
         } catch (e) {

server/index.js

@@ -43,6 +43,9 @@ const run = async () => {
 
     await require('./controller/integrations').initialize();
 
+    await require('./util/loadInterfaces').requestInterfaces();
+    setInterval(() => require('./util/loadInterfaces').requestInterfaces(), 3600000);
+
     if (process.env.PREVIEW_MODE !== "true") await require('./util/loadCli').load();
 
     await config.insertDefaults();
@@ -60,7 +63,7 @@ const run = async () => {
 
 db.authenticate().then(() => {
     console.log("Successfully connected to the database " + (process.env.DB_TYPE === "mysql" ? "server" : "file"));
-        run().then(undefined);
+    run().then(undefined);
 }).catch(err => {
     console.error("Could not open the database file. Maybe it is damaged?: " + err.message);
     process.exit(111);

server/models/Speedtests.js

@@ -31,8 +31,16 @@ module.exports = db.define("speedtests", {
         type: Sequelize.STRING,
         defaultValue: "auto"
     },
+    resultId: {
+        type: Sequelize.STRING,
+        allowNull: true
+    },
     time: {
         type: Sequelize.INTEGER,
         defaultValue: 0
+    },
+    created: {
+        type: Sequelize.TIME,
+        defaultValue: Sequelize.NOW
     }
-}, {createdAt: "created", updatedAt: false});
+}, {createdAt: false, updatedAt: false});

server/routes/system.js

@@ -4,6 +4,7 @@ const remote_url = "https://api.github.com/repos/gnmyt/myspeed/releases/latest";
 const axios = require('axios');
 const password = require('../middlewares/password');
 const serverController = require('../controller/servers');
+const interfaces = require('../util/loadInterfaces');
 
 app.get("/version", password(false), async (req, res) => {
     if (process.env.PREVIEW_MODE === "true") return res.json({local: version, remote: "0"});
@@ -22,4 +23,8 @@ app.get("/server/:provider", password(false), (req, res) => {
     res.json(serverController.getByMode(req.params.provider));
 });
 
+app.get("/interfaces", password(false), async (req, res) => {
+    res.json(interfaces.interfaces);
+});
+
 module.exports = app;