Add control for number of parallel requests

components/BatchDialog.js

@@ -11,14 +11,17 @@ import ActionButton from './ActionButton';
 import OutputFieldsChooser from './OutputFieldsChooser';
 import ProgressBar from './ProgressBar';
 import DelaySelector from './DelaySelector';
+import ParallelSelector from './ParallelSelector';
 
 export default function BatchDialog({context, request}) {
   const [csvPath, setCsvPath] = useState("");
   const [csvHeaders, setCsvHeaders] = useState([]);
   const [csvData, setCsvData] = useState([]);
   const [outputConfig, setOutputConfig] = useState([]);
   const [sent, setSent] = useState(0);
+
   const [delay, setDelay] = useState(0);
+  const [parallelism, setParallelism] = useState(1);
 
   // Load default delay from plugin settings on mount
   useEffect(() => {
@@ -47,7 +50,7 @@ export default function BatchDialog({context, request}) {
     setSent(0);
 
     const queue = new Queue({
-      concurrent: 4,
+      concurrent: parallelism,
       interval: 0,
       start: false,
     });
@@ -89,10 +92,11 @@ export default function BatchDialog({context, request}) {
 
     <FormRow label="Run config">
       <DelaySelector value={delay} onChange={onChangeDelay}/>
+      <ParallelSelector value={parallelism} onChange={({target: {value}}) => setParallelism(value)}/>
     </FormRow>
 
     <FormRow label="Progress">
-      <ProgressBar bgcolor="#a11" completed={sent * 100 / totalRequests} text={`${sent}/${totalRequests}`} />
+      <ProgressBar bgcolor="#ff6b6b" completed={sent * 100 / totalRequests} text={`${sent}/${totalRequests}`} />
     </FormRow>
 
     <ActionButton title="Run!" icon="fa-person-running" onClick={onRun} disabled={!canRun}/>

components/ParallelSelector.js

@@ -0,0 +1,12 @@
+export default function ParallelSelector({value, onChange}) {
+  return <label>
+    Parallel requests
+    <input
+      type="number"
+      step="1"
+      min="1"
+      value={value}
+      onChange={onChange}
+    />
+  </label>
+}

components/ProgressBar.js

@@ -26,8 +26,10 @@ export default function ProgressBar(props) {
 
   const labelStyles = {
     paddingInline: 5,
-    color: 'white',
-    fontWeight: 'bold'
+    color: 'black',
+    fontWeight: 'bold',
+    fontSize: 'x-small',
+    verticalAlign: 'top',
   }
 
   return (