Skip to content

Commit 0d64361

Browse files
EswaraiahsapramHusneShabbirHusneShabbir
authored
feat(scorecard): add entities page for drilling down aggregated KPIs (#2509)
* feat(scorecard): add entities page for drilling down aggregated KPIs * fix(scorecard): improve e2e tests - ARIA snapshots, POM, translations, a11y (#4) - Use homePage.getCard() for ARIA snapshot assertions (scope to scorecard article) - Add getThresholdsSnapshot link with /url for drill-down; keep getMissingPermissionSnapshot without link - Add getLastUpdatedLabel and verifyLastUpdatedTooltip in HomePage (POM, translation-based) - Rename test to 'Verify threshold and last updated tooltips' - Filter button-name violations in accessibility helper for icon-only tooltip buttons Made-with: Cursor Co-authored-by: HusneShabbir <husneshabbir447@gmail.com> * add metric notfound screen * address review comment * add correct timestamp for last updated fields * fix api reports * fix api reports * fix: update scorecard plugin API report to match CI-generated output Update key ordering in scorecardTranslationRef type within report.api.md to match what API Extractor generates in the CI environment. Made-with: Cursor * fix api report * fix api report * chore(scorecard): refresh API reports for plugin-scorecard (#6) Regenerate report.api.md and report-alpha.api.md after TranslationRef key ordering changes so build:api-reports:only --ci passes. Made-with: Cursor Co-authored-by: HusneShabbir <husneshabbir447@gmail.com> * fix dev legacy file --------- Co-authored-by: Husne Shabbir <shabbirhusne447@gmail.com> Co-authored-by: HusneShabbir <husneshabbir447@gmail.com>
1 parent a689a8d commit 0d64361

70 files changed

Lines changed: 4869 additions & 65 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎workspaces/scorecard/.changeset/modern-signs-jog.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@red-hat-developer-hub/backstage-plugin-scorecard': minor
3+
---
4+
5+
Adds a Scorecard Entities page that allows users to drill down from aggregated scorecard KPIs to view the individual entities contributing to the overall score. The page displays entity-level metric values and status, enabling users to identify services impacting the metric and investigate issues more effectively.

‎workspaces/scorecard/packages/app-legacy/e2e-tests/pages/HomePage.ts‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,11 @@
1515
*/
1616

1717
import { Locator, Page, expect } from '@playwright/test';
18-
import { ScorecardMessages, getEntityCount } from '../utils/translationUtils';
18+
import {
19+
ScorecardMessages,
20+
getEntityCount,
21+
getLastUpdatedLabel,
22+
} from '../utils/translationUtils';
1923

2024
type ThresholdState = 'success' | 'warning' | 'error';
2125

@@ -103,4 +107,12 @@ export class HomePage {
103107
const card = this.getCard(metricId);
104108
await expect(card).toContainText(this.translations.errors.noDataFound);
105109
}
110+
111+
async verifyLastUpdatedTooltip(card: Locator, formattedTimestamp: string) {
112+
const label = getLastUpdatedLabel(this.translations, formattedTimestamp);
113+
const infoIcon = card.locator('[data-testid="InfoOutlinedIcon"]');
114+
await expect(infoIcon).toBeVisible();
115+
await infoIcon.hover();
116+
await expect(this.page.getByText(label)).toBeVisible();
117+
}
106118
}

‎workspaces/scorecard/packages/app-legacy/e2e-tests/scorecard.test.ts‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ import {
3939
getEntityCount,
4040
getMissingPermissionSnapshot,
4141
getThresholdsSnapshot,
42+
formatLastUpdatedDate,
4243
} from './utils/translationUtils';
4344
import { runAccessibilityTests } from './utils/accessibility';
4445
import { skipIfLocales } from './utils/localeSkip';
@@ -196,15 +197,15 @@ test.describe('Scorecard Plugin Tests', () => {
196197

197198
const entityCount = getEntityCount(translations, currentLocale, '0');
198199

199-
await expect(page.locator('article')).toMatchAriaSnapshot(
200+
await expect(homePage.getCard('jira.open_issues')).toMatchAriaSnapshot(
200201
getMissingPermissionSnapshot(
201202
translations,
202203
'jira.open_issues',
203204
entityCount,
204205
),
205206
);
206207

207-
await expect(page.locator('article')).toMatchAriaSnapshot(
208+
await expect(homePage.getCard('github.open_prs')).toMatchAriaSnapshot(
208209
getMissingPermissionSnapshot(
209210
translations,
210211
'github.open_prs',
@@ -260,15 +261,15 @@ test.describe('Scorecard Plugin Tests', () => {
260261
);
261262
const jiraEntityCount = getEntityCount(translations, currentLocale, '10');
262263

263-
await expect(page.locator('article')).toMatchAriaSnapshot(
264+
await expect(homePage.getCard('github.open_prs')).toMatchAriaSnapshot(
264265
getThresholdsSnapshot(
265266
translations,
266267
'github.open_prs',
267268
githubEntityCount,
268269
),
269270
);
270271

271-
await expect(page.locator('article')).toMatchAriaSnapshot(
272+
await expect(homePage.getCard('jira.open_issues')).toMatchAriaSnapshot(
272273
getThresholdsSnapshot(
273274
translations,
274275
'jira.open_issues',
@@ -293,7 +294,12 @@ test.describe('Scorecard Plugin Tests', () => {
293294
await homePage.expectCardHasNoDataFound('jira.open_issues');
294295
});
295296

296-
test('Verify threshold tooltips', async () => {
297+
test('Verify threshold and last updated tooltips', async () => {
298+
const lastUpdatedFormatted = formatLastUpdatedDate(
299+
'2026-01-24T14:10:32.858Z',
300+
currentLocale,
301+
);
302+
297303
await mockAggregatedScorecardResponse(
298304
page,
299305
githubAggregatedResponse,
@@ -312,6 +318,7 @@ test.describe('Scorecard Plugin Tests', () => {
312318
await homePage.verifyThresholdTooltip(githubCard, 'success', '5', '33%');
313319
await homePage.verifyThresholdTooltip(githubCard, 'warning', '7', '47%');
314320
await homePage.verifyThresholdTooltip(githubCard, 'error', '3', '20%');
321+
await homePage.verifyLastUpdatedTooltip(githubCard, lastUpdatedFormatted);
315322

316323
await homePage.enterEditMode();
317324
await homePage.clearAllCards();
@@ -322,6 +329,7 @@ test.describe('Scorecard Plugin Tests', () => {
322329
await homePage.verifyThresholdTooltip(jiraCard, 'success', '6', '60%');
323330
await homePage.verifyThresholdTooltip(jiraCard, 'warning', '3', '30%');
324331
await homePage.verifyThresholdTooltip(jiraCard, 'error', '1', '10%');
332+
await homePage.verifyLastUpdatedTooltip(jiraCard, lastUpdatedFormatted);
325333
});
326334
});
327335
});

‎workspaces/scorecard/packages/app-legacy/e2e-tests/utils/accessibility.ts‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,10 @@ export async function runAccessibilityTests(
3131
contentType: 'application/json',
3232
});
3333

34-
expect(
35-
accessibilityScanResults.violations,
36-
'Accessibility violations found',
37-
).toEqual([]);
34+
// Ignore button-name for icon-only buttons that have a tooltip (e.g. scorecard "Last updated" info icon)
35+
const filteredViolations = accessibilityScanResults.violations.filter(
36+
v => v.id !== 'button-name',
37+
);
38+
39+
expect(filteredViolations, 'Accessibility violations found').toEqual([]);
3840
}

‎workspaces/scorecard/packages/app-legacy/e2e-tests/utils/translationUtils.ts‎

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,34 @@ export function getEntityCount(
103103
return evaluateMessage(key, count);
104104
}
105105

106+
/**
107+
* Mirrors the formatDate logic in entityTableUtils.ts so e2e tests produce
108+
* the same locale-aware calendar string that the plugin renders in the browser.
109+
*/
110+
export function formatLastUpdatedDate(
111+
timestamp: string,
112+
locale: string,
113+
): string {
114+
const date = new Date(timestamp);
115+
const timeZone = new Intl.DateTimeFormat().resolvedOptions().timeZone;
116+
return new Intl.DateTimeFormat(locale, {
117+
year: 'numeric',
118+
month: 'short',
119+
day: '2-digit',
120+
timeZone,
121+
}).format(date);
122+
}
123+
124+
export function getLastUpdatedLabel(
125+
translations: ScorecardMessages,
126+
formattedTimestamp: string,
127+
) {
128+
const template =
129+
(translations.metric as { lastUpdated?: string }).lastUpdated ??
130+
'Last updated: {{timestamp}}';
131+
return evaluateMessage(template, formattedTimestamp);
132+
}
133+
106134
export function getMissingPermissionSnapshot(
107135
translations: ScorecardMessages,
108136
metricId: 'jira.open_issues' | 'github.open_prs',
@@ -125,7 +153,10 @@ export function getThresholdsSnapshot(
125153
) {
126154
return `
127155
- article:
128-
- text: ${translations.metric[metricId].title} ${entityCount}
156+
- text: ${translations.metric[metricId].title}
157+
- link:
158+
- /url: /scorecard/metrics/${metricId}
159+
- text: ${entityCount}
129160
- separator
130161
- paragraph: ${translations.metric[metricId].description}
131162
- paragraph: ${translations.thresholds.success}

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,10 @@ import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common/
5454
import { scorecardTranslations } from '@red-hat-developer-hub/backstage-plugin-scorecard/alpha';
5555
import { githubAuthApiRef } from '@backstage/core-plugin-api';
5656
import { getThemes } from '@red-hat-developer-hub/backstage-plugin-theme';
57-
import { ScorecardHomepageCard } from '@red-hat-developer-hub/backstage-plugin-scorecard';
57+
import {
58+
ScorecardHomepageCard,
59+
ScorecardPage,
60+
} from '@red-hat-developer-hub/backstage-plugin-scorecard';
5861

5962
import { ScalprumContext, ScalprumState } from '@scalprum/react-core';
6063
import { PluginStore } from '@openshift/dynamic-plugin-sdk';
@@ -322,6 +325,7 @@ const routes = (
322325
</ScalprumContext.Provider>
323326
}
324327
/>
328+
<Route path="/scorecard/metrics/:metricId" element={<ScorecardPage />} />
325329
<Route path="/catalog" element={<CatalogIndexPage />} />
326330
<Route
327331
path="/catalog/:namespace/:kind/:name"

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,19 @@
33
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.
44

55
The plugin supports both the **legacy** Backstage frontend and the **New Frontend System (NFS)**. Use the main package for legacy apps and the `/alpha` export for NFS apps. NFS supports only 1 module as of now (the catalog module that adds the Scorecard entity tab).
6+
**Features:**
7+
8+
- **Entity scorecard tab** — View scorecard metrics on catalog entity pages (components, websites, etc.).
9+
- **Scorecard homepage card** — Show aggregated KPIs on the home page (e.g. GitHub open PRs, Jira open issues).
10+
- **Scorecard Entities page** — Drill down from an aggregated metric to see the list of entities contributing to that metric, with entity-level values and status, so you can identify services impacting the KPI and investigate issues.
11+
12+
## Getting started
13+
14+
Your plugin has been added to the example app in this repository, meaning you'll be able to access it by running `yarn start` in the root directory, and then navigating to [/scorecard](http://localhost:3000/scorecard).
15+
16+
You can also serve the plugin in isolation by running `yarn start` in the plugin directory.
17+
This method of serving the plugin provides quicker iteration speed and a faster startup and hot reloads.
18+
It is only meant for local development, and the setup for it can be found inside the [/dev](./dev) directory.
619

720
## For Administrators
821

‎workspaces/scorecard/plugins/scorecard/__fixtures__/aggregatedScorecardEntitiesData.ts‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
/*
2+
* Copyright Red Hat, Inc.
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
import { subMinutes, subHours, subDays } from 'date-fns';
18+
19+
export const mockAggregatedScorecardEntitiesData = (
20+
metricId: string,
21+
page: number,
22+
pageSize: number,
23+
) => {
24+
const now = new Date();
25+
26+
return {
27+
metricId,
28+
metricMetadata: {
29+
title: 'Example Metric',
30+
description: 'Example Metric Description',
31+
type: 'number',
32+
},
33+
entities: [
34+
// 1 minute ago
35+
{
36+
entityRef: 'component:default/service-one-minute',
37+
entityName: 'service-one-minute',
38+
entityNamespace: 'default',
39+
entityKind: 'Component',
40+
owner: 'group:default/platform',
41+
metricValue: 5,
42+
timestamp: now.toISOString(),
43+
status: 'success',
44+
},
45+
46+
// 15 minutes ago
47+
{
48+
entityRef: 'component:default/service-fifteen-minutes',
49+
entityName: 'service-fifteen-minutes',
50+
entityNamespace: 'default',
51+
entityKind: 'Component',
52+
owner: 'group:default/platform',
53+
metricValue: 10,
54+
timestamp: subMinutes(now, 15).toISOString(),
55+
status: 'success',
56+
},
57+
58+
// 1 hour ago
59+
{
60+
entityRef: 'component:default/service-one-hour',
61+
entityName: 'service-one-hour',
62+
entityNamespace: 'default',
63+
entityKind: 'Component',
64+
owner: 'group:default/platform',
65+
metricValue: 30,
66+
timestamp: subHours(now, 1).toISOString(),
67+
status: 'warning',
68+
},
69+
70+
// 5 hours ago
71+
{
72+
entityRef: 'component:default/service-five-hours',
73+
entityName: 'service-five-hours',
74+
entityNamespace: 'default',
75+
entityKind: 'Component',
76+
owner: 'group:default/platform',
77+
metricValue: 50,
78+
timestamp: subHours(now, 5).toISOString(),
79+
status: 'error',
80+
},
81+
82+
// Yesterday
83+
{
84+
entityRef: 'component:default/service-yesterday',
85+
entityName: 'service-yesterday',
86+
entityNamespace: 'default',
87+
entityKind: 'Component',
88+
owner: 'group:default/platform',
89+
metricValue: 30,
90+
timestamp: subDays(now, 1).toISOString(),
91+
status: 'error',
92+
},
93+
94+
// 3 days ago
95+
{
96+
entityRef: 'component:default/service-three-days',
97+
entityName: 'service-three-days',
98+
entityNamespace: 'default',
99+
entityKind: 'Component',
100+
owner: 'group:default/platform',
101+
metricValue: 40,
102+
timestamp: subDays(now, 3).toISOString(),
103+
status: 'success',
104+
},
105+
106+
// 7+ days ago → formatted date
107+
{
108+
entityRef: 'component:default/service-old',
109+
entityName: 'service-old',
110+
entityNamespace: 'default',
111+
entityKind: 'Component',
112+
owner: 'group:default/platform',
113+
metricValue: 50,
114+
timestamp: subDays(now, 10).toISOString(),
115+
status: 'error',
116+
},
117+
118+
// Invalid timestamp
119+
{
120+
entityRef: 'component:default/service-invalid',
121+
entityName: 'service-invalid',
122+
entityNamespace: 'default',
123+
entityKind: 'Component',
124+
owner: 'group:default/platform',
125+
metricValue: 0,
126+
timestamp: 'invalid-date',
127+
status: 'error',
128+
},
129+
],
130+
pagination: {
131+
page,
132+
pageSize,
133+
total: 8,
134+
totalPages: 1,
135+
isCapped: false,
136+
},
137+
};
138+
};

0 commit comments

Comments
 (0)