From 9cdc369ebb0072bdcd6619d26f416f0b410cd0d6 Mon Sep 17 00:00:00 2001
From: Sandeep Kumar Sharma <sandeep.sharma@traceable.ai>
Date: Tue, 8 Jun 2021 18:43:11 +0530
Subject: [PATCH 1/2] feat: support for label tag in the tabs

---
 .../components/src/link/link.component.scss   |  2 ++
 .../src/tabs/content/tab-group.component.scss | 17 ++--------------
 .../src/tabs/content/tab-group.component.ts   | 20 ++++++++++++++++---
 .../components/src/tabs/content/tab.module.ts |  3 ++-
 .../src/tabs/content/tab/tab.component.ts     |  2 +-
 .../navigable-tab-group.component.scss        |  4 ++++
 .../navigable-tab-group.component.ts          | 18 ++++++++++++++++-
 .../tabs/navigable/navigable-tab.component.ts |  3 +++
 .../tabs/navigable/navigable-tab.module.ts    |  4 +++-
 .../src/tabs/navigable/navigable-tab.ts       |  1 +
 10 files changed, 52 insertions(+), 22 deletions(-)

diff --git a/projects/components/src/link/link.component.scss b/projects/components/src/link/link.component.scss
index 5e8e80960..dfc9c918f 100644
--- a/projects/components/src/link/link.component.scss
+++ b/projects/components/src/link/link.component.scss
@@ -2,6 +2,8 @@
 @import 'color-palette';
 
 .ht-link {
+  display: flex;
+  align-items: center;
   text-decoration-line: none;
   text-decoration: none;
   color: inherit;
diff --git a/projects/components/src/tabs/content/tab-group.component.scss b/projects/components/src/tabs/content/tab-group.component.scss
index 39911206f..f44e838d2 100644
--- a/projects/components/src/tabs/content/tab-group.component.scss
+++ b/projects/components/src/tabs/content/tab-group.component.scss
@@ -78,21 +78,8 @@
   flex-direction: row;
   align-items: center;
 
-  .tab-badge {
-    @include font-label($gray-5);
-    display: flex;
-    justify-content: center;
-    text-align: center;
-    margin-left: 6px;
-    padding: 0 6px;
-    height: 16px;
-    background-color: $gray-2;
-    border-radius: 8px;
-
-    &.active {
-      background-color: $gray-9;
-      color: white;
-    }
+  .tab-label-tag {
+    margin-left: 4px;
   }
 }
 
diff --git a/projects/components/src/tabs/content/tab-group.component.ts b/projects/components/src/tabs/content/tab-group.component.ts
index 20aa560aa..0688b413a 100644
--- a/projects/components/src/tabs/content/tab-group.component.ts
+++ b/projects/components/src/tabs/content/tab-group.component.ts
@@ -1,4 +1,5 @@
 import { ChangeDetectionStrategy, Component, ContentChildren, QueryList } from '@angular/core';
+import { Color } from '@hypertrace/common';
 import { TabComponent } from './tab/tab.component';
 
 @Component({
@@ -12,9 +13,14 @@ import { TabComponent } from './tab/tab.component';
           <ng-template mat-tab-label>
             <div class="tab-label">
               {{ tab.label }}
-              <div *ngIf="tab.badge" [ngClass]="{ active: activeTabIndex === i }" class="tab-badge">
-                {{ tab.badge }}
-              </div>
+              <ng-container *ngIf="tab.labelTag">
+                <ht-label-tag
+                  class="tab-label-tag"
+                  [label]="tab.labelTag"
+                  [backgroundColor]="this.getBackgroundColor(i)"
+                  [labelColor]="this.getLabelColor(i)"
+                ></ht-label-tag>
+              </ng-container>
             </div>
             <div class="ink-bar" [ngClass]="{ active: activeTabIndex === i }"></div>
           </ng-template>
@@ -31,4 +37,12 @@ export class TabGroupComponent {
   public tabs!: QueryList<TabComponent>;
 
   public activeTabIndex: number = 0;
+
+  public getBackgroundColor(index: number): Color {
+    return this.activeTabIndex === index ? Color.Gray9 : Color.Gray2;
+  }
+
+  public getLabelColor(index: number): Color {
+    return this.activeTabIndex === index ? Color.White : Color.Gray5;
+  }
 }
diff --git a/projects/components/src/tabs/content/tab.module.ts b/projects/components/src/tabs/content/tab.module.ts
index 76244fbd2..97aa30cad 100644
--- a/projects/components/src/tabs/content/tab.module.ts
+++ b/projects/components/src/tabs/content/tab.module.ts
@@ -2,12 +2,13 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { MatTabsModule } from '@angular/material/tabs';
 import { RouterModule } from '@angular/router';
+import { LabelTagModule } from '../../label-tag/label-tag.module';
 import { TabGroupComponent } from './tab-group.component';
 import { TabComponent } from './tab/tab.component';
 
 @NgModule({
   declarations: [TabGroupComponent, TabComponent],
   exports: [TabGroupComponent, TabComponent],
-  imports: [MatTabsModule, CommonModule, RouterModule]
+  imports: [MatTabsModule, CommonModule, RouterModule, LabelTagModule]
 })
 export class TabModule {}
diff --git a/projects/components/src/tabs/content/tab/tab.component.ts b/projects/components/src/tabs/content/tab/tab.component.ts
index 390d8a70a..f1234c676 100644
--- a/projects/components/src/tabs/content/tab/tab.component.ts
+++ b/projects/components/src/tabs/content/tab/tab.component.ts
@@ -12,5 +12,5 @@ export class TabComponent extends ContentHolder {
   public label!: string;
 
   @Input()
-  public badge?: string;
+  public labelTag?: string;
 }
diff --git a/projects/components/src/tabs/navigable/navigable-tab-group.component.scss b/projects/components/src/tabs/navigable/navigable-tab-group.component.scss
index 87f597cb5..1ce9dc2d5 100644
--- a/projects/components/src/tabs/navigable/navigable-tab-group.component.scss
+++ b/projects/components/src/tabs/navigable/navigable-tab-group.component.scss
@@ -73,6 +73,10 @@
   padding-bottom: 6px;
 }
 
+.tab-label-tag {
+  margin-left: 4px;
+}
+
 .ink-bar {
   height: 2px; // plus tab-link is 48
   border-radius: 1px;
diff --git a/projects/components/src/tabs/navigable/navigable-tab-group.component.ts b/projects/components/src/tabs/navigable/navigable-tab-group.component.ts
index 2af298f24..5230ff0cd 100644
--- a/projects/components/src/tabs/navigable/navigable-tab-group.component.ts
+++ b/projects/components/src/tabs/navigable/navigable-tab-group.component.ts
@@ -1,6 +1,6 @@
 import { AfterContentInit, ChangeDetectionStrategy, Component, ContentChildren, QueryList } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { FeatureState, NavigationParams, NavigationParamsType, NavigationService } from '@hypertrace/common';
+import { Color, FeatureState, NavigationParams, NavigationParamsType, NavigationService } from '@hypertrace/common';
 import { merge, Observable } from 'rxjs';
 import { map, startWith } from 'rxjs/operators';
 import { NavigableTabComponent } from './navigable-tab.component';
@@ -22,6 +22,14 @@ import { NavigableTabComponent } from './navigable-tab.component';
                 class="tab-link"
               >
                 <ng-container *ngTemplateOutlet="tab.content"></ng-container>
+                <ng-container *ngIf="tab.labelTag">
+                  <ht-label-tag
+                    class="tab-label-tag"
+                    [label]="tab.labelTag"
+                    [backgroundColor]="this.getBackgroundColor(activeTab, tab)"
+                    [labelColor]="this.getLabelColor(activeTab, tab)"
+                  ></ht-label-tag>
+                </ng-container>
                 <span *ngIf="featureState === '${FeatureState.Preview}'" class="soon-container">
                   <span class="soon">SOON</span>
                 </span>
@@ -60,6 +68,14 @@ export class NavigableTabGroupComponent implements AfterContentInit {
     replaceCurrentHistory: tab.replaceHistory
   });
 
+  public getBackgroundColor(activeTab: NavigableTabComponent | undefined, tab: NavigableTabComponent): Color {
+    return activeTab === tab ? Color.Gray9 : Color.Gray2;
+  }
+
+  public getLabelColor(activeTab: NavigableTabComponent | undefined, tab: NavigableTabComponent): Color {
+    return activeTab === tab ? Color.White : Color.Gray5;
+  }
+
   private findActiveTab(): NavigableTabComponent | undefined {
     return this.tabs.find(tab => this.navigationService.isRelativePathActive([tab.path], this.activatedRoute));
   }
diff --git a/projects/components/src/tabs/navigable/navigable-tab.component.ts b/projects/components/src/tabs/navigable/navigable-tab.component.ts
index 8c5e15b31..708ef4c53 100644
--- a/projects/components/src/tabs/navigable/navigable-tab.component.ts
+++ b/projects/components/src/tabs/navigable/navigable-tab.component.ts
@@ -18,6 +18,9 @@ export class NavigableTabComponent extends ContentHolder {
   @Input()
   public hidden: boolean = false;
 
+  @Input()
+  public labelTag?: string;
+
   @Input()
   public replaceHistory?: boolean;
 
diff --git a/projects/components/src/tabs/navigable/navigable-tab.module.ts b/projects/components/src/tabs/navigable/navigable-tab.module.ts
index 05f1a8b92..a212f50fa 100644
--- a/projects/components/src/tabs/navigable/navigable-tab.module.ts
+++ b/projects/components/src/tabs/navigable/navigable-tab.module.ts
@@ -4,6 +4,7 @@ import { MatTabsModule } from '@angular/material/tabs';
 import { RouterModule } from '@angular/router';
 import { MemoizeModule } from '@hypertrace/common';
 import { FeatureConfigCheckModule } from '../../feature-check/feature-config-check.module';
+import { LabelTagModule } from '../../label-tag/label-tag.module';
 import { LetAsyncModule } from '../../let-async/let-async.module';
 import { LinkModule } from '../../link/link.module';
 import { NavigableTabGroupComponent } from './navigable-tab-group.component';
@@ -19,7 +20,8 @@ import { NavigableTabComponent } from './navigable-tab.component';
     LetAsyncModule,
     FeatureConfigCheckModule,
     MemoizeModule,
-    LinkModule
+    LinkModule,
+    LabelTagModule
   ]
 })
 export class NavigableTabModule {}
