karafka-web 0.7.10 → 0.8.0.rc1

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

@@ -0,0 +1,21 @@
+<% if @visibility_filter.payload?(@message) %>
+  <div class="row">
+    <div class="col-sm-12 mb-4">
+      <% if @payload_error %>
+        <%== partial 'explorer/failed_deserialization' %>
+      <% end %>
+
+      <div class="card">
+        <div class="card-body">
+          <% if @payload_error %>
+            <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>
+          <% end %>
+        </div>
+      </div>
+    </div>
+  </div>
+<% else %>
+  <%== partial 'explorer/filtered' %>
+<% end %>

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

@@ -0,0 +1,19 @@
+<div class="float-end text-end">
+  <% if @visibility_filter.download?(@message) %>
+    <a
+      href="<%= root_path('messages', @message.topic, @message.partition, @message.offset, 'download') %>"
+      class="btn btn-secondary btn-sm"
+    >
+      &#8659; Download raw
+    </a>
+  <% end %>
+
+  <% if @visibility_filter.export?(@message) && !@payload_error %>
+    <a
+      href="<%= root_path('messages', @message.topic, @message.partition, @message.offset, 'export') %>"
+      class="btn btn-secondary btn-sm"
+    >
+      &#8659; Export as JSON
+    </a>
+  <% end %>
+</div>

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

@@ -1,22 +1,5 @@
-<%
-  republish_path = root_path('messages', @message.topic, @message.partition, @message.offset, 'republish')
-  surrounding_path = explorer_path(@message.topic, @message.partition, @message.offset, 'surrounding')
-%>
-
 <div class="container">
-  <div class="row mb-0">
-    <div class="col-sm-12 text-end">
-      <a href="<%= surrounding_path %>" class="btn btn-secondary btn-sm float-end ms-1">
-        &#8651;
-        Surrounding
-      </a>
-
-      <form action="<%= republish_path %>" method="post" class="confirm-action float-end">
-        <%== csrf_tag(republish_path) %>
-        <input type="submit" value="&#10227; Republish" class="btn btn-primary btn-sm"/>
-      </form>
-    </div>
-  </div>
+  <%== partial 'explorer/message/message_actions' %>
 
   <div class="row mb-4">
     <div class="col-sm-12">
@@ -28,81 +11,23 @@
     </div>
   </div>
 
-  <div class="row mb-5">
-    <div class="col-sm-12">
-      <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/detail',
-                locals: {
-                  k: k,
-                  v: v
-                }
-              )
-            %>
-          <% end %>
-
-          <%==
-            partial(
-              'explorer/messages/detail',
-              locals: {
-                k: 'bytesize',
-                v: format_memory(((@message.raw_payload&.bytesize || 0) / 1024.to_f).round(4))
-              }
-            )
-          %>
-
-          <%==
-            partial(
-              'explorer/messages/key',
-              locals: { message: @message }
-            )
-          %>
-
-          <%==
-            partial(
-              'explorer/messages/headers',
-              locals: { message: @message }
-            )
-          %>
-        </tbody>
-      </table>
-    </div>
-  </div>
+  <%== partial 'explorer/message/metadata' %>
 </div>
 
 <div class="container">
   <div class="row mb-4">
     <div class="col-sm-12">
-      <h5 class="mb-2">
+      <h5 class="mb-2 float-start">
         Payload
       </h5>
-      <hr/>
 
-    </div>
-  </div>
+      <%== partial 'explorer/message/payload_actions' %>
 
-  <% if @visibility_filter.payload?(@message) %>
-    <div class="row">
-      <div class="col-sm-12 mb-4">
-        <% if @payload_error %>
-          <%== partial 'explorer/failed_deserialization' %>
-        <% end %>
+      <div class="clearfix"></div>
 
-        <div class="card">
-          <div class="card-body">
-            <% if @payload_error %>
-              <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>
-            <% end %>
-          </div>
-        </div>
-      </div>
+      <hr/>
     </div>
-  <% else %>
-    <%== partial 'explorer/filtered' %>
-  <% end %>
+  </div>
+
+  <%== partial 'explorer/message/payload' %>
 </div>

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

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

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

@@ -22,9 +22,7 @@
     </span>
   </td>
   <td>
-    <span class="badge <%= kafka_state_bg(details.poll_state) %> mt-1 mb-1">
-      <%= details.poll_state %>
-    </span>
+    <%== 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">

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

@@ -9,13 +9,13 @@
     <%== offset_with_label topic_name, partition_id, details.committed_offset %>
   </td>
   <td>
-    <%== relative_time(Time.now - details.committed_offset_fd / 1_000) %>
+    <%== relative_time(Time.now - details.committed_offset_fd / 1_000.0) %>
   </td>
   <td>
     <%== offset_with_label topic_name, partition_id, details.stored_offset %>
   </td>
   <td>
-    <%== relative_time(Time.now - details.stored_offset_fd / 1_000) %>
+    <%== relative_time(Time.now - details.stored_offset_fd / 1_000.0) %>
   </td>
   <td>
     <%== offset_with_label topic_name, partition_id, details.lo_offset %>
