karafka-web 0.9.0 → 0.10.0.beta1

data/lib/karafka/web/ui/views/errors/index.erb

@@ -1,48 +1,38 @@
-<div class="container mb-4">
-  <div class="row">
-    <div class="col">
-      <h3>
-        Errors
-      </h3>
-    </div>
-  </div>
-
-  <hr>
-</div>
+<% view_title 'Errors' %>
 
-<div class="container">
-  <div class="row mb-5">
-    <div class="col-sm-12">
-      <%== partial('errors/watermark_offsets') %>
+<div class="col-span-12">
+  <% if @watermark_offsets.empty? %>
+    <%== partial 'errors/no_errors' %>
+  <% elsif @watermark_offsets.cleaned? %>
+    <%== partial 'errors/cleaned' %>
+  <% else %>
+    <div class="data-table-wrapper">
+      <table class="data-table">
+        <thead>
+          <tr>
+            <th>Origin</th>
+            <th>ID</th>
+            <th>Error</th>
+            <th>Occurred</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          <%==
+            each_partial(
+              @error_messages,
+              'errors/error',
+              local: :error_msg
+            )
+          %>
+        </tbody>
+      </table>
 
-      <% if @watermark_offsets.empty? %>
-        <%== partial 'errors/no_errors' %>
-      <% elsif @watermark_offsets.cleaned? %>
-        <%== partial 'errors/cleaned' %>
-      <% 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>Origin</th>
-                <th>ID</th>
-                <th>Error</th>
-                <th>Occurred</th>
-                <th></th>
-              </tr>
-            </thead>
-            <tbody>
-              <%==
-                each_partial(
-                  @error_messages,
-                  'errors/error',
-                  local: :error_msg
-                )
-              %>
-            </tbody>
-          </table>
-        </div>
-      <% end %>
+      <p class="table_metadata">
+        Watermark offsets:
+        <%== badge_secondary "high: #{@watermark_offsets.high}" %>
+        <%== badge_secondary "low: #{@watermark_offsets.low}" %>
+      </p>
     </div>
-  </div>
+  <% end %>
 </div>

data/lib/karafka/web/ui/views/errors/show.erb

@@ -1,57 +1,39 @@
-<%==
+<%
   type = @error_message.payload[:type]
   error_class = @error_message.payload[:error_class]
 
-  view_title("#{type}: #{error_class}")
+  view_title "#{type}: #{error_class}"
 %>
 
-<div class="container">
-  <div class="row mb-4">
-    <div class="col-sm-12">
-      <h5 class="mb-2">
-        Metadata
-      </h5>
-      <hr/>
-    </div>
-  </div>
+<div class="col-span-12 mb-3">
+  <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>
-          <% @error_message.payload.each do |k, v| %>
-            <% next if k == :backtrace %>
-            <%==
-              partial(
-                'errors/detail',
-                locals: {
-                  k: k,
-                  v: v
-                }
-              )
-            %>
-          <% end %>
-        </tbody>
-      </table>
-    </div>
+  <div class="data-table-wrapper">
+    <table class="data-table">
+      <tbody>
+        <% @error_message.payload.each do |k, v| %>
+          <% next if k == :backtrace %>
+          <%==
+            partial(
+              'errors/detail',
+              locals: {
+                k: k,
+                v: v
+              }
+            )
+          %>
+        <% end %>
+      </tbody>
+    </table>
   </div>
+</div>
 
-  <div class="row mb-4">
-    <div class="col-sm-12">
-      <h5 class="mb-2">
-        Backtrace
-      </h5>
-      <hr/>
-    </div>
-  </div>
+<div class="col-span-12 mb-3">
+  <h2 class="h2">
+    Backtrace
+  </h2>
 
-  <div class="row mb-5">
-    <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"><%= @error_message.payload[:backtrace] %></code></pre>
-        </div>
-      </div>
-    </div>
-  </div>
+  <pre class="mb-5 p-0 border border-gray-300 text-sm"><code class="wrapped json p-0 m-0"><%= @error_message.payload[:backtrace] %></code></pre>
 </div>

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

@@ -1,11 +1,11 @@
-<li class="breadcrumb-item">
+<li>
   <a href="<%= root_path('jobs') %>">
     Jobs
   </a>
 </li>
 
 <% if current_path.include?('/running') %>
-  <li class="breadcrumb-item">
+  <li>
     <a href="<%= root_path('jobs/running') %>">
       Running
     </a>
@@ -13,7 +13,7 @@
 <% end %>
 
 <% if current_path.include?('/pending') %>
-  <li class="breadcrumb-item">
+  <li>
     <a href="<%= root_path('jobs/pending') %>">
       Pending
     </a>

data/lib/karafka/web/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/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/ui/views/jobs/_tabs.erb

@@ -1,27 +1,17 @@
-<div class="container">
-  <div class="row mb-5">
-    <div class="col-sm-12">
+<div class="tab-container-wrapper">
+  <div class="tab-container">
+    <a
+      href="<%= root_path('jobs', 'running') %>"
+      class="custom-tab <%= nav_class(include: 'running') %>"
+    >
+      Running (<%= @jobs_counters.running %>)
+    </a>
 
