ydb-embedded-ui 4.3.0 → 4.4.1

package/dist/containers/Versions/NodesTable/NodesTable.tsx

@@ -0,0 +1,150 @@
+import {useDispatch} from 'react-redux';
+
+import DataTable, {Column} from '@gravity-ui/react-data-table';
+
+import type {PreparedClusterNode} from '../../../store/reducers/clusterNodes/types';
+import type {ShowTooltipFunction} from '../../../types/store/tooltip';
+
+import {hideTooltip, showTooltip} from '../../../store/reducers/tooltip';
+import {isUnavailableNode} from '../../../utils/nodes';
+import {formatBytes} from '../../../utils';
+import {getDefaultNodePath} from '../../Node/NodePages';
+
+import ProgressViewer from '../../../components/ProgressViewer/ProgressViewer';
+import PoolsGraph from '../../../components/PoolsGraph/PoolsGraph';
+import EntityStatus from '../../../components/EntityStatus/EntityStatus';
+
+const getColumns = ({
+    onShowTooltip,
+    onHideTooltip,
+}: {
+    onShowTooltip: (...args: Parameters<ShowTooltipFunction>) => void;
+    onHideTooltip: VoidFunction;
+}): Column<PreparedClusterNode>[] => [
+    {
+        name: 'NodeId',
+        header: '#',
+        width: '80px',
+        align: DataTable.LEFT,
+        render: ({row}) => row.NodeId,
+    },
+    {
+        name: 'Host',
+        render: ({row}) => {
+            const port =
+                row.Endpoints && row.Endpoints.find((item) => item.Name === 'http-mon')?.Address;
+            const host = row.Host && `${row.Host}${port || ''}`;
+            const title = host || 'unknown';
+
+            const nodePath =
+                !isUnavailableNode(row) && row.NodeId ? getDefaultNodePath(row.NodeId) : undefined;
+
+            return (
+                <EntityStatus name={title} path={nodePath} hasClipboardButton showStatus={false} />
+            );
+        },
+        width: '400px',
+        align: DataTable.LEFT,
+    },
+    {
+        name: 'Endpoints',
+        sortable: false,
+        render: ({row}) =>
+            row.Endpoints
+                ? row.Endpoints.map(({Name, Address}) => `${Name} ${Address}`).join(', ')
+                : '-',
+        width: '300px',
+        align: DataTable.LEFT,
+    },
+    {
+        name: 'uptime',
+        header: 'Uptime',
+        sortAccessor: ({StartTime}) => StartTime && -StartTime,
+        width: '120px',
+        align: DataTable.LEFT,
+        render: ({row}) => row.uptime,
+    },
+    {
+        name: 'MemoryUsed',
+        header: 'Memory used',
+        sortAccessor: ({MemoryUsed = 0}) => Number(MemoryUsed),
+        defaultOrder: DataTable.DESCENDING,
+        render: ({row}) => (row.MemoryUsed ? formatBytes(row.MemoryUsed) : '—'),
+        width: '120px',
+        align: DataTable.RIGHT,
+    },
+    {
+        name: 'MemoryLimit',
+        header: 'Memory limit',
+        sortAccessor: ({MemoryLimit = 0}) => Number(MemoryLimit),
+        defaultOrder: DataTable.DESCENDING,
+        render: ({row}) => (row.MemoryLimit ? formatBytes(row.MemoryLimit) : '—'),
+        width: '120px',
+        align: DataTable.RIGHT,
+    },
+    {
+        name: 'PoolStats',
+        header: 'Pools',
+        sortAccessor: ({PoolStats = []}) =>
+            PoolStats.reduce((acc, item) => acc + (item.Usage || 0), 0),
+        defaultOrder: DataTable.DESCENDING,
+        width: '120px',
+        render: ({row}) =>
+            row.PoolStats ? (
+                <PoolsGraph
+                    onMouseEnter={onShowTooltip}
+                    onMouseLeave={onHideTooltip}
+                    pools={row.PoolStats}
+                />
+            ) : (
+                '—'
+            ),
+        align: DataTable.LEFT,
+    },
+    {
+        name: 'LoadAverage',
+        header: 'Load average',
+        sortAccessor: ({LoadAverage = []}) =>
+            LoadAverage.slice(0, 1).reduce((acc, item) => acc + item, 0),
+        defaultOrder: DataTable.DESCENDING,
+        width: '200px',
+        render: ({row}) =>
+            row.LoadAverage && row.LoadAverage.length > 0 ? (
+                <ProgressViewer
+                    value={row.LoadAverage[0]}
+                    percents={true}
+                    colorizeProgress={true}
+                />
+            ) : (
+                '—'
+            ),
+        align: DataTable.LEFT,
+    },
+];
+
+interface NodesTableProps {
+    nodes: PreparedClusterNode[];
+}
+
+export const NodesTable = ({nodes}: NodesTableProps) => {
+    const dispatch = useDispatch();
+
+    const onShowTooltip = (...args: Parameters<ShowTooltipFunction>) => {
+        dispatch(showTooltip(...args));
+    };
+
+    const onHideTooltip = () => {
+        dispatch(hideTooltip());
+    };
+
+    return (
+        <DataTable
+            theme="yandex-cloud"
+            data={nodes}
+            columns={getColumns({onShowTooltip, onHideTooltip})}
+            settings={{
+                displayIndices: false,
+            }}
+        />
+    );
+};

