Merge branch 'list-view-changes' of github.com:hypertrace/hypertrace-ui into list-view-changes

Author: anandtiwary

package-lock.json

@@ -43,7 +43,7 @@
     "@types/d3-hierarchy": "^2.0.2",
     "@types/d3-transition": "1.1.5",
     "apollo-angular": "^2.6.0",
-    "core-js": "^3.19.1",
+    "core-js": "^3.19.3",
     "d3-array": "^2.12.0",
     "d3-axis": "^2.1.0",
     "d3-brush": "^1.1.6",
@@ -76,7 +76,7 @@
     "@angular/compiler-cli": "~12.2.1",
     "@angular/language-service": "~12.2.1",
     "@commitlint/cli": "^15.0.0",
-    "@commitlint/config-conventional": "^14.1.0",
+    "@commitlint/config-conventional": "^15.0.0",
     "@compodoc/compodoc": "^1.1.15",
     "@ngneat/spectator": "^8.3.1",
     "@types/d3-array": "^2.9.0",
@@ -101,7 +101,7 @@
     "cz-conventional-changelog": "^3.3.0",
     "husky": "^7.0.4",
     "jest": "^26.6.3",
-    "jest-config": "^27.4.0",
+    "jest-config": "^27.4.3",
     "jest-html-reporter": "^3.4.1",
     "jest-junit": "^13.0.0",
     "jest-preset-angular": "^8.4.0",

package.json

@@ -153,7 +153,7 @@ import { TableColumnConfigExtended, TableService } from './table.service';
             selectable: this.supportsRowSelection()
           }"
           class="data-row"
-          [style.height]="this.rowHeight"
+          [style.minHeight]="this.rowHeight"
         ></cdk-row>
 
         <!-- Expandable Detail Rows -->

projects/components/src/table/table.component.ts

@@ -19,5 +19,6 @@ export * from './widgets/interactive-data-widget-renderer';
 export * from './widgets/header/widget-header.model';
 export * from './widgets/container/container-widget.model';
 export * from './widgets/link/link-widget.model';
+export * from './widgets/text/text-widget-types';
 
 export * from './dashboard.module';

projects/dashboards/src/public-api.ts

@@ -4,10 +4,15 @@
 .text-widget {
   @include ellipsis-overflow();
 
-  .primary-text {
+  .title {
     @include header-3();
   }
 
+  .section-title {
+    @include subtitle-1($gray-7);
+    text-transform: capitalize;
+  }
+
   .secondary-text {
     @include body-small($gray-4);
     padding-left: 4px;

projects/dashboards/src/widgets/text/text-widget-renderer.component.scss

@@ -11,7 +11,7 @@ import { TextWidgetModel } from './text-widget.model';
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <div class="text-widget">
-      <span class="primary-text">{{ this.model.text }}</span>
+      <span class="primary-text" [ngClass]="this.model.primaryTextStyle">{{ this.model.text }}</span>
       <span class="secondary-text">{{ this.model.secondaryText }}</span>
     </div>
   `

projects/dashboards/src/widgets/text/text-widget-renderer.component.ts

@@ -0,0 +1,4 @@
+export const enum PrimaryTextStyle {
+  Title = 'title',
+  SectionTitle = 'section-title'
+}

projects/dashboards/src/widgets/text/text-widget-types.ts

@@ -1,4 +1,6 @@
 import { Model, ModelProperty, STRING_PROPERTY } from '@hypertrace/hyperdash';
+import { EnumPropertyTypeInstance, ENUM_TYPE } from '../../properties/enums/enum-property-type';
+import { PrimaryTextStyle } from './text-widget-types';
 
 @Model({
   type: 'text-widget'
@@ -17,4 +19,15 @@ export class TextWidgetModel {
     required: false
   })
   public secondaryText?: string;
+
+  @ModelProperty({
+    key: 'primary-text-style',
+    required: false,
+    // tslint:disable-next-line: no-object-literal-type-assertion
+    type: {
+      key: ENUM_TYPE.type,
+      values: [PrimaryTextStyle.Title, PrimaryTextStyle.SectionTitle]
+    } as EnumPropertyTypeInstance
+  })
+  public primaryTextStyle?: string = PrimaryTextStyle.Title;
 }

projects/dashboards/src/widgets/text/text-widget.model.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/public-api.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);
+  }
 }