karafka-web 0.8.2 → 0.9.0.rc1

data/lib/karafka/web/pro/ui/views/commands/_command.erb

@@ -0,0 +1,60 @@
+<% if command_message.is_a?(Array) %>
+  <%== partial 'shared/not_a_message' %>
+<% else %>
+  <% command = command_message.payload %>
+
+  <% if command[:schema_version] == @schema_version %>
+    <tr>
+      <td>
+        <% color = command[:type] == 'result' ? 'success' : 'primary' %>
+        <span class="badge bg-<%= color %> badge-topic">
+          <%= command[:type] %>
+        </span>
+      </td>
+
+      <td>
+        <%
+          color = case command[:command][:name]
+                  when 'probe'
+                    'secondary'
+                  when 'quiet'
+                    'warning'
+                  when 'stop'
+                    'danger'
+                  else
+                    'secondary'
+                  end
+        %>
+        <span class="badge bg-<%= color %> badge-topic">
+          <%= command[:command][:name] %>
+        </span>
+      </td>
+
+      <td>
+        <% if command[:process][:id] == '*' %>
+          *
+        <% else %>
+          <a href="<%= root_path('consumers', command[:process][:id], 'subscriptions') %>">
+            <%= truncate(command[:process][:id], strategy: :middle) %>
+          </a>
+        <% end %>
+      </td>
+
+      <td>
+        <%== relative_time command[:dispatched_at] %>
+      </td>
+
+      <td class="text-center">
+        <a href="<%= root_path('commands', command_message.offset) %>" class="btn btn-sm btn-secondary text-white">
+          Details
+        </a>
+      </td>
+    </tr>
+  <% else %>
+    <tr>
+      <td colspan="100" class="text-center text-muted">
+       Incompatible command schema. This command message schema does not match the Karafka Web UI schema.
+      </td>
+    </tr>
+  <% end %>
+<% end %>

data/lib/karafka/web/pro/ui/views/commands/_command_details.erb

@@ -0,0 +1,11 @@
+<div class="container">
+  <div class="row mb-5">
+    <div class="col-sm-12">
+      <div class="card">
+        <div class="card-body">
+          <pre class="m-0 p-0"><code class="wrapped json p-0 m-0"><%= JSON.pretty_generate command %></code></pre>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

data/lib/karafka/web/pro/ui/views/commands/_details.erb

@@ -0,0 +1,26 @@
+<div class="container mb-4">
+  <div class="row">
+    <div class="col-sm-6 ms-0 ps-0">
+      <% if @command_messages && !@command_messages.empty? %>
+        <a
+          href="<%= root_path('commands', 'recent') %>"
+          class="btn btn-secondary btn-sm"
+          title="Display the most recent command"
+        >
+          &#x2192; Recent
+        </a>
+      <% end %>
+    </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/pro/ui/views/commands/_empty.erb

@@ -0,0 +1,3 @@
+<%==
+  alert_info('No commands found.')
+%>

data/lib/karafka/web/pro/ui/views/commands/_incompatible_schema.erb

@@ -0,0 +1,14 @@
+<div class="container">
+  <div class="row mb-5">
+    <div class="col-sm-12">
+
+      <div class="alert alert-danger" role="alert">
+        <h4 class="alert-heading">Incompatible Command Schema</h4>
+        <p class="mb-1">
+          This issue occurs when the Web UI and consumer processes use different command schemas, preventing the display of command details. It arises from version mismatches, where either the Web UI or the consumer processes are outdated. To resolve this, ensure both components use compatible versions with the same schema.
+        </p>
+      </div>
+
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,50 @@
+<%
+  process_id = command[:process][:id]
+%>
+
+<div class="container">
+  <div class="row mb-4">
+    <div class="col-sm-12">
+      <h4 class="mb-2">
+        Metadata
+      </h4>
+      <hr/>
+    </div>
+  </div>
+
+  <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>
+          <tr>
+            <td>Type</td>
+            <td><%== command[:type] %></td>
+          </tr>
+
+          <tr>
+            <td>Name</td>
+            <td><%== command[:command][:name] %></td>
+          </tr>
+
+          <tr>
+            <td>Dispatched</td>
+            <td><%== relative_time command[:dispatched_at] %></td>
+          </tr>
+          <tr>
+            <td>Process</td>
+            <td>
+              <% command = command %>
+              <% if process_id == '*' %>
+                  <%= process_id %>
+              <% else %>
+                <a href="<%= root_path('consumers', process_id, 'subscriptions') %>">
+                  <%= process_id %>
+                </a>
+              <% end %>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>

