karafka-web 0.9.0 → 0.10.0.beta1

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

@@ -0,0 +1,47 @@
+<div>
+  <span class="btn">.btn</span>
+
+  <% tailwind_types.each do |type| %>
+    <span class="btn btn-<%= type %>">.btn btn-<%= type %></span>
+  <% end %>
+</div>
+<div class="mb-6"></div>
+
+<div>
+  <span class="btn">.btn</span>
+
+  <% tailwind_types.each do |type| %>
+    <span class="btn btn-<%= type %> btn-active">.btn btn-<%= type %> .btn-active</span>
+  <% end %>
+</div>
+<div class="mb-6"></div>
+
+<div>
+  <span class="btn">.btn</span>
+
+  <% tailwind_types.each do |type| %>
+    <span class="btn btn-outline btn-<%= type %>">.btn .btn-outline btn-<%= type %></span>
+  <% end %>
+</div>
+<div class="mb-6"></div>
+
+<div>
+  <span class="btn">.btn</span>
+
+  <% tailwind_types.each do |type| %>
+    <span class="btn btn-outline btn-<%= type %> btn-active">.btn-outline btn-<%= type %> .btn-active</span>
+  <% end %>
+</div>
+<div class="mb-6"></div>
+
+<div>
+  <%== link_button '#link_button', '#' %>
+
+  <% tailwind_types.each do |type| %>
+    <%==
+      name = :"link_button_#{type}"
+      public_send name, "##{name}", '#'
+    %>
+  <% end %>
+</div>
+<div class="mb-6"></div>

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

@@ -0,0 +1,15 @@
+<div class="col-span-12">
+  <div class="card-detail-container">
+    <% 6.times do |i| %>
+      <div class="card-detail">
+        <div class="card-detail-body">
+          .card-detail-body title
+          <span class="badge badge-sm badge-success">
+            some badge
+          </span>
+        </div>
+      </div>
+    <% end %>
+  </div>
+</div>
+<div class="mb-6"></div>

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

@@ -0,0 +1,123 @@
+<div class="col-span-12">
+  <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 gap-4">
+    <div class="card-metric">
+      <h3>.card-metric h3</h3>
+      <ul>
+        <li>
+          Val1:
+
+          <span class="badge badge-success">
+            .badge .badge-sm .badge-success
+          </span>
+        </li>
+
+        <li>
+          Val2:
+          <span class="badge badge-secondary">
+            .badge .badge-sm .badge-secondary
+          </span>
+        </li>
+
+        <li>
+          Val3:
+          <span class="badge badge-primary">
+            .badge .badge-sm .badge-primary
+          </span>
+        </li>
+      </ul>
+
+        <p class="mt-4 text-right">
+          <span class="badge badge-info">.text-right badge</span>
+        </p>
+    </div>
+
+    <div class="card-metric">
+      <h3>.card-metric h3</h3>
+      <ul>
+        <li>
+          Val1:
+
+          <span class="badge badge-success">
+            .badge .badge-sm .badge-success
+          </span>
+        </li>
+
+        <li>
+          Val2:
+          <span class="badge badge-secondary">
+            .badge .badge-sm .badge-secondary
+          </span>
+        </li>
+
+        <li>
+          Val3:
+          <span class="badge badge-primary">
+            .badge .badge-sm .badge-primary
+          </span>
+        </li>
+      </ul>
+
+        <p class="mt-4 text-right">
+          <span class="badge badge-info">.text-right badge</span>
+        </p>
+    </div>
+
+    <div class="card-metric">
+      <h3>.card-metric h3</h3>
+      <ul>
+        <li>
+          Val1:
+
+          <span class="badge badge-success">
+            .badge .badge-sm .badge-success
+          </span>
+        </li>
+
+        <li>
+          Val2:
+          <span class="badge badge-secondary">
+            .badge .badge-sm .badge-secondary
+          </span>
+        </li>
+
+        <li>
+          Val3:
+          <span class="badge badge-primary">
+            .badge .badge-sm .badge-primary
+          </span>
+        </li>
+      </ul>
+
+        <p class="mt-4 text-right">
+          <span class="badge badge-info">.text-right badge</span>
+        </p>
+    </div>
+
+    <div class="card-metric">
+      <h3>.card-metric .h3 centered</h3>
+
+      <div class="text-center">
+        <span class="badge badge-secondary">
+          .badge .badge-sm .badge-secondary
+        </span>
+
+        <span class="badge badge-secondary">
+          .badge
+        </span>
+
+        <span class="badge badge-secondary">
+          .badge
+        </span>
+
+        <span class="badge badge-secondary">
+          .badge
+        </span>
+
+        <span class="badge badge-secondary">
+          .badge
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="mb-6"></div>

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

