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

Merge pull request #129 from stephb9959/dev

Browse Source 
Version 2.5.25
This commit is contained in:
Charles
2022-01-17 22:04:47 +01:00
committed by GitHub
parent dffb45e233 09a10d7838
commit 2418273191
13 changed files with 505 additions and 352 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
package-lock.json generated
View File

@@ -1,12 +1,12 @@
{
"name": "ucentral-client",
"version": "2.5.24",
"version": "2.5.27",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "ucentral-client",
"version": "2.5.24",
"version": "2.5.27",
"dependencies": {
"@coreui/coreui": "^3.4.0",
"@coreui/icons": "^2.0.1",

2
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "ucentral-client",
"version": "2.5.24",
"version": "2.5.27",
"dependencies": {
"@coreui/coreui": "^3.4.0",
"@coreui/icons": "^2.0.1",

3
public/locales/de/translation.json
View File

@@ -804,6 +804,7 @@
"mode": "Modus",
"network_diagram": "Netzwerkdiagramm",
"radios": "Radios",
"title": "WLAN-Analyse"
"title": "WLAN-Analyse",
"vendor": "Verkäufer"
}
}

3
public/locales/en/translation.json
View File

@@ -804,6 +804,7 @@
"mode": "Mode",
"network_diagram": "Network Diagram",
"radios": "Radios",
"title": "Wi-Fi Analysis"
"title": "Wi-Fi Analysis",
"vendor": "Vendor"
}
}

3
public/locales/es/translation.json
View File

@@ -804,6 +804,7 @@
"mode": "Modo",
"network_diagram": "Diagrama de Red",
"radios": "Radios",
"title": "Análisis de Wi-Fi"
"title": "Análisis de Wi-Fi",
"vendor": "Vendedor"
}
}

3
public/locales/fr/translation.json
View File

@@ -804,6 +804,7 @@
"mode": "Mode",
"network_diagram": "Diagramme de réseau",
"radios": "Radios",
"title": "Analyse Wi-Fi"
"title": "Analyse Wi-Fi",
"vendor": "vendeur"
}
}

3
public/locales/pt/translation.json
View File

@@ -804,6 +804,7 @@
"mode": "Modo",
"network_diagram": "Diagrama de rede",
"radios": "Rádios",
"title": "Análise de Wi-Fi"
"title": "Análise de Wi-Fi",
"vendor": "fornecedor"
}
}

306
src/components/CommandHistory/index.js
View File

