fix: Resource associations visualization (#243)

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

@@ -64,11 +64,11 @@ const createEdgesFromEnvironmentToDeployments = (
     }));
 
 const createEdgesFromDeploymentsToResources = (relationships: Relationships) =>
-  relationships.map((resource) => {
+  relationships.nodes.map((resource) => {
     const { parent } = resource;
     if (parent == null) return null;
 
-    const allReleaseJobTriggers = relationships
+    const allReleaseJobTriggers = relationships.nodes
       .flatMap((r) => r.workspace.systems)
       .flatMap((s) => s.environments)
       .flatMap((e) => e.latestActiveReleases)
@@ -93,26 +93,48 @@ const createEdgesFromDeploymentsToResources = (relationships: Relationships) =>
   });
 
 export const getEdges = (relationships: Relationships) => {
-  const resourceToEnvEdges = relationships.flatMap((r) =>
+  const resourceToEnvEdges = relationships.nodes.flatMap((r) =>
     createEdgesFromResourceToEnvironments(
       r,
       r.workspace.systems.flatMap((s) => s.environments),
     ),
   );
-  const environmentToDeploymentEdges = relationships.flatMap((r) =>
+  const environmentToDeploymentEdges = relationships.nodes.flatMap((r) =>
     r.workspace.systems.flatMap((s) =>
       createEdgesFromEnvironmentToDeployments(s.environments, s.deployments),
     ),
   );
-  const providerEdges = relationships.flatMap((r) =>
+  const providerEdges = relationships.nodes.flatMap((r) =>
     r.provider != null ? [createEdgeFromProviderToResource(r.provider, r)] : [],
   );
   const deploymentEdges = createEdgesFromDeploymentsToResources(relationships);
 
+  const { resource } = relationships;
+
+  const fromEdges = relationships.associations.from.map((r) => ({
+    id: `${r.resource.id}-${resource.id}`,
+    source: r.resource.id,
+    target: resource.id,
+    style: { stroke: colors.neutral[800] },
+    markerEnd,
+    label: r.type,
+  }));
+
+  const toEdges = relationships.associations.to.map((r) => ({
+    id: `${resource.id}-${r.resource.id}`,
+    source: resource.id,
+    target: r.resource.id,
+    style: { stroke: colors.neutral[800] },
+    markerEnd,
+    label: r.type,
+  }));
+
   return [
     ...resourceToEnvEdges,
     ...environmentToDeploymentEdges,
     ...providerEdges,
     ...deploymentEdges,
+    ...fromEdges,
+    ...toEdges,
   ].filter(isPresent);
 };

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

@@ -9,8 +9,8 @@ import { Handle, Position } from "reactflow";
 import { useEnvironmentDrawer } from "~/app/[workspaceSlug]/(app)/_components/environment-drawer/EnvironmentDrawer";
 
 type Environment = NonNullable<
-  RouterOutputs["resource"]["relationships"][number]
->["workspace"]["systems"][number]["environments"][number];
+  RouterOutputs["resource"]["relationships"]
+>["nodes"][number]["workspace"]["systems"][number]["environments"][number];
 
 type EnvironmentNodeProps = NodeProps<{
   label: string;

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

@@ -24,15 +24,15 @@ export const nodeTypes: NodeTypes = {
 };
 
 const getResourceNodes = (relationships: Relationships) =>
-  relationships.map((r) => ({
+  relationships.nodes.map((r) => ({
     id: r.id,
     type: NodeType.Resource,
     data: { ...r, label: r.identifier },
     position: { x: 0, y: 0 },
   }));
 
 const getProviderNodes = (relationships: Relationships) =>
-  relationships
+  relationships.nodes
     .map((r) =>
       r.provider != null
         ? {
@@ -46,7 +46,7 @@ const getProviderNodes = (relationships: Relationships) =>
     .filter(isPresent);
 
 const getEnvironmentNodes = (relationships: Relationships) =>
-  relationships
+  relationships.nodes
     .flatMap((r) => r.workspace.systems)
     .flatMap((s) => s.environments.map((e) => ({ s, e })))
     .map(({ s, e }) => ({
@@ -57,7 +57,7 @@ const getEnvironmentNodes = (relationships: Relationships) =>
     }));
 
 const getDeploymentNodes = (relationships: Relationships) =>
-  relationships.flatMap((r) =>
+  relationships.nodes.flatMap((r) =>
     r.workspace.systems.flatMap((system) =>
       system.environments.flatMap((environment) =>
         system.deployments.map((deployment) => ({

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

@@ -1,3 +1,5 @@
+import { notFound } from "next/navigation";
+
 import { api } from "~/trpc/server";
 import { ResourceVisualizationDiagramProvider } from "./ResourceVisualizationDiagram";
 
@@ -7,5 +9,6 @@ export default async function VisualizePage({
   params: { targetId: string };
 }) {
   const relationships = await api.resource.relationships(targetId);
+  if (relationships == null) return notFound();
   return <ResourceVisualizationDiagramProvider relationships={relationships} />;
 }

apps/webservice/src/app/[workspaceSlug]/(app)/_components/job-drawer/JobDrawer.tsx

@@ -20,7 +20,6 @@ import { JobAgent } from "./JobAgent";
 import { JobMetadata } from "./JobMetadata";
 import { JobPropertiesTable } from "./JobProperties";
 import { JobVariables } from "./JobVariables";
-import { DependenciesDiagram } from "./RelationshipsDiagramDependencies";
 import { useJobDrawer } from "./useJobDrawer";
 
 export const JobDrawer: React.FC = () => {
@@ -128,13 +127,6 @@ export const JobDrawer: React.FC = () => {
                     <JobMetadata job={job} />
                   </div>
                 </div>
-
-                <DependenciesDiagram
-                  targetId={job.resource.id}
-                  relationships={job.relationships}
-                  targets={job.relatedResources}
-                  releaseDependencies={job.releaseDependencies}
-                />
               </div>
             )}
           </>