From 91688d658d385794e0597864e64ef1516971cbb7 Mon Sep 17 00:00:00 2001
From: Ben Gotow <ben@foundry376.com>
Date: Tue, 17 Sep 2024 16:26:56 -0500
Subject: [PATCH] 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 <bgotow@elementl.com>
Co-authored-by: Marco Salazar <marco@elementl.com>
Co-authored-by: JamieDeMaria <jamie@dagsterlabs.com>
---
 .../src/components/CursorControls.tsx         |   9 +-
 .../ui-components/src/components/Icon.tsx     |   2 +
 .../src/icon-svgs/run_with_subruns.svg        |  15 +
 .../dagster-ui/packages/ui-core/client.json   |   9 +-
 .../packages/ui-core/src/app/ContentRoot.tsx  |  11 +
 .../instance/backfill/BackfillActionsMenu.tsx | 131 +++++----
 ...b.tsx => BackfillAssetPartitionsTable.tsx} |  16 +-
 .../instance/backfill/BackfillFragments.tsx   |  42 +++
 .../src/instance/backfill/BackfillLogsTab.tsx |   2 +-
 .../backfill/BackfillOverviewDetails.tsx      |  63 +++++
 .../src/instance/backfill/BackfillPage.tsx    | 197 +-------------
 .../src/instance/backfill/BackfillRow.tsx     |  16 +-
 .../src/instance/backfill/BackfillRunsTab.tsx |  35 ++-
 .../backfill/BackfillStepStatusDialog.tsx     |  18 +-
 .../src/instance/backfill/BackfillTable.tsx   |  31 ++-
 .../backfill/BackfillTerminationDialog.tsx    |  11 +-
 .../instance/backfill/ExecutionTimeline.tsx   |   6 +-
 .../src/instance/backfill/LiveDuration.tsx    |  37 +++
 .../backfill/RunsFeedBackfillPage.tsx         | 155 +++++++++++
 .../__fixtures__/buildBackfillDetails.ts      |   4 +-
 .../backfill/__tests__/BackfillPage.test.tsx  |   3 +-
 ... => BackfillAssetPartitionsTable.types.ts} |   0
 ...nu.types.ts => BackfillFragments.types.ts} |  24 ++
 .../types/BackfillStepStatusDialog.types.ts   |  19 --
 .../backfill/types/BackfillTable.types.ts     |  28 +-
 .../types/BackfillTerminationDialog.types.ts  |   8 -
 ...es.ts => useBackfillDetailsQuery.types.ts} |  23 --
 .../backfill/useBackfillDetailsQuery.tsx      |  73 +++++
 .../instance/types/InstanceBackfills.types.ts |   2 +-
 .../types/JobBackfillsTable.types.ts          |   2 +-
 .../ui-core/src/runs/RunActionsMenu.tsx       |  43 ++-
 .../packages/ui-core/src/runs/RunRoot.tsx     |  39 ++-
 .../packages/ui-core/src/runs/RunRow.tsx      |  12 +-
 .../packages/ui-core/src/runs/RunRowTags.tsx  |   2 +-
 .../packages/ui-core/src/runs/RunTable.tsx    |   2 -
 .../ui-core/src/runs/RunTargetLink.tsx        |   5 +-
 .../ui-core/src/runs/RunsFeedRoot.tsx         | 215 +++++++++++++++
 .../packages/ui-core/src/runs/RunsFeedRow.tsx | 257 ++++++++++++++++++
 .../src/runs/types/RunActionsMenu.types.ts    |  25 ++
 .../src/runs/types/RunsFeedRoot.types.ts      |  98 +++++++
 .../src/runs/types/RunsFeedRow.types.ts       |  75 +++++
 .../src/runs/useCursorAccumulatedQuery.tsx    |  16 +-
 .../ui-core/src/runs/useResolveRunTarget.tsx  |   4 +-
 .../src/ticks/InstigationEventLogTable.tsx    |   2 +-
 node_modules/.yarn-integrity                  |  12 -
 45 files changed, 1352 insertions(+), 447 deletions(-)
 create mode 100644 js_modules/dagster-ui/packages/ui-components/src/icon-svgs/run_with_subruns.svg
 rename js_modules/dagster-ui/packages/ui-core/src/instance/backfill/{BackfillPartitionsTab.tsx => BackfillAssetPartitionsTable.tsx} (97%)
 create mode 100644 js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillFragments.tsx
 create mode 100644 js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillOverviewDetails.tsx
 create mode 100644 js_modules/dagster-ui/packages/ui-core/src/instance/backfill/LiveDuration.tsx
 create mode 100644 js_modules/dagster-ui/packages/ui-core/src/instance/backfill/RunsFeedBackfillPage.tsx
 rename js_modules/dagster-ui/packages/ui-core/src/instance/backfill/types/{BackfillPartitionsTab.types.ts => BackfillAssetPartitionsTable.types.ts} (100%)
 rename js_modules/dagster-ui/packages/ui-core/src/instance/backfill/types/{BackfillActionsMenu.types.ts => BackfillFragments.types.ts} (51%)
 delete mode 100644 js_modules/dagster-ui/packages/ui-core/src/instance/backfill/types/BackfillStepStatusDialog.types.ts
 rename js_modules/dagster-ui/packages/ui-core/src/instance/backfill/types/{BackfillPage.types.ts => useBackfillDetailsQuery.types.ts} (85%)
 create mode 100644 js_modules/dagster-ui/packages/ui-core/src/instance/backfill/useBackfillDetailsQuery.tsx
 create mode 100644 js_modules/dagster-ui/packages/ui-core/src/runs/RunsFeedRoot.tsx
 create mode 100644 js_modules/dagster-ui/packages/ui-core/src/runs/RunsFeedRow.tsx
 create mode 100644 js_modules/dagster-ui/packages/ui-core/src/runs/types/RunsFeedRoot.types.ts
 create mode 100644 js_modules/dagster-ui/packages/ui-core/src/runs/types/RunsFeedRow.types.ts
 delete mode 100644 node_modules/.yarn-integrity

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
index ae3214315f00b..06e85da63b8be 100644
--- 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,6 +9,7 @@ export interface CursorPaginationProps {
   popCursor: () => void;
   advanceCursor: () => void;
   reset: () => void;
+  style?: CSSProperties;
 }
 
 export const CursorPaginationControls = ({
@@ -16,9 +17,10 @@ export const CursorPaginationControls = ({
   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
index 9246786b5c852..6ab98e61bed19 100644
--- 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
new file mode 100644
index 0000000000000..288410dd51954
--- /dev/null
+++ b/js_modules/dagster-ui/packages/ui-components/src/icon-svgs/run_with_subruns.svg
@@ -0,0 +1,15 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <clipPath id="cut-off-circle-0">
+        <rect x="-9" width="14" height="20" fill="white" />
+    </clipPath>
+    <path
+        d="M8 12.1C8.58333 12.1 9.07917 11.8958 9.4875 11.4875C9.89583 11.0792 10.1 10.5833 10.1 10C10.1 9.41667 9.89583 8.92083 9.4875 8.5125C9.07917 8.10417 8.58333 7.9 8 7.9C7.41667 7.9 6.92083 8.10417 6.5125 8.5125C6.10417 8.92083 5.9 9.41667 5.9 10C5.9 10.5833 6.10417 11.0792 6.5125 11.4875C6.92083 11.8958 7.41667 12.1 8 12.1ZM8 17C7.03167 17 6.12167 16.8162 5.27 16.4487C4.41833 16.0812 3.6775 15.5825 3.0475 14.9525C2.4175 14.3225 1.91875 13.5817 1.55125 12.73C1.18375 11.8783 1 10.9683 1 10C1 9.03167 1.18375 8.12167 1.55125 7.27C1.91875 6.41833 2.4175 5.6775 3.0475 5.0475C3.6775 4.4175 4.41833 3.91875 5.27 3.55125C6.12167 3.18375 7.03167 3 8 3C8.96833 3 9.87833 3.18375 10.73 3.55125C11.5817 3.91875 12.3225 4.4175 12.9525 5.0475C13.5825 5.6775 14.0812 6.41833 14.4487 7.27C14.8162 8.12167 15 9.03167 15 10C15 10.9683 14.8162 11.8783 14.4487 12.73C14.0812 13.5817 13.5825 14.3225 12.9525 14.9525C12.3225 15.5825 11.5817 16.0812 10.73 16.4487C9.87833 16.8162 8.96833 17 8 17ZM8 15.6C9.56333 15.6 10.8875 15.0575 11.9725 13.9725C13.0575 12.8875 13.6 11.5633 13.6 10C13.6 8.43667 13.0575 7.1125 11.9725 6.0275C10.8875 4.9425 9.56333 4.4 8 4.4C6.43667 4.4 5.1125 4.9425 4.0275 6.0275C2.9425 7.1125 2.4 8.43667 2.4 10C2.4 11.5633 2.9425 12.8875 4.0275 13.9725C5.1125 15.0575 6.43667 15.6 8 15.6Z"
+        fill="#302B8D" clip-path="url(#cut-off-circle-0)" />
+    <clipPath id="cut-off-circle">
+        <rect x="5" width="14" height="20" fill="white" />
+    </clipPath>
+    <path
+        d="M12 12.1C12.5833 12.1 13.0792 11.8958 13.4875 11.4875C13.8958 11.0792 14.1 10.5833 14.1 10C14.1 9.41667 13.8958 8.92083 13.4875 8.5125C13.0792 8.10417 12.5833 7.9 12 7.9C11.4167 7.9 10.9208 8.10417 10.5125 8.5125C10.1042 8.92083 9.9 9.41667 9.9 10C9.9 10.5833 10.1042 11.0792 10.5125 11.4875C10.9208 11.8958 11.4167 12.1 12 12.1ZM12 17C11.0317 17 10.1217 16.8162 9.27 16.4487C8.41833 16.0812 7.6775 15.5825 7.0475 14.9525C6.4175 14.3225 5.91875 13.5817 5.55125 12.73C5.18375 11.8783 5 10.9683 5 10C5 9.03167 5.18375 8.12167 5.55125 7.27C5.91875 6.41833 6.4175 5.6775 7.0475 5.0475C7.6775 4.4175 8.41833 3.91875 9.27 3.55125C10.1217 3.18375 11.0317 3 12 3C12.9683 3 13.8783 3.18375 14.73 3.55125C15.5817 3.91875 16.3225 4.4175 16.9525 5.0475C17.5825 5.6775 18.0812 6.41833 18.4487 7.27C18.8162 8.12167 19 9.03167 19 10C19 10.9683 18.8162 11.8783 18.4487 12.73C18.0812 13.5817 17.5825 14.3225 16.9525 14.9525C16.3225 15.5825 15.5817 16.0812 14.73 16.4487C13.8783 16.8162 12.9683 17 12 17ZM12 15.6C13.5633 15.6 14.8875 15.0575 15.9725 13.9725C17.0575 12.8875 17.6 11.5633 17.6 10C17.6 8.43667 17.0575 7.1125 15.9725 6.0275C14.8875 4.9425 13.5633 4.4 12 4.4C10.4367 4.4 9.1125 4.9425 8.0275 6.0275C6.9425 7.1125 6.4 8.43667 6.4 10C6.4 11.5633 6.9425 12.8875 8.0275 13.9725C9.1125 15.0575 10.4367 15.6 12 15.6Z"
+        fill="#302B8D" clip-path="url(#cut-off-circle)" />
+</svg>
+    
\ No newline at end of file
diff --git a/js_modules/dagster-ui/packages/ui-core/client.json b/js_modules/dagster-ui/packages/ui-core/client.json
index 5ce787e4e13ff..e78aa7f5eb4c1 100644
--- a/js_modules/dagster-ui/packages/ui-core/client.json
+++ b/js_modules/dagster-ui/packages/ui-core/client.json
@@ -50,7 +50,7 @@
   "ReportEventMutation": "80b4987cdf27ec8fac25eb6b98b996bd4fdeb4cbfff605d647da5d4bb8244cb0",
   "AssetWipeMutation": "accefb0c47b3d4a980d16965e8af565afed787a8a987a03570df876bd734dc8f",
   "RunGroupPanelQuery": "c454b4e4c3d881b2a78361c5868212f734c458291a3cb28be8ba4a63030eb004",
-  "InstanceBackfillsQuery": "944d836e7cc69aa542d893f9ab84f46e766fb370cfb63be15bd03d67e1b0cff9",
+  "InstanceBackfillsQuery": "d90a8ec6da1d9a32290e631d2dd0934aac4ba36c0ed78fed0aaa8bd94a15e0c6",
   "InstanceConcurrencyLimitsQuery": "eff036379500d5b400ba5a0d3f4f22fad1bd42efefbeeafa16b43ca8b160c312",
   "SetConcurrencyLimit": "758e6bfdb936dff3e4e38f8e1fb447548710a2b2c66fbcad9d4f264a10a61044",
   "DeleteConcurrencyLimit": "03397142bc71bc17649f43dd17aabf4ea771436ebc4ee1cb40eff2c2848d7b4d",
@@ -62,13 +62,13 @@
   "RunReExecutionQuery": "95f0a988be27f8d33377eec80eaac91bcbd709e73098e0b12f05f71c4f732077",
   "StepSummaryForRunQuery": "2890d0cd46c1f4d8b350a5fec57a0558ac3054e0ca93278998d66a54b2ebedbd",
   "SingleConcurrencyKeyQuery": "fd72bd62ac87f3c72ec589610c7c52398643740f1f2904b04e1e293b08daf763",
-  "BackfillLogsPageQuery": "f09a06b9d26011fa0d65199eb0dfc799216e28541f1c9c32bba6c93d2d856c91",
-  "BackfillStatusesByAsset": "f785cda54d7032605fd180e1d1641151836651e3da314fcf8393cf3c43ab9bb4",
   "BackfillPartitionsForAssetKey": "672b7141fd1dfb275a4ef6ae3e8fc1eaa0707270c1fd329ed6b66058e2376e55",
+  "BackfillLogsPageQuery": "f09a06b9d26011fa0d65199eb0dfc799216e28541f1c9c32bba6c93d2d856c91",
   "SingleBackfillQuery": "c2b27d4666926a1c0bfd0c7cfabf9840c67e33a0a374651ee8e52bdec395aa56",
   "CancelBackfill": "138f5ba5d38b0d939a6a0bf34769cf36c16bb99225204e28e5ab5fcd8baf3194",
   "resumeBackfill": "89327db4bc94c65ac484fa9b914f28b6c70f09dce91bbaab9aec8593188bdcbe",
   "LaunchPartitionBackfill": "12402e3e19e32ede40dbc04673d452c2d4b3e6a09509c80fdd065c92e3640daa",
+  "BackfillStatusesByAsset": "f785cda54d7032605fd180e1d1641151836651e3da314fcf8393cf3c43ab9bb4",
   "InstanceConfigHasInfo": "771982a9ee439781255f82986d55aa6a75ab2929d784f2cd27b40f537baf7f27",
   "InstanceWarningQuery": "7ead177b08f678cb85bfebac63b1b25fff6c60c50c862a3c3d20d8d701463823",
   "InstanceRunQueueConfig": "51de03303f49487cecbfbcd9a6624b8999779a88412c035aced402cb295e40c5",
@@ -101,7 +101,7 @@
   "DaemonNotRunningAlertQuery": "f016870739b8816036750fb916c536889c862b5d591bf7c552f5cdefde693539",
   "BackfillSelectorQuery": "715413ccaeb3a6d4b6d9b6ff9aa6cb98ab40e2d4ee1469a9883182f9d3f540b6",
   "AddDynamicPartitionMutation": "09fbfa963ad43c7fecfc8e4f780e1ca98ffcea9f0b04e916c78061667cb250eb",
-  "JobBackfillsQuery": "9faca72d06cc7e1fb5423ea3b7f71d6ade5645bcbbe03322e092811de3ba36bd",
+  "JobBackfillsQuery": "6e804c78aee886ce0b8cd8c8e1f9a004fa0bc6504dc411b5e32c290dd9ae923d",
   "PartitionsStatusQuery": "b51624d0ee6d3afd7bfd67307b3391318d53e7e3d977d3605f8a405d38c5969e",
   "PartitionRunListQuery": "a767fc2c778f8dc83fe1c265924cd6e5944e3e0daf6a94b14eda6f45a409f4ec",
   "PartitionStepStatusPipelineQuery": "d5ef608096052079835b7080ed72204eab4168a32953d065b398ae7de975c0fb",
@@ -129,6 +129,7 @@
   "Delete": "3c61c79b99122910e754a8863e80dc5ed479a0c23cc1a9d9878d91e603fc0dfe",
   "Terminate": "67acf403eb320a93c9a9aa07f675a1557e0887d499cd5598f1d5ff360afc15c0",
   "LaunchPipelineReexecution": "d21e4ecaf3d1d163c4772f1d847dbdcbdaa9a40e6de0808a064ae767adf0c311",
+  "RunsFeedRootQuery": "3dc4ec68d0d42dff05c4d66bbe5490b2251268c8b68abe84de6e48d64365fb75",
   "RunTagKeysQuery": "833a405f7cb8f30c0901bc8a272edb51ac5281ebdf563e3017eace5d6976b2a9",
   "RunTagValuesQuery": "0c0a9998c215bb801eb0adcd5449c0ac4cf1e8efbc6d0fcc5fb6d76fcc95cb92",
   "ScheduledRunsListQuery": "2650d8ebdfc444fe76fcf8acd9ff54f9ecacdb680b1d83e3f487cb71dd0c7eae",
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
index 866e0b0847e72..c8c7133071de3 100644
--- 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
index f12d4de6515a4..ea7055eb71028 100644
--- 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/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillPartitionsTab.tsx b/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillAssetPartitionsTable.tsx
similarity index 97%
rename from js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillPartitionsTab.tsx
rename to js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillAssetPartitionsTable.tsx
index d24f2422aca9c..f2f6729e889ac 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillPartitionsTab.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/instance/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,10 +26,6 @@ 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)';
 
@@ -33,7 +33,11 @@ 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
new file mode 100644
index 0000000000000..de2c078413600
--- /dev/null
+++ 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
index 4b3895034e9d2..20e1b16e0381a 100644
--- 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';
diff --git a/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillOverviewDetails.tsx b/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillOverviewDetails.tsx
new file mode 100644
index 0000000000000..07e71e485ba3f
--- /dev/null
+++ b/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillOverviewDetails.tsx
@@ -0,0 +1,63 @@
+import {Box, Colors} from '@dagster-io/ui-components';
+import styled from 'styled-components';
+
+import {BackfillStatusTagForPage} from './BackfillStatusTagForPage';
+import {LiveDuration} from './LiveDuration';
+import {TargetPartitionsDisplay} from './TargetPartitionsDisplay';
+import {Timestamp} from '../../app/time/Timestamp';
+import {testId} from '../../testing/testId';
+
+export const BackfillOverviewDetails = ({backfill}: {backfill: any}) => (
+  <Box
+    padding={24}
+    flex={{
+      direction: 'row',
+      justifyContent: 'space-between',
+      wrap: 'nowrap',
+      alignItems: 'center',
+    }}
+    data-testid={testId('backfill-page-details')}
+  >
+    <Detail
+      label="Created"
+      detail={
+        <Timestamp
+          timestamp={{ms: Number(backfill.timestamp * 1000)}}
+          timeFormat={{showSeconds: true, showTimezone: false}}
+        />
+      }
+    />
+    <Detail
+      label="Duration"
+      detail={
+        <LiveDuration
+          start={backfill.timestamp * 1000}
+          end={backfill.endTimestamp ? backfill.endTimestamp * 1000 : null}
+        />
+      }
+    />
+    <Detail
+      label="Partition selection"
+      detail={
+        <TargetPartitionsDisplay
+          targetPartitionCount={backfill.numPartitions || 0}
+          targetPartitions={backfill.assetBackfillData?.rootTargetedPartitions}
+        />
+      }
+    />
+    <Detail label="Status" detail={<BackfillStatusTagForPage backfill={backfill} />} />
+  </Box>
+);
+
+const Detail = ({label, detail}: {label: JSX.Element | string; detail: JSX.Element | string}) => (
+  <Box flex={{direction: 'column', gap: 4}} style={{minWidth: '280px'}}>
+    <Label>{label}</Label>
+    <div>{detail}</div>
+  </Box>
+);
+
+const Label = styled.div`
+  color: ${Colors.textLight()};
+  font-size: 12px;
+  line-height: 16px;
+`;
diff --git a/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillPage.tsx b/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillPage.tsx
index 286745567cc3f..3fd9ab12a73e4 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillPage.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillPage.tsx
@@ -9,30 +9,19 @@ import {
   Tab,
   Tabs,
 } from '@dagster-io/ui-components';
-import dayjs from 'dayjs';
-import duration from 'dayjs/plugin/duration';
-import relativeTime from 'dayjs/plugin/relativeTime';
-import {useContext, useEffect, useReducer} from 'react';
+import {useContext} from 'react';
 import {Link, useParams} from 'react-router-dom';
-import styled from 'styled-components';
 
-import {BACKFILL_ACTIONS_BACKFILL_FRAGMENT, BackfillActionsMenu} from './BackfillActionsMenu';
+import {BackfillActionsMenu} from './BackfillActionsMenu';
+import {BackfillAssetPartitionsTable} from './BackfillAssetPartitionsTable';
 import {BackfillLogsTab} from './BackfillLogsTab';
-import {BackfillPartitionsTab} from './BackfillPartitionsTab';
+import {BackfillOverviewDetails} from './BackfillOverviewDetails';
 import {BackfillRunsTab} from './BackfillRunsTab';
-import {BackfillStatusTagForPage} from './BackfillStatusTagForPage';
-import {TargetPartitionsDisplay} from './TargetPartitionsDisplay';
-import {
-  BackfillStatusesByAssetQuery,
-  BackfillStatusesByAssetQueryVariables,
-} from './types/BackfillPage.types';
-import {gql, useQuery} from '../../apollo-client';
+import {useBackfillDetailsQuery} from './useBackfillDetailsQuery';
 import {CloudOSSContext} from '../../app/CloudOSSContext';
-import {PYTHON_ERROR_FRAGMENT} from '../../app/PythonErrorFragment';
 import {PythonErrorInfo} from '../../app/PythonErrorInfo';
 import {QueryRefreshCountdown, useQueryRefreshAtInterval} from '../../app/QueryRefresh';
 import {useTrackPageView} from '../../app/analytics';
-import {Timestamp} from '../../app/time/Timestamp';
 import {BulkActionStatus} from '../../graphql/types';
 import {useDocumentTitle} from '../../hooks/useDocumentTitle';
 import {useQueryPersistedState} from '../../hooks/useQueryPersistedState';
@@ -42,9 +31,6 @@ import {
 } from '../../partitions/BackfillMessaging';
 import {testId} from '../../testing/testId';
 
-dayjs.extend(duration);
-dayjs.extend(relativeTime);
-
 export const BackfillPage = () => {
   const {featureContext} = useContext(CloudOSSContext);
   const {backfillId} = useParams<{backfillId: string}>();
@@ -56,13 +42,8 @@ export const BackfillPage = () => {
     defaults: {tab: 'partitions'},
   });
 
+  const queryResult = useBackfillDetailsQuery(backfillId);
   const isDaemonHealthy = useIsBackfillDaemonHealthy();
-
-  const queryResult = useQuery<BackfillStatusesByAssetQuery, BackfillStatusesByAssetQueryVariables>(
-    BACKFILL_DETAILS_QUERY,
-    {variables: {backfillId}},
-  );
-
   const {data, error} = queryResult;
 
   const backfill =
@@ -96,45 +77,7 @@ export const BackfillPage = () => {
 
     return (
       <>
-        <Box
-          padding={24}
-          flex={{
-            direction: 'row',
-            justifyContent: 'space-between',
-            wrap: 'nowrap',
-            alignItems: 'center',
-          }}
-          data-testid={testId('backfill-page-details')}
-        >
-          <Detail
-            label="Created"
-            detail={
-              <Timestamp
-                timestamp={{ms: Number(backfill.timestamp * 1000)}}
-                timeFormat={{showSeconds: true, showTimezone: false}}
-              />
-            }
-          />
-          <Detail
-            label="Duration"
-            detail={
-              <BackfillDuration
-                start={backfill.timestamp * 1000}
-                end={backfill.endTimestamp ? backfill.endTimestamp * 1000 : null}
-              />
-            }
-          />
-          <Detail
-            label="Partition selection"
-            detail={
-              <TargetPartitionsDisplay
-                targetPartitionCount={backfill.numPartitions || 0}
-                targetPartitions={backfill.assetBackfillData?.rootTargetedPartitions}
-              />
-            }
-          />
-          <Detail label="Status" detail={<BackfillStatusTagForPage backfill={backfill} />} />
-        </Box>
+        <BackfillOverviewDetails backfill={backfill} />
 
         {isDaemonHealthy ? null : (
           <Box padding={{horizontal: 24, bottom: 16}}>
@@ -156,8 +99,8 @@ export const BackfillPage = () => {
           <Alert intent="error" title={error.graphQLErrors.map((err) => err.message)} />
         )}
         <Box flex={{direction: 'column'}} style={{flex: 1, position: 'relative', minHeight: 0}}>
-          {selectedTab === 'partitions' && <BackfillPartitionsTab backfill={backfill} />}
-          {selectedTab === 'runs' && <BackfillRunsTab backfill={backfill} />}
+          {selectedTab === 'partitions' && <BackfillAssetPartitionsTable backfill={backfill} />}
+          {selectedTab === 'runs' && <BackfillRunsTab backfill={backfill} view="both" />}
           {selectedTab === 'logs' && <BackfillLogsTab backfill={backfill} />}
         </Box>
       </>
@@ -193,125 +136,3 @@ export const BackfillPage = () => {
     </Box>
   );
 };
-
-const Detail = ({label, detail}: {label: JSX.Element | string; detail: JSX.Element | string}) => (
-  <Box flex={{direction: 'column', gap: 4}} style={{minWidth: '280px'}}>
-    <Label>{label}</Label>
-    <div>{detail}</div>
-  </Box>
-);
-
-const Label = styled.div`
-  color: ${Colors.textLight()};
-  font-size: 12px;
-  line-height: 16px;
-`;
-
-const BackfillDuration = ({start, end}: {start: number; end?: number | null}) => {
-  const [_, rerender] = useReducer((s: number, _: any) => s + 1, 0);
-  useEffect(() => {
-    if (end) {
-      return;
-    }
-    const intervalId = setInterval(rerender, 1000);
-    return () => clearInterval(intervalId);
-  }, [start, end]);
-  const duration = end ? end - start : Date.now() - start;
-
-  return <span>{formatDuration(duration)}</span>;
-};
-
-export const BACKFILL_DETAILS_QUERY = gql`
-  query BackfillStatusesByAsset($backfillId: String!) {
-    partitionBackfillOrError(backfillId: $backfillId) {
-      ...BackfillDetailsBackfillFragment
-      ...PythonErrorFragment
-      ... on BackfillNotFoundError {
-        message
-      }
-    }
-  }
-
-  fragment BackfillDetailsBackfillFragment on PartitionBackfill {
-    id
-    status
-    timestamp
-    endTimestamp
-    numPartitions
-    ...BackfillActionsBackfillFragment
-
-    error {
-      ...PythonErrorFragment
-    }
-    assetBackfillData {
-      rootTargetedPartitions {
-        partitionKeys
-        ranges {
-          start
-          end
-        }
-      }
-      assetBackfillStatuses {
-        ... on AssetPartitionsStatusCounts {
-          assetKey {
-            path
-          }
-          numPartitionsTargeted
-          numPartitionsInProgress
-          numPartitionsMaterialized
-          numPartitionsFailed
-        }
-        ... on UnpartitionedAssetStatus {
-          assetKey {
-            path
-          }
-          inProgress
-          materialized
-          failed
-        }
-      }
-    }
-  }
-
-  ${PYTHON_ERROR_FRAGMENT}
-  ${BACKFILL_ACTIONS_BACKFILL_FRAGMENT}
-`;
-
-export const BACKFILL_PARTITIONS_FOR_ASSET_KEY_QUERY = gql`
-  query BackfillPartitionsForAssetKey($backfillId: String!, $assetKey: AssetKeyInput!) {
-    partitionBackfillOrError(backfillId: $backfillId) {
-      ... on PartitionBackfill {
-        id
-        partitionsTargetedForAssetKey(assetKey: $assetKey) {
-          partitionKeys
-          ranges {
-            start
-            end
-          }
-        }
-      }
-    }
-  }
-`;
-
-const formatDuration = (duration: number) => {
-  const seconds = Math.floor((duration / 1000) % 60);
-  const minutes = Math.floor((duration / (1000 * 60)) % 60);
-  const hours = Math.floor((duration / (1000 * 60 * 60)) % 24);
-  const days = Math.floor(duration / (1000 * 60 * 60 * 24));
-
-  let result = '';
-  if (days > 0) {
-    result += `${days}d `;
-    result += `${hours}h`;
-  } else if (hours > 0) {
-    result += `${hours}h `;
-    result += `${minutes}m`;
-  } else if (minutes > 0) {
-    result += `${minutes}m `;
-    result += `${seconds}s`;
-  } else if (seconds > 0) {
-    result += `${seconds}s`;
-  }
-  return result.trim();
-};
diff --git a/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillRow.tsx b/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillRow.tsx
index a59cd1be3e82f..24a77dd009332 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillRow.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillRow.tsx
@@ -156,11 +156,11 @@ export const BackfillRowContent = ({
   );
 };
 
-const BackfillTarget = ({
+export const BackfillTarget = ({
   backfill,
   repoAddress,
 }: {
-  backfill: BackfillTableFragment;
+  backfill: Pick<BackfillTableFragment, 'assetSelection' | 'partitionSet' | 'partitionSetName'>;
   repoAddress: RepoAddress | null;
 }) => {
   const repo = useRepository(repoAddress);
@@ -225,13 +225,17 @@ const BackfillTarget = ({
     return null;
   };
 
+  const repoLink = buildRepoLink();
+  const pipelineOrAssets = buildPipelineOrAssets();
   return (
     <Box flex={{direction: 'column', gap: 8}}>
       {buildHeader()}
-      <Box flex={{direction: 'column', gap: 4}} style={{fontSize: '12px'}}>
-        {buildRepoLink()}
-        {buildPipelineOrAssets()}
-      </Box>
+      {(pipelineOrAssets || repoLink) && (
+        <Box flex={{direction: 'column', gap: 4}} style={{fontSize: '12px'}}>
+          {repoLink}
+          {pipelineOrAssets}
+        </Box>
+      )}
     </Box>
   );
 };
diff --git a/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillRunsTab.tsx b/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillRunsTab.tsx
index 8252b21144463..df990afbe8414 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillRunsTab.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillRunsTab.tsx
@@ -11,7 +11,7 @@ import {
 import React, {useDeferredValue, useMemo} from 'react';
 
 import {ExecutionTimeline} from './ExecutionTimeline';
-import {BackfillDetailsBackfillFragment} from './types/BackfillPage.types';
+import {BackfillDetailsBackfillFragment} from './types/useBackfillDetailsQuery.types';
 import {
   FIFTEEN_SECONDS,
   QueryRefreshCountdown,
@@ -30,11 +30,18 @@ import {StickyTableContainer} from '../../ui/StickyTableContainer';
 const BACKFILL_RUNS_HOUR_WINDOW_KEY = 'dagster.backfill-run-timeline-hour-window';
 const PAGE_SIZE = 25;
 
-export const BackfillRunsTab = ({backfill}: {backfill: BackfillDetailsBackfillFragment}) => {
-  const [view, setView] = useQueryPersistedState<'timeline' | 'list'>({
+export const BackfillRunsTab = ({
+  backfill,
+  view: propView,
+}: {
+  backfill: BackfillDetailsBackfillFragment;
+  view: 'timeline' | 'list' | 'both';
+}) => {
+  const [_view, setView] = useQueryPersistedState<'timeline' | 'list'>({
     defaults: {view: 'timeline'},
     queryKey: 'view',
   });
+  const view = propView === 'both' ? _view : propView;
 
   const {rangeMs, hourWindow, setHourWindow, onPageEarlier, onPageLater, onPageNow} =
     useTimelineRange({
@@ -62,16 +69,18 @@ export const BackfillRunsTab = ({backfill}: {backfill: BackfillDetailsBackfillFr
 
   const actionBarComponents = (
     <Box flex={{direction: 'row', gap: 16}} style={{position: 'sticky', top: 0}}>
-      <ButtonGroup
-        activeItems={new Set([view])}
-        onClick={(id: 'timeline' | 'list') => {
-          setView(id);
-        }}
-        buttons={[
-          {id: 'timeline', icon: 'gantt_waterfall', label: 'Timeline'},
-          {id: 'list', icon: 'list', label: 'List'},
-        ]}
-      />
+      {propView === 'both' ? (
+        <ButtonGroup
+          activeItems={new Set([view])}
+          onClick={(id: 'timeline' | 'list') => {
+            setView(id);
+          }}
+          buttons={[
+            {id: 'timeline', icon: 'gantt_waterfall', label: 'Timeline'},
+            {id: 'list', icon: 'list', label: 'List'},
+          ]}
+        />
+      ) : undefined}
       <div style={{flex: 1}} />
       {view === 'timeline' && (
         <ButtonGroup<HourWindow>
diff --git a/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillStepStatusDialog.tsx b/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillStepStatusDialog.tsx
index bc014ef35d6a7..afb9171a5cd02 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillStepStatusDialog.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillStepStatusDialog.tsx
@@ -1,8 +1,7 @@
 import {Button, Dialog, DialogFooter} from '@dagster-io/ui-components';
 import {useMemo, useState} from 'react';
 
-import {BackfillStepStatusDialogBackfillFragment} from './types/BackfillStepStatusDialog.types';
-import {gql} from '../../apollo-client';
+import {BackfillStepStatusDialogBackfillFragment} from './types/BackfillFragments.types';
 import {PartitionPerOpStatus} from '../../partitions/PartitionStepStatus';
 import {usePartitionStepQuery} from '../../partitions/usePartitionStepQuery';
 import {DagsterTag} from '../../runs/RunTag';
@@ -62,21 +61,6 @@ export const BackfillStepStatusDialog = ({backfill, onClose}: Props) => {
   );
 };
 
-export const BACKFILL_STEP_STATUS_DIALOG_BACKFILL_FRAGMENT = gql`
-  fragment BackfillStepStatusDialogBackfillFragment on PartitionBackfill {
-    id
-    partitionNames
-    partitionSet {
-      name
-      pipelineName
-      repositoryOrigin {
-        repositoryName
-        repositoryLocationName
-      }
-    }
-  }
-`;
-
 interface ContentProps {
   backfill: BackfillStepStatusDialogBackfillFragment;
   partitionSet: NonNullable<BackfillStepStatusDialogBackfillFragment['partitionSet']>;
diff --git a/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillTable.tsx b/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillTable.tsx
index 75a0a26da518f..12b9be6d156f3 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillTable.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillTable.tsx
@@ -1,7 +1,7 @@
 import {Table} from '@dagster-io/ui-components';
 import {useState} from 'react';
 
-import {BACKFILL_ACTIONS_BACKFILL_FRAGMENT} from './BackfillActionsMenu';
+import {BACKFILL_ACTIONS_BACKFILL_FRAGMENT} from './BackfillFragments';
 import {BackfillPartitionsRequestedDialog} from './BackfillPartitionsRequestedDialog';
 import {BackfillRow} from './BackfillRow';
 import {BackfillTableFragment} from './types/BackfillTable.types';
@@ -58,6 +58,20 @@ export const BackfillTable = ({
   );
 };
 
+export const PARTITION_SET_FOR_BACKFILL_TABLE_FRAGMENT = gql`
+  fragment PartitionSetForBackfillTableFragment on PartitionSet {
+    id
+    name
+    mode
+    pipelineName
+    repositoryOrigin {
+      id
+      repositoryName
+      repositoryLocationName
+    }
+  }
+`;
+
 export const BACKFILL_TABLE_FRAGMENT = gql`
   fragment BackfillTableFragment on PartitionBackfill {
     id
@@ -70,7 +84,7 @@ export const BACKFILL_TABLE_FRAGMENT = gql`
     partitionSetName
     partitionSet {
       id
-      ...PartitionSetForBackfillTable
+      ...PartitionSetForBackfillTableFragment
     }
     assetSelection {
       path
@@ -85,18 +99,7 @@ export const BACKFILL_TABLE_FRAGMENT = gql`
     ...BackfillActionsBackfillFragment
   }
 
-  fragment PartitionSetForBackfillTable on PartitionSet {
-    id
-    name
-    mode
-    pipelineName
-    repositoryOrigin {
-      id
-      repositoryName
-      repositoryLocationName
-    }
-  }
-
   ${PYTHON_ERROR_FRAGMENT}
   ${BACKFILL_ACTIONS_BACKFILL_FRAGMENT}
+  ${PARTITION_SET_FOR_BACKFILL_TABLE_FRAGMENT}
 `;
diff --git a/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillTerminationDialog.tsx b/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillTerminationDialog.tsx
index 8a50156f79cfd..9e6324cf6a028 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillTerminationDialog.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillTerminationDialog.tsx
@@ -2,9 +2,9 @@ import {Button, Dialog, DialogBody, DialogFooter} from '@dagster-io/ui-component
 import {useMemo, useState} from 'react';
 
 import {SINGLE_BACKFILL_CANCELABLE_RUNS_QUERY} from './BackfillRow';
+import {BackfillTerminationDialogBackfillFragment} from './types/BackfillFragments.types';
 import {SingleBackfillQuery, SingleBackfillQueryVariables} from './types/BackfillRow.types';
 import {
-  BackfillTerminationDialogBackfillFragment,
   CancelBackfillMutation,
   CancelBackfillMutationVariables,
 } from './types/BackfillTerminationDialog.types';
@@ -115,15 +115,6 @@ export const BackfillTerminationDialog = ({backfill, onClose, onComplete}: Props
   );
 };
 
-export const BACKFILL_TERMINATION_DIALOG_BACKFILL_FRAGMENT = gql`
-  fragment BackfillTerminationDialogBackfillFragment on PartitionBackfill {
-    id
-    status
-    isAssetBackfill
-    numCancelable
-  }
-`;
-
 const CANCEL_BACKFILL_MUTATION = gql`
   mutation CancelBackfill($backfillId: String!) {
     cancelPartitionBackfill(backfillId: $backfillId) {
diff --git a/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/ExecutionTimeline.tsx b/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/ExecutionTimeline.tsx
index e72c3221b1d22..0df819efde7be 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/ExecutionTimeline.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/ExecutionTimeline.tsx
@@ -1,8 +1,9 @@
 import {Box, Colors, Spinner, useViewport} from '@dagster-io/ui-components';
 import {useVirtualizer} from '@tanstack/react-virtual';
-import React from 'react';
+import React, {useContext} from 'react';
 import {Link} from 'react-router-dom';
 
+import {RunRequestContext} from './RunsFeedBackfillPage';
 import {RunStatusDot} from '../../runs/RunStatusDots';
 import {
   CONSTANTS,
@@ -142,6 +143,7 @@ export const ExecutionTimelineRow = ({
 }) => {
   const [start, end] = range;
   const width = containerWidth - LEFT_SIDE_SPACE_ALLOTTED;
+  const {buildLinkToRun} = useContext(RunRequestContext);
 
   const chunk = React.useMemo(() => {
     const batches: RunBatch<TimelineRun>[] = batchRunsForTimeline({
@@ -165,7 +167,7 @@ export const ExecutionTimelineRow = ({
       >
         <Box flex={{alignItems: 'center', gap: 4}}>
           <RunStatusDot status={run.status} size={12} />
-          <Link to={`/runs/${run.id}`}>{run.id.slice(0, 8)}</Link>
+          <Link to={buildLinkToRun(run)}>{run.id.slice(0, 8)}</Link>
         </Box>
         <TimeElapsed startUnix={run.startTime / 1000} endUnix={run.endTime / 1000} />
       </Box>
diff --git a/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/LiveDuration.tsx b/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/LiveDuration.tsx
new file mode 100644
index 0000000000000..136082fd9a599
--- /dev/null
+++ b/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/LiveDuration.tsx
@@ -0,0 +1,37 @@
+import {useEffect, useReducer} from 'react';
+
+export const LiveDuration = ({start, end}: {start: number; end?: number | null}) => {
+  const [_, rerender] = useReducer((s: number, _: any) => s + 1, 0);
+  useEffect(() => {
+    if (end) {
+      return;
+    }
+    const intervalId = setInterval(rerender, 1000);
+    return () => clearInterval(intervalId);
+  }, [start, end]);
+  const duration = end ? end - start : Date.now() - start;
+
+  return <span>{formatDuration(duration)}</span>;
+};
+
+const formatDuration = (duration: number) => {
+  const seconds = Math.floor((duration / 1000) % 60);
+  const minutes = Math.floor((duration / (1000 * 60)) % 60);
+  const hours = Math.floor((duration / (1000 * 60 * 60)) % 24);
+  const days = Math.floor(duration / (1000 * 60 * 60 * 24));
+
+  let result = '';
+  if (days > 0) {
+    result += `${days}d `;
+    result += `${hours}h`;
+  } else if (hours > 0) {
+    result += `${hours}h `;
+    result += `${minutes}m`;
+  } else if (minutes > 0) {
+    result += `${minutes}m `;
+    result += `${seconds}s`;
+  } else if (seconds > 0) {
+    result += `${seconds}s`;
+  }
+  return result.trim();
+};
diff --git a/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/RunsFeedBackfillPage.tsx b/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/RunsFeedBackfillPage.tsx
new file mode 100644
index 0000000000000..d9e89ca7d300e
--- /dev/null
+++ b/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/RunsFeedBackfillPage.tsx
@@ -0,0 +1,155 @@
+import {
+  Alert,
+  Box,
+  Colors,
+  Heading,
+  NonIdealState,
+  PageHeader,
+  Spinner,
+  Tab,
+  Tabs,
+} from '@dagster-io/ui-components';
+import {createContext, useContext} from 'react';
+import {Link, useParams} from 'react-router-dom';
+
+import {BackfillActionsMenu} from './BackfillActionsMenu';
+import {BackfillAssetPartitionsTable} from './BackfillAssetPartitionsTable';
+import {BackfillLogsTab} from './BackfillLogsTab';
+import {BackfillOverviewDetails} from './BackfillOverviewDetails';
+import {BackfillRunsTab} from './BackfillRunsTab';
+import {useBackfillDetailsQuery} from './useBackfillDetailsQuery';
+import {CloudOSSContext} from '../../app/CloudOSSContext';
+import {PythonErrorInfo} from '../../app/PythonErrorInfo';
+import {QueryRefreshCountdown, useQueryRefreshAtInterval} from '../../app/QueryRefresh';
+import {useTrackPageView} from '../../app/analytics';
+import {BulkActionStatus} from '../../graphql/types';
+import {useDocumentTitle} from '../../hooks/useDocumentTitle';
+import {useQueryPersistedState} from '../../hooks/useQueryPersistedState';
+import {
+  DaemonNotRunningAlert,
+  useIsBackfillDaemonHealthy,
+} from '../../partitions/BackfillMessaging';
+import {testId} from '../../testing/testId';
+
+export const RunRequestContext = createContext<{
+  buildLinkToRun: (run: {id: string}) => string;
+}>({
+  buildLinkToRun: ({id}) => `/runs/${id}`,
+});
+
+export const RunsFeedBackfillPage = () => {
+  const {featureContext} = useContext(CloudOSSContext);
+  const {backfillId} = useParams<{backfillId: string}>();
+  useTrackPageView();
+  useDocumentTitle(`Backfill | ${backfillId}`);
+
+  const isDaemonHealthy = useIsBackfillDaemonHealthy();
+
+  const [selectedTab, setSelectedTab] = useQueryPersistedState<
+    'overview' | 'logs' | 'runs' | 'timeline'
+  >({
+    queryKey: 'tab',
+    defaults: {tab: 'overview'},
+  });
+
+  const queryResult = useBackfillDetailsQuery(backfillId);
+  const {data, error} = queryResult;
+
+  const backfill =
+    data?.partitionBackfillOrError.__typename === 'PartitionBackfill'
+      ? data.partitionBackfillOrError
+      : null;
+
+  // for asset backfills, all of the requested runs have concluded in order for the status to be BulkActionStatus.COMPLETED
+  const isInProgress = backfill
+    ? [BulkActionStatus.REQUESTED, BulkActionStatus.CANCELING].includes(backfill.status)
+    : true;
+
+  const refreshState = useQueryRefreshAtInterval(queryResult, 10000, isInProgress);
+
+  function content() {
+    if (!data || !data.partitionBackfillOrError) {
+      return (
+        <Box padding={64} data-testid={testId('page-loading-indicator')}>
+          <Spinner purpose="page" />
+        </Box>
+      );
+    }
+    if (data.partitionBackfillOrError.__typename === 'PythonError') {
+      return <PythonErrorInfo error={data.partitionBackfillOrError} />;
+    }
+    if (data.partitionBackfillOrError.__typename === 'BackfillNotFoundError') {
+      return <NonIdealState icon="no-results" title={data.partitionBackfillOrError.message} />;
+    }
+
+    const backfill = data.partitionBackfillOrError;
+
+    return (
+      <Box style={{flex: 3, minHeight: 0}} flex={{direction: 'column'}}>
+        <Box padding={{left: 24}} border="bottom">
+          <Tabs size="large" selectedTabId={selectedTab}>
+            <Tab id="overview" title="Overview" onClick={() => setSelectedTab('overview')} />
+            <Tab id="runs" title="Sub-runs" onClick={() => setSelectedTab('runs')} />
+            <Tab id="timeline" title="Timeline" onClick={() => setSelectedTab('timeline')} />
+            {featureContext.canSeeBackfillCoordinatorLogs ? (
+              <Tab id="logs" title="Coordinator logs" onClick={() => setSelectedTab('logs')} />
+            ) : null}
+          </Tabs>
+        </Box>
+        {error?.graphQLErrors && (
+          <Alert intent="error" title={error.graphQLErrors.map((err) => err.message)} />
+        )}
+        <RunRequestContext.Provider
+          value={{buildLinkToRun: ({id}) => `/runs-feed/b/${backfillId}/${id}`}}
+        >
+          <Box flex={{direction: 'column'}} style={{flex: 1, position: 'relative', minHeight: 0}}>
+            {selectedTab === 'overview' && (
+              <Box style={{overflow: 'hidden'}} flex={{direction: 'column'}}>
+                {isDaemonHealthy ? null : (
+                  <Box padding={{horizontal: 24, top: 16}}>
+                    <DaemonNotRunningAlert />
+                  </Box>
+                )}
+
+                <BackfillOverviewDetails backfill={backfill} />
+                <BackfillAssetPartitionsTable backfill={backfill} />
+              </Box>
+            )}
+            {selectedTab === 'runs' && <BackfillRunsTab backfill={backfill} view="list" />}
+            {selectedTab === 'timeline' && <BackfillRunsTab backfill={backfill} view="timeline" />}
+            {selectedTab === 'logs' && <BackfillLogsTab backfill={backfill} />}
+          </Box>
+        </RunRequestContext.Provider>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flex={{direction: 'column'}} style={{height: '100%', overflow: 'hidden'}}>
+      <PageHeader
+        title={
+          <Heading>
+            <Link to="/runs-feed" style={{color: Colors.textLight()}}>
+              All runs
+            </Link>
+            {' / '}
+            {backfillId}
+          </Heading>
+        }
+        right={
+          <Box flex={{gap: 12, alignItems: 'center'}}>
+            {isInProgress ? <QueryRefreshCountdown refreshState={refreshState} /> : null}
+            {backfill ? (
+              <BackfillActionsMenu
+                backfill={backfill}
+                refetch={queryResult.refetch}
+                canCancelRuns={backfill.status === BulkActionStatus.REQUESTED}
+              />
+            ) : null}
+          </Box>
+        }
+      />
+      {content()}
+    </Box>
+  );
+};
diff --git a/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/__fixtures__/buildBackfillDetails.ts b/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/__fixtures__/buildBackfillDetails.ts
index 10068403e525d..8ffb620a9d313 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/__fixtures__/buildBackfillDetails.ts
+++ b/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/__fixtures__/buildBackfillDetails.ts
@@ -1,8 +1,8 @@
 import {MockedResponse} from '@apollo/client/testing';
 
 import {PartitionBackfill, buildPartitionBackfill} from '../../../graphql/types';
-import {BACKFILL_DETAILS_QUERY} from '../BackfillPage';
-import {BackfillStatusesByAssetQuery} from '../types/BackfillPage.types';
+import {BackfillStatusesByAssetQuery} from '../types/useBackfillDetailsQuery.types';
+import {BACKFILL_DETAILS_QUERY} from '../useBackfillDetailsQuery';
 
 export function buildBackfillDetailsQuery(
   backfillId: string,
diff --git a/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/__tests__/BackfillPage.test.tsx b/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/__tests__/BackfillPage.test.tsx
index ba1f860148b31..a77e0f6454f39 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/__tests__/BackfillPage.test.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/__tests__/BackfillPage.test.tsx
@@ -20,7 +20,8 @@ import {
   mockViewportClientRect,
   restoreViewportClientRect,
 } from '../../../testing/mocking';
-import {BACKFILL_DETAILS_QUERY, BackfillPage} from '../BackfillPage';
+import {BackfillPage} from '../BackfillPage';
+import {BACKFILL_DETAILS_QUERY} from '../useBackfillDetailsQuery';
 
 // This file must be mocked because Jest can't handle `import.meta.url`.
 jest.mock('../../../graph/asyncGraphLayout', () => ({}));
diff --git a/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/types/BackfillPartitionsTab.types.ts b/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/types/BackfillAssetPartitionsTable.types.ts
similarity index 100%
rename from js_modules/dagster-ui/packages/ui-core/src/instance/backfill/types/BackfillPartitionsTab.types.ts
rename to js_modules/dagster-ui/packages/ui-core/src/instance/backfill/types/BackfillAssetPartitionsTable.types.ts
diff --git a/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/types/BackfillActionsMenu.types.ts b/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/types/BackfillFragments.types.ts
similarity index 51%
rename from js_modules/dagster-ui/packages/ui-core/src/instance/backfill/types/BackfillActionsMenu.types.ts
rename to js_modules/dagster-ui/packages/ui-core/src/instance/backfill/types/BackfillFragments.types.ts
index 573f6a01f60ea..e87828a41ad0e 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/types/BackfillActionsMenu.types.ts
+++ b/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/types/BackfillFragments.types.ts
@@ -2,6 +2,30 @@
 
 import * as Types from '../../../graphql/types';
 
+export type BackfillTerminationDialogBackfillFragment = {
+  __typename: 'PartitionBackfill';
+  id: string;
+  status: Types.BulkActionStatus;
+  isAssetBackfill: boolean;
+  numCancelable: number;
+};
+
+export type BackfillStepStatusDialogBackfillFragment = {
+  __typename: 'PartitionBackfill';
+  id: string;
+  partitionNames: Array<string> | null;
+  partitionSet: {
+    __typename: 'PartitionSet';
+    name: string;
+    pipelineName: string;
+    repositoryOrigin: {
+      __typename: 'RepositoryOrigin';
+      repositoryName: string;
+      repositoryLocationName: string;
+    };
+  } | null;
+};
+
 export type BackfillActionsBackfillFragment = {
   __typename: 'PartitionBackfill';
   id: string;
diff --git a/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/types/BackfillStepStatusDialog.types.ts b/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/types/BackfillStepStatusDialog.types.ts
deleted file mode 100644
index c15f414b21d85..0000000000000
--- a/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/types/BackfillStepStatusDialog.types.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-// Generated GraphQL types, do not edit manually.
-
-import * as Types from '../../../graphql/types';
-
-export type BackfillStepStatusDialogBackfillFragment = {
-  __typename: 'PartitionBackfill';
-  id: string;
-  partitionNames: Array<string> | null;
-  partitionSet: {
-    __typename: 'PartitionSet';
-    name: string;
-    pipelineName: string;
-    repositoryOrigin: {
-      __typename: 'RepositoryOrigin';
-      repositoryName: string;
-      repositoryLocationName: string;
-    };
-  } | null;
-};
diff --git a/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/types/BackfillTable.types.ts b/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/types/BackfillTable.types.ts
index 6c7583c68de96..3ecea391f657c 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/types/BackfillTable.types.ts
+++ b/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/types/BackfillTable.types.ts
@@ -2,6 +2,20 @@
 
 import * as Types from '../../../graphql/types';
 
+export type PartitionSetForBackfillTableFragment = {
+  __typename: 'PartitionSet';
+  id: string;
+  name: string;
+  mode: string;
+  pipelineName: string;
+  repositoryOrigin: {
+    __typename: 'RepositoryOrigin';
+    id: string;
+    repositoryName: string;
+    repositoryLocationName: string;
+  };
+};
+
 export type BackfillTableFragment = {
   __typename: 'PartitionBackfill';
   id: string;
@@ -41,17 +55,3 @@ export type BackfillTableFragment = {
     }>;
   } | null;
 };
-
-export type PartitionSetForBackfillTableFragment = {
-  __typename: 'PartitionSet';
-  id: string;
-  name: string;
-  mode: string;
-  pipelineName: string;
-  repositoryOrigin: {
-    __typename: 'RepositoryOrigin';
-    id: string;
-    repositoryName: string;
-    repositoryLocationName: string;
-  };
-};
diff --git a/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/types/BackfillTerminationDialog.types.ts b/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/types/BackfillTerminationDialog.types.ts
index c8eb03d6af5f0..a24906e803831 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/types/BackfillTerminationDialog.types.ts
+++ b/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/types/BackfillTerminationDialog.types.ts
@@ -2,14 +2,6 @@
 
 import * as Types from '../../../graphql/types';
 
-export type BackfillTerminationDialogBackfillFragment = {
-  __typename: 'PartitionBackfill';
-  id: string;
-  status: Types.BulkActionStatus;
-  isAssetBackfill: boolean;
-  numCancelable: number;
-};
-
 export type CancelBackfillMutationVariables = Types.Exact<{
   backfillId: Types.Scalars['String']['input'];
 }>;
diff --git a/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/types/BackfillPage.types.ts b/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/types/useBackfillDetailsQuery.types.ts
similarity index 85%
rename from js_modules/dagster-ui/packages/ui-core/src/instance/backfill/types/BackfillPage.types.ts
rename to js_modules/dagster-ui/packages/ui-core/src/instance/backfill/types/useBackfillDetailsQuery.types.ts
index 09b40cfdb358f..9c6d5c08abf32 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/types/BackfillPage.types.ts
+++ b/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/types/useBackfillDetailsQuery.types.ts
@@ -139,27 +139,4 @@ export type BackfillDetailsBackfillFragment = {
   } | null;
 };
 
-export type BackfillPartitionsForAssetKeyQueryVariables = Types.Exact<{
-  backfillId: Types.Scalars['String']['input'];
-  assetKey: Types.AssetKeyInput;
-}>;
-
-export type BackfillPartitionsForAssetKeyQuery = {
-  __typename: 'Query';
-  partitionBackfillOrError:
-    | {__typename: 'BackfillNotFoundError'}
-    | {
-        __typename: 'PartitionBackfill';
-        id: string;
-        partitionsTargetedForAssetKey: {
-          __typename: 'AssetBackfillTargetPartitions';
-          partitionKeys: Array<string> | null;
-          ranges: Array<{__typename: 'PartitionKeyRange'; start: string; end: string}> | null;
-        } | null;
-      }
-    | {__typename: 'PythonError'};
-};
-
 export const BackfillStatusesByAssetVersion = 'f785cda54d7032605fd180e1d1641151836651e3da314fcf8393cf3c43ab9bb4';
-
-export const BackfillPartitionsForAssetKeyVersion = '672b7141fd1dfb275a4ef6ae3e8fc1eaa0707270c1fd329ed6b66058e2376e55';
diff --git a/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/useBackfillDetailsQuery.tsx b/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/useBackfillDetailsQuery.tsx
new file mode 100644
index 0000000000000..5f9ecc188322d
--- /dev/null
+++ b/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/useBackfillDetailsQuery.tsx
@@ -0,0 +1,73 @@
+import {BACKFILL_ACTIONS_BACKFILL_FRAGMENT} from './BackfillFragments';
+import {
+  BackfillStatusesByAssetQuery,
+  BackfillStatusesByAssetQueryVariables,
+} from './types/useBackfillDetailsQuery.types';
+import {gql, useQuery} from '../../apollo-client';
+import {PYTHON_ERROR_FRAGMENT} from '../../app/PythonErrorFragment';
+import {useBlockTraceOnQueryResult} from '../../performance/TraceContext';
+
+export function useBackfillDetailsQuery(backfillId: string) {
+  const queryResult = useQuery<BackfillStatusesByAssetQuery, BackfillStatusesByAssetQueryVariables>(
+    BACKFILL_DETAILS_QUERY,
+    {variables: {backfillId}},
+  );
+  useBlockTraceOnQueryResult(queryResult, 'BackfillStatusesByAssetQuery');
+  return queryResult;
+}
+
+export const BACKFILL_DETAILS_QUERY = gql`
+  query BackfillStatusesByAsset($backfillId: String!) {
+    partitionBackfillOrError(backfillId: $backfillId) {
+      ...BackfillDetailsBackfillFragment
+      ...PythonErrorFragment
+      ... on BackfillNotFoundError {
+        message
+      }
+    }
+  }
+
+  fragment BackfillDetailsBackfillFragment on PartitionBackfill {
+    id
+    status
+    timestamp
+    endTimestamp
+    numPartitions
+    ...BackfillActionsBackfillFragment
+
+    error {
+      ...PythonErrorFragment
+    }
+    assetBackfillData {
+      rootTargetedPartitions {
+        partitionKeys
+        ranges {
+          start
+          end
+        }
+      }
+      assetBackfillStatuses {
+        ... on AssetPartitionsStatusCounts {
+          assetKey {
+            path
+          }
+          numPartitionsTargeted
+          numPartitionsInProgress
+          numPartitionsMaterialized
+          numPartitionsFailed
+        }
+        ... on UnpartitionedAssetStatus {
+          assetKey {
+            path
+          }
+          inProgress
+          materialized
+          failed
+        }
+      }
+    }
+  }
+
+  ${PYTHON_ERROR_FRAGMENT}
+  ${BACKFILL_ACTIONS_BACKFILL_FRAGMENT}
+`;
diff --git a/js_modules/dagster-ui/packages/ui-core/src/instance/types/InstanceBackfills.types.ts b/js_modules/dagster-ui/packages/ui-core/src/instance/types/InstanceBackfills.types.ts
index 2639978491883..823a6abbe6917 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/instance/types/InstanceBackfills.types.ts
+++ b/js_modules/dagster-ui/packages/ui-core/src/instance/types/InstanceBackfills.types.ts
@@ -65,4 +65,4 @@ export type InstanceBackfillsQuery = {
       };
 };
 
-export const InstanceBackfillsQueryVersion = '944d836e7cc69aa542d893f9ab84f46e766fb370cfb63be15bd03d67e1b0cff9';
+export const InstanceBackfillsQueryVersion = 'd90a8ec6da1d9a32290e631d2dd0934aac4ba36c0ed78fed0aaa8bd94a15e0c6';
diff --git a/js_modules/dagster-ui/packages/ui-core/src/partitions/types/JobBackfillsTable.types.ts b/js_modules/dagster-ui/packages/ui-core/src/partitions/types/JobBackfillsTable.types.ts
index 99884ad815fcc..ab686958ebfe1 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/partitions/types/JobBackfillsTable.types.ts
+++ b/js_modules/dagster-ui/packages/ui-core/src/partitions/types/JobBackfillsTable.types.ts
@@ -60,4 +60,4 @@ export type JobBackfillsQuery = {
     | {__typename: 'PythonError'};
 };
 
-export const JobBackfillsQueryVersion = '9faca72d06cc7e1fb5423ea3b7f71d6ade5645bcbbe03322e092811de3ba36bd';
+export const JobBackfillsQueryVersion = '6e804c78aee886ce0b8cd8c8e1f9a004fa0bc6504dc411b5e32c290dd9ae923d';
diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/RunActionsMenu.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/RunActionsMenu.tsx
index 0bace516de279..34e8ad1d4e967 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/runs/RunActionsMenu.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/runs/RunActionsMenu.tsx
@@ -31,8 +31,8 @@ import {TerminationDialog} from './TerminationDialog';
 import {
   PipelineEnvironmentQuery,
   PipelineEnvironmentQueryVariables,
+  RunActionsMenuRunFragment,
 } from './types/RunActionsMenu.types';
-import {RunTableRunFragment} from './types/RunTableRunFragment.types';
 import {useJobAvailabilityErrorForRun} from './useJobAvailabilityErrorForRun';
 import {useJobReexecution} from './useJobReExecution';
 import {gql, useLazyQuery} from '../apollo-client';
@@ -49,12 +49,11 @@ import {useRepositoryForRunWithParentSnapshot} from '../workspace/useRepositoryF
 import {workspacePipelineLinkForRun} from '../workspace/workspacePath';
 
 interface Props {
-  run: RunTableRunFragment;
-  additionalActionsForRun?: (run: RunTableRunFragment) => React.ReactNode[];
+  run: RunActionsMenuRunFragment;
   onAddTag?: (token: RunFilterToken) => void;
 }
 
-export const RunActionsMenu = React.memo(({run, onAddTag, additionalActionsForRun}: Props) => {
+export const RunActionsMenu = React.memo(({run, onAddTag}: Props) => {
   const {refetch} = React.useContext(RunsQueryRefetchContext);
   const [visibleDialog, setVisibleDialog] = React.useState<
     'none' | 'terminate' | 'delete' | 'config' | 'tags' | 'metrics'
@@ -212,7 +211,6 @@ export const RunActionsMenu = React.memo(({run, onAddTag, additionalActionsForRu
                     onClick={() => setVisibleDialog('terminate')}
                   />
                 )}
-                {additionalActionsForRun?.(run)}
                 <MenuDivider />
               </>
               <MenuExternalLink
@@ -308,7 +306,7 @@ export const RunActionsMenu = React.memo(({run, onAddTag, additionalActionsForRu
 });
 
 interface RunBulkActionsMenuProps {
-  selected: RunTableRunFragment[];
+  selected: RunActionsMenuRunFragment[];
   clearSelection: () => void;
 }
 
@@ -487,6 +485,39 @@ export const RunBulkActionsMenu = React.memo((props: RunBulkActionsMenuProps) =>
 const OPEN_LAUNCHPAD_UNKNOWN =
   'Launchpad is unavailable because the pipeline is not present in the current repository.';
 
+export const RUN_ACTIONS_MENU_RUN_FRAGMENT = gql`
+  fragment RunActionsMenuRunFragment on Run {
+    id
+    assetSelection {
+      ... on AssetKey {
+        path
+      }
+    }
+    assetCheckSelection {
+      name
+      assetKey {
+        path
+      }
+    }
+    tags {
+      key
+      value
+    }
+    hasReExecutePermission
+    hasTerminatePermission
+    hasDeletePermission
+    canTerminate
+    mode
+    status
+    pipelineName
+    pipelineSnapshotId
+    repositoryOrigin {
+      repositoryName
+      repositoryLocationName
+    }
+  }
+`;
+
 // Avoid fetching envYaml and parentPipelineSnapshotId on load in Runs page, they're slow.
 export const PIPELINE_ENVIRONMENT_QUERY = gql`
   query PipelineEnvironmentQuery($runId: ID!) {
diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/RunRoot.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/RunRoot.tsx
index 9e6ac06d909f5..a872f6804e24c 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/runs/RunRoot.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/runs/RunRoot.tsx
@@ -1,4 +1,12 @@
-import {Box, FontFamily, Heading, NonIdealState, PageHeader, Tag} from '@dagster-io/ui-components';
+import {
+  Box,
+  Colors,
+  FontFamily,
+  Heading,
+  NonIdealState,
+  PageHeader,
+  Tag,
+} from '@dagster-io/ui-components';
 import {useMemo} from 'react';
 import {Link, useParams} from 'react-router-dom';
 
@@ -27,7 +35,7 @@ import {useRepositoryForRunWithParentSnapshot} from '../workspace/useRepositoryF
 export const RunRoot = () => {
   useTrackPageView();
 
-  const {runId} = useParams<{runId: string}>();
+  const {runId, runFeedEntryId} = useParams<{runId: string; runFeedEntryId?: string}>();
   useDocumentTitle(runId ? `Run ${runId.slice(0, 8)}` : 'Run');
 
   const queryResult = useQuery<RunRootQuery, RunRootQueryVariables>(RUN_ROOT_QUERY, {
@@ -102,11 +110,28 @@ export const RunRoot = () => {
       >
         <PageHeader
           title={
-            <Heading style={{display: 'flex', flexDirection: 'row', gap: 6}}>
-              <Link to="/runs">Runs</Link>
-              <span>/</span>
-              <span style={{fontFamily: FontFamily.monospace}}>{runId.slice(0, 8)}</span>
-            </Heading>
+            runFeedEntryId ? (
+              <Heading>
+                <Link to="/runs-feed" style={{color: Colors.textLight()}}>
+                  All runs
+                </Link>
+                {' / '}
+                <Link
+                  to={`/runs-feed/b/${runFeedEntryId}?tab=runs&view=list`}
+                  style={{color: Colors.textLight()}}
+                >
+                  {runFeedEntryId}
+                </Link>
+                {' / '}
+                {runId.slice(0, 8)}
+              </Heading>
+            ) : (
+              <Heading style={{display: 'flex', flexDirection: 'row', gap: 6}}>
+                <Link to="/runs">Runs</Link>
+                <span>/</span>
+                <span style={{fontFamily: FontFamily.monospace}}>{runId.slice(0, 8)}</span>
+              </Heading>
+            )
           }
           tags={
             run ? (
diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/RunRow.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/RunRow.tsx
index 0f60c064be5b9..27afaf8dcaf0a 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/runs/RunRow.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/runs/RunRow.tsx
@@ -15,6 +15,7 @@ import {RunFilterToken} from './RunsFilterInput';
 import {RunTableRunFragment} from './types/RunTableRunFragment.types';
 import {useResolveRunTarget} from './useResolveRunTarget';
 import {RunStatus} from '../graphql/types';
+import {RunRequestContext} from '../instance/backfill/RunsFeedBackfillPage';
 
 export const RunRow = ({
   run,
@@ -24,7 +25,6 @@ export const RunRow = ({
   checked,
   onToggleChecked,
   additionalColumns,
-  additionalActionsForRun,
   isHighlighted,
   hideCreatedBy,
 }: {
@@ -35,11 +35,11 @@ export const RunRow = ({
   checked?: boolean;
   onToggleChecked?: (values: {checked: boolean; shiftKey: boolean}) => void;
   additionalColumns?: React.ReactNode[];
-  additionalActionsForRun?: (run: RunTableRunFragment) => React.ReactNode[];
   isHighlighted?: boolean;
   hideCreatedBy?: boolean;
 }) => {
   const {isJob, repoAddressGuess} = useResolveRunTarget(run);
+  const {buildLinkToRun} = React.useContext(RunRequestContext);
 
   const onChange = (e: React.FormEvent<HTMLInputElement>) => {
     if (e.target instanceof HTMLInputElement) {
@@ -69,7 +69,7 @@ export const RunRow = ({
         </td>
       ) : null}
       <td>
-        <Link to={`/runs/${run.id}`}>
+        <Link to={buildLinkToRun(run)}>
           <Mono>{titleForRun(run)}</Mono>
         </Link>
       </td>
@@ -124,11 +124,7 @@ export const RunRow = ({
       </td>
       {additionalColumns}
       <td>
-        <RunActionsMenu
-          run={run}
-          onAddTag={onAddTag}
-          additionalActionsForRun={additionalActionsForRun}
-        />
+        <RunActionsMenu run={run} onAddTag={onAddTag} />
       </td>
       <QueuedRunCriteriaDialog
         run={run}
diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/RunRowTags.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/RunRowTags.tsx
index 0c8e1c8d2fa14..1794e13a45e18 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/runs/RunRowTags.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/runs/RunRowTags.tsx
@@ -24,7 +24,7 @@ export const RunRowTags = ({
   isHovered,
   isJob,
 }: {
-  run: RunTableRunFragment;
+  run: Pick<RunTableRunFragment, 'tags' | 'assetSelection' | 'mode'>;
   onAddTag?: (token: RunFilterToken) => void;
   isHovered: boolean;
   isJob: boolean;
diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/RunTable.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/RunTable.tsx
index 0bdadf3223eea..c5f0eed067c6b 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/runs/RunTable.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/runs/RunTable.tsx
@@ -22,7 +22,6 @@ interface RunTableProps {
   additionalColumnsForRow?: (run: RunTableRunFragment) => React.ReactNode[];
   belowActionBarComponents?: React.ReactNode;
   hideCreatedBy?: boolean;
-  additionalActionsForRun?: (run: RunTableRunFragment) => JSX.Element[];
   emptyState?: () => React.ReactNode;
 }
 
@@ -94,7 +93,6 @@ export const RunTable = (props: RunTableProps) => {
                 onAddTag={onAddTag}
                 checked={checkedIds.has(run.id)}
                 additionalColumns={props.additionalColumnsForRow?.(run)}
-                additionalActionsForRun={props.additionalActionsForRun}
                 onToggleChecked={onToggleFactory(run.id)}
                 isHighlighted={highlightedIds && highlightedIds.includes(run.id)}
                 hideCreatedBy={hideCreatedBy}
diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/RunTargetLink.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/RunTargetLink.tsx
index cd33df2388c7c..5bccde40affce 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/runs/RunTargetLink.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/runs/RunTargetLink.tsx
@@ -14,7 +14,10 @@ export const RunTargetLink = ({
   repoAddress,
 }: {
   isJob: boolean;
-  run: RunTableRunFragment;
+  run: Pick<
+    RunTableRunFragment,
+    'pipelineName' | 'assetSelection' | 'stepKeysToExecute' | 'assetCheckSelection'
+  >;
   repoAddress: RepoAddress | null;
 }) => {
   return isHiddenAssetGroupJob(run.pipelineName) ? (
diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/RunsFeedRoot.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/RunsFeedRoot.tsx
new file mode 100644
index 0000000000000..0a07b72d1efeb
--- /dev/null
+++ b/js_modules/dagster-ui/packages/ui-core/src/runs/RunsFeedRoot.tsx
@@ -0,0 +1,215 @@
+import {Box, Colors, CursorHistoryControls, NonIdealState, Tabs} from '@dagster-io/ui-components';
+import {useVirtualizer} from '@tanstack/react-virtual';
+import {useMemo, useRef} from 'react';
+import {PYTHON_ERROR_FRAGMENT} from 'shared/app/PythonErrorFragment';
+
+import {RunBulkActionsMenu} from './RunActionsMenu';
+import {RunsQueryRefetchContext} from './RunUtils';
+import {RUNS_FEED_TABLE_ENTRY_FRAGMENT, RunsFeedRow, RunsFeedTableHeader} from './RunsFeedRow';
+import {RunsFeedRootQuery, RunsFeedRootQueryVariables} from './types/RunsFeedRoot.types';
+import {RunsFeedTableEntryFragment_Run} from './types/RunsFeedRow.types';
+import {useCursorPaginatedQuery} from './useCursorPaginatedQuery';
+import {gql} from '../apollo-client';
+import {
+  FIFTEEN_SECONDS,
+  QueryRefreshCountdown,
+  useQueryRefreshAtInterval,
+} from '../app/QueryRefresh';
+import {useTrackPageView} from '../app/analytics';
+import {useSelectionReducer} from '../hooks/useSelectionReducer';
+import {CheckAllBox} from '../ui/CheckAllBox';
+import {LoadingSpinner} from '../ui/Loading';
+import {TabLink} from '../ui/TabLink';
+import {Container, Inner, Row} from '../ui/VirtualizedTable';
+
+const PAGE_SIZE = 25;
+
+export function useRunsFeedEntries() {
+  const {queryResult, paginationProps} = useCursorPaginatedQuery<
+    RunsFeedRootQuery,
+    RunsFeedRootQueryVariables
+  >({
+    query: RUNS_FEED_ROOT_QUERY,
+    pageSize: PAGE_SIZE,
+    variables: {
+      // filters here?
+    },
+    nextCursorForResult: (runs) => {
+      if (runs.runsFeedOrError.__typename !== 'RunsFeedConnection') {
+        return undefined;
+      }
+      return runs.runsFeedOrError.hasMore ? runs.runsFeedOrError.cursor : undefined;
+    },
+    getResultArray: (data) => {
+      if (!data || data.runsFeedOrError.__typename !== 'RunsFeedConnection') {
+        return [];
+      }
+      return data.runsFeedOrError.results;
+    },
+  });
+
+  const entries =
+    queryResult.data?.runsFeedOrError.__typename === 'RunsFeedConnection'
+      ? queryResult.data?.runsFeedOrError.results
+      : [];
+
+  return {queryResult, paginationProps, entries};
+}
+
+export const RunsFeedRoot = () => {
+  useTrackPageView();
+
+  const {entries, paginationProps, queryResult} = useRunsFeedEntries();
+  const refreshState = useQueryRefreshAtInterval(queryResult, FIFTEEN_SECONDS);
+  const {error} = queryResult;
+
+  const parentRef = useRef<HTMLDivElement | null>(null);
+
+  const entryIds = useMemo(() => entries.map((e) => e.id), [entries]);
+  const [{checkedIds}, {onToggleFactory, onToggleAll}] = useSelectionReducer(entryIds);
+
+  const rowVirtualizer = useVirtualizer({
+    count: entries.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 84,
+    overscan: 15,
+  });
+
+  const totalHeight = rowVirtualizer.getTotalSize();
+  const items = rowVirtualizer.getVirtualItems();
+
+  function actionBar() {
+    return (
+      <Box flex={{justifyContent: 'space-between'}} style={{width: '100%'}}>
+        <Box>{/** filters */}</Box>
+        <Box flex={{gap: 12}} style={{marginRight: 8}}>
+          <CursorHistoryControls {...paginationProps} style={{marginTop: 0}} />
+          <RunBulkActionsMenu
+            clearSelection={() => onToggleAll(false)}
+            selected={entries.filter(
+              (e): e is RunsFeedTableEntryFragment_Run =>
+                checkedIds.has(e.id) && e.__typename === 'Run',
+            )}
+          />
+        </Box>
+      </Box>
+    );
+  }
+
+  const content = () => {
+    if (error) {
+      // In this case, a 400 is most likely due to invalid run filters, which are a GraphQL
+      // validation error but surfaced as a 400.
+      const badRequest = !!(
+        typeof error === 'object' &&
+        'statusCode' in error &&
+        error.statusCode === 400
+      );
+      return (
+        <Box flex={{direction: 'column', gap: 32}} padding={{vertical: 8, left: 24, right: 12}}>
+          {actionBar()}
+          <NonIdealState
+            icon="warning"
+            title={badRequest ? 'Invalid run filters' : 'Unexpected error'}
+            description={
+              badRequest
+                ? 'The specified run filters are not valid. Please check the filters and try again.'
+                : 'An unexpected error occurred. Check the console for details.'
+            }
+          />
+        </Box>
+      );
+    }
+    if (queryResult.loading && !queryResult.data) {
+      return <LoadingSpinner purpose="page" />;
+    }
+
+    return (
+      <div style={{overflow: 'hidden'}}>
+        <Container ref={parentRef}>
+          <RunsFeedTableHeader
+            checkbox={
+              <CheckAllBox
+                checkedCount={checkedIds.size}
+                totalCount={entries.length}
+                onToggleAll={onToggleAll}
+              />
+            }
+          />
+          <Inner $totalHeight={totalHeight}>
+            {items.map(({index, size, start, key}) => {
+              const entry = entries[index];
+              if (!entry) {
+                return <span key={key} />;
+              }
+              return (
+                <Row $height={size} $start={start} data-key={key} key={key}>
+                  <RunsFeedRow
+                    key={key}
+                    entry={entry}
+                    checked={checkedIds.has(entry.id)}
+                    onToggleChecked={onToggleFactory(entry.id)}
+                    refetch={refreshState.refetch}
+                  />
+                </Row>
+              );
+            })}
+          </Inner>
+        </Container>
+      </div>
+    );
+  };
+
+  return (
+    <Box flex={{direction: 'column'}} style={{height: '100%', overflow: 'hidden'}}>
+      <Box
+        border="bottom"
+        background={Colors.backgroundLight()}
+        padding={{left: 24, right: 20, top: 12}}
+        flex={{direction: 'row', justifyContent: 'space-between'}}
+      >
+        <Tabs selectedTabId="all">
+          <TabLink id="all" title="All runs" to="/runs-feed" />
+          {/* <TabLink id="queued" title={`Queued (${countQueued})`} to="/runs-feed" />
+            <TabLink id="in-progress" title={`In progress (${countInProgress})`} to="/runs-feed" />
+            <TabLink id="failed" title={`Failed (${countFailed})`} to="/runs-feed" /> */}
+        </Tabs>
+        <Box flex={{gap: 16, alignItems: 'center'}}>
+          <QueryRefreshCountdown refreshState={refreshState} />
+        </Box>
+      </Box>
+
+      <Box flex={{direction: 'column', gap: 32}} padding={{vertical: 12, left: 24, right: 12}}>
+        {actionBar()}
+      </Box>
+
+      {/* {filtersPortal} */}
+      <RunsQueryRefetchContext.Provider value={{refetch: refreshState.refetch}}>
+        {content()}
+      </RunsQueryRefetchContext.Provider>
+    </Box>
+  );
+};
+
+// Imported via React.lazy, which requires a default export.
+// eslint-disable-next-line import/no-default-export
+export default RunsFeedRoot;
+
+export const RUNS_FEED_ROOT_QUERY = gql`
+  query RunsFeedRootQuery($limit: Int!, $cursor: String) {
+    runsFeedOrError(limit: $limit, cursor: $cursor) {
+      ... on RunsFeedConnection {
+        cursor
+        hasMore
+        results {
+          id
+          ...RunsFeedTableEntryFragment
+        }
+      }
+      ...PythonErrorFragment
+    }
+  }
+
+  ${RUNS_FEED_TABLE_ENTRY_FRAGMENT}
+  ${PYTHON_ERROR_FRAGMENT}
+`;
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
new file mode 100644
index 0000000000000..f0c8a6455a313
--- /dev/null
+++ b/js_modules/dagster-ui/packages/ui-core/src/runs/RunsFeedRow.tsx
@@ -0,0 +1,257 @@
+import {
+  Box,
+  ButtonLink,
+  Caption,
+  Checkbox,
+  Colors,
+  Icon,
+  Mono,
+  Tag,
+} from '@dagster-io/ui-components';
+import * as React from 'react';
+import {Link} from 'react-router-dom';
+import styled from 'styled-components';
+
+import {CreatedByTagCell} from './CreatedByTag';
+import {RUN_ACTIONS_MENU_RUN_FRAGMENT, RunActionsMenu} from './RunActionsMenu';
+import {RunRowTags} from './RunRowTags';
+import {RunStatusTagWithStats} from './RunStatusTag';
+import {DagsterTag} from './RunTag';
+import {RunTargetLink} from './RunTargetLink';
+import {RunStateSummary, RunTime, titleForRun} from './RunUtils';
+import {RunFilterToken} from './RunsFilterInput';
+import {RunTimeFragment} from './types/RunUtils.types';
+import {RunsFeedTableEntryFragment} from './types/RunsFeedRow.types';
+import {gql} from '../apollo-client';
+import {RunStatus} from '../graphql/types';
+import {BackfillActionsMenu, backfillCanCancelRuns} from '../instance/backfill/BackfillActionsMenu';
+import {BACKFILL_STEP_STATUS_DIALOG_BACKFILL_FRAGMENT} from '../instance/backfill/BackfillFragments';
+import {BackfillTarget} from '../instance/backfill/BackfillRow';
+import {PARTITION_SET_FOR_BACKFILL_TABLE_FRAGMENT} from '../instance/backfill/BackfillTable';
+import {HeaderCell, HeaderRow, RowCell} from '../ui/VirtualizedTable';
+
+export const RunsFeedRow = ({
+  entry,
+  onAddTag,
+  checked,
+  onToggleChecked,
+  refetch,
+}: {
+  entry: RunsFeedTableEntryFragment;
+  refetch: () => void;
+  onAddTag?: (token: RunFilterToken) => void;
+  checked?: boolean;
+  onToggleChecked?: (values: {checked: boolean; shiftKey: boolean}) => void;
+  additionalColumns?: React.ReactNode[];
+  hideCreatedBy?: boolean;
+}) => {
+  const onChange = (e: React.FormEvent<HTMLInputElement>) => {
+    if (e.target instanceof HTMLInputElement) {
+      const {checked} = e.target;
+      const shiftKey =
+        e.nativeEvent instanceof MouseEvent && e.nativeEvent.getModifierState('Shift');
+      onToggleChecked && onToggleChecked({checked, shiftKey});
+    }
+  };
+
+  const isReexecution = entry.tags.some((tag) => tag.key === DagsterTag.ParentRunId);
+
+  const [_showQueueCriteria, setShowQueueCriteria] = React.useState(false);
+  const [isHovered, setIsHovered] = React.useState(false);
+
+  const runTime: RunTimeFragment = {
+    id: entry.id,
+    creationTime: entry.creationTime,
+    startTime: entry.startTime,
+    endTime: entry.endTime,
+    updateTime: entry.creationTime,
+    status: entry.runStatus,
+    __typename: 'Run',
+  };
+
+  return (
+    <RowGrid
+      border="bottom"
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <RowCell>
+        <Checkbox checked={!!checked} onChange={onChange} />
+      </RowCell>
+
+      <RowCell>
+        <Box flex={{direction: 'column', gap: 5}}>
+          <Link
+            to={
+              entry.__typename === 'PartitionBackfill'
+                ? `/runs-feed/b/${entry.id}?tab=runs`
+                : `/runs/${entry.id}`
+            }
+          >
+            <Box flex={{gap: 4, alignItems: 'center'}}>
+              <Icon name={entry.__typename === 'PartitionBackfill' ? 'run_with_subruns' : 'run'} />
+              <Mono>{titleForRun(entry)}</Mono>
+            </Box>
+          </Link>
+          <Box
+            flex={{direction: 'row', alignItems: 'center', wrap: 'wrap'}}
+            style={{gap: '4px 8px', lineHeight: 0}}
+          >
+            <RunRowTags
+              run={{...entry, mode: ''}}
+              isJob={true}
+              isHovered={isHovered}
+              onAddTag={onAddTag}
+            />
+
+            {entry.runStatus === RunStatus.QUEUED ? (
+              <Caption>
+                <ButtonLink
+                  onClick={() => {
+                    setShowQueueCriteria(true);
+                  }}
+                  color={Colors.textLight()}
+                >
+                  View queue criteria
+                </ButtonLink>
+              </Caption>
+            ) : null}
+          </Box>
+        </Box>
+      </RowCell>
+      <RowCell style={{flexDirection: 'row', alignItems: 'flex-start'}}>
+        <Tag>
+          <Box flex={{direction: 'row', gap: 4}}>
+            {entry.__typename === 'Run' ? (
+              <RunTargetLink
+                isJob={true}
+                run={{...entry, pipelineName: entry.jobName!, stepKeysToExecute: []}}
+                repoAddress={null}
+              />
+            ) : (
+              <BackfillTarget backfill={entry} repoAddress={null} />
+            )}
+          </Box>
+        </Tag>
+      </RowCell>
+      <RowCell>
+        <CreatedByTagCell tags={entry.tags || []} onAddTag={onAddTag} />
+      </RowCell>
+      <RowCell>
+        <RunStatusTagWithStats status={entry.runStatus} runId={entry.id} />
+      </RowCell>
+      <RowCell style={{flexDirection: 'column', gap: 4}}>
+        <RunTime run={runTime} />
+        {isReexecution ? (
+          <div>
+            <Tag icon="cached">Re-execution</Tag>
+          </div>
+        ) : null}
+      </RowCell>
+      <RowCell>
+        <RunStateSummary run={runTime} />
+      </RowCell>
+      <RowCell>
+        {entry.__typename === 'PartitionBackfill' ? (
+          <BackfillActionsMenu
+            backfill={{...entry, status: entry.backfillStatus}}
+            canCancelRuns={backfillCanCancelRuns(entry, entry.numCancelable > 0)}
+            refetch={refetch}
+            anchorLabel="View run"
+          />
+        ) : (
+          <RunActionsMenu
+            run={entry}
+            // onAddTag={onAddTag}
+          />
+        )}
+      </RowCell>
+      {/* <QueuedRunCriteriaDialog
+        run={run}
+        isOpen={showQueueCriteria}
+        onClose={() => setShowQueueCriteria(false)}
+      /> */}
+    </RowGrid>
+  );
+};
+
+const TEMPLATE_COLUMNS = '60px 2fr 2fr 1fr 140px 150px 120px 132px';
+
+export const RunsFeedTableHeader = ({checkbox}: {checkbox: React.ReactNode}) => {
+  return (
+    <HeaderRow templateColumns={TEMPLATE_COLUMNS} sticky>
+      <HeaderCell>
+        <div style={{position: 'relative', top: '-1px'}}>{checkbox}</div>
+      </HeaderCell>
+      <HeaderCell>Run ID</HeaderCell>
+      <HeaderCell>Target</HeaderCell>
+      <HeaderCell>Launched by</HeaderCell>
+      <HeaderCell>Status</HeaderCell>
+      <HeaderCell>Created at</HeaderCell>
+      <HeaderCell>Duration</HeaderCell>
+      <HeaderCell></HeaderCell>
+    </HeaderRow>
+  );
+};
+
+const RowGrid = styled(Box)`
+  display: grid;
+  grid-template-columns: ${TEMPLATE_COLUMNS};
+  height: 100%;
+`;
+
+export const RUNS_FEED_TABLE_ENTRY_FRAGMENT = gql`
+  fragment RunsFeedTableEntryFragment on RunsFeedEntry {
+    __typename
+    id
+    runStatus
+    creationTime
+    startTime
+    endTime
+    tags {
+      key
+      value
+    }
+    jobName
+    assetSelection {
+      ... on AssetKey {
+        path
+      }
+    }
+    assetCheckSelection {
+      name
+      assetKey {
+        path
+      }
+    }
+    ... on Run {
+      repositoryOrigin {
+        id
+        repositoryLocationName
+        repositoryName
+      }
+      ...RunActionsMenuRunFragment
+    }
+    ... on PartitionBackfill {
+      backfillStatus: status
+      partitionSetName
+      partitionSet {
+        id
+        ...PartitionSetForBackfillTableFragment
+      }
+      assetSelection {
+        path
+      }
+
+      hasCancelPermission
+      hasResumePermission
+      isAssetBackfill
+      numCancelable
+      ...BackfillStepStatusDialogBackfillFragment
+    }
+  }
+
+  ${RUN_ACTIONS_MENU_RUN_FRAGMENT}
+  ${PARTITION_SET_FOR_BACKFILL_TABLE_FRAGMENT}
+  ${BACKFILL_STEP_STATUS_DIALOG_BACKFILL_FRAGMENT}
+`;
diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/types/RunActionsMenu.types.ts b/js_modules/dagster-ui/packages/ui-core/src/runs/types/RunActionsMenu.types.ts
index 8ad9b79d0cb8e..7e64c684a4bf7 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/runs/types/RunActionsMenu.types.ts
+++ b/js_modules/dagster-ui/packages/ui-core/src/runs/types/RunActionsMenu.types.ts
@@ -2,6 +2,31 @@
 
 import * as Types from '../../graphql/types';
 
+export type RunActionsMenuRunFragment = {
+  __typename: 'Run';
+  id: string;
+  hasReExecutePermission: boolean;
+  hasTerminatePermission: boolean;
+  hasDeletePermission: boolean;
+  canTerminate: boolean;
+  mode: string;
+  status: Types.RunStatus;
+  pipelineName: string;
+  pipelineSnapshotId: string | null;
+  assetSelection: Array<{__typename: 'AssetKey'; path: Array<string>}> | null;
+  assetCheckSelection: Array<{
+    __typename: 'AssetCheckhandle';
+    name: string;
+    assetKey: {__typename: 'AssetKey'; path: Array<string>};
+  }> | null;
+  tags: Array<{__typename: 'PipelineTag'; key: string; value: string}>;
+  repositoryOrigin: {
+    __typename: 'RepositoryOrigin';
+    repositoryName: string;
+    repositoryLocationName: string;
+  } | null;
+};
+
 export type PipelineEnvironmentQueryVariables = Types.Exact<{
   runId: Types.Scalars['ID']['input'];
 }>;
diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/types/RunsFeedRoot.types.ts b/js_modules/dagster-ui/packages/ui-core/src/runs/types/RunsFeedRoot.types.ts
new file mode 100644
index 0000000000000..4a0da8fbb39f0
--- /dev/null
+++ b/js_modules/dagster-ui/packages/ui-core/src/runs/types/RunsFeedRoot.types.ts
@@ -0,0 +1,98 @@
+// Generated GraphQL types, do not edit manually.
+
+import * as Types from '../../graphql/types';
+
+export type RunsFeedRootQueryVariables = Types.Exact<{
+  limit: Types.Scalars['Int']['input'];
+  cursor?: Types.InputMaybe<Types.Scalars['String']['input']>;
+}>;
+
+export type RunsFeedRootQuery = {
+  __typename: 'Query';
+  runsFeedOrError:
+    | {
+        __typename: 'PythonError';
+        message: string;
+        stack: Array<string>;
+        errorChain: Array<{
+          __typename: 'ErrorChainLink';
+          isExplicitLink: boolean;
+          error: {__typename: 'PythonError'; message: string; stack: Array<string>};
+        }>;
+      }
+    | {
+        __typename: 'RunsFeedConnection';
+        cursor: string;
+        hasMore: boolean;
+        results: Array<
+          | {
+              __typename: 'PartitionBackfill';
+              id: string;
+              partitionSetName: string | null;
+              hasCancelPermission: boolean;
+              hasResumePermission: boolean;
+              isAssetBackfill: boolean;
+              numCancelable: number;
+              runStatus: Types.RunStatus;
+              creationTime: number;
+              startTime: number | null;
+              endTime: number | null;
+              jobName: string | null;
+              partitionNames: Array<string> | null;
+              backfillStatus: Types.BulkActionStatus;
+              partitionSet: {
+                __typename: 'PartitionSet';
+                id: string;
+                name: string;
+                pipelineName: string;
+                mode: string;
+                repositoryOrigin: {
+                  __typename: 'RepositoryOrigin';
+                  repositoryName: string;
+                  repositoryLocationName: string;
+                  id: string;
+                };
+              } | null;
+              assetSelection: Array<{__typename: 'AssetKey'; path: Array<string>}> | null;
+              tags: Array<{__typename: 'PipelineTag'; key: string; value: string}>;
+              assetCheckSelection: Array<{
+                __typename: 'AssetCheckhandle';
+                name: string;
+                assetKey: {__typename: 'AssetKey'; path: Array<string>};
+              }> | null;
+            }
+          | {
+              __typename: 'Run';
+              id: string;
+              runStatus: Types.RunStatus;
+              creationTime: number;
+              startTime: number | null;
+              endTime: number | null;
+              jobName: string;
+              hasReExecutePermission: boolean;
+              hasTerminatePermission: boolean;
+              hasDeletePermission: boolean;
+              canTerminate: boolean;
+              mode: string;
+              status: Types.RunStatus;
+              pipelineName: string;
+              pipelineSnapshotId: string | null;
+              repositoryOrigin: {
+                __typename: 'RepositoryOrigin';
+                repositoryName: string;
+                repositoryLocationName: string;
+                id: string;
+              } | null;
+              tags: Array<{__typename: 'PipelineTag'; key: string; value: string}>;
+              assetSelection: Array<{__typename: 'AssetKey'; path: Array<string>}> | null;
+              assetCheckSelection: Array<{
+                __typename: 'AssetCheckhandle';
+                name: string;
+                assetKey: {__typename: 'AssetKey'; path: Array<string>};
+              }> | null;
+            }
+        >;
+      };
+};
+
+export const RunsFeedRootQueryVersion = '3dc4ec68d0d42dff05c4d66bbe5490b2251268c8b68abe84de6e48d64365fb75';
diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/types/RunsFeedRow.types.ts b/js_modules/dagster-ui/packages/ui-core/src/runs/types/RunsFeedRow.types.ts
new file mode 100644
index 0000000000000..f1179a2d0907c
--- /dev/null
+++ b/js_modules/dagster-ui/packages/ui-core/src/runs/types/RunsFeedRow.types.ts
@@ -0,0 +1,75 @@
+// Generated GraphQL types, do not edit manually.
+
+import * as Types from '../../graphql/types';
+
+export type RunsFeedTableEntryFragment_PartitionBackfill = {
+  __typename: 'PartitionBackfill';
+  partitionSetName: string | null;
+  hasCancelPermission: boolean;
+  hasResumePermission: boolean;
+  isAssetBackfill: boolean;
+  numCancelable: number;
+  id: string;
+  runStatus: Types.RunStatus;
+  creationTime: number;
+  startTime: number | null;
+  endTime: number | null;
+  jobName: string | null;
+  partitionNames: Array<string> | null;
+  backfillStatus: Types.BulkActionStatus;
+  partitionSet: {
+    __typename: 'PartitionSet';
+    id: string;
+    name: string;
+    pipelineName: string;
+    mode: string;
+    repositoryOrigin: {
+      __typename: 'RepositoryOrigin';
+      repositoryName: string;
+      repositoryLocationName: string;
+      id: string;
+    };
+  } | null;
+  assetSelection: Array<{__typename: 'AssetKey'; path: Array<string>}> | null;
+  tags: Array<{__typename: 'PipelineTag'; key: string; value: string}>;
+  assetCheckSelection: Array<{
+    __typename: 'AssetCheckhandle';
+    name: string;
+    assetKey: {__typename: 'AssetKey'; path: Array<string>};
+  }> | null;
+};
+
+export type RunsFeedTableEntryFragment_Run = {
+  __typename: 'Run';
+  id: string;
+  runStatus: Types.RunStatus;
+  creationTime: number;
+  startTime: number | null;
+  endTime: number | null;
+  jobName: string;
+  hasReExecutePermission: boolean;
+  hasTerminatePermission: boolean;
+  hasDeletePermission: boolean;
+  canTerminate: boolean;
+  mode: string;
+  status: Types.RunStatus;
+  pipelineName: string;
+  pipelineSnapshotId: string | null;
+  repositoryOrigin: {
+    __typename: 'RepositoryOrigin';
+    repositoryName: string;
+    repositoryLocationName: string;
+    id: string;
+  } | null;
+  tags: Array<{__typename: 'PipelineTag'; key: string; value: string}>;
+  assetSelection: Array<{__typename: 'AssetKey'; path: Array<string>}> | null;
+  assetCheckSelection: Array<{
+    __typename: 'AssetCheckhandle';
+    name: string;
+    assetKey: {__typename: 'AssetKey'; path: Array<string>};
+  }> | null;
+};
+
+export type RunsFeedTableEntryFragment =
+  | RunsFeedTableEntryFragment_PartitionBackfill
+  | RunsFeedTableEntryFragment_Run;
diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/useCursorAccumulatedQuery.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/useCursorAccumulatedQuery.tsx
index 7394e951df5ba..c4d564c4664e0 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/runs/useCursorAccumulatedQuery.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/runs/useCursorAccumulatedQuery.tsx
@@ -2,9 +2,9 @@ import {DocumentNode} from 'graphql';
 import {useEffect, useMemo, useState} from 'react';
 
 import {OperationVariables, useApolloClient} from '../apollo-client';
-import {useRefreshAtInterval} from '../app/QueryRefresh';
+import {QueryRefreshState, useRefreshAtInterval} from '../app/QueryRefresh';
 
-type FetchResult<DataType, CursorType, ErrorType> = {
+export type AccumulatingFetchResult<DataType, CursorType, ErrorType> = {
   data: DataType[];
   hasMore: boolean;
   cursor: CursorType | undefined;
@@ -13,7 +13,7 @@ type FetchResult<DataType, CursorType, ErrorType> = {
 
 type FetcherFunction<DataType, CursorType, ErrorType> = (
   cursor: CursorType | undefined,
-) => Promise<FetchResult<DataType, CursorType, ErrorType>>;
+) => Promise<AccumulatingFetchResult<DataType, CursorType, ErrorType>>;
 
 class AccumulatingDataFetcher<DataType, CursorType, ErrorType> {
   private fetchData: FetcherFunction<DataType, CursorType, ErrorType>;
@@ -91,17 +91,19 @@ export function useCursorAccumulatedQuery<
 }: {
   query: DocumentNode;
   variables: Omit<TVars, 'cursor'>;
-  getResult: (responseData: TQuery) => FetchResult<DataType, CursorType, ErrorType>;
+  // Important: getResult must be memoized!
+  getResult: (responseData: TQuery) => AccumulatingFetchResult<DataType, CursorType, ErrorType>;
 }) {
   const [fetched, setFetched] = useState<DataType[] | null>(null);
   const [error, setError] = useState<ErrorType | null>(null);
   const client = useApolloClient();
 
+  const variablesJSON = JSON.stringify(variables || {});
   const {stop, fetch} = useMemo(() => {
     return new AccumulatingDataFetcher({
       fetchData: async (cursor) => {
         const resp = await client.query<TQuery, TVars>({
-          variables: {...variables, cursor} as TVars,
+          variables: {...JSON.parse(variablesJSON), cursor} as TVars,
           query,
         });
         return getResult(resp.data);
@@ -109,7 +111,7 @@ export function useCursorAccumulatedQuery<
       onData: setFetched,
       onError: setError,
     });
-  }, [client, query, variables, getResult]);
+  }, [client, query, variablesJSON, getResult]);
 
   useEffect(() => {
     return stop;
@@ -119,7 +121,7 @@ export function useCursorAccumulatedQuery<
     refresh: fetch,
     intervalMs: 10000,
     leading: true,
-  });
+  }) as QueryRefreshState;
 
   return {fetched, error, refreshState};
 }
diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/useResolveRunTarget.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/useResolveRunTarget.tsx
index abfdb2b85ffc4..77e29d97060db 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/runs/useResolveRunTarget.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/runs/useResolveRunTarget.tsx
@@ -5,7 +5,9 @@ import {buildRepoAddress} from '../workspace/buildRepoAddress';
 import {RepoAddress} from '../workspace/types';
 import {useRepositoryForRunWithoutSnapshot} from '../workspace/useRepositoryForRun';
 
-export function useResolveRunTarget(run: RunTableRunFragment): {
+export function useResolveRunTarget(
+  run: Pick<RunTableRunFragment, 'pipelineName' | 'repositoryOrigin' | 'pipelineSnapshotId'>,
+): {
   isJob: boolean;
   repoAddressGuess: RepoAddress | null;
 } {
diff --git a/js_modules/dagster-ui/packages/ui-core/src/ticks/InstigationEventLogTable.tsx b/js_modules/dagster-ui/packages/ui-core/src/ticks/InstigationEventLogTable.tsx
index 958c2007e4a27..a8c3d63cdc5d9 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/ticks/InstigationEventLogTable.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/ticks/InstigationEventLogTable.tsx
@@ -77,7 +77,7 @@ export const InstigationEventLogTable = ({events}: {events: InstigationEventLogF
                   highlighted={false}
                   data-index={index}
                   ref={rowVirtualizer.measureElement}
-                  style={{height: 'auto'}}
+                  style={{height: 'auto', maxHeight: 'unset'}}
                 >
                   <EventTypeColumn>
                     <span style={{marginLeft: 8}}>{event.level}</span>
diff --git a/node_modules/.yarn-integrity b/node_modules/.yarn-integrity
deleted file mode 100644
index 9daf555b1b0ce..0000000000000
--- a/node_modules/.yarn-integrity
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "systemParams": "darwin-x64-115",
-  "modulesFolders": [
-    "node_modules"
-  ],
-  "flags": [],
-  "linkedModules": [],
-  "topLevelPatterns": [],
-  "lockfileEntries": {},
-  "files": [],
-  "artifacts": {}
-}
\ No newline at end of file