-
Notifications
You must be signed in to change notification settings - Fork 3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(containers): Adding Containers UI (as demo'd in Jan Townhall) (#…
- Loading branch information
1 parent
f20382f
commit 169cd4f
Showing
32 changed files
with
621 additions
and
146 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
20 changes: 20 additions & 0 deletions
20
datahub-web-react/src/app/entity/container/ContainerEntitiesTab.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| import React from 'react'; | ||
| import { useEntityData } from '../shared/EntityContext'; | ||
| import { EmbeddedListSearch } from '../shared/components/styled/search/EmbeddedListSearch'; | ||
|
|
||
| export const ContainerEntitiesTab = () => { | ||
| const { urn } = useEntityData(); | ||
|
|
||
| const fixedFilter = { | ||
| field: 'container', | ||
| value: urn, | ||
| }; | ||
|
|
||
| return ( | ||
| <EmbeddedListSearch | ||
| fixedFilter={fixedFilter} | ||
| emptySearchQuery="*" | ||
| placeholderText="Filter container entities..." | ||
| /> | ||
| ); | ||
| }; |
159 changes: 159 additions & 0 deletions
159
datahub-web-react/src/app/entity/container/ContainerEntity.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,159 @@ | ||
| import * as React from 'react'; | ||
| import { FolderOutlined } from '@ant-design/icons'; | ||
| import { Container, EntityType, SearchResult } from '../../../types.generated'; | ||
| import { Entity, IconStyleType, PreviewType } from '../Entity'; | ||
| import { Preview } from './preview/Preview'; | ||
| import { EntityProfile } from '../shared/containers/profile/EntityProfile'; | ||
| import { DocumentationTab } from '../shared/tabs/Documentation/DocumentationTab'; | ||
| import { SidebarAboutSection } from '../shared/containers/profile/sidebar/SidebarAboutSection'; | ||
| import { SidebarOwnerSection } from '../shared/containers/profile/sidebar/Ownership/SidebarOwnerSection'; | ||
| import { getDataForEntityType } from '../shared/containers/profile/utils'; | ||
| import { useGetContainerQuery } from '../../../graphql/container.generated'; | ||
| import { ContainerEntitiesTab } from './ContainerEntitiesTab'; | ||
| import { SidebarRecommendationsSection } from '../shared/containers/profile/sidebar/Recommendations/SidebarRecommendationsSection'; | ||
| import { SidebarTagsSection } from '../shared/containers/profile/sidebar/SidebarTagsSection'; | ||
| import { PropertiesTab } from '../shared/tabs/Properties/PropertiesTab'; | ||
| import { SidebarDomainSection } from '../shared/containers/profile/sidebar/Domain/SidebarDomainSection'; | ||
|
|
||
| /** | ||
| * Definition of the DataHub Container entity. | ||
| */ | ||
| export class ContainerEntity implements Entity<Container> { | ||
| type: EntityType = EntityType.Container; | ||
|
|
||
| icon = (fontSize: number, styleType: IconStyleType) => { | ||
| if (styleType === IconStyleType.TAB_VIEW) { | ||
| return <FolderOutlined />; | ||
| } | ||
|
|
||
| if (styleType === IconStyleType.HIGHLIGHT) { | ||
| return <FolderOutlined style={{ fontSize, color: '#B37FEB' }} />; | ||
| } | ||
|
|
||
| if (styleType === IconStyleType.SVG) { | ||
| return ( | ||
| <path d="M832 64H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32zm-600 72h560v208H232V136zm560 480H232V408h560v208zm0 272H232V680h560v208zM304 240a40 40 0 1080 0 40 40 0 10-80 0zm0 272a40 40 0 1080 0 40 40 0 10-80 0zm0 272a40 40 0 1080 0 40 40 0 10-80 0z" /> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <FolderOutlined | ||
| style={{ | ||
| fontSize, | ||
| color: '#BFBFBF', | ||
| }} | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| isSearchEnabled = () => true; | ||
|
|
||
| isBrowseEnabled = () => false; | ||
|
|
||
| isLineageEnabled = () => false; | ||
|
|
||
| getAutoCompleteFieldName = () => 'name'; | ||
|
|
||
| getPathName = () => 'container'; | ||
|
|
||
| getEntityName = () => 'Container'; | ||
|
|
||
| getCollectionName = () => 'Containers'; | ||
|
|
||
| renderProfile = (urn: string) => ( | ||
| <EntityProfile | ||
| urn={urn} | ||
| entityType={EntityType.Container} | ||
| useEntityQuery={useGetContainerQuery} | ||
| useUpdateQuery={undefined} | ||
| getOverrideProperties={this.getOverridePropertiesFromEntity} | ||
| tabs={[ | ||
| { | ||
| name: 'Entities', | ||
| component: ContainerEntitiesTab, | ||
| }, | ||
| { | ||
| name: 'Documentation', | ||
| component: DocumentationTab, | ||
| }, | ||
| { | ||
| name: 'Properties', | ||
| component: PropertiesTab, | ||
| }, | ||
| ]} | ||
| sidebarSections={[ | ||
| { | ||
| component: SidebarAboutSection, | ||
| }, | ||
| { | ||
| component: SidebarTagsSection, | ||
| properties: { | ||
| hasTags: true, | ||
| hasTerms: true, | ||
| }, | ||
| }, | ||
| { | ||
| component: SidebarOwnerSection, | ||
| }, | ||
| { | ||
| component: SidebarDomainSection, | ||
| }, | ||
| { | ||
| component: SidebarRecommendationsSection, | ||
| }, | ||
| ]} | ||
| /> | ||
| ); | ||
|
|
||
| renderPreview = (_: PreviewType, data: Container) => { | ||
| return ( | ||
| <Preview | ||
| urn={data.urn} | ||
| name={this.displayName(data)} | ||
| platformName={data.platform.properties?.displayName || data.platform.name} | ||
| platformLogo={data.platform.properties?.logoUrl} | ||
| description={data.properties?.description} | ||
| owners={data.ownership?.owners} | ||
| subTypes={data.subTypes} | ||
| container={data.container} | ||
| entityCount={data.entities?.total} | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| renderSearch = (result: SearchResult) => { | ||
| const data = result.entity as Container; | ||
| return ( | ||
| <Preview | ||
| urn={data.urn} | ||
| name={this.displayName(data)} | ||
| platformName={data.platform.properties?.displayName || data.platform.name} | ||
| platformLogo={data.platform.properties?.logoUrl} | ||
| description={data.properties?.description} | ||
| owners={data.ownership?.owners} | ||
| subTypes={data.subTypes} | ||
| container={data.container} | ||
| entityCount={data.entities?.total} | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| displayName = (data: Container) => { | ||
| return data?.properties?.name || data?.urn; | ||
| }; | ||
|
|
||
| getOverridePropertiesFromEntity = (data: Container) => { | ||
| return { | ||
| name: this.displayName(data), | ||
| entityCount: data.entities?.total, | ||
| }; | ||
| }; | ||
|
|
||
| getGenericEntityProperties = (data: Container) => { | ||
| return getDataForEntityType({ | ||
| data, | ||
| entityType: this.type, | ||
| getOverrideProperties: this.getOverridePropertiesFromEntity, | ||
| }); | ||
| }; | ||
| } |
50 changes: 50 additions & 0 deletions
50
datahub-web-react/src/app/entity/container/preview/Preview.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| import React from 'react'; | ||
| import { Container, EntityType, Owner, SearchInsight, SubTypes } from '../../../../types.generated'; | ||
| import DefaultPreviewCard from '../../../preview/DefaultPreviewCard'; | ||
| import { useEntityRegistry } from '../../../useEntityRegistry'; | ||
| import { IconStyleType } from '../../Entity'; | ||
|
|
||
| export const Preview = ({ | ||
| urn, | ||
| name, | ||
| platformName, | ||
| platformLogo, | ||
| description, | ||
| owners, | ||
| insights, | ||
| subTypes, | ||
| logoComponent, | ||
| container, | ||
| entityCount, | ||
| }: { | ||
| urn: string; | ||
| name: string; | ||
| platformName: string; | ||
| platformLogo?: string | null; | ||
| description?: string | null; | ||
| owners?: Array<Owner> | null; | ||
| insights?: Array<SearchInsight> | null; | ||
| subTypes?: SubTypes | null; | ||
| logoComponent?: JSX.Element; | ||
| container?: Container | null; | ||
| entityCount?: number; | ||
| }): JSX.Element => { | ||
| const entityRegistry = useEntityRegistry(); | ||
| const typeName = (subTypes?.typeNames?.length && subTypes?.typeNames[0]) || 'Container'; | ||
| return ( | ||
| <DefaultPreviewCard | ||
| url={entityRegistry.getEntityUrl(EntityType.Container, urn)} | ||
| name={name || ''} | ||
| platform={platformName} | ||
| description={description || ''} | ||
| type={typeName} | ||
| owners={owners} | ||
| insights={insights} | ||
| logoUrl={platformLogo || undefined} | ||
| logoComponent={logoComponent} | ||
| container={container || undefined} | ||
| typeIcon={entityRegistry.getIcon(EntityType.Container, 12, IconStyleType.ACCENT)} | ||
| entityCount={entityCount} | ||
| /> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.