From 040fd212780f9377b1d3b56b632c6da0424167eb Mon Sep 17 00:00:00 2001 From: Shailesh Parmar Date: Mon, 22 Sep 2025 14:07:31 +0530 Subject: [PATCH] feat: add new SVG icons for add-item, red-circle-with-dash, success-ticket, and yellow-calendar; update SummaryCardV1 to support icon and extra props --- .../ui/src/assets/svg/add-item-icon.svg | 6 ++ .../src/assets/svg/red-circle-with-dash.svg | 5 ++ .../assets/svg/success-ticket-with-check.svg | 5 ++ .../src/assets/svg/yellow-calendar.icon.svg | 8 ++ .../TableProfiler/TableProfiler.interface.ts | 3 +- .../TableProfilerChart/TableProfilerChart.tsx | 23 ++++-- .../TableProfiler/TableProfilerProvider.tsx | 14 ++++ .../common/SummaryCard/SummaryCardV1.tsx | 76 ++++++++++--------- 8 files changed, 99 insertions(+), 41 deletions(-) create mode 100644 openmetadata-ui/src/main/resources/ui/src/assets/svg/add-item-icon.svg create mode 100644 openmetadata-ui/src/main/resources/ui/src/assets/svg/red-circle-with-dash.svg create mode 100644 openmetadata-ui/src/main/resources/ui/src/assets/svg/success-ticket-with-check.svg create mode 100644 openmetadata-ui/src/main/resources/ui/src/assets/svg/yellow-calendar.icon.svg diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/add-item-icon.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/add-item-icon.svg new file mode 100644 index 00000000000..f15e8d25848 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/add-item-icon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/red-circle-with-dash.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/red-circle-with-dash.svg new file mode 100644 index 00000000000..5286b157e72 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/red-circle-with-dash.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/success-ticket-with-check.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/success-ticket-with-check.svg new file mode 100644 index 00000000000..1a9650a5fcb --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/success-ticket-with-check.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/yellow-calendar.icon.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/yellow-calendar.icon.svg new file mode 100644 index 00000000000..b1b2266dd27 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/yellow-calendar.icon.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/TableProfiler.interface.ts b/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/TableProfiler.interface.ts index ea3f7c92a44..71ba54f821b 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/TableProfiler.interface.ts +++ b/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/TableProfiler.interface.ts @@ -93,7 +93,8 @@ export interface TestIndicatorProps { export type OverallTableSummaryType = { title: string; value: number | string; - className?: string; + icon?: SvgComponent; + extra?: ReactNode; key: string; }; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/TableProfilerChart/TableProfilerChart.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/TableProfilerChart/TableProfilerChart.tsx index 560706eaaac..d3aace88143 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/TableProfilerChart/TableProfilerChart.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/TableProfilerChart/TableProfilerChart.tsx @@ -228,18 +228,29 @@ const TableProfilerChart = ({ {overallSummary?.map((summary) => ( - {/* */} - + /> ))} + + {/*
+ {overallSummary?.map((summary) => ( + + ))} +
*/} )} diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/TableProfilerProvider.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/TableProfilerProvider.tsx index 7ef5ddd7a12..918de98eb54 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/TableProfilerProvider.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/TableProfilerProvider.tsx @@ -24,6 +24,10 @@ import { useState, } from 'react'; import { useTranslation } from 'react-i18next'; +import { ReactComponent as AddItemIcon } from '../../../../assets/svg/add-item-icon.svg'; +import { ReactComponent as RedCircleIcon } from '../../../../assets/svg/red-circle-with-dash.svg'; +import { ReactComponent as SuccessTicketIcon } from '../../../../assets/svg/success-ticket-with-check.svg'; +import { ReactComponent as YellowCalendarIcon } from '../../../../assets/svg/yellow-calendar.icon.svg'; import { mockDatasetData } from '../../../../constants/mockTourData.constants'; import { DEFAULT_RANGE_DATA, @@ -142,6 +146,7 @@ export const TableProfilerProvider = ({ }), key: 'row-count', value: profile?.rowCount ?? 0, + icon: AddItemIcon, }, { title: t('label.column-entity', { @@ -149,16 +154,19 @@ export const TableProfilerProvider = ({ }), key: 'column-count', value: profile?.columnCount ?? tableProfiler?.columns?.length ?? 0, + icon: SuccessTicketIcon, }, { title: `${t('label.profile-sample-type', { type: '' })}`, key: 'profile-sample-type', value: getProfileSampleValue(), + icon: RedCircleIcon, }, { title: t('label.size'), key: 'size', value: bytesToSize(profile?.sizeInByte ?? 0), + icon: YellowCalendarIcon, }, { title: t('label.created-date'), @@ -168,6 +176,12 @@ export const TableProfilerProvider = ({ .toUTC() .toLocaleString(DateTime.DATE_MED) : '--', + extra: profile?.timestamp + ? `Last updated: ${DateTime.fromJSDate( + new Date(profile?.timestamp) + ).toLocaleString(DateTime.DATETIME_MED)}` + : undefined, + icon: YellowCalendarIcon, }, ]; }, [tableProfiler]); diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/SummaryCard/SummaryCardV1.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/SummaryCard/SummaryCardV1.tsx index 7dbffdd6b87..1b348ff6428 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/SummaryCard/SummaryCardV1.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/common/SummaryCard/SummaryCardV1.tsx @@ -1,7 +1,26 @@ -import { Box, Card, Chip, Typography } from '@mui/material'; -import { ReactComponent as NoDataIcon } from '../../../assets/svg/ticket-with-check.svg'; +import { Box, Card, Skeleton, Typography } from '@mui/material'; +import { ReactNode } from 'react'; +import { ReactComponent as AddItemIcon } from '../../../assets/svg/add-item-icon.svg'; + +const SummaryCardV1 = ({ + isLoading, + title, + value, + icon, + extra, +}: { + isLoading: boolean; + title: ReactNode; + value: string | number; + icon?: SvgComponent; + extra?: ReactNode; +}) => { + if (isLoading) { + return ; + } + + const Icon = icon ?? AddItemIcon; -const SummaryCardV1 = () => { return ( { width: '100%', }} variant="outlined"> - } - sx={{ - backgroundColor: 'white', - height: '40px', - width: '40px', - borderRadius: '8px', - '.MuiChip-icon': { - m: 0, - }, - }} - variant="outlined" - /> + - 1245 + {value} - Row Count + {title} - - - Last updated: Sep 17, 2025 12:34 PM - - + {extra && ( + + + {extra} + + + )} ); };