ydb-embedded-ui 4.3.0 → 4.4.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## [4.4.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.3.0...v4.4.0) (2023-05-25)
+
+
+### Features
+
+* add Versions ([#394](https://github.com/ydb-platform/ydb-embedded-ui/issues/394)) ([d5abb58](https://github.com/ydb-platform/ydb-embedded-ui/commit/d5abb586a127135c5756a3aa5076060c0dce3fba))
+* remove unsupported pages ([b2bc3b2](https://github.com/ydb-platform/ydb-embedded-ui/commit/b2bc3b22029679769bb0de73f2c33827028de8a8))
+
+
+### Bug Fixes
+
+* **ClusterInfo:** do not show response error on cancelled requests ([83501b5](https://github.com/ydb-platform/ydb-embedded-ui/commit/83501b50f0c266ba654858767ca89a2a3fa891ed))
+* **Cluster:** remove padding from cluster page ([8138823](https://github.com/ydb-platform/ydb-embedded-ui/commit/8138823a9d5d3dbd1f086fb0bb23265d7faa8025))
+* **Partitions:** fix columns titles ([4fe21a0](https://github.com/ydb-platform/ydb-embedded-ui/commit/4fe21a0dc149c7bca0611c74990756fbdc5fb273))
+* **Partitions:** update Select empty value ([a7df6d1](https://github.com/ydb-platform/ydb-embedded-ui/commit/a7df6d1c86224a4534fac048cebc61b6f5a78fde))
+* **UserSettings:** separate Setting, enable additional settings ([#396](https://github.com/ydb-platform/ydb-embedded-ui/issues/396)) ([e8a17a1](https://github.com/ydb-platform/ydb-embedded-ui/commit/e8a17a160c82212a181b1ef4e3b9f223db29907e))
+
 ## [4.3.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.2.1...v4.3.0) (2023-05-18)
 
 

package/dist/containers/App/Content.js

@@ -10,16 +10,13 @@ import routes, {createHref, CLUSTER_PAGES} from '../../routes';
 import Cluster from '../Cluster/Cluster';
 import Tenant from '../Tenant/Tenant';
 import Node from '../Node/Node';
-import Pdisk from '../Pdisk/Pdisk';
-import Group from '../Group/Group';
-import Pool from '../Pool/Pool';
 import {Tablet} from '../Tablet';
 import TabletsFilters from '../TabletsFilters/TabletsFilters';
 import ReduxTooltip from '../ReduxTooltip/ReduxTooltip';
 import Header from '../Header/Header';
 import AppIcons from '../AppIcons/AppIcons';
 
-import {getSettingValue} from '../../store/reducers/settings';
+import {getParsedSettingValue} from '../../store/reducers/settings';
 import {THEME_KEY} from '../../utils/constants';
 
 import './App.scss';
@@ -42,10 +39,7 @@ export function Content(props) {
                 <Switch>
                     <Route path={routes.cluster} component={Cluster} />
                     <Route path={routes.tenant} component={Tenant} />
-                    <Route path={routes.pdisk} component={Pdisk} />
                     <Route path={routes.node} component={Node} />
-                    <Route path={routes.group} component={Group} />
-                    <Route path={routes.pool} component={Pool} />
                     <Route path={routes.tablet} component={Tablet} />
                     <Route path={routes.tabletsFilters} component={TabletsFilters} />
                     <Redirect
@@ -106,7 +100,7 @@ ContentWrapper.propTypes = {
 
 function mapStateToProps(state) {
     return {
-        theme: getSettingValue(state, THEME_KEY),
+        theme: getParsedSettingValue(state, THEME_KEY),
         isAuthenticated: state.authentication.isAuthenticated,
         singleClusterMode: state.singleClusterMode,
     };

package/dist/containers/AsideNavigation/AsideNavigation.tsx

@@ -19,7 +19,7 @@ import userChecked from '../../assets/icons/user-check.svg';
 import settingsIcon from '../../assets/icons/settings.svg';
 import supportIcon from '../../assets/icons/support.svg';
 
-import UserSettings from '../UserSettings/UserSettings';
+import {UserSettings} from '../UserSettings/UserSettings';
 
 import routes, {createHref, CLUSTER_PAGES} from '../../routes';
 

package/dist/containers/Cluster/Cluster.scss

@@ -6,6 +6,10 @@
     padding: 0 20px;
     @include flex-container();
 
+    &_tab_cluster {
+        padding: 0px;
+    }
+
     &__tab {
         text-decoration: none;
 

package/dist/containers/Cluster/Cluster.tsx

@@ -1,15 +1,15 @@
+import {useRouteMatch} from 'react-router';
 import cn from 'bem-cn-lite';
-//@ts-ignore
+
+import type {AdditionalVersionsProps} from '../../types/additionalProps';
+import routes, {CLUSTER_PAGES} from '../../routes';
+
+import {ClusterInfo} from '../ClusterInfo/ClusterInfo';
 import Tenants from '../Tenants/Tenants';
-//@ts-ignore
 import {Nodes} from '../Nodes/Nodes';
-//@ts-ignore
 import Storage from '../Storage/Storage';
-import routes, {CLUSTER_PAGES} from '../../routes';
 
 import './Cluster.scss';
-import {useRouteMatch} from 'react-router';
-import ClusterInfo from '../../components/ClusterInfo/ClusterInfo';
 
 const b = cn('cluster');
 
@@ -17,6 +17,7 @@ interface ClusterProps {
     additionalClusterInfo?: any;
     additionalTenantsInfo?: any;
     additionalNodesInfo?: any;
+    additionalVersionsProps?: AdditionalVersionsProps;
 }
 
 function Cluster(props: ClusterProps) {
@@ -35,7 +36,12 @@ function Cluster(props: ClusterProps) {
                 return <Storage {...props} />;
             }
             case CLUSTER_PAGES.cluster.id: {
-                return <ClusterInfo additionalClusterInfo={props.additionalClusterInfo} />;
+                return (
+                    <ClusterInfo
+                        additionalClusterInfo={props.additionalClusterInfo}
+                        additionalVersionsProps={props.additionalVersionsProps}
+                    />
+                );
             }
             default: {
                 return null;
@@ -43,7 +49,7 @@ function Cluster(props: ClusterProps) {
         }
     };
 
-    return <div className={b()}>{renderRoutes()}</div>;
+    return <div className={b({tab: activeTab})}>{renderRoutes()}</div>;
 }
 
 export default Cluster;

package/dist/{components → containers}/ClusterInfo/ClusterInfo.scss

@@ -1,7 +1,25 @@
 @import '../../styles/mixins';
 
 .cluster-info {
+    $_: &;
+    $progress_width: 100%;
+
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+
     width: 100%;
+
+    font-size: var(--yc-text-body-2-font-size);
+    line-height: var(--yc-text-body-2-line-height);
+
+    &__header {
+        padding: 20px;
+
+        border-bottom: 1px solid var(--yc-color-line-generic);
+        background: var(--yc-color-base-background);
+    }
+
     &__loader {
         display: flex;
         justify-content: center;
@@ -69,4 +87,25 @@
 
         margin-left: 5px;
     }
+    &__progress-label {
+        margin: 0 10px 0 0;
+
+        font-weight: 200;
+    }
+
+    &__version-progress {
+        display: flex;
+        align-items: center;
+
+        width: $progress_width;
+        margin-top: 20px;
+
+        & .yc-progress {
+            width: $progress_width;
+        }
+    }
+
+    & .yc-progress__stack {
+        cursor: pointer;
+    }
 }

package/dist/containers/ClusterInfo/ClusterInfo.tsx

@@ -0,0 +1,207 @@
+import {useCallback, useEffect, useMemo} from 'react';
+import {useDispatch} from 'react-redux';
+import {useLocation} from 'react-router';
+import block from 'bem-cn-lite';
+import qs from 'qs';
+
+import {Link, Progress} from '@gravity-ui/uikit';
+
+import EntityStatus from '../../components/EntityStatus/EntityStatus';
+import ProgressViewer from '../../components/ProgressViewer/ProgressViewer';
+import InfoViewer, {InfoViewerItem} from '../../components/InfoViewer/InfoViewer';
+import {Tags} from '../../components/Tags';
+import {Tablet} from '../../components/Tablet';
+import {Icon} from '../../components/Icon';
+import {Loader} from '../../components/Loader';
+import {ResponseError} from '../../components/Errors/ResponseError';
+
+import type {AdditionalVersionsProps} from '../../types/additionalProps';
+import {hideTooltip, showTooltip} from '../../store/reducers/tooltip';
+import {getClusterInfo} from '../../store/reducers/cluster/cluster';
+import {getClusterNodes} from '../../store/reducers/clusterNodes/clusterNodes';
+import {backend, customBackend} from '../../store';
+import {setHeader} from '../../store/reducers/header';
+import {formatStorageValues} from '../../utils';
+import {useAutofetcher, useTypedSelector} from '../../utils/hooks';
+import {parseVersionsToVersionToColorMap, parseNodesToVersionsValues} from '../../utils/versions';
+import routes, {CLUSTER_PAGES, createHref} from '../../routes';
+
+import {Versions} from '../Versions/Versions';
+
+import {compareTablets} from './utils';
+
+import './ClusterInfo.scss';
+
+const b = block('cluster-info');
+
+interface ClusterInfoProps {
+    clusterTitle?: string;
+    additionalClusterInfo?: InfoViewerItem[];
+    additionalVersionsProps?: AdditionalVersionsProps;
+}
+
+export const ClusterInfo = ({
+    clusterTitle,
+    additionalClusterInfo = [],
+    additionalVersionsProps,
+}: ClusterInfoProps) => {
+    const dispatch = useDispatch();
+    const location = useLocation();
+
+    const queryParams = qs.parse(location.search, {
+        ignoreQueryPrefix: true,
+    });
+    const {clusterName} = queryParams;
+
+    const {data: cluster, loading, wasLoaded, error} = useTypedSelector((state) => state.cluster);
+    const {
+        nodes,
+        loading: nodesLoading,
+        wasLoaded: nodesWasLoaded,
+        error: nodesError,
+    } = useTypedSelector((state) => state.clusterNodes);
+    const singleClusterMode = useTypedSelector((state) => state.singleClusterMode);
+
+    useEffect(() => {
+        dispatch(
+            setHeader([
+                {
+                    text: CLUSTER_PAGES.cluster.title,
+                    link: createHref(routes.cluster, {activeTab: CLUSTER_PAGES.cluster.id}),
+                },
+            ]),
+        );
+    }, [dispatch]);
+
+    const fetchData = useCallback(() => {
+        dispatch(getClusterInfo(clusterName ? String(clusterName) : undefined));
+        dispatch(getClusterNodes());
+    }, [dispatch, clusterName]);
+
+    useAutofetcher(fetchData, [fetchData], true);
+
+    const versionToColor = useMemo(() => {
+        if (additionalVersionsProps?.getVersionToColorMap) {
+            return additionalVersionsProps?.getVersionToColorMap();
+        }
+        return parseVersionsToVersionToColorMap(cluster?.Versions);
+    }, [additionalVersionsProps, cluster]);
+
+    const versionsValues = useMemo(() => {
+        return parseNodesToVersionsValues(nodes, versionToColor);
+    }, [nodes, versionToColor]);
+
+    const onShowTooltip = (...args: Parameters<typeof showTooltip>) => {
+        dispatch(showTooltip(...args));
+    };
+
+    const onHideTooltip = () => {
+        dispatch(hideTooltip());
+    };
+
+    const getInfo = () => {
+        let link = backend + '/internal';
+
+        if (singleClusterMode && !customBackend) {
+            link = `/internal`;
+        }
+
+        const info: InfoViewerItem[] = [
+            {
+                label: 'Nodes',
+                value: (
+                    <ProgressViewer
+                        className={b('metric-field')}
+                        value={cluster?.NodesAlive}
+                        capacity={cluster?.NodesTotal}
+                    />
+                ),
+            },
+            {
+                label: 'Load',
+                value: (
+                    <ProgressViewer
+                        className={b('metric-field')}
+                        value={cluster?.LoadAverage}
+                        capacity={cluster?.NumberOfCpus}
+                    />
+                ),
+            },
+            {
+                label: 'Storage',
+                value: (
+                    <ProgressViewer
+                        className={b('metric-field')}
+                        value={cluster?.StorageUsed}
+                        capacity={cluster?.StorageTotal}
+                        formatValues={formatStorageValues}
+                    />
+                ),
+            },
+            {
+                label: 'Versions',
+                value: <div>{cluster?.Versions?.join(', ')}</div>,
+            },
+            ...additionalClusterInfo,
+            {
+                label: 'Internal viewer',
+                value: (
+                    <Link href={link} target="_blank">
+                        <Icon name="external" viewBox={'0 0 16 16'} width={16} height={16} />
+                    </Link>
+                ),
+            },
+        ];
+
+        return info;
+    };
+
+    if ((loading && !wasLoaded) || (nodesLoading && !nodesWasLoaded)) {
+        return <Loader size="l" />;
+    }
+
+    if (error || nodesError) {
+        return <ResponseError error={error || nodesError} />;
+    }
+
+    return (
+        <div className={b()}>
+            <div className={b('header')}>
+                <div className="info">
+                    <div className={b('common')}>
+                        <div className={b('url')}>
+                            <EntityStatus
+                                size="m"
+                                status={cluster?.Overall}
+                                name={clusterTitle ?? cluster?.Name ?? 'Unknown cluster'}
+                            />
+                        </div>
+
+                        {cluster?.DataCenters && <Tags tags={cluster?.DataCenters} />}
+
+                        <div className={b('system-tablets')}>
+                            {cluster?.SystemTablets &&
+                                cluster.SystemTablets.sort(compareTablets).map(
+                                    (tablet, tabletIndex) => (
+                                        <Tablet
+                                            onMouseEnter={onShowTooltip}
+                                            onMouseLeave={onHideTooltip}
+                                            key={tabletIndex}
+                                            tablet={tablet}
+                                        />
+                                    ),
+                                )}
+                        </div>
+                    </div>
+                    <InfoViewer dots={true} info={getInfo()} />
+                </div>
+                <div className={b('version-progress')}>
+                    <h3 className={b('progress-label')}>Versions</h3>
+                    <Progress value={100} stack={versionsValues} />
+                </div>
+            </div>
+
+            <Versions nodes={nodes} versionToColor={versionToColor} />
+        </div>
+    );
+};

package/dist/containers/ClusterInfo/utils.ts

@@ -0,0 +1,13 @@
+import {TTabletStateInfo, EType} from '../../types/api/tablet';
+
+export const compareTablets = (tablet1: TTabletStateInfo, tablet2: TTabletStateInfo) => {
+    if (tablet1.Type === EType.TxAllocator) {
+        return 1;
+    }
+
+    if (tablet2.Type === EType.TxAllocator) {
+        return -1;
+    }
+
+    return 0;
+};

package/dist/containers/Header/Header.tsx

@@ -1,16 +1,16 @@
 import React, {useEffect} from 'react';
-import {useDispatch, useSelector} from 'react-redux';
+import {useDispatch} from 'react-redux';
 import cn from 'bem-cn-lite';
-import {useHistory, useLocation} from 'react-router';
+import {useHistory} from 'react-router';
 import {Breadcrumbs, BreadcrumbsItem, Link} from '@gravity-ui/uikit';
 
 import Divider from '../../components/Divider/Divider';
 import {Icon} from '../../components/Icon';
 
-import {clusterName as clusterNameLocation, backend, customBackend} from '../../store';
-import {getClusterInfo} from '../../store/reducers/cluster/cluster';
+import {backend, customBackend} from '../../store';
 import {getHostInfo} from '../../store/reducers/host';
 import {HeaderItemType} from '../../store/reducers/header';
+import {useTypedSelector} from '../../utils/hooks';
 
 import './Header.scss';
 
@@ -31,26 +31,19 @@ interface HeaderProps {
 
 function Header({clusterName}: HeaderProps) {
     const dispatch = useDispatch();
-    const {data: host}: {data: {ClusterName?: string}} = useSelector((state: any) => state.host);
+
     const {singleClusterMode, header}: {singleClusterMode: boolean; header: HeaderItemType[]} =
-        useSelector((state: any) => state);
+        useTypedSelector((state) => state);
+    const {data: host} = useTypedSelector((state) => state.host);
 
-    const location = useLocation();
     const history = useHistory();
 
-    const {pathname} = location;
-
     useEffect(() => {
-        const isClustersPage = pathname.includes('/clusters');
-
-        if (!isClustersPage && !clusterName && !singleClusterMode) {
-            dispatch(getClusterInfo(clusterNameLocation));
-        }
         dispatch(getHostInfo());
-    }, []);
+    }, [dispatch]);
 
     const renderHeader = () => {
-        const clusterNameFinal = singleClusterMode ? host.ClusterName : clusterName;
+        const clusterNameFinal = singleClusterMode ? host?.ClusterName : clusterName;
 
         let link = backend + '/internal';
 

package/dist/containers/Nodes/Nodes.tsx

@@ -21,7 +21,7 @@ import {
     DEFAULT_TABLE_SETTINGS,
     USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
 } from '../../utils/constants';
-import {useAutofetcher, useTypedSelector} from '../../utils/hooks';
+import {useAutofetcher, useSetting, useTypedSelector} from '../../utils/hooks';
 import {AdditionalNodesInfo, isUnavailableNode, NodesUptimeFilterValues} from '../../utils/nodes';
 
 import {setHeader} from '../../store/reducers/header';
@@ -33,7 +33,7 @@ import {
     resetNodesState,
     getComputeNodes,
 } from '../../store/reducers/nodes';
-import {changeFilter, getSettingValue} from '../../store/reducers/settings';
+import {changeFilter} from '../../store/reducers/settings';
 import {hideTooltip, showTooltip} from '../../store/reducers/tooltip';
 
 import {isDatabaseEntityType} from '../Tenant/utils/schema';
@@ -72,14 +72,12 @@ export const Nodes = ({path, type, className, additionalNodesInfo = {}}: NodesPr
 
     const nodes = useTypedSelector(getFilteredPreparedNodesList);
 
-    const useNodesEndpoint = useTypedSelector((state) =>
-        getSettingValue(state, USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY),
-    );
+    const [useNodesEndpoint] = useSetting(USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY);
 
     const fetchNodes = useCallback(() => {
         // For not DB entities we always use /compute endpoint instead of /nodes
         // since /nodes can return data only for tenants
-        if (path && (!JSON.parse(useNodesEndpoint) || !isDatabaseEntityType(type))) {
+        if (path && (useNodesEndpoint || !isDatabaseEntityType(type))) {
             dispatch(getComputeNodes(path));
         } else {
             dispatch(getNodes({tenant: path}));

package/dist/containers/Storage/DiskStateProgressBar/DiskStateProgressBar.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
-import {useSelector} from 'react-redux';
 import cn from 'bem-cn-lite';
 
 import {INVERTED_DISKS_KEY} from '../../../utils/constants';
-import {getSettingValue} from '../../../store/reducers/settings';
+import {useSetting} from '../../../utils/hooks';
 
 import './DiskStateProgressBar.scss';
 
@@ -35,7 +34,7 @@ export function DiskStateProgressBar({
     severity,
     compact,
 }: DiskStateProgressBarProps) {
-    const inverted = useSelector((state) => JSON.parse(getSettingValue(state, INVERTED_DISKS_KEY)));
+    const [inverted] = useSetting<boolean | undefined>(INVERTED_DISKS_KEY);
 
     const renderAllocatedPercent = () => {
         if (compact) {

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

@@ -28,16 +28,16 @@ export const ReadSessionHeader = () => (
 export const WriteLagsHeader = () => (
     <LabelWithPopover
         className={b('lags')}
-        text={PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.READ_LAGS]}
-        popoverContent={<LagPopoverContent text={i18n('lagsPopover.readLags')} type="read" />}
+        text={PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.WRITE_LAGS]}
+        popoverContent={<LagPopoverContent text={i18n('lagsPopover.writeLags')} type="write" />}
     />
 );
 
 export const ReadLagsHeader = () => (
     <LabelWithPopover
         className={b('lags')}
-        text={PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.WRITE_LAGS]}
-        popoverContent={<LagPopoverContent text={i18n('lagsPopover.writeLags')} type="write" />}
+        text={PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.READ_LAGS]}
+        popoverContent={<LagPopoverContent text={i18n('lagsPopover.readLags')} type="read" />}
     />
 );
 

package/dist/containers/Tenant/Diagnostics/Partitions/Partitions.scss

@@ -16,6 +16,10 @@
         width: 220px;
     }
 
+    &__select-option_empty {
+        color: var(--yc-color-text-hint);
+    }
+
     &__search {
         @include search();
         &_partition {

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

@@ -113,7 +113,7 @@ export const Partitions = ({path}: PartitionsProps) => {
             selectedConsumer && consumers && !consumers.includes(selectedConsumer);
 
         if (isTopicWithoutConsumers || wrongSelectedConsumer) {
-            dispatch(setSelectedConsumer());
+            dispatch(setSelectedConsumer(''));
         }
     }, [dispatch, topicWasLoaded, selectedConsumer, consumers]);
 
@@ -125,7 +125,7 @@ export const Partitions = ({path}: PartitionsProps) => {
         setHiddenColumns(newHiddenColumns);
     };
 
-    const handleSelectedConsumerChange = (value?: string) => {
+    const handleSelectedConsumerChange = (value: string) => {
         dispatch(setSelectedConsumer(value));
     };
 

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}