Merge remote-tracking branch origin/main into log-marker

itssharmasandeep · itssharmasandeep · commit 1bf2d3bc8a88 · 2021-06-08T22:23:22.000+05:30
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -40,7 +40,7 @@
     "@hypertrace/hyperdash-angular": "^2.5.0",
     "@types/d3-hierarchy": "^2.0.0",
     "@types/d3-transition": "1.1.5",
-    "apollo-angular": "^2.4.0",
+    "apollo-angular": "^2.6.0",
     "core-js": "^3.12.1",
     "d3-array": "^2.12.0",
     "d3-axis": "^2.1.0",
@@ -97,7 +97,7 @@
     "cz-conventional-changelog": "^3.3.0",
     "husky": "^4.3.8",
     "jest": "^26.6.3",
-    "jest-config": "^26.6.3",
+    "jest-config": "^27.0.4",
     "jest-html-reporter": "^3.4.1",
     "jest-junit": "^12.1.0",
     "jest-preset-angular": "^8.4.0",
diff --git a/projects/common/src/color/color.ts b/projects/common/src/color/color.ts
@@ -5,12 +5,17 @@ export const enum Color {
   Blue5 = '#0053d7',
   Blue7 = '#003385',
   BlueGray4 = '#4b5f77',
+  Cloud1 = '#edf4f9',
+  Cloud2 = '#c7ddec',
+  Cloud3 = '#a1c5e0',
   Gray1 = '#f4f5f5',
   Gray2 = '#e1e4e5',
   Gray3 = '#b7bfc2',
   Gray4 = '#889499',
   Gray5 = '#657277',
+  Gray6 = '#40474a',
   Gray7 = '#272c2e',
+  Gray8 = '#171a1c',
   Gray9 = '#080909',
   Green2 = '#c3f3db',
   Green3 = '#95eabe',
@@ -26,9 +31,21 @@ export const enum Color {
   Red1 = '#fff3f1',
   Red2 = '#fecac2',
   Red3 = '#FEA395',
+  Red4 = '#fd7c68',
   Red5 = '#FD5138',
   Red6 = '#F72202',
+  Red7 = '#bb1902',
+  Red8 = '#6a0e01',
+  Red9 = '#140300',
   Brown1 = '#9e4c41',
   White = '#FFFFFF',
-  Yellow4 = '#FFE566'
+  Yellow1 = '#fffbeb',
+  Yellow2 = '#fff4c2',
+  Yellow3 = '#ffed94',
+  Yellow4 = '#FFE566',
+  Yellow5 = '#ffdd3a',
+  Yellow6 = '#facf00',
+  Yellow7 = '#bd9d00',
+  Yellow8 = '#6d5b00',
+  Yellow9 = '#181400'
 }
diff --git a/projects/components/src/combo-box/combo-box.component.scss b/projects/components/src/combo-box/combo-box.component.scss
@@ -113,6 +113,7 @@
   }
 
   .popover-item {
+    @include body-1-regular($gray-7);
     height: 36px;
     padding: 2px 12px;
     cursor: pointer;
diff --git a/projects/components/src/confirmation/confirmation-modal.component.scss b/projects/components/src/confirmation/confirmation-modal.component.scss
@@ -14,7 +14,7 @@
   .description {
     @include body-1-regular($gray-7);
     text-align: center;
-    word-break: break-all;
+    word-break: break-word;
   }
 
   .controls {
diff --git a/projects/components/src/form-field/form-field.component.scss b/projects/components/src/form-field/form-field.component.scss
@@ -1,8 +1,6 @@
 @import 'mixins';
 
 .form-field {
-  padding-top: 8px;
-
   &.optional {
     margin-bottom: 18px;
   }
diff --git a/projects/components/src/form-field/form-field.component.ts b/projects/components/src/form-field/form-field.component.ts
@@ -7,8 +7,8 @@ import { IconSize } from '../icon/icon-size';
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <section class="form-field" [ngClass]="{ optional: this.isOptional }">
-      <div class="info-label">
-        <ht-label *ngIf="this.label" class="label" [label]="this.label"></ht-label>
+      <div *ngIf="this.label" class="info-label">
+        <ht-label class="label" [label]="this.label"></ht-label>
         <ht-label *ngIf="this.isOptional" class="optional-label" label="(Optional)"></ht-label>
         <ht-icon
           *ngIf="this.icon"
diff --git a/projects/components/src/input/input.component.scss b/projects/components/src/input/input.component.scss
@@ -1,3 +1,4 @@
+@import 'mixins';
 @import 'color-palette';
 
 :host {
@@ -31,6 +32,7 @@
         padding-bottom: 0;
 
         .mat-form-field-label {
+          @include body-1-regular($gray-7);
           padding: 0 0 0 8px;
           line-height: initial;
           color: $gray-5;
diff --git 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/radio/radio-group.component.scss b/projects/components/src/radio/radio-group.component.scss
@@ -58,6 +58,20 @@
     .radio-button-label {
       @include body-2-regular($gray-7);
     }
+
+    &.disabled {
+      &.mat-radio-checked .mat-radio-container .mat-radio-outer-circle {
+        background: $gray-3;
+      }
+
+      .mat-radio-container .mat-radio-outer-circle {
+        background: $gray-1;
+      }
+
+      .radio-button-label {
+        color: $gray-5;
+      }
+    }
   }
 
   .radio-button:last-child {
diff --git a/projects/components/src/radio/radio-group.component.ts b/projects/components/src/radio/radio-group.component.ts
@@ -15,7 +15,12 @@ import { RadioOption } from './radio-option';
       (change)="this.onRadioChange($event)"
       [disabled]="this.disabled"
     >
-      <mat-radio-button *ngFor="let option of options" class="radio-button" [value]="option.value">
+      <mat-radio-button
+        *ngFor="let option of options"
+        class="radio-button"
+        [ngClass]="{ disabled: this.disabled }"
+        [value]="option.value"
+      >
         <ht-label class="radio-button-label" [label]="option.label"></ht-label>
       </mat-radio-button>
     </mat-radio-group>
diff --git 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
@@ -10,6 +10,7 @@ import {
   QueryList
 } from '@angular/core';
 import { isEmpty } from 'lodash-es';
+import { Color } from '@hypertrace/common';
 import { TabComponent } from './tab/tab.component';
 
 @Component({
@@ -28,9 +29,14 @@ import { TabComponent } from './tab/tab.component';
           <ng-template mat-tab-label>
             <div class="tab-label">
               {{ tab.label }}
-              <div *ngIf="tab.badge" [ngClass]="{ active: this.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: this.activeTabIndex === i }"></div>
           </ng-template>
@@ -76,4 +82,12 @@ export class TabGroupComponent implements OnChanges, AfterViewInit {
       });
     }
   }
+
+  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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,6 +1,7 @@
 export interface NavigableTab {
   path: string;
   label: string;
+  labelTag?: string;
   hidden?: boolean;
   features?: string[];
   replaceHistory?: boolean;
diff --git a/projects/components/src/textarea/textarea.component.scss b/projects/components/src/textarea/textarea.component.scss
@@ -40,6 +40,7 @@
       padding-bottom: 0;
 
       .mat-form-field-label {
+        @include body-1-regular($gray-7);
         padding: 0 0 0 8px;
         line-height: initial;
         color: $gray-5;
diff --git a/projects/components/src/toggle-switch/toggle-switch.component.scss b/projects/components/src/toggle-switch/toggle-switch.component.scss
@@ -4,7 +4,17 @@
 :host {
   ::ng-deep {
     .mat-slide-toggle {
-      &.small-slide-toogle {
+      &.disabled {
+        .mat-slide-toggle-thumb {
+          background: $gray-7;
+        }
+
+        .mat-slide-toggle-bar {
+          background: $gray-3;
+        }
+      }
+
+      &.small-slide-toggle {
         height: 20px;
         line-height: 20px;
 
diff --git a/projects/components/src/toggle-switch/toggle-switch.component.test.ts b/projects/components/src/toggle-switch/toggle-switch.component.test.ts
@@ -36,7 +36,7 @@ describe('Toggle Switch Component', () => {
     expect(matToggleComponent?.checked).toBeTruthy();
     expect(matToggleComponent?.disabled).toBeFalsy();
     expect(spectator.query('.label')).toHaveText('label');
-    expect(spectator.query('mat-slide-toggle')).toHaveClass('small-slide-toogle');
+    expect(spectator.query('mat-slide-toggle')).toHaveClass('small-slide-toggle');
 
     spectator.triggerEventHandler(MatSlideToggle, 'change', new MatSlideToggleChange(matToggleComponent!, false));
     expect(onCheckedChangeSpy).toHaveBeenCalledWith(false);
diff --git a/projects/components/src/toggle-switch/toggle-switch.component.ts b/projects/components/src/toggle-switch/toggle-switch.component.ts
@@ -10,7 +10,7 @@ import { ToggleSwitchSize } from './toggle-switch-size';
     <mat-slide-toggle
       color="primary"
       [(ngModel)]="this.checked"
-      [ngClass]="{ 'small-slide-toogle': this.size === '${ToggleSwitchSize.Small}' }"
+      [ngClass]="{ 'small-slide-toggle': this.size === '${ToggleSwitchSize.Small}', disabled: this.disabled }"
       [disabled]="this.disabled"
       (change)="this.onToggle($event)"
     >
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
@@ -47,7 +47,7 @@ import { SpanDetailTab } from './span-detail-tab';
         <ht-tab label="${SpanDetailTab.ExitCalls}" *ngIf="this.showExitCallsTab">
           <ht-span-exit-calls [exitCalls]="this.spanData.exitCallsBreakup"></ht-span-exit-calls>
         </ht-tab>
-        <ht-tab *ngIf="this.showLogEventsTab" label="${SpanDetailTab.Logs}" [badge]="this.totalLogEvents">
+        <ht-tab *ngIf="this.showLogEventstab" label="${SpanDetailTab.Logs}" [labelTag]="this.totalLogEvents">
           <ht-log-events-table
             [logEvents]="this.spanData?.logEvents"
             [spanStartTime]="this.spanData?.startTime"
diff --git a/projects/observability/src/shared/components/cartesian/cartesian-chart.component.test.ts b/projects/observability/src/shared/components/cartesian/cartesian-chart.component.test.ts
diff --git a/projects/observability/src/shared/components/cartesian/cartesian-chart.component.ts b/projects/observability/src/shared/components/cartesian/cartesian-chart.component.ts
diff --git a/projects/observability/src/shared/components/cartesian/chart.ts b/projects/observability/src/shared/components/cartesian/chart.ts
diff --git a/projects/observability/src/shared/components/cartesian/d3/data/series/cartesian-column.ts b/projects/observability/src/shared/components/cartesian/d3/data/series/cartesian-column.ts

Original file line number	Diff line number	Diff line change
`@@ -113,6 +113,7 @@`
`113`	`113`	`}`
`114`	`114`
`115`	`115`	`.popover-item {`
	`116`	`+ @include body-1-regular($gray-7);`
`116`	`117`	`height: 36px;`
`117`	`118`	`padding: 2px 12px;`
`118`	`119`	`cursor: pointer;`
Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,7 @@`
`14`	`14`	`.description {`
`15`	`15`	`@include body-1-regular($gray-7);`
`16`	`16`	`text-align: center;`
`17`		`- word-break: break-all;`
	`17`	`+ word-break: break-word;`
`18`	`18`	`}`
`19`	`19`
`20`	`20`	`.controls {`
Original file line number	Diff line number	Diff line change
`@@ -1,8 +1,6 @@`
`1`	`1`	`@import 'mixins';`
`2`	`2`
`3`	`3`	`.form-field {`
`4`		`- padding-top: 8px;`
`5`		`-`
`6`	`4`	`&.optional {`
`7`	`5`	`margin-bottom: 18px;`
`8`	`6`	`}`