diff --git a/projects/components/src/tabs/navigable/navigable-tab.ts b/projects/components/src/tabs/navigable/navigable-tab.ts
index 8c0ff18e9..97815e275 100644
--- a/projects/components/src/tabs/navigable/navigable-tab.ts
+++ b/projects/components/src/tabs/navigable/navigable-tab.ts
@@ -1,6 +1,7 @@
 export interface NavigableTab {
   path: string;
   label: string;
+  labelTag?: string;
   hidden?: boolean;
   features?: string[];
   replaceHistory?: boolean;

From 0f2ac1e0bf450d9378424ed45a33aac485faa8d1 Mon Sep 17 00:00:00 2001
From: Sandeep Kumar Sharma <sandeep.sharma@traceable.ai>
Date: Tue, 8 Jun 2021 18:59:34 +0530
Subject: [PATCH 2/2] fix: build error

---
 .../src/shared/components/span-detail/span-detail.component.ts  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/distributed-tracing/src/shared/components/span-detail/span-detail.component.ts b/projects/distributed-tracing/src/shared/components/span-detail/span-detail.component.ts
index 9f54a2901..810388f57 100644
--- a/projects/distributed-tracing/src/shared/components/span-detail/span-detail.component.ts
+++ b/projects/distributed-tracing/src/shared/components/span-detail/span-detail.component.ts
@@ -46,7 +46,7 @@ import { SpanDetailLayoutStyle } from './span-detail-layout-style';
         <ht-tab label="Exit Calls" *ngIf="this.showExitCallsTab">
           <ht-span-exit-calls [exitCalls]="this.spanData.exitCallsBreakup"></ht-span-exit-calls>
         </ht-tab>
-        <ht-tab *ngIf="this.showLogEventstab" label="Logs" [badge]="this.totalLogEvents">
+        <ht-tab *ngIf="this.showLogEventstab" label="Logs" [labelTag]="this.totalLogEvents">
           <ht-log-events-table
             [logEvents]="this.spanData?.logEvents"
             [spanStartTime]="this.spanData?.startTime"