feat(scorecard): add aggregated scorecard metrics frontend (#1859)

* feat(scorecard): add aggregated scorecard metrics frontend

* change of locator

Co-authored-by: HusneShabbir <husneshabbir447@gmail.com>

* homepage integration to scorecard to test aggregated metrics in local

* fix lock file

* fix sonarqube issues

* addressed review comments

---------

Co-authored-by: Husne Shabbir <shabbirhusne447@gmail.com>
Co-authored-by: HusneShabbir <husneshabbir447@gmail.com>

Author: 3 people

workspaces/scorecard/.changeset/free-sheep-post.md

@@ -0,0 +1,6 @@
+---
+'@red-hat-developer-hub/backstage-plugin-scorecard-common': minor
+'@red-hat-developer-hub/backstage-plugin-scorecard': minor
+---
+
+Added aggregated metric cards frontend

workspaces/scorecard/package.json

@@ -54,7 +54,8 @@
   "resolutions": {
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "refractor@npm:3.6.0/prismjs": "^1.30.0"
+    "refractor@npm:3.6.0/prismjs": "^1.30.0",
+    "isolated-vm": "6.0.2"
   },
   "prettier": "@spotify/prettier-config",
   "lint-staged": {

workspaces/scorecard/packages/app/e2e-tests/pages/CatalogPage.ts

@@ -26,7 +26,7 @@ export class CatalogPage {
     const enterButton = this.page.getByRole('button', { name: 'Enter' });
     await expect(enterButton).toBeVisible();
     await enterButton.click();
-    await expect(this.page.getByText('My Company Catalog')).toBeVisible();
+    await expect(this.page.getByText('Welcome back!')).toBeVisible();
     await this.switchToLocale(this.page, locale);
   }
 

workspaces/scorecard/packages/app/e2e-tests/pages/ScorecardPage.ts

@@ -41,7 +41,7 @@ export class ScorecardPage {
   }
 
   async openTab() {
-    const scorecardTab = this.page.getByText('Scorecard');
+    const scorecardTab = this.page.getByText('Scorecard', { exact: true });
     await expect(scorecardTab).toBeVisible();
     await Promise.all([
       waitUntilApiCallSucceeds(this.page),

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

@@ -51,7 +51,7 @@ test.describe.serial('Pre-RBAC Access Tests', () => {
     await page.goto('/');
     await catalogPage.navigateToCatalog(currentLocale);
     await catalogPage.openComponent('Red Hat Developer Hub');
-    await page.getByText('Scorecard').click();
+    await page.getByText('Scorecard', { exact: true }).click();
 
     await expect(
       page.getByText(translations.permissionRequired.title),

workspaces/scorecard/packages/app/package.json

@@ -48,10 +48,13 @@
     "@backstage/ui": "^0.9.1",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
+    "@openshift/dynamic-plugin-sdk": "^5.0.1",
+    "@red-hat-developer-hub/backstage-plugin-dynamic-home-page": "^1.9.2",
     "@red-hat-developer-hub/backstage-plugin-scorecard": "workspace:^",
     "@red-hat-developer-hub/backstage-plugin-theme": "^0.11.0",
     "@roadiehq/backstage-plugin-github-pull-requests": "^3.5.1",
     "@roadiehq/backstage-plugin-jira": "^2.13.1",
+    "@scalprum/react-core": "0.9.5",
     "react": "^18.0.2",
     "react-dom": "^18.0.2",
     "react-router": "^6.3.0",

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

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Navigate, Route } from 'react-router-dom';
+import { Route } from 'react-router-dom';
 import { apiDocsPlugin, ApiExplorerPage } from '@backstage/plugin-api-docs';
 import {
   CatalogEntityPage,
@@ -54,13 +54,59 @@ import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common/
 import { scorecardTranslations } from '@red-hat-developer-hub/backstage-plugin-scorecard/alpha';
 import { githubAuthApiRef } from '@backstage/core-plugin-api';
 import { getThemes } from '@red-hat-developer-hub/backstage-plugin-theme';
+import { ScorecardHomepageSection } from '@red-hat-developer-hub/backstage-plugin-scorecard';
+
+import { ScalprumContext, ScalprumState } from '@scalprum/react-core';
+import { PluginStore } from '@openshift/dynamic-plugin-sdk';
+import {
+  DynamicCustomizableHomePage,
+  OnboardingSection,
+  defaultLayouts,
+  HomePageCardMountPoint,
+  homepageTranslations,
+} from '@red-hat-developer-hub/backstage-plugin-dynamic-home-page';
+
+const mountPoints: HomePageCardMountPoint[] = [
+  {
+    Component: OnboardingSection,
+    config: {
+      layouts: defaultLayouts.onboarding,
+    },
+  },
+  {
+    Component: ScorecardHomepageSection,
+    config: {
+      layouts: {
+        xl: { w: 12, h: 6 },
+        lg: { w: 12, h: 6 },
+        md: { w: 12, h: 7 },
+        sm: { w: 12, h: 8 },
+        xs: { w: 12, h: 9 },
+        xxs: { w: 12, h: 10 },
+      },
+    },
+  },
+];
+
+const scalprumState: ScalprumState = {
+  initialized: true,
+  api: {
+    dynamicRootConfig: {
+      mountPoints: {
+        'home.page/cards': mountPoints,
+      },
+    },
+  },
+  config: {},
+  pluginStore: new PluginStore(),
+};
 
 const app = createApp({
   apis,
   themes: getThemes(),
   __experimentalTranslations: {
     availableLanguages: ['en', 'de', 'fr', 'es'],
-    resources: [scorecardTranslations],
+    resources: [scorecardTranslations, homepageTranslations],
   },
   bindRoutes({ bind }) {
     bind(catalogPlugin.externalRoutes, {
@@ -100,7 +146,14 @@ const app = createApp({
 
 const routes = (
   <FlatRoutes>
-    <Route path="/" element={<Navigate to="catalog" />} />
+    <Route
+      path="/"
+      element={
+        <ScalprumContext.Provider value={scalprumState}>
+          <DynamicCustomizableHomePage />
+        </ScalprumContext.Provider>
+      }
+    />
     <Route path="/catalog" element={<CatalogIndexPage />} />
     <Route
       path="/catalog/:namespace/:kind/:name"

workspaces/scorecard/plugins/scorecard/README.md

@@ -53,11 +53,11 @@ permission:
 1. Add the Scorecard page to you Entity overview page by modifying `packages/app/src/components/catalog/EntityPage.tsx`:
 
    ```tsx
-   import { ScorecardPage } from '@red-hat-developer-hub/backstage-plugin-scorecard';
+   import { EntityScorecardContent } from '@red-hat-developer-hub/backstage-plugin-scorecard';
 
    const scorecardRoute = (
      <EntityLayout.Route path="/scorecard" title="Scorecard">
-       <ScorecardPage />
+       <EntityScorecardContent />
      </EntityLayout.Route>
    );
 

workspaces/scorecard/plugins/scorecard/__fixtures__/aggregatedScorecardData.ts

@@ -0,0 +1,62 @@
+/*
+ * Copyright Red Hat, Inc.
+ *
+ * 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 { AggregatedMetricResult } from '../src/utils/utils';
+
+export const mockAggregatedScorecardSuccessData: AggregatedMetricResult[] = [
+  {
+    id: 'github.open_prs',
+    status: 'success',
+    metadata: {
+      title: 'GitHub open PRs',
+      description:
+        'Current count of open Pull Requests for a given GitHub repository.',
+      type: 'object',
+      history: true,
+    },
+    result: {
+      values: [
+        { count: 11, name: 'success' },
+        { count: 14, name: 'warning' },
+        { count: 12, name: 'error' },
+      ],
+      total: 37,
+      timestamp: '2024-01-15T10:30:00Z',
+      lastUpdated: '2024-01-15T10:30:00Z',
+    },
+  },
+  {
+    id: 'jira.issues_open',
+    status: 'success',
+    metadata: {
+      title: 'Jira open blocking tickets',
+      description:
+        'Highlights the number of critical, blocking issues that are currently open in Jira.',
+      type: 'object',
+      history: true,
+    },
+    result: {
+      values: [
+        { count: 0, name: 'success' },
+        { count: 1, name: 'warning' },
+        { count: 3, name: 'error' },
+      ],
+      total: 4,
+      timestamp: '2024-01-15T10:30:00Z',
+      lastUpdated: '2024-01-15T10:30:00Z',
+    },
+  },
+];

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

@@ -21,6 +21,7 @@ import { TestApiProvider } from '@backstage/test-utils';
 import { getAllThemes } from '@red-hat-developer-hub/backstage-plugin-theme';
 import type { Entity } from '@backstage/catalog-model';
 import type { MetricResult } from '@red-hat-developer-hub/backstage-plugin-scorecard-common';
+import type { AggregatedMetricResult } from '../src/utils/utils';
 
 import { scorecardPlugin, EntityScorecardContent } from '../src/plugin';
 import { scorecardTranslations } from '../src/translations';
@@ -29,6 +30,7 @@ import {
   mockScorecardErrorData,
   mockScorecardSuccessData,
 } from '../__fixtures__/scorecardData';
+import { mockAggregatedScorecardSuccessData } from '../__fixtures__/aggregatedScorecardData';
 
 const mockComponentEntity: Entity = {
   apiVersion: 'backstage.io/v1alpha1',
@@ -48,6 +50,11 @@ class MockScorecardApi implements ScorecardApi {
   async getScorecards(_entity: Entity): Promise<MetricResult[]> {
     return [...mockScorecardSuccessData, ...mockScorecardErrorData];
   }
+  async getAggregatedScorecards(
+    _metricIds?: string[],
+  ): Promise<AggregatedMetricResult[]> {
+    return mockAggregatedScorecardSuccessData;
+  }
 }
 
 createDevApp()