496 lines
15 KiB
Dart
496 lines
15 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:stacked/stacked.dart';
|
|
|
|
import '../../../about/external/data/Docker.dart';
|
|
import '../../../about/internal/application/NotificationType.dart';
|
|
import '../../../about/internal/application/ServerProfile.dart';
|
|
import '../../../about/internal/application/TextType.dart';
|
|
import '../../../configs/Navigator.dart';
|
|
import '../../../designs/OutputSheet.dart';
|
|
import '../../../designs/text/Text.dart';
|
|
import '../../../utils/Colors.dart';
|
|
import '../run/DockerRun.dart';
|
|
import 'ConnectDockerManager.dart';
|
|
import 'DockerManager.dart';
|
|
import 'ViewDockerManager.dart';
|
|
|
|
class DockerManagerState extends State<DockerManager>
|
|
implements ConnectDockerManager {
|
|
ViewDockerManager? _model;
|
|
|
|
DockerStatus? _status;
|
|
List<DockerContainer> _containers = [];
|
|
bool _loading = true;
|
|
bool _installing = false;
|
|
String? _busyId;
|
|
|
|
ServerProfile get _server => widget.server;
|
|
|
|
bool get _ready => _status != null && _status!.installed && _status!.running;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return ViewModelBuilder<ViewDockerManager>.reactive(
|
|
viewModelBuilder: () => ViewDockerManager(context, this),
|
|
onViewModelReady: _onReady,
|
|
builder: (context, viewModel, child) => Scaffold(
|
|
appBar: AppBar(
|
|
title: text(
|
|
'Docker · ${_server.name}',
|
|
20,
|
|
TextType.Bold,
|
|
color: context.jp.text,
|
|
),
|
|
actions: [
|
|
if (_ready)
|
|
IconButton(
|
|
tooltip: 'Test (hello-world)',
|
|
onPressed: _onTest,
|
|
icon: const Icon(Icons.verified),
|
|
),
|
|
IconButton(
|
|
tooltip: 'Refresh',
|
|
onPressed: _loading ? null : _onRefresh,
|
|
icon: const Icon(Icons.refresh),
|
|
),
|
|
const SizedBox(width: 4),
|
|
],
|
|
),
|
|
floatingActionButton: _ready
|
|
? FloatingActionButton.extended(
|
|
onPressed: _onOpenRun,
|
|
icon: const Icon(Icons.add),
|
|
label: text(
|
|
'Run container',
|
|
14,
|
|
TextType.Bold,
|
|
color: colorWhite,
|
|
),
|
|
)
|
|
: null,
|
|
body: ListView(
|
|
padding: const EdgeInsets.fromLTRB(16, 16, 16, 96),
|
|
children: [
|
|
_statusCard(),
|
|
if (_ready) ...[
|
|
const SizedBox(height: 16),
|
|
_sectionHeader(),
|
|
const SizedBox(height: 10),
|
|
if (_loading)
|
|
const Center(
|
|
child: Padding(
|
|
padding: EdgeInsets.all(24),
|
|
child: CircularProgressIndicator(),
|
|
),
|
|
)
|
|
else if (_containers.isEmpty)
|
|
_empty()
|
|
else
|
|
LayoutBuilder(
|
|
builder: (context, c) {
|
|
const gap = 12.0;
|
|
final cols = c.maxWidth >= 720 ? 2 : 1;
|
|
final w = (c.maxWidth - gap * (cols - 1)) / cols;
|
|
return Wrap(
|
|
spacing: gap,
|
|
runSpacing: gap,
|
|
children: [
|
|
for (final container in _containers)
|
|
SizedBox(width: w, child: _containerCard(container)),
|
|
],
|
|
);
|
|
},
|
|
),
|
|
],
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
void _onReady(ViewDockerManager model) {
|
|
_model = model;
|
|
// onViewModelReady fires mid-build; a synchronous setState from the
|
|
// first load would dirty this State while it is still being built.
|
|
WidgetsBinding.instance.addPostFrameCallback((_) {
|
|
if (mounted) _initiate();
|
|
});
|
|
}
|
|
|
|
Future<void> _initiate() async {
|
|
_model?.loadDocker(_server);
|
|
}
|
|
|
|
// ── named handlers ─────────────────────────────────────────────────────────
|
|
|
|
void _onRefresh() {
|
|
setState(() => _loading = true);
|
|
_model?.loadDocker(_server);
|
|
}
|
|
|
|
void _onTest() => _model?.runTest(_server);
|
|
|
|
void _onInstall() => _model?.prepareInstall(_server);
|
|
|
|
Future<void> _onOpenRun() async {
|
|
await PeachNavigation().navigateToPageWithData(
|
|
DockerRun(server: _server),
|
|
context,
|
|
);
|
|
_onRefresh();
|
|
}
|
|
|
|
void _onStart(DockerContainer c) => _action(c, 'start');
|
|
|
|
void _onStop(DockerContainer c) => _action(c, 'stop');
|
|
|
|
void _onRestart(DockerContainer c) => _action(c, 'restart');
|
|
|
|
void _onRemove(DockerContainer c) {
|
|
_model?.showApplicationNotification(
|
|
NotificationType.warning,
|
|
'Remove "${c.name}"?',
|
|
'This force-removes the container (docker rm -f).',
|
|
true,
|
|
true,
|
|
null,
|
|
action: 'Remove',
|
|
positiveAction: () => _onConfirmRemove(c),
|
|
);
|
|
}
|
|
|
|
void _onConfirmRemove(DockerContainer c) {
|
|
Navigator.pop(context);
|
|
_action(c, 'rm');
|
|
}
|
|
|
|
void _action(DockerContainer c, String action) {
|
|
setState(() => _busyId = c.id);
|
|
_model?.runAction(_server, c.id, action);
|
|
}
|
|
|
|
void _onShowLogs(DockerContainer c) {
|
|
setState(() => _busyId = c.id);
|
|
_model?.loadContainerLogs(_server, c.id, c.name);
|
|
}
|
|
|
|
void _notify(String message) {
|
|
if (!mounted) return;
|
|
ScaffoldMessenger.of(
|
|
context,
|
|
).showSnackBar(SnackBar(content: Text(message)));
|
|
}
|
|
|
|
// ── ConnectDockerManager ───────────────────────────────────────────────────
|
|
|
|
@override
|
|
void onDockerLoaded(DockerStatus status, List<DockerContainer> containers) {
|
|
if (!mounted) return;
|
|
setState(() {
|
|
_status = status;
|
|
_containers = containers;
|
|
_loading = false;
|
|
_busyId = null;
|
|
});
|
|
}
|
|
|
|
@override
|
|
void onActionFinished(String output) {
|
|
if (!mounted) return;
|
|
setState(() => _busyId = null);
|
|
if (output.toLowerCase().contains('error')) _notify(output);
|
|
_onRefresh();
|
|
}
|
|
|
|
@override
|
|
void onOutputReady(String title, String output) {
|
|
if (!mounted) return;
|
|
setState(() => _busyId = null);
|
|
showOutputSheet(context, title, output);
|
|
}
|
|
|
|
@override
|
|
void onInstallCommandReady(String command) {
|
|
_model?.showApplicationNotification(
|
|
NotificationType.info,
|
|
'Install Docker?',
|
|
'Runs:\n$command\nthen: systemctl enable --now docker',
|
|
true,
|
|
true,
|
|
null,
|
|
action: 'Install',
|
|
positiveAction: () => _onConfirmInstall(command),
|
|
);
|
|
}
|
|
|
|
void _onConfirmInstall(String command) {
|
|
Navigator.pop(context);
|
|
setState(() => _installing = true);
|
|
_model?.installDocker(_server, command);
|
|
}
|
|
|
|
@override
|
|
void onInstallFinished() {
|
|
if (!mounted) return;
|
|
setState(() => _installing = false);
|
|
_onRefresh();
|
|
}
|
|
|
|
@override
|
|
void onDockerFailed(String message) {
|
|
if (!mounted) return;
|
|
setState(() {
|
|
_loading = false;
|
|
_busyId = null;
|
|
});
|
|
_notify(message);
|
|
}
|
|
|
|
// ── screen-only widgets ────────────────────────────────────────────────────
|
|
|
|
Widget _sectionHeader() => Row(
|
|
children: [
|
|
text(
|
|
'CONTAINERS',
|
|
12,
|
|
TextType.Bold,
|
|
color: context.jp.textDim,
|
|
letterSpacing: 1.2,
|
|
),
|
|
const SizedBox(width: 8),
|
|
text('${_containers.length}', 12, TextType.Bold, color: PeachTheme.seed),
|
|
],
|
|
);
|
|
|
|
Widget _statusCard() {
|
|
final jp = context.jp;
|
|
final installed = _status?.installed ?? false;
|
|
final running = _status?.running ?? false;
|
|
final (color, label) = !installed
|
|
? (jp.textFaint, 'NOT INSTALLED')
|
|
: running
|
|
? (PeachTheme.seed, 'RUNNING')
|
|
: (PeachTheme.warn, 'STOPPED');
|
|
return Container(
|
|
padding: const EdgeInsets.all(16),
|
|
decoration: PeachTheme.panel(context, glowColor: PeachTheme.accent),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Row(
|
|
children: [
|
|
Container(
|
|
width: 46,
|
|
height: 46,
|
|
decoration: BoxDecoration(
|
|
color: PeachTheme.accent.withValues(alpha: 0.14),
|
|
borderRadius: BorderRadius.circular(13),
|
|
),
|
|
child: const Icon(Icons.inventory_2, color: PeachTheme.accent),
|
|
),
|
|
const SizedBox(width: 14),
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
text(
|
|
_loading ? 'Checking Docker…' : 'Docker',
|
|
16,
|
|
TextType.Bold,
|
|
color: jp.text,
|
|
),
|
|
text(
|
|
installed ? (_status?.version ?? '') : 'Not installed',
|
|
12,
|
|
TextType.Regular,
|
|
color: jp.textDim,
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
Container(
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: 10,
|
|
vertical: 5,
|
|
),
|
|
decoration: BoxDecoration(
|
|
color: color.withValues(alpha: 0.16),
|
|
borderRadius: BorderRadius.circular(20),
|
|
border: Border.all(color: color.withValues(alpha: 0.4)),
|
|
),
|
|
child: text(label, 10.5, TextType.Bold, color: color),
|
|
),
|
|
],
|
|
),
|
|
if (!installed) ...[
|
|
const SizedBox(height: 14),
|
|
FilledButton.icon(
|
|
onPressed: _installing ? null : _onInstall,
|
|
icon: _installing
|
|
? SizedBox(
|
|
width: 18,
|
|
height: 18,
|
|
child: CircularProgressIndicator(
|
|
strokeWidth: 2,
|
|
color: colorWhite,
|
|
),
|
|
)
|
|
: const Icon(Icons.download),
|
|
label: text(
|
|
_installing ? 'Installing…' : 'Install Docker',
|
|
14,
|
|
TextType.Bold,
|
|
color: colorWhite,
|
|
),
|
|
),
|
|
] else if (!running) ...[
|
|
const SizedBox(height: 12),
|
|
text(
|
|
'The Docker daemon is not running. Start it with '
|
|
'systemctl start docker (Configuration → install also enables it).',
|
|
12.5,
|
|
TextType.Regular,
|
|
color: jp.textDim,
|
|
),
|
|
],
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _empty() {
|
|
final jp = context.jp;
|
|
return Container(
|
|
padding: const EdgeInsets.symmetric(vertical: 40),
|
|
alignment: Alignment.center,
|
|
decoration: PeachTheme.panel(context),
|
|
child: Column(
|
|
children: [
|
|
Icon(Icons.inbox, size: 40, color: jp.textFaint),
|
|
const SizedBox(height: 10),
|
|
text('No containers yet', 14, TextType.Regular, color: jp.textDim),
|
|
const SizedBox(height: 4),
|
|
text(
|
|
'Tap "Run container" to start one.',
|
|
12,
|
|
TextType.Light,
|
|
color: jp.textFaint,
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _containerCard(DockerContainer c) {
|
|
final jp = context.jp;
|
|
final busy = _busyId == c.id;
|
|
final (color, label) = switch (c.state.toLowerCase()) {
|
|
'running' => (PeachTheme.seed, 'UP'),
|
|
'exited' => (jp.textFaint, 'EXITED'),
|
|
'paused' => (PeachTheme.warn, 'PAUSED'),
|
|
'created' => (PeachTheme.accent, 'CREATED'),
|
|
'restarting' => (PeachTheme.warn, 'RESTARTING'),
|
|
_ => (PeachTheme.danger, c.state.toUpperCase()),
|
|
};
|
|
return Container(
|
|
padding: const EdgeInsets.all(14),
|
|
decoration: PeachTheme.panel(context, radius: 16),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Row(
|
|
children: [
|
|
Icon(
|
|
Icons.widgets,
|
|
size: 18,
|
|
color: c.up ? PeachTheme.seed : jp.textFaint,
|
|
),
|
|
const SizedBox(width: 8),
|
|
Expanded(
|
|
child: text(
|
|
c.name,
|
|
14,
|
|
TextType.Bold,
|
|
color: jp.text,
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
),
|
|
Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 9, vertical: 3),
|
|
decoration: BoxDecoration(
|
|
color: color.withValues(alpha: 0.16),
|
|
borderRadius: BorderRadius.circular(20),
|
|
),
|
|
child: text(label, 10, TextType.Bold, color: color),
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: 6),
|
|
text(
|
|
c.image,
|
|
12,
|
|
TextType.Regular,
|
|
color: jp.textDim,
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
text(
|
|
c.status,
|
|
11.5,
|
|
TextType.Light,
|
|
color: jp.textFaint,
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
if (c.ports.trim().isNotEmpty)
|
|
text(
|
|
c.ports,
|
|
11.5,
|
|
TextType.Light,
|
|
color: jp.textFaint,
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
const SizedBox(height: 8),
|
|
Row(
|
|
children: [
|
|
if (busy)
|
|
const SizedBox(
|
|
width: 18,
|
|
height: 18,
|
|
child: CircularProgressIndicator(strokeWidth: 2),
|
|
)
|
|
else ...[
|
|
if (c.up) ...[
|
|
_act(Icons.restart_alt, 'Restart', () => _onRestart(c)),
|
|
_act(Icons.stop, 'Stop', () => _onStop(c)),
|
|
] else
|
|
_act(Icons.play_arrow, 'Start', () => _onStart(c)),
|
|
_act(Icons.article_outlined, 'Logs', () => _onShowLogs(c)),
|
|
_act(
|
|
Icons.delete_outline,
|
|
'Remove',
|
|
() => _onRemove(c),
|
|
color: PeachTheme.danger,
|
|
),
|
|
],
|
|
],
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _act(IconData icon, String tip, VoidCallback onTap, {Color? color}) =>
|
|
IconButton(
|
|
tooltip: tip,
|
|
iconSize: 20,
|
|
color: color ?? context.jp.textDim,
|
|
onPressed: onTap,
|
|
icon: Icon(icon),
|
|
);
|
|
}
|