feat(hub): improved ui for actors

rivet-gg · Jan 13, 2025 · ca91d82 · ca91d82
1 parent b66052d
commit ca91d82
Show file tree

Hide file tree

Showing 36 changed files with 867 additions and 531 deletions.
diff --git a/examples/react/actor/deno.json b/examples/react/actor/deno.json
@@ -9,13 +9,15 @@
 		"@rivet-gg/actor-protocol/ws/to_client": "../../../sdks/actor/protocol/src/ws/to_client.ts",
 		"@rivet-gg/actor-protocol/ws/to_server": "../../../sdks/actor/protocol/src/ws/to_server.ts",
 		"@rivet-gg/actor-protocol/ws": "../../../sdks/actor/protocol/src/ws/mod.ts",
+		"@rivet-gg/actor-protocol/http/inspect": "../../../sdks/actor/protocol/src/http/inspect.ts",
 		"@rivet-gg/actor-core": "../../../sdks/actor/core/src/mod.ts",
 		"@rivet-gg/actor-core/": "../../../sdks/actor/core/src/",
 		"@rivet-gg/actor-client": "../../../sdks/actor/client/src/mod.ts",
 		"@rivet-gg/actor-common": "../../../sdks/actor/common/src/mod.ts",
 		"@rivet-gg/actor-common/": "../../../sdks/actor/common/src/",
 		"@rivet-gg/actor-common/log": "../../../sdks/actor/common/src/log.ts",
 		"@rivet-gg/actor-common/utils": "../../../sdks/actor/common/src/utils.ts",
+		"@rivet-gg/actor-common/reflect": "../../../sdks/actor/common/src/reflect.ts",
 		"@core/asyncutil": "jsr:@core/asyncutil@^1.2.0",
 		"@std/assert": "jsr:@std/assert@^1.0.8",
 		"@std/async": "jsr:@std/async@^1.0.9",

diff --git a/examples/react/package.json b/examples/react/package.json
@@ -24,5 +24,6 @@
 		"@types/react-dom": "^19",
 		"typescript": "^5",
 		"unenv": "npm:@jogit/tmp-unenv"
-	}
+	},
+	"packageManager": "[email protected]+sha1.4ba7fc5c6e704fce2066ecbfb0b0d8976fe62447"
 }
diff --git a/frontend/apps/hub/index.html b/frontend/apps/hub/index.html
@@ -1,45 +1,50 @@
 <!doctype html>
 <html lang="en" class="dark">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<head>
+		<script src="https://unpkg.com/react-scan/dist/auto.global.js"></script>
 
-    <meta property="description" content="A unified platform to manage your game servers & backend." />
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-    <meta property="og:url" content="https://rivet.gg/" />
-    <meta property="og:image" content="https://rivet.gg/promo/og.png">
-    <meta property="og:image:alt" content="Rivet promotional banner">
-    <meta property="og:image:type" content="image/png">
-    <meta property="og:type" content="website" />
+		<meta property="description" content="A unified platform to manage your game servers & backend." />
 
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@rivetgg" />
-    <meta name="twitter:title" content="Rivet" />
-    <meta name="twitter:description" content="A unified platform to manage your game servers & backend.">
-    <meta name="twitter:image" content="https://rivet.gg/promo/og.png">
-    <meta name="twitter:image:alt" content="Rivet promotional banner">
+		<meta property="og:url" content="https://rivet.gg/" />
+		<meta property="og:image" content="https://rivet.gg/promo/og.png" />
+		<meta property="og:image:alt" content="Rivet promotional banner" />
+		<meta property="og:image:type" content="image/png" />
+		<meta property="og:type" content="website" />
 
-    <title>Rivet</title>
-  </head>
-  <body>
-    <div id="root"></div>
+		<meta name="twitter:card" content="summary_large_image" />
+		<meta name="twitter:site" content="@rivetgg" />
+		<meta name="twitter:title" content="Rivet" />
+		<meta
+			name="twitter:description"
+			content="A unified platform to manage your game servers & backend."
+		/>
+		<meta name="twitter:image" content="https://rivet.gg/promo/og.png" />
+		<meta name="twitter:image:alt" content="Rivet promotional banner" />
 
