@@ -42,7 +42,7 @@ exports[`renders with tokens [snapshot] 1`] = `
onClick={[Function]}
>
diff --git a/js_modules/dagit/src/execute/PipelineExecutionRoot.tsx b/js_modules/dagit/src/execute/PipelineExecutionRoot.tsx
index 62539c039f28..9873f4095f1c 100644
--- a/js_modules/dagit/src/execute/PipelineExecutionRoot.tsx
+++ b/js_modules/dagit/src/execute/PipelineExecutionRoot.tsx
@@ -3,7 +3,7 @@ import {IconNames} from '@blueprintjs/icons';
import gql from 'graphql-tag';
import * as React from 'react';
import {Query} from 'react-apollo';
-import {RouteComponentProps} from 'react-router-dom';
+import {Redirect, RouteComponentProps} from 'react-router-dom';
import {
usePipelineSelector,
@@ -16,6 +16,7 @@ import {
applyCreateSession,
useStorage,
} from 'src/LocalStorage';
+import {explorerPathFromString} from 'src/PipelinePathUtils';
import {
ExecutionSessionContainer,
ExecutionSessionContainerError,
@@ -35,7 +36,7 @@ import {useDocumentTitle} from 'src/hooks/useDocumentTitle';
export const PipelineExecutionRoot: React.FunctionComponent
> = ({match}) => {
- const pipelineName = match.params.pipelinePath.split(':')[0];
+ const {pipelineName, snapshotId} = explorerPathFromString(match.params.pipelinePath);
useDocumentTitle(`Pipeline: ${pipelineName}`);
const {loading} = useRepositoryOptions();
@@ -45,6 +46,10 @@ export const PipelineExecutionRoot: React.FunctionComponent;
+ }
+
const onSaveSession = (session: string, changes: IExecutionSessionChanges) => {
onSave(applyChangesToSession(data, session, changes));
};
diff --git a/js_modules/dagit/src/nav/PipelineNav.tsx b/js_modules/dagit/src/nav/PipelineNav.tsx
index 3be356b9f991..2f24ad57d829 100644
--- a/js_modules/dagit/src/nav/PipelineNav.tsx
+++ b/js_modules/dagit/src/nav/PipelineNav.tsx
@@ -1,48 +1,52 @@
-import {IBreadcrumbProps, IconName} from '@blueprintjs/core';
+import {IBreadcrumbProps, Tag} from '@blueprintjs/core';
import React from 'react';
import {useRouteMatch} from 'react-router-dom';
+import styled from 'styled-components';
import {useRepository} from 'src/DagsterRepositoryContext';
import {explorerPathFromString, explorerPathToString} from 'src/PipelinePathUtils';
import {TopNav} from 'src/nav/TopNav';
-const PIPELINE_TABS: {
- title: string;
- pathComponent: string;
- icon: IconName;
-}[] = [
- {title: 'Overview', pathComponent: 'overview', icon: 'dashboard'},
- {title: 'Definition', pathComponent: '', icon: 'diagram-tree'},
- {
+const pipelineTabs = {
+ overview: {title: 'Overview', pathComponent: 'overview', icon: 'dashboard'},
+ definition: {title: 'Definition', pathComponent: '', icon: 'diagram-tree'},
+ playground: {
title: 'Playground',
pathComponent: 'playground',
icon: 'manually-entered-data',
},
- {
+ runs: {
title: 'Runs',
pathComponent: 'runs',
icon: 'history',
},
- {
+ partitions: {
title: 'Partitions',
pathComponent: 'partitions',
icon: 'multi-select',
},
-];
+};
+
+const snapshotOrder = ['definition', 'runs'];
+const currentOrder = ['overview', 'definition', 'playground', 'runs', 'partitions'];
export function tabForPipelinePathComponent(component?: string) {
- return (
- PIPELINE_TABS.find((t) => t.pathComponent === component) ||
- PIPELINE_TABS.find((t) => t.pathComponent === '')!
- );
+ const tabList = Object.keys(pipelineTabs);
+ const match =
+ tabList.find((t) => pipelineTabs[t].pathComponent === component) ||
+ tabList.find((t) => pipelineTabs[t].pathComponent === '')!;
+ return pipelineTabs[match];
}
-export const PipelineNav: React.FunctionComponent = () => {
+interface PipelineNavProps {
+ isHistorical: boolean;
+ isSnapshot: boolean;
+}
+
+export const PipelineNav: React.FunctionComponent = (props: PipelineNavProps) => {
+ const {isHistorical, isSnapshot} = props;
const repository = useRepository();
const match = useRouteMatch<{tab: string; selector: string}>(['/pipeline/:selector/:tab?']);
- if (!match) {
- return ;
- }
const active = tabForPipelinePathComponent(match.params.tab);
const explorerPath = explorerPathFromString(match.params.selector);
@@ -52,25 +56,66 @@ export const PipelineNav: React.FunctionComponent = () => {
// When you click one of the top tabs, it resets the snapshot you may be looking at
// in the Definition tab and also clears solids from the path
- const explorerPathWithoutSnapshot = explorerPathToString({
+ const explorerPathForTab = explorerPathToString({
...explorerPath,
- snapshotId: undefined,
pathSolids: [],
});
- const breadcrumbs: IBreadcrumbProps[] = [
- {text: 'Pipelines', icon: 'diagram-tree'},
- {text: explorerPath.pipelineName},
- ];
+ const breadcrumbs: IBreadcrumbProps[] = [{text: 'Pipelines', icon: 'diagram-tree'}];
- const tabs = PIPELINE_TABS.filter(
- (tab) => hasPartitionSet || tab.pathComponent !== 'partitions',
- ).map((tab) => {
- return {
- text: tab.title,
- href: `/pipeline/${explorerPathWithoutSnapshot}${tab.pathComponent}`,
- };
- });
+ if (isSnapshot) {
+ const tag = isHistorical ? (
+
+ Historical snapshot
+
+ ) : (
+
+ Current snapshot
+
+ );
+
+ breadcrumbs.push(
+ {
+ text: explorerPath.pipelineName,
+ href: `/pipeline/${explorerPath.pipelineName}`,
+ },
+ {
+ text: (
+
+ {explorerPath.snapshotId}
+ {tag}
+
+ ),
+ },
+ );
+ } else {
+ breadcrumbs.push({
+ text: explorerPath.pipelineName,
+ });
+ }
+
+ const tabForKey = React.useCallback(
+ (key) => {
+ const tab = pipelineTabs[key];
+ return {
+ text: tab.title,
+ href: `/pipeline/${explorerPathForTab}${tab.pathComponent}`,
+ };
+ },
+ [explorerPathForTab],
+ );
+
+ const tabs = React.useMemo(() => {
+ return isSnapshot
+ ? snapshotOrder.map(tabForKey)
+ : currentOrder.filter((key) => hasPartitionSet || key !== 'partitions').map(tabForKey);
+ }, [hasPartitionSet, isSnapshot, tabForKey]);
return ;
};
+
+const Mono = styled.div`
+ font-family: monospace;
+ font-size: 14px;
+ margin-right: 12px;
+`;
diff --git a/js_modules/dagit/src/nav/TopNav.stories.tsx b/js_modules/dagit/src/nav/TopNav.stories.tsx
index b3a8785b2402..f603670fe124 100644
--- a/js_modules/dagit/src/nav/TopNav.stories.tsx
+++ b/js_modules/dagit/src/nav/TopNav.stories.tsx
@@ -42,3 +42,24 @@ WithTag.args = {
},
],
};
+
+export const WithTagAndTabs = Template.bind({});
+WithTagAndTabs.args = {
+ breadcrumbs: [
+ {text: 'Snapshots', icon: 'camera'},
+ {
+ text: (
+
+
c513370e7e15df09c9edd297dfa8f3b4
+
+ Historical snapshot
+
+
+
+
+
+
+
+
+
+
+ {/* Capture solid subpath in a regex match */}
+
+
+
+
+ {(data) => {
+ const snapshotData = data?.pipelineSnapshotOrError;
+
+ if (snapshotData.__typename === 'PipelineSnapshotNotFoundError') {
+ const {message} = snapshotData;
+ return ;
+ }
+
+ const pipelineForSnapshot =
+ snapshotData?.__typename === 'PipelineSnapshot' ? snapshotData?.name : null;
+
+ if (
+ snapshotData.__typename === 'PipelineSnapshot' &&
+ pipelineName !== pipelineForSnapshot
+ ) {
+ return (
+
+ );
+ }
+
+ const items: IBreadcrumbProps[] = [
+ {icon: 'diagram-tree', text: 'Pipelines'},
+ {text: pipelineName, href: `/pipeline/${pipelineName}`},
+ {
+ text: (
+
+ {snapshotId}
+
+ Historical snapshot
+
+
+ ),
+ },
+ ];
+
+ const tabs = [
+ {
+ text: 'Definition',
+ href: `/snapshot/${pipelinePath}/definition`,
+ },
+ {
+ text: 'Runs',
+ href: `/snapshot/${pipelinePath}/runs`,
+ },
+ ];
+
+ return (
+ <>
+
+
+ {pipelineName ? (
+
+ Pipeline: {pipelineName}
+
+ ) : null}
+
+