karafka-web 0.6.3 → 0.7.0

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

@@ -6,15 +6,21 @@
 
   <title>Karafka</title>
 
-  <script type="text/javascript" src="<%= root_path('javascripts/timeago.min.js') %>"></script>
-  <script type="text/javascript" src="<%= root_path('javascripts/bootstrap.min.js') %>"></script>
-  <script type="text/javascript" src="<%= root_path('javascripts/highlight.min.js') %>"></script>
-  <script type="text/javascript" src="<%= root_path('javascripts/live_poll.js') %>"></script>
-  <script type="text/javascript" src="<%= root_path('javascripts/application.js') %>"></script>
+  <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">
 
-  <link href="<%= root_path('stylesheets/bootstrap.min.css') %>" rel="stylesheet">
-  <link href="<%= root_path('stylesheets/highlight.min.css') %>" rel="stylesheet">
-  <link href="<%= root_path('stylesheets/application.css') %>" rel="stylesheet">
+  <script type="module" 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/live_poll.js') %>"></script>
+  <script type="text/javascript" src="<%= asset_path('javascripts/tabs.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>
 
-  <link rel="icon" href="<%= root_path('images/favicon.ico') %>">
+  <link rel="icon" href="<%= asset_path('images/favicon.ico') %>">
 </head>

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

@@ -0,0 +1,7 @@
+<ul class="nav navbar-nav navbar-right">
+  <li>
+    <span class="btn btn-secondary btn-sm" id="live-poll" data-on="Live polling" data-off="Live poll">
+      Live poll
+    </a>
+  </li>
+</ul>

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

@@ -4,6 +4,11 @@
 
 <div class="collapse navbar-collapse" id="navbarNav">
   <ul class="navbar-nav">
+    <li class="nav-item ms-3">
+      <a class="nav-link <%= nav_class(start_with: '/dashboard') %>" href="<%= root_path('dashboard') %>">
+        Dashboard
+      </a>
+    </li>
     <li class="nav-item ms-3">
       <a class="nav-link <%= nav_class(start_with: '/consumers') %>" href="<%= root_path('consumers') %>">
         Consumers
@@ -52,11 +57,3 @@
     </li>
   </ul>
 </div>
-
-<ul class="nav navbar-nav navbar-right">
-  <li>
-    <span class="btn btn-secondary btn-sm" id="live-poll" data-on="Live polling" data-off="Live poll">
-      Live poll
-    </a>
-  </li>
-</ul>

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

@@ -0,0 +1,9 @@
+<div class="alert alert-info" role="alert">
+  <p>
+    This page does not contain any data.
+  </p>
+
+  <p class="mb-0">
+    Try going to the previous or the first page to get meaningful results.
+  </p>
+</div>

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

@@ -1,28 +1,32 @@
-<% if @current_page && (@current_page > 1 || @next_page) %>
-  <div id="pagination" class="container mb-5">
+<% if @pagination && @pagination.paginate? %>
+  <div id="pagination" class="container mb-4">
     <div class="row">
       <nav>
         <ul class="pagination justify-content-center">
-          <li class="page-item <%= 'disabled' if @current_page <= 1 %>">
-            <a class="page-link" href="<%= current_path(page: 1) %>">
+          <li class="page-item <%= 'disabled' unless @pagination.first_offset? %>">
+            <a class="page-link" href="<%= current_path(@pagination.offset_key => @pagination.first_offset) %>">
               <span>&laquo;</span>
             </a>
           </li>
 
-          <li class="page-item <%= 'disabled' if @current_page <= 1 %>">
-            <a class="page-link" href="<%= current_path(page: @current_page - 1) %>">
+          <li class="page-item <%= 'disabled' unless @pagination.previous_offset? %>">
+            <a class="page-link" href="<%= current_path(@pagination.offset_key => @pagination.previous_offset) %>">
               <span>&lsaquo; Prev</span>
             </a>
           </li>
 
