StrafesNET/dev-service
3
Fork 0
Code Issues 1 Pull Requests Activity

Add better info to rate limit ui
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
itzaname
2025-06-23 02:01:46 -04:00
parent 1e857b5cb7
commit e9db9887a0
3 changed files with 86 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
web/package-lock.json generated
View File

@@ -12,6 +12,7 @@
"@emotion/styled": "^11.14.0",
"@mui/icons-material": "^7.0.1",
"@mui/material": "^7.0.1",
"date-fns": "^4.1.0",
"react": "^19.0.0",
"react-dom": "^19.0.0"
},
@@ -2303,6 +2304,16 @@
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
"license": "MIT"
},
"node_modules/date-fns": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
"integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/kossnocorp"
}
},
"node_modules/debug": {
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",

1
web/package.json
View File

@@ -14,6 +14,7 @@
"@emotion/styled": "^11.14.0",
"@mui/icons-material": "^7.0.1",
"@mui/material": "^7.0.1",
"date-fns": "^4.1.0",
"react": "^19.0.0",
"react-dom": "^19.0.0"
},

76
web/src/components/RateLimitDisplay.tsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import { formatDistanceToNow } from 'date-fns';
import {
Typography,
Tooltip,
@@ -12,7 +12,8 @@ import {
Speed as SpeedIcon,
Today as TodayIcon,
DateRange as DateRangeIcon,
Apps as AppsIcon
Apps as AppsIcon,
Refresh as RefreshIcon
} from '@mui/icons-material';
import {RateLimit, RateLimitStatus} from '../types';
@@ -28,9 +29,30 @@ const RateLimitDisplay: React.FC<RateLimitDisplayProps> = ({ rateLimit, rateLimi
const dailyPercentage = (dailyUsed / rateLimit.daily_limit) * 100;
const monthlyPercentage = (monthlyUsed / rateLimit.monthly_limit) * 100;
// Calculate time until next reset
const calculateTimeUntilReset = () => {
const now = new Date();
// Time until daily reset (next day at 00:00 UTC)
const tomorrow = new Date(now);
tomorrow.setUTCHours(24, 0, 0, 0);
// Time until monthly reset (1st of next month at 00:00 UTC)
const nextMonth = new Date(now);
nextMonth.setUTCMonth(now.getUTCMonth() + 1, 1);
nextMonth.setUTCHours(0, 0, 0, 0);
return {
daily: formatDistanceToNow(tomorrow, { addSuffix: false }),
monthly: formatDistanceToNow(nextMonth, { addSuffix: false })
};
};
const resetTimes = calculateTimeUntilReset();
// Create tooltip content separately without a Paper component
const tooltipContent = (
<Box sx={{ p: 1.5, width: 300 }}>
<Box sx={{ p: 1.5 }}>
<Typography variant="subtitle1" fontWeight="bold" gutterBottom>
API Rate Limits
</Typography>
@@ -72,6 +94,12 @@ const RateLimitDisplay: React.FC<RateLimitDisplayProps> = ({ rateLimit, rateLimi
}
}}
/>
<Box sx={{ display: 'flex', alignItems: 'center', mt: 0.5 }}>
<RefreshIcon fontSize="small" sx={{ mr: 0.5, color: 'text.secondary', fontSize: '0.875rem' }} />
<Typography variant="caption" color="text.secondary">
Resets in {resetTimes.daily}
</Typography>
</Box>
</Box>
</Grid>
@@ -98,6 +126,12 @@ const RateLimitDisplay: React.FC<RateLimitDisplayProps> = ({ rateLimit, rateLimi
}
}}
/>
<Box sx={{ display: 'flex', alignItems: 'center', mt: 0.5 }}>
<RefreshIcon fontSize="small" sx={{ mr: 0.5, color: 'text.secondary', fontSize: '0.875rem' }} />
<Typography variant="caption" color="text.secondary">
Resets in {resetTimes.monthly}
</Typography>
</Box>
</Box>
</Grid>
@@ -156,9 +190,43 @@ const RateLimitDisplay: React.FC<RateLimitDisplayProps> = ({ rateLimit, rateLimi
}}
>
<SpeedIcon fontSize="small" sx={{ mr: 1 }} />
<Box sx={{ display: 'flex', flexDirection: 'column', minWidth: 120 }}>
{dailyPercentage > monthlyPercentage ? (
<>
<Typography variant="body2" fontWeight="medium">
{dailyUsed}/{rateLimit.daily_limit} API calls today
{dailyUsed}/{rateLimit.daily_limit} Daily Limit
</Typography>
<LinearProgress
variant="determinate"
value={dailyPercentage}
sx={{
height: 3,
borderRadius: 1,
'& .MuiLinearProgress-bar': {
backgroundColor: dailyPercentage > 75 ? 'error.main' : 'primary.main'
}
}}
/>
</>
) : (
<>
<Typography variant="body2" fontWeight="medium">
{monthlyUsed}/{rateLimit.monthly_limit} Monthly Limit
</Typography>
<LinearProgress
variant="determinate"
value={monthlyPercentage}
sx={{
height: 3,
borderRadius: 1,
'& .MuiLinearProgress-bar': {
backgroundColor: monthlyPercentage > 75 ? 'error.main' : 'info.main'
}
}}
/>
</>
)}
</Box>
</Box>
</Tooltip>
);