karafka-web 0.9.1 → 0.10.0.beta1

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

@@ -1,67 +1,63 @@
-<%== view_title('Consumers Controls') %>
+<% view_title 'Consumers Controls' %>
 
 <%== partial 'consumers/tabs' %>
 
 <% unless @processes.empty? %>
-  <div class="container">
-    <div class="row mb-4">
-      <div class="col-sm-12">
-        <div class="d-flex flex-nowrap float-end">
-          <%
-            quiet_all_path = root_path('commanding', 'quiet_all')
-          %>
-          <form action="<%= quiet_all_path %>" method="post" class="d-inline-flex align-items-center mx-1">
-            <%== csrf_tag(quiet_all_path) %>
-            <input type="submit" value="&#x23F8; Quiet All" class="btn btn-warning btn-sm"/>
-          </form>
+  <div class="col-span-12 flex justify-end space-x-2 mb-6">
+    <%
+      quiet_all_path = root_path('commanding', 'quiet_all')
+    %>
+    <form action="<%= quiet_all_path %>" method="post" class="inline-flex items-center">
+      <%== csrf_tag(quiet_all_path) %>
+      <button type="submit" class="btn btn-warning btn-sm">
+        <%== icon(:pause) %>
+        Quiet All
+      </button>
+    </form>
 
-          <%
-            stop_all_path = root_path('commanding', 'stop_all')
-          %>
-          <form action="<%= stop_all_path %>" method="post" class="d-inline-flex align-items-center mx-1">
-            <%== csrf_tag(stop_all_path) %>
-            <input type="submit" value="&#x25A0; Stop All" class="btn btn-danger btn-sm"/>
-          </form>
-        </div>
-      </div>
-    </div>
+    <%
+      stop_all_path = root_path('commanding', 'stop_all')
+    %>
+    <form action="<%= stop_all_path %>" method="post" class="inline-flex items-center">
+      <%== csrf_tag(stop_all_path) %>
+      <button type="submit" class="btn btn-error btn-sm">
+        <%== icon(:stop) %>
+        Stop All
+      </button>
+    </form>
   </div>
 <% end %>
 
-<div class="container">
-  <div class="row">
-    <div class="col-sm-12">
-      <% if @processes.empty? && params.current_page <= 1 %>
-        <%== partial 'consumers/no_consumers' %>
-      <% elsif @processes.empty? %>
-        <%== partial 'shared/no_paginated_data' %>
-      <% else %>
-        <div class="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(:id) %></th>
-                <th><%== sort_link(:status) %></th>
-                <th>Subscriptions</th>
-                <th><%== sort_link(:started_at, rev: true) %></th>
-                <th><%== sort_link(:memory_usage) %></th>
-                <th>Performance</th>
-                <th><%== sort_link(:lag_hybrid) %></th>
-                <th></th>
-              </tr>
-            </thead>
-            <tbody>
-              <%==
-                render_each(
-                  @processes,
-                  'consumers/_consumer_controls',
-                  local: :process
-                )
-              %>
-            </tbody>
-          </table>
-        </div>
-      <% end %>
+<div class="col-span-12">
+  <% if @processes.empty? && params.current_page <= 1 %>
+    <%== partial 'consumers/no_consumers' %>
+  <% elsif @processes.empty? %>
+    <%== partial 'shared/no_paginated_data' %>
+  <% else %>
+    <div class="data-table-wrapper">
+      <table class="data-table">
+        <thead>
+          <tr>
+            <th><%== sort_link(:id) %></th>
+            <th><%== sort_link(:status) %></th>
+            <th>Subscriptions</th>
+            <th><%== sort_link(:started_at, rev: true) %></th>
+            <th><%== sort_link(:memory_usage) %></th>
+            <th>Performance</th>
+            <th><%== sort_link(:lag_hybrid) %></th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          <%==
+            render_each(
+              @processes,
+              'consumers/_consumer_controls',
+              local: :process
+            )
+          %>
+        </tbody>
+      </table>
     </div>
-  </div>
+  <% end %>
 </div>

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

