Added Editor stream and sendObjectToEditor RPC into Service Protocol

runtime/observatory/lib/src/elements/memory_dashboard.dart

+// Copyright (c) 2014, 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 'package:charted/charted.dart';
+import "package:charted/charts/charts.dart";
+import 'package:observatory/models.dart' as M;
+import 'package:observatory/src/elements/class_ref.dart';
+import 'package:observatory/src/elements/containers/virtual_collection.dart';
+import 'package:observatory/src/elements/helpers/nav_bar.dart';
+import 'package:observatory/src/elements/helpers/rendering_scheduler.dart';
+import 'package:observatory/src/elements/helpers/tag.dart';
+import 'package:observatory/src/elements/nav/isolate_menu.dart';
+import 'package:observatory/src/elements/nav/notify.dart';
+import 'package:observatory/src/elements/nav/refresh.dart';
+import 'package:observatory/src/elements/nav/top_menu.dart';
+import 'package:observatory/src/elements/nav/vm_menu.dart';
+import 'package:observatory/utils.dart';
+
+enum _SortingField {
+  accumulatedSize,
+  accumulatedInstances,
+  currentSize,
+  currentInstances,
+  newAccumulatedSize,
+  newAccumulatedInstances,
+  newCurrentSize,
+  newCurrentInstances,
+  oldAccumulatedSize,
+  oldAccumulatedInstances,
+  oldCurrentSize,
+  oldCurrentInstances,
+  className,
+}
+
+enum _SortingDirection { ascending, descending }
+
+class MemoryDashboardElement extends HtmlElement implements Renderable {

[rmacnak, 2017/06/27 16:47:56]

This currently looks like just a copy of the allocation profile. Is this
work-in-progress that belongs in a separate CL?

[cbernaschina, 2017/06/27 17:03:25]

It is the initial version of the User Oriented tool that is going to be
integrated inside the Editors.
The first version is going to be the same as the allocation profile, but we are
going to change it given the feedback from the team working on the IntelliJ
integration.
We will keep the allocation profile as it is as a VM Developers oriented tool.

+  static const tag = const Tag<MemoryDashboardElement>('memory-dashboard',
+      dependencies: const [
+        ClassRefElement.tag,
+        NavTopMenuElement.tag,
+        NavVMMenuElement.tag,
+        NavIsolateMenuElement.tag,
+        NavRefreshElement.tag,
+        NavNotifyElement.tag,
+        VirtualCollectionElement.tag
+      ]);
+
+  RenderingScheduler<MemoryDashboardElement> _r;
+
+  Stream<RenderedEvent<MemoryDashboardElement>> get onRendered => _r.onRendered;
+
+  M.VM _vm;
+  M.IsolateRef _isolate;
+  M.EventRepository _events;
+  M.NotificationRepository _notifications;
+  M.AllocationProfileRepository _repository;
+  M.AllocationProfile _profile;
+  M.EditorRepository _editor;
+  bool _autoRefresh = false;
+  bool _isCompacted = false;
+  StreamSubscription _gcSubscription;
+  _SortingField _sortingField = _SortingField.className;
+  _SortingDirection _sortingDirection = _SortingDirection.ascending;
+
+  M.VMRef get vm => _vm;
+  M.IsolateRef get isolate => _isolate;
+  M.NotificationRepository get notifications => _notifications;
+
+  factory MemoryDashboardElement(
+      M.VM vm,
+      M.IsolateRef isolate,
+      M.EventRepository events,
+      M.NotificationRepository notifications,
+      M.AllocationProfileRepository repository,
+      M.EditorRepository editor,
+      {RenderingQueue queue}) {
+    assert(vm != null);
+    assert(isolate != null);
+    assert(events != null);
+    assert(notifications != null);
+    assert(repository != null);
+    assert(editor != null);
+    MemoryDashboardElement e = document.createElement(tag.name);
+    e._r = new RenderingScheduler(e, queue: queue);
+    e._vm = vm;
+    e._isolate = isolate;
+    e._events = events;
+    e._notifications = notifications;
+    e._repository = repository;
+    e._editor = editor;
+    return e;
+  }
+
+  MemoryDashboardElement.created() : super.created();
+
+  @override
+  attached() {
+    super.attached();
+    _r.enable();
+    _refresh();
+    _gcSubscription = _events.onGCEvent.listen((e) {
+      if (_autoRefresh && (e.isolate.id == _isolate.id)) {
+        _refresh();
+      }
+    });
+  }
+
+  @override
+  detached() {
+    super.detached();
+    _r.disable(notify: true);
+    children = [];
+    _gcSubscription.cancel();
+  }
+
+  void render() {
+    children = [
+      navBar([
+        new NavRefreshElement(
+            label: 'Download', disabled: _profile == null, queue: _r.queue)
+          ..onRefresh.listen((_) => _downloadCSV()),
+        new NavRefreshElement(label: 'Reset Accumulator', queue: _r.queue)
+          ..onRefresh.listen((_) => _refresh(reset: true)),
+        new NavRefreshElement(label: 'GC', queue: _r.queue)
+          ..onRefresh.listen((_) => _refresh(gc: true)),
+        new NavRefreshElement(queue: _r.queue)
+          ..onRefresh.listen((_) => _refresh()),
+        new DivElement()
+          ..classes = ['nav-option']
+          ..children = [
+            new CheckboxInputElement()
+              ..id = 'allocation-profile-auto-refresh'
+              ..checked = _autoRefresh
+              ..onChange.listen((_) => _autoRefresh = !_autoRefresh),
+            new LabelElement()
+              ..htmlFor = 'allocation-profile-auto-refresh'
+              ..text = 'Auto-refresh on GC'
+          ],
+        new NavNotifyElement(_notifications, queue: _r.queue)
+      ]),
+      new DivElement()
+        ..classes = ['content-centered-big']
+        ..children = [
+          new HeadingElement.h2()..text = 'Allocation Profile',
+          new HRElement()
+        ]
+    ];
+    if (_profile == null) {
+      children.addAll([
+        new DivElement()
+          ..classes = ['content-centered-big']
+          ..children = [new HeadingElement.h2()..text = 'Loading...']
+      ]);
+    } else {
+      final newChartHost = new DivElement()..classes = ['host'];
+      final newChartLegend = new DivElement()..classes = ['legend'];
+      final oldChartHost = new DivElement()..classes = ['host'];
+      final oldChartLegend = new DivElement()..classes = ['legend'];
+      children.addAll([
+        new DivElement()
+          ..classes = ['content-centered-big']
+          ..children = _isCompacted
+              ? []
+              : [
+                  new DivElement()
+                    ..classes = ['memberList']
+                    ..children = [
+                      new DivElement()
+                        ..classes = ['memberItem']
+                        ..children = [
+                          new DivElement()
+                            ..classes = ['memberName']
+                            ..text = 'last forced GC at',
+                          new DivElement()
+                            ..classes = ['memberValue']
+                            ..text = _profile.lastServiceGC == null
+                                ? '---'
+                                : '${_profile.lastServiceGC}',
+                        ],
+                      new DivElement()
+                        ..classes = ['memberItem']
+                        ..children = [
+                          new DivElement()
+                            ..classes = ['memberName']
+                            ..text = 'last accumulator reset at',
+                          new DivElement()
+                            ..classes = ['memberValue']
+                            ..text = _profile.lastAccumulatorReset == null
+                                ? '---'
+                                : '${_profile.lastAccumulatorReset}',
+                        ]
+                    ],
+                  new HRElement(),
+                ],
+        new DivElement()
+          ..classes = ['content-centered-big', 'compactable']
+          ..children = [
+            new DivElement()
+              ..classes = ['heap-space', 'left']
+              ..children = _isCompacted
+                  ? [
+                      new HeadingElement.h2()
+                        ..text = 'New Generation '
+                            '(${_usedCaption(_profile.newSpace)})',
+                    ]
+                  : [
+                      new HeadingElement.h2()..text = 'New Generation',
+                      new BRElement(),
+                      new DivElement()
+                        ..classes = ['memberList']
+                        ..children = _createSpaceMembers(_profile.newSpace),
+                      new BRElement(),
+                      new DivElement()
+                        ..classes = ['chart']
+                        ..children = [newChartLegend, newChartHost]
+                    ],
+            new DivElement()
+              ..classes = ['heap-space', 'right']
+              ..children = _isCompacted
+                  ? [
+                      new HeadingElement.h2()
+                        ..text = '(${_usedCaption(_profile.oldSpace)}) '
+                            'Old Generation',
+                    ]
+                  : [
+                      new HeadingElement.h2()..text = 'Old Generation',
+                      new BRElement(),
+                      new DivElement()
+                        ..classes = ['memberList']
+                        ..children = _createSpaceMembers(_profile.oldSpace),
+                      new BRElement(),
+                      new DivElement()
+                        ..classes = ['chart']
+                        ..children = [oldChartLegend, oldChartHost]
+                    ],
+            new ButtonElement()
+              ..classes = ['compact']
+              ..text = _isCompacted ? 'expand ▼' : 'compact ▲'
+              ..onClick.listen((_) {
+                _isCompacted = !_isCompacted;
+                _r.dirty();
+              }),
+            new HRElement()
+          ],
+        new DivElement()
+          ..classes = _isCompacted ? ['collection', 'expanded'] : ['collection']
+          ..children = [
+            new VirtualCollectionElement(
+                _createCollectionLine, _updateCollectionLine,
+                createHeader: _createCollectionHeader,
+                items: _profile.members.toList()..sort(_createSorter()),
+                queue: _r.queue)
+          ]
+      ]);
+      _renderGraph(newChartHost, newChartLegend, _profile.newSpace);
+      _renderGraph(oldChartHost, oldChartLegend, _profile.oldSpace);
+    }
+  }
+
+  _createSorter() {
+    var getter;
+    switch (_sortingField) {
+      case _SortingField.accumulatedSize:
+        getter = _getAccumulatedSize;
+        break;
+      case _SortingField.accumulatedInstances:
+        getter = _getAccumulatedInstances;
+        break;
+      case _SortingField.currentSize:
+        getter = _getCurrentSize;
+        break;
+      case _SortingField.currentInstances:
+        getter = _getCurrentInstances;
+        break;
+      case _SortingField.newAccumulatedSize:
+        getter = _getNewAccumulatedSize;
+        break;
+      case _SortingField.newAccumulatedInstances:
+        getter = _getNewAccumulatedInstances;
+        break;
+      case _SortingField.newCurrentSize:
+        getter = _getNewCurrentSize;
+        break;
+      case _SortingField.newCurrentInstances:
+        getter = _getNewCurrentInstances;
+        break;
+      case _SortingField.oldAccumulatedSize:
+        getter = _getOldAccumulatedSize;
+        break;
+      case _SortingField.oldAccumulatedInstances:
+        getter = _getOldAccumulatedInstances;
+        break;
+      case _SortingField.oldCurrentSize:
+        getter = _getOldCurrentSize;
+        break;
+      case _SortingField.oldCurrentInstances:
+        getter = _getOldCurrentInstances;
+        break;
+      case _SortingField.className:
+        getter = (M.ClassHeapStats s) => s.clazz.name;
+        break;
+    }
+    switch (_sortingDirection) {
+      case _SortingDirection.ascending:
+        return (a, b) => getter(a).compareTo(getter(b));
+      case _SortingDirection.descending:
+        return (a, b) => getter(b).compareTo(getter(a));
+    }
+  }
+
+  static Element _createCollectionLine() => new DivElement()
+    ..classes = ['collection-item']
+    ..children = [
+      new SpanElement()
+        ..classes = ['bytes']
+        ..text = '0B',
+      new SpanElement()
+        ..classes = ['instances']
+        ..text = '0',
+      new SpanElement()
+        ..classes = ['bytes']
+        ..text = '0B',
+      new SpanElement()
+        ..classes = ['instances']
+        ..text = '0',
+      new SpanElement()
+        ..classes = ['bytes']
+        ..text = '0B',
+      new SpanElement()
+        ..classes = ['instances']
+        ..text = '0',
+      new SpanElement()
+        ..classes = ['bytes']
+        ..text = '0B',
+      new SpanElement()
+        ..classes = ['instances']
+        ..text = '0',
+      new SpanElement()
+        ..classes = ['bytes']
+        ..text = '0B',
+      new SpanElement()
+        ..classes = ['instances']
+        ..text = '0',
+      new SpanElement()
+        ..classes = ['bytes']
+        ..text = '0B',
+      new SpanElement()
+        ..classes = ['instances']
+        ..text = '0',
+      new SpanElement()..classes = ['name']
+    ];
+
+  Element _createCollectionHeader() => new DivElement()
+    ..children = [
+      new DivElement()
+        ..classes = ['collection-item']
+        ..children = [
+          new SpanElement()
+            ..classes = ['group']
+            ..text = 'Accumulated',
+          new SpanElement()
+            ..classes = ['group']
+            ..text = 'Current',
+          new SpanElement()
+            ..classes = ['group']
+            ..text = '(NEW) Accumulated',
+          new SpanElement()
+            ..classes = ['group']
+            ..text = '(NEW) Current',
+          new SpanElement()
+            ..classes = ['group']
+            ..text = '(OLD) Accumulated',
+          new SpanElement()
+            ..classes = ['group']
+            ..text = '(OLD) Current',
+        ],
+      new DivElement()
+        ..classes = ['collection-item']
+        ..children = [
+          _createHeaderButton(const ['bytes'], 'Size',
+              _SortingField.accumulatedSize, _SortingDirection.descending),
+          _createHeaderButton(const ['instances'], 'Instances',
+              _SortingField.accumulatedInstances, _SortingDirection.descending),
+          _createHeaderButton(const ['bytes'], 'Size',
+              _SortingField.currentSize, _SortingDirection.descending),
+          _createHeaderButton(const ['instances'], 'Instances',
+              _SortingField.currentInstances, _SortingDirection.descending),
+          _createHeaderButton(const ['bytes'], 'Size',
+              _SortingField.newAccumulatedSize, _SortingDirection.descending),
+          _createHeaderButton(
+              const ['instances'],
+              'Instances',
+              _SortingField.newAccumulatedInstances,
+              _SortingDirection.descending),
+          _createHeaderButton(const ['bytes'], 'Size',
+              _SortingField.newCurrentSize, _SortingDirection.descending),
+          _createHeaderButton(const ['instances'], 'Instances',
+              _SortingField.newCurrentInstances, _SortingDirection.descending),
+          _createHeaderButton(const ['bytes'], 'Size',
+              _SortingField.oldAccumulatedSize, _SortingDirection.descending),
+          _createHeaderButton(
+              const ['instances'],
+              'Instances',
+              _SortingField.oldAccumulatedInstances,
+              _SortingDirection.descending),
+          _createHeaderButton(const ['bytes'], 'Size',
+              _SortingField.oldCurrentSize, _SortingDirection.descending),
+          _createHeaderButton(const ['instances'], 'Instances',
+              _SortingField.oldCurrentInstances, _SortingDirection.descending),
+          _createHeaderButton(const ['name'], 'Class', _SortingField.className,
+              _SortingDirection.ascending)
+        ],
+    ];
+
+  ButtonElement _createHeaderButton(List<String> classes, String text,
+          _SortingField field, _SortingDirection direction) =>
+      new ButtonElement()
+        ..classes = classes
+        ..text = _sortingField != field
+            ? text
+            : _sortingDirection == _SortingDirection.ascending
+                ? '$text▼'
+                : '$text▲'
+        ..onClick.listen((_) => _setSorting(field, direction));
+
+  void _setSorting(_SortingField field, _SortingDirection defaultDirection) {
+    if (_sortingField == field) {
+      switch (_sortingDirection) {
+        case _SortingDirection.descending:
+          _sortingDirection = _SortingDirection.ascending;
+          break;
+        case _SortingDirection.ascending:
+          _sortingDirection = _SortingDirection.descending;
+          break;
+      }
+    } else {
+      _sortingDirection = defaultDirection;
+      _sortingField = field;
+    }
+    _r.dirty();
+  }
+
+  void _updateCollectionLine(Element e, M.ClassHeapStats item, index) {
+    e.children[0].text = Utils.formatSize(_getAccumulatedSize(item));
+    e.children[1].text = '${_getAccumulatedInstances(item)}';
+    e.children[2].text = Utils.formatSize(_getCurrentSize(item));
+    e.children[3].text = '${_getCurrentInstances(item)}';
+    e.children[4].text = Utils.formatSize(_getNewAccumulatedSize(item));
+    e.children[5].text = '${_getNewAccumulatedInstances(item)}';
+    e.children[6].text = Utils.formatSize(_getNewCurrentSize(item));
+    e.children[7].text = '${_getNewCurrentInstances(item)}';
+    e.children[8].text = Utils.formatSize(_getOldAccumulatedSize(item));
+    e.children[9].text = '${_getOldAccumulatedInstances(item)}';
+    e.children[10].text = Utils.formatSize(_getOldCurrentSize(item));
+    e.children[11].text = '${_getOldCurrentInstances(item)}';
+    e.children[12] = new ClassRefElement(_isolate, item.clazz, queue: _r.queue)
+      ..classes = ['name'];
+    Element.clickEvent.forTarget(e.children[12], useCapture: true).listen((e) {
+      e.preventDefault();
+      _editor.sendObject(isolate, item.clazz);
+      window.close();
+    });
+  }
+
+  static String _usedCaption(M.HeapSpace space) =>
+      '${Utils.formatSize(space.used)}'
+      ' of '
+      '${Utils.formatSize(space.capacity)}';
+
+  static List<Element> _createSpaceMembers(M.HeapSpace space) {
+    final used = _usedCaption(space);
+    final ext = '${Utils.formatSize(space.external)}';
+    final collections = '${space.collections}';
+    final avgCollectionTime =
+        '${Utils.formatDurationInMilliseconds(space.avgCollectionTime)} ms';
+    final totalCollectionTime =
+        '${Utils.formatDurationInSeconds(space.totalCollectionTime)} secs';
+    final avgCollectionPeriod =
+        '${Utils.formatDurationInMilliseconds(space.avgCollectionPeriod)} ms';
+    return [
+      new DivElement()
+        ..classes = ['memberItem']
+        ..children = [
+          new DivElement()
+            ..classes = ['memberName']
+            ..text = 'used',
+          new DivElement()
+            ..classes = ['memberValue']
+            ..text = used
+        ],
+      new DivElement()
+        ..classes = ['memberItem']
+        ..children = [
+          new DivElement()
+            ..classes = ['memberName']
+            ..text = 'external',
+          new DivElement()
+            ..classes = ['memberValue']
+            ..text = ext
+        ],
+      new DivElement()
+        ..classes = ['memberItem']
+        ..children = [
+          new DivElement()
+            ..classes = ['memberName']
+            ..text = 'collections',
+          new DivElement()
+            ..classes = ['memberValue']
+            ..text = collections
+        ],
+      new DivElement()
+        ..classes = ['memberItem']
+        ..children = [
+          new DivElement()
+            ..classes = ['memberName']
+            ..text = 'average collection time',
+          new DivElement()
+            ..classes = ['memberValue']
+            ..text = avgCollectionTime
+        ],
+      new DivElement()
+        ..classes = ['memberItem']
+        ..children = [
+          new DivElement()
+            ..classes = ['memberName']
+            ..text = 'cumulative collection time',
+          new DivElement()
+            ..classes = ['memberValue']
+            ..text = totalCollectionTime
+        ],
+      new DivElement()
+        ..classes = ['memberItem']
+        ..children = [
+          new DivElement()
+            ..classes = ['memberName']
+            ..text = 'average time between collections',
+          new DivElement()
+            ..classes = ['memberValue']
+            ..text = avgCollectionPeriod
+        ]
+    ];
+  }
+
+  static final _columns = [
+    new ChartColumnSpec(label: 'Type', type: ChartColumnSpec.TYPE_STRING),
+    new ChartColumnSpec(label: 'Size', formatter: (v) => v.toString())
+  ];
+
+  static void _renderGraph(Element host, Element legend, M.HeapSpace space) {
+    final series = [
+      new ChartSeries("Work", [1], new PieChartRenderer(sortDataByValue: false))
+    ];
+    final rect = host.getBoundingClientRect();
+    final minSize = new Rect.size(rect.width, rect.height);
+    final config = new ChartConfig(series, [0])
+      ..minimumSize = minSize
+      ..legend = new ChartLegend(legend, showValues: true);
+    final data = new ChartData(_columns, [
+      ['Used', space.used],
+      ['Free', space.capacity - space.used],
+      ['External', space.external]
+    ]);
+
+    new LayoutArea(host, data, config,
+        state: new ChartState(), autoUpdate: true)
+      ..draw();
+  }
+
+  Future _refresh({bool gc: false, bool reset: false}) async {
+    _profile = null;
+    _r.dirty();
+    _profile = await _repository.get(_isolate, gc: gc, reset: reset);
+    _r.dirty();
+  }
+
+  void _downloadCSV() {
+    assert(_profile != null);
+    final header = [
+          '"Accumulator Size"',
+          '"Accumulator Instances"',
+          '"Current Size"',
+          '"Current Instances"',
+          '"(NEW) Accumulator Size"',
+          '"(NEW) Accumulator Instances"',
+          '"(NEW) Current Size"',
+          '"(NEW) Current Instances"',
+          '"(OLD) Accumulator Size"',
+          '"(OLD) Accumulator Instances"',
+          '"(OLD) Current Size"',
+          '"(OLD) Current Instances"',
+          'Class'
+        ].join(',') +
+        '\n';
+    AnchorElement tl = document.createElement('a');
+    tl
+      ..attributes['href'] = 'data:text/plain;charset=utf-8,' +
+          Uri.encodeComponent(header +
+              (_profile.members.toList()..sort(_createSorter()))
+                  .map(_csvOut)
+                  .join('\n'))
+      ..attributes['download'] = 'heap-profile.csv'
+      ..click();
+  }
+
+  static _csvOut(M.ClassHeapStats s) {
+    return [
+      _getAccumulatedSize(s),
+      _getAccumulatedInstances(s),
+      _getCurrentSize(s),
+      _getCurrentInstances(s),
+      _getNewAccumulatedSize(s),
+      _getNewAccumulatedInstances(s),
+      _getNewCurrentSize(s),
+      _getNewCurrentInstances(s),
+      _getOldAccumulatedSize(s),
+      _getOldAccumulatedInstances(s),
+      _getOldCurrentSize(s),
+      _getOldCurrentInstances(s),
+      s.clazz.name
+    ].join(',');
+  }
+
+  static int _getAccumulatedSize(M.ClassHeapStats s) =>
+      s.newSpace.accumulated.bytes + s.oldSpace.accumulated.bytes;
+  static int _getAccumulatedInstances(M.ClassHeapStats s) =>
+      s.newSpace.accumulated.instances + s.oldSpace.accumulated.instances;
+  static int _getCurrentSize(M.ClassHeapStats s) =>
+      s.newSpace.current.bytes + s.oldSpace.current.bytes;
+  static int _getCurrentInstances(M.ClassHeapStats s) =>
+      s.newSpace.current.instances + s.oldSpace.current.instances;
+  static int _getNewAccumulatedSize(M.ClassHeapStats s) =>
+      s.newSpace.accumulated.bytes;
+  static int _getNewAccumulatedInstances(M.ClassHeapStats s) =>
+      s.newSpace.accumulated.instances;
+  static int _getNewCurrentSize(M.ClassHeapStats s) => s.newSpace.current.bytes;
+  static int _getNewCurrentInstances(M.ClassHeapStats s) =>
+      s.newSpace.current.instances;
+  static int _getOldAccumulatedSize(M.ClassHeapStats s) =>
+      s.oldSpace.accumulated.bytes;
+  static int _getOldAccumulatedInstances(M.ClassHeapStats s) =>
+      s.oldSpace.accumulated.instances;
+  static int _getOldCurrentSize(M.ClassHeapStats s) => s.oldSpace.current.bytes;
+  static int _getOldCurrentInstances(M.ClassHeapStats s) =>
+      s.oldSpace.current.instances;
+}