ydb-embedded-ui 1.8.8 → 1.10.1

package/dist/containers/Tenant/utils/schemaActions.ts

@@ -1,5 +1,5 @@
 import {Dispatch} from 'react';
-import type {NavigationTreeNodeType} from 'ydb-ui-components';
+import type {NavigationTreeNodeType, NavigationTreeProps} from 'ydb-ui-components';
 
 import {changeUserInput} from '../../../store/reducers/executeQuery';
 import {setShowPreview} from '../../../store/reducers/schema';
@@ -73,6 +73,8 @@ const bindActions = (
     };
 };
 
+type ActionsSet = ReturnType<Required<NavigationTreeProps>['getActions']>;
+
 export const getActions = (
     dispatch: Dispatch<any>,
     setActivePath: (path: string) => void,
@@ -81,35 +83,46 @@ export const getActions = (
         const actions = bindActions(path, dispatch, setActivePath);
         const copyItem = {text: 'Copy path', action: actions.copyPath};
 
-        switch (type) {
-            case 'database':
-            case 'directory':
-                return [
-                    [
-                        copyItem,
-                    ],
-                    [
-                        {text: 'Create table...', action: actions.createTable},
-                    ],
-                ];
-            case 'table':
-                return [
-                    [
-                        {text: 'Open preview', action: actions.openPreview},
-                        copyItem,
-                    ],
-                    [
-                        {text: 'Alter table...', action: actions.alterTable},
-                        {text: 'Select query...', action: actions.selectQuery},
-                        {text: 'Upsert query...', action: actions.upsertQuery},
-                    ],
-                ];
-            case 'index_table':
-                return [
-                    copyItem,
-                ];
-            case 'index':
-            default:
-                return [];
-        }
+        const DIR_SET: ActionsSet = [
+            [
+                copyItem,
+            ],
+            [
+                {text: 'Create table...', action: actions.createTable},
+            ],
+        ];
+        const TABLE_SET: ActionsSet = [
+            [
+                {text: 'Open preview', action: actions.openPreview},
+                copyItem,
+            ],
+            [
+                {text: 'Alter table...', action: actions.alterTable},
+                {text: 'Select query...', action: actions.selectQuery},
+                {text: 'Upsert query...', action: actions.upsertQuery},
+            ],
+        ];
+
+        const JUST_COPY: ActionsSet = [
+            copyItem,
+        ];
+
+        const EMPTY_SET: ActionsSet = [];
+
+        // verbose mapping to guarantee a correct actions set for new node types
+        // TS will error when a new type is added in the lib but is not mapped here
+        const nodeTypeToActions: Record<NavigationTreeNodeType, ActionsSet> = {
+            database: DIR_SET,
+            directory: DIR_SET,
+
+            table: TABLE_SET,
+            column_table: TABLE_SET,
+
+            index_table: JUST_COPY,
+            topic: JUST_COPY,
+
+            index: EMPTY_SET,
+        };
+
+        return nodeTypeToActions[type];
     };

package/dist/services/api.js

@@ -147,14 +147,19 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
             state: 0,
         });
     }
