update automaterialization views to use simplified tick filter (#24444)

## Summary & Motivation
This restricts the automaterialization tick filter component to the
statuses that we know will be performant.

## How I Tested These Changes
Loaded history page, used filter

## Changelog

- [ ] `NEW` Changed the automaterialization tick history pages to use a
streamlined set of tick filter options

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<InstigationTickStatus>;
-  setStatuses: (statuses: Set<InstigationTickStatus>) => 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 ? <Spinner purpose="body-text" /> : null}
         </Box>
-        <Box flex={{direction: 'row', gap: 12, alignItems: 'center'}}>
-          <StatusCheckbox
-            statuses={statuses}
-            setStatuses={setStatuses}
-            status={InstigationTickStatus.STARTED}
-          />
-          <StatusCheckbox
-            statuses={statuses}
-            setStatuses={setStatuses}
-            status={InstigationTickStatus.SUCCESS}
-          />
-          <StatusCheckbox
-            statuses={statuses}
-            setStatuses={setStatuses}
-            status={InstigationTickStatus.FAILURE}
-          />
-          <StatusCheckbox
-            statuses={statuses}
-            setStatuses={setStatuses}
-            status={InstigationTickStatus.SKIPPED}
-          />
-        </Box>
+        <StatusFilter status={tickStatus} onChange={setTickStatus} />
       </Box>
       <TableWrapper>
         <thead>
@@ -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<InstigationTickStatus>;
-  setStatuses: (statuses: Set<InstigationTickStatus>) => void;
-}) {
+  status: AutomaterializationTickStatusDisplay;
+  onChange: (value: AutomaterializationTickStatusDisplay) => void;
+}) => {
+  const activeItem = StatusFilterItems.find(({key}) => key === status);
   return (
-    <Checkbox
-      label={StatusLabels[status]}
-      checked={statuses.has(status)}
-      onChange={() => {
-        const newStatuses = new Set(statuses);
-        if (statuses.has(status)) {
-          newStatuses.delete(status);
-        } else {
-          newStatuses.add(status);
-        }
-        setStatuses(newStatuses);
+    <Select<(typeof StatusFilterItems)[0]>
+      popoverProps={{position: 'bottom-right'}}
+      filterable={false}
+      activeItem={activeItem}
+      items={StatusFilterItems}
+      itemRenderer={(item, props) => {
+        return (
+          <MenuItem
+            active={props.modifiers.active}
+            onClick={props.handleClick}
+            key={item.key}
+            text={item.label}
+            style={{width: '300px'}}
+          />
+        );
       }}
-    />
+      onItemSelect={(item) => onChange(item.key)}
+    >
+      <Button
+        rightIcon={<Icon name="arrow_drop_down" />}
+        style={{minWidth: '200px', display: 'flex', justifyContent: 'space-between'}}
+      >
+        {activeItem?.label}
+      </Button>
+    </Select>
   );
-}
+};
 
 const TableWrapper = styled(Table)`
   th,

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<Set<InstigationTickStatus>>({
-    queryKey: 'statuses',
-    decode: useCallback(({statuses}: {statuses?: string}) => {
-      return new Set<InstigationTickStatus>(
-        statuses
-          ? JSON.parse(statuses)
-          : [
-              InstigationTickStatus.STARTED,
-              InstigationTickStatus.SUCCESS,
-              InstigationTickStatus.FAILURE,
-              InstigationTickStatus.SKIPPED,
-            ],
-      );
-    }, []),
-    encode: useCallback((raw: Set<InstigationTickStatus>) => {
-      return {statuses: JSON.stringify(Array.from(raw))};
-    }, []),
+  const [tickStatus, setTickStatus] = useQueryPersistedState<AutomaterializationTickStatusDisplay>({
+    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}
     />
   );
 };

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<Set<InstigationTickStatus>>({
-    queryKey: 'statuses',
-    decode: useCallback(({statuses}: {statuses?: string}) => {
-      return new Set<InstigationTickStatus>(
-        statuses
-          ? JSON.parse(statuses)
-          : [
-              InstigationTickStatus.STARTED,
-              InstigationTickStatus.SUCCESS,
-              InstigationTickStatus.FAILURE,
-              InstigationTickStatus.SKIPPED,
-            ],
-      );
-    }, []),
-    encode: useCallback((raw: Set<InstigationTickStatus>) => {
-      return {statuses: JSON.stringify(Array.from(raw))};
-    }, []),
+  const [tickStatus, setTickStatus] = useQueryPersistedState<AutomaterializationTickStatusDisplay>({
+    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}
     />
   );
 };