karafka-web 0.6.2 → 0.7.0

data/lib/karafka/web/ui/pro/views/errors/_error.erb

@@ -22,7 +22,7 @@
     </td>
     <td>
       <%= error[:error_class] %>:
-      <%= error[:error_message].first(200) %>
+      <%= error[:error_message][0..199] %>
     </td>
     <td>
       <%== relative_time error[:occurred_at] %>

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

@@ -3,7 +3,7 @@
 <div class="container">
   <div class="row mb-5">
     <div class="col-sm-12">
-      <%== partial('explorer/topic/partitions') %>
+      <%== partial('explorer/topic/details') %>
 
       <% if @limited %>
         <%== partial('explorer/topic/limited') %>

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

@@ -3,7 +3,7 @@
 <div class="container">
   <div class="row mb-5">
     <div class="col-sm-12">
-      <%== partial('explorer/partition/watermark_offsets') %>
+      <%== partial('explorer/partition/details') %>
 
       <% if @watermark_offsets.empty? %>
         <%== partial 'errors/no_errors' %>

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

@@ -45,7 +45,7 @@
     </div>
   </div>
 
-  <div class="row mb-4">
+  <div class="row mb-5">
     <div class="col-sm-12">
       <div class="card">
         <div class="card-body">

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

@@ -6,7 +6,7 @@
 
 <% if @topic_id %>
   <li class="breadcrumb-item">
-    <a href="<%= root_path('explorer', @topic_id) %>">
+    <a href="<%= explorer_path(@topic_id) %>">
       <%= @topic_id %>
     </a>
   </li>
@@ -14,16 +14,18 @@
 
 <% if @partition_id %>
   <li class="breadcrumb-item">
-    <a href="<%= root_path('explorer', @topic_id, @partition_id) %>">
+    <a href="<%= explorer_path(@topic_id, @partition_id) %>">
       Partition <%= @partition_id %>
     </a>
   </li>
 <% end %>
 
 <% if @offset %>
+  <% mapped_offset = @offset == -1 ? 'Recent' : @offset %>
+
   <li class="breadcrumb-item active">
-    <a href="<%= root_path('explorer', @topic_id, @partition_id, @offset) %>">
-      <%= @offset %>
+    <a href="<%= explorer_path(@topic_id, @partition_id, mapped_offset) %>">
+      <%= mapped_offset %>
     </a>
   </li>
 <% end %>

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

@@ -0,0 +1,16 @@
+<div class="row">
+  <div class="col-sm-12">
+    <div class="alert alert-warning" role="alert">
+      <h4 class="alert-heading">
+        This payload cannot be displayed.
+      </h4>
+      <p class="mt-3">
+        Payload visibility for this message was disabled.
+      </p>
+      <hr>
+      <p class="mb-0">
+        This message payload may contain sensitive data, and its visibility was limited by using the Karafka Web-UI visibility filtering capabilities.
+      </p>
+    </div>
+  </div>
+</div>

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

@@ -22,10 +22,14 @@
       <%== time_with_label(message.timestamp) %>
     </td>
     <td>
-      <%= message.key %>
+      <% if @visibility_filter.key?(message) %>
+        <%= message.key %>
+      <% else %>
+        <span class="text-muted">[Filtered]</span>
+      <% end %>
     </td>
     <td class="text-center">
-      <a href="<%= root_path('explorer', message.topic, message.partition, message.offset) %>" class="btn btn-sm btn-secondary">
+      <a href="<%= explorer_path(message.topic, message.partition, message.offset) %>" class="btn btn-sm btn-secondary">
         Details
       </a>
     </td>

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

@@ -0,0 +1,7 @@
+<div class="row">
+  <div class="col-lg-12">
+    <div class="alert alert-info" role="alert">
+      There are no available topics in the current cluster.
+    </div>
+  </div>
+</div>

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

@@ -1,7 +1,7 @@
 <% if @partition_id == partition %>
