yujunjun/datahub
2
0
Fork 0
mirror of https://github.com/datahub-project/datahub.git synced 2025-12-28 18:38:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(react): add dashboards tab in charts entity (#2458)

Browse Source
This commit is contained in:
Brian 2021-04-26 17:16:23 -07:00 committed by GitHub
parent 83fdc6417f
commit fbb7f3c481
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 48 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
datahub-web-react/src/app/entity/chart/profile/ChartDashboards.tsx Normal file
View File

@ -0,0 +1,39 @@
import { List, Typography } from 'antd';
import React from 'react';
import styled from 'styled-components';
import { DownstreamEntityRelationships, EntityType } from '../../../../types.generated';
import { useEntityRegistry } from '../../../useEntityRegistry';
import { PreviewType } from '../../Entity';
const DashboardList = styled(List)`
margin-top: 12px;
padding: 16px 32px;
`;
const DashboardItem = styled(List.Item)`
padding-top: 20px;
`;
export type Props = {
downstreamLineage?: DownstreamEntityRelationships | null;
};
export default function DashboardCharts({ downstreamLineage }: Props) {
const entityRegistry = useEntityRegistry();
const downstreamEntities =
downstreamLineage?.entities
?.map((entityRelationship) => entityRelationship?.entity)
.filter((item) => item?.type === EntityType.Dashboard) || [];
return (
<DashboardList
bordered
dataSource={downstreamEntities}
header={<Typography.Title level={3}>Dashboards</Typography.Title>}
renderItem={(item) => (
<DashboardItem>
{entityRegistry.renderPreview(EntityType.Dashboard, PreviewType.PREVIEW, item)}
</DashboardItem>
)}
/>
);
}

11
datahub-web-react/src/app/entity/chart/profile/ChartProfile.tsx
View File

@ -6,6 +6,7 @@ import { EntityProfile } from '../../../shared/EntityProfile';
import ChartHeader from './ChartHeader';
import { GetChartDocument, useGetChartQuery, useUpdateChartMutation } from '../../../../graphql/chart.generated';
import ChartSources from './ChartSources';
import ChartDashboards from './ChartDashboards';
import { Message } from '../../../shared/Message';
import TagGroup from '../../../shared/tags/TagGroup';
import { Properties as PropertiesView } from '../../shared/Properties';
@ -14,9 +15,10 @@ export enum TabType {
Ownership = 'Ownership',
Sources = 'Sources',
Properties = 'Properties',
Dashboards = 'Dashboards',
}
const ENABLED_TAB_TYPES = [TabType.Ownership, TabType.Sources, TabType.Properties];
const ENABLED_TAB_TYPES = [TabType.Ownership, TabType.Sources, TabType.Properties, TabType.Dashboards];
export default function ChartProfile({ urn }: { urn: string }) {
const { loading, error, data } = useGetChartQuery({ variables: { urn } });
@ -50,8 +52,13 @@ export default function ChartProfile({ urn }: { urn: string }) {
/>
);
const getTabs = ({ ownership, info }: Chart) => {
const getTabs = ({ ownership, info, downstreamLineage }: Chart) => {
return [
{
name: TabType.Dashboards,
path: TabType.Dashboards.toLowerCase(),
content: <ChartDashboards downstreamLineage={downstreamLineage} />,
},
{
name: TabType.Sources,
path: TabType.Sources.toLowerCase(),