Rename offsets columns and add "message count" in topic details page (#1651)

kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/Overview.tsx

@@ -38,6 +38,12 @@ const Overview: React.FC<Props> = ({
 }) => {
   const { isReadOnly } = React.useContext(ClusterContext);
 
+  const messageCount = React.useMemo(() => {
+    return (partitions || []).reduce((memo, partition) => {
+      return memo + partition.offsetMax - partition.offsetMin;
+    }, 0);
+  }, [partitions]);
+
   return (
     <>
       <Metrics.Wrapper>
@@ -84,6 +90,9 @@ const Overview: React.FC<Props> = ({
           <Metrics.Indicator label="Clean Up Policy">
             <Tag color="gray">{cleanUpPolicy || 'Unknown'}</Tag>
           </Metrics.Indicator>
+          <Metrics.Indicator label="Message Count">
+            {messageCount}
+          </Metrics.Indicator>
         </Metrics.Section>
       </Metrics.Wrapper>
       <div>
@@ -92,8 +101,9 @@ const Overview: React.FC<Props> = ({
             <tr>
               <TableHeaderCell title="Partition ID" />
               <TableHeaderCell title="Broker Leader" />
-              <TableHeaderCell title="Min Offset" />
-              <TableHeaderCell title="Max Offset" />
+              <TableHeaderCell title="First Offset" />
+              <TableHeaderCell title="Next Offset" />
+              <TableHeaderCell title="Message Count" />
               <TableHeaderCell title=" " />
             </tr>
           </thead>
@@ -104,6 +114,7 @@ const Overview: React.FC<Props> = ({
                 <td>{leader}</td>
                 <td>{offsetMin}</td>
                 <td>{offsetMax}</td>
+                <td>{offsetMax - offsetMin}</td>
                 <td style={{ width: '5%' }}>
                   {!internal && !isReadOnly && cleanUpPolicy === 'DELETE' ? (
                     <Dropdown label={<VerticalElipsisIcon />} right>