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
co-authored by
Claude Opus 4.5
Claude Opus 4.5
parent
dd6bcbdbda
commit
3b89ed8c18
@@ -0,0 +1,84 @@
|
||||
import 'package:riverpod_annotation/riverpod_annotation.dart';
|
||||
|
||||
import '../../../containers/data/datasources/containers_datasource.dart';
|
||||
import '../../../containers/domain/entities/container.dart';
|
||||
import '../../domain/entities/stack.dart';
|
||||
|
||||
part 'stacks_datasource.g.dart';
|
||||
|
||||
/// Data source for stack operations.
|
||||
///
|
||||
/// Stacks are derived from container labels (Docker Compose convention).
|
||||
/// The Core API doesn't have a dedicated stacks endpoint, so we aggregate
|
||||
/// from containers.
|
||||
class StacksDatasource {
|
||||
StacksDatasource(this._containersDatasource);
|
||||
|
||||
final ContainersDatasource _containersDatasource;
|
||||
|
||||
/// Gets all stacks by aggregating container data.
|
||||
Future<List<Stack>> getStacks() async {
|
||||
final containers = await _containersDatasource.getContainers();
|
||||
final containerEntities = containers.map((c) => c.toEntity()).toList();
|
||||
|
||||
// Group containers by stack name
|
||||
final stackMap = <String, List<Container>>{};
|
||||
|
||||
for (final container in containerEntities) {
|
||||
final stackName = container.stackName;
|
||||
if (stackName != null) {
|
||||
stackMap.putIfAbsent(stackName, () => []).add(container);
|
||||
}
|
||||
}
|
||||
|
||||
// Convert to Stack entities
|
||||
return stackMap.entries.map((entry) {
|
||||
final name = entry.key;
|
||||
final stackContainers = entry.value;
|
||||
final runningCount = stackContainers.where((c) => c.isRunning).length;
|
||||
|
||||
return Stack(
|
||||
id: name, // Use name as ID for compose stacks
|
||||
name: name,
|
||||
type: StackType.compose,
|
||||
status: runningCount == stackContainers.length
|
||||
? StackStatus.active
|
||||
: runningCount > 0
|
||||
? StackStatus.active
|
||||
: StackStatus.inactive,
|
||||
containerCount: stackContainers.length,
|
||||
runningCount: runningCount,
|
||||
);
|
||||
}).toList()
|
||||
..sort((a, b) => a.name.compareTo(b.name));
|
||||
}
|
||||
|
||||
/// Gets a single stack by ID.
|
||||
Future<Stack> getStack(String id) async {
|
||||
final stacks = await getStacks();
|
||||
return stacks.firstWhere(
|
||||
(s) => s.id == id,
|
||||
orElse: () => throw Exception('Stack not found: $id'),
|
||||
);
|
||||
}
|
||||
|
||||
/// Performs an action on all containers in a stack.
|
||||
Future<void> stackAction(String stackId, String action) async {
|
||||
final containers = await _containersDatasource.getContainers();
|
||||
final stackContainers = containers
|
||||
.map((c) => c.toEntity())
|
||||
.where((c) => c.stackId == stackId)
|
||||
.toList();
|
||||
|
||||
for (final container in stackContainers) {
|
||||
await _containersDatasource.containerAction(container.fullId, action);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// Provides the stacks datasource.
|
||||
@riverpod
|
||||
StacksDatasource stacksDatasource(StacksDatasourceRef ref) {
|
||||
final containersDatasource = ref.watch(containersDatasourceProvider);
|
||||
return StacksDatasource(containersDatasource);
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
import 'package:freezed_annotation/freezed_annotation.dart';
|
||||
|
||||
import '../../domain/entities/stack.dart';
|
||||
|
||||
part 'stack_model.freezed.dart';
|
||||
part 'stack_model.g.dart';
|
||||
|
||||
/// Stack data model for API serialization.
|
||||
@freezed
|
||||
class StackModel with _$StackModel {
|
||||
const factory StackModel({
|
||||
required String id,
|
||||
required String name,
|
||||
@JsonKey(name: 'type') String? typeString,
|
||||
@JsonKey(name: 'status') String? statusString,
|
||||
@JsonKey(name: 'container_count') @Default(0) int containerCount,
|
||||
@JsonKey(name: 'running_count') @Default(0) int runningCount,
|
||||
@JsonKey(name: 'compose_file') String? composeFile,
|
||||
String? environment,
|
||||
@JsonKey(name: 'created_at') String? createdAt,
|
||||
@JsonKey(name: 'updated_at') String? updatedAt,
|
||||
}) = _StackModel;
|
||||
|
||||
const StackModel._();
|
||||
|
||||
factory StackModel.fromJson(Map<String, dynamic> json) =>
|
||||
_$StackModelFromJson(json);
|
||||
|
||||
/// Converts to domain entity.
|
||||
Stack toEntity() {
|
||||
return Stack(
|
||||
id: id,
|
||||
name: name,
|
||||
type: _parseStackType(typeString),
|
||||
status: _parseStackStatus(statusString),
|
||||
containerCount: containerCount,
|
||||
runningCount: runningCount,
|
||||
composeFile: composeFile,
|
||||
environment: environment,
|
||||
createdAt: createdAt != null ? DateTime.tryParse(createdAt!) : null,
|
||||
updatedAt: updatedAt != null ? DateTime.tryParse(updatedAt!) : null,
|
||||
);
|
||||
}
|
||||
|
||||
StackType _parseStackType(String? type) {
|
||||
return switch (type?.toLowerCase()) {
|
||||
'compose' => StackType.compose,
|
||||
'swarm' => StackType.swarm,
|
||||
'kubernetes' || 'k8s' => StackType.kubernetes,
|
||||
_ => StackType.compose,
|
||||
};
|
||||
}
|
||||
|
||||
StackStatus _parseStackStatus(String? status) {
|
||||
return switch (status?.toLowerCase()) {
|
||||
'active' || 'running' => StackStatus.active,
|
||||
'inactive' || 'stopped' => StackStatus.inactive,
|
||||
'error' => StackStatus.error,
|
||||
_ => StackStatus.unknown,
|
||||
};
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
import 'package:riverpod_annotation/riverpod_annotation.dart';
|
||||
|
||||
import '../../domain/entities/stack.dart';
|
||||
import '../../domain/repositories/stack_repository.dart';
|
||||
import '../datasources/stacks_datasource.dart';
|
||||
|
||||
part 'stack_repository_impl.g.dart';
|
||||
|
||||
/// Implementation of StackRepository.
|
||||
class StackRepositoryImpl implements StackRepository {
|
||||
StackRepositoryImpl(this._datasource);
|
||||
|
||||
final StacksDatasource _datasource;
|
||||
|
||||
@override
|
||||
Future<List<Stack>> getStacks() async {
|
||||
return _datasource.getStacks();
|
||||
}
|
||||
|
||||
@override
|
||||
Future<Stack> getStack(String id) async {
|
||||
return _datasource.getStack(id);
|
||||
}
|
||||
|
||||
@override
|
||||
Future<void> startStack(String id) async {
|
||||
await _datasource.stackAction(id, 'start');
|
||||
}
|
||||
|
||||
@override
|
||||
Future<void> stopStack(String id) async {
|
||||
await _datasource.stackAction(id, 'stop');
|
||||
}
|
||||
|
||||
@override
|
||||
Future<void> restartStack(String id) async {
|
||||
await _datasource.stackAction(id, 'restart');
|
||||
}
|
||||
|
||||
@override
|
||||
Future<void> removeStack(String id) async {
|
||||
// TODO: Implement stack removal
|
||||
throw UnimplementedError('Stack removal not yet implemented');
|
||||
}
|
||||
}
|
||||
|
||||
/// Provides the stack repository.
|
||||
@riverpod
|
||||
StackRepository stackRepository(StackRepositoryRef ref) {
|
||||
final datasource = ref.watch(stacksDatasourceProvider);
|
||||
return StackRepositoryImpl(datasource);
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
import 'package:freezed_annotation/freezed_annotation.dart';
|
||||
|
||||
part 'stack.freezed.dart';
|
||||
|
||||
/// Container orchestration stack (Docker Compose stack).
|
||||
@freezed
|
||||
class Stack with _$Stack {
|
||||
const factory Stack({
|
||||
/// Unique stack identifier.
|
||||
required String id,
|
||||
|
||||
/// Stack name.
|
||||
required String name,
|
||||
|
||||
/// Stack type (compose, swarm, kubernetes).
|
||||
@Default(StackType.compose) StackType type,
|
||||
|
||||
/// Current stack status.
|
||||
@Default(StackStatus.unknown) StackStatus status,
|
||||
|
||||
/// Number of containers in the stack.
|
||||
@Default(0) int containerCount,
|
||||
|
||||
/// Number of running containers.
|
||||
@Default(0) int runningCount,
|
||||
|
||||
/// Path to the compose file (if applicable).
|
||||
String? composeFile,
|
||||
|
||||
/// Environment name (e.g., production, staging).
|
||||
String? environment,
|
||||
|
||||
/// When the stack was created.
|
||||
DateTime? createdAt,
|
||||
|
||||
/// When the stack was last updated.
|
||||
DateTime? updatedAt,
|
||||
}) = _Stack;
|
||||
|
||||
const Stack._();
|
||||
|
||||
/// Whether all containers in the stack are running.
|
||||
bool get isHealthy => runningCount == containerCount && containerCount > 0;
|
||||
|
||||
/// Whether the stack has any running containers.
|
||||
bool get hasRunningContainers => runningCount > 0;
|
||||
|
||||
/// Whether the stack is partially running.
|
||||
bool get isPartial =>
|
||||
runningCount > 0 && runningCount < containerCount;
|
||||
}
|
||||
|
||||
/// Stack orchestration type.
|
||||
enum StackType {
|
||||
compose,
|
||||
swarm,
|
||||
kubernetes,
|
||||
}
|
||||
|
||||
/// Stack status.
|
||||
enum StackStatus {
|
||||
active,
|
||||
inactive,
|
||||
error,
|
||||
unknown,
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import '../entities/stack.dart';
|
||||
|
||||
/// Repository interface for stack operations.
|
||||
abstract class StackRepository {
|
||||
/// Gets all stacks.
|
||||
Future<List<Stack>> getStacks();
|
||||
|
||||
/// Gets a single stack by ID.
|
||||
Future<Stack> getStack(String id);
|
||||
|
||||
/// Starts all containers in a stack.
|
||||
Future<void> startStack(String id);
|
||||
|
||||
/// Stops all containers in a stack.
|
||||
Future<void> stopStack(String id);
|
||||
|
||||
/// Restarts all containers in a stack.
|
||||
Future<void> restartStack(String id);
|
||||
|
||||
/// Removes a stack (stops and removes containers).
|
||||
Future<void> removeStack(String id);
|
||||
}
|
||||
@@ -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'),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user