Add driver logs to Jobs page for submission jobs (#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. #34187 )
Updates the table icon
Change "Tasks" to "Tasks/actor overview"
Adds Node Count Card next to ray status cards

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}

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>
+  );
+};

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>
   );
 };