feat(ShardsTable): add explanation for column DataSize (#3781)

Author: Raubzeug

src/components/ShardsTable/columns.tsx

@@ -3,13 +3,15 @@ import DataTable from '@gravity-ui/react-data-table';
 import {EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
 import {formatNumber, roundToPrecision} from '../../utils/dataFormatters/dataFormatters';
 import {getUsageSeverity} from '../../utils/generateEvaluator';
+import {LabelWithPopover} from '../LabelWithPopover/LabelWithPopover';
 import {LinkToSchemaObject} from '../LinkToSchemaObject/LinkToSchemaObject';
 import {NodeId} from '../NodeId/NodeId';
 import {TabletNameWrapper} from '../TabletNameWrapper/TabletNameWrapper';
 import {UsageLabel} from '../UsageLabel/UsageLabel';
 
 import type {TopShardsColumnId} from './constants';
 import {TOP_SHARDS_COLUMNS_IDS, TOP_SHARDS_COLUMNS_TITLES} from './constants';
+import i18n from './i18n';
 import type {GetShardsColumn} from './types';
 import {prepareDateTimeValue} from './utils';
 
@@ -31,7 +33,12 @@ export const getPathColumn: GetShardsColumn = ({databaseFullPath = ''}) => {
 export const getDataSizeColumn: GetShardsColumn = () => {
     return {
         name: TOP_SHARDS_COLUMNS_IDS.DataSize,
-        header: TOP_SHARDS_COLUMNS_TITLES.DataSize,
+        header: (
+            <LabelWithPopover
+                text={TOP_SHARDS_COLUMNS_TITLES.DataSize}
+                popoverContent={i18n('context_data-size')}
+            />
+        ),
         render: ({row}) => {
             return formatNumber(row.DataSize);
         },

src/components/ShardsTable/i18n/en.json

@@ -2,6 +2,7 @@
   "tablet-id": "TabletId",
   "cpu-cores": "CPUCores",
   "data-size": "DataSize (B)",
+  "context_data-size": "The total data size in bytes for a single table shard",
   "path": "Path",
   "node-id": "NodeId",
   "peak-time": "PeakTime",

tests/suites/tenant/diagnostics/Diagnostics.ts

@@ -106,7 +106,16 @@ export class Table {
         const headerCount = await headers.count();
         const headerNames = [];
         for (let i = 0; i < headerCount; i++) {
-            headerNames.push(await headers.nth(i).innerText());
+            const headerText = await headers.nth(i).evaluate((node) => {
+                const title = node.getAttribute('title');
+                if (title) {
+                    return title;
+                }
+
+                const textContainer = node.querySelector('.data-table__head-cell > div');
+                return textContainer?.textContent || '';
+            });
+            headerNames.push(headerText.replace(/\s+/g, ' ').trim());
         }
         return headerNames;
     }