karafka-web 0.9.0 → 0.10.0.beta1

data/lib/karafka/web/ui/public/javascripts/charts/types/line.js

@@ -3,6 +3,30 @@ class LineChartsManager {
     this.datasetStateManager = new DatasetStateManager();
   }
 
+  getLegendHeightPercentage(chart) {
+    const chartArea = chart.chartArea;
+    const chartHeight = chart.height;
+    const legendHeight = chartHeight - (chartArea.bottom - chartArea.top);
+    const legendHeightPercentage = (legendHeight / chartHeight) * 100;
+    return Math.round(legendHeightPercentage);
+  }
+
+  afterRenderPlugin() {
+    const self = this
+
+    return {
+      id: 'afterRender',
+      afterRender: function(chart) {
+        var legendHeightPercentage = self.getLegendHeightPercentage(chart);
+        const element = document.getElementById(chart.canvas.id);
+
+        if (legendHeightPercentage > 50 && element.parentElement.style.height == '') {
+          element.parentElement.style.height = '400px'
+        }
+      }
+    }
+  }
+
   refreshAndRender(doc, isRefresh = false) {
     const charts = (isRefresh ? doc : document).querySelectorAll('.chartjs-line');
 
@@ -31,7 +55,8 @@ class LineChartsManager {
           data: value,
           label: key,
           hidden: disabledSets.includes(index),
-          borderWidth: 2.5
+          borderWidth: 2.5,
+          pointHitRadius: 10
         });
       });
 
