feat(queue-list): use accordions by hostId (#691)

Author: roggervalf

README.md

@@ -54,6 +54,10 @@ Arena({
 
   // Optionally include your own script
   customJsPath: 'https://example.com/custom-arena-js.js',
+
+  // Optionally expand a single host on the queues overview page by its `hostId`.
+  // All other hosts start collapsed. When omitted, every host starts collapsed.
+  activeHostId: 'Queue Server 1',
 });
 ```
 
@@ -169,6 +173,7 @@ router.use('/', arena);
 - `basePath` - specify custom path to mount server on (default: '/')
 - `disableListen` - don't let the server listen (useful when mounting Arena as a sub-app of another Express app) (default: false)
 - `useCdn` - set false to use the bundled js and css files (default: true)
+- `activeHostId` - `hostId` of the host to show expanded on the queues overview page; all other hosts start collapsed. Can also be set in `config`. (default: none, every host starts collapsed)
 - `customCssPath` - an URL to an external stylesheet (default: null)
 
 ##### Example config (for bull)

example/bullmq.js

@@ -122,6 +122,7 @@ async function main() {
       ],
     },
     {
+      activeHostId: 'Queue Server 1',
       port: HTTP_SERVER_PORT,
     }
   );

example/docker-compose.yml

@@ -2,6 +2,6 @@ version: '3.2'
 services:
   redis:
     image: redis:7-alpine
-    container_name: cache
+    container_name: cache-arena
     ports:
       - 6379:6379

example/package.json

@@ -20,7 +20,7 @@
     "@fastify/express": "^2.3.0",
     "bee-queue": "^1.4.0",
     "bull": "^4.12.4",
-    "bullmq": "^5.63.0",
+    "bullmq": "^5.64.1",
     "express": "^4.17.1",
     "fastify": "^4.13.0"
   }

example/yarn.lock

@@ -45,10 +45,10 @@
   dependencies:
     fast-deep-equal "^3.1.3"
 
-"@ioredis/commands@^1.1.1":
-  version "1.2.0"
-  resolved "https://registry.npmjs.org/@ioredis/commands/-/commands-1.2.0.tgz"
-  integrity sha512-Sx1pU8EM64o2BrqNpEO1CNLtKQwyhuXuqyfH7oGKCk+1a33d2r5saW8zNwm3j6BTExtjrv2BxTgzzkMwts6vGg==
+"@ioredis/commands@1.4.0":
+  version "1.4.0"
+  resolved "https://registry.npmjs.org/@ioredis/commands/-/commands-1.4.0.tgz"
+  integrity sha512-aFT2yemJJo+TZCmieA7qnYGQooOS7QfNmYrzGtsYd3g9j5iDP8AimYYAesf79ohjbLG12XxC4nG5DyEnC88AsQ==
 
 "@msgpackr-extract/msgpackr-extract-darwin-arm64@3.0.3":
   version "3.0.3"
@@ -208,13 +208,13 @@ bull@^4.12.4:
     semver "^7.5.2"
     uuid "^8.3.0"
 
-bullmq@^5.63.0:
-  version "5.63.0"
-  resolved "https://registry.npmjs.org/bullmq/-/bullmq-5.63.0.tgz"
-  integrity sha512-HT1iM3Jt4bZeg3Ru/MxrOy2iIItxcl1Pz5Ync1Vrot70jBpVguMxFEiSaDU57BwYwR4iwnObDnzct2lirKkX5A==
+bullmq@^5.64.1:
+  version "5.64.1"
+  resolved "https://registry.npmjs.org/bullmq/-/bullmq-5.64.1.tgz"
+  integrity sha512-Tg4ORit8bQ1xLwcQrEfcDpG50pS30Onuz1ZA4rPLbL9QEsOaBbvFQMSEvXSgMnvRZRqDggJoSBGz9tck+1PixQ==
   dependencies:
     cron-parser "^4.9.0"
-    ioredis "^5.4.1"
+    ioredis "^5.8.2"
     msgpackr "^1.11.2"
     node-abort-controller "^3.1.1"
     semver "^7.5.4"
@@ -800,12 +800,12 @@ internal-slot@^1.1.0:
     hasown "^2.0.2"
     side-channel "^1.1.0"
 
-ioredis@^5.3.2, ioredis@^5.4.1:
-  version "5.6.1"
-  resolved "https://registry.npmjs.org/ioredis/-/ioredis-5.6.1.tgz"
-  integrity sha512-UxC0Yv1Y4WRJiGQxQkP0hfdL0/5/6YvdfOOClRgJ0qppSarkhneSa6UvkMkms0AkdGimSH3Ikqm+6mkMmX7vGA==
+ioredis@^5.3.2, ioredis@^5.8.2:
+  version "5.8.2"
+  resolved "https://registry.npmjs.org/ioredis/-/ioredis-5.8.2.tgz"
+  integrity sha512-C6uC+kleiIMmjViJINWk80sOQw5lEzse1ZmvD+S/s8p8CWapftSaC+kocGTx6xrbrJ4WmYQGC08ffHLr6ToR6Q==
   dependencies:
-    "@ioredis/commands" "^1.1.1"
+    "@ioredis/commands" "1.4.0"
     cluster-key-slot "^1.1.0"
     debug "^4.3.4"
     denque "^2.1.0"

index.js

@@ -9,6 +9,13 @@ function run(config, listenOpts = {}) {
   Queues.useCdn =
     typeof listenOpts.useCdn !== 'undefined' ? listenOpts.useCdn : true;
 
+  // Host whose queue list should stay expanded on the overview page; all other
+  // hosts collapse by default. Undefined -> every host collapses.
+  app.locals.activeHostId =
+    typeof listenOpts.activeHostId !== 'undefined'
+      ? listenOpts.activeHostId
+      : config.activeHostId;
+
   if (listenOpts.disableListen) {
     app.locals.appBasePath =
       listenOpts.basePath == '/' ? app.locals.appBasePath : listenOpts.basePath;

src/server/views/dashboard/queueDetails.js

@@ -1,4 +1,3 @@
-const {rest} = require('lodash');
 const QueueHelpers = require('../helpers/queueHelpers');
 
 async function handler(req, res) {

src/server/views/dashboard/queueList.js

@@ -1,11 +1,19 @@
+const _ = require('lodash');
+
 function handler(req, res) {
-  const {Queues, Flows} = req.app.locals;
+  const {Queues, Flows, activeHostId} = req.app.locals;
   const queues = Queues.list();
   const basePath = req.baseUrl;
 
+  const hosts = _.map(_.groupBy(queues, 'hostId'), (queues, hostId) => ({
+    hostId,
+    queues,
+    active: activeHostId === hostId,
+  }));
+
   return res.render('dashboard/templates/queueList', {
     basePath,
-    queues,
+    hosts,
     hasFlows: Flows.hasFlows(),
   });
 }

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

@@ -1,30 +1,34 @@
 <h2>Queues</h2>
 <h3>Overview</h3>
 
-<div class="no-padding">
-  <table id="queueList" class="table">
-    <thead>
-      <th>Host</th>
-      <th>Name</th>
-    </thead>
-    <tbody>
-      {{#each queues}}
-      <tr>
-        <td>{{ this.hostId }}</td>
-        <td><a href="{{ ../basePath }}/{{ encodeURI this.hostId }}/{{ encodeURI this.name }}">{{ this.name }}</a></td>
-      </tr>
-      {{/each}}
-    </tbody>
-  </table>
+<div class="panel-group" id="queueList" role="tablist" aria-multiselectable="true">
+  {{#each hosts}}
+  <div class="panel panel-default">
+    <div class="panel-heading" role="tab" id="host-heading-{{ @index }}">
+      <h4 class="panel-title">
+        <a role="button" data-toggle="collapse" href="#host-collapse-{{ @index }}" aria-expanded="true"
+          aria-controls="host-collapse-{{ @index }}">
+          {{ this.hostId }} <span class="badge">{{ this.queues.length }}</span>
+        </a>
+      </h4>
+    </div>
+    <div id="host-collapse-{{ @index }}" class="panel-collapse collapse{{#if this.active}} in{{/if}}" role="tabpanel"
+      aria-labelledby="host-heading-{{ @index }}">
+      <ul class="list-group">
+        {{#each this.queues}}
+        <li class="list-group-item">
+          <a href="{{ ../../basePath }}/{{ encodeURI this.hostId }}/{{ encodeURI this.name }}">{{ this.name }}</a>
+        </li>
+        {{/each}}
+      </ul>
+    </div>
+  </div>
+  {{/each}}
 </div>
 
 {{#contentFor 'sidebar'}}
 <li class="active"><a href="#">Queues Overview</a></li>
 {{#if hasFlows}}
 <li><a href="{{ basePath }}/flows">Flows Overview</a></li>
 {{/if}}
-{{/contentFor}}
-
-{{#contentFor 'script'}}
-new Tablesort(document.getElementById('queueList'));
 {{/contentFor}}