diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/tag-grey.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/tag-grey.svg new file mode 100644 index 00000000000..2425240ba53 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/tag-grey.svg @@ -0,0 +1,3 @@ + + + diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.component.tsx index 963f8f647e7..d7ce8a71594 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.component.tsx @@ -424,6 +424,7 @@ const DashboardDetails = ({ editable={editChartTags?.index === index} selectedTags={chart.tags as EntityTags[]} tagList={tagList} + type="label" onCancel={() => { handleChartTagSelection(); }} diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DatasetDetails/DatasetDetails.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DatasetDetails/DatasetDetails.component.tsx index 9dfc8567d54..44bd16d181b 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DatasetDetails/DatasetDetails.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DatasetDetails/DatasetDetails.component.tsx @@ -12,7 +12,7 @@ */ import { isEqual, isNil, isUndefined } from 'lodash'; -import { ColumnJoins, EntityTags } from 'Models'; +import { ColumnJoins, EntityTags, ExtraInfo } from 'Models'; import React, { useEffect, useState } from 'react'; import { getTeamDetailsPath } from '../../constants/constants'; import { CSMode } from '../../enums/codemirror.enum'; @@ -93,7 +93,8 @@ const DatasetDetails: React.FC = ({ ) => { if (!isNil(usageSummary?.weeklyStats?.percentileRank)) { const percentile = getUsagePercentile( - usageSummary?.weeklyStats?.percentileRank || 0 + usageSummary?.weeklyStats?.percentileRank || 0, + true ); setUsage(percentile); } else { @@ -201,13 +202,7 @@ const DatasetDetails: React.FC = ({ return freqJoin; }; - const extraInfo: Array<{ - key?: string; - value: string | number | React.ReactNode; - isLink?: boolean; - placeholderText?: string; - openInNewTab?: boolean; - }> = [ + const extraInfo: Array = [ { key: 'Owner', value: @@ -219,37 +214,42 @@ const DatasetDetails: React.FC = ({ openInNewTab: false, }, { key: 'Tier', value: tier?.tagFQN ? tier.tagFQN.split('.')[1] : '' }, - { key: 'Usage', value: usage }, - { key: 'Queries', value: `${weeklyUsageCount} past week` }, + { value: usage }, + { value: `${weeklyUsageCount} queries past week` }, { key: 'Columns', value: tableProfile && tableProfile[0]?.columnCount - ? tableProfile[0].columnCount - : '--', + ? `${tableProfile[0].columnCount} columns` + : columns.length + ? `${columns.length} columns` + : '', }, { key: 'Rows', value: !isUndefined(tableProfile) && tableProfile.length > 0 ? ( - ({ - date: d.profileDate, - value: d.rowCount ?? 0, - })) - .reverse() as Array<{ - date: Date; - value: number; - }> - } - height={38} - toolTipPos={{ x: 20, y: -30 }} - /> + <> + ({ + date: d.profileDate, + value: d.rowCount ?? 0, + })) + .reverse() as Array<{ + date: Date; + value: number; + }> + } + height={38} + toolTipPos={{ x: 20, y: -30 }} + /> + rows + ) : ( - '--' + '' ), }, ]; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DatasetVersion/DatasetVersion.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DatasetVersion/DatasetVersion.component.tsx index ca107a5c7ba..b709d159cfd 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DatasetVersion/DatasetVersion.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DatasetVersion/DatasetVersion.component.tsx @@ -13,6 +13,7 @@ import classNames from 'classnames'; import { cloneDeep, isEqual, isUndefined } from 'lodash'; +import { ExtraInfo } from 'Models'; import React, { useEffect, useState } from 'react'; import { ChangeDescription, @@ -103,7 +104,7 @@ const DatasetVersion: React.FC = ({ ), ].find((t) => (t?.tagFQN as string).startsWith('Tier')); - const extraInfo = [ + const extraInfo: Array = [ { key: 'Owner', value: diff --git a/openmetadata-ui/src/main/resources/ui/src/components/EntityTable/EntityTable.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/EntityTable/EntityTable.component.tsx index 940f9761000..2831bd3f2f0 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/EntityTable/EntityTable.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/EntityTable/EntityTable.component.tsx @@ -529,6 +529,7 @@ const EntityTable = ({ key={i} startWith="#" tag={tag} + type="label" /> ) )} @@ -549,6 +550,7 @@ const EntityTable = ({ editable={editColumnTag?.index === row.id} selectedTags={cell.value || []} tagList={allTags} + type="label" onCancel={() => { handleTagSelection(); }} diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.component.tsx index e5acd479540..06a4fb4f2b5 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.component.tsx @@ -383,7 +383,7 @@ const Explore: React.FC = ({ const getTabs = () => { return (
-
-
+
{extraInfo.map((info, index) => ( - {!isNil(info.key) ? ( - <> - - {info.key} : - {' '} - - {info.isLink ? ( - - <> - - {info.placeholderText || info.value} - - {info.openInNewTab && ( - - )} - - - ) : ( - info.value || '--' - )} - - {extraInfo.length !== 1 && index < extraInfo.length - 1 ? ( - - • - - ) : null} - - ) : !isNil(info.value) ? ( - <> - {info.value} - {extraInfo.length !== 1 && index < extraInfo.length - 1 ? ( - - • - - ) : null} - + {getInfoElements(info)} + {extraInfo.length !== 1 && index < extraInfo.length - 1 ? ( + + | + ) : null} ))}
-
+
{(!isEditable || !isTagEditable) && ( <> {(tags.length > 0 || tier) && ( - + )} {tier?.tagFQN && ( )} {tags.length > 0 && ( <> {tags.slice(0, LIST_SIZE).map((tag, index) => ( - + ))} {tags.slice(LIST_SIZE).length > 0 && ( @@ -335,11 +288,7 @@ const EntityPageInfo = ({ <> {tags.slice(LIST_SIZE).map((tag, index) => (

- +

))} @@ -386,12 +335,12 @@ const EntityPageInfo = ({ /> ) : ( - + )} diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/table-data-card/TableDataCard.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/table-data-card/TableDataCard.tsx index 1ed57a50296..2f578093da7 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/table-data-card/TableDataCard.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/common/table-data-card/TableDataCard.tsx @@ -12,16 +12,14 @@ */ import { isString, isUndefined, startCase, uniqueId } from 'lodash'; +import { ExtraInfo } from 'Models'; import React, { FunctionComponent } from 'react'; import { Link } from 'react-router-dom'; import { SearchIndex } from '../../../enums/search.enum'; import { TagLabel } from '../../../generated/type/tagLabel'; +import { serviceTypeLogo } from '../../../utils/ServiceUtils'; import { stringToHTML } from '../../../utils/StringsUtils'; -import { - getEntityIcon, - getEntityLink, - getUsagePercentile, -} from '../../../utils/TableUtils'; +import { getEntityLink, getUsagePercentile } from '../../../utils/TableUtils'; import TableDataCardBody from './TableDataCardBody'; type Props = { @@ -44,7 +42,7 @@ type Props = { const TableDataCard: FunctionComponent = ({ name, - owner = '--', + owner = '', description, tier = '', usage, @@ -60,12 +58,12 @@ const TableDataCard: FunctionComponent = ({ return isString(tier) ? tier : tier.tagFQN.split('.')[1]; } - return 'No Tier'; + return ''; }; - const OtherDetails = [ + const OtherDetails: Array = [ { key: 'Owner', value: owner }, - { key: 'Service', value: serviceType }, + // { key: 'Service', value: serviceType }, { key: 'Tier', value: getTier() }, ]; if (indexType !== SearchIndex.DASHBOARD && usage !== undefined) { @@ -81,6 +79,7 @@ const TableDataCard: FunctionComponent = ({ OtherDetails.push({ key: 'Database', value: database, + showLabel: true, }); } const getAssetTags = () => { @@ -100,7 +99,12 @@ const TableDataCard: FunctionComponent = ({ data-testid="table-data-card">
- {getEntityIcon(indexType)} + {/* {getEntityIcon(indexType)} */} +
; tags?: string[] | TagLabel[]; }; @@ -46,42 +43,14 @@ const TableDataCardBody: FunctionComponent = ({ }; } }; - const getInfoLabel = (data: { key: string; value: string }) => { - switch (data.key) { - case 'Owner': - return data.value !== '--' ? ( -
- -
- ) : ( - `${data.key} : ` - ); - case 'Service': - return ( - - ); - case 'Tier': - return ; - - default: - return `${data.key} : `; - } - }; return (
- {extraInfo.map(({ key, value }, i) => - !isNil(value) ? ( + {extraInfo.map((info, i) => + !isNil(info.value) ? ( - - {getInfoLabel({ key, value })} - {' '} - {value} + {getInfoElements(info)} {i !== extraInfo.length - 1 && ( | @@ -105,9 +74,10 @@ const TableDataCardBody: FunctionComponent = ({ -
+
{tags?.map((tag, index) => ( ; tagList: Array; + type?: TagProps['type']; showTags?: boolean; onSelectionChange: (selectedTags: Array) => void; onCancel: (event: React.MouseEvent) => void; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/tags-container/tags-container.tsx b/openmetadata-ui/src/main/resources/ui/src/components/tags-container/tags-container.tsx index 3f995ac904d..b9b29a43f84 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/tags-container/tags-container.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/tags-container/tags-container.tsx @@ -32,6 +32,7 @@ const TagsContainer: FunctionComponent = ({ onCancel, onSelectionChange, showTags = true, + type, }: TagsContainerProps) => { const [tags, setTags] = useState>(selectedTags); const [newTag, setNewTag] = useState(''); @@ -129,7 +130,9 @@ const TagsContainer: FunctionComponent = ({ const getTagsElement = (tag: EntityTags, index: number) => { return ( = ({ }} startWith="#" tag={tag} + type={editable ? 'contained' : type} /> ); }; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/tags/tags.styles.ts b/openmetadata-ui/src/main/resources/ui/src/components/tags/tags.styles.ts index 72f46b053c2..a11ddbf7777 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/tags/tags.styles.ts +++ b/openmetadata-ui/src/main/resources/ui/src/components/tags/tags.styles.ts @@ -12,18 +12,18 @@ */ export const tagStyles = { - base: `tw-relative tw-inline-flex tw-text-xs tw-font-medium + base: `tw-relative tw-inline-flex tw-text-xs tw-font-normal tw-rounded tw-whitespace-nowrap`, contained: 'tw-bg-tag tw-mr-2 tw-my-0.5 tw-font-medium ', outlined: 'tw-bg-transparent tw-mr-2 tw-my-0.5 tw-font-medium ', - label: 'tw-bg-transparent tw-border-none tw-text-primary', + label: 'tw-bg-transparent tw-border-none tw-text-grey-body tw-text-body', text: { base: 'tw-no-underline hover:tw-no-underline', default: 'tw-px-2', editable: 'tw-pl-2 tw-pr-1', - contained: 'tw-py-0.5', - outlined: 'tw-py-0.5', - label: '', + contained: 'tw-py-0.5 tw-px-2', + outlined: 'tw-py-0.5 tw-px-2', + label: 'tw-px-1', }, }; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/tags/tags.tsx b/openmetadata-ui/src/main/resources/ui/src/components/tags/tags.tsx index 491d1b2c8ce..7272cdc3091 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/tags/tags.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/tags/tags.tsx @@ -31,9 +31,8 @@ const Tags: FunctionComponent = ({ const baseStyle = tagStyles.base; const layoutStyles = tagStyles[type]; const textBaseStyle = tagStyles.text.base; - const textLayoutStyles = editable - ? tagStyles.text.editable - : tagStyles.text.default; + const textLayoutStyles = tagStyles.text[type] || tagStyles.text.default; + const textEditStyles = editable ? tagStyles.text.editable : ''; const getTagString = (tag: string) => { return tag.startsWith('#') ? tag.slice(1) : tag; @@ -44,12 +43,17 @@ const Tags: FunctionComponent = ({ - + {`${startWith}${tag}`} {editable && isRemovable && ( ) => { e.preventDefault(); diff --git a/openmetadata-ui/src/main/resources/ui/src/interface/types.d.ts b/openmetadata-ui/src/main/resources/ui/src/interface/types.d.ts index 06ebbfdd9ec..8782f9b0800 100644 --- a/openmetadata-ui/src/main/resources/ui/src/interface/types.d.ts +++ b/openmetadata-ui/src/main/resources/ui/src/interface/types.d.ts @@ -413,4 +413,13 @@ declare module 'Models' { id: string | undefined; state: boolean; } + + export type ExtraInfo = { + key?: string; + value: string | number | React.ReactNode; + isLink?: boolean; + placeholderText?: string; + openInNewTab?: boolean; + showLabel?: boolean; + }; } diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/database-details/index.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/database-details/index.tsx index 12eb7b609c6..c032e35d3b8 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/database-details/index.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/database-details/index.tsx @@ -408,7 +408,6 @@ const DatabaseDetails: FunctionComponent = () => { {table.tags?.map((tag, tagIndex) => ( { ? tag.tagFQN.split('.')[1] : tag.tagFQN, }} + type="label" /> ))} {getTableTags(table.columns).map( (tag, tagIdx) => ( ) )} 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 64ee2af9305..2f103eb0d0b 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/EntityUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/EntityUtils.tsx @@ -11,9 +11,10 @@ * limitations under the License. */ -import { isEmpty, isNil } from 'lodash'; -import { Bucket, LeafNodes, LineagePos } from 'Models'; +import { isEmpty, isNil, isString } from 'lodash'; +import { Bucket, ExtraInfo, LeafNodes, LineagePos } from 'Models'; import React from 'react'; +import Avatar from '../components/common/avatar/Avatar'; import TableProfilerGraph from '../components/TableProfiler/TableProfilerGraph.component'; import { getDatabaseDetailsPath, @@ -30,6 +31,7 @@ import { Edge, EntityLineage } from '../generated/type/entityLineage'; import { EntityReference } from '../generated/type/entityUsage'; import { TagLabel } from '../generated/type/tagLabel'; import { getPartialNameFromFQN } from './CommonUtils'; +import SVGIcons from './SvgUtils'; import { getOwnerFromId, getTierFromTableTags, @@ -324,3 +326,81 @@ export const isLeafNode = ( return false; } }; + +export const getInfoElements = (data: ExtraInfo) => { + let retVal = <>; + const displayVal = data.placeholderText || data.value; + + switch (data.key) { + case 'Owner': + { + retVal = + displayVal && displayVal !== '--' ? ( + isString(displayVal) ? ( +
+ +
+ ) : ( + <> + ) + ) : ( + <>No Owner + ); + } + + break; + case 'Tier': + { + retVal = !displayVal || displayVal === '--' ? <>No Tier : <>; + } + + break; + default: + { + retVal = ( + <> + {data.key + ? displayVal + ? data.showLabel + ? `${data.key}: ` + : null + : `No ${data.key}` + : null} + + ); + } + + break; + } + + return ( + <> + {retVal} + {displayVal ? ( + + {data.isLink ? ( + + <> + {displayVal} + {data.openInNewTab && ( + + )} + + + ) : ( + displayVal + )} + + ) : null} + + ); +}; diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/SvgUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/SvgUtils.tsx index 4873efbba41..fd2b5cc47aa 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/SvgUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/SvgUtils.tsx @@ -82,6 +82,7 @@ import IconSlackGrey from '../assets/svg/slack-grey.svg'; import IconSlack from '../assets/svg/slack.svg'; import IconTableGrey from '../assets/svg/table-grey.svg'; import IconTable from '../assets/svg/table.svg'; +import IconTagGrey from '../assets/svg/tag-grey.svg'; import IconTag from '../assets/svg/tag.svg'; import IconTerns from '../assets/svg/terms.svg'; import IconTier from '../assets/svg/tier.svg'; @@ -179,6 +180,7 @@ export const Icons = { ICON_PLUS: 'icon-plus', ICON_MINUS: 'icon-minus', TAG: 'icon-tag', + TAG_GREY: 'icon-tag-grey', TIER: 'icon-tier', SEARCHV1: 'icon-searchv1', }; @@ -506,6 +508,10 @@ const SVGIcons: FunctionComponent = ({ case Icons.TAG: IconComponent = IconTag; + break; + case Icons.TAG_GREY: + IconComponent = IconTagGrey; + break; case Icons.TIER: IconComponent = IconTier; diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/TableUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/TableUtils.tsx index 2d356a1445a..d52ca2d3bdf 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/TableUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/TableUtils.tsx @@ -51,11 +51,13 @@ export const usageSeverity = (value: number): string => { } }; -export const getUsagePercentile = (pctRank: number) => { +export const getUsagePercentile = (pctRank: number, isLiteral = false) => { const percentile = Math.round(pctRank * 10) / 10; const ordinalPercentile = ordinalize(percentile); const strSeverity = usageSeverity(percentile); - const usagePercentile = `${strSeverity} - ${ordinalPercentile} pctile`; + const usagePercentile = `${strSeverity}${ + isLiteral ? ' usage' : '' + } - ${ordinalPercentile} pctile`; return usagePercentile; };