karafka-web 0.11.0.beta1 → 0.11.0.beta3

data/lib/karafka/web/processing/consumers/aggregators/state.rb

@@ -36,7 +36,7 @@ module Karafka
             def add(report, offset)
               super(report)
               increment_total_counters(report)
-              update_process_state(report, offset)
+              add_state(report, offset)
               # We always evict after counters updates because we want to use expired (stopped)
               # data for counters as it was valid previously. This can happen only when web consumer
               # had a lag and is catching up.
@@ -46,6 +46,19 @@ module Karafka
               refresh_current_stats
             end
 
+            # Registers or updates the given process state based on the report
+            #
+            # @param report [Hash]
+            # @param offset [Integer]
+            def add_state(report, offset)
+              process_id = report[:process][:id]
+
+              state[:processes][process_id] = {
+                dispatched_at: report[:dispatched_at],
+                offset: offset
+              }
+            end
+
             # @return [Array<Hash, Float>] aggregated current stats value and time from which this
             #   aggregation comes from
             #
@@ -84,19 +97,6 @@ module Karafka
               end
             end
 
-            # Registers or updates the given process state based on the report
-            #
-            # @param report [Hash]
-            # @param offset [Integer]
-            def update_process_state(report, offset)
-              process_id = report[:process][:id]
-
-              state[:processes][process_id] = {
-                dispatched_at: report[:dispatched_at],
-                offset: offset
-              }
-            end
-
             # Evicts expired processes from the current state
             # We consider processes dead if they do not report often enough
             # @note We do not evict based on states (stopped), because we want to report the

data/lib/karafka/web/ui/base.rb

@@ -94,8 +94,7 @@ module Karafka
           ::Rdkafka::RdkafkaError,
           Errors::Ui::NotFoundError,
           Errors::Ui::ProOnlyError,
-          Errors::Ui::ForbiddenError,
-          Errors::Ui::IncompatibleSchemaError
+          Errors::Ui::ForbiddenError
         ] do |e|
           @error = true
 
@@ -106,9 +105,6 @@ module Karafka
           when Errors::Ui::ForbiddenError
             response.status = 403
             view 'shared/exceptions/not_allowed'
-          when Errors::Ui::IncompatibleSchemaError
-            response.status = 422
-            view 'shared/exceptions/incompatible_schema'
           else
             response.status = 404
             view 'shared/exceptions/not_found'

data/lib/karafka/web/ui/models/process.rb

@@ -12,6 +12,8 @@ module Karafka
             # @param process_id [String] id of the process we are looking for
             # @return [Process] selected process or error raised
             # @raise [::Karafka::Web::Errors::Ui::NotFoundError] raised if process not found
+            # @note Keep in mind, that this search is looking only within processes with a
+            #   compatible schema, as it uses `#active` under the hood.
             def find(state, process_id)
               found_process = Processes.active(state).find { |process| process.id == process_id }
               found_process || raise(::Karafka::Web::Errors::Ui::NotFoundError, process_id)
@@ -86,7 +88,7 @@ module Karafka
           #   instance. Any incompatibility will cause reporting of incompatible. That's for the
           #   sake of simplicity as the long term goal for user is anyhow to align those.
           def schema_compatible?
-            schema_version == ::Karafka::Web::Tracking::Consumers::Sampler::SCHEMA_VERSION
+            self[:schema_version] == ::Karafka::Web::Tracking::Consumers::Sampler::SCHEMA_VERSION
           end
         end
       end

data/lib/karafka/web/ui/models/processes.rb

@@ -11,22 +11,30 @@ module Karafka
           class << self
             include ::Karafka::Core::Helpers::Time
 
-            # Returns the active processes in an array and alongside of that the current state of
-            # the system. We use those together in the UI and it would be expensive to pick it up
-            # while we've already had it.
-            #
+            # Returns processes that are running or recently shutdown. It may also return processes
+            # with incompatible schema.
             # @param state [State] current system state from which we can get processes metadata
             # @return [Array<Process>]
