-
Notifications
You must be signed in to change notification settings - Fork 1.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[ui] Add Automation History to asset checks
- Loading branch information
Showing
9 changed files
with
611 additions
and
5 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
118 changes: 118 additions & 0 deletions
118
js_modules/dagster-ui/packages/ui-core/src/assets/asset-checks/AssetCheckAutomationList.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,118 @@ | ||
| import {Box, CursorHistoryControls} from '@dagster-io/ui-components'; | ||
| import {useMemo} from 'react'; | ||
|
|
||
| import {EvaluationList} from '../AutoMaterializePolicyPage/EvaluationList'; | ||
| import {AssetKey} from '../types'; | ||
| import { | ||
| AssetCheckAutomationListQuery, | ||
| AssetCheckAutomationListQueryVariables, | ||
| } from './types/AssetCheckAutomationList.types'; | ||
| import {gql} from '../../apollo-client'; | ||
| import {useCursorPaginatedQuery} from '../../runs/useCursorPaginatedQuery'; | ||
| import {ASSET_CONDITION_EVALUATION_RECORD_FRAGMENT} from '../AutoMaterializePolicyPage/GetEvaluationsQuery'; | ||
| import {AssetCheckKeyFragment} from './types/AssetChecksQuery.types'; | ||
|
|
||
| interface Props { | ||
| assetCheck: AssetCheckKeyFragment; | ||
| checkName: string; | ||
| } | ||
|
|
||
| export const AssetCheckAutomationList = ({assetCheck, checkName}: Props) => { | ||
| const {queryResult, paginationProps} = useEvaluationsQueryResult({ | ||
| assetKey: assetCheck.assetKey, | ||
| checkName, | ||
| }); | ||
|
|
||
| const evaluations = useMemo(() => { | ||
| if ( | ||
| queryResult?.data?.assetConditionEvaluationRecordsOrError?.__typename === | ||
| 'AssetConditionEvaluationRecords' | ||
| ) { | ||
| return queryResult.data.assetConditionEvaluationRecordsOrError.records; | ||
| } | ||
| return []; | ||
| }, [queryResult]); | ||
|
|
||
| return ( | ||
| <> | ||
| <Box | ||
| padding={{vertical: 12, horizontal: 20}} | ||
| flex={{direction: 'row', justifyContent: 'flex-end'}} | ||
| > | ||
| <CursorHistoryControls {...paginationProps} style={{marginTop: 0}} /> | ||
| </Box> | ||
| <EvaluationList | ||
| assetKey={assetCheck.assetKey} | ||
| isPartitioned={false} | ||
| assetCheckName={checkName} | ||
| evaluations={evaluations} | ||
| /> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export const PAGE_SIZE = 30; | ||
|
|
||
| // This function exists mostly to use the return type later | ||
| export function useEvaluationsQueryResult({ | ||
| assetKey, | ||
| checkName, | ||
| }: { | ||
| assetKey: AssetKey; | ||
| checkName: string; | ||
| }) { | ||
| const result = useCursorPaginatedQuery< | ||
| AssetCheckAutomationListQuery, | ||
| AssetCheckAutomationListQueryVariables | ||
| >({ | ||
| nextCursorForResult: (data) => { | ||
| if ( | ||
| data.assetConditionEvaluationRecordsOrError?.__typename === | ||
| 'AssetConditionEvaluationRecords' | ||
| ) { | ||
| return data.assetConditionEvaluationRecordsOrError.records[PAGE_SIZE - 1]?.evaluationId; | ||
| } | ||
| return undefined; | ||
| }, | ||
| getResultArray: (data) => { | ||
| if ( | ||
| data?.assetConditionEvaluationRecordsOrError?.__typename === | ||
| 'AssetConditionEvaluationRecords' | ||
| ) { | ||
| return data.assetConditionEvaluationRecordsOrError.records; | ||
| } | ||
| return []; | ||
| }, | ||
| variables: { | ||
| assetCheckKey: { | ||
| assetKey: {path: assetKey.path}, | ||
| name: checkName, | ||
| }, | ||
| }, | ||
| query: ASSET_CHECK_AUTOMATION_LIST_QUERY, | ||
| pageSize: PAGE_SIZE, | ||
| }); | ||
| return result; | ||
| } | ||
|
|
||
| const ASSET_CHECK_AUTOMATION_LIST_QUERY = gql` | ||
| query AssetCheckAutomationListQuery( | ||
| $assetCheckKey: AssetCheckHandleInput! | ||
| $limit: Int! | ||
| $cursor: String | ||
| ) { | ||
| assetConditionEvaluationRecordsOrError( | ||
| assetKey: null | ||
| assetCheckKey: $assetCheckKey | ||
| limit: $limit | ||
| cursor: $cursor | ||
| ) { | ||
| ... on AssetConditionEvaluationRecords { | ||
| records { | ||
| ...AssetConditionEvaluationRecordFragment | ||
| } | ||
| } | ||
| } | ||
| } | ||
| ${ASSET_CONDITION_EVALUATION_RECORD_FRAGMENT} | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
20 changes: 17 additions & 3 deletions
20
js_modules/dagster-ui/packages/ui-core/src/assets/asset-checks/AssetChecksTabs.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,17 +1,31 @@ | ||
| import {Tab, Tabs} from '@dagster-io/ui-components'; | ||
| import {Tab, Tabs, Tooltip} from '@dagster-io/ui-components'; | ||
|
|
||
| export type AssetChecksTabType = 'overview' | 'execution-history'; | ||
| export type AssetChecksTabType = 'overview' | 'execution-history' | 'automation-history'; | ||
|
|
||
| interface Props { | ||
| activeTab: AssetChecksTabType; | ||
| enableAutomationHistory: boolean; | ||
| onChange: (tabId: AssetChecksTabType) => void; | ||
| } | ||
|
|
||
| export const AssetChecksTabs = ({activeTab, onChange}: Props) => { | ||
| export const AssetChecksTabs = ({activeTab, enableAutomationHistory, onChange}: Props) => { | ||
| return ( | ||
| <Tabs selectedTabId={activeTab} onChange={onChange}> | ||
| <Tab id="overview" title="Overview" /> | ||
| <Tab id="execution-history" title="Execution history" /> | ||
| <Tab | ||
| id="automation-history" | ||
| title={ | ||
| <Tooltip | ||
| content="This asset check does not have an automation condition configured." | ||
| canShow={!enableAutomationHistory} | ||
| placement="top" | ||
| > | ||
| Automation history | ||
| </Tooltip> | ||
| } | ||
| disabled={!enableAutomationHistory} | ||
| /> | ||
| </Tabs> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.