Merge pull request #11362 from mwz/fix-catalog-graph-kinds-filter-in-dev-app

[Catalog Graph] Fix kind filter error in dev app

.changeset/short-ears-sit.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog-graph': patch
+---
+
+Fix kind filter error in the dev app

plugins/catalog-graph/README.md

@@ -83,3 +83,9 @@ To use the catalog graph plugin, you have to add some things to your Backstage a
      <EntityCatalogGraphCard variant="gridItem" height={400} />
    </Grid>
    ```
+
+## Development
+
+Run `yarn` in the root of this plugin to install all dependencies and then `yarn start` to run a [development version](./dev/index.tsx) of this plugin.
+
+![dev](https://user-images.githubusercontent.com/1190768/167130527-14d787ce-510d-408a-8f93-45bb94b3a9af.png)

plugins/catalog-graph/dev/index.tsx

@@ -13,14 +13,20 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { GetEntitiesResponse } from '@backstage/catalog-client';
 import {
-  Entity,
+  GetEntitiesResponse,
+  GetEntityFacetsRequest,
+  GetEntityFacetsResponse,
+} from '@backstage/catalog-client';
+import {
   CompoundEntityRef,
   DEFAULT_NAMESPACE,
+  Entity,
   RELATION_API_CONSUMED_BY,
   RELATION_API_PROVIDED_BY,
   RELATION_CONSUMES_API,
+  RELATION_DEPENDENCY_OF,
+  RELATION_DEPENDS_ON,
   RELATION_HAS_PART,
   RELATION_OWNED_BY,
   RELATION_OWNER_OF,
@@ -30,22 +36,24 @@ import {
 } from '@backstage/catalog-model';
 import { Content, Header, Page } from '@backstage/core-components';
 import { createDevApp } from '@backstage/dev-utils';
+import { CatalogEntityPage } from '@backstage/plugin-catalog';
 import {
   CatalogApi,
   catalogApiRef,
   EntityProvider,
 } from '@backstage/plugin-catalog-react';
+import { JsonObject } from '@backstage/types';
 import { Grid } from '@material-ui/core';
+import _ from 'lodash';
 import React from 'react';
 import {
   CatalogGraphPage,
   catalogGraphPlugin,
   EntityCatalogGraphCard,
 } from '../src';
-import { CatalogEntityPage } from '@backstage/plugin-catalog';
 
 type DataRelation = [string, string, string];
-type DataEntity = [string, string, DataRelation[]];
+type DataEntity = [string, string, DataRelation[], JsonObject?];
 
 const entities = (
   [
@@ -75,8 +83,19 @@ const entities = (
         [RELATION_OWNED_BY, 'Group', 'team-a'],
         [RELATION_PART_OF, 'System', 'wayback'],
         [RELATION_PROVIDES_API, 'API', 'wayback-api'],
+        [RELATION_DEPENDS_ON, 'Resource', 'wayback-archive-storage'],
       ],
     ],
+    [
+      'Resource',
+      'wayback-archive-storage',
+      [
+        [RELATION_OWNED_BY, 'Group', 'team-a'],
+        [RELATION_PART_OF, 'System', 'wayback'],
+        [RELATION_DEPENDENCY_OF, 'Component', 'wayback-archive'],
+      ],
+      { type: 's3-bucket' },
+    ],
     [
       'Component',
       'wayback-search',
@@ -84,8 +103,19 @@ const entities = (
         [RELATION_OWNED_BY, 'Group', 'team-a'],
         [RELATION_PART_OF, 'System', 'wayback'],
         [RELATION_CONSUMES_API, 'API', 'wayback-api'],
+        [RELATION_DEPENDS_ON, 'Resource', 'wayback-search-db'],
       ],
     ],
+    [
+      'Resource',
+      'wayback-search-db',
+      [
+        [RELATION_OWNED_BY, 'Group', 'team-a'],
+        [RELATION_PART_OF, 'System', 'wayback'],
+        [RELATION_DEPENDENCY_OF, 'Component', 'wayback-search'],
+      ],
+      { type: 'database' },
+    ],
     [
       'API',
       'wayback-api',
@@ -101,7 +131,9 @@ const entities = (
       'team-a',
       [
         [RELATION_OWNER_OF, 'Component', 'wayback-archive'],
+        [RELATION_OWNER_OF, 'Resource', 'wayback-archive-storage'],
         [RELATION_OWNER_OF, 'Component', 'wayback-search'],
+        [RELATION_OWNER_OF, 'Resource', 'wayback-search-db'],
         [RELATION_OWNER_OF, 'API', 'wayback-api'],
         [RELATION_OWNER_OF, 'Domain', 'wayback'],
         [RELATION_OWNER_OF, 'System', 'wayback'],
@@ -109,7 +141,7 @@ const entities = (
     ],
   ] as DataEntity[]
 ).reduce((o, d) => {
-  const [kind, name, relations] = d;
+  const [kind, name, relations, spec] = d;
 
   const entity: Entity = {
     apiVersion: 'backstage.io/v1alpha1',
@@ -117,6 +149,7 @@ const entities = (
     metadata: {
       name,
     },
+    spec: spec,
     relations: relations.map(([type, k, n]) => ({
       target: { kind: k, name: n, namespace: DEFAULT_NAMESPACE },
       targetRef: stringifyEntityRef({
@@ -149,6 +182,25 @@ createDevApp()
         async getEntities(): Promise<GetEntitiesResponse> {
           return { items: Object.values(entities) };
         },
+        async getEntityFacets(
+          request: GetEntityFacetsRequest,
+        ): Promise<GetEntityFacetsResponse> {
+          if (request.facets.includes('kind')) {
+            const kinds: [string, number][] = _.chain(entities)
+              .map(e => e.kind)
+              .groupBy(k => k)
+              .mapValues(v => v.length)
+              .toPairs()
+              .value();
+            const kindFacet = kinds.map(([kind, count]) => ({
+              value: kind,
+              count: count,
+            }));
+
+            return { facets: { kind: kindFacet } };
+          }
+          return { facets: {} };
+        },
       } as Partial<CatalogApi> as unknown as CatalogApi;
     },
   })

plugins/catalog-graph/package.json

@@ -50,6 +50,7 @@
     "@backstage/core-app-api": "^1.0.2-next.1",
     "@backstage/dev-utils": "^1.0.2-next.2",
     "@backstage/test-utils": "^1.1.0-next.2",
+    "@backstage/types": "^1.0.0",
     "@testing-library/jest-dom": "^5.10.1",
     "@testing-library/react": "^12.1.3",
     "@testing-library/react-hooks": "^8.0.0",