yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-10-17 19:57:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

UI: Fix the icon on lineage Node (#10528)

Browse Source 
* Fix the icon on lineage Node

* added pipeline icon

---------

Co-authored-by: Shailesh Parmar <shailesh.parmar.webdev@gmail.com>
This commit is contained in:
Ashish Gupta 2023-03-11 23:32:37 +05:30 committed by GitHub
parent 203d41c88e
commit 385a2e87d2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 36 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/EntityLineage.component.tsx
View File

@ -11,14 +11,13 @@
* limitations under the License.
*/
import { Modal } from 'antd';
import { Modal, Space } from 'antd';
import { AxiosError } from 'axios';
import {
debounce,
isEmpty,
isNil,
isUndefined,
lowerCase,
uniqueId,
upperCase,
} from 'lodash';
@ -83,6 +82,7 @@ import {
getDeletedLineagePlaceholder,
getEdgeStyle,
getEdgeType,
getEntityNodeIcon,
getLayoutedElements,
getLineageData,
getLoadingStatusValue,
@ -105,7 +105,6 @@ import {
onNodeMouseMove,
} from '../../utils/EntityLineageUtils';
import { getEntityReferenceFromPipeline } from '../../utils/PipelineServiceUtils';
import SVGIcons from '../../utils/SvgUtils';
import { showErrorToast } from '../../utils/ToastUtils';
import EdgeInfoDrawer from '../EntityInfoDrawer/EdgeInfoDrawer.component';
import EntityInfoDrawer from '../EntityInfoDrawer/EntityInfoDrawer.component';
@ -1058,6 +1057,7 @@ const EntityLineageComponent: FunctionComponent<EntityLineageProp> = ({
y: event.clientY - (reactFlowBounds?.top ?? 0),
});
const [label, nodeType] = type.split('-');
const Icon = getEntityNodeIcon(label);
const newNode = {
id: uniqueId(),
nodeType,
@ -1072,18 +1072,18 @@ const EntityLineageComponent: FunctionComponent<EntityLineageProp> = ({
{getNodeRemoveButton(() => {
removeNodeHandler(newNode as Node);
})}
<div className="tw-flex">
<SVGIcons
alt="entity-icon"
className="tw-mr-2"
icon={`${lowerCase(label)}-grey`}
width="16px"
<Space align="center" size={2}>
<Icon
className="m-r-xs"
height={16}
name="entity-icon"
width={16}
/>
<NodeSuggestions
entityType={upperCase(label)}
onSelectHandler={setSelectedEntity}
/>
</div>
</Space>
</div>
),
removeNodeHandler,

27
openmetadata-ui/src/main/resources/ui/src/utils/EntityLineageUtils.tsx
View File

@ -30,7 +30,7 @@ import LineageNodeLabel from 'components/EntityLineage/LineageNodeLabel';
import Loader from 'components/Loader/Loader';
import dagre from 'dagre';
import { t } from 'i18next';
import { isEmpty, isNil, isUndefined } from 'lodash';
import { isEmpty, isNil, isUndefined, lowerCase } from 'lodash';
import { LoadingState } from 'Models';
import React, { Fragment, MouseEvent as ReactMouseEvent } from 'react';
import { Link } from 'react-router-dom';
@ -77,6 +77,13 @@ import { getEncodedFqn } from './StringsUtils';
import SVGIcons from './SvgUtils';
import { getEntityLink } from './TableUtils';
import { ReactComponent as DashboardIcon } from '../assets/svg/dashboard-grey.svg';
import { ReactComponent as MlModelIcon } from '../assets/svg/mlmodal.svg';
import { ReactComponent as PipelineIcon } from '../assets/svg/pipeline-grey.svg';
import { ReactComponent as TableIcon } from '../assets/svg/table-grey.svg';
import { ReactComponent as TopicIcon } from '../assets/svg/topic-grey.svg';
export const getHeaderLabel = (
name = '',
fqn = '',
@ -1125,3 +1132,21 @@ export const getEdgeStyle = (value: boolean) => {
stroke: value ? SECONDARY_COLOR : undefined,
};
};
// Nodes Icons
export const getEntityNodeIcon = (label: string) => {
switch (lowerCase(label)) {
case EntityType.TABLE:
return TableIcon;
case EntityType.DASHBOARD:
return DashboardIcon;
case EntityType.TOPIC:
return TopicIcon;
case EntityType.PIPELINE:
return PipelineIcon;
case EntityType.MLMODEL:
return MlModelIcon;
default:
return TableIcon;
}
};