@@ -2,9 +2,8 @@
import React, { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import {
CWidgetDropdown,
CRow,
CCol,
CCardHeader,
CCardBody,
CButton,
CDataTable,
CCard,
@@ -262,155 +261,162 @@ const DeviceCommands = () => {
return (
<div>
<CWidgetDropdown
className="m-0"
inverse="true"
color="gradient-primary"
header={t('commands.title')}
footerSlot={
<div className="pb-1 px-3">
<CRow className="mb-2">
<CCol>
From:
<DatePicker includeTime onChange={(date) => modifyStart(date)} />
<CFormText color="danger" hidden={!startError}>
{t('common.invalid_date_explanation')}
</CFormText>
</CCol>
<CCol>
To:
<DatePicker includeTime onChange={(date) => modifyEnd(date)} />
<CFormText color="danger" hidden={!endError}>
{t('common.invalid_date_explanation')}
</CFormText>
</CCol>
</CRow>
<CCard>
<div className="overflow-auto" style={{ height: '200px' }}>
<CDataTable
addTableClasses="ignore-overflow table-sm"
border
loading={loading}
items={commands ?? []}
fields={columns}
className="text-white"
sorterValue={{ column: 'created', desc: 'true' }}
scopedSlots={{
command: (item) => <td className="align-middle">{item.command}</td>,
completed: (item) => (
<td className="align-middle">
{item.completed && item.completed !== 0 ? (
<FormattedDate date={item.completed} />
) : (
'Pending'
)}
</td>
),
executed: (item) => (
<td className="align-middle">
{item.executed && item.executed !== 0 ? (
<FormattedDate date={item.executed} />
) : (
'Pending'
)}
</td>
),
submitted: (item) => (
<td className="align-middle">
{item.submitted && item.submitted !== '' ? (
<FormattedDate date={item.submitted} />
) : (
'Pending'
)}
</td>
),
errorCode: (item) => <td className="align-middle">{item.errorCode}</td>,
show_buttons: (item, index) => (
<td className="align-middle">
<CButtonToolbar
role="group"
className="justify-content-flex-end"
style={{ width: '160px' }}
>
<CPopover
content={
item.command === 'trace' ? t('common.download') : t('common.result')
}
>
<CButton
color="primary"
variant="outline"
shape="square"
size="sm"
className="mx-2"
onClick={() => {
toggleDetails(item);
}}
>
{item.command === 'trace' ? (
<CIcon name="cil-cloud-download" content={cilCloudDownload} />
) : (
<CIcon name="cil-calendar-check" content={cilCalendarCheck} />
)}
</CButton>
</CPopover>
<CPopover content={t('common.details')}>
<CButton
color="primary"
variant="outline"
shape="square"
size="sm"
className="mx-2"
onClick={() => {
toggleResponse(item);
}}
>
<CIcon name="cilList" />
</CButton>
</CPopover>
<CPopover content={t('common.delete')}>
<CButton
color="primary"
variant="outline"
shape="square"
size="sm"
className="mx-2"
onClick={() => {
toggleConfirmModal(item.UUID, index);
}}
>
<CIcon name="cilTrash" />
</CButton>
</CPopover>
</CButtonToolbar>
</td>
),
}}
/>
{showLoadingMore && (
<div className="mb-3">
<LoadingButton
label={t('common.view_more')}
isLoadingLabel={t('common.loading_more_ellipsis')}
isLoading={loadingMore}
action={showMoreCommands}
variant="outline"
/>
</div>
)}
</div>
</CCard>
<CCard className="m-0">
<CCardHeader className="dark-header">
<div className="d-flex flex-row-reverse align-items-center">
<div className="pl-2">
<CPopover content={t('common.refresh')}>
<CButton
size="sm"
color="info"
onClick={getCommands}
disabled={startError || endError}
>
<CIcon content={cilSync} />
</CButton>
</CPopover>
</div>
<div className="pl-2">
<DatePicker
includeTime
onChange={(date) => modifyEnd(date)}
value={end ? new Date(end) : undefined}
/>
<CFormText color="danger" hidden={!endError}>
{t('common.invalid_date_explanation')}
</CFormText>
</div>
To:
<div className="pl-2">
<DatePicker
includeTime
onChange={(date) => modifyStart(date)}
value={start ? new Date(start) : undefined}
/>
<CFormText color="danger" hidden={!startError}>
{t('common.invalid_date_explanation')}
</CFormText>
</div>
From:
</div>
}
>
<div className="text-right float-right">
<CButton onClick={refreshCommands} size="sm">
<CIcon name="cil-sync" content={cilSync} className="text-white" size="2xl" />
</CButton>
</div>
</CWidgetDropdown>
</CCardHeader>
<CCardBody className="p-1">
<div className="overflow-auto" style={{ height: 'calc(100vh - 620px)' }}>
<CDataTable
addTableClasses="ignore-overflow table-sm"
border
loading={loading}
items={commands ?? []}
fields={columns}
className="text-white"
sorterValue={{ column: 'created', desc: 'true' }}
scopedSlots={{
command: (item) => <td className="align-middle">{item.command}</td>,
completed: (item) => (
<td className="align-middle">
{item.completed && item.completed !== 0 ? (
<FormattedDate date={item.completed} />
) : (
'Pending'
)}
</td>
),
executed: (item) => (
<td className="align-middle">
{item.executed && item.executed !== 0 ? (
<FormattedDate date={item.executed} />
) : (
'Pending'
)}
</td>
),
submitted: (item) => (
<td className="align-middle">
{item.submitted && item.submitted !== '' ? (
<FormattedDate date={item.submitted} />
) : (
'Pending'
)}
</td>
),
errorCode: (item) => <td className="align-middle">{item.errorCode}</td>,
show_buttons: (item, index) => (
<td className="align-middle">
<CButtonToolbar
role="group"
className="justify-content-flex-end"
style={{ width: '160px' }}
>
<CPopover
content={
item.command === 'trace' ? t('common.download') : t('common.result')
}
>
<CButton
color="primary"
variant="outline"
shape="square"
size="sm"
className="mx-2"
onClick={() => {
toggleDetails(item);
}}
>
{item.command === 'trace' ? (
<CIcon name="cil-cloud-download" content={cilCloudDownload} />
) : (
<CIcon name="cil-calendar-check" content={cilCalendarCheck} />
)}
</CButton>
</CPopover>
<CPopover content={t('common.details')}>
<CButton
color="primary"
variant="outline"
shape="square"
size="sm"
className="mx-2"
onClick={() => {
toggleResponse(item);
}}
>
<CIcon name="cilList" />
</CButton>
</CPopover>
<CPopover content={t('common.delete')}>
<CButton
color="primary"
variant="outline"
shape="square"
size="sm"
className="mx-2"
onClick={() => {
toggleConfirmModal(item.UUID, index);
}}
>
<CIcon name="cilTrash" />
</CButton>
</CPopover>
</CButtonToolbar>
</td>
),
}}
/>
{showLoadingMore && (
<div className="mb-3">
<LoadingButton
label={t('common.view_more')}
isLoadingLabel={t('common.loading_more_ellipsis')}
isLoading={loadingMore}
action={showMoreCommands}
variant="outline"
/>
</div>
)}
</div>
</CCardBody>
</CCard>
<WifiScanResultModalWidget
show={showScanModal}
toggle={toggleScanModal}

11
src/components/ConfigureModal/index.js
View File

@@ -20,7 +20,7 @@ import React, { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import PropTypes from 'prop-types';
import 'react-widgets/styles.css';
import { useAuth, useDevice } from 'ucentral-libs';
import { useAuth, useDevice, useToast } from 'ucentral-libs';
import { checkIfJson } from 'utils/helper';
import axiosInstance from 'utils/axiosInstance';
import eventBus from 'utils/eventBus';
@@ -29,6 +29,7 @@ import SuccessfulActionModalBody from 'components/SuccessfulActionModalBody';
const ConfigureModal = ({ show, toggleModal }) => {
const { t } = useTranslation();
const { currentToken, endpoints } = useAuth();
const { addToast } = useToast();
const { deviceSerialNumber } = useDevice();
const [hadSuccess, setHadSuccess] = useState(false);
const [hadFailure, setHadFailure] = useState(false);
@@ -91,7 +92,13 @@ const ConfigureModal = ({ show, toggleModal }) => {
{ headers },
)
.then(() => {
setHadSuccess(true);
addToast({
title: t('common.success'),
body: t('commands.command_success'),
color: 'success',
autohide: true,
});
toggleModal();
})
.catch(() => {
setResponseBody('Error while submitting command!');

200
src/components/DeviceHealth/index.js
View File

@@ -1,17 +1,17 @@
/* eslint-disable-rule prefer-destructuring */
import React, { useState, useEffect } from 'react';
import {
CWidgetDropdown,
CCardBody,
CButton,
CDataTable,
CCard,
CRow,
CCol,
CProgress,
CCardHeader,
CPopover,
CCard,
CFormText,
CBadge,
} from '@coreui/react';
import CIcon from '@coreui/icons-react';
import { cilTrash } from '@coreui/icons';
import { cilSync, cilTrash } from '@coreui/icons';
import { useTranslation } from 'react-i18next';
import DatePicker from 'react-widgets/DatePicker';
import { dateToUnix } from 'utils/helper';
@@ -27,7 +27,9 @@ const DeviceHealth = () => {
const [loading, setLoading] = useState(false);
const [healthChecks, setHealthChecks] = useState([]);
const [start, setStart] = useState('');
const [startError, setStartError] = useState(false);
const [end, setEnd] = useState('');
const [endError, setEndError] = useState(false);
const [logLimit, setLogLimit] = useState(25);
const [loadingMore, setLoadingMore] = useState(false);
const [showLoadingMore, setShowLoadingMore] = useState(true);
@@ -40,13 +42,26 @@ const DeviceHealth = () => {
};
const modifyStart = (value) => {
setStart(value);
try {
new Date(value).toISOString();
setStartError(false);
setStart(value);
} catch (e) {
setStart('');
setStartError(true);
}
};
const modifyEnd = (value) => {
setEnd(value);
try {
new Date(value).toISOString();
setEndError(false);
setEnd(value);
} catch (e) {
setEnd('');
setEndError(true);
}
};
const showMoreLogs = () => {
setLogLimit(logLimit + 50);
};
@@ -128,14 +143,14 @@ const DeviceHealth = () => {
const tempSanityLevel = sortedHealthchecks[healthChecks.length - 1].sanity;
setSanityLevel(tempSanityLevel);
if (tempSanityLevel === 100) {
setBarColor('gradient-success');
setBarColor('success');
} else if (tempSanityLevel >= 90) {
setBarColor('gradient-warning');
setBarColor('warning');
} else {
setBarColor('gradient-danger');
setBarColor('danger');
}
} else {
setBarColor('gradient-dark');
setBarColor('dark');
}
}, [healthChecks]);
@@ -156,83 +171,104 @@ const DeviceHealth = () => {
}, []);
return (
<CWidgetDropdown
className="m-0"
header={t('health.title')}
text={sanityLevel ? `${sanityLevel}%` : t('common.unknown')}
value={sanityLevel ?? 100}
color={barColor}
inverse="true"
footerSlot={
<div className="pb-1 px-3">
<CProgress className="mb-3" color="white" value={sanityLevel ?? 0} />
<CRow className="mb-3">
<CCol>
{t('common.from')}
:
<DatePicker includeTime onChange={(date) => modifyStart(date)} />
</CCol>
<CCol>
{t('common.to')}
:
<DatePicker includeTime onChange={(date) => modifyEnd(date)} />
</CCol>
</CRow>
<CCard className="p-0">
<div className="overflow-auto" style={{ height: '200px' }}>
<CDataTable
addTableClasses="ignore-overflow table-sm"
border
items={healthChecks ?? []}
fields={columns}
className="text-white"
loading={loading}
sorterValue={{ column: 'recorded', desc: 'true' }}
scopedSlots={{
UUID: (item) => <td className="align-middle">{item.UUID}</td>,
recorded: (item) => (
<td className="align-middle">
<FormattedDate date={item.recorded} />
</td>
),
sanity: (item) => <td className="align-middle">{`${item.sanity}%`}</td>,
checkDetails: (item) => (
<td>
<pre className="my-0">{JSON.stringify(item.values)}</pre>
</td>
),
}}
<CCard className="m-0">
<CCardHeader className="dark-header">
<div className="float-left align-middle pt-1">
<h4>
<CBadge color={barColor} className="my-0">
{sanityLevel ? `${sanityLevel}%` : `${t('common.unknown')} Sanity Level`}
</CBadge>
</h4>
</div>
<div className="d-flex flex-row-reverse align-items-center">
<div className="pl-2">
<CPopover content={t('common.refresh')}>
<CButton
size="sm"
color="info"
onClick={getDeviceHealth}
disabled={startError || endError}
>
<CIcon content={cilSync} />
</CButton>
</CPopover>
</div>
<div className="pl-2">
<DatePicker
includeTime
onChange={(date) => modifyEnd(date)}
value={end ? new Date(end) : undefined}
/>
<CFormText color="danger" hidden={!endError}>
{t('common.invalid_date_explanation')}
</CFormText>
</div>
To:
<div className="pl-2">
<DatePicker
includeTime
onChange={(date) => modifyStart(date)}
value={start ? new Date(start) : undefined}
/>
<CFormText color="danger" hidden={!startError}>
{t('common.invalid_date_explanation')}
</CFormText>
</div>
From:
<div className="px-2">
<CPopover content={t('common.delete')}>
<CButton onClick={toggleDeleteModal} size="sm" color="danger">
<CIcon name="cil-trash" content={cilTrash} />
</CButton>
</CPopover>
</div>
</div>
</CCardHeader>
<CCardBody className="p-1">
<div className="overflow-auto" style={{ height: 'calc(100vh - 620px)' }}>
<CDataTable
addTableClasses="ignore-overflow table-sm"
border
items={healthChecks ?? []}
fields={columns}
className="text-white"
loading={loading}
sorterValue={{ column: 'recorded', desc: 'true' }}
scopedSlots={{
UUID: (item) => <td className="align-middle">{item.UUID}</td>,
recorded: (item) => (
<td className="align-middle">
<FormattedDate date={item.recorded} />
</td>
),
sanity: (item) => <td className="align-middle">{`${item.sanity}%`}</td>,
checkDetails: (item) => (
<td>
<pre className="my-0">{JSON.stringify(item.values)}</pre>
</td>
),
}}
/>
{showLoadingMore && (
<div className="mb-3">
<LoadingButton
label={t('common.view_more')}
isLoadingLabel={t('common.loading_more_ellipsis')}
isLoading={loadingMore}
action={showMoreLogs}
variant="outline"
/>
{showLoadingMore && (
<div className="mb-3">
<LoadingButton
label={t('common.view_more')}
isLoadingLabel={t('common.loading_more_ellipsis')}
isLoading={loadingMore}
action={showMoreLogs}
variant="outline"
/>
</div>
)}
</div>
</CCard>
)}
<DeleteLogModal
serialNumber={deviceSerialNumber}
object="healthchecks"
object="logs"
show={showDeleteModal}
toggle={toggleDeleteModal}
/>
</div>
}
>
<div className="text-right float-right">
<CPopover content={t('common.delete')}>
<CButton onClick={toggleDeleteModal} size="sm">
<CIcon name="cil-trash" content={cilTrash} className="text-white" size="2xl" />
</CButton>
</CPopover>
</div>
</CWidgetDropdown>
</CCardBody>
</CCard>
);
};

211
src/components/DeviceLogs/index.js
View File

@@ -1,18 +1,17 @@
/* eslint-disable-rule prefer-destructuring */
import React, { useState, useEffect } from 'react';
import {
CWidgetDropdown,
CRow,
CCol,
CCardHeader,
CCardBody,
CCollapse,
CButton,
CDataTable,
CCard,
CCardBody,
CPopover,
CFormText,
} from '@coreui/react';
import CIcon from '@coreui/icons-react';
import { cilTrash } from '@coreui/icons';
import { cilSync, cilTrash } from '@coreui/icons';
import { useTranslation } from 'react-i18next';
import DatePicker from 'react-widgets/DatePicker';
import { dateToUnix } from 'utils/helper';
@@ -29,7 +28,9 @@ const DeviceLogs = () => {
const [loading, setLoading] = useState(false);
const [logs, setLogs] = useState([]);
const [start, setStart] = useState('');
const [startError, setStartError] = useState(false);
const [end, setEnd] = useState('');
const [endError, setEndError] = useState(false);
const [logLimit, setLogLimit] = useState(25);
const [loadingMore, setLoadingMore] = useState(false);
const [showLoadingMore, setShowLoadingMore] = useState(true);
@@ -40,11 +41,25 @@ const DeviceLogs = () => {
};
const modifyStart = (value) => {
setStart(value);
try {
new Date(value).toISOString();
setStartError(false);
setStart(value);
} catch (e) {
setStart('');
setStartError(true);
}
};
const modifyEnd = (value) => {
setEnd(value);
try {
new Date(value).toISOString();
setEndError(false);
setEnd(value);
} catch (e) {
setEnd('');
setEndError(true);
}
};
const showMoreLogs = () => {
@@ -167,91 +182,105 @@ const DeviceLogs = () => {
return (
<div>
<CWidgetDropdown
className="m-0"
inverse="true"
color="gradient-info"
header={t('device_logs.title')}
footerSlot={
<div className="pb-1 px-3">
<CRow className="mb-3">
<CCol>
{t('common.from')}
<DatePicker includeTime onChange={(date) => modifyStart(date)} />
</CCol>
<CCol>
{t('common.to')}
<DatePicker includeTime onChange={(date) => modifyEnd(date)} />
</CCol>
</CRow>
<CCard>
<div className="overflow-auto" style={{ height: '250px' }}>
<CDataTable
addTableClasses="ignore-overflow table-sm"
border
items={logs ?? []}
fields={columns}
loading={loading}
className="text-white"
sorterValue={{ column: 'recorded', desc: 'true' }}
scopedSlots={{
recorded: (item) => (
<td className="align-middle">
<FormattedDate date={item.recorded} />
</td>
),
UUID: (item) => <td className="align-middle">{item.UUID}</td>,
severity: (item) => <td className="align-middle">{item.severity}</td>,
log: (item) => <td className="align-middle">{item.log}</td>,
show_details: (item, index) => (
<td className="align-middle">
<CButton
color="primary"
variant={details.includes(index) ? '' : 'outline'}
shape="square"
size="sm"
onClick={() => {
toggleDetails(index);
}}
>
<CIcon name="cilList" />
</CButton>
</td>
),
details: (item, index) => (
<CCollapse show={details.includes(index)}>
<CCardBody>
<h5>{t('common.details')}</h5>
<div>{getDetails(index, item)}</div>
</CCardBody>
</CCollapse>
),
}}
/>
{showLoadingMore && (
<div className="mb-3">
<LoadingButton
label={t('common.view_more')}
isLoadingLabel={t('common.loading_more_ellipsis')}
isLoading={loadingMore}
action={showMoreLogs}
variant="outline"
/>
</div>
)}
</div>
</CCard>
<CCard className="m-0">
<CCardHeader className="dark-header">
<div className="d-flex flex-row-reverse align-items-center">
<div className="pl-2">
<CPopover content={t('common.refresh')}>
<CButton size="sm" color="info" onClick={getLogs} disabled={startError || endError}>
<CIcon content={cilSync} />
</CButton>
</CPopover>
</div>
<div className="pl-2">
<DatePicker
includeTime
onChange={(date) => modifyEnd(date)}
value={end ? new Date(end) : undefined}
/>
<CFormText color="danger" hidden={!endError}>
{t('common.invalid_date_explanation')}
</CFormText>
</div>
To:
<div className="pl-2">
<DatePicker
includeTime
onChange={(date) => modifyStart(date)}
value={start ? new Date(start) : undefined}
/>
<CFormText color="danger" hidden={!startError}>
{t('common.invalid_date_explanation')}
</CFormText>
</div>
From:
<div className="px-2">
<CPopover content={t('common.delete')}>
<CButton onClick={toggleDeleteModal} size="sm" color="danger">
<CIcon name="cil-trash" content={cilTrash} />
</CButton>
</CPopover>
</div>
</div>
}
>
<div className="text-right float-right">
<CPopover content={t('common.delete')}>
<CButton onClick={toggleDeleteModal} size="sm">
<CIcon name="cil-trash" content={cilTrash} className="text-white" size="2xl" />
</CButton>
</CPopover>
</div>
</CWidgetDropdown>
</CCardHeader>
<CCardBody className="p-1">
<div className="overflow-auto" style={{ height: 'calc(100vh - 620px)' }}>
<CDataTable
addTableClasses="ignore-overflow table-sm"
border
items={logs ?? []}
fields={columns}
loading={loading}
className="text-white"
sorterValue={{ column: 'recorded', desc: 'true' }}
scopedSlots={{
recorded: (item) => (
<td className="align-middle">
<FormattedDate date={item.recorded} />
</td>
),
UUID: (item) => <td className="align-middle">{item.UUID}</td>,
severity: (item) => <td className="align-middle">{item.severity}</td>,
log: (item) => <td className="align-middle">{item.log}</td>,
show_details: (item, index) => (
<td className="align-middle">
<CButton
color="primary"
variant={details.includes(index) ? '' : 'outline'}
shape="square"
size="sm"
onClick={() => {
toggleDetails(index);
}}
>
<CIcon name="cilList" />
</CButton>
</td>
),
details: (item, index) => (
<CCollapse show={details.includes(index)}>
<CCardBody>
<h5>{t('common.details')}</h5>
<div>{getDetails(index, item)}</div>
</CCardBody>
</CCollapse>
),
}}
/>
{showLoadingMore && (
<div className="mb-3">
<LoadingButton
label={t('common.view_more')}
isLoadingLabel={t('common.loading_more_ellipsis')}
isLoading={loadingMore}
action={showMoreLogs}
variant="outline"
/>
</div>
)}
</div>
</CCardBody>
</CCard>
<DeleteLogModal
serialNumber={deviceSerialNumber}
object="logs"

49
src/components/WifiAnalysis/WifiAnalysis.js
View File

@@ -22,10 +22,11 @@ const WifiAnalysisTable = ({ t, data, loading }) => {
setShow(!show);
};
const columns = [
{ key: 'radio', label: '#', _style: { width: '5%' } },
{ key: 'bssid', label: 'BSSID', _style: { width: '14%' } },
{ key: 'mode', label: t('wifi_analysis.mode'), _style: { width: '9%' }, sorter: false },
{ key: 'ssid', label: 'SSID', _style: { width: '17%' } },
{ key: 'radio', label: '#', _style: { width: '1%' } },
{ key: 'bssid', label: 'BSSID', _style: { width: '1%' } },
{ key: 'vendor', label: t('wifi_analysis.vendor'), _style: { width: '15%' }, sorter: false },
{ key: 'mode', label: t('wifi_analysis.mode'), _style: { width: '1%' }, sorter: false },
{ key: 'ssid', label: 'SSID', _style: { width: '15%' } },
{ key: 'rssi', label: 'RSSI', _style: { width: '5%' }, sorter: false },
{ key: 'rxRate', label: 'Rx Rate', _style: { width: '7%' }, sorter: false },
{ key: 'rxBytes', label: 'Rx', _style: { width: '7%' }, sorter: false },
@@ -33,26 +34,39 @@ const WifiAnalysisTable = ({ t, data, loading }) => {
{ key: 'rxNss', label: 'Rx NSS', _style: { width: '6%' }, sorter: false },
{ key: 'txRate', label: 'Tx Rate', _style: { width: '7%' }, sorter: false },
{ key: 'txBytes', label: 'Tx', _style: { width: '7%' }, sorter: false },
{ key: 'ips', label: 'IP', _style: { width: '6%' }, sorter: false },
{ key: 'ips', label: 'IP', _style: { width: '1%' }, sorter: false },
];
const centerIfEmpty = (value) => (
<td className={!value || value === '' || value === '-' ? 'text-center' : ''}>{value}</td>
<td
className={
!value || value === '' || value === '-'
? 'text-center align-middle'
: 'text-right align-middle'
}
>
{value}
</td>
);
const displayIp = (ssid, v4, v6) => {
const count = v4.length + v6.length;
return (
<td className="ignore-overflow text-center">
<td className="ignore-overflow text-center align-middle">
{count > 0 ? (
<CPopover content="View">
<CButton color="primary" size="sm" onClick={() => toggle(ssid, v4, v6)}>
<CButton
color="primary"
size="sm"
onClick={() => toggle(ssid, v4, v6)}
className="py-1"
>
{count}
</CButton>
</CPopover>
) : (
<p>{count}</p>
count
)}
</td>
);
@@ -70,8 +84,23 @@ const WifiAnalysisTable = ({ t, data, loading }) => {
sorter
sorterValue={{ column: 'radio', asc: true }}
scopedSlots={{
radio: (item) => <td className="text-center">{item.radio.radio}</td>,
bssid: (item) => (
<td
className="text-center align-middle"
style={{ fontFamily: 'monospace', fontSize: '0.96rem' }}
>
{item.bssid}
</td>
),
radio: (item) => <td className="text-center align-middle">{item.radio.radio}</td>,
ssid: (item) => <td className="align-middle">{item.ssid}</td>,
mode: (item) => <td className="align-middle">{item.mode}</td>,
vendor: (item) => <td className="align-middle">{item.vendor}</td>,
rxMcs: (item) => centerIfEmpty(item.rxMcs),
rxRate: (item) => centerIfEmpty(item.rxRate),
rxBytes: (item) => centerIfEmpty(item.rxBytes),
txRate: (item) => centerIfEmpty(item.txRate),
txBytes: (item) => centerIfEmpty(item.txBytes),
rxNss: (item) => centerIfEmpty(item.rxNss),
rssi: (item) => centerIfEmpty(item.rssi),
ips: (item) => displayIp(item.ssid, item.ipV4, item.ipV6),

59
src/components/WifiAnalysis/index.js
View File

@@ -19,7 +19,7 @@ import {
CPopover,
} from '@coreui/react';
import CIcon from '@coreui/icons-react';
import { cilX } from '@coreui/icons';
import { cilSync, cilX } from '@coreui/icons';
import RadioAnalysisTable from './RadioAnalysis';
import WifiAnalysisTable from './WifiAnalysis';
@@ -67,9 +67,33 @@ const WifiAnalysis = () => {
return ips;
};
const parseAssociationStats = (json) => {
const getVendors = async (bssids) => {
setLoading(true);
setRange(19);
const options = {
headers: {
Accept: 'application/json',
Authorization: `Bearer ${currentToken}`,
},
};
return axiosInstance
.get(`${endpoints.owgw}/api/v1/ouis?macList=${bssids.join(',')}`, options)
.then((response) => {
const newObj = bssids;
for (const tag of response.data.tagList) {
newObj[tag.tag] = tag.value === '' ? '-' : tag.value;
}
return newObj;
})
.catch(() => ({}));
};
const parseAssociationStats = async (json) => {
const newParsedAssociationStats = [];
const newParsedRadioStats = [];
const bssidObj = {};
for (const stat of json.data) {
const associations = [];
@@ -123,6 +147,8 @@ const WifiAnalysis = () => {
if ('associations' in ssid) {
for (const association of ssid.associations) {
bssidObj[association.bssid] = 0;
const data = {
radio: radioInfo,
...extractIp(stat.data, association.bssid),
@@ -149,6 +175,16 @@ const WifiAnalysis = () => {
newParsedAssociationStats.push(associations);
}
// Adding Vendor info to associations
const vendors = await getVendors(Object.keys(bssidObj));
for (let i = 0; i < newParsedAssociationStats.length; i += 1) {
for (let y = 0; y < newParsedAssociationStats[i].length; y += 1) {
newParsedAssociationStats[i][y].vendor =
vendors[newParsedAssociationStats[i][y].bssid] ?? '-';
}
}
// Radio Stats
const ascOrderedRadioStats = newParsedRadioStats.reverse();
setParsedRadioStats(ascOrderedRadioStats);
@@ -203,14 +239,19 @@ const WifiAnalysis = () => {
return (
<div>
<CCard>
<CCardHeader className="dark-header">
<CRow>
<CCol className="text-right">
<CButton color="info" size="sm" onClick={toggleModal}>
{t('wifi_analysis.network_diagram')}
<CCardHeader className="dark-header d-flex flex-row-reverse align-items-center">
<div className="pl-2">
<CPopover content={t('common.refresh')}>
<CButton size="sm" color="info" onClick={getLatestAssociationStats}>
<CIcon content={cilSync} />
</CButton>
</CCol>
</CRow>
</CPopover>
</div>
<div>
<CButton color="info" size="sm" onClick={toggleModal}>
{t('wifi_analysis.network_diagram')}
</CButton>
</div>
</CCardHeader>
<CCardBody>
<CRow className="mb-4">