@@ -0,0 +1,72 @@
+<div class="col-span-12">
+  <div class="mb-5 px-4 lg:px-10 text-center">
+    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-10 justify-center mb-10">
+      <div class="card-summary-container">
+        <div class="card-summary">
+          <div class="card-summary-body">
+            <div class="card-summary-value">
+              .card-summary-value
+            </div>
+            <div class="card-summary-title">
+              .card-summary-title
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="card-summary-container">
+        <div class="card-summary">
+          <div class="card-summary-body">
+            <div class="card-summary-value">
+              .card-summary-value
+            </div>
+            <div class="card-summary-title">
+              .card-summary-title
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="card-summary-container">
+        <div class="card-summary">
+          <div class="card-summary-body">
+            <div class="card-summary-value">
+              .card-summary-value
+            </div>
+            <div class="card-summary-title">
+              .card-summary-title
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="card-summary-container">
+        <div class="card-summary">
+          <div class="card-summary-body">
+            <div class="card-summary-value">
+              .card-summary-value
+            </div>
+            <div class="card-summary-title">
+              .card-summary-title
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="card-summary-container">
+        <div class="card-summary">
+          <div class="card-summary-body">
+            <div class="card-summary-value">
+              .card-summary-value
+            </div>
+            <div class="card-summary-title">
+              .card-summary-title
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="mb-6"></div>

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

@@ -0,0 +1,39 @@
+<div class="col-span-12">
+  <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+    <div class="card-support">
+      <h3>
+        <%== icon(:book_open) %>
+
+        <span>.card-support h3 span</span>
+      </h3>
+
+      <p>
+        Some p fine text
+      </p>
+
+      <a
+        href="https://karafka.io/docs"
+        target="_blank"
+      >Link to somewhere</a>
+    </div>
+
+    <div class="card-support">
+      <h3>
+        <%== icon(:book_open) %>
+
+        <span>.card-support h3 span</span>
+      </h3>
+
+      <p>
+        Some p fine text
+      </p>
+
+      <a
+        href="https://karafka.io/docs"
+        target="_blank"
+      >Link to somewhere</a>
+    </div>
+  </div>
+</div>
+
+<div class="mb-6"></div>

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

@@ -0,0 +1,9 @@
+<pre class="code">
+<code>code
+/mnt/software/Karafka/karafka/lib/karafka/server.rb:102:in `stop'
+/mnt/software/Karafka/karafka/lib/karafka/server.rb:37:in `block in run'
+/mnt/software/Karafka/karafka/lib/karafka/process.rb:91:in `each'
+/mnt/software/Karafka/karafka/lib/karafka/process.rb:91:in `block (2 levels) in trap_signal'
+</code></pre>
+</div>
+<div class="mb-6"></div>

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

