scottk/OptimCloud-gw-ui
1
0
Fork 0
mirror of https://github.com/optim-enterprises-bv/OptimCloud-gw-ui.git synced 2025-11-02 19:27:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

Version 2.5.19: new memory display

Browse Source
This commit is contained in:
Charles
2022-01-12 15:44:07 +01:00
parent a5c1a7122d
commit 1e08ccaae3
8 changed files with 43 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
package-lock.json generated
View File

@@ -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",

2
package.json
View File

@@ -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",

1
public/locales/de/translation.json
View File

@@ -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"
},

1
public/locales/en/translation.json
View File

@@ -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 "
},

1
public/locales/es/translation.json
View File

@@ -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"
},

1
public/locales/fr/translation.json
View File

@@ -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"
},

1
public/locales/pt/translation.json
View File

@@ -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"
},

47
src/pages/DevicePage/DeviceStatusCard/index.js
View File

@@ -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 MemoryBar from './MemoryBar';
import { prettyDate, compactSecondsToDetailed, cleanBytesString } from 'utils/helper';
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
t={t}
usedBytes={
lastStats?.unit?.memory?.total && lastStats?.unit?.memory?.free
? lastStats?.unit?.memory?.total - lastStats?.unit?.memory?.free
: 0
}
totalBytes={lastStats?.unit?.memory?.total ?? 0}
/>
<CAlert
style={{ width: '40px' }}
className="p-0 text-center"
color={getMemoryColor(
lastStats?.unit?.memory?.total ?? 0,
lastStats?.unit?.memory?.free ?? 0,
)}
>
{getMemoryPercentage(
lastStats?.unit?.memory?.total ?? 0,
lastStats?.unit?.memory?.free ?? 0,
)}
</CAlert>
)}
</CCol>
</CRow>