karafka-web 0.8.1 → 0.9.0.rc1

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

@@ -0,0 +1,67 @@
+<%== view_title('Consumers Controls') %>
+
+<%== partial 'consumers/tabs' %>
+
+<% unless @processes.empty? %>
+  <div class="container">
+    <div class="row mb-4">
+      <div class="col-sm-12">
+        <div class="d-flex flex-nowrap float-end">
+          <%
+            quiet_all_path = root_path('commanding', 'quiet_all')
+          %>
+          <form action="<%= quiet_all_path %>" method="post" class="d-inline-flex align-items-center mx-1">
+            <%== csrf_tag(quiet_all_path) %>
+            <input type="submit" value="&#x23F8; Quiet All" class="btn btn-warning btn-sm"/>
+          </form>
+
+          <%
+            stop_all_path = root_path('commanding', 'stop_all')
+          %>
+          <form action="<%= stop_all_path %>" method="post" class="d-inline-flex align-items-center mx-1">
+            <%== csrf_tag(stop_all_path) %>
+            <input type="submit" value="&#x25A0; Stop All" class="btn btn-danger btn-sm"/>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+<% end %>
+
+<div class="container">
+  <div class="row">
+    <div class="col-sm-12">
+      <% if @processes.empty? && params.current_page <= 1 %>
+        <%== partial 'consumers/no_consumers' %>
+      <% elsif @processes.empty? %>
+        <%== partial 'shared/no_paginated_data' %>
+      <% else %>
+        <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><%== sort_link(:id) %></th>
+                <th><%== sort_link(:status) %></th>
+                <th>Subscriptions</th>
+                <th><%== sort_link(:started_at, rev: true) %></th>
+                <th><%== sort_link(:memory_usage) %></th>
+                <th>Performance</th>
+                <th><%== sort_link(:lag_hybrid) %></th>
+                <th></th>
+              </tr>
+            </thead>
+            <tbody>
+              <%==
+                render_each(
+                  @processes,
+                  'consumers/_consumer_controls',
+                  local: :process
+                )
+              %>
+            </tbody>
+          </table>
+        </div>
+      <% end %>
+    </div>
+  </div>
+</div>

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

@@ -1,4 +1,9 @@
-<%== view_title(@process.name) %>
+<div class="container mb-5">
+  <div class="row">
+    <%== partial 'consumers/consumer/title' %>
+    <%== partial 'consumers/consumer/commands', locals: { process: @process } %>
+  </div>
+</div>
 
 <% if @process.status == 'stopped' %>
   <%== partial 'consumers/consumer/stopped' %>

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

@@ -0,0 +1,39 @@
+<%== partial 'consumers/counters' %>
+<%== partial 'consumers/summary' %>
+<%== partial 'consumers/tabs' %>
+
+<div class="container">
+  <div class="row">
+    <div class="col-sm-12">
+      <% if @processes.empty? && params.current_page <= 1 %>
+        <%== partial 'consumers/no_consumers' %>
+      <% elsif @processes.empty? %>
+        <%== partial 'shared/no_paginated_data' %>
+      <% else %>
+        <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><%== sort_link(:id) %></th>
+                <th class="col-sm-2"><%== sort_link(:started_at, rev: true) %></th>
+                <th class="col-sm-1">Memory</th>
+                <th class="col-sm-1">Performance</th>
+                <th class="col-sm-1">Load</th>
+                <th class="col-sm-1"><%== sort_link(:lag_hybrid) %></th>
+              </tr>
+            </thead>
+            <tbody>
+              <%==
+                render_each(
+                  @processes,
+                  'consumers/_consumer',
+                  local: :process
+                )
+              %>
+            </tbody>
+          </table>
+        </div>
+      <% end %>
+    </div>
+  </div>
+</div>

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

@@ -1,4 +1,9 @@
-<%== view_title(@process.name) %>
+<div class="container mb-5">
+  <div class="row">
+    <%== partial 'consumers/consumer/title' %>
+    <%== partial 'consumers/consumer/commands', locals: { process: @process } %>
+  </div>
+</div>
 
 <% if @process.status == 'stopped' %>
   <%== partial 'consumers/consumer/stopped' %>
