Skip to content

Commit f52f277

Browse files
shaykerenshaykeren
committed
fix js breakdown insight
1 parent 61f4a23 commit f52f277

File tree

2 files changed

+87
-86
lines changed

2 files changed

+87
-86
lines changed

‎src/views-ui/codeAnalytics/main.ts‎

Lines changed: 73 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,60 @@ window.addEventListener("load", () =>
2525
tabsElement.moveToTabByIndex(group, group.indexOf(tab));
2626
}
2727

28+
function changePage(paginationListElement: any, page: number){
29+
const recordsPerPage: number = paginationListElement.data('records-per-page');
30+
const numOfItems: number = paginationListElement.children('.item').length;
31+
const numOfPages = Math.ceil(numOfItems/recordsPerPage);
32+
33+
paginationListElement.children('.item').hide();
34+
35+
paginationListElement.children('.item').each((index, item)=>{
36+
if(index<page*recordsPerPage && index>=(page-1)*recordsPerPage){
37+
$(item).show();
38+
}
39+
});
40+
41+
const nav = paginationListElement.children('.pagination-nav');
42+
if(numOfPages > 1){
43+
nav.children('.page').html(page+" of "+numOfPages+" pages");
44+
const prev = nav.children('.prev');
45+
const next = nav.children('.next');
46+
if(page>1){
47+
prev.removeClass("disabled");
48+
}else{
49+
prev.addClass("disabled");
50+
}
51+
if(page<numOfPages){
52+
next.removeClass("disabled");
53+
}else{
54+
next.addClass("disabled");
55+
}
56+
} else{
57+
nav.hide();
58+
}
59+
}
60+
61+
function prevPage(paginationListElement: any) {
62+
let currentPage: number = paginationListElement.data('current-page');
63+
if (currentPage > 1) {
64+
paginationListElement.data('current-page', --currentPage);
65+
changePage(paginationListElement, currentPage);
66+
}
67+
}
68+
69+
function nextPage(paginationListElement: any) {
70+
const recordsPerPage: number = paginationListElement.data('records-per-page');
71+
const numOfItems: number = paginationListElement.children('.item').length;
72+
let currentPage: number = paginationListElement.data('current-page');
73+
74+
const numOfPages = Math.ceil(numOfItems/recordsPerPage);
75+
76+
if (currentPage < numOfPages) {
77+
paginationListElement.data('current-page', ++currentPage);
78+
changePage(paginationListElement, currentPage);
79+
}
80+
}
81+
2882
const overlay = $("#view-overlay");
2983
const tabsContainer = $("#view-tabs");
3084
const insightsTab = $("#view-insights");
@@ -60,12 +114,18 @@ window.addEventListener("load", () =>
60114
$(".stack-nav-next").toggleClass("disabled", !stackInfo?.canNavigateToNext);
61115
});
62116

63-
117+
function initPaginationLists(){
118+
const paginationLists = $('.pagination-list');
119+
paginationLists.each(function(){
120+
changePage($(this), 1);
121+
});
122+
}
64123
consume(UiMessage.Set.InsightsList, (event) => {
65-
124+
66125
if (event.htmlContent !== undefined) {
67126
insightsTab.find("#insightList").html(event.htmlContent);
68127
}
128+
initPaginationLists();
69129
});
70130

71131

@@ -146,6 +206,17 @@ window.addEventListener("load", () =>
146206

147207
publish(new UiMessage.Notify.OpenTracePanel(traceIds,traceLabels,span, jaeger));
148208
});
209+
210+
$(document).on("click",".pagination-nav .prev", function(){
211+
var paginationListElement = $(this).closest('.pagination-list');
212+
prevPage(paginationListElement);
213+
214+
});
215+
$(document).on("click",".pagination-nav .next", function(){
216+
var paginationListElement = $(this).closest('.pagination-list');
217+
nextPage(paginationListElement);
218+
219+
});
149220

