ydb-embedded-ui 4.33.0 → 5.1.0

package/dist/utils/hooks/useStorageRequestParams.js

@@ -0,0 +1,20 @@
+import { useMemo } from 'react';
+import { EVersion } from '../../types/api/storage';
+import { USE_BACKEND_PARAMS_FOR_TABLES_KEY } from '../constants';
+import { useSetting } from './useSetting';
+export const useStorageRequestParams = ({ filter, sortOrder, sortValue, }) => {
+    const [useBackendParamsForTables] = useSetting(USE_BACKEND_PARAMS_FOR_TABLES_KEY);
+    // If backend params are enabled, update params value to use them in fetch request
+    // Otherwise no params will be updated, no hooks that depend on requestParams will be triggered
+    return useMemo(() => {
+        if (useBackendParamsForTables) {
+            return {
+                version: EVersion.v2,
+                filter,
+                sortOrder,
+                sortValue,
+            };
+        }
+        return undefined;
+    }, [useBackendParamsForTables, filter, sortOrder, sortValue]);
+};

package/dist/utils/hooks/useTableResize.d.ts

@@ -0,0 +1,7 @@
+import type { Column as DataTableColumn } from '@gravity-ui/react-data-table';
+import type { Column as VirtualTableColumn } from '../../components/VirtualTable';
+export declare type Column<T> = VirtualTableColumn<T> & DataTableColumn<T>;
+export declare type TableColumnsWidthSetup = Record<string, number>;
+export declare type HandleTableColumnsResize = (newSetup: TableColumnsWidthSetup) => void;
+export declare const updateColumnsWidth: <T>(columns: Column<T>[], columnsWidthSetup: TableColumnsWidthSetup) => Column<T>[];
+export declare const useTableResize: (localStorageKey: string) => [TableColumnsWidthSetup, HandleTableColumnsResize];

package/dist/utils/hooks/useTableResize.js

@@ -0,0 +1,27 @@
+import { useCallback, useState } from 'react';
+import { settingsManager } from '../../services/settings';
+export const updateColumnsWidth = (columns, columnsWidthSetup) => {
+    return columns.map((column) => {
+        var _a;
+        if (!column.resizeable) {
+            return column;
+        }
+        return Object.assign(Object.assign({}, column), { width: (_a = columnsWidthSetup[column.name]) !== null && _a !== void 0 ? _a : column.width });
+    });
+};
+export const useTableResize = (localStorageKey) => {
+    const [tableColumnsWidthSetup, setTableColumnsWidth] = useState(() => {
+        const setupFromLS = settingsManager.readUserSettingsValue(localStorageKey, {});
+        return setupFromLS;
+    });
+    const handleSetupChange = useCallback((newSetup) => {
+        setTableColumnsWidth((previousSetup) => {
+            // ResizeObserver callback may be triggered only for currently resized column
+            // or for the whole set of columns
+            const setup = Object.assign(Object.assign({}, previousSetup), newSetup);
+            settingsManager.setUserSettingsValue(localStorageKey, setup);
+            return setup;
+        });
+    }, [localStorageKey]);
+    return [tableColumnsWidthSetup, handleSetupChange];
+};

package/dist/utils/hooks/useTableSort.d.ts

@@ -0,0 +1,8 @@
+import { OrderType, SortOrder } from '@gravity-ui/react-data-table';
+interface SortParams {
+    sortValue: string | undefined;
+    sortOrder: OrderType | undefined;
+}
+export declare type HandleSort = (rawValue: SortOrder | SortOrder[] | undefined) => void;
+export declare const useTableSort: ({ sortValue, sortOrder }: SortParams, onSort: (params: SortParams) => void) => [SortOrder | undefined, HandleSort];
+export {};

package/dist/utils/hooks/useTableSort.js

