karafka-web 0.9.1 → 0.10.0.beta1

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

@@ -1,81 +1,70 @@
-<div id="summary" class="container text-center mb-5">
-  <div class="row">
-
-    <div class="col-lg-2 offset-lg-1 col-md-4 col-sm-6">
-      <div class="card mb-0">
-        <div class="card-body">
-          <p class="card-text">
-            <div class="stat mb-1">
+<div id="summary" class="col-span-12">
+  <div class="mb-5 px-4 lg:px-10 text-center">
+    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-10 justify-center mb-10">
+      <div class="card-summary-container">
+        <div class="card-summary">
+          <div class="card-summary-body">
+            <div class="card-summary-value">
               <%= @counters.processes %>
             </div>
-            <div class="desc">
+            <div class="card-summary-title">
               Processes
             </div>
-          </p>
+          </div>
         </div>
       </div>
-    </div>
 
-    <div class="col-lg-2 col-md-4 col-sm-6">
-      <div class="card mb-0">
-        <div class="card-body">
-          <p class="card-text">
-            <div class="stat mb-1">
+      <div class="card-summary-container">
+        <div class="card-summary">
+          <div class="card-summary-body">
+            <div class="card-summary-value">
               <%= @counters.workers %>
             </div>
-            <div class="desc">
+            <div class="card-summary-title">
               Workers
             </div>
-          </p>
+          </div>
         </div>
       </div>
-    </div>
 
-    <div class="col-lg-2 col-md-4 col-sm-6 mt-sm-4 offset-lg-0 mt-lg-0 mt-md-0">
-      <div class="card mb-0">
-        <div class="card-body">
-          <p class="card-text">
-            <div class="stat mb-1">
+      <div class="card-summary-container">
+        <div class="card-summary">
+          <div class="card-summary-body">
+            <div class="card-summary-value">
               <%= @counters.listeners.fetch(:active) %>
             </div>
-            <div class="desc">
+            <div class="card-summary-title">
               Active Listeners
             </div>
-          </p>
+          </div>
         </div>
       </div>
-    </div>
 
-    <div class="col-lg-2 col-md-4 mt-md-4 col-sm-6 offset-md-2 mt-sm-4 offset-lg-0 mt-lg-0 mt-md-0">
-      <div class="card mb-0">
-        <div class="card-body">
-          <p class="card-text">
-            <div class="stat mb-1">
-              <%= @counters.utilization.round(2) %>
-              %
+      <div class="card-summary-container">
+        <div class="card-summary">
+          <div class="card-summary-body">
+            <div class="card-summary-value">
+              <%= @counters.utilization.round(2) %> %
             </div>
-            <div class="desc">
+            <div class="card-summary-title">
               Utilization
             </div>
-          </p>
+          </div>
         </div>
       </div>
-    </div>
 
-    <div class="col-lg-2 col-md-4 mt-md-4 col-sm-6 mt-sm-4 offset-sm-3 offset-lg-0 mt-lg-0 mt-md-0 offset-md-0">
-      <div class="card mb-0">
-        <div class="card-body">
-          <p class="card-text">
-            <div class="stat mb-1">
+      <div class="card-summary-container">
+        <div class="card-summary">
+          <div class="card-summary-body">
+            <div class="card-summary-value">
               <%= format_memory @counters.rss %>
             </div>
-            <div class="desc">
+            <div class="card-summary-title">
               RSS
             </div>
-          </p>
+          </div>
         </div>
       </div>
     </div>
-
   </div>
 </div>

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

@@ -0,0 +1,35 @@
+<div class="tab-container-wrapper">
+  <div class="tab-container">
+    <a
+      href="<%= root_path('consumers', 'overview') %>"
+      class="custom-tab <%= nav_class(include: 'overview') %>"
+      title="Pro Feature"
+    >
+      Overview
+    </a>
+
+    <a
+      href="<%= root_path('consumers', 'performance') %>"
+      class="custom-tab disabled <%= nav_class(include: 'performance') %>"
+      title="Pro Feature"
+    >
+      Performance
+    </a>
+
+    <a
+      href="<%= root_path('consumers', 'controls') %>"
+      class="custom-tab disabled <%= nav_class(include: 'controls') %>"
+      title="Pro Feature"
+    >
+      Controls
+    </a>
+
+    <a
+      href="<%= root_path('commands') %>"
+      class="custom-tab disabled <%= nav_class(include: 'commands') %>"
+      title="Pro Feature"
+    >
+      Commands
+    </a>
+  </div>
+</div>

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