@@ -1,9 +1,6 @@
-<div class="container mb-5">
-  <div class="row">
-    <%== partial 'consumers/consumer/title' %>
-    <%== partial 'consumers/consumer/commands', locals: { process: @process } %>
-  </div>
-</div>
+<% view_title @process.id %>
+
+<%== partial 'consumers/consumer/commands', locals: { process: @process } %>
 
 <% if @process.status == 'stopped' %>
   <%== partial 'consumers/consumer/stopped' %>
@@ -13,14 +10,4 @@
 
 <%== partial 'consumers/consumer/tabs' %>
 
-<div class="container">
-  <div class="row">
-    <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"><%= JSON.pretty_generate(@process.to_h) %></code></pre>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
+<pre class="code"><code class="json p-0 m-0"><%= JSON.pretty_generate(@process.to_h) %></code></pre>

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

@@ -1,39 +1,36 @@
-<%== partial 'consumers/counters' %>
+<% view_title 'Consumers' %>
+
 <%== partial 'consumers/summary' %>
 <%== partial 'consumers/tabs' %>
 
-<div class="container">
-  <div class="row">
-    <div class="col-sm-12">
-      <% if @processes.empty? && params.current_page <= 1 %>
-        <%== partial 'consumers/no_consumers' %>
-      <% elsif @processes.empty? %>
-        <%== partial 'shared/no_paginated_data' %>
-      <% else %>
-        <div class="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(:id) %></th>
-                <th class="col-sm-2"><%== sort_link(:started_at, rev: true) %></th>
-                <th class="col-sm-1">Memory</th>
-                <th class="col-sm-1">Performance</th>
-                <th class="col-sm-1">Load</th>
-                <th class="col-sm-1"><%== sort_link(:lag_hybrid) %></th>
-              </tr>
-            </thead>
-            <tbody>
-              <%==
-                render_each(
-                  @processes,
-                  'consumers/_consumer',
-                  local: :process
-                )
-              %>
-            </tbody>
-          </table>
-        </div>
-      <% end %>
+<div class="col-span-12">
+  <% if @processes.empty? && params.current_page <= 1 %>
+    <%== partial 'consumers/no_consumers' %>
+  <% elsif @processes.empty? %>
+    <%== partial 'shared/no_paginated_data' %>
+  <% else %>
+    <div class="data-table-wrapper">
+      <table class="data-table">
+        <thead>
+          <tr>
+            <th><%== sort_link(:id) %></th>
+            <th class="col-sm-2"><%== sort_link(:started_at, rev: true) %></th>
+            <th class="col-sm-1">Memory</th>
+            <th class="col-sm-1">Performance</th>
+            <th class="col-sm-1">Load</th>
+            <th class="col-sm-1"><%== sort_link(:lag_hybrid) %></th>
+          </tr>
+        </thead>
+        <tbody>
+          <%==
+            render_each(
+              @processes,
+              'consumers/_consumer',
+              local: :process
+            )
+          %>
+        </tbody>
+      </table>
     </div>
-  </div>
+  <% end %>
 </div>

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

@@ -1,51 +1,46 @@
-<div class="container mb-5">
-  <div class="row">
-    <%== partial 'consumers/consumer/title' %>
-    <%== partial 'consumers/consumer/commands', locals: { process: @process } %>
-  </div>
-</div>
+<% view_title @process.id %>
+
+<%== partial 'consumers/consumer/commands', locals: { process: @process } %>
 
-<% if @process.status == 'stopped' %>
-  <%== partial 'consumers/consumer/stopped' %>
-<% end %>
+<div class="col-span-12">
+  <% if @process.status == 'stopped' %>
+    <%== partial 'consumers/consumer/stopped' %>
+  <% end %>
 
-<%== partial 'consumers/consumer/metrics' %>
+  <%== partial 'consumers/consumer/metrics' %>
 
-<%== partial 'consumers/consumer/tabs' %>
+  <%== partial 'consumers/consumer/tabs' %>
 
