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

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

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