@@ -13,18 +18,21 @@
 <% else %>
   <div class="container">
     <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">
-              <th><%== sort_link(:topic) %></th>
-              <th><%== sort_link(:consumer) %></th>
-              <th><%== sort_link(:type) %></th>
-              <th><%== sort_link(:messages) %></th>
+              <th rowspan="2"><%== sort_link(:topic) %></th>
+              <th rowspan="2"><%== sort_link(:consumer) %></th>
+              <th rowspan="2"><%== sort_link(:type) %></th>
+              <th rowspan="2"><%== sort_link(:messages) %></th>
+              <th colspan="3" class="text-center">Offsets</th>
+              <th rowspan="2"><%== sort_link('Started', :updated_at, rev: true) %></th>
+            </tr>
+            <tr class="align-middle">
               <th><%== sort_link(:first_offset) %></th>
               <th><%== sort_link(:last_offset) %></th>
               <th><%== sort_link(:committed_offset) %></th>
-              <th><%== sort_link('Scheduled at', :updated_at, rev: true) %></th>
             </tr>
           </thead>
           <tbody>

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

@@ -0,0 +1,52 @@
+<%== view_title('Consumers Performance Details') %>
+
+<%== partial 'consumers/tabs' %>
+
+<div class="container">
+  <div class="row">
+    <div class="col-sm-12">
+      <% if @processes.empty? && params.current_page <= 1 %>
+        <%== partial 'consumers/no_consumers' %>
+      <% elsif @processes.empty? %>
+        <%== partial 'shared/no_paginated_data' %>
+      <% else %>
+        <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 colspan="1" rowspan="2"><%== sort_link(:id) %></th>
+                <th colspan="1" rowspan="2"><%== sort_link(:memory_usage) %></th>
+                <th colspan="1" rowspan="2"><%== sort_link(:utilization) %></th>
+                <th colspan="1" rowspan="2"><%== sort_link(:threads) %></th>
+                <th colspan="3" rowspan="1" class="text-center">Load</th>
+                <th colspan="2" class="text-center">Workers</th>
+                <th colspan="2" class="text-center">Listeners</th>
+                <th colspan="2" class="text-center">Jobs</th>
+              </tr>
+              <tr class="align-middle">
+                <th>1m</th>
+                <th>5m</th>
+                <th>15m</th>
+                <th><%== sort_link('Total', :workers) %></th>
+                <th><%== sort_link(:busy) %></th>
+                <th><%== sort_link(:active) %></th>
+                <th><%== sort_link(:standby) %></th>
+                <th><%== sort_link('Running', :running_jobs_count) %></th>
+                <th><%== sort_link('Pending', :pending_jobs_count) %></th>
+              </tr>
+            </thead>
+            <tbody>
+              <%==
+                render_each(
+                  @processes,
+                  'consumers/_consumer_performance',
+                  local: :process
+                )
+              %>
+            </tbody>
+          </table>
+        </div>
+      <% end %>
+    </div>
+  </div>
+</div>

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

@@ -1,4 +1,9 @@
-<%== view_title(@process.name) %>
+<div class="container mb-5">
+  <div class="row">
+    <%== partial 'consumers/consumer/title' %>
+    <%== partial 'consumers/consumer/commands', locals: { process: @process } %>
+  </div>
+</div>
 
 <% if @process.status == 'stopped' %>
   <%== partial 'consumers/consumer/stopped' %>
@@ -13,18 +18,21 @@
 <% else %>
   <div class="container">
     <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">
-              <th><%== sort_link(:topic) %></th>
-              <th><%== sort_link(:consumer) %></th>
-              <th><%== sort_link(:type) %></th>
-              <th><%== sort_link(:messages) %></th>
+              <th rowspan="2"><%== sort_link(:topic) %></th>
+              <th rowspan="2"><%== sort_link(:consumer) %></th>
+              <th rowspan="2"><%== sort_link(:type) %></th>
+              <th rowspan="2"><%== sort_link(:messages) %></th>
+              <th colspan="3" class="text-center">Offsets</th>
+              <th rowspan="2"><%== sort_link('Started', :updated_at, rev: true) %></th>
+            </tr>
+            <tr class="align-middle">
               <th><%== sort_link(:first_offset) %></th>
               <th><%== sort_link(:last_offset) %></th>
               <th><%== sort_link(:committed_offset) %></th>
