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

Absolute imports

Browse Source
This commit is contained in:
bourquecharles
2021-06-12 12:16:38 -04:00
parent 4240a77463
commit dcdc539a68
28 changed files with 288 additions and 279 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
.eslintrc
View File

@@ -19,5 +19,12 @@
"react/jsx-props-no-spreading": ["off"], "react/jsx-props-no-spreading": ["off"],
"react/destructuring-assignment": ["off"], "react/destructuring-assignment": ["off"],
"no-restricted-syntax": ["error", "ForInStatement", "LabeledStatement", "WithStatement"] "no-restricted-syntax": ["error", "ForInStatement", "LabeledStatement", "WithStatement"]
} },
"settings": {
"import/resolver": {
"node": {
"paths": ["src"]
}
},
},
} }

9
jsconfig.json Normal file
View File

@@ -0,0 +1,9 @@
{
"compilerOptions": {
"baseUrl": "src",
"paths": {
"*": ["*"]
}
},
"include": ["src"]
}

6
src/App.js
View File

@@ -1,6 +1,6 @@
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
import { HashRouter, Route, Switch } from 'react-router-dom'; import { HashRouter, Route, Switch } from 'react-router-dom';
import './scss/style.scss'; import 'scss/style.scss';
import { useSelector, useDispatch } from 'react-redux'; import { useSelector, useDispatch } from 'react-redux';
const loading = ( const loading = (
@@ -9,8 +9,8 @@ const loading = (
</div> </div>
); );
const TheLayout = React.lazy(() => import('./containers/TheLayout')); const TheLayout = React.lazy(() => import('containers/TheLayout'));
const Login = React.lazy(() => import('./pages/LoginPage/Login')); const Login = React.lazy(() => import('pages/LoginPage/Login'));
const App = () => { const App = () => {
const isLoggedIn = useSelector((state) => state.connected); const isLoggedIn = useSelector((state) => state.connected);

4
src/App.test.js
View File

@@ -1,8 +1,8 @@
import React from 'react'; import React from 'react';
import { render } from '@testing-library/react'; import { render } from '@testing-library/react';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import { store } from './app/store'; import { store } from 'app/store';
import App from './App'; import App from 'App';
test('renders learn react link', () => { test('renders learn react link', () => {
const { getByText } = render( const { getByText } = render(

2
src/containers/TheContent.js
View File

@@ -3,7 +3,7 @@ import React, { Suspense } from 'react';
import { Redirect, Route, Switch } from 'react-router-dom'; import { Redirect, Route, Switch } from 'react-router-dom';
import { v4 as createUuid } from 'uuid'; import { v4 as createUuid } from 'uuid';
import { CContainer, CFade } from '@coreui/react'; import { CContainer, CFade } from '@coreui/react';
import routes from '../routes'; import routes from 'routes';
const loading = ( const loading = (
<div className="pt-3 text-center"> <div className="pt-3 text-center">

4
src/containers/TheHeader.js
View File

@@ -11,8 +11,8 @@ import {
} from '@coreui/react'; } from '@coreui/react';
import CIcon from '@coreui/icons-react'; import CIcon from '@coreui/icons-react';
import { cilAccountLogout } from '@coreui/icons'; import { cilAccountLogout } from '@coreui/icons';
import { logout } from '../utils/authHelper'; import { logout } from 'utils/authHelper';
import routes from '../routes'; import routes from 'routes';
const TheHeader = () => { const TheHeader = () => {
const dispatch = useDispatch(); const dispatch = useDispatch();

2
src/containers/TheSidebar.js
View File

@@ -11,7 +11,7 @@ import {
CSidebarNavDropdown, CSidebarNavDropdown,
CSidebarNavItem, CSidebarNavItem,
} from '@coreui/react'; } from '@coreui/react';
import logoBar from '../assets/OpenWiFi_LogoLockup_WhiteColour.svg'; import logoBar from 'assets/OpenWiFi_LogoLockup_WhiteColour.svg';
// sidebar nav config // sidebar nav config
import navigation from './_nav'; import navigation from './_nav';

2
src/containers/_nav.js
View File

@@ -4,7 +4,7 @@ const nav = [
name: 'List of Devices', name: 'List of Devices',
to: '/devices', to: '/devices',
icon: 'cilNotes', icon: 'cilNotes',
} },
]; ];
export default nav; export default nav;

8
src/index.js
View File

@@ -1,11 +1,11 @@
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import './index.css'; import 'index.css';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import App from './App'; import App from 'App';
import store from './store'; import store from 'store';
import 'bootstrap/dist/css/bootstrap.min.css'; import 'bootstrap/dist/css/bootstrap.min.css';
import { icons } from './assets/icons'; import { icons } from 'assets/icons';
React.icons = icons; React.icons = icons;

14
src/pages/DeviceListPage/DeviceList.js
View File

@@ -16,13 +16,13 @@ import Select from 'react-select';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { cilSync, cilInfo, cilBadge, cilBan } from '@coreui/icons'; import { cilSync, cilInfo, cilBadge, cilBan } from '@coreui/icons';
import CIcon from '@coreui/icons-react'; import CIcon from '@coreui/icons-react';
import { getToken } from '../../utils/authHelper'; import { getToken } from 'utils/authHelper';
import axiosInstance from '../../utils/axiosInstance'; import axiosInstance from 'utils/axiosInstance';
import { cleanBytesString, cropStringWithEllipsis } from '../../utils/helper'; import { cleanBytesString, cropStringWithEllipsis } from 'utils/helper';
import meshIcon from '../../assets/icons/Mesh.png'; import meshIcon from 'assets/icons/Mesh.png';
import apIcon from '../../assets/icons/AP.png'; import apIcon from 'assets/icons/AP.png';
import internetSwitch from '../../assets/icons/Switch.png'; import internetSwitch from 'assets/icons/Switch.png';
import iotIcon from '../../assets/icons/IotIcon.png'; import iotIcon from 'assets/icons/IotIcon.png';
const DeviceList = () => { const DeviceList = () => {
const [loadedSerials, setLoadedSerials] = useState(false); const [loadedSerials, setLoadedSerials] = useState(false);

12
src/pages/DevicePage/ActionModal.js
View File

@@ -14,13 +14,13 @@ import React, { useState, useEffect } from 'react';
import DatePicker from 'react-widgets/DatePicker'; import DatePicker from 'react-widgets/DatePicker';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import { convertDateToUtc, convertDateFromUtc, dateToUnix } from '../../utils/helper'; import { convertDateToUtc, convertDateFromUtc, dateToUnix } from 'utils/helper';
import 'react-widgets/styles.css'; import 'react-widgets/styles.css';
import { getToken } from '../../utils/authHelper'; import { getToken } from 'utils/authHelper';
import axiosInstance from '../../utils/axiosInstance'; import axiosInstance from 'utils/axiosInstance';
import eventBus from '../../utils/EventBus'; import eventBus from 'utils/EventBus';
import LoadingButton from '../../components/LoadingButton'; import LoadingButton from 'components/LoadingButton';
import SuccessfulActionModalBody from '../../components/SuccessfulActionModalBody'; import SuccessfulActionModalBody from 'components/SuccessfulActionModalBody';
const ActionModal = ({ show, toggleModal, title, directions, action }) => { const ActionModal = ({ show, toggleModal, title, directions, action }) => {
const [hadSuccess, setHadSuccess] = useState(false); const [hadSuccess, setHadSuccess] = useState(false);

12
src/pages/DevicePage/BlinkModal.js
View File

@@ -17,13 +17,13 @@ import React, { useState, useEffect } from 'react';
import DatePicker from 'react-widgets/DatePicker'; import DatePicker from 'react-widgets/DatePicker';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import { convertDateFromUtc, convertDateToUtc, dateToUnix } from '../../utils/helper'; import { convertDateFromUtc, convertDateToUtc, dateToUnix } from 'utils/helper';
import 'react-widgets/styles.css'; import 'react-widgets/styles.css';
import { getToken } from '../../utils/authHelper'; import { getToken } from 'utils/authHelper';
import axiosInstance from '../../utils/axiosInstance'; import axiosInstance from 'utils/axiosInstance';
import eventBus from '../../utils/EventBus'; import eventBus from 'utils/EventBus';
import SuccessfulActionModalBody from '../../components/SuccessfulActionModalBody'; import SuccessfulActionModalBody from 'components/SuccessfulActionModalBody';
import LoadingButton from '../../components/LoadingButton'; import LoadingButton from 'components/LoadingButton';
const BlinkModal = ({ show, toggleModal }) => { const BlinkModal = ({ show, toggleModal }) => {
const [hadSuccess, setHadSuccess] = useState(false); const [hadSuccess, setHadSuccess] = useState(false);

10
src/pages/DevicePage/ConfigureModal.js
View File

@@ -17,11 +17,11 @@ import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import 'react-widgets/styles.css'; import 'react-widgets/styles.css';
import { getToken } from '../../utils/authHelper'; import { getToken } from 'utils/authHelper';
import { checkIfJson } from '../../utils/helper'; import { checkIfJson } from 'utils/helper';
import axiosInstance from '../../utils/axiosInstance'; import axiosInstance from 'utils/axiosInstance';
import eventBus from '../../utils/EventBus'; import eventBus from 'utils/EventBus';
import SuccessfulActionModalBody from '../../components/SuccessfulActionModalBody'; import SuccessfulActionModalBody from 'components/SuccessfulActionModalBody';
const ConfigureModal = ({ show, toggleModal }) => { const ConfigureModal = ({ show, toggleModal }) => {
const [hadSuccess, setHadSuccess] = useState(false); const [hadSuccess, setHadSuccess] = useState(false);

8
src/pages/DevicePage/DeviceActions.js
View File

@@ -1,6 +1,9 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { CButton, CCard, CCardHeader, CCardBody, CRow, CCol } from '@coreui/react'; import { CButton, CCard, CCardHeader, CCardBody, CRow, CCol } from '@coreui/react';
import axiosInstance from 'utils/axiosInstance';
import { getToken } from 'utils/authHelper';
import LoadingButton from 'components/LoadingButton';
import ActionModal from './ActionModal'; import ActionModal from './ActionModal';
import FirmwareUpgradeModal from './FirmwareUpgradeModal'; import FirmwareUpgradeModal from './FirmwareUpgradeModal';
import ConfigureModal from './ConfigureModal'; import ConfigureModal from './ConfigureModal';
@@ -8,9 +11,6 @@ import TraceModal from './TraceModal';
import WifiScanModal from './WifiScanModal'; import WifiScanModal from './WifiScanModal';
import BlinkModal from './BlinkModal'; import BlinkModal from './BlinkModal';
import FactoryResetModal from './FactoryResetModal'; import FactoryResetModal from './FactoryResetModal';
import axiosInstance from '../../utils/axiosInstance';
import { getToken } from '../../utils/authHelper';
import LoadingButton from '../../components/LoadingButton';
const DeviceActions = ({ selectedDeviceId }) => { const DeviceActions = ({ selectedDeviceId }) => {
const [showRebootModal, setShowRebootModal] = useState(false); const [showRebootModal, setShowRebootModal] = useState(false);
@@ -48,7 +48,7 @@ const DeviceActions = ({ selectedDeviceId }) => {
const toggleFactoryResetModal = () => { const toggleFactoryResetModal = () => {
setShowFactoryModal(!showFactoryModal); setShowFactoryModal(!showFactoryModal);
} };
const getRttysInfo = () => { const getRttysInfo = () => {
setConnectLoading(true); setConnectLoading(true);

12
src/pages/DevicePage/DeviceCommands.js
View File

@@ -16,14 +16,14 @@ import { cilCloudDownload, cilSync } from '@coreui/icons';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faClipboardCheck } from '@fortawesome/free-solid-svg-icons'; import { faClipboardCheck } from '@fortawesome/free-solid-svg-icons';
import { prettyDate, dateToUnix } from '../../utils/helper'; import { prettyDate, dateToUnix } from 'utils/helper';
import axiosInstance from '../../utils/axiosInstance'; import axiosInstance from 'utils/axiosInstance';
import { getToken } from '../../utils/authHelper'; import { getToken } from 'utils/authHelper';
import eventBus from 'utils/EventBus';
import ConfirmModal from 'components/ConfirmModal';
import LoadingButton from 'components/LoadingButton';
import WifiScanResultModalWidget from './WifiScanResultModal'; import WifiScanResultModalWidget from './WifiScanResultModal';
import ConfirmModal from '../../components/ConfirmModal';
import DeviceCommandsCollapse from './DeviceCommandsCollapse'; import DeviceCommandsCollapse from './DeviceCommandsCollapse';
import LoadingButton from '../../components/LoadingButton';
import eventBus from '../../utils/EventBus';
const DeviceCommands = ({ selectedDeviceId }) => { const DeviceCommands = ({ selectedDeviceId }) => {
const [showScanModal, setShowScanModal] = useState(false); const [showScanModal, setShowScanModal] = useState(false);

48
src/pages/DevicePage/DeviceConfiguration.js
View File

@@ -12,15 +12,15 @@ import {
CCardFooter, CCardFooter,
CButton, CButton,
CRow, CRow,
CPopover CPopover,
} from '@coreui/react'; } from '@coreui/react';
import CIcon from '@coreui/icons-react'; import CIcon from '@coreui/icons-react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { cilWindowMaximize } from '@coreui/icons'; import { cilWindowMaximize } from '@coreui/icons';
import { prettyDate } from '../../utils/helper'; import { prettyDate } from 'utils/helper';
import axiosInstance from '../../utils/axiosInstance'; import axiosInstance from 'utils/axiosInstance';
import { getToken } from '../../utils/authHelper'; import { getToken } from 'utils/authHelper';
import DeviceConfigurationModal from './DeviceConfigurationModal' import DeviceConfigurationModal from './DeviceConfigurationModal';
const DeviceConfiguration = ({ selectedDeviceId }) => { const DeviceConfiguration = ({ selectedDeviceId }) => {
const [collapse, setCollapse] = useState(false); const [collapse, setCollapse] = useState(false);
@@ -34,7 +34,7 @@ const DeviceConfiguration = ({ selectedDeviceId }) => {
const toggleModal = () => { const toggleModal = () => {
setShowModal(!showModal); setShowModal(!showModal);
} };
const getDevice = () => { const getDevice = () => {
const options = { const options = {
@@ -48,7 +48,6 @@ const DeviceConfiguration = ({ selectedDeviceId }) => {
.get(`/device/${encodeURIComponent(selectedDeviceId)}`, options) .get(`/device/${encodeURIComponent(selectedDeviceId)}`, options)
.then((response) => { .then((response) => {
setDevice(response.data); setDevice(response.data);
}) })
.catch(() => {}); .catch(() => {});
}; };
@@ -62,23 +61,26 @@ const DeviceConfiguration = ({ selectedDeviceId }) => {
<div> <div>
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<CRow> <CRow>
<CCol> <CCol>Device Details</CCol>
Device Details <CCol>
</CCol> <div style={{ float: 'right' }}>
<CCol> <CPopover content="View raw JSON">
<div style={{ float: 'right'}}> <CButton color="secondary" onClick={() => toggleModal()} size="sm">
<CPopover content="View raw JSON"> <CIcon content={cilWindowMaximize} />
<CButton color="secondary" onClick={() => toggleModal()} size="sm"> </CButton>
<CIcon content={cilWindowMaximize}/> </CPopover>
</CButton> </div>
</CPopover> </CCol>
</div> </CRow>
</CCol>
</CRow>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CForm action="" method="post" encType="multipart/form-data" className="form-horizontal"> <CForm
action=""
method="post"
encType="multipart/form-data"
className="form-horizontal"
>
<CFormGroup row> <CFormGroup row>
<CCol md="3"> <CCol md="3">
<CLabel>UUID : </CLabel> <CLabel>UUID : </CLabel>
@@ -181,7 +183,7 @@ const DeviceConfiguration = ({ selectedDeviceId }) => {
</CForm> </CForm>
</CCardBody> </CCardBody>
</CCard> </CCard>
<DeviceConfigurationModal show={showModal} toggle={toggleModal} configuration={device}/> <DeviceConfigurationModal show={showModal} toggle={toggleModal} configuration={device} />
</div> </div>
); );
} }

28
src/pages/DevicePage/DeviceConfigurationModal.js
View File

@@ -11,21 +11,19 @@ import {
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
const DeviceConfigurationModal = ({ show, toggle, configuration }) => ( const DeviceConfigurationModal = ({ show, toggle, configuration }) => (
<CModal size="lg" show={show} onClose={toggle}> <CModal size="lg" show={show} onClose={toggle}>
<CModalHeader closeButton> <CModalHeader closeButton>
<CModalTitle style={{ color: 'black' }}> <CModalTitle style={{ color: 'black' }}>Device Configuration</CModalTitle>
Device Configuration </CModalHeader>
</CModalTitle> <CModalBody>
</CModalHeader> <pre className="ignore">{JSON.stringify(configuration, null, 4)}</pre>
<CModalBody> </CModalBody>
<pre className="ignore">{JSON.stringify(configuration, null, 4)}</pre> <CModalFooter>
</CModalBody> <CButton color="secondary" onClick={toggle}>
<CModalFooter> Close
<CButton color="secondary" onClick={toggle}> </CButton>
Close </CModalFooter>
</CButton> </CModal>
</CModalFooter>
</CModal>
); );
DeviceConfigurationModal.propTypes = { DeviceConfigurationModal.propTypes = {

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

@@ -14,10 +14,10 @@ import {
import CIcon from '@coreui/icons-react'; import CIcon from '@coreui/icons-react';
import DatePicker from 'react-widgets/DatePicker'; import DatePicker from 'react-widgets/DatePicker';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { prettyDate, dateToUnix } from '../../utils/helper'; import { prettyDate, dateToUnix } from 'utils/helper';
import axiosInstance from '../../utils/axiosInstance'; import axiosInstance from 'utils/axiosInstance';
import { getToken } from '../../utils/authHelper'; import { getToken } from 'utils/authHelper';
import LoadingButton from '../../components/LoadingButton'; import LoadingButton from 'components/LoadingButton';
const DeviceHealth = ({ selectedDeviceId }) => { const DeviceHealth = ({ selectedDeviceId }) => {
const [collapse, setCollapse] = useState(false); const [collapse, setCollapse] = useState(false);
@@ -30,7 +30,7 @@ const DeviceHealth = ({ selectedDeviceId }) => {
const [loadingMore, setLoadingMore] = useState(false); const [loadingMore, setLoadingMore] = useState(false);
const [showLoadingMore, setShowLoadingMore] = useState(true); const [showLoadingMore, setShowLoadingMore] = useState(true);
const [sanityLevel, setSanityLevel] = useState(null); const [sanityLevel, setSanityLevel] = useState(null);
const [barColor, setBarColor] = useState('gradient-dark') const [barColor, setBarColor] = useState('gradient-dark');
const toggle = (e) => { const toggle = (e) => {
setCollapse(!collapse); setCollapse(!collapse);
@@ -147,28 +147,25 @@ const DeviceHealth = ({ selectedDeviceId }) => {
setSanityLevel(tempSanityLevel); setSanityLevel(tempSanityLevel);
if (tempSanityLevel === 100) { if (tempSanityLevel === 100) {
setBarColor('gradient-success'); setBarColor('gradient-success');
} } else if (tempSanityLevel >= 90) {
else if (tempSanityLevel >= 90) {
setBarColor('gradient-warning'); setBarColor('gradient-warning');
} } else {
else {
setBarColor('gradient-danger'); setBarColor('gradient-danger');
} }
} } else {
else {
setBarColor('gradient-dark'); setBarColor('gradient-dark');
} }
}, [healthChecks]); }, [healthChecks]);
useEffect(() => { useEffect(() => {
if (selectedDeviceId && start !== '' && end !== '') { if (selectedDeviceId && start !== '' && end !== '') {
getDeviceHealth(); getDeviceHealth();
} else if (selectedDeviceId && start === '' && end === '') { } else if (selectedDeviceId && start === '' && end === '') {
getDeviceHealth(); getDeviceHealth();
} }
}, [start, end, selectedDeviceId]); }, [start, end, selectedDeviceId]);
return ( return (
<CWidgetDropdown <CWidgetDropdown
header={sanityLevel ? `${sanityLevel}%` : 'Unknown'} header={sanityLevel ? `${sanityLevel}%` : 'Unknown'}
text="Device Health" text="Device Health"

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

@@ -13,10 +13,10 @@ import {
import CIcon from '@coreui/icons-react'; import CIcon from '@coreui/icons-react';
import DatePicker from 'react-widgets/DatePicker'; import DatePicker from 'react-widgets/DatePicker';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { prettyDate, dateToUnix } from '../../utils/helper'; import { prettyDate, dateToUnix } from 'utils/helper';
import axiosInstance from '../../utils/axiosInstance'; import axiosInstance from 'utils/axiosInstance';
import { getToken } from '../../utils/authHelper'; import { getToken } from 'utils/authHelper';
import LoadingButton from '../../components/LoadingButton'; import LoadingButton from 'components/LoadingButton';
const DeviceLogs = ({ selectedDeviceId }) => { const DeviceLogs = ({ selectedDeviceId }) => {
const [collapse, setCollapse] = useState(false); const [collapse, setCollapse] = useState(false);

5
src/pages/DevicePage/DeviceStatistics/DeviceLifetimeStatisics.js
View File

@@ -1,9 +1,8 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { CChartLine } from '@coreui/react-chartjs'; import { CChartLine } from '@coreui/react-chartjs';
import axiosInstance from '../../../utils/axiosInstance'; import axiosInstance from 'utils/axiosInstance';
import { getToken } from '../../../utils/authHelper'; import { getToken } from 'utils/authHelper';
import { addDays, dateToUnix } from '../../../utils/helper';
const DeviceLifetimeStatistics = ({ selectedDeviceId }) => { const DeviceLifetimeStatistics = ({ selectedDeviceId }) => {
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);

6
src/pages/DevicePage/DeviceStatistics/StatisticsChartList.js
View File

@@ -1,10 +1,10 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { v4 as createUuid } from 'uuid'; import { v4 as createUuid } from 'uuid';
import axiosInstance from 'utils/axiosInstance';
import { getToken } from 'utils/authHelper';
import { unixToTime, capitalizeFirstLetter } from 'utils/helper';
import DeviceStatisticsChart from './DeviceStatisticsChart'; import DeviceStatisticsChart from './DeviceStatisticsChart';
import axiosInstance from '../../../utils/axiosInstance';
import { getToken } from '../../../utils/authHelper';
import { unixToTime, capitalizeFirstLetter } from '../../../utils/helper';
const StatisticsChartList = ({ selectedDeviceId, lastRefresh }) => { const StatisticsChartList = ({ selectedDeviceId, lastRefresh }) => {
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);

267
src/pages/DevicePage/FactoryResetModal.js
View File

@@ -1,146 +1,143 @@
import { import {
CButton, CButton,
CModal, CModal,
CModalHeader, CModalHeader,
CModalTitle, CModalTitle,
CModalBody, CModalBody,
CModalFooter, CModalFooter,
CSpinner, CSpinner,
CRow, CRow,
CForm, CForm,
CSwitch, CSwitch,
CAlert CAlert,
} from '@coreui/react'; } from '@coreui/react';
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import 'react-widgets/styles.css'; import 'react-widgets/styles.css';
import { getToken } from '../../utils/authHelper'; import { getToken } from 'utils/authHelper';
import axiosInstance from '../../utils/axiosInstance'; import axiosInstance from 'utils/axiosInstance';
import SuccessfulActionModalBody from '../../components/SuccessfulActionModalBody'; import SuccessfulActionModalBody from 'components/SuccessfulActionModalBody';
const ConfigureModal = ({ show, toggleModal }) => { const ConfigureModal = ({ show, toggleModal }) => {
const [hadSuccess, setHadSuccess] = useState(false); const [hadSuccess, setHadSuccess] = useState(false);
const [hadFailure, setHadFailure] = useState(false); const [hadFailure, setHadFailure] = useState(false);
const [doingNow, setDoingNow] = useState(false); const [doingNow, setDoingNow] = useState(false);
const [waiting, setWaiting] = useState(false); const [waiting, setWaiting] = useState(false);
const [keepRedirector, setKeepRedirector] = useState(true); const [keepRedirector, setKeepRedirector] = useState(true);
const [responseBody, setResponseBody] = useState(''); const [responseBody, setResponseBody] = useState('');
const [checkingIfSure, setCheckingIfSure] = useState(false); const [checkingIfSure, setCheckingIfSure] = useState(false);
const selectedDeviceId = useSelector((state) => state.selectedDeviceId); const selectedDeviceId = useSelector((state) => state.selectedDeviceId);
const toggleRedirector = () => { const toggleRedirector = () => {
setKeepRedirector(!keepRedirector); setKeepRedirector(!keepRedirector);
} };
const confirmingIfSure = () => { const confirmingIfSure = () => {
setCheckingIfSure(true); setCheckingIfSure(true);
};
useEffect(() => {
setHadSuccess(false);
setHadFailure(false);
setWaiting(false);
setResponseBody('');
setCheckingIfSure(false);
}, [show]);
const doAction = () => {
setHadFailure(false);
setHadSuccess(false);
setWaiting(true);
const parameters = {
serialNumber: selectedDeviceId,
keepRedirector,
}; };
useEffect(() => { const headers = {
setHadSuccess(false); Accept: 'application/json',
setHadFailure(false); Authorization: `Bearer ${getToken()}`,
setWaiting(false);
setResponseBody('');
setCheckingIfSure(false);
}, [show]);
const doAction = () => {
setHadFailure(false);
setHadSuccess(false);
setWaiting(true);
const parameters = {
serialNumber: selectedDeviceId,
keepRedirector,
};
const headers = {
Accept: 'application/json',
Authorization: `Bearer ${getToken()}`,
};
axiosInstance
.post(`/device/${encodeURIComponent(selectedDeviceId)}/factory`, parameters, { headers })
.then(() => {
setResponseBody('Command submitted!');
setHadSuccess(true);
})
.catch(() => {
setResponseBody('Error while submitting command!');
setHadFailure(true);
})
.finally(() => {
setDoingNow(false);
setCheckingIfSure(false);
setWaiting(false);
});
}; };
return ( axiosInstance
<CModal show={show} onClose={toggleModal}> .post(`/device/${encodeURIComponent(selectedDeviceId)}/factory`, parameters, { headers })
<CModalHeader closeButton> .then(() => {
<CModalTitle>Factory Reset Device</CModalTitle> setResponseBody('Command submitted!');
</CModalHeader> setHadSuccess(true);
{hadSuccess ? ( })
<SuccessfulActionModalBody toggleModal={toggleModal} /> .catch(() => {
) : ( setResponseBody('Error while submitting command!');
<div> setHadFailure(true);
<CModalBody> })
<CAlert color="danger"> .finally(() => {
Warning: Once you submit this cannot be reverted setDoingNow(false);
</CAlert> setCheckingIfSure(false);
<CRow style={{ marginTop: '20px' }}> setWaiting(false);
<p style={{ paddingLeft: '5%' }}>Keep redirector :</p> });
<CForm style={{ paddingLeft: '5%' }}> };
<CSwitch
color="primary" return (
defaultChecked={keepRedirector} <CModal show={show} onClose={toggleModal}>
onClick={() => toggleRedirector()} <CModalHeader closeButton>
labelOn="Yes" <CModalTitle>Factory Reset Device</CModalTitle>
labelOff="No" </CModalHeader>
/> {hadSuccess ? (
</CForm> <SuccessfulActionModalBody toggleModal={toggleModal} />
</CRow> ) : (
<div hidden={!hadSuccess && !hadFailure}> <div>
<div> <CModalBody>
<pre className="ignore">{responseBody}</pre> <CAlert color="danger">Warning: Once you submit this cannot be reverted</CAlert>
</div> <CRow style={{ marginTop: '20px' }}>
<p style={{ paddingLeft: '5%' }}>Keep redirector :</p>
<CForm style={{ paddingLeft: '5%' }}>
<CSwitch
color="primary"
defaultChecked={keepRedirector}
onClick={() => toggleRedirector()}
labelOn="Yes"
labelOff="No"
/>
</CForm>
</CRow>
<div hidden={!hadSuccess && !hadFailure}>
<div>
<pre className="ignore">{responseBody}</pre>
</div> </div>
</CModalBody> </div>
<CModalFooter> </CModalBody>
<div hidden={!checkingIfSure}>Are you sure?</div> <CModalFooter>
<CButton <div hidden={!checkingIfSure}>Are you sure?</div>
disabled={waiting} <CButton
hidden={checkingIfSure} disabled={waiting}
color="primary" hidden={checkingIfSure}
onClick={() => confirmingIfSure()} color="primary"
> onClick={() => confirmingIfSure()}
Submit >
</CButton> Submit
<CButton </CButton>
hidden={!checkingIfSure} <CButton
disabled={waiting} hidden={!checkingIfSure}
color="primary" disabled={waiting}
onClick={() => doAction(false)} color="primary"
> onClick={() => doAction(false)}
{waiting && !doingNow ? 'Loading...' : 'Yes'} {' '} >
<CSpinner hidden={!waiting || doingNow} component="span" size="sm" /> {waiting && !doingNow ? 'Loading...' : 'Yes'} {' '}
</CButton> <CSpinner hidden={!waiting || doingNow} component="span" size="sm" />
<CButton color="secondary" onClick={toggleModal}> </CButton>
Cancel <CButton color="secondary" onClick={toggleModal}>
</CButton> Cancel
</CModalFooter> </CButton>
</div> </CModalFooter>
)} </div>
</CModal> )}
); </CModal>
}; );
};
ConfigureModal.propTypes = { ConfigureModal.propTypes = {
show: PropTypes.bool.isRequired, show: PropTypes.bool.isRequired,
toggleModal: PropTypes.func.isRequired, toggleModal: PropTypes.func.isRequired,
}; };
export default ConfigureModal;
export default ConfigureModal;

8
src/pages/DevicePage/FirmwareUpgradeModal.js
View File

@@ -15,11 +15,11 @@ import React, { useState, useEffect } from 'react';
import DatePicker from 'react-widgets/DatePicker'; import DatePicker from 'react-widgets/DatePicker';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import { convertDateToUtc, convertDateFromUtc, dateToUnix } from '../../utils/helper'; import { convertDateToUtc, convertDateFromUtc, dateToUnix } from 'utils/helper';
import 'react-widgets/styles.css'; import 'react-widgets/styles.css';
import { getToken } from '../../utils/authHelper'; import { getToken } from 'utils/authHelper';
import axiosInstance from '../../utils/axiosInstance'; import axiosInstance from 'utils/axiosInstance';
import eventBus from '../../utils/EventBus'; import eventBus from 'utils/EventBus';
const FirmwareUpgradeModal = ({ show, toggleModal }) => { const FirmwareUpgradeModal = ({ show, toggleModal }) => {
const [hadSuccess, setHadSuccess] = useState(false); const [hadSuccess, setHadSuccess] = useState(false);

12
src/pages/DevicePage/TraceModal.js
View File

@@ -18,13 +18,13 @@ import React, { useState, useEffect } from 'react';
import DatePicker from 'react-widgets/DatePicker'; import DatePicker from 'react-widgets/DatePicker';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import { convertDateToUtc, dateToUnix } from '../../utils/helper'; import { convertDateToUtc, dateToUnix } from 'utils/helper';
import 'react-widgets/styles.css'; import 'react-widgets/styles.css';
import { getToken } from '../../utils/authHelper'; import { getToken } from 'utils/authHelper';
import axiosInstance from '../../utils/axiosInstance'; import axiosInstance from 'utils/axiosInstance';
import eventBus from '../../utils/EventBus'; import eventBus from 'utils/EventBus';
import LoadingButton from '../../components/LoadingButton'; import LoadingButton from 'components/LoadingButton';
import SuccessfulActionModalBody from '../../components/SuccessfulActionModalBody'; import SuccessfulActionModalBody from 'components/SuccessfulActionModalBody';
const TraceModal = ({ show, toggleModal }) => { const TraceModal = ({ show, toggleModal }) => {
const [hadSuccess, setHadSuccess] = useState(false); const [hadSuccess, setHadSuccess] = useState(false);

14
src/pages/DevicePage/WifiScanModal.js
View File

@@ -8,17 +8,17 @@ import {
CRow, CRow,
CForm, CForm,
CSwitch, CSwitch,
CCol CCol,
} from '@coreui/react'; } from '@coreui/react';
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { getToken } from 'utils/authHelper';
import axiosInstance from 'utils/axiosInstance';
import eventBus from 'utils/EventBus';
import LoadingButton from 'components/LoadingButton';
import WifiChannelTable from './WifiChannelTable'; import WifiChannelTable from './WifiChannelTable';
import 'react-widgets/styles.css'; import 'react-widgets/styles.css';
import { getToken } from '../../utils/authHelper';
import axiosInstance from '../../utils/axiosInstance';
import eventBus from '../../utils/EventBus';
import LoadingButton from '../../components/LoadingButton';
const WifiScanModal = ({ show, toggleModal }) => { const WifiScanModal = ({ show, toggleModal }) => {
const [hadSuccess, setHadSuccess] = useState(false); const [hadSuccess, setHadSuccess] = useState(false);
@@ -35,7 +35,7 @@ const WifiScanModal = ({ show, toggleModal }) => {
const toggleActiveScan = () => { const toggleActiveScan = () => {
setActiveScan(!activeScan); setActiveScan(!activeScan);
} };
useEffect(() => { useEffect(() => {
setHadSuccess(false); setHadSuccess(false);
@@ -87,7 +87,7 @@ const WifiScanModal = ({ show, toggleModal }) => {
const parameters = { const parameters = {
serialNumber: selectedDeviceId, serialNumber: selectedDeviceId,
verbose: choseVerbose, verbose: choseVerbose,
activeScan activeScan,
}; };
const headers = { const headers = {
Accept: 'application/json', Accept: 'application/json',

2
src/pages/DevicePage/WifiScanResultModal.js
View File

@@ -9,8 +9,8 @@ import {
CModalFooter, CModalFooter,
} from '@coreui/react'; } from '@coreui/react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { prettyDate } from 'utils/helper';
import WifiChannelTable from './WifiChannelTable'; import WifiChannelTable from './WifiChannelTable';
import { prettyDate } from '../../utils/helper';
const WifiScanResultModal = ({ show, toggle, scanResults, date }) => { const WifiScanResultModal = ({ show, toggle, scanResults, date }) => {
const parseThroughList = (scanList) => { const parseThroughList = (scanList) => {

6
src/pages/LoginPage/Login.js
View File

@@ -19,8 +19,8 @@ import {
import CIcon from '@coreui/icons-react'; import CIcon from '@coreui/icons-react';
import { cilUser, cilLockLocked, cilLink } from '@coreui/icons'; import { cilUser, cilLockLocked, cilLink } from '@coreui/icons';
import { useDispatch } from 'react-redux'; import { useDispatch } from 'react-redux';
import axiosInstance from '../../utils/axiosInstance'; import axiosInstance from 'utils/axiosInstance';
import logo from '../../assets/OpenWiFi_LogoLockup_DarkGreyColour.svg'; import logo from 'assets/OpenWiFi_LogoLockup_DarkGreyColour.svg';
const Login = () => { const Login = () => {
const dispatch = useDispatch(); const dispatch = useDispatch();
@@ -183,7 +183,7 @@ const Login = () => {
Login Login
</CButton> </CButton>
</CCol> </CCol>
<CCol xs="6" className="text-right"/> <CCol xs="6" className="text-right" />
</CRow> </CRow>
</CForm> </CForm>
</CCardBody> </CCardBody>

4
src/routes.js
View File

@@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
const DevicePage = React.lazy(() => import('./pages/DevicePage/DevicePage')); const DevicePage = React.lazy(() => import('pages/DevicePage/DevicePage'));
const DeviceListPage = React.lazy(() => import('./pages/DeviceListPage/DeviceListPage')); const DeviceListPage = React.lazy(() => import('pages/DeviceListPage/DeviceListPage'));
const routes = [ const routes = [
{ path: '/devices', exact: true, name: 'Devices', component: DeviceListPage }, { path: '/devices', exact: true, name: 'Devices', component: DeviceListPage },