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

Selects instead of text fields for trace

Browse Source
This commit is contained in:
bourquecharles
2021-05-17 21:18:03 -04:00
parent b82b3d8059
commit b2630cd50e
1 changed files with 19 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/widgets/TraceModalWidget.js
View File

@@ -10,11 +10,11 @@ import {
CCol, CCol,
CRow, CRow,
CInvalidFeedback, CInvalidFeedback,
CSelect
} from '@coreui/react'; } from '@coreui/react';
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import DatePicker from 'react-widgets/DatePicker'; import DatePicker from 'react-widgets/DatePicker';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import NumberFormat from 'react-number-format';
import { convertDateToUtc } from '../utils/helper'; import { convertDateToUtc } from '../utils/helper';
import 'react-widgets/styles.css'; import 'react-widgets/styles.css';
import { getToken } from '../utils/authHelper'; import { getToken } from '../utils/authHelper';
@@ -25,15 +25,13 @@ const TraceModalWidget = ({ show, toggleModal }) => {
const [hadFailure, setHadFailure] = useState(false); const [hadFailure, setHadFailure] = useState(false);
const [waiting, setWaiting] = useState(false); const [waiting, setWaiting] = useState(false);
const [usingDuration, setUsingDuration] = useState(true); const [usingDuration, setUsingDuration] = useState(true);
const [duration, setDuration] = useState(1); const [duration, setDuration] = useState(20);
const [packets, setPackets] = useState(1); const [packets, setPackets] = useState(100);
const [chosenDate, setChosenDate] = useState(new Date().toString()); const [chosenDate, setChosenDate] = useState(new Date().toString());
const [responseBody, setResponseBody] = useState(''); const [responseBody, setResponseBody] = useState('');
const [checkingIfSure, setCheckingIfSure] = useState(false); const [checkingIfSure, setCheckingIfSure] = useState(false);
const selectedDeviceId = useSelector((state) => state.selectedDeviceId); const selectedDeviceId = useSelector((state) => state.selectedDeviceId);
const numberRegex = /^[0-9\b]+$/;
const setDate = (date) => { const setDate = (date) => {
if (date) { if (date) {
setChosenDate(date.toString()); setChosenDate(date.toString());
@@ -44,17 +42,6 @@ const TraceModalWidget = ({ show, toggleModal }) => {
setCheckingIfSure(true); 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(() => { useEffect(() => {
setHadSuccess(false); setHadSuccess(false);
setHadFailure(false); setHadFailure(false);
@@ -62,8 +49,8 @@ const TraceModalWidget = ({ show, toggleModal }) => {
setChosenDate(new Date().toString()); setChosenDate(new Date().toString());
setResponseBody(''); setResponseBody('');
setCheckingIfSure(false); setCheckingIfSure(false);
setDuration(1); setDuration(20);
setPackets(1); setPackets(100);
}, [show]); }, [show]);
useEffect(() => { useEffect(() => {
@@ -153,23 +140,23 @@ const TraceModalWidget = ({ show, toggleModal }) => {
</CRow> </CRow>
<CRow style={{ marginTop: '20px' }}> <CRow style={{ marginTop: '20px' }}>
<CCol md="4" style={{ marginTop: '7px' }}> <CCol md="4" style={{ marginTop: '7px' }}>
{usingDuration ? 'Duration (s): ' : 'Packets: '} {usingDuration ? 'Duration: ' : 'Packets: '}
</CCol> </CCol>
<CCol xs="12" md="8"> <CCol xs="12" md="8">
{usingDuration ? ( {usingDuration ? (
<NumberFormat <CSelect disabled={waiting}>
value={duration} <option selected value="duration" onClick={() => setDuration(20)}>20s</option>
onValueChange={(values) => setDuration(values.value)} <option value="40" onClick={() => setDuration(40)}>40s</option>
isAllowed={isGoodDuration} <option value="60" onClick={() => setDuration(60)}>60s</option>
suffix="s" <option value="120" onClick={() => setDuration(120)}>120s</option>
/> </CSelect>
) : ( ) : (
<NumberFormat <CSelect value={packets} disabled={waiting}>
value={packets} <option value="100" onClick={() => setPackets(100)}>100</option>
onValueChange={(values) => setPackets(values.value)} <option value="250" onClick={() => setPackets(250)}>250</option>
isAllowed={isGoodPackets} <option value="500" onClick={() => setPackets(500)}>500</option>
suffix=" packets" <option value="1000" onClick={() => setPackets(1000)}>1000</option>
/> </CSelect>
)} )}
</CCol> </CCol>
</CRow> </CRow>