agendash 3.0.0 → 4.0.0

package/History.md

@@ -1,3 +1,15 @@
+# 4.0.0
+
+- Drop support for node 12. Add support for node 18 and MongoDB 5.0.
+- Fastify upgraded to v4. #215
+- Various UI fixes. #212 #203
+- Vulnerability fixes. #220
+- Requeue and Delete job fixes. #226 #227
+
+# 3.1.0
+
+- Add Content-Security-Policy header to all server implementations
+
 # 3.0.0
 
 - BREAKING: Drop support for MongoDB v3.4, only >=v3.6 is supported now.

package/bin/agendash-standalone-fastify.js

@@ -54,7 +54,7 @@ fastify.register(
   })
 );
 
-fastify.listen(program.port, function () {
+fastify.listen({ port: program.port }, function () {
   console.log(
     `Agendash started http://localhost:${program.port}${program.path}`
   );

package/lib/controllers/agendash.js

@@ -42,7 +42,7 @@ module.exports = function (agenda, options) {
 
     if (options.query && options.property) {
       if (options.isObjectId) {
-        preMatch[options.property] = ObjectId(options.query);
+        preMatch[options.property] = new ObjectId(options.query);
       } else if (/^\d+$/.test(options.query)) {
         preMatch[options.property] = Number.parseInt(options.query, 10);
       } else {
@@ -61,6 +61,7 @@ module.exports = function (agenda, options) {
         { $match: preMatch },
         {
           $sort: {
+            repeatInterval: -1,
             nextRunAt: -1,
             lastRunAt: -1,
             lastFinishedAt: -1,
@@ -284,7 +285,7 @@ module.exports = function (agenda, options) {
     const collection = agenda._collection.collection || agenda._collection;
     const jobs = await collection
       .find({
-        _id: { $in: jobIds.map((jobId) => ObjectId(jobId)) },
+        _id: { $in: jobIds.map((jobId) => new ObjectId(jobId)) },
       })
       .toArray();
     if (jobs.length === 0) {
@@ -306,7 +307,7 @@ module.exports = function (agenda, options) {
     }
 
     return agenda.cancel({
-      _id: { $in: jobIds.map((jobId) => ObjectId(jobId)) },
+      _id: { $in: jobIds.map((jobId) => new ObjectId(jobId)) },
     });
   };
 

package/lib/csp.js

@@ -0,0 +1,28 @@
+const CSP = {
+  "default-src": [
+    "'self'",
+  ],
+  "script-src": [
+    "https://code.jquery.com",
+    "https://cdn.jsdelivr.net",
+    "https://cdnjs.cloudflare.com",
+    "https://stackpath.bootstrapcdn.com",
+    "'unsafe-inline'",
+    "'unsafe-eval'",
+    "'self'",
+  ],
+  "style-src": [
+    "https://cdn.jsdelivr.net",
+    "https://stackpath.bootstrapcdn.com",
+    "https://fonts.googleapis.com",
+    "https://unpkg.com",
+    "'self'",
+  ],
+  "font-src": [
+    "https://fonts.gstatic.com",
+  ],
+};
+
+module.exports = Object.entries(CSP)
+    .map(([type, values]) => `${type} ${values.join(" ")}`)
+    .join("; ")

package/lib/middlewares/express.js

@@ -1,12 +1,19 @@
 const path = require("path");
 const express = require("express");
 const bodyParser = require("body-parser");
+const csp = require("../csp");
 
 module.exports = (agendash) => {
   const { api, requeueJobs, deleteJobs, createJob } = agendash;
   const app = express();
   app.use(bodyParser.json());
   app.use(bodyParser.urlencoded({ extended: false }));
+
+  app.use((req, res, next) => {
+    res.header("Content-Security-Policy", csp);
+    next();
+  });
+
   app.use("/", express.static(path.join(__dirname, "../../public")));
 
   app.get("/api", async (request, response) => {

package/lib/middlewares/fastify.js

@@ -1,13 +1,15 @@
 const path = require("path");
+const csp = require("../csp");
 
 module.exports = (agendash) => (instance, opts, done) => {
   const { api, requeueJobs, deleteJobs, createJob } = agendash;
 
-  instance.register(require("fastify-static"), {
+  instance.register(require("@fastify/static"), {
     root: path.join(__dirname, "../../public"),
   });
 
   instance.get("/", function (req, reply) {
+    reply.header("Content-Security-Policy", csp);
     return reply.sendFile("index.html");
   });
 

package/lib/middlewares/hapi.js

@@ -1,11 +1,17 @@
 const path = require("path");
 const pack = require("../../package.json");
+const csp = require("../csp");
 
 module.exports = (agendash) => {
   const { api, requeueJobs, deleteJobs, createJob } = agendash;
   return {
     pkg: pack,
     register: (server, options) => {
+      server.ext("onPreResponse", (req, h) => {
+        req.response.header("Content-Security-Policy", csp);
+        return h.continue;
+      });
+
       server.route([
         {
           method: "GET",

package/lib/middlewares/koa.js

@@ -2,10 +2,16 @@ const path = require("path");
 const bodyParser = require("koa-bodyparser");
 const Router = require("koa-router");
 const koaStatic = require("koa-static");
+const csp = require("../csp");
 
 module.exports = (agendash) => {
   const middlewares = [];
 
+  middlewares.push(async (ctx, next) => {
+    await next();
+    ctx.set("Content-Security-Policy", csp);
+  });
+
   middlewares.push(
     koaStatic(path.resolve(__dirname, "../../public"), { defer: true })
   );

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "agendash",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "description": "A modern dashboard for Agenda.js with Pagination and Search capabilities",
   "main": "app.js",
   "bin": "bin/agendash-standalone.js",
   "engines": {
-    "node": ">=10.0.0"
+    "node": ">=14.0.0"
   },
   "scripts": {
     "test": "run-p lint ava",
@@ -38,19 +38,19 @@
   ],
   "dependencies": {
     "agenda": "^4.2.1",
-    "body-parser": "^1.15.0",
+    "body-parser": "^1.19.2",
     "commander": "^2.9.0",
-    "express": "^4.0.0",
+    "express": "^4.17.3",
     "mongodb": "*",
     "semver": "^7.3.4"
   },
   "devDependencies": {
+    "@fastify/static": "^6.5.0",
     "@hapi/hapi": "^20.2.1",
     "@hapi/inert": "^6.0.5",
     "ava": "3.15.0",
     "eslint": "7.19.0",
-    "fastify": "^3.24.0",
-    "fastify-static": "^4.5.0",
+    "fastify": "^4.9.2",
     "koa": "2.13.1",
     "koa-bodyparser": "4.3.0",
     "koa-router": "10.0.0",

package/public/app/css/styles.css

@@ -122,8 +122,20 @@ code {
   margin: 0 2px;
 }
 
+.job-detail-dialog {
+  max-width: calc(100vw - 1.75rem * 2);
+}
+.modal-body > * {
+  flex: 0 1 auto;
+}
+.modal-body {
+  display: flex;
+  flex-flow: column;
+  max-height: calc(100vh - 195px);
+}
+
 .json-editor {
-  height: 150px;
+  flex: 1 1 auto;
 }
 .card-responsive-title-container {
   display: flex;

package/public/app/js/jobdetail.js

@@ -13,7 +13,7 @@ const jobDetail = Vue.component("job-detail", {
   template: `
   <div class="modal fade" id="modalData" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
       <!-- Modal -->
-    <div class="modal-dialog" role="document">
+    <div class="modal-dialog job-detail-dialog" role="document">
       <div class="modal-content">
         <div class="modal-header">
           <h5 class="modal-title" id="exampleModalLabel">Job Data - {{job.job.name}}</h5>

package/public/app/js/joblist.js

@@ -4,10 +4,10 @@ const jobList = Vue.component("job-list", {
     currentSort: "name",
     currentSortDir: "asc",
   }),
-  props: ["jobs", "pagesize", "pagenumber", "sendClean", "loading"],
+  props: ["jobs", "pagesize", "pagenumber", "totalPages", "sendClean", "loading"],
   computed: {
     sortedJobs: function () {
-      return this.jobs.sort((a, b) => {
+      var sortedJobs = this.jobs.sort((a, b) => {
         let displayA, displayB;
         if (this.currentSort === "name") {
           displayA = a.job[this.currentSort]
@@ -26,6 +26,12 @@ const jobList = Vue.component("job-list", {
         if (displayA > displayB) return 1 * modifier;
         return 0;
       });
+
+      /** Show recurring jobs first */
+      return Array.prototype.concat(
+        sortedJobs.filter(job => job.repeating === true),
+        sortedJobs.filter(job => job.repeating === false),
+      )
     },
   },
   watch: {
@@ -226,14 +232,17 @@ const jobList = Vue.component("job-list", {
             <nav aria-label="Page navigation example">
                 <ul class="pagination">
                   <li class="page-item" :class="pagenumber === 1 ? 'disabled': ''"><a class="page-link" @click="$emit('pagechange', 'prev')">Previous</a></li>
-                  <!-- <li class="page-item" :class="pagenumber === 1 ? 'disabled': ''"><a class="page-link" @click="$emit('pagechange', 'prev')">{{pagenumber -1}}</a></li>
-                  <li class="page-item active"><a class="page-link">{{pagenumber}}</a></li>
-                  <li class="page-item"><a style="cursor:pointer;" class="page-link" @click="$emit('pagechange', 'next')">{{pagenumber +1}}</a></li> -->
-                  <li class="page-item"><a style="cursor:pointer;" class="page-link" @click="$emit('pagechange', 'next')">Next</a></li>
+                  <li class="page-item" :class="pagenumber >= totalPages ? 'disabled': ''"> <a style="cursor:pointer;" class="page-link" @click="$emit('pagechange', 'next')">Next</a> </li>
                 </ul>
               </nav>
             </div>
         </div>
+
+        <div class="row">
+            <div class="col d-flex justify-content-center">
+              Page: {{pagenumber}} / {{totalPages}}
+            </div>
+        </div>
 </div>
   `,
 });

package/public/app/js/main.js

@@ -2,9 +2,10 @@ const app = Vue.component("app", {
   data: () => ({
     jobs: [],
     overview: [],
-    refresh: 60,
+    refresh: 30,
     showDetail: false,
     pagenumber: 1,
+    totalPages: 0,
     showConfirm: false,
     showConfirmMulti: false,
     showConfirmRequeue: false,
@@ -13,7 +14,7 @@ const app = Vue.component("app", {
     jobData: {},
     deletec: false,
     requeuec: false,
-    pagesize: 15,
+    pagesize: 50,
     sendClean: false,
     createc: false,
     property: "",
@@ -66,14 +67,19 @@ const app = Vue.component("app", {
       this.showNewJob = true;
     },
     searchForm(name, search, property, limit, skip, refresh, state, object) {
-      (this.pagesize = limit ? limit : this.pagesize),
-        (this.name = name),
-        (this.search = search),
-        (this.property = property),
-        (this.skip = skip),
-        (this.refresh = refresh),
-        (this.state = state),
-        (this.object = object ? object : this.object),
+      this.pagesize = limit ? limit : this.pagesize
+        this.name = name
+        this.search = search
+        this.property = property
+        this.skip = skip
+        this.refresh = refresh
+        this.state = state
+        this.object = object ? object : this.object
+
+        // Form changed, reset the pagination state
+        this.pagenumber = 1
+        this.totalPages = 1
+
         this.fetchData(
           this.name,
           this.search,
@@ -120,9 +126,9 @@ const app = Vue.component("app", {
       name = "",
       search = "",
       property = "",
-      limit = 15,
+      limit = 50,
       skip = 0,
-      refresh = 60,
+      refresh = 30,
       state = "",
       object
     ) {
@@ -143,6 +149,7 @@ const app = Vue.component("app", {
             this.object = object;
             this.overview = data.overview;
             this.loading = false;
+            this.totalPages = data.totalPages;
           },
           () => {
             this.loading = false;
@@ -229,7 +236,7 @@ const app = Vue.component("app", {
               >
             </sidebar>
           </div>
-          <main role="main" class="col-md-10 ml-sm-auto col-lg-10 px-4">
+          <main role="main" class="col-md-10 ml-sm-auto col-lg-10 px-4 pt-3 pb-5">
             <div class="col-12">
               <topbar v-on:search-form="searchForm"
               :name='name'
@@ -249,6 +256,7 @@ const app = Vue.component("app", {
                   v-on:pagechange="pagechange"
                   :pagesize="pagesize"
                   :pagenumber='pagenumber'
+                  :totalPages='totalPages'
                   :skip="skip"
                   :jobs="jobs"
                   :sendClean='sendClean'

package/public/app/js/sidebar.js

@@ -63,7 +63,7 @@ const sidebar = Vue.component("sidebar", {
     },
   },
   template: `
-    <div class="col sidebar">
+    <div class="col sidebar pt-4">
       <div class="row">
         <div class="col ">
            <button data-toggle="modal" data-target="#modalNewJob" @click="$emit('new-job')" data-placement="top" title="Add a new job" class="btn btn-block btn-outline-success"><i class="oi oi-plus IcoInButton"></i> New Job</button>

package/public/app/js/topbar.js

@@ -4,9 +4,9 @@ const topbar = Vue.component("topbar", {
     // search: '',
     // property: 'data.id',
     // name: '',
-    limit: 15,
+    limit: 50,
     skip: 0,
-    refresh: 60,
+    refresh: 30,
     // state: '',
     object: false,
     stateobject: [