karafka-web 0.9.0 → 0.10.0.beta1

data/lib/karafka/web/pro/ui/views/explorer/_selector.erb

@@ -0,0 +1,12 @@
+<p class="w-full">
+  <label class="text-gray-700">Partition:</label>
+  <select class="select select-bordered w-full max-w-xs select-sm ml-1" id="current-partition">
+    <%==
+      each_partial(
+        [nil] + @partitions_count.times.to_a,
+        'explorer/partition_option',
+        local: :partition
+      )
+    %>
+  </select>
+</p>

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

@@ -1,12 +1,10 @@
-<div class="col">
-  <div class="card" >
-    <div class="card-body p-2">
-      <p class="card-text mb-0 p-2">
-        <a href="<%= explorer_path(topic[:topic_name]) %>">
+<div class="topic-tile">
+  <div class="topic-tile-body">
+    <p class="topic-tile-text">
+      <a href="<%= explorer_path(topic[:topic_name]) %>" class="topic-tile-link">
           <%= topic[:topic_name] %> /
           <%= topic[:partition_count] %>
-        </a>
-      </p>
-    </div>
+      </a>
+    </p>
   </div>
 </div>

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

@@ -1,16 +1,14 @@
-<%== view_title('Explorer', hr: true) %>
+<% view_title 'Explorer' %>
 
-<div class="container">
-  <% if @topics.empty? %>
-    <%== partial 'explorer/no_topics' %>
-  <% else %>
-    <div class="row mb-5 row-cols-1 row-cols-md-4 g-4">
-      <%==
-        each_partial(
-          @topics,
-          'explorer/topic'
-        )
-      %>
-    </div>
-  <% end %>
-</div>
+<% if @topics.empty? %>
+  <%== partial 'explorer/no_topics' %>
+<% else %>
+  <div class="topic-tiles">
+    <%==
+      each_partial(
+        @topics,
+        'explorer/topic'
+      )
+    %>
+  </div>
+<% end %>

data/lib/karafka/web/pro/ui/views/explorer/message/_metadata.erb

@@ -22,46 +22,82 @@
   %>
 <% end %>
 
-<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>
-        <%==
-          partial(
-            'explorer/messages/key',
-            locals: { message: @message }
-          )
-        %>
+<div class="data-table-wrapper">
+  <table class="data-table">
+    <tbody>
+      <%==
+        partial(
+          'explorer/messages/key',
+          locals: { message: @message }
+        )
+      %>
+
+      <%==
+        partial(
+          'explorer/messages/detail',
+          locals: {
+            k: 'time',
+            v: @message.timestamp
+          }
+        )
+      %>
 
-        <% @message.metadata.to_h.except(:received_at, :raw_key, :raw_headers, :message).each do |k, v| %>
-          <%==
-            partial(
-              'explorer/messages/detail',
-              locals: {
-                k: k,
-                v: v
-              }
-            )
-          %>
-        <% end %>
+      <%==
+        partial(
+          'explorer/messages/detail',
+          locals: {
+            k: 'timestamp',
+            v: (@message.timestamp.to_f * 1_000).to_i
+          }
+        )
+      %>
 
+      <% special = %i[received_at timestamp raw_key raw_headers message deserializers] %>
+      <% @message.metadata.to_h.except(*special).each do |k, v| %>
         <%==
           partial(
             'explorer/messages/detail',
             locals: {
-              k: 'bytesize',
-              v: format_memory(((@message.raw_payload&.bytesize || 0) / 1024.to_f).round(4))
+              k: k,
+              v: v
             }
           )
         %>
+      <% end %>
 
-        <%==
-          partial(
-            'explorer/messages/headers',
-            locals: { message: @message }
-          )
-        %>
-      </tbody>
-    </table>
-  </div>
+      <tr>
+        <td>
+          deserializers.key
+        </td>
+        <td>
+          <code><%== object_value_to_s @message.metadata.deserializers.key %></code>
+        </td>
+      </tr>
+
+      <tr>
+        <td>
+          deserializers.headers
+        </td>
+        <td>
+          <code><%== object_value_to_s @message.metadata.deserializers.headers %></code>
+        </td>
+      </tr>
+
+      <tr>
+        <td>
+          deserializers.payload
+        </td>
+        <td>
+          <code><%== object_value_to_s @message.metadata.deserializers.payload %></code>
+        </td>
+      </tr>
+
+      <%==
+        partial(
+          'explorer/messages/headers',
+          locals: { message: @message }
+        )
+      %>
+    </tbody>
+  </table>
 </div>

data/lib/karafka/web/pro/ui/views/explorer/message/_payload.erb

@@ -1,21 +1,22 @@
 <% if @visibility_filter.payload?(@message) %>