-              <th><%== sort_link('Started at', :updated_at, rev: true) %></th>
             </tr>
           </thead>
           <tbody>

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

@@ -0,0 +1,28 @@
+<div class="container mb-5">
+  <div class="row">
+    <%== partial 'consumers/consumer/title' %>
+    <%== partial 'consumers/consumer/commands', locals: { process: @process } %>
+  </div>
+</div>
+
+<% if @process.status == 'stopped' %>
+  <%== partial 'consumers/consumer/stopped' %>
+<% end %>
+
+<%== partial 'consumers/consumer/metrics' %>
+
+<%== partial 'consumers/consumer/tabs' %>
+
+<% if @process.subscribed? %>
+  <div class="container">
+    <%==
+      render_each(
+        @process.consumer_groups,
+        'consumers/consumer/_consumer_group',
+        local: :consumer_group
+      )
+    %>
+  </div>
+<% else %>
+  <%== partial 'consumers/consumer/no_subscriptions' %>
+<% end %>

data/lib/karafka/web/{ui/pro → pro/ui}/views/dashboard/index.erb

@@ -3,7 +3,7 @@
 <% if @aggregated.sufficient? %>
   <%== partial 'dashboard/ranges_selector' %>
 
-  <div class="container">
+  <div class="container mb-3 mt-4 mt-md-2 mt-lg-0">
     <div class="row">
       <div class="col-sm-12">
         <h5 class="mb-3">Processing metrics</h5>
@@ -21,24 +21,24 @@
         <div class="tab-content">
           <div class="tab-pane show active" id="messages" role="tabpanel">
             <% data = @aggregated_charts.with(:messages, :errors, :dead, :retries, :batch_size) %>
-            <%== partial 'shared/chart', locals: { data: data, id: 'messages' } %>
+            <%== partial 'shared/charts/line', locals: { data: data, id: 'messages' } %>
           </div>
 
           <div class="tab-pane" id="batches" role="tabpanel">
             <% data = @aggregated_charts.with(:batches, :errors, :dead, :retries) %>
-            <%== partial 'shared/chart', locals: { data: data, id: 'batches' } %>
+            <%== partial 'shared/charts/line', locals: { data: data, id: 'batches' } %>
           </div>
 
           <div class="tab-pane" id="topics-lags" role="tabpanel">
-            <%== partial 'shared/chart', locals: { data: @topics_charts.lags_hybrid, id: 'topics-lags' } %>
+            <%== partial 'shared/charts/line', locals: { data: @topics_charts.lags_hybrid, id: 'topics-lags' } %>
           </div>
 
           <div class="tab-pane" id="topics-pace" role="tabpanel">
-            <%== partial 'shared/chart', locals: { data: @topics_charts.topics_pace, id: 'topics-pace' } %>
+            <%== partial 'shared/charts/line', locals: { data: @topics_charts.topics_pace, id: 'topics-pace' } %>
           </div>
 
           <div class="tab-pane" id="max-lso-time" role="tabpanel">
-            <%== partial 'shared/chart', locals: { data: @topics_charts.max_lso_time, id: 'max-lso-time' } %>
+            <%== partial 'shared/charts/line', locals: { data: @topics_charts.max_lso_time, id: 'max-lso-time' } %>
           </div>
         </div>
       </div>
@@ -62,22 +62,22 @@
         <div class="tab-content">
           <div class="tab-pane show active" id="utilization" role="tabpanel">
             <% data = @aggregated_charts.with(:utilization) %>