-            def active(state)
+            def all(state)
               messages = fetch_reports(state)
               messages = squash_processes_data(messages)
               processes = messages.map(&:payload)
               evict_expired_processes(processes)
               processes = sort_processes(processes)
-
               processes.map { |process_hash| Process.new(process_hash) }
             end
 
+            # Returns the active processes in an array and alongside of that the current state of
+            # the system. We use those together in the UI and it would be expensive to pick it up
+            # while we've already had it. Active means it is running (or recently shutdown) and
+            # it has current schema. Basically any process about which we can reason
+            #
+            # @param state [State] current system state from which we can get processes metadata
+            # @return [Array<Process>]
+            def active(state)
+              all(state).delete_if { |process| !process.schema_compatible? }
+            end
+
             private
 
             # Fetches the relevant processes reports from the reports topic
@@ -79,6 +87,19 @@ module Karafka
               end
             end
 
+            # Removes processes that have schema different than the one supported by the Web UI
+            # We support incompatible schema processes reporting in the status page so users know
+            # what and how to update. For other processes we do not display them or their data
+            # as it would be too complex to support
+            #
+            # @param processes [Array<Hash>]
+            # @return [Array<Hash>] only data about processes running current schema
+            def evict_incompatible_processes(processes)
+              processes.delete_if do |details|
+                details[:schema_version] != Tracking::Consumers::Sampler::SCHEMA_VERSION
+              end
+            end
+
             # Ensures that we always return processes sorted by their id
             # @param processes [Array<Hash>]
             # @return [Array<Hash>] sorted processes data

data/lib/karafka/web/ui/models/status.rb

@@ -183,7 +183,7 @@ module Karafka
           # @return [Status::Step] could we read and operate on the current processes data (if any)
           def consumers_reports
             if initial_consumers_metrics.success?
-              @processes ||= Models::Processes.active(@current_state)
+              @processes ||= Models::Processes.all(@current_state)
               status = :success
             else
               status = :halted

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

@@ -21,7 +21,6 @@
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
     --color-red-500: oklch(63.7% 0.237 25.331);
-    --color-orange-500: oklch(70.5% 0.213 47.604);
     --color-blue-500: oklch(62.3% 0.214 259.815);
     --color-blue-600: oklch(54.6% 0.245 262.881);
     --color-gray-50: oklch(98.5% 0.002 247.839);
@@ -452,7 +451,7 @@
     --tab-radius-min: calc(0.75rem - var(--border));
     border-color: #0000;
     order: var(--tab-order);
-    height: calc(var(--size-field, 0.25rem) * 10);
+    height: var(--tab-height);
     font-size: 0.875rem;
     padding-inline-start: var(--tab-p);
     padding-inline-end: var(--tab-p);
@@ -475,7 +474,7 @@
     &:checked, &:is(label:has(:checked)), &:is(.tab-active, [aria-selected="true"]) {
       & + .tab-content {
         display: block;
-        height: 100%;
+        height: calc(100% - var(--tab-height) + var(--border));
       }
     }
     &:not(:checked, label:has(:checked), :hover, .tab-active, [aria-selected="true"]) {
@@ -895,7 +894,7 @@
         --input-color: var(--color-success);
       }
     }
-    &:user-invalid, &:has(:user-invalid), &[aria-invalid] {
+    &:user-invalid, &:has(:user-invalid), &[aria-invalid]:not([aria-invalid="false"]) {
       &, &:focus, &:checked, &[aria-checked="true"], &:focus-within {
         --input-color: var(--color-error);
       }
@@ -1114,6 +1113,7 @@
     width: clamp(3rem, 20rem, 100%);
     height: var(--size);
     font-size: 0.875rem;
+    touch-action: manipulation;
     border-start-start-radius: var(--join-ss, var(--radius-field));
     border-start-end-radius: var(--join-se, var(--radius-field));
     border-end-start-radius: var(--join-es, var(--radius-field));
@@ -1147,6 +1147,9 @@
         }
       }
     }
