Merge pull request #13093 from kielosz/scorecards

[TechInsights] Use different renderers for each CheckResult in scorecards

plugins/tech-insights/src/api/TechInsightsApi.ts

@@ -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

@@ -26,34 +26,28 @@ import { CompoundEntityRef } from '@backstage/catalog-model';
 
 import {
   CheckResultRenderer,
-  defaultCheckResultRenderers,
+  jsonRulesEngineCheckResultRenderer,
 } 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 ?? [jsonRulesEngineCheckResultRenderer];
+    return renderers.filter(d => types.includes(d.type));
   }
 
   async getAllChecks(): Promise<Check[]> {

plugins/tech-insights/src/components/BooleanCheck/BooleanCheck.tsx

@@ -15,46 +15,17 @@
  */
 
 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[];
-};
-
-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>
+/**
+ * @public
+ */
+export const BooleanCheck = ({ checkResult }: { checkResult: CheckResult }) => {
+  return !!checkResult.result ? (
+    <CheckCircleOutline color="primary" />
+  ) : (
+    <ErrorOutlineIcon color="error" />
   );
 };

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.
@@ -19,30 +19,23 @@ 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 json-rules-engine check results.
+ *
+ * @public
+ */
+export const jsonRulesEngineCheckResultRenderer: CheckResultRenderer = {
+  type: 'json-rules-engine',
+  component: (checkResult: CheckResult) => (
+    <BooleanCheck checkResult={checkResult} />
+  ),
+};

plugins/tech-insights/src/components/ScorecardsCard/ScorecardsCard.tsx

@@ -25,7 +25,7 @@ import { useEntity } from '@backstage/plugin-catalog-react';
 import { getCompoundEntityRef } from '@backstage/catalog-model';
 
 export const ScorecardsCard = (props: {
-  title?: string;
+  title: string;
   description?: string;
   checksId?: string[];
 }) => {
@@ -46,7 +46,7 @@ export const ScorecardsCard = (props: {
     <ScorecardInfo
       title={title}
       description={description}
-      checks={value || []}
+      checkResults={value || []}
     />
   );
 };

plugins/tech-insights/src/components/ScorecardsContent/ScorecardContent.tsx

@@ -33,7 +33,7 @@ const useStyles = makeStyles(() => ({
 }));
 
 export const ScorecardsContent = (props: {
-  title?: string;
+  title: string;
   description?: string;
   checksId?: string[];
 }) => {
@@ -57,7 +57,7 @@ export const ScorecardsContent = (props: {
         <ScorecardInfo
           title={title}
           description={description}
-          checks={value || []}
+          checkResults={value || []}
         />
       </Content>
     </Page>

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: {
@@ -31,16 +30,18 @@ const useStyles = makeStyles((theme: BackstageTheme) => ({
 }));
 
 const infoCard = (
-  title: string | undefined,
+  title: string,
   description: string | undefined,
   className: string,
   element: JSX.Element,
 ) => (
   <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>
@@ -49,15 +50,14 @@ const infoCard = (
 );
 
 export const ScorecardInfo = (props: {
-  checks: CheckResult[];
-  title?: string;
+  checkResults: CheckResult[];
+  title: string;
   description?: string;
 }) => {
-  const { checks, title, description } = props;
+  const { checkResults, title, description } = props;
   const classes = useStyles();
-  const api = useApi(techInsightsApiRef);
 
-  if (!checks.length) {
+  if (!checkResults.length) {
     return infoCard(
       title,
       description,
@@ -66,21 +66,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

@@ -0,0 +1,58 @@
+/*
+ * 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),
+  },
+}));
+
+export const ScorecardsList = (props: { checkResults: CheckResult[] }) => {
+  const { checkResults } = props;
+  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

@@ -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

@@ -21,4 +21,6 @@ export {
 
 export { techInsightsApiRef, TechInsightsClient } from './api';
 export type { TechInsightsApi, Check } from './api';
+export { BooleanCheck } from './components/BooleanCheck';
+export { jsonRulesEngineCheckResultRenderer } from './components/CheckResultRenderer';
 export type { CheckResultRenderer } from './components/CheckResultRenderer';