feat(core-cell-renderer): added duration cell renderer

projects/common/src/utilities/formatters/duration/display-duration.pipe.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/string/highlight.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/components/src/table/cells/data-renderers/duration/duration-table-cell-renderer.component.scss

@@ -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.test.ts

@@ -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.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/table-cells.module.ts

@@ -18,6 +18,7 @@ import { TableCellNumberParser } from './data-parsers/table-cell-number-parser';
 import { TableCellStringParser } from './data-parsers/table-cell-string-parser';
 import { TableCellTimestampParser } from './data-parsers/table-cell-timestamp-parser';
 import { CodeTableCellRendererComponent } from './data-renderers/code/code-table-cell-renderer.component';
+import { DurationTableCellRendererComponent } from './data-renderers/duration/duration-table-cell-renderer.component';
 import { StringEnumTableCellRendererComponent } from './data-renderers/enum/string-enum-table-cell-renderer.component';
 import { IconTableCellRendererComponent } from './data-renderers/icon/icon-table-cell-renderer.component';
 import { NumericTableCellRendererComponent } from './data-renderers/numeric/numeric-table-cell-renderer.component';
@@ -74,7 +75,8 @@ export const TABLE_CELL_PARSERS = new InjectionToken<unknown[][]>('TABLE_CELL_PA
     StringArrayTableCellRendererComponent,
     StringEnumTableCellRendererComponent,
     TextWithCopyActionTableCellRendererComponent,
-    RelativeTimestampTableCellRendererComponent
+    RelativeTimestampTableCellRendererComponent,
+    DurationTableCellRendererComponent
   ],
   providers: [
     {
@@ -91,7 +93,8 @@ export const TABLE_CELL_PARSERS = new InjectionToken<unknown[][]>('TABLE_CELL_PA
         StringArrayTableCellRendererComponent,
         StringEnumTableCellRendererComponent,
         TextWithCopyActionTableCellRendererComponent,
-        RelativeTimestampTableCellRendererComponent
+        RelativeTimestampTableCellRendererComponent,
+        DurationTableCellRendererComponent
       ],
       multi: true
     },

projects/components/src/table/cells/types/core-table-cell-renderer-type.ts

@@ -1,6 +1,7 @@
 export const enum CoreTableCellRendererType {
   Checkbox = 'checkbox',
   Code = 'code',
+  Duration = 'duration',
   Icon = 'icon',
   Number = 'number',
   RowExpander = 'row-expander',