fix(Cluster, TabletsTable): add node fqdn and loading state (#1468)

src/containers/Cluster/Cluster.tsx

@@ -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/Tablets/Tablets.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/TabletsTable.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';
@@ -168,9 +169,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/store/reducers/cluster/cluster.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};
+        });
+    },
+);