-          <li class="page-item active disabled">
-            <a class="page-link" href="<%= current_path(page: @current_page) %>">
-              <span><%= @current_page %></span>
-            </a>
-          </li>
+          <% if @pagination.current_offset? %>
+            <li class="page-item active disabled">
+              <a class="page-link" href="<%= current_path(@pagination.offset_key => @pagination.current_offset) %>">
+                <span>
+                  <%= @pagination.current_label %>
+                </span>
+              </a>
+            </li>
+          <% end %>
 
-          <li class="page-item <%= 'disabled' unless @next_page %>">
-            <a class="page-link" href="<%= current_path(page: @next_page) %>">
+          <li class="page-item <%= 'disabled' unless @pagination.next_offset? %>">
+            <a class="page-link" href="<%= current_path(@pagination.offset_key => @pagination.next_offset) %>">
               <span>Next &rsaquo;</span>
             </a>
           </li>

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

@@ -0,0 +1,7 @@
+<% active ||= false %>
+
+<li class="nav-item" role="presentation">
+  <button class="nav-link <%= 'active' if active %>" id="<%= id %>-tab" data-bs-toggle="tab" data-bs-target="#<%= id %>" type="button" role="tab">
+    <%= title %>
+  </button>
+</li>

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

@@ -1,41 +1,43 @@
-<div id="content">
-  <div class="d-flex align-items-center justify-content-center vh-100">
-    <div class="error-message text-center">
-      <h1 class="display-1 fw-bold">404</h1>
+<main>
+  <div id="content">
+    <div class="d-flex align-items-center justify-content-center vh-100">
+      <div class="error-message text-center">
+        <h1 class="display-1 fw-bold">404</h1>
 
-      <p class="fs-3 md-5">
-        <span class="text-danger">
-          Oops!
-        </span>
-        Page not found.
-      </p>
-
-      <div class="lead">
-        <p class="mb-5">
-          The page you're looking for doesn't exist.
+        <p class="fs-3 md-5">
+          <span class="text-danger">
+            Oops!
+          </span>
+          Page not found.
         </p>
 
-        <p>
-          Please make sure, that:
-        </p>
+        <div class="lead">
+          <p class="mb-5">
+            The page you're looking for doesn't exist.
+          </p>
 
-        <ul class="mb-5 text-start">
-          <li>You have visited the <a href="<%= root_path('status') %>">Status</a> page to troubleshoot any potential issues</li>
-          <li>All the topics required by Karafka Web exist</li>
-          <li>You have used <code>bundle exec karafka-web install</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>
+          <p>
+            Please make sure, that:
+          </p>
 
-        <p class="mb-5">
-          If you were looking for a given process or other real-time information, the state might have changed, and the information you are looking for no longer exists.
-        </p>
+          <ul class="mb-5 text-start">
+            <li>You have visited the <a href="<%= root_path('status') %>">Status</a> page to troubleshoot any potential issues</li>
+            <li>All the topics required by Karafka Web exist</li>
+            <li>You have used <code>bundle exec karafka-web install</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>
 
-        <p>
-          <a href="<%= root_path %>" class="btn btn-primary">Go Home</a>
-          <a href="<%= root_path('status') %>" class="btn btn-success">Status page</a>
-        </p>
+          <p class="mb-5">
+            If you were looking for a given process or other real-time information, the state might have changed, and the information you are looking for no longer exists.
+          </p>
+
+          <p>
+            <a href="<%= root_path %>" class="btn btn-primary">Go Home</a>
+            <a href="<%= root_path('status') %>" class="btn btn-success">Status page</a>
+          </p>
+        </div>
       </div>
     </div>
   </div>
-</div>
+</main>

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

