fix(scorecard): Scorecard aggregated metrics UI integration

workspaces/scorecard/.changeset/ninety-hotels-call.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-scorecard': patch
+---
+
+Integrated UI with backend aggregated api

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

@@ -40,6 +40,6 @@ export class CatalogPage {
     await page.getByRole('link', { name: 'Settings' }).click();
     await page.getByRole('button', { name: 'English' }).click();
     await page.getByRole('option', { name: locale }).click();
-    await page.locator('a').filter({ hasText: 'Home' }).click();
+    await page.locator('a').filter({ hasText: 'Catalog' }).click();
   }
 }

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

@@ -159,23 +159,12 @@ test.describe.serial('Scorecard Plugin Tests', () => {
     );
     expect(isGithubVisible).toBe(true);
 
-    const errorLocator = page.getByRole('heading', {
-      name: translations.errors.metricDataUnavailable,
-    });
+    const errorLocator = page.getByText(
+      translations.errors.metricDataUnavailable,
+    );
     await expect(errorLocator).toBeVisible();
     await runAccessibilityTests(page, testInfo);
 
-    await errorLocator.hover();
-    const errorMetric = unavailableMetricResponse.find(
-      metric => metric.id === 'github.open_prs',
-    );
-
-    if (errorMetric && 'error' in errorMetric) {
-      const errorTooltip = errorMetric.error;
-      expect(errorTooltip).toBeTruthy();
-      await expect(page.getByText(errorTooltip!)).toBeVisible();
-    }
-
     await scorecardPage.validateScorecardAriaFor(jiraMetric);
   });
 
@@ -202,22 +191,10 @@ test.describe.serial('Scorecard Plugin Tests', () => {
     );
     expect(isJiraVisible).toBe(true);
 
-    const errorLocator = page.getByRole('heading', {
-      name: translations.errors.invalidThresholds,
-    });
+    const errorLocator = page.getByText(translations.errors.invalidThresholds);
     await expect(errorLocator).toBeVisible();
     await runAccessibilityTests(page, testInfo);
 
-    await errorLocator.hover();
-    const errorTooltip = invalidThresholdResponse.find(
-      metric => metric.id === 'github.open_prs',
-    )?.result?.thresholdResult;
-
-    if (errorTooltip && 'error' in errorTooltip) {
-      expect(errorTooltip.error).toBeTruthy();
-      await expect(page.getByText(errorTooltip.error)).toBeVisible();
-    }
-
     await scorecardPage.validateScorecardAriaFor(jiraMetric);
   });
 });

workspaces/scorecard/packages/app/e2e-tests/utils/rbacSetup.ts

