@eventcatalog/core 5.0.0-beta.2 → 5.0.0-beta.3

package/eventcatalog/src/layouts/VerticalSideBarLayout.astro

@@ -323,7 +323,6 @@ const isNavigationItemCurrent = (item: Pick<VerticalNavigationItem, 'href' | 'ma
     return (
       pathname === itemPath ||
       (pathname.includes('/docs') && !pathname.includes('/docs/custom')) ||
-      pathname.includes('/architecture/') ||
       pathname.includes('/visualiser') ||
       (pathname.includes('/schemas') && !pathname.includes('/schemas/explorer') && !pathname.includes('/schemas/fields'))
     );
@@ -889,7 +888,6 @@ const verticalNavAutoCollapsePaths = [buildUrl('/discover', true), buildUrl('/do
       return (
         pathname === targetPath ||
         (pathname.includes('/docs') && !pathname.includes('/docs/custom')) ||
-        pathname.includes('/architecture/') ||
         pathname.includes('/visualiser') ||
         (pathname.includes('/schemas') && !pathname.includes('/schemas/explorer') && !pathname.includes('/schemas/fields'))
       );

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

@@ -1,88 +1,77 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { loadArchitectureItems, Page } from './_index.data';
+import { Page } from './_index.data';
 
-const collectionMocks = vi.hoisted(() => ({
+const mocks = vi.hoisted(() => ({
+  isSSR: vi.fn(() => false),
   getDomains: vi.fn(),
   getServices: vi.fn(),
   getSystems: vi.fn(),
+  getOwnersWithResources: vi.fn(),
 }));
 
-vi.mock('@utils/feature', () => ({
-  isSSR: () => false,
-}));
+const loaders: Record<string, () => Promise<unknown>> = {
+  domains: () => mocks.getDomains(),
+  services: () => mocks.getServices(),
+  systems: () => mocks.getSystems(),
+};
 
-vi.mock('@utils/collections/domains', () => ({ getDomains: collectionMocks.getDomains }));
-vi.mock('@utils/collections/systems', () => ({ getSystems: collectionMocks.getSystems }));
-vi.mock('@utils/page-loaders/page-data-loader', () => ({
-  pageDataLoader: {
-    services: (...args: unknown[]) => collectionMocks.getServices(...args),
-    domains: (...args: unknown[]) => collectionMocks.getDomains(...args),
-    systems: (...args: unknown[]) => collectionMocks.getSystems(...args),
-  },
+vi.mock('@utils/feature', () => ({ isSSR: mocks.isSSR }));
+vi.mock('@utils/url-builder', () => ({ buildUrl: (path: string) => path }));
+vi.mock('@utils/collections/resource-owners', () => ({
+  createResourcesCatalog: () => ({}),
+  loadResourceOwners: (type: string) => loaders[type](),
+  getOwnersWithResources: mocks.getOwnersWithResources,
 }));
 
-const domain = {
-  collection: 'domains',
-  data: { id: 'ordering', name: 'Ordering', version: '1.0.0' },
-};
-
-const service = {
-  collection: 'services',
-  data: { id: 'order-service', name: 'Order Service', version: '1.0.0' },
-};
+const entry = (collection: string, id: string, version = '1.0.0') => ({ collection, data: { id, name: id, version } });
 
-const system = {
-  collection: 'systems',
-  data: { id: 'order-management-system', name: 'Order Management', version: '1.0.0' },
-};
+const ordering = entry('domains', 'ordering');
+const orderService = entry('services', 'order-service');
+const orderServiceV0 = entry('services', 'order-service', '0.1.0');
+const cartSystem = entry('systems', 'cart-system');
 
-describe('architecture page data', () => {
+describe('architecture page redirects', () => {
   beforeEach(() => {
-    collectionMocks.getDomains.mockReset().mockResolvedValue([domain]);
-    collectionMocks.getServices.mockReset().mockResolvedValue([service]);
-    collectionMocks.getSystems.mockReset().mockResolvedValue([system]);
+    mocks.isSSR.mockReturnValue(false);
+    mocks.getDomains.mockReset().mockResolvedValue([ordering]);
+    mocks.getServices.mockReset().mockResolvedValue([orderService, orderServiceV0]);
+    mocks.getSystems.mockReset().mockResolvedValue([cartSystem]);
+    // Only the latest order service and the cart system have a Resources page.
+    mocks.getOwnersWithResources.mockReset().mockImplementation(async (type: string) => {
+      if (type === 'services') return [orderService];
+      if (type === 'systems') return [cartSystem];
+      return [];
+    });
   });
 
-  it('hydrates domain and system services for static architecture paths', async () => {
+  it('redirects every architecture page to its Resources page, or the docs page when it has no Resources page', async () => {
     const paths = await Page.getStaticPaths();
 
-    expect(collectionMocks.getDomains).toHaveBeenCalledWith({ enrichServices: true });
-    expect(collectionMocks.getSystems).toHaveBeenCalledWith({ enrichServices: true });
-    expect(paths).toEqual(
-      expect.arrayContaining([
-        expect.objectContaining({
-          params: { type: 'domains', id: 'ordering', version: '1.0.0' },
-        }),
-        expect.objectContaining({
-          params: { type: 'systems', id: 'order-management-system', version: '1.0.0' },
-        }),
-        expect.objectContaining({
-          params: { type: 'services', id: 'order-service', version: '1.0.0' },
-        }),
-      ])
-    );
+    expect(
+      paths.map(({ params, props }) => [`/architecture/${params.type}/${params.id}/${params.version}`, props.redirectPath])
+    ).toEqual([
+      ['/architecture/services/order-service/1.0.0', '/docs/services/order-service/1.0.0/resources'],
+      ['/architecture/services/order-service/0.1.0', '/docs/services/order-service/0.1.0'],
+      ['/architecture/domains/ordering/1.0.0', '/docs/domains/ordering/1.0.0'],
+      ['/architecture/systems/cart-system/1.0.0', '/docs/systems/cart-system/1.0.0/resources'],
+    ]);
   });
 
-  it('hydrates domain services when architecture pages are fetched in SSR', async () => {
-    await Page.getData({
-      props: {},
-      params: { type: 'domains', id: 'ordering', version: '1.0.0' },
-    } as any);
+  it('works out the redirect when the page is requested on a server', async () => {
+    mocks.isSSR.mockReturnValue(true);
 
-    expect(collectionMocks.getDomains).toHaveBeenCalledWith({ enrichServices: true });
+    await expect(
+      Page.getData({ params: { type: 'systems', id: 'cart-system', version: '1.0.0' }, props: {} } as any)
+    ).resolves.toMatchObject({ redirectPath: '/docs/systems/cart-system/1.0.0/resources' });
   });
 
-  it('hydrates system services when architecture pages are fetched in SSR', async () => {
-    await Page.getData({
-      props: {},
-      params: { type: 'systems', id: 'order-management-system', version: '1.0.0' },
-    } as any);
-
-    expect(collectionMocks.getSystems).toHaveBeenCalledWith({ enrichServices: true });
-  });
+  it('returns not found for resources without an architecture page', async () => {
+    mocks.isSSR.mockReturnValue(true);
 
-  it('loads domains with enrichServices so DomainGrid command links keep their collection', async () => {
-    await loadArchitectureItems('domains');
-    expect(collectionMocks.getDomains).toHaveBeenCalledWith({ enrichServices: true });
+    await expect(
+      Page.getData({ params: { type: 'events', id: 'order-created', version: '1.0.0' }, props: {} } as any)
+    ).rejects.toMatchObject({
+      status: 404,
+    });
   });
 });

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

@@ -1,53 +1,48 @@
 import { isSSR } from '@utils/feature';
 import { HybridPage } from '@utils/page-loaders/hybrid-page';
-import type { PageTypes } from '@types';
-import { pageDataLoader } from '@utils/page-loaders/page-data-loader';
-import { getDomains } from '@utils/collections/domains';
-import { getSystems } from '@utils/collections/systems';
+import {
+  createResourcesCatalog,
+  getOwnersWithResources,
+  loadResourceOwners,
+  type ResourcesCatalog,
+} from '@utils/collections/resource-owners';
+import type { ResourceOwner } from '@utils/collections/resources';
 
-const architecturePageTypes: PageTypes[] = ['services', 'domains', 'systems'];
+// The architecture overview pages were replaced by the Resources pages. These routes stay so
+// old links keep working: each one redirects to the resource's Resources page, or to its docs
+// page when it has nothing to list.
+const architecturePageTypes = ['services', 'domains', 'systems'] as const;
+type ArchitecturePageType = (typeof architecturePageTypes)[number];
 
-/**
- * Architecture grids render service sends/receives as docs links, so domains and
- * systems must hydrate those messages (collection + name). `pageDataLoader`
- * uses the cheaper unenriched path used by docs/sidebar.
- */
-export const loadArchitectureItems = (type: PageTypes) => {
-  if (type === 'domains') {
-    return getDomains({ enrichServices: true });
-  }
+const isArchitecturePageType = (type: string): type is ArchitecturePageType =>
+  architecturePageTypes.includes(type as ArchitecturePageType);
 
-  if (type === 'systems') {
-    return getSystems({ enrichServices: true });
-  }
+const key = (item: ResourceOwner) => `${item.data.id}:${item.data.version}`;
+
+const getRedirectPaths = async (type: ArchitecturePageType, catalog: ResourcesCatalog = createResourcesCatalog()) => {
+  const [items, ownersWithResources] = await Promise.all([loadResourceOwners(type), getOwnersWithResources(type, catalog)]);
+  const hasResourcesPage = new Set(ownersWithResources.map(key));
 
-  return pageDataLoader[type as PageTypes]();
+  return items.map((item) => {
+    const docsPath = `/docs/${type}/${item.data.id}/${item.data.version}`;
+    return { item, redirectPath: hasResourcesPage.has(key(item)) ? `${docsPath}/resources` : docsPath };
+  });
 };
 
-/**
- * Documentation page class for all collection types with versioning
- */
 export class Page extends HybridPage {
   static async getStaticPaths() {
     if (isSSR()) {
       return [];
     }
 
-    const pageData = await Promise.all(architecturePageTypes.map((type) => loadArchitectureItems(type)));
+    const catalog = createResourcesCatalog();
+    const redirects: Awaited<ReturnType<typeof getRedirectPaths>>[] = [];
+    for (const type of architecturePageTypes) redirects.push(await getRedirectPaths(type, catalog));
 
-    return pageData.flatMap((items, index) =>
-      items.map((item) => ({
-        params: {
-          type: architecturePageTypes[index],
-          id: item.data.id,
-          version: item.data.version,
-        },
-        props: {
-          type: architecturePageTypes[index],
-          ...item,
-          // Not everything needs the body of the page itself.
-          body: undefined,
-        },
+    return architecturePageTypes.flatMap((type, index) =>
+      redirects[index].map(({ item, redirectPath }) => ({
+        params: { type, id: item.data.id, version: item.data.version },
+        props: { type, data: { id: item.data.id, name: item.data.name, version: item.data.version }, redirectPath },
       }))
     );
   }
@@ -55,23 +50,16 @@ export class Page extends HybridPage {
   protected static async fetchData(params: any) {
     const { type, id, version } = params;
 
-    if (!type || !id || !version || !architecturePageTypes.includes(type)) {
+    if (!type || !id || !version || !isArchitecturePageType(type)) {
       return null;
     }
 
-    const items = await loadArchitectureItems(type as PageTypes);
-
-    // Find the specific item by id and version
-    const item = items.find((i) => i.data.id === id && i.data.version === version);
-
-    if (!item) {
+    const match = (await getRedirectPaths(type)).find(({ item }) => item.data.id === id && item.data.version === version);
+    if (!match) {
       return null;
     }
 
-    return {
-      type,
-      ...item,
-    };
+    return { type, data: { id, name: match.item.data.name, version }, redirectPath: match.redirectPath };
   }
 
   protected static createNotFoundResponse(): Response {

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

@@ -1,38 +1,20 @@
 ---
-import DomainGrid from '@components/Grids/DomainGrid';
-import SystemGrid from '@components/Grids/SystemGrid';
-import MessageGrid from '@components/Grids/MessageGrid';
-import { getSpecificationsForService } from '@utils/collections/services';
-
-import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
+// The architecture overview pages were replaced by the Resources pages; this route only
+// redirects so old links keep working.
+import LatestVersionRedirect from '@components/LatestVersionRedirect.astro';
+import { isSSR } from '@utils/feature';
+import { buildUrl } from '@utils/url-builder';
 import { Page } from './_index.data';
 
 export const prerender = Page.prerender;
 export const getStaticPaths = Page.getStaticPaths;
 
-// Get data
-const props = await Page.getData(Astro);
-let domain = props;
-
-const pageTitle = `${props.type} | ${props.data.name}`.replace(/^\w/, (c) => c.toUpperCase());
-
-const type = props.type;
+const { data, redirectPath } = await Page.getData(Astro);
+const redirectUrl = buildUrl(redirectPath);
 
-const specifications = type === 'services' ? getSpecificationsForService(props) : [];
+if (isSSR()) {
+  return Astro.redirect(`${redirectUrl}${Astro.url.search}${Astro.url.hash}`, 301);
+}
 ---
 
-<VerticalSideBarLayout title={pageTitle}>
-  <main class="flex docs-layout min-h-full bg-[rgb(var(--ec-page-bg))]">
-    <div class="flex docs-layout w-full">
-      <div class="w-full min-w-0 lg:mr-2 xl:pr-12 py-8 bg-[rgb(var(--ec-page-bg))]">
-        {type === 'domains' && <DomainGrid domain={domain} client:load />}
-        {type === 'systems' && <SystemGrid system={props} client:load />}
-        {
-          (type === 'agents' || type === 'services') && (
-            <MessageGrid service={props} specifications={specifications} client:load />
-          )
-        }
-      </div>
-    </div>
-  </main>
-</VerticalSideBarLayout>
+<LatestVersionRedirect title={`${data.name} | Resources`} redirectUrl={redirectUrl} />

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

@@ -0,0 +1,79 @@
+---
+import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
+import { buildUrl } from '@utils/url-builder';
+import { isVisualiserEnabled } from '@utils/feature';
+import {
+  ResourcesTable,
+  type ResourceItem,
+} from '@components/Tables/Resources/ResourcesTable';
+import { getCollection } from 'astro:content';
+import {
+  getDocsPath,
+  getFavorite,
+  getResourceGroups,
+  getResourceRelationship,
+  getSchemaPath,
+  getVisualiserPath,
+  type ResourceOwner,
+  type ResourceOwnerCollection,
+} from '@utils/collections/resources';
+
+// Shared by the generic Resources route and the services route.
+interface Props {
+  resourceOwner: ResourceOwner;
+}
+
+const { resourceOwner } = Astro.props;
+const { data } = resourceOwner;
+const ownerCollection = resourceOwner.collection as ResourceOwnerCollection;
+
+// Only show resources directly attached to the owner. Domain child resources are not
+// flattened, so services inside a child system remain on that system's page.
+const resourceGroups = getResourceGroups(data, ownerCollection, resourceOwner);
+
+const withBaseUrl = (path: string | undefined) => (path ? buildUrl(path) : undefined);
+
+// Messages with an entry in the schemas collection have a schema page.
+const schemaKeys = new Set(
+  (await getCollection('schemas')).map(
+    ({ data: schema }) => `${schema.message.collectionName}:${schema.message.id}:${schema.message.version}`
+  )
+);
+
+const resources: ResourceItem[] = resourceGroups.flatMap(({ collection, items }) =>
+  items.map((item) => ({
+    collection,
+    id: item.data.id,
+    name: item.data.name || item.data.id,
+    version: item.data.version,
+    summary: item.data.summary,
+    icon: item.data?.styles?.icon,
+    href: buildUrl(getDocsPath(collection, item)),
+    visualiserHref: withBaseUrl(getVisualiserPath(collection, item, isVisualiserEnabled())),
+    schemaHref: withBaseUrl(getSchemaPath(collection, item, schemaKeys)),
+    favorite: getFavorite(collection, item),
+    relationship: getResourceRelationship(data, ownerCollection, collection, item, resourceOwner),
+  }))
+);
+---
+
+<VerticalSideBarLayout title={`${data.name} | Resources`}>
+  <style is:global>
+    :root[data-embedded='true'] #resources-page {
+      height: 100dvh !important;
+    }
+  </style>
+  {/* Like the discover pages: pull the table out of the content gutter and fill the viewport so it can paginate. */}
+  <main
+    id="resources-page"
+    class="flex h-full min-h-0 flex-col overflow-hidden bg-[rgb(var(--ec-page-bg))]"
+    style="margin-left: calc(var(--ec-app-content-padding-left, 5rem) * -1); margin-right: calc(var(--ec-app-content-padding-right, 5rem) * -1); height: calc(100dvh - 60px);"
+  >
+    <ResourcesTable
+      resources={resources}
+      title={`${data.name} Resources`}
+      description={`${resources.length} ${resources.length === 1 ? 'resource' : 'resources'} mapped to ${data.name}.`}
+      client:only="react"
+    />
+  </main>
+</VerticalSideBarLayout>

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

@@ -1,28 +1,46 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { loadResourceOwner } from './_index.data';
+import { Page, ServicePage } from './_index.data';
 
-const collectionMocks = vi.hoisted(() => ({
-  getDomains: vi.fn(() => Promise.resolve([])),
-  getSystems: vi.fn(() => Promise.resolve([])),
+const mocks = vi.hoisted(() => ({
+  getOwnersWithResources: vi.fn(),
+  findOwnerWithResources: vi.fn(),
 }));
 
-vi.mock('@utils/collections/domains', () => ({ getDomains: collectionMocks.getDomains }));
-vi.mock('@utils/collections/systems', () => ({ getSystems: collectionMocks.getSystems }));
+vi.mock('@utils/feature', () => ({ isSSR: () => false }));
+vi.mock('@utils/collections/resource-owners', () => ({
+  RESOURCE_OWNER_COLLECTIONS: ['domains', 'systems', 'services', 'flows', 'channels', 'events', 'commands', 'queries'],
+  createResourcesCatalog: () => ({}),
+  getOwnersWithResources: mocks.getOwnersWithResources,
+  findOwnerWithResources: mocks.findOwnerWithResources,
+}));
+
+const owner = (collection: string, id: string) => ({ collection, data: { id, version: '1.0.0' } });
 
-describe('Resources page owner loader', () => {
+describe('Resources routes', () => {
   beforeEach(() => {
-    vi.clearAllMocks();
+    mocks.getOwnersWithResources.mockReset().mockImplementation(async (type: string) => [owner(type, `${type}-owner`)]);
+    mocks.findOwnerWithResources.mockReset();
   });
 
-  it('loads domains without flattening child-subdomain services and agents', async () => {
-    await loadResourceOwner('domains');
+  // /docs/services/[id]/[docType]/[docId] would otherwise catch /docs/services/{id}/{version}/resources,
+  // so services get their own route and the generic route leaves them out.
+  it('gives every owner type but services a path on the generic route', async () => {
+    const paths = await Page.getStaticPaths();
 
-    expect(collectionMocks.getDomains).toHaveBeenCalledWith({ includeServicesInSubdomains: false });
+    expect(paths.map(({ params }) => params.type)).toEqual(['domains', 'systems', 'flows', 'channels', 'events', 'commands', 'queries']);
+    expect(paths[0]).toEqual({ params: { type: 'domains', id: 'domains-owner', version: '1.0.0' }, props: owner('domains', 'domains-owner') });
   });
 
-  it('keeps the system loader unchanged', async () => {
-    await loadResourceOwner('systems');
+  it('gives services their own route without a type param', async () => {
+    const paths = await ServicePage.getStaticPaths();
+
+    expect(paths).toEqual([{ params: { id: 'services-owner', version: '1.0.0' }, props: owner('services', 'services-owner') }]);
+  });
 
-    expect(collectionMocks.getSystems).toHaveBeenCalledWith();
+  it('returns not found for types without a Resources page on a server request', async () => {
+    await expect(Page.getData({ params: { type: 'entities', id: 'Order', version: '1.0.0' }, props: {} } as any)).rejects.toMatchObject({
+      status: 404,
+    });
+    expect(mocks.findOwnerWithResources).not.toHaveBeenCalled();
   });
 });

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

@@ -1,74 +1,79 @@
 import { isSSR } from '@utils/feature';
 import { HybridPage } from '@utils/page-loaders/hybrid-page';
-import { hasResources } from './_resources';
+import type { ResourceOwner, ResourceOwnerCollection } from '@utils/collections/resources';
+import {
+  createResourcesCatalog,
+  findOwnerWithResources,
+  getOwnersWithResources,
+  RESOURCE_OWNER_COLLECTIONS,
+} from '@utils/collections/resource-owners';
 
-// The Resources page lists the resources directly attached to a single system or
-// domain. It is only available for systems and domains — every other resource type 404s.
-const SUPPORTED_TYPES = ['systems', 'domains'] as const;
-type SupportedType = (typeof SUPPORTED_TYPES)[number];
+// The Resources page lists the resources attached to a single system, domain, service, flow,
+// channel or message. Every other resource type 404s.
+//
+// Services have their own route (pages/docs/services/[id]/[version]/resources), because the
+// version-less alias /docs/services/[id]/[docType]/[docId] outranks this generic route and
+// would otherwise catch /docs/services/{id}/{version}/resources.
+const GENERIC_ROUTE_TYPES = RESOURCE_OWNER_COLLECTIONS.filter((type) => type !== 'services');
 
-const isSupportedType = (type: string): type is SupportedType => SUPPORTED_TYPES.includes(type as SupportedType);
+type RouteParams = { type?: string; id?: string; version?: string };
 
-export const loadResourceOwner = async (type: SupportedType) => {
-  if (type === 'systems') {
-    const { getSystems } = await import('@utils/collections/systems');
-    return getSystems();
-  }
-  const { getDomains } = await import('@utils/collections/domains');
-  return getDomains({ includeServicesInSubdomains: false });
-};
+const createResourcesPage = ({
+  types,
+  toParams,
+  typeOf,
+}: {
+  types: ResourceOwnerCollection[];
+  toParams: (type: ResourceOwnerCollection, owner: ResourceOwner) => RouteParams;
+  typeOf: (params: RouteParams) => string | undefined;
+}) =>
+  class extends HybridPage {
+    static get prerender(): boolean {
+      return !isSSR();
+    }
 
-export class Page extends HybridPage {
-  static get prerender(): boolean {
-    return !isSSR();
-  }
+    static async getStaticPaths(): Promise<Array<{ params: RouteParams; props: ResourceOwner }>> {
+      if (isSSR()) {
+        return [];
+      }
 
-  static async getStaticPaths(): Promise<Array<{ params: any; props: any }>> {
-    if (isSSR()) {
-      return [];
+      const catalog = createResourcesCatalog();
+      const paths: Array<{ params: RouteParams; props: ResourceOwner }> = [];
+      for (const type of types) {
+        for (const owner of await getOwnersWithResources(type, catalog)) {
+          paths.push({ params: toParams(type, owner), props: owner });
+        }
+      }
+      return paths;
     }
 
-    const owners = await Promise.all(SUPPORTED_TYPES.map((type) => loadResourceOwner(type)));
-
-    return SUPPORTED_TYPES.flatMap((type, index) =>
-      owners[index]
-        .filter((owner) => hasResources(owner, type))
-        .map((owner) => ({
-          params: {
-            type,
-            id: owner.data.id,
-            version: owner.data.version,
-          },
-          props: {
-            ...owner,
-          },
-        }))
-    );
-  }
+    protected static async fetchData(params: RouteParams) {
+      const type = typeOf(params);
+      const { id, version } = params;
 
-  protected static async fetchData(params: any) {
-    const { type, id, version } = params;
+      if (!type || !id || !version || !types.includes(type as ResourceOwnerCollection)) {
+        return null;
+      }
 
-    if (!type || !id || !version || !isSupportedType(type)) {
-      return null;
+      return findOwnerWithResources(type as ResourceOwnerCollection, id, version);
     }
 
-    const owners = await loadResourceOwner(type);
-    const owner = owners.find((o) => o.data.id === id && o.data.version === version);
-
-    if (!owner || !hasResources(owner, type)) {
-      return null;
+    protected static createNotFoundResponse(): Response {
+      return new Response(null, {
+        status: 404,
+        statusText: 'Resources not found',
+      });
     }
+  };
 
-    return {
-      ...owner,
-    };
-  }
+export const Page = createResourcesPage({
+  types: GENERIC_ROUTE_TYPES,
+  toParams: (type, owner) => ({ type, id: owner.data.id, version: owner.data.version }),
+  typeOf: (params) => params.type,
+});
 
-  protected static createNotFoundResponse(): Response {
-    return new Response(null, {
-      status: 404,
-      statusText: 'Resources not found',
-    });
-  }
-}
+export const ServicePage = createResourcesPage({
+  types: ['services'],
+  toParams: (_type, owner) => ({ id: owner.data.id, version: owner.data.version }),
+  typeOf: () => 'services',
+});