Version 2.5.19: new memory display

package-lock.json

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

package.json

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

public/locales/de/translation.json

@@ -671,6 +671,7 @@
 		"percentage_free": "{{percentage}}% von {{total}} kostenlos",
 		"percentage_used": "{{percentage}}% von {{total}} verwendet",
 		"title": "#{{serialNumber}} Status",
+		"total_memory": "Gesamtspeicher",
 		"uptime": "Betriebszeit",
 		"used_total_memory": "{{used}} verwendet / {{total}} insgesamt"
 	},

public/locales/en/translation.json

@@ -671,6 +671,7 @@
 		"percentage_free": "{{percentage}}% of {{total}} free",
 		"percentage_used": "{{percentage}}% of {{total}} used",
 		"title": "#{{serialNumber}} Status",
+		"total_memory": "Total Memory",
 		"uptime": "Uptime",
 		"used_total_memory": "{{used}} used / {{total}} total "
 	},

public/locales/es/translation.json

@@ -671,6 +671,7 @@
 		"percentage_free": "{{percentage}}% de {{total}} gratis",
 		"percentage_used": "{{percentage}}% de {{total}} utilizado",
 		"title": "#{{serialNumber}} Estado",
+		"total_memory": "Memoria total",
 		"uptime": "Tiempo de actividad",
 		"used_total_memory": "{{used}} usado / {{total}} total"
 	},

public/locales/fr/translation.json

@@ -671,6 +671,7 @@
 		"percentage_free": "{{percentage}}% de {{total}} gratuit",
 		"percentage_used": "{{percentage}}% de {{total}} utilisé",
 		"title": "#{{serialNumber}} état",
+		"total_memory": "Mémoire totale",
 		"uptime": "La disponibilité",
 		"used_total_memory": "{{used}} utilisé / {{total}} total"
 	},

public/locales/pt/translation.json

@@ -671,6 +671,7 @@
 		"percentage_free": "{{percentage}}% de {{total}} grátis",
 		"percentage_used": "{{percentage}}% de {{total}} usado",
 		"title": "#{{serialNumber}} status",
+		"total_memory": "Memória total",
 		"uptime": "Tempo de atividade",
 		"used_total_memory": "{{used}} usado / {{total}} total"
 	},

src/pages/DevicePage/DeviceStatusCard/index.js

@@ -2,13 +2,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
+  CAlert,
   CCard,
   CCardHeader,
   CRow,
   CCol,
   CCardBody,
   CBadge,
-  CAlert,
   CPopover,
   CButton,
   CSpinner,
@@ -16,8 +16,7 @@ import {
 } from '@coreui/react';
 import CIcon from '@coreui/icons-react';
 import { cilSync } from '@coreui/icons';
-import { prettyDate, compactSecondsToDetailed } from 'utils/helper';
+import { prettyDate, compactSecondsToDetailed, cleanBytesString } from 'utils/helper';
-import MemoryBar from './MemoryBar';
 
 import styles from './index.module.scss';
 
@@ -27,6 +26,20 @@ const errorField = (t) => (
   </CAlert>
 );
 
+const getMemoryColor = (memTotal, memFree) => {
+  let memoryUsed = 0;
+  if (memTotal > 0) memoryUsed = Math.floor(((memTotal - memFree) / memTotal) * 100);
+
+  if (memoryUsed < 60) return 'success';
+  if (memoryUsed <= 85) return 'warning';
+  return 'danger';
+};
+
+const getMemoryPercentage = (memTotal, memFree) => {
+  if (memTotal <= 0) return `0%`;
+  return `${Math.floor(((memTotal - memFree) / memTotal) * 100)}%`;
+};
+
 const DeviceStatusCard = ({
   t,
   loading,
@@ -156,6 +169,12 @@ const DeviceStatusCard = ({
                     </div>
                   )}
                 </CCol>
+                <CCol className="mb-1" md="4" xl="4">
+                  {t('status.total_memory')}:
+                </CCol>
+                <CCol className="mb-1" md="8" xl="8" style={{ paddingTop: '5px' }}>
+                  {error ? errorField(t) : cleanBytesString(lastStats?.unit?.memory?.total)}
+                </CCol>
                 <CCol className="mb-1" md="4" xl="4">
                   {t('status.memory')}:
                 </CCol>
@@ -163,15 +182,19 @@ const DeviceStatusCard = ({
                   {error ? (
                     errorField(t)
                   ) : (
-                    <MemoryBar
+                    <CAlert
-                      t={t}
+                      style={{ width: '40px' }}
-                      usedBytes={
+                      className="p-0 text-center"
-                        lastStats?.unit?.memory?.total && lastStats?.unit?.memory?.free
+                      color={getMemoryColor(
-                          ? lastStats?.unit?.memory?.total - lastStats?.unit?.memory?.free
+                        lastStats?.unit?.memory?.total ?? 0,
-                          : 0
+                        lastStats?.unit?.memory?.free ?? 0,
-                      }
+                      )}
-                      totalBytes={lastStats?.unit?.memory?.total ?? 0}
+                    >
-                    />
+                      {getMemoryPercentage(
+                        lastStats?.unit?.memory?.total ?? 0,
+                        lastStats?.unit?.memory?.free ?? 0,
+                      )}
+                    </CAlert>
                   )}
                 </CCol>
               </CRow>