@@ -0,0 +1,21 @@
+import { useMemo } from 'react';
+import { DESCENDING } from '@gravity-ui/react-data-table/build/esm/lib/constants';
+export const useTableSort = ({ sortValue, sortOrder = DESCENDING }, onSort) => {
+    const sort = useMemo(() => {
+        if (!sortValue) {
+            return undefined;
+        }
+        return {
+            columnId: sortValue,
+            order: sortOrder,
+        };
+    }, [sortValue, sortOrder]);
+    const handleSort = (rawValue) => {
+        const value = Array.isArray(rawValue) ? rawValue[0] : rawValue;
+        onSort({
+            sortValue: value === null || value === void 0 ? void 0 : value.columnId,
+            sortOrder: value === null || value === void 0 ? void 0 : value.order,
+        });
+    };
+    return [sort, handleSort];
+};

package/dist/utils/hooks/useTypedSelector.d.ts

@@ -0,0 +1,3 @@
+import { TypedUseSelectorHook } from 'react-redux';
+import { RootState } from '../../store';
+export declare const useTypedSelector: TypedUseSelectorHook<RootState>;

package/dist/utils/hooks/useTypedSelector.js

@@ -0,0 +1,2 @@
+import { useSelector } from 'react-redux';
+export const useTypedSelector = useSelector;

package/dist/utils/i18n/i18n.d.ts

