karafka-web 0.9.0 → 0.10.0.beta1

data/lib/karafka/web/ui/views/shared/_content.erb

@@ -1,31 +1,5 @@
-<div id="content">
-  <div class="mb-4">
-    <% if @breadcrumbs != false %>
-      <div class="container mb-5">
-        <nav aria-label="breadcrumb">
-          <ol class="breadcrumb">
-            <li class="breadcrumb-item">
-              <a href="<%= root_path %>">
-                Home
-              </a>
-            </li>
-
-            <%== render_breadcrumbs %>
-
-            <% if @current_page && @current_page > 1 %>
-              <li class="breadcrumb-item">
-                <a href="<%= current_path(page: @current_page) %>">
-                  Page <%= @current_page %>
-                </a>
-              </li>
-            <% end %>
-          </ol>
-        </nav>
-      </div>
-    <% end %>
-
-    <%== content %>
-  </div>
+<div id="content" class="col-span-12 mb-3">
+  <%== content %>
 
   <%== partial 'shared/pagination' %>
 </div>

data/lib/karafka/web/ui/views/shared/_controls.erb

@@ -0,0 +1,15 @@
+<div>
+  <button class="py-1 px-3 rounded-md text-sm hover:bg-gray-200 active" title="Toggle theme" id="theme-selector">
+    <span id="theme-selector-light" class="hidden">
+      <%== icon(:sun) %>
+    </span>
+
+    <span id="theme-selector-dark" class="hidden">
+      <%== icon(:moon) %>
+    </span>
+  </button>
+
+  <button class="py-1 px-3 rounded-md text-sm hover:bg-gray-200" title="Toggle live poll" id="live-poll">
+    <%== icon(:refresh) %>
+  </button>
+</div>

data/lib/karafka/web/ui/views/shared/_flashes.erb

@@ -1,9 +1,7 @@
 <% flash.each do |name, message| %>
-  <div class="mb-4">
-    <div class="container">
-      <p class="alert alert-<%= name %>">
-        <%= message %>
-      </p>
-    </div>
-  </div>
+<div class="col-span-12">
+  <p class="alert alert-<%= name %>">
+    <%= message %>
+  </p>
+</div>
 <% end %>

data/lib/karafka/web/ui/views/shared/_header.erb

@@ -3,30 +3,25 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="description" content="Karafka application dashboard">
   <meta name="author" content="Maciej Mensfeld">
+  <meta name="turbo-cache-control" content="no-cache">
+  <meta name="turbo-prefetch" content="false">
 
   <title>Karafka Web UI</title>
 
-  <link href="<%= asset_path('stylesheets/libs/bootstrap.min.css') %>" rel="stylesheet">
-  <link href="<%= asset_path('stylesheets/libs/highlight.min.css') %>" rel="stylesheet">
-  <link href="<%= asset_path('stylesheets/libs/datepicker.min.css') %>" rel="stylesheet">
+  <link
+    rel="stylesheet"
+    href="<%= asset_path('stylesheets/libs/highlight_light.min.css') %>"
+    id="highlight-light"
+  />
 
-  <link href="<%= asset_path('stylesheets/application.css') %>" rel="stylesheet">
+  <link
+    rel="stylesheet"
+    href="<%= asset_path('stylesheets/libs/highlight_dark.min.css') %>"
+    id="highlight-dark"
+  />
 
