karafka-web 0.9.0 → 0.10.0.beta1

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

@@ -0,0 +1,391 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  .badge {
+    @apply rounded-md whitespace-nowrap mb-1;
+  }
+
+  .breadcrumbs-wrapper {
+    @apply col-span-12 mb-3;
+  }
+
+  .breadcrumbs {
+    @apply text-sm pt-0;
+  }
+
+  .custom-tab {
+    @apply border-b-2 py-4 px-2 text-sm hover:text-primary md:text-base;
+  }
+
+  .custom-tab.active {
+    @apply text-primary border-primary;
+  }
+
+  .custom-tab:hover {
+    @apply no-underline;
+  }
+
+  .custom-tab.disabled {
+    @apply text-gray-500;
+  }
+
+  .tab-container-wrapper {
+    @apply col-span-12 mb-9;
+  }
+
+  .tab-container {
+    @apply mb-3 flex flex-wrap gap-5 border-b sm:gap-10;
+  }
+
+  .tab-container span {
+    @apply hover:cursor-pointer;
+  }
+
+  .alert {
+    @apply rounded-md;
+  }
+
+  .alert-box {
+    @apply border rounded-md;
+  }
+
+  .alert-box-header {
+    @apply p-4 flex items-center justify-between rounded-t-md;
+  }
+
+  .alert-box-header span {
+    @apply ml-4;
+  }
+
+  .alert-box-header div {
+    @apply flex items-center;
+  }
+
+  .alert-box-content {
+    @apply p-4 rounded-b-lg bg-base-100;
+  }
+
+  .alert-box-warning {
+    @apply border-warning;
+  }
+
+  .alert-box-warning .alert-box-header {
+    @apply bg-warning;
+  }
+
+  .alert-box-success {
+    @apply border-success;
+  }
+
+  .alert-box-success .alert-box-header {
+    @apply bg-success;
+  }
+
+  .alert-box-info {
+    @apply border-info;
+  }
+
+  .alert-box-info .alert-box-header {
+    @apply bg-info;
+  }
+
+  .alert-box-error {
+    @apply border-error;
+  }
+
+  .alert-box-error .alert-box-header {
+    @apply bg-error;
+  }
+
+  .sidebar-nav {
+    @apply flex min-h-screen w-72 flex-col gap-2 overflow-y-auto bg-gray-800 text-white px-6 py-10;
+  }
+
+  .sidebar-nav-item {
+    @apply text-white visited:text-white active:text-white focus:text-white hover:bg-gray-700;
+  }
+
+  .sidebar-nav-item-active {
+    @apply text-primary border-primary;
+  }
+
+  .sidebar-nav-item.disabled {
+    @apply text-gray-500;
+  }
+
+  .data-table {
+    @apply table w-full bg-base-100 border border-gray-300 rounded rounded-md mb-5;
+  }
+
+  .data-table .badge {
+    @apply mt-1 badge-sm;
+  }
+
+  .data-table-wrapper {
+    @apply col-span-12 mb-3 overflow-x-auto;
+  }
+
+  [data-theme="corporate"] .data-table thead {
+    @apply bg-gray-100;
+  }
+
+  .data-table thead th {
+    @apply border border-gray-300 p-2;
+  }
+
+  .data-table thead tr {
+    @apply align-middle;
+  }
+
+  .data-table tbody tr {
+    @apply hover:bg-base-200;
+  }
+
+  [data-theme="corporate"] .data-table tbody tr {
+    @apply even:bg-gray-50;
+  }
+
+  .data-table tbody td {
+    @apply border border-gray-300 p-2;
+  }
+
+  .data-table td:has(.btn) {
+    @apply text-center;
+  }
+
+  .row-table {
+    @apply table w-full bg-base-100 border border-gray-300 rounded-md mb-5;
+  }
+
+  .row-table-wrapper {
+    @apply col-span-12 mb-3 overflow-x-auto;
+  }
+
+  [data-theme="corporate"] .row-table thead {
+    @apply bg-gray-100;
+  }
+
+  .row-table thead th {
+    @apply border border-gray-300 p-2;
+  }
+
+  .row-table thead tr {
+    @apply align-middle;
+  }
+
+  .row-table tbody tr {
+    @apply even:bg-base-200 hover:bg-base-300;
+  }
+
+  .row-table tbody td {
+    @apply border border-y-gray-300 p-2 border-x-gray-100;
+  }
+
+  .row-table tbody td:first-child {
+    @apply border-l-gray-300;
+  }
+
+  .row-table tbody td:last-child {
+    @apply border-r-gray-300;
+  }
+
+  .row-table .badge {
+    @apply mt-1 badge-sm;
+  }
+
+  .row-table td:has(.btn) {
+    @apply text-center;
+  }
+
+  .table_metadata {
+    @apply text-end text-gray-500 mb-3 text-sm;
+  }
+
+  .table_metadata .badge {
+    @apply badge-sm
+  }
+
+  .topic-tiles {
+    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4;
+  }
+
+  .topic-tile {
+    @apply bg-base-100 rounded-md border border-gray-300;
+  }
+
+  .topic-tile-body {
+    @apply p-2;
+  }
+
+  .topic-tile-text {
+    @apply mb-0 p-2;
+  }
+
+  .topic-tile-link {
+    @apply text-blue-500 hover:underline;
+  }
+
+  .btn {
+    @apply font-normal;
+  }
+
+  [data-theme="corporate"]
+  .btn-info, .btn-primary, .btn-error, .btn-success,
+  .alert-info, .alert-error, .alert-success,
+  .badge-info, .badge-primary, .badge-error, .badge-success, .badge-secondary,
+  .alert-box-info .alert-box-header, .alert-box-primary .alert-box-header,
+  .alert-box-error .alert-box-header, .alert-box-success .alert-box-header,
+  .alert-box-secondary .alert-box-header,
+  .btn-outline.btn-active.btn-primary, .btn-outline.btn-active.btn-secondary,
+  .btn-outline.btn-active.btn-info, .btn-outline.btn-active.btn-success,
+  .btn-outline.btn-active.btn-error {
+    @apply text-base-100;
+  }
+
+  [data-theme="corporate"]
+  .btn-outline.btn-primary, .btn-outline.btn-secondary, .btn-outline.btn-info,
+  .btn-outline.btn-success, .btn-outline.btn-error {
+    @apply hover:text-base-100;
+  }
+
+  .actions {
+    @apply flex items-center text-end text-gray-700 mb-6;
+  }
+
+  .btn-action {
+    @apply py-1 px-3 rounded-md text-sm hover:bg-gray-200 text-gray-500 hover:cursor-pointer;
+  }
+
+  .btn-action.active {
+    @apply text-base-content;
+  }
+
+  .h2 {
+    @apply text-xl text-left text-base-content mb-4 lg:font-light
+  }
+
+  .h3 {
+    @apply text-lg text-left text-base-content mb-4 lg:font-light
+  }
+
+  .grid-default {
+    @apply grid grid-cols-12 grid-rows-[min-content] gap-y-6 p-4 lg:gap-x-12 lg:p-10;
+  }
+
+  .grid-sub-5 {
+    @apply grid grid-cols-5 grid-rows-[min-content] gap-y-6 p-4 lg:gap-x-10 lg:p-10 lg:pb-0;
+  }
+
+  .text-muted {
+    @apply text-gray-500;
+  }
+
+  table .status-row-quiet td:first-child {
+    @apply border-l border-l-warning;
+  }
+
+  table .status-row-quieting td:first-child {
+    @apply border-l border-l-warning;
+  }
+
+  table .status-row-stopping td:first-child {
+    @apply border-l border-l-error;
+  }
+
+  table .status-row-stopped td:first-child {
+    @apply border-l border-l-error;
+  }
+
+  pre.code {
+    @apply text-sm border border-gray-300;
+  }
+
+  .card-metric {
+    @apply bg-base-100 p-3 border border-gray-300 rounded-md;
+  }
+
+  .card-metric h3 {
+    @apply text-lg mb-2;
+  }
+
+  .card-metric li {
+    @apply flex justify-between text-sm;
+  }
+
+  .card-metric .badge {
+    @apply badge-sm;
+  }
+
+  .card-support {
+    @apply bg-base-100 rounded-lg p-6 border border-gray-300;
+  }
+
+  .card-support h3 {
+    @apply text-2xl mb-4 flex items-center;
+  }
+
+  .card-support h3 span {
+    @apply ml-2;
+  }
+
+  .card-support a {
+    @apply text-blue-500 hover:underline;
+  }
+
+  .card-support p {
+    @apply mb-4;
+  }
+
+  .card-detail-container {
+    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-4 text-center;
+  }
+
+  .card-detail {
+    @apply card bg-base-100 border border-gray-300 rounded-md;
+  }
+
+  .card-detail-body {
+    @apply card-body flex flex-col items-center justify-center p-3;
+  }
+
+  .card-detail-body badge {
+    @apply mt-1 mb-1;
+  }
+
+  .card-summary-container {
+    @apply flex justify-center;
+  }
+
+  .card-summary {
+    @apply card bg-base-100 border border-gray-300 rounded-md p-1 w-full max-w-xs;
+  }
+
+  .card-summary-body {
+    @apply card-body p-2;
+  }
+
+  .card-summary-value {
+    @apply mb-0 text-lg;
+  }
+
+  .card-summary-title {
+    @apply text-gray-500;
+  }
+
+  .drawer-content a:hover:not(.btn):not(.custom-tab) {
+    @apply link;
+  }
+
+  .drawer-side > .drawer-overlay {
+    transition-duration: 0ms;
+  }
+  .drawer-side > *:not(.drawer-overlay) {
+    transition-duration: 0ms;
+  }
+}
+
+[data-theme="corporate"] .bg-base-200 {
+  background: #f5f6fe;
+}

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

