Feature/support insight of ChildrenSpanDurations (#192)

Author: arik-dig

src/services/codeObject.ts

@@ -4,7 +4,7 @@ export enum CodeObjectType
     span = "span",
 }
 
-export class CodeObjectId{
+export class CodeObjectId {
 
     static readonly codeObjectSeparator: string = "$_$";
 
@@ -24,5 +24,14 @@ export class CodeObjectId{
         var codeObjectType: string = parts[0];
         return (<any>CodeObjectType)[codeObjectType];
     }
-    
+
+    public static getSpanName(spanCodeObjectId: string): string {
+
+        const ix = spanCodeObjectId.lastIndexOf(this.codeObjectSeparator);
+        if (ix < 0) {
+            return spanCodeObjectId;
+        }
+        return spanCodeObjectId.substring(ix + this.codeObjectSeparator.length);
+    }
+
 }

src/views/codeAnalytics/InsightListView/ItemRender/SpanItemRendering.ts

@@ -4,7 +4,8 @@ import { decimal } from "vscode-languageclient";
 import { Settings } from "../../../../settings";
 import { WebViewUris } from "../../../webViewUtils";
 import { Duration } from "../CommonInsightObjects";
-import { SpanDurationsInsight } from "../SpanInsight";
+import { CodeObjectId } from "../../../../services/codeObject";
+import { SpanDurationsInsight, ChildSpanDurationsInsight, ChildrenSpanDurationsInsight } from "../SpanInsight";
 import { InsightTemplateHtml } from "./insightTemplateHtml";
 
 export class SpanItemHtmlRendering{
@@ -42,8 +43,9 @@ export class SpanItemHtmlRendering{
 
     private findByPercentileAndPeriod(insight: SpanDurationsInsight, percentile: number, period:string){
 
-        return insight.periodicPercentiles.filter(x=>x.percentile===percentile && period===period).firstOrDefault()?.currentDuration.value;
+        return insight.periodicPercentiles?.filter(x=>x.percentile===percentile && period===period).firstOrDefault()?.currentDuration.value;
     }
+    
     public spanDurationItemHtml(insight: SpanDurationsInsight): InsightTemplateHtml{
 
         const percentileHtmls = [];
@@ -159,4 +161,74 @@ export class SpanItemHtmlRendering{
         });
     }
 
-}
+    private getUniquePercentiles(insight: ChildrenSpanDurationsInsight): Set<number> {
+        const setOfNumbers: Set<number> = new Set();
+        setOfNumbers.add(0.50); // make sure at least one entry is there - P50
+
+        for (const childInsight of insight.childInsights) {
+            for (const pctl of childInsight.percentiles) {
+                setOfNumbers.add(pctl.percentile);
+            }
+        }
+        const sortedArray = [...setOfNumbers].sort((a, b) => a - b);
+        const sortedSet = new Set(sortedArray);
+
+        return sortedSet;
+    }
+
+    private getValueOfPercentile(insight: ChildSpanDurationsInsight, requestedPercentile: number): string {
+        for (const pctl of insight.percentiles) {
+            if (pctl.percentile === requestedPercentile) {
+                return `${pctl.currentDuration.value} ${pctl.currentDuration.unit}`;
+            }
+        }
+        return "";
+    }
+
+    public childrenSpanDurationItemHtml(insight: ChildrenSpanDurationsInsight): InsightTemplateHtml {
+        
+        const htmlRecords: string[] = [];
+
+        const percentilesSet = this.getUniquePercentiles(insight);
+
+        for (const childInsight of insight.childInsights) {
+            const spanName = CodeObjectId.getSpanName(childInsight.codeObjectId);
+            const pctlHtmlColumns: string[] = [];
+            for (const pctl of percentilesSet) {
+                const pctlValue = this.getValueOfPercentile(childInsight, pctl);
+                pctlHtmlColumns.push(/*html*/ `<td>${pctlValue}</td>`);
+            }
+            const htmlRecord: string = /*html*/ `
+            <tr>
+                <td>${spanName}</td>
+                ${pctlHtmlColumns.join('')}
+            </tr>`;
+
+            htmlRecords.push(htmlRecord);
+        }
+
+        const tableHeaders: string[] = [];
+        for (const percentile of percentilesSet) {
+            tableHeaders.push(/*html*/ `<th>P${percentile*100}</th>`);
+        }
+
+        const body = /*html*/ `
+            <div class="span-durations-insight-body">
+            <table>
+                <tr>
+                    <th>Child Span</th>
+                    ${tableHeaders.join('')}
+                </tr>
+                ${htmlRecords.join('')}
+            </table>
+            </div>`;
+
+        return new InsightTemplateHtml({
+            title: "Durations of children",
+            body: body,
+            icon: this._viewUris.image("duration.svg"),
+            buttons: []
+        });
+    }
+
+}

src/views/codeAnalytics/InsightListView/SpanInsight.ts

