yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-08-15 04:26:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

ui: work on data quality feedback part 2 (#12386)

Browse Source
This commit is contained in:
Shailesh Parmar 2023-07-12 18:35:38 +05:30 committed by GitHub
parent 604eca9b21
commit e267d0fe14
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 98 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
openmetadata-ui/src/main/resources/ui/src/components/Chart/CustomBarChart.tsx
View File

@ -57,7 +57,11 @@ const CustomBarChart = ({
};
return (
<ResponsiveContainer debounce={200} id={`${name}_graph`} minHeight={300}>
<ResponsiveContainer
className="custom-legend"
debounce={200}
id={`${name}_graph`}
minHeight={300}>
<BarChart className="tw-w-full" data={data} margin={{ left: 16 }}>
<CartesianGrid stroke={GRAPH_BACKGROUND_COLOR} />
<XAxis

6
openmetadata-ui/src/main/resources/ui/src/components/Chart/OperationDateBarChart.tsx
View File

@ -63,7 +63,11 @@ const OperationDateBarChart = ({
}
return (
<ResponsiveContainer debounce={200} id={`${name}_graph`} minHeight={300}>
<ResponsiveContainer
className="custom-legend"
debounce={200}
id={`${name}_graph`}
minHeight={300}>
<ComposedChart className="w-full" data={data} margin={{ left: 16 }}>
<XAxis
dataKey="name"

1
openmetadata-ui/src/main/resources/ui/src/components/ProfilerDashboard/component/ProfilerDetailsCard.tsx
View File

@ -70,6 +70,7 @@ const ProfilerDetailsCard: React.FC<ProfilerDetailsCardProps> = ({
<Col span={20}>
{data.length > 0 ? (
<ResponsiveContainer
className="custom-legend"
debounce={200}
id={`${name}_graph`}
minHeight={300}>

74
openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/TableProfilerV1.tsx
View File

@ -46,7 +46,14 @@ import {
toLower,
} from 'lodash';
import Qs from 'qs';
import React, { FC, useEffect, useMemo, useState } from 'react';
import React, {
FC,
useCallback,
useEffect,
useMemo,
useRef,
useState,
} from 'react';
import { useTranslation } from 'react-i18next';
import { Link, useHistory, useLocation, useParams } from 'react-router-dom';
import { getLatestTableProfileByFqn } from 'rest/tableAPI';
@ -116,6 +123,7 @@ const TableProfilerV1: FC<TableProfilerProps> = ({
return { profile: table?.profile, columns: table?.columns || [] };
}, [table]);
const [settingModalVisible, setSettingModalVisible] = useState(false);
const allTests = useRef<TestCase[]>([]);
const [columnTests, setColumnTests] = useState<TestCase[]>([]);
const [tableTests, setTableTests] = useState<TableTestsType>({
tests: [],
@ -130,7 +138,7 @@ const TableProfilerV1: FC<TableProfilerProps> = ({
useState<DateRangeObject>(DEFAULT_RANGE_DATA);
const showOperationGraph = useMemo(() => {
if (table && table.serviceType) {
if (table?.serviceType) {
return allowedServiceForOperationGraph.includes(table.serviceType);
}
@ -332,36 +340,41 @@ const TableProfilerV1: FC<TableProfilerProps> = ({
}
};
const splitTableAndColumnTest = (data: TestCase[]) => {
const columnTestsCase: TestCase[] = [];
const tableTests: TableTestsType = {
tests: [],
results: { ...INITIAL_TEST_RESULT_SUMMARY },
};
data.forEach((test) => {
if (test.entityFQN === table?.fullyQualifiedName) {
tableTests.tests.push(test);
updateTestResults(
tableTests.results,
test.testCaseResult?.testCaseStatus || ''
);
return;
}
columnTestsCase.push(test);
});
setTableTests(tableTests);
setColumnTests(columnTestsCase);
};
const fetchAllTests = async (params?: ListTestCaseParams) => {
setIsTestCaseLoading(true);
try {
const { data } = await getListTestCase({
...params,
fields: 'testCaseResult,entityLink,testDefinition,testSuite',
entityLink: generateEntityLink(table?.fullyQualifiedName || ''),
includeAllTests: true,
limit: API_RES_MAX_SIZE,
...params,
});
const columnTestsCase: TestCase[] = [];
const tableTests: TableTestsType = {
tests: [],
results: { ...INITIAL_TEST_RESULT_SUMMARY },
};
data.forEach((test) => {
if (test.entityFQN === table?.fullyQualifiedName) {
tableTests.tests.push(test);
updateTestResults(
tableTests.results,
test.testCaseResult?.testCaseStatus || ''
);
return;
}
columnTestsCase.push(test);
});
setTableTests(tableTests);
setColumnTests(columnTestsCase);
allTests.current = data;
splitTableAndColumnTest(data);
} catch (error) {
showErrorToast(error as AxiosError);
} finally {
@ -369,6 +382,19 @@ const TableProfilerV1: FC<TableProfilerProps> = ({
}
};
const handleTestUpdate = useCallback(
(testCase?: TestCase) => {
if (isUndefined(testCase)) {
return;
}
const updatedTests = allTests.current.map((test) => {
return testCase.id === test.id ? { ...test, ...testCase } : test;
});
splitTableAndColumnTest(updatedTests);
allTests.current = updatedTests;
},
[allTests.current]
);
const handleTestCaseStatusChange = (value: string) => {
if (value !== selectedTestCaseStatus) {
setSelectedTestCaseStatus(value);
@ -620,7 +646,7 @@ const TableProfilerV1: FC<TableProfilerProps> = ({
testCases={getFilterTestCase()}
testSuite={testSuite}
onTestCaseResultUpdate={handleResultUpdate}
onTestUpdate={fetchAllTests}
onTestUpdate={handleTestUpdate}
/>
)}

2
openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json
View File

@ -1303,7 +1303,7 @@
"page-sub-header-for-bots": "Create well-defined bots with scoped access permissions.",
"page-sub-header-for-column-profile": "Monitor and understand your columns structure with the profiler",
"page-sub-header-for-dashboards": "Ingest metadata from the most popular dashboard services.",
"page-sub-header-for-data-quality": "Build trust in your data with quality tests and build reliable data products.",
"page-sub-header-for-data-quality": "Build trust in your data with quality tests and create reliable data products.",
"page-sub-header-for-databases": "Ingest metadata from the most popular database services.",
"page-sub-header-for-messagings": "Ingest metadata from the most used messaging services.",
"page-sub-header-for-metadata": "Ingest metadata from metadata services right from the UI.",

3
openmetadata-ui/src/main/resources/ui/src/locale/languages/es-es.json
View File

@ -175,6 +175,7 @@
"creating-account": "Creando cuenta",
"credentials-type": "Tipo de credenciales",
"criteria": "Criterio",
"cron": "Cron",
"custom": "Custom",
"custom-attribute-plural": "Atributos personalizados",
"custom-entity": "Custom entity",
@ -1302,7 +1303,7 @@
"page-sub-header-for-bots": "Create well-defined bots with scoped access permissions.",
"page-sub-header-for-column-profile": "Monitor and understand your columns structure with the profiler",
"page-sub-header-for-dashboards": "Ingest metadata from the most popular dashboard services.",
"page-sub-header-for-data-quality": "Build trust in your data with quality tests and build reliable data products.",
"page-sub-header-for-data-quality": "Build trust in your data with quality tests and create reliable data products.",
"page-sub-header-for-databases": "Ingest metadata from the most popular database services.",
"page-sub-header-for-messagings": "Ingest metadata from the most used messaging services.",
"page-sub-header-for-metadata": "Ingest metadata from metadata services right from the UI.",

3
openmetadata-ui/src/main/resources/ui/src/locale/languages/fr-fr.json
View File

@ -175,6 +175,7 @@
"creating-account": "Création du compte",
"credentials-type": "Type d'identifiant",
"criteria": "Critères",
"cron": "Cron",
"custom": "Custom",
"custom-attribute-plural": "Propriétés Personalisées",
"custom-entity": "Entité Personalisées",
@ -1302,7 +1303,7 @@
"page-sub-header-for-bots": "Créer des agents numériques bien définis avec des autorisations d'accès limitées.",
"page-sub-header-for-column-profile": "Surveiller et comprendre la structure de vos colonnes avec le profilage",
"page-sub-header-for-dashboards": "Ingérer les métadonnées des services de tableau de bord les plus populaires.",
"page-sub-header-for-data-quality": "Renforcer la confiance dans vos données avec des tests de qualité et créer des produits de données fiables.",
"page-sub-header-for-data-quality": "Renforcez la confiance dans vos données grâce à des tests de qualité et créez des produits de données fiables.",
"page-sub-header-for-databases": "Ingérer les métadonnées des services de base de données les plus populaires.",
"page-sub-header-for-messagings": "Ingérer les métadonnées des services de messagerie les plus utilisés.",
"page-sub-header-for-metadata": "Ingérer les métadonnées des services de métadonnées, directement depuis l'interface utilisateur.",

3
openmetadata-ui/src/main/resources/ui/src/locale/languages/ja-jp.json
View File

@ -175,6 +175,7 @@
"creating-account": "アカウントの作成",
"credentials-type": "Credentials Type",
"criteria": "クライテリア",
"cron": "Cron",
"custom": "Custom",
"custom-attribute-plural": "カスタム属性",
"custom-entity": "Custom entity",
@ -1302,7 +1303,7 @@
"page-sub-header-for-bots": "Create well-defined bots with scoped access permissions.",
"page-sub-header-for-column-profile": "Monitor and understand your columns structure with the profiler",
"page-sub-header-for-dashboards": "Ingest metadata from the most popular dashboard services.",
"page-sub-header-for-data-quality": "Build trust in your data with quality tests and build reliable data products.",
"page-sub-header-for-data-quality": "Build trust in your data with quality tests and create reliable data products.",
"page-sub-header-for-databases": "Ingest metadata from the most popular database services.",
"page-sub-header-for-messagings": "Ingest metadata from the most used messaging services.",
"page-sub-header-for-metadata": "Ingest metadata from metadata services right from the UI.",

3
openmetadata-ui/src/main/resources/ui/src/locale/languages/pt-br.json
View File

@ -175,6 +175,7 @@
"creating-account": "Criando conta",
"credentials-type": "Tipo de credenciais",
"criteria": "Critério",
"cron": "Cron",
"custom": "Custom",
"custom-attribute-plural": "Atributos personalizados",
"custom-entity": "Custom entity",
@ -1302,7 +1303,7 @@
"page-sub-header-for-bots": "Create well-defined bots with scoped access permissions.",
"page-sub-header-for-column-profile": "Monitor and understand your columns structure with the profiler",
"page-sub-header-for-dashboards": "Ingest metadata from the most popular dashboard services.",
"page-sub-header-for-data-quality": "Build trust in your data with quality tests and build reliable data products.",
"page-sub-header-for-data-quality": "Build trust in your data with quality tests and create reliable data products.",
"page-sub-header-for-databases": "Ingest metadata from the most popular database services.",
"page-sub-header-for-messagings": "Ingest metadata from the most used messaging services.",
"page-sub-header-for-metadata": "Ingest metadata from metadata services right from the UI.",

3
openmetadata-ui/src/main/resources/ui/src/locale/languages/zh-cn.json
View File

@ -175,6 +175,7 @@
"creating-account": "注册帐号",
"credentials-type": "凭证类型",
"criteria": "标准",
"cron": "Cron",
"custom": "Custom",
"custom-attribute-plural": "自定义属性",
"custom-entity": "自定义条目",
@ -1302,7 +1303,7 @@
"page-sub-header-for-bots": "创建一个有限访问权限的机器人",
"page-sub-header-for-column-profile": "通过数据分析工具了解和跟踪您的数据表列结构",
"page-sub-header-for-dashboards": "从最流行的仪表板类型服务中提取元数据",
"page-sub-header-for-data-quality": "通过引入数据质控测试提升数据的可信任度，构建稳健的衍生数据产品",
"page-sub-header-for-data-quality": "通过质量测试建立对数据的信任，创建可靠的数据产品。",
"page-sub-header-for-databases": "从最流行的数据库类型服务中提取元数据",
"page-sub-header-for-messagings": "从最常用的消息队列类型服务中提取元数据",
"page-sub-header-for-metadata": "通过 UI 界面，从元数据类型服务中提取元数据",

25
openmetadata-ui/src/main/resources/ui/src/styles/components/rechart.less Normal file
View File

@ -0,0 +1,25 @@
/*
* Copyright 2023 Collate.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.custom-legend {
.recharts-default-legend {
.recharts-legend-item {
cursor: pointer;
}
}
}
.recharts-default-legend {
.recharts-legend-item {
// need to add !important as library applying margin with inline style
margin-right: 16px !important;
}
}

1
openmetadata-ui/src/main/resources/ui/src/styles/index.js
View File

@ -30,6 +30,7 @@ import './components/menu.less';
import './components/profiler.less';
import './components/radio.less';
import './components/react-awesome-query.less';
import './components/rechart.less';
import './components/size.less';
import './components/slider.less';
import './components/step.less';