@@ -1,48 +1,50 @@
-<div id="content">
-  <div class="d-flex align-items-center justify-content-center vh-100">
-
-    <div class="error-message text-center">
-      <h1 class="display-1 fw-bold">Pro feature</h1>
-
-      <p class="fs-3 md-5">
-        <span class="text-danger">
-          Oops!
-        </span>
-        This Web UI feature is available only to
-        <a href="karafka.io/#become-pro" target="_blank">Pro</a>
-        users.
-      </p>
-
-      <div class="lead">
-        <p class="mb-5">
-          Open Source software is great, but it is only sometimes sustainable, especially for projects with high-quality expectations.
-
-          Please help us make the Karafka ecosystem better by subscribing to our
-          <a target="_blank" href="https://karafka.io/#become-pro">Pro</a>
-          offering.
+<main>
+  <div id="content">
+    <div class="d-flex align-items-center justify-content-center vh-100">
+
+      <div class="error-message text-center">
+        <h1 class="display-1 fw-bold">Pro feature</h1>
+
+        <p class="fs-3 md-5">
+          <span class="text-danger">
+            Oops!
+          </span>
+          This Web UI feature is available only to
+          <a href="karafka.io/#become-pro" target="_blank">Pro</a>
+          users.
         </p>
 
-        <p>
-          Karafka Pro includes:
-        </p>
-
-        <ul class="mb-5 text-start">
-          <li>Enhanced Web UI with all the features</li>
-          <li>Topics data explorer</li>
-          <li>Enhanced metrics reporting</li>
-          <li>High throughput data processing-related features</li>
-          <li>At Rest Encryption</li>
-          <li>Commercial-friendly license</li>
-          <li>Priority support</li>
-          <li>Architecture consultations</li>
-        </ul>
-
-        <p>
-          <a href="<%= root_path %>" class="btn btn-primary">Go Home</a>
-          <a href="https://karafka.io/#become-pro" class="btn btn-success" target="_blank">Become Pro!</a>
-        </p>
+        <div class="lead">
+          <p class="mb-5">
+            Open Source software is great, but it is only sometimes sustainable, especially for projects with high-quality expectations.
+
+            Please help us make the Karafka ecosystem better by subscribing to our
+            <a target="_blank" href="https://karafka.io/#become-pro">Pro</a>
+            offering.
+          </p>
+
+          <p>
+            Karafka Pro includes:
+          </p>
+
+          <ul class="mb-5 text-start">
+            <li>Enhanced Web UI with all the features</li>
+            <li>Topics data explorer</li>
+            <li>Enhanced metrics reporting</li>
+            <li>High throughput data processing-related features</li>
+            <li>At Rest Encryption</li>
+            <li>Commercial-friendly license</li>
+            <li>Priority support</li>
+            <li>Architecture consultations</li>
+          </ul>
+
+          <p>
+            <a href="<%= root_path %>" class="btn btn-primary">Go Home</a>
+            <a href="https://karafka.io/#become-pro" class="btn btn-success" target="_blank">Become Pro!</a>
+          </p>
+        </div>
       </div>
-    </div>
 
+    </div>
   </div>
-</div>
+</main>

data/lib/karafka/web/ui/views/status/failures/_consumers_reports_schema_state.erb

@@ -0,0 +1,15 @@
+<p>
+  Incompatible consumer reports detected.
+</p>
+
+<p>
+  It means that the <code>karafka server</code> process responsible for Web-UI state materialization runs under an older version than the one that sends reports. This process stopped processing incoming reports and the Web-UI data will not be refreshed until the problem is resolved.
+</p>
+
+<p>
+  To fix this, you must ensure that all the <code>karafka server</code> processes run using the same <code>karafka-web</code> version.
+</p>
+
+<p class="mb-0">
+  Please note that this should not cause any dashboard metrics losses. Once it is resolved, Karafka Web-UI will catch up.
+</p>

data/lib/karafka/web/ui/views/status/failures/_enabled.erb

