@eventcatalog/core 2.4.0 → 2.5.0

package/src/utils/domains/node-graph.ts

@@ -1,14 +1,15 @@
-// import { getColor } from '@utils/colors';
 import { getCollection } from 'astro:content';
 import dagre from 'dagre';
 import { getNodesAndEdges as getServicesNodeAndEdges } from '../services/node-graph';
+import merge from 'lodash.merge';
+import { getItemsFromCollectionByIdAndSemverOrLatest } from '@utils/collections/util';
 
 type DagreGraph = any;
 
 // Creates a new dagre graph
 export const getDagreGraph = () => {
   const graph = new dagre.graphlib.Graph({ compound: true });
-  graph.setGraph({ rankdir: 'LR', ranksep: 200, nodesep: 200 });
+  graph.setGraph({ rankdir: 'LR', ranksep: 200, nodesep: 100 });
   graph.setDefaultEdgeLabel(() => ({}));
   return graph;
 };
@@ -22,8 +23,8 @@ interface Props {
 
 export const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simple' }: Props) => {
   const flow = defaultFlow || getDagreGraph();
-  let nodes = [] as any,
-    edges = [] as any;
+  let nodes = new Map(),
+    edges = new Map();
 
   const domains = await getCollection('domains');
 
@@ -39,9 +40,16 @@ export const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simpl
 
   const rawServices = domain?.data.services || [];
 
+  const servicesCollection = await getCollection('services');
+
+  const domainServicesWithVersion = rawServices
+    .map((service) => getItemsFromCollectionByIdAndSemverOrLatest(servicesCollection, service.id, service.version))
+    .flat()
+    .map((svc) => ({ id: svc.data.id, version: svc.data.version }));
+
   // Get all the nodes for everyhing
 
-  for (const service of rawServices) {
+  for (const service of domainServicesWithVersion) {
     const { nodes: serviceNodes, edges: serviceEdges } = await getServicesNodeAndEdges({
       id: service.id,
       version: service.version,
@@ -49,12 +57,23 @@ export const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simpl
       mode,
       renderAllEdges: true,
     });
-    nodes = [...nodes, ...serviceNodes];
-    edges = [...edges, ...serviceEdges];
+    serviceNodes.forEach((n) => {
+      /**
+       * A message could be sent by one service and received by another service on the same domain.
+       * So, we need deep merge the message to keep the `showSource` and `showTarget` as true.
+       *
+       * Let's see an example:
+       *  Take an `OrderPlaced` event sent by the `OrderService` `{ showSource: true }` and
+       *  received by `PaymentService` `{ showTarget: true }`.
+       */
+      nodes.set(n.id, nodes.has(n.id) ? merge(nodes.get(n.id), n) : n);
+    });
+    // @ts-ignore
+    serviceEdges.forEach((e) => edges.set(e.id, e));
   }
 
   return {
-    nodes: nodes,
-    edges: edges,
+    nodes: [...nodes.values()],
+    edges: [...edges.values()],
   };
 };

package/src/utils/events/node-graph.ts

@@ -3,6 +3,7 @@ import { getEvents } from '@utils/events';
 import type { CollectionEntry } from 'astro:content';
 import dagre from 'dagre';
 import { calculatedNodes, createDagreGraph, generatedIdForEdge, generateIdForNode } from '../node-graph-utils/utils';
+import { MarkerType } from 'reactflow';
 
 type DagreGraph = any;
 
@@ -51,7 +52,12 @@ export const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simpl
         label: 'publishes event',
         animated: false,
         markerEnd: {
-          type: 'arrow',
+          type: MarkerType.ArrowClosed,
+          width: 40,
+          height: 40,
+        },
+        style: {
+          strokeWidth: 1,
         },
       });
     });
@@ -85,7 +91,12 @@ export const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simpl
       label: 'subscribed by',
       animated: false,
       markerEnd: {
-        type: 'arrow',
+        type: MarkerType.ArrowClosed,
+        width: 40,
+        height: 40,
+      },
+      style: {
+        strokeWidth: 1,
       },
     });
   });

package/src/utils/flows/flows.ts

