Skip to content

Commit

Permalink
[dagit] Ship Overview/Workspace (#10245)
Browse files Browse the repository at this point in the history
  • Loading branch information
@hellendag
hellendag committed Oct 28, 2022
1 parent 35b8f8b commit 8296cf7
Show file tree
Hide file tree
Showing 16 changed files with 86 additions and 397 deletions.
151 changes: 52 additions & 99 deletions js_modules/dagit/packages/core/src/app/AppTopNav.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,8 @@ import styled from 'styled-components/macro';

import {DeploymentStatusIcon} from '../nav/DeploymentStatusIcon';
import {VersionNumber} from '../nav/VersionNumber';
import {WorkspaceStatus} from '../nav/WorkspaceStatus';
import {SearchDialog} from '../search/SearchDialog';

import {useFeatureFlags} from './Flags';
import {LayoutContext} from './LayoutProvider';
import {ShortcutHandler} from './ShortcutHandler';
import {WebSocketStatus} from './WebSocketProvider';
Expand All @@ -21,132 +19,87 @@ interface Props {

export const AppTopNav: React.FC<Props> = ({children, rightOfSearchBar, searchPlaceholder}) => {
const history = useHistory();
const {flagNewWorkspace} = useFeatureFlags();

const navLinks = () => {
const overviewItem = flagNewWorkspace ? (
<ShortcutHandler
key="overview"
onShortcut={() => history.push('/overview')}
shortcutLabel="⌥1"
shortcutFilter={(e) => e.code === 'Digit1' && e.altKey}
>
<TopNavLink to="/overview" data-cy="AppTopNav_StatusLink">
Overview
</TopNavLink>
</ShortcutHandler>
) : null;

const deploymentItem = (
<ShortcutHandler
key="deployment"
onShortcut={() => history.push('/instance')}
shortcutLabel={flagNewWorkspace ? '⌥5' : '⌥3'}
shortcutFilter={(e) => e.altKey && e.code === (flagNewWorkspace ? 'Digit5' : 'Digit3')}
>
<TopNavLink
to="/instance"
data-cy="AppTopNav_StatusLink"
isActive={(_, location) => {
const {pathname} = location;
return (
pathname.startsWith('/instance') &&
!pathname.startsWith('/instance/runs') &&
!pathname.startsWith('/instance/assets')
);
}}
>
<Box flex={{direction: 'row', alignItems: 'center', gap: 6}}>
Deployment
<DeploymentStatusIcon />
</Box>
</TopNavLink>
</ShortcutHandler>
);

const workspaceItem = (
<ShortcutHandler
key="workspace"
onShortcut={() => history.push('/workspace')}
shortcutLabel="⌥4"
shortcutFilter={(e) => e.code === 'Digit4' && e.altKey}
>
<TopNavLink to="/workspace" data-cy="AppTopNav_WorkspaceLink">
<Box flex={{direction: 'row', alignItems: 'center', gap: 6}}>
Workspace
{flagNewWorkspace ? null : <WorkspaceStatus placeholder />}
</Box>
</TopNavLink>
</ShortcutHandler>
);

return (
<Box flex={{direction: 'row', alignItems: 'center', gap: 16}}>
{flagNewWorkspace ? overviewItem : null}
<ShortcutHandler
key="overview"
onShortcut={() => history.push('/overview')}
shortcutLabel="⌥1"
shortcutFilter={(e) => e.altKey && e.code === 'Digit1'}
>
<TopNavLink to="/overview" data-cy="AppTopNav_StatusLink">
Overview
</TopNavLink>
</ShortcutHandler>
<ShortcutHandler
onShortcut={() => history.push('/instance/runs')}
shortcutLabel={flagNewWorkspace ? '⌥2' : '⌥1'}
shortcutFilter={(e) => e.altKey && e.code === (flagNewWorkspace ? 'Digit2' : 'Digit1')}
shortcutLabel="⌥2"
shortcutFilter={(e) => e.altKey && e.code === 'Digit2'}
>
<TopNavLink to="/instance/runs" data-cy="AppTopNav_RunsLink">
Runs
</TopNavLink>
</ShortcutHandler>
<ShortcutHandler
onShortcut={() => history.push('/instance/assets')}
shortcutLabel={flagNewWorkspace ? '⌥3' : '⌥2'}
shortcutFilter={(e) => e.altKey && e.code === (flagNewWorkspace ? 'Digit3' : 'Digit2')}
shortcutLabel="⌥3"
shortcutFilter={(e) => e.altKey && e.code === 'Digit3'}
>
<TopNavLink to="/instance/assets" data-cy="AppTopNav_AssetsLink" exact={false}>
Assets
</TopNavLink>
</ShortcutHandler>
{flagNewWorkspace ? [workspaceItem, deploymentItem] : [deploymentItem, workspaceItem]}
<ShortcutHandler
key="workspace"
onShortcut={() => history.push('/workspace')}
shortcutLabel="⌥4"
shortcutFilter={(e) => e.altKey && e.code === 'Digit4'}
>
<TopNavLink to="/workspace" data-cy="AppTopNav_WorkspaceLink">
Workspace
</TopNavLink>
</ShortcutHandler>
<ShortcutHandler
key="deployment"
onShortcut={() => history.push('/instance')}
shortcutLabel="⌥5"
shortcutFilter={(e) => e.altKey && e.code === 'Digit5'}
>
<TopNavLink
to="/instance"
data-cy="AppTopNav_StatusLink"
isActive={(_, location) => {
const {pathname} = location;
return (
pathname.startsWith('/instance') &&
!pathname.startsWith('/instance/runs') &&
!pathname.startsWith('/instance/assets')
);
}}
>
<Box flex={{direction: 'row', alignItems: 'center', gap: 6}}>
Deployment
<DeploymentStatusIcon />
</Box>
</TopNavLink>
</ShortcutHandler>
</Box>
);
};

const left = () => {
if (flagNewWorkspace) {
return (
<Box flex={{direction: 'row', alignItems: 'center', gap: 16}}>
<AppTopNavLogo />
<Box margin={{left: 8}}>{navLinks()}</Box>
{rightOfSearchBar}
</Box>
);
}
return (
return (
<AppTopNavContainer>
<Box flex={{direction: 'row', alignItems: 'center', gap: 16}}>
<AppTopNavLogo />
<SearchDialog searchPlaceholder={searchPlaceholder} />
<Box margin={{left: 8}}>{navLinks()}</Box>
{rightOfSearchBar}
</Box>
);
};

const right = () => {
if (flagNewWorkspace) {
return (
<Box flex={{direction: 'row', alignItems: 'center'}}>
<SearchDialog searchPlaceholder={searchPlaceholder} />
{children}
</Box>
);
}

return (
<Box flex={{direction: 'row', alignItems: 'center'}}>
{navLinks()}
<SearchDialog searchPlaceholder={searchPlaceholder} />
{children}
</Box>
);
};

return (
<AppTopNavContainer>
{left()}
{right()}
</AppTopNavContainer>
);
};
Expand Down
6 changes: 1 addition & 5 deletions js_modules/dagit/packages/core/src/app/FallthroughRoot.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,6 @@ import {isHiddenAssetGroupJob} from '../asset-graph/Utils';
import {DagsterRepoOption, WorkspaceContext} from '../workspace/WorkspaceContext';
import {workspacePath, workspacePipelinePath} from '../workspace/workspacePath';

import {useFeatureFlags} from './Flags';

const InstanceRedirect = () => {
const location = useLocation();
const path = `${location.pathname}${location.search}`;
Expand Down Expand Up @@ -37,8 +35,6 @@ const FinalRedirectOrLoadingRoot = () => {
const workspaceContext = React.useContext(WorkspaceContext);
const {allRepos, loading, locationEntries} = workspaceContext;

const {flagNewWorkspace} = useFeatureFlags();

if (loading) {
return (
<Box flex={{direction: 'row', justifyContent: 'center'}} style={{paddingTop: '100px'}}>
Expand Down Expand Up @@ -92,7 +88,7 @@ const FinalRedirectOrLoadingRoot = () => {

// If we have more than one repo with a job, route to the instance overview
if (reposWithVisibleJobs.length > 0) {
return <Redirect to={flagNewWorkspace ? '/overview' : '/instance'} />;
return <Redirect to="/overview" />;
}

const repoWithNoJob = allRepos[0];
Expand Down
1 change: 0 additions & 1 deletion js_modules/dagit/packages/core/src/app/Flags.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ export const DAGIT_FLAGS_KEY = 'DAGIT_FLAGS';
export const FeatureFlag = {
flagDebugConsoleLogging: 'flagDebugConsoleLogging' as const,
flagDisableWebsockets: 'flagDisableWebsockets' as const,
flagNewWorkspace: 'flagNewWorkspace' as const,
flagNewAssetDetails: 'flagNewAssetDetails' as const,
flagAssetGraphExperimentalZoom: 'flagAssetGraphExperimentalZoom' as const,
};
Expand Down
10 changes: 0 additions & 10 deletions js_modules/dagit/packages/core/src/app/UserSettingsRoot.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,16 +125,6 @@ export function getFeatureFlagRows(
/>
),
},
{
key: 'New workspace pages, overview pages, and top navigation',
value: (
<Checkbox
format="switch"
checked={flags.includes(FeatureFlag.flagNewWorkspace)}
onChange={() => toggleFlag(FeatureFlag.flagNewWorkspace)}
/>
),
},
{
key: 'New asset detail pages',
value: (
Expand Down
15 changes: 2 additions & 13 deletions js_modules/dagit/packages/core/src/instance/InstanceBackfills.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import {
} from '@dagster-io/ui';
import * as React from 'react';

import {useFeatureFlags} from '../app/Flags';
import {PythonErrorInfo, PYTHON_ERROR_FRAGMENT} from '../app/PythonErrorInfo';
import {FIFTEEN_SECONDS, useQueryRefreshAtInterval} from '../app/QueryRefresh';
import {useTrackPageView} from '../app/analytics';
Expand All @@ -21,8 +20,6 @@ import {Loading} from '../ui/Loading';

import {BACKFILL_TABLE_FRAGMENT, BackfillTable} from './BackfillTable';
import {INSTANCE_HEALTH_FRAGMENT} from './InstanceHealthFragment';
import {InstancePageContext} from './InstancePageContext';
import {InstanceTabs} from './InstanceTabs';
import {
InstanceBackfillsQuery,
InstanceBackfillsQueryVariables,
Expand All @@ -34,8 +31,6 @@ const PAGE_SIZE = 10;
export const InstanceBackfills = () => {
useTrackPageView();

const {flagNewWorkspace} = useFeatureFlags();
const {pageTitle} = React.useContext(InstancePageContext);
const queryData = useQuery<InstanceHealthForBackfillsQuery>(INSTANCE_HEALTH_FOR_BACKFILLS_QUERY);

const {queryResult, paginationProps} = useCursorPaginatedQuery<
Expand All @@ -60,14 +55,8 @@ export const InstanceBackfills = () => {
return (
<Page>
<PageHeader
title={<Heading>{flagNewWorkspace ? 'Overview' : pageTitle}</Heading>}
tabs={
flagNewWorkspace ? (
<OverviewTabs tab="backfills" refreshState={refreshState} />
) : (
<InstanceTabs tab="backfills" refreshState={refreshState} />
)
}
title={<Heading>Overview</Heading>}
tabs={<OverviewTabs tab="backfills" refreshState={refreshState} />}
/>
<Loading queryResult={queryResult} allowStaleData={true}>
{({partitionBackfillsOrError}) => {
Expand Down
9 changes: 1 addition & 8 deletions js_modules/dagit/packages/core/src/instance/InstanceRoot.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import {MainContent} from '@dagster-io/ui';
import * as React from 'react';
import {Redirect, Route, Switch, useLocation} from 'react-router-dom';

import {useFeatureFlags} from '../app/Flags';
import {AssetsCatalogRoot} from '../assets/AssetsCatalogRoot';
import {AssetsGroupsGlobalGraphRoot} from '../assets/AssetsGroupsGlobalGraphRoot';
import {RunRoot} from '../runs/RunRoot';
Expand All @@ -14,7 +13,6 @@ import {InstanceStatusRoot} from './InstanceStatusRoot';

export const InstanceRoot = () => {
const {pathname} = useLocation();
const {flagNewWorkspace} = useFeatureFlags();
const main = React.useRef<HTMLDivElement>(null);

React.useEffect(() => {
Expand Down Expand Up @@ -45,12 +43,7 @@ export const InstanceRoot = () => {
<Route path="/instance/:tab">
<InstanceStatusRoot />
</Route>
<Route
path="*"
render={() => (
<Redirect to={flagNewWorkspace ? '/instance/code-locations' : '/instance/overview'} />
)}
/>
<Route path="*" render={() => <Redirect to="/instance/code-locations" />} />
</Switch>
</MainContent>
);
Expand Down
18 changes: 1 addition & 17 deletions js_modules/dagit/packages/core/src/instance/InstanceSchedules.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,7 @@ import {gql, useQuery} from '@apollo/client';
import {Box, Colors, Group, NonIdealState, PageHeader, Heading, Subheading} from '@dagster-io/ui';
import * as React from 'react';

import {useFeatureFlags} from '../app/Flags';
import {PythonErrorInfo, PYTHON_ERROR_FRAGMENT} from '../app/PythonErrorInfo';
import {FIFTEEN_SECONDS, useQueryRefreshAtInterval} from '../app/QueryRefresh';
import {useTrackPageView} from '../app/analytics';
import {INSTIGATION_STATE_FRAGMENT} from '../instigation/InstigationUtils';
import {UnloadableSchedules} from '../instigation/Unloadable';
Expand All @@ -18,33 +16,19 @@ import {REPOSITORY_INFO_FRAGMENT} from '../workspace/RepositoryInformation';
import {buildRepoPath, buildRepoAddress} from '../workspace/buildRepoAddress';

import {INSTANCE_HEALTH_FRAGMENT} from './InstanceHealthFragment';
import {InstancePageContext} from './InstancePageContext';
import {InstanceTabs} from './InstanceTabs';
import {InstanceSchedulesQuery} from './types/InstanceSchedulesQuery';

export const InstanceSchedules = React.memo(() => {
useTrackPageView();
const {flagNewWorkspace} = useFeatureFlags();

const {pageTitle} = React.useContext(InstancePageContext);
const queryData = useQuery<InstanceSchedulesQuery>(INSTANCE_SCHEDULES_QUERY, {
fetchPolicy: 'cache-and-network',
notifyOnNetworkStatusChange: true,
});
const refreshState = useQueryRefreshAtInterval(queryData, FIFTEEN_SECONDS);

return (
<>
<PageHeader
title={<Heading>{flagNewWorkspace ? 'Overview' : pageTitle}</Heading>}
tabs={
flagNewWorkspace ? (
<OverviewTabs tab="schedules" />
) : (
<InstanceTabs tab="schedules" refreshState={refreshState} />
)
}
/>
<PageHeader title={<Heading>Overview</Heading>} tabs={<OverviewTabs tab="schedules" />} />
<Loading queryResult={queryData} allowStaleData={true}>
{(data) => <AllSchedules data={data} />}
</Loading>
Expand Down

0 comments on commit 8296cf7

Please sign in to comment.