karafka-web 0.9.0 → 0.10.0.beta1

data/lib/karafka/web/pro/ui/views/consumers/consumer/_metrics.erb

@@ -1,145 +1,126 @@
-<div class="container mb-5">
-  <div class="row" id="metrics">
-    <div class="col-lg-12">
-      <div class="card-group">
-        <div class="card">
-          <div class="card-body">
-            <h5 class="card-title">Process</h5>
-            <p class="card-text">
-            <ul style="list-style: square !important;">
-              <li class="align-items-center d-flex justify-content-between">
-                Status:
-                <span class="badge <%= status_bg @process.status %>">
-                  <%= @process.status %>
-                </span>
-              </li>
-              <li class="align-items-center d-flex justify-content-between">
-                Started:
-                <span class="badge bg-secondary">
-                  <%== relative_time @process.started_at %>
-                </span>
-              </li>
+<div id="metrics" class="w-full">
+  <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 gap-4 mb-6">
+    <div class="card-metric">
+      <h3>Process</h3>
+      <ul>
+        <li>
+          Status:
 
-              <li class="align-items-center d-flex justify-content-between">
-                State from:
-                <span class="badge bg-secondary">
-                  <%== relative_time @process.dispatched_at %>
-                </span>
-              </li>
-            </ul>
-            </p>
+          <span class="badge <%= status_badge @process.status %>">
+            <%= @process.status %>
+          </span>
+        </li>
 
-            <% unless @process.tags.empty? %>
-              <p class="mb-0 text-end">
-                <%== tags(@process.tags) %>
-              </p>
-            <% end %>
-          </div>
-        </div>
-        <div class="card">
-          <div class="card-body">
-            <h5 class="card-title">Utilization</h5>
-            <p class="card-text">
-            <ul style="list-style: square !important;">
-              <li class="align-items-center d-flex justify-content-between">
-                Workers:
-                <span class="badge bg-primary">
-                  <%= @process.workers %>
-                </span>
-              </li>
-              <li class="align-items-center d-flex justify-content-between">
-                Utilization:
-                <span class="badge bg-primary">
-                  <%= @process.utilization.round(2) %>%
-                </span>
-              </li>
-              <li class="align-items-center d-flex justify-content-between">
-                CPUs:
-                <span class="badge bg-primary">
-                  <%= @process.cpus %>
-                </span>
-              </li>
-              <li class="align-items-center d-flex justify-content-between">
-                CPU usage:
-                <% @process.cpu_usage.each_with_index do |usage, i| %>
-                  <span class="badge bg-primary">
-                    <%= usage %>
-                  </span>
+        <li>
+          Started:
+          <span class="badge badge-secondary">
+            <%== relative_time @process.started_at %>
+          </span>
+        </li>
 
-                  <%= i < 2 ? '/' : '' %>
-                <% end %>
-              </li>
-            </ul>
-            </p>
-          </div>
-        </div>
-        <div class="card">
-          <div class="card-body">
-            <h5 class="card-title">Memory usage</h5>
-            <p class="card-text">
-            <ul style="list-style: square !important;">
-              <li class="align-items-center d-flex justify-content-between">
-                RSS:
-                <span class="badge bg-primary">
-                  <%= format_memory @process.memory_usage %>
-                </span>
-              </li>
-              <li class="align-items-center d-flex justify-content-between">
-                OS memory used:
-                <span class="badge bg-primary">
-                  <%= format_memory @process.memory_total_usage %>
-                </span>
-              </li>
-              <li class="align-items-center d-flex justify-content-between">
-                OS memory available:
-                <span class="badge bg-primary">
-                  <%= format_memory @process.memory_size %>
-                </span>
-              </li>
-            </ul>
-            </p>
-          </div>
-        </div>
-        <div class="card">
-          <div class="card-body">
-            <h5 class="card-title">Versions</h5>
-            <p class="card-text text-center">
-              <span class="badge bg-secondary">
-                <%= @process.ruby %>
-              </span>
+        <li>
+          State from:
+          <span class="badge badge-secondary">
+            <%== relative_time @process.dispatched_at %>
+          </span>
+        </li>
+      </ul>
 