@@ -24,13 +24,13 @@
     <%== offset_with_label topic_name, partition_id, details.hi_offset %>
   </td>
   <td>
-    <%== relative_time(Time.now - details.hi_offset_fd / 1_000) %>
+    <%== relative_time(Time.now - details.hi_offset_fd / 1_000.0) %>
   </td>
   <td>
     <%== offset_with_label topic_name, partition_id, details.ls_offset %>
   </td>
   <td>
-    <%== relative_time(Time.now - details.ls_offset_fd / 1_000) %>
+    <%== 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">

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

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

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

@@ -20,6 +20,15 @@
             Offsets
           </a>
         </li>
+
+        <li class="nav-item">
+          <a
+            class="nav-link <%= nav_class(include: 'changes') %>"
+            href="<%= root_path('health', 'changes') %>"
+          >
+            Changes
+          </a>
+        </li>
       </ul>
 
     </div>

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

@@ -0,0 +1,66 @@
+<%== view_title('Consumers groups changes details') %>
+
+<% if @stats.empty? %>
+  <%== partial 'health/no_data' %>
+<% else %>
+  <%== partial 'health/tabs' %>
+<% end %>
+
+
+<% @stats.each_with_index do |(cg_name, details), index| %>
+  <div class="container mb-5">
+    <div class="row mb-4">
+      <div class="col-sm-8">
+        <h4 class="mb-4"><%= cg_name %></h4>
+      </div>
+
+      <div class="col-sm-4">
+        <span class="float-end">
+          Last rebalance:
+          <span class="badge bg-secondary">
+            <%== relative_time(details[:rebalanced_at]) %>
+          </span>
+        </span>
+      </div>
+    </div>
+
+    <div class="row mb-3">
+      <div class="col-sm-12">
+        <% 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><%== 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>
+              </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 %>
+      </div>
+    </div>
+  </div>
+<% end %>

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

@@ -25,7 +25,7 @@
 
     <div class="row mb-3">
       <div class="col-sm-12">
-        <% topics = details[:topics].sort_by(&:first) %>
+        <% 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>
@@ -35,22 +35,22 @@
                 </th>
               </tr>
               <tr class="align-middle">
