@eventcatalog/core 2.33.11 → 2.34.0

package/eventcatalog/src/components/MDX/NodeGraph/NodeGraph.tsx

@@ -201,10 +201,15 @@ const NodeGraphBuilder = ({
   }, [resetNodesAndEdges, fitView]);
 
   const handleLegendClick = useCallback(
-    (collectionType: string) => {
-      const updatedNodes = nodes.map((node) => {
-        if (node.type === collectionType) {
+    (collectionType: string, groupId?: string) => {
+      const updatedNodes = nodes.map((node: Node<any>) => {
+        // Check if the groupId is set first
+        if (groupId && node.data.group && node.data.group?.id === groupId) {
           return { ...node, style: { ...node.style, opacity: 1 } };
+        } else {
+          if (node.type === collectionType) {
+            return { ...node, style: { ...node.style, opacity: 1 } };
+          }
         }
         return { ...node, style: { ...node.style, opacity: 0.1 } };
       });
@@ -231,7 +236,7 @@ const NodeGraphBuilder = ({
     [nodes, edges, setNodes, setEdges, fitView]
   );
 
-  const getNodesByCollectionWithColors = useCallback((nodes: Node[]) => {
+  const getNodesByCollectionWithColors = useCallback((nodes: Node<any>[]) => {
     const colorClasses = {
       events: 'bg-orange-600',
       services: 'bg-pink-600',
@@ -243,17 +248,36 @@ const NodeGraphBuilder = ({
       step: 'bg-gray-700',
     };
 
-    return nodes.reduce((acc: { [key: string]: { count: number; colorClass: string } }, node) => {
-      const collection = node.type;
-      if (collection) {
-        if (acc[collection]) {
-          acc[collection].count += 1;
-        } else {
-          acc[collection] = { count: 1, colorClass: colorClasses[collection as keyof typeof colorClasses] || 'bg-black' };
+    let legendForDomains: { [key: string]: { count: number; colorClass: string; groupId: string } } = {};
+
+    // Find any groups
+    const domainGroups = [
+      ...new Set(
+        nodes.filter((node) => node.data.group && node.data.group?.type === 'Domain').map((node) => node.data.group?.id)
+      ),
+    ];
+
+    domainGroups.forEach((groupId) => {
+      const group = nodes.filter((node) => node.data.group && node.data.group?.id === groupId);
+      legendForDomains[`${groupId} (Domain)`] = { count: group.length, colorClass: 'bg-yellow-600', groupId };
+    });
+
+    const legendForNodes = nodes.reduce(
+      (acc: { [key: string]: { count: number; colorClass: string; groupId?: string } }, node) => {
+        const collection = node.type;
+        if (collection) {
+          if (acc[collection]) {
+            acc[collection].count += 1;
+          } else {
+            acc[collection] = { count: 1, colorClass: colorClasses[collection as keyof typeof colorClasses] || 'bg-black' };
+          }
         }
-      }
-      return acc;
-    }, {});
+        return acc;
+      },
+      {}
+    );
+
+    return { ...legendForDomains, ...legendForNodes };
   }, []);
 
   const legend = getNodesByCollectionWithColors(nodes);
@@ -351,11 +375,11 @@ const NodeGraphBuilder = ({
         <Panel position="bottom-right">
           <div className=" bg-white font-light px-4 text-[12px] shadow-md py-1 rounded-md">
             <ul className="m-0 p-0 ">
-              {Object.entries(legend).map(([key, { count, colorClass }]) => (
+              {Object.entries(legend).map(([key, { count, colorClass, groupId }]) => (
                 <li
                   key={key}
                   className="flex space-x-2 items-center text-[10px] cursor-pointer hover:text-purple-600 hover:underline"
-                  onClick={() => handleLegendClick(key)}
+                  onClick={() => handleLegendClick(key, groupId)}
                 >
                   <span className={`w-2 h-2 block ${colorClass}`} />
                   <span className="block capitalize">

package/eventcatalog/src/components/MDX/NodeGraph/Nodes/Channel.tsx

@@ -106,7 +106,9 @@ export default function ChannelNode({ data, sourcePosition, targetPosition }: an
               </div>
               <div className="flex justify-between">
                 <span className="text-[10px] font-light block pt-0.5 pb-0.5 ">v{version}</span>
-                {mode === 'simple' && <span className="text-[10px] text-gray-500 font-light block pt-0.5 pb-0.5 ">Channel</span>}
+                {mode === 'simple' && (
+                  <span className="text-[10px] text-gray-500 font-light block pt-0.5 pb-0.5 ">{nodeLabel}</span>
+                )}
               </div>
             </div>
             {mode === 'full' && (

package/eventcatalog/src/components/MDX/NodeGraph/Nodes/Command.tsx

@@ -54,7 +54,9 @@ export default function CommandNode({ data, sourcePosition, targetPosition }: an
             <span className="text-xs font-bold block pb-0.5">{name}</span>
             <div className="flex justify-between">
               <span className="text-[10px] font-light block pt-0.5 pb-0.5 ">v{version}</span>
-              {mode === 'simple' && <span className="text-[10px] text-gray-500 font-light block pt-0.5 pb-0.5 ">Command</span>}
+              {mode === 'simple' && (
+                <span className="text-[10px] text-gray-500 font-light block pt-0.5 pb-0.5 ">{nodeLabel}</span>
+              )}
             </div>
           </div>
           {mode === 'full' && (

package/eventcatalog/src/components/MDX/NodeGraph/Nodes/Custom.tsx

@@ -101,7 +101,7 @@ export default function UserNode({ data, sourcePosition, targetPosition }: any)
 
             {(!summary || mode !== 'full') && (
               <div className="h-full ">
-                <span className="text-sm font-bold block pb-0.5 block w-full">{title}</span>
+                <span className="text-sm font-bold block pb-0.5 w-full">{title}</span>
               </div>
             )}
 

package/eventcatalog/src/components/MDX/NodeGraph/Nodes/Event.tsx

@@ -12,6 +12,10 @@ interface Data {
   message: CollectionEntry<'events'>;
   showTarget?: boolean;
   showSource?: boolean;
+  group?: {
+    type: string;
+    value: string;
+  };
 }
 
 function classNames(...classes: any) {
@@ -19,7 +23,7 @@ function classNames(...classes: any) {
 }
 
 export default function EventNode({ data, sourcePosition, targetPosition }: any) {
-  const { mode, message } = data as Data;
+  const { mode, message, group } = data as Data;
   const { name, version, summary, owners = [], producers = [], consumers = [], styles } = message.data;
   const { node: { color = 'orange', label } = {}, icon = 'BoltIcon' } = styles || {};
 
@@ -52,7 +56,9 @@ export default function EventNode({ data, sourcePosition, targetPosition }: any)
             <span className="text-xs font-bold block pb-0.5">{name}</span>
             <div className="flex justify-between">
               <span className="text-[10px] font-light block pt-0.5 pb-0.5 ">v{version}</span>
-              {mode === 'simple' && <span className="text-[10px] text-gray-500 font-light block pt-0.5 pb-0.5 ">Event</span>}
+              {mode === 'simple' && (
+                <span className="text-[10px] text-gray-500 font-light block pt-0.5 pb-0.5 ">{nodeLabel}</span>
+              )}
             </div>
           </div>
           {mode === 'full' && (
@@ -70,6 +76,11 @@ export default function EventNode({ data, sourcePosition, targetPosition }: any)
                 <span className="text-xs" style={{ fontSize: '0.2em' }}>
                   Owners: {owners.length}
                 </span>
+                {group && (
+                  <span className="text-xs" style={{ fontSize: '0.2em' }}>
+                    {group.type}: {group.value}
+                  </span>
+                )}
               </div>
             </div>
           )}

package/eventcatalog/src/components/MDX/NodeGraph/Nodes/Query.tsx

@@ -53,7 +53,9 @@ export default function QueryNode({ data, sourcePosition, targetPosition }: any)
             <span className="text-xs font-bold block pb-0.5">{name}</span>
             <div className="flex justify-between">
               <span className="text-[10px] font-light block pt-0.5 pb-0.5 ">v{version}</span>
-              {mode === 'simple' && <span className="text-[10px] text-gray-500 font-light block pt-0.5 pb-0.5 ">Query</span>}
+              {mode === 'simple' && (
+                <span className="text-[10px] text-gray-500 font-light block pt-0.5 pb-0.5 ">{nodeLabel}</span>
+              )}
             </div>
           </div>
           {mode === 'full' && (

package/eventcatalog/src/components/MDX/NodeGraph/Nodes/Service.tsx

@@ -59,7 +59,9 @@ export default function ServiceNode({ data, sourcePosition, targetPosition }: an
               <span className="text-xs font-bold block pt-0.5 pb-0.5">{name}</span>
               <div className="flex justify-between">
                 <span className="text-[10px] font-light block pt-0.5 pb-0.5 ">v{version}</span>
-                {mode === 'simple' && <span className="text-[10px] text-gray-500 font-light block pt-0.5 pb-0.5 ">Service</span>}
+                {mode === 'simple' && (
+                  <span className="text-[10px] text-gray-500 font-light block pt-0.5 pb-0.5 ">{nodeLabel}</span>
+                )}
               </div>
             </div>
             {mode === 'full' && (

package/eventcatalog/src/components/MDX/NodeGraph/Nodes/User.tsx

@@ -47,7 +47,7 @@ export default function UserNode({ data, sourcePosition, targetPosition }: any)
 
         {(!summary || mode !== 'full') && (
           <div className="h-full ">
-            <span className="text-sm font-bold block pb-0.5 block w-full">{name}</span>
+            <span className="text-sm font-bold block pb-0.5 w-full">{name}</span>
             {mode === 'simple' && (
               <div className="w-full text-right">
                 <span className=" w-full text-[10px] text-gray-500 font-light block pt-0.5 pb-0.5 ">Event</span>

package/eventcatalog/src/components/MDX/SchemaViewer/SchemaViewerRoot.astro

@@ -83,14 +83,11 @@ try {
   function moveSchemaViewerToPortal(schema) {
     const portalId = `${schema.id}-${schema.file}-SchemaViewer-portal`;
     const schemaViewerContainer = document.getElementById(portalId);
-    console.log('schemaViewerContainer', schemaViewerContainer);
     if (schemaViewerContainer) {
       schemaViewerContainer.appendChild(document.getElementById(`${schema.id}-${schema.file}-SchemaViewer-client`));
     }
   }
 
-  console.log('schemas', schemas);
-
   // on DOM ready, move the SchemaViewerClient to the portal
   document.addEventListener('astro:page-load', () => {
     schemas.forEach(moveSchemaViewerToPortal);

package/eventcatalog/src/components/SideBars/DomainSideBar.astro

@@ -3,7 +3,7 @@ import OwnersList from '@components/Lists/OwnersList';
 import PillListFlat from '@components/Lists/PillListFlat';
 import RepositoryList from '@components/Lists/RepositoryList.astro';
 import VersionList from '@components/Lists/VersionList.astro';
-import { getUbiquitousLanguage, getMessagesForDomain } from '@utils/collections/domains';
+import { getUbiquitousLanguage, getMessagesForDomain, getParentDomains } from '@utils/collections/domains';
 import CustomSideBarSectionList from '@components/Lists/CustomSideBarSectionList.astro';
 import { getOwner } from '@utils/collections/owners';
 import { buildUrl } from '@utils/url-builder';
@@ -18,6 +18,9 @@ const { domain } = Astro.props;
 
 // @ts-ignore
 const services = (domain.data.services as CollectionEntry<'services'>[]) || [];
+// @ts-ignore
+const subDomains = (domain.data.domains as CollectionEntry<'domains'>[]) || [];
+
 const ubiquitousLanguage = await getUbiquitousLanguage(domain);
 const hasUbiquitousLanguage = ubiquitousLanguage.length > 0;
 const ubiquitousLanguageDictionary = hasUbiquitousLanguage ? ubiquitousLanguage[0].data.dictionary : [];
@@ -30,6 +33,8 @@ const messagesForDomain = await getMessagesForDomain(domain);
 
 const resourceGroups = domain.data?.resourceGroups || [];
 
+const parentDomains = await getParentDomains(domain);
+
 const serviceList = services.map((p) => ({
   label: p.data.name,
   badge: p.collection,
@@ -38,6 +43,22 @@ const serviceList = services.map((p) => ({
   href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
 }));
 
+const subDomainList = subDomains.map((p) => ({
+  label: p.data.name,
+  badge: p.collection,
+  tag: `v${p.data.version}`,
+  collection: p.collection,
+  href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
+}));
+
+const parentDomainList = parentDomains.map((p) => ({
+  label: p.data.name,
+  badge: p.collection,
+  tag: `v${p.data.version}`,
+  collection: p.collection,
+  href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
+}));
+
 const sendsList = messagesForDomain.sends
   .sort((a, b) => a.collection.localeCompare(b.collection))
   .map((p) => ({
@@ -76,6 +97,31 @@ const ownersList = filteredOwners.map((o) => ({
 
 <aside class="sticky top-28 left-0 space-y-8 h-full overflow-y-auto py-4">
   <div>
+    {
+      parentDomains.length > 0 && (
+        <PillListFlat
+          title={`Parent domains (${parentDomains.length})`}
+          pills={parentDomainList}
+          emptyMessage={`This domain does not have any parent domains.`}
+          color="pink"
+          icon="ServerIcon"
+          client:load
+        />
+      )
+    }
+
+    {
+      subDomains.length > 0 && (
+        <PillListFlat
+          title={`Subdomains (${subDomains.length})`}
+          pills={subDomainList}
+          emptyMessage={`This domain does not contain any subdomains.`}
+          color="pink"
+          icon="ServerIcon"
+          client:load
+        />
+      )
+    }
     {
       resourceGroups
         .filter((section) => section.items.length > 0 && section.sidebar)
@@ -86,7 +132,6 @@ const ownersList = filteredOwners.map((o) => ({
       pills={serviceList}
       emptyMessage={`This domain does not contain any services.`}
       color="pink"
-      icon="ServerIcon"
       client:load
     />
     <PillListFlat

package/eventcatalog/src/components/SideBars/ServiceSideBar.astro

@@ -11,6 +11,7 @@ import type { CollectionEntry } from 'astro:content';
 import { ScrollText, Workflow, FileDownIcon, Code, Link, RssIcon } from 'lucide-react';
 import { join } from 'node:path';
 import config from '@config';
+import { getDomainsForService } from '@utils/collections/domains';
 interface Props {
   service: CollectionEntry<'services'>;
 }
@@ -28,6 +29,8 @@ const filteredOwners = owners.filter((o) => o !== undefined);
 
 const resourceGroups = service.data?.resourceGroups || [];
 
+const domainsServiceBelongsTo = await getDomainsForService(service);
+
 const sendsList = sends
   .sort((a, b) => a.collection.localeCompare(b.collection))
   .map((p) => ({
@@ -58,6 +61,14 @@ const ownersList = filteredOwners.map((o) => ({
   href: buildUrl(`/docs/${o.collection}/${o.data.id}`),
 }));
 
+const domainList = domainsServiceBelongsTo.map((d) => ({
+  label: d.data.name,
+  badge: d.collection,
+  tag: `v${d.data.version}`,
+  collection: d.collection,
+  href: buildUrl(`/docs/${d.collection}/${d.data.id}/${d.data.version}`),
+}));
+
 const isRSSEnabled = config.rss?.enabled;
 
 // @ts-ignore
@@ -73,6 +84,17 @@ const schemaURL = join(publicPath, schemaFilePath || '');
         .filter((section) => section.items.length > 0 && section.sidebar)
         .map((section) => <CustomSideBarSectionList section={section} />)
     }
+    {
+      domainList.length > 0 && (
+        <PillListFlat
+          title={`Domains (${domainList.length})`}
+          pills={domainList}
+          emptyMessage={`This service does not belong to any domains.`}
+          color="orange"
+          client:load
+        />
+      )
+    }
     <PillListFlat
       title={`Receives Messages (${receivesList.length})`}
       pills={receivesList}

package/eventcatalog/src/components/SideNav/ListViewSideBar/index.tsx

@@ -249,6 +249,16 @@ const ListViewSideBar: React.FC<ListViewSideBarProps> = ({ resources, currentPat
     setSearchTerm(e.target.value);
   }, []);
 
+  const isDomainSubDomain = useMemo(() => {
+    return (domain: any) => {
+      const domains = data.domains || [];
+      return domains.some((d: any) => {
+        const subdomains = d.domains || [];
+        return subdomains.some((subdomain: any) => subdomain.data.id === domain.id);
+      });
+    };
+  }, [data.domains]);
+
   if (!isInitialized) return null;
 
   const hasNoResults =
@@ -301,7 +311,7 @@ const ListViewSideBar: React.FC<ListViewSideBarProps> = ({ resources, currentPat
                         >
                           <span className="truncate">{item.label}</span>
                           <span className="text-yellow-600 ml-2 text-[10px] font-medium bg-yellow-50 px-2 py-0.5 rounded">
-                            DOMAIN
+                            {isDomainSubDomain(item) ? 'SUBDOMAIN' : 'DOMAIN'}
                           </span>
                         </button>
                       </div>

package/eventcatalog/src/components/SideNav/ListViewSideBar/types.ts

@@ -30,6 +30,7 @@ interface DomainItem {
   id: string;
   name: string;
   services: any[];
+  domains: any[];
 }
 
 interface FlowItem {

package/eventcatalog/src/components/SideNav/ListViewSideBar/utils.ts

@@ -65,6 +65,7 @@ export async function getResourcesForNavigation({ currentPath }: { currentPath:
       id: item.data.id,
       name: item.data.name,
       services: item.collection === 'domains' ? item.data.services : null,
+      domains: item.collection === 'domains' ? item.data.domains : null,
       sends: sendsWithHref,
       receives: receivesWithHref,
       specifications: item.collection === 'services' ? item.data.specifications : null,

package/eventcatalog/src/content.config.ts

@@ -323,6 +323,7 @@ const domains = defineCollection({
   schema: z
     .object({
       services: z.array(pointer).optional(),
+      domains: z.array(pointer).optional(),
     })
     .merge(baseSchema),
 });

package/eventcatalog/src/enterprise/custom-documentation/components/CustomDocsNav/index.tsx

@@ -130,9 +130,6 @@ const CustomDocsNav: React.FC<CustomDocsNavProps> = ({ sidebarItems }) => {
 
   const hasNoResults = debouncedSearchTerm && filteredSidebarItems.length === 0;
 
-  console.log('filteredSidebarItems', filteredSidebarItems);
-  console.log('currentPath', currentPath);
-
   return (
     <nav ref={navRef} className="h-full text-gray-800 pt-4 overflow-y-auto">
       <div className="mb-2 px-3 bg-white z-10">

package/eventcatalog/src/pages/architecture/architecture.astro

@@ -24,13 +24,14 @@ interface Service extends CollectionEntry<'services'> {
 const { type, embeded = false } = Astro.props as { type: ValidType; embeded: boolean };
 
 // Get data based on type
-let items: ExtendedDomain[] | Service[] | CollectionEntry<'commands'>[] | CollectionEntry<CollectionMessageTypes>[] = [];
+let items: Service[] | CollectionEntry<'commands'>[] | CollectionEntry<CollectionMessageTypes>[] = [];
+let domains: ExtendedDomain[] = [];
 
-if (type === 'domains') {
+const getDomainsForArchitecturePages = async () => {
   const domains = await getDomains({ getAllVersions: false });
 
   // Get messages for each domain
-  items = await Promise.all(
+  return Promise.all(
     domains.map(async (domain) => {
       const messages = await getMessagesForDomain(domain);
       // @ts-ignore we have to remove markdown information, as it's all send to the astro components. This reduced the page size.
@@ -43,7 +44,13 @@ if (type === 'domains') {
       } as ExtendedDomain;
     })
   );
-} else if (type === 'services') {
+};
+
+if (type === 'domains' || type === 'services') {
+  domains = await getDomainsForArchitecturePages();
+}
+
+if (type === 'services') {
   const services = await getServices({ getAllVersions: false });
   let filteredServices = services.map((s) => {
     // @ts-ignore we have to remove markdown information, as it's all send to the astro components. This reduced the page size.
@@ -71,8 +78,12 @@ if (type === 'domains') {
   <div class="bg-white min-h-screen">
     <div class="max-w-[90em] mx-auto">
       <div class="px-6 py-6" transition:animate={fade({ duration: '0.4s' })}>
-        {type === 'domains' && <DomainGrid domains={items as ExtendedDomain[]} embeded={embeded} client:load />}
-        {type === 'services' && <ServiceGrid services={items as unknown as Service[]} embeded={embeded} client:load />}
+        {type === 'domains' && <DomainGrid domains={domains} embeded={embeded} client:load />}
+        {
+          type === 'services' && (
+            <ServiceGrid domains={domains} services={items as unknown as Service[]} embeded={embeded} client:load />
+          )
+        }
         {
           type === 'messages' && (
             <MessageGrid messages={items as CollectionEntry<CollectionMessageTypes>[]} embeded={embeded} client:load />

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/changelog/index.astro

@@ -17,7 +17,7 @@ import mdxComponents from '@components/MDX/components';
 import 'diff2html/bundles/css/diff2html.min.css';
 
 import { buildUrl } from '@utils/url-builder';
-import { getVersions, getPreviousVersion } from '@utils/collections/util';
+import { getPreviousVersion } from '@utils/collections/util';
 import { getDiffsForCurrentAndPreviousVersion } from '@utils/collections/file-diffs';
 import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
 import { ClientRouter } from 'astro:transitions';
@@ -35,7 +35,6 @@ export async function getStaticPaths() {
       },
       props: {
         type: itemTypes[index],
-        allVersionsForCollection: getVersions(items).versions,
         allCollectionItems: items,
         ...item,
       },
@@ -47,8 +46,6 @@ const props = Astro.props;
 let collectionItem = props;
 const logs = await getChangeLogs(props);
 
-// console.log('logs', logs)
-
 const { data } = props;
 const latestVersion = data.latestVersion;
 
@@ -63,11 +60,9 @@ const renderedLogs = logs.map(async (log) => {
 
 const logsToRender = await Promise.all(renderedLogs);
 
-// console.log('LOGS TO RENDER', logsToRender);
-
 const logListPromise = logsToRender.map(async (log, index) => {
   const currentLogVersion = log.data.version;
-  const previousLogVersion = log.data.version ? getPreviousVersion(log.data.version, props.allVersionsForCollection) : '';
+  const previousLogVersion = log.data.version ? getPreviousVersion(log.data.version, data.versions) : '';
   return {
     id: log.id,
     url: buildUrl(`/docs/${props.collection}/${props.data.id}`),