karafka-web 0.9.1 → 0.10.1

data/lib/karafka/web/pro/ui/views/search/_search_modal.erb

@@ -0,0 +1,139 @@
+<%
+  # We do not want to use any additional gems. That's why this is done that way
+  phrase = @current_search[:phrase]
+  partitions = @current_search[:partitions]
+  limit = @current_search[:limit]
+  offset_type = @current_search[:offset_type]
+  offset = @current_search[:offset]
+  timestamp = @current_search[:timestamp]
+  matcher = @current_search[:matcher]
+%>
+
+<dialog id="messages_search_modal" class="modal">
+  <form method="dialog" class="modal-backdrop">
+    <button class="cursor-default"></button>
+  </form>
+
+  <div class="modal-box modal-box w-11/12 max-w-3xl">
+    <form method="dialog" class="modal-backdrop">
+      <button class="btn-action btn-ghost absolute right-4 top-4">
+        <%== icon(:x_mark) %>
+      </button>
+    </form>
+
+    <h3 class="text-lg mb-3">Edit Search Parameters</h3>
+
+    <hr />
+
+    <form
+      id="messages-search-form"
+      class="space-y-4 mt-3 w-full"
+      method="get"
+      action="<%= explorer_path(@topic_id, 'search') %>"
+    >
+      <% if @errors.any? %>
+        <% alert_box_error('Please fix the following errors:') do %>
+          <ul class="list-disc list-inside">
+            <% @errors.each do |key, error| %>
+              <li><%= key %>: <%= error %></li>
+            <% end %>
+          </ul>
+        <% end %>
+      <% end %>
+
+      <div class="flex items-center w-full">
+        <label for="input-field" class="w-1/3 text-gray-700">Matcher:</label>
+
+        <select
+          class="w-2/3 block select select-bordered"
+          id="matcher"
+          name="search[matcher]"
+          required
+        >
+          <% @matchers.each do |available_matcher| %>
+            <option value="<%= available_matcher.name %>" <%= 'selected' if matcher == available_matcher.name %>>
+              <%= available_matcher.name %>
+            </option>
+          <% end %>
+        </select>
+      </div>
+
+      <div class="flex items-center w-full">
+        <label for="input-field" class="w-1/3 text-gray-700">Phrase:</label>
+
+        <input
+          type="text"
+          class="w-2/3 block input input-bordered"
+          id="phrase"
+          name="search[phrase]"
+          value="<%= phrase %>"
+          placeholder="Enter phrase to search for"
+          required
+        >
+      </div>
+
+      <div class="flex items-center w-full">
+        <label for="input-field" class="w-1/3 text-gray-700">Partitions:</label>
+
+        <select
+          class="w-2/3 block select select-bordered p-4"
+          id="partitions"
+          name="search[partitions][]"
+          multiple
+          required
+        >
+          <%
+            partitions << params.current_partition.to_s unless params.current_partition.negative?
+          %>
+
+          <option value="all" <%= 'selected' if partitions.include?('all') || partitions.empty? %>>All</option>
+          <% @partitions_count.times do |i| %>
+            <option value="<%= i %>" <%= 'selected' if partitions.include?(i.to_s) %>>
+              Partition <%= i %>
+            </option>
+          <% end %>
+        </select>
+      </div>
+
+      <div class="flex items-center w-full">
+        <label for="input-field" class="w-1/3 text-gray-700">Offset:</label>
+
+        <div class="flex flex-col space-y-2 w-2/3">
+          <label class="flex items-center space-x-2">
+            <input type="radio" class="radio" name="search[offset_type]" id="offset-latest" value="latest" <%= 'checked' if offset_type == 'latest' || offset_type.empty? %>>
+            <span>Latest</span>
+          </label>
+          <label class="flex items-center space-x-2">
+            <input type="radio" class="radio" name="search[offset_type]" id="offset-value" value="offset" <%= 'checked' if offset_type == 'offset' %>>
+            <span>Offset</span>
+          </label>
+          <input type="number" value="<%= offset %>" class="input input-bordered mt-2" id="offset-input" name="search[offset]" min="0" disabled>
+          <label class="flex items-center space-x-2">
+            <input type="radio" class="radio" name="search[offset_type]" id="offset-timestamp" value="timestamp" <%= 'checked' if offset_type == 'timestamp' %>>
+            <span>Timestamp (in ms)</span>
+          </label>
+          <input type="number" value="<%= timestamp %>" class="input input-bordered mt-2" id="offset-timestamp-input" name="search[timestamp]" min="0" max="<%= ((Time.now.to_f + 60 * 60 * 24 * 31) * 1_000).to_i %>" disabled>
+        </div>
+      </div>
+
+      <div class="flex items-center w-full">
+        <label for="input-field" class="w-1/3 text-gray-700">Messages:</label>
+
+        <select class="w-2/3 block select select-bordered" id="limit" name="search[limit]" required>
+          <% @limits.each do |available_limit| %>
+            <option value="<%= available_limit %>" <%= 'selected' if limit == available_limit %>>
+              <%= available_limit %>
+            </option>
+          <% end %>
+        </select>
+      </div>
+
+      <div class="form-control text-center">
+        <button type="submit" class="btn btn-primary">
+          <%== icon(:magnifying_glass) %>
+          Search
+        </button>
+      </div>
+    </form>
+  </div>
+</dialog>