-              <span class="badge bg-secondary">
-                karafka
-                <%= @process.karafka %>
-              </span>
+      <% unless @process.tags.empty? %>
+        <p class="mt-4 text-right">
+          <%== tags(@process.tags) %>
+        </p>
+      <% end %>
+    </div>
+
+    <div class="card-metric">
+      <h3>Utilization</h3>
+      <ul>
+        <li>
+          Workers:
+          <span class="badge badge-primary">
+            <%= @process.workers %>
+          </span>
+        </li>
+        <li>
+          Utilization:
+          <span class="badge badge-primary">
+            <%= @process.utilization.round(2) %>%
+          </span>
+        </li>
+        <li>
+          CPUs:
+          <span class="badge badge-primary">
+            <%= @process.cpus %>
+          </span>
+        </li>
+        <li>
+          CPU usage:
+          <% @process.cpu_usage.each_with_index do |usage, i| %>
+            <span class="badge badge-primary">
+              <%= usage %>
+            </span>
+            <%= i < 2 ? '/' : '' %>
+          <% end %>
+        </li>
+      </ul>
+    </div>
+
+    <div class="card-metric">
+      <h3>Memory usage</h3>
+      <ul>
+        <li>
+          RSS:
+          <span class="badge badge-primary">
+            <%= format_memory @process.memory_usage %>
+          </span>
+        </li>
+        <li>
+          OS memory used:
+          <span class="badge badge-primary">
+            <%= format_memory @process.memory_total_usage %>
+          </span>
+        </li>
+        <li>
+          OS memory available:
+          <span class="badge badge-primary">
+            <%= format_memory @process.memory_size %>
+          </span>
+        </li>
+      </ul>
+    </div>
+
+    <div class="card-metric">
+      <h3>Versions</h3>
+
+      <div class="text-center">
+        <span class="badge badge-secondary">
+          <%= @process.ruby %>
+        </span>
+
+        <span class="badge badge-secondary">
+          karafka <%= @process.karafka %>
+        </span>
 
-              <span class="badge bg-secondary">
-                karafka-web
-                <%= @process.karafka_web %>
-              </span>
+        <span class="badge badge-secondary">
+          karafka-web <%= @process.karafka_web %>
+        </span>
 
-              <span class="badge bg-secondary">
-                karafka-core
-                <%= @process.karafka_core %>
-              </span>
+        <span class="badge badge-secondary">
+          karafka-core <%= @process.karafka_core %>
+        </span>
 
-              <span class="badge bg-secondary">
-                rdkafka
-                <%= @process.rdkafka %>
-              </span>
+        <span class="badge badge-secondary">
+          rdkafka <%= @process.rdkafka %>
+        </span>
 
-              <span class="badge bg-secondary">
-                librdkafka
-                <%= @process.librdkafka %>
-              </span>
+        <span class="badge badge-secondary">
+          librdkafka <%= @process.librdkafka %>
+        </span>
 
-              <span class="badge bg-secondary">
-                waterdrop
-                <%= @process.waterdrop %>
-              </span>
-            </p>
-          </div>
-        </div>
+        <span class="badge badge-secondary">
+          waterdrop <%= @process.waterdrop %>
+        </span>
       </div>
     </div>
   </div>

data/lib/karafka/web/pro/ui/views/consumers/consumer/_partition.erb

@@ -1,4 +1,4 @@
-<tr class="align-middle <%= lso_risk_state_bg(partition) %>">
+<tr class="<%= lso_risk_state_bg(partition) %>">
   <td>
     <%= partition.id %>
   </td>
@@ -6,7 +6,7 @@
     <%== lag_with_label partition.lag_hybrid %>
   </td>
   <td>
-    <span class="badge <%= lag_trend_bg(partition.lag_hybrid_d) %>">
+    <span class="badge <%= lag_trend_badge(partition.lag_hybrid_d) %>">
       <%= partition.lag_hybrid_d %>
     </span>
   </td>
