import 'dart:io' show File, Platform, Process; import 'package:after_layout/after_layout.dart'; import 'package:circle_chart/circle_chart.dart'; import 'package:flutter/material.dart'; import 'package:flutter_gen/gen_l10n/l10n.dart'; import 'package:get_it/get_it.dart'; import 'package:nil/nil.dart'; import 'package:provider/provider.dart'; import 'package:toolbox/core/extension/order.dart'; import 'package:toolbox/core/utils/misc.dart'; import 'package:toolbox/data/model/app/net_view.dart'; import 'package:toolbox/data/model/server/snippet.dart'; import 'package:toolbox/data/provider/snippet.dart'; import 'package:toolbox/view/page/process.dart'; import 'package:toolbox/view/widget/tag/picker.dart'; import 'package:toolbox/view/widget/tag/switcher.dart'; import '../../../core/route.dart'; import '../../../core/utils/platform.dart'; import '../../../core/utils/server.dart'; import '../../../core/utils/ui.dart'; import '../../../data/model/server/disk.dart'; import '../../../data/model/server/server.dart'; import '../../../data/model/server/server_private_info.dart'; import '../../../data/model/server/server_status.dart'; import '../../../data/provider/server.dart'; import '../../../data/res/color.dart'; import '../../../data/model/app/menu.dart'; import '../../../data/res/ui.dart'; import '../../../data/store/setting.dart'; import '../../../locator.dart'; import '../../widget/popup_menu.dart'; import '../../widget/round_rect_card.dart'; import '../docker.dart'; import '../pkg.dart'; import '../storage/sftp.dart'; import '../ssh/term.dart'; import 'detail.dart'; import 'edit.dart'; class ServerPage extends StatefulWidget { const ServerPage({Key? key}) : super(key: key); @override _ServerPageState createState() => _ServerPageState(); } class _ServerPageState extends State with AutomaticKeepAliveClientMixin, AfterLayoutMixin { late MediaQueryData _media; late ThemeData _theme; late ServerProvider _serverProvider; late SettingStore _settingStore; late S _s; String? _tag; @override void initState() { super.initState(); _serverProvider = locator(); _settingStore = locator(); } @override void didChangeDependencies() { super.didChangeDependencies(); _media = MediaQuery.of(context); _theme = Theme.of(context); _s = S.of(context)!; } @override Widget build(BuildContext context) { super.build(context); return Scaffold( body: _buildBody(), floatingActionButton: FloatingActionButton( onPressed: () => AppRoute( const ServerEditPage(), 'Add server info page', ).go(context), tooltip: _s.addAServer, heroTag: 'server', child: const Icon(Icons.add), ), ); } Widget _buildBody() { return RefreshIndicator( onRefresh: () async => await _serverProvider.refreshData(onlyFailed: true), child: Consumer( builder: (_, pro, __) { if (!pro.tags.contains(_tag)) { _tag = null; } if (pro.serverOrder.isEmpty) { return Center( child: Text( _s.serverTabEmpty, textAlign: TextAlign.center, ), ); } final filtered = pro.serverOrder .where((e) => pro.servers.containsKey(e)) .where((e) => _tag == null || (pro.servers[e]?.spi.tags?.contains(_tag) ?? false)) .toList(); return ReorderableListView.builder( header: TagSwitcher( tags: pro.tags, width: _media.size.width, onTagChanged: (p0) => setState(() { _tag = p0; }), initTag: _tag, all: _s.all, ), padding: const EdgeInsets.fromLTRB(7, 10, 7, 7), onReorder: (oldIndex, newIndex) => setState(() { pro.serverOrder.moveByItem( filtered, oldIndex, newIndex, property: _settingStore.serverOrder, ); }), buildDefaultDragHandles: false, itemBuilder: (_, index) => ReorderableDelayedDragStartListener( key: ValueKey('$_tag${filtered[index]}'), index: index, child: _buildEachServerCard(pro.servers[filtered[index]]), ), itemCount: filtered.length, ); }, ), ); } Widget _buildEachServerCard(Server? si) { if (si == null) { return nil; } return GestureDetector( key: Key(si.spi.id + (_tag ?? '')), onTap: () => AppRoute( ServerDetailPage(si.spi.id), 'server detail page', ).go(context), child: RoundRectCard( Padding( padding: const EdgeInsets.all(13), child: _buildRealServerCard(si.status, si.state, si.spi), ), ), ); } Widget _buildRealServerCard( ServerStatus ss, ServerState cs, ServerPrivateInfo spi, ) { final rootDisk = findRootDisk(ss.disk); return Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ _buildServerCardTitle(ss, cs, spi), height13, Row( mainAxisAlignment: MainAxisAlignment.spaceAround, children: [ _buildPercentCircle(ss.cpu.usedPercent()), _buildPercentCircle(ss.mem.usedPercent * 100), _buildNet(ss), _buildIOData( 'Total:\n${rootDisk?.size}', 'Used:\n${rootDisk?.usedPercent}%') ], ), height13, Row( mainAxisAlignment: MainAxisAlignment.spaceAround, children: [ _buildExplainText('CPU'), _buildExplainText('Mem'), _buildExplainText('Net'), _buildExplainText('Disk'), ], ), const SizedBox(height: 3), ], ); } Widget _buildServerCardTitle( ServerStatus ss, ServerState cs, ServerPrivateInfo spi, ) { return Padding( padding: const EdgeInsets.symmetric(horizontal: 7), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Row( children: [ Text( spi.name, style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 12), textScaleFactor: 1.0, ), const Icon( Icons.keyboard_arrow_right, size: 17, color: Colors.grey, ) ], ), Row( children: [ _buildTopRightText(ss, cs), width13, _buildSSHBtn(spi), _buildMoreBtn(spi), ], ) ], ), ); } Widget _buildTopRightText(ServerStatus ss, ServerState cs) { final topRightStr = _getTopRightStr( cs, ss.temps.first, ss.uptime, ss.failedInfo, ); if (cs == ServerState.failed && ss.failedInfo != null) { return GestureDetector( onTap: () => showRoundDialog( context: context, title: Text(_s.error), child: SingleChildScrollView( child: Text(ss.failedInfo!), ), actions: [ TextButton( onPressed: () => copy2Clipboard(ss.failedInfo!), child: Text(_s.copy), ) ], ), child: Text( _s.viewErr, style: textSize12Grey, textScaleFactor: 1.0, ), ); } return Text( topRightStr, style: textSize12Grey, textScaleFactor: 1.0, ); } Widget _buildSSHBtn(ServerPrivateInfo spi) { return GestureDetector( child: const Icon(Icons.terminal, size: 21), onTap: () => gotoSSH(spi), ); } Widget _buildMoreBtn(ServerPrivateInfo spi) { return PopupMenu( items: ServerTabMenuType.values.map((e) => e.build(_s)).toList(), padding: const EdgeInsets.symmetric(horizontal: 10), onSelected: (ServerTabMenuType value) async { switch (value) { case ServerTabMenuType.pkg: AppRoute(PkgManagePage(spi), 'pkg manage').go(context); break; case ServerTabMenuType.sftp: AppRoute(SftpPage(spi), 'SFTP').go(context); break; case ServerTabMenuType.snippet: final provider = locator(); final snippets = await showDialog>( context: context, builder: (_) => TagPicker( items: provider.snippets, containsTag: (t, tag) => t.tags?.contains(tag) ?? false, tags: provider.tags.toSet(), name: (t) => t.name, ), ); if (snippets == null) { return; } final result = await _serverProvider.runSnippets(spi.id, snippets); if (result != null && result.isNotEmpty) { showRoundDialog( context: context, title: Text(_s.result), child: Text(result), actions: [ TextButton( onPressed: () => copy2Clipboard(result), child: Text(_s.copy), ) ], ); } break; case ServerTabMenuType.edit: AppRoute(ServerEditPage(spi: spi), 'Edit server info').go(context); break; case ServerTabMenuType.docker: AppRoute(DockerManagePage(spi), 'Docker manage').go(context); break; case ServerTabMenuType.process: AppRoute(ProcessPage(spi: spi), 'process page').go(context); break; } }, ); } Widget _buildNet(ServerStatus ss) { return ValueListenableBuilder( valueListenable: _settingStore.netViewType.listenable(), builder: (_, val, __) { final data = val.build(ss); return AnimatedSwitcher( duration: const Duration(milliseconds: 177), child: _buildIOData(data.up, data.down), ); }, ); } Widget _buildExplainText(String text) { return SizedBox( width: _media.size.width * 0.2, child: Text( text, style: const TextStyle(fontSize: 12), textAlign: TextAlign.center, textScaleFactor: 1.0, ), ); } String _getTopRightStr( ServerState cs, double? temp, String upTime, String? failedInfo, ) { switch (cs) { case ServerState.disconnected: return _s.disconnected; case ServerState.connected: final tempStr = temp == null ? '' : '${temp.toStringAsFixed(1)}°C'; final items = [tempStr, upTime]; final str = items.where((element) => element.isNotEmpty).join(' | '); if (str.isEmpty) return _s.serverTabLoading; return str; case ServerState.connecting: return _s.serverTabConnecting; case ServerState.failed: if (failedInfo == null) { return _s.serverTabFailed; } if (failedInfo.contains('encypted')) { return _s.serverTabPlzSave; } return failedInfo; default: return _s.serverTabUnkown; } } Widget _buildIOData(String up, String down) { final statusTextStyle = TextStyle( fontSize: 9, color: _theme.textTheme.bodyLarge!.color!.withAlpha(177)); return SizedBox( width: _media.size.width * 0.2, child: Column( children: [ const SizedBox(height: 5), Text( up, style: statusTextStyle, textAlign: TextAlign.center, textScaleFactor: 1.0, ), const SizedBox(height: 3), Text( down, style: statusTextStyle, textAlign: TextAlign.center, textScaleFactor: 1.0, ) ], ), ); } Widget _buildPercentCircle(double percent) { if (percent <= 0) percent = 0.01; if (percent >= 100) percent = 99.9; return SizedBox( width: _media.size.width * 0.2, child: Stack( children: [ Center( child: CircleChart( progressColor: primaryColor, progressNumber: percent, maxNumber: 100, width: 53, height: 53, ), ), Positioned.fill( child: Center( child: Text( '${percent.toStringAsFixed(1)}%', textAlign: TextAlign.center, style: const TextStyle(fontSize: 11), textScaleFactor: 1.0, ), ), ), ], ), ); } Future gotoSSH(ServerPrivateInfo spi) async { // as a `Mobile first` app -> handle mobile first if (!isDesktop) { AppRoute(SSHPage(spi: spi), 'ssh page').go(context); return; } List extarArgs = []; final path = "/tmp/.serverbox_pk_${spi.pubKeyId}"; final file = File(path); if (spi.pubKeyId != null) { await file.delete(); await file.writeAsString(getPrivateKey(spi.pubKeyId!)); extarArgs += ["-i", path]; } List sshCommand = ["ssh", "${spi.user}@${spi.ip}"] + extarArgs; final system = Platform.operatingSystem; switch (system) { case "windows": await Process.start("cmd", ["/c", "start"] + sshCommand); break; case "linux": await Process.start("x-terminal-emulator", ["-e"] + sshCommand); break; case "macos": await Process.start("osascript", [ "-e", 'tell application "Terminal" to do script "${sshCommand.join(" ")}"' ]); break; default: showSnackBar(context, Text('Mismatch system: $system')); } // For security reason, delete the private key file after use await file.delete(); } @override bool get wantKeepAlive => true; @override Future afterFirstLayout(BuildContext context) async { await GetIt.I.allReady(); if (_serverProvider.servers.isEmpty) { await _serverProvider.loadLocalData(); } _serverProvider.startAutoRefresh(); } }