karafka-web 0.10.1 → 0.10.3

data/lib/karafka/web/pro/ui/views/shared/_navigation.erb

@@ -1,14 +1,15 @@
 <nav class="sidebar-nav">
   <%== partial 'shared/brand' %>
+  <%== partial 'shared/branding/label' %>
 
-  <ul class="menu">
+  <ul class="menu grow">
     <li>
       <a
         class="sidebar-nav-item <%= nav_class(start_with: '/dashboard') %>"
         href="<%= root_path('dashboard') %>"
       >
         <%== icon(:home) %>
-        Dashboard
+        <span class="sidebar-nav-item-label">Dashboard</span>
       </a>
     </li>
 
@@ -18,7 +19,7 @@
         href="<%= root_path('consumers') %>"
       >
         <%== icon(:cpu) %>
-        Consumers
+        <span class="sidebar-nav-item-label">Consumers</span>
       </a>
     </li>
 
@@ -28,7 +29,7 @@
         href="<%= root_path('jobs/running') %>"
       >
         <%== icon(:arrow_on_squares) %>
-        Jobs
+        <span class="sidebar-nav-item-label">Jobs</span>
       </a>
     </li>
 
@@ -38,7 +39,7 @@
         href="<%= root_path('health/overview') %>"
       >
         <%== icon(:heart) %>
-        Health
+        <span class="sidebar-nav-item-label">Health</span>
       </a>
     </li>
 
@@ -48,7 +49,7 @@
         href="<%= root_path('routing') %>"
       >
         <%== icon(:queue_list) %>
-        Routing
+        <span class="sidebar-nav-item-label">Routing</span>
       </a>
     </li>
 
@@ -58,7 +59,7 @@
         href="<%= root_path('explorer') %>"
       >
         <%== icon(:document_glass) %>
-        Explorer
+        <span class="sidebar-nav-item-label">Explorer</span>
       </a>
     </li>
 
@@ -68,7 +69,17 @@
         href="<%= root_path('recurring_tasks') %>"
       >
         <%== icon(:arrow_path_rounded) %>
-        Cron
+        <span class="sidebar-nav-item-label">Cron</span>
+      </a>
+    </li>
+
+    <li>
+      <a
+        class="sidebar-nav-item <%= nav_class(start_with: '/scheduled_messages') %>"
+        href="<%= root_path('scheduled_messages') %>"
+      >
+        <%== icon(:calendar) %>
+        <span class="sidebar-nav-item-label">Schedules</span>
       </a>
     </li>
 
@@ -78,7 +89,7 @@
         href="<%= root_path('errors') %>"
       >
         <%== icon(:bug) %>
-        Errors
+        <span class="sidebar-nav-item-label">Errors</span>
       </a>
     </li>
 
@@ -88,7 +99,7 @@
         href="<%= root_path('dlq') %>"
       >
         <%== icon(:x_circle) %>
-        Dead
+        <span class="sidebar-nav-item-label">Dead</span>
       </a>
     </li>
 
@@ -98,7 +109,7 @@
         href="<%= root_path('cluster') %>"
       >
         <%== icon(:blocks) %>
-        Cluster
+        <span class="sidebar-nav-item-label">Cluster</span>
       </a>
     </li>
 
@@ -108,7 +119,7 @@
         href="<%= root_path('topics') %>"
       >
         <%== icon(:list_bullets) %>
-        Topics
+        <span class="sidebar-nav-item-label">Topics</span>
       </a>
     </li>
 
@@ -118,7 +129,7 @@
         href="<%= root_path('status') %>"
       >
         <%== icon(:check_badge) %>
-        Status
+        <span class="sidebar-nav-item-label">Status</span>
       </a>
     </li>
 
@@ -128,8 +139,12 @@
         href="<%= root_path('support') %>"
       >
         <%== icon(:lifebuoy) %>
-        Support
+        <span class="sidebar-nav-item-label">Support</span>
       </a>
     </li>
   </ul>
+
+  <button type="button" class="btn-toggle-nav-collapsed grid gap-2 grid-flow-col items-center justify-start ml-6 text-sm invisible lg:visible" data-toggle-target="drawer-side">
+    <%== icon(:chevron) %>
+  </button>
 </nav>

data/lib/karafka/web/pro/ui/views/shared/branding/_label.erb

@@ -0,0 +1,20 @@
+<% branding_cfg = Karafka::Web.config.ui.branding %>
+<% if branding_cfg.label %>
+  <div class="branding-label text-left mt-4 ml-6">
+    <%==
+      public_send(
+        :"badge_#{branding_cfg.type}",
+        branding_cfg.label
+      )
+    %>
+  </div>
+
+  <div class="branding-mark text-left mt-4 ml-6">
+    <%==
+      public_send(
+        :"badge_#{branding_cfg.type}",
+        branding_cfg.label[0]
+      )
+    %>
+  </div>
+<% end %>

data/lib/karafka/web/pro/ui/views/shared/branding/_notice.erb

@@ -0,0 +1,13 @@
+<% branding_cfg = Karafka::Web.config.ui.branding %>
+<% if branding_cfg.notice %>
+  <div id="branding" class="col-span-12">
+    <div class="mb-3">
+      <%==
+        public_send(
+          :"alert_#{branding_cfg.type}",
+          branding_cfg.notice
+        )
+      %>
+    </div>
+  </div>
+<% end %>

data/lib/karafka/web/tracking/consumers/listeners/errors.rb

@@ -73,7 +73,9 @@ module Karafka
                 partition: consumer.partition,
                 first_offset: consumer.messages.metadata.first_offset,
                 last_offset: consumer.messages.metadata.last_offset,
-                committed_offset: consumer.coordinator.seek_offset - 1,
+                # We set it to -1000 if non-existent because after subtracting one, we will end up
+                # with -1001, which is "N/A" offset position for all the offsets here
+                committed_offset: (consumer.coordinator.seek_offset || -1_000) - 1,
                 consumer: consumer.class.to_s,
                 tags: consumer.tags
               }

