feat(Storage): add usage filter component

Author: ariser

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

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

src/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"
+    ]
+}

src/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);

src/containers/Storage/UsageFilter/i18n/ru.json

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

src/containers/Storage/UsageFilter/index.ts

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

src/containers/Storage/utils/index.ts

@@ -46,6 +46,7 @@ export const getDegradedSeverity = (group: IStoragePoolGroup) => {
 };
 
 export const getUsageSeverity = generateEvaluator(80, 85, ['success', 'warning', 'danger']);
+export const getUsageSeverityForEntityStatus = generateEvaluator(80, 85, ['Green', 'Yellow', 'Red']);
 
 export const getUsage = (data: IStoragePoolGroup, step = 1) => {
     // if limit is 0, display 0