@@ -21,7 +21,7 @@
     <%== offset_with_label topic.name, partition.id, partition.stored_offset %>
   </td>
   <td>
-    <span class="badge <%= kafka_state_bg(partition.fetch_state) %> mt-1 mb-1">
+    <span class="badge <%= kafka_state_badge(partition.fetch_state) %>">
       <%= partition.fetch_state %>
     </span>
   </td>
@@ -29,7 +29,7 @@
     <%== poll_state_with_change_time_label(partition.poll_state, partition.poll_state_ch) %>
   </td>
   <td>
-    <span class="badge bg-success <%= lso_risk_state_bg(partition) %> bg-opacity-100">
+    <span class="badge badge-success <%= lso_risk_state_badge(partition) %>">
       <%= partition.lso_risk_state %>
     </span>
   </td>

data/lib/karafka/web/pro/ui/views/consumers/consumer/_stopped.erb

@@ -1,10 +1,7 @@
-<div class="container mb-4">
-  <div class="row">
-    <div class="col-lg-12">
-      <div class="alert alert-danger" role="alert">
-        This process has been stopped.
-        The state presented here shows the last report available.
-      </div>
-    </div>
-  </div>
+<div class="mb-6">
+  <%==
+    alert_error(
+      'This process has been stopped. The state presented here shows the last report available.'
+    )
+  %>
 </div>

data/lib/karafka/web/pro/ui/views/consumers/consumer/_subscription_group.erb

@@ -1,145 +1,135 @@
-<div class="row mb-4">
-  <div class="col-sm-12">
-    <h6 class="mb-4">
-      <%= consumer_group.id %> /
-      <%= subscription_group.id %>
-    </h6>
+<h2 class="h2 mb-3">
+  <%= consumer_group.id %> /
+  <%= subscription_group.id %>
+</h2>
 
-    <div class="card-group text-center">
-      <div class="card">
-        <div class="card-body d-flex flex-column align-items-center justify-content-center p-2">
-          State:&nbsp;
-          <span class="badge <%= kafka_state_bg(subscription_group[:state][:state]) %> mt-1 mb-1">
-            <%= subscription_group[:state][:state] %>
-          </span>
-        </div>
-      </div>
+<div class="card-detail-container">
+  <div class="card-detail">
+    <div class="card-detail-body">
+      State
+      <span class="badge badge-sm <%= kafka_state_badge(subscription_group[:state][:state]) %>">
+        <%= subscription_group[:state][:state] %>
+      </span>
+    </div>
+  </div>
 
-      <div class="card">
-        <div class="card-body d-flex flex-column align-items-center justify-content-center p-2">
-          Join state:&nbsp;
-          <span class="badge <%= kafka_state_bg(subscription_group.join_state) %> mt-1 mb-1">
-            <%= subscription_group.join_state %>
-          </span>
-        </div>
-      </div>
+  <div class="card-detail">
+    <div class="card-detail-body">
+      Join state
 
-      <div class="card">
-        <div class="card-body d-flex flex-column align-items-center justify-content-center p-2">
-          State change:&nbsp;
-          <span class="badge bg-secondary mt-1 mb-1">
-            <%==
-              relative_time(
-                Time.at(@process.dispatched_at) - (subscription_group.stateage / 1_000.0)
-              )
-            %>
-          </span>
-        </div>
-      </div>
+      <span class="badge badge-sm <%= kafka_state_badge(subscription_group.join_state) %>">
+        <%= subscription_group.join_state %>
+      </span>
+    </div>
+  </div>
 