@@ -2,6 +2,7 @@ import moment = require("moment");
 import { Uri } from "vscode";
 import { decimal } from "vscode-languageclient";
 import { EndpointSchema, UsageStatusResults } from "../../../services/analyticsProvider";
+import { CodeObjectId } from "../../../services/codeObject";
 import { DocumentInfoProvider } from "../../../services/documentInfoProvider";
 import { EditorHelper } from "../../../services/EditorHelper";
 import { Settings } from "../../../settings";
@@ -120,6 +121,14 @@ export interface SpanDurationsInsight extends CodeObjectInsight{
     }[]
 }
 
+export interface ChildSpanDurationsInsight extends SpanDurationsInsight {
+    parentCodeObjectId: string
+}
+
+export interface ChildrenSpanDurationsInsight extends CodeObjectInsight {
+    childInsights: ChildSpanDurationsInsight[]
+}
+
 export interface EndpointInfo {
     route: string,
     serviceName: string
@@ -137,11 +146,13 @@ export interface SpandSlowEndpointsInsight extends CodeObjectInsight{
     span: SpanInfo,
     slowEndpoints:SlowEndpointInfo[]
 }
+
 export class SpanDurationsListViewItemsCreator implements IInsightListViewItemsCreator{
 
     public constructor(private _viewUris:WebViewUris ){
 
     }
+
     public async create( codeObjectsInsight: SpanDurationsInsight[]): Promise<IListViewItemBase []>
     {
         return codeObjectsInsight.map(x=>this.createListViewItem(x));
@@ -161,6 +172,30 @@ export class SpanDurationsListViewItemsCreator implements IInsightListViewItemsC
     }
 }
 
+export class ChildrenSpanDurationsListViewItemsCreator implements IInsightListViewItemsCreator {
+
+    public constructor(private _viewUris:WebViewUris) {
+
+    }
+
+    public async create( codeObjectsInsight: ChildrenSpanDurationsInsight[]): Promise<IListViewItemBase []> {
+        return codeObjectsInsight.map(x=>this.createListViewItem(x));
+    }
+
+
+    public createListViewItem(insight: ChildrenSpanDurationsInsight) : IListViewItem {
+
+        let renderer = new SpanItemHtmlRendering(this._viewUris);
+
+        return {
+            getHtml: ()=> renderer.childrenSpanDurationItemHtml(insight).renderHtml(), 
+            sortIndex: 55, 
+            // grouping by the parent span
+            groupId: CodeObjectId.getSpanName(insight.codeObjectId)
+        };
+    }
+
+}
 
 export class SpanEndpointBottlenecksListViewItemsCreator implements IInsightListViewItemsCreator {
     constructor(

src/views/codeAnalytics/codeAnalyticsView.ts

@@ -12,7 +12,7 @@ import { AnalyticsProvider } from "../../services/analyticsProvider";
 import { HotspotListViewItemsCreator } from "./InsightListView/HotspotInsight";
 import { ErrorsListViewItemsCreator } from "./InsightListView/ErrorsInsight";
 import { InsightListViewItemsCreator } from "./InsightListView/IInsightListViewItemsCreator";
-import { NPlusSpansListViewItemsCreator, SpanDurationsListViewItemsCreator, SpanEndpointBottlenecksListViewItemsCreator, SpanUsagesListViewItemsCreator } from "./InsightListView/SpanInsight";
+import { NPlusSpansListViewItemsCreator, SpanDurationsListViewItemsCreator, SpanEndpointBottlenecksListViewItemsCreator, SpanUsagesListViewItemsCreator, ChildrenSpanDurationsListViewItemsCreator } from "./InsightListView/SpanInsight";
 import { HighUsageListViewItemsCreator, LowUsageListViewItemsCreator, NormalUsageListViewItemsCreator, EPNPlusSpansListViewItemsCreator, SlowEndpointListViewItemsCreator, SlowestSpansListViewItemsCreator, UsageViewItemsTemplate } from "./InsightListView/EndpointInsight";
 import { Logger } from "../../services/logger";
 import { Settings } from "../../settings";
@@ -194,6 +194,7 @@ class CodeAnalyticsViewProvider implements vscode.WebviewViewProvider,vscode.Dis
         listViewItemsCreator.add("Errors", new ErrorsListViewItemsCreator(this._webViewUris));
         listViewItemsCreator.add("SpanUsages", new SpanUsagesListViewItemsCreator(this._webViewUris));
         listViewItemsCreator.add("SpanDurations", new SpanDurationsListViewItemsCreator(this._webViewUris));
+        listViewItemsCreator.add("ChildrenSpanDurations", new ChildrenSpanDurationsListViewItemsCreator(this._webViewUris));
         listViewItemsCreator.add("SlowestSpans", new SlowestSpansListViewItemsCreator(this._webViewUris, editorHelper,_documentInfoProvider,this._channel));
         const usageTemplate = new UsageViewItemsTemplate(this._webViewUris);
         listViewItemsCreator.add("LowUsage", new LowUsageListViewItemsCreator(usageTemplate));