@eventcatalog/core 2.58.2 → 2.59.1

package/eventcatalog/src/components/Tables/columns/index.tsx

@@ -4,6 +4,7 @@ import { columns as ServiceTableColumns } from './ServiceTableColumns';
 import { columns as DomainTableColumns } from './DomainTableColumns';
 import { columns as FlowTableColumns } from './FlowTableColumns';
 import { columns as TeamsTableColumns } from './TeamsTableColumns';
+import { columns as ContainerTableColumns } from './ContainersTableColumns';
 export const getColumnsByCollection = (collection: string): any => {
   switch (collection) {
     case 'events':
@@ -20,6 +21,8 @@ export const getColumnsByCollection = (collection: string): any => {
       return UserTableColumns();
     case 'teams':
       return TeamsTableColumns();
+    case 'containers':
+      return ContainerTableColumns();
     default:
       return [];
   }

package/eventcatalog/src/content.config.ts

@@ -47,7 +47,7 @@ const channelPointer = z
 const resourcePointer = z.object({
   id: z.string(),
   version: z.string().optional().default('latest'),
-  type: z.enum(['service', 'event', 'command', 'query', 'flow', 'channel', 'domain', 'user', 'team']),
+  type: z.enum(['service', 'event', 'command', 'query', 'flow', 'channel', 'domain', 'user', 'team', 'container']),
 });
 
 const changelogs = defineCollection({
@@ -361,6 +361,8 @@ const services = defineCollection({
       sends: z.array(pointer).optional(),
       receives: z.array(pointer).optional(),
       entities: z.array(pointer).optional(),
+      writesTo: z.array(pointer).optional(),
+      readsFrom: z.array(pointer).optional(),
       detailsPanel: z
         .object({
           domains: detailPanelPropertySchema.optional(),
@@ -371,12 +373,65 @@ const services = defineCollection({
           repository: detailPanelPropertySchema.optional(),
           owners: detailPanelPropertySchema.optional(),
           changelog: detailPanelPropertySchema.optional(),
+          containers: detailPanelPropertySchema.optional(),
         })
         .optional(),
     })
     .merge(baseSchema),
 });
 
+// 1) Put this near your other enums/utilities
+const containerTypeEnum = z.enum([
+  // Core
+  'database',
+  'cache',
+  'objectStore',
+  'searchIndex',
+  'dataWarehouse',
+  'dataLake',
+  'externalSaaS',
+  // Fallback
+  'other',
+]);
+
+const accessModeEnum = z.enum(['read', 'write', 'readWrite', 'appendOnly']);
+const dataClassificationEnum = z.enum(['public', 'internal', 'confidential', 'regulated']);
+
+const containers = defineCollection({
+  loader: glob({
+    pattern: ['**/containers/*/index.(md|mdx)', '**/containers/*/versioned/*/index.(md|mdx)'],
+    base: projectDirBase,
+    generateId: ({ data }) => {
+      return `${data.id}-${data.version}`;
+    },
+  }),
+  schema: z
+    .object({
+      container_type: containerTypeEnum, // <— the important discriminator inside DataContainer
+      technology: z.string().optional(), // e.g. "postgres@14", "kafka", "s3"
+      authoritative: z.boolean().optional().default(false),
+      access_mode: accessModeEnum.optional(), // read/write/readWrite/appendOnly
+      classification: dataClassificationEnum.optional(),
+      residency: z.string().optional(),
+      retention: z.string().optional(),
+      // details panel toggles (aligns with your pattern)
+      detailsPanel: z
+        .object({
+          versions: detailPanelPropertySchema.optional(),
+          repository: detailPanelPropertySchema.optional(),
+          owners: detailPanelPropertySchema.optional(),
+          changelog: detailPanelPropertySchema.optional(),
+          attachments: detailPanelPropertySchema.optional(),
+        })
+        .optional(),
+      services: z.array(reference('services')).optional(),
+
+      servicesThatWriteToContainer: z.array(reference('services')).optional(),
+      servicesThatReadFromContainer: z.array(reference('services')).optional(),
+    })
+    .merge(baseSchema),
+});
+
 const customPages = defineCollection({
   loader: glob({
     // any number of child folders
@@ -628,6 +683,7 @@ export const collections = {
   flows,
   pages,
   changelogs,
+  containers,
 
   // DDD Collections
   ubiquitousLanguages,

package/eventcatalog/src/layouts/DiscoverLayout.astro

@@ -9,6 +9,8 @@ import { getEvents } from '@utils/events';
 import { getServices } from '@utils/collections/services';
 import { buildUrl } from '@utils/url-builder';
 import { getQueries } from '@utils/queries';
+import { getContainers } from '@utils/collections/containers';
+import { DatabaseIcon } from 'lucide-react';
 import { MagnifyingGlassIcon } from '@heroicons/react/20/solid';
 import VerticalSideBarLayout from './VerticalSideBarLayout.astro';
 import Checkbox from '@components/Checkbox.astro';
@@ -19,7 +21,7 @@ const commands = await getCommands();
 const services = await getServices();
 const domains = await getDomains();
 const flows = await getFlows();
-
+const containers = await getContainers();
 export interface Props<T extends TCollectionTypes> {
   title: string;
   subtitle: string;
@@ -74,6 +76,14 @@ const tabs = [
     activeColor: 'yellow',
     enabled: domains.length > 0,
   },
+  {
+    label: `Data (${containers.length})`,
+    href: buildUrl('/discover/containers'),
+    isActive: currentPath === '/discover/containers',
+    icon: DatabaseIcon,
+    activeColor: 'blue',
+    enabled: containers.length > 0,
+  },
   {
     label: `Flows (${flows.length})`,
     href: buildUrl('/discover/flows'),

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

@@ -1,6 +1,7 @@
 ---
 import { getDomains, getMessagesForDomain } from '@utils/collections/domains';
 import { getServices } from '@utils/collections/services';
+import { getContainers } from '@utils/collections/containers';
 import { getMessages } from '@utils/messages';
 import type { ExtendedDomain } from '@components/Grids/DomainGrid';
 import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
@@ -27,6 +28,7 @@ const { type, embeded = false } = Astro.props as { type: ValidType; embeded: boo
 // Get data based on type
 let items: Service[] | CollectionEntry<'commands'>[] | CollectionEntry<CollectionMessageTypes>[] = [];
 let domains: ExtendedDomain[] = [];
+let containers: CollectionEntry<'containers'>[] = [];
 
 const getDomainsForArchitecturePages = async () => {
   const domains = await getDomains({ getAllVersions: false });
@@ -68,6 +70,7 @@ if (type === 'services') {
   const { events, commands, queries } = await getMessages({ getAllVersions: false, hydrateServices: false });
   const messages = [...events, ...commands, ...queries];
   items = removeContentFromCollection(messages) as unknown as CollectionEntry<CollectionMessageTypes>[];
+  containers = await getContainers({ getAllVersions: false });
 }
 ---
 
@@ -83,7 +86,12 @@ if (type === 'services') {
         }
         {
           type === 'messages' && (
-            <MessageGrid messages={items as CollectionEntry<CollectionMessageTypes>[]} embeded={embeded} client:load />
+            <MessageGrid
+              messages={items as CollectionEntry<CollectionMessageTypes>[]}
+              embeded={embeded}
+              containers={containers}
+              client:load
+            />
           )
         }
       </div>

package/eventcatalog/src/pages/discover/[type]/_index.data.ts

@@ -16,7 +16,7 @@ export class Page extends HybridPage {
       flows: getFlows,
     };
 
-    const itemTypes = ['events', 'commands', 'queries', 'services', 'domains', 'flows'] as const;
+    const itemTypes = ['events', 'commands', 'queries', 'services', 'domains', 'flows', 'containers'] as const;
     const allItems = await Promise.all(itemTypes.map((type) => loaders[type]()));
 
     return allItems.flatMap((items, index) => ({

package/eventcatalog/src/pages/discover/[type]/index.astro

@@ -9,6 +9,12 @@ export const getStaticPaths = Page.getStaticPaths;
 
 const { type, data } = await Page.getData(Astro);
 
+let title = `${type} (${data.length})`;
+
+if (type === 'containers') {
+  title = `Data (${data.length})`;
+}
+
 function mapToItem(i: any) {
   return {
     collection: i.collection,
@@ -22,7 +28,7 @@ function mapToItem(i: any) {
 ---
 
 <DiscoverLayout
-  title={`${type} (${data.length})`}
+  title={title}
   subtitle={`Find, filter and search for any ${type} in your system.`}
   data={data.map(
     (d: CollectionEntry<CollectionTypes>) =>
@@ -46,6 +52,10 @@ function mapToItem(i: any) {
           sends: d.data?.sends?.map(mapToItem) ?? [],
           // @ts-ignore
           services: d.data?.services?.map(mapToItem) ?? [],
+          // @ts-ignore
+          servicesThatWriteToContainer: d.data?.servicesThatWriteToContainer?.map(mapToItem) ?? [],
+          // @ts-ignore
+          servicesThatReadFromContainer: d.data?.servicesThatReadFromContainer?.map(mapToItem) ?? [],
         },
       }) as DiscoverLayoutProps<typeof type>['data'][0]
   )}

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/_index.data.ts

@@ -12,7 +12,17 @@ export class Page extends HybridPage {
       return [];
     }
 
-    const itemTypes: PageTypes[] = ['events', 'commands', 'queries', 'services', 'domains', 'flows', 'channels', 'entities'];
+    const itemTypes: PageTypes[] = [
+      'events',
+      'commands',
+      'queries',
+      'services',
+      'domains',
+      'flows',
+      'channels',
+      'entities',
+      'containers',
+    ];
     const allItems = await Promise.all(itemTypes.map((type) => pageDataLoader[type]()));
 
     return allItems.flatMap((items, index) =>

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/changelog/_index.data.ts

@@ -14,7 +14,7 @@ export class Page extends HybridPage {
 
     const { pageDataLoader } = await import('@utils/page-loaders/page-data-loader');
 
-    const itemTypes: PageTypes[] = ['events', 'commands', 'queries', 'services', 'domains', 'flows'];
+    const itemTypes: PageTypes[] = ['events', 'commands', 'queries', 'services', 'domains', 'flows', 'containers'];
     const allItems = await Promise.all(itemTypes.map((type) => pageDataLoader[type]()));
 
     return allItems.flatMap((items, index) =>

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

@@ -9,6 +9,7 @@ import {
   MagnifyingGlassIcon,
   QueueListIcon,
 } from '@heroicons/react/24/outline';
+import { DatabaseIcon } from 'lucide-react';
 import { render, getEntry } from 'astro:content';
 import mdxComponents from '@components/MDX/components';
 import 'diff2html/bundles/css/diff2html.min.css';
@@ -96,18 +97,15 @@ const getBadge = () => {
       class: 'text-yellow-400',
     };
   }
+  if (props.collection === 'containers') {
+    return { backgroundColor: 'blue', textColor: 'blue', content: 'Container', icon: DatabaseIcon, class: 'text-blue-400' };
+  }
   if (props.collection === 'flows') {
     return { backgroundColor: 'teal', textColor: 'teal', content: 'Flow', icon: QueueListIcon, class: 'text-teal-400' };
   }
 };
 
 const badges = [getBadge()];
-import { HomeIcon } from '@heroicons/react/20/solid';
-
-const pages = [
-  { name: 'Projects', href: '#', current: false },
-  { name: 'Project Nero', href: '#', current: true },
-];
 ---
 
 <VerticalSideBarLayout title="ChangeLog">

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

@@ -19,6 +19,7 @@ import DomainSideBar from '@components/SideBars/DomainSideBar.astro';
 import ChannelSideBar from '@components/SideBars/ChannelSideBar.astro';
 import FlowSideBar from '@components/SideBars/FlowSideBar.astro';
 import EntitySideBar from '@components/SideBars/EntitySideBar.astro';
+import ContainerSideBar from '@components/SideBars/ContainerSideBar.astro';
 import CopyAsMarkdown from '@components/CopyAsMarkdown';
 
 import {
@@ -28,9 +29,11 @@ import {
   BoltIcon,
   ChatBubbleLeftIcon,
   MagnifyingGlassIcon,
+  MapIcon,
+  ClockIcon,
 } from '@heroicons/react/24/outline';
 import { ArrowsRightLeftIcon } from '@heroicons/react/20/solid';
-import { Box, Boxes, SquarePenIcon } from 'lucide-react';
+import { Box, Boxes, SquarePenIcon, DatabaseIcon, DatabaseZapIcon, ShieldCheckIcon } from 'lucide-react';
 import type { CollectionTypes } from '@types';
 
 import { render } from 'astro:content';
@@ -101,6 +104,51 @@ const getBadge = () => {
     return [{ backgroundColor: 'teal', textColor: 'teal', content: 'Channel', icon: ArrowsRightLeftIcon, class: 'text-gray' }];
   }
 
+  if (props.collection === 'containers') {
+    const badges = [];
+    const content = props.data.container_type?.charAt(0).toUpperCase() + props.data.container_type?.slice(1) || 'Database';
+
+    badges.push({ backgroundColor: 'blue', textColor: 'blue', content: content, icon: DatabaseIcon, class: 'text-gray' });
+
+    if (props.data?.technology) {
+      badges.push({
+        backgroundColor: 'indigo',
+        textColor: 'indigo',
+        content: `${props.data.technology}`,
+        icon: DatabaseZapIcon,
+      });
+    }
+
+    if (props.data?.residency) {
+      badges.push({
+        backgroundColor: 'red',
+        textColor: 'red',
+        content: `Residency: ${props.data.residency}`,
+        icon: MapIcon,
+      });
+    }
+
+    if (props.data?.retention) {
+      badges.push({
+        backgroundColor: 'green',
+        textColor: 'green',
+        content: `Retention: ${props.data.retention}`,
+        icon: ClockIcon,
+      });
+    }
+
+    if (props.data?.access_mode) {
+      badges.push({
+        backgroundColor: 'green',
+        textColor: 'green',
+        content: `Access Mode: ${props.data.access_mode}`,
+        icon: ShieldCheckIcon,
+      });
+    }
+
+    return badges;
+  }
+
   if (props.collection === 'entities') {
     const entityBadges = [{ backgroundColor: 'purple', textColor: 'purple', content: 'Entity', icon: Box, class: 'text-gray' }];
     if (props.data.aggregateRoot) {
@@ -435,6 +483,7 @@ nodeGraphs.push({
         {props?.collection === 'channels' && <ChannelSideBar channel={props} />}
         {props?.collection === 'flows' && <FlowSideBar flow={props} />}
         {props?.collection === 'entities' && <EntitySideBar entity={props} />}
+        {props?.collection === 'containers' && <ContainerSideBar container={props} />}
       </aside>
     </div>
   </main>

package/eventcatalog/src/pages/docs/[type]/[id]/[version].md.ts

@@ -15,6 +15,7 @@ const services = await getCollection('services');
 const domains = await getCollection('domains');
 const flows = await getCollection('flows');
 const channels = await getCollection('channels');
+const containers = await getCollection('containers');
 const entities = await getEntities();
 export async function getStaticPaths() {
   // Just return empty array if LLMs are not enabled
@@ -30,6 +31,7 @@ export async function getStaticPaths() {
     domains,
     flows,
     channels,
+    containers,
     entities,
   };
   const paths = Object.keys(collections).map((type) => {

package/eventcatalog/src/pages/docs/llm/llms-full.txt.ts

@@ -16,7 +16,8 @@ type AllowedCollections =
   | 'customPages'
   | 'channels'
   | 'entities'
-  | 'flows';
+  | 'flows'
+  | 'containers';
 
 const events = await getCollection('events');
 const commands = await getCollection('commands');
@@ -28,6 +29,7 @@ const users = await getCollection('users');
 const entities = await getCollection('entities');
 const channels = await getCollection('channels');
 const flows = await getCollection('flows');
+const containers = await getCollection('containers');
 
 const customDocs = await getCollection('customPages');
 
@@ -46,6 +48,7 @@ export const GET: APIRoute = async ({ params, request }) => {
     ...users,
     ...entities,
     ...channels,
+    ...containers,
     ...flows,
   ];
 

package/eventcatalog/src/pages/docs/llm/llms-services.txt.ts

@@ -12,6 +12,8 @@ export const GET: APIRoute = async ({ params, request }) => {
   const formatServiceWithLinks = (service: CollectionEntry<'services'>) => {
     const sends = service.data.sends as unknown as CollectionEntry<'events'>[];
     const receives = service.data.receives as unknown as CollectionEntry<'events'>[];
+    const writesTo = service.data.writesTo as unknown as CollectionEntry<'containers'>[];
+    const readsFrom = service.data.readsFrom as unknown as CollectionEntry<'containers'>[];
 
     const sendsList =
       sends
@@ -29,7 +31,23 @@ export const GET: APIRoute = async ({ params, request }) => {
         )
         .join('') || '    - Does not receive any messages';
 
-    return `## [${service.data.name} - ${service.data.version}](${baseUrl}/docs/services/${service.data.id}/${service.data.version}.mdx) - ${service.data.summary}\n  ## Sends\n${sendsList}\n  ## Receives\n${receivesList}`;
+    const writesToList =
+      writesTo
+        .map(
+          (write) =>
+            `    - [${write.data.name} - ${write.data.version}](${baseUrl}/docs/containers/${write.data.id}/${write.data.version}.mdx) - ${write.data.summary}`
+        )
+        .join('') || '    - Does not write to any containers';
+
+    const readsFromList =
+      readsFrom
+        .map(
+          (read) =>
+            `    - [${read.data.name} - ${read.data.version}](${baseUrl}/docs/containers/${read.data.id}/${read.data.version}.mdx) - ${read.data.summary}`
+        )
+        .join('') || '    - Does not read from any containers';
+
+    return `## [${service.data.name} - ${service.data.version}](${baseUrl}/docs/services/${service.data.id}/${service.data.version}.mdx) - ${service.data.summary}\n  ## Sends\n${sendsList}\n  ## Receives\n${receivesList}\n  ## Writes to\n${writesToList}\n  ## Reads from\n${readsFromList} \n`;
   };
 
   const content = ['# Services \n\n', services.map((item) => formatServiceWithLinks(item)).join('\n')].join('\n');

package/eventcatalog/src/pages/docs/llm/llms.txt.ts

@@ -17,6 +17,7 @@ const users = await getCollection('users');
 
 const flows = await getCollection('flows');
 const channels = await getCollection('channels');
+const containers = await getCollection('containers');
 
 const entities = await getCollection('entities');
 
@@ -115,6 +116,8 @@ export const GET: APIRoute = async ({ params, request }) => {
       )
       .join(''),
     ...(Object.keys(ubiquitousLanguages).length > 0 ? ['## Ubiquitous Language', renderUbiquitousLanguages(baseUrl)] : []),
+    '\n## Containers (Databases, External Systems)',
+    containers.map((item) => formatVersionedItem(item, 'containers')).join('\n'),
     '\n## Entities',
     renderEntities(baseUrl),
     '\n## Teams',

package/eventcatalog/src/pages/visualiser/[type]/[id]/[version]/_index.data.ts

@@ -19,7 +19,7 @@ export class Page extends HybridPage {
       flows: getFlows,
     };
 
-    const itemTypes: PageTypesWithFlows[] = ['events', 'commands', 'queries', 'services', 'domains', 'flows'];
+    const itemTypes: PageTypesWithFlows[] = ['events', 'commands', 'queries', 'services', 'domains', 'flows', 'containers'];
     const allItems = await Promise.all(itemTypes.map((type) => loaders[type]()));
 
     return allItems.flatMap((items, index) =>

package/eventcatalog/src/pages/visualiser/[type]/[id]/[version]/data/_index.data.ts

@@ -0,0 +1,80 @@
+import { HybridPage } from '@utils/page-loaders/hybrid-page';
+import { isAuthEnabled } from '@utils/feature';
+import { getServices, type Service } from '@utils/collections/services';
+
+const serviceHasData = (service: Service) => {
+  return service.data.writesTo?.length || 0 > 0 || service.data.readsFrom?.length || 0 > 0;
+};
+
+export class Page extends HybridPage {
+  static async getStaticPaths(): Promise<Array<{ params: any; props: any }>> {
+    if (isAuthEnabled()) {
+      return [];
+    }
+
+    const services = await getServices();
+    const servicesWithData = services.filter((service) => serviceHasData(service));
+
+    return servicesWithData.flatMap((service) => {
+      return {
+        params: {
+          type: 'services',
+          id: service.data.id,
+          version: service.data.version,
+        },
+        props: {
+          type: 'service',
+          ...service,
+        },
+      };
+    });
+  }
+
+  protected static async fetchData(params: any) {
+    const { id, version } = params;
+
+    if (!id || !version) {
+      return null;
+    }
+
+    // Get all items of the specified type
+    const items = await getServices();
+
+    // Find the specific item by id and version, and only if it has entities
+    const item = items.find((i) => i.data.id === id && i.data.version === version && serviceHasData(i));
+
+    if (!item) {
+      return null;
+    }
+
+    return item;
+  }
+
+  protected static createNotFoundResponse(): Response {
+    return new Response(null, {
+      status: 404,
+      statusText: 'Service data page not found',
+    });
+  }
+
+  static get clientAuthScript(): string {
+    if (!isAuthEnabled()) {
+      return '';
+    }
+
+    return `
+      if (typeof window !== 'undefined' && !import.meta.env.SSR) {
+        fetch('/api/auth/session')
+          .then(res => res.json())
+          .then(session => {
+            if (!session?.user) {
+              window.location.href = '/auth/login?callbackUrl=' + encodeURIComponent(window.location.pathname);
+            }
+          })
+          .catch(() => {
+            window.location.href = '/auth/login?callbackUrl=' + encodeURIComponent(window.location.pathname);
+          });
+      }
+    `;
+  }
+}

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

@@ -0,0 +1,52 @@
+---
+import NodeGraph from '@components/MDX/NodeGraph/NodeGraph.astro';
+import VisualiserLayout from '@layouts/VisualiserLayout.astro';
+import { buildUrl } from '@utils/url-builder';
+import { ClientRouter } from 'astro:transitions';
+
+import { Page } from './_index.data';
+
+export const prerender = Page.prerender;
+export const getStaticPaths = Page.getStaticPaths;
+
+// Get data
+const props = await Page.getData(Astro);
+
+const {
+  data: { id },
+  collection,
+} = props;
+---
+
+<VisualiserLayout title={`Visualiser | ${props.data.name} (${props.collection})`} description={props.data.summary}>
+  <div class="bg-gray-100/50 m-4">
+    <div class="h-[calc(100vh-130px)] w-full relative border border-gray-200" id={`${id}-portal`} transition:animate="fade"></div>
+    <NodeGraph
+      id={id}
+      collection={`${collection}-containers`}
+      title={`${props.data.name} (v${props.data.version}) - Data`}
+      mode="full"
+      linkTo="visualiser"
+      version={props.data.version}
+      linksToVisualiser={false}
+      href={{
+        label: `Open documentation for ${props.data.name} v${props.data.version}`,
+        url: buildUrl(`/docs/${props.collection}/${props.data.id}/${props.data.version}`),
+      }}
+    />
+  </div>
+  <ClientRouter />
+</VisualiserLayout>
+
+<script define:vars={{ id }}>
+  document.addEventListener('DOMContentLoaded', () => {
+    const urlSearchParams = new URLSearchParams(window.location.search);
+    const params = Object.fromEntries(urlSearchParams.entries());
+    const embeded = params.embed === 'true' ? true : false;
+    const viewport = document.getElementById(`${id}-portal`);
+
+    if (embeded) {
+      viewport.style.height = 'calc(100vh - 30px)';
+    }
+  });
+</script>

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

@@ -5,13 +5,20 @@ import { getEvents } from '@utils/events';
 import { getCommands } from '@utils/commands';
 import { getServices } from '@utils/collections/services';
 import { getDomains } from '@utils/collections/domains';
+import { getContainers } from '@utils/collections/containers';
 import type { CollectionEntry } from 'astro:content';
 import type { CollectionTypes } from '@types';
 
 export async function getStaticPaths() {
-  const [events, commands, services, domains] = await Promise.all([getEvents(), getCommands(), getServices(), getDomains()]);
+  const [events, commands, services, domains, containers] = await Promise.all([
+    getEvents(),
+    getCommands(),
+    getServices(),
+    getDomains(),
+    getContainers(),
+  ]);
 
-  const resources = [...domains, ...events, ...services, ...commands];
+  const resources = [...domains, ...events, ...services, ...commands, ...containers];
   const resourcesWithVisualiserEnabled = resources.filter((resource) => resource.data.visualiser !== false);
 
   const buildPages = (collection: CollectionEntry<CollectionTypes>[]) => {

package/eventcatalog/src/types/index.ts

@@ -1,4 +1,22 @@
-export type CollectionTypes = 'commands' | 'events' | 'queries' | 'domains' | 'services' | 'flows' | 'channels' | 'entities';
+export type CollectionTypes =
+  | 'commands'
+  | 'events'
+  | 'queries'
+  | 'domains'
+  | 'services'
+  | 'flows'
+  | 'channels'
+  | 'entities'
+  | 'containers';
 export type CollectionMessageTypes = 'commands' | 'events' | 'queries';
 export type CollectionUserTypes = 'users';
-export type PageTypes = 'events' | 'commands' | 'queries' | 'services' | 'domains' | 'channels' | 'flows' | 'entities';
+export type PageTypes =
+  | 'events'
+  | 'commands'
+  | 'queries'
+  | 'services'
+  | 'domains'
+  | 'channels'
+  | 'flows'
+  | 'entities'
+  | 'containers';