Initial UI for Metrics in Observatory

runtime/bin/vmservice/observatory/lib/src/elements/metrics.dart

+// Copyright (c) 2013, the Dart project authors.  Please see the AUTHORS file

[koda, 2014/08/11 16:34:53]

2014

[Cutch, 2014/08/27 22:25:39]

Done.

+// 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.
+
+library metrics;
+
+import 'dart:async';
+import 'dart:html';
+import 'observatory_element.dart';
+import 'package:observatory/app.dart';
+import 'package:observatory/service.dart';
+import 'package:polymer/polymer.dart';
+
+@CustomTag('metrics-page')
+class MetricsPageElement extends ObservatoryElement {
+  MetricsPageElement.created() : super.created();
+
+  @observable MetricsPage page;
+  @observable Isolate isolate;
+  @observable Metric selectedMetric;
+
+  void isolateChanged(oldValue) {
+    if (isolate != null) {
+      isolate.refreshMetrics();
+    }
+  }
+
+  void refresh(var done) {
+    isolate.refreshMetrics().whenComplete(done);
+  }
+
+  void selectMetric(Event e, var detail, Element target) {
+    String name = target.attributes['data-name'];
+    selectedMetric = isolate.metrics[name];
+  }
+}
+
+@CustomTag('metric-details')
+class MetricDetailsElement extends ObservatoryElement {
+  MetricDetailsElement.created() : super.created();
+  @published MetricsPage page;
+  @published Metric metric;
+
+  int _findIndex(SelectElement element, int value) {
+    if (element == null) {
+      return null;
+    }
+    for (var i = 0; i < element.options.length; i++) {
+      var optionElement = element.options[i];
+      int optionValue = int.parse(optionElement.value);
+      if (optionValue == value) {
+        return i;
+      }
+    }
+    return null;
+  }
+
+  metricChanged(oldValue) {
+    SelectElement refreshRateElement = shadowRoot.querySelector('#refreshrate');
+    if (refreshRateElement == null) {
+      // Race between shadowRoot setup and metricChanged event.
+      return;
+    }
+    int period = 0;
+    if (metric.poller != null) {
+      period = metric.poller.period;
+    }
+    var index = _findIndex(refreshRateElement, period);
+    assert(index != null);
+    refreshRateElement.selectedIndex = index;
+    SelectElement bufferSizeElement = shadowRoot.querySelector('#buffersize');
+    index = _findIndex(bufferSizeElement, metric.sampleBufferSize);
+    assert(index != null);
+    bufferSizeElement.selectedIndex = index;
+  }
+
+  void refreshRateChange(Event e, var detail, Element target) {
+    var value = int.parse((target as SelectElement).value);
+    if (metric == null) {
+      return;
+    }
+    page.setRefreshPeriod(value, metric);
+  }
+
+  void sampleBufferSizeChange(Event e, var detail, Element target) {
+    var value = int.parse((target as SelectElement).value);
+    if (metric == null) {
+      return;
+    }
+    metric.sampleBufferSize = value;
+  }
+}
+
+@CustomTag('metrics-graph')
+class MetricsGraphElement extends ObservatoryElement {
+  MetricsGraphElement.created() : super.created();
+
+  final DataTable _table = new DataTable();
+  Chart _chart;
+
+  @published Metric metric;
+  @observable Isolate isolate;
+
+  void attached() {
+    // Redraw once a second.
+    pollPeriod = new Duration(milliseconds: 1000);

[koda, 2014/08/11 16:34:53]

seconds: 1

[Cutch, 2014/08/27 22:25:39]

Done.

+    super.attached();
+  }
+
+  void detached() {
+    super.detached();
+  }
+
+  void onPoll() {
+    draw();
+  }
+
+  void draw() {
+    if (_chart == null) {
+      // Construct chart.
+      var element = shadowRoot.querySelector('#graph');
+      if (element == null) {
+        // Bail.
+        return;
+      }
+      _chart = new Chart('LineChart', element);
+    }
+    if (metric == null) {
+      return;
+    }
+    _update();
+    _chart.draw(_table);
+  }
+
+  void _setupInitialDataTable() {
+    _table.clearColumns();
+    // Only one metric right now.
+    _table.addColumn('timeofday', 'time');
+    _table.addColumn('number', metric.name);
+  }
+
+  void _update() {
+    _table.clearRows();
+    for (var i = 0; i < metric.samples.length; i++) {
+      var sample = metric.samples[i];
+      _table.addTimeOfDayValue(sample.time, sample.value);
+    }
+  }
+
+  metricChanged(oldValue) {
+    if (oldValue != metric) {
+      _setupInitialDataTable();
+    }
+  }
+}