-  <div class="row">
-    <div class="col-sm-12 mb-4">
-      <% if @safe_payload.failure? %>
-        <%== partial 'explorer/failed_deserialization', locals: { attribute: 'payload', error: @safe_payload.error } %>
-      <% end %>
+  <% if @safe_payload.failure? %>
+    <%==
+      partial(
+        'explorer/failed_deserialization',
+        locals: { attribute: 'payload', error: @safe_payload.error }
+      )
+    %>
+  <% end %>
 
-      <div class="card">
-        <div class="card-body">
-          <% if @safe_payload.failure? %>
-            <pre class="m-0 p-0"><code class="wrapped json p-0 m-0"><%= @message.raw_payload %></code></pre>
-          <% else %>
-            <pre class="m-0 p-0"><code class="wrapped json p-0 m-0"><%= @safe_payload.result %></code></pre>
-          <% end %>
-        </div>
-      </div>
-    </div>
-  </div>
+  <% if (@message.raw_payload&.bytesize || 0) > Karafka::Web.config.ui.max_visible_payload_size %>
+    <%== partial('explorer/message/too_big_to_be_displayed') %>
+  <% else %>
+    <% if @safe_payload.failure? %>
+      <pre class="code"><code class="json"><%= @message.raw_payload %></code></pre>
+    <% else %>
+      <pre class="code"><code class="json"><%= JSON.pretty_generate(@safe_payload.result) %></code></pre>
+    <% end %>
+  <% end %>
 <% else %>
   <%== partial 'explorer/filtered' %>
 <% end %>

data/lib/karafka/web/pro/ui/views/explorer/message/_resources_utilization.erb

@@ -0,0 +1,127 @@
+<div class="data-table-wrapper">
+  <table class="data-table">
+    <tbody>
+      <%==
+        partial(
+          'explorer/messages/detail',
+          locals: {
+            k: 'key.bytesize',
+            v: format_memory((@message.raw_key&.bytesize || 0) / 1024.0)
+          }
+        )
+      %>
+
+      <tr>
+        <td>
+          key.cpu_time
+        </td>
+        <td>
+          <%== @safe_key.cpu_time.round(4) %> ms
+        </td>
+      </tr>
+
+      <tr>
+        <td>
+          key.total_time
+        </td>
+        <td>
+          <%== @safe_key.total_time.round(4) %> ms
+        </td>
+      </tr>
+
+      <tr>
+        <td>
+          key.allocations
+        </td>
+        <td>
+          <%= @safe_key.allocations || 'Not Available' %>
+        </td>
+      </tr>
+
+      <%
+        bytesize = 0
+
+        @message.raw_headers.each do |h, v|
+          bytesize += h.bytesize
+          bytesize += v.bytesize
+        end
+
+        kbytesize = bytesize / 1024.0
+      %>
+
+      <%==
+        partial(
+          'explorer/messages/detail',
+          locals: {
+            k: 'headers.bytesize',
+            v: format_memory(kbytesize)
+          }
+        )
+      %>
+
+      <tr>
+        <td>
+          headers.cpu_time
+        </td>
+        <td>
+          <%== @safe_headers.cpu_time.round(4) %> ms
+        </td>
+      </tr>
+
+      <tr>
+        <td>
+          headers.total_time
+        </td>
+        <td>
+          <%== @safe_headers.total_time.round(4) %> ms
+        </td>
+      </tr>
+
+      <tr>
+        <td>
+          headers.allocations
+        </td>
+        <td>
+          <%= @safe_headers.allocations || 'Not Available' %>
+        </td>
+      </tr>
+
+      <%==
+        partial(
+          'explorer/messages/detail',
+          locals: {
+            k: 'payload.bytesize',
+            v: format_memory((@message.raw_payload&.bytesize || 0) / 1024.0)
+          }
+        )
+      %>
+
+      <tr>
+        <td>
+          payload.cpu_time
+        </td>
+        <td>
+          <%== @safe_payload.cpu_time.round(4) %> ms
+        </td>
+      </tr>
+
+      <tr>
+        <td>
+          payload.total_time
+        </td>
+        <td>
+          <%== @safe_payload.total_time.round(4) %> ms
+        </td>
+      </tr>
+
+      <tr>
+        <td>
+          payload.allocations
+        </td>
+        <td>
+          <%= @safe_payload.allocations || 'Not Available' %>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>

data/lib/karafka/web/pro/ui/views/explorer/message/_too_big_to_be_displayed.erb

