karafka-web 0.1.0

data/lib/karafka/web/ui/pro/views/dlq/_no_topics.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">
+        No Dead Letter Queue topics exist in Kafka.
+      </div>
+    </div>
+  </div>
+</div>

data/lib/karafka/web/ui/pro/views/dlq/_topic.erb

@@ -0,0 +1,12 @@
+<div class="col">
+  <div class="card" >
+    <div class="card-body p-2">
+      <p class="card-text mb-0 p-2">
+        <a href="<%= root_path('explorer', topic[:topic_name], 0) %>">
+          <%= topic[:topic_name] %> /
+          <%= topic[:partition_count] %>
+        </a>
+      </p>
+    </div>
+  </div>
+</div>

data/lib/karafka/web/ui/pro/views/dlq/index.erb

@@ -0,0 +1,16 @@
+<%== view_title('Dead Letter Queue topics', hr: true) %>
+
+<% if @dlq_topics.empty? %>
+  <%== partial 'dlq/no_topics' %>
+<% else %>
+  <div class="container">
+    <div class="row mb-5 row-cols-1 row-cols-md-4 g-4">
+      <%==
+        each_partial(
+          @dlq_topics,
+          'dlq/topic'
+        )
+      %>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,25 @@
+<li class="breadcrumb-item">
+  <a href="<%= root_path('errors', 0) %>">
+    Errors
+  </a>
+</li>
+
+<li class="breadcrumb-item">
+  <a href="<%= root_path('errors', @partition_id) %>">
+    Partition <%= @partition_id %>
+  </a>
+</li>
+
+<% if @offset %>
+  <li class="breadcrumb-item">
+    <a href="<%= root_path('errors', @partition_id, @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/pro/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/pro/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.partition, error_msg.offset) %>" class="btn btn-sm btn-secondary text-white">
+      Details
+    </a>
+  </td>
+</tr>

data/lib/karafka/web/ui/pro/views/errors/_partition_option.erb

@@ -0,0 +1,7 @@
+<% if @partition_id == partition %>
+  <option value="<%= root_path('errors', partition) %>" selected=selected>
+<% else %>
+  <option value="<%= root_path('errors', partition) %>">
+<% end %>
+  <%= partition %>
+</option>

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

@@ -0,0 +1,58 @@
+<div class="container mb-5">
+  <div class="row">
+    <div class="col">
+      <h3>
+        Errors
+      </h3>
+    </div>
+
+    <div class="col">
+        <div class="col-auto text-end">
+           <label class="col-form-label">Partition</label>
+        </div>
+    </div>
+
+    <div class="col pt-1 mb-0 pb-0">
+        <div class="col-auto">
+          <select class="form-select form-select-sm mb-0 form-control" id="current-partition">
+            <%==
+              each_partial(
+                @partitions_count.times.to_a,
+                'errors/partition_option',
+                local: :partition
+              )
+            %>
+          </select>
+        </div>
+    </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/pro/views/errors/show.erb

@@ -0,0 +1,56 @@
+<%==
+  type = @error_message.payload[:type]
+  error_class = @error_message.payload[:error_class]
+  offset = @error_message.offset
+
+  view_title("#{type}: #{error_class} #{offset}")
+%>
+
+<div class="container">
+  <div class="row mb-4">
+    <div class="col-sm-12">
+      <h5 class="mb-2">
+        Metadata
+      </h5>
+      <hr/>
+    </div>
+  </div>
+
+  <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 class="row mb-4">
+    <div class="col-sm-12">
+      <h5 class="mb-2">
+        Backtrace
+      </h5>
+      <hr/>
+    </div>
+  </div>
+  <div class="row mb-4">
+    <div class="col-sm-12">
+      <div class="card">
+        <div class="card-body">
+          <pre class="m-0 p-0"><code class="wrapped json p-0 m-0"><%= @error_message.payload[:backtrace] %></code></pre>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

data/lib/karafka/web/ui/pro/views/explorer/_breadcrumbs.erb

@@ -0,0 +1,29 @@
+<li class="breadcrumb-item">
+  <a href="<%= root_path('explorer') %>">
+    Explorer
+  </a>
+</li>
+
+<% if @topic_id %>
+  <li class="breadcrumb-item">
+    <a href="<%= root_path('explorer', @topic_id, 0) %>">
+      <%= @topic_id %>
+    </a>
+  </li>
+<% end %>
+
+<% if @partition_id %>
+  <li class="breadcrumb-item">
+    <a href="<%= root_path('explorer', @topic_id, @partition_id) %>">
+      Partition <%= @partition_id %>
+    </a>
+  </li>
+<% end %>
+
+<% if @offset %>
+  <li class="breadcrumb-item active">
+    <a href="<%= root_path('explorer', @topic_id, @partition_id, @offset) %>">
+      <%= @offset %>
+    </a>
+  </li>
+<% end %>

