working demo

package.json

@@ -43,9 +43,10 @@
   },
   "dependencies": {
     "@backstage/catalog-model": "^1.5.0",
-    "@backstage/core-components": "^0.14.9",
+    "@backstage/core-components": "^0.15.0",
     "@backstage/core-plugin-api": "^1.9.3",
     "@backstage/errors": "^1.2.4",
+    "@backstage/plugin-catalog": "^1.22.0",
     "@backstage/plugin-catalog-react": "^1.12.2",
     "@backstage/plugin-home-react": "^0.1.15",
     "@backstage/theme": "^0.5.6",

src/features/EntitiesTable/EntitiesTable.tsx

@@ -7,6 +7,7 @@ import { PortEntity } from "../../api/search";
 export const EntitiesTable = (props: {
   entities: PortEntity[];
   isLoading: boolean;
+  title: string;
 }) => {
   const columns: TableColumn[] = useMemo(() => {
     const getUniqueFieldsByProperties = (entities: PortEntity[]) => {
@@ -66,6 +67,7 @@ export const EntitiesTable = (props: {
   return (
     <div>
       <Table
+        title={props.title}
         columns={columns}
         isLoading={props.isLoading}
         data={props.entities}

src/features/EntityTabPortContent/EntityTabPortContent.tsx

@@ -1,23 +1,21 @@
-import { useEntity } from "@backstage/plugin-catalog-react";
-import React, { useMemo } from "react";
-import useSearchQuery from "../../hooks/useSearchQuery/useSearchQuery";
+import React from "react";
+import { PortEntity } from "../../api/search";
 import { EntitiesTable } from "../EntitiesTable/EntitiesTable";
 
-export const EntityTabPortContent = (props: { annotation: string }) => {
-  const { entity } = useEntity();
-  const { searchQuery } = useMemo(
-    () => ({
-      searchQuery: entity.metadata.annotations?.[props.annotation] ?? "",
-    }),
-    [entity.metadata.annotations, props.annotation]
-  );
-
-  const { data, isLoading } = useSearchQuery(searchQuery);
-
+export const EntityTabPortContent = ({
+  blueprint,
+  entities,
+  isLoading,
+}: {
+  blueprint: string;
+  entities: PortEntity[];
+  isLoading: boolean;
+}) => {
   return (
-    <div>
-      <h2>Related Entities</h2>
-      <EntitiesTable entities={data ?? []} isLoading={isLoading} />
-    </div>
+    <EntitiesTable
+      entities={entities}
+      isLoading={isLoading}
+      title={`${blueprint.charAt(0).toUpperCase()}${blueprint.slice(1)}s`}
+    />
   );
 };

src/hooks/useEntityRoutes.tsx

@@ -0,0 +1,51 @@
+import { EntityLayout } from "@backstage/plugin-catalog";
+import { useEntity } from "@backstage/plugin-catalog-react";
+import { groupBy } from "lodash";
+import React, { useMemo } from "react";
+import { EntityTabPortContent } from "..";
+import useSearchQuery from "./useSearchQuery/useSearchQuery";
+
+export const useEntityRoutes = () => {
+  const { entity } = useEntity();
+  const serviceName = entity.metadata.annotations?.["getport.io/service-name"];
+
+  const { searchQuery } = useMemo(
+    () => ({
+      searchQuery: serviceName
+        ? {
+            combinator: "and",
+            rules: [
+              {
+                operator: "relatedTo",
+                blueprint: "service",
+                value: serviceName,
+              },
+            ],
+          }
+        : {},
+    }),
+    [serviceName]
+  );
+
+  const { data, isLoading } = useSearchQuery(searchQuery);
+
+  const groupedData = useMemo(() => {
+    return groupBy(data, "blueprint");
+  }, [data]);
+
+  const routes = useMemo(() => {
+    return Object.entries(groupedData)
+      .sort((a, b) => a[0].localeCompare(b[0]))
+      .map(([blueprint, entities]) => (
+        <EntityLayout.Route path={`/port/${blueprint}`} title={blueprint}>
+          <EntityTabPortContent
+            blueprint={blueprint}
+            entities={entities}
+            isLoading={isLoading}
+          />
+        </EntityLayout.Route>
+      ));
+  }, [groupedData, isLoading]);
+
+  return routes;
+};

src/hooks/useSearchQuery/useSearchQuery.ts

@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { useEffect, useState, useMemo } from 'react';
-import search, { PortEntity } from '../../api/search';
-import { useApi, configApiRef } from '@backstage/core-plugin-api';
+import { configApiRef, useApi } from "@backstage/core-plugin-api";
+import { useEffect, useMemo, useState } from "react";
+import search, { PortEntity } from "../../api/search";
 
 const tryJsonParse = (str: string) => {
   try {
@@ -11,30 +11,28 @@ const tryJsonParse = (str: string) => {
   }
 };
 
-function useSearchQuery(searchQueryStr: string) {
+function useSearchQuery(searchQuery: any) {
   const [data, setData] = useState<PortEntity[]>([]);
   const [error, setError] = useState<string | null>();
   const [isLoading, setIsLoading] = useState(false);
   const config = useApi(configApiRef);
-  const backendUrl = useMemo(() => config.getString('backend.baseUrl'), []);
-
-  const searchQuery = tryJsonParse(searchQueryStr);
+  const backendUrl = useMemo(() => config.getString("backend.baseUrl"), []);
 
   useEffect(() => {
     setIsLoading(true);
 
     search(backendUrl, searchQuery)
-      .then(entities => {
+      .then((entities) => {
         setData(entities);
         setError(null);
       })
       .catch(() => {
-        setError('Failed fetching files');
+        setError("Failed fetching related entities");
       })
       .finally(() => {
         setIsLoading(false);
       });
-  }, [searchQueryStr]);
+  }, [JSON.stringify(searchQuery)]);
 
   if (!searchQuery) {
     return { data: [], error: null, isLoading: false };

src/index.ts

@@ -1 +1,9 @@
-export { portPlugin, EntityTabPortContent, HomePage } from './plugin';
+import { Entity } from "@backstage/catalog-model";
+
+export { EntityTabPortContent, HomePage, portPlugin } from "./plugin";
+
+export const isPortDataAvailable = (entity: Entity) => {
+  return !!entity.metadata?.annotations?.["getport.io/service-name"];
+};
+
+export { useEntityRoutes } from "./hooks/useEntityRoutes";

src/plugin.ts

@@ -1,33 +1,34 @@
 import {
-  createPlugin,
   createComponentExtension,
-} from '@backstage/core-plugin-api';
+  createPlugin,
+} from "@backstage/core-plugin-api";
 
-import { rootRouteRef } from './routes';
+import { rootRouteRef } from "./routes";
 
 export const portPlugin = createPlugin({
-  id: 'port',
+  id: "port",
   routes: {
     root: rootRouteRef,
   },
 });
 
 export const EntityTabPortContent = portPlugin.provide(
   createComponentExtension({
-    name: 'EntityTabPortContent',
+    name: "EntityTabPortContent",
     component: {
       lazy: () =>
-      import('./features/EntityTabPortContent/EntityTabPortContent').then(m => m.EntityTabPortContent),
-    }
-  }),
+        import("./features/EntityTabPortContent/EntityTabPortContent").then(
+          (m) => m.EntityTabPortContent
+        ),
+    },
+  })
 );
 
 export const HomePage = portPlugin.provide(
   createComponentExtension({
-    name: 'HomePage',
+    name: "HomePage",
     component: {
-      lazy: () =>
-      import('./features/HomePage').then(m => m.HomePage),
-    }
-  }),
-);
+      lazy: () => import("./features/HomePage").then((m) => m.HomePage),
+    },
+  })
+);