karafka-web 0.9.1 → 0.10.0.beta1

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

@@ -1,8 +1,8 @@
-<p>
+<p class="mb-2">
   None of the <code>karafka server</code> processes is subscribed to handle the
   <code><%= Karafka::Web.config.topics.consumers.reports %></code> topic data aggregations.
 </p>
 
-<p class="mb-0">
+<p>
   If you are limiting the topics you consume using the <a href="https://karafka.io/docs/CLI/#limiting-consumer-groups-used-per-process" target="_blank">limiting API</a>, please include the Karafka Web consumer group and the <code><%= Karafka::Web.config.topics.consumers.reports %></code> topic.
 </p>

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

@@ -2,7 +2,7 @@
   Web UI requires the following topics to exist:
 </p>
 
-<ul>
+<ul class="list-disc m-5">
   <% details.each do |name, details| %>
     <li>
       <code><%= name %></code> - <%= details[:present] ? 'Exists' : 'Missing' %>
@@ -10,11 +10,11 @@
   <% end %>
 </ul>
 
-<p>
+<p class="mb-2">
   Please ensure all those topics exist and are accessible to your Karafka user.
 </p>
 
-<p class="mb-0">
+<p>
   You can read more about their setup and configuration
   <a href="https://karafka.io/docs/Web-UI-Getting-Started/" target="_blank">here</a>.
 </p>

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

@@ -1,57 +1,30 @@
-<p>
+<p class="mb-2">
   Below you can find information about your setup. This can be helpful when debugging or reporting bugs and issues.
 </p>
 
-<p>
-  <span class="badge bg-secondary">
-    <%= @sampler.ruby_version %>
-  </span>
-
-  <span class="badge bg-secondary">
-    karafka
-    <%= @sampler.karafka_version %>
-  </span>
-
-  <span class="badge bg-secondary">
-    karafka-web
-    <%= @sampler.karafka_web_version %>
-  </span>
-
-  <span class="badge bg-secondary">
-    karafka-core
-    <%= @sampler.karafka_core_version %>
-  </span>
-
-  <span class="badge bg-secondary">
-    rdkafka
-    <%= @sampler.rdkafka_version %>
-  </span>
-
-  <span class="badge bg-secondary">
-    librdkafka
-    <%= @sampler.librdkafka_version %>
-  </span>
-
-  <span class="badge bg-secondary">
-    waterdrop
-    <%= @sampler.waterdrop_version %>
-  </span>
+<p class="mb-2">
+  <%== badge_primary @sampler.ruby_version %>
+  <%== badge_primary "karafka #{@sampler.karafka_version} #{Karafka.pro? ? 'Pro' : 'OSS'}" %>
+  <%== badge_primary "karafka-web #{@sampler.karafka_web_version}" %>
+  <%== badge_primary "karafka-core #{@sampler.karafka_core_version}" %>
+  <%== badge_primary "rdkafka #{@sampler.rdkafka_version}" %>
+  <%== badge_primary "librdkafka #{@sampler.librdkafka_version}" %>
+  <%== badge_primary "waterdrop #{@sampler.waterdrop_version}" %>
 
   <% if Object.const_defined?(:Rails, false) %>
-    <span class="badge bg-secondary">
-      rails
-      <%= Rails.gem_version %>
-    </span>
+    <%== badge_primary "rails #{Rails.gem_version}" %>
   <% end %>
+
+  <%== badge_primary "memsize #{ObjectSpace.respond_to?(:memsize_of)}" %>
 </p>
 
-<hr/>
+<div class="divider"></div>
 
 <p>
   Below you can find information about internal Karafka Web-UI topics:
 </p>
 
-<ul class="mb-0">
+<ul class="list-disc m-5 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>

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

@@ -1,209 +1,220 @@
-<%== view_title('Web UI Status Details', hr: true) %>
+<% view_title 'Web UI Status Details' %>
 
