Add driver logs to Jobs page for submission jobs (ray-project#34514)

Add driver logs to Jobs page for submission jobs Adds a refresh button to the log viewer to reload the logs. Refactors the log viewer from the logs page into its own component Updates the look and feel of the jobs page to match the new IA style. Adds User-provided metadata to the job detail page. (fixes [Core|Dashboard] Support custom tags for jobs. ray-project#34187 ) Updates the table icon Change "Tasks" to "Tasks/actor overview" Adds Node Count Card next to ray status cards Signed-off-by: Jack He <[email protected]>
ProjectsByJackHe · May 4, 2023 · d738597 · d738597
1 parent a4b8d5e
commit d738597
Show file tree

Hide file tree

Showing 15 changed files with 639 additions and 422 deletions.
diff --git a/dashboard/client/src/common/CodeDialogButton/CodeDialogButton.tsx b/dashboard/client/src/common/CodeDialogButton/CodeDialogButton.tsx
@@ -5,17 +5,20 @@ import {
   makeStyles,
   Typography,
 } from "@material-ui/core";
+import classNames from "classnames";
 import yaml from "js-yaml";
 import React, { useState } from "react";
 import DialogWithTitle from "../DialogWithTitle";
+import { ClassNameProps } from "../props";
 
 const useStyles = makeStyles((theme) =>
   createStyles({
     configText: {
       whiteSpace: "pre",
       fontFamily: "SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace",
       padding: theme.spacing(2),
-      // borderRadius: theme.spacing(1),
+      overflow: "scroll",
+      maxHeight: 600,
     },
   }),
 );
@@ -92,13 +95,14 @@ const useCodeDialogButtonWithPreviewStyles = makeStyles((theme) =>
   }),
 );
 
-type CodeDialogButtonWithPreviewProps = CodeDialogButtonProps;
+type CodeDialogButtonWithPreviewProps = CodeDialogButtonProps & ClassNameProps;
 /**
  * Similar to CodeDialogButton but also shows a snippet of the expanded text next to the button.
  */
 export const CodeDialogButtonWithPreview = ({
   code,
   buttonText,
+  className,
   ...props
 }: CodeDialogButtonWithPreviewProps) => {
   const classes = useCodeDialogButtonWithPreviewStyles();
@@ -109,7 +113,7 @@ export const CodeDialogButtonWithPreview = ({
   const buttonTextToPass = buttonText ?? "Expand";
 
   return (
-    <div className={classes.root}>
+    <div className={classNames(classes.root, className)}>
       <span className={classes.previewText}>{codeText}</span>
       <CodeDialogButton
         code={codeText}

diff --git a/dashboard/client/src/common/Section.tsx b/dashboard/client/src/common/Section.tsx
@@ -0,0 +1,46 @@
+import {
+  Box,
+  BoxProps,
+  createStyles,
+  makeStyles,
+  Paper,
+  Typography,
+} from "@material-ui/core";
+import React, { PropsWithChildren } from "react";
+import { ClassNameProps } from "./props";
+
+const useStyles = makeStyles((theme) =>
+  createStyles({
+    contentContainer: {
+      padding: theme.spacing(2),
+      height: "100%",
+    },
+  }),
+);
+
+type SectionProps = {
+  title?: string;
+} & ClassNameProps &
+  BoxProps;
+
+export const Section = ({
+  title,
+  children,
+  className,
+  ...props
+}: PropsWithChildren<SectionProps>) => {
+  const classes = useStyles();
+
+  return (
+    <Box className={className} {...props}>
+      {title && (
+        <Box paddingBottom={2}>
+          <Typography variant="h4">{title}</Typography>
+        </Box>
+      )}
+      <Paper variant="outlined" className={classes.contentContainer}>
+        {children}
+      </Paper>
+    </Box>
+  );
+};
diff --git a/dashboard/client/src/components/MetadataSection/MetadataSection.tsx b/dashboard/client/src/components/MetadataSection/MetadataSection.tsx
@@ -4,14 +4,14 @@ import {
   IconButton,
   Link,
   makeStyles,
-  Paper,
   Tooltip,
   Typography,
 } from "@material-ui/core";
 import copy from "copy-to-clipboard";
 import React, { useState } from "react";
 import { RiFileCopyLine } from "react-icons/ri";
 import { Link as RouterLink } from "react-router-dom";
+import { Section } from "../../common/Section";
 import { HelpInfo } from "../Tooltip";
 
 export type StringOnlyMetadataContent = {
@@ -55,7 +55,6 @@ const useStyles = makeStyles((theme) =>
       gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
       rowGap: theme.spacing(1),
       columnGap: theme.spacing(4),
-      padding: theme.spacing(2),
     },
     label: {
       color: theme.palette.text.secondary,
@@ -193,15 +192,8 @@ export const MetadataSection = ({
   metadataList: Metadata[];
 }) => {
   return (
-    <Box marginTop={1} marginBottom={4}>
-      {header && (
-        <Box paddingBottom={2}>
-          <Typography variant="h2">{header}</Typography>
-        </Box>
-      )}
-      <Paper variant="outlined">
-        <MetadataList metadataList={metadataList} />
-      </Paper>
-    </Box>
+    <Section title={header} marginTop={1} marginBottom={4}>
+      <MetadataList metadataList={metadataList} />
+    </Section>
   );
 };