feat(Diagnostics): add Partitions tab

Author: artemmufazalov

src/components/LabelWithPopover/LabelWithPopover.tsx

@@ -0,0 +1,20 @@
+import type {ReactNode} from 'react';
+
+import {HelpPopover} from '@gravity-ui/uikit';
+
+interface LabelWithPopoverProps {
+    headerText: string;
+    popoverContent: ReactNode;
+    className?: string;
+}
+
+export const LabelWithPopover = ({
+    headerText,
+    popoverContent,
+    className,
+}: LabelWithPopoverProps) => (
+    <div className={className}>
+        {headerText}
+        <HelpPopover content={popoverContent} />
+    </div>
+);

src/components/LabelWithPopover/index.ts

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

src/containers/Tenant/Diagnostics/Diagnostics.tsx

@@ -27,6 +27,7 @@ import {Nodes} from '../../Nodes';
 //@ts-ignore
 import {Tablets} from '../../Tablets';
 import {Consumers} from './Consumers';
+import {PartitionsWrapper} from './Partitions';
 
 import routes, {createHref} from '../../../routes';
 import type {EPathType} from '../../../types/api/schema';
@@ -156,6 +157,9 @@ function Diagnostics(props: DiagnosticsProps) {
             case GeneralPagesIds.consumers: {
                 return <Consumers path={currentSchemaPath} type={type} />;
             }
+            case GeneralPagesIds.partitions: {
+                return <PartitionsWrapper path={currentSchemaPath} type={type} />;
+            }
             default: {
                 return <div>No data...</div>;
             }

src/containers/Tenant/Diagnostics/DiagnosticsPages.ts

@@ -12,6 +12,7 @@ export enum GeneralPagesIds {
     'hotKeys' = 'hotKeys',
     'graph' = 'graph',
     'consumers' = 'consumers',
+    'partitions' = 'partitions',
 }
 
 type Page = {
@@ -72,6 +73,11 @@ const consumers = {
     title: 'Consumers',
 };
 
+const partitions = {
+    id: GeneralPagesIds.partitions,
+    title: 'Partitions',
+};
+
 export const DATABASE_PAGES = [
     overview,
     topQueries,
@@ -87,8 +93,8 @@ export const TABLE_PAGES = [overview, topShards, graph, tablets, hotKeys, descri
 
 export const DIR_PAGES = [overview, topShards, describe];
 
-export const CDC_STREAM_PAGES = [overview, consumers, describe];
-export const TOPIC_PAGES = [overview, consumers, describe];
+export const CDC_STREAM_PAGES = [overview, consumers, partitions, describe];
+export const TOPIC_PAGES = [overview, consumers, partitions, describe];
 
 // verbose mapping to guarantee correct tabs for new path types
 // TS will error when a new type is added but not mapped here

src/containers/Tenant/Diagnostics/Partitions/Headers/Headers.scss

@@ -0,0 +1,33 @@
+.ydb-diagnostics-partitions-columns-header {
+    &__multiline {
+        white-space: normal;
+    }
+
+    &__read-session {
+        width: 80px;
+
+        white-space: normal;
+    }
+
+    &__lags {
+        white-space: nowrap;
+    }
+
+    &__messages {
+        width: 90px;
+
+        white-space: normal;
+    }
+
+    &__lags-popover-content {
+        max-width: 300px;
+
+        div:nth-child(1) {
+            margin-bottom: 10px;
+        }
+    }
+
+    &__messages-popover-content {
+        max-width: 200px;
+    }
+}

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

@@ -0,0 +1,76 @@
+import block from 'bem-cn-lite';
+
+import {LabelWithPopover} from '../../../../../components/LabelWithPopover';
+import {WriteLagImage, ReadLagImage} from '../../../../../components/LagImages';
+
+import {PARTITIONS_COLUMNS_IDS, PARTITIONS_COLUMNS_TITILES} from '../utils/constants';
+
+import i18n from '../i18n';
+
+import './Headers.scss';
+
+const b = block('ydb-diagnostics-partitions-columns-header');
+
+interface MultilineHeaderProps {
+    title: string;
+}
+
+export const MultilineHeader = ({title}: MultilineHeaderProps) => (
+    <div className={b('multiline')}>{title}</div>
+);
+
+export const ReadSessionHeader = () => (
+    <div className={b('read-session')}>
+        {PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.READ_SESSION_ID]}
+    </div>
+);
+
+export const WriteLagsHeader = () => (
+    <LabelWithPopover
+        className={b('lags')}
+        headerText={PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.READ_LAGS]}
+        popoverContent={
+            <div className={b('lags-popover-content')}>
+                <div>{i18n('lagsPopover.writeLags')}</div>
+                <div>
+                    <WriteLagImage />
+                </div>
+            </div>
+        }
+    />
+);
+
+export const ReadLagsHeader = () => (
+    <LabelWithPopover
+        className={b('lags')}
+        headerText={PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.WRITE_LAGS]}
+        popoverContent={
+            <div className={b('lags-popover-content')}>
+                <div>{i18n('lagsPopover.readLags')}</div>
+                <div>
+                    <ReadLagImage />
+                </div>
+            </div>
+        }
+    />
+);
+
+export const UnreadMessagesHeader = () => (
+    <LabelWithPopover
+        className={b('messages')}
+        headerText={PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.UNREAD_MESSAGES]}
+        popoverContent={
+            <div className={b('messages-popover-content')}>{i18n('headers.unread')}</div>
+        }
+    />
+);
+
+export const UncommitedMessagesHeader = () => (
+    <LabelWithPopover
+        className={b('messages')}
+        headerText={PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.UNCOMMITED_MESSAGES]}
+        popoverContent={
+            <div className={b('messages-popover-content')}>{i18n('headers.uncommited')}</div>
+        }
+    />
+);

src/containers/Tenant/Diagnostics/Partitions/Headers/index.ts

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

src/containers/Tenant/Diagnostics/Partitions/Partitions.scss

@@ -0,0 +1,45 @@
+@import '../../../../styles/mixins.scss';
+
+.ydb-diagnostics-partitions {
+    overflow: auto;
+    flex-grow: 1;
+
+    height: 100%;
+
+    @include flex-container();
+
+    &__controls {
+        @include controls();
+    }
+
+    &__consumer-select {
+        width: 220px;
+    }
+
+    &__search {
+        @include search();
+        &_partition {
+            width: 100px;
+        }
+        &_general {
+            width: 280px;
+        }
+    }
+
+    &__table-settings .yc-icon {
+        width: 20px;
+    }
+
+    &__table-wrapper {
+        overflow: auto;
+        @include flex-container();
+    }
+
+    &__table-content {
+        overflow: auto;
+
+        height: 100%;
+
+        @include freeze-nth-column(1);
+    }
+}