Merge branch 'ISSUE-3427_brokers_skew_stats' into ISSUE-3427_frontend

kafka-ui-api/src/main/java/com/provectus/kafka/ui/model/PartitionDistributionStats.java

@@ -1,26 +1,32 @@
 package com.provectus.kafka.ui.model;
 
 import java.math.BigDecimal;
+import java.math.MathContext;
 import java.util.HashMap;
 import java.util.Map;
 import javax.annotation.Nullable;
 import lombok.AccessLevel;
 import lombok.Getter;
 import lombok.RequiredArgsConstructor;
+import lombok.extern.slf4j.Slf4j;
 import org.apache.kafka.clients.admin.TopicDescription;
 import org.apache.kafka.common.Node;
 import org.apache.kafka.common.TopicPartitionInfo;
 
 @RequiredArgsConstructor(access = AccessLevel.PRIVATE)
 @Getter
+@Slf4j
 public class PartitionDistributionStats {
 
   // avg skew will show unuseful results on low number of partitions
   private static final int MIN_PARTITIONS_FOR_SKEW_CALCULATION = 50;
 
+  private static final MathContext ROUNDING_MATH_CTX = new MathContext(3);
+
   private final Map<Node, Integer> partitionLeaders;
   private final Map<Node, Integer> partitionsCount;
   private final Map<Node, Integer> inSyncPartitions;
+  private final double avgLeadersCntPerBroker;
   private final double avgPartitionsPerBroker;
   private final boolean skewCanBeCalculated;
 
@@ -43,12 +49,19 @@ public class PartitionDistributionStats {
         }
       }
     }
-    int nodesCount = stats.getClusterDescription().getNodes().size();
-    double avgPartitionsPerBroker = nodesCount == 0 ? 0 : ((double) partitionsCnt) / nodesCount;
+    int nodesWithPartitions = partitionsReplicated.size();
+    int partitionReplications = partitionsReplicated.values().stream().mapToInt(i -> i).sum();
+    var avgPartitionsPerBroker = nodesWithPartitions == 0 ? 0 : ((double) partitionReplications) / nodesWithPartitions;
+
+    int nodesWithLeaders = partitionLeaders.size();
+    int leadersCnt = partitionLeaders.values().stream().mapToInt(i -> i).sum();
+    var avgLeadersCntPerBroker = nodesWithLeaders == 0 ? 0 : ((double) leadersCnt) / nodesWithLeaders;
+
     return new PartitionDistributionStats(
         partitionLeaders,
         partitionsReplicated,
         isr,
+        avgLeadersCntPerBroker,
         avgPartitionsPerBroker,
         partitionsCnt >= minPartitionsForSkewCalculation
     );
@@ -65,7 +78,7 @@ public class PartitionDistributionStats {
 
   @Nullable
   public BigDecimal leadersSkew(Node node) {
-    return calculateAvgSkew(partitionLeaders.get(node), avgPartitionsPerBroker);
+    return calculateAvgSkew(partitionLeaders.get(node), avgLeadersCntPerBroker);
   }
 
   // Returns difference (in percents) from average value, null if it can't be calculated
@@ -75,6 +88,6 @@ public class PartitionDistributionStats {
       return null;
     }
     value = value == null ? 0 : value;
-    return new BigDecimal((value - avgValue) / avgValue * 100.0);
+    return new BigDecimal((value - avgValue) / avgValue * 100.0).round(ROUNDING_MATH_CTX);
   }
 }

kafka-ui-api/src/test/java/com/provectus/kafka/ui/model/PartitionDistributionStatsTest.java

