fix: Show children resources in visualization

apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/targets/[targetId]/visualize/ResourceVisualizationDiagram.tsx

@@ -1,94 +1,33 @@
 "use client";
 
 import type { RouterOutputs } from "@ctrlplane/api";
-import type * as SCHEMA from "@ctrlplane/db/schema";
-import type { EdgeTypes, NodeTypes } from "reactflow";
 import React from "react";
-import { compact } from "lodash";
 import ReactFlow, {
   ReactFlowProvider,
   useEdgesState,
   useNodesState,
 } from "reactflow";
 
 import { useLayoutAndFitView } from "~/app/[workspaceSlug]/(app)/_components/reactflow/layout";
-import { DepEdge } from "./DepEdge";
-import {
-  createEdgeFromProviderToResource,
-  createEdgesFromResourceToEnvironments,
-} from "./edges";
-import { EnvironmentNode } from "./nodes/EnvironmentNode";
-import { ProviderNode } from "./nodes/ProviderNode";
-import { ResourceNode } from "./nodes/ResourceNode";
+import { edgeTypes, getEdges } from "./edges";
+import { getNodes, nodeTypes } from "./nodes/nodes";
 
 type Relationships = NonNullable<RouterOutputs["resource"]["relationships"]>;
 
 type ResourceVisualizationDiagramProps = {
-  resource: SCHEMA.Resource;
   relationships: Relationships;
 };
 
-enum NodeType {
-  Resource = "resource",
-  Environment = "environment",
-  Provider = "provider",
-}
-
-const nodeTypes: NodeTypes = {
-  [NodeType.Resource]: ResourceNode,
-  [NodeType.Environment]: EnvironmentNode,
-  [NodeType.Provider]: ProviderNode,
-};
-const edgeTypes: EdgeTypes = { default: DepEdge };
-
 export const ResourceVisualizationDiagram: React.FC<
   ResourceVisualizationDiagramProps
