ydb-embedded-ui 4.3.0 → 4.4.1

package/dist/containers/Tenant/Diagnostics/Partitions/PartitionsControls/PartitionsControls.tsx

@@ -2,7 +2,7 @@ import {useEffect, useMemo, useState} from 'react';
 import {escapeRegExp} from 'lodash/fp';
 
 import {TableColumnSetupItem} from '@gravity-ui/uikit/build/esm/components/Table/hoc/withTableSettings/withTableSettings';
-import {Select, TableColumnSetup} from '@gravity-ui/uikit';
+import {Select, SelectOption, TableColumnSetup} from '@gravity-ui/uikit';
 
 import type {ValueOf} from '../../../../../types/common';
 
@@ -15,8 +15,8 @@ import {b} from '../Partitions';
 
 interface PartitionsControlsProps {
     consumers: string[] | undefined;
-    selectedConsumer: string | undefined;
-    onSelectedConsumerChange: (consumer: string | undefined) => void;
+    selectedConsumer: string;
+    onSelectedConsumerChange: (consumer: string) => void;
     selectDisabled: boolean;
     partitions: PreparedPartitionDataWithHosts[] | undefined;
     onSearchChange: (filteredPartitions: PreparedPartitionDataWithHosts[]) => void;
@@ -39,9 +39,6 @@ export const PartitionsControls = ({
     const [generalSearchValue, setGeneralSearchValue] = useState('');
     const [partitionIdSearchValue, setPartitionIdSearchValue] = useState('');
 
-    // Manual select control to enforce single-select behaviour for multiple select type
-    const [consumerSelectOpen, setConsumerSelectOpen] = useState(false);
-
     useEffect(() => {
         if (!partitions) {
             return;
@@ -83,16 +80,17 @@ export const PartitionsControls = ({
         onSearchChange(filteredPartitions);
     }, [partitionIdSearchValue, generalSearchValue, partitions, onSearchChange]);
 
-    const consumersToSelect = useMemo(
-        () =>
-            consumers
+    const consumersToSelect = useMemo(() => {
+        const options =
+            consumers && consumers.length
                 ? consumers.map((consumer) => ({
                       value: consumer,
                       content: consumer,
                   }))
-                : undefined,
-        [consumers],
-    );
+                : [];
+
+        return [{value: '', content: i18n('controls.consumerSelector.emptyOption')}, ...options];
+    }, [consumers]);
 
     const columnsToSelect = useMemo(() => {
         return initialColumnsIds.map((id) => {
@@ -106,10 +104,7 @@ export const PartitionsControls = ({
     }, [initialColumnsIds, hiddenColumns]);
 
     const handleConsumerSelectChange = (value: string[]) => {
-        // As we have selector with multiple options, the first value corresponds to previous value
-        // The second value is currently chosen consumer
-        onSelectedConsumerChange(value[1]);
-        setConsumerSelectOpen(false);
+        onSelectedConsumerChange(value[0]);
     };
 
     const handlePartitionIdSearchChange = (value: string) => {
@@ -137,25 +132,24 @@ export const PartitionsControls = ({
         onHiddenColumnsChange(result);
     };
 
+    const renderOption = (option: SelectOption) => {
+        return (
+            <div className={b('select-option', {empty: option.value === ''})}>{option.content}</div>
+        );
+    };
+
     return (
         <div className={b('controls')}>
             <Select
                 className={b('consumer-select')}
-                placeholder={i18n('controls.consumerSelector.placeholder')}
                 label={i18n('controls.consumerSelector')}
                 options={consumersToSelect}
-                value={[selectedConsumer || '']}
+                value={[selectedConsumer]}
                 onUpdate={handleConsumerSelectChange}
                 filterable={consumers && consumers.length > 5}
                 disabled={selectDisabled || !consumers || !consumers.length}
-                open={consumerSelectOpen}
-                onOpenChange={setConsumerSelectOpen}
-                // Although only one value could be selected
-                // Multiple type Select is used
-                // The reason - we need Select to be able to work with no value
-                // And it is easier to make multiple Select close on value change
-                // Than to enable single select to work with empty values
-                multiple
+                renderOption={renderOption}
+                renderSelectedOption={renderOption}
             />
             <Search
                 onChange={handlePartitionIdSearchChange}

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,12 @@ import {
     USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
 } from '../../utils/constants';
 
-import {setSettingValue} from '../../store/reducers/settings';
+import {Setting, SettingProps} from './Setting';
+import i18n from './i18n';
 
 import './UserSettings.scss';
 
-const b = cn('ydb-user-settings');
+export const b = cn('ydb-user-settings');
 
 enum Theme {
     light = 'light',
@@ -29,112 +25,75 @@ 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: i18n('settings.theme.option-system'),
+    },
+    {
+        value: Theme.light,
+        content: i18n('settings.theme.option-light'),
+    },
+    {
+        value: Theme.dark,
+        content: i18n('settings.theme.option-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"
-                title="General"
+                id={SettingsSection.general}
+                title={i18n('page.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>
+                <Settings.Section title={i18n('section.general')}>
+                    <Setting
+                        settingKey={THEME_KEY}
+                        title={i18n('settings.theme.title')}
+                        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.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>
+            <Settings.Page
+                id={SettingsSection.experiments}
+                title={i18n('page.experiments')}
+                icon={{data: flaskIcon}}
+            >
+                <Settings.Section title={i18n('section.experiments')}>
+                    <Setting
+                        settingKey={INVERTED_DISKS_KEY}
+                        title={i18n('settings.invertedDisks.title')}
+                    />
+                    <Setting
+                        settingKey={USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY}
+                        title={i18n('settings.useNodesEndpoint.title')}
+                        helpPopoverContent={i18n('settings.useNodesEndpoint.popover')}
+                    />
+                    <Setting
+                        settingKey={ENABLE_QUERY_MODES_FOR_EXPLAIN}
+                        title={i18n('settings.enableQueryModesForExplain.title')}
+                        helpPopoverContent={i18n('settings.enableQueryModesForExplain.popover')}
+                    />
+                    {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/UserSettings/i18n/en.json

@@ -0,0 +1,20 @@
+{
+  "page.general": "General",
+  "section.general": "General",
+
+  "page.experiments": "Experiments",
+  "section.experiments": "Experiments",
+
+  "settings.theme.title": "Interface theme",
+  "settings.theme.option-dark": "Dark",
+  "settings.theme.option-light": "Light",
+  "settings.theme.option-system": "System",
+
+  "settings.invertedDisks.title": "Inverted disks space indicators",
+
+  "settings.useNodesEndpoint.title": "Break the Nodes tab in Diagnostics",
+  "settings.useNodesEndpoint.popover": "Use /viewer/json/nodes endpoint for Nodes Tab in diagnostics. It returns incorrect data on versions before 23-1",
+
+  "settings.enableQueryModesForExplain.title": "Enable query modes for explain",
+  "settings.enableQueryModesForExplain.popover": "Enable script | scan query mode selector for both run and explain. May not work on versions before 23-2"
+}

package/dist/containers/UserSettings/i18n/index.ts

@@ -0,0 +1,11 @@
+import {i18n, Lang} from '../../../utils/i18n';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const COMPONENT = 'ydb-user-settings';
+
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
+
+export default i18n.keyset(COMPONENT);

package/dist/containers/UserSettings/i18n/ru.json

@@ -0,0 +1,20 @@
+{
+  "page.general": "Общие",
+  "section.general": "Общие",
+
+  "page.experiments": "Эксперименты",
+  "section.experiments": "Эксперименты",
+
+  "settings.theme.title": "Тема",
+  "settings.theme.option-dark": "Тёмная",
+  "settings.theme.option-light": "Светлая",
+  "settings.theme.option-system": "Системная",
+
+  "settings.invertedDisks.title": "Инвертированные индикаторы места на дисках",
+
+  "settings.useNodesEndpoint.title": "Сломать вкладку Nodes в диагностике",
+  "settings.useNodesEndpoint.popover": "Использовать эндпоинт /viewer/json/nodes для вкладки Nodes в диагностике. Может возвращать некорректные данные на версиях до 23-1",
+
+  "settings.enableQueryModesForExplain.title": "Включить режимы выполнения запроса для explain",
+  "settings.enableQueryModesForExplain.popover": "Включить общий переключатель script | scan для run и explain. Может работать некорректно на версиях до 23-2"
+}

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