From 9fc2d47fbf215d13c07877def170215e1b898bdb Mon Sep 17 00:00:00 2001 From: Shreyansh Sahu Date: Wed, 9 Mar 2022 17:48:41 +0530 Subject: [PATCH 01/14] feat(core-cell-renderer): added duration cell renderer --- ...uration-table-cell-renderer.component.scss | 8 ++++ .../duration-table-cell-renderer.component.ts | 46 +++++++++++++++++++ .../src/table/cells/table-cells.module.ts | 7 ++- .../types/core-table-cell-renderer-type.ts | 1 + 4 files changed, 60 insertions(+), 2 deletions(-) create mode 100644 projects/components/src/table/cells/data-renderers/duration/duration-table-cell-renderer.component.scss create mode 100644 projects/components/src/table/cells/data-renderers/duration/duration-table-cell-renderer.component.ts 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..685df3463 --- /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 font-label($gray-7); + } +} \ No newline at end of file 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..8e33c3e5b --- /dev/null +++ b/projects/components/src/table/cells/data-renderers/duration/duration-table-cell-renderer.component.ts @@ -0,0 +1,46 @@ +import { ChangeDetectionStrategy, Component, Inject, OnInit } from '@angular/core'; +import { TimeDuration, TimeUnit, 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.durationText }} +
+ `, + styleUrls: ['./duration-table-cell-renderer.component.scss'] +}) + +@TableCellRenderer({ + type: CoreTableCellRendererType.Duration, + alignment: TableCellAlignmentType.Left, + parser: CoreTableCellParserType.NoOp +}) +export class DurationTableCellRendererComponent extends TableCellRendererBase implements OnInit { + public durationText!: string; + + 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: TimeDuration, + @Inject(TABLE_ROW_DATA) rowData: TableRow + ) { + super(columnConfig, index, parser, cellData, rowData); + } + + public ngOnInit(): void { + super.ngOnInit(); + + this.durationText = this.value.toMultiUnitString(TimeUnit.Second, true, UnitStringType.Long) + } +} \ No newline at end of file diff --git a/projects/components/src/table/cells/table-cells.module.ts b/projects/components/src/table/cells/table-cells.module.ts index 4dfed1580..ab9d09d75 100644 --- a/projects/components/src/table/cells/table-cells.module.ts +++ b/projects/components/src/table/cells/table-cells.module.ts @@ -36,6 +36,7 @@ import { TableCellParserConstructor } from './table-cell-parser'; import { TableCellParserLookupService } from './table-cell-parser-lookup.service'; import { TableCellRendererConstructor } from './table-cell-renderer'; import { TableCellRendererLookupService } from './table-cell-renderer-lookup.service'; +import { DurationTableCellRendererComponent } from './data-renderers/duration/duration-table-cell-renderer.component'; export const TABLE_CELL_RENDERERS = new InjectionToken('TABLE_CELL_RENDERERS'); export const TABLE_CELL_PARSERS = new InjectionToken('TABLE_CELL_PARSERS'); @@ -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', From 9c79a24e6426220fb97864971c3557b8b99e30b5 Mon Sep 17 00:00:00 2001 From: Shreyansh Sahu Date: Wed, 9 Mar 2022 18:51:57 +0530 Subject: [PATCH 02/14] fix(test): added test file for renderer --- projects/common/src/public-api.ts | 1 + ...uration-table-cell-renderer.component.scss | 2 +- ...tion-table-cell-renderer.component.test.ts | 38 +++++++++++++++++++ .../duration-table-cell-renderer.component.ts | 2 +- 4 files changed, 41 insertions(+), 2 deletions(-) create mode 100644 projects/components/src/table/cells/data-renderers/duration/duration-table-cell-renderer.component.test.ts diff --git a/projects/common/src/public-api.ts b/projects/common/src/public-api.ts index e935fbe1d..627aa6f60 100644 --- a/projects/common/src/public-api.ts +++ b/projects/common/src/public-api.ts @@ -54,6 +54,7 @@ export * from './utilities/formatters/string/string-formatter'; export * from './utilities/formatters/string/highlight.pipe'; export * from './utilities/formatters/enum/display-string-enum.pipe'; export * from './utilities/formatters/enum/display-string-enum'; +export * from './utilities/formatters/string/display-string.pipe'; // Http Param Encoder export { HttpParamEncoder } from './utilities/http/http-param-encoder'; 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 index 685df3463..1efc18333 100644 --- 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 @@ -3,6 +3,6 @@ .duration-cell { .duration-text{ @include ellipsis-overflow(); - @include font-label($gray-7); + @include body-1-regular(); } } \ No newline at end of file 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..2d2eb3da3 --- /dev/null +++ b/projects/components/src/table/cells/data-renderers/duration/duration-table-cell-renderer.component.test.ts @@ -0,0 +1,38 @@ +import { FormattingModule, TimeDuration, TimeUnit } from '@hypertrace/common'; +import { createComponentFactory } from '@ngneat/spectator/jest'; +import { MockPipe } from 'ng-mocks'; +import { DisplayStringPipe } from '@hypertrace/common'; +import { TableCellTimestampParser } from '../../data-parsers/table-cell-timestamp-parser'; +import { tableCellDataProvider, tableCellProviders } from '../../test/cell-providers'; +import { DurationTableCellRendererComponent } from './duration-table-cell-renderer.component'; + +describe('Duration table cell renderer component', () => { + const buildComponent = createComponentFactory({ + component: DurationTableCellRendererComponent, + imports: [FormattingModule], + providers: [ + tableCellProviders( + { + id: 'test' + }, + new TableCellTimestampParser(undefined!) + ) + ], + declarations: [MockPipe(DisplayStringPipe)], + shallow: true + }); + + test('Duration in defined unit', () => { + const spectator = buildComponent({ + providers: [tableCellDataProvider(new TimeDuration(4, TimeUnit.Hour))] + }); + + expect(spectator.element).toHaveText('4 Hours'); + }); + + test('renders a missing duration', () => { + const spectator = buildComponent(); + + expect(spectator.element).toHaveText('-'); + }); +}); 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 index 8e33c3e5b..055494c06 100644 --- 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 @@ -14,7 +14,7 @@ import { TableCellAlignmentType } from '../../types/table-cell-alignment-type'; changeDetection: ChangeDetectionStrategy.OnPush, template: `
- {{ this.durationText }} + {{ this.durationText | htDisplayString }}
`, styleUrls: ['./duration-table-cell-renderer.component.scss'] From 876f98299707a595987798678fc25adb2b73ce90 Mon Sep 17 00:00:00 2001 From: Shreyansh Sahu Date: Thu, 10 Mar 2022 14:23:17 +0530 Subject: [PATCH 03/14] fix(duration-cell-renderer): updated tests and code readability --- .../formatters/string/highlight.pipe.ts | 1 + ...uration-table-cell-renderer.component.scss | 8 +++--- ...tion-table-cell-renderer.component.test.ts | 23 ++++++---------- .../duration-table-cell-renderer.component.ts | 27 ++++--------------- .../src/table/cells/table-cells.module.ts | 3 ++- 5 files changed, 20 insertions(+), 42 deletions(-) diff --git a/projects/common/src/utilities/formatters/string/highlight.pipe.ts b/projects/common/src/utilities/formatters/string/highlight.pipe.ts index e55beef85..0ea2e5cd0 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 accommodate special 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 index 1efc18333..aaafe8576 100644 --- 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 @@ -1,8 +1,8 @@ @import 'font'; .duration-cell { - .duration-text{ - @include ellipsis-overflow(); - @include body-1-regular(); - } + .duration-text{ + @include ellipsis-overflow(); + @include body-1-regular(); + } } \ No newline at end of file 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 index 2d2eb3da3..529a5b42e 100644 --- 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 @@ -1,38 +1,31 @@ -import { FormattingModule, TimeDuration, TimeUnit } from '@hypertrace/common'; +import { FormattingModule, MemoizeModule, TimeDuration, TimeUnit } from '@hypertrace/common'; import { createComponentFactory } from '@ngneat/spectator/jest'; -import { MockPipe } from 'ng-mocks'; -import { DisplayStringPipe } from '@hypertrace/common'; -import { TableCellTimestampParser } from '../../data-parsers/table-cell-timestamp-parser'; import { tableCellDataProvider, tableCellProviders } from '../../test/cell-providers'; import { DurationTableCellRendererComponent } from './duration-table-cell-renderer.component'; +import { TableCellNoOpParser } from '../../data-parsers/table-cell-no-op-parser'; describe('Duration table cell renderer component', () => { const buildComponent = createComponentFactory({ component: DurationTableCellRendererComponent, - imports: [FormattingModule], + imports: [FormattingModule, MemoizeModule], providers: [ tableCellProviders( { id: 'test' }, - new TableCellTimestampParser(undefined!) + new TableCellNoOpParser(undefined!) ) ], - declarations: [MockPipe(DisplayStringPipe)], shallow: true }); - test('Duration in defined unit', () => { + test('Should render duration in defined unit', () => { + const spectator = buildComponent({ providers: [tableCellDataProvider(new TimeDuration(4, TimeUnit.Hour))] }); - expect(spectator.element).toHaveText('4 Hours'); - }); - - test('renders a missing duration', () => { - const spectator = buildComponent(); - - expect(spectator.element).toHaveText('-'); + console.log(spectator.component.value); + expect(spectator.element).toHaveText('4 hours'); }); }); 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 index 055494c06..eeace0353 100644 --- 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 @@ -1,8 +1,5 @@ -import { ChangeDetectionStrategy, Component, Inject, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; import { TimeDuration, TimeUnit, 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'; @@ -14,7 +11,7 @@ import { TableCellAlignmentType } from '../../types/table-cell-alignment-type'; changeDetection: ChangeDetectionStrategy.OnPush, template: `
- {{ this.durationText | htDisplayString }} + {{ this.getDurationString | htMemoize: this.value }}
`, styleUrls: ['./duration-table-cell-renderer.component.scss'] @@ -25,22 +22,8 @@ import { TableCellAlignmentType } from '../../types/table-cell-alignment-type'; alignment: TableCellAlignmentType.Left, parser: CoreTableCellParserType.NoOp }) -export class DurationTableCellRendererComponent extends TableCellRendererBase implements OnInit { - public durationText!: string; - - 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: TimeDuration, - @Inject(TABLE_ROW_DATA) rowData: TableRow - ) { - super(columnConfig, index, parser, cellData, rowData); - } - - public ngOnInit(): void { - super.ngOnInit(); - - this.durationText = this.value.toMultiUnitString(TimeUnit.Second, true, UnitStringType.Long) +export class DurationTableCellRendererComponent extends TableCellRendererBase implements OnInit{ + public getDurationString(timeDuration : TimeDuration): string { + return timeDuration.toMultiUnitString(TimeUnit.Second, true, UnitStringType.Long) } } \ No newline at end of file diff --git a/projects/components/src/table/cells/table-cells.module.ts b/projects/components/src/table/cells/table-cells.module.ts index ab9d09d75..78e9119b9 100644 --- a/projects/components/src/table/cells/table-cells.module.ts +++ b/projects/components/src/table/cells/table-cells.module.ts @@ -1,7 +1,7 @@ import { CdkTableModule } from '@angular/cdk/table'; import { CommonModule } from '@angular/common'; import { Inject, InjectionToken, NgModule } from '@angular/core'; -import { FormattingModule } from '@hypertrace/common'; +import { FormattingModule, MemoizeModule } from '@hypertrace/common'; import { TraceCheckboxModule } from '../../checkbox/checkbox.module'; import { CopyToClipboardModule } from '../../copy-to-clipboard/copy-to-clipboard.module'; import { ExpanderToggleModule } from '../../expander/expander-toggle.module'; @@ -47,6 +47,7 @@ export const TABLE_CELL_PARSERS = new InjectionToken('TABLE_CELL_PA CdkTableModule, ExpanderToggleModule, FormattingModule, + MemoizeModule, IconModule, TooltipModule, TraceCheckboxModule, From a1fa3a024ba72ef602ff38565b73838a43f8df7f Mon Sep 17 00:00:00 2001 From: Shreyansh Sahu Date: Thu, 10 Mar 2022 14:32:52 +0530 Subject: [PATCH 04/14] fix(code): added todo to modify duration pipe --- .../duration/duration-table-cell-renderer.component.test.ts | 1 - .../duration/duration-table-cell-renderer.component.ts | 1 + 2 files changed, 1 insertion(+), 1 deletion(-) 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 index 529a5b42e..7261b1a55 100644 --- 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 @@ -25,7 +25,6 @@ describe('Duration table cell renderer component', () => { providers: [tableCellDataProvider(new TimeDuration(4, TimeUnit.Hour))] }); - console.log(spectator.component.value); expect(spectator.element).toHaveText('4 hours'); }); }); 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 index eeace0353..891ef4fee 100644 --- 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 @@ -9,6 +9,7 @@ import { TableCellAlignmentType } from '../../types/table-cell-alignment-type'; @Component({ selector: 'ht-duration-table-cell-renderer', changeDetection: ChangeDetectionStrategy.OnPush, + // TODO: Modify the htDuration pipe to also support long format display and use it here. template: `
{{ this.getDurationString | htMemoize: this.value }} From f985e77f759c55cf1cb076427e75f1765067707d Mon Sep 17 00:00:00 2001 From: Shreyansh Sahu Date: Thu, 10 Mar 2022 17:54:11 +0530 Subject: [PATCH 05/14] fix(formatting): fixed linting --- .../duration/duration-table-cell-renderer.component.test.ts | 2 +- projects/components/src/table/cells/table-cells.module.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) 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 index 7261b1a55..f21449840 100644 --- 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 @@ -1,8 +1,8 @@ import { FormattingModule, MemoizeModule, TimeDuration, TimeUnit } from '@hypertrace/common'; import { createComponentFactory } from '@ngneat/spectator/jest'; +import { TableCellNoOpParser } from '../../data-parsers/table-cell-no-op-parser'; import { tableCellDataProvider, tableCellProviders } from '../../test/cell-providers'; import { DurationTableCellRendererComponent } from './duration-table-cell-renderer.component'; -import { TableCellNoOpParser } from '../../data-parsers/table-cell-no-op-parser'; describe('Duration table cell renderer component', () => { const buildComponent = createComponentFactory({ diff --git a/projects/components/src/table/cells/table-cells.module.ts b/projects/components/src/table/cells/table-cells.module.ts index 78e9119b9..fda77d028 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'; @@ -36,7 +37,6 @@ import { TableCellParserConstructor } from './table-cell-parser'; import { TableCellParserLookupService } from './table-cell-parser-lookup.service'; import { TableCellRendererConstructor } from './table-cell-renderer'; import { TableCellRendererLookupService } from './table-cell-renderer-lookup.service'; -import { DurationTableCellRendererComponent } from './data-renderers/duration/duration-table-cell-renderer.component'; export const TABLE_CELL_RENDERERS = new InjectionToken('TABLE_CELL_RENDERERS'); export const TABLE_CELL_PARSERS = new InjectionToken('TABLE_CELL_PARSERS'); From d818ada6412bee4c968bde94c56506c199065364 Mon Sep 17 00:00:00 2001 From: Shreyansh Sahu Date: Fri, 25 Mar 2022 02:41:43 +0530 Subject: [PATCH 06/14] fix(duration-pipe): updated duration pipe for long display --- .../duration/display-duration.pipe.ts | 14 +++++++-- .../duration/duration-formatter.test.ts | 16 ---------- .../formatters/duration/duration-formatter.ts | 31 ------------------- 3 files changed, 11 insertions(+), 50 deletions(-) delete mode 100644 projects/common/src/utilities/formatters/duration/duration-formatter.test.ts delete mode 100644 projects/common/src/utilities/formatters/duration/duration-formatter.ts 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..e19c81cc7 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,19 @@ import { Pipe, PipeTransform } from '@angular/core'; -import { durationFormatter } from './duration-formatter'; +import { TimeUnit } from 'projects/common/src/public-api'; +import { TimeDuration, UnitStringType } from 'projects/common/src/time/time-duration'; + @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 new TimeDuration(millis!, TimeUnit.Millisecond).toString(); + + return new TimeDuration(millis!, TimeUnit.Millisecond).toMultiUnitString(); } } diff --git a/projects/common/src/utilities/formatters/duration/duration-formatter.test.ts b/projects/common/src/utilities/formatters/duration/duration-formatter.test.ts deleted file mode 100644 index dc3b4fd4c..000000000 --- a/projects/common/src/utilities/formatters/duration/duration-formatter.test.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { durationFormatter } from './duration-formatter'; - -describe('DurationFormatter', () => { - test('can format duration', () => { - expect(durationFormatter(0)).toEqual('0ms'); - expect(durationFormatter(100)).toEqual('100ms'); - expect(durationFormatter(1000)).toEqual('1s'); - expect(durationFormatter(10000)).toEqual('10s'); - expect(durationFormatter(100000)).toEqual('1m 40s'); - expect(durationFormatter(1000000)).toEqual('16m 40s'); - expect(durationFormatter(10000000)).toEqual('2h 46m'); - expect(durationFormatter(100000000)).toEqual('1d 3h 46m'); - expect(durationFormatter(86400000)).toEqual('1d'); - expect(durationFormatter(87300000)).toEqual('1d 0h 15m'); - }); -}); diff --git a/projects/common/src/utilities/formatters/duration/duration-formatter.ts b/projects/common/src/utilities/formatters/duration/duration-formatter.ts deleted file mode 100644 index 15ad0fc1e..000000000 --- a/projects/common/src/utilities/formatters/duration/duration-formatter.ts +++ /dev/null @@ -1,31 +0,0 @@ -export const durationFormatter = (duration?: number): string => { - const dayInMs: number = 1000 * 60 * 60 * 24; - if (duration === undefined) { - return '-'; - } - const days = Math.abs(Math.trunc(duration / dayInMs)); - - const date = new Date(duration); - const hours = date.getUTCHours(); - const minutes = date.getUTCMinutes(); - const seconds = date.getUTCSeconds(); - const milliseconds = date.getUTCMilliseconds(); - - if (days !== 0) { - return hours === 0 && minutes === 0 ? `${days}d` : `${days}d ${hours}h ${doubleDigit(minutes)}m`; - } - - if (hours !== 0) { - return `${hours}h ${doubleDigit(minutes)}m`; - } - if (minutes !== 0) { - return `${minutes}m ${doubleDigit(seconds)}s`; - } - if (seconds !== 0) { - return `${seconds}s`; - } - - return `${milliseconds}ms`; -}; - -const doubleDigit = (value: number): string => (value < 10 ? `0${value}` : `${value}`); From 15fa767116b89c209e10e2e71bdaeb361871f04d Mon Sep 17 00:00:00 2001 From: Shreyansh Sahu Date: Fri, 25 Mar 2022 02:52:42 +0530 Subject: [PATCH 07/14] fix(duration-formatter): restored deleted files --- .../duration/duration-formatter.test.ts | 16 ++++++++++ .../formatters/duration/duration-formatter.ts | 32 +++++++++++++++++++ 2 files changed, 48 insertions(+) create mode 100644 projects/common/src/utilities/formatters/duration/duration-formatter.test.ts create mode 100644 projects/common/src/utilities/formatters/duration/duration-formatter.ts diff --git a/projects/common/src/utilities/formatters/duration/duration-formatter.test.ts b/projects/common/src/utilities/formatters/duration/duration-formatter.test.ts new file mode 100644 index 000000000..dc3b4fd4c --- /dev/null +++ b/projects/common/src/utilities/formatters/duration/duration-formatter.test.ts @@ -0,0 +1,16 @@ +import { durationFormatter } from './duration-formatter'; + +describe('DurationFormatter', () => { + test('can format duration', () => { + expect(durationFormatter(0)).toEqual('0ms'); + expect(durationFormatter(100)).toEqual('100ms'); + expect(durationFormatter(1000)).toEqual('1s'); + expect(durationFormatter(10000)).toEqual('10s'); + expect(durationFormatter(100000)).toEqual('1m 40s'); + expect(durationFormatter(1000000)).toEqual('16m 40s'); + expect(durationFormatter(10000000)).toEqual('2h 46m'); + expect(durationFormatter(100000000)).toEqual('1d 3h 46m'); + expect(durationFormatter(86400000)).toEqual('1d'); + expect(durationFormatter(87300000)).toEqual('1d 0h 15m'); + }); +}); diff --git a/projects/common/src/utilities/formatters/duration/duration-formatter.ts b/projects/common/src/utilities/formatters/duration/duration-formatter.ts new file mode 100644 index 000000000..8e1f78f33 --- /dev/null +++ b/projects/common/src/utilities/formatters/duration/duration-formatter.ts @@ -0,0 +1,32 @@ +export const durationFormatter = (duration?: number): string => { + const dayInMs: number = 1000 * 60 * 60 * 24; + if (duration === undefined) { + return '-'; + } + const days = Math.abs(Math.trunc(duration / dayInMs)); + + const date = new Date(duration); + const hours = date.getUTCHours(); + const minutes = date.getUTCMinutes(); + const seconds = date.getUTCSeconds(); + const milliseconds = date.getUTCMilliseconds(); + + if (days !== 0) { + return hours === 0 && minutes === 0 ? `${days}d` : `${days}d ${hours}h ${doubleDigit(minutes)}m`; + } + + if (hours !== 0) { + return `${hours}h ${doubleDigit(minutes)}m`; + } + if (minutes !== 0) { + return `${minutes}m ${doubleDigit(seconds)}s`; + } + if (seconds !== 0) { + return `${seconds}s`; + } + + return `${milliseconds}ms`; + }; + + const doubleDigit = (value: number): string => (value < 10 ? `0${value}` : `${value}`); + \ No newline at end of file From b3a8bd631e5c822eec974dd3a7d0b367bdfd50a9 Mon Sep 17 00:00:00 2001 From: Shreyansh Sahu Date: Fri, 25 Mar 2022 02:57:41 +0530 Subject: [PATCH 08/14] fix(formatting): corrected tab --- .../formatters/duration/duration-formatter.ts | 61 +++++++++---------- 1 file changed, 30 insertions(+), 31 deletions(-) diff --git a/projects/common/src/utilities/formatters/duration/duration-formatter.ts b/projects/common/src/utilities/formatters/duration/duration-formatter.ts index 8e1f78f33..15ad0fc1e 100644 --- a/projects/common/src/utilities/formatters/duration/duration-formatter.ts +++ b/projects/common/src/utilities/formatters/duration/duration-formatter.ts @@ -1,32 +1,31 @@ export const durationFormatter = (duration?: number): string => { - const dayInMs: number = 1000 * 60 * 60 * 24; - if (duration === undefined) { - return '-'; - } - const days = Math.abs(Math.trunc(duration / dayInMs)); - - const date = new Date(duration); - const hours = date.getUTCHours(); - const minutes = date.getUTCMinutes(); - const seconds = date.getUTCSeconds(); - const milliseconds = date.getUTCMilliseconds(); - - if (days !== 0) { - return hours === 0 && minutes === 0 ? `${days}d` : `${days}d ${hours}h ${doubleDigit(minutes)}m`; - } - - if (hours !== 0) { - return `${hours}h ${doubleDigit(minutes)}m`; - } - if (minutes !== 0) { - return `${minutes}m ${doubleDigit(seconds)}s`; - } - if (seconds !== 0) { - return `${seconds}s`; - } - - return `${milliseconds}ms`; - }; - - const doubleDigit = (value: number): string => (value < 10 ? `0${value}` : `${value}`); - \ No newline at end of file + const dayInMs: number = 1000 * 60 * 60 * 24; + if (duration === undefined) { + return '-'; + } + const days = Math.abs(Math.trunc(duration / dayInMs)); + + const date = new Date(duration); + const hours = date.getUTCHours(); + const minutes = date.getUTCMinutes(); + const seconds = date.getUTCSeconds(); + const milliseconds = date.getUTCMilliseconds(); + + if (days !== 0) { + return hours === 0 && minutes === 0 ? `${days}d` : `${days}d ${hours}h ${doubleDigit(minutes)}m`; + } + + if (hours !== 0) { + return `${hours}h ${doubleDigit(minutes)}m`; + } + if (minutes !== 0) { + return `${minutes}m ${doubleDigit(seconds)}s`; + } + if (seconds !== 0) { + return `${seconds}s`; + } + + return `${milliseconds}ms`; +}; + +const doubleDigit = (value: number): string => (value < 10 ? `0${value}` : `${value}`); From ef9ae04dc224677489c3c9b25b0f1ce2f552c14c Mon Sep 17 00:00:00 2001 From: Shreyansh Sahu Date: Fri, 25 Mar 2022 14:44:22 +0530 Subject: [PATCH 09/14] fix(cell-renderer): updated implementation --- .../duration/display-duration.pipe.ts | 6 ++--- ...tion-table-cell-renderer.component.test.ts | 20 +++++++++------- .../duration-table-cell-renderer.component.ts | 24 +++++++++++++------ 3 files changed, 31 insertions(+), 19 deletions(-) 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 e19c81cc7..4611ce935 100644 --- a/projects/common/src/utilities/formatters/duration/display-duration.pipe.ts +++ b/projects/common/src/utilities/formatters/duration/display-duration.pipe.ts @@ -1,6 +1,6 @@ import { Pipe, PipeTransform } from '@angular/core'; -import { TimeUnit } from 'projects/common/src/public-api'; -import { TimeDuration, UnitStringType } from 'projects/common/src/time/time-duration'; +import { TimeUnit } from './../../../public-api'; +import { TimeDuration, UnitStringType } from './../../../public-api'; @Pipe({ @@ -14,6 +14,6 @@ export class DisplayDurationPipe implements PipeTransform { if(unitStringType === UnitStringType.Short) return new TimeDuration(millis!, TimeUnit.Millisecond).toString(); - return new TimeDuration(millis!, TimeUnit.Millisecond).toMultiUnitString(); + return new TimeDuration(millis!, TimeUnit.Millisecond).toMultiUnitString(TimeUnit.Second, true, UnitStringType.Long); } } 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 index f21449840..bd8b0bccf 100644 --- 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 @@ -1,30 +1,32 @@ -import { FormattingModule, MemoizeModule, TimeDuration, TimeUnit } from '@hypertrace/common'; +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 { tableCellDataProvider, tableCellProviders } from '../../test/cell-providers'; +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, - imports: [FormattingModule, MemoizeModule], providers: [ tableCellProviders( { id: 'test' }, - new TableCellNoOpParser(undefined!) + new TableCellNoOpParser(undefined!), + 0, + 14400000 ) ], + declarations: [MockPipe(DisplayDurationPipe)], shallow: true }); - test('Should render duration in defined unit', () => { + test('Should render duration text', () => { - const spectator = buildComponent({ - providers: [tableCellDataProvider(new TimeDuration(4, TimeUnit.Hour))] - }); + const spectator = buildComponent(); - expect(spectator.element).toHaveText('4 hours'); + 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 index 891ef4fee..9ede62c50 100644 --- 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 @@ -1,5 +1,8 @@ -import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; -import { TimeDuration, TimeUnit, UnitStringType } from '@hypertrace/common'; +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'; @@ -9,10 +12,9 @@ import { TableCellAlignmentType } from '../../types/table-cell-alignment-type'; @Component({ selector: 'ht-duration-table-cell-renderer', changeDetection: ChangeDetectionStrategy.OnPush, - // TODO: Modify the htDuration pipe to also support long format display and use it here. template: `
- {{ this.getDurationString | htMemoize: this.value }} + {{ this.value | htDisplayDuration: this.formatter }}
`, styleUrls: ['./duration-table-cell-renderer.component.scss'] @@ -23,8 +25,16 @@ import { TableCellAlignmentType } from '../../types/table-cell-alignment-type'; alignment: TableCellAlignmentType.Left, parser: CoreTableCellParserType.NoOp }) -export class DurationTableCellRendererComponent extends TableCellRendererBase implements OnInit{ - public getDurationString(timeDuration : TimeDuration): string { - return timeDuration.toMultiUnitString(TimeUnit.Second, true, UnitStringType.Long) +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); } } \ No newline at end of file From 87166ce77b08eefd04f6348b24ed21b14e0762c0 Mon Sep 17 00:00:00 2001 From: Shreyansh Sahu Date: Fri, 25 Mar 2022 14:47:19 +0530 Subject: [PATCH 10/14] fix(imports): removed unrequired import --- projects/components/src/table/cells/table-cells.module.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/projects/components/src/table/cells/table-cells.module.ts b/projects/components/src/table/cells/table-cells.module.ts index fda77d028..b184c12f7 100644 --- a/projects/components/src/table/cells/table-cells.module.ts +++ b/projects/components/src/table/cells/table-cells.module.ts @@ -1,7 +1,7 @@ import { CdkTableModule } from '@angular/cdk/table'; import { CommonModule } from '@angular/common'; import { Inject, InjectionToken, NgModule } from '@angular/core'; -import { FormattingModule, MemoizeModule } from '@hypertrace/common'; +import { FormattingModule } from '@hypertrace/common'; import { TraceCheckboxModule } from '../../checkbox/checkbox.module'; import { CopyToClipboardModule } from '../../copy-to-clipboard/copy-to-clipboard.module'; import { ExpanderToggleModule } from '../../expander/expander-toggle.module'; @@ -47,7 +47,6 @@ export const TABLE_CELL_PARSERS = new InjectionToken('TABLE_CELL_PA CdkTableModule, ExpanderToggleModule, FormattingModule, - MemoizeModule, IconModule, TooltipModule, TraceCheckboxModule, From a087a6e11453554b18992b19a7db3306f27ae954 Mon Sep 17 00:00:00 2001 From: Shreyansh Sahu Date: Fri, 25 Mar 2022 14:49:43 +0530 Subject: [PATCH 11/14] fix(code): removed unrequired changes --- projects/common/src/public-api.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/projects/common/src/public-api.ts b/projects/common/src/public-api.ts index 3c4f6a8f5..0ea74530b 100644 --- a/projects/common/src/public-api.ts +++ b/projects/common/src/public-api.ts @@ -54,7 +54,6 @@ export * from './utilities/formatters/string/string-formatter'; export * from './utilities/formatters/string/highlight.pipe'; export * from './utilities/formatters/enum/display-string-enum.pipe'; export * from './utilities/formatters/enum/display-string-enum'; -export * from './utilities/formatters/string/display-string.pipe'; // Http Param Encoder export { HttpParamEncoder } from './utilities/http/http-param-encoder'; From 526c31388fd61c3ca0e5dde0bb659e02edd5a81d Mon Sep 17 00:00:00 2001 From: Shreyansh Sahu Date: Fri, 25 Mar 2022 16:47:41 +0530 Subject: [PATCH 12/14] fix(code): reverted unnecessary change --- .../formatters/duration/display-duration.pipe.ts | 9 ++++++--- .../src/utilities/formatters/string/highlight.pipe.ts | 2 +- 2 files changed, 7 insertions(+), 4 deletions(-) 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 4611ce935..320051eb2 100644 --- a/projects/common/src/utilities/formatters/duration/display-duration.pipe.ts +++ b/projects/common/src/utilities/formatters/duration/display-duration.pipe.ts @@ -1,6 +1,7 @@ import { Pipe, PipeTransform } from '@angular/core'; import { TimeUnit } from './../../../public-api'; import { TimeDuration, UnitStringType } from './../../../public-api'; +import { durationFormatter } from './duration-formatter'; @Pipe({ @@ -8,11 +9,13 @@ import { TimeDuration, UnitStringType } from './../../../public-api'; }) export class DisplayDurationPipe implements PipeTransform { public transform(millis?: number, unitStringType: UnitStringType = UnitStringType.Short): string { - if(millis === undefined) + if(millis === undefined){ return '-'; + } - if(unitStringType === UnitStringType.Short) - return new TimeDuration(millis!, TimeUnit.Millisecond).toString(); + 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 0ea2e5cd0..809572127 100644 --- a/projects/common/src/utilities/formatters/string/highlight.pipe.ts +++ b/projects/common/src/utilities/formatters/string/highlight.pipe.ts @@ -2,7 +2,7 @@ import { Pipe, PipeTransform } from '@angular/core'; import { isArray } from 'lodash-es'; import { assertUnreachable } from '../../lang/lang-utils'; -// TODO: Currently htHighlight does not accommodate special characters. +// 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 { From cff721dbeb1d19787763ea59b6e4e72ef37ad95e Mon Sep 17 00:00:00 2001 From: Shreyansh Sahu Date: Fri, 25 Mar 2022 22:03:28 +0530 Subject: [PATCH 13/14] fix(code): fixed linting errors --- .../utilities/formatters/duration/display-duration.pipe.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) 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 320051eb2..320497ca6 100644 --- a/projects/common/src/utilities/formatters/duration/display-duration.pipe.ts +++ b/projects/common/src/utilities/formatters/duration/display-duration.pipe.ts @@ -1,6 +1,5 @@ import { Pipe, PipeTransform } from '@angular/core'; -import { TimeUnit } from './../../../public-api'; -import { TimeDuration, UnitStringType } from './../../../public-api'; +import { TimeDuration, TimeUnit, UnitStringType } from './../../../public-api'; import { durationFormatter } from './duration-formatter'; @@ -17,6 +16,6 @@ export class DisplayDurationPipe implements PipeTransform { return durationFormatter(millis); } - return new TimeDuration(millis!, TimeUnit.Millisecond).toMultiUnitString(TimeUnit.Second, true, UnitStringType.Long); + return new TimeDuration(millis, TimeUnit.Millisecond).toMultiUnitString(TimeUnit.Second, true, UnitStringType.Long); } } From 19f029e94503a351c8df316900dd70eaa71b156f Mon Sep 17 00:00:00 2001 From: Shreyansh Sahu Date: Mon, 28 Mar 2022 12:11:52 +0530 Subject: [PATCH 14/14] fix(formatting): code formatting --- .../formatters/duration/display-duration.pipe.ts | 13 ++++++------- .../duration-table-cell-renderer.component.scss | 4 ++-- .../duration-table-cell-renderer.component.test.ts | 1 - .../duration-table-cell-renderer.component.ts | 13 +++++++++---- 4 files changed, 17 insertions(+), 14 deletions(-) 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 320497ca6..29db933b6 100644 --- a/projects/common/src/utilities/formatters/duration/display-duration.pipe.ts +++ b/projects/common/src/utilities/formatters/duration/display-duration.pipe.ts @@ -2,19 +2,18 @@ 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, unitStringType: UnitStringType = UnitStringType.Short): string { - if(millis === undefined){ - return '-'; - } + if (millis === undefined) { + return '-'; + } - if(unitStringType === UnitStringType.Short){ - return durationFormatter(millis); - } + if (unitStringType === UnitStringType.Short) { + return durationFormatter(millis); + } return new TimeDuration(millis, TimeUnit.Millisecond).toMultiUnitString(TimeUnit.Second, true, UnitStringType.Long); } 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 index aaafe8576..4935d2f7b 100644 --- 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 @@ -1,8 +1,8 @@ @import 'font'; .duration-cell { - .duration-text{ + .duration-text { @include ellipsis-overflow(); @include body-1-regular(); } -} \ No newline at end of file +} 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 index bd8b0bccf..43e779575 100644 --- 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 @@ -23,7 +23,6 @@ describe('Duration table cell renderer component', () => { }); test('Should render duration text', () => { - const spectator = buildComponent(); expect(spectator.query('.duration-cell')).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 index 9ede62c50..799a54ccd 100644 --- 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 @@ -1,7 +1,13 @@ 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 { + 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'; @@ -19,7 +25,6 @@ import { TableCellAlignmentType } from '../../types/table-cell-alignment-type'; `, styleUrls: ['./duration-table-cell-renderer.component.scss'] }) - @TableCellRenderer({ type: CoreTableCellRendererType.Duration, alignment: TableCellAlignmentType.Left, @@ -27,7 +32,7 @@ import { TableCellAlignmentType } from '../../types/table-cell-alignment-type'; }) 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, @@ -37,4 +42,4 @@ export class DurationTableCellRendererComponent extends TableCellRendererBase