+
+ {
+ if (n.style?.background) return n.style.background;
+
+ return '#fff';
+ }}
+ nodeBorderRadius={5}
+ />
+
+
+ );
+};
+
+NetworkDiagram.propTypes = {
+ show: PropTypes.bool,
+ elements: PropTypes.instanceOf(Array).isRequired,
+ setElements: PropTypes.func.isRequired,
+};
+
+NetworkDiagram.defaultProps = {
+ show: true,
+};
+
+export default React.memo(NetworkDiagram);
diff --git a/src/components/NetworkDiagram/index.js b/src/components/NetworkDiagram/index.js
index 0910b50..29dcd2f 100644
--- a/src/components/NetworkDiagram/index.js
+++ b/src/components/NetworkDiagram/index.js
@@ -1,9 +1,9 @@
import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { CRow, CCol } from '@coreui/react';
-import { NetworkDiagram as Graph } from 'ucentral-libs';
import { useTranslation } from 'react-i18next';
import createLayoutedElements from './dagreAdapter';
+import Graph from './Graph';
const associationStyle = {
background: '#3399ff',
diff --git a/src/components/WifiAnalysis/RadioAnalysis.js b/src/components/WifiAnalysis/RadioAnalysis.js
new file mode 100644
index 0000000..9f7af05
--- /dev/null
+++ b/src/components/WifiAnalysis/RadioAnalysis.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { CDataTable } from '@coreui/react';
+
+const RadioAnalysisTable = ({ data, loading }) => {
+ const columns = [
+ { key: 'radio', label: '#', _style: { width: '5%' } },
+ { key: 'channel', label: 'Ch', _style: { width: '5%' } },
+ { key: 'channelWidth', label: 'C Width', _style: { width: '7%' }, sorter: false },
+ { key: 'noise', label: 'Noise', _style: { width: '4%' }, sorter: false },
+ { key: 'txPower', label: 'Tx Power', _style: { width: '9%' }, sorter: false },
+ { key: 'activeMs', label: 'Active MS', _style: { width: '23%' }, sorter: false },
+ { key: 'busyMs', label: 'Busy MS', _style: { width: '23%' }, sorter: false },
+ { key: 'receiveMs', label: 'Receive MS', _style: { width: '23%' }, sorter: false },
+ ];
+
+ const centerIfEmpty = (value) => (
+ {count}
+ )} +
+ {item.radio.radio} ,
+ rxMcs: (item) => centerIfEmpty(item.rxMcs),
+ rxNss: (item) => centerIfEmpty(item.rxNss),
+ rssi: (item) => centerIfEmpty(item.rssi),
+ ips: (item) => displayIp(item.ssid, item.ipV4, item.ipV6),
+ }}
+ />
+
+
+ {ips?.ssid}
+
+
+
+
+
+ );
+};
+
+WifiAnalysisTable.propTypes = {
+ t: PropTypes.func.isRequired,
+ data: PropTypes.instanceOf(Object).isRequired,
+ loading: PropTypes.bool.isRequired,
+};
+export default WifiAnalysisTable;
diff --git a/src/components/WifiAnalysis/index.js b/src/components/WifiAnalysis/index.js
index 7e20789..5cc2c9a 100644
--- a/src/components/WifiAnalysis/index.js
+++ b/src/components/WifiAnalysis/index.js
@@ -1,7 +1,7 @@
import React, { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { useParams } from 'react-router-dom';
-import { WifiAnalysisTable, RadioAnalysisTable, useAuth } from 'ucentral-libs';
+import { useAuth } from 'ucentral-libs';
import axiosInstance from 'utils/axiosInstance';
import NetworkDiagram from 'components/NetworkDiagram';
import { cleanBytesString, prettyDate, compactSecondsToDetailed } from 'utils/helper';
@@ -20,6 +20,8 @@ import {
} from '@coreui/react';
import CIcon from '@coreui/icons-react';
import { cilX } from '@coreui/icons';
+import RadioAnalysisTable from './RadioAnalysis';
+import WifiAnalysisTable from './WifiAnalysis';
const parseDbm = (value) => {
if (!value) return '-';
diff --git a/src/layout/index.js b/src/layout/index.js
index aa9366d..d1d55ec 100644
--- a/src/layout/index.js
+++ b/src/layout/index.js
@@ -1,6 +1,9 @@
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import routes from 'routes';
+import { CSidebarNavItem } from '@coreui/react';
+import { cilBarcode, cilRouter, cilSave, cilSettings, cilPeople } from '@coreui/icons';
+import CIcon from '@coreui/icons-react';
import { Header, Sidebar, Footer, PageContainer, ToastProvider, useAuth } from 'ucentral-libs';
const TheLayout = () => {
@@ -8,40 +11,46 @@ const TheLayout = () => {
const { endpoints, currentToken, user, avatar, logout } = useAuth();
const { t, i18n } = useTranslation();
- const navigation = [
- {
- _tag: 'CSidebarNavItem',
- name: t('common.devices'),
- icon: 'cilRouter',
- to: '/devices',
- },
- {
- _tag: 'CSidebarNavItem',
- name: t('firmware.title'),
- icon: 'cilSave',
- to: '/firmware',
- },
- {
- _tag: 'CSidebarNavItem',
- name: t('user.users'),
- to: '/users',
- icon: 'cilPeople',
- },
- {
- _tag: 'CSidebarNavItem',
- name: t('common.system'),
- to: '/system',
- icon: 'cilSettings',
- },
- ];
-
return (
+
+
+
+
+
+
+ IpV4
+
+ -
+ {ips?.v4?.map((ip) => (
+
- {ip} + ))} +
-
+ {ips?.v6?.map((ip) => (
+
- {ip} + ))} +
diff --git a/src/pages/DefaultConfigurationsPage/index.js b/src/pages/DefaultConfigurationsPage/index.js
new file mode 100644
index 0000000..5106479
--- /dev/null
+++ b/src/pages/DefaultConfigurationsPage/index.js
@@ -0,0 +1,6 @@
+import React from 'react';
+import DefaultConfigurationTable from 'components/DefaultConfigurationTable';
+
+const DefaultConfigurationsPage = () => updateNav(2)}
+ >
+ {t('common.blacklist')}
-
-
-
-
+ {index === 0 ?
+ {index === 1 ?
+ {index === 2 ?
diff --git a/src/pages/DevicePage/Details.js b/src/pages/DevicePage/Details.js
new file mode 100644
index 0000000..52d9a57
--- /dev/null
+++ b/src/pages/DevicePage/Details.js
@@ -0,0 +1,181 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import {
+ CCard,
+ CCardHeader,
+ CRow,
+ CCol,
+ CCardBody,
+ CPopover,
+ CButton,
+ CSpinner,
+ CLabel,
+ CLink,
+} from '@coreui/react';
+import CIcon from '@coreui/icons-react';
+import { cilSync } from '@coreui/icons';
+import { prettyDate } from 'utils/helper';
+import { CopyToClipboardButton, HideTextButton } from 'ucentral-libs';
+
+import styles from './index.module.scss';
+
+const DeviceDetails = ({ t, loading, getData, status, deviceConfig, lastStats }) => {
+ const [showPassword, setShowPassword] = useState(false);
+
+ const toggleShowPassword = () => {
+ setShowPassword(!showPassword);
+ };
+
+ const getPassword = () => {
+ const password =
+ deviceConfig?.devicePassword === '' ? 'openwifi' : deviceConfig?.devicePassword;
+ return showPassword ? password : '******';
+ };
+
+ const displayExtra = (key, value, extraData) => {
+ if (!extraData || !extraData[key]) return value;
+
+ if (!localStorage.getItem('owprov-ui') || key === 'owner') return extraData[key].name;
+
+ return (
+
+ {extraData[key].name}
+
+ );
+ };
+
+ return (
+
+
+
+
+ {(!lastStats || !status) && loading ? (
+
+
+ );
+};
+
+DeviceDetails.propTypes = {
+ t: PropTypes.func.isRequired,
+ loading: PropTypes.bool.isRequired,
+ getData: PropTypes.func.isRequired,
+ status: PropTypes.instanceOf(Object),
+ deviceConfig: PropTypes.instanceOf(Object),
+ lastStats: PropTypes.instanceOf(Object),
+};
+
+DeviceDetails.defaultProps = {
+ status: null,
+ lastStats: null,
+ deviceConfig: null,
+};
+
+export default React.memo(DeviceDetails);
diff --git a/src/pages/DevicePage/DeviceStatusCard/MemoryBar.js b/src/pages/DevicePage/DeviceStatusCard/MemoryBar.js
new file mode 100644
index 0000000..9e060ea
--- /dev/null
+++ b/src/pages/DevicePage/DeviceStatusCard/MemoryBar.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import { CPopover, CProgress, CProgressBar } from '@coreui/react';
+import PropTypes from 'prop-types';
+import { cleanBytesString } from 'utils/helper';
+
+const MemoryBar = ({ t, usedBytes, totalBytes }) => {
+ const used = cleanBytesString(usedBytes);
+ const total = cleanBytesString(totalBytes);
+ const percentage = Math.floor((usedBytes / totalBytes) * 100);
+
+ return (
+
+
+
+ {percentage >= 25 ? t('status.percentage_used', { percentage, total }) : ''}
+
+
+
+
+
+ );
+};
+
+MemoryBar.propTypes = {
+ t: PropTypes.func.isRequired,
+ usedBytes: PropTypes.number.isRequired,
+ totalBytes: PropTypes.number.isRequired,
+};
+
+export default React.memo(MemoryBar);
diff --git a/src/pages/DevicePage/DeviceStatusCard/index.js b/src/pages/DevicePage/DeviceStatusCard/index.js
new file mode 100644
index 0000000..25135aa
--- /dev/null
+++ b/src/pages/DevicePage/DeviceStatusCard/index.js
@@ -0,0 +1,203 @@
+/* eslint-disable jsx-a11y/img-redundant-alt */
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+ CCard,
+ CCardHeader,
+ CRow,
+ CCol,
+ CCardBody,
+ CBadge,
+ CAlert,
+ CPopover,
+ CButton,
+ CSpinner,
+ CLabel,
+} 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 styles from './index.module.scss';
+
+const errorField = (t) => (
+
+ {t('status.error')}
+
+);
+
+const DeviceStatusCard = ({
+ t,
+ loading,
+ error,
+ deviceSerialNumber,
+ getData,
+ status,
+ deviceConfig,
+ lastStats,
+}) => (
+
+
+
+
+ {(!lastStats || !status) && loading ? (
+
+
+);
+
+DeviceStatusCard.propTypes = {
+ t: PropTypes.func.isRequired,
+ loading: PropTypes.bool.isRequired,
+ error: PropTypes.bool.isRequired,
+ deviceSerialNumber: PropTypes.string.isRequired,
+ getData: PropTypes.func.isRequired,
+ status: PropTypes.instanceOf(Object),
+ deviceConfig: PropTypes.instanceOf(Object),
+ lastStats: PropTypes.instanceOf(Object),
+};
+
+DeviceStatusCard.defaultProps = {
+ status: null,
+ lastStats: null,
+ deviceConfig: null,
+};
+
+export default React.memo(DeviceStatusCard);
diff --git a/src/pages/DevicePage/DeviceStatusCard/index.module.scss b/src/pages/DevicePage/DeviceStatusCard/index.module.scss
new file mode 100644
index 0000000..c05f092
--- /dev/null
+++ b/src/pages/DevicePage/DeviceStatusCard/index.module.scss
@@ -0,0 +1,20 @@
+.centerContainer {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+}
+
+.overlayContainer {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: absolute;
+ width: 100%;
+ height: 100%;
+}
+
+.spinner {
+ height: 50px;
+ width: 50px;
+}
diff --git a/src/pages/DevicePage/NotesTab.js b/src/pages/DevicePage/NotesTab.js
new file mode 100644
index 0000000..730b725
--- /dev/null
+++ b/src/pages/DevicePage/NotesTab.js
@@ -0,0 +1,138 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { CCard, CCardHeader, CCardBody, CPopover, CButton } from '@coreui/react';
+import { cilPencil, cilX, cilSave } from '@coreui/icons';
+import CIcon from '@coreui/icons-react';
+import { useTranslation } from 'react-i18next';
+import { DetailedNotesTable, useAuth, useToast, useToggle } from 'ucentral-libs';
+import axiosInstance from 'utils/axiosInstance';
+
+const NotesTab = ({ deviceConfig, refresh }) => {
+ const { t } = useTranslation();
+ const { currentToken, endpoints, user } = useAuth();
+ const { addToast } = useToast();
+ const [editing, toggleEditing, setEditing] = useToggle(false);
+ const [loading, setLoading] = useState(false);
+ const [currentNotes, setCurrentNotes] = useState(deviceConfig.notes);
+
+ const stopEditing = () => {
+ setEditing(false);
+ refresh();
+ };
+
+ const addNote = (currentNote) => {
+ const newNotes = currentNotes;
+ newNotes.unshift({
+ note: currentNote,
+ new: true,
+ created: new Date().getTime() / 1000,
+ createdBy: user?.email ?? '',
+ });
+ setCurrentNotes([...newNotes]);
+ };
+
+ const save = () => {
+ setLoading(true);
+
+ const newNotes = [];
+ for (let i = 0; i < currentNotes.length; i += 1) {
+ if (currentNotes[i].new) newNotes.push({ note: currentNotes[i].note });
+ }
+
+ const parameters = {
+ id: deviceConfig.serialNumber,
+ notes: newNotes,
+ };
+
+ const options = {
+ headers: {
+ Accept: 'application/json',
+ Authorization: `Bearer ${currentToken}`,
+ },
+ };
+
+ axiosInstance
+ .put(`${endpoints.owgw}/api/v1/device/${deviceConfig.serialNumber}`, parameters, options)
+ .then(() => {
+ addToast({
+ title: t('firmware.update_success_title'),
+ body: t('firmware.update_success'),
+ color: 'success',
+ autohide: true,
+ });
+ refresh();
+ toggleEditing();
+ })
+ .catch((e) => {
+ addToast({
+ title: t('firmware.update_failure_title'),
+ body: t('firmware.update_failure', { error: e.response?.data?.ErrorDescription }),
+ color: 'danger',
+ autohide: true,
+ });
+ })
+ .finally(() => {
+ setLoading(false);
+ });
+ };
+
+ useEffect(() => {
+ setCurrentNotes(deviceConfig.notes);
+ }, [deviceConfig.notes]);
+
+ return (
+
-
@@ -137,7 +156,7 @@ const DevicePage = () => {
className="font-weight-bold"
href="#"
active={index === 0}
- onClick={() => setIndex(0)}
+ onClick={() => updateNav(0)}
>
{t('statistics.title')}
@@ -145,7 +164,7 @@ const DevicePage = () => {
className="font-weight-bold"
href="#"
active={index === 1}
- onClick={() => setIndex(1)}
+ onClick={() => updateNav(1)}
>
{t('common.details')}
@@ -153,15 +172,31 @@ const DevicePage = () => {
className="font-weight-bold"
href="#"
active={index === 5}
- onClick={() => setIndex(5)}
+ onClick={() => updateNav(5)}
>
{t('configuration.title')}
+ updateNav(8)}
+ >
+ {t('device.capabilities')}
+
+ updateNav(7)}
+ >
+ {t('configuration.notes')}
+
setIndex(6)}
+ onClick={() => updateNav(6)}
>
{t('wifi_analysis.title')}
@@ -169,7 +204,7 @@ const DevicePage = () => {
className="font-weight-bold"
href="#"
active={index === 2}
- onClick={() => setIndex(2)}
+ onClick={() => updateNav(2)}
>
{t('commands.title')}
@@ -177,7 +212,7 @@ const DevicePage = () => {
className="font-weight-bold"
href="#"
active={index === 3}
- onClick={() => setIndex(3)}
+ onClick={() => updateNav(3)}
>
{t('health.title')}
@@ -185,39 +220,53 @@ const DevicePage = () => {
className="font-weight-bold"
href="#"
active={index === 4}
- onClick={() => setIndex(4)}
+ onClick={() => updateNav(4)}
>
{t('device_logs.title')}
-
-
- {index === 0 ?
-
- {index === 1 ? (
-
-
- {index === 5 ? (
-
- {index === 6 ?
-
- {index === 2 ?
- {index === 3 ?
- {index === 4 ?
-
+ {deviceConfig ? (
+
+
+ {index === 0 ?
+
+ {index === 1 ? (
+
+
+ {index === 5 ? (
+
+
+ {index === 8 ?
+
+ {index === 6 ?
+
+ {index === 7 ? (
+
+
+ {index === 2 ?
+
+ {index === 3 ?
+ {index === 4 ?
+
+ ) : null}
diff --git a/src/pages/DevicePage/index.module.scss b/src/pages/DevicePage/index.module.scss
new file mode 100644
index 0000000..a2e8f70
--- /dev/null
+++ b/src/pages/DevicePage/index.module.scss
@@ -0,0 +1,20 @@
+.centerContainer {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+}
+
+.overlayContainer {
+ display: flex;
+ top: 0%;
+ left: 50%;
+ position: absolute;
+ width: 100%;
+ height: 100%;
+}
+
+.spinner {
+ height: 50px;
+ width: 50px;
+}
diff --git a/src/pages/FirmwareListPage/Table.js b/src/pages/FirmwareListPage/Table.js
new file mode 100644
index 0000000..2fb9960
--- /dev/null
+++ b/src/pages/FirmwareListPage/Table.js
@@ -0,0 +1,198 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ReactPaginate from 'react-paginate';
+import { v4 as createUuid } from 'uuid';
+import {
+ CButton,
+ CCard,
+ CCardBody,
+ CCardHeader,
+ CDataTable,
+ CPopover,
+ CSelect,
+ CSwitch,
+} from '@coreui/react';
+import CIcon from '@coreui/icons-react';
+import { cilSearch } from '@coreui/icons';
+import { CopyToClipboardButton } from 'ucentral-libs';
+import { prettyDate, cleanBytesString } from 'utils/helper';
+
+const FirmwareList = ({
+ t,
+ loading,
+ page,
+ pageCount,
+ setPage,
+ data,
+ toggleEditModal,
+ firmwarePerPage,
+ setFirmwarePerPage,
+ selectedDeviceType,
+ deviceTypes,
+ setSelectedDeviceType,
+ displayDev,
+ toggleDevDisplay,
+}) => {
+ const fields = [
+ { key: 'imageDate', label: t('firmware.image_date'), _style: { width: '1%' } },
+ { key: 'size', label: t('firmware.size'), _style: { width: '1%' } },
+ { key: 'revision', label: t('firmware.revision'), _style: { width: '1%' } },
+ { key: 'uri', label: 'URI' },
+ { key: 'show_details', label: '', _style: { width: '1%' } },
+ ];
+
+ const getShortRevision = (revision) => {
+ if (revision.includes(' / ')) {
+ return revision.split(' / ')[1];
+ }
+ return revision;
+ };
+
+ const changePage = (newValue) => {
+ setPage(newValue);
+ };
+
+ return (
+
+
+
+
+ (
+
+
+ ),
+ size: (item) => (
+
+
+ ),
+ revision: (item) => (
+
+
+
+
+ ),
+ uri: (item) => (
+
+
+ ),
+ show_details: (item) => (
+
+
+ toggleEditModal(item.id)}
+ >
+
+
+
+ ),
+ }}
+ />
+
+
+ );
+};
+
+FirmwareList.propTypes = {
+ t: PropTypes.func.isRequired,
+ loading: PropTypes.bool.isRequired,
+ pageCount: PropTypes.number.isRequired,
+ page: PropTypes.instanceOf(Object).isRequired,
+ setPage: PropTypes.func.isRequired,
+ data: PropTypes.instanceOf(Array).isRequired,
+ firmwarePerPage: PropTypes.string.isRequired,
+ setFirmwarePerPage: PropTypes.func.isRequired,
+ selectedDeviceType: PropTypes.string.isRequired,
+ deviceTypes: PropTypes.instanceOf(Array).isRequired,
+ setSelectedDeviceType: PropTypes.func.isRequired,
+ displayDev: PropTypes.bool.isRequired,
+ toggleDevDisplay: PropTypes.func.isRequired,
+ toggleEditModal: PropTypes.func.isRequired,
+};
+
+export default React.memo(FirmwareList);
diff --git a/src/pages/FirmwareListPage/index.js b/src/pages/FirmwareListPage/index.js
index 5cabe1a..a05ff48 100644
--- a/src/pages/FirmwareListPage/index.js
+++ b/src/pages/FirmwareListPage/index.js
@@ -11,9 +11,10 @@ import {
CTabContent,
CCardHeader,
} from '@coreui/react';
-import { FirmwareList, useAuth, useToast } from 'ucentral-libs';
+import { useAuth, useToast } from 'ucentral-libs';
import FirmwareDashboard from 'components/FirmwareDashboard';
import EditFirmwareModal from 'components/EditFirmwareModal';
+import Table from './Table';
const FirmwareListPage = () => {
const { t } = useTranslation();
@@ -196,7 +197,7 @@ const FirmwareListPage = () => {
- {
const { t, i18n } = useTranslation();
const { setCurrentToken, setEndpoints } = useAuth();
const { addToast } = useToast();
- const [defaultConfig, setDefaultConfig] = useState({
- value: '',
- error: false,
- hidden: true,
- placeholder: 'login.url',
- });
- const [loading, setLoading] = useState(false);
- const [loginResponse, setLoginResponse] = useState(initialResponseState);
- const [forgotResponse, setForgotResponse] = useState(initialResponseState);
- const [changePasswordResponse, setChangeResponse] = useState(initialResponseState);
- const [policies, setPolicies] = useState({
- passwordPolicy: '',
- passwordPattern: '',
- accessPolicy: '',
- });
- const [formType, setFormType] = useState('login');
- const [fields, updateFieldWithId, updateField, setFormFields] = useFormFields(initialFormState);
- const axiosInstance = axios.create();
- axiosInstance.defaults.timeout = 5000;
-
- const toggleForgotPassword = () => {
- setFormFields({
- ...initialFormState,
- ...{
- ucentralsecurl: defaultConfig,
- },
- });
- setLoginResponse(initialResponseState);
- setForgotResponse(initialResponseState);
- if (formType === 'login') setFormType('forgot-password');
- else setFormType('login');
- };
-
- const cancelPasswordChange = () => {
- setFormFields({
- ...initialFormState,
- ...{
- ucentralsecurl: defaultConfig,
- },
- });
- setLoginResponse(initialResponseState);
- setForgotResponse(initialResponseState);
- setFormType('login');
- };
-
- const signInValidation = () => {
- let valid = true;
- if (fields.ucentralsecurl.value === '') {
- updateField('ucentralsecurl', { error: true });
- valid = false;
- }
- if (fields.password.value === '') {
- updateField('password', { error: true });
- valid = false;
- }
- if (fields.username.value === '') {
- updateField('username', { error: true });
- valid = false;
- }
- if (
- formType === 'change-password' &&
- fields.newpassword.value !== fields.confirmpassword.value
- ) {
- updateField('confirmpassword', { error: true });
- valid = false;
- }
- return valid;
- };
-
- const forgotValidation = () => {
- let valid = true;
-
- if (fields.ucentralsecurl.value === '') {
- updateField('ucentralsecurl', { error: true });
- valid = false;
- }
- if (fields.forgotusername.value === '') {
- updateField('forgotusername', { error: true });
- valid = false;
- }
- return valid;
- };
-
- const onKeyDown = (event, action) => {
- if (event.code === 'Enter') {
- action(event);
- }
- };
-
- const getDefaultConfig = async () => {
- let uCentralSecUrl = '';
-
- fetch('./config.json', {
- headers: {
- 'Content-Type': 'application/json',
- Accept: 'application/json',
- },
- })
- .then((response) => response.json())
- .then((json) => {
- const newUcentralSecConfig = {
- value: json.DEFAULT_UCENTRALSEC_URL,
- error: false,
- hidden: !json.ALLOW_UCENTRALSEC_CHANGE,
- placeholder: json.DEFAULT_UCENTRALSEC_URL,
- };
- uCentralSecUrl = newUcentralSecConfig.value;
- setDefaultConfig(newUcentralSecConfig);
- setFormFields({
- ...fields,
- ...{
- ucentralsecurl: newUcentralSecConfig,
- },
- });
- return axiosInstance.post(
- `${newUcentralSecConfig.value}/api/v1/oauth2?requirements=true`,
- {},
- );
- })
- .then((response) => {
- const newPolicies = response.data;
- newPolicies.accessPolicy = `${uCentralSecUrl}${newPolicies.accessPolicy}`;
- newPolicies.passwordPolicy = `${uCentralSecUrl}${newPolicies.passwordPolicy}`;
- setPolicies(newPolicies);
- })
- .catch();
- };
-
- const getGatewayUIUrl = (token, gwUrl) => {
- axiosInstance
- .get(`${gwUrl}/api/v1/system?command=info`, {
- headers: {
- Accept: 'application/json',
- Authorization: `Bearer ${token}`,
- },
- })
- .then((response) => {
- if (response.data.UI) setItem('owgw-ui', response.data.UI);
- })
- .catch(() => {});
- };
-
- const getProvUIUrl = (token, provUrl) => {
- axiosInstance
- .get(`${provUrl}/api/v1/system?command=info`, {
- headers: {
- Accept: 'application/json',
- Authorization: `Bearer ${token}`,
- },
- })
- .then((response) => {
- if (response.data.UI) setItem('owprov-ui', response.data.UI);
- })
- .catch(() => {});
- };
-
- const SignIn = () => {
- setLoginResponse(initialResponseState);
- if (signInValidation()) {
- setLoading(true);
- let token = '';
-
- const parameters = {
- userId: fields.username.value,
- password: fields.password.value,
- };
-
- if (formType === 'change-password') {
- parameters.newPassword = fields.newpassword.value;
- }
-
- axiosInstance
- .post(`${fields.ucentralsecurl.value}/api/v1/oauth2`, parameters)
- .then((response) => {
- // If there's MFA to do
- if (response.data.method && response.data.created) {
- setFormType(`validation-${response.data.method}-${response.data.uuid}`);
- return null;
- }
- if (response.data.userMustChangePassword) {
- setFormType('change-password');
- return null;
- }
- setItem('access_token', response.data.access_token);
- token = response.data.access_token;
- return axiosInstance.get(`${fields.ucentralsecurl.value}/api/v1/systemEndpoints`, {
- headers: {
- Accept: 'application/json',
- Authorization: `Bearer ${response.data.access_token}`,
- },
- });
- })
- .then((response) => {
- if (response) {
- const endpoints = {
- owsec: fields.ucentralsecurl.value,
- };
- for (const endpoint of response.data.endpoints) {
- endpoints[endpoint.type] = endpoint.uri;
- }
- if (endpoints.owgw) getGatewayUIUrl(token, endpoints.owgw);
- if (endpoints.owprov) getProvUIUrl(token, endpoints.owprov);
- setItem('gateway_endpoints', JSON.stringify(endpoints));
- setEndpoints(endpoints);
- setCurrentToken(token);
- }
- })
- .catch((error) => {
- if (formType === 'change-password') {
- if (error.response?.data?.ErrorCode === 3) {
- setChangeResponse({
- text: t('login.previously_used'),
- error: true,
- tried: true,
- });
- } else if (error.response?.data?.ErrorCode === 5) {
- setChangeResponse({
- text: t('common.invalid_password'),
- error: true,
- tried: true,
- });
- } else {
- setChangeResponse({
- text: t('login.change_password_error'),
- error: true,
- tried: true,
- });
- }
- } else if (error.response.status === 403) {
- if (error.response?.data?.ErrorCode === 1) setFormType('change-password');
- else if (error.response?.data?.ErrorCode === 2) {
- setLoginResponse({
- text: t('common.invalid_credentials'),
- error: true,
- tried: true,
- });
- } else {
- setLoginResponse({
- text: t('login.login_error'),
- error: true,
- tried: true,
- });
- }
- } else {
- setLoginResponse({
- text: t('login.login_error'),
- error: true,
- tried: true,
- });
- }
- })
- .finally(() => {
- setLoading(false);
- });
- }
- };
-
- const submitForm = (event) => {
- event.preventDefault();
- setLoginResponse(initialResponseState);
-
- setLoading(true);
- let token = '';
-
- const parameters = {
- userId: event.target?.username?.value,
- password: event.target?.password?.value,
- };
-
- if (formType === 'change-password') {
- parameters.newPassword = fields.newpassword.value;
- }
-
- axiosInstance
- .post(`${fields.ucentralsecurl.value}/api/v1/oauth2`, parameters)
- .then((response) => {
- // If there's MFA to do
- if (response.data.method && response.data.created) {
- setFormType(`validation-${response.data.method}-${response.data.uuid}`);
- return null;
- }
- if (response.data.userMustChangePassword) {
- setFormType('change-password');
- return null;
- }
- setItem('access_token', response.data.access_token);
- token = response.data.access_token;
- return axiosInstance.get(`${fields.ucentralsecurl.value}/api/v1/systemEndpoints`, {
- headers: {
- Accept: 'application/json',
- Authorization: `Bearer ${response.data.access_token}`,
- },
- });
- })
- .then((response) => {
- if (response) {
- const endpoints = {
- owsec: fields.ucentralsecurl.value,
- };
- for (const endpoint of response.data.endpoints) {
- endpoints[endpoint.type] = endpoint.uri;
- }
- if (endpoints.owgw) getGatewayUIUrl(token, endpoints.owgw);
- if (endpoints.owprov) getProvUIUrl(token, endpoints.owprov);
- setItem('gateway_endpoints', JSON.stringify(endpoints));
- setEndpoints(endpoints);
- setCurrentToken(token);
- }
- })
- .catch((error) => {
- if (formType === 'change-password') {
- if (error.response?.data?.ErrorCode === 3) {
- setChangeResponse({
- text: t('login.previously_used'),
- error: true,
- tried: true,
- });
- } else if (error.response?.data?.ErrorCode === 5) {
- setChangeResponse({
- text: t('common.invalid_password'),
- error: true,
- tried: true,
- });
- } else {
- setChangeResponse({
- text: t('login.change_password_error'),
- error: true,
- tried: true,
- });
- }
- } else if (error.response.status === 403) {
- if (error.response?.data?.ErrorCode === 1) setFormType('change-password');
- else if (error.response?.data?.ErrorCode === 2) {
- setLoginResponse({
- text: t('common.invalid_credentials'),
- error: true,
- tried: true,
- });
- } else {
- setLoginResponse({
- text: t('login.login_error'),
- error: true,
- tried: true,
- });
- }
- } else {
- setLoginResponse({
- text: t('login.login_error'),
- error: true,
- tried: true,
- });
- }
- })
- .finally(() => {
- setLoading(false);
- });
- };
-
- const sendForgotPasswordEmail = () => {
- setForgotResponse(initialResponseState);
-
- if (forgotValidation()) {
- setLoading(true);
-
- axiosInstance
- .post(`${fields.ucentralsecurl.value}/api/v1/oauth2?forgotPassword=true`, {
- userId: fields.forgotusername.value,
- })
- .then(() => {
- updateField('forgotusername', {
- value: '',
- });
- setForgotResponse({
- text: t('login.forgot_password_success'),
- error: false,
- tried: true,
- });
- })
- .catch(() => {
- setForgotResponse({
- text: t('login.forgot_password_error'),
- error: true,
- tried: true,
- });
- })
- .finally(() => {
- setLoading(false);
- });
- }
- };
-
- const validateCode = (code) => {
- const options = {
- headers: {
- Accept: 'application/json',
- },
- };
-
- const parameters = {
- uuid: formType.split('-').slice(2).join('-'),
- answer: code,
- };
-
- let token = '';
-
- return axiosInstance
- .post(
- `${fields.ucentralsecurl.value}/api/v1/oauth2?completeMFAChallenge=true`,
- parameters,
- options,
- )
- .then((response) => {
- if (response.data.userMustChangePassword) {
- setFormType('change-password');
- return null;
- }
- setItem('access_token', response.data.access_token);
- token = response.data.access_token;
- return axiosInstance.get(`${fields.ucentralsecurl.value}/api/v1/systemEndpoints`, {
- headers: {
- Accept: 'application/json',
- Authorization: `Bearer ${response.data.access_token}`,
- },
- });
- })
- .then((response) => {
- if (response) {
- const endpoints = {
- owsec: fields.ucentralsecurl.value,
- };
- for (const endpoint of response.data.endpoints) {
- endpoints[endpoint.type] = endpoint.uri;
- }
- if (endpoints.owgw) getGatewayUIUrl(token, endpoints.owgw);
- if (endpoints.owprov) getProvUIUrl(token, endpoints.owprov);
- setItem('gateway_endpoints', JSON.stringify(endpoints));
- setEndpoints(endpoints);
- setCurrentToken(token);
- }
- })
- .catch(() => false)
- .finally(() => {
- setLoading(false);
- return true;
- });
- };
-
- const resendValidationCode = () => {
- const options = {
- headers: {
- Accept: 'application/json',
- },
- };
-
- const parameters = {
- uuid: formType.split('-').slice(2).join('-'),
- };
-
- return axiosInstance
- .post(`${fields.ucentralsecurl.value}/api/v1/oauth2?resendMFACode=true`, parameters, options)
- .then(() => {
- addToast({
- title: t('common.success'),
- body: t('user.new_code_sent'),
- color: 'success',
- autohide: true,
- });
- return true;
- })
- .catch((e) => {
- addToast({
- title: t('common.error'),
- body: t('login.authentication_expired'),
- color: 'danger',
- autohide: true,
- });
- if (e.response?.data?.ErrorCode === 403) setFormType('login');
- return false;
- });
- };
-
- useEffect(() => {
- getDefaultConfig();
- }, []);
return (
-
-
-
-
-
- );
+ return
- {endpointsInfo.map((info) => (
-
-
- ))}
-
+
+
+
+
+
+
+
+
+
+
+ ) : (
+
+
+
+ {t('common.serial_num')}:
+
+
+ {deviceConfig?.serialNumber}
+ {' '}
+
+
+ {t('configuration.device_password')}:
+
+
+ {getPassword()}
+ {' '}
+
+
+ {t('configuration.owner')}:
+
+
+ {deviceConfig?.owner}
+
+
+ {t('common.mac')}:
+
+
+ {deviceConfig?.macAddress}
+
+
+ {t('configuration.type')}:
+
+
+ {deviceConfig?.deviceType}
+
+
+
+ {deviceConfig?.venue?.substring(0, 3) === 'ent'
+ ? t('entity.entity')
+ : t('inventory.venue')}
+ :
+
+
+
+ {deviceConfig?.venue?.substring(0, 3) === 'ent'
+ ? displayExtra(
+ 'entity',
+ deviceConfig?.venue?.slice(4),
+ deviceConfig?.extendedInfo,
+ )
+ : displayExtra(
+ 'venue',
+ deviceConfig?.venue?.slice(4),
+ deviceConfig?.extendedInfo,
+ )}
+
+
+ {t('common.manufacturer')}:
+
+
+ {deviceConfig?.manufacturer}
+
+
+ {t('configuration.created')}:
+
+
+ {prettyDate(deviceConfig?.createdTimestamp)}
+
+
+ {t('configuration.location')}:
+
+
+ {deviceConfig?.location}
+
+
+
+ )}
+
+
+
+ {percentage < 25
+ ? t('status.percentage_free', { percentage: 100 - percentage, total })
+ : ''}
+
+
+
+
+
+
+
+
+
+
+ {deviceSerialNumber}, {deviceConfig?.compatible}
+
+
+
+ ) : (
+
+
+
+ 
{
+ e.target.onerror = null;
+ e.target.src = 'assets/NotFound.png';
+ }}
+ height="auto"
+ width="auto"
+ />
+
+
+
+
+ {t('status.connection_status')}:
+
+
+ {status?.connected ? (
+ {t('common.connected')}
+ ) : (
+ {t('common.not_connected')}
+ )}
+
+
+ {t('status.uptime')}:
+
+
+ {error
+ ? errorField(t)
+ : compactSecondsToDetailed(
+ lastStats?.unit?.uptime,
+ t('common.day'),
+ t('common.days'),
+ t('common.seconds'),
+ )}
+
+
+ {t('status.last_contact')}:
+
+
+ {error ? errorField(t) : prettyDate(status?.lastContact)}
+
+
+ {t('status.localtime')}:
+
+
+ {error ? errorField(t) : prettyDate(lastStats?.unit?.localtime)}
+
+
+ {t('firmware.revision')}:
+
+
+
+
+ {deviceConfig?.firmware?.split(' / ').length > 1
+ ? deviceConfig.firmware.split(' / ')[1]
+ : deviceConfig?.firmware}
+
+
+
+
+
+
+ {t('status.load_averages')}:
+
+
+ {error ? (
+ errorField(t)
+ ) : (
+
+
+ {t('status.memory')}:
+
+
+ {error ? (
+ errorField(t)
+ ) : (
+
+
+
+
+
+ )}
+
+
+ {
+ e.target.onerror = null;
+ e.target.src = 'assets/NotFound.png';
+ }}
+ height="auto"
+ width="auto"
+ />
+
+ {lastStats?.unit?.load[0] !== undefined
+ ? (lastStats?.unit?.load[0] * 100).toFixed(2)
+ : '-'}
+ %{' / '}
+ {lastStats?.unit?.load[1] !== undefined
+ ? (lastStats?.unit?.load[1] * 100).toFixed(2)
+ : '-'}
+ %{' / '}
+ {lastStats?.unit?.load[2] !== undefined
+ ? (lastStats?.unit?.load[2] * 100).toFixed(2)
+ : '-'}
+ %
+
+ )}
+
+
+
+
+
+
+
+
+ );
+};
+
+NotesTab.propTypes = {
+ deviceConfig: PropTypes.instanceOf(Object).isRequired,
+ refresh: PropTypes.func.isRequired,
+};
+
+export default NotesTab;
diff --git a/src/pages/DevicePage/index.js b/src/pages/DevicePage/index.js
index b152b20..f9746f4 100644
--- a/src/pages/DevicePage/index.js
+++ b/src/pages/DevicePage/index.js
@@ -7,10 +7,14 @@ import DeviceLogs from 'components/DeviceLogs';
import DeviceStatisticsCard from 'components/InterfaceStatistics';
import DeviceActionCard from 'components/DeviceActionCard';
import axiosInstance from 'utils/axiosInstance';
-import { DeviceProvider, DeviceStatusCard, DeviceDetails, useAuth, useToast } from 'ucentral-libs';
+import { DeviceProvider, useAuth, useToast } from 'ucentral-libs';
import { useTranslation } from 'react-i18next';
import ConfigurationDisplay from 'components/ConfigurationDisplay';
import WifiAnalysis from 'components/WifiAnalysis';
+import CapabilitiesDisplay from 'components/CapabilitiesDisplay';
+import NotesTab from './NotesTab';
+import DeviceDetails from './Details';
+import DeviceStatusCard from './DeviceStatusCard';
const DevicePage = () => {
const { t } = useTranslation();
@@ -24,6 +28,11 @@ const DevicePage = () => {
const [error, setError] = useState(false);
const [loading, setLoading] = useState(false);
+ const updateNav = (target) => {
+ sessionStorage.setItem('devicePageIndex', target);
+ setIndex(target);
+ };
+
const getDevice = () => {
const options = {
headers: {
@@ -48,13 +57,14 @@ const DevicePage = () => {
);
}
- setDeviceConfig(deviceInfo);
+ setDeviceConfig({ ...deviceInfo });
return null;
})
.then((response) => {
if (response) setDeviceConfig({ ...deviceInfo, extendedInfo: response.data.extendedInfo });
})
.catch((e) => {
+ setDeviceConfig(null);
addToast({
title: t('common.error'),
body: t('device.error_fetching_device', { error: e.response?.data?.ErrorDescription }),
@@ -84,10 +94,13 @@ const DevicePage = () => {
Promise.all([lastStatsRequest, statusRequest])
.then(([newStats, newStatus]) => {
- setLastStats(newStats.data);
- setStatus(newStatus.data);
+ setLastStats({ ...newStats.data });
+ setStatus({ ...newStatus.data });
+ setError(false);
})
.catch(() => {
+ setLastStats(null);
+ setStatus(null);
setError(true);
})
.finally(() => {
@@ -100,6 +113,12 @@ const DevicePage = () => {
getDevice();
};
+ useEffect(() => {
+ const target = sessionStorage.getItem('devicePageIndex');
+
+ if (target !== null) setIndex(parseInt(target, 10));
+ }, []);
+
useEffect(() => {
setError(false);
if (deviceId) {
@@ -125,7 +144,7 @@ const DevicePage = () => {
/>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {t('firmware.show_dev')}
+
+ setSelectedDeviceType(e.target.value)}
+ disabled={loading}
+ >
+ {deviceTypes.map((deviceType) => (
+
+ ))}
+
+
+ {t('firmware.device_type')}
+ {prettyDate(item.imageDate)}
+ {cleanBytesString(item.size)}
+
+ {item.revision ? getShortRevision(item.revision) : 'N/A'}
+
+
+
+
+
+ {item.uri}
+
+
+
+
+
+
+ {t('common.items_per_page')}
+
+ setFirmwarePerPage(e.target.value)}
+ disabled={loading}
+ >
+
+
+
+
+
+
- {t('user.my_profile')}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- a.email > b.email)}
- loading={loading}
- usersPerPage={usersPerPage}
- setUsersPerPage={updateUsersPerPage}
- pageCount={pageCount}
- currentPage={page.selected}
- setPage={setPage}
- deleteUser={deleteUser}
- deleteLoading={deleteLoading}
- toggleCreate={toggleCreateModal}
- toggleEdit={toggleEditModal}
- refreshUsers={getUsers}
- />
-
+