runtime/observatory_2/lib/src/elements/process_snapshot.dart

// Copyright (c) 2020, the Dart project authors.  Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.

import 'dart:async';
import 'dart:html';
import 'dart:convert';
import 'package:observatory_2/models.dart' as M;
import 'package:observatory_2/object_graph.dart';
import 'package:observatory_2/src/elements/class_ref.dart';
import 'package:observatory_2/src/elements/containers/virtual_tree.dart';
import 'package:observatory_2/src/elements/curly_block.dart';
import 'package:observatory_2/src/elements/helpers/any_ref.dart';
import 'package:observatory_2/src/elements/helpers/nav_bar.dart';
import 'package:observatory_2/src/elements/helpers/nav_menu.dart';
import 'package:observatory_2/src/elements/helpers/rendering_scheduler.dart';
import 'package:observatory_2/src/elements/helpers/custom_element.dart';
import 'package:observatory_2/src/elements/helpers/uris.dart';
import 'package:observatory_2/src/elements/nav/isolate_menu.dart';
import 'package:observatory_2/src/elements/nav/notify.dart';
import 'package:observatory_2/src/elements/nav/refresh.dart';
import 'package:observatory_2/src/elements/nav/top_menu.dart';
import 'package:observatory_2/src/elements/nav/vm_menu.dart';
import 'package:observatory_2/src/elements/tree_map.dart';
import 'package:observatory_2/repositories.dart';
import 'package:observatory_2/utils.dart';

class ProcessItemTreeMap extends NormalTreeMap<Map> {
  ProcessSnapshotElement element;
  ProcessItemTreeMap(this.element);

  int getSize(Map node) => node["size"];
  String getType(Map node) => node["name"];
  String getName(Map node) => node["name"];
  String getTooltip(Map node) => getLabel(node) + "\n" + node["description"];
  Map getParent(Map node) => node["parent"];
  Iterable<Map> getChildren(Map node) => new List<Map>.from(node["children"]);
  void onSelect(Map node) {
    element.selection = node;
    element._r.dirty();
  }

  void onDetails(Map node) {}
}

class ProcessSnapshotElement extends CustomElement implements Renderable {
  RenderingScheduler<ProcessSnapshotElement> _r;

  Stream<RenderedEvent<ProcessSnapshotElement>> get onRendered => _r.onRendered;

  M.VM _vm;
  M.EventRepository _events;
  M.NotificationRepository _notifications;
  M.NotificationRepository get notifications => _notifications;
  M.VMRef get vm => _vm;

  List<Map> _loadedSnapshots = <Map>[];
  Map selection;
  Map _snapshotA;
  Map _snapshotB;

  factory ProcessSnapshotElement(
      M.VM vm, M.EventRepository events, M.NotificationRepository notifications,
      {RenderingQueue queue}) {
    assert(vm != null);
    assert(events != null);
    assert(notifications != null);
    ProcessSnapshotElement e = new ProcessSnapshotElement.created();
    e._r = new RenderingScheduler<ProcessSnapshotElement>(e, queue: queue);
    e._vm = vm;
    e._events = events;
    e._notifications = notifications;
    return e;
  }

  ProcessSnapshotElement.created() : super.created('process-snapshot');

  @override
  attached() {
    super.attached();
    _r.enable();
    _refresh();
  }

  @override
  detached() {
    super.detached();
    _r.disable(notify: true);
    children = <Element>[];
  }

  void render() {
    final content = <Element>[
      navBar(<Element>[
        new NavTopMenuElement(queue: _r.queue).element,
        new NavVMMenuElement(_vm, _events, queue: _r.queue).element,
        navMenu('process snapshot'),
        (new NavRefreshElement(queue: _r.queue)
              ..onRefresh.listen((e) {
                _refresh();
              }))
            .element,
        (new NavRefreshElement(label: 'save', queue: _r.queue)
              ..disabled = _snapshotA == null
              ..onRefresh.listen((e) {
                _save();
              }))
            .element,
        (new NavRefreshElement(label: 'load', queue: _r.queue)
              ..onRefresh.listen((e) {
                _load();
              }))
            .element,
        new NavNotifyElement(_notifications, queue: _r.queue).element
      ]),
    ];
    if (_snapshotA == null) {
      // Loading
      content.add(new SpanElement()..text = "Loading");
    } else {
      // Loaded
      content.addAll(_createReport());
    }
    children = content;
  }

