karafka-web 0.10.4 → 0.11.0.beta1

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

@@ -0,0 +1,30 @@
+// Manages action confirmations for links and forms
+class ActionConfirmationManager {
+  constructor(confirmationMessage = 'Are you sure?') {
+    this.confirmationMessage = confirmationMessage;
+    this.init();
+  }
+
+  init() {
+    this.bindActionsConfirmations();
+  }
+
+  bindActionsConfirmations() {
+    const elements = document.getElementsByClassName('confirm-action');
+
+    for (let i = 0; i < elements.length; i++) {
+      let element = elements[i];
+      let action = 'click';
+
+      if (element.nodeName === 'FORM') {
+        action = 'submit';
+      }
+
+      element.addEventListener(action, (event) => {
+        if (!window.confirm(this.confirmationMessage)) {
+          event.preventDefault();
+        }
+      });
+    }
+  }
+}

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

@@ -0,0 +1,39 @@
+class AlertsManager {
+ constructor() {
+   this.setupCloseButtons();
+ }
+
+ setupCloseButtons() {
+   document.querySelectorAll('.alert .close-alert').forEach(button => {
+     button.addEventListener('click', () => {
+       const alert = button.closest('.alert');
+       if (alert) {
+         this.closeAlert(alert);
+       }
+     });
+   });
+ }
+
+ closeAlert(alert) {
+   alert.style.opacity = '1';
+   alert.style.transition = 'opacity 0.3s ease-out';
+   alert.style.opacity = '0';
+
+   setTimeout(() => {
+     const colSpanWrapper = alert.closest('.col-span-12');
+
+     if (colSpanWrapper) {
+       const wrapperContent = colSpanWrapper.cloneNode(true);
+       wrapperContent.querySelector('.alert').remove();
+
+       if (!wrapperContent.innerHTML.trim()) {
+         colSpanWrapper.remove();
+       } else {
+         alert.remove();
+       }
+     } else {
+       alert.remove();
+     }
+   }, 300);
+ }
+}

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

@@ -0,0 +1,50 @@
+// Manages button locking functionality to prevent multiple submissions
+class ButtonLockManager {
+  constructor() {
+    this.init();
+  }
+
+  init() {
+    this.bindLockableButtons();
+  }
+
+  bindLockableButtons() {
+    document.querySelectorAll('.btn-lockable').forEach((button) => {
+      button.addEventListener('click', (event) => {
+        const form = button.closest('form');
+
+        const lockButton = () => {
+          button.disabled = true;
+
+          const hasText = Array.from(button.childNodes).some(node =>
+            node.nodeType === Node.TEXT_NODE && node.textContent.trim().length > 0
+          );
+
+          if (hasText) {
+            button.insertAdjacentText('beforeend', '...');
+          }
+
+          // Keep button disabled through the entire Turbo visit cycle
+          document.addEventListener('turbo:before-visit', () => {
+            button.disabled = true;
+          }, { once: true });
+
+          document.querySelectorAll('.modal').forEach((modal) => {
+            modal.classList.add('modal-locked');
+          });
+        };
+
+        if (form) {
+          form.addEventListener('submit', lockButton, { once: true });
+
+          // Add this to ensure button stays disabled after form submission
+          form.addEventListener('turbo:submit-end', () => {
+            button.disabled = true;
+          }, { once: true });
+        } else {
+          lockButton();
+        }
+      });
+    });
+  }
+}

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

@@ -9,22 +9,9 @@ var livePollTimer = null;
 var oldDOM = null;
 var datePicker = null;
 var startURL = window.location.href;
