Added SpanDurationsInsight (#104)

Author: asafc64

src/services/languages/python/spanExtractor.ts

@@ -77,10 +77,11 @@ export class PythonSpanExtractor implements ISpanExtractor {
             const tracerName =  match[1];
 
             let instLibraryOptions = []
-            if  (tracerName === '__name__' && mainDeclared ){
-                instLibraryOptions.push('__main__');  
-
-                let fileName = await this.extractNameTypeTrace(tracerDefinition.document.fileName);
+            if (tracerName === '__name__'){
+                if (mainDeclared)
+                    instLibraryOptions.push('__main__');  
+                
+                let fileName = await this.extractNameTypeTrace(tracerDefinition.document.uri.fsPath);
                 instLibraryOptions.push(fileName );
                 if (fileName.includes(".")){
                     let unrootedForm = fileName.split(".").slice(1).join(".");
@@ -112,7 +113,7 @@ export class PythonSpanExtractor implements ISpanExtractor {
         const pythonFileSuffix = ".py";
         const specialFolders = ["venv","site-packages"];
 
-        let folder = vscode.workspace.workspaceFolders?.filter(f=>filePath.startsWith(f.uri.path))
+        let folder = vscode.workspace.workspaceFolders?.filter(f=> filePath.startsWith(f.uri.fsPath))
             .map(f=>f.uri.path).firstOrDefault();
 
         if (!folder){

src/views-ui/codeAnalytics/main.scss

@@ -401,6 +401,18 @@ vscode-panel-view {
             }
         }
     }
+    .span-durations-insight{
+        .percentiles-grid{
+            display: grid;
+            justify-content: start;
+            grid-template-columns: auto auto auto;
+            column-gap: 10px;
+            row-gap: 5px;
+        }
+        .bad-change{
+            color: #f95959;
+        }
+    }
     .endpoint-bottleneck-insight{
         margin-top: 5px;
 

src/views/codeAnalytics/InsightListView/SpanInsight.ts

@@ -1,8 +1,9 @@
 import { IListViewItem, IListViewItemBase, ListViewGroupItem } from "../../ListView/IListViewItem";
 import { CodeObjectInfo } from "../codeAnalyticsView";
+import { Duration } from "./EndpointInsight";
 import { CodeObjectInsight, IInsightListViewItemsCreator } from "./IInsightListViewItemsCreator";
 
-export interface SpanInsight extends CodeObjectInsight
+export interface SpanUsagesInsight extends CodeObjectInsight
 {
     span: string,
     flows:{
@@ -19,9 +20,9 @@ export interface SpanInsight extends CodeObjectInsight
         lastServiceSpan: string | undefined
     }[]
 }
-export class SpanListViewItemsCreator implements IInsightListViewItemsCreator
+export class SpanUsagesListViewItemsCreator implements IInsightListViewItemsCreator
 {
-    public async create(scope: CodeObjectInfo, codeObjectsInsight: SpanInsight []): Promise<IListViewItemBase []>
+    public async create(scope: CodeObjectInfo, codeObjectsInsight: SpanUsagesInsight []): Promise<IListViewItemBase []>
     {
         const groupedBySpan = codeObjectsInsight.groupBy(o => o.span);
         const listViewItems: IListViewItem [] = [];
@@ -36,7 +37,7 @@ export class SpanListViewItemsCreator implements IInsightListViewItemsCreator
         return listViewItems;
     }
 
-    public createListViewItem(insight: SpanInsight) : IListViewItem
+    public createListViewItem(insight: SpanUsagesInsight) : IListViewItem
     {
         // <span class="codicon codicon-server-process" style="margin-right: 3px;"></span>
         const usages = insight.flows.map(flow => {
@@ -94,6 +95,65 @@ export class SpanListViewItemsCreator implements IInsightListViewItemsCreator
     }
 }
 
+export interface SpanDurationsInsight extends CodeObjectInsight{
+    span: string,
+    percentiles: {
+        percentile: number,
+        change: number,
+        latestDuration: Duration
+    }[]
+}
+export class SpanDurationsListViewItemsCreator implements IInsightListViewItemsCreator{
+    public async create(scope: CodeObjectInfo, codeObjectsInsight: SpanDurationsInsight[]): Promise<IListViewItemBase []>
+    {
+        const groupedBySpan = codeObjectsInsight.groupBy(o => o.span);
+        const listViewItems: IListViewItem [] = [];
+        for(let route in groupedBySpan)
+        {
+            const group = new SpanListViewGroupItem(route);
+            group.sortIndex = 10;
+            const items = groupedBySpan[route].map(o=>this.createListViewItem(o));
+            group.addItems(...items);
+            listViewItems.push(group);
+        }
+        return listViewItems;
+    }
+
+    public createListViewItem(insight: SpanDurationsInsight) : IListViewItem
+    {
+        const percentileHtmls = []
+        for(const item of insight.percentiles){
+            const changeHtml = Math.abs(item.change*100).toFixed(0);
+
+            percentileHtmls.push(/*html*/ `<span>P${item.percentile}</span>`);
+            percentileHtmls.push(/*html*/ `<span>${item.latestDuration.value} ${item.latestDuration.unit}</span>`);
+
+            if (item.change > 0.1)
+                percentileHtmls.push(/*html*/ `<span class="bad-change">increased by ${changeHtml}%</span>`);
+            else if (item.change < -0.1)
+                percentileHtmls.push(/*html*/ `<span class="good-change">decreased by ${changeHtml}%</span>`);
+            else
+                percentileHtmls.push(/*html*/ `<span></span>`);
+        }
+
+        const html = /*html*/ `
+            <div class="list-item span-durations-insight">
+                <div class="list-item-content-area">
+                    <div class="list-item-header"><strong>Duration</strong></div>
+                    <div class="percentiles-grid">
+                        ${percentileHtmls.join('')}
+                    </div>
+                </div>
+            </div>`;
+
+        return {
+            getHtml: ()=> html, 
+            sortIndex: 0, 
+            groupId: undefined
+        };
+    }
+}
+
 export class SpanListViewGroupItem extends ListViewGroupItem
 {
     constructor(private span: string)

src/views/codeAnalytics/codeAnalyticsView.ts

@@ -13,7 +13,7 @@ import { AnalyticsProvider } from "../../services/analyticsProvider";
 import { HotspotListViewItemsCreator } from "./InsightListView/HotspotInsight";
 import { ErrorsListViewItemsCreator } from "./InsightListView/ErrorsInsight";
 import { InsightListViewItemsCreator } from "./InsightListView/IInsightListViewItemsCreator";
-import { SpanListViewItemsCreator } from "./InsightListView/SpanInsight";
+import { SpanDurationsListViewItemsCreator, SpanUsagesListViewItemsCreator } from "./InsightListView/SpanInsight";
 import { HighUsageListViewItemsCreator, LowUsageListViewItemsCreator, NormalUsageListViewItemsCreator, SlowEndpointListViewItemsCreator, SlowestSpansListViewItemsCreator, UsageViewItemsTemplate } from "./InsightListView/EndpointInsight";
 import { Logger } from "../../services/logger";
 
@@ -123,7 +123,8 @@ class CodeAnalyticsViewProvider implements vscode.WebviewViewProvider,vscode.Dis
         const listViewItemsCreator = new InsightListViewItemsCreator();
         listViewItemsCreator.add("HotSpot", new HotspotListViewItemsCreator(this._webViewUris));
         listViewItemsCreator.add("Errors", new ErrorsListViewItemsCreator());
-        listViewItemsCreator.add("SpanUsages", new SpanListViewItemsCreator());
+        listViewItemsCreator.add("SpanUsages", new SpanUsagesListViewItemsCreator());
+        listViewItemsCreator.add("SpanDurations", new SpanDurationsListViewItemsCreator());
         listViewItemsCreator.add("SlowestSpans", new SlowestSpansListViewItemsCreator(this._webViewUris, editorHelper,_documentInfoProvider,this._channel));
         const usageTemplate = new UsageViewItemsTemplate(this._webViewUris);
         listViewItemsCreator.add("LowUsage", new LowUsageListViewItemsCreator(usageTemplate));