feat(details): update job data (#674)

Author: roggervalf

docker-compose.yml

@@ -0,0 +1,7 @@
+version: '3.2'
+services:
+  redis:
+    image: redis:6-alpine
+    container_name: redis-6
+    ports:
+      - 6379:6379

example/bee.js

@@ -30,7 +30,7 @@ async function main() {
     .delayUntil(Date.now() + 60 * 1000)
     .save();
 
-  const job = await queue.createJob({}).save();
+  await queue.createJob({}).save();
 
   Arena(
     {

example/bull.js

@@ -39,7 +39,7 @@ async function main() {
     }
   });
 
-  await queue.add({});
+  await queue.add({data: 'data'});
 
   // adding delayed jobs
   const delayedJob = await queue.add({}, {delay: 60 * 1000});

package.json

@@ -40,6 +40,8 @@
     "ci": "npm run lint && if [ -z \"$CI\" ]; then npm run ci:commitlint; fi",
     "ci:commitlint": "commitlint --from \"origin/${GITHUB_BASE_REF:-master}\"",
     "cm": "git cz",
+    "dc:up": "docker-compose -f docker-compose.yml up -d",
+    "dc:down": "docker-compose -f docker-compose.yml down",
     "dry:run": "npm publish --dry-run",
     "lint": "prettier -c .",
     "lint:staged": "lint-staged",

public/dashboard.js

@@ -314,6 +314,38 @@ $(document).ready(() => {
       });
   });
 
+  $('.js-update-job-data').on('click', function (e) {
+    e.preventDefault();
+    const jobId = $(this).data('job-id');
+    const queueName = $(this).data('queue-name');
+    const queueHost = $(this).data('queue-host');
+    const stringifiedData = JSON.stringify(window.jsonEditor.get());
+    const r = window.confirm(
+      `Update job #${jobId} data in queue "${queueHost}/${queueName}"?`
+    );
+
+    if (r) {
+      $.ajax({
+        url: `${basePath}/api/queue/${encodeURIComponent(
+          queueHost
+        )}/${encodeURIComponent(queueName)}/job/${encodeURIComponent(
+          jobId
+        )}/data`,
+        type: 'PUT',
+        data: stringifiedData,
+        contentType: 'application/json',
+      })
+        .done(() => {
+          alert('Job data successfully updated!');
+          window.location.reload();
+        })
+        .fail((jqXHR) => {
+          window.alert('Failed to update job data, check console for error.');
+          console.error(jqXHR.responseText);
+        });
+    }
+  });
+
   $('.js-add-flow').on('click', function () {
     const data = window.jsonEditor.get();
     const flow = JSON.stringify({data});

src/server/views/api/index.js

@@ -6,6 +6,7 @@ const jobAdd = require('./jobAdd');
 const jobPromote = require('./jobPromote');
 const jobRetry = require('./jobRetry');
 const jobRemove = require('./jobRemove');
+const jobDataUpdate = require('./jobDataUpdate');
 const repeatableJobRemove = require('./repeatableJobRemove');
 const bulkJobsPromote = require('./bulkJobsPromote');
 const bulkJobsRemove = require('./bulkJobsRemove');
@@ -24,6 +25,7 @@ router.delete(
   '/queue/:queueHost/:queueName/repeatable/job/:id',
   repeatableJobRemove
 );
+router.put('/queue/:queueHost/:queueName/job/:id/data', jobDataUpdate);
 router.patch('/queue/:queueHost/:queueName/job/:id', jobRetry);
 router.put('/queue/:queueHost/:queueName/pause', queuePause);
 router.put('/queue/:queueHost/:queueName/resume', queueResume);

src/server/views/api/jobDataUpdate.js

@@ -0,0 +1,25 @@
+async function handler(req, res) {
+  const {queueName, queueHost, id} = req.params;
+  const 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'});
+
+  const job = await queue.getJob(id);
+  if (!job) return res.status(404).send({error: 'job not found'});
+
+  try {
+    if (job.updateData) {
+      await job.updateData(data);
+    } else {
+      await job.update(data);
+    }
+  } catch (err) {
+    return res.status(500).json({error: err.message});
+  }
+  return res.sendStatus(200);
+}
+
+module.exports = handler;

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

@@ -1,6 +1,6 @@
 <h2>Queue <code>{{ queueHost }}/{{ queueName }}</code></h2>
 
-{{> dashboard/jobDetails job basePath=basePath queueName=queueName queueHost=queueHost jobState=jobState stacktraces=stacktraces}}
+{{> dashboard/jobDetails job basePath=basePath queueName=queueName queueHost=queueHost jobState=jobState stacktraces=stacktraces view=true}}
 
 {{#contentFor 'sidebar'}}
 <li><a href="{{ basePath }}/">Queues Overview</a></li>
@@ -12,4 +12,11 @@
 {{#if hasFlows}}
 <li><a href="{{ basePath }}/flows/">Flows Overview</a></li>
 {{/if}}
+{{/contentFor}}
+
+{{#contentFor 'script'}}
+if(document.getElementById('jsoneditor')) {
+  window.jsonEditor = new JSONEditor(document.getElementById('jsoneditor'), { modes: ['code','tree','text'] });
+  window.jsonEditor.set({{json job.data true}})
+}
 {{/contentFor}}

src/server/views/partials/dashboard/jobDetails.hbs

@@ -75,8 +75,10 @@
 <div class="row">
   <div class="col-sm-4">
     <h5>Permalinks</h5>
+    {{#unless view}}
     <a href="{{ basePath }}/{{ encodeURI queueHost }}/{{ encodeURI queueName }}/{{ encodeURI this.id }}" class="btn btn-info">Job
       {{ this.id }}</a>
+    {{/unless}}
     <a href="{{ basePath }}/{{ encodeURI queueHost }}/{{ encodeURI queueName }}/{{ encodeURI this.id }}?json=true"
       class="btn btn-info">JSON</a>
   </div>
@@ -133,7 +135,36 @@
 
 
 <h5>Data</h5>
-<pre><code class="json">{{json this.data true}}</code></pre>
+
+{{#unless queue.IS_BEE}}
+{{#if view }}
+<div class="panel with-nav-tabs panel-primary">
+  <ul class="nav nav-tabs nav-justified">
+    <li class="active"><a href="#tab1primary" data-toggle="tab">View</a></li>
+    <li><a class="text-white" href="#tab2primary" data-toggle="tab">Edit</a></li>
+  </ul>
+  <div class="panel-body">
+    <div class="tab-content">
+      <div class="tab-pane fade in active" id="tab1primary">
+{{/if}}
+{{/unless}}
+      <pre><code class="json">{{json this.data true}}</code></pre>
+{{#unless queue.IS_BEE}}
+{{#if view }}
+      </div>
+      <div class="tab-pane fade" id="tab2primary">
+        <div class="jsoneditorx" id="jsoneditor" style="height:300px;"></div>
+        <br />
+        <div class="form-inline pull-right">
+          <div class="js-update-job-data btn btn-primary btn-sm" data-queue-host="{{ queueHost }}" data-queue-name="{{ queueName }}"
+            data-job-id="{{ this.id }}">Update</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+{{/if}}
+{{/unless}}
 
 {{#if this.queue.IS_BULLMQ}}
 {{#if this.parent }}