Optimize layout

lib/data/provider/server.dart

@@ -26,11 +26,7 @@ import 'package:toolbox/locator.dart';
 /// Because of this function is called by [compute] in [ServerProvider.genClient].
 /// https://stackoverflow.com/questions/51998995/invalid-arguments-illegal-argument-in-isolate-message-object-is-a-closure
 List<SSHKeyPair> loadIndentity(String key) {
-  final watch = Stopwatch()..start();
-  final pem = SSHKeyPair.fromPem(key);
-  watch.stop();
-  print('loadIndentity: ${watch.elapsedMilliseconds}ms');
-  return pem;
+  return SSHKeyPair.fromPem(key);
 }
 
 class ServerProvider extends BusyProvider {
@@ -150,11 +146,9 @@ class ServerProvider extends BusyProvider {
   }
 
   Future<void> _getData(int idx) async {
-    final client = _servers[idx].client;
     final info = _servers[idx].info;
-    final connected = client != null;
     final state = _servers[idx].connectionState;
-    if (!connected ||
+    if (_servers[idx].client == null ||
         state == ServerConnectionState.failed ||
         state == ServerConnectionState.disconnected) {
       _servers[idx].connectionState = ServerConnectionState.connecting;
@@ -169,7 +163,7 @@ class ServerProvider extends BusyProvider {
         notifyListeners();
       } catch (e) {
         _servers[idx].connectionState = ServerConnectionState.failed;
-        _servers[idx].status.failedInfo = e.toString();
+        _servers[idx].status.failedInfo = e.toString() + ' ## ';
         notifyListeners();
         logger.warning(e);
       }
@@ -230,7 +224,7 @@ class ServerProvider extends BusyProvider {
     } else {
       info.status.sysVer = '';
     }
-    
+
     notifyListeners();
   }
 
@@ -269,9 +263,8 @@ class ServerProvider extends BusyProvider {
     if (cpus.isEmpty) {
       info.status.cpu2Status = emptyCpu2Status;
     } else {
-
-    info.status.cpu2Status =
-        info.status.cpu2Status.update(cpus, _getCPUTemp(temp));
+      info.status.cpu2Status =
+          info.status.cpu2Status.update(cpus, _getCPUTemp(temp));
     }
 
     notifyListeners();

lib/data/res/build_data.dart

@@ -1,9 +1,10 @@
 // This file is generated by ./make.dart
 
 class BuildData {
-  static const String name = "ToolBox";
-  static const int build = 82;
-  static const String engine = "Flutter 2.8.1 • channel stable • https://github.com/flutter/flutter.git\nFramework • revision 77d935af4d (4 weeks ago) • 2021-12-16 08:37:33 -0800\nEngine • revision 890a5fca2e\nTools • Dart 2.15.1\n";
-  static const String buildAt = "2022-01-11 13:31:16.586591";
-  static const int modifications = 3;
+  static const String name = "ServerBox";
+  static const int build = 83;
+  static const String engine =
+      "Flutter 2.8.1 • channel stable • https://github.com/flutter/flutter.git\nFramework • revision 77d935af4d (4 weeks ago) • 2021-12-16 08:37:33 -0800\nEngine • revision 890a5fca2e\nTools • Dart 2.15.1\n";
+  static const String buildAt = "2022-01-16 15:14:10.759902";
+  static const int modifications = 6;
 }

lib/view/page/server/tab.dart

@@ -103,12 +103,9 @@ class _ServerPageState extends State<ServerPage>
                 'Edit server info page')
             .go(context),
         child: Padding(
-          padding: const EdgeInsets.all(13),
-          child: SizedBox(
-              height: _media.size.height * 0.147,
-              child: _buildRealServerCard(
-                  si.status, si.info.name, si.connectionState)),
-        ),
+            padding: const EdgeInsets.all(13),
+            child: _buildRealServerCard(
+                si.status, si.info.name, si.connectionState)),
         onTap: () => AppRoute(ServerDetailPage('${si.info.ip}:${si.info.port}'),
                 'server detail page')
             .go(context),
@@ -142,7 +139,7 @@ class _ServerPageState extends State<ServerPage>
             hasError
                 ? ConstrainedBox(
                     constraints: BoxConstraints(
-                        maxWidth: _media.size.width * 0.57, maxHeight: 17),
+                        maxWidth: _media.size.width * 0.57, maxHeight: 15),
                     child: Marquee(
                         accelerationDuration: const Duration(seconds: 3),
                         accelerationCurve: Curves.linear,
@@ -159,20 +156,42 @@ class _ServerPageState extends State<ServerPage>
           height: 17,
         ),
         Row(
-          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          mainAxisAlignment: MainAxisAlignment.spaceAround,
           children: [
-            _buildPercentCircle(ss.cpu2Status.usedPercent(), 'CPU'),
-            _buildPercentCircle(ss.memory.used / ss.memory.total * 100, 'Mem'),
-            _buildIOData('Net', 'Conn:\n' + ss.tcp.maxConn.toString(),
+            _buildPercentCircle(ss.cpu2Status.usedPercent()),
+            _buildPercentCircle(ss.memory.used / ss.memory.total * 100),
+            _buildIOData('Conn:\n' + ss.tcp.maxConn.toString(),
                 'Fail:\n' + ss.tcp.fail.toString()),
-            _buildIOData('Disk', 'Total:\n' + rootDisk.size,
+            _buildIOData('Total:\n' + rootDisk.size,
                 'Used:\n' + rootDisk.usedPercent.toString() + '%')
           ],
         ),
+        const SizedBox(height: 13),
+        Row(
+          mainAxisAlignment: MainAxisAlignment.spaceAround,
+          children: [
+            _buildExplainText('CPU'),
+            _buildExplainText('Mem'),
+            _buildExplainText('Net'),
+            _buildExplainText('Disk'),
+          ],
+        )
       ],
     );
   }
 
+  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(ServerConnectionState cs, String temp, String upTime,
       String? failedInfo) {
     switch (cs) {
@@ -195,36 +214,24 @@ class _ServerPageState extends State<ServerPage>
     }
   }
 
-  Widget _buildIOData(String title, String up, String down) {
+  Widget _buildIOData(String up, String down) {
     final statusTextStyle = TextStyle(
         fontSize: 9, color: _theme.textTheme.bodyText1!.color!.withAlpha(177));
     return SizedBox(
       width: _media.size.width * 0.2,
-      height: _media.size.height * 0.1,
       child: Column(
-        mainAxisAlignment: MainAxisAlignment.spaceBetween,
         children: [
-          const SizedBox(),
-          Column(
-            children: [
-              Text(
-                up,
-                style: statusTextStyle,
-                textAlign: TextAlign.center,
-                textScaleFactor: 1.0,
-              ),
-              const SizedBox(height: 3),
-              Text(
-                down + '\n',
-                style: statusTextStyle,
-                textAlign: TextAlign.center,
-                textScaleFactor: 1.0,
-              )
-            ],
-          ),
+          const SizedBox(height: 5),
           Text(
-            title,
-            style: const TextStyle(fontSize: 12),
+            up,
+            style: statusTextStyle,
+            textAlign: TextAlign.center,
+            textScaleFactor: 1.0,
+          ),
+          const SizedBox(height: 3),
+          Text(
+            down,
+            style: statusTextStyle,
             textAlign: TextAlign.center,
             textScaleFactor: 1.0,
           )
@@ -233,42 +240,31 @@ class _ServerPageState extends State<ServerPage>
     );
   }
 
-  Widget _buildPercentCircle(double percent, String title) {
+  Widget _buildPercentCircle(double percent) {
     if (percent <= 0) percent = 0.01;
     if (percent >= 100) percent = 99.9;
-    var size = _media.size.height * 0.15;
     return SizedBox(
       width: _media.size.width * 0.2,
-      height: _media.size.height * 0.1,
-      child: Column(
-        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+      child: Stack(
         children: [
-          Stack(
-            children: [
-              CircleChart(
-                progressColor: _primaryColor,
-                progressNumber: percent,
-                maxNumber: 100,
-                width: size,
-                height: size / 1.5,
-              ),
-              Positioned.fill(
-                child: Center(
-                  child: Text(
-                    '${percent.toStringAsFixed(1)}%',
-                    textAlign: TextAlign.center,
-                    style: const TextStyle(fontSize: 11),
-                    textScaleFactor: 1.0,
-                  ),
-                ),
-              ),
-            ],
+          Center(
+            child: CircleChart(
+              progressColor: _primaryColor,
+              progressNumber: percent,
+              maxNumber: 100,
+              width: 53,
+              height: 53,
+            ),
           ),
-          Text(
-            title,
-            style: const TextStyle(fontSize: 12),
-            textAlign: TextAlign.center,
-            textScaleFactor: 1.0,
+          Positioned.fill(
+            child: Center(
+              child: Text(
+                '${percent.toStringAsFixed(1)}%',
+                textAlign: TextAlign.center,
+                style: const TextStyle(fontSize: 11),
+                textScaleFactor: 1.0,
+              ),
+            ),
           ),
         ],
       ),