data/lib/karafka/web/ui/pro/views/explorer/_detail.erb

@@ -0,0 +1,21 @@
+<% if v.is_a?(Hash) && !v.empty? %>
+  <% v.each do |k2,v2| %>
+   <tr class="align-middle">
+      <td>
+         <%= "#{k}.#{k2}" %>
+      </td>
+      <td>
+        <%= v2 %>
+      </td>
+   </tr>
+  <% end %>
+<% else %>
+  <tr>
+    <td>
+      <%= k %>
+    </td>
+    <td>
+      <%= object_value_to_s(v) %>
+    </td>
+  </tr>
+<% end %>

data/lib/karafka/web/ui/pro/views/explorer/_encryption_enabled.erb

@@ -0,0 +1,18 @@
+<div class="row">
+  <div class="col-sm-12">
+    <div class="alert alert-warning" role="alert">
+      <h4 class="alert-heading">
+        The payload cannot be displayed.
+      </h4>
+      <p>
+        Encryption is enabled.
+      </p>
+      <hr>
+      <p class="mb-0">
+        When encryption is enabled, the payload is not visible via the web UI.
+
+        Please set the <code>ui.decrypt</code> config option to <code>true</code> if you want the payload to be visible here.
+      </p>
+    </div>
+  </div>
+</div>

data/lib/karafka/web/ui/pro/views/explorer/_failed_deserialization.erb

@@ -0,0 +1,4 @@
+<div class="alert alert-warning" role="alert">
+  We could not deserialize the data due to the following error:
+  <code><%= @payload_error.class %></code>. Raw payload displayed instead.
+</div>

data/lib/karafka/web/ui/pro/views/explorer/_message.erb

@@ -0,0 +1,16 @@
+<tr>
+  <td>
+    <%= message.offset %>
+  </td>
+  <td>
+    <%== relative_time message.timestamp %>
+  </td>
+  <td>
+    <%= message.key %>
+  </td>
+  <td class="text-center">
+    <a href="<%= root_path('explorer', message.topic, message.partition, message.offset) %>" class="btn btn-sm btn-secondary">
+      Details
+    </a>
+  </td>
+</tr>

data/lib/karafka/web/ui/pro/views/explorer/_partition_option.erb

@@ -0,0 +1,7 @@
+<% if @partition_id == partition %>
+  <option value="<%= root_path('explorer', @topic_id, partition) %>" selected=selected>
+<% else %>
+  <option value="<%= root_path('explorer', @topic_id, partition) %>">
+<% end %>
+  <%= partition %>
+</option>

data/lib/karafka/web/ui/pro/views/explorer/_topic.erb

@@ -0,0 +1,12 @@
+<div class="col">
+  <div class="card" >
+    <div class="card-body p-2">
+      <p class="card-text mb-0 p-2">
+        <a href="<%= root_path('explorer', topic[:topic_name], 0) %>">
+          <%= topic[:topic_name] %> /
+          <%= topic[:partition_count] %>
+        </a>
+      </p>
+    </div>
+  </div>
+</div>

data/lib/karafka/web/ui/pro/views/explorer/index.erb

@@ -0,0 +1,17 @@
+<div class="container mb-5">
+  <div class="row">
+    <h3>Explorer</h3>
+  </div>
+  <hr>
+</div>
+
+<div class="container">
+  <div class="row mb-5 row-cols-1 row-cols-md-4 g-4">
+    <%==
+      each_partial(
+        @topics,
+        'explorer/topic'
+      )
+    %>
+  </div>
+</div>

data/lib/karafka/web/ui/pro/views/explorer/partition.erb

@@ -0,0 +1,56 @@
+<div class="container mb-5">
+  <div class="row">
+    <div class="col">
+      <h3>
+        <%= @topic_id %>
+      </h3>
+    </div>
+
+    <div class="col">
+        <div class="col-auto text-end">
+           <label class="col-form-label">Partition</label>
+        </div>
+    </div>
+
+    <div class="col pt-1 mb-0 pb-0">
+        <div class="col-auto">
+          <select class="form-select form-select-sm mb-0 form-control" id="current-partition">
+            <%==
+              each_partial(
+                @partitions_count.times.to_a,
+                'explorer/partition_option',
+                local: :partition
+              )
+            %>
+          </select>
+        </div>
+    </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>Offset</th>
+            <th>Timestamp</th>
+            <th>Key</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          <%==
+            each_partial(
+              @messages,
+              'explorer/message'
+            )
+          %>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>

data/lib/karafka/web/ui/pro/views/explorer/show.erb