package/dist/containers/Versions/NodesTreeTitle/NodesTreeTitle.scss

@@ -0,0 +1,55 @@
+.ydb-versions-nodes-tree-title {
+    &__overview {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        width: 100%;
+    }
+
+    &__overview-info {
+        display: flex;
+        align-items: center;
+
+        margin-left: 25px;
+
+        & > *:not(:first-child) {
+            margin-left: 30px;
+        }
+    }
+    &__overview-container {
+        display: flex;
+        align-items: center;
+    }
+    &__info-label {
+        font-weight: 200;
+
+        color: var(--yc-color-text-complementary);
+
+        &_margin_left {
+            margin-left: 5px;
+        }
+        &_margin_right {
+            margin-right: 5px;
+        }
+    }
+
+    &__version-color {
+        width: 16px;
+        height: 16px;
+        margin-right: 10px;
+
+        border-radius: 100%;
+    }
+
+    &__version-progress {
+        display: flex;
+        align-items: center;
+
+        width: 250px;
+
+        & .yc-progress {
+            width: 200px;
+        }
+    }
+}

package/dist/containers/Versions/NodesTreeTitle/NodesTreeTitle.tsx

@@ -0,0 +1,62 @@
+import block from 'bem-cn-lite';
+
+import {Progress} from '@gravity-ui/uikit';
+
+import type {VersionValue} from '../../../types/versions';
+import type {PreparedClusterNode} from '../../../store/reducers/clusterNodes/types';
+import type {GroupedNodesItem} from '../types';
+
+import './NodesTreeTitle.scss';
+
+const b = block('ydb-versions-nodes-tree-title');
+
+interface NodesTreeTitleProps {
+    title?: string;
+    nodes?: PreparedClusterNode[];
+    items?: GroupedNodesItem[];
+    versionColor?: string;
+    versionsValues?: VersionValue[];
+}
+
+export const NodesTreeTitle = ({
+    title,
+    nodes,
+    items,
+    versionColor,
+    versionsValues,
+}: NodesTreeTitleProps) => {
+    let nodesAmount;
+    if (items) {
+        nodesAmount = items.reduce((acc, curr) => {
+            if (!curr.nodes) {
+                return acc;
+            }
+            return acc + curr.nodes.length;
+        }, 0);
+    } else {
+        nodesAmount = nodes ? nodes.length : 0;
+    }
+
+    return (
+        <div className={b('overview')}>
+            <div className={b('overview-container')}>
+                {versionColor ? (
+                    <div className={b('version-color')} style={{background: versionColor}} />
+                ) : null}
+                <span className={b('overview-title')}>{title}</span>
+            </div>
+            <div className={b('overview-info')}>
+                <div>
+                    <span className={b('info-value')}>{nodesAmount}</span>
+                    <span className={b('info-label', {margin: 'left'})}>Nodes</span>
+                </div>
+                {versionsValues ? (
+                    <div className={b('version-progress')}>
+                        <span className={b('info-label', {margin: 'right'})}>Versions</span>
+                        <Progress view="thin" value={100} stack={versionsValues} />
+                    </div>
+                ) : null}
+            </div>
+        </div>
+    );
+};

package/dist/containers/Versions/Versions.scss

@@ -0,0 +1,32 @@
+@import '../../styles/mixins.scss';
+
+.ydb-versions {
+    $_: &;
+
+    &__content {
+        padding: 20px;
+    }
+
+    &__controls {
+        display: flex;
+        align-items: center;
+
+        padding: 0 0 20px;
+
+        #{$_} {
+            &__label {
+                margin-right: 10px;
+
+                font-weight: 500;
+            }
+
+            &__checkbox {
+                margin: 0;
+            }
+        }
+
+        & > * {
+            margin-right: 25px;
+        }
+    }
+}

