yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-11-02 03:29:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixed #337 Support for URLs to redirect to a table.column level (#455)

Browse Source
This commit is contained in:
Sachin Chaurasiya 2021-09-10 00:50:42 +05:30 committed by GitHub
parent 30c1e5a14c
commit 9cf26a1933
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 45 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
catalog-rest-service/src/main/resources/ui/src/components/my-data-details/SchemaTab.tsx
View File

@ -27,6 +27,7 @@ type Props = {
joins: Array<ColumnJoins>;
onUpdate: (columns: Array<TableColumn>) => void;
sampleData: SampleData;
columnName: string;
};
const SchemaTab: FunctionComponent<Props> = ({
@ -34,6 +35,7 @@ const SchemaTab: FunctionComponent<Props> = ({
joins,
onUpdate,
sampleData,
columnName,
}: Props) => {
const [searchText, setSearchText] = useState('');
const [checkedValue, setCheckedValue] = useState('schema');
@ -111,6 +113,7 @@ const SchemaTab: FunctionComponent<Props> = ({
<div className="col-sm-12">
{checkedValue === 'schema' ? (
<SchemaTable
columnName={columnName}
columns={columns}
joins={joins}
searchText={lowerCase(searchText)}

35
catalog-rest-service/src/main/resources/ui/src/components/my-data-details/SchemaTable.tsx
View File

@ -47,6 +47,7 @@ type Props = {
joins: Array<ColumnJoins>;
searchText?: string;
onUpdate: (columns: Array<TableColumn>) => void;
columnName: string;
};
const SchemaTable: FunctionComponent<Props> = ({
@ -54,6 +55,7 @@ const SchemaTable: FunctionComponent<Props> = ({
joins,
searchText = '',
onUpdate,
columnName,
}: Props) => {
const [editColumn, setEditColumn] = useState<{
column: TableColumn;
@ -99,16 +101,6 @@ const SchemaTable: FunctionComponent<Props> = ({
}
};
const handleClick = () => {
if (rowRef.current) {
rowRef.current.scrollIntoView({
behavior: 'smooth',
inline: 'nearest',
block: 'nearest',
});
}
};
const checkIfJoinsAvailable = (columnName: string): boolean => {
return (
joins &&
@ -229,6 +221,16 @@ const SchemaTable: FunctionComponent<Props> = ({
fetchTags();
}, []);
useEffect(() => {
if (rowRef.current) {
rowRef.current.scrollIntoView({
behavior: 'smooth',
inline: 'center',
block: 'center',
});
}
}, [columnName, rowRef.current]);
return (
<>
<div className="tw-table-responsive">
@ -247,12 +249,15 @@ const SchemaTable: FunctionComponent<Props> = ({
<tr
className={classNames(
'tableBody-row',
!isEven(index + 1) ? 'odd-row' : null
!isEven(index + 1) ? 'odd-row' : null,
{
'column-highlight': columnName === column.name,
}
)}
data-testid="column"
id={column.name}
key={index}
ref={rowRef}>
ref={columnName === column.name ? rowRef : null}>
<td className="tw-relative tableBody-cell">
{getConstraintIcon(column.columnConstraint)}
<span>{column.name}</span>
@ -315,8 +320,7 @@ const SchemaTable: FunctionComponent<Props> = ({
columnJoin.fullyQualifiedName,
['column']
)
)}
onClick={handleClick}>
)}>
{getPartialNameFromFQN(
columnJoin.fullyQualifiedName,
['database', 'table', 'column']
@ -343,8 +347,7 @@ const SchemaTable: FunctionComponent<Props> = ({
columnJoin.fullyQualifiedName,
['column']
)
)}
onClick={handleClick}>
)}>
{getPartialNameFromFQN(
columnJoin.fullyQualifiedName,
['database', 'table', 'column']

2
catalog-rest-service/src/main/resources/ui/src/constants/constants.ts
View File

@ -133,7 +133,7 @@ export const getDatasetDetailsPath = (
let path = ROUTES.DATASET_DETAILS;
path = path.replace(PLACEHOLDER_ROUTE_DATASET_FQN, datasetFQN);
return `${path}${columnName ? `#${columnName}` : ''}`;
return `${path}${columnName ? `.${columnName}` : ''}`;
};
export const getServiceDetailsPath = (

7
catalog-rest-service/src/main/resources/ui/src/pages/my-data-details/index.tsx
View File

@ -297,7 +297,7 @@ const MyDataDetailsPage = () => {
useEffect(() => {
getTableDetailsByFQN(
tableFQN,
getPartialNameFromFQN(tableFQN, ['service', 'database', 'table'], '.'),
'columns, database, usageSummary, followers, joins, tags, owner,sampleData'
).then((res: AxiosResponse) => {
const {
@ -426,6 +426,11 @@ const MyDataDetailsPage = () => {
</div>
<div className="tw-col-span-full">
<SchemaTab
columnName={getPartialNameFromFQN(
tableFQN,
['column'],
'.'
)}
columns={columns}
joins={tableJoinData.columnJoins}
sampleData={sampleData}

13
catalog-rest-service/src/main/resources/ui/src/styles/tailwind.css
View File

@ -313,4 +313,17 @@
.slick-dots li.slick-active button:before {
@apply tw-text-primary tw-opacity-100 !important;
}
.column-highlight {
animation: highlight 3000ms ease-out;
}
@keyframes highlight {
0% {
@apply tw-bg-warning-lite;
}
100% {
@apply tw-bg-white;
}
}
}

5
catalog-rest-service/src/main/resources/ui/src/utils/CommonUtils.tsx
View File

@ -38,7 +38,8 @@ export const getTableFQNFromColumnFQN = (columnFQN: string): string => {
export const getPartialNameFromFQN = (
fqn: string,
arrTypes: Array<'service' | 'database' | 'table' | 'column'> = []
arrTypes: Array<'service' | 'database' | 'table' | 'column'> = [],
joinSeperator = '/'
): string => {
const arrFqn = fqn.split('.');
const arrPartialName = [];
@ -54,7 +55,7 @@ export const getPartialNameFromFQN = (
}
}
return arrPartialName.join('/');
return arrPartialName.join(joinSeperator);
};
export const getCurrentUserId = (): string => {