diff --git a/package-lock.json b/package-lock.json index e7d0e41..38220af 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "ucentral-client", - "version": "2.5.21", + "version": "2.5.23", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "ucentral-client", - "version": "2.5.21", + "version": "2.5.23", "dependencies": { "@coreui/coreui": "^3.4.0", "@coreui/icons": "^2.0.1", diff --git a/package.json b/package.json index 617d23e..27b424e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ucentral-client", - "version": "2.5.21", + "version": "2.5.23", "dependencies": { "@coreui/coreui": "^3.4.0", "@coreui/icons": "^2.0.1", diff --git a/public/locales/de/translation.json b/public/locales/de/translation.json index 0243fef..b8f29da 100644 --- a/public/locales/de/translation.json +++ b/public/locales/de/translation.json @@ -658,6 +658,7 @@ }, "statistics": { "data": "Daten (KB)", + "data_mb": "Daten (MB)", "latest_statistics": "Neueste Statistiken", "lifetime_stats": "Lifetime-Statistik", "memory": "Erinnerung", diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index e1c597e..4ab6816 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -658,6 +658,7 @@ }, "statistics": { "data": "Data (KB)", + "data_mb": "Data (MB)", "latest_statistics": "Latest Statistics", "lifetime_stats": "Lifetime Statistics", "memory": "Memory", diff --git a/public/locales/es/translation.json b/public/locales/es/translation.json index 7408d1a..9ed11e9 100644 --- a/public/locales/es/translation.json +++ b/public/locales/es/translation.json @@ -658,6 +658,7 @@ }, "statistics": { "data": "Datos (KB)", + "data_mb": "Datos (MB)", "latest_statistics": "Últimas estadísticas", "lifetime_stats": "Estadísticas de por vida", "memory": "Memoria", diff --git a/public/locales/fr/translation.json b/public/locales/fr/translation.json index 28fc9d8..dec75e8 100644 --- a/public/locales/fr/translation.json +++ b/public/locales/fr/translation.json @@ -658,6 +658,7 @@ }, "statistics": { "data": "Données (Ko)", + "data_mb": "Données (Mo)", "latest_statistics": "Dernières statistiques", "lifetime_stats": "Statistiques à vie", "memory": "mémoire", diff --git a/public/locales/pt/translation.json b/public/locales/pt/translation.json index 1fb9cb8..27ffb62 100644 --- a/public/locales/pt/translation.json +++ b/public/locales/pt/translation.json @@ -658,6 +658,7 @@ }, "statistics": { "data": "Dados (KB)", + "data_mb": "Dados (MB)", "latest_statistics": "Estatísticas mais recentes", "lifetime_stats": "Estatísticas de vida", "memory": "Memória", diff --git a/src/components/InterfaceStatistics/DeviceStatisticsChart.js b/src/components/InterfaceStatistics/DeviceStatisticsChart.js index c594b88..c914424 100644 --- a/src/components/InterfaceStatistics/DeviceStatisticsChart.js +++ b/src/components/InterfaceStatistics/DeviceStatisticsChart.js @@ -12,4 +12,4 @@ DeviceStatisticsChart.propTypes = { chart: PropTypes.instanceOf(Object).isRequired, }; -export default DeviceStatisticsChart; +export default React.memo(DeviceStatisticsChart); diff --git a/src/components/InterfaceStatistics/StatisticsChartList.js b/src/components/InterfaceStatistics/StatisticsChartList.js index 9c291bd..5b03201 100644 --- a/src/components/InterfaceStatistics/StatisticsChartList.js +++ b/src/components/InterfaceStatistics/StatisticsChartList.js @@ -1,14 +1,14 @@ import React, { useState, useEffect, useCallback } from 'react'; import PropTypes from 'prop-types'; +import { CSpinner } from '@coreui/react'; import { useTranslation } from 'react-i18next'; import { v4 as createUuid } from 'uuid'; import axiosInstance from 'utils/axiosInstance'; import { useAuth, useDevice } from 'ucentral-libs'; import { capitalizeFirstLetter, dateToUnix, prettyDate } from 'utils/helper'; -import eventBus from 'utils/eventBus'; import DeviceStatisticsChart from './DeviceStatisticsChart'; -const StatisticsChartList = ({ setOptions, section, start, end }) => { +const StatisticsChartList = ({ setOptions, section, start, end, setStart, setEnd, refreshId }) => { const { t } = useTranslation(); const [loading, setLoading] = useState(false); const { currentToken, endpoints } = useAuth(); @@ -20,28 +20,56 @@ const StatisticsChartList = ({ setOptions, section, start, end }) => { }); const transformIntoDataset = (data) => { - const sortedData = data.sort((a, b) => { + let sortedData = data.sort((a, b) => { if (a.recorded > b.recorded) return 1; if (b.recorded > a.recorded) return -1; return 0; }); + const dataLength = sortedData.length; + + console.log(dataLength); + + if (dataLength > 1000 && dataLength < 3000) { + sortedData = sortedData.filter((dat, index) => index % 4 === 0); + } else if (dataLength >= 3000 && dataLength < 5000) { + sortedData = sortedData.filter((dat, index) => index % 6 === 0); + } else if (dataLength >= 5000 && dataLength < 7000) { + sortedData = sortedData.filter((dat, index) => index % 8 === 0); + } + + console.log(sortedData.length); // Looping through data to build our memory graph data - const memoryUsed = { - titleName: t('statistics.memory'), - name: '% Used', - backgroundColor: 'rgb(228,102,81,0.9)', - data: [], - fill: true, - }; + const memoryUsed = [ + { + titleName: t('statistics.memory'), + name: 'Used', + backgroundColor: 'rgb(228,102,81,0.9)', + data: [], + fill: true, + }, + { + titleName: t('statistics.memory'), + name: 'Buffered', + backgroundColor: 'rgb(228,102,81,0.9)', + data: [], + fill: true, + }, + { + titleName: t('statistics.memory'), + name: 'Cached', + backgroundColor: 'rgb(228,102,81,0.9)', + data: [], + fill: true, + }, + ]; for (const log of sortedData) { - memoryUsed.data.push( - Math.floor( - ((log.data.unit.memory.total - log.data.unit.memory.free) / log.data.unit.memory.total) * - 100, - ), + memoryUsed[0].data.push( + Math.floor((log.data.unit.memory.total - log.data.unit.memory.free) / 1024 / 1024), ); + memoryUsed[1].data.push(Math.floor(log.data.unit.memory.buffered / 1024 / 1024)); + memoryUsed[2].data.push(Math.floor(log.data.unit.memory.cached / 1024 / 1024)); } // This dictionary will have a key that is the interface name and a value of it's index in the final array @@ -142,12 +170,9 @@ const StatisticsChartList = ({ setOptions, section, start, end }) => { categories, }, yaxis: { - min: 0, - max: 100, - tickAmount: 5, // set tickAmount to split x-axis - ticks: { min: 0, max: 100, stepSize: 20 }, + tickAmount: 5, title: { - text: t('statistics.used'), + text: t('statistics.data_mb'), style: { fontSize: '15px', }, @@ -162,9 +187,11 @@ const StatisticsChartList = ({ setOptions, section, start, end }) => { const newOptions = { interfaceList, - memory: [[memoryUsed]], + memory: [memoryUsed], interfaceOptions, memoryOptions, + start: new Date(sortedData[0].recorded * 1000).toISOString(), + end: new Date(sortedData[sortedData.length - 1].recorded * 1000).toISOString(), }; if (statOptions !== newOptions) { @@ -172,8 +199,12 @@ const StatisticsChartList = ({ setOptions, section, start, end }) => { value: opt[0].titleName, label: opt[0].titleName, })); - setOptions([{ value: 'memory', label: t('statistics.memory') }, ...sectionOptions]); + setOptions([...sectionOptions, { value: 'memory', label: t('statistics.memory') }]); setStatOptions({ ...newOptions }); + if (sortedData.length > 0) { + setStart(new Date(sortedData[0].recorded * 1000)); + setEnd(new Date(sortedData[sortedData.length - 1].recorded * 1000)); + } } }; @@ -219,11 +250,12 @@ const StatisticsChartList = ({ setOptions, section, start, end }) => { }; let extraParams = ''; - if (start !== '' && end !== '') { + if (start !== null && end !== null) { const utcStart = new Date(start).toISOString(); const utcEnd = new Date(end).toISOString(); options.params.startDate = dateToUnix(utcStart); options.params.endDate = dateToUnix(utcEnd); + options.params.limit = 10000; } else { extraParams = '?newest=true&limit=50'; } @@ -241,19 +273,18 @@ const StatisticsChartList = ({ setOptions, section, start, end }) => { }; useEffect(() => { - if (deviceSerialNumber && ((start !== '' && end !== '') || (start === '' && end === ''))) { + if (deviceSerialNumber) { getStatistics(); } - }, [deviceSerialNumber, start, end]); - - useEffect(() => { - eventBus.on('refreshInterfaceStatistics', () => getStatistics()); - - return () => { - eventBus.remove('refreshInterfaceStatistics'); - }; - }, []); + }, [deviceSerialNumber, refreshId]); + if (loading) { + return ( +
+ +
+ ); + } return (
{section !== 'memory' && !loading && getInterface()} @@ -286,8 +317,15 @@ const StatisticsChartList = ({ setOptions, section, start, end }) => { StatisticsChartList.propTypes = { setOptions: PropTypes.func.isRequired, section: PropTypes.string.isRequired, - start: PropTypes.string.isRequired, - end: PropTypes.string.isRequired, + start: PropTypes.instanceOf(Date), + end: PropTypes.instanceOf(Date), + setStart: PropTypes.func.isRequired, + setEnd: PropTypes.func.isRequired, + refreshId: PropTypes.string.isRequired, +}; +StatisticsChartList.defaultProps = { + start: null, + end: null, }; export default React.memo(StatisticsChartList); diff --git a/src/components/InterfaceStatistics/index.js b/src/components/InterfaceStatistics/index.js index 98c52e4..75b2d24 100644 --- a/src/components/InterfaceStatistics/index.js +++ b/src/components/InterfaceStatistics/index.js @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import { useTranslation } from 'react-i18next'; import { v4 as createUuid } from 'uuid'; import { @@ -13,7 +13,6 @@ import { import DatePicker from 'react-widgets/DatePicker'; import { cilSync } from '@coreui/icons'; import CIcon from '@coreui/icons-react'; -import eventBus from 'utils/eventBus'; import LifetimeStatsmodal from 'components/LifetimeStatsModal'; import StatisticsChartList from './StatisticsChartList'; import LatestStatisticsmodal from './LatestStatisticsModal'; @@ -23,11 +22,12 @@ const DeviceStatisticsCard = () => { const [showLatestModal, setShowLatestModal] = useState(false); const [showLifetimeModal, setShowLifetimeModal] = useState(false); const [options, setOptions] = useState([]); - const [section, setSection] = useState('memory'); - const [start, setStart] = useState(''); + const [section, setSection] = useState(''); + const [start, setStart] = useState(null); const [startError, setStartError] = useState(false); - const [end, setEnd] = useState(''); + const [end, setEnd] = useState(null); const [endError, setEndError] = useState(false); + const [refreshId, setRefreshId] = useState('1'); const toggleLatestModal = () => { setShowLatestModal(!showLatestModal); @@ -60,9 +60,13 @@ const DeviceStatisticsCard = () => { }; const refresh = () => { - eventBus.dispatch('refreshInterfaceStatistics', { message: 'Refresh interface statistics' }); + setRefreshId(createUuid()); }; + useEffect(() => { + if (section === '' && options.length > 0) setSection(options[0].value); + }, [options]); + return (
@@ -70,12 +74,34 @@ const DeviceStatisticsCard = () => {
- +
+ modifyEnd(date)} + value={end ? new Date(end) : undefined} + /> + +
+ To: +
+ modifyStart(date)} + value={start ? new Date(start) : undefined} + /> + +
+ From: +
Lifetime Statistics @@ -99,24 +125,18 @@ const DeviceStatisticsCard = () => { ))}
-
- modifyEnd(date)} /> - -
- To: -
- modifyStart(date)} /> - -
- From:
- +