@@ -20,6 +20,7 @@ class PartitionDistributionStatsTest {
     Node n1 = new Node(1, "n1", 9092);
     Node n2 = new Node(2, "n2", 9092);
     Node n3 = new Node(3, "n3", 9092);
+    Node n4 = new Node(4, "n4", 9092);
 
     var stats = PartitionDistributionStats.create(
         Statistics.builder()
@@ -53,25 +54,30 @@ class PartitionDistributionStatsTest {
     assertThat(stats.getInSyncPartitions())
         .containsExactlyInAnyOrderEntriesOf(Map.of(n1, 3, n2, 3, n3, 1));
 
-    // 4 partitions, 3 brokers = avg partition cnt per broker is 1.333.
+    // Node(partitions): n1(3), n2(4), n3(1), n4(0)
+    // average partitions cnt = (3+4+1) / 3 = 2.666 (counting only nodes with partitions!)
     assertThat(stats.getAvgPartitionsPerBroker())
-        .isCloseTo(1.333, Percentage.withPercentage(1));
+        .isCloseTo(2.666, Percentage.withPercentage(1));
 
-    // Node(partitions): n1(3), n2(4), n3(1)
     assertThat(stats.partitionsSkew(n1))
-        .isCloseTo(BigDecimal.valueOf(125), Percentage.withPercentage(1));
+        .isCloseTo(BigDecimal.valueOf(12.5), Percentage.withPercentage(1));
     assertThat(stats.partitionsSkew(n2))
-        .isCloseTo(BigDecimal.valueOf(200), Percentage.withPercentage(1));
+        .isCloseTo(BigDecimal.valueOf(50), Percentage.withPercentage(1));
     assertThat(stats.partitionsSkew(n3))
-        .isCloseTo(BigDecimal.valueOf(-25), Percentage.withPercentage(1));
+        .isCloseTo(BigDecimal.valueOf(-62.5), Percentage.withPercentage(1));
+    assertThat(stats.partitionsSkew(n4))
+        .isCloseTo(BigDecimal.valueOf(-100), Percentage.withPercentage(1));
 
-    //  Node(leaders): n1(2), n2(1), n3(0)
+    //  Node(leaders): n1(2), n2(1), n3(0), n4(0)
+    //  average leaders cnt = (2+1) / 2 = 1.5 (counting only nodes with leaders!)
     assertThat(stats.leadersSkew(n1))
-        .isCloseTo(BigDecimal.valueOf(50), Percentage.withPercentage(1));
+        .isCloseTo(BigDecimal.valueOf(33.33), Percentage.withPercentage(1));
     assertThat(stats.leadersSkew(n2))
-        .isCloseTo(BigDecimal.valueOf(-25), Percentage.withPercentage(1));
+        .isCloseTo(BigDecimal.valueOf(-33.33), Percentage.withPercentage(1));
     assertThat(stats.leadersSkew(n3))
         .isCloseTo(BigDecimal.valueOf(-100), Percentage.withPercentage(1));
+    assertThat(stats.leadersSkew(n4))
+        .isCloseTo(BigDecimal.valueOf(-100), Percentage.withPercentage(1));
   }
 
 }

kafka-ui-react-app/src/components/Topics/Topic/Messages/Message.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import styled from 'styled-components';
 import useDataSaver from 'lib/hooks/useDataSaver';
 import { TopicMessage } from 'generated-sources';
 import MessageToggleIcon from 'components/common/Icons/MessageToggleIcon';
@@ -7,22 +6,12 @@ import IconButtonWrapper from 'components/common/Icons/IconButtonWrapper';
 import { Dropdown, DropdownItem } from 'components/common/Dropdown';
 import { formatTimestamp } from 'lib/dateTimeHelpers';
 import { JSONPath } from 'jsonpath-plus';
+import Ellipsis from 'components/common/Ellipsis/Ellipsis';
+import WarningRedIcon from 'components/common/Icons/WarningRedIcon';
 
 import MessageContent from './MessageContent/MessageContent';
 import * as S from './MessageContent/MessageContent.styled';
 
-const StyledDataCell = styled.td`
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  max-width: 350px;
-  min-width: 350px;
-`;
-
-const ClickableRow = styled.tr`
-  cursor: pointer;
-`;
-
 export interface PreviewFilter {
   field: string;
   path: string;
@@ -43,6 +32,8 @@ const Message: React.FC<Props> = ({
     partition,
     content,
     headers,
+    valueSerde,
+    keySerde,
   },
   keyFilters,
   contentFilters,
@@ -100,7 +91,7 @@ const Message: React.FC<Props> = ({
 
   return (
     <>
-      <ClickableRow
+      <S.ClickableRow
         onMouseEnter={() => setVEllipsisOpen(true)}
         onMouseLeave={() => setVEllipsisOpen(false)}
         onClick={toggleIsOpen}
@@ -115,16 +106,20 @@ const Message: React.FC<Props> = ({
         <td>
           <div>{formatTimestamp(timestamp)}</div>
         </td>
-        <StyledDataCell title={key}>
-          {renderFilteredJson(key, keyFilters)}
-        </StyledDataCell>
-        <StyledDataCell title={content}>
+        <S.DataCell title={key}>
+          <Ellipsis text={renderFilteredJson(key, keyFilters)}>
+            {keySerde === 'Fallback' && <WarningRedIcon />}
+          </Ellipsis>
+        </S.DataCell>
+        <S.DataCell title={content}>
           <S.Metadata>
             <S.MetadataValue>
-              {renderFilteredJson(content, contentFilters)}
+              <Ellipsis text={renderFilteredJson(content, contentFilters)}>
+                {valueSerde === 'Fallback' && <WarningRedIcon />}
+              </Ellipsis>
             </S.MetadataValue>
           </S.Metadata>
-        </StyledDataCell>
+        </S.DataCell>
         <td style={{ width: '5%' }}>
           {vEllipsisOpen && (
             <Dropdown>
@@ -135,7 +130,7 @@ const Message: React.FC<Props> = ({
             </Dropdown>
           )}
         </td>
-      </ClickableRow>
+      </S.ClickableRow>
       {isOpen && (
         <MessageContent
           messageKey={key}

kafka-ui-react-app/src/components/Topics/Topic/Messages/MessageContent/MessageContent.styled.ts

@@ -35,7 +35,16 @@ export const ContentBox = styled.div`
     flex-grow: 1;
   }
 `;
-
+export const DataCell = styled.td`
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  max-width: 350px;
+  min-width: 350px;
+`;
+export const ClickableRow = styled.tr`
+  cursor: pointer;
+`;
 export const MetadataWrapper = styled.div`
   background-color: ${({ theme }) => theme.topicMetaData.backgroundColor};
   padding: 24px;

kafka-ui-react-app/src/components/common/Ellipsis/Ellipsis.styled.ts

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+
+export const Text = styled.div`
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  max-width: 340px;
+`;
+
+export const Wrapper = styled.div`
+  display: flex;
+  gap: 8px;
+  align-items: center;
+`;

kafka-ui-react-app/src/components/common/Ellipsis/Ellipsis.tsx

@@ -0,0 +1,20 @@
+import React, { PropsWithChildren } from 'react';
+
+import * as S from './Ellipsis.styled';
+
+type EllipsisProps = {
+  text: React.ReactNode;
+};
+
+const Ellipsis: React.FC<PropsWithChildren<EllipsisProps>> = ({
+  text,
+  children,
+}) => {
+  return (
+    <S.Wrapper>
+      <S.Text>{text}</S.Text>
+      {children}
+    </S.Wrapper>
+  );
+};
+export default Ellipsis;

kafka-ui-react-app/src/components/common/Icons/WarningRedIcon.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { useTheme } from 'styled-components';
+
+const WarningRedIcon: React.FC = () => {
+  const theme = useTheme();
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect
+        width="20"
+        height="20"
+        rx="10"
+        fill={theme.icons.warningRedIcon.rectFill}
+      />
+      <path
+        d="M9 4.74219H11V12.7422H9V4.74219Z"
+        fill={theme.icons.warningRedIcon.pathFill}
+      />
+      <path
+        d="M9 14.7422C9 14.1899 9.44772 13.7422 10 13.7422C10.5523 13.7422 11 14.1899 11 14.7422C11 15.2945 10.5523 15.7422 10 15.7422C9.44772 15.7422 9 15.2945 9 14.7422Z"
+        fill={theme.icons.warningRedIcon.pathFill}
+      />
+    </svg>
+  );
+};
+
+export default WarningRedIcon;

kafka-ui-react-app/src/theme/theme.ts

@@ -173,6 +173,10 @@ const baseTheme = {
     closeIcon: Colors.neutral[30],
     deleteIcon: Colors.red[20],
     warningIcon: Colors.yellow[20],
+    warningRedIcon: {
+      rectFill: Colors.red[10],
+      pathFill: Colors.red[50],
+    },
     messageToggleIcon: {
       normal: Colors.brand[30],
       hover: Colors.brand[40],