data/lib/karafka/web/pro/ui/views/search/_timeout.erb

@@ -0,0 +1,3 @@
+<%==
+  alert_warning('Search results may be incomplete due to reaching the search timeout limit.')
+%>

data/lib/karafka/web/pro/ui/views/search/index.erb

@@ -0,0 +1,29 @@
+<% view_title @search_criteria ? "Search Results from #{@topic_id}" : @topic_id %>
+
+<%== partial 'search/search_criteria' %>
+
+<div class="col-span-12">
+  <% unless @search_criteria %>
+    <%== partial 'search/no_search_criteria' %>
+  <% end %>
+
+  <% if @messages && @search_details[:stop_reason] == :timeout %>
+    <%== partial 'search/timeout' %>
+  <% end %>
+
+  <% if @errors.any? %>
+    <%== partial 'search/fix_errors' %>
+  <% elsif @messages %>
+    <%== partial 'search/metadata' %>
+
+    <% if @messages.empty? && params.current_page == 1 %>
+      <%== partial 'search/no_results' %>
+    <% elsif @messages.empty? %>
+      <%== partial 'shared/no_paginated_data' %>
+    <% else %>
+      <%== partial('explorer/partition/messages') %>
+    <% end %>
+  <% end %>
+</div>
+
+<%== partial 'search/search_modal' %>

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

@@ -1,73 +1,135 @@
-<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
-  <span class="navbar-toggler-icon"></span>
-</button>
+<nav class="sidebar-nav">
+  <%== partial 'shared/brand' %>
 
-<div class="collapse navbar-collapse" id="navbarNav">
-  <ul class="navbar-nav">
-    <li class="nav-item ms-3">
-      <a class="nav-link <%= nav_class(start_with: '/dashboard') %>" href="<%= root_path('dashboard') %>">
+  <ul class="menu">
+    <li>
+      <a
+        class="sidebar-nav-item <%= nav_class(start_with: '/dashboard') %>"
+        href="<%= root_path('dashboard') %>"
+      >
+        <%== icon(:home) %>
         Dashboard
       </a>
     </li>
 
-    <li class="nav-item ms-3">
-      <a class="nav-link <%= nav_class(start_with: '/consumers') %>" href="<%= root_path('consumers') %>">
+    <li>
+      <a
+        class="sidebar-nav-item <%= nav_class(match: /\A\/(consumers|commands)/) %>"
+        href="<%= root_path('consumers') %>"
+      >
+        <%== icon(:cpu) %>
         Consumers
       </a>
     </li>
 
-    <li class="nav-item ms-3">
-      <a class="nav-link <%= nav_class(start_with: '/jobs') %>" href="<%= root_path('jobs/running') %>">
+    <li>
+      <a
+        class="sidebar-nav-item <%= nav_class(start_with: '/jobs') %>"
+        href="<%= root_path('jobs/running') %>"
+      >
+        <%== icon(:arrow_on_squares) %>
         Jobs
       </a>
     </li>
 
-    <li class="nav-item ms-3">
-      <a class="nav-link <%= nav_class(start_with: '/health') %>" href="<%= root_path('health/overview') %>">
+    <li>
+      <a
+        class="sidebar-nav-item <%= nav_class(start_with: '/health') %>"
+        href="<%= root_path('health/overview') %>"
+      >
+        <%== icon(:heart) %>
         Health
       </a>
     </li>
 
-    <li class="nav-item ms-3">
-      <a class="nav-link <%= nav_class(start_with: '/routing') %>" href="<%= root_path('routing') %>">
+    <li>
+      <a
+        class="sidebar-nav-item <%= nav_class(start_with: '/routing') %>"
+        href="<%= root_path('routing') %>"
+      >
+        <%== icon(:queue_list) %>
         Routing
       </a>
     </li>
 
