feat: add datacenter field to actors list row (#3018)

Closes FRONT-793

### TL;DR

Added the ability to display datacenter information for actors in the actors list.

### What changed?

- Added `actorDatacenterQueryOptions` to the default data provider to fetch datacenter information for actors
- Added a new `showDatacenter` filter option in the actor filters context
- Created a new `Datacenter` component in the actors list row to display the datacenter information
- Extended the `Actor` type to include an optional `datacenter` field
- Made the "showDestroyed" filter available for both "engine" and "cloud" app types

### How to test?

1. Open the actors list view
2. Enable the "Show Actors Datacenter" filter option
3. Verify that datacenter information appears under the actor ID for actors that have datacenter data
4. Verify that actors without datacenter data show a "-" indicator
5. Disable the filter and confirm the datacenter information is hidden

### Why make this change?

This change improves observability by allowing users to see which datacenter each actor is running in. This information is particularly valuable in multi-datacenter deployments where understanding the physical location of actors can help with troubleshooting, performance analysis, and capacity planning.

Author: jog1t

frontend/src/app/data-providers/default-data-provider.tsx

@@ -239,6 +239,12 @@ const defaultContext = {
 			select: (data) => data.key,
 		});
 	},
+	actorDatacenterQueryOptions(actorId: ActorId) {
+		return queryOptions({
+			...this.actorQueryOptions(actorId),
+			select: (data) => data.datacenter ?? null,
+		});
+	},
 	actorDestroyMutationOptions(actorId: ActorId) {
 		return {
 			mutationKey: ["actor", actorId, "destroy"],

frontend/src/components/actors/actor-filters-context.tsx

@@ -26,7 +26,7 @@ export const ACTORS_FILTERS_DEFINITIONS = {
 		operators: [FilterOp.EQUAL],
 		excludes: ["id"],
 	},
-	...(__APP_TYPE__ === "engine"
+	...(__APP_TYPE__ === "engine" || __APP_TYPE__ === "cloud"
 		? {
 				showDestroyed: {
 					type: "boolean",
@@ -41,6 +41,12 @@ export const ACTORS_FILTERS_DEFINITIONS = {
 		category: "display",
 		ephemeral: true,
 	},
+	showDatacenter: {
+		type: "boolean",
+		label: "Show Actors Datacenter",
+		category: "display",
+		ephemeral: true,
+	},
 	wakeOnSelect: {
 		type: "boolean",
 		label: "Auto-wake Actors on select",

frontend/src/components/actors/actors-list-row.tsx

@@ -66,6 +66,7 @@ export const ActorsListRow = memo(
 							/>
 							<div className="min-w-0">
 								<Id actorId={actorId} />
+								<Datacenter actorId={actorId} />
 								<Tags actorId={actorId} />
 							</div>
 
@@ -110,6 +111,31 @@ function Id({ actorId }: { actorId: ActorId }) {
 	);
 }
 
+function Datacenter({ actorId }: { actorId: ActorId }) {
+	const { pick } = useActorsFilters();
+	const { data: datacenter } = useQuery(
+		useDataProvider().actorDatacenterQueryOptions(actorId),
+	);
+
+	const showDatacenter = useSearch({
+		strict: false,
+		select: (search) =>
+			(pick(search).showDatacenter as FilterValue)?.value?.includes("1"),
+	});
+
+	if (!showDatacenter) {
+		return <div />;
+	}
+
+	if (!datacenter) {
+		return <SmallText className="text-foreground">-</SmallText>;
+	}
+
+	return (
+		<SmallText className="text-muted-foreground">{datacenter}</SmallText>
+	);
+}
+
 function Tags({ actorId }: { actorId: ActorId }) {
 	const { data } = useQuery(useDataProvider().actorKeysQueryOptions(actorId));
 

frontend/src/components/actors/queries/index.ts

@@ -62,6 +62,7 @@ export type Actor = Omit<InspectorActor, "id" | "key"> & {
 	sleepingAt?: string | null;
 	connectableAt?: string | null;
 	pendingAllocationAt?: string | null;
+	datacenter?: string | null;
 } & { id: ActorId };
 
 export enum CrashPolicy {