Offline support for Network page

[hrajwade96]

Adding offline support to Network page.

issue link - #4470

List which issues are fixed by this PR.

Please add a note to packages/devtools_app/release_notes/NEXT_RELEASE_NOTES.md if your change requires release notes. Otherwise, add the 'release-notes-not-required' label to the PR.

Pre-launch Checklist

• I read the Contributor Guide and followed the process outlined there for submitting PRs.
• I read the Tree Hygiene wiki page, which explains my responsibilities.
• I read the Flutter Style Guide recently, and have followed its advice.
• I signed the CLA.
• I listed at least one issue that this PR fixes in the description above.
• I updated/added relevant documentation (doc comments with ///).
• I added new tests to check the change I am making, or there is a reason for not adding tests.

If you need help, consider asking for help on Discord.

[kenzieschmoll]

@hrajwade96 is this PR ready for review or is this still a work in progress?

[hrajwade96]

@hrajwade96 is this PR ready for review or is this still a work in progress?

@kenzieschmoll just finishing up few things, I will mark it ready soon

[kenzieschmoll]

the code after this if statement should be put in an else block

[hrajwade96]

not using else was an oversight, added else block now, and also now there is no code outside.

[kenzieschmoll]

please address this TODO.

[hrajwade96]

While testing I noticed 2 issues :

1. The timings in socket stats are having discrepancy in online and offline mode - I thought this could be due to _timelineMicrosBase but I tried adding/ removing it there was still a discrepancy. Is it due to some time zone or formatting issue? I am trying to figure out.
2. The Request and Response data is missing in offline mode - I think it's because full fetch is not called, if we want to call where can we ideally call it?

Attaching SS for 1st point :
Online mode

Offline mode

[hrajwade96]

Another point is that in offline mode data of socket and http requests is grouped when it's populated.
I think we should show them in their original order as the requests came in? Perhaps we can pack them in a combined way instead, or other way is to reorder before rendering based on timestamps (once we fix the timings) ?

[hrajwade96]

Actually past 2 weeks I've been on vacation, and then unwell so got very little time to investigate.

[kenzieschmoll]

The table should already sort the data by timestamp.

[hrajwade96]

Right, just checked it thanks, it was just due to the issue in timings it was looking grouped.

[hrajwade96]

@kenzieschmoll can you help with first 2 points? also point 3) on page refresh when in offline mode, this is how it is looking like currently, it's clearing the list, and also not showing exit cta
what is the expected behaviour here?
Do we need to persist the data in storage?

[hrajwade96]

I think 1st point is due to value of _timelineMicrosBase being reset when entering offline mode, causing a discrepancy in timing calculation with this function :
int timelineMicrosecondsSinceEpoch(int micros) { return _timelineMicrosBase + micros; }

I fixed it by adding timelineMicrosOffset in offline data.

[hrajwade96]

2nd and 3rd points are remaining,
for (2) - I tried fetching full data with periodic timer

  void startPeriodicExport() {
    _periodicExportTimer = Timer.periodic(const Duration(milliseconds: 500), (
      _,
    ) async {
      try {
        unawaited(_fetchFullDataBeforeExport());
        debugPrint('Export data fetched successfully');
      } catch (e) {
        debugPrint('Error during periodic export fetch: $e');
      }
    });
  }

  void stopPeriodicExport() {
    _periodicExportTimer?.cancel();
    _periodicExportTimer = null;
  }

so that full data is always available before entering in offline mode. Or alternatively we can fetch each time new request data is added in the current list. Is this fine? or any better ideas?

[hrajwade96]

for (3) is there any simple way to add anther check for showing exit offline cta?
such as whenever it is disconnected, current check doesn't seem to work after page refresh

[kenzieschmoll]

Please add test coverage for this change. Thanks!

[kenzieschmoll]

i think we can remove these expectations since they are already tested above. Fine to leave the socketData.length check above on line 123 though

[hrajwade96]

done

[kenzieschmoll]

same here: we already verified the socket data above, so these can be removed

[hrajwade96]

done

[kenzieschmoll]

Just a couple more comments. Thank you for all your work on this change!

[kenzieschmoll]

Looks like there are several failing checks. Please also add an entry to NEXT_RELEASE_NOTES.md so that the release notes check passes.

[kenzieschmoll]

You will likely have several merge conflicts after pulling in the tip of the master branch. A change just landed that upgraded the Flutter version used in DevTools, which updated to a new version of the dart formatter. Here's what I recommend to make this merge simpler for you:

1. Merge the master branch into your branch.
2. For all conflicts, accept your revision of the file..
3. Run dt update-flutter-sdk. This will update the flutter sdk contained at tool/flutter-sdk to the version used on the DevTools CI.
4. Run tool/flutter-sdk/bin/dart format from the devtools_app directory. This will format your files with your changes to use the new formatter.