Skip to content

Commit 9807798

Browse files
EswaraiahsapramEswaraiahsapram
authored
fix(scorecard): integrate UI with backend (#1392)
* fix(scorecard): integrate UI with backend * fix(scorecard): integrate UI with backend * Handle error status in metric by returning null * addressed review comments * addressed review comments * removed unused libraries * fix prettier * api report * removed border radius * noscorecard aligned center * noscorecard aligned center * addressed review comments * fixed css issues * fixed css issues * fix css issues * fix lockfile
1 parent e3dbca2 commit 9807798

30 files changed

Lines changed: 1538 additions & 1311 deletions

‎workspaces/scorecard/app-config.yaml‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,12 +76,33 @@ catalog:
7676
entityFilename: catalog-info.yaml
7777
pullRequestBranchName: backstage-integration
7878
rules:
79-
- allow: [Component, System, API, Resource, Location]
79+
- allow: [Component, System, Group, Resource, Location, Template, API]
8080
locations:
8181
# Local example data, file locations are relative to the backend process, typically `packages/backend`
8282
- type: file
8383
target: ../../examples/entities.yaml
8484

85+
# Local example scorecards
86+
- type: file
87+
target: ../../examples/github-scorecard-only.yaml
88+
rules:
89+
- allow: [Component]
90+
91+
- type: file
92+
target: ../../examples/jira-scorecard-only.yaml
93+
rules:
94+
- allow: [Component]
95+
96+
- type: file
97+
target: ../../examples/all-scorecards.yaml
98+
rules:
99+
- allow: [Component]
100+
101+
- type: file
102+
target: ../../examples/no-scorecards.yaml
103+
rules:
104+
- allow: [Component]
105+
85106
# Local example template
86107
- type: file
87108
target: ../../examples/template/template.yaml

‎workspaces/scorecard/examples/all-scorecards.yaml‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
# Component with both GitHub and Jira Scorecards
3+
apiVersion: backstage.io/v1alpha1
4+
kind: Component
5+
metadata:
6+
name: all-scorecards-service
7+
annotations:
8+
github.com/project-slug: redhat-developer/rhdh-plugins
9+
backstage.io/source-location: url:https://github.com/redhat-developer/rhdh-plugins
10+
jira/project-key: RHDHBUGS
11+
spec:
12+
type: service
13+
owner: janus-authors
14+
lifecycle: production

‎workspaces/scorecard/examples/github-scorecard-only.yaml‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
---
2+
# Component with GitHub Scorecard only
3+
apiVersion: backstage.io/v1alpha1
4+
kind: Component
5+
metadata:
6+
name: github-scorecard-only-service
7+
annotations:
8+
github.com/project-slug: redhat-developer/rhdh-plugins
9+
backstage.io/source-location: url:https://github.com/redhat-developer/rhdh-plugins
10+
spec:
11+
type: service
12+
owner: janus-authors
13+
lifecycle: production

‎workspaces/scorecard/examples/jira-scorecard-only.yaml‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
# Component with Jira Scorecard only
3+
apiVersion: backstage.io/v1alpha1
4+
kind: Component
5+
metadata:
6+
name: jira-scorecard-only-service
7+
annotations:
8+
jira/project-key: RHDHBUGS
9+
spec:
10+
type: service
11+
owner: janus-authors
12+
lifecycle: production

‎workspaces/scorecard/examples/no-scorecards.yaml‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
# Component with no Scorecards
3+
apiVersion: backstage.io/v1alpha1
4+
kind: Component
5+
metadata:
6+
name: no-scorecards-service
7+
spec:
8+
type: service
9+
owner: janus-authors
10+
lifecycle: production

‎workspaces/scorecard/packages/app/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@
4848
"@material-ui/core": "^4.12.2",
4949
"@material-ui/icons": "^4.9.1",
5050
"@red-hat-developer-hub/backstage-plugin-scorecard": "workspace:^",
51+
"@red-hat-developer-hub/backstage-plugin-theme": "^0.9.1",
5152
"react": "^18.0.2",
5253
"react-dom": "^18.0.2",
5354
"react-router": "^6.3.0",

‎workspaces/scorecard/packages/app/src/App.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,11 +51,12 @@ import { AppRouter, FlatRoutes } from '@backstage/core-app-api';
5151
import { CatalogGraphPage } from '@backstage/plugin-catalog-graph';
5252
import { RequirePermission } from '@backstage/plugin-permission-react';
5353
import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common/alpha';
54-
import { ScorecardPage } from '@red-hat-developer-hub/backstage-plugin-scorecard';
5554
import { githubAuthApiRef } from '@backstage/core-plugin-api';
55+
import { getThemes } from '@red-hat-developer-hub/backstage-plugin-theme';
5656

5757
const app = createApp({
5858
apis,
59+
themes: getThemes(),
5960
bindRoutes({ bind }) {
6061
bind(catalogPlugin.externalRoutes, {
6162
createComponent: scaffolderPlugin.routes.root,
@@ -127,7 +128,6 @@ const routes = (
127128
</Route>
128129
<Route path="/settings" element={<UserSettingsPage />} />
129130
<Route path="/catalog-graph" element={<CatalogGraphPage />} />
130-
<Route path="/scorecard" element={<ScorecardPage />} />
131131
</FlatRoutes>
132132
);
133133

‎workspaces/scorecard/packages/app/src/components/catalog/EntityPage.tsx‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,13 @@ import {
7272
EntityKubernetesContent,
7373
isKubernetesAvailable,
7474
} from '@backstage/plugin-kubernetes';
75-
import { ScorecardPage } from '@red-hat-developer-hub/backstage-plugin-scorecard';
75+
import { EntityScorecardContent } from '@red-hat-developer-hub/backstage-plugin-scorecard';
76+
77+
const scorecardRoute = (
78+
<EntityLayout.Route path="/scorecard" title="Scorecard">
79+
<EntityScorecardContent />
80+
</EntityLayout.Route>
81+
);
7682

7783
const techdocsContent = (
7884
<EntityTechdocsContent>
@@ -202,9 +208,8 @@ const serviceEntityPage = (
202208
<EntityLayout.Route path="/docs" title="Docs">
203209
{techdocsContent}
204210
</EntityLayout.Route>
205-
<EntityLayout.Route path="/scorecard" title="Scorecard">
206-
<ScorecardPage />
207-
</EntityLayout.Route>
211+
212+
{scorecardRoute}
208213
</EntityLayout>
209214
);
210215

@@ -240,6 +245,8 @@ const websiteEntityPage = (
240245
<EntityLayout.Route path="/docs" title="Docs">
241246
{techdocsContent}
242247
</EntityLayout.Route>
248+
249+
{scorecardRoute}
243250
</EntityLayout>
244251
);
245252

@@ -259,6 +266,8 @@ const defaultEntityPage = (
259266
<EntityLayout.Route path="/docs" title="Docs">
260267
{techdocsContent}
261268
</EntityLayout.Route>
269+
270+
{scorecardRoute}
262271
</EntityLayout>
263272
);
264273

‎workspaces/scorecard/plugins/scorecard/README.md‎

Lines changed: 70 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
1-
# scorecard
1+
# 📊 Scorecard Plugin for Backstage
22

3-
Welcome to the scorecard plugin!
4-
5-
_This plugin was created through the Backstage CLI_
3+
The Scorecard plugin provides a configurable framework to visualize Key Performance Indicators (KPIs) in Backstage. This frontend plugin integrates with the Scorecard backend to deliver Scorecards.
64

75
## Getting started
86

@@ -11,3 +9,71 @@ Your plugin has been added to the example app in this repository, meaning you'll
119
You can also serve the plugin in isolation by running `yarn start` in the plugin directory.
1210
This method of serving the plugin provides quicker iteration speed and a faster startup and hot reloads.
1311
It is only meant for local development, and the setup for it can be found inside the [/dev](./dev) directory.
12+
13+
## For Administrators
14+
15+
### Prerequisites
16+
17+
Before installing the frontend plugin, ensure that the Scorecard backend is integrated into your Backstage instance. Follow the [Scorecard backend plugin README](https://github.com/redhat-developer/rhdh-plugins/blob/main/workspaces/scorecard/plugins/scorecard-backend/README.md) for setup instructions.
18+
19+
### Installation
20+
21+
To install the Scorecard plugin, run the following command:
22+
23+
```sh
24+
yarn workspace app add @red-hat-developer-hub/backstage-plugin-scorecard
25+
```
26+
27+
### Configuration
28+
29+
1. Add the Scorecard page to you Entity overview page by modifying `packages/app/src/components/catalog/EntityPage.tsx`:
30+
31+
```tsx
32+
import { ScorecardPage } from '@red-hat-developer-hub/backstage-plugin-scorecard';
33+
34+
const scorecardRoute = (
35+
<EntityLayout.Route path="/scorecard" title="Scorecard">
36+
<ScorecardPage />
37+
</EntityLayout.Route>
38+
);
39+
40+
const serviceEntityPage = (
41+
<EntityLayout>
42+
...
43+
{scorecardRoute}
44+
</EntityLayout>
45+
);
46+
47+
const websiteEntityPage = (
48+
<EntityLayout>
49+
...
50+
{scorecardRoute}
51+
</EntityLayout>
52+
);
53+
54+
const componentPage = (
55+
<EntitySwitch>
56+
<EntitySwitch.Case if={isComponentType('service')}>
57+
{serviceEntityPage}
58+
</EntitySwitch.Case>
59+
60+
<EntitySwitch.Case if={isComponentType('website')}>
61+
{websiteEntityPage}
62+
</EntitySwitch.Case>
63+
</EntitySwitch>
64+
);
65+
66+
export const entityPage = (
67+
<EntitySwitch>
68+
...
69+
<EntitySwitch.Case if={isKind('component')} children={componentPage} />
70+
...
71+
</EntitySwitch>
72+
);
73+
```
74+
75+
### Accessing the Plugin
76+
77+
1. Open your Backstage application.
78+
2. Navigate to the Entity overview page from catalog.
79+
3. Explore and analyze scorecard metrics using the scorecards tab.

‎workspaces/scorecard/plugins/scorecard/dev/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,12 @@
1414
* limitations under the License.
1515
*/
1616
import { createDevApp } from '@backstage/dev-utils';
17-
import { scorecardPlugin, ScorecardPage } from '../src/plugin';
17+
import { scorecardPlugin, EntityScorecardContent } from '../src/plugin';
1818

1919
createDevApp()
2020
.registerPlugin(scorecardPlugin)
2121
.addPage({
22-
element: <ScorecardPage />,
22+
element: <EntityScorecardContent />,
2323
title: 'Root Page',
2424
path: '/scorecard',
2525
})

0 commit comments

Comments
 (0)