diff --git a/.changeset/twelve-doors-speak.md b/.changeset/twelve-doors-speak.md new file mode 100644 index 0000000000..ac88bf561a --- /dev/null +++ b/.changeset/twelve-doors-speak.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-tech-insights': patch +--- + +Added `onlyFailed` prop to `ScorecardsCard`, and `isFailed` to each check type. diff --git a/plugins/tech-insights/api-report.md b/plugins/tech-insights/api-report.md index 1e07c0fc69..5544299bf2 100644 --- a/plugins/tech-insights/api-report.md +++ b/plugins/tech-insights/api-report.md @@ -39,6 +39,7 @@ export type CheckResultRenderer = { type: string; component: (check: CheckResult) => React_2.ReactElement; description?: (check: CheckResult) => string | React_2.ReactElement; + isFailed?: (check: CheckResult) => boolean; }; // @public (undocumented) @@ -46,6 +47,7 @@ export const EntityTechInsightsScorecardCard: (props: { title: string; description?: string | undefined; checksId?: string[] | undefined; + onlyFailed?: boolean | undefined; }) => JSX_2.Element; // @public (undocumented) @@ -73,6 +75,7 @@ export const ScorecardInfo: (props: { checkResults: CheckResult[]; title: string; description?: string | undefined; + noWarning?: boolean | undefined; }) => JSX_2.Element; // @public (undocumented) diff --git a/plugins/tech-insights/src/components/BooleanCheck/BooleanCheck.tsx b/plugins/tech-insights/src/components/BooleanCheck/BooleanCheck.tsx index 17758e8ee4..5729387372 100644 --- a/plugins/tech-insights/src/components/BooleanCheck/BooleanCheck.tsx +++ b/plugins/tech-insights/src/components/BooleanCheck/BooleanCheck.tsx @@ -29,3 +29,9 @@ export const BooleanCheck = (props: { checkResult: CheckResult }) => { ); }; + +/** + * @public + */ +export const isBooleanCheckFailed = (checkResult: CheckResult) => + !checkResult.result; diff --git a/plugins/tech-insights/src/components/BooleanCheck/index.ts b/plugins/tech-insights/src/components/BooleanCheck/index.ts index 729ab4d62e..accb43f464 100644 --- a/plugins/tech-insights/src/components/BooleanCheck/index.ts +++ b/plugins/tech-insights/src/components/BooleanCheck/index.ts @@ -14,4 +14,4 @@ * limitations under the License. */ -export { BooleanCheck } from './BooleanCheck'; +export { BooleanCheck, isBooleanCheckFailed } from './BooleanCheck'; diff --git a/plugins/tech-insights/src/components/CheckResultRenderer.tsx b/plugins/tech-insights/src/components/CheckResultRenderer.tsx index 7db3c72c02..8dc0a13517 100644 --- a/plugins/tech-insights/src/components/CheckResultRenderer.tsx +++ b/plugins/tech-insights/src/components/CheckResultRenderer.tsx @@ -16,7 +16,7 @@ import { CheckResult } from '@backstage/plugin-tech-insights-common'; import React from 'react'; -import { BooleanCheck } from './BooleanCheck'; +import { BooleanCheck, isBooleanCheckFailed } from './BooleanCheck'; /** * Defines a react component that is responsible for rendering a result of a given type. @@ -27,6 +27,7 @@ export type CheckResultRenderer = { type: string; component: (check: CheckResult) => React.ReactElement; description?: (check: CheckResult) => string | React.ReactElement; + isFailed?: (check: CheckResult) => boolean; }; /** @@ -39,4 +40,5 @@ export const jsonRulesEngineCheckResultRenderer: CheckResultRenderer = { component: (checkResult: CheckResult) => ( ), + isFailed: isBooleanCheckFailed, }; diff --git a/plugins/tech-insights/src/components/ScorecardsCard/ScorecardsCard.tsx b/plugins/tech-insights/src/components/ScorecardsCard/ScorecardsCard.tsx index 4bbc283829..7f69b9432d 100644 --- a/plugins/tech-insights/src/components/ScorecardsCard/ScorecardsCard.tsx +++ b/plugins/tech-insights/src/components/ScorecardsCard/ScorecardsCard.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React from 'react'; +import React, { useMemo } from 'react'; import useAsync from 'react-use/lib/useAsync'; import { ErrorPanel, Progress } from '@backstage/core-components'; import { useApi } from '@backstage/core-plugin-api'; @@ -27,8 +27,9 @@ export const ScorecardsCard = (props: { title: string; description?: string; checksId?: string[]; + onlyFailed?: boolean; }) => { - const { title, description, checksId } = props; + const { title, description, checksId, onlyFailed } = props; const api = useApi(techInsightsApiRef); const { entity } = useEntity(); const { value, loading, error } = useAsync( @@ -36,17 +37,34 @@ export const ScorecardsCard = (props: { [api, entity, JSON.stringify(checksId)], ); + const checkResultRenderers = useMemo(() => { + if (!onlyFailed || !value) return {}; + + const types = [...new Set(value.map(({ check }) => check.type))]; + const renderers = api.getCheckResultRenderers(types); + return Object.fromEntries( + renderers.map(renderer => [renderer.type, renderer]), + ); + }, [api, value, onlyFailed]); + if (loading) { return ; } else if (error) { return ; } + const filteredValue = !onlyFailed + ? value || [] + : (value || []).filter(val => + checkResultRenderers[val.check.type]?.isFailed?.(val), + ); + return ( ); }; diff --git a/plugins/tech-insights/src/components/ScorecardsInfo/ScorecardInfo.tsx b/plugins/tech-insights/src/components/ScorecardsInfo/ScorecardInfo.tsx index 2a2ca982d1..40277f31f4 100644 --- a/plugins/tech-insights/src/components/ScorecardsInfo/ScorecardInfo.tsx +++ b/plugins/tech-insights/src/components/ScorecardsInfo/ScorecardInfo.tsx @@ -54,11 +54,22 @@ export const ScorecardInfo = (props: { checkResults: CheckResult[]; title: string; description?: string; + noWarning?: boolean; }) => { - const { checkResults, title, description } = props; + const { checkResults, title, description, noWarning } = props; const classes = useStyles(); if (!checkResults.length) { + if (noWarning) { + return infoCard( + title, + description, + classes.subheader, + + All checks passed, or no checks have been performed yet + , + ); + } return infoCard( title, description,