karafka-web 0.1.0

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

@@ -0,0 +1,29 @@
+<%== partial 'consumers/counters' %>
+<%== partial 'consumers/summary' %>
+
+<div class="container">
+  <div class="row">
+    <div class="col-sm-12">
+      <table class="processes bg-white table table-hover table-bordered table-striped mb-0 align-middle">
+        <thead>
+          <tr class="align-middle">
+            <th>Name</th>
+            <th class="col-sm-2">Started</th>
+            <th class="col-sm-1">Memory</th>
+            <th class="col-sm-1">Utilization</th>
+            <th class="col-sm-1">Total lag</th>
+          </tr>
+        </thead>
+        <tbody>
+          <%==
+            render_each(
+              @processes,
+              'consumers/_consumer',
+              local: :process
+            )
+          %>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>

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

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

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

@@ -0,0 +1,29 @@
+<% if v.is_a?(Hash) %>
+  <% v.each do |k2, v2| %>
+    <tr>
+      <td>
+        <%= "#{k}.#{k2}" %>
+      </td>
+      <td>
+        <% if k2.to_s.include?('ssl') %>
+          ***
+        <% else %>
+          <%= v2 %>
+        <% end %>
+      </td>
+    </tr>
+  <% end %>
+<% else %>
+  <tr>
+    <td>
+      <%= k %>
+    </td>
+    <td>
+      <% if k == :occurred_at %>
+        <%== relative_time v %>
+      <% else %>
+        <%= v %>
+      <% end %>
+    </td>
+  </tr>
+<% end %>

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

@@ -0,0 +1,26 @@
+<% error = error_msg.payload %>
+
+<tr>
+  <td>
+    <% if error[:details].key?(:topic) %>
+      <%= error[:details][:topic] %>: <%= error[:details][:partition] %>
+    <% else %>
+      <%= error[:type] %>
+    <% end %>
+  </td>
+  <td>
+    <%== error[:process_name] %>
+  </td>
+  <td>
+    <%= error[:error_class] %>:
+    <%= error[:error_message].first(200) %>
+  </td>
+  <td>
+    <%== relative_time error[:occurred_at] %>
+  </td>
+  <td>
+    <a href="<%= root_path('errors', error_msg.offset) %>" class="btn btn-sm btn-secondary text-white">
+      Details
+    </a>
+  </td>
+</tr>

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

@@ -0,0 +1,38 @@
+<div class="container mb-5">
+  <div class="row">
+    <div class="col">
+      <h3>
+        Errors
+      </h3>
+    </div>
+  </div>
+
+  <hr>
+</div>
+
+<div class="container">
+  <div class="row mb-5">
+    <div class="col-sm-12">
+      <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>
+  </div>
+</div>

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

@@ -0,0 +1,30 @@
+<%==
+  type = @error_message.payload[:type]
+  error_class = @error_message.payload[:error_class]
+  offset = @error_message.offset
+
+  view_title("#{type}: #{error_class} #{offset}", hr: true)
+%>
+
+<div class="container">
+  <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">
+        <tbody>
+          <% @error_message.payload.each do |k, v| %>
+            <% next if k == :backtrace %>
+            <%==
+              partial(
+                'errors/detail',
+                locals: {
+                  k: k,
+                  v: v
+                }
+              )
+            %>
+          <% end %>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,5 @@
+<li class="breadcrumb-item">
+  <a href="<%= root_path('jobs') %>">
+    Running jobs
+  </a>
+</li>

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

@@ -0,0 +1,22 @@
+<tr>
+  <td>
+    <a href="<%= root_path('consumers', job.process.id, 'subscriptions') %>">
+      <%= job.process.name %>
+    </a>
+  </td>
+  <td>
+    <span class="badge bg-secondary badge-topic" title="Consumer group: <%= job.consumer_group %>">
+      <%= job.topic %>:
+      <%= job.partition %>
+    </span>
+  </td>
+  <td>
+    <code><%= job.consumer %></code>
+  </td>
+  <td>
+    <code>#<%= job.type %></code>
+  </td>
+  <td>
+    <%== relative_time job.started_at %>
+  </td>
+</tr>

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