@@ -0,0 +1,20 @@
+<div class="col-span-12 mb-6">
+  <div class="alert alert-warning">
+    <%== icon :exclamation_triangle %>
+
+    <span>
+      Message payloads larger than
+      <strong>
+      <%=
+        format_memory((Karafka::Web.config.ui.max_visible_payload_size / 1024.to_f).round(4))
+      %>
+      </strong>
+      are not displayed to prevent browser performance issues.
+
+      <br/>
+      <br/>
+
+      This limit ensures a smooth and responsive user experience. If you need to view larger payloads, please download the message and inspect it using an appropriate tool.
+    </span>
+  </div>
+</div>

data/lib/karafka/web/pro/ui/views/explorer/messages/_detail.erb

@@ -1,6 +1,6 @@
 <% if v.is_a?(Hash) && !v.empty? %>
   <% v.each do |k2,v2| %>
-   <tr class="align-middle">
+   <tr>
       <td>
          <%= "#{k}.#{k2}" %>
       </td>

data/lib/karafka/web/pro/ui/views/explorer/partition/_cleaned.erb

@@ -1,5 +1,3 @@
-<div class="mt-4">
-  <%==
-    alert_info('This partition no longer contains any data and has been fully compacted.')
-  %>
-</div>
+<%==
+  alert_info('This partition no longer contains any data and has been fully compacted.')
+%>

data/lib/karafka/web/pro/ui/views/explorer/partition/_empty.erb

@@ -1,5 +1,3 @@
-<div class="mt-4">
-  <%==
-    alert_info('This partition is empty and does not contain any data.')
-  %>
-</div>
+<%==
+  alert_info('This partition is empty and does not contain any data.')
+%>

data/lib/karafka/web/pro/ui/views/explorer/partition/_messages.erb

@@ -1,10 +1,11 @@
-<div class="table-responsive">
-  <table class="processes bg-white table table-hover table-bordered table-striped mb-0 align-middle">
+<div class="data-table-wrapper">
+  <table class="data-table">
     <thead>
-      <tr class="align-middle">
+      <tr>
         <th>Partition</th>
         <th>Offset</th>
         <th>Timestamp</th>
+        <th>Time</th>
         <th>Key</th>
         <th></th>
       </tr>
@@ -18,4 +19,6 @@
       %>
     </tbody>
   </table>
+
+  <%== content_for :table_metadata %>
 </div>

data/lib/karafka/web/pro/ui/views/explorer/partition.erb

@@ -1,49 +1,70 @@
-<div class="container mb-4">
-  <div class="row">
-    <div class="col">
-      <h3>
-        <%= @topic_id %>
-      </h3>
-    </div>
-
-    <div class="col">
-        <div class="col-auto text-end">
-           <label class="col-form-label">Partition</label>
-        </div>
-    </div>
-
-    <div class="col pt-1 mb-0 pb-0">
-        <div class="col-auto">
-          <select class="form-select form-select-sm mb-0 form-control" id="current-partition">
-            <%==
-              each_partial(
-                [nil] + @partitions_count.times.to_a,
-                'explorer/partition_option',
-                local: :partition
-              )
-            %>
-          </select>
-        </div>
-    </div>
-  </div>
-
-  <hr>
+<% view_title "#{@topic_id} partition #{@partition_id}" %>
+
+<div class="col-span-4">
+  <section class="actions">
+    <% if @messages && !@messages.empty? %>
+      <a
+        href="<%= explorer_path(@topic_id, @partition_id, 'recent') %>"
+        class="btn-action"
+        title="Display the most recent message for this partition with auto-refresh"
+      >
+        <%== icon(:play_circle) %>
+      </a>
+
+      <a
+        href="<%= explorer_path(@topic_id, 'search', "?partition=#{@partition_id}") %>"
+        class="btn-action"
+        title="Search in this topic"
+      >
+        <%== icon(:magnifying_glass) %>
+      </a>
+
+      <% closest_path = explorer_path(@topic_id, @partition_id) %>
+      <input
+        type="image"
+        src="<%= asset_path('images/calendar.svg') %>"
+        width="45"
+        height="32"
+        class="btn-action p-1 opacity-60"
+        id="offset-lookup-datepicker"
+        value=""
+        data-target="<%= closest_path %>"
+      />
+    <% end %>
+  </section>
+</div>
+
+<div class="col-span-8 mb-3">
+  <section class="actions">
+    <%== partial 'explorer/selector' %>
+  </section>
 </div>
 