data/lib/karafka/web/pro/ui/views/commands/_table.erb

@@ -0,0 +1,23 @@
+<div class="table-responsive">
+  <table class="processes bg-white table table-hover table-bordered table-striped mb-0 align-middle">
+    <thead>
+      <tr class="align-middle">
+        <th>Type</th>
+        <th>Name</th>
+        <th>ID</th>
+        <th>Dispatched</th>
+        <th></th>
+      </tr>
+    </thead>
+
+    <tbody>
+      <%==
+        each_partial(
+          @command_messages,
+          'commands/command',
+          local: :command_message
+        )
+      %>
+    </tbody>
+  </table>
+</div>

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

@@ -0,0 +1,17 @@
+<%== view_title('Consumers Commands and Responses') %>
+
+<%== partial 'consumers/tabs' %>
+
+<div class="container">
+  <div class="row mb-5">
+    <div class="col-sm-12">
+      <%== partial('commands/details') %>
+
+      <% if @command_messages.empty? && params.current_page == 1 %>
+        <%== partial 'commands/empty' %>
+      <% else %>
+        <%== partial 'commands/table' %>
+      <% end %>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,38 @@
+<% command = @command_message.payload %>
+
+<% if command[:schema_version] == @schema_version %>
+  <%== view_title("#{command[:command][:name]} #{command[:type]} #{@command_message.key}") %>
+
+  <%== partial 'consumers/tabs' %>
+
+  <%== partial 'commands/metadata', locals: { command: command } %>
+
+  <div class="container">
+    <div class="row mb-4">
+      <div class="col-sm-12">
+        <h4 class="mb-2">
+          <% if command[:type] == 'command' %>
+            Details
+          <% else %>
+            Backtraces
+          <% end %>
+        </h4>
+        <hr/>
+      </div>
+    </div>
+  </div>
+
+  <% if command[:type] == 'command' %>
+    <%== partial 'commands/command_details', locals: { command: command } %>
+  <% else %>
+    <% command[:result].each_value do |backtrace| %>
+      <%== partial 'commands/backtrace', locals: { backtrace: backtrace } %>
+    <% end %>
+  <% end %>
+<% else %>
+  <%== view_title('Incompatible Command Schema') %>
+
+  <%== partial 'consumers/tabs' %>
+
+  <%== partial 'commands/incompatible_schema' %>
+<% end %>

data/lib/karafka/web/{ui/pro → pro/ui}/views/consumers/_breadcrumbs.erb

@@ -1,13 +1,29 @@
-<% if @process %>
+<li class="breadcrumb-item">
+  <a href="<%= root_path('consumers/overview') %>">
+    Consumers
+  </a>
+</li>
+
+<% if current_path.include?('/performance') %>
   <li class="breadcrumb-item">
-    <a href="<%= root_path('consumers') %>">
-      Consumers
+    <a href="<%= root_path('consumers', 'performance') %>">
+      Performance
     </a>
   </li>
+<% end %>
 
+<% if current_path.include?('/controls') %>
+  <li class="breadcrumb-item">
+    <a href="<%= root_path('consumers', 'controls') %>">
+      Controls
+    </a>
+  </li>
+<% end %>
+
+<% if @process %>
   <li class="breadcrumb-item">
     <a href="<%= root_path('consumers', @process.id, 'subscriptions') %>">
-      <%= @process.name %>
+      <%== truncate(@process.id, strategy: :middle) %>
     </a>
   </li>
 

data/lib/karafka/web/{ui/pro → pro/ui}/views/consumers/_consumer.erb

@@ -5,30 +5,11 @@
     </div>
 
     <a href="<%= root_path('consumers', process.id, 'subscriptions') %>">