-    <script type="application/json" id="RIVET_CONFIG">
-      {
-        "apiUrl": "%VITE_APP_API_URL%",
-        "assetsUrl": "%VITE_APP_ASSETS_URL%",
-        "sentryDsn": "%VITE_APP_SENTRY_DSN%",
-        "sentry": {
-          "dsn": "%VITE_APP_SENTRY_DSN%",
-          "projectId": "%VITE_APP_SENTRY_PROJECT_ID%"
-        },
-        "posthog": {
-          "apiKey": "%VITE_APP_POSTHOG_API_KEY%",
-          "apiHost": "%VITE_APP_POSTHOG_HOST%"
-        },
-        "outerbaseProviderToken": "%VITE_APP_OUTERBASE_PROVIDER_TOKEN%"
-      }
-    </script>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
+		<title>Rivet</title>
+	</head>
+	<body>
+		<div id="root"></div>
+
+		<script type="application/json" id="RIVET_CONFIG">
+			{
+				"apiUrl": "%VITE_APP_API_URL%",
+				"assetsUrl": "%VITE_APP_ASSETS_URL%",
+				"sentryDsn": "%VITE_APP_SENTRY_DSN%",
+				"sentry": {
+					"dsn": "%VITE_APP_SENTRY_DSN%",
+					"projectId": "%VITE_APP_SENTRY_PROJECT_ID%"
+				},
+				"posthog": {
+					"apiKey": "%VITE_APP_POSTHOG_API_KEY%",
+					"apiHost": "%VITE_APP_POSTHOG_HOST%"
+				},
+				"outerbaseProviderToken": "%VITE_APP_OUTERBASE_PROVIDER_TOKEN%"
+			}
+		</script>
+		<script type="module" src="/src/main.tsx"></script>
+	</body>
 </html>
diff --git a/frontend/apps/hub/package.json b/frontend/apps/hub/package.json
@@ -16,6 +16,7 @@
 		"@fortawesome/free-solid-svg-icons": "^6.5.2",
 		"@fortawesome/react-fontawesome": "^0.2.2",
 		"@hookform/resolvers": "^3.3.4",
+		"@rivet-gg/actor-protocol": "*",
 		"@rivet-gg/api": "file:vendor/rivet-gg-api.tgz",
 		"@rivet-gg/api-ee": "file:vendor/rivet-gg-api-ee.tgz",
 		"@rivet-gg/components": "workspace:*",
@@ -45,7 +46,7 @@
 		"tailwind-merge": "^2.2.2",
 		"tailwindcss-animate": "^1.0.7",
 		"usehooks-ts": "^3.1.0",
