karafka-web 0.9.1 → 0.10.1

data/lib/karafka/web/pro/ui/views/commands/_metadata.erb

@@ -2,49 +2,40 @@
   process_id = command[:process][:id]
 %>
 
-<div class="container">
-  <div class="row mb-4">
-    <div class="col-sm-12">
-      <h4 class="mb-2">
-        Metadata
-      </h4>
-      <hr/>
-    </div>
-  </div>
+<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>
-          <tr>
-            <td>Type</td>
-            <td><%== command[:type] %></td>
-          </tr>
+<div class="data-table-wrapper">
+  <table class="data-table">
+    <tbody>
+      <tr>
+        <td>Type</td>
+        <td><%== command[:type] %></td>
+      </tr>
 
-          <tr>
-            <td>Name</td>
-            <td><%== command[:command][:name] %></td>
-          </tr>
+      <tr>
+        <td>Name</td>
+        <td><%== command[:command][:name] %></td>
+      </tr>
 
-          <tr>
-            <td>Dispatched</td>
-            <td><%== relative_time command[:dispatched_at] %></td>
-          </tr>
-          <tr>
-            <td>Process</td>
-            <td>
-              <% command = command %>
-              <% if process_id == '*' %>
-                  <%= process_id %>
-              <% else %>
-                <a href="<%= root_path('consumers', process_id, 'subscriptions') %>">
-                  <%= process_id %>
-                </a>
-              <% end %>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
+      <tr>
+        <td>Dispatched</td>
+        <td><%== relative_time command[:dispatched_at] %></td>
+      </tr>
+      <tr>
+        <td>Process</td>
+        <td>
+          <% command = command %>
+          <% if process_id == '*' %>
+              <%= process_id %>
+          <% else %>
+            <a href="<%= root_path('consumers', process_id, 'subscriptions') %>">
+              <%= process_id %>
+            </a>
+          <% end %>
+        </td>
+      </tr>
+    </tbody>
+  </table>
 </div>

data/lib/karafka/web/pro/ui/views/commands/_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="data-table-wrapper">
+  <table class="data-table">
     <thead>
-      <tr class="align-middle">
+      <tr>
         <th>Type</th>
         <th>Name</th>
         <th>ID</th>
@@ -20,4 +20,10 @@
       %>
     </tbody>
   </table>
+
+  <p class="table_metadata">
+    Watermark offsets:
+    <%== badge_secondary "high: #{@watermark_offsets.high}" %>
+    <%== badge_secondary "low: #{@watermark_offsets.low}" %>
+  </p>
 </div>

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

@@ -1,17 +1,23 @@
-<%== view_title('Consumers Commands and Responses') %>
+<% view_title 'Consumers Commands and Responses' %>
 
 <%== partial 'consumers/tabs' %>
 
-<div class="container">
-  <div class="row mb-5">
-    <div class="col-sm-12">
-      <%== partial('commands/details') %>
+<div class="col-span-12">
+  <% if @command_messages && !@command_messages.empty? %>
+    <section class="actions">
+      <a
+        href="<%= root_path('commands', 'recent') %>"
+        class="btn-action"
+        title="Display the most recent command"
+      >
+        <%== icon(:play_circle) %>
+      </a>
+    </section>
+  <% end %>
 
-      <% if @command_messages.empty? && params.current_page == 1 %>
-        <%== partial 'commands/empty' %>
-      <% else %>
-        <%== partial 'commands/table' %>
-      <% end %>
-    </div>
-  </div>
+  <% if @command_messages.empty? && params.current_page == 1 %>
+    <%== partial 'commands/empty' %>
+  <% else %>
+    <%== partial 'commands/table' %>
+  <% end %>
 </div>

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

@@ -1,38 +1,33 @@
 <% command = @command_message.payload %>
 
-<% if command[:schema_version] == @schema_version %>
-  <%== view_title("#{command[:command][:name]} #{command[:type]} #{@command_message.key}") %>
+<div class="col-span-12">
+  <% if command[:schema_version] == @schema_version %>
+    <% view_title "#{command[:command][:name]} #{command[:type]} #{@command_message.key}" %>
 
-  <%== partial 'consumers/tabs' %>
+    <%== partial 'consumers/tabs' %>
 