150221
consume(UiMessage.Set.TracePanel, (event) => {
151222

‎src/views/codeAnalytics/InsightListView/SpanInsight.ts‎

Lines changed: 14 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,11 @@
11
import moment = require("moment");
22
import { Uri } from "vscode";
3-
import { decimal } from "vscode-languageclient";
4-
import { EndpointSchema, UsageStatusResults } from "../../../services/analyticsProvider";
5-
import { CodeObjectId } from "../../../services/codeObject";
3+
import { EndpointSchema } from "../../../services/analyticsProvider";
64
import { DocumentInfoProvider } from "../../../services/documentInfoProvider";
75
import { EditorHelper } from "../../../services/EditorHelper";
86
import { SpanLocationInfo } from "../../../services/languages/extractors";
9-
import { Settings } from "../../../settings";
107
import { UiMessage } from "../../../views-ui/codeAnalytics/contracts";
11-
import { IListViewItem, IListViewItemBase, InsightListGroupItemsRenderer } from "../../ListView/IListViewItem";
8+
import { IListViewItem, IListViewItemBase } from "../../ListView/IListViewItem";
129
import { WebviewChannel, WebViewUris } from "../../webViewUtils";
1310
import { SpanSearch } from "./Common/SpanSearch";
1411
import { renderTraceLink } from "./Common/TraceLinkRender";
@@ -148,13 +145,10 @@ export interface EndpointInfo {
148145
export interface SlowEndpointInfo{
149146

150147
endpointInfo: EndpointInfo,
151-
probabilityOfBeingBottleneck?: number,
152-
avgDurationWhenBeingBottleneck?: Duration,
153-
154-
// Obsolete
155148
p50: Percentile,
156149
p95: Percentile,
157150
p99: Percentile,
151+
158152
}
159153
export interface SpandSlowEndpointsInsight extends CodeObjectInsight{
160154
span: SpanInfo,
@@ -282,72 +276,14 @@ export class SpanDurationBreakdownListViewItemsCreator implements IInsightListVi
282276
htmlRecords.push(htmlRecord);
283277
});
284278
const body = /*html*/ `
285-
<div class="span-duration-breakdown-insight">
286-
${htmlRecords.join('')}
287-
<div class="nav">
288-
<a class="prev">Prev</a>
289-
<a class="next">Next</a>
290-
<span class="page"></span>
291-
</div>
292-
<script type="text/javascript">
293-
var current_page = 1;
294-
var records_per_page = ${recordsPerPage};
295-
var numOfItems = $('.span-duration-breakdown-insight .item').length;
296-
var numOfPages = Math.ceil(numOfItems/records_per_page);
297-
function prevPage()
298-
{
299-
if (current_page > 1) {
300-
current_page--;
301-
changePage(current_page);
302-
}
303-
}
304-
305-
function nextPage()
306-
{
307-
if (current_page < numOfPages) {
308-
current_page++;
309-
changePage(current_page);
310-
}
311-
}
312-
313-
314-
function changePage(page) {
315-
$(".span-duration-breakdown-insight .item").hide();
316-
$('.span-duration-breakdown-insight .item').each(function(){
317-
var index = $(this).data('index');
318-
if(index<current_page*records_per_page && index>=(current_page-1)*records_per_page){
319-
$(this).show();
320-
}
321-
});
322-
323-
if(numOfPages > 1){
324-
$('.span-duration-breakdown-insight .page').html(current_page+" of "+numOfPages+" pages")
325-
326-
if(page>1){
327-
$(".span-duration-breakdown-insight .prev").removeClass("disabled");
328-
}else{
329-
$(".span-duration-breakdown-insight .prev").addClass("disabled");
330-
}
331-
if(page<numOfPages){
332-
$(".span-duration-breakdown-insight .next").removeClass("disabled");
333-
}else{
334-
$(".span-duration-breakdown-insight .next").addClass("disabled");
335-
}
336-
} else{
337-
$(".span-duration-breakdown-insight .nav").hide();
338-
}
339-
340-
}
341-
$(".span-duration-breakdown-insight .next").click(function() {
342-
nextPage();
343-
})
344-
$(".span-duration-breakdown-insight .prev").click(function() {
345-
prevPage();
346-
})
347-
changePage(1);
348-
</script>
349-
</div>
350-
`;
279+
<div class="span-duration-breakdown-insight pagination-list" data-current-page="1" data-records-per-page="3">
280+
${htmlRecords.join('')}
281+
<div class="pagination-nav">
282+
<a class="prev">Prev</a>
283+
<a class="next">Next</a>
284+
<span class="page"></span>
285+
</div>
286+
</div>`;
351287

352288
return new InsightTemplateHtml({
353289
title: "Duration Breakdown",
@@ -427,17 +363,11 @@ export class SpanEndpointBottlenecksListViewItemsCreator implements IInsightList
427363
}
428364

429365
private getDescription(span: SlowEndpointInfo){
430-
if(span.probabilityOfBeingBottleneck && span.avgDurationWhenBeingBottleneck)
431-
{
432-
return `Slowing ${(span.probabilityOfBeingBottleneck*100).toFixed(0)}% of the requests (~${span.avgDurationWhenBeingBottleneck.value}${span.avgDurationWhenBeingBottleneck.unit})`;
433-
}
434-
else { // Obsolete
435-
if (span.p95){
436-
return `Up to ~${(span.p95.fraction*100.0).toFixed(3)}% of the entire request time (${span.p95.maxDuration.value}${span.p95.maxDuration.unit}).`;
366+
if (span.p95){
367+
return `Up to ~${(span.p95.fraction*100.0).toFixed(3)}% of the entire request time (${span.p95.maxDuration.value}${span.p95.maxDuration.unit}).`;
437368

438-
}
439-
return `Up to ~${(span.p50.fraction*100.0).toFixed(3)}% of the entire request time (${span.p50.maxDuration.value}${span.p50.maxDuration.unit}).`;
440369
}
370+
return `Up to ~${(span.p50.fraction*100.0).toFixed(3)}% of the entire request time (${span.p50.maxDuration.value}${span.p50.maxDuration.unit}).`;
441371
}
442372

443373
private getTooltip(span: SlowEndpointInfo){

0 commit comments

Comments
 (0)