diff --git a/.changeset/cold-feet-drop.md b/.changeset/cold-feet-drop.md index aff289cadf..3103ae5ea8 100644 --- a/.changeset/cold-feet-drop.md +++ b/.changeset/cold-feet-drop.md @@ -2,4 +2,4 @@ '@backstage/plugin-tech-insights-common': patch --- -Added new property 'result' in CheckResult in @backstage/plugin-tech-insights-common. This property is later used in `@backstage/plugin-scorecards` package. +Added new property 'result' in CheckResult in @backstage/plugin-tech-insights-common. This property is later used in `@backstage/plugin-tech-insights` package. diff --git a/.changeset/stupid-readers-cough.md b/.changeset/stupid-readers-cough.md index ab4ab2388b..b497245b53 100644 --- a/.changeset/stupid-readers-cough.md +++ b/.changeset/stupid-readers-cough.md @@ -1,5 +1,5 @@ --- -'@backstage/plugin-scorecards': patch +'@backstage/plugin-tech-insights': patch --- -New package containing scorecards, appropriate UI components for the Tech Insights plugin. +New package containing UI components for the Tech Insights plugin. diff --git a/packages/app/package.json b/packages/app/package.json index 1882ddc1f1..d0ac17542a 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -44,7 +44,7 @@ "@backstage/plugin-todo": "^0.1.15", "@backstage/plugin-user-settings": "^0.3.11", "@backstage/search-common": "^0.2.0", - "@backstage/plugin-scorecards": "^0.0.0", + "@backstage/plugin-tech-insights": "^0.0.0", "@backstage/theme": "^0.2.11", "@material-ui/core": "^4.12.2", "@material-ui/icons": "^4.9.1", diff --git a/plugins/scorecards/README.md b/plugins/scorecards/README.md deleted file mode 100644 index ddcd6f7bc7..0000000000 --- a/plugins/scorecards/README.md +++ /dev/null @@ -1,42 +0,0 @@ -# Scorecards - -This plugin represents scorecards which are rendered as a part of the default Backstage Tech Insights feature. -It provides UI for the scorecards as well as a check overview. - -## Installation - -### Install the plugin - -```bash -# From your Backstage root directory -cd packages/app -yarn add @backstage/plugin-scorecards -``` - -### Add Scorecards overview page to the EntityPage: - -```tsx -// packages/app/src/components/catalog/EntityPage.tsx - -import { EntityScorecardContent } from '@backstage/plugin-scorecards'; - -const serviceEntityPage = ( - - - {overviewContent} - - - {cicdContent} - - ... - - - - ... - -); -``` - -## Links - -- [The Backstage homepage](https://backstage.io) diff --git a/plugins/scorecards/.eslintrc.js b/plugins/tech-insights/.eslintrc.js similarity index 100% rename from plugins/scorecards/.eslintrc.js rename to plugins/tech-insights/.eslintrc.js diff --git a/plugins/tech-insights/README.md b/plugins/tech-insights/README.md new file mode 100644 index 0000000000..b61cea48ec --- /dev/null +++ b/plugins/tech-insights/README.md @@ -0,0 +1,47 @@ +# 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 +cd packages/app +yarn add @backstage/plugin-tech-insights +``` + +### Add boolean checks overview (Scorecards) page to the EntityPage: + +```tsx +// packages/app/src/components/catalog/EntityPage.tsx + +import { EntityTechInsightsScorecardContent } from '@backstage/plugin-tech-insights'; + +const serviceEntityPage = ( + + + {overviewContent} + + + {cicdContent} + + ... + + + + ... + +); +``` + +## Links + +- [The Backstage homepage](https://backstage.io) diff --git a/plugins/scorecards/dev/index.tsx b/plugins/tech-insights/dev/index.tsx similarity index 77% rename from plugins/scorecards/dev/index.tsx rename to plugins/tech-insights/dev/index.tsx index 559e92b969..17b1fca00e 100644 --- a/plugins/scorecards/dev/index.tsx +++ b/plugins/tech-insights/dev/index.tsx @@ -15,13 +15,16 @@ */ import React from 'react'; import { createDevApp } from '@backstage/dev-utils'; -import { scorecardsPlugin, EntityScorecardContent } from '../src/plugin'; +import { + techInsightsPlugin, + EntityTechInsightsScorecardContent, +} from '../src/plugin'; createDevApp() - .registerPlugin(scorecardsPlugin) + .registerPlugin(techInsightsPlugin) .addPage({ - element: , + element: , title: 'Root Page', - path: '/scorecards', + path: '/tech-insight-scorecard', }) .render(); diff --git a/plugins/scorecards/package.json b/plugins/tech-insights/package.json similarity index 97% rename from plugins/scorecards/package.json rename to plugins/tech-insights/package.json index 5ec6fec342..1c1658b082 100644 --- a/plugins/scorecards/package.json +++ b/plugins/tech-insights/package.json @@ -1,5 +1,5 @@ { - "name": "@backstage/plugin-scorecards", + "name": "@backstage/plugin-tech-insights", "version": "0.0.0", "main": "src/index.ts", "types": "src/index.ts", diff --git a/plugins/scorecards/src/api/ScorecardsApi.ts b/plugins/tech-insights/src/api/TechInsightsApi.ts similarity index 84% rename from plugins/scorecards/src/api/ScorecardsApi.ts rename to plugins/tech-insights/src/api/TechInsightsApi.ts index 3e72975861..2c55930f0a 100644 --- a/plugins/scorecards/src/api/ScorecardsApi.ts +++ b/plugins/tech-insights/src/api/TechInsightsApi.ts @@ -20,12 +20,12 @@ import { Check } from './types'; import { CheckResultRenderer } from '../components/CheckResultRenderer'; import { EntityName } from '@backstage/catalog-model'; -export const scorecardsApiRef = createApiRef({ - id: 'plugin.scorecards.service', - description: 'Used by the scorecards plugin to make requests', +export const techInsightsApiRef = createApiRef({ + id: 'plugin.techinsights.service', + description: 'Used by the tech insights plugin to make requests', }); -export interface ScorecardsApi { +export interface TechInsightsApi { getScorecardsDefinition: ( type: string, value: CheckResult[], diff --git a/plugins/scorecards/src/api/ScorecardsClient.ts b/plugins/tech-insights/src/api/TechInsightsClient.ts similarity index 95% rename from plugins/scorecards/src/api/ScorecardsClient.ts rename to plugins/tech-insights/src/api/TechInsightsClient.ts index 014f3f065d..25002e30a1 100644 --- a/plugins/scorecards/src/api/ScorecardsClient.ts +++ b/plugins/tech-insights/src/api/TechInsightsClient.ts @@ -14,7 +14,7 @@ * limitations under the License. */ -import { ScorecardsApi } from './ScorecardsApi'; +import { TechInsightsApi } from './TechInsightsApi'; import { CheckResult } from '@backstage/plugin-tech-insights-common'; import { Check } from './types'; import { DiscoveryApi } from '@backstage/core-plugin-api'; @@ -30,7 +30,7 @@ export type Options = { discoveryApi: DiscoveryApi; }; -export class ScorecardsClient implements ScorecardsApi { +export class TechInsightsClient implements TechInsightsApi { private readonly discoveryApi: DiscoveryApi; constructor(options: Options) { diff --git a/plugins/scorecards/src/index.ts b/plugins/tech-insights/src/api/index.ts similarity index 89% rename from plugins/scorecards/src/index.ts rename to plugins/tech-insights/src/api/index.ts index cba54febcf..bcd2575a52 100644 --- a/plugins/scorecards/src/index.ts +++ b/plugins/tech-insights/src/api/index.ts @@ -13,4 +13,5 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -export { scorecardsPlugin, EntityScorecardContent } from './plugin'; +export * from './TechInsightsApi'; +export * from './TechInsightsClient'; diff --git a/plugins/scorecards/src/api/types.ts b/plugins/tech-insights/src/api/types.ts similarity index 100% rename from plugins/scorecards/src/api/types.ts rename to plugins/tech-insights/src/api/types.ts diff --git a/plugins/scorecards/src/components/BooleanCheck/BooleanCheck.tsx b/plugins/tech-insights/src/components/BooleanCheck/BooleanCheck.tsx similarity index 96% rename from plugins/scorecards/src/components/BooleanCheck/BooleanCheck.tsx rename to plugins/tech-insights/src/components/BooleanCheck/BooleanCheck.tsx index a10730ce7b..6dba0a56a3 100644 --- a/plugins/scorecards/src/components/BooleanCheck/BooleanCheck.tsx +++ b/plugins/tech-insights/src/components/BooleanCheck/BooleanCheck.tsx @@ -48,9 +48,10 @@ export const BooleanCheck = ({ checkResult }: Prop) => { return ( - {checkResult!.map(check => ( + {checkResult!.map((check, index) => ( , }, ]; diff --git a/plugins/scorecards/src/components/ScorecardsOverview/ChecksOverview.tsx b/plugins/tech-insights/src/components/ScorecardsOverview/ChecksOverview.tsx similarity index 87% rename from plugins/scorecards/src/components/ScorecardsOverview/ChecksOverview.tsx rename to plugins/tech-insights/src/components/ScorecardsOverview/ChecksOverview.tsx index 3c66226da9..10025d1ba6 100644 --- a/plugins/scorecards/src/components/ScorecardsOverview/ChecksOverview.tsx +++ b/plugins/tech-insights/src/components/ScorecardsOverview/ChecksOverview.tsx @@ -19,15 +19,17 @@ import { makeStyles, Grid, Typography } from '@material-ui/core'; import { useApi } from '@backstage/core-plugin-api'; import { Content, Page, InfoCard } from '@backstage/core-components'; import { CheckResult } from '@backstage/plugin-tech-insights-common'; -import { scorecardsApiRef } from '../../api/ScorecardsApi'; +import { techInsightsApiRef } from '../../api/TechInsightsApi'; +import { BackstageTheme } from '@backstage/theme'; -const useStyles = makeStyles(() => ({ +const useStyles = makeStyles((theme: BackstageTheme) => ({ contentScorecards: { paddingLeft: 0, paddingRight: 0, }, subheader: { fontWeight: 'bold', + paddingLeft: theme.spacing(0.5), }, })); @@ -37,7 +39,7 @@ type Checks = { export const ChecksOverview = ({ checks }: Checks) => { const classes = useStyles(); - const api = useApi(scorecardsApiRef); + const api = useApi(techInsightsApiRef); const checkRenderType = api.getScorecardsDefinition( checks[0].check.type, checks, diff --git a/plugins/scorecards/src/components/ScorecardsOverview/ScorecardsOverview.tsx b/plugins/tech-insights/src/components/ScorecardsOverview/ScorecardsOverview.tsx similarity index 92% rename from plugins/scorecards/src/components/ScorecardsOverview/ScorecardsOverview.tsx rename to plugins/tech-insights/src/components/ScorecardsOverview/ScorecardsOverview.tsx index 7bfd57be72..92a57bd643 100644 --- a/plugins/scorecards/src/components/ScorecardsOverview/ScorecardsOverview.tsx +++ b/plugins/tech-insights/src/components/ScorecardsOverview/ScorecardsOverview.tsx @@ -21,10 +21,10 @@ import { Progress } from '@backstage/core-components'; import { useApi } from '@backstage/core-plugin-api'; import { ChecksOverview } from './ChecksOverview'; import Alert from '@material-ui/lab/Alert'; -import { scorecardsApiRef } from '../../api/ScorecardsApi'; +import { techInsightsApiRef } from '../../api/TechInsightsApi'; export const ScorecardsOverview = () => { - const api = useApi(scorecardsApiRef); + const api = useApi(techInsightsApiRef); const { namespace, kind, name } = useParams(); const { value, loading, error } = useAsync( diff --git a/plugins/scorecards/src/components/ScorecardsOverview/index.ts b/plugins/tech-insights/src/components/ScorecardsOverview/index.ts similarity index 100% rename from plugins/scorecards/src/components/ScorecardsOverview/index.ts rename to plugins/tech-insights/src/components/ScorecardsOverview/index.ts diff --git a/plugins/scorecards/src/api/index.ts b/plugins/tech-insights/src/index.ts similarity index 87% rename from plugins/scorecards/src/api/index.ts rename to plugins/tech-insights/src/index.ts index afebc5432f..273c11fd71 100644 --- a/plugins/scorecards/src/api/index.ts +++ b/plugins/tech-insights/src/index.ts @@ -13,5 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -export * from './ScorecardsApi'; -export * from './ScorecardsClient'; +export { + techInsightsPlugin, + EntityTechInsightsScorecardContent, +} from './plugin'; diff --git a/plugins/scorecards/src/plugin.test.ts b/plugins/tech-insights/src/plugin.test.ts similarity index 83% rename from plugins/scorecards/src/plugin.test.ts rename to plugins/tech-insights/src/plugin.test.ts index 537a6399bf..a4a9e6f308 100644 --- a/plugins/scorecards/src/plugin.test.ts +++ b/plugins/tech-insights/src/plugin.test.ts @@ -13,10 +13,10 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { scorecardsPlugin } from './plugin'; +import { techInsightsPlugin } from './plugin'; -describe('scorecards', () => { +describe('tech insights', () => { it('should export plugin', () => { - expect(scorecardsPlugin).toBeDefined(); + expect(techInsightsPlugin).toBeDefined(); }); }); diff --git a/plugins/scorecards/src/plugin.ts b/plugins/tech-insights/src/plugin.ts similarity index 72% rename from plugins/scorecards/src/plugin.ts rename to plugins/tech-insights/src/plugin.ts index 4c39b9768f..f229b654f3 100644 --- a/plugins/scorecards/src/plugin.ts +++ b/plugins/tech-insights/src/plugin.ts @@ -20,19 +20,19 @@ import { discoveryApiRef, } from '@backstage/core-plugin-api'; import { rootRouteRef } from './routes'; -import { scorecardsApiRef } from './api/ScorecardsApi'; -import { ScorecardsClient } from './api'; +import { techInsightsApiRef } from './api/TechInsightsApi'; +import { TechInsightsClient } from './api/TechInsightsClient'; /** * @public */ -export const scorecardsPlugin = createPlugin({ - id: 'scorecards', +export const techInsightsPlugin = createPlugin({ + id: 'tech-insights', apis: [ createApiFactory({ - api: scorecardsApiRef, + api: techInsightsApiRef, deps: { discoveryApi: discoveryApiRef }, - factory: ({ discoveryApi }) => new ScorecardsClient({ discoveryApi }), + factory: ({ discoveryApi }) => new TechInsightsClient({ discoveryApi }), }), ], routes: { @@ -43,9 +43,9 @@ export const scorecardsPlugin = createPlugin({ /** * @public */ -export const EntityScorecardContent = scorecardsPlugin.provide( +export const EntityTechInsightsScorecardContent = techInsightsPlugin.provide( createRoutableExtension({ - name: 'EntityScorecardContent', + name: 'EntityTechInsightsScorecardContent', component: () => import('./components/ScorecardsOverview').then(m => m.ScorecardsOverview), mountPoint: rootRouteRef, diff --git a/plugins/scorecards/src/routes.ts b/plugins/tech-insights/src/routes.ts similarity index 96% rename from plugins/scorecards/src/routes.ts rename to plugins/tech-insights/src/routes.ts index 484a9c7e2b..b1b7900074 100644 --- a/plugins/scorecards/src/routes.ts +++ b/plugins/tech-insights/src/routes.ts @@ -16,5 +16,5 @@ import { createRouteRef } from '@backstage/core-plugin-api'; export const rootRouteRef = createRouteRef({ - id: 'scorecards', + id: 'tech-insights', }); diff --git a/plugins/scorecards/src/setupTests.ts b/plugins/tech-insights/src/setupTests.ts similarity index 100% rename from plugins/scorecards/src/setupTests.ts rename to plugins/tech-insights/src/setupTests.ts