fix(TopicStats): use prepared stats, update fields

Author: artemmufazalov

src/components/InfoViewer/InfoViewer.tsx

@@ -4,7 +4,7 @@ import cn from 'bem-cn-lite';
 import './InfoViewer.scss';
 
 export interface InfoViewerItem {
-    label: string;
+    label: ReactNode;
     value: ReactNode;
 }
 
@@ -39,7 +39,7 @@ const InfoViewer = ({
             {info && info.length > 0 ? (
                 <div className={b('items')}>
                     {info.map((data, infoIndex) => (
-                        <div className={b('row')} key={data.label + infoIndex}>
+                        <div className={b('row')} key={infoIndex}>
                             <div className={b('label')}>
                                 <div className={b('label-text', {multiline: multilineLabels})}>
                                     {data.label}

src/components/InfoViewer/formatters/index.ts

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

src/components/InfoViewer/formatters/topicStats.tsx

@@ -4,13 +4,13 @@ import {HelpPopover} from '@gravity-ui/uikit';
 
 interface LabelWithPopoverProps {
     text: string;
-    content: ReactNode;
+    popoverContent: ReactNode;
     className?: string;
 }
 
-export const LabelWithPopover = ({text, content, className}: LabelWithPopoverProps) => (
+export const LabelWithPopover = ({text, popoverContent, className}: LabelWithPopoverProps) => (
     <div className={className}>
         {text}
-        <HelpPopover content={content} />
+        <HelpPopover content={popoverContent} />
     </div>
 );

src/components/LabelWithPopover/LabelWithPopover.tsx

@@ -1,5 +1,5 @@
-.ydb-lag-popover {
-    div:nth-child(1) {
+.ydb-lag-popover-content {
+    &__text {
         margin-bottom: 10px;
     }
 

src/components/LagPopover/index.ts

@@ -2,18 +2,18 @@ import block from 'bem-cn-lite';
 
 import {ReadLagImage, WriteLagImage} from '../LagImages';
 
-import './LagPopover.scss';
+import './LagPopoverContent.scss';
 
-const b = block('ydb-lag-popover');
+const b = block('ydb-lag-popover-content');
 
-interface LagPopoverProps {
+interface LagPopoverContentProps {
     text: string;
     type: 'read' | 'write';
 }
 
-export const LagPopover = ({text, type}: LagPopoverProps) => (
+export const LagPopoverContent = ({text, type}: LagPopoverContentProps) => (
     <div className={b({type})}>
-        <div>{text}</div>
+        <div className={b('text')}>{text}</div>
         <div>{type === 'read' ? <ReadLagImage /> : <WriteLagImage />}</div>
     </div>
 );

src/components/LagPopover/LagPopover.scss src/components/LagPopoverContent/LagPopoverContent.scss

@@ -0,0 +1 @@
+export * from './LagPopoverContent';

src/components/LagPopover/LagPopover.tsx src/components/LagPopoverContent/LagPopoverContent.tsx

@@ -1,7 +1,7 @@
 import block from 'bem-cn-lite';
 
 import {LabelWithPopover} from '../../../../../components/LabelWithPopover';
-import {LagPopover} from '../../../../../components/LagPopover';
+import {LagPopoverContent} from '../../../../../components/LagPopoverContent';
 
 import {CONSUMERS_COLUMNS_IDS, CONSUMERS_COLUMNS_TITILES} from '../utils/constants';
 
@@ -15,6 +15,6 @@ export const ReadLagsHeader = () => (
     <LabelWithPopover
         className={b('lags')}
         text={CONSUMERS_COLUMNS_TITILES[CONSUMERS_COLUMNS_IDS.READ_LAGS]}
-        content={<LagPopover text={i18n('lagsPopover.readLags')} type="read" />}
+        popoverContent={<LagPopoverContent text={i18n('lagsPopover.readLags')} type="read" />}
     />
 );

src/components/LagPopoverContent/index.ts

@@ -1,52 +1,81 @@
 import cn from 'bem-cn-lite';
-import {isEmpty} from 'lodash/fp';
 
-import type {DescribeTopicResult} from '../../../../../types/api/topic';
+import type {IPreparedTopicStats} from '../../../../../types/store/topic';
 
 import {Loader} from '../../../../../components/Loader';
-import {InfoViewerItem, formatObject, InfoViewer} from '../../../../../components/InfoViewer';
-
-import {formatTopicStats} from '../../../../../components/InfoViewer/formatters';
+import {InfoViewerItem, InfoViewer} from '../../../../../components/InfoViewer';
+import {SpeedMultiMeter} from '../../../../../components/SpeedMultiMeter';
+import {LabelWithPopover} from '../../../../../components/LabelWithPopover';
+import {LagPopoverContent} from '../../../../../components/LagPopoverContent';
+import {ResponseError} from '../../../../../components/Errors/ResponseError';
 
 import {useTypedSelector} from '../../../../../utils/hooks';
-import {convertBytesObjectToSpeed} from '../../../../../utils/bytesParsers';
-import {formatBps} from '../../../../../utils';
+import {formatDurationToShortTimeFormat} from '../../../../../utils/timeParsers';
+import {formatBps, formatBytes} from '../../../../../utils';
+
+import {selectPreparedTopicStats} from '../../../../../store/reducers/topic';
 
 import i18n from './i18n';
 
 import './TopicStats.scss';
 
 const b = cn('ydb-overview-topic-stats');
 
-const prepareTopicInfo = (data: DescribeTopicResult): Array<InfoViewerItem> => {
+const prepareTopicInfo = (data: IPreparedTopicStats): Array<InfoViewerItem> => {
     return [
-        ...formatObject(formatTopicStats, {
-            ...data.topic_stats,
-        }),
+        {label: 'Store size', value: formatBytes(data.storeSize)},
+        {
+            label: (
+                <LabelWithPopover
+                    text={'Write idle time'}
+                    popoverContent={
+                        <LagPopoverContent text={i18n('writeIdleTimePopover')} type="write" />
+                    }
+                />
+            ),
+            value: formatDurationToShortTimeFormat(data.partitionsIdleTime),
+        },
+        {
+            label: (
+                <LabelWithPopover
+                    text={'Write lag'}
+                    popoverContent={
+                        <LagPopoverContent text={i18n('writeLagPopover')} type="write" />
+                    }
+                />
+            ),
+            value: formatDurationToShortTimeFormat(data.partitionsWriteLag),
+        },
+        {
+            label: 'Average write speed',
+            value: <SpeedMultiMeter data={data.writeSpeed} withValue={false} />,
+        },
     ];
 };
 
-const prepareBytesWrittenInfo = (data: DescribeTopicResult): Array<InfoViewerItem> => {
-    const preparedBytes = convertBytesObjectToSpeed(data?.topic_stats?.bytes_written);
+const prepareBytesWrittenInfo = (data: IPreparedTopicStats): Array<InfoViewerItem> => {
+    const writeSpeed = data.writeSpeed;
 
     return [
         {
             label: 'per minute',
-            value: formatBps(preparedBytes.perMinute),
+            value: formatBps(writeSpeed.perMinute),
         },
         {
             label: 'per hour',
-            value: formatBps(preparedBytes.perHour),
+            value: formatBps(writeSpeed.perHour),
         },
         {
             label: 'per day',
-            value: formatBps(preparedBytes.perDay),
+            value: formatBps(writeSpeed.perDay),
         },
     ];
 };
 
 export const TopicStats = () => {
-    const {data, error, loading, wasLoaded} = useTypedSelector((state) => state.topic);
+    const {error, loading, wasLoaded} = useTypedSelector((state) => state.topic);
+
+    const data = useTypedSelector(selectPreparedTopicStats);
 
     if (loading && !wasLoaded) {
         return (
@@ -56,24 +85,14 @@ export const TopicStats = () => {
         );
     }
 
-    // There are several backed versions with different behaviour
-    // Possible returns on older versions:
-    // 1. Error when trying to access endpoint
-    // 2. No data
-    // 3. HTML page of Internal Viewer with an error
-    // 4. Data with no topic stats
-    // 5. Topic Stats as an empty object
-    if (
-        error ||
-        !data ||
-        typeof data !== 'object' ||
-        !data.topic_stats ||
-        isEmpty(data.topic_stats)
-    ) {
+    // If there is at least some empty data object
+    // we initialize its fields with zero values
+    // so no data at all is considered to be error as well
+    if (error || !data) {
         return (
             <div className={b()}>
                 <div className={b('title')}>Stats</div>
-                <div className="error">{i18n('notSupportedVersion')}</div>
+                <ResponseError error={error} />
             </div>
         );
     }

src/containers/Tenant/Diagnostics/Consumers/Headers/Headers.tsx

@@ -1,3 +1,4 @@
 {
-  "notSupportedVersion": "Topic stats are not supported in the current cluster version. Update cluster version to see topic stats"
+  "writeLagPopover": "Write lag, maximum among all topic partitions",
+  "writeIdleTimePopover": "Write idle time, maximum among all topic partitions"
 }

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

@@ -1,3 +1,4 @@
 {
-  "notSupportedVersion": "Статистика топиков не поддерживается в текущей версии. Обновите кластер до более новой версии, чтобы увидеть статистику топиков"
+  "writeLagPopover": "Лаг записи, максимальное значение среди всех партиций топика",
+  "writeIdleTimePopover": "Время без записи, максимальное значение среди всех партиций топика"
 }

src/containers/Tenant/Diagnostics/Overview/TopicStats/i18n/en.json

@@ -1,7 +1,7 @@
 import block from 'bem-cn-lite';
 
 import {LabelWithPopover} from '../../../../../components/LabelWithPopover';
-import {LagPopover} from '../../../../../components/LagPopover';
+import {LagPopoverContent} from '../../../../../components/LagPopoverContent';
 
 import {PARTITIONS_COLUMNS_IDS, PARTITIONS_COLUMNS_TITILES} from '../utils/constants';
 
@@ -29,30 +29,34 @@ export const WriteLagsHeader = () => (
     <LabelWithPopover
         className={b('lags')}
         text={PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.READ_LAGS]}
-        content={<LagPopover text={i18n('lagsPopover.readLags')} type="read" />}
+        popoverContent={<LagPopoverContent text={i18n('lagsPopover.readLags')} type="read" />}
     />
 );
 
 export const ReadLagsHeader = () => (
     <LabelWithPopover
         className={b('lags')}
         text={PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.WRITE_LAGS]}
-        content={<LagPopover text={i18n('lagsPopover.writeLags')} type="write" />}
+        popoverContent={<LagPopoverContent text={i18n('lagsPopover.writeLags')} type="write" />}
     />
 );
 
 export const UnreadMessagesHeader = () => (
     <LabelWithPopover
         className={b('messages')}
         text={PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.UNREAD_MESSAGES]}
-        content={<div className={b('messages-popover-content')}>{i18n('headers.unread')}</div>}
+        popoverContent={
+            <div className={b('messages-popover-content')}>{i18n('headers.unread')}</div>
+        }
     />
 );
 
 export const UncommitedMessagesHeader = () => (
     <LabelWithPopover
         className={b('messages')}
         text={PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.UNCOMMITED_MESSAGES]}
-        content={<div className={b('messages-popover-content')}>{i18n('headers.uncommited')}</div>}
+        popoverContent={
+            <div className={b('messages-popover-content')}>{i18n('headers.uncommited')}</div>
+        }
     />
 );