feat(Overview): display topic stats for topics and streams

Author: artemmufazalov

src/components/InfoViewer/InfoViewer.scss

@@ -42,6 +42,16 @@
         color: var(--yc-color-text-secondary);
     }
 
+    &__label-text {
+        &_multiline {
+            overflow: visible;
+
+            max-width: 180px;
+
+            white-space: normal;
+        }
+    }
+
     &__dots {
         display: flex;
         flex: 1 1 auto;

src/components/InfoViewer/InfoViewer.tsx

@@ -14,19 +14,29 @@ interface InfoViewerProps {
     dots?: boolean;
     size?: 's';
     className?: string;
+    multilineLabels?: boolean;
 }
 
 const b = cn('info-viewer');
 
-const InfoViewer = ({title, info, dots = true, size, className}: InfoViewerProps) => (
+const InfoViewer = ({
+    title,
+    info,
+    dots = true,
+    size,
+    className,
+    multilineLabels,
+}: InfoViewerProps) => (
     <div className={b({size}, className)}>
         {title && <div className={b('title')}>{title}</div>}
         {info && info.length > 0 ? (
             <div className={b('items')}>
                 {info.map((data, infoIndex) => (
                     <div className={b('row')} key={data.label + infoIndex}>
                         <div className={b('label')}>
-                            {data.label}
+                            <div className={b('label-text', {multiline: multilineLabels})}>
+                                {data.label}
+                            </div>
                             {dots && <div className={b('dots')} />}
                         </div>
 

src/components/InfoViewer/formatters/cdcStream.ts

@@ -0,0 +1,10 @@
+import {TCdcStreamDescription} from '../../../types/api/schema';
+
+import {createInfoFormatter} from '../utils';
+
+export const formatCdcStreamItem = createInfoFormatter<TCdcStreamDescription>({
+    values: {
+        Mode: (value) => value?.substring('ECdcStreamMode'.length),
+        Format: (value) => value?.substring('ECdcStreamFormat'.length),
+    },
+});

src/components/InfoViewer/formatters/index.ts

@@ -1,2 +1,5 @@
 export * from './common';
 export * from './schema';
+export * from './topicStats';
+export * from './pqGroup';
+export * from './cdcStream';

src/components/InfoViewer/formatters/pqGroup.ts

@@ -0,0 +1,51 @@
+import {
+    EMeteringMode,
+    TPersQueueGroupDescription,
+    TPQPartitionConfig,
+    TPQTabletConfig,
+} from '../../../types/api/schema';
+import {formatBps, formatBytes, formatNumber} from '../../../utils';
+import {HOUR_IN_SECONDS} from '../../../utils/constants';
+
+import {createInfoFormatter} from '../utils';
+
+const EMeteringModeToNames: Record<EMeteringMode, string> = {
+    [EMeteringMode.METERING_MODE_REQUEST_UNITS]: 'request-units',
+    [EMeteringMode.METERING_MODE_RESERVED_CAPACITY]: 'reserved-capacity',
+};
+
+export const formatPQGroupItem = createInfoFormatter<TPersQueueGroupDescription>({
+    values: {
+        Partitions: (value) => formatNumber(value?.length || 0),
+        PQTabletConfig: (value) => {
+            const hours =
+                Math.round((value.PartitionConfig.LifetimeSeconds / HOUR_IN_SECONDS) * 100) / 100;
+            return `${formatNumber(hours)} hours`;
+        },
+    },
+    labels: {
+        Partitions: 'Partitions count',
+        PQTabletConfig: 'Retention',
+    },
+});
+
+export const formatPQTabletConfig = createInfoFormatter<TPQTabletConfig>({
+    values: {
+        Codecs: (value) => value && Object.values(value.Codecs || {}).join(', '),
+        MeteringMode: (value) => value && EMeteringModeToNames[value],
+    },
+    labels: {
+        MeteringMode: 'Metering mode',
+    },
+});
+
+export const formatPQPartitionConfig = createInfoFormatter<TPQPartitionConfig>({
+    values: {
+        StorageLimitBytes: formatBytes,
+        WriteSpeedInBytesPerSecond: formatBps,
+    },
+    labels: {
+        StorageLimitBytes: 'Retention storage',
+        WriteSpeedInBytesPerSecond: 'Partitions write speed',
+    },
+});

src/components/InfoViewer/formatters/schema.ts

@@ -1,10 +1,4 @@
-import type {
-    TCdcStreamDescription,
-    TIndexDescription,
-    TPersQueueGroupDescription,
-} from '../../../types/api/schema';
-import {formatNumber} from '../../../utils';
-import {HOUR_IN_SECONDS} from '../../../utils/constants';
+import {TIndexDescription} from '../../../types/api/schema';
 
 import {createInfoFormatter} from '../utils';
 
@@ -20,25 +14,3 @@ export const formatTableIndexItem = createInfoFormatter<TIndexDescription>({
         DataColumnNames: 'Includes',
     },
 });
-
-export const formatCdcStreamItem = createInfoFormatter<TCdcStreamDescription>({
-    values: {
-        Mode: (value) => value?.substring('ECdcStreamMode'.length),
-        Format: (value) => value?.substring('ECdcStreamFormat'.length),
-    },
-});
-
-export const formatPQGroupItem = createInfoFormatter<TPersQueueGroupDescription>({
-    values: {
-        Partitions: (value) => formatNumber(value?.length || 0),
-        PQTabletConfig: (value) => {
-            const hours =
-                Math.round((value.PartitionConfig.LifetimeSeconds / HOUR_IN_SECONDS) * 100) / 100;
-            return `${formatNumber(hours)} hours`;
-        },
-    },
-    labels: {
-        Partitions: 'Partitions count',
-        PQTabletConfig: 'Retention',
-    },
-});

src/components/InfoViewer/formatters/topicStats.tsx

@@ -0,0 +1,50 @@
+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,
+    formatDurationToShortTimeFormat,
+} from '../../../utils/timeParsers';
+
+import {VerticalBars} from '../../VerticalBars/VerticalBars';
+
+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),
+        bytes_written: (value) =>
+            value && <VerticalBars values={Object.values(prepareBytesWritten(value))} />,
+    },
+    labels: {
+        store_size_bytes: 'Store size',
+        min_last_write_time: 'Partitions max time since last write',
+        max_write_time_lag: 'Partitions max write time lag',
+        bytes_written: 'Average write speed',
+    },
+});

src/components/InfoViewer/schemaInfo/CDCStreamInfo.tsx

@@ -1,3 +1 @@
-export * from './CDCStreamInfo';
 export * from './TableIndexInfo';
-export * from './PersQueueGroupInfo';