-  <script type="text/javascript" src="<%= asset_path('javascripts/libs/chart.min.js') %>"></script>
-  <script type="text/javascript" src="<%= asset_path('javascripts/libs/timeago.min.js') %>"></script>
-  <script type="text/javascript" src="<%= asset_path('javascripts/libs/bootstrap.min.js') %>"></script>
-  <script type="text/javascript" src="<%= asset_path('javascripts/libs/highlight.min.js') %>"></script>
-  <script type="text/javascript" src="<%= asset_path('javascripts/libs/datepicker.js') %>"></script>
-
-  <script type="text/javascript" src="<%= asset_path('javascripts/live_poll.js') %>"></script>
-  <script type="text/javascript" src="<%= asset_path('javascripts/tabs_manager.js') %>"></script>
-  <script type="text/javascript" src="<%= asset_path('javascripts/charts/dataset_state_manager.js') %>"></script>
-  <script type="text/javascript" src="<%= asset_path('javascripts/charts/data_formatting_utility.js') %>"></script>
-  <script type="text/javascript" src="<%= asset_path('javascripts/charts/types/line.js') %>"></script>
-  <script type="text/javascript" src="<%= asset_path('javascripts/charts/types/bar.js') %>"></script>
-  <script type="text/javascript" src="<%= asset_path('javascripts/charts.js') %>"></script>
-  <script type="text/javascript" src="<%= asset_path('javascripts/offset_datetime.js') %>"></script>
-  <script type="text/javascript" src="<%= asset_path('javascripts/application.js') %>"></script>
+  <link href="<%= asset_path('stylesheets/application.min.css') %>" rel="stylesheet">
+  <script type="text/javascript" src="<%= asset_path('javascripts/application.min.js') %>"></script>
 
   <link rel="icon" href="<%= asset_path('images/favicon.ico') %>">
 </head>

data/lib/karafka/web/ui/views/shared/_navigation.erb

@@ -1,73 +1,129 @@
-<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
-  <span class="navbar-toggler-icon"></span>
-</button>
+<nav class="sidebar-nav">
+  <%== partial 'shared/brand' %>
 
-<div class="collapse navbar-collapse" id="navbarNav">
-  <ul class="navbar-nav">
-    <li class="nav-item ms-3">
-      <a class="nav-link <%= nav_class(start_with: '/dashboard') %>" href="<%= root_path('dashboard') %>">
+  <ul class="menu">
+    <li>
+      <a
+        class="sidebar-nav-item <%= nav_class(start_with: '/dashboard') %>"
+        href="<%= root_path('dashboard') %>"
+      >
+        <%== icon(:home) %>
         Dashboard
       </a>
     </li>
 
-    <li class="nav-item ms-3">
-      <a class="nav-link <%= nav_class(start_with: '/consumers') %>" href="<%= root_path('consumers') %>">
+    <li>
+      <a
+        class="sidebar-nav-item <%= nav_class(match: /\A\/(consumers|commands)/) %>"
+        href="<%= root_path('consumers') %>"
+      >
+        <%== icon(:cpu) %>
         Consumers
       </a>
     </li>
 
-    <li class="nav-item ms-3">
-      <a class="nav-link <%= nav_class(start_with: '/jobs') %>" href="<%= root_path('jobs/running') %>">
+    <li>
+      <a
+        class="sidebar-nav-item <%= nav_class(start_with: '/jobs') %>"
+        href="<%= root_path('jobs/running') %>"
+      >
+        <%== icon(:arrow_on_squares) %>
         Jobs
       </a>
     </li>
 
-    <li class="nav-item ms-3">
-      <a class="nav-link text-muted" href="<%= root_path('health') %>" title="Pro feature">
+    <li>
+      <a
+        class="sidebar-nav-item disabled"
+        href="<%= root_path('health/overview') %>"
+        title="Pro Feature"
+      >
+        <%== icon(:heart) %>
         Health
       </a>
     </li>
 
-    <li class="nav-item ms-3">
-      <a class="nav-link <%= nav_class(start_with: '/routing') %>" href="<%= root_path('routing') %>">
+    <li>
+      <a
+        class="sidebar-nav-item <%= nav_class(start_with: '/routing') %>"
+        href="<%= root_path('routing') %>"
+      >
+        <%== icon(:queue_list) %>
         Routing
       </a>
     </li>
 
-    <li class="nav-item ms-3">
-      <a class="nav-link text-muted" href="<%= root_path('explorer') %>" title="Pro feature">
+    <li>
+      <a
+        class="sidebar-nav-item disabled <%= nav_class(start_with: '/explorer') %>"
+        href="<%= root_path('explorer') %>"
+        title="Pro Feature"
+      >
+        <%== icon(:document_glass) %>
         Explorer
       </a>
     </li>
 
