fix: add lineage breadcrumbs (#12578)

This commit is contained in:
karanh37 2023-07-25 19:06:02 +05:30 committed by GitHub
parent c86bda9d94
commit 83a1920e81
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 38 additions and 3 deletions

View File

@ -16,6 +16,7 @@ import { EntityLineageNodeType } from 'enums/entity.enum';
import { get } from 'lodash';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { getBreadcrumbsFromFqn } from 'utils/EntityUtils';
import { EntityReference } from '../../generated/type/entityReference';
import { getEntityIcon } from '../../utils/TableUtils';
import './lineage-node-label.less';
@ -65,10 +66,29 @@ const EntityLabel = ({ node }: Pick<LineageNodeLabelProps, 'node'>) => {
};
const LineageNodeLabelV1 = ({ node }: { node: EntityReference }) => {
const { t } = useTranslation();
const breadcrumbs = getBreadcrumbsFromFqn(node.fullyQualifiedName ?? '');
return (
<div className="d-flex w-72">
<div className="flex items-center m-0 p-md">
<EntityLabel node={node} />
<div className="w-72">
<div className="m-0 p-x-md p-y-xs">
<Space wrap align="start" className="m-b-xs w-full" size={4}>
{breadcrumbs.map((breadcrumb, index) => (
<React.Fragment key={index}>
<Typography.Text className="text-grey-muted">
{breadcrumb.name}
</Typography.Text>
{index !== breadcrumbs.length - 1 && (
<Typography.Text className="text-xss">
{t('label.slash-symbol')}
</Typography.Text>
)}
</React.Fragment>
))}
</Space>
<div className="flex items-center">
<EntityLabel node={node} />
</div>
</div>
</div>
);

View File

@ -125,6 +125,7 @@
.react-flow .lineage-node-handle {
width: 20px;
min-width: 20px;
height: 20px;
border-radius: 50%;
border-color: @lineage-border;

View File

@ -1251,6 +1251,20 @@ export const getEntityBreadcrumbs = (
}
};
export const getBreadcrumbsFromFqn = (fqn: string, includeCurrent = false) => {
const fqnList = Fqn.split(fqn);
if (!includeCurrent) {
fqnList.pop();
}
return [
...fqnList.map((fqn) => ({
name: fqn,
url: '',
})),
];
};
export const getEntityThreadLink = (
entityFieldThreadCount: EntityFieldThreadCount[]
) => {