karafka-web 0.8.1 → 0.9.0.rc1

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

@@ -35,3 +35,11 @@
     </a>
   </li>
 <% end %>
+
+<% if current_path.include?('/cluster_lags') %>
+  <li class="breadcrumb-item">
+    <a href="<%= root_path('health', 'cluster_lags') %>">
+      Cluster Lags
+    </a>
+  </li>
+<% end %>

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

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

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

@@ -23,7 +23,7 @@
   </td>
   <td>
     <a href="<%= root_path('consumers', details.process.id, 'subscriptions') %>">
-      <%= details.process.name %>
+      <%== truncate(details.process.id, strategy: :middle) %>
     </a>
   </td>
 </tr>

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

@@ -2,17 +2,20 @@
   <td>
     <%= partition_id %>
   </td>
+
   <td>
     <%== lag_with_label details.lag %>
   </td>
+
+  <td>
+    <%== lag_with_label details.lag_stored %>
+  </td>
+
   <td>
     <span class="badge <%= lag_trend_bg(details.lag_d) %>">
       <%= details.lag_d %>
     </span>
   </td>
-  <td>
-    <%== lag_with_label details.lag_stored %>
-  </td>
   <td>
     <span class="badge <%= lag_trend_bg(details.lag_stored_d) %>">
       <%= details.lag_stored_d %>

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

@@ -14,7 +14,7 @@
 
         <li class="nav-item">
           <a
-            class="nav-link <%= nav_class(include: 'lags') %>"
+            class="nav-link <%= nav_class(include: '/lags') %>"
             href="<%= root_path('health', 'lags') %>"
           >
             Lags
@@ -38,6 +38,16 @@
             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>

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

@@ -1,9 +1,9 @@
-<%== view_title('Consumers groups changes details') %>
+<%== view_title('Consumers Groups Changes Details') %>
+
+<%== partial 'health/tabs' %>
 
 <% if @stats.empty? %>
   <%== partial 'health/no_data' %>
-<% else %>
-  <%== partial 'health/tabs' %>
 <% end %>
 
 <% @stats.each_with_index do |(cg_name, details), index| %>
@@ -11,7 +11,7 @@
     <%== partial 'health/consumer_group_header', locals: { cg_name: cg_name, details: details } %>
 
     <div class="row mb-3">
-      <div class="col-sm-12">
+      <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' %>">
@@ -22,12 +22,17 @@
                 </th>
               </tr>
               <tr class="align-middle">
-                <th><%== sort_link('Partition', :id) %></th>
-                <th><%== sort_link('Committed offset change', :committed_offset_fd) %></th>
-                <th><%== sort_link('Stored offset change', :stored_offset_fd) %></th>
-                <th><%== sort_link('High offset change', :hi_offset_fd) %></th>
-                <th><%== sort_link('Last stable offset state', :lso_risk_state) %></th>
-                <th><%== sort_link('Pause state change', :poll_state_ch) %></th>
+                <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>

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

@@ -0,0 +1,54 @@
+<%== view_title('Consumers Groups Cluster Lags Details') %>
+
+<%== partial 'health/tabs' %>
+
+<% if @stats.empty? %>
+  <%== partial 'health/no_data' %>
+<% 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="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>
+              </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>
+    </div>
+  </div>
+<% end %>

data/lib/karafka/web/{ui/pro → pro/ui}/views/health/lags.erb

@@ -1,9 +1,9 @@
-<%== view_title('Consumers groups lags details') %>
+<%== view_title('Consumers Groups Lags Details') %>
+
+<%== partial 'health/tabs' %>
 
 <% if @stats.empty? %>
   <%== partial 'health/no_data' %>
-<% else %>
-  <%== partial 'health/tabs' %>
 <% end %>
 
 <% @stats.each_with_index do |(cg_name, details), index| %>
@@ -11,7 +11,7 @@
     <%== partial 'health/consumer_group_header', locals: { cg_name: cg_name, details: details } %>
 
     <div class="row mb-3">
-      <div class="col-sm-12">
+      <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' %>">
@@ -22,12 +22,18 @@
                 </th>
               </tr>
               <tr class="align-middle">