package/dist/containers/Versions/Versions.tsx

@@ -0,0 +1,121 @@
+import {useState} from 'react';
+import block from 'bem-cn-lite';
+
+import {Checkbox, RadioButton} from '@gravity-ui/uikit';
+
+import type {PreparedClusterNode} from '../../store/reducers/clusterNodes/types';
+import type {VersionToColorMap} from '../../types/versions';
+import {getGroupedStorageNodes, getGroupedTenantNodes, getOtherNodes} from './groupNodes';
+import {GroupedNodesTree} from './GroupedNodesTree/GroupedNodesTree';
+import {GroupByValue} from './types';
+
+import './Versions.scss';
+
+const b = block('ydb-versions');
+
+interface VersionsProps {
+    nodes?: PreparedClusterNode[];
+    versionToColor?: VersionToColorMap;
+}
+
+export const Versions = ({nodes = [], versionToColor}: VersionsProps) => {
+    const [groupByValue, setGroupByValue] = useState<GroupByValue>(GroupByValue.VERSION);
+    const [expanded, setExpanded] = useState(false);
+
+    const handleGroupByValueChange = (value: string) => {
+        setGroupByValue(value as GroupByValue);
+    };
+
+    const renderGroupControl = () => {
+        return (
+            <div className={b('group')}>
+                <span className={b('label')}>Group by:</span>
+                <RadioButton value={groupByValue} onUpdate={handleGroupByValueChange}>
+                    <RadioButton.Option value={GroupByValue.TENANT}>
+                        {GroupByValue.TENANT}
+                    </RadioButton.Option>
+                    <RadioButton.Option value={GroupByValue.VERSION}>
+                        {GroupByValue.VERSION}
+                    </RadioButton.Option>
+                </RadioButton>
+            </div>
+        );
+    };
+    const renderControls = () => {
+        return (
+            <div className={b('controls')}>
+                {renderGroupControl()}
+                <Checkbox
+                    className={b('checkbox')}
+                    onChange={() => setExpanded((value) => !value)}
+                    checked={expanded}
+                >
+                    All expanded
+                </Checkbox>
+            </div>
+        );
+    };
+    const renderGroupedNodes = () => {
+        const tenantNodes = getGroupedTenantNodes(nodes, versionToColor, groupByValue);
+        const storageNodes = getGroupedStorageNodes(nodes, versionToColor);
+        const otherNodes = getOtherNodes(nodes, versionToColor);
+        const storageNodesContent = storageNodes?.length ? (
+            <>
+                <h3>Storage nodes</h3>
+                {storageNodes.map(({title, nodes: itemNodes, items, versionColor}, index) => (
+                    <GroupedNodesTree
+                        key={`storage-nodes-${index}`}
+                        title={title}
+                        nodes={itemNodes}
+                        items={items}
+                        versionColor={versionColor}
+                    />
+                ))}
+            </>
+        ) : null;
+        const tenantNodesContent = tenantNodes?.length ? (
+            <>
+                <h3>Database nodes</h3>
+                {renderControls()}
+                {tenantNodes.map(
+                    ({title, nodes: itemNodes, items, versionColor, versionsValues}, index) => (
+                        <GroupedNodesTree
+                            key={`tenant-nodes-${index}`}
+                            title={title}
+                            nodes={itemNodes}
+                            items={items}
+                            expanded={expanded}
+                            versionColor={versionColor}
+                            versionsValues={versionsValues}
+                        />
+                    ),
+                )}
+            </>
+        ) : null;
+        const otherNodesContent = otherNodes?.length ? (
+            <>
+                <h3>Other nodes</h3>
+                {otherNodes.map(
+                    ({title, nodes: itemNodes, items, versionColor, versionsValues}, index) => (
+                        <GroupedNodesTree
+                            key={`other-nodes-${index}`}
+                            title={title}
+                            nodes={itemNodes}
+                            items={items}
+                            versionColor={versionColor}
+                            versionsValues={versionsValues}
+                        />
+                    ),
+                )}
+            </>
+        ) : null;
+        return (
+            <div className={b('versions')}>
+                {storageNodesContent}
+                {tenantNodesContent}
+                {otherNodesContent}
+            </div>
+        );
+    };
+    return <div className={b('content')}>{renderGroupedNodes()}</div>;
+};

