karafka-web 0.9.0 → 0.10.0.beta1

data/lib/karafka/web/pro/ui/views/routing/show.erb

@@ -1,38 +1,46 @@
-<%==
+<%
   title = [@topic.consumer_group.name, @topic.subscription_group, @topic.name].join(': ')
-  view_title(title, hr: true)
+  view_title title
 %>
 
-<div class="container">
-  <div class="row mb-5">
-    <div class="col-sm-12 table-responsive">
-      <table class="processes bg-white table table-hover table-bordered table-striped mb-0 align-middle">
-        <tbody>
-          <% flat_hash(@topic.to_h).each do |k, v| %>
-            <%==
-              partial(
-                'routing/detail',
-                locals: {
-                  k: k,
-                  v: v
-                }
-              )
-            %>
-          <% end %>
+<div class="data-table-wrapper">
+  <table class="data-table">
+    <tbody>
+      <% flat_hash(@topic.subscription_group.kafka).each do |k, v| %>
+        <%==
+          partial(
+            'routing/detail',
+            locals: {
+              k: "kafka.#{k}",
+              v: v
+            }
+          )
+        %>
+      <% end %>
 
-          <% flat_hash(@topic.subscription_group.multiplexing.to_h).each do |k, v| %>
-            <%==
-              partial(
-                'routing/detail',
-                locals: {
-                  k: "multiplexing.#{k}",
-                  v: v
-                }
-              )
-            %>
-          <% end %>
-        </tbody>
-      </table>
-    </div>
-  </div>
+      <% flat_hash(@topic.to_h.except(:kafka)).each do |k, v| %>
+        <%==
+          partial(
+            'routing/detail',
+            locals: {
+              k: k,
+              v: v
+            }
+          )
+        %>
+      <% end %>
+
+      <% flat_hash(@topic.subscription_group.multiplexing.to_h).each do |k, v| %>
+        <%==
+          partial(
+            'routing/detail',
+            locals: {
+              k: "multiplexing.#{k}",
+              v: v
+            }
+          )
+        %>
+      <% end %>
+    </tbody>
+  </table>
 </div>

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

@@ -0,0 +1,3 @@
+<%==
+  alert_error('Search criteria are not correct. Please fix them.')
+%>

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

@@ -0,0 +1,71 @@
+<div id="search-metadata-details" class="hidden">
+  <div class="data-table-wrapper">
+    <table class="data-table">
+      <thead>
+        <tr>
+          <th colspan="2">Summary</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Total Messages Checked</td>
+          <td><%= @search_details[:totals][:checked] %></td>
+        </tr>
+        <tr>
+          <td>Matches</td>
+          <td><%= @search_details[:totals][:matched] %></td>
+        </tr>
+        <tr>
+          <td>Search Time</td>
+          <td><%= (@search_details[:totals][:time_taken] / 1000).round(1) %> second</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
+  <div class="data-table-wrapper">
+    <table class="data-table">
+      <thead>
+        <tr>
+          <th>Partition</th>
+          <th>Messages Checked</th>
+          <th>Offsets</th>
+          <th>Lookup Range</th>
+          <th>Matches</th>
+        </tr>
+      </thead>
+      <tbody>
+        <% @search_details[:partitions].sort.to_h.each do |k, v| %>
+          <tr>
+            <td>Partition <%= k %></td>
+            <td><%= v[:checked] %></td>
+            <% if v[:first_message] %>
+              <td>
+                <%= v[:first_message].offset %>
+                -
+                <%= v[:last_message].offset %>
+              </td>
+              <td>
+                <%
+                  time_s = (
+                    v[:last_message].timestamp.to_f - v[:first_message].timestamp.to_f
+                  ).round(2)
+                %>
+                <span title="<%= time_s %> seconds">
+                  <%=
+                    human_readable_time(time_s)
+                  %>
+                </span>
+              </td>
+              <td><%= v[:matched] %></td>
+            <% else %>
+              <td>N/A</td>
+              <td>N/A</td>
+              <td>N/A</td>
+            <% end %>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
+</div>

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

@@ -0,0 +1,3 @@
+<%==
+  alert_info('No results found. Try aligning your search criteria.')
+%>

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

@@ -0,0 +1,5 @@
+<div id="no-search-criteria">
+  <%==
+    alert_info('No search criteria provided. Press the Edit button to perform a search.')
+  %>
+</div>

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

@@ -0,0 +1,37 @@
+<div class="col-span-4">
+  <section class="actions">
+    <button class="btn-action" id="show-search-modal">
+      <%== icon(:magnifying_glass) %>
+    </button>
+
+    <% if @search_criteria && @errors.empty? %>
+      <button
+        class="btn-action"
+        type="button"
+        id="toggle-search-metadata"
+        title="Display search metadata details"
+      >
+        <%== icon(:chart_bar) %>
+      </button>
+    <% end %>
+  </section>
+</div>
+
+<div class="col-span-8">
+  <section class="items-center text-end text-gray-700 text-end mt-1 mb-2">
+    <% if @search_criteria && @errors.empty? %>
+      Search criteria:
+
+      <% params.current_search.each do |key, values| %>
+        <span class="badge badge-secondary">
+          <%= key.gsub('_', ' ') %>:
+          <% if values.is_a?(Hash) %>
+            <%= Array(values.values).join(', ') %>
+          <% else %>
+            <%= Array(values).join(', ') %>
+          <% end %>
+        </span>
+      <% end %>
+    <% end %>
+  </section>
+</div>

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,125 @@
-<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: '/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>