ydb-embedded-ui 4.4.0 → 4.4.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [4.4.2](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.4.1...v4.4.2) (2023-05-29)
+
+
+### Bug Fixes
+
+* **Partitions:** fix offsets calculation ([#402](https://github.com/ydb-platform/ydb-embedded-ui/issues/402)) ([fd4741f](https://github.com/ydb-platform/ydb-embedded-ui/commit/fd4741f8761aa6aa9ec31681522c4d261a83273f))
+
+## [4.4.1](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.4.0...v4.4.1) (2023-05-25)
+
+
+### Bug Fixes
+
+* **Nodes:** fix endpoint setting ([#397](https://github.com/ydb-platform/ydb-embedded-ui/issues/397)) ([4aea8a2](https://github.com/ydb-platform/ydb-embedded-ui/commit/4aea8a2597909338e31ac51577989a4d82ec93cf))
+
 ## [4.4.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.3.0...v4.4.0) (2023-05-25)
 
 

package/dist/components/ProblemFilter/ProblemFilter.tsx

@@ -1,9 +1,10 @@
 import {RadioButton} from '@gravity-ui/uikit';
 
-import {ALL, PROBLEMS, IProblemFilterValues} from '../../utils/constants';
+import type {ValueOf} from '../../types/common';
+import {ProblemFilterValues} from '../../store/reducers/settings/settings';
 
 interface ProblemFilterProps {
-    value: IProblemFilterValues;
+    value: ValueOf<typeof ProblemFilterValues>;
     onChange: (value: string) => void;
     className?: string;
 }
@@ -11,8 +12,12 @@ interface ProblemFilterProps {
 export const ProblemFilter = ({value, onChange, className}: ProblemFilterProps) => {
     return (
         <RadioButton value={value} onUpdate={onChange} className={className}>
-            <RadioButton.Option value={ALL}>{ALL}</RadioButton.Option>
-            <RadioButton.Option value={PROBLEMS}>{PROBLEMS}</RadioButton.Option>
+            <RadioButton.Option value={ProblemFilterValues.ALL}>
+                {ProblemFilterValues.ALL}
+            </RadioButton.Option>
+            <RadioButton.Option value={ProblemFilterValues.PROBLEMS}>
+                {ProblemFilterValues.PROBLEMS}
+            </RadioButton.Option>
         </RadioButton>
     );
 };

package/dist/containers/App/Content.js

@@ -16,7 +16,7 @@ import ReduxTooltip from '../ReduxTooltip/ReduxTooltip';
 import Header from '../Header/Header';
 import AppIcons from '../AppIcons/AppIcons';
 
-import {getParsedSettingValue} from '../../store/reducers/settings';
+import {getParsedSettingValue} from '../../store/reducers/settings/settings';
 import {THEME_KEY} from '../../utils/constants';
 
 import './App.scss';

package/dist/containers/AsideNavigation/AsideNavigation.tsx

@@ -24,7 +24,7 @@ import {UserSettings} from '../UserSettings/UserSettings';
 import routes, {createHref, CLUSTER_PAGES} from '../../routes';
 
 import {logout} from '../../store/reducers/authentication';
-import {getSettingValue, setSettingValue} from '../../store/reducers/settings';
+import {getParsedSettingValue, setSettingValue} from '../../store/reducers/settings/settings';
 
 import {ASIDE_HEADER_COMPACT_KEY} from '../../utils/constants';
 
@@ -273,7 +273,7 @@ const mapStateToProps = (state: any) => {
 
     return {
         ydbUser,
-        compact: JSON.parse(getSettingValue(state, ASIDE_HEADER_COMPACT_KEY)),
+        compact: getParsedSettingValue(state, ASIDE_HEADER_COMPACT_KEY),
     };
 };
 

package/dist/containers/Nodes/Nodes.tsx

@@ -5,6 +5,7 @@ import {useDispatch} from 'react-redux';
 import DataTable from '@gravity-ui/react-data-table';
 
 import type {EPathType} from '../../types/api/schema';
+import type {ValueOf} from '../../types/common';
 
 import {AccessDenied} from '../../components/Errors/403';
 import {Illustration} from '../../components/Illustration';
@@ -16,11 +17,7 @@ import {EntitiesCount} from '../../components/EntitiesCount';
 
 import routes, {CLUSTER_PAGES, createHref} from '../../routes';
 
-import {
-    ALL,
-    DEFAULT_TABLE_SETTINGS,
-    USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
-} from '../../utils/constants';
+import {DEFAULT_TABLE_SETTINGS, USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY} from '../../utils/constants';
 import {useAutofetcher, useSetting, useTypedSelector} from '../../utils/hooks';
 import {AdditionalNodesInfo, isUnavailableNode, NodesUptimeFilterValues} from '../../utils/nodes';
 
@@ -33,7 +30,7 @@ import {
     resetNodesState,
     getComputeNodes,
 } from '../../store/reducers/nodes';
-import {changeFilter} from '../../store/reducers/settings';
+import {changeFilter, ProblemFilterValues} from '../../store/reducers/settings/settings';
 import {hideTooltip, showTooltip} from '../../store/reducers/tooltip';
 
 import {isDatabaseEntityType} from '../Tenant/utils/schema';
@@ -77,7 +74,7 @@ export const Nodes = ({path, type, className, additionalNodesInfo = {}}: NodesPr
     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 && (useNodesEndpoint || !isDatabaseEntityType(type))) {
+        if (path && (!useNodesEndpoint || !isDatabaseEntityType(type))) {
             dispatch(getComputeNodes(path));
         } else {
             dispatch(getNodes({tenant: path}));
@@ -104,7 +101,7 @@ export const Nodes = ({path, type, className, additionalNodesInfo = {}}: NodesPr
     };
 
     const handleProblemFilterChange = (value: string) => {
-        dispatch(changeFilter(value));
+        dispatch(changeFilter(value as ValueOf<typeof ProblemFilterValues>));
     };
 
     const handleUptimeFilterChange = (value: string) => {
@@ -148,7 +145,10 @@ export const Nodes = ({path, type, className, additionalNodesInfo = {}}: NodesPr
         });
 
         if (nodes && nodes.length === 0) {
-            if (problemFilter !== ALL || nodesUptimeFilter !== NodesUptimeFilterValues.All) {
+            if (
+                problemFilter !== ProblemFilterValues.ALL ||
+                nodesUptimeFilter !== NodesUptimeFilterValues.All
+            ) {
                 return <Illustration name="thumbsUp" width="200" />;
             }
         }

package/dist/containers/Tenant/Diagnostics/Network/Network.js

@@ -14,8 +14,7 @@ import {Illustration} from '../../../../components/Illustration';
 
 import {getNetworkInfo, setDataWasNotLoaded} from '../../../../store/reducers/network';
 import {hideTooltip, showTooltip} from '../../../../store/reducers/tooltip';
-import {ALL, PROBLEMS} from '../../../../utils/constants';
-import {changeFilter} from '../../../../store/reducers/settings';
+import {changeFilter, ProblemFilterValues} from '../../../../store/reducers/settings/settings';
 import {AutoFetcher} from '../../../../utils/autofetcher';
 import {getDefaultNodePath} from '../../../Node/NodePages';
 
@@ -178,8 +177,9 @@ class Network extends React.Component {
                                           }
 
                                           if (
-                                              (filter === PROBLEMS && capacity !== connected) ||
-                                              filter === ALL ||
+                                              (filter === ProblemFilterValues.PROBLEMS &&
+                                                  capacity !== connected) ||
+                                              filter === ProblemFilterValues.ALL ||
                                               isRight
                                           ) {
                                               problemNodesCount++;
@@ -218,8 +218,9 @@ class Network extends React.Component {
                                   }
 
                                   if (
-                                      (filter === PROBLEMS && capacity !== connected) ||
-                                      filter === ALL ||
+                                      (filter === ProblemFilterValues.PROBLEMS &&
+                                          capacity !== connected) ||
+                                      filter === ProblemFilterValues.ALL ||
                                       isRight
                                   ) {
                                       problemNodesCount++;
@@ -254,7 +255,7 @@ class Network extends React.Component {
             );
         });
 
-        if (filter === PROBLEMS && problemNodesCount === 0) {
+        if (filter === ProblemFilterValues.PROBLEMS && problemNodesCount === 0) {
             return <Illustration name="thumbsUp" width="200" />;
         } else {
             return result;

package/dist/containers/Tenant/ObjectGeneralTabs/ObjectGeneralTabs.tsx

@@ -8,7 +8,7 @@ import {Tabs} from '@gravity-ui/uikit';
 
 import routes, {createHref} from '../../../routes';
 import {TENANT_INITIAL_TAB_KEY} from '../../../utils/constants';
-import {setSettingValue} from '../../../store/reducers/settings';
+import {setSettingValue} from '../../../store/reducers/settings/settings';
 
 import {TenantTabsGroups, TENANT_GENERAL_TABS} from '../TenantPages';
 

package/dist/containers/Tenant/QueryEditor/QueryEditor.js

@@ -24,7 +24,7 @@ import {
     setMonacoHotKey,
 } from '../../../store/reducers/executeQuery';
 import {getExplainQuery, getExplainQueryAst} from '../../../store/reducers/explainQuery';
-import {getParsedSettingValue, setSettingValue} from '../../../store/reducers/settings';
+import {getParsedSettingValue, setSettingValue} from '../../../store/reducers/settings/settings';
 import {
     DEFAULT_IS_QUERY_RESULT_COLLAPSED,
     DEFAULT_SIZE_RESULT_PANE_KEY,

package/dist/containers/Tenants/Tenants.js

@@ -19,9 +19,13 @@ import routes, {CLUSTER_PAGES, createHref} from '../../routes';
 import {formatCPU, formatBytesToGigabyte, formatNumber} from '../../utils';
 import {hideTooltip, showTooltip} from '../../store/reducers/tooltip';
 import {withSearch} from '../../HOCS';
-import {ALL, DEFAULT_TABLE_SETTINGS, TENANT_INITIAL_TAB_KEY} from '../../utils/constants';
+import {DEFAULT_TABLE_SETTINGS, TENANT_INITIAL_TAB_KEY} from '../../utils/constants';
 import {getTenantsInfo} from '../../store/reducers/tenants/tenants';
-import {changeFilter, getSettingValue} from '../../store/reducers/settings';
+import {
+    changeFilter,
+    getSettingValue,
+    ProblemFilterValues,
+} from '../../store/reducers/settings/settings';
 import {setHeader} from '../../store/reducers/header';
 
 import {clusterName} from '../../store';
@@ -63,7 +67,7 @@ class Tenants extends React.Component {
     };
 
     static filterTenants(tenants, filter) {
-        if (filter === ALL) {
+        if (filter === ProblemFilterValues.ALL) {
             return tenants;
         }
 
@@ -311,7 +315,7 @@ class Tenants extends React.Component {
             },
         ];
 
-        if (filteredTenants.length === 0 && filter !== ALL) {
+        if (filteredTenants.length === 0 && filter !== ProblemFilterValues.ALL) {
             return <Illustration name="thumbsUp" width="200" />;
         }
 

package/dist/containers/UserSettings/Setting.tsx

@@ -16,7 +16,7 @@ export interface SettingProps {
     title: string;
     settingKey: string;
     helpPopoverContent?: ReactNode;
-    values?: {value: string; content: string}[];
+    options?: {value: string; content: string}[];
     defaultValue?: unknown;
 }
 
@@ -25,7 +25,7 @@ export const Setting = ({
     settingKey,
     title,
     helpPopoverContent,
-    values,
+    options,
     defaultValue,
 }: SettingProps) => {
     const [settingValue, setValue] = useSetting(settingKey, defaultValue);
@@ -52,13 +52,13 @@ export const Setting = ({
             }
 
             case 'radio': {
-                if (!values) {
+                if (!options) {
                     return null;
                 }
 
                 return (
                     <RadioButton value={String(settingValue)} onUpdate={setValue}>
-                        {values.map(({value, content}) => {
+                        {options.map(({value, content}) => {
                             return (
                                 <RadioButton.Option value={value} key={value}>
                                     {content}

package/dist/containers/UserSettings/UserSettings.tsx

@@ -2,101 +2,39 @@ import cn from 'bem-cn-lite';
 
 import {Settings} from '@gravity-ui/navigation';
 
-import favoriteFilledIcon from '../../assets/icons/star.svg';
-import flaskIcon from '../../assets/icons/flask.svg';
-
-import {
-    ENABLE_QUERY_MODES_FOR_EXPLAIN,
-    INVERTED_DISKS_KEY,
-    THEME_KEY,
-    USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
-} from '../../utils/constants';
-
-import {Setting, SettingProps} from './Setting';
+import {YDBEmbeddedUISettings, settings} from './settings';
+import {Setting} from './Setting';
 
 import './UserSettings.scss';
 
 export const b = cn('ydb-user-settings');
 
-enum Theme {
-    light = 'light',
-    dark = 'dark',
-    system = 'system',
-}
-
-const themeValues = [
-    {
-        value: Theme.system,
-        content: 'System',
-    },
-    {
-        value: Theme.light,
-        content: 'Light',
-    },
-    {
-        value: Theme.dark,
-        content: 'Dark',
-    },
-];
-
-export enum SettingsSection {
-    general = 'general',
-    experiments = 'experiments',
-}
-
 interface UserSettingsProps {
-    settings?: Partial<Record<SettingsSection, SettingProps[]>>;
+    settings?: YDBEmbeddedUISettings;
 }
 
-export const UserSettings = ({settings}: UserSettingsProps) => {
+export const UserSettings = ({settings: userSettings = settings}: UserSettingsProps) => {
     return (
         <Settings>
-            <Settings.Page
-                id={SettingsSection.general}
-                title="General"
-                icon={{data: favoriteFilledIcon, height: 14, width: 14}}
-            >
-                <Settings.Section title="General">
-                    <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={SettingsSection.experiments}
-                title="Experiments"
-                icon={{data: flaskIcon}}
-            >
-                <Settings.Section title="Experiments">
-                    <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>
+            {userSettings.map((page) => {
+                const {id, title, icon, sections = []} = page;
+
+                return (
+                    <Settings.Page key={id} id={id} title={title} icon={icon}>
+                        {sections.map((section) => {
+                            const {title: sectionTitle, settings: sectionSettings = []} = section;
+
+                            return (
+                                <Settings.Section key={id} title={sectionTitle}>
+                                    {sectionSettings.map((setting) => {
+                                        return <Setting key={setting.settingKey} {...setting} />;
+                                    })}
+                                </Settings.Section>
+                            );
+                        })}
+                    </Settings.Page>
+                );
+            })}
         </Settings>
     );
 };

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/UserSettings/settings.ts

@@ -0,0 +1,91 @@
+import type {IconProps} from '@gravity-ui/uikit';
+
+import favoriteFilledIcon from '../../assets/icons/star.svg';
+import flaskIcon from '../../assets/icons/flask.svg';
+
+import {
+    ENABLE_QUERY_MODES_FOR_EXPLAIN,
+    INVERTED_DISKS_KEY,
+    THEME_KEY,
+    USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
+} from '../../utils/constants';
+
+import type {SettingProps} from './Setting';
+import i18n from './i18n';
+
+export interface SettingsSection {
+    id: string;
+    title: string;
+    settings: SettingProps[];
+}
+
+export interface SettingsPage {
+    id: string;
+    title: string;
+    icon: IconProps;
+    sections: SettingsSection[];
+}
+
+export type YDBEmbeddedUISettings = SettingsPage[];
+
+const themeOptions = [
+    {
+        value: 'system',
+        content: i18n('settings.theme.option-system'),
+    },
+    {
+        value: 'light',
+        content: i18n('settings.theme.option-light'),
+    },
+    {
+        value: 'dark',
+        content: i18n('settings.theme.option-dark'),
+    },
+];
+
+export const themeSetting: SettingProps = {
+    settingKey: THEME_KEY,
+    title: i18n('settings.theme.title'),
+    type: 'radio',
+    options: themeOptions,
+};
+export const invertedDisksSetting: SettingProps = {
+    settingKey: INVERTED_DISKS_KEY,
+    title: i18n('settings.invertedDisks.title'),
+};
+export const useNodesEndpointSetting: SettingProps = {
+    settingKey: USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
+    title: i18n('settings.useNodesEndpoint.title'),
+    helpPopoverContent: i18n('settings.useNodesEndpoint.popover'),
+};
+export const enableQueryModesForExplainSetting: SettingProps = {
+    settingKey: ENABLE_QUERY_MODES_FOR_EXPLAIN,
+    title: i18n('settings.enableQueryModesForExplain.title'),
+    helpPopoverContent: i18n('settings.enableQueryModesForExplain.popover'),
+};
+
+export const generalSection: SettingsSection = {
+    id: 'generalSection',
+    title: i18n('section.general'),
+    settings: [themeSetting],
+};
+export const experimentsSection: SettingsSection = {
+    id: 'experimentsSection',
+    title: i18n('section.experiments'),
+    settings: [invertedDisksSetting, useNodesEndpointSetting, enableQueryModesForExplainSetting],
+};
+
+export const generalPage: SettingsPage = {
+    id: 'generalPage',
+    title: i18n('page.general'),
+    icon: {data: favoriteFilledIcon, height: 14, width: 14},
+    sections: [generalSection],
+};
+export const experimentsPage: SettingsPage = {
+    id: 'experimentsPage',
+    title: i18n('page.experiments'),
+    icon: {data: flaskIcon},
+    sections: [experimentsSection],
+};
+
+export const settings: YDBEmbeddedUISettings = [generalPage, experimentsPage];

package/dist/store/reducers/index.ts

@@ -19,7 +19,7 @@ import partitions from './partitions/partitions';
 import executeQuery from './executeQuery';
 import explainQuery from './explainQuery';
 import tabletsFilters from './tabletsFilters';
-import settings from './settings';
+import settings from './settings/settings';
 import preview from './preview';
 import nodesList from './nodesList';
 import describe from './describe';

package/dist/store/reducers/nodes.ts

@@ -3,7 +3,7 @@ import {createSelector, Selector} from 'reselect';
 import {escapeRegExp} from 'lodash/fp';
 
 import '../../services/api';
-import {ALL, HOUR_IN_SECONDS, IProblemFilterValues} from '../../utils/constants';
+import {HOUR_IN_SECONDS} from '../../utils/constants';
 import {calcUptime, calcUptimeInSeconds} from '../../utils';
 import {NodesUptimeFilterValues} from '../../utils/nodes';
 import type {
@@ -14,9 +14,11 @@ import type {
     INodesRootStateSlice,
     INodesState,
 } from '../../types/store/nodes';
+import type {ValueOf} from '../../types/common';
 import {EFlag} from '../../types/api/enums';
 
 import {createRequestActionTypes, createApiRequest} from '../utils';
+import {ProblemFilterValues} from './settings/settings';
 
 export const FETCH_NODES = createRequestActionTypes('nodes', 'FETCH_NODES');
 
@@ -178,9 +180,9 @@ const getNodesList = (state: INodesRootStateSlice) => state.nodes.data;
 
 const filterNodesByProblemsStatus = (
     nodesList: INodesPreparedEntity[] = [],
-    problemFilter: IProblemFilterValues,
+    problemFilter: ValueOf<typeof ProblemFilterValues>,
 ) => {
-    if (problemFilter === ALL) {
+    if (problemFilter === ProblemFilterValues.ALL) {
         return nodesList;
     }
 

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

@@ -57,7 +57,7 @@ export const prepareConsumerPartitions = (
         const {partition_id = '0', partition_stats, partition_consumer_stats} = partition;
 
         const preparedPartitionStats = prepareGeneralPartitionStats(partition_stats);
-        const endOffset = preparedPartitionStats;
+        const {endOffset} = preparedPartitionStats;
 
         const {
             last_read_offset = '0',

package/dist/store/reducers/{settings.js → settings/settings.ts}

@@ -1,5 +1,8 @@
+import type {Reducer} from 'redux';
+import type {ThunkAction} from 'redux-thunk';
+
+import type {ValueOf} from '../../../types/common';
 import {
-    ALL,
     SAVED_QUERIES_KEY,
     THEME_KEY,
     TENANT_INITIAL_TAB_KEY,
@@ -9,25 +12,38 @@ import {
     PARTITIONS_HIDDEN_COLUMNS_KEY,
     QUERY_INITIAL_MODE_KEY,
     ENABLE_QUERY_MODES_FOR_EXPLAIN,
-} from '../../utils/constants';
-import '../../services/api';
-import {getValueFromLS, parseJson} from '../../utils/utils';
-import {QueryModes} from '../../types/store/query';
+} from '../../../utils/constants';
+import '../../../services/api';
+import {getValueFromLS, parseJson} from '../../../utils/utils';
+import {QueryModes} from '../../../types/store/query';
+
+import type {RootState} from '..';
+import type {
+    SetSettingValueAction,
+    SettingsAction,
+    SettingsRootStateSlice,
+    SettingsState,
+} from './types';
 
 const CHANGE_PROBLEM_FILTER = 'settings/CHANGE_PROBLEM_FILTER';
-const SET_SETTING_VALUE = 'settings/SET_VALUE';
+export const SET_SETTING_VALUE = 'settings/SET_VALUE';
+
+export const ProblemFilterValues = {
+    ALL: 'All',
+    PROBLEMS: 'With problems',
+} as const;
 
 const userSettings = window.userSettings || {};
 const systemSettings = window.systemSettings || {};
 
-export function readSavedSettingsValue(key, defaultValue) {
+export function readSavedSettingsValue(key: string, defaultValue?: string) {
     const savedValue = window.web_version ? userSettings[key] : getValueFromLS(key);
 
     return savedValue ?? defaultValue;
 }
 
 export const initialState = {
-    problemFilter: ALL,
+    problemFilter: ProblemFilterValues.ALL,
     userSettings: {
         ...userSettings,
         [THEME_KEY]: readSavedSettingsValue(THEME_KEY, 'system'),
@@ -49,7 +65,7 @@ export const initialState = {
     systemSettings,
 };
 
-const settings = (state = initialState, action) => {
+const settings: Reducer<SettingsState, SettingsAction> = (state = initialState, action) => {
     switch (action.type) {
         case CHANGE_PROBLEM_FILTER:
             return {
@@ -74,7 +90,10 @@ const settings = (state = initialState, action) => {
     }
 };
 
-export const setSettingValue = (name, value) => {
+export const setSettingValue = (
+    name: string,
+    value: string,
+): ThunkAction<void, RootState, unknown, SetSettingValueAction> => {
     return (dispatch, getState) => {
         dispatch({type: SET_SETTING_VALUE, data: {name, value}});
         const {singleClusterMode} = getState();
@@ -86,7 +105,7 @@ export const setSettingValue = (name, value) => {
     };
 };
 
-export const getSettingValue = (state, name) => {
+export const getSettingValue = (state: SettingsRootStateSlice, name: string) => {
     return state.settings.userSettings[name];
 };
 
@@ -94,16 +113,16 @@ export const getSettingValue = (state, name) => {
  * Returns parsed settings value.
  * If value cannot be parsed, returns initially stored string
  */
-export const getParsedSettingValue = (state, name) => {
+export const getParsedSettingValue = (state: SettingsRootStateSlice, name: string) => {
     const value = state.settings.userSettings[name];
     return parseJson(value);
 };
 
-export const changeFilter = (filter) => {
+export const changeFilter = (filter: ValueOf<typeof ProblemFilterValues>) => {
     return {
         type: CHANGE_PROBLEM_FILTER,
         data: filter,
-    };
+    } as const;
 };
 
 export default settings;

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

@@ -0,0 +1,19 @@
+import type {ValueOf} from '../../../types/common';
+import {changeFilter, ProblemFilterValues, SET_SETTING_VALUE} from './settings';
+
+export interface SettingsState {
+    problemFilter: ValueOf<typeof ProblemFilterValues>;
+    userSettings: Record<string, string | undefined>;
+    systemSettings: Record<string, string | undefined>;
+}
+
+export type SetSettingValueAction = {
+    type: typeof SET_SETTING_VALUE;
+    data: {name: string; value: string};
+};
+
+export type SettingsAction = ReturnType<typeof changeFilter> | SetSettingValueAction;
+
+export interface SettingsRootStateSlice {
+    settings: SettingsState;
+}

package/dist/store/state-url-mapping.js

@@ -6,7 +6,7 @@ import {parseQuery} from 'redux-location-state/lib/parseQuery';
 import {LOCATION_PUSH, LOCATION_POP} from 'redux-location-state/lib/constants';
 import {getMatchingDeclaredPath} from 'redux-location-state/lib/helpers';
 
-import {initialState as initialSettingsState} from './reducers/settings';
+import {initialState as initialSettingsState} from './reducers/settings/settings';
 import {initialState as initialHeatmapState} from './reducers/heatmap';
 
 const paramSetup = {

package/dist/utils/constants.ts

@@ -75,11 +75,6 @@ export const COLORS_PRIORITY = {
     grey: 1,
 };
 
-export const ALL = 'All';
-export const PROBLEMS = 'With problems';
-
-export type IProblemFilterValues = typeof ALL | typeof PROBLEMS;
-
 export const THEME_KEY = 'theme';
 export const INVERTED_DISKS_KEY = 'invertedDisks';
 export const USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY = 'useNodesEndpointInDiagnostics';

package/dist/utils/hooks/useSetting.ts

@@ -1,7 +1,7 @@
 import {useCallback} from 'react';
 import {useDispatch} from 'react-redux';
 
-import {getParsedSettingValue, setSettingValue} from '../../store/reducers/settings';
+import {getParsedSettingValue, setSettingValue} from '../../store/reducers/settings/settings';
 
 import {useTypedSelector} from './useTypedSelector';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "4.4.0",
+  "version": "4.4.2",
   "files": [
     "dist"
   ],