@@ -0,0 +1,8 @@
+<p>
+  Karafka Web-UI is not part of your <code>karafka.rb</code>.
+</p>
+
+<p class="mb-0">
+  Please follow the
+  <a href="https://karafka.io/docs/Web-UI-Getting-Started/">setup instructions</a> and make sure that Karafka Web-UI is enabled.
+</p>

data/lib/karafka/web/ui/views/status/failures/_initial_consumers_metrics.erb

@@ -0,0 +1,11 @@
+<p>
+  The initial consumers metrics for the Web UI were not created.
+</p>
+
+<p>
+  It means that the <code>bundle exec karafka-web migrate</code> was not executed or failed.
+</p>
+
+<p class="mb-0">
+  To fix this, you need to ensure that the <code>bundle exec karafka-web migrate</code> runs successfully.
+</p>

data/lib/karafka/web/ui/views/status/failures/{_initial_state.erb → _initial_consumers_state.erb}

@@ -1,11 +1,11 @@
 <p>
-  The initial state for the Web UI was not created.
+  The initial consumers state for the Web UI was not created.
 </p>
 
 <p>
   It means that the <code>bundle exec karafka-web install</code> was not executed or failed.
 </p>
 
-<p>
-  To fix this, you need to ensure that the <code>bundle exec karafka-web install</code> runs successfully.
+<p class="mb-0">
+  To fix this, you need to ensure that the <code>bundle exec karafka-web migrate</code> runs successfully.
 </p>

data/lib/karafka/web/ui/views/status/failures/_partitions.erb

@@ -1,11 +1,19 @@
 <p>
-  Both
-  <code><%= Karafka::Web.config.topics.consumers.states %></code>
-  and
-  <code><%= Karafka::Web.config.topics.consumers.reports %></code>
-  topics need to be configured with <strong>exactly</strong> one partition.
+  Following topics need to be configured with <strong>exactly</strong> one partition:
 </p>
 
+<ul>
+  <li>
+    <code><%= Karafka::Web.config.topics.consumers.states %></code>
+  </li>
+  <li>
+    <code><%= Karafka::Web.config.topics.consumers.reports %></code>
+  </li>
+  <li>
+    <code><%= Karafka::Web.config.topics.consumers.metrics %></code>
+  </li>
+</ul>
+
 <p>
   Your current setup contains the following:
 </p>
@@ -13,7 +21,7 @@
 <ul class="mb-0">
   <% details.each do |name, details| %>
     <li>
-      <code><%= name %> </code> with <code><%= details[:partitions] %> </code> partitions.
+      <code><%= name %> </code> with <code><%= details[:partitions] %></code> partitions.
     </li>
   <% end %>
 </ul>

data/lib/karafka/web/ui/views/status/info/_components.erb

@@ -2,7 +2,7 @@
   Below you can find information about your setup. This can be helpful when debugging or reporting bugs and issues.
 </p>
 
-<p class="mb-0">
+<p>
   <span class="badge bg-secondary">
     <%= @sampler.ruby_version %>
   </span>
@@ -36,4 +36,24 @@
     waterdrop
     <%= @sampler.waterdrop_version %>
   </span>
+
+  <% if Object.const_defined?(:Rails, false) %>
+    <span class="badge bg-secondary">
+      rails
+      <%= Rails.gem_version %>
+    </span>
+  <% end %>
 </p>
+
+<hr/>
+
+<p>
+  Below you can find information about internal Karafka Web-UI topics:
+</p>
+
+<ul class="mb-0">
+  <li>Errors: <code><%= Karafka::Web.config.topics.errors %></code></li>
+  <li>Consumers reports: <code><%= Karafka::Web.config.topics.consumers.reports %></code></li>
+  <li>Consumers states: <code><%= Karafka::Web.config.topics.consumers.states %></code></li>
+  <li>Consumers metrics: <code><%= Karafka::Web.config.topics.consumers.metrics %></code></li>
+</ul>

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

@@ -1,8 +1,23 @@
 <%== view_title('Web UI status details') %>
 
