feat: Removing Filters from span details in waterfall widget (#2502)

Co-authored-by: Patricio Albizu <[email protected]>
hypertrace · Nov 8, 2023 · 1dc53b9 · 1dc53b9
1 parent 418e1ef
commit 1dc53b9
Show file tree

Hide file tree

Showing 9 changed files with 64 additions and 22 deletions.
diff --git a/...ty/src/shared/components/span-detail/call/headers/span-detail-call-headers.component.scss b/...ty/src/shared/components/span-detail/call/headers/span-detail-call-headers.component.scss
@@ -19,6 +19,9 @@
       grid-template-columns: auto min-content;
 
       .filter-button {
+        display: flex;
+        align-items: center;
+        margin-bottom: 2px;
         visibility: hidden;
       }
 

diff --git a/...lity/src/shared/components/span-detail/call/headers/span-detail-call-headers.component.ts b/...lity/src/shared/components/span-detail/call/headers/span-detail-call-headers.component.ts
@@ -24,15 +24,17 @@ import { MetadataService } from '../../../../services/metadata/metadata.service'
           >
             <div class="record-value" *htListViewValueRenderer="let record">
               <div class="value">{{ record.value }}</div>
-              <ht-filter-button
-                *htLetAsync="this.metadata$ as metadata"
-                class="filter-button"
-                [attribute]="this.getFilterAttribute | htMemoize: metadata"
-                [metadata]="metadata"
-                [value]="record.value"
-                [subpath]="record.key"
-                htTooltip="See traces in Explorer"
-              ></ht-filter-button>
+              <ng-container *ngIf="this.showFilters">
+                <ht-filter-button
+                  *htLetAsync="this.metadata$ as metadata"
+                  class="filter-button"
+                  [attribute]="this.getFilterAttribute | htMemoize: metadata"
+                  [metadata]="metadata"
+                  [value]="record.value"
+                  [subpath]="record.key"
+                  htTooltip="See traces in Explorer"
+                ></ht-filter-button>
+              </ng-container>
             </div>
           </ht-list-view>
         </ng-container>
@@ -56,6 +58,9 @@ export class SpanDetailCallHeadersComponent implements OnChanges {
   @Input()
   public scope?: string;
 
+  @Input()
+  public showFilters: boolean = true;
+
   public records$?: Observable<ListViewRecord[]>;
 
   public label?: string;
@@ -69,7 +74,7 @@ export class SpanDetailCallHeadersComponent implements OnChanges {
       this.buildRecords();
     }
 
-    if (changes.scope && this.scope) {
+    if (changes.scope && this.scope && this.showFilters) {
       this.metadata$ = this.metadataService.getAllAttributes(this.scope).pipe(
         map(metadata =>
           metadata.map(attributeMetadata => ({

diff --git a/.../observability/src/shared/components/span-detail/request/span-request-detail.component.ts b/.../observability/src/shared/components/span-detail/request/span-request-detail.component.ts
@@ -13,6 +13,7 @@ import { SpanDetailLayoutStyle } from '../span-detail-layout-style';
           <ht-span-detail-call-headers
             [data]="this.requestHeaders"
             [scope]="this.scope"
+            [showFilters]="this.showFilters"
             fieldName="${RequestFieldName.Headers}"
             title="Headers"
           ></ht-span-detail-call-headers>
@@ -21,6 +22,7 @@ import { SpanDetailLayoutStyle } from '../span-detail-layout-style';
           <ht-span-detail-call-headers
             [data]="this.requestCookies"
             [scope]="this.scope"
+            [showFilters]="this.showFilters"
             fieldName="${RequestFieldName.Cookies}"
             title="Cookies"
           ></ht-span-detail-call-headers>
@@ -47,6 +49,9 @@ export class SpanRequestDetailComponent {
 
   @Input()
   public scope?: string;
+
+  @Input()
+  public showFilters?: boolean;
 }
 
 const enum RequestFieldName {

diff --git a/...bservability/src/shared/components/span-detail/response/span-response-detail.component.ts b/...bservability/src/shared/components/span-detail/response/span-response-detail.component.ts
@@ -13,6 +13,7 @@ import { SpanDetailLayoutStyle } from '../span-detail-layout-style';
           <ht-span-detail-call-headers
             [data]="this.responseHeaders"
             [scope]="this.scope"
+            [showFilters]="this.showFilters"
             fieldName="${ResponseFieldName.Headers}"
             title="Headers"
           ></ht-span-detail-call-headers>
@@ -23,6 +24,7 @@ import { SpanDetailLayoutStyle } from '../span-detail-layout-style';
             [data]="this.responseCookies"
             [metadata]="this.cookieMetadata"
             [scope]="this.scope"
+            [showFilters]="this.showFilters"
             fieldName="${ResponseFieldName.Cookies}"
             title="Cookies"
           ></ht-span-detail-call-headers>
@@ -52,6 +54,9 @@ export class SpanResponseDetailComponent {
 
   @Input()
   public scope?: string;
+
+  @Input()
+  public showFilters?: boolean;
 }
 
 const enum ResponseFieldName {

diff --git a/projects/observability/src/shared/components/span-detail/span-detail.component.ts b/projects/observability/src/shared/components/span-detail/span-detail.component.ts
@@ -45,6 +45,7 @@ import { SpanDetailTab } from './span-detail-tab';
                 [requestCookies]="this.spanData?.requestCookies"
                 [requestBody]="this.spanData?.requestBody"
                 [scope]="this.scope"
+                [showFilters]="this.showFilters"
               ></ht-span-request-detail>
             </ng-container>
             <ng-container *ngSwitchCase="'${SpanDetailTab.Response}'">
@@ -56,10 +57,15 @@ import { SpanDetailTab } from './span-detail-tab';
                 [cookieMetadata]="this.spanData?.responseCookiesMetadata"
                 [responseBody]="this.spanData?.responseBody"
                 [scope]="this.scope"
+                [showFilters]="this.showFilters"
               ></ht-span-response-detail>
             </ng-container>
             <ng-container *ngSwitchCase="'${SpanDetailTab.Attributes}'">
-              <ht-span-tags-detail [tags]="this.spanData?.tags" [scope]="this.scope"></ht-span-tags-detail>
+              <ht-span-tags-detail
+                [tags]="this.spanData?.tags"
+                [scope]="this.scope"
+                [showFilters]="this.showFilters"
+              ></ht-span-tags-detail>
             </ng-container>
             <ng-container *ngSwitchCase="'${SpanDetailTab.ExitCalls}'">
               <ht-span-exit-calls [exitCalls]="this.spanData?.exitCallsBreakup"></ht-span-exit-calls>
@@ -95,6 +101,9 @@ export class SpanDetailComponent implements OnChanges {
   @Input()
   public scope: string = '';
 
+  @Input()
+  public showFilters: boolean = true;
+
   @Input()
   public showAttributesTab: boolean = true;
   @Output()

diff --git a/...ects/observability/src/shared/components/span-detail/tags/span-tags-detail.component.scss b/...ects/observability/src/shared/components/span-detail/tags/span-tags-detail.component.scss
@@ -16,6 +16,9 @@
     grid-template-columns: auto min-content;
 
     .filter-button {
+      display: flex;
+      align-items: center;
+      margin-bottom: 2px;
       visibility: hidden;
     }
 

diff --git a/projects/observability/src/shared/components/span-detail/tags/span-tags-detail.component.ts b/projects/observability/src/shared/components/span-detail/tags/span-tags-detail.component.ts
@@ -17,15 +17,17 @@ import { MetadataService } from '../../../services/metadata/metadata.service';
         <ht-list-view [records]="tagRecords" display="${ListViewDisplay.Plain}" data-sensitive-pii>
           <div class="tag-value" *htListViewValueRenderer="let record">
             <div class="value">{{ record.value }}</div>
-            <ht-filter-button
-              *htLetAsync="this.metadata$ as metadata"
-              class="filter-button"
-              [attribute]="this.getFilterAttribute | htMemoize: metadata"
-              [metadata]="metadata"
-              [value]="record.value"
-              [subpath]="record.key"
-              htTooltip="See traces in Explorer"
-            ></ht-filter-button>
+            <ng-container *ngIf="this.showFilters">
+              <ht-filter-button
+                *htLetAsync="this.metadata$ as metadata"
+                class="filter-button"
+                [attribute]="this.getFilterAttribute | htMemoize: metadata"
+                [metadata]="metadata"
+                [value]="record.value"
+                [subpath]="record.key"
+                htTooltip="See traces in Explorer"
+              ></ht-filter-button>
+            </ng-container>
           </div>
         </ht-list-view>
       </ng-container>
@@ -39,6 +41,9 @@ export class SpanTagsDetailComponent implements OnChanges {
   @Input()
   public scope?: string;
 
+  @Input()
+  public showFilters: boolean = true;
+
   public tagRecords$?: Observable<ListViewRecord[]>;
   public metadata$?: Observable<FilterAttribute[]>;
 
@@ -49,7 +54,7 @@ export class SpanTagsDetailComponent implements OnChanges {
       this.buildTagRecords();
     }
 
-    if (changes.scope && this.scope) {
+    if (changes.scope && this.scope && this.showFilters) {
       this.metadata$ = this.metadataService.getAllAttributes(this.scope).pipe(
         map(metadata =>
           metadata.map(attributeMetadata => ({

diff --git a/...servability/src/shared/dashboard/widgets/waterfall/waterfall-widget-renderer.component.ts b/...servability/src/shared/dashboard/widgets/waterfall/waterfall-widget-renderer.component.ts
@@ -68,6 +68,7 @@ import { MarkerSelection, WaterfallChartComponent } from './waterfall/waterfall-
           [showTitleHeader]="true"
           layout="${SpanDetailLayoutStyle.Vertical}"
           [activeTabLabel]="this.activeTabLabel"
+          [showFilters]="this.model.showFilters"
           (closed)="this.closeSheet()"
         >
           <div class="filterable-summary-value">

diff --git a/projects/observability/src/shared/dashboard/widgets/waterfall/waterfall-widget.model.ts b/projects/observability/src/shared/dashboard/widgets/waterfall/waterfall-widget.model.ts
@@ -1,4 +1,4 @@
-import { Model, ModelApi, ModelProperty, STRING_PROPERTY } from '@hypertrace/hyperdash';
+import { BOOLEAN_PROPERTY, Model, ModelApi, ModelProperty, STRING_PROPERTY } from '@hypertrace/hyperdash';
 import { ModelInject, MODEL_API } from '@hypertrace/hyperdash-angular';
 import { Observable } from 'rxjs';
 import { WaterfallData } from './waterfall/waterfall-chart';
@@ -13,6 +13,12 @@ export class WaterfallWidgetModel {
   })
   public title: string = '';
 
+  @ModelProperty({
+    key: 'showFilters',
+    type: BOOLEAN_PROPERTY.type
+  })
+  public showFilters?: boolean;
+
   @ModelInject(MODEL_API)
   private readonly api!: ModelApi;