fix: Visualization diagram v2 (#228)

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

@@ -8,12 +8,19 @@ import type {
 } from "@ctrlplane/db/schema";
 import Link from "next/link";
 import { useParams } from "next/navigation";
-import { IconCircleCheck, IconClock, IconLoader2 } from "@tabler/icons-react";
+import {
+  IconAlertCircle,
+  IconCircleCheck,
+  IconCircleDashed,
+  IconCircleX,
+  IconClock,
+  IconLoader2,
+} from "@tabler/icons-react";
 import { format } from "date-fns";
 
 import { JobStatus } from "@ctrlplane/validators/jobs";
 
-const ReleaseIcon: React.FC<{
+export const ReleaseIcon: React.FC<{
   job?: Job;
 }> = ({ job }) => {
   if (job?.status === JobStatus.Pending)
@@ -37,6 +44,37 @@ const ReleaseIcon: React.FC<{
       </div>
     );
 
+  if (job?.status === JobStatus.Cancelled)
+    return (
+      <div className="rounded-full bg-neutral-400 p-1 dark:text-black">
+        <IconCircleX strokeWidth={2} />
+      </div>
+    );
+
+  if (job?.status === JobStatus.Failure)
+    return (
+      <div className="rounded-full bg-red-400 p-1 dark:text-black">
+        <IconCircleX strokeWidth={2} />
+      </div>
+    );
+
+  if (job?.status === JobStatus.Skipped)
+    return (
+      <div className="rounded-full bg-neutral-400 p-1 dark:text-black">
+        <IconCircleDashed strokeWidth={2} />
+      </div>
+    );
+
+  if (
+    job?.status === JobStatus.InvalidJobAgent ||
+    job?.status === JobStatus.InvalidIntegration
+  )
+    return (
+      <div className="rounded-full bg-orange-500 p-1 dark:text-black">
+        <IconAlertCircle strokeWidth={2} />
+      </div>
+    );
+
   return null;
 };
 

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

@@ -25,8 +25,9 @@ import { useMatchSorterWithSearch } from "~/utils/useMatchSorter";
 import { ReleaseCell } from "./ReleaseCell";
 
 const DeploymentsTable: React.FC<{ targetId: string }> = ({ targetId }) => {
-  const jobs = api.job.byResourceId.useQuery(targetId);
-  const deployments = api.deployment.byTargetId.useQuery(targetId);
+  const resourceId = targetId;
+  const jobs = api.job.byResourceId.useQuery(resourceId);
+  const deployments = api.deployment.byTargetId.useQuery(resourceId);
   return (
     <Table className="w-full min-w-max border-separate border-spacing-0">
       <TableBody>
@@ -106,9 +107,10 @@ export default function TargetPage({
 }: {
   params: { targetId: string };
 }) {
-  const target = api.resource.byId.useQuery(params.targetId);
-  const jobs = api.job.byResourceId.useQuery(params.targetId);
-  const deployments = api.deployment.byTargetId.useQuery(params.targetId);
+  const resourceId = params.targetId;
+  const target = api.resource.byId.useQuery(resourceId);
+  const jobs = api.job.byResourceId.useQuery(resourceId);
+  const deployments = api.deployment.byTargetId.useQuery(resourceId);
 
   const unlockTarget = api.resource.unlock.useMutation();
   const lockTarget = api.resource.lock.useMutation();

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

@@ -34,10 +34,9 @@ export default function VariablePage({
 }: {
   params: { targetId: string };
 }) {
-  const deployments = api.deployment.byTargetId.useQuery(params.targetId);
-  const variables = api.deployment.variable.byTargetId.useQuery(
-    params.targetId,
-  );
+  const resourceId = params.targetId;
+  const deployments = api.deployment.byTargetId.useQuery(resourceId);
+  const variables = api.deployment.variable.byTargetId.useQuery(resourceId);
   return (
     <div className="">
       {deployments.data?.map((deployment) => {

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

@@ -15,15 +15,11 @@ import { useLayoutAndFitView } from "~/app/[workspaceSlug]/(app)/_components/rea
 import { DepEdge } from "./DepEdge";
 import {
   createEdgeFromProviderToResource,
-  createEdgesFromEnvironmentsToSystems,
   createEdgesFromResourceToEnvironments,
-  createEdgesFromSystemsToDeployments,
 } from "./edges";
-import { DeploymentNode } from "./nodes/DeploymentNode";
 import { EnvironmentNode } from "./nodes/EnvironmentNode";
 import { ProviderNode } from "./nodes/ProviderNode";
 import { ResourceNode } from "./nodes/ResourceNode";
-import { SystemNode } from "./nodes/SystemNode";
 
 type Relationships = NonNullable<RouterOutputs["resource"]["relationships"]>;
 
@@ -36,23 +32,20 @@ enum NodeType {
   Resource = "resource",
   Environment = "environment",
   Provider = "provider",
-  System = "system",
-  Deployment = "deployment",
 }
 
 const nodeTypes: NodeTypes = {
   [NodeType.Resource]: ResourceNode,
   [NodeType.Environment]: EnvironmentNode,
   [NodeType.Provider]: ProviderNode,
-  [NodeType.System]: SystemNode,
-  [NodeType.Deployment]: DeploymentNode,
 };
 const edgeTypes: EdgeTypes = { default: DepEdge };
 
 export const ResourceVisualizationDiagram: React.FC<
   ResourceVisualizationDiagramProps
 > = ({ resource, relationships }) => {
-  const { systems, provider } = relationships;
+  const { workspace, provider } = relationships;
+  const { systems } = workspace;
   const [nodes, _, onNodesChange] = useNodesState<{ label: string }>(
     compact([
       {
@@ -65,21 +58,14 @@ export const ResourceVisualizationDiagram: React.FC<
         system.environments.map((env) => ({
           id: env.id,
           type: NodeType.Environment,
-          data: { ...env, label: env.name },
-          position: { x: 0, y: 0 },
-        })),
-      ),
-      ...systems.map((system) => ({
-        id: system.id,
-        type: NodeType.System,
-        data: { ...system, label: system.name },
-        position: { x: 0, y: 0 },
-      })),
-      ...systems.flatMap((system) =>
-        system.deployments.map((deployment) => ({
-          id: deployment.id,
-          type: NodeType.Deployment,
-          data: { ...deployment, label: deployment.name },
+          data: {
+            environment: {
+              ...env,
+              deployments: system.deployments,
+              resource,
+            },
+            label: `${system.name}/${env.name}`,
+          },
           position: { x: 0, y: 0 },
         })),
       ),
@@ -96,20 +82,13 @@ export const ResourceVisualizationDiagram: React.FC<
     resource,
     systems.flatMap((s) => s.environments),
   );
-  const envToSystemEdges = createEdgesFromEnvironmentsToSystems(systems);
-  const systemToDeploymentsEdges = createEdgesFromSystemsToDeployments(systems);
   const providerEdge = createEdgeFromProviderToResource(provider, resource);
 
   const [edges, __, onEdgesChange] = useEdgesState(
-    compact([
-      ...resourceToEnvEdges,
-      ...envToSystemEdges,
-      ...systemToDeploymentsEdges,
-      providerEdge,
-    ]),
+    compact([...resourceToEnvEdges, providerEdge]),
   );
 
-  const setReactFlowInstance = useLayoutAndFitView(nodes);
+  const setReactFlowInstance = useLayoutAndFitView(nodes, { direction: "LR" });
 
   return (
     <ReactFlow

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

@@ -24,35 +24,6 @@ export const createEdgesFromResourceToEnvironments = (
     label: "in",
   }));
 
-type System = SCHEMA.System & {
-  environments: SCHEMA.Environment[];
-  deployments: SCHEMA.Deployment[];
-};
-
-export const createEdgesFromEnvironmentsToSystems = (systems: System[]) =>
-  systems.flatMap((system) =>
-    system.environments.map((environment) => ({
-      id: `${environment.id}-${system.id}`,
-      source: environment.id,
-      target: system.id,
-      style: { stroke: colors.neutral[700] },
-      markerEnd,
-      label: "part of",
-    })),
-  );
-
-export const createEdgesFromSystemsToDeployments = (systems: System[]) =>
-  systems.flatMap((system) =>
-    system.deployments.map((deployment) => ({
-      id: `${system.id}-${deployment.id}`,
-      source: system.id,
-      target: deployment.id,
-      style: { stroke: colors.neutral[700] },
-      markerEnd,
-      label: "deploys",
-    })),
-  );
-
 export const createEdgeFromProviderToResource = (
   provider: Provider | null,
   resource: SCHEMA.Resource,