@@ -1,37 +1,35 @@
-<%== partial 'consumers/counters' %>
+<% view_title 'Consumers' %>
+
 <%== partial 'consumers/summary' %>
+<%== partial 'consumers/tabs' %>
 
-<div class="container">
-  <div class="row">
-    <div class="col-sm-12">
-      <% if @processes.empty? && params.current_page <= 1 %>
-        <%== partial 'consumers/no_consumers' %>
-      <% elsif @processes.empty? %>
-        <%== partial 'shared/no_paginated_data' %>
-      <% 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><%== sort_link(:id) %></th>
-                <th class="col-sm-2"><%== sort_link(:started_at, rev: true) %></th>
-                <th class="col-sm-1">Memory</th>
-                <th class="col-sm-1">Utilization</th>
-                <th class="col-sm-1"><%== sort_link(:lag_hybrid) %></th>
-              </tr>
-            </thead>
-            <tbody>
-              <%==
-                render_each(
-                  @processes,
-                  'consumers/_consumer',
-                  local: :process
-                )
-              %>
-            </tbody>
-          </table>
-        </div>
-      <% end %>
+<div class="col-span-12">
+  <% if @processes.empty? && params.current_page <= 1 %>
+    <%== partial 'consumers/no_consumers' %>
+  <% elsif @processes.empty? %>
+    <%== partial 'shared/no_paginated_data' %>
+  <% else %>
+    <div class="data-table-wrapper">
+      <table class="data-table">
+        <thead>
+          <tr>
+            <th><%== sort_link(:id) %></th>
+            <th class="col-sm-2"><%== sort_link(:started_at, rev: true) %></th>
+            <th class="col-sm-1">Memory</th>
+            <th class="col-sm-1">Utilization</th>
+            <th class="col-sm-1"><%== sort_link(:lag_hybrid) %></th>
+          </tr>
+        </thead>
+        <tbody>
+          <%==
+            render_each(
+              @processes,
+              'consumers/_consumer',
+              local: :process
+            )
+          %>
+        </tbody>
+      </table>
     </div>
-  </div>
+  <% end %>
 </div>

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

@@ -0,0 +1,76 @@
+<div id="refreshable" class="col-span-12 mb-10">
+  <div class="card bg-base-100 border border-gray-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">
+          <li class="p-1">
+            <div class="count mb-1 text-md">
+              <%= number_with_delimiter @counters.messages, ' ' %>
+            </div>
+            <div class="desc text-gray-500">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>
+          </li>
+          <li class="p-1">
+            <a href="<%= root_path('jobs/running') %>" class="hover:text-blue-600">
+              <div class="count mb-1 text-md">
+                <%= number_with_delimiter @counters.jobs, ' ' %>
+              </div>
+              <div class="desc text-gray-500">Jobs</div>
+            </a>
+          </li>
+          <li class="p-1">
+            <a href="<%= root_path('health/lags') %>" class="hover:text-blue-600">
+              <div class="count mb-1 text-md">
+                <%= number_with_delimiter @counters.lag_hybrid, ' ' %>
+              </div>
+              <div class="desc text-gray-500">Total lag</div>
+            </a>
+          </li>
+          <li class="p-1">
+            <a href="<%= root_path('jobs/running') %>" class="hover:text-blue-600">
+              <div class="count mb-1 text-md">
+                <%= number_with_delimiter @counters.busy, ' ' %>
+              </div>
+              <div class="desc text-gray-500">Running</div>
+            </a>
+          </li>
+          <li class="p-1">
+            <a href="<%= root_path('jobs/pending') %>" class="hover:text-blue-600">
+              <div class="count mb-1 text-md">
+                <%= number_with_delimiter @counters.pending, ' ' %>
+              </div>
+              <div class="desc text-gray-500">Pending</div>
+            </a>
+          </li>
+          <li class="p-1">
+            <a href="<%= root_path('errors') %>" class="hover:text-blue-600">
+              <div class="count mb-1 text-md">
+                <%= number_with_delimiter @counters.errors, ' ' %>
+              </div>
+              <div class="desc text-gray-500">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>
+          </li>
+          <li class="p-1">
+            <a href="<%= root_path('dlq') %>" class="hover:text-blue-600">
+              <div class="count mb-1 text-md">
+                <%= number_with_delimiter @counters.dead, ' ' %>
+              </div>
+              <div class="desc text-gray-500">Dead</div>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -1,3 +1,7 @@
-<div class="mt-3">
-  <%== partial 'shared/feature_pro' %>
+<div class="alert alert-info bg-white mt-0 mb-6">
+  <%== icon(:info_circle) %>
+  <p>
+    This feature is available only to <a target="_blank" href="https://karafka.io/#become-pro">Pro</a>
+    users.
+  </p>
 </div>

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

