feat(add-job): improve named job support (#209)

Co-authored-by: Eli Skeggs <skeggse@users.noreply.github.com>

Author: ErikMartensson

public/dashboard.js

@@ -149,25 +149,33 @@ $(document).ready(() => {
 
   $('.js-toggle-add-job-editor').on('click', function () {
     $('.jsoneditorx').toggleClass('hide');
-    const data = localStorage.getItem('arena:savedJobData');
-    window.jsonEditor.set(data ? JSON.parse(data) : { id: '' });
+    const job = localStorage.getItem('arena:savedJob');
+    if (job) {
+      const { name, data } = JSON.parse(job);
+      window.jsonEditor.set(data);
+      $('input.js-add-job-name').val(name);
+    } else {
+      window.jsonEditor.set({ id: '' });
+    }
   });
 
   $('.js-add-job').on('click', function () {
+    const name = $('input.js-add-job-name').val() || null;
     const data = window.jsonEditor.get();
-    localStorage.setItem('arena:savedJobData', JSON.stringify(data));
+    const job = JSON.stringify({ name, data });
+    localStorage.setItem('arena:savedJob', job);
     const { queueHost, queueName } = window.arenaInitialPayload;
     $.ajax({
       url: `${basePath}/api/queue/${encodeURIComponent(queueHost)}/${encodeURIComponent(
         queueName
       )}/job`,
       type: 'POST',
-      data: JSON.stringify(data),
+      data: job,
       contentType: 'application/json',
     })
       .done(() => {
         alert('Job successfully added!');
-        localStorage.removeItem('arena:savedJobData');
+        localStorage.removeItem('arena:savedJob');
       })
       .fail((jqXHR) => {
         window.alert('Failed to save job, check console for error.');

src/server/queue/index.js

@@ -106,8 +106,9 @@ 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)
    */
-  async set(queue, data) {
+  async set(queue, data, name) {
     if (queue.IS_BEE) {
       return queue.createJob(data).save();
     } else {
@@ -119,7 +120,7 @@ class Queues {
         },
       ];
 
-      if (data.name) args.unshift(data.name);
+      if (name) args.unshift(name);
       return queue.add.apply(queue, args);
     }
   }

src/server/views/api/jobAdd.js

@@ -1,14 +1,14 @@
 async function handler(req, res) {
   const { queueName, queueHost } = req.params;
-  const data = req.body;
+  const { name, data } = 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);
+    await Queues.set(queue, data, name);
   } catch (err) {
     return res.status(500).json({ error: err.message });
   }

src/server/views/dashboard/queueDetails.js

@@ -23,6 +23,7 @@ async function handler(req, res) {
     basePath,
     queueName,
     queueHost,
+    queueIsBee: !!queue.IS_BEE,
     jobCounts,
     stats,
   });

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

@@ -11,7 +11,12 @@
         <div class="jsoneditorx form-group hide overflow-hidden">
           <div class="jsoneditorx hide" id="jsoneditor" style="height:300px;"></div>
           <br />
-          <div class="js-add-job  btn btn-primary btn-sm pull-right">Create</div>
+          <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)">
+            {{/unless}}
+            <div class="js-add-job btn btn-primary btn-sm">Create</div>
+          </div>
         </div>
         <ul class="list-group">
           {{#each jobCounts}}