-    <li class="nav-item ms-3">
-      <a class="nav-link <%= nav_class(start_with: '/errors') %>" href="<%= root_path('errors') %>">
+    <li>
+      <a
+        class="sidebar-nav-item <%= nav_class(start_with: '/errors') %>"
+        href="<%= root_path('errors') %>"
+      >
+        <%== icon(:bug) %>
         Errors
       </a>
     </li>
 
-    <li class="nav-item ms-3">
-      <a class="nav-link text-muted" href="<%= root_path('dlq') %>" title="Pro feature">
+    <li>
+      <a
+        class="sidebar-nav-item disabled <%= nav_class(start_with: '/dlq') %>"
+        href="<%= root_path('dlq') %>"
+        title="Pro Feature"
+      >
+        <%== icon(:x_circle) %>
         Dead
       </a>
     </li>
 
-    <li class="nav-item ms-3">
-      <a class="nav-link <%= nav_class(start_with: '/cluster') %>" href="<%= root_path('cluster') %>">
+    <li>
+      <a
+        class="sidebar-nav-item <%= nav_class(start_with: '/cluster') %>"
+        href="<%= root_path('cluster') %>"
+      >
+        <%== icon(:blocks) %>
         Cluster
       </a>
     </li>
 
-    <li class="nav-item ms-3">
-      <a class="nav-link text-muted" href="<%= root_path('topics') %>" title="Pro feature">
+    <li>
+      <a
+        class="sidebar-nav-item disabled <%= nav_class(start_with: '/topics') %>"
+        href="<%= root_path('topics') %>"
+        title="Pro Feature"
+      >
+        <%== icon(:list_bullets) %>
         Topics
       </a>
     </li>
 
-    <li class="nav-item ms-3">
-      <a class="nav-link <%= nav_class(start_with: '/status') %>" href="<%= root_path('status') %>">
+    <li>
+      <a
+        class="sidebar-nav-item <%= nav_class(start_with: '/status') %>"
+        href="<%= root_path('status') %>"
+      >
+        <%== icon(:check_badge) %>
         Status
       </a>
     </li>
+
+    <li>
+      <a
+        class="sidebar-nav-item <%= nav_class(start_with: '/support') %>"
+        href="<%= root_path('support') %>"
+      >
+        <%== icon(:lifebuoy) %>
+        Support
+      </a>
+    </li>
   </ul>
-</div>
+</nav>

data/lib/karafka/web/ui/views/shared/_no_paginated_data.erb

@@ -1,9 +1,5 @@
-<div class="alert alert-info" role="alert">
-  <p>
-    This page does not contain any data.
-  </p>
-
-  <p class="mb-0">
-    Try going to the previous or the first page to get meaningful results.
-  </p>
-</div>
+<%==
+  alert_info(
+    ' This page does not contain any data. Try going to the previous or the first page to get meaningful results.'
+  )
+%>

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

@@ -1,23 +1,23 @@
 <% if @pagination && @pagination.paginate? %>
-  <div id="pagination" class="container mb-4">
+  <div id="pagination" class="col-span-12 my-3 mb-10 mt-0">
     <div class="row">
-      <nav>
-        <ul class="pagination justify-content-center">
-          <li class="page-item <%= 'disabled' unless @pagination.first_offset? %>">
-            <a class="page-link" href="<%= current_path(@pagination.offset_key => @pagination.first_offset || 1) %>">
+      <nav class="flex justify-center">
+        <ul class="pagination flex space-x-1">
+          <li class="<%= 'disabled' unless @pagination.first_offset? %>">
+            <a class="btn font-normal <%= 'btn-disabled' unless @pagination.first_offset? %>" href="<%= current_path(@pagination.offset_key => @pagination.first_offset || 1) %>">
               <span>&laquo;</span>
             </a>
           </li>
 