-  <option value="<%= root_path('explorer', @topic_id, partition) %>" selected=selected>
+  <option value="<%= explorer_path(@topic_id, partition) %>" selected=selected>
 <% else %>
-  <option value="<%= root_path('explorer', @topic_id, partition) %>">
+  <option value="<%= explorer_path(@topic_id, partition) %>">
 <% end %>
   <%= partition || 'All' %>
 </option>

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

@@ -2,7 +2,7 @@
   <div class="card" >
     <div class="card-body p-2">
       <p class="card-text mb-0 p-2">
-        <a href="<%= root_path('explorer', topic[:topic_name]) %>">
+        <a href="<%= explorer_path(topic[:topic_name]) %>">
           <%= topic[:topic_name] %> /
           <%= topic[:partition_count] %>
         </a>

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

@@ -6,12 +6,16 @@
 </div>
 
 <div class="container">
-  <div class="row mb-5 row-cols-1 row-cols-md-4 g-4">
-    <%==
-      each_partial(
-        @topics,
-        'explorer/topic'
-      )
-    %>
-  </div>
+  <% 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>

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

@@ -0,0 +1,15 @@
+<% visible = @visibility_filter.headers?(message) %>
+<% message.metadata.to_h.fetch(:headers).each do |k, v| %>
+  <tr>
+    <td>
+      <%= "headers.#{k}" %>
+    </td>
+    <td>
+      <% if visible %>
+        <%= object_value_to_s(v) %>
+      <% else %>
+        <span class="text-muted">[Filtered]</span>
+      <% end %>
+    </td>
+  </tr>
+<% end %>

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

@@ -0,0 +1,12 @@
+<tr>
+  <td>
+    key
+  </td>
+  <td>
+    <% if @visibility_filter.key?(message) %>
+      <%= message.key %>
+    <% else %>
+      <span class="text-muted">[Filtered]</span>
+    <% end %>
+  </td>
+</tr>

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

@@ -0,0 +1,35 @@
+<div class="container mb-4">
+  <div class="row">
+    <div class="col-sm-6 ms-0 ps-0">
+      <% if @messages && !@messages.empty? %>
+        <a
+          href="<%= explorer_path(@topic_id, @partition_id, 'recent') %>"
+          class="btn btn-secondary btn-sm"
+          title="Display the most recent message for this partition"
+        >
+          &#x2192; Recent
+        </a>
+      <% end %>
+
+      <% closest_path = explorer_path(@topic_id, @partition_id) %>
+      <input
+        type="button"
+        class="btn-secondary btn btn-sm"
+        id="offset-lookup-datepicker"
+        value="&#128198;"
+        data-target="<%= closest_path %>"
+      />
+    </div>
+
+    <div class="col-sm-6 text-end me-0 pe-0">
+      Watermark offsets:
+      <span class="badge bg-secondary mt-1 mb-1">
+        high: <%= @watermark_offsets.high %>
+      </span>
+
+      <span class="badge bg-secondary mt-1 mb-1">
+        low: <%= @watermark_offsets.low %>
+      </span>
+    </div>
+  </div>
+</div>

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

@@ -33,12 +33,14 @@
 <div class="container">
   <div class="row mb-5">
     <div class="col-sm-12">
-      <%== partial('explorer/partition/watermark_offsets') %>
+      <%== partial('explorer/partition/details') %>
 
-      <% if @watermark_offsets.empty? %>
+      <% if @watermark_offsets.empty? && params.current_page == 1 %>
         <%== partial 'explorer/partition/empty' %>
-      <% elsif @watermark_offsets.cleaned? %>
+      <% 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 %>

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

@@ -1,4 +1,23 @@
+<%
+  republish_path = root_path('messages', @message.topic, @message.partition, @message.offset, 'republish')
+  surrounding_path = explorer_path(@message.topic, @message.partition, @message.offset, 'surrounding')
+%>
+
 <div class="container">