-  <%== partial 'commands/metadata', locals: { command: command } %>
+    <%== partial 'commands/metadata', locals: { command: command } %>
 
-  <div class="container">
-    <div class="row mb-4">
-      <div class="col-sm-12">
-        <h4 class="mb-2">
-          <% if command[:type] == 'command' %>
-            Details
-          <% else %>
-            Backtraces
-          <% end %>
-        </h4>
-        <hr/>
-      </div>
-    </div>
-  </div>
+    <h2 class="h2">
+      <% if command[:type] == 'command' %>
+        Details
+      <% else %>
+        Backtraces
+      <% end %>
+    </h2>
 
-  <% if command[:type] == 'command' %>
-    <%== partial 'commands/command_details', locals: { command: command } %>
-  <% else %>
-    <% command[:result].each_value do |backtrace| %>
-      <%== partial 'commands/backtrace', locals: { backtrace: backtrace } %>
+    <% if command[:type] == 'command' %>
+      <%== partial 'commands/command_details', locals: { command: command } %>
+    <% else %>
+      <% command[:result].each_value do |backtrace| %>
+        <%== partial 'commands/backtrace', locals: { backtrace: backtrace } %>
+      <% end %>
     <% end %>
-  <% end %>
-<% else %>
-  <%== view_title('Incompatible Command Schema') %>
+  <% else %>
+    <% view_title 'Incompatible Command Schema' %>
 
-  <%== partial 'consumers/tabs' %>
+    <%== partial 'consumers/tabs' %>
 
-  <%== partial 'commands/incompatible_schema' %>
-<% end %>
+    <%== partial 'commands/incompatible_schema' %>
+  <% end %>
+</div>

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

@@ -1,11 +1,11 @@
-<li class="breadcrumb-item">
+<li>
   <a href="<%= root_path('consumers/overview') %>">
     Consumers
   </a>
 </li>
 
 <% if current_path.include?('/performance') %>
-  <li class="breadcrumb-item">
+  <li>
     <a href="<%= root_path('consumers', 'performance') %>">
       Performance
     </a>
@@ -13,7 +13,7 @@
 <% end %>
 
 <% if current_path.include?('/controls') %>
-  <li class="breadcrumb-item">
+  <li>
     <a href="<%= root_path('consumers', 'controls') %>">
       Controls
     </a>
@@ -21,32 +21,32 @@
 <% end %>
 
 <% if @process %>
-  <li class="breadcrumb-item">
+  <li>
     <a href="<%= root_path('consumers', @process.id, 'subscriptions') %>">
       <%== truncate(@process.id, strategy: :middle) %>
     </a>
   </li>
 
   <% if current_path.include?('/jobs') %>
-    <li class="breadcrumb-item">
+    <li>
       <a href="<%= root_path('consumers', @process.id, 'jobs') %>">
         Jobs
       </a>
     </li>
 
-    <li class="breadcrumb-item">
+    <li>
       <a href="<%= root_path('consumers', @process.id, 'jobs') %>">
         Running
       </a>
     </li>
   <% elsif current_path.include?('/subscriptions') %>
-    <li class="breadcrumb-item">
+    <li>
       <a href="<%= root_path('consumers', @process.id, 'subscriptions') %>">
         Subscriptions
       </a>
     </li>
   <% else %>
-    <li class="breadcrumb-item">
+    <li>
       <a href="<%= root_path('consumers', @process.id, 'details') %>">
         Details
       </a>

data/lib/karafka/web/pro/ui/views/consumers/_consumer.erb

@@ -1,18 +1,16 @@
 <tr class="status-row-<%= process.status %>">
   <td>
-    <div class="badge badge-topic <%= status_bg(process.status) %> float-end">
-      <%= process.status %>
-    </div>
-
-    <a href="<%= root_path('consumers', process.id, 'subscriptions') %>">
-      <%== truncate(process.id, strategy: :middle) %>
-    </a>
+    <p>
+      <a href="<%= root_path('consumers', process.id, 'subscriptions') %>">
+        <%== truncate(process.id, strategy: :middle) %>
+      </a>
+    </p>
 
-    <p class="mt-0 mb-1">
+    <p class="mt-1">
       <%== partial 'consumers/assignments_badges', locals: { process: process } %>
     </p>
 
