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

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 }}