-		"zod": "^3.22.4"
+		"zod": "^3.24"
 	},
 	"devDependencies": {
 		"@sentry/vite-plugin": "^2.22.2",

diff --git a/frontend/apps/hub/src/domains/project/components/actors/actor-build.tsx b/frontend/apps/hub/src/domains/project/components/actors/actor-build.tsx
@@ -0,0 +1,53 @@
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { actorBuildQueryOptions } from "../../queries";
+import { useId } from "react";
+import { Dt, Dd, Dl, WithTooltip, CopyButton } from "@rivet-gg/components";
+import { ActorTags } from "./actor-tags";
+
+interface ActorBuildProps {
+	projectNameId: string;
+	environmentNameId: string;
+	buildId: string;
+}
+
+export function ActorBuild({ projectNameId, environmentNameId, buildId }: ActorBuildProps) {
+	const { data } = useSuspenseQuery(
+		actorBuildQueryOptions({
+			projectNameId,
+			environmentNameId,
+			buildId,
+		}),
+	);
+
+	const id = useId();
+
+	return (
+		<div className="border mt-2 px-4 py-4 rounded-md relative col-span-2">
+			<p
+				id={id}
+				className="inline-block bg-card w-auto absolute -top-0 left-3 font-semibold px-0.5 -translate-y-1/2"
+			>
+				Build
+			</p>
+			<div aria-describedby={id}>
+				<Dl>
+					<Dt>Id</Dt>
+					<Dd>
+						<WithTooltip
+							content={data.id}
+							trigger={
+								<CopyButton value={data.id}>
+									<button type="button">{data.id.split("-")[0]}</button>
+								</CopyButton>
+							}
+						/>
+					</Dd>
+					<Dt>Created At</Dt>
+					<Dd>{data.createdAt.toLocaleString()}</Dd>
+					<Dt>Tags</Dt>
+					<Dd>{Object.keys(data.tags).length > 0 ? <ActorTags tags={data.tags} /> : "None"}</Dd>
+				</Dl>
+			</div>
+		</div>
+	);
+}
diff --git a/frontend/apps/hub/src/domains/project/components/actors/actor-config-tab.tsx b/frontend/apps/hub/src/domains/project/components/actors/actor-config-tab.tsx
@@ -0,0 +1,14 @@
+import { ScrollArea } from "@rivet-gg/components";
+import { ActorNetwork, ActorNetworkProps } from "./actor-network";
+import { ActorRuntime, ActorRuntimeProps } from "./actor-runtime";
+
+interface ActorConfigTabProps extends ActorRuntimeProps, ActorNetworkProps {}
+
+export function ActorConfigTab(props: ActorConfigTabProps) {
+	return (
+		<ScrollArea className="overflow-auto h-full px-4 my-2">
+			<ActorNetwork {...props} />
+			<ActorRuntime {...props} />
+		</ScrollArea>
+	);
+}
diff --git a/frontend/apps/hub/src/domains/project/components/actors/actor-network-tab.tsx b/frontend/apps/hub/src/domains/project/components/actors/actor-network-tab.tsx
diff --git a/frontend/apps/hub/src/domains/project/components/actors/actor-network.tsx b/frontend/apps/hub/src/domains/project/components/actors/actor-network.tsx
@@ -0,0 +1,64 @@
+import type { Rivet } from "@rivet-gg/api";
+import { Badge, Dd, Dl, Dt, SmallText } from "@rivet-gg/components";
+import { Fragment } from "react";
+
+export interface ActorNetworkProps extends Pick<Rivet.actor.Actor, "network"> {}
+
+const NETWORK_MODE_LABELS: Record<Rivet.actor.NetworkMode, string> = {
+	bridge: "Bridge",
+	host: "Host",
+};
+
+export function ActorNetwork({ network }: ActorNetworkProps) {
+	return (
+		<>
+			<div className="border mt-4 px-4 py-4 rounded-md relative">
+				<p className="inline-block bg-card w-auto absolute -top-0 left-3 font-semibold px-0.5 -translate-y-1/2">
+					Network{" "}
+					<Badge variant="secondary" className="ml-1">
+						{NETWORK_MODE_LABELS[network.mode]}
+					</Badge>
+				</p>
+				<div className="text-xs">
+					{Object.keys(network.ports || {}).length === 0 ? (
+						<SmallText>No ports configured</SmallText>
+					) : (
+						Object.entries(network.ports).map(([name, config]) => (
+							<Fragment key={name}>
+								<div className="border p-2 rounded-md mt-4 relative">
+									<div className="inline-block bg-card w-auto absolute -top-0 left-3 font-semibold px-0.5 -translate-y-1/2">
+										{name}{" "}
+										{config.routing.guard ? (
+											<Badge variant="outline" className="ml-1 text-xs">
+												Guard
+											</Badge>
+										) : null}
+										{config.routing.host ? (
+											<Badge variant="outline" className="ml-1 text-xs">
+												Host
+											</Badge>
+										) : null}
+									</div>
+									<div className="border-t border-card mt-3 mb-1">
+										<Dl className="ml-2">
+											<Dt>Internal port</Dt>
+											<Dd>{config.internalPort || "-"}</Dd>
+											<Dt>Protocol</Dt>
+											<Dd>{config.protocol}</Dd>
+											<Dt>Hostname</Dt>
+											<Dd>{config.hostname || "-"}</Dd>
+											<Dt>Path</Dt>
+											<Dd>{config.path || "-"}</Dd>
+											<Dt>Port</Dt>
+											<Dd>{config.port || "-"}</Dd>
+										</Dl>
+									</div>
+								</div>
+							</Fragment>
+						))
+					)}
+				</div>
+			</div>
+		</>
+	);
+}