-                <th><%== sort_link('Partition', :id) %></th>
-                <th><%== sort_link('Lag', :lag) %></th>
-                <th><%== sort_link('Lag trend', :lag_d) %></th>
-                <th><%== sort_link('Lag stored', :lag_stored) %></th>
-                <th><%== sort_link('Lag stored trend', :lag_stored_d) %></th>
-                <th><%== sort_link(:poll_state) %></th>
+                <th rowspan="2"><%== sort_link('Partition', :id) %></th>
+                <th colspan="2" class="text-center">Lags</th>
+                <th colspan="2" class="text-center">Trends</th>
+                <th colspan="12" rowspan="2">
+                  <%== sort_link(:poll_state) %>
+                </th>
+              </tr>
+              <tr class="align-middle">
+                <th><%== sort_link(:lag) %></th>
+                <th><%== sort_link(:lag_stored) %></th>
+                <th><%== sort_link('Lag', :lag_d) %></th>
+                <th><%== sort_link('Lag stored', :lag_stored_d) %></th>
               </tr>
             </thead>
             <tbody>

data/lib/karafka/web/{ui/pro → pro/ui}/views/health/offsets.erb

@@ -1,9 +1,9 @@
-<%== view_title('Consumers groups offsets details') %>
+<%== view_title('Consumers Groups Offsets Details') %>
+
+<%== partial 'health/tabs' %>
 
 <% if @stats.empty? %>
   <%== partial 'health/no_data' %>
-<% else %>
-  <%== partial 'health/tabs' %>
 <% end %>
 
 <% @stats.each_with_index do |(cg_name, details), index| %>
@@ -11,7 +11,7 @@
     <%== partial 'health/consumer_group_header', locals: { cg_name: cg_name, details: details } %>
 
     <div class="row mb-3">
-      <div class="col-sm-12">
+      <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' %>">
@@ -22,18 +22,21 @@
                 </th>
               </tr>
               <tr class="align-middle">
-                <th><%== sort_link('Partition', :id) %></th>
-                <th><%== sort_link('Lag', :lag_hybrid) %></th>
+                <th rowspan="2"><%== sort_link('Partition', :id) %></th>
+                <th rowspan="2"><%== sort_link(:lag_hybrid) %></th>
+                <th colspan="10" class="text-center">Offsets</th>
+              </tr>
+              <tr class="align-middle">
                 <th><%== sort_link(:committed_offset) %></th>
-                <th><%== sort_link('Committed offset change', :committed_offset_fd) %></th>
+                <th><%== sort_link('Committed change', :committed_offset_fd) %></th>
                 <th><%== sort_link(:stored_offset) %></th>
-                <th><%== sort_link('Stored offset change', :stored_offset_fd) %></th>
-                <th><%== sort_link('Low offset', :lo_offset) %></th>
-                <th><%== sort_link('High offset', :hi_offset) %></th>
-                <th><%== sort_link('High offset change', :hi_offset_fd) %></th>
-                <th><%== sort_link('Last stable offset', :ls_offset) %></th>
-                <th><%== sort_link('Last stable offset change', :ls_offset_fd) %></th>
-                <th><%== sort_link('Last stable offset state', :lso_risk_state) %></th>
+                <th><%== sort_link('Stored change', :stored_offset_fd) %></th>
+                <th><%== sort_link(:lo_offset) %></th>
+                <th><%== sort_link(:hi_offset) %></th>
+                <th><%== sort_link('High change', :hi_offset_fd) %></th>
+                <th><%== sort_link(:ls_offset) %></th>
+                <th><%== sort_link('LSO change', :ls_offset_fd) %></th>
+                <th><%== sort_link('LSO state', :lso_risk_state) %></th>
               </tr>
             </thead>
             <tbody>

data/lib/karafka/web/{ui/pro → pro/ui}/views/health/overview.erb

@@ -1,9 +1,9 @@
-<%== view_title('Consumers groups overview') %>
+<%== view_title('Consumers Groups Overview') %>
+
+<%== partial 'health/tabs' %>
 
 <% if @stats.empty? %>
   <%== partial 'health/no_data' %>
-<% else %>
-  <%== partial 'health/tabs' %>
 <% end %>
 
 <% @stats.each_with_index do |(cg_name, details), index| %>
@@ -11,7 +11,7 @@
     <%== partial 'health/consumer_group_header', locals: { cg_name: cg_name, details: details } %>
 
     <div class="row mb-3">
