Offline support for Network page

packages/devtools_app/lib/src/screens/network/network_controller.dart

@@ -178,19 +178,25 @@ class NetworkController extends DisposableController
   }
 
   Future<void> loadOfflineData(OfflineNetworkData offlineData) async {
+    List<HttpProfileRequest> httpProfileData = [];
+    List<SocketStatistic> socketStatsData = [];
+
+    httpProfileData = offlineData.httpRequestData.mapToHttpProfileRequests;
+    socketStatsData = offlineData.socketData.mapToSocketStatistics;
+
     _currentNetworkRequests
       ..clear()
       ..updateOrAddAll(
-        requests: offlineData.currentRequests!,
-        sockets: offlineData.socketStats,
-        timelineMicrosOffset: DateTime.now().microsecondsSinceEpoch -
-            (networkService.timeStamp ?? 0),
+        requests: httpProfileData,
+        sockets: socketStatsData,
+        timelineMicrosOffset: DateTime.now().microsecondsSinceEpoch,
       );
     _filterAndRefreshSearchMatches();
 
     // If a selectedRequestId is available, select it in offline mode.
     if (offlineData.selectedRequestId != null) {
-      final selected = offlineData.getRequest(offlineData.selectedRequestId!);
+      final selected = _currentNetworkRequests
+          .getRequest(offlineData.selectedRequestId ?? '');
       if (selected != null) {
         selectedRequest.value = selected;
         resetDropDown();
@@ -428,11 +434,20 @@ class NetworkController extends DisposableController
 
   @override
   OfflineScreenData prepareOfflineScreenData() {
+    final httpRequestData = <DartIOHttpRequestData>[];
+    final socketData = <Socket>[];
+    for (final request in _currentNetworkRequests.value) {
+      if (request is DartIOHttpRequestData) {
+        httpRequestData.add(request);
+      } else if (request is Socket) {
+        socketData.add(request);
+      }
+    }
+
     final offlineData = OfflineNetworkData(
-      requests: filteredData.value.whereType<DartIOHttpRequestData>().toList(),
+      httpRequestData: httpRequestData,
+      socketData: socketData,
       selectedRequestId: selectedRequest.value?.id,
-      currentRequests: _networkService.currentHttpRequests,
-      socketStats: _networkService.sockets ?? [],
     );
 
     return OfflineScreenData(

packages/devtools_app/lib/src/screens/network/network_model.dart

@@ -2,13 +2,15 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import 'package:devtools_shared/devtools_shared.dart';
 import 'package:flutter/material.dart';
 import 'package:vm_service/vm_service.dart';
 
 import '../../shared/primitives/utils.dart';
 import '../../shared/ui/search.dart';
 
-abstract class NetworkRequest with ChangeNotifier, SearchableDataMixin {
+abstract class NetworkRequest
+    with ChangeNotifier, SearchableDataMixin, Serializable {
   String get method;
 
   String get uri;
@@ -180,4 +182,60 @@ class Socket extends NetworkRequest {
 
   @override
   int get hashCode => id.hashCode;
+
+  SocketStatistic get socketData => _socket;
+
+  static Socket fromJson(Map<String, Object?> json) {
+    return Socket(
+      SocketStatistic.parse(json['socket'] as Map<String, dynamic>)!,
+      json['timelineMicrosBase'] as int,
+    );
+  }
+
+  @override
+  Map<String, Object?> toJson() {
+    return {
+      SocketJsonKey.timelineMicrosBase.name: _timelineMicrosBase,
+      SocketJsonKey.socket.name: _socket.toJson(),
+    };
+  }
+}
+
+extension on SocketStatistic {
+  Map<String, Object?> toJson() {
+    return {
+      SocketJsonKey.id.name: id,
+      SocketJsonKey.startTime.name: startTime,
+      SocketJsonKey.endTime.name: endTime,
+      //TODO verify if these timings are in correct format
+      SocketJsonKey.lastReadTime.name: lastReadTime,
+      SocketJsonKey.lastWriteTime.name: lastWriteTime,
+      SocketJsonKey.socketType.name: socketType,
+      SocketJsonKey.address.name: address,
+      SocketJsonKey.port.name: port,
+      SocketJsonKey.readBytes.name: readBytes,
+      SocketJsonKey.writeBytes.name: writeBytes,
+    };
+  }
+}
+
+enum SocketJsonKey {
+  id,
+  startTime,
+  endTime,
+  lastReadTime,
+  lastWriteTime,
+  socketType,
+  address,
+  port,
+  readBytes,
+  writeBytes,
+  timelineMicrosBase,
+  socket,
+}
+
+extension SocketExtension on List<Socket> {
+  List<SocketStatistic> get mapToSocketStatistics {
+    return map((socket) => socket._socket).toList();
+  }
 }

packages/devtools_app/lib/src/screens/network/network_screen.dart

@@ -14,7 +14,6 @@ import '../../shared/analytics/analytics.dart' as ga;
 import '../../shared/analytics/constants.dart' as gac;
 import '../../shared/common_widgets.dart';
 import '../../shared/config_specific/copy_to_clipboard/copy_to_clipboard.dart';
-import '../../shared/globals.dart';
 import '../../shared/http/curl_command.dart';
 import '../../shared/http/http_request_data.dart';
 import '../../shared/primitives/utils.dart';
@@ -138,9 +137,9 @@ class _NetworkScreenBodyState extends State<NetworkScreenBody>
     return Column(
       children: [
         OfflineAwareControls(
-          controlsBuilder: (_) => _NetworkProfilerControls(
+          controlsBuilder: (offline) => _NetworkProfilerControls(
             controller: controller,
-            offline: offlineDataController.showingOfflineData.value,
+            offline: offline,
           ),
           gaScreen: gac.network,
         ),
@@ -209,35 +208,37 @@ class _NetworkProfilerControlsState extends State<_NetworkProfilerControls>
     final hasRequests = _filteredRequests.isNotEmpty;
     return Row(
       children: [
-        StartStopRecordingButton(
-          recording: _recording,
-          onPressed: () async =>
-              await widget.controller.togglePolling(!_recording),
-          tooltipOverride: _recording
-              ? 'Stop recording network traffic'
-              : 'Resume recording network traffic',
-          minScreenWidthForTextBeforeScaling: double.infinity,
-          gaScreen: gac.network,
-          gaSelection: _recording ? gac.pause : gac.resume,
-        ),
-        const SizedBox(width: denseSpacing),
-        ClearButton(
-          minScreenWidthForTextBeforeScaling:
-              _NetworkProfilerControls._includeTextWidth,
-          gaScreen: gac.network,
-          gaSelection: gac.clear,
-          onPressed: widget.controller.clear,
-        ),
-        const SizedBox(width: defaultSpacing),
-        DownloadButton(
-          minScreenWidthForTextBeforeScaling:
-              _NetworkProfilerControls._includeTextWidth,
-          onPressed: widget.controller.exportAsHarFile,
-          gaScreen: gac.network,
-          gaSelection: gac.NetworkEvent.downloadAsHar.name,
-        ),
-        const SizedBox(width: defaultSpacing),
-        const Expanded(child: SizedBox()),
+        if (!widget.offline) ...[
+          StartStopRecordingButton(
+            recording: _recording,
+            onPressed: () async =>
+                await widget.controller.togglePolling(!_recording),
+            tooltipOverride: _recording
+                ? 'Stop recording network traffic'
+                : 'Resume recording network traffic',
+            minScreenWidthForTextBeforeScaling: double.infinity,
+            gaScreen: gac.network,
+            gaSelection: _recording ? gac.pause : gac.resume,
+          ),
+          const SizedBox(width: denseSpacing),
+          ClearButton(
+            minScreenWidthForTextBeforeScaling:
+                _NetworkProfilerControls._includeTextWidth,
+            gaScreen: gac.network,
+            gaSelection: gac.clear,
+            onPressed: widget.controller.clear,
+          ),
+          const SizedBox(width: defaultSpacing),
+          DownloadButton(
+            minScreenWidthForTextBeforeScaling:
+                _NetworkProfilerControls._includeTextWidth,
+            onPressed: widget.controller.exportAsHarFile,
+            gaScreen: gac.network,
+            gaSelection: gac.NetworkEvent.downloadAsHar.name,
+          ),
+          const SizedBox(width: defaultSpacing),
+        ],
+        const Spacer(),
         // TODO(kenz): fix focus issue when state is refreshed
         SearchField<NetworkController>(
           searchController: widget.controller,

packages/devtools_app/lib/src/screens/network/network_service.dart

@@ -10,13 +10,8 @@ import 'network_controller.dart';
 
 class NetworkService {
   NetworkService(this.networkController);
-  List<HttpProfileRequest>? _httpRequests;
-  List<SocketStatistic>? _sockets;
+
   final NetworkController networkController;
-  List<HttpProfileRequest>? get currentHttpRequests => _httpRequests;
-  List<SocketStatistic>? get sockets => _sockets;
-  int? _timeStamp;
-  int? get timeStamp => _timeStamp;
 
   /// Updates the last Socket data refresh time to the current time.
   ///
@@ -61,20 +56,15 @@ class NetworkService {
     if (serviceConnection.serviceManager.service == null) return;
     final timestampObj =
         await serviceConnection.serviceManager.service!.getVMTimelineMicros();
-    _timeStamp = timestampObj.timestamp!;
-
-    // Refresh socket data
-    _sockets ??= await _refreshSockets();
-    _sockets?.addAll(await _refreshSockets());
-
-    // Refresh HTTP request data
-    _httpRequests ??= await _refreshHttpProfile();
-    _httpRequests?.addAll(await _refreshHttpProfile());
-
+    final timestamp = timestampObj.timestamp!;
+    final sockets = await _refreshSockets();
+    networkController.lastSocketDataRefreshMicros = timestamp;
+    List<HttpProfileRequest>? httpRequests;
+    httpRequests = await _refreshHttpProfile();
     networkController.lastHttpDataRefreshTime = DateTime.now();
     networkController.processNetworkTraffic(
-      sockets: _sockets ?? [],
-      httpRequests: _httpRequests,
+      sockets: sockets,
+      httpRequests: httpRequests,
     );
   }
 

packages/devtools_app/lib/src/screens/network/offline_network_data.dart

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import 'package:devtools_shared/devtools_shared.dart';
-import 'package:vm_service/vm_service.dart';
 
 import '../../shared/http/http_request_data.dart';
 import '../../shared/primitives/utils.dart';
@@ -15,68 +14,49 @@ import 'network_model.dart';
 /// It is responsible for serializing and deserializing offline network data.
 class OfflineNetworkData with Serializable {
   OfflineNetworkData({
-    required this.requests,
+    required this.httpRequestData,
     this.selectedRequestId,
-    required this.currentRequests,
-    required this.socketStats,
+    required this.socketData,
   });
 
   /// Creates an instance of [OfflineNetworkData] from a JSON map.
   factory OfflineNetworkData.fromJson(Map<String, dynamic> json) {
-    final List<dynamic> requestsJson = json['requests'] ?? [];
-    final List<HttpProfileRequest>? currentReqData = json['currentRequests'];
-    final List<SocketStatistic>? socketStats = json['socketStats'];
-
-    final requests = requestsJson
-        .map(
-          (e) => DartIOHttpRequestData.fromJson(
-            e as Map<String, dynamic>,
-            null,
-            null,
-          ),
-        )
-        .toList();
+    final httpRequestData = json[OfflineDataKeys.httpRequestData.name]
+        as List<DartIOHttpRequestData>;
+    List<Socket>? socketReqData = [];
+    socketReqData = json[OfflineDataKeys.socketData.name] as List<Socket>;
 
     return OfflineNetworkData(
-      requests: requests,
-      selectedRequestId: json['selectedRequestId'] as String?,
-      currentRequests: currentReqData,
-      socketStats: socketStats!,
+      httpRequestData: httpRequestData,
+      selectedRequestId:
+          json[OfflineDataKeys.selectedRequestId.name] as String?,
+      socketData: socketReqData,
     );
   }
-  bool get isEmpty => requests.isNullOrEmpty;
+  bool get isEmpty => httpRequestData.isNullOrEmpty;
 
   /// List of current [DartIOHttpRequestData] network requests.
-  final List<DartIOHttpRequestData> requests;
-
-  /// Get a request by matching its `id` field.
-  // Temporarily added to check selection in the filtered requests data,
-  // until we have current requests data in place
-  NetworkRequest? getRequest(String id) {
-    // Search through the list of requests and return the one with the matching ID.
-    return requests.firstWhere(
-      (request) => request.id == id,
-    );
-  }
+  final List<DartIOHttpRequestData> httpRequestData;
 
   /// The ID of the currently selected request, if any.
   final String? selectedRequestId;
 
-  /// Current requests from network controller.
-
-  final List<HttpProfileRequest>? currentRequests;
-
   /// Socket statistics
-  final List<SocketStatistic> socketStats;
+  final List<Socket> socketData;
 
   /// Converts the current offline data to a JSON format.
   @override
   Map<String, dynamic> toJson() {
     return {
-      'requests': requests.map((request) => request.toJson()).toList(),
-      'selectedRequestId': selectedRequestId,
-      'currentRequests': currentRequests,
-      'socketStats': socketStats,
+      OfflineDataKeys.httpRequestData.name: httpRequestData,
+      OfflineDataKeys.selectedRequestId.name: selectedRequestId,
+      OfflineDataKeys.socketData.name: socketData,
     };
   }
 }
+
+enum OfflineDataKeys {
+  httpRequestData,
+  selectedRequestId,
+  socketData,
+}

packages/devtools_app/lib/src/shared/http/http_request_data.dart

@@ -63,7 +63,8 @@ class DartIOHttpRequestData extends NetworkRequest {
           requestPostData?[HttpRequestDataKeys.text.name].toString();
   }
   //TODO go through all parameters, to check if they are correctly added.
-  Map<String, Object>? toJson() {
+  @override
+  Map<String, Object?> toJson() {
     try {
       return {
         HttpRequestDataKeys.startedDateTime.name:
@@ -173,7 +174,7 @@ class DartIOHttpRequestData extends NetworkRequest {
     } catch (e) {
       _log.shout('Error in toJson: $e');
     }
-    return null;
+    return {};
   }
 
   static const _connectionInfoKey = 'connectionInfo';
@@ -453,3 +454,11 @@ class DartIOHttpRequestData extends NetworkRequest {
         startTimestamp,
       );
 }
+
+extension HttpRequestExtension on List<DartIOHttpRequestData> {
+  List<HttpProfileRequest> get mapToHttpProfileRequests {
+    return map(
+      (httpRequestData) => httpRequestData._request as HttpProfileRequest,
+    ).toList();
+  }
+}