-          <li class="page-item <%= 'disabled' unless @pagination.previous_offset? %>">
-            <a class="page-link" href="<%= current_path(@pagination.offset_key => @pagination.previous_offset) %>">
+          <li class="<%= 'disabled' unless @pagination.previous_offset? %>">
+            <a class="btn font-normal <%= 'btn-disabled' unless @pagination.previous_offset? %>" href="<%= current_path(@pagination.offset_key => @pagination.previous_offset) %>">
               <span>&lsaquo; Prev</span>
             </a>
           </li>
 
           <% if @pagination.current_offset? %>
-            <li class="page-item active disabled">
-              <a class="page-link" href="<%= current_path(@pagination.offset_key => @pagination.current_offset) %>">
+            <li class="active">
+              <a class="btn btn-active font-normal" href="<%= current_path(@pagination.offset_key => @pagination.current_offset) %>">
                 <span>
                   <%= @pagination.current_label %>
                 </span>
@@ -25,8 +25,8 @@
             </li>
           <% end %>
 
-          <li class="page-item <%= 'disabled' unless @pagination.next_offset? %>">
-            <a class="page-link" href="<%= current_path(@pagination.offset_key => @pagination.next_offset) %>">
+          <li class="<%= 'disabled' unless @pagination.next_offset? %>">
+            <a class="btn font-bold font-normal <%= 'btn-disabled' unless @pagination.next_offset? %>" href="<%= current_path(@pagination.offset_key => @pagination.next_offset) %>">
               <span>Next &rsaquo;</span>
             </a>
           </li>

data/lib/karafka/web/ui/views/shared/_tab_nav.erb

@@ -1,7 +1,6 @@
 <% active ||= false %>
+<% disabled ||= false %>
 
-<li class="nav-item" role="presentation">
-  <button class="nav-link <%= 'active' if active %>" id="<%= id %>-tab" data-bs-toggle="tab" data-bs-target="#<%= id %>" type="button" role="tab">
-    <%= title %>
-  </button>
-</li>
+<span class="custom-tab <%= 'active' if active %> <%= 'disabled' if disabled %>" id="<%= id %>-tab" data-target="<%= id %>">
+  <%= title %>
+</span>

data/lib/karafka/web/ui/views/shared/_title.erb

@@ -0,0 +1,5 @@
+<div class="grow">
+  <h1 class="lg:text-2xl lg:font-light">
+    <%= content_for :title %>
+  </h1>
+</div>

data/lib/karafka/web/ui/views/shared/alerts/_box_error.erb

@@ -0,0 +1,15 @@
+<div class="alert-box alert-box-error">
+  <div class="alert-box-header">
+    <div>
+      <%== icon(:x_circle) %>
+
+      <span>
+        <%= title %>
+      </span>
+    </div>
+  </div>
+
+  <div class="alert-box-content">
+    <%== description %>
+  </div>
+</div>

data/lib/karafka/web/ui/views/shared/alerts/_box_info.erb

@@ -0,0 +1,15 @@
+<div class="alert-box alert-box-info">
+  <div class="alert-box-header">
+    <div>
+      <%== icon(:info_circle) %>
+
+      <span>
+        <%= title %>
+      </span>
+    </div>
+  </div>
+
+  <div class="alert-box-content">
+    <%== description %>
+  </div>
+</div>

data/lib/karafka/web/ui/views/shared/alerts/_box_primary.erb

@@ -0,0 +1,15 @@
+<div class="alert-box alert-box-primary">
+  <div class="alert-box-header">
+    <div>
+      <%== icon(:check_circle) %>
+
+      <span>
+        <%= title %>
+      </span>
+    </div>
+  </div>
+
+  <div class="alert-box-content">
+    <%== description %>
+  </div>
+</div>

data/lib/karafka/web/ui/views/shared/alerts/_box_secondary.erb

