This is an automated email from the ASF dual-hosted git repository. github-merge-queue[bot] pushed a commit to branch gh-readonly-queue/main/pr-5220-7bd65500562724eced01d87c254fdab1e9474e7b in repository https://gitbox.apache.org/repos/asf/texera.git
commit b14b6ea678e9ee4247e1496e2ada86e3603cb351 Author: Xuan Gu <[email protected]> AuthorDate: Thu May 28 00:46:56 2026 -0700 refactor: consolidate count and relative-time formatting utilities (#5220) <!-- Thanks for sending a pull request (PR)! Here are some tips for you: 1. If this is your first time, please read our contributor guidelines: [Contributing to Texera](https://github.com/apache/texera/blob/main/CONTRIBUTING.md) 2. Ensure you have added or run the appropriate tests for your PR 3. If the PR is work in progress, mark it a draft on GitHub. 4. Please write your PR title to summarize what this PR proposes, we are following Conventional Commits style for PR titles as well. 5. Be sure to keep the PR description updated to reflect all changes. --> ### What changes were proposed in this PR? <!-- Please clarify what changes you are proposing. The purpose of this section is to outline the changes. Here are some tips for you: 1. If you propose a new API, clarify the use case for a new API. 2. If you fix a bug, you can clarify why it is a bug. 3. If it is a refactoring, clarify what has been changed. 3. It would be helpful to include a before-and-after comparison using screenshots or GIFs. 4. Please consider writing useful notes for better and faster reviews. --> This PR extracts duplicated `formatCount` and relative-time formatting logic into the shared `format.util.ts` utility file, and updates inline usages to use the shared utilities. No behavior change. ### Any related issues, documentation, discussions? <!-- Please use this section to link other resources if not mentioned already. 1. If this PR fixes an issue, please include `Fixes #1234`, `Resolves #1234` or `Closes #1234`. If it is only related, simply mention the issue number. 2. If there is design documentation, please add the link. 3. If there is a discussion in the mailing list, please add the link. --> Closes #5218 ### How was this PR tested? <!-- If tests were added, say they were added here. Or simply mention that if the PR is tested with existing test cases. Make sure to include/update test cases that check the changes thoroughly including negative and positive cases if possible. If it was tested in a way different from regular unit tests, please clarify how you tested step by step, ideally copy and paste-able, so that other reviewers can test and check, and descendants can verify in the future. If tests were not added, please describe why they were not added and/or why it was difficult to add. --> Existing automated tests passed. ### Was this PR authored or co-authored using generative AI tooling? <!-- If generative AI tooling has been used in the process of authoring this PR, please include the phrase: 'Generated-by: ' followed by the name of the tool and its version. If no, write 'No'. Please refer to the [ASF Generative Tooling Guidance](https://www.apache.org/legal/generative-tooling.html) for details. --> Generated-by: Claude Opus 4.7 --- frontend/src/app/common/util/format.util.spec.ts | 140 +++++++++++++++++++++ frontend/src/app/common/util/format.util.ts | 36 ++++++ .../user/list-item/list-item.component.html | 4 +- .../user/list-item/list-item.component.ts | 34 +---- .../user-computing-unit-list-item.component.html | 2 +- .../user-computing-unit-list-item.component.ts | 27 +--- .../dataset-detail.component.ts | 9 +- .../detail/hub-workflow-detail.component.ts | 8 +- 8 files changed, 188 insertions(+), 72 deletions(-) diff --git a/frontend/src/app/common/util/format.util.spec.ts b/frontend/src/app/common/util/format.util.spec.ts new file mode 100644 index 0000000000..54f7710a59 --- /dev/null +++ b/frontend/src/app/common/util/format.util.spec.ts @@ -0,0 +1,140 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import { formatCount, formatRelativeTime, formatSpeed, formatTime } from "./format.util"; + +describe("formatSpeed", () => { + it('returns "0.0 MB/s" for zero, negative, or undefined input', () => { + expect(formatSpeed(0)).toBe("0.0 MB/s"); + expect(formatSpeed(-1)).toBe("0.0 MB/s"); + expect(formatSpeed(undefined)).toBe("0.0 MB/s"); + }); + + it("converts bytes/s to MB/s with one decimal place", () => { + // exactly 1 MiB/s + expect(formatSpeed(1024 * 1024)).toBe("1.0 MB/s"); + // 2.5 MiB/s + expect(formatSpeed(2.5 * 1024 * 1024)).toBe("2.5 MB/s"); + }); + + it("handles sub-MB throughput by rounding to one decimal", () => { + // 512 KiB/s ≈ 0.5 MB/s + expect(formatSpeed(512 * 1024)).toBe("0.5 MB/s"); + }); + + it("handles very large throughput without overflow", () => { + const result = formatSpeed(10 * 1024 * 1024 * 1024); // 10 GiB/s + expect(result).toBe("10240.0 MB/s"); + }); +}); + +describe("formatTime", () => { + it('returns "1s" for undefined, zero, or negative input', () => { + expect(formatTime(undefined)).toBe("1s"); + expect(formatTime(0)).toBe("1s"); + expect(formatTime(-5)).toBe("1s"); + }); + + it("formats sub-minute durations in seconds", () => { + expect(formatTime(1)).toBe("1s"); + expect(formatTime(45)).toBe("45s"); + expect(formatTime(59)).toBe("59s"); + }); + + it("rounds fractional seconds", () => { + expect(formatTime(1.4)).toBe("1s"); + expect(formatTime(1.6)).toBe("2s"); + }); + + it("formats durations under one hour as minutes with optional seconds", () => { + expect(formatTime(60)).toBe("1m"); + expect(formatTime(90)).toBe("1m30s"); + expect(formatTime(125)).toBe("2m05s"); // seconds zero-padded + expect(formatTime(3599)).toBe("59m59s"); + }); + + it("formats durations of one hour or more as hours with optional minutes", () => { + expect(formatTime(3600)).toBe("1h"); + expect(formatTime(3660)).toBe("1h1m"); + expect(formatTime(7200)).toBe("2h"); + expect(formatTime(7260)).toBe("2h1m"); + // residual seconds are dropped once we hit the hour bucket + expect(formatTime(3600 + 59)).toBe("1h"); + }); +}); + +describe("formatRelativeTime", () => { + const NOW = new Date("2026-05-26T12:00:00Z").getTime(); + + beforeEach(() => { + vi.useFakeTimers(); + vi.setSystemTime(new Date(NOW)); + }); + + afterEach(() => { + vi.useRealTimers(); + }); + + it('returns "Unknown" when timestamp is undefined', () => { + expect(formatRelativeTime(undefined)).toBe("Unknown"); + }); + + it("formats sub-hour differences in minutes", () => { + expect(formatRelativeTime(NOW - 5 * 60 * 1000)).toBe("5 minutes ago"); + expect(formatRelativeTime(NOW - 59 * 60 * 1000)).toBe("59 minutes ago"); + // boundary: just-now floors to 0 + expect(formatRelativeTime(NOW)).toBe("0 minutes ago"); + }); + + it("formats sub-day differences in hours", () => { + expect(formatRelativeTime(NOW - 60 * 60 * 1000)).toBe("1 hours ago"); + expect(formatRelativeTime(NOW - 23 * 60 * 60 * 1000)).toBe("23 hours ago"); + }); + + it("formats sub-week differences in days", () => { + expect(formatRelativeTime(NOW - 24 * 60 * 60 * 1000)).toBe("1 days ago"); + expect(formatRelativeTime(NOW - 6 * 24 * 60 * 60 * 1000)).toBe("6 days ago"); + }); + + it("formats sub-month differences in weeks", () => { + expect(formatRelativeTime(NOW - 7 * 24 * 60 * 60 * 1000)).toBe("1 weeks ago"); + expect(formatRelativeTime(NOW - 3 * 7 * 24 * 60 * 60 * 1000)).toBe("3 weeks ago"); + }); + + it("falls back to a locale date string for differences beyond four weeks", () => { + const oldTimestamp = NOW - 5 * 7 * 24 * 60 * 60 * 1000; + const expected = new Date(oldTimestamp).toLocaleDateString(); + expect(formatRelativeTime(oldTimestamp)).toBe(expected); + }); +}); + +describe("formatCount", () => { + it("renders counts under 1000 as plain integers", () => { + expect(formatCount(0)).toBe("0"); + expect(formatCount(1)).toBe("1"); + expect(formatCount(999)).toBe("999"); + }); + + it("abbreviates counts of 1000+ to one-decimal thousands", () => { + expect(formatCount(1000)).toBe("1.0k"); + expect(formatCount(1500)).toBe("1.5k"); + expect(formatCount(12345)).toBe("12.3k"); + expect(formatCount(999999)).toBe("1000.0k"); + }); +}); diff --git a/frontend/src/app/common/util/format.util.ts b/frontend/src/app/common/util/format.util.ts index 2ac5f22979..9046db5fa3 100644 --- a/frontend/src/app/common/util/format.util.ts +++ b/frontend/src/app/common/util/format.util.ts @@ -54,3 +54,39 @@ export const formatTime = (seconds?: number): string => { return min === 0 ? `${h}h` : `${h}h${min}m`; }; + +/** + * Format a past timestamp as a relative time string (e.g. "5 minutes ago"). + */ +export const formatRelativeTime = (timestamp: number | undefined): string => { + if (timestamp === undefined) { + return "Unknown"; + } + + const timeDifference = new Date().getTime() - timestamp; + const minutesAgo = Math.floor(timeDifference / (1000 * 60)); + const hoursAgo = Math.floor(timeDifference / (1000 * 60 * 60)); + const daysAgo = Math.floor(timeDifference / (1000 * 60 * 60 * 24)); + const weeksAgo = Math.floor(daysAgo / 7); + + if (minutesAgo < 60) { + return `${minutesAgo} minutes ago`; + } else if (hoursAgo < 24) { + return `${hoursAgo} hours ago`; + } else if (daysAgo < 7) { + return `${daysAgo} days ago`; + } else if (weeksAgo < 4) { + return `${weeksAgo} weeks ago`; + } + return new Date(timestamp).toLocaleDateString(); +}; + +/** + * Format a count, abbreviating values >= 1000 (e.g. 1500 -> "1.5k"). + */ +export const formatCount = (count: number): string => { + if (count >= 1000) { + return (count / 1000).toFixed(1) + "k"; + } + return count.toString(); +}; diff --git a/frontend/src/app/dashboard/component/user/list-item/list-item.component.html b/frontend/src/app/dashboard/component/user/list-item/list-item.component.html index 16e190b41f..20b98b71ac 100644 --- a/frontend/src/app/dashboard/component/user/list-item/list-item.component.html +++ b/frontend/src/app/dashboard/component/user/list-item/list-item.component.html @@ -147,7 +147,7 @@ nzFlex="90px" class="resource-info"> Created:<br /> - {{ formatTime(entry.creationTime) }} + {{ formatRelativeTime(entry.creationTime) }} </div> <div @@ -155,7 +155,7 @@ nzFlex="90px" class="resource-info"> Edited:<br /> - {{ formatTime(entry.lastModifiedTime) }} + {{ formatRelativeTime(entry.lastModifiedTime) }} </div> <div diff --git a/frontend/src/app/dashboard/component/user/list-item/list-item.component.ts b/frontend/src/app/dashboard/component/user/list-item/list-item.component.ts index 4cb8af764c..e57cca2013 100644 --- a/frontend/src/app/dashboard/component/user/list-item/list-item.component.ts +++ b/frontend/src/app/dashboard/component/user/list-item/list-item.component.ts @@ -42,6 +42,7 @@ import { HubWorkflowDetailComponent } from "../../../../hub/component/workflow/d import { ActionType, HubService } from "../../../../hub/service/hub.service"; import { DownloadService } from "src/app/dashboard/service/user/download/download.service"; import { formatSize } from "src/app/common/util/size-formatter.util"; +import { formatCount, formatRelativeTime } from "src/app/common/util/format.util"; import { DatasetService, DEFAULT_DATASET_NAME } from "../../../service/user/dataset/dataset.service"; import { NotificationService } from "../../../../common/service/notification/notification.service"; import { @@ -372,31 +373,7 @@ export class ListItemComponent implements OnChanges { } } - formatTime(timestamp: number | undefined): string { - if (timestamp === undefined) { - return "Unknown"; // Return "Unknown" if the timestamp is undefined - } - - const currentTime = new Date().getTime(); - const timeDifference = currentTime - timestamp; - - const minutesAgo = Math.floor(timeDifference / (1000 * 60)); - const hoursAgo = Math.floor(timeDifference / (1000 * 60 * 60)); - const daysAgo = Math.floor(timeDifference / (1000 * 60 * 60 * 24)); - const weeksAgo = Math.floor(daysAgo / 7); - - if (minutesAgo < 60) { - return `${minutesAgo} minutes ago`; - } else if (hoursAgo < 24) { - return `${hoursAgo} hours ago`; - } else if (daysAgo < 7) { - return `${daysAgo} days ago`; - } else if (weeksAgo < 4) { - return `${weeksAgo} weeks ago`; - } else { - return new Date(timestamp).toLocaleDateString(); - } - } + formatRelativeTime = formatRelativeTime; openDetailModal(wid: number | undefined): void { const modalRef = this.modal.create({ @@ -465,12 +442,7 @@ export class ListItemComponent implements OnChanges { } } - formatCount(count: number): string { - if (count >= 1000) { - return (count / 1000).toFixed(1) + "k"; - } - return count.toString(); - } + formatCount = formatCount; // alias for formatSize formatSize = formatSize; diff --git a/frontend/src/app/dashboard/component/user/user-computing-unit/user-computing-unit-list-item/user-computing-unit-list-item.component.html b/frontend/src/app/dashboard/component/user/user-computing-unit/user-computing-unit-list-item/user-computing-unit-list-item.component.html index 740fc73bcc..fb8afa729e 100644 --- a/frontend/src/app/dashboard/component/user/user-computing-unit/user-computing-unit-list-item/user-computing-unit-list-item.component.html +++ b/frontend/src/app/dashboard/component/user/user-computing-unit/user-computing-unit-list-item/user-computing-unit-list-item.component.html @@ -151,7 +151,7 @@ nzFlex="100px" class="resource-info"> Created:<br /> - {{ formatTime(unit.creationTime) }} + {{ formatRelativeTime(unit.creationTime) }} </div> <div diff --git a/frontend/src/app/dashboard/component/user/user-computing-unit/user-computing-unit-list-item/user-computing-unit-list-item.component.ts b/frontend/src/app/dashboard/component/user/user-computing-unit/user-computing-unit-list-item/user-computing-unit-list-item.component.ts index 605afd2bda..fbd7d01e52 100644 --- a/frontend/src/app/dashboard/component/user/user-computing-unit/user-computing-unit-list-item/user-computing-unit-list-item.component.ts +++ b/frontend/src/app/dashboard/component/user/user-computing-unit/user-computing-unit-list-item/user-computing-unit-list-item.component.ts @@ -53,6 +53,7 @@ import { getComputingUnitCpuLimitUnit, } from "../../../../../common/util/computing-unit.util"; import { GuiConfigService } from "../../../../../common/service/gui-config.service"; +import { formatRelativeTime } from "../../../../../common/util/format.util"; import { ComputingUnitActionsService } from "../../../../../common/service/computing-unit/computing-unit-actions/computing-unit-actions.service"; import { NzCardComponent } from "ng-zorro-antd/card"; import { NzRowDirective, NzColDirective } from "ng-zorro-antd/grid"; @@ -312,31 +313,7 @@ export class UserComputingUnitListItemComponent implements OnInit { return this.gpuOptions.length > 1 || (this.gpuOptions.length === 1 && this.gpuOptions[0] !== "0"); } - formatTime(timestamp: number | undefined): string { - if (timestamp === undefined) { - return "Unknown"; // Return "Unknown" if the timestamp is undefined - } - - const currentTime = new Date().getTime(); - const timeDifference = currentTime - timestamp; - - const minutesAgo = Math.floor(timeDifference / (1000 * 60)); - const hoursAgo = Math.floor(timeDifference / (1000 * 60 * 60)); - const daysAgo = Math.floor(timeDifference / (1000 * 60 * 60 * 24)); - const weeksAgo = Math.floor(daysAgo / 7); - - if (minutesAgo < 60) { - return `${minutesAgo} minutes ago`; - } else if (hoursAgo < 24) { - return `${hoursAgo} hours ago`; - } else if (daysAgo < 7) { - return `${daysAgo} days ago`; - } else if (weeksAgo < 4) { - return `${weeksAgo} weeks ago`; - } else { - return new Date(timestamp).toLocaleDateString(); - } - } + formatRelativeTime = formatRelativeTime; public async onClickOpenShareAccess(cuid: number): Promise<void> { this.computingUnitActionsService.openShareAccessModal(cuid, false); diff --git a/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/dataset-detail.component.ts b/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/dataset-detail.component.ts index 85ca8d27cc..cc2d794ced 100644 --- a/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/dataset-detail.component.ts +++ b/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/dataset-detail.component.ts @@ -41,7 +41,7 @@ import { NzModalService } from "ng-zorro-antd/modal"; import { AdminSettingsService } from "../../../../service/admin/settings/admin-settings.service"; import { HttpErrorResponse, HttpStatusCode } from "@angular/common/http"; import { Subscription } from "rxjs"; -import { formatSpeed, formatTime } from "src/app/common/util/format.util"; +import { formatCount, formatSpeed, formatTime } from "src/app/common/util/format.util"; import { format } from "date-fns"; import { NgIf, NgClass, NgFor } from "@angular/common"; import { NzCardComponent, NzCardMetaComponent } from "ng-zorro-antd/card"; @@ -725,12 +725,7 @@ export class DatasetDetailComponent implements OnInit { // alias for formatSize formatSize = formatSize; - formatCount(count: number): string { - if (count >= 1000) { - return (count / 1000).toFixed(1) + "k"; - } - return count.toString(); - } + formatCount = formatCount; formatTime = formatTime; formatSpeed = formatSpeed; diff --git a/frontend/src/app/hub/component/workflow/detail/hub-workflow-detail.component.ts b/frontend/src/app/hub/component/workflow/detail/hub-workflow-detail.component.ts index 5eb1561b50..5d76382f76 100644 --- a/frontend/src/app/hub/component/workflow/detail/hub-workflow-detail.component.ts +++ b/frontend/src/app/hub/component/workflow/detail/hub-workflow-detail.component.ts @@ -41,6 +41,7 @@ import { MarkdownDescriptionComponent } from "../../../../dashboard/component/us import { WorkflowEditorComponent } from "../../../../workspace/component/workflow-editor/workflow-editor.component"; import { MiniMapComponent } from "../../../../workspace/component/workflow-editor/mini-map/mini-map.component"; import { FormlyRepeatDndComponent } from "../../../../common/formly/repeat-dnd/repeat-dnd.component"; +import { formatCount } from "../../../../common/util/format.util"; export const THROTTLE_TIME_MS = 1000; @@ -266,12 +267,7 @@ export class HubWorkflowDetailComponent implements AfterViewInit, OnDestroy, OnI } } - formatCount(count: number): string { - if (count >= 1000) { - return (count / 1000).toFixed(1) + "k"; - } - return count.toString(); - } + formatCount = formatCount; changeViewDisplayStyle() { this.displayPreciseViewCount = !this.displayPreciseViewCount;