-      <div class="col-sm-12">
+      <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' %>">
@@ -22,13 +22,27 @@
                 </th>
               </tr>
               <tr class="align-middle">
-                <th><%== sort_link('Partition', :id) %></th>
-                <th><%== sort_link('Lag', :lag_hybrid) %></th>
-                <th><%== sort_link(:stored_offset) %></th>
+                <th colspan="1" rowspan="2">
+                  <%== sort_link('Partition', :id) %>
+                </th>
+                <th colspan="1" rowspan="2">
+                  <%== sort_link(:lag_hybrid) %>
+                </th>
+                <th colspan="1" rowspan="2">
+                  <%== sort_link(:stored_offset) %>
+                </th>
+                <th colspan="3" rowspan="1" class="text-center">
+                  States
+                </th>
+
+                <th colspan="1" rowspan="2">
+                 <%== sort_link(:id) %>
+                </th>
+              </tr>
+              <tr class="align-middle">
                 <th><%== sort_link(:fetch_state) %></th>
                 <th><%== sort_link(:poll_state) %></th>
-                <th><%== sort_link('LSO state', :lso_risk_state) %></th>
-                <th><%== sort_link('Process name', :name) %></th>
+                <th><%== sort_link(:lso_risk_state) %></th>
               </tr>
             </thead>
             <tbody>

data/lib/karafka/web/{ui/pro → pro/ui}/views/jobs/_job.erb

@@ -1,7 +1,7 @@
 <tr>
   <td>
     <a href="<%= root_path('consumers', job.process.id, 'subscriptions') %>">
-      <%= job.process.name %>
+      <%== truncate(job.process.name, strategy: :middle) %>
     </a>
   </td>
   <td>

data/lib/karafka/web/pro/ui/views/jobs/_no_jobs.erb

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

data/lib/karafka/web/{ui/pro → pro/ui}/views/jobs/pending.erb

@@ -1,4 +1,4 @@
-<%== view_title('Pending jobs overview', hr: false) %>
+<%== view_title('Pending Jobs Overview', hr: false) %>
 
 <%== partial 'jobs/tabs' %>
 
@@ -9,19 +9,23 @@
 <% 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('Process', :name) %></th>