-<% if @pending_jobs.empty? %>
-  <%== partial 'consumers/consumer/no_jobs', locals: { type: 'pending' } %>
-<% else %>
-  <div class="container">
-    <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">
-          <thead>
-            <tr class="align-middle">
-              <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>
-            </tr>
-          </thead>
-          <tbody>
-            <%==
-              render_each(
-                @pending_jobs,
-                'consumers/consumer/_job',
-                local: :job
-              )
-            %>
-          </tbody>
-        </table>
-      </div>
+  <% if @pending_jobs.empty? %>
+    <%== partial 'consumers/consumer/no_jobs', locals: { type: 'pending' } %>
+  <% else %>
+    <div class="data-table-wrapper">
+      <table class="data-table">
+        <thead>
+          <tr>
+            <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>
+            <th><%== sort_link(:first_offset) %></th>
+            <th><%== sort_link(:last_offset) %></th>
+            <th><%== sort_link(:committed_offset) %></th>
+          </tr>
+        </thead>
+        <tbody>
+          <%==
+            render_each(
+              @pending_jobs,
+              'consumers/consumer/_job',
+              local: :job
+            )
+          %>
+        </tbody>
+      </table>
     </div>
-  </div>
-<% end %>
+  <% end %>
+</div>

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

@@ -1,52 +1,48 @@
-<%== view_title('Consumers Performance Details') %>
+<% view_title 'Consumers Performance Details' %>
 
 <%== partial 'consumers/tabs' %>
 
-<div class="container">
-  <div class="row">
-    <div class="col-sm-12">
-      <% if @processes.empty? && params.current_page <= 1 %>
-        <%== partial 'consumers/no_consumers' %>
-      <% elsif @processes.empty? %>
-        <%== partial 'shared/no_paginated_data' %>
-      <% else %>
-        <div class="table-responsive">
-          <table class="processes bg-white table table-hover table-bordered table-striped mb-0 align-middle">
-            <thead>
-              <tr class="align-middle">
-                <th colspan="1" rowspan="2"><%== sort_link(:id) %></th>
-                <th colspan="1" rowspan="2"><%== sort_link(:memory_usage) %></th>
-                <th colspan="1" rowspan="2"><%== sort_link(:utilization) %></th>
-                <th colspan="1" rowspan="2"><%== sort_link(:threads) %></th>
-                <th colspan="3" rowspan="1" class="text-center">Load</th>
-                <th colspan="2" class="text-center">Workers</th>
-                <th colspan="2" class="text-center">Listeners</th>
-                <th colspan="2" class="text-center">Jobs</th>
-              </tr>
-              <tr class="align-middle">
-                <th>1m</th>
-                <th>5m</th>
-                <th>15m</th>
-                <th><%== sort_link('Total', :workers) %></th>
-                <th><%== sort_link(:busy) %></th>
-                <th><%== sort_link(:active) %></th>
-                <th><%== sort_link(:standby) %></th>
-                <th><%== sort_link('Running', :running_jobs_count) %></th>
-                <th><%== sort_link('Pending', :pending_jobs_count) %></th>
-              </tr>
-            </thead>
-            <tbody>
-              <%==
-                render_each(
-                  @processes,
-                  'consumers/_consumer_performance',
-                  local: :process
-                )
-              %>
-            </tbody>
-          </table>
-        </div>
-      <% end %>
+<div class="col-span-12">
+  <% if @processes.empty? && params.current_page <= 1 %>
+    <%== partial 'consumers/no_consumers' %>
+  <% elsif @processes.empty? %>
+    <%== partial 'shared/no_paginated_data' %>
+  <% else %>
+    <div class="data-table-wrapper">
+      <table class="data-table">
+        <thead>
+          <tr>
+            <th colspan="1" rowspan="2"><%== sort_link(:id) %></th>
+            <th colspan="1" rowspan="2"><%== sort_link(:memory_usage) %></th>
+            <th colspan="1" rowspan="2"><%== sort_link(:utilization) %></th>
+            <th colspan="1" rowspan="2"><%== sort_link(:threads) %></th>
+            <th colspan="3" rowspan="1" class="text-center">Load</th>
+            <th colspan="2" class="text-center">Workers</th>
+            <th colspan="2" class="text-center">Listeners</th>
+            <th colspan="2" class="text-center">Jobs</th>
+          </tr>
+          <tr>
+            <th>1m</th>
+            <th>5m</th>
+            <th>15m</th>
+            <th><%== sort_link('Total', :workers) %></th>
+            <th><%== sort_link(:busy) %></th>
+            <th><%== sort_link(:active) %></th>
+            <th><%== sort_link(:standby) %></th>
+            <th><%== sort_link('Running', :running_jobs_count) %></th>
+            <th><%== sort_link('Pending', :pending_jobs_count) %></th>
+          </tr>
+        </thead>
+        <tbody>
+          <%==
+            render_each(
+              @processes,
+              'consumers/_consumer_performance',
+              local: :process
+            )
+          %>
+        </tbody>
+      </table>
     </div>
