diff --git a/projects/common/src/utilities/formatters/duration/display-duration.pipe.ts b/projects/common/src/utilities/formatters/duration/display-duration.pipe.ts index 051139257..29db933b6 100644 --- a/projects/common/src/utilities/formatters/duration/display-duration.pipe.ts +++ b/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); } } diff --git a/projects/common/src/utilities/formatters/string/highlight.pipe.ts b/projects/common/src/utilities/formatters/string/highlight.pipe.ts index e55beef85..809572127 100644 --- a/projects/common/src/utilities/formatters/string/highlight.pipe.ts +++ b/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 { diff --git a/projects/components/src/table/cells/data-renderers/duration/duration-table-cell-renderer.component.scss b/projects/components/src/table/cells/data-renderers/duration/duration-table-cell-renderer.component.scss new file mode 100644 index 000000000..4935d2f7b --- /dev/null +++ b/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(); + } +} diff --git a/projects/components/src/table/cells/data-renderers/duration/duration-table-cell-renderer.component.test.ts b/projects/components/src/table/cells/data-renderers/duration/duration-table-cell-renderer.component.test.ts new file mode 100644 index 000000000..43e779575 --- /dev/null +++ b/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(); + }); +}); diff --git a/projects/components/src/table/cells/data-renderers/duration/duration-table-cell-renderer.component.ts b/projects/components/src/table/cells/data-renderers/duration/duration-table-cell-renderer.component.ts new file mode 100644 index 000000000..799a54ccd --- /dev/null +++ b/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: ` +
+ {{ this.value | htDisplayDuration: this.formatter }} +
+ `, + styleUrls: ['./duration-table-cell-renderer.component.scss'] +}) +@TableCellRenderer({ + type: CoreTableCellRendererType.Duration, + alignment: TableCellAlignmentType.Left, + parser: CoreTableCellParserType.NoOp +}) +export class DurationTableCellRendererComponent extends TableCellRendererBase { + 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, + @Inject(TABLE_CELL_DATA) cellData: number, + @Inject(TABLE_ROW_DATA) rowData: TableRow + ) { + super(columnConfig, index, parser, cellData, rowData); + } +} diff --git a/projects/components/src/table/cells/table-cells.module.ts b/projects/components/src/table/cells/table-cells.module.ts index 4dfed1580..b184c12f7 100644 --- a/projects/components/src/table/cells/table-cells.module.ts +++ b/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('TABLE_CELL_PA StringArrayTableCellRendererComponent, StringEnumTableCellRendererComponent, TextWithCopyActionTableCellRendererComponent, - RelativeTimestampTableCellRendererComponent + RelativeTimestampTableCellRendererComponent, + DurationTableCellRendererComponent ], providers: [ { @@ -91,7 +93,8 @@ export const TABLE_CELL_PARSERS = new InjectionToken('TABLE_CELL_PA StringArrayTableCellRendererComponent, StringEnumTableCellRendererComponent, TextWithCopyActionTableCellRendererComponent, - RelativeTimestampTableCellRendererComponent + RelativeTimestampTableCellRendererComponent, + DurationTableCellRendererComponent ], multi: true }, diff --git a/projects/components/src/table/cells/types/core-table-cell-renderer-type.ts b/projects/components/src/table/cells/types/core-table-cell-renderer-type.ts index 2917244bc..0a3e0a6b2 100644 --- a/projects/components/src/table/cells/types/core-table-cell-renderer-type.ts +++ b/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',