@eventcatalog/core 2.4.0 → 2.5.1

package/src/pages/docs/users/[id]/index.astro

@@ -29,11 +29,18 @@ const { render, ...props } = Astro.props;
 
 const { Content } = await render();
 
+const domains = props.data.ownedDomains as CollectionEntry<'domains'>[];
 const services = props.data.ownedServices as CollectionEntry<'services'>[];
 const events = props.data.ownedEvents as CollectionEntry<'events'>[];
 const commands = props.data.ownedCommands as CollectionEntry<'commands'>[];
 const teams = props.data.associatedTeams as CollectionEntry<'teams'>[];
 
+const ownedDomainsList = domains.map((p) => ({
+  label: `${p.data.name}`,
+  href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
+  tag: `v${p.data.version}`,
+}));
+
 const ownedServicesList = services.map((p) => ({
   label: `${p.data.name} (service)`,
   href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
@@ -41,7 +48,8 @@ const ownedServicesList = services.map((p) => ({
 }));
 
 const ownedMessageList = [...events, ...commands].map((p) => ({
-  label: `${p.data.name} (${p.collection.slice(0, -1)})`,
+  label: `${p.data.name}`,
+  badge: p.collection,
   color: p.collection === 'events' ? 'orange' : 'blue',
   tag: `v${p.data.version}`,
   href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
@@ -91,7 +99,11 @@ const associatedTeams = teams.map((o) => ({
       <div class="border-b border-gray-200">
         <div class="mx-auto max-w-7xl px-6 lg:px-8">
           <div class="mx-auto max-w-2xl lg:max-w-none">
-            <dl class="hidden lg:grid grid-cols-1 gap-0.5 overflow-hidden rounded-2xl text-center sm:grid-cols-3 lg:grid-cols-3">
+            <dl class="hidden lg:grid grid-cols-1 gap-0.5 overflow-hidden rounded-2xl text-center sm:grid-cols-4 lg:grid-cols-4">
+              <div class="flex flex-col p-8">
+                <dt class="text-sm font-semibold leading-6 text-gray-600"># owned domains</dt>
+                <dd class="order-first text-3xl font-semibold tracking-tight text-gray-900">{ownedDomainsList.length}</dd>
+              </div>
               <div class="flex flex-col p-8">
                 <dt class="text-sm font-semibold leading-6 text-gray-600"># owned services</dt>
                 <dd class="order-first text-3xl font-semibold tracking-tight text-gray-900">{ownedServicesList.length}</dd>
@@ -118,18 +130,25 @@ const associatedTeams = teams.map((o) => ({
     </main>
     <aside class="sticky top-20 h-[calc(100vh-theme(spacing.16))] w-56 overflow-y-auto">
       <div class="divide-y-2 divide-gray-100">
+        <PillList
+          color="pink"
+          title={`Owned domains (${ownedDomainsList.length})`}
+          pills={ownedDomainsList}
+          emptyMessage={`${props.data.name} does not own any domains.`}
+          client:load
+        />
         <PillList
           color="pink"
           title={`Owned services (${ownedServicesList.length})`}
           pills={ownedServicesList}
-          emptyMessage={`${props.data.name} does not own any services .`}
+          emptyMessage={`${props.data.name} does not own any services.`}
           client:load
         />
         <PillList
           color="orange"
           title={`Owned messages (${ownedMessageList.length})`}
           pills={ownedMessageList}
-          emptyMessage={`${props.data.name} does not own any messages .`}
+          emptyMessage={`${props.data.name} does not own any messages.`}
           client:load
         />
         <OwnersList

package/src/pages/visualiser/[type]/[id]/[version]/index.astro

@@ -5,12 +5,19 @@ import type { CollectionTypes } from '@types';
 import { getCommands } from '@utils/commands';
 import { getDomains } from '@utils/domains/domains';
 import { getEvents } from '@utils/events';
+import { getFlows } from '@utils/flows/flows';
 import { getServices } from '@utils/services/services';
 import { buildUrl } from '@utils/url-builder';
 import type { CollectionEntry } from 'astro:content';
 
 export async function getStaticPaths() {
-  const [services, events, commands, domains] = await Promise.all([getServices(), getEvents(), getCommands(), getDomains()]);
+  const [services, events, commands, domains, flows] = await Promise.all([
+    getServices(),
+    getEvents(),
+    getCommands(),
+    getDomains(),
+    getFlows(),
+  ]);
 
   const buildPages = (collection: CollectionEntry<CollectionTypes>[]) => {
     return collection.map((item) => ({
@@ -26,7 +33,7 @@ export async function getStaticPaths() {
     }));
   };
 
-  return [...buildPages(services), ...buildPages(events), ...buildPages(commands), ...buildPages(domains)];
+  return [...buildPages(services), ...buildPages(events), ...buildPages(commands), ...buildPages(domains), ...buildPages(flows)];
 }
 
 const props = Astro.props;

package/src/types/index.ts

@@ -1,2 +1,2 @@
-export type CollectionTypes = 'commands' | 'events' | 'domains' | 'services';
+export type CollectionTypes = 'commands' | 'events' | 'domains' | 'services' | 'flows';
 export type CollectionMessageTypes = 'commands' | 'events';

package/src/utils/collections/util.ts

@@ -1,5 +1,6 @@
 import type { CollectionTypes } from '@types';
 import type { CollectionEntry } from 'astro:content';
+import { satisfies, validRange } from 'semver';
 
 export const getVersions = (data: CollectionEntry<CollectionTypes>[]) => {
   const allVersions = data.map((item) => item.data.version).sort();
@@ -20,3 +21,24 @@ export const getVersionForCollectionItem = (
   const latestVersion = versions[0];
   return { versions, latestVersion };
 };
+
+export const getItemsFromCollectionByIdAndSemverOrLatest = <T extends { data: { id: string; version: string } }>(
+  collection: T[],
+  id: string,
+  version?: string
+): T[] => {
+  const semverRange = validRange(version);
+  const filteredCollection = collection.filter((c) => c.data.id == id);
+
+  if (semverRange) {
+    return filteredCollection.filter((c) => satisfies(c.data.version, semverRange));
+  }
+
+  // Order by version
+  const sorted = filteredCollection.sort((a, b) => {
+    return a.data.version.localeCompare(b.data.version);
+  });
+
+  // latest version
+  return sorted.length > 0 ? [sorted[sorted.length - 1]] : [];
+};

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

@@ -2,6 +2,7 @@ import { getCommands } from '@utils/commands';
 import { calculatedNodes, createDagreGraph, generateIdForNode, generatedIdForEdge } from '@utils/node-graph-utils/utils';
 import { type CollectionEntry } from 'astro:content';
 import dagre from 'dagre';
+import { MarkerType } from 'reactflow';
 
 type DagreGraph = any;
 
@@ -50,7 +51,12 @@ export const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simpl
         label: 'invokes',
         animated: false,
         markerEnd: {
-          type: 'arrow',
+          type: MarkerType.ArrowClosed,
+          width: 40,
+          height: 40,
+        },
+        style: {
+          strokeWidth: 1,
         },
       });
     });
@@ -84,7 +90,12 @@ export const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simpl
       label: 'accepts',
       animated: false,
       markerEnd: {
-        type: 'arrow',
+        type: MarkerType.ArrowClosed,
+        width: 40,
+        height: 40,
+      },
+      style: {
+        strokeWidth: 1,
       },
     });
   });

package/src/utils/config/catalog.ts

@@ -9,6 +9,7 @@ export type CatalogConfig = {
     sidebar: {
       showPageHeadings?: boolean;
       domains?: SideBarItemConfig;
+      flows?: SideBarItemConfig;
       services?: SideBarItemConfig;
       messages?: SideBarItemConfig;
       teams?: SideBarItemConfig;

package/src/utils/domains/domains.ts

@@ -1,4 +1,4 @@
-import { getVersionForCollectionItem, getVersions } from '@utils/collections/util';
+import { getItemsFromCollectionByIdAndSemverOrLatest, getVersionForCollectionItem } from '@utils/collections/util';
 import { getCollection } from 'astro:content';
 import type { CollectionEntry } from 'astro:content';
 import path from 'path';
@@ -28,10 +28,8 @@ export const getDomains = async ({ getAllVersions = true }: Props = {}): Promise
     const servicesInDomain = domain.data.services || [];
 
     const services = servicesInDomain
-      .map((_service) => {
-        return servicesCollection.find((service) => _service.id === service.data.id);
-      })
-      .filter((e) => e !== undefined);
+      .map((_service) => getItemsFromCollectionByIdAndSemverOrLatest(servicesCollection, _service.id, _service.version))
+      .flat();
 
     return {
       ...domain,

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 { getVersionFromCollection } from '@utils/versions/versions';
+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 = getVersionFromCollection(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 { createDagreGraph, calculatedNodes } from '@utils/node-graph-utils/utils';
+import { MarkerType } from 'reactflow';
+import type { Node as NodeType } from 'reactflow';
+import { getVersionFromCollection } from '@utils/versions/versions';
+
+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 = getVersionFromCollection(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

@@ -1,8 +1,9 @@
 // import { getColor } from '@utils/colors';
 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';
+import { getVersionFromCollection } from '@utils/versions/versions';
 
 type DagreGraph = any;
 
@@ -40,12 +41,12 @@ export const getNodesAndEdges = async ({ id, defaultFlow, version, mode = 'simpl
   const messages = [...events, ...commands];
 
   const receivesHydrated = receivesRaw
-    .map((message) => getVersion(messages, message.id, message.version))
+    .map((message) => getVersionFromCollection(messages, message.id, message.version))
     .flat()
     .filter((e) => e !== undefined);
 
   const sendsHydrated = sendsRaw
-    .map((message) => getVersion(messages, message.id, message.version))
+    .map((message) => getVersionFromCollection(messages, message.id, message.version))
     .flat()
     .filter((e) => e !== undefined);
 
@@ -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/services/services.ts

@@ -1,36 +1,13 @@
 import { getVersionForCollectionItem } from '@utils/collections/util';
+import { getVersionFromCollection } from '@utils/versions/versions';
 import { getCollection } from 'astro:content';
 import type { CollectionEntry } from 'astro:content';
 import path from 'path';
-import { satisfies, validRange } from 'semver';
 
 const PROJECT_DIR = process.env.PROJECT_DIR || process.cwd();
 
 export type Service = CollectionEntry<'services'>;
 
-export const getVersion = (
-  collection: CollectionEntry<'events' | 'commands'>[],
-  id: string,
-  version?: string
-): CollectionEntry<'events' | 'commands'>[] => {
-  const data = collection;
-  const semverRange = validRange(version);
-
-  if (semverRange) {
-    return data.filter((msg) => msg.data.id == id).filter((msg) => satisfies(msg.data.version, semverRange));
-  }
-
-  const filteredEvents = data.filter((event) => event.data.id === id);
-
-  // Order by version
-  const sorted = filteredEvents.sort((a, b) => {
-    return a.data.version.localeCompare(b.data.version);
-  });
-
-  // latest version
-  return [sorted[sorted.length - 1]];
-};
-
 interface Props {
   getAllVersions?: boolean;
 }
@@ -53,12 +30,12 @@ export const getServices = async ({ getAllVersions = true }: Props = {}): Promis
     const receivesMessages = service.data.receives || [];
 
     const sends = sendsMessages
-      .map((message) => getVersion(allMessages, message.id, message.version))
+      .map((message) => getVersionFromCollection(allMessages, message.id, message.version))
       .flat()
       .filter((e) => e !== undefined);
 
     const receives = receivesMessages
-      .map((message) => getVersion(allMessages, message.id, message.version))
+      .map((message) => getVersionFromCollection(allMessages, message.id, message.version))
       .flat()
       .filter((e) => e !== undefined);
 

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,