fix: follower page

Author: astandrik

src/components/TabletNameWrapper/TabletNameWrapper.tsx

@@ -18,7 +18,7 @@ interface 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 (

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},
     );
 

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/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,7 +54,11 @@ export const tabletApi = api.injectEndpoints({
                     }, []);
 
                     const {TabletStateInfo = []} = tabletResponseData;
-                    const [tabletData = {}] = TabletStateInfo;
+                    const tabletData =
+                        TabletStateInfo.find((t) => t.FollowerId?.toString() === followerId) ||
+                        TabletStateInfo.find((t) => t.Leader) ||
+                        TabletStateInfo[0] ||
+                        {};
                     const {TabletId} = tabletData;
 
                     return {data: {id: TabletId, data: tabletData, history: historyData}};