-  </div>
+  <% end %>
 </div>

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

@@ -1,51 +1,46 @@
-<div class="container mb-5">
-  <div class="row">
-    <%== partial 'consumers/consumer/title' %>
-    <%== partial 'consumers/consumer/commands', locals: { process: @process } %>
-  </div>
-</div>
+<% view_title @process.id %>
+
+<%== partial 'consumers/consumer/commands', locals: { process: @process } %>
 
-<% if @process.status == 'stopped' %>
-  <%== partial 'consumers/consumer/stopped' %>
-<% end %>
+<div class="col-span-12">
+  <% if @process.status == 'stopped' %>
+    <%== partial 'consumers/consumer/stopped' %>
+  <% end %>
 
-<%== partial 'consumers/consumer/metrics' %>
+  <%== partial 'consumers/consumer/metrics' %>
 
-<%== partial 'consumers/consumer/tabs' %>
+  <%== partial 'consumers/consumer/tabs' %>
 
-<% if @running_jobs.empty? %>
-  <%== partial 'consumers/consumer/no_jobs', locals: { type: 'running' } %>
-<% else %>
-  <div class="container">
-    <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">
-          <thead>
-            <tr class="align-middle">
-              <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>
-            </tr>
-          </thead>
-          <tbody>
-            <%==
-              render_each(
-                @running_jobs,
-                'consumers/consumer/_job',
-                local: :job
-              )
-            %>
-          </tbody>
-        </table>
-      </div>
+  <% if @running_jobs.empty? %>
+    <%== partial 'consumers/consumer/no_jobs', locals: { type: 'running' } %>
+  <% else %>
+    <div class="data-table-wrapper">
+      <table class="data-table">
+        <thead>
+          <tr>
+            <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>
+            <th><%== sort_link(:first_offset) %></th>
+            <th><%== sort_link(:last_offset) %></th>
+            <th><%== sort_link(:committed_offset) %></th>
+          </tr>
+        </thead>
+        <tbody>
+          <%==
+            render_each(
+              @running_jobs,
+              'consumers/consumer/_job',
+              local: :job
+            )
+          %>
+        </tbody>
+      </table>
     </div>
-  </div>
-<% end %>
+  <% end %>
+</div>

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

@@ -1,20 +1,17 @@
-<div class="container mb-5">
-  <div class="row">
-    <%== partial 'consumers/consumer/title' %>
-    <%== partial 'consumers/consumer/commands', locals: { process: @process } %>
-  </div>
-</div>
+<% view_title @process.id %>
+
+<%== partial 'consumers/consumer/commands', locals: { process: @process } %>
 
-<% if @process.status == 'stopped' %>
-  <%== partial 'consumers/consumer/stopped' %>
-<% end %>
+<div class="col-span-12">
+  <% if @process.status == 'stopped' %>
+    <%== partial 'consumers/consumer/stopped' %>
+  <% end %>
 
-<%== partial 'consumers/consumer/metrics' %>
+  <%== partial 'consumers/consumer/metrics' %>
 
-<%== partial 'consumers/consumer/tabs' %>
+  <%== partial 'consumers/consumer/tabs' %>
 
-<% if @process.subscribed? %>
-  <div class="container">
+  <% if @process.subscribed? %>
     <%==
       render_each(
         @process.consumer_groups,
@@ -22,7 +19,7 @@
         local: :consumer_group
       )
     %>
-  </div>
-<% else %>
-  <%== partial 'consumers/consumer/no_subscriptions' %>
-<% end %>
+  <% else %>
+    <%== partial 'consumers/consumer/no_subscriptions' %>
+  <% end %>
+</div>