feat(dashboard): wire system stats to Core API with live gauges
Build and Push / build (release) Successful in 2m59s
Build and Push / build (release) Successful in 2m59s
- Add SystemStats freezed models matching Core API response - Add systemStatsProvider to fetch stats from /tools/system/stats - Update dashboard to display CPU, RAM, VRAM, and disk usage gauges - Implement color-coded gauges: green ≤50%, orange 51-75%, red >75% - Add auto-refresh every 30 seconds - Improve gauge widget: speedometer style, icons below labels - Update weather widget to match air quality vertical layout 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Opus 4.5
parent
bdced8739c
commit
67fed18cb0
@@ -0,0 +1,91 @@
|
||||
import 'package:freezed_annotation/freezed_annotation.dart';
|
||||
|
||||
part 'system_stats_model.freezed.dart';
|
||||
part 'system_stats_model.g.dart';
|
||||
|
||||
/// System statistics response from Core API.
|
||||
@freezed
|
||||
sealed class SystemStats with _$SystemStats {
|
||||
const factory SystemStats({
|
||||
required CpuStats cpu,
|
||||
required MemoryStats memory,
|
||||
required List<DiskStats> disks,
|
||||
required NetworkStats network,
|
||||
required GpuStats gpu,
|
||||
required String hostname,
|
||||
@JsonKey(name: 'queried_at') required DateTime queriedAt,
|
||||
}) = _SystemStats;
|
||||
|
||||
factory SystemStats.fromJson(Map<String, dynamic> json) =>
|
||||
_$SystemStatsFromJson(json);
|
||||
}
|
||||
|
||||
@freezed
|
||||
sealed class CpuStats with _$CpuStats {
|
||||
const factory CpuStats({
|
||||
@JsonKey(name: 'usage_percent') required double usagePercent,
|
||||
required int cores,
|
||||
@JsonKey(name: 'load_1m') double? load1m,
|
||||
@JsonKey(name: 'load_5m') double? load5m,
|
||||
@JsonKey(name: 'load_15m') double? load15m,
|
||||
}) = _CpuStats;
|
||||
|
||||
factory CpuStats.fromJson(Map<String, dynamic> json) =>
|
||||
_$CpuStatsFromJson(json);
|
||||
}
|
||||
|
||||
@freezed
|
||||
sealed class MemoryStats with _$MemoryStats {
|
||||
const factory MemoryStats({
|
||||
@JsonKey(name: 'usage_percent') required double usagePercent,
|
||||
@JsonKey(name: 'total_bytes') required int totalBytes,
|
||||
@JsonKey(name: 'used_bytes') required int usedBytes,
|
||||
@JsonKey(name: 'available_bytes') required int availableBytes,
|
||||
}) = _MemoryStats;
|
||||
|
||||
factory MemoryStats.fromJson(Map<String, dynamic> json) =>
|
||||
_$MemoryStatsFromJson(json);
|
||||
}
|
||||
|
||||
@freezed
|
||||
sealed class DiskStats with _$DiskStats {
|
||||
const factory DiskStats({
|
||||
@JsonKey(name: 'mount_point') required String mountPoint,
|
||||
required String device,
|
||||
required String fstype,
|
||||
@JsonKey(name: 'usage_percent') required double usagePercent,
|
||||
@JsonKey(name: 'total_bytes') required int totalBytes,
|
||||
@JsonKey(name: 'used_bytes') required int usedBytes,
|
||||
@JsonKey(name: 'free_bytes') required int freeBytes,
|
||||
}) = _DiskStats;
|
||||
|
||||
factory DiskStats.fromJson(Map<String, dynamic> json) =>
|
||||
_$DiskStatsFromJson(json);
|
||||
}
|
||||
|
||||
@freezed
|
||||
sealed class NetworkStats with _$NetworkStats {
|
||||
const factory NetworkStats({
|
||||
@JsonKey(name: 'bytes_sent') required int bytesSent,
|
||||
@JsonKey(name: 'bytes_recv') required int bytesRecv,
|
||||
@JsonKey(name: 'bytes_total') required int bytesTotal,
|
||||
}) = _NetworkStats;
|
||||
|
||||
factory NetworkStats.fromJson(Map<String, dynamic> json) =>
|
||||
_$NetworkStatsFromJson(json);
|
||||
}
|
||||
|
||||
@freezed
|
||||
sealed class GpuStats with _$GpuStats {
|
||||
const factory GpuStats({
|
||||
required bool available,
|
||||
String? name,
|
||||
@JsonKey(name: 'usage_percent') double? usagePercent,
|
||||
@JsonKey(name: 'total_bytes') int? totalBytes,
|
||||
@JsonKey(name: 'used_bytes') int? usedBytes,
|
||||
@JsonKey(name: 'free_bytes') int? freeBytes,
|
||||
}) = _GpuStats;
|
||||
|
||||
factory GpuStats.fromJson(Map<String, dynamic> json) =>
|
||||
_$GpuStatsFromJson(json);
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
import 'package:riverpod_annotation/riverpod_annotation.dart';
|
||||
import 'package:tatlock_ui/core/api/api_client.dart';
|
||||
import 'package:tatlock_ui/features/front_hall/data/models/system_stats_model.dart';
|
||||
|
||||
part 'system_stats_provider.g.dart';
|
||||
|
||||
/// Fetches system stats from Core API.
|
||||
@riverpod
|
||||
Future<SystemStats> systemStats(Ref ref) async {
|
||||
final dio = ref.watch(coreApiClientProvider);
|
||||
|
||||
final response = await dio.get('/tools/system/stats');
|
||||
return SystemStats.fromJson(response.data as Map<String, dynamic>);
|
||||
}
|
||||
@@ -1,16 +1,45 @@
|
||||
import 'dart:async';
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:tatlock_ui/features/front_hall/data/models/system_stats_model.dart';
|
||||
import 'package:tatlock_ui/features/front_hall/presentation/providers/system_stats_provider.dart';
|
||||
import 'package:tatlock_ui/shared/widgets/widgets.dart';
|
||||
import 'package:tatlock_ui/version.g.dart';
|
||||
|
||||
/// Dashboard content shown in Front Hall when mode is dashboard.
|
||||
///
|
||||
/// Displays system stats with gauges, weather, air quality, and version info.
|
||||
class DashboardContent extends StatelessWidget {
|
||||
/// Auto-refreshes system stats every 30 seconds.
|
||||
class DashboardContent extends ConsumerStatefulWidget {
|
||||
const DashboardContent({super.key});
|
||||
|
||||
@override
|
||||
ConsumerState<DashboardContent> createState() => _DashboardContentState();
|
||||
}
|
||||
|
||||
class _DashboardContentState extends ConsumerState<DashboardContent> {
|
||||
Timer? _refreshTimer;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_refreshTimer = Timer.periodic(
|
||||
const Duration(seconds: 30),
|
||||
(_) => ref.invalidate(systemStatsProvider),
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_refreshTimer?.cancel();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
final systemStatsAsync = ref.watch(systemStatsProvider);
|
||||
|
||||
return ListView(
|
||||
padding: const EdgeInsets.all(16),
|
||||
@@ -54,37 +83,33 @@ class DashboardContent extends StatelessWidget {
|
||||
// System Stats - Gauges
|
||||
_SectionHeader(title: 'System Stats', icon: Icons.monitor_heart),
|
||||
const SizedBox(height: 8),
|
||||
Card(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(16),
|
||||
child: GaugeRow(
|
||||
gaugeSize: 90,
|
||||
gauges: [
|
||||
GaugeData(
|
||||
value: 0.35,
|
||||
label: 'CPU',
|
||||
icon: Icons.memory,
|
||||
color: colorScheme.primary,
|
||||
),
|
||||
GaugeData(
|
||||
value: 0.62,
|
||||
label: 'Memory',
|
||||
icon: Icons.storage,
|
||||
color: colorScheme.secondary,
|
||||
),
|
||||
GaugeData(
|
||||
value: 0.78,
|
||||
label: 'Disk',
|
||||
icon: Icons.disc_full,
|
||||
color: colorScheme.tertiary,
|
||||
),
|
||||
GaugeData(
|
||||
value: 0.12,
|
||||
label: 'Network',
|
||||
icon: Icons.wifi,
|
||||
color: Colors.teal,
|
||||
),
|
||||
],
|
||||
systemStatsAsync.when(
|
||||
data: (stats) => _SystemStatsCard(stats: stats),
|
||||
loading: () => const Card(
|
||||
child: Padding(
|
||||
padding: EdgeInsets.all(32),
|
||||
child: Center(child: CircularProgressIndicator()),
|
||||
),
|
||||
),
|
||||
error: (error, _) => Card(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(16),
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(Icons.error_outline, color: colorScheme.error),
|
||||
const SizedBox(width: 12),
|
||||
Expanded(
|
||||
child: Text(
|
||||
'Failed to load system stats',
|
||||
style: TextStyle(color: colorScheme.error),
|
||||
),
|
||||
),
|
||||
IconButton(
|
||||
icon: const Icon(Icons.refresh),
|
||||
onPressed: () => ref.invalidate(systemStatsProvider),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
@@ -165,3 +190,80 @@ class _SectionHeader extends StatelessWidget {
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Card displaying system stats with gauges.
|
||||
class _SystemStatsCard extends StatelessWidget {
|
||||
const _SystemStatsCard({required this.stats});
|
||||
|
||||
final SystemStats stats;
|
||||
|
||||
/// Pastel colors based on usage percentage.
|
||||
static const _pastelGreen = Color(0xFF81C784);
|
||||
static const _pastelOrange = Color(0xFFFFB74D);
|
||||
static const _pastelRed = Color(0xFFE57373);
|
||||
|
||||
/// Returns color based on usage: green ≤50%, orange 51-75%, red >75%.
|
||||
Color _colorForUsage(double percent) {
|
||||
if (percent <= 50) return _pastelGreen;
|
||||
if (percent <= 75) return _pastelOrange;
|
||||
return _pastelRed;
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
// Build gauges list: CPU, Memory, GPU (if available), then all disks
|
||||
final gauges = <GaugeData>[
|
||||
GaugeData(
|
||||
value: stats.cpu.usagePercent / 100,
|
||||
label: 'CPU',
|
||||
icon: Icons.memory,
|
||||
color: _colorForUsage(stats.cpu.usagePercent),
|
||||
),
|
||||
GaugeData(
|
||||
value: stats.memory.usagePercent / 100,
|
||||
label: 'RAM',
|
||||
icon: Icons.storage,
|
||||
color: _colorForUsage(stats.memory.usagePercent),
|
||||
),
|
||||
if (stats.gpu.available && stats.gpu.usagePercent != null)
|
||||
GaugeData(
|
||||
value: stats.gpu.usagePercent! / 100,
|
||||
label: 'VRAM',
|
||||
icon: Icons.videocam,
|
||||
color: _colorForUsage(stats.gpu.usagePercent!),
|
||||
),
|
||||
// Add a gauge for each disk
|
||||
...stats.disks.map(
|
||||
(disk) => GaugeData(
|
||||
value: disk.usagePercent / 100,
|
||||
label: _formatDiskLabel(disk),
|
||||
icon: Icons.disc_full,
|
||||
color: _colorForUsage(disk.usagePercent),
|
||||
),
|
||||
),
|
||||
];
|
||||
|
||||
return Card(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(24),
|
||||
child: GaugeRow(
|
||||
gaugeSize: 120,
|
||||
gauges: gauges,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Formats disk label from mount point.
|
||||
String _formatDiskLabel(DiskStats disk) {
|
||||
final mount = disk.mountPoint;
|
||||
if (mount == '/') return 'Root';
|
||||
if (mount == '/hostfs') return 'Host';
|
||||
if (mount.startsWith('/hostfs/')) return mount.substring(8);
|
||||
if (mount.startsWith('/mnt/')) return mount.substring(5);
|
||||
if (mount.startsWith('/media/')) return mount.substring(7);
|
||||
// Return last path segment
|
||||
final parts = mount.split('/');
|
||||
return parts.isNotEmpty ? parts.last : mount;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user