-let isHoveringOverClickable = false;
 
 // Enable live polling by default on the first visit
 function initLivePolling() {
-  document.addEventListener('mouseover', function(event) {
-    if (isElementClickable(event.target)) {
-      isHoveringOverClickable = true;
-    }
-  });
-
-  document.addEventListener('mouseout', function(event) {
-    if (isElementClickable(event.target)) {
-      isHoveringOverClickable = false;
-    }
-  });
-
   var polling = localStorage.karafkaLivePoll;
 
   if (polling != undefined) { return }
@@ -37,7 +24,51 @@ function isFormActive() {
   const activeElement = document.activeElement;
 
   // Check if the focused element is a form control
-  return ['INPUT', 'TEXTAREA', 'SELECT', 'BUTTON', 'FIELDSET'].includes(activeElement.tagName);
+  const isFormControl = ['INPUT', 'TEXTAREA', 'SELECT', 'BUTTON', 'FIELDSET'].includes(activeElement.tagName);
+
+  // For buttons that are NOT in a form, they should only count as active if being hovered over
+  if (isFormControl && activeElement.tagName === 'BUTTON' && !activeElement.closest('form')) {
+    // Get element under mouse
+    const mouseX = window.mouseX || 0;
+    const mouseY = window.mouseY || 0;
+    const elementUnderMouse = document.elementFromPoint(mouseX, mouseY);
+
+    // Only consider the button active if the mouse is over it
+    return elementUnderMouse === activeElement;
+  }
+
+  // For form controls inside forms and other form controls, just check if they're active
+  return isFormControl;
+}
+
+function isEditableFormVisible() {
+  const forms = document.querySelectorAll('form');
+
+  for (let form of forms) {
+    // Skip if form is not visible
+    if (!form ||
+        window.getComputedStyle(form).display === 'none' ||
+        window.getComputedStyle(form).visibility === 'hidden' ||
+        form.offsetParent === null) {
+      continue;
+    }
+    // Get visibly editable inputs
+    const editableInputs = Array.from(form.querySelectorAll(
+      'input:not([type="hidden"]):not([readonly]):not([disabled]), ' +
+      'textarea:not([readonly]):not([disabled]), ' +
+      'select:not([disabled])'
+    )).filter(input => {
+      const style = window.getComputedStyle(input);
+      return input.offsetParent !== null &&
+             style.display !== 'none' &&
+             style.visibility !== 'hidden' &&  // Changed from !== 'visible' to !== 'hidden'
+             !input.closest('[aria-hidden="true"]');  // Check for hidden ancestors
+    });
+    if (editableInputs.length > 0) {
+      return true;
+    }
+  }
+  return false;
 }
 
 function isElementClickable(element) {
@@ -65,9 +96,21 @@ function isElementClickable(element) {
 }
 
 function isUserHoveringOverClickable() {
-    return isHoveringOverClickable;
+  // Get last known mouse position from the window object
+  const mouseX = window.mouseX || 0;
+  const mouseY = window.mouseY || 0;
+
+  const elementUnderMouse = document.elementFromPoint(mouseX, mouseY);
+  return elementUnderMouse && isElementClickable(elementUnderMouse);
 }
 
+// Track mouse position globally
+document.addEventListener('mousemove', function(event) {
+  window.mouseX = event.clientX;
+  window.mouseY = event.clientY;
+});
+
+
 // 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
 // This mitigates this problem for Karafka Web
@@ -94,6 +137,7 @@ function isCollapsingHappening() {
 // datetime picker with time selection is present
 function isPollingPossible(check_url = false){
   if (isFormActive()) { return false }
+  if (isEditableFormVisible()) { return false }
   if (isUserHoveringOverClickable()) { return false }
   if (isAnyTextSelected()) { return false }
   if (isOffsetLookupCalendarVisible()) { return false }
@@ -144,11 +188,11 @@ function setLivePollButton() {
   if (selector == null) { return }
 
   if (localStorage.karafkaLivePoll == "enabled") {
-    selector.classList.add('text-base-content')
-    selector.classList.remove("text-gray-500");
+    selector.classList.remove("!text-gray-500");
+    selector.classList.remove("hover:!text-primary-content")
   } else {
-    selector.classList.add("text-gray-500")
-    selector.classList.remove('text-base-content');
+    selector.classList.add("!text-gray-500")
+    selector.classList.add("hover:!text-primary-content")
   }
 }
 
@@ -167,6 +211,8 @@ function refreshPage(text) {
   var parser = new DOMParser();
   var new_doc = parser.parseFromString(text, "text/html");
   var new_content = new_doc.getElementById('content');
+  var new_header = new_doc.getElementById('content-header');
+  var new_breadcrums = new_doc.getElementById('content-breadcrumbs')
 
   // Do not modify if exactly the same content
   if (oldDOM == new_content.innerHTML) { return }
@@ -181,6 +227,12 @@ function refreshPage(text) {
   // the charts run for a long period of time without page reload
   if (new_charts_count == 0 || old_charts_count == 0) {
     document.getElementById('content').replaceWith(new_content)
+    document.getElementById('content-header').replaceWith(new_header)
+
+    if (new_breadcrums != null) {
+      document.getElementById('content-breadcrumbs').replaceWith(new_breadcrums)
+    }
+
     addListeners()
   } else {
     let new_refreshable = new_doc.getElementById('refreshable');

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

@@ -0,0 +1,50 @@
+// code for handling message republishing functionality
+class MessageRepublishManager {
+  constructor() {
+    this.init();
+  }
+
+  init() {
+    // Check if the message republish form exists on the current page
+    const form = document.getElementById('message-republish-form');
+    if (!form) { return false; }
+
+    // Get references to the relevant elements
+    const topicSelect = form.querySelector('select[name="target_topic"]');
+    const partitionInput = document.getElementById('target_partition');
+
+    if (!topicSelect || !partitionInput) { return false; }
+
+    // Initial setup when the page loads
+    this.updatePartitionValidation(topicSelect, partitionInput);
+
+    // Add event listener for topic selection changes
+    topicSelect.addEventListener('change', () => {
+      this.updatePartitionValidation(topicSelect, partitionInput);
+    });
+  }
+
+  updatePartitionValidation(topicSelect, partitionInput) {
+    // Get the selected option
+    const selectedOption = topicSelect.options[topicSelect.selectedIndex];
+
+    // Get the partition count from the selected topic's data attribute
+    const partitionCount = parseInt(selectedOption.getAttribute('data-partitions'), 10);
+
+    if (!isNaN(partitionCount) && partitionCount > 0) {
+      // Update the max attribute of the partition input
+      partitionInput.setAttribute('max', (partitionCount - 1).toString());
+
+      // Get the current partition value
+      const currentPartitionValue = parseInt(partitionInput.value, 10);
+
+      // If the current value exceeds the maximum allowed partitions, clear the input
+      if (!isNaN(currentPartitionValue) && currentPartitionValue >= partitionCount) {
+        partitionInput.value = '';
+      }
+    } else {
+      // If there's no valid partition count, set a high default max
+      partitionInput.setAttribute('max', '10000');
+    }
+  }
+}

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

@@ -0,0 +1,21 @@
+// Tracks and updates page titles based on breadcrumbs
+class PageTitleTracker {
+  constructor() {
+    this.init();
+  }
+
+  init() {
+    this.refreshTitle();
+  }
+
+  refreshTitle() {
+    const breadcrumbs = document.querySelectorAll('.breadcrumbs a');
+    let breadcrumbTexts = Array.from(breadcrumbs).slice(1).map(crumb => crumb.textContent.trim());
+
+    if (breadcrumbTexts.length > 0) {
+      document.title = breadcrumbTexts.join(' > ') + ' - Karafka Web UI';
+    } else {
+      document.title = 'Karafka Web UI';
+    }
+  }
+}

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

@@ -0,0 +1,21 @@
+// Manages partition selection in explorer view
+// When using explorer, we can select the desired partition. This code redirects without having
+// to press a button after a select
+class PartitionRedirectManager {
+  constructor() {
+    this.init();
+  }
+
+  init() {
+    this.redirectToPartition();
+  }
+
+  redirectToPartition() {
+    const selector = document.getElementById('current-partition');
+    if (selector == null) { return; }
+
+    selector.addEventListener('change', function() {
+      Turbo.visit(this.value);
+    });
+  }
+}

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

@@ -0,0 +1,25 @@
+// Manages time display formatting across the UI
+class TimeAgoManager {
+  constructor() {
+    this.init();
+  }
+
+  init() {
+    this.updateTimeAgo();
+  }
+
+  updateTimeAgo() {
+    const timeElements = document.querySelectorAll('time');
+    if (timeElements.length != 0) {
+      timeago.render(timeElements);
+      timeago.cancel();
+    }
+
+    const timeTitleElements = document.getElementsByClassName('time-title');
+    for (let i = 0; i < timeTitleElements.length; i++) {
+      let element = timeTitleElements[i];
+      let title = element.getAttribute('title');
+      element.setAttribute('title', timeago.format(title));
+    }
+  }
+}

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

@@ -0,0 +1,30 @@
+// Component for displaying the timestamp explorer form and moving to a timestamp on submit
+
+class TimestampSelector {
+ constructor() {
+   this.init();
+ }
+
+ init() {
+   const form = document.getElementById('timestamp-form');
+   if (!form) { return false; }
+
+   // Focus input when dropdown button is clicked
+   const dropdownButton = form.closest('.dropdown').querySelector('button');
+   dropdownButton.addEventListener('click', () => {
+     setTimeout(() => {
+       form.querySelector('input').focus();
+     }, 50);
+   });
+
+  const dropdown = form.closest('.dropdown');
+  form.addEventListener('submit', (e) => {
+    e.preventDefault();
+    const button = form.querySelector('button');
+    dropdown.classList.add('dropdown-open'); // Keep dropdown open
+    const target = form.dataset.target;
+    const timestamp = form.querySelector('input').value;
+    window.location.href = target + '/' + timestamp;
+  });
+ }
+}