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

Merge pull request #5 from stephb9959/main

Browse Source 
Fixes for Interface Stats Component
This commit is contained in:
Stephane Bourque
2021-06-21 14:02:02 -07:00
committed by GitHub
parent f7b5272272 ad2be40718
commit 1b47daced3
7 changed files with 26 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
package-lock.json generated
View File

@@ -1,11 +1,12 @@
{
"name": "ucentral-client",
"version": "0.9.0",
"version": "0.9.1",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"version": "0.9.0",
"name": "ucentral-client",
"version": "0.9.2",
"dependencies": {
"@coreui/coreui": "^3.4.0",
"@coreui/icons": "^2.0.1",
@@ -37,6 +38,7 @@
"react-select": "^4.3.1",
"react-widgets": "^5.1.1",
"redux": "^4.1.0",
"sass": "^1.35.1",
"uuid": "^8.3.2"
},
"devDependencies": {
@@ -5248,7 +5250,6 @@
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
"integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
"optional": true,
"engines": {
"node": ">=8"
}
@@ -5737,7 +5738,6 @@
"version": "3.5.1",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz",
"integrity": "sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==",
"optional": true,
"dependencies": {
"anymatch": "~3.1.1",
"braces": "~3.0.2",
@@ -10569,7 +10569,6 @@
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
"integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
"optional": true,
"dependencies": {
"binary-extensions": "^2.0.0"
},
@@ -17453,7 +17452,6 @@
"version": "3.5.0",
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.5.0.tgz",
"integrity": "sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==",
"optional": true,
"dependencies": {
"picomatch": "^2.2.1"
},
@@ -18343,8 +18341,6 @@
"version": "1.35.1",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.35.1.tgz",
"integrity": "sha512-oCisuQJstxMcacOPmxLNiLlj4cUyN2+8xJnG7VanRoh2GOLr9RqkvI4AxA4a6LHVg/rsu+PmxXeGhrdSF9jCiQ==",
"optional": true,
"peer": true,
"dependencies": {
"chokidar": ">=3.0.0 <4.0.0"
},
@@ -26490,8 +26486,7 @@
"binary-extensions": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
"integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
"optional": true
"integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA=="
},
"bindings": {
"version": "1.5.0",
@@ -26896,7 +26891,6 @@
"version": "3.5.1",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz",
"integrity": "sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==",
"optional": true,
"requires": {
"anymatch": "~3.1.1",
"braces": "~3.0.2",
@@ -30706,7 +30700,6 @@
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
"integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
"optional": true,
"requires": {
"binary-extensions": "^2.0.0"
}
@@ -36047,7 +36040,6 @@
"version": "3.5.0",
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.5.0.tgz",
"integrity": "sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==",
"optional": true,
"requires": {
"picomatch": "^2.2.1"
}
@@ -36756,8 +36748,6 @@
"version": "1.35.1",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.35.1.tgz",
"integrity": "sha512-oCisuQJstxMcacOPmxLNiLlj4cUyN2+8xJnG7VanRoh2GOLr9RqkvI4AxA4a6LHVg/rsu+PmxXeGhrdSF9jCiQ==",
"optional": true,
"peer": true,
"requires": {
"chokidar": ">=3.0.0 <4.0.0"
}

3
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "ucentral-client",
"version": "0.9.0",
"version": "0.9.2",
"private": true,
"dependencies": {
"@coreui/coreui": "^3.4.0",
@@ -33,6 +33,7 @@
"react-select": "^4.3.1",
"react-widgets": "^5.1.1",
"redux": "^4.1.0",
"sass": "^1.35.1",
"uuid": "^8.3.2"
},
"scripts": {

3
src/components/InterfaceStatistics/containers/DeviceStatisticsChart/index.js
View File

@@ -1,10 +1,9 @@
import React from 'react';
import PropTypes from 'prop-types';
import Chart from 'react-apexcharts';
import styles from './index.module.scss';
const DeviceStatisticsChart = ({ data, options }) => (
<div className={styles.chart}>
<div style={{ height: '360px' }}>
<Chart series={data} options={options} type="line" height="100%" />
</div>
);

3
src/components/InterfaceStatistics/containers/DeviceStatisticsChart/index.module.scss
View File

@@ -1,3 +0,0 @@
.chart {
height: 360px;
}

24
src/components/InterfaceStatistics/containers/StatisticsChartList/index.js
View File

@@ -10,8 +10,10 @@ import DeviceStatisticsChart from '../DeviceStatisticsChart';
const StatisticsChartList = ({ selectedDeviceId, lastRefresh }) => {
const { t } = useTranslation();
const [loading, setLoading] = useState(false);
const [deviceStats, setStats] = useState([]);
const [statOptions, setStatOptions] = useState({});
const [statOptions, setStatOptions] = useState({
interfaceList: [],
settings: {}
});
const transformIntoDataset = (data) => {
const sortedData = data.sort((a, b) => {
@@ -60,7 +62,7 @@ const StatisticsChartList = ({ selectedDeviceId, lastRefresh }) => {
interfaceList[interfaceTypes[inter.name]][0].data.push(
Math.floor(inter.counters.tx_bytes / 1024),
);
interfaceList[interfaceTypes[inter.name]][1].data.push(Math.floor(inter.counters.rx_bytes));
interfaceList[interfaceTypes[inter.name]][1].data.push(Math.floor(inter.counters.rx_bytes / 1024));
}
}
@@ -97,8 +99,14 @@ const StatisticsChartList = ({ selectedDeviceId, lastRefresh }) => {
},
};
setStatOptions(options);
setStats(interfaceList);
const newOptions = {
interfaceList,
settings: options
};
if(statOptions !== newOptions){
setStatOptions(newOptions);
}
};
const getStatistics = () => {
@@ -134,20 +142,20 @@ const StatisticsChartList = ({ selectedDeviceId, lastRefresh }) => {
}, [selectedDeviceId]);
useEffect(() => {
if (lastRefresh !== '' && selectedDeviceId) {
if (!loading && lastRefresh !== '' && selectedDeviceId) {
getStatistics();
}
}, [lastRefresh]);
return (
<div>
{deviceStats.map((data) => (
{statOptions.interfaceList.map((data) => (
<div key={createUuid()}>
<DeviceStatisticsChart
key={createUuid()}
data={data}
options={{
...statOptions,
...statOptions.settings,
title: {
text: capitalizeFirstLetter(data[0].titleName),
align: 'left',

2
src/components/InterfaceStatistics/index.js
View File

@@ -9,7 +9,7 @@ import styles from './index.module.scss';
const DeviceStatisticsCard = ({ selectedDeviceId }) => {
const { t } = useTranslation();
const [lastRefresh, setLastRefresh] = useState('');
const [lastRefresh, setLastRefresh] = useState(new Date().toString());
const refresh = () => {
setLastRefresh(new Date().toString());

2
src/layout/Footer/index.js
View File

@@ -6,7 +6,7 @@ const TheFooter = () => (
<Translation>
{(t) => (
<CFooter fixed={false}>
<div>{t('footer.version')} 0.9.0</div>
<div>{t('footer.version')} 0.9.2</div>
<div className="mfs-auto">
<span className="mr-1">{t('footer.powered_by')}</span>
<a href="https://coreui.io/react" target="_blank" rel="noopener noreferrer">