@@ -0,0 +1,15 @@
+<div class="alert-box alert-box-secondary">
+  <div class="alert-box-header">
+    <div>
+      <%== icon(:check_circle) %>
+
+      <span>
+        <%= title %>
+      </span>
+    </div>
+  </div>
+
+  <div class="alert-box-content">
+    <%== description %>
+  </div>
+</div>

data/lib/karafka/web/ui/views/shared/alerts/_box_success.erb

@@ -0,0 +1,15 @@
+<div class="alert-box alert-box-success">
+  <div class="alert-box-header">
+    <div>
+      <%== icon(:check_circle) %>
+
+      <span>
+        <%= title %>
+      </span>
+    </div>
+  </div>
+
+  <div class="alert-box-content">
+    <%== description %>
+  </div>
+</div>

data/lib/karafka/web/ui/views/shared/alerts/_box_warning.erb

@@ -0,0 +1,15 @@
+<div class="alert-box alert-box-warning">
+  <div class="alert-box-header">
+    <div>
+      <%== icon(:exclamation_triangle) %>
+
+      <span>
+        <%= title %>
+      </span>
+    </div>
+  </div>
+
+  <div class="alert-box-content">
+    <%== description %>
+  </div>
+</div>

data/lib/karafka/web/ui/views/shared/alerts/_error.erb

@@ -0,0 +1,4 @@
+<div class="alert alert-error" role="alert">
+  <%== icon :x_circle  %>
+  <%= message %>
+</div>

data/lib/karafka/web/ui/views/shared/alerts/_info.erb

@@ -1,3 +1,6 @@
-<div class="alert alert-info" role="alert">
-  <%= message %>
+<div class="alert alert-info">
+  <%== icon :info_circle %>
+  <span>
+    <%= message %>
+  </span>
 </div>

data/lib/karafka/web/ui/views/shared/alerts/_primary.erb

@@ -0,0 +1,4 @@
+<div role="alert" class="alert alert-primary">
+  <%== icon(:info_circle) %>
+  <span><%= message %></span>
+</div>

data/lib/karafka/web/ui/views/shared/alerts/_secondary.erb

@@ -0,0 +1,4 @@
+<div role="alert" class="alert alert-secondary">
+  <%== icon(:pause_circle) %>
+  <span><%= message %></span>
+</div>

data/lib/karafka/web/ui/views/shared/alerts/_success.erb

@@ -0,0 +1,4 @@
+<div role="alert" class="alert alert-success">
+  <%== icon(:check_circle) %>
+  <span><%= message %></span>
+</div>

data/lib/karafka/web/ui/views/shared/alerts/_warning.erb

@@ -0,0 +1,4 @@
+<div class="alert alert-warning" role="alert">
+  <%== icon :exclamation_triangle  %>
+  <%= message %>
+</div>

data/lib/karafka/web/ui/views/shared/charts/_line.erb

@@ -3,7 +3,7 @@
   label_type_y ||= 'numerical'
   label_type_x ||= 'date'
 %>
-<div class="mt-4 chartjs-wrapper">
+<div class="chartjs-wrapper">
   <canvas
     id="<%= id %>-chart"
     class="chartjs chartjs-line <%= 'blurred' if blurred %>"

data/lib/karafka/web/ui/views/shared/exceptions/not_allowed.erb

@@ -1,34 +1,29 @@
-<main>
-  <div id="content">
-    <div class="d-flex align-items-center justify-content-center vh-100">
-      <div class="error-message text-center">
-        <h1 class="display-1 fw-bold">403</h1>
+<main class="flex items-center justify-center min-h-screen">
+  <div id="content" class="max-w-2xl w-full mx-auto">
+    <div class="flex items-center justify-center vh-100">
+      <div class="text-center">
+        <h1 class="text-8xl font-bold">403</h1>
 
-        <p class="fs-3 md-5">
-          <span class="text-danger">
-            Oops!
-          </span>
-          Not permitted.
+        <p class="text-3xl mt-5">
+          <span class="text-red-500">Oops!</span> Not permitted.
         </p>
 
