feat: implement controller health checks (Phase 2.2)

Add comprehensive controller health monitoring functionality with
real-time visual indicators and auto-refresh capabilities.

Features:
- Health check API with 5-second timeout
- Latency tracking and version detection
- ControllerStatus component with color-coded indicators
- Auto-refresh with configurable intervals
- Integration with SettingsPage and SealingKeysView

Technical details:
- AbortController for proper timeout handling
- Never-fail API (always returns status)
- Three states: Healthy (green), Unhealthy (yellow), Unreachable (red)
- Detailed tooltips with error messages
- Response time display in milliseconds
- Version information from X-Controller-Version header

Files:
- src/lib/controller.ts: Add checkControllerHealth() (+58 lines)
- src/components/ControllerStatus.tsx: NEW component (+117 lines)
- src/components/SettingsPage.tsx: Add status display
- src/components/SealingKeysView.tsx: Add status to header
- PHASE_2.2_COMPLETE.md: Implementation documentation

Bundle size: 346.65 kB (95.49 kB gzipped), +2.7 kB (+0.8%)
Build time: 3.94s (improved!)
Zero TypeScript/lint errors

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
This commit is contained in:
2026-02-11 21:41:09 -05:00
parent cc08e15f6a
commit d17e2485fb
5 changed files with 595 additions and 2 deletions
@@ -5,11 +5,12 @@
*/
import { SectionBox } from '@kinvolk/headlamp-plugin/lib/CommonComponents';
import { Box, Button, TextField, Typography } from '@mui/material';
import { Box, Button, Divider, TextField, Typography } from '@mui/material';
import { useSnackbar } from 'notistack';
import React from 'react';
import { getPluginConfig, savePluginConfig } from '../lib/controller';
import { PluginConfig } from '../types';
import { ControllerStatus } from './ControllerStatus';
/**
* Settings page component
@@ -42,6 +43,16 @@ export function SettingsPage() {
your browser's local storage.
</Typography>
{/* Controller Health Status */}
<Box mb={3} p={2} bgcolor="background.paper" borderRadius={1} border={1} borderColor="divider">
<Typography variant="subtitle2" gutterBottom>
Controller Status
</Typography>
<ControllerStatus autoRefresh showDetails />
</Box>
<Divider sx={{ mb: 3 }} />
<TextField
fullWidth
label="Controller Name"