From b26434580f6ed365ecbad7eb1cd9cce10fc39ef6 Mon Sep 17 00:00:00 2001
From: SJ <shubham@traceable.ai>
Date: Wed, 3 Nov 2021 16:20:16 +0530
Subject: [PATCH 1/3] feat(span-detail): cookies as first class fields

---
 .../span-detail-call-headers.component.scss   |  1 -
 .../span-detail-call-headers.component.ts     | 45 ++++++++++++++-----
 .../request/span-request-detail.component.ts  | 13 +++++-
 .../span-response-detail.component.ts         | 13 +++++-
 .../components/span-detail/span-data.ts       |  2 +
 .../span-detail/span-detail.component.ts      | 12 ++++-
 .../waterfall/waterfall/waterfall-chart.ts    |  2 +
 7 files changed, 71 insertions(+), 17 deletions(-)

diff --git a/projects/observability/src/shared/components/span-detail/call/headers/span-detail-call-headers.component.scss b/projects/observability/src/shared/components/span-detail/call/headers/span-detail-call-headers.component.scss
index ae9b71b15..da4f6eb03 100644
--- a/projects/observability/src/shared/components/span-detail/call/headers/span-detail-call-headers.component.scss
+++ b/projects/observability/src/shared/components/span-detail/call/headers/span-detail-call-headers.component.scss
@@ -3,7 +3,6 @@
 .call-headers {
   display: flex;
   flex-direction: column;
-  height: 100%;
   padding-top: 24px;
 
   .title {
diff --git a/projects/observability/src/shared/components/span-detail/call/headers/span-detail-call-headers.component.ts b/projects/observability/src/shared/components/span-detail/call/headers/span-detail-call-headers.component.ts
index 8ca600079..a09d04583 100644
--- a/projects/observability/src/shared/components/span-detail/call/headers/span-detail-call-headers.component.ts
+++ b/projects/observability/src/shared/components/span-detail/call/headers/span-detail-call-headers.component.ts
@@ -10,10 +10,10 @@ import { EMPTY, Observable, of } from 'rxjs';
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <div class="call-headers">
-      <ht-label label="Headers" class="title"></ht-label>
+      <ht-label [label]="this.label" class="title"></ht-label>
       <div class="container" data-sensitive-pii>
-        <ng-container *htLoadAsync="this.headerRecords$ as headerRecords">
-          <ht-list-view [records]="headerRecords"></ht-list-view>
+        <ng-container *htLoadAsync="this.records$ as records">
+          <ht-list-view [records]="records"></ht-list-view>
         </ng-container>
       </div>
     </div>
@@ -21,26 +21,47 @@ import { EMPTY, Observable, of } from 'rxjs';
 })
 export class SpanDetailCallHeadersComponent implements OnChanges {
   @Input()
-  public headers?: Dictionary<unknown>;
+  public data?: Dictionary<unknown>;
 
-  public headerRecords$?: Observable<ListViewRecord[]>;
+  @Input()
+  public mode: SpanDetailCallHeaderType = SpanDetailCallHeaderType.Header;
+
+  public records$?: Observable<ListViewRecord[]>;
+
+  public label?: string;
 
   public ngOnChanges(): void {
-    this.buildHeaderRecords();
+    this.label = this.getLabel();
+    this.buildRecords();
+  }
+
+  private getLabel(): string {
+    switch (this.mode) {
+      case SpanDetailCallHeaderType.Cookie:
+        return 'Cookies';
+      case SpanDetailCallHeaderType.Header:
+      default:
+        return 'Headers';
+    }
   }
 
-  private buildHeaderRecords(): void {
-    if (isNil(this.headers)) {
-      this.headerRecords$ = EMPTY;
+  private buildRecords(): void {
+    if (isNil(this.data)) {
+      this.records$ = EMPTY;
     } else {
-      this.headerRecords$ = of(
-        Object.keys(this.headers)
+      this.records$ = of(
+        Object.keys(this.data)
           .sort((key1, key2) => key1.localeCompare(key2))
           .map(key => ({
             key: key,
-            value: this.headers![key] as string | number
+            value: this.data![key] as string | number
           }))
       );
     }
   }
 }
+
+export const enum SpanDetailCallHeaderType {
+  Header = 'header',
+  Cookie = 'cookie'
+}
diff --git a/projects/observability/src/shared/components/span-detail/request/span-request-detail.component.ts b/projects/observability/src/shared/components/span-detail/request/span-request-detail.component.ts
index 3f8953683..1ca8dd710 100644
--- a/projects/observability/src/shared/components/span-detail/request/span-request-detail.component.ts
+++ b/projects/observability/src/shared/components/span-detail/request/span-request-detail.component.ts
@@ -1,6 +1,7 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { Dictionary } from '@hypertrace/common';
 import { SpanDetailLayoutStyle } from '../span-detail-layout-style';
+import { SpanDetailCallHeaderType } from '../call/headers/span-detail-call-headers.component';
 
 @Component({
   selector: 'ht-span-request-detail',
@@ -9,7 +10,14 @@ import { SpanDetailLayoutStyle } from '../span-detail-layout-style';
   template: `
     <div class="span-request-detail" [ngClass]="this.layout">
       <div class="section">
-        <ht-span-detail-call-headers [headers]="this.requestHeaders"></ht-span-detail-call-headers>
+        <ht-span-detail-call-headers
+          [data]="this.requestHeaders"
+          mode="${SpanDetailCallHeaderType.Header}"
+        ></ht-span-detail-call-headers>
+        <ht-span-detail-call-headers
+          [data]="this.requestCookies"
+          mode="${SpanDetailCallHeaderType.Cookie}"
+        ></ht-span-detail-call-headers>
       </div>
       <div class="section">
         <ht-span-detail-call-body [body]="this.requestBody"></ht-span-detail-call-body>
@@ -21,6 +29,9 @@ export class SpanRequestDetailComponent {
   @Input()
   public requestHeaders?: Dictionary<unknown>;
 
+  @Input()
+  public requestCookies?: Dictionary<unknown>;
+
   @Input()
   public requestBody?: string;
 
diff --git a/projects/observability/src/shared/components/span-detail/response/span-response-detail.component.ts b/projects/observability/src/shared/components/span-detail/response/span-response-detail.component.ts
index 1243f05d1..4a15c85b8 100644
--- a/projects/observability/src/shared/components/span-detail/response/span-response-detail.component.ts
+++ b/projects/observability/src/shared/components/span-detail/response/span-response-detail.component.ts
@@ -1,6 +1,7 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { Dictionary } from '@hypertrace/common';
 import { SpanDetailLayoutStyle } from '../span-detail-layout-style';
+import { SpanDetailCallHeaderType } from '../call/headers/span-detail-call-headers.component';
 
 @Component({
   selector: 'ht-span-response-detail',
@@ -9,7 +10,14 @@ import { SpanDetailLayoutStyle } from '../span-detail-layout-style';
   template: `
     <div class="span-response-detail" [ngClass]="this.layout">
       <div class="section">
-        <ht-span-detail-call-headers [headers]="this.responseHeaders"></ht-span-detail-call-headers>
+        <ht-span-detail-call-headers
+          [data]="this.responseHeaders"
+          mode="${SpanDetailCallHeaderType.Header}"
+        ></ht-span-detail-call-headers>
+        <ht-span-detail-call-headers
+          [data]="this.responseCookies"
+          mode="${SpanDetailCallHeaderType.Cookie}"
+        ></ht-span-detail-call-headers>
       </div>
       <div class="section">
         <ht-span-detail-call-body [body]="this.responseBody"></ht-span-detail-call-body>
@@ -21,6 +29,9 @@ export class SpanResponseDetailComponent {
   @Input()
   public responseHeaders?: Dictionary<unknown>;
 
+  @Input()
+  public responseCookies?: Dictionary<unknown>;
+
   @Input()
   public responseBody?: string;
 
diff --git a/projects/observability/src/shared/components/span-detail/span-data.ts b/projects/observability/src/shared/components/span-detail/span-data.ts
index 1cfbe7686..cd1464222 100644
--- a/projects/observability/src/shared/components/span-detail/span-data.ts
+++ b/projects/observability/src/shared/components/span-detail/span-data.ts
@@ -7,8 +7,10 @@ export interface SpanData {
   apiName?: string;
   protocolName?: string;
   requestHeaders: Dictionary<unknown>;
+  requestCookies: Dictionary<unknown>;
   requestBody: string;
   responseHeaders: Dictionary<unknown>;
+  responseCookies: Dictionary<unknown>;
   responseBody: string;
   tags: Dictionary<unknown>;
   requestUrl: string;
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
index 44c67aaf1..9ec042f26 100644
--- a/projects/observability/src/shared/components/span-detail/span-detail.component.ts
+++ b/projects/observability/src/shared/components/span-detail/span-detail.component.ts
@@ -30,6 +30,7 @@ import { SpanDetailTab } from './span-detail-tab';
             class="request"
             [layout]="this.layout"
             [requestHeaders]="this.spanData.requestHeaders"
+            [requestCookies]="this.spanData.requestCookies"
             [requestBody]="this.spanData.requestBody"
           ></ht-span-request-detail>
         </ht-tab>
@@ -38,6 +39,7 @@ import { SpanDetailTab } from './span-detail-tab';
             class="response"
             [layout]="this.layout"
             [responseHeaders]="this.spanData.responseHeaders"
+            [responseCookies]="this.spanData.responseCookies"
             [responseBody]="this.spanData.responseBody"
           ></ht-span-response-detail>
         </ht-tab>
@@ -78,8 +80,14 @@ export class SpanDetailComponent implements OnChanges {
 
   public ngOnChanges(changes: TypedSimpleChanges<this>): void {
     if (changes.spanData) {
-      this.showRequestTab = !isEmpty(this.spanData?.requestHeaders) || !isEmpty(this.spanData?.requestBody);
-      this.showResponseTab = !isEmpty(this.spanData?.responseHeaders) || !isEmpty(this.spanData?.responseBody);
+      this.showRequestTab =
+        !isEmpty(this.spanData?.requestHeaders) ||
+        !isEmpty(this.spanData?.requestCookies) ||
+        !isEmpty(this.spanData?.requestBody);
+      this.showResponseTab =
+        !isEmpty(this.spanData?.responseHeaders) ||
+        !isEmpty(this.spanData?.responseCookies) ||
+        !isEmpty(this.spanData?.responseBody);
       this.showExitCallsTab = !isEmpty(this.spanData?.exitCallsBreakup);
       this.showLogEventsTab = !isEmpty(this.spanData?.logEvents);
       this.totalLogEvents = (this.spanData?.logEvents ?? []).length;
diff --git a/projects/observability/src/shared/dashboard/widgets/waterfall/waterfall/waterfall-chart.ts b/projects/observability/src/shared/dashboard/widgets/waterfall/waterfall/waterfall-chart.ts
index 0be93223d..be539ae97 100644
--- a/projects/observability/src/shared/dashboard/widgets/waterfall/waterfall/waterfall-chart.ts
+++ b/projects/observability/src/shared/dashboard/widgets/waterfall/waterfall/waterfall-chart.ts
@@ -18,8 +18,10 @@ export interface WaterfallData {
   apiName?: string;
   spanType: SpanType;
   requestHeaders?: Dictionary<unknown>;
+  requestCookies?: Dictionary<unknown>;
   requestBody?: string;
   responseHeaders?: Dictionary<unknown>;
+  responseCookies?: Dictionary<unknown>;
   responseBody?: string;
   tags: Dictionary<unknown>;
   errorCount: number;

From 226bde5687b9fe186f667e8296437ddea7b13f37 Mon Sep 17 00:00:00 2001
From: SJ <shubham@traceable.ai>
Date: Fri, 5 Nov 2021 14:28:23 +0530
Subject: [PATCH 2/3] title instead of mode

---
 .../span-detail-call-headers.component.ts     | 20 ++-----------------
 .../span-request-detail.component.test.ts     |  2 +-
 .../request/span-request-detail.component.ts  |  5 ++---
 .../span-response-detail.component.test.ts    |  2 +-
 .../span-response-detail.component.ts         |  5 ++---
 .../span-detail/span-detail.component.test.ts |  8 ++++++++
 6 files changed, 16 insertions(+), 26 deletions(-)

diff --git a/projects/observability/src/shared/components/span-detail/call/headers/span-detail-call-headers.component.ts b/projects/observability/src/shared/components/span-detail/call/headers/span-detail-call-headers.component.ts
index a09d04583..da1a24593 100644
--- a/projects/observability/src/shared/components/span-detail/call/headers/span-detail-call-headers.component.ts
+++ b/projects/observability/src/shared/components/span-detail/call/headers/span-detail-call-headers.component.ts
@@ -10,7 +10,7 @@ import { EMPTY, Observable, of } from 'rxjs';
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <div class="call-headers">
-      <ht-label [label]="this.label" class="title"></ht-label>
+      <ht-label [label]="this.title" class="title"></ht-label>
       <div class="container" data-sensitive-pii>
         <ng-container *htLoadAsync="this.records$ as records">
           <ht-list-view [records]="records"></ht-list-view>
@@ -24,27 +24,16 @@ export class SpanDetailCallHeadersComponent implements OnChanges {
   public data?: Dictionary<unknown>;
 
   @Input()
-  public mode: SpanDetailCallHeaderType = SpanDetailCallHeaderType.Header;
+  public title?: string;
 
   public records$?: Observable<ListViewRecord[]>;
 
   public label?: string;
 
   public ngOnChanges(): void {
-    this.label = this.getLabel();
     this.buildRecords();
   }
 
-  private getLabel(): string {
-    switch (this.mode) {
-      case SpanDetailCallHeaderType.Cookie:
-        return 'Cookies';
-      case SpanDetailCallHeaderType.Header:
-      default:
-        return 'Headers';
-    }
-  }
-
   private buildRecords(): void {
     if (isNil(this.data)) {
       this.records$ = EMPTY;
@@ -60,8 +49,3 @@ export class SpanDetailCallHeadersComponent implements OnChanges {
     }
   }
 }
-
-export const enum SpanDetailCallHeaderType {
-  Header = 'header',
-  Cookie = 'cookie'
-}
diff --git a/projects/observability/src/shared/components/span-detail/request/span-request-detail.component.test.ts b/projects/observability/src/shared/components/span-detail/request/span-request-detail.component.test.ts
index b649bf085..c22a97a05 100644
--- a/projects/observability/src/shared/components/span-detail/request/span-request-detail.component.test.ts
+++ b/projects/observability/src/shared/components/span-detail/request/span-request-detail.component.test.ts
@@ -18,7 +18,7 @@ describe('Span request detail component', () => {
   });
 
   test('should display headers and body title', () => {
-    spectator = createHost(`<ht-span-request-detail></ht-span-request-detail>`);
+    spectator = createHost(`<ht-span-request-detail title="Headers"></ht-span-request-detail>`);
 
     const headerTitleElement = spectator.query<HTMLElement>('.call-headers > .title');
     expect(headerTitleElement).not.toBeNull();
diff --git a/projects/observability/src/shared/components/span-detail/request/span-request-detail.component.ts b/projects/observability/src/shared/components/span-detail/request/span-request-detail.component.ts
index 1ca8dd710..cdfd79fb7 100644
--- a/projects/observability/src/shared/components/span-detail/request/span-request-detail.component.ts
+++ b/projects/observability/src/shared/components/span-detail/request/span-request-detail.component.ts
@@ -1,7 +1,6 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { Dictionary } from '@hypertrace/common';
 import { SpanDetailLayoutStyle } from '../span-detail-layout-style';
-import { SpanDetailCallHeaderType } from '../call/headers/span-detail-call-headers.component';
 
 @Component({
   selector: 'ht-span-request-detail',
@@ -12,11 +11,11 @@ import { SpanDetailCallHeaderType } from '../call/headers/span-detail-call-heade
       <div class="section">
         <ht-span-detail-call-headers
           [data]="this.requestHeaders"
-          mode="${SpanDetailCallHeaderType.Header}"
+          title="Headers"
         ></ht-span-detail-call-headers>
         <ht-span-detail-call-headers
           [data]="this.requestCookies"
-          mode="${SpanDetailCallHeaderType.Cookie}"
+          title="Cookies"
         ></ht-span-detail-call-headers>
       </div>
       <div class="section">
diff --git a/projects/observability/src/shared/components/span-detail/response/span-response-detail.component.test.ts b/projects/observability/src/shared/components/span-detail/response/span-response-detail.component.test.ts
index a4ec0a151..0fd14c572 100644
--- a/projects/observability/src/shared/components/span-detail/response/span-response-detail.component.test.ts
+++ b/projects/observability/src/shared/components/span-detail/response/span-response-detail.component.test.ts
@@ -18,7 +18,7 @@ describe('Span response detail component', () => {
   });
 
   test('should display headers and body title', () => {
-    spectator = createHost(`<ht-span-response-detail></ht-span-response-detail>`);
+    spectator = createHost(`<ht-span-response-detail title="Headers"></ht-span-response-detail>`);
 
     const headerTitleElement = spectator.query<HTMLElement>('.call-headers > .title');
     expect(headerTitleElement).not.toBeNull();
diff --git a/projects/observability/src/shared/components/span-detail/response/span-response-detail.component.ts b/projects/observability/src/shared/components/span-detail/response/span-response-detail.component.ts
index 4a15c85b8..a202ab747 100644
--- a/projects/observability/src/shared/components/span-detail/response/span-response-detail.component.ts
+++ b/projects/observability/src/shared/components/span-detail/response/span-response-detail.component.ts
@@ -1,7 +1,6 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { Dictionary } from '@hypertrace/common';
 import { SpanDetailLayoutStyle } from '../span-detail-layout-style';
-import { SpanDetailCallHeaderType } from '../call/headers/span-detail-call-headers.component';
 
 @Component({
   selector: 'ht-span-response-detail',
@@ -12,11 +11,11 @@ import { SpanDetailCallHeaderType } from '../call/headers/span-detail-call-heade
       <div class="section">
         <ht-span-detail-call-headers
           [data]="this.responseHeaders"
-          mode="${SpanDetailCallHeaderType.Header}"
+          title="Headers"
         ></ht-span-detail-call-headers>
         <ht-span-detail-call-headers
           [data]="this.responseCookies"
-          mode="${SpanDetailCallHeaderType.Cookie}"
+          title="Cookies"
         ></ht-span-detail-call-headers>
       </div>
       <div class="section">
diff --git a/projects/observability/src/shared/components/span-detail/span-detail.component.test.ts b/projects/observability/src/shared/components/span-detail/span-detail.component.test.ts
index 22b8fb71c..bc37289f8 100644
--- a/projects/observability/src/shared/components/span-detail/span-detail.component.test.ts
+++ b/projects/observability/src/shared/components/span-detail/span-detail.component.test.ts
@@ -18,8 +18,10 @@ describe('Span detail component', () => {
       apiName: 'My API Name',
       protocolName: 'My Protocol Name',
       requestHeaders: { header1: 'value1', header2: 'value2' },
+      requestCookies: { cookie1: 'value1', cookie2: 'value2' },
       requestBody: '[{"data": 5000}]',
       responseHeaders: { header1: 'value1', header2: 'value2' },
+      responseCookies: { cookie1: 'value1', cookie2: 'value2' },
       responseBody: '[{"data": 5000}]',
       tags: { tag1: 'value1', tag2: 'value2' },
       requestUrl: 'test-url',
@@ -43,8 +45,10 @@ describe('Span detail component', () => {
       apiName: 'My API Name',
       protocolName: 'My Protocol Name',
       requestHeaders: {},
+      requestCookies: {},
       requestBody: '',
       responseHeaders: { header1: 'value1', header2: 'value2' },
+      responseCookies: { cookie1: 'value1', cookie2: 'value2' },
       responseBody: '[{"data": 5000}]',
       tags: { tag1: 'value1', tag2: 'value2' },
       requestUrl: 'test-url',
@@ -69,8 +73,10 @@ describe('Span detail component', () => {
       apiName: 'My API Name',
       protocolName: 'My Protocol Name',
       requestHeaders: {},
+      requestCookies: {},
       requestBody: '[{"data": 5000}]',
       responseHeaders: { header1: 'value1', header2: 'value2' },
+      responseCookies: { cookie1: 'value1', cookie2: 'value2' },
       responseBody: '[{"data": 5000}]',
       tags: { tag1: 'value1', tag2: 'value2' },
       requestUrl: 'test-url',
@@ -94,8 +100,10 @@ describe('Span detail component', () => {
       apiName: 'My API Name',
       protocolName: 'My Protocol Name',
       requestHeaders: { header1: 'value1', header2: 'value2' },
+      requestCookies: { cookie1: 'value1', cookie2: 'value2' },
       requestBody: '[{"data": 5000}]',
       responseHeaders: {},
+      responseCookies: {},
       responseBody: '',
       tags: { tag1: 'value1', tag2: 'value2' },
       requestUrl: 'test-url',

From 6668b85a622f057b15e82da1023cd41a3832f50f Mon Sep 17 00:00:00 2001
From: SJ <shubham@traceable.ai>
Date: Fri, 5 Nov 2021 14:31:49 +0530
Subject: [PATCH 3/3] prettier

---
 .../request/span-request-detail.component.ts           | 10 ++--------
 .../response/span-response-detail.component.ts         | 10 ++--------
 2 files changed, 4 insertions(+), 16 deletions(-)

diff --git a/projects/observability/src/shared/components/span-detail/request/span-request-detail.component.ts b/projects/observability/src/shared/components/span-detail/request/span-request-detail.component.ts
index cdfd79fb7..2aff3b450 100644
--- a/projects/observability/src/shared/components/span-detail/request/span-request-detail.component.ts
+++ b/projects/observability/src/shared/components/span-detail/request/span-request-detail.component.ts
@@ -9,14 +9,8 @@ import { SpanDetailLayoutStyle } from '../span-detail-layout-style';
   template: `
     <div class="span-request-detail" [ngClass]="this.layout">
       <div class="section">
-        <ht-span-detail-call-headers
-          [data]="this.requestHeaders"
-          title="Headers"
-        ></ht-span-detail-call-headers>
-        <ht-span-detail-call-headers
-          [data]="this.requestCookies"
-          title="Cookies"
-        ></ht-span-detail-call-headers>
+        <ht-span-detail-call-headers [data]="this.requestHeaders" title="Headers"></ht-span-detail-call-headers>
+        <ht-span-detail-call-headers [data]="this.requestCookies" title="Cookies"></ht-span-detail-call-headers>
       </div>
       <div class="section">
         <ht-span-detail-call-body [body]="this.requestBody"></ht-span-detail-call-body>
diff --git a/projects/observability/src/shared/components/span-detail/response/span-response-detail.component.ts b/projects/observability/src/shared/components/span-detail/response/span-response-detail.component.ts
index a202ab747..edab80fd9 100644
--- a/projects/observability/src/shared/components/span-detail/response/span-response-detail.component.ts
+++ b/projects/observability/src/shared/components/span-detail/response/span-response-detail.component.ts
@@ -9,14 +9,8 @@ import { SpanDetailLayoutStyle } from '../span-detail-layout-style';
   template: `
     <div class="span-response-detail" [ngClass]="this.layout">
       <div class="section">
-        <ht-span-detail-call-headers
-          [data]="this.responseHeaders"
-          title="Headers"
-        ></ht-span-detail-call-headers>
-        <ht-span-detail-call-headers
-          [data]="this.responseCookies"
-          title="Cookies"
-        ></ht-span-detail-call-headers>
+        <ht-span-detail-call-headers [data]="this.responseHeaders" title="Headers"></ht-span-detail-call-headers>
+        <ht-span-detail-call-headers [data]="this.responseCookies" title="Cookies"></ht-span-detail-call-headers>
       </div>
       <div class="section">
         <ht-span-detail-call-body [body]="this.responseBody"></ht-span-detail-call-body>