-        <div class="lead">
-          <p class="mb-5">
+        <div class="mt-5">
+          <p class="mb-10 text-lg font-light">
             You don't have permission to view this page.
           </p>
 
-          <p>
-            Please make sure, that:
-          </p>
+          <p class="text-lg font-light mb-5">Please make sure, that:</p>
 
-          <ul class="mb-5 text-start">
-            <li>You have visited the <a href="<%= root_path('status') %>">Status</a> page to troubleshoot any potential issues</li>
+          <ul class="list-disc text-left text-lg mb-10 pl-5 font-light">
+            <li>You have visited the <a href="<%= root_path('status') %>" class="text-blue-500 underline">Status</a> page to troubleshoot any potential issues</li>
             <li>You are authorized to access the resource you requested</li>
             <li>Web UI configuration permits the action you requested</li>
           </ul>
 
           <p>
-            <a href="<%= root_path %>" class="btn btn-primary">Go Home</a>
-            <a href="<%= root_path('status') %>" class="btn btn-success">Status page</a>
+            <a href="<%= root_path %>" class="btn btn-primary mr-2 rounded-md py-1">Go Home</a>
+            <a href="<%= root_path('status') %>" class="btn btn-success text-white rounded-md">Status page</a>
           </p>
         </div>
       </div>

data/lib/karafka/web/ui/views/shared/exceptions/not_found.erb

@@ -1,40 +1,35 @@
-<main>
-  <div id="content">
-    <div class="d-flex align-items-center justify-content-center vh-100">
-      <div class="error-message text-center">
-        <h1 class="display-1 fw-bold">404</h1>
+<main class="flex items-center justify-center min-h-screen">
+  <div id="content" class="max-w-2xl w-full mx-auto">
+    <div class="flex items-center justify-center vh-100">
+      <div class="text-center">
+        <h1 class="text-8xl font-bold">404</h1>
 
-        <p class="fs-3 md-5">
-          <span class="text-danger">
-            Oops!
-          </span>
-          Page not found.
+        <p class="text-3xl mt-5">
+          <span class="text-red-500">Oops!</span> Page not found.
         </p>
 
-        <div class="lead">
-          <p class="mb-5">
+        <div class="mt-5">
+          <p class="mb-10 text-lg font-light">
             The page you're looking for doesn't exist.
           </p>
 
-          <p>
-            Please make sure, that:
-          </p>
+          <p class="text-lg font-light mb-5">Please make sure, that:</p>
 
-          <ul class="mb-5 text-start">
-            <li>You have visited the <a href="<%= root_path('status') %>">Status</a> page to troubleshoot any potential issues</li>
+          <ul class="list-disc text-left text-lg mb-10 pl-5 font-light">
+            <li>You have visited the <a href="<%= root_path('status') %>" class="text-blue-500 underline">Status</a> page to troubleshoot any potential issues</li>
             <li>All the topics required by Karafka Web exist</li>
-            <li>You have used <code>bundle exec karafka-web migrate</code> to initialize the Web UI</li>
+            <li>You have used <code class="bg-gray-100 px-1 py-0.5 rounded">bundle exec karafka-web migrate</code> to initialize the Web UI</li>
             <li>You have a working connection with your Kafka cluster</li>
             <li>The resource you requested exists</li>
           </ul>
 
-          <p class="mb-5">
+          <p class="mb-10 text-lg font-light">
             If you were looking for a given process or other real-time information, the state might have changed, and the information you are looking for no longer exists.
           </p>
 
           <p>
-            <a href="<%= root_path %>" class="btn btn-primary">Go Home</a>
-            <a href="<%= root_path('status') %>" class="btn btn-success">Status page</a>
+            <a href="<%= root_path %>" class="btn btn-primary mr-2 rounded-md py-1">Go Home</a>
+            <a href="<%= root_path('status') %>" class="btn btn-success text-white rounded-md">Status page</a>
           </p>
         </div>
       </div>