@@ -0,0 +1,52 @@
+<div>
+  <div class="data-table-wrapper">
+    <table class="data-table">
+      <thead>
+        <tr>
+          <th>
+            .data-table
+            Header 1 with sort
+            <%== sort_link('Partition', :id) %>
+          </th>
+          <th>
+            Header 2
+          </th>
+          <th>
+            Header 3
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Row 1 Column 1</td>
+          <td>Row 1 Column 2</td>
+          <td>Row 1 Column 3</td>
+        </tr>
+
+        <tr>
+          <td>Row 2 Column 1</td>
+          <td>Row 2 Column 2</td>
+          <td>Row 2 Column 3</td>
+        </tr>
+
+        <tr>
+          <td>Row 3 Column 1</td>
+          <td>Row 3 Column 2</td>
+          <td>Row 3 Column 3</td>
+        </tr>
+      </tbody>
+    </table>
+
+    <p class="table_metadata">
+      Metadata:
+      <span class="badge">
+        badge1: 10
+      </span>
+      <span class="badge">
+        badge2:
+        0 to 9
+      </span>
+    </p>
+  </div>
+</div>
+<div class="mb-6"></div>

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

@@ -0,0 +1,2 @@
+<h2 class=h2>h2 with .h2</h2>
+<div class="mb-6"></div>

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

@@ -0,0 +1,9 @@
+<div class="flex space-x-2">
+  <% Dir["#{Karafka::Web.gem_root}/lib/karafka/web/ui/views/shared/icons/**"].each do |path| %>
+    <% name = path.split('/').last[1..].split('.').first %>
+    <span title="<%= name %>" class="inline-flex">
+      <%== icon(name) %>
+    </span>
+  <% end %>
+</div>
+<div class="mb-6"></div>

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

@@ -0,0 +1,32 @@
+<div id="pagination">
+  <nav class="flex justify-center">
+    <ul class="pagination flex space-x-1">
+      <li class="disabled">
+        <a class="btn font-normal btn-disabled" href="#">
+          <span>«</span>
+        </a>
+      </li>
+
+      <li class="disabled">
+        <a class="btn font-normal btn-disabled" href="#">
+          <span>‹ Prev</span>
+        </a>
+      </li>
+
+        <li class="active">
+          <a class="btn btn-active font-normal" href="#">
+            <span>
+              1
+            </span>
+          </a>
+        </li>
+
+      <li class="">
+        <a class="btn font-bold font-normal" href="#">
+          <span>Next ›</span>
+        </a>
+      </li>
+    </ul>
+  </nav>
+</div>
+<div class="mb-6"></div>

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

@@ -0,0 +1,52 @@
+<div>
+  <div class="row-table-wrapper">
+    <table class="row-table">
+      <thead>
+        <tr>
+          <th>
+            .row-table
+            Header 1 with sort
+            <%== sort_link('Partition', :id) %>
+          </th>
+          <th>
+            Header 2
+          </th>
+          <th>
+            Header 3
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Row 1 Column 1</td>
+          <td>Row 1 Column 2</td>
+          <td>Row 1 Column 3</td>
+        </tr>
+
+        <tr>
+          <td>Row 2 Column 1</td>
+          <td>Row 2 Column 2</td>
+          <td>Row 2 Column 3</td>
+        </tr>
+
+        <tr>
+          <td>Row 3 Column 1</td>
+          <td>Row 3 Column 2</td>
+          <td>Row 3 Column 3</td>
+        </tr>
+      </tbody>
+    </table>
+
+    <p class="table_metadata">
+      Metadata:
+      <span class="badge">
+        badge1: 10
+      </span>
+      <span class="badge">
+        badge2:
+        0 to 9
+      </span>
+    </p>
+  </div>
+</div>
+<div class="mb-6"></div>

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