-                <th>Partition</th>
-                <th>Lag stored</th>
-                <th>Committed offset</th>
-                <th>Committed offset change</th>
-                <th>Stored offset</th>
-                <th>Stored offset change</th>
-                <th>Low offset</th>
-                <th>High offset</th>
-                <th>High offset change</th>
-                <th>Last stable offset</th>
-                <th>Last stable offset change</th>
-                <th>Last stable offset state</th>
+                <th><%== sort_link('Partition', :id) %></th>
+                <th><%== sort_link(:lag_stored) %></th>
+                <th><%== sort_link(:committed_offset) %></th>
+                <th><%== sort_link('Committed offset 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>
               </tr>
             </thead>
             <tbody>
-                <% partitions.sort_by(&:first).each do |partition_id, details| %>
+                <% partitions.each do |partition_id, details| %>
                   <%==
                     partial(
                       'health/partition_offset',

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

@@ -25,7 +25,7 @@
 
     <div class="row mb-3">
       <div class="col-sm-12">
-        <% topics = details[:topics].sort_by(&:first) %>
+        <% 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>
@@ -35,19 +35,19 @@
                 </th>
               </tr>
               <tr class="align-middle">
-                <th>Partition</th>
-                <th>Lag stored</th>
-                <th>Lag stored trend</th>
-                <th>Committed offset</th>
-                <th>Stored offset</th>
-                <th>Fetch state</th>
-                <th>Poll state</th>
-                <th>LSO state</th>
-                <th>Process name</th>
+                <th><%== sort_link('Partition', :id) %></th>
+                <th><%== sort_link(:lag_stored) %></th>
+                <th><%== sort_link('Lag stored trend', :lag_stored_d) %></th>
+                <th><%== sort_link(:committed_offset) %></th>
+                <th><%== sort_link(:stored_offset) %></th>
+                <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>
               </tr>
             </thead>
             <tbody>
-                <% partitions.sort_by(&:first).each do |partition_id, details| %>
+                <% partitions.each do |partition_id, details| %>
                   <%==
                     partial(
                       'health/partition',

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

@@ -34,6 +34,6 @@
     <%== offset_with_label job.topic, job.partition, job.committed_offset %>
   </td>
   <td>
-    <%== relative_time job.started_at %>
+    <%== relative_time job.updated_at %>
   </td>
 </tr>

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

@@ -2,7 +2,7 @@
   <div class="row">
     <div class="col-lg-12">
       <div class="alert alert-info" role="alert">
-        There are no running jobs at the moment.
+        There are no <%= type %> jobs at the moment.
       </div>
     </div>
   </div>

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

@@ -0,0 +1,39 @@
+<%== view_title('Pending jobs overview', hr: false) %>
+
+<%== partial 'jobs/tabs' %>
+
+<% if @jobs.empty? && params.current_page <= 1 %>
+  <%== partial 'jobs/no_jobs', locals: { type: 'pending' } %>
+<% elsif @jobs.empty? %>
+  <%== partial 'shared/no_paginated_data' %>
+<% else %>
+  <div class="container">
+    <div class="row mb-5">
+      <div class="col-sm-12">
+        <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><%== 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>
+            <%==
+              each_partial(
+                @jobs,
+                'jobs/job'
+              )
+            %>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,39 @@
+<%== view_title('Running jobs overview', hr: false) %>
+
+<%== partial 'jobs/tabs' %>
+
+<% if @jobs.empty? && params.current_page <= 1 %>
+  <%== partial 'jobs/no_jobs', locals: { type: 'running' } %>
+<% elsif @jobs.empty? %>
+  <%== partial 'shared/no_paginated_data' %>
+<% else %>
+  <div class="container">
+    <div class="row mb-5">
+      <div class="col-sm-12">
+        <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><%== 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>
+            <%==
+              each_partial(
+                @jobs,
+                'jobs/job'
+              )
+            %>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+<% end %>

data/lib/karafka/web/ui/pro/views/routing/_consumer_group.erb

@@ -13,9 +13,9 @@
       <thead>
         <tr class="align-middle">
           <th>Subscription group</th>
-          <th>Topic</th>
+          <th><%== sort_link('Topic', :name) %></th>
           <th>Type</th>
-          <th>Active</th>
+          <th><%== sort_link('Active', :active?) %></th>
           <th></th>
         </tr>
       </thead>

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

@@ -9,6 +9,15 @@
     <span class="badge bg-secondary">
       <%= topic.patterns.type %>
     </span>
+
+    <% if subscription_group.multiplexing? %>
+      <span class="badge bg-secondary">
+        multiplexing
+        <%= subscription_group.multiplexing.min %>
+        -
+        <%= subscription_group.multiplexing.max %>
+      </span>
+    <% end %>
   </td>
   <td>
     <span class="badge bg-<%= topic.active? ? 'success' : 'warning text-dark' %>">

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

@@ -19,6 +19,18 @@
               )
             %>
           <% end %>
+
+          <% flat_hash(@topic.subscription_group.multiplexing.to_h).each do |k, v| %>
+            <%==
+              partial(
+                'routing/detail',
+                locals: {
+                  k: "multiplexing.#{k}",
+                  v: v
+                }
+              )
+            %>
+          <% end %>
         </tbody>
       </table>
     </div>

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

@@ -15,7 +15,7 @@
       </a>
     </li>
     <li class="nav-item ms-3">
-      <a class="nav-link <%= nav_class(start_with: '/jobs') %>" href="<%= root_path('jobs') %>">
+      <a class="nav-link <%= nav_class(start_with: '/jobs') %>" href="<%= root_path('jobs/running') %>">
         Jobs
       </a>
     </li>

data/lib/karafka/web/ui/public/javascripts/application.js

@@ -6,6 +6,16 @@ function updateTimeAgo() {
     timeago.render(selection);
     timeago.cancel()
   }
+
+  var selection = document.getElementsByClassName('time-title')
+  var title = null
+
+  for (var i = 0; i < selection.length; i++) {
+    let element = selection[i]
+
+    title = element.getAttribute('title')
+    element.setAttribute('title', timeago.format(title))
+  }
 }
 
 // To prevent from flickering, the UI is initially hidden and visible when all the JS components

data/lib/karafka/web/ui/public/stylesheets/application.css

@@ -123,3 +123,7 @@ main {
 .chartjs-wrapper {
   height: 250px;
 }
+
+a.sort {
+  color: inherit;
+}

data/lib/karafka/web/ui/views/cluster/_breadcrumbs.erb

@@ -3,3 +3,19 @@
     Cluster informations
   </a>
 </li>
+
+<% if current_path.include?('/brokers') %>
+  <li class="breadcrumb-item">
+    <a href="<%= root_path('cluster', 'brokers') %>">
+      Brokers
+    </a>
+  </li>
+<% end %>
+
+<% if current_path.include?('/topics') %>
+  <li class="breadcrumb-item">
+    <a href="<%= root_path('cluster', 'topics') %>">
+      Topics
+    </a>
+  </li>
+<% end %>

data/lib/karafka/web/ui/views/cluster/_tabs.erb

@@ -0,0 +1,27 @@
+<div class="container">
+  <div class="row mb-4">
+    <div class="col-sm-12">
+
+      <ul class="nav nav-tabs">
+        <li class="nav-item">
+          <a
+            class="nav-link <%= nav_class(include: 'brokers') %>"
+            href="<%= root_path('cluster', 'brokers') %>"
+          >
+            Brokers
+          </a>
+        </li>
+
+        <li class="nav-item">
+          <a
+            class="nav-link <%= nav_class(include: 'topics') %>"
+            href="<%= root_path('cluster', 'topics') %>"
+          >
+            Topics
+          </a>
+        </li>
+      </ul>
+
+    </div>
+  </div>
+</div>