-      <%= process.name %>
+      <%== truncate(process.id, strategy: :middle) %>
     </a>
 
     <p class="mt-0 mb-1">
-      <% process.consumer_groups.each do |consumer_group| %>
-        <% sg_topics = Hash.new { |h, k| h[k] = [] } %>
-
-        <% consumer_group.subscription_groups.each do |subscription_group| %>
-          <% subscription_group.topics.each do |topic| %>
-            <% sg_topics[topic.name] << topic.partitions.map(&:id) %>
-          <% end %>
-        <% end %>
-
-        <% sg_topics.each do |topic_name, partitions| %>
-          <span class="badge bg-secondary badge-topic" title="Consumer group: <%= consumer_group.id %>">
-            <%= topic_name %>:
-            <% if partitions.size > 10 %>
-              <%= "#{partitions.sort.first(10).join(',')}..." %>
-            <% else %>
-              <%= partitions.sort.join(',') %>
-            <% end %>
-          </span>
-        <% end %>
-      <% end %>
+      <%== partial 'consumers/assignments_badges', locals: { process: process } %>
     </p>
 
     <p class="mt-0 mb-1">

data/lib/karafka/web/pro/ui/views/consumers/_consumer_controls.erb

@@ -0,0 +1,78 @@
+<tr class="status-row-<%= process.status %>">
+  <td>
+    <a href="<%= root_path('consumers', process.id, 'subscriptions') %>">
+      <%== truncate(process.id, strategy: :middle) %>
+    </a>
+
+    <p class="mt-0 mb-1">
+      <%== tags(process.tags) %>
+    </p>
+  </td>
+
+  <td>
+    <div class="badge badge-topic <%= status_bg(process.status) %>">
+      <%= process.status %>
+    </div>
+  </td>
+
+  <td>
+    <p class="mt-0 mb-1">
+      <%== partial 'consumers/assignments_badges', locals: { process: process } %>
+    </p>
+  </td>
+
+  <td>
+    <%== relative_time process.started_at %>
+  </td>
+
+  <td>
+    <span class="badge bg-primary badge-topic">
+      <%= format_memory process.memory_usage %>
+    </span>
+  </td>
+
+  <td>
+    <span class="badge bg-primary badge-topic">
+      <%= process.utilization.round(1) %>%
+    </span>
+    <span class="badge bg-primary badge-topic">
+      <%= process.workers %> /
+      <%= process.busy %>
+    </span>
+  </td>
+
+  <td>
+    <%= process.lag_hybrid %>
+  </td>
+
+  <td>
+    <div class="d-flex flex-nowrap justify-content-end">
+      <%
+        probe_path = root_path('commanding', process.id, 'probe')
+        disabled_class = process.status != 'stopped' ? '' : 'disabled'
+      %>
+      <form action="<%= probe_path %>" method="post" class="d-inline-flex align-items-center mx-1">
+        <%== csrf_tag(probe_path) %>
+        <input type="submit" value="&#x2699; Probe" class="btn btn-secondary btn-sm <%= disabled_class %>"/>
+      </form>
+
+      <%
+        quiet_path = root_path('commanding', process.id, 'quiet')
+        disabled_class = process.status == 'running' ? '' : 'disabled'
+      %>
+      <form action="<%= quiet_path %>" method="post" class="d-inline-flex align-items-center mx-1">
+        <%== csrf_tag(quiet_path) %>
+        <input type="submit" value="&#x23F8; Quiet" class="btn btn-warning btn-sm <%= disabled_class %>"/>
+      </form>
+
+      <%
+        stop_path = root_path('commanding', process.id, 'stop')
+        disabled_class = process.status != 'stopping' && process.status != 'stopped' ? '' : 'disabled'
+      %>
+      <form action="<%= stop_path %>" method="post" class="d-inline-flex align-items-center mx-1">
+        <%== csrf_tag(stop_path) %>
+        <input type="submit" value="&#x25A0; Stop" class="btn btn-danger btn-sm <%= disabled_class %>"/>
+      </form>
+    </div>
+  </td>
+</tr>

data/lib/karafka/web/pro/ui/views/consumers/_consumer_performance.erb

