import 'dart:async'; import 'package:fl_lib/fl_lib.dart'; import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; import 'package:toolbox/core/extension/context/locale.dart'; import 'package:toolbox/core/route.dart'; import 'package:toolbox/data/model/app/menu/base.dart'; import 'package:toolbox/data/model/app/menu/container.dart'; import 'package:toolbox/data/model/container/image.dart'; import 'package:toolbox/data/model/container/type.dart'; import 'package:toolbox/data/res/store.dart'; import '../../data/model/container/ps.dart'; import '../../data/model/server/server_private_info.dart'; import '../../data/provider/container.dart'; import '../widget/two_line_text.dart'; class ContainerPage extends StatefulWidget { final ServerPrivateInfo spi; const ContainerPage({required this.spi, super.key}); @override State createState() => _ContainerPageState(); } class _ContainerPageState extends State { final _textController = TextEditingController(); late final _container = ContainerProvider( client: widget.spi.server?.client, userName: widget.spi.user, hostId: widget.spi.id, context: context, ); late Size _size; @override void dispose() { super.dispose(); _textController.dispose(); } @override void initState() { super.initState(); _initAutoRefresh(); } @override void didChangeDependencies() { super.didChangeDependencies(); _size = MediaQuery.of(context).size; } @override Widget build(BuildContext context) { return ChangeNotifierProvider( create: (_) => _container, builder: (_, __) => Consumer( builder: (_, ___, __) { return Scaffold( appBar: CustomAppBar( centerTitle: true, title: TwoLineText(up: l10n.container, down: widget.spi.name), actions: [ IconButton( onPressed: () => context.showLoadingDialog(fn: () => _container.refresh()), icon: const Icon(Icons.refresh), ) ], ), body: _buildMain(), floatingActionButton: _container.error == null ? _buildFAB() : null, ); }, ), ); } Widget _buildFAB() { return FloatingActionButton( onPressed: () async => await _showAddFAB(), child: const Icon(Icons.add), ); } Widget _buildMain() { if (_container.error != null && _container.items == null) { return SizedBox.expand( child: Column( children: [ const Spacer(), const Icon( Icons.error, size: 37, ), UIs.height13, Padding( padding: const EdgeInsets.symmetric(horizontal: 23), child: Text(_container.error?.toString() ?? l10n.unknownError), ), const Spacer(), _buildEditHost(), _buildSwitchProvider(), UIs.height13, ], ), ); } if (_container.items == null || _container.images == null) { return UIs.centerLoading; } return ListView( padding: const EdgeInsets.only(left: 13, right: 13, top: 13, bottom: 37), children: [ _buildLoading(), _buildVersion(), _buildPs(), _buildImage(), _buildEditHost(), _buildSwitchProvider(), ], ); } Widget _buildImage() { return CardX( child: ExpandTile( title: Text(l10n.imagesList), subtitle: Text( l10n.dockerImagesFmt(_container.images!.length), style: UIs.textGrey, ), initiallyExpanded: (_container.images?.length ?? 0) <= 3, children: _container.images?.map(_buildImageItem).toList() ?? [], )); } Widget _buildImageItem(ContainerImg e) { return ListTile( title: Text(e.repository ?? l10n.unknown), subtitle: Text('${e.tag} - ${e.sizeMB}', style: UIs.textGrey), trailing: IconButton( padding: EdgeInsets.zero, alignment: Alignment.centerRight, icon: const Icon(Icons.delete), onPressed: () => _showImageRmDialog(e), ), ); } Widget _buildLoading() { if (_container.runLog == null) return UIs.placeholder; return Padding( padding: const EdgeInsets.all(17), child: Column( children: [ const Center( child: CircularProgressIndicator(), ), UIs.height13, Text(_container.runLog ?? '...'), ], ), ); } Widget _buildVersion() { return CardX( child: Padding( padding: const EdgeInsets.all(17), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Text(_container.type.name.upperFirst), Text(_container.version ?? l10n.unknown), ], ), )); } Widget _buildPs() { final items = _container.items; if (items == null) return UIs.placeholder; return Column( children: items.map(_buildPsItem).toList(), ); } Widget _buildPsItem(ContainerPs item) { return CardX( child: Padding( padding: const EdgeInsets.symmetric(horizontal: 13, vertical: 11), child: Column( mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.start, children: [ Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Text(item.name ?? l10n.unknown, style: UIs.text15), const SizedBox(height: 3), _buildMoreBtn(item), ], ), Text( '${item.image ?? l10n.unknown} - ${item.running ? l10n.running : l10n.stopped}', style: UIs.text13Grey, ), _buildPsItemStats(item), ], ), ), ); } Widget _buildPsItemStats(ContainerPs item) { if (item.cpu == null || item.mem == null) return UIs.placeholder; return Column( children: [ UIs.height13, Row( children: [ _buildPsItemStatsItem('CPU', item.cpu, Icons.memory), UIs.width13, _buildPsItemStatsItem('Net', item.net, Icons.network_cell), ], ), Row( children: [ _buildPsItemStatsItem( 'Mem', item.mem, Icons.settings_input_component), UIs.width13, _buildPsItemStatsItem('Disk', item.disk, Icons.storage), ], ), ], ); } Widget _buildPsItemStatsItem(String title, String? value, IconData icon) { return SizedBox( width: _size.width / 2 - 41, child: Column( children: [ Row( children: [ Icon(icon, size: 12, color: Colors.grey), UIs.width7, Text(value ?? l10n.unknown, style: UIs.text11Grey), ], ) ], ), ); } Widget _buildMoreBtn(ContainerPs dItem) { return PopupMenu( items: ContainerMenu.items(dItem.running) .map((e) => PopMenu.build(e, e.icon, e.toStr)) .toList(), onSelected: (item) => _onTapMoreBtn(item, dItem), ); } // String _buildPsCardSubtitle(List running) { // final runningCount = running.where((element) => element.running).length; // final stoped = running.length - runningCount; // if (stoped == 0) { // return l10n.dockerStatusRunningFmt(runningCount); // } // return l10n.dockerStatusRunningAndStoppedFmt(runningCount, stoped); // } Widget _buildEditHost() { final children = []; final emptyImgs = _container.images?.isEmpty ?? false; final emptyPs = _container.items?.isEmpty ?? false; if (emptyPs && emptyImgs) { children.add(Padding( padding: const EdgeInsets.fromLTRB(17, 17, 17, 0), child: Text( l10n.dockerEmptyRunningItems, textAlign: TextAlign.center, ), )); } children.add( TextButton( onPressed: _showEditHostDialog, child: Text(l10n.dockerEditHost), ), ); return CardX( child: Column( children: children, )); } Widget _buildSwitchProvider() { late final Widget child; if (_container.type == ContainerType.podman) { child = TextButton( onPressed: () { _container.setType(ContainerType.docker); }, child: Text(l10n.switchTo('Docker')), ); } else { child = TextButton( onPressed: () { _container.setType(ContainerType.podman); }, child: Text(l10n.switchTo('Podman')), ); } return CardX(child: child); } Future _showAddFAB() async { final imageCtrl = TextEditingController(); final nameCtrl = TextEditingController(); final argsCtrl = TextEditingController(); await context.showRoundDialog( title: l10n.newContainer, child: Column( mainAxisSize: MainAxisSize.min, children: [ Input( autoFocus: true, type: TextInputType.text, label: l10n.image, hint: 'xxx:1.1', controller: imageCtrl, ), Input( type: TextInputType.text, controller: nameCtrl, label: l10n.containerName, hint: 'xxx', ), Input( type: TextInputType.text, controller: argsCtrl, label: l10n.extraArgs, hint: '-p 2222:22 -v ~/.xxx/:/xxx', ), ], ), actions: [ TextButton( onPressed: () => context.pop(), child: Text(l10n.cancel), ), TextButton( onPressed: () async { context.pop(); await _showAddCmdPreview( _buildAddCmd( imageCtrl.text.trim(), nameCtrl.text.trim(), argsCtrl.text.trim(), ), ); }, child: Text(l10n.ok), ) ], ); } Future _showAddCmdPreview(String cmd) async { await context.showRoundDialog( title: l10n.preview, child: Text(cmd), actions: [ TextButton( onPressed: () => context.pop(), child: Text(l10n.cancel), ), TextButton( onPressed: () async { context.pop(); final result = await context.showLoadingDialog( fn: () => _container.run(cmd), ); if (result != null) { context.showSnackBar(result.message ?? l10n.unknownError); } }, child: Text(l10n.run), ) ], ); } String _buildAddCmd(String image, String name, String args) { var suffix = ''; if (args.isEmpty) { suffix = image; } else { suffix = '$args $image'; } if (name.isEmpty) { return 'run -itd $suffix'; } return 'run -itd --name $name $suffix'; } Future _showEditHostDialog() async { final id = widget.spi.id; final host = Stores.container.fetch(id); final ctrl = TextEditingController(text: host); await context.showRoundDialog( title: l10n.dockerEditHost, child: Input( maxLines: 2, controller: ctrl, onSubmitted: _onSaveDockerHost, hint: 'unix:///run/user/1000/docker.sock', ), actions: [ TextButton( onPressed: () => _onSaveDockerHost(ctrl.text), child: Text(l10n.ok), ), ], ); } void _onSaveDockerHost(String val) { context.pop(); Stores.container.put(widget.spi.id, val.trim()); _container.refresh(); } void _showImageRmDialog(ContainerImg e) { context.showRoundDialog( title: l10n.attention, child: Text(l10n.askContinue('${l10n.delete} Image(${e.repository})')), actions: [ TextButton( onPressed: () => context.pop(), child: Text(l10n.cancel), ), TextButton( onPressed: () async { context.pop(); final result = await _container.run('rmi ${e.id} -f'); if (result != null) { context.showSnackBar(result.message ?? l10n.unknownError); } }, child: Text(l10n.ok, style: UIs.textRed), ), ], ); } void _onTapMoreBtn(ContainerMenu item, ContainerPs dItem) async { final id = dItem.id; if (id == null) { context.showSnackBar('Id is null'); return; } switch (item) { case ContainerMenu.rm: var force = false; context.showRoundDialog( title: l10n.attention, child: Column( mainAxisSize: MainAxisSize.min, children: [ Text(l10n.askContinue( '${l10n.delete} Container(${dItem.name})', )), UIs.height13, Row( children: [ StatefulBuilder(builder: (_, setState) { return Checkbox( value: force, onChanged: (val) => setState( () => force = val ?? false, ), ); }), Text(l10n.force), ], ) ], ), actions: [ TextButton( onPressed: () async { context.pop(); final result = await context.showLoadingDialog( fn: () => _container.delete(id, force), ); if (result != null) { context.showRoundDialog( title: l10n.error, child: Text(result.message ?? l10n.unknownError), ); } }, child: Text(l10n.ok), ) ], ); break; case ContainerMenu.start: final result = await context.showLoadingDialog( fn: () => _container.start(id), ); if (result != null) { context.showRoundDialog( title: l10n.error, child: Text(result.message ?? l10n.unknownError), ); } break; case ContainerMenu.stop: final result = await context.showLoadingDialog( fn: () => _container.stop(id), ); if (result != null) { context.showRoundDialog( title: l10n.error, child: Text(result.message ?? l10n.unknownError), ); } break; case ContainerMenu.restart: final result = await context.showLoadingDialog( fn: () => _container.restart(id), ); if (result != null) { context.showRoundDialog( title: l10n.error, child: Text(result.message ?? l10n.unknownError), ); } break; case ContainerMenu.logs: AppRoutes.ssh( spi: widget.spi, initCmd: 'docker logs -f --tail 100 ${dItem.id}', ).go(context); break; case ContainerMenu.terminal: AppRoutes.ssh( spi: widget.spi, initCmd: 'docker exec -it ${dItem.id} sh', ).go(context); break; // case DockerMenuType.stats: // showRoundDialog( // context: context, // title: Text(l10n.stats), // child: Text( // 'CPU: ${dItem.cpu}\n' // 'Mem: ${dItem.mem}\n' // 'Net: ${dItem.net}\n' // 'Block: ${dItem.disk}', // ), // actions: [ // TextButton( // onPressed: () => context.pop(), // child: Text(l10n.ok), // ), // ], // ); // break; } } void _initAutoRefresh() { if (Stores.setting.contaienrAutoRefresh.fetch()) { Timer.periodic( Duration(seconds: Stores.setting.serverStatusUpdateInterval.fetch()), (timer) { if (mounted) { _container.refresh(isAuto: true); } else { timer.cancel(); } }, ); } } }