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

Cleanup up DeviceList component

Browse Source
This commit is contained in:
bourquecharles
2021-05-07 17:07:39 -04:00
parent 45df1a29c9
commit 96de4afd30
1 changed files with 37 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
src/components/DeviceList.js
View File

@@ -13,14 +13,12 @@ import {
} from '@coreui/react' } from '@coreui/react'
import ReactPaginate from 'react-paginate'; import ReactPaginate from 'react-paginate';
import Select from 'react-select' import Select from 'react-select'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faInfo } from '@fortawesome/free-solid-svg-icons'
import { getToken } from '../utils/authHelper'; import { getToken } from '../utils/authHelper';
import axiosInstance from '../utils/axiosInstance'; import axiosInstance from '../utils/axiosInstance';
import { cleanTimestamp, cleanBytesString } from '../utils/helper'; import { cleanTimestamp, cleanBytesString } from '../utils/helper';
import iotIcon from '../assets/icons/iot.png' import iotIcon from '../assets/icons/iot.png'
import internetSwitch from '../assets/icons/networkswitch.png'; import internetSwitch from '../assets/icons/networkswitch.png';
import { cilRouter } from '@coreui/icons'; import { cilRouter, cilSync, cilFullscreen } from '@coreui/icons';
import CIcon from '@coreui/icons-react'; import CIcon from '@coreui/icons-react';
const DeviceList = () => { const DeviceList = () => {
@@ -147,26 +145,28 @@ const DeviceList = () => {
const DeviceListDisplay = ({ devices, toggleDetails, details, loading, updateDevicesPerPage, pageCount, updatePage }) => { const DeviceListDisplay = ({ devices, toggleDetails, details, loading, updateDevicesPerPage, pageCount, updatePage }) => {
const columns = [ const columns = [
{ key: 'serialNumber'}, { key: 'deviceType', label: 'Type', filter: false, sorter: false, _style: { width: '1%' },},
{ key: 'UUID', label: 'Config Id'}, { key: 'serialNumber', _style: { width: '1%' }},
{ { key: 'UUID', label: 'Config Id', _style: { width: '1%' }},
key: 'lastConfigurationChange' { key: 'firmware', filter: false, _style: { width: '20%' }, },
,filter: false
,label: 'Configuration Change'
},
{ key: 'firmware', filter: false },
{ key: 'deviceType', filter: false, sorter: false},
{ key: 'connected', _style: { width: '1%' }, sorter: false}, { key: 'connected', _style: { width: '1%' }, sorter: false},
{ key: 'txBytes', filter: false }, { key: 'txBytes', label: 'Tx', filter: false, _style: { width: '7%' } },
{ key: 'rxBytes', filter: false }, { key: 'rxBytes', label: 'Rx', filter: false, _style: { width: '7%' } },
{ key: 'ipAddress'}, { key: 'ipAddress', _style: { width: '20%' }},
{ {
key: 'show_details', key: 'show_details',
label: '', label: '',
_style: { width: '1%' }, _style: { width: '1%' },
sorter: false, sorter: false,
filter: false filter: false
} },
{
key: 'refresh',
label: '',
_style: { width: '1%' },
sorter: false,
filter: false
}
]; ];
const selectOptions = [ const selectOptions = [
@@ -222,12 +222,6 @@ const DeviceListDisplay = ({ devices, toggleDetails, details, loading, updateDev
hover hover
loading = {loading} loading = {loading}
scopedSlots = {{ scopedSlots = {{
'lastConfigurationChange':
(item)=>(
<td>
{cleanTimestamp(item.lastConfigurationChange)}
</td>
),
'deviceType': 'deviceType':
(item)=>( (item)=>(
<td style={{textAlign: 'center'}}> <td style={{textAlign: 'center'}}>
@@ -255,53 +249,45 @@ const DeviceListDisplay = ({ devices, toggleDetails, details, loading, updateDev
'ipAddress': 'ipAddress':
(item)=>( (item)=>(
<td> <td>
{item.ipAddress ?? 'N/A'} {item.ipAddress ?? 'N/A'}
</td> </td>
), ),
'connected': 'connected':
(item)=>( (item)=>(
<td> <td>
<CBadge color={getStatusBadge(item.connected)}> <CBadge color={getStatusBadge(item.connected)}>
{item.connected ? 'Connected' : 'Not connected'} {item.connected ? 'Connected' : 'Not connected'}
</CBadge> </CBadge>
</td>
),
'refresh':
(item)=>(
<td className="py-2">
<CButton color="primary" variant="outline" size="sm">
<CIcon name="cil-sync" content={cilSync} size="l"/>
</CButton>
</td> </td>
), ),
'show_details': 'show_details':
(item, index)=>{ (item, index)=>{
return ( return (
<td className="py-2"> <td className="py-2">
<CButton
color="primary"
variant="outline"
shape="square"
size="sm"
onClick={()=>{toggleDetails(index)}}
>
<FontAwesomeIcon icon={faInfo}/>
</CButton>
</td>
)
},
'details':
(item, index)=>{
return (
<CCollapse show={details.includes(index)}>
<CCardBody>
<h4>
{item.notes}
</h4>
<p className="text-muted">Last configuration change: {item.lastConfigurationChange.replace('T', ' ').replace('Z', '')}</p>
<CLink <CLink
className="c-subheader-nav-link" className="c-subheader-nav-link"
aria-current="page" aria-current="page"
to={() => `/devices/${item.serialNumber}`} to={() => `/devices/${item.serialNumber}`}
> >
<CButton size="sm" color="info"> <CButton
Device Details color="primary"
variant="outline"
shape="square"
size="sm"
onClick={()=>{toggleDetails(index)}}
>
<CIcon name="cil-fullscreen" content={cilFullscreen} size="l"/>
</CButton> </CButton>
</CLink> </CLink>
</CCardBody> </td>
</CCollapse>
) )
} }
}}/> }}/>