@@ -0,0 +1,59 @@
+import { getVersionForCollectionItem, getVersions } from '@utils/collections/util';
+import { getVersion } from '@utils/services/services';
+import { getCollection } from 'astro:content';
+import type { CollectionEntry } from 'astro:content';
+import path from 'path';
+
+const PROJECT_DIR = process.env.PROJECT_DIR || process.cwd();
+
+export type Flow = CollectionEntry<'flows'>;
+
+interface Props {
+  getAllVersions?: boolean;
+}
+
+export const getFlows = async ({ getAllVersions = true }: Props = {}): Promise<Flow[]> => {
+  // Get flows that are not versioned
+  const flows = await getCollection('flows', (flow) => {
+    return (getAllVersions || !flow.slug.includes('versioned')) && flow.data.hidden !== true;
+  });
+
+  const events = await getCollection('events');
+  const commands = await getCollection('commands');
+
+  const allMessages = [...events, ...commands];
+
+  // @ts-ignore // TODO: Fix this type
+  return flows.map((flow) => {
+    // @ts-ignore
+    const { latestVersion, versions } = getVersionForCollectionItem(flow, flows);
+    const steps = flow.data.steps || [];
+
+    const hydrateSteps = steps.map((step) => {
+      if (!step.message) return { ...flow, data: { ...flow.data, type: 'node' } };
+      const message = getVersion(allMessages, step.message.id, step.message.version);
+      return {
+        ...step,
+        type: 'message',
+        message: message,
+      };
+    });
+
+    return {
+      ...flow,
+      data: {
+        ...flow.data,
+        steps: hydrateSteps,
+        versions,
+        latestVersion,
+      },
+      catalog: {
+        path: path.join(flow.collection, flow.id.replace('/index.mdx', '')),
+        absoluteFilePath: path.join(PROJECT_DIR, flow.collection, flow.id.replace('/index.mdx', '/index.md')),
+        filePath: path.join(process.cwd(), 'src', 'catalog-files', flow.collection, flow.id.replace('/index.mdx', '')),
+        publicPath: path.join('/generated', flow.collection, flow.id.replace('/index.mdx', '')),
+        type: 'flow',
+      },
+    };
+  });
+};

package/src/utils/flows/node-graph.ts

@@ -0,0 +1,153 @@
+import { getCollection, type CollectionEntry } from 'astro:content';
+import dagre from 'dagre';
+import { getVersion } from '../services/services';
+import { createDagreGraph, calculatedNodes } from '@utils/node-graph-utils/utils';
+import { MarkerType } from 'reactflow';
+import type { Node as NodeType } from 'reactflow';
+
+type DagreGraph = any;
+
+interface Props {
+  id: string;
+  version: string;
+  defaultFlow?: DagreGraph;
+  mode?: 'simple' | 'full';
+  renderAllEdges?: boolean;
+}
+
+const getServiceNode = (step: any, services: CollectionEntry<'services'>[]) => {
+  const service = services.find(
+    (service) => service.data.id === step.service.id && service.data.version === step.service.version
+  );
+  return {
+    ...step,
+    type: service ? service.collection : 'step',
+    service,
+  };
+};
+
+const getMessageNode = (step: any, messages: CollectionEntry<'events' | 'commands'>[]) => {
+  const messagesForVersion = getVersion(messages, step.message.id, step.message.version);
+  const message = messagesForVersion[0];
+  return {
+    ...step,
+    type: message ? message.collection : 'step',
+    message,
+  };
+};
+
+export const getNodesAndEdges = async ({ id, defaultFlow, version, mode = 'simple', renderAllEdges = false }: Props) => {
+  const graph = defaultFlow || createDagreGraph({ ranksep: 360, nodesep: 200 });
+  const nodes = [] as any,
+    edges = [] as any;
+
+  const flows = await getCollection('flows');
+  const flow = flows.find((flow) => flow.data.id === id && flow.data.version === version);
+
+  // Nothing found...
+  if (!flow) {
+    return {
+      nodes: [],
+      edges: [],
+    };
+  }
+
+  const events = await getCollection('events');
+  const commands = await getCollection('commands');
+  const services = await getCollection('services');
+
+  const messages = [...events, ...commands];
+
+  const steps = flow?.data.steps || [];
+
+  //  Hydrate the steps with information they may need.
+  const hydratedSteps = steps.map((step: any) => {
+    if (step.service) return getServiceNode(step, services);
+    if (step.message) return getMessageNode(step, messages);
+    if (step.actor) return { ...step, type: 'actor', actor: step.actor };
+    if (step.externalSystem) return { ...step, type: 'externalSystem', externalSystem: step.externalSystem };
+    return { ...step, type: 'step' };
+  });
+
+  // Create nodes
+  hydratedSteps.forEach((step, index: number) => {
+    const node = {
+      id: `step-${step.id}`,
+      sourcePosition: 'right',
+      targetPosition: 'left',
+      data: {
+        mode,
+        step: step,
+        showTarget: true,
+        showSource: true,
+      },
+      position: { x: 250, y: index * 150 },
+      type: step.type,
+    } as NodeType;
+
+    if (step.service) node.data.service = step.service;
+    if (step.message) node.data.message = step.message;
+    if (step.actor) node.data.actor = step.actor;
+    if (step.externalSystem) node.data.externalSystem = step.externalSystem;
+
+    nodes.push(node);
+  });
+
+  // Create Edges
+  hydratedSteps.forEach((step, index: number) => {
+    let paths = step.next_steps || [];
+
+    if (step.next_step) {
+      // If its a string or number
+      if (!step.next_step?.id) {
+        paths = [{ id: step.next_step }];
+      } else {
+        paths = [step.next_step];
+      }
+    }
+
+    paths = paths.map((path: any) => {
+      if (typeof path === 'string') {
+        return { id: path };
+      }
+      return path;
+    });
+
+    paths.forEach((path: any) => {
+      edges.push({
+        id: `step-${step.id}-step-${path.id}`,
+        source: `step-${step.id}`,
+        target: `step-${path.id}`,
+        type: 'smoothstep',
+        label: path.label,
+        animated: true,
+        markerEnd: {
+          type: MarkerType.ArrowClosed,
+          width: 20,
+          height: 20,
+          color: '#acacac',
+        },
+        style: {
+          strokeWidth: 2,
+          stroke: '#acacac',
+        },
+      });
+    });
+  });
+
+  nodes.forEach((node: any) => {
+    graph.setNode(node.id, { width: 150, height: 100 });
+  });
+
+  edges.forEach((edge: any) => {
+    graph.setEdge(edge.source, edge.target);
+  });
+
+  // Render the diagram in memory getting hte X and Y
+  dagre.layout(graph);
+
+  return {
+    nodes: calculatedNodes(graph, nodes),
+    edges: edges,
+  };
+};