@@ -0,0 +1,9 @@
+<div class="container mb-4">
+  <div class="row">
+    <div class="col-lg-12">
+      <div class="alert alert-info" role="alert">
+        There are no running jobs at the moment.
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,31 @@
+<%== view_title('Running jobs', hr: true) %>
+
+<% if @jobs.empty? %>
+  <%== partial 'jobs/no_jobs' %>
+<% else %>
+  <div class="container">
+    <div class="row mb-5">
+      <div class="col-sm-12">
+        <table class="processes bg-white table table-hover table-bordered table-striped mb-0 align-middle">
+          <thead>
+            <tr class="align-middle">
+              <th>Process</th>
+              <th>Topic</th>
+              <th>Consumer</th>
+              <th>Type</th>
+              <th>Started at</th>
+            </tr>
+          </thead>
+          <tbody>
+            <%==
+              each_partial(
+                @jobs,
+                'jobs/job'
+              )
+            %>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+<% end %>

data/lib/karafka/web/ui/views/layout.erb

@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="en">
+  <%== partial 'shared/header' %>
+
+  <body>
+    <script>0</script>
+
+    <% if @error %>
+      <%== yield %>
+    <% else %>
+      <nav class="navbar navbar-expand-lg navbar-dark shadow-sm mb-4">
+        <div class="container">
+          <%== partial 'shared/brand' %>
+          <%== partial 'shared/navigation' %>
+        </div>
+      </nav>
+
+      <%== partial 'shared/become_pro' %>
+
+      <%== partial 'shared/content', locals: { content: yield } %>
+    <% end %>
+  </body>
+</html>

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

@@ -0,0 +1,15 @@
+<li class="breadcrumb-item">
+  <a href="<%= root_path('routing') %>">
+    Routing details
+  </a>
+</li>
+
+<% if @topic %>
+  <li class="breadcrumb-item">
+    <a href="<%= root_path('routing', @topic.id) %>">
+      <%=
+        title = [@topic.consumer_group.id, @topic.subscription_group, @topic.name].join(': ')
+      %>
+    </a>
+  </li>
+<% end %>

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

@@ -0,0 +1,34 @@
+<div class="row mb-4">
+  <div class="col-sm-12">
+    <h5 class="mb-2">
+      <%= consumer_group.id %>
+    </h5>
+    <hr/>
+  </div>
+</div>
+
+<div class="row mb-5">
+  <div class="col-sm-12">
+    <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>Topic</th>
+          <th>Active</th>
+          <th></th>
+        </tr>
+      </thead>
+      <tbody>
+        <% consumer_group.subscription_groups.each do |subscription_group| %>
+          <%==
+            each_partial(
+              subscription_group.topics,
+              'routing/topic',
+              locals: { subscription_group: subscription_group }
+            )
+          %>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
+</div>

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

@@ -0,0 +1,25 @@
+<% if v.is_a?(Hash) %>
+  <% v.each do |k2, v2| %>
+    <tr>
+      <td>
+        <%= "#{k}.#{k2}" %>
+      </td>
+      <td>
+        <% if k2.to_s.include?('ssl') %>
+          ***
+        <% else %>
+          <%= v2 %>
+        <% end %>
+      </td>
+    </tr>
+  <% end %>
+<% else %>
+  <tr>
+    <td>
+      <%= k %>
+    </td>
+    <td>
+      <%= object_value_to_s(v) %>
+    </td>
+  </tr>
+<% end %>

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

@@ -0,0 +1,18 @@
+<tr>
+  <td>
+    <%= subscription_group.id %>
+  </td>
+  <td>
+    <%= topic.name %>
+  </td>
+  <td>
+    <span class="badge bg-<%= topic.active? ? 'success' : 'warning text-dark' %>">
+    <%= topic.active? %>
+    </span>
+  </td>
+  <td class="text-center">
+    <a href="<%= root_path('routing', topic.id) %>" class="btn btn-sm btn-secondary text-white">
+      Details
+    </a>
+  </td>
+</tr>

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

@@ -0,0 +1,10 @@
+<%== view_title('Routing details') %>
+
+<div class="container mb-5">
+  <%==
+    each_partial(
+      @routes,
+      'routing/consumer_group'
+    )
+  %>
+</div>

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

