Feature: Group queues in Menu

[ahnwarez]

No description provided.

[felixmosh]

Hi, thank you for this PR.
Can you share how the ui looks?
I'll review the code ASAP

[ahnwarez]

Thanks for your quick reply 🙂

This PR implements #633
I've always wanted to have this feature in Bull-Board where I can see all queues like a tree.

Here are notable things in this PR:

• The user decides how they name their queues and how they are delimited when creating queues and when passing the queues to createBullBoard

const newRegistration = createQueueMQ('Notifications.User.NewRegistration');
const resetPassword = createQueueMQ('Notifications.User.ResetPassword');

createBullBoard({
    queues: [
      new BullMQAdapter(newRegistration, { delimiter: '.' }),
      new BullMQAdapter(resetPassword, { delimiter: '.' }),
    ],
    serverAdapter,
  });

• Expanding and collapsing is done using details and summary tags. All details are expanded by default.
• Added a new React component AppQueueTree to recursively render nodes until a leaf is found.

I welcome any feedback. Thanks to all contributors.

REC-20250102160303.mp4

[felixmosh]

Overall the code looks awsome 🙏🏽
Thank you for this PR, it will implement a much request feature :]

[ahnwarez]

Thank you for your review @felixmosh, really appreciate your feedback.
I've pushed the new changes and addressed your feedback regarding using objects.

[felixmosh]

Im AFK at the weekend, will publish it on Monday.
Thank you 🙏🏽

[felixmosh]

I've noticed a bug, the nav link links to queues final part (which is not the full queue name), therefore, it returns, Queue not found.

I'll fix it.

[felixmosh]

I've improved a bit the design...

[felixmosh]

Thank you for this PR, it released in v6.6.0

[Diluka]

@ahnwarez I don't use delimiter but some prefixes. How can I use this feature?

for examples:

• a-queue-1
• b-queue-1
• b-queue-2
• a-users-update

[felixmosh]

You can try to set the prefix to be a; , b;
Then set the delimiter to be ;

[ahnwarez]

There are optional parameters to set the delimiter and in the example below it's ., so in your case you need to change it to { delimiter: '-'}

  // before
  createBullBoard({
    queues: [
      new BullMQAdapter(exampleBullMq, { delimiter: '.' }),
      new BullAdapter(exampleBull, { delimiter: '.' }),
      new BullMQAdapter(newRegistration, { delimiter: '.' }),
      new BullMQAdapter(resetPassword, { delimiter: ':' }),
    ],
    serverAdapter,
  });

// after 
createBullBoard({
   queues: [
     new BullMQAdapter(exampleBullMq, { delimiter: '-' }),
   ],
   serverAdapter,
 });

I hope this answers your question 🙂

[Diluka]

My queues are named as prefix-the-rest-of-name. the prefix is prefix and the-rest-of-name is the queue name. And I have multiple prefixes.

[andreasciamanna]

This works.

However, with my queues are all wrapped with curly braces (e.g. {my-queue-something}), the look of the grouping is a bit ugly:

As of why I name queues like that, see Hash tags.

Is there an option I can use to handle this case?

[felixmosh]

@andreasciamanna can you open a separate bug?

[andreasciamanna]

@andreasciamanna can you open a separate bug?

Of course.

I wasn't sure if it was a bug or just an option I should set.