diff --git a/lib/karafka/web/ui/public/javascripts/application.js b/lib/karafka/web/ui/public/javascripts/application.js index 374d0fb5..b36dc913 100644 --- a/lib/karafka/web/ui/public/javascripts/application.js +++ b/lib/karafka/web/ui/public/javascripts/application.js @@ -1,3 +1,4 @@ +// Nicer display of time distance from a given event function updateTimeAgo() { var selection = document.querySelectorAll('time'); @@ -7,11 +8,15 @@ function updateTimeAgo() { } } +// To prevent from flickering, the UI is initially hidden and visible when all the JS components +// are fully initialized function displayUi() { var content = document.getElementById('content'); content.style.display = 'inherit'; } +// When using explorer, we can select the desired partition. This code redirects without having +// to press a button after a select function redirectToPartition() { var selector = document.getElementById('current-partition'); @@ -31,8 +36,8 @@ function addListeners() { updateTimeAgo(); redirectToPartition(); manageTabs(); - displayUi(); manageCharts(); + displayUi(); } var ready = (callback) => { diff --git a/lib/karafka/web/ui/public/javascripts/charts.js b/lib/karafka/web/ui/public/javascripts/charts.js index c8b4e29b..3f72b3d0 100644 --- a/lib/karafka/web/ui/public/javascripts/charts.js +++ b/lib/karafka/web/ui/public/javascripts/charts.js @@ -167,7 +167,8 @@ function refreshCharts(new_doc) { { data: datasets[key], label: key, - hidden: disabled_sets.includes(i) + hidden: disabled_sets.includes(i), + borderWidth: 2.5 } ) }) @@ -314,7 +315,8 @@ function renderCharts() { { data: datasets[key], label: key, - hidden: disabled_sets.includes(i) + hidden: disabled_sets.includes(i), + borderWidth: 2.5 } ) }) diff --git a/lib/karafka/web/ui/public/javascripts/live_poll.js b/lib/karafka/web/ui/public/javascripts/live_poll.js index 7580f3d7..207fa7b4 100644 --- a/lib/karafka/web/ui/public/javascripts/live_poll.js +++ b/lib/karafka/web/ui/public/javascripts/live_poll.js @@ -1,7 +1,9 @@ -// inspired by https://github.com/mperham/sidekiq JS code +// Inspired by https://github.com/mperham/sidekiq JS code // // Live polls changes but won't refresh DOM if the payload is the same and will stop polling if // user is selecting anything. +// +// In case of pages with charts, DOM won't be refreshed but charts will be updated var livePollTimer = null; var oldDOM = null; diff --git a/lib/karafka/web/ui/public/javascripts/tabs.js b/lib/karafka/web/ui/public/javascripts/tabs.js index 3e5085ea..34552223 100644 --- a/lib/karafka/web/ui/public/javascripts/tabs.js +++ b/lib/karafka/web/ui/public/javascripts/tabs.js @@ -1,3 +1,8 @@ +// Bootstrap tabs management with local storage for selected tab + restore +// +// Because we have pages where tabs are under the same view and some of them include charts, we +// keep track of them and in case user is back, we restore the last tab that was active + function readAllActiveTabs() { let raw_active_tabs = localStorage.karafkaActiveTabs