-              <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('Process', :name) %></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('Created', :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('Created at', :updated_at, rev: true) %></th>
             </tr>
           </thead>
           <tbody>

data/lib/karafka/web/{ui/pro → pro/ui}/views/jobs/running.erb

@@ -1,4 +1,4 @@
-<%== view_title('Running jobs overview', hr: false) %>
+<%== view_title('Running Jobs Overview', hr: false) %>
 
 <%== partial 'jobs/tabs' %>
 
@@ -9,19 +9,23 @@
 <% 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('Process', :name) %></th>
-              <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('Process', :name) %></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/{ui/pro → pro/ui}/views/routing/_consumer_group.erb

@@ -8,14 +8,14 @@
 </div>
 
 <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>Subscription group</th>
           <th><%== sort_link('Topic', :name) %></th>
           <th>Type</th>
-          <th><%== sort_link('Active', :active?) %></th>
+          <th><%== sort_link(:active?) %></th>
           <th></th>
         </tr>
       </thead>

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

@@ -1,4 +1,4 @@
-<%== view_title('Routing details') %>
+<%== view_title('Routing Details') %>
 
 <div class="container mb-5">
   <%==

data/lib/karafka/web/{ui/pro → pro/ui}/views/routing/show.erb

@@ -5,7 +5,7 @@
 
 <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">
         <tbody>
           <% flat_hash(@topic.to_h).each do |k, v| %>

data/lib/karafka/web/{ui/pro → pro/ui}/views/shared/_navigation.erb

@@ -9,11 +9,13 @@
         Dashboard
       </a>
     </li>
+
     <li class="nav-item ms-3">
       <a class="nav-link <%= nav_class(start_with: '/consumers') %>" href="<%= root_path('consumers') %>">
         Consumers
       </a>
     </li>
+
     <li class="nav-item ms-3">
       <a class="nav-link <%= nav_class(start_with: '/jobs') %>" href="<%= root_path('jobs/running') %>">
         Jobs
@@ -25,31 +27,43 @@
         Health
       </a>
     </li>
+
     <li class="nav-item ms-3">
       <a class="nav-link <%= nav_class(start_with: '/routing') %>" href="<%= root_path('routing') %>">
         Routing
       </a>
     </li>
+
     <li class="nav-item ms-3">
       <a class="nav-link <%= nav_class(start_with: '/explorer') %>" href="<%= root_path('explorer') %>">
         Explorer
       </a>
     </li>
+
     <li class="nav-item ms-3">
       <a class="nav-link <%= nav_class(start_with: '/errors') %>" href="<%= root_path('errors') %>">
         Errors
       </a>
     </li>
+
     <li class="nav-item ms-3">
       <a class="nav-link <%= nav_class(start_with: '/dlq') %>" href="<%= root_path('dlq') %>">
         Dead
       </a>
     </li>
+
     <li class="nav-item ms-3">
       <a class="nav-link <%= nav_class(start_with: '/cluster') %>" href="<%= root_path('cluster') %>">
         Cluster
       </a>
     </li>
+
+    <li class="nav-item ms-3">
+      <a class="nav-link <%= nav_class(start_with: '/topics') %>" href="<%= root_path('topics') %>">
+        Topics
+      </a>
+    </li>
+
     <li class="nav-item ms-3">
       <a class="nav-link <%= nav_class(start_with: '/status') %>" href="<%= root_path('status') %>">
         Status

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

@@ -0,0 +1,37 @@
+<li class="breadcrumb-item">
+  <a href="<%= root_path('topics') %>">
+    Topics informations
+  </a>
+</li>
+
+<% if @topic %>
+  <li class="breadcrumb-item">
+    <a href="<%= root_path('topics', 'config', @topic.topic_name) %>">
+      <%= @topic.topic_name %>
+    </a>
+  </li>
+<% end %>
+
+<% if @configs %>
+  <li class="breadcrumb-item">
+    <a href="<%= root_path('topics', 'config', @topic.topic_name) %>">
+      Configuration
+    </a>
+  </li>
+<% end %>
+
+<% if @partitions %>
+  <li class="breadcrumb-item">
+    <a href="<%= root_path('topics', 'replication', @topic.topic_name) %>">
+      Replication
+    </a>
+  </li>
+<% end %>
+
+<% if @distribution %>
+  <li class="breadcrumb-item">
+    <a href="<%= root_path('topics', 'distribution', @topic.topic_name) %>">
+      Distribution
+    </a>
+  </li>
+<% end %>

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

@@ -0,0 +1,16 @@
+<tr>
+  <td>
+    <a href="<%= explorer_path(@topic[:topic_name], partition[:partition_id]) %>">
+      <%= partition[:partition_id] %>
+    </a>
+  </td>
+  <td>
+    <%= partition[:leader] %>
+  </td>
+  <td>
+    <%= partition[:replica_count] %>
+  </td>
+  <td>
+    <%= partition[:in_sync_replica_brokers] %>
+  </td>
+</tr>

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

@@ -0,0 +1,37 @@
+<div class="container">
+  <div class="row mb-5">
+    <div class="col-sm-12">
+
+      <ul class="nav nav-tabs">
+        <li class="nav-item">
+          <a
+            class="nav-link <%= nav_class(include: 'config') %>"
+            href="<%= root_path('topics', 'config', @topic.topic_name) %>"
+          >
+            Configuration
+          </a>
+        </li>
+
+        <li class="nav-item">
+          <a
+            class="nav-link <%= nav_class(include: 'replication') %>"
+            href="<%= root_path('topics', 'replication', @topic.topic_name) %>"
+          >
+            Replication
+          </a>
+        </li>
+
+        <li class="nav-item">
+          <a
+            class="nav-link <%= nav_class(include: 'distribution') %>"
+            href="<%= root_path('topics', 'distribution', @topic.topic_name) %>"
+          >
+            Distribution
+          </a>
+        </li>
+
+      </ul>
+
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,12 @@
+<div class="col">
+  <div class="card" >
+    <div class="card-body p-2">
+      <p class="card-text mb-0 p-2">
+        <a href="<%= root_path('topics', 'config', topic.topic_name) %>">
+          <%= topic.topic_name %> /
+          <%= topic.partition_count %>
+        </a>
+      </p>
+    </div>
+  </div>
+</div>