Skip to content

Commit dfbcf88

Browse files
zendivezendive
committed
extract component TimersSetHistoryMetric 
1 parent cf78371 commit dfbcf88

File tree

2 files changed

+115
-92
lines changed

2 files changed

+115
-92
lines changed

‎src/view/components/TimersSetHistory.svelte‎

Lines changed: 6 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -10,18 +10,9 @@
1010
ESortOrder,
1111
} from '../../api/settings.ts';
1212
import { compareByFieldOrder } from '../../api/comparator.ts';
13-
import { CALLED_ABORTED_TOOLTIP } from '../../api/const.ts';
14-
import { delayTitle } from '../../api/time.ts';
1513
import Variable from './Variable.svelte';
16-
import Trace from './Trace.svelte';
17-
import TraceDomain from './TraceDomain.svelte';
1814
import SortableColumn from './SortableColumn.svelte';
19-
import TimersClearHistory from './TimersClearHistory.svelte';
20-
import Dialog from './Dialog.svelte';
21-
import Alert from './Alert.svelte';
22-
import FrameSensitiveTime from './FrameSensitiveTime.svelte';
23-
import TraceBreakpoint from './TraceBreakpoint.svelte';
24-
import TraceBypass from './TraceBypass.svelte';
15+
import TimersSetHistoryMetric from './TimersSetHistoryMetric.svelte';
2516
2617
let {
2718
metrics,
@@ -36,8 +27,6 @@
3627
} = $props();
3728
let sortField = $state(DEFAULT_SORT_SET_TIMERS.field);
3829
let sortOrder = $state(DEFAULT_SORT_SET_TIMERS.order);
39-
let dialogEl: Dialog | null = null;
40-
let alertEl: Alert | null = null;
4130
let sortedMetrics = $derived.by(() =>
4231
metrics.sort(compareByFieldOrder(sortField, sortOrder))
4332
);
@@ -58,56 +47,8 @@
5847
},
5948
});
6049
}
61-
62-
let clearTimerHistoryMetrics: TClearTimerHistory[] = $state([]);
63-
64-
function onFindRegressors(regressors: string[] | null) {
65-
if (!dialogEl || !alertEl || !regressors?.length) {
66-
return;
67-
}
68-
69-
for (let n = regressors.length - 1; n >= 0; n--) {
70-
const traceId = regressors[n];
71-
let record = clearTimeoutHistory?.find((r) => r.traceId === traceId);
72-
73-
if (record) {
74-
clearTimerHistoryMetrics.push(record);
75-
}
76-
77-
record = clearIntervalHistory?.find((r) => r.traceId === traceId);
78-
if (record) {
79-
clearTimerHistoryMetrics.push(record);
80-
}
81-
}
82-
83-
if (clearTimerHistoryMetrics.length) {
84-
dialogEl.show();
85-
} else {
86-
alertEl.show();
87-
}
88-
}
89-
90-
function onCloseDialog() {
91-
clearTimerHistoryMetrics.splice(0);
92-
}
9350
</script>
9451

95-
<Dialog
96-
bind:this={dialogEl}
97-
eventClose={onCloseDialog}
98-
title="Places from which timer with current callstack was prematurely canceled"
99-
description="The information is actual only on time of demand. For full coverage - requires both clearTimeout and clearInterval panels enabled."
100-
>
101-
<TimersClearHistory
102-
caption="Canceled by"
103-
metrics={$state.snapshot(clearTimerHistoryMetrics)}
104-
/>
105-
</Dialog>
106-
107-
<Alert bind:this={alertEl} title="Attention">
108-
Requires both clearTimeout and clearInterval panels enabled
109-
</Alert>
110-
11152
<table data-navigation-tag={caption}>
11253
<caption class="bc-invert ta-l">
11354
{caption}
@@ -161,38 +102,11 @@
161102
</tr>
162103