@@ -0,0 +1,59 @@
+<tr class="status-row-<%= process.status %>">
+  <td>
+    <a href="<%= root_path('consumers', process.id, 'subscriptions') %>">
+      <%== truncate(process.id, strategy: :middle) %>
+    </a>
+
+    <p class="mt-0 mb-1">
+      <%== tags(process.tags) %>
+    </p>
+  </td>
+
+   <td>
+    <%= format_memory process.memory_usage %>
+  </td>
+
+  <td>
+    <%= process.utilization.round(1) %>%
+  </td>
+
+  <td>
+    <%= process.threads %>
+  </td>
+
+  <td>
+    <%= process.cpu_usage[0].to_f %>
+  </td>
+
+  <td>
+    <%= process.cpu_usage[1].to_f %>
+  </td>
+
+  <td>
+    <%= process.cpu_usage[2].to_f %>
+  </td>
+
+  <td>
+    <%= process.workers %>
+  </td>
+
+  <td>
+    <%= process.busy %>
+  </td>
+
+  <td>
+    <%= process.listeners.fetch(:active) %>
+  </td>
+
+  <td>
+    <%= process.listeners.fetch(:standby) %>
+  </td>
+
+  <td>
+    <%= process.jobs.running.count %>
+  </td>
+
+  <td>
+    <%= process.jobs.pending.count %>
+  </td>
+</tr>

data/lib/karafka/web/{ui/pro → pro/ui}/views/consumers/_counters.erb

@@ -1,4 +1,4 @@
-<div id="counters" class="container mb-5">
+<div id="refreshable" class="container mb-5 counters">
   <div class="row">
     <div class="col-sm-12">
       <div class="card">
@@ -18,10 +18,12 @@
                 <div class="desc">Batches</div>
               </li>
               <li class="col-sm">
-                <div class="count mb-1">
-                  <%= number_with_delimiter @counters.lag_hybrid, ' ' %>
-                </div>
-                <div class="desc">Total lag</div>
+                <a href="<%= root_path('health/lags') %>">
+                  <div class="count mb-1">
+                    <%= number_with_delimiter @counters.lag_hybrid, ' ' %>
+                  </div>
+                  <div class="desc">Total lag</div>
+                </a>
               </li>
               <li class="col-sm">
                 <a href="<%= root_path('jobs/running') %>">

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

@@ -0,0 +1,35 @@
+<div class="container">
+  <div class="row mb-4">
+    <div class="col-sm-12 mb-4">
+
+      <ul class="nav nav-tabs">
+        <li class="nav-item">
+          <a class="nav-link <%= nav_class(include: 'overview') %>" href="<%= root_path('consumers', 'overview') %>">
+            Overview
+          </a>
+        </li>
+
+        <li class="nav-item">
+          <a class="nav-link <%= nav_class(include: 'performance') %>" href="<%= root_path('consumers', 'performance') %>">
+            Performance
+          </a>
+        </li>
+
+        <% if Karafka::Web.config.commanding.active %>
+          <li class="nav-item">
+            <a class="nav-link <%= nav_class(include: 'controls') %>" href="<%= root_path('consumers', 'controls') %>">
+              Controls
+            </a>
+          </li>
+
+          <li class="nav-item">
+            <a class="nav-link <%= nav_class(include: 'commands') %>" href="<%= root_path('commands') %>">
+              Commands
+            </a>
+          </li>
+        <% end %>
+      </ul>
+
+    </div>
+  </div>
+</div>

data/lib/karafka/web/pro/ui/views/consumers/consumer/_commands.erb

