ydb-embedded-ui 20.4.0 → 21.0.0

package/src/components/Graph/treeLayout.ts

@@ -0,0 +1,378 @@
+import type {TBlock} from '@gravity-ui/graph';
+
+import type {
+    EdgeResult,
+    ExtendedTBlock,
+    LayoutOptions,
+    TreeConnection,
+    TreeLayoutRequest,
+    TreeLayoutResult,
+    TreeNode,
+} from './types';
+import {prepareBlocks, prepareConnections} from './utils';
+
+class TreeLayoutEngine {
+    private blocks: Map<string, any>;
+    private connections: TreeConnection[];
+    private options: Required<LayoutOptions>;
+    private tree: TreeNode | null;
+    private levels: TreeNode[][];
+
+    constructor(blocks: any[], connections: TreeConnection[], options: LayoutOptions = {}) {
+        this.blocks = new Map(blocks.map((block: any) => [block.id, {...block}]));
+        this.connections = connections;
+
+        // Layout settings
+        this.options = {
+            horizontalSpacing: options.horizontalSpacing || 40, // horizontal distance between blocks
+            padding: 12,
+            verticalSpacing: options.verticalSpacing || 20, // vertical distance between levels
+            ...options,
+        };
+
+        this.tree = null;
+        this.levels = [];
+    }
+
+    // Building a tree structure
+    buildTree() {
+        const childrenMap = new Map();
+        const parentMap = new Map();
+
+        for (const block of this.blocks.values()) {
+            childrenMap.set(block.id, []);
+        }
+
+        // Setting connections
+        for (const connection of this.connections) {
+            const parent = connection.sourceBlockId;
+            const child = connection.targetBlockId;
+
+            childrenMap.get(parent).push(child);
+            parentMap.set(child, parent);
+        }
+
+        // Find root (a node without a parent)
+        const rootId = Array.from(this.blocks.keys()).find((id) => !parentMap.has(id));
+
+        if (!rootId) {
+            throw new Error('Root node not found');
+        }
+
+        // Recursively building a tree
+        const buildNode = (nodeId: string, level = 0): TreeNode => {
+            const block = this.blocks.get(nodeId);
+            const children = childrenMap
+                .get(nodeId)
+                .map((childId: string) => buildNode(childId, level + 1));
+
+            return {
+                id: nodeId,
+                block: block,
+                children: children,
+                level: level,
+                x: 0,
+                y: 0,
+                subtreeWidth: 0,
+            };
+        };
+
+        this.tree = buildNode(rootId);
+        return this.tree;
+    }
+
+    // Grouping nodes by levels
+    groupByLevels(node: TreeNode | null = this.tree, levels: TreeNode[][] = []): TreeNode[][] {
+        if (!node) {
+            return levels;
+        }
+
+        if (!levels[node.level]) {
+            levels[node.level] = [];
+        }
+        levels[node.level].push(node);
+
+        for (const child of node.children) {
+            this.groupByLevels(child, levels);
+        }
+
+        this.levels = levels;
+        return levels;
+    }
+
+    // Calculating the width of the subtree for each node
+    calculateSubtreeWidths(node: TreeNode = this.tree!): number {
+        if (node.children.length === 0) {
+            // Leaf node - width is equal to the width of the block
+            node.subtreeWidth = node.block.width;
+        } else {
+            // Recursively calculating the width for children
+            for (const child of node.children) {
+                this.calculateSubtreeWidths(child);
+            }
+
+            // Subtree width = sum of the widths of the children's subtrees + the margins between them
+            const childrenWidth = node.children.reduce(
+                (sum: number, child: TreeNode) => sum + child.subtreeWidth,
+                0,
+            );
+            const spacingWidth = (node.children.length - 1) * this.options.horizontalSpacing;
+            const totalChildrenWidth = childrenWidth + spacingWidth;
+
+            // Subtree width = the maximum of the width of the node itself and the total width of the children
+            node.subtreeWidth = Math.max(node.block.width, totalChildrenWidth);
+        }
+
+        return node.subtreeWidth;
+    }
+
+    // Placement of nodes by position
+    positionNodes() {
+        if (!this.tree) {
+            return;
+        }
+
+        // Calculating the Y coordinates for each level
+        let currentY = 0;
+        const levelY: number[] = [];
+
+        for (let level = 0; level < this.levels.length; level++) {
+            levelY[level] = currentY;
+
+            // We find the maximum height of the blocks at this level
+            const maxHeight = Math.max(
+                ...this.levels[level].map((node: TreeNode) => node.block.height),
+            );
+            currentY += maxHeight + this.options.verticalSpacing;
+        }
+
+        // Recursively placing nodes
+        const positionNode = (node: TreeNode, leftX: number): void => {
+            // Setting the Y coordinate
+            node.y = levelY[node.level];
+
+            if (node.children.length === 0) {
+                // The leaf node is placed in the current position.
+                node.x = leftX;
+            } else {
+                // Place children
+                let childX = leftX;
+
+                // If the node width is greater than the total width of the children, add an indentation.
+                const childrenWidth = node.children.reduce(
+                    (sum: number, child: TreeNode) => sum + child.subtreeWidth,
+                    0,
+                );
+                const spacingWidth = (node.children.length - 1) * this.options.horizontalSpacing;
+                const totalChildrenWidth = childrenWidth + spacingWidth;
+
+                if (node.block.width > totalChildrenWidth) {
+                    const extraSpace = (node.block.width - totalChildrenWidth) / 2;
+                    childX += extraSpace;
+                }
+
+                // Place each child
+                for (const child of node.children) {
+                    positionNode(child, childX);
+                    childX += child.subtreeWidth + this.options.horizontalSpacing;
+                }
+
+                // Center the parent node relative to the children
+                const firstChild = node.children[0];
+                const lastChild = node.children[node.children.length - 1];
+                const childrenCenter = (firstChild.x + lastChild.x + lastChild.block.width) / 2;
+                node.x = childrenCenter - node.block.width / 2;
+            }
+        };
+
+        positionNode(this.tree, 0);
+    }
+
+    // Normalization of coordinates with padding from the canvas edges
+    normalizeCoordinates() {
+        if (!this.tree) {
+            return;
+        }
+
+        const allNodes: TreeNode[] = [];
+
+        const collectNodes = (node: TreeNode) => {
+            allNodes.push(node);
+            for (const child of node.children) {
+                collectNodes(child);
+            }
+        };
+
+        collectNodes(this.tree);
+
+        const minX = Math.min(...allNodes.map((node) => node.x));
+        const minY = Math.min(...allNodes.map((node) => node.y));
+
+        const offsetX = this.options.padding - minX;
+        const offsetY = this.options.padding - minY;
+
+        for (const node of allNodes) {
+            node.x += offsetX;
+            node.y += offsetY;
+        }
+    }
+
+    // Main method of composition
+    layout() {
+        this.buildTree();
+        this.groupByLevels();
+        this.calculateSubtreeWidths();
+        this.positionNodes();
+        this.normalizeCoordinates();
+
+        return this.getLayoutResult();
+    }
+
+    // Getting the result of composition
+    getLayoutResult(): ExtendedTBlock[] {
+        if (!this.tree) {
+            return [];
+        }
+
+        const result: ExtendedTBlock[] = [];
+
+        const collectResults = (node: TreeNode) => {
+            result.push({
+                id: node.id,
+                x: node.x,
+                y: node.y,
+                width: node.block.width,
+                height: node.block.height,
+                level: node.level,
+                ...node.block,
+            });
+
+            for (const child of node.children) {
+                collectResults(child);
+            }
+        };
+
+        collectResults(this.tree);
+
+        return result;
+    }
+}
+
+// Function for using the algorithm
+function calculateTreeLayout(blocks: TBlock[], connections: TreeConnection[], options = {}) {
+    const engine = new TreeLayoutEngine(blocks, connections, options);
+    return engine.layout();
+}
+
+function calculateTreeEdges(
+    layoutResult: ExtendedTBlock[],
+    connections: TreeConnection[],
+): EdgeResult[] {
+    // Create a position map for convenience of search
+    const positionMap = new Map(layoutResult.map((item) => [item.id, item]));
+
+    // Group connections by parent block
+    const connectionsByParent = new Map();
+
+    for (const connection of connections) {
+        const parentId = connection.sourceBlockId;
+        if (!connectionsByParent.has(parentId)) {
+            connectionsByParent.set(parentId, []);
+        }
+        connectionsByParent.get(parentId).push(connection);
+    }
+
+    const connectionPaths: EdgeResult[] = [];
+
+    // For each parent block, we calculate the paths to the children
+    for (const [parentId, parentConnections] of connectionsByParent) {
+        const parent = positionMap.get(parentId);
+        if (!parent) {
+            continue;
+        }
+
+        // Coordinates of the initial point (center of the lower part of the parent)
+        const startX = parent.x + parent.width / 2;
+        const startY = parent.y + parent.height;
+
+        if (parentConnections.length === 1) {
+            // One child block - simple straight line
+            const connection = parentConnections[0];
+            const child = positionMap.get(connection.targetBlockId);
+
+            if (child) {
+                const endX = child.x + child.width / 2;
+                const endY = child.y;
+
+                connectionPaths.push({
+                    connectionId: connection.id,
+                    sourceBlockId: connection.sourceBlockId,
+                    targetBlockId: connection.targetBlockId,
+                    points: [
+                        {x: startX, y: startY},
+                        {x: endX, y: endY},
+                    ],
+                });
+            }
+        } else {
+            // Several child blocks - broken lines
+
+            // We find the vertical distance between the parent and the nearest child
+            const children = parentConnections
+                .map((conn: TreeConnection) => positionMap.get(conn.targetBlockId))
+                .filter(
+                    (child: ExtendedTBlock | undefined): child is ExtendedTBlock =>
+                        child !== undefined,
+                );
+
+            if (children.length === 0) {
+                continue;
+            }
+
+            // We find the minimum distance to the children by Y
+            const minChildY = Math.min(...children.map((child: ExtendedTBlock) => child.y));
+
+            // The point of branching - in the middle between the parent and the children
+            const branchY = startY + (minChildY - startY) / 2;
+
+            // For each child block, we create a broken line
+            for (const connection of parentConnections) {
+                const child = positionMap.get(connection.targetBlockId);
+                if (!child) {
+                    continue;
+                }
+
+                const endX = child.x + child.width / 2;
+                const endY = child.y;
+
+                const points = [
+                    {x: startX, y: startY}, // Start - center of the lower part of the parent
+                    {x: startX, y: branchY}, // Vertically down to the point of branching
+                    {x: endX, y: branchY}, // Horizontally to the center of the child block
+                    {x: endX, y: endY}, // Vertically down to the center of the upper part of the child block
+                ];
+
+                connectionPaths.push({
+                    connectionId: connection.id,
+                    sourceBlockId: connection.sourceBlockId,
+                    targetBlockId: connection.targetBlockId,
+                    points: points,
+                });
+            }
+        }
+    }
+
+    return connectionPaths;
+}
+
+export function prepareTreeLayout({nodes, links}: TreeLayoutRequest): TreeLayoutResult {
+    const blocks = prepareBlocks(nodes);
+    const connections = prepareConnections(links);
+    const layout = calculateTreeLayout(blocks, connections);
+    const edges = calculateTreeEdges(layout, connections);
+
+    return {
+        layout,
+        edges,
+    };
+}

