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

View more buttons added to health/logs

Browse Source
This commit is contained in:
bourquecharles
2021-06-04 20:00:06 -04:00
parent 33ce6cc625
commit 1e838dc265
3 changed files with 130 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/containers/TheFooter.js
View File

@@ -3,7 +3,7 @@ import { CFooter } from '@coreui/react';
const TheFooter = () => (
<CFooter fixed={false}>
<div>Version 0.0.10</div>
<div>Version 0.0.11</div>
<div className="mfs-auto">
<span className="mr-1">Powered by</span>
<a href="https://coreui.io/react" target="_blank" rel="noopener noreferrer">

78
src/pages/DevicePage/DeviceHealth.js
View File

@@ -14,17 +14,21 @@ import {
import CIcon from '@coreui/icons-react';
import DatePicker from 'react-widgets/DatePicker';
import PropTypes from 'prop-types';
import { prettyDate, addDays, dateToUnix } from '../../utils/helper';
import { prettyDate, dateToUnix } from '../../utils/helper';
import axiosInstance from '../../utils/axiosInstance';
import { getToken } from '../../utils/authHelper';
import LoadingButton from '../../components/LoadingButton';
const DeviceHealth = ({ selectedDeviceId }) => {
const [collapse, setCollapse] = useState(false);
const [details, setDetails] = useState([]);
const [loading, setLoading] = useState(false);
const [healthChecks, setHealthChecks] = useState([]);
const [start, setStart] = useState(addDays(new Date(), -3).toString());
const [end, setEnd] = useState(new Date().toString());
const [start, setStart] = useState('');
const [end, setEnd] = useState('');
const [logLimit, setLogLimit] = useState(25);
const [loadingMore, setLoadingMore] = useState(false);
const [showLoadingMore, setShowLoadingMore] = useState(true);
let sanityLevel;
let barColor;
@@ -41,11 +45,14 @@ const DeviceHealth = ({ selectedDeviceId }) => {
setEnd(value);
};
const showMoreLogs = () => {
setLogLimit(logLimit + 50);
}
const getDeviceHealth = () => {
if (loading) return;
setLoadingMore(true);
setLoading(true);
const utcStart = new Date(start).toISOString();
const utcEnd = new Date(end).toISOString();
const options = {
headers: {
@@ -53,19 +60,28 @@ const DeviceHealth = ({ selectedDeviceId }) => {
Authorization: `Bearer ${getToken()}`,
},
params: {
startDate: dateToUnix(utcStart),
endDate: dateToUnix(utcEnd),
limit: logLimit
},
};
let extraParams = '?newest=true';
if(start !=='' && end !==''){
const utcStart = new Date(start).toISOString();
const utcEnd = new Date(end).toISOString();
options.params.startDate = dateToUnix(utcStart);
options.params.endDate = dateToUnix(utcEnd);
extraParams='';
}
axiosInstance
.get(`/device/${encodeURIComponent(selectedDeviceId)}/healthchecks`, options)
.get(`/device/${encodeURIComponent(selectedDeviceId)}/healthchecks${extraParams}`, options)
.then((response) => {
setHealthChecks(response.data.values);
})
.catch(() => {})
.finally(() => {
setLoading(false);
setLoadingMore(false);
});
};
@@ -103,9 +119,38 @@ const DeviceHealth = ({ selectedDeviceId }) => {
useEffect(() => {
if (selectedDeviceId) {
setLogLimit(25);
setLoadingMore(false);
setShowLoadingMore(true);
setStart('');
setEnd('');
getDeviceHealth();
}
}, [selectedDeviceId, start, end]);
}, [selectedDeviceId]);
useEffect(() => {
if (logLimit !== 25) {
getDeviceHealth();
}
}, [logLimit]);
useEffect(() => {
if (healthChecks.length === 0 || (healthChecks.length > 0 && healthChecks.length < logLimit)) {
setShowLoadingMore(false);
}
else {
setShowLoadingMore(true);
}
}, [healthChecks]);
useEffect(() => {
if (selectedDeviceId && start !== '' && end !== '') {
getDeviceHealth();
}
else if(selectedDeviceId && start === '' && end === ''){
getDeviceHealth();
}
}, [start, end, selectedDeviceId]);
if (healthChecks && healthChecks.length > 0) {
sanityLevel = healthChecks[healthChecks.length - 1].sanity;
@@ -132,8 +177,6 @@ const DeviceHealth = ({ selectedDeviceId }) => {
<CCol>
From:
<DatePicker
selected={start === '' ? new Date() : new Date(start)}
value={start === '' ? new Date() : new Date(start)}
includeTime
onChange={(date) => modifyStart(date)}
/>
@@ -141,8 +184,6 @@ const DeviceHealth = ({ selectedDeviceId }) => {
<CCol>
To:
<DatePicker
selected={end === '' ? new Date() : new Date(end)}
value={end === '' ? new Date() : new Date(end)}
includeTime
onChange={(date) => modifyEnd(date)}
/>
@@ -190,6 +231,17 @@ const DeviceHealth = ({ selectedDeviceId }) => {
),
}}
/>
<CRow style={{marginBottom: '1%', marginRight: '1%'}}>
{showLoadingMore &&
<LoadingButton
label="View More"
isLoadingLabel="Loading More..."
isLoading={loadingMore}
action={showMoreLogs}
variant="outline"
/>
}
</CRow>
</div>
</CCard>
</CCollapse>

76
src/pages/DevicePage/DeviceLogs.js
View File

@@ -13,17 +13,21 @@ import {
import CIcon from '@coreui/icons-react';
import DatePicker from 'react-widgets/DatePicker';
import PropTypes from 'prop-types';
import { addDays, prettyDate, dateToUnix } from '../../utils/helper';
import { prettyDate, dateToUnix } from '../../utils/helper';
import axiosInstance from '../../utils/axiosInstance';
import { getToken } from '../../utils/authHelper';
import LoadingButton from '../../components/LoadingButton';
const DeviceLogs = ({ selectedDeviceId }) => {
const [collapse, setCollapse] = useState(false);
const [details, setDetails] = useState([]);
const [loading, setLoading] = useState(false);
const [logs, setLogs] = useState([]);
const [start, setStart] = useState(addDays(new Date(), -3).toString());
const [end, setEnd] = useState(new Date().toString());
const [start, setStart] = useState('');
const [end, setEnd] = useState('');
const [logLimit, setLogLimit] = useState(25);
const [loadingMore, setLoadingMore] = useState(false);
const [showLoadingMore, setShowLoadingMore] = useState(true);
const toggle = (e) => {
setCollapse(!collapse);
@@ -38,11 +42,14 @@ const DeviceLogs = ({ selectedDeviceId }) => {
setEnd(value);
};
const showMoreLogs = () => {
setLogLimit(logLimit + 50);
}
const getLogs = () => {
if (loading) return;
setLoadingMore(true);
setLoading(true);
const utcStart = new Date(start).toISOString();
const utcEnd = new Date(end).toISOString();
const options = {
headers: {
@@ -50,19 +57,28 @@ const DeviceLogs = ({ selectedDeviceId }) => {
Authorization: `Bearer ${getToken()}`,
},
params: {
startDate: dateToUnix(utcStart),
endDate: dateToUnix(utcEnd),
limit: logLimit
},
};
let extraParams = '?newest=true';
if(start !=='' && end !==''){
const utcStart = new Date(start).toISOString();
const utcEnd = new Date(end).toISOString();
options.params.startDate = dateToUnix(utcStart);
options.params.endDate = dateToUnix(utcEnd);
extraParams='';
}
axiosInstance
.get(`/device/${encodeURIComponent(selectedDeviceId)}/logs`, options)
.get(`/device/${encodeURIComponent(selectedDeviceId)}/logs${extraParams}`, options)
.then((response) => {
setLogs(response.data.values);
})
.catch(() => {})
.finally(() => {
setLoading(false);
setLoadingMore(false);
});
};
@@ -99,6 +115,35 @@ const DeviceLogs = ({ selectedDeviceId }) => {
useEffect(() => {
if (selectedDeviceId) {
setLogLimit(25);
setLoadingMore(false);
setShowLoadingMore(true);
setStart('');
setEnd('');
getLogs();
}
}, [selectedDeviceId]);
useEffect(() => {
if (logLimit !== 25) {
getLogs();
}
}, [logLimit]);
useEffect(() => {
if (logs.length === 0 || (logs.length > 0 && logs.length < logLimit)) {
setShowLoadingMore(false);
}
else {
setShowLoadingMore(true);
}
}, [logs]);
useEffect(() => {
if (selectedDeviceId && start !== '' && end !== '') {
getLogs();
}
else if(selectedDeviceId && start === '' && end === ''){
getLogs();
}
}, [start, end, selectedDeviceId]);
@@ -115,8 +160,6 @@ const DeviceLogs = ({ selectedDeviceId }) => {
<CCol>
From:
<DatePicker
selected={start === '' ? new Date() : new Date(start)}
value={start === '' ? new Date() : new Date(start)}
includeTime
onChange={(date) => modifyStart(date)}
/>
@@ -124,8 +167,6 @@ const DeviceLogs = ({ selectedDeviceId }) => {
<CCol>
To:
<DatePicker
selected={end === '' ? new Date() : new Date(end)}
value={end === '' ? new Date() : new Date(end)}
includeTime
onChange={(date) => modifyEnd(date)}
/>
@@ -167,6 +208,17 @@ const DeviceLogs = ({ selectedDeviceId }) => {
),
}}
/>
<CRow style={{marginBottom: '1%', marginRight: '1%'}}>
{showLoadingMore &&
<LoadingButton
label="View More"
isLoadingLabel="Loading More..."
isLoading={loadingMore}
action={showMoreLogs}
variant="outline"
/>
}
</CRow>
</div>
</CCard>
</CCollapse>