@@ -0,0 +1,26 @@
+<%==
+  title = [@topic.consumer_group.name, @topic.subscription_group, @topic.name].join(': ')
+  view_title(title, hr: true)
+%>
+
+<div class="container">
+  <div class="row mb-5">
+    <div class="col-sm-12">
+      <table class="processes bg-white table table-hover table-bordered table-striped mb-0 align-middle">
+        <tbody>
+          <% @topic.to_h.each do |k, v| %>
+            <%==
+              partial(
+                'routing/detail',
+                locals: {
+                  k: k,
+                  v: v
+                }
+              )
+            %>
+          <% end %>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,13 @@
+<% unless Karafka.pro? %>
+  <div id="help-us">
+    <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.
+        </div>
+      </div>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,3 @@
+<a class="navbar-brand" href="<%= root_path %>">
+  <img src="<%= root_path('images/logo.svg') %>" alt="Karafka" height="20" width="95" class="d-inline-block align-text-top"/>
+</a>

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

@@ -0,0 +1,31 @@
+<div id="content">
+  <main class="mb-5">
+    <% if @breadcrumbs != false %>
+      <div class="container mb-5">
+        <nav aria-label="breadcrumb">
+          <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+              <a href="<%= root_path %>">
+                Home
+              </a>
+            </li>
+
+            <%== render_breadcrumbs %>
+
+            <% if @current_page && @current_page > 1 %>
+              <li class="breadcrumb-item">
+                <a href="<%= current_path(page: @current_page) %>">
+                  Page <%= @current_page %>
+                </a>
+              </li>
+            <% end %>
+          </ol>
+        </nav>
+      </div>
+    <% end %>
+
+    <%== content %>
+  </main>
+
+  <%== partial 'shared/pagination' %>
+</div>

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

@@ -0,0 +1,20 @@
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="description" content="Karafka application dashboard">
+  <meta name="author" content="Maciej Mensfeld">
+
+  <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="<%= 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">
+
+  <link rel="icon" href="<%= root_path('images/favicon.ico') %>">
+</head>

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

@@ -0,0 +1,57 @@
+<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+  <span class="navbar-toggler-icon"></span>
+</button>
+
+<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: '/consumers') %>" href="<%= root_path('consumers') %>">
+        Consumers
+      </a>
+    </li>
+    <li class="nav-item ms-3">
+      <a class="nav-link <%= nav_class(start_with: '/jobs') %>" href="<%= root_path('jobs') %>">
+        Jobs
+      </a>
+    </li>
+
+    <li class="nav-item ms-3">
+      <a class="nav-link text-muted <%= nav_class(start_with: '/health') %>" href="<%= root_path('health') %>" title="Pro feature">
+        Health
+      </a>
+    </li>
+    <li class="nav-item ms-3">
+      <a class="nav-link <%= nav_class(start_with: '/routing') %>" href="<%= root_path('routing') %>">
+        Routing
+      </a>
+    </li>
+    <li class="nav-item ms-3">
+      <a class="nav-link text-muted <%= nav_class(start_with: '/explorer') %>" href="<%= root_path('explorer') %>" title="Pro feature">
+        Explorer
+      </a>
+    </li>
+    <li class="nav-item ms-3">
+      <a class="nav-link <%= nav_class(start_with: '/errors') %>" href="<%= root_path('errors') %>">
+        Errors
+      </a>
+    </li>
+    <li class="nav-item ms-3">
+      <a class="nav-link text-muted <%= nav_class(start_with: '/dlq') %>" href="<%= root_path('dlq') %>" title="Pro feature">
+        Dead
+      </a>
+    </li>
+    <li class="nav-item ms-3">
+      <a class="nav-link <%= nav_class(start_with: '/cluster') %>" href="<%= root_path('cluster') %>">
+        Cluster
+      </a>
+    </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/_pagination.erb

@@ -0,0 +1,21 @@
+<% if @current_page && (@current_page > 1 || @next_page) %>
+  <div id="pagination" class="container mb-5">
+    <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: @current_page - 1) %>">
+              <span>&laquo; Prev</span>
+            </a>
+          </li>
+
+          <li class="page-item <%= 'disabled' unless @next_page %>">
+            <a class="page-link" href="<%= current_path(page: @next_page) %>">
+              <span>Next &raquo;</span>
+            </a>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,39 @@
+<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>
+
+        <p>
+          Please make sure, that:
+        </p>
+
+        <ul class="mb-5 text-start">
+          <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 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>
+        </p>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,52 @@
+<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.
+        </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 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="https://karafka.io/#become-pro" class="btn btn-success" target="_blank">Become Pro!</a>
+        </p>
+      </div>
+    </div>
+
+  </div>
+</div>

data/lib/karafka/web/version.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+module Karafka
+  module Web
+    # Current gem version
+    VERSION = '0.1.0'
+  end
+end