@@ -1,11 +1,11 @@
-<li class="breadcrumb-item">
+<li>
   <a href="<%= root_path('cluster') %>">
     Cluster informations
   </a>
 </li>
 
 <% if current_path.include?('/brokers') %>
-  <li class="breadcrumb-item">
+  <li>
     <a href="<%= root_path('cluster', 'brokers') %>">
       Brokers
     </a>
@@ -13,7 +13,7 @@
 <% end %>
 
 <% if current_path.include?('/replication') %>
-  <li class="breadcrumb-item">
+  <li>
     <a href="<%= root_path('cluster', 'replication') %>">
       Replication
     </a>

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

@@ -1,27 +1,17 @@
-<div class="container">
-  <div class="row mb-4">
-    <div class="col-sm-12">
+<div class="tab-container-wrapper">
+  <div class="tab-container">
+    <a
+      href="<%= root_path('cluster', 'brokers') %>"
+      class="custom-tab <%= nav_class(include: 'brokers') %>"
+    >
+      Brokers
+    </a>
 
-      <ul class="nav nav-tabs">
-        <li class="nav-item">
-          <a
-            class="nav-link <%= nav_class(include: 'brokers') %>"
-            href="<%= root_path('cluster', 'brokers') %>"
-          >
-            Brokers
-          </a>
-        </li>
-
-        <li class="nav-item">
-          <a
-            class="nav-link <%= nav_class(include: 'replication') %>"
-            href="<%= root_path('cluster', 'replication') %>"
-          >
-            Replication
-          </a>
-        </li>
-      </ul>
-
-    </div>
+    <a
+      href="<%= root_path('cluster', 'replication') %>"
+      class="custom-tab <%= nav_class(include: 'replication') %>"
+    >
+      Replication
+    </a>
   </div>
 </div>

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

