feat: exporting field and active tab label change (#1309)

* feat: exporting field and active tab label change

* refactor: fixing lint errors

Author: anandtiwary

projects/observability/src/public-api.ts

@@ -97,6 +97,8 @@ export * from './shared/services/entity-breadcrumb/entity-breadcrumb.resolver';
 // Span Detail
 export { SpanData } from './shared/components/span-detail/span-data';
 export { SpanTitle } from './shared/components/span-detail/span-title';
+export { SpanDetailTab } from './shared/components/span-detail/span-detail-tab';
+
 export * from './shared/components/span-detail/span-detail.component';
 export * from './shared/components/span-detail/span-detail.module';
 export { SpanDetailLayoutStyle } from './shared/components/span-detail/span-detail-layout-style';

projects/observability/src/shared/components/span-detail/span-detail.component.ts

@@ -24,7 +24,11 @@ import { SpanDetailTab } from './span-detail-tab';
         <ng-content></ng-content>
       </div>
 
-      <ht-tab-group class="tabs-group" [activeTabLabel]="this.activeTabLabel">
+      <ht-tab-group
+        class="tabs-group"
+        [activeTabLabel]="this.activeTabLabel"
+        (activeTabLabelChange)="this.onActiveTabLabelChange($event)"
+      >
         <ht-tab label="${SpanDetailTab.Request}" *ngIf="this.showRequestTab">
           <ht-span-request-detail
             class="request"
@@ -69,6 +73,9 @@ export class SpanDetailComponent implements OnChanges {
   @Input()
   public activeTabLabel?: SpanDetailTab;
 
+  @Output()
+  private readonly activeTabLabelChange: EventEmitter<SpanDetailTab> = new EventEmitter<SpanDetailTab>();
+
   @Output()
   public readonly closed: EventEmitter<void> = new EventEmitter<void>();
 
@@ -93,4 +100,9 @@ export class SpanDetailComponent implements OnChanges {
       this.totalLogEvents = (this.spanData?.logEvents ?? []).length;
     }
   }
+
+  public onActiveTabLabelChange(tabLabel: SpanDetailTab): void {
+    this.activeTabLabel = tabLabel;
+    this.activeTabLabelChange.emit(tabLabel);
+  }
 }