Implement the detailed metrics dashboard page (#1748)

* Add more fields to the metrics node

* Initial page setup

* Update page

* Update backend

* Update backend

* Update frontend

* Add backend tests and last pull request days

* Add tooltip

* Add the option to display the valid colors if it is preffered that the actual is bigger than the requirement

* Improve styling

* Update frontend tests mocking

* Add test mocking

* Implement charts

* Add badges

* Update tests

* Add error message

* Update tests

* Apply sonar suggestion

* Update tests

* Update tests

* Update badges styling

---------

Co-authored-by: Kate Golovanova <kate@kgthreads.com>

Author: ahmedxgouda

backend/apps/owasp/graphql/nodes/project.py

@@ -37,14 +37,25 @@ class ProjectNode(GenericEntityNode):
     """Project node."""
 
     @strawberry.field
-    def health_metrics(self, limit: int = 30) -> list[ProjectHealthMetricsNode]:
+    def health_metrics_list(self, limit: int = 30) -> list[ProjectHealthMetricsNode]:
         """Resolve project health metrics."""
         return ProjectHealthMetrics.objects.filter(
             project=self,
         ).order_by(
             "nest_created_at",
         )[:limit]
 
+    @strawberry.field
+    def health_metrics_latest(self) -> ProjectHealthMetricsNode | None:
+        """Resolve latest project health metrics."""
+        return (
+            ProjectHealthMetrics.get_latest_health_metrics()
+            .filter(
+                project=self,
+            )
+            .first()
+        )
+
     @strawberry.field
     def issues_count(self) -> int:
         """Resolve issues count."""

backend/apps/owasp/graphql/nodes/project_health_metrics.py

@@ -21,6 +21,8 @@
         "recent_releases_count",
         "score",
         "stars_count",
+        "total_issues_count",
+        "total_releases_count",
         "unanswered_issues_count",
         "unassigned_issues_count",
     ],
@@ -35,6 +37,11 @@ def age_days(self) -> int:
         """Resolve project age in days."""
         return self.age_days
 
+    @strawberry.field
+    def age_days_requirement(self) -> int:
+        """Resolve project age requirement in days."""
+        return self.age_days_requirement
+
     @strawberry.field
     def created_at(self) -> datetime:
         """Resolve metrics creation date."""
@@ -55,6 +62,11 @@ def last_pull_request_days(self) -> int:
         """Resolve last pull request age in days."""
         return self.last_pull_request_days
 
+    @strawberry.field
+    def last_pull_request_days_requirement(self) -> int:
+        """Resolve last pull request age requirement in days."""
+        return self.last_pull_request_days_requirement
+
     @strawberry.field
     def last_release_days(self) -> int:
         """Resolve last release age in days."""
@@ -74,3 +86,8 @@ def project_name(self) -> str:
     def owasp_page_last_update_days(self) -> int:
         """Resolve OWASP page last update age in days."""
         return self.owasp_page_last_update_days
+
+    @strawberry.field
+    def owasp_page_last_update_days_requirement(self) -> int:
+        """Resolve OWASP page last update age requirement in days."""
+        return self.owasp_page_last_update_days_requirement

backend/apps/owasp/models/project_health_metrics.py

@@ -87,6 +87,11 @@ def age_days(self) -> int:
         """Calculate project age in days."""
         return (timezone.now() - self.created_at).days if self.created_at else 0
 
+    @property
+    def age_days_requirement(self) -> int:
+        """Get the age requirement for the project."""
+        return self.project_requirements.age_days
+
     @property
     def last_commit_days(self) -> int:
         """Calculate days since last commit."""
@@ -106,6 +111,11 @@ def last_pull_request_days(self) -> int:
             else 0
         )
 
+    @property
+    def last_pull_request_days_requirement(self) -> int:
+        """Get the last pull request requirement for the project."""
+        return self.project_requirements.last_pull_request_days
+
     @property
     def last_release_days(self) -> int:
         """Calculate days since last release."""
@@ -125,6 +135,11 @@ def owasp_page_last_update_days(self) -> int:
             else 0
         )
 
+    @property
+    def owasp_page_last_update_days_requirement(self) -> int:
+        """Get the OWASP page last update requirement for the project."""
+        return self.project_requirements.owasp_page_last_update_days
+
     @property
     def project_requirements(self) -> ProjectHealthRequirements:
         """Get the project health requirements for the project's level."""