package/src/components/Graph/types.ts

@@ -0,0 +1,56 @@
+import type {TBlock, TBlockId, TConnection, TMultipointConnection} from '@gravity-ui/graph';
+
+import type {GraphNode, Link, TopologyNodeDataStats} from '../../store/reducers/query/types';
+
+// Extended block interface with additional properties
+export interface ExtendedTBlock extends TBlock {
+    planNodeId?: number;
+    stats?: TopologyNodeDataStats[];
+    operators?: string[];
+    tables?: string[];
+}
+export type LinkType = 'arrow' | 'line';
+export interface Data<TData = any> {
+    links: Link[];
+    nodes: GraphNode<TData>[];
+}
+
+// TreeLayout related types
+export interface LayoutOptions {
+    horizontalSpacing?: number;
+    padding?: number;
+    verticalSpacing?: number;
+}
+
+export interface TreeNode {
+    id: string;
+    level: number;
+    block: any;
+    children: TreeNode[];
+    subtreeWidth: number;
+    x: number;
+    y: number;
+}
+
+export type EdgeResult = TMultipointConnection & {
+    connectionId: string | undefined;
+    points: Array<{x: number; y: number}>;
+    sourceBlockId: TBlockId;
+    targetBlockId: TBlockId;
+};
+
+export type TreeLayoutRequest = Pick<Data, 'links' | 'nodes'>;
+
+export interface TreeLayoutResult {
+    layout: ExtendedTBlock[];
+    edges: EdgeResult[];
+}
+
+export type TreeLayoutWorkerResponse =
+    | {type: 'success'; result: TreeLayoutResult}
+    | {type: 'error'; error: string};
+
+export type TreeConnection = TConnection & {
+    sourceBlockId: TBlockId;
+    targetBlockId: TBlockId;
+};

package/src/components/Graph/utils.ts

@@ -0,0 +1,112 @@
+import type {TBlock} from '@gravity-ui/graph';
+
+import type {ExplainPlanNodeData} from '../../store/reducers/query/types';
+
+import type {AbstractGraphColorsConfig} from './colorsConfig';
+import type {Data, TreeConnection} from './types';
+
+const BLOCK_TOP_PADDING = 8;
+const BLOCK_LINE_HEIGHT = 16;
+const BORDER_HEIGHT = 2;
+
+const getBlockSize = (block: ExplainPlanNodeData) => {
+    const ONE_LINE_HEIGHT = BLOCK_TOP_PADDING * 2 + BLOCK_LINE_HEIGHT + BORDER_HEIGHT;
+    const operatorsLength = Math.max(block.operators?.length ?? 0, 1);
+    const tablesLength = block.tables?.length ?? 0;
+
+    switch (block.type) {
+        case 'query':
+            return {
+                width: 40,
+                height: 40,
+            };
+        case 'result':
+            return {
+                width: 112,
+                height: ONE_LINE_HEIGHT,
+            };
+        case 'stage':
+            return {
+                width: 248,
+                height:
+                    BORDER_HEIGHT +
+                    BLOCK_TOP_PADDING * 2 +
+                    (operatorsLength + tablesLength) * BLOCK_LINE_HEIGHT,
+            };
+        case 'connection':
+            return {
+                width: 122,
+                height: ONE_LINE_HEIGHT,
+            };
+        case 'materialize':
+            return {
+                width: 190,
+                height: ONE_LINE_HEIGHT,
+            };
+        default:
+            return {
+                width: 100,
+                height: ONE_LINE_HEIGHT,
+            };
+    }
+};
+
+export const prepareBlocks = (nodes: Data['nodes']): TBlock[] => {
+    return nodes.map(({name: id, data: {id: planNodeId, name, type, ...rest}, data}) => ({
+        id,
+        is: type,
+        name,
+        planNodeId,
+        ...getBlockSize(data),
+        ...rest,
+    }));
+};
+
+export const prepareConnections = (links: Data['links']): TreeConnection[] => {
+    return links.map(({from, to}) => ({
+        id: `${from}:${to}`,
+        sourceBlockId: from,
+        targetBlockId: to,
+    }));
+};
+
+function calculateCurrentCustomPropertyValue<T extends string>(
+    colorSettings: Partial<Record<T, string>>,
+    computedStyle: CSSStyleDeclaration,
+): Partial<Record<T, string>> {
+    const result: Partial<Record<T, string>> = {};
+
+    for (const nestedKey in colorSettings) {
+        if (Object.prototype.hasOwnProperty.call(colorSettings, nestedKey)) {
+            const value = colorSettings[nestedKey];
+
+            if (value !== undefined) {
+                result[nestedKey] = value?.startsWith('var(')
+                    ? computedStyle.getPropertyValue(value.substring(4, value.length - 1)).trim()
+                    : value;
+            }
+        }
+    }
+
+    return result;
+}
+
+export function parseCustomPropertyValue<T extends AbstractGraphColorsConfig>(
+    colors: T,
+    block: HTMLElement = globalThis.document.body,
+): T {
+    const parsed: AbstractGraphColorsConfig = {};
+    const computedStyle = window.getComputedStyle(block);
+
+    for (const topKey in colors) {
+        if (Object.prototype.hasOwnProperty.call(colors, topKey)) {
+            const nestedObj = colors[topKey];
+
+            if (nestedObj) {
+                parsed[topKey] = calculateCurrentCustomPropertyValue(nestedObj, computedStyle);
+            }
+        }
+    }
+
+    return parsed as T;
+}