-<div class="container">
-  <div class="row">
-    <div class="col-lg-10 offset-md-1">
-      <%==
-        partial(
-          "status/#{@status.enabled.to_s}",
+<div class="max-w-6xl mx-auto">
+  <%==
+    partial(
+      "status/#{@status.enabled.to_s}",
+      locals: {
+        title: 'Web UI setup in karafka.rb',
+        description: partial(
+          "status/#{@status.enabled.partial_namespace}/enabled",
           locals: {
-            title: 'Web UI setup in karafka.rb',
-            description: partial(
-              "status/#{@status.enabled.partial_namespace}/enabled",
-              locals: {
-                details: @status.enabled.details
-              }
-            )
+            details: @status.enabled.details
           }
         )
-      %>
+      }
+    )
+  %>
 
-      <%==
-        partial(
-          "status/#{@status.connection.to_s}",
+  <%==
+    partial(
+      "status/#{@status.connection.to_s}",
+      locals: {
+        title: 'Connection to Kafka',
+        description: partial(
+          "status/#{@status.connection.partial_namespace}/connection",
           locals: {
-            title: 'Connection to Kafka',
-            description: partial(
-              "status/#{@status.connection.partial_namespace}/connection",
-              locals: {
-                details: @status.connection.details
-              }
-            )
+            details: @status.connection.details
           }
         )
-      %>
+      }
+    )
+  %>
 
-      <%==
-        partial(
-          "status/#{@status.topics.to_s}",
+  <%==
+    partial(
+      "status/#{@status.topics.to_s}",
+      locals: {
+        title: 'Web UI topics presence',
+        description: partial(
+          'status/failures/topics',
           locals: {
-            title: 'Web UI topics presence',
-            description: partial(
-              'status/failures/topics',
-              locals: {
-                details: @status.topics.details
-              }
-            )
+            details: @status.topics.details
           }
         )
-      %>
+      }
+    )
+  %>
 
-      <%==
-        partial(
-          "status/#{@status.partitions.to_s}",
+  <%==
+    partial(
+      "status/#{@status.partitions.to_s}",
+      locals: {
+        title: 'Partitions count',
+        description: partial(
+          'status/failures/partitions',
           locals: {
-            title: 'Partitions count',
-            description: partial(
-              'status/failures/partitions',
-              locals: {
-                details: @status.partitions.details
-              }
-            )
+            details: @status.partitions.details
           }
         )
-      %>
+      }
+    )
+  %>
 
-      <%==
-        partial(
-          "status/#{@status.replication.to_s}",
+  <%==
+    partial(
+      "status/#{@status.replication.to_s}",
+      locals: {
+        title: 'Replication factors',
+        description: partial(
+          'status/warnings/replication',
           locals: {
-            title: 'Replication factors',
-            description: partial(
-              'status/warnings/replication',
-              locals: {
-                details: @status.replication.details
-              }
-            )
+            details: @status.replication.details
           }
         )
-      %>
+      }
+    )
+  %>
 
-      <%==
-        partial(
-          "status/#{@status.initial_consumers_state.to_s}",
+  <%==
+    partial(
+      "status/#{@status.initial_consumers_state.to_s}",
+      locals: {
+        title: 'Initial consumers state',
+        description: partial(
+          'status/failures/initial_consumers_state',
           locals: {
-            title: 'Initial consumers state',
-            description: partial(
-              'status/failures/initial_consumers_state',
-              locals: {
-                details: @status.initial_consumers_state.details
-              }
-            )
+            details: @status.initial_consumers_state.details
           }
         )
-      %>
+      }
+    )
+  %>
 
-      <%==
-        partial(
-          "status/#{@status.initial_consumers_metrics.to_s}",
+  <%==
+    partial(
+      "status/#{@status.initial_consumers_metrics.to_s}",
+      locals: {
+        title: 'Initial consumers metrics',
+        description: partial(
+          'status/failures/initial_consumers_metrics',
           locals: {
-            title: 'Initial consumers metrics',
-            description: partial(
-              'status/failures/initial_consumers_metrics',
-              locals: {
-                details: @status.initial_consumers_metrics.details
-              }
-            )
+            details: @status.initial_consumers_metrics.details
           }
         )
-      %>
+      }
+    )
+  %>
 
-      <%==
-        partial(
-          "status/#{@status.consumers_reports.to_s}",
+  <%==
+    partial(
+      "status/#{@status.consumers_reports.to_s}",
+      locals: {
+        title: 'Consumers reports',
+        description: partial(
+          'status/failures/consumers_reports',
           locals: {
-            title: 'Consumers reports',
-            description: partial(
-              'status/failures/consumers_reports',
-              locals: {
-                details: @status.consumers_reports.details
-              }
-            )
+            details: @status.consumers_reports.details
           }
         )
-      %>
+      }
+    )
+  %>
 
-      <%==
-        partial(
-          "status/#{@status.live_reporting.to_s}",
+  <%==
+    partial(
+      "status/#{@status.live_reporting.to_s}",
+      locals: {
+        title: 'Live reporting',
+        description: partial(
+          'status/failures/live_reporting',
           locals: {
-            title: 'Live reporting',
-            description: partial(
-              'status/failures/live_reporting',
-              locals: {
-                details: @status.live_reporting.details
-              }
-            )
+            details: @status.live_reporting.details
           }
         )
-      %>
+      }
+    )
+  %>
 
-      <%==
-        partial(
-          "status/#{@status.state_calculation.to_s}",
+  <%==
+    partial(
+      "status/#{@status.materializing_lag.to_s}",
+      locals: {
+        title: 'Materializing lag',
+        description: partial(
+          'status/failures/materializing_lag',
           locals: {
-            title: 'State calculation subscription',
-            description: partial(
-              'status/failures/state_calculation',
-              locals: {
-                details: @status.state_calculation.details
-              }
-            )
+            details: @status.materializing_lag.details
           }
         )
-      %>
+      }
+    )
+  %>
 
-      <%==
-        partial(
-          "status/#{@status.consumers_reports_schema_state.to_s}",
+  <%==
+    partial(
+      "status/#{@status.state_calculation.to_s}",
+      locals: {
+        title: 'State calculation subscription',
+        description: partial(
+          'status/failures/state_calculation',
           locals: {
-            title: 'Consumers reports schema compatibility',
-            description: partial(
-              'status/failures/consumers_reports_schema_state'
-            )
+            details: @status.state_calculation.details
           }
         )
-      %>
+      }
+    )
+  %>
 
-      <%==
-        partial(
-          "status/#{@status.routing_topics_presence.to_s}",
-          locals: {
-            title: 'Routing topics presence',
-            description: partial(
-              'status/warnings/routing_topics_presence',
-              locals: {
-                details: @status.routing_topics_presence.details
-              }
-            )
-          }
+  <%==
+    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}",
+  <%==
+    partial(
+      "status/#{@status.routing_topics_presence.to_s}",
+      locals: {
+        title: 'Routing topics presence',
+        description: partial(
+          'status/warnings/routing_topics_presence',
           locals: {
-            title: 'Karafka Pro subscription',
-            description: partial(
-              'status/warnings/pro_subscription',
-              locals: {
-                details: @status.pro_subscription.details
-              }
-            )
+            details: @status.routing_topics_presence.details
           }
         )
-      %>
+      }
+    )
+  %>
 
-      <%==
-        partial(
-          'status/info',
+  <%==
+    partial(
+      "status/#{@status.pro_subscription.to_s}",
+      locals: {
+        title: 'Karafka Pro subscription',
+        description: partial(
+          'status/warnings/pro_subscription',
           locals: {
-            title: 'Components info',
-            description: partial('status/info/components')
+            details: @status.pro_subscription.details
           }
         )
-      %>
-    </div>
-  </div>
+      }
+    )
+  %>
+
+  <%==
+    partial(
+      'status/info',
+      locals: {
+        title: 'Components info',
+        description: partial('status/info/components')
+      }
+    )
+  %>
 </div>

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

@@ -1,11 +1,11 @@
-<p>
+<p class="mb-2">
   High latency detected when connecting to the Kafka cluster from the Web-UI.
 </p>
 
-<p>
+<p class="mb-2">
   Kafka is not designed to perform optimally under high network latencies; even when configurations seem appropriate, you may still encounter disconnects and other unexpected issues.
 </p>
 
-<p class="mb-0">
+<p>
   It took Web-UI <strong><%= details[:time].round(2) %> ms</strong> to get the cluster info.
 </p>

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

@@ -1,8 +1,8 @@
-<p>
+<p class="mb-2">
   You are using the OSS version of the Karafka ecosystem, and some of the Karafka ecosystem features are unavailable in the OSS version.
 </p>
 
-<p class="mb-0">
+<p>
   Please help us make the Karafka ecosystem better by subscribing to our
   <a target="_blank" href="https://karafka.io/#become-pro">Pro</a>
   offering.

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

@@ -1,4 +1,4 @@
-<p>
+<p class="mb-2">
   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>
 
@@ -6,7 +6,7 @@
   Current replication factors for Karafka Web UI topics:
 </p>
 
-<ul>
+<ul class="list-disc m-5">
   <% details.each do |name, details| %>
     <li>
       <code><%= name %></code>: <code><%= details[:replication] %></code>

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

@@ -2,7 +2,7 @@
   The following active topics present in your <code>karafka.rb</code> file were not located in the Kafka cluster:
 </p>
 
-<ul>
+<ul class="list-disc m-5">
   <% details.each do |topic_name| %>
     <li>
       <code><%= topic_name %></code>

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

@@ -0,0 +1,5 @@
+<li>
+  <a href="<%= root_path('support') %>">
+    Support
+  </a>
+</li>

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

@@ -0,0 +1,71 @@
+<% view_title 'Support' %>
+
+<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+  <div class="card-support">
+    <h3>
+      <%== icon(:book_open) %>
+
+      <span>Karafka Documentation</span>
+    </h3>
+
+    <p>
+      Find comprehensive guides and documentation to help you start working with Karafka as quickly as possible, as well as support if you get stuck.
+    </p>
+
+    <a
+      href="https://karafka.io/docs"
+      target="_blank"
+    >Go to Karafka Docs</a>
+  </div>
+
+  <div class="card-support">
+    <h3>
+      <%== icon(:slack) %>
+
+      <span>Slack Channel</span>
+    </h3>
+
+    <p>
+      Join our Slack community to connect with other users and get help and advice from our team and the community.
+    </p>
+
+    <a
+      href="https://karafka.io/slack"
+      target="_blank"
+    >Join Karafka Slack</a>
+  </div>
+
+  <div class="card-support">
+    <h3>
+      <%== icon(:globe) %>
+
+      <span>Karafka Website</span>
+    </h3>
+
+    <p>
+      Visit the official Karafka website for more information about the framework, features, and use cases.
+    </p>
+
+    <a
+      href="https://karafka.io"
+      target="_blank"
+    >Go to Karafka Website</a>
+  </div>
+
+  <div class="card-support">
+    <h3>
+      <%== icon(:github) %>
+
+      <span>Github Repository</span>
+    </h3>
+
+    <p>
+      Check out the Karafka source code, contribute to the project, or open an issue if you find a bug.
+    </p>
+
+    <a
+      href="https://github.com/karafka/karafka"
+      target="_blank"
+    >Go to Karafka GitHub</a>
+  </div>
+</div>

data/lib/karafka/web/ui/views/ux/_alerts.erb

@@ -0,0 +1,25 @@
+<div>
+  <% tailwind_types.each do |type| %>
+    <div class="mb-3">
+      <%==
+        name = :"alert_#{type}"
+        public_send name, "##{name}"
+      %>
+    </div>
+  <% end %>
+</div>
+
+<div class="mb-6"></div>
+
+<div>
+  <% tailwind_types.each do |type| %>
+    <div class="mb-3">
+      <%
+        name = :"alert_box_#{type}"
+        public_send name, "##{name}", 'Some internal content'
+      %>
+    </div>
+  <% end %>
+</div>
+
+<div class="mb-6"></div>

data/lib/karafka/web/ui/views/ux/_badges.erb

@@ -0,0 +1,21 @@
+<div>
+  <span class="badge">.badge</span>
+  <span class="badge badge-primary">.badge .badge-primary</span>
+  <span class="badge badge-info">.badge .badge-info</span>
+  <span class="badge badge-secondary">.badge .badge-secondary</span>
+  <span class="badge badge-success">.badge .badge-success</span>
+  <span class="badge badge-warning">.badge .badge-warning</span>
+  <span class="badge badge-error">.badge .badge-error</span>
+</div>
+<div class="mb-6"></div>
+
+<div>
+  <%== badge '#badge' %>
+  <%== badge_primary '#badge_primary' %>
+  <%== badge_info '#badge_info' %>
+  <%== badge_secondary '#badge_secondary' %>
+  <%== badge_success '#badge_success' %>
+  <%== badge_warning '#badge_warning' %>
+  <%== badge_error '#badge_error' %>
+</div>
+<div class="mb-6"></div>

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

@@ -0,0 +1,5 @@
+<li>
+  <a href="<%= root_path('ux') %>">
+    Web UI UX
+  </a>
+</li>