matthias/dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: dashboard layout, widget caching, and backend stability

Browse Source 
Layout:
- Remove Container maxWidth cap so widgets scale fluidly on wide screens
- Fix ActivityFeed Card missing height:100% and overflow:hidden that caused
  the timeline connector pseudo-element to bleed outside the card boundary

Performance (frontend):
- Migrate VehicleDashboardCard, EquipmentDashboardCard, AtemschutzDashboardCard,
  UpcomingEventsWidget, and PersonalWarningsBanner from useEffect+useState to
  TanStack Query — cached for 5 min, so navigating back to the dashboard no
  longer re-fires all 9 API requests
- Add gcTime:10min and refetchOnWindowFocus:false to QueryClient defaults to
  prevent spurious refetches on tab-switch

Backend stability:
- Raise default RATE_LIMIT_MAX from 100 to 300 req/15min — the previous limit
  was easily exceeded by a single active user during normal dashboard navigation
- Increase DB connectionTimeoutMillis from 2s to 5s to handle burst-load
  scenarios where multiple requests compete for pool slots simultaneously

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Matthias Hochmeister
2026-03-03 12:55:16 +01:00
parent d91f757f34
commit 02cf5138cf
10 changed files with 79 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
backend/src/config/database.ts
View File

@@ -16,7 +16,7 @@ const poolConfig: PoolConfig = {
password: environment.database.password,
max: 20, // Maximum number of clients in the pool
idleTimeoutMillis: 30000, // Close idle clients after 30 seconds
connectionTimeoutMillis: 2000, // Return an error if connection takes longer than 2 seconds
connectionTimeoutMillis: 5000, // Return an error if connection takes longer than 5 seconds
};
const pool = new Pool(poolConfig);

2
backend/src/config/environment.ts
View File

