Finish server detail page

README.md

@@ -36,7 +36,7 @@ A new Flutter project which provide a chart view to display server status data.
 - [x] Status Chart View
 - [x] Base64/Url En/Decode
 - [x] Private Key Store
-- [ ] Server Status Detail Page
+- [x] Server Status Detail Page
 - [x] Theme Switch
 - [ ] Custom Home Page
 

lib/data/model/cpu_2_status.dart

@@ -6,6 +6,7 @@ class Cpu2Status {
   Cpu2Status(this.pre, this.now);
 
   double usedPercent({int coreIdx = 0}) {
+    if (now.length != pre.length) return 0;
     final idleDelta = now[coreIdx].idle - pre[coreIdx].idle;
     final totalDelta = now[coreIdx].total - pre[coreIdx].total;
     final used = idleDelta / totalDelta;
@@ -15,4 +16,31 @@ class Cpu2Status {
   Cpu2Status update(List<CpuStatus> newStatus) {
     return Cpu2Status(now, newStatus);
   }
+
+  int get coresCount => now.length;
+
+  int get totalDelta => now[0].total - pre[0].total;
+
+  double get user {
+    if (now.length != pre.length) return 0;
+    final delta = now[0].user - pre[0].user;
+    final used = delta / totalDelta;
+    return used.isNaN ? 0 : used * 100;
+  }
+
+  double get sys {
+    if (now.length != pre.length) return 0;
+    final delta = now[0].sys - pre[0].sys;
+    final used = delta / totalDelta;
+    return used.isNaN ? 0 : used * 100;
+  }
+
+  double get nice {
+    if (now.length != pre.length) return 0;
+    final delta = now[0].nice - pre[0].nice;
+    final used = delta / totalDelta;
+    return used.isNaN ? 0 : used * 100;
+  }
+
+  double get idle => 100 - usedPercent();
 }

lib/data/model/disk_info.dart

@@ -4,34 +4,35 @@ class DiskInfo {
   "mountPath": "",
   "mountLocation": "",
   "usedPercent": 0,
-  "used": "",=
+  "used": "",
   "size": "",
   "avail": ""
 } 
 */
 
-  String? mountPath;
+  late String mountPath;
-  String? mountLocation;
+  late String mountLocation;
-  double? usedPercent;
+  late int usedPercent;
-  String? used;
+  late String used;
-  String? size;
+  late String size;
-  String? avail;
+  late String avail;
 
-  DiskInfo({
+  DiskInfo(
     this.mountPath,
     this.mountLocation,
     this.usedPercent,
     this.used,
     this.size,
     this.avail,
-  });
+  );
+
   DiskInfo.fromJson(Map<String, dynamic> json) {
-    mountPath = json["mountPath"]?.toString();
+    mountPath = json["mountPath"].toString();
-    mountLocation = json["mountLocation"]?.toString();
+    mountLocation = json["mountLocation"].toString();
-    usedPercent = double.parse(json["usedPercent"]);
+    usedPercent = int.parse(json["usedPercent"]);
-    used = json["used"]?.toString();
+    used = json["used"].toString();
-    size = json["size"]?.toString();
+    size = json["size"].toString();
-    avail = json["avail"]?.toString();
+    avail = json["avail"].toString();
   }
   Map<String, dynamic> toJson() {
     final Map<String, dynamic> data = <String, dynamic>{};

lib/data/model/linux_icon.dart

@@ -0,0 +1,14 @@
+class LinuxIcons {
+  List<String> db;
+
+  LinuxIcons(this.db);
+
+  String? search(String sysVer) {
+    for (var item in db) {
+      if (sysVer.contains(item)) {
+        return 'assets/linux/$item.png';
+      }
+    }
+    return null;
+  }
+}

lib/data/model/server_status.dart

@@ -29,10 +29,10 @@ class ServerStatus {
 */
 
   late Cpu2Status cpu2Status;
-  late List<int?> memList;
+  late List<int> memList;
   late String sysVer;
   late String uptime;
-  late List<DiskInfo?> disk;
+  late List<DiskInfo> disk;
   late TcpStatus tcp;
 
   ServerStatus(this.cpu2Status, this.memList, this.sysVer, this.uptime,

lib/data/model/tcp_status.dart

@@ -11,23 +11,25 @@ class TcpStatus {
 } 
 */
 
-  int? maxConn;
+  late int maxConn;
-  int? active;
+  late int active;
-  int? passive;
+  late int passive;
-  int? fail;
+  late int fail;
 
-  TcpStatus({
+  TcpStatus(
     this.maxConn,
     this.active,
     this.passive,
     this.fail,
-  });
+  );
+
   TcpStatus.fromJson(Map<String, dynamic> json) {
-    maxConn = json["maxConn"]?.toInt();
+    maxConn = json["maxConn"].toInt();
-    active = json["active"]?.toInt();
+    active = json["active"].toInt();
-    passive = json["passive"]?.toInt();
+    passive = json["passive"].toInt();
-    fail = json["fail"]?.toInt();
+    fail = json["fail"].toInt();
   }
+  
   Map<String, dynamic> toJson() {
     final Map<String, dynamic> data = <String, dynamic>{};
     data["maxConn"] = maxConn;

lib/data/provider/server.dart

@@ -32,16 +32,8 @@ class ServerProvider extends BusyProvider {
       [100, 0],
       '',
       '',
-      [
+      [DiskInfo('/', '/', 0, '0', '0', '0')],
-        DiskInfo(
+      TcpStatus(0, 0, 0, 0));
-            mountLocation: '/',
-            mountPath: '/',
-            used: '0',
-            size: '0',
-            avail: '0',
-            usedPercent: 0)
-      ],
-      TcpStatus(maxConn: 0, active: 0, passive: 0, fail: 0));
 
   Future<void> loadLocalData() async {
     setBusyState(true);
@@ -199,13 +191,13 @@ class ServerProvider extends BusyProvider {
       if (idx == 2) {
         final vals = item.split(RegExp(r'\s{1,}'));
         return TcpStatus(
-            maxConn: vals[5].i,
+            vals[5].i,
-            active: vals[6].i,
+            vals[6].i,
-            passive: vals[7].i,
+            vals[7].i,
-            fail: vals[8].i);
+            vals[8].i);
       }
     }
-    return TcpStatus(maxConn: 0, active: 0, passive: 0, fail: 0);
+    return TcpStatus(0, 0, 0, 0);
   }
 
   List<DiskInfo> _getDisk(String disk) {
@@ -216,13 +208,8 @@ class ServerProvider extends BusyProvider {
         continue;
       }
       final vals = item.split(RegExp(r'\s{1,}'));
-      list.add(DiskInfo(
+      list.add(DiskInfo(vals[0], vals[5],
-          mountPath: vals[1],
+          int.parse(vals[4].replaceFirst('%', '')), vals[2], vals[1], vals[3]));
-          mountLocation: vals[5],
-          usedPercent: double.parse(vals[4].replaceFirst('%', '')),
-          used: vals[2],
-          size: vals[1],
-          avail: vals[3]));
     }
     return list;
   }

lib/data/res/build_data.dart

@@ -2,9 +2,8 @@
 
 class BuildData {
   static const String name = "ToolBox";
-  static const int build = 30;
+  static const int build = 40;
-  static const String engine =
+  static const String engine = "Flutter 2.5.3 • channel stable • https://github.com/flutter/flutter.git\nFramework • revision 18116933e7 (13 days ago) • 2021-10-15 10:46:35 -0700\nEngine • revision d3ea636dc5\nTools • Dart 2.14.4\n";
-      "Flutter 2.5.3 • channel stable • https://github.com/flutter/flutter.git\nFramework • revision 18116933e7 (11 days ago) • 2021-10-15 10:46:35 -0700\nEngine • revision d3ea636dc5\nTools • Dart 2.14.4\n";
+  static const String buildAt = "2021-10-28 19:02:21.118303";
-  static const String buildAt = "2021-10-26 17:55:37.268093";
+  static const int modifications = 17;
-  static const int modifications = 0;
 }

lib/data/res/linux_icons.dart

@@ -0,0 +1,4 @@
+import 'package:toolbox/data/model/linux_icon.dart';
+
+final linuxIcons = LinuxIcons(['ubuntu', 'arch', 'centos', 'debian', 'fedora',
+'opensuse', 'kali']);

lib/view/page/server/detail.dart

@@ -3,6 +3,9 @@ import 'package:provider/provider.dart';
 import 'package:toolbox/data/model/server.dart';
 import 'package:toolbox/data/model/server_status.dart';
 import 'package:toolbox/data/provider/server.dart';
+import 'package:toolbox/data/res/color.dart';
+import 'package:toolbox/data/res/linux_icons.dart';
+import 'package:toolbox/view/widget/round_rect_card.dart';
 
 class ServerDetailPage extends StatefulWidget {
   const ServerDetailPage(this.id, {Key? key}) : super(key: key);
@@ -13,7 +16,8 @@ class ServerDetailPage extends StatefulWidget {
   _ServerDetailPageState createState() => _ServerDetailPageState();
 }
 
-class _ServerDetailPageState extends State<ServerDetailPage> {
+class _ServerDetailPageState extends State<ServerDetailPage>
+    with SingleTickerProviderStateMixin {
   late MediaQueryData _media;
 
   @override
@@ -36,24 +40,225 @@ class _ServerDetailPageState extends State<ServerDetailPage> {
         title: Text(si.info.name ?? 'Server Detail'),
       ),
       body: ListView(
-        children: [_buildCPUView(si.status), _buildMemView(si.status)],
+        padding: const EdgeInsets.all(17),
+        children: [
+          _buildLinuxIcon(si.status.sysVer),
+          SizedBox(height: _media.size.height * 0.03),
+          _buildUpTimeAndSys(si.status),
+          _buildCPUView(si.status),
+          _buildDiskView(si.status),
+          _buildMemView(si.status)
+        ],
       ),
     );
   }
 
+  Widget _buildLinuxIcon(String sysVer) {
+    final iconPath = linuxIcons.search(sysVer.toLowerCase());
+    if (iconPath == null) return const SizedBox();
+    return SizedBox(height: _media.size.height * 0.15, child: Image.asset(iconPath));
+  }
+
   Widget _buildCPUView(ServerStatus ss) {
-    return ConstrainedBox(
+    return RoundRectCard(
-      constraints: BoxConstraints(maxHeight: _media.size.height * 0.3),
+      SizedBox(
-      child: ListView.builder(
+        height: 12 * ss.cpu2Status.coresCount + 67,
-        itemBuilder: (ctx, idx) {
+        child: Column(children: [
-          return Text('$idx ${ss.cpu2Status.usedPercent(coreIdx: idx)}');
+          SizedBox(
-        },
+            height: _media.size.height * 0.02,
-        itemCount: ss.cpu2Status.now.length,
+          ),
+          Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              Text(
+                '${ss.cpu2Status.usedPercent(coreIdx: 0).toInt()}%',
+                style: const TextStyle(fontSize: 27),
+                textScaleFactor: 1.0,
+              ),
+              Row(
+                children: [
+                  _buildCPUTimePercent(ss.cpu2Status.user, 'user'),
+                  SizedBox(
+                    width: _media.size.width * 0.03,
+                  ),
+                  _buildCPUTimePercent(ss.cpu2Status.sys, 'sys'),
+                  SizedBox(
+                    width: _media.size.width * 0.03,
+                  ),
+                  _buildCPUTimePercent(ss.cpu2Status.nice, 'nice'),
+                  SizedBox(
+                    width: _media.size.width * 0.03,
+                  ),
+                  _buildCPUTimePercent(ss.cpu2Status.idle, 'idle')
+                ],
+              )
+            ],
+          ),
+          _buildCPUProgress(ss)
+        ]),
       ),
     );
   }
 
+  Widget _buildCPUTimePercent(double percent, String timeType) {
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      mainAxisAlignment: MainAxisAlignment.center,
+      crossAxisAlignment: CrossAxisAlignment.end,
+      children: [
+        Text(
+          percent.toStringAsFixed(1) + '%',
+          style: const TextStyle(fontSize: 13),
+          textScaleFactor: 1.0,
+        ),
+        Text(
+          timeType,
+          style: const TextStyle(fontSize: 10, color: Colors.grey),
+          textScaleFactor: 1.0,
+        ),
+      ],
+    );
+  }
+
+  Widget _buildCPUProgress(ServerStatus ss) {
+    return SizedBox(
+      height: 12.0 * ss.cpu2Status.coresCount,
+      child: ListView.builder(
+        physics: const NeverScrollableScrollPhysics(),
+        padding: const EdgeInsets.symmetric(vertical: 17),
+        itemBuilder: (ctx, idx) {
+          if (idx == 0) return const SizedBox();
+          return Padding(
+            padding: const EdgeInsets.all(2),
+            child: _buildProgress(ss.cpu2Status.usedPercent(coreIdx: idx)),
+          );
+        },
+        itemCount: ss.cpu2Status.coresCount,
+      ),
+    );
+  }
+
+  Widget _buildProgress(double percent) {
+    final pColor = primaryColor;
+    final percentWithinOne = percent / 100;
+    return LinearProgressIndicator(
+      value: percentWithinOne,
+      minHeight: 7,
+      backgroundColor: Colors.grey[100],
+      color: pColor.withOpacity(0.5 + percentWithinOne / 2),
+    );
+  }
+
+  Widget _buildUpTimeAndSys(ServerStatus ss) {
+    return RoundRectCard(Padding(
+      padding: const EdgeInsets.symmetric(vertical: 13),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          Text(ss.sysVer),
+          Text(ss.uptime),
+        ],
+      ),
+    ));
+  }
+
   Widget _buildMemView(ServerStatus ss) {
-    return Text(ss.memList.length.toString());
+    final pColor = primaryColor;
+    final used = ss.memList[1] / ss.memList[0];
+    final width = _media.size.width - 17 * 2 - 17 * 2;
+    return RoundRectCard(SizedBox(
+      height: 47,
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.center,
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              _buildMemExplain('Used', pColor),
+              _buildMemExplain('Cache', pColor.withAlpha(77)),
+              _buildMemExplain('Avail', Colors.grey.shade100)
+            ],
+          ),
+          const SizedBox(
+            height: 7,
+          ),
+          Row(
+            children: [
+              SizedBox(
+                  width: width * used,
+                  child: LinearProgressIndicator(
+                    value: 1,
+                    color: pColor,
+                  )),
+              SizedBox(
+                width: width * (1 - used),
+                child: LinearProgressIndicator(
+                  value: ss.memList[4] / ss.memList[0],
+                  backgroundColor: Colors.grey[100],
+                  color: pColor.withAlpha(77),
+                ),
+              )
+            ],
+          )
+        ],
+      ),
+    ));
+  }
+
+  Widget _buildMemExplain(String type, Color color) {
+    return Row(
+      children: [
+        Container(
+          color: color,
+          height: 11,
+          width: 11,
+        ),
+        const SizedBox(width: 4),
+        Text(type, style: const TextStyle(fontSize: 10), textScaleFactor: 1.0)
+      ],
+    );
+  }
+
+  Widget _buildDiskView(ServerStatus ss) {
+    final clone = ss.disk.toList();
+    for (var item in ss.disk) {
+      if (ignorePath.any((ele) => item.mountLocation.contains(ele))) {
+        clone.remove(item);
       }
     }
+    return RoundRectCard(SizedBox(
+      height: 27 * clone.length + 25,
+      child: ListView.builder(
+          padding: const EdgeInsets.symmetric(vertical: 13),
+          physics: const NeverScrollableScrollPhysics(),
+          itemCount: clone.length,
+          itemBuilder: (_, idx) {
+            final disk = clone[idx];
+            return Padding(
+              padding: const EdgeInsets.all(3),
+              child: Column(
+                children: [
+                  Row(
+                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                    children: [
+                      Text(
+                        '${disk.usedPercent}% of ${disk.size}',
+                        style: const TextStyle(fontSize: 11),
+                        textScaleFactor: 1.0,
+                      ),
+                      Text(disk.mountPath,
+                          style: const TextStyle(fontSize: 11),
+                          textScaleFactor: 1.0)
+                    ],
+                  ),
+                  _buildProgress(disk.usedPercent.toDouble())
+                ],
+              ),
+            );
+          }),
+    ));
+  }
+
+  static const ignorePath = ['/run', '/sys', '/dev/shm', '/snap'];
+}

