paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 46 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
.changeset/loud-comics-search.md
+19
View File
@@ -0,0 +1,19 @@
---
'@backstage/plugin-tech-insights': minor
'@backstage/plugin-tech-insights-backend-module-jsonfc': minor
'@backstage/plugin-tech-insights-backend': patch
'@backstage/plugin-tech-insights-common': patch
---
Added the possibility to display check results of different types on a single scorecard.
- **BREAKING** Removed the `getScorecardsDefinition` method from the `TechInsightsApi` interface. Added the `getCheckResultRenderers` method that returns rendering components for given types.
- **BREAKING** The `CheckResultRenderer` type now exposes the `component` factory method that creates a React component used to display a result of a provided check result.
- The `TechInsightsClient` constructor accepts now the optional `renderers` parameter that can be used to inject a custom renderer.
- **BREAKING** The `title` parameter in the `EntityTechInsightsScorecardContent` and `EntityTechInsightsScorecardCard` components is now mandatory.
- The `booleanCheckResultRenderer` used to render boolean check results is exported.
- **BREAKING** The `JsonRulesEngineFactChecker` class now returns checks results with the `type` value equals to `boolean`.
If you were overriding the `getScorecardsDefinition` method to adjust the rendering of check results, you should now provide a custom renderer using `renderers` parameter in the `TechInsightsClient` class.
See the [README](https://github.com/backstage/backstage/tree/master/plugins/tech-insights/README.md) for more details.
packages/app/src/components/catalog/EntityPage.tsx
+19
View File
@@ -110,6 +110,7 @@ import {
} from '@backstage/plugin-rollbar';
import { EntitySentryContent } from '@backstage/plugin-sentry';
import { EntityTechdocsContent } from '@backstage/plugin-techdocs';
import { EntityTechInsightsScorecardCard } from '@backstage/plugin-tech-insights';
import { EntityTodoContent } from '@backstage/plugin-todo';
import { Button, Grid } from '@material-ui/core';
import BadgeIcon from '@material-ui/icons/CallToAction';
@@ -445,6 +446,24 @@ const serviceEntityPage = (
<EntityGithubInsightsContent />
</EntityLayout.Route>
<EntityLayout.Route path="/tech-insights" title="Scorecards">
<Grid container spacing={3} alignItems="stretch">
<Grid item xs={12} md={6}>
<EntityTechInsightsScorecardCard
title="Scorecard 1"
description="This is a sample scorecard no. 1"
checksId={['titleCheck']}
/>
</Grid>
<Grid item xs={12} md={6}>
<EntityTechInsightsScorecardCard
title="Scorecard 2"
checksId={['techDocsCheck']}
/>
</Grid>
</Grid>
</EntityLayout.Route>
<EntityLayout.Route path="/code-coverage" title="Code Coverage">
<EntityCodeCoverageContent />
</EntityLayout.Route>
packages/backend/src/plugins/techInsights.ts
+22 -21
View File
@@ -41,15 +41,15 @@ export default async function createPlugin(
tokenManager: env.tokenManager,
factRetrievers: [
createFactRetrieverRegistration({
cadence: '1 1 1 * *', // Example cron, At 01:01 on day-of-month 1.
cadence: '1 1 1 * *', // Example cron, at 01:01 on day-of-month 1.
factRetriever: entityOwnershipFactRetriever,
}),
createFactRetrieverRegistration({
cadence: '1 1 1 * *',
cadence: '* * * * *', // Example cron, every minute.
factRetriever: entityMetadataFactRetriever,
}),
createFactRetrieverRegistration({
cadence: '1 1 1 * *',
cadence: '* * * * *', // Example cron, every minute.
factRetriever: techdocsFactRetriever,
}),
],
@@ -57,33 +57,34 @@ export default async function createPlugin(
logger: env.logger,
checks: [
{
id: 'simpleTestCheck',
id: 'titleCheck',
type: JSON_RULE_ENGINE_CHECK_TYPE,
name: 'simpleTestCheck',
description: 'Simple Check For Testing',
factIds: [
'entityMetadataFactRetriever',
'techdocsFactRetriever',
'entityOwnershipFactRetriever',
],
name: 'Title Check',
description:
'Verifies that a Title, used to improve readability, has been set for this entity',
factIds: ['entityMetadataFactRetriever'],
rule: {
conditions: {
all: [
{
fact: 'hasGroupOwner',
operator: 'equal',
value: true,
},
{
fact: 'hasTitle',
operator: 'equal',
value: true,
},
{
fact: 'hasDescription',
operator: 'equal',
value: true,
},
],
},
},
},
{
id: 'techDocsCheck',
type: JSON_RULE_ENGINE_CHECK_TYPE,
name: 'TechDocs Check',
description:
'Verifies that TechDocs has been enabled for this entity',
factIds: ['techdocsFactRetriever'],
rule: {
conditions: {
all: [
{
fact: 'hasAnnotationBackstageIoTechdocsRef',
operator: 'equal',
plugins/tech-insights-backend-module-jsonfc/src/service/JsonRulesEngineFactChecker.test.ts
+5 -4
View File
@@ -14,6 +14,7 @@
* limitations under the License.
*/
import { BOOLEAN_CHECK_RESPONSE_TYPE } from '@backstage/plugin-tech-insights-common';
import {
TechInsightCheckRegistry,
TechInsightsStore,
@@ -259,7 +260,7 @@ describe('JsonRulesEngineFactChecker', () => {
result: true,
check: {
id: 'simpleTestCheck',
type: JSON_RULE_ENGINE_CHECK_TYPE,
type: BOOLEAN_CHECK_RESPONSE_TYPE,
name: 'simpleTestCheck',
description: 'Simple Check For Testing',
factIds: ['test-factretriever'],
@@ -295,7 +296,7 @@ describe('JsonRulesEngineFactChecker', () => {
result: false,
check: {
id: 'customOperatorTestCheck',
type: JSON_RULE_ENGINE_CHECK_TYPE,
type: BOOLEAN_CHECK_RESPONSE_TYPE,
name: 'customOperatorTestCheck',
description: 'Check For Testing using Custom Operator',
factIds: ['test-factretriever'],
@@ -334,7 +335,7 @@ describe('JsonRulesEngineFactChecker', () => {
result: true,
check: {
id: 'simpleTestCheck',
type: JSON_RULE_ENGINE_CHECK_TYPE,
type: BOOLEAN_CHECK_RESPONSE_TYPE,
name: 'simpleTestCheck',
description: 'Simple Check For Testing',
factIds: ['test-factretriever'],
@@ -365,7 +366,7 @@ describe('JsonRulesEngineFactChecker', () => {
result: true,
check: {
id: 'simpleTestCheck2',
type: JSON_RULE_ENGINE_CHECK_TYPE,
type: BOOLEAN_CHECK_RESPONSE_TYPE,
name: 'simpleTestCheck2',
description: 'Second Simple Check For Testing',
factIds: ['test-factretriever'],
plugins/tech-insights-backend-module-jsonfc/src/service/JsonRulesEngineFactChecker.ts
+5 -2
View File
@@ -22,7 +22,10 @@ import {
TechInsightsStore,
CheckValidationResponse,
} from '@backstage/plugin-tech-insights-node';
import { FactResponse } from '@backstage/plugin-tech-insights-common';
import {
BOOLEAN_CHECK_RESPONSE_TYPE,
FactResponse,
} from '@backstage/plugin-tech-insights-common';
import {
Engine,
EngineResult,
@@ -272,7 +275,7 @@ export class JsonRulesEngineFactChecker
) {
const returnable = {
id: techInsightCheck.id,
type: techInsightCheck.type,
type: BOOLEAN_CHECK_RESPONSE_TYPE,
name: techInsightCheck.name,
description: techInsightCheck.description,
factIds: techInsightCheck.factIds,
plugins/tech-insights-backend/src/service/fact/factRetrievers/techdocsFactRetriever.ts
+1 -1
View File
@@ -40,7 +40,7 @@ export const techdocsFactRetriever: FactRetriever = {
schema: {
[techdocsAnnotationFactName]: {
type: 'boolean',
description: 'The entity has a title in metadata',
description: 'The entity has a TechDocs reference annotation',
},
},
handler: async ({
plugins/tech-insights-common/api-report.md
+3
View File
@@ -6,6 +6,9 @@
import { DateTime } from 'luxon';
import { JsonValue } from '@backstage/types';
// @public
export const BOOLEAN_CHECK_RESPONSE_TYPE = 'boolean';
// @public
export interface BooleanCheckResult extends CheckResult {
// (undocumented)
plugins/tech-insights-common/src/index.ts
+11 -5
View File
@@ -28,9 +28,8 @@ export interface CheckResponse {
*/
id: string;
/**
* Type identifier for the check.
* Can be used to determine storage options, logical routing to correct FactChecker implementation
* or to help frontend render correct component types based on this
* Type identifier for the check response.
* Used in frontend to render correct component.
*/
type: string;
/**
@@ -106,7 +105,7 @@ export type FactResponse = {
*
* Contains information about the facts used to calculate the check result
* and information about the check itself. Both may include metadata to be able to display additional information.
* A collection of these should be parseable by the frontend to display scorecards
* A collection of these should be parsable by the frontend to display scorecards
*
* @public
*/
@@ -116,6 +115,13 @@ export type CheckResult = {
result: JsonValue;
};
/**
* CheckResponse Boolean type identifier.
*
* @public
*/
export const BOOLEAN_CHECK_RESPONSE_TYPE = 'boolean';
/**
* CheckResult of type Boolean.
*
@@ -126,7 +132,7 @@ export interface BooleanCheckResult extends CheckResult {
}
/**
* Response type for bulk check opretation. Contains a list of entities and their respective check results.
* Response type for bulk check operation. Contains a list of entities and their respective check results.
*
* @public
*/
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';