karafka-web 0.9.1 → 0.10.1

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

@@ -0,0 +1,27 @@
+<div class="col-span-4">
+  <section class="actions">
+    <% if @messages && !@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>
+
+      <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 'explorer/selector' %>
+  </section>
+</div>

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

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

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

@@ -1,10 +1,8 @@
-<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>
+<%==
+  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.
+    '
+  )
+%>

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

@@ -1,51 +1,31 @@
-<div class="container mb-4">
-  <div class="row">
-    <div class="col">
-      <h3>
-        <%= @topic_id %>
-      </h3>
-    </div>
+<% view_title @topic_id %>
 
-    <div class="col">
-        <div class="col-auto text-end">
-           <label class="col-form-label">Partition</label>
-        </div>
-    </div>
+<%== partial 'explorer/topic/actions' %>
 
-    <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 class="col-span-12">
+  <% if @limited %>
+    <div class="mb-6">
+      <%== partial('explorer/topic/limited') %>
     </div>
-  </div>
+  <% end %>
 
-  <hr>
-</div>
+  <% if @messages.empty? && params.current_page == 1 %>
+    <%== partial 'explorer/topic/empty' %>
+  <% elsif @messages.empty? %>
+    <%== partial 'shared/no_paginated_data' %>
+  <% else %>
+    <% content_for :table_metadata do %>
+      <p class="table_metadata">
+        Partitions:
 
-<div class="container">
-  <div class="row mb-5">
-    <div class="col-sm-12">
-      <%== partial('explorer/topic/details') %>
+        <%== badge("total: #{@partitions_count}") %>
+        <%==
+          range = [@active_partitions.first, @active_partitions.last].uniq.join(' to ')
+          badge("visible: #{range}")
+        %>
+      </p>
+    <% end %>
 
-      <% 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>
+    <%== partial('explorer/partition/messages') %>
+  <% end %>
 </div>

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

@@ -1,11 +1,11 @@
-<li class="breadcrumb-item">
+<li>
   <a href="<%= root_path('health') %>">
-    Consumers groups health
+    Consumers Groups Health
   </a>
 </li>
 
 <% if current_path.include?('/lags') %>
-  <li class="breadcrumb-item">
+  <li>
     <a href="<%= root_path('health', 'lags') %>">
       Lags
     </a>
@@ -13,7 +13,7 @@
 <% end %>
 
 <% if current_path.include?('/overview') %>
-  <li class="breadcrumb-item">
+  <li>
     <a href="<%= root_path('health', 'overview') %>">
       Overview
     </a>
@@ -21,7 +21,7 @@
 <% end %>
 
 <% if current_path.include?('/offsets') %>
-  <li class="breadcrumb-item">
+  <li>
     <a href="<%= root_path('health', 'offsets') %>">
       Offsets
     </a>
@@ -29,7 +29,7 @@
 <% end %>
 
 <% if current_path.include?('/changes') %>
-  <li class="breadcrumb-item">
+  <li>
     <a href="<%= root_path('health', 'changes') %>">
       Changes
     </a>
@@ -37,7 +37,7 @@
 <% end %>
 
 <% if current_path.include?('/cluster_lags') %>
-  <li class="breadcrumb-item">
+  <li>
     <a href="<%= root_path('health', 'cluster_lags') %>">
       Cluster Lags
     </a>

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

@@ -1,7 +1 @@
-<div class="container mb-4">
-  <div class="row">
-    <div class="col-lg-12">
-      <%== alert_info('No health data is available. It may mean no processes are running.') %>
-    </div>
-  </div>
-</div>
+<%== alert_info('No health data is available. It may mean no processes are running.') %>

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

@@ -1,4 +1,4 @@
-<tr class="align-middle <%= lso_risk_state_bg(details) %> status-row-<%= details.process.status %>">
+<tr class="<%= lso_risk_state_bg(details) %> status-row-<%= details.process.status %>">
   <td>
     <%= partition_id %>
   </td>
@@ -9,7 +9,7 @@
     <%== 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">
+    <span class="badge <%= kafka_state_badge(details.fetch_state) %> mt-1 mb-1">
       <%= details.fetch_state %>
     </span>
   </td>
@@ -17,7 +17,7 @@
     <%== poll_state_with_change_time_label(details.poll_state, details.poll_state_ch) %>
   </td>
   <td>
-    <span class="badge bg-success <%= lso_risk_state_bg(details) %> bg-opacity-100">
+    <span class="badge badge-success <%= lso_risk_state_badge(details) %>">
       <%= details.lso_risk_state %>
     </span>
   </td>

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

@@ -1,4 +1,4 @@
-<tr class="align-middle <%= lso_risk_state_bg(details) %> status-row-<%= details.process.status %>">
+<tr class="<%= lso_risk_state_bg(details) %> status-row-<%= details.process.status %>">
   <td>
     <%= partition_id %>
   </td>
@@ -12,12 +12,12 @@
   </td>
 
   <td>
-    <span class="badge <%= lag_trend_bg(details.lag_d) %>">
+    <span class="badge <%= lag_trend_badge(details.lag_d) %>">
       <%= details.lag_d %>
     </span>
   </td>
   <td>