-<div class="container mb-5">
+<div class="container">
   <div class="row">
     <div class="col-lg-10 offset-md-1">
+      <%==
+        partial(
+          "status/#{@status.enabled.to_s}",
+          locals: {
+            title: 'Web-UI setup in karafka.rb',
+            description: partial(
+              "status/#{@status.enabled.partial_namespace}/enabled",
+              locals: {
+                details: @status.enabled.details
+              }
+            )
+          }
+        )
+      %>
+
       <%==
         partial(
           "status/#{@status.connection.to_s}",
@@ -50,13 +65,43 @@
 
       <%==
         partial(
-          "status/#{@status.initial_state.to_s}",
+          "status/#{@status.replication.to_s}",
+          locals: {
+            title: 'Replication factors',
+            description: partial(
+              'status/warnings/replication',
+              locals: {
+                details: @status.replication.details
+              }
+            )
+          }
+        )
+      %>
+
+      <%==
+        partial(
+          "status/#{@status.initial_consumers_state.to_s}",
           locals: {
-            title: 'Initial state presence',
+            title: 'Initial consumers state presence',
             description: partial(
-              'status/failures/initial_state',
+              'status/failures/initial_consumers_state',
               locals: {
-                details: @status.initial_state.details
+                details: @status.initial_consumers_state.details
+              }
+            )
+          }
+        )
+      %>
+
+      <%==
+        partial(
+          "status/#{@status.initial_consumers_metrics.to_s}",
+          locals: {
+            title: 'Initial consumers metrics presence',
+            description: partial(
+              'status/failures/initial_consumers_metrics',
+              locals: {
+                details: @status.initial_consumers_metrics.details
               }
             )
           }
@@ -93,6 +138,18 @@
         )
       %>
 
+      <%==
+        partial(
+          "status/#{@status.consumers_reports_schema_state.to_s}",
+          locals: {
+            title: 'Consumers reports schema compatibility',
+            description: partial(
+              'status/failures/consumers_reports_schema_state'
+            )
+          }
+        )
+      %>
+
       <%==
         partial(
           "status/#{@status.pro_subscription.to_s}",

data/lib/karafka/web/ui/views/status/successes/_enabled.erb

@@ -0,0 +1 @@
+<%# Expected to be empty. No content on success needed. %>

data/lib/karafka/web/ui/views/status/warnings/_replication.erb

@@ -0,0 +1,19 @@
+<p>
+  It is recommended to have a replication factor greater than <code>1</code> for all the Karafka Web UI topics in a production environment.
+</p>
+
+<p>
+  Current replication factors for Karafka Web UI topics:
+</p>
+
+<ul>
+  <% details.each do |name, details| %>
+    <li>
+      <code><%= name %></code>: <code><%= details[:replication] %></code>
+    </li>
+  <% end %>
+</ul>
+
+<p>
+  Please ensure all those topics have a replication factor of at least <code>2</code>.
+</p>

data/lib/karafka/web/version.rb

@@ -3,6 +3,6 @@
 module Karafka
   module Web
     # Current gem version
-    VERSION = '0.6.3'
+    VERSION = '0.7.0'
   end
 end

data/lib/karafka/web.rb

@@ -5,6 +5,8 @@
   roda
   etc
   open3
+  zlib
+  securerandom
 ].each { |lib| require lib }
 
 module Karafka
@@ -30,7 +32,16 @@ module Karafka
       # Activates all the needed routing and sets up listener, etc
       # This needs to run **after** the optional configuration of the web component
       def enable!
+        # Make sure config is as expected
+        # It should be configured before enabling the Web UI
+        Contracts::Config.new.validate!(config.to_h)
+
         Installer.new.enable!
+
+        # Inject correct settings for the Web-UI sessions plugin based on the user configuration
+        # We cannot configure this automatically like other Roda plugins because it requires safe
+        # custom values provided by our user
+        App.engine.plugin(:sessions, **config.ui.sessions.to_h)
       end
     end
   end