backend/tests/apps/owasp/graphql/nodes/project_health_metrics_test.py

@@ -34,6 +34,8 @@ def test_meta_configuration(self):
             "recent_releases_count",
             "score",
             "stars_count",
+            "total_issues_count",
+            "total_releases_count",
             "unanswered_issues_count",
             "unassigned_issues_count",
         }
@@ -67,8 +69,10 @@ def _get_field_by_name(self, name):
             ("open_pull_requests_count", int),
             ("owasp_page_last_update_days", int),
             ("project_name", str),
-            ("stars_count", int),
             ("recent_releases_count", int),
+            ("stars_count", int),
+            ("total_issues_count", int),
+            ("total_releases_count", int),
             ("unanswered_issues_count", int),
             ("unassigned_issues_count", int),
         ],

backend/tests/apps/owasp/graphql/nodes/project_test.py

@@ -44,8 +44,13 @@ def _get_field_by_name(self, name):
             (f for f in ProjectNode.__strawberry_definition__.fields if f.name == name), None
         )
 
-    def test_resolve_health_metrics(self):
-        field = self._get_field_by_name("health_metrics")
+    def test_resolve_health_metrics_latest(self):
+        field = self._get_field_by_name("health_metrics_latest")
+        assert field is not None
+        assert field.type.of_type is ProjectHealthMetricsNode
+
+    def test_resolve_health_metrics_list(self):
+        field = self._get_field_by_name("health_metrics_list")
         assert field is not None
         assert field.type.of_type is ProjectHealthMetricsNode
 

backend/tests/apps/owasp/graphql/queries/project_health_metrics_test.py

@@ -84,6 +84,8 @@ def test_resolve_project_health_metrics(self):
                 is_funding_requirements_compliant=True,
                 is_leader_requirements_compliant=True,
                 recent_releases_count=3,
+                total_issues_count=15,
+                total_releases_count=5,
             )
         ]
         query = ProjectHealthMetricsQuery(project_health_metrics=metrics)

frontend/__tests__/e2e/pages/ProjectHealthDashboardMetricsDetails.spec.ts

@@ -0,0 +1,42 @@
+import { expect, test } from '@playwright/test'
+import { mockProjectsDashboardMetricsDetailsData } from '@unit/data/mockProjectsDashboardMetricsDetailsData'
+
+test.describe('Project Health Metrics Details Page', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.route('**/graphql/', async (route) => {
+      await route.fulfill({
+        status: 200,
+        json: { data: mockProjectsDashboardMetricsDetailsData },
+      })
+    })
+    await page.context().addCookies([
+      {
+        name: 'csrftoken',
+        value: 'abc123',
+        domain: 'localhost',
+        path: '/',
+      },
+    ])
+    await page.goto('/projects/dashboard/metrics/test-project')
+  })
+
+  test('renders project health metrics details', async ({ page }) => {
+    const metricsLatest = mockProjectsDashboardMetricsDetailsData.project.healthMetricsLatest
+    const headers = [
+      'Days Metrics',
+      'Issues',
+      'Stars',
+      'Forks',
+      'Contributors',
+      'Releases',
+      'Open Pull Requests',
+      'Health',
+      'Score',
+    ]
+    await expect(page.getByText(metricsLatest.projectName)).toBeVisible()
+    await expect(page.getByText(metricsLatest.score.toString())).toBeVisible()
+    for (const header of headers) {
+      await expect(page.getByText(header, { exact: true })).toBeVisible()
+    }
+  })
+})

frontend/__tests__/unit/data/mockProjectDetailsData.ts

