General UI fixes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ucentral-client",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "dependencies": {
     "@coreui/coreui": "^3.4.0",
     "@coreui/icons": "^2.0.1",
@@ -22,7 +22,7 @@
     "react-router-dom": "^5.2.0",
     "react-widgets": "^5.1.1",
     "sass": "^1.35.1",
-    "ucentral-libs": "^0.8.42",
+    "ucentral-libs": "^0.8.43",
     "uuid": "^8.3.2"
   },
   "main": "index.js",

public/locales/de/translation.json

@@ -155,6 +155,7 @@
 		"owner": "Inhaber",
 		"title": "Gerätekonfiguration",
 		"type": "Gerätetyp",
+		"uuid": "Konfigurations-ID",
 		"view_json": "Rohe Konfiguration anzeigen"
 	},
 	"configure": {
@@ -187,14 +188,14 @@
 		"warning": "Achtung: Nach dem Absenden kann dies nicht rückgängig gemacht werden"
 	},
 	"firmware": {
-		"choose_custom": "Wählen Sie benutzerdefinierte Firmware",
+		"choose_custom": "Wählen Sie die Firmware",
 		"details_title": "Bild #{{image}} Details",
 		"device_type": "Gerätetyp",
 		"device_types": "Gerätetypen",
 		"downloads": "Downloads",
 		"error_fetching_latest": "Fehler beim Abrufen der neuesten Firmware",
 		"from_release": "Von",
-		"history_title": "Firmware-Historie",
+		"history_title": "Upgrade-Verlauf",
 		"image": "Bild",
 		"image_date": "Bilddatum",
 		"installed_firmware": "Installierte Firmware",

public/locales/en/translation.json

@@ -155,6 +155,7 @@
 		"owner": "Owner",
 		"title": "Configuration",
 		"type": "Device Type",
+		"uuid": "Config ID",
 		"view_json": "View raw JSON"
 	},
 	"configure": {
@@ -187,14 +188,14 @@
 		"warning": "Warning: Once you submit this cannot be reverted"
 	},
 	"firmware": {
-		"choose_custom": "Choose Custom Firmware",
+		"choose_custom": "Choose Firmware",
 		"details_title": "Image #{{image}} Details",
 		"device_type": "Device Type",
 		"device_types": "Device Types",
 		"downloads": "Downloads",
 		"error_fetching_latest": "Error while fetching latest firmware",
 		"from_release": "From",
-		"history_title": "Firmware History",
+		"history_title": "Upgrade History",
 		"image": "Image",
 		"image_date": "Image Date",
 		"installed_firmware": "Installed Firmware",

public/locales/es/translation.json

@@ -155,6 +155,7 @@
 		"owner": "Propietario",
 		"title": "Configuración",
 		"type": "Tipo de dispositivo",
+		"uuid": "ID de configuración",
 		"view_json": "Ver JSON sin procesar"
 	},
 	"configure": {
@@ -187,14 +188,14 @@
 		"warning": "Advertencia: una vez que envíe, esto no se podrá revertir"
 	},
 	"firmware": {
-		"choose_custom": "Elija firmware personalizado",
+		"choose_custom": "Elige firmware",
 		"details_title": "Detalles de la imagen n. °{{image}} ",
 		"device_type": "Tipo de dispositivo",
 		"device_types": "Tipos de dispositivos",
 		"downloads": "Descargas",
 		"error_fetching_latest": "Error al obtener el firmware más reciente",
 		"from_release": "Desde",
-		"history_title": "Historial de firmware",
+		"history_title": "Historial de actualizaciones",
 		"image": "Imagen",
 		"image_date": "Fecha de la imagen",
 		"installed_firmware": "Firmware instalado",

public/locales/fr/translation.json

@@ -155,6 +155,7 @@
 		"owner": "Propriétaire",
 		"title": "Configuration",
 		"type": "Type d'appareil",
+		"uuid": "Identifiant de configuration",
 		"view_json": "Afficher le JSON brut"
 	},
 	"configure": {
@@ -187,14 +188,14 @@
 		"warning": "Avertissement : Une fois que vous avez soumis, cela ne peut pas être annulé"
 	},
 	"firmware": {
-		"choose_custom": "Choisissez un micrologiciel personnalisé",
+		"choose_custom": "Choisissez le micrologiciel",
 		"details_title": "Image #{{image}} Détails",
 		"device_type": "Type d'appareil",
 		"device_types": "Types d'appareils",
 		"downloads": "Téléchargements",
 		"error_fetching_latest": "Erreur lors de la récupération du dernier firmware",
 		"from_release": "De",
-		"history_title": "Historique du micrologiciel",
+		"history_title": "Historique de mise à niveau",
 		"image": "Image",
 		"image_date": "Date de l'image",
 		"installed_firmware": "Micrologiciel installé",

public/locales/pt/translation.json

@@ -155,6 +155,7 @@
 		"owner": "Proprietário",
 		"title": "Configuração",
 		"type": "Tipo de dispositivo",
+		"uuid": "ID de configuração",
 		"view_json": "Exibir JSON bruto"
 	},
 	"configure": {
@@ -187,14 +188,14 @@
 		"warning": "Aviso: depois de enviar, isso não pode ser revertido"
 	},
 	"firmware": {
-		"choose_custom": "Escolha o firmware personalizado",
+		"choose_custom": "Escolha o firmware",
 		"details_title": "Detalhes da imagem #{{image}} ",
 		"device_type": "Tipo de dispositivo",
 		"device_types": "Tipos de dispositivos",
 		"downloads": "Transferências",
 		"error_fetching_latest": "Erro ao buscar o firmware mais recente",
 		"from_release": "De",
-		"history_title": "Histórico de Firmware",
+		"history_title": "Histórico de atualização",
 		"image": "Imagem",
 		"image_date": "Data da Imagem",
 		"installed_firmware": "Firmware Instalado",

src/components/DeviceConfiguration/index.js

@@ -19,7 +19,7 @@ import axiosInstance from 'utils/axiosInstance';
 import { useAuth } from 'contexts/AuthProvider';
 import { useDevice } from 'contexts/DeviceProvider';
 import CopyToClipboardButton from 'components/CopyToClipboardButton';
-import DeviceNotes from 'components/DeviceNotes';
+import { NotesTable } from 'ucentral-libs';
 import DeviceConfigurationModal from './DeviceConfigurationModal';
 import styles from './index.module.scss';
 
@@ -27,6 +27,7 @@ const DeviceConfiguration = () => {
   const { t } = useTranslation();
   const { currentToken, endpoints } = useAuth();
   const { deviceSerialNumber } = useDevice();
+  const [loading, setLoading] = useState(false);
   const [collapse, setCollapse] = useState(false);
   const [showModal, setShowModal] = useState(false);
   const [device, setDevice] = useState(null);
@@ -59,6 +60,34 @@ const DeviceConfiguration = () => {
       .catch(() => {});
   };
 
+  const saveNote = (currentNote) => {
+    setLoading(true);
+
+    const parameters = {
+      serialNumber: deviceSerialNumber,
+      notes: [{ note: currentNote }],
+    };
+
+    const headers = {
+      Accept: 'application/json',
+      Authorization: `Bearer ${currentToken}`,
+    };
+
+    axiosInstance
+      .put(
+        `${endpoints.ucentralgw}/api/v1/device/${encodeURIComponent(deviceSerialNumber)}`,
+        parameters,
+        { headers },
+      )
+      .then(() => {
+        getDevice();
+      })
+      .catch(() => {})
+      .finally(() => {
+        setLoading(false);
+      });
+  };
+
   useEffect(() => {
     if (deviceSerialNumber) getDevice();
   }, [deviceSerialNumber]);
@@ -86,7 +115,7 @@ const DeviceConfiguration = () => {
           <CCardBody>
             <CRow className={styles.spacedRow}>
               <CCol md="3">
-                <CLabel>{t('common.uuid')} : </CLabel>
+                <CLabel>{t('configuration.uuid')} : </CLabel>
               </CCol>
               <CCol xs="12" md="9">
                 {device.UUID}
@@ -145,10 +174,12 @@ const DeviceConfiguration = () => {
                 />
               </CCol>
             </CRow>
-            <DeviceNotes
+            <NotesTable
+              t={t}
               notes={device.notes}
-              refreshNotes={getDevice}
-              serialNumber={deviceSerialNumber}
+              loading={loading}
+              addNote={saveNote}
+              descriptionColumn={false}
             />
             <CCollapse show={collapse}>
               <CRow className={styles.spacedRow}>

src/layout/index.js

@@ -89,7 +89,7 @@ const TheLayout = () => {
         <div className="c-body">
           <PageContainer t={t} routes={routes} redirectTo="/devices" />
         </div>
-        <Footer t={t} version="2.0.2" />
+        <Footer t={t} version="2.0.3" />
       </div>
     </div>
   );

src/pages/WifiAnalysisPage/index.js

@@ -4,7 +4,7 @@ import { useParams } from 'react-router-dom';
 import { WifiAnalysisTable, RadioAnalysisTable } from 'ucentral-libs';
 import { useAuth } from 'contexts/AuthProvider';
 import axiosInstance from 'utils/axiosInstance';
-import { cleanBytesString, prettyDate, secondsToDetailed } from 'utils/helper';
+import { cleanBytesString, prettyDate, compactSecondsToDetailed } from 'utils/helper';
 import { CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react';
 
 const WifiAnalysisPage = () => {
@@ -20,17 +20,7 @@ const WifiAnalysisPage = () => {
   const [range, setRange] = useState(19);
 
   const secondsToLabel = (seconds) =>
-    secondsToDetailed(
-      seconds,
-      t('common.day'),
-      t('common.days'),
-      t('common.hour'),
-      t('common.hours'),
-      t('common.minute'),
-      t('common.minutes'),
-      t('common.second'),
-      t('common.seconds'),
-    );
+    compactSecondsToDetailed(seconds, t('common.day'), t('common.days'), t('common.seconds'));
 
   const extractIp = (json, bssid) => {
     const ips = {

src/utils/helper.js

@@ -111,6 +111,27 @@ export const secondsToDetailed = (
   return finalString;
 };
 
+export const compactSecondsToDetailed = (seconds, dayLabel, daysLabel, secondsLabel) => {
+  if (!seconds || seconds === 0) return `0 ${secondsLabel}`;
+  let secondsLeft = seconds;
+  const days = Math.floor(secondsLeft / (3600 * 24));
+  secondsLeft -= days * (3600 * 24);
+  const hours = Math.floor(secondsLeft / 3600);
+  secondsLeft -= hours * 3600;
+  const minutes = Math.floor(secondsLeft / 60);
+  secondsLeft -= minutes * 60;
+
+  let finalString = '';
+
+  finalString =
+    days === 1 ? `${finalString}${days} ${dayLabel}, ` : `${finalString}${days} ${daysLabel}, `;
+  finalString = hours < 10 ? `${finalString}0${hours}:` : `${finalString}${hours}:`;
+  finalString = minutes < 10 ? `${finalString}0${minutes}:` : `${finalString}${minutes}:`;
+  finalString = secondsLeft < 10 ? `${finalString}0${secondsLeft}` : `${finalString}${secondsLeft}`;
+
+  return finalString;
+};
+
 export const validateEmail = (email) => {
   const regex = /\S+@\S+\.\S+/;
   return regex.test(email);