diff --git a/src/components/ConfirmModal.js b/src/components/ConfirmModal.js
new file mode 100644
index 0000000..8bcd651
--- /dev/null
+++ b/src/components/ConfirmModal.js
@@ -0,0 +1,85 @@
+import React, { useState, useEffect} from 'react';
+import {
+ CButton,
+ CModal,
+ CModalHeader,
+ CModalTitle,
+ CModalBody,
+ CModalFooter,
+ CSpinner,
+ CBadge
+} from '@coreui/react';
+import PropTypes from 'prop-types';
+
+const ConfirmModal = ({ show, toggle, action }) => {
+ const [loading, setLoading] = useState(false);
+ const [haveResult, setHaveResult] = useState(false);
+ const [success, setSuccess] = useState(false);
+
+ const getButtonContent = () => {
+ if(haveResult){
+ if(success){
+ return (
+ Success
+ );
+ }
+ return (
+ Error
+ );
+ }
+ if(loading){
+ return (
+
+ Loading...
+
+
+ );
+ }
+ return 'Yes';
+ }
+
+ const doAction = async () => {
+ setLoading(true);
+ const result = await action();
+ setSuccess(result);
+ setHaveResult(true);
+ setLoading(false);
+ }
+
+ useEffect(() => {
+ setLoading(false);
+ setHaveResult(false);
+ setSuccess(false);
+ }, [show]);
+
+ return(
+
+
+ Delete Command
+
+
+ Are you sure you want to delete this command? this action is not reversible.
+
+
+ doAction()}
+ >
+ {getButtonContent()}
+
+
+ Cancel
+
+
+
+ );
+};
+
+ConfirmModal.propTypes = {
+ show: PropTypes.bool.isRequired,
+ toggle: PropTypes.func.isRequired,
+ action: PropTypes.func.isRequired,
+};
+
+export default ConfirmModal;
diff --git a/src/pages/DevicePage/DeviceCommands.js b/src/pages/DevicePage/DeviceCommands.js
index b95060c..f9cfca0 100644
--- a/src/pages/DevicePage/DeviceCommands.js
+++ b/src/pages/DevicePage/DeviceCommands.js
@@ -18,10 +18,13 @@ import { prettyDate, addDays } from '../../utils/helper';
import axiosInstance from '../../utils/axiosInstance';
import { getToken } from '../../utils/authHelper';
import WifiScanResultModalWidget from './WifiScanResultModal';
+import ConfirmModal from '../../components/ConfirmModal';
const DeviceCommands = ({ selectedDeviceId }) => {
- const [showModal, setShowModal] = useState(false);
+ const [showScanModal, setShowScanModal] = useState(false);
+ const [showConfirmModal, setShowConfirmModal] = useState(false);
const [chosenWifiScan, setChosenWifiScan] = useState(null);
+ const [uuidDelete, setUuidDelete] = useState('');
const [scanDate, setScanDate] = useState('');
const [collapse, setCollapse] = useState(false);
const [details, setDetails] = useState([]);
@@ -36,8 +39,13 @@ const DeviceCommands = ({ selectedDeviceId }) => {
e.preventDefault();
};
- const toggleModal = () => {
- setShowModal(!showModal);
+ const toggleScanModal = () => {
+ setShowScanModal(!showScanModal);
+ };
+
+ const toggleConfirmModal = (uuid) => {
+ setUuidDelete(uuid);
+ setShowConfirmModal(!showConfirmModal);
};
const modifyStart = (value) => {
@@ -75,6 +83,30 @@ const DeviceCommands = ({ selectedDeviceId }) => {
});
};
+ const deleteCommand= async () => {
+ if(uuidDelete === ''){
+ return false;
+ }
+ const options = {
+ headers: {
+ Accept: 'application/json',
+ Authorization: `Bearer ${getToken()}`,
+ },
+ };
+ return (
+ axiosInstance
+ .delete(`/command/${uuidDelete}`, options)
+ .then(() => {
+ setUuidDelete('');
+ return true;
+ })
+ .catch(() => {
+ setUuidDelete('');
+ return false;
+ })
+ );
+ };
+
const toggleDetails = (item, index) => {
if (item.command !== 'wifiscan' || !item.results.status) {
const position = details.indexOf(index);
@@ -89,10 +121,10 @@ const DeviceCommands = ({ selectedDeviceId }) => {
} else {
setChosenWifiScan(item.results.status.scan.scan);
setScanDate(item.completed);
- setShowModal(true);
+ setShowScanModal(true);
}
};
-
+
const toggleResponse = (item, index) => {
const position = responses.indexOf(index);
let newResponses = responses.slice();
@@ -110,8 +142,8 @@ const DeviceCommands = ({ selectedDeviceId }) => {
};
const getDetails = (command, commandDetails, index) => {
- if(!details.includes(index)){
- return
+ if (!details.includes(index)) {
+ return ;
}
if (command === 'reboot' || command === 'leds') {
const result = commandDetails.results;
@@ -121,9 +153,9 @@ const DeviceCommands = ({ selectedDeviceId }) => {
return {JSON.stringify(commandDetails, null, 4)};
};
- const getResponse = (command, commandDetails, index) => {
- if(!responses.includes(index)){
- return
+ const getResponse = (commandDetails, index) => {
+ if (!responses.includes(index)) {
+ return ;
}
return {JSON.stringify(commandDetails, null, 4)};
};
@@ -146,6 +178,13 @@ const DeviceCommands = ({ selectedDeviceId }) => {
sorter: false,
filter: false,
},
+ {
+ key: 'delete_command',
+ label: 'Delete',
+ _style: { width: '1%' },
+ sorter: false,
+ filter: false,
+ },
];
useEffect(() => {
@@ -162,8 +201,6 @@ const DeviceCommands = ({ selectedDeviceId }) => {
}
}, [selectedDeviceId]);
-
-
return (
{
),
+ delete_command: (item, index) => (
+
+ {
+ toggleConfirmModal(item.UUID);
+ }}
+ >
+
+
+ |
+ ),
details: (item, index) => (
-
-
- Result
-
- {getDetails(item.command, item, index)}
-
-
-
-
-
- Details
-
- {getResponse(item.command, item, index)}
-
-
-
+
+
+ Result
+ {getDetails(item.command, item, index)}
+
+
+
+
+ Details
+ {getResponse(item.command, item, index)}
+
+
{JSON.stringify(healthCheckDetails, null, 4)};
- return
+ return {JSON.stringify(healthCheckDetails, null, 4)};
+ return ;
};
const columns = [
@@ -183,9 +183,7 @@ const DeviceHealth = ({ selectedDeviceId }) => {
Details
-
- {getDetails(index, item.values)}
-
+ {getDetails(index, item.values)}
),
diff --git a/src/pages/DevicePage/DeviceLogs.js b/src/pages/DevicePage/DeviceLogs.js
index c2d38c0..75a6492 100644
--- a/src/pages/DevicePage/DeviceLogs.js
+++ b/src/pages/DevicePage/DeviceLogs.js
@@ -79,8 +79,8 @@ const DeviceLogs = ({ selectedDeviceId }) => {
const getDetails = (index, logDetails) => {
if (details.includes(index))
- return {JSON.stringify(logDetails, null, 4)};
- return
+ return {JSON.stringify(logDetails, null, 4)};
+ return ;
};
const columns = [
@@ -160,9 +160,7 @@ const DeviceLogs = ({ selectedDeviceId }) => {
Details
-
- {getDetails(index, item)}
-
+ {getDetails(index, item)}
),