@@ -57,7 +57,7 @@ export async function setupRBAC(page: Page) {
   await page.getByTestId('nextButton-2').click();
   await page.getByRole('button', { name: 'Create' }).click();
 
-  await page.locator('a').filter({ hasText: 'Home' }).click();
+  await page.locator('a').filter({ hasText: 'Catalog' }).click();
   await expect(page.getByRole('button', { name: 'Create' })).toBeVisible();
 }
 async function selectCheckbox(page: Page, label: string) {

workspaces/scorecard/packages/app/package.json

@@ -49,7 +49,7 @@
     "@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-dynamic-home-page": "^1.10.2",
     "@red-hat-developer-hub/backstage-plugin-scorecard": "workspace:^",
     "@red-hat-developer-hub/backstage-plugin-theme": "^0.12.0",
     "@roadiehq/backstage-plugin-github-pull-requests": "^3.5.1",

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

@@ -54,35 +54,203 @@ 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 { ScorecardHomepageCard } 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';
+import { ComponentType } from 'react';
 
 const mountPoints: HomePageCardMountPoint[] = [
   {
     Component: OnboardingSection,
     config: {
-      layouts: defaultLayouts.onboarding,
+      id: 'onboarding-section',
+      title: 'Onboarding section',
+      layouts: {
+        xl: { w: 12, h: 5 },
+        lg: { w: 12, h: 5 },
+        md: { w: 12, h: 5 },
+        sm: { w: 12, h: 5 },
+        xs: { w: 12, h: 5 },
+        xxs: { w: 12, h: 5 },
+      },
+    },
+  },
+  {
+    Component: ScorecardHomepageCard as ComponentType,
+    config: {
+      id: 'scorecard-jira.open_issues',
+      title: 'Scorecard: Jira open blocking tickets',
+      // Supported card layout
+      cardLayout: {
+        width: {
+          minColumns: 3,
+          maxColumns: 12,
+          defaultColumns: 4,
+        },
+        height: {
+          minRows: 5,
+          maxRows: 12,
+          defaultRows: 6,
+        },
+      },
+      // Default layout so that it is shown automatically
+      layouts: {
+        xl: { w: 4, h: 6 },
+        lg: { w: 4, h: 6 },
+        md: { w: 4, h: 6 },
+        sm: { w: 4, h: 6 },
+        xs: { w: 4, h: 6 },
+        xxs: { w: 4, h: 6 },
+      },
+      props: {
+        metricId: 'jira.open_issues',
+      },
     },
   },
   {
-    Component: ScorecardHomepageSection,
+    Component: ScorecardHomepageCard as ComponentType,
     config: {
+      id: 'scorecard-github.open_prs',
+      title: 'Scorecard: GitHub open PRs',
+      // Supported card layout
+      cardLayout: {
+        width: {
+          minColumns: 3,
+          maxColumns: 12,
+          defaultColumns: 4,
+        },
+        height: {
+          minRows: 5,
+          maxRows: 12,
+          defaultRows: 6,
+        },
+      },
+      // Default layout so that it is shown automatically
+      layouts: {
+        xl: { w: 4, h: 6, x: 4 },
+        lg: { w: 4, h: 6, x: 4 },
+        md: { w: 4, h: 6, x: 4 },
+        sm: { w: 4, h: 6, x: 4 },
+        xs: { w: 4, h: 6, x: 4 },
+        xxs: { w: 4, h: 6, x: 4 },
+      },
+      props: {
+        metricId: 'github.open_prs',
+      },
+    },
+  },
+  {
+    Component: ScorecardHomepageCard as ComponentType,
+    config: {
+      id: 'scorecard-customizable',
+      title: 'Scorecard: Customizable',
+      // Supported card layout
+      cardLayout: {
+        width: {
+          minColumns: 3,
+          maxColumns: 12,
+          defaultColumns: 4,
+        },
+        height: {
+          minRows: 5,
+          maxRows: 12,
+          defaultRows: 6,
+        },
+      },
+      // Default layout so that it is shown automatically
       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 },
+        xl: { w: 4, h: 6, x: 8 },
+        lg: { w: 4, h: 6, x: 8 },
+        md: { w: 4, h: 6, x: 8 },
+        sm: { w: 4, h: 6, x: 8 },
+        xs: { w: 4, h: 6, x: 8 },
+        xxs: { w: 4, h: 6, x: 8 },
+      },
+      settings: {
+        schema: {
+          properties: {
+            metricId: {
+              title: 'Metric (Needs currently a page reload after change!)',
+              type: 'string',
+              default: 'jira.open_issues',
+              enum: ['jira.open_issues', 'github.open_prs'],
+            },
+          },
+        },
+        uiSchema: {
+          metricId: {
+            'ui:widget': 'RadioWidget',
+            'ui:enumNames': ['Jira Open Issues', 'GitHub Open PRs'],
+          },
+        },
+      },
+    },
+  },
+  {
+    Component: ScorecardHomepageCard as ComponentType,
+    config: {
+      id: 'scorecard-no-metric-id',
+      title: 'Scorecard: No metric id (expected error)',
+      // Supported card layout
+      cardLayout: {
+        width: {
+          minColumns: 3,
+          maxColumns: 12,
+          defaultColumns: 4,
+        },
+        height: {
+          minRows: 5,
+          maxRows: 12,
+          defaultRows: 6,
+        },
+      },
+      // Default layout so that it is shown automatically
+      layouts: {
+        xl: { w: 4, h: 6 },
+        lg: { w: 4, h: 6 },
+        md: { w: 4, h: 6 },
+        sm: { w: 4, h: 6 },
+        xs: { w: 4, h: 6 },
+        xxs: { w: 4, h: 6 },
+      },
+    },
+  },
+  {
+    Component: ScorecardHomepageCard as ComponentType,
+    config: {
+      id: 'scorecard-invalid-metric-id',
+      title: 'Scorecard: Invalid metric id (expected error)',
+      // Supported card layout
+      cardLayout: {
+        width: {
+          minColumns: 3,
+          maxColumns: 12,
+          defaultColumns: 4,
+        },
+        height: {
+          minRows: 5,
+          maxRows: 12,
+          defaultRows: 6,
+        },
+      },
+      // Default layout so that it is shown automatically
+      layouts: {
+        xl: { w: 4, h: 6, x: 4 },
+        lg: { w: 4, h: 6, x: 4 },
+        md: { w: 4, h: 6, x: 4 },
+        sm: { w: 4, h: 6, x: 4 },
+        xs: { w: 4, h: 6, x: 4 },
+        xxs: { w: 4, h: 6, x: 4 },
+      },
+      props: {
+        metricId: 'invalid-metric-id',
       },
     },
   },

