ydb-embedded-ui 1.8.6 → 1.9.0

package/dist/containers/Node/NodeStructure/Pdisk.tsx

@@ -14,9 +14,11 @@ import {Vdisk} from './Vdisk';
 
 import {bytesToGB, pad9} from '../../../utils/utils';
 import {formatStorageValuesToGb} from '../../../utils';
+import {getPDiskType} from '../../../utils/pdisk';
 
 import {DEFAULT_TABLE_SETTINGS} from '../../../utils/constants';
 import {valueIsDefined} from './NodeStructure';
+import {PDiskTitleBadge} from './PDiskTitleBadge';
 
 const b = cn('kv-node-structure');
 
@@ -230,6 +232,7 @@ export function PDisk(props: PDiskProps) {
         }
         if (valueIsDefined(Category)) {
             pdiskInfo.push({label: 'Category', value: Category});
+            pdiskInfo.push({label: 'Type', value: getPDiskType(data)});
         }
         pdiskInfo.push({
             label: 'Allocated Size',
@@ -286,8 +289,27 @@ export function PDisk(props: PDiskProps) {
         <div className={b('pdisk')} id={props.id}>
             <div className={b('pdisk-header')}>
                 <div className={b('pdisk-title-wrapper')}>
-                    <span>{data.Path}</span>
-                    <EntityStatus status={data.Device} name={`${data.NodeId}-${data.PDiskId}`} />
+                    <EntityStatus status={data.Device} />
+                    <PDiskTitleBadge
+                        label="PDiskID"
+                        value={data.PDiskId}
+                        className={b('pdisk-title-id')}
+                    />
+                    <PDiskTitleBadge
+                        value={getPDiskType(data)}
+                        className={b('pdisk-title-type')}
+                    />
+                    <ProgressViewer
+                        value={data.TotalSize - data.AvailableSize}
+                        capacity={data.TotalSize}
+                        formatValues={formatStorageValuesToGb}
+                        colorizeProgress={true}
+                        className={b('pdisk-title-size')}
+                    />
+                    <PDiskTitleBadge
+                        label="VDisks"
+                        value={data.vDisks.length}
+                    />
                 </div>
                 <Button onClick={unfolded ? onClosePDiskDetails : onOpenPDiskDetails} view="flat-secondary">
                     <ArrowToggle direction={unfolded ? 'top' : 'bottom'} />

package/dist/containers/Nodes/Nodes.js

@@ -63,6 +63,7 @@ class Nodes extends React.Component {
     }
 
     componentWillUnmount() {
+        this.props.hideTooltip();
         clearInterval(this.reloadDescriptor);
     }
 

package/dist/containers/ReduxTooltip/ReduxTooltip.js

@@ -11,7 +11,7 @@ const propTypes = {
     className: PropTypes.string,
     toolTipVisible: PropTypes.bool,
     currentHoveredRef: PropTypes.object,
-    data: PropTypes.object,
+    data: PropTypes.any,
     template: PropTypes.func,
     hideTooltip: PropTypes.func,
 };

package/dist/containers/Tablets/Tablets.js

@@ -150,7 +150,7 @@ class Tablets extends React.Component {
         const {stateFilter, typeFilter, className} = this.props;
 
         return (
-            <div className={(b(), className)}>
+            <div className={b(null, className)}>
                 <div className={b('header')}>
                     <Select
                         className={b('filter-control')}

package/dist/containers/Tablets/Tablets.scss

@@ -13,13 +13,7 @@
     }
 
     &__items {
-        display: flex;
         flex: 1 1 auto;
-        flex-wrap: wrap;
-    }
-
-    &__items-wrapper {
-        overflow: auto;
     }
 
     &__filters {

package/dist/containers/TabletsFilters/TabletsFilters.scss

@@ -3,7 +3,6 @@
 .tablets-filters {
     overflow: auto;
 
-    max-height: 400px;
     @include flex-container();
 
     &__node {
@@ -19,18 +18,12 @@
     }
 
     &__items {
-        display: flex;
         overflow: auto;
         flex: 1 1 auto;
-        flex-wrap: wrap;
 
         padding: 5px 20px;
     }
 
-    &__items-wrapper {
-        overflow: auto;
-    }
-
     &__filters {
         display: flex;
         align-items: center;

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

@@ -1,9 +1,13 @@
+$section-title-margin: 20px;
+$section-title-line-height: 24px;
+
 .kv-detailed-overview {
     display: flex;
-    gap: 10px;
+    gap: 20px;
     &__section {
         display: flex;
-        flex: 0 0 50%;
+        overflow-x: hidden;
+        flex: 0 0 calc(50% - 10px);
         flex-direction: column;
     }
 

package/dist/containers/Tenant/Diagnostics/Healthcheck/Healthcheck.js

@@ -97,10 +97,14 @@ class Healthcheck extends React.Component {
                     </div>
                     {this.renderUpdateButton()}
                 </div>
-                <div>
+                <div className={b('preview-content')}>
                     {text}
                     {!statusOk && (
-                        <Button view="flat-info" onClick={showMoreHandler}>
+                        <Button
+                            view="flat-info"
+                            onClick={showMoreHandler}
+                            size="s"
+                        >
                             Show details
                         </Button>
                     )}

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

@@ -1,3 +1,4 @@
+@use '../DetailedOverview/DetailedOverview.scss' as detailedOverview;
 @import '../../../../styles/mixins.scss';
 
 .healthcheck {
@@ -37,14 +38,17 @@
 
     &__status-wrapper {
         display: flex;
-        align-items: baseline;
 
-        margin-bottom: 15px;
+        margin-bottom: detailedOverview.$section-title-margin;
         gap: 8px;
     }
 
     &__preview-title {
         font-weight: 600;
+        line-height: detailedOverview.$section-title-line-height;
+    }
+
+    &__preview-content {
         line-height: 24px;
     }
 

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

@@ -6,9 +6,10 @@ import {Loader} from '@yandex-cloud/uikit';
 
 //@ts-ignore
 import SchemaInfoViewer from '../../Schema/SchemaInfoViewer/SchemaInfoViewer';
+import {IndexInfoViewer} from '../../../../components/IndexInfoViewer/IndexInfoViewer';
 
 import type {EPathType} from '../../../../types/api/schema';
-import {isColumnEntityType, isTableType} from '../../utils/schema';
+import {isColumnEntityType, isTableType, mapPathTypeToNavigationTreeType} from '../../utils/schema';
 import {AutoFetcher} from '../../../../utils/autofetcher';
 //@ts-ignore
 import {getSchema} from '../../../../store/reducers/schema';
@@ -112,11 +113,24 @@ function Overview(props: OverviewProps) {
         );
     };
 
+    const renderContent = () => {
+        switch (mapPathTypeToNavigationTreeType(props.type)) {
+            case 'index':
+                return (
+                    <IndexInfoViewer data={schemaData} />
+                );
+            default:
+                return (
+                    <SchemaInfoViewer fullPath={currentItem.Path} data={schemaData} />
+                );
+        }
+    }
+
     return loading && !wasLoaded ? (
         renderLoader()
     ) : (
         <div className={props.className}>
-            <SchemaInfoViewer fullPath={currentItem.Path} data={schemaData} />
+            {renderContent()}
         </div>
     );
 }

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.js

@@ -25,9 +25,11 @@ const renderName = (tenant) => {
     if (tenant) {
         const {Name} = tenant;
         return (
-            <div className={b('tenant-name')}>
+            <div className={b('tenant-name-wrapper')}>
                 <EntityStatus status={tenant.State} />
-                <span>{Name}</span>
+                <span className={b('tenant-name-trim')}>
+                    <span className={b('tenant-name')}>{Name}</span>
+                </span>
             </div>
         );
     }
@@ -139,17 +141,17 @@ class TenantOverview extends React.Component {
                             this.props.tenant.Name,
                             this.props.tenant.Type,
                         )}
-                    <div className={b('system-tablets')}>
-                        {SystemTablets &&
-                            SystemTablets.map((tablet, tabletIndex) => (
-                                <Tablet
-                                    onMouseEnter={showTooltip}
-                                    onMouseLeave={hideTooltip}
-                                    key={tabletIndex}
-                                    tablet={tablet}
-                                />
-                            ))}
-                    </div>
+                </div>
+                <div className={b('system-tablets')}>
+                    {SystemTablets &&
+                        SystemTablets.map((tablet, tabletIndex) => (
+                            <Tablet
+                                onMouseEnter={showTooltip}
+                                onMouseLeave={hideTooltip}
+                                key={tabletIndex}
+                                tablet={tablet}
+                            />
+                        ))}
                 </div>
                 <div className={b('common-info')}>
                     {PoolStats ? (

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

@@ -1,30 +1,46 @@
+@use '../DetailedOverview/DetailedOverview.scss' as detailedOverview;
+
 .tenant-overview {
     padding-bottom: 20px;
     &__loader {
         display: flex;
         justify-content: center;
     }
-    &__tenant-name {
+    &__tenant-name-wrapper {
         display: flex;
+        overflow: hidden;
         align-items: center;
 
         & .yc-link {
             display: flex;
         }
     }
+    &__tenant-name-trim {
+        overflow: hidden;
+
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        direction: rtl;
+    }
+
+    &__tenant-name {
+        unicode-bidi: plaintext;
+    }
 
     &__top {
         display: flex;
         align-items: center;
 
-        margin-bottom: 20px;
+        margin-bottom: 10px;
+
+        line-height: 24px;
     }
 
     &__top-label {
-        margin-bottom: 20px;
+        margin-bottom: detailedOverview.$section-title-margin;
 
         font-weight: 600;
-        line-height: 24px;
+        line-height: detailedOverview.$section-title-line-height;
         gap: 10px;
     }
 
@@ -42,7 +58,7 @@
         flex-wrap: wrap;
         align-items: center;
 
-        margin-left: 15px;
+        margin-bottom: 35px;
     }
 
     &__collapse-title {
@@ -76,7 +92,7 @@
         margin-bottom: 20px;
 
         font-size: var(--yc-text-body-2-font-size);
-        font-weight: 500;
+        font-weight: 600;
         line-height: var(--yc-text-body-2-line-height);
     }
 }

package/dist/containers/Tenant/Preview/Preview.js

@@ -12,6 +12,7 @@ import Fullscreen from '../../../components/Fullscreen/Fullscreen';
 import {sendQuery, setQueryOptions} from '../../../store/reducers/preview';
 import {showTooltip, hideTooltip} from '../../../store/reducers/tooltip';
 import {prepareQueryError, prepareQueryResponse} from '../../../utils/index';
+import {isNumeric} from '../../../utils/utils';
 
 import {isTableType} from '../utils/schema';
 import {AutoFetcher} from '../../../utils/autofetcher';
@@ -127,6 +128,8 @@ class Preview extends React.Component {
         if (data && data.length > 0) {
             columns = Object.keys(data[0]).map((key) => ({
                 name: key,
+                align: isNumeric(data[0][key]) ? DataTable.RIGHT : DataTable.LEFT,
+                sortAccessor: (row) => isNumeric(row[key]) ? Number(row[key]) : row[key],
                 render: ({value}) => {
                     return (
                         <span

package/dist/containers/Tenant/Schema/SchemaInfoViewer/SchemaInfoViewer.js

@@ -28,29 +28,33 @@ class SchemaInfoViewer extends React.Component {
         if (data) {
             const {PathDescription = {}} = data;
             const {TableStats = {}, TabletMetrics = {}} = PathDescription;
-            const tableStatsInfo =
-                TableStats &&
-                Object.keys(TableStats).map((key) => ({
-                    label: key,
-                    value: TableStats[key].toString(),
-                }));
+            const {PartCount, ...restTableStats} = TableStats;
 
-            const tabletMetricsInfo =
-                TableStats &&
-                Object.keys(TabletMetrics).map((key) => ({
-                    label: key,
-                    value: this.formatTabletMetricsValue(key, TabletMetrics[key].toString()),
-                }));
+            const priorityInfo = [{
+                label: 'PartCount',
+                value: PartCount,
+            }].filter(({value}) => value !== undefined);
 
-            let generalInfo = Object.assign(tableStatsInfo, tabletMetricsInfo);
-            generalInfo = Object.assign(generalInfo);
+            const tableStatsInfo = Object.keys(restTableStats).map((key) => ({
+                label: key,
+                value: TableStats[key].toString(),
+            }));
 
-            const infoLength = Object.keys(generalInfo).length;
+            const tabletMetricsInfo = Object.keys(TabletMetrics).map((key) => ({
+                label: key,
+                value: this.formatTabletMetricsValue(key, TabletMetrics[key].toString()),
+            }));
 
+            const generalInfo = [
+                ...priorityInfo,
+                ...tabletMetricsInfo,
+                ...tableStatsInfo,
+            ];
+ 
             return (
                 <div className={b()}>
                     <div className={b('item')}>
-                        {infoLength ? (
+                        {generalInfo.length ? (
                             <InfoViewer info={generalInfo}></InfoViewer>
                         ) : (
                             <div>Empty</div>

package/dist/containers/Tenant/Schema/SchemaTree/SchemaTree.tsx

@@ -61,6 +61,7 @@ export function SchemaTree(props: SchemaTreeProps) {
             activePath={currentPath}
             onActivePathUpdate={handleActivePathUpdate}
             cache={false}
+            virtualize
         />
     );
 }

package/dist/types/api/schema.ts

@@ -54,6 +54,8 @@ interface TPathDescription {
 
     ColumnStoreDescription?: unknown;
     ColumnTableDescription?: unknown;
+
+    TableIndex?: TIndexDescription;
 }
 
 interface TDirEntry {
@@ -80,6 +82,27 @@ interface TDirEntry {
     Version?: TPathVersion;
 }
 
+export interface TIndexDescription {
+    Name?: string;
+    /** uint64 */
+    LocalPathId?: string;
+
+    Type?: EIndexType;
+    State?: EIndexState;
+
+    KeyColumnNames?: string[];
+
+    /** uint64 */
+    SchemaVersion?: string;
+
+    /** uint64 */
+    PathOwnerId?: string;
+
+    DataColumnNames?: string[];
+    /** uint64 */
+    DataSize?: string;
+}
+
 // incomplete
 export enum EPathType {
     EPathTypeInvalid = 'EPathTypeInvalid',
@@ -112,6 +135,19 @@ enum EPathState {
     EPathStateMoving = 'EPathStateMoving',
 }
 
+enum EIndexType {
+    EIndexTypeInvalid = 'EIndexTypeInvalid',
+    EIndexTypeGlobal = 'EIndexTypeGlobal',
+    EIndexTypeGlobalAsync = 'EIndexTypeGlobalAsync',
+}
+
+enum EIndexState {
+    EIndexStateInvalid = 'EIndexStateInvalid',
+    EIndexStateReady = 'EIndexStateReady',
+    EIndexStateNotReady = 'EIndexStateNotReady',
+    EIndexStateWriteOnly = 'EIndexStateWriteOnly',
+}
+
 // incomplete
 interface TPathVersion {
     /** uint64 */

package/dist/types/api/storage.ts

@@ -0,0 +1,54 @@
+enum EFlag {
+    Grey = 'Grey',
+    Green = 'Green',
+    Yellow = 'Yellow',
+    Orange = 'Orange',
+    Red = 'Red',
+}
+
+enum TPDiskState {
+    Initial = 'Initial',
+    InitialFormatRead = 'InitialFormatRead',
+    InitialFormatReadError = 'InitialFormatReadError',
+    InitialSysLogRead = 'InitialSysLogRead',
+    InitialSysLogReadError = 'InitialSysLogReadError',
+    InitialSysLogParseError = 'InitialSysLogParseError',
+    InitialCommonLogRead = 'InitialCommonLogRead',
+    InitialCommonLogReadError = 'InitialCommonLogReadError',
+    InitialCommonLogParseError = 'InitialCommonLogParseError',
+    CommonLoggerInitError = 'CommonLoggerInitError',
+    Normal = 'Normal',
+    OpenFileError = 'OpenFileError',
+    ChunkQuotaError = 'ChunkQuotaError',
+    DeviceIoError = 'DeviceIoError',
+
+    Missing = 'Missing',
+    Timeout = 'Timeout',
+    NodeDisconnected = 'NodeDisconnected',
+    Unknown = 'Unknown',
+}
+
+export interface TPDiskStateInfo {
+    PDiskId?: number;
+    /** uint64 */
+    CreateTime?: string;
+    /** uint64 */
+    ChangeTime?: string;
+    Path?: string;
+    /** uint64 */
+    Guid?: string;
+    /** uint64 */
+    Category?: string;
+    /** uint64 */
+    AvailableSize?: string;
+    /** uint64 */
+    TotalSize?: string;
+    State?: TPDiskState;
+    NodeId?: number;
+    Count?: number;
+    Device?: EFlag;
+    Realtime?: EFlag;
+    StateFlag?: EFlag;
+    Overall?: EFlag;
+    SerialNumber?: string;
+}

package/dist/utils/getNodesColumns.js

@@ -33,6 +33,8 @@ export function getNodesColumns({showTooltip, hideTooltip, tabletsPath, getNodeR
                     <div className={b('host-name-wrapper')}>
                         <EntityStatus
                             name={row.Host}
+                            onNameMouseEnter={(e) => showTooltip(e.target, row, 'nodeEndpoints')}
+                            onNameMouseLeave={hideTooltip}
                             status={row.Overall}
                             path={getDefaultNodePath(row.NodeId)}
                             hasClipboardButton

package/dist/utils/pdisk.ts

@@ -0,0 +1,74 @@
+import type {TPDiskStateInfo} from "../types/api/storage";
+
+// TODO: move to utils or index after converting them to TS
+/**
+ * Parses a binary string containing a bit field into an object with binary values.
+ * This is an implementation based on string manipulation, since JS can only perform
+ * bitwise operations with 32-bits integers, and YDB sends uint64.
+ * @see https://en.cppreference.com/w/c/language/bit_field
+ * @param binaryString - binary string representing a bit field
+ * @param bitFieldStruct - bit field description, <field => size in bits>, in order starting from the rightmost bit
+ * @returns object with binary values
+ */
+export const parseBitField = <T extends Record<string, number>>(
+    binaryString: string,
+    bitFieldStruct: T,
+): Record<keyof T, string> => {
+    const fields: Partial<Record<keyof T, string>> = {};
+
+    Object.entries(bitFieldStruct).reduce((prefixSize, [field, size]: [keyof T, number]) => {
+        const end = binaryString.length - prefixSize;
+        const start = end - size;
+        fields[field] = binaryString.substring(start, end) || '0';
+
+        return prefixSize + size;
+    }, 0);
+
+    return fields as Record<keyof T, string>;
+};
+
+export enum IPDiskType {
+    ROT = 'ROT',
+    SSD = 'SSD',
+    MVME = 'NVME',
+}
+
+// Bear with me.
+// Disk type is determined by the field Category.
+// Category is a bit field defined as follows:
+// struct {
+//     ui64 IsSolidState : 1;
+//     ui64 Kind : 55;
+//     ui64 TypeExt : 8;
+// }
+// For compatibility TypeExt is not used for old types (ROT, SSD), so the following scheme is used:
+// ROT  -> IsSolidState# 0, TypeExt# 0
+// SSD  -> IsSolidState# 1, TypeExt# 0
+// NVME -> IsSolidState# 1, TypeExt# 2
+// Reference on bit fields: https://en.cppreference.com/w/c/language/bit_field
+export const getPDiskType = (data: TPDiskStateInfo): IPDiskType | undefined => {
+    if (!data.Category) {
+        return undefined;
+    }
+
+    // Category is uint64, too big for Number or bitwise operators, thus BigInt and a custom parser
+    const categotyBin = BigInt(data.Category).toString(2);
+    const categoryBitField = parseBitField(categotyBin, {
+        isSolidState: 1,
+        kind: 55,
+        typeExt: 8,
+    });
+
+    if (categoryBitField.isSolidState === '1') {
+        switch (parseInt(categoryBitField.typeExt, 2)) {
+            case 0:
+                return IPDiskType.SSD;
+            case 2:
+                return IPDiskType.MVME;
+        }
+    } else if (categoryBitField.typeExt === '0') {
+        return IPDiskType.ROT;
+    }
+
+    return undefined;
+};

package/dist/utils/tooltip.js

@@ -109,6 +109,32 @@ const NodeTooltip = (props) => {
     );
 };
 
+const NodeEndpointsTooltip = (props) => {
+    const {data} = props;
+    return (
+        data && (
+            <div className={nodeB()}>
+                <table>
+                    <tbody>
+                        {data.Rack && (
+                            <tr>
+                                <td className={nodeB('label')}>Rack</td>
+                                <td className={nodeB('value')}>{data.Rack}</td>
+                            </tr>
+                        )}
+                        {data.Endpoints && data.Endpoints.length && data.Endpoints.map(({Name, Address}) => (
+                            <tr key={Name}>
+                                <td className={nodeB('label')}>{Name}</td>
+                                <td className={nodeB('value')}>{Address}</td>
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>
+            </div>
+        )
+    );
+};
+
 const tabletsOverallB = cn('tabletsOverall-tooltip');
 
 const TabletsOverallTooltip = (props) => {
@@ -175,6 +201,7 @@ export const tooltipTemplates = {
     tablet: (data, additionalData) => <TabletTooltip data={data} additionalData={additionalData} />,
     // eslint-disable-next-line react/display-name
     node: (data) => <NodeTooltip data={data} />,
+    nodeEndpoints: (data) => <NodeEndpointsTooltip data={data} />,
     // eslint-disable-next-line react/display-name
     tabletsOverall: (data) => <TabletsOverallTooltip data={data} />,
     // eslint-disable-next-line react/display-name

package/dist/utils/utils.js

@@ -81,4 +81,11 @@ export function pad9(val) {
         result = "0" + result;
     }
     return result;
-}
+}
+
+export function isNumeric(value) {
+    // need both isNaN and isNaN(parseFloat):
+    // - isNaN treats true/false/''/etc. as numbers, parseFloat fixes this
+    // - parseFloat treats '123qwe' as number, isNaN fixes this
+    return !isNaN(value) && !isNaN(parseFloat(value));
+};