ydb-embedded-ui 4.3.0 → 4.4.0

package/dist/containers/Tenant/Diagnostics/Partitions/i18n/en.json

@@ -4,7 +4,7 @@
   "headers.unread": "End offset - Last read offset",
   "headers.uncommited": "End offset - Committed offset",
   "controls.consumerSelector": "Consumer:",
-  "controls.consumerSelector.placeholder": "Consumer",
+  "controls.consumerSelector.emptyOption": "No consumer",
   "controls.partitionSearch": "Partition ID",
   "controls.generalSearch": "Host, Host ID, Reader, Read Session ID",
   "table.emptyDataMessage": "No partitions match the current search",

package/dist/containers/Tenant/Diagnostics/Partitions/i18n/ru.json

@@ -4,7 +4,7 @@
   "headers.unread": "End offset - Last read offset",
   "headers.uncommited": "End offset - Committed offset",
   "controls.consumerSelector": "Читатель:",
-  "controls.consumerSelector.placeholder": "Читатель",
+  "controls.consumerSelector.emptyOption": "Нет читателя",
   "controls.partitionSearch": "Partition ID",
   "controls.generalSearch": "Host, Host ID, Reader, Read Session ID",
   "table.emptyDataMessage": "По заданному поиску нет партиций",

package/dist/containers/UserSettings/Setting.tsx

@@ -0,0 +1,82 @@
+import type {ReactNode} from 'react';
+
+import {RadioButton, Switch} from '@gravity-ui/uikit';
+import {Settings} from '@gravity-ui/navigation';
+
+import {LabelWithPopover} from '../../components/LabelWithPopover/LabelWithPopover';
+
+import {useSetting} from '../../utils/hooks';
+
+import {b} from './UserSettings';
+
+export type SettingsElementType = 'switch' | 'radio';
+
+export interface SettingProps {
+    type?: SettingsElementType;
+    title: string;
+    settingKey: string;
+    helpPopoverContent?: ReactNode;
+    values?: {value: string; content: string}[];
+    defaultValue?: unknown;
+}
+
+export const Setting = ({
+    type = 'switch',
+    settingKey,
+    title,
+    helpPopoverContent,
+    values,
+    defaultValue,
+}: SettingProps) => {
+    const [settingValue, setValue] = useSetting(settingKey, defaultValue);
+
+    const renderTitleComponent = (value: ReactNode) => {
+        if (helpPopoverContent) {
+            return (
+                <LabelWithPopover
+                    className={b('item-with-popup')}
+                    contentClassName={b('popup')}
+                    text={value}
+                    popoverContent={helpPopoverContent}
+                />
+            );
+        }
+
+        return value;
+    };
+
+    const getSettingsElement = (elementType: SettingsElementType) => {
+        switch (elementType) {
+            case 'switch': {
+                return <Switch checked={Boolean(settingValue)} onUpdate={setValue} />;
+            }
+
+            case 'radio': {
+                if (!values) {
+                    return null;
+                }
+
+                return (
+                    <RadioButton value={String(settingValue)} onUpdate={setValue}>
+                        {values.map(({value, content}) => {
+                            return (
+                                <RadioButton.Option value={value} key={value}>
+                                    {content}
+                                </RadioButton.Option>
+                            );
+                        })}
+                    </RadioButton>
+                );
+            }
+
+            default:
+                return null;
+        }
+    };
+
+    return (
+        <Settings.Item title={title} renderTitleComponent={renderTitleComponent}>
+            {getSettingsElement(type)}
+        </Settings.Item>
+    );
+};

package/dist/containers/UserSettings/UserSettings.tsx

@@ -1,15 +1,10 @@
-import {ReactNode} from 'react';
-import {connect} from 'react-redux';
 import cn from 'bem-cn-lite';
 
-import {RadioButton, Switch} from '@gravity-ui/uikit';
 import {Settings} from '@gravity-ui/navigation';
 
 import favoriteFilledIcon from '../../assets/icons/star.svg';
 import flaskIcon from '../../assets/icons/flask.svg';
 