data/lib/karafka/web/ui/base.rb

@@ -133,7 +133,7 @@ module Karafka
         # @param query_data [Hash] query params we want to add to the current path
         path :current do |query_data = {}|
           # Merge existing request parameters with new query data
-          merged_params = request.params.deep_merge(query_data)
+          merged_params = deep_merge(request.params, query_data)
 
           # Flatten the merged parameters
           flattened_params = flatten_params('', merged_params)

data/lib/karafka/web/ui/controllers/base_controller.rb

@@ -28,13 +28,28 @@ module Karafka
 
           # Builds the render data object with assigned attributes based on instance variables.
           #
+          # @param attributes [Hash] attributes coming from the outside (in case of rebind)
           # @return [Responses::Render] data that should be used to render appropriate view
-          def render
-            attributes = {}
+          def render(attributes: {})
+            attributes = attributes.dup
+
+            full_parts = self.class.to_s.split('::')
+            separator = full_parts.index('Controllers')
+            base = full_parts[(separator + 1)..]
+
+            base.map!.with_index do |path_part, index|
+              if index == (base.size - 1)
+                path_part.gsub(/(.)([A-Z])/, '\1_\2').downcase.gsub('_controller', '')
+              else
+                path_part.gsub(/(.)([A-Z])/, '\1_\2').downcase
+              end
+            end
 
-            scope = self.class.to_s.split('::').last.gsub(/(.)([A-Z])/, '\1_\2').downcase.gsub('_controller', '')
+            scope = base.join('/')
             action = caller_locations(1, 1)[0].label.split('#').last
 
+            attributes[:breadcrums_scope] = scope
+
             instance_variables.each do |iv|
               next if iv.to_s.start_with?('@_')
               next if iv.to_s.start_with?('@params')

data/lib/karafka/web/ui/helpers/application_helper.rb

@@ -50,13 +50,6 @@ module Karafka
             object.to_s.include?('#<') ? object.class.to_s : object.to_s
           end
 
-          # Renders per scope breadcrumbs
-          def render_breadcrumbs
-            scope = request.path.delete_prefix(root_path).split('/')[0]
-
-            render "#{scope}/_breadcrumbs"
-          end
-
           # Takes a status and recommends background style color
           #
           # @param status [String] status
@@ -376,6 +369,27 @@ module Karafka
           def icon(name)
             render "shared/icons/_#{name}"
           end
+
+          # Merges two hashes deeply, combining nested hashes recursively.
+          #
+          # @param hash1 [Hash] The first hash to merge.
+          # @param hash2 [Hash] The second hash to merge.
+          # @return [Hash] A new hash that is the result of a deep merge of the two provided hashes.
+          def deep_merge(hash1, hash2)
+            merged_hash = hash1.dup
+
+            hash2.each_pair do |k, v|
+              tv = merged_hash[k]
+
+              merged_hash[k] = if tv.is_a?(Hash) && v.is_a?(Hash)
+                                 deep_merge(tv, v)
+                               else
+                                 v
+                               end
+            end
+
+            merged_hash
+          end
         end
       end
     end

data/lib/karafka/web/ui/helpers/paths_helper.rb

@@ -65,6 +65,24 @@ module Karafka
           def explorer_path(topic_name = nil, partition_id = nil, offset = nil, action = nil)
             root_path(*['explorer', topic_name, partition_id, offset, action].compact)
           end
+
+          # Helps build scheduled messages paths.
+          # Similar to the explorer helper one
+          # @param topic_name [String]
+          # @param partition_id [Integer, nil]
+          # @param offset [Integer, nil]
+          # @param action [String, nil]
+          # @return [String] path to the expected location
+          def scheduled_messages_explorer_path(
+            topic_name = nil,
+            partition_id = nil,
+            offset = nil,
+            action = nil
+          )
+            root_path(
+              *['scheduled_messages', 'explorer', topic_name, partition_id, offset, action].compact
+            )
+          end
         end
       end
     end

data/lib/karafka/web/ui/helpers/tailwind_helper.rb

@@ -34,9 +34,10 @@ module Karafka
           # @param name [String] button name
           # @param path [String] path to where to go
           # @param classes [String] extra css classes
+          # @param title [String, nil] title (if any)
           # @return [String] button link html
