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

Color on device type + hover for label

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

21
src/components/DeviceList.js
View File

@@ -9,7 +9,8 @@ import {
CCard, CCard,
CCardHeader, CCardHeader,
CRow, CRow,
CCol CCol,
CPopover
} 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'
@@ -145,11 +146,10 @@ 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: 'deviceType', label: 'Type', filter: false, sorter: false, _style: { width: '1%' },}, { key: 'deviceType', label: '', filter: false, sorter: false, _style: { width: '1%' },},
{ key: 'serialNumber', _style: { width: '1%' }}, { key: 'serialNumber', _style: { width: '1%' }},
{ key: 'UUID', label: 'Config Id', _style: { width: '1%' }}, { key: 'UUID', label: 'Config Id', _style: { width: '1%' }},
{ key: 'firmware', filter: false, _style: { width: '20%' }, }, { key: 'firmware', filter: false, _style: { width: '20%' }, },
{ key: 'connected', _style: { width: '1%' }, sorter: false},
{ key: 'txBytes', label: 'Tx', filter: false, _style: { width: '7%' } }, { key: 'txBytes', label: 'Tx', filter: false, _style: { width: '7%' } },
{ key: 'rxBytes', label: 'Rx', filter: false, _style: { width: '7%' } }, { key: 'rxBytes', label: 'Rx', filter: false, _style: { width: '7%' } },
{ key: 'ipAddress', _style: { width: '20%' }}, { key: 'ipAddress', _style: { width: '20%' }},
@@ -225,7 +225,14 @@ const DeviceListDisplay = ({ devices, toggleDetails, details, loading, updateDev
'deviceType': 'deviceType':
(item)=>( (item)=>(
<td style={{textAlign: 'center'}}> <td style={{textAlign: 'center'}}>
<CPopover
content={ item.connected ? 'Connected' : 'Not Connected' }
placement="top"
>
<CBadge color={getStatusBadge(item.connected)}>
{getDeviceIcon(item.deviceType) ?? item.deviceType} {getDeviceIcon(item.deviceType) ?? item.deviceType}
</CBadge>
</CPopover>
</td> </td>
), ),
'firmware': 'firmware':
@@ -252,14 +259,6 @@ const DeviceListDisplay = ({ devices, toggleDetails, details, loading, updateDev
{item.ipAddress ?? 'N/A'} {item.ipAddress ?? 'N/A'}
</td> </td>
), ),
'connected':
(item)=>(
<td>
<CBadge color={getStatusBadge(item.connected)}>
{item.connected ? 'Connected' : 'Not connected'}
</CBadge>
</td>
),
'refresh': 'refresh':
(item)=>( (item)=>(
<td className="py-2"> <td className="py-2">