Cleanup styles. Fix scrolling in task sidebar. Issue Netflix#2877

RizaFarheen · Apr 12, 2022 · e38d917 · e38d917
1 parent 271e7e7
commit e38d917
Show file tree

Hide file tree

Showing 10 changed files with 161 additions and 138 deletions.
diff --git a/ui/package.json b/ui/package.json
@@ -16,7 +16,7 @@
     "immutability-helper": "^3.1.1",
     "json-bigint-string": "^1.0.0",
     "lodash": "^4.17.20",
-    "moment": "^2.29.2",
+    "moment": "^2.29.1",
     "parse-svg-path": "^0.1.2",
     "prop-types": "^15.7.2",
     "react": "^16.8.0",

diff --git a/ui/src/components/ReactJson.jsx b/ui/src/components/ReactJson.jsx
@@ -13,10 +13,12 @@ const useStyles = makeStyles({
     height: "100%",
     display: "flex",
     flexDirection: "column",
+    paddingTop: 15
   },
   editorWrapper: {
-    flex: "1",
+    flex: 1,
     marginLeft: 10,
+    position: "relative"
   },
   label: {
     marginTop: 5,

diff --git a/ui/src/pages/execution/Execution.jsx b/ui/src/pages/execution/Execution.jsx
@@ -35,10 +35,6 @@ const INIT_DRAWER_WIDTH = 650;
 
 const useStyles = makeStyles({
   header: sharedStyles.header,
-
-  wrapper: {
-    height: "100%",
-  },
   drawer: {
     zIndex: 999,
     position: "absolute",
@@ -75,13 +71,13 @@ const useStyles = makeStyles({
     flexDirection: "column",
   },
   drawerContent: {
-    flex: "1 1 auto",
+    flex: 1,
     backgroundColor: "#fff",
     display: "flex",
     flexDirection: "column",
+    overflow: "hidden"
   },
   content: {
-    overflowY: "auto",
     height: "100%",
     display: "flex",
     flexDirection: "column",
@@ -90,13 +86,14 @@ const useStyles = makeStyles({
     marginRight: (state) => state.drawerWidth,
   },
   tabContent: {
-    padding: 30,
     flex: 1,
+    overflow: "hidden",
+    display: "flex",
+    flexDirection: "column"
   },
   headerSubtitle: {
     marginBottom: 20,
   },
-
   fr: {
     display: "flex",
     position: "relative",
@@ -130,22 +127,23 @@ export default function Execution() {
   const [isResizing, setIsResizing] = useState(false);
   const [drawerWidth, setDrawerWidth] = useState(INIT_DRAWER_WIDTH);
 
+  const [tabIndex, setTabIndex] = useQueryState("tabIndex", 0);
   const [selectedTaskJson, setSelectedTaskJson] = useQueryState("task", "");
 
   const dag = useMemo(
     () => (execution ? new WorkflowDAG(execution) : null),
     [execution]
   );
+  const selectedTask = useMemo(
+    () => dag && selectedTaskJson ? rison.decode(selectedTaskJson) : null,
+    [dag, selectedTaskJson]
+  );
 
   const classes = useStyles({
     isFullWidth,
     drawerWidth,
   });
 
-  const selectedTask =
-    dag && selectedTaskJson ? rison.decode(selectedTaskJson) : null;
-  const [tabIndex, setTabIndex] = useQueryState("tabIndex", 0);
-
   const handleMousemove = useCallback(
     (e) => {
       // we don't want to do anything if we aren't resizing.
@@ -197,115 +195,113 @@ export default function Execution() {
     };
   }, [handleMousemove]);
 
-  return (
-    <div className={classes.wrapper}>
-      <Helmet>
-        <title>Conductor UI - Execution - {match.params.id}</title>
-      </Helmet>
-      <div
-        className={clsx(classes.content, {
-          [classes.contentShift]: !!selectedTask,
-        })}
-      >
-        {isFetching && <LinearProgress />}
-        {execution && (
-          <>
-            <div className={classes.header}>
-              <div className={classes.fr}>
-                {execution.parentWorkflowId && (
-                  <div className={classes.frItem}>
-                    <NavLink
-                      newTab
-                      path={`/execution/${execution.parentWorkflowId}`}
-                    >
-                      Parent Workflow
-                    </NavLink>
-                  </div>
-                )}
-                <SecondaryButton onClick={refresh} style={{ marginRight: 10 }}>
-                  Refresh
-                </SecondaryButton>
-                <ActionModule execution={execution} triggerReload={refresh} />
-              </div>
-              <Heading level={3} gutterBottom>
-                {execution.workflowType || execution.workflowName}{" "}
-                <StatusBadge status={execution.status} />
-              </Heading>
-              <Heading level={0} className={classes.headerSubtitle}>
-                {execution.workflowId}
-              </Heading>
-
-              {execution.reasonForIncompletion && (
-                <Alert severity="error">
-                  {execution.reasonForIncompletion}
-                </Alert>
-              )}
-
-              <Tabs value={tabIndex} style={{ marginBottom: 0 }}>
-                <Tab label="Tasks" onClick={() => setTabIndex(0)} />
-                <Tab label="Summary" onClick={() => setTabIndex(1)} />
-                <Tab
-                  label="Workflow Input/Output"
-                  onClick={() => setTabIndex(2)}
-                />
-                <Tab label="JSON" onClick={() => setTabIndex(3)} />
-              </Tabs>
-            </div>
-            <div className={classes.tabContent}>
-              {tabIndex === 0 && (
-                <TaskDetails
-                  dag={dag}
-                  execution={execution}
-                  setSelectedTask={handleSelectTask}
-                  selectedTask={selectedTask}
-                />
+  return <>
+    <Helmet>
+      <title>Conductor UI - Execution - {match.params.id}</title>
+    </Helmet>
+    <div
+      className={clsx(classes.content, {
+        [classes.contentShift]: !!selectedTask,
+      })}
+    >
+      {isFetching && <LinearProgress />}
+      {execution && (
+        <>
+          <div className={classes.header}>
+            <div className={classes.fr}>
+              {execution.parentWorkflowId && (
+                <div className={classes.frItem}>
+                  <NavLink
+                    newTab
+                    path={`/execution/${execution.parentWorkflowId}`}
+                  >
+                    Parent Workflow
+                  </NavLink>
+                </div>
               )}
-              {tabIndex === 1 && <ExecutionSummary execution={execution} />}
-              {tabIndex === 2 && <InputOutput execution={execution} />}
-              {tabIndex === 3 && <ExecutionJson execution={execution} />}
-            </div>
-          </>
-        )}
-      </div>
-      {selectedTask && (
-        <div className={classes.drawer}>
-          <div
-            id="dragger"
-            onMouseDown={(event) => handleMousedown(event)}
-            className={classes.dragger}
-          />
-          <div className={classes.drawerMain}>
-            <div className={classes.drawerHeader}>
-              {isFullWidth ? (
-                <Tooltip title="Restore sidebar">
-                  <IconButton onClick={() => handleFullScreenExit()}>
-                    <FullscreenExitIcon />
-                  </IconButton>
-                </Tooltip>
-              ) : (
-                <Tooltip title="Maximize sidebar">
-                  <IconButton onClick={() => handleFullScreen()}>
-                    <FullscreenIcon />
-                  </IconButton>
-                </Tooltip>
-              )}
-              <Tooltip title="Close sidebar">
-                <IconButton onClick={() => handleClose()}>
-                  <CloseIcon />
-                </IconButton>
-              </Tooltip>
+              <SecondaryButton onClick={refresh} style={{ marginRight: 10 }}>
+                Refresh
+              </SecondaryButton>
+              <ActionModule execution={execution} triggerReload={refresh} />
             </div>
-            <div className={classes.drawerContent}>
-              <RightPanel
-                className={classes.rightPanel}
-                selectedTask={selectedTask}
+            <Heading level={3} gutterBottom>
+              {execution.workflowType || execution.workflowName}{" "}
+              <StatusBadge status={execution.status} />
+            </Heading>
+            <Heading level={0} className={classes.headerSubtitle}>
+              {execution.workflowId}
+            </Heading>
+
+            {execution.reasonForIncompletion && (
+              <Alert severity="error">
+                {execution.reasonForIncompletion}
+              </Alert>
+            )}
+
+            <Tabs value={tabIndex} style={{ marginBottom: 0 }}>
+              <Tab label="Tasks" onClick={() => setTabIndex(0)} />
+              <Tab label="Summary" onClick={() => setTabIndex(1)} />
+              <Tab
+                label="Workflow Input/Output"
+                onClick={() => setTabIndex(2)}
+              />
+              <Tab label="JSON" onClick={() => setTabIndex(3)} />
+            </Tabs>
+          </div>
+          <div className={classes.tabContent}>
+            {tabIndex === 0 && (
+              <TaskDetails
                 dag={dag}
-                onTaskChange={handleSelectTask}
+                execution={execution}
+                setSelectedTask={handleSelectTask}
+                selectedTask={selectedTask}
               />
-            </div>
+            )}
+            {tabIndex === 1 && <ExecutionSummary execution={execution} />}
+            {tabIndex === 2 && <InputOutput execution={execution} />}
+            {tabIndex === 3 && <ExecutionJson execution={execution} />}
           </div>
-        </div>
+        </>
       )}
     </div>
-  );
+    {selectedTask && (
+      <div className={classes.drawer}>
+        <div
+          id="dragger"
+          onMouseDown={(event) => handleMousedown(event)}
+          className={classes.dragger}
+        />
+        <div className={classes.drawerMain}>
+          <div className={classes.drawerHeader}>
+            {isFullWidth ? (
+              <Tooltip title="Restore sidebar">
+                <IconButton onClick={() => handleFullScreenExit()}>
+                  <FullscreenExitIcon />
+                </IconButton>
+              </Tooltip>
+            ) : (
+              <Tooltip title="Maximize sidebar">
+                <IconButton onClick={() => handleFullScreen()}>
+                  <FullscreenIcon />
+                </IconButton>
+              </Tooltip>
+            )}
+            <Tooltip title="Close sidebar">
+              <IconButton onClick={() => handleClose()}>
+                <CloseIcon />
+              </IconButton>
+            </Tooltip>
+          </div>
+          <div className={classes.drawerContent}>
+            <RightPanel
+              className={classes.rightPanel}
+              selectedTask={selectedTask}
+              dag={dag}
+              onTaskChange={handleSelectTask}
+            />
+          </div>
+        </div>
+      </div>
+    )}
+  </>
 }
diff --git a/ui/src/pages/execution/ExecutionInputOutput.jsx b/ui/src/pages/execution/ExecutionInputOutput.jsx
@@ -4,21 +4,23 @@ import { makeStyles } from "@material-ui/styles";
 
 const useStyles = makeStyles({
   wrapper: {
+    margin: 30,
     height: "100%",
     display: "flex",
     flexDirection: "column",
-    justifyContent: "space-between",
+    overflow: "hidden",
   },
   column: {
     display: "flex",
     flexDirection: "row",
     gap: 15,
     flex: 2,
+    marginBottom: 15,
+    overflow: "hidden"
   },
   paper: {
     flex: 1,
-    marginBottom: 15,
-    padding: "10px 0 0 0",
+    overflow: "hidden"
   },
 });
 

diff --git a/ui/src/pages/execution/ExecutionJson.jsx b/ui/src/pages/execution/ExecutionJson.jsx
@@ -4,18 +4,25 @@ import ReactJson from "../../components/ReactJson";
 import { makeStyles } from "@material-ui/styles";
 
 const useStyles = makeStyles({
-  paper: {
-    height: "100%",
-    padding: "10px 0 0 0",
+  paper: {    
+    margin: 30,
+    flex: 1
   },
+  wrapper: {
+    flex: 1,
+    display: "flex",
+    flexDirection: "column"
+  }
 });
 
 export default function ExecutionJson({ execution }) {
   const classes = useStyles();
 
   return (
+    <div className={classes.wrapper}>
     <Paper className={classes.paper}>
       <ReactJson label="Unabridged Workflow JSON" src={execution} />
     </Paper>
+    </div>
   );
 }
diff --git a/ui/src/pages/execution/ExecutionSummary.jsx b/ui/src/pages/execution/ExecutionSummary.jsx
@@ -4,8 +4,11 @@ import { makeStyles } from "@material-ui/styles";
 
 const useStyles = makeStyles({
   paper: {
-    minHeight: 300,
+    margin: 30
   },
+  wrapper: {
+    overflowY: "auto"
+  }
 });
 
 export default function ExecutionSummary({ execution }) {
@@ -51,8 +54,10 @@ export default function ExecutionSummary({ execution }) {
   }
 
   return (
+    <div className={classes.wrapper}>
     <Paper className={classes.paper}>
       <KeyValueTable data={data} />
     </Paper>
+    </div>
   );
 }