feat: followerId for tablets (#2025)

Author: astandrik

src/components/ShardsTable/columns.tsx

@@ -19,8 +19,12 @@ export const getPathColumn: GetShardsColumn = ({schemaPath = ''}) => {
         name: TOP_SHARDS_COLUMNS_IDS.Path,
         header: TOP_SHARDS_COLUMNS_TITLES.Path,
         render: ({row}) => {
-            // row.Path - relative schema path
-            return <LinkToSchemaObject path={schemaPath + row.Path}>{row.Path}</LinkToSchemaObject>;
+            // row.RelativePath - relative schema path
+            return (
+                <LinkToSchemaObject path={schemaPath + row.RelativePath}>
+                    {row.RelativePath}
+                </LinkToSchemaObject>
+            );
         },
         width: 300,
     };
@@ -43,7 +47,12 @@ export const getTabletIdColumn: GetShardsColumn = () => {
             if (!row.TabletId) {
                 return EMPTY_DATA_PLACEHOLDER;
             }
-            return <TabletNameWrapper tabletId={row.TabletId} />;
+            return (
+                <TabletNameWrapper
+                    tabletId={row.TabletId}
+                    followerId={row.FollowerId || undefined}
+                />
+            );
         },
         width: 220,
     };

src/components/TabletNameWrapper/TabletNameWrapper.tsx

@@ -11,13 +11,15 @@ import i18n from './i18n';
 
 interface TabletNameWrapperProps {
     tabletId: string | number;
+    followerId?: string | number;
     database?: string;
 }
 
-export function TabletNameWrapper({tabletId, database}: TabletNameWrapperProps) {
+export function TabletNameWrapper({tabletId, followerId, database}: TabletNameWrapperProps) {
     const isUserAllowedToMakeChanges = useIsUserAllowedToMakeChanges();
 
-    const tabletPath = getTabletPagePath(tabletId, {database});
+    const tabletPath = getTabletPagePath(tabletId, {database, followerId: followerId?.toString()});
+    const tabletName = `${tabletId}${followerId ? `.${followerId}` : ''}`;
 
     return (
         <CellWithPopover
@@ -37,7 +39,7 @@ export function TabletNameWrapper({tabletId, database}: TabletNameWrapperProps)
             behavior={PopoverBehavior.Immediate}
         >
             <EntityStatus
-                name={tabletId.toString()}
+                name={tabletName}
                 path={tabletPath}
                 hasClipboardButton
                 showStatus={false}

src/containers/Tablet/Tablet.tsx

@@ -63,12 +63,12 @@ export function Tablet() {
 
     const {id} = useParams<{id: string}>();
 
-    const [{database: queryDatabase, clusterName: queryClusterName}] =
+    const [{database: queryDatabase, clusterName: queryClusterName, followerId: queryFollowerId}] =
         useQueryParams(tabletPageQueryParams);
 
     const [autoRefreshInterval] = useAutoRefreshInterval();
     const {currentData, isFetching, error} = tabletApi.useGetTabletQuery(
-        {id, database: queryDatabase ?? undefined},
+        {id, database: queryDatabase ?? undefined, followerId: queryFollowerId ?? undefined},
         {pollingInterval: autoRefreshInterval},
     );
 
@@ -131,7 +131,9 @@ function TabletContent({
     history: ITabletPreparedHistoryItem[];
 }) {
     const isEmpty = !Object.keys(tablet).length;
-    const {Overall, HiveId} = tablet;
+    const {Overall, HiveId, FollowerId} = tablet;
+
+    const tabletName = `${id}${FollowerId ? `.${FollowerId}` : ''}`;
 
     return (
         <EmptyStateWrapper
@@ -143,7 +145,7 @@ function TabletContent({
                 <EntityPageTitle
                     entityName={i18n('tablet.header')}
                     status={Overall ?? EFlag.Grey}
-                    id={id}
+                    id={tabletName}
                 />
                 <TabletControls tablet={tablet} />
                 <TabletInfo tablet={tablet} />

src/containers/Tablets/TabletsTable.tsx

@@ -53,7 +53,13 @@ function getColumns({database}: {database?: string}) {
                     return EMPTY_DATA_PLACEHOLDER;
                 }
 
-                return <TabletNameWrapper tabletId={row.TabletId} database={database} />;
+                return (
+                    <TabletNameWrapper
+                        tabletId={row.TabletId}
+                        database={database}
+                        followerId={row.FollowerId || undefined}
+                    />
+                );
             },
         },
         {

src/routes.ts

@@ -124,6 +124,7 @@ export const tabletPageQueryParams = {
     database: StringParam,
     clusterName: StringParam,
     activeTab: StringParam,
+    followerId: StringParam,
 } as const;
 
 type TabletPageQuery = QueryParamsTypeFromQueryObject<typeof tabletPageQueryParams>;

src/store/reducers/shardsWorkload/shardsWorkload.ts

@@ -70,18 +70,14 @@ LIMIT 20`;
 }
 
 function createShardQueryImmediate(path: string, database: string, sortOrder?: SortOrder[]) {
-    const pathSelect = `CAST(SUBSTRING(CAST(Path AS String), ${database.length}) AS Utf8) AS Path`;
+    const pathSelect = `CAST(SUBSTRING(CAST(Path AS String), ${database.length}) AS Utf8) AS RelativePath`;
 
     const orderBy = prepareOrderByFromTableSort(sortOrder);
 
     return `${QUERY_TECHNICAL_MARK}    
 SELECT
     ${pathSelect},
-    TabletId,
-    CPUCores,
-    DataSize,
-    NodeId,
-    InFlightTxCount
+    \`.sys/partition_stats\`.*
 FROM \`.sys/partition_stats\`
 WHERE
     Path='${path}'

src/store/reducers/tablet.ts

@@ -8,7 +8,11 @@ export const tabletApi = api.injectEndpoints({
     endpoints: (build) => ({
         getTablet: build.query({
             queryFn: async (
-                {id, database}: {id: string; database?: string; nodeId?: string},
+                {
+                    id,
+                    database,
+                    followerId,
+                }: {id: string; database?: string; nodeId?: string; followerId?: string},
                 {signal},
             ) => {
                 try {
@@ -50,8 +54,12 @@ export const tabletApi = api.injectEndpoints({
                     }, []);
 
                     const {TabletStateInfo = []} = tabletResponseData;
-                    const [tabletData = {}] = TabletStateInfo;
-                    const {TabletId} = tabletData;
+                    const tabletData =
+                        followerId === undefined
+                            ? TabletStateInfo.find((t) => t.Leader)
+                            : TabletStateInfo.find((t) => t.FollowerId?.toString() === followerId);
+
+                    const {TabletId} = tabletData || {};
 
                     return {data: {id: TabletId, data: tabletData, history: historyData}};
                 } catch (error) {