-    <p class="mt-0 mb-1">
+    <p>
       <%== tags(process.tags) %>
     </p>
   </td>
@@ -22,22 +20,16 @@
   </td>
 
   <td>
-    <span class="badge bg-primary badge-topic">
-      <%= format_memory process.memory_usage %>
-    </span>
-    <span class="badge bg-primary badge-topic">
-      <%= format_memory process.memory_total_usage %>
-    </span>
-    <span class="badge bg-primary badge-topic">
-      <%= format_memory process.memory_size %>
-    </span>
+    <%== badge_primary_sm format_memory process.memory_usage %>
+    <%== badge_primary_sm format_memory process.memory_total_usage %>
+    <%== badge_primary_sm format_memory process.memory_size %>
   </td>
 
   <td>
-    <span class="badge bg-primary badge-topic">
+    <span class="badge badge-primary">
       <%= process.utilization.round(1) %>%
     </span>
-    <span class="badge bg-primary badge-topic">
+    <span class="badge badge-primary">
       <%= process.workers %> /
       <%= process.busy %>
     </span>
@@ -45,9 +37,7 @@
 
   <td>
     <% process.cpu_usage.each do |metric| %>
-      <span class="badge bg-primary badge-topic">
-        <%= metric %>
-      </span>
+      <%== badge_primary_sm metric %>
     <% end %>
   </td>
 

data/lib/karafka/web/pro/ui/views/consumers/_consumer_controls.erb

@@ -4,21 +4,19 @@
       <%== truncate(process.id, strategy: :middle) %>
     </a>
 
-    <p class="mt-0 mb-1">
+    <p class="mt-1">
       <%== tags(process.tags) %>
     </p>
   </td>
 
   <td>
-    <div class="badge badge-topic <%= status_bg(process.status) %>">
+    <div class="badge <%= status_badge(process.status) %>">
       <%= process.status %>
     </div>
   </td>
 
   <td>
-    <p class="mt-0 mb-1">
-      <%== partial 'consumers/assignments_badges', locals: { process: process } %>
-    </p>
+    <%== partial 'consumers/assignments_badges', locals: { process: process } %>
   </td>
 
   <td>
@@ -26,16 +24,16 @@
   </td>
 
   <td>
-    <span class="badge bg-primary badge-topic">
+    <span class="badge badge-primary">
       <%= format_memory process.memory_usage %>
     </span>
   </td>
 
   <td>
-    <span class="badge bg-primary badge-topic">
+    <span class="badge badge-primary">
       <%= process.utilization.round(1) %>%
     </span>
-    <span class="badge bg-primary badge-topic">
+    <span class="badge badge-primary">
       <%= process.workers %> /
       <%= process.busy %>
     </span>
@@ -45,34 +43,53 @@
     <%= process.lag_hybrid %>
   </td>
 
-  <td>
-    <div class="d-flex flex-nowrap justify-content-end">
-      <%
-        probe_path = root_path('commanding', process.id, 'probe')
-        disabled_class = process.status != 'stopped' ? '' : 'disabled'
-      %>
-      <form action="<%= probe_path %>" method="post" class="d-inline-flex align-items-center mx-1">
-        <%== csrf_tag(probe_path) %>
-        <input type="submit" value="&#x2699; Probe" class="btn btn-secondary btn-sm <%= disabled_class %>"/>
-      </form>
+  <td class="commands-inline-3">
+    <%
+      probe_path = root_path('commanding', process.id, 'probe')
+      disabled_class = process.status != 'stopped' ? '' : 'btn-disabled'
+    %>
+    <form action="<%= probe_path %>" method="post" class="inline" title="Probe">
+      <%== csrf_tag(probe_path) %>
 
-      <%
-        quiet_path = root_path('commanding', process.id, 'quiet')
-        disabled_class = process.status == 'running' ? '' : 'disabled'
-      %>
-      <form action="<%= quiet_path %>" method="post" class="d-inline-flex align-items-center mx-1">
-        <%== csrf_tag(quiet_path) %>
-        <input type="submit" value="&#x23F8; Quiet" class="btn btn-warning btn-sm <%= disabled_class %>"/>
-      </form>
+      <button type="submit" class="btn btn-info btn-sm <%= disabled_class %>">
+        <%== icon(:gear) %>
+      </button>
+    </form>
 
