Add metered connection and usability check (#4168)

* Add Metered connection and usability check

* Add network speed to status bar

* Add network type

* Introduce network status

* Rephrase option

* Add network info to setup tab

* Reserve statusbar for something else

* Make sonar happy

locales/en/messages.json

@@ -138,6 +138,10 @@
     "rememberLastTab": {
         "message": "Reopen last tab on connect"
     },
+    "meteredConnection": {
+        "message": "Disable internet access (for metered or slow connections)",
+        "description": "Text for the option to disable internet access for metered connection or to disable data over slow connections"
+    },
     "analyticsOptOut": {
         "message": "Opt out of the anonymised collection of statistics data"
     },
@@ -1198,6 +1202,34 @@
     "initialSetupEepromSaved": {
         "message": "EEPROM <span class=\"message-positive\">saved</span>"
     },
+    "initialSetupNetworkInfo": {
+        "message": "Network info"
+    },
+    "initialSetupNetworkInfoHelp": {
+        "message": "Shows network connection status",
+        "description": "Message that pops up to describe the Network Connection section"
+    },
+    "initialSetupNetworkInfoStatus": {
+        "message": "Status:"
+    },
+    "initialSetupNetworkInfoStatusOnline": {
+        "message": "Online"
+    },
+    "initialSetupNetworkInfoStatusOffline": {
+        "message": "Offline"
+    },
+    "initialSetupNetworkInfoStatusSlow": {
+        "message": "Slow"
+    },
+    "initialSetupNetworkType": {
+        "message": "Type:"
+    },
+    "initialSetupNetworkRtt": {
+        "message": "RTT:"
+    },
+    "initialSetupNetworkDownlink": {
+        "message": "Downlink:"
+    },
     "featureNone": {
         "message": "&lt;Select One&gt;"
     },

src/js/Sponsor.js

@@ -1,15 +1,16 @@
 import BuildApi from './BuildApi';
 import DarkTheme from './DarkTheme';
+import { ispConnected } from './utils/connection';
 
 export default class Sponsor {
 
     constructor () {
         this._api = new BuildApi();
-        this._timer = setInterval(() => { this.Refresh(); }, 30000);
+        this._timer = ispConnected() ? setInterval(() => { this.Refresh(); }, 30000) : null;
     }
 
     Refresh() {
-        if (!navigator.onLine) {
+        if (!ispConnected()) {
             return;
         }
 

src/js/serial_backend.js

@@ -25,6 +25,7 @@ import BuildApi from "./BuildApi";
 
 import { serialShim } from "./serial_shim.js";
 import { EventBus } from "../components/eventBus";
+import { ispConnected } from "./utils/connection";
 
 let serial = serialShim();
 
@@ -463,7 +464,7 @@ function checkReportProblems() {
 
         if (needsProblemReportingDialog) {
 
-            problems.map((problem) => {
+            problems.forEach((problem) => {
                 problemItemTemplate.clone().html(problem.description).appendTo(problemDialogList);
             });
 
@@ -491,7 +492,7 @@ async function processBuildOptions() {
 
     // firmware 1_45 or higher is required to support cloud build options
     // firmware 1_46 or higher retrieves build options from the flight controller
-    if (supported && FC.CONFIG.buildKey.length === 32 && navigator.onLine) {
+    if (supported && FC.CONFIG.buildKey.length === 32 && ispConnected()) {
         const buildApi = new BuildApi();
 
         function onLoadCloudBuild(options) {

src/js/tabs/cli.js

@@ -12,6 +12,7 @@ import jBox from "jbox";
 import $ from 'jquery';
 import { serialShim } from "../serial_shim";
 import FileSystem from "../FileSystem";
+import { ispConnected } from "../utils/connection";
 
 const serial =  serialShim();
 
@@ -229,7 +230,7 @@ cli.initialize = function (callback) {
         });
 
         $('a.support')
-        .toggle(navigator.onLine)
+        .toggle(ispConnected())
         .on('click', function() {
 
             function submitSupportData(data) {

src/js/tabs/firmware_flasher.js

@@ -18,6 +18,7 @@ import DFU from '../protocols/webusbdfu';
 import AutoBackup from '../utils/AutoBackup.js';
 import AutoDetect from '../utils/AutoDetect.js';
 import { EventBus } from "../../components/eventBus";
+import { ispConnected } from '../utils/connection.js';
 
 const firmware_flasher = {
     targets: null,
@@ -147,7 +148,7 @@ firmware_flasher.initialize = function (callback) {
         }
 
         function loadTargetList(targets) {
-            if (!targets || !navigator.onLine) {
+            if (!targets || !ispConnected()) {
                 $('select[name="board"]').empty().append('<option value="0">Offline</option>');
                 $('select[name="firmware_version"]').empty().append('<option value="0">Offline</option>');
 
@@ -214,7 +215,7 @@ firmware_flasher.initialize = function (callback) {
         }
 
         function buildOptions(data) {
-            if (!navigator.onLine) {
+            if (!ispConnected()) {
                 return;
             }
 
@@ -1133,7 +1134,7 @@ firmware_flasher.initialize = function (callback) {
     }
 
     self.buildApi.loadTargets(() => {
-       $('#content').load("./tabs/firmware_flasher.html", onDocumentLoad);
+        $('#content').load("./tabs/firmware_flasher.html", onDocumentLoad);
     });
 };
 
@@ -1142,7 +1143,7 @@ firmware_flasher.initialize = function (callback) {
 
 
 firmware_flasher.validateBuildKey = function() {
-    return this.cloudBuildKey?.length === 32 && navigator.onLine;
+    return this.cloudBuildKey?.length === 32 && ispConnected();
 };
 
 firmware_flasher.cleanup = function (callback) {

src/js/tabs/gps.js

@@ -11,6 +11,7 @@ import { mspHelper } from '../msp/MSPHelper';
 import { updateTabList } from '../utils/updateTabList';
 import { initMap } from './map';
 import { fromLonLat } from "ol/proj";
+import { ispConnected } from "../utils/connection";
 
 const gps = {};
 
@@ -352,7 +353,7 @@ gps.initialize = async function (callback) {
 
             let gpsFoundPosition = false;
 
-            if (navigator.onLine) {
+            if (ispConnected()) {
                 $('#connect').hide();
 
                 gpsFoundPosition = !!(lon && lat);
@@ -382,7 +383,7 @@ gps.initialize = async function (callback) {
         }, 75, true);
 
         //check for internet connection on load
-        if (navigator.onLine) {
+        if (ispConnected()) {
             console.log('Online');
             set_online();
         } else {
@@ -391,7 +392,7 @@ gps.initialize = async function (callback) {
         }
 
         $("#check").on('click',function(){
-            if (navigator.onLine) {
+            if (ispConnected()) {
                 console.log('Online');
                 set_online();
             } else {

src/js/tabs/options.js

@@ -8,6 +8,7 @@ import { checkForConfiguratorUpdates } from '../utils/checkForConfiguratorUpdate
 import { checkSetupAnalytics } from '../Analytics';
 import $ from 'jquery';
 import NotificationManager from '../utils/notifications';
+import { ispConnected } from '../utils/connection';
 
 const options = {};
 options.initialize = function (callback) {
@@ -30,6 +31,7 @@ options.initialize = function (callback) {
         TABS.options.initShowDevToolsOnStartup();
         TABS.options.initShowNotifications();
         TABS.options.initShowWarnings();
+        TABS.options.initMeteredConnection();
 
         GUI.content_ready(callback);
     });
@@ -228,6 +230,18 @@ options.initShowNotifications = function () {
         .change();
 };
 
+options.initMeteredConnection = function () {
+    const result = getConfig("meteredConnection");
+    $("div.meteredConnection input")
+        .prop("checked", !!result.meteredConnection)
+        .on('change', function () {
+            setConfig({ meteredConnection: $(this).is(":checked") });
+            // update network status
+            ispConnected();
+        })
+        .trigger('change');
+};
+
 // TODO: remove when modules are in place
 TABS.options = options;
 export { options };

src/js/tabs/setup.js

@@ -11,6 +11,7 @@ import MSPCodes from '../msp/MSPCodes';
 import { API_VERSION_1_45, API_VERSION_1_46 } from '../data_storage';
 import { gui_log } from '../gui_log';
 import $ from 'jquery';
+import { ispConnected } from '../utils/connection';
 
 const setup = {
     yaw_fix: 0.0,
@@ -411,7 +412,7 @@ setup.initialize = function (callback) {
         const showBuildInfo = function() {
             const supported = FC.CONFIG.buildKey.length === 32;
 
-            if (supported && navigator.onLine) {
+            if (supported && ispConnected()) {
                 const buildRoot   = `https://build.betaflight.com/api/builds/${FC.CONFIG.buildKey}`;
                 const buildConfig = `<span class="buildInfoBtn" title="${i18n.getMessage('initialSetupInfoBuildConfig')}: ${buildRoot}/json">
                                     <a href="${buildRoot}/json" target="_blank"><strong>${i18n.getMessage('initialSetupInfoBuildConfig')}</strong></a></span>`;
@@ -426,7 +427,7 @@ setup.initialize = function (callback) {
         };
 
         const showBuildOptions = function() {
-            const supported = (semver.eq(FC.CONFIG.apiVersion, API_VERSION_1_45) && navigator.onLine || semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_46)) && FC.CONFIG.buildOptions.length;
+            const supported = (semver.eq(FC.CONFIG.apiVersion, API_VERSION_1_45) && ispConnected() || semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_46)) && FC.CONFIG.buildOptions.length;
 
             if (supported) {
                 let buildOptionList = `<div class="dialogBuildInfoGrid-container">`;
@@ -464,9 +465,33 @@ setup.initialize = function (callback) {
             }
         }
 
+        function showNetworkStatus() {
+            const networkStatus = ispConnected();
+
+            let statusText = '';
+
+            const type = navigator.connection.effectiveType;
+            const downlink = navigator.connection.downlink;
+            const rtt = navigator.connection.rtt;
+
+            if (!networkStatus || !navigator.onLine || type === 'none') {
+                statusText = i18n.getMessage('initialSetupNetworkInfoStatusOffline');
+            } else if (type === 'slow-2g' || type === '2g' || downlink < 0.115 || rtt > 1000) {
+                statusText = i18n.getMessage('initialSetupNetworkInfoStatusSlow');
+            } else {
+                statusText = i18n.getMessage('initialSetupNetworkInfoStatusOnline');
+            }
+
+            $('.network-status').text(statusText);
+            $('.network-type').text(navigator.connection.effectiveType);
+            $('.network-downlink').text(`${navigator.connection.downlink} Mbps`);
+            $('.network-rtt').text(navigator.connection.rtt);
+        }
+
         prepareDisarmFlags();
         showSensorInfo();
         showFirmwareInfo();
+        showNetworkStatus();
 
         // Show Sonar info box if sensor exist
         if (!have_sensor(FC.CONFIG.activeSensors, 'sonar')) {

src/js/utils/connection.js

@@ -0,0 +1,9 @@
+import { get as getConfig } from "../ConfigStorage";
+
+export function ispConnected() {
+    const connected = navigator.onLine;
+    const isMetered = getConfig('meteredConnection').meteredConnection;
+
+    return connected && !isMetered;
+}
+

src/tabs/options.html

@@ -17,6 +17,12 @@
                     </div>
                     <span class="freelabel" i18n="rememberLastTab"></span>
                 </div>
+                <div class="meteredConnection margin-bottom">
+                    <div>
+                        <input type="checkbox" class="toggle" />
+                    </div>
+                    <span class="freelabel" i18n="meteredConnection"></span>
+                </div>
                 <div class="analyticsOptOut margin-bottom">
                     <div>
                         <input type="checkbox" class="toggle" />

src/tabs/setup.html

@@ -235,6 +235,34 @@
                         </table>
                     </div>
                 </div>
+                <div class="gui_box grey">
+                    <div class="gui_box_titlebar">
+                        <div class="spacer_box_title" i18n="initialSetupNetworkInfo"></div>
+                        <div class="helpicon cf_tip" i18n_title="initialSetupNetworkInfoHelp"></div>
+                    </div>
+                    <div class="spacer_box">
+                        <table width="100%" border="0" cellpadding="0" cellspacing="0" class="cf_table" role="presentation">
+                            <tbody>
+                                <tr>
+                                    <td id="network-status" i18n="initialSetupNetworkInfoStatus"></td>
+                                    <td class="network-status"></td>
+                                </tr>
+                                <tr>
+                                    <td id="network-type" i18n="initialSetupNetworkType"></td>
+                                    <td class="network-type"></td>
+                                </tr>
+                                <tr>
+                                    <td id="network-downlink" i18n="initialSetupNetworkDownlink"></td>
+                                    <td class="network-downlink"></td>
+                                </tr>
+                                <tr>
+                                    <td id="network-rtt" i18n="initialSetupNetworkRtt"></td>
+                                    <td class="network-rtt"></td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
             </div>
         </div>
     </div>