Merge branch 'main' into astandrik.popup-closes-on-context-menu-copy-1452

Author: astandrik

package-lock.json

@@ -112,21 +112,13 @@
       "^@gravity-ui/uikit/toaster-singleton-react-18$": "@gravity-ui/uikit/build/cjs/toaster-singleton-react-18.js"
     }
   },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
+  "browserslist": [
+    "extends @gravity-ui/browserslist-config"
+  ],
   "devDependencies": {
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
+    "@gravity-ui/browserslist-config": "^4.3.0",
     "@gravity-ui/eslint-config": "^3.2.0",
     "@gravity-ui/prettier-config": "^1.1.0",
     "@gravity-ui/stylelint-config": "^4.0.1",

package.json

@@ -11,6 +11,7 @@ import {InternalLink} from '../../components/InternalLink';
 import routes, {getLocationObjectFromHref} from '../../routes';
 import {
     clusterApi,
+    selectClusterTabletsWithFqdn,
     selectClusterTitle,
     updateDefaultClusterTab,
 } from '../../store/reducers/cluster/cluster';
@@ -74,6 +75,10 @@ export function Cluster({
 
     const clusterError = error && typeof error === 'object' ? error : undefined;
 
+    const clusterTablets = useTypedSelector((state) =>
+        selectClusterTabletsWithFqdn(state, clusterName ?? undefined),
+    );
+
     React.useEffect(() => {
         dispatch(setHeaderBreadcrumbs('cluster', {}));
     }, [dispatch]);
@@ -162,7 +167,8 @@ export function Cluster({
                     <div className={b('tablets')}>
                         <div className={b('fake-block')} />
                         <TabletsTable
-                            tablets={cluster.SystemTablets ?? []}
+                            loading={infoLoading}
+                            tablets={clusterTablets}
                             className={b('tablets-table')}
                         />
                     </div>

src/containers/Cluster/Cluster.tsx

@@ -178,9 +178,11 @@ const getStorageGroupBreadcrumbs: GetBreadcrumbs<StorageGroupBreadcrumbsOptions>
 };
 
 const getTabletBreadcrumbs: GetBreadcrumbs<TabletBreadcrumbsOptions> = (options, query = {}) => {
-    const {tabletId, tabletType, nodeId, nodeRole, nodeActiveTab = TABLETS, tenantName} = options;
+    const {tabletId, tabletType, tenantName} = options;
 
-    const breadcrumbs = getNodeBreadcrumbs({nodeId, nodeRole, nodeActiveTab, tenantName}, query);
+    const breadcrumbs = tenantName
+        ? getTenantBreadcrumbs(options, query)
+        : getClusterBreadcrumbs(options, query);
 
     const lastItem = {
         text: tabletId || headerKeyset('breadcrumbs.tablet'),

src/containers/Header/breadcrumbs.tsx

@@ -16,11 +16,9 @@ import {PageMetaWithAutorefresh} from '../../components/PageMeta/PageMeta';
 import {getTabletPagePath} from '../../routes';
 import {selectIsUserAllowedToMakeChanges} from '../../store/reducers/authentication/authentication';
 import {setHeaderBreadcrumbs} from '../../store/reducers/header/header';
-import {nodeApi} from '../../store/reducers/node/node';
 import {tabletApi} from '../../store/reducers/tablet';
 import {EFlag} from '../../types/api/enums';
 import type {TTabletStateInfo} from '../../types/api/tablet';
-import {EType} from '../../types/api/tablet';
 import type {ITabletPreparedHistoryItem} from '../../types/store/tablet';
 import {cn} from '../../utils/cn';
 import {CLUSTER_DEFAULT_TITLE} from '../../utils/constants';
@@ -59,12 +57,9 @@ const TABLET_PAGE_TABS = [
 ];
 
 const tabletTabSchema = z.nativeEnum(TABLET_TABS_IDS).catch(TABLET_TABS_IDS.history);
-const eTypeSchema = z.nativeEnum(EType).or(z.undefined()).catch(undefined);
 
 const tabletQueryParams = {
-    nodeId: StringParam,
     tenantName: StringParam,
-    type: StringParam,
     clusterName: StringParam,
     activeTab: StringParam,
 };
@@ -74,18 +69,12 @@ export function Tablet() {
 
     const {id} = useParams<{id: string}>();
 
-    const [
-        {
-            nodeId: queryNodeId,
-            tenantName: queryDatabase,
-            type: queryTabletType,
-            clusterName: queryClusterName,
-        },
-    ] = useQueryParams(tabletQueryParams);
+    const [{tenantName: queryDatabase, clusterName: queryClusterName}] =
+        useQueryParams(tabletQueryParams);
 
     const [autoRefreshInterval] = useAutoRefreshInterval();
     const {currentData, isFetching, error} = tabletApi.useGetTabletQuery(
-        {id, database: queryDatabase ?? undefined, nodeId: queryNodeId ?? undefined},
+        {id, database: queryDatabase ?? undefined},
         {pollingInterval: autoRefreshInterval},
     );
 
@@ -96,24 +85,19 @@ export function Tablet() {
         tablet.TenantId ? {tenantId: tablet.TenantId} : skipToken,
     );
 
-    const nodeId = tablet.NodeId ?? queryNodeId ?? undefined;
     const database = (tenantPath || queryDatabase) ?? undefined;
 
-    const nodeRole = useNodeRole(nodeId?.toString());
-
-    const tabletType = tablet.Type || eTypeSchema.parse(queryTabletType);
+    const tabletType = tablet.Type;
 
     React.useEffect(() => {
         dispatch(
             setHeaderBreadcrumbs('tablet', {
-                nodeId,
-                nodeRole,
                 tenantName: queryDatabase ?? undefined,
                 tabletId: id,
                 tabletType,
             }),
         );
-    }, [dispatch, queryDatabase, id, nodeId, nodeRole, tabletType]);
+    }, [dispatch, queryDatabase, id, tabletType]);
 
     const {Leader, Type} = tablet;
     const metaItems: string[] = [];
@@ -246,17 +230,3 @@ function Channels({id, hiveId}: {id: string; hiveId: string}) {
         </LoaderWrapper>
     );
 }
-
-function useNodeRole(nodeId: string | undefined) {
-    const {currentData: node} = nodeApi.useGetNodeInfoQuery(nodeId ? {nodeId} : skipToken);
-
-    let nodeRole: 'Storage' | 'Compute' | undefined;
-
-    if (node) {
-        // Compute nodes have tenantName, storage nodes doesn't
-        const isStorage = !node?.Tenants?.[0];
-        nodeRole = isStorage ? 'Storage' : 'Compute';
-    }
-
-    return nodeRole;
-}

src/containers/Tablet/Tablet.tsx

@@ -1,7 +1,6 @@
 import {skipToken} from '@reduxjs/toolkit/query';
 
 import {ResponseError} from '../../components/Errors/ResponseError';
-import {TableSkeleton} from '../../components/TableSkeleton/TableSkeleton';
 import {selectTabletsWithFqdn, tabletsApi} from '../../store/reducers/tablets';
 import type {TabletsApiRequestParams} from '../../types/store/tablets';
 import {cn} from '../../utils/cn';
@@ -38,14 +37,12 @@ export function Tablets({nodeId, path, database, className}: TabletsProps) {
     const loading = isFetching && currentData === undefined;
     const tablets = useTypedSelector((state) => selectTabletsWithFqdn(state, params));
 
-    if (loading) {
-        return <TableSkeleton />;
-    }
-
     return (
         <div className={b(null, className)}>
             {error ? <ResponseError error={error} /> : null}
-            {currentData ? <TabletsTable tablets={tablets} database={database} /> : null}
+            {currentData || loading ? (
+                <TabletsTable tablets={tablets} database={database} loading={loading} />
+            ) : null}
         </div>
     );
 }

src/containers/Tablets/Tablets.tsx

@@ -7,6 +7,7 @@ import {DeveloperUILinkButton} from '../../components/DeveloperUILinkButton/Deve
 import {EntityStatus} from '../../components/EntityStatus/EntityStatus';
 import {InternalLink} from '../../components/InternalLink';
 import {ResizeableDataTable} from '../../components/ResizeableDataTable/ResizeableDataTable';
+import {TableSkeleton} from '../../components/TableSkeleton/TableSkeleton';
 import {TabletState} from '../../components/TabletState/TabletState';
 import {getTabletPagePath} from '../../routes';
 import {selectIsUserAllowedToMakeChanges} from '../../store/reducers/authentication/authentication';
@@ -50,8 +51,6 @@ function getColumns({database}: {database?: string}) {
                 }
 
                 const tabletPath = getTabletPagePath(row.TabletId, {
-                    nodeId: row.NodeId,
-                    type: row.Type,
                     tenantName: database,
                 });
 
@@ -168,9 +167,13 @@ interface TabletsTableProps {
         fqdn?: string;
     })[];
     className?: string;
+    loading?: boolean;
 }
 
-export function TabletsTable({database, tablets, className}: TabletsTableProps) {
+export function TabletsTable({database, tablets, className, loading}: TabletsTableProps) {
+    if (loading) {
+        return <TableSkeleton />;
+    }
     return (
         <ResizeableDataTable
             wrapperClassName={className}

src/containers/Tablets/TabletsTable.tsx

@@ -467,15 +467,14 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
         );
     }
     getTablet(
-        {id, database, nodeId}: {id: string; database?: string; nodeId?: string},
+        {id, database}: {id: string; database?: string},
         {concurrentId, signal}: AxiosOptions = {},
     ) {
         return this.get<TEvTabletStateResponse>(
             this.getPath('/viewer/json/tabletinfo'),
             {
                 enums: true,
                 database,
-                node_id: nodeId,
                 filter: `(TabletId=${id})`,
             },
             {
@@ -485,7 +484,7 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
         );
     }
     getTabletHistory(
-        {id, database, nodeId}: {id: string; database?: string; nodeId?: string},
+        {id, database}: {id: string; database?: string},
         {concurrentId, signal}: AxiosOptions = {},
     ) {
         return this.get<UnmergedTEvTabletStateResponse>(
@@ -494,7 +493,6 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
                 enums: true,
                 merge: false,
                 database,
-                node_id: nodeId,
                 filter: `(TabletId=${id})`,
             },
             {

src/services/api.ts

@@ -8,10 +8,12 @@ import {clusterTabsIds, isClusterTab} from '../../../containers/Cluster/utils';
 import {parseTraceFields} from '../../../services/parsers/parseMetaCluster';
 import {isClusterInfoV2} from '../../../types/api/cluster';
 import type {TClusterInfo} from '../../../types/api/cluster';
+import type {TTabletStateInfo} from '../../../types/api/tablet';
 import {CLUSTER_DEFAULT_TITLE, DEFAULT_CLUSTER_TAB_KEY} from '../../../utils/constants';
 import {isQueryErrorResponse} from '../../../utils/query';
 import type {RootState} from '../../defaultStore';
 import {api} from '../api';
+import {selectNodeHostsMap} from '../nodesList';
 
 import type {ClusterGroupsStats, ClusterState} from './types';
 import {
@@ -169,3 +171,21 @@ export const selectClusterTitle = createSelector(
         return Name || clusterName || normalizeDomain(Domain) || CLUSTER_DEFAULT_TITLE;
     },
 );
+
+export const selectClusterTabletsWithFqdn = createSelector(
+    (state: RootState, clusterName?: string) => selectClusterInfo(state, clusterName),
+    (state: RootState) => selectNodeHostsMap(state),
+    (data, nodeHostsMap): (TTabletStateInfo & {fqdn?: string})[] => {
+        const tablets = data?.clusterData?.SystemTablets;
+        if (!tablets) {
+            return [];
+        }
+        if (!nodeHostsMap) {
+            return tablets;
+        }
+        return tablets.map((tablet) => {
+            const fqdn = tablet.NodeId === undefined ? undefined : nodeHostsMap.get(tablet.NodeId);
+            return {...tablet, fqdn};
+        });
+    },
+);

src/store/reducers/cluster/cluster.ts

@@ -41,7 +41,7 @@ export interface VDiskBreadcrumbsOptions extends PDiskBreadcrumbsOptions {
     vDiskSlotId?: string | number;
 }
 
-export interface TabletBreadcrumbsOptions extends NodeBreadcrumbsOptions {
+export interface TabletBreadcrumbsOptions extends TenantBreadcrumbsOptions {
     tabletId?: string;
     tabletType?: EType;
 }