karafka-web 0.6.3 → 0.7.0

data/lib/karafka/web/ui/pro/views/dashboard/_ranges_selector.erb

@@ -0,0 +1,39 @@
+<div class="container">
+  <div class="row">
+    <div class="col-sm-12 text-end">
+      <div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
+        <%
+          path = root_path('dashboard?range=seconds')
+          active = params.current_range == :seconds ? 'active' : false
+        %>
+        <a type="button" href="<%= path %>" class="btn btn-outline-primary <%= active %>">
+          5 minutes
+        </a>
+
+        <%
+          path = root_path('dashboard?range=minutes')
+          active = params.current_range == :minutes ? 'active' : false
+        %>
+        <a type="button" href="<%= path %>" class="btn btn-outline-primary <%= active %>">
+          1 hour
+        </a>
+
+        <%
+          path = root_path('dashboard?range=hours')
+          active = params.current_range == :hours ? 'active' : false
+        %>
+        <a type="button" href="<%= path %>" class="btn btn-outline-primary <%= active %>">
+          24 hours
+        </a>
+
+        <%
+          path = root_path('dashboard?range=days')
+          active = params.current_range == :days ? 'active' : false
+        %>
+        <a type="button" href="<%= path %>" class="btn btn-outline-primary <%= active %>">
+          7 days
+        </a>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,82 @@
+<%== partial 'consumers/counters' %>
+
+<% if @aggregated.sufficient? %>
+  <%== partial 'dashboard/ranges_selector' %>
+
+  <div class="container">
+    <div class="row">
+      <div class="col-sm-12">
+        <h5 class="mb-3">Processing metrics</h5>
+
+        <hr class="mb-4"/>
+
+        <ul class="nav nav-tabs" id="graphs1" role="tablist">
+          <%== partial 'shared/tab_nav', locals: { title: 'Messages', id: 'messages', active: true } %>
+          <%== partial 'shared/tab_nav', locals: { title: 'Batches', id: 'batches' } %>
+          <%== partial 'shared/tab_nav', locals: { title: 'Lags stored', id: 'lags-stored' } %>
+          <%== partial 'shared/tab_nav', locals: { title: 'Topics pace', id: 'topics-pace' } %>
+          <%== partial 'shared/tab_nav', locals: { title: 'Max LSO time', id: 'max-lso-time' } %>
+        </ul>
+
+        <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' } %>
+          </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' } %>
+          </div>
+
+          <div class="tab-pane" id="lags-stored" role="tabpanel">
+            <%== partial 'shared/chart', locals: { data: @topics_charts.lags_stored, id: 'lags-stored' } %>
+          </div>
+
+          <div class="tab-pane" id="topics-pace" role="tabpanel">
+            <%== partial 'shared/chart', 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' } %>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="container">
+    <div class="row">
+      <div class="col-sm-12">
+        <h5 class="mb-3">Utilization metrics</h5>
+
+        <hr class="mb-4"/>
+
+        <ul class="nav nav-tabs" id="graphs2" role="tablist">
+          <%== partial 'shared/tab_nav', locals: { title: 'Utilization', id: 'utilization', active: true } %>
+          <%== partial 'shared/tab_nav', locals: { title: 'RSS', id: 'rss' } %>
+          <%== partial 'shared/tab_nav', locals: { title: 'Concurrency', id: 'concurrency' } %>
+        </ul>
+
+        <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' } %>
+          </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' } %>
+          </div>
+
+          <div class="tab-pane show" id="concurrency" role="tabpanel">
+            <% data = @aggregated_charts.with(:processes, :workers, :listeners) %>
+            <%== partial 'shared/chart', locals: { data: data, id: 'concurrency' } %>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+<% else %>
+  <%== partial 'dashboard/not_enough_data' %>
+<% end %>

data/lib/karafka/web/ui/pro/views/dlq/_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], 0) %>">
+        <a href="<%= explorer_path(topic[:topic_name]) %>">
           <%= topic[:topic_name] %> /
           <%= topic[:partition_count] %>
         </a>

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

@@ -1,14 +1,16 @@
 <li class="breadcrumb-item">
-  <a href="<%= root_path('errors', 0) %>">
+  <a href="<%= root_path('errors') %>">
     Errors
   </a>
 </li>
 
-<li class="breadcrumb-item">
-  <a href="<%= root_path('errors', @partition_id) %>">
-    Partition <%= @partition_id %>
-  </a>
-</li>
+<% if @partition_id %>
+  <li class="breadcrumb-item">
+    <a href="<%= root_path('errors', @partition_id) %>">
+      Partition <%= @partition_id %>
+    </a>
+  </li>
+<% end %>
 
 <% if @offset %>
   <li class="breadcrumb-item">

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

