From f7e99ac1d81841e50496f22aeb473673e6b2ef62 Mon Sep 17 00:00:00 2001 From: kielosz Date: Wed, 10 Aug 2022 15:50:13 +0200 Subject: [PATCH 1/4] Add getCheckResultRenderers Signed-off-by: kielosz --- .changeset/loud-comics-search.md | 19 ++++++ .../app/src/components/catalog/EntityPage.tsx | 19 ++++++ packages/backend/src/plugins/techInsights.ts | 43 ++++++------- .../JsonRulesEngineFactChecker.test.ts | 9 +-- .../src/service/JsonRulesEngineFactChecker.ts | 7 ++- .../factRetrievers/techdocsFactRetriever.ts | 2 +- plugins/tech-insights-common/api-report.md | 3 + plugins/tech-insights-common/src/index.ts | 16 +++-- plugins/tech-insights/README.md | 43 ++++++++++++- plugins/tech-insights/api-report.md | 38 ++++++------ plugins/tech-insights/dev/index.tsx | 2 +- .../tech-insights/src/api/TechInsightsApi.ts | 7 +-- .../src/api/TechInsightsClient.ts | 20 +++--- .../components/BooleanCheck/BooleanCheck.tsx | 38 ++---------- .../src/components/CheckResultRenderer.tsx | 38 ++++++------ .../ScorecardsCard/ScorecardsCard.tsx | 10 ++- .../ScorecardsContent/ScorecardContent.tsx | 10 ++- .../ScorecardsInfo/ScorecardInfo.tsx | 44 ++++++------- .../ScorecardsList/ScorecardsList.tsx | 61 +++++++++++++++++++ .../src/components/ScorecardsList/index.ts | 17 ++++++ plugins/tech-insights/src/index.ts | 1 + 21 files changed, 285 insertions(+), 162 deletions(-) create mode 100644 .changeset/loud-comics-search.md create mode 100644 plugins/tech-insights/src/components/ScorecardsList/ScorecardsList.tsx create mode 100644 plugins/tech-insights/src/components/ScorecardsList/index.ts diff --git a/.changeset/loud-comics-search.md b/.changeset/loud-comics-search.md new file mode 100644 index 0000000000..2d8c15ce9d --- /dev/null +++ b/.changeset/loud-comics-search.md @@ -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. diff --git a/packages/app/src/components/catalog/EntityPage.tsx b/packages/app/src/components/catalog/EntityPage.tsx index 288196266e..e15df4bc6c 100644 --- a/packages/app/src/components/catalog/EntityPage.tsx +++ b/packages/app/src/components/catalog/EntityPage.tsx @@ -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 = ( + + + + + + + + + + + diff --git a/packages/backend/src/plugins/techInsights.ts b/packages/backend/src/plugins/techInsights.ts index 80ac559859..5e7df66cc1 100644 --- a/packages/backend/src/plugins/techInsights.ts +++ b/packages/backend/src/plugins/techInsights.ts @@ -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', diff --git a/plugins/tech-insights-backend-module-jsonfc/src/service/JsonRulesEngineFactChecker.test.ts b/plugins/tech-insights-backend-module-jsonfc/src/service/JsonRulesEngineFactChecker.test.ts index c808713c3b..62c7c8bc61 100644 --- a/plugins/tech-insights-backend-module-jsonfc/src/service/JsonRulesEngineFactChecker.test.ts +++ b/plugins/tech-insights-backend-module-jsonfc/src/service/JsonRulesEngineFactChecker.test.ts @@ -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'], diff --git a/plugins/tech-insights-backend-module-jsonfc/src/service/JsonRulesEngineFactChecker.ts b/plugins/tech-insights-backend-module-jsonfc/src/service/JsonRulesEngineFactChecker.ts index 8866b5badb..43a7256008 100644 --- a/plugins/tech-insights-backend-module-jsonfc/src/service/JsonRulesEngineFactChecker.ts +++ b/plugins/tech-insights-backend-module-jsonfc/src/service/JsonRulesEngineFactChecker.ts @@ -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, diff --git a/plugins/tech-insights-backend/src/service/fact/factRetrievers/techdocsFactRetriever.ts b/plugins/tech-insights-backend/src/service/fact/factRetrievers/techdocsFactRetriever.ts index dc14298a55..bd07bb3ecc 100644 --- a/plugins/tech-insights-backend/src/service/fact/factRetrievers/techdocsFactRetriever.ts +++ b/plugins/tech-insights-backend/src/service/fact/factRetrievers/techdocsFactRetriever.ts @@ -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 ({ diff --git a/plugins/tech-insights-common/api-report.md b/plugins/tech-insights-common/api-report.md index 0236c0619a..5b8280fd07 100644 --- a/plugins/tech-insights-common/api-report.md +++ b/plugins/tech-insights-common/api-report.md @@ -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) diff --git a/plugins/tech-insights-common/src/index.ts b/plugins/tech-insights-common/src/index.ts index 66af5c2f93..ac5d3de675 100644 --- a/plugins/tech-insights-common/src/index.ts +++ b/plugins/tech-insights-common/src/index.ts @@ -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 */ diff --git a/plugins/tech-insights/README.md b/plugins/tech-insights/README.md index 6c13622e1f..034d1c74a6 100644 --- a/plugins/tech-insights/README.md +++ b/plugins/tech-insights/README.md @@ -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 + 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) => ( + {checkResult.result} + ), +}; +``` diff --git a/plugins/tech-insights/api-report.md b/plugins/tech-insights/api-report.md index 4f2687fa48..3271a12047 100644 --- a/plugins/tech-insights/api-report.md +++ b/plugins/tech-insights/api-report.md @@ -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; // (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; // (undocumented) - getScorecardsDefinition( - type: string, - value: CheckResult[], - title?: string, - description?: string, - ): CheckResultRenderer | undefined; + getCheckResultRenderers(types: string[]): CheckResultRenderer[]; // (undocumented) runBulkChecks( entities: CompoundEntityRef[], diff --git a/plugins/tech-insights/dev/index.tsx b/plugins/tech-insights/dev/index.tsx index 17b1fca00e..46337cf5fe 100644 --- a/plugins/tech-insights/dev/index.tsx +++ b/plugins/tech-insights/dev/index.tsx @@ -23,7 +23,7 @@ import { createDevApp() .registerPlugin(techInsightsPlugin) .addPage({ - element: , + element: , title: 'Root Page', path: '/tech-insight-scorecard', }) diff --git a/plugins/tech-insights/src/api/TechInsightsApi.ts b/plugins/tech-insights/src/api/TechInsightsApi.ts index a24bf74a01..8ab1090304 100644 --- a/plugins/tech-insights/src/api/TechInsightsApi.ts +++ b/plugins/tech-insights/src/api/TechInsightsApi.ts @@ -38,12 +38,7 @@ export const techInsightsApiRef = createApiRef({ * @public */ export interface TechInsightsApi { - getScorecardsDefinition: ( - type: string, - value: CheckResult[], - title?: string, - description?: string, - ) => CheckResultRenderer | undefined; + getCheckResultRenderers: (types: string[]) => CheckResultRenderer[]; getAllChecks(): Promise; runChecks( entityParams: CompoundEntityRef, diff --git a/plugins/tech-insights/src/api/TechInsightsClient.ts b/plugins/tech-insights/src/api/TechInsightsClient.ts index aabb5a6297..708026f63d 100644 --- a/plugins/tech-insights/src/api/TechInsightsClient.ts +++ b/plugins/tech-insights/src/api/TechInsightsClient.ts @@ -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 { diff --git a/plugins/tech-insights/src/components/BooleanCheck/BooleanCheck.tsx b/plugins/tech-insights/src/components/BooleanCheck/BooleanCheck.tsx index a37a5ee0b4..ca010dd95e 100644 --- a/plugins/tech-insights/src/components/BooleanCheck/BooleanCheck.tsx +++ b/plugins/tech-insights/src/components/BooleanCheck/BooleanCheck.tsx @@ -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 ( - - {checkResult.map((check, index) => ( - - - {check.result ? ( - - ) : ( - - )} - - ))} - + return !!checkResult.result ? ( + + ) : ( + ); }; diff --git a/plugins/tech-insights/src/components/CheckResultRenderer.tsx b/plugins/tech-insights/src/components/CheckResultRenderer.tsx index f2a31c5ed6..10bfe4829d 100644 --- a/plugins/tech-insights/src/components/CheckResultRenderer.tsx +++ b/plugins/tech-insights/src/components/CheckResultRenderer.tsx @@ -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: , - }, - ]; -} +/** + * Default renderer for boolean check results. + * + * @public + */ +export const booleanCheckResultRenderer: CheckResultRenderer = { + type: BOOLEAN_CHECK_RESPONSE_TYPE, + component: (checkResult: CheckResult) => ( + + ), +}; diff --git a/plugins/tech-insights/src/components/ScorecardsCard/ScorecardsCard.tsx b/plugins/tech-insights/src/components/ScorecardsCard/ScorecardsCard.tsx index 57b8915b58..87559c5d65 100644 --- a/plugins/tech-insights/src/components/ScorecardsCard/ScorecardsCard.tsx +++ b/plugins/tech-insights/src/components/ScorecardsCard/ScorecardsCard.tsx @@ -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: { ); }; diff --git a/plugins/tech-insights/src/components/ScorecardsContent/ScorecardContent.tsx b/plugins/tech-insights/src/components/ScorecardsContent/ScorecardContent.tsx index c3d02c938f..876150be08 100644 --- a/plugins/tech-insights/src/components/ScorecardsContent/ScorecardContent.tsx +++ b/plugins/tech-insights/src/components/ScorecardsContent/ScorecardContent.tsx @@ -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: { diff --git a/plugins/tech-insights/src/components/ScorecardsInfo/ScorecardInfo.tsx b/plugins/tech-insights/src/components/ScorecardsInfo/ScorecardInfo.tsx index 9d5fc5ac9e..bb4af84be8 100644 --- a/plugins/tech-insights/src/components/ScorecardsInfo/ScorecardInfo.tsx +++ b/plugins/tech-insights/src/components/ScorecardsInfo/ScorecardInfo.tsx @@ -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 = ( ) => ( - - {description} - + {description && ( + + {description} + + )} {element} @@ -48,16 +55,10 @@ const infoCard = ( ); -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, + , ); - - if (checkRenderType) { - return infoCard( - checkRenderType.title, - checkRenderType.description, - classes.subheader, - checkRenderType.component, - ); - } - - return <>; }; diff --git a/plugins/tech-insights/src/components/ScorecardsList/ScorecardsList.tsx b/plugins/tech-insights/src/components/ScorecardsList/ScorecardsList.tsx new file mode 100644 index 0000000000..12bcdd1f2a --- /dev/null +++ b/plugins/tech-insights/src/components/ScorecardsList/ScorecardsList.tsx @@ -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 ( + + {checkResults.map((result, index) => ( + + + {checkResultRenderers + .find(({ type }) => type === result.check.type) + ?.component(result) ?? ( + Unknown type. + )} + + ))} + + ); +}; diff --git a/plugins/tech-insights/src/components/ScorecardsList/index.ts b/plugins/tech-insights/src/components/ScorecardsList/index.ts new file mode 100644 index 0000000000..cc4ad3557b --- /dev/null +++ b/plugins/tech-insights/src/components/ScorecardsList/index.ts @@ -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'; diff --git a/plugins/tech-insights/src/index.ts b/plugins/tech-insights/src/index.ts index 97bdc95631..0b334643c8 100644 --- a/plugins/tech-insights/src/index.ts +++ b/plugins/tech-insights/src/index.ts @@ -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'; From 120df8426a829f74493ea0b691160d28bbdbde36 Mon Sep 17 00:00:00 2001 From: kielosz Date: Wed, 17 Aug 2022 14:50:00 +0200 Subject: [PATCH 2/4] Change fact retriever cadence Signed-off-by: kielosz --- packages/backend/src/plugins/techInsights.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/backend/src/plugins/techInsights.ts b/packages/backend/src/plugins/techInsights.ts index 5e7df66cc1..8575a46480 100644 --- a/packages/backend/src/plugins/techInsights.ts +++ b/packages/backend/src/plugins/techInsights.ts @@ -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: '* * * * *', // Example cron, every minute. + cadence: '1 1 1 * *', factRetriever: entityMetadataFactRetriever, }), createFactRetrieverRegistration({ - cadence: '* * * * *', // Example cron, every minute. + cadence: '1 1 1 * *', factRetriever: techdocsFactRetriever, }), ], From 12c6a07c2a231f3969326f06e9812aa5e33a8dbe Mon Sep 17 00:00:00 2001 From: kielosz Date: Wed, 17 Aug 2022 16:07:03 +0200 Subject: [PATCH 3/4] Multiple changesets Signed-off-by: kielosz --- .changeset/hip-ways-wash.md | 5 +++++ .changeset/kind-birds-sneeze.md | 5 +++++ .changeset/loud-comics-search.md | 4 ---- .changeset/small-walls-promise.md | 5 +++++ 4 files changed, 15 insertions(+), 4 deletions(-) create mode 100644 .changeset/hip-ways-wash.md create mode 100644 .changeset/kind-birds-sneeze.md create mode 100644 .changeset/small-walls-promise.md diff --git a/.changeset/hip-ways-wash.md b/.changeset/hip-ways-wash.md new file mode 100644 index 0000000000..0d53f3e5b1 --- /dev/null +++ b/.changeset/hip-ways-wash.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-tech-insights-backend-module-jsonfc': minor +--- + +**BREAKING** The `JsonRulesEngineFactChecker` class now returns checks results with the `type` value equals to `BOOLEAN_CHECK_RESPONSE_TYPE`. diff --git a/.changeset/kind-birds-sneeze.md b/.changeset/kind-birds-sneeze.md new file mode 100644 index 0000000000..284c3dde74 --- /dev/null +++ b/.changeset/kind-birds-sneeze.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-tech-insights-common': patch +--- + +Added generic exported `BOOLEAN_CHECK_RESPONSE_TYPE` const for boolean check results. diff --git a/.changeset/loud-comics-search.md b/.changeset/loud-comics-search.md index 2d8c15ce9d..ded9fe0680 100644 --- a/.changeset/loud-comics-search.md +++ b/.changeset/loud-comics-search.md @@ -1,8 +1,5 @@ --- '@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. @@ -12,7 +9,6 @@ Added the possibility to display check results of different types on a single sc - 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. diff --git a/.changeset/small-walls-promise.md b/.changeset/small-walls-promise.md new file mode 100644 index 0000000000..0455b0d776 --- /dev/null +++ b/.changeset/small-walls-promise.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-tech-insights-backend': patch +--- + +Changed the description of the `techdocsAnnotationFactName` fact. From beb15973cc15d942bbb8ee23d461e4a6358a3633 Mon Sep 17 00:00:00 2001 From: kielosz Date: Thu, 18 Aug 2022 15:32:11 +0200 Subject: [PATCH 4/4] Revert adding BOOLEAN_CHECK_RESPONSE_TYPE Signed-off-by: kielosz --- .changeset/hip-ways-wash.md | 5 ---- .changeset/kind-birds-sneeze.md | 5 ---- .changeset/loud-comics-search.md | 3 ++- .../JsonRulesEngineFactChecker.test.ts | 9 ++++---- .../src/service/JsonRulesEngineFactChecker.ts | 7 ++---- plugins/tech-insights-common/api-report.md | 3 --- plugins/tech-insights-common/src/index.ts | 16 ++++--------- plugins/tech-insights/README.md | 14 +++++------ plugins/tech-insights/api-report.md | 23 +++++++++---------- .../src/api/TechInsightsClient.ts | 4 ++-- .../components/BooleanCheck/BooleanCheck.tsx | 9 ++++---- .../src/components/CheckResultRenderer.tsx | 13 ++++------- .../ScorecardsCard/ScorecardsCard.tsx | 6 +---- .../ScorecardsContent/ScorecardContent.tsx | 6 +---- .../ScorecardsInfo/ScorecardInfo.tsx | 15 ++++++------ .../ScorecardsList/ScorecardsList.tsx | 7 ++---- plugins/tech-insights/src/index.ts | 3 ++- 17 files changed, 55 insertions(+), 93 deletions(-) delete mode 100644 .changeset/hip-ways-wash.md delete mode 100644 .changeset/kind-birds-sneeze.md diff --git a/.changeset/hip-ways-wash.md b/.changeset/hip-ways-wash.md deleted file mode 100644 index 0d53f3e5b1..0000000000 --- a/.changeset/hip-ways-wash.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@backstage/plugin-tech-insights-backend-module-jsonfc': minor ---- - -**BREAKING** The `JsonRulesEngineFactChecker` class now returns checks results with the `type` value equals to `BOOLEAN_CHECK_RESPONSE_TYPE`. diff --git a/.changeset/kind-birds-sneeze.md b/.changeset/kind-birds-sneeze.md deleted file mode 100644 index 284c3dde74..0000000000 --- a/.changeset/kind-birds-sneeze.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@backstage/plugin-tech-insights-common': patch ---- - -Added generic exported `BOOLEAN_CHECK_RESPONSE_TYPE` const for boolean check results. diff --git a/.changeset/loud-comics-search.md b/.changeset/loud-comics-search.md index ded9fe0680..27f5b3c5d9 100644 --- a/.changeset/loud-comics-search.md +++ b/.changeset/loud-comics-search.md @@ -8,7 +8,8 @@ Added the possibility to display check results of different types on a single sc - **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. +- The `jsonRulesEngineCheckResultRenderer` used to render `json-rules-engine` check results is exported. +- The `BooleanCheck` component that can be used to render other check results types is also exported. 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. diff --git a/plugins/tech-insights-backend-module-jsonfc/src/service/JsonRulesEngineFactChecker.test.ts b/plugins/tech-insights-backend-module-jsonfc/src/service/JsonRulesEngineFactChecker.test.ts index 62c7c8bc61..c808713c3b 100644 --- a/plugins/tech-insights-backend-module-jsonfc/src/service/JsonRulesEngineFactChecker.test.ts +++ b/plugins/tech-insights-backend-module-jsonfc/src/service/JsonRulesEngineFactChecker.test.ts @@ -14,7 +14,6 @@ * limitations under the License. */ -import { BOOLEAN_CHECK_RESPONSE_TYPE } from '@backstage/plugin-tech-insights-common'; import { TechInsightCheckRegistry, TechInsightsStore, @@ -260,7 +259,7 @@ describe('JsonRulesEngineFactChecker', () => { result: true, check: { id: 'simpleTestCheck', - type: BOOLEAN_CHECK_RESPONSE_TYPE, + type: JSON_RULE_ENGINE_CHECK_TYPE, name: 'simpleTestCheck', description: 'Simple Check For Testing', factIds: ['test-factretriever'], @@ -296,7 +295,7 @@ describe('JsonRulesEngineFactChecker', () => { result: false, check: { id: 'customOperatorTestCheck', - type: BOOLEAN_CHECK_RESPONSE_TYPE, + type: JSON_RULE_ENGINE_CHECK_TYPE, name: 'customOperatorTestCheck', description: 'Check For Testing using Custom Operator', factIds: ['test-factretriever'], @@ -335,7 +334,7 @@ describe('JsonRulesEngineFactChecker', () => { result: true, check: { id: 'simpleTestCheck', - type: BOOLEAN_CHECK_RESPONSE_TYPE, + type: JSON_RULE_ENGINE_CHECK_TYPE, name: 'simpleTestCheck', description: 'Simple Check For Testing', factIds: ['test-factretriever'], @@ -366,7 +365,7 @@ describe('JsonRulesEngineFactChecker', () => { result: true, check: { id: 'simpleTestCheck2', - type: BOOLEAN_CHECK_RESPONSE_TYPE, + type: JSON_RULE_ENGINE_CHECK_TYPE, name: 'simpleTestCheck2', description: 'Second Simple Check For Testing', factIds: ['test-factretriever'], diff --git a/plugins/tech-insights-backend-module-jsonfc/src/service/JsonRulesEngineFactChecker.ts b/plugins/tech-insights-backend-module-jsonfc/src/service/JsonRulesEngineFactChecker.ts index 43a7256008..8866b5badb 100644 --- a/plugins/tech-insights-backend-module-jsonfc/src/service/JsonRulesEngineFactChecker.ts +++ b/plugins/tech-insights-backend-module-jsonfc/src/service/JsonRulesEngineFactChecker.ts @@ -22,10 +22,7 @@ import { TechInsightsStore, CheckValidationResponse, } from '@backstage/plugin-tech-insights-node'; -import { - BOOLEAN_CHECK_RESPONSE_TYPE, - FactResponse, -} from '@backstage/plugin-tech-insights-common'; +import { FactResponse } from '@backstage/plugin-tech-insights-common'; import { Engine, EngineResult, @@ -275,7 +272,7 @@ export class JsonRulesEngineFactChecker ) { const returnable = { id: techInsightCheck.id, - type: BOOLEAN_CHECK_RESPONSE_TYPE, + type: techInsightCheck.type, name: techInsightCheck.name, description: techInsightCheck.description, factIds: techInsightCheck.factIds, diff --git a/plugins/tech-insights-common/api-report.md b/plugins/tech-insights-common/api-report.md index 5b8280fd07..0236c0619a 100644 --- a/plugins/tech-insights-common/api-report.md +++ b/plugins/tech-insights-common/api-report.md @@ -6,9 +6,6 @@ import { DateTime } from 'luxon'; import { JsonValue } from '@backstage/types'; -// @public -export const BOOLEAN_CHECK_RESPONSE_TYPE = 'boolean'; - // @public export interface BooleanCheckResult extends CheckResult { // (undocumented) diff --git a/plugins/tech-insights-common/src/index.ts b/plugins/tech-insights-common/src/index.ts index ac5d3de675..66af5c2f93 100644 --- a/plugins/tech-insights-common/src/index.ts +++ b/plugins/tech-insights-common/src/index.ts @@ -28,8 +28,9 @@ export interface CheckResponse { */ id: string; /** - * Type identifier for the check response. - * Used in frontend to render correct component. + * 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: string; /** @@ -105,7 +106,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 parsable by the frontend to display scorecards + * A collection of these should be parseable by the frontend to display scorecards * * @public */ @@ -115,13 +116,6 @@ export type CheckResult = { result: JsonValue; }; -/** - * CheckResponse Boolean type identifier. - * - * @public - */ -export const BOOLEAN_CHECK_RESPONSE_TYPE = 'boolean'; - /** * CheckResult of type Boolean. * @@ -132,7 +126,7 @@ export interface BooleanCheckResult extends CheckResult { } /** - * Response type for bulk check operation. Contains a list of entities and their respective check results. + * Response type for bulk check opretation. Contains a list of entities and their respective check results. * * @public */ diff --git a/plugins/tech-insights/README.md b/plugins/tech-insights/README.md index 034d1c74a6..98d4777ba2 100644 --- a/plugins/tech-insights/README.md +++ b/plugins/tech-insights/README.md @@ -93,7 +93,7 @@ If you follow the [Backend Example](https://github.com/backstage/backstage/tree/ ## 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. +Default scorecard implementation displays only `json-rules-engine` 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 @@ -108,8 +108,8 @@ export const apis: AnyApiFactory[] = [ discoveryApi, identityApi, renderers: [ - booleanCheckResultRenderer, // default boolean renderer - myCustomNumberRenderer, // custom renderer + jsonRulesEngineCheckResultRenderer, // default json-rules-engine renderer + myCustomBooleanRenderer, // custom renderer ], }), }), @@ -118,12 +118,12 @@ export const apis: AnyApiFactory[] = [ ``` ```tsx -// packages/app/src/components/myCustomNumberRenderer.tsx +// packages/app/src/components/myCustomBooleanRenderer.tsx -export const myCustomNumberRenderer: CheckResultRenderer = { - type: 'number', +export const myCustomBooleanRenderer: CheckResultRenderer = { + type: 'boolean', component: (checkResult: CheckResult) => ( - {checkResult.result} + ), }; ``` diff --git a/plugins/tech-insights/api-report.md b/plugins/tech-insights/api-report.md index 3271a12047..03155a5958 100644 --- a/plugins/tech-insights/api-report.md +++ b/plugins/tech-insights/api-report.md @@ -15,8 +15,12 @@ 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 (undocumented) +export const BooleanCheck: ({ + checkResult, +}: { + checkResult: CheckResult; +}) => JSX.Element; // @public export type Check = { @@ -34,27 +38,22 @@ export type CheckResultRenderer = { }; // @public (undocumented) -export const EntityTechInsightsScorecardCard: ({ - title, - description, - checksId, -}: { +export const EntityTechInsightsScorecardCard: (props: { title: string; description?: string | undefined; checksId?: string[] | undefined; }) => JSX.Element; // @public (undocumented) -export const EntityTechInsightsScorecardContent: ({ - title, - description, - checksId, -}: { +export const EntityTechInsightsScorecardContent: (props: { title: string; description?: string | undefined; checksId?: string[] | undefined; }) => JSX.Element; +// @public +export const jsonRulesEngineCheckResultRenderer: CheckResultRenderer; + // @public export interface TechInsightsApi { // (undocumented) diff --git a/plugins/tech-insights/src/api/TechInsightsClient.ts b/plugins/tech-insights/src/api/TechInsightsClient.ts index 708026f63d..8db5de3945 100644 --- a/plugins/tech-insights/src/api/TechInsightsClient.ts +++ b/plugins/tech-insights/src/api/TechInsightsClient.ts @@ -26,7 +26,7 @@ import { CompoundEntityRef } from '@backstage/catalog-model'; import { CheckResultRenderer, - booleanCheckResultRenderer, + jsonRulesEngineCheckResultRenderer, } from '../components/CheckResultRenderer'; /** @public */ @@ -46,7 +46,7 @@ export class TechInsightsClient implements TechInsightsApi { } getCheckResultRenderers(types: string[]): CheckResultRenderer[] { - const renderers = this.renderers ?? [booleanCheckResultRenderer]; + const renderers = this.renderers ?? [jsonRulesEngineCheckResultRenderer]; return renderers.filter(d => types.includes(d.type)); } diff --git a/plugins/tech-insights/src/components/BooleanCheck/BooleanCheck.tsx b/plugins/tech-insights/src/components/BooleanCheck/BooleanCheck.tsx index ca010dd95e..47359a952e 100644 --- a/plugins/tech-insights/src/components/BooleanCheck/BooleanCheck.tsx +++ b/plugins/tech-insights/src/components/BooleanCheck/BooleanCheck.tsx @@ -19,11 +19,10 @@ import CheckCircleOutline from '@material-ui/icons/CheckCircleOutline'; import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline'; import { CheckResult } from '@backstage/plugin-tech-insights-common'; -type Prop = { - checkResult: CheckResult; -}; - -export const BooleanCheck = ({ checkResult }: Prop) => { +/** + * @public + */ +export const BooleanCheck = ({ checkResult }: { checkResult: CheckResult }) => { return !!checkResult.result ? ( ) : ( diff --git a/plugins/tech-insights/src/components/CheckResultRenderer.tsx b/plugins/tech-insights/src/components/CheckResultRenderer.tsx index 10bfe4829d..452715ddeb 100644 --- a/plugins/tech-insights/src/components/CheckResultRenderer.tsx +++ b/plugins/tech-insights/src/components/CheckResultRenderer.tsx @@ -1,5 +1,5 @@ /* - * Copyright 2020 The Backstage Authors + * Copyright 2022 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. @@ -14,10 +14,7 @@ * limitations under the License. */ -import { - BOOLEAN_CHECK_RESPONSE_TYPE, - CheckResult, -} from '@backstage/plugin-tech-insights-common'; +import { CheckResult } from '@backstage/plugin-tech-insights-common'; import React from 'react'; import { BooleanCheck } from './BooleanCheck'; @@ -32,12 +29,12 @@ export type CheckResultRenderer = { }; /** - * Default renderer for boolean check results. + * Default renderer for json-rules-engine check results. * * @public */ -export const booleanCheckResultRenderer: CheckResultRenderer = { - type: BOOLEAN_CHECK_RESPONSE_TYPE, +export const jsonRulesEngineCheckResultRenderer: CheckResultRenderer = { + type: 'json-rules-engine', component: (checkResult: CheckResult) => ( ), diff --git a/plugins/tech-insights/src/components/ScorecardsCard/ScorecardsCard.tsx b/plugins/tech-insights/src/components/ScorecardsCard/ScorecardsCard.tsx index 87559c5d65..a76234d0c5 100644 --- a/plugins/tech-insights/src/components/ScorecardsCard/ScorecardsCard.tsx +++ b/plugins/tech-insights/src/components/ScorecardsCard/ScorecardsCard.tsx @@ -23,11 +23,7 @@ import { ScorecardInfo } from '../ScorecardsInfo'; import Alert from '@material-ui/lab/Alert'; import { techInsightsApiRef } from '../../api/TechInsightsApi'; -export const ScorecardsCard = ({ - title, - description, - checksId, -}: { +export const ScorecardsCard = (props: { title: string; description?: string; checksId?: string[]; diff --git a/plugins/tech-insights/src/components/ScorecardsContent/ScorecardContent.tsx b/plugins/tech-insights/src/components/ScorecardsContent/ScorecardContent.tsx index 876150be08..1ca4e25447 100644 --- a/plugins/tech-insights/src/components/ScorecardsContent/ScorecardContent.tsx +++ b/plugins/tech-insights/src/components/ScorecardsContent/ScorecardContent.tsx @@ -31,11 +31,7 @@ const useStyles = makeStyles(() => ({ }, })); -export const ScorecardsContent = ({ - title, - description, - checksId, -}: { +export const ScorecardsContent = (props: { title: string; description?: string; checksId?: string[]; diff --git a/plugins/tech-insights/src/components/ScorecardsInfo/ScorecardInfo.tsx b/plugins/tech-insights/src/components/ScorecardsInfo/ScorecardInfo.tsx index bb4af84be8..8002784c9e 100644 --- a/plugins/tech-insights/src/components/ScorecardsInfo/ScorecardInfo.tsx +++ b/plugins/tech-insights/src/components/ScorecardsInfo/ScorecardInfo.tsx @@ -29,14 +29,8 @@ const useStyles = makeStyles((theme: BackstageTheme) => ({ }, })); -type Checks = { - checkResults: CheckResult[]; - title: string; - description?: string; -}; - const infoCard = ( - title: string | undefined, + title: string, description: string | undefined, className: string, element: JSX.Element, @@ -55,7 +49,12 @@ const infoCard = ( ); -export const ScorecardInfo = ({ checkResults, title, description }: Checks) => { +export const ScorecardInfo = (props: { + checkResults: CheckResult[]; + title: string; + description?: string; +}) => { + const { checkResults, title, description } = props; const classes = useStyles(); if (!checkResults.length) { diff --git a/plugins/tech-insights/src/components/ScorecardsList/ScorecardsList.tsx b/plugins/tech-insights/src/components/ScorecardsList/ScorecardsList.tsx index 12bcdd1f2a..03dfa06abf 100644 --- a/plugins/tech-insights/src/components/ScorecardsList/ScorecardsList.tsx +++ b/plugins/tech-insights/src/components/ScorecardsList/ScorecardsList.tsx @@ -28,11 +28,8 @@ const useStyles = makeStyles((theme: BackstageTheme) => ({ }, })); -type Prop = { - checkResults: CheckResult[]; -}; - -export const ScorecardsList = ({ checkResults }: Prop) => { +export const ScorecardsList = (props: { checkResults: CheckResult[] }) => { + const { checkResults } = props; const classes = useStyles(); const api = useApi(techInsightsApiRef); diff --git a/plugins/tech-insights/src/index.ts b/plugins/tech-insights/src/index.ts index 0b334643c8..f3dd05c3aa 100644 --- a/plugins/tech-insights/src/index.ts +++ b/plugins/tech-insights/src/index.ts @@ -21,5 +21,6 @@ export { export { techInsightsApiRef, TechInsightsClient } from './api'; export type { TechInsightsApi, Check } from './api'; -export { booleanCheckResultRenderer } from './components/CheckResultRenderer'; +export { BooleanCheck } from './components/BooleanCheck'; +export { jsonRulesEngineCheckResultRenderer } from './components/CheckResultRenderer'; export type { CheckResultRenderer } from './components/CheckResultRenderer';