@@ -1,27 +1,25 @@
-<%== view_title('Cluster Informations', hr: true) %>
+<% view_title 'Cluster Informations' %>
 
 <%== partial 'cluster/tabs' %>
 
-<div class="container mb-5">
-  <div class="row">
-    <div class="col-lg-12 table-responsive">
-      <table class="processes bg-white table table-hover table-bordered table-striped">
-        <thead>
-          <tr class="align-middle">
-            <th><%== sort_link(:id) %></th>
-            <th><%== sort_link(:name) %></th>
-            <th><%== sort_link(:port) %></th>
-          </tr>
-        </thead>
-        <tbody>
-          <%==
-            each_partial(
-              @brokers,
-              'cluster/broker'
-            )
-          %>
-        </tbody>
-      </table>
-    </div>
+<div class="col-span-12 mb-3">
+  <div class="data-table-wrapper">
+    <table class="data-table">
+      <thead>
+        <tr>
+          <th><%== sort_link(:id) %></th>
+          <th><%== sort_link(:name) %></th>
+          <th><%== sort_link(:port) %></th>
+        </tr>
+      </thead>
+      <tbody>
+        <%==
+          each_partial(
+            @brokers,
+            'cluster/broker'
+          )
+        %>
+      </tbody>
+    </table>
   </div>
 </div>

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

