Implement the detailed metrics dashboard page #1748
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,149 @@ | ||
| 'use client' | ||
|
|
||
| import { useQuery } from '@apollo/client' | ||
| import { | ||
| faStar, | ||
| faFolderOpen, | ||
| faQuestionCircle, | ||
| faHandshake, | ||
| } from '@fortawesome/free-regular-svg-icons' | ||
| import { | ||
| faPeopleGroup, | ||
| faCodeFork, | ||
| faDollar, | ||
| faCodePullRequest, | ||
| faChartArea, | ||
| faExclamationCircle, | ||
| faTag, | ||
| faRocket, | ||
| faTags, | ||
| } from '@fortawesome/free-solid-svg-icons' | ||
| 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 | ||
| icon={faDollar} | ||
| compliant={metrics.isFundingRequirementsCompliant} | ||
| /> | ||
| <GeneralCompliantComponent | ||
| icon={faHandshake} | ||
| compliant={metrics.isLeaderRequirementsCompliant} | ||
| /> | ||
| </div> | ||
| <div className="grid grid-cols-1 gap-4 md:grid-cols-3"> | ||
| <DashboardCard title="Stars" icon={faStar} stats={metrics.starsCount.toString()} /> | ||
| <DashboardCard title="Forks" icon={faCodeFork} stats={metrics.forksCount.toString()} /> | ||
| <DashboardCard | ||
| title="Contributors" | ||
| icon={faPeopleGroup} | ||
| stats={metrics.contributorsCount.toString()} | ||
| /> | ||
| </div> | ||
| <div className="grid grid-cols-1 gap-4 md:grid-cols-3 lg:grid-cols-4"> | ||
| <DashboardCard | ||
| title="Open Issues" | ||
| icon={faExclamationCircle} | ||
| stats={metrics.openIssuesCount.toString()} | ||
| /> | ||
| <DashboardCard | ||
| title="Total Issues" | ||
| icon={faFolderOpen} | ||
| stats={metrics.totalIssuesCount.toString()} | ||
| /> | ||
| <DashboardCard | ||
| title="Unassigned Issues" | ||
| icon={faTag} | ||
| stats={metrics.unassignedIssuesCount.toString()} | ||
| /> | ||
| <DashboardCard | ||
| title="Unanswered Issues" | ||
| icon={faQuestionCircle} | ||
| stats={metrics.unansweredIssuesCount.toString()} | ||
| /> | ||
| </div> | ||
| <div className="grid grid-cols-1 gap-4 md:grid-cols-3"> | ||
| <DashboardCard | ||
ahmedxgouda marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
| title="Open Pull Requests" | ||
| icon={faCodePullRequest} | ||
| stats={metrics.openPullRequestsCount.toString()} | ||
| /> | ||
| <DashboardCard | ||
| title="Recent Releases" | ||
| icon={faRocket} | ||
| stats={metrics.recentReleasesCount.toString()} | ||
| /> | ||
| <DashboardCard | ||
| title="Total Releases" | ||
| icon={faTags} | ||
| stats={metrics.totalReleasesCount.toString()} | ||
| /> | ||
| </div> | ||
| <BarChart | ||
| title="Days Metrics" | ||
| icon={faChartArea} | ||
| labels={[ | ||
| 'Age Days', | ||
| 'Last Commit Days', | ||
| 'Last Release Days', | ||
| 'OWASP Page Last Update Days', | ||
| ]} | ||
| days={[ | ||
| metrics.ageDays, | ||
| metrics.lastCommitDays, | ||
| metrics.lastReleaseDays, | ||
| metrics.owaspPageLastUpdateDays, | ||
| ]} | ||
| requirements={[ | ||
| metrics.ageDaysRequirement, | ||
| metrics.lastCommitDaysRequirement, | ||
| metrics.lastReleaseDaysRequirement, | ||
| metrics.owaspPageLastUpdateDaysRequirement, | ||
| ]} | ||
| /> | ||
| </> | ||
| )} | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default ProjectHealthMetricsDetails | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| 'use client' | ||
|
|
||
| import { IconProp } from '@fortawesome/fontawesome-svg-core' | ||
| import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' | ||
| import clsx from 'clsx' | ||
| import { FC } from 'react' | ||
| import SecondaryCard from 'components/SecondaryCard' | ||
|
|
||
| const GeneralCompliantComponent: FC<{ | ||
| readonly icon: IconProp | ||
| readonly compliant: boolean | ||
| }> = ({ icon, compliant }) => { | ||
| const greenClass = 'bg-green-100 dark:bg-green-700 hover:bg-green-200 dark:hover:bg-green-600' | ||
| const redClass = 'bg-red-100 dark:bg-red-700 hover:bg-red-600 dark:hover:bg-red-600' | ||
|
|
||
| return ( | ||
| <SecondaryCard | ||
| className={clsx('pointer-events-auto items-center justify-center text-center font-light', { | ||
| [greenClass]: compliant, | ||
| [redClass]: !compliant, | ||
| })} | ||
| > | ||
| <FontAwesomeIcon icon={icon} className="text-4xl" /> | ||
| </SecondaryCard> | ||
| ) | ||
| } | ||
|
|
||
| export default GeneralCompliantComponent |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import { FC } from 'react' | ||
|
|
||
| const MetricsScoreCircle: FC<{ score: number }> = ({ score }) => { | ||
| let scoreStyle = 'bg-green-400 text-green-900' | ||
| if (score < 50) { | ||
| scoreStyle = 'bg-red-400 text-red-900' | ||
| } else if (score < 75) { | ||
| scoreStyle = 'bg-yellow-400 text-yellow-900' | ||
| } | ||
|
Contributor
There was a problem hiding this comment. 🛠️ Refactor suggestion Extract score thresholds as constants. The magic numbers for score thresholds should be extracted as constants for better maintainability and consistency with the backend thresholds. +const SCORE_THRESHOLD_HEALTHY = 75
+const SCORE_THRESHOLD_NEED_ATTENTION = 50
+
const MetricsScoreCircle: FC<{ score: number }> = ({ score }) => {
let scoreStyle = 'bg-green-400 text-green-900'
- if (score < 50) {
+ if (score < SCORE_THRESHOLD_NEED_ATTENTION) {
scoreStyle = 'bg-red-400 text-red-900'
- } else if (score < 75) {
+ } else if (score < SCORE_THRESHOLD_HEALTHY) {
scoreStyle = 'bg-yellow-400 text-yellow-900'
}🤖 Prompt for AI Agents |
||
| return ( | ||
| <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">{score}</span> | ||
| <span className="text-xs font-semibold uppercase tracking-wide opacity-90">Score</span> | ||
| </div> | ||
| {score < 30 && ( | ||
| <div className="animate-pulse absolute inset-0 rounded-full bg-red-400/20"></div> | ||
| )} | ||
| </div> | ||
| ) | ||
| } | ||
| export default MetricsScoreCircle | ||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.