-      <%
-        stop_path = root_path('commanding', process.id, 'stop')
-        disabled_class = process.status != 'stopping' && process.status != 'stopped' ? '' : 'disabled'
-      %>
-      <form action="<%= stop_path %>" method="post" class="d-inline-flex align-items-center mx-1">
-        <%== csrf_tag(stop_path) %>
-        <input type="submit" value="&#x25A0; Stop" class="btn btn-danger btn-sm <%= disabled_class %>"/>
-      </form>
-    </div>
+    <%
+      quiet_path = root_path('commanding', process.id, 'quiet')
+      disabled_class = process.status == 'running' ? '' : 'btn-disabled'
+
+      if process.execution_mode == 'standalone'
+        title = 'Quiet'
+      else
+        disabled_class = 'btn-disabled'
+        title = 'Supported only in standalone consumer processes'
+      end
+    %>
+    <form action="<%= quiet_path %>" method="post" class="inline" title="<%= title %>">
+      <%== csrf_tag(quiet_path) %>
+      <button type="submit" class="btn btn-warning btn-sm <%= disabled_class %>">
+        <%== icon(:pause) %>
+      </button>
+    </form>
+
+    <%
+      stop_path = root_path('commanding', process.id, 'stop')
+      disabled_class = process.status != 'stopping' && process.status != 'stopped' ? '' : 'btn-disabled'
+
+      if process.execution_mode == 'standalone'
+        title = 'Stop'
+      else
+        disabled_class = 'btn-disabled'
+        title = 'Supported only in standalone consumer processes'
+      end
+    %>
+    <form action="<%= stop_path %>" method="post" class="inline" title="<%= title %>">
+      <%== csrf_tag(stop_path) %>
+      <button type="submit" class="btn btn-error btn-sm <%= disabled_class %>">
+        <%== icon(:stop) %>
+      </button>
+    </form>
   </td>
 </tr>

data/lib/karafka/web/pro/ui/views/consumers/_consumer_performance.erb

@@ -4,7 +4,7 @@
       <%== truncate(process.id, strategy: :middle) %>
     </a>
 
-    <p class="mt-0 mb-1">
+    <p class="mt-1">
       <%== tags(process.tags) %>
     </p>
   </td>

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

@@ -1,35 +1,33 @@
-<div class="container">
-  <div class="row mb-4">
-    <div class="col-sm-12 mb-4">
+<div class="tab-container-wrapper">
+  <div class="tab-container">
+    <a
+      href="<%= root_path('consumers', '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('consumers', 'overview') %>">
-            Overview
-          </a>
-        </li>
+    <a
+      href="<%= root_path('consumers', 'performance') %>"
+      class="custom-tab <%= nav_class(include: 'performance') %>"
+    >
+      Performance
+    </a>
 
-        <li class="nav-item">
-          <a class="nav-link <%= nav_class(include: 'performance') %>" href="<%= root_path('consumers', 'performance') %>">
-            Performance
-          </a>
-        </li>
+    <% if Karafka::Web.config.commanding.active %>
+      <a
+        href="<%= root_path('consumers', 'controls') %>"
+        class="custom-tab <%= nav_class(include: 'controls') %>"
+      >
+        Controls
+      </a>
 
-        <% if Karafka::Web.config.commanding.active %>
-          <li class="nav-item">
-            <a class="nav-link <%= nav_class(include: 'controls') %>" href="<%= root_path('consumers', 'controls') %>">
-              Controls
-            </a>
-          </li>
-
-          <li class="nav-item">
-            <a class="nav-link <%= nav_class(include: 'commands') %>" href="<%= root_path('commands') %>">
-              Commands
-            </a>
-          </li>
-        <% end %>
-      </ul>
-
-    </div>
+      <a
+        href="<%= root_path('commands') %>"
+        class="custom-tab <%= nav_class(include: 'commands') %>"
+      >
+        Commands
+      </a>
+    <% end %>
   </div>
 </div>

data/lib/karafka/web/pro/ui/views/consumers/consumer/_commands.erb

