mirror of
https://github.com/open-metadata/OpenMetadata.git
synced 2025-11-02 11:39:12 +00:00
added pie chart as per new mock
This commit is contained in:
Shailesh Parmar
parent
b424f0f594
commit
2375c40e37
@ -0,0 +1,208 @@
|
||||
import { Card, Col, Row } from 'antd';
|
||||
import React, { useMemo } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Cell, Pie, PieChart } from 'recharts';
|
||||
import { SummaryPanelProps } from './SummaryPanel.interface';
|
||||
|
||||
const renderCenterText = (value: number) => (
|
||||
<text
|
||||
dominantBaseline="middle"
|
||||
fill="#222"
|
||||
fontSize="28"
|
||||
fontWeight="bold"
|
||||
textAnchor="middle"
|
||||
x="50%"
|
||||
y="50%">
|
||||
{value.toLocaleString()}
|
||||
</text>
|
||||
);
|
||||
|
||||
const PieChartSummaryPanel = ({
|
||||
testSummary,
|
||||
isLoading = false,
|
||||
showAdditionalSummary = false,
|
||||
}: SummaryPanelProps) => {
|
||||
const { t } = useTranslation();
|
||||
console.log('testSummary', testSummary);
|
||||
|
||||
// {
|
||||
// "success": 4,
|
||||
// "failed": 3,
|
||||
// "aborted": 1,
|
||||
// "total": 8,
|
||||
// "unhealthy": 1,
|
||||
// "healthy": 1,
|
||||
// "totalDQEntities": 2,
|
||||
// "totalEntityCount": 36
|
||||
// }
|
||||
|
||||
const success = useMemo(
|
||||
() => [
|
||||
{
|
||||
name: 'success',
|
||||
value: testSummary?.success,
|
||||
color: '#22C55E',
|
||||
},
|
||||
{
|
||||
name: 'total',
|
||||
value: testSummary?.total,
|
||||
color: '#E5E7EB',
|
||||
},
|
||||
],
|
||||
[testSummary]
|
||||
);
|
||||
|
||||
return (
|
||||
<Card loading={isLoading}>
|
||||
<div style={{ marginBottom: 16 }}>
|
||||
<div style={{ fontWeight: 600, fontSize: 20 }}>
|
||||
{t('test-cases-status', 'Test Cases Status')}
|
||||
</div>
|
||||
<div style={{ color: '#6B7280' }}>
|
||||
{t(
|
||||
'test-cases-status-desc',
|
||||
'Understand the metadata available in your service and keep track of the main KPIs coverage'
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<Row gutter={[32, 16]} justify="center">
|
||||
{/* Total Tests */}
|
||||
<Col md={8} xs={24}>
|
||||
<Card style={{ textAlign: 'center', minHeight: 320 }}>
|
||||
<div style={{ fontWeight: 600, fontSize: 20, marginBottom: 8 }}>
|
||||
{t('total-tests', 'Total Tests')}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
position: 'relative',
|
||||
height: 180,
|
||||
}}>
|
||||
<PieChart height={200} width={200}>
|
||||
<Pie
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
data={success}
|
||||
dataKey="value"
|
||||
innerRadius={85}
|
||||
outerRadius={100}>
|
||||
{success?.map((entry) => (
|
||||
<Cell fill={entry.color} key={`cell-${entry.name}`} />
|
||||
))}
|
||||
</Pie>
|
||||
{/* {renderCenterText(testSummary?.totalTests || 0)} */}
|
||||
</PieChart>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
gap: 16,
|
||||
marginTop: 8,
|
||||
}}>
|
||||
{testSummary?.totalTests?.map((item: any) => (
|
||||
<div
|
||||
key={item.name}
|
||||
style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
|
||||
<span
|
||||
style={{
|
||||
width: 10,
|
||||
height: 10,
|
||||
borderRadius: '50%',
|
||||
background: item.color,
|
||||
display: 'inline-block',
|
||||
}}
|
||||
/>
|
||||
<span style={{ color: '#222', fontWeight: 500 }}>
|
||||
{t(item.name)}
|
||||
</span>
|
||||
<span style={{ color: '#6B7280', fontWeight: 500 }}>
|
||||
{item.value}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
{/* Healthy Data Assets */}
|
||||
<Col md={8} xs={24}>
|
||||
<Card style={{ textAlign: 'center', minHeight: 320 }}>
|
||||
<div style={{ fontWeight: 600, fontSize: 20, marginBottom: 8 }}>
|
||||
{t('healthy-data-asset-plural')}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
position: 'relative',
|
||||
height: 180,
|
||||
}}>
|
||||
<PieChart height={180} width={180}>
|
||||
<Pie
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
data={testSummary?.healthyDataAssets}
|
||||
dataKey="value"
|
||||
endAngle={-30}
|
||||
innerRadius={60}
|
||||
nameKey="name"
|
||||
outerRadius={80}
|
||||
startAngle={210}
|
||||
stroke="none">
|
||||
{testSummary?.healthyDataAssets?.map(
|
||||
(entry: any, idx: number) => (
|
||||
<Cell fill={entry.color} key={`cell-healthy-${idx}`} />
|
||||
)
|
||||
)}
|
||||
</Pie>
|
||||
{renderCenterText(1000)}
|
||||
</PieChart>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
{/* Data Assets Coverage */}
|
||||
<Col md={8} xs={24}>
|
||||
<Card style={{ textAlign: 'center', minHeight: 320 }}>
|
||||
<div style={{ fontWeight: 600, fontSize: 20, marginBottom: 8 }}>
|
||||
{t('data-asset-plural-coverage')}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
position: 'relative',
|
||||
height: 180,
|
||||
}}>
|
||||
<PieChart height={180} width={180}>
|
||||
<Pie
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
data={testSummary?.dataAssetsCoverage}
|
||||
dataKey="value"
|
||||
endAngle={-30}
|
||||
innerRadius={60}
|
||||
nameKey="name"
|
||||
outerRadius={80}
|
||||
startAngle={210}
|
||||
stroke="none">
|
||||
{testSummary?.dataAssetsCoverage?.map(
|
||||
(entry: any, idx: number) => (
|
||||
<Cell fill={entry.color} key={`cell-coverage-${idx}`} />
|
||||
)
|
||||
)}
|
||||
</Pie>
|
||||
{renderCenterText(1000)}
|
||||
</PieChart>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default PieChartSummaryPanel;
|
||||
@ -13,6 +13,7 @@
|
||||
import { RightOutlined } from '@ant-design/icons';
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
Col,
|
||||
Dropdown,
|
||||
Form,
|
||||
@ -81,6 +82,7 @@ import { PagingHandlerParams } from '../../common/NextPrevious/NextPrevious.inte
|
||||
import Searchbar from '../../common/SearchBarComponent/SearchBar.component';
|
||||
import DataQualityTab from '../../Database/Profiler/DataQualityTab/DataQualityTab';
|
||||
import { TestCaseSearchParams } from '../DataQuality.interface';
|
||||
import PieChartSummaryPanel from '../SummaryPannel/PieChartSummaryPanel.component';
|
||||
import { SummaryPanel } from '../SummaryPannel/SummaryPanel.component';
|
||||
|
||||
export const TestCases = () => {
|
||||
@ -482,196 +484,204 @@ export const TestCases = () => {
|
||||
}
|
||||
|
||||
return (
|
||||
<Row data-testid="test-case-container" gutter={[16, 16]}>
|
||||
<Col span={24}>
|
||||
<Form<TestCaseSearchParams>
|
||||
form={form}
|
||||
layout="horizontal"
|
||||
onValuesChange={handleFilterChange}>
|
||||
<Space wrap align="center" className="w-full" size={16}>
|
||||
<Form.Item className="m-0 w-80">
|
||||
<Searchbar
|
||||
removeMargin
|
||||
placeholder={t('label.search-entity', {
|
||||
entity: t('label.test-case-lowercase'),
|
||||
})}
|
||||
searchValue={searchValue}
|
||||
onSearch={(value) => handleSearchParam('searchValue', value)}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item noStyle name="selectedFilters">
|
||||
<Dropdown
|
||||
menu={{
|
||||
items: filterMenu,
|
||||
selectedKeys: selectedFilter,
|
||||
onClick: handleMenuClick,
|
||||
}}
|
||||
trigger={['click']}>
|
||||
<Button
|
||||
ghost
|
||||
className="expand-btn"
|
||||
data-testid="advanced-filter"
|
||||
type="primary">
|
||||
{t('label.advanced')}
|
||||
<RightOutlined />
|
||||
</Button>
|
||||
</Dropdown>
|
||||
</Form.Item>
|
||||
{selectedFilter.includes(TEST_CASE_FILTERS.table) && (
|
||||
<Form.Item
|
||||
className="m-0 w-80"
|
||||
label={t('label.table')}
|
||||
name="tableFqn">
|
||||
<Select
|
||||
allowClear
|
||||
showSearch
|
||||
data-testid="table-select-filter"
|
||||
loading={isOptionsLoading}
|
||||
options={tableOptions}
|
||||
placeholder={t('label.table')}
|
||||
onSearch={debounceFetchTableData}
|
||||
<Card>
|
||||
<Row data-testid="test-case-container" gutter={[16, 16]}>
|
||||
<Col span={24}>
|
||||
<Form<TestCaseSearchParams>
|
||||
form={form}
|
||||
layout="horizontal"
|
||||
onValuesChange={handleFilterChange}>
|
||||
<Space wrap align="center" className="w-full" size={16}>
|
||||
<Form.Item className="m-0 w-80">
|
||||
<Searchbar
|
||||
removeMargin
|
||||
placeholder={t('label.search-entity', {
|
||||
entity: t('label.test-case-lowercase'),
|
||||
})}
|
||||
searchValue={searchValue}
|
||||
onSearch={(value) => handleSearchParam('searchValue', value)}
|
||||
/>
|
||||
</Form.Item>
|
||||
)}
|
||||
{selectedFilter.includes(TEST_CASE_FILTERS.platform) && (
|
||||
<Form.Item
|
||||
className="m-0 w-min-20"
|
||||
label={t('label.platform')}
|
||||
name="testPlatforms">
|
||||
<Select
|
||||
allowClear
|
||||
data-testid="platform-select-filter"
|
||||
mode="multiple"
|
||||
options={TEST_CASE_PLATFORM_OPTION}
|
||||
placeholder={t('label.platform')}
|
||||
/>
|
||||
<Form.Item noStyle name="selectedFilters">
|
||||
<Dropdown
|
||||
menu={{
|
||||
items: filterMenu,
|
||||
selectedKeys: selectedFilter,
|
||||
onClick: handleMenuClick,
|
||||
}}
|
||||
trigger={['click']}>
|
||||
<Button
|
||||
ghost
|
||||
className="expand-btn"
|
||||
data-testid="advanced-filter"
|
||||
type="primary">
|
||||
{t('label.advanced')}
|
||||
<RightOutlined />
|
||||
</Button>
|
||||
</Dropdown>
|
||||
</Form.Item>
|
||||
)}
|
||||
{selectedFilter.includes(TEST_CASE_FILTERS.type) && (
|
||||
<Form.Item
|
||||
className="m-0 w-40"
|
||||
label={t('label.type')}
|
||||
name="testCaseType">
|
||||
<Select
|
||||
allowClear
|
||||
data-testid="test-case-type-select-filter"
|
||||
options={TEST_CASE_TYPE_OPTION}
|
||||
placeholder={t('label.type')}
|
||||
/>
|
||||
</Form.Item>
|
||||
)}
|
||||
{selectedFilter.includes(TEST_CASE_FILTERS.status) && (
|
||||
<Form.Item
|
||||
className="m-0 w-40"
|
||||
label={t('label.status')}
|
||||
name="testCaseStatus">
|
||||
<Select
|
||||
allowClear
|
||||
data-testid="status-select-filter"
|
||||
options={TEST_CASE_STATUS_OPTION}
|
||||
placeholder={t('label.status')}
|
||||
/>
|
||||
</Form.Item>
|
||||
)}
|
||||
{selectedFilter.includes(TEST_CASE_FILTERS.lastRun) && (
|
||||
<Form.Item
|
||||
className="m-0"
|
||||
label={t('label.last-run')}
|
||||
name="lastRunRange"
|
||||
trigger="handleDateRangeChange"
|
||||
valuePropName="defaultDateRange">
|
||||
<DatePickerMenu showSelectedCustomRange />
|
||||
</Form.Item>
|
||||
)}
|
||||
{selectedFilter.includes(TEST_CASE_FILTERS.tags) && (
|
||||
<Form.Item
|
||||
className="m-0 w-80"
|
||||
label={t('label.tag-plural')}
|
||||
name="tags">
|
||||
<Select
|
||||
allowClear
|
||||
showSearch
|
||||
data-testid="tags-select-filter"
|
||||
loading={isOptionsLoading}
|
||||
mode="multiple"
|
||||
options={tagOptions}
|
||||
placeholder={t('label.tag-plural')}
|
||||
onSearch={debounceFetchTagOptions}
|
||||
/>
|
||||
</Form.Item>
|
||||
)}
|
||||
{selectedFilter.includes(TEST_CASE_FILTERS.tier) && (
|
||||
<Form.Item
|
||||
className="m-0 w-40"
|
||||
label={t('label.tier')}
|
||||
name="tier">
|
||||
<Select
|
||||
allowClear
|
||||
showSearch
|
||||
data-testid="tier-select-filter"
|
||||
options={tierOptions}
|
||||
placeholder={t('label.tier')}
|
||||
/>
|
||||
</Form.Item>
|
||||
)}
|
||||
{selectedFilter.includes(TEST_CASE_FILTERS.service) && (
|
||||
<Form.Item
|
||||
className="m-0 w-80"
|
||||
label={t('label.service')}
|
||||
name="serviceName">
|
||||
<Select
|
||||
allowClear
|
||||
showSearch
|
||||
data-testid="service-select-filter"
|
||||
loading={isOptionsLoading}
|
||||
options={serviceOptions}
|
||||
placeholder={t('label.service')}
|
||||
onSearch={debounceFetchServiceOptions}
|
||||
/>
|
||||
</Form.Item>
|
||||
)}
|
||||
{selectedFilter.includes(TEST_CASE_FILTERS.dimension) && (
|
||||
<Form.Item
|
||||
className="m-0 w-80"
|
||||
label={t('label.dimension')}
|
||||
name="dataQualityDimension">
|
||||
<Select
|
||||
allowClear
|
||||
showSearch
|
||||
data-testid="dimension-select-filter"
|
||||
options={TEST_CASE_DIMENSIONS_OPTION}
|
||||
placeholder={t('label.dimension')}
|
||||
/>
|
||||
</Form.Item>
|
||||
)}
|
||||
</Space>
|
||||
</Form>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<SummaryPanel
|
||||
showAdditionalSummary
|
||||
isLoading={isTestCaseSummaryLoading}
|
||||
testSummary={testCaseSummary}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<DataQualityTab
|
||||
afterDeleteAction={fetchTestCases}
|
||||
breadcrumbData={[
|
||||
{
|
||||
name: t('label.data-quality'),
|
||||
url: getDataQualityPagePath(DataQualityPageTabs.TEST_CASES),
|
||||
},
|
||||
]}
|
||||
fetchTestCases={sortTestCase}
|
||||
isLoading={isLoading}
|
||||
pagingData={pagingData}
|
||||
showPagination={showPagination}
|
||||
testCases={testCase}
|
||||
onTestCaseResultUpdate={handleStatusSubmit}
|
||||
onTestUpdate={handleTestCaseUpdate}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{selectedFilter.includes(TEST_CASE_FILTERS.table) && (
|
||||
<Form.Item
|
||||
className="m-0 w-80"
|
||||
label={t('label.table')}
|
||||
name="tableFqn">
|
||||
<Select
|
||||
allowClear
|
||||
showSearch
|
||||
data-testid="table-select-filter"
|
||||
loading={isOptionsLoading}
|
||||
options={tableOptions}
|
||||
placeholder={t('label.table')}
|
||||
onSearch={debounceFetchTableData}
|
||||
/>
|
||||
</Form.Item>
|
||||
)}
|
||||
{selectedFilter.includes(TEST_CASE_FILTERS.platform) && (
|
||||
<Form.Item
|
||||
className="m-0 w-min-20"
|
||||
label={t('label.platform')}
|
||||
name="testPlatforms">
|
||||
<Select
|
||||
allowClear
|
||||
data-testid="platform-select-filter"
|
||||
mode="multiple"
|
||||
options={TEST_CASE_PLATFORM_OPTION}
|
||||
placeholder={t('label.platform')}
|
||||
/>
|
||||
</Form.Item>
|
||||
)}
|
||||
{selectedFilter.includes(TEST_CASE_FILTERS.type) && (
|
||||
<Form.Item
|
||||
className="m-0 w-40"
|
||||
label={t('label.type')}
|
||||
name="testCaseType">
|
||||
<Select
|
||||
allowClear
|
||||
data-testid="test-case-type-select-filter"
|
||||
options={TEST_CASE_TYPE_OPTION}
|
||||
placeholder={t('label.type')}
|
||||
/>
|
||||
</Form.Item>
|
||||
)}
|
||||
{selectedFilter.includes(TEST_CASE_FILTERS.status) && (
|
||||
<Form.Item
|
||||
className="m-0 w-40"
|
||||
label={t('label.status')}
|
||||
name="testCaseStatus">
|
||||
<Select
|
||||
allowClear
|
||||
data-testid="status-select-filter"
|
||||
options={TEST_CASE_STATUS_OPTION}
|
||||
placeholder={t('label.status')}
|
||||
/>
|
||||
</Form.Item>
|
||||
)}
|
||||
{selectedFilter.includes(TEST_CASE_FILTERS.lastRun) && (
|
||||
<Form.Item
|
||||
className="m-0"
|
||||
label={t('label.last-run')}
|
||||
name="lastRunRange"
|
||||
trigger="handleDateRangeChange"
|
||||
valuePropName="defaultDateRange">
|
||||
<DatePickerMenu showSelectedCustomRange />
|
||||
</Form.Item>
|
||||
)}
|
||||
{selectedFilter.includes(TEST_CASE_FILTERS.tags) && (
|
||||
<Form.Item
|
||||
className="m-0 w-80"
|
||||
label={t('label.tag-plural')}
|
||||
name="tags">
|
||||
<Select
|
||||
allowClear
|
||||
showSearch
|
||||
data-testid="tags-select-filter"
|
||||
loading={isOptionsLoading}
|
||||
mode="multiple"
|
||||
options={tagOptions}
|
||||
placeholder={t('label.tag-plural')}
|
||||
onSearch={debounceFetchTagOptions}
|
||||
/>
|
||||
</Form.Item>
|
||||
)}
|
||||
{selectedFilter.includes(TEST_CASE_FILTERS.tier) && (
|
||||
<Form.Item
|
||||
className="m-0 w-40"
|
||||
label={t('label.tier')}
|
||||
name="tier">
|
||||
<Select
|
||||
allowClear
|
||||
showSearch
|
||||
data-testid="tier-select-filter"
|
||||
options={tierOptions}
|
||||
placeholder={t('label.tier')}
|
||||
/>
|
||||
</Form.Item>
|
||||
)}
|
||||
{selectedFilter.includes(TEST_CASE_FILTERS.service) && (
|
||||
<Form.Item
|
||||
className="m-0 w-80"
|
||||
label={t('label.service')}
|
||||
name="serviceName">
|
||||
<Select
|
||||
allowClear
|
||||
showSearch
|
||||
data-testid="service-select-filter"
|
||||
loading={isOptionsLoading}
|
||||
options={serviceOptions}
|
||||
placeholder={t('label.service')}
|
||||
onSearch={debounceFetchServiceOptions}
|
||||
/>
|
||||
</Form.Item>
|
||||
)}
|
||||
{selectedFilter.includes(TEST_CASE_FILTERS.dimension) && (
|
||||
<Form.Item
|
||||
className="m-0 w-80"
|
||||
label={t('label.dimension')}
|
||||
name="dataQualityDimension">
|
||||
<Select
|
||||
allowClear
|
||||
showSearch
|
||||
data-testid="dimension-select-filter"
|
||||
options={TEST_CASE_DIMENSIONS_OPTION}
|
||||
placeholder={t('label.dimension')}
|
||||
/>
|
||||
</Form.Item>
|
||||
)}
|
||||
</Space>
|
||||
</Form>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<SummaryPanel
|
||||
showAdditionalSummary
|
||||
isLoading={isTestCaseSummaryLoading}
|
||||
testSummary={testCaseSummary}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<PieChartSummaryPanel
|
||||
isLoading={isTestCaseSummaryLoading}
|
||||
testSummary={testCaseSummary}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<DataQualityTab
|
||||
afterDeleteAction={fetchTestCases}
|
||||
breadcrumbData={[
|
||||
{
|
||||
name: t('label.data-quality'),
|
||||
url: getDataQualityPagePath(DataQualityPageTabs.TEST_CASES),
|
||||
},
|
||||
]}
|
||||
fetchTestCases={sortTestCase}
|
||||
isLoading={isLoading}
|
||||
pagingData={pagingData}
|
||||
showPagination={showPagination}
|
||||
testCases={testCase}
|
||||
onTestCaseResultUpdate={handleStatusSubmit}
|
||||
onTestUpdate={handleTestCaseUpdate}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
@ -11,13 +11,15 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Card, Col, Row, Tabs, Typography } from 'antd';
|
||||
import { Button, Card, Col, Row, Tabs, Typography } from 'antd';
|
||||
import { isEmpty } from 'lodash';
|
||||
import React, { useMemo } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useHistory, useParams } from 'react-router-dom';
|
||||
import { Link, useHistory, useParams } from 'react-router-dom';
|
||||
import ManageButton from '../../components/common/EntityPageInfos/ManageButton/ManageButton';
|
||||
import TabsLabel from '../../components/common/TabsLabel/TabsLabel.component';
|
||||
import { ROUTES } from '../../constants/constants';
|
||||
import { usePermissionProvider } from '../../context/PermissionProvider/PermissionProvider';
|
||||
import { EntityType } from '../../enums/entity.enum';
|
||||
import { withPageLayout } from '../../hoc/withPageLayout';
|
||||
import i18n from '../../utils/i18next/LocalUtil';
|
||||
@ -32,6 +34,8 @@ const DataQualityPage = () => {
|
||||
useParams<{ tab: DataQualityPageTabs }>();
|
||||
const history = useHistory();
|
||||
const { t } = useTranslation();
|
||||
const { permissions } = usePermissionProvider();
|
||||
const { testSuite: testSuitePermission } = permissions;
|
||||
const menuItems = useMemo(() => {
|
||||
const data = DataQualityClassBase.getDataQualityTab();
|
||||
|
||||
@ -58,45 +62,67 @@ const DataQualityPage = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Card className="h-full overflow-y-auto">
|
||||
<DataQualityProvider>
|
||||
<Row data-testid="data-insight-container" gutter={[0, 16]}>
|
||||
<Col span={isEmpty(extraDropdownContent) ? 24 : 23}>
|
||||
<Typography.Title
|
||||
className="m-b-md"
|
||||
data-testid="page-title"
|
||||
level={5}>
|
||||
{t('label.data-quality')}
|
||||
</Typography.Title>
|
||||
<Typography.Paragraph
|
||||
className="text-grey-muted"
|
||||
data-testid="page-sub-title">
|
||||
{t('message.page-sub-header-for-data-quality')}
|
||||
</Typography.Paragraph>
|
||||
</Col>
|
||||
{isEmpty(extraDropdownContent) ? null : (
|
||||
<Col className="d-flex justify-end" span={1}>
|
||||
<ManageButton
|
||||
entityName={EntityType.TEST_CASE}
|
||||
entityType={EntityType.TEST_CASE}
|
||||
extraDropdownContent={extraDropdownContent}
|
||||
/>
|
||||
<DataQualityProvider>
|
||||
<Row data-testid="data-insight-container" gutter={[0, 16]}>
|
||||
<Col span={24}>
|
||||
<Card>
|
||||
<Row>
|
||||
<Col span={isEmpty(extraDropdownContent) ? 16 : 23}>
|
||||
<Typography.Title
|
||||
className="m-b-md"
|
||||
data-testid="page-title"
|
||||
level={5}>
|
||||
{t('label.data-quality')}
|
||||
</Typography.Title>
|
||||
<Typography.Paragraph
|
||||
className="text-grey-muted m-b-0"
|
||||
data-testid="page-sub-title">
|
||||
{t('message.page-sub-header-for-data-quality')}
|
||||
</Typography.Paragraph>
|
||||
</Col>
|
||||
)}
|
||||
<Col span={24}>
|
||||
<Tabs
|
||||
activeKey={activeTab}
|
||||
className="tabs-new"
|
||||
data-testid="tabs"
|
||||
items={menuItems}
|
||||
onChange={handleTabChange}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</DataQualityProvider>
|
||||
</Card>
|
||||
</div>
|
||||
<Col className="d-flex justify-end" span={8}>
|
||||
{activeTab === DataQualityPageTabs.TEST_SUITES &&
|
||||
testSuitePermission?.Create && (
|
||||
<Link
|
||||
data-testid="add-test-suite-btn"
|
||||
to={ROUTES.ADD_TEST_SUITES}>
|
||||
<Button type="primary">
|
||||
{t('label.add-entity', {
|
||||
entity: t('label.bundle-suite-plural'),
|
||||
})}
|
||||
</Button>
|
||||
</Link>
|
||||
)}
|
||||
{activeTab === DataQualityPageTabs.TEST_CASES &&
|
||||
testSuitePermission?.Create && (
|
||||
<Button data-testid="add-test-case-btn" type="primary">
|
||||
{t('label.add-entity', {
|
||||
entity: t('label.test-case'),
|
||||
})}
|
||||
</Button>
|
||||
)}
|
||||
{isEmpty(extraDropdownContent) ? null : (
|
||||
<ManageButton
|
||||
entityName={EntityType.TEST_CASE}
|
||||
entityType={EntityType.TEST_CASE}
|
||||
extraDropdownContent={extraDropdownContent}
|
||||
/>
|
||||
)}
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<Tabs
|
||||
activeKey={activeTab}
|
||||
className="tabs-new data-quality-page-tabs"
|
||||
data-testid="tabs"
|
||||
items={menuItems}
|
||||
onChange={handleTabChange}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</DataQualityProvider>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -13,9 +13,8 @@
|
||||
|
||||
@import (reference) '../../styles/variables.less';
|
||||
|
||||
.data-quality-page-left-panel-menu {
|
||||
&.ant-menu-root.ant-menu-inline {
|
||||
padding-top: @size-md;
|
||||
border-radius: @border-radius-sm;
|
||||
.data-quality-page-tabs {
|
||||
.ant-tabs-tabpane {
|
||||
margin-top: @size-md;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user