+  <div class="row mb-0">
+    <div class="col-sm-12 text-end">
+      <a href="<%= surrounding_path %>" class="btn btn-secondary btn-sm float-end ms-1">
+        &#8651;
+        Surrounding
+      </a>
+
+      <form action="<%= republish_path %>" method="post" class="confirm-action float-end">
+        <%== csrf_tag(republish_path) %>
+        <input type="submit" value="&#10227; Republish" class="btn btn-primary btn-sm"/>
+      </form>
+    </div>
+  </div>
+
   <div class="row mb-4">
     <div class="col-sm-12">
       <h5 class="mb-2">
@@ -13,10 +32,10 @@
     <div class="col-sm-12">
       <table class="processes bg-white table table-hover table-bordered table-striped mb-0 align-middle">
         <tbody>
-          <% @message.metadata.to_h.except(:received_at).each do |k, v| %>
+          <% @message.metadata.to_h.except(:received_at, :key, :headers).each do |k, v| %>
             <%==
               partial(
-                'explorer/detail',
+                'explorer/messages/detail',
                 locals: {
                   k: k,
                   v: v
@@ -24,6 +43,30 @@
               )
             %>
           <% end %>
+
+          <%==
+            partial(
+              'explorer/messages/detail',
+              locals: {
+                k: 'bytesize',
+                v: format_memory((@message.raw_payload&.bytesize || 0 / 1024.to_f).round(2))
+              }
+            )
+          %>
+
+          <%==
+            partial(
+              'explorer/messages/key',
+              locals: { message: @message }
+            )
+          %>
+
+          <%==
+            partial(
+              'explorer/messages/headers',
+              locals: { message: @message }
+            )
+          %>
         </tbody>
       </table>
     </div>
@@ -41,9 +84,9 @@
     </div>
   </div>
 
-  <% if @decrypt %>
+  <% if @visibility_filter.payload?(@message) %>
     <div class="row">
-      <div class="col-sm-12">
+      <div class="col-sm-12 mb-4">
         <% if @payload_error %>
           <%== partial 'explorer/failed_deserialization' %>
         <% end %>
@@ -60,6 +103,6 @@
       </div>
     </div>
   <% else %>
-    <%== partial 'explorer/encryption_enabled' %>
+    <%== partial 'explorer/filtered' %>
   <% end %>
 </div>

data/lib/karafka/web/ui/pro/views/explorer/topic/_details.erb

@@ -0,0 +1,23 @@
+<div class="container mb-4">
+  <div class="row">
+    <div class="col-sm-6 ms-0 ps-0">
+      <% if @messages && !@messages.empty? %>
+        <a href="<%= explorer_path(@topic_id, 'recent') %>" class="btn btn-secondary btn-sm" title="Display the most recent message for this partition">
+          &#x2192; Recent
+        </a>
+      <% end %>
+    </div>
+
+    <div class="col-sm-6 text-end me-0 pe-0">
+      Partitions:
+      <span class="badge bg-secondary mt-1 mb-1">
+        total: <%= @partitions_count %>
+      </span>
+
+      <span class="badge bg-secondary mt-1 mb-1">
+        visible:
+        <%= [@active_partitions.first, @active_partitions.last].uniq.join(' to ') %>
+      </span>
+    </div>
+  </div>
+</div>

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

@@ -13,17 +13,17 @@
     </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 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>
 
@@ -33,7 +33,7 @@
 <div class="container">
   <div class="row mb-5">
     <div class="col-sm-12">
-      <%== partial('explorer/topic/partitions') %>
+      <%== partial('explorer/topic/details') %>
 
       <% if @limited %>
         <%== partial('explorer/topic/limited') %>
@@ -41,6 +41,8 @@
 
       <% if @messages.empty? && params.current_page == 1 %>
         <%== partial 'explorer/topic/empty' %>
+      <% elsif @messages.empty? %>
+        <%== partial 'shared/no_paginated_data' %>
       <% else %>
         <%== partial('explorer/partition/messages') %>
       <% end %>

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

@@ -3,3 +3,19 @@
     Consumers groups health
   </a>
 </li>
+
+<% if current_path.include?('/overview') %>
+  <li class="breadcrumb-item">
+    <a href="<%= root_path('health', 'overview') %>">
+      Overview
+    </a>
+  </li>
+<% end %>
+
+<% if current_path.include?('/offsets') %>
+  <li class="breadcrumb-item">
+    <a href="<%= root_path('health', 'offsets') %>">
+      Offsets
+    </a>
+  </li>
+<% end %>

data/lib/karafka/web/ui/pro/views/health/_no_data.erb

@@ -0,0 +1,9 @@
+<div class="container mb-4">
+  <div class="row">
+    <div class="col-lg-12">
+      <div class="alert alert-info" role="alert">
+        No health data is available. It may mean no processes are running.
+      </div>
+    </div>
+  </div>
+</div>

data/lib/karafka/web/ui/pro/views/health/_partition.erb

@@ -1,37 +1,39 @@
-<tr class="align-middle status-row-<%= details[:process].status %>">
-  <td>
-    <%= topic_name %>
-  </td>
+<tr class="align-middle <%= lso_risk_state_bg(details) %> status-row-<%= details.process.status %>">
   <td>
     <%= partition_id %>
   </td>
   <td>
-    <%== offset_with_label details[:lag_stored].to_i %>
+    <%== lag_with_label details.lag_stored %>
   </td>
   <td>
-    <span class="badge <%= lag_trend_bg(details[:lag_stored_d]) %>">
-      <%= details[:lag_stored_d] %>
+    <span class="badge <%= lag_trend_bg(details.lag_stored_d) %>">
+      <%= details.lag_stored_d %>
     </span>
   </td>
   <td>
-    <%= details[:committed_offset] %>
+    <%== offset_with_label topic_name, partition_id, details.committed_offset %>
   </td>
   <td>
-    <%== offset_with_label details[:stored_offset].to_i %>
+    <%== offset_with_label topic_name, partition_id, details.stored_offset %>
+  </td>
+  <td>
+    <span class="badge <%= kafka_state_bg(details.fetch_state) %> mt-1 mb-1">
+      <%= details.fetch_state %>
+    </span>
   </td>
   <td>
-    <span class="badge <%= kafka_state_bg(details[:fetch_state]) %> mt-1 mb-1">
-      <%= details[:fetch_state] %>
+    <span class="badge <%= kafka_state_bg(details.poll_state) %> mt-1 mb-1">
+      <%= details.poll_state %>
     </span>
   </td>
   <td>
-    <span class="badge <%= kafka_state_bg(details[:poll_state]) %> mt-1 mb-1">
-      <%= details[:poll_state] %>
+    <span class="badge bg-success <%= lso_risk_state_bg(details) %> bg-opacity-100">
+      <%= details.lso_risk_state %>
     </span>
   </td>
   <td>
-    <a href="<%= root_path('consumers', details[:process].id, 'subscriptions') %>">
-      <%= details[:process].name %>
+    <a href="<%= root_path('consumers', details.process.id, 'subscriptions') %>">
+      <%= details.process.name %>
     </a>
   </td>
 </tr>

data/lib/karafka/web/ui/pro/views/health/_partition_offset.erb

@@ -0,0 +1,40 @@
+<tr class="align-middle <%= lso_risk_state_bg(details) %> status-row-<%= details.process.status %>">
+  <td>
+    <%= partition_id %>
+  </td>
+  <td>
+    <%== lag_with_label details.lag_stored %>
+  </td>
+  <td>
+    <%== offset_with_label topic_name, partition_id, details.committed_offset %>
+  </td>
+  <td>
+    <%== relative_time(Time.now - details.committed_offset_fd / 1_000) %>
+  </td>
+  <td>
+    <%== offset_with_label topic_name, partition_id, details.stored_offset %>
+  </td>
+  <td>
+    <%== relative_time(Time.now - details.stored_offset_fd / 1_000) %>
+  </td>
+  <td>
+    <%== offset_with_label topic_name, partition_id, details.lo_offset %>
+  </td>
+  <td>
+    <%== offset_with_label topic_name, partition_id, details.hi_offset %>
+  </td>
+  <td>
+    <%== relative_time(Time.now - details.hi_offset_fd / 1_000) %>
+  </td>
+  <td>
+    <%== offset_with_label topic_name, partition_id, details.ls_offset %>
+  </td>
+  <td>
+    <%== relative_time(Time.now - details.ls_offset_fd / 1_000) %>
+  </td>
+  <td>
+    <span class="badge bg-success <%= lso_risk_state_bg(details) %> bg-opacity-100">
+      <%= details.lso_risk_state %>
+    </span>
+  </td>
+</tr>

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

@@ -0,0 +1,27 @@
+<div class="container">
+  <div class="row mb-5">
+    <div class="col-sm-12">
+
+      <ul class="nav nav-tabs">
+        <li class="nav-item">
+          <a
+            class="nav-link <%= nav_class(include: 'overview') %>"
+            href="<%= root_path('health', 'overview') %>"
+          >
+            Overview
+          </a>
+        </li>
+
+        <li class="nav-item">
+          <a
+            class="nav-link <%= nav_class(include: 'offsets') %>"
+            href="<%= root_path('health', 'offsets') %>"
+          >
+            Offsets
+          </a>
+        </li>
+      </ul>
+
+    </div>
+  </div>
+</div>

data/lib/karafka/web/ui/pro/views/health/offsets.erb

@@ -0,0 +1,71 @@
+<%== view_title('Consumers groups offsets details') %>
+
+<% if @stats.empty? %>
+  <%== partial 'health/no_data' %>
+<% else %>
+  <%== partial 'health/tabs' %>
+<% end %>
+
+<% @stats.each_with_index do |(cg_name, details), index| %>
+  <div class="container mb-5">
+    <div class="row mb-4">
+      <div class="col-sm-8">
+        <h4 class="mb-4"><%= cg_name %></h4>
+      </div>
+
+      <div class="col-sm-4">
+        <span class="float-end">
+          Last rebalance:
+          <span class="badge bg-secondary">
+            <%== relative_time(details[:rebalanced_at]) %>
+          </span>
+        </span>
+      </div>
+    </div>
+
+    <div class="row mb-3">
+      <div class="col-sm-12">
+        <% topics = details[:topics].sort_by(&:first) %>
+        <% topics.each_with_index do |(topic_name, partitions), index| %>
+          <table class="processes bg-white table table-hover table-bordered table-striped align-middle <%= (index+1 < topics.size) ? 'mb-5' : 'mb-3' %>">
+            <thead>
+              <tr class="align-middle">
+                <th colspan="12">
+                  <h5 class="mb-0"><%= topic_name %></h4>
+                </th>
+              </tr>
+              <tr class="align-middle">
+                <th>Partition</th>
+                <th>Lag stored</th>
+                <th>Committed offset</th>
+                <th>Committed offset change</th>
+                <th>Stored offset</th>
+                <th>Stored offset change</th>
+                <th>Low offset</th>
+                <th>High offset</th>
+                <th>High offset change</th>
+                <th>Last stable offset</th>
+                <th>Last stable offset change</th>
+                <th>Last stable offset state</th>
+              </tr>
+            </thead>
+            <tbody>
+                <% partitions.sort_by(&:first).each do |partition_id, details| %>
+                  <%==
+                    partial(
+                      'health/partition_offset',
+                      locals: {
+                        topic_name: topic_name,
+                        partition_id: partition_id,
+                        details: details
+                      }
+                    )
+                  %>
+                <% end %>
+            </tbody>
+          </table>
+        <% end %>
+      </div>
+    </div>
+  </div>
+<% end %>