-    sendQuery(query, database, action, stats) {
-        return this.post(this.getPath('/viewer/json/query'), {
-            query,
-            database,
-            action,
-            stats,
-            timeout: 600000,
-        });
+    sendQuery({query, database, action, stats}, {concurrentId} = {}) {
+        return this.post(
+            this.getPath('/viewer/json/query'),
+            {
+                query,
+                database,
+                action,
+                stats,
+                timeout: 600000,
+            },
+            null,
+            {concurrentId},
+        );
     }
     getExplainQuery(query, database) {
         return this.post(this.getPath('/viewer/json/query'), {

package/dist/store/reducers/executeQuery.js

@@ -141,7 +141,7 @@ const executeQuery = (state = initialState, action) => {
 
 export const sendQuery = ({query, database, action}) => {
     return createApiRequest({
-        request: window.api.sendQuery(query, database, action, 'profile'),
+        request: window.api.sendQuery({query, database, action, stats: 'profile'}),
         actions: SEND_QUERY,
         dataHandler: (result) => {
             const resultData = result.result ?? result;

package/dist/store/reducers/executeTopQueries.js

@@ -47,7 +47,7 @@ const executeTopQueries = (state = initialState, action) => {
 
 export const sendQuery = ({query, database, action}) => {
     return createApiRequest({
-        request: window.api.sendQuery(query, database, action),
+        request: window.api.sendQuery({query, database, action}),
         actions: SEND_QUERY,
         dataHandler: (result) => {
             if (result && typeof result === 'string') {

package/dist/store/reducers/olapStats.js

@@ -52,7 +52,11 @@ const olapStats = (state = initialState, action) => {
 
 export const getOlapStats = ({path = ''}) => {
     return createApiRequest({
-        request: window.api.sendQuery(createOlatStatsQuery(path), path, queryAction),
+        request: window.api.sendQuery({
+            query: createOlatStatsQuery(path),
+            database: path,
+            action: queryAction,
+        }),
         actions: FETCH_OLAP_STATS,
         dataHandler: (result) => {
             if (result && typeof result === 'string') {

package/dist/store/reducers/preview.js

@@ -47,7 +47,7 @@ const preview = (state = initialState, action) => {
 
 export const sendQuery = ({query, database, action}) => {
     return createApiRequest({
-        request: window.api.sendQuery(query, database, action),
+        request: window.api.sendQuery({query, database, action}),
         actions: SEND_QUERY,
         dataHandler: (data) => {
             if (!Array.isArray(data)) {

package/dist/store/reducers/shardsWorkload.js

@@ -9,8 +9,30 @@ const initialState = {
     wasLoaded: false,
 };
 
-function createShardQuery(path) {
-    return `SELECT Path, TabletId, CPUCores FROM \`.sys/partition_stats\` WHERE Path='${path}' OR Path LIKE '${path}/%' ORDER BY CPUCores DESC LIMIT 20`;
+function formatSortOrder({columnId, order}) {
+    return `${columnId} ${order}`;
+}
+
+function createShardQuery(path, sortOrder, tenantName) {
+    const orderBy = Array.isArray(sortOrder) ?
+        `ORDER BY ${sortOrder.map(formatSortOrder).join(', ')}` :
+        '';
+
+    const pathSelect = tenantName ?
+        `CAST(SUBSTRING(CAST(Path AS String), ${tenantName.length}) AS Utf8) AS Path` :
+        'Path';
+
+    return `SELECT
+    ${pathSelect},
+    TabletId,
+    CPUCores,
+    DataSize
+FROM \`.sys/partition_stats\`
+WHERE
+    Path='${path}'
+    OR Path LIKE '${path}/%'
+${orderBy}
+LIMIT 20`;
 }
 
 const queryAction = 'execute-scan';
@@ -51,9 +73,15 @@ const shardsWorkload = (state = initialState, action) => {
     }
 };
 
-export const sendShardQuery = ({database, path = ''}) => {
+export const sendShardQuery = ({database, path = '', sortOrder}) => {
     return createApiRequest({
-        request: window.api.sendQuery(createShardQuery(path), database, queryAction),
+        request: window.api.sendQuery({
+            query: createShardQuery(path, sortOrder, database),
+            database,
+            action: queryAction,
+        }, {
+            concurrentId: 'topShards',
+        }),
         actions: SEND_SHARD_QUERY,
         dataHandler: (result) => {
             if (result && typeof result === 'string') {

package/dist/types/api/schema.ts

@@ -54,6 +54,8 @@ interface TPathDescription {
 
     ColumnStoreDescription?: unknown;
     ColumnTableDescription?: unknown;
+
+    TableIndex?: TIndexDescription;
 }
 
 interface TDirEntry {
@@ -80,15 +82,42 @@ 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',
     EPathTypeDir = 'EPathTypeDir',
     EPathTypeTable = 'EPathTypeTable',
+
     EPathTypeSubDomain = 'EPathTypeSubDomain',
+
+    EPathTypeTableIndex = 'EPathTypeTableIndex', 
+    EPathTypeExtSubDomain = 'EPathTypeExtSubDomain',
+
     EPathTypeColumnStore = 'EPathTypeColumnStore',
     EPathTypeColumnTable = 'EPathTypeColumnTable',
-    EPathTypeTableIndex = 'EPathTypeTableIndex', 
+    EPathTypeCdcStream = 'EPathTypeCdcStream',
+
 }
 
 export enum EPathSubType {
@@ -112,6 +141,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',
+}
+
+export 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "1.8.8",
+  "version": "1.10.1",
   "files": [
     "dist"
   ],
@@ -40,7 +40,7 @@
     "reselect": "4.0.0",
     "sass": "1.32.8",
     "web-vitals": "1.1.2",
-    "ydb-ui-components": "2.3.0"
+    "ydb-ui-components": "2.4.1"
   },
   "scripts": {
     "start": "react-app-rewired start",