hypertrace · itssharmasandeep · Jun 8, 2021 · Jun 8, 2021 · Jun 8, 2021
@@ -2,6 +2,8 @@
 @import 'color-palette';
 
 .ht-link {
+  display: flex;
+  align-items: center;
   text-decoration-line: none;
   text-decoration: none;
   color: inherit;

@@ -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;
   }
 }
 

@@ -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;
+  }
 }
@@ -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 {}
@@ -12,5 +12,5 @@ export class TabComponent extends ContentHolder {
   public label!: string;
 
   @Input()
-  public badge?: string;
+  public labelTag?: string;
 }
@@ -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;

@@ -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));
   }

@@ -18,6 +18,9 @@ export class NavigableTabComponent extends ContentHolder {
   @Input()
   public hidden: boolean = false;
 
+  @Input()
+  public labelTag?: string;
+
   @Input()
   public replaceHistory?: boolean;
 

@@ -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 {}
@@ -1,6 +1,7 @@
 export interface NavigableTab {
   path: string;
   label: string;
+  labelTag?: string;
   hidden?: boolean;
   features?: string[];
   replaceHistory?: boolean;

@@ -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"
-Original file line number
+Diff line change
@@ Expand Up / @@ -18,6 +18,9 @@ export class NavigableTabComponent extends ContentHolder { @@
       @Input()
       public hidden: boolean = false;
+      @Input()
+      public labelTag?: string;
       @Input()
       public replaceHistory?: boolean;
@@ Expand Down @@