package/dist/containers/Versions/groupNodes.ts

@@ -0,0 +1,124 @@
+import {groupBy} from 'lodash';
+
+import type {VersionToColorMap} from '../../types/versions';
+import type {PreparedClusterNode} from '../../store/reducers/clusterNodes/types';
+import {getMinorVersion, parseNodesToVersionsValues} from '../../utils/versions';
+
+import {GroupByValue, GroupedNodesItem} from './types';
+
+const sortByTitle = (a: GroupedNodesItem, b: GroupedNodesItem) =>
+    a.title?.localeCompare(b.title || '') || -1;
+
+export const getGroupedTenantNodes = (
+    nodes: PreparedClusterNode[] | undefined,
+    versionToColor: VersionToColorMap | undefined,
+    groupByValue: GroupByValue,
+): GroupedNodesItem[] | undefined => {
+    if (!nodes || !nodes.length) {
+        return undefined;
+    }
+
+    if (groupByValue === GroupByValue.VERSION) {
+        const dividedByVersion = groupBy(nodes, 'Version');
+
+        return Object.keys(dividedByVersion)
+            .map<GroupedNodesItem | null>((version) => {
+                const filteredNodes = dividedByVersion[version].filter(({Tenants}) =>
+                    Boolean(Tenants),
+                );
+                const dividedByTenant = groupBy(filteredNodes, 'Tenants');
+
+                const items = Object.keys(dividedByTenant)
+                    .map((tenant) => {
+                        return {
+                            title: tenant,
+                            nodes: dividedByTenant[tenant],
+                        };
+                    })
+                    .sort(sortByTitle);
+
+                if (!items.length) {
+                    return null;
+                }
+
+                return {
+                    title: version,
+                    items: items,
+                    versionColor: versionToColor?.get(getMinorVersion(version)),
+                };
+            })
+            .filter((item): item is GroupedNodesItem => Boolean(item));
+    } else {
+        const filteredNodes = nodes.filter(({Tenants}) => Boolean(Tenants));
+        const dividedByTenant = groupBy(filteredNodes, 'Tenants');
+
+        return Object.keys(dividedByTenant)
+            .map<GroupedNodesItem | null>((tenant) => {
+                const versionsValues = parseNodesToVersionsValues(
+                    dividedByTenant[tenant],
+                    versionToColor,
+                );
+
+                const dividedByVersion = groupBy(dividedByTenant[tenant], 'Version');
+                const preparedItems = Object.keys(dividedByVersion).map((version) => {
+                    return {
+                        title: version,
+                        nodes: dividedByVersion[version],
+                        versionColor: versionToColor?.get(getMinorVersion(version)),
+                    };
+                });
+
+                if (!preparedItems.length) {
+                    return null;
+                }
+
+                return {
+                    title: tenant,
+                    items: preparedItems,
+                    versionsValues,
+                };
+            })
+            .filter((item): item is GroupedNodesItem => Boolean(item))
+            .sort(sortByTitle);
+    }
+};
+
+export const getGroupedStorageNodes = (
+    nodes: PreparedClusterNode[] | undefined,
+    versionToColor: VersionToColorMap | undefined,
+): GroupedNodesItem[] | undefined => {
+    if (!nodes || !nodes.length) {
+        return undefined;
+    }
+
+    const storageNodes = nodes.filter(({Roles}) => Roles?.includes('Storage'));
+    const storageNodesDividedByVersion = groupBy(storageNodes, 'Version');
+
+    return Object.keys(storageNodesDividedByVersion).map((version) => {
+        return {
+            title: version,
+            nodes: storageNodesDividedByVersion[version],
+            versionColor: versionToColor?.get(getMinorVersion(version)),
+        };
+    });
+};
+
+export const getOtherNodes = (
+    nodes: PreparedClusterNode[] | undefined,
+    versionToColor: VersionToColorMap | undefined,
+): GroupedNodesItem[] | undefined => {
+    if (!nodes || !nodes.length) {
+        return undefined;
+    }
+
+    const otherNodes = nodes.filter(({Roles}) => !Roles);
+    const otherNodesDividedByVersion = groupBy(otherNodes, 'Version');
+
+    return Object.keys(otherNodesDividedByVersion).map((version) => {
+        return {
+            title: version,
+            nodes: otherNodesDividedByVersion[version],
+            versionColor: versionToColor?.get(getMinorVersion(version)),
+        };
+    });
+};

package/dist/containers/Versions/types.ts

