Merge branch 'master' into master

Author: am-kinetica

python/ray/_private/internal_api.py

@@ -53,7 +53,9 @@ def memory_summary(
     ) + store_stats_summary(reply)
 
 
-def get_memory_info_reply(state, node_manager_address=None, node_manager_port=None):
+def get_memory_info_reply(
+    state, node_manager_address=None, node_manager_port=None, timeout_seconds=60.0
+):
     """Returns global memory info."""
 
     from ray._private.grpc_utils import init_grpc_channel
@@ -86,7 +88,7 @@ def get_memory_info_reply(state, node_manager_address=None, node_manager_port=No
     stub = node_manager_pb2_grpc.NodeManagerServiceStub(channel)
     reply = stub.FormatGlobalMemoryInfo(
         node_manager_pb2.FormatGlobalMemoryInfoRequest(include_memory_info=False),
-        timeout=60.0,
+        timeout=timeout_seconds,
     )
     return reply
 

python/ray/dashboard/client/src/App.tsx

@@ -218,6 +218,7 @@ const App = () => {
     useState(false);
   const [authenticationError, setAuthenticationError] =
     useState<string | undefined>();
+
   useEffect(() => {
     getNodeList().then((res) => {
       if (res?.data?.data?.summary) {
@@ -381,7 +382,12 @@ const App = () => {
       <ThemeProvider theme={currentTheme}>
         <Suspense fallback={Loading}>
           <GlobalContext.Provider
-            value={{ ...context, currentTimeZone, themeMode, toggleTheme }}
+            value={{
+              ...context,
+              currentTimeZone,
+              themeMode,
+              toggleTheme,
+            }}
           >
             <CssBaseline />
             <TokenAuthenticationDialog

python/ray/dashboard/client/src/common/constants.ts

@@ -1,3 +1,4 @@
 export const API_REFRESH_INTERVAL_MS = 4000;
 // Per job page refresh interval.
 export const PER_JOB_PAGE_REFRESH_INTERVAL_MS = 10000;
+export const DASHBOARD_DATA_LOADED_EVENT = "ray-dashboard-data-loaded";

python/ray/dashboard/client/src/pages/layout/MainNavLayout.component.test.tsx

@@ -4,7 +4,7 @@ import React from "react";
 import { Link, MemoryRouter, Outlet, Route, Routes } from "react-router-dom";
 import { STYLE_WRAPPER } from "../../util/test-utils";
 import { MainNavPageInfo } from "./mainNavContext";
-import { MainNavLayout } from "./MainNavLayout";
+import { formatFreshnessLabel, MainNavLayout } from "./MainNavLayout";
 
 const TestPageA = () => {
   return (
@@ -109,6 +109,17 @@ const TestApp = ({ location = "/" }: { location?: string }) => {
 };
 
 describe("MainNavLayout", () => {
+  it("formats dashboard data freshness", () => {
+    expect(formatFreshnessLabel(undefined, 1_000)).toBe("No data loaded");
+    expect(formatFreshnessLabel(1_000, 5_999)).toBe("Updated just now");
+    expect(formatFreshnessLabel(1_000, 30_000)).toBe("Updated 30s ago");
+    expect(formatFreshnessLabel(1_000, 60_999)).toBe("Updated 55s ago");
+    expect(formatFreshnessLabel(1_000, 61_000)).toBe("Updated 1m ago");
+    expect(formatFreshnessLabel(1_000, 121_000)).toBe("Updated 2m ago");
+    expect(formatFreshnessLabel(1_000, 7_201_000)).toBe("Updated 2h ago");
+    expect(formatFreshnessLabel(1_000, 172_801_000)).toBe("Updated 2d ago");
+  });
+
   it("navigates and renders breadcrumbs correctly", async () => {
     const user = userEvent.setup();
 

python/ray/dashboard/client/src/pages/layout/MainNavLayout.tsx

@@ -4,10 +4,13 @@ import {
   RiBookMarkLine,
   RiFeedbackLine,
   RiMoonLine,
+  RiRefreshLine,
   RiSunLine,
 } from "react-icons/ri/";
 import { Outlet, Link as RouterLink } from "react-router-dom";
+import { useSWRConfig } from "swr";
 import { GlobalContext } from "../../App";
+import { DASHBOARD_DATA_LOADED_EVENT } from "../../common/constants";
 import { SearchTimezone } from "../../components/SearchComponent";
 import Logo from "../../logo.svg";
 import { MainNavContext, useMainNavState } from "./mainNavContext";
@@ -173,6 +176,7 @@ const MainNavBar = () => {
         </Typography>
       ))}
       <Box sx={{ flexGrow: 1 }}></Box>
+      <DashboardDataFreshness currentTimeZone={currentTimeZone} />
       <Box sx={{ marginRight: 2 }}>
         {!urlTheme && (
           <Tooltip title={themeMode === "light" ? "Dark mode" : "Light mode"}>
@@ -223,6 +227,142 @@ const MainNavBar = () => {
   );
 };
 
+const DashboardDataFreshness = ({
+  currentTimeZone,
+}: {
+  currentTimeZone: string | undefined;
+}) => {
+  const { mutate } = useSWRConfig();
+  const [lastDataLoadTime, setLastDataLoadTime] = React.useState<number>();
+  const [now, setNow] = React.useState(Date.now());
+  const [isRefreshingData, setIsRefreshingData] = React.useState(false);
+
+  React.useEffect(() => {
+    const handleDashboardDataLoaded = () => {
+      setLastDataLoadTime(Date.now());
+    };
+
+    window.addEventListener(
+      DASHBOARD_DATA_LOADED_EVENT,
+      handleDashboardDataLoaded,
+    );
+
+    return () => {
+      window.removeEventListener(
+        DASHBOARD_DATA_LOADED_EVENT,
+        handleDashboardDataLoaded,
+      );
+    };
+  }, []);
+
+  React.useEffect(() => {
+    const interval = window.setInterval(() => {
+      setNow(Date.now());
+    }, 5000);
+
+    return () => {
+      window.clearInterval(interval);
+    };
+  }, []);
+
+  const refreshDashboardData = async () => {
+    setIsRefreshingData(true);
+    try {
+      await mutate(() => true);
+    } finally {
+      setIsRefreshingData(false);
+    }
+  };
+
+  return (
+    <Box
+      sx={{
+        alignItems: "center",
+        display: "flex",
+        flexShrink: 0,
+        gap: 1,
+        marginRight: 1,
+      }}
+    >
+      <Tooltip
+        title={
+          lastDataLoadTime
+            ? `Last successful data load: ${formatLastDataLoadTime(
+                lastDataLoadTime,
+                currentTimeZone,
+              )}`
+            : "No dashboard data has loaded yet."
+        }
+      >
+        <Typography
+          color="text.secondary"
+          sx={{ whiteSpace: "nowrap" }}
+          variant="caption"
+        >
+          {formatFreshnessLabel(lastDataLoadTime, now)}
+        </Typography>
+      </Tooltip>
+      <Tooltip title="Refresh dashboard data">
+        <span>
+          <IconButton
+            aria-label="Refresh dashboard data"
+            disabled={isRefreshingData}
+            onClick={refreshDashboardData}
+            size="large"
+            sx={(theme) => ({ color: theme.palette.text.secondary })}
+          >
+            <RiRefreshLine />
+          </IconButton>
+        </span>
+      </Tooltip>
+    </Box>
+  );
+};
+
+export const formatLastDataLoadTime = (
+  lastDataLoadTime: number,
+  currentTimeZone: string | undefined,
+) => {
+  return new Date(lastDataLoadTime).toLocaleString(
+    undefined,
+    currentTimeZone ? { timeZone: currentTimeZone } : undefined,
+  );
+};
+
+export const formatFreshnessLabel = (
+  lastDataLoadTime: number | undefined,
+  now: number,
+) => {
+  if (!lastDataLoadTime) {
+    return "No data loaded";
+  }
+
+  const ageMs = Math.max(0, now - lastDataLoadTime);
+  const fiveSecondsMs = 5 * 1000;
+  const minuteMs = 60 * 1000;
+  const hourMs = 60 * minuteMs;
+  const dayMs = 24 * hourMs;
+
+  if (ageMs < fiveSecondsMs) {
+    return "Updated just now";
+  }
+
+  if (ageMs < minuteMs) {
+    const ageSeconds = Math.min(55, Math.round(ageMs / fiveSecondsMs) * 5);
+    return `Updated ${ageSeconds}s ago`;
+  }
+
+  if (ageMs < hourMs) {
+    return `Updated ${Math.floor(ageMs / minuteMs)}m ago`;
+  }
+
+  if (ageMs < dayMs) {
+    return `Updated ${Math.floor(ageMs / hourMs)}h ago`;
+  }
+
+  return `Updated ${Math.floor(ageMs / dayMs)}d ago`;
+};
+
 const MainNavBreadcrumbs = () => {
   const { mainNavPageHierarchy } = useContext(MainNavContext);
 

python/ray/dashboard/client/src/service/requestHandlers.ts

@@ -10,6 +10,7 @@
 
 import axios, { AxiosRequestConfig, AxiosResponse } from "axios";
 import { AUTHENTICATION_ERROR_EVENT } from "../authentication/constants";
+import { DASHBOARD_DATA_LOADED_EVENT } from "../common/constants";
 
 /**
  * This function formats URLs such that the user's browser
@@ -36,6 +37,7 @@ export { axiosInstance };
 // Response interceptor: Handle 401/403 errors
 axiosInstance.interceptors.response.use(
   (response) => {
+    window.dispatchEvent(new Event(DASHBOARD_DATA_LOADED_EVENT));
     return response;
   },
   (error) => {

python/ray/data/BUILD.bazel

@@ -1738,6 +1738,20 @@ py_test(
     ],
 )
 
+py_test(
+    name = "test_usage",
+    size = "small",
+    srcs = ["tests/test_usage.py"],
+    tags = [
+        "exclusive",
+        "team:data",
+    ],
+    deps = [
+        ":conftest",
+        "//:ray_lib",
+    ],
+)
+
 py_test(
     name = "test_util",
     size = "small",