fix: whole tablet family for tabletPage (#2054)

Author: astandrik

src/containers/Tablet/Tablet.tsx

@@ -115,7 +115,9 @@ export function Tablet() {
             <PageMetaWithAutorefresh items={metaItems} />
             <LoaderWrapper loading={loading} size="l">
                 {error ? <ResponseError error={error} /> : null}
-                {currentData ? <TabletContent id={id} tablet={tablet} history={history} /> : null}
+                {currentData ? (
+                    <TabletContent id={id} tablet={tablet} history={history} database={database} />
+                ) : null}
             </LoaderWrapper>
         </Flex>
     );
@@ -125,10 +127,12 @@ function TabletContent({
     id,
     tablet,
     history,
+    database,
 }: {
     id: string;
     tablet: TTabletStateInfo;
     history: ITabletPreparedHistoryItem[];
+    database?: string;
 }) {
     const isEmpty = !Object.keys(tablet).length;
     const {Overall, HiveId, FollowerId} = tablet;
@@ -150,7 +154,7 @@ function TabletContent({
                 <TabletControls tablet={tablet} />
                 <TabletInfo tablet={tablet} />
             </Flex>
-            <TabletTabs id={id} hiveId={HiveId} history={history} />
+            <TabletTabs id={id} hiveId={HiveId} history={history} database={database} />
         </EmptyStateWrapper>
     );
 }
@@ -159,9 +163,11 @@ function TabletTabs({
     id,
     hiveId,
     history,
+    database,
 }: {
     id: string;
     hiveId?: string;
+    database?: string;
     history: ITabletPreparedHistoryItem[];
 }) {
     const [{activeTab, ...restParams}, setParams] = useQueryParams(tabletPageQueryParams);
@@ -200,7 +206,9 @@ function TabletTabs({
                     }}
                 />
             </div>
-            {tabletTab === 'history' ? <TabletTable history={history} /> : null}
+            {tabletTab === 'history' ? (
+                <TabletTable history={history} tabletId={id} database={database} />
+            ) : null}
             {tabletTab === 'channels' && !noAdvancedInfo ? (
                 <Channels id={id} hiveId={hiveId} />
             ) : null}

src/containers/Tablet/components/TabletTable/TabletTable.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import type {Column} from '@gravity-ui/react-data-table';
 import DataTable from '@gravity-ui/react-data-table';
 
@@ -6,12 +8,16 @@ import {InternalLink} from '../../../../components/InternalLink/InternalLink';
 import {ResizeableDataTable} from '../../../../components/ResizeableDataTable/ResizeableDataTable';
 import {TabletState} from '../../../../components/TabletState/TabletState';
 import {TabletUptime} from '../../../../components/UptimeViewer/UptimeViewer';
+import {getTabletPagePath} from '../../../../routes';
 import type {ITabletPreparedHistoryItem} from '../../../../types/store/tablet';
 import {getDefaultNodePath} from '../../../Node/NodePages';
 
 const TABLET_COLUMNS_WIDTH_LS_KEY = 'tabletTableColumnsWidth';
 
-const columns: Column<ITabletPreparedHistoryItem>[] = [
+const getColumns: (props: {
+    database?: string;
+    tabletId: string;
+}) => Column<ITabletPreparedHistoryItem>[] = ({database, tabletId}) => [
     {
         name: 'Generation',
         align: DataTable.RIGHT,
@@ -32,10 +38,15 @@ const columns: Column<ITabletPreparedHistoryItem>[] = [
         render: ({row}) => <TabletState state={row.state} />,
     },
     {
-        name: 'Follower ID',
+        name: 'Tablet',
         sortable: false,
         render: ({row}) => {
-            return row.leader ? 'leader' : row.followerId;
+            const tabletPath = getTabletPagePath(tabletId, {
+                database,
+                followerId: row.leader ? undefined : row.followerId?.toString(),
+            });
+            const tabletName = `${tabletId}${row.followerId ? `.${row.followerId}` : ''}`;
+            return <InternalLink to={tabletPath}>{tabletName}</InternalLink>;
         },
     },
     {
@@ -61,13 +72,20 @@ const columns: Column<ITabletPreparedHistoryItem>[] = [
 
 const TABLE_SETTINGS = {
     displayIndices: false,
+    highlightRows: true,
 };
 
 interface TabletTableProps {
     history: ITabletPreparedHistoryItem[];
+    database?: string;
+    tabletId: string;
 }
 
-export const TabletTable = ({history}: TabletTableProps) => {
+export const TabletTable = ({history, database, tabletId}: TabletTableProps) => {
+    const columns = React.useMemo(() => {
+        return getColumns({database, tabletId});
+    }, [database, tabletId]);
+
     return (
         <ResizeableDataTable
             columnsWidthLSKey={TABLET_COLUMNS_WIDTH_LS_KEY}

src/services/api/viewer.ts

@@ -280,15 +280,15 @@ export class ViewerAPI extends BaseYdbAPI {
     }
 
     getTablet(
-        {id, database}: {id: string; database?: string},
+        {id, database, followerId}: {id: string; database?: string; followerId?: string},
         {concurrentId, signal}: AxiosOptions = {},
     ) {
         return this.get<TEvTabletStateResponse>(
             this.getPath('/viewer/json/tabletinfo'),
             {
                 enums: true,
                 database,
-                filter: `(TabletId=${id})`,
+                filter: `(TabletId=${id};FollowerId=${followerId || 0})`,
             },
             {
                 concurrentId,
@@ -307,7 +307,7 @@ export class ViewerAPI extends BaseYdbAPI {
                 enums: true,
                 merge: false,
                 database,
-                filter: `(TabletId=${id})`,
+                filter: `(TabletId=${id};State!=Dead)`,
             },
             {
                 concurrentId,

src/store/reducers/tablet.ts

@@ -17,7 +17,7 @@ export const tabletApi = api.injectEndpoints({
             ) => {
                 try {
                     const [tabletResponseData, historyResponseData, nodesList] = await Promise.all([
-                        window.api.viewer.getTablet({id, database}, {signal}),
+                        window.api.viewer.getTablet({id, database, followerId}, {signal}),
                         window.api.viewer.getTabletHistory({id, database}, {signal}),
                         window.api.viewer.getNodesList({signal}),
                     ]);
@@ -27,29 +27,25 @@ export const tabletApi = api.injectEndpoints({
                         ITabletPreparedHistoryItem[]
                     >((list, nodeId) => {
                         const tabletInfo = historyResponseData[nodeId]?.TabletStateInfo;
-                        if (tabletInfo && tabletInfo.length) {
-                            const leaderTablet = tabletInfo.find((t) => t.Leader) || tabletInfo[0];
 
-                            const {ChangeTime, Generation, State, Leader, FollowerId} =
-                                leaderTablet;
+                        tabletInfo?.forEach((tablet) => {
+                            const {ChangeTime, Generation, State, Leader, FollowerId} = tablet;
 
                             const fqdn =
                                 nodeHostsMap && nodeId
                                     ? nodeHostsMap.get(Number(nodeId))?.Host
                                     : undefined;
 
-                            if (State !== 'Dead') {
-                                list.push({
-                                    nodeId,
-                                    generation: Generation,
-                                    changeTime: ChangeTime,
-                                    state: State,
-                                    leader: Leader,
-                                    followerId: FollowerId,
-                                    fqdn,
-                                });
-                            }
-                        }
+                            list.push({
+                                nodeId,
+                                generation: Generation,
+                                changeTime: ChangeTime,
+                                state: State,
+                                leader: Leader,
+                                followerId: FollowerId,
+                                fqdn,
+                            });
+                        });
                         return list;
                     }, []);