@@ -0,0 +1,65 @@
+<div class="container">
+  <div class="row mb-4">
+    <div class="col-sm-12">
+      <h5 class="mb-2">
+        Metadata
+      </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">
+        <tbody>
+          <% @message.metadata.to_h.except(:received_at).each do |k, v| %>
+            <%==
+              partial(
+                'explorer/detail',
+                locals: {
+                  k: k,
+                  v: v
+                }
+              )
+            %>
+          <% end %>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+
+<div class="container">
+  <div class="row mb-4">
+    <div class="col-sm-12">
+      <h5 class="mb-2">
+        Payload
+      </h5>
+      <hr/>
+
+    </div>
+  </div>
+
+  <% if @decrypt %>
+    <div class="row">
+      <div class="col-sm-12">
+        <% if @payload_error %>
+          <%== partial 'explorer/failed_deserialization' %>
+        <% end %>
+
+        <div class="card">
+          <div class="card-body">
+            <% if @payload_error %>
+              <pre class="m-0 p-0"><code class="wrapped json p-0 m-0"><%= @message.raw_payload %></code></pre>
+            <% else %>
+              <pre class="m-0 p-0"><code class="wrapped json p-0 m-0"><%= @pretty_payload %></code></pre>
+            <% end %>
+          </div>
+        </div>
+      </div>
+    </div>
+  <% else %>
+    <%== partial 'explorer/encryption_enabled' %>
+  <% end %>
+</div>

data/lib/karafka/web/ui/pro/views/health/_breadcrumbs.erb

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

data/lib/karafka/web/ui/pro/views/health/_partition.erb

@@ -0,0 +1,35 @@
+<tr class="align-middle status-row-<%= details[:process].status %>">
+  <td>
+    <%= topic_name %>
+  </td>
+  <td>
+    <%= partition_id %>
+  </td>
+  <td><%= details[:lag_stored] %></td>
+  <td>
+    <span class="badge <%= lag_trend_bg(details[:lag_stored_d]) %>">
+      <%= details[:lag_stored_d] %>
+    </span>
+  </td>
+  <td>
+    <%= details[:committed_offset] %>
+  </td>
+  <td>
+    <%= details[:stored_offset] %>
+  </td>
+  <td>
+    <span class="badge <%= kafka_state_bg(details[:fetch_state]) %> mt-1 mb-1">
+      <%= details[:fetch_state] %>
+    </span>
+  </td>
+  <td>
+    <span class="badge <%= kafka_state_bg(details[:poll_state]) %> mt-1 mb-1">
+      <%= details[:poll_state] %>
+    </span>
+  </td>
+  <td>
+    <a href="<%= root_path('consumers', details[:process].id, 'subscriptions') %>">
+      <%= details[:process].name %>
+    </a>
+  </td>
+</tr>

data/lib/karafka/web/ui/pro/views/health/index.erb

@@ -0,0 +1,60 @@
+<%== view_title('Consumers groups health') %>
+
+<% if @stats.empty? %>
+  <div class="container mb-4">
+    <div class="row">
+      <div class="col-lg-12">
+        <div class="alert alert-info" role="alert">
+          No health data is available. It may mean no processes are running.
+        </div>
+      </div>
+    </div>
+  </div>
+<% end %>
+
+<% @stats.each do |cg_name, details| %>
+<div class="container mb-5">
+  <div class="row mb-3">
+    <div class="col-sm-12">
+      <h4 class="mb-4"><%= cg_name %></h4>
+      <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 class="align-middle">Topic</th>
+            <th>Partition</th>
+            <th>Lag stored</th>
+            <th>Lag trend</th>
+            <th>Committed offset</th>
+            <th>Stored offset</th>
+            <th>Fetch state</th>
+            <th>Poll state</th>
+            <th>Process name</th>
+          </tr>
+        </thead>
+        <tbody>
+          <% details.sort_by(&:first).each do |topic_name, partitions| %>
+            <% partitions.sort_by(&:first).each do |partition_id, details| %>
+              <%==
+                partial(
+                  'health/partition',
+                  locals: {
+                    topic_name: topic_name,
+                    partition_id: partition_id,
+                    details: details
+                  }
+                )
+              %>
+            <% end %>
+          <% end %>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+<% end %>

data/lib/karafka/web/ui/pro/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/pro/views/jobs/_job.erb

@@ -0,0 +1,31 @@
+<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>
+    <%= job.first_offset %>
+  </td>
+  <td>
+    <%= job.last_offset %>
+  </td>
+  <td>
+    <%= job.comitted_offset %>
+  </td>
+  <td>
+    <%== relative_time job.started_at %>
+  </td>
+</tr>

data/lib/karafka/web/ui/pro/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>