diff --git a/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillAssetPartitionsTable.tsx b/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillAssetPartitionsTable.tsx index 7618867991e05..13b006010e6a9 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillAssetPartitionsTable.tsx +++ b/js_modules/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 = ({ > - + @@ -233,7 +237,7 @@ export const VirtualizedBackfillPartitionsRow = ({ @@ -242,23 +246,29 @@ export const VirtualizedBackfillPartitionsRow = ({ <> {numberFormatter.format(targeted)} {numberFormatter.format(inProgress)} - {numberFormatter.format(completed)} + {numberFormatter.format(succeeded)} {numberFormatter.format(failed)} ) : ( <> - - {inProgress ? ( - - In progress - - ) : ( - '-' - )} + + {inProgress ? ( + + In progress + + ) : ( + '-' + )} + + + + {succeeded ? Succeeded : '-'} + + + {failed ? Failed : '-'} - {completed ? Completed : '-'} - {failed ? Failed : '-'} )} @@ -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 ( -
-
-
-
-
+ +
+
+
+
+
+ {`${pctFinal}% completed`} + ); } diff --git a/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillOpJobPartitionsTable.tsx b/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillOpJobPartitionsTable.tsx index 175f2f5862919..291a5465903b0 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillOpJobPartitionsTable.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillOpJobPartitionsTable.tsx @@ -59,12 +59,12 @@ export const BackfillOpJobPartitionsTable = ({ - + 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 index b31a4e1729f65..de95fd41ec748 100644 --- 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 index 6064977629578..705cc483e113a 100644 --- 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 (