karafka-web 0.1.0

data/lib/karafka/web/ui/public/stylesheets/highlight.min.css

@@ -0,0 +1,10 @@
+pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
+  Theme: GitHub
+  Description: Light theme as seen on github.com
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Outdated base version: https://github.com/primer/github-syntax-light
+  Current colors taken from GitHub's CSS
+*/.hljs{color:#24292e;background:#fff}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#d73a49}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#6f42c1}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#005cc5}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#032f62}.hljs-built_in,.hljs-symbol{color:#e36209}.hljs-code,.hljs-comment,.hljs-formula{color:#6a737d}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#22863a}.hljs-subst{color:#24292e}.hljs-section{color:#005cc5;font-weight:700}.hljs-bullet{color:#735c0f}.hljs-emphasis{color:#24292e;font-style:italic}.hljs-strong{color:#24292e;font-weight:700}.hljs-addition{color:#22863a;background-color:#f0fff4}.hljs-deletion{color:#b31d28;background-color:#ffeef0}

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

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

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

@@ -0,0 +1,5 @@
+<tr>
+  <td><%= broker[:broker_id] %></td>
+  <td><%= broker[:broker_name] %></td>
+  <td><%= broker[:broker_port] %></td>
+</tr>

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

@@ -0,0 +1,22 @@
+<% if topic[:topic_name] != '__consumer_offsets' %>
+  <tr>
+    <td>
+      <a href="<%= root_path('explorer', topic[:topic_name], 0) %>">
+        <%= topic[:topic_name] %>
+      </a>
+    <td>
+      <a href="<%= root_path('explorer', topic[:topic_name], partition[:partition_id]) %>">
+        <%= partition[:partition_id] %>
+      </a>
+    </td>
+    <td>
+      <%= partition[:leader] %>
+    </td>
+    <td>
+      <%= partition[:replica_count] %>
+    </td>
+    <td>
+      <%= partition[:in_sync_replica_brokers] %>
+    </td>
+  </tr>
+<% end %>

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

@@ -0,0 +1,72 @@
+<%== view_title('Cluster informations') %>
+
+<div class="container mb-5">
+  <div class="row mb-3">
+    <div class="col-sm-12">
+      <h4 class="mb-4">
+        Brokers
+      </h4>
+      <hr/>
+    </div>
+  </div>
+
+  <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>Broker id</th>
+              <th>Name</th>
+              <th>Port</th>
+            </tr>
+          </thead>
+          <tbody>
+            <%==
+              each_partial(
+                @cluster_info.brokers,
+                'cluster/broker'
+              )
+            %>
+          </tbody>
+        </table>
+    </div>
+  </div>
+</div>
+
+<div class="container mb-5">
+  <div class="row mb-3">
+    <div class="col-sm-12">
+      <h4 class="mb-4">
+        Topics and partitions
+      </h4>
+      <hr/>
+    </div>
+  </div>
+
+  <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>Topic name</th>
+              <th>Partition id</th>
+              <th>Leader</th>
+              <th>Replica count</th>
+              <th>In sync brokers</th>
+            </tr>
+          </thead>
+          <tbody>
+            <% @topics.each do |topic| %>
+              <%==
+                each_partial(
+                  topic[:partitions],
+                  'cluster/partition',
+                  locals: { topic: topic }
+                )
+              %>
+            <% end %>
+          </tbody>
+        </table>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,27 @@
+<% if @process %>
+  <li class="breadcrumb-item">
+    <a href="<%= root_path('consumers') %>">
+      Consumers
+    </a>
+  </li>
+
+  <li class="breadcrumb-item">
+    <a href="<%= root_path('consumers', @process.id, 'subscriptions') %>">
+      <%= @process.name %>
+    </a>
+  </li>
+
+  <% if current_path.include?('/jobs') %>
+    <li class="breadcrumb-item">
+      <a href="<%= root_path('consumers', @process.id, 'jobs') %>">
+        Running jobs
+      </a>
+    </li>
+  <% else %>
+    <li class="breadcrumb-item">
+      <a href="<%= root_path('consumers', @process.id, 'subscriptions') %>">
+        Active subscriptions
+      </a>
+    </li>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,43 @@
+<tr class="status-row-<%= process.status %>">
+  <td>
+    <div class="badge badge-topic <%= status_bg(process.status) %> float-end">
+      <%= process.status %>
+    </div>
+
+    <a href="<%= root_path('consumers', process.id, 'subscriptions') %>">
+      <%= process.name %>
+    </a>
+
+    <br/>
+
+    <% process.consumer_groups.each do |consumer_group| %>
+      <% consumer_group.topics.each do |topic| %>
+        <span class="badge bg-secondary badge-topic" title="Consumer group: <%= consumer_group.id %>">
+          <%= topic.name %>:
+          <%= topic.partitions.map(&:id).join(',') %>
+        </span>
+      <% end %>
+    <% end %>
+  </td>
+
+  <td>
+    <%== relative_time process.started_at %>
+  </td>
+
+  <td>
+    <span class="badge bg-primary badge-topic">
+      <%= format_memory process.memory_usage %>
+    </span>
+  </td>
+
+  <td>
+    <span class="badge bg-primary badge-topic">
+      <%= process.concurrency %> /
+      <%= process.busy %>
+    </span>
+  </td>
+
+  <td>
+    <%= process.lag_stored %>
+  </td>
+</tr>

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

@@ -0,0 +1,44 @@
+<div id="counters" class="container mb-5">
+  <div class="row">
+    <div class="col-sm-12">
+      <div class="card">
+        <div class="card-body p-2 small">
+          <div class="col-sm-12">
+            <ul class="list-unstyled row text-center mb-0 mt-0">
+              <li class="col-sm">
+                <div class="count mb-1"><%= @counters.messages %></div>
+                <div class="desc">Messages</div>
+              </li>
+              <li class="col-sm">
+                <div class="count mb-1"><%= @counters.batches %></div>
+                <div class="desc">Batches</div>
+              </li>
+              <li class="col-sm">
+                <div class="count mb-1"><%= @processes.sum(&:lag_stored) %></div>
+                <div class="desc">Lag</div>
+              </li>
+              <li class="col-sm">
+                <div class="count mb-1"><%= @counters.busy %></div>
+                <div class="desc">Busy</div>
+              </li>
+              <li class="col-sm">
+                <div class="count mb-1"><%= @counters.enqueued %></div>
+                <div class="desc">Enqueued</div>
+              </li>
+              <li class="col-sm">
+                <a href="<%= root_path('errors') %>">
+                  <div class="count mb-1"><%= @counters.errors %></div>
+                  <div class="desc">Errors</div>
+                </a>
+              </li>
+              <li class="col-sm">
+                <div class="count mb-1"><%= @counters.retries %></div>
+                <div class="desc">Retries</div>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,81 @@
+<div id="summary" class="container text-center mb-5">
+  <div class="row">
+
+    <div class="col-lg-2 offset-md-1">
+      <div class="card mb-0">
+        <div class="card-body">
+          <p class="card-text">
+            <div class="stat mb-1">
+              <%= @counters.processes %>
+            </div>
+            <div class="desc">
+              Processes
+            </div>
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <div class="col-lg-2">
+      <div class="card mb-0">
+        <div class="card-body">
+          <p class="card-text">
+            <div class="stat mb-1">
+              <%= @counters.threads_count %>
+            </div>
+            <div class="desc">
+              Worker threads
+            </div>
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <div class="col-lg-2">
+      <div class="card mb-0">
+        <div class="card-body">
+          <p class="card-text">
+            <div class="stat mb-1">
+              <%= @counters.listeners_count %>
+            </div>
+            <div class="desc">
+              Listeners
+            </div>
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <div class="col-lg-2">
+      <div class="card mb-0">
+        <div class="card-body">
+          <p class="card-text">
+            <div class="stat mb-1">
+              <%= @counters.utilization.round(2) %>
+              %
+            </div>
+            <div class="desc">
+              Utilization
+            </div>
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <div class="col-lg-2">
+      <div class="card mb-0">
+        <div class="card-body">
+          <p class="card-text">
+            <div class="stat mb-1">
+              <%= format_memory @counters.rss %>
+            </div>
+            <div class="desc">
+              RSS
+            </div>
+          </p>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</div>

data/lib/karafka/web/ui/views/consumers/consumer/_consumer_group.erb

@@ -0,0 +1,109 @@
+<div class="row mb-4">
+  <div class="col-sm-12">
+    <h5 class="mb-4">
+      <%= consumer_group.id %>
+    </h5>
+
+    <div class="card-group text-center">
+      <div class="card">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center p-2">
+          State:&nbsp;
+          <span class="badge <%= kafka_state_bg(consumer_group[:state][:state]) %> mt-1 mb-1">
+            <%= consumer_group[:state][:state] %>
+          </span>
+        </div>
+      </div>
+      <div class="card">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center p-2">
+          Join state:&nbsp;
+          <span class="badge <%= kafka_state_bg(consumer_group.join_state) %> mt-1 mb-1">
+            <%= consumer_group.join_state %>
+          </span>
+        </div>
+      </div>
+      <div class="card">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center p-2">
+          State change:&nbsp;
+          <span class="badge bg-secondary mt-1 mb-1">
+            <%==
+              relative_time(
+                Time.at(@process.dispatched_at) - (consumer_group.stateage / 1_000)
+              )
+            %>
+          </span>
+        </div>
+      </div>
+      <div class="card">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center p-2">
+          Last rebalance:&nbsp;
+          <span class="badge bg-secondary mt-1 mb-1">
+            <%==
+              relative_time(
+                Time.at(@process.dispatched_at) - (consumer_group.rebalance_age / 1_000)
+              )
+            %>
+          </span>
+        </div>
+      </div>
+      <div class="card">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center p-2">
+          Rebalance count:&nbsp;
+          <span class="badge bg-secondary mt-1 mb-1">
+            <%= consumer_group.rebalance_cnt %>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <span class="text-end mt-3">
+    <small>
+      Last rebalance reason: <%= consumer_group.rebalance_reason %>
+    </small>
+  </span>
+</div>
+
+<% if consumer_group.topics.empty? %>
+  <div class="row">
+    <div class="col-lg-12">
+      <div class="alert alert-info" role="alert">
+        This process does not consume any messages from any topics of this consumer group.
+      </div>
+    </div>
+  </div>
+<% else %>
+  <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>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>
+          </tr>
+        </thead>
+        <tbody>
+          <% consumer_group.topics.each do |topic| %>
+            <% topic.partitions.each do |partition| %>
+              <%==
+                partial(
+                  'consumers/consumer/partition',
+                  locals: {
+                    topic: topic,
+                    partition: partition,
+                    consumer_group: consumer_group
+                  }
+                )
+              %>
+            <% end %>
+          <% end %>
+        </tbody>
+      </table>
+    </div>
+  </div>
+<% end %>

data/lib/karafka/web/ui/views/consumers/consumer/_job.erb

@@ -0,0 +1,26 @@
+<tr>
+  <td>
+    <code><%= job.consumer %></code>
+  </td>
+  <td>
+    <span class="badge bg-secondary badge-topic" title="Consumer group: <%= job.consumer_group %>">
+      <%= job.topic %>:
+      <%= job.partition %>
+    </span>
+  </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/views/consumers/consumer/_metrics.erb

@@ -0,0 +1,126 @@
+<div class="container mb-5">
+  <div class="row" id="metrics">
+    <div class="col-lg-12">
+      <div class="card-group">
+        <div class="card">
+          <div class="card-body">
+            <h5 class="card-title">Process</h5>
+            <p class="card-text">
+            <ul style="list-style: square !important;">
+              <li class="align-items-center d-flex justify-content-between">
+                Status:
+                <span class="badge <%= status_bg @process.status %>">
+                  <%= @process.status %>
+                </span>
+              </li>
+              <li class="align-items-center d-flex justify-content-between">
+                Started:
+                <span class="badge bg-secondary">
+                  <%== relative_time @process.started_at %>
+                </span>
+              </li>
+              <li class="align-items-center d-flex justify-content-between">
+                State from:
+                <span class="badge bg-secondary">
+                  <%== relative_time @process.dispatched_at %>
+                </span>
+              </li>
+            </ul>
+            </p>
+          </div>
+        </div>
+        <div class="card">
+          <div class="card-body">
+            <h5 class="card-title">Utilization</h5>
+            <p class="card-text">
+            <ul style="list-style: square !important;">
+              <li class="align-items-center d-flex justify-content-between">
+                Threads:
+                <span class="badge bg-primary">
+                  <%= @process.concurrency %>
+                </span>
+              </li>
+              <li class="align-items-center d-flex justify-content-between">
+                Threads utilization:
+                <span class="badge bg-primary">
+                  <%= @process.utilization.round(2) %>%
+                </span>
+              </li>
+              <li class="align-items-center d-flex justify-content-between">
+                CPUs:
+                <span class="badge bg-primary">
+                  <%= @process.cpu_count %>
+                </span>
+              </li>
+              <li class="align-items-center d-flex justify-content-between">
+                CPU usage:
+                <% @process.cpu_usage.each_with_index do |usage, i| %>
+                  <span class="badge bg-primary">
+                    <%= usage %>
+                  </span>
+
+                  <%= i < 2 ? '/' : '' %>
+                <% end %>
+              </li>
+            </ul>
+            </p>
+          </div>
+        </div>
+        <div class="card">
+          <div class="card-body">
+            <h5 class="card-title">Memory usage</h5>
+            <p class="card-text">
+            <ul style="list-style: square !important;">
+              <li class="align-items-center d-flex justify-content-between">
+                RSS:
+                <span class="badge bg-primary">
+                  <%= format_memory @process.memory_usage %>
+                </span>
+              </li>
+              <li class="align-items-center d-flex justify-content-between">
+                OS memory used:
+                <span class="badge bg-primary">
+                  <%= format_memory @process.memory_total_usage %>
+                </span>
+              </li>
+              <li class="align-items-center d-flex justify-content-between">
+                OS memory available:
+                <span class="badge bg-primary">
+                  <%= format_memory @process.memory_size %>
+                </span>
+              </li>
+            </ul>
+            </p>
+          </div>
+        </div>
+        <div class="card">
+          <div class="card-body">
+            <h5 class="card-title">Versions</h5>
+            <p class="card-text">
+            <ul style="list-style: square !important;">
+              <li class="align-items-center d-flex justify-content-between">
+                Ruby:
+                <span class="badge bg-secondary">
+                  <%= @process.ruby %>
+                </span>
+              </li>
+              <li class="align-items-center d-flex justify-content-between">
+                Karafka:
+                <span class="badge bg-secondary">
+                  <%= @process.karafka %>
+                </span>
+              </li>
+              <li class="align-items-center d-flex justify-content-between">
+                WaterDrop version:
+                <span class="badge bg-secondary">
+                  <%= @process.waterdrop %>
+                </span>
+              </li>
+            </ul>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

data/lib/karafka/web/ui/views/consumers/consumer/_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">
+        This process is not running any jobs at the moment.
+      </div>
+    </div>
+  </div>
+</div>

data/lib/karafka/web/ui/views/consumers/consumer/_no_subscriptions.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">
+        This process is not subscribed to any topics.
+      </div>
+    </div>
+  </div>
+</div>

data/lib/karafka/web/ui/views/consumers/consumer/_partition.erb

@@ -0,0 +1,32 @@
+<tr>
+  <td>
+    <%= topic.name %>
+  </td>
+  <td>
+    <%= partition.id %>
+  </td>
+  <td>
+    <%= partition.lag_stored %>
+  </td>
+  <td>
+    <span class="badge <%= lag_trend_bg(partition.lag_stored_d) %>">
+      <%= partition.lag_stored_d %>
+    </span>
+  </td>
+  <td>
+    <%= partition.committed_offset %>
+  </td>
+  <td>
+    <%= partition.stored_offset %>
+  </td>
+  <td>
+    <span class="badge <%= kafka_state_bg(partition.fetch_state) %> mt-1 mb-1">
+      <%= partition.fetch_state %>
+    </span>
+  </td>
+  <td>
+    <span class="badge <%= kafka_state_bg(partition.poll_state) %> mt-1 mb-1">
+      <%= partition.poll_state %>
+    </span>
+  </td>
+</tr>

data/lib/karafka/web/ui/views/consumers/consumer/_stopped.erb

@@ -0,0 +1,10 @@
+<div class="container mb-4">
+  <div class="row">
+    <div class="col-lg-12">
+      <div class="alert alert-danger" role="alert">
+        This process has been stopped.
+        The state presented here shows the last report available.
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,20 @@
+<div class="container">
+  <div class="row mb-4">
+    <div class="col-sm-12">
+
+      <ul class="nav nav-tabs">
+        <li class="nav-item">
+          <a class="nav-link <%= nav_class(include: 'subscriptions') %>" href="<%= root_path('consumers', @process.id, 'subscriptions') %>">
+            Active subscriptions
+          </a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link <%= nav_class(include: 'jobs') %>" href="<%= root_path('consumers', @process.id, 'jobs') %>">
+            Running jobs
+          </a>
+        </li>
+      </ul>
+
+    </div>
+  </div>
+</div>