yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-10-30 01:59:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix #1626 Profiler should show primary key, non null column information in profiler tab (#1649)

Browse Source 
* Fix #1626 Profiler should show primary key, non null column information in profiler tab

* Minor fix
This commit is contained in:
Sachin Chaurasiya 2021-12-09 21:45:16 +05:30 committed by GitHub
parent af134d4afc
commit 731e519fb3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 68 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
openmetadata-ui/src/main/resources/ui/src/components/DatasetDetails/DatasetDetails.component.tsx
View File

@ -394,7 +394,10 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({
{activeTab === 2 && ( {activeTab === 2 && (
<div className="tw-mt-4"> <div className="tw-mt-4">
<TableProfiler <TableProfiler
columns={columns.map((col) => col.name)} columns={columns.map((col) => ({
constraint: col.constraint as string,
colName: col.name,
}))}
tableProfiles={tableProfile} tableProfiles={tableProfile}
/> />
</div> </div>

110
openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/TableProfiler.component.tsx
View File

@ -15,11 +15,12 @@ import classNames from 'classnames';
import React, { Fragment, useState } from 'react'; import React, { Fragment, useState } from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { Table, TableProfile } from '../../generated/entity/data/table'; import { Table, TableProfile } from '../../generated/entity/data/table';
import { getConstraintIcon } from '../../utils/TableUtils';
import TableProfilerGraph from './TableProfilerGraph.component'; import TableProfilerGraph from './TableProfilerGraph.component';
type Props = { type Props = {
tableProfiles: Table['tableProfile']; tableProfiles: Table['tableProfile'];
columns: Array<string>; columns: Array<{ constraint: string; colName: string }>;
}; };
type ProfilerGraphData = Array<{ type ProfilerGraphData = Array<{
@ -45,7 +46,7 @@ const TableProfiler = ({ tableProfiles, columns }: Props) => {
const columnSpecificData = columns.map((column) => { const columnSpecificData = columns.map((column) => {
const data = modifiedData?.map((md) => { const data = modifiedData?.map((md) => {
const currentColumn = md.columnProfile?.find( const currentColumn = md.columnProfile?.find(
(colProfile) => colProfile.name === column (colProfile) => colProfile.name === column.colName
); );
return { profilDate: md.profileDate, ...currentColumn, rows: md.rows }; return { profilDate: md.profileDate, ...currentColumn, rows: md.rows };
@ -85,19 +86,19 @@ const TableProfiler = ({ tableProfiles, columns }: Props) => {
<td <td
className="tw-relative tableBody-cell" className="tw-relative tableBody-cell"
data-testid="tableBody-cell"> data-testid="tableBody-cell">
<p className="tw-flex"> <div className="tw-flex">
<span <span
className="tw-mr-2 tw-cursor-pointer" className="tw-mr-2 tw-cursor-pointer"
onClick={() => onClick={() =>
setExpandedColumn((prevState) => ({ setExpandedColumn((prevState) => ({
name: col.name, name: col.name.colName,
isExpanded: isExpanded:
prevState.name === col.name prevState.name === col.name.colName
? !prevState.isExpanded ? !prevState.isExpanded
: true, : true,
})) }))
}> }>
{expandedColumn.name === col.name ? ( {expandedColumn.name === col.name.colName ? (
expandedColumn.isExpanded ? ( expandedColumn.isExpanded ? (
<i className="fas fa-caret-down" /> <i className="fas fa-caret-down" />
) : ( ) : (
@ -107,8 +108,16 @@ const TableProfiler = ({ tableProfiles, columns }: Props) => {
<i className="fas fa-caret-right" /> <i className="fas fa-caret-right" />
)} )}
</span> </span>
<span>{col.name}</span> {colIndex === 0 && (
</p> <span className="tw-mr-3 tw--ml-2">
{getConstraintIcon(
col.name.constraint,
'tw-relative'
)}
</span>
)}
<span>{col.name.colName}</span>
</div>
</td> </td>
<td className="tw-relative tableBody-cell profiler-graph"> <td className="tw-relative tableBody-cell profiler-graph">
<TableProfilerGraph <TableProfilerGraph
@ -151,47 +160,50 @@ const TableProfiler = ({ tableProfiles, columns }: Props) => {
</td> </td>
</tr> </tr>
</tbody> </tbody>
{expandedColumn.name === col.name && expandedColumn.isExpanded && ( {expandedColumn.name === col.name.colName &&
<tbody> expandedColumn.isExpanded && (
{col.data?.map((colData, index) => ( <tbody>
<tr {col.data?.map((colData, index) => (
className={classNames( <tr
'tableBody-row tw-border-0 tw-border-l tw-border-r', className={classNames(
{ 'tableBody-row tw-border-0 tw-border-l tw-border-r',
'tw-border-b': {
columnSpecificData.length - 1 === colIndex && 'tw-border-b':
col.data?.length === index + 1, columnSpecificData.length - 1 === colIndex &&
} col.data?.length === index + 1,
)} }
key={index}> )}
<td className="tw-relative tableBody-cell"> key={index}>
<span className="tw-pl-6">{colData.profilDate}</span> <td className="tw-relative tableBody-cell">
</td> <span className="tw-pl-6">
<td className="tw-relative tableBody-cell"> {colData.profilDate}
<span className="tw-pl-6">{colData.rows}</span> </span>
</td> </td>
<td className="tw-relative tableBody-cell"> <td className="tw-relative tableBody-cell">
{colData.uniqueProportion ?? 0} <span className="tw-pl-6">{colData.rows}</span>
</td> </td>
<td className="tw-relative tableBody-cell"> <td className="tw-relative tableBody-cell">
{colData.nullProportion ?? 0} {colData.uniqueProportion ?? 0}
</td> </td>
<td className="tw-relative tableBody-cell"> <td className="tw-relative tableBody-cell">
{colData.min ?? 0} {colData.nullProportion ?? 0}
</td> </td>
<td className="tw-relative tableBody-cell"> <td className="tw-relative tableBody-cell">
{colData.max ?? 0} {colData.min ?? 0}
</td> </td>
<td className="tw-relative tableBody-cell"> <td className="tw-relative tableBody-cell">
{colData.median ?? 0} {colData.max ?? 0}
</td> </td>
<td className="tw-relative tableBody-cell"> <td className="tw-relative tableBody-cell">
{colData.stddev ?? 0} {colData.median ?? 0}
</td> </td>
</tr> <td className="tw-relative tableBody-cell">
))} {colData.stddev ?? 0}
</tbody> </td>
)} </tr>
))}
</tbody>
)}
</Fragment> </Fragment>
); );
})} })}

5
openmetadata-ui/src/main/resources/ui/src/utils/TableUtils.tsx
View File

@ -11,6 +11,7 @@
* limitations under the License. * limitations under the License.
*/ */
import classNames from 'classnames';
import { EntityTags, TableDetail } from 'Models'; import { EntityTags, TableDetail } from 'Models';
import React from 'react'; import React from 'react';
import AppState from '../AppState'; import AppState from '../AppState';
@ -144,7 +145,7 @@ export const getFollowerDetail = (id: string) => {
return follower; return follower;
}; };
export const getConstraintIcon = (constraint = '') => { export const getConstraintIcon = (constraint = '', className = '') => {
let title: string, icon: string; let title: string, icon: string;
switch (constraint) { switch (constraint) {
case ConstraintTypes.PRIMARY_KEY: case ConstraintTypes.PRIMARY_KEY:
@ -174,7 +175,7 @@ export const getConstraintIcon = (constraint = '') => {
return ( return (
<PopOver <PopOver
className="tw-absolute tw-left-2" className={classNames('tw-absolute tw-left-2', className)}
position="bottom" position="bottom"
size="small" size="small"
title={title} title={title}