-    <li class="nav-item ms-3">
-      <a class="nav-link <%= nav_class(start_with: '/explorer') %>" href="<%= root_path('explorer') %>">
+    <li>
+      <a
+        class="sidebar-nav-item <%= nav_class(start_with: '/explorer') %>"
+        href="<%= root_path('explorer') %>"
+      >
+        <%== icon(:document_glass) %>
         Explorer
       </a>
     </li>
 
-    <li class="nav-item ms-3">
-      <a class="nav-link <%= nav_class(start_with: '/errors') %>" href="<%= root_path('errors') %>">
+    <li>
+      <a
+        class="sidebar-nav-item <%= nav_class(start_with: '/recurring_tasks') %>"
+        href="<%= root_path('recurring_tasks') %>"
+      >
+        <%== icon(:arrow_path_rounded) %>
+        Cron
+      </a>
+    </li>
+
+    <li>
+      <a
+        class="sidebar-nav-item <%= nav_class(start_with: '/errors') %>"
+        href="<%= root_path('errors') %>"
+      >
+        <%== icon(:bug) %>
         Errors
       </a>
     </li>
 
-    <li class="nav-item ms-3">
-      <a class="nav-link <%= nav_class(start_with: '/dlq') %>" href="<%= root_path('dlq') %>">
+    <li>
+      <a
+        class="sidebar-nav-item <%= nav_class(start_with: '/dlq') %>"
+        href="<%= root_path('dlq') %>"
+      >
+        <%== icon(:x_circle) %>
         Dead
       </a>
     </li>
 
-    <li class="nav-item ms-3">
-      <a class="nav-link <%= nav_class(start_with: '/cluster') %>" href="<%= root_path('cluster') %>">
+    <li>
+      <a
+        class="sidebar-nav-item <%= nav_class(start_with: '/cluster') %>"
+        href="<%= root_path('cluster') %>"
+      >
+        <%== icon(:blocks) %>
         Cluster
       </a>
     </li>
 
-    <li class="nav-item ms-3">
-      <a class="nav-link <%= nav_class(start_with: '/topics') %>" href="<%= root_path('topics') %>">
+    <li>
+      <a
+        class="sidebar-nav-item <%= nav_class(start_with: '/topics') %>"
+        href="<%= root_path('topics') %>"
+      >
+        <%== icon(:list_bullets) %>
         Topics
       </a>
     </li>
 
-    <li class="nav-item ms-3">
-      <a class="nav-link <%= nav_class(start_with: '/status') %>" href="<%= root_path('status') %>">
+    <li>
+      <a
+        class="sidebar-nav-item <%= nav_class(start_with: '/status') %>"
+        href="<%= root_path('status') %>"
+      >
+        <%== icon(:check_badge) %>
         Status
       </a>
     </li>
+
+    <li>
+      <a
+        class="sidebar-nav-item <%= nav_class(start_with: '/support') %>"
+        href="<%= root_path('support') %>"
+      >
+        <%== icon(:lifebuoy) %>
+        Support
+      </a>
+    </li>
   </ul>
-</div>
+</nav>

data/lib/karafka/web/pro/ui/views/topics/_breadcrumbs.erb

@@ -1,11 +1,11 @@
-<li class="breadcrumb-item">
+<li>
   <a href="<%= root_path('topics') %>">
-    Topics informations
+    Topics
   </a>
 </li>
 
 <% if @topic %>
-  <li class="breadcrumb-item">
+  <li>
     <a href="<%= root_path('topics', @topic.topic_name, 'config') %>">
       <%= @topic.topic_name %>
     </a>
@@ -13,7 +13,7 @@
 <% end %>
 
 <% if @configs %>
-  <li class="breadcrumb-item">
+  <li>
     <a href="<%= root_path('topics', @topic.topic_name, 'config') %>">
       Configuration
     </a>
@@ -21,7 +21,7 @@
 <% end %>
 
 <% if @partitions %>
-  <li class="breadcrumb-item">
+  <li>
     <a href="<%= root_path('topics', @topic.topic_name, 'replication') %>">
       Replication
     </a>
@@ -29,9 +29,17 @@
 <% end %>
 
 <% if @distribution %>
-  <li class="breadcrumb-item">
+  <li>
     <a href="<%= root_path('topics', @topic.topic_name, 'distribution') %>">
       Distribution
     </a>
   </li>
 <% end %>
+
+<% if @offsets %>
+  <li>
+    <a href="<%= root_path('topics', @topic.topic_name, 'offsets') %>">
+      Offsets
+    </a>
+  </li>
+<% end %>

data/lib/karafka/web/pro/ui/views/topics/_partition_offsets.erb