-      <ul class="nav nav-tabs">
-        <li class="nav-item">
-          <a
-            class="nav-link <%= nav_class(include: 'running') %>"
-            href="<%= root_path('jobs', 'running') %>"
-          >
-            Running (<%= @jobs_counters.running %>)
-          </a>
-        </li>
-
-        <li class="nav-item">
-          <a
-            class="nav-link <%= nav_class(include: 'pending') %>"
-            href="<%= root_path('jobs', 'pending') %>"
-          >
-            Pending (<%= @jobs_counters.pending %>)
-          </a>
-        </li>
-      </ul>
-
-    </div>
+    <a
+      href="<%= root_path('jobs', 'pending') %>"
+      class="custom-tab <%= nav_class(include: 'pending') %>"
+    >
+      Pending (<%= @jobs_counters.pending %>)
+    </a>
   </div>
 </div>

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

@@ -1,36 +1,34 @@
-<%== view_title('Pending Jobs', 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><%== sort_link('Process', :id) %></th>
-              <th><%== sort_link(:topic) %></th>
-              <th><%== sort_link(:consumer) %></th>
-              <th><%== sort_link(:type) %></th>
-              <th><%== sort_link(:first_offset) %></th>
-              <th><%== sort_link('Created', :updated_at, rev: true) %></th>
-            </tr>
-          </thead>
-          <tbody>
-            <%==
-              each_partial(
-                @jobs,
-                'jobs/job'
-              )
-            %>
-          </tbody>
-        </table>
-      </div>
+<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><%== sort_link('Process', :id) %></th>
+            <th><%== sort_link(:topic) %></th>
+            <th><%== sort_link(:consumer) %></th>
+            <th><%== sort_link(:type) %></th>
+            <th><%== sort_link(:first_offset) %></th>
+            <th><%== sort_link('Created', :updated_at, rev: true) %></th>
+          </tr>
+        </thead>
+        <tbody>
+          <%==
+            each_partial(
+              @jobs,
+              'jobs/job'
+            )
+          %>
+        </tbody>
+      </table>
     </div>
-  </div>
-<% end %>
+  <% end %>
+</div>

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

@@ -1,36 +1,34 @@
-<%== view_title('Running Jobs', 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><%== sort_link('Process', :id) %></th>
-              <th><%== sort_link(:topic) %></th>
-              <th><%== sort_link(:consumer) %></th>
-              <th><%== sort_link(:type) %></th>
-              <th><%== sort_link(:first_offset) %></th>
-              <th><%== sort_link('Started', :updated_at, rev: true) %></th>
-            </tr>
-          </thead>
-          <tbody>
-            <%==
-              each_partial(
-                @jobs,
-                'jobs/job'
-              )
-            %>
-          </tbody>
-        </table>
-      </div>
+<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><%== sort_link('Process', :id) %></th>
+            <th><%== sort_link(:topic) %></th>
+            <th><%== sort_link(:consumer) %></th>
+            <th><%== sort_link(:type) %></th>
+            <th><%== sort_link(:first_offset) %></th>
+            <th><%== sort_link('Started', :updated_at, rev: true) %></th>
+          </tr>
+        </thead>
+        <tbody>
+          <%==
+            each_partial(
+              @jobs,
+              'jobs/job'
+            )
+          %>
+        </tbody>
+      </table>
     </div>
-  </div>
-<% end %>
+  <% end %>
+</div>

data/lib/karafka/web/ui/views/layout.erb

@@ -1,30 +1,46 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" data-theme="corporate">
   <%== partial 'shared/header' %>
 
-  <body>
-    <script>0</script>
-
-    <% if @error %>
+  <% if @error %>
+    <body class="min-h-screen bg-base-200">
       <%== yield %>
-    <% else %>
-      <nav class="navbar navbar-expand-lg navbar-dark shadow-sm mb-4">
-        <div class="container-fluid">
-          <%== partial 'shared/brand' %>
-          <%== partial 'shared/navigation' %>
-          <%== partial 'shared/live_poll' %>
-        </div>
-      </nav>
+    </body>
+  <% else %>
+    <body class="drawer min-h-screen lg:drawer-open bg-base-200">
+      <input id="main-drawer" type="checkbox" class="drawer-toggle" />
 
-      <main>
-        <%== partial 'shared/become_pro' %>
+      <aside class="drawer-side z-10">
+        <label for="main-drawer" class="drawer-overlay"></label>
 
-        <%== partial 'shared/flashes' %>
+        <%== partial 'shared/navigation' %>
+      </aside>
 
-        <%== partial 'shared/content', locals: { content: yield } %>
-      </main>
+      <main class="drawer-content">
+        <div class="turbo-progress-bar"></div>
+
+        <div class="grid-default lg:pb-0">
+          <%== partial 'shared/become_pro' %>
+
+          <%== partial 'shared/breadcrumbs' %>
+
+          <header class="col-span-12 flex items-center gap-2 lg:gap-4 mb-3">
+            <label for="main-drawer" class="btn btn-square btn-ghost drawer-button lg:hidden">
+              <%== icon(:burger) %>
+            </label>
 
-      <%== partial 'shared/footer' %>
-    <% end %>
-  </body>
+            <%== partial 'shared/title' %>
+
+            <%== partial 'shared/controls' %>
+          </header>
+
+          <%== partial 'shared/flashes' %>
+        </div>
+
+        <div class="grid-default pt-5">
+          <%== partial 'shared/content', locals: { content: yield } %>
+        </div>
+      </main>
+    </body>
+  <% end %>
 </html>

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

@@ -1,11 +1,11 @@
-<li class="breadcrumb-item">
+<li>
   <a href="<%= root_path('routing') %>">
     Routing details
   </a>
 </li>
 
 <% if @topic %>
-  <li class="breadcrumb-item">
+  <li>
     <a href="<%= root_path('routing', @topic.id) %>">
       <%=
         title = [@topic.consumer_group.id, @topic.subscription_group, @topic.name].join(': ')

data/lib/karafka/web/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><%== sort_link(:active?) %></th>

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

@@ -6,13 +6,11 @@
     <%= topic.name %>
   </td>
   <td>
-    <span class="badge bg-<%= topic.active? ? 'success' : 'warning text-dark' %>">
+    <span class="badge badge-<%= topic.active? ? 'success' : 'warning text-dark' %>">
     <%= topic.active? %>
     </span>
   </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/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'
+  )
+%>

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

@@ -1,26 +1,34 @@
-<%==
+<%
   title = [@topic.consumer_group.name, @topic.subscription_group, @topic.name].join(': ')
-  view_title(title, hr: true)
+  view_title title
 %>
 
-<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">
-        <tbody>
-          <% flat_hash(@topic.to_h).each do |k, v| %>
-            <%==
-              partial(
-                'routing/detail',
-                locals: {
-                  k: k,
-                  v: v
-                }
-              )
-            %>
-          <% end %>
-        </tbody>
-      </table>
-    </div>
-  </div>
+<div class="data-table-wrapper">
+  <table class="data-table">
+    <tbody>
+      <% flat_hash(@topic.subscription_group.kafka).each do |k, v| %>
+        <%==
+          partial(
+            'routing/detail',
+            locals: {
+              k: "kafka.#{k}",
+              v: v
+            }
+          )
+        %>
+      <% end %>
+
+      <% flat_hash(@topic.to_h.except(:kafka)).each do |k, v| %>
+        <%==
+          partial(
+            'routing/detail',
+            locals: {
+              k: k,
+              v: v
+            }
+          )
+        %>
+      <% end %>
+    </tbody>
+  </table>
 </div>

data/lib/karafka/web/ui/views/shared/_become_pro.erb

@@ -1,12 +1,12 @@
 <% unless Karafka.pro? %>
-  <div id="help-us">
-    <div class="mb-4">
-      <div class="container">
-        <div class="alert alert-light">
-          &#128161;
-          <% linked = '<a target="_blank" href="https://karafka.io/#become-pro">Pro</a>' %>
-          <%== Karafka::Web.slogans.sample.gsub('Pro', linked) %>
-        </div>
+  <div id="help-us" class="col-span-12">
+    <div class="mb-3">
+      <div class="alert alert-info bg-white">
+        <%== icon(:light_bulb) %>
+        <span>
+          <% linked = '<a target="_blank" href="https://karafka.io/#become-pro" class="text-blue-500 underline">Pro</a>' %>
+          <%== Karafka::Web.slogans.sample.gsub('Pro ', "#{linked} ").gsub('Pro.', "#{linked}.") %>
+        </span>
       </div>
     </div>
   </div>

data/lib/karafka/web/ui/views/shared/_brand.erb

@@ -1,3 +1,3 @@
-<a class="navbar-brand ms-4" href="<%= root_path %>">
-  <img src="<%= asset_path('images/logo.svg') %>" alt="Karafka" height="20" width="95" class="d-inline-block align-text-top"/>
+<a class="flex items-center ml-2 mb-2" href="<%= root_path %>">
+  <img src="<%= asset_path('images/logo.svg') %>" alt="Karafka logo" height="20" width="95">
 </a>

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

@@ -0,0 +1,23 @@
+<% if @breadcrumbs != false %>
+  <div class="breadcrumbs-wrapper">
+    <div class="breadcrumbs">
+      <ul>
+        <li>
+          <a href="<%= root_path %>">
+            Home
+          </a>
+        </li>
+
+        <%== render_breadcrumbs %>
+
+        <% if params.current_page && params.current_page > 1 %>
+          <li>
+            <a href="<%= current_path(page: params.current_page) %>">
+              Page <%= params.current_page %>
+            </a>
+          </li>
+        <% end %>
+      </ul>
+    </div>
+  </div>
+<% end %>