karafka-web 0.1.0

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

@@ -0,0 +1,60 @@
+<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>
+    <span class="badge bg-primary badge-topic">
+      <%= format_memory process.memory_total_usage %>
+    </span>
+    <span class="badge bg-primary badge-topic">
+      <%= format_memory process.memory_size %>
+    </span>
+  </td>
+
+  <td>
+    <span class="badge bg-primary badge-topic">
+      <%= process.utilization.round(1) %>%
+    </span>
+    <span class="badge bg-primary badge-topic">
+      <%= process.concurrency %> /
+      <%= process.busy %>
+    </span>
+  </td>
+
+  <td>
+    <% process.cpu_usage.each do |metric| %>
+      <span class="badge bg-primary badge-topic">
+        <%= metric %>
+      </span>
+    <% end %>
+  </td>
+
+  <td>
+    <%= process.lag_stored %>
+  </td>
+</tr>

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

@@ -0,0 +1,50 @@
+<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/0') %>">
+                  <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>
+              <li class="col-sm">
+                <a href="<%= root_path('dlq') %>">
+                  <div class="count mb-1"><%= @counters.dead %></div>
+                  <div class="desc">Dead</div>
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

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

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

@@ -0,0 +1,30 @@
+<%== 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">Performance</th>
+            <th class="col-sm-1">Load</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/pro/views/consumers/jobs.erb

@@ -0,0 +1,42 @@
+<%== view_title(@process.name) %>
+
+<% if @process.status == 'stopped' %>
+  <%== partial 'consumers/consumer/stopped' %>
+<% end %>
+
+<%== partial 'consumers/consumer/metrics' %>
+
+<%== partial 'consumers/consumer/tabs' %>
+
+<% if @process.jobs.empty? %>
+  <%== partial 'consumers/consumer/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>Consumer</th>
+              <th>Topic</th>
+              <th>Type</th>
+              <th>First offset</th>
+              <th>Last offset</th>
+              <th>Committed offset</th>
+              <th>Started at</th>
+            </tr>
+          </thead>
+          <tbody>
+            <%==
+              render_each(
+                @process.jobs,
+                'consumers/consumer/_job',
+                local: :job
+              )
+            %>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+<% end %>

data/lib/karafka/web/ui/pro/views/consumers/subscriptions.erb

@@ -0,0 +1,23 @@
+<%== view_title(@process.name) %>
+
+<% if @process.status == 'stopped' %>
+  <%== partial 'consumers/consumer/stopped' %>
+<% end %>
+
+<%== partial 'consumers/consumer/metrics' %>
+
+<%== partial 'consumers/consumer/tabs' %>
+
+<% if @process.consumer_groups.empty? %>
+  <%== partial 'consumers/consumer/no_subscriptions' %>
+<% end %>
+
+<div class="container">
+  <%==
+    render_each(
+      @process.consumer_groups,
+      'consumers/consumer/_consumer_group',
+      local: :consumer_group
+    )
+  %>
+</div>

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

@@ -0,0 +1,5 @@
+<li class="breadcrumb-item">
+  <a href="<%= root_path('dlq') %>">
+    Dead Letter Queue topics
+  </a>
+</li>