From e267d0fe14a2263b91d8a84fc07e931ebad5e5ad Mon Sep 17 00:00:00 2001 From: Shailesh Parmar Date: Wed, 12 Jul 2023 18:35:38 +0530 Subject: [PATCH] ui: work on data quality feedback part 2 (#12386) --- .../src/components/Chart/CustomBarChart.tsx | 6 +- .../Chart/OperationDateBarChart.tsx | 6 +- .../component/ProfilerDetailsCard.tsx | 1 + .../TableProfiler/TableProfilerV1.tsx | 74 +++++++++++++------ .../ui/src/locale/languages/en-us.json | 2 +- .../ui/src/locale/languages/es-es.json | 3 +- .../ui/src/locale/languages/fr-fr.json | 3 +- .../ui/src/locale/languages/ja-jp.json | 3 +- .../ui/src/locale/languages/pt-br.json | 3 +- .../ui/src/locale/languages/zh-cn.json | 3 +- .../ui/src/styles/components/rechart.less | 25 +++++++ .../src/main/resources/ui/src/styles/index.js | 1 + 12 files changed, 98 insertions(+), 32 deletions(-) create mode 100644 openmetadata-ui/src/main/resources/ui/src/styles/components/rechart.less diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Chart/CustomBarChart.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Chart/CustomBarChart.tsx index 2681399c335..7ee09111150 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Chart/CustomBarChart.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Chart/CustomBarChart.tsx @@ -57,7 +57,11 @@ const CustomBarChart = ({ }; return ( - + + = ({ {data.length > 0 ? ( diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/TableProfilerV1.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/TableProfilerV1.tsx index 0534b6dfd7d..903c4ca6e13 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/TableProfilerV1.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/TableProfilerV1.tsx @@ -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 = ({ return { profile: table?.profile, columns: table?.columns || [] }; }, [table]); const [settingModalVisible, setSettingModalVisible] = useState(false); + const allTests = useRef([]); const [columnTests, setColumnTests] = useState([]); const [tableTests, setTableTests] = useState({ tests: [], @@ -130,7 +138,7 @@ const TableProfilerV1: FC = ({ useState(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 = ({ } }; + 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 = ({ } }; + 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 = ({ testCases={getFilterTestCase()} testSuite={testSuite} onTestCaseResultUpdate={handleResultUpdate} - onTestUpdate={fetchAllTests} + onTestUpdate={handleTestUpdate} /> )} diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json index edc90b9353b..26ad4e0ca34 100644 --- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json +++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json @@ -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.", diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/es-es.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/es-es.json index 8df8ad3528e..9e0439d411f 100644 --- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/es-es.json +++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/es-es.json @@ -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.", diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/fr-fr.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/fr-fr.json index 41ad3f22615..9a8595bee1d 100644 --- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/fr-fr.json +++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/fr-fr.json @@ -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.", diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/ja-jp.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/ja-jp.json index ae7a4ab2e93..e6a8bc5a4eb 100644 --- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/ja-jp.json +++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/ja-jp.json @@ -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.", diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/pt-br.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/pt-br.json index 13ad3057980..f9f69564bea 100644 --- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/pt-br.json +++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/pt-br.json @@ -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.", diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/zh-cn.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/zh-cn.json index 4de405a49a1..dd04302d1ac 100644 --- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/zh-cn.json +++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/zh-cn.json @@ -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 界面，从元数据类型服务中提取元数据", diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/components/rechart.less b/openmetadata-ui/src/main/resources/ui/src/styles/components/rechart.less new file mode 100644 index 00000000000..68c74646e55 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/styles/components/rechart.less @@ -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; + } +} diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/index.js b/openmetadata-ui/src/main/resources/ui/src/styles/index.js index 6fc44ec1ec0..bb8829bbb2d 100644 --- a/openmetadata-ui/src/main/resources/ui/src/styles/index.js +++ b/openmetadata-ui/src/main/resources/ui/src/styles/index.js @@ -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';