@@ -0,0 +1,10 @@
+<tr>
+  <td>
+    <a href="<%= explorer_path(@topic[:topic_name], partition_offsets[:partition_id]) %>">
+      <%= partition_offsets[:partition_id] %>
+    </a>
+  </td>
+  <td><%= partition_offsets[:low] %></td>
+  <td><%= partition_offsets[:high] %></td>
+  <td><%= partition_offsets[:diff] %></td>
+</tr>

data/lib/karafka/web/pro/ui/views/topics/_tabs.erb

@@ -1,37 +1,31 @@
-<div class="container">
-  <div class="row mb-5">
-    <div class="col-sm-12">
+<div class="tab-container-wrapper">
+  <div class="tab-container">
+    <a
+      href="<%= root_path('topics', @topic.topic_name, 'config') %>"
+      class="custom-tab <%= nav_class(end_with: 'config') %>"
+    >
+      Configuration
+    </a>
 
-      <ul class="nav nav-tabs">
-        <li class="nav-item">
-          <a
-            class="nav-link <%= nav_class(end_with: 'config') %>"
-            href="<%= root_path('topics', @topic.topic_name, 'config') %>"
-          >
-            Configuration
-          </a>
-        </li>
+    <a
+      href="<%= root_path('topics', @topic.topic_name, 'replication') %>"
+      class="custom-tab <%= nav_class(end_with: 'replication') %>"
+    >
+      Replication
+    </a>
 
-        <li class="nav-item">
-          <a
-            class="nav-link <%= nav_class(end_with: 'replication') %>"
-            href="<%= root_path('topics', @topic.topic_name, 'replication') %>"
-          >
-            Replication
-          </a>
-        </li>
+    <a
+      href="<%= root_path('topics', @topic.topic_name, 'distribution') %>"
+      class="custom-tab <%= nav_class(end_with: 'distribution') %>"
+    >
+      Distribution
+    </a>
 
-        <li class="nav-item">
-          <a
-            class="nav-link <%= nav_class(end_with: 'distribution') %>"
-            href="<%= root_path('topics', @topic.topic_name, 'distribution') %>"
-          >
-            Distribution
-          </a>
-        </li>
-
-      </ul>
-
-    </div>
+    <a
+      href="<%= root_path('topics', @topic.topic_name, 'offsets') %>"
+      class="custom-tab <%= nav_class(end_with: 'offsets') %>"
+    >
+      Offsets
+    </a>
   </div>
 </div>

data/lib/karafka/web/pro/ui/views/topics/_topic.erb

@@ -1,12 +1,9 @@
-<div class="col">
-  <div class="card" >
-    <div class="card-body p-2">
-      <p class="card-text mb-0 p-2">
-        <a href="<%= root_path('topics', topic.topic_name, 'config') %>">
-          <%= topic.topic_name %> /
-          <%= topic.partition_count %>
-        </a>
-      </p>
-    </div>
+<div class="topic-tile">
+  <div class="topic-tile-body">
+    <p class="topic-tile-text">
+      <a href="<%= root_path('topics', topic.topic_name, 'config') %>" class="topic-tile-link">
+        <%= topic.topic_name %> / <%= topic.partition_count %>
+      </a>
+    </p>
   </div>
 </div>

data/lib/karafka/web/pro/ui/views/topics/config.erb

@@ -1,29 +1,25 @@
-<%== view_title(@topic.topic_name, hr: false) %>
+<% view_title @topic.topic_name %>
 
 <%== partial 'topics/tabs' %>
 
-<div class="container mb-5">
-  <div class="row">
-    <div class="col-lg-12 table-responsive">
-      <table class="processes bg-white table table-hover table-bordered table-striped">
-        <thead>
-          <tr class="align-middle">
-            <th><%== sort_link(:name) %></th>
-            <th><%== sort_link(:value) %></th>
-            <th><%== sort_link(:default?) %></th>
-            <th><%== sort_link(:sensitive?) %></th>
-            <th><%== sort_link(:read_only?) %></th>
-          </tr>
-        </thead>
-        <tbody>
-          <%==
-            each_partial(
-              @configs,
-              'cluster/config'
-            )
-          %>
-        </tbody>
-      </table>
-    </div>
-  </div>
+<div class="data-table-wrapper">
+  <table class="data-table">
+    <thead>
+      <tr>
+        <th><%== sort_link(:name) %></th>
+        <th><%== sort_link(:value) %></th>
+        <th><%== sort_link(:default?) %></th>
+        <th><%== sort_link(:sensitive?) %></th>
+        <th><%== sort_link(:read_only?) %></th>
+      </tr>
+    </thead>
+    <tbody>
+      <%==
+        each_partial(
+          @configs,
+          'cluster/config'
+        )
+      %>
+    </tbody>
+  </table>
 </div>

