ydb-embedded-ui 3.4.5 → 3.5.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## [3.5.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v3.4.5...v3.5.0) (2023-04-18)
+
+
+### Features
+
+* **TableInfo:** extend Table and ColumnTable info ([89e54aa](https://github.com/ydb-platform/ydb-embedded-ui/commit/89e54aa97d7bcbabfd5100daeb1dc0c03608e86e))
+* **TopQueries:** add columns ([b49b98d](https://github.com/ydb-platform/ydb-embedded-ui/commit/b49b98db2da08c355b23f4a33bf05247530543db))
+
+
+### Bug Fixes
+
+* **settings:** use system theme by default ([726c9cb](https://github.com/ydb-platform/ydb-embedded-ui/commit/726c9cb14d7f87cc9248340d1ebebfc8bf0d0384))
+* **Storage:** fix incorrect usage on zero available space ([2704cd7](https://github.com/ydb-platform/ydb-embedded-ui/commit/2704cd7c696d337cc8e3af68941cf444f8dfae81))
+* **TableInfo:** add default format for FollowerGroup fields ([961334a](https://github.com/ydb-platform/ydb-embedded-ui/commit/961334aabe89672994f0f3440e20602e180b3394))
+* **Tablet:** fix dialog type enum ([c477042](https://github.com/ydb-platform/ydb-embedded-ui/commit/c477042cacc2e777cae4bd6981381a8042c603ed))
+* **TopQueries:** enable go back to TopQueries from Query tab ([bbdfe72](https://github.com/ydb-platform/ydb-embedded-ui/commit/bbdfe726c9081f01422dca787b83399ea44b3956))
+* **TopShards:** fix table crash on undefined values ([604e99a](https://github.com/ydb-platform/ydb-embedded-ui/commit/604e99a9427021c61ceb8ea366e316e629032b84))
+* **TruncatedQuery:** wrap message ([f41b7ff](https://github.com/ydb-platform/ydb-embedded-ui/commit/f41b7ff33ac0145446ca89aab031036247f3ddf8))
+
 ## [3.4.5](https://github.com/ydb-platform/ydb-embedded-ui/compare/v3.4.4...v3.4.5) (2023-03-30)
 
 

package/dist/components/InfoViewer/formatters/table.ts

@@ -20,6 +20,12 @@ export const formatFollowerGroupItem = createInfoFormatter<TFollowerGroup>({
     values: {
         FollowerCount: formatNumber,
     },
+    labels: {
+        // Make it shorter to fit label width
+        FollowerCountPerDataCenter: 'FollowerCountPerDC',
+    },
+    // Most of the FollowerGroup fields are arrays or boolean
+    defaultValueFormatter: (value) => value && String(value),
 });
 
 export const formatPartitionConfigItem = createInfoFormatter<TPartitionConfig>({

package/dist/components/TruncatedQuery/TruncatedQuery.js

@@ -16,7 +16,7 @@ function TruncatedQuery({value, maxQueryHeight}) {
         return (
             <React.Fragment>
                 <span className={b()}>{content}</span>
-                <span className={b({color: 'secondary'})}>{message}</span>
+                <span className={b('message', {color: 'secondary'})}>{message}</span>
             </React.Fragment>
         );
     }

package/dist/components/TruncatedQuery/TruncatedQuery.scss

@@ -5,9 +5,13 @@
     white-space: pre;
     word-break: break-word;
 
-    &_color {
-        &_secondary {
-            color: var(--yc-color-text-secondary);
+    &__message {
+        white-space: pre-wrap;
+
+        &_color {
+            &_secondary {
+                color: var(--yc-color-text-secondary);
+            }
         }
     }
 }

package/dist/containers/Node/{NodePages.js → NodePages.ts}

@@ -21,7 +21,7 @@ export const NODE_PAGES = [
     },
 ];
 
-export function getDefaultNodePath(nodeId) {
+export function getDefaultNodePath(nodeId: string | number) {
     return createHref(routes.node, {
         id: nodeId,
         activeTab: OVERVIEW,

package/dist/containers/Tablet/TabletControls/TabletControls.tsx

@@ -9,8 +9,8 @@ import {b} from '../Tablet';
 
 enum EVisibleDialogType {
     'kill' = 'kill',
-    'stop' = 'kill',
-    'resume' = 'kill',
+    'stop' = 'stop',
+    'resume' = 'resume',
 }
 
 type VisibleDialogType = EVisibleDialogType | null;

package/dist/containers/Tenant/Diagnostics/Overview/Overview.tsx

@@ -1,4 +1,4 @@
-import {ReactNode, useCallback, useMemo} from 'react';
+import {ReactNode, useCallback} from 'react';
 import {shallowEqual, useDispatch, useSelector} from 'react-redux';
 
 import {Loader} from '../../../../components/Loader';
@@ -11,7 +11,7 @@ import {TopicInfo} from './TopicInfo';
 import {ChangefeedInfo} from './ChangefeedInfo';
 import {TableInfo} from './TableInfo';
 
-import {EPathType, TEvDescribeSchemeResult} from '../../../../types/api/schema';
+import {EPathType} from '../../../../types/api/schema';
 import {
     isEntityWithMergedImplementation,
     isColumnEntityType,
@@ -33,35 +33,6 @@ import {
 } from '../../../../store/reducers/olapStats';
 import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
 
-function prepareOlapTableGeneral(item?: TEvDescribeSchemeResult, olapStats?: any[]) {
-    const tableData = item?.PathDescription?.ColumnTableDescription;
-
-    const Bytes = olapStats?.reduce((acc, el) => {
-        acc += parseInt(el.Bytes) || 0;
-        return acc;
-    }, 0);
-    const Rows = olapStats?.reduce((acc, el) => {
-        acc += parseInt(el.Rows) || 0;
-        return acc;
-    }, 0);
-    const tabletIds = olapStats?.reduce((acc, el) => {
-        acc.add(el.TabletId);
-        return acc;
-    }, new Set());
-
-    return {
-        PathDescription: {
-            Self: item?.PathDescription?.Self,
-            TableStats: {
-                ColumnShardCount: tableData?.ColumnShardCount,
-                Bytes: Bytes?.toLocaleString('ru-RU', {useGrouping: true}) ?? 0,
-                Rows: Rows?.toLocaleString('ru-RU', {useGrouping: true}) ?? 0,
-                Parts: tabletIds?.size ?? 0,
-            },
-        },
-    };
-}
-
 interface OverviewProps {
     type?: EPathType;
     className?: string;
@@ -81,7 +52,7 @@ function Overview({type, tenantName, className}: OverviewProps) {
     } = useSelector((state: any) => state.schema);
 
     const {data: {result: olapStats} = {result: undefined}, loading: olapStatsLoading} =
-        useSelector((state: any) => state.olapStats);
+        useTypedSelector((state) => state.olapStats);
 
     const loading = schemaLoading || olapStatsLoading;
 
@@ -134,13 +105,6 @@ function Overview({type, tenantName, className}: OverviewProps) {
 
     useAutofetcher(fetchData, [fetchData], autorefresh);
 
-    const schemaData = useMemo(() => {
-        return isTableType(type) && isColumnEntityType(type)
-            ? // process data for ColumnTable
-              prepareOlapTableGeneral(currentItem, olapStats)
-            : currentItem;
-    }, [type, olapStats, currentItem]);
-
     const renderContent = () => {
         // verbose mapping to guarantee a correct render for new path types
         // TS will error when a new type is added but not mapped here
@@ -149,17 +113,21 @@ function Overview({type, tenantName, className}: OverviewProps) {
             [EPathType.EPathTypeDir]: undefined,
             [EPathType.EPathTypeTable]: undefined,
             [EPathType.EPathTypeSubDomain]: undefined,
-            [EPathType.EPathTypeTableIndex]: () => <TableIndexInfo data={schemaData} />,
+            [EPathType.EPathTypeTableIndex]: () => <TableIndexInfo data={currentItem} />,
             [EPathType.EPathTypeExtSubDomain]: undefined,
             [EPathType.EPathTypeColumnStore]: undefined,
             [EPathType.EPathTypeColumnTable]: undefined,
             [EPathType.EPathTypeCdcStream]: () => (
-                <ChangefeedInfo data={schemaData} childrenPaths={mergedChildrenPaths} />
+                <ChangefeedInfo data={currentItem} childrenPaths={mergedChildrenPaths} />
             ),
-            [EPathType.EPathTypePersQueueGroup]: () => <TopicInfo data={schemaData} />,
+            [EPathType.EPathTypePersQueueGroup]: () => <TopicInfo data={currentItem} />,
         };
 
-        return (type && pathTypeToComponent[type]?.()) || <TableInfo data={schemaData} />;
+        return (
+            (type && pathTypeToComponent[type]?.()) || (
+                <TableInfo data={currentItem} type={type} olapStats={olapStats} />
+            )
+        );
     };
 
     if ((loading && !wasLoaded) || (isEntityWithMergedImpl && !mergedChildrenPaths)) {

package/dist/containers/Tenant/Diagnostics/Overview/TableInfo/TableInfo.tsx

@@ -1,8 +1,8 @@
 import {useMemo} from 'react';
 import cn from 'bem-cn-lite';
 
-import type {TEvDescribeSchemeResult} from '../../../../../types/api/schema';
-
+import type {EPathType, TEvDescribeSchemeResult} from '../../../../../types/api/schema';
+import type {KeyValueRow} from '../../../../../types/api/query';
 import {InfoViewer} from '../../../../../components/InfoViewer';
 
 import {getEntityName} from '../../../utils';
@@ -17,27 +17,40 @@ const b = cn('ydb-diagnostics-table-info');
 
 interface TableInfoProps {
     data?: TEvDescribeSchemeResult;
+    type?: EPathType;
+    olapStats?: KeyValueRow[];
 }
 
-export const TableInfo = ({data}: TableInfoProps) => {
+export const TableInfo = ({data, type, olapStats}: TableInfoProps) => {
     const entityName = getEntityName(data?.PathDescription);
 
     const {
-        generalTableInfo = [],
+        generalInfo = [],
         tableStatsInfo = [],
         tabletMetricsInfo = [],
         partitionConfigInfo = [],
-    } = useMemo(() => prepareTableInfo(data), [data]);
+    } = useMemo(() => prepareTableInfo(data, type, olapStats), [data, type, olapStats]);
 
     return (
         <div className={b()}>
             <InfoViewer
-                info={generalTableInfo}
+                info={generalInfo}
                 title={entityName}
                 className={b('info-block')}
                 renderEmptyState={() => <div className={b('title')}>{entityName}</div>}
             />
             <div className={b('row')}>
+                <div className={b('col')}>
+                    {tableStatsInfo.map((info, index) => (
+                        <InfoViewer
+                            key={index}
+                            info={info}
+                            title={index === 0 ? i18n('tableStats') : undefined}
+                            className={b('info-block')}
+                            renderEmptyState={() => null}
+                        />
+                    ))}
+                </div>
                 {tabletMetricsInfo.length > 0 || partitionConfigInfo.length > 0 ? (
                     <div className={b('col')}>
                         <InfoViewer
@@ -54,17 +67,6 @@ export const TableInfo = ({data}: TableInfoProps) => {
                         />
                     </div>
                 ) : null}
-                <div className={b('col')}>
-                    {tableStatsInfo.map((info, index) => (
-                        <InfoViewer
-                            key={index}
-                            info={info}
-                            title={index === 0 ? i18n('tableStats') : undefined}
-                            className={b('info-block')}
-                            renderEmptyState={() => null}
-                        />
-                    ))}
-                </div>
             </div>
         </div>
     );

package/dist/containers/Tenant/Diagnostics/Overview/TableInfo/prepareTableInfo.ts

@@ -1,6 +1,16 @@
-import type {TEvDescribeSchemeResult} from '../../../../../types/api/schema';
-
-import {formatObject} from '../../../../../components/InfoViewer';
+import type {
+    TColumnDataLifeCycle,
+    TColumnTableDescription,
+    TEvDescribeSchemeResult,
+    TPartitionConfig,
+    TTTLSettings,
+} from '../../../../../types/api/schema';
+import type {KeyValueRow} from '../../../../../types/api/query';
+import {EPathType} from '../../../../../types/api/schema';
+import {isNumeric} from '../../../../../utils/utils';
+import {formatBytes, formatNumber} from '../../../../../utils';
+import {formatDurationToShortTimeFormat} from '../../../../../utils/timeParsers';
+import {formatObject, InfoViewerItem} from '../../../../../components/InfoViewer';
 import {
     formatFollowerGroupItem,
     formatPartitionConfigItem,
@@ -8,7 +18,134 @@ import {
     formatTabletMetricsItem,
 } from '../../../../../components/InfoViewer/formatters';
 
-export const prepareTableInfo = (data?: TEvDescribeSchemeResult) => {
+const isInStoreColumnTable = (table: TColumnTableDescription) => {
+    // SchemaPresetId could be 0
+    return table.SchemaPresetName && table.SchemaPresetId !== undefined;
+};
+
+const prepareOlapStats = (olapStats?: KeyValueRow[]) => {
+    const Bytes = olapStats?.reduce((acc, el) => {
+        const value = isNumeric(el.Bytes) ? Number(el.Bytes) : 0;
+        return acc + value;
+    }, 0);
+    const Rows = olapStats?.reduce((acc, el) => {
+        const value = isNumeric(el.Rows) ? Number(el.Rows) : 0;
+        return acc + value;
+    }, 0);
+    const tabletIds = olapStats?.reduce((acc, el) => {
+        acc.add(el.TabletId);
+        return acc;
+    }, new Set());
+
+    return [
+        {label: 'PartCount', value: tabletIds?.size ?? 0},
+        {label: 'RowCount', value: formatNumber(Rows) ?? 0},
+        {label: 'DataSize', value: formatBytes(Bytes) ?? 0},
+    ];
+};
+
+const prepareTTL = (ttl: TTTLSettings | TColumnDataLifeCycle) => {
+    // ExpireAfterSeconds could be 0
+    if (ttl.Enabled && ttl.Enabled.ColumnName && ttl.Enabled.ExpireAfterSeconds !== undefined) {
+        const value = `column: '${
+            ttl.Enabled.ColumnName
+        }', expire after: ${formatDurationToShortTimeFormat(
+            ttl.Enabled.ExpireAfterSeconds * 1000,
+            1,
+        )}`;
+
+        return {label: 'TTL for rows', value};
+    }
+    return undefined;
+};
+
+function prepareColumnTableGeneralInfo(columnTable: TColumnTableDescription) {
+    const columnTableGeneralInfo: InfoViewerItem[] = [];
+
+    columnTableGeneralInfo.push({
+        label: 'Standalone',
+        value: String(!isInStoreColumnTable(columnTable)),
+    });
+
+    if (columnTable.Sharding && columnTable.Sharding.HashSharding) {
+        columnTableGeneralInfo.push({label: 'Sharding', value: 'hash'});
+    }
+
+    if (columnTable.TtlSettings) {
+        const ttlInfo = prepareTTL(columnTable?.TtlSettings);
+        if (ttlInfo) {
+            columnTableGeneralInfo.push(ttlInfo);
+        }
+    }
+
+    return columnTableGeneralInfo;
+}
+
+const prepareTableGeneralInfo = (PartitionConfig: TPartitionConfig, TTLSettings?: TTTLSettings) => {
+    const {PartitioningPolicy = {}, FollowerGroups, EnableFilterByKey} = PartitionConfig;
+
+    const generalTableInfo: InfoViewerItem[] = [];
+
+    const partitioningBySize = PartitioningPolicy.SizeToSplit
+        ? `Enabled, split size: ${formatBytes(PartitioningPolicy.SizeToSplit)}`
+        : 'Disabled';
+
+    const partitioningByLoad = PartitioningPolicy.SplitByLoadSettings?.Enabled
+        ? 'Enabled'
+        : 'Disabled';
+
+    generalTableInfo.push(
+        {label: 'Partitioning by size', value: partitioningBySize},
+        {label: 'Partitioning by load', value: partitioningByLoad},
+        {
+            label: 'Min number of partitions',
+            value: PartitioningPolicy.MinPartitionsCount || 0,
+        },
+    );
+
+    if (PartitioningPolicy.MaxPartitionsCount) {
+        generalTableInfo.push({
+            label: 'Max number of partitions',
+            value: PartitioningPolicy.MaxPartitionsCount || 0,
+        });
+    }
+
+    if (FollowerGroups && FollowerGroups.length) {
+        const {RequireAllDataCenters, FollowerCountPerDataCenter, FollowerCount} =
+            FollowerGroups[0];
+
+        let readReplicasConfig: string;
+
+        if (RequireAllDataCenters && FollowerCountPerDataCenter) {
+            readReplicasConfig = `PER_AZ: ${FollowerCount}`;
+        } else {
+            readReplicasConfig = `ANY_AZ: ${FollowerCount}`;
+        }
+
+        generalTableInfo.push({label: 'Read replicas (followers)', value: readReplicasConfig});
+    }
+
+    if (TTLSettings) {
+        const ttlInfo = prepareTTL(TTLSettings);
+        if (ttlInfo) {
+            generalTableInfo.push(ttlInfo);
+        }
+    }
+
+    generalTableInfo.push({
+        label: 'Bloom filter',
+        value: EnableFilterByKey ? 'Enabled' : 'Disabled',
+    });
+
+    return generalTableInfo;
+};
+
+/** Prepares data for Table, ColumnTable and ColumnStore */
+export const prepareTableInfo = (
+    data?: TEvDescribeSchemeResult,
+    type?: EPathType,
+    olapStats?: KeyValueRow[],
+) => {
     if (!data) {
         return {};
     }
@@ -18,7 +155,8 @@ export const prepareTableInfo = (data?: TEvDescribeSchemeResult) => {
     const {
         TableStats = {},
         TabletMetrics = {},
-        Table: {PartitionConfig = {}} = {},
+        Table: {PartitionConfig = {}, TTLSettings} = {},
+        ColumnTableDescription = {},
     } = PathDescription;
 
     const {
@@ -42,45 +180,62 @@ export const prepareTableInfo = (data?: TEvDescribeSchemeResult) => {
         RowReads,
         RangeReads,
         RangeReadRows,
-
-        ...restTableStats
     } = TableStats;
 
     const {FollowerGroups, FollowerCount, CrossDataCenterFollowerCount} = PartitionConfig;
 
-    const generalTableInfo = formatObject(formatTableStatsItem, {
-        PartCount,
-        RowCount,
-        DataSize,
-        IndexSize,
-        ...restTableStats,
-    });
+    let generalInfo: InfoViewerItem[] = [];
+
+    switch (type) {
+        case EPathType.EPathTypeTable: {
+            generalInfo = prepareTableGeneralInfo(PartitionConfig, TTLSettings);
+            break;
+        }
+        case EPathType.EPathTypeColumnTable: {
+            generalInfo = prepareColumnTableGeneralInfo(ColumnTableDescription);
+            break;
+        }
+    }
 
-    const tableStatsInfo = [
-        formatObject(formatTableStatsItem, {
-            LastAccessTime,
-            LastUpdateTime,
-        }),
-        formatObject(formatTableStatsItem, {
-            ImmediateTxCompleted,
-            PlannedTxCompleted,
-            TxRejectedByOverload,
-            TxRejectedBySpace,
-            TxCompleteLagMsec,
-            InFlightTxCount,
-        }),
-        formatObject(formatTableStatsItem, {
-            RowUpdates,
-            RowDeletes,
-            RowReads,
-            RangeReads,
-            RangeReadRows,
-        }),
-    ];
+    let tableStatsInfo: InfoViewerItem[][];
+
+    // There is no TableStats and TabletMetrics for ColumnTables inside ColumnStore
+    // Therefore we parse olapStats
+    if (type === EPathType.EPathTypeColumnTable && isInStoreColumnTable(ColumnTableDescription)) {
+        tableStatsInfo = [prepareOlapStats(olapStats)];
+    } else {
+        tableStatsInfo = [
+            formatObject(formatTableStatsItem, {
+                PartCount,
+                RowCount,
+                DataSize,
+                IndexSize,
+            }),
+            formatObject(formatTableStatsItem, {
+                LastAccessTime,
+                LastUpdateTime,
+            }),
+            formatObject(formatTableStatsItem, {
+                ImmediateTxCompleted,
+                PlannedTxCompleted,
+                TxRejectedByOverload,
+                TxRejectedBySpace,
+                TxCompleteLagMsec,
+                InFlightTxCount,
+            }),
+            formatObject(formatTableStatsItem, {
+                RowUpdates,
+                RowDeletes,
+                RowReads,
+                RangeReads,
+                RangeReadRows,
+            }),
+        ];
+    }
 
     const tabletMetricsInfo = formatObject(formatTabletMetricsItem, TabletMetrics);
 
-    let partitionConfigInfo = [];
+    let partitionConfigInfo: InfoViewerItem[] = [];
 
     if (Array.isArray(FollowerGroups) && FollowerGroups.length > 0) {
         partitionConfigInfo = formatObject(formatFollowerGroupItem, FollowerGroups[0]);
@@ -92,5 +247,5 @@ export const prepareTableInfo = (data?: TEvDescribeSchemeResult) => {
         );
     }
 
-    return {generalTableInfo, tableStatsInfo, tabletMetricsInfo, partitionConfigInfo};
+    return {generalInfo, tableStatsInfo, tabletMetricsInfo, partitionConfigInfo};
 };

package/dist/containers/Tenant/Diagnostics/TopQueries/TopQueries.scss

@@ -25,27 +25,33 @@
         @include search();
     }
 
-    &__result {
+    &__table {
         overflow: auto;
         flex-grow: 1;
 
         .data-table {
-            &,
-            &__table {
-                width: 100%;
-            }
-
-            &__td {
-                vertical-align: top;
-                white-space: pre;
-                word-break: break-word;
-            }
-
             &__row {
-                max-height: 80px;
-
                 cursor: pointer;
             }
         }
     }
+
+    &__query {
+        overflow: hidden;
+
+        width: 500px;
+
+        vertical-align: top;
+        white-space: pre-wrap;
+        text-overflow: ellipsis;
+        word-break: break-word;
+    }
+
+    &__user-sid {
+        overflow: hidden;
+
+        max-width: 200px;
+
+        text-overflow: ellipsis;
+    }
 }