@@ -1,15 +1,3 @@
-<div class="container">
-  <div class="row">
-    <div class="col-sm-12">
-      <div class="alert alert-info" role="alert">
-        <p>
-          There needs to be more data to draw meaningful graphs.
-        </p>
-
-        <p class="mb-0">
-          If you are sure you are running at least one <code>karafka server</code> instance and you do not see charts in a few minutes, please ensure that it can report to the <code><%= Karafka::Web.config.topics.consumers.reports %></code> topic and that Web-UI is correctly installed.
-        </p>
-      </div>
-    </div>
-  </div>
-</div>
+<% alert_box_info('There needs to be more data to draw meaningful graphs.') do %>
+  If you are sure you are running at least one <code>karafka server</code> instance and you do not see charts in a few minutes, please ensure that it can report to the <code><%= Karafka::Web.config.topics.consumers.reports %></code> topic and that Web-UI is correctly installed.
+<% end %>

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

@@ -1,36 +1,36 @@
-<div class="container">
-  <div class="row">
-    <div class="col-sm-12 text-end">
-      <div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
+<div class="col-span-12">
+  <div class="container mx-auto">
+    <div class="flex justify-end">
+      <div class="btn-group">
         <%
           path = root_path('dashboard?range=seconds')
-          active = params.current_range == :seconds ? 'active' : false
+          active = params.current_range == :seconds ? 'btn-active' : ''
         %>
-        <a type="button" href="<%= path %>" class="btn btn-outline-primary <%= active %>">
+        <a href="<%= path %>" class="btn btn-outline btn-primary btn-sm <%= active %>">
           5 minutes
         </a>
 
         <%
           path = root_path('dashboard?range=minutes')
-          active = params.current_range == :minutes ? 'active' : false
+          active = params.current_range == :minutes ? 'btn-active' : ''
         %>
-        <a type="button" href="<%= path %>" class="btn btn-outline-primary <%= active %>">
+        <a href="<%= path %>" class="btn btn-outline btn-primary btn-sm <%= active %>">
           1 hour
         </a>
 
         <%
           path = root_path('dashboard?range=hours')
-          active = params.current_range == :hours ? 'active' : false
+          active = params.current_range == :hours ? 'btn-active' : ''
         %>
-        <a type="button" href="<%= path %>" class="btn btn-outline-primary <%= active %>">
+        <a href="<%= path %>" class="btn btn-outline btn-primary btn-sm <%= active %>">
           24 hours
         </a>
 
         <%
           path = root_path('dashboard?range=days')
-          active = params.current_range == :days ? 'active' : false
+          active = params.current_range == :days ? 'btn-active' : ''
         %>
-        <a type="button" href="<%= path %>" class="btn btn-outline-primary <%= active %>">
+        <a href="<%= path %>" class="btn btn-outline btn-primary btn-sm <%= active %>">
           7 days
         </a>
       </div>

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

@@ -1,3 +1,5 @@
+<% view_title 'Dashboard' %>
+
 <%
   # Generates a nice set of semi-random data that does not change more often than once every
   # 24 hours not to make OSS users angry
@@ -8,72 +10,98 @@
   end
 %>
 
-<%== partial 'consumers/counters' %>
+<%== partial 'dashboard/counters' %>
 
 <% if @aggregated.sufficient? %>
   <%== partial 'dashboard/ranges_selector' %>
 
-  <div class="container">
-    <div class="row">
-      <div class="col-sm-12">
-        <h5 class="mb-3">Processing metrics</h5>
+  <h2 class="h2">Processing Metrics</h2>
 