-            <%== partial 'shared/chart', locals: { data: data, id: 'utilization', label_type_y: 'percentage' } %>
+            <%== partial 'shared/charts/line', locals: { data: data, id: 'utilization', label_type_y: 'percentage' } %>
           </div>
 
           <div class="tab-pane show" id="rss" role="tabpanel">
             <% data = @aggregated_charts.with(:rss, :process_rss) %>
-            <%== partial 'shared/chart', locals: { data: data, id: 'rss', label_type_y: 'memory' } %>
+            <%== partial 'shared/charts/line', locals: { data: data, id: 'rss', label_type_y: 'memory' } %>
           </div>
 
           <div class="tab-pane show" id="concurrency" role="tabpanel">
             <% data = @aggregated_charts.with(:processes, :workers, :active_listeners, :standby_listeners) %>
-            <%== partial 'shared/chart', locals: { data: data, id: 'concurrency' } %>
+            <%== partial 'shared/charts/line', locals: { data: data, id: 'concurrency' } %>
           </div>
 
           <div class="tab-pane show" id="data-transfers" role="tabpanel">
             <% data = @aggregated_charts.data_transfers %>
-            <%== partial 'shared/chart', locals: { data: data, id: 'data-transfers', label_type_y: 'memory' } %>
+            <%== partial 'shared/charts/line', locals: { data: data, id: 'data-transfers', label_type_y: 'memory' } %>
           </div>
         </div>
       </div>

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

@@ -0,0 +1,7 @@
+<div class="container mb-4">
+  <div class="row">
+    <div class="col-lg-12">
+      <%== alert_info('No Dead Letter Queue topics exist in Kafka.') %>
+    </div>
+  </div>
+</div>

data/lib/karafka/web/{ui/pro → pro/ui}/views/dlq/index.erb

@@ -1,4 +1,4 @@
-<%== view_title('Dead Letter Queue topics', hr: true) %>
+<%== view_title('Dead Letter Queue Topics', hr: true) %>
 
 <% if @dlq_topics.empty? %>
   <%== partial 'dlq/no_topics' %>

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

@@ -1,9 +1,5 @@
 <% if error_msg.is_a?(Array) %>
-  <tr>
-    <td colspan="5" class="text-center text-muted">
-      This offset does not contain error data. The message may have been compacted or is a system entry.
-    </td>
-  </tr>
+  <%== partial 'shared/not_a_message' %>
 <% else %>
   <% error = error_msg.payload %>
 
@@ -18,7 +14,7 @@
       </span>
     </td>
     <td>
-      <%== error[:process][:name] %>
+      <%== error[:process][:id] %>
     </td>
     <td>
       <%= error[:error_class] %>:

data/lib/karafka/web/pro/ui/views/errors/_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>Origin</th>
+        <th>ID</th>
+        <th>Error</th>
+        <th>Occurred</th>
+        <th></th>
+      </tr>
+    </thead>
+
+    <tbody>
+      <%==
+        each_partial(
+          @error_messages,
+          'errors/error',
+          local: :error_msg
+        )
+      %>
+    </tbody>
+  </table>
+</div>

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

@@ -0,0 +1,4 @@
+<div class="alert alert-warning" role="alert">
+  We could not deserialize the <%= attribute %> due to the following error:
+  <code><%= error.class %></code>. Raw <%= attribute %> displayed instead.
+</div>

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

@@ -1,3 +1,5 @@
+<% safe_key = ::Karafka::Web::Ui::Lib::SafeRunner.new { message.key } %>
+
 <% if message.is_a?(Array) %>
   <tr>
     <td class="text-muted">
@@ -23,7 +25,11 @@
     </td>
     <td>
       <% if @visibility_filter.key?(message) %>
-        <%= message.key %>
+        <% if safe_key.success? %>
+          <%= safe_key.result %>
+        <% else %>
+          <span class="text-muted">[Deserialization Failed]</span>
+        <% end %>
       <% else %>
         <span class="text-muted">[Filtered]</span>
       <% end %>

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

@@ -0,0 +1,5 @@
+<div class="row">
+  <div class="col-lg-12">
+    <%== alert_info('There are no available topics in the current cluster.') %>
+  </div>
+</div>

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

