yujunjun/datahub
2
0
Fork 0
mirror of https://github.com/datahub-project/datahub.git synced 2025-11-02 03:39:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

improving chart & dashboard entity page rendering (#5864)

Browse Source 
Co-authored-by: John Joyce <john@acryl.io>
This commit is contained in:
Gabe Lyons 2022-09-09 14:26:03 -07:00 committed by GitHub
parent eb16caad95
commit afa58888e4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 24 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
datahub-web-react/src/app/entity/chart/ChartEntity.tsx
View File

@ -1,7 +1,7 @@
import { LineChartOutlined } from '@ant-design/icons';
import * as React from 'react';
import { Chart, EntityType, SearchResult } from '../../../types.generated';
import { Chart, EntityType, LineageDirection, SearchResult } from '../../../types.generated';
import { Entity, EntityCapabilityType, IconStyleType, PreviewType } from '../Entity';
import { ChartPreview } from './preview/ChartPreview';
import { GetChartQuery, useGetChartQuery, useUpdateChartMutation } from '../../../graphql/chart.generated';
@ -12,7 +12,6 @@ import { SidebarOwnerSection } from '../shared/containers/profile/sidebar/Owners
import { GenericEntityProperties } from '../shared/types';
import { EntityProfile } from '../shared/containers/profile/EntityProfile';
import { PropertiesTab } from '../shared/tabs/Properties/PropertiesTab';
import { ChartInputsTab } from '../shared/tabs/Entity/ChartInputsTab';
import { ChartDashboardsTab } from '../shared/tabs/Entity/ChartDashboardsTab';
import { getDataForEntityType } from '../shared/containers/profile/utils';
import { SidebarDomainSection } from '../shared/containers/profile/sidebar/Domain/SidebarDomainSection';
@ -98,6 +97,9 @@ export class ChartEntity implements Entity<Chart> {
{
name: 'Lineage',
component: LineageTab,
properties: {
defaultDirection: LineageDirection.Upstream,
},
display: {
visible: (_, _1) => true,
enabled: (_, chart: GetChartQuery) => {
@ -107,15 +109,6 @@ export class ChartEntity implements Entity<Chart> {
},
},
},
{
name: 'Inputs',
component: ChartInputsTab,
display: {
visible: (_, _1) => true,
enabled: (_, chart: GetChartQuery) => (chart?.chart?.inputs?.total || 0) > 0,
},
},
{
name: 'Dashboards',
component: ChartDashboardsTab,

25
datahub-web-react/src/app/entity/dashboard/DashboardEntity.tsx
View File

@ -6,7 +6,7 @@ import {
useGetDashboardQuery,
useUpdateDashboardMutation,
} from '../../../graphql/dashboard.generated';
import { Dashboard, EntityType, OwnershipType, SearchResult } from '../../../types.generated';
import { Dashboard, EntityType, LineageDirection, OwnershipType, SearchResult } from '../../../types.generated';
import { Entity, EntityCapabilityType, IconStyleType, PreviewType } from '../Entity';
import { EntityProfile } from '../shared/containers/profile/EntityProfile';
import { SidebarOwnerSection } from '../shared/containers/profile/sidebar/Ownership/SidebarOwnerSection';
@ -82,6 +82,16 @@ export class DashboardEntity implements Entity<Dashboard> {
component: DashboardStatsSummarySubHeader,
}}
tabs={[
{
name: 'Charts',
component: DashboardChartsTab,
display: {
visible: (_, dashboard: GetDashboardQuery) =>
(dashboard?.dashboard?.charts?.total || 0) > 0 ||
(dashboard?.dashboard?.datasets?.total || 0) === 0,
enabled: (_, dashboard: GetDashboardQuery) => (dashboard?.dashboard?.charts?.total || 0) > 0,
},
},
{
name: 'Documentation',
component: DocumentationTab,
@ -93,6 +103,9 @@ export class DashboardEntity implements Entity<Dashboard> {
{
name: 'Lineage',
component: LineageTab,
properties: {
defaultDirection: LineageDirection.Upstream,
},
display: {
visible: (_, _1) => true,
enabled: (_, dashboard: GetDashboardQuery) => {
@ -103,16 +116,6 @@ export class DashboardEntity implements Entity<Dashboard> {
},
},
},
{
name: 'Charts',
component: DashboardChartsTab,
display: {
visible: (_, dashboard: GetDashboardQuery) =>
(dashboard?.dashboard?.charts?.total || 0) > 0 ||
(dashboard?.dashboard?.datasets?.total || 0) === 0,
enabled: (_, dashboard: GetDashboardQuery) => (dashboard?.dashboard?.charts?.total || 0) > 0,
},
},
{
name: 'Datasets',
component: DashboardDatasetsTab,

19
datahub-web-react/src/app/entity/shared/tabs/Entity/ChartInputsTab.tsx
View File

@ -1,19 +0,0 @@
import React from 'react';
import { useBaseEntity } from '../../EntityContext';
import { EntityType } from '../../../../../types.generated';
import { EntityList } from './components/EntityList';
import { useEntityRegistry } from '../../../../useEntityRegistry';
export const ChartInputsTab = () => {
const entity = useBaseEntity() as any;
const chart = entity && entity.chart;
const inputs = chart?.inputs?.relationships.map((relationship) => relationship.entity);
const entityRegistry = useEntityRegistry();
const totalInputs = chart?.inputs?.total || 0;
const title = `Found ${totalInputs} input ${
totalInputs === 1
? entityRegistry.getEntityName(EntityType.Dataset)
: entityRegistry.getCollectionName(EntityType.Dataset)
}`;
return <EntityList title={title} type={EntityType.Dataset} entities={inputs || []} />;
};

8
datahub-web-react/src/app/entity/shared/tabs/Lineage/LineageTab.tsx
View File

@ -26,11 +26,15 @@ const StyledButton = styled(Button)<{ isSelected: boolean }>`
`}
`;
export const LineageTab = () => {
export const LineageTab = ({
properties = { defaultDirection: LineageDirection.Downstream },
}: {
properties?: { defaultDirection: LineageDirection };
}) => {
const { urn, entityType } = useEntityData();
const history = useHistory();
const entityRegistry = useEntityRegistry();
const [lineageDirection, setLineageDirection] = useState<string>(LineageDirection.Downstream);
const [lineageDirection, setLineageDirection] = useState<string>(properties.defaultDirection);
const routeToLineage = useCallback(() => {
history.push(getEntityPath(entityType, urn, entityRegistry, true, false));