-        <hr class="mb-4"/>
+  <div class="tab-container-wrapper" id="graphs1">
+    <div class="tab-container inline-tabs">
+      <%== partial 'shared/tab_nav', locals: { title: 'Consumed', id: 'consumed', active: true } %>
+      <%== partial 'shared/tab_nav', locals: { title: 'Batches', id: 'batches' } %>
+      <%== partial 'shared/tab_nav', locals: { title: 'Lags', id: 'lags', disabled: true } %>
+      <%== partial 'shared/tab_nav', locals: { title: 'Max LSO', id: 'max-lso' } %>
+      <%== partial 'shared/tab_nav', locals: { title: 'Pace', id: 'pace' } %>
+    </div>
+  </div>
 
-        <ul class="nav nav-tabs" id="graphs1" role="tablist">
-          <%== partial 'shared/tab_nav', locals: { title: 'Messages', id: 'messages', active: true } %>
-          <%== partial 'shared/tab_nav', locals: { title: 'Batches', id: 'batches' } %>
-          <%== partial 'shared/tab_nav', locals: { title: 'Topics Lags', id: 'topics-lags' } %>
-          <%== partial 'shared/tab_nav', locals: { title: 'Topics pace', id: 'topics-pace' } %>
-          <%== partial 'shared/tab_nav', locals: { title: 'Max LSO time', id: 'max-lso-time' } %>
-        </ul>
+  <div class="col-span-12">
+    <div id="consumed" class="hidden">
+      <% data = @aggregated_charts.with(:messages, :errors) %>
+      <%== partial 'shared/charts/line', locals: { data: data, id: 'consumed' } %>
+    </div>
 
-        <div class="tab-content">
-          <div class="tab-pane show active" id="messages" role="tabpanel">
-            <% data = @aggregated_charts.with(:messages, :errors) %>
-            <%== partial 'shared/charts/line', locals: { data: data, id: 'messages' } %>
-          </div>
+    <div id="batches" class="hidden">
+      <% data = @aggregated_charts.with(:batches, :errors, :dead, :retries) %>
+      <%== partial 'shared/charts/line', locals: { data: data, id: 'batches' } %>
+    </div>
 
-          <div class="tab-pane" id="batches" role="tabpanel">
-            <% data = @aggregated_charts.with(:batches, :errors, :dead, :retries) %>
-            <%== partial 'shared/charts/line', locals: { data: data, id: 'batches' } %>
-          </div>
+    <div id="lags" class="hidden">
+      <%== partial 'dashboard/feature_pro' %>
+      <% data = { enqueued: set.call, busy: set.call }.to_json %>
+      <%== partial 'shared/charts/line', locals: { data: data, id: 'lags', blurred: true } %>
+    </div>
 
-          <div class="tab-pane" id="topics-lags" role="tabpanel">
-            <%== partial 'dashboard/feature_pro' %>
-            <% data = { enqueued: set.call, busy: set.call }.to_json %>
-            <%== partial 'shared/charts/line', locals: { data: data, id: 'topics-lags', blurred: true } %>
-          </div>
+    <div id="max-lso" class="hidden">
+      <%== partial 'shared/charts/line', locals: { data: @topics_charts.max_lso, id: 'max-lso' } %>
+    </div>
 
-          <div class="tab-pane" id="topics-pace" role="tabpanel">
-            <%== partial 'dashboard/feature_pro' %>
-            <% data = { topic1: set.call(20), topic2: set.call(10), topic3: set.call(100) }.to_json %>
-            <%== partial 'shared/charts/line', locals: { data: data, id: 'topics-pace', blurred: true } %>
-          </div>
+    <div id="pace" class="hidden">
+      <%== partial 'shared/charts/line', locals: { data: @topics_charts.pace, id: 'pace' } %>
+    </div>
+  </div>
 
-          <div class="tab-pane" id="max-lso-time" role="tabpanel">
-            <%== partial 'dashboard/feature_pro' %>
-            <% data = { max_lso: set.call(2, 0..5) }.to_json %>
-            <%== partial 'shared/charts/line', locals: { data: data, id: 'max-lso-time', blurred: true } %>
-          </div>
-        </div>
-      </div>
+  <h2 class="h2">Utilization Metrics</h2>
+
+  <div class="tab-container-wrapper" id="graphs2">
+    <div class="tab-container inline-tabs">
+      <%== partial 'shared/tab_nav', locals: { title: 'Utilization', id: 'utilization', active: true } %>
+      <%== partial 'shared/tab_nav', locals: { title: 'RSS', id: 'rss', disabled: true } %>
+      <%== partial 'shared/tab_nav', locals: { title: 'Concurrency', id: 'concurrency' } %>
+      <%== partial 'shared/tab_nav', locals: { title: 'Data transfers', id: 'data-transfers', disabled: true } %>
     </div>
   </div>
 
