Polish the new IA for dashboard (#31770)

Signed-off-by: Alan Guo <aguo@anyscale.com> Update to more closely match the design spec.
ray-project · Jan 23, 2023 · cdb3780 · cdb3780
1 parent c8c1da7
commit cdb3780
Show file tree

Hide file tree

Showing 15 changed files with 180 additions and 42 deletions.
diff --git a/dashboard/client/src/App.tsx b/dashboard/client/src/App.tsx
@@ -8,6 +8,7 @@ import Events from "./pages/event/Events";
 import Loading from "./pages/exception/Loading";
 import JobList, { NewIAJobsPage } from "./pages/job";
 import { JobDetailChartsPage } from "./pages/job/JobDetail";
+import { JobDetailActorsPage } from "./pages/job/JobDetailActorPage";
 import { JobDetailInfoPage } from "./pages/job/JobDetailInfoPage";
 import { JobDetailLayout } from "./pages/job/JobDetailLayout";
 import { DEFAULT_VALUE, MainNavContext } from "./pages/layout/mainNavContext";
@@ -205,11 +206,19 @@ const App = () => {
                       <Route
                         element={
                           <SideTabPage tabId="charts">
-                            <JobDetailChartsPage />
+                            <JobDetailChartsPage newIA />
                           </SideTabPage>
                         }
                         path=""
                       />
+                      <Route
+                        element={
+                          <SideTabPage tabId="actors">
+                            <JobDetailActorsPage />
+                          </SideTabPage>
+                        }
+                        path="actors"
+                      />
                     </Route>
                   </Route>
                   <Route element={<NewIALogsPage />} path="logs">

diff --git a/dashboard/client/src/common/CollapsibleSection.tsx b/dashboard/client/src/common/CollapsibleSection.tsx
@@ -1,6 +1,8 @@
 import { createStyles, makeStyles, Typography } from "@material-ui/core";
-import React, { PropsWithChildren, useState } from "react";
-import { RiArrowDownSLine, RiArrowUpSLine } from "react-icons/ri";
+import classNames from "classnames";
+import React, { PropsWithChildren, useEffect, useState } from "react";
+import { RiArrowDownSLine, RiArrowRightSLine } from "react-icons/ri";
+import { ClassNameProps } from "./props";
 
 const useStyles = makeStyles((theme) =>
   createStyles({
@@ -10,32 +12,50 @@ const useStyles = makeStyles((theme) =>
       flexWrap: "nowrap",
       alignItems: "center",
       fontWeight: 500,
+      cursor: "pointer",
     },
     icon: {
       marginRight: theme.spacing(1),
       width: 24,
       height: 24,
     },
     body: {
-      marginTop: theme.spacing(3),
+      marginTop: theme.spacing(1),
+    },
+    bodyHidden: {
+      display: "none",
     },
   }),
 );
 
-type CollapsibleSectionProps = PropsWithChildren<{
-  title: string;
-  startExpanded?: boolean;
-  className?: string;
-}>;
+type CollapsibleSectionProps = PropsWithChildren<
+  {
+    title: string;
+    startExpanded?: boolean;
+    /**
+     * An optimization to not avoid re-rendering the contents of the collapsible section.
+     * When enabled, we will keep the content around when collapsing but hide it via css.
+     */
+    keepRendered?: boolean;
+  } & ClassNameProps
+>;
 
 export const CollapsibleSection = ({
   title,
   startExpanded = false,
   className,
   children,
+  keepRendered,
 }: CollapsibleSectionProps) => {
   const classes = useStyles();
   const [expanded, setExpanded] = useState(startExpanded);
+  const [rendered, setRendered] = useState(expanded);
+
+  useEffect(() => {
+    if (expanded) {
+      setRendered(true);
+    }
+  }, [expanded]);
 
   const handleExpandClick = () => {
     setExpanded(!expanded);
@@ -51,11 +71,19 @@ export const CollapsibleSection = ({
         {expanded ? (
           <RiArrowDownSLine className={classes.icon} />
         ) : (
-          <RiArrowUpSLine className={classes.icon} />
+          <RiArrowRightSLine className={classes.icon} />
         )}
         {title}
       </Typography>
-      {expanded && <div className={classes.body}>{children}</div>}
+      {(expanded || (keepRendered && rendered)) && (
+        <div
+          className={classNames(classes.body, {
+            [classes.bodyHidden]: !expanded,
+          })}
+        >
+          {children}
+        </div>
+      )}
     </div>
   );
 };
diff --git a/dashboard/client/src/pages/job/JobDetail.tsx b/dashboard/client/src/pages/job/JobDetail.tsx
@@ -25,7 +25,13 @@ const useStyle = makeStyles((theme) => ({
   },
 }));
 
-export const JobDetailChartsPage = () => {
+type JobDetailChartsPageProps = {
+  newIA?: boolean;
+};
+
+export const JobDetailChartsPage = ({
+  newIA = false,
+}: JobDetailChartsPageProps) => {
   const classes = useStyle();
   const { job, msg, params } = useJobDetail();
   const jobId = params.id;

diff --git a/dashboard/client/src/pages/job/JobDetailActorPage.tsx b/dashboard/client/src/pages/job/JobDetailActorPage.tsx
@@ -0,0 +1,37 @@
+import { makeStyles } from "@material-ui/core";
+import React from "react";
+
+import TitleCard from "../../components/TitleCard";
+import ActorList from "../actor/ActorList";
+import { MainNavPageInfo } from "../layout/mainNavContext";
+import { useJobDetail } from "./hook/useJobDetail";
+
+const useStyle = makeStyles((theme) => ({
+  root: {
+    padding: theme.spacing(2),
+  },
+}));
+
+export const JobDetailActorsPage = () => {
+  const classes = useStyle();
+  const { job, params } = useJobDetail();
+
+  const pageInfo = job
+    ? {
+        title: "Actors",
+        id: "actors",
+        path: job.job_id ? `/new/jobs/${job.job_id}/actors` : undefined,
+      }
+    : {
+        title: "Actors",
+        id: "actors",
+        path: undefined,
+      };
+
+  return (
+    <div className={classes.root}>
+      <MainNavPageInfo pageInfo={pageInfo} />
+      <TitleCard title="Actors">{<ActorList jobId={params.id} />}</TitleCard>
+    </div>
+  );
+};
diff --git a/dashboard/client/src/pages/job/JobDetailLayout.tsx b/dashboard/client/src/pages/job/JobDetailLayout.tsx
@@ -1,5 +1,9 @@
 import React from "react";
-import { RiInformationLine, RiLineChartLine } from "react-icons/ri";
+import {
+  RiGradienterLine,
+  RiInformationLine,
+  RiLineChartLine,
+} from "react-icons/ri";
 import { MainNavPageInfo } from "../layout/mainNavContext";
 import { SideTabLayout, SideTabRouteLink } from "../layout/SideTabLayout";
 import { useJobDetail } from "./hook/useJobDetail";
@@ -29,6 +33,12 @@ export const JobDetailLayout = () => {
         title="Charts"
         Icon={RiLineChartLine}
       />
+      <SideTabRouteLink
+        to="actors"
+        tabId="actors"
+        title="Actors"
+        Icon={RiGradienterLine}
+      />
     </SideTabLayout>
   );
 };
diff --git a/dashboard/client/src/pages/layout/MainNavLayout.tsx b/dashboard/client/src/pages/layout/MainNavLayout.tsx
@@ -88,13 +88,14 @@ const useMainNavBarStyles = makeStyles((theme) =>
       boxShadow: "0px 1px 0px #D2DCE6",
     },
     logo: {
-      width: 60,
       display: "flex",
       justifyContent: "center",
+      marginLeft: theme.spacing(2),
+      marginRight: theme.spacing(3),
     },
     navItem: {
-      marginRight: theme.spacing(2),
-      fontSize: "1em",
+      marginRight: theme.spacing(6),
+      fontSize: "1rem",
       fontWeight: 500,
       color: "black",
       textDecoration: "none",
@@ -211,15 +212,21 @@ const MainNavBreadcrumbs = () => {
         );
         if (index === 0) {
           return (
-            <Typography key={id} className={classes.breadcrumbItem}>
+            <Typography
+              key={id}
+              className={classes.breadcrumbItem}
+              variant="body2"
+            >
               {linkOrText}
             </Typography>
           );
         } else {
           return (
             <React.Fragment key={id}>
-              <Typography className={classes.breadcrumbItem}>{"/"}</Typography>
-              <Typography className={classes.breadcrumbItem}>
+              <Typography className={classes.breadcrumbItem} variant="body2">
+                {"/"}
+              </Typography>
+              <Typography className={classes.breadcrumbItem} variant="body2">
                 {linkOrText}
               </Typography>
             </React.Fragment>

diff --git a/dashboard/client/src/pages/log/Logs.tsx b/dashboard/client/src/pages/log/Logs.tsx
@@ -126,7 +126,7 @@ const Logs = (props: LogsProps) => {
     setEnd,
   } = useLogs(props);
   const { newIA } = props;
-  let href = newIA ? "#/new/log/" : "#/log/";
+  let href = newIA ? "#/new/logs/" : "#/log/";
 
   if (origin) {
     if (path) {

diff --git a/dashboard/client/src/pages/metrics/Metrics.tsx b/dashboard/client/src/pages/metrics/Metrics.tsx
@@ -20,9 +20,21 @@ const useStyles = makeStyles((theme) =>
       display: "flex",
       flexDirection: "row",
       flexWrap: "wrap",
+      gap: theme.spacing(3),
+    },
+    chart: {
+      flex: "1 0 448px",
+      maxWidth: "100%",
+      height: 300,
+      overflow: "hidden",
+      [theme.breakpoints.up("md")]: {
+        // Calculate max width based on 1/3 of the total width minus padding between cards
+        maxWidth: `calc((100% - ${theme.spacing(3)}px * 2) / 3)`,
+      },
     },
     grafanaEmbed: {
-      margin: theme.spacing(1),
+      width: "100%",
+      height: "100%",
     },
     topBar: {
       position: "sticky",
@@ -213,15 +225,15 @@ export const Metrics = () => {
           </Alert>
           <div className={classes.grafanaEmbedsContainer}>
             {METRICS_CONFIG.map(({ title, path }) => (
-              <iframe
-                key={title}
-                className={classes.grafanaEmbed}
-                title={title}
-                src={`${grafanaHost}${path}&refresh${timeRangeParams}&var-SessionName=${sessionName}`}
-                width="450"
-                height="400"
-                frameBorder="0"
-              />
+              <Paper className={classes.chart} elevation={1} variant="outlined">
+                <iframe
+                  key={title}
+                  title={title}
+                  className={classes.grafanaEmbed}
+                  src={`${grafanaHost}${path}&refresh${timeRangeParams}&var-SessionName=${sessionName}`}
+                  frameBorder="0"
+                />
+              </Paper>
             ))}
           </div>
         </div>

diff --git a/dashboard/client/src/pages/overview/OverviewPage.tsx b/dashboard/client/src/pages/overview/OverviewPage.tsx
@@ -17,17 +17,23 @@ const useStyles = makeStyles((theme) =>
     overviewCardsContainer: {
       display: "flex",
       flexDirection: "row",
-      flexWrap: "nowrap",
+      flexWrap: "wrap",
       marginBottom: theme.spacing(4),
       gap: theme.spacing(3),
+      [theme.breakpoints.up("md")]: {
+        flexWrap: "nowrap",
+      },
     },
     overviewCard: {
       flex: "1 0 448px",
-      // Calculate max width based on 1/3 of the total width minus padding between cards
-      maxWidth: `calc((100% - ${theme.spacing(3)}px * 2) / 3)`,
+      maxWidth: "100%",
+      [theme.breakpoints.up("md")]: {
+        // Calculate max width based on 1/3 of the total width minus padding between cards
+        maxWidth: `calc((100% - ${theme.spacing(3)}px * 2) / 3)`,
+      },
     },
     section: {
-      marginTop: theme.spacing(2),
+      marginTop: theme.spacing(4),
     },
   }),
 );
@@ -59,6 +65,7 @@ export const OverviewPage = () => {
         className={classes.section}
         title="Node metrics"
         startExpanded
+        keepRendered
       >
         <Metrics />
       </CollapsibleSection>

diff --git a/dashboard/client/src/pages/overview/cards/NodeCountCard.tsx b/dashboard/client/src/pages/overview/cards/NodeCountCard.tsx
@@ -18,6 +18,7 @@ const useStyles = makeStyles((theme) =>
       display: "flex",
       flexDirection: "row",
       flexWrap: "nowrap",
+      margin: theme.spacing(0, 3, 2),
     },
   }),
 );

diff --git a/dashboard/client/src/pages/overview/cards/OverviewCard.tsx b/dashboard/client/src/pages/overview/cards/OverviewCard.tsx
@@ -7,9 +7,8 @@ import { Link } from "react-router-dom";
 const useStyles = makeStyles((theme) =>
   createStyles({
     root: {
-      padding: theme.spacing(2, 3),
-      height: 270,
-      borderRadius: 8,
+      height: 294,
+      overflow: "hidden",
     },
   }),
 );

diff --git a/dashboard/client/src/pages/overview/cards/RecentJobsCard.component.test.tsx b/dashboard/client/src/pages/overview/cards/RecentJobsCard.component.test.tsx
@@ -46,6 +46,6 @@ describe("RecentJobsCard", () => {
     expect(screen.getByText("02000000")).toBeVisible();
     expect(screen.getByText("raysubmit_23456")).toBeVisible();
     expect(screen.getByText("04000000")).toBeVisible();
-    expect(screen.getByText("05000000")).toBeVisible();
+    expect(screen.queryByText("05000000")).toBeNull();
   });
 });