@backstage-community/plugin-tech-insights 0.3.27

package/README.md

@@ -0,0 +1,152 @@
+# Tech Insights
+
+This plugin provides the UI for the `@backstage/tech-insights-backend` plugin, in order to display results of the checks running following the rules and the logic defined in the `@backstage/tech-insights-backend` plugin itself.
+
+Main areas covered by this plugin currently are:
+
+- Providing an overview for default boolean checks in a form of Scorecards.
+
+- Providing an option to render different custom components based on type of the checks running in the backend.
+
+## Installation
+
+### Install the plugin
+
+```bash
+# From your Backstage root directory
+yarn --cwd packages/app add @backstage-community/plugin-tech-insights
+```
+
+### Add boolean checks overview (Scorecards) page to the EntityPage:
+
+```tsx
+// packages/app/src/components/catalog/EntityPage.tsx
+
+import { EntityTechInsightsScorecardContent } from '@backstage-community/plugin-tech-insights';
+
+const serviceEntityPage = (
+  <EntityLayoutWrapper>
+    <EntityLayout.Route path="/" title="Overview">
+      {overviewContent}
+    </EntityLayout.Route>
+    <EntityLayout.Route path="/ci-cd" title="CI/CD">
+      {cicdContent}
+    </EntityLayout.Route>
+    ...
+    <EntityLayout.Route path="/tech-insights" title="Scorecards">
+      <EntityTechInsightsScorecardContent
+        title="Customized title for the scorecard"
+        description="Small description about scorecards"
+      />
+    </EntityLayout.Route>
+    ...
+  </EntityLayoutWrapper>
+);
+```
+
+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.
+
+```tsx
+<EntityTechInsightsScorecardContent
+  title="Show only simpleTestCheck in this card"
+  checksId={['simpleTestCheck']}
+/>
+```
+
+If you want to show checks in the overview of an entity use `EntityTechInsightsScorecardCard`.
+
+```tsx
+// packages/app/src/components/catalog/EntityPage.tsx
+
+import { EntityTechInsightsScorecardCard } from '@backstage-community/plugin-tech-insights';
+
+const overviewContent = (
+  <Grid container spacing={3} alignItems="stretch">
+    {entityWarningContent}
+    <Grid item md={6} xs={12}>
+      <EntityAboutCard variant="gridItem" />
+    </Grid>
+    <Grid item md={6} xs={12}>
+      <EntityCatalogGraphCard variant="gridItem" height={400} />
+    </Grid>
+    ...
+    <Grid item md={8} xs={12}>
+      <EntityTechInsightsScorecardCard
+        title="Customized title for the scorecard"
+        description="Small description about scorecards"
+        checksId={['simpleTestCheck']}
+      />
+    </Grid>
+  </Grid>
+);
+```
+
+## 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 default boolean scorecard will look like this:
+
+![Boolean Scorecard Example](./docs/boolean-scorecard-example.png)
+
+## Adding custom rendering components
+
+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
+
+export const apis: AnyApiFactory[] = [
+...
+  createApiFactory({
+    api: techInsightsApiRef,
+    deps: { discoveryApi: discoveryApiRef, identityApi: identityApiRef },
+    factory: ({ discoveryApi, identityApi }) =>
+      new TechInsightsClient({
+        discoveryApi,
+        identityApi,
+        renderers: [
+          jsonRulesEngineCheckResultRenderer, // default json-rules-engine renderer
+          myCustomBooleanRenderer, // custom renderer
+        ],
+      }),
+  }),
+...
+];
+```
+
+```tsx
+// packages/app/src/components/myCustomBooleanRenderer.tsx
+
+export const myCustomBooleanRenderer: CheckResultRenderer = {
+  type: 'boolean',
+  component: (checkResult: CheckResult) => (
+    <BooleanCheck checkResult={checkResult} />
+  ),
+};
+```
+
+It's also possible to customize the description. Both strings and React components are accepted. As an example, you would like
+to display another information if the check has failed. In such cases, you could do something like the following:
+
+```tsx
+// packages/app/src/components/myCustomBooleanRenderer.tsx
+
+export const myCustomBooleanRenderer: CheckResultRenderer = {
+  type: 'boolean',
+  component: (checkResult: CheckResult) => (
+    <BooleanCheck checkResult={checkResult} />
+  ),
+  description: (checkResult: CheckResult) => (
+    <>
+      {
+        checkResult.result
+          ? checkResult.check.description // In case of success, return the same description
+          : `The check has failed! ${checkResult.check.description}` // Add a prefix text if the check failed
+      }
+    </>
+  ),
+};
+```

package/dist/esm/ScorecardInfo-DRy_gP7g.esm.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
+import { InfoCard } from '@backstage/core-components';
+import Alert from '@material-ui/lab/Alert';
+import { S as ScorecardsList } from './ScorecardsList-mU3LQTf9.esm.js';
+
+const useStyles = makeStyles((theme) => ({
+  subheader: {
+    fontWeight: "bold",
+    paddingLeft: theme.spacing(0.5)
+  }
+}));
+const infoCard = (title, description, className, element) => /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(InfoCard, { title }, description && /* @__PURE__ */ React.createElement(Typography, { className, variant: "body1", gutterBottom: true }, description), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, element)));
+const ScorecardInfo = (props) => {
+  const { checkResults, title, description, noWarning } = props;
+  const classes = useStyles();
+  if (!checkResults.length) {
+    if (noWarning) {
+      return infoCard(
+        title,
+        description,
+        classes.subheader,
+        /* @__PURE__ */ React.createElement(Alert, { severity: "info" }, "All checks passed, or no checks have been performed yet")
+      );
+    }
+    return infoCard(
+      title,
+      description,
+      classes.subheader,
+      /* @__PURE__ */ React.createElement(Alert, { severity: "warning" }, "No checks have any data yet.")
+    );
+  }
+  return infoCard(
+    title,
+    description,
+    classes.subheader,
+    /* @__PURE__ */ React.createElement(ScorecardsList, { checkResults })
+  );
+};
+
+export { ScorecardInfo as S };
+//# sourceMappingURL=ScorecardInfo-DRy_gP7g.esm.js.map

package/dist/esm/ScorecardInfo-DRy_gP7g.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScorecardInfo-DRy_gP7g.esm.js","sources":["../../src/components/ScorecardsInfo/ScorecardInfo.tsx"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport Grid from '@material-ui/core/Grid';\nimport Typography from '@material-ui/core/Typography';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { InfoCard } from '@backstage/core-components';\nimport { CheckResult } from '@backstage-community/plugin-tech-insights-common';\nimport Alert from '@material-ui/lab/Alert';\nimport { ScorecardsList } from '../ScorecardsList';\n\nconst useStyles = makeStyles(theme => ({\n  subheader: {\n    fontWeight: 'bold',\n    paddingLeft: theme.spacing(0.5),\n  },\n}));\n\nconst infoCard = (\n  title: string,\n  description: string | undefined,\n  className: string,\n  element: JSX.Element,\n) => (\n  <Grid item xs={12}>\n    <InfoCard title={title}>\n      {description && (\n        <Typography className={className} variant=\"body1\" gutterBottom>\n          {description}\n        </Typography>\n      )}\n      <Grid item xs={12}>\n        {element}\n      </Grid>\n    </InfoCard>\n  </Grid>\n);\n\nexport const ScorecardInfo = (props: {\n  checkResults: CheckResult[];\n  title: string;\n  description?: string;\n  noWarning?: boolean;\n}) => {\n  const { checkResults, title, description, noWarning } = props;\n  const classes = useStyles();\n\n  if (!checkResults.length) {\n    if (noWarning) {\n      return infoCard(\n        title,\n        description,\n        classes.subheader,\n        <Alert severity=\"info\">\n          All checks passed, or no checks have been performed yet\n        </Alert>,\n      );\n    }\n    return infoCard(\n      title,\n      description,\n      classes.subheader,\n      <Alert severity=\"warning\">No checks have any data yet.</Alert>,\n    );\n  }\n\n  return infoCard(\n    title,\n    description,\n    classes.subheader,\n    <ScorecardsList checkResults={checkResults} />,\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAyBA,MAAM,SAAA,GAAY,WAAW,CAAU,KAAA,MAAA;AAAA,EACrC,SAAW,EAAA;AAAA,IACT,UAAY,EAAA,MAAA;AAAA,IACZ,WAAA,EAAa,KAAM,CAAA,OAAA,CAAQ,GAAG,CAAA;AAAA,GAChC;AACF,CAAE,CAAA,CAAA,CAAA;AAEF,MAAM,QAAW,GAAA,CACf,KACA,EAAA,WAAA,EACA,WACA,OAEA,qBAAA,KAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAI,IAAC,EAAA,EAAA,EAAI,EACb,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,YAAS,KACP,EAAA,EAAA,WAAA,oBACE,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,SAAsB,EAAA,OAAA,EAAQ,OAAQ,EAAA,YAAA,EAAY,QAC3D,WACH,CAAA,kBAED,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,MAAI,IAAC,EAAA,EAAA,EAAI,EACZ,EAAA,EAAA,OACH,CACF,CACF,CAAA,CAAA;AAGW,MAAA,aAAA,GAAgB,CAAC,KAKxB,KAAA;AACJ,EAAA,MAAM,EAAE,YAAA,EAAc,KAAO,EAAA,WAAA,EAAa,WAAc,GAAA,KAAA,CAAA;AACxD,EAAA,MAAM,UAAU,SAAU,EAAA,CAAA;AAE1B,EAAI,IAAA,CAAC,aAAa,MAAQ,EAAA;AACxB,IAAA,IAAI,SAAW,EAAA;AACb,MAAO,OAAA,QAAA;AAAA,QACL,KAAA;AAAA,QACA,WAAA;AAAA,QACA,OAAQ,CAAA,SAAA;AAAA,wBACP,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAM,QAAS,EAAA,MAAA,EAAA,EAAO,yDAEvB,CAAA;AAAA,OACF,CAAA;AAAA,KACF;AACA,IAAO,OAAA,QAAA;AAAA,MACL,KAAA;AAAA,MACA,WAAA;AAAA,MACA,OAAQ,CAAA,SAAA;AAAA,sBACP,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAM,QAAS,EAAA,SAAA,EAAA,EAAU,8BAA4B,CAAA;AAAA,KACxD,CAAA;AAAA,GACF;AAEA,EAAO,OAAA,QAAA;AAAA,IACL,KAAA;AAAA,IACA,WAAA;AAAA,IACA,OAAQ,CAAA,SAAA;AAAA,oBACR,KAAA,CAAA,aAAA,CAAC,kBAAe,YAA4B,EAAA,CAAA;AAAA,GAC9C,CAAA;AACF;;;;"}

package/dist/esm/ScorecardsList-mU3LQTf9.esm.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { useApi } from '@backstage/core-plugin-api';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import { makeStyles } from '@material-ui/core/styles';
+import { techInsightsApiRef } from '../index.esm.js';
+import '@backstage/errors';
+import '@backstage/catalog-model';
+import '@material-ui/icons/CheckCircleOutline';
+import '@material-ui/icons/ErrorOutline';
+import 'qs';
+import Alert from '@material-ui/lab/Alert';
+import { MarkdownContent } from '@backstage/core-components';
+
+const useStyles = makeStyles((theme) => ({
+  listItemText: {
+    paddingRight: theme.spacing(0.5)
+  }
+}));
+const ScorecardsList = (props) => {
+  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 /* @__PURE__ */ React.createElement(List, null, checkResults.map((result, index) => {
+    var _a, _b, _c;
+    const description = (_a = checkResultRenderers.find(
+      (renderer) => renderer.type === result.check.type
+    )) == null ? void 0 : _a.description;
+    return /* @__PURE__ */ React.createElement(ListItem, { key: result.check.id }, /* @__PURE__ */ React.createElement(
+      ListItemText,
+      {
+        key: index,
+        primary: result.check.name,
+        secondary: description ? description(result) : /* @__PURE__ */ React.createElement(MarkdownContent, { content: result.check.description }),
+        className: classes.listItemText
+      }
+    ), (_c = (_b = checkResultRenderers.find(({ type }) => type === result.check.type)) == null ? void 0 : _b.component(result)) != null ? _c : /* @__PURE__ */ React.createElement(Alert, { severity: "error" }, "Unknown type."));
+  }));
+};
+
+export { ScorecardsList as S };
+//# sourceMappingURL=ScorecardsList-mU3LQTf9.esm.js.map

package/dist/esm/ScorecardsList-mU3LQTf9.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScorecardsList-mU3LQTf9.esm.js","sources":["../../src/components/ScorecardsList/ScorecardsList.tsx"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport { useApi } from '@backstage/core-plugin-api';\nimport List from '@material-ui/core/List';\nimport ListItem from '@material-ui/core/ListItem';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { techInsightsApiRef } from '../../api';\nimport { CheckResult } from '@backstage-community/plugin-tech-insights-common';\nimport Alert from '@material-ui/lab/Alert';\nimport { MarkdownContent } from '@backstage/core-components';\n\nconst useStyles = makeStyles(theme => ({\n  listItemText: {\n    paddingRight: theme.spacing(0.5),\n  },\n}));\n\nexport const ScorecardsList = (props: { checkResults: CheckResult[] }) => {\n  const { checkResults } = props;\n  const classes = useStyles();\n  const api = useApi(techInsightsApiRef);\n\n  const types = [...new Set(checkResults.map(({ check }) => check.type))];\n  const checkResultRenderers = api.getCheckResultRenderers(types);\n\n  return (\n    <List>\n      {checkResults.map((result, index) => {\n        const description = checkResultRenderers.find(\n          renderer => renderer.type === result.check.type,\n        )?.description;\n\n        return (\n          <ListItem key={result.check.id}>\n            <ListItemText\n              key={index}\n              primary={result.check.name}\n              secondary={\n                description ? (\n                  description(result)\n                ) : (\n                  <MarkdownContent content={result.check.description} />\n                )\n              }\n              className={classes.listItemText}\n            />\n            {checkResultRenderers\n              .find(({ type }) => type === result.check.type)\n              ?.component(result) ?? (\n              <Alert severity=\"error\">Unknown type.</Alert>\n            )}\n          </ListItem>\n        );\n      })}\n    </List>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AA2BA,MAAM,SAAA,GAAY,WAAW,CAAU,KAAA,MAAA;AAAA,EACrC,YAAc,EAAA;AAAA,IACZ,YAAA,EAAc,KAAM,CAAA,OAAA,CAAQ,GAAG,CAAA;AAAA,GACjC;AACF,CAAE,CAAA,CAAA,CAAA;AAEW,MAAA,cAAA,GAAiB,CAAC,KAA2C,KAAA;AACxE,EAAM,MAAA,EAAE,cAAiB,GAAA,KAAA,CAAA;AACzB,EAAA,MAAM,UAAU,SAAU,EAAA,CAAA;AAC1B,EAAM,MAAA,GAAA,GAAM,OAAO,kBAAkB,CAAA,CAAA;AAErC,EAAA,MAAM,KAAQ,GAAA,CAAC,GAAG,IAAI,IAAI,YAAa,CAAA,GAAA,CAAI,CAAC,EAAE,KAAM,EAAA,KAAM,KAAM,CAAA,IAAI,CAAC,CAAC,CAAA,CAAA;AACtE,EAAM,MAAA,oBAAA,GAAuB,GAAI,CAAA,uBAAA,CAAwB,KAAK,CAAA,CAAA;AAE9D,EAAA,2CACG,IACE,EAAA,IAAA,EAAA,YAAA,CAAa,GAAI,CAAA,CAAC,QAAQ,KAAU,KAAA;AA3C3C,IAAA,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA,CAAA;AA4CQ,IAAA,MAAM,eAAc,EAAqB,GAAA,oBAAA,CAAA,IAAA;AAAA,MACvC,CAAY,QAAA,KAAA,QAAA,CAAS,IAAS,KAAA,MAAA,CAAO,KAAM,CAAA,IAAA;AAAA,UADzB,IAEjB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,WAAA,CAAA;AAEH,IAAA,uBACG,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAS,GAAK,EAAA,MAAA,CAAO,MAAM,EAC1B,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,GAAK,EAAA,KAAA;AAAA,QACL,OAAA,EAAS,OAAO,KAAM,CAAA,IAAA;AAAA,QACtB,SAAA,EACE,WACE,GAAA,WAAA,CAAY,MAAM,CAAA,uCAEjB,eAAgB,EAAA,EAAA,OAAA,EAAS,MAAO,CAAA,KAAA,CAAM,WAAa,EAAA,CAAA;AAAA,QAGxD,WAAW,OAAQ,CAAA,YAAA;AAAA,OAAA;AAAA,KACrB,EAAA,CACC,gCACE,IAAK,CAAA,CAAC,EAAE,IAAK,EAAA,KAAM,SAAS,MAAO,CAAA,KAAA,CAAM,IAAI,CAD/C,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAEG,UAAU,MAFb,CAAA,KAAA,IAAA,GAAA,EAAA,uCAGE,KAAM,EAAA,EAAA,QAAA,EAAS,OAAQ,EAAA,EAAA,eAAa,CAEzC,CAAA,CAAA;AAAA,GAEH,CACH,CAAA,CAAA;AAEJ;;;;"}

package/dist/esm/index-B0n7xKVB.esm.js

@@ -0,0 +1,19 @@
+export { S as ScorecardInfo } from './ScorecardInfo-DRy_gP7g.esm.js';
+import 'react';
+import '@material-ui/core/Grid';
+import '@material-ui/core/Typography';
+import '@material-ui/core/styles';
+import '@backstage/core-components';
+import '@material-ui/lab/Alert';
+import './ScorecardsList-mU3LQTf9.esm.js';
+import '@backstage/core-plugin-api';
+import '@material-ui/core/List';
+import '@material-ui/core/ListItem';
+import '@material-ui/core/ListItemText';
+import '../index.esm.js';
+import '@backstage/errors';
+import '@backstage/catalog-model';
+import '@material-ui/icons/CheckCircleOutline';
+import '@material-ui/icons/ErrorOutline';
+import 'qs';
+//# sourceMappingURL=index-B0n7xKVB.esm.js.map

package/dist/esm/index-B0n7xKVB.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-B0n7xKVB.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}

package/dist/esm/index-B5eokOBn.esm.js

@@ -0,0 +1,16 @@
+export { S as ScorecardsList } from './ScorecardsList-mU3LQTf9.esm.js';
+import 'react';
+import '@backstage/core-plugin-api';
+import '@material-ui/core/List';
+import '@material-ui/core/ListItem';
+import '@material-ui/core/ListItemText';
+import '@material-ui/core/styles';
+import '../index.esm.js';
+import '@backstage/errors';
+import '@backstage/catalog-model';
+import '@material-ui/icons/CheckCircleOutline';
+import '@material-ui/icons/ErrorOutline';
+import 'qs';
+import '@material-ui/lab/Alert';
+import '@backstage/core-components';
+//# sourceMappingURL=index-B5eokOBn.esm.js.map

package/dist/esm/index-B5eokOBn.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-B5eokOBn.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}

package/dist/esm/index-DYpZtEuv.esm.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import useAsync from 'react-use/esm/useAsync';
+import { Progress, Page, Content } from '@backstage/core-components';
+import { useApi } from '@backstage/core-plugin-api';
+import { S as ScorecardInfo } from './ScorecardInfo-DRy_gP7g.esm.js';
+import Alert from '@material-ui/lab/Alert';
+import { techInsightsApiRef } from '../index.esm.js';
+import { makeStyles } from '@material-ui/core/styles';
+import { useEntity } from '@backstage/plugin-catalog-react';
+import { getCompoundEntityRef } from '@backstage/catalog-model';
+import '@material-ui/core/Grid';
+import '@material-ui/core/Typography';
+import './ScorecardsList-mU3LQTf9.esm.js';
+import '@material-ui/core/List';
+import '@material-ui/core/ListItem';
+import '@material-ui/core/ListItemText';
+import '@backstage/errors';
+import '@material-ui/icons/CheckCircleOutline';
+import '@material-ui/icons/ErrorOutline';
+import 'qs';
+
+const useStyles = makeStyles(() => ({
+  contentScorecards: {
+    paddingLeft: 0,
+    paddingRight: 0
+  }
+}));
+const ScorecardsContent = (props) => {
+  const { title, description, checksId } = props;
+  const classes = useStyles();
+  const api = useApi(techInsightsApiRef);
+  const { namespace, kind, name } = getCompoundEntityRef(useEntity().entity);
+  const { value, loading, error } = useAsync(
+    async () => await api.runChecks({ namespace, kind, name }, checksId)
+  );
+  if (loading) {
+    return /* @__PURE__ */ React.createElement(Progress, null);
+  } else if (error) {
+    return /* @__PURE__ */ React.createElement(Alert, { severity: "error" }, error.message);
+  }
+  return /* @__PURE__ */ React.createElement(Page, { themeId: "home" }, /* @__PURE__ */ React.createElement(Content, { className: classes.contentScorecards }, /* @__PURE__ */ React.createElement(
+    ScorecardInfo,
+    {
+      title,
+      description,
+      checkResults: value || []
+    }
+  )));
+};
+
+export { ScorecardsContent };
+//# sourceMappingURL=index-DYpZtEuv.esm.js.map

package/dist/esm/index-DYpZtEuv.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-DYpZtEuv.esm.js","sources":["../../src/components/ScorecardsContent/ScorecardContent.tsx"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport useAsync from 'react-use/esm/useAsync';\nimport { Content, Page, Progress } from '@backstage/core-components';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { ScorecardInfo } from '../ScorecardsInfo';\nimport Alert from '@material-ui/lab/Alert';\nimport { techInsightsApiRef } from '../../api/TechInsightsApi';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { useEntity } from '@backstage/plugin-catalog-react';\nimport { getCompoundEntityRef } from '@backstage/catalog-model';\n\nconst useStyles = makeStyles(() => ({\n  contentScorecards: {\n    paddingLeft: 0,\n    paddingRight: 0,\n  },\n}));\n\nexport const ScorecardsContent = (props: {\n  title: string;\n  description?: string;\n  checksId?: string[];\n}) => {\n  const { title, description, checksId } = props;\n  const classes = useStyles();\n  const api = useApi(techInsightsApiRef);\n  const { namespace, kind, name } = getCompoundEntityRef(useEntity().entity);\n  const { value, loading, error } = useAsync(\n    async () => await api.runChecks({ namespace, kind, name }, checksId),\n  );\n\n  if (loading) {\n    return <Progress />;\n  } else if (error) {\n    return <Alert severity=\"error\">{error.message}</Alert>;\n  }\n\n  return (\n    <Page themeId=\"home\">\n      <Content className={classes.contentScorecards}>\n        <ScorecardInfo\n          title={title}\n          description={description}\n          checkResults={value || []}\n        />\n      </Content>\n    </Page>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AA2BA,MAAM,SAAA,GAAY,WAAW,OAAO;AAAA,EAClC,iBAAmB,EAAA;AAAA,IACjB,WAAa,EAAA,CAAA;AAAA,IACb,YAAc,EAAA,CAAA;AAAA,GAChB;AACF,CAAE,CAAA,CAAA,CAAA;AAEW,MAAA,iBAAA,GAAoB,CAAC,KAI5B,KAAA;AACJ,EAAA,MAAM,EAAE,KAAA,EAAO,WAAa,EAAA,QAAA,EAAa,GAAA,KAAA,CAAA;AACzC,EAAA,MAAM,UAAU,SAAU,EAAA,CAAA;AAC1B,EAAM,MAAA,GAAA,GAAM,OAAO,kBAAkB,CAAA,CAAA;AACrC,EAAM,MAAA,EAAE,WAAW,IAAM,EAAA,IAAA,KAAS,oBAAqB,CAAA,SAAA,GAAY,MAAM,CAAA,CAAA;AACzE,EAAA,MAAM,EAAE,KAAA,EAAO,OAAS,EAAA,KAAA,EAAU,GAAA,QAAA;AAAA,IAChC,YAAY,MAAM,GAAI,CAAA,SAAA,CAAU,EAAE,SAAW,EAAA,IAAA,EAAM,IAAK,EAAA,EAAG,QAAQ,CAAA;AAAA,GACrE,CAAA;AAEA,EAAA,IAAI,OAAS,EAAA;AACX,IAAA,2CAAQ,QAAS,EAAA,IAAA,CAAA,CAAA;AAAA,aACR,KAAO,EAAA;AAChB,IAAA,uBAAQ,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAM,QAAS,EAAA,OAAA,EAAA,EAAS,MAAM,OAAQ,CAAA,CAAA;AAAA,GAChD;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,QAAK,OAAQ,EAAA,MAAA,EAAA,sCACX,OAAQ,EAAA,EAAA,SAAA,EAAW,QAAQ,iBAC1B,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,WAAA;AAAA,MACA,YAAA,EAAc,SAAS,EAAC;AAAA,KAAA;AAAA,GAE5B,CACF,CAAA,CAAA;AAEJ;;;;"}

package/dist/esm/index-Dk00aaon.esm.js

@@ -0,0 +1,62 @@
+import React, { useMemo } from 'react';
+import useAsync from 'react-use/esm/useAsync';
+import { Progress, ErrorPanel } from '@backstage/core-components';
+import { useApi } from '@backstage/core-plugin-api';
+import { S as ScorecardInfo } from './ScorecardInfo-DRy_gP7g.esm.js';
+import { techInsightsApiRef } from '../index.esm.js';
+import { useEntity } from '@backstage/plugin-catalog-react';
+import { getCompoundEntityRef } from '@backstage/catalog-model';
+import '@material-ui/core/Grid';
+import '@material-ui/core/Typography';
+import '@material-ui/core/styles';
+import '@material-ui/lab/Alert';
+import './ScorecardsList-mU3LQTf9.esm.js';
+import '@material-ui/core/List';
+import '@material-ui/core/ListItem';
+import '@material-ui/core/ListItemText';
+import '@backstage/errors';
+import '@material-ui/icons/CheckCircleOutline';
+import '@material-ui/icons/ErrorOutline';
+import 'qs';
+
+const ScorecardsCard = (props) => {
+  const { title, description, checksId, onlyFailed } = props;
+  const api = useApi(techInsightsApiRef);
+  const { entity } = useEntity();
+  const { value, loading, error } = useAsync(
+    async () => await api.runChecks(getCompoundEntityRef(entity), checksId),
+    [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 /* @__PURE__ */ React.createElement(Progress, null);
+  } else if (error) {
+    return /* @__PURE__ */ React.createElement(ErrorPanel, { error });
+  }
+  const filteredValue = !onlyFailed ? value || [] : (value || []).filter(
+    (val) => {
+      var _a, _b;
+      return (_b = (_a = checkResultRenderers[val.check.type]) == null ? void 0 : _a.isFailed) == null ? void 0 : _b.call(_a, val);
+    }
+  );
+  return /* @__PURE__ */ React.createElement(
+    ScorecardInfo,
+    {
+      title,
+      description,
+      checkResults: filteredValue,
+      noWarning: onlyFailed
+    }
+  );
+};
+
+export { ScorecardsCard };
+//# sourceMappingURL=index-Dk00aaon.esm.js.map

package/dist/esm/index-Dk00aaon.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-Dk00aaon.esm.js","sources":["../../src/components/ScorecardsCard/ScorecardsCard.tsx"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { useMemo } from 'react';\nimport useAsync from 'react-use/esm/useAsync';\nimport { ErrorPanel, Progress } from '@backstage/core-components';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { ScorecardInfo } from '../ScorecardsInfo';\nimport { techInsightsApiRef } from '../../api/TechInsightsApi';\nimport { useEntity } from '@backstage/plugin-catalog-react';\nimport { getCompoundEntityRef } from '@backstage/catalog-model';\n\nexport const ScorecardsCard = (props: {\n  title: string;\n  description?: string;\n  checksId?: string[];\n  onlyFailed?: boolean;\n}) => {\n  const { title, description, checksId, onlyFailed } = props;\n  const api = useApi(techInsightsApiRef);\n  const { entity } = useEntity();\n  const { value, loading, error } = useAsync(\n    async () => await api.runChecks(getCompoundEntityRef(entity), checksId),\n    [api, entity, JSON.stringify(checksId)],\n  );\n\n  const checkResultRenderers = useMemo(() => {\n    if (!onlyFailed || !value) return {};\n\n    const types = [...new Set(value.map(({ check }) => check.type))];\n    const renderers = api.getCheckResultRenderers(types);\n    return Object.fromEntries(\n      renderers.map(renderer => [renderer.type, renderer]),\n    );\n  }, [api, value, onlyFailed]);\n\n  if (loading) {\n    return <Progress />;\n  } else if (error) {\n    return <ErrorPanel error={error} />;\n  }\n\n  const filteredValue = !onlyFailed\n    ? value || []\n    : (value || []).filter(val =>\n        checkResultRenderers[val.check.type]?.isFailed?.(val),\n      );\n\n  return (\n    <ScorecardInfo\n      title={title}\n      description={description}\n      checkResults={filteredValue}\n      noWarning={onlyFailed}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAyBa,MAAA,cAAA,GAAiB,CAAC,KAKzB,KAAA;AACJ,EAAA,MAAM,EAAE,KAAA,EAAO,WAAa,EAAA,QAAA,EAAU,YAAe,GAAA,KAAA,CAAA;AACrD,EAAM,MAAA,GAAA,GAAM,OAAO,kBAAkB,CAAA,CAAA;AACrC,EAAM,MAAA,EAAE,MAAO,EAAA,GAAI,SAAU,EAAA,CAAA;AAC7B,EAAA,MAAM,EAAE,KAAA,EAAO,OAAS,EAAA,KAAA,EAAU,GAAA,QAAA;AAAA,IAChC,YAAY,MAAM,GAAA,CAAI,UAAU,oBAAqB,CAAA,MAAM,GAAG,QAAQ,CAAA;AAAA,IACtE,CAAC,GAAK,EAAA,MAAA,EAAQ,IAAK,CAAA,SAAA,CAAU,QAAQ,CAAC,CAAA;AAAA,GACxC,CAAA;AAEA,EAAM,MAAA,oBAAA,GAAuB,QAAQ,MAAM;AACzC,IAAI,IAAA,CAAC,cAAc,CAAC,KAAA;AAAO,MAAA,OAAO,EAAC,CAAA;AAEnC,IAAA,MAAM,KAAQ,GAAA,CAAC,GAAG,IAAI,IAAI,KAAM,CAAA,GAAA,CAAI,CAAC,EAAE,KAAM,EAAA,KAAM,KAAM,CAAA,IAAI,CAAC,CAAC,CAAA,CAAA;AAC/D,IAAM,MAAA,SAAA,GAAY,GAAI,CAAA,uBAAA,CAAwB,KAAK,CAAA,CAAA;AACnD,IAAA,OAAO,MAAO,CAAA,WAAA;AAAA,MACZ,UAAU,GAAI,CAAA,CAAA,QAAA,KAAY,CAAC,QAAS,CAAA,IAAA,EAAM,QAAQ,CAAC,CAAA;AAAA,KACrD,CAAA;AAAA,GACC,EAAA,CAAC,GAAK,EAAA,KAAA,EAAO,UAAU,CAAC,CAAA,CAAA;AAE3B,EAAA,IAAI,OAAS,EAAA;AACX,IAAA,2CAAQ,QAAS,EAAA,IAAA,CAAA,CAAA;AAAA,aACR,KAAO,EAAA;AAChB,IAAO,uBAAA,KAAA,CAAA,aAAA,CAAC,cAAW,KAAc,EAAA,CAAA,CAAA;AAAA,GACnC;AAEA,EAAM,MAAA,aAAA,GAAgB,CAAC,UACnB,GAAA,KAAA,IAAS,EACR,GAAA,CAAA,KAAA,IAAS,EAAI,EAAA,MAAA;AAAA,IAAO,CAAI,GAAA,KAAA;AAzD/B,MAAA,IAAA,EAAA,EAAA,EAAA,CAAA;AA0DQ,MAAA,OAAA,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,oBAAA,CAAqB,IAAI,KAAM,CAAA,IAAI,CAAnC,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAsC,aAAtC,IAAiD,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAA,CAAA,EAAA,EAAA,GAAA,CAAA,CAAA;AAAA,KAAA;AAAA,GACnD,CAAA;AAEJ,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,WAAA;AAAA,MACA,YAAc,EAAA,aAAA;AAAA,MACd,SAAW,EAAA,UAAA;AAAA,KAAA;AAAA,GACb,CAAA;AAEJ;;;;"}

package/dist/index.d.ts

@@ -0,0 +1,170 @@
+/// <reference types="react" />
+import * as react from 'react';
+import react__default from 'react';
+import * as _backstage_community_plugin_tech_insights_common from '@backstage-community/plugin-tech-insights-common';
+import { CheckResult, BulkCheckResponse, FactSchema } from '@backstage-community/plugin-tech-insights-common';
+import * as _backstage_core_plugin_api from '@backstage/core-plugin-api';
+import { DiscoveryApi, IdentityApi } from '@backstage/core-plugin-api';
+import { JsonValue } from '@backstage/types';
+import { CompoundEntityRef } from '@backstage/catalog-model';
+
+/**
+ * @public
+ */
+declare const techInsightsPlugin: _backstage_core_plugin_api.BackstagePlugin<{
+    root: _backstage_core_plugin_api.RouteRef<undefined>;
+}, {}, {}>;
+/**
+ * @public
+ */
+declare const ScorecardInfo: (props: {
+    checkResults: _backstage_community_plugin_tech_insights_common.CheckResult[];
+    title: string;
+    description?: string | undefined;
+    noWarning?: boolean | undefined;
+}) => react.JSX.Element;
+/**
+ * @public
+ */
+declare const ScorecardsList: (props: {
+    checkResults: _backstage_community_plugin_tech_insights_common.CheckResult[];
+}) => react.JSX.Element;
+/**
+ * @public
+ */
+declare const EntityTechInsightsScorecardContent: (props: {
+    title: string;
+    description?: string | undefined;
+    checksId?: string[] | undefined;
+}) => react.JSX.Element;
+/**
+ * @public
+ */
+declare const EntityTechInsightsScorecardCard: (props: {
+    title: string;
+    description?: string | undefined;
+    checksId?: string[] | undefined;
+    onlyFailed?: boolean | undefined;
+}) => react.JSX.Element;
+
+/**
+ * Represents a single check defined on the TechInsights backend.
+ *
+ * @public
+ */
+type Check = {
+    /**
+     * Unique identifier of the check
+     *
+     * Used to identify which checks to use when running checks.
+     */
+    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: string;
+    /**
+     * Human readable name of the check, may be displayed in the UI
+     */
+    name: string;
+    /**
+     * Human readable description of the check, may be displayed in the UI
+     */
+    description: string;
+    /**
+     * A collection of string referencing fact rows that a check will be run against.
+     *
+     * References the fact container, aka fact retriever itself which may or may not contain multiple individual facts and values
+     */
+    factIds: string[];
+    /**
+     * Metadata to be returned in case a check has been successfully evaluated
+     * Can contain links, description texts or other actionable items
+     */
+    successMetadata?: Record<string, unknown>;
+    /**
+     * Metadata to be returned in case a check evaluation has ended in failure
+     * Can contain links, description texts or other actionable items
+     */
+    failureMetadata?: Record<string, unknown>;
+};
+/**
+ * Represents a Fact defined on the TechInsights backend.
+ *
+ * @public
+ */
+interface InsightFacts {
+    [factId: string]: {
+        timestamp: string;
+        version: string;
+        facts: Record<string, JsonValue>;
+    };
+}
+
+/**
+ * Defines a react component that is responsible for rendering a result of a given type.
+ *
+ * @public
+ */
+type CheckResultRenderer = {
+    type: string;
+    component: (check: CheckResult) => react__default.ReactElement;
+    description?: (check: CheckResult) => string | react__default.ReactElement;
+    isFailed?: (check: CheckResult) => boolean;
+};
+/**
+ * Default renderer for json-rules-engine check results.
+ *
+ * @public
+ */
+declare const jsonRulesEngineCheckResultRenderer: CheckResultRenderer;
+
+/**
+ * {@link @backstage/core-plugin-api#ApiRef} for the {@link TechInsightsApi}
+ *
+ * @public
+ */
+declare const techInsightsApiRef: _backstage_core_plugin_api.ApiRef<TechInsightsApi>;
+/**
+ * API client interface for the Tech Insights plugin
+ *
+ * @public
+ */
+interface TechInsightsApi {
+    getCheckResultRenderers: (types: string[]) => CheckResultRenderer[];
+    getAllChecks(): Promise<Check[]>;
+    runChecks(entityParams: CompoundEntityRef, checks?: string[]): Promise<CheckResult[]>;
+    runBulkChecks(entities: CompoundEntityRef[], checks?: Check[]): Promise<BulkCheckResponse>;
+    getFacts(entity: CompoundEntityRef, facts: string[]): Promise<InsightFacts>;
+    getFactSchemas(): Promise<FactSchema[]>;
+}
+
+/** @public */
+declare class TechInsightsClient implements TechInsightsApi {
+    private readonly discoveryApi;
+    private readonly identityApi;
+    private readonly renderers?;
+    constructor(options: {
+        discoveryApi: DiscoveryApi;
+        identityApi: IdentityApi;
+        renderers?: CheckResultRenderer[];
+    });
+    getFacts(entity: CompoundEntityRef, facts: string[]): Promise<InsightFacts>;
+    getCheckResultRenderers(types: string[]): CheckResultRenderer[];
+    getAllChecks(): Promise<Check[]>;
+    getFactSchemas(): Promise<FactSchema[]>;
+    runChecks(entityParams: CompoundEntityRef, checks?: string[]): Promise<CheckResult[]>;
+    runBulkChecks(entities: CompoundEntityRef[], checks?: Check[]): Promise<BulkCheckResponse>;
+    private api;
+}
+
+/**
+ * @public
+ */
+declare const BooleanCheck: (props: {
+    checkResult: CheckResult;
+}) => react__default.JSX.Element;
+
+export { BooleanCheck, type Check, type CheckResultRenderer, EntityTechInsightsScorecardCard, EntityTechInsightsScorecardContent, type InsightFacts, ScorecardInfo, ScorecardsList, type TechInsightsApi, TechInsightsClient, jsonRulesEngineCheckResultRenderer, techInsightsApiRef, techInsightsPlugin };