[3/n][Runs feed] Feature gating (#24621)

## Summary & Motivation Add feature gating for runs feed. Currently its commented out since we don't want to release it yet. ## How I Tested These Changes - Navigated to /runs - Navigated to a backfill - Clicked around RunsFeed making sure the routing worked correctly. ## Changelog NOCHANGELOG
dagster-io · Sep 23, 2024 · 721126f · 721126f · github-actions · Sep 23, 2024
1 parent 9a31325
commit 721126f
Show file tree

Hide file tree

Showing 11 changed files with 83 additions and 60 deletions.
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
@@ -1,8 +1,10 @@
 import {ErrorBoundary, MainContent} from '@dagster-io/ui-components';
 import {memo, useEffect, useRef} from 'react';
 import {Switch, useLocation} from 'react-router-dom';
+import {FeatureFlag} from 'shared/app/FeatureFlags.oss';
 import {AssetsOverviewRoot} from 'shared/assets/AssetsOverviewRoot.oss';
 
+import {featureEnabled} from './Flags';
 import {Route} from './Route';
 import {AssetFeatureProvider} from '../assets/AssetFeatureContext';
 import {RunsFeedBackfillPage} from '../instance/backfill/RunsFeedBackfillPage';
@@ -51,21 +53,31 @@ 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', '/runs-feed/scheduled']} exact>
-            <RunsFeedRoot />
-          </Route>
-          <Route path="/runs" exact>
-            <RunsRoot />
-          </Route>
-          <Route path="/runs/scheduled" exact>
-            <ScheduledRunListRoot />
-          </Route>
+          {featureEnabled(FeatureFlag.flagRunsFeed)
+            ? // This is somewhat hacky but the Routes can't be wrapped by a fragment otherwise the Switch statement
+              // stops working
+              [
+                <Route path="/runs/b/:backfillId" key="1">
+                  <RunsFeedBackfillPage />
+                </Route>,
+                <Route path={['/runs', '/runs/scheduled']} exact key="2">
+                  <RunsFeedRoot />
+                </Route>,
+              ]
+            : [
+                <Route path="/runs-feed/b/:backfillId" key="3">
+                  <RunsFeedBackfillPage />
+                </Route>,
+                <Route path={['/runs-feed', '/runs-feed/scheduled']} exact key="4">
+                  <RunsFeedRoot />
+                </Route>,
+                <Route path="/runs" exact key="5">
+                  <RunsRoot />
+                </Route>,
+                <Route path="/runs/scheduled" exact key="6">
+                  <ScheduledRunListRoot />
+                </Route>,
+              ]}
           <Route path="/runs/:runId" exact>
             <RunRoot />
           </Route>

diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/FeatureFlags.oss.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/FeatureFlags.oss.tsx
@@ -5,4 +5,5 @@ export enum FeatureFlag {
   flagDisableAutoLoadDefaults = 'flagDisableAutoLoadDefaults',
   flagSettingsPage = 'flagSettingsPage',
   flagCodeLocationPage = 'flagCodeLocationPage',
+  flagRunsFeed = 'flagRunsFeed',
 }
diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/useVisibleFeatureFlagRows.oss.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/useVisibleFeatureFlagRows.oss.tsx
@@ -41,4 +41,9 @@ export const useVisibleFeatureFlagRows = () => [
     key: 'New code location page',
     flagType: FeatureFlag.flagCodeLocationPage,
   },
+  // Uncomment once we're ready for this to go live
+  // {
+  //   key: 'New Runs feed',
+  //   flagType: FeatureFlag.flagRunsFeed,
+  // }
 ];
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
@@ -20,6 +20,7 @@ import {showCustomAlert} from '../../app/CustomAlertProvider';
 import {showSharedToaster} from '../../app/DomUtils';
 import {PythonErrorInfo} from '../../app/PythonErrorInfo';
 import {BulkActionStatus} from '../../graphql/types';
+import {getBackfillPath} from '../../runs/RunsFeedUtils';
 import {runsPathWithFilters} from '../../runs/RunsFilterInput';
 import {AnchorButton} from '../../ui/AnchorButton';
 