-import {LabelWithPopover} from '../../components/LabelWithPopover/LabelWithPopover';
-
 import {
     ENABLE_QUERY_MODES_FOR_EXPLAIN,
     INVERTED_DISKS_KEY,
@@ -17,11 +12,11 @@ import {
     USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
 } from '../../utils/constants';
 
-import {setSettingValue} from '../../store/reducers/settings';
+import {Setting, SettingProps} from './Setting';
 
 import './UserSettings.scss';
 
-const b = cn('ydb-user-settings');
+export const b = cn('ydb-user-settings');
 
 enum Theme {
     light = 'light',
@@ -29,112 +24,79 @@ enum Theme {
     system = 'system',
 }
 
-function UserSettings(props: any) {
-    const _onThemeChangeHandler = (value: string) => {
-        props.setSettingValue(THEME_KEY, value);
-    };
-
-    const _onInvertedDisksChangeHandler = (value: boolean) => {
-        props.setSettingValue(INVERTED_DISKS_KEY, String(value));
-    };
-
-    const _onNodesEndpointChangeHandler = (value: boolean) => {
-        props.setSettingValue(USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY, String(value));
-    };
-
-    const _onExplainQueryModesChangeHandler = (value: boolean) => {
-        props.setSettingValue(ENABLE_QUERY_MODES_FOR_EXPLAIN, String(value));
-    };
-
-    const renderBreakNodesSettingsItem = (title: ReactNode) => {
-        return (
-            <LabelWithPopover
-                className={b('item-with-popup')}
-                contentClassName={b('popup')}
-                text={title}
-                popoverContent={
-                    'Use /viewer/json/nodes endpoint for Nodes Tab in diagnostics. It returns incorrect data on older versions'
-                }
-            />
-        );
-    };
+const themeValues = [
+    {
+        value: Theme.system,
+        content: 'System',
+    },
+    {
+        value: Theme.light,
+        content: 'Light',
+    },
+    {
+        value: Theme.dark,
+        content: 'Dark',
+    },
+];
+
+export enum SettingsSection {
+    general = 'general',
+    experiments = 'experiments',
+}
 
-    const renderEnableExplainQueryModesItem = (title: ReactNode) => {
-        return (
-            <LabelWithPopover
-                className={b('item-with-popup')}
-                contentClassName={b('popup')}
-                text={title}
-                popoverContent={
-                    'Enable script | scan query mode selector for both run and explain. May not work on some versions'
-                }
-            />
-        );
-    };
+interface UserSettingsProps {
+    settings?: Partial<Record<SettingsSection, SettingProps[]>>;
+}
 
+export const UserSettings = ({settings}: UserSettingsProps) => {
     return (
         <Settings>
             <Settings.Page
-                id="general"
+                id={SettingsSection.general}
                 title="General"
                 icon={{data: favoriteFilledIcon, height: 14, width: 14}}
             >
                 <Settings.Section title="General">
-                    <Settings.Item title="Interface theme">
-                        <RadioButton value={props.theme} onUpdate={_onThemeChangeHandler}>
-                            <RadioButton.Option value={Theme.system}>System</RadioButton.Option>
-                            <RadioButton.Option value={Theme.light}>Light</RadioButton.Option>
-                            <RadioButton.Option value={Theme.dark}>Dark</RadioButton.Option>
-                        </RadioButton>
-                    </Settings.Item>
+                    <Setting
+                        settingKey={THEME_KEY}
+                        title="Interface theme"
+                        type="radio"
+                        values={themeValues}
+                    />
+                    {settings?.[SettingsSection.general]?.map((setting) => (
+                        <Setting key={setting.settingKey} {...setting} />
+                    ))}
                 </Settings.Section>
             </Settings.Page>
-            <Settings.Page id="experiments" title="Experiments" icon={{data: flaskIcon}}>
+            <Settings.Page
+                id={SettingsSection.experiments}
+                title="Experiments"
+                icon={{data: flaskIcon}}
+            >
                 <Settings.Section title="Experiments">
-                    <Settings.Item title="Inverted disks space indicators">
-                        <Switch
-                            checked={props.invertedDisks}
-                            onUpdate={_onInvertedDisksChangeHandler}
-                        />
-                    </Settings.Item>
-                    <Settings.Item
-                        title="Break the Nodes tab in Diagnostics"
-                        renderTitleComponent={renderBreakNodesSettingsItem}
-                    >
-                        <Switch
-                            checked={props.useNodesEndpointInDiagnostics}
-                            onUpdate={_onNodesEndpointChangeHandler}
-                        />
-                    </Settings.Item>
-                    <Settings.Item
-                        title="Enable query modes for explain"
-                        renderTitleComponent={renderEnableExplainQueryModesItem}
-                    >
-                        <Switch
-                            checked={props.enableQueryModesForExplain}
-                            onUpdate={_onExplainQueryModesChangeHandler}
-                        />
-                    </Settings.Item>
+                    <Setting
+                        settingKey={INVERTED_DISKS_KEY}
+                        title={'Inverted disks space indicators'}
+                    />
+                    <Setting
+                        settingKey={USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY}
+                        title={'Break the Nodes tab in Diagnostics'}
+                        helpPopoverContent={
+                            'Use /viewer/json/nodes endpoint for Nodes Tab in diagnostics. It returns incorrect data on older versions'
+                        }
+                    />
+                    <Setting
+                        settingKey={ENABLE_QUERY_MODES_FOR_EXPLAIN}
+                        title={'Enable query modes for explain'}
+                        helpPopoverContent={
+                            'Enable script | scan query mode selector for both run and explain. May not work on some versions'
+                        }
+                    />
+                    {settings?.[SettingsSection.experiments]?.map((setting) => (
+                        <Setting key={setting.settingKey} {...setting} />
+                    ))}
                 </Settings.Section>
             </Settings.Page>
         </Settings>
     );
-}
-
-const mapStateToProps = (state: any) => {
-    const {theme, invertedDisks, useNodesEndpointInDiagnostics, enableQueryModesForExplain} =
-        state.settings.userSettings;
-
-    return {
-        theme,
-        invertedDisks: JSON.parse(invertedDisks),
-        useNodesEndpointInDiagnostics: JSON.parse(useNodesEndpointInDiagnostics),
-        enableQueryModesForExplain: JSON.parse(enableQueryModesForExplain),
-    };
 };
-
-const mapDispatchToProps = {
-    setSettingValue,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(UserSettings);

package/dist/containers/Versions/GroupedNodesTree/GroupedNodesTree.scss

@@ -0,0 +1,59 @@
+@import '../../../styles/mixins.scss';
+
+.ydb-versions-grouped-node-tree {
+    $item-width: 100%;
+    $margin-size: 24px;
+
+    &_first-level {
+        margin-top: 10px;
+        margin-bottom: 10px;
+
+        border: 1px solid var(--yc-color-line-generic);
+        border-radius: 10px;
+    }
+
+    &__dt-wrapper {
+        position: relative;
+        z-index: 0;
+
+        overflow-x: auto;
+
+        margin-right: $margin-size;
+        margin-left: $margin-size;
+
+        @include freeze-nth-column(1);
+        @include freeze-nth-column(2, 80px);
+
+        @include table-styles;
+    }
+
+    .ydb-tree-view {
+        font-size: var(--yc-text-body-2-font-size);
+        line-height: var(--yc-text-body-2-line-height);
+
+        // Apply margin ignoring first element of the tree
+        .ydb-tree-view {
+            margin-left: $margin-size;
+        }
+    }
+
+    & .tree-view_item {
+        height: 40px;
+        margin: 0;
+
+        // By default tree is rendered with padding calculated based on level
+        // We replace padding with margin for correct hover
+        padding: 0 10px !important;
+
+        border: 0;
+        border-radius: 10px;
+    }
+
+    & .tree-view_children .tree-view_item {
+        width: $item-width;
+    }
+
+    & .yc-progress__stack {
+        cursor: pointer;
+    }
+}

package/dist/containers/Versions/GroupedNodesTree/GroupedNodesTree.tsx

@@ -0,0 +1,98 @@
+import {useState, useEffect} from 'react';
+import cn from 'bem-cn-lite';
+
+import {TreeView} from 'ydb-ui-components';
+
+import type {PreparedClusterNode} from '../../../store/reducers/clusterNodes/types';
+import type {VersionValue} from '../../../types/versions';
+
+import type {GroupedNodesItem} from '../types';
+import {NodesTreeTitle} from '../NodesTreeTitle/NodesTreeTitle';
+import {NodesTable} from '../NodesTable/NodesTable';
+
+import './GroupedNodesTree.scss';
+
+export const b = cn('ydb-versions-grouped-node-tree');
+
+interface GroupedNodesTreeProps {
+    title?: string;
+    nodes?: PreparedClusterNode[];
+    items?: GroupedNodesItem[];
+    expanded?: boolean;
+    versionColor?: string;
+    versionsValues?: VersionValue[];
+    level?: number;
+}
+
+export const GroupedNodesTree = ({
+    title,
+    nodes,
+    items,
+    expanded = false,
+    versionColor,
+    versionsValues,
+    level = 0,
+}: GroupedNodesTreeProps) => {
+    const [isOpened, toggleBlock] = useState(false);
+
+    useEffect(() => {
+        toggleBlock(expanded);
+    }, [expanded]);
+
+    const groupTitle = (
+        <NodesTreeTitle
+            title={title}
+            nodes={nodes}
+            items={items}
+            versionColor={versionColor}
+            versionsValues={versionsValues}
+        />
+    );
+
+    const toggleCollapsed = () => {
+        toggleBlock((value) => !value);
+    };
+
+    if (items) {
+        return (
+            <div className={b({'first-level': level === 0})}>
+                <TreeView
+                    key={title}
+                    name={groupTitle}
+                    collapsed={!isOpened}
+                    hasArrow={true}
+                    onClick={toggleCollapsed}
+                    onArrowClick={toggleCollapsed}
+                >
+                    {items.map((item, index) => (
+                        <GroupedNodesTree
+                            key={index}
+                            title={item.title}
+                            nodes={item.nodes}
+                            expanded={expanded}
+                            versionColor={item.versionColor}
+                            level={level + 1}
+                        />
+                    ))}
+                </TreeView>
+            </div>
+        );
+    }
+
+    return (
+        <div className={b({'first-level': level === 0})}>
+            <TreeView
+                key={title}
+                name={groupTitle}
+                collapsed={!isOpened}
+                hasArrow
+                onClick={toggleCollapsed}
+                onArrowClick={toggleCollapsed}
+            >
+                <div className={b('dt-wrapper')}>
+                    <NodesTable nodes={nodes || []} />
+                </div>
+            </TreeView>
+        </div>
+    );
+};

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;
+        }
+    }
+}