fix display size

CHANGELOG.md

@@ -1,7 +1,10 @@
 # Karafka Web changelog
 
 ## 0.7.1 (Unreleased)
-- **[Fix]** Validate refresh time.
+- [Improvement] Limit number of partitions listed on the Consumers view if they exceed 10 to improve readability and indicate, that there are more.
+- [Improvement] Make sure, that small messages size (less than 100 bytes) is correctly displayed.
+- [Fix] Validate refresh time.
+- [Fix] Fix invalid message payload size display (KB instead of B, etc).
 
 ## 0.7.0 (2023-09-14)
 - **[Feature]** Introduce graphs.

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

@@ -14,7 +14,11 @@
           <% subscription_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(',') %>
+              <% if topic.partitions.size > 10 %>
+                <%= "#{topic.partitions.first(10).map(&:id).join(',')}..." %>
+              <% else %>
+                <%= topic.partitions.map(&:id).join(',') %>
+              <% end %>
             </span>
           <% end %>
         <% end %>

lib/karafka/web/ui/pro/views/explorer/show.erb

@@ -49,7 +49,7 @@
               'explorer/messages/detail',
               locals: {
                 k: 'bytesize',
-                v: format_memory((@message.raw_payload&.bytesize || 0 / 1024.to_f).round(2))
+                v: format_memory(((@message.raw_payload&.bytesize || 0) / 1024.to_f).round(4))
               }
             )
           %>

spec/lib/karafka/web/ui/pro/controllers/explorer_spec.rb

@@ -427,6 +427,40 @@
         expect(response.headers['location']).to include("explorer/#{topic}/0/1")
       end
     end
+
+    context 'when requested message exists and is of 1 byte' do
+      before do
+        produce(topic, rand(256).chr)
+        get "explorer/#{topic}/0/0"
+      end
+
+      it do
+        expect(response).to be_ok
+        expect(body).to include(breadcrumbs)
+        expect(body).to include('<code class="wrapped json')
+        expect(body).to include('Metadata')
+        expect(body).to include('0.001 KB')
+        expect(body).not_to include(pagination)
+        expect(body).not_to include(support_message)
+      end
+    end
+
+    context 'when requested message exists and is of 100 byte' do
+      before do
+        produce(topic, SecureRandom.random_bytes(100))
+        get "explorer/#{topic}/0/0"
+      end
+
+      it do
+        expect(response).to be_ok
+        expect(body).to include(breadcrumbs)
+        expect(body).to include('<code class="wrapped json')
+        expect(body).to include('Metadata')
+        expect(body).to include('0.0977 KB')
+        expect(body).not_to include(pagination)
+        expect(body).not_to include(support_message)
+      end
+    end
   end
 
   describe '#recent' do