@@ -0,0 +1,32 @@
+<% if Karafka::Web.config.commanding.active %>
+  <div class="col-md-12 col-lg-4 text-end">
+    <div class="d-flex flex-nowrap float-end">
+      <%
+        probe_path = root_path('commanding', process.id, 'probe')
+        disabled_class = process.status != 'stopped' ? '' : 'disabled'
+      %>
+      <form action="<%= probe_path %>" method="post" class="d-inline-flex align-items-center mx-1">
+        <%== csrf_tag(probe_path) %>
+        <input type="submit" value="&#x2699; Probe" class="btn btn-secondary btn-sm <%= disabled_class %>"/>
+      </form>
+
+      <%
+        quiet_path = root_path('commanding', process.id, 'quiet')
+        disabled_class = process.status == 'running' ? '' : 'disabled'
+      %>
+      <form action="<%= quiet_path %>" method="post" class="d-inline-flex align-items-center mx-1">
+        <%== csrf_tag(quiet_path) %>
+        <input type="submit" value="&#x23F8; Quiet" class="btn btn-warning btn-sm <%= disabled_class %>"/>
+      </form>
+
+      <%
+        stop_path = root_path('commanding', process.id, 'stop')
+        disabled_class = process.status != 'stopping' && process.status != 'stopped' ? '' : 'disabled'
+      %>
+      <form action="<%= stop_path %>" method="post" class="d-inline-flex align-items-center mx-1">
+        <%== csrf_tag(stop_path) %>
+        <input type="submit" value="&#x25A0; Stop" class="btn btn-danger btn-sm <%= disabled_class %>"/>
+      </form>
+    </div>
+  </div>
+<% end %>

data/lib/karafka/web/pro/ui/views/consumers/consumer/_no_jobs.erb

@@ -0,0 +1,7 @@
+<div class="container mb-4">
+  <div class="row">
+    <div class="col-lg-12">
+      <%== alert_info("This process has no #{type} jobs at the moment.") %>
+    </div>
+  </div>
+</div>

data/lib/karafka/web/pro/ui/views/consumers/consumer/_no_subscriptions.erb

@@ -0,0 +1,7 @@
+<div class="container mb-4">
+  <div class="row">
+    <div class="col-lg-12">
+      <%== alert_info('This process is not subscribed to any topics.') %>
+    </div>
+  </div>
+</div>

data/lib/karafka/web/{ui/pro → pro/ui}/views/consumers/consumer/_subscription_group.erb

@@ -90,15 +90,15 @@
 <% if subscription_group.topics.empty? %>
   <div class="row mb-4">
     <div class="col-lg-12">
-      <div class="alert alert-info" role="alert">
-        This process does not consume any messages from any topics of this subscription group.
-      </div>
+      <%==
+        alert_info('This process does not consume any messages from any topics of this subscription group.')
+      %>
     </div>
   </div>
 <% else %>
   <% subscription_group.topics.each do |topic| %>
     <div class="row mb-5">
-      <div class="col-sm-12">
+      <div class="col-sm-12 table-responsive">
         <table class="processes bg-white table table-hover table-bordered table-striped mb-0 align-middle">
           <thead>
             <tr class="align-middle">
@@ -107,16 +107,21 @@
                   <%= topic.name %>
                 </h5>
               </th>
+            </tr>
             <tr class="align-middle">
+              <th rowspan="2"><%== sort_link('Partition', :id) %></th>
+              <th colspan="2" class="text-center">Lag</th>
+              <th colspan="2" class="text-center">Offsets</th>
+              <th colspan="10" class="text-center">States</th>
             </tr>
-              <th><%== sort_link('Partition', :id) %></th>
-              <th><%== sort_link('Lag', :lag_hybrid) %></th>
-              <th><%== sort_link('Lag trend', :lag_hybrid_d) %></th>
+            <tr class="align-middle">
+              <th><%== sort_link(:lag_hybrid) %></th>
+              <th><%== sort_link('Trend', :lag_hybrid_d) %></th>
               <th><%== sort_link(:committed_offset) %></th>
               <th><%== sort_link(:stored_offset) %></th>
               <th><%== sort_link(:fetch_state) %></th>
               <th><%== sort_link(:poll_state) %></th>
-              <th><%== sort_link('LSO state', :lso_risk_state) %></th>
+              <th><%== sort_link(:lso_risk_state) %></th>
             </tr>
           </thead>
           <tbody>

data/lib/karafka/web/pro/ui/views/consumers/consumer/_title.erb

@@ -0,0 +1,5 @@
+<div class="col-md-12 col-lg-8">
+  <h3>
+    <%== @process.id %>
+  </h3>
+</div>