-  <div class="container">
-    <div class="row">
-      <div class="col-sm-12">
-        <h5 class="mb-3">Utilization metrics</h5>
+  <div class="col-span-12">
+    <div id="utilization" class="hidden">
+      <% data = @aggregated_charts.with(:utilization) %>
+      <%== partial 'shared/charts/line', locals: { data: data, id: 'utilization', label_type_y: 'percentage' } %>
+    </div>
+
+    <div id="rss" class="hidden">
+      <%== partial 'dashboard/feature_pro' %>
+      <% data = { rss: set.call(1_050), process_rss: set.call(1_000) }.to_json %>
+      <%== partial 'shared/charts/line', locals: { data: data, id: 'rss', blurred: true } %>
+    </div>
+
+    <div id="concurrency" class="hidden">
+      <% data = @aggregated_charts.with(:processes, :workers, :active_listeners, :standby_listeners) %>
+      <%== partial 'shared/charts/line', locals: { data: data, id: 'concurrency' } %>
+    </div>
+
+    <div id="data-transfers" class="hidden">
+      <%== partial 'dashboard/feature_pro' %>
+      <% data = { bytes_received: set.call(4, 10..15), bytes_sent: set.call(2, 0..5) }.to_json %>
+      <%== partial 'shared/charts/line', locals: { data: data, id: 'data-transfers', blurred: true } %>
+    </div>
+  </div>
+<% else %>
+  <%== partial 'dashboard/not_enough_data' %>
+<% end %>
+
 
-        <hr class="mb-4"/>
 
-        <ul class="nav nav-tabs" id="graphs2" role="tablist">
-          <%== partial 'shared/tab_nav', locals: { title: 'Utilization', id: 'utilization', active: true } %>
-          <%== partial 'shared/tab_nav', locals: { title: 'RSS', id: 'rss' } %>
-          <%== partial 'shared/tab_nav', locals: { title: 'Concurrency', id: 'concurrency' } %>
-          <%== partial 'shared/tab_nav', locals: { title: 'Data transfers', id: 'data-transfers' } %>
-        </ul>
+
+
+
+
+
+
+
+<% if false && @aggregated.sufficient? %>
+  <%== partial 'dashboard/ranges_selector' %>
 
         <div class="tab-content">
           <div class="tab-pane show active" id="utilization" role="tabpanel">
@@ -101,6 +129,4 @@
       </div>
     </div>
   </div>
-<% else %>
-  <%== partial 'dashboard/not_enough_data' %>
 <% end %>

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

@@ -1,11 +1,11 @@
-<li class="breadcrumb-item">
+<li>
   <a href="<%= root_path('errors') %>">
     Errors
   </a>
 </li>
 
 <% if @error_message %>
-  <li class="breadcrumb-item">
+  <li>
     <a href="<%= root_path('errors', @offset) %>">
       <%=
         type = @error_message.payload[:type]

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

@@ -40,9 +40,7 @@
       <% when :error_class %>
         <code><%= v %></code>
       <% when :type %>
-        <span class="badge bg-secondary">
-          <%= v %>
-        </span>
+        <%== badge_secondary v %>
       <% else %>
         <%= v %>
       <% end %>

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

@@ -5,7 +5,7 @@
 
   <tr>
     <td>
-      <span class="badge bg-secondary badge-topic">
+      <span class="badge badge-secondary">
         <% if error[:details].key?(:topic) %>
           <%= error[:details][:topic] %>: <%= error[:details][:partition] %>
         <% else %>
@@ -23,10 +23,8 @@
     <td>
       <%== relative_time error[:occurred_at] %>
     </td>
-    <td class="text-center">
-      <a href="<%= root_path('errors', error_msg.offset) %>" class="btn btn-sm btn-secondary text-white">
-        Details
-      </a>
+    <td>
+      <%== link_button_primary_sm 'Details', root_path('errors', error_msg.offset) %>
     </td>
   </tr>
 <% end %>