Merge branch 'main' into astandrik.display-a-list-of-operations-1414

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

@@ -144,4 +144,11 @@
             background-color: transparent;
         }
     }
+    &__overview-title {
+        @include info-viewer-title();
+    }
+    &__overview-item-content {
+        text-align: end;
+        white-space: nowrap;
+    }
 }