163104
{#each sortedMetrics as metric (metric.traceId)}
164-
<tr class="t-zebra">
165-
<td class="wb-all">
166-
<TraceDomain traceDomain={metric.traceDomain} />
167-
<Trace trace={metric.trace} />
168-
</td>
169-
<td class="ta-r">
170-
<FrameSensitiveTime value={metric.selfTime} />
171-
</td>
172-
<td class="ta-c">
173-
<Variable value={metric.calls} />{#if metric.canceledCounter}-<a
174-
role="button"
175-
href="void(0)"
176-
title={CALLED_ABORTED_TOOLTIP}
177-
onclick={(e) => {
178-
e.preventDefault();
179-
onFindRegressors(metric.canceledByTraceIds);
180-
}}
181-
><Variable value={metric.canceledCounter} />/{metric
182-
.canceledByTraceIds?.length}
183-
</a>
184-
{/if}
185-
</td>
186-
<td class="ta-c"><Variable value={metric.handler} /></td>
187-
<td class="ta-r" title={delayTitle(metric.delay)}>{metric.delay}</td>
188-
<td class="ta-r">
189-
{#if metric.online}
190-
<Variable value={metric.online} />
191-
{/if}
192-
</td>
193-
<td><TraceBypass traceId={metric.traceId} /></td>
194-
<td><TraceBreakpoint traceId={metric.traceId} /></td>
195-
</tr>
105+
<TimersSetHistoryMetric
106+
{metric}
107+
{clearTimeoutHistory}
108+
{clearIntervalHistory}
109+
/>
196110
{/each}
197111
</tbody>
198112
</table>

‎src/view/components/TimersSetHistoryMetric.svelte‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
<script lang="ts">
2+
import type {
3+
TClearTimerHistory,
4+
TSetTimerHistory,
5+
} from '../../api/wrappers.ts';
6+
import { CALLED_ABORTED_TOOLTIP } from '../../api/const.ts';
7+
import { delayTitle } from '../../api/time.ts';
8+
import FrameSensitiveTime from './FrameSensitiveTime.svelte';
9+
import Trace from './Trace.svelte';
10+
import TraceDomain from './TraceDomain.svelte';
11+
import Variable from './Variable.svelte';
12+
import TraceBypass from './TraceBypass.svelte';
13+
import TraceBreakpoint from './TraceBreakpoint.svelte';
14+
import Dialog from './Dialog.svelte';
15+
import Alert from './Alert.svelte';
16+
import TimersClearHistory from './TimersClearHistory.svelte';
17+
18+
let {
19+
metric,
20+
clearTimeoutHistory,
21+
clearIntervalHistory,
22+
}: {
23+
metric: TSetTimerHistory;
24+
clearTimeoutHistory: TClearTimerHistory[] | null;
25+
clearIntervalHistory: TClearTimerHistory[] | null;
26+
} = $props();
27+
let dialogEl: Dialog | null = null;
28+
let alertEl: Alert | null = null;
29+
let clearTimerHistoryMetrics: TClearTimerHistory[] = $state([]);
30+
31+
function onFindRegressors(regressors: string[] | null) {
32+
if (!dialogEl || !alertEl || !regressors?.length) {
33+
return;
34+
}
35+
36+
for (let n = regressors.length - 1; n >= 0; n--) {
37+
const traceId = regressors[n];
38+
let record = clearTimeoutHistory?.find((r) => r.traceId === traceId);
39+
40+
if (record) {
41+
clearTimerHistoryMetrics.push(record);
42+
}
43+
44+
record = clearIntervalHistory?.find((r) => r.traceId === traceId);
45+
if (record) {
46+
clearTimerHistoryMetrics.push(record);
47+
}
48+
}
49+
50+
if (clearTimerHistoryMetrics.length) {
51+
dialogEl.show();
52+
} else {
53+
alertEl.show();
54+
}
55+
}
56+
57+
function onCloseDialog() {
58+
clearTimerHistoryMetrics.splice(0);
59+
}
60+
</script>
61+
62+
<Dialog
63+
bind:this={dialogEl}
64+
eventClose={onCloseDialog}
65+
title="Places from which timer with current callstack was prematurely canceled"
66+
description="The information is actual only on time of demand. For full coverage - requires both clearTimeout and clearInterval panels enabled."
67+
>
68+
<TimersClearHistory
69+
caption="Canceled by"
70+
metrics={$state.snapshot(clearTimerHistoryMetrics)}
71+
/>
72+
</Dialog>
73+
74+
<Alert bind:this={alertEl} title="Attention">
75+
Requires both clearTimeout and clearInterval panels enabled
76+
</Alert>
77+
78+
<tr class="t-zebra">
79+
<td class="wb-all">
80+
<TraceDomain traceDomain={metric.traceDomain} />
81+
<Trace trace={metric.trace} />
82+
</td>
83+
<td class="ta-r">
84+
<FrameSensitiveTime value={metric.selfTime} />
85+
</td>
86+
<td class="ta-c">
87+
<Variable value={metric.calls} />{#if metric.canceledCounter}-<a
88+
role="button"
89+
href="void(0)"
90+
title={CALLED_ABORTED_TOOLTIP}
91+
onclick={(e) => {
92+
e.preventDefault();
93+
onFindRegressors(metric.canceledByTraceIds);
94+
}}
95+
><Variable value={metric.canceledCounter} />/{metric.canceledByTraceIds
96+
?.length}
97+
</a>
98+
{/if}
99+
</td>
100+
<td class="ta-c"><Variable value={metric.handler} /></td>
101+
<td class="ta-r" title={delayTitle(metric.delay)}>{metric.delay}</td>
102+
<td class="ta-r">
103+
{#if metric.online}
104+
<Variable value={metric.online} />
105+
{/if}
106+
</td>
107+
<td><TraceBypass traceId={metric.traceId} /></td>
108+
<td><TraceBreakpoint traceId={metric.traceId} /></td>
109+
</tr>

0 commit comments

Comments
 (0)