Make New Dashboard the default dashboard (#26996)

Add UsageStats alert to new dashboard
Update wording of "back to legacy dashboard", "try new dashboard" buttons

Signed-off-by: Alan Guo aguo@anyscale.com

dashboard/client/src/App.tsx

@@ -2,7 +2,7 @@ import { CssBaseline } from "@material-ui/core";
 import { ThemeProvider } from "@material-ui/core/styles";
 import React, { Suspense, useEffect, useState } from "react";
 import { Provider } from "react-redux";
-import { HashRouter, Route, Switch } from "react-router-dom";
+import { HashRouter, Redirect, Route, Switch } from "react-router-dom";
 import Dashboard from "./pages/dashboard/Dashboard";
 import Events from "./pages/event/Events";
 import Loading from "./pages/exception/Loading";
@@ -83,7 +83,12 @@ const App = () => {
             <CssBaseline />
             <HashRouter>
               <Switch>
-                <Route component={Dashboard} exact path="/" />
+                <Route
+                  component={() => <Redirect to="/node" />}
+                  exact
+                  path="/"
+                />
+                <Route component={Dashboard} exact path="/legacy" />
                 <Route
                   render={(props) => (
                     <BasicLayout {...props} setTheme={setTheme} theme={theme}>

dashboard/client/src/common/UsageStatsAlert.tsx

@@ -0,0 +1,37 @@
+import { Alert } from "@material-ui/lab";
+import React, { useEffect, useState } from "react";
+import { getUsageStatsEnabled } from "../api";
+
+export const UsageStatsAlert = () => {
+  const [usageStatsPromptEnabled, setUsageStatsPromptEnabled] = useState(false);
+  const [usageStatsEnabled, setUsageStatsEnabled] = useState(false);
+  useEffect(() => {
+    getUsageStatsEnabled().then((res) => {
+      setUsageStatsPromptEnabled(res.usageStatsPromptEnabled);
+      setUsageStatsEnabled(res.usageStatsEnabled);
+    });
+  }, []);
+
+  return usageStatsPromptEnabled ? (
+    <Alert style={{ marginTop: 30 }} severity="info">
+      {usageStatsEnabled ? (
+        <span>
+          Usage stats collection is enabled. To disable this, add
+          `--disable-usage-stats` to the command that starts the cluster, or run
+          the following command: `ray disable-usage-stats` before starting the
+          cluster. See{" "}
+          <a
+            href="https://docs.ray.io/en/master/cluster/usage-stats.html"
+            target="_blank"
+            rel="noreferrer"
+          >
+            https://docs.ray.io/en/master/cluster/usage-stats.html
+          </a>{" "}
+          for more details.
+        </span>
+      ) : (
+        <span>Usage stats collection is disabled.</span>
+      )}
+    </Alert>
+  ) : null;
+};

dashboard/client/src/pages/dashboard/Dashboard.tsx

@@ -7,16 +7,11 @@ import {
   Theme,
   Typography,
 } from "@material-ui/core";
-import { Alert } from "@material-ui/lab";
+import React, { useCallback, useEffect, useRef } from "react";
-import React, { useCallback, useEffect, useRef, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useHistory } from "react-router-dom";
-import {
+import { getActorGroups, getNodeInfo, getTuneAvailability } from "../../api";
-  getActorGroups,
+import { UsageStatsAlert } from "../../common/UsageStatsAlert";
-  getNodeInfo,
-  getTuneAvailability,
-  getUsageStatsEnabled,
-} from "../../api";
 import { StoreState } from "../../store";
 import LastUpdated from "./LastUpdated";
 import LogicalView from "./logical-view/LogicalView";
@@ -105,14 +100,6 @@ const Dashboard: React.FC = () => {
   }
 
   const SelectedComponent = tabs[tab].component;
-  const [usageStatsPromptEnabled, setUsageStatsPromptEnabled] = useState(false);
-  const [usageStatsEnabled, setUsageStatsEnabled] = useState(false);
-  useEffect(() => {
-    getUsageStatsEnabled().then((res) => {
-      setUsageStatsPromptEnabled(res.usageStatsPromptEnabled);
-      setUsageStatsEnabled(res.usageStatsEnabled);
-    });
-  }, []);
   return (
     <div className={classes.root}>
       <Typography variant="h5">Ray Dashboard</Typography>
@@ -123,7 +110,7 @@ const Dashboard: React.FC = () => {
         color="primary"
         onClick={() => history.push("/node")}
       >
-        Try Experimental Dashboard
+        Back to new dashboard
       </Button>
       <Tabs
         className={classes.tabs}
@@ -137,28 +124,7 @@ const Dashboard: React.FC = () => {
         ))}
       </Tabs>
       <SelectedComponent />
-      {usageStatsPromptEnabled ? (
+      <UsageStatsAlert />
-        <Alert style={{ marginTop: 30 }} severity="info">
-          {usageStatsEnabled ? (
-            <span>
-              Usage stats collection is enabled. To disable this, add
-              `--disable-usage-stats` to the command that starts the cluster, or
-              run the following command: `ray disable-usage-stats` before
-              starting the cluster. See{" "}
-              <a
-                href="https://docs.ray.io/en/master/cluster/usage-stats.html"
-                target="_blank"
-                rel="noreferrer"
-              >
-                https://docs.ray.io/en/master/cluster/usage-stats.html
-              </a>{" "}
-              for more details.
-            </span>
-          ) : (
-            <span>Usage stats collection is disabled.</span>
-          )}
-        </Alert>
-      ) : null}
       <LastUpdated />
     </div>
   );

dashboard/client/src/pages/layout/index.tsx

@@ -9,6 +9,7 @@ import { NightsStay, VerticalAlignTop, WbSunny } from "@material-ui/icons";
 import classnames from "classnames";
 import React, { PropsWithChildren } from "react";
 import { RouteComponentProps } from "react-router-dom";
+import { UsageStatsAlert } from "../../common/UsageStatsAlert";
 
 import SpeedTools from "../../components/SpeedTools";
 import Logo from "../../logo.svg";
@@ -130,9 +131,9 @@ const BasicLayout = (
           <ListItem
             button
             className={classnames(classes.menuItem)}
-            onClick={() => history.push("/")}
+            onClick={() => history.push("/legacy")}
           >
-            <ListItemText>BACK TO LEGACY DASHBOARD</ListItemText>
+            <ListItemText>TO LEGACY DASHBOARD</ListItemText>
           </ListItem>
           <ListItem>
             <IconButton
@@ -159,7 +160,10 @@ const BasicLayout = (
           <SpeedTools />
         </List>
       </Drawer>
-      <div className={classes.child}>{children}</div>
+      <div className={classes.child}>
+        {children}
+        <UsageStatsAlert />
+      </div>
     </div>
   );
 };

dashboard/tests/cypress/e2e/test_render.cy.js

@@ -2,7 +2,5 @@ describe('Ray Dashboard Test', () => {
     it('opens a new Ray dashboard', () => {
         cy.visit('localhost:8653')
         cy.contains('Ray')
-        cy.contains('Memory').click()
-        cy.contains('Tune').click()
     })
   })