package/src/utils/services/node-graph.ts

@@ -3,6 +3,7 @@ import { getCollection, type CollectionEntry } from 'astro:content';
 import dagre from 'dagre';
 import { getVersion } from './services';
 import { createDagreGraph, generateIdForNode, generatedIdForEdge, calculatedNodes } from '@utils/node-graph-utils/utils';
+import { MarkerType } from 'reactflow';
 
 type DagreGraph = any;
 
@@ -73,7 +74,12 @@ export const getNodesAndEdges = async ({ id, defaultFlow, version, mode = 'simpl
         label: receive?.collection === 'events' ? 'receives event' : 'accepts',
         animated: false,
         markerEnd: {
-          type: 'arrow',
+          type: MarkerType.ArrowClosed,
+          width: 40,
+          height: 40,
+        },
+        style: {
+          strokeWidth: 1,
         },
       });
     });
@@ -107,7 +113,12 @@ export const getNodesAndEdges = async ({ id, defaultFlow, version, mode = 'simpl
       label: send?.collection === 'events' ? 'publishes event' : 'invokes command',
       animated: false,
       markerEnd: {
-        type: 'arrow',
+        type: MarkerType.ArrowClosed,
+        width: 40,
+        height: 40,
+      },
+      style: {
+        strokeWidth: 1,
       },
     });
   });

package/src/utils/teams.ts

@@ -9,7 +9,8 @@ export const getTeams = async (): Promise<Team[]> => {
   const teams = await getCollection('teams', (team) => {
     return team.data.hidden !== true;
   });
-
+  // What do they own?
+  const domains = await getCollection('domains');
   // What do they own?
   const services = await getCollection('services');
   // What do they own?
@@ -17,6 +18,10 @@ export const getTeams = async (): Promise<Team[]> => {
   const commands = await getCollection('commands');
 
   return teams.map((team) => {
+    const ownedDomains = domains.filter((domain) => {
+      return domain.data.owners?.find((owner) => owner.slug === team.data.id);
+    });
+
     const ownedServices = services.filter((service) => {
       return service.data.owners?.find((owner) => owner.slug === team.data.id);
     });
@@ -33,6 +38,7 @@ export const getTeams = async (): Promise<Team[]> => {
       ...team,
       data: {
         ...team.data,
+        ownedDomains,
         ownedServices,
         ownedCommands,
         ownedEvents,

package/src/utils/users.ts

@@ -10,6 +10,9 @@ export const getUsers = async (): Promise<User[]> => {
     return user.data.hidden !== true;
   });
 
+  // What do they own?
+  const domains = await getCollection('domains');
+
   // What do they own?
   const services = await getCollection('services');
 
@@ -24,6 +27,10 @@ export const getUsers = async (): Promise<User[]> => {
   });
 
   return users.map((user) => {
+    const ownedDomains = domains.filter((domain) => {
+      return domain.data.owners?.find((owner) => owner.slug === user.data.id);
+    });
+
     const ownedServices = services.filter((service) => {
       return service.data.owners?.find((owner) => owner.slug === user.data.id);
     });
@@ -44,6 +51,7 @@ export const getUsers = async (): Promise<User[]> => {
       ...user,
       data: {
         ...user.data,
+        ownedDomains,
         ownedServices,
         ownedEvents,
         ownedCommands,

package/tailwind.config.mjs

@@ -7,6 +7,7 @@ export default {
   safelist: [
     {pattern: /border-.*-(200|400|500)/},
     {pattern: /bg-.*-(100|200|400|500)/},
+    {pattern: /from-.*-(100|200|400|500|700)/},
     {pattern: /text-.*-(400|500|800)/},
     'border-blue-200',
     'border-green-300',