+    :where(input[type="url"]), :where(input[type="email"]) {
+      direction: ltr;
+    }
     :where(input[type="date"]) {
       display: inline-block;
     }
@@ -1729,6 +1732,7 @@
     width: clamp(3rem, 20rem, 100%);
     height: var(--size);
     font-size: 0.875rem;
+    touch-action: manipulation;
     border-start-start-radius: var(--join-ss, var(--radius-field));
     border-start-end-radius: var(--join-se, var(--radius-field));
     border-end-start-radius: var(--join-es, var(--radius-field));
@@ -3084,6 +3088,7 @@
     flex-wrap: wrap;
     --tabs-height: auto;
     --tabs-direction: row;
+    --tab-height: calc(var(--size-field, 0.25rem) * 10);
     height: var(--tabs-height);
     flex-direction: var(--tabs-direction);
   }
@@ -3836,13 +3841,6 @@
       border-left-color: var(--color-error);
     }
   }
-  .status-row-incompatible {
-    table & td:first-child {
-      border-left-style: var(--tw-border-style);
-      border-left-width: 1px;
-      border-left-color: var(--color-secondary);
-    }
-  }
   .status-row-quiet {
     table & td:first-child {
       border-left-style: var(--tw-border-style);
@@ -4185,9 +4183,6 @@
   .text-muted {
     color: var(--color-gray-500);
   }
-  .text-orange-500 {
-    color: var(--color-orange-500);
-  }
   .text-red-500 {
     color: var(--color-red-500);
   }
@@ -4224,6 +4219,15 @@
         --btn-fg: currentColor;
       }
     }
+    @media (hover: none) {
+      &:hover:not(.btn-active, :active, :focus-visible, :disabled, [disabled], .btn-disabled) {
+        --btn-shadow: "";
+        --btn-bg: #0000;
+        --btn-border: #0000;
+        --btn-noise: none;
+        --btn-fg: currentColor;
+      }
+    }
   }
   .blur {
     --tw-blur: blur(8px);
@@ -4595,6 +4599,15 @@ tr:not(:first-child) th[colspan]:not([colspan="1"]) {
         --btn-fg: currentColor;
       }
     }
+    @media (hover: none) {
+      &:hover:not(.btn-active, :active, :focus-visible, :disabled, [disabled], .btn-disabled) {
+        --btn-shadow: "";
+        --btn-bg: #0000;
+        --btn-border: #0000;
+        --btn-noise: none;
+        --btn-fg: currentColor;
+      }
+    }
     --fontsize: 0.75rem;
     --btn-p: 0.75rem;
     --size: calc(var(--size-field, 0.25rem) * 8);
