run timeline blank state (#6674)

* run timeline blank state * clean up component * fix error
dagster-io · Feb 17, 2022 · 5db89f5 · 5db89f5
1 parent 43835eb
commit 5db89f5
Showing 1 changed file with 25 additions and 15 deletions.
diff --git a/js_modules/dagit/packages/core/src/runs/RunTimeline.tsx b/js_modules/dagit/packages/core/src/runs/RunTimeline.tsx
@@ -219,25 +219,29 @@ export const RunTimeline = ({jobs, range}: {jobs: TimelineJob[]; range: [number,
     }
   }, []);
 
-  const height = ROW_HEIGHT * jobs.length;
+  const height = ROW_HEIGHT * (jobs.length || 1);
 
   return (
     <Timeline $height={TIME_HEADER_HEIGHT + height} ref={containerRef}>
       {width ? (
-        <>
-          <TimeDividers interval={ONE_HOUR_MSEC} range={range} height={height} />
-          <div>
-            {jobs.map((job, ii) => (
-              <RunTimelineRow
-                key={job.key}
-                job={job}
-                top={ii * ROW_HEIGHT + TIME_HEADER_HEIGHT}
-                range={range}
-                width={width}
-              />
-            ))}
-          </div>
-        </>
+        jobs.length ? (
+          <>
+            <TimeDividers interval={ONE_HOUR_MSEC} range={range} height={height} />
+            <div>
+              {jobs.map((job, ii) => (
+                <RunTimelineRow
+                  key={job.key}
+                  job={job}
+                  top={ii * ROW_HEIGHT + TIME_HEADER_HEIGHT}
+                  range={range}
+                  width={width}
+                />
+              ))}
+            </div>
+          </>
+        ) : (
+          <NoRunsTimeline />
+        )
       ) : null}
     </Timeline>
   );
@@ -525,6 +529,12 @@ const RunTimelineRow = ({
   );
 };
 
+const NoRunsTimeline = () => (
+  <Box flex={{justifyContent: 'center', alignItems: 'center'}} padding={24}>
+    No runs or upcoming runs found for this time window.
+  </Box>
+);
+
 const Timeline = styled.div<{$height: number}>`
   ${({$height}) => `height: ${$height}px;`}
   position: relative;