From 0aa62df5bed469e0b04780ece131d1659aafa135 Mon Sep 17 00:00:00 2001 From: Aniket Katkar <51777795+aniketkatkar97@users.noreply.github.com> Date: Sat, 19 Nov 2022 19:52:53 +0530 Subject: [PATCH] UI #8513: UI improvements 0.13 Part-3 (#8889) * Removed highlighting on hover of data cards for data assets other than table * Fixed alignment issues in Executions tab for pipelines * Entity summary panel profiler data styling changed * Added vector svg to use in Executions tab * Changed OM logo to show on services page for Openmetadata Service * Fixed Breadcrumb typo for add ingestion page Replaced 'entity' with 'data asset' Localisation * Fixed version page bug Co-authored-by: Chirag Madlani <12962843+chirag-madlani@users.noreply.github.com> --- .../resources/ui/src/assets/svg/vector.svg | 3 ++ .../TreeView/TreeViewTab.component.tsx | 35 ++++++++++--------- .../EntitySummaryPanel.component.tsx | 7 ++-- .../EntitySummaryPanel.style.less | 5 +-- .../ui/src/components/Services/Services.tsx | 2 +- .../ErrorPlaceHolderES.tsx | 2 +- .../table-data-card-v2/TableDataCardV2.less | 2 +- .../table-data-card-v2/TableDataCardV2.tsx | 12 +++++-- .../ui/src/constants/services.const.ts | 2 ++ .../ui/src/locale/languages/en-us.json | 7 ++-- .../AddIngestionPage.component.tsx | 8 +++-- .../ui/src/pages/teams/AddTeamForm.tsx | 4 ++- .../resources/ui/src/utils/EntityUtils.tsx | 4 ++- .../ui/src/utils/EntityVersionUtils.tsx | 4 +-- .../resources/ui/src/utils/ServiceUtils.tsx | 4 +++ 15 files changed, 64 insertions(+), 37 deletions(-) create mode 100644 openmetadata-ui/src/main/resources/ui/src/assets/svg/vector.svg diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/vector.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/vector.svg new file mode 100644 index 00000000000..490e9353386 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/vector.svg @@ -0,0 +1,3 @@ + + + diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Execution/TreeView/TreeViewTab.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Execution/TreeView/TreeViewTab.component.tsx index ae2a0de09ff..bc67d462df9 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Execution/TreeView/TreeViewTab.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Execution/TreeView/TreeViewTab.component.tsx @@ -15,9 +15,9 @@ import Tree from 'antd/lib/tree'; import { isEmpty } from 'lodash'; import React, { useMemo } from 'react'; import { useTranslation } from 'react-i18next'; +import { ReactComponent as ArrowSvg } from '../../../assets/svg/vector.svg'; import { PipelineStatus, Task } from '../../../generated/entity/data/pipeline'; import { getTreeData, getTreeViewData } from '../../../utils/executionUtils'; -import SVGIcons, { Icons } from '../../../utils/SvgUtils'; import { formatDateTimeFromSeconds } from '../../../utils/TimeUtils'; import './tree-view-tab.less'; @@ -50,22 +50,23 @@ const TreeViewTab = ({ return ( - - - - {formatDateTimeFromSeconds(startTime)} to{' '} - {formatDateTimeFromSeconds(endTime)} - - - + + + + + + + {formatDateTimeFromSeconds(startTime)} to{' '} + {formatDateTimeFromSeconds(endTime)} + + + + + {isEmpty(viewData) && ( diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/EntitySummaryPanel.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/EntitySummaryPanel.component.tsx index 5b42e0ff502..fb1bda7a3c5 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/EntitySummaryPanel.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/EntitySummaryPanel.component.tsx @@ -90,14 +90,13 @@ export default function EntitySummaryPanel({ - + )}> {field.value} - + diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/EntitySummaryPanel.style.less b/openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/EntitySummaryPanel.style.less index 8580e647b9c..a85261907d6 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/EntitySummaryPanel.style.less +++ b/openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/EntitySummaryPanel.style.less @@ -39,8 +39,9 @@ .summary-panel-statistics-count { color: #37352f; - line-height: 29px; - font-weight: 600; + font-size: 18px; + line-height: 24px; + font-weight: 700; } .text-gray { diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Services/Services.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Services/Services.tsx index 119d7d89f24..7c3df61f097 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Services/Services.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Services/Services.tsx @@ -157,7 +157,7 @@ const Services = ({
- {getServiceLogo(service.serviceType || '', 'tw-h-8')} + {getServiceLogo(service.serviceType || '', 'h-7')}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/error-with-placeholder/ErrorPlaceHolderES.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/error-with-placeholder/ErrorPlaceHolderES.tsx index 05f01a7eb3b..4bc5da6cc0d 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/error-with-placeholder/ErrorPlaceHolderES.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/common/error-with-placeholder/ErrorPlaceHolderES.tsx @@ -31,7 +31,7 @@ const stepsData = [ step: 1, title: 'Ingest Sample Data', description: - 'Run sample data to ingest sample entities into your OpenMetadata.', + 'Run sample data to ingest sample data assets into your OpenMetadata.', link: 'https://docs.open-metadata.org/openmetadata/ingestion/workflows/profiler', }, { diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/table-data-card-v2/TableDataCardV2.less b/openmetadata-ui/src/main/resources/ui/src/components/common/table-data-card-v2/TableDataCardV2.less index 003226061a0..e4b71b7faf0 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/table-data-card-v2/TableDataCardV2.less +++ b/openmetadata-ui/src/main/resources/ui/src/components/common/table-data-card-v2/TableDataCardV2.less @@ -14,7 +14,7 @@ @background-color: #ffffff; @highlidghted-border-color: #1890ff; -.table-data-card-container { +.data-asset-info-card-container { border: 1px solid @border-color; border-radius: 6px; background-color: @background-color; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/table-data-card-v2/TableDataCardV2.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/table-data-card-v2/TableDataCardV2.tsx index ee69f433912..a81232f469f 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/table-data-card-v2/TableDataCardV2.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/common/table-data-card-v2/TableDataCardV2.tsx @@ -13,13 +13,15 @@ import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import classNames from 'classnames'; import { isString, startCase, uniqueId } from 'lodash'; import { ExtraInfo } from 'Models'; import React, { useMemo } from 'react'; -import { useLocation } from 'react-router-dom'; +import { useLocation, useParams } from 'react-router-dom'; import AppState from '../../../AppState'; import { FQN_SEPARATOR_CHAR } from '../../../constants/char.constants'; import { ROUTES } from '../../../constants/constants'; +import { tabsInfo } from '../../../constants/explore.constants'; import { EntityType } from '../../../enums/entity.enum'; import { SearchIndex } from '../../../enums/search.enum'; import { CurrentTourPageType } from '../../../enums/tour.enum'; @@ -58,6 +60,7 @@ const TableDataCardV2: React.FC = ({ handleSummaryPanelDisplay, }) => { const location = useLocation(); + const { tab } = useParams<{ tab: string }>(); const otherDetails = useMemo(() => { const _otherDetails: ExtraInfo[] = [ @@ -114,7 +117,12 @@ const TableDataCardV2: React.FC = ({ return (
{ diff --git a/openmetadata-ui/src/main/resources/ui/src/constants/services.const.ts b/openmetadata-ui/src/main/resources/ui/src/constants/services.const.ts index 91bb886385c..0b778dbe1ac 100644 --- a/openmetadata-ui/src/main/resources/ui/src/constants/services.const.ts +++ b/openmetadata-ui/src/main/resources/ui/src/constants/services.const.ts @@ -67,6 +67,7 @@ import trino from '../assets/img/service-icon-trino.png'; import vertica from '../assets/img/service-icon-vertica.png'; import dashboardDefault from '../assets/svg/dashboard.svg'; import iconDefaultService from '../assets/svg/default-service-icon.svg'; +import logo from '../assets/svg/logo-monogram.svg'; import pipelineDefault from '../assets/svg/pipeline.svg'; import plus from '../assets/svg/plus.svg'; import mlflow from '../assets/svg/service-icon-mlflow.svg'; @@ -125,6 +126,7 @@ export const DAGSTER = dagster; export const FIVETRAN = fivetran; export const AMUNDSEN = amundsen; export const ATLAS = atlas; +export const LOGO = logo; export const AIRFLOW = airflow; export const PREFECT = prefect; 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 471f136b398..fa9b6988b23 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 @@ -65,7 +65,7 @@ "enter-display-name": "Enter display name", "edit-display-name": "Edit Display Name", "enter-name": "Enter Name", - "name-already-exist": "Name already exists", + "entity-already-exists": "{{entity}} already exists.", "special-character-not-allowed": "Special characters are not allowed", "add-team": "Add Team", "close-with-comment": "Close with comment", @@ -190,9 +190,9 @@ "most-recent-session": "Most Recent Session", "total-session": "Total Sessions", "average-session": "Avg. Session Time", - "entity-name": "Entity Name", + "data-asset-name": "Data Asset Name", "owner": "Owner", - "entity-type": "Entity Type", + "data-asset-type": "Data Asset Type", "total-views": "Total Views", "unique-views": "Unique Views", "recent-runs": "Recent Runs", @@ -309,6 +309,7 @@ "server": "Server", "feature-plural": "Features", "detail-plural": "Details", + "add-workflow-ingestion": "Add {{workflow}} Ingestion", "clearAll": "Clear All", "view-less": "View less", "view-more": "View more" diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/AddIngestionPage/AddIngestionPage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/AddIngestionPage/AddIngestionPage.component.tsx index dcd45e1ad23..368a729898c 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/AddIngestionPage/AddIngestionPage.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/AddIngestionPage/AddIngestionPage.component.tsx @@ -15,6 +15,7 @@ import { AxiosError } from 'axios'; import { capitalize, startCase } from 'lodash'; import { ServiceTypes } from 'Models'; import React, { useEffect, useState } from 'react'; +import { useTranslation } from 'react-i18next'; import { useHistory, useParams } from 'react-router-dom'; import { addIngestionPipeline, @@ -57,6 +58,7 @@ import { showErrorToast } from '../../utils/ToastUtils'; const AddIngestionPage = () => { const { ingestionType, serviceFQN, serviceCategory } = useParams<{ [key: string]: string }>(); + const { t } = useTranslation(); const history = useHistory(); const [serviceData, setServiceData] = useState(); const [activeIngestionStep, setActiveIngestionStep] = useState(1); @@ -141,7 +143,7 @@ const AddIngestionPage = () => { if (err.response?.status === 409) { showErrorToast( err, - jsonData['api-error-messages']['entity-already-exist-error'] + t('label.entity-already-exists', { entity: 'Data asset' }) ); reject(); } else { @@ -229,7 +231,9 @@ const AddIngestionPage = () => { activeTitle: true, }, { - name: `Add ${capitalize(ingestionType)} Ingestion`, + name: t('label.add-workflow-ingestion', { + workflow: startCase(ingestionType), + }), url: '', activeTitle: true, }, diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/teams/AddTeamForm.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/teams/AddTeamForm.tsx index f7e89ca7eab..a06a65ea7bc 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/teams/AddTeamForm.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/teams/AddTeamForm.tsx @@ -124,7 +124,9 @@ const AddTeamForm: React.FC = ({ ) ) ) { - return Promise.reject(t('label.name-already-exist')); + return Promise.reject( + t('label.entity-already-exists', { entity: 'Name' }) + ); } return Promise.resolve(); diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/EntityUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/EntityUtils.tsx index c0c5e36655f..eff1b2b11a0 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/EntityUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/EntityUtils.tsx @@ -499,7 +499,9 @@ export const getFrequentlyJoinedWithColumns = ( columnName: string, joins: Array ): Array => { - return joins.find((join) => join.columnName === columnName)?.joinedWith || []; + return ( + joins?.find((join) => join.columnName === columnName)?.joinedWith || [] + ); }; export const getFrequentlyJoinedColumns = ( diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/EntityVersionUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/EntityVersionUtils.tsx index b4a2186ffbd..451a2ca49f9 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/EntityVersionUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/EntityVersionUtils.tsx @@ -511,8 +511,8 @@ export const getSummary = ( {isDeleteUpdated .map((field) => { return field.newValue - ? 'Entity has been deleted' - : 'Entity has been restored'; + ? 'Data asset has been deleted' + : 'Data asset has been restored'; }) .join(', ')}

diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/ServiceUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/ServiceUtils.tsx index 4197838f067..dfbe9bfe65b 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/ServiceUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/ServiceUtils.tsx @@ -60,6 +60,7 @@ import { IBMDB2, KAFKA, KINESIS, + LOGO, LOOKER, MARIADB, METABASE, @@ -277,6 +278,9 @@ export const serviceTypeLogo = (type: string) => { case MetadataServiceType.Atlas: return ATLAS; + case MetadataServiceType.OpenMetadata: + return LOGO; + default: { let logo; if (serviceTypes.messagingServices.includes(type)) {