@@ -4738,14 +4751,10 @@ tr:not(:first-child) th[colspan]:not([colspan="1"]) {
   }
 }
 @layer base {
-  :root:has( .modal-open, .modal[open], .modal:target, .modal-toggle:checked, .drawer:not([class*="drawer-open"]) > .drawer-toggle:checked ) {
-    overflow: hidden;
-  }
-}
-@layer base {
-  :root, [data-theme] {
-    background-color: var(--root-bg, var(--color-base-100));
-    color: var(--color-base-content);
+  @property --radialprogress {
+    syntax: "<percentage>";
+    inherits: true;
+    initial-value: 0%;
   }
 }
 @layer base {
@@ -4757,10 +4766,16 @@ tr:not(:first-child) th[colspan]:not([colspan="1"]) {
   }
 }
 @layer base {
-  @property --radialprogress {
-    syntax: "<percentage>";
-    inherits: true;
-    initial-value: 0%;
+  :root {
+    --fx-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E");
+  }
+  .chat {
+    --mask-chat: url("data:image/svg+xml,%3csvg width='13' height='13' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M0 11.5004C0 13.0004 2 13.0004 2 13.0004H12H13V0.00036329L12.5 0C12.5 0 11.977 2.09572 11.8581 2.50033C11.6075 3.35237 10.9149 4.22374 9 5.50036C6 7.50036 0 10.0004 0 11.5004Z'/%3e%3c/svg%3e");
+  }
+}
+@layer base {
+  :root:has( .modal-open, .modal[open], .modal:target, .modal-toggle:checked, .drawer:not([class*="drawer-open"]) > .drawer-toggle:checked ) {
+    overflow: hidden;
   }
 }
 @layer base {
@@ -4777,16 +4792,25 @@ tr:not(:first-child) th[colspan]:not([colspan="1"]) {
   }
 }
 @layer base {
-  :root {
-    --fx-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E");
+  :root, [data-theme] {
+    background-color: var(--root-bg, var(--color-base-100));
+    color: var(--color-base-content);
   }
-  .chat {
-    --mask-chat: url("data:image/svg+xml,%3csvg width='13' height='13' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M0 11.5004C0 13.0004 2 13.0004 2 13.0004H12H13V0.00036329L12.5 0C12.5 0 11.977 2.09572 11.8581 2.50033C11.6075 3.35237 10.9149 4.22374 9 5.50036C6 7.50036 0 10.0004 0 11.5004Z'/%3e%3c/svg%3e");
+}
+@keyframes radio {
+  0% {
+    padding: 5px;
+  }
+  50% {
+    padding: 3px;
   }
 }
-@keyframes dropdown {
+@keyframes skeleton {
   0% {
-    opacity: 0;
+    background-position: 150%;
+  }
+  100% {
+    background-position: -50%;
   }
 }
 @keyframes progress {
@@ -4804,28 +4828,17 @@ tr:not(:first-child) th[colspan]:not([colspan="1"]) {
     opacity: 1;
   }
 }
+@keyframes dropdown {
+  0% {
+    opacity: 0;
+  }
+}
 @keyframes rating {
   0%, 40% {
     scale: 1.1;
     filter: brightness(1.05) contrast(1.05);
   }
 }
-@keyframes radio {
-  0% {
-    padding: 5px;
-  }
-  50% {
-    padding: 3px;
-  }
-}
-@keyframes skeleton {
-  0% {
-    background-position: 150%;
-  }
-  100% {
-    background-position: -50%;
-  }
-}
 @property --tw-border-style {
   syntax: "*";
   inherits: false;

data/lib/karafka/web/ui/public/stylesheets/libs/tailwind.css

@@ -507,12 +507,6 @@
   }
 }
 
-@utility status-row-incompatible {
-  table & td:first-child {
-    @apply border-l border-l-secondary;
-  }
-}
-
 @utility code {
   @apply text-sm border border-gray-300;
 }

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

@@ -1,45 +1,36 @@
-<% if process.schema_compatible? %>
-  <tr class="status-row-<%= process.status %>">
-    <td>
-      <p>
-        <a href="<%= consumer_path(process.id, 'subscriptions') %>">
-          <%== truncate(process.id, strategy: :middle) %>
-        </a>
-      </p>
+<tr class="status-row-<%= process.status %>">
+  <td>
+    <p>
+      <a href="<%= consumer_path(process.id, 'subscriptions') %>">
+        <%== truncate(process.id, strategy: :middle) %>
+      </a>
+    </p>
 
-      <p class="mt-1">
-        <%== partial 'consumers/assignments_badges', locals: { process: process } %>
-      </p>
+    <p class="mt-1">
+      <%== partial 'consumers/assignments_badges', locals: { process: process } %>
+    </p>
 
-      <p>
-        <%== tags(process.tags) %>
-      </p>
-    </td>
+    <p>
+      <%== tags(process.tags) %>
+    </p>
+  </td>
 
-    <td>
-      <%== relative_time process.started_at %>
-    </td>
+  <td>
+    <%== relative_time process.started_at %>
+  </td>
 
-    <td>
-      <%== badge_primary_sm format_memory process.memory_usage %>
-    </td>
+  <td>
+    <%== badge_primary_sm format_memory process.memory_usage %>
+  </td>
 
-    <td>
-      <span class="badge badge-primary">
-        <%= process.workers %> /
-        <%= process.busy %>
-      </span>
-    </td>
+  <td>
+    <span class="badge badge-primary">
+      <%= process.workers %> /
+      <%= process.busy %>
+    </span>
+  </td>
 
-    <td>
-      <%= process.lag_hybrid %>
-    </td>
-  </tr>
-<% else %>
-  <%==
-    partial(
-      'consumers/incompatible',
-      locals: { colspan: 5, process: process }
-    )
-  %>
-<% end %>
+  <td>
+    <%= process.lag_hybrid %>
+  </td>
+</tr>

data/lib/karafka/web/ui/views/jobs/_job.erb

@@ -1,39 +1,30 @@
-<% if job.process.schema_compatible? %>
-  <tr>
-    <td>
-      <a href="<%= consumer_path(job.process.id, 'subscriptions') %>">
-        <%== truncate(job.process.id, strategy: :middle) %>
-      </a>
-    </td>
-    <td>
-      <span class="badge badge-secondary" title="Consumer group: <%= job.consumer_group %>">
-        <%= job.topic %>:
-        <%= job.partition %>
-      </span>
-    </td>
-    <td>
-      <code><%= job.consumer %></code>
+<tr>
+  <td>
+    <a href="<%= consumer_path(job.process.id, 'subscriptions') %>">
+      <%== truncate(job.process.id, strategy: :middle) %>
+    </a>
+  </td>
+  <td>
+    <span class="badge badge-secondary" title="Consumer group: <%= job.consumer_group %>">
+      <%= job.topic %>:
+      <%= job.partition %>
+    </span>
+  </td>
+  <td>
+    <code><%= job.consumer %></code>
 
-      <% unless job.tags.empty? %>
-        <br/>
-        <%== tags(job.tags) %>
-      <% end %>
-    </td>
-    <td>
-      <code>#<%= job.type %></code>
-    </td>
-    <td>
-      <%== offset_with_label job.topic, job.partition, job.first_offset %>
-    </td>
-    <td>
-      <%== relative_time job.updated_at %>
-    </td>
-  </tr>
-<% else %>
-  <%==
-    partial(
-      'consumers/incompatible',
-      locals: { colspan: 5, process: job.process }
-    )
-  %>
-<% end %>
+    <% unless job.tags.empty? %>
+      <br/>
+      <%== tags(job.tags) %>
+    <% end %>
+  </td>
+  <td>
+    <code>#<%= job.type %></code>
+  </td>
+  <td>
+    <%== offset_with_label job.topic, job.partition, job.first_offset %>
+  </td>
+  <td>
+    <%== relative_time job.updated_at %>
+  </td>
+</tr>

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

@@ -58,12 +58,6 @@
           <td>.status-row-error</td>
           <td>.status-row-error</td>
         </tr>
-
-        <tr class="status-row-incompatible">
-          <td>.status-row-incompatible</td>
-          <td>.status-row-incompatible</td>
-          <td>.status-row-incompatible</td>
-        </tr>
       </tbody>
     </table>
   </div>

data/lib/karafka/web/version.rb

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

data/package-lock.json

@@ -1034,9 +1034,9 @@
       }
     },
     "node_modules/daisyui": {
-      "version": "5.0.35",
-      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-5.0.35.tgz",
-      "integrity": "sha512-AWi11n/x5++mps55jcwrBf0Lmip1euWY0FYcH/05SFGmoqrU7S7/aIUWaiaeqlJ5EcmEZ/7zEY73aOxMv6hcIg==",
+      "version": "5.0.37",
+      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-5.0.37.tgz",
+      "integrity": "sha512-PLc+MhWAqTwolygEGPDi+ac+OsFqIt9nZylTIiyVlEx8loYL7Pt7hNWb8cp5pQQ9dhjYnda1ERiuM6OsJmvPGw==",
       "dev": true,
       "license": "MIT",
       "funding": {