[ui] FIx backfill partition range coloring, clarify meaning of progre…

…ss bars
dagster-io · Nov 25, 2024 · 456ee08 · 456ee08
1 parent 6898a4d
commit 456ee08
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 40 deletions.
diff --git a/...odules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillAssetPartitionsTable.tsx b/...odules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillAssetPartitionsTable.tsx
@@ -1,6 +1,7 @@
 import {
   Box,
   ButtonLink,
+  Caption,
   Colors,
   MiddleTruncate,
   NonIdealState,
@@ -170,18 +171,18 @@ export const VirtualizedBackfillPartitionsRow = ({
 }) => {
   let targeted;
   let inProgress;
-  let completed;
+  let succeeded;
   let failed;
   if (asset.__typename === 'AssetPartitionsStatusCounts') {
     targeted = asset.numPartitionsTargeted;
     inProgress = asset.numPartitionsInProgress;
-    completed = asset.numPartitionsMaterialized;
+    succeeded = asset.numPartitionsMaterialized;
     failed = asset.numPartitionsFailed;
   } else {
     targeted = 1;
     failed = asset.failed ? 1 : 0;
     inProgress = asset.inProgress ? 1 : 0;
-    completed = asset.materialized ? 1 : 0;
+    succeeded = asset.materialized ? 1 : 0;
   }
 
   const client = useApolloClient();
@@ -218,7 +219,10 @@ export const VirtualizedBackfillPartitionsRow = ({
     >
       <RowGrid border="bottom">
         <RowCell>
-          <Box flex={{direction: 'row', justifyContent: 'space-between'}} style={{minWidth: 0}}>
+          <Box
+            flex={{direction: 'row', justifyContent: 'space-between', alignItems: 'baseline'}}
+            style={{minWidth: 0}}
+          >
             <ButtonLink
               style={{minWidth: 0}}
               onClick={() =>
@@ -233,7 +237,7 @@ export const VirtualizedBackfillPartitionsRow = ({
             <StatusBar
               targeted={targeted}
               inProgress={inProgress}
-              completed={completed}
+              succeeded={succeeded}
               failed={failed}
             />
           </Box>
@@ -242,23 +246,29 @@ export const VirtualizedBackfillPartitionsRow = ({
           <>
             <RowCell>{numberFormatter.format(targeted)}</RowCell>
             <RowCell>{numberFormatter.format(inProgress)}</RowCell>
-            <RowCell>{numberFormatter.format(completed)}</RowCell>
+            <RowCell>{numberFormatter.format(succeeded)}</RowCell>
             <RowCell>{numberFormatter.format(failed)}</RowCell>
           </>
         ) : (
           <>
             <RowCell>-</RowCell>
             <RowCell>
-              {inProgress ? (
-                <Tag icon="spinner" intent="primary">
-                  In progress
-                </Tag>
-              ) : (
-                '-'
-              )}
+              <Box>
+                {inProgress ? (
+                  <Tag icon="spinner" intent="primary">
+                    In progress
+                  </Tag>
+                ) : (
+                  '-'
+                )}
+              </Box>
+            </RowCell>
+            <RowCell>
+              <Box>{succeeded ? <Tag intent="success">Succeeded</Tag> : '-'}</Box>
+            </RowCell>
+            <RowCell>
+              <Box>{failed ? <Tag intent="danger">Failed</Tag> : '-'}</Box>
             </RowCell>
-            <RowCell>{completed ? <Tag intent="success">Completed</Tag> : '-'}</RowCell>
-            <RowCell>{failed ? <Tag intent="danger">Failed</Tag> : '-'}</RowCell>
           </>
         )}
       </RowGrid>
@@ -292,32 +302,39 @@ export const BACKFILL_PARTITIONS_FOR_ASSET_KEY_QUERY = gql`
 export function StatusBar({
   targeted,
   inProgress,
-  completed,
+  succeeded,
   failed,
 }: {
   targeted: number;
   inProgress: number;
-  completed: number;
+  succeeded: number;
   failed: number;
 }) {
+  const pctSucceeded = (100 * succeeded) / targeted;
+  const pctFailed = (100 * failed) / targeted;
+  const pctInProgress = (100 * inProgress) / targeted;
+
+  const pctFinal = Math.ceil(pctSucceeded + pctFailed);
+
   return (
-    <div
-      style={{
-        borderRadius: '8px',
-        backgroundColor: Colors.backgroundLight(),
-        display: 'grid',
-        gridTemplateColumns: `${(100 * completed) / targeted}% ${(100 * failed) / targeted}% ${
-          (100 * inProgress) / targeted
-        }%`,
-        gridTemplateRows: '100%',
-        height: '12px',
-        width: '200px',
-        overflow: 'hidden',
-      }}
-    >
-      <div style={{background: Colors.accentGreen()}} />
-      <div style={{background: Colors.accentRed()}} />
-      <div style={{background: Colors.accentBlue()}} />
-    </div>
+    <Box flex={{direction: 'column', alignItems: 'flex-end', gap: 2}}>
+      <div
+        style={{
+          borderRadius: '8px',
+          backgroundColor: Colors.backgroundLight(),
+          display: 'grid',
+          gridTemplateColumns: `${pctSucceeded}% ${pctFailed}% ${pctInProgress}%`,
+          gridTemplateRows: '100%',
+          height: '12px',
+          width: '200px',
+          overflow: 'hidden',
+        }}
+      >
+        <div style={{background: Colors.accentGreen()}} />
+        <div style={{background: Colors.accentRed()}} />
+        <div style={{background: Colors.accentBlue()}} />
+      </div>
+      <Caption color={Colors.textLight()}>{`${pctFinal}% completed`}</Caption>
+    </Box>
   );
 }
diff --git a/...odules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillOpJobPartitionsTable.tsx b/...odules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillOpJobPartitionsTable.tsx
@@ -59,12 +59,12 @@ export const BackfillOpJobPartitionsTable = ({
       <tbody>
         <tr>
           <td>
-            <Box flex={{direction: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
+            <Box flex={{direction: 'row', justifyContent: 'space-between', alignItems: 'baseline'}}>
               <BackfillTarget backfill={backfill} repoAddress={repoAddress} />
               <StatusBar
                 targeted={results.length}
                 inProgress={inProgress.length}
-                completed={succeeded.length}
+                succeeded={succeeded.length}
                 failed={failed.length}
               />
             </Box>

diff --git a/js_modules/dagster-ui/packages/ui-core/src/partitions/PartitionStatus.tsx b/js_modules/dagster-ui/packages/ui-core/src/partitions/PartitionStatus.tsx
@@ -387,9 +387,9 @@ function assetHealthToColorSegments(ranges: Range[]) {
 
 const statusToBackgroundColor = (status: RunStatus | undefined) => {
   if (status === undefined) {
-    return Colors.accentGray();
+    return Colors.backgroundDisabled();
   }
-  return status === RunStatus.NOT_STARTED ? Colors.accentGrayHover() : RUN_STATUS_COLORS[status];
+  return status === RunStatus.NOT_STARTED ? Colors.backgroundDisabled() : RUN_STATUS_COLORS[status];
 };
 
 function opRunStatusToColorRanges(

diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/RunsFeedRow.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/RunsFeedRow.tsx
@@ -188,7 +188,7 @@ export const RunsFeedRow = ({
 };
 
 const TEMPLATE_COLUMNS =
-  '60px minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1fr) 140px 150px 120px 132px';
+  '60px minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1fr) 140px 170px 120px 132px';
 
 export const RunsFeedTableHeader = ({checkbox}: {checkbox: React.ReactNode}) => {
   return (