runtime/bin/vmservice/client/lib/src/elements/heap_profile.html - Issue 342513004: Visual refresh of allocation profile page

Unified Diff: runtime/bin/vmservice/client/lib/src/elements/heap_profile.html

Issue 342513004: Visual refresh of allocation profile page (Closed) Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart

Patch Set: Created 6 years, 6 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

« runtime/bin/vmservice/client/lib/src/elements/heap_profile.dart ('K') | « runtime/bin/vmservice/client/lib/src/elements/heap_profile.dart ('k') | runtime/bin/vmservice/client/lib/src/elements/instance_ref.html » ('j') | runtime/bin/vmservice/client/lib/src/service/object.dart » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

Index: runtime/bin/vmservice/client/lib/src/elements/heap_profile.html

diff --git a/runtime/bin/vmservice/client/lib/src/elements/heap_profile.html b/runtime/bin/vmservice/client/lib/src/elements/heap_profile.html

index fe5f2fc9e948c220489de14d3434df8d1622f83d..c4d73049e6b4b8dcd70dd75ddd61c855c74624f4 100644

--- a/runtime/bin/vmservice/client/lib/src/elements/heap_profile.html

+++ b/runtime/bin/vmservice/client/lib/src/elements/heap_profile.html

@@ -1,15 +1,14 @@

-<head>

- <link rel="import" href="class_ref.html">

- <link rel="import" href="observatory_element.html">

- <link rel="import" href="nav_bar.html">

-</head>

+<link rel="import" href="../../../../packages/polymer/polymer.html">

+<link rel="import" href="class_ref.html">

+<link rel="import" href="observatory_element.html">

+<link rel="import" href="nav_bar.html">

<polymer-element name="heap-profile" extends="observatory-element">

<style>

.table {

border-collapse: collapse!important;

- width: 100%;

margin-bottom: 20px

table-layout: fixed;

}

@@ -25,6 +24,13 @@

text-align: left;

border-bottom:2px solid #ddd;

}

+ .spacer {

+ width: 16px;

+ }

+ .left-border-spacer {

+ width: 16px;

+ border-left: 1px solid;

+ }

