fix(Topic): use SpeedMultiMeter and utils functions

Author: artemmufazalov

src/components/InfoViewer/formatters/topicStats.tsx

@@ -1,45 +1,24 @@
-import type {MultipleWindowsStat} from '../../../types/api/consumer';
 import type {TopicStats} from '../../../types/api/topic';
 import {formatBytes} from '../../../utils';
-import {DAY_IN_SECONDS, HOUR_IN_SECONDS, MINUTE_IN_SECONDS} from '../../../utils/constants';
-
 import {
-    parseProtobufTimestampToMs,
-    parseProtobufDurationToMs,
+    parseLag,
+    parseTimestampToIdleTime,
     formatDurationToShortTimeFormat,
 } from '../../../utils/timeParsers';
+import {convertBytesObjectToSpeed} from '../../../utils/bytesParsers';
 
-import {VerticalBars} from '../../VerticalBars/VerticalBars';
+import {SpeedMultiMeter} from '../../SpeedMultiMeter';
 
 import {createInfoFormatter} from '../utils';
 
-export const prepareBytesWritten = (data?: MultipleWindowsStat) => {
-    return {
-        per_minute:
-            data && data.per_minute ? Math.floor(Number(data.per_minute) / MINUTE_IN_SECONDS) : 0,
-        per_hour: data && data.per_hour ? Math.floor(Number(data.per_hour) / HOUR_IN_SECONDS) : 0,
-        per_day: data && data.per_day ? Math.floor(Number(data.per_day) / DAY_IN_SECONDS) : 0,
-    };
-};
-
 export const formatTopicStats = createInfoFormatter<TopicStats>({
     values: {
         store_size_bytes: formatBytes,
-        min_last_write_time: (value) => {
-            if (!value) {
-                return formatDurationToShortTimeFormat(0);
-            }
-
-            const durationMs = Date.now() - parseProtobufTimestampToMs(value);
-
-            // Duration could be negative because of the difference between server and local time
-            // Usually it below 100ms, so it could be omitted
-            return formatDurationToShortTimeFormat(durationMs < 0 ? 0 : durationMs);
-        },
-        max_write_time_lag: (value) =>
-            formatDurationToShortTimeFormat(value ? parseProtobufDurationToMs(value) : 0),
+        min_last_write_time: (value) =>
+            formatDurationToShortTimeFormat(parseTimestampToIdleTime(value)),
+        max_write_time_lag: (value) => formatDurationToShortTimeFormat(parseLag(value)),
         bytes_written: (value) =>
-            value && <VerticalBars values={Object.values(prepareBytesWritten(value))} />,
+            value && <SpeedMultiMeter data={convertBytesObjectToSpeed(value)} withValue={false} />,
     },
     labels: {
         store_size_bytes: 'Store size',

src/containers/Tenant/Diagnostics/Overview/TopicStats/TopicStats.scss

@@ -9,8 +9,16 @@
         margin-top: 50px;
     }
 
-    .ydb-bars {
+    .info-viewer__row {
+        align-items: flex-start;
+    }
+
+    .speed-multimeter {
         margin-top: -5px;
+
+        &__content {
+            justify-content: flex-start;
+        }
     }
 
     &__info {

src/containers/Tenant/Diagnostics/Overview/TopicStats/TopicStats.tsx

@@ -6,12 +6,10 @@ import type {DescribeTopicResult} from '../../../../../types/api/topic';
 import {Loader} from '../../../../../components/Loader';
 import {InfoViewerItem, formatObject, InfoViewer} from '../../../../../components/InfoViewer';
 
-import {
-    prepareBytesWritten,
-    formatTopicStats,
-} from '../../../../../components/InfoViewer/formatters';
+import {formatTopicStats} from '../../../../../components/InfoViewer/formatters';
 
 import {useTypedSelector} from '../../../../../utils/hooks';
+import {convertBytesObjectToSpeed} from '../../../../../utils/bytesParsers';
 import {formatBps} from '../../../../../utils';
 
 import i18n from './i18n';
@@ -29,20 +27,20 @@ const prepareTopicInfo = (data: DescribeTopicResult): Array<InfoViewerItem> => {
 };
 
 const prepareBytesWrittenInfo = (data: DescribeTopicResult): Array<InfoViewerItem> => {
-    const preparedBytes = prepareBytesWritten(data?.topic_stats?.bytes_written);
+    const preparedBytes = convertBytesObjectToSpeed(data?.topic_stats?.bytes_written);
 
     return [
         {
             label: 'per minute',
-            value: formatBps(preparedBytes.per_minute),
+            value: formatBps(preparedBytes.perMinute),
         },
         {
             label: 'per hour',
-            value: formatBps(preparedBytes.per_hour),
+            value: formatBps(preparedBytes.perHour),
         },
         {
             label: 'per day',
-            value: formatBps(preparedBytes.per_day),
+            value: formatBps(preparedBytes.perDay),
         },
     ];
 };

src/utils/timeParsers/index.ts

@@ -1,2 +1,3 @@
 export * from './formatDuration';
-export * from './protobuf';
+export * from './protobufParsers';
+export * from './parsers';

src/utils/timeParsers/parsers.ts

@@ -0,0 +1,18 @@
+import type {IProtobufTimeObject} from '../../types/api/common';
+
+import {parseProtobufDurationToMs, parseProtobufTimestampToMs} from '.';
+
+export const parseLag = (value: string | IProtobufTimeObject | undefined) =>
+    value ? parseProtobufDurationToMs(value) : 0;
+
+export const parseTimestampToIdleTime = (value: string | IProtobufTimeObject | undefined) => {
+    if (!value) {
+        return 0;
+    }
+
+    const duration = Date.now() - parseProtobufTimestampToMs(value);
+
+    // Duration could be negative because of the difference between server and local time
+    // Usually it below 100ms, so it could be omitted
+    return duration < 0 ? 0 : duration;
+};