workspaces/scorecard/packages/app/src/components/Root/Root.tsx

@@ -16,6 +16,7 @@
 import { PropsWithChildren } from 'react';
 import { makeStyles } from '@material-ui/core';
 import HomeIcon from '@material-ui/icons/Home';
+import CategoryIcon from '@material-ui/icons/Category';
 import ExtensionIcon from '@material-ui/icons/Extension';
 import LibraryBooks from '@material-ui/icons/LibraryBooks';
 import CreateComponentIcon from '@material-ui/icons/AddCircleOutline';
@@ -82,7 +83,8 @@ export const Root = ({ children }: PropsWithChildren<{}>) => (
       <SidebarDivider />
       <SidebarGroup label="Menu" icon={<MenuIcon />}>
         {/* Global nav, not org-specific */}
-        <SidebarItem icon={HomeIcon} to="catalog" text="Home" />
+        <SidebarItem icon={HomeIcon} to="" text="Home" />
+        <SidebarItem icon={CategoryIcon} to="catalog" text="Catalog" />
         <MyGroupsSidebarItem
           singularTitle="My Group"
           pluralTitle="My Groups"

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

@@ -41,19 +41,39 @@ export const mockAggregatedScorecardSuccessData: AggregatedMetricResult[] = [
     id: 'jira.issues_open',
     status: 'success',
     metadata: {
-      title: 'Jira open blocking tickets',
+      title: 'Open Jira Issues',
       description:
         'Highlights the number of critical, blocking issues that are currently open in Jira.',
       type: 'number',
       history: true,
     },
     result: {
       values: [
-        { count: 0, name: 'success' },
+        { count: 4, name: 'success' },
         { count: 1, name: 'warning' },
-        { count: 3, name: 'error' },
+        { count: 6, name: 'error' },
       ],
-      total: 4,
+      total: 11,
+      timestamp: '2024-01-15T10:30:00Z',
+    },
+  },
+  {
+    id: 'github.open_prs',
+    status: 'success',
+    metadata: {
+      title: 'GitHub Open PRs',
+      description:
+        'Current count of open Pull Requests for a given GitHub repository.',
+      type: 'number',
+      history: true,
+    },
+    result: {
+      values: [
+        { count: 1, name: 'success' },
+        { count: 3, name: 'warning' },
+        { count: 10, name: 'error' },
+      ],
+      total: 14,
       timestamp: '2024-01-15T10:30:00Z',
     },
   },

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

@@ -13,7 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
+// eslint-disable-next-line
 import '@backstage/ui/css/styles.css';
+
 import { createDevApp } from '@backstage/dev-utils';
 import { EntityProvider } from '@backstage/plugin-catalog-react';
 import { Page, Header, TabbedLayout } from '@backstage/core-components';
@@ -52,8 +55,8 @@ class MockScorecardApi implements ScorecardApi {
   async getScorecards(_entity: Entity): Promise<MetricResult[]> {
     return [...mockScorecardSuccessData, ...mockScorecardErrorData];
   }
-  async getAggregatedScorecards(
-    _metricIds?: string[],
+  async getAggregatedScorecard(
+    _metricId: string,
   ): Promise<AggregatedMetricResult[]> {
     return mockAggregatedScorecardSuccessData;
   }