2.5.43: download wifi scan button added to wifi scan modal

2025-10-30 17:57:46 +00:00 · 2022-02-09 13:59:07 +00:00
parent e82551c97f
commit e4ff3a87a7
9 changed files with 83 additions and 29 deletions
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",
--- a/public/locales/de/translation.json
+++ b/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... ",
--- a/public/locales/en/translation.json
+++ b/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... ",
--- a/public/locales/es/translation.json
+++ b/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... ",
--- a/public/locales/fr/translation.json
+++ b/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... ",
--- a/public/locales/pt/translation.json
+++ b/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... ",
--- a/src/components/WifiScanModal/index.js
+++ b/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 React, { useState, useEffect } from 'react';
+import { cilCloudDownload, cilMagnifyingGlass, cilX } from '@coreui/icons';
+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>
  );
 };
--- a/src/components/WifiScanResultModal/index.js
+++ b/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 });
        }
      });