[Dashboard] Display duration in milliseconds if under 1 second. (#49126)

Signed-off-by: Colton Woodruff <coltwood93@gmail.com>
ray-project · Dec 11, 2024 · 4e55864 · 4e55864
1 parent 789e1c8
commit 4e55864
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 7 deletions.
diff --git a/python/ray/dashboard/client/src/common/DurationText/DurationText.component.test.tsx b/python/ray/dashboard/client/src/common/DurationText/DurationText.component.test.tsx
@@ -7,14 +7,17 @@ import { DurationText } from "./DurationText";
 describe("DurationText", () => {
   it("renders", async () => {
     const { rerender } = render(
+      <DurationText startTime={new Date(100000)} endTime={new Date(100500)} />,
+    );
+    expect(await screen.findByText("500ms")).toBeInTheDocument();
+    rerender(
       <DurationText startTime={new Date(100000)} endTime={new Date(105000)} />,
     );
-
-    expect(await screen.findByText("5s")).toBeInTheDocument();
+    expect(await screen.findByText("5s 000ms")).toBeInTheDocument();
     rerender(
       <DurationText startTime={new Date(100000)} endTime={new Date(110000)} />,
     );
-    expect(await screen.findByText("10s")).toBeInTheDocument();
+    expect(await screen.findByText("10s 000ms")).toBeInTheDocument();
     rerender(
       <DurationText startTime={new Date(100000)} endTime={new Date(200000)} />,
     );
@@ -66,13 +69,13 @@ describe("DurationText", () => {
 
     MockDate.set(mockDate1);
     const { rerender } = render(<DurationText startTime={startTime} />);
-    expect(await screen.findByText("5s")).toBeInTheDocument();
+    expect(await screen.findByText("5s 000ms")).toBeInTheDocument();
 
     MockDate.set(mockDate2);
     act(() => {
       jest.advanceTimersByTime(1000);
     });
-    expect(await screen.findByText("6s")).toBeInTheDocument();
+    expect(await screen.findByText("6s 000ms")).toBeInTheDocument();
 
     MockDate.set(mockDate3);
     act(() => {

diff --git a/python/ray/dashboard/client/src/common/DurationText/DurationText.tsx b/python/ray/dashboard/client/src/common/DurationText/DurationText.tsx
@@ -27,8 +27,10 @@ export const DurationText = ({ startTime, endTime }: DurationTextProps) => {
 
   let durationText: string;
   let refreshInterval = 1000;
-  if (duration.asMinutes() < 1) {
-    durationText = duration.format("s[s]");
+  if (duration.asSeconds() < 1) {
+    durationText = duration.format("SSS[ms]");
+  } else if (duration.asMinutes() < 1) {
+    durationText = duration.format("s[s] SSS[ms]");
   } else if (duration.asHours() < 1) {
     durationText = duration.format("m[m] s[s]");
   } else if (duration.asDays() < 1) {