@@ -0,0 +1,16 @@
+import type {VersionValue} from '../../types/versions';
+import type {PreparedClusterNode} from '../../store/reducers/clusterNodes/types';
+
+export interface GroupedNodesItem {
+    title?: string;
+    nodes?: PreparedClusterNode[];
+    items?: GroupedNodesItem[];
+    versionColor?: string;
+    versionsValues?: VersionValue[];
+}
+
+export enum GroupByValue {
+    VERSION = 'Version',
+    TENANT = 'Database',
+    STORAGE = 'Storage',
+}

package/dist/routes.ts

@@ -8,14 +8,8 @@ const routes = {
     cluster: '/cluster/:activeTab?',
     tenant: '/tenant',
     node: '/node/:id/:activeTab?',
-    pdisk: '/pdisk/:id',
-    group: '/group/:id',
-    vdisk: '/vdisk',
-    network: '/network',
-    pool: '/pool/:poolName',
     tablet: '/tablet/:id',
     tabletsFilters: '/tabletsFilters',
-    clusterPage: '/clusters/:name',
     auth: '/auth',
 };
 

package/dist/services/api.ts

@@ -50,6 +50,9 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
             tablets: true,
         });
     }
+    getClusterNodes() {
+        return this.get<TEvSystemStateResponse>(this.getPath('/viewer/json/sysinfo'), {});
+    }
     getNodeInfo(id?: string) {
         return this.get<TEvSystemStateResponse>(this.getPath('/viewer/json/sysinfo?enums=true'), {
             node_id: id,

package/dist/store/reducers/cluster/cluster.ts

@@ -26,6 +26,10 @@ const cluster: Reducer<ClusterState, ClusterAction> = (state = initialState, act
             };
         }
         case FETCH_CLUSTER.FAILURE: {
+            if (action.error?.isCancelled) {
+                return state;
+            }
+
             return {
                 ...state,
                 error: action.error,

package/dist/store/reducers/cluster/types.ts

@@ -2,12 +2,13 @@ import {FETCH_CLUSTER} from './cluster';
 
 import type {TClusterInfo} from '../../../types/api/cluster';
 import type {ApiRequestAction} from '../../utils';
+import type {IResponseError} from '../../../types/api/error';
 
 export interface ClusterState {
     loading: boolean;
     wasLoaded: boolean;
     data?: TClusterInfo;
-    error?: unknown;
+    error?: IResponseError;
 }
 
-export type ClusterAction = ApiRequestAction<typeof FETCH_CLUSTER, TClusterInfo, unknown>;
+export type ClusterAction = ApiRequestAction<typeof FETCH_CLUSTER, TClusterInfo, IResponseError>;

package/dist/store/reducers/clusterNodes/clusterNodes.tsx

@@ -0,0 +1,64 @@
+import {Reducer} from 'redux';
+
+import {createRequestActionTypes, createApiRequest} from '../../utils';
+
+import type {ClusterNodesAction, ClusterNodesState, PreparedClusterNode} from './types';
+
+import '../../../services/api';
+import {calcUptime} from '../../../utils';
+
+export const FETCH_CLUSTER_NODES = createRequestActionTypes('cluster', 'FETCH_CLUSTER_NODES');
+
+const initialState = {loading: false, wasLoaded: false};
+
+const clusterNodes: Reducer<ClusterNodesState, ClusterNodesAction> = (
+    state = initialState,
+    action,
+) => {
+    switch (action.type) {
+        case FETCH_CLUSTER_NODES.REQUEST: {
+            return {
+                ...state,
+                loading: true,
+            };
+        }
+        case FETCH_CLUSTER_NODES.SUCCESS: {
+            const {data = []} = action;
+
+            return {
+                ...state,
+                nodes: data,
+                loading: false,
+                wasLoaded: true,
+                error: undefined,
+            };
+        }
+        case FETCH_CLUSTER_NODES.FAILURE: {
+            return {
+                ...state,
+                error: action.error,
+                loading: false,
+            };
+        }
+        default:
+            return state;
+    }
+};
+
+export function getClusterNodes() {
+    return createApiRequest({
+        request: window.api.getClusterNodes(),
+        actions: FETCH_CLUSTER_NODES,
+        dataHandler: (data): PreparedClusterNode[] => {
+            const {SystemStateInfo: nodes = []} = data;
+            return nodes.map((node) => {
+                return {
+                    ...node,
+                    uptime: calcUptime(node.StartTime),
+                };
+            });
+        },
+    });
+}
+
+export default clusterNodes;