ydb-embedded-ui 4.8.1 → 4.9.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Changelog
 
+## [4.9.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.8.2...v4.9.0) (2023-06-30)
+
+
+### Features
+
+* **QueryEditor:** remove old controls, update setting ([#445](https://github.com/ydb-platform/ydb-embedded-ui/issues/445)) ([75efd44](https://github.com/ydb-platform/ydb-embedded-ui/commit/75efd444c8b8ba5213117ec9c33f6b9664855a2c))
+
+
+### Bug Fixes
+
+* **QueryEditor:** color last used query action, run on command ([#436](https://github.com/ydb-platform/ydb-embedded-ui/issues/436)) ([c4d3bb8](https://github.com/ydb-platform/ydb-embedded-ui/commit/c4d3bb81bc1cea8ec3fe2e5e7e18c997d94f5714))
+* **QueryEditor:** rename query modes ([#449](https://github.com/ydb-platform/ydb-embedded-ui/issues/449)) ([c93c9c1](https://github.com/ydb-platform/ydb-embedded-ui/commit/c93c9c17ba26e01c596009657cac02ecc9cc9ab0))
+* **StorageNodes:** sort by uptime ([#447](https://github.com/ydb-platform/ydb-embedded-ui/issues/447)) ([283cb81](https://github.com/ydb-platform/ydb-embedded-ui/commit/283cb81b3f4711ddc2bb991615729a9bda7e893c))
+* **Storage:** remove visible entities filter ([#448](https://github.com/ydb-platform/ydb-embedded-ui/issues/448)) ([b4d9489](https://github.com/ydb-platform/ydb-embedded-ui/commit/b4d948965cd349a54fe833a6b81ea3b087782735))
+
+## [4.8.2](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.8.1...v4.8.2) (2023-06-27)
+
+
+### Bug Fixes
+
+* **breadcrumbs:** update tenant and tablet params ([#443](https://github.com/ydb-platform/ydb-embedded-ui/issues/443)) ([b0d31ac](https://github.com/ydb-platform/ydb-embedded-ui/commit/b0d31acce6d6e97d759180c885e6aea3b762a91c))
+
 ## [4.8.1](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.8.0...v4.8.1) (2023-06-26)
 
 

package/dist/components/NodeHostWrapper/NodeHostWrapper.tsx

@@ -2,7 +2,7 @@ import block from 'bem-cn-lite';
 
 import {Button, Popover, PopoverBehavior} from '@gravity-ui/uikit';
 
-import type {INodesPreparedEntity} from '../../types/store/nodes';
+import type {NodesPreparedEntity} from '../../store/reducers/nodes/types';
 import {getDefaultNodePath} from '../../containers/Node/NodePages';
 import {isUnavailableNode, NodeAddress} from '../../utils/nodes';
 
@@ -15,7 +15,7 @@ import './NodeHostWrapper.scss';
 const b = block('ydb-node-host-wrapper');
 
 interface NodeHostWrapperProps {
-    node: INodesPreparedEntity;
+    node: NodesPreparedEntity;
     getNodeRef?: (node?: NodeAddress) => string | null;
 }
 

package/dist/components/Tablet/Tablet.tsx

@@ -18,21 +18,10 @@ interface TabletProps {
 }
 
 export const Tablet = ({tablet = {}, tenantName}: TabletProps) => {
-    const {TabletId: id, NodeId, Type, State} = tablet;
+    const {TabletId: id, NodeId} = tablet;
     const status = tablet.Overall?.toLowerCase();
 
-    const tabletPath =
-        id &&
-        createHref(
-            routes.tablet,
-            {id},
-            {
-                nodeId: NodeId,
-                type: Type,
-                state: State,
-                tenantName,
-            },
-        );
+    const tabletPath = id && createHref(routes.tablet, {id}, {nodeId: NodeId, tenantName});
 
     return (
         <ContentWithPopup

package/dist/containers/Header/breadcrumbs.ts

@@ -10,10 +10,15 @@ import type {
     TabletsBreadcrumbsOptions,
     TenantBreadcrumbsOptions,
 } from '../../store/reducers/header/types';
+import {
+    TENANT_DIAGNOSTICS_TABS_IDS,
+    TENANT_PAGE,
+    TENANT_PAGES_IDS,
+} from '../../store/reducers/tenant/constants';
 import routes, {createHref} from '../../routes';
 
 import {getClusterPath} from '../Cluster/utils';
-import {getTenantPath} from '../Tenant/TenantPages';
+import {TenantTabsGroups, getTenantPath} from '../Tenant/TenantPages';
 import {getDefaultNodePath} from '../Node/NodePages';
 
 const prepareTenantName = (tenantName: string) => {
@@ -61,10 +66,16 @@ const getNodeBreadcrumbs = (options: NodeBreadcrumbsOptions, query = {}): RawBre
     // Compute nodes have tenantName, storage nodes doesn't
     const isStorageNode = !tenantName;
 
+    const newQuery = {
+        ...query,
+        [TENANT_PAGE]: TENANT_PAGES_IDS.diagnostics,
+        [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.nodes,
+    };
+
     if (isStorageNode) {
         breadcrumbs = getClusterBreadcrumbs(options, query);
     } else {
-        breadcrumbs = getTenantBreadcrumbs(options, query);
+        breadcrumbs = getTenantBreadcrumbs(options, newQuery);
     }
 
     const text = nodeId ? `Node ${nodeId}` : 'Node';
@@ -79,21 +90,26 @@ const getTabletsBreadcrubms = (
     options: TabletsBreadcrumbsOptions,
     query = {},
 ): RawBreadcrumbItem[] => {
-    const {tenantName, nodeIds, state, type} = options;
+    const {tenantName, nodeIds} = options;
+
+    const newQuery = {
+        ...query,
+        [TENANT_PAGE]: TENANT_PAGES_IDS.diagnostics,
+        [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.tablets,
+    };
 
     let breadcrumbs: RawBreadcrumbItem[];
 
     // Cluster system tablets don't have tenantName
     if (tenantName) {
-        breadcrumbs = getTenantBreadcrumbs(options, query);
+        breadcrumbs = getTenantBreadcrumbs(options, newQuery);
     } else {
         breadcrumbs = getClusterBreadcrumbs(options, query);
     }
 
     const link = createHref(routes.tabletsFilters, undefined, {
+        ...query,
         nodeIds,
-        state,
-        type,
         path: tenantName,
     });
 

package/dist/containers/Nodes/Nodes.tsx

@@ -26,7 +26,7 @@ import {
     setSearchValue,
     resetNodesState,
     getComputeNodes,
-} from '../../store/reducers/nodes';
+} from '../../store/reducers/nodes/nodes';
 import {changeFilter, ProblemFilterValues} from '../../store/reducers/settings/settings';
 
 import {isDatabaseEntityType} from '../Tenant/utils/schema';

package/dist/containers/Nodes/getNodesColumns.tsx

@@ -9,7 +9,7 @@ import {NodeHostWrapper} from '../../components/NodeHostWrapper/NodeHostWrapper'
 import type {NodeAddress} from '../../utils/nodes';
 import {formatBytesToGigabyte} from '../../utils/index';
 
-import type {INodesPreparedEntity} from '../../types/store/nodes';
+import type {NodesPreparedEntity} from '../../store/reducers/nodes/types';
 
 interface GetNodesColumnsProps {
     tabletsPath?: string;
@@ -17,7 +17,7 @@ interface GetNodesColumnsProps {
 }
 
 export function getNodesColumns({tabletsPath, getNodeRef}: GetNodesColumnsProps) {
-    const columns: Column<INodesPreparedEntity>[] = [
+    const columns: Column<NodesPreparedEntity>[] = [
         {
             name: 'NodeId',
             header: '#',

package/dist/containers/Storage/PDisk/PDisk.tsx

@@ -5,7 +5,7 @@ import {InternalLink} from '../../../components/InternalLink';
 import {Stack} from '../../../components/Stack/Stack';
 
 import routes, {createHref} from '../../../routes';
-import {getVDisksForPDisk} from '../../../store/reducers/storage';
+import {getVDisksForPDisk} from '../../../store/reducers/storage/storage';
 import {TPDiskStateInfo, TPDiskState} from '../../../types/api/pdisk';
 import {TVDiskStateInfo} from '../../../types/api/vdisk';
 import {stringifyVdiskId} from '../../../utils';

package/dist/containers/Storage/Storage.js

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import cn from 'bem-cn-lite';
 import DataTable from '@gravity-ui/react-data-table';
-import {RadioButton} from '@gravity-ui/uikit';
 
 import {Search} from '../../components/Search';
 import {UsageFilter} from './UsageFilter';
@@ -18,33 +17,29 @@ import {
     getStorageInfo,
     setInitialState,
     getFilteredEntities,
-    VisibleEntities,
     setVisibleEntities,
     setStorageFilter,
     setUsageFilter,
-    StorageTypes,
     setStorageType,
     setNodesUptimeFilter,
     setDataWasNotLoaded,
-    VisibleEntitiesTitles,
     getStoragePoolsGroupsCount,
     getStorageNodesCount,
     getUsageFilterOptions,
-} from '../../store/reducers/storage';
+} from '../../store/reducers/storage/storage';
+import {VISIBLE_ENTITIES, STORAGE_TYPES} from '../../store/reducers/storage/constants';
 import {getNodesList, selectNodesMap} from '../../store/reducers/nodesList';
 import StorageGroups from './StorageGroups/StorageGroups';
 import StorageNodes from './StorageNodes/StorageNodes';
 import {DEFAULT_TABLE_SETTINGS} from '../../utils/constants';
 
+import {StorageTypeFilter} from './StorageTypeFilter/StorageTypeFilter';
+import {StorageVisibleEntityFilter} from './StorageVisibleEntityFilter/StorageVisibleEntityFilter';
+
 import './Storage.scss';
 
 const b = cn('global-storage');
 
-const FILTER_OPTIONS = {
-    Missing: 'missing',
-    Space: 'space',
-};
-
 const tableSettings = {
     ...DEFAULT_TABLE_SETTINGS,
     defaultOrder: DataTable.DESCENDING,
@@ -74,25 +69,23 @@ class Storage extends React.Component {
     };
 
     componentDidMount() {
-        const {tenant, nodeId, setVisibleEntities, storageType, getNodesList} =
-            this.props;
+        const {tenant, nodeId, setVisibleEntities, storageType, getNodesList} = this.props;
 
         this.autofetcher = new AutoFetcher();
         getNodesList();
         if (tenant || nodeId) {
-            setVisibleEntities(VisibleEntities.All);
+            setVisibleEntities(VISIBLE_ENTITIES.all);
             this.getStorageInfo({
-                filter: FILTER_OPTIONS.All,
                 type: storageType,
             });
         } else {
             this.getStorageInfo({
-                filter: FILTER_OPTIONS.Missing,
+                visibleEntities: VISIBLE_ENTITIES.missing,
                 type: storageType,
             });
             this.autofetcher.fetch(() =>
                 this.getStorageInfo({
-                    filter: FILTER_OPTIONS.Missing,
+                    visibleEntities: VISIBLE_ENTITIES.missing,
                     type: storageType,
                 }),
             );
@@ -105,7 +98,7 @@ class Storage extends React.Component {
 
         const startFetch = () => {
             this.getStorageInfo({
-                filter: FILTER_OPTIONS[visibleEntities],
+                visibleEntities,
                 type: storageType,
             });
         };
@@ -115,7 +108,7 @@ class Storage extends React.Component {
             this.autofetcher.start();
             this.autofetcher.fetch(() =>
                 this.getStorageInfo({
-                    filter: FILTER_OPTIONS[visibleEntities],
+                    visibleEntities,
                     type: storageType,
                 }),
             );
@@ -183,16 +176,16 @@ class Storage extends React.Component {
 
         return (
             <div className={b('table-wrapper')}>
-                {storageType === StorageTypes.groups && (
+                {storageType === STORAGE_TYPES.groups && (
                     <StorageGroups
                         visibleEntities={visibleEntities}
                         data={flatListStorageEntities}
                         tableSettings={tableSettings}
                         nodes={nodes}
-                        onShowAll={() => this.onGroupVisibilityChange(VisibleEntities.All)}
+                        onShowAll={() => this.onGroupVisibilityChange(VISIBLE_ENTITIES.all)}
                     />
                 )}
-                {storageType === StorageTypes.nodes && (
+                {storageType === STORAGE_TYPES.nodes && (
                     <StorageNodes
                         visibleEntities={visibleEntities}
                         nodesUptimeFilter={nodesUptimeFilter}
@@ -221,7 +214,7 @@ class Storage extends React.Component {
     };
 
     onShowAllNodes = () => {
-        this.onGroupVisibilityChange(VisibleEntities.All);
+        this.onGroupVisibilityChange(VISIBLE_ENTITIES.all);
         this.onUptimeFilterChange(NodesUptimeFilterValues.All);
     };
 
@@ -229,8 +222,8 @@ class Storage extends React.Component {
         const {storageType, groupsCount, nodesCount, flatListStorageEntities, loading, wasLoaded} =
             this.props;
 
-        const entityName = storageType === StorageTypes.groups ? 'Groups' : 'Nodes';
-        const count = storageType === StorageTypes.groups ? groupsCount : nodesCount;
+        const entityName = storageType === STORAGE_TYPES.groups ? 'Groups' : 'Nodes';
+        const count = storageType === STORAGE_TYPES.groups ? groupsCount : nodesCount;
 
         return (
             <EntitiesCount
@@ -259,7 +252,7 @@ class Storage extends React.Component {
                 <div className={b('search')}>
                     <Search
                         placeholder={
-                            storageType === StorageTypes.groups
+                            storageType === STORAGE_TYPES.groups
                                 ? 'Group ID, Pool name'
                                 : 'Node ID, FQDN'
                         }
@@ -268,32 +261,17 @@ class Storage extends React.Component {
                     />
                 </div>
 
-                <RadioButton value={storageType} onUpdate={this.onStorageTypeChange}>
-                    <RadioButton.Option value={StorageTypes.groups}>
-                        {StorageTypes.groups}
-                    </RadioButton.Option>
-                    <RadioButton.Option value={StorageTypes.nodes}>
-                        {StorageTypes.nodes}
-                    </RadioButton.Option>
-                </RadioButton>
-
-                <RadioButton value={visibleEntities} onUpdate={this.onGroupVisibilityChange}>
-                    <RadioButton.Option value={VisibleEntities.Missing}>
-                        {VisibleEntitiesTitles[VisibleEntities.Missing]}
-                    </RadioButton.Option>
-                    <RadioButton.Option value={VisibleEntities.Space}>
-                        {VisibleEntitiesTitles[VisibleEntities.Space]}
-                    </RadioButton.Option>
-                    <RadioButton.Option value={VisibleEntities.All}>
-                        {VisibleEntitiesTitles[VisibleEntities.All]}
-                    </RadioButton.Option>
-                </RadioButton>
-
-                {storageType === StorageTypes.nodes && (
+                <StorageTypeFilter value={storageType} onChange={this.onStorageTypeChange} />
+                <StorageVisibleEntityFilter
+                    value={visibleEntities}
+                    onChange={this.onGroupVisibilityChange}
+                />
+
+                {storageType === STORAGE_TYPES.nodes && (
                     <UptimeFilter value={nodesUptimeFilter} onChange={this.onUptimeFilterChange} />
                 )}
 
-                {storageType === StorageTypes.groups && (
+                {storageType === STORAGE_TYPES.groups && (
                     <UsageFilter
                         value={usageFilter}
                         onChange={setUsageFilter}

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

@@ -1,25 +1,22 @@
 import _ from 'lodash';
 import cn from 'bem-cn-lite';
+
 import DataTable, {Column, Settings, SortOrder} from '@gravity-ui/react-data-table';
 import {Icon, Label, Popover, PopoverBehavior} from '@gravity-ui/uikit';
 
 import type {NodesMap} from '../../../types/store/nodesList';
+import type {TVDiskStateInfo} from '../../../types/api/vdisk';
+import type {VisibleEntities} from '../../../store/reducers/storage/types';
 
-import shieldIcon from '../../../assets/icons/shield.svg';
-
-import {Stack} from '../../../components/Stack/Stack';
-//@ts-ignore
-import EntityStatus from '../../../components/EntityStatus/EntityStatus';
-
-import {TVDiskStateInfo} from '../../../types/api/vdisk';
-//@ts-ignore
-import {VisibleEntities} from '../../../store/reducers/storage';
-//@ts-ignore
+import {VISIBLE_ENTITIES} from '../../../store/reducers/storage/constants';
 import {bytesToGB, bytesToSpeed} from '../../../utils/utils';
-//@ts-ignore
 import {stringifyVdiskId} from '../../../utils';
 import {getUsage, isFullVDiskData} from '../../../utils/storage';
 
+import shieldIcon from '../../../assets/icons/shield.svg';
+import {Stack} from '../../../components/Stack/Stack';
+import EntityStatus from '../../../components/EntityStatus/EntityStatus';
+
 import {EmptyFilter} from '../EmptyFilter/EmptyFilter';
 import {VDisk} from '../VDisk';
 import {getDegradedSeverity, getUsageSeverityForStorageGroup} from '../utils';
@@ -49,7 +46,7 @@ interface StorageGroupsProps {
     data: any;
     nodes: NodesMap;
     tableSettings: Settings;
-    visibleEntities: keyof typeof VisibleEntities;
+    visibleEntities: VisibleEntities;
     onShowAll?: VoidFunction;
 }
 
@@ -70,21 +67,21 @@ const tableColumnsNames: Record<TableColumnsIdsValues, string> = {
 
 const b = cn('global-storage-groups');
 
-function setSortOrder(visibleEntities: keyof typeof VisibleEntities): SortOrder | undefined {
+function setSortOrder(visibleEntities: VisibleEntities): SortOrder | undefined {
     switch (visibleEntities) {
-        case VisibleEntities.All: {
+        case VISIBLE_ENTITIES.all: {
             return {
                 columnId: TableColumnsIds.PoolName,
                 order: DataTable.ASCENDING,
             };
         }
-        case VisibleEntities.Missing: {
+        case VISIBLE_ENTITIES.missing: {
             return {
                 columnId: TableColumnsIds.Missing,
                 order: DataTable.DESCENDING,
             };
         }
-        case VisibleEntities.Space: {
+        case VISIBLE_ENTITIES.space: {
             return {
                 columnId: TableColumnsIds.UsedSpaceFlag,
                 order: DataTable.DESCENDING,
@@ -295,7 +292,7 @@ function StorageGroups({
 
     let columns = allColumns;
 
-    if (visibleEntities === VisibleEntities.All) {
+    if (visibleEntities === VISIBLE_ENTITIES.all) {
         columns = allColumns.filter((col) => {
             return (
                 col.name !== TableColumnsIds.Missing && col.name !== TableColumnsIds.UsedSpaceFlag
@@ -303,7 +300,7 @@ function StorageGroups({
         });
     }
 
-    if (visibleEntities === VisibleEntities.Space) {
+    if (visibleEntities === VISIBLE_ENTITIES.space) {
         columns = allColumns.filter((col) => col.name !== TableColumnsIds.Missing);
 
         if (!data.length) {
@@ -317,7 +314,7 @@ function StorageGroups({
         }
     }
 
-    if (visibleEntities === VisibleEntities.Missing) {
+    if (visibleEntities === VISIBLE_ENTITIES.missing) {
         columns = allColumns.filter((col) => col.name !== TableColumnsIds.UsedSpaceFlag);
 
         if (!data.length) {

package/dist/containers/Storage/StorageNodes/StorageNodes.tsx

@@ -3,7 +3,9 @@ import cn from 'bem-cn-lite';
 
 import DataTable, {Column, Settings, SortOrder} from '@gravity-ui/react-data-table';
 
-import {VisibleEntities} from '../../../store/reducers/storage';
+import type {VisibleEntities} from '../../../store/reducers/storage/types';
+
+import {VISIBLE_ENTITIES} from '../../../store/reducers/storage/constants';
 import {
     AdditionalNodesInfo,
     isUnavailableNode,
@@ -35,7 +37,7 @@ interface StorageNodesProps {
     data: any;
     nodes: any;
     tableSettings: Settings;
-    visibleEntities: keyof typeof VisibleEntities;
+    visibleEntities: VisibleEntities;
     nodesUptimeFilter: keyof typeof NodesUptimeFilterValues;
     onShowAll?: VoidFunction;
     additionalNodesInfo?: AdditionalNodesInfo;
@@ -53,15 +55,15 @@ const tableColumnsNames: Record<TableColumnsIdsValues, string> = {
 
 const b = cn('global-storage-nodes');
 
-function setSortOrder(visibleEntities: keyof typeof VisibleEntities): SortOrder | undefined {
+function setSortOrder(visibleEntities: VisibleEntities): SortOrder | undefined {
     switch (visibleEntities) {
-        case VisibleEntities.All: {
+        case VISIBLE_ENTITIES.all: {
             return {
                 columnId: TableColumnsIds.NodeId,
                 order: DataTable.ASCENDING,
             };
         }
-        case VisibleEntities.Missing: {
+        case VISIBLE_ENTITIES.missing: {
             return {
                 columnId: TableColumnsIds.Missing,
                 order: DataTable.DESCENDING,
@@ -115,7 +117,7 @@ function StorageNodes({
             name: TableColumnsIds.uptime,
             header: tableColumnsNames[TableColumnsIds.uptime],
             width: 130,
-            sortAccessor: ({StartTime}) => -StartTime,
+            sortAccessor: ({StartTime}) => (StartTime ? -StartTime : 0),
             align: DataTable.RIGHT,
         },
         {
@@ -146,18 +148,18 @@ function StorageNodes({
 
     let columns = allColumns;
 
-    if (visibleEntities === VisibleEntities.Space) {
+    if (visibleEntities === VISIBLE_ENTITIES.space) {
         columns = allColumns.filter((col) => col.name !== TableColumnsIds.Missing);
     }
 
     if (!data.length) {
         let message;
 
-        if (visibleEntities === VisibleEntities.Space) {
+        if (visibleEntities === VISIBLE_ENTITIES.space) {
             message = i18n('empty.out_of_space');
         }
 
-        if (visibleEntities === VisibleEntities.Missing) {
+        if (visibleEntities === VISIBLE_ENTITIES.missing) {
             message = i18n('empty.degraded');
         }
 
@@ -166,7 +168,7 @@ function StorageNodes({
         }
 
         if (
-            visibleEntities !== VisibleEntities.All &&
+            visibleEntities !== VISIBLE_ENTITIES.all &&
             nodesUptimeFilter !== NodesUptimeFilterValues.All
         ) {
             message = i18n('empty.several_filters');

package/dist/containers/Storage/StorageTypeFilter/StorageTypeFilter.tsx

@@ -0,0 +1,27 @@
+import {RadioButton} from '@gravity-ui/uikit';
+
+import type {StorageType} from '../../../store/reducers/storage/types';
+import {STORAGE_TYPES} from '../../../store/reducers/storage/constants';
+
+const StorageTypesTitles = {
+    [STORAGE_TYPES.groups]: 'Groups',
+    [STORAGE_TYPES.nodes]: 'Nodes',
+};
+
+interface StorageTypeFilterProps {
+    value: StorageType;
+    onChange: (value: string) => void;
+}
+
+export const StorageTypeFilter = ({value, onChange}: StorageTypeFilterProps) => {
+    return (
+        <RadioButton value={value} onUpdate={onChange}>
+            <RadioButton.Option value={STORAGE_TYPES.groups}>
+                {StorageTypesTitles[STORAGE_TYPES.groups]}
+            </RadioButton.Option>
+            <RadioButton.Option value={STORAGE_TYPES.nodes}>
+                {StorageTypesTitles[STORAGE_TYPES.nodes]}
+            </RadioButton.Option>
+        </RadioButton>
+    );
+};

package/dist/containers/Storage/StorageVisibleEntityFilter/StorageVisibleEntityFilter.tsx

@@ -0,0 +1,31 @@
+import {RadioButton} from '@gravity-ui/uikit';
+
+import type {VisibleEntities} from '../../../store/reducers/storage/types';
+import {VISIBLE_ENTITIES} from '../../../store/reducers/storage/constants';
+
+export const VisibleEntitiesTitles = {
+    [VISIBLE_ENTITIES.all]: 'All',
+    [VISIBLE_ENTITIES.missing]: 'Degraded',
+    [VISIBLE_ENTITIES.space]: 'Out of Space',
+};
+
+interface StorageProblemFilterProps {
+    value: VisibleEntities;
+    onChange: (value: string) => void;
+}
+
+export const StorageVisibleEntityFilter = ({value, onChange}: StorageProblemFilterProps) => {
+    return (
+        <RadioButton value={value} onUpdate={onChange}>
+            <RadioButton.Option value={VISIBLE_ENTITIES.missing}>
+                {VisibleEntitiesTitles[VISIBLE_ENTITIES.missing]}
+            </RadioButton.Option>
+            <RadioButton.Option value={VISIBLE_ENTITIES.space}>
+                {VisibleEntitiesTitles[VISIBLE_ENTITIES.space]}
+            </RadioButton.Option>
+            <RadioButton.Option value={VISIBLE_ENTITIES.all}>
+                {VisibleEntitiesTitles[VISIBLE_ENTITIES.all]}
+            </RadioButton.Option>
+        </RadioButton>
+    );
+};

package/dist/containers/Tablet/Tablet.tsx

@@ -48,16 +48,9 @@ export const Tablet = () => {
         error,
     } = useTypedSelector((state) => state.tablet);
 
-    const {
-        nodeId: queryNodeId,
-        type: queryType,
-        state: queryState,
-        tenantName: queryTenantName,
-    } = parseQuery(location);
+    const {nodeId: queryNodeId, tenantName: queryTenantName} = parseQuery(location);
 
     const nodeId = tablet.NodeId?.toString() || queryNodeId?.toString();
-    const tabletState = tablet.State || queryState?.toString();
-    const tabletType = tablet.Type || queryType?.toString();
     const tenantName = tenantPath || queryTenantName?.toString();
 
     // NOTE: should be reviewed when migrating to React 18
@@ -84,13 +77,11 @@ export const Tablet = () => {
         dispatch(
             setHeaderBreadcrumbs('tablet', {
                 nodeIds: nodeId ? [nodeId] : [],
-                state: tabletState,
-                type: tabletType,
                 tenantName,
                 tabletId: id,
             }),
         );
-    }, [dispatch, tenantName, id, nodeId, tabletState, tabletType]);
+    }, [dispatch, tenantName, id, nodeId]);
 
     const renderExternalLinks = (link: {name: string; path: string}, index: number) => {
         return (

package/dist/containers/TabletsFilters/TabletsFilters.js

@@ -81,10 +81,15 @@ class TabletsFilters extends React.Component {
         });
         const {nodeIds, type, path, state} = queryParams;
         const nodes = TabletsFilters.parseNodes(nodeIds);
-        const stateFilter = TabletsFilters.getStateFiltersFromColor(state);
 
-        setStateFilter(stateFilter);
-        setTypeFilter([type]);
+        if (state) {
+            const stateFilter = TabletsFilters.getStateFiltersFromColor(state);
+            setStateFilter(stateFilter);
+        }
+
+        if (type) {
+            setTypeFilter([type]);
+        }
 
         this.setState({nodeFilter: nodes, tenantPath: path}, () => {
             this.makeRequest();