runtime/observatory/lib/src/elements/heap_profile.html - Issue 2255613002: Converted Observatory heap-profile element

Side by Side Diff: runtime/observatory/lib/src/elements/heap_profile.html

Issue 2255613002: Converted Observatory heap-profile element (Closed) Base URL: git@github.com:dart-lang/sdk.git@master

Patch Set: Better sorting tests Created 4 years, 4 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 unified diff | Download patch

OLD	NEW
	(Empty)
1 <link rel="import" href="../../../../packages/polymer/polymer.html">

2

3 <polymer-element name="heap-profile">

4 <template>

5 <link rel="stylesheet" href="css/shared.css">

6 <style>

7 .table {

8 border-collapse: collapse!important;

9 margin-bottom: 20px

10 table-layout: fixed;

11 }

12 .table td:nth-of-type(1) {

13 width: 30%;

14 }

15 .th, .td {

16 padding: 8px;

17 vertical-align: top;

18 }

19 .table thead > tr > th {

20 vertical-align: bottom;

21 text-align: left;

22 border-bottom:2px solid #ddd;

23 }

24 .spacer {

25 width: 16px;

26 }

27 .left-border-spacer {

28 width: 16px;

29 border-left: 1px solid;

30 }

31 .clickable {

32 color: #0489c3;

33 text-decoration: none;

34 cursor: pointer;

35 }

36 .clickable:hover {

37 text-decoration: underline;

38 cursor: pointer;

39 }

40 #classtable tr:hover > td {

41 background-color: #F4C7C3;

42 }

43 .nav-option {

44 color: white;

45 float: right;

46 margin: 3px;

47 padding: 8px;

48 }

49 </style>

50 <link rel="stylesheet" href="../../../../packages/charted/charts/themes/quantu m_theme.css">

51 <style>

52 .chart-wrapper {

53 }

54

55 .chart-host-wrapper {

56 height: 200px;

57 }

58 .chart-legend-host {

59 max-height: 200px;

60 overflow-x: auto;

61 overflow-y: auto;

62 }

63 </style>

64 <nav-bar>

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

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

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

68 <nav-menu link="{{ makeLink('/allocation-profiler', profile.isolate) }}" anc hor="allocation profile" last="{{ true }}"></nav-menu>

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

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

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

72 <div class="nav-option">

73 <input type="checkbox" checked="{{ autoRefresh }}">Auto-refresh on GC

74 </div>

75 <nav-notify notifications="{{ app.notifications }}"></nav-notify>

76 </nav-bar>

77 <div class="content">

78 <h1>Allocation Profile</h1>

79 <br>

80 <div class="memberList">

81 <div class="memberItem">

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

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

84 </div>

85 <div class="memberItem">

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

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

88 </div>

89 </div>

90 </div>

91 <hr>

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

93 <div class="flex-row">

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

95 <h2>New Generation</h2>

96 <br>

97 <div class="memberList">

98 <div class="memberItem">

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

100 <div class="memberValue">

101 {{ isolate.newSpace.used \| formatSize }}

102 of

103 {{ isolate.newSpace.capacity \| formatSize }}

104 </div>

105 </div>

106 <div class="memberItem">

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

108 <div class="memberValue">

109 {{ isolate.newSpace.external \| formatSize }}

110 </div>

111 </div>

112 <div class="memberItem">

113 <div class="memberName">collections</div>

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

115 </div>

116 <div class="memberItem">

117 <div class="memberName">average collection time</div>

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

119 </div>

120 <div class="memberItem">

121 <div class="memberName">cumulative collection time</div>

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

123 </div>

124 <div class="memberItem">

125 <div class="memberName">average time between collections</div>

126 <div class="memberValue">{{ isolate.newSpace.averageCollectionPeriod InMillis.toStringAsFixed(2) }} ms</div>

127 </div>

128 </div>

129 <br>

130 <div class="chart-wrapper" id="new-pie-chart">

131 <div class="chart-host-wrapper">

132 <div class="chart-legend-host"></div>

133 <div class="chart-host"></div>

134 </div>

135 </div>

136 </div>

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

138 <h2>Old Generation</h2>

139 <br>

140 <div class="memberList">

141 <div class="memberItem">

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

143 <div class="memberValue">

144 {{ isolate.oldSpace.used \| formatSize }}

145 of

146 {{ isolate.oldSpace.capacity \| formatSize }}

147 </div>

148 </div>

149 <div class="memberItem">

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

151 <div class="memberValue">

152 {{ isolate.oldSpace.external \| formatSize }}

153 </div>

154 </div>

155 <div class="memberItem">

156 <div class="memberName">collections</div>

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

158 </div>

159 <div class="memberItem">

160 <div class="memberName">average collection time</div>

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

162 </div>

163 <div class="memberItem">

164 <div class="memberName">cumulative collection time</div>

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

166 </div>

167 <div class="memberItem">

168 <div class="memberName">average time between collections</div>

169 <div class="memberValue">{{ isolate.oldSpace.averageCollectionPeriod InMillis.toStringAsFixed(2) }} ms</div>

170 </div>

171 </div>

172 <br>

173 <div class="chart-wrapper" id="old-pie-chart">

174 <div class="chart-host-wrapper">

175 <div class="chart-host"></div>

176 <div class="chart-legend-host"></div>

177 </div>

178 </div>

179 </div>

180 </div>

181 </div>

182 <br>

183 <hr>

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

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

186 <thead id="classTableHead">

187 <tr>

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

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

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

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

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

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

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

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

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

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

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

199 </tr>

200 </thead>

201 <tbody id="classTableBody">

202 </tbody>

203 </table>

204 <view-footer></view-footer>

205 </div>

206 </template>

207 </polymer-element>

208

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

OLD	NEW