Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(react): add dataJob, dataFlow entities and preview, profile pages and graphql mock & refactor with fragments #2419

Merged
merged 10 commits into from
Apr 21, 2021
Merged

feat(react): add dataJob, dataFlow entities and preview, profile pages and graphql mock & refactor with fragments #2419

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
1b5596e
feat(react): add dataflow, datajob entity class, profile, preview
topwebtek7 Apr 7, 2021
bb2ccc4
feat(react): add datajob, dataflow preview, profile pages
topwebtek7 Apr 7, 2021
3a2da3b
feat(react): update dataflow, datajob entities, cleanup
topwebtek7 Apr 7, 2021
836c3e2
feat(react): update datajob, dataflow entities according to default e…
topwebtek7 Apr 15, 2021
d925569
feat(react): add dataflow in browseresult graphql
topwebtek7 Apr 16, 2021
a874028
feat(react): update graphql search queries, add datajob, dataflow in …
topwebtek7 Apr 16, 2021
432d882
feat(react): refactor graphql queries with fragment, update mocks, fi…
topwebtek7 Apr 16, 2021
9fed441
feat(react): set default svg icons for datajob, dataflow
topwebtek7 Apr 16, 2021
1445636
feat(react): add tests for datajob, dataflow profile page, update dat…
topwebtek7 Apr 19, 2021
78221ce
feat(react): fix dataset test issue
topwebtek7 Apr 19, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions datahub-web-react/datahub-frontend.graphql
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -241,6 +241,8 @@ type CorpUser {
enum EntityType {
DATASET
USER
DATA_FLOW
DATA_JOB
}

# Search Input
Expand Down
13 changes: 12 additions & 1 deletion datahub-web-react/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ import { DashboardEntity } from './app/entity/dashboard/DashboardEntity';
import { ChartEntity } from './app/entity/chart/ChartEntity';
import { UserEntity } from './app/entity/user/User';
import { DatasetEntity } from './app/entity/dataset/DatasetEntity';
import { DataFlowEntity } from './app/entity/dataFlow/DataFlowEntity';
import { DataJobEntity } from './app/entity/dataJob/DataJobEntity';
import { TagEntity } from './app/entity/tag/Tag';
import { EntityRegistryContext } from './entityRegistryContext';
import { Theme } from './conf/theme/types';
Expand Down Expand Up @@ -78,6 +80,8 @@ const App: React.VFC = () => {
register.register(new ChartEntity());
register.register(new UserEntity());
register.register(new TagEntity());
register.register(new DataFlowEntity());
register.register(new DataJobEntity());
return register;
}, []);

