mirror of
https://github.com/open-metadata/OpenMetadata.git
synced 2025-11-01 11:09:14 +00:00
feat: enhance NoProfilerBanner with improved layout and styling; add SummaryCardV1 component and update translations
This commit is contained in:
Shailesh Parmar
parent
70654b4ab3
commit
33977571d9
@ -10,33 +10,81 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { Chip } from '@mui/material';
|
||||
import { Button, Chip, Grid, useTheme } from '@mui/material';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { ReactComponent as RightArrowIcon } from '../../../../../assets/svg/right-arrow.svg';
|
||||
import { ReactComponent as NoDataIcon } from '../../../../../assets/svg/ticket-with-check.svg';
|
||||
import documentationLinksClassBase from '../../../../../utils/DocumentationLinksClassBase';
|
||||
import './no-profiler-banner.less';
|
||||
|
||||
const NoProfilerBanner = () => {
|
||||
const theme = useTheme();
|
||||
const { t } = useTranslation();
|
||||
const profilerDocsLink =
|
||||
documentationLinksClassBase.getDocsURLS()
|
||||
.DATA_QUALITY_PROFILER_WORKFLOW_DOCS;
|
||||
|
||||
return (
|
||||
<div data-testid="no-profiler-placeholder">
|
||||
<Chip color="secondary" icon={<NoDataIcon />} variant="outlined" />
|
||||
<Grid
|
||||
container
|
||||
className="no-profiler-banner-container"
|
||||
data-testid="no-profiler-placeholder"
|
||||
spacing={4}>
|
||||
<Grid size="auto">
|
||||
<Chip
|
||||
color="secondary"
|
||||
icon={<NoDataIcon />}
|
||||
sx={{
|
||||
backgroundColor: theme.palette.allShades.white,
|
||||
height: '40px',
|
||||
width: '40px',
|
||||
borderRadius: '8px',
|
||||
'.MuiChip-icon': {
|
||||
m: 0,
|
||||
},
|
||||
}}
|
||||
variant="outlined"
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<p className="m-l-xs" data-testid="error-msg">
|
||||
<Grid size={9}>
|
||||
<p className="profiler-title">{t('message.no-profiler-title')}</p>
|
||||
<p className="profiler-description">
|
||||
{t('message.no-profiler-message')}
|
||||
</p>
|
||||
</Grid>
|
||||
|
||||
<Grid
|
||||
size="grow"
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
alignItems: 'center',
|
||||
}}>
|
||||
<a
|
||||
data-testid="documentation-link"
|
||||
href={profilerDocsLink}
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
title="data quality observability profiler workflow">
|
||||
{`${t('label.here-lowercase')}.`}
|
||||
<Button
|
||||
endIcon={<RightArrowIcon />}
|
||||
sx={(theme) => ({
|
||||
color: theme.palette.primary.main,
|
||||
fontWeight: 600,
|
||||
'.MuiButton-endIcon>svg': {
|
||||
width: '12px',
|
||||
height: '12px',
|
||||
},
|
||||
'&:hover': {
|
||||
color: theme.palette.primary.main,
|
||||
},
|
||||
})}>
|
||||
{t('label.learn-more')}
|
||||
</Button>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</Grid>
|
||||
</Grid>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -0,0 +1,20 @@
|
||||
.no-profiler-banner-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
border-radius: 10px;
|
||||
background: #fafafc;
|
||||
padding: 16px;
|
||||
|
||||
.profiler-description {
|
||||
color: #364254;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.profiler-title {
|
||||
color: #21263c;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
@ -11,9 +11,9 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Grid } from '@mui/material';
|
||||
import { Col, Row } from 'antd';
|
||||
import { AxiosError } from 'axios';
|
||||
import classNames from 'classnames';
|
||||
import { pick } from 'lodash';
|
||||
import { DateRangeObject } from 'Models';
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
@ -39,7 +39,7 @@ import {
|
||||
} from '../../../../../utils/TableProfilerUtils';
|
||||
import { showErrorToast } from '../../../../../utils/ToastUtils';
|
||||
import ErrorPlaceHolder from '../../../../common/ErrorWithPlaceholder/ErrorPlaceHolder';
|
||||
import { SummaryCard } from '../../../../common/SummaryCard/SummaryCard.component';
|
||||
import SummaryCardV1 from '../../../../common/SummaryCard/SummaryCardV1';
|
||||
import CustomBarChart from '../../../../Visualisations/Chart/CustomBarChart';
|
||||
import OperationDateBarChart from '../../../../Visualisations/Chart/OperationDateBarChart';
|
||||
import { MetricChartType } from '../../ProfilerDashboard/profilerDashboard.interface';
|
||||
@ -225,23 +225,21 @@ const TableProfilerChart = ({
|
||||
</Col>
|
||||
)}
|
||||
<Col span={24}>
|
||||
<NoProfilerBanner />
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<Row wrap className="justify-between" gutter={[16, 16]}>
|
||||
<Grid container spacing={5}>
|
||||
{overallSummary?.map((summary) => (
|
||||
<Col key={summary.title}>
|
||||
<SummaryCard
|
||||
<Grid key={summary.title} size="grow">
|
||||
{/* <SummaryCard
|
||||
className={classNames(summary.className, 'h-full')}
|
||||
isLoading={isSummaryLoading}
|
||||
showProgressBar={false}
|
||||
title={summary.title}
|
||||
total={0}
|
||||
value={summary.value}
|
||||
/>
|
||||
</Col>
|
||||
/> */}
|
||||
<SummaryCardV1 />
|
||||
</Grid>
|
||||
))}
|
||||
</Row>
|
||||
</Grid>
|
||||
</Col>
|
||||
</>
|
||||
)}
|
||||
|
||||
@ -0,0 +1,64 @@
|
||||
import { Box, Card, Chip, Typography } from '@mui/material';
|
||||
import { ReactComponent as NoDataIcon } from '../../../assets/svg/ticket-with-check.svg';
|
||||
|
||||
const SummaryCardV1 = () => {
|
||||
return (
|
||||
<Box>
|
||||
<Card
|
||||
sx={{
|
||||
borderRadius: '12px',
|
||||
border: '1px solid #E9E9F5',
|
||||
boxShadow: '0 4px 3px 0 rgba(235, 239, 250, 0.25)',
|
||||
minWidth: '210px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 3,
|
||||
p: '20px',
|
||||
width: '100%',
|
||||
}}
|
||||
variant="outlined">
|
||||
<Chip
|
||||
color="secondary"
|
||||
icon={<NoDataIcon />}
|
||||
sx={{
|
||||
backgroundColor: 'white',
|
||||
height: '40px',
|
||||
width: '40px',
|
||||
borderRadius: '8px',
|
||||
'.MuiChip-icon': {
|
||||
m: 0,
|
||||
},
|
||||
}}
|
||||
variant="outlined"
|
||||
/>
|
||||
<Box>
|
||||
<Typography sx={{ fontSize: '18px', fontWeight: 600 }} variant="h6">
|
||||
1245
|
||||
</Typography>
|
||||
<Typography
|
||||
color="text.secondary"
|
||||
sx={{ fontSize: '14px', fontWeight: 500 }}>
|
||||
Row Count
|
||||
</Typography>
|
||||
</Box>
|
||||
</Card>
|
||||
<Box
|
||||
sx={{
|
||||
mt: 0,
|
||||
mx: 2,
|
||||
px: 2,
|
||||
py: 1,
|
||||
background: '#F8F9FC',
|
||||
borderRadius: '0 0 12px 12px',
|
||||
boxShadow: '0 4px 3px 0 rgba(235, 239, 250, 0.10)',
|
||||
border: 'none',
|
||||
}}>
|
||||
<Typography sx={{ fontSize: 10, fontWeight: 500 }}>
|
||||
Last updated: Sep 17, 2025 12:34 PM
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default SummaryCardV1;
|
||||
@ -2241,6 +2241,7 @@
|
||||
"no-persona-assigned": "No persona assigned",
|
||||
"no-persona-message": "Personas are necessary to customize the landing page. Please create a persona from <0>{{link}}</0>",
|
||||
"no-profiler-card-message-with-link": "Enable the profiler to discover valuable insights about your table. Visit our documentation for setup steps <0>here</0>",
|
||||
"no-profiler-title": "Run Profiler to Unlock Table Insights",
|
||||
"no-profiler-message": "Explore your table's metrics by running the profiler workflow. You'll see Row Count, Table Updates, Volume Changes, and more. Visit our documentation for setup steps ",
|
||||
"no-recently-viewed-date": "You haven't viewed any data assets recently. Explore to find something interesting!",
|
||||
"no-reference-available": "No references available.",
|
||||
|
||||
@ -129,7 +129,6 @@ import { TabProps } from '../components/common/TabsLabel/TabsLabel.interface';
|
||||
import { GenericTab } from '../components/Customization/GenericTab/GenericTab';
|
||||
import { CommonWidgets } from '../components/DataAssets/CommonWidgets/CommonWidgets';
|
||||
import DataObservabilityTab from '../components/Database/Profiler/DataObservability/DataObservabilityTab';
|
||||
import TableProfiler from '../components/Database/Profiler/TableProfiler/TableProfiler';
|
||||
import SampleDataTableComponent from '../components/Database/SampleDataTable/SampleDataTable.component';
|
||||
import SchemaTable from '../components/Database/SchemaTable/SchemaTable.component';
|
||||
import TableQueries from '../components/Database/TableQueries/TableQueries';
|
||||
@ -868,22 +867,6 @@ export const getTableDetailPageBaseTabs = ({
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
label: (
|
||||
<TabsLabel
|
||||
id={EntityTabs.PROFILER + 'old'}
|
||||
name={get(
|
||||
labelMap,
|
||||
EntityTabs.PROFILER,
|
||||
t('label.data-observability')
|
||||
)}
|
||||
/>
|
||||
),
|
||||
key: EntityTabs.PROFILER + 'old',
|
||||
children: (
|
||||
<TableProfiler permissions={tablePermissions} table={tableDetails} />
|
||||
),
|
||||
},
|
||||
{
|
||||
label: (
|
||||
<TabsLabel
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user