Web UI event listeners disappear after page update when live polling is enabled

[gillisd]

Ruby version: 2.7.5
Rails version: 5.2.5
Sidekiq / Pro / Enterprise version(s): 6.3.1 / 5.2.0

Problem

When live poll is enabled in the web UI with an interval of n seconds, the following occur after n seconds have passed:

1. Confirmation to delete a queue is non-existent
2. Select all functionality is broken
3. Search functionality in retry queue is broken

Unfortunately, due to (1), a large job queue was deleted after someone accidentally clicked the delete button next to the queue. The confirmation message never appeared, as the web UI was in "live poll" mode, and the polling interval had passed.

I don't really care about (2) or (3), as they work fine when not in "live poll" mode, but I think (1) is a pretty serious issue, especially because the delete and pause buttons are so close together.

Cause

When live polling is enabled, the following callback is triggered:

function livePollCallback() {
  clearTimeout(livePollTimer);

  fetch(window.location.href).then(resp => resp.text()).then(replacePage).finally(scheduleLivePoll)
}

replacePage is called, causing all event listeners created in ready(() => { to be wiped out, and I don't see them being reinitialized.

---

P.S. thank you for making this software, it has enabled a very small team able to process billions of jobs each year!

[mperham]

I had a suspicion something was wrong with the JS. My JS is very weak, anyone else able to investigate?

…

On Sat, Feb 5, 2022 at 09:09 David Gillis ***@***.***> wrote: Ruby version: 2.7.5 Rails version: 5.2.5 Sidekiq / Pro / Enterprise version(s): 6.3.1 / 5.2.0 Problem When live poll is enabled in the web UI with an interval of n seconds, the following occur after n seconds have passed: 1. Confirmation to delete a queue is non-existent 2. Select all functionality is broken 3. Search functionality in retry queue is broken Unfortunately, due to (1), a large job queue was deleted after someone accidentally clicked the delete button next to the queue. The confirmation message never appeared, as the web UI was in "live poll" mode, and the polling interval had passed. I don't really care about (2) or (3), as they work fine when not in "live poll" mode, but I think (1) is a pretty serious issue, especially because the delete and pause buttons are so close together. Cause When live polling is enabled, the following callback is triggered: function livePollCallback() { clearTimeout(livePollTimer); fetch(window.location.href).then(resp => resp.text()).then(replacePage).finally(scheduleLivePoll)} replacePage is called, causing all event listeners created in ready(() => { to be wiped out, and I don't see them being reinitialized. ------------------------------ P.S. thank you for making this software, it has enabled a very small team able to process billions of jobs each year! — Reply to this email directly, view it on GitHub <#5184>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAAWX2R426Z3JBBJMQP2XDUZVKT3ANCNFSM5NUGBKQA> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[gillisd]

I'll try to come up with something this weekend.

[mperham]

Ping?

[gillisd]

Apologies for not circling back here - if I don't have a PR up by next week, someone else is welcome to take over or you can close it for now.

[excid3]

I think replacePage should call the ready callback so it can setup the listeners on the new DOM elements.

Alternatively, using Stimulus would handle all this seamlessly, but it'd be a bigger change than is probably necessary.

I'll give it a try and see if that does the trick.

[gillisd]

Thanks and nice work @excid3!