.clickable {

color: #0489c3;

text-decoration: none;

@@ -41,18 +47,47 @@

<nav-bar>

<top-nav-menu></top-nav-menu>

<isolate-nav-menu isolate="{{ profile.isolate }}"></isolate-nav-menu>

- <nav-menu link="{{ profile.isolate.relativeLink('allocationprofile') }}" anchor="heap profile" last="{{ true }}"></nav-menu>

+ <nav-menu link="{{ profile.isolate.relativeLink('allocationprofile') }}" anchor="allocation profile" last="{{ true }}"></nav-menu>

<nav-refresh callback="{{ resetAccumulator }}" label="Reset Accumulator"></nav-refresh>

<nav-refresh callback="{{ refreshGC }}" label="GC"></nav-refresh>

<nav-refresh callback="{{ refresh }}"></nav-refresh>

<nav-control></nav-control>

</nav-bar>

- <div class="flex-row">

- <div id="newPieChart" class="flex-item-fixed-4-12" style="height: 400px">

+ <div class="content">

+ <h1>Allocation Profile</h1>

+ <br>

+ <div class="memberList">

+ <div class="memberItem">

+ <div class="memberName">last forced GC at</div>

+ <div class="memberValue">{{ lastServiceGC }}</div>

+ </div>

+ <div class="memberItem">

+ <div class="memberName">last accumulator reset at</div>

+ <div class="memberValue">{{ lastAccumulatorReset }}</div>

+ </div>

</div>

- <div id="newStatus" class="flex-item-fixed-2-12">

- <div class="memberList">

+ </div>

+ <hr>

+ <div class="content-centered-big">

+ <div class="flex-row">

+ <div id="newSpace" class="flex-item-50-percent">

+ <h2>New Generation</h2>

+ <br>

+ <div class="memberList">

+ <div class="memberItem">

+ <div class="memberName">used</div>

+ <div class="memberValue">

+ {{ isolate.newSpace.used | formatSize }}

+ of

+ {{ isolate.newSpace.capacity | formatSize }}

+ </div>

+ <div class="memberItem">

+ <div class="memberName">external</div>

+ <div class="memberValue">

+ {{ isolate.newSpace.external | formatSize }}

+ </div>

<div class="memberName">Collections</div>

<div class="memberValue">{{ formattedCollections(true) }}</div>

@@ -65,12 +100,27 @@

<div class="memberName">Cumulative Collection Time</div>

<div class="memberValue">{{ formattedTotalCollectionTime(true) }}</div>

</div>

+ </div>

+ <div id="newPieChart" style="height: 300px"></div>

</div>

- </div>

- <div id="oldPieChart" class="flex-item-fixed-4-12" style="height: 400px">

- </div>

- <div id="oldStatus" class="flex-item-fixed-2-12">

- <div class="memberList">

+ <div id="oldSpace" class="flex-item-50-percent">

+ <h2>Old Generation</h2>

+ <br>

+ <div class="memberList">

+ <div class="memberItem">

+ <div class="memberName">used</div>

+ <div class="memberValue">

+ {{ isolate.oldSpace.used | formatSize }}

+ of

+ {{ isolate.oldSpace.capacity | formatSize }}

+ </div>

+ <div class="memberItem">

+ <div class="memberName">external</div>

+ <div class="memberValue">

+ {{ isolate.oldSpace.external | formatSize }}

+ </div>

<div class="memberName">Collections</div>

<div class="memberValue">{{ formattedCollections(false) }}</div>

@@ -83,39 +133,37 @@

<div class="memberName">Cumulative Collection Time</div>

<div class="memberValue">{{ formattedTotalCollectionTime(false) }}</div>

</div>

+ </div>

+ <div id="oldPieChart" style="height: 300px"></div>

</div>

- <div class="flex-row">

- <table id="classtable" class="flex-item-fixed-12-12 table">

- <thead>

+ <br>

+ <hr>

+ <div class="content-centered-big">

+ <table id="classtable" class="flex-item-100-percent table">

+ <thead id="classTableHead">

<tr>

<th on-click="{{changeSort}}" class="clickable" title="Class">{{ classTable.getColumnLabel(0) }}</th>

- <th on-click="{{changeSort}}" class="clickable" title="New Accumulated Size">{{ classTable.getColumnLabel(1) }}</th>

- <th on-click="{{changeSort}}" class="clickable" title="New Accumulated Instances">{{ classTable.getColumnLabel(2) }}</th>

- <th on-click="{{changeSort}}" class="clickable" title="New Current Size">{{ classTable.getColumnLabel(3) }}</th>

- <th on-click="{{changeSort}}" class="clickable" title="New Current Instances">{{ classTable.getColumnLabel(4) }}</th>

- <th on-click="{{changeSort}}" class="clickable" title="Old Accumulated Size">{{ classTable.getColumnLabel(5) }}</th>

- <th on-click="{{changeSort}}" class="clickable" title="Old Accumulated Instances">{{ classTable.getColumnLabel(6) }}</th>

- <th on-click="{{changeSort}}" class="clickable" title="Old Current Size">{{ classTable.getColumnLabel(7) }}</th>

- <th on-click="{{changeSort}}" class="clickable" title="Old Current Instances">{{ classTable.getColumnLabel(8) }}</th>

+ <th class="spacer"></th>

+ <th on-click="{{changeSort}}" class="clickable" title="New Accumulated Size">{{ classTable.getColumnLabel(2) }}</th>

+ <th on-click="{{changeSort}}" class="clickable" title="New Accumulated Instances">{{ classTable.getColumnLabel(3) }}</th>

+ <th on-click="{{changeSort}}" class="clickable" title="New Current Size">{{ classTable.getColumnLabel(4) }}</th>

+ <th on-click="{{changeSort}}" class="clickable" title="New Current Instances">{{ classTable.getColumnLabel(5) }}</th>

+ <th class="spacer"></th>

+ <th on-click="{{changeSort}}" class="clickable" title="Old Accumulated Size">{{ classTable.getColumnLabel(7) }}</th>

+ <th on-click="{{changeSort}}" class="clickable" title="Old Accumulated Instances">{{ classTable.getColumnLabel(8) }}</th>

+ <th on-click="{{changeSort}}" class="clickable" title="Old Current Size">{{ classTable.getColumnLabel(9) }}</th>

+ <th on-click="{{changeSort}}" class="clickable" title="Old Current Instances">{{ classTable.getColumnLabel(10) }}</th>

</tr>

</thead>

- <tbody>

- <tr template repeat="{{row in classTable.sortedRows }}">

- <td><class-ref ref="{{ classTable.getValue(row, 0) }}"></class-ref></td>

- <td title="{{ classTable.getValue(row, 1) }}">{{ classTable.getFormattedValue(row, 1) }}</td>

- <td title="{{ classTable.getValue(row, 2) }}">{{ classTable.getFormattedValue(row, 2) }}</td>

- <td title="{{ classTable.getValue(row, 3) }}">{{ classTable.getFormattedValue(row, 3) }}</td>

- <td title="{{ classTable.getValue(row, 4) }}">{{ classTable.getFormattedValue(row, 4) }}</td>

- <td title="{{ classTable.getValue(row, 5) }}">{{ classTable.getFormattedValue(row, 5) }}</td>

- <td title="{{ classTable.getValue(row, 6) }}">{{ classTable.getFormattedValue(row, 6) }}</td>

- <td title="{{ classTable.getValue(row, 7) }}">{{ classTable.getFormattedValue(row, 7) }}</td>

- <td title="{{ classTable.getValue(row, 8) }}">{{ classTable.getFormattedValue(row, 8) }}</td>

- </tr>

+ <tbody id="classTableBody">

</tbody>

</table>

+ <br><br><br>

</div>

</template>

-<script type="application/dart" src="heap_profile.dart"></script>

</polymer-element>

+<script type="application/dart" src="heap_profile.dart"></script>