@@ -54,7 +54,7 @@ const environment: EnvironmentConfig = {
},
rateLimit: {
windowMs: parseInt(process.env.RATE_LIMIT_WINDOW_MS || '900000', 10), // 15 minutes
max: parseInt(process.env.RATE_LIMIT_MAX || '100', 10),
max: parseInt(process.env.RATE_LIMIT_MAX || '300', 10),
},
authentik: {
issuer: process.env.AUTHENTIK_ISSUER || 'https://auth.firesuite.feuerwehr-rems.at/application/o/feuerwehr-dashboard/',

38
frontend/src/components/atemschutz/AtemschutzDashboardCard.tsx
View File

@@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react';
import React from 'react';
import {
Alert,
AlertTitle,
@@ -10,6 +10,7 @@ import {
Typography,
} from '@mui/material';
import { Link as RouterLink } from 'react-router-dom';
import { useQuery } from '@tanstack/react-query';
import { atemschutzApi } from '../../services/atemschutz';
import type { AtemschutzStats } from '../../types/atemschutz.types';
@@ -20,31 +21,12 @@ interface AtemschutzDashboardCardProps {
const AtemschutzDashboardCard: React.FC<AtemschutzDashboardCardProps> = ({
hideWhenEmpty = false,
}) => {
const [stats, setStats] = useState<AtemschutzStats | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const { data: stats, isLoading, isError } = useQuery<AtemschutzStats>({
queryKey: ['atemschutz-stats'],
queryFn: () => atemschutzApi.getStats(),
});
useEffect(() => {
let mounted = true;
const fetchStats = async () => {
try {
setLoading(true);
setError(null);
const data = await atemschutzApi.getStats();
if (mounted) setStats(data);
} catch {
if (mounted) setError('Atemschutzstatus konnte nicht geladen werden.');
} finally {
if (mounted) setLoading(false);
}
};
fetchStats();
return () => {
mounted = false;
};
}, []);
if (loading) {
if (isLoading) {
return (
<Card>
<CardContent sx={{ display: 'flex', alignItems: 'center', gap: 1, py: 2 }}>
@@ -57,12 +39,12 @@ const AtemschutzDashboardCard: React.FC<AtemschutzDashboardCardProps> = ({
);
}
if (error) {
if (isError) {
return (
<Card>
<CardContent>
<Typography variant="body2" color="error">
{error}
Atemschutzstatus konnte nicht geladen werden.
</Typography>
</CardContent>
</Card>
@@ -71,7 +53,6 @@ const AtemschutzDashboardCard: React.FC<AtemschutzDashboardCardProps> = ({
if (!stats) return null;
// Determine if there are any concerns
const hasConcerns =
stats.untersuchungAbgelaufen > 0 ||
stats.leistungstestAbgelaufen > 0 ||
@@ -80,7 +61,6 @@ const AtemschutzDashboardCard: React.FC<AtemschutzDashboardCardProps> = ({
const allGood = stats.einsatzbereit === stats.total && !hasConcerns;
// If hideWhenEmpty and everything is fine, render nothing
if (hideWhenEmpty && allGood) return null;
return (

4
frontend/src/components/dashboard/ActivityFeed.tsx
View File

@@ -89,7 +89,7 @@ const ActivityFeed: React.FC = () => {
};
return (
<Card>
<Card sx={{ height: '100%', overflow: 'hidden' }}>
<CardContent>
<Typography variant="h6" gutterBottom>
Letzte Aktivitäten
@@ -110,7 +110,7 @@ const ActivityFeed: React.FC = () => {
position: 'absolute',
left: 19,
top: 56,
bottom: -8,
bottom: 0,
width: 2,
bgcolor: 'divider',
}

39
frontend/src/components/dashboard/PersonalWarningsBanner.tsx
View File

@@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react';
import React from 'react';
import {
Alert,
AlertTitle,
@@ -10,6 +10,7 @@ import {
} from '@mui/material';
import { NotificationsActive as NotificationsActiveIcon } from '@mui/icons-material';
import { Link as RouterLink } from 'react-router-dom';
import { useQuery } from '@tanstack/react-query';
import { atemschutzApi } from '../../services/atemschutz';
import type { User } from '../../types/auth.types';
import type { AtemschutzUebersicht } from '../../types/atemschutz.types';
@@ -74,33 +75,14 @@ interface PersonalWarningsBannerProps {
}
const PersonalWarningsBanner: React.FC<PersonalWarningsBannerProps> = ({ user: _user, onWarningCount }) => {
const [record, setRecord] = useState<AtemschutzUebersicht | null>(null);
const [loading, setLoading] = useState(true);
const [fetchError, setFetchError] = useState<string | null>(null);
useEffect(() => {
let mounted = true;
const fetchStatus = async () => {
try {
setLoading(true);
setFetchError(null);
const data = await atemschutzApi.getMyStatus();
if (mounted) setRecord(data);
} catch {
if (mounted) setFetchError('Persönlicher Atemschutz-Status konnte nicht geladen werden.');
} finally {
if (mounted) setLoading(false);
}
};
fetchStatus();
return () => { mounted = false; };
}, []);
const { data: record, isLoading } = useQuery<AtemschutzUebersicht | null>({
queryKey: ['atemschutz-my-status'],
queryFn: () => atemschutzApi.getMyStatus(),
});
// ── Loading state ──────────────────────────────────────────────────────────
if (loading) {
if (isLoading) {
return (
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, py: 1 }}>
<CircularProgress size={16} />
@@ -111,13 +93,6 @@ const PersonalWarningsBanner: React.FC<PersonalWarningsBannerProps> = ({ user: _
);
}
// ── Fetch error ────────────────────────────────────────────────────────────
if (fetchError) {
// Non-critical — silently swallow so the dashboard still loads cleanly.
return null;
}
// ── No atemschutz record for this user ─────────────────────────────────────
if (!record) return null;

51
frontend/src/components/dashboard/UpcomingEventsWidget.tsx
View File

@@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react';
import React from 'react';
import {
Box,
Card,
@@ -13,6 +13,7 @@ import {
} from '@mui/material';
import { CalendarMonth as CalendarMonthIcon } from '@mui/icons-material';
import { Link as RouterLink } from 'react-router-dom';
import { useQuery } from '@tanstack/react-query';
import { trainingApi } from '../../services/training';
import { eventsApi } from '../../services/events';
import type { UebungListItem, UebungTyp } from '../../types/training.types';
@@ -106,28 +107,23 @@ const FETCH_LIMIT = 20; // fetch more than 5 so filtering from today leaves enou
const DISPLAY_LIMIT = 5;
const UpcomingEventsWidget: React.FC = () => {
const [entries, setEntries] = useState<CalendarEntry[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const { data: trainingItems = [], isLoading: trainingLoading, isError: trainingError } = useQuery<UebungListItem[]>({
queryKey: ['upcoming-trainings'],
queryFn: () => trainingApi.getUpcoming(FETCH_LIMIT),
});
useEffect(() => {
let mounted = true;
const { data: eventItems = [], isLoading: eventsLoading, isError: eventsError } = useQuery<VeranstaltungListItem[]>({
queryKey: ['upcoming-events'],
queryFn: () => eventsApi.getUpcoming(FETCH_LIMIT),
});
const fetchData = async () => {
try {
setLoading(true);
setError(null);
const [trainingItems, eventItems] = await Promise.all([
trainingApi.getUpcoming(FETCH_LIMIT),
eventsApi.getUpcoming(FETCH_LIMIT),
]);
if (!mounted) return;
const loading = trainingLoading || eventsLoading;
const error = trainingError || eventsError;
const entries = React.useMemo(() => {
if (loading) return [];
const today = startOfToday();
const combined: CalendarEntry[] = [
return [
...trainingItems
.filter((t) => !t.abgesagt)
.map(mapTraining),
@@ -138,20 +134,7 @@ const UpcomingEventsWidget: React.FC = () => {
.filter((e) => e.date >= today)
.sort((a, b) => a.date.getTime() - b.date.getTime())
.slice(0, DISPLAY_LIMIT);
setEntries(combined);
} catch {
if (mounted) setError('Termine konnten nicht geladen werden.');
} finally {
if (mounted) setLoading(false);
}
};
fetchData();
return () => {
mounted = false;
};
}, []);
}, [trainingItems, eventItems, loading]);
// ── Loading state ─────────────────────────────────────────────────────────
if (loading) {
@@ -177,7 +160,7 @@ const UpcomingEventsWidget: React.FC = () => {
<Typography variant="h6">Nächste Termine</Typography>
</Box>
<Typography variant="body2" color="error">
{error}
Termine konnten nicht geladen werden.
</Typography>
</CardContent>
</Card>

36
frontend/src/components/equipment/EquipmentDashboardCard.tsx
View File

@@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react';
import React from 'react';
import {
Alert,
AlertTitle,
@@ -10,6 +10,7 @@ import {
Typography,
} from '@mui/material';
import { Link as RouterLink } from 'react-router-dom';
import { useQuery } from '@tanstack/react-query';
import { equipmentApi } from '../../services/equipment';
import type { EquipmentStats } from '../../types/equipment.types';
@@ -20,31 +21,12 @@ interface EquipmentDashboardCardProps {
const EquipmentDashboardCard: React.FC<EquipmentDashboardCardProps> = ({
hideWhenEmpty = false,
}) => {
const [stats, setStats] = useState<EquipmentStats | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const { data: stats, isLoading, isError } = useQuery<EquipmentStats>({
queryKey: ['equipment-stats'],
queryFn: () => equipmentApi.getStats(),
});
useEffect(() => {
let mounted = true;
const fetchStats = async () => {
try {
setLoading(true);
setError(null);
const data = await equipmentApi.getStats();
if (mounted) setStats(data);
} catch {
if (mounted) setError('Ausrüstungsstatus konnte nicht geladen werden.');
} finally {
if (mounted) setLoading(false);
}
};
fetchStats();
return () => {
mounted = false;
};
}, []);
if (loading) {
if (isLoading) {
return (
<Card>
<CardContent sx={{ display: 'flex', alignItems: 'center', gap: 1, py: 2 }}>
@@ -57,12 +39,12 @@ const EquipmentDashboardCard: React.FC<EquipmentDashboardCardProps> = ({
);
}
if (error) {
if (isError) {
return (
<Card>
<CardContent>
<Typography variant="body2" color="error">
{error}
Ausrüstungsstatus konnte nicht geladen werden.
</Typography>
</CardContent>
</Card>

55
frontend/src/components/vehicles/VehicleDashboardCard.tsx
View File

@@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react';
import React from 'react';
import {
Alert,
AlertTitle,
@@ -10,6 +10,7 @@ import {
Typography,
} from '@mui/material';
import { Link as RouterLink } from 'react-router-dom';
import { useQuery } from '@tanstack/react-query';
import { vehiclesApi } from '../../services/vehicles';
import { equipmentApi } from '../../services/equipment';
import type { VehicleStats, InspectionAlert } from '../../types/vehicle.types';
@@ -22,39 +23,22 @@ interface VehicleDashboardCardProps {
const VehicleDashboardCard: React.FC<VehicleDashboardCardProps> = ({
hideWhenEmpty = false,
}) => {
const [stats, setStats] = useState<VehicleStats | null>(null);
const [alerts, setAlerts] = useState<InspectionAlert[]>([]);
const [equipmentWarnings, setEquipmentWarnings] = useState<VehicleEquipmentWarning[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const { data: stats, isLoading: statsLoading, isError: statsError } = useQuery<VehicleStats>({
queryKey: ['vehicle-stats'],
queryFn: () => vehiclesApi.getStats(),
});
useEffect(() => {
let mounted = true;
const fetchData = async () => {
try {
setLoading(true);
setError(null);
const [statsData, alertsData, warningsData] = await Promise.all([
vehiclesApi.getStats(),
vehiclesApi.getAlerts(30),
equipmentApi.getVehicleWarnings(),
]);
if (mounted) {
setStats(statsData);
setAlerts(alertsData);
setEquipmentWarnings(warningsData);
}
} catch {
if (mounted) setError('Fahrzeugstatus konnte nicht geladen werden.');
} finally {
if (mounted) setLoading(false);
}
};
fetchData();
return () => {
mounted = false;
};
}, []);
const { data: alerts = [], isLoading: alertsLoading } = useQuery<InspectionAlert[]>({
queryKey: ['vehicle-alerts'],
queryFn: () => vehiclesApi.getAlerts(30),
});
const { data: equipmentWarnings = [], isLoading: warningsLoading } = useQuery<VehicleEquipmentWarning[]>({
queryKey: ['vehicle-equipment-warnings'],
queryFn: () => equipmentApi.getVehicleWarnings(),
});
const loading = statsLoading || alertsLoading || warningsLoading;
if (loading) {
return (
@@ -69,12 +53,12 @@ const VehicleDashboardCard: React.FC<VehicleDashboardCardProps> = ({
);
}
if (error) {
if (statsError) {
return (
<Card>
<CardContent>
<Typography variant="body2" color="error">
{error}
Fahrzeugstatus konnte nicht geladen werden.
</Typography>
</CardContent>
</Card>
@@ -94,7 +78,6 @@ const VehicleDashboardCard: React.FC<VehicleDashboardCardProps> = ({
const allGood = stats.einsatzbereit === stats.total && !hasConcerns;
// If hideWhenEmpty and everything is fine, render nothing
if (hideWhenEmpty && allGood) return null;
return (

2
frontend/src/main.tsx
View File

@@ -10,7 +10,9 @@ const queryClient = new QueryClient({
defaultOptions: {
queries: {
staleTime: 5 * 60 * 1000, // 5 minutes
gcTime: 10 * 60 * 1000, // keep cache 10 minutes
retry: 1,
refetchOnWindowFocus: false, // prevent refetch on every tab switch
},
},
});

2
frontend/src/pages/Dashboard.tsx
View File

@@ -32,7 +32,7 @@ function Dashboard() {
return (
<DashboardLayout>
<Container maxWidth="xl">
<Container maxWidth={false} disableGutters>
<Grid container spacing={3}>
{/* Welcome Message */}
<Grid item xs={12}>