package/src/components/InfoViewer/formatters/pqGroup.ts

@@ -1,11 +1,13 @@
 import type {
     TPQPartitionConfig,
+    TPQPartitionStrategy,
     TPQTabletConfig,
     TPersQueueGroupDescription,
 } from '../../../types/api/schema';
-import {EMeteringMode} from '../../../types/api/schema';
-import {HOUR_IN_SECONDS} from '../../../utils/constants';
+import {EMeteringMode, EPQPartitionStrategyType} from '../../../types/api/schema';
+import {EMPTY_DATA_PLACEHOLDER, HOUR_IN_SECONDS} from '../../../utils/constants';
 import {formatBps, formatBytes, formatNumber} from '../../../utils/dataFormatters/dataFormatters';
+import i18n from '../i18n';
 import {createInfoFormatter} from '../utils';
 
 const EMeteringModeToNames: Record<EMeteringMode, string> = {
@@ -13,6 +15,13 @@ const EMeteringModeToNames: Record<EMeteringMode, string> = {
     [EMeteringMode.METERING_MODE_RESERVED_CAPACITY]: 'reserved-capacity',
 };
 
+const EPQPartitionStrategyTypeToNames: Record<EPQPartitionStrategyType, string> = {
+    [EPQPartitionStrategyType.DISABLED]: i18n('value_autopartitioning-disabled'),
+    [EPQPartitionStrategyType.CAN_SPLIT]: i18n('value_autopartitioning-up'),
+    [EPQPartitionStrategyType.CAN_SPLIT_AND_MERGE]: i18n('value_autopartitioning-up-and-down'),
+    [EPQPartitionStrategyType.PAUSED]: i18n('value_autopartitioning-paused'),
+};
+
 export const formatPQGroupItem = createInfoFormatter<TPersQueueGroupDescription>({
     values: {
         Partitions: (value) => formatNumber(value?.length || 0),
@@ -48,3 +57,22 @@ export const formatPQPartitionConfig = createInfoFormatter<TPQPartitionConfig>({
         WriteSpeedInBytesPerSecond: 'Partitions write speed',
     },
 });
+
+const formatPartitionCount = (value?: number) =>
+    value === undefined ? EMPTY_DATA_PLACEHOLDER : formatNumber(value);
+
+export const formatPQPartitionStrategy = createInfoFormatter<TPQPartitionStrategy>({
+    values: {
+        // Fall back to the raw enum value so a strategy introduced by a newer YDB
+        // version still renders the Autopartitioning row instead of being dropped.
+        PartitionStrategyType: (value) =>
+            value && (EPQPartitionStrategyTypeToNames[value] ?? value),
+        MinPartitionCount: formatPartitionCount,
+        MaxPartitionCount: formatPartitionCount,
+    },
+    labels: {
+        PartitionStrategyType: i18n('field_autopartitioning'),
+        MinPartitionCount: i18n('field_min-partitions-count'),
+        MaxPartitionCount: i18n('field_max-partitions-count'),
+    },
+});

package/src/components/InfoViewer/i18n/en.json

@@ -1,5 +1,12 @@
 {
   "common.created": "Created",
   "common.type": "Type",
-  "no-data": "No data"
+  "no-data": "No data",
+  "field_autopartitioning": "Autopartitioning",
+  "field_min-partitions-count": "Min partitions count",
+  "field_max-partitions-count": "Max partitions count",
+  "value_autopartitioning-disabled": "Disabled",
+  "value_autopartitioning-up": "Up",
+  "value_autopartitioning-up-and-down": "Up and down",
+  "value_autopartitioning-paused": "Paused"
 }

package/src/containers/App/Content.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import {connect} from 'react-redux';
 import type {RedirectProps} from 'react-router-dom';
-import {Redirect, Route, Switch} from 'react-router-dom';
+import {Redirect, Route, Switch, useLocation} from 'react-router-dom';
 
 import {Unauthenticated} from '../../components/Errors/401';
 import {AccessDenied} from '../../components/Errors/403';
@@ -41,6 +41,7 @@ import {
     TenantSlot,
     VDiskPageSlot,
 } from './appSlots';
+import {shouldRedirectClusterRouteToRoot} from './clusterRouteGuard';
 import {getLegacyClusterTenantsRedirect, getLegacyTenantRedirect} from './legacyRedirects';
 
 import './App.scss';
@@ -148,6 +149,12 @@ export function Content(props: ContentProps) {
     const {singleClusterMode} = props;
 
     const slots = useSlots(props);
+    const currentLocation = useLocation();
+    const shouldRedirectToRoot = shouldRedirectClusterRouteToRoot({
+        singleClusterMode,
+        pathname: currentLocation.pathname,
+        search: currentLocation.search,
+    });
 
     const additionalRoutes = slots.get(RoutesSlot);
 
@@ -158,6 +165,7 @@ export function Content(props: ContentProps) {
     return (
         <Switch>
             {additionalRoutes?.rendered}
+            {shouldRedirectToRoot ? <Redirect to="/" /> : null}
             <Route>
                 <Header />
                 <Switch>

package/src/containers/App/clusterRouteGuard.ts

@@ -0,0 +1,24 @@
+import {matchPath} from 'react-router-dom';
+
+import routes from '../../routes';
+
+export function shouldRedirectClusterRouteToRoot({
+    singleClusterMode,
+    pathname,
+    search,
+}: {
+    singleClusterMode: boolean;
+    pathname: string;
+    search: string;
+}) {
+    const clusterRouteMatch = matchPath(pathname, {
+        path: routes.cluster,
+        exact: false,
+    });
+
+    if (singleClusterMode || !clusterRouteMatch) {
+        return false;
+    }
+
+    return !new URLSearchParams(search).get('clusterName');
+}