Adds stale status filtering capability to the asset catalog UI

js_modules/dagster-ui/packages/ui-core/src/assets/AssetTableFragment.tsx

@@ -51,6 +51,7 @@ export const ASSET_TABLE_DEFINITION_FRAGMENT = gql`
         name
       }
     }
+    staleStatus
   }
 `;
 

js_modules/dagster-ui/packages/ui-core/src/assets/__tests__/filterAssetDefinition.test.tsx

@@ -7,6 +7,7 @@ import {
 
 import {
   ChangeReason,
+  StaleStatus,
   buildAssetGroupSelector,
   buildDefinitionTag,
   buildRepository,
@@ -219,6 +220,36 @@ describe('filterAssetDefinition', () => {
     expect(filterAssetDefinition(filters, definition)).toBe(true);
   });
 
+  it('returns false when staleStatus filter does not match definition status', () => {
+    const filters = {
+      staleStatuses: [StaleStatus.FRESH],
+    };
+    const definition = {
+      staleStatus: StaleStatus.STALE,
+    };
+    expect(filterAssetDefinition(filters, definition)).toBe(false);
+  });
+
+  it('returns true when staleStatus filter matches definition status', () => {
+    const filters = {
+      staleStatuses: [StaleStatus.STALE, StaleStatus.FRESH],
+    };
+    const definition = {
+      staleStatus: StaleStatus.STALE,
+    };
+    expect(filterAssetDefinition(filters, definition)).toBe(true);
+  });
+
+  it('filters using selectAllFilter: staleStatuses', () => {
+    const filters: Partial<AssetFilterType> = {
+      selectAllFilters: ['staleStatuses'],
+    };
+    const definition = {
+      staleStatus: StaleStatus.FRESH,
+    };
+    expect(filterAssetDefinition(filters, definition)).toBe(true);
+  });
+
   (
     ['changedInBranch', 'kinds', 'groups', 'owners', 'codeLocations', 'tags'] as Array<
       keyof AssetFilterBaseType

js_modules/dagster-ui/packages/ui-core/src/assets/useAssetCatalogFiltering.oss.tsx

@@ -7,7 +7,7 @@ import {
 
 import {useAssetGroupSelectorsForAssets} from './AssetGroupSuggest';
 import {CloudOSSContext} from '../app/CloudOSSContext';
-import {ChangeReason} from '../graphql/types';
+import {ChangeReason, StaleStatus} from '../graphql/types';
 import {useFilters} from '../ui/BaseFilters';
 import {FilterObject} from '../ui/BaseFilters/useFilter';
 import {useAssetGroupFilter} from '../ui/Filters/useAssetGroupFilter';
@@ -16,6 +16,7 @@ import {useChangedFilter} from '../ui/Filters/useChangedFilter';
 import {useCodeLocationFilter} from '../ui/Filters/useCodeLocationFilter';
 import {useDefinitionTagFilter, useTagsForAssets} from '../ui/Filters/useDefinitionTagFilter';
 import {useAssetKindsForAssets, useKindFilter} from '../ui/Filters/useKindFilter';
+import {useStaleStatusFilter} from '../ui/Filters/useStaleStatusFilter';
 import {WorkspaceContext} from '../workspace/WorkspaceContext/WorkspaceContext';
 import {buildRepoAddress} from '../workspace/buildRepoAddress';
 
@@ -48,6 +49,7 @@ export function useAssetCatalogFiltering<
     setGroups,
     setOwners,
     setCodeLocations,
+    setStaleStatuses,
     setSelectAllFilters,
   } = useAssetDefinitionFilterState({isEnabled});
 
@@ -105,8 +107,24 @@ export function useAssetCatalogFiltering<
     setCodeLocations,
   });
 
+  const allStaleStatuses = Object.values(StaleStatus);
+
+  const staleStatusFilter = useStaleStatusFilter({
+    allStaleStatuses,
+    staleStatuses: filters.selectAllFilters?.includes('staleStatuses')
+      ? Object.values(StaleStatus)
+      : filters.staleStatuses,
+    setStaleStatuses,
+  });
+
   const uiFilters = React.useMemo(() => {
-    const uiFilters: FilterObject[] = [groupsFilter, kindFilter, ownersFilter, tagsFilter];
+    const uiFilters: FilterObject[] = [
+      groupsFilter,
+      kindFilter,
+      ownersFilter,
+      tagsFilter,
+      staleStatusFilter,
+    ];
     if (isBranchDeployment) {
       uiFilters.push(changedInBranchFilter);
     }
@@ -123,6 +141,7 @@ export function useAssetCatalogFiltering<
     isBranchDeployment,
     ownersFilter,
     reposFilter,
+    staleStatusFilter,
     tagsFilter,
   ]);
   const components = useFilters({filters: uiFilters});
@@ -156,6 +175,7 @@ export function useAssetCatalogFiltering<
       ['groups', filters.groups, allAssetGroupOptions] as const,
       ['changedInBranch', filters.changedInBranch, Object.values(ChangeReason)] as const,
       ['codeLocations', filters.codeLocations, allRepos] as const,
+      ['staleStatuses', filters.staleStatuses, Object.values(StaleStatus)] as const,
     ].forEach(([key, activeItems, allItems]) => {
       if (!allItems.length) {
         return;
@@ -181,6 +201,7 @@ export function useAssetCatalogFiltering<
     allAssetOwners,
     allKinds,
     allRepos,
+    allStaleStatuses,
     didWaitAfterLoading,
     filters,
     loading,
@@ -203,6 +224,7 @@ export function useAssetCatalogFiltering<
     filteredAssetsLoading: false,
     kindFilter,
     groupsFilter,
+    staleStatusFilter,
     renderFilterButton: components.renderButton,
   };
 }

js_modules/dagster-ui/packages/ui-core/src/assets/useAssetDefinitionFilterState.oss.tsx

@@ -8,6 +8,7 @@ import {
   AssetOwner,
   ChangeReason,
   DefinitionTag,
+  StaleStatus,
 } from '../graphql/types';
 import {useQueryPersistedState} from '../hooks/useQueryPersistedState';
 import {doesFilterArrayMatchValueArray} from '../ui/Filters/doesFilterArrayMatchValueArray';
@@ -21,7 +22,10 @@ type Nullable<T> = {
 
 export type FilterableAssetDefinition = Nullable<
   Partial<
-    Pick<AssetNode, 'changedReasons' | 'owners' | 'groupName' | 'tags' | 'kinds'> & {
+    Pick<
+      AssetNode,
+      'changedReasons' | 'owners' | 'groupName' | 'tags' | 'kinds' | 'staleStatus'
+    > & {
       repository: Pick<AssetNode['repository'], 'name'> & {
         location: Pick<AssetNode['repository']['location'], 'name'>;
       };
@@ -36,6 +40,7 @@ export type AssetFilterBaseType = {
   owners: AssetOwner[];
   tags: Omit<DefinitionTag, '__typename'>[];
   codeLocations: RepoAddress[];
+  staleStatuses: StaleStatus[];
 };
 
 export type AssetFilterType = AssetFilterBaseType & {
@@ -45,13 +50,23 @@ export type AssetFilterType = AssetFilterBaseType & {
 export const useAssetDefinitionFilterState = ({isEnabled = true}: {isEnabled?: boolean}) => {
   const [filters, setFilters] = useQueryPersistedState<AssetFilterType>({
     encode: isEnabled
-      ? ({groups, kinds, changedInBranch, owners, tags, codeLocations, selectAllFilters}) => ({
+      ? ({
+          groups,
+          kinds,
+          changedInBranch,
+          owners,
+          tags,
+          codeLocations,
+          staleStatuses,
+          selectAllFilters,
+        }) => ({
           groups: groups?.length ? JSON.stringify(groups) : undefined,
           kinds: kinds?.length ? JSON.stringify(kinds) : undefined,
           changedInBranch: changedInBranch?.length ? JSON.stringify(changedInBranch) : undefined,
           owners: owners?.length ? JSON.stringify(owners) : undefined,
           tags: tags?.length ? JSON.stringify(tags) : undefined,
           codeLocations: codeLocations?.length ? JSON.stringify(codeLocations) : undefined,
+          staleStatuses: staleStatuses?.length ? JSON.stringify(staleStatuses) : undefined,
           selectAllFilters: selectAllFilters?.length ? JSON.stringify(selectAllFilters) : undefined,
         })
       : () => ({}),
@@ -67,6 +82,7 @@ export const useAssetDefinitionFilterState = ({isEnabled = true}: {isEnabled?: b
               buildRepoAddress(repo.name, repo.location),
             )
           : [],
+      staleStatuses: qs.staleStatuses && isEnabled ? JSON.parse(qs.staleStatuses) : [],
       selectAllFilters: qs.selectAllFilters ? JSON.parse(qs.selectAllFilters) : [],
     }),
   });
@@ -83,6 +99,7 @@ export const useAssetDefinitionFilterState = ({isEnabled = true}: {isEnabled?: b
     setOwners,
     setAssetTags,
     setCodeLocations,
+    setStaleStatuses,
     setSelectAllFilters,
   } = useMemo(() => {
     function makeSetter<T extends keyof AssetFilterType>(field: T) {
@@ -100,6 +117,7 @@ export const useAssetDefinitionFilterState = ({isEnabled = true}: {isEnabled?: b
       setOwners: makeSetter('owners'),
       setAssetTags: makeSetter('tags'),
       setCodeLocations: makeSetter('codeLocations'),
+      setStaleStatuses: makeSetter('staleStatuses'),
       setSelectAllFilters: makeSetter('selectAllFilters'),
     };
   }, [setFilters]);
@@ -114,6 +132,7 @@ export const useAssetDefinitionFilterState = ({isEnabled = true}: {isEnabled?: b
     setOwners,
     setAssetTags,
     setCodeLocations,
+    setStaleStatuses,
     setSelectAllFilters,
   };
 };
@@ -234,6 +253,17 @@ export function filterAssetDefinition(
     }
   }
 
+  const isAllStaleStatusSelected = filters.selectAllFilters?.includes('staleStatuses');
+  if (isAllStaleStatusSelected) {
+    if (!definition?.staleStatus?.length) {
+      return false;
+    }
+  } else if (filters.staleStatuses?.length) {
+    if (!definition?.staleStatus || !filters.staleStatuses.includes(definition.staleStatus)) {
+      return false;
+    }
+  }
+
   return true;
 }
 
@@ -246,6 +276,7 @@ const KEYS: Record<keyof AssetFilterType | 'asset-selection', '1'> = {
   codeLocations: '1',
   'asset-selection': '1',
   selectAllFilters: '1',
+  staleStatuses: '1',
 };
 export function getAssetFilterStateQueryString(search: string = location.search) {
   const params = new URLSearchParams(search);

js_modules/dagster-ui/packages/ui-core/src/ui/Filters/useStaleStatusFilter.tsx

@@ -0,0 +1,76 @@
+import {Box, Colors} from '@dagster-io/ui-components';
+import {useMemo} from 'react';
+
+import {assertUnreachable} from '../../app/Util';
+import {StaleStatus} from '../../graphql/types';
+import {StaticBaseConfig, useStaticSetFilter} from '../BaseFilters/useStaticSetFilter';
+
+const emptyArray: any[] = [];
+
+export const useStaleStatusFilter = ({
+  allStaleStatuses = Object.values(StaleStatus),
+  staleStatuses,
+  setStaleStatuses,
+}: {
+  allStaleStatuses?: StaleStatus[];
+  staleStatuses?: null | StaleStatus[];
+  setStaleStatuses?: null | ((s: StaleStatus[]) => void);
+}) => {
+  return useStaticSetFilter<StaleStatus>({
+    ...BaseConfig,
+    allValues: useMemo(
+      () =>
+        allStaleStatuses.map((value) => ({
+          value,
+          match: [getStatusString(value)],
+        })),
+      [allStaleStatuses],
+    ),
+    menuWidth: '300px',
+    state: staleStatuses ?? emptyArray,
+    onStateChanged: (values) => {
+      setStaleStatuses?.(Array.from(values));
+    },
+    canSelectAll: true,
+  });
+};
+
+function getStatusString(status: StaleStatus): string {
+  switch (status) {
+    case StaleStatus.FRESH:
+      return 'Fresh';
+    case StaleStatus.STALE:
+      return 'Stale';
+    case StaleStatus.MISSING:
+      return 'Missing';
+    default:
+      return assertUnreachable(status);
+  }
+}
+
+function getStatusColor(status: StaleStatus): string {
+  switch (status) {
+    case StaleStatus.FRESH:
+      return Colors.accentGreen();
+    case StaleStatus.STALE:
+      return Colors.accentYellow();
+    case StaleStatus.MISSING:
+      return Colors.accentGray();
+    default:
+      return assertUnreachable(status);
+  }
+}
+
+export const BaseConfig: StaticBaseConfig<StaleStatus> = {
+  name: 'Status',
+  icon: 'status',
+  renderLabel: ({value}) => (
+    <Box flex={{direction: 'row', gap: 4, alignItems: 'center'}}>
+      <span style={{color: getStatusColor(value)}}>●</span>
+      {getStatusString(value)}
+    </Box>
+  ),
+  getStringValue: (status) => getStatusString(status),
+  getKey: getStatusString,
+  matchType: 'any-of',
+};

js_modules/dagster-ui/packages/ui-core/src/ui/Filters/util.ts

@@ -4,7 +4,8 @@ import {BaseConfig as ChangedFilterBaseConfig} from './useChangedFilter';
 import {BaseConfig as CodeLocationFilterBaseConfig} from './useCodeLocationFilter';
 import {BaseConfig as AssetTagFilterBaseConfig, Tag} from './useDefinitionTagFilter';
 import {BaseConfig as KindFilterBaseConfig} from './useKindFilter';
-import {AssetGroupSelector, AssetOwner, ChangeReason} from '../../graphql/types';
+import {BaseConfig as StaleStatusFilterBaseConfig} from './useStaleStatusFilter';
+import {AssetGroupSelector, AssetOwner, ChangeReason, StaleStatus} from '../../graphql/types';
 import {RepoAddress} from '../../workspace/types';
 import {StaticBaseConfig} from '../BaseFilters/useStaticSetFilter';
 
@@ -15,11 +16,13 @@ export const STATIC_FILTER_CONFIGS: {
   owners: StaticBaseConfig<AssetOwner>;
   tags: StaticBaseConfig<Tag>;
   codeLocations: StaticBaseConfig<RepoAddress>;
+  staleStatuses: StaticBaseConfig<StaleStatus>;
 } = {
   groups: AssetGroupsFilterBaseConfig,
   kinds: KindFilterBaseConfig,
   changedInBranch: ChangedFilterBaseConfig,
   owners: AssetOwnerFilterBaseConfig,
   tags: AssetTagFilterBaseConfig,
   codeLocations: CodeLocationFilterBaseConfig,
+  staleStatuses: StaleStatusFilterBaseConfig,
 };