@@ -0,0 +1,10 @@
+import { I18N, KeysData } from '@gravity-ui/i18n';
+declare enum Lang {
+    En = "en",
+    Ru = "ru"
+}
+declare const defaultLang = Lang.En;
+declare const currentLang: Lang;
+declare const i18n: I18N;
+export declare function registerKeysets<Keyset extends KeysData>(id: string, data: Record<string, Keyset>): (key: Extract<keyof Keyset, string>, params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export { i18n, Lang, currentLang, defaultLang };

package/dist/utils/i18n/i18n.js

@@ -0,0 +1,30 @@
+import { I18N } from '@gravity-ui/i18n';
+import { configure as configureUiKit } from '@gravity-ui/uikit';
+import { configure as configureUiKitComponents } from '@gravity-ui/components';
+import { configure as configureUiKitNavigation } from '@gravity-ui/navigation';
+import { configure as configureYdbUiComponents } from 'ydb-ui-components';
+import { LANGUAGE_KEY } from '../constants';
+import { settingsManager } from '../../services/settings';
+var Lang;
+(function (Lang) {
+    Lang["En"] = "en";
+    Lang["Ru"] = "ru";
+})(Lang || (Lang = {}));
+const defaultLang = Lang.En;
+const currentLang = settingsManager.readUserSettingsValue(LANGUAGE_KEY, defaultLang);
+const i18n = new I18N({
+    lang: currentLang,
+    // Enable keysets with only en lang
+    fallbackLang: Lang.En,
+});
+configureYdbUiComponents({ lang: currentLang });
+configureUiKit({ lang: currentLang });
+configureUiKitComponents({ lang: currentLang });
+configureUiKitNavigation({ lang: currentLang });
+export function registerKeysets(id, data) {
+    for (const lang of Object.keys(data)) {
+        i18n.registerKeyset(lang, id, data[lang]);
+    }
+    return i18n.keyset(id);
+}
+export { i18n, Lang, currentLang, defaultLang };

package/dist/utils/i18n/index.js

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

package/dist/utils/index.d.ts

@@ -0,0 +1 @@
+export declare const getArray: (arrayLength: number) => number[];

package/dist/utils/index.js

@@ -0,0 +1,3 @@
+export const getArray = (arrayLength) => {
+    return [...Array(arrayLength).keys()];
+};

package/dist/utils/monaco.d.ts

@@ -0,0 +1,2 @@
+export declare const LANGUAGE_S_EXPRESSION_ID = "s-expression";
+export declare function registerLanguages(): void;

package/dist/utils/monaco.js

@@ -0,0 +1,62 @@
+import * as monaco from 'monaco-editor';
+export const LANGUAGE_S_EXPRESSION_ID = 's-expression';
+function registerSExpressionLanguage() {
+    monaco.languages.register({ id: LANGUAGE_S_EXPRESSION_ID });
+    monaco.languages.setMonarchTokensProvider(LANGUAGE_S_EXPRESSION_ID, {
+        defaultToken: 'text',
+        ignoreCase: true,
+        tokenPostfix: '.yql',
+        brackets: [
+            { open: '[', close: ']', token: 'delimiter.square' },
+            { open: '(', close: ')', token: 'delimiter.parenthesis' },
+            { open: '{', close: '}', token: 'delimiter.curly' },
+        ],
+        keywordControl: 'bind|block|declare|export|import|lambda|let|quote|return'.split('|'),
+        escapes: /\\(?:[abfnrtv\\"']|x[0-9A-Fa-f]{1,4}|u[0-9A-Fa-f]{4}|U[0-9A-Fa-f]{8})/,
+        tokenizer: {
+            root: [
+                { include: '@whitespace' },
+                { include: '@comment' },
+                [/(#)((?:\w|[\\+-=<>'"&#])+)/, ['delimiter', 'constant']],
+                [
+                    /(?:\b(?:(defun|defmethod|defmacro))\b)(\s+)((?:\w|-|\?)*)/,
+                    ['type.function', 'text', 'entity.name'],
+                ],
+                [/(\*)(\S*)(\*)/, ['delimiter', 'variable', 'delimiter']],
+                { include: '@strings' },
+                [/'[^#\s)(]+/, 'variable.parameter'],
+                [/[(){}[\]]/, '@brackets'],
+                // identifiers and keywords
+                [
+                    /(?:(?:<=?|>=?|==|!=|[-+*/%])|[a-zA-Z][a-zA-Z0-9!]*)/,
+                    {
+                        cases: {
+                            '@keywordControl': { token: 'keyword.operator' },
+                            '@default': 'identifier',
+                        },
+                    },
+                ],
+            ],
+            whitespace: [[/\s+/, 'white']],
+            comment: [[/#.*/, 'comment']],
+            strings: [
+                [/'?"(?=.)/, { token: 'string', next: '@qqstring' }],
+                [/'?[@]{2}/, { token: 'string', next: '@multiline' }],
+                [/'?x"(?:[0-9A-Fa-f]{2})*"/, 'string'],
+            ],
+            qqstring: [
+                [/\\(?:[0-3][0-7][0-7]|x[0-9A-Fa-f]{2}|["tnrbfav\\])/, 'string.escape'],
+                [/[^"\\]+/, 'string'],
+                [/"|$/, { token: 'string', next: '@pop' }],
+            ],
+            multiline: [
+                [/[^@]+/, 'string'],
+                [/[@]{2}/, { token: 'string', next: '@pop' }],
+                [/./, { token: 'string' }],
+            ],
+        },
+    });
+}
+export function registerLanguages() {
+    registerSExpressionLanguage();
+}

package/dist/utils/monitoring.d.ts

@@ -0,0 +1,19 @@
+export declare type ParsedMonitoringData = {
+    monitoring_url: string;
+    serverless_dashboard: string;
+    dedicated_dashboard: string;
+    host?: string;
+    slot?: string;
+    cluster_name?: string;
+};
+export interface GetMonitoringLinkProps {
+    monitoring: string;
+    dbName: string;
+    dbType: string;
+    clusterName?: string;
+}
+export declare type GetMonitoringLink = typeof getMonitoringLink;
+export declare function getMonitoringLink({ monitoring, dbName, dbType, clusterName, }: GetMonitoringLinkProps): string;
+export declare type GetMonitoringClusterLink = typeof getMonitoringClusterLink;
+export declare function getMonitoringClusterLink(monitoring: string): string;
+export declare function parseMonitoringData(monitoring: string): ParsedMonitoringData | undefined;

package/dist/utils/monitoring.js

@@ -0,0 +1,43 @@
+import { ETenantType } from '../types/api/tenant';
+const isMonitoring = (link) => {
+    return link.startsWith('https://monitoring');
+};
+export function getMonitoringLink({ monitoring, dbName, dbType, clusterName, }) {
+    var _a, _b;
+    const data = parseMonitoringData(monitoring);
+    let href = '';
+    if (data) {
+        const monitoringUrl = data.monitoring_url;
+        const dashboard = dbType === ETenantType.Serverless
+            ? data.serverless_dashboard
+            : data.dedicated_dashboard;
+        const host = (_a = data.host) !== null && _a !== void 0 ? _a : 'cluster';
+        const slot = (_b = data.slot) !== null && _b !== void 0 ? _b : 'static';
+        const finalClusterName = data.cluster_name || clusterName || '';
+        if (isMonitoring(monitoringUrl)) {
+            href = `${monitoringUrl}/${dashboard}?p.cluster=${finalClusterName}&p.host=${host}&p.slot=${slot}&p.database=${dbName}`;
+        }
+        else {
+            href = `${monitoringUrl}&host=${host}&slot=${slot}&database=${dbName}&dashboard=${dashboard}`;
+        }
+        href = encodeURI(href);
+    }
+    return href;
+}
+export function getMonitoringClusterLink(monitoring) {
+    const data = parseMonitoringData(monitoring);
+    if (data) {
+        return data.monitoring_url;
+    }
+    return '';
+}
+export function parseMonitoringData(monitoring) {
+    try {
+        const data = JSON.parse(monitoring);
+        if (typeof data === 'object' && 'monitoring_url' in data) {
+            return data;
+        }
+    }
+    catch (_a) { }
+    return undefined;
+}

package/dist/utils/nodes.d.ts

@@ -0,0 +1,38 @@
+import type { TSystemStateInfo } from '../types/api/nodes';
+import type { TNodeInfo } from '../types/api/nodesList';
+import type { NodesPreparedEntity } from '../store/reducers/nodes/types';
+import type { NodesMap } from '../types/store/nodesList';
+import type { ValueOf } from '../types/common';
+import type { ProblemFilterValue } from '../store/reducers/settings/types';
+export declare enum NodesUptimeFilterValues {
+    'All' = "All",
+    'SmallUptime' = "SmallUptime"
+}
+export declare const NodesUptimeFilterTitles: {
+    All: string;
+    SmallUptime: string;
+};
+export declare const isUnavailableNode: (node: NodesPreparedEntity | TSystemStateInfo) => boolean;
+export declare const prepareNodesMap: (nodesList?: TNodeInfo[] | undefined) => NodesMap | undefined;
+export declare const getProblemParamValue: (problemFilter: ProblemFilterValue | undefined) => boolean;
+export declare const getUptimeParamValue: (nodesUptimeFilter: NodesUptimeFilterValues | undefined) => number | undefined;
+/**
+ * Values to sort /compute v2 and /nodes responses
+ *
+ * For actual values go to:\
+ * /nodes: https://github.com/ydb-platform/ydb/blob/main/ydb/core/viewer/json_nodes.h\
+ * /compute: https://github.com/ydb-platform/ydb/blob/main/ydb/core/viewer/json_compute.h
+ */
+export declare const NODES_SORT_VALUES: {
+    readonly NodeId: "NodeId";
+    readonly Host: "Host";
+    readonly DC: "DC";
+    readonly Rack: "Rack";
+    readonly Version: "Version";
+    readonly Uptime: "Uptime";
+    readonly Memory: "Memory";
+    readonly CPU: "CPU";
+    readonly LoadAverage: "LoadAverage";
+};
+export declare type NodesSortValue = ValueOf<typeof NODES_SORT_VALUES>;
+export declare const isSortableNodesProperty: (value: string) => value is NodesSortValue;

package/dist/utils/nodes.js

@@ -0,0 +1,46 @@
+import { ProblemFilterValues } from '../store/reducers/settings/settings';
+import { EFlag } from '../types/api/enums';
+import { HOUR_IN_SECONDS } from './constants';
+export var NodesUptimeFilterValues;
+(function (NodesUptimeFilterValues) {
+    NodesUptimeFilterValues["All"] = "All";
+    NodesUptimeFilterValues["SmallUptime"] = "SmallUptime";
+})(NodesUptimeFilterValues || (NodesUptimeFilterValues = {}));
+export const NodesUptimeFilterTitles = {
+    [NodesUptimeFilterValues.All]: 'All',
+    [NodesUptimeFilterValues.SmallUptime]: 'Uptime < 1h',
+};
+export const isUnavailableNode = (node) => !node.SystemState || node.SystemState === EFlag.Grey;
+export const prepareNodesMap = (nodesList) => {
+    return nodesList === null || nodesList === void 0 ? void 0 : nodesList.reduce((nodesMap, node) => {
+        if (node.Id && node.Host) {
+            nodesMap.set(Number(node.Id), node.Host);
+        }
+        return nodesMap;
+    }, new Map());
+};
+export const getProblemParamValue = (problemFilter) => {
+    return problemFilter === ProblemFilterValues.PROBLEMS;
+};
+export const getUptimeParamValue = (nodesUptimeFilter) => {
+    return nodesUptimeFilter === NodesUptimeFilterValues.SmallUptime ? HOUR_IN_SECONDS : undefined;
+};
+/**
+ * Values to sort /compute v2 and /nodes responses
+ *
+ * For actual values go to:\
+ * /nodes: https://github.com/ydb-platform/ydb/blob/main/ydb/core/viewer/json_nodes.h\
+ * /compute: https://github.com/ydb-platform/ydb/blob/main/ydb/core/viewer/json_compute.h
+ */
+export const NODES_SORT_VALUES = {
+    NodeId: 'NodeId',
+    Host: 'Host',
+    DC: 'DC',
+    Rack: 'Rack',
+    Version: 'Version',
+    Uptime: 'Uptime',
+    Memory: 'Memory',
+    CPU: 'CPU',
+    LoadAverage: 'LoadAverage',
+};
+export const isSortableNodesProperty = (value) => Object.values(NODES_SORT_VALUES).includes(value);

package/dist/utils/numeral.d.ts

@@ -0,0 +1,3 @@
+import numeral from 'numeral';
+import 'numeral/locales';
+export declare const configuredNumeral: typeof numeral;

package/dist/utils/numeral.js

@@ -0,0 +1,5 @@
+import numeral from 'numeral';
+import 'numeral/locales'; // Without this numeral will throw an error when using not 'en' locale
+import { i18n } from './i18n';
+numeral.locale(i18n.lang);
+export const configuredNumeral = numeral;

package/dist/utils/parseBalancer.d.ts

@@ -0,0 +1,16 @@
+export declare const removeViewerPathname: (value: string) => string;
+export declare const removeProtocol: (value: string) => string;
+export declare const removePort: (value: string) => string;
+interface ParsedBalancer {
+    balancer: string;
+    proxy: string | undefined;
+}
+/**
+ * Parse balancer with proxy. Initial format https://proxy/balancer/viewer/json
+ *
+ * Full current balancers list could be viewed in YDB Meta cluster\
+ * /Root/ydb/MasterClusterExt.db
+ */
+export declare const parseBalancer: (rawBalancer: string) => ParsedBalancer;
+export declare const getCleanBalancerValue: (rawBalancer: string) => string;
+export {};

package/dist/utils/parseBalancer.js

@@ -0,0 +1,37 @@
+export const removeViewerPathname = (value) => {
+    return value.replace(/\/viewer\/json/, '');
+};
+export const removeProtocol = (value) => {
+    return value.replace(/http[s]?:\/\//, '');
+};
+export const removePort = (value) => {
+    return value.replace(/:\d+$/, '');
+};
+/**
+ * Parse balancer with proxy. Initial format https://proxy/balancer/viewer/json
+ *
+ * Full current balancers list could be viewed in YDB Meta cluster\
+ * /Root/ydb/MasterClusterExt.db
+ */
+export const parseBalancer = (rawBalancer) => {
+    // Delete protocol and viewer/json path from raw value
+    const value = removeViewerPathname(removeProtocol(rawBalancer));
+    // After split the first element is considered a proxy, other - balancer value
+    const parts = value.split('/');
+    // If there is only one element, balancer is without proxy
+    if (parts.length === 1) {
+        return {
+            balancer: parts[0],
+            proxy: undefined,
+        };
+    }
+    const proxy = parts[0];
+    const balancer = value.replace(proxy + '/', '');
+    return {
+        balancer,
+        proxy,
+    };
+};
+export const getCleanBalancerValue = (rawBalancer) => {
+    return removePort(parseBalancer(rawBalancer).balancer);
+};

package/dist/utils/pdisk.d.ts

@@ -0,0 +1,17 @@
+import type { TPDiskStateInfo } from '../types/api/pdisk';
+/**
+ * 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 declare const parseBitField: <T extends Record<string, number>>(binaryString: string, bitFieldStruct: T) => Record<keyof T, string>;
+export declare enum IPDiskType {
+    HDD = "HDD",
+    SSD = "SSD",
+    MVME = "NVME"
+}
+export declare const getPDiskType: (data: TPDiskStateInfo) => IPDiskType | undefined;

package/dist/utils/pdisk.js

@@ -0,0 +1,63 @@
+// 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 = (binaryString, bitFieldStruct) => {
+    const fields = {};
+    Object.entries(bitFieldStruct).reduce((prefixSize, [field, size]) => {
+        const end = binaryString.length - prefixSize;
+        const start = end - size;
+        fields[field] = binaryString.substring(start, end) || '0';
+        return prefixSize + size;
+    }, 0);
+    return fields;
+};
+export var IPDiskType;
+(function (IPDiskType) {
+    IPDiskType["HDD"] = "HDD";
+    IPDiskType["SSD"] = "SSD";
+    IPDiskType["MVME"] = "NVME";
+})(IPDiskType || (IPDiskType = {}));
+// 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) => {
+    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.HDD;
+    }
+    return undefined;
+};

package/dist/utils/prepareBackend.d.ts

@@ -0,0 +1,4 @@
+import type { NodeAddress } from '../types/additionalProps';
+export declare const prepareHost: (host?: string | undefined) => string | undefined;
+export declare const getBackendFromNodeHost: (nodeHost: string, balancer: string) => string;
+export declare const getBackendFromRawNodeData: (node: NodeAddress, balancer: string, useBalancerAsBackend?: boolean | undefined) => string | null;

package/dist/utils/prepareBackend.js

@@ -0,0 +1,33 @@
+import { parseBalancer, removeViewerPathname } from './parseBalancer';
+const https = 'https://';
+export const prepareHost = (host) => {
+    // add "u-" prefix to cloud din nodes
+    return (host === null || host === void 0 ? void 0 : host.startsWith('vm-')) ? `u-${host}` : host;
+};
+export const getBackendFromNodeHost = (nodeHost, balancer) => {
+    const preparedHost = prepareHost(nodeHost);
+    const proxy = parseBalancer(balancer).proxy;
+    if (proxy) {
+        return https + proxy + '/' + preparedHost;
+    }
+    return https + preparedHost;
+};
+export const getBackendFromRawNodeData = (node, balancer, useBalancerAsBackend) => {
+    var _a;
+    const { Host, Endpoints, NodeId } = node;
+    if (useBalancerAsBackend && NodeId) {
+        const preparedBalancer = removeViewerPathname(balancer);
+        return `${preparedBalancer}/node/${NodeId}/`;
+    }
+    if (Host && Endpoints) {
+        const nodePort = (_a = Endpoints.find((endpoint) => endpoint.Name === 'http-mon')) === null || _a === void 0 ? void 0 : _a.Address;
+        if (!nodePort || !Host) {
+            return null;
+        }
+        const hostWithPort = Host + nodePort;
+        // Currently this func is used to get link to developerUI for specific node
+        // It's expected with / at the end (code in embedded version)
+        return getBackendFromNodeHost(hostWithPort, balancer) + '/';
+    }
+    return null;
+};

package/dist/utils/prepareQueryExplain.d.ts

@@ -0,0 +1,6 @@
+import type { Link, GraphNode, ExplainPlanNodeData } from '@gravity-ui/paranoid';
+import type { PlanNode } from '../types/api/query';
+export declare function preparePlan(plan: PlanNode): {
+    nodes: GraphNode<ExplainPlanNodeData>[];
+    links: Link[];
+};

package/dist/utils/prepareQueryExplain.js

@@ -0,0 +1,88 @@
+const CONNECTION_NODE_META_FIELDS = new Set(['PlanNodeId', 'PlanNodeType', 'Node Type', 'Plans']);
+function prepareStats(plan) {
+    const stats = [];
+    if (plan.Operators) {
+        const operatorsSections = [];
+        for (const operator of plan.Operators) {
+            const section = { name: operator.Name, items: [] };
+            for (const [name, data] of Object.entries(operator)) {
+                if (name === 'Name') {
+                    continue;
+                }
+                const value = Array.isArray(data) ? data.join(', ') : data;
+                section.items.push({ name, value });
+            }
+            operatorsSections.push(section);
+        }
+        stats.push({
+            group: 'Operators',
+            stats: operatorsSections,
+        });
+    }
+    if (plan.PlanNodeType === 'Connection') {
+        const attrStats = [];
+        for (const [key, value] of Object.entries(plan)) {
+            if (CONNECTION_NODE_META_FIELDS.has(key)) {
+                continue;
+            }
+            attrStats.push({ name: key, value: String(value) });
+        }
+        if (attrStats.length > 0) {
+            stats.push({
+                group: 'Attributes',
+                stats: attrStats,
+            });
+        }
+    }
+    return stats;
+}
+function getNodeType(plan) {
+    switch (plan.PlanNodeType) {
+        case 'Connection':
+            return 'connection';
+        case 'ResultSet':
+            return 'result';
+        case 'Query':
+            return 'query';
+        default:
+            return 'stage';
+    }
+}
+export function preparePlan(plan) {
+    const nodes = [];
+    const links = [];
+    function parsePlans(plans = [], from) {
+        plans.forEach((p) => {
+            var _a;
+            const node = {
+                name: String(p.PlanNodeId),
+                data: {
+                    id: p.PlanNodeId,
+                    type: getNodeType(p),
+                    name: p['Node Type'],
+                    operators: (_a = p.Operators) === null || _a === void 0 ? void 0 : _a.map((o) => o.Name),
+                    stats: prepareStats(p),
+                    tables: p.Tables,
+                },
+            };
+            nodes.push(node);
+            links.push({ from, to: node.name });
+            parsePlans(p.Plans, node.name);
+        });
+    }
+    const rootPlan = plan;
+    const rootNode = {
+        name: String(rootPlan.PlanNodeId),
+        data: {
+            id: rootPlan.PlanNodeId,
+            type: getNodeType(rootPlan),
+            name: rootPlan['Node Type'],
+        },
+    };
+    nodes.push(rootNode);
+    parsePlans(rootPlan.Plans, rootNode.name);
+    return {
+        nodes,
+        links,
+    };
+}