ydb-embedded-ui 1.12.2 → 1.13.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## [1.13.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.12.2...v1.13.0) (2022-09-01)
+
+
+### Features
+
+* **Storage:** add usage filter component ([a35067f](https://github.com/ydb-platform/ydb-embedded-ui/commit/a35067f8c34ad5d3faf4fb9381c0d6023df9afbd))
+* **Storage:** usage filter ([276f027](https://github.com/ydb-platform/ydb-embedded-ui/commit/276f0270a458601929624a4872ec81e001931853))
+
+
+### Bug Fixes
+
+* **Storage:** properly debounce text input filter ([bc5e8fd](https://github.com/ydb-platform/ydb-embedded-ui/commit/bc5e8fd7b067b850f0376b55d995213292b8a31e))
+* **Storage:** use current list size for counter ([e6fea58](https://github.com/ydb-platform/ydb-embedded-ui/commit/e6fea58b075de4c35ad8a60d339417c1e7204d83))
+* **Tenant:** move general tabs outside navigation ([5bf21ea](https://github.com/ydb-platform/ydb-embedded-ui/commit/5bf21eac6f38c0392c8dc6e04be1b6fd0e147064))
+
 ## [1.12.2](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.12.1...v1.12.2) (2022-08-29)
 
 

package/dist/containers/Storage/Storage.js

@@ -5,7 +5,8 @@ import cn from 'bem-cn-lite';
 import DataTable from '@yandex-cloud/react-data-table';
 import {RadioButton, Label} from '@yandex-cloud/uikit';
 
-import StorageFilter from './StorageFilter/StorageFilter';
+import {StorageFilter} from './StorageFilter';
+import {UsageFilter} from './UsageFilter';
 import {AutoFetcher} from '../../utils/autofetcher';
 import {TableSkeleton} from '../../components/TableSkeleton/TableSkeleton';
 
@@ -16,12 +17,14 @@ import {
     VisibleEntities,
     setVisibleEntities,
     setStorageFilter,
+    setUsageFilter,
     getNodesObject,
     StorageTypes,
     setStorageType,
     VisibleEntitiesTitles,
     getStoragePoolsGroupsCount,
     getStorageNodesCount,
+    getUsageFilterOptions,
 } from '../../store/reducers/storage';
 import {getNodesList} from '../../store/reducers/clusterNodes';
 import StorageGroups from './StorageGroups/StorageGroups';
@@ -211,6 +214,7 @@ class Storage extends React.Component {
             storageType,
             groupsCount,
             nodesCount,
+            flatListStorageEntities,
             loading,
             wasLoaded,
         } = this.props;
@@ -223,10 +227,10 @@ class Storage extends React.Component {
             return label;
         }
 
-        if (count.total === count.found) {
+        if (count.total === flatListStorageEntities.length) {
             label += count.total;
         } else {
-            label += `${count.found} of ${count.total}`;
+            label += `${flatListStorageEntities.length} of ${count.total}`;
         }
 
         return label;
@@ -234,17 +238,22 @@ class Storage extends React.Component {
 
     renderControls() {
         const {
+            filter,
             setStorageFilter,
             visibleEntities,
             storageType,
+            usageFilter,
+            setUsageFilter,
+            usageFilterOptions,
         } = this.props;
 
         return (
             <div className={b('controls')}>
                 <div className={b('search')}>
                     <StorageFilter
-                        changeReduxStorageFilter={setStorageFilter}
-                        storageType={storageType}
+                        placeholder={storageType === StorageTypes.groups ? 'Group ID, Pool name' : 'Node ID, FQDN'}
+                        onChange={setStorageFilter}
+                        value={filter}
                     />
                 </div>
                 <RadioButton value={visibleEntities} onUpdate={this.onGroupVisibilityChange}>
@@ -267,6 +276,16 @@ class Storage extends React.Component {
                         {StorageTypes.nodes}
                     </RadioButton.Option>
                 </RadioButton>
+
+                {storageType === StorageTypes.groups && (
+                    <UsageFilter
+                        value={usageFilter}
+                        onChange={setUsageFilter}
+                        groups={usageFilterOptions}
+                        disabled={usageFilterOptions.length === 0}
+                    />
+                )}
+
                 <Label theme="info" size="m">
                     {this.renderEntitiesCount()}
                 </Label>
@@ -302,6 +321,7 @@ function mapStateToProps(state) {
         visible: visibleEntities,
         type: storageType,
         filter,
+        usageFilter,
     } = state.storage;
 
     return {
@@ -316,6 +336,8 @@ function mapStateToProps(state) {
         visibleEntities,
         storageType,
         filter,
+        usageFilter,
+        usageFilterOptions: getUsageFilterOptions(state),
     };
 }
 
@@ -323,6 +345,7 @@ const mapDispatchToProps = {
     getStorageInfo,
     setInitialState,
     setStorageFilter,
+    setUsageFilter,
     setVisibleEntities: setVisibleEntities,
     getNodesList,
     setStorageType,

package/dist/containers/Storage/StorageFilter/StorageFilter.tsx

@@ -0,0 +1,52 @@
+import {useEffect, useRef, useState} from 'react';
+
+import {TextInput} from '@yandex-cloud/uikit';
+
+interface StorageFilterProps {
+    className?: string;
+    value?: string;
+    placeholder?: string;
+    onChange?: (value: string) => void;
+    debounce?: number;
+}
+
+export const StorageFilter = (props: StorageFilterProps) => {
+    const {
+        className,
+        value = '',
+        placeholder,
+        onChange,
+        debounce = 200,
+    } = props;
+    const [filterValue, setFilterValue] = useState(value);
+    const timer = useRef<number>();
+
+    useEffect(() => {
+        setFilterValue((prevValue) => {
+            if (prevValue !== value) {
+                return value;
+            }
+
+            return prevValue;
+        });
+    }, [value]);
+
+    const changeFilter = (newValue: string) => {
+        setFilterValue(newValue);
+
+        window.clearTimeout(timer.current);
+        timer.current = window.setTimeout(() => {
+            onChange?.(newValue);
+        }, debounce);
+    };
+
+    return (
+        <TextInput
+            className={className}
+            placeholder={placeholder}
+            value={filterValue}
+            onUpdate={changeFilter}
+            hasClear
+        />
+    );
+}

package/dist/containers/Storage/StorageFilter/index.ts

@@ -0,0 +1 @@
+export * from './StorageFilter';

package/dist/containers/Storage/StorageGroups/StorageGroups.tsx

@@ -14,9 +14,10 @@ import {VisibleEntities} from '../../../store/reducers/storage';
 import {bytesToGB, bytesToSpeed} from '../../../utils/utils';
 //@ts-ignore
 import {stringifyVdiskId} from '../../../utils';
+import {getUsage, isFullDonorData} from '../../../utils/storage';
 
 import Vdisk from '../Vdisk/Vdisk';
-import {isFullDonorData, getDegradedSeverity, getUsageSeverity, getUsage} from '../utils';
+import {getDegradedSeverity, getUsageSeverity} from '../utils';
 
 import './StorageGroups.scss';
 

package/dist/containers/Storage/UsageFilter/UsageFilter.scss

@@ -0,0 +1,31 @@
+.usage-filter {
+    &__option {
+        flex-grow: 1;
+
+        &-title {
+            height: var(--yc-text-body-1-line-height);
+
+            font-size: var(--yc-text-body-1-font-size);
+            line-height: var(--yc-text-body-1-line-height);
+        }
+
+        &-meta {
+            padding: 0 5px;
+            position: relative;
+            border-radius: 3px;
+            font-size: var(--yc-text-caption-2-font-size);
+            line-height: var(--yc-text-caption-2-line-height);
+        }
+
+        &-bar {
+            position: absolute;
+            left: 0;
+            top: 0;
+            bottom: 0;
+            z-index: -1;
+
+            background-color: var(--yc-color-infographics-info-medium);
+            border-radius: 3px;
+        }
+    }
+}

package/dist/containers/Storage/UsageFilter/UsageFilter.tsx

@@ -0,0 +1,100 @@
+import {useEffect, useMemo, useRef, useState} from 'react';
+import cn from 'bem-cn-lite';
+
+import {Select, SelectOption} from '@yandex-cloud/uikit';
+
+import EntityStatus from "../../../components/EntityStatus/EntityStatus";
+
+import {getUsageSeverityForEntityStatus} from '../utils';
+
+import i18n from './i18n';
+import './UsageFilter.scss';
+
+interface UsageFilterItem {
+    threshold: number;
+    count: number;
+}
+
+interface UsageFilterProps {
+    className?: string;
+    value?: string[];
+    groups?: UsageFilterItem[];
+    onChange?: (value: string[]) => void;
+    debounce?: number;
+    disabled?: boolean;
+}
+
+const b = cn('usage-filter');
+
+export const UsageFilter = (props: UsageFilterProps) => {
+    const {
+        className,
+        value = [],
+        groups = [],
+        onChange,
+        debounce = 200,
+        disabled,
+    } = props;
+
+    const [filterValue, setFilterValue] = useState(value);
+    const timer = useRef<number>();
+
+    useEffect(() => {
+        // sync inner state with external value
+        setFilterValue((prevValue) => {
+            if (prevValue.join(',') !== value.join(',')) {
+                return value;
+            }
+
+            return prevValue;
+        });
+    }, [value]);
+
+    const options = useMemo(() => groups.map(({threshold, count}) => ({
+        value: String(threshold),
+        text: `${threshold}%`,
+        data: {count}
+    })), [groups]);
+
+    const handleUpdate = (newValue: string[]) => {
+        setFilterValue(newValue);
+
+        window.clearTimeout(timer.current);
+        timer.current = window.setTimeout(() => {
+            onChange?.(newValue);
+        }, debounce);
+    };
+
+    const maxWidth = Math.max(...groups.map(({count}) => count));
+
+    const renderOption = ({value, data, text}: SelectOption) => (
+        <div className={b('option')}>
+            <EntityStatus
+                className={b('option-title')}
+                status={getUsageSeverityForEntityStatus(Number(value))}
+                name={text}
+                size="xs"
+            />
+            <div className={b('option-meta')}>
+                {i18n('groups_count', {count: data.count})}
+                <div className={b('option-bar')} style={{width: `${data.count / maxWidth * 100}%`}} />
+            </div>
+        </div>
+    );
+
+    return (
+        <Select
+            className={b(null, className)}
+            label={i18n('label')}
+            value={filterValue}
+            placeholder={i18n('default_value')}
+            options={options}
+            multiple
+            onUpdate={handleUpdate}
+            renderOption={renderOption}
+            getOptionHeight={() => 50}
+            popupWidth={280}
+            disabled={disabled}
+        />
+    );
+};

package/dist/containers/Storage/UsageFilter/i18n/en.json

@@ -0,0 +1,10 @@
+{
+    "label": "Usage:",
+    "default_value": "Any",
+    "groups_count": [
+        "{{count}} group",
+        "{{count}} groups",
+        "{{count}} groups",
+        "No groups"
+    ]
+}

package/dist/containers/Storage/UsageFilter/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-usage-filter';
+
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
+
+export default i18n.keyset(COMPONENT);

package/dist/containers/Storage/UsageFilter/i18n/ru.json

@@ -0,0 +1,10 @@
+{
+    "label": "Использование:",
+    "default_value": "Любое",
+    "groups_count": [
+        "{{count}} группа",
+        "{{count}} группы",
+        "{{count}} групп",
+        "Нет групп"
+    ]
+}

package/dist/containers/Storage/UsageFilter/index.ts

@@ -0,0 +1 @@
+export * from './UsageFilter';

package/dist/containers/Storage/utils/index.ts

@@ -1,33 +1,33 @@
-import type {TVDiskStateInfo, TVSlotId} from '../../../types/api/storage';
 import type {IStoragePoolGroup} from '../../../types/store/storage';
 
 export * from './constants';
 
-export const isFullDonorData = (donor: TVDiskStateInfo | TVSlotId): donor is TVDiskStateInfo =>
-    'VDiskId' in donor;
-
-const generateEvaluator = (warn: number, crit: number) =>
+const generateEvaluator = <
+    OkLevel extends string,
+    WarnLevel extends string,
+    CritLevel extends string
+>(warn: number, crit: number, levels: [OkLevel, WarnLevel, CritLevel]) =>
     (value: number) => {
         if (0 <= value && value < warn) {
-            return 'success';
+            return levels[0];
         }
 
         if (warn <= value && value < crit) {
-            return 'warning';
+            return levels[1];
         }
 
         if (crit <= value) {
-            return 'danger';
+            return levels[2];
         }
 
         return undefined;
     };
 
-const defaultDegradationEvaluator = generateEvaluator(1, 2);
+const defaultDegradationEvaluator = generateEvaluator(1, 2, ['success', 'warning', 'danger']);
 
 const degradationEvaluators = {
-    'block-4-2': generateEvaluator(1, 2),
-    'mirror-3-dc': generateEvaluator(1, 3),
+    'block-4-2': generateEvaluator(1, 2, ['success', 'warning', 'danger']),
+    'mirror-3-dc': generateEvaluator(1, 3, ['success', 'warning', 'danger']),
 };
 
 const canEvaluateErasureSpecies = (value?: string): value is keyof typeof degradationEvaluators =>
@@ -41,11 +41,5 @@ export const getDegradedSeverity = (group: IStoragePoolGroup) => {
     return evaluate(group.Missing);
 };
 
-export const getUsageSeverity = generateEvaluator(80, 85);
-
-export const getUsage = (data: IStoragePoolGroup, step = 1) => {
-    // if limit is 0, display 0
-    const usage = Math.round((data.Used * 100) / data.Limit) || 0;
-
-    return Math.floor(usage / step) * step;
-};
+export const getUsageSeverity = generateEvaluator(80, 85, ['success', 'warning', 'danger']);
+export const getUsageSeverityForEntityStatus = generateEvaluator(80, 85, ['Green', 'Yellow', 'Red']);

package/dist/containers/Tenant/ObjectGeneral/ObjectGeneral.scss

@@ -9,28 +9,6 @@
     height: 100%;
     max-height: 100%;
 
-    &__tabs {
-        display: flex;
-        gap: 20px;
-
-        padding: 13px 20px 0;
-
-        box-shadow: inset 0 -1px 0 0 var(--yc-color-line-generic);
-        .yc-tabs {
-            box-shadow: unset;
-        }
-    }
-    &__tab {
-        text-decoration: none;
-
-        // fix for bug in uikit, gap is set for yc-tabs__item:not(:last-child),
-        // it doesn't work for wrapped items
-        // feel free to remove if the bug is fixed
-        &:not(:last-child) {
-            margin-right: var(--yc-tabs-gap);
-        }
-    }
-
     &__loader {
         display: flex;
     }

package/dist/containers/Tenant/ObjectGeneral/ObjectGeneral.tsx

@@ -1,20 +1,15 @@
-import {connect} from 'react-redux';
-import {Link} from 'react-router-dom';
-import cn from 'bem-cn-lite';
-import {useLocation} from 'react-router';
 import qs from 'qs';
-import _ from 'lodash';
+import {useLocation} from 'react-router';
+import cn from 'bem-cn-lite';
+
+import {useThemeValue} from '@yandex-cloud/uikit';
+
+import type {EPathType} from '../../../types/api/schema';
 
-import {Tabs, useThemeValue} from '@yandex-cloud/uikit';
-//@ts-ignore
 import QueryEditor from '../QueryEditor/QueryEditor';
 import Diagnostics from '../Diagnostics/Diagnostics';
 
-import {TenantGeneralTabsIds, TenantTabsGroups, TENANT_GENERAL_TABS} from '../TenantPages';
-import routes, {createHref} from '../../../routes';
-import {setSettingValue} from '../../../store/reducers/settings';
-import {TENANT_INITIAL_TAB_KEY} from '../../../utils/constants';
-import type {EPathType} from '../../../types/api/schema';
+import {TenantGeneralTabsIds} from '../TenantPages';
 
 import './ObjectGeneral.scss';
 
@@ -24,7 +19,6 @@ interface ObjectGeneralProps {
     type?: EPathType;
     additionalTenantInfo?: any;
     additionalNodesInfo?: any;
-    setSettingValue: (name: string, value: string) => void;
 }
 
 function ObjectGeneral(props: ObjectGeneralProps) {
@@ -38,32 +32,6 @@ function ObjectGeneral(props: ObjectGeneralProps) {
 
     const {name: tenantName, general: generalTab} = queryParams;
 
-    const renderTabs = () => {
-        return (
-            <div className={b('tabs')}>
-                <Tabs
-                    size="xl"
-                    items={TENANT_GENERAL_TABS}
-                    activeTab={generalTab as string}
-                    wrapTo={({id}, node) => {
-                        const path = createHref(routes.tenant, undefined, {
-                            ...queryParams,
-                            name: tenantName as string,
-                            [TenantTabsGroups.general]: id,
-                        });
-                        return (
-                            <Link to={path} key={id} className={b('tab')}>
-                                {node}
-                            </Link>
-                        );
-                    }}
-                    allowNotSelected
-                    onSelectTab={(id) => props.setSettingValue(TENANT_INITIAL_TAB_KEY, id)}
-                />
-            </div>
-        );
-    };
-
     const renderTabContent = () => {
         const {type, additionalTenantInfo, additionalNodesInfo} = props;
         switch (generalTab) {
@@ -88,7 +56,6 @@ function ObjectGeneral(props: ObjectGeneralProps) {
         }
         return (
             <div className={b()}>
-                {renderTabs()}
                 {renderTabContent()}
             </div>
         );
@@ -97,8 +64,4 @@ function ObjectGeneral(props: ObjectGeneralProps) {
     return renderContent();
 }
 
-const mapDispatchToProps = {
-    setSettingValue,
-};
-
-export default connect(null, mapDispatchToProps)(ObjectGeneral);
+export default ObjectGeneral;

package/dist/containers/Tenant/ObjectGeneralTabs/ObjectGeneralTabs.scss

@@ -0,0 +1,9 @@
+@import '../../../styles/mixins.scss';
+
+.object-general-tabs {
+    padding: 12px 20px 0 12px;
+
+    &__tab {
+        text-decoration: none;
+    }
+}

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

@@ -0,0 +1,68 @@
+import qs from 'qs';
+import {connect} from 'react-redux';
+import {useLocation} from 'react-router';
+import {Link} from 'react-router-dom';
+import cn from 'bem-cn-lite';
+
+import {Tabs} from '@yandex-cloud/uikit';
+
+import routes, {createHref} from '../../../routes';
+import {TENANT_INITIAL_TAB_KEY} from '../../../utils/constants';
+import {setSettingValue} from '../../../store/reducers/settings';
+
+import {TenantTabsGroups, TENANT_GENERAL_TABS} from '../TenantPages';
+
+import './ObjectGeneralTabs.scss';
+
+const b = cn('object-general-tabs');
+
+interface ObjectGeneralTabsProps {
+    setSettingValue: (name: string, value: string) => void;
+}
+
+function ObjectGeneralTabs(props: ObjectGeneralTabsProps) {
+    const location = useLocation();
+
+    const queryParams = qs.parse(location.search, {
+        ignoreQueryPrefix: true,
+    });
+
+    const {name: tenantName, general: generalTab} = queryParams;
+
+    const renderContent = () => {
+        if (!tenantName) {
+            return null;
+        }
+        return (
+            <div className={b()}>
+                <Tabs
+                    size="xl"
+                    items={TENANT_GENERAL_TABS}
+                    activeTab={generalTab as string}
+                    wrapTo={({id}, node) => {
+                        const path = createHref(routes.tenant, undefined, {
+                            ...queryParams,
+                            name: tenantName as string,
+                            [TenantTabsGroups.general]: id,
+                        });
+                        return (
+                            <Link to={path} key={id} className={b('tab')}>
+                                {node}
+                            </Link>
+                        );
+                    }}
+                    allowNotSelected
+                    onSelectTab={(id) => props.setSettingValue(TENANT_INITIAL_TAB_KEY, id)}
+                />
+            </div>
+        );
+    };
+
+    return renderContent();
+}
+
+const mapDispatchToProps = {
+    setSettingValue,
+};
+
+export default connect(null, mapDispatchToProps)(ObjectGeneralTabs);

package/dist/containers/Tenant/QueryEditor/QueryEditor.scss

@@ -45,7 +45,7 @@
     &__upper-controls {
         position: absolute;
         top: -38px;
-        right: 16px;
+        right: 20px;
 
         display: flex;
         gap: 12px;

package/dist/containers/Tenant/Tenant.tsx

@@ -7,8 +7,9 @@ import qs from 'qs';
 import EmptyState from '../../components/EmptyState/EmptyState';
 import {Illustration} from '../../components/Illustration';
 
-import ObjectSummary from './ObjectSummary/ObjectSummary';
 import {setHeader} from '../../store/reducers/header';
+import ObjectGeneralTabs from './ObjectGeneralTabs/ObjectGeneralTabs';
+import ObjectSummary from './ObjectSummary/ObjectSummary';
 import ObjectGeneral from './ObjectGeneral/ObjectGeneral';
 //@ts-ignore
 import SplitPane from '../../components/SplitPane';
@@ -131,28 +132,31 @@ function Tenant(props: TenantProps) {
                     description="You don’t have the necessary roles to view this page."
                 />
             ) : (
-                <SplitPane
-                    defaultSizePaneKey={DEFAULT_SIZE_TENANT_KEY}
-                    defaultSizes={[25, 75]}
-                    triggerCollapse={summaryVisibilityState.triggerCollapse}
-                    triggerExpand={summaryVisibilityState.triggerExpand}
-                    minSize={[36, 200]}
-                    onSplitStartDragAdditional={onSplitStartDragAdditional}
-                >
-                    <ObjectSummary
-                        type={currentPathType}
-                        subType={currentPathSubType}
-                        onCollapseSummary={onCollapseSummaryHandler}
-                        onExpandSummary={onExpandSummaryHandler}
-                        isCollapsed={summaryVisibilityState.collapsed}
-                        additionalTenantInfo={props.additionalTenantInfo}
-                    />
-                    <ObjectGeneral
-                        type={currentPathType}
-                        additionalTenantInfo={props.additionalTenantInfo}
-                        additionalNodesInfo={props.additionalNodesInfo}
-                    />
-                </SplitPane>
+                <>
+                    <ObjectGeneralTabs />
+                    <SplitPane
+                        defaultSizePaneKey={DEFAULT_SIZE_TENANT_KEY}
+                        defaultSizes={[25, 75]}
+                        triggerCollapse={summaryVisibilityState.triggerCollapse}
+                        triggerExpand={summaryVisibilityState.triggerExpand}
+                        minSize={[36, 200]}
+                        onSplitStartDragAdditional={onSplitStartDragAdditional}
+                    >
+                        <ObjectSummary
+                            type={currentPathType}
+                            subType={currentPathSubType}
+                            onCollapseSummary={onCollapseSummaryHandler}
+                            onExpandSummary={onExpandSummaryHandler}
+                            isCollapsed={summaryVisibilityState.collapsed}
+                            additionalTenantInfo={props.additionalTenantInfo}
+                        />
+                        <ObjectGeneral
+                            type={currentPathType}
+                            additionalTenantInfo={props.additionalTenantInfo}
+                            additionalNodesInfo={props.additionalNodesInfo}
+                        />
+                    </SplitPane>
+                </>
             )}
         </div>
     );

package/dist/store/reducers/storage.js

@@ -3,6 +3,7 @@ import '../../services/api';
 import _ from 'lodash';
 import {createSelector} from 'reselect';
 import {calcUptime} from '../../utils';
+import {getUsage} from '../../utils/storage';
 
 export const VisibleEntities = {
     All: 'All',
@@ -24,6 +25,7 @@ export const StorageTypes = {
 const FETCH_STORAGE = createRequestActionTypes('storage', 'FETCH_STORAGE');
 const SET_INITIAL = 'storage/SET_INITIAL';
 const SET_FILTER = 'storage/SET_FILTER';
+const SET_USAGE_FILTER = 'storage/SET_USAGE_FILTER';
 const SET_VISIBLE_GROUPS = 'storage/SET_VISIBLE_GROUPS';
 const SET_STORAGE_TYPE = 'storage/SET_STORAGE_TYPE';
 
@@ -31,6 +33,7 @@ const initialState = {
     loading: true,
     wasLoaded: false,
     filter: '',
+    usageFilter: [],
     visible: VisibleEntities.Missing,
     type: StorageTypes.groups,
 };
@@ -70,6 +73,12 @@ const storage = function z(state = initialState, action) {
                 filter: action.data,
             };
         }
+        case SET_USAGE_FILTER: {
+            return {
+                ...state,
+                usageFilter: action.data,
+            };
+        }
         case SET_VISIBLE_GROUPS: {
             return {
                 ...state,
@@ -82,6 +91,8 @@ const storage = function z(state = initialState, action) {
             return {
                 ...state,
                 type: action.data,
+                filter: '',
+                usageFilter: [],
                 wasLoaded: false,
                 error: undefined,
             };
@@ -117,6 +128,14 @@ export function setStorageFilter(value) {
         data: value,
     };
 }
+
+export function setUsageFilter(value) {
+    return {
+        type: SET_USAGE_FILTER,
+        data: value,
+    };
+}
+
 export function setVisibleEntities(value) {
     return {
         type: SET_VISIBLE_GROUPS,
@@ -135,6 +154,7 @@ export const getStorageNodesCount = (state) => ({
     found: state.storage.data?.FoundNodes || 0,
 });
 export const getStorageFilter = (state) => state.storage.filter;
+export const getUsageFilter = (state) => state.storage.usageFilter;
 export const getVisibleEntities = (state) => state.storage.visible;
 export const getStorageType = (state) => state.storage.type;
 export const getNodesObject = (state) =>
@@ -271,26 +291,67 @@ export const getVisibleEntitiesList = createSelector(
     },
 );
 
-export const getFilteredEntities = createSelector(
-    [getStorageFilter, getStorageType, getVisibleEntitiesList],
-    (filter, type, entities) => {
-        const cleanedFilter = filter.trim().toLowerCase();
-        if (!cleanedFilter) {
-            return entities;
-        } else {
-            return _.filter(entities, (e) => {
-                if (type === StorageTypes.groups) {
-                    return (
-                        e.PoolName.toLowerCase().includes(cleanedFilter) ||
-                        e.GroupID?.toString().includes(cleanedFilter)
-                    );
-                }
-                return (
-                    e.NodeId.toString().includes(cleanedFilter) ||
-                    e.FQDN.toLowerCase().includes(cleanedFilter)
-                );
-            });
+const filterByText = (entities, type, text) => {
+    const cleanedFilter = text.trim().toLowerCase();
+
+    if (!cleanedFilter) {
+        return entities;
+    }
+
+    return entities.filter((entity) => {
+        if (type === StorageTypes.groups) {
+            return (
+                entity.PoolName.toLowerCase().includes(cleanedFilter) ||
+                entity.GroupID?.toString().includes(cleanedFilter)
+            );
         }
+
+        return (
+            entity.NodeId.toString().includes(cleanedFilter) ||
+            entity.FQDN.toLowerCase().includes(cleanedFilter)
+        );
+    });
+};
+
+const filterByUsage = (entities, usage) => {
+    if (!Array.isArray(usage) || usage.length === 0) {
+        return entities;
+    }
+
+    return entities.filter((entity) => {
+        const entityUsage = getUsage(entity, 5);
+        return usage.some((val) => Number(val) <= entityUsage && entityUsage < Number(val) + 5);
+    });
+};
+
+export const getFilteredEntities = createSelector(
+    [getStorageFilter, getUsageFilter, getStorageType, getVisibleEntitiesList],
+    (textFilter, usageFilter, type, entities) => {
+        let result = entities;
+        result = filterByText(result, type, textFilter);
+        result = filterByUsage(result, usageFilter);
+        return result;
+    },
+);
+
+export const getUsageFilterOptions = createSelector(
+    getVisibleEntitiesList,
+    (entities) => {
+        const items = {};
+
+        entities.forEach((entity) => {
+            const usage = getUsage(entity, 5);
+
+            if (!Object.hasOwn(items, usage)) {
+                items[usage] = 0;
+            }
+
+            items[usage] += 1;
+        });
+
+        return Object.entries(items)
+            .map(([threshold, count]) => ({threshold, count}))
+            .sort((a, b) => b.threshold - a.threshold);
     },
 );
 

package/dist/utils/storage.ts

@@ -0,0 +1,12 @@
+import type {TVDiskStateInfo, TVSlotId} from '../types/api/storage';
+import type {IStoragePoolGroup} from '../types/store/storage';
+
+export const isFullDonorData = (donor: TVDiskStateInfo | TVSlotId): donor is TVDiskStateInfo =>
+    'VDiskId' in donor;
+
+export const getUsage = (data: IStoragePoolGroup, step = 1) => {
+    // if limit is 0, display 0
+    const usage = Math.round((data.Used * 100) / data.Limit) || 0;
+
+    return Math.floor(usage / step) * step;
+};

package/package.json

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

package/dist/containers/Storage/StorageFilter/StorageFilter.js

@@ -1,31 +0,0 @@
-import {useEffect, useState} from 'react';
-import {TextInput} from '@yandex-cloud/uikit';
-import {StorageTypes} from '../../../store/reducers/storage';
-
-function StorageFilter(props) {
-    const [filter, setFilter] = useState('');
-    let timer;
-
-    useEffect(() => {
-        return () => clearTimeout(timer);
-    }, []);
-
-    useEffect(() => {
-        setFilter('');
-        props.changeReduxStorageFilter('');
-    }, [props.storageType]);
-
-    const changeFilter = (value) => {
-        clearTimeout(timer);
-        setFilter(value);
-        timer = setTimeout(() => {
-            props.changeReduxStorageFilter(value);
-        }, 200);
-    };
-    const placeholder =
-        props.storageType === StorageTypes.groups ? 'Group ID, Pool name' : 'Node ID, FQDN';
-
-    return <TextInput placeholder={placeholder} value={filter} onUpdate={changeFilter} hasClear />;
-}
-
-export default StorageFilter;