ydb-embedded-ui 4.3.0 → 4.4.0

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;

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

@@ -0,0 +1,22 @@
+import type {IResponseError} from '../../../types/api/error';
+import type {TSystemStateInfo} from '../../../types/api/nodes';
+import type {ApiRequestAction} from '../../utils';
+
+import {FETCH_CLUSTER_NODES} from './clusterNodes';
+
+export interface PreparedClusterNode extends TSystemStateInfo {
+    uptime: string;
+}
+
+export interface ClusterNodesState {
+    loading: boolean;
+    wasLoaded: boolean;
+    nodes?: PreparedClusterNode[];
+    error?: IResponseError;
+}
+
+export type ClusterNodesAction = ApiRequestAction<
+    typeof FETCH_CLUSTER_NODES,
+    PreparedClusterNode[],
+    IResponseError
+>;

package/dist/store/reducers/index.ts

@@ -2,19 +2,16 @@ import {combineReducers} from 'redux';
 
 import nodes from './nodes';
 import cluster from './cluster/cluster';
+import clusterNodes from './clusterNodes/clusterNodes';
 import tenant from './tenant';
 import storage from './storage';
 import node from './node';
-import pdisk from './pdisk';
-import vdisk from './vdisk';
-import group from './group';
 import tooltip from './tooltip';
 import tablets from './tablets';
 import heatmap from './heatmap';
 import schema from './schema';
 import host from './host';
 import network from './network';
-import pool from './pool';
 import tenants from './tenants/tenants';
 import tablet from './tablet';
 import topic from './topic';
@@ -42,19 +39,16 @@ export const rootReducer = {
     singleClusterMode,
     nodes,
     cluster,
+    clusterNodes,
     tenant,
     storage,
     node,
-    pdisk,
-    vdisk,
-    group,
     tooltip,
     tablets,
     schema,
     olapStats,
     host,
     network,
-    pool,
     tenants,
     tablet,
     topic,

package/dist/store/reducers/partitions/partitions.ts

@@ -15,7 +15,7 @@ const SET_DATA_WAS_NOT_LOADED = 'partitions/SET_DATA_WAS_NOT_LOADED';
 const initialState = {
     loading: false,
     wasLoaded: false,
-    selectedConsumer: undefined,
+    selectedConsumer: '',
 };
 
 const partitions: Reducer<PartitionsState, PartitionsAction> = (state = initialState, action) => {
@@ -63,7 +63,7 @@ const partitions: Reducer<PartitionsState, PartitionsAction> = (state = initialS
     }
 };
 
-export const setSelectedConsumer = (value?: string) => {
+export const setSelectedConsumer = (value: string) => {
     return {
         type: SET_SELECTED_CONSUMER,
         data: value,

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

@@ -36,7 +36,7 @@ export interface PreparedPartitionData {
 export interface PartitionsState {
     loading: boolean;
     wasLoaded: boolean;
-    selectedConsumer: string | undefined;
+    selectedConsumer: string;
     partitions?: PreparedPartitionData[];
     error?: IResponseError;
 }

package/dist/types/additionalProps.ts

@@ -0,0 +1,5 @@
+import type {VersionToColorMap} from './versions';
+
+export interface AdditionalVersionsProps {
+    getVersionToColorMap?: () => VersionToColorMap;
+}

package/dist/types/versions.ts

@@ -0,0 +1,9 @@
+export type VersionsMap = Map<string, Set<string>>;
+export type VersionToColorMap = Map<string, string>;
+
+export interface VersionValue {
+    value: number;
+    color: string | undefined;
+    version: string;
+    title: string;
+}

package/dist/utils/constants.ts

@@ -2,9 +2,6 @@ import DataTable from '@gravity-ui/react-data-table';
 
 const SECOND = 1000;
 
-export const GROUP_AUTO_RELOAD_INTERVAL = 10 * SECOND;
-export const PDISK_AUTO_RELOAD_INTERVAL = 10 * SECOND;
-export const VDISK_AUTO_RELOAD_INTERVAL = 10 * SECOND;
 export const AUTO_RELOAD_INTERVAL = 10 * SECOND;
 // by agreement, display all byte values in decimal scale
 // values in data are always in bytes, never in higher units,
@@ -13,7 +10,6 @@ export const KILOBYTE = 1_000;
 export const MEGABYTE = 1_000_000;
 export const GIGABYTE = 1_000_000_000;
 export const TERABYTE = 1_000_000_000_000;
-export const GROUP = 'group';
 
 export const MINUTE_IN_SECONDS = 60;
 export const HOUR_IN_SECONDS = 60 * MINUTE_IN_SECONDS;
@@ -43,8 +39,6 @@ export const TABLET_COLORS = {
     Active: 'lightgreen',
 };
 
-export const TxAllocator = 'TxAllocator';
-
 export const TABLET_SYMBOLS = {
     OldTxProxy: 'P',
     TxProxy: 'P',
@@ -72,11 +66,6 @@ export const getTabletLabel = (type?: string) => {
 
 export const LOAD_AVERAGE_TIME_INTERVALS = ['1 min', '5 min', '15 min'];
 
-export const PDISK_CATEGORIES = {
-    0: 'HDD',
-    1: 'SSD',
-};
-
 export const COLORS_PRIORITY = {
     green: 5,
     yellow: 4,

package/dist/utils/hooks/useSetting.ts

@@ -5,16 +5,18 @@ import {getParsedSettingValue, setSettingValue} from '../../store/reducers/setti
 
 import {useTypedSelector} from './useTypedSelector';
 
-export const useSetting = <T>(key: string, defaultValue: T): [T, (value: T) => void] => {
+export const useSetting = <T>(key: string, defaultValue?: T): [T, (value: T) => void] => {
     const dispatch = useDispatch();
 
     const settingValue: T = useTypedSelector(
-        (state) => getParsedSettingValue(state, key) || defaultValue,
+        (state) => getParsedSettingValue(state, key) ?? defaultValue,
     );
 
     const setValue = useCallback(
         (value: T) => {
-            dispatch(setSettingValue(key, JSON.stringify(value)));
+            const preparedValue = typeof value === 'string' ? value : JSON.stringify(value);
+
+            dispatch(setSettingValue(key, preparedValue));
         },
         [dispatch, key],
     );