-> = ({ resource, relationships }) => {
-  const { workspace, provider } = relationships;
-  const { systems } = workspace;
+> = ({ relationships }) => {
   const [nodes, _, onNodesChange] = useNodesState<{ label: string }>(
-    compact([
-      {
-        id: resource.id,
-        type: NodeType.Resource,
-        data: { ...resource, label: resource.identifier },
-        position: { x: 0, y: 0 },
-      },
-      ...systems.flatMap((system) =>
-        system.environments.map((env) => ({
-          id: env.id,
-          type: NodeType.Environment,
-          data: {
-            environment: {
-              ...env,
-              deployments: system.deployments,
-              resource,
-            },
-            label: `${system.name}/${env.name}`,
-          },
-          position: { x: 0, y: 0 },
-        })),
-      ),
-      provider != null && {
-        id: provider.id,
-        type: NodeType.Provider,
-        data: { ...provider, label: provider.name },
-        position: { x: 0, y: 0 },
-      },
-    ]),
+    getNodes(relationships),
   );
 
-  const resourceToEnvEdges = createEdgesFromResourceToEnvironments(
-    resource,
-    systems.flatMap((s) => s.environments),
-  );
-  const providerEdge = createEdgeFromProviderToResource(provider, resource);
-
-  const [edges, __, onEdgesChange] = useEdgesState(
-    compact([...resourceToEnvEdges, providerEdge]),
-  );
+  const [edges, __, onEdgesChange] = useEdgesState(getEdges(relationships));
 
-  const setReactFlowInstance = useLayoutAndFitView(nodes, { direction: "LR" });
+  const setReactFlowInstance = useLayoutAndFitView(nodes, { direction: "TB" });
 
   return (
     <ReactFlow

apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/targets/[targetId]/visualize/edges.ts

@@ -1,40 +1,118 @@
+import type { RouterOutputs } from "@ctrlplane/api";
 import type * as SCHEMA from "@ctrlplane/db/schema";
+import type { EdgeTypes } from "reactflow";
 import { MarkerType } from "reactflow";
 import colors from "tailwindcss/colors";
+import { isPresent } from "ts-is-present";
+
+import { DepEdge } from "./DepEdge";
 
 type Provider = SCHEMA.ResourceProvider & {
   google: SCHEMA.ResourceProviderGoogle | null;
 };
 
 const markerEnd = {
   type: MarkerType.Arrow,
-  color: colors.neutral[700],
+  color: colors.neutral[800],
 };
 
-export const createEdgesFromResourceToEnvironments = (
+export const edgeTypes: EdgeTypes = { default: DepEdge };
+
+const createEdgesFromResourceToEnvironments = (
   resource: SCHEMA.Resource,
   environments: SCHEMA.Environment[],
 ) =>
   environments.map((environment) => ({
     id: `${resource.id}-${environment.id}`,
     source: resource.id,
     target: environment.id,
-    style: { stroke: colors.neutral[700] },
+    style: { stroke: colors.neutral[800] },
     markerEnd,
     label: "in",
   }));
 
-export const createEdgeFromProviderToResource = (
+const createEdgeFromProviderToResource = (
   provider: Provider | null,
   resource: SCHEMA.Resource,
 ) =>
   provider != null
     ? {
         id: `${provider.id}-${resource.id}`,
-        source: provider.id,
+        source: `${provider.id}-${resource.id}`,
         target: resource.id,
-        style: { stroke: colors.neutral[700] },
+        style: { stroke: colors.neutral[800] },
         markerEnd,
         label: "discovered",
       }
     : null;
+
+type Relationships = NonNullable<RouterOutputs["resource"]["relationships"]>;
+
+const createEdgesFromEnvironmentToDeployments = (
+  environments: SCHEMA.Environment[],
+  deployments: SCHEMA.Deployment[],
+) =>
+  environments
+    .flatMap((e) => deployments.map((d) => ({ e, d })))
+    .map(({ e, d }) => ({
+      id: `${e.id}-${d.id}`,
+      source: e.id,
+      target: `${e.id}-${d.id}`,
+      label: "deploys",
+      style: { stroke: colors.neutral[800] },
+      markerEnd,
+    }));
+
+const createEdgesFromDeploymentsToResources = (relationships: Relationships) =>
+  relationships.map((resource) => {
+    const { parent } = resource;
+    if (parent == null) return null;
+
+    const allReleaseJobTriggers = relationships
+      .flatMap((r) => r.workspace.systems)
+      .flatMap((s) => s.environments)
+      .flatMap((e) => e.latestActiveReleases)
+      .map((rel) => rel.releaseJobTrigger);
+
+    const releaseJobTrigger = allReleaseJobTriggers.find(
+      (j) => j.jobId === parent.jobId,
+    );
+    if (releaseJobTrigger == null) return null;
+
+    const { deploymentId } = releaseJobTrigger.release;
+    const { environmentId } = releaseJobTrigger;
+
+    return {
+      id: `${releaseJobTrigger.jobId}-${resource.id}`,
+      source: `${environmentId}-${deploymentId}`,
+      target: resource.id,
+      style: { stroke: colors.neutral[800] },
+      markerEnd,
+      label: "created",
+    };
+  });
+
+export const getEdges = (relationships: Relationships) => {
+  const resourceToEnvEdges = relationships.flatMap((r) =>
+    createEdgesFromResourceToEnvironments(
+      r,
+      r.workspace.systems.flatMap((s) => s.environments),
+    ),
+  );
+  const environmentToDeploymentEdges = relationships.flatMap((r) =>
+    r.workspace.systems.flatMap((s) =>
+      createEdgesFromEnvironmentToDeployments(s.environments, s.deployments),
+    ),
+  );
+  const providerEdges = relationships.flatMap((r) =>
+    r.provider != null ? [createEdgeFromProviderToResource(r.provider, r)] : [],
+  );
+  const deploymentEdges = createEdgesFromDeploymentsToResources(relationships);
+
+  return [
+    ...resourceToEnvEdges,
+    ...environmentToDeploymentEdges,
+    ...providerEdges,
+    ...deploymentEdges,
+  ].filter(isPresent);
+};

apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/targets/[targetId]/visualize/nodes/DeploymentNode.tsx

@@ -0,0 +1,107 @@
+import type * as SCHEMA from "@ctrlplane/db/schema";
+import type { NodeProps } from "reactflow";
+import React from "react";
+import { Handle, Position } from "reactflow";
+
+import { cn } from "@ctrlplane/ui";
+import { JobStatus, JobStatusReadable } from "@ctrlplane/validators/jobs";
+
+import { useJobDrawer } from "~/app/[workspaceSlug]/(app)/_components/job-drawer/useJobDrawer";
+import { api } from "~/trpc/react";
+import { ReleaseIcon } from "../../ReleaseCell";
+
+type DeploymentNodeProps = NodeProps<{
+  label: string;
+  deployment: SCHEMA.Deployment;
+  environment: SCHEMA.Environment;
+  resource: SCHEMA.Resource;
+}>;
+
+export const DeploymentNode: React.FC<DeploymentNodeProps> = ({ data }) => {
+  const { deployment, environment, resource } = data;
+  const { setJobId } = useJobDrawer();
+
+  const resourceId = resource.id;
+  const environmentId = environment.id;
+  const latestActiveReleasesQ =
+    api.resource.activeReleases.byResourceAndEnvironmentId.useQuery(
+      { resourceId, environmentId },
+      { refetchInterval: 5_000 },
+    );
+  const latestActiveReleases = latestActiveReleasesQ.data ?? [];
+  const activeRelease = latestActiveReleases.find(
+    (r) => r.releaseJobTrigger.release.deploymentId === deployment.id,
+  );
+
+  const isInProgress = latestActiveReleases.some(
+    (r) => r.releaseJobTrigger.job.status === JobStatus.InProgress,
+  );
+  const isPending = latestActiveReleases.some(
+    (r) => r.releaseJobTrigger.job.status === JobStatus.Pending,
+  );
+  const isCompleted = latestActiveReleases.every(
+    (r) => r.releaseJobTrigger.job.status === JobStatus.Completed,
+  );
+
+  const releaseJobTrigger = activeRelease?.releaseJobTrigger;
+
+  return (
+    <>
+      <div
+        className={cn(
+          "relative flex w-[250px] flex-col gap-2 rounded-md border border-neutral-800 bg-neutral-900/30 px-4 py-1",
+          isInProgress && "border-blue-500",
+          isPending && "border-neutral-500",
+          isCompleted && "border-green-500",
+          releaseJobTrigger == null && "border-neutral-800",
+          releaseJobTrigger != null && "cursor-pointer",
+        )}
+        onClick={() => {
+          if (releaseJobTrigger != null) setJobId(releaseJobTrigger.job.id);
+        }}
+      >
+        <div className="flex h-14 items-center">
+          <div className="flex min-w-0 flex-1 flex-grow items-center gap-2">
+            <span className="truncate">{deployment.name}</span>
+          </div>
+          {releaseJobTrigger != null && (
+            <div className="flex flex-shrink-0 items-center gap-2">
+              <ReleaseIcon job={releaseJobTrigger.job} />
+              <div className="text-sm">
+                <div>{releaseJobTrigger.release.version}</div>
+                <div>{JobStatusReadable[releaseJobTrigger.job.status]}</div>
+              </div>
+            </div>
+          )}
+          {releaseJobTrigger == null && (
+            <div className="flex flex-shrink-0 justify-end pr-4 text-sm text-muted-foreground">
+              No active job
+            </div>
+          )}
+        </div>
+      </div>
+      <Handle
+        type="target"
+        className={cn(
+          "h-2 w-2 rounded-full border border-neutral-800 bg-neutral-800",
+          isInProgress && "border-blue-500",
+          isPending && "border-neutral-500",
+          isCompleted && "border-green-500",
+          releaseJobTrigger == null && "border-neutral-800",
+        )}
+        position={Position.Top}
+      />
+      <Handle
+        type="source"
+        position={Position.Bottom}
+        className={cn(
+          "h-2 w-2 rounded-full border border-neutral-800 bg-neutral-800",
+          isInProgress && "border-blue-500",
+          isPending && "border-neutral-500",
+          isCompleted && "border-green-500",
+          releaseJobTrigger == null && "border-neutral-800",
+        )}
+      />
+    </>
+  );
+};