Performance optimizations and dashboard redesign
- Add continuous sensor collector with parallel IPMI operations - Implement TTL cache for fast web UI responses - Add timeouts to prevent hanging on slow servers - Add automatic database cleanup for old sensor data - Optimize frontend polling intervals (30s/60s instead of 5s/10s) - Move fan curve management to Server Detail Fan Control tab - Fix SSH sensor parsing for nested JSON from lm-sensors - Fix power consumption display for Dell powermonitor output - Add server overview grid to dashboard with temp/fan/power metrics - Add database indexes for faster queries
This commit is contained in:
ImpulsiveFPS
parent
505d19a439
commit
7c5b44539f
|
|
@ -0,0 +1,63 @@
|
|||
"""Simple in-memory cache for expensive operations."""
|
||||
import time
|
||||
import hashlib
|
||||
import json
|
||||
from typing import Any, Optional, Callable
|
||||
import threading
|
||||
|
||||
class Cache:
|
||||
"""Thread-safe in-memory cache with TTL."""
|
||||
|
||||
def __init__(self):
|
||||
self._cache: dict = {}
|
||||
self._lock = threading.Lock()
|
||||
|
||||
def get(self, key: str) -> Optional[Any]:
|
||||
"""Get value from cache if not expired."""
|
||||
with self._lock:
|
||||
if key not in self._cache:
|
||||
return None
|
||||
|
||||
entry = self._cache[key]
|
||||
if entry['expires'] < time.time():
|
||||
del self._cache[key]
|
||||
return None
|
||||
|
||||
return entry['value']
|
||||
|
||||
def set(self, key: str, value: Any, ttl: int = 60):
|
||||
"""Set value in cache with TTL (seconds)."""
|
||||
with self._lock:
|
||||
self._cache[key] = {
|
||||
'value': value,
|
||||
'expires': time.time() + ttl
|
||||
}
|
||||
|
||||
def delete(self, key: str):
|
||||
"""Delete key from cache."""
|
||||
with self._lock:
|
||||
if key in self._cache:
|
||||
del self._cache[key]
|
||||
|
||||
def clear(self):
|
||||
"""Clear all cache."""
|
||||
with self._lock:
|
||||
self._cache.clear()
|
||||
|
||||
def get_or_set(self, key: str, factory: Callable, ttl: int = 60) -> Any:
|
||||
"""Get from cache or call factory and cache result."""
|
||||
value = self.get(key)
|
||||
if value is not None:
|
||||
return value
|
||||
|
||||
value = factory()
|
||||
self.set(key, value, ttl)
|
||||
return value
|
||||
|
||||
# Global cache instance
|
||||
cache = Cache()
|
||||
|
||||
def make_key(*args, **kwargs) -> str:
|
||||
"""Create cache key from arguments."""
|
||||
key_data = json.dumps({'args': args, 'kwargs': kwargs}, sort_keys=True, default=str)
|
||||
return hashlib.md5(key_data.encode()).hexdigest()
|
||||
|
|
@ -0,0 +1,541 @@
|
|||
import { useState } from 'react';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import {
|
||||
Box,
|
||||
Typography,
|
||||
Paper,
|
||||
Grid,
|
||||
Button,
|
||||
List,
|
||||
ListItem,
|
||||
ListItemText,
|
||||
ListItemButton,
|
||||
IconButton,
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
DialogContent,
|
||||
DialogActions,
|
||||
TextField,
|
||||
Chip,
|
||||
FormControl,
|
||||
InputLabel,
|
||||
Select,
|
||||
MenuItem,
|
||||
Alert,
|
||||
Card,
|
||||
CardContent,
|
||||
Tooltip,
|
||||
} from '@mui/material';
|
||||
import {
|
||||
Add as AddIcon,
|
||||
Delete as DeleteIcon,
|
||||
Edit as EditIcon,
|
||||
PlayArrow as PlayIcon,
|
||||
Stop as StopIcon,
|
||||
ShowChart as ChartIcon,
|
||||
} from '@mui/icons-material';
|
||||
import { fanCurvesApi, fanControlApi } from '../utils/api';
|
||||
import type { FanCurve, FanCurvePoint, Server } from '../types';
|
||||
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip as ChartTooltip, ResponsiveContainer } from 'recharts';
|
||||
|
||||
interface FanCurveManagerProps {
|
||||
serverId: number;
|
||||
server: Server;
|
||||
}
|
||||
|
||||
export default function FanCurveManager({ serverId, server }: FanCurveManagerProps) {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const [selectedCurve, setSelectedCurve] = useState<FanCurve | null>(null);
|
||||
const [openDialog, setOpenDialog] = useState(false);
|
||||
const [editingCurve, setEditingCurve] = useState<FanCurve | null>(null);
|
||||
const [error, setError] = useState('');
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
sensor_source: 'cpu',
|
||||
points: [
|
||||
{ temp: 30, speed: 10 },
|
||||
{ temp: 40, speed: 20 },
|
||||
{ temp: 50, speed: 35 },
|
||||
{ temp: 60, speed: 50 },
|
||||
{ temp: 70, speed: 70 },
|
||||
{ temp: 80, speed: 100 },
|
||||
] as FanCurvePoint[],
|
||||
});
|
||||
|
||||
const { data: curves, isLoading } = useQuery({
|
||||
queryKey: ['fan-curves', serverId],
|
||||
queryFn: async () => {
|
||||
const response = await fanCurvesApi.getAll(serverId);
|
||||
return response.data;
|
||||
},
|
||||
});
|
||||
|
||||
const createMutation = useMutation({
|
||||
mutationFn: (data: { name: string; curve_data: FanCurvePoint[]; sensor_source: string; is_active: boolean }) =>
|
||||
fanCurvesApi.create(serverId, data),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['fan-curves', serverId] });
|
||||
handleCloseDialog();
|
||||
},
|
||||
onError: (error: any) => {
|
||||
setError(error.response?.data?.detail || 'Failed to create fan curve');
|
||||
},
|
||||
});
|
||||
|
||||
const updateMutation = useMutation({
|
||||
mutationFn: ({ curveId, data }: { curveId: number; data: any }) =>
|
||||
fanCurvesApi.update(serverId, curveId, data),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['fan-curves', serverId] });
|
||||
handleCloseDialog();
|
||||
},
|
||||
onError: (error: any) => {
|
||||
setError(error.response?.data?.detail || 'Failed to update fan curve');
|
||||
},
|
||||
});
|
||||
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: (curveId: number) => fanCurvesApi.delete(serverId, curveId),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['fan-curves', serverId] });
|
||||
if (selectedCurve?.id) {
|
||||
setSelectedCurve(null);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const enableAutoMutation = useMutation({
|
||||
mutationFn: (curveId: number) =>
|
||||
fanControlApi.enableAuto(serverId, { enabled: true, curve_id: curveId }),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['server', serverId] });
|
||||
},
|
||||
});
|
||||
|
||||
const disableAutoMutation = useMutation({
|
||||
mutationFn: () => fanControlApi.disableAuto(serverId),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['server', serverId] });
|
||||
},
|
||||
});
|
||||
|
||||
const handleOpenDialog = (curve?: FanCurve) => {
|
||||
setError('');
|
||||
if (curve) {
|
||||
setEditingCurve(curve);
|
||||
setFormData({
|
||||
name: curve.name,
|
||||
sensor_source: curve.sensor_source,
|
||||
points: curve.curve_data,
|
||||
});
|
||||
} else {
|
||||
setEditingCurve(null);
|
||||
setFormData({
|
||||
name: '',
|
||||
sensor_source: 'cpu',
|
||||
points: [
|
||||
{ temp: 30, speed: 10 },
|
||||
{ temp: 40, speed: 20 },
|
||||
{ temp: 50, speed: 35 },
|
||||
{ temp: 60, speed: 50 },
|
||||
{ temp: 70, speed: 70 },
|
||||
{ temp: 80, speed: 100 },
|
||||
],
|
||||
});
|
||||
}
|
||||
setOpenDialog(true);
|
||||
};
|
||||
|
||||
const handleCloseDialog = () => {
|
||||
setOpenDialog(false);
|
||||
setEditingCurve(null);
|
||||
setError('');
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
setError('');
|
||||
|
||||
if (!formData.name.trim()) {
|
||||
setError('Curve name is required');
|
||||
return;
|
||||
}
|
||||
|
||||
if (formData.points.length < 2) {
|
||||
setError('At least 2 points are required');
|
||||
return;
|
||||
}
|
||||
|
||||
for (const point of formData.points) {
|
||||
if (point.speed < 0 || point.speed > 100) {
|
||||
setError('Fan speed must be between 0 and 100');
|
||||
return;
|
||||
}
|
||||
if (point.temp < 0 || point.temp > 150) {
|
||||
setError('Temperature must be between 0 and 150');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const data = {
|
||||
name: formData.name.trim(),
|
||||
curve_data: formData.points,
|
||||
sensor_source: formData.sensor_source,
|
||||
is_active: true,
|
||||
};
|
||||
|
||||
if (editingCurve) {
|
||||
updateMutation.mutate({ curveId: editingCurve.id, data });
|
||||
} else {
|
||||
createMutation.mutate(data);
|
||||
}
|
||||
};
|
||||
|
||||
const updatePoint = (index: number, field: keyof FanCurvePoint, value: number) => {
|
||||
const newPoints = [...formData.points];
|
||||
newPoints[index] = { ...newPoints[index], [field]: value };
|
||||
setFormData({ ...formData, points: newPoints });
|
||||
};
|
||||
|
||||
const addPoint = () => {
|
||||
setFormData({
|
||||
...formData,
|
||||
points: [...formData.points, { temp: 50, speed: 50 }],
|
||||
});
|
||||
};
|
||||
|
||||
const removePoint = (index: number) => {
|
||||
if (formData.points.length > 2) {
|
||||
setFormData({
|
||||
...formData,
|
||||
points: formData.points.filter((_, i) => i !== index),
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const isActiveCurve = (curve: FanCurve) => {
|
||||
return server.auto_control_enabled && selectedCurve?.id === curve.id;
|
||||
};
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardContent>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
|
||||
<Typography variant="h6">
|
||||
<ChartIcon sx={{ mr: 1, verticalAlign: 'middle' }} />
|
||||
Fan Curves
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', gap: 1 }}>
|
||||
{server.auto_control_enabled ? (
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="error"
|
||||
size="small"
|
||||
startIcon={<StopIcon />}
|
||||
onClick={() => disableAutoMutation.mutate()}
|
||||
>
|
||||
Stop Auto
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
variant="outlined"
|
||||
size="small"
|
||||
startIcon={<PlayIcon />}
|
||||
onClick={() => selectedCurve && enableAutoMutation.mutate(selectedCurve.id)}
|
||||
disabled={!selectedCurve}
|
||||
>
|
||||
Start Auto
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="contained"
|
||||
size="small"
|
||||
startIcon={<AddIcon />}
|
||||
onClick={() => handleOpenDialog()}
|
||||
>
|
||||
New Curve
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{server.auto_control_enabled && (
|
||||
<Alert severity="success" sx={{ mb: 2 }}>
|
||||
Automatic fan control is active
|
||||
{selectedCurve && ` - Using "${selectedCurve.name}"`}
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<Grid container spacing={2}>
|
||||
{/* Curve List */}
|
||||
<Grid item xs={12} md={5}>
|
||||
<Paper variant="outlined">
|
||||
<List dense>
|
||||
{isLoading ? (
|
||||
<ListItem>
|
||||
<ListItemText primary="Loading..." />
|
||||
</ListItem>
|
||||
) : curves?.length === 0 ? (
|
||||
<ListItem>
|
||||
<ListItemText
|
||||
primary="No fan curves"
|
||||
secondary="Create a curve to enable automatic fan control"
|
||||
/>
|
||||
</ListItem>
|
||||
) : (
|
||||
curves?.map((curve) => (
|
||||
<ListItem
|
||||
key={curve.id}
|
||||
secondaryAction={
|
||||
<Box>
|
||||
<Tooltip title="Edit">
|
||||
<IconButton
|
||||
edge="end"
|
||||
size="small"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleOpenDialog(curve);
|
||||
}}
|
||||
>
|
||||
<EditIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Tooltip title="Delete">
|
||||
<IconButton
|
||||
edge="end"
|
||||
size="small"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
if (confirm('Delete this fan curve?')) {
|
||||
deleteMutation.mutate(curve.id);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<DeleteIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
}
|
||||
disablePadding
|
||||
>
|
||||
<ListItemButton
|
||||
selected={selectedCurve?.id === curve.id}
|
||||
onClick={() => setSelectedCurve(curve)}
|
||||
>
|
||||
<ListItemText
|
||||
primary={
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
{curve.name}
|
||||
{isActiveCurve(curve) && (
|
||||
<Chip size="small" color="success" label="Active" />
|
||||
)}
|
||||
</Box>
|
||||
}
|
||||
secondary={
|
||||
<Box component="span" sx={{ display: 'flex', gap: 0.5, mt: 0.5 }}>
|
||||
<Chip size="small" label={curve.sensor_source} variant="outlined" />
|
||||
<Chip size="small" label={`${curve.curve_data.length} points`} variant="outlined" />
|
||||
</Box>
|
||||
}
|
||||
/>
|
||||
</ListItemButton>
|
||||
</ListItem>
|
||||
))
|
||||
)}
|
||||
</List>
|
||||
</Paper>
|
||||
</Grid>
|
||||
|
||||
{/* Curve Preview */}
|
||||
<Grid item xs={12} md={7}>
|
||||
<Paper variant="outlined" sx={{ p: 2, height: 280 }}>
|
||||
{selectedCurve ? (
|
||||
<>
|
||||
<Typography variant="subtitle1" gutterBottom>
|
||||
{selectedCurve.name}
|
||||
</Typography>
|
||||
<ResponsiveContainer width="100%" height="85%">
|
||||
<LineChart
|
||||
data={selectedCurve.curve_data.map((p) => ({
|
||||
...p,
|
||||
label: `${p.temp}°C`,
|
||||
}))}
|
||||
margin={{ top: 5, right: 20, left: 0, bottom: 5 }}
|
||||
>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis
|
||||
dataKey="temp"
|
||||
label={{ value: 'Temp (°C)', position: 'insideBottom', offset: -5 }}
|
||||
type="number"
|
||||
domain={[0, 'dataMax + 10']}
|
||||
/>
|
||||
<YAxis
|
||||
label={{ value: 'Fan %', angle: -90, position: 'insideLeft' }}
|
||||
domain={[0, 100]}
|
||||
/>
|
||||
<ChartTooltip
|
||||
formatter={(value: number, name: string) => [
|
||||
name === 'speed' ? `${value}%` : `${value}°C`,
|
||||
name === 'speed' ? 'Fan Speed' : 'Temperature',
|
||||
]}
|
||||
/>
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="speed"
|
||||
stroke="#8884d8"
|
||||
strokeWidth={2}
|
||||
dot={{ r: 5 }}
|
||||
activeDot={{ r: 7 }}
|
||||
/>
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</>
|
||||
) : (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
height: '100%',
|
||||
}}
|
||||
>
|
||||
<Typography color="text.secondary">
|
||||
Select a fan curve to preview
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</Paper>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
{/* Create/Edit Dialog */}
|
||||
<Dialog open={openDialog} onClose={handleCloseDialog} maxWidth="md" fullWidth>
|
||||
<DialogTitle>
|
||||
{editingCurve ? 'Edit Fan Curve' : 'Create Fan Curve'}
|
||||
</DialogTitle>
|
||||
<DialogContent>
|
||||
{error && (
|
||||
<Alert severity="error" sx={{ mb: 2 }}>
|
||||
{error}
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Curve Name"
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
margin="normal"
|
||||
required
|
||||
error={!formData.name && !!error}
|
||||
/>
|
||||
<FormControl fullWidth margin="normal">
|
||||
<InputLabel>Sensor Source</InputLabel>
|
||||
<Select
|
||||
value={formData.sensor_source}
|
||||
label="Sensor Source"
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, sensor_source: e.target.value })
|
||||
}
|
||||
>
|
||||
<MenuItem value="cpu">CPU Temperature</MenuItem>
|
||||
<MenuItem value="inlet">Inlet/Ambient Temperature</MenuItem>
|
||||
<MenuItem value="exhaust">Exhaust Temperature</MenuItem>
|
||||
<MenuItem value="highest">Highest Temperature</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
<Typography variant="h6" sx={{ mt: 3, mb: 2 }}>
|
||||
Curve Points
|
||||
</Typography>
|
||||
|
||||
<Grid container spacing={2}>
|
||||
{formData.points.map((point, index) => (
|
||||
<Grid item xs={12} key={index}>
|
||||
<Box sx={{ display: 'flex', gap: 2, alignItems: 'center' }}>
|
||||
<TextField
|
||||
type="number"
|
||||
label="Temperature (°C)"
|
||||
value={point.temp}
|
||||
onChange={(e) =>
|
||||
updatePoint(index, 'temp', parseInt(e.target.value) || 0)
|
||||
}
|
||||
sx={{ flex: 1 }}
|
||||
inputProps={{ min: 0, max: 150 }}
|
||||
/>
|
||||
<TextField
|
||||
type="number"
|
||||
label="Fan Speed (%)"
|
||||
value={point.speed}
|
||||
onChange={(e) =>
|
||||
updatePoint(index, 'speed', parseInt(e.target.value) || 0)
|
||||
}
|
||||
sx={{ flex: 1 }}
|
||||
inputProps={{ min: 0, max: 100 }}
|
||||
/>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="error"
|
||||
onClick={() => removePoint(index)}
|
||||
disabled={formData.points.length <= 2}
|
||||
>
|
||||
Remove
|
||||
</Button>
|
||||
</Box>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={addPoint}
|
||||
sx={{ mt: 2 }}
|
||||
startIcon={<AddIcon />}
|
||||
>
|
||||
Add Point
|
||||
</Button>
|
||||
|
||||
{/* Preview Chart */}
|
||||
<Typography variant="h6" sx={{ mt: 3, mb: 1 }}>
|
||||
Preview
|
||||
</Typography>
|
||||
<Paper variant="outlined" sx={{ p: 2, height: 200 }}>
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<LineChart
|
||||
data={formData.points}
|
||||
margin={{ top: 5, right: 20, left: 0, bottom: 5 }}
|
||||
>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis dataKey="temp" type="number" domain={[0, 'dataMax + 10']} />
|
||||
<YAxis domain={[0, 100]} />
|
||||
<ChartTooltip
|
||||
formatter={(value: number, name: string) => [
|
||||
name === 'speed' ? `${value}%` : `${value}°C`,
|
||||
name === 'speed' ? 'Fan Speed' : 'Temperature',
|
||||
]}
|
||||
/>
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="speed"
|
||||
stroke="#8884d8"
|
||||
strokeWidth={2}
|
||||
dot={{ r: 5 }}
|
||||
/>
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</Paper>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={handleCloseDialog}>Cancel</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={handleSubmit}
|
||||
disabled={createMutation.isPending || updateMutation.isPending}
|
||||
>
|
||||
{editingCurve ? 'Update' : 'Create'}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue