,
14 | frame_details: { [number]: { cuid: string, name: string, file: string, line: number } },
15 | type_details: { [number]: { name: string, repr: string } }
16 | }
17 | ];
18 | type LineKey = string;
19 | type HighscoreGraphData = {
20 | frames_by_size: Array<{
21 | snapshot: SnapshotIndex,
22 | [LineKey]: number,
23 | }>
24 | };
25 |
26 | export function HighscoreLineChart({highscores, dataKey: key, numberOfLines = 5}) {
27 | let data = highscores[key];
28 | var allKeys = {};
29 | var scorePerKey = {};
30 |
31 | if (typeof data === "undefined") {
32 | return <>
33 | }
34 |
35 | for (let entry of data) {
36 | for (let innerKey in entry) {
37 | allKeys[innerKey] = 1;
38 | if (typeof scorePerKey[innerKey] === "undefined") {
39 | scorePerKey[innerKey] = 0;
40 | }
41 | scorePerKey[innerKey] += entry[innerKey];
42 | }
43 | }
44 |
45 | var keyList = [];
46 | for (let key in allKeys) {
47 | keyList.push(key);
48 | }
49 |
50 | keyList.sort((a, b) => (scorePerKey[b] - scorePerKey[a]));
51 |
52 | keyList = keyList.slice(0, numberOfLines);
53 |
54 | let startValue = 5;
55 | let endValue = 80;
56 | let valueStep = (endValue - startValue) / numberOfLines;
57 |
58 | return (
59 |
60 |
61 |
63 |
64 | {
65 | keyList.map((key, index) => (
66 | {
71 | const outer = stuff.payload;
72 | return (
73 |
74 |
75 | {
76 | outer.map(val => ({val.name}: {numberFormatter(val.value)} ))
77 | }
78 |
79 |
83 |
84 | );
85 | }
86 |
87 | export function HighscoreGraphs(props: { value: number, onChange: (e: any) => void, highscores: any }) {
88 | return
89 |
Top
90 | {
91 | typeof props.highscores === "undefined"
92 | ?
Waiting for results...
93 | :
94 | <>
95 |
Top objects by size
96 |
98 | Top objects by count
99 |
101 | Top frames by size
102 |
104 | Top frames by count
105 |
107 |
108 | }
109 |
Summaries
114 | Total Heap Size
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 | Total Object Count
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 | Typeobjects, STables, and Frames
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 | References
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 | ;
152 | }
--------------------------------------------------------------------------------
/frontend/profiler/components/RoutinePieces.jsx:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import { Container, Button, Nav, NavItem, NavLink } from 'reactstrap';
3 | import { Link } from 'react-router-dom';
4 |
5 | export function numberFormatter(number, fractionDigits = 0, thousandSeperator = ',', fractionSeperator = '.') {
6 | if (number!==0 && !number || !Number.isFinite(number)) return number
7 | const frDigits = Number.isFinite(fractionDigits)? Math.min(Math.max(fractionDigits, 0), 7) : 0
8 | const num = number.toFixed(frDigits).toString()
9 |
10 | const parts = num.split('.')
11 | let digits = parts[0].split('').reverse()
12 | let sign = ''
13 | if (num < 0) {sign = digits.pop()}
14 | let final = []
15 | let pos = 0
16 |
17 | while (digits.length > 1) {
18 | final.push(digits.shift())
19 | pos++
20 | if (pos % 3 === 0) {final.push(thousandSeperator)}
21 | }
22 | final.push(digits.shift())
23 | return `${sign}${final.reverse().join('')}${frDigits > 0 ? fractionSeperator : ''}${frDigits > 0 && parts[1] ? parts[1] : ''}`
24 | }
25 |
26 | export function timeToHuman(time, suffix = 'ms', smaller) {
27 | if (time / 1000 >= 0.01 || typeof smaller === "undefined") {
28 | return ({numberFormatter(time / 1000, 2)}
29 | {suffix} );
30 | }
31 | else {
32 | return ({numberFormatter(time, 2)}
33 | {smaller}
40 |
41 |
42 | {
43 | jitText !== "0.00" ? jitText : "0"
44 | }% jit
45 |
46 |
47 | {numberFormatter(routine.entries)}
48 | {
49 | typeof parentEntries !== "undefined"
50 | ? {numberFormatter(routine.entries / parentEntries, 2)} per entry
52 | )
56 | }
57 |
58 | export function ExclusiveInclusiveTime({routine, maxTime}) {
59 | var barWidthFirst, barWidthSecond, barWidthRest;
60 | const exclusive = routine.exclusive_time || routine.exclusive;
61 | const inclusive = routine.inclusive_time || routine.inclusive;
62 | let willShowBar = typeof maxTime !== "undefined" && exclusive <= inclusive;
63 | if (typeof maxTime !== "undefined") {
64 | barWidthFirst = (exclusive / maxTime) * 100;
65 | barWidthSecond = ((inclusive - exclusive) / maxTime) * 100;
66 | barWidthRest = (1 - inclusive / maxTime) * 100;
67 | }
68 | const barStyle = {
69 | height: "0.5em",
70 | padding: "0px",
71 | margin: "0px",
72 | display: "inline-block"
73 | }
74 | return (
75 |
76 | {timeToHuman(exclusive, "ms", "µs")} / {timeToHuman(inclusive, "ms", "µs")}
80 | {timeToHuman(exclusive / routine.entries, "ms", "µs")} / {" "}
81 | {timeToHuman(inclusive / routine.entries, "ms", "µs")}
82 | {" "}per entry
83 |
84 | }
85 | {
86 | willShowBar && (
87 |
88 |
95 |
108 |
109 |
110 | )
111 | }
112 | )
113 | }
114 |
115 | export function allocationInfo({routine}) {
116 |
117 | }
118 |
119 | export function RoutineFileInfo({routine}) {
120 | var link;
121 | if (routine.file.startsWith("CORE::v6")) {
122 | var withoutBeginning = routine.file.replace("CORE::v6", "");
123 | var coreVersion = withoutBeginning.substring(1, 2);
124 | withoutBeginning = withoutBeginning.substring(4);
125 | link =
126 | { routine.file }:{ routine.line }
127 | }
128 | else if (routine.file.startsWith("CORE::")) {
129 | link =
130 | { routine.file }:{ routine.line }
131 | }
132 | else {
133 | link = {routine.file}:{routine.line}
134 | }
135 | return { link }
136 | }
137 |
138 | export function RoutineNameInfo({routine, searchResults}) {
139 | return (
140 | { typeof searchResults === "number" && searchResults > 0 &&
}
141 | {routine.name} )
146 | }
147 |
148 | export function LinkButton({icon, target, disabled}) {
149 | if (disabled) {
150 | return (
151 |
152 |
154 |
155 | )
156 | }
157 | return (
158 |
159 |
161 |
162 | )
163 | }
164 |
165 | export function InlineInfo({routine}) {
166 | const inlineText = (routine.inlined_entries * 100 / routine.entries).toPrecision(3);
167 | return (
168 | inlineText === "0.00"
169 | ? -
170 | : {inlineText}% inlined
171 | )
172 | }
173 |
--------------------------------------------------------------------------------
/frontend/profiler/components/Routine.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component, createRef } from 'react';
2 | import { Container, Button, Table, Nav, NavItem, NavLink } from 'reactstrap';
3 | import classnames from 'classnames';
4 | import $ from 'jquery';
5 |
6 | import RoutineList from './RoutineList';
7 | import RoutinePaths from './RoutinePaths';
8 |
9 | import {
10 | ExclusiveInclusiveTime,
11 | EntriesInfo,
12 | InlineInfo,
13 | RoutineNameInfo,
14 | } from './RoutinePieces';
15 | import { AllocTableContent } from './AllocationParts';
16 | import CallersList from './CallersList';
17 | import { RoutineListHeaderComponent } from './RoutineOverviewPage';
18 |
19 | /**
20 | * @typedef {{
21 | routine: *;
22 | metadata: *;
23 | columns: *;
24 | expanded: *;
25 | allRoutineChildren: *;
26 | onExpandButtonClicked: *;
27 | maxTime: *;
28 | parentEntries: *;
29 | }} RoutineProps
30 | */
31 |
32 | export default class Routine extends Component {
33 | constructor(props) {
34 | super(props);
35 | this.scrollRowRef = createRef();
36 | this.state = {
37 | tab: 'callees',
38 | allocations: null,
39 | allocsError: null,
40 | };
41 | }
42 |
43 | componentDidMount() {
44 | if (this.props.shouldScrollTo === this.props.routine.id) {
45 | this.scrollRowRef.scrollIntoView({ behavior: 'smooth' });
46 | }
47 | }
48 |
49 | componentDidUpdate(prevProps, _prevState) {
50 | if (typeof this.props.shouldScrollTo !== 'undefined') {
51 | if (
52 | typeof prevProps.shouldScrollTo === 'undefined' ||
53 | prevProps.shouldScrollTo !== this.props.shouldScrollTo
54 | ) {
55 | if (this.props.shouldScrollTo === this.props.routine.id) {
56 | this.scrollRowRef.scrollIntoView({ behavior: 'smooth' });
57 | }
58 | }
59 | }
60 | }
61 |
62 | requestAllocations() {
63 | const stateChangeForAlloc = (self, allocs) => {
64 | self.setState(() => ({
65 | allocations: allocs,
66 | }));
67 | };
68 |
69 | $.ajax({
70 | url: `/routine-allocations/${encodeURIComponent(this.props.routine.id)}`,
71 | type: 'GET',
72 | contentType: 'application/json',
73 | success: allocs => stateChangeForAlloc(this, allocs),
74 | error: (xhr, errorStatus, errorText) => {
75 | this.setState(() => ({ allocsError: errorStatus + errorText }));
76 | },
77 | });
78 | }
79 |
80 | render() {
81 | const {
82 | routine,
83 | metadata,
84 | expanded,
85 | allRoutineChildren,
86 | onExpandButtonClicked,
87 | maxTime,
88 | parentEntries,
89 | shouldScrollTo,
90 | } = this.props;
91 | let { columns } = this.props;
92 |
93 | if (routine === null) {
94 | return '';
95 | }
96 | if (typeof columns === 'string') {
97 | columns = columns.split(' ');
98 | }
99 | const myMetadata = metadata[routine.id];
100 | const columnFunctions = {
101 | expand() {
102 | return (
103 |
104 | onExpandButtonClicked(routine.id)}>
105 |
107 |
108 | );
109 | },
110 | sitecount() {
111 | return {routine.sitecount} ;
112 | },
113 | nameInfo() {
114 | return
143 | {(!allRoutineChildren ||
144 | typeof allRoutineChildren[routine.id] === 'undefined') && (
145 | Loading, hold on ...
146 | )}
147 | {allRoutineChildren && allRoutineChildren[routine.id] && (
148 |
159 | );
160 | } else if (this.state.tab === 'callers') {
161 | expandedComponent = (
162 |
163 |
165 | );
166 | } else if (this.state.tab === 'paths') {
167 | expandedComponent = (
168 |
169 |
171 | );
172 | } else if (this.state.tab === 'allocations') {
173 | if (this.state.allocations === null) {
174 | expandedComponent = (
175 |
176 | Loading, hold on...
177 |
178 | );
179 | } else {
180 | expandedComponent = (
181 |
182 |
190 |
191 | );
192 | }
193 | }
194 | }
195 | return [
196 |
201 | {columns.map(name => columnFunctions[name]())}
202 | ,
203 | expanded && (
204 |
205 |
209 |
210 |
211 |
216 | this.setState(() => ({ tab: 'callees' }))
217 | }
218 | >
219 | Callees
220 |
221 |
222 |
223 |
228 | this.setState(() => ({ tab: 'callers' }))
229 | }
230 | >
231 | Callers
232 |
233 |
234 |
235 |
238 | this.setState(() => ({ tab: 'path' }))
239 | }
240 | >
241 | Paths
242 |
243 |
244 |
245 | {
250 | this.requestAllocations();
251 | this.setState(() => ({ tab: 'allocations' }));
252 | }}
253 | >
254 | Allocations
255 |
256 |
257 |
258 | {expandedComponent}
259 |
260 |
261 | ),
262 | ];
263 | }
264 | }
265 |
--------------------------------------------------------------------------------
/frontend/profiler/components/RoutinePaths.jsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-restricted-syntax */
2 | import React, { Component } from 'react';
3 | import $ from 'jquery';
4 | import { Button, Table } from 'reactstrap';
5 | import { Link } from 'react-router-dom';
6 | import classnames from 'classnames';
7 |
8 | /**
9 | * @typedef {{routineId: *;callIdList: *;allRoutines: *;}} RoutinePathsProps
10 | */
11 |
12 | export default class RoutinePaths extends Component {
13 | constructor(props) {
14 | super(props);
15 | this.state = {
16 | isLoading: false,
17 | error: null,
18 | paths: [],
19 | pathDepth: 0,
20 | minimalView: false,
21 | };
22 | }
23 |
24 | componentDidMount() {
25 | this.state.isLoading = true;
26 | function calculateDepth(tree) {
27 | let childArray;
28 | if (tree instanceof Array) {
29 | childArray = tree;
30 | } else {
31 | if (tree.children.length === 0) {
32 | return 0;
33 | }
34 | childArray = tree.children;
35 | }
36 | console.log('calculating depth of', childArray);
37 | let max = 0;
38 | for (const children of childArray) {
39 | const childVal = calculateDepth(children.children);
40 | if (childVal > max) max = childVal;
41 | }
42 | return max + 1;
43 | }
44 | const url =
45 | typeof this.props.routineId === 'undefined'
46 | ? `/call-paths/${encodeURIComponent(this.props.callIdList.join(','))}`
47 | : `/routine-paths/${encodeURIComponent(this.props.routineId)}`;
48 | $.ajax({
49 | url,
50 | type: 'GET',
51 | contentType: 'application/json',
52 | success: paths =>
53 | this.setState(() => ({
54 | isLoading: false,
55 | paths,
56 | pathDepth: calculateDepth(paths),
57 | })),
58 | error: (xhr, errorStatus, errorText) => {
59 | this.setState(() => ({
60 | isLoading: false,
61 | error: errorStatus + errorText,
62 | }));
63 | },
64 | });
65 | }
66 |
67 | toggleMinimalView() {
68 | this.setState(state => ({ minimalView: !state.minimalView }));
69 | }
70 |
71 | render() {
72 | if (this.state.isLoading) {
73 | return Hold on ...
;
74 | }
75 | if (this.state.error) {
76 | return Error occurred: {this.state.error}
;
77 | }
78 | const result = [];
79 | let row = [];
80 | const showLines = [];
81 | let key = 0;
82 | const self = this;
83 | const tdStyle = {
84 | borderLeft: '1px solid darkgrey',
85 | padding: '0.3em !important',
86 | paddingLeft: '12px !important',
87 | };
88 | const isHighlighted =
89 | typeof this.props.routineId === 'undefined'
90 | ? entry =>
91 | this.props.callIdList.filter(listEntry => entry.call === listEntry).length > 0
92 | : entry => entry.routine === this.props.routineId;
93 | function digestNode(children, node, depth = 1) {
94 | console.log('digesting children:', children, node);
95 | if (children.length > 0) {
96 | let first = 1;
97 | let last = children.length;
98 | for (const child of children) {
99 | const NameDisplay = ({ routine }) =>
100 | (self.state.minimalView ? 'X' : self.props.allRoutines[routine].name);
101 | if (children.length > 1 && last-- > 1) {
102 | showLines[depth] = 1;
103 | } else {
104 | showLines[depth] = 0;
105 | }
106 | if (row.length === 0 && depth > 1) {
107 | row = Array(depth - 1)
108 | .fill(0)
109 | .map((x, idx) => (
110 | 1 })}
122 | style={{ ...tdStyle }}
123 | >
124 | {self.state.minimalView ? '»' : 'Entry'}
125 | ,
126 | );
127 | } else {
128 | const childRoutine = self.props.allRoutines[child.routine];
129 | const linkStyle = self.state.minimalView
130 | ? { display: 'block', backgroundColor: childRoutine.color }
131 | : {};
132 | if (!self.state.minimalView) {
133 | tdStyle.borderBottom = `4px solid ${childRoutine.color}`;
134 | }
135 | console.log(child);
136 | console.log(isHighlighted(child));
137 | row.push(
138 | 1,
142 | highlighted: isHighlighted(child),
143 | })}
144 | style={{ ...tdStyle }}
145 | >
146 | );
156 | if (!self.state.minimalView) {
157 | tdStyle.borderBottom = undefined;
158 | }
159 | }
160 | digestNode(child.children, child, depth + 1);
161 | if (first-- <= 0 && row.length > 0) {
162 | result.push(
163 |
164 | {row}
165 | );
166 | row = [];
167 | }
168 | }
169 | } else {
170 | /*
171 | if (node)
172 | row.push({self.props.allRoutines[node.routine].name} {node.call} );
173 | else
174 | row.push(What? );
175 | */
176 | result.push(
177 |
178 | {row}
179 | );
180 | row = [];
181 | }
182 | }
183 | for (const thread of this.state.paths) {
184 | digestNode(thread.children.children, thread.children);
185 | }
186 |
187 | result.push({row} );
188 | return (
189 |
190 |
220 | {this.state.minimalView ? (
221 |
242 | ) : (
243 | ''
244 | )}
245 | this.toggleMinimalView()}
247 | active={this.state.minimalView}
248 | >
249 | Minimal
250 |
251 |
254 |
255 | );
256 | }
257 | }
258 |
--------------------------------------------------------------------------------
/lib/HeapAnalyzerWeb.pm6:
--------------------------------------------------------------------------------
1 | use v6.d.PREVIEW;
2 | use OO::Monitors;
3 |
4 | use App::MoarVM::HeapAnalyzer::Model;
5 |
6 | monitor HeapAnalyzerWeb {
7 |
8 | has App::MoarVM::HeapAnalyzer::Model $.model;
9 |
10 | has Supplier $!status-updates = Supplier::Preserving.new;
11 |
12 | has $!latest-model-state = "nothing";
13 |
14 | has %.operations-in-progress;
15 |
16 | has $!highscores;
17 |
18 | has Supplier $!progress-updates = Supplier::Preserving.new;
19 |
20 | method load-file($file is copy) {
21 | $file = $file.IO;
22 | die "$file does not exist" unless $file.e;
23 | die "$file does not a file" unless $file.f;
24 | die "$file does not readable" unless $file.r;
25 | note "trying to open a model file";
26 | my $resolve = Promise.new;
27 | start {
28 | note "started!";
29 | with $!model {
30 | die "Switching models NYI";
31 | }
32 | note "sending pre-load message";
33 | $!latest-model-state = "pre-load";
34 | $!status-updates.emit({ model_state => "pre-load" });
35 | note "building the model now";
36 | $!model .= new(:$file);
37 | note "going to resolve";
38 | $resolve.keep;
39 | if $!model.num-snapshots == 1 {
40 | self.request-snapshot(0);
41 | }
42 | note "done, yay";
43 | $!latest-model-state = "post-load";
44 | $!status-updates.emit({ model_state => "post-load", |self.model-overview });
45 | $!model.highscores.then({
46 | my @scores = .result;
47 | my %lookups;
48 | my $whole-result = %();
49 | for [, ] -> @bits {
50 | my @all-indices;
51 | my @per-position-entries;
52 | for @scores -> $snap-score {
53 | for $snap-score{@bits.head(2)} {
54 | @all-indices.append($_.list);
55 | }
56 | }
57 | @all-indices .= unique;
58 | %lookups{@bits.tail} = @bits.tail eq "frames"
59 | ?? (@all-indices Z=> $!model.resolve-frames(@all-indices)).hash
60 | !! (@all-indices Z=> $!model.resolve-types(@all-indices)).hash;
61 | }
62 |
63 | for [, ] -> @bits {
64 | for @scores -> $snap-score {
65 | state $idx = 0;
66 | for @bits.head(2) -> $bit {
67 | my %right-lookup := %lookups{@bits.tail};
68 | my &formatter = @bits.tail eq "frames" ?? { (. || "") ~ " $_.:$_" } !! { . };
69 | for $snap-score{$bit}.list Z $snap-score{$bit}.list {
70 | $whole-result{$bit}[$idx]{formatter %right-lookup{$_[0]}} = $_[1];
71 | }
72 | }
73 | $idx++;
74 | }
75 | }
76 |
77 | $whole-result = %lookups;
78 |
79 | $!highscores = $whole-result;
80 |
81 | $!status-updates.emit({ model_state => "post-load", |self.model-overview });
82 | LEAVE note "highscores calculated in $( now - ENTER now )s";
83 | CATCH { .say }
84 | });
85 | CATCH {
86 | note "error loading heap snapshot";
87 | $!status-updates.emit(
88 | %(model_state => "error-load",
89 | error_type => $_.^name,
90 | error_message => $_.message));
91 | $resolve.break($_);
92 | }
93 | }
94 | note "waiting for resolve to happen";
95 | await $resolve;
96 | }
97 |
98 | method status-messages() {
99 | LEAVE {
100 | note "status messages opened; model state is $!latest-model-state";
101 | if $!latest-model-state eq "post-load" {
102 | Promise.in(0.1).then({ $!status-updates.emit({ model_state => "post-load", |self.model-overview }) });
103 | }
104 | if $!latest-model-state eq "nothing" {
105 | Promise.in(0.1).then({ $!status-updates.emit({ model_state => "nothing" }) });
106 | }
107 | $!status-updates.Supply.tap({ note "heap status message: $_" });
108 | }
109 | $!status-updates.Supply
110 | }
111 |
112 | method progress-messages() {
113 | LEAVE {
114 | for %.operations-in-progress {
115 | $!progress-updates.emit($_);
116 | }
117 | }
118 | $!progress-updates.Supply
119 | }
120 |
121 | method model-overview() {
122 | with $!model {
123 | {
124 | num_snapshots => $!model.num-snapshots,
125 | loaded_snapshots => ^$!model.num-snapshots .map({ $%( state => $!model.snapshot-state($_).Str ) }),
126 | |%(summaries => $_ with $!model.summaries),
127 | |%(highscores => $_ with $!highscores),
128 | }
129 | }
130 | else {
131 | %(
132 | model_state => "unprepared",
133 | |(suggested_filename => $_ with %*ENV))
134 | }
135 | }
136 |
137 | method !make-update-key {
138 | (flat "a".."z", "A".."Z").pick(16).join("");
139 | }
140 |
141 | method request-snapshot($index) {
142 | note "requested snapshot at ", DateTime.now;
143 |
144 | die "the model needs to load up first" without $!model;
145 | die "Snapshot ID $index out of range (0..$!model.num-snapshots())"
146 | unless $index ~~ 0..^$!model.num-snapshots();
147 |
148 | die unless $!model.snapshot-state($index) ~~ SnapshotStatus::Unprepared;
149 |
150 | $!status-updates.emit: %(
151 | snapshot_index => $index,
152 | snapshot_state => { state => "Preparing" });
153 |
154 | my Supplier $updates .= new;
155 |
156 | my $update-key = self!make-update-key;
157 |
158 | $!progress-updates.emit: %(
159 | progress => [0, 1, 0],
160 | description => "reading snapshot $index",
161 | uuid => $update-key,
162 | :!cancellable,
163 | );
164 |
165 | start react {
166 | whenever $updates.Supply -> $message {
167 | if $message:exists {
168 | $!progress-updates.emit: %(
169 | uuid => $update-key,
170 | progress => $message,
171 | :!cancellable,
172 | );
173 | }
174 | }
175 | whenever $!model.promise-snapshot($index, :$updates) {
176 | $!status-updates.emit: %(
177 | snapshot_index => $index,
178 | snapshot_state => { state => $!model.snapshot-state($index).Str },
179 | is_done => True,
180 | )
181 | }
182 | }
183 |
184 | $update-key;
185 | }
186 |
187 | method collectable-data($snapshot, $index) {
188 | die unless $!model.snapshot-state($snapshot) ~~ SnapshotStatus::Ready;
189 |
190 | with $!model.promise-snapshot($snapshot).result -> $s {
191 | $s.col-details($index);
192 | }
193 | }
194 |
195 | method collectable-outrefs($snapshot, $index) {
196 | die unless $!model.snapshot-state($snapshot) ~~ SnapshotStatus::Ready;
197 |
198 | with $!model.promise-snapshot($snapshot).result -> $s {
199 | my @parts = $s.details($index);
200 | my @pieces;
201 | @pieces.push: @parts.shift;
202 |
203 | my %categories := @parts.rotor(2).classify({ .head, .tail.key });
204 |
205 | %(do for %categories {
206 | .key => %(do for .value.list -> $typepair {
207 | $typepair.key => do for $typepair.value.list { .[1].value }
208 | })
209 | })
210 | }
211 | }
212 |
213 | method collectable-inrefs($snapshot, $index) {
214 | die unless $!model.snapshot-state($snapshot) ~~ SnapshotStatus::Ready;
215 |
216 | my $updates = Supplier::Preserving.new;
217 | my $update-key = self!make-update-key;
218 |
219 | start react whenever $updates.Supply -> $message {
220 | if $message:exists {
221 | $!progress-updates.emit: %(
222 | description => "calculating incoming refs for snapshot $snapshot",
223 | uuid => $update-key,
224 | progress => $message,
225 | :!cancellable,
226 | );
227 | }
228 | }
229 |
230 | with $!model.promise-snapshot($snapshot).result -> $s {
231 | my $rev-refs = $s.reverse-refs($index, :$updates).squish.cache;
232 | my %categories = $rev-refs.classify(*.value, as => *.key);
233 |
234 | [%categories.sort({ .value.elems, .value.head }).map({ .key, .value })]
235 | }
236 | }
237 |
238 | my constant %kind-map = hash
239 | objects => CollectableKind::Object,
240 | stables => CollectableKind::STable,
241 | frames => CollectableKind::Frame;
242 |
243 | method toplist($kind, $by, $snapshot, $count = 100, $start = 0) {
244 | die "snapshot not loaded" unless $!model.snapshot-state($snapshot) ~~ SnapshotStatus::Ready;
245 | die "invalid kind $kind" unless %kind-map{$kind}:exists;
246 |
247 | with $!model.promise-snapshot($snapshot).result -> $s {
248 | my @tops = $s."top-by-$by"($count + $start, %kind-map{$kind})
249 | }
250 | }
251 |
252 | method find(Int $snapshot, Str $kind, $condition, $target, Int $count, Int $start) {
253 | die "snapshot not loaded" unless $!model.snapshot-state($snapshot) ~~ SnapshotStatus::Ready;
254 | die "invalid kind $kind" unless %kind-map{$kind}:exists;
255 |
256 | dd $count, $start;
257 |
258 | with $!model.promise-snapshot($snapshot).result -> $s {
259 | my $tops = $s.find($count + $start, %kind-map{$kind}, $condition, $target);
260 | say $tops.values.elems;
261 | $tops.values.map({ %( id => .[0], descr => .[1], size => .[2] ) });
262 | }
263 | }
264 |
265 | method path(Int $snapshot, Int $collectable) {
266 | die unless $!model.snapshot-state($snapshot) ~~ SnapshotStatus::Ready;
267 |
268 | my $updates = Supplier::Preserving.new;
269 | my $update-key = self!make-update-key;
270 |
271 | start react whenever $updates.Supply -> $message {
272 | if $message:exists {
273 | $!progress-updates.emit: %(
274 | description => "calculating pathing for snapshot $snapshot",
275 | uuid => $update-key,
276 | progress => $message,
277 | :!cancellable,
278 | );
279 | }
280 | }
281 |
282 | with $!model.promise-snapshot($snapshot).result -> $s {
283 | $s.path($collectable, :$updates).duckmap(-> Pair $p { [$p.key, $p.value] });
284 | }
285 | }
286 |
287 | method request-shared-data {
288 | %(
289 | types => $!model.resolve-types(^$!model.num-types),
290 | frames => $!model.resolve-frames(^$!model.num-frames),
291 | )
292 | }
293 | }
294 |
--------------------------------------------------------------------------------
/lib/Routes.pm6:
--------------------------------------------------------------------------------
1 | use Cro::HTTP::Router;
2 | use Cro::HTTP::Router::WebSocket;
3 | use JSON::Fast;
4 | use HeapAnalyzerWeb;
5 | use ProfilerWeb;
6 | use CodeRunner;
7 |
8 | sub json-content($route, &code) {
9 | say "json content: $route";
10 | my $start = now;
11 | my $result = code();
12 | note " $route in { now - $start }";
13 | $start = now;
14 | my $json-result = to-json($result, :!pretty);
15 | note " $route json in { now - $start }: $json-result.chars() characters";
16 | content "application/json", $json-result;
17 | }
18 |
19 | sub routes(HeapAnalyzerWeb $model, ProfilerWeb $profiler, $filename?) is export {
20 | sub load-file(Str $path) {
21 | if $path.ends-with("sql" | "sqlite3") {
22 | note "opening an sql thing";
23 | $profiler.load-file($path);
24 | note "done";
25 | return { filetype => "profile" };
26 | } else {
27 | note "opening a heap thing";
28 | $model.load-file($path);
29 | note "done";
30 | return { filetype => "heapsnapshot" };
31 | }
32 | }
33 |
34 | try {
35 | load-file($_) with $filename;
36 | CATCH {
37 | default {
38 | say "Could not load $filename from disk:";
39 | say "";
40 | .message.say;
41 | say "";
42 | say "Continuing without a loaded file.";
43 | }
44 | }
45 | }
46 |
47 | route {
48 | get -> {
49 | static 'static/index.html'
50 | }
51 |
52 | get -> 'js', *@path {
53 | static 'static/js', @path;
54 | }
55 |
56 | get -> 'js', 'bootstrap.bundle.js' { static 'frontend/node_modules/bootstrap/dist/js/bootstrap.bundle.js' }
57 | get -> 'js', 'bootstrap.bundle.js.map' { static 'frontend/node_modules/bootstrap/dist/js/bootstrap.bundle.js.map' }
58 |
59 | get -> 'css', *@path {
60 | static 'static/css', @path;
61 | }
62 |
63 | get -> 'css', 'bootstrap.css' { static 'frontend/node_modules/bootstrap/dist/css/bootstrap.css' }
64 | get -> 'css', 'bootstrap-grid.css' { static 'frontend/node_modules/bootstrap/dist/css/bootstrap-grid.css' }
65 | get -> 'css', 'bootstrap-reboot.css' { static 'frontend/node_modules/bootstrap/dist/css/bootstrap-reboot.css' }
66 |
67 | get -> 'imagery', *@path {
68 | static 'static/imagery', @path;
69 | }
70 |
71 | get -> 'whats-loaded' {
72 | if $profiler.is-loaded -> $filename {
73 | content 'application/json', { filetype => "profile", filename => $filename }
74 | }
75 | # XXX something for the heap analyzer
76 | elsif $model.model.defined {
77 | content 'application/json', { filetype => "heap", filename => "who knows" }
78 | }
79 | else {
80 | content 'application/json', %( )
81 | }
82 | }
83 |
84 | post -> 'load-file' {
85 | request-body -> (Str :$path?) {
86 | say $path.perl;
87 | content 'application/json', load-file($path);
88 | }
89 | }
90 |
91 | post -> 'browse' {
92 | request-body -> (Str :$type = "script") {
93 | content "application/json", {filenames => CodeRunner.get-interesting-local-files(:$type)};
94 | }
95 | }
96 |
97 | get -> 'overview-data' {
98 | json-content "overview-data", { $profiler.overview-data() }
99 | }
100 |
101 | get -> 'thread-data' {
102 | json-content "thread-data", { $profiler.thread-data() }
103 | }
104 |
105 | get -> 'recursive-call-children', Int $call-id {
106 | json-content "recursive-call-children", { $profiler.recursive-children-of-call($call-id) }
107 | }
108 |
109 | get -> 'routine-children', Int $routine-id {
110 | json-content "routine-children", { $profiler.all-children-of-routine($routine-id) };
111 | }
112 |
113 | get -> 'routine-callers', Int $routine-id {
114 | json-content "routine-callers", { $profiler.callers-of-routine($routine-id) };
115 | }
116 |
117 | get -> 'routine-overview' {
118 | json-content "routine-overview", { $profiler.routine-overview }
119 | }
120 |
121 | get -> 'all-routines' {
122 | json-content "all-routines", { $profiler.all-routines }
123 | }
124 |
125 | get -> 'routine-paths', Int $routine-id {
126 | json-content "routine-paths", { $profiler.routine-paths($routine-id) };
127 | }
128 |
129 | get -> 'call-paths', Str $call-id {
130 | json-content "call-path", { $profiler.call-path($call-id) };
131 | }
132 |
133 | get -> 'call-path', Int $call-id {
134 | json-content "call-path", { $profiler.call-path($call-id) };
135 | }
136 |
137 | get -> 'call-children', Int $call-id, "search", Str $search {
138 | json-content "call-children", { $profiler.search-call-children($call-id, $search) };
139 | }
140 |
141 | get -> 'call-children', Int $call-id {
142 | json-content "call-children", { $profiler.children-of-call($call-id) };
143 | }
144 |
145 | get -> 'gc-overview' {
146 | json-content "gc-overview", { $profiler.gc-summary };
147 | }
148 |
149 | get -> 'gc-details', Int $sequence-num {
150 | json-content "gc-details", { $profiler.gc-details($sequence-num) };
151 | }
152 |
153 | get -> 'all-allocations' {
154 | json-content "all-allocs", { $profiler.all-allocs };
155 | }
156 |
157 | get -> 'call-allocations', Int $call {
158 | json-content "call-allocations", { $profiler.call-allocations($call) }
159 | }
160 |
161 | get -> 'routine-allocations', Int $routine {
162 | json-content "routine-allocations", { $profiler.routine-allocations($routine) }
163 | }
164 |
165 | get -> 'routine-spesh-overview' {
166 | json-content "routine-spesh-overview", { $profiler.routine-spesh-overview() }
167 | }
168 |
169 | get -> 'inclusive-call-allocations', Int $call {
170 | json-content "inclusive-call-allocations", { $profiler.call-allocations-inclusive($call) }
171 | }
172 |
173 | get -> 'allocations-per-type' {
174 | json-content "allocations-per-type", { $profiler.allocations-per-type }
175 | }
176 |
177 | get -> 'allocating-routines-per-type', Int $type {
178 | json-content "allocating-routines-per-type", { $profiler.allocating-routines-per-type($type) }
179 | }
180 |
181 | get -> 'deallocations-for-type', Int $type {
182 | json-content "deallocations-for-type", { $profiler.deallocations-for-type($type) }
183 | }
184 |
185 | get -> 'deallocations-for-sequence', Int $seqnum {
186 | json-content "deallocations-for-sequence", { $profiler.deallocations-for-sequence($seqnum) }
187 | }
188 |
189 | get -> 'model-overview' {
190 | content "application/json", to-json($model.model-overview)
191 | }
192 |
193 | post -> 'request-snapshot' {
194 | request-body -> (Int :$index!) {
195 | json-content "request-snapshot", { %( update_key => $model.request-snapshot($index) ) }
196 | }
197 | }
198 |
199 | get -> 'request-heap-shared-data' {
200 | json-content "request-heap-shared-data", { $model.request-shared-data }
201 | }
202 |
203 | get -> 'toplist', Int $snapshot, Str $kind, Str $by, Int $count = 100, Int $start = 0 {
204 | json-content "toplist", { $model.toplist($kind, $by, $snapshot, $count, $start) }
205 | }
206 |
207 | get -> 'collectable-data', Int $snapshot, Int $index {
208 | json-content "collectable-data", { $model.collectable-data($snapshot, $index) }
209 | }
210 |
211 | get -> 'collectable-outrefs', Int $snapshot, Int $index {
212 | json-content "collectable-outrefs", { $model.collectable-outrefs($snapshot, $index) }
213 | }
214 | get -> 'collectable-inrefs', Int $snapshot, Int $index {
215 | json-content "collectable-inrefs", { $model.collectable-inrefs($snapshot, $index) }
216 | }
217 |
218 | get -> 'find', Int $snapshot, Str $kind, Str $condition, Str $target, Int $count = 500, Int $start = 0 {
219 | json-content "find", { $model.find($snapshot, $kind, $condition, $target, $count, $start) }
220 | }
221 |
222 | get -> 'path', Int $snapshot, Int $collectable {
223 | json-content "path", { $model.path($snapshot, $collectable) }
224 | }
225 |
226 | get -> 'heap-status-messages' {
227 | web-socket -> $incoming {
228 | note "subscription to heap status messages";
229 | supply {
230 | whenever $model.status-messages -> $message {
231 | note "sending off heap event at $(DateTime.now)";
232 | emit to-json {
233 | :WS_ACTION,
234 | action => {
235 | type => "HEAP_STATUS_UPDATE",
236 | body => $message
237 | }
238 | }, :sorted-keys
239 | }
240 | whenever $model.progress-messages -> $progress {
241 | emit to-json {
242 | :WS_ACTION,
243 | action => {
244 | type => "HEAP_PROGRESS_UPDATE",
245 | body => $progress
246 | }
247 | }, :sorted-keys
248 | }
249 | }
250 | }
251 | }
252 |
253 | get -> 'profile-status-messages' {
254 | note "subscribing to profiler status messages";
255 | web-socket -> $incoming {
256 | supply {
257 | whenever $profiler.status-messages -> $message {
258 | note "got a status message";
259 | emit to-json {
260 | WS_ACTION => True,
261 | action => {
262 | type => "PROFILE_STATUS_UPDATE",
263 | body => $message
264 | }
265 | }
266 | note " success!";
267 | }
268 | QUIT {
269 | note "status message subscription ended";
270 | note $_;
271 | }
272 | LAST {
273 | note "oh no, why did the status messages get LAST?";
274 | }
275 | }
276 | }
277 | }
278 |
279 | get -> 'flamegraph-for', Int $call-id where * >= 0 {
280 | json-content "flamegraph-for", { $profiler.data-for-flamegraph($call-id) }
281 | }
282 |
283 | get -> 'flamegraph-for', Int $call-id, "maxdepth", Int $maxdepth where * > 0 {
284 | json-content "flamegraph-for", { $profiler.data-for-flamegraph($call-id, $maxdepth) }
285 | }
286 |
287 | # get -> 'latest-tips' {
288 | # web-socket -> $incoming {
289 | # supply whenever $tipsy.latest-tips -> $tip {
290 | # emit to-json {
291 | # WS_ACTION => True,
292 | # action => {
293 | # type => 'LATEST_TIP',
294 | # id => $tip.id,
295 | # text => $tip.tip
296 | # }
297 | # }
298 | # }
299 | # }
300 | # }
301 | #
302 | # post -> 'tips', Int $id, 'agree' {
303 | # $tipsy.agree($id);
304 | # response.status = 204;
305 | # CATCH {
306 | # when X::Tipsy::NoSuchId {
307 | # not-found;
308 | # }
309 | # }
310 | # }
311 | #
312 | # post -> 'tips', Int $id, 'disagree' {
313 | # $tipsy.disagree($id);
314 | # response.status = 204;
315 | # CATCH {
316 | # when X::Tipsy::NoSuchId {
317 | # not-found;
318 | # }
319 | # }
320 | # }
321 | #
322 | # get -> 'top-tips' {
323 | # web-socket -> $incoming {
324 | # supply whenever $tipsy.top-tips -> @tips {
325 | # emit to-json {
326 | # WS_ACTION => True,
327 | # action => {
328 | # type => 'UPDATE_TOP_TIPS',
329 | # tips => [@tips.map: -> $tip {
330 | # {
331 | # id => $tip.id,
332 | # text => $tip.tip,
333 | # agreed => $tip.agreed,
334 | # disagreed => $tip.disagreed
335 | # }
336 | # }]
337 | # }
338 | # }
339 | # }
340 | # }
341 | # }
342 | }
343 | }
344 |
--------------------------------------------------------------------------------
/frontend/index.js:
--------------------------------------------------------------------------------
1 | import $ from 'jquery';
2 | import React, {useReducer} from 'react';
3 | import {render} from 'react-dom';
4 | import {applyMiddleware, combineReducers, createStore} from 'redux';
5 | import {connect, Provider} from 'react-redux';
6 | import {HashRouter, Link, Redirect, Route, Switch, withRouter} from 'react-router-dom';
7 | import thunkMiddleware from 'redux-thunk';
8 | import WSAction from 'redux-websocket-action';
9 | import Loadable from 'react-loadable';
10 | import ErrorBoundary from 'react-error-boundary';
11 |
12 | import {Button, Col, Container, Input, InputGroup, InputGroupAddon, Nav, NavItem, NavLink, Row} from 'reactstrap';
13 |
14 | import * as HeapAnalyzerActions from './heapanalyzer/actions';
15 | import type {HeapSnapshotState} from './heapanalyzer/reducer';
16 | import heapAnalyzerReducer from './heapanalyzer/reducer';
17 |
18 | import * as ProfilerActions from './profiler/actions';
19 | import profilerReducer from './profiler/reducer';
20 |
21 | import * as WelcomeActions from './welcome/actions';
22 | import welcomeReducer from './welcome/reducer';
23 |
24 | /* import GreetingsPage from './welcome/GreetingsPage';
25 | import { getGCOverview, getGCDetails } from "./profiler/actions"; */
26 |
27 | const RoutineOverviewPage = Loadable({
28 | loader: () => import(/* webpackChunkName: "routinelist" */ './profiler/components/RoutineOverviewPage'),
29 | loading: () => Hold on ...
,
30 | });
31 |
32 | const HeapSnapshotApp = Loadable({
33 | loader: () => import(/* webpackChunkName: "heapsnapshotapp" */ './heapanalyzer/components/HeapSnapshotApp'),
34 | loading: () => Hold on ...
,
35 | });
36 |
37 | const GCOverview = Loadable({
38 | loader: () => import(/* webpackChunkName: "gcoverview" */ './profiler/components/GCOverview'),
39 | loading: () => Hold on ...
,
40 | });
41 |
42 | const CallGraph = Loadable({
43 | loader: () => import(/* webpackChunkName: "callgraph" */ './profiler/components/CallGraph'),
44 | loading: () => Hold on ...
,
45 | })
46 |
47 | const AllocationViewer = Loadable({
48 | loader: () => import(/* webpackChunkName: "allocationviewer" */ './profiler/components/AllocationViewer'),
49 | loading: () => Hold on ...
,
50 | })
51 |
52 | const OverviewPage = Loadable({
53 | loader: () => import(/* webpackChunkName: "overviewPage" */ './profiler/components/OverviewPage'),
54 | loading: () => Hold on ...
,
55 | })
56 |
57 | const SpeshOverview = Loadable({
58 | loader: () => import(/* webpackChunkName: "speshOverview" */ './profiler/components/SpeshOverview'),
59 | loading: () => Hold on ...
,
60 | })
61 |
62 | type SelectFileProps = {
63 | filePath: string,
64 | onChangeFilePath: (string) => void,
65 | onLoadFile: (string) => void,
66 | }
67 |
68 | const SelectFile = (props : SelectFileProps) => (
69 |
70 |
Enter a local file path: profiler data in sql format or sqlite3 database file
71 |
82 |
How to obtain a profile
83 |
All you have to do is run your script from the commandline the same way you would otherwise call it,
84 | but also pass these arguments directly to perl6, in other words before the script name or -e part:
85 |
perl6 --profile --profile-filename=/tmp/results.sql myScript.p6
86 |
When you open the resulting .sql file in this tool, a .sqlite3 file of the
87 | same name will be put next to it. If it already exists, a random name will be put between the filename
88 | and the extension, so any changes to the .sqlite3 file you may have made will not be
89 | clobbered. However, this tool will not make changes to the file. It is safe to pass the .sqlite3
90 | filename on the second invocation.
91 |
92 |
You can also invoke this tool's service.p6 with a path as the argument. It will load the
93 | given file and immediately redirect you to the profiler when you open the app.
94 |
104 |
105 |
106 | Overview
107 |
108 |
109 | Routines
110 |
111 |
112 | Explore Call Graph
113 |
114 |
115 | Allocations
116 |
117 |
118 | GC
119 |
120 |
121 | Optimization
122 |
123 |
124 |
125 |
126 |
130 | (
131 |
139 |
140 |
145 |
146 | (
147 |
148 |
155 | )}/>
156 | (
157 |
158 |
164 | )}/>
165 |
166 |
170 | (
171 |
172 |
178 | )}/>
179 |
180 | oh no.
181 |
182 |
183 |
184 | );
185 | };
186 |
187 | type HeapSnapshotAppProps = {
188 | history: any,
189 | tipText: string,
190 | onChangeFilePath: ?(string) => void,
191 | onLoadFile: ?(string) => void,
192 | modelState: string,
193 | loadedSnapshots: ?Array,
194 | onRequestSnapshot: ?(number) => void,
195 | onSwitchSnapshot: (number) => void,
196 | onRequestModelData: () => void,
197 | };
198 |
199 | function togglerReducer(state, action) {
200 | return !state;
201 | }
202 | function useToggle(startValue) {
203 | const [currentState, dispatchAction] = useReducer(togglerReducer, false);
204 | return [
205 | currentState, () => dispatchAction("toggle")
206 | ]
207 | }
208 |
209 | const App = (props : HeapSnapshotAppProps) => {
210 | const [isFullscreen, toggleFullscreen] = useToggle(false);
211 |
212 | return (
213 |
214 | {
215 | isFullscreen &&
228 | }
229 |
230 |
231 |
236 |
237 |
238 |
239 | { /*
250 |
251 | (
252 |
262 | (
263 |
271 | )}/>
272 |
273 | |
274 |
275 |
276 |
277 |
278 | );
279 | };
280 |
281 | function mapProps(state) {
282 | return state;
283 | }
284 | function mapDispatch(dispatch) {
285 | return {
286 | onChangeFilePath: text => dispatch(WelcomeActions.changeFilePath(text)),
287 | onLoadFile: () => dispatch(WelcomeActions.requestFile()),
288 |
289 | onRequestSnapshot: index => dispatch(HeapAnalyzerActions.requestSnapshot(index)),
290 | onSwitchSnapshot: index => dispatch(HeapAnalyzerActions.switchSnapshot(index)),
291 | onRequestModelData: () => dispatch(HeapAnalyzerActions.requestModelData()),
292 |
293 | onRoutineExpanded: id => dispatch(ProfilerActions.expandRoutine(id)),
294 | onRequestGCOverview: () => dispatch(ProfilerActions.getGCOverview()),
295 | onRequestRoutineOverview: () => dispatch(ProfilerActions.getRoutineOverview()),
296 | onGCExpandButtonClicked: (seq_nr) => dispatch(ProfilerActions.getGCDetails(seq_nr)),
297 | };
298 | }
299 |
300 | const appReducer = combineReducers({
301 | welcome: welcomeReducer,
302 | heapanalyzer: heapAnalyzerReducer,
303 | profiler: profilerReducer,
304 | });
305 |
306 | const store = createStore(appReducer, applyMiddleware(thunkMiddleware));
307 |
308 | const { host } = window.location;
309 |
310 | const wsActionHeap = new WSAction(store, `ws://${host}/heap-status-messages`, {
311 | retryCount: 3,
312 | reconnectInterval: 3,
313 | });
314 | wsActionHeap.start();
315 |
316 | const wsActionProfile = new WSAction(store, `ws://${host}/profile-status-messages`, {
317 | retryCount: 3,
318 | reconnectInterval: 3,
319 | });
320 | wsActionProfile.start();
321 |
322 | $.ajax({
323 | url: '/whats-loaded',
324 | type: 'GET',
325 | success: body => {
326 | if (body.filetype === "profile") {
327 | if (window.location.hash === "#/") {
328 | window.location.replace("#/prof/home");
329 | }
330 | }
331 | else if (body.filetype === "heap") {
332 | if (window.location.hash === "#/") {
333 | window.location.replace("#/heap/");
334 | }
335 | }
336 | }
337 | });
338 |
339 | const ConnectedApp = withRouter(connect(mapProps, mapDispatch)(App));
340 | render(
341 |
342 |
343 |
345 | ,
346 | document.getElementById('app'),
347 | );
348 |
--------------------------------------------------------------------------------
/frontend/profiler/components/OverviewPage.js:
--------------------------------------------------------------------------------
1 | import $ from "jquery";
2 | import React from "react";
3 |
4 | import {Progress, Table} from 'reactstrap';
5 |
6 | import {Bar, BarChart, XAxis, YAxis} from 'recharts';
7 | import {LinkButton, numberFormatter, RoutineNameInfo, timeToHuman} from "./RoutinePieces";
8 | import {AutoSizedFlameGraph, postprocessFlameGraphData} from "./FlameGraph";
9 |
10 | function FrameCountRow(props: { value: number, entries_total: number, frametypename: string, color: string }) {
11 | return
12 |
13 | {props.frametypename} Frames
14 |
15 |
16 |
17 |
18 |
19 | {numberFormatter(100 * props.value / props.entries_total, 2)}% ({numberFormatter(props.value)})
20 |
21 | ;
22 | }
23 |
24 | function FlameGraphTitleBar({ allRoutines, call }) {
25 | if (call !== null) {
26 | return (
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 | )
36 | }
37 | else {
38 | return (
39 |
40 |
41 |
42 |
43 | Click a node to select & zoom
44 |
45 |
46 |
47 | )
48 | }
49 | }
50 |
51 | export default class OverviewPage extends React.Component {
52 | constructor(props) {
53 | super(props);
54 | this.state = {
55 | isLoading: {
56 | overviewData: false,
57 | flameGraph: false,
58 | callInfo: false,
59 | },
60 | overviewData: null,
61 | flameGraph: null,
62 | flameGraphDepth: null,
63 | flameGraphNodeSelected: null,
64 | flameGraphCallInfo: null,
65 | error: null,
66 | reactToRoutineOverview: null,
67 | }
68 | }
69 |
70 | requestOverviewData() {
71 | console.log("requesting the overview data");
72 | this.setState((state) => ({
73 | isLoading: {
74 | ...state.isLoading,
75 | overviewData: true,
76 | flameGraph: true,
77 | }
78 | }));
79 |
80 | const stateChangeForOverviewData = (self, {threads, gcstats, allgcstats, callframestats, allocationstats}) => {
81 | var totalTime = 0;
82 | const timingSpans = threads.map((thread) => {
83 | if (thread.first_entry_time + thread.total_time > totalTime)
84 | totalTime = thread.first_entry_time + thread.total_time;
85 | return ({
86 | range: [
87 | thread.first_entry_time / 1000,
88 | (thread.first_entry_time + thread.total_time) / 1000
89 | ],
90 | first_entry_time: thread.first_entry_time / 1000,
91 | thread: thread.thread_id,
92 | });
93 | });
94 | self.setState((state) => (
95 | {
96 | isLoading: {...state.isLoading, overviewData: false},
97 | overviewData: {threads, gcstats, timingSpans, allgcstats, totalTime, callframestats, allocationstats}
98 | }));
99 | };
100 |
101 | $.ajax({
102 | url: '/overview-data',
103 | type: 'GET',
104 | contentType: 'application/json',
105 | success: (overview) => stateChangeForOverviewData(this, overview),
106 | error: (xhr, errorStatus, errorText) => {
107 | this.setState(state => (
108 | {
109 | isLoading: {...state.isLoading, overviewData: false},
110 | error: errorStatus + errorText
111 | }))
112 | }
113 | });
114 |
115 | const stateChangeForFlameGraph = (self, data) => {
116 | let {
117 | node : flamegraph,
118 | incomplete
119 | } = data;
120 | console.log("data:", data);
121 | console.log(flamegraph, incomplete);
122 | const flameGraphData = postprocessFlameGraphData(flamegraph, self.props.allRoutines);
123 | if (self.props.allRoutines.length === 0) {
124 | this.props.onRequestRoutineOverview();
125 | this.state.reactToRoutineOverview = stateChangeForFlameGraph.bind(this, self, data);
126 | } else {
127 | self.setState((state) => (
128 | {
129 | isLoading: {...state.isLoading, flameGraph: false},
130 | flameGraph: flameGraphData.flamegraph,
131 | flameGraphDepth: flameGraphData.maxDepth,
132 | reactToRoutineOverview: null,
133 | }));
134 | }
135 | };
136 | $.ajax({
137 | url: '/flamegraph-for/0',
138 | type: 'GET',
139 | contentType: 'application/json',
140 | success: (flamegraph) => stateChangeForFlameGraph(this, flamegraph),
141 | error: (xhr, errorStatus, errorText) => {
142 | this.setState(state => (
143 | {
144 | isLoading: {...state.isLoading, flameGraph: false},
145 | error: errorStatus + errorText
146 | }))
147 | }
148 | });
149 | }
150 |
151 | componentDidMount() {
152 | this.requestOverviewData();
153 | }
154 |
155 | componentDidUpdate(prevProps, prevState) {
156 | if (this.props.allRoutines.length !== prevProps.allRoutines.length) {
157 | if (prevState.reactToRoutineOverview !== null) {
158 | prevState.reactToRoutineOverview()
159 | }
160 | }
161 | }
162 |
163 | requestCallInfo(callId : integer) {
164 | this.setState(state => ({
165 | isLoading: { ...state.isLoading, callInfo: true },
166 | flameGraphNodeSelected: callId,
167 | flameGraphCallInfo: null,
168 | }));
169 |
170 | const stateChangeForChildren = (self, children, currentCallId) => {
171 | if (currentCallId !== self.state.flameGraphNodeSelected)
172 | return;
173 | const childs = Array.from(children);
174 | const thisCall = childs.shift();
175 | self.setState((state) => ({
176 | isLoading: { ...state.isLoading, callInfo: false },
177 | flameGraphCallInfo: thisCall
178 | }));
179 | }
180 |
181 | $.ajax({
182 | url: '/call-children/' + encodeURIComponent(callId),
183 | type: 'GET',
184 | contentType: 'application/json',
185 | success: (children) => stateChangeForChildren(this, children, callId),
186 | error: (xhr, errorStatus, errorText) => {this.setState(state => ({isLoading: { ...state.isLoading, callId: false }, error: errorStatus + errorText}))}
187 | });
188 | }
189 |
190 | reactFlamegraphSelection(node, uid) {
191 | const ttip = node.tooltip;
192 | const cidstr = ttip.split(": ")[0];
193 | const callId = parseInt(cidstr);
194 | this.requestCallInfo(callId);
195 | }
196 |
197 | render() {
198 | console.log("rendering the overview page");
199 | if (this.state.overviewData === null || this.state.isLoading.overviewData === true) {
200 | return (
201 | Hold on...
202 | )
203 | }
204 | if (this.state.error !== null) {
205 | return (
206 | Error: {this.state.error}
207 | )
208 | }
209 |
210 | const gcstats = this.state.overviewData.gcstats;
211 | const fullGCs = gcstats.filter(item => item.full).length;
212 | const anyGCs = gcstats.length > 0;
213 |
214 | const allgcstats = this.state.overviewData.allgcstats;
215 |
216 | const callframestats = this.state.overviewData.callframestats;
217 | const allocationstats = this.state.overviewData.allocationstats;
218 |
219 | const gcpercent = 100 * allgcstats.total / this.state.overviewData.totalTime;
220 |
221 | const speshcount = callframestats.spesh_entries_total;
222 | const jitcount = callframestats.jit_entries_total;
223 | const interpcount = callframestats.entries_total - (jitcount + speshcount);
224 |
225 | let flamegraph_fragment = Loading...
230 | :
233 | {infoFragment}
234 | this.reactFlamegraphSelection(node, uid)}/>
235 | ;
236 | }
237 | else if (this.state.isLoading.flameGraph) {
238 | flamegraph_fragment = Loading flame graph...
239 | }
240 |
241 | return (
242 |
243 |
244 |
Start times of threads
245 |
246 |
247 |
249 |
250 |
251 |
252 |
Threads
253 |
254 | The profiled code ran for { timeToHuman(this.state.overviewData.totalTime) }
255 |
256 |
257 | At the end of the program, {this.state.overviewData.threads.length} threads were active.
258 |
259 |
260 | The dynamic optimizer ("spesh") has been active for { timeToHuman(this.state.overviewData.threads[0].spesh_time) } .
261 |
262 |
263 |
264 |
GC Performance
265 |
GC runs have taken {numberFormatter(gcpercent, 2)}% of total run time
266 |
267 |
268 |
270 |
271 | The Garbage Collector ran {gcstats.length} times .
272 | {
273 | fullGCs && [" ",
274 | {numberFormatter(fullGCs)} , " GC runs inspected the entire heap."]
275 | || " There was never a need to go through the entire heap."
276 | }
277 |
278 | {
279 | anyGCs && (Minor GC runs took between {" "}
280 | {timeToHuman(allgcstats.min_minor_time)} {" "}
281 | and {" "}
282 | {timeToHuman(allgcstats.max_minor_time)} {" "}
283 | with an average of {" "}
284 | {timeToHuman(allgcstats.avg_minor_time)}
)
285 | }
286 |
287 | {
288 | fullGCs > 1 && (Major GC runs took between {" "}
289 | {timeToHuman(allgcstats.min_major_time)} {" "}
290 | and {" "}
291 | {timeToHuman(allgcstats.max_major_time)} {" "}
292 | with an average of {" "}
293 | {timeToHuman(allgcstats.avg_major_time)}
)
294 | }
295 |
296 | {
297 | fullGCs === 1 && (
298 | The Major GC run took {timeToHuman(allgcstats.max_major_time)}
)
299 | }
300 |
301 | {
302 | anyGCs && (
303 | Total time spent in GC was {timeToHuman(allgcstats.total)}
304 | )
305 | }
306 | {
307 | fullGCs > 0 && (
308 | Of that, minor collections accounted
309 | for {timeToHuman(allgcstats.total_minor)} and major collections
310 | accounted for {timeToHuman(allgcstats.total_major)}
311 | )
312 | }
313 |
314 |
315 |
Call Frames
316 |
In total, {numberFormatter(callframestats.entries_total)} call frames were
317 | entered and exited by the profiled code.
318 |
Inlining eliminated the need to
319 | allocate {numberFormatter(callframestats.entries_total - callframestats.inlined_entries_total)} call
320 | frames (that's {numberFormatter(100 - 100 * callframestats.inlined_entries_total / callframestats.entries_total, 2)}% ).
321 |
322 |
327 |
328 |
329 |
Dynamic Optimization
330 |
331 | Of {numberFormatter(speshcount + jitcount)} specialized or JIT-compiled frames,
332 | there were {numberFormatter(callframestats.deopt_one_total)} deoptimizations
333 | (that's {numberFormatter(100 * callframestats.deopt_one_total / (speshcount + jitcount), 2)}% of all optimized frames).
334 |
335 |
336 | There were {numberFormatter(allocationstats.allocated)} object allocations . The dynamic optimizer was
337 | {
338 | allocationstats.replaced ?
339 | <>{" "} able to eliminate the need to allocate { numberFormatter(allocationstats.replaced) } additional objects {" "}
340 | (that's {numberFormatter(100 * allocationstats.replaced / (allocationstats.replaced + allocationstats.allocated), 2)}% )
341 | : <>{" "}not able to eliminate any allocations through scalar replacement
342 | }
343 |
344 |
345 | There were { numberFormatter(callframestats.deopt_all_total) } global deoptimizations triggered by the profiled code.
346 |
347 |
348 | During profilation, code in hot loops was on-stack-replaced (OSR'd) { numberFormatter(callframestats.osr_total) } times .
349 |
350 |
351 | { flamegraph_fragment }
352 |
17 | {numberFormatter(size)} {kilo && "kilo"}bytes {extraData && + x
18 | {
19 | totalCount > 0 &&
20 |
21 |
23 | {numberFormatter(size * totalCount)} {kilo && "kilo"}bytes total
24 |
25 |
26 | || null
27 | }
28 |
29 | }
30 |
31 | function AllocatingRoutineRow(props: { routine: T, allRoutines: any, metadata: any }) {
32 | const [isExpanded, setIsExpanded] = useState(false);
33 |
34 | console.log(props);
35 |
36 | console.log(props.routine.callsites);
37 |
38 | const expandedParts =
39 | !isExpanded
40 | ?
42 |
43 |
46 |
47 | setIsExpanded(!isExpanded)}>
48 |
50 |
51 | {props.routine.sitecount}
52 |
53 |
54 |
55 |
57 |
58 | {numberFormatter(props.routine.allocs)}
59 | {numberFormatter(props.routine.replaced)}
60 |
61 | { expandedParts }
62 |
73 | { /*
*/ }
74 |
75 |
76 |
77 | Sites
79 | Name
80 | Entries
81 | Size
82 | Count
83 | Optimized Out
84 |
85 |
86 |
87 | {
88 | routines.map((routine) => (
89 |
90 | ))
91 | }
92 |
93 |
94 |
Loading, please wait...
261 | }
262 | else {
263 | expandContent =
264 | Routines allocating { this.props.alloc.name } }
269 |
270 | // columns={"expand sitecount nameInfo "}
271 | />
272 |
273 | }
274 | }
275 | if (expandContent !== null)
276 | expandComponent =
277 |
278 |
279 |
280 | { expandContent }
281 |
282 |
283 | ;
284 | }
285 | else if (isHistoryExpanded) {
286 | var expandContent = null;
287 | if (loadErrors.deallocationHistory === null) {
288 | if (isLoading.deallocationHistory) {
289 | expandContent = Loading, please wait...
290 | }
291 | else {
292 | expandContent =
293 | {this.props.alloc.name} freed in each GC run
294 |
295 |
296 |
297 |
298 |
299 |
300 |
302 |
303 |
304 | }
305 | }
306 | if (expandContent !== null)
307 | expandComponent =
308 |
309 |
310 |
311 | { expandContent }
312 |
313 |
314 | ;
315 |
316 | }
317 |
318 | console.log(this.props.alloc);
319 |
320 | return (
321 |
322 |
323 |
324 |
325 | {" "}
327 |
328 | {" "}
330 |
331 |
333 |
334 |
335 |
336 |
338 |
339 | {numberFormatter(this.props.alloc.count)}
340 | {numberFormatter(this.props.alloc.replaced)}
341 |
342 | {
343 | expandComponent
344 | }
345 | );
346 | }
347 | }
348 |
349 | export default class AllocationTypeList extends Component {
350 | static defaultProps = {
351 | typeId: null
352 | };
353 |
354 | constructor(props) {
355 | super(props);
356 | this.state = {
357 | isLoading: {
358 | allAllocations: false,
359 | },
360 | loadError: {
361 | allAllocations: null,
362 | },
363 | allAllocations: [],
364 | }
365 | }
366 |
367 | requestAllAllocations() {
368 | this.setState((state) => ({
369 | isLoading: {
370 | allAllocations: true
371 | }
372 | }));
373 |
374 | const stateChangeForAllAllocs = (self, allocs) => {
375 | self.setState((state) => ({
376 | allAllocations: allocs,
377 | isLoading: { allAllocations: false },
378 | loadError: { allAllocations: null },
379 | }))
380 | };
381 |
382 | $.ajax({
383 | url: '/all-allocations',
384 | type: 'GET',
385 | contentType: 'application/json',
386 | success: (allocs) => stateChangeForAllAllocs(this, allocs),
387 | error: (xhr, errorStatus, errorText) => {
388 | this.setState(state => ({
389 | isLoading: { incAllocs: false },
390 | loadError: {
391 | allAllocations:
392 | state.loadError.allAllocations
393 | + errorStatus
394 | + errorText}
395 | }))}
396 | })
397 | }
398 |
399 | componentDidMount() {
400 | this.requestAllAllocations();
401 | }
402 |
403 | componentDidUpdate(prevProps) {
404 | if (prevProps.id !== this.props.callId) {
405 | this.requestAllAllocations();
406 | }
407 | }
408 |
409 | render() {
410 | let {
411 | isLoading: {
412 | allAllocations: allAllocationsLoading,
413 | },
414 | loadError: {
415 | allAllocations: allAllocationsError,
416 | },
417 | allAllocations
418 | } = this.state;
419 |
420 | if (allAllocationsLoading) {
421 | return (Hold on...
426 |
427 | Error: { allAllocationsError }
428 |
429 | )
430 | }
431 |
432 | return (
433 |
434 |
435 | All types allocated by this program
436 |
437 |
438 |
439 |
440 |
441 | NameREPR
443 | Type Properties
444 | Count
445 | Optimized Out
446 |
447 |
448 |
449 | {
450 | allAllocations.map(alloc =>
451 |
458 |
459 |
460 |
461 | );
462 | }
463 | }
464 |
--------------------------------------------------------------------------------
/frontend/profiler/components/GCOverview.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react';
2 | import { ResponsiveContainer, BarChart, Bar, Tooltip, XAxis, YAxis } from 'recharts';
3 | //import memoize from 'memoize-state';
4 | import {
5 | ButtonGroup, Button, Container, Row, Col, Table
6 | } from 'reactstrap';
7 | import ErrorBoundary from 'react-error-boundary';
8 | import $ from 'jquery';
9 |
10 | import { timeToHuman, numberFormatter } from './RoutinePieces';
11 | import {Bytes} from "./AllocationViewer";
12 |
13 | const memoize = a => a;
14 |
15 | export function sizeToHuman(time) {
16 | return ({numberFormatter(time / 1024, 2)}kB );
17 | }
18 |
19 | const only_major = memoize(stats_per_sequence => stats_per_sequence.filter(entry => entry && entry.full === 1));
20 | const only_minor = memoize(stats_per_sequence => stats_per_sequence.filter(entry => entry && entry.full === 0));
21 | const time_diffs = memoize(stats_per_sequence => {
22 | let result = [];
23 | let previous = {latest_end_time: 0};
24 | for (const entry of stats_per_sequence) {
25 | if (entry == null) {
26 | continue;
27 | }
28 | if (previous == null) {
29 | previous = entry;
30 | }
31 | else {
32 | result.push(
33 | {
34 | sequence_num: entry.sequence_num,
35 | time_since_prev: entry.earliest_start_time - previous.latest_end_time,
36 | earliest_start_time: entry.earliest_start_time,
37 | max_time: entry.max_time,
38 | });
39 | previous = entry;
40 | }
41 | }
42 | return result;
43 | });
44 | const ignoreNulls = memoize(input => input.filter(a => a !== null));
45 | const minimumStartTime = memoize(input => input.map(data => data.start_time).reduce((acc, cur) => acc < cur ? acc : cur, Infinity));
46 | const makeSpans = input => {
47 | const minStartTime = minimumStartTime(input);
48 | console.log(input);
49 | return input.map(
50 | a => {
51 | console.log(a);
52 | return (
53 | {
54 | sequence_num: a.sequence_num,
55 | thread_id: a.thread_id,
56 | range: [(a.start_time - minStartTime) / 1000,
57 | (a.start_time + a.time - minStartTime) / 1000],
58 | xAxis: a.thread_id + (a.responsible ? " *" : "")
59 | });
60 | });
61 | };
62 | const relativize = memoize(input => input.map(line => {
63 | const total = line.retained_bytes + line.promoted_bytes + line.cleared_bytes;
64 | return {
65 | ...line,
66 | rel_retained_bytes: line.retained_bytes / total,
67 | rel_promoted_bytes: line.promoted_bytes / total,
68 | rel_cleared_bytes: line.cleared_bytes / total,
69 | }
70 | }));
71 |
72 | const GcTableRow = ({ data, expanded, seq_details, prevData, onGCExpandButtonClicked }) => {
73 | const [isLoading, setIsLoading] = useState(false);
74 | const [hadError, setHadError] = useState(null);
75 | const [typeStats, setTypeStats] = useState(null);
76 |
77 | const isExpanded = expanded[data.sequence_num];
78 |
79 | useEffect(() => {
80 | if (isExpanded && !isLoading && typeStats === null) {
81 |
82 | const stateChangeForTypes = (it, result) => {
83 | setIsLoading(false);
84 | setHadError(null);
85 |
86 | setTypeStats(result);
87 | };
88 |
89 | $.ajax({
90 | url: '/deallocations-for-sequence/' + encodeURIComponent(data.sequence_num),
91 | type: 'GET',
92 | contentType: 'application/json',
93 | success: (types) => stateChangeForTypes(this, types),
94 | error: (xhr, errorStatus, errorText) => {
95 | setIsLoading(false);
96 | setHadError(errorStatus + " " + errorText);
97 | }
98 | });
99 |
100 | setIsLoading(true);
101 | }
102 | else if (isExpanded && isLoading && typeStats !== null) {
103 | setIsLoading(false);
104 | }
105 | }, [data.sequence_num, expanded[data.sequence_num]]);
106 |
107 | return (
108 |
109 |
110 | onGCExpandButtonClicked(data.sequence_num)}> {data.sequence_num} {data.full ? Why?
116 | : ""*/
117 | }
118 |
119 | {data.participants}
120 | {timeToHuman(data.max_time, "ms spent")}
121 | {timeToHuman(data.earliest_start_time)}
122 | {
123 | typeof prevData === "undefined"
124 | ? null
125 | : {" "}
126 | {timeToHuman(data.earliest_start_time - prevData.earliest_start_time - prevData.max_time)} after prev
127 |
128 | }
129 |
130 |
131 | {
132 | expanded[data.sequence_num] && seq_details && seq_details[data.sequence_num] ?
133 |
134 |
135 |
136 |
137 |
139 |
140 |
141 |
144 |
145 |
146 |
148 |
149 |
150 | Thread
151 | Amounts
152 | Inter-Gen Roots
153 |
154 |
155 |
156 | {
157 | ignoreNulls(seq_details[data.sequence_num]).map(data =>
158 |
159 |
160 | { data.thread_id }
161 |
162 |
163 | { sizeToHuman(data.retained_bytes) } { sizeToHuman(data.promoted_bytes) } { sizeToHuman(data.cleared_bytes) }
164 |
165 |
166 | { data.gen2_roots }
167 |
168 |
169 | )
170 | }
171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 | : null
179 | }
180 | {
181 | expanded[data.sequence_num] && typeStats !== null && !hadError ?
182 | <>
183 |
185 |
186 |
187 |
188 |
189 | Type
190 | Freed very early
191 | Freed early
192 | Freed late
193 |
194 |
195 |
196 | {
197 | typeStats.map((row, idx) =>
198 | { row.type_name }
199 | { numberFormatter(row.fresh) }
200 | { numberFormatter(row.seen) }
201 | { numberFormatter(row.gen2) }
202 | )
203 | }
204 |
205 |
206 |
207 |
208 |
209 | : null
210 | }
211 |
212 | );
213 | }
214 |
215 | const GcTable = ({ overview, expanded, seq_details, onGCExpandButtonClicked }) => {
216 | if (typeof overview === "undefined" || typeof overview.stats_per_sequence === "undefined")
217 | return (
218 | nothing
219 | );
220 | if (overview.stats_per_sequence.length === 0) {
221 | return (There were no GC runs during the recording. 0 ? rowInputData[index - 1] : undefined} expanded={expanded} seq_details={seq_details} onGCExpandButtonClicked={onGCExpandButtonClicked} />
227 | )
228 | }
229 |
230 | export default function GCOverview(props) {
231 | const totalTime = typeof props.overview.stats_per_sequence === "undefined"
232 | ? 0
233 | : Array.from(props.overview.stats_per_sequence).filter(d => d !== null).map(d => d.max_time).reduce((a, b) => a + b, 0);
234 | // 0 == hide major, 1 == show all, 2 == only major
235 | const [filterMode, setFilterMode] = useState(1);
236 | const [isLoading, setIsLoading] = useState(false);
237 |
238 | // 0 == split bars, 1 == stacked bars absolute, 2 == stacked bars relative (every row is 100% tall)
239 | const [stackedBarMode, setStackedBarMode] = useState(2);
240 |
241 | useEffect(() => {
242 | if (!isLoading && typeof props.overview === "undefined" || typeof props.overview.stats_per_sequence === "undefined") {
243 | props.onRequestGCOverview();
244 | setIsLoading(true);
245 | }
246 | else if (isLoading && !(typeof props.overview === "undefined" || typeof props.overview.stats_per_sequence === "undefined")) {
247 | setIsLoading(false);
248 | }
249 | }, [props.overview, props.overview.stats_per_sequence]);
250 |
251 | if (isLoading) {
252 | return (
253 |
254 |
258 | )
259 | }
260 | if (typeof props.overview === "undefined" || typeof props.overview.stats_per_sequence === "undefined") {
261 | return (
262 |
263 | Get GC overview
265 |
266 |
267 | )
268 | }
269 | const sourceOfData = relativize(ignoreNulls(props.overview.stats_per_sequence));
270 | const dataToUse = filterMode === 0
271 | ? only_minor(sourceOfData)
272 | : filterMode === 2
273 | ? only_major(sourceOfData)
274 | : sourceOfData;
275 |
276 |
277 |
278 | const colorForDataKey = {
279 | promoted_bytes: "#f32",
280 | retained_bytes: "#fa5",
281 | cleared_bytes: "#3f3",
282 |
283 | rel_promoted_bytes: "#f32",
284 | rel_retained_bytes: "#fa5",
285 | rel_cleared_bytes: "#3f3",
286 | };
287 |
288 | const tooltipTextForDataKey = {
289 | promoted_bytes: "Promoted",
290 | retained_bytes: "Retained",
291 | cleared_bytes: "Cleared",
292 | rel_promoted_bytes: "Promoted",
293 | rel_retained_bytes: "Retained",
294 | rel_cleared_bytes: "Cleared",
295 | };
296 |
297 | const memoryAmountSource =
298 | [
299 | [
300 | {title: "Promoted to the old generation", dataKeys: ["promoted_bytes"]},
301 | {title: "Retained for another GC run", dataKeys: ["retained_bytes"]},
302 | {title: "Cleared from the nursery", dataKeys: ["cleared_bytes"]},
303 | ],
304 | [{title: "Promoted, Kept, Freed", dataKeys: ["promoted_bytes", "retained_bytes", "cleared_bytes"]}],
305 | [{title: "Percentages Promoted, Kept, Freed", dataKeys: ["rel_promoted_bytes", "rel_retained_bytes", "rel_cleared_bytes"]}],
306 | ][stackedBarMode];
307 |
308 | const barGraphWidth =
309 | dataToUse.length < 10
310 | ? (10 * dataToUse.length) + "%"
311 | : "100%";
312 |
313 | return (
314 |
315 |
317 | setFilterMode(0)} size={"sm"} disabled={filterMode === 0}>Only Minor Collections
318 | setFilterMode(1)} size={"sm"} disabled={filterMode === 1}>Everything
319 | setFilterMode(2)} size={"sm"} disabled={filterMode === 2}>Only Major Collections
320 |
321 | Time spent per GC run
322 |
323 |
324 |
325 | numberFormatter(num / 1000)}/>
326 | }/>
327 |
328 |
329 | Total Time: { timeToHuman(totalTime) }
330 | Time between GC runs
331 |
332 |
333 |
334 | numberFormatter(num / 1000)}/>
335 | {
336 | const outer = stuff.payload;
337 | if (typeof outer !== "undefined" && outer !== null && outer.length > 0) {
338 | const payload = outer[0].payload;
339 | return (
340 |
341 | {payload.sequence_num}:
);
346 | }
347 | }
348 | } />
349 |
350 |
351 | Amounts of Data
352 |
353 | setStackedBarMode(0)} size={"sm"} disabled={stackedBarMode === 0}>Split Charts
354 | setStackedBarMode(1)} size={"sm"} disabled={stackedBarMode === 1}>Combined Chart
355 | setStackedBarMode(2)} size={"sm"} disabled={stackedBarMode === 2}>Combined Relative Amounts
356 |
357 | {
358 | memoryAmountSource.map(({title, dataKeys}) => (
359 |
360 | { title }
361 |
362 |
363 | {
364 | stackedBarMode !== 2 && numberFormatter(num / 1024)}/>
365 | }
366 | {
367 | dataKeys.map(key => (
368 |
369 | ))
370 | }
371 | {
372 | const outer = stuff.payload;
373 | if (typeof outer !== "undefined" && outer !== null && outer.length > 0) {
374 | const payload = outer[0].payload;
375 | return (
376 |
377 | {payload.sequence_num}:{tooltipTextForDataKey[key]}: {numberFormatter(payload[key] * 100, 2)}%
383 | ))
384 | :
385 | dataKeys.map(key => (
386 | {tooltipTextForDataKey[key]}
);
390 | }
391 | }
392 | } />
393 |
394 |
395 |
396 |
397 | ))
398 | }
399 | |
400 |
401 |
402 |
403 | GC Run
405 | Threads
406 | Timing
407 | Start Time
408 |
409 |
410 |
411 |
412 |
419 |
420 |
421 |
422 | )
423 | }
424 |
--------------------------------------------------------------------------------