diff --git a/.changeset/short-ears-sit.md b/.changeset/short-ears-sit.md new file mode 100644 index 0000000000..e75908a37d --- /dev/null +++ b/.changeset/short-ears-sit.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog-graph': patch +--- + +Fix kind filter error in the dev app diff --git a/plugins/catalog-graph/README.md b/plugins/catalog-graph/README.md index 0034cf0c3b..33dee92935 100644 --- a/plugins/catalog-graph/README.md +++ b/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 ``` + +## 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) diff --git a/plugins/catalog-graph/dev/index.tsx b/plugins/catalog-graph/dev/index.tsx index 7d772702a1..1ef9f676de 100644 --- a/plugins/catalog-graph/dev/index.tsx +++ b/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 { return { items: Object.values(entities) }; }, + async getEntityFacets( + request: GetEntityFacetsRequest, + ): Promise { + 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 as unknown as CatalogApi; }, }) diff --git a/plugins/catalog-graph/package.json b/plugins/catalog-graph/package.json index 722a08d460..79f98c06a7 100644 --- a/plugins/catalog-graph/package.json +++ b/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",