fix: Use fabric connect for status checks

Author: dawsontoth

src/config/useInstanceClient.tsx

@@ -6,12 +6,13 @@ import { useParams } from '@tanstack/react-router';
 import { useMemo } from 'react';
 
 interface UseParams {
+	clusterId?: string;
+	disableFabricConnect?: boolean;
+	forceFabricConnect?: boolean;
+	instanceId?: string;
 	operationsUrl?: string | null;
 	port?: number;
 	secure?: boolean;
-	disableFabricConnect?: boolean;
-	instanceId?: string;
-	clusterId?: string;
 }
 
 export function useInstanceClient(
@@ -46,31 +47,22 @@ export function useInstanceClientIdParams(
 			params.port,
 			params.secure,
 			params.disableFabricConnect,
+			params.forceFabricConnect,
 		],
 	);
 }
 
 export function getInstanceClientIdFromParams({
 	instanceId,
 	clusterId,
-	operationsUrl,
-	port,
-	secure,
-	disableFabricConnect,
-}: {
-	instanceId?: string;
-	clusterId?: string;
-	operationsUrl?: string | null;
-	port?: number;
-	secure?: boolean;
-	disableFabricConnect?: boolean;
-}): InstanceClientIdConfig & InstanceTypeConfig {
+	...params
+}: UseParams): InstanceClientIdConfig & InstanceTypeConfig {
 	const id = isLocalStudio ? OverallAppSignIn : instanceId ?? clusterId;
 	if (!id) {
 		throw new Error('id could not be automatically calculated in useInstanceClientIdParams');
 	}
 	return {
-		instanceClient: getInstanceClient({ id, operationsUrl, port, secure, disableFabricConnect }),
+		instanceClient: getInstanceClient({ id, ...params }),
 		entityId: id,
 		entityType: (isLocalStudio || instanceId) ? 'instance' : 'cluster',
 	};

src/features/cluster/InstanceStatusCell.tsx

@@ -12,28 +12,37 @@ import { LoaderCircleIcon, ShieldCheckIcon, ShieldXIcon } from 'lucide-react';
 import { useEffect, useMemo, useState } from 'react';
 
 export function InstanceStatusCell(
-	{ instance }: { readonly instance: Instance },
+	{ instance, index }: { readonly instance: Instance; index: number },
 ) {
-	const operationsUrl = useMemo(() => getOperationsUrlForInstance(instance), [instance]);
-	const instanceParams = useInstanceClientIdParams({ operationsUrl, instanceId: instance.id });
 	const { update: canManage } = useOrganizationClusterInstancePermissions();
+	const operationsUrl = useMemo(() => getOperationsUrlForInstance(instance), [instance]);
+	const instanceParams = useInstanceClientIdParams({
+		operationsUrl,
+		instanceId: instance.id,
+		forceFabricConnect: true,
+	});
 	const { mutate: setStatus, isPending: isSettingStatus } = useSetStatus();
 
-	// We want to spread the initial requests across 5 seconds.
-	const [randomOffset] = useState(() => Math.floor(Math.random() * 5_000));
 	const [ready, setReady] = useState(false);
 
+	// Spread the status requests out.
 	useEffect(() => {
-		const timer = setTimeout(() => setReady(true), randomOffset);
+		const timer = setTimeout(() => setReady(true), index * 500);
 		return () => clearTimeout(timer);
-	}, [randomOffset]);
+	}, [index]);
 
-	const { data: statusResponse, isLoading, isFetching } = useQuery(getStatusQueryOptions(instanceParams, ready));
+	const { data: statusResponse, isLoading, isFetching } = useQuery(
+		getStatusQueryOptions(instanceParams, ready && canManage),
+	);
 
 	const systemStatus = getSystemStatusById(statusResponse, 'availability') || 'Unknown';
 	const isAvailable = systemStatus === 'Available';
 	const isUnavailable = systemStatus === 'Unavailable';
 
+	if (!canManage) {
+		return null;
+	}
+
 	return (
 		<div className="flex items-center gap-2">
 			<Tooltip>

src/features/cluster/Instances.tsx

@@ -66,7 +66,7 @@ export function Instances() {
 						const status = cell.getValue() as string;
 						return (
 							<div className="flex items-center gap-2">
-								<InstanceStatusCell instance={cell.row.original} />
+								<InstanceStatusCell instance={cell.row.original} index={cell.row.index} />
 								{status ? <Badge variant={renderBadgeStatusVariant(status)}>{capitalizeWords(status)}</Badge> : null}
 							</div>
 						);