Expand All @@ -87,7 +91,14 @@ const App: React.VFC = () => {
<EntityRegistryContext.Provider value={entityRegistry}>
{/* Temporary: For local testing during development. */}
{MOCK_MODE ? (
<MockedProvider mocks={mocks} addTypename={false}>
<MockedProvider
mocks={mocks}
addTypename={false}
defaultOptions={{
watchQuery: { fetchPolicy: 'no-cache' },
query: { fetchPolicy: 'no-cache' },
}}
>
<Routes />
</MockedProvider>
) : (
Expand Down
223 changes: 222 additions & 1 deletion datahub-web-react/src/Mocks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,22 @@
import { GetDatasetDocument, UpdateDatasetDocument } from './graphql/dataset.generated';
import { GetDataFlowDocument } from './graphql/dataFlow.generated';
import { GetDataJobDocument } from './graphql/dataJob.generated';
import { GetBrowsePathsDocument, GetBrowseResultsDocument } from './graphql/browse.generated';
import {
GetAutoCompleteResultsDocument,
GetSearchResultsDocument,
GetSearchResultsQuery,
} from './graphql/search.generated';
import { GetUserDocument } from './graphql/user.generated';
import { Dataset, DatasetLineageType, EntityType, PlatformType, RelatedDataset } from './types.generated';
import {
Dataset,
DataFlow,
DataJob,
DatasetLineageType,
EntityType,
PlatformType,
RelatedDataset,
} from './types.generated';
import { GetTagDocument } from './graphql/tag.generated';

const user1 = {
Expand Down Expand Up @@ -569,6 +579,78 @@ const sampleTag = {
},
};

export const dataFlow1 = {
__typename: 'DataFlow',
urn: 'urn:li:dataFlow:1',
type: EntityType.DataFlow,
orchestrator: 'Airflow',
flowId: 'flowId1',
cluster: 'cluster1',
info: {
__typename: 'DataFlowInfo',
name: 'DataFlowInfoName',
description: 'DataFlowInfo1 Description',
project: 'DataFlowInfo1 project',
},
ownership: {
owners: [
{
owner: {
...user1,
},
type: 'DATAOWNER',
},
{
owner: {
...user2,
},
type: 'DELEGATE',
},
],
lastModified: {
time: 0,
},
},
} as DataFlow;

export const dataJob1 = {
__typename: 'DataJob',
urn: 'urn:li:dataJob:1',
type: EntityType.DataJob,
dataFlow: dataFlow1,
jobId: 'jobId1',
ownership: {
__typename: 'Ownership',
owners: [
{
owner: {
...user1,
},
type: 'DATAOWNER',
},
{
owner: {
...user2,
},
type: 'DELEGATE',
},
],
lastModified: {
time: 0,
},
},
info: {
__typename: 'DataJobInfo',
name: 'DataJobInfoName',
description: 'DataJobInfo1 Description',
},
inputOutput: {
__typename: 'DataJobInputOutput',
inputDatasets: [dataset3],
outputDatasets: [dataset3],
},
} as DataJob;

/*
Define mock data to be returned by Apollo MockProvider.
*/
Expand Down Expand Up @@ -981,6 +1063,9 @@ export const mocks = [
type: 'DATAOWNER',
},
],
lastModified: {
time: 0,
},
},
},
},
Expand Down Expand Up @@ -1146,6 +1231,142 @@ export const mocks = [
} as GetSearchResultsQuery,
},
},
{
request: {
query: GetSearchResultsDocument,
variables: {
input: {
type: 'DATA_FLOW',
query: 'Sample',
start: 0,
count: 10,
filters: [],
},
},
},
result: {
data: {
__typename: 'Query',
search: {
__typename: 'SearchResults',
start: 0,
count: 1,
total: 1,
searchResults: [
{
entity: {
__typename: 'DataFlow',
...dataFlow1,
},
matchedFields: [],
},
],
facets: [
{
field: 'origin',
aggregations: [
{
value: 'PROD',
count: 3,
},
],
},
{
field: 'platform',
aggregations: [
{ value: 'hdfs', count: 1 },
{ value: 'mysql', count: 1 },
{ value: 'kafka', count: 1 },
],
},
],
},
} as GetSearchResultsQuery,
},
},
{
request: {
query: GetDataFlowDocument,
variables: {
urn: 'urn:li:dataFlow:1',
},
},
result: {
data: {
dataFlow: {
...dataFlow1,
},
},
},
},
{
request: {
query: GetSearchResultsDocument,
variables: {
input: {
type: 'DATA_JOB',
query: 'Sample',
start: 0,
count: 10,
filters: [],
},
},
},
result: {
data: {
__typename: 'Query',
search: {
__typename: 'SearchResults',
start: 0,
count: 1,
total: 1,
searchResults: [
{
entity: {
__typename: 'DataJob',
...dataJob1,
},
matchedFields: [],
},
],
facets: [
{
field: 'origin',
aggregations: [
{
value: 'PROD',
count: 3,
},
],
},
{
field: 'platform',
aggregations: [
{ value: 'hdfs', count: 1 },
{ value: 'mysql', count: 1 },
{ value: 'kafka', count: 1 },
],
},
],
},
} as GetSearchResultsQuery,
},
},
{
request: {
query: GetDataJobDocument,
variables: {
urn: 'urn:li:dataJob:1',
},
},
result: {
data: {
dataJob: {
...dataJob1,
},
},
},
},
{
request: {
query: GetTagDocument,
Expand Down
78 changes: 78 additions & 0 deletions datahub-web-react/src/app/entity/dataFlow/DataFlowEntity.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
import * as React from 'react';
import { DatabaseFilled, DatabaseOutlined } from '@ant-design/icons';
import { DataFlow, EntityType, SearchResult } from '../../../types.generated';
import { Preview } from './preview/Preview';
import { DataFlowProfile } from './profile/DataFlowProfile';
import { Entity, IconStyleType, PreviewType } from '../Entity';

/**
* Definition of the DataHub DataFlow entity.
*/
export class DataFlowEntity implements Entity<DataFlow> {
type: EntityType = EntityType.DataFlow;

// TODO: add flow specific icons
icon = (fontSize: number, styleType: IconStyleType) => {
if (styleType === IconStyleType.TAB_VIEW) {
return <DatabaseOutlined style={{ fontSize }} />;
}

if (styleType === IconStyleType.HIGHLIGHT) {
return <DatabaseFilled style={{ fontSize, color: '#B37FEB' }} />;
}

if (styleType === IconStyleType.SVG) {
return (
<path d="M342 88H120c-17.7 0-32 14.3-32 32v224c0 8.8 7.2 16 16 16h48c8.8 0 16-7.2 16-16V168h174c8.8 0 16-7.2 16-16v-48c0-8.8-7.2-16-16-16zm578 576h-48c-8.8 0-16 7.2-16 16v176H682c-8.8 0-16 7.2-16 16v48c0 8.8 7.2 16 16 16h222c17.7 0 32-14.3 32-32V680c0-8.8-7.2-16-16-16zM342 856H168V680c0-8.8-7.2-16-16-16h-48c-8.8 0-16 7.2-16 16v224c0 17.7 14.3 32 32 32h222c8.8 0 16-7.2 16-16v-48c0-8.8-7.2-16-16-16zM904 88H682c-8.8 0-16 7.2-16 16v48c0 8.8 7.2 16 16 16h174v176c0 8.8 7.2 16 16 16h48c8.8 0 16-7.2 16-16V120c0-17.7-14.3-32-32-32z" />
);
}

return (
<DatabaseFilled
style={{
fontSize,
color: '#BFBFBF',
}}
/>
);
};

isSearchEnabled = () => false;

isBrowseEnabled = () => false;

isLineageEnabled = () => false;

getAutoCompleteFieldName = () => 'name';

getPathName = () => 'dataflow';

getCollectionName = () => 'DataFlows';

renderProfile = (urn: string) => <DataFlowProfile urn={urn} />;

renderPreview = (_: PreviewType, data: DataFlow) => {
return (
<Preview
urn={data.urn}
name={data.info?.name || ''}
description={data.info?.description || ''}
platformName={data.info?.project || ''}
owners={data.ownership?.owners}
/>
);
};

renderSearch = (result: SearchResult) => {
const data = result.entity as DataFlow;
return (
<Preview
urn={data.urn}
name={data.info?.name || ''}
description={data.info?.description || ''}
platformName={data.info?.project || ''}
owners={data.ownership?.owners}
/>
);
};
}
Loading