karafka-web 0.10.2 → 0.10.3

data/lib/karafka/web/pro/ui/views/scheduled_messages/explorer/_message.erb

@@ -39,8 +39,22 @@
     </td>
 
     <% if type == 'cancel' %>
-      <td colspan="5" class="text-center text-muted">
-        Cancellation messages do not contain those details.
+      <td>
+        <%== relative_time(message.timestamp) %>
+      </td>
+      <td class="text-center text-muted">
+        N/A
+      </td>
+      <td>
+        <%==
+          partial(
+            'scheduled_messages/explorer/key',
+            locals: { message: message, safe_key: safe_key }
+          )
+        %>
+      </td>
+      <td colspan="2" class="text-center text-muted">
+        N/A
       </td>
     <% else %>
       <td>
@@ -50,15 +64,12 @@
         <%== relative_time message.headers['schedule_target_epoch'].to_i %>
       </td>
       <td>
-        <% if @visibility_filter.key?(message) %>
-          <% if safe_key.success? %>
-            <%= safe_key.result %>
-          <% else %>
-            <span class="text-muted">[Deserialization Failed]</span>
-          <% end %>
-        <% else %>
-          <span class="text-muted">[Filtered]</span>
-        <% end %>
+        <%==
+          partial(
+            'scheduled_messages/explorer/key',
+            locals: { message: message, safe_key: safe_key }
+          )
+        %>
       </td>
       <td>
         <%= message.headers['schedule_target_topic'] %>
@@ -73,10 +84,37 @@
     <% end %>
 
     <td>
+      <% if type == 'schedule' %>
+        <%
+          cancel_path = root_path(
+            "scheduled_messages/messages",
+            message.topic,
+            message.partition,
+            message.offset,
+            'cancel'
+          )
+        %>
+        <form
+          action="<%= cancel_path %>"
+          method="post"
+          class="inline"
+        >
+          <%== csrf_tag(cancel_path) %>
+          <button
+            type="submit"
+            class="btn btn-error btn-sm confirm-action"
+            title="Cancel dispatch of this scheduled message"
+          >
+            <%== icon(:x_circle) %>
+          </button>
+        </form>
+      <% end %>
+
       <%==
         link_button_primary_sm(
-          'Details',
-          explorer_path(message.topic, message.partition, message.offset)
+          icon(:info_circle),
+          explorer_path(message.topic, message.partition, message.offset),
+          title: 'Display details of this message'
         )
       %>
     </td>

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,7 @@
         href="<%= root_path('recurring_tasks') %>"
       >
         <%== icon(:arrow_path_rounded) %>
-        Cron
+        <span class="sidebar-nav-item-label">Cron</span>
       </a>
     </li>
 
@@ -78,7 +79,7 @@
         href="<%= root_path('scheduled_messages') %>"
       >
         <%== icon(:calendar) %>
-        Schedules
+        <span class="sidebar-nav-item-label">Schedules</span>
       </a>
     </li>
 
@@ -88,7 +89,7 @@
         href="<%= root_path('errors') %>"
       >
         <%== icon(:bug) %>
-        Errors
+        <span class="sidebar-nav-item-label">Errors</span>
       </a>
     </li>
 
@@ -98,7 +99,7 @@
         href="<%= root_path('dlq') %>"
       >
         <%== icon(:x_circle) %>
-        Dead
+        <span class="sidebar-nav-item-label">Dead</span>
       </a>
     </li>
 
@@ -108,7 +109,7 @@
         href="<%= root_path('cluster') %>"
       >
         <%== icon(:blocks) %>
-        Cluster
+        <span class="sidebar-nav-item-label">Cluster</span>
       </a>
     </li>
 
@@ -118,7 +119,7 @@
         href="<%= root_path('topics') %>"
       >
         <%== icon(:list_bullets) %>
-        Topics
+        <span class="sidebar-nav-item-label">Topics</span>
       </a>
     </li>
 
@@ -128,7 +129,7 @@
         href="<%= root_path('status') %>"
       >
         <%== icon(:check_badge) %>
-        Status
+        <span class="sidebar-nav-item-label">Status</span>
       </a>
     </li>
 
@@ -138,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/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/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,7 +51,7 @@ 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 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}
@@ -59,6 +59,6 @@ let DataFormattingUtils={niceBytes(e,t=2){let i=0,s=parseInt(e,10)||0;for(;1024<
 /*! 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/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';
+}