feat: add Control Room with containers and stacks management

- Add Control Room page with stacks sidebar and containers list
- Implement container actions (start/stop/restart) with snackbars
- Add container logs viewer dialog
- Add search/filter for both stacks and containers lists
- Add external links for Portainer and Netdata (url_launcher)
- Add VS Code launch configuration for Flutter web debugging

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Jeroen Schweitzer
2025-12-31 02:01:01 +01:00
co-authored by Claude Opus 4.5
parent dd6bcbdbda
commit 3b89ed8c18
42 changed files with 4166 additions and 21 deletions
@@ -0,0 +1,35 @@
import 'package:riverpod_annotation/riverpod_annotation.dart';
import '../../data/repositories/stack_repository_impl.dart';
import '../../domain/entities/stack.dart';
part 'stacks_provider.g.dart';
/// Provides the list of all stacks.
@riverpod
Future<List<Stack>> stacks(StacksRef ref) async {
final repository = ref.watch(stackRepositoryProvider);
return repository.getStacks();
}
/// Provides a single stack by ID.
@riverpod
Future<Stack> stack(StackRef ref, String id) async {
final repository = ref.watch(stackRepositoryProvider);
return repository.getStack(id);
}
/// Currently selected stack ID (null = all containers).
@riverpod
class SelectedStack extends _$SelectedStack {
@override
String? build() => null;
void select(String? stackId) {
state = stackId;
}
void clear() {
state = null;
}
}
@@ -0,0 +1,131 @@
import 'package:flutter/material.dart' hide Stack;
import '../../domain/entities/stack.dart';
/// List tile for displaying a stack in the sidebar.
class StackListTile extends StatelessWidget {
const StackListTile({
super.key,
required this.stack,
required this.isSelected,
required this.onTap,
this.onStart,
this.onStop,
this.onRestart,
});
final Stack stack;
final bool isSelected;
final VoidCallback onTap;
final VoidCallback? onStart;
final VoidCallback? onStop;
final VoidCallback? onRestart;
@override
Widget build(BuildContext context) {
final colorScheme = Theme.of(context).colorScheme;
return ListTile(
selected: isSelected,
selectedTileColor: colorScheme.primaryContainer.withValues(alpha: 0.3),
leading: _buildStatusIndicator(context),
title: Text(
stack.name,
style: const TextStyle(fontWeight: FontWeight.w500),
),
subtitle: Text(
'${stack.runningCount}/${stack.containerCount} containers',
style: TextStyle(
fontSize: 12,
color: colorScheme.onSurfaceVariant,
),
),
trailing: _buildActions(context),
onTap: onTap,
);
}
Widget _buildStatusIndicator(BuildContext context) {
final color = switch (stack.status) {
StackStatus.active when stack.isHealthy => Colors.green,
StackStatus.active when stack.isPartial => Colors.orange,
StackStatus.active => Colors.green,
StackStatus.inactive => Theme.of(context).colorScheme.outline,
StackStatus.error => Theme.of(context).colorScheme.error,
StackStatus.unknown => Theme.of(context).colorScheme.outline,
};
return Container(
width: 12,
height: 12,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: color,
boxShadow: [
if (stack.isHealthy)
BoxShadow(
color: color.withValues(alpha: 0.4),
blurRadius: 4,
spreadRadius: 1,
),
],
),
);
}
Widget? _buildActions(BuildContext context) {
if (onStart == null && onStop == null && onRestart == null) {
return null;
}
return PopupMenuButton<String>(
icon: const Icon(Icons.more_vert, size: 18),
tooltip: 'Stack actions',
onSelected: (action) {
switch (action) {
case 'start':
onStart?.call();
case 'stop':
onStop?.call();
case 'restart':
onRestart?.call();
}
},
itemBuilder: (context) => [
if (onStart != null && !stack.isHealthy)
const PopupMenuItem(
value: 'start',
child: Row(
children: [
Icon(Icons.play_arrow, size: 18),
SizedBox(width: 8),
Text('Start'),
],
),
),
if (onStop != null && stack.hasRunningContainers)
const PopupMenuItem(
value: 'stop',
child: Row(
children: [
Icon(Icons.stop, size: 18),
SizedBox(width: 8),
Text('Stop'),
],
),
),
if (onRestart != null && stack.hasRunningContainers)
const PopupMenuItem(
value: 'restart',
child: Row(
children: [
Icon(Icons.refresh, size: 18),
SizedBox(width: 8),
Text('Restart'),
],
),
),
],
);
}
}