-<div class="container">
-  <div class="row mb-5">
-    <div class="col-sm-12">
-      <%== partial('explorer/partition/details') %>
-
-      <% if @watermark_offsets.empty? && params.current_page == 1 %>
-        <%== partial 'explorer/partition/empty' %>
-      <% elsif @watermark_offsets.cleaned? && params.current_page == 1 %>
-        <%== partial 'explorer/partition/cleaned' %>
-      <% elsif @messages.empty? %>
-        <%== partial 'shared/no_paginated_data' %>
-      <% else %>
-        <%== partial('explorer/partition/messages') %>
-      <% end %>
-    </div>
-  </div>
+<div class="col-span-12">
+  <% if @limited %>
+    <%== partial('explorer/topic/limited') %>
+  <% end %>
+
+  <% if @watermark_offsets.empty? && params.current_page == 1 %>
+    <%== partial 'explorer/partition/empty' %>
+  <% elsif @watermark_offsets.cleaned? && params.current_page == 1 %>
+    <%== partial 'explorer/partition/cleaned' %>
+  <% elsif @messages.empty? %>
+    <%== partial 'shared/no_paginated_data' %>
+  <% else %>
+    <% content_for :table_metadata do %>
+      <p class="table_metadata">
+        Watermark offsets:
+        <span class="badge badge-secondary mt-1 mb-1">
+          high: <%= @watermark_offsets.high %>
+        </span>
+
+        <span class="badge badge-secondary mt-1 mb-1">
+          low: <%= @watermark_offsets.low %>
+        </span>
+      </p>
+    <% end %>
+
+    <%== partial('explorer/partition/messages') %>
+  <% end %>
 </div>

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

@@ -1,33 +1,97 @@
-<div class="container">
-  <%== partial 'explorer/message/message_actions' %>
+<% view_title "Message with offset #{@message.offset} from partition #{@message.partition}" %>
 
-  <div class="row mb-4">
-    <div class="col-sm-12">
-      <h5 class="mb-2">
-        Metadata
-      </h5>
-      <hr/>
+<%
+  republish_path = root_path('messages', @message.topic, @message.partition, @message.offset, 'republish')
+  surrounding_path = explorer_path(@message.topic, @message.partition, @message.offset, 'surrounding')
+%>
 
-    </div>
-  </div>
+<div class="col-span-12">
+  <section class="actions">
+    <% if @visibility_filter.republish?(@message) %>
+      <form action="<%= republish_path %>" method="post" class="confirm-action float-end">
+        <%== csrf_tag(republish_path) %>
+        <button
+          type="submit"
+          class="btn-action"
+          title="Republish this message to the same topic partition"
+          data-turbo="false"
+        >
+          <%== icon(:arrow_path_rounded) %>
+        </button>
+      </form>
+    <% end %>
+
+    <a
+      href="<%= surrounding_path %>"
+      class="btn-action"
+      title="Go to this message surrounding position"
+    >
+      <%== icon(:arrows_right_left) %>
+    </a>
+
+
+    <% if @visibility_filter.download?(@message) %>
+      <a
+        href="<%= root_path('messages', @message.topic, @message.partition, @message.offset, 'download') %>"
+        class="btn-action"
+        title="Download raw payload"
+        data-turbo="false"
+      >
+        <%== icon(:arrow_down_tray) %>
+      </a>
+    <% end %>
 
-  <%== partial 'explorer/message/metadata' %>
+    <% if @visibility_filter.export?(@message) && @safe_payload.success? %>
+      <a
+        href="<%= root_path('messages', @message.topic, @message.partition, @message.offset, 'export') %>"
+        class="btn-action"
+        title="Export as JSON"
+        data-turbo="false"
+      >
+        <%== icon(:arrow_down_on_square) %>
+      </a>
+    <% end %>
+
+    <button
+      class="btn-action btn-toggle"
+      title="Show the message metadata details"
+      id="metadata-button"
+      data-toggle-target="metadata-details"
+    >
+      <%== icon(:circle_stack) %>
+    </button>
+
+    <button
+      class="btn-action btn-toggle"
+      title="Show the message utilization details"
+      id="utilization-button"
+      data-toggle-target="utilization-details"
+    >
+      <%== icon(:cpu) %>
+    </button>
+  </section>
 </div>
 
-<div class="container">
-  <div class="row mb-4">
-    <div class="col-sm-12">
-      <h5 class="mb-2 float-start">
-        Payload
-      </h5>
+<div class="col-span-12 mb-6">
+  <div id="utilization-details" class="hidden">
+    <h2 class="h2">
+      Utilization
+    </h2>
 
-      <%== partial 'explorer/message/payload_actions' %>
+    <%== partial 'explorer/message/resources_utilization' %>
+  </div>
 
-      <div class="clearfix"></div>
+  <div id="metadata-details">
+    <h2 class="h2">
+      Metadata
+    </h2>
 
-      <hr/>
-    </div>
+    <%== partial 'explorer/message/metadata' %>
   </div>
 
+  <h2 class="h2">
+    Payload
+  </h2>
+
   <%== partial 'explorer/message/payload' %>
 </div>