FE-515: Consolidated backfills and runs UI (#23719)

## Summary & Motivation This is a work-in-progress, here's a loom video showing the updates so far: https://www.loom.com/share/6ca6625e4ae34463913c1bffd873f353 --------- Co-authored-by: bengotow <[email protected]> Co-authored-by: Marco Salazar <[email protected]> Co-authored-by: JamieDeMaria <[email protected]>
dagster-io · Sep 17, 2024 · 91688d6 · 91688d6 · github-actions · Sep 17, 2024
1 parent dfa8d75
commit 91688d6
Show file tree

Hide file tree

Showing 45 changed files with 1,352 additions and 447 deletions.
diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/CursorControls.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/CursorControls.tsx
@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, {CSSProperties} from 'styled-components';
 
 import {Button} from './Button';
 import {Icon} from './Icon';
@@ -9,16 +9,18 @@ export interface CursorPaginationProps {
   popCursor: () => void;
   advanceCursor: () => void;
   reset: () => void;
+  style?: CSSProperties;
 }
 
 export const CursorPaginationControls = ({
   hasPrevCursor,
   hasNextCursor,
   popCursor,
   advanceCursor,
+  style,
 }: CursorPaginationProps) => {
   return (
-    <CursorControlsContainer>
+    <CursorControlsContainer style={style}>
       <Button disabled={!hasPrevCursor} icon={<Icon name="arrow_back" />} onClick={popCursor}>
         Previous
       </Button>
@@ -38,9 +40,10 @@ export const CursorHistoryControls = ({
   hasNextCursor,
   popCursor,
   advanceCursor,
+  style,
 }: CursorPaginationProps) => {
   return (
-    <CursorControlsContainer>
+    <CursorControlsContainer style={style}>
       <Button icon={<Icon name="arrow_back" />} disabled={!hasPrevCursor} onClick={popCursor}>
         <span className="hideable-button-text">Newer</span>
       </Button>

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/Icon.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/Icon.tsx
@@ -213,6 +213,7 @@ import run_failed from '../icon-svgs/run_failed.svg';
 import run_queued from '../icon-svgs/run_queued.svg';
 import run_started from '../icon-svgs/run_started.svg';
 import run_success from '../icon-svgs/run_success.svg';
+import run_with_subruns from '../icon-svgs/run_with_subruns.svg';
 import schedule from '../icon-svgs/schedule.svg';
 import schema from '../icon-svgs/schema.svg';
 import scim_provision from '../icon-svgs/scim_provision.svg';
@@ -511,6 +512,7 @@ export const Icons = {
   rss,
   rule,
   run,
+  run_with_subruns,
   run_canceled,
   run_failed,
   run_queued,

diff --git a/js_modules/dagster-ui/packages/ui-components/src/icon-svgs/run_with_subruns.svg b/js_modules/dagster-ui/packages/ui-components/src/icon-svgs/run_with_subruns.svg
diff --git a/js_modules/dagster-ui/packages/ui-core/client.json b/js_modules/dagster-ui/packages/ui-core/client.json
diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/ContentRoot.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/ContentRoot.tsx
@@ -5,6 +5,8 @@ import {AssetsOverviewRoot} from 'shared/assets/AssetsOverviewRoot.oss';
 
 import {Route} from './Route';
 import {AssetFeatureProvider} from '../assets/AssetFeatureContext';
+import {RunsFeedBackfillPage} from '../instance/backfill/RunsFeedBackfillPage';
+import RunsFeedRoot from '../runs/RunsFeedRoot';
 import {lazy} from '../util/lazy';
 
 const WorkspaceRoot = lazy(() => import('../workspace/WorkspaceRoot'));
@@ -49,6 +51,15 @@ export const ContentRoot = memo(() => {
               />
             </AssetFeatureProvider>
           </Route>
+          <Route path="/runs-feed/b/:requestId/:runId" exact>
+            <RunRoot />
+          </Route>
+          <Route path="/runs-feed/b/:backfillId">
+            <RunsFeedBackfillPage />
+          </Route>
+          <Route path="/runs-feed" exact>
+            <RunsFeedRoot />
+          </Route>
           <Route path="/runs" exact>
             <RunsRoot />
           </Route>

diff --git a/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillActionsMenu.tsx b/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillActionsMenu.tsx
@@ -1,25 +1,27 @@
-import {Button, Group, Icon, Menu, MenuItem, Popover} from '@dagster-io/ui-components';
+import {
+  Button,
+  Group,
+  Icon,
+  JoinedButtons,
+  Menu,
+  MenuItem,
+  Popover,
+} from '@dagster-io/ui-components';
 import {useState} from 'react';
 import {useHistory} from 'react-router-dom';
 
-import {
-  BACKFILL_STEP_STATUS_DIALOG_BACKFILL_FRAGMENT,
-  BackfillStepStatusDialog,
-  backfillCanShowStepStatus,
-} from './BackfillStepStatusDialog';
-import {
-  BACKFILL_TERMINATION_DIALOG_BACKFILL_FRAGMENT,
-  BackfillTerminationDialog,
-} from './BackfillTerminationDialog';
+import {BackfillStepStatusDialog, backfillCanShowStepStatus} from './BackfillStepStatusDialog';
+import {BackfillTerminationDialog} from './BackfillTerminationDialog';
 import {RESUME_BACKFILL_MUTATION} from './BackfillUtils';
-import {BackfillActionsBackfillFragment} from './types/BackfillActionsMenu.types';
+import {BackfillActionsBackfillFragment} from './types/BackfillFragments.types';
 import {ResumeBackfillMutation, ResumeBackfillMutationVariables} from './types/BackfillUtils.types';
-import {gql, useMutation} from '../../apollo-client';
+import {useMutation} from '../../apollo-client';
 import {showCustomAlert} from '../../app/CustomAlertProvider';
 import {showSharedToaster} from '../../app/DomUtils';
 import {PythonErrorInfo} from '../../app/PythonErrorInfo';
 import {BulkActionStatus} from '../../graphql/types';
 import {runsPathWithFilters} from '../../runs/RunsFilterInput';
+import {AnchorButton} from '../../ui/AnchorButton';
 
 export function backfillCanCancelSubmission(backfill: {
   hasCancelPermission: boolean;
@@ -60,10 +62,12 @@ export const BackfillActionsMenu = ({
   backfill,
   canCancelRuns,
   refetch,
+  anchorLabel,
 }: {
   backfill: BackfillActionsBackfillFragment;
   canCancelRuns: boolean;
   refetch: () => void;
+  anchorLabel?: string;
 }) => {
   const history = useHistory();
   const runsUrl = runsPathWithFilters([
@@ -114,47 +118,55 @@ export const BackfillActionsMenu = ({
 
   const canCancelSubmission = backfillCanCancelSubmission(backfill);
 
+  const popover = (
+    <Popover
+      position="bottom-right"
+      content={
+        <Menu>
+          <MenuItem
+            text="View backfill runs"
+            icon="settings_backup_restore"
+            onClick={() => history.push(runsUrl)}
+          />
+          <MenuItem
+            disabled={!backfillCanShowStepStatus(backfill)}
+            text="View step status"
+            icon="view_list"
+            onClick={() => {
+              setShowStepStatus(true);
+            }}
+          />
+          <MenuItem
+            disabled={!backfillCanResume(backfill)}
+            text="Resume failed backfill"
+            title="Submits runs for all partitions in the backfill that do not have a corresponding run. Does not retry failed runs."
+            icon="refresh"
+            onClick={() => resume()}
+          />
+          <MenuItem
+            text={canCancelSubmission ? 'Cancel backfill submission' : 'Terminate unfinished runs'}
+            icon="cancel"
+            intent="danger"
+            disabled={!(canCancelSubmission || canCancelRuns)}
+            onClick={() => setShowTerminateDialog(true)}
+          />
+        </Menu>
+      }
+    >
+      <Button icon={<Icon name="expand_more" />} />
+    </Popover>
+  );
+
   return (
     <>
-      <Popover
-        position="bottom-right"
-        content={
-          <Menu>
-            <MenuItem
-              text="View backfill runs"
-              icon="settings_backup_restore"
-              onClick={() => history.push(runsUrl)}
-            />
-            <MenuItem
-              disabled={!backfillCanShowStepStatus(backfill)}
-              text="View step status"
-              icon="view_list"
-              onClick={() => {
-                setShowStepStatus(true);
-              }}
-            />
-            <MenuItem
-              disabled={!backfillCanResume(backfill)}
-              text="Resume failed backfill"
-              title="Submits runs for all partitions in the backfill that do not have a corresponding run. Does not retry failed runs."
-              icon="refresh"
-              onClick={() => resume()}
-            />
-            <MenuItem
-              text={
-                canCancelSubmission ? 'Cancel backfill submission' : 'Terminate unfinished runs'
-              }
-              icon="cancel"
-              intent="danger"
-              disabled={!(canCancelSubmission || canCancelRuns)}
-              onClick={() => setShowTerminateDialog(true)}
-            />
-          </Menu>
-        }
-      >
-        <Button icon={<Icon name="expand_more" />} />
-      </Popover>
-
+      {anchorLabel ? (
+        <JoinedButtons>
+          <AnchorButton to={`/runs-feed/b/${backfill.id}?tab=runs`}>View run</AnchorButton>
+          {popover}
+        </JoinedButtons>
+      ) : (
+        popover
+      )}
       <BackfillStepStatusDialog
         backfill={showStepStatus ? backfill : undefined}
         onClose={() => setShowStepStatus(false)}
@@ -167,20 +179,3 @@ export const BackfillActionsMenu = ({
     </>
   );
 };
-
-export const BACKFILL_ACTIONS_BACKFILL_FRAGMENT = gql`
-  fragment BackfillActionsBackfillFragment on PartitionBackfill {
-    id
-    hasCancelPermission
-    hasResumePermission
-    isAssetBackfill
-    status
-    numCancelable
-
-    ...BackfillStepStatusDialogBackfillFragment
-    ...BackfillTerminationDialogBackfillFragment
-  }
-
-  ${BACKFILL_STEP_STATUS_DIALOG_BACKFILL_FRAGMENT}
-  ${BACKFILL_TERMINATION_DIALOG_BACKFILL_FRAGMENT}
-`;
diff --git a/...stance/backfill/BackfillPartitionsTab.tsx → ...backfill/BackfillAssetPartitionsTable.tsx b/...stance/backfill/BackfillPartitionsTab.tsx → ...backfill/BackfillAssetPartitionsTable.tsx
@@ -11,7 +11,11 @@ import React, {useRef} from 'react';
 import {Link, useHistory} from 'react-router-dom';
 import styled from 'styled-components';
 
-import {BackfillDetailsBackfillFragment} from './types/BackfillPage.types';
+import {
+  BackfillPartitionsForAssetKeyQuery,
+  BackfillPartitionsForAssetKeyQueryVariables,
+} from './types/BackfillAssetPartitionsTable.types';
+import {BackfillDetailsBackfillFragment} from './types/useBackfillDetailsQuery.types';
 import {gql, useApolloClient} from '../../apollo-client';
 import {displayNameForAssetKey, tokenForAssetKey} from '../../asset-graph/Utils';
 import {asAssetKeyInput} from '../../assets/asInput';
@@ -22,18 +26,18 @@ import {RunFilterToken, runsPathWithFilters} from '../../runs/RunsFilterInput';
 import {testId} from '../../testing/testId';
 import {Container, HeaderCell, HeaderRow, Inner, Row, RowCell} from '../../ui/VirtualizedTable';
 import {numberFormatter} from '../../ui/formatters';
-import {
-  BackfillPartitionsForAssetKeyQuery,
-  BackfillPartitionsForAssetKeyQueryVariables,
-} from '../backfill/types/BackfillPage.types';
 
 const TEMPLATE_COLUMNS = '60% repeat(4, 1fr)';
 
 type AssetBackfillStatus = NonNullable<
   BackfillDetailsBackfillFragment['assetBackfillData']
 >['assetBackfillStatuses'][0];
 
-export const BackfillPartitionsTab = ({backfill}: {backfill: BackfillDetailsBackfillFragment}) => {
+export const BackfillAssetPartitionsTable = ({
+  backfill,
+}: {
+  backfill: BackfillDetailsBackfillFragment;
+}) => {
   const parentRef = useRef<HTMLDivElement | null>(null);
 
   const assetStatuses: AssetBackfillStatus[] =

diff --git a/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillFragments.tsx b/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillFragments.tsx
@@ -0,0 +1,42 @@
+import {gql} from '../../apollo-client';
+
+export const BACKFILL_TERMINATION_DIALOG_BACKFILL_FRAGMENT = gql`
+  fragment BackfillTerminationDialogBackfillFragment on PartitionBackfill {
+    id
+    status
+    isAssetBackfill
+    numCancelable
+  }
+`;
+
+export const BACKFILL_STEP_STATUS_DIALOG_BACKFILL_FRAGMENT = gql`
+  fragment BackfillStepStatusDialogBackfillFragment on PartitionBackfill {
+    id
+    partitionNames
+    partitionSet {
+      name
+      pipelineName
+      repositoryOrigin {
+        repositoryName
+        repositoryLocationName
+      }
+    }
+  }
+`;
+
+export const BACKFILL_ACTIONS_BACKFILL_FRAGMENT = gql`
+  fragment BackfillActionsBackfillFragment on PartitionBackfill {
+    id
+    hasCancelPermission
+    hasResumePermission
+    isAssetBackfill
+    status
+    numCancelable
+
+    ...BackfillStepStatusDialogBackfillFragment
+    ...BackfillTerminationDialogBackfillFragment
+  }
+
+  ${BACKFILL_STEP_STATUS_DIALOG_BACKFILL_FRAGMENT}
+  ${BACKFILL_TERMINATION_DIALOG_BACKFILL_FRAGMENT}
+`;
diff --git a/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillLogsTab.tsx b/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillLogsTab.tsx
@@ -2,7 +2,7 @@ import {Box, NonIdealState, Spinner} from '@dagster-io/ui-components';
 import React, {useMemo} from 'react';
 
 import {BackfillLogsPageQuery, BackfillLogsPageQueryVariables} from './types/BackfillLogsTab.types';
-import {BackfillDetailsBackfillFragment} from './types/BackfillPage.types';
+import {BackfillDetailsBackfillFragment} from './types/useBackfillDetailsQuery.types';
 import {gql} from '../../apollo-client';
 import {QueryRefreshCountdown} from '../../app/QueryRefresh';
 import {useCursorAccumulatedQuery} from '../../runs/useCursorAccumulatedQuery';