@@ -47,6 +72,14 @@ class LineChartsManager {
   }
 
   render(handler, labels, data, yPrecision, labelTypeY) {
+    var tooltip_mode = null
+
+    if (data.length > 10) {
+      tooltip_mode = 'point'
+    } else {
+      tooltip_mode = 'x'
+    }
+
     new Chart(handler, {
       type: 'line',
       data: {
@@ -65,14 +98,7 @@ class LineChartsManager {
           axis: 'x',
           intersect: false
         },
-        hover: {
-          intersect: false
-        },
         animation: false,
-        animations: {
-          colors: false,
-          x: false
-        },
         transitions: {
           active: {
             animation: {
@@ -101,6 +127,11 @@ class LineChartsManager {
             }
           },
           tooltip: {
+            mode: tooltip_mode,
+            filter: function (tooltipItem, currentIndex, tooltipItems) {
+              // Display at most 10 elements in the legend
+              return currentIndex < 10
+            },
             callbacks: {
               label: function(tooltipItem) {
                 return DataFormattingUtils.formatTooltip(labelTypeY, tooltipItem);
@@ -137,7 +168,8 @@ class LineChartsManager {
           mode: 'index',
           intersect: false,
         }
-      }
+      },
+      plugins: [this.afterRenderPlugin()]
     });
   }
 }

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

@@ -0,0 +1,37 @@
+class BtnToggleManager {
+  constructor() {
+    this.init();
+  }
+
+  init() {
+    document.querySelectorAll('.btn-toggle').forEach(button => {
+      const targetId = button.getAttribute('data-toggle-target');
+      const targetElement = document.getElementById(targetId);
+
+      if (!targetElement) return;
+
+      // Establish initial state from local storage or based on visibility
+      this.restoreVisibility(button, targetElement);
+
+      // Add event listener to toggle visibility
+      button.addEventListener('click', () => {
+        const isVisible = !targetElement.classList.contains('hidden');
+        targetElement.classList.toggle('hidden');
+        button.classList.toggle('active', !isVisible);
+        this.saveVisibility(targetId, !isVisible);
+      });
+    });
+  }
+
+  saveVisibility(targetId, isVisible) {
+    localStorage.setItem(targetId + '_visibility', isVisible);
+  }
+
+  restoreVisibility(button, targetElement) {
+    const storedVisibility = localStorage.getItem(targetElement.id + '_visibility');
+    const isVisible = storedVisibility ? (storedVisibility === 'true') : !targetElement.classList.contains('hidden');
+
+    targetElement.classList.toggle('hidden', !isVisible);
+    button.classList.toggle('active', isVisible);
+  }
+}

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

@@ -8,6 +8,16 @@
 var livePollTimer = null;
 var oldDOM = null;
 var datePicker = null;
+var startURL = window.location.href;
+
+// Enable live polling by default on the first visit
+function initLivePolling() {
+  var polling = localStorage.karafkaLivePoll;
+
+  if (polling != undefined) { return }
+
+  localStorage.karafkaLivePoll = "enabled"
+}
 
 // Check is there is any text selected in the Web-UI
 // It drives me crazy when I'm selecting things in Sidekiq Web-UI and the page is refreshed
@@ -24,15 +34,37 @@ function isAnyTextSelected() {
   return(text != "");
 }
 
+// If anything is collapsing at a given moment we should not update because it would cause weird
+// glitches in the UI
+function isCollapsingHappening() {
+  const collapsingElements = document.querySelectorAll('.collapsing');
+  return collapsingElements.length > 0;
+}
+
 // 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(){
+function isPollingPossible(check_url = false){
   if (isAnyTextSelected()) { return false }
   if (isOffsetLookupCalendarVisible()) { return false }
+  if (isAnyModalOpen()) { return false }
+  if (isCollapsingHappening()) { return false }
+  if (isTurboOperating()) { return false }
+  if (check_url && (startURL != window.location.href)) { return false }
 
   return true
 }
 
+// We should not poll and update when a modal is open. Otherwise it would be replaced and hidden.
+function isAnyModalOpen(){
+  const modals = document.querySelectorAll('dialog'); // Select all <dialog> elements
+  for (let modal of modals) {
+    if (modal.open) {
+      return true; // A modal is open
+    }
+  }
+  return false; // No modals are open
+}
+
 function bindPollingButtonClick() {
   var selector = document.getElementById("live-poll");
 
@@ -61,13 +93,11 @@ function setLivePollButton() {
   if (selector == null) { return }
 
   if (localStorage.karafkaLivePoll == "enabled") {
-    selector.textContent = selector.dataset.on;
-    selector.classList.add("btn-success");
-    selector.classList.remove("btn-secondary");
+    selector.classList.add('text-base-content')
+    selector.classList.remove("text-gray-500");
   } else {
-    selector.textContent = selector.dataset.off;
-    selector.classList.add("btn-secondary");
-    selector.classList.remove("btn-success");
+    selector.classList.add("text-gray-500")
+    selector.classList.remove('text-base-content');
   }
 }
 
@@ -79,6 +109,10 @@ function checkResponse(resp) {
 }
 
 function refreshPage(text) {
+  // Do not refresh page if during the request something has change that should prevent us from
+  // refreshing.
+  if (!isPollingPossible()) { return false }
+
   var parser = new DOMParser();
   var new_doc = parser.parseFromString(text, "text/html");
   var new_content = new_doc.getElementById('content');
@@ -132,11 +166,13 @@ function livePollCallback() {
   clearTimeout(livePollTimer);
   livePollTimer = null;
 
-  if (!isPollingPossible()) {
+  if (!isPollingPossible(false)) {
     setPollingListener();
     return;
   }
 
+  startURL = window.location.href
+
   fetch(window.location.href)
   .then(checkResponse)
   .then(resp => resp.text())

data/lib/karafka/web/ui/public/javascripts/{offset_datetime.js → components/offset_datetime.js}

@@ -21,7 +21,7 @@ function loadOffsetLookupDatePicker() {
     onSelect: ({ date, datepicker, formattedDate }) => {
       // Make sure that date-time selection does not fill the picker button value
       // we want to preserve this
-      document.getElementById('offset-lookup-datepicker').value = "📆"
+      document.getElementById('offset-lookup-datepicker').value = ""
     },
     onShow: function(){
       offsetLookupDatePicker.selectDate((new Date).getTime())

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

@@ -0,0 +1,102 @@
+// code for handling the search modal
+
+class SearchModalManager {
+  constructor() {
+    this.init();
+  }
+
+  init() {
+    var offsetValueInput = document.getElementById('offset-input');
+
+    // do not manage anything when we are not in the search page
+    if (!offsetValueInput) { return false }
+
+    var offsetTimestampInput = document.getElementById('offset-timestamp-input');
+    var offsetRadios = document.querySelectorAll('input[name="search[offset_type]"]');
+    var noSearchCriteria = document.getElementById('no-search-criteria');
+    var searchFormErrors = document.getElementById('search-form-errors');
+
+    // When user selects appropriate offset lookup setting, make proper inputs editable or not
+    offsetRadios.forEach(function(radio) {
+      radio.addEventListener('change', function() {
+        offsetValueInput.disabled = !document.getElementById('offset-value').checked;
+        offsetValueInput.required = document.getElementById('offset-value').checked;
+        offsetTimestampInput.disabled = !document.getElementById('offset-timestamp').checked;
+        offsetTimestampInput.required = document.getElementById('offset-timestamp').checked
+      });
+    });
+
+    offsetValueInput.disabled = !document.getElementById('offset-value').checked;
+    offsetValueInput.required = document.getElementById('offset-value').checked;
+    offsetTimestampInput.disabled = !document.getElementById('offset-timestamp').checked;
+    offsetTimestampInput.required = document.getElementById('offset-timestamp').checked
+
+    document.getElementById('show-search-modal').addEventListener('click', function () {
+      var searchModal = document.getElementById('messages_search_modal');
+
+      searchModal.showModal();
+
+      var firstTextInput = document.querySelector('#messages_search_modal input[type="text"]');
+      if (firstTextInput) {
+        firstTextInput.focus();
+      }
+    });
+
+    if (noSearchCriteria || searchFormErrors) {
+      var searchModal = document.getElementById('messages_search_modal');
+
+      searchModal.showModal();
+      var firstTextInput = document.querySelector('#messages_search_modal input[type="text"]');
+      if (firstTextInput) {
+        firstTextInput.focus();
+      }
+    }
+  }
+}
+
+class SearchMetadataVisibilityManager {
+  constructor() {
+    this.storageKey = 'karafkaSearchMetadataVisibility';
+    this.metadataElement = document.getElementById('search-metadata-details');
+    this.toggleButton = document.getElementById('toggle-search-metadata');
+
+    // do nothing if search metadata is not present
+    if (!this.metadataElement) { return }
+
+    this.init();
+  }
+
+  init() {
+    this.restoreVisibility();
+
+    self = this;
+
+    var toggleButton = document.getElementById('toggle-search-metadata');
+
+    toggleButton.addEventListener('click', function () {
+      var metadata = document.getElementById('search-metadata-details')
+      metadata.classList.toggle('hidden');
+      toggleButton.classList.toggle('active')
+
+      self.saveVisibility(!metadata.classList.contains('hidden'))
+    });
+  }
+
+  readVisibility() {
+    return localStorage.getItem(this.storageKey) === 'true';
+  }
+
+  saveVisibility(isVisible) {
+    localStorage.setItem(this.storageKey, isVisible);
+  }
+
+  restoreVisibility() {
+    const isVisible = this.readVisibility();
+
+
+    if (isVisible) {
+      document.getElementById('toggle-search-metadata').classList.add('active')
+      document.getElementById('search-metadata-details').classList.remove('hidden');
+    }
+  }
+}

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

@@ -0,0 +1,84 @@
+class TabsManager {
+  constructor() {
+    this.storageKey = 'karafkaActiveTabsv2';
+  }
+
+  // Reads the active tabs from local storage
+  readAllActiveTabs() {
+    const rawActiveTabs = localStorage.getItem(this.storageKey);
+    return rawActiveTabs ? JSON.parse(rawActiveTabs) : {};
+  }
+
+  // Saves the active tabs to local storage
+  saveAllActiveTabs(data) {
+    localStorage.setItem(this.storageKey, JSON.stringify(data));
+  }
+
+  // Saves the current state of active tabs
+  saveCurrentActiveTabs() {
+    const activeTabs = document.querySelectorAll('.inline-tabs > .active');
+    const url = window.location.href.split('?')[0];
+    let currentActiveTabs = [];
+    let allTabs = this.readAllActiveTabs();
+
+    activeTabs.forEach(activeTab => {
+      currentActiveTabs.push(activeTab.id);
+    });
+
+    allTabs[url] = currentActiveTabs;
+    this.saveAllActiveTabs(allTabs);
+  }
+
+  // Sets the active tabs based on stored data
+  setActiveTabs() {
+    const url = window.location.href.split('?')[0];
+    const allTabs = this.readAllActiveTabs();
+    var activeTabs = allTabs[url];
+
+    if (!activeTabs) {
+      activeTabs = Array.from(document.querySelectorAll('.inline-tabs > .active')).map(tab => tab.id);
+    }
+
+    if (activeTabs) {
+      activeTabs.forEach(activeTabId => {
+        const tabElement = document.getElementById(activeTabId);
+
+        if (tabElement) {
+          const parent = tabElement.parentElement;
+
+          // Remove 'active' class from all sibling elements
+          parent.querySelectorAll('.custom-tab').forEach(function(sibling) {
+            sibling.classList.remove('active');
+          });
+
+          tabElement.classList.add('active')
+          var content = document.getElementById(tabElement.getAttribute('data-target'))
+          content.classList.remove('hidden')
+        }
+      });
+    }
+  }
+
+  // Initializes tab management and event listeners
+  manageTabs() {
+    this.setActiveTabs();
+    var self = this;
+
+    document.querySelectorAll('.inline-tabs > .custom-tab').forEach(function(button) {
+      button.addEventListener('click', function(event) {
+        const parent = this.parentElement;
+
+        // Remove 'active' class from all sibling elements
+        parent.querySelectorAll('.custom-tab').forEach(function(sibling) {
+          sibling.classList.remove('active');
+          var target = sibling.getAttribute('data-target')
+          document.getElementById(target).classList.add('hidden')
+        });
+
+        this.classList.add('active');
+        self.saveCurrentActiveTabs();
+        self.setActiveTabs()
+      });
+    });
+  }
+}

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

@@ -0,0 +1,59 @@
+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.getElementById('highlight-light');
+    this.darkThemeLink = document.getElementById('highlight-dark');
+
+    if (!this.lightThemeLink || !this.darkThemeLink || !this.themeSelectorButton) {
+      console.error('Theme CSS links or theme selector button not found');
+      return;
+    }
+
+    this.restoreTheme();
+
+    this.themeSelectorButton.addEventListener('click', () => {
+      this.toggleTheme();
+    });
+  }
+
+  setTheme(theme) {
+    document.documentElement.setAttribute('data-theme', theme);
+    if (theme === 'dark') {
+      this.lightThemeLink.disabled = true;
+      this.darkThemeLink.disabled = false;
+      this.themeSelectorLight.classList.add('hidden');
+      this.themeSelectorDark.classList.remove('hidden');
+    } else {
+      this.lightThemeLink.disabled = false;
+      this.darkThemeLink.disabled = true;
+      this.themeSelectorLight.classList.remove('hidden');
+      this.themeSelectorDark.classList.add('hidden');
+    }
+    localStorage.setItem('theme', theme);
+  }
+
+  toggleTheme() {
+    const currentTheme = document.documentElement.getAttribute('data-theme');
+    const newTheme = currentTheme === 'dark' ? 'corporate' : 'dark';
+    this.setTheme(newTheme);
+  }
+
+  restoreTheme() {
+    const storedTheme = localStorage.getItem('theme');
+    const theme = storedTheme ? storedTheme : (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'corporate');
+    this.setTheme(theme);
+
+    // Listen for system color scheme changes
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
+      if (!localStorage.getItem('theme')) {
+        this.setTheme(e.matches ? 'dark' : 'corporate');
+      }
+    });
+  }
+}

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

@@ -0,0 +1,30 @@
+let turboIsOperating = false;
+
+// Listen for Turbo events to manage the state
+document.addEventListener('turbo:visit', function() {
+  turboIsOperating = true;
+});
+
+document.addEventListener('turbo:before-fetch-request', function() {
+  turboIsOperating = true;
+});
+
+document.addEventListener('turbo:before-fetch-response', function() {
+  turboIsOperating = true;
+});
+
+document.addEventListener('turbo:load', function() {
+  turboIsOperating = false;
+});
+
+document.addEventListener('turbo:frame-load', function() {
+  turboIsOperating = false;
+});
+
+document.addEventListener('turbo:frame-render', function() {
+  turboIsOperating = false;
+});
+
+function isTurboOperating() {
+  return turboIsOperating;
+}