data/lib/karafka/web/pro/ui/views/topics/distribution/_badges.erb

@@ -1,7 +1,12 @@
-<p class="text-end">
-  <span class="badge bg-primary">Total messages: <%= number_with_delimiter @aggregated.sum.round, ' ' %></span>
-  <span class="badge bg-primary">Std dev: <%= @aggregated.std_dev %></span>
-  <span class="badge bg-primary">Std dev relative: <%= @aggregated.std_dev_rel %>%</span>
+<p class="text-end mb-5">
+  <%==
+    value = number_with_delimiter @aggregated.sum.round, ' '
+    badge_primary("Total messages: #{value}")
+  %>
+
+  <%== badge_primary("Std dev: #{@aggregated.std_dev}") %>
+  <%== badge_primary("Std dev relative: #{@aggregated.std_dev_rel}%") %>
+
   <% partitions_range = [@active_partitions.first, @active_partitions.last].uniq.join(' to ') %>
-  <span class="badge bg-secondary">Partitions: <%= partitions_range %></span>
+  <%== badge_secondary("Partitions: #{partitions_range}") %>
 </p>

data/lib/karafka/web/pro/ui/views/topics/distribution/_chart.erb

@@ -1,2 +1,4 @@
 <% data = { 'Estimated count': @distribution.map { [_1.partition_id, _1.count] } }.to_json %>
-<%== partial 'shared/charts/bar', locals: { data: data, id: 'distribution' } %>
+<div class="mb-5">
+  <%== partial 'shared/charts/bar', locals: { data: data, id: 'distribution' } %>
+</div>

data/lib/karafka/web/pro/ui/views/topics/distribution/_limited.erb

@@ -1,4 +1,4 @@
-<div class="mb-4">
+<div class="mb-10">
   <%==
     alert_info(
       '

data/lib/karafka/web/pro/ui/views/topics/distribution.erb

@@ -1,47 +1,42 @@
-<%== view_title(@topic.topic_name, hr: false) %>
+<% view_title @topic.topic_name %>
 
 <%== partial 'topics/tabs' %>
 
-<div class="container">
-  <div class="row">
-    <div class="col-lg-12">
-      <% if @limited %>
-        <%== partial 'topics/distribution/limited' %>
-      <% end %>
+<% if @limited %>
+  <%== partial 'topics/distribution/limited' %>
+<% end %>
 
-      <% if @aggregated.sum.zero? %>
-        <%== partial 'topics/distribution/empty_partitions' %>
-      <% else %>
-        <% if @active_partitions.size >= 2 %>
-          <%== partial 'topics/distribution/chart' %>
-        <% end %>
+<% if @aggregated.sum.zero? %>
+  <%== partial 'topics/distribution/empty_partitions' %>
+<% else %>
+  <div class="col-span-12 mb-3">
+    <% if @active_partitions.size >= 2 %>
+      <%== partial 'topics/distribution/chart' %>
+    <% end %>
 
-        <div id="refreshable" class="mt-4">
-          <%== partial 'topics/distribution/badges' %>
-
-          <div class="table-responsive">
-            <table class="bg-white table table-hover table-bordered table-striped mt-4 mb-4">
-              <thead>
-                <tr class="align-middle">
-                  <th><%== sort_link(:partition_id) %></th>
-                  <th><%== sort_link('Estimated count', :count) %></th>
-                  <th><%== sort_link('Total share', :share) %></th>
-                  <th><%== sort_link(:diff) %></th>
-                </tr>
-              </thead>
-              <tbody>
-                <%==
-                  each_partial(
-                    @distribution,
-                    'topics/distribution/partition'
-                  )
-                %>
-              </tbody>
-            </table>
-          </div>
-        </div>
-      <% end %>
+    <div id="refreshable" class="mt-4">
+      <%== partial 'topics/distribution/badges' %>
 
+      <div class="data-table-wrapper">
+        <table class="data-table">
+          <thead>
+            <tr>
+              <th><%== sort_link(:partition_id) %></th>
+              <th><%== sort_link('Estimated count', :count) %></th>
+              <th><%== sort_link('Total share', :share) %></th>
+              <th><%== sort_link(:diff) %></th>
+            </tr>
+          </thead>
+          <tbody>
+            <%==
+              each_partial(
+                @distribution,
+                'topics/distribution/partition'
+              )
+            %>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
-</div>
+<% end %>