@@ -1,9 +1,4 @@
-<div class="container mb-5">
-  <div class="row">
-    <h3>Explorer</h3>
-  </div>
-  <hr>
-</div>
+<%== view_title('Explorer', hr: true) %>
 
 <div class="container">
   <% if @topics.empty? %>

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

@@ -1,8 +1,39 @@
+<% if @safe_key.failure? %>
+  <%==
+    partial(
+      'explorer/failed_deserialization',
+      locals: {
+        attribute: 'key',
+        error: @safe_key.error
+      }
+    )
+  %>
+<% end %>
+
+<% if @safe_headers.failure? %>
+  <%==
+    partial(
+      'explorer/failed_deserialization',
+      locals: {
+        attribute: 'headers',
+        error: @safe_headers.error
+      }
+    )
+  %>
+<% end %>
+
 <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">
       <tbody>
-        <% @message.metadata.to_h.except(:received_at, :key, :headers).each do |k, v| %>
+        <%==
+          partial(
+            'explorer/messages/key',
+            locals: { message: @message }
+          )
+        %>
+
+        <% @message.metadata.to_h.except(:received_at, :raw_key, :raw_headers, :message).each do |k, v| %>
           <%==
             partial(
               'explorer/messages/detail',
@@ -24,13 +55,6 @@
           )
         %>
 
-        <%==
-          partial(
-            'explorer/messages/key',
-            locals: { message: @message }
-          )
-        %>
-
         <%==
           partial(
             'explorer/messages/headers',

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

@@ -1,16 +1,16 @@
 <% if @visibility_filter.payload?(@message) %>
   <div class="row">
     <div class="col-sm-12 mb-4">
-      <% if @payload_error %>
-        <%== partial 'explorer/failed_deserialization' %>
+      <% if @safe_payload.failure? %>
+        <%== partial 'explorer/failed_deserialization', locals: { attribute: 'payload', error: @safe_payload.error } %>
       <% end %>
 
       <div class="card">
         <div class="card-body">
-          <% if @payload_error %>
+          <% 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"><%= @pretty_payload %></code></pre>
+            <pre class="m-0 p-0"><code class="wrapped json p-0 m-0"><%= @safe_payload.result %></code></pre>
           <% end %>
         </div>
       </div>

data/lib/karafka/web/{ui/pro → pro/ui}/views/explorer/message/_payload_actions.erb

@@ -8,7 +8,7 @@
     </a>
   <% end %>
 
-  <% if @visibility_filter.export?(@message) && !@payload_error %>
+  <% if @visibility_filter.export?(@message) && @safe_payload.success? %>
     <a
       href="<%= root_path('messages', @message.topic, @message.partition, @message.offset, 'export') %>"
       class="btn btn-secondary btn-sm"

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

@@ -0,0 +1,33 @@
+<% if @safe_headers.success? %>
+  <% visible = @visibility_filter.headers?(message) %>
+  <% message.metadata.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 %>
+<% else %>
+  <% visible = @visibility_filter.headers?(message) %>
+  <% message.metadata[:raw_headers].each do |k, v| %>
+    <tr>
+      <td>
+        <%= "raw_headers.#{k}" %>
+      </td>
+      <td>
+        <% if visible %>
+          <%= object_value_to_s(v) %>
+        <% else %>
+          <span class="text-muted">[Filtered]</span>
+        <% end %>
+      </td>
+    </tr>
+  <% end %>
+<% end %>

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

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

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

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

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

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

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

@@ -0,0 +1,21 @@
+<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>Partition</th>
+        <th>Offset</th>
+        <th>Timestamp</th>
+        <th>Key</th>
+        <th></th>
+      </tr>
+    </thead>
+    <tbody>
+      <%==
+        each_partial(
+          @messages,
+          'explorer/message'
+        )
+      %>
+    </tbody>
+  </table>
+</div>

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

@@ -0,0 +1,5 @@
+<div class="mt-4">
+  <%==
+    alert_info('This topic is empty and does not contain any data in any of the partitions.')
+  %>
+</div>

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

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