Implement the detailed metrics dashboard page

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__/unit/data/mockProjectDetailsData.ts

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

frontend/src/app/projects/[projectKey]/page.tsx

@@ -92,7 +92,7 @@ const ProjectDetailsPage = () => {
     <DetailsCard
       details={projectDetails}
       entityKey={project.key}
-      healthMetricsData={project.healthMetrics}
+      healthMetricsData={project.healthMetricsList}
       isActive={project.isActive}
       languages={project.languages}
       pullRequests={project.recentPullRequests}

frontend/src/app/projects/dashboard/metrics/[projectKey]/page.tsx

@@ -0,0 +1,153 @@
+'use client'
+
+import { useQuery } from '@apollo/client'
+import {
+  faPeopleGroup,
+  faCodeFork,
+  faDollar,
+  faCodePullRequest,
+  faChartArea,
+  faExclamationCircle,
+  faQuestionCircle,
+  faFolderOpen,
+  faHandshake,
+  faTag,
+  faRocket,
+  faStar,
+  faTags,
+} from '@fortawesome/free-solid-svg-icons'
+import millify from 'millify'
+import { useParams } from 'next/navigation'
+import { FC, useState, useEffect } from 'react'
+import { handleAppError } from 'app/global-error'
+import { GET_PROJECT_HEALTH_METRICS_DETAILS } from 'server/queries/projectsHealthDashboardQueries'
+import { HealthMetricsProps } from 'types/healthMetrics'
+import BarChart from 'components/BarChart'
+import DashboardCard from 'components/DashboardCard'
+import GeneralCompliantComponent from 'components/GeneralCompliantComponent'
+import LoadingSpinner from 'components/LoadingSpinner'
+import MetricsScoreCircle from 'components/MetricsScoreCircle'
+const ProjectHealthMetricsDetails: FC = () => {
+  const { projectKey } = useParams()
+  const [metrics, setMetrics] = useState<HealthMetricsProps>()
+  const {
+    loading,
+    error: graphqlError,
+    data,
+  } = useQuery(GET_PROJECT_HEALTH_METRICS_DETAILS, {
+    variables: { projectKey },
+  })
+
+  useEffect(() => {
+    if (graphqlError) {
+      handleAppError(graphqlError)
+    }
+    if (data?.project?.healthMetricsLatest) {
+      setMetrics(data.project.healthMetricsLatest)
+    }
+  }, [graphqlError, data])
+  if (loading) {
+    return <LoadingSpinner />
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      {metrics && (
+        <>
+          <div className="flex items-center justify-between">
+            <h1 className="text-2xl font-bold">{metrics.projectName}</h1>
+            <MetricsScoreCircle score={metrics.score} />
+          </div>
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+            <GeneralCompliantComponent
+              title="Funding Requirements Compliant"
+              icon={faDollar}
+              compliant={metrics.isFundingRequirementsCompliant}
+            />
+            <GeneralCompliantComponent
+              title="Leader Requirements Compliant"
+              icon={faHandshake}
+              compliant={metrics.isLeaderRequirementsCompliant}
+            />
+          </div>
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
+            <DashboardCard title="Stars" icon={faStar} stats={millify(metrics.starsCount)} />
+            <DashboardCard title="Forks" icon={faCodeFork} stats={millify(metrics.forksCount)} />
+            <DashboardCard
+              title="Contributors"
+              icon={faPeopleGroup}
+              stats={millify(metrics.contributorsCount)}
+            />
+          </div>
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-3 lg:grid-cols-4">
+            <DashboardCard
+              title="Open Issues"
+              icon={faExclamationCircle}
+              stats={millify(metrics.openIssuesCount)}
+            />
+            <DashboardCard
+              title="Total Issues"
+              icon={faFolderOpen}
+              stats={millify(metrics.totalIssuesCount)}
+            />
+            <DashboardCard
+              title="Unassigned Issues"
+              icon={faTag}
+              stats={millify(metrics.unassignedIssuesCount)}
+            />
+            <DashboardCard
+              title="Unanswered Issues"
+              icon={faQuestionCircle}
+              stats={millify(metrics.unansweredIssuesCount)}
+            />
+          </div>
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
+            <DashboardCard
+              title="Open Pull Requests"
+              icon={faCodePullRequest}
+              stats={millify(metrics.openPullRequestsCount)}
+            />
+            <DashboardCard
+              title="Recent Releases"
+              icon={faRocket}
+              stats={millify(metrics.recentReleasesCount)}
+            />
+            <DashboardCard
+              title="Total Releases"
+              icon={faTags}
+              stats={millify(metrics.totalReleasesCount)}
+            />
+          </div>
+          <BarChart
+            title="Days Metrics"
+            icon={faChartArea}
+            labels={[
+              'Project Age',
+              'Days Since Last Commit',
+              'Days Since Last Release',
+              'Days Since Last Pull Request',
+              'Days Since OWASP Page Last Update',
+            ]}
+            days={[
+              metrics.ageDays,
+              metrics.lastCommitDays,
+              metrics.lastReleaseDays,
+              metrics.lastPullRequestDays,
+              metrics.owaspPageLastUpdateDays,
+            ]}
+            requirements={[
+              metrics.ageDaysRequirement,
+              metrics.lastCommitDaysRequirement,
+              metrics.lastReleaseDaysRequirement,
+              metrics.lastPullRequestDaysRequirement,
+              metrics.owaspPageLastUpdateDaysRequirement,
+            ]}
+            reverseColors={[true, false, false, false, false]}
+          />
+        </>
+      )}
+    </div>
+  )
+}
+
+export default ProjectHealthMetricsDetails

frontend/src/components/BarChart.tsx

@@ -17,7 +17,8 @@ const BarChart: React.FC<{
   labels: string[]
   days: number[]
   requirements: number[]
-}> = ({ title, days, icon, requirements, labels }) => {
+  reverseColors?: boolean[]
+}> = ({ title, days, icon, requirements, labels, reverseColors }) => {
   const { theme } = useTheme()
   let themeColor = '#1E1E2C'
   let redColor = '#FF7875'
@@ -80,6 +81,14 @@ const BarChart: React.FC<{
           colors: [
             function ({ value, dataPointIndex, _ }) {
               const requirement = requirements[dataPointIndex]
+              if (reverseColors && reverseColors[dataPointIndex]) {
+                if (value < requirement * 0.75) {
+                  return orangeColor
+                } else if (value < requirement) {
+                  return redColor
+                }
+                return greenColor
+              }
               if (value > requirement) {
                 return redColor
               } else if (value > requirement * 0.75) {

frontend/src/components/CardDetailsPage.tsx

@@ -19,6 +19,7 @@ import ChapterMapWrapper from 'components/ChapterMapWrapper'
 import HealthMetrics from 'components/HealthMetrics'
 import InfoBlock from 'components/InfoBlock'
 import LeadersList from 'components/LeadersList'
+import MetricsScoreCircle from 'components/MetricsScoreCircle'
 import Milestones from 'components/Milestones'
 import RecentIssues from 'components/RecentIssues'
 import RecentPullRequests from 'components/RecentPullRequests'
@@ -54,15 +55,6 @@ const DetailsCard = ({
   type,
   userSummary,
 }: DetailsCardProps) => {
-  let scoreStyle = 'bg-green-400 text-green-900'
-  if (type === 'project' && healthMetricsData.length > 0) {
-    const score = healthMetricsData[0].score
-    if (score < 50) {
-      scoreStyle = 'bg-red-400 text-red-900'
-    } else if (score < 75) {
-      scoreStyle = 'bg-yellow-400 text-yellow-900'
-    }
-  }
   return (
     <div className="min-h-screen bg-white p-8 text-gray-600 dark:bg-[#212529] dark:text-gray-300">
       <div className="mx-auto max-w-6xl">
@@ -71,25 +63,7 @@ const DetailsCard = ({
             <h1 className="text-4xl font-bold">{title}</h1>
             {IS_PROJECT_HEALTH_ENABLED && type === 'project' && healthMetricsData.length > 0 && (
               <Link href="#issues-trend">
-                <div
-                  className={`group relative flex h-20 w-20 flex-col items-center justify-center rounded-full border-2 shadow-lg transition-all duration-300 hover:scale-105 hover:shadow-xl ${scoreStyle}`}
-                >
-                  <div className="absolute inset-0 rounded-full bg-gradient-to-br from-white/20 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100"></div>
-                  <div className="relative z-10 flex flex-col items-center text-center">
-                    <span className="text-xs font-semibold uppercase tracking-wide opacity-90">
-                      Health
-                    </span>
-                    <span className="text-xl font-black leading-none">
-                      {healthMetricsData[0].score}
-                    </span>
-                    <span className="text-xs font-semibold uppercase tracking-wide opacity-90">
-                      Score
-                    </span>
-                  </div>
-                  {healthMetricsData[0].score < 30 && (
-                    <div className="animate-pulse absolute inset-0 rounded-full bg-red-400/20"></div>
-                  )}
-                </div>
+                <MetricsScoreCircle score={healthMetricsData[0].score} />
               </Link>
             )}
           </div>