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

Add getCheckResultRenderers

Browse Source 
Signed-off-by: kielosz <kielosz@gmail.com>
This commit is contained in:
kielosz
2022-08-10 15:50:13 +02:00
parent 05d2262c45
commit f7e99ac1d8
21 changed files with 285 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/tech-insights/README.md
+40 -3
View File
@@ -44,11 +44,11 @@ const serviceEntityPage = (
);
```
It is not obligatory to pass title and description props to `EntityTechInsightsScorecardContent`. If those are left out, default values from `defaultCheckResultRenderers` in `CheckResultRenderer` will be taken, hence `Boolean scorecard` and `This card represents an overview of default boolean Backstage checks`.
It is obligatory to pass `title` prop to `EntityTechInsightsScorecardContent`, `description` prop is optional.
If you like to display multiple cards in a `EntityLayout.Route` use `EntityTechInsightsScorecardCard`.
You can pass an array `checksId` as a prop with the [Fact Retrievers ids](../tech-insights-backend#creating-fact-retrievers) to limit which checks you want to show in this card, If you don't pass, the default value is show all checks.
You can pass an array `checksId` as a prop with the [Fact Retrievers ids](../tech-insights-backend#creating-fact-retrievers) to limit which checks you want to show in this card. If you don't pass, the default value is show all checks.
```tsx
<EntityTechInsightsScorecardContent
@@ -87,6 +87,43 @@ const overviewContent = (
## Boolean Scorecard Example
If you follow the [Backend Example](https://github.com/backstage/backstage/tree/master/plugins/tech-insights-backend#backend-example), once the needed facts have been generated the boolean scorecard will look like this:
If you follow the [Backend Example](https://github.com/backstage/backstage/tree/master/plugins/tech-insights-backend#backend-example), once the needed facts have been generated the default boolean scorecard will look like this:
![Boolean Scorecard Example](./docs/boolean-scorecard-example.png)
## Adding custom rendering components
Default scorecard implementation displays only boolean check results. If you would like to support different types, you need to inject custom rendering components to the `TechInsightsClient` constructor.
```ts
// packages/app/src/apis.ts
export const apis: AnyApiFactory[] = [
...
createApiFactory({
api: techInsightsApiRef,
deps: { discoveryApi: discoveryApiRef, identityApi: identityApiRef },
factory: ({ discoveryApi, identityApi }) =>
new TechInsightsClient({
discoveryApi,
identityApi,
renderers: [
booleanCheckResultRenderer, // default boolean renderer
myCustomNumberRenderer, // custom renderer
],
}),
}),
...
];
```
```tsx
// packages/app/src/components/myCustomNumberRenderer.tsx
export const myCustomNumberRenderer: CheckResultRenderer = {
type: 'number',
component: (checkResult: CheckResult) => (
<Typography>{checkResult.result}</Typography>
),
};
```
plugins/tech-insights/api-report.md
+19 -19
View File
@@ -15,6 +15,9 @@ import { IdentityApi } from '@backstage/core-plugin-api';
import { default as React_2 } from 'react';
import { RouteRef } from '@backstage/core-plugin-api';
// @public
export const booleanCheckResultRenderer: CheckResultRenderer;
// @public
export type Check = {
id: string;
@@ -27,21 +30,27 @@ export type Check = {
// @public
export type CheckResultRenderer = {
type: string;
title: string;
description: string;
component: React_2.ReactElement;
component: (check: CheckResult) => React_2.ReactElement;
};
// @public (undocumented)
export const EntityTechInsightsScorecardCard: (props: {
title?: string | undefined;
export const EntityTechInsightsScorecardCard: ({
title,
description,
checksId,
}: {
title: string;
description?: string | undefined;
checksId?: string[] | undefined;
}) => JSX.Element;
// @public (undocumented)
export const EntityTechInsightsScorecardContent: (props: {
title?: string | undefined;
export const EntityTechInsightsScorecardContent: ({
title,
description,
checksId,
}: {
title: string;
description?: string | undefined;
checksId?: string[] | undefined;
}) => JSX.Element;
@@ -51,12 +60,7 @@ export interface TechInsightsApi {
// (undocumented)
getAllChecks(): Promise<Check[]>;
// (undocumented)
getScorecardsDefinition: (
type: string,
value: CheckResult[],
title?: string,
description?: string,
) => CheckResultRenderer | undefined;
getCheckResultRenderers: (types: string[]) => CheckResultRenderer[];
// (undocumented)
runBulkChecks(
entities: CompoundEntityRef[],
@@ -77,16 +81,12 @@ export class TechInsightsClient implements TechInsightsApi {
constructor(options: {
discoveryApi: DiscoveryApi;
identityApi: IdentityApi;
renderers?: CheckResultRenderer[];
});
// (undocumented)
getAllChecks(): Promise<Check[]>;
// (undocumented)
getScorecardsDefinition(
type: string,
value: CheckResult[],
title?: string,
description?: string,
): CheckResultRenderer | undefined;
getCheckResultRenderers(types: string[]): CheckResultRenderer[];
// (undocumented)
runBulkChecks(
entities: CompoundEntityRef[],
plugins/tech-insights/dev/index.tsx
+1 -1
View File
@@ -23,7 +23,7 @@ import {
createDevApp()
.registerPlugin(techInsightsPlugin)
.addPage({
element: <EntityTechInsightsScorecardContent />,
element: <EntityTechInsightsScorecardContent title="Test scorecard" />,
title: 'Root Page',
path: '/tech-insight-scorecard',
})
plugins/tech-insights/src/api/TechInsightsApi.ts
+1 -6
View File
@@ -38,12 +38,7 @@ export const techInsightsApiRef = createApiRef<TechInsightsApi>({
* @public
*/
export interface TechInsightsApi {
getScorecardsDefinition: (
type: string,
value: CheckResult[],
title?: string,
description?: string,
) => CheckResultRenderer | undefined;
getCheckResultRenderers: (types: string[]) => CheckResultRenderer[];
getAllChecks(): Promise<Check[]>;
runChecks(
entityParams: CompoundEntityRef,
plugins/tech-insights/src/api/TechInsightsClient.ts
+7 -13
View File
@@ -26,34 +26,28 @@ import { CompoundEntityRef } from '@backstage/catalog-model';
import {
CheckResultRenderer,
defaultCheckResultRenderers,
booleanCheckResultRenderer,
} from '../components/CheckResultRenderer';
/** @public */
export class TechInsightsClient implements TechInsightsApi {
private readonly discoveryApi: DiscoveryApi;
private readonly identityApi: IdentityApi;
private readonly renderers?: CheckResultRenderer[];
constructor(options: {
discoveryApi: DiscoveryApi;
identityApi: IdentityApi;
renderers?: CheckResultRenderer[];
}) {
this.discoveryApi = options.discoveryApi;
this.identityApi = options.identityApi;
this.renderers = options.renderers;
}
getScorecardsDefinition(
type: string,
value: CheckResult[],
title?: string,
description?: string,
): CheckResultRenderer | undefined {
const resultRenderers = defaultCheckResultRenderers(
value,
title,
description,
);
return resultRenderers.find(d => d.type === type);
getCheckResultRenderers(types: string[]): CheckResultRenderer[] {
const renderers = this.renderers ?? [booleanCheckResultRenderer];
return renderers.filter(d => types.includes(d.type));
}
async getAllChecks(): Promise<Check[]> {
plugins/tech-insights/src/components/BooleanCheck/BooleanCheck.tsx
+5 -33
View File
@@ -15,46 +15,18 @@
*/
import React from 'react';
import { makeStyles, List, ListItem, ListItemText } from '@material-ui/core';
import CheckCircleOutline from '@material-ui/icons/CheckCircleOutline';
import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline';
import { CheckResult } from '@backstage/plugin-tech-insights-common';
import { BackstageTheme } from '@backstage/theme';
const useStyles = makeStyles((theme: BackstageTheme) => ({
listItemText: {
paddingRight: theme.spacing(0.5),
flex: '0 1 auto',
},
icon: {
marginLeft: 'auto',
},
}));
type Prop = {
checkResult: CheckResult[];
checkResult: CheckResult;
};
export const BooleanCheck = ({ checkResult }: Prop) => {
const classes = useStyles();
return (
<List>
{checkResult.map((check, index) => (
<ListItem key={check.check.id}>
<ListItemText
key={index}
primary={check.check.name}
secondary={check.check.description}
className={classes.listItemText}
/>
{check.result ? (
<CheckCircleOutline className={classes.icon} color="primary" />
) : (
<ErrorOutlineIcon className={classes.icon} color="error" />
)}
</ListItem>
))}
</List>
return !!checkResult.result ? (
<CheckCircleOutline color="primary" />
) : (
<ErrorOutlineIcon color="error" />
);
};
plugins/tech-insights/src/components/CheckResultRenderer.tsx
+17 -21
View File
@@ -14,35 +14,31 @@
* limitations under the License.
*/
import { CheckResult } from '@backstage/plugin-tech-insights-common';
import {
BOOLEAN_CHECK_RESPONSE_TYPE,
CheckResult,
} from '@backstage/plugin-tech-insights-common';
import React from 'react';
import { BooleanCheck } from './BooleanCheck';
/**
* Defines a react component that is responsible for rendering a results of a given type.
* Defines a react component that is responsible for rendering a result of a given type.
*
* @public
*/
export type CheckResultRenderer = {
type: string;
title: string;
description: string;
component: React.ReactElement;
component: (check: CheckResult) => React.ReactElement;
};
export function defaultCheckResultRenderers(
value: CheckResult[],
title?: string,
description?: string,
): CheckResultRenderer[] {
return [
{
type: 'json-rules-engine',
title: title || 'Boolean scorecard',
description:
description ||
'This card represents an overview of default boolean Backstage checks:',
component: <BooleanCheck checkResult={value} />,
},
];
}
/**
* Default renderer for boolean check results.
*
* @public
*/
export const booleanCheckResultRenderer: CheckResultRenderer = {
type: BOOLEAN_CHECK_RESPONSE_TYPE,
component: (checkResult: CheckResult) => (
<BooleanCheck checkResult={checkResult} />
),
};
plugins/tech-insights/src/components/ScorecardsCard/ScorecardsCard.tsx
+7 -3
View File
@@ -23,8 +23,12 @@ import { ScorecardInfo } from '../ScorecardsInfo';
import Alert from '@material-ui/lab/Alert';
import { techInsightsApiRef } from '../../api/TechInsightsApi';
export const ScorecardsCard = (props: {
title?: string;
export const ScorecardsCard = ({
title,
description,
checksId,
}: {
title: string;
description?: string;
checksId?: string[];
}) => {
@@ -45,7 +49,7 @@ export const ScorecardsCard = (props: {
<ScorecardInfo
title={title}
description={description}
checks={value || []}
checkResults={value || []}
/>
);
};
plugins/tech-insights/src/components/ScorecardsContent/ScorecardContent.tsx
+7 -3
View File
@@ -31,8 +31,12 @@ const useStyles = makeStyles(() => ({
},
}));
export const ScorecardsContent = (props: {
title?: string;
export const ScorecardsContent = ({
title,
description,
checksId,
}: {
title: string;
description?: string;
checksId?: string[];
}) => {
@@ -56,7 +60,7 @@ export const ScorecardsContent = (props: {
<ScorecardInfo
title={title}
description={description}
checks={value || []}
checkResults={value || []}
/>
</Content>
</Page>
plugins/tech-insights/src/components/ScorecardsInfo/ScorecardInfo.tsx
+17 -27
View File
@@ -16,12 +16,11 @@
import React from 'react';
import { makeStyles, Grid, Typography } from '@material-ui/core';
import { useApi } from '@backstage/core-plugin-api';
import { InfoCard } from '@backstage/core-components';
import { CheckResult } from '@backstage/plugin-tech-insights-common';
import { techInsightsApiRef } from '../../api/TechInsightsApi';
import { BackstageTheme } from '@backstage/theme';
import { Alert } from '@material-ui/lab';
import { ScorecardsList } from '../ScorecardsList';
const useStyles = makeStyles((theme: BackstageTheme) => ({
subheader: {
@@ -30,6 +29,12 @@ const useStyles = makeStyles((theme: BackstageTheme) => ({
},
}));
type Checks = {
checkResults: CheckResult[];
title: string;
description?: string;
};
const infoCard = (
title: string | undefined,
description: string | undefined,
@@ -38,9 +43,11 @@ const infoCard = (
) => (
<Grid item xs={12}>
<InfoCard title={title}>
<Typography className={className} variant="body1" gutterBottom>
{description}
</Typography>
{description && (
<Typography className={className} variant="body1" gutterBottom>
{description}
</Typography>
)}
<Grid item xs={12}>
{element}
</Grid>
@@ -48,16 +55,10 @@ const infoCard = (
</Grid>
);
export const ScorecardInfo = (props: {
checks: CheckResult[];
title?: string;
description?: string;
}) => {
const { checks, title, description } = props;
export const ScorecardInfo = ({ checkResults, title, description }: Checks) => {
const classes = useStyles();
const api = useApi(techInsightsApiRef);
if (!checks.length) {
if (!checkResults.length) {
return infoCard(
title,
description,
@@ -66,21 +67,10 @@ export const ScorecardInfo = (props: {
);
}
const checkRenderType = api.getScorecardsDefinition(
checks[0].check.type,
checks,
return infoCard(
title,
description,
classes.subheader,
<ScorecardsList checkResults={checkResults} />,
);
if (checkRenderType) {
return infoCard(
checkRenderType.title,
checkRenderType.description,
classes.subheader,
checkRenderType.component,
);
}
return <></>;
};
plugins/tech-insights/src/components/ScorecardsList/ScorecardsList.tsx
+61
View File
@@ -0,0 +1,61 @@
/*
* Copyright 2021 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React from 'react';
import { useApi } from '@backstage/core-plugin-api';
import { makeStyles, List, ListItem, ListItemText } from '@material-ui/core';
import { techInsightsApiRef } from '../../api/TechInsightsApi';
import { CheckResult } from '@backstage/plugin-tech-insights-common';
import { BackstageTheme } from '@backstage/theme';
import { Alert } from '@material-ui/lab';
const useStyles = makeStyles((theme: BackstageTheme) => ({
listItemText: {
paddingRight: theme.spacing(0.5),
},
}));
type Prop = {
checkResults: CheckResult[];
};
export const ScorecardsList = ({ checkResults }: Prop) => {
const classes = useStyles();
const api = useApi(techInsightsApiRef);
const types = [...new Set(checkResults.map(({ check }) => check.type))];
const checkResultRenderers = api.getCheckResultRenderers(types);
return (
<List>
{checkResults.map((result, index) => (
<ListItem key={result.check.id}>
<ListItemText
key={index}
primary={result.check.name}
secondary={result.check.description}
className={classes.listItemText}
/>
{checkResultRenderers
.find(({ type }) => type === result.check.type)
?.component(result) ?? (
<Alert severity="error">Unknown type.</Alert>
)}
</ListItem>
))}
</List>
);
};
plugins/tech-insights/src/components/ScorecardsList/index.ts
+17
View File
@@ -0,0 +1,17 @@
/*
* Copyright 2021 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export { ScorecardsList } from './ScorecardsList';
plugins/tech-insights/src/index.ts
+1
View File
@@ -21,4 +21,5 @@ export {
export { techInsightsApiRef, TechInsightsClient } from './api';
export type { TechInsightsApi, Check } from './api';
export { booleanCheckResultRenderer } from './components/CheckResultRenderer';
export type { CheckResultRenderer } from './components/CheckResultRenderer';