PartitionInfoRow.tsx 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. import React from 'react';
  2. import { Row } from '@tanstack/react-table';
  3. import Heading from 'components/common/heading/Heading.styled';
  4. import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted';
  5. import {
  6. List,
  7. Label,
  8. } from 'components/common/PropertiesList/PropertiesList.styled';
  9. import { useTimeFormat } from 'lib/hooks/useTimeFormat';
  10. import { TopicAnalysisStats } from 'generated-sources';
  11. import * as S from './Statistics.styles';
  12. const PartitionInfoRow: React.FC<{ row: Row<TopicAnalysisStats> }> = ({
  13. row,
  14. }) => {
  15. const formatTimestamp = useTimeFormat();
  16. const {
  17. totalMsgs,
  18. minTimestamp,
  19. maxTimestamp,
  20. nullKeys,
  21. nullValues,
  22. approxUniqKeys,
  23. approxUniqValues,
  24. keySize,
  25. valueSize,
  26. } = row.original;
  27. return (
  28. <S.PartitionInfo>
  29. <div>
  30. <Heading level={4}>Partition stats</Heading>
  31. <List>
  32. <Label>Total message</Label>
  33. <span>{totalMsgs}</span>
  34. <Label>Total size</Label>
  35. <BytesFormatted value={(keySize?.sum || 0) + (valueSize?.sum || 0)} />
  36. <Label>Min. timestamp</Label>
  37. <span>{formatTimestamp(minTimestamp)}</span>
  38. <Label>Max. timestamp</Label>
  39. <span>{formatTimestamp(maxTimestamp)}</span>
  40. <Label>Null keys amount</Label>
  41. <span>{nullKeys}</span>
  42. <Label>Null values amount</Label>
  43. <span>{nullValues}</span>
  44. <Label>Approx. unique keys amount</Label>
  45. <span>{approxUniqKeys}</span>
  46. <Label>Approx. unique values amount</Label>
  47. <span>{approxUniqValues}</span>
  48. </List>
  49. </div>
  50. <div>
  51. <Heading level={4}>Keys sizes</Heading>
  52. <List>
  53. <Label>Total keys size</Label>
  54. <BytesFormatted value={keySize?.sum} />
  55. <Label>Min key size</Label>
  56. <BytesFormatted value={keySize?.min} />
  57. <Label>Max key size</Label>
  58. <BytesFormatted value={keySize?.max} />
  59. <Label>Avg key size</Label>
  60. <BytesFormatted value={keySize?.avg} />
  61. <Label>Percentile 50</Label>
  62. <BytesFormatted value={keySize?.prctl50} />
  63. <Label>Percentile 75</Label>
  64. <BytesFormatted value={keySize?.prctl75} />
  65. <Label>Percentile 95</Label>
  66. <BytesFormatted value={keySize?.prctl95} />
  67. <Label>Percentile 99</Label>
  68. <BytesFormatted value={keySize?.prctl99} />
  69. <Label>Percentile 999</Label>
  70. <BytesFormatted value={keySize?.prctl999} />
  71. </List>
  72. </div>
  73. <div>
  74. <Heading level={4}>Values sizes</Heading>
  75. <List>
  76. <Label>Total keys size</Label>
  77. <BytesFormatted value={valueSize?.sum} />
  78. <Label>Min key size</Label>
  79. <BytesFormatted value={valueSize?.min} />
  80. <Label>Max key size</Label>
  81. <BytesFormatted value={valueSize?.max} />
  82. <Label>Avg key size</Label>
  83. <BytesFormatted value={valueSize?.avg} />
  84. <Label>Percentile 50</Label>
  85. <BytesFormatted value={valueSize?.prctl50} />
  86. <Label>Percentile 75</Label>
  87. <BytesFormatted value={valueSize?.prctl75} />
  88. <Label>Percentile 95</Label>
  89. <BytesFormatted value={valueSize?.prctl95} />
  90. <Label>Percentile 99</Label>
  91. <BytesFormatted value={valueSize?.prctl99} />
  92. <Label>Percentile 999</Label>
  93. <BytesFormatted value={valueSize?.prctl999} />
  94. </List>
  95. </div>
  96. </S.PartitionInfo>
  97. );
  98. };
  99. export default PartitionInfoRow;