@@ -0,0 +1,53 @@
+<div>
+  <div class="data-table-wrapper">
+    <table class="data-table">
+      <thead>
+        <tr>
+          <th>
+            .row-table
+            Header 1 with sort
+            <%== sort_link('Partition', :id) %>
+          </th>
+          <th>
+            Header 2
+          </th>
+          <th>
+            Header 3
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr class="status-row-running">
+          <td>.status-row-running (no special left border)</td>
+          <td>.status-row-running (no special left border)</td>
+          <td>.status-row-running (no special left border)</td>
+        </tr>
+
+        <tr class="status-row-quiet">
+          <td>.status-row-quiet</td>
+          <td>.status-row-quiet</td>
+          <td>.status-row-quiet</td>
+        </tr>
+
+        <tr class="status-row-quieting">
+          <td>.status-row-quiet</td>
+          <td>.status-row-quiet</td>
+          <td>.status-row-quiet</td>
+        </tr>
+
+        <tr class="status-row-stopping">
+          <td>.status-row-stopping</td>
+          <td>.status-row-stopping</td>
+          <td>.status-row-stopping</td>
+        </tr>
+
+        <tr class="status-row-stopped">
+          <td>.status-row-stopped</td>
+          <td>.status-row-stopped</td>
+          <td>.status-row-stopped</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+<div class="mb-6"></div>

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

@@ -0,0 +1,14 @@
+<div class="tab-container">
+  <a href="#" class="custom-tab active">
+    .custom-tab .active
+  </a>
+
+  <a href="#" class="custom-tab">
+    .custom-tab
+  </a>
+
+  <a href="#" class="custom-tab">
+    .custom-tab
+  </a>
+</div>
+<div class="mb-6"></div>

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

@@ -0,0 +1,2 @@
+<p class="text-muted">text with .text-muted</p>
+<div class="mb-6"></div>

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

@@ -0,0 +1,42 @@
+<div class="topic-tiles">
+  <div class="topic-tile">
+    <div class="topic-tile-body">
+      <p class="topic-tile-text">
+        <a href="#" class="topic-tile-link">
+          Topic tile 1
+        </a>
+      </p>
+    </div>
+  </div>
+
+  <div class="topic-tile">
+    <div class="topic-tile-body">
+      <p class="topic-tile-text">
+        <a href="#" class="topic-tile-link">
+          Topic tile 2
+        </a>
+      </p>
+    </div>
+  </div>
+
+  <div class="topic-tile">
+    <div class="topic-tile-body">
+      <p class="topic-tile-text">
+        <a href="#" class="topic-tile-link">
+          Topic tile 3
+        </a>
+      </p>
+    </div>
+  </div>
+
+  <div class="topic-tile">
+    <div class="topic-tile-body">
+      <p class="topic-tile-text">
+        <a href="#" class="topic-tile-link">
+          Topic tile 4
+        </a>
+      </p>
+    </div>
+  </div>
+</div>
+<div class="mb-6"></div>

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

@@ -0,0 +1,19 @@
+<% view_title 'View Title' %>
+
+<%== partial 'ux/alerts' %>
+<%== partial 'ux/badges' %>
+<%== partial 'ux/buttons' %>
+<%== partial 'ux/tabs' %>
+<%== partial 'ux/data_table' %>
+<%== partial 'ux/row_table' %>
+<%== partial 'ux/topic_tiles' %>
+<%== partial 'ux/headers' %>
+<%== partial 'ux/text' %>
+<%== partial 'ux/icons' %>
+<%== partial 'ux/pagination' %>
+<%== partial 'ux/status_rows' %>
+<%== partial 'ux/code' %>
+<%== partial 'ux/card_metric' %>
+<%== partial 'ux/card_support' %>
+<%== partial 'ux/card_detail' %>
+<%== partial 'ux/card_summary' %>

data/lib/karafka/web/version.rb

@@ -3,6 +3,6 @@
 module Karafka
   module Web
     # Current gem version
-    VERSION = '0.9.0'
+    VERSION = '0.10.0.beta1'
   end
 end

data/lib/karafka/web.rb

@@ -7,6 +7,8 @@
   open3
   zlib
   securerandom
+  cgi
+  uri
 ].each { |lib| require lib }
 
 module Karafka