-      <div class="card">
-        <div class="card-body d-flex flex-column align-items-center justify-content-center p-2">
-          Last Poll:&nbsp;
-          <span class="badge bg-secondary mt-1 mb-1">
-            <%==
-              relative_time(
-                Time.at(@process.dispatched_at) - (subscription_group.poll_age / 1_000.0)
-              )
-            %>
-          </span>
-        </div>
-      </div>
+  <div class="card-detail">
+    <div class="card-detail-body">
+      State change
+      <%==
+        badge_secondary_sm(
+          relative_time(
+            Time.at(@process.dispatched_at) - (subscription_group.stateage / 1_000.0)
+          )
+        )
+      %>
+    </div>
+  </div>
+
+  <div class="card-detail">
+    <div class="card-detail-body">
+      Last Poll
+      <%==
+        badge_secondary_sm(
+          relative_time(
+            Time.at(@process.dispatched_at) - (subscription_group.poll_age / 1_000.0)
+          )
+        )
+      %>
+    </div>
+  </div>
 
-      <div class="card">
-        <div class="card-body d-flex flex-column align-items-center justify-content-center p-2">
-          Last rebalance:&nbsp;
-          <span class="badge bg-secondary mt-1 mb-1">
-            <%==
-              relative_time(
-                Time.at(@process.dispatched_at) - (subscription_group.rebalance_age / 1_000.0)
-              )
-            %>
-          </span>
-        </div>
-      </div>
+  <div class="card-detail">
+    <div class="card-detail-body">
+      Last rebalance
+      <%==
+        badge_secondary_sm(
+          relative_time(
+            Time.at(@process.dispatched_at) - (subscription_group.rebalance_age / 1_000.0)
+          )
+        )
+      %>
+    </div>
+  </div>
 
-      <div class="card">
-        <div class="card-body d-flex flex-column align-items-center justify-content-center p-2">
-          Rebalance count:&nbsp;
-          <span class="badge bg-secondary mt-1 mb-1">
-            <%= subscription_group.rebalance_cnt %>
-          </span>
-        </div>
-      </div>
+  <div class="card-detail">
+    <div class="card-detail-body">
+      Rebalance count
+      <%== badge_secondary_sm(subscription_group.rebalance_cnt) %>
     </div>
   </div>
+</div>
 
-  <span class="text-end mt-3">
-    <small>
-      Last rebalance reason:
+<div class="text-right mt-3 mb-4">
+  <small>
+    Last rebalance reason:
 
-      <% if subscription_group.rebalance_reason.empty? %>
-        Unknown
-      <% else %>
-        <%= subscription_group.rebalance_reason %>
-      <% end %>
-    </small>
-  </span>
+    <% if subscription_group.rebalance_reason.empty? %>
+      Unknown
+    <% else %>
+      <%= subscription_group.rebalance_reason %>
+    <% end %>
+  </small>
 </div>
 
+
 <% if subscription_group.topics.empty? %>
-  <div class="row mb-4">
-    <div class="col-lg-12">
-      <%==
-        alert_info('This process does not consume any messages from any topics of this subscription group.')
-      %>
-    </div>
+  <div class="mb-6">
+    <%==
+      alert_info('This process does not consume any messages from any topics of this subscription group.')
+    %>
   </div>
 <% else %>
   <% subscription_group.topics.each do |topic| %>
