ydb-embedded-ui 21.1.0 → 22.1.0

package/src/containers/Tablet/Tablet.tsx

@@ -14,6 +14,7 @@ import {InternalLink} from '../../components/InternalLink';
 import {LoaderWrapper} from '../../components/LoaderWrapper/LoaderWrapper';
 import {PageMetaWithAutorefresh} from '../../components/PageMeta/PageMeta';
 import {tabletPageQueryParams, useTabletPagePath} from '../../routes';
+import {useTabletDevUiSecurePath} from '../../store/reducers/capabilities/hooks';
 import {setHeaderBreadcrumbs} from '../../store/reducers/header/header';
 import {tabletApi} from '../../store/reducers/tablet';
 import {EFlag} from '../../types/api/enums';
@@ -202,7 +203,7 @@ function TabletTabs({
     }, [activeTab, tabletTab, setParams]);
 
     return (
-        <Flex gap={5} direction="column">
+        <Flex gap={5} direction="column" qa="tablet-tabs">
             {/* block wrapper fror tabs to preserve height */}
             <div>
                 <TabProvider value={tabletTab}>
@@ -232,8 +233,9 @@ function TabletTabs({
 
 function Channels({id, hiveId}: {id: string; hiveId: string}) {
     const [autoRefreshInterval] = useAutoRefreshInterval();
+    const useSecurePath = useTabletDevUiSecurePath();
     const {currentData, error, isFetching} = tabletApi.useGetAdvancedTableInfoQuery(
-        {id, hiveId},
+        {id, hiveId, useSecurePath},
         {
             pollingInterval: autoRefreshInterval,
         },

package/src/containers/Tablet/components/TabletControls/TabletControls.tsx

@@ -4,6 +4,7 @@ import {ArrowRotateLeft, StopFill, TriangleRightFill} from '@gravity-ui/icons';
 import {Flex, Icon} from '@gravity-ui/uikit';
 
 import {ButtonWithConfirmDialog} from '../../../../components/ButtonWithConfirmDialog/ButtonWithConfirmDialog';
+import {useTabletDevUiSecurePath} from '../../../../store/reducers/capabilities/hooks';
 import {tabletApi} from '../../../../store/reducers/tablet';
 import {ETabletState} from '../../../../types/api/tablet';
 import type {TTabletStateInfo} from '../../../../types/api/tablet';
@@ -19,6 +20,7 @@ export const TabletControls = ({tablet}: TabletControlsProps) => {
     const {TabletId, HiveId} = tablet;
 
     const isUserAllowedToMakeChanges = useIsUserAllowedToMakeChanges();
+    const useSecurePath = useTabletDevUiSecurePath();
 
     const [killTablet] = tabletApi.useKillTabletMutation();
     const [stopTablet] = tabletApi.useStopTabletMutation();
@@ -39,7 +41,7 @@ export const TabletControls = ({tablet}: TabletControlsProps) => {
         tablet.State === ETabletState.Stopped || tablet.State === ETabletState.Deleted;
 
     return (
-        <Flex gap={2} wrap="nowrap">
+        <Flex gap={2} wrap="nowrap" qa="tablet-controls">
             <ButtonWithConfirmDialog
                 dialogHeader={i18n('dialog.kill-header')}
                 dialogText={i18n('dialog.kill-text')}
@@ -63,7 +65,9 @@ export const TabletControls = ({tablet}: TabletControlsProps) => {
                         dialogText={i18n('dialog.stop-text')}
                         applyButtonText={i18n('dialog.stop-header')}
                         applyButtonView="outlined-danger"
-                        onConfirmAction={() => stopTablet({id: TabletId, hiveId: HiveId}).unwrap()}
+                        onConfirmAction={() =>
+                            stopTablet({id: TabletId, hiveId: HiveId, useSecurePath}).unwrap()
+                        }
                         buttonDisabled={isDisabledStop || !isUserAllowedToMakeChanges}
                         withPopover
                         buttonView="normal"
@@ -80,7 +84,7 @@ export const TabletControls = ({tablet}: TabletControlsProps) => {
                         applyButtonText={i18n('dialog.resume-header')}
                         applyButtonView="action"
                         onConfirmAction={() =>
-                            resumeTablet({id: TabletId, hiveId: HiveId}).unwrap()
+                            resumeTablet({id: TabletId, hiveId: HiveId, useSecurePath}).unwrap()
                         }
                         buttonDisabled={isDisabledResume || !isUserAllowedToMakeChanges}
                         withPopover

package/src/containers/Tablet/components/TabletInfo/TabletInfo.tsx

@@ -8,13 +8,15 @@ import {TabletUptime} from '../../../../components/UptimeViewer/UptimeViewer';
 import type {YDBDefinitionListItem} from '../../../../components/YDBDefinitionList/YDBDefinitionList';
 import {YDBDefinitionList} from '../../../../components/YDBDefinitionList/YDBDefinitionList';
 import {getDefaultNodePath, useTabletPagePath} from '../../../../routes';
-import {ETabletState} from '../../../../types/api/tablet';
+import {useTabletDevUiSecurePath} from '../../../../store/reducers/capabilities/hooks';
+import {ETabletState, EType} from '../../../../types/api/tablet';
 import type {TTabletStateInfo} from '../../../../types/api/tablet';
 import {cn} from '../../../../utils/cn';
 import {
     createTabletDeveloperUIHref,
     useHasDeveloperUi,
 } from '../../../../utils/developerUI/developerUI';
+import {getTabletDevUiAppPage} from '../../../../utils/developerUI/tabletDevUi';
 import {useDatabaseFromQuery} from '../../../../utils/hooks/useDatabaseFromQuery';
 import {transformPath} from '../../../Tenant/ObjectSummary/transformPath';
 import {getTabletObjectKind, hasHive} from '../../utils';
@@ -34,6 +36,7 @@ interface TabletInfoProps {
 export const TabletInfo = ({tablet, objectPath, objectDatabase}: TabletInfoProps) => {
     const getTabletPagePath = useTabletPagePath();
     const hasDeveloperUi = useHasDeveloperUi();
+    const useSecurePath = useTabletDevUiSecurePath();
     const database = useDatabaseFromQuery();
 
     const {
@@ -51,6 +54,10 @@ export const TabletInfo = ({tablet, objectPath, objectDatabase}: TabletInfoProps
     const hasHiveId = hasHive(HiveId);
     const hasUptime = State === ETabletState.Active;
     const objectKind = getTabletObjectKind(Type);
+    // These tablet types move the whole App page to the secure subtree.
+    const secureApp =
+        useSecurePath &&
+        (Type === EType.DataShard || Type === EType.Hive || Type === EType.BSController);
 
     const tabletInfo: YDBDefinitionListItem[] = [];
 
@@ -136,7 +143,10 @@ export const TabletInfo = ({tablet, objectPath, objectDatabase}: TabletInfoProps
                 <Flex direction="column" gap={3}>
                     <LinkWithIcon
                         title={tabletInfoKeyset('field_developer-ui-app')}
-                        url={createTabletDeveloperUIHref(TabletId, 'app')}
+                        url={createTabletDeveloperUIHref(
+                            TabletId,
+                            getTabletDevUiAppPage(secureApp),
+                        )}
                     />
                     <LinkWithIcon
                         title={tabletInfoKeyset('field_developer-ui-counters')}
@@ -156,7 +166,7 @@ export const TabletInfo = ({tablet, objectPath, objectDatabase}: TabletInfoProps
     };
 
     return (
-        <Flex gap={10} wrap="nowrap">
+        <Flex gap={10} wrap="nowrap" qa="tablet-info">
             <YDBDefinitionList
                 title={tabletInfoKeyset('title_info')}
                 items={tabletInfo}

package/src/containers/Tablets/TabletsTable.tsx

@@ -4,6 +4,7 @@ import {ArrowRotateLeft} from '@gravity-ui/icons';
 import type {Column as DataTableColumn, SortOrder} from '@gravity-ui/react-data-table';
 import {Icon, Select, Text} from '@gravity-ui/uikit';
 import {isNil} from 'lodash';
+import {useHistory} from 'react-router-dom';
 
 import {ButtonWithConfirmDialog} from '../../components/ButtonWithConfirmDialog/ButtonWithConfirmDialog';
 import {EntitiesCount} from '../../components/EntitiesCount';
@@ -16,6 +17,7 @@ import {TableWithControlsLayout} from '../../components/TableWithControlsLayout/
 import {TabletNameWrapper} from '../../components/TabletNameWrapper/TabletNameWrapper';
 import {TabletState} from '../../components/TabletState/TabletState';
 import {TabletUptime} from '../../components/UptimeViewer/UptimeViewer';
+import {useTabletPagePath} from '../../routes';
 import {tabletApi} from '../../store/reducers/tablet';
 import {ETabletState} from '../../types/api/tablet';
 import type {TTabletStateInfo} from '../../types/api/tablet';
@@ -259,12 +261,31 @@ export function TabletsTable({
         [nodeId, showEndOfRange],
     );
 
+    const history = useHistory();
+    const getTabletPagePath = useTabletPagePath();
+    const openTablet = React.useCallback(
+        (tablet: TTabletStateInfo) => {
+            if (tablet.TabletId) {
+                history.push(
+                    getTabletPagePath(tablet.TabletId, {
+                        followerId: tablet.FollowerId ? String(tablet.FollowerId) : undefined,
+                    }),
+                );
+            }
+        },
+        [getTabletPagePath, history],
+    );
+
     const filtersActive = Boolean(tabletsSearch.trim()) || tabletTypes.length > 0;
 
     return (
-        <TableWithControlsLayout fullHeight>
+        <TableWithControlsLayout
+            fullHeight
+            keyboardNavigationResetKey={JSON.stringify(tabletTypes)}
+        >
             <TableWithControlsLayout.Controls>
                 <Search
+                    tableFilter
                     placeholder={i18n('controls.search-placeholder')}
                     onChange={handleTabletsSearchChange}
                     value={tabletsSearch}
@@ -296,15 +317,34 @@ export function TabletsTable({
                 scrollDependencies={[tabletsSearch, tabletTypes, sortParams]}
                 loading={loading}
             >
-                <ResizeableDataTable
-                    columns={columns}
-                    data={filteredTablets}
-                    settings={DEFAULT_TABLE_SETTINGS}
-                    emptyDataMessage={
-                        filtersActive ? i18n('noTabletsMatchFilters') : i18n('noTabletsData')
-                    }
-                    onSortChange={setSortParams}
-                />
+                <div>
+                    <ResizeableDataTable
+                        onKeyboardActivate={openTablet}
+                        getKeyboardRowKey={(tablet) =>
+                            JSON.stringify([tablet.TabletId, tablet.FollowerId ?? 0])
+                        }
+                        getKeyboardRowLabel={(tablet) =>
+                            [
+                                tablet.Type,
+                                tablet.TabletId,
+                                tablet.FollowerId || isFollowerTablet(tablet)
+                                    ? i18n('value_follower', {
+                                          id: tablet.FollowerId ?? EMPTY_DATA_PLACEHOLDER,
+                                      })
+                                    : undefined,
+                            ]
+                                .filter(Boolean)
+                                .join(', ') || EMPTY_DATA_PLACEHOLDER
+                        }
+                        columns={columns}
+                        data={filteredTablets}
+                        settings={DEFAULT_TABLE_SETTINGS}
+                        emptyDataMessage={
+                            filtersActive ? i18n('noTabletsMatchFilters') : i18n('noTabletsData')
+                        }
+                        onSortChange={setSortParams}
+                    />
+                </div>
             </TableWithControlsLayout.Table>
         </TableWithControlsLayout>
     );

package/src/containers/Tablets/i18n/en.json

@@ -16,5 +16,6 @@
   "controls.search-placeholder": "Tablet ID",
   "controls.type-filter-label": "Type",
   "controls.type-filter-placeholder": "All types",
-  "controls.entities-count-label": "Tablets"
+  "controls.entities-count-label": "Tablets",
+  "value_follower": "follower {{id}}"
 }

package/src/containers/Tenant/Diagnostics/Overview/Overview.tsx

@@ -15,6 +15,7 @@ import {AsyncReplicationInfo} from './AsyncReplicationInfo';
 import {ChangefeedInfo} from './ChangefeedInfo';
 import {DatabaseInfo} from './DatabaseInfo/DatabaseInfo';
 import {DefaultEntityInfo} from './DefaultEntityInfo';
+import {ResourcePoolInfo} from './ResourcePoolInfo';
 import {SchemaObjectInfoContainer} from './SchemaObjectInfo/SchemaObjectInfoContainer';
 import {StreamingQueryInfo} from './StreamingQueryInfo';
 import {TableInfo} from './TableInfo';
@@ -55,7 +56,7 @@ function Overview({type, path, database, databaseFullPath}: OverviewProps) {
         const pathTypeToComponent: Record<EPathType, (() => React.ReactNode) | undefined> = {
             [EPathType.EPathTypeInvalid]: undefined,
             [EPathType.EPathTypeDir]: undefined,
-            [EPathType.EPathTypeResourcePool]: undefined,
+            [EPathType.EPathTypeResourcePool]: () => <ResourcePoolInfo data={data} />,
             [EPathType.EPathTypeSecret]: undefined,
             [EPathType.EPathTypeTable]: renderTableInfo,
             [EPathType.EPathTypeSysView]: undefined,

package/src/containers/Tenant/Diagnostics/Overview/ResourcePoolInfo/ResourcePoolInfo.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+
+import {Flex, Text} from '@gravity-ui/uikit';
+
+import type {YDBDefinitionListItem} from '../../../../../components/YDBDefinitionList/YDBDefinitionList';
+import {YDBDefinitionList} from '../../../../../components/YDBDefinitionList/YDBDefinitionList';
+import type {TEvDescribeSchemeResult} from '../../../../../types/api/schema';
+import {EMPTY_DATA_PLACEHOLDER} from '../../../../../utils/constants';
+
+import i18n from './i18n';
+
+/** Sentinel value meaning "no limit" for a resource-pool property. */
+const NO_LIMIT_VALUE = '-1';
+
+interface PropertyGroup {
+    title: string;
+    properties: {key: string; label: string}[];
+}
+
+const PROPERTY_GROUPS: PropertyGroup[] = [
+    {
+        title: i18n('group_queue'),
+        properties: [
+            {key: 'concurrent_query_limit', label: i18n('field_concurrent-query-limit')},
+            {key: 'queue_size', label: i18n('field_queue-size')},
+            {key: 'database_load_cpu_threshold', label: i18n('field_database-load-cpu-threshold')},
+        ],
+    },
+    {
+        title: i18n('group_cpu'),
+        properties: [
+            {
+                key: 'total_cpu_limit_percent_per_node',
+                label: i18n('field_total-cpu-limit-percent-per-node'),
+            },
+        ],
+    },
+];
+
+function isAbsent(value: string | undefined): value is undefined | '' {
+    return value === undefined || value === '';
+}
+
+function formatValue(value: string | undefined): React.ReactNode {
+    if (isAbsent(value) || value === NO_LIMIT_VALUE) {
+        return EMPTY_DATA_PLACEHOLDER;
+    }
+    return <Text variant="code-inline-2">{value}</Text>;
+}
+
+/** Only present copyText for values that are shown as concrete numbers. */
+function getCopyText(value: string | undefined): string | undefined {
+    if (isAbsent(value) || value === NO_LIMIT_VALUE) {
+        return undefined;
+    }
+    return value;
+}
+
+function prepareGroupItems(
+    properties: Record<string, string>,
+    group: PropertyGroup,
+): YDBDefinitionListItem[] {
+    return group.properties.map(({key, label}) => {
+        const value = properties[key];
+        return {
+            name: label,
+            content: formatValue(value),
+            copyText: getCopyText(value),
+        };
+    });
+}
+
+interface ResourcePoolInfoProps {
+    data?: TEvDescribeSchemeResult;
+}
+
+/** Displays overview for ResourcePool EPathType */
+export function ResourcePoolInfo({data}: ResourcePoolInfoProps) {
+    if (!data) {
+        return null;
+    }
+
+    const properties = data.PathDescription?.ResourcePoolDescription?.Properties?.Properties || {};
+
+    const sections = PROPERTY_GROUPS.map((group) => ({
+        title: group.title,
+        items: prepareGroupItems(properties, group),
+    })).filter((section) => section.items.length > 0);
+
+    if (sections.length === 0) {
+        return null;
+    }
+
+    return (
+        <Flex direction="column" gap={3}>
+            {sections.map((section) => (
+                <YDBDefinitionList
+                    key={section.title}
+                    title={section.title}
+                    items={section.items}
+                    responsive
+                />
+            ))}
+        </Flex>
+    );
+}

package/src/containers/Tenant/Diagnostics/Overview/ResourcePoolInfo/i18n/en.json

@@ -0,0 +1,9 @@
+{
+  "title_pool-settings": "Pool Settings",
+  "group_queue": "Queue & Concurrency",
+  "group_cpu": "CPU",
+  "field_concurrent-query-limit": "Concurrent query limit",
+  "field_queue-size": "Queue size",
+  "field_database-load-cpu-threshold": "Database load CPU threshold",
+  "field_total-cpu-limit-percent-per-node": "Total CPU limit % per node"
+}

package/src/containers/Tenant/Diagnostics/Overview/ResourcePoolInfo/i18n/index.ts

@@ -0,0 +1,7 @@
+import {registerKeysets} from '../../../../../../utils/i18n';
+
+import en from './en.json';
+
+const COMPONENT = 'ydb-diagnostics-resource-pool-info';
+
+export default registerKeysets(COMPONENT, {en});

package/src/containers/Tenant/Diagnostics/Overview/ResourcePoolInfo/index.ts

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

package/src/containers/Tenant/Diagnostics/Overview/utils/prepareTopicSchemaInfo.ts

@@ -22,10 +22,10 @@ export const prepareTopicSchemaInfo = (data?: TEvDescribeSchemeResult): Array<In
         return [];
     }
 
-    const {Partitions = [], PQTabletConfig = {PartitionConfig: {LifetimeSeconds: 0}}} = pqGroupData;
+    const {Partitions = [], PQTabletConfig} = pqGroupData;
 
-    const {Codecs, MeteringMode, PartitionStrategy} = PQTabletConfig;
-    const {WriteSpeedInBytesPerSecond, StorageLimitBytes} = PQTabletConfig.PartitionConfig;
+    const {Codecs, MeteringMode, PartitionStrategy, PartitionConfig} = PQTabletConfig ?? {};
+    const {WriteSpeedInBytesPerSecond, StorageLimitBytes} = PartitionConfig ?? {};
 
     //@ts-expect-error
     const pqGeneralInfo = formatObject<TPersQueueGroupDescription>(formatPQGroupItem, {

package/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopGroups.tsx

@@ -1,10 +1,7 @@
 import React from 'react';
 
 import {ResizeableDataTable} from '../../../../../components/ResizeableDataTable/ResizeableDataTable';
-import {
-    useCapabilitiesLoaded,
-    useStorageGroupsHandlerAvailable,
-} from '../../../../../store/reducers/capabilities/hooks';
+import {useCapabilitiesLoaded} from '../../../../../store/reducers/capabilities/hooks';
 import {storageApi} from '../../../../../store/reducers/storage/storage';
 import type {GroupsRequiredField} from '../../../../../types/api/storage';
 import {
@@ -45,7 +42,6 @@ interface TopGroupsProps {
 
 export function TopGroups({tenant, capacityMetricsEnabled}: TopGroupsProps) {
     const capabilitiesLoaded = useCapabilitiesLoaded();
-    const groupsHandlerAvailable = useStorageGroupsHandlerAvailable();
     const [autoRefreshInterval] = useAutoRefreshInterval();
 
     const {columns, fieldsRequired, sort} = React.useMemo(
@@ -59,7 +55,6 @@ export function TopGroups({tenant, capacityMetricsEnabled}: TopGroupsProps) {
             sort,
             with: 'all',
             limit: TENANT_OVERVIEW_TABLES_LIMIT,
-            shouldUseGroupsHandler: groupsHandlerAvailable,
             fieldsRequired,
         },
         {

package/src/containers/Tenant/Diagnostics/TopQueries/QueriesTableWithDrawer.tsx

@@ -8,6 +8,7 @@ import type {DrawerControl} from '../../../../components/Drawer/Drawer';
 import {ResizeableDataTable} from '../../../../components/ResizeableDataTable/ResizeableDataTable';
 import type {KeyValueRow} from '../../../../types/api/query';
 import {cn} from '../../../../utils/cn';
+import {getQueryShortText} from '../../../../utils/query';
 
 import {QueryDetailsDrawerContent} from './QueryDetails/QueryDetailsDrawerContent';
 import i18n from './i18n';
@@ -18,6 +19,7 @@ const b = cn('kv-top-queries');
 interface SimpleTableWithDrawerProps {
     columns: Column<KeyValueRow>[];
     data: KeyValueRow[];
+    getKeyboardRowKey?: (row: KeyValueRow) => string | number | undefined;
     isFetching?: boolean;
     isLoading?: boolean;
     onRowClick?: (
@@ -40,6 +42,7 @@ interface SimpleTableWithDrawerProps {
 export function QueriesTableWithDrawer({
     columns,
     data,
+    getKeyboardRowKey,
     isFetching,
     isLoading,
     onRowClick,
@@ -102,6 +105,9 @@ export function QueriesTableWithDrawer({
             drawerControls={finalDrawerControls}
         >
             <ResizeableDataTable
+                onKeyboardActivate={handleRowClick}
+                getKeyboardRowKey={getKeyboardRowKey}
+                getKeyboardRowLabel={(row) => getQueryShortText(row.QueryText?.toString())}
                 emptyDataMessage={emptyDataMessage || i18n('no-data')}
                 columnsWidthLSKey={columnsWidthLSKey}
                 columns={columns}

package/src/containers/Tenant/Diagnostics/TopQueries/RunningQueriesData.tsx

@@ -86,6 +86,7 @@ export const RunningQueriesData = ({
             <TableWithControlsLayout.Controls renderExtraControls={renderExtraControls}>
                 {renderQueryModeControl()}
                 <Search
+                    tableFilter
                     value={filters.text}
                     onChange={handleTextSearchUpdate}
                     placeholder={i18n('filter.text.placeholder')}
@@ -97,6 +98,9 @@ export const RunningQueriesData = ({
             {error ? <ResponseError error={error} /> : null}
             <TableWithControlsLayout.Table>
                 <QueriesTableWithDrawer
+                    getKeyboardRowKey={(row) =>
+                        JSON.stringify([database, row.SessionId, row.QueryStartAt])
+                    }
                     columns={columnsToShow}
                     data={rows || []}
                     isFetching={isFetching && currentData === undefined}

package/src/containers/Tenant/Diagnostics/TopQueries/TopQueriesData.tsx

@@ -137,7 +137,9 @@ export const TopQueriesData = ({
     };
 
     return (
-        <TableWithControlsLayout>
+        <TableWithControlsLayout
+            keyboardNavigationResetKey={JSON.stringify([timeFrame, filters.from, filters.to])}
+        >
             <TableWithControlsLayout.Controls renderExtraControls={renderExtraControls}>
                 {renderQueryModeControl()}
                 <Select
@@ -152,6 +154,7 @@ export const TopQueriesData = ({
                     defaultValue={DEFAULT_TIME_FILTER_VALUE}
                 />
                 <Search
+                    tableFilter
                     value={filters.text}
                     inputRef={inputRef}
                     onChange={handleTextSearchUpdate}
@@ -163,6 +166,9 @@ export const TopQueriesData = ({
             {error ? <ResponseError error={error} /> : null}
             <TableWithControlsLayout.Table>
                 <QueriesTableWithDrawer
+                    getKeyboardRowKey={(row) =>
+                        JSON.stringify([database, row.IntervalEnd, row.EndTime, row.QueryText])
+                    }
                     columns={columnsToShow}
                     data={rows || []}
                     isFetching={isFetching && currentData === undefined}

package/src/containers/Tenant/Diagnostics/TopShards/TopShards.tsx

@@ -153,7 +153,7 @@ export const TopShards = ({database, path, databaseFullPath}: TopShardsProps) =>
     };
 
     return (
-        <TableWithControlsLayout>
+        <TableWithControlsLayout keyboardNavigation={false}>
             <TableWithControlsLayout.Controls>{renderControls()}</TableWithControlsLayout.Controls>
 
             {filters.mode === EShardsWorkloadMode.History && (

package/src/containers/Tenant/Diagnostics/useDiagnosticsPages.ts

@@ -3,7 +3,6 @@ import React from 'react';
 import {
     useConfigAvailable,
     useNewStorageViewEnabled,
-    useStorageGroupsHandlerAvailable,
     useStorageStatsAvailable,
     useTopicDataAvailable,
 } from '../../../store/reducers/capabilities/hooks';
@@ -42,10 +41,8 @@ export function useDiagnosticsPages({
 
     const hasConfigs = useConfigAvailable();
     const newStorageViewEnabled = useNewStorageViewEnabled();
-    const storageGroupsAvailable = useStorageGroupsHandlerAvailable();
     const storageStatsAvailable = useStorageStatsAvailable();
-    const hasStorageUsageCapabilities = storageGroupsAvailable && storageStatsAvailable;
-    const hasStorageUsage = newStorageViewEnabled && hasStorageUsageCapabilities;
+    const hasStorageUsage = newStorageViewEnabled && storageStatsAvailable;
     const hasTopicData = useTopicDataAvailable();
     const isViewerUser = useIsViewerUser();
     const userPermissions = useUserPermissions();

package/src/containers/Tenant/Query/QueriesHistory/QueriesHistory.tsx

@@ -16,6 +16,7 @@ import {
 } from '../../../../store/reducers/query/query';
 import type {QueryInHistory} from '../../../../store/reducers/query/types';
 import {useTypedDispatch, useTypedSelector} from '../../../../utils/hooks';
+import {getQueryShortText} from '../../../../utils/query';
 import {QUERY_TABLE_SETTINGS} from '../../utils/constants';
 import {SAVE_QUERY_DIALOG} from '../SaveQuery/SaveQuery';
 import {useOpenExternalQueryInEditor} from '../hooks/useOpenExternalQueryInEditor';
@@ -116,6 +117,7 @@ function QueriesHistory({queriesHistory}: QueriesHistoryProps) {
             <TableWithControlsLayout className={b('table-with-controls')}>
                 <TableWithControlsLayout.Controls>
                     <Search
+                        tableFilter
                         value={filter}
                         onChange={onChangeFilter}
                         placeholder={i18n('field_query-text-search')}
@@ -135,6 +137,9 @@ function QueriesHistory({queriesHistory}: QueriesHistoryProps) {
                         defaultWidth={50}
                     >
                         <ResizeableDataTable
+                            onKeyboardActivate={handleShowPreview}
+                            getKeyboardRowKey={(query) => query.queryId}
+                            getKeyboardRowLabel={(query) => getQueryShortText(query.queryText)}
                             columnsWidthLSKey={QUERIES_HISTORY_COLUMNS_WIDTH_LS_KEY}
                             columns={columns}
                             data={queriesHistory.filteredHistoryQueries}

package/src/containers/Tenant/Query/SavedQueries/SavedQueries.tsx

@@ -243,6 +243,7 @@ export const SavedQueries = () => {
                 <TableWithControlsLayout className={b('table-with-controls')}>
                     <TableWithControlsLayout.Controls>
                         <Search
+                            tableFilter
                             value={filter}
                             onChange={handleChangeFilter}
                             placeholder={i18n('field_saved-query-search')}
@@ -262,6 +263,11 @@ export const SavedQueries = () => {
                             defaultWidth={50}
                         >
                             <ResizeableDataTable
+                                onKeyboardActivate={handleShowPreview}
+                                getKeyboardRowKey={(query) => query.name}
+                                getKeyboardRowLabel={(query) =>
+                                    query.name || EMPTY_DATA_PLACEHOLDER
+                                }
                                 columnsWidthLSKey={SAVED_QUERIES_COLUMNS_WIDTH_LS_KEY}
                                 columns={columns}
                                 data={filteredSavedQueries}