diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/Icon.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/Icon.tsx index c1a31f38b5364..267257f4f85f3 100644 --- a/js_modules/dagster-ui/packages/ui-components/src/components/Icon.tsx +++ b/js_modules/dagster-ui/packages/ui-components/src/components/Icon.tsx @@ -43,6 +43,7 @@ import close from '../icon-svgs/close.svg'; import code_location from '../icon-svgs/code_location.svg'; import collapse_arrows from '../icon-svgs/collapse_arrows.svg'; import column_lineage from '../icon-svgs/column_lineage.svg'; +import compute_kind from '../icon-svgs/compute_kind.svg'; import concept_book from '../icon-svgs/concept-book.svg'; import console_icon from '../icon-svgs/console.svg'; import content_copy from '../icon-svgs/content_copy.svg'; @@ -153,6 +154,7 @@ import star from '../icon-svgs/star.svg'; import star_outline from '../icon-svgs/star_outline.svg'; import status from '../icon-svgs/status.svg'; import sticky_note from '../icon-svgs/sticky_note.svg'; +import storage_kind from '../icon-svgs/storage_kind.svg'; import sync_alt from '../icon-svgs/sync_alt.svg'; import sync_problem from '../icon-svgs/sync_problem.svg'; import table_rows from '../icon-svgs/table_rows.svg'; @@ -291,6 +293,7 @@ export const Icons = { chevron_left, close, code_location, + compute_kind, console: console_icon, content_copy, collapse_arrows, @@ -354,6 +357,7 @@ export const Icons = { star_outline, status, sticky_note, + storage_kind, sync_alt, sync_problem, table_view, diff --git a/js_modules/dagster-ui/packages/ui-components/src/icon-svgs/compute_kind.svg b/js_modules/dagster-ui/packages/ui-components/src/icon-svgs/compute_kind.svg new file mode 100644 index 0000000000000..2683a4411ddd5 --- /dev/null +++ b/js_modules/dagster-ui/packages/ui-components/src/icon-svgs/compute_kind.svg @@ -0,0 +1,3 @@ + + + diff --git a/js_modules/dagster-ui/packages/ui-components/src/icon-svgs/storage_kind.svg b/js_modules/dagster-ui/packages/ui-components/src/icon-svgs/storage_kind.svg new file mode 100644 index 0000000000000..ad76ee289cb58 --- /dev/null +++ b/js_modules/dagster-ui/packages/ui-components/src/icon-svgs/storage_kind.svg @@ -0,0 +1,3 @@ + + + diff --git a/js_modules/dagster-ui/packages/ui-core/src/graph/KindTags.tsx b/js_modules/dagster-ui/packages/ui-core/src/graph/KindTags.tsx index d60c9c679543c..a9a12c745dea7 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/graph/KindTags.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/graph/KindTags.tsx @@ -2,9 +2,11 @@ import {CaptionMono, Tooltip} from '@dagster-io/ui-components'; import * as React from 'react'; import {OpTags} from './OpTags'; -import {DefinitionTag} from '../graphql/types'; +import {DefinitionTag, buildDefinitionTag} from '../graphql/types'; export const isCanonicalStorageKindTag = (tag: DefinitionTag) => tag.key === 'dagster/storage_kind'; +export const buildStorageKindTag = (storageKind: string): DefinitionTag => + buildDefinitionTag({key: 'dagster/storage_kind', value: storageKind}); export const AssetComputeKindTag = ({ definition, diff --git a/js_modules/dagster-ui/packages/ui-core/src/search/BuildAssetSearchResults.tsx b/js_modules/dagster-ui/packages/ui-core/src/search/BuildAssetSearchResults.tsx index 3493cef293c0b..1373ba53d8a4c 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/search/BuildAssetSearchResults.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/search/BuildAssetSearchResults.tsx @@ -1,5 +1,6 @@ import {COMMON_COLLATOR} from '../app/Util'; import {AssetTableDefinitionFragment} from '../assets/types/AssetTableFragment.types'; +import {isCanonicalStorageKindTag} from '../graph/KindTags'; import {DefinitionTag} from '../graphql/types'; import {buildTagString} from '../ui/tagAsString'; import {buildRepoPathForHuman} from '../workspace/buildRepoAddress'; @@ -17,6 +18,11 @@ type CountByComputeKind = { assetCount: number; }; +type CountByStorageKind = { + storageKind: string; + assetCount: number; +}; + type CountPerTag = { tag: DefinitionTag; assetCount: number; @@ -38,6 +44,7 @@ type AssetCountsResult = { countPerTag: CountPerTag[]; countPerAssetGroup: CountPerGroupName[]; countPerCodeLocation: CountPerCodeLocation[]; + countsByStorageKind: CountByStorageKind[]; }; export type GroupMetadata = { @@ -56,6 +63,7 @@ type AssetDefinitionMetadata = { export function buildAssetCountBySection(assets: AssetDefinitionMetadata[]): AssetCountsResult { const assetCountByOwner: Record = {}; const assetCountByComputeKind: Record = {}; + const assetCountByStorageKind: Record = {}; const assetCountByGroup: Record = {}; const assetCountByCodeLocation: Record = {}; const assetCountByTag: Record = {}; @@ -75,8 +83,12 @@ export function buildAssetCountBySection(assets: AssetDefinitionMetadata[]): Ass } assetDefinition.tags.forEach((tag) => { - const stringifiedTag = JSON.stringify(tag); - assetCountByTag[stringifiedTag] = (assetCountByTag[stringifiedTag] || 0) + 1; + if (isCanonicalStorageKindTag(tag)) { + assetCountByStorageKind[tag.value] = (assetCountByStorageKind[tag.value] || 0) + 1; + } else { + const stringifiedTag = JSON.stringify(tag); + assetCountByTag[stringifiedTag] = (assetCountByTag[stringifiedTag] || 0) + 1; + } }); const groupName = assetDefinition.groupName; @@ -112,6 +124,15 @@ export function buildAssetCountBySection(assets: AssetDefinitionMetadata[]): Ass .sort(({computeKind: computeKindA}, {computeKind: computeKindB}) => COMMON_COLLATOR.compare(computeKindA, computeKindB), ); + const countsByStorageKind = Object.entries(assetCountByStorageKind) + .map(([storageKind, count]) => ({ + storageKind, + assetCount: count, + })) + .sort(({storageKind: storageKindA}, {storageKind: storageKindB}) => + COMMON_COLLATOR.compare(storageKindA, storageKindB), + ); + const countPerTag = Object.entries(assetCountByTag) .map(([tagIdentifier, count]) => ({ assetCount: count, @@ -166,5 +187,6 @@ export function buildAssetCountBySection(assets: AssetDefinitionMetadata[]): Ass countPerTag, countPerAssetGroup, countPerCodeLocation, + countsByStorageKind, }; } diff --git a/js_modules/dagster-ui/packages/ui-core/src/search/SearchResults.tsx b/js_modules/dagster-ui/packages/ui-core/src/search/SearchResults.tsx index ba653be77a92e..8f0e4617fd3e7 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/search/SearchResults.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/search/SearchResults.tsx @@ -47,9 +47,11 @@ const iconForType = (type: SearchResultType | AssetFilterSearchResultType): Icon case AssetFilterSearchResultType.AssetGroup: return 'asset_group'; case AssetFilterSearchResultType.ComputeKind: - return 'tag'; + return 'compute_kind'; case AssetFilterSearchResultType.Tag: return 'tag'; + case AssetFilterSearchResultType.StorageKind: + return 'storage_kind'; default: return 'source'; } @@ -67,6 +69,8 @@ const assetFilterPrefixString = (type: AssetFilterSearchResultType): string => { return 'Owner'; case AssetFilterSearchResultType.AssetGroup: return 'Group'; + case AssetFilterSearchResultType.StorageKind: + return 'Storage kind'; default: return ''; } diff --git a/js_modules/dagster-ui/packages/ui-core/src/search/types.ts b/js_modules/dagster-ui/packages/ui-core/src/search/types.ts index eeb859ffbb05d..2689e50c0eed0 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/search/types.ts +++ b/js_modules/dagster-ui/packages/ui-core/src/search/types.ts @@ -22,6 +22,7 @@ export enum AssetFilterSearchResultType { CodeLocation = 'AssetFilterSearchResultType.CodeLocation', Owner = 'AssetFilterSearchResultType.Owner', AssetGroup = 'AssetFilterSearchResultType.AssetGroup', + StorageKind = 'AssetFilterSearchResultType.StorageKind', } export function isAssetFilterSearchResultType( @@ -31,6 +32,7 @@ export function isAssetFilterSearchResultType( type === AssetFilterSearchResultType.AssetGroup || type === AssetFilterSearchResultType.CodeLocation || type === AssetFilterSearchResultType.ComputeKind || + type === AssetFilterSearchResultType.StorageKind || type === AssetFilterSearchResultType.Owner || type === AssetFilterSearchResultType.Tag ); diff --git a/js_modules/dagster-ui/packages/ui-core/src/search/useGlobalSearch.tsx b/js_modules/dagster-ui/packages/ui-core/src/search/useGlobalSearch.tsx index 735291204c9d4..a31f33d21217c 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/search/useGlobalSearch.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/search/useGlobalSearch.tsx @@ -17,6 +17,7 @@ import {CloudOSSContext} from '../app/CloudOSSContext'; import {PYTHON_ERROR_FRAGMENT} from '../app/PythonErrorFragment'; import {displayNameForAssetKey, isHiddenAssetGroupJob} from '../asset-graph/Utils'; import {assetDetailsPathForKey} from '../assets/assetDetailsPathForKey'; +import {buildStorageKindTag} from '../graph/KindTags'; import {DefinitionTag} from '../graphql/types'; import {buildTagString} from '../ui/tagAsString'; import {buildRepoPathForHuman} from '../workspace/buildRepoAddress'; @@ -34,6 +35,12 @@ export const linkToAssetTableWithComputeKindFilter = (computeKind: string) => { })}`; }; +export const linkToAssetTableWithStorageKindFilter = (storageKind: string) => { + return `/assets?${qs.stringify({ + storageKindTags: JSON.stringify([buildStorageKindTag(storageKind)]), + })}`; +}; + export const linkToAssetTableWithTagFilter = (tag: DefinitionTag) => { return `/assets?${qs.stringify({ tags: JSON.stringify([tag]), @@ -214,6 +221,15 @@ const secondaryDataToSearchResults = ( numResults: assetCount, }), ); + const storageKindResults: SearchResult[] = countsBySection.countsByStorageKind.map( + ({storageKind, assetCount}) => ({ + label: storageKind, + description: '', + type: AssetFilterSearchResultType.StorageKind, + href: linkToAssetTableWithStorageKindFilter(storageKind), + numResults: assetCount, + }), + ); const tagResults: SearchResult[] = countsBySection.countPerTag.map(({tag, assetCount}) => ({ label: buildTagString(tag), @@ -262,6 +278,7 @@ const secondaryDataToSearchResults = ( return [ ...assets, ...computeKindResults, + ...storageKindResults, ...tagResults, ...codeLocationResults, ...ownerResults, diff --git a/js_modules/dagster-ui/packages/ui-core/src/ui/Filters/useComputeKindTagFilter.tsx b/js_modules/dagster-ui/packages/ui-core/src/ui/Filters/useComputeKindTagFilter.tsx index 068ef42eea1fa..19926c58b2345 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/ui/Filters/useComputeKindTagFilter.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/ui/Filters/useComputeKindTagFilter.tsx @@ -17,7 +17,7 @@ export const useComputeKindTagFilter = ({ }) => { return useStaticSetFilter({ name: 'Compute kind', - icon: 'tag', + icon: 'compute_kind', allValues: useMemo( () => allComputeKindTags.map((value) => ({ @@ -29,7 +29,7 @@ export const useComputeKindTagFilter = ({ menuWidth: '300px', renderLabel: ({value}) => ( - + ), diff --git a/js_modules/dagster-ui/packages/ui-core/src/ui/Filters/useStorageKindFilter.tsx b/js_modules/dagster-ui/packages/ui-core/src/ui/Filters/useStorageKindFilter.tsx index 5ff8b3eea06c5..12e19dd80d4ff 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/ui/Filters/useStorageKindFilter.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/ui/Filters/useStorageKindFilter.tsx @@ -20,7 +20,7 @@ export const useStorageKindFilter = ({ const memoizedState = useMemo(() => storageKindTags?.map(buildDefinitionTag), [storageKindTags]); return useStaticSetFilter({ name: 'Storage kind', - icon: 'tag', + icon: 'storage_kind', allValues: useMemo( () => allAssetStorageKindTags.map((value) => ({ @@ -33,7 +33,7 @@ export const useStorageKindFilter = ({ renderLabel: ({value: tag}) => { return ( - + );