Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(705)

Unified Diff: runtime/bin/vmservice/client/deployed/web/index.html

Issue 148153007: Add Google Charts to Observatory and use it in allocation profiler (Closed) Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart
Patch Set: Created 6 years, 11 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
Index: runtime/bin/vmservice/client/deployed/web/index.html
diff --git a/runtime/bin/vmservice/client/deployed/web/index.html b/runtime/bin/vmservice/client/deployed/web/index.html
index a0ca89778411e826f5dabed969ae73b01805e8a1..f954ccefaf3402ed103dc966af1232fb521c9c8f 100644
--- a/runtime/bin/vmservice/client/deployed/web/index.html
+++ b/runtime/bin/vmservice/client/deployed/web/index.html
@@ -1,16 +1,18 @@
-<!DOCTYPE html><html><head><script src="packages/shadow_dom/shadow_dom.debug.js"></script>
-<script src="packages/custom_element/custom-elements.debug.js"></script>
-<script src="packages/browser/interop.js"></script>
+<!DOCTYPE html><html><head>
+
- <title>Dart VM Observatory</title>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="bootstrap_css/css/bootstrap.min.css">
-
+
+ <title>Dart VM Observatory</title>
+ <script type="text/javascript" src="https://www.google.com/jsapi"></script>
+
+
<script src="index.html_bootstrap.dart.js"></script>
-
+
</head>
<body><polymer-element name="observatory-element">
-
+
</polymer-element><polymer-element name="breakpoint-list" extends="observatory-element">
<template>
<template if="{{ msg['breakpoints'].isEmpty }}">
@@ -28,9 +30,9 @@
</ul>
</template>
</template>
-
+
</polymer-element><polymer-element name="service-ref" extends="observatory-element">
-
+
</polymer-element><polymer-element name="class-ref" extends="service-ref">
<template>
<a title="{{ hoverText }}" href="{{ url }}">{{ name }}</a>
@@ -50,7 +52,7 @@
</div>
</div>
</template>
-
+
</polymer-element><polymer-element name="field-ref" extends="service-ref">
<template>
<div>
@@ -156,7 +158,7 @@
</div>
</div>
</template>
-
+
</polymer-element>
<polymer-element name="code-ref" extends="service-ref">
<template>
@@ -173,7 +175,7 @@
</div>
</div>
</template>
-
+
</polymer-element><polymer-element name="code-view" extends="observatory-element">
<template>
<div class="row">
@@ -197,7 +199,7 @@
</div>
</div>
</template>
-
+
</polymer-element><polymer-element name="collapsible-content" extends="observatory-element">
<template>
<div class="well row">
@@ -209,7 +211,7 @@
</div>
</div>
</template>
-
+
</polymer-element><polymer-element name="field-view" extends="observatory-element">
<template>
<div class="row">
@@ -247,7 +249,7 @@
</div>
</div>
</template>
-
+
</polymer-element><polymer-element name="function-view" extends="observatory-element">
<template>
<div class="row">
@@ -295,7 +297,7 @@
</div>
</div>
</template>
-
+
</polymer-element><polymer-element name="isolate-summary" extends="observatory-element">
<template>
<div class="row">
@@ -325,7 +327,7 @@
<div class="col-md-8"></div>
</div>
</template>
-
+
</polymer-element>
<polymer-element name="isolate-list" extends="observatory-element">
<template>
@@ -337,9 +339,9 @@
</template>
</ul>
(<a href="{{ app.locationManager.absoluteLink('cpu') }}">cpu</a>)
-
+
</template>
-
+
</polymer-element><polymer-element name="instance-view" extends="observatory-element">
<template>
<div class="row">
@@ -376,7 +378,7 @@
</div>
</div>
</template>
-
+
</polymer-element>
<polymer-element name="json-view" extends="observatory-element">
<template>
@@ -406,7 +408,7 @@
</table>
</template>
</template>
-
+
</polymer-element>
<polymer-element name="script-ref" extends="service-ref">
<template>
@@ -479,51 +481,61 @@
</table>
</template>
-
+
</polymer-element><polymer-element name="heap-profile" extends="observatory-element">
<template>
<div>
<button type="button" on-click="{{refreshData}}">Refresh</button>
</div>
- <div>
- <span>New Space </span>
- <span>{{ status(true) }}</span>
+ <div class="row">
+ <div id="newPieChart" class="col-md-4" style="height: 400px">
+ </div>
+ <div id="newStatus" class="col-md-2">
+ <table class="table">
+ <tbody>
+ <tr>
+ <td>Collections</td>
+ <td>{{ formattedCollections(true) }}</td>
+ </tr>
+ <tr>
+ <td>Average Collection Time</td>
+ <td>{{ formattedAverage(true) }}</td>
+ </tr>
+ <tr>
+ <td>Cumulative Collection Time</td>
+ <td>{{ formattedTotalCollectionTime(true) }}</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <div id="oldPieChart" class="col-md-4" style="height: 400px">
+ </div>
+ <div id="oldStatus" class="col-md-2">
+ <table class="table">
+ <tbody>
+ <tr>
+ <td>Collections</td>
+ <td>{{ formattedCollections(true) }}</td>
+ </tr>
+ <tr>
+ <td>Average Collection Time</td>
+ <td>{{ formattedAverage(true) }}</td>
+ </tr>
+ <tr>
+ <td>Cumulative Collection Time</td>
+ <td>{{ formattedTotalCollectionTime(true) }}</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
</div>
- <div>
- <span>Old Space </span>
- <span>{{ status(false) }}</span>
+ <div class="row">
+ <div id="table" class="col-md-12" style="height: 800px"></div>
</div>
- <table class="table table-hover">
- <thead>
- <tr>
- <th>Class</th>
- <th><button on-click="{{changeSortColumn}}" data-msg="1">Current (new)</button></th>
- <th><button on-click="{{changeSortColumn}}" data-msg="2">Allocated since GC (new)</button></th>
- <th><button on-click="{{changeSortColumn}}" data-msg="3">Total before last GC (new)</button></th>
- <th><button on-click="{{changeSortColumn}}" data-msg="4">Total after last GC (new)</button></th>
- <th><button on-click="{{changeSortColumn}}" data-msg="5">Current (old)</button></th>
- <th><button on-click="{{changeSortColumn}}" data-msg="6">Allocated since GC (old)</button></th>
- <th><button on-click="{{changeSortColumn}}" data-msg="7">Total before last GC (old)</button></th>
- <th><button on-click="{{changeSortColumn}}" data-msg="8">Total after last GC (old)</button></th>
- </tr>
- </thead>
- <tbody>
- <tr template="" repeat="{{ cls in sortedProfile }}">
- <td><class-ref app="{{ app }}" ref="{{ cls['class'] }}"></class-ref></td>
- <td>{{ current(cls, true) }}</td>
- <td>{{ allocated(cls, true) }}</td>
- <td>{{ beforeGC(cls, true) }}</td>
- <td>{{ afterGC(cls, true) }}</td>
- <td>{{ current(cls, false) }}</td>
- <td>{{ allocated(cls, false) }}</td>
- <td>{{ beforeGC(cls, false) }}</td>
- <td>{{ afterGC(cls, false) }}</td>
- </tr>
- </tbody>
- </table>
</template>
-</polymer-element><polymer-element name="script-view" extends="observatory-element">
+</polymer-element>
+<polymer-element name="script-view" extends="observatory-element">
<template>
<div class="row">
<div class="col-md-8 col-md-offset-2">
@@ -569,7 +581,7 @@
</tbody>
</table>
</template>
-
+
</polymer-element><polymer-element name="message-viewer" extends="observatory-element">
<!--
This is a big switch statement which instantiates the custom element
@@ -634,7 +646,7 @@
</template>
<!-- Add new views and message types in the future here. -->
</template>
-
+
</polymer-element><polymer-element name="navigation-bar-isolate" extends="observatory-element">
<template>
<ul class="nav navbar-nav">
@@ -644,7 +656,7 @@
</template>
</ul>
</template>
-
+
</polymer-element><polymer-element name="navigation-bar" extends="observatory-element">
<template>
<nav class="navbar navbar-default" role="navigation">
@@ -658,7 +670,7 @@
</template>
</nav>
</template>
-
+
</polymer-element><polymer-element name="isolate-profile" extends="observatory-element">
<template>
<p> P R O F I L E </p>
@@ -690,7 +702,7 @@
</tr>
</tbody></table>
</template>
-
+
</polymer-element>
<polymer-element name="response-viewer" extends="observatory-element">
<template>
@@ -698,7 +710,7 @@
<message-viewer app="{{ app }}" message="{{ message }}"></message-viewer>
</template>
</template>
-
+
</polymer-element><polymer-element name="observatory-application" extends="observatory-element">
<template>
<navigation-bar app="{{ app }}"></navigation-bar>
@@ -709,8 +721,8 @@
<response-viewer app="{{ app }}"></response-viewer>
</template>
</template>
-
+
</polymer-element>
<observatory-application></observatory-application>
-</body></html>
+</body></html>

Powered by Google App Engine
This is Rietveld 408576698