@@ -1,37 +1,33 @@
-<%== view_title('Cluster Informations') %>
+<% view_title 'Cluster Informations' %>
 
 <%== partial 'cluster/tabs' %>
 
-<div class="container mb-5">
-  <div class="row">
-    <div class="col-lg-12">
-      <% if @partitions.empty? && params.current_page <= 1 %>
-        <%== partial 'cluster/no_partitions' %>
-      <% elsif @partitions.empty? %>
-        <%== partial 'shared/no_paginated_data' %>
-      <% else %>
-        <div class="table-responsive">
-          <table class="processes bg-white table table-hover table-bordered table-striped">
-            <thead>
-              <tr class="align-middle">
-                <th><%== sort_link(:topic_name) %></th>
-                <th><%== sort_link(:partition_id) %></th>
-                <th><%== sort_link(:leader) %></th>
-                <th><%== sort_link(:replica_count) %></th>
-                <th><%== sort_link('In sync brokers', :in_sync_replica_brokers) %></th>
-              </tr>
-            </thead>
-            <tbody>
-              <%==
-                each_partial(
-                  @partitions,
-                  'cluster/partition'
-                )
-              %>
-            </tbody>
-          </table>
-        </div>
-      <% end %>
+<div class="col-span-12 mb-3">
+  <% if @partitions.empty? && params.current_page <= 1 %>
+    <%== partial 'cluster/no_partitions' %>
+  <% elsif @partitions.empty? %>
+    <%== partial 'shared/no_paginated_data' %>
+  <% else %>
+    <div class="data-table-wraper">
+      <table class="data-table">
+        <thead>
+          <tr>
+            <th><%== sort_link(:topic_name) %></th>
+            <th><%== sort_link(:partition_id) %></th>
+            <th><%== sort_link(:leader) %></th>
+            <th><%== sort_link(:replica_count) %></th>
+            <th><%== sort_link('In sync brokers', :in_sync_replica_brokers) %></th>
+          </tr>
+        </thead>
+        <tbody>
+          <%==
+            each_partial(
+              @partitions,
+              'cluster/partition'
+            )
+          %>
+        </tbody>
+      </table>
     </div>
-  </div>
+  <% end %>
 </div>

data/lib/karafka/web/ui/views/consumers/_assignments_badges.erb

@@ -10,7 +10,7 @@
   <% sg_topics.each do |topic_name, partitions| %>
     <% partitions_list = partitions.join(', ') %>
     <span
-      class="badge bg-secondary badge-topic"
+      class="badge badge-secondary"
       title="Consumer group: <%= consumer_group.id %>, partitions: <%= partitions_list%>"
     >
       <%= topic_name %>:

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

@@ -0,0 +1,5 @@
+<li>
+  <a href="<%= root_path('consumers/overview') %>">
+    Consumers
+  </a>
+</li>

data/lib/karafka/web/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,19 +20,17 @@
   </td>
 
   <td>
-    <span class="badge bg-primary badge-topic">
-      <%= format_memory process.memory_usage %>
-    </span>
+    <%== badge_primary_sm format_memory process.memory_usage %>
   </td>
 
   <td>
-    <span class="badge bg-primary badge-topic">
+    <span class="badge badge-primary">
       <%= process.workers %> /
       <%= process.busy %>
     </span>
   </td>
 
   <td>
-    <%= process.lag_stored %>
+    <%= process.lag_hybrid %>
   </td>
 </tr>

data/lib/karafka/web/ui/views/consumers/_no_consumers.erb

@@ -1,9 +1,3 @@
-<div class="alert alert-info" role="alert">
-  <p>
-    There are no Karafka consumer processes actively reporting to the Web UI.
-  </p>
-
-  <p class="mb-0">
+<% alert_box_info 'There are no Karafka consumer processes actively reporting to the Web UI.' do %>
     If you are sure you are running at least one <code>karafka server</code> instance, please make sure that it can report to the <code><%= Karafka::Web.config.topics.consumers.reports %></code> topic.
-  </p>
-</div>
+<% end %>