-    <span class="badge <%= lag_trend_bg(details.lag_stored_d) %>">
+    <span class="badge <%= lag_trend_badge(details.lag_stored_d) %>">
       <%= details.lag_stored_d %>
     </span>
   </td>

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

@@ -1,4 +1,4 @@
-<tr class="align-middle <%= lso_risk_state_bg(details) %> status-row-<%= details.process.status %>">
+<tr class="<%= lso_risk_state_bg(details) %>">
   <td>
     <%= partition_id %>
   </td>
@@ -33,7 +33,7 @@
     <%== relative_time(Time.now - details.ls_offset_fd / 1_000.0) %>
   </td>
   <td>
-    <span class="badge bg-success <%= lso_risk_state_bg(details) %> bg-opacity-100">
+    <span class="badge badge-success <%= lso_risk_state_badge(details) %> badge-opacity-100">
       <%= details.lso_risk_state %>
     </span>
   </td>

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

@@ -1,4 +1,4 @@
-<tr class="align-middle <%= lso_risk_state_bg(details) %> status-row-<%= details.process.status %>">
+<tr class="<%= lso_risk_state_bg(details) %> status-row-<%= details.process.status %>">
   <td>
     <%= partition_id %>
   </td>
@@ -18,13 +18,9 @@
     <% change_in_seconds = details.poll_state_ch / 1_000.0 %>
 
     <% if details.poll_state == 'active' %>
-      <span class="badge bg-secondary">
-        N/A
-      </span>
+      <%== badge_secondary('N/A') %>
     <% elsif change_in_seconds >= 60 * 60 * 31 * 12 %>
-      <span class="badge bg-secondary">
-        Until manual resume
-      </span>
+      <%== badge_secondary('Until manual resume') %>
     <% else %>
       <%== relative_time(Time.now + change_in_seconds) %>
     <% end %>

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

@@ -0,0 +1,8 @@
+<p class="table_metadata">
+  Last rebalance:
+  <%==
+    badge_secondary(
+      relative_time(details[:rebalanced_at])
+    )
+  %>
+</p>

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

@@ -1,55 +1,38 @@
-<div class="container">
-  <div class="row mb-5">
-    <div class="col-sm-12">
+<div class="col-span-12 mb-9">
+  <div class="tab-container">
+    <a
+      href="<%= root_path('health', 'overview') %>"
+      class="custom-tab <%= nav_class(include: 'overview') %>"
+    >
+      Overview
+    </a>
 
-      <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>
+    <a
+      href="<%= root_path('health', 'lags') %>"
+      class="custom-tab <%= nav_class(include: '/lags') %>"
+    >
+      Lags
+    </a>
 
-        <li class="nav-item">
-          <a
-            class="nav-link <%= nav_class(include: '/lags') %>"
-            href="<%= root_path('health', 'lags') %>"
-          >
-            Lags
-          </a>
-        </li>
+    <a
+      href="<%= root_path('health', 'offsets') %>"
+      class="custom-tab <%= nav_class(include: 'offsets') %>"
+    >
+      Offsets
+    </a>
 
-        <li class="nav-item">
-          <a
-            class="nav-link <%= nav_class(include: 'offsets') %>"
-            href="<%= root_path('health', 'offsets') %>"
-          >
-            Offsets
-          </a>
-        </li>
+    <a
+      href="<%= root_path('health', 'changes') %>"
+      class="custom-tab <%= nav_class(include: 'changes') %>"
+    >
+      Changes
+    </a>
 
-        <li class="nav-item">
-          <a
-            class="nav-link <%= nav_class(include: 'changes') %>"
-            href="<%= root_path('health', 'changes') %>"
-          >
-            Changes
-          </a>
-        </li>
-
-        <li class="nav-item">
-          <a
-            class="nav-link <%= nav_class(include: 'cluster_lags') %>"
-            href="<%= root_path('health', 'cluster_lags') %>"
-          >
-            Cluster Lags
-          </a>
-        </li>
-
-      </ul>
-
-    </div>
+    <a
+      href="<%= root_path('health', 'cluster_lags') %>"
+      class="custom-tab <%= nav_class(include: 'cluster_lags') %>"
+    >
+      Cluster Lags
+    </a>
   </div>
 </div>

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

@@ -1,57 +1,57 @@
-<%== view_title('Consumers Groups Changes Details') %>
+<% view_title 'Consumers Groups Changes Details' %>
 
 <%== partial 'health/tabs' %>
 
-<% if @stats.empty? %>
-  <%== partial 'health/no_data' %>
-<% end %>
+<div class="col-span-12">
+  <% if @stats.empty? %>
+    <%== partial 'health/no_data' %>
+  <% end %>
 
-<% @stats.each_with_index do |(cg_name, details), index| %>
-  <div class="container mb-5">
-    <%== partial 'health/consumer_group_header', locals: { cg_name: cg_name, details: details } %>
+  <% @stats.each_with_index do |(cg_name, details), index| %>
+    <h2 class="h2"><%= cg_name %></h2>
 