@@ -2,7 +2,7 @@ export const mockProjectDetailsData = {
   project: {
     contributorsCount: 1200,
     forksCount: 10,
-    healthMetrics: [
+    healthMetricsList: [
       {
         openIssuesCount: 5,
         unassignedIssuesCount: 2,

frontend/__tests__/unit/data/mockProjectsDashboardMetricsDetailsData.ts

@@ -0,0 +1,34 @@
+export const mockProjectsDashboardMetricsDetailsData = {
+  project: {
+    healthMetricsLatest: {
+      ageDays: 200,
+      ageDaysRequirement: 100,
+      isFundingRequirementsCompliant: true,
+      isLeaderRequirementsCompliant: false,
+      lastCommitDays: 22,
+      lastCommitDaysRequirement: 30,
+      lastPullRequestDays: 55,
+      lastPullRequestDaysRequirement: 56,
+      lastReleaseDays: 57,
+      lastReleaseDaysRequirement: 58,
+      owaspPageLastUpdateDays: 52,
+      owaspPageLastUpdateDaysRequirement: 53,
+      projectName: 'Test',
+      score: 41,
+    },
+    healthMetricsList: [
+      {
+        contributorsCount: 50,
+        forksCount: 60,
+        openIssuesCount: 59,
+        openPullRequestsCount: 51,
+        recentReleasesCount: 75,
+        starsCount: 77,
+        totalIssuesCount: 78,
+        totalReleasesCount: 79,
+        unassignedIssuesCount: 85,
+        unansweredIssuesCount: 86,
+      },
+    ],
+  },
+}

frontend/__tests__/unit/pages/ProjectHealthDashboardMetricsDetails.test.tsx

@@ -0,0 +1,93 @@
+import { useQuery } from '@apollo/client'
+import { render, screen, waitFor } from '@testing-library/react'
+import { mockProjectsDashboardMetricsDetailsData } from '@unit/data/mockProjectsDashboardMetricsDetailsData'
+import ProjectHealthMetricsDetails from 'app/projects/dashboard/metrics/[projectKey]/page'
+
+jest.mock('react-apexcharts', () => {
+  return {
+    __esModule: true,
+    default: () => {
+      return <div data-testid="mock-apexcharts">Mock ApexChart</div>
+    },
+  }
+})
+jest.mock('@apollo/client', () => ({
+  ...jest.requireActual('@apollo/client'),
+  useQuery: jest.fn(),
+}))
+jest.mock('next/navigation', () => ({
+  useParams: jest.fn(() => ({
+    projectKey: 'test-project',
+  })),
+}))
+
+jest.mock('@fortawesome/react-fontawesome', () => ({
+  FontAwesomeIcon: () => <span data-testid="mock-icon"></span>,
+}))
+
+const mockError = {
+  error: new Error('GraphQL error'),
+}
+
+describe('ProjectHealthMetricsDetails', () => {
+  beforeEach(() => {
+    ;(useQuery as jest.Mock).mockReturnValue({
+      data: mockProjectsDashboardMetricsDetailsData,
+      loading: false,
+      error: null,
+    })
+  })
+
+  afterEach(() => {
+    jest.clearAllMocks()
+  })
+
+  test('renders loading state', async () => {
+    ;(useQuery as jest.Mock).mockReturnValue({
+      data: null,
+      loading: true,
+      error: null,
+    })
+    render(<ProjectHealthMetricsDetails />)
+    const loadingSpinner = screen.getAllByAltText('Loading indicator')
+    await waitFor(() => {
+      expect(loadingSpinner.length).toBeGreaterThan(0)
+    })
+  })
+
+  test('renders error state', async () => {
+    ;(useQuery as jest.Mock).mockReturnValue({
+      data: null,
+      loading: false,
+      error: mockError,
+    })
+    render(<ProjectHealthMetricsDetails />)
+    const errorMessage = screen.getByText('No metrics data available for this project.')
+    await waitFor(() => {
+      expect(errorMessage).toBeInTheDocument()
+    })
+  })
+
+  test('renders project health metrics details', async () => {
+    const headers = [
+      'Days Metrics',
+      'Issues',
+      'Stars',
+      'Forks',
+      'Contributors',
+      'Releases',
+      'Open Pull Requests',
+      'Health',
+      'Score',
+    ]
+    const metrics = mockProjectsDashboardMetricsDetailsData.project.healthMetricsLatest
+    render(<ProjectHealthMetricsDetails />)
+    await waitFor(() => {
+      headers.forEach((header) => {
+        expect(screen.getByText(header)).toBeInTheDocument()
+      })
+      expect(screen.getByText(metrics.projectName)).toBeInTheDocument()
+      expect(screen.getByText(metrics.score.toString())).toBeInTheDocument()
+    })
+  })
+})