feat(add-job): provide editor for adding options (#670)

Author: roggervalf

public/dashboard.js

@@ -256,8 +256,9 @@ $(document).ready(() => {
 
     const job = localStorage.getItem('arena:savedJob');
     if (job) {
-      const {name, data} = JSON.parse(job);
+      const {name, data, opts} = JSON.parse(job);
       window.jsonEditor.set(data);
+      if (window.jsonEditorOpts) window.jsonEditorOpts.set(opts);
       $('input.js-add-job-name').val(name);
     } else {
       window.jsonEditor.set({id: ''});
@@ -291,7 +292,8 @@ $(document).ready(() => {
   $('.js-add-job').on('click', function () {
     const name = $('input.js-add-job-name').val() || null;
     const data = window.jsonEditor.get();
-    const job = JSON.stringify({name, data});
+    const opts = window.jsonEditorOpts ? window.jsonEditorOpts.get() : {};
+    const job = JSON.stringify({name, data, opts});
     localStorage.setItem('arena:savedJob', job);
     const {queueHost, queueName} = window.arenaInitialPayload;
     $.ajax({

src/server/queue/index.js

@@ -140,14 +140,16 @@ class Queues {
    * @param {Object} queue A bee or bull queue class
    * @param {Object} data The data to be used within the job
    * @param {String} name The name of the Bull job (optional)
+   * @param {Object} opts The opts to be used within the job
    */
-  async set(queue, data, name) {
+  async set(queue, data, name, opts) {
     if (queue.IS_BEE) {
       return queue.createJob(data).save();
     } else {
       const args = [
         data,
         {
+          ...opts,
           removeOnComplete: false,
           removeOnFail: false,
         },

src/server/views/api/jobAdd.js

@@ -1,14 +1,14 @@
 async function handler(req, res) {
   const {queueName, queueHost} = req.params;
-  const {name, data} = req.body;
+  const {name, data, opts} = req.body;
 
   const {Queues} = req.app.locals;
 
   const queue = await Queues.get(queueName, queueHost);
   if (!queue) return res.status(404).json({error: 'queue not found'});
 
   try {
-    await Queues.set(queue, data, name);
+    await Queues.set(queue, data, name, opts);
   } catch (err) {
     return res.status(500).json({error: err.message});
   }

src/server/views/dashboard/queueDetails.js

@@ -35,6 +35,7 @@ async function handler(req, res) {
     queueName,
     queueHost,
     queueIsBee: !!queue.IS_BEE,
+    queueIsBullMQ: !!queue.IS_BULLMQ,
     hasFlows: Flows.hasFlows(),
     jobCounts,
     stats,

src/server/views/dashboard/templates/queueDetails.hbs

@@ -18,17 +18,41 @@
   <div class="col-sm-6">
     <div class="panel panel-default">
       <div class="panel-heading">
-        <div class="js-toggle-add-job-editor  btn btn-default btn-xs pull-right">Add Job</div>
+        <div class="js-toggle-add-job-editor btn btn-default btn-xs pull-right">Add Job</div>
         <h4 class="panel-title">Job Types</h4>
       </div>
       <div class="panel-body">
         <div class="jsoneditorx form-group hide overflow-hidden">
-          <div class="jsoneditorx hide" id="jsoneditor" style="height:300px;"></div>
+          {{#unless queueIsBee}}
+          <div class="panel with-nav-tabs panel-primary">
+            <ul class="nav nav-tabs nav-justified">
+              <li class="active"><a href="#tab1primary" data-toggle="tab">Payload</a></li>
+              <li><a class="text-white" href="#tab2primary" data-toggle="tab">Options</a></li>
+            </ul>
+            <div class="panel-body">
+              <div class="tab-content">
+                <div class="tab-pane fade in active" id="tab1primary">
+          {{/unless}}
+                  <div class="jsoneditorx hide" id="jsoneditor" style="height:300px;"></div>
+          {{#unless queueIsBee}}
+                </div>
+                <div class="tab-pane fade" id="tab2primary">
+                  <div class="jsoneditorx hide" id="jsoneditoropts" style="height:300px;"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+          {{/unless}}
           <br />
           <div class="form-inline pull-right">
             {{#unless queueIsBee}}
             <input type="text" class="js-add-job-name form-control input-sm" style="margin-right: 10px;"
-              placeholder="Job name (optional)">
+              {{#if queueIsBullMQ}}
+              placeholder="Job name"
+              {{else}}
+              placeholder="Job name (optional)"
+              {{/if}}
+            >
             {{/unless}}
             <div class="js-add-job btn btn-primary btn-sm">Create</div>
           </div>
@@ -75,6 +99,7 @@
 
 {{#contentFor 'script'}}
 window.jsonEditor = new JSONEditor(document.getElementById('jsoneditor'), { modes: ['code','tree','text'] });
+if(document.getElementById('jsoneditoropts')) window.jsonEditorOpts = new JSONEditor(document.getElementById('jsoneditoropts'), { modes: ['code','tree','text'] });
 window.arenaInitialPayload = {
 queueHost: "{{ queueHost }}",
 queueName: "{{ queueName }}"