karafka-web 0.9.0 → 0.10.0.beta1

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

@@ -1,88 +1,79 @@
-<%== partial 'consumers/counters' %>
+<% view_title 'Dashboard' %>
+
+<%== partial 'dashboard/counters' %>
 
 <% if @aggregated.sufficient? %>
   <%== partial 'dashboard/ranges_selector' %>
 
-  <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>
-
-        <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: 'Topics lags', id: 'topics-lags' } %>
-          <%== 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/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/charts/line', locals: { data: data, id: 'batches' } %>
-          </div>
-
-          <div class="tab-pane" id="topics-lags" role="tabpanel">
-            <%== 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/charts/line', locals: { data: @topics_charts.topics_pace, id: 'topics-pace' } %>
-          </div>
-
-          <div class="tab-pane" id="max-lso-time" role="tabpanel">
-            <%== partial 'shared/charts/line', locals: { data: @topics_charts.max_lso_time, id: 'max-lso-time' } %>
-          </div>
-        </div>
-      </div>
+  <h2 class="h2">Processing Metrics</h2>
+
+  <div class="tab-container-wrapper" id="graphs1">
+    <div class="tab-container inline-tabs">
+      <%== partial 'shared/tab_nav', locals: { title: 'Consumed', id: 'consumed', active: true } %>
+      <%== partial 'shared/tab_nav', locals: { title: 'Batches', id: 'batches' } %>
+      <%== partial 'shared/tab_nav', locals: { title: 'Lags', id: 'lags' } %>
+      <%== partial 'shared/tab_nav', locals: { title: 'Max LSO', id: 'max-lso' } %>
+      <%== partial 'shared/tab_nav', locals: { title: 'Pace', id: 'pace' } %>
+    </div>
+  </div>
+
+  <div class="col-span-12">
+    <div id="consumed" class="hidden">
+      <% data = @aggregated_charts.with(:messages, :errors, :dead, :retries, :batch_size) %>
+      <%== partial 'shared/charts/line', locals: { data: data, id: 'consumed' } %>
+    </div>
+
+    <div id="batches" class="hidden">
+      <% data = @aggregated_charts.with(:batches, :jobs, :errors, :dead, :retries) %>
+      <%== partial 'shared/charts/line', locals: { data: data, id: 'batches' } %>
+    </div>
+
+    <div id="lags" class="hidden">
+      <%== partial 'shared/charts/line', locals: { data: @topics_charts.lags_hybrid, id: 'lags' } %>
+    </div>
+
+    <div id="max-lso" class="hidden">
+      <%== partial 'shared/charts/line', locals: { data: @topics_charts.max_lso, id: 'max-lso' } %>
+    </div>
+
+    <div id="pace" class="hidden">
+      <%== partial 'shared/charts/line', locals: { data: @topics_charts.pace, id: 'pace' } %>
+    </div>
+  </div>
+
+  <h2 class="h2">Utilization Metrics</h2>
+
+  <div class="tab-container-wrapper" id="graphs2">
+    <div class="tab-container inline-tabs">
+      <%== 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' } %>
+      <%== partial 'shared/tab_nav', locals: { title: 'Data transfers', id: 'data-transfers' } %>
     </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' } %>
-          <%== partial 'shared/tab_nav', locals: { title: 'Data transfers', id: 'data-transfers' } %>
-        </ul>
-
-        <div class="tab-content">
-          <div class="tab-pane show active" id="utilization" role="tabpanel">
-            <% data = @aggregated_charts.with(:utilization) %>
-            <%== 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/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/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/charts/line', locals: { data: data, id: 'data-transfers', label_type_y: 'memory' } %>
-          </div>
-        </div>
-      </div>
+  <div class="col-span-12">
+    <div id="utilization" class="hidden">
+      <% data = @aggregated_charts.with(:utilization) %>
+      <%== partial 'shared/charts/line', locals: { data: data, id: 'utilization', label_type_y: 'percentage' } %>
+    </div>
+
+    <div id="rss" class="hidden">
+      <% data = @aggregated_charts.with(:rss, :process_rss) %>
+      <%== partial 'shared/charts/line', locals: { data: data, id: 'rss', label_type_y: 'memory' } %>
+    </div>
+
+    <div id="concurrency" class="hidden">
+      <% data = @aggregated_charts.with(:processes, :workers, :active_listeners, :standby_listeners) %>
+      <%== partial 'shared/charts/line', locals: { data: data, id: 'concurrency' } %>
+    </div>
+
+    <div id="data-transfers" class="hidden">
+      <% data = @aggregated_charts.data_transfers %>
+      <%== partial 'shared/charts/line', locals: { data: data, id: 'data-transfers', label_type_y: 'memory' } %>
     </div>
   </div>