@@ -1,4 +1,4 @@
-<% if error_msg.is_a?(Integer) %>
+<% if error_msg.is_a?(Array) %>
   <tr>
     <td colspan="5" class="text-center text-muted">
       This error has either been removed or compacted and is no longer available.
@@ -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/_partition_option.erb

@@ -3,5 +3,5 @@
 <% else %>
   <option value="<%= root_path('errors', partition) %>">
 <% end %>
-  <%= partition %>
+  <%= partition || 'All' %>
 </option>

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

@@ -0,0 +1,21 @@
+<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>Process name</th>
+      <th>Error</th>
+      <th>Occurred at</th>
+      <th></th>
+    </tr>
+  </thead>
+
+  <tbody>
+    <%==
+      each_partial(
+        @error_messages,
+        'errors/error',
+        local: :error_msg
+      )
+    %>
+  </tbody>
+</table>

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

@@ -0,0 +1,31 @@
+<div class="container mb-4">
+  <div class="row">
+    <div class="col">
+      <h3>
+        Errors
+      </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,
+                'errors/partition_option',
+                local: :partition
+              )
+            %>
+          </select>
+        </div>
+    </div>
+  </div>
+
+  <hr>
+</div>

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

@@ -1,65 +1,18 @@
-<div class="container mb-4">
-  <div class="row">
-    <div class="col">
-      <h3>
-        Errors
-      </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(
-                @partitions_count.times.to_a,
-                'errors/partition_option',
-                local: :partition
-              )
-            %>
-          </select>
-        </div>
-    </div>
-  </div>
-
-  <hr>
-</div>
+<%== partial('errors/title_with_select') %>
 
 <div class="container">
   <div class="row mb-5">
     <div class="col-sm-12">
-      <%== partial('explorer/partition/watermark_offsets') %>
+      <%== partial('explorer/topic/details') %>
+
+      <% if @limited %>
+        <%== partial('explorer/topic/limited') %>
+      <% end %>
 
-      <% if @watermark_offsets.empty? %>
-        <%== partial 'errors/no_errors' %>
-      <% elsif @watermark_offsets.cleaned? %>
-        <%== partial 'errors/cleaned' %>
+      <% if @error_messages.empty? && params.current_page == 1 %>
+        <%== partial 'explorer/topic/empty' %>
       <% else %>
-        <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>Process name</th>
-              <th>Error</th>
-              <th>Occurred at</th>
-              <th></th>
-            </tr>
-          </thead>
-          <tbody>
-            <%==
-              each_partial(
-                @error_messages,
-                'errors/error',
-                local: :error_msg
-              )
-            %>
-          </tbody>
-        </table>
+        <%== partial 'errors/table' %>
       <% end %>
     </div>
   </div>

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

@@ -0,0 +1,17 @@
+<%== partial('errors/title_with_select') %>
+
+<div class="container">
+  <div class="row mb-5">
+    <div class="col-sm-12">
+      <%== partial('explorer/partition/details') %>
+
+      <% if @watermark_offsets.empty? %>
+        <%== partial 'errors/no_errors' %>
+      <% elsif @watermark_offsets.cleaned? %>
+        <%== partial 'errors/cleaned' %>
+      <% else %>
+        <%== partial 'errors/table' %>
+      <% end %>
+    </div>
+  </div>
+</div>

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, 0) %>">
+    <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

@@ -1,7 +1,10 @@
-<% if message.is_a?(Integer) %>
+<% if message.is_a?(Array) %>
   <tr>
     <td class="text-muted">
-      <%= message %>
+      <%= message[0] %>
+    </td>
+    <td class="text-muted">
+      <%= message[1] %>
     </td>
     <td colspan="3" class="text-center text-muted">
       This message has either been removed or compacted and is no longer available.
@@ -9,6 +12,9 @@
   </tr>
 <% else %>
   <tr>
+    <td>
+      <%= message.partition %>
+    </td>
     <td>
       <%= message.offset %>
     </td>
@@ -16,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 %>
+  <%= 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], 0) %>">
+        <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/_messages.erb

@@ -1,6 +1,7 @@
 <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>

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

@@ -17,7 +17,7 @@
           <select class="form-select form-select-sm mb-0 form-control" id="current-partition">
             <%==
               each_partial(
-                @partitions_count.times.to_a,
+                [nil] + @partitions_count.times.to_a,
                 'explorer/partition_option',
                 local: :partition
               )
@@ -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 %>