diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/auto-materialization/AutomaterializationEvaluationHistoryTable.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/auto-materialization/AutomaterializationEvaluationHistoryTable.tsx index b3a1df7df7323..b02e70e7eeb90 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/auto-materialization/AutomaterializationEvaluationHistoryTable.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/auto-materialization/AutomaterializationEvaluationHistoryTable.tsx @@ -1,11 +1,14 @@ import { Body2, Box, + Button, ButtonGroup, ButtonLink, - Checkbox, CursorHistoryControls, CursorPaginationProps, + Icon, + MenuItem, + Select, Spinner, Table, } from '@dagster-io/ui-components'; @@ -20,8 +23,8 @@ import {TickStatusTag} from '../../ticks/TickStatusTag'; interface Props { loading: boolean; ticks: AssetDaemonTickFragment[]; - statuses: Set; - setStatuses: (statuses: Set) => void; + tickStatus: AutomaterializationTickStatusDisplay; + setTickStatus: (status: AutomaterializationTickStatusDisplay) => void; setSelectedTick: (tick: AssetDaemonTickFragment | null) => void; setTableView: (view: 'evaluations' | 'runs') => void; paginationProps: CursorPaginationProps; @@ -30,8 +33,8 @@ interface Props { export const AutomaterializationEvaluationHistoryTable = ({ loading, ticks, - statuses, - setStatuses, + tickStatus, + setTickStatus, setSelectedTick, setTableView, paginationProps, @@ -57,28 +60,7 @@ export const AutomaterializationEvaluationHistoryTable = ({ /> {loading && !ticks?.length ? : null} - - - - - - + @@ -142,38 +124,63 @@ export const AutomaterializationEvaluationHistoryTable = ({ ); }; -const StatusLabels = { - [InstigationTickStatus.SKIPPED]: 'None requested', - [InstigationTickStatus.STARTED]: 'Started', - [InstigationTickStatus.FAILURE]: 'Failed', - [InstigationTickStatus.SUCCESS]: 'Requested', +export enum AutomaterializationTickStatusDisplay { + ALL = 'all', + FAILED = 'failed', + SUCCESS = 'success', +} +export const AutomaterializationTickStatusDisplayMappings = { + [AutomaterializationTickStatusDisplay.ALL]: [ + InstigationTickStatus.SUCCESS, + InstigationTickStatus.FAILURE, + InstigationTickStatus.STARTED, + InstigationTickStatus.SKIPPED, + ], + [AutomaterializationTickStatusDisplay.FAILED]: [InstigationTickStatus.FAILURE], + [AutomaterializationTickStatusDisplay.SUCCESS]: [InstigationTickStatus.SUCCESS], }; -function StatusCheckbox({ +const StatusFilterItems = [ + {key: AutomaterializationTickStatusDisplay.ALL, label: 'All ticks'}, + {key: AutomaterializationTickStatusDisplay.SUCCESS, label: 'Requested'}, + {key: AutomaterializationTickStatusDisplay.FAILED, label: 'Failed'}, +]; +const StatusFilter = ({ status, - statuses, - setStatuses, + onChange, }: { - status: InstigationTickStatus; - statuses: Set; - setStatuses: (statuses: Set) => void; -}) { + status: AutomaterializationTickStatusDisplay; + onChange: (value: AutomaterializationTickStatusDisplay) => void; +}) => { + const activeItem = StatusFilterItems.find(({key}) => key === status); return ( - { - const newStatuses = new Set(statuses); - if (statuses.has(status)) { - newStatuses.delete(status); - } else { - newStatuses.add(status); - } - setStatuses(newStatuses); + + popoverProps={{position: 'bottom-right'}} + filterable={false} + activeItem={activeItem} + items={StatusFilterItems} + itemRenderer={(item, props) => { + return ( + + ); }} - /> + onItemSelect={(item) => onChange(item.key)} + > + + ); -} +}; const TableWrapper = styled(Table)` th, diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/auto-materialization/InstanceAutomaterializationEvaluationHistoryTable.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/auto-materialization/InstanceAutomaterializationEvaluationHistoryTable.tsx index 2d094a72d011e..7c666608b3966 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/auto-materialization/InstanceAutomaterializationEvaluationHistoryTable.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/auto-materialization/InstanceAutomaterializationEvaluationHistoryTable.tsx @@ -1,7 +1,11 @@ -import {useCallback, useEffect, useMemo} from 'react'; +import {useEffect, useMemo} from 'react'; import {ASSET_DAEMON_TICKS_QUERY} from './AssetDaemonTicksQuery'; -import {AutomaterializationEvaluationHistoryTable} from './AutomaterializationEvaluationHistoryTable'; +import { + AutomaterializationEvaluationHistoryTable, + AutomaterializationTickStatusDisplay, + AutomaterializationTickStatusDisplayMappings, +} from './AutomaterializationEvaluationHistoryTable'; import { AssetDaemonTickFragment, AssetDaemonTicksQuery, @@ -27,25 +31,17 @@ export const InstanceAutomaterializationEvaluationHistoryTable = ({ setTimerange, setParentStatuses, }: Props) => { - const [statuses, setStatuses] = useQueryPersistedState>({ - queryKey: 'statuses', - decode: useCallback(({statuses}: {statuses?: string}) => { - return new Set( - statuses - ? JSON.parse(statuses) - : [ - InstigationTickStatus.STARTED, - InstigationTickStatus.SUCCESS, - InstigationTickStatus.FAILURE, - InstigationTickStatus.SKIPPED, - ], - ); - }, []), - encode: useCallback((raw: Set) => { - return {statuses: JSON.stringify(Array.from(raw))}; - }, []), + const [tickStatus, setTickStatus] = useQueryPersistedState({ + queryKey: 'status', + defaults: {status: AutomaterializationTickStatusDisplay.ALL}, }); + const statuses = useMemo( + () => + AutomaterializationTickStatusDisplayMappings[tickStatus] || + AutomaterializationTickStatusDisplayMappings[AutomaterializationTickStatusDisplay.ALL], + [tickStatus], + ); const {queryResult, paginationProps} = useCursorPaginatedQuery< AssetDaemonTicksQuery, AssetDaemonTicksQueryVariables @@ -102,9 +98,9 @@ export const InstanceAutomaterializationEvaluationHistoryTable = ({ ticks={queryResult.data?.autoMaterializeTicks || []} paginationProps={paginationProps} setSelectedTick={setSelectedTick} - setStatuses={setStatuses} setTableView={setTableView} - statuses={statuses} + tickStatus={tickStatus} + setTickStatus={setTickStatus} /> ); }; diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/auto-materialization/SensorAutomaterializationEvaluationHistoryTable.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/auto-materialization/SensorAutomaterializationEvaluationHistoryTable.tsx index 00477e713ef62..577a8b6965a93 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/auto-materialization/SensorAutomaterializationEvaluationHistoryTable.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/auto-materialization/SensorAutomaterializationEvaluationHistoryTable.tsx @@ -1,6 +1,10 @@ -import {useCallback, useEffect, useMemo} from 'react'; +import {useEffect, useMemo} from 'react'; -import {AutomaterializationEvaluationHistoryTable} from './AutomaterializationEvaluationHistoryTable'; +import { + AutomaterializationEvaluationHistoryTable, + AutomaterializationTickStatusDisplay, + AutomaterializationTickStatusDisplayMappings, +} from './AutomaterializationEvaluationHistoryTable'; import {AssetDaemonTickFragment} from './types/AssetDaemonTicksQuery.types'; import {useQueryRefreshAtInterval} from '../../app/QueryRefresh'; import {InstigationTickStatus} from '../../graphql/types'; @@ -33,25 +37,17 @@ export const SensorAutomaterializationEvaluationHistoryTable = ({ setTimerange, setParentStatuses, }: Props) => { - const [statuses, setStatuses] = useQueryPersistedState>({ - queryKey: 'statuses', - decode: useCallback(({statuses}: {statuses?: string}) => { - return new Set( - statuses - ? JSON.parse(statuses) - : [ - InstigationTickStatus.STARTED, - InstigationTickStatus.SUCCESS, - InstigationTickStatus.FAILURE, - InstigationTickStatus.SKIPPED, - ], - ); - }, []), - encode: useCallback((raw: Set) => { - return {statuses: JSON.stringify(Array.from(raw))}; - }, []), + const [tickStatus, setTickStatus] = useQueryPersistedState({ + queryKey: 'status', + defaults: {status: AutomaterializationTickStatusDisplay.ALL}, }); + const statuses = useMemo( + () => + AutomaterializationTickStatusDisplayMappings[tickStatus] || + AutomaterializationTickStatusDisplayMappings[AutomaterializationTickStatusDisplay.ALL], + [tickStatus], + ); const {queryResult, paginationProps} = useCursorPaginatedQuery< AssetSensorTicksQuery, AssetSensorTicksQueryVariables @@ -119,9 +115,9 @@ export const SensorAutomaterializationEvaluationHistoryTable = ({ ticks={allTicks || []} paginationProps={paginationProps} setSelectedTick={setSelectedTick} - setStatuses={setStatuses} + tickStatus={tickStatus} + setTickStatus={setTickStatus} setTableView={setTableView} - statuses={statuses} /> ); };