Initial UI for Metrics in Observatory

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

Index: runtime/bin/vmservice/observatory/lib/src/elements/metrics.html
diff --git a/runtime/bin/vmservice/observatory/lib/src/elements/metrics.html b/runtime/bin/vmservice/observatory/lib/src/elements/metrics.html
new file mode 100644
index 0000000000000000000000000000000000000000..34adbc759b84369c4c5027af64fdd3a6f7a3a98b
--- /dev/null
+++ b/runtime/bin/vmservice/observatory/lib/src/elements/metrics.html
@@ -0,0 +1,130 @@
+<link rel="import" href="../../../../packages/polymer/polymer.html">
+<link rel="import" href="nav_bar.html">
+<link rel="import" href="observatory_element.html">
+
+<polymer-element name="metrics-page" extends="observatory-element">
+  <template>
+    <link rel="stylesheet" href="css/shared.css">
+    <style>
+      ul li:hover:not(.selected) {
+        background-color: #FFF3E3;
+      }
+      .selected {
+        background-color: #0489c3;
+      }
+      .graph {
+        min-height: 600px;
+      }
+    </style>
+    <nav-bar>
+      <top-nav-menu last="{{ true }}"></top-nav-menu>
+      <nav-refresh callback="{{ refresh }}"></nav-refresh>
+      <nav-control></nav-control>
+    </nav-bar>
+    <div class="flex-row">
+      <div class="flex-item-20-percent">
+        <ul>
+          <template repeat="{{ metric in isolate.metrics.values }}">
+            <template if="{{ metric == selectedMetric }}">
+              <li class="selected">
+                {{ metric.name }}
+              </li>
+            </template>
+            <template if="{{ metric != selectedMetric }}">
+              <li on-click="{{ selectMetric }}" data-name="{{ metric.name }}">
+                {{ metric.name }}
+              </li>
+            </template>
+          </template>
+        </ul>
+      </div>
+      <div class="flex-item-80-percent">
+        <metrics-graph isolate="{{ isolate }}" metric="{{ selectedMetric }}">
+        </metrics-graph>
+        <div>
+          <metric-details page="{{ page }}" metric="{{ selectedMetric }}">
+          </metric-details>
+        </div>
+      </div>
+    </div>
+  </template>
+</polymer-element>
+
+<polymer-element name="metric-details" extends="observatory-element">
+  <template>
+    <link rel="stylesheet" href="css/shared.css">
+    <div class="content-centered">
+    <template if="{{ metric != null }}">
+      <div class="memberList">
+        <div class="memberItem">
+          <div class="memberName">name</div>
+          <div class="memberValue">{{ metric.name }}</div>
+        </div>
+        <div class="memberItem">
+          <div class="memberName">description</div>
+          <div class="memberValue">{{ metric.description }}</div>
+        </div>
+        <div class="memberItem">
+          <div class="memberName">current value</div>
+          <div class="memberValue">{{ metric.value }}</div>
+        </div>
+        <template if="{{ metric.min != null }}">
+          <div class="memberItem">
+            <div class="memberName">minimum</div>
+            <div class="memberValue">{{ metric.min }}</div>
+          </div>
+        </template>
+        <template if="{{ metric.max != null }}">
+          <div class="memberItem">
+            <div class="memberName">maximum</div>
+            <div class="memberValue">{{ metric.max }}</div>
+          </div>
+        </template>
+        <div class="memberItem">
+          <div class="memberName">refresh rate</div>
+          <div class="memberValue">
+            <select id="refreshrate" on-change="{{ refreshRateChange }}">
+              <!-- These must be kept in sync with constants in Metric in

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

Why can't you just parse the value?

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

1) Because the table is a static and polymer expressions cannot access statics
2) Because of the human readable string that goes with it (this could be a side
table) but see #1.

+                   object.dart -->
+              <option value="8000">Once every 8 seconds</option>

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

These seem a bit verbose; consider dropping "Once".

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

Done.

+              <option value="4000">Once every 4 seconds</option>
+              <option value="2000">Once every 2 seconds</option>
+              <option value="1000">Once every 1 seconds</option>

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

"1 seconds" -> "second"?

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

Done.

+              <option value="100">Ten times per second</option>

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

Consider "Ten" -> 10.

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

Acknowledged.

+              <option value="0" selected="selected">Never</option>
+            </select>
+          </div>
+        </div>
+        <div class="memberItem">
+          <div class="memberName">sample buffer size</div>
+          <div class="memberValue">
+            <select id="buffersize" on-change="{{ sampleBufferSizeChange }}">
+              <option value="10">10</option>
+              <option value="100" selected="selected">100</option>
+              <option value="1000">1000</option>
+            </select>
+          </div>
+        </div>
+      </div>
+    </template>
+    <template if="{{ metric == null }}">
+      <p>Select a metric from the list on the left.</p>

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

Isn't it possible to ensure that at least one item selected (defaulting to the
first, or something)?

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

Done.

+    </template>
+    </div>
+  </template>
+</polymer-element>
+
+<polymer-element name="metrics-graph" extends="observatory-element">
+  <template>
+    <link rel="stylesheet" href="css/shared.css">
+    <style>
+      .graph {
+        min-height: 600px;
+      }
+    </style>
+    <div id="graph" class="graph">
+    </div>
+  </template>
+</polymer-element>
+
+<script type="application/dart" src="metrics.dart"></script>