From 814d758f1d74a463efa36b3f8c55742770d88cde Mon Sep 17 00:00:00 2001 From: bourquecharles Date: Mon, 17 May 2021 18:34:55 -0400 Subject: [PATCH] Multiple UI cleanups + TraceModalWidget created --- src/components/DeviceActions.js | 13 +- src/components/DeviceCommands.js | 4 +- src/components/DeviceHealth.js | 4 +- src/components/DeviceLogs.js | 4 +- src/widgets/TraceModalWidget.js | 223 +++++++++++++++++++++++++++++++ 5 files changed, 244 insertions(+), 4 deletions(-) create mode 100644 src/widgets/TraceModalWidget.js diff --git a/src/components/DeviceActions.js b/src/components/DeviceActions.js index 4edb2f3..150e03d 100644 --- a/src/components/DeviceActions.js +++ b/src/components/DeviceActions.js @@ -2,11 +2,13 @@ import React, { useState } from 'react'; import { CButton, CCard, CCardHeader, CCardBody, CRow, CCol } from '@coreui/react'; import ActionModalWidget from '../widgets/ActionModalWidget'; import FirmwareUpgradeModal from './FirmwareUpgradeModal'; +import TraceModalWidget from '../widgets/TraceModalWidget'; const DeviceActions = () => { const [showRebootModal, setShowRebootModal] = useState(false); const [showBlinkModal, setShowBlinkModal] = useState(false); const [showUpgradeModal, setShowUpgradeModal] = useState(false); + const [showTraceModal, setShowTraceModal] = useState(false); const toggleRebootModal = () => { setShowRebootModal(!showRebootModal); @@ -20,6 +22,10 @@ const DeviceActions = () => { setShowUpgradeModal(!showUpgradeModal); }; + const toggleTraceModal = () => { + setShowTraceModal(!showTraceModal); + }; + return ( Device Actions @@ -42,7 +48,11 @@ const DeviceActions = () => { Firmware Upgrade - + + + Trace + + { extraParameters={{ duration: 10, pattern: 'on' }} /> + ); }; diff --git a/src/components/DeviceCommands.js b/src/components/DeviceCommands.js index 73d5780..b88a22a 100644 --- a/src/components/DeviceCommands.js +++ b/src/components/DeviceCommands.js @@ -106,6 +106,7 @@ const DeviceCommands = () => { + From: { /> + To: { toggleDetails(index); }} > - {details.includes(index) ? 'Hide' : 'Show'} + ), diff --git a/src/components/DeviceHealth.js b/src/components/DeviceHealth.js index b31a9f8..bdf1fbe 100644 --- a/src/components/DeviceHealth.js +++ b/src/components/DeviceHealth.js @@ -118,6 +118,7 @@ const DeviceHealth = () => { + From: { /> + To: { toggleDetails(index); }} > - {details.includes(index) ? 'Hide' : 'Show'} + ); diff --git a/src/components/DeviceLogs.js b/src/components/DeviceLogs.js index 9053f95..bb2c6ac 100644 --- a/src/components/DeviceLogs.js +++ b/src/components/DeviceLogs.js @@ -106,6 +106,7 @@ const DeviceLogs = () => { + From: { /> + Top: { toggleDetails(index); }} > - {details.includes(index) ? 'Hide' : 'Show'} + ), diff --git a/src/widgets/TraceModalWidget.js b/src/widgets/TraceModalWidget.js new file mode 100644 index 0000000..35a3360 --- /dev/null +++ b/src/widgets/TraceModalWidget.js @@ -0,0 +1,223 @@ +import { + CButton, + CModal, + CModalHeader, + CModalTitle, + CModalBody, + CModalFooter, + CSpinner, + CBadge, + CCol, + CRow, + CInvalidFeedback, +} from '@coreui/react'; +import React, { useState, useEffect } from 'react'; +import DatePicker from 'react-widgets/DatePicker'; +import { useSelector } from 'react-redux'; +import NumberFormat from 'react-number-format'; +import { convertDateToUtc } from '../utils/helper'; +import 'react-widgets/styles.css'; +import { getToken } from '../utils/authHelper'; +import axiosInstance from '../utils/axiosInstance'; + +const TraceModalWidget = ({ show, toggleModal }) => { + const [hadSuccess, setHadSuccess] = useState(false); + const [hadFailure, setHadFailure] = useState(false); + const [waiting, setWaiting] = useState(false); + const [usingDuration, setUsingDuration] = useState(true); + const [duration, setDuration] = useState(1); + const [packets, setPackets] = useState(1); + const [chosenDate, setChosenDate] = useState(new Date().toString()); + const [responseBody, setResponseBody] = useState(''); + const [checkingIfSure, setCheckingIfSure] = useState(false); + const selectedDeviceId = useSelector((state) => state.selectedDeviceId); + + const numberRegex = /^[0-9\b]+$/; + + const setDate = (date) => { + if (date) { + setChosenDate(date.toString()); + } + }; + + const confirmingIfSure = () => { + setCheckingIfSure(true); + }; + + const isGoodPackets = (inputObj) => { + const { value } = inputObj; + if (value <= 1000 && numberRegex.test(value)) return inputObj; + return null; + }; + const isGoodDuration = (inputObj) => { + const { value } = inputObj; + if (value <= 60 && numberRegex.test(value)) return inputObj; + return null; + }; + + useEffect(() => { + setHadSuccess(false); + setHadFailure(false); + setWaiting(false); + setChosenDate(new Date().toString()); + setResponseBody(''); + setCheckingIfSure(false); + setDuration(1); + setPackets(1); + }, [show]); + + useEffect(() => { + console.log(`packets: ${packets} duration: ${duration}`); + }, [duration, packets]); + + const doAction = () => { + setHadFailure(false); + setHadSuccess(false); + setWaiting(true); + + const token = getToken(); + const utcDate = new Date(chosenDate); + const utcDateString = utcDate.toISOString(); + + const parameters = { + serialNumber: selectedDeviceId, + when: utcDateString, + network: 'lan', + interface: 'lan', + }; + + if (usingDuration) { + parameters.duration = parseInt(duration, 10); + } else { + parameters.numberOfPackets = parseInt(packets, 10); + } + + const headers = { + Accept: 'application/json', + Authorization: `Bearer ${token}`, + }; + + axiosInstance + .post(`/device/${selectedDeviceId}/trace`, parameters, { headers }) + .then((response) => { + setResponseBody(JSON.stringify(response.data, null, 4)); + setHadSuccess(true); + }) + .catch((error) => { + setHadFailure(true); + console.log(error); + console.log(error.response); + }) + .finally(() => { + setCheckingIfSure(false); + setWaiting(false); + }); + }; + + return ( + + + Trace Device + + +
+ Launch a remote trace of this device for either a specific duration or a number of packets +
+ + + setUsingDuration(true)} + > + Duration + + + + setUsingDuration(false)} + > + Packets + + + + + + {usingDuration ? 'Duration (s): ' : 'Packets: '} + + + {usingDuration ? ( + setDuration(values.value)} + isAllowed={isGoodDuration} + suffix="s" + /> + ) : ( + setPackets(values.value)} + isAllowed={isGoodPackets} + suffix=" packets" + /> + )} + + + + +

Date:

+ + + setDate(date)} + min={convertDateToUtc(new Date())} + /> + + + You need a date... + + + + + + + + + Cancel + + + + ); +}; + +export default TraceModalWidget;