mirror of
https://github.com/optim-enterprises-bv/OptimCloud-gw-ui.git
synced 2025-11-01 10:47:45 +00:00
Added blink/reboot actions with badge for response
This commit is contained in:
bourquecharles
@@ -1,93 +1,186 @@
|
|||||||
import React, { useState } from 'react'
|
import React, { useState } from 'react'
|
||||||
import {
|
import {
|
||||||
CButton,
|
CButton,
|
||||||
CCard,
|
CCard,
|
||||||
CCardHeader,
|
CCardHeader,
|
||||||
CCardBody,
|
CCardBody,
|
||||||
CRow,
|
CRow,
|
||||||
CCol,
|
CCol,
|
||||||
CModal,
|
CModal,
|
||||||
CModalHeader,
|
CModalHeader,
|
||||||
CModalTitle,
|
CModalTitle,
|
||||||
CModalBody,
|
CModalBody,
|
||||||
CModalFooter,
|
CModalFooter,
|
||||||
CForm,
|
CForm,
|
||||||
CInput,
|
CInput,
|
||||||
CInvalidFeedback
|
CInvalidFeedback,
|
||||||
} from '@coreui/react'
|
CSpinner,
|
||||||
|
CBadge
|
||||||
|
} from '@coreui/react'
|
||||||
import { useSelector } from 'react-redux';
|
import { useSelector } from 'react-redux';
|
||||||
|
import axiosInstance from '../utils/axiosInstance';
|
||||||
|
import { getToken } from '../utils/authHelper';
|
||||||
|
|
||||||
const DeviceActions = () => {
|
const DeviceActions = () => {
|
||||||
const [showModal, setShowModal] = useState(false);
|
const [showModal, setShowModal] = useState(false);
|
||||||
const [firmwareUri, setFirmwareUri] = useState('');
|
const [firmwareUri, setFirmwareUri] = useState('');
|
||||||
const [validField, setValidField] = useState(true);
|
const [validField, setValidField] = useState(true);
|
||||||
|
const [rebootIsLoading, setRebootLoading] = useState(false);
|
||||||
|
const [hadRebootSuccess, setRebootSuccess] = useState(false);
|
||||||
|
const [hadRebootFailure, setRebootFailure] = useState(false);
|
||||||
|
const [blinkIsLoading, setBlinkLoading] = useState(false);
|
||||||
|
const [hadBlinkSuccess, setBlinkSuccess] = useState(false);
|
||||||
|
const [hadBlinkFailure, setBlinkFailure] = useState(false);
|
||||||
|
|
||||||
let selectedDevice = useSelector(state => state.selectedDevice);
|
let selectedDevice = useSelector(state => state.selectedDevice);
|
||||||
|
|
||||||
const toggleModal = (e) => {
|
const toggleModal = (e) => {
|
||||||
setShowModal(!showModal);
|
setShowModal(!showModal);
|
||||||
//e.preventDefault();
|
}
|
||||||
}
|
|
||||||
|
|
||||||
const formChange = (fieldValue) => {
|
const formChange = (fieldValue) => {
|
||||||
if(!validField){
|
if(!validField){
|
||||||
setValidField(true);
|
setValidField(true);
|
||||||
}
|
}
|
||||||
setFirmwareUri(fieldValue);
|
setFirmwareUri(fieldValue);
|
||||||
}
|
}
|
||||||
|
|
||||||
const formValidation = () => {
|
const formValidation = () => {
|
||||||
if (firmwareUri.trim() === ''){
|
if (firmwareUri.trim() === ''){
|
||||||
setValidField(false);
|
setValidField(false);
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
return true;
|
return true;
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
const reboot = () => {
|
||||||
<CCard>
|
setRebootSuccess(false);
|
||||||
<CCardHeader>
|
setRebootFailure(false);
|
||||||
Device Actions
|
setRebootLoading(true);
|
||||||
</CCardHeader>
|
const token = getToken();
|
||||||
<CCardBody>
|
|
||||||
<CRow>
|
const headers = {
|
||||||
<CCol>
|
'Accept': 'application/json',
|
||||||
<CButton block color="primary">Reboot</CButton>
|
'Authorization': `Bearer ${token}`,
|
||||||
</CCol>
|
'serialNumber': selectedDevice.serialNumber
|
||||||
<CCol>
|
};
|
||||||
<CButton block color="primary">Blink</CButton>
|
|
||||||
</CCol>
|
axiosInstance.post(`/device/${selectedDevice.serialNumber}/reboot`, {
|
||||||
</CRow>
|
serialNumber : selectedDevice.serialNumber
|
||||||
<CRow style={{marginTop :'10px'}}>
|
},{ headers: headers})
|
||||||
<CCol>
|
.then((response) => {
|
||||||
<CButton onClick = { toggleModal } block color="primary">Firmware Upgrade</CButton>
|
setRebootSuccess(true);
|
||||||
</CCol>
|
})
|
||||||
</CRow>
|
.catch(error => {
|
||||||
</CCardBody>
|
setRebootFailure(true);
|
||||||
<CModal
|
console.log(error);
|
||||||
show={showModal}
|
console.log(error.response);
|
||||||
onClose={toggleModal}
|
})
|
||||||
>
|
.finally (() => {
|
||||||
<CModalHeader closeButton>
|
setRebootLoading(false);
|
||||||
<CModalTitle>Firmware Upgrade</CModalTitle>
|
});
|
||||||
</CModalHeader>
|
}
|
||||||
<CModalBody>
|
|
||||||
<p>Insert the link of the firmware version you would like to upgrade the device to.</p>
|
const blink = () => {
|
||||||
<CForm action="" method="post" encType="multipart/form-data" className="form-horizontal">
|
setBlinkSuccess(false);
|
||||||
<CInput className={'form-control', {'is-invalid' : !validField}} type="text" id="uri" name="uri-input" placeholder="https://somelocation.com/file=newversion.bin" autoComplete="firmware-uri" onChange={event => formChange(event.target.value)}/>
|
setBlinkFailure(false);
|
||||||
<CInvalidFeedback>You need a url...</CInvalidFeedback>
|
setBlinkLoading(true);
|
||||||
</CForm>
|
const token = getToken();
|
||||||
</CModalBody>
|
|
||||||
<CModalFooter>
|
const headers = {
|
||||||
<CButton color="primary" onClick={event => formValidation()}>Upgrade</CButton>
|
'Accept': 'application/json',
|
||||||
<CButton
|
'Authorization': `Bearer ${token}`,
|
||||||
color="secondary"
|
'serialNumber': selectedDevice.serialNumber
|
||||||
onClick={toggleModal}
|
};
|
||||||
>Cancel</CButton>
|
|
||||||
</CModalFooter>
|
axiosInstance.post(`/device/${selectedDevice.serialNumber}/blink`, {
|
||||||
</CModal>
|
serialNumber : selectedDevice.serialNumber
|
||||||
</CCard>
|
},{ headers: headers})
|
||||||
);
|
.then((response) => {
|
||||||
|
setBlinkSuccess(true);
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
setBlinkFailure(true);
|
||||||
|
console.log(error);
|
||||||
|
console.log(error.response);
|
||||||
|
})
|
||||||
|
.finally (() => {
|
||||||
|
setBlinkLoading(false);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<CCard>
|
||||||
|
<CCardHeader>
|
||||||
|
Device Actions
|
||||||
|
</CCardHeader>
|
||||||
|
<CCardBody>
|
||||||
|
<CRow>
|
||||||
|
<CCol>
|
||||||
|
<CButton block disabled={ rebootIsLoading } color="primary" onClick={ reboot }>
|
||||||
|
{ rebootIsLoading ? 'Loading...' : 'Reboot'} {' '}
|
||||||
|
<CSpinner hidden={ !rebootIsLoading } component="span" size="sm"/>
|
||||||
|
<CBadge hidden = { (rebootIsLoading || !hadRebootSuccess) } color="success" shape="rounded-pill">
|
||||||
|
Success
|
||||||
|
</CBadge>
|
||||||
|
<CBadge hidden = { (rebootIsLoading || !hadRebootFailure) }color="danger" shape="rounded-pill">
|
||||||
|
Request Failed
|
||||||
|
</CBadge>
|
||||||
|
</CButton>
|
||||||
|
</CCol>
|
||||||
|
<CCol>
|
||||||
|
<CButton block disabled={ blinkIsLoading } color="primary" onClick={ blink }>
|
||||||
|
{ blinkIsLoading ? 'Loading...' : 'Blink'} {' '}
|
||||||
|
<CSpinner hidden={ !blinkIsLoading } component="span" size="sm"/>
|
||||||
|
<CBadge hidden = { (blinkIsLoading || !hadBlinkSuccess) } color="success" shape="rounded-pill">
|
||||||
|
Success
|
||||||
|
</CBadge>
|
||||||
|
<CBadge hidden = { (blinkIsLoading || !hadBlinkFailure) }color="danger" shape="rounded-pill">
|
||||||
|
Request Failed
|
||||||
|
</CBadge>
|
||||||
|
</CButton>
|
||||||
|
</CCol>
|
||||||
|
</CRow>
|
||||||
|
<CRow style={{marginTop :'10px'}}>
|
||||||
|
<CCol>
|
||||||
|
<CButton block onClick = { toggleModal } color="primary">Firmware Upgrade</CButton>
|
||||||
|
</CCol>
|
||||||
|
</CRow>
|
||||||
|
</CCardBody>
|
||||||
|
<CModal
|
||||||
|
show={showModal}
|
||||||
|
onClose={toggleModal}
|
||||||
|
>
|
||||||
|
<CModalHeader closeButton>
|
||||||
|
<CModalTitle>Firmware Upgrade</CModalTitle>
|
||||||
|
</CModalHeader>
|
||||||
|
<CModalBody>
|
||||||
|
<p>Insert the link of the firmware version you would like to upgrade the device to.</p>
|
||||||
|
<CForm action="" method="post" encType="multipart/form-data" className="form-horizontal">
|
||||||
|
<CInput
|
||||||
|
className={'form-control', {'is-invalid' : !validField}}
|
||||||
|
type="text"
|
||||||
|
id="uri"
|
||||||
|
name="uri-input"
|
||||||
|
placeholder="https://somelocation.com/file=newversion.bin"
|
||||||
|
autoComplete="firmware-uri"
|
||||||
|
onChange={event => formChange(event.target.value)}
|
||||||
|
/>
|
||||||
|
<CInvalidFeedback>You need a url...</CInvalidFeedback>
|
||||||
|
</CForm>
|
||||||
|
</CModalBody>
|
||||||
|
<CModalFooter>
|
||||||
|
<CButton color="primary" onClick={event => formValidation()}>Upgrade</CButton>
|
||||||
|
<CButton
|
||||||
|
color="secondary"
|
||||||
|
onClick={toggleModal}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</CButton>
|
||||||
|
</CModalFooter>
|
||||||
|
</CModal>
|
||||||
|
</CCard>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default DeviceActions
|
export default DeviceActions
|
||||||
@@ -163,12 +163,6 @@ const DeviceListDisplay = ({ devices, refresh, toggleDetails, details, loading,
|
|||||||
{cleanTimestamp(item.lastConfigurationChange)}
|
{cleanTimestamp(item.lastConfigurationChange)}
|
||||||
</td>
|
</td>
|
||||||
),
|
),
|
||||||
'lastConfigurationDownload':
|
|
||||||
(item)=>(
|
|
||||||
<td>
|
|
||||||
{cleanTimestamp(item.lastConfigurationDownload)}
|
|
||||||
</td>
|
|
||||||
),
|
|
||||||
'txBytes':
|
'txBytes':
|
||||||
(item)=>(
|
(item)=>(
|
||||||
<td>
|
<td>
|
||||||
|
|||||||
Reference in New Issue
Block a user