Skip to content

Commit bdfdc33

Browse files
prhaprha
committed
change UI to narrow asset events query
1 parent 075048f commit bdfdc33

9 files changed

+1152
-133
lines changed

‎js_modules/dagster-ui/packages/ui-core/client.json

+4-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎js_modules/dagster-ui/packages/ui-core/src/asset-graph/SidebarAssetInfo.tsx

+3-8
Original file line numberDiff line numberDiff line change
@@ -60,13 +60,8 @@ export const SidebarAssetInfo = ({graphNode}: {graphNode: GraphNode}) => {
6060
const {lastMaterialization} = liveData || {};
6161
const asset = data?.assetNodeOrError.__typename === 'AssetNode' ? data.assetNodeOrError : null;
6262

63-
const recentEvents = useRecentAssetEvents(
64-
asset?.assetKey,
65-
{},
66-
{assetHasDefinedPartitions: !!asset?.partitionDefinition},
67-
);
68-
69-
const latestEvent = recentEvents.materializations
63+
const recentEvents = useRecentAssetEvents(asset?.assetKey, 1);
64+
const latestMaterializationEvent = recentEvents.materializations
7065
? recentEvents.materializations[recentEvents.materializations.length - 1]
7166
: undefined;
7267

@@ -178,7 +173,7 @@ export const SidebarAssetInfo = ({graphNode}: {graphNode: GraphNode}) => {
178173
<TableSchemaAssetContext.Provider
179174
value={{
180175
assetKey,
181-
materializationMetadataEntries: latestEvent?.metadataEntries,
176+
materializationMetadataEntries: latestMaterializationEvent?.metadataEntries,
182177
definitionMetadataEntries: assetMetadata,
183178
}}
184179
>

‎js_modules/dagster-ui/packages/ui-core/src/asset-graph/__stories__/SidebarAssetInfo.stories.tsx

+8-9
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ import * as React from 'react';
44

55
import {createAppCache} from '../../app/AppCache';
66
import {buildPartitionHealthMock} from '../../assets/__fixtures__/PartitionHealthQuery.fixtures';
7-
import {AssetEventsQuery} from '../../assets/types/useRecentAssetEvents.types';
8-
import {ASSET_EVENTS_QUERY} from '../../assets/useRecentAssetEvents';
7+
import {RecentAssetEventsQuery} from '../../assets/types/useRecentAssetEvents.types';
8+
import {RECENT_ASSET_EVENTS_QUERY} from '../../assets/useRecentAssetEvents';
99
import {
1010
AssetNode,
1111
RunStatus,
@@ -144,9 +144,13 @@ const buildSidebarQueryMock = (
144144
},
145145
});
146146

147-
const buildEventsMock = ({reported}: {reported: boolean}): MockedResponse<AssetEventsQuery> => ({
147+
const buildEventsMock = ({
148+
reported,
149+
}: {
150+
reported: boolean;
151+
}): MockedResponse<RecentAssetEventsQuery> => ({
148152
request: {
149-
query: ASSET_EVENTS_QUERY,
153+
query: RECENT_ASSET_EVENTS_QUERY,
150154
variables: {
151155
assetKey: {path: ['asset1']},
152156
before: undefined,
@@ -160,11 +164,6 @@ const buildEventsMock = ({reported}: {reported: boolean}): MockedResponse<AssetE
160164
__typename: 'Asset',
161165
key: MockAssetKey,
162166
id: '["asset1"]',
163-
definition: {
164-
__typename: 'AssetNode',
165-
id: 'test.py.repo.["asset1"]',
166-
partitionKeys: [],
167-
},
168167
assetMaterializationHistory: buildMaterializationHistoryConnection({
169168
results: [
170169
buildMaterializationEvent({

‎js_modules/dagster-ui/packages/ui-core/src/assets/AssetEventMetadataEntriesTable.tsx

+8-8
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import {useMemo, useState} from 'react';
1616
import {Link} from 'react-router-dom';
1717
import styled from 'styled-components';
1818

19-
import {AssetEventMetadataPlots} from './AssetEventMetadataPlots';
19+
import {AssetPartitionMetadataPlots, AssetTimeMetadataPlots} from './AssetEventMetadataPlots';
2020
import {AssetKey} from './types';
2121
import {
2222
AssetFailedToMaterializeFragment,
@@ -164,7 +164,7 @@ export const AssetEventMetadataEntriesTable = ({
164164
onChange={(e) => setFilter(e.target.value)}
165165
placeholder="Filter metadata keys"
166166
/>
167-
) : (
167+
) : assetHasDefinedPartitions ? (
168168
<ButtonGroup
169169
activeItems={new Set([plotView])}
170170
onClick={(id: 'partition' | 'time') => {
@@ -175,7 +175,7 @@ export const AssetEventMetadataEntriesTable = ({
175175
{id: 'time', label: 'Events', icon: 'materialization'},
176176
]}
177177
/>
178-
)}
178+
) : null}
179179
<ButtonGroup
180180
activeItems={new Set([view])}
181181
onClick={(id: 'table' | 'plots') => {
@@ -265,11 +265,11 @@ export const AssetEventMetadataEntriesTable = ({
265265
</AssetEventMetadataScrollContainer>
266266
) : null}
267267
{view === 'plots' ? (
268-
<AssetEventMetadataPlots
269-
assetKey={assetKey}
270-
params={plotView === 'partition' ? {partition: ''} : {time: ''}}
271-
assetHasDefinedPartitions={!!assetHasDefinedPartitions}
272-
/>
268+
plotView === 'partition' ? (
269+
<AssetTimeMetadataPlots assetKey={assetKey} limit={100} />
270+
) : (
271+
<AssetPartitionMetadataPlots assetKey={assetKey} limit={120} />
272+
)
273273
) : null}
274274
</>
275275
);

‎js_modules/dagster-ui/packages/ui-core/src/assets/AssetEventMetadataPlots.tsx

+69-13
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,75 @@ import {Box, ExternalAnchorButton, NonIdealState, SpinnerWithText} from '@dagste
22

33
import {AssetMaterializationGraphs} from './AssetMaterializationGraphs';
44
import {useGroupedEvents} from './groupByPartition';
5-
import {AssetKey, AssetViewParams} from './types';
6-
import {useRecentAssetEvents} from './useRecentAssetEvents';
5+
import {AssetKey} from './types';
6+
import {
7+
useLatestAssetPartitionMaterializations,
8+
useRecentAssetEvents,
9+
} from './useRecentAssetEvents';
710

8-
interface Props {
9-
assetKey?: AssetKey;
10-
params: AssetViewParams;
11-
assetHasDefinedPartitions: boolean;
12-
}
11+
export const AssetTimeMetadataPlots = ({
12+
assetKey,
13+
limit,
14+
asSidebarSection,
15+
columnCount,
16+
}: {
17+
assetKey: AssetKey | undefined;
18+
limit: number;
19+
asSidebarSection?: boolean;
20+
columnCount?: number;
21+
}) => {
22+
const {materializations, observations, loading} = useRecentAssetEvents(assetKey, limit);
23+
const grouped = useGroupedEvents('time', materializations, observations, undefined);
1324

14-
export const AssetEventMetadataPlots = (props: Props) => {
15-
const {assetKey, params, assetHasDefinedPartitions} = props;
16-
const {materializations, observations, loadedPartitionKeys, loading, xAxis} =
17-
useRecentAssetEvents(assetKey, params, {assetHasDefinedPartitions});
25+
if (loading) {
26+
return (
27+
<Box padding={{vertical: 24}} flex={{direction: 'row', justifyContent: 'center'}}>
28+
<SpinnerWithText label="Loading plots…" />
29+
</Box>
30+
);
31+
}
32+
33+
return (
34+
<AssetMaterializationGraphs
35+
xAxis="time"
36+
groups={grouped}
37+
asSidebarSection={asSidebarSection}
38+
columnCount={columnCount}
39+
emptyState={
40+
<Box padding={{horizontal: 24, vertical: 64}}>
41+
<NonIdealState
42+
shrinkable
43+
icon="asset_plot"
44+
title="Asset plots are automatically generated by metadata"
45+
description="Include numeric metadata entries in your materializations and observations to see data graphed by time or partition."
46+
action={
47+
<ExternalAnchorButton href="https://docs.dagster.io/concepts/metadata-tags/asset-metadata">
48+
View documentation
49+
</ExternalAnchorButton>
50+
}
51+
/>
52+
</Box>
53+
}
54+
/>
55+
);
56+
};
1857

19-
const grouped = useGroupedEvents(xAxis, materializations, observations, loadedPartitionKeys);
58+
export const AssetPartitionMetadataPlots = ({
59+
assetKey,
60+
limit,
61+
asSidebarSection,
62+
columnCount,
63+
}: {
64+
assetKey: AssetKey | undefined;
65+
limit: number;
66+
asSidebarSection?: boolean;
67+
columnCount?: number;
68+
}) => {
69+
const {materializations, partitionKeys, loading} = useLatestAssetPartitionMaterializations(
70+
assetKey,
71+
limit,
72+
);
73+
const grouped = useGroupedEvents('partition', materializations, [], partitionKeys);
2074

2175
if (loading) {
2276
return (
@@ -28,8 +82,10 @@ export const AssetEventMetadataPlots = (props: Props) => {
2882

2983
return (
3084
<AssetMaterializationGraphs
31-
xAxis={xAxis}
85+
xAxis="partition"
3286
groups={grouped}
87+
asSidebarSection={asSidebarSection}
88+
columnCount={columnCount}
3389
emptyState={
3490
<Box padding={{horizontal: 24, vertical: 64}}>
3591
<NonIdealState

‎js_modules/dagster-ui/packages/ui-core/src/assets/AssetSidebarActivitySummary.tsx

+19-13
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,15 @@ import {Body, Box, Colors, MiddleTruncate, Spinner} from '@dagster-io/ui-compone
22
import {useEffect} from 'react';
33
import {Link} from 'react-router-dom';
44

5+
import {AssetPartitionMetadataPlots, AssetTimeMetadataPlots} from './AssetEventMetadataPlots';
56
import {AssetEventSystemTags} from './AssetEventSystemTags';
6-
import {AssetMaterializationGraphs} from './AssetMaterializationGraphs';
77
import {CurrentRunsBanner} from './CurrentRunsBanner';
88
import {FailedRunSinceMaterializationBanner} from './FailedRunSinceMaterializationBanner';
99
import {LatestMaterializationMetadata} from './LastMaterializationMetadata';
1010
import {OverdueTag, freshnessPolicyDescription} from './OverdueTag';
1111
import {AssetCheckStatusTag} from './asset-checks/AssetCheckStatusTag';
1212
import {ExecuteChecksButton} from './asset-checks/ExecuteChecksButton';
1313
import {assetDetailsPathForAssetCheck, assetDetailsPathForKey} from './assetDetailsPathForKey';
14-
import {useGroupedEvents} from './groupByPartition';
1514
import {RecentAssetEvents} from './useRecentAssetEvents';
1615
import {LiveDataForNodeWithStaleData} from '../asset-graph/Utils';
1716
import {SidebarAssetFragment} from '../asset-graph/types/SidebarAssetInfo.types';
@@ -38,12 +37,10 @@ export const AssetSidebarActivitySummary = ({
3837
stepKey,
3938
recentEvents,
4039
}: Props) => {
41-
const {xAxis, materializations, observations, loadedPartitionKeys, refetch, loading} =
42-
recentEvents;
43-
44-
const grouped = useGroupedEvents(xAxis, materializations, observations, loadedPartitionKeys);
40+
const {materializations, observations, refetch, loading} = recentEvents;
4541
const displayedEvent = isObservable ? observations[0] : materializations[0];
4642
const pools = asset.pools || [];
43+
const isPartitionedAsset = !!asset?.partitionDefinition;
4744

4845
useEffect(() => {
4946
refetch();
@@ -89,7 +86,7 @@ export const AssetSidebarActivitySummary = ({
8986
</SidebarSection>
9087
)}
9188

92-
{loadedPartitionKeys.length > 1 ? null : (
89+
{isPartitionedAsset ? null : (
9390
<>
9491
<SidebarSection title={!isObservable ? 'Latest materialization' : 'Latest observation'}>
9592
{displayedEvent ? (
@@ -138,12 +135,21 @@ export const AssetSidebarActivitySummary = ({
138135
</>
139136
)}
140137
<SidebarSection title="Metadata plots">
141-
<AssetMaterializationGraphs
142-
xAxis={xAxis}
143-
asSidebarSection
144-
groups={grouped}
145-
columnCount={1}
146-
/>
138+
{isPartitionedAsset ? (
139+
<AssetPartitionMetadataPlots
140+
assetKey={asset.assetKey}
141+
limit={120}
142+
columnCount={1}
143+
asSidebarSection
144+
/>
145+
) : (
146+
<AssetTimeMetadataPlots
147+
assetKey={asset.assetKey}
148+
limit={100}
149+
columnCount={1}
150+
asSidebarSection
151+
/>
152+
)}
147153
</SidebarSection>
148154
{asset.assetChecksOrError.__typename === 'AssetChecks' &&
149155
asset.assetChecksOrError.checks.length > 0 && (

‎js_modules/dagster-ui/packages/ui-core/src/assets/RecentUpdatesTimeline.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ type Props = {
3939
};
4040

4141
export const RecentUpdatesTimelineForAssetKey = memo((props: {assetKey: AssetKey}) => {
42-
const data = useRecentAssetEvents(props.assetKey, {}, {assetHasDefinedPartitions: false});
42+
const data = useRecentAssetEvents(props.assetKey, 100);
4343
return <RecentUpdatesTimeline assetKey={props.assetKey} {...data} />;
4444
});
4545

0 commit comments

Comments
 (0)