paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 37 Packages Projects Releases Wiki Activity

Merge pull request #5558 from monzo/useRelatedEntities-batches

Browse Source 
Fetch relations in batches in `useRelatedEntities`
This commit is contained in:
Fredrik Adelöw
2021-05-04 11:34:54 +02:00
committed by GitHub
parent f87404a795 4dcab64185
commit 266160aa29
11 changed files with 149 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/friendly-readers-promise.md
+5
View File
@@ -0,0 +1,5 @@
---
'@backstage/plugin-catalog-react': patch
---
Fetch relations in batches in `useRelatedEntities`
plugins/api-docs/src/components/ApisCards/ConsumedApisCard.test.tsx
+12 -8
View File
@@ -96,14 +96,18 @@ describe('<ConsumedApisCard />', () => {
},
],
};
catalogApi.getEntityByName.mockResolvedValue({
apiVersion: 'v1',
kind: 'API',
metadata: {
name: 'target-name',
namespace: 'my-namespace',
},
spec: {},
catalogApi.getEntities.mockResolvedValue({
items: [
{
apiVersion: 'v1',
kind: 'API',
metadata: {
name: 'target-name',
namespace: 'my-namespace',
},
spec: {},
},
],
});
const { getByText } = await renderInTestApp(
plugins/api-docs/src/components/ApisCards/HasApisCard.test.tsx
+12 -8
View File
@@ -96,14 +96,18 @@ describe('<HasApisCard />', () => {
},
],
};
catalogApi.getEntityByName.mockResolvedValue({
apiVersion: 'v1',
kind: 'API',
metadata: {
name: 'target-name',
namespace: 'my-namespace',
},
spec: {},
catalogApi.getEntities.mockResolvedValue({
items: [
{
apiVersion: 'v1',
kind: 'API',
metadata: {
name: 'target-name',
namespace: 'my-namespace',
},
spec: {},
},
],
});
const { getByText } = await renderInTestApp(
plugins/api-docs/src/components/ApisCards/ProvidedApisCard.test.tsx
+12 -8
View File
@@ -96,14 +96,18 @@ describe('<ProvidedApisCard />', () => {
},
],
};
catalogApi.getEntityByName.mockResolvedValue({
apiVersion: 'v1',
kind: 'API',
metadata: {
name: 'target-name',
namespace: 'my-namespace',
},
spec: {},
catalogApi.getEntities.mockResolvedValue({
items: [
{
apiVersion: 'v1',
kind: 'API',
metadata: {
name: 'target-name',
namespace: 'my-namespace',
},
spec: {},
},
],
});
const { getByText } = await renderInTestApp(
plugins/api-docs/src/components/ComponentsCards/ConsumingComponentsCard.test.tsx
+12 -8
View File
@@ -101,14 +101,18 @@ describe('<ConsumingComponentsCard />', () => {
},
],
};
catalogApi.getEntityByName.mockResolvedValue({
apiVersion: 'v1',
kind: 'Component',
metadata: {
name: 'target-name',
namespace: 'my-namespace',
},
spec: {},
catalogApi.getEntities.mockResolvedValue({
items: [
{
apiVersion: 'v1',
kind: 'Component',
metadata: {
name: 'target-name',
namespace: 'my-namespace',
},
spec: {},
},
],
});
const { getByText } = await renderInTestApp(
plugins/api-docs/src/components/ComponentsCards/ProvidingComponentsCard.test.tsx
+12 -8
View File
@@ -101,14 +101,18 @@ describe('<ProvidingComponentsCard />', () => {
},
],
};
catalogApi.getEntityByName.mockResolvedValue({
apiVersion: 'v1',
kind: 'Component',
metadata: {
name: 'target-name',
namespace: 'my-namespace',
},
spec: {},
catalogApi.getEntities.mockResolvedValue({
items: [
{
apiVersion: 'v1',
kind: 'Component',
metadata: {
name: 'target-name',
namespace: 'my-namespace',
},
spec: {},
},
],
});
const { getByText } = await renderInTestApp(
plugins/catalog-react/package.json
+1
View File
@@ -33,6 +33,7 @@
"@backstage/core": "^0.7.3",
"@material-ui/core": "^4.11.0",
"@types/react": "^16.9",
"lodash": "^4.17.15",
"react": "^16.13.1",
"react-router": "6.0.0-beta.0",
"react-router-dom": "6.0.0-beta.0",
plugins/catalog-react/src/hooks/useRelatedEntities.ts
+47 -10
View File
@@ -13,11 +13,14 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Entity } from '@backstage/catalog-model';
import { Entity, EntityRelation } from '@backstage/catalog-model';
import { useApi } from '@backstage/core';
import { chunk, groupBy } from 'lodash';
import { useAsync } from 'react-use';
import { catalogApiRef } from '../api';
const BATCH_SIZE = 20;
export function useRelatedEntities(
entity: Entity,
{ type, kind }: { type?: string; kind?: string },
@@ -40,16 +43,50 @@ export function useRelatedEntities(
return [];
}
// TODO: This code could be more efficient if there was an endpoint in the
// backend that either returns the relations of entity (filtered by type)
// or if there is a way to perform a batch request by entity name. However,
// such an implementation would probably be better placed in the graphql API.
const results = await Promise.all(
relations?.map(r => catalogApi.getEntityByName(r.target)),
// Group the relations by kind and namespace to reduce the size of the request query string.
// Without this grouping, the kind and namespace would need to be specified for each relation, e.g.
// `filter=kind=component,namespace=default,name=example1&filter=kind=component,namespace=default,name=example2`
// with grouping, we can generate a query a string like
// `filter=kind=component,namespace=default,name=example1,example2`
const relationsByKindAndNamespace: EntityRelation[][] = Object.values(
groupBy(relations, ({ target }) => {
return `${target.kind}:${target.namespace}`.toLowerCase();
}),
);
// Skip entities that where not found, for example if a relation references
// an entity that doesn't exist.
return results.filter(e => e) as Entity[];
// Split the names within each group into batches to further reduce the query string length.
const batchedRelationsByKindAndNamespace: {
kind: string;
namespace: string;
nameBatches: string[][];
}[] = [];
for (const rs of relationsByKindAndNamespace) {
batchedRelationsByKindAndNamespace.push({
// All relations in a group have the same kind and namespace, so its arbitrary which we pick
kind: rs[0].target.kind,
namespace: rs[0].target.namespace,
nameBatches: chunk(
rs.map(r => r.target.name),
BATCH_SIZE,
),
});
}
const results = await Promise.all(
batchedRelationsByKindAndNamespace.flatMap(rs => {
return rs.nameBatches.map(names => {
return catalogApi.getEntities({
filter: {
kind: rs.kind,
'metadata.namespace': rs.namespace,
'metadata.name': names,
},
});
});
}),
);
return results.flatMap(r => r.items);
}, [entity, type]);
return {
plugins/catalog/src/components/HasComponentsCard/HasComponentsCard.test.tsx
+12 -8
View File
@@ -91,14 +91,18 @@ describe('<HasComponentsCard />', () => {
},
],
};
catalogApi.getEntityByName.mockResolvedValue({
apiVersion: 'v1',
kind: 'Component',
metadata: {
name: 'target-name',
namespace: 'my-namespace',
},
spec: {},
catalogApi.getEntities.mockResolvedValue({
items: [
{
apiVersion: 'v1',
kind: 'Component',
metadata: {
name: 'target-name',
namespace: 'my-namespace',
},
spec: {},
},
],
});
const { getByText } = await renderInTestApp(
plugins/catalog/src/components/HasSubcomponentsCard/HasSubcomponentsCard.test.tsx
+12 -8
View File
@@ -91,14 +91,18 @@ describe('<HasSubcomponentsCard />', () => {
},
],
};
catalogApi.getEntityByName.mockResolvedValue({
apiVersion: 'v1',
kind: 'Component',
metadata: {
name: 'target-name',
namespace: 'my-namespace',
},
spec: {},
catalogApi.getEntities.mockResolvedValue({
items: [
{
apiVersion: 'v1',
kind: 'Component',
metadata: {
name: 'target-name',
namespace: 'my-namespace',
},
spec: {},
},
],
});
const { getByText } = await renderInTestApp(
plugins/catalog/src/components/HasSystemsCard/HasSystemsCard.test.tsx
+12 -8
View File
@@ -89,14 +89,18 @@ describe('<HasSystemsCard />', () => {
},
],
};
catalogApi.getEntityByName.mockResolvedValue({
apiVersion: 'v1',
kind: 'System',
metadata: {
name: 'target-name',
namespace: 'my-namespace',
},
spec: {},
catalogApi.getEntities.mockResolvedValue({
items: [
{
apiVersion: 'v1',
kind: 'System',
metadata: {
name: 'target-name',
namespace: 'my-namespace',
},
spec: {},
},
],
});
const { getByText } = await renderInTestApp(