2.5.43: download wifi scan button added to wifi scan modal

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "ucentral-client",
-  "version": "2.5.42",
+  "version": "2.5.43",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "ucentral-client",
-      "version": "2.5.42",
+      "version": "2.5.43",
       "dependencies": {
         "@coreui/coreui": "^3.4.0",
         "@coreui/icons": "^2.0.1",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ucentral-client",
-  "version": "2.5.42",
+  "version": "2.5.43",
   "dependencies": {
     "@coreui/coreui": "^3.4.0",
     "@coreui/icons": "^2.0.1",

public/locales/de/translation.json

@@ -596,7 +596,7 @@
 		"channel": "Kanal",
 		"directions": "Starten Sie einen WiFi-Scan dieses Geräts, der ungefähr 25 Sekunden dauern sollte.",
 		"re_scan": "Erneut scannen",
-		"result_directions": "Bitte klicken Sie auf die Schaltfläche '$t(scan.re_scan)', wenn Sie einen Scan mit derselben Konfiguration wie beim letzten Scan durchführen möchten.",
+		"result_directions": "Sie können oben rechts auf die Schaltfläche „Scannen“ klicken, um $t(scan.re_scan)",
 		"results": "Ergebnisse des WiFi-Scans",
 		"scan": "Scan",
 		"scanning": "Scannen... ",

public/locales/en/translation.json

@@ -596,7 +596,7 @@
 		"channel": "Channel",
 		"directions": "Launch a wifi scan of this device, which should take approximately 25 seconds.",
 		"re_scan": "Re-Scan",
-		"result_directions": "Please click the '$t(scan.re_scan)' button if you would like to do a scan with the same configuration as the last.",
+		"result_directions": "You can click the 'Scan' button at the top right to $t(scan.re_scan)",
 		"results": "Wi-Fi Scan Results",
 		"scan": "Scan",
 		"scanning": "Scanning... ",

public/locales/es/translation.json

@@ -596,7 +596,7 @@
 		"channel": "Canal",
 		"directions": "Ejecute un escaneo wifi de este dispositivo, que debería tomar aproximadamente 25 segundos.",
 		"re_scan": "Vuelva a escanear",
-		"result_directions": "Haga clic en el botón '$ t (scan.re_scan)' si desea realizar un escaneo con la misma configuración que el anterior.",
+		"result_directions": "Puede hacer clic en el botón 'Escanear' en la parte superior derecha para $t(scan.re_scan)",
 		"results": "Resultados de escaneo Wi-Fi",
 		"scan": "Escanear",
 		"scanning": "Exploración... ",

public/locales/fr/translation.json

@@ -596,7 +596,7 @@
 		"channel": "Canal",
 		"directions": "Lancez une analyse wifi de cet appareil, ce qui devrait prendre environ 25 secondes.",
 		"re_scan": "Nouvelle analyse",
-		"result_directions": "Veuillez cliquer sur le bouton '$t(scan.re_scan)' si vous souhaitez effectuer un scan avec la même configuration que le précédent.",
+		"result_directions": "Vous pouvez cliquer sur le bouton 'Scan' en haut à droite pour $t(scan.re_scan)",
 		"results": "Résultats de l'analyse Wi-Fi",
 		"scan": "Balayage",
 		"scanning": "Balayage... ",

public/locales/pt/translation.json

@@ -596,7 +596,7 @@
 		"channel": "Canal",
 		"directions": "Inicie uma verificação de wi-fi deste dispositivo, o que deve levar aproximadamente 25 segundos.",
 		"re_scan": "Verificar novamente",
-		"result_directions": "Clique no botão '$ t (scan.re_scan)' se desejar fazer uma varredura com a mesma configuração da anterior.",
+		"result_directions": "Você pode clicar no botão 'Scan' no canto superior direito para $t(scan.re_scan)",
 		"results": "Resultados da verificação de Wi-Fi",
 		"scan": "Varredura",
 		"scanning": "Scanning... ",

src/components/WifiScanModal/index.js

@@ -5,7 +5,6 @@ import {
   CModalHeader,
   CModalTitle,
   CModalBody,
-  CModalFooter,
   CRow,
   CForm,
   CSwitch,
@@ -14,15 +13,17 @@ import {
   CPopover,
 } from '@coreui/react';
 import CIcon from '@coreui/icons-react';
-import { cilX } from '@coreui/icons';
+import { cilCloudDownload, cilMagnifyingGlass, cilX } from '@coreui/icons';
-import React, { useState, useEffect } from 'react';
+import React, { useCallback, useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
 import axiosInstance from 'utils/axiosInstance';
 import eventBus from 'utils/eventBus';
-import { LoadingButton, useAuth, useDevice } from 'ucentral-libs';
+import { prettyDateForFile } from 'utils/helper';
+import { useAuth, useDevice } from 'ucentral-libs';
 import WifiChannelTable from 'components/WifiScanResultModal/WifiChannelTable';
 import 'react-widgets/styles.css';
+import { CSVLink } from 'react-csv';
 
 const WifiScanModal = ({ show, toggleModal }) => {
   const { t } = useTranslation();
@@ -36,6 +37,7 @@ const WifiScanModal = ({ show, toggleModal }) => {
   const [activeScan, setActiveScan] = useState(false);
   const [hideOptions, setHideOptions] = useState(false);
   const [channelList, setChannelList] = useState([]);
+  const [csvData, setCsvData] = useState(null);
 
   const toggleDfs = () => {
     setDfs(!dfs);
@@ -50,6 +52,7 @@ const WifiScanModal = ({ show, toggleModal }) => {
     setHadFailure(false);
     setWaiting(false);
     setChannelList([]);
+    setCsvData(null);
     setDfs(true);
     setActiveScan(false);
     setHideOptions(false);
@@ -76,7 +79,10 @@ const WifiScanModal = ({ show, toggleModal }) => {
       scanList.forEach((device) => {
         if (device.channel === channelNumber) {
           const deviceToAdd = {};
-          deviceToAdd.SSID = device.ssid ?? 'N/A';
+          if (device.ssid && device.ssid.length > 0) deviceToAdd.SSID = device.ssid;
+          else {
+            deviceToAdd.SSID = device.meshid && device.meshid.length > 0 ? device.meshid : 'N/A';
+          }
           deviceToAdd.Signal = (dbmNumber - device.signal) * -1;
           channel.devices.push(deviceToAdd);
         }
@@ -87,6 +93,40 @@ const WifiScanModal = ({ show, toggleModal }) => {
     return finalList;
   };
 
+  const getData = useCallback((scanResults) => {
+    if (scanResults === null || scanResults.length === 0) return [];
+    const dbmNumber = 4294967295;
+    const listOfChannels = [];
+    const listCsv = [];
+
+    scanResults.forEach((scan) => {
+      if (!listOfChannels.includes(scan.channel)) {
+        listOfChannels.push(scan.channel);
+      }
+    });
+
+    listOfChannels.forEach((channelNumber) => {
+      const channel = {
+        channel: channelNumber,
+        devices: [],
+      };
+
+      scanResults.forEach((device) => {
+        if (device.channel === channelNumber) {
+          const deviceToAdd = {};
+          if (device.ssid && device.ssid.length > 0) deviceToAdd.SSID = device.ssid;
+          else {
+            deviceToAdd.SSID = device.meshid && device.meshid.length > 0 ? device.meshid : 'N/A';
+          }
+          deviceToAdd.Signal = (dbmNumber - device.signal) * -1;
+          channel.devices.push(deviceToAdd);
+          listCsv.push({ ...deviceToAdd, ...device });
+        }
+      });
+    });
+    return listCsv;
+  }, []);
+
   const doAction = () => {
     setHadFailure(false);
     setHadSuccess(false);
@@ -113,6 +153,7 @@ const WifiScanModal = ({ show, toggleModal }) => {
 
         if (scanList) {
           setChannelList(parseThroughList(scanList));
+          setCsvData(getData(scanList));
           setErrorCode(response.data.errorCode ?? 0);
           setHideOptions(true);
           setHadSuccess(true);
@@ -134,6 +175,35 @@ const WifiScanModal = ({ show, toggleModal }) => {
       <CModalHeader className="p-1">
         <CModalTitle className="pl-1 pt-1">{t('actions.wifi_scan')}</CModalTitle>
         <div className="text-right">
+          {csvData !== null ? (
+            <CPopover content={t('common.download')}>
+              <CSVLink
+                filename={`wifi_scan_${deviceSerialNumber}_${prettyDateForFile(
+                  new Date().getTime() / 1000,
+                )}.csv`}
+                data={csvData}
+              >
+                <CButton color="primary" variant="outline" className="ml-2">
+                  <CIcon content={cilCloudDownload} />
+                </CButton>
+              </CSVLink>
+            </CPopover>
+          ) : (
+            <CButton color="primary" variant="outline" className="ml-2" disabled>
+              <CIcon content={cilCloudDownload} />
+            </CButton>
+          )}
+          <CPopover content={t('scan.scan')}>
+            <CButton
+              color="primary"
+              variant="outline"
+              className="ml-2"
+              onClick={doAction}
+              disabled={waiting}
+            >
+              <CIcon content={cilMagnifyingGlass} />
+            </CButton>
+          </CPopover>
           <CPopover content={t('common.close')}>
             <CButton color="primary" variant="outline" className="ml-2" onClick={toggleModal}>
               <CIcon content={cilX} />
@@ -205,20 +275,6 @@ const WifiScanModal = ({ show, toggleModal }) => {
           <WifiChannelTable channels={channelList} />
         </div>
       </CModalBody>
-      <CModalFooter>
-        <LoadingButton
-          label={!hadSuccess && !hadFailure ? t('scan.scan') : t('scan.re_scan')}
-          isLoadingLabel={t('scan.scanning')}
-          isLoading={waiting}
-          action={doAction}
-          variant="outline"
-          block={false}
-          disabled={waiting}
-        />
-        <CButton color="secondary" onClick={toggleModal}>
-          {!hadSuccess && !hadFailure ? t('common.cancel') : t('common.exit')}
-        </CButton>
-      </CModalFooter>
     </CModal>
   );
 };

src/components/WifiScanResultModal/index.js

@@ -51,7 +51,6 @@ const WifiScanResultModal = ({ show, toggle, scanResults, date }) => {
   const parseThroughList = useCallback(() => {
     const dbmNumber = 4294967295;
     const listOfChannels = [];
-    const listCsv = [];
 
     scanResults.forEach((scan) => {
       if (!listOfChannels.includes(scan.channel)) {
@@ -75,7 +74,6 @@ const WifiScanResultModal = ({ show, toggle, scanResults, date }) => {
           }
           deviceToAdd.Signal = (dbmNumber - device.signal) * -1;
           channel.devices.push(deviceToAdd);
-          listCsv.push({ ...device, ...deviceToAdd });
         }
       });