mirror of
https://github.com/open-metadata/OpenMetadata.git
synced 2025-12-04 11:33:07 +00:00
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
This commit is contained in:
darth-coder00
Sriharsha Chintalapani
parent
7eebf2a55a
commit
f1d3850daf
@ -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) => (
|
||||
<div className="tw-px-1" key={uniqueId()}>
|
||||
<p className="tw-text-sm tw-font-medium tw-mb-2">{d.title}</p>
|
||||
<p className="tw-text-sm tw-mb-3">{d.description}</p>
|
||||
<div className="tw-text-sm tw-mb-3">
|
||||
<RichTextEditorPreviewer markdown={d.description} />
|
||||
</div>
|
||||
<div>
|
||||
{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}
|
||||
/>
|
||||
)
|
||||
|
||||
@ -139,9 +139,7 @@ export const WhatsNewModal: FunctionComponent<Props> = ({
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
className="tw-w-60 tw-inline-flex tw-border tw-border-primary
|
||||
tw-text-sm tw-rounded-md tw-h-8 tw-bg-white">
|
||||
<div className="tw-w-60 tw-inline-flex tw-border tw-border-primary tw-text-sm tw-rounded-md tw-h-8 tw-bg-white">
|
||||
<button
|
||||
className={getToggleButtonClasses('features')}
|
||||
onClick={() => handleToggleChange('features')}>
|
||||
@ -162,7 +160,13 @@ export const WhatsNewModal: FunctionComponent<Props> = ({
|
||||
<FeaturesCarousel data={activeData.features} />
|
||||
)}
|
||||
{checkedValue === 'change-log' && (
|
||||
<ChangeLogs data={activeData.changeLogs} />
|
||||
<ChangeLogs
|
||||
data={
|
||||
activeData.changeLogs as unknown as {
|
||||
[name: string]: string;
|
||||
}
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -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 `,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
@ -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<Elements>(
|
||||
getLineageData(entityLineage) as Elements
|
||||
);
|
||||
@ -256,7 +270,7 @@ const Entitylineage = ({ entityLineage }: { entityLineage: EntityLineage }) => {
|
||||
}, [entityLineage]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="tw-w-full" style={{ height: 500 }}>
|
||||
{(entityLineage?.downstreamEdges ?? []).length > 0 ||
|
||||
(entityLineage.upstreamEdges ?? []).length ? (
|
||||
<ReactFlowProvider>
|
||||
@ -279,7 +293,7 @@ const Entitylineage = ({ entityLineage }: { entityLineage: EntityLineage }) => {
|
||||
No Lineage data available
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -618,9 +618,7 @@ const MyPipelinePage = () => {
|
||||
</>
|
||||
)}
|
||||
{activeTab === 2 && (
|
||||
<div className="tw-w-full tw-h-96">
|
||||
<Entitylineage entityLineage={entityLineage} />
|
||||
</div>
|
||||
<Entitylineage entityLineage={entityLineage} />
|
||||
)}
|
||||
{activeTab === 3 && (
|
||||
<ManageTab
|
||||
|
||||
@ -560,11 +560,7 @@ const MyDataDetailsPage = () => {
|
||||
tableProfiles={tableProfile}
|
||||
/>
|
||||
)}
|
||||
{activeTab === 3 && (
|
||||
<div className="tw-w-full tw-h-96">
|
||||
<Entitylineage entityLineage={entityLineage} />
|
||||
</div>
|
||||
)}
|
||||
{activeTab === 3 && <Entitylineage entityLineage={entityLineage} />}
|
||||
{activeTab === 4 && (
|
||||
<ManageTab
|
||||
currentTier={tier}
|
||||
|
||||
@ -151,8 +151,8 @@ const ServicesPage = () => {
|
||||
const curServ = services[serviceName];
|
||||
const updatedResult = (curServ as unknown as Array<ServiceDataObj>).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 = () => {
|
||||
</button>
|
||||
</Link>
|
||||
<div
|
||||
className="tw-text-grey-body tw-pb-1 description-text"
|
||||
className="tw-text-grey-body tw-pb-1 tw-break-all description-text"
|
||||
data-testid="service-description">
|
||||
{service.description ? (
|
||||
<RichTextEditorPreviewer
|
||||
|
||||
@ -95,7 +95,7 @@ const UserCard = ({
|
||||
|
||||
return (
|
||||
<Link data-testid="dataset-link" to={link}>
|
||||
<button className="tw-font-normal tw-text-grey-body">
|
||||
<button className="tw-font-normal tw-text-grey-body tw-break-all">
|
||||
{getPartialNameFromFQN(fqn, getArrForPartialName(type))}
|
||||
</button>
|
||||
</Link>
|
||||
|
||||
@ -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 */
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user