+
 <% else %>
   <%== partial 'dashboard/not_enough_data' %>
 <% end %>

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

@@ -1,4 +1,4 @@
-<li class="breadcrumb-item">
+<li>
   <a href="<%= root_path('dlq') %>">
     Dead Letter Queue topics
   </a>

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

@@ -1,7 +1 @@
-<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>
+<%== alert_info('No Dead Letter Queue topics exist in Kafka.') %>

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

@@ -1,12 +1,9 @@
-<div class="col">
-  <div class="card" >
-    <div class="card-body p-2">
-      <p class="card-text mb-0 p-2">
-        <a href="<%= explorer_path(topic[:topic_name]) %>">
-          <%= topic[:topic_name] %> /
-          <%= topic[:partition_count] %>
-        </a>
-      </p>
-    </div>
+<div class="topic-tile">
+  <div class="topic-tile-body">
+    <p class="topic-tile-text">
+      <a href="<%= explorer_path(topic[:topic_name]) %>" class="topic-tile-link">
+        <%= topic[:topic_name] %> / <%= topic[:partition_count] %>
+      </a>
+    </p>
   </div>
 </div>

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

@@ -1,16 +1,14 @@
-<%== view_title('Dead Letter Queue Topics', hr: true) %>
+<% view_title 'Dead Letter Queue Topics' %>
 
 <% if @dlq_topics.empty? %>
   <%== partial 'dlq/no_topics' %>
 <% else %>
-  <div class="container">
-    <div class="row mb-5 row-cols-1 row-cols-md-4 g-4">
-      <%==
-        each_partial(
-          @dlq_topics,
-          'dlq/topic'
-        )
-      %>
-    </div>
+  <div class="topic-tiles">
+    <%==
+      each_partial(
+        @dlq_topics,
+        'dlq/topic'
+      )
+    %>
   </div>
 <% end %>

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

@@ -1,11 +1,11 @@
-<li class="breadcrumb-item">
+<li>
   <a href="<%= root_path('errors') %>">
     Errors
   </a>
 </li>
 
 <% if @partition_id %>
-  <li class="breadcrumb-item">
+  <li>
     <a href="<%= root_path('errors', @partition_id) %>">
       Partition <%= @partition_id %>
     </a>
@@ -13,7 +13,7 @@
 <% end %>
 
 <% if @offset %>
-  <li class="breadcrumb-item">
+  <li>
     <a href="<%= root_path('errors', @partition_id, @offset) %>">
       <%=
         type = @error_message.payload[:type]

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

@@ -5,7 +5,7 @@
 
   <tr>
     <td>
-      <span class="badge bg-secondary badge-topic">
+      <span class="badge badge-secondary">
         <% if error[:details].key?(:topic) %>
           <%= error[:details][:topic] %>: <%= error[:details][:partition] %>
         <% else %>
@@ -23,10 +23,13 @@
     <td>
       <%== relative_time error[:occurred_at] %>
     </td>
-    <td class="text-center">
-      <a href="<%= root_path('errors', error_msg.partition, error_msg.offset) %>" class="btn btn-sm btn-secondary text-white">
-        Details
-      </a>
+    <td>
+      <%==
+        link_button_primary_sm(
+          'Details',
+          root_path('errors', error_msg.partition, error_msg.offset)
+        )
+      %>
     </td>
   </tr>
 <% end %>

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

@@ -0,0 +1,12 @@
+<p class="w-full">
+  <label class="text-gray-700">Partition:</label>
+  <select class="select select-bordered w-full max-w-xs select-sm ml-1" id="current-partition">
+    <%==
+      each_partial(
+        [nil] + @partitions_count.times.to_a,
+        'errors/partition_option',
+        local: :partition
+      )
+    %>
+  </select>
+</p>

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

@@ -1,7 +1,7 @@
-<div class="table-responsive">
-  <table class="processes bg-white table table-hover table-bordered table-striped mb-0 align-middle">
+<div class="row-table-wrapper">
+  <table class="row-table">
     <thead>
-      <tr class="align-middle">
+      <tr>
         <th>Origin</th>
         <th>ID</th>
         <th>Error</th>
@@ -9,7 +9,6 @@
         <th></th>
       </tr>
     </thead>