lib/view/page/server/tab.dart

@@ -110,7 +110,7 @@ class _ServerPageState extends State<ServerPage>
   Widget _buildRealServerCard(
       ServerStatus ss, String serverName, ServerConnectionState cs) {
     final rootDisk =
-        ss.disk.firstWhere((element) => element!.mountLocation == '/');
+        ss.disk.firstWhere((element) => element.mountLocation == '/');
 
     return Column(
       crossAxisAlignment: CrossAxisAlignment.start,
@@ -137,11 +137,10 @@ class _ServerPageState extends State<ServerPage>
           mainAxisAlignment: MainAxisAlignment.spaceBetween,
           children: [
             _buildPercentCircle(ss.cpu2Status.usedPercent(), 'CPU'),
-            _buildPercentCircle(
+            _buildPercentCircle(ss.memList[1] / ss.memList[0] * 100, 'Mem'),
-                ss.memList[1]! / ss.memList[0]! * 100 + 0.01, 'Mem'),
+            _buildIOData('Net', 'Conn:\n' + ss.tcp.maxConn.toString(),
-            _buildIOData('Net', 'Conn:\n' + ss.tcp.maxConn!.toString(),
                 'Fail:\n' + ss.tcp.fail.toString()),
-            _buildIOData('Disk', 'Total:\n' + rootDisk!.size!,
+            _buildIOData('Disk', 'Total:\n' + rootDisk.size,
                 'Used:\n' + rootDisk.usedPercent.toString() + '%')
           ],
         ),
@@ -203,8 +202,8 @@ class _ServerPageState extends State<ServerPage>
   }
 
   Widget _buildPercentCircle(double percent, String title) {
-    if (percent == 0.0) percent += 0.01;
+    if (percent <= 0) percent = 0.01;
-    if (percent == 100.0) percent -= 0.01;
+    if (percent >= 100) percent = 99.9;
     return SizedBox(
       width: _media.size.width * 0.2,
       height: _media.size.height * 0.1,