From f1d3850daf5cff53d0d12e81ca9c40cc4134d484 Mon Sep 17 00:00:00 2001 From: darth-coder00 <86726556+darth-coder00@users.noreply.github.com> Date: Tue, 19 Oct 2021 14:24:22 +0530 Subject: [PATCH] Added Feature videos and Change Logs for 0.5 and Misc Css fixes (#858) * Added Feature videos and Change Logs for 0.5 * Misc CSS fixes for Lineage and services --- .../Modals/WhatsNewModal/FeaturesCarousel.tsx | 7 ++- .../components/Modals/WhatsNewModal/index.tsx | 12 +++-- .../Modals/WhatsNewModal/whatsNewData.ts | 48 ++++++++++++------- .../dataset-lineage/EntityLineage.tsx | 22 +++++++-- .../ui/src/pages/Pipeline-details/index.tsx | 4 +- .../ui/src/pages/my-data-details/index.tsx | 6 +-- .../resources/ui/src/pages/services/index.tsx | 6 +-- .../resources/ui/src/pages/teams/UserCard.tsx | 2 +- .../main/resources/ui/src/styles/tailwind.css | 12 ++--- .../main/resources/ui/src/styles/x-master.css | 12 +++++ 10 files changed, 84 insertions(+), 47 deletions(-) diff --git a/catalog-rest-service/src/main/resources/ui/src/components/Modals/WhatsNewModal/FeaturesCarousel.tsx b/catalog-rest-service/src/main/resources/ui/src/components/Modals/WhatsNewModal/FeaturesCarousel.tsx index c8c25b18e81..158b1e6308c 100644 --- a/catalog-rest-service/src/main/resources/ui/src/components/Modals/WhatsNewModal/FeaturesCarousel.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/components/Modals/WhatsNewModal/FeaturesCarousel.tsx @@ -20,6 +20,7 @@ import { uniqueId } from 'lodash'; import React, { useEffect, useRef, useState } from 'react'; import Slider from 'react-slick'; +import RichTextEditorPreviewer from '../../common/rich-text-editor/RichTextEditorPreviewer'; type CarousalData = { title: string; @@ -68,7 +69,9 @@ const FeaturesCarousel = ({ data }: Props) => { {data.map((d) => (

{d.title}

-

{d.description}

+
+ +
{d.path ? ( d.isImage ? ( @@ -78,7 +81,7 @@ const FeaturesCarousel = ({ data }: Props) => { allowFullScreen className="tw-w-full" frameBorder={0} - height={476} + height={457} src={d.path} /> ) diff --git a/catalog-rest-service/src/main/resources/ui/src/components/Modals/WhatsNewModal/index.tsx b/catalog-rest-service/src/main/resources/ui/src/components/Modals/WhatsNewModal/index.tsx index 5c6a7174ec1..86d17e2f222 100644 --- a/catalog-rest-service/src/main/resources/ui/src/components/Modals/WhatsNewModal/index.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/components/Modals/WhatsNewModal/index.tsx @@ -139,9 +139,7 @@ export const WhatsNewModal: FunctionComponent = ({

-
+
diff --git a/catalog-rest-service/src/main/resources/ui/src/components/Modals/WhatsNewModal/whatsNewData.ts b/catalog-rest-service/src/main/resources/ui/src/components/Modals/WhatsNewModal/whatsNewData.ts index e2f1c43f809..c8c6a52fc7b 100644 --- a/catalog-rest-service/src/main/resources/ui/src/components/Modals/WhatsNewModal/whatsNewData.ts +++ b/catalog-rest-service/src/main/resources/ui/src/components/Modals/WhatsNewModal/whatsNewData.ts @@ -37,21 +37,21 @@ export const WHATS_NEW = [ description: 'In 0.4.0 release, Users can now integrate dashboard services, such as Apache Superset, Tableau, and Looker, and discover dashboards and charts in their organizations in a single place along with other data assets., Similar to Tables and Databases, users can describe the dashboard, tier them, add tags, and ownership.', isImage: false, - path: 'https://www.youtube.com/embed/SQbRjwZeqLg', + path: 'https://www.youtube.com/embed/131LfI0eMNc', }, { title: 'Messaging service', description: 'Users can also integrate with messaging services, such as Apache Kafka (and Apache Pulsar in progress) to discover Topics. Our Message Queue connectors extractTopic configurations, cluster information, and schemas from Apache Kafka and Confluent’s Schema Registry to provide all important information at your fingertips. Users can provide rich descriptions, tiering, ownership, and tags to the topics through the UI or APIs.', isImage: false, - path: 'https://www.youtube.com/embed/KOjpWRK5wsY', + path: 'https://www.youtube.com/embed/vHM99KC2A2w', }, { title: 'Data Profiler & Sample Data', description: 'The Data Profiler is a new feature that generates a data profile for a table during the ingestion process. The data profile will include information that will help understand data quality, such as data uniqueness, null counts, max and min, etc. The Data Sampler will collect sample data from an ingested table so that it can be subsequently used to get a sense of the data', isImage: false, - path: 'https://www.youtube.com/embed/klOiCtYprIg', + path: 'https://www.youtube.com/embed/0NKBPWUcG9M', }, ], changeLogs: { @@ -68,33 +68,47 @@ export const WHATS_NEW = [ description: 'Released on 19 Oct 2021.', features: [ { - title: 'Dashboards', + title: 'Lineage', description: - 'In 0.4.0 release, Users can now integrate dashboard services, such as Apache Superset, Tableau, and Looker, and discover dashboards and charts in their organizations in a single place along with other data assets., Similar to Tables and Databases, users can describe the dashboard, tier them, add tags, and ownership.', + 'Schema and API support for Lineage.\n\nUI integration to show the lineage for Pipelines and Tables.\n\nIngestion support for Airflow to capture lineage.', isImage: false, - path: 'https://www.youtube.com/embed/SQbRjwZeqLg', + path: 'https://www.youtube.com/embed/8-CwuKsf8Oc', }, { - title: 'Messaging service', + title: 'Data Profiler', description: - 'Users can also integrate with messaging services, such as Apache Kafka (and Apache Pulsar in progress) to discover Topics. Our Message Queue connectors extractTopic configurations, cluster information, and schemas from Apache Kafka and Confluent’s Schema Registry to provide all important information at your fingertips. Users can provide rich descriptions, tiering, ownership, and tags to the topics through the UI or APIs.', + 'In 0.5 release we are enhancing data profiler integration. UI now visualizes data profiler details. Users can understand column data in a table.', isImage: false, - path: 'https://www.youtube.com/embed/KOjpWRK5wsY', + path: 'https://www.youtube.com/embed/FRP_bgWbZCc', }, { - title: 'Data Profiler & Sample Data', + title: 'Pipelines', description: - 'The Data Profiler is a new feature that generates a data profile for a table during the ingestion process. The data profile will include information that will help understand data quality, such as data uniqueness, null counts, max and min, etc. The Data Sampler will collect sample data from an ingested table so that it can be subsequently used to get a sense of the data', + 'Pipelines are new entity addition to OpenMetadata. Add Airflow as a service ingest all pipelines metadata into OpenMetadata. Explore and Discover all your pipelines in single place.', isImage: false, - path: 'https://www.youtube.com/embed/klOiCtYprIg', + path: 'https://www.youtube.com/embed/V7rYKdJe67U', + }, + { + title: 'Complex Types', + description: + 'With 0.5 release we are supporting Complex Types in table schema through APIs and ingestion now supports Redshift, BigQuery, Snowflake, Hive to extract complex data types. UI Integration will allow users to expand and add description, tags to nested fields.', + isImage: false, + path: 'https://www.youtube.com/embed/35XfeP2--b4', + }, + { + title: 'Trino & Redash', + description: 'We added two new connectors, Trino and Redash.', + isImage: false, + path: 'https://www.youtube.com/embed/Tugbk6_uELY', }, ], changeLogs: { - OpenMetadata: `- Support for Kafka (and Pulsar WIP)\n- Support for Message Service and Topic entities in schemas, APIs, and UI\n- Kafka connector and ingestion support for Confluent Schema Registry\n- Support for Dashboards\n- Support for Dashboard services, Dashboards, and Charts entities in schemas, APIs, and UI\n- Looker, Superset, Tableau connector, and ingestion support`, - 'Data Quality': `- Data Profiler - The Data Profiler is a new feature that generates a data profile for a table during the ingestion process. The data profile will include information that will help understand data quality, such as data uniqueness, null counts, max and min\n - Sample Data, The Data Sampler will collect sample data from an ingested table so that it can be subsequently used to get a sense of the data.`, - 'Other features': `- Pluggable SSO integration - Auth0 support\n- Support for Presto`, - 'User Interface': `- Sort search results based on Usage, Relevance, and Last updated time\n- Search string highlighted in search results\n- Support for Kafka and Dashboards from Looker, SuperSet, and Tableau`, - 'Work in progress': `- Salesforce CRM connector\n- Data profiler to profile tables in ingestion framework and show it table details page\n- Redash dashboard connector`, + Lineage: `- Schema and API support for Lineage\n- UI integration to show the lineage for Pipelines and Tables\n- Ingestion support for Airflow to capture lineage`, + 'Data Reliability': `- UI Integration for Data profiler\n- Unique , Null proportion\n- See how the table data grows through interactive visualization`, + 'New Entities: Pipeline': `- Add Apache Airflow as a pipeline service\n- Ingest all of your pipeline's metadata into OpenMetadata\n- Explore and Search Pipelines\n- Add description, tags, ownership and tier your pipelines`, + 'Complex Data types': `- Schema and API support to capture complex data types\n- Ingestion support to capture complex data types from Redshift, BigQuery, Snowflake and Hive\n- UI Support for nested complex data types, users can add description, tags to nested fields`, + 'New Connectors': `- Trino connector\n- Redash connector\n- Amazon Glue - In progress`, + 'User Interface': `- UI now completely built on top of JsonSchema generated code\n- Expand complex data types and allow users to update descriptions and tags\n- Pipeline Service and Details page\n- Pipeline Explore & Search integration\n- Search results will show if the query matches description or column names, description `, }, }, ]; diff --git a/catalog-rest-service/src/main/resources/ui/src/components/dataset-lineage/EntityLineage.tsx b/catalog-rest-service/src/main/resources/ui/src/components/dataset-lineage/EntityLineage.tsx index 1414ba90eaa..313d167ce6f 100644 --- a/catalog-rest-service/src/main/resources/ui/src/components/dataset-lineage/EntityLineage.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/components/dataset-lineage/EntityLineage.tsx @@ -1,4 +1,5 @@ import React, { + FunctionComponent, MouseEvent as ReactMouseEvent, useEffect, useState, @@ -25,6 +26,7 @@ import { EntityReference } from '../../generated/type/entityReference'; const onLoad = (reactFlowInstance: OnLoadParams) => { reactFlowInstance.fitView(); + reactFlowInstance.zoomTo(1); }; /* eslint-disable-next-line */ const onNodeMouseEnter = (_event: ReactMouseEvent, _node: Node | Edge) => { @@ -217,7 +219,15 @@ const getLineageData = (entityLineage: EntityLineage) => { id: `node-${mainNode.id}-1`, sourcePosition: 'right', targetPosition: 'left', - type: 'default', + type: lineageEdges.find((ed: FlowElement) => + (ed as Edge).target.includes(mainNode.id) + ) + ? lineageEdges.find((ed: FlowElement) => + (ed as Edge).source.includes(mainNode.id) + ) + ? 'default' + : 'output' + : 'input', className: 'leaf-node core', data: { label: getDataLabel(mainNode.name as string) }, position: { x: x, y: y }, @@ -242,7 +252,11 @@ const getLineageData = (entityLineage: EntityLineage) => { return lineageData; }; -const Entitylineage = ({ entityLineage }: { entityLineage: EntityLineage }) => { +const Entitylineage: FunctionComponent<{ entityLineage: EntityLineage }> = ({ + entityLineage, +}: { + entityLineage: EntityLineage; +}) => { const [elements, setElements] = useState( getLineageData(entityLineage) as Elements ); @@ -256,7 +270,7 @@ const Entitylineage = ({ entityLineage }: { entityLineage: EntityLineage }) => { }, [entityLineage]); return ( - <> +
{(entityLineage?.downstreamEdges ?? []).length > 0 || (entityLineage.upstreamEdges ?? []).length ? ( @@ -279,7 +293,7 @@ const Entitylineage = ({ entityLineage }: { entityLineage: EntityLineage }) => { No Lineage data available
)} - +
); }; diff --git a/catalog-rest-service/src/main/resources/ui/src/pages/Pipeline-details/index.tsx b/catalog-rest-service/src/main/resources/ui/src/pages/Pipeline-details/index.tsx index 0a1efff7451..e997f32d8ee 100644 --- a/catalog-rest-service/src/main/resources/ui/src/pages/Pipeline-details/index.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/pages/Pipeline-details/index.tsx @@ -618,9 +618,7 @@ const MyPipelinePage = () => { )} {activeTab === 2 && ( -
- -
+ )} {activeTab === 3 && ( { tableProfiles={tableProfile} /> )} - {activeTab === 3 && ( -
- -
- )} + {activeTab === 3 && } {activeTab === 4 && ( { const curServ = services[serviceName]; const updatedResult = (curServ as unknown as Array).filter( (serv) => - serv.description?.includes(lowerCase(searchValue)) || - serv.name?.includes(lowerCase(searchValue)) + lowerCase(serv.description)?.includes(lowerCase(searchValue)) || + lowerCase(serv.name)?.includes(lowerCase(searchValue)) ); setServiceList(updatedResult); setServicesCount({ ...servicesCount, [serviceName]: updatedResult.length }); @@ -475,7 +475,7 @@ const ServicesPage = () => {
{service.description ? ( - diff --git a/catalog-rest-service/src/main/resources/ui/src/styles/tailwind.css b/catalog-rest-service/src/main/resources/ui/src/styles/tailwind.css index 3f8c68e03f7..2194d57752d 100644 --- a/catalog-rest-service/src/main/resources/ui/src/styles/tailwind.css +++ b/catalog-rest-service/src/main/resources/ui/src/styles/tailwind.css @@ -303,17 +303,13 @@ .leaf-node { @apply tw-border-main tw-py-1; } - .leaf-node .react-flow__handle { - @apply tw-bg-grey-muted; - } .leaf-node.core { @apply tw-border-primary tw-text-primary; } - .leaf-node.core .react-flow__handle { - @apply tw-bg-primary; - } - .react-flow__edge.selected .react-flow__edge-path { - stroke: #7147e8; + .leaf-node.selected, + .leaf-node.selected:hover { + @apply tw-border-primary-active; + box-shadow: 0 0 0 0.5px #7147e8; } /* react-slick */ diff --git a/catalog-rest-service/src/main/resources/ui/src/styles/x-master.css b/catalog-rest-service/src/main/resources/ui/src/styles/x-master.css index 112dfcf0f70..554682d9d7e 100644 --- a/catalog-rest-service/src/main/resources/ui/src/styles/x-master.css +++ b/catalog-rest-service/src/main/resources/ui/src/styles/x-master.css @@ -708,3 +708,15 @@ a:focus { body .profiler-graph .recharts-active-dot circle { fill: #ff4c3b; } + +/* React flow */ + +.leaf-node .react-flow__handle { + background-color: #6b7280; +} +.leaf-node.core .react-flow__handle { + background-color: #7147e8; +} +.react-flow__edge.selected .react-flow__edge-path { + stroke: #7147e8; +}