karafka-web 0.11.5 → 0.11.6

data/lib/karafka/web/ui/public/stylesheets/libs/tailwind.css

@@ -6,6 +6,45 @@
 
 @config '../../../../../../../tailwind.config.js';
 
+/*
+  Safelist using @source inline() - Tailwind v4.1+ feature
+  Uses brace expansion syntax for patterns
+  Note: Regex patterns in tailwind.config.js safelist do NOT work with @tailwindcss/postcss
+  Reference: https://tailwindcss.com/docs/detecting-classes-in-source-files#safelisting-specific-utilities
+*/
+@source inline('badge{,-xs,-sm,-lg,-outline,-ghost,-info,-error,-warning,-success,-primary,-secondary,-neutral,-accent}');
+@source inline('alert{,-info,-error,-warning,-success,-primary,-secondary}');
+@source inline('btn{,-xs,-sm,-md,-lg,-square,-circle,-ghost,-outline,-link,-active,-disabled,-info,-error,-warning,-success,-primary,-secondary,-neutral,-accent}');
+@source inline('bg-{base-100,base-200,base-300,info,error,warning,success,primary,secondary,neutral,accent}');
+@source inline('status-row-{warning,error,success,info,quiet,quieting,running,stopped,stopping,pending}');
+@source inline('menu{,-xs,-sm,-md,-lg,-horizontal,-vertical,-compact,-active}');
+@source inline('card{,-body,-title,-actions,-compact,-bordered,-side}');
+@source inline('toggle{,-xs,-sm,-md,-lg,-primary,-secondary,-accent,-success,-warning,-error,-info}');
+@source inline('input{,-xs,-sm,-md,-lg,-bordered,-ghost,-primary,-secondary,-accent,-success,-warning,-error,-info}');
+@source inline('textarea{,-xs,-sm,-md,-lg,-bordered,-ghost,-primary,-secondary,-accent,-success,-warning,-error,-info}');
+@source inline('select{,-xs,-sm,-md,-lg,-bordered,-ghost,-primary,-secondary,-accent,-success,-warning,-error,-info}');
+@source inline('checkbox{,-xs,-sm,-md,-lg,-primary,-secondary,-accent,-success,-warning,-error,-info}');
+@source inline('radio{,-xs,-sm,-md,-lg,-primary,-secondary,-accent,-success,-warning,-error,-info}');
+@source inline('link{,-primary,-secondary,-accent,-success,-warning,-error,-info,-hover}');
+@source inline('table{,-xs,-sm,-md,-lg,-zebra,-pin-rows,-pin-cols}');
+@source inline('tooltip{,-open,-top,-bottom,-left,-right,-primary,-secondary,-accent,-success,-warning,-error,-info}');
+@source inline('modal{,-open,-top,-bottom,-middle}');
+@source inline('dropdown{,-open,-top,-bottom,-left,-right,-end,-hover}');
+@source inline('tabs{,-boxed,-bordered,-lifted}');
+@source inline('tab{,-active,-disabled,-bordered,-lifted}');
+@source inline('collapse{,-open,-close,-arrow,-plus}');
+@source inline('progress{,-primary,-secondary,-accent,-success,-warning,-error,-info}');
+@source inline('radial-progress');
+@source inline('loading{,-spinner,-dots,-ring,-ball,-bars,-infinity}');
+@source inline('divider{,-horizontal,-vertical,-start,-end,-neutral,-primary,-secondary,-accent,-success,-warning,-error,-info}');
+@source inline('drawer{,-open,-end,-side}');
+@source inline('navbar{,-start,-center,-end}');
+@source inline('breadcrumbs');
+@source inline('steps{,-horizontal,-vertical}');
+@source inline('step{,-primary,-secondary,-accent,-success,-warning,-error,-info,-neutral}');
+@source inline('form-control');
+@source inline('label{,-text,-text-alt}');
+
 /*
   The default border color has changed to `currentColor` in Tailwind CSS v4,
   so we've added these compatibility styles to make sure everything still
@@ -312,7 +351,11 @@
   }
 
   & td:has(.btn) {
-    @apply text-center;
+    @apply text-right;
+  }
+
+  & th:has(.btn) {
+    @apply text-right;
   }
 }
 
@@ -322,12 +365,21 @@
 
 @utility btn {
   .data-table td:has(&) {
-    @apply text-center;
+    @apply text-right;
   }
 
   .row-table td:has(&) {
-    @apply text-center;
+    @apply text-right;
   }
+
+  .data-table th:has(&) {
+    @apply text-right;
+  }
+
+  .row-table th:has(&) {
+    @apply text-right;
+  }
+
   @apply font-normal;
 }
 
@@ -748,6 +800,13 @@ tr:not(:first-child) th[colspan]:not([colspan="1"]) {
   @apply text-center;
 }
 
+table th.options,
+table td.options {
+  width: 1%;
+  white-space: nowrap;
+  @apply text-right;
+}
+
 #controls {
   button {
     &:hover {

data/lib/karafka/web/ui/routes/assets.rb

@@ -10,15 +10,15 @@ module Karafka
           route do |r|
             # Serves current version specific assets to prevent users from fetching old assets
             # after upgrade.
-            r.on 'assets', Karafka::Web::VERSION do
+            r.on "assets", Karafka::Web::VERSION do
               custom_css = Karafka::Web.config.ui.custom.css
 
               # If there are custom css styles and js inserted via the config we should display
               # them. They can be either files or just content.
               if custom_css
-                r.get('stylesheets/custom.css') do
-                  response['Content-Type'] = 'text/css'
-                  response['Cache-Control'] = 'max-age=31536000, immutable'
+                r.get("stylesheets/custom.css") do
+                  response["Content-Type"] = "text/css"
+                  response["Cache-Control"] = "max-age=31536000, immutable"
 
                   if File.exist?(custom_css) && File.file?(custom_css)
                     File.read(custom_css)
@@ -31,9 +31,9 @@ module Karafka
               custom_js = Karafka::Web.config.ui.custom.js
 
               if custom_js
-                r.get('javascripts/custom.js') do
-                  response['Content-Type'] = 'application/javascript'
-                  response['Cache-Control'] = 'max-age=31536000, immutable'
+                r.get("javascripts/custom.js") do
+                  response["Content-Type"] = "application/javascript"
+                  response["Cache-Control"] = "max-age=31536000, immutable"
 
                   if File.exist?(custom_js) && File.file?(custom_js)
                     File.read(custom_js)

data/lib/karafka/web/ui/routes/cluster.rb

@@ -7,18 +7,18 @@ module Karafka
         # Manages the cluster related routes
         class Cluster < Base
           route do |r|
-            r.on 'cluster' do
+            r.on "cluster" do
               controller = build(Controllers::ClusterController)
 
-              r.get 'brokers' do
+              r.get "brokers" do
                 controller.brokers
               end
 
-              r.get 'replication' do
+              r.get "replication" do
                 controller.replication
               end
 
-              r.redirect root_path('cluster/brokers')
+              r.redirect root_path("cluster/brokers")
             end
           end
         end

data/lib/karafka/web/ui/routes/consumers.rb

@@ -7,7 +7,7 @@ module Karafka
         # Manages the consumers related routes
         class Consumers < Base
           route do |r|
-            r.on 'consumers' do
+            r.on "consumers" do
               %w[
                 performance
                 controls
@@ -18,7 +18,7 @@ module Karafka
                 end
               end
 
-              r.get String, 'subscriptions' do |_process_id|
+              r.get String, "subscriptions" do |_process_id|
                 raise ::Karafka::Web::Errors::Ui::ProOnlyError
               end
 

data/lib/karafka/web/ui/routes/dashboard.rb

@@ -7,7 +7,7 @@ module Karafka
         # Manages the dashboard related routes
         class Dashboard < Base
           route do |r|
-            r.get 'dashboard' do
+            r.get "dashboard" do
               @breadcrumbs = false
               controller = build(Controllers::DashboardController)
               controller.index

data/lib/karafka/web/ui/routes/errors.rb

@@ -7,14 +7,14 @@ module Karafka
         # Manages the errors related routes
         class Errors < Base
           route do |r|
-            r.on 'errors' do
+            r.on "errors" do
               controller = build(Controllers::ErrorsController)
 
               r.get Integer do |offset|
                 if params.current_offset == -1
                   controller.show(offset)
                 else
-                  r.redirect root_path('errors', params.current_offset)
+                  r.redirect root_path("errors", params.current_offset)
                 end
               end
 

data/lib/karafka/web/ui/routes/jobs.rb

@@ -7,18 +7,18 @@ module Karafka
         # Manages the jobs related routes
         class Jobs < Base
           route do |r|
-            r.on 'jobs' do
+            r.on "jobs" do
               controller = build(Controllers::JobsController)
 
-              r.get 'running' do
+              r.get "running" do
                 controller.running
               end
 
-              r.get 'pending' do
+              r.get "pending" do
                 controller.pending
               end
 
-              r.redirect root_path('jobs/running')
+              r.redirect root_path("jobs/running")
             end
           end
         end

data/lib/karafka/web/ui/routes/routing.rb

@@ -7,7 +7,7 @@ module Karafka
         # Manages the routing related routes
         class Routing < Base
           route do |r|
-            r.on 'routing' do
+            r.on "routing" do
               controller = build(Controllers::RoutingController)
 
               r.get String do |topic_id|

data/lib/karafka/web/ui/routes/status.rb

@@ -7,7 +7,7 @@ module Karafka
         # Manages the status related routes
         class Status < Base
           route do |r|
-            r.get 'status' do
+            r.get "status" do
               controller = build(Controllers::StatusController)
               controller.show
             end

data/lib/karafka/web/ui/routes/support.rb

@@ -7,7 +7,7 @@ module Karafka
         # Manages the support related routes
         class Support < Base
           route do |r|
-            r.get 'support' do
+            r.get "support" do
               controller = build(Controllers::SupportController)
               controller.show
             end

data/lib/karafka/web/ui/routes/ux.rb

@@ -7,7 +7,7 @@ module Karafka
         # Manages the ux related routes
         class Ux < Base
           route do |r|
-            r.get 'ux' do
+            r.get "ux" do
               controller = build(Controllers::UxController)
               controller.show
             end

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

@@ -5,6 +5,7 @@
     <a href="<%= explorer_topics_path(topic[:topic_name]) %>">
       <%= topic[:topic_name] %>
     </a>
+  </td>
   <td>
     <a href="<%= explorer_topics_path(topic[:topic_name], partition[:partition_id]) %>">
       <%= partition[:partition_id] %>

data/lib/karafka/web/ui/views/dashboard/_counters.erb

@@ -1,5 +1,5 @@
 <div id="refreshable" class="col-span-12 mb-10">
-  <div class="card bg-base-100 border border-gray-300 rounded-md">
+  <div class="card bg-base-100 border border-base-300 rounded-md">
     <div class="card-body p-2 text-sm">
       <div class="w-full">
         <ul class="list-none grid grid-cols-2 md:grid-cols-3 lg:grid-cols-9 text-center gap-4 mb-0 mt-0">
@@ -7,66 +7,66 @@
             <div class="count mb-1 text-md">
               <%= number_with_delimiter @counters.messages, ' ' %>
             </div>
-            <div class="desc text-gray-500">Messages</div>
+            <div class="desc text-base-content/70">Messages</div>
           </li>
           <li class="p-1">
             <div class="count mb-1 text-md">
               <%= number_with_delimiter @counters.batches, ' ' %>
             </div>
-            <div class="desc text-gray-500">Batches</div>
+            <div class="desc text-base-content/70">Batches</div>
           </li>
           <li class="p-1">
-            <a href="<%= root_path('jobs/running') %>" class="hover:text-blue-600">
+            <a href="<%= root_path('jobs/running') %>" class="hover:text-primary">
               <div class="count mb-1 text-md">
                 <%= number_with_delimiter @counters.jobs, ' ' %>
               </div>
-              <div class="desc text-gray-500">Jobs</div>
+              <div class="desc text-base-content/70">Jobs</div>
             </a>
           </li>
           <li class="p-1">
-            <a href="<%= root_path('health/lags') %>" class="hover:text-blue-600">
+            <a href="<%= root_path('health/lags') %>" class="hover:text-primary">
               <div class="count mb-1 text-md">
                 <%= number_with_delimiter @counters.lag_hybrid, ' ' %>
               </div>
-              <div class="desc text-gray-500">Total lag</div>
+              <div class="desc text-base-content/70">Total lag</div>
             </a>
           </li>
           <li class="p-1">
-            <a href="<%= root_path('jobs/running') %>" class="hover:text-blue-600">
+            <a href="<%= root_path('jobs/running') %>" class="hover:text-primary">
               <div class="count mb-1 text-md">
                 <%= number_with_delimiter @counters.busy, ' ' %>
               </div>
-              <div class="desc text-gray-500">Running</div>
+              <div class="desc text-base-content/70">Running</div>
             </a>
           </li>
           <li class="p-1">
-            <a href="<%= root_path('jobs/pending') %>" class="hover:text-blue-600">
+            <a href="<%= root_path('jobs/pending') %>" class="hover:text-primary">
               <div class="count mb-1 text-md">
                 <%= number_with_delimiter @counters.pending, ' ' %>
               </div>
-              <div class="desc text-gray-500">Pending</div>
+              <div class="desc text-base-content/70">Pending</div>
             </a>
           </li>
           <li class="p-1">
-            <a href="<%= root_path('errors') %>" class="hover:text-blue-600">
+            <a href="<%= root_path('errors') %>" class="hover:text-primary">
               <div class="count mb-1 text-md">
                 <%= number_with_delimiter @counters.errors, ' ' %>
               </div>
-              <div class="desc text-gray-500">Errors</div>
+              <div class="desc text-base-content/70">Errors</div>
             </a>
           </li>
           <li class="p-1">
             <div class="count mb-1 text-md">
               <%= number_with_delimiter @counters.retries, ' ' %>
             </div>
-            <div class="desc text-gray-500">Retries</div>
+            <div class="desc text-base-content/70">Retries</div>
           </li>
           <li class="p-1">
-            <a href="<%= root_path('dlq') %>" class="hover:text-blue-600">
+            <a href="<%= root_path('dlq') %>" class="hover:text-primary">
               <div class="count mb-1 text-md">
                 <%= number_with_delimiter @counters.dead, ' ' %>
               </div>
-              <div class="desc text-gray-500">Dead</div>
+              <div class="desc text-base-content/70">Dead</div>
             </a>
           </li>
         </ul>

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

@@ -33,9 +33,8 @@
       <%= k %>
     </td>
     <td>
-      <% case k
-         when :occurred_at
-      %>
+      <% case k %>
+      <% when :occurred_at %>
         <%== relative_time v %>
       <% when :error_class %>
         <code><%= v %></code>

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

@@ -28,7 +28,7 @@
     <td>
       <%== relative_time error[:occurred_at] %>
     </td>
-    <td>
+    <td class="options">
       <%== link_button_primary_sm 'Details', root_path('errors', error_msg.offset) %>
     </td>
   </tr>

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

@@ -14,7 +14,7 @@
             <th>Process ID</th>
             <th>Error</th>
             <th>Occurred</th>
-            <th></th>
+            <th class="options">Options</th>
           </tr>
         </thead>
         <tbody>

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

@@ -36,7 +36,7 @@
       Backtrace
     </h2>
 
-    <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>
+    <pre class="mb-5 p-0 border border-base-300 text-sm"><code class="wrapped json p-0 m-0"><%= @error_message.payload[:backtrace] %></code></pre>
   </div>
 <% else %>
   <% view_title "Offset #{@offset}" %>

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

@@ -13,7 +13,7 @@
     <code><%= job.consumer %></code>
 
     <% unless job.tags.empty? %>
-      <br/>
+      <br>
       <%== tags(job.tags) %>
     <% end %>
   </td>

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

@@ -12,7 +12,7 @@
     >
       <div class="turbo-progress-bar"></div>
 
-      <input id="main-drawer" type="checkbox" class="drawer-toggle" />
+      <input id="main-drawer" type="checkbox" class="drawer-toggle">
 
       <aside id="drawer-side" class="drawer-side z-10">
         <label for="main-drawer" class="drawer-overlay"></label>

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

@@ -10,7 +10,7 @@
           <th>Subscription group</th>
           <th><%== sort_link('Topic', :name) %></th>
           <th><%== sort_link(:active?) %></th>
-          <th></th>
+          <th class="options">Options</th>
         </tr>
       </thead>
       <tbody>

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

@@ -10,7 +10,7 @@
     <%= topic.active? %>
     </span>
   </td>
-  <td>
+  <td class="options">
     <%== link_button_primary_sm 'Details', root_path('routing', topic.id) %>
   </td>
 </tr>

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

@@ -12,15 +12,15 @@
     rel="stylesheet"
     href="<%= asset_path('stylesheets/libs/highlight_light.min.css') %>"
     class="highlight-light"
-    disabled="disabled"
-  />
+    disabled
+  >
 
   <link
     rel="stylesheet"
     href="<%= asset_path('stylesheets/libs/highlight_dark.min.css') %>"
     class="highlight-dark"
-    disabled="disabled"
-  />
+    disabled
+  >
 
   <link
     rel="stylesheet"
@@ -31,7 +31,7 @@
     <link
       rel="stylesheet"
       href="<%= asset_path('stylesheets/custom.css') %>"
-    />
+  >
   <% end %>
 
   <script

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

@@ -15,7 +15,7 @@
     <li>
       <a
         class="sidebar-nav-item menu-<%= nav_class(match: /\A\/(consumers|commands)/) %>"
-        href="<%= root_path('consumers') %>"
+        href="<%= consumers_path %>"
       >
         <%== icon(:cpu) %>
         <span class="sidebar-nav-item-label">Consumers</span>

data/lib/karafka/web/ui/views/shared/alerts/_error.erb

@@ -1,5 +1,5 @@
 <div class="alert alert-error" role="alert">
-  <%== icon :x_circle  %>
+  <%== icon :x_circle %>
   <span>
     <%== message %>
   </span>
@@ -8,7 +8,7 @@
 
   <% if allow_close %>
     <button type="button" class="close-alert" title="Close this error notice">
-      <%== icon :x_mark  %>
+      <%== icon :x_mark %>
     </button>
   <% end %>
 </div>

data/lib/karafka/web/ui/views/shared/alerts/_info.erb

@@ -8,7 +8,7 @@
 
   <% if allow_close %>
     <button type="button" class="close-alert" title="Close this info notice">
-      <%== icon :x_mark  %>
+      <%== icon :x_mark %>
     </button>
   <% end %>
 </div>

data/lib/karafka/web/ui/views/shared/alerts/_primary.erb

@@ -8,7 +8,7 @@
 
   <% if allow_close %>
     <button type="button" class="close-alert" title="Close this notice">
-      <%== icon :x_mark  %>
+      <%== icon :x_mark %>
     </button>
   <% end %>
 </div>

data/lib/karafka/web/ui/views/shared/alerts/_secondary.erb

@@ -8,7 +8,7 @@
 
   <% if allow_close %>
     <button type="button" class="close-alert" title="Close this notice notice">
-      <%== icon :x_mark  %>
+      <%== icon :x_mark %>
     </button>
   <% end %>
 </div>

data/lib/karafka/web/ui/views/shared/alerts/_success.erb

@@ -8,7 +8,7 @@
 
   <% if allow_close %>
     <button type="button" class="close-alert" title="Close this success notice">
-      <%== icon :x_mark  %>
+      <%== icon :x_mark %>
     </button>
   <% end %>
 </div>

data/lib/karafka/web/ui/views/shared/alerts/_warning.erb

@@ -1,5 +1,5 @@
 <div class="alert alert-warning" role="alert">
-  <%== icon :exclamation_triangle  %>
+  <%== icon :exclamation_triangle %>
   <span>
     <%== message %>
   </span>
@@ -8,7 +8,7 @@
 
   <% if allow_close %>
     <button type="button" class="close-alert" title="Close this warning notice">
-      <%== icon :x_mark  %>
+      <%== icon :x_mark %>
     </button>
   <% end %>
 </div>

data/lib/karafka/web/ui/views/shared/exceptions/not_allowed.erb

@@ -9,7 +9,7 @@
         <h1 class="text-8xl font-bold">403</h1>
 
         <p class="text-3xl mt-5">
-          <span class="text-red-500">Oops!</span> Not permitted.
+          <span class="text-error">Oops!</span> Not permitted.
         </p>
 
         <div class="mt-5">
@@ -20,14 +20,14 @@
           <p class="text-lg font-light mb-5">Please make sure, that:</p>
 
           <ul class="list-disc text-left text-lg mb-10 pl-5 font-light">
-            <li>You have visited the <a href="<%= root_path('status') %>" class="text-blue-500 underline">Status</a> page to troubleshoot any potential issues</li>
+            <li>You have visited the <a href="<%= root_path('status') %>" class="link link-primary">Status</a> page to troubleshoot any potential issues</li>
             <li>You are authorized to access the resource you requested</li>
             <li>Web UI configuration permits the action you requested</li>
           </ul>
 
           <p>
             <a href="<%= root_path %>" class="btn btn-primary mr-2 rounded-md py-1">Go Home</a>
-            <a href="<%= root_path('status') %>" class="btn btn-success text-white rounded-md">Status page</a>
+            <a href="<%= root_path('status') %>" class="btn btn-success rounded-md">Status page</a>
           </p>
         </div>
       </div>

data/lib/karafka/web/ui/views/shared/exceptions/not_found.erb

@@ -9,7 +9,7 @@
         <h1 class="text-8xl font-bold">404</h1>
 
         <p class="text-3xl mt-5">
-          <span class="text-red-500">Oops!</span> Page not found.
+          <span class="text-error">Oops!</span> Page not found.
         </p>
 
         <div class="mt-5">
@@ -20,9 +20,9 @@
           <p class="text-lg font-light mb-5">Please make sure, that:</p>
 
           <ul class="list-disc text-left text-lg mb-10 pl-5 font-light">
-            <li>You have visited the <a href="<%= root_path('status') %>" class="text-blue-500 underline">Status</a> page to troubleshoot any potential issues</li>
+            <li>You have visited the <a href="<%= root_path('status') %>" class="link link-primary">Status</a> page to troubleshoot any potential issues</li>
             <li>All the topics required by Karafka Web exist</li>
-            <li>You have used <code class="bg-gray-100 px-1 py-0.5 rounded-sm">bundle exec karafka-web migrate</code> to initialize the Web UI</li>
+            <li>You have used <code class="bg-base-200 px-1 py-0.5 rounded-sm">bundle exec karafka-web migrate</code> to initialize the Web UI</li>
             <li>You have a working connection with your Kafka cluster</li>
             <li>The resource you requested exists</li>
           </ul>
@@ -33,7 +33,7 @@
 
           <p>
             <a href="<%= root_path %>" class="btn btn-primary mr-2 rounded-md py-1">Go Home</a>
-            <a href="<%= root_path('status') %>" class="btn btn-success text-white rounded-md">Status page</a>
+            <a href="<%= root_path('status') %>" class="btn btn-success rounded-md">Status page</a>
           </p>
         </div>
       </div>