Internal: Improve timespan component (#1025)

Author: timotheeguerin

app/components/base/base.module.ts

@@ -18,7 +18,6 @@ import { DialogsModule } from "./dialogs";
 import { DropdownModule } from "./dropdown";
 import { DurationPickerComponent } from "./duration-picker";
 import { EditorModule } from "./editor";
-import { ElapsedTimeComponent } from "./elapsed-time";
 import { FocusSectionModule } from "./focus-section";
 import { FormModule } from "./form";
 import { GraphsModule } from "./graphs";
@@ -41,6 +40,7 @@ import { SummaryCardModule } from "./summary-card";
 import { TableModule } from "./table";
 import { TabsModule } from "./tabs";
 import { TagsModule } from "./tags";
+import { TimespanComponent } from "./timespan";
 import { VirtualScrollModule } from "./virtual-scroll";
 import { VTabsModule } from "./vtabs";
 
@@ -79,7 +79,7 @@ const components = [
     BannerComponent,
     BannerOtherFixDirective,
     CardComponent,
-    ElapsedTimeComponent,
+    TimespanComponent,
     EntityDetailsListComponent,
     DurationPickerComponent,
     IconComponent,

app/components/base/elapsed-time/elapsed-time.component.ts

@@ -0,0 +1 @@
+export * from "./timespan.component";

app/components/base/elapsed-time/index.ts

@@ -0,0 +1,112 @@
+import { Component, DebugElement } from "@angular/core";
+import { ComponentFixture, TestBed, discardPeriodicTasks, fakeAsync, tick } from "@angular/core/testing";
+import { By } from "@angular/platform-browser";
+import * as moment from "moment";
+
+import { TimespanComponent, TimespanDisplayType } from "./timespan.component";
+
+@Component({
+    template: `
+        <bl-timespan [startTime]="startTime" [endTime]="endTime" type="type">
+        </bl-timespan>
+    `,
+})
+class TestComponent {
+    public startTime: Date = null;
+    public endTime: Date = null;
+    public type = TimespanDisplayType.compact;
+}
+
+describe("TimespanComponent", () => {
+    let fixture: ComponentFixture<TestComponent>;
+    let testComponent: TestComponent;
+    let component: TimespanComponent;
+    let de: DebugElement;
+    let nowDate;
+
+    function passTime(milli: number) {
+        nowDate = nowDate.add(milli, "milliseconds");
+        tick(milli);
+    }
+
+    beforeEach(() => {
+        nowDate = moment.utc();
+        TestBed.configureTestingModule({
+            imports: [],
+            declarations: [TimespanComponent, TestComponent],
+        });
+        fixture = TestBed.createComponent(TestComponent);
+        testComponent = fixture.componentInstance;
+        de = fixture.debugElement.query(By.css("bl-timespan"));
+        component = de.componentInstance;
+        fixture.detectChanges();
+        spyOn(component, "now").and.callFake(() => nowDate);
+    });
+
+    describe("when providing start and endtime", () => {
+        beforeEach(() => {
+            const start = moment();
+            testComponent.startTime = start.toDate();
+            testComponent.endTime = start.add(83, "seconds").toDate();
+            fixture.detectChanges();
+        });
+
+        it("should show the duration between start and end", () => {
+            expect(de.nativeElement.textContent).toContain("1:23");
+        });
+
+        it("should not update with time", fakeAsync(() => {
+            tick(4000);
+            fixture.detectChanges();
+            expect(de.nativeElement.textContent).toContain("1:23");
+        }));
+    });
+
+    describe("when providing only start time", () => {
+        function reset() {
+            const start = moment().subtract(123, "seconds");
+            testComponent.startTime = start.toDate();
+            fixture.detectChanges();
+        }
+
+        it("should show the duration between start and end", () => {
+            reset();
+            expect(de.nativeElement.textContent).toContain("2:03");
+        });
+
+        it("should update with time", fakeAsync(() => {
+            reset();
+            passTime(4000);
+            fixture.detectChanges();
+            expect(de.nativeElement.textContent).toContain("2:07");
+            passTime(1000);
+            fixture.detectChanges();
+            expect(de.nativeElement.textContent).toContain("2:08");
+            discardPeriodicTasks();
+        }));
+    });
+
+    describe("when providing only end time", () => {
+        function reset() {
+            const end = moment().add(234, "seconds");
+            testComponent.endTime = end.toDate();
+            fixture.detectChanges();
+        }
+
+        it("should show the duration between start and end", () => {
+            reset();
+            expect(de.nativeElement.textContent).toContain("3:54");
+        });
+
+        it("should update with time", fakeAsync(() => {
+            reset();
+            passTime(4000);
+            fixture.detectChanges();
+            expect(de.nativeElement.textContent).toContain("3:50");
+            passTime(1000);
+            fixture.detectChanges();
+            expect(de.nativeElement.textContent).toContain("3:49");
+            discardPeriodicTasks();
+        }));
+    });
+});

app/components/base/timespan/index.ts

@@ -0,0 +1,97 @@
+import {
+    ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy,
+} from "@angular/core";
+import * as moment from "moment";
+import { Subscription } from "rxjs";
+
+import { DateUtils } from "app/utils";
+import { Observable } from "rxjs/Observable";
+
+export enum TimespanDisplayType {
+    humanized = "humanized",
+    pretty = "pretty",
+    compact = "compact",
+}
+@Component({
+    selector: "bl-timespan",
+    template: `{{formattedValue}}`,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TimespanComponent implements OnChanges, OnDestroy {
+    public formattedValue = "";
+
+    @Input() public type: TimespanDisplayType = TimespanDisplayType.pretty;
+
+    @Input() public startTime: Date = null;
+
+    @Input() public endTime: Date = null;
+
+    private _intervalSub: Subscription;
+
+    constructor(private changeDetector: ChangeDetectorRef) {
+    }
+
+    public ngOnChanges(changes) {
+        if (changes.startTime || changes.endTime) {
+            this._updateInterval();
+            this._updateElapsedTime();
+        }
+    }
+
+    public _updateElapsedTime() {
+        const duration = this._computeTimespan();
+        const value = this._formatDuration(duration);
+        if (value !== this.formattedValue) {
+            this.formattedValue = value;
+            this.changeDetector.markForCheck();
+        }
+    }
+
+    public now() {
+        return moment.utc();
+    }
+
+    public ngOnDestroy() {
+        this._clearInterval();
+    }
+
+    private _clearInterval() {
+        if (this._intervalSub) {
+            this._intervalSub.unsubscribe();
+            this._intervalSub = null;
+        }
+    }
+
+    private _updateInterval() {
+        this._clearInterval();
+        if (this.startTime && this.endTime) { return; }
+        if (!this.startTime && !this.endTime) { return; }
+        this._intervalSub = Observable.interval(1000).subscribe(() => {
+            this._updateElapsedTime();
+        });
+    }
+
+    private _computeTimespan() {
+        if (!this.startTime && !this.endTime) { return null; }
+        const startTime = this.startTime ? moment.utc(this.startTime) : this.now();
+        const endTime = this.endTime ? moment.utc(this.endTime) : this.now();
+        return moment.duration(endTime.diff(moment(startTime)));
+    }
+
+    private _formatDuration(duration: any) {
+        if (!duration) { return null; }
+        switch (this.type) {
+            case TimespanDisplayType.humanized:
+                if (duration.asSeconds() >= 60) {
+                    return duration.humanize();
+                } else {
+                    return DateUtils.prettyDuration(duration);
+                }
+            case TimespanDisplayType.pretty:
+                return DateUtils.prettyDuration(duration);
+            case TimespanDisplayType.compact:
+            default:
+                return DateUtils.compactDuration(duration);
+        }
+    }
+}

app/components/base/timespan/timespan.component.spec.ts

@@ -1,7 +1,7 @@
 <div [ngSwitch]="task.state">
 	<div *ngSwitchCase="taskStates.running">
 		<i class="fa fa-clock-o" aria-hidden="true"></i>
-        <bl-elapsed-time [startTime]="startTime"></bl-elapsed-time>
+        <bl-timespan [startTime]="startTime"></bl-timespan>
 
 	</div>
 

app/components/base/timespan/timespan.component.ts

@@ -21,7 +21,7 @@
     <!-- Running-->
     <bl-task-timeline-state state="running" [currentState]="task.state">
         <div *ngIf="started" [class.warn]="isTaskTimeoutClose" [class.error]="task.didTimeout" [title]="timeoutMessage">
-            <bl-elapsed-time [startTime]="task.executionInfo?.startTime" [endTime]="task.executionInfo?.endTime"></bl-elapsed-time>
+            <bl-timespan [startTime]="task.executionInfo?.startTime" [endTime]="task.executionInfo?.endTime"></bl-timespan>
         </div>
         <div *ngIf="started && retryCount" class="warn">{{retryCount}} retries</div>
     </bl-task-timeline-state>

app/components/task/browse/preview/task-preview.html

@@ -4,7 +4,7 @@ import { By } from "@angular/platform-browser";
 import { RouterTestingModule } from "@angular/router/testing";
 import * as moment from "moment";
 
-import { ElapsedTimeComponent } from "app/components/base/elapsed-time";
+import { TimespanComponent } from "app/components/base/timespan";
 import { TaskTimelineComponent, TaskTimelineStateComponent } from "app/components/task/details/task-timeline";
 import { Job, Task, TaskState } from "app/models";
 
@@ -50,7 +50,7 @@ describe("TaskTimelineComponent", () => {
         TestBed.configureTestingModule({
             imports: [RouterTestingModule],
             declarations: [
-                ElapsedTimeComponent, TaskTimelineComponent, TaskTimelineMockComponent, TaskTimelineStateComponent,
+                TimespanComponent, TaskTimelineComponent, TaskTimelineMockComponent, TaskTimelineStateComponent,
             ],
         });