@@ -1,32 +1,72 @@
-<% if Karafka::Web.config.commanding.active %>
-  <div class="col-md-12 col-lg-4 text-end">
-    <div class="d-flex flex-nowrap float-end">
-      <%
-        probe_path = root_path('commanding', process.id, 'probe')
-        disabled_class = process.status != 'stopped' ? '' : 'disabled'
-      %>
-      <form action="<%= probe_path %>" method="post" class="d-inline-flex align-items-center mx-1">
-        <%== csrf_tag(probe_path) %>
-        <input type="submit" value="&#x2699; Probe" class="btn btn-secondary btn-sm <%= disabled_class %>"/>
-      </form>
+<% if Karafka::Web.config.commanding.active && !process.tags.include?('embedded') %>
+  <div class="col-span-12 flex justify-end space-x-2 mb-6">
+    <%
+      probe_path = root_path('commanding', process.id, 'probe')
+      disabled_class = process.status != 'stopped' ? '' : 'btn-disabled'
+    %>
+    <form
+      action="<%= probe_path %>"
+      method="post"
+      class="inline-flex items-center"
+    >
+      <%== csrf_tag(probe_path) %>
+      <button
+        type="submit"
+        class="btn btn-info btn-sm <%= disabled_class %>"
+      >
+        <%== icon(:gear) %>
+        Probe
+      </button>
+    </form>
 
-      <%
-        quiet_path = root_path('commanding', process.id, 'quiet')
-        disabled_class = process.status == 'running' ? '' : 'disabled'
-      %>
-      <form action="<%= quiet_path %>" method="post" class="d-inline-flex align-items-center mx-1">
-        <%== csrf_tag(quiet_path) %>
-        <input type="submit" value="&#x23F8; Quiet" class="btn btn-warning btn-sm <%= disabled_class %>"/>
-      </form>
+    <%
+      quiet_path = root_path('commanding', process.id, 'quiet')
+      disabled_class = process.status == 'running' ? '' : 'btn-disabled'
 
-      <%
-        stop_path = root_path('commanding', process.id, 'stop')
-        disabled_class = process.status != 'stopping' && process.status != 'stopped' ? '' : 'disabled'
-      %>
-      <form action="<%= stop_path %>" method="post" class="d-inline-flex align-items-center mx-1">
-        <%== csrf_tag(stop_path) %>
-        <input type="submit" value="&#x25A0; Stop" class="btn btn-danger btn-sm <%= disabled_class %>"/>
-      </form>
-    </div>
+      unless process.execution_mode == 'standalone'
+        disabled_class = 'btn-disabled'
+        title = 'Supported only in standalone consumer processes'
+      end
+    %>
+    <form
+      action="<%= quiet_path %>"
+      method="post"
+      class="inline-flex items-center"
+      title="<%= title %>"
+    >
+      <%== csrf_tag(quiet_path) %>
+      <button
+        type="submit"
+        class="btn btn-warning btn-sm <%= disabled_class %>"
+      >
+        <%== icon(:pause) %>
+        Quiet
+      </button>
+    </form>
+
+    <%
+      stop_path = root_path('commanding', process.id, 'stop')
+      disabled_class = process.status != 'stopping' && process.status != 'stopped' ? '' : 'btn-disabled'
+
+      unless process.execution_mode == 'standalone'
+        disabled_class = 'btn-disabled'
+        title = 'Supported only in standalone consumer processes'
+      end
+    %>
+    <form
+      action="<%= stop_path %>"
+      method="post"
+      class="inline-flex items-center"
+      title="<%= title %>"
+    >
+      <%== csrf_tag(stop_path) %>
+      <button
+        type="submit"
+        class="btn btn-error btn-sm <%= disabled_class %>"
+      >
+        <%== icon(:stop) %>
+        Stop
+      </button>
+    </form>
   </div>
 <% end %>

data/lib/karafka/web/pro/ui/views/consumers/consumer/_job.erb

@@ -1,6 +1,6 @@
 <tr>
   <td>
-    <span class="badge bg-secondary badge-topic" title="Consumer group: <%= job.consumer_group %>">
+    <span class="badge badge-secondary" title="Consumer group: <%= job.consumer_group %>">
       <%= job.topic %>:
       <%= job.partition %>
     </span>