@eventcatalog/core 2.33.11 → 2.34.0

package/eventcatalog/src/pages/docs/teams/[id]/index.astro

@@ -55,7 +55,7 @@ const ownedServicesList = services.map((p) => ({
   tag: `v${p.data.version}`,
 }));
 
-const ownedEventsList = [...events, ...commands].map((p) => ({
+const ownedMessagesList = [...events, ...commands, ...queries].map((p) => ({
   label: `${p.data.name}`,
   href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
   color: p.collection === 'events' ? 'orange' : 'blue',
@@ -63,116 +63,114 @@ const ownedEventsList = [...events, ...commands].map((p) => ({
   tag: `v${p.data.version}`,
 }));
 
-const ownedQueriesList = queries.map((p) => ({
-  label: `${p.data.name}`,
-  href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
-  collection: p.collection,
-  tag: `v${p.data.version}`,
-}));
-
 const pageTitle = `Team | ${props.data.name}`;
 ---
 
 <VerticalSideBarLayout title={pageTitle} description={props.data.summary}>
-  <div class="flex min-h-screen docs-layout sm:px-8">
-    <main class="flex-1 w-full pr-10 pt-4" data-pagefind-body data-pagefind-meta={`title:${pageTitle}`}>
-      <!-- <span class="text-purple-500 bg-purple-100 px-2 py-1 rounded-md">v{props.data.version}</span> -->
-
-      <div class="border-b border-gray-200 py-4 pb-2">
-        <div class="flex justify-start">
-          <!-- <span class="shadow-md text-center flex items-center justify-center text-white text-4xl bg-red-500 h-28 w-28 rounded-full">{props.data.name.charAt(0)}</span> -->
-          <div class="flex flex-col justify-between space-y-2">
-            <div>
-              <h2 class="text-4xl font-bold">{props.data.name} <span class="text-gray-300">(Team)</span></h2>
-            </div>
-            <div class="space-y-2">
-              {
-                props.data.email && (
-                  <div class="flex space-x-1 items-center text-xs text-gray-500 font-bold hover:underline hover:text-primary">
-                    <EnvelopeIcon className="w-4 h-4 text-purple-400" />
-                    <a href={`mailto:${props.data.email}`}>Email</a>
-                  </div>
-                )
-              }
-              {
-                props.data.slackDirectMessageUrl && (
-                  <div class="flex space-x-1 items-center text-xs text-gray-500 font-bold hover:underline hover:text-primary">
-                    <img src={buildUrl('/slack-icon.svg', true)} class="w-4 h-3" />
-                    <a href={`${props.data.slackDirectMessageUrl}`}>Send DM on Slack</a>
-                  </div>
-                )
-              }
-              {
-                props.data.msTeamsDirectMessageUrl && (
-                  <div class="flex space-x-1 items-center text-xs text-gray-500 font-bold hover:underline hover:text-primary">
-                    <img src={buildUrl('/icons/ms-teams.svg', true)} class="w-4 h-4" />
-                    <a href={`${props.data.msTeamsDirectMessageUrl}`} target="_blank" rel="noopener noreferrer">
-                      Send DM on Teams
-                    </a>
-                  </div>
-                )
-              }
+  <main class="flex sm:px-8 docs-layout h-full" data-pagefind-body data-pagefind-meta={`title:${pageTitle}`}>
+    <div class="flex docs-layout w-full">
+      <div class="w-full lg:mr-2 pr-8 overflow-y-auto py-8">
+        <div class="border-b border-gray-200 pb-4">
+          <div class="flex justify-start">
+            <div class="flex flex-col justify-between space-y-2">
+              <div>
+                <h2 class="text-4xl font-bold">{props.data.name} <span class="text-gray-300">(Team)</span></h2>
+              </div>
+              <div class="space-y-2">
+                {
+                  props.data.email && (
+                    <div class="flex space-x-1 items-center text-xs text-gray-500 font-bold hover:underline hover:text-primary">
+                      <EnvelopeIcon className="w-4 h-4 text-purple-400" />
+                      <a href={`mailto:${props.data.email}`}>Email</a>
+                    </div>
+                  )
+                }
+                {
+                  props.data.slackDirectMessageUrl && (
+                    <div class="flex space-x-1 items-center text-xs text-gray-500 font-bold hover:underline hover:text-primary">
+                      <img src={buildUrl('/slack-icon.svg', true)} class="w-4 h-3" />
+                      <a href={`${props.data.slackDirectMessageUrl}`}>Send DM on Slack</a>
+                    </div>
+                  )
+                }
+                {
+                  props.data.msTeamsDirectMessageUrl && (
+                    <div class="flex space-x-1 items-center text-xs text-gray-500 font-bold hover:underline hover:text-primary">
+                      <img src={buildUrl('/icons/ms-teams.svg', true)} class="w-4 h-4" />
+                      <a href={`${props.data.msTeamsDirectMessageUrl}`} target="_blank" rel="noopener noreferrer">
+                        Send DM on Teams
+                      </a>
+                    </div>
+                  )
+                }
+              </div>
             </div>
           </div>
+          <h2 class="text-xl py-2 text-gray-500">{props.data.summary}</h2>
         </div>
-        <!-- {
-          props.data.badges && (
-            <div class="flex flex-wrap py-2">
-              {props.data.badges.map((badge) => (
-                <span class={`text-sm  text-gray-500 px-2 py-1 rounded-md mr-2 bg-${badge.backgroundColor}-200 text-${badge.textColor}-800`}>{badge.content}</span>
-              ))}
+        <div class="border-b border-gray-200" data-pagefind-ignore>
+          <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-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>
+                </div>
+                <div class="flex flex-col p-8">
+                  <dt class="text-sm font-semibold leading-6 text-gray-600"># owned messages</dt>
+                  <dd class="order-first text-3xl font-semibold tracking-tight text-gray-900">{ownedMessagesList.length}</dd>
+                </div>
+                <div class="flex flex-col p-8">
+                  <dt class="text-sm font-semibold leading-6 text-gray-600"># team members</dt>
+                  <dd class="order-first text-3xl font-semibold tracking-tight text-gray-900">{membersList.length}</dd>
+                </div>
+              </dl>
             </div>
-          )
-        } -->
-        <h2 class="text-xl py-2 text-gray-500">{props.data.summary}</h2>
-      </div>
-      <div class="prose prose-md py-4 w-full">
-        <Content components={components(props)} />
-      </div>
-      <!-- <div class="h-full w-full">
-        <NodeGraph id={props.data.id} type={props?.catalog?.type} nodes={props.nodes} masterNode={{ name: props.data.name, id: props.data.id }} client:load />
-      </div> -->
-    </main>
-    <aside class="sticky top-20 h-[calc(100vh-theme(spacing.16))] w-72 overflow-y-auto" data-pagefind-ignore>
-      <div class="divide-y-2 divide-gray-100">
-        <PillListFlat
-          color="pink"
-          title={`Owned domains (${ownedDomainsList.length})`}
-          pills={ownedDomainsList}
-          emptyMessage={`${props.data.name} does not own any domains.`}
-          client:load
-        />
-        <PillListFlat
-          color="blue"
-          title={`Owned services (${ownedServicesList.length})`}
-          pills={ownedServicesList}
-          emptyMessage={`This team does not own any services .`}
-          client:load
-        />
-        <PillListFlat
-          color="red"
-          title={`Owned messages (${ownedEventsList.length})`}
-          pills={ownedEventsList}
-          emptyMessage={`This team does not own any messages .`}
-          client:load
-        />
-        <PillListFlat
-          color="purple"
-          title={`Owned queries (${ownedQueriesList.length})`}
-          pills={ownedQueriesList}
-          emptyMessage={`This team does not own any queries .`}
-          client:load
-        />
-        <OwnersList
-          title={`Team members (${membersList.length})`}
-          owners={membersList}
-          emptyMessage={`This team does not have any members.`}
-          client:load
-        />
+          </div>
+        </div>
+        <div class="prose prose-md py-4 w-full">
+          <Content components={components(props)} />
+        </div>
       </div>
-      <!-- {props?.collection === 'events' && <MessageSideBar message={props} />} -->
-    </aside>
-  </div>
+      <aside class="hidden lg:block sticky top-0 pb-10 w-96 overflow-y-auto py-2" data-pagefind-ignore>
+        <div class="sticky top-28 left-0 h-full overflow-y-auto pr-6 py-4">
+          <PillListFlat
+            color="pink"
+            title={`Owned domains (${ownedDomainsList.length})`}
+            pills={ownedDomainsList}
+            emptyMessage={`${props.data.name} does not own any domains.`}
+            client:load
+          />
+          <PillListFlat
+            color="blue"
+            title={`Owned services (${ownedServicesList.length})`}
+            pills={ownedServicesList}
+            emptyMessage={`This team does not own any services .`}
+            client:load
+          />
+          <PillListFlat
+            color="red"
+            title={`Owned messages (${ownedMessagesList.length})`}
+            pills={ownedMessagesList}
+            emptyMessage={`This team does not own any messages .`}
+            client:load
+          />
+          <OwnersList
+            title={`Team members (${membersList.length})`}
+            owners={membersList}
+            emptyMessage={`This team does not have any members.`}
+            client:load
+          />
+        </div>
+      </aside>
+    </div>
+  </main>
 </VerticalSideBarLayout>
 
 <style>

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

@@ -66,9 +66,8 @@ const pageTitle = `User | ${props.data.name}`;
 <VerticalSideBarLayout title={pageTitle}>
   <main class="flex sm:px-8 docs-layout h-full" data-pagefind-body data-pagefind-meta={`title:${pageTitle}`}>
     <div class="flex docs-layout w-full">
-      <div class="w-full lg:mr-6 pr-8 overflow-y-auto py-4">
-        <!-- <span class="text-purple-500 bg-purple-100 px-2 py-1 rounded-md">v{props.data.version}</span> -->
-        <div class="border-b border-gray-200 pb-4 py-4">
+      <div class="w-full lg:mr-2 pr-8 overflow-y-auto py-8">
+        <div class="border-b border-gray-200 pb-4">
           <div class="flex justify-start space-x-8">
             <img src={props.data.avatarUrl} alt="Profile picture" class="shadow-md w-28 rounded-md" />
             <div class="flex flex-col justify-between">
@@ -125,10 +124,6 @@ const pageTitle = `User | ${props.data.name}`;
                   <dt class="text-sm font-semibold leading-6 text-gray-600"># owned messages</dt>
                   <dd class="order-first text-3xl font-semibold tracking-tight text-gray-900">{ownedMessageList.length}</dd>
                 </div>
-                <!-- <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">2</dd>
-              </div> -->
                 <div class="flex flex-col p-8">
                   <dt class="text-sm font-semibold leading-6 text-gray-600"># teams joined</dt>
                   <dd class="order-first text-3xl font-semibold tracking-tight text-gray-900">{associatedTeams.length}</dd>
@@ -141,11 +136,8 @@ const pageTitle = `User | ${props.data.name}`;
           <Content components={components(props)} />
         </div>
       </div>
-      <aside
-        class="hidden lg:block sticky top-0 h-[calc(100vh-theme(spacing.16))] w-72 overflow-y-auto py-2"
-        data-pagefind-ignore
-      >
-        <div class="divide-y-2 divide-gray-100 pr-6">
+      <aside class="hidden lg:block sticky top-0 pb-10 w-96 overflow-y-auto py-2" data-pagefind-ignore>
+        <div class="sticky top-28 left-0 h-full overflow-y-auto pr-6 py-4">
           {
             ownedDomainsList.length > 0 && (
               <PillListFlat

package/eventcatalog/src/utils/collections/domains.ts

@@ -3,6 +3,7 @@ import { getCollection } from 'astro:content';
 import type { CollectionEntry } from 'astro:content';
 import path from 'path';
 import type { CollectionMessageTypes } from '@types';
+import type { Service } from './services';
 
 const PROJECT_DIR = process.env.PROJECT_DIR || process.cwd();
 
@@ -40,8 +41,20 @@ export const getDomains = async ({ getAllVersions = true }: Props = {}): Promise
 
     // const receives = service.data.receives || [];
     const servicesInDomain = domain.data.services || [];
+    const subDomainsInDomain = domain.data.domains || [];
 
-    const services = servicesInDomain
+    const subDomains = subDomainsInDomain
+      .map((_subDomain: { id: string; version: string | undefined }) =>
+        getItemsFromCollectionByIdAndSemverOrLatest(domains, _subDomain.id, _subDomain.version)
+      )
+      .flat()
+      // Stop circular references
+      .filter((subDomain) => subDomain.data.id !== domain.data.id);
+
+    // Services in the sub domains
+    const subdomainServices = subDomains.flatMap((subDomain) => subDomain.data.services || []);
+
+    const services = [...servicesInDomain, ...subdomainServices]
       .map((_service: { id: string; version: string | undefined }) =>
         getItemsFromCollectionByIdAndSemverOrLatest(servicesCollection, _service.id, _service.version)
       )
@@ -51,7 +64,8 @@ export const getDomains = async ({ getAllVersions = true }: Props = {}): Promise
       ...domain,
       data: {
         ...domain.data,
-        services,
+        services: services,
+        domains: subDomains,
         latestVersion,
         versions,
       },
@@ -109,3 +123,19 @@ export const getUbiquitousLanguage = async (domain: Domain): Promise<UbiquitousL
 
   return ubiquitousLanguages;
 };
+
+export const getParentDomains = async (domain: Domain): Promise<Domain[]> => {
+  const domains = await getDomains({ getAllVersions: false });
+  return domains.filter((d) => {
+    const subDomains = (d.data.domains as unknown as Domain[]) || [];
+    return subDomains.some((d) => d.data.id === domain.data.id);
+  });
+};
+
+export const getDomainsForService = async (service: Service): Promise<Domain[]> => {
+  const domains = await getDomains({ getAllVersions: false });
+  return domains.filter((d) => {
+    const services = d.data.services as unknown as Service[];
+    return services.some((s) => s.data.id === service.data.id);
+  });
+};

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

@@ -3,7 +3,6 @@ import {
   createDagreGraph,
   calculatedNodes,
   generateIdForNode,
-  createNode,
   getEdgeLabelForServiceAsTarget,
   generatedIdForEdge,
   createEdge,
@@ -214,9 +213,10 @@ interface NodesAndEdgesProps {
   version: string;
   defaultFlow?: DagreGraph;
   mode: 'simple' | 'full';
+  group?: boolean;
 }
 
-export const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simple' }: NodesAndEdgesProps) => {
+export const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simple', group = false }: NodesAndEdgesProps) => {
   const flow = defaultFlow || createDagreGraph({ ranksep: 360, nodesep: 50, edgesep: 50 });
   let nodes = new Map(),
     edges = new Map();
@@ -234,6 +234,7 @@ export const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simpl
   }
 
   const rawServices = domain?.data.services || [];
+  const rawSubDomains = domain?.data.domains || [];
 
   const servicesCollection = await getCollection('services');
 
@@ -242,6 +243,11 @@ export const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simpl
     .flat()
     .map((svc) => ({ id: svc.data.id, version: svc.data.version }));
 
+  const domainSubDomainsWithVersion = rawSubDomains
+    .map((subDomain) => getItemsFromCollectionByIdAndSemverOrLatest(domains, subDomain.id, subDomain.version))
+    .flat()
+    .map((svc) => ({ id: svc.data.id, version: svc.data.version }));
+
   // Get all the nodes for everyhing
 
   for (const service of domainServicesWithVersion) {
@@ -267,6 +273,29 @@ export const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simpl
     serviceEdges.forEach((e) => edges.set(e.id, e));
   }
 
+  for (const subDomain of domainSubDomainsWithVersion) {
+    const { nodes: subDomainNodes, edges: subDomainEdges } = await getNodesAndEdges({
+      id: subDomain.id,
+      version: subDomain.version,
+      defaultFlow: flow,
+      mode,
+      group: true,
+    });
+    subDomainNodes.forEach((n) => {
+      nodes.set(n.id, nodes.has(n.id) ? merge(nodes.get(n.id), n) : n);
+    });
+
+    subDomainEdges.forEach((e) => edges.set(e.id, e));
+  }
+
+  // Add group node to the graph first before calculating positions
+  if (group) {
+    // Update the data of the node to add the group name and color
+    nodes.forEach((n) => {
+      nodes.set(n.id, { ...n, data: { ...n.data, group: { type: 'Domain', value: domain?.data.name, id: domain?.data.id } } });
+    });
+  }
+
   return {
     nodes: calculatedNodes(flow, Array.from(nodes.values())),
     edges: [...edges.values()],

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/event-catalog/eventcatalog.git"
   },
   "type": "module",
-  "version": "2.33.11",
+  "version": "2.34.0",
   "publishConfig": {
     "access": "public"
   },