-          def link_button(name, path, classes: '')
-            %(<a href="#{path}" class="btn #{classes}">#{name}</a>)
+          def link_button(name, path, classes: '', title: nil)
+            %(<a href="#{path}" class="btn #{classes}" title="#{title}">#{name}</a>)
           end
 
           # Defines various methods for badges and links that simplify defining them without
@@ -54,8 +55,8 @@ module Karafka
               link_button(name, path, classes: "#{classes} btn-#{type}")
             end
 
-            define_method :"link_button_#{type}_sm" do |name, path, classes: ''|
-              link_button(name, path, classes: "#{classes} btn-#{type} btn-sm")
+            define_method :"link_button_#{type}_sm" do |name, path, classes: '', title: nil|
+              link_button(name, path, classes: "#{classes} btn-#{type} btn-sm", title: title)
             end
 
             # @param message [String] alert message

data/lib/karafka/web/ui/models/recurring_tasks/log.rb

@@ -1,16 +1,5 @@
 # frozen_string_literal: true
 
-# This Karafka component is a Pro component under a commercial license.
-# This Karafka component is NOT licensed under LGPL.
-#
-# All of the commercial components are present in the lib/karafka/pro directory of this
-# repository and their usage requires commercial license agreement.
-#
-# Karafka has also commercial-friendly license, commercial support and commercial components.
-#
-# By sending a pull request to the pro components, you are agreeing to transfer the copyright of
-# your code to Maciej Mensfeld.
-
 module Karafka
   module Web
     module Ui

data/lib/karafka/web/ui/models/recurring_tasks/schedule.rb

@@ -1,16 +1,5 @@
 # frozen_string_literal: true
 
-# This Karafka component is a Pro component under a commercial license.
-# This Karafka component is NOT licensed under LGPL.
-#
-# All of the commercial components are present in the lib/karafka/pro directory of this
-# repository and their usage requires commercial license agreement.
-#
-# Karafka has also commercial-friendly license, commercial support and commercial components.
-#
-# By sending a pull request to the pro components, you are agreeing to transfer the copyright of
-# your code to Maciej Mensfeld.
-
 module Karafka
   module Web
     module Ui

data/lib/karafka/web/ui/models/recurring_tasks/task.rb

@@ -1,16 +1,5 @@
 # frozen_string_literal: true
 
-# This Karafka component is a Pro component under a commercial license.
-# This Karafka component is NOT licensed under LGPL.
-#
-# All of the commercial components are present in the lib/karafka/pro directory of this
-# repository and their usage requires commercial license agreement.
-#
-# Karafka has also commercial-friendly license, commercial support and commercial components.
-#
-# By sending a pull request to the pro components, you are agreeing to transfer the copyright of
-# your code to Maciej Mensfeld.
-
 module Karafka
   module Web
     module Ui

data/lib/karafka/web/ui/public/javascripts/application.js

@@ -110,6 +110,7 @@ function addListeners() {
   loadOffsetLookupDatePicker();
 
   new BtnToggleManager();
+  new BtnToggleManager('.btn-toggle-nav-collapsed', 'collapsed');
   new ThemeManager();
 
   refreshTitle()

data/lib/karafka/web/ui/public/javascripts/application.min.js

@@ -51,14 +51,14 @@ function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"f
 /*! Source: lib/karafka/web/ui/public/javascripts/charts/data_formatting_utility.js */
 let DataFormattingUtils={niceBytes(e,t=2){let i=0,s=parseInt(e,10)||0;for(;1024<=s&&++i;)s/=1024;return s.toFixed(s<10&&0<i?1:t)+" "+["bytes","KB","MB","GB","TB","PB","EB","ZB","YB"][i]},formatLabelX(e,t){return"date"!==t?e:("00"+((t=new Date(1e3*e)).getMonth()+1)).slice(-2)+"/"+("00"+t.getDate()).slice(-2)+"/"+t.getFullYear()+" "+("00"+t.getHours()).slice(-2)+":"+("00"+t.getMinutes()).slice(-2)+":"+("00"+t.getSeconds()).slice(-2)},formatTooltip(e,t){var i=t.parsed.y,s=t.dataset.label;switch(e){case"percentage":return Math.floor(i)===i?s+": "+i+" %":s+": "+Math.round(100*i)/100+" %";case"memory":return s+": "+DataFormattingUtils.niceBytes(1024*i,2);default:return t.yLabel}},formatLabelY(e,t){switch(e){case"percentage":return Math.floor(t)===t?t+"%":Math.round(100*t)/100+"%";case"memory":return DataFormattingUtils.niceBytes(1024*t,1);default:return Math.floor(t)===t?t:Math.round(100*t)/100}},isFractionalPrecision(e){return e!==Math.floor(e)}};
 /*! Source: lib/karafka/web/ui/public/javascripts/charts/dataset_state_manager.js */class DatasetStateManager{constructor(){this.storageKey="karafkaDisabledDatasets"}readAll(){var e=localStorage.getItem(this.storageKey);return e?JSON.parse(e):{}}saveAll(e){localStorage.setItem(this.storageKey,JSON.stringify(e))}saveCurrent(){var e=document.querySelectorAll(".chartjs"),t=window.location.href.split("?")[0];let i={};var s=this.readAll();e.forEach(e=>{var e=e.id,t=Chart.getChart(e);t&&t.legend&&t.legend.legendItems&&0<(t=t.legend.legendItems.map((e,t)=>e.hidden?t:null).filter(e=>null!==e)).length&&(i[e]=t)}),s[t]=i,this.saveAll(s)}getCurrentChart(e){var t=window.location.href.split("?")[0];return(this.readAll()[t]||{})[e]||[]}}
-/*! Source: lib/karafka/web/ui/public/javascripts/components/btn_toggle_manager.js */class BtnToggleManager{constructor(){this.init()}init(){document.querySelectorAll(".btn-toggle").forEach(t=>{let i=t.getAttribute("data-toggle-target"),s=document.getElementById(i);s&&(this.restoreVisibility(t,s),t.addEventListener("click",()=>{var e=!s.classList.contains("hidden");s.classList.toggle("hidden"),t.classList.toggle("active",!e),this.saveVisibility(i,!e)}))})}saveVisibility(e,t){localStorage.setItem(e+"_visibility",t)}restoreVisibility(e,t){var i=localStorage.getItem(t.id+"_visibility"),i=i?"true"===i:!t.classList.contains("hidden");t.classList.toggle("hidden",!i),e.classList.toggle("active",i)}}
+/*! Source: lib/karafka/web/ui/public/javascripts/components/btn_toggle_manager.js */class BtnToggleManager{constructor(e=".btn-toggle",t="hidden"){this.btnClass=e,this.visibilityClass=t,this.init()}init(){document.querySelectorAll(this.btnClass).forEach(t=>{let i=t.getAttribute("data-toggle-target"),s=document.getElementById(i);s&&(this.restoreVisibility(t,s),t.addEventListener("click",()=>{var e=!s.classList.contains(this.visibilityClass);s.classList.toggle(this.visibilityClass),t.classList.toggle("active",!e),this.saveVisibility(i,!e)}))})}saveVisibility(e,t){localStorage.setItem(e+"_visibility",t)}restoreVisibility(e,t){var i=localStorage.getItem(t.id+"_visibility"),i=i?"true"===i:!t.classList.contains(this.visibilityClass);t.classList.toggle(this.visibilityClass,!i),e.classList.toggle("active",i)}}
 /*! Source: lib/karafka/web/ui/public/javascripts/components/charts.js */function refreshCharts(e){(new LineChartsManager).refreshAndRender(e,!0),(new BarChartManager).refreshAndRenderBarCharts(e,!0)}function manageCharts(){(new LineChartsManager).refreshAndRender(document,!1),(new BarChartManager).refreshAndRenderBarCharts(document,!1)}
-/*! Source: lib/karafka/web/ui/public/javascripts/components/live_poll.js */var livePollTimer=null,oldDOM=null,datePicker=null,startURL=window.location.href;let isHoveringOverClickable=!1;function initLivePolling(){document.addEventListener("mouseover",function(e){isElementClickable(e.target)&&(isHoveringOverClickable=!0)}),document.addEventListener("mouseout",function(e){isElementClickable(e.target)&&(isHoveringOverClickable=!1)}),null==localStorage.karafkaLivePoll&&(localStorage.karafkaLivePoll="enabled")}function isElementClickable(e){return!!("A"===e.tagName||"BUTTON"===e.tagName||"INPUT"===e.tagName&&("button"===e.type||"submit"===e.type)||e.hasAttribute("onclick")||"function"==typeof e.onclick||"SPAN"===e.tagName&&e.closest(".tab-container"))}function isUserHoveringOverClickable(){return isHoveringOverClickable}function isAnyTextSelected(){var e="";return void 0!==window.getSelection?e=window.getSelection().toString():void 0!==document.selection&&"Text"==document.selection.type&&(e=document.selection.createRange().text),""!=e}function isCollapsingHappening(){return 0<document.querySelectorAll(".collapsing").length}function isPollingPossible(e=!1){return!isUserHoveringOverClickable()&&!isAnyTextSelected()&&!(isOffsetLookupCalendarVisible()||isAnyModalOpen()||isCollapsingHappening()||isTurboOperating()||e&&startURL!=window.location.href)}function isAnyModalOpen(){var e;for(e of document.querySelectorAll("dialog"))if(e.open)return!0;return!1}function bindPollingButtonClick(){var e=document.getElementById("live-poll");null!=e&&e.addEventListener("click",handleLivePollingButtonClick)}function handleLivePollingButtonClick(){toggleLivePollState(),setLivePollButton(),setPollingListener()}function toggleLivePollState(){"enabled"==localStorage.karafkaLivePoll?localStorage.karafkaLivePoll="disabled":localStorage.karafkaLivePoll="enabled"}function setLivePollButton(){null!=(selector=document.getElementById("live-poll"))&&("enabled"==localStorage.karafkaLivePoll?(selector.classList.add("text-base-content"),selector.classList.remove("text-gray-500")):(selector.classList.add("text-gray-500"),selector.classList.remove("text-base-content")))}function checkResponse(e){if(e.ok)return e;throw e}function refreshPage(e){if(!isPollingPossible())return!1;var t,e=(new DOMParser).parseFromString(e,"text/html"),i=e.getElementById("content");oldDOM!=i.innerHTML&&(t=document.querySelectorAll(".chartjs").length,0==i.querySelectorAll(".chartjs").length||0==t?(document.getElementById("content").replaceWith(i),addListeners()):(t=e.getElementById("refreshable"),document.getElementById("refreshable").replaceWith(t),refreshCharts(e)),oldDOM=i.innerHTML)}function showError(e){console.error(e)}function scheduleLivePoll(){null==oldDOM&&(oldDOM=document.getElementById("content").innerHTML);let e=parseInt(localStorage.karafkaTimeInterval)||5e3;e<1e3&&(localStorage.karafkaTimeInterval=5e3,e=5e3),livePollTimer=setTimeout(livePollCallback,e)}function livePollCallback(){clearTimeout(livePollTimer),livePollTimer=null,isPollingPossible(!1)?(startURL=window.location.href,fetch(window.location.href).then(checkResponse).then(e=>e.text()).then(refreshPage).catch(showError).finally(setPollingListener)):setPollingListener()}function setPollingListener(){var e=document.getElementById("live-poll"),t=localStorage.karafkaLivePoll;"disabled"==t||null==t||null==e?(clearTimeout(livePollTimer),livePollTimer=null):(clearTimeout(livePollTimer),scheduleLivePoll())}
+/*! Source: lib/karafka/web/ui/public/javascripts/components/live_poll.js */var livePollTimer=null,oldDOM=null,datePicker=null,startURL=window.location.href;let isHoveringOverClickable=!1;function initLivePolling(){document.addEventListener("mouseover",function(e){isElementClickable(e.target)&&(isHoveringOverClickable=!0)}),document.addEventListener("mouseout",function(e){isElementClickable(e.target)&&(isHoveringOverClickable=!1)}),null==localStorage.karafkaLivePoll&&(localStorage.karafkaLivePoll="enabled")}function isFormActive(){var e=document.activeElement;return["INPUT","TEXTAREA","SELECT","BUTTON","FIELDSET"].includes(e.tagName)}function isElementClickable(e){return!!("A"===e.tagName||"BUTTON"===e.tagName||"INPUT"===e.tagName&&("button"===e.type||"submit"===e.type)||e.hasAttribute("onclick")||"function"==typeof e.onclick||"SPAN"===e.tagName&&e.closest(".tab-container")||e.closest("button")||e.closest("a"))}function isUserHoveringOverClickable(){return isHoveringOverClickable}function isAnyTextSelected(){var e="";return void 0!==window.getSelection?e=window.getSelection().toString():void 0!==document.selection&&"Text"==document.selection.type&&(e=document.selection.createRange().text),""!=e}function isCollapsingHappening(){return 0<document.querySelectorAll(".collapsing").length}function isPollingPossible(e=!1){return!(isFormActive()||isUserHoveringOverClickable()||isAnyTextSelected()||isOffsetLookupCalendarVisible()||isAnyModalOpen()||isCollapsingHappening()||isTurboOperating()||e&&startURL!=window.location.href)}function isAnyModalOpen(){var e;for(e of document.querySelectorAll("dialog"))if(e.open)return!0;return!1}function bindPollingButtonClick(){var e=document.getElementById("live-poll");null!=e&&e.addEventListener("click",handleLivePollingButtonClick)}function handleLivePollingButtonClick(){toggleLivePollState(),setLivePollButton(),setPollingListener()}function toggleLivePollState(){"enabled"==localStorage.karafkaLivePoll?localStorage.karafkaLivePoll="disabled":localStorage.karafkaLivePoll="enabled"}function setLivePollButton(){null!=(selector=document.getElementById("live-poll"))&&("enabled"==localStorage.karafkaLivePoll?(selector.classList.add("text-base-content"),selector.classList.remove("text-gray-500")):(selector.classList.add("text-gray-500"),selector.classList.remove("text-base-content")))}function checkResponse(e){if(e.ok)return e;throw e}function refreshPage(e){if(!isPollingPossible())return!1;var t,e=(new DOMParser).parseFromString(e,"text/html"),i=e.getElementById("content");oldDOM!=i.innerHTML&&(t=document.querySelectorAll(".chartjs").length,0==i.querySelectorAll(".chartjs").length||0==t?(document.getElementById("content").replaceWith(i),addListeners()):(t=e.getElementById("refreshable"),document.getElementById("refreshable").replaceWith(t),refreshCharts(e)),oldDOM=i.innerHTML)}function showError(e){console.error(e)}function scheduleLivePoll(){null==oldDOM&&(oldDOM=document.getElementById("content").innerHTML);let e=parseInt(localStorage.karafkaTimeInterval)||5e3;e<1e3&&(localStorage.karafkaTimeInterval=5e3,e=5e3),livePollTimer=setTimeout(livePollCallback,e)}function livePollCallback(){clearTimeout(livePollTimer),livePollTimer=null,isPollingPossible(!1)?(startURL=window.location.href,fetch(window.location.href).then(checkResponse).then(e=>e.text()).then(refreshPage).catch(showError).finally(setPollingListener)):setPollingListener()}function setPollingListener(){var e=document.getElementById("live-poll"),t=localStorage.karafkaLivePoll;"disabled"==t||null==t||null==e?(clearTimeout(livePollTimer),livePollTimer=null):(clearTimeout(livePollTimer),scheduleLivePoll())}
 /*! Source: lib/karafka/web/ui/public/javascripts/components/offset_datetime.js */function loadOffsetLookupDatePicker(){var e={locale:{days:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],daysShort:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],daysMin:["Su","Mo","Tu","We","Th","Fr","Sa"],months:["January","February","March","April","May","June","July","August","September","October","November","December"],monthsShort:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],today:"Today",clear:"Clear",dateFormat:"yyyy-MM-dd",timeFormat:"HH:mm",firstDay:1},timepicker:!0,onSelect:({})=>{document.getElementById("offset-lookup-datepicker").value=""},onShow:function(){offsetLookupDatePicker.selectDate((new Date).getTime()),offsetLookupDatePicker.maxDate=new Date},onHide:function(){offsetLookupDatePicker.selectDate((new Date).getTime())},buttons:[{content(e){return"Go to offset"},onClick(e){var t=e.selectedDates[0]||new Date,i=e.$el.dataset.target;e.hide(),location.href=i+"/"+formatRedirectDateTime(t)}}]};null!=offsetLookupDatePicker&&offsetLookupDatePicker.destroy(),null!=document.getElementById("offset-lookup-datepicker")&&((offsetLookupDatePicker=new AirDatepicker("#offset-lookup-datepicker",e)).maxDate=new Date,offsetLookupDatePicker.selectDate((new Date).getTime()))}function formatRedirectDateTime(e){return e.getFullYear()+`-${String(e.getMonth()+1).padStart(2,"0")}-${String(e.getDate()).padStart(2,"0")}/${String(e.getHours()).padStart(2,"0")}:`+String(e.getMinutes()).padStart(2,"0")}function isOffsetLookupCalendarVisible(){return null!=offsetLookupDatePicker&&offsetLookupDatePicker.visible}
 /*! Source: lib/karafka/web/ui/public/javascripts/components/search.js */offsetLookupDatePicker=null;class SearchModalManager{constructor(){this.init()}init(){var t=document.getElementById("offset-input");if(!t)return!1;var i=document.getElementById("offset-timestamp-input"),e=document.querySelectorAll('input[name="search[offset_type]"]'),s=document.getElementById("no-search-criteria"),r=document.getElementById("search-form-errors");e.forEach(function(e){e.addEventListener("change",function(){t.disabled=!document.getElementById("offset-value").checked,t.required=document.getElementById("offset-value").checked,i.disabled=!document.getElementById("offset-timestamp").checked,i.required=document.getElementById("offset-timestamp").checked})}),t.disabled=!document.getElementById("offset-value").checked,t.required=document.getElementById("offset-value").checked,i.disabled=!document.getElementById("offset-timestamp").checked,i.required=document.getElementById("offset-timestamp").checked,document.getElementById("show-search-modal").addEventListener("click",function(){document.getElementById("messages_search_modal").showModal();var e=document.querySelector('#messages_search_modal input[type="text"]');e&&e.focus()}),(s||r)&&(document.getElementById("messages_search_modal").showModal(),e=document.querySelector('#messages_search_modal input[type="text"]'))&&e.focus()}}class SearchMetadataVisibilityManager{constructor(){this.storageKey="karafkaSearchMetadataVisibility",this.metadataElement=document.getElementById("search-metadata-details"),this.toggleButton=document.getElementById("toggle-search-metadata"),this.metadataElement&&this.init()}init(){this.restoreVisibility(),self=this;var t=document.getElementById("toggle-search-metadata");t.addEventListener("click",function(){var e=document.getElementById("search-metadata-details");e.classList.toggle("hidden"),t.classList.toggle("active"),self.saveVisibility(!e.classList.contains("hidden"))})}readVisibility(){return"true"===localStorage.getItem(this.storageKey)}saveVisibility(e){localStorage.setItem(this.storageKey,e)}restoreVisibility(){this.readVisibility()&&(document.getElementById("toggle-search-metadata").classList.add("active"),document.getElementById("search-metadata-details").classList.remove("hidden"))}}
 /*! Source: lib/karafka/web/ui/public/javascripts/components/tabs_manager.js */class TabsManager{constructor(){this.storageKey="karafkaActiveTabsv2"}readAllActiveTabs(){var e=localStorage.getItem(this.storageKey);return e?JSON.parse(e):{}}saveAllActiveTabs(e){localStorage.setItem(this.storageKey,JSON.stringify(e))}saveCurrentActiveTabs(){var e=document.querySelectorAll(".inline-tabs > .active"),t=window.location.href.split("?")[0];let i=[];var s=this.readAllActiveTabs();e.forEach(e=>{i.push(e.id)}),s[t]=i,this.saveAllActiveTabs(s)}setActiveTabs(){var e=window.location.href.split("?")[0],e=this.readAllActiveTabs()[e];(e=e||Array.from(document.querySelectorAll(".inline-tabs > .active")).map(e=>e.id))&&e.forEach(e=>{e=document.getElementById(e);e&&(e.parentElement.querySelectorAll(".custom-tab").forEach(function(e){e.classList.remove("active")}),e.classList.add("active"),document.getElementById(e.getAttribute("data-target")).classList.remove("hidden"))})}manageTabs(){this.setActiveTabs();var t=this;document.querySelectorAll(".inline-tabs > .custom-tab").forEach(function(e){e.addEventListener("click",function(e){this.parentElement.querySelectorAll(".custom-tab").forEach(function(e){e.classList.remove("active");e=e.getAttribute("data-target");document.getElementById(e).classList.add("hidden")}),this.classList.add("active"),t.saveCurrentActiveTabs(),t.setActiveTabs()})})}}
 /*! Source: lib/karafka/web/ui/public/javascripts/components/theme_manager.js */class ThemeManager{constructor(){this.themeSelectorButton=document.getElementById("theme-selector"),this.themeSelectorLight=document.getElementById("theme-selector-light"),this.themeSelectorDark=document.getElementById("theme-selector-dark"),this.init()}init(){this.lightThemeLink=document.querySelector(".highlight-light"),this.darkThemeLink=document.querySelector(".highlight-dark"),this.lightThemeLink&&this.darkThemeLink&&this.themeSelectorButton?(this.restoreTheme(),this.bindThemeSelectorButton()):console.error("Theme CSS links or theme selector button not found")}bindThemeSelectorButton(){this.themeSelectorButton&&!this.themeSelectorButton.dataset.bound&&(this.themeSelectorButton.addEventListener("click",()=>{this.toggleTheme()}),this.themeSelectorButton.dataset.bound="true")}setTheme(e){document.documentElement.setAttribute("data-theme",e),"dark"===e?(this.lightThemeLink.disabled=!0,this.darkThemeLink.disabled=!1,this.themeSelectorLight.classList.add("hidden"),this.themeSelectorDark.classList.remove("hidden")):(this.lightThemeLink.disabled=!1,this.darkThemeLink.disabled=!0,this.themeSelectorLight.classList.remove("hidden"),this.themeSelectorDark.classList.add("hidden")),localStorage.setItem("theme",e)}toggleTheme(){var e=document.documentElement.getAttribute("data-theme");this.setTheme("dark"===e?"corporate":"dark")}restoreTheme(){var e=localStorage.getItem("theme"),e=e||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"corporate");this.setTheme(e),window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",e=>{localStorage.getItem("theme")||this.setTheme(e.matches?"dark":"corporate")})}}
 /*! Source: lib/karafka/web/ui/public/javascripts/components/turbo_tracker.js */let turboIsOperating=!1;function isTurboOperating(){return turboIsOperating}
-/*! Source: lib/karafka/web/ui/public/javascripts/application.js */function updateTimeAgo(){0!=(e=document.querySelectorAll("time")).length&&(timeago.render(e),timeago.cancel());for(var e=document.getElementsByClassName("time-title"),t=0;t<e.length;t++){var i=e[t],s=i.getAttribute("title");i.setAttribute("title",timeago.format(s))}}function refreshTitle(){var e=document.querySelectorAll(".breadcrumbs a"),e=Array.from(e).slice(1).map(e=>e.textContent.trim());0<e.length?document.title=e.join(" > ")+" - Karafka Web UI":document.title="Karafka Web UI"}function redirectToPartition(){var e=document.getElementById("current-partition");null!=e&&e.addEventListener("change",function(){Turbo.visit(this.value)})}function bindActionsConfirmations(){for(var t=document.getElementsByClassName("confirm-action"),i=0;i<t.length;i++){var s=t[i];let e="click";"FORM"===s.nodeName&&(e="submit"),s.addEventListener(e,function(e){window.confirm("Are you sure?")||e.preventDefault()})}}function bindLockableButtons(){document.querySelectorAll(".btn-lockable").forEach(function(i){i.addEventListener("click",function(e){var t=i.closest("form");t?t.addEventListener("submit",function(){i.disabled=!0,i.textContent+="...",document.querySelectorAll(".modal").forEach(function(e){e.classList.add("modal-locked")})},{once:!0}):(i.disabled=!0,i.textContent+="...")})})}function addListeners(){initLivePolling(),bindPollingButtonClick(),bindLockableButtons(),setLivePollButton(),setPollingListener(),hljs.highlightAll(),updateTimeAgo(),redirectToPartition(),(new TabsManager).manageTabs(),manageCharts(),bindActionsConfirmations(),loadOffsetLookupDatePicker(),new BtnToggleManager,new ThemeManager,refreshTitle(),new SearchMetadataVisibilityManager,new SearchModalManager}document.addEventListener("turbo:visit",function(){turboIsOperating=!0}),document.addEventListener("turbo:before-fetch-request",function(){turboIsOperating=!0}),document.addEventListener("turbo:before-fetch-response",function(){turboIsOperating=!0}),document.addEventListener("turbo:load",function(){turboIsOperating=!1}),document.addEventListener("turbo:frame-load",function(){turboIsOperating=!1}),document.addEventListener("turbo:frame-render",function(){turboIsOperating=!1}),document.addEventListener("turbo:load",addListeners),Turbo.setProgressBarDelay(100)
+/*! Source: lib/karafka/web/ui/public/javascripts/application.js */function updateTimeAgo(){0!=(e=document.querySelectorAll("time")).length&&(timeago.render(e),timeago.cancel());for(var e=document.getElementsByClassName("time-title"),t=0;t<e.length;t++){var i=e[t],s=i.getAttribute("title");i.setAttribute("title",timeago.format(s))}}function refreshTitle(){var e=document.querySelectorAll(".breadcrumbs a"),e=Array.from(e).slice(1).map(e=>e.textContent.trim());0<e.length?document.title=e.join(" > ")+" - Karafka Web UI":document.title="Karafka Web UI"}function redirectToPartition(){var e=document.getElementById("current-partition");null!=e&&e.addEventListener("change",function(){Turbo.visit(this.value)})}function bindActionsConfirmations(){for(var t=document.getElementsByClassName("confirm-action"),i=0;i<t.length;i++){var s=t[i];let e="click";"FORM"===s.nodeName&&(e="submit"),s.addEventListener(e,function(e){window.confirm("Are you sure?")||e.preventDefault()})}}function bindLockableButtons(){document.querySelectorAll(".btn-lockable").forEach(function(i){i.addEventListener("click",function(e){var t=i.closest("form");t?t.addEventListener("submit",function(){i.disabled=!0,i.textContent+="...",document.querySelectorAll(".modal").forEach(function(e){e.classList.add("modal-locked")})},{once:!0}):(i.disabled=!0,i.textContent+="...")})})}function addListeners(){initLivePolling(),bindPollingButtonClick(),bindLockableButtons(),setLivePollButton(),setPollingListener(),hljs.highlightAll(),updateTimeAgo(),redirectToPartition(),(new TabsManager).manageTabs(),manageCharts(),bindActionsConfirmations(),loadOffsetLookupDatePicker(),new BtnToggleManager,new BtnToggleManager(".btn-toggle-nav-collapsed","collapsed"),new ThemeManager,refreshTitle(),new SearchMetadataVisibilityManager,new SearchModalManager}document.addEventListener("turbo:visit",function(){turboIsOperating=!0}),document.addEventListener("turbo:before-fetch-request",function(){turboIsOperating=!0}),document.addEventListener("turbo:before-fetch-response",function(){turboIsOperating=!0}),document.addEventListener("turbo:load",function(){turboIsOperating=!1}),document.addEventListener("turbo:frame-load",function(){turboIsOperating=!1}),document.addEventListener("turbo:frame-render",function(){turboIsOperating=!1}),document.addEventListener("turbo:load",addListeners),Turbo.setProgressBarDelay(100)
 /*! Source: lib/karafka/web/ui/public/javascripts/charts/types/bar.js */;class BarChartManager{constructor(){this.datasetStateManager=new DatasetStateManager}refreshAndRenderBarCharts(c,u=!1){(u?c:document).querySelectorAll(".chartjs-bar").forEach(e=>{var t=e.id,i=(u?c:document).getElementById(t),s=JSON.parse(i.dataset.datasets);let r=[],a=[],n=[];var o=i.dataset.label_type_y;let l=i.dataset.label_type_x,h=this.datasetStateManager.getCurrentChart(t);Object.entries(s).forEach(([e,t],i)=>{t.forEach(([e,t])=>{n.push(t),0===i&&r.push(DataFormattingUtils.formatLabelX(e,l))}),a.push({data:t.map(([,e])=>e),label:e,hidden:h.includes(i),borderWidth:2.5})});var i=Math.min(...n),s=Math.max(...n),i=Math.round(i-.1*i),s=Math.round(s+.005*s),d=Math.round(n.reduce((e,t)=>e+t,0)/n.length);a.push({type:"line",label:"Average",data:new Array(r.length).fill(d),borderWidth:2,fill:!1,pointRadius:0,hoverBorderWidth:3,pointHitRadius:20}),u?((d=Chart.getChart(t)).data.datasets=a,d.data.labels=r,d.options.scales.y.min=i,d.options.scales.y.max=s,d.update("none")):this.renderBarChart(e,r,a,i,s,o)})}renderBarChart(e,t,i,s,r,a){new Chart(e,{type:"bar",data:{labels:t,datasets:i},options:{responsive:!0,maintainAspectRatio:!1,aspectRatio:5,scales:{x:{display:!0},y:{beginAtZero:!1,min:s,max:r,ticks:{maxTicksLimit:8,callback:function(e,t,i){return DataFormattingUtils.formatLabelY(a,e,t,i)}}}},animation:!1,animations:{colors:!1,x:!1},transitions:{active:{animation:{duration:!1}}},plugins:{legend:{position:"hidden"},tooltip:{callbacks:{label:function(e){let t=e.dataset.label||"";return"Average"!==t?DataFormattingUtils.formatTooltip(a,e):t+=": "+e.formattedValue}}}}}})}}
 /*! Source: lib/karafka/web/ui/public/javascripts/charts/types/line.js */class LineChartsManager{constructor(){this.datasetStateManager=new DatasetStateManager}getLegendHeightPercentage(e){var t=e.chartArea,e=e.height,t=e-(t.bottom-t.top);return Math.round(t/e*100)}afterRenderPlugin(){let i=this;return{id:"afterRender",afterRender:function(e){var t=i.getLegendHeightPercentage(e),e=document.getElementById(e.canvas.id);50<t&&""==e.parentElement.style.height&&(e.parentElement.style.height="400px")}}}refreshAndRender(d,c=!1){(c?d:document).querySelectorAll(".chartjs-line").forEach(e=>{var t=e.id,i=(c?d:document).getElementById(t),s=JSON.parse(i.dataset.datasets);let r=[],a=[],n=0;var o=i.dataset.label_type_y;let l=i.dataset.label_type_x,h=this.datasetStateManager.getCurrentChart(t);Object.entries(s).forEach(([e,t],i)=>{t.forEach(([e,t])=>{0===i&&r.push(DataFormattingUtils.formatLabelX(e,l)),DataFormattingUtils.isFractionalPrecision(t)&&(n=2)}),a.push({data:t,label:e,hidden:h.includes(i),borderWidth:2.5,pointHitRadius:10})}),c?((i=Chart.getChart(t)).data.datasets=a,i.data.labels=r,i.update("none")):this.render(e,r,a,n,o)})}render(e,t,i,s,r){var a=null,a=10<i.length?"point":"x";new Chart(e,{type:"line",data:{labels:t,datasets:i},options:{responsive:!0,maintainAspectRatio:!1,aspectRatio:5,title:{display:!1},interaction:{mode:"nearest",axis:"x",intersect:!1},animation:!1,transitions:{active:{animation:{duration:!1}}},plugins:{legend:{position:"bottom",labels:{padding:20},onClick:(e,t,i)=>{var s=t.datasetIndex,i=i.chart;i.isDatasetVisible(s)?(i.hide(s),t.hidden=!0):(i.show(s),t.hidden=!1),this.datasetStateManager.saveCurrent()}},tooltip:{mode:a,filter:function(e,t,i){return t<10},callbacks:{label:function(e){return DataFormattingUtils.formatTooltip(r,e)}}}},scales:{x:{display:!1},y:{ticks:{precision:s,count:5,callback:function(e,t,i){return DataFormattingUtils.formatLabelY(r,e,t,i)}}}},elements:{point:{radius:0,style:!1},line:{style:"star",radius:0,spanGaps:!1}},hover:{mode:"index",intersect:!1}},plugins:[this.afterRenderPlugin()]})}}

data/lib/karafka/web/ui/public/javascripts/components/btn_toggle_manager.js

@@ -1,10 +1,20 @@
+/*
+  This class allows buttons to toggle visibility classes on target elements.
+  It also saves the visibility state in local storage so that it persists across page loads.
+
+  By default, it will look for elements with class 'btn-toggle' and toggle the
+  'hidden' class on their target elements (defined by the data attribute `data-toggle-target`)
+  when clicked.
+*/
 class BtnToggleManager {
-  constructor() {
+  constructor(btnClass = '.btn-toggle', visibilityClass = 'hidden') {
+    this.btnClass = btnClass;
+    this.visibilityClass = visibilityClass;
     this.init();
   }
 
   init() {
-    document.querySelectorAll('.btn-toggle').forEach(button => {
+    document.querySelectorAll(this.btnClass).forEach(button => {
       const targetId = button.getAttribute('data-toggle-target');
       const targetElement = document.getElementById(targetId);
 
@@ -15,8 +25,8 @@ class BtnToggleManager {
 
       // Add event listener to toggle visibility
       button.addEventListener('click', () => {
-        const isVisible = !targetElement.classList.contains('hidden');
-        targetElement.classList.toggle('hidden');
+        const isVisible = !targetElement.classList.contains(this.visibilityClass);
+        targetElement.classList.toggle(this.visibilityClass);
         button.classList.toggle('active', !isVisible);
         this.saveVisibility(targetId, !isVisible);
       });
@@ -29,9 +39,9 @@ class BtnToggleManager {
 
   restoreVisibility(button, targetElement) {
     const storedVisibility = localStorage.getItem(targetElement.id + '_visibility');
-    const isVisible = storedVisibility ? (storedVisibility === 'true') : !targetElement.classList.contains('hidden');
+    const isVisible = storedVisibility ? (storedVisibility === 'true') : !targetElement.classList.contains(this.visibilityClass);
 
-    targetElement.classList.toggle('hidden', !isVisible);
+    targetElement.classList.toggle(this.visibilityClass, !isVisible);
     button.classList.toggle('active', isVisible);
   }
 }

data/lib/karafka/web/ui/public/javascripts/components/live_poll.js

@@ -32,6 +32,14 @@ function initLivePolling() {
   localStorage.karafkaLivePoll = "enabled"
 }
 
+function isFormActive() {
+  // Get the currently focused element
+  const activeElement = document.activeElement;
+
+  // Check if the focused element is a form control
+  return ['INPUT', 'TEXTAREA', 'SELECT', 'BUTTON', 'FIELDSET'].includes(activeElement.tagName);
+}
+
 function isElementClickable(element) {
   // Check for common clickable elements
   if (element.tagName === 'A' ||
@@ -47,6 +55,12 @@ function isElementClickable(element) {
     return true;
   }
 
+  // Check if the element is wrapped in a <button>
+  if (element.closest('button')) { return true }
+
+  // Check if element is wrapped with a link
+  if (element.closest('a')) { return true }
+
   return false;
 }
 
@@ -79,6 +93,7 @@ function isCollapsingHappening() {
 // We should not poll and update if we have any text selected and we should not do it as well, when
 // datetime picker with time selection is present
 function isPollingPossible(check_url = false){
+  if (isFormActive()) { return false }
   if (isUserHoveringOverClickable()) { return false }
   if (isAnyTextSelected()) { return false }
   if (isOffsetLookupCalendarVisible()) { return false }

data/lib/karafka/web/ui/public/stylesheets/application.css

@@ -35,3 +35,24 @@ table td.commands {
 table td.commands-inline-3 {
   width: 180px
 }
+
+.drawer-side .btn-toggle-nav-collapsed svg {
+  transform: scale(1, 1);
+  transition: transform 0.2s;
+}
+
+.drawer-side.collapsed .btn-toggle-nav-collapsed svg {
+  transform: scale(-1, -1);
+}
+
+.drawer-side .btn-toggle-nav-collapsed::after {
+  content: 'Collapse';
+}
+
+.drawer-side.collapsed .btn-toggle-nav-collapsed::after {
+  content: none;
+}
+
+.drawer-side.collapsed:hover .btn-toggle-nav-collapsed::after {
+  content: 'Expand';
+}