-    <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 colspan="10">
-                <h5 class="mb-0">
-                  <%= topic.name %>
-                </h5>
-              </th>
-            </tr>
-            <tr class="align-middle">
-              <th rowspan="2"><%== sort_link('Partition', :id) %></th>
-              <th colspan="2" class="text-center">Lag</th>
-              <th colspan="2" class="text-center">Offsets</th>
-              <th colspan="10" class="text-center">States</th>
-            </tr>
-            <tr class="align-middle">
-              <th><%== sort_link(:lag_hybrid) %></th>
-              <th><%== sort_link('Trend', :lag_hybrid_d) %></th>
-              <th><%== sort_link(:committed_offset) %></th>
-              <th><%== sort_link(:stored_offset) %></th>
-              <th><%== sort_link(:fetch_state) %></th>
-              <th><%== sort_link(:poll_state) %></th>
-              <th><%== sort_link(:lso_risk_state) %></th>
-            </tr>
-          </thead>
-          <tbody>
-              <% topic.partitions.each do |partition| %>
-                <%==
-                  partial(
-                    'consumers/consumer/partition',
-                    locals: {
-                      topic: topic,
-                      partition: partition,
-                      subscription_group: subscription_group
-                    }
-                  )
-                %>
-              <% end %>
-          </tbody>
-        </table>
-      </div>
+    <div class="data-table-wrapper">
+      <table class="data-table">
+        <thead>
+          <tr>
+            <th colspan="10">
+              <%= topic.name %>
+            </th>
+          </tr>
+          <tr>
+            <th rowspan="2"><%== sort_link('Partition', :id) %></th>
+            <th colspan="2">Lag</th>
+            <th colspan="2">Offsets</th>
+            <th colspan="10">States</th>
+          </tr>
+          <tr>
+            <th><%== sort_link(:lag_hybrid) %></th>
+            <th><%== sort_link('Trend', :lag_hybrid_d) %></th>
+            <th><%== sort_link(:committed_offset) %></th>
+            <th><%== sort_link(:stored_offset) %></th>
+            <th><%== sort_link(:fetch_state) %></th>
+            <th><%== sort_link(:poll_state) %></th>
+            <th><%== sort_link(:lso_risk_state) %></th>
+          </tr>
+        </thead>
+        <tbody>
+            <% topic.partitions.each do |partition| %>
+              <%==
+                partial(
+                  'consumers/consumer/partition',
+                  locals: {
+                    topic: topic,
+                    partition: partition,
+                    subscription_group: subscription_group
+                  }
+                )
+              %>
+            <% end %>
+        </tbody>
+      </table>
     </div>
   <% end %>
 <% end %>

data/lib/karafka/web/pro/ui/views/consumers/consumer/_tabs.erb

@@ -1,36 +1,31 @@
-<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('consumers', @process.id, 'subscriptions') %>"
+      class="custom-tab <%= nav_class(include: 'subscriptions') %>"
+    >
+      Subscriptions (<%= @process.subscribed_partitions_count %>)
+    </a>
 
-      <ul class="nav nav-tabs">
-        <li class="nav-item">
-          <a class="nav-link <%= nav_class(include: 'subscriptions') %>" href="<%= root_path('consumers', @process.id, 'subscriptions') %>">
-            Subscriptions
-            (<%= @process.subscribed_partitions_count %>)
-          </a>
-        </li>
+    <a
+      href="<%= root_path('consumers', @process.id, 'jobs', 'running') %>"
+      class="custom-tab <%= nav_class(include: 'jobs/running') %>"
+    >
+      Running jobs (<%= @process.jobs.running.count %>)
+    </a>
 
-        <li class="nav-item">
-          <a class="nav-link <%= nav_class(include: 'jobs/running') %>" href="<%= root_path('consumers', @process.id, 'jobs', 'running') %>">
-            Running jobs
-            (<%= @process.jobs.running.count %>)
-          </a>
-        </li>
+    <a
+      href="<%= root_path('consumers', @process.id, 'jobs', 'pending') %>"
+      class="custom-tab <%= nav_class(include: 'jobs/pending') %>"
+    >
+      Pending jobs (<%= @process.jobs.pending.count %>)
+    </a>
 
-        <li class="nav-item">
-          <a class="nav-link <%= nav_class(include: 'jobs/pending') %>" href="<%= root_path('consumers', @process.id, 'jobs', 'pending') %>">
-            Pending jobs
-            (<%= @process.jobs.pending.count %>)
-          </a>
-        </li>
-
-        <li class="nav-item">
-          <a class="nav-link <%= nav_class(include: 'details') %>" href="<%= root_path('consumers', @process.id, 'details') %>">
-            Details
-          </a>
-        </li>
-      </ul>
-
-    </div>
+    <a
+      href="<%= root_path('consumers', @process.id, 'details') %>"
+      class="custom-tab <%= nav_class(include: 'details') %>"
+    >
+      Details
+    </a>
   </div>
 </div>