@@ -161,7 +162,7 @@ export const BackfillActionsMenu = ({
     <>
       {anchorLabel ? (
         <JoinedButtons>
-          <AnchorButton to={`/runs-feed/b/${backfill.id}?tab=runs`}>View run</AnchorButton>
+          <AnchorButton to={getBackfillPath(backfill.id)}>View run</AnchorButton>
           {popover}
         </JoinedButtons>
       ) : (

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
@@ -1,9 +1,8 @@
 import {Box, Colors, Spinner, useViewport} from '@dagster-io/ui-components';
 import {useVirtualizer} from '@tanstack/react-virtual';
-import React, {useContext} from 'react';
+import React from 'react';
 import {Link} from 'react-router-dom';
 
-import {RunRequestContext} from './RunsFeedBackfillPage';
 import {RunStatusDot} from '../../runs/RunStatusDots';
 import {
   CONSTANTS,
@@ -143,7 +142,6 @@ 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({
@@ -167,7 +165,7 @@ export const ExecutionTimelineRow = ({
       >
         <Box flex={{alignItems: 'center', gap: 4}}>
           <RunStatusDot status={run.status} size={12} />
-          <Link to={buildLinkToRun(run)}>{run.id.slice(0, 8)}</Link>
+          <Link to={`/runs/${run.id}`}>{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/RunsFeedBackfillPage.tsx b/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/RunsFeedBackfillPage.tsx
@@ -9,7 +9,7 @@ import {
   Tab,
   Tabs,
 } from '@dagster-io/ui-components';
-import {createContext, useContext} from 'react';
+import {useContext} from 'react';
 import {Link, useParams} from 'react-router-dom';
 
 import {BackfillActionsMenu} from './BackfillActionsMenu';
@@ -29,14 +29,9 @@ import {
   DaemonNotRunningAlert,
   useIsBackfillDaemonHealthy,
 } from '../../partitions/BackfillMessaging';
+import {getRunFeedPath} from '../../runs/RunsFeedUtils';
 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}>();
@@ -99,27 +94,23 @@ export const RunsFeedBackfillPage = () => {
         {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>
-                )}
+        <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>
+              <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>
       </Box>
     );
   }
@@ -129,7 +120,7 @@ export const RunsFeedBackfillPage = () => {
       <PageHeader
         title={
           <Heading>
-            <Link to="/runs-feed" style={{color: Colors.textLight()}}>
+            <Link to={getRunFeedPath()} style={{color: Colors.textLight()}}>
               All runs
             </Link>
             {' / '}

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
@@ -19,6 +19,7 @@ import {RunStatusTag} from './RunStatusTag';
 import {DagsterTag} from './RunTag';
 import {RunTimingTags} from './RunTimingTags';
 import {assetKeysForRun} from './RunUtils';
+import {getBackfillPath} from './RunsFeedUtils';
 import {TickTagForRun} from './TickTagForRun';
 import {RunRootQuery, RunRootQueryVariables} from './types/RunRoot.types';
 import {gql, useQuery} from '../apollo-client';
@@ -117,14 +118,11 @@ export const RunRoot = () => {
           title={
             backfillTag ? (
               <Heading>
-                <Link to="/runs-feed" style={{color: Colors.textLight()}}>
+                <Link to="/runs" style={{color: Colors.textLight()}}>
                   All runs
                 </Link>
                 {' / '}
-                <Link
-                  to={`/runs-feed/b/${backfillTag.value}?tab=runs&view=list`}
-                  style={{color: Colors.textLight()}}
-                >
+                <Link to={getBackfillPath(backfillTag.value)} style={{color: Colors.textLight()}}>
                   {backfillTag.value}
                 </Link>
                 {' / '}

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
@@ -15,7 +15,6 @@ 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,
@@ -39,7 +38,6 @@ export const RunRow = ({
   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 +67,7 @@ export const RunRow = ({
         </td>
       ) : null}
       <td>
-        <Link to={buildLinkToRun(run)}>
+        <Link to={`/runs/${run.id}`}>
           <Mono>{titleForRun(run)}</Mono>
         </Link>
       </td>

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
@@ -20,6 +20,7 @@ import {RunStatusTagWithStats} from './RunStatusTag';
 import {DagsterTag} from './RunTag';
 import {RunTargetLink} from './RunTargetLink';
 import {RunStateSummary, RunTime, titleForRun} from './RunUtils';
+import {getBackfillPath} from './RunsFeedUtils';
 import {RunFilterToken} from './RunsFilterInput';
 import {RunTimeFragment} from './types/RunUtils.types';
 import {RunsFeedTableEntryFragment} from './types/RunsFeedRow.types';
@@ -86,7 +87,7 @@ export const RunsFeedRow = ({
           <Link
             to={
               entry.__typename === 'PartitionBackfill'
-                ? appendCurrentQueryParams(`/runs-feed/b/${entry.id}?tab=runs`)
+                ? appendCurrentQueryParams(getBackfillPath(entry.id))
                 : `/runs/${entry.id}`
             }
           >

diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/RunsFeedTabs.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/RunsFeedTabs.tsx
@@ -5,6 +5,7 @@ import {useLocation} from 'react-router-dom';
 import styled, {css} from 'styled-components';
 
 import {failedStatuses, inProgressStatuses, queuedStatuses} from './RunStatuses';
+import {getRunFeedPath} from './RunsFeedUtils';
 import {runsPathWithFilters, useQueryPersistedRunFilters} from './RunsFilterInput';
 import {RunFeedTabsCountQuery, RunFeedTabsCountQueryVariables} from './types/RunsFeedTabs.types';
 import {gql, useQuery} from '../apollo-client';
@@ -59,7 +60,7 @@ export const useRunsFeedTabs = (filter: RunsFilter = {}) => {
   const urlForStatus = (statuses: RunStatus[]) => {
     const tokensMinusStatus = filterTokens.filter((token) => token.token !== 'status');
     const statusTokens = statuses.map((status) => ({token: 'status' as const, value: status}));
-    return runsPathWithFilters([...statusTokens, ...tokensMinusStatus], '/runs-feed');
+    return runsPathWithFilters([...statusTokens, ...tokensMinusStatus], getRunFeedPath());
   };
 
   const tabs = (
@@ -76,7 +77,7 @@ export const useRunsFeedTabs = (filter: RunsFilter = {}) => {
         to={urlForStatus(Array.from(inProgressStatuses))}
       />
       <TabLink id="failed" title="Failed" to={urlForStatus(Array.from(failedStatuses))} />
-      <TabLink id="scheduled" title="Scheduled" to="/runs-feed/scheduled" />
+      <TabLink id="scheduled" title="Scheduled" to={`${getRunFeedPath()}/scheduled`} />
     </Tabs>
   );
 
@@ -108,7 +109,7 @@ export const ActivatableButton = styled(AnchorButton)<{$active: boolean}>`
 
 export const useSelectedRunsFeedTab = (filterTokens: TokenizingFieldValue[]) => {
   const {pathname} = useLocation();
-  if (pathname === '/runs-feed/scheduled') {
+  if (pathname === `${getRunFeedPath()}/scheduled`) {
     return 'scheduled';
   }
   const statusTokens = new Set(

diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/RunsFeedUtils.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/RunsFeedUtils.tsx
@@ -0,0 +1,17 @@
+import {FeatureFlag} from 'shared/app/FeatureFlags.oss';
+
+import {featureEnabled} from '../app/Flags';
+
+export function getRunFeedPath() {
+  return featureEnabled(FeatureFlag.flagRunsFeed) ? `/runs/` : `/runs-feed/`;
+}
+
+export function getBackfillPath(id: string) {
+  // THis is hacky but basically we're dark launching runs-feed, so if we're on the runs-feed path, stay on it.
+  if (location.pathname.includes('runs-feed')) {
+    return `/runs-feed/b/${id}?tab=runs`;
+  }
+  return featureEnabled(FeatureFlag.flagRunsFeed)
+    ? `/runs/b/${id}?tab=runs`
+    : `/overview/backfills/${id}`;
+}