  _refresh() async {
    Map snapshot =
        await (vm as dynamic).invokeRpcNoUpgrade("getProcessMemoryUsage", {});
    _snapshotLoaded(snapshot);
  }

  _save() {
    var blob = new Blob([jsonEncode(_snapshotA)], 'application/json');
    var blobUrl = Url.createObjectUrl(blob);
    var link = new AnchorElement();
    link.href = blobUrl;
    var now = new DateTime.now();
    link.download = 'dart-process-${now.year}-${now.month}-${now.day}.json';
    link.click();
  }

  _load() {
    var input = new InputElement();
    input.type = 'file';
    input.multiple = false;
    input.onChange.listen((event) {
      var file = input.files[0];
      var reader = new FileReader();
      reader.onLoad.listen((event) async {
        _snapshotLoaded(jsonDecode(reader.result));
      });
      reader.readAsText(file);
    });
    input.click();
  }

  _snapshotLoaded(Map snapshot) {
    _loadedSnapshots.add(snapshot);
    _snapshotA = snapshot;
    _snapshotB = snapshot;
    _r.dirty();
  }

  void _createTreeMap<T>(List<HtmlElement> report, TreeMap<T> treemap, T root) {
    final content = new DivElement();
    content.style.border = '1px solid black';
    content.style.width = '100%';
    content.style.height = '100%';
    content.text = 'Performing layout...';
    Timer.run(() {
      // Generate the treemap after the content div has been added to the
      // document so that we can ask the browser how much space is
      // available for treemap layout.
      treemap.showIn(root, content);
    });

    final text =
        'Double-click a tile to zoom in. Double-click the outermost tile to '
        'zoom out. Process memory that is not further subdivided is non-Dart '
        'memory not known to the VM.';
    report.addAll([
      new DivElement()
        ..classes = ['content-centered-big', 'explanation']
        ..text = text,
      new DivElement()
        ..classes = ['content-centered-big']
        ..style.width = '100%'
        ..style.height = '100%'
        ..children = [content]
    ]);
  }

  List<Element> _createReport() {
    var report = <HtmlElement>[
      new DivElement()
        ..classes = ['content-centered-big']
        ..children = <Element>[
          new DivElement()
            ..classes = ['memberList']
            ..children = <Element>[
              new DivElement()
                ..classes = ['memberItem']
                ..children = <Element>[
                  new DivElement()
                    ..classes = ['memberName']
                    ..text = 'Snapshot A',
                  new DivElement()
                    ..classes = ['memberName']
                    ..children = _createSnapshotSelectA()
                ],
              // TODO(rmacnak): Diffing.
              // new DivElement()
              //  ..classes = ['memberItem']
              //  ..children = <Element>[
              //    new DivElement()
              //      ..classes = ['memberName']
              //      ..text = 'Snapshot B',
              //    new DivElement()
              //      ..classes = ['memberName']
              //      ..children = _createSnapshotSelectB()
              //  ],
            ]
        ],
    ];
    if (selection == null) {
      selection = _snapshotA["root"];
    }
    _createTreeMap(report, new ProcessItemTreeMap(this), selection);
    return report;
  }

  String snapshotToString(snapshot) {
    if (snapshot == null) return "None";
    return snapshot["root"]["name"] +
        " " +
        Utils.formatSize(snapshot["root"]["size"]);
  }

  List<Element> _createSnapshotSelectA() {
    var s;
    return [
      s = new SelectElement()
        ..classes = ['analysis-select']
        ..value = snapshotToString(_snapshotA)
        ..children = _loadedSnapshots.map((snapshot) {
          return new OptionElement(
              value: snapshotToString(snapshot),
              selected: _snapshotA == snapshot)
            ..text = snapshotToString(snapshot);
        }).toList(growable: false)
        ..onChange.listen((_) {
          _snapshotA = _loadedSnapshots[s.selectedIndex];
          selection = null;
          _r.dirty();
        })
    ];
  }

  List<Element> _createSnapshotSelectB() {
    var s;
    return [
      s = new SelectElement()
        ..classes = ['analysis-select']
        ..value = snapshotToString(_snapshotB)
        ..children = _loadedSnapshots.map((snapshot) {
          return new OptionElement(
              value: snapshotToString(snapshot),
              selected: _snapshotB == snapshot)
            ..text = snapshotToString(snapshot);
        }).toList(growable: false)
        ..onChange.listen((_) {
          _snapshotB = _loadedSnapshots[s.selectedIndex];
          selection = null;
          _r.dirty();
        })
    ];
  }
}