karafka-web 0.8.2 → 0.9.0.rc1

data/lib/karafka/web/ui/public/stylesheets/application.css

@@ -11,10 +11,6 @@ body {
   display: none;
 }
 
-.container {
-  max-width: 1170px;
-}
-
 .navbar {
   background-color: #4051b5;
 }
@@ -100,8 +96,8 @@ code.wrapped {
   white-space: pre-wrap;
 }
 
-#counters a {
-  color: inherit;
+.counters a {
+  color: inherit !important;
 }
 
 #content .error-message {
@@ -127,3 +123,8 @@ main {
 a.sort {
   color: inherit;
 }
+
+.wrap-text {
+  word-wrap: break-word;
+  word-break: break-word;
+}

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

@@ -12,10 +12,10 @@
   </li>
 <% end %>
 
-<% if current_path.include?('/topics') %>
+<% if current_path.include?('/replication') %>
   <li class="breadcrumb-item">
-    <a href="<%= root_path('cluster', 'topics') %>">
-      Topics
+    <a href="<%= root_path('cluster', 'replication') %>">
+      Replication
     </a>
   </li>
 <% end %>

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

@@ -1,3 +1 @@
-<div class="alert alert-info" role="alert">
-  There are no topics partitions to display.
-</div>
+<%== alert_info('There are no topics partitions to display.') %>

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

@@ -14,10 +14,10 @@
 
         <li class="nav-item">
           <a
-            class="nav-link <%= nav_class(include: 'topics') %>"
-            href="<%= root_path('cluster', 'topics') %>"
+            class="nav-link <%= nav_class(include: 'replication') %>"
+            href="<%= root_path('cluster', 'replication') %>"
           >
-            Topics
+            Replication
           </a>
         </li>
       </ul>

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

@@ -1,27 +1,27 @@
-<%== view_title('Cluster informations') %>
+<%== view_title('Cluster Informations', hr: true) %>
 
 <%== partial 'cluster/tabs' %>
 
 <div class="container mb-5">
   <div class="row">
-    <div class="col-lg-12">
-        <table class="processes bg-white table table-hover table-bordered table-striped">
-          <thead>
-            <tr class="align-middle">
-              <th><%== sort_link('Id', :broker_id) %></th>
-              <th><%== sort_link('Name', :broker_name) %></th>
-              <th><%== sort_link('Port', :broker_port) %></th>
-            </tr>
-          </thead>
-          <tbody>
-            <%==
-              each_partial(
-                @brokers,
-                'cluster/broker'
-              )
-            %>
-          </tbody>
-        </table>
+    <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>
 </div>

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

@@ -0,0 +1,37 @@
+<%== 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>
+  </div>
+</div>

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

@@ -0,0 +1,24 @@
+<% process.consumer_groups.each do |consumer_group| %>
+  <% sg_topics = Hash.new { |h, k| h[k] = [] } %>
+
+  <% consumer_group.subscription_groups.each do |subscription_group| %>
+    <% subscription_group.topics.each do |topic| %>
+      <% sg_topics[topic.name] += topic.partitions.map(&:id) %>
+    <% end %>
+  <% end %>
+
+  <% sg_topics.each do |topic_name, partitions| %>
+    <% partitions_list = partitions.join(', ') %>
+    <span
+      class="badge bg-secondary badge-topic"
+      title="Consumer group: <%= consumer_group.id %>, partitions: <%= partitions_list%>"
+    >
+      <%= topic_name %>:
+      <% if partitions.size > 10 %>
+        <%= "#{partitions.sort.first(10).join(',')}..." %>
+      <% else %>
+        <%= partitions.sort.join(',') %>
+      <% end %>
+    </span>
+  <% end %>
+<% end %>

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

@@ -5,24 +5,11 @@
     </div>
 
     <a href="<%= root_path('consumers', process.id, 'subscriptions') %>">
-      <%= process.name %>
+      <%== truncate(process.id, strategy: :middle) %>
     </a>
 
     <p class="mt-0 mb-1">
-      <% process.consumer_groups.each do |consumer_group| %>
-        <% consumer_group.subscription_groups.each do |subscription_group| %>
-          <% subscription_group.topics.each do |topic| %>
-            <span class="badge bg-secondary badge-topic" title="Consumer group: <%= consumer_group.id %>">
-              <%= topic.name %>:
-              <% if topic.partitions.size > 10 %>
-                <%= "#{topic.partitions.first(10).map(&:id).join(',')}..." %>
-              <% else %>
-                <%= topic.partitions.map(&:id).join(',') %>
-              <% end %>
-            </span>
-          <% end %>
-        <% end %>
-      <% end %>
+      <%== partial 'consumers/assignments_badges', locals: { process: process } %>
     </p>
 
     <p class="mt-0 mb-1">

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

@@ -1,4 +1,4 @@
-<div id="counters" class="container mb-5">
+<div id="refreshable" class="container mb-5 counters">
   <div class="row">
     <div class="col-sm-12">
       <div class="card">

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

@@ -1,7 +1,7 @@
 <div id="summary" class="container text-center mb-5">
   <div class="row">
 
-    <div class="col-lg-2 offset-md-1">
+    <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">
@@ -16,7 +16,7 @@
       </div>
     </div>
 
-    <div class="col-lg-2">
+    <div class="col-lg-2 col-md-4 col-sm-6">
       <div class="card mb-0">
         <div class="card-body">
           <p class="card-text">
@@ -31,7 +31,7 @@
       </div>
     </div>
 
-    <div class="col-lg-2">
+    <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">
@@ -46,7 +46,7 @@
       </div>
     </div>
 
-    <div class="col-lg-2">
+    <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">
@@ -62,7 +62,7 @@
       </div>
     </div>
 
-    <div class="col-lg-2">
+    <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">

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

@@ -9,26 +9,28 @@
       <% elsif @processes.empty? %>
         <%== partial 'shared/no_paginated_data' %>
       <% else %>
-        <table class="processes bg-white table table-hover table-bordered table-striped mb-0 align-middle">
-          <thead>
-            <tr class="align-middle">
-              <th><%== sort_link(:name) %></th>
-              <th class="col-sm-2"><%== sort_link('Started', :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', :lag_hybrid) %></th>
-            </tr>
-          </thead>
-          <tbody>
-            <%==
-              render_each(
-                @processes,
-                'consumers/_consumer',
-                local: :process
-              )
-            %>
-          </tbody>
-        </table>
+        <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>
   </div>

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

@@ -31,30 +31,30 @@
         <div class="tab-content">
           <div class="tab-pane show active" id="messages" role="tabpanel">
             <% data = @aggregated_charts.with(:messages, :errors) %>
-            <%== partial 'shared/chart', locals: { data: data, id: 'messages' } %>
+            <%== partial 'shared/charts/line', locals: { data: data, id: 'messages' } %>
           </div>
 
           <div class="tab-pane" id="batches" role="tabpanel">
             <% data = @aggregated_charts.with(:batches, :errors, :dead, :retries) %>
-            <%== partial 'shared/chart', locals: { data: data, id: 'batches' } %>
+            <%== partial 'shared/charts/line', locals: { data: data, id: 'batches' } %>
           </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/chart', locals: { data: data, id: 'topics-lags', blurred: true } %>
+            <%== partial 'shared/charts/line', locals: { data: data, id: 'topics-lags', blurred: true } %>
           </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/chart', locals: { data: data, id: 'topics-pace', blurred: true } %>
+            <%== partial 'shared/charts/line', locals: { data: data, id: 'topics-pace', blurred: true } %>
           </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/chart', locals: { data: data, id: 'max-lso-time', blurred: true } %>
+            <%== partial 'shared/charts/line', locals: { data: data, id: 'max-lso-time', blurred: true } %>
           </div>
         </div>
       </div>
@@ -78,24 +78,24 @@
         <div class="tab-content">
           <div class="tab-pane show active" id="utilization" role="tabpanel">
             <% data = @aggregated_charts.with(:utilization) %>
-            <%== partial 'shared/chart', locals: { data: data, id: 'utilization', label_type_y: 'percentage' } %>
+            <%== partial 'shared/charts/line', locals: { data: data, id: 'utilization', label_type_y: 'percentage' } %>
           </div>
 
           <div class="tab-pane show" id="rss" role="tabpanel">
             <%== partial 'dashboard/feature_pro' %>
             <% data = { rss: set.call(1_050), process_rss: set.call(1_000) }.to_json %>
-            <%== partial 'shared/chart', locals: { data: data, id: 'rss', blurred: true } %>
+            <%== partial 'shared/charts/line', locals: { data: data, id: 'rss', blurred: true } %>
           </div>
 
           <div class="tab-pane show" id="concurrency" role="tabpanel">
             <% data = @aggregated_charts.with(:processes, :workers, :active_listeners, :standby_listeners) %>
-            <%== partial 'shared/chart', locals: { data: data, id: 'concurrency' } %>
+            <%== partial 'shared/charts/line', locals: { data: data, id: 'concurrency' } %>
           </div>
 
           <div class="tab-pane show" id="data-transfers" role="tabpanel">
             <%== partial 'dashboard/feature_pro' %>
             <% data = { bytes_received: set.call(4, 10..15), bytes_sent: set.call(2, 0..5) }.to_json %>
-            <%== partial 'shared/chart', locals: { data: data, id: 'data-transfers', blurred: true } %>
+            <%== partial 'shared/charts/line', locals: { data: data, id: 'data-transfers', blurred: true } %>
           </div>
         </div>
       </div>

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

@@ -1,3 +1 @@
-<div class="alert alert-info" role="alert">
-  This errors topic partition had all of its errored compacted and cleaned.
-</div>
+<%== alert_info('This errors topic partition had all of its errored compacted and cleaned.') %>

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

@@ -1,9 +1,5 @@
 <% if error_msg.is_a?(Array) %>
-  <tr>
-    <td colspan="5" class="text-center text-muted">
-      This offset does not contain error data. The message may have been compacted or is a system entry.
-    </td>
-  </tr>
+  <%== partial 'shared/not_a_message' %>
 <% else %>
   <% error = error_msg.payload %>
 
@@ -18,7 +14,7 @@
       </span>
     </td>
     <td>
-      <%== error[:process][:name] %>
+      <%== error[:process][:id] %>
     </td>
     <td>
       <%= error[:error_class] %>:

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

@@ -1,3 +1 @@
-<div class="alert alert-info" role="alert">
-  There are no errors in this errors topic partition.
-</div>
+<%== alert_info('There are no errors in this errors topic partition.') %>

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

@@ -20,26 +20,28 @@
       <% elsif @watermark_offsets.cleaned? %>
         <%== partial 'errors/cleaned' %>
       <% else %>
-        <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>Process name</th>
-              <th>Error</th>
-              <th>Occurred at</th>
-              <th></th>
-            </tr>
-          </thead>
-          <tbody>
-            <%==
-              each_partial(
-                @error_messages,
-                'errors/error',
-                local: :error_msg
-              )
-            %>
-          </tbody>
-        </table>
+        <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 %>
     </div>
   </div>

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

@@ -1,7 +1,7 @@
 <tr>
   <td>
     <a href="<%= root_path('consumers', job.process.id, 'subscriptions') %>">
-      <%= job.process.name %>
+      <%== truncate(job.process.id, strategy: :middle) %>
     </a>
   </td>
   <td>
@@ -21,6 +21,9 @@
   <td>
     <code>#<%= job.type %></code>
   </td>
+  <td>
+    <%== offset_with_label job.topic, job.partition, job.first_offset %>
+  </td>
   <td>
     <%== relative_time job.updated_at %>
   </td>

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

@@ -1,9 +1,7 @@
 <div class="container mb-4">
   <div class="row">
     <div class="col-lg-12">
-      <div class="alert alert-info" role="alert">
-        There are no <%= type %> jobs at the moment.
-      </div>
+      <%== alert_info("There are no #{type} jobs at the moment.") %>
     </div>
   </div>
 </div>

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

@@ -1,4 +1,4 @@
-<%== view_title('Pending jobs', hr: false) %>
+<%== view_title('Pending Jobs', hr: false) %>
 
 <%== partial 'jobs/tabs' %>
 
@@ -9,7 +9,7 @@
 <% else %>
   <div class="container">
     <div class="row mb-5">
-      <div class="col-sm-12">
+      <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">
@@ -17,7 +17,8 @@
               <th><%== sort_link(:topic) %></th>
               <th><%== sort_link(:consumer) %></th>
               <th><%== sort_link(:type) %></th>
-              <th><%== sort_link('Created at', :updated_at, rev: true) %></th>
+              <th><%== sort_link(:first_offset) %></th>
+              <th><%== sort_link('Created', :updated_at, rev: true) %></th>
             </tr>
           </thead>
           <tbody>

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

@@ -1,4 +1,4 @@
-<%== view_title('Running jobs', hr: false) %>
+<%== view_title('Running Jobs', hr: false) %>
 
 <%== partial 'jobs/tabs' %>
 
@@ -9,7 +9,7 @@
 <% else %>
   <div class="container">
     <div class="row mb-5">
-      <div class="col-sm-12">
+      <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">
@@ -17,7 +17,8 @@
               <th><%== sort_link(:topic) %></th>
               <th><%== sort_link(:consumer) %></th>
               <th><%== sort_link(:type) %></th>
-              <th><%== sort_link('Started at', :updated_at, rev: true) %></th>
+              <th><%== sort_link(:first_offset) %></th>
+              <th><%== sort_link('Started', :updated_at, rev: true) %></th>
             </tr>
           </thead>
           <tbody>

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

@@ -8,13 +8,13 @@
 </div>
 
 <div class="row mb-5">
-  <div class="col-sm-12">
+  <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>Subscription group</th>
           <th><%== sort_link('Topic', :name) %></th>
-          <th><%== sort_link('Active', :active?) %></th>
+          <th><%== sort_link(:active?) %></th>
           <th></th>
         </tr>
       </thead>

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

@@ -1,4 +1,4 @@
-<%== view_title('Routing details') %>
+<%== view_title('Routing Details') %>
 
 <div class="container mb-5">
   <%==

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

@@ -5,7 +5,7 @@
 
 <div class="container">
   <div class="row mb-5">
-    <div class="col-sm-12">
+    <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| %>

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

@@ -3,9 +3,9 @@
     <div class="mb-4">
       <div class="container">
         <div class="alert alert-light">
-          Please help us make the Karafka ecosystem better by subscribing to our
-          <a target="_blank" href="https://karafka.io/#become-pro">Pro</a>
-          offering.
+          &#128161;
+          <% linked = '<a target="_blank" href="https://karafka.io/#become-pro">Pro</a>' %>
+          <%== Karafka::Web.slogans.sample.gsub('Pro', linked) %>
         </div>
       </div>
     </div>

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

@@ -4,21 +4,27 @@
   <meta name="description" content="Karafka application dashboard">
   <meta name="author" content="Maciej Mensfeld">
 
-  <title>Karafka</title>
+  <title>Karafka Web UI</title>
+
+  <link href="<%= asset_path('stylesheets/libs/bootstrap.min.css') %>" rel="stylesheet">
+  <link href="<%= asset_path('stylesheets/libs/highlight.min.css') %>" rel="stylesheet">
+  <link href="<%= asset_path('stylesheets/libs/datepicker.min.css') %>" rel="stylesheet">
 
-  <link href="<%= asset_path('stylesheets/bootstrap.min.css') %>" rel="stylesheet">
-  <link href="<%= asset_path('stylesheets/highlight.min.css') %>" rel="stylesheet">
-  <link href="<%= asset_path('stylesheets/datepicker.min.css') %>" rel="stylesheet">
   <link href="<%= asset_path('stylesheets/application.css') %>" rel="stylesheet">
 
-  <script type="text/javascript" src="<%= asset_path('javascripts/chart.min.js') %>"></script>
-  <script type="text/javascript" src="<%= asset_path('javascripts/timeago.min.js') %>"></script>
-  <script type="text/javascript" src="<%= asset_path('javascripts/bootstrap.min.js') %>"></script>
-  <script type="text/javascript" src="<%= asset_path('javascripts/highlight.min.js') %>"></script>
+  <script type="text/javascript" src="<%= asset_path('javascripts/libs/chart.min.js') %>"></script>
+  <script type="text/javascript" src="<%= asset_path('javascripts/libs/timeago.min.js') %>"></script>
+  <script type="text/javascript" src="<%= asset_path('javascripts/libs/bootstrap.min.js') %>"></script>
+  <script type="text/javascript" src="<%= asset_path('javascripts/libs/highlight.min.js') %>"></script>
+  <script type="text/javascript" src="<%= asset_path('javascripts/libs/datepicker.js') %>"></script>
+
   <script type="text/javascript" src="<%= asset_path('javascripts/live_poll.js') %>"></script>
-  <script type="text/javascript" src="<%= asset_path('javascripts/tabs.js') %>"></script>
+  <script type="text/javascript" src="<%= asset_path('javascripts/tabs_manager.js') %>"></script>
+  <script type="text/javascript" src="<%= asset_path('javascripts/charts/dataset_state_manager.js') %>"></script>
+  <script type="text/javascript" src="<%= asset_path('javascripts/charts/data_formatting_utility.js') %>"></script>
+  <script type="text/javascript" src="<%= asset_path('javascripts/charts/types/line.js') %>"></script>
+  <script type="text/javascript" src="<%= asset_path('javascripts/charts/types/bar.js') %>"></script>
   <script type="text/javascript" src="<%= asset_path('javascripts/charts.js') %>"></script>
-  <script type="text/javascript" src="<%= asset_path('javascripts/datepicker.js') %>"></script>
   <script type="text/javascript" src="<%= asset_path('javascripts/offset_datetime.js') %>"></script>
   <script type="text/javascript" src="<%= asset_path('javascripts/application.js') %>"></script>