Skip to content

Fix Dashboards/Metrics in Main View and Reports #29

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
homeles merged 2 commits into from
Mar 4, 2026
Merged

Fix Dashboards/Metrics in Main View and Reports #29

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ee78bae
fix: dashboard metrics and stats view bugs (#21)
lupita-hom Mar 3, 2026
2b6ce46
fix: move useMemo before early returns to fix hooks rule
lupita-hom Mar 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
109 changes: 76 additions & 33 deletions client/src/features/stats/RepositoryStats.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ import {
} from 'chart.js';
import { Bar, Pie, Line } from 'react-chartjs-2';
import apiService from '../../api/apiService';
import { formatDuration } from '../../common/utils/statusHelpers';
import { useNavigate } from 'react-router-dom';

// Register ChartJS components
Expand Down Expand Up @@ -100,7 +101,7 @@ const RepositoryStats = () => {
const successData = orgLabels.map(org => orgStats[org].successfulRuns);
const failureData = orgLabels.map(org => orgStats[org].failedRuns);
const successRates = orgLabels.map(org =>
(orgStats[org].successfulRuns / orgStats[org].totalRuns * 100).toFixed(1)
orgStats[org].totalRuns ? (orgStats[org].successfulRuns / orgStats[org].totalRuns * 100).toFixed(1) : 0
);

return {
Expand Down Expand Up @@ -155,6 +156,40 @@ const RepositoryStats = () => {
fetchStats();
}, []);

// Recent activity trend — uses actual run dates from recentRuns
const trendData = React.useMemo(() => {
if (!stats?.recentRuns) return { labels: [], datasets: [] };
const today = new Date();
const days = Array.from({ length: 7 }, (_, i) => {
const d = new Date();
d.setDate(today.getDate() - (6 - i));
return d.toISOString().split('T')[0];
});

const timeLabels = days.map(date =>
new Date(date).toLocaleDateString('en-US', { weekday: 'short' })
);

const recentRuns = stats.recentRuns || [];
const counts = days.map(date =>
recentRuns.filter(r => r.run?.created_at?.startsWith(date)).length
);

return {
labels: timeLabels,
datasets: [
{
label: 'Workflow Activity',
data: counts,
borderColor: 'rgba(88, 166, 255, 1)',
backgroundColor: 'rgba(88, 166, 255, 0.5)',
tension: 0.4,
fill: true,
}
],
};
}, [stats]);

if (loading) {
return (
<Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50vh' }}>
Expand Down Expand Up @@ -224,28 +259,6 @@ const RepositoryStats = () => {
],
};

// Recent activity trend simulation
const today = new Date();
const timeLabels = Array.from({ length: 7 }, (_, i) => {
const d = new Date();
d.setDate(today.getDate() - (6 - i));
return d.toLocaleDateString('en-US', { weekday: 'short' });
});

const trendData = {
labels: timeLabels,
datasets: [
{
label: 'Workflow Activity',
data: timeLabels.map(() => Math.floor(Math.random() * (stats.totalRuns / 7)) + 1),
borderColor: 'rgba(88, 166, 255, 1)',
backgroundColor: 'rgba(88, 166, 255, 0.5)',
tension: 0.4,
fill: true,
}
],
};

return (
<Box sx={{ pb: 6 }}>
<Box sx={{
Expand Down Expand Up @@ -362,7 +375,7 @@ const RepositoryStats = () => {
</Grid>

{/* Success Rates by Organization */}
<Grid item xs={12}>
<Grid item xs={12} md={6}>
<Paper elevation={0} sx={{
p: 3,
bgcolor: '#161B22',
Expand Down Expand Up @@ -404,6 +417,43 @@ const RepositoryStats = () => {
</Paper>
</Grid>

{/* Weekly Activity Trend */}
<Grid item xs={12} md={6}>
<Paper elevation={0} sx={{
p: 3,
bgcolor: '#161B22',
borderRadius: '12px',
border: '1px solid rgba(240, 246, 252, 0.1)'
}}>
<Typography variant="h6" sx={{ color: '#E6EDF3', mb: 3 }}>
Weekly Activity Trend
</Typography>
<Box sx={{ height: 300 }}>
<Line
data={trendData}
options={{
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: false }
},
scales: {
y: {
beginAtZero: true,
grid: { color: 'rgba(240, 246, 252, 0.1)' },
ticks: { color: '#8B949E' }
},
x: {
grid: { color: 'rgba(240, 246, 252, 0.1)' },
ticks: { color: '#8B949E' }
}
}
}}
/>
</Box>
</Paper>
</Grid>

{/* Organization Details */}
{stats.orgStats && Object.entries(stats.orgStats).map(([orgName, orgData]) => (
<Grid item xs={12} key={orgName}>
Expand Down Expand Up @@ -433,7 +483,7 @@ const RepositoryStats = () => {
Success Rate
</Typography>
<Typography variant="h6" sx={{ color: '#23C562' }}>
{(orgData.successfulRuns / orgData.totalRuns * 100).toFixed(1)}%
{orgData.totalRuns ? (orgData.successfulRuns / orgData.totalRuns * 100).toFixed(1) : 0}%
</Typography>
</CardContent>
</Card>
Expand Down Expand Up @@ -509,7 +559,7 @@ const RepositoryStats = () => {
<Box>
<Typography variant="body2" sx={{ color: '#8B949E' }}>Success Rate</Typography>
<Typography sx={{ color: '#23C562' }}>
{(repo.successfulRuns / repo.totalRuns * 100).toFixed(1)}%
{repo.totalRuns ? (repo.successfulRuns / repo.totalRuns * 100).toFixed(1) : 0}%
</Typography>
</Box>
<Box>
Expand Down Expand Up @@ -537,11 +587,4 @@ const RepositoryStats = () => {
);
};

const formatDuration = (duration) => {
if (!duration) return 'N/A';
const minutes = Math.floor(duration / 60);
const seconds = duration % 60;
return `${minutes}m ${seconds}s`;
};

export default RepositoryStats;
13 changes: 11 additions & 2 deletions server/src/services/workflowService.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,9 +136,10 @@ export const calculateWorkflowStats = async () => {
WorkflowRun.countDocuments({ 'run.conclusion': 'success' }),
WorkflowRun.countDocuments({ 'run.conclusion': 'failure' }),
WorkflowRun.countDocuments({ 'run.status': 'in_progress' }),
WorkflowRun.find()
WorkflowRun.find({
'run.created_at': { $gte: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString() }
})
.sort({ 'run.created_at': -1 })
.limit(5)
.select('repository workflow run')
]);

Expand All @@ -157,6 +158,14 @@ export const calculateWorkflowStats = async () => {
$sum: {
$cond: [{ $eq: ['$run.conclusion', 'failure'] }, 1, 0]
}
},
avgDuration: {
$avg: {
$subtract: [
{ $toDate: '$run.updated_at' },
{ $toDate: '$run.created_at' }
]
}
}
}
},
Expand Down
Loading