Rename offsets columns
To make offsets indication more clear we have to:
Topic details page:
1) Rename min/max offset to first/next (earliest/latest?) offset
2) Add a column "message count"

CC @iliax @GneyHabub 
kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/Overview.tsx
kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/Overview.tsx
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/Overview.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/Overview.tsx
index 458d2dff6a3..f947eaf01df 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/Overview.tsx
+++ b/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>
