Chromium Code Reviews Chromium Code Reviews
Issue 457803002:
Initial UI for Metrics in Observatory (Closed)
Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart| OLD | NEW |
|---|---|
| (Empty) | |
| 1 <link rel="import" href="../../../../packages/polymer/polymer.html"> | |
| 2 <link rel="import" href="nav_bar.html"> | |
| 3 <link rel="import" href="observatory_element.html"> | |
| 4 | |
| 5 <polymer-element name="metrics-page" extends="observatory-element"> | |
| 6 <template> | |
| 7 <link rel="stylesheet" href="css/shared.css"> | |
| 8 <style> | |
| 9 ul li:hover:not(.selected) { | |
| 10 background-color: #FFF3E3; | |
| 11 } | |
| 12 .selected { | |
| 13 background-color: #0489c3; | |
| 14 } | |
| 15 .graph { | |
| 16 min-height: 600px; | |
| 17 } | |
| 18 </style> | |
| 19 <nav-bar> | |
| 20 <top-nav-menu last="{{ true }}"></top-nav-menu> | |
| 21 <nav-refresh callback="{{ refresh }}"></nav-refresh> | |
| 22 <nav-control></nav-control> | |
| 23 </nav-bar> | |
| 24 <div class="flex-row"> | |
| 25 <div class="flex-item-20-percent"> | |
| 26 <ul> | |
| 27 <template repeat="{{ metric in isolate.metrics.values }}"> | |
| 28 <template if="{{ metric == selectedMetric }}"> | |
| 29 <li class="selected"> | |
| 30 {{ metric.name }} | |
| 31 </li> | |
| 32 </template> | |
| 33 <template if="{{ metric != selectedMetric }}"> | |
| 34 <li on-click="{{ selectMetric }}" data-name="{{ metric.name }}"> | |
| 35 {{ metric.name }} | |
| 36 </li> | |
| 37 </template> | |
| 38 </template> | |
| 39 </ul> | |
| 40 </div> | |
| 41 <div class="flex-item-80-percent"> | |
| 42 <metrics-graph isolate="{{ isolate }}" metric="{{ selectedMetric }}"> | |
| 43 </metrics-graph> | |
| 44 <div> | |
| 45 <metric-details page="{{ page }}" metric="{{ selectedMetric }}"> | |
| 46 </metric-details> | |
| 47 </div> | |
| 48 </div> | |
| 49 </div> | |
| 50 </template> | |
| 51 </polymer-element> | |
| 52 | |
| 53 <polymer-element name="metric-details" extends="observatory-element"> | |
| 54 <template> | |
| 55 <link rel="stylesheet" href="css/shared.css"> | |
| 56 <div class="content-centered"> | |
| 57 <template if="{{ metric != null }}"> | |
| 58 <div class="memberList"> | |
| 59 <div class="memberItem"> | |
| 60 <div class="memberName">name</div> | |
| 61 <div class="memberValue">{{ metric.name }}</div> | |
| 62 </div> | |
| 63 <div class="memberItem"> | |
| 64 <div class="memberName">description</div> | |
| 65 <div class="memberValue">{{ metric.description }}</div> | |
| 66 </div> | |
| 67 <div class="memberItem"> | |
| 68 <div class="memberName">current value</div> | |
| 69 <div class="memberValue">{{ metric.value }}</div> | |
| 70 </div> | |
| 71 <template if="{{ metric.min != null }}"> | |
| 72 <div class="memberItem"> | |
| 73 <div class="memberName">minimum</div> | |
| 74 <div class="memberValue">{{ metric.min }}</div> | |
| 75 </div> | |
| 76 </template> | |
| 77 <template if="{{ metric.max != null }}"> | |
| 78 <div class="memberItem"> | |
| 79 <div class="memberName">maximum</div> | |
| 80 <div class="memberValue">{{ metric.max }}</div> | |
| 81 </div> | |
| 82 </template> | |
| 83 <div class="memberItem"> | |
| 84 <div class="memberName">refresh rate</div> | |
| 85 <div class="memberValue"> | |
| 86 <select id="refreshrate" on-change="{{ refreshRateChange }}"> | |
| 87 <!-- 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 expre
| |
| 88 object.dart --> | |
| 89 <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.
| |
| 90 <option value="4000">Once every 4 seconds</option> | |
| 91 <option value="2000">Once every 2 seconds</option> | |
| 92 <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.
| |
| 93 <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.
| |
| 94 <option value="0" selected="selected">Never</option> | |
| 95 </select> | |
| 96 </div> | |
| 97 </div> | |
| 98 <div class="memberItem"> | |
| 99 <div class="memberName">sample buffer size</div> | |
| 100 <div class="memberValue"> | |
| 101 <select id="buffersize" on-change="{{ sampleBufferSizeChange }}"> | |
| 102 <option value="10">10</option> | |
| 103 <option value="100" selected="selected">100</option> | |
| 104 <option value="1000">1000</option> | |
| 105 </select> | |
| 106 </div> | |
| 107 </div> | |
| 108 </div> | |
| 109 </template> | |
| 110 <template if="{{ metric == null }}"> | |
| 111 <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
Cutch
2014/08/27 22:25:39
Done.
| |
| 112 </template> | |
| 113 </div> | |
| 114 </template> | |
| 115 </polymer-element> | |
| 116 | |
| 117 <polymer-element name="metrics-graph" extends="observatory-element"> | |
| 118 <template> | |
| 119 <link rel="stylesheet" href="css/shared.css"> | |
| 120 <style> | |
| 121 .graph { | |
| 122 min-height: 600px; | |
| 123 } | |
| 124 </style> | |
| 125 <div id="graph" class="graph"> | |
| 126 </div> | |
| 127 </template> | |
| 128 </polymer-element> | |
| 129 | |
| 130 <script type="application/dart" src="metrics.dart"></script> | |
| OLD | NEW |