-    <div class="row mb-3">
-      <div class="col-sm-12 table-responsive">
-        <% topics = details[:topics] %>
-        <% 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 rowspan="2"><%== sort_link('Partition', :id) %></th>
-                <th colspan="4" class="text-center">Offsets changes</th>
-                <th rowspan="2">
-                  <%== sort_link('Pause state change', :poll_state_ch) %>
-                </th>
-              </tr>
-              <tr class="align-middle">
-                <th><%== sort_link('Committed', :committed_offset_fd) %></th>
-                <th><%== sort_link('Stored', :stored_offset_fd) %></th>
-                <th><%== sort_link('High', :hi_offset_fd) %></th>
-                <th><%== sort_link('Last stable', :lso_risk_state) %></th>
-              </tr>
-            </thead>
-            <tbody>
-                <% partitions.each do |partition_id, details| %>
-                  <%==
-                    partial(
-                      'health/partition_times',
-                      locals: {
-                        topic_name: topic_name,
-                        partition_id: partition_id,
-                        details: details
-                      }
-                    )
-                  %>
-                <% end %>
-            </tbody>
-          </table>
-        <% end %>
+    <% topics = details[:topics] %>
+    <% topics.each_with_index do |(topic_name, partitions), index| %>
+      <div class="data-table-wrapper">
+        <table class="data-table">
+          <thead>
+            <tr>
+              <th colspan="12">
+                <%= topic_name %>
+              </th>
+            </tr>
+            <tr>
+              <th rowspan="2"><%== sort_link('Partition', :id) %></th>
+              <th colspan="4" class="text-center">Offsets changes</th>
+              <th rowspan="2">
+                <%== sort_link('Pause state change', :poll_state_ch) %>
+              </th>
+            </tr>
+            <tr>
+              <th><%== sort_link('Committed', :committed_offset_fd) %></th>
+              <th><%== sort_link('Stored', :stored_offset_fd) %></th>
+              <th><%== sort_link('High', :hi_offset_fd) %></th>
+              <th><%== sort_link('Last stable', :lso_risk_state) %></th>
+            </tr>
+          </thead>
+          <tbody>
+              <% partitions.each do |partition_id, details| %>
+                <%==
+                  partial(
+                    'health/partition_times',
+                    locals: {
+                      topic_name: topic_name,
+                      partition_id: partition_id,
+                      details: details
+                    }
+                  )
+                %>
+              <% end %>
+          </tbody>
+        </table>
+
+        <%== partial 'health/table_metadata', locals: { details: details } %>
       </div>
-    </div>
-  </div>
-<% end %>
+    <% end %>
+  <% end %>
+</div>

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

@@ -1,4 +1,4 @@
-<%== view_title('Consumers Groups Cluster Lags Details') %>
+<% view_title 'Consumers Groups Cluster Lags Details' %>
 
 <%== partial 'health/tabs' %>
 
@@ -7,48 +7,35 @@
 <% end %>
 
 <% @stats.each_with_index do |(cg_name, details), index| %>
-  <div class="container mb-5">
-    <div class="row mb-4">
-      <div class="col-sm-12">
-        <h4 class="mb-4"><%= cg_name %></h4>
-      </div>
-    </div>
+  <div class="col-span-12 mb-3">
+    <h2 class="h2"><%= cg_name %></h2>
 
-    <div class="row mb-3">
-      <div class="col-sm-12 table-responsive">
-        <% details.each_with_index do |(topic_name, partitions), index| %>
-          <table class="processes bg-white table table-hover table-bordered table-striped align-middle <%= (index+1 < details.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><%== sort_link('Partition', :id) %></th>
-                <th><%== sort_link(:lag) %></th>
-                <th><%== sort_link(:stored_offset) %></th>
+    <div class="data-table-wrapper">
+      <% details.each_with_index do |(topic_name, partitions), index| %>
+        <table class="data-table">
+          <thead>
+            <tr>
+              <th colspan="12">
+                <%= topic_name %>
+              </th>
+            </tr>
+            <tr>
+              <th><%== sort_link('Partition', :id) %></th>
+              <th><%== sort_link(:lag) %></th>
+              <th><%== sort_link(:stored_offset) %></th>
+            </tr>
+          </thead>
+          <tbody>
+            <% partitions.each do |details| %>
+              <tr>
+                <td><%= details[:id] %></td>
+                <td><%== details[:lag] %></td>
+                <td><%== details[:stored_offset] %></td>
               </tr>
-            </thead>
-            <tbody>
-                <% partitions.each do |details| %>
-                  <tr class="align-middle">
-                    <td>
-                      <%= details[:id] %>
-                    </td>
-                    <td>
-                      <%== details[:lag] %>
-                    </td>
-                    <td>
-                      <%== details[:stored_offset] %>
-                    </td>
-                  </tr>
-
-                <% end %>
-            </tbody>
-          </table>
-        <% end %>
-      </div>
+            <% end %>
+          </tbody>
+        </table>
+      <% end %>
     </div>
   </div>
 <% end %>