-
     <tbody>
       <%==
         each_partial(
@@ -20,4 +19,6 @@
       %>
     </tbody>
   </table>
+
+  <%== content_for :table_metadata %>
 </div>

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

@@ -1,19 +1,54 @@
-<%== partial('errors/title_with_select') %>
+<% view_title 'Errors' %>
 
-<div class="container">
-  <div class="row mb-5">
-    <div class="col-sm-12">
-      <%== partial('explorer/topic/details') %>
+<div class="col-span-4">
+  <section class="actions">
+    <% if @error_messages && !@error_messages.empty? %>
+      <a
+        href="<%= explorer_path(@topic_id, 'recent') %>"
+        class="btn-action"
+        title="Display the most recent message for this topic with auto-refresh"
+      >
+        <%== icon(:play_circle) %>
+      </a>
 
-      <% if @limited %>
-        <%== partial('explorer/topic/limited') %>
-      <% end %>
+      <a
+        href="<%= explorer_path(@topic_id, 'search') %>"
+        class="btn-action"
+        title="Search in this topic"
+      >
+        <%== icon(:magnifying_glass) %>
+      </a>
+    <% end %>
+  </section>
+</div>
+
+<div class="col-span-8 mb-3">
+  <section class="actions">
+    <%== partial 'errors/selector' %>
+  </section>
+</div>
+
+<div class="col-span-12">
+  <% if @limited %>
+    <%== partial('explorer/topic/limited') %>
+  <% end %>
+
+  <% if @error_messages.empty? && params.current_page == 1 %>
+    <%== partial 'explorer/topic/empty' %>
+  <% else %>
+    <% content_for :table_metadata do %>
+      <p class="table_metadata">
+        Partitions:
+        <span class="badge">
+          total: <%= @partitions_count %>
+        </span>
+        <span class="badge">
+          visible:
+          <%= [@active_partitions.first, @active_partitions.last].uniq.join(' to ') %>
+        </span>
+      </p>
+    <% end %>
 
-      <% if @error_messages.empty? && params.current_page == 1 %>
-        <%== partial 'explorer/topic/empty' %>
-      <% else %>
-        <%== partial 'errors/table' %>
-      <% end %>
-    </div>
-  </div>
+    <%== partial 'errors/table' %>
+  <% end %>
 </div>

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

@@ -1,17 +1,64 @@
-<%== partial('errors/title_with_select') %>
+<% view_title "Partition #{@partition_id}" %>
 
-<div class="container">
-  <div class="row mb-5">
-    <div class="col-sm-12">
-      <%== partial('explorer/partition/details') %>
+<div class="col-span-4">
+  <section class="actions">
+    <% if @error_messages && !@error_messages.empty? %>
+      <a
+        href="<%= explorer_path(@topic_id, @partition_id, 'recent') %>"
+        class="btn-action"
+        title="Display the most recent message for this partition with auto-refresh"
+      >
+        <%== icon(:play_circle) %>
+      </a>
 
-      <% if @watermark_offsets.empty? %>
-        <%== partial 'errors/no_errors' %>
-      <% elsif @watermark_offsets.cleaned? %>
-        <%== partial 'errors/cleaned' %>
-      <% else %>
-        <%== partial 'errors/table' %>
-      <% end %>
-    </div>
-  </div>
+      <a
+        href="<%= explorer_path(@topic_id, 'search') %>"
+        class="btn-action"
+        title="Search in this topic"
+      >
+        <%== icon(:magnifying_glass) %>
+      </a>
+
+      <% closest_path = explorer_path(@topic_id, @partition_id) %>
+      <input
+        type="image"
+        src="<%= asset_path('images/calendar.svg') %>"
+        width="45"
+        height="32"
+        class="btn-action p-1 opacity-60"
+        id="offset-lookup-datepicker"
+        value="&#128198;"
+        data-target="<%= closest_path %>"
+      />
+    <% end %>
+  </section>
+</div>
+
+<div class="col-span-8 mb-3">
+  <section class="actions">
+    <%== partial 'errors/selector' %>
+  </section>
+</div>
+
+<div class="col-span-12">
+  <% if @watermark_offsets.empty? %>
+    <%== partial 'errors/no_errors' %>
+  <% elsif @watermark_offsets.cleaned? %>
+    <%== partial 'errors/cleaned' %>
+  <% else %>
+    <% content_for :table_metadata do %>
+      <p class="table_metadata">
+        Watermark offsets:
+        <span class="badge">
+          high: <%= @watermark_offsets.high %>
+        </span>
+
+        <span class="badge">
+          low: <%= @watermark_offsets.low %>
+        </span>
+      </p>
+    <% end %>
+
+    <%== partial 'errors/table' %>
+  <% end %>
 </div>

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

@@ -1,57 +1,39 @@
-<%==
+<%
   type = @error_message.payload[:type]
   error_class = @error_message.payload[:error_class]
 
   view_title("#{type}: #{error_class}")
 %>
 
-<div class="container">
-  <div class="row mb-4">
-    <div class="col-sm-12">
-      <h5 class="mb-2">
-        Metadata
-      </h5>
-      <hr/>
-    </div>
-  </div>
+<div class="col-span-12 mb-3">
+  <h2 class="h2">
+    Metadata
+  </h2>
 
-  <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>
-          <% @error_message.payload.each do |k, v| %>
-            <% next if k == :backtrace %>
-            <%==
-              partial(
-                'errors/detail',
-                locals: {
-                  k: k,
-                  v: v
-                }
-              )
-            %>
-          <% end %>
-        </tbody>
-      </table>
-    </div>
+  <div class="data-table-wrapper">
+    <table class="data-table">
+      <tbody>
+        <% @error_message.payload.each do |k, v| %>
+          <% next if k == :backtrace %>
+          <%==
+            partial(
+              'errors/detail',
+              locals: {
+                k: k,
+                v: v
+              }
+            )
+          %>
+        <% end %>
+      </tbody>
+    </table>
   </div>
+</div>
 
-  <div class="row mb-4">
-    <div class="col-sm-12">
-      <h5 class="mb-2">
-        Backtrace
-      </h5>
-      <hr/>
-    </div>
-  </div>
+<div class="col-span-12 mb-3">
+  <h2 class="h2">
+    Backtrace
+  </h2>
 
-  <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"><%= @error_message.payload[:backtrace] %></code></pre>
-        </div>
-      </div>
-    </div>
-  </div>
+  <pre class="mb-5 p-0 border border-gray-300 text-sm"><code class="wrapped json p-0 m-0"><%= @error_message.payload[:backtrace] %></code></pre>
 </div>

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

@@ -1,11 +1,11 @@
-<li class="breadcrumb-item">
+<li>
   <a href="<%= root_path('explorer') %>">
     Explorer
   </a>
 </li>
 
 <% if @topic_id %>
-  <li class="breadcrumb-item">
+  <li>
     <a href="<%= explorer_path(@topic_id) %>">
       <%= @topic_id %>
     </a>
@@ -13,7 +13,7 @@
 <% end %>
 
 <% if @partition_id %>
-  <li class="breadcrumb-item">
+  <li>
     <a href="<%= explorer_path(@topic_id, @partition_id) %>">
       Partition <%= @partition_id %>
     </a>
@@ -29,3 +29,11 @@
     </a>
   </li>
 <% end %>
+
+<% if current_path.include?("#{@topic_id}/search") %>
+  <li>
+    <a href="<%= explorer_path(@topic_id, 'search') %>">
+      Search
+    </a>
+  </li>
+<% end %>

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

@@ -1,4 +1,9 @@
-<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 class="col-span-12 mb-6">
+  <div class="alert alert-warning">
+    <%== icon :exclamation_triangle %>
+    <span>
+      We could not deserialize the <strong><%= attribute %></strong> due to the following error:
+      <code><%= error.class %></code>. Raw <%= attribute %> displayed instead.
+    </span>
+  </div>
 </div>

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

@@ -1,4 +1,4 @@
-<% safe_key = ::Karafka::Web::Ui::Lib::SafeRunner.new { message.key } %>
+<% safe_key = ::Karafka::Web::Pro::Ui::Lib::SafeRunner.new { message.key } %>
 
 <% if message.is_a?(Array) %>
   <tr>
@@ -8,7 +8,7 @@
     <td class="text-muted">
       <%= message[1] %>
     </td>
-    <td colspan="3" class="text-center text-muted">
+    <td colspan="4" class="text-center text-muted">
       This offset does not contain any data. The message may have been compacted or is a system entry.
     </td>
   </tr>
@@ -20,6 +20,9 @@
     <td>
       <%= message.offset %>
     </td>
+    <td>
+      <%== (message.timestamp.to_f * 1_000).to_i %>
+    </td>
     <td>
       <%== time_with_label(message.timestamp) %>
     </td>
@@ -34,10 +37,13 @@
         <span class="text-muted">[Filtered]</span>
       <% end %>
     </td>
-    <td class="text-center">
-      <a href="<%= explorer_path(message.topic, message.partition, message.offset) %>" class="btn btn-sm btn-secondary">
-        Details
-      </a>
+    <td>
+      <%==
+        link_button_primary_sm(
+          'Details',
+          explorer_path(message.topic, message.partition, message.offset)
+        )
+      %>
     </td>
   </tr>
 <% end %>

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

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