message: Rename offsets columns and add "message count" in topic details page
diff: @@ -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>
  