From e2f652dc631bd45b73907101ac4f89f7d5c0b0f1 Mon Sep 17 00:00:00 2001
From: prha <philrha@gmail.com>
Date: Tue, 20 Aug 2024 17:43:45 -0700
Subject: [PATCH] switch tick filters to contained set rather than every
 permutation

---
 .../ui-core/src/instigation/TickHistory.tsx   | 126 ++++++++++--------
 1 file changed, 71 insertions(+), 55 deletions(-)

diff --git a/js_modules/dagster-ui/packages/ui-core/src/instigation/TickHistory.tsx b/js_modules/dagster-ui/packages/ui-core/src/instigation/TickHistory.tsx
index c1949f0531cd4..b7768959385f0 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/instigation/TickHistory.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/instigation/TickHistory.tsx
@@ -3,15 +3,18 @@ import 'chartjs-adapter-date-fns';
 import {gql, useQuery} from '@apollo/client';
 import {
   Box,
+  Button,
   ButtonLink,
   Caption,
-  Checkbox,
   Colors,
   CursorHistoryControls,
   FontFamily,
   Icon,
   IconWrapper,
+  Menu,
+  MenuItem,
   NonIdealState,
+  Select,
   Spinner,
   Subheading,
   Table,
@@ -55,24 +58,22 @@ Chart.register(zoomPlugin);
 type InstigationTick = HistoryTickFragment;
 
 const PAGE_SIZE = 25;
-interface ShownStatusState {
-  [InstigationTickStatus.SUCCESS]: boolean;
-  [InstigationTickStatus.FAILURE]: boolean;
-  [InstigationTickStatus.STARTED]: boolean;
-  [InstigationTickStatus.SKIPPED]: boolean;
+
+enum TickStatusDisplay {
+  ALL,
+  FAILED,
+  SUCCESS,
 }
 
-const DEFAULT_SHOWN_STATUS_STATE = {
-  [InstigationTickStatus.SUCCESS]: true,
-  [InstigationTickStatus.FAILURE]: true,
-  [InstigationTickStatus.STARTED]: true,
-  [InstigationTickStatus.SKIPPED]: true,
-};
-const STATUS_TEXT_MAP = {
-  [InstigationTickStatus.SUCCESS]: 'Requested',
-  [InstigationTickStatus.FAILURE]: 'Failed',
-  [InstigationTickStatus.STARTED]: 'In progress',
-  [InstigationTickStatus.SKIPPED]: 'Skipped',
+const STATUS_DISPLAY_MAP = {
+  [TickStatusDisplay.ALL]: [
+    InstigationTickStatus.SUCCESS,
+    InstigationTickStatus.FAILURE,
+    InstigationTickStatus.STARTED,
+    InstigationTickStatus.SKIPPED,
+  ],
+  [TickStatusDisplay.FAILED]: [InstigationTickStatus.FAILURE],
+  [TickStatusDisplay.SUCCESS]: [InstigationTickStatus.SUCCESS],
 };
 
 export const TicksTable = ({
@@ -88,33 +89,15 @@ export const TicksTable = ({
   setTimerange?: (range?: [number, number]) => void;
   setParentStatuses?: (statuses?: InstigationTickStatus[]) => void;
 }) => {
-  const [shownStates, setShownStates] = useQueryPersistedState<ShownStatusState>({
-    encode: (states) => {
-      const queryState = {};
-      Object.keys(states).map((state) => {
-        (queryState as any)[state.toLowerCase()] = String(states[state as keyof typeof states]);
-      });
-      return queryState;
-    },
-    decode: (queryState) => {
-      const status: ShownStatusState = {...DEFAULT_SHOWN_STATUS_STATE};
-      Object.keys(DEFAULT_SHOWN_STATUS_STATE).forEach((state) => {
-        if (state.toLowerCase() in queryState) {
-          (status as any)[state] = !(queryState[state.toLowerCase()] === 'false');
-        }
-      });
-
-      return status;
-    },
+  const [tickStatus, setTickStatus] = useQueryPersistedState<TickStatusDisplay>({
+    queryKey: 'status',
+    defaults: {status: TickStatusDisplay.ALL},
   });
 
   const instigationSelector = {...repoAddressToSelector(repoAddress), name};
   const statuses = React.useMemo(
-    () =>
-      Object.keys(shownStates)
-        .filter((status) => shownStates[status as keyof typeof shownStates])
-        .map((status) => status as InstigationTickStatus),
-    [shownStates],
+    () => STATUS_DISPLAY_MAP[tickStatus] || STATUS_DISPLAY_MAP[TickStatusDisplay.ALL],
+    [tickStatus],
   );
 
   const {queryResult, paginationProps} = useCursorPaginatedQuery<
@@ -205,20 +188,10 @@ export const TicksTable = ({
 
   const {instigationType} = data.instigationStateOrError;
 
-  if (!ticks.length && statuses.length === Object.keys(DEFAULT_SHOWN_STATUS_STATE).length) {
+  if (!ticks.length && tickStatus === TickStatusDisplay.ALL) {
     return null;
   }
 
-  const StatusFilter = ({status}: {status: InstigationTickStatus}) => (
-    <Checkbox
-      label={STATUS_TEXT_MAP[status]}
-      checked={shownStates[status]}
-      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-        setShownStates({...shownStates, [status]: e.target.checked});
-      }}
-    />
-  );
-
   return (
     <>
       {logTick ? (
@@ -232,10 +205,7 @@ export const TicksTable = ({
         <Box flex={{direction: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
           {tabs}
           <Box flex={{direction: 'row', gap: 16}}>
-            <StatusFilter status={InstigationTickStatus.STARTED} />
-            <StatusFilter status={InstigationTickStatus.SUCCESS} />
-            <StatusFilter status={InstigationTickStatus.FAILURE} />
-            <StatusFilter status={InstigationTickStatus.SKIPPED} />
+            <StatusFilter status={tickStatus} onChange={setTickStatus} />
           </Box>
         </Box>
       </Box>
@@ -277,6 +247,52 @@ export const TicksTable = ({
   );
 };
 
+const StatusFilter = ({
+  status,
+  onChange,
+}: {
+  status: TickStatusDisplay;
+  onChange: (value: TickStatusDisplay) => void;
+}) => {
+  const items = [
+    {key: TickStatusDisplay.ALL, label: 'All ticks'},
+    {key: TickStatusDisplay.SUCCESS, label: 'Requested'},
+    {key: TickStatusDisplay.FAILED, label: 'Failed'},
+  ];
+  const activeItem = items.find(({key}) => key === status);
+  return (
+    <Select<(typeof items)[0]>
+      popoverProps={{position: 'bottom-right'}}
+      filterable={false}
+      activeItem={activeItem}
+      items={items}
+      itemRenderer={(item, props) => {
+        return (
+          <MenuItem
+            active={props.modifiers.active}
+            onClick={props.handleClick}
+            key={item.key}
+            text={item.label}
+            style={{width: '300px'}}
+          />
+        );
+      }}
+      itemListRenderer={({renderItem, filteredItems}) => {
+        const renderedItems = filteredItems.map(renderItem).filter(Boolean);
+        return <Menu>{renderedItems}</Menu>;
+      }}
+      onItemSelect={(item) => onChange(item.key)}
+    >
+      <Button
+        rightIcon={<Icon name="arrow_drop_down" />}
+        style={{minWidth: '200px', display: 'flex', justifyContent: 'space-between'}}
+      >
+        {activeItem?.label}
+      </Button>
+    </Select>
+  );
+};
+
 export const TickHistoryTimeline = ({
   name,
   repoAddress,