Merge branch 'main' into open-in-new-tab-support-sheet

Author: arjunlalb

package-lock.json

@@ -94,7 +94,7 @@
     "@types/jest": "^27.4.1",
     "@types/lodash-es": "^4.17.6",
     "@types/mixpanel-browser": "^2.38.0",
-    "@types/node": "^17.0.21",
+    "@types/node": "^17.0.23",
     "@types/uuid": "^8.3.4",
     "@types/webpack-env": "^1.16.3",
     "codelyzer": "^6.0.2",
@@ -107,7 +107,7 @@
     "jest-junit": "^13.0.0",
     "jest-preset-angular": "^8.4.0",
     "lodash": "^4.17.21",
-    "ng-mocks": "^13.2.0",
+    "ng-mocks": "^13.3.0",
     "ng-packagr": "^12.2.5",
     "prettier": "^2.2.1",
     "pretty-quick": "^3.1.3",

package.json

@@ -97,6 +97,7 @@ export const enum IconType {
   Refresh = 'refresh',
   Remove = 'remove',
   RemoveCircle = 'remove_circle',
+  Restore = 'restore',
   Search = 'svg:search',
   Settings = 'settings',
   Share = 'share',

projects/assets-library/src/icons/icon-type.ts

@@ -1,11 +1,20 @@
 import { Pipe, PipeTransform } from '@angular/core';
+import { TimeDuration, TimeUnit, UnitStringType } from './../../../public-api';
 import { durationFormatter } from './duration-formatter';
 
 @Pipe({
   name: 'htDisplayDuration'
 })
 export class DisplayDurationPipe implements PipeTransform {
-  public transform(millis?: number): string {
-    return durationFormatter(millis);
+  public transform(millis?: number, unitStringType: UnitStringType = UnitStringType.Short): string {
+    if (millis === undefined) {
+      return '-';
+    }
+
+    if (unitStringType === UnitStringType.Short) {
+      return durationFormatter(millis);
+    }
+
+    return new TimeDuration(millis, TimeUnit.Millisecond).toMultiUnitString(TimeUnit.Second, true, UnitStringType.Long);
   }
 }

projects/common/src/utilities/formatters/duration/display-duration.pipe.ts

@@ -2,6 +2,7 @@ import { Pipe, PipeTransform } from '@angular/core';
 import { isArray } from 'lodash-es';
 import { assertUnreachable } from '../../lang/lang-utils';
 
+// TODO: Currently htHighlight does not escape reserved regex characters
 @Pipe({ name: 'htHighlight' })
 export class HighlightPipe implements PipeTransform {
   public transform(fullText: string, highlightSnippets: TextHighlightConfig | TextHighlightConfig[]): string {

projects/common/src/utilities/formatters/string/highlight.pipe.ts

@@ -341,7 +341,7 @@ export class SelectComponent<V> implements ControlValueAccessor, AfterContentIni
       return undefined;
     }
 
-    return this.items.find(item => item.value === value);
+    return this.items.find(item => isEqual(item.value, value));
   }
 
   public getStyleClassesForSelectItem(size: SelectSize, item: SelectOptionComponent<V>): string[] {

projects/components/src/select/select.component.ts

@@ -0,0 +1,8 @@
+@import 'font';
+
+.duration-cell {
+  .duration-text {
+    @include ellipsis-overflow();
+    @include body-1-regular();
+  }
+}

projects/components/src/table/cells/data-renderers/duration/duration-table-cell-renderer.component.scss

@@ -0,0 +1,31 @@
+import { DisplayDurationPipe } from '@hypertrace/common';
+import { createComponentFactory } from '@ngneat/spectator/jest';
+import { MockPipe } from 'ng-mocks';
+import { TableCellNoOpParser } from '../../data-parsers/table-cell-no-op-parser';
+import { tableCellProviders } from '../../test/cell-providers';
+import { DurationTableCellRendererComponent } from './duration-table-cell-renderer.component';
+
+describe('Duration table cell renderer component', () => {
+  const buildComponent = createComponentFactory({
+    component: DurationTableCellRendererComponent,
+    providers: [
+      tableCellProviders(
+        {
+          id: 'test'
+        },
+        new TableCellNoOpParser(undefined!),
+        0,
+        14400000
+      )
+    ],
+    declarations: [MockPipe(DisplayDurationPipe)],
+    shallow: true
+  });
+
+  test('Should render duration text', () => {
+    const spectator = buildComponent();
+
+    expect(spectator.query('.duration-cell')).toExist();
+    expect(spectator.query('.duration-text')).toExist();
+  });
+});

projects/components/src/table/cells/data-renderers/duration/duration-table-cell-renderer.component.test.ts

@@ -0,0 +1,45 @@
+import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
+import { UnitStringType } from '@hypertrace/common';
+import { TableColumnConfig, TableRow } from '../../../table-api';
+import {
+  TABLE_CELL_DATA,
+  TABLE_COLUMN_CONFIG,
+  TABLE_COLUMN_INDEX,
+  TABLE_DATA_PARSER,
+  TABLE_ROW_DATA
+} from '../../table-cell-injection';
+import { TableCellParserBase } from '../../table-cell-parser-base';
+import { TableCellRenderer } from '../../table-cell-renderer';
+import { TableCellRendererBase } from '../../table-cell-renderer-base';
+import { CoreTableCellParserType } from '../../types/core-table-cell-parser-type';
+import { CoreTableCellRendererType } from '../../types/core-table-cell-renderer-type';
+import { TableCellAlignmentType } from '../../types/table-cell-alignment-type';
+
+@Component({
+  selector: 'ht-duration-table-cell-renderer',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div class="duration-cell">
+      <span class="duration-text">{{ this.value | htDisplayDuration: this.formatter }}</span>
+    </div>
+  `,
+  styleUrls: ['./duration-table-cell-renderer.component.scss']
+})
+@TableCellRenderer({
+  type: CoreTableCellRendererType.Duration,
+  alignment: TableCellAlignmentType.Left,
+  parser: CoreTableCellParserType.NoOp
+})
+export class DurationTableCellRendererComponent extends TableCellRendererBase<number> {
+  public readonly formatter: UnitStringType = UnitStringType.Long;
+
+  public constructor(
+    @Inject(TABLE_COLUMN_CONFIG) columnConfig: TableColumnConfig,
+    @Inject(TABLE_COLUMN_INDEX) index: number,
+    @Inject(TABLE_DATA_PARSER) parser: TableCellParserBase<number, number, unknown>,
+    @Inject(TABLE_CELL_DATA) cellData: number,
+    @Inject(TABLE_ROW_DATA) rowData: TableRow
+  ) {
+    super(columnConfig, index, parser, cellData, rowData);
+  }
+}

projects/components/src/table/cells/data-renderers/duration/duration-table-cell-renderer.component.ts

@@ -6,7 +6,7 @@ import {
   TooltipDirective
 } from '@hypertrace/components';
 import { createComponentFactory } from '@ngneat/spectator/jest';
-import { MockComponent, MockPipe } from 'ng-mocks';
+import { MockDirective, MockPipe } from 'ng-mocks';
 import { tableCellDataProvider } from '../../test/cell-providers';
 import {
   RelativeTimestampTableCellRendererComponent,
@@ -24,7 +24,7 @@ describe('relative timestamp table cell renderer component', () => {
         new TableCellNoOpParser(undefined!)
       )
     ],
-    declarations: [MockComponent(TooltipDirective), MockPipe(DisplayDatePipe)],
+    declarations: [MockDirective(TooltipDirective), MockPipe(DisplayDatePipe)],
     shallow: true
   });