karafka-web 0.6.3 → 0.7.0

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/_empty.erb

@@ -0,0 +1,3 @@
+<div class="alert alert-info mt-4" role="alert">
+  This topic is empty and does not contain any data in any of the partitions.
+</div>

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

@@ -0,0 +1,4 @@
+<div class="alert alert-info mt-4 mb-4" role="alert">
+  Due to many partitions, only part of the data is visible on each page.
+  Please navigate through the pages to view all data.
+</div>

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

@@ -0,0 +1,51 @@
+<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>
+</div>
+
+<div class="container">
+  <div class="row mb-5">
+    <div class="col-sm-12">
+      <%== partial('explorer/topic/details') %>
+
+      <% if @limited %>
+        <%== partial('explorer/topic/limited') %>
+      <% end %>
+
+      <% 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 %>
+    </div>
+  </div>
+</div>

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 %>

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

@@ -0,0 +1,68 @@
+<%== view_title('Consumers groups overview') %>
+
+<% 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="100">
+                  <h5 class="mb-0"><%= topic_name %></h4>
+                </th>
+              </tr>
+              <tr class="align-middle">
+                <th>Partition</th>
+                <th>Lag stored</th>
+                <th>Lag stored trend</th>
+                <th>Committed offset</th>
+                <th>Stored offset</th>
+                <th>Fetch state</th>
+                <th>Poll state</th>
+                <th>LSO state</th>
+                <th>Process name</th>
+              </tr>
+            </thead>
+            <tbody>
+                <% partitions.sort_by(&:first).each do |partition_id, details| %>
+                  <%==
+                    partial(
+                      'health/partition',
+                      locals: {
+                        topic_name: topic_name,
+                        partition_id: partition_id,
+                        details: details
+                      }
+                    )
+                  %>
+                <% end %>
+            </tbody>
+          </table>
+        <% end %>
+      </div>
+    </div>
+  </div>
+<% end %>

data/lib/karafka/web/ui/pro/views/jobs/_job.erb

@@ -22,13 +22,16 @@
     <code>#<%= job.type %></code>
   </td>
   <td>
-    <%== offset_with_label job.first_offset %>
+    <%= job.messages %>
   </td>
   <td>
-    <%== offset_with_label job.last_offset %>
+    <%== offset_with_label job.topic, job.partition, job.first_offset, explore: true %>
   </td>
   <td>
-    <%== offset_with_label job.committed_offset %>
+    <%== offset_with_label job.topic, job.partition, job.last_offset, explore: true %>
+  </td>
+  <td>
+    <%== offset_with_label job.topic, job.partition, job.committed_offset %>
   </td>
   <td>
     <%== relative_time job.started_at %>

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

@@ -1,7 +1,9 @@
 <%== view_title('Running jobs', hr: true) %>
 
-<% if @jobs.empty? %>
+<% if @jobs.empty? && params.current_page <= 1 %>
   <%== partial 'jobs/no_jobs' %>
+<% elsif @jobs.empty? %>
+  <%== partial 'shared/no_paginated_data' %>
 <% else %>
   <div class="container">
     <div class="row mb-5">
@@ -13,6 +15,7 @@
               <th>Topic</th>
               <th>Consumer</th>
               <th>Type</th>
+              <th>Messages</th>
               <th>First offset</th>
               <th>Last offset</th>
               <th>Committed offset</th>

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

@@ -0,0 +1,37 @@
+<div class="row mb-4">
+  <div class="col-sm-12">
+    <h4 class="mb-2">
+      <%= consumer_group.id %>
+    </h4>
+    <hr/>
+  </div>
+</div>
+
+<div class="row mb-5">
+  <div class="col-sm-12">
+    <table class="processes bg-white table table-hover table-bordered table-striped mb-0 align-middle">
+      <thead>
+        <tr class="align-middle">
+          <th>Subscription group</th>
+          <th>Topic</th>
+          <th>Type</th>
+          <th>Active</th>
+          <th></th>
+        </tr>
+      </thead>
+      <tbody>
+        <% consumer_group.topics.each do |topic| %>
+          <%==
+            partial(
+              'routing/topic',
+              locals: {
+                subscription_group: topic.subscription_group,
+                topic: topic
+              }
+            )
+          %>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
+</div>

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

@@ -0,0 +1,25 @@
+<% if v.is_a?(Hash) || v.respond_to?(:to_h) %>
+  <% v.to_h.each do |k2, v2| %>
+    <tr>
+      <td>
+        <%= "#{k}.#{k2}" %>
+      </td>
+      <td>
+        <% if %w[sasl ssl].any? { |scope| k2.to_s.include?(scope) } %>
+          ***
+        <% else %>
+          <%= v2 %>
+        <% end %>
+      </td>
+    </tr>
+  <% end %>
+<% else %>
+  <tr>
+    <td>
+      <%= k %>
+    </td>
+    <td>
+      <%= object_value_to_s(v) %>
+    </td>
+  </tr>
+<% end %>

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

@@ -0,0 +1,23 @@
+<tr>
+  <td>
+    <%= subscription_group %>
+  </td>
+  <td>
+    <%= topic.name %>
+  </td>
+  <td>
+    <span class="badge bg-secondary">
+      <%= topic.patterns.type %>
+    </span>
+  </td>
+  <td>
+    <span class="badge bg-<%= topic.active? ? 'success' : 'warning text-dark' %>">
+    <%= topic.active? %>
+    </span>
+  </td>
+  <td class="text-center">
+    <a href="<%= root_path('routing', topic.id) %>" class="btn btn-sm btn-secondary text-white">
+      Details
+    </a>
+  </td>
+</tr>

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

@@ -0,0 +1,10 @@
+<%== view_title('Routing details') %>
+
+<div class="container mb-5">
+  <%==
+    each_partial(
+      @routes,
+      'routing/consumer_group'
+    )
+  %>
+</div>

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

@@ -0,0 +1,26 @@
+<%==
+  title = [@topic.consumer_group.name, @topic.subscription_group, @topic.name].join(': ')
+  view_title(title, hr: true)
+%>
+
+<div class="container">
+  <div class="row mb-5">
+    <div class="col-sm-12">
+      <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 %>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>