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.dartMetrics.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-id="{{ metric.id }}"> | |
35 {{ metric.name }} | |
36 </li> | |
37 </template> | |
38 </template> | |
39 <template repeat="{{ metric in isolate.vmMetrics.values }}"> | |
40 <template if="{{ metric == selectedMetric }}"> | |
41 <li class="selected"> | |
42 {{ metric.name }} | |
43 </li> | |
44 </template> | |
45 <template if="{{ metric != selectedMetric }}"> | |
46 <li on-click="{{ selectMetric }}" data-id="{{ metric.id }}"> | |
47 {{ metric.name }} | |
48 </li> | |
49 </template> | |
50 </template> | |
51 </ul> | |
52 </div> | |
53 <div class="flex-item-80-percent"> | |
54 <metrics-graph isolate="{{ isolate }}" metric="{{ selectedMetric }}"> | |
55 </metrics-graph> | |
56 <div> | |
57 <metric-details page="{{ page }}" metric="{{ selectedMetric }}"> | |
58 </metric-details> | |
59 </div> | |
60 </div> | |
61 </div> | |
62 </template> | |
63 </polymer-element> | |
64 | |
65 <polymer-element name="metric-details" extends="observatory-element"> | |
66 <template> | |
67 <link rel="stylesheet" href="css/shared.css"> | |
68 <div class="content-centered"> | |
69 <div class="memberList"> | |
70 <div class="memberItem"> | |
71 <div class="memberName">name</div> | |
72 <div class="memberValue">{{ metric.name }}</div> | |
73 </div> | |
74 <div class="memberItem"> | |
75 <div class="memberName">description</div> | |
76 <div class="memberValue">{{ metric.description }}</div> | |
77 </div> | |
78 <div class="memberItem"> | |
79 <div class="memberName">current value</div> | |
80 <div class="memberValue">{{ metric.value }}</div> | |
81 </div> | |
82 <template if="{{ (metric != null) && (metric.min != null) }}"> | |
83 <div class="memberItem"> | |
84 <div class="memberName">minimum</div> | |
85 <div class="memberValue">{{ metric.min }}</div> | |
86 </div> | |
87 </template> | |
88 <template if="{{ (metric != null) && (metric.max != null) }}"> | |
89 <div class="memberItem"> | |
90 <div class="memberName">maximum</div> | |
91 <div class="memberValue">{{ metric.max }}</div> | |
92 </div> | |
93 </template> | |
94 <div class="memberItem"> | |
95 <div class="memberName">refresh rate</div> | |
96 <div class="memberValue"> | |
97 <select id="refreshrate" on-change="{{ refreshRateChange }}"> | |
98 <!-- These must be kept in sync with POLL_PERIODS in MetricsPage | |
99 in object.dart --> | |
100 <option value="8000">Every eight seconds</option> | |
101 <option value="4000">Every four seconds</option> | |
102 <option value="2000">Every two seconds</option> | |
103 <option value="1000">Once a second</option> | |
104 <option value="100">Ten times per second</option> | |
105 <option value="0" selected="selected">Never</option> | |
106 </select> | |
107 </div> | |
108 </div> | |
109 <div class="memberItem"> | |
110 <div class="memberName">sample buffer size</div> | |
111 <div class="memberValue"> | |
112 <select id="buffersize" on-change="{{ sampleBufferSizeChange }}"> | |
113 <option value="10">10</option> | |
114 <option value="100" selected="selected">100</option> | |
115 <option value="1000">1000</option> | |
116 </select> | |
117 </div> | |
118 </div> | |
119 </div> | |
120 </div> | |
121 </template> | |
122 </polymer-element> | |
123 | |
124 <polymer-element name="metrics-graph" extends="observatory-element"> | |
125 <template> | |
126 <link rel="stylesheet" href="css/shared.css"> | |
127 <style> | |
128 .graph { | |
129 min-height: 600px; | |
130 } | |
131 </style> | |
132 <div id="graph" class="graph"> | |
133 </div> | |
134 </template> | |
135 </polymer-element> | |
136 | |
137 <script type="application/dart" src="metrics.dart"></script> | |
OLD | NEW |