Skip to content

refactor(DimensionalityTab): migrate table to core-ui Table component #27969

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
shah-harshit wants to merge 12 commits into
base: main
Choose a base branch
from
Open

refactor(DimensionalityTab): migrate table to core-ui Table component #27969

Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
7cd5369
refactor(DimensionalityTab): migrate table to core-ui Table component
shah-harshit May 7, 2026
15f8f97
refactor(DimensionalityTab): flatten cell renderer and memoize columns
shah-harshit May 7, 2026
284c732
fix checkstyle
shah-harshit May 7, 2026
ec3b931
minor ui fix
shah-harshit May 7, 2026
ad50291
refactor(IncidentManager): migrate table to core-ui Table component
shah-harshit May 7, 2026
35a89e5
Revert "refactor(IncidentManager): migrate table to core-ui Table com…
shah-harshit May 7, 2026
3e4cc93
Merge branch 'main' into feat/migrate-dimensionality-tab-core-ui-table
shah-harshit May 7, 2026
baa37d4
Merge branch 'main' into feat/migrate-dimensionality-tab-core-ui-table
shah-harshit May 8, 2026
ba81bf0
add border
shah-harshit May 8, 2026
29a006d
fix failing test case
shah-harshit May 8, 2026
c2c35ab
address gitar-bot comments
shah-harshit May 8, 2026
fc56967
Merge branch 'main' into feat/migrate-dimensionality-tab-core-ui-table
shah-harshit May 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
169 changes: 80 additions & 89 deletions ...ces/ui/src/components/DataQuality/IncidentManager/DimensionalityTab/DimensionalityTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,11 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Select, Skeleton, Tooltip } from '@openmetadata/ui-core-components';
import { HelpCircle } from '@untitledui/icons';
import { ColumnsType } from 'antd/lib/table';
import { Select, Skeleton, Table } from '@openmetadata/ui-core-components';
import { format } from 'date-fns';
import { isEmpty, split, toLower } from 'lodash';
import { DateRangeObject } from 'Models';
import { useEffect, useMemo, useState } from 'react';
import { type ComponentType, useEffect, useMemo, useState } from 'react';
import { Trans, useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import {
Expand All @@ -43,11 +41,15 @@ import NoDataPlaceholderNew from '../../../common/ErrorWithPlaceholder/NoDataPla
import MuiDatePickerMenu from '../../../common/MuiDatePickerMenu/MuiDatePickerMenu';
import StatusBadge from '../../../common/StatusBadge/StatusBadge.component';
import { StatusType } from '../../../common/StatusBadge/StatusBadge.interface';
import Table from '../../../common/Table/Table';
import { ProfilerTabPath } from '../../../Database/Profiler/ProfilerDashboard/profilerDashboard.interface';
import DimensionalityHeatmap from './DimensionalityHeatmap/DimensionalityHeatmap.component';
import { DimensionResultWithTimestamp } from './DimensionalityHeatmap/DimensionalityHeatmap.interface';

const TransComponent = Trans as ComponentType<{
i18nKey: string;
components: Record<number, JSX.Element>;
}>;
Comment thread
shah-harshit marked this conversation as resolved.
Outdated

const DimensionalityTab = () => {
const { t } = useTranslation();
const { dimensionKey } = useRequiredParams<{ dimensionKey?: string }>();
Expand Down Expand Up @@ -176,83 +178,15 @@ const DimensionalityTab = () => {
});
}, [dimensionData]);

const tableColumns: ColumnsType<{
key: string;
dimensionValue: string;
result: DimensionResultWithTimestamp;
}> = [
{
title: t('label.status'),
dataIndex: 'result',
key: 'status',
width: 120,
render: (result: DimensionResultWithTimestamp) => {
return result?.testCaseStatus ? (
<StatusBadge
dataTestId="status-badge"
label={TEST_CASE_STATUS_LABELS[result.testCaseStatus]}
status={toLower(result.testCaseStatus) as StatusType}
/>
) : (
<span className="tw:text-sm">--</span>
);
},
},
const dimensionTableColumns = [
{ id: 'status', label: t('label.status') },
{
title: (
<div className="tw:flex tw:items-center tw:gap-2">
{t('label.impact-score')}
<Tooltip
placement="top"
title={
<span className="tw:text-xs">
{t('message.impact-score-helper')}
</span>
}>
<HelpCircle height={16} width={16} />
</Tooltip>
</div>
),
dataIndex: 'result',
key: 'impactScore',
width: 120,
render: (result: DimensionResultWithTimestamp) => {
return (
<span className="tw:text-sm">{result?.impactScore ?? '--'}</span>
);
},
},
{
title: t('label.dimension'),
dataIndex: 'dimensionValue',
key: 'dimensionValue',
width: 200,
render: (dimensionValue: string, record) => {
return (
<Link
className="tw:text-text-brand-secondary"
to={getTestCaseDimensionsDetailPagePath(
testCase?.fullyQualifiedName || '',
record.result.dimensionKey || ''
)}>
{dimensionValue}
</Link>
);
},
},
{
title: t('label.last-run'),
dataIndex: 'result',
key: 'lastRun',
width: 200,
render: (result: DimensionResultWithTimestamp) => {
return result?.timestamp ? (
<DateTimeDisplay timestamp={result.timestamp} />
) : (
<span className="tw:text-sm">--</span>
);
},
id: 'impactScore',
label: t('label.impact-score'),
tooltip: t('message.impact-score-helper'),
},
{ id: 'dimensionValue', label: t('label.dimension') },
{ id: 'lastRun', label: t('label.last-run') },
];
Comment thread
gitar-bot[bot] marked this conversation as resolved.
Outdated

const noDataPlaceholder = useMemo(() => {
Expand All @@ -267,7 +201,7 @@ const DimensionalityTab = () => {

return (
<NoDataPlaceholderNew size={SIZE.LARGE}>
<Trans
<TransComponent
components={{
0: <span className="tw:text-sm" />,
1: <span className="tw:text-sm" />,
Expand All @@ -287,8 +221,9 @@ const DimensionalityTab = () => {
{`${t('label.select-dimension')}:`}
</p>
<Select
className="tw:min-w-37.5"
className="tw:min-w-37.5 tw:h-8"
data-testid="dimension-select"
fontSize="xs"
items={dimensionColumnsOptions}
size="sm"
value={selectedDimension ?? null}
Expand Down Expand Up @@ -329,13 +264,69 @@ const DimensionalityTab = () => {
entityText: selectedDimension || '',
})}
</p>
<Table
bordered
columns={tableColumns}
dataSource={getLatestResultPerDimension}
loading={isLoading}
pagination={false}
/>
<Table aria-label={selectedDimension ?? ''}>
<Table.Header columns={dimensionTableColumns}>
{(col) => (
<Table.Head
id={col.id}
key={col.id}
label={col.label}
tooltip={col.tooltip}
/>
)}
</Table.Header>
<Table.Body items={getLatestResultPerDimension}>
{(row) => (
<Table.Row
columns={dimensionTableColumns}
id={row.key}
key={row.key}>
{(col) => (
<Table.Cell key={col.id}>
{col.id === 'status' ? (
row.result?.testCaseStatus ? (
<StatusBadge
dataTestId="status-badge"
label={
TEST_CASE_STATUS_LABELS[
row.result.testCaseStatus
]
}
status={
toLower(
row.result.testCaseStatus
) as StatusType
}
Comment thread
gitar-bot[bot] marked this conversation as resolved.
Outdated
/>
) : (
<span className="tw:text-sm">--</span>
)
) : col.id === 'impactScore' ? (
<span className="tw:text-sm">
{row.result?.impactScore ?? '--'}
</span>
) : col.id === 'dimensionValue' ? (
<Link
className="tw:text-text-brand-secondary"
to={getTestCaseDimensionsDetailPagePath(
testCase?.fullyQualifiedName || '',
row.result.dimensionKey || ''
)}>
{row.dimensionValue}
</Link>
) : col.id === 'lastRun' ? (
row.result?.timestamp ? (
<DateTimeDisplay timestamp={row.result.timestamp} />
) : (
<span className="tw:text-sm">--</span>
)
) : null}
</Table.Cell>
)}
</Table.Row>
)}
</Table.Body>
</Table>
</div>
</>
)}
Expand Down
Loading