scottk/OptimCloud-gw-ui
1
0
Fork 0
mirror of https://github.com/optim-enterprises-bv/OptimCloud-gw-ui.git synced 2025-10-31 02:07:45 +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,
CRow,
CInvalidFeedback,
CSelect
} 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';
@@ -25,15 +25,13 @@ const TraceModalWidget = ({ show, toggleModal }) => {
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 [duration, setDuration] = useState(20);
const [packets, setPackets] = useState(100);
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());
@@ -44,17 +42,6 @@ const TraceModalWidget = ({ show, toggleModal }) => {
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);
@@ -62,8 +49,8 @@ const TraceModalWidget = ({ show, toggleModal }) => {
setChosenDate(new Date().toString());
setResponseBody('');
setCheckingIfSure(false);
setDuration(1);
setPackets(1);
setDuration(20);
setPackets(100);
}, [show]);
useEffect(() => {
@@ -153,23 +140,23 @@ const TraceModalWidget = ({ show, toggleModal }) => {
</CRow>
<CRow style={{ marginTop: '20px' }}>
<CCol md="4" style={{ marginTop: '7px' }}>
{usingDuration ? 'Duration (s): ' : 'Packets: '}
{usingDuration ? 'Duration: ' : 'Packets: '}
</CCol>
<CCol xs="12" md="8">
{usingDuration ? (
<NumberFormat
value={duration}
onValueChange={(values) => setDuration(values.value)}
isAllowed={isGoodDuration}
suffix="s"
/>
<CSelect disabled={waiting}>
<option selected value="duration" onClick={() => setDuration(20)}>20s</option>
<option value="40" onClick={() => setDuration(40)}>40s</option>
<option value="60" onClick={() => setDuration(60)}>60s</option>
<option value="120" onClick={() => setDuration(120)}>120s</option>
</CSelect>
) : (
<NumberFormat
value={packets}
onValueChange={(values) => setPackets(values.value)}
isAllowed={isGoodPackets}
suffix=" packets"
/>
<CSelect value={packets} disabled={waiting}>
<option value="100" onClick={() => setPackets(100)}>100</option>
<option value="250" onClick={() => setPackets(250)}>250</option>
<option value="500" onClick={() => setPackets(500)}>500</option>
<option value="1000" onClick={() => setPackets(1000)}>1000</option>
</CSelect>
)}
</CCol>
</CRow>