karafka-web 0.9.0 → 0.10.0.beta1

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

@@ -1,58 +1,58 @@
-<%== view_title('Consumers Groups Lags Details') %>
+<% view_title 'Consumers Groups Lags 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="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>
-                <% partitions.each do |partition_id, details| %>
-                  <%==
-                    partial(
-                      'health/partition_lags',
-                      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="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>
+              <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>
+              <% partitions.each do |partition_id, details| %>
+                <%==
+                  partial(
+                    'health/partition_lags',
+                    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/offsets.erb

@@ -1,61 +1,61 @@
-<%== view_title('Consumers Groups Offsets Details') %>
+<% view_title 'Consumers Groups Offsets 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 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 change', :committed_offset_fd) %></th>
-                <th><%== sort_link(:stored_offset) %></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>
-                <% partitions.each do |partition_id, details| %>
-                  <%==
-                    partial(
-                      'health/partition_offset',
-                      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 rowspan="2"><%== sort_link(:lag_hybrid) %></th>
+              <th colspan="10" class="text-center">Offsets</th>
+            </tr>
+            <tr>
+              <th><%== sort_link(:committed_offset) %></th>
+              <th><%== sort_link('Committed change', :committed_offset_fd) %></th>
+              <th><%== sort_link(:stored_offset) %></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>
+              <% partitions.each do |partition_id, details| %>
+                <%==
+                  partial(
+                    'health/partition_offset',
+                    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/overview.erb

@@ -1,67 +1,67 @@
-<%== view_title('Consumers Groups Overview') %>
+<% view_title 'Consumers Groups Overview' %>
 
 <%== 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="100">
-                  <h5 class="mb-0"><%= topic_name %></h4>
-                </th>
-              </tr>
-              <tr class="align-middle">
-                <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>
+    <% 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="100">
+                <%= topic_name %>
+              </th>
+            </tr>
+            <tr>
+              <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_risk_state) %></th>
-              </tr>
-            </thead>
-            <tbody>
-                <% partitions.each do |partition_id, details| %>
-                  <%==
-                    partial(
-                      'health/partition',
-                      locals: {
-                        topic_name: topic_name,
-                        partition_id: partition_id,
-                        details: details
-                      }
-                    )
-                  %>
-                <% end %>
-            </tbody>
-          </table>
-        <% end %>
+              <th colspan="1" rowspan="2">
+               <%== sort_link(:id) %>
+              </th>
+            </tr>
+            <tr>
+              <th><%== sort_link(:fetch_state) %></th>
+              <th><%== sort_link(:poll_state) %></th>
+              <th><%== sort_link(:lso_risk_state) %></th>
+            </tr>
+          </thead>
+          <tbody>
+              <% partitions.each do |partition_id, details| %>
+                <%==
+                  partial(
+                    'health/partition',
+                    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/jobs/_job.erb

@@ -5,7 +5,7 @@
     </a>
   </td>
   <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>

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

@@ -1,7 +1 @@
-<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>
+<%== alert_info("There are no #{type} jobs at the moment.") %>

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

@@ -1,43 +1,41 @@
-<%== view_title('Pending Jobs Overview', hr: false) %>
+<% view_title 'Pending Jobs' %>
 
 <%== 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-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('Process', :id) %></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>
+<div class="col-span-12">
+  <% 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="data-table-wrapper">
+      <table class="data-table">
+        <thead>
+          <tr>
+            <th rowspan="2"><%== sort_link('Process', :id) %></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>
-            </tr>
-          </thead>
-          <tbody>
-            <%==
-              each_partial(
-                @jobs,
-                'jobs/job'
-              )
-            %>
-          </tbody>
-        </table>
-      </div>
+          <tr>
+            <th><%== sort_link(:first_offset) %></th>
+            <th><%== sort_link(:last_offset) %></th>
+            <th><%== sort_link(:committed_offset) %></th>
+          </tr>
+        </thead>
+        <tbody>
+          <%==
+            each_partial(
+              @jobs,
+              'jobs/job'
+            )
+          %>
+        </tbody>
+      </table>
     </div>
-  </div>
-<% end %>
+  <% end %>
+</div>

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

@@ -1,43 +1,41 @@
-<%== view_title('Running Jobs Overview', hr: false) %>
+<% view_title 'Running Jobs' %>
 
 <%== 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-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('Process', :id) %></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>
+<div class="col-span-12">
+  <% 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="data-table-wrapper">
+      <table class="data-table">
+        <thead>
+          <tr>
+            <th rowspan="2"><%== sort_link('Process', :id) %></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>
-            </tr>
-          </thead>
-          <tbody>
-            <%==
-              each_partial(
-                @jobs,
-                'jobs/job'
-              )
-            %>
-          </tbody>
-        </table>
-      </div>
+          <tr>
+            <th><%== sort_link(:first_offset) %></th>
+            <th><%== sort_link(:last_offset) %></th>
+            <th><%== sort_link(:committed_offset) %></th>
+          </tr>
+        </thead>
+        <tbody>
+          <%==
+            each_partial(
+              @jobs,
+              'jobs/job'
+            )
+          %>
+        </tbody>
+      </table>
     </div>
-  </div>
-<% end %>
+  <% end %>
+</div>

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

@@ -1,17 +1,12 @@
-<div class="row mb-4">
-  <div class="col-sm-12">
-    <h4 class="mb-2">
-      <%= consumer_group.id %>
-    </h4>
-    <hr/>
-  </div>
-</div>
+<div class="col-span-12 mb-3">
+  <h2 class="h2">
+    <%= consumer_group.id %>
+  </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">
+  <div class="data-table-wrapper">
+    <table class="data-table">
       <thead>
-        <tr class="align-middle">
+        <tr>
           <th>Subscription group</th>
           <th><%== sort_link('Topic', :name) %></th>
           <th>Type</th>

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

@@ -2,16 +2,16 @@
   <td>
     <%= subscription_group %>
   </td>
+
   <td>
     <%= topic.name %>
   </td>
+
   <td>
-    <span class="badge bg-secondary">
-      <%= topic.patterns.type %>
-    </span>
+    <%== badge_secondary topic.patterns.type %>
 
     <% if subscription_group.multiplexing? %>
-      <span class="badge bg-secondary">
+      <span class="badge badge-secondary">
         multiplexing
         <%= subscription_group.multiplexing.min %>
         -
@@ -19,14 +19,16 @@
       </span>
     <% end %>
   </td>
+
   <td>
-    <span class="badge bg-<%= topic.active? ? 'success' : 'warning text-dark' %>">
-    <%= topic.active? %>
-    </span>
+    <% if topic.active? %>
+      <%== badge_success topic.active? %>
+    <% else %>
+      <%== badge_secondary topic.active? %>
+    <% end %>
   </td>
-  <td class="text-center">
-    <a href="<%= root_path('routing', topic.id) %>" class="btn btn-sm btn-secondary text-white">
-      Details
-    </a>
+
+  <td>
+    <%== link_button_primary_sm 'Details', root_path('routing', topic.id) %>
   </td>
 </tr>

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

@@ -1,10 +1,8 @@
-<%== view_title('Routing Details') %>
+<% view_title 'Routing Details' %>
 
-<div class="container mb-5">
-  <%==
-    each_partial(
-      @routes,
-      'routing/consumer_group'
-    )
-  %>
-</div>
+<%==
+  each_partial(
+    @routes,
+    'routing/consumer_group'
+  )
+%>