From 2e3bab20af9bbdf036c88a8a5652a961891f0faf Mon Sep 17 00:00:00 2001 From: Josh Eilers Date: Thu, 29 Jun 2023 14:22:18 -0700 Subject: [PATCH 01/16] fix(stats): improve stats word wrapping --- .../src/app/entity/dataset/DatasetEntity.tsx | 6 +++--- .../src/app/entity/dataset/preview/Preview.tsx | 7 ++++--- .../app/entity/dataset/shared/DatasetStatsSummary.tsx | 5 +++-- .../app/entity/dataset/shared/FormattedBytesStat.tsx | 7 +++++-- .../autoComplete/AutoCompleteTooltipContent.tsx | 11 ++++++----- 5 files changed, 21 insertions(+), 15 deletions(-) diff --git a/datahub-web-react/src/app/entity/dataset/DatasetEntity.tsx b/datahub-web-react/src/app/entity/dataset/DatasetEntity.tsx index cf9e70643aea7..243383666f10d 100644 --- a/datahub-web-react/src/app/entity/dataset/DatasetEntity.tsx +++ b/datahub-web-react/src/app/entity/dataset/DatasetEntity.tsx @@ -293,9 +293,9 @@ export class DatasetEntity implements Entity { insights={result.insights} externalUrl={data.properties?.externalUrl} statsSummary={data.statsSummary} - rowCount={(data as any).lastProfile?.length && (data as any).lastProfile[0].rowCount} - columnCount={(data as any).lastProfile?.length && (data as any).lastProfile[0].columnCount} - sizeInBytes={(data as any).lastProfile?.length && (data as any).lastProfile[0].sizeInBytes} + rowCount={2133440} + columnCount={12} + sizeInBytes={29321728} lastUpdatedMs={ (data as any).lastOperation?.length && (data as any).lastOperation[0].lastUpdatedTimestamp } diff --git a/datahub-web-react/src/app/entity/dataset/preview/Preview.tsx b/datahub-web-react/src/app/entity/dataset/preview/Preview.tsx index 6a31e5cd19fbc..b5fee05529129 100644 --- a/datahub-web-react/src/app/entity/dataset/preview/Preview.tsx +++ b/datahub-web-react/src/app/entity/dataset/preview/Preview.tsx @@ -46,6 +46,7 @@ export const Preview = ({ columnCount, sizeInBytes, statsSummary, + // eslint-disable-next-line @typescript-eslint/no-unused-vars lastUpdatedMs, }: { urn: string; @@ -107,9 +108,9 @@ export const Preview = ({ rowCount={rowCount} columnCount={columnCount} sizeInBytes={sizeInBytes} - queryCountLast30Days={statsSummary?.queryCountLast30Days} - uniqueUserCountLast30Days={statsSummary?.uniqueUserCountLast30Days} - lastUpdatedMs={lastUpdatedMs} + queryCountLast30Days={172} + uniqueUserCountLast30Days={1} + lastUpdatedMs={Date.now()} /> } /> diff --git a/datahub-web-react/src/app/entity/dataset/shared/DatasetStatsSummary.tsx b/datahub-web-react/src/app/entity/dataset/shared/DatasetStatsSummary.tsx index 14f550de25be7..fb01c3eed5b1c 100644 --- a/datahub-web-react/src/app/entity/dataset/shared/DatasetStatsSummary.tsx +++ b/datahub-web-react/src/app/entity/dataset/shared/DatasetStatsSummary.tsx @@ -70,7 +70,7 @@ export const DatasetStatsSummary = ({ !!sizeInBytes && ( - + ), (!!queryCountLast30Days || !!totalSqlQueries) && ( @@ -83,11 +83,12 @@ export const DatasetStatsSummary = ({ !!uniqueUserCountLast30Days && ( - {formatNumberWithoutAbbreviation(uniqueUserCountLast30Days)} unique users + {formatNumberWithoutAbbreviation(uniqueUserCountLast30Days)} unique users - high ), !!lastUpdatedMs && ( Data was last updated in the source platform on{' '} diff --git a/datahub-web-react/src/app/entity/dataset/shared/FormattedBytesStat.tsx b/datahub-web-react/src/app/entity/dataset/shared/FormattedBytesStat.tsx index 0b8e41df441e3..e3c0d8fe7e5c6 100644 --- a/datahub-web-react/src/app/entity/dataset/shared/FormattedBytesStat.tsx +++ b/datahub-web-react/src/app/entity/dataset/shared/FormattedBytesStat.tsx @@ -2,10 +2,13 @@ import React from 'react'; import { Tooltip } from 'antd'; import { formatBytes, formatNumberWithoutAbbreviation } from '../../../shared/formatNumber'; -export const FormattedBytesStat = ({ bytes }: { bytes: number }) => { +export const FormattedBytesStat = ({ bytes, disableTooltip = false }: { bytes: number; disableTooltip?: boolean }) => { const formattedBytes = formatBytes(bytes); return ( - + {formattedBytes.number} {formattedBytes.unit} ); diff --git a/datahub-web-react/src/app/search/autoComplete/AutoCompleteTooltipContent.tsx b/datahub-web-react/src/app/search/autoComplete/AutoCompleteTooltipContent.tsx index dfe32c7805a9b..682c047fc38cc 100644 --- a/datahub-web-react/src/app/search/autoComplete/AutoCompleteTooltipContent.tsx +++ b/datahub-web-react/src/app/search/autoComplete/AutoCompleteTooltipContent.tsx @@ -1,6 +1,7 @@ import { FolderOpenOutlined } from '@ant-design/icons'; import React from 'react'; import styled from 'styled-components'; +// eslint-disable-next-line @typescript-eslint/no-unused-vars import { Dataset, Entity, EntityType } from '../../../types.generated'; import { DatasetStatsSummary } from '../../entity/dataset/shared/DatasetStatsSummary'; import { useEntityRegistry } from '../../useEntityRegistry'; @@ -45,14 +46,14 @@ export default function AutoCompleteTooltipContent({ entity }: Props) { {displayName} {entity.type === EntityType.Dataset && ( )} From af68c48cfa6a14db818b7f11c736f2537dd784ce Mon Sep 17 00:00:00 2001 From: Josh Eilers Date: Thu, 29 Jun 2023 16:03:20 -0700 Subject: [PATCH 02/16] flex approach --- .../dataset/shared/DatasetStatsSummary.tsx | 16 +++++++++++++++- .../entity/dataset/shared/ExpandingStat.tsx | 2 +- .../shared/components/styled/StatsSummary.tsx | 8 +++++--- .../src/app/preview/DefaultPreviewCard.tsx | 19 ++++++++++++++++++- 4 files changed, 39 insertions(+), 6 deletions(-) diff --git a/datahub-web-react/src/app/entity/dataset/shared/DatasetStatsSummary.tsx b/datahub-web-react/src/app/entity/dataset/shared/DatasetStatsSummary.tsx index fb01c3eed5b1c..176d7da89ffa0 100644 --- a/datahub-web-react/src/app/entity/dataset/shared/DatasetStatsSummary.tsx +++ b/datahub-web-react/src/app/entity/dataset/shared/DatasetStatsSummary.tsx @@ -1,3 +1,4 @@ +/* eslint-disable no-param-reassign */ import React from 'react'; import styled from 'styled-components/macro'; import { Popover } from 'antd'; @@ -41,6 +42,14 @@ export const DatasetStatsSummary = ({ color, mode = 'normal', }: Props) => { + rowCount = 2133440; + columnCount = 12; + sizeInBytes = 29321728; + totalSqlQueries = 987654321; + queryCountLast30Days = 987654321; + uniqueUserCountLast30Days = 98765; + lastUpdatedMs = Date.now(); + const isTooltipMode = mode === 'tooltip-content'; const displayedColor = isTooltipMode ? '' : color ?? ANTD_GRAY[7]; @@ -51,7 +60,12 @@ export const DatasetStatsSummary = ({ render={(isExpanded) => ( - {isExpanded ? formatNumberWithoutAbbreviation(rowCount) : countFormatter(rowCount)} rows + + {isExpanded + ? formatNumberWithoutAbbreviation(rowCount) + : countFormatter(rowCount as number)} + {' '} + rows {!!columnCount && ( <> ,{' '} diff --git a/datahub-web-react/src/app/entity/dataset/shared/ExpandingStat.tsx b/datahub-web-react/src/app/entity/dataset/shared/ExpandingStat.tsx index 8101a696bf274..57b60e0466728 100644 --- a/datahub-web-react/src/app/entity/dataset/shared/ExpandingStat.tsx +++ b/datahub-web-react/src/app/entity/dataset/shared/ExpandingStat.tsx @@ -2,7 +2,7 @@ import React, { ReactNode, useEffect, useRef, useState } from 'react'; import styled from 'styled-components'; const ExpandingStatContainer = styled.span<{ disabled: boolean; expanded: boolean; width: string }>` - overflow: hidden; + overflow: ${(props) => (props.expanded ? 'visible' : 'hidden')}; white-space: nowrap; width: ${(props) => props.width}; transition: width 250ms ease; diff --git a/datahub-web-react/src/app/entity/shared/components/styled/StatsSummary.tsx b/datahub-web-react/src/app/entity/shared/components/styled/StatsSummary.tsx index a0fe5ef031bb7..8c273a9e5658d 100644 --- a/datahub-web-react/src/app/entity/shared/components/styled/StatsSummary.tsx +++ b/datahub-web-react/src/app/entity/shared/components/styled/StatsSummary.tsx @@ -9,12 +9,14 @@ type Props = { const StatsContainer = styled.div` margin-top: 8px; display: flex; + flex-wrap: wrap; align-items: center; + gap: 5px; `; const StatDivider = styled.div` - padding-left: 10px; - margin-right: 10px; + padding-left: 5px; + margin-right: 5px; border-right: 1px solid ${ANTD_GRAY[4]}; height: 21px; `; @@ -22,7 +24,7 @@ const StatDivider = styled.div` export const StatsSummary = ({ stats }: Props) => { return ( <> - {stats && stats.length > 0 && ( + {!!stats.length && ( {stats.map((statView, index) => ( <> diff --git a/datahub-web-react/src/app/preview/DefaultPreviewCard.tsx b/datahub-web-react/src/app/preview/DefaultPreviewCard.tsx index 0230f5934fb7c..8a5109aac1010 100644 --- a/datahub-web-react/src/app/preview/DefaultPreviewCard.tsx +++ b/datahub-web-react/src/app/preview/DefaultPreviewCard.tsx @@ -17,6 +17,7 @@ import { ParentNodesResult, EntityPath, DataProduct, + EntityType, } from '../../types.generated'; import TagTermGroup from '../shared/tags/TagTermGroup'; import { ANTD_GRAY } from '../entity/shared/constants'; @@ -70,7 +71,7 @@ const EntityTitle = styled(Typography.Text)<{ $titleSizePx?: number }>` } &&& { - margin-right 8px; + margin-right: 8px; font-size: ${(props) => props.$titleSizePx || 16}px; font-weight: 600; vertical-align: middle; @@ -230,6 +231,22 @@ export default function DefaultPreviewCard({ previewType, paths, }: Props) { + // eslint-disable-next-line no-param-reassign + topUsers = []; + topUsers.push({ + type: EntityType.CorpUser, + urn: 'something', + properties: { + active: true, + fullName: 'yosh', + displayName: 'yosh display name', + firstName: 'yoshf', + lastName: 'yoshl', + title: 'yosht', + }, + username: 'yoshi', + __typename: 'CorpUser', + }); // sometimes these lists will be rendered inside an entity container (for example, in the case of impact analysis) // in those cases, we may want to enrich the preview w/ context about the container entity const { entityData } = useEntityData(); From 403d7a45abe9d806565b5f7b777e20a2c41aad21 Mon Sep 17 00:00:00 2001 From: Josh Eilers Date: Thu, 29 Jun 2023 16:05:12 -0700 Subject: [PATCH 03/16] revert test code --- .../src/app/entity/dataset/DatasetEntity.tsx | 6 +++--- .../src/app/entity/dataset/preview/Preview.tsx | 7 +++---- .../dataset/shared/DatasetStatsSummary.tsx | 18 ++---------------- .../src/app/preview/DefaultPreviewCard.tsx | 17 ----------------- .../AutoCompleteTooltipContent.tsx | 11 +++++------ 5 files changed, 13 insertions(+), 46 deletions(-) diff --git a/datahub-web-react/src/app/entity/dataset/DatasetEntity.tsx b/datahub-web-react/src/app/entity/dataset/DatasetEntity.tsx index 243383666f10d..cf9e70643aea7 100644 --- a/datahub-web-react/src/app/entity/dataset/DatasetEntity.tsx +++ b/datahub-web-react/src/app/entity/dataset/DatasetEntity.tsx @@ -293,9 +293,9 @@ export class DatasetEntity implements Entity { insights={result.insights} externalUrl={data.properties?.externalUrl} statsSummary={data.statsSummary} - rowCount={2133440} - columnCount={12} - sizeInBytes={29321728} + rowCount={(data as any).lastProfile?.length && (data as any).lastProfile[0].rowCount} + columnCount={(data as any).lastProfile?.length && (data as any).lastProfile[0].columnCount} + sizeInBytes={(data as any).lastProfile?.length && (data as any).lastProfile[0].sizeInBytes} lastUpdatedMs={ (data as any).lastOperation?.length && (data as any).lastOperation[0].lastUpdatedTimestamp } diff --git a/datahub-web-react/src/app/entity/dataset/preview/Preview.tsx b/datahub-web-react/src/app/entity/dataset/preview/Preview.tsx index b5fee05529129..6a31e5cd19fbc 100644 --- a/datahub-web-react/src/app/entity/dataset/preview/Preview.tsx +++ b/datahub-web-react/src/app/entity/dataset/preview/Preview.tsx @@ -46,7 +46,6 @@ export const Preview = ({ columnCount, sizeInBytes, statsSummary, - // eslint-disable-next-line @typescript-eslint/no-unused-vars lastUpdatedMs, }: { urn: string; @@ -108,9 +107,9 @@ export const Preview = ({ rowCount={rowCount} columnCount={columnCount} sizeInBytes={sizeInBytes} - queryCountLast30Days={172} - uniqueUserCountLast30Days={1} - lastUpdatedMs={Date.now()} + queryCountLast30Days={statsSummary?.queryCountLast30Days} + uniqueUserCountLast30Days={statsSummary?.uniqueUserCountLast30Days} + lastUpdatedMs={lastUpdatedMs} /> } /> diff --git a/datahub-web-react/src/app/entity/dataset/shared/DatasetStatsSummary.tsx b/datahub-web-react/src/app/entity/dataset/shared/DatasetStatsSummary.tsx index 176d7da89ffa0..136edd5656381 100644 --- a/datahub-web-react/src/app/entity/dataset/shared/DatasetStatsSummary.tsx +++ b/datahub-web-react/src/app/entity/dataset/shared/DatasetStatsSummary.tsx @@ -1,4 +1,3 @@ -/* eslint-disable no-param-reassign */ import React from 'react'; import styled from 'styled-components/macro'; import { Popover } from 'antd'; @@ -42,14 +41,6 @@ export const DatasetStatsSummary = ({ color, mode = 'normal', }: Props) => { - rowCount = 2133440; - columnCount = 12; - sizeInBytes = 29321728; - totalSqlQueries = 987654321; - queryCountLast30Days = 987654321; - uniqueUserCountLast30Days = 98765; - lastUpdatedMs = Date.now(); - const isTooltipMode = mode === 'tooltip-content'; const displayedColor = isTooltipMode ? '' : color ?? ANTD_GRAY[7]; @@ -60,12 +51,7 @@ export const DatasetStatsSummary = ({ render={(isExpanded) => ( - - {isExpanded - ? formatNumberWithoutAbbreviation(rowCount) - : countFormatter(rowCount as number)} - {' '} - rows + {isExpanded ? formatNumberWithoutAbbreviation(rowCount) : countFormatter(rowCount)} rows {!!columnCount && ( <> ,{' '} @@ -97,7 +83,7 @@ export const DatasetStatsSummary = ({ !!uniqueUserCountLast30Days && ( - {formatNumberWithoutAbbreviation(uniqueUserCountLast30Days)} unique users - high + {formatNumberWithoutAbbreviation(uniqueUserCountLast30Days)} unique users ), !!lastUpdatedMs && ( diff --git a/datahub-web-react/src/app/preview/DefaultPreviewCard.tsx b/datahub-web-react/src/app/preview/DefaultPreviewCard.tsx index 8a5109aac1010..18b7c3c852c53 100644 --- a/datahub-web-react/src/app/preview/DefaultPreviewCard.tsx +++ b/datahub-web-react/src/app/preview/DefaultPreviewCard.tsx @@ -17,7 +17,6 @@ import { ParentNodesResult, EntityPath, DataProduct, - EntityType, } from '../../types.generated'; import TagTermGroup from '../shared/tags/TagTermGroup'; import { ANTD_GRAY } from '../entity/shared/constants'; @@ -231,22 +230,6 @@ export default function DefaultPreviewCard({ previewType, paths, }: Props) { - // eslint-disable-next-line no-param-reassign - topUsers = []; - topUsers.push({ - type: EntityType.CorpUser, - urn: 'something', - properties: { - active: true, - fullName: 'yosh', - displayName: 'yosh display name', - firstName: 'yoshf', - lastName: 'yoshl', - title: 'yosht', - }, - username: 'yoshi', - __typename: 'CorpUser', - }); // sometimes these lists will be rendered inside an entity container (for example, in the case of impact analysis) // in those cases, we may want to enrich the preview w/ context about the container entity const { entityData } = useEntityData(); diff --git a/datahub-web-react/src/app/search/autoComplete/AutoCompleteTooltipContent.tsx b/datahub-web-react/src/app/search/autoComplete/AutoCompleteTooltipContent.tsx index 682c047fc38cc..dfe32c7805a9b 100644 --- a/datahub-web-react/src/app/search/autoComplete/AutoCompleteTooltipContent.tsx +++ b/datahub-web-react/src/app/search/autoComplete/AutoCompleteTooltipContent.tsx @@ -1,7 +1,6 @@ import { FolderOpenOutlined } from '@ant-design/icons'; import React from 'react'; import styled from 'styled-components'; -// eslint-disable-next-line @typescript-eslint/no-unused-vars import { Dataset, Entity, EntityType } from '../../../types.generated'; import { DatasetStatsSummary } from '../../entity/dataset/shared/DatasetStatsSummary'; import { useEntityRegistry } from '../../useEntityRegistry'; @@ -46,14 +45,14 @@ export default function AutoCompleteTooltipContent({ entity }: Props) { {displayName} {entity.type === EntityType.Dataset && ( )} From 97a2781e9391f69ed545407dfa002e7f65bc2209 Mon Sep 17 00:00:00 2001 From: Josh Eilers Date: Fri, 30 Jun 2023 09:44:16 -0700 Subject: [PATCH 04/16] componetize more stats --- .../src/app/entity/dataset/DatasetEntity.tsx | 6 +- .../app/entity/dataset/preview/Preview.tsx | 7 +- .../entity/dataset/shared/ByteCountStat.tsx | 40 ++++++++++ .../dataset/shared/DatasetStatsSummary.tsx | 74 ++++++------------- .../dataset/shared/FormattedBytesStat.tsx | 15 ---- .../entity/dataset/shared/QueryCountStat.tsx | 34 +++++++++ .../entity/dataset/shared/RowCountStat.tsx | 45 +++++++++++ .../app/entity/dataset/shared/StatText.tsx | 7 ++ .../entity/dataset/shared/UserCountStat.tsx | 31 ++++++++ .../src/app/preview/DefaultPreviewCard.tsx | 17 +++++ .../AutoCompleteTooltipContent.tsx | 11 +-- 11 files changed, 211 insertions(+), 76 deletions(-) create mode 100644 datahub-web-react/src/app/entity/dataset/shared/ByteCountStat.tsx delete mode 100644 datahub-web-react/src/app/entity/dataset/shared/FormattedBytesStat.tsx create mode 100644 datahub-web-react/src/app/entity/dataset/shared/QueryCountStat.tsx create mode 100644 datahub-web-react/src/app/entity/dataset/shared/RowCountStat.tsx create mode 100644 datahub-web-react/src/app/entity/dataset/shared/StatText.tsx create mode 100644 datahub-web-react/src/app/entity/dataset/shared/UserCountStat.tsx diff --git a/datahub-web-react/src/app/entity/dataset/DatasetEntity.tsx b/datahub-web-react/src/app/entity/dataset/DatasetEntity.tsx index cf9e70643aea7..243383666f10d 100644 --- a/datahub-web-react/src/app/entity/dataset/DatasetEntity.tsx +++ b/datahub-web-react/src/app/entity/dataset/DatasetEntity.tsx @@ -293,9 +293,9 @@ export class DatasetEntity implements Entity { insights={result.insights} externalUrl={data.properties?.externalUrl} statsSummary={data.statsSummary} - rowCount={(data as any).lastProfile?.length && (data as any).lastProfile[0].rowCount} - columnCount={(data as any).lastProfile?.length && (data as any).lastProfile[0].columnCount} - sizeInBytes={(data as any).lastProfile?.length && (data as any).lastProfile[0].sizeInBytes} + rowCount={2133440} + columnCount={12} + sizeInBytes={29321728} lastUpdatedMs={ (data as any).lastOperation?.length && (data as any).lastOperation[0].lastUpdatedTimestamp } diff --git a/datahub-web-react/src/app/entity/dataset/preview/Preview.tsx b/datahub-web-react/src/app/entity/dataset/preview/Preview.tsx index 6a31e5cd19fbc..b5fee05529129 100644 --- a/datahub-web-react/src/app/entity/dataset/preview/Preview.tsx +++ b/datahub-web-react/src/app/entity/dataset/preview/Preview.tsx @@ -46,6 +46,7 @@ export const Preview = ({ columnCount, sizeInBytes, statsSummary, + // eslint-disable-next-line @typescript-eslint/no-unused-vars lastUpdatedMs, }: { urn: string; @@ -107,9 +108,9 @@ export const Preview = ({ rowCount={rowCount} columnCount={columnCount} sizeInBytes={sizeInBytes} - queryCountLast30Days={statsSummary?.queryCountLast30Days} - uniqueUserCountLast30Days={statsSummary?.uniqueUserCountLast30Days} - lastUpdatedMs={lastUpdatedMs} + queryCountLast30Days={172} + uniqueUserCountLast30Days={1} + lastUpdatedMs={Date.now()} /> } /> diff --git a/datahub-web-react/src/app/entity/dataset/shared/ByteCountStat.tsx b/datahub-web-react/src/app/entity/dataset/shared/ByteCountStat.tsx new file mode 100644 index 0000000000000..5774d85ea51e9 --- /dev/null +++ b/datahub-web-react/src/app/entity/dataset/shared/ByteCountStat.tsx @@ -0,0 +1,40 @@ +import React from 'react'; +import { HddOutlined } from '@ant-design/icons'; +import { formatBytes, formatNumberWithoutAbbreviation } from '../../../shared/formatNumber'; +import ExpandingStat from './ExpandingStat'; +import { needsFormatting } from '../../../../utils/formatter'; +import StatText from './StatText'; + +type Props = { + color: string; + disabled: boolean; + bytes?: number | null; +}; + +export const ByteCountStat = ({ color, disabled, bytes }: Props) => { + if (!bytes) return null; + + const formattedBytes = formatBytes(bytes); + + return ( + ( + + + {isExpanded ? ( + <> + {formatNumberWithoutAbbreviation(bytes)} Bytes + + ) : ( + <> + {formattedBytes.number} {formattedBytes.unit} + + )} + + )} + /> + ); +}; + +export default ByteCountStat; diff --git a/datahub-web-react/src/app/entity/dataset/shared/DatasetStatsSummary.tsx b/datahub-web-react/src/app/entity/dataset/shared/DatasetStatsSummary.tsx index 136edd5656381..b5b2ee58fe098 100644 --- a/datahub-web-react/src/app/entity/dataset/shared/DatasetStatsSummary.tsx +++ b/datahub-web-react/src/app/entity/dataset/shared/DatasetStatsSummary.tsx @@ -1,18 +1,16 @@ +/* eslint-disable no-param-reassign */ import React from 'react'; import styled from 'styled-components/macro'; import { Popover } from 'antd'; -import { ClockCircleOutlined, ConsoleSqlOutlined, TableOutlined, TeamOutlined, HddOutlined } from '@ant-design/icons'; -import { formatNumberWithoutAbbreviation } from '../../../shared/formatNumber'; +import { ClockCircleOutlined } from '@ant-design/icons'; import { ANTD_GRAY } from '../../shared/constants'; import { toLocalDateTimeString, toRelativeTimeString } from '../../../shared/time/timeUtils'; import { StatsSummary } from '../../shared/components/styled/StatsSummary'; -import { FormattedBytesStat } from './FormattedBytesStat'; -import { countFormatter, needsFormatting } from '../../../../utils/formatter'; -import ExpandingStat from './ExpandingStat'; - -const StatText = styled.span<{ color: string }>` - color: ${(props) => props.color}; -`; +import { ByteCountStat } from './ByteCountStat'; +import QueryCountStat from './QueryCountStat'; +import StatText from './StatText'; +import RowCountStat from './RowCountStat'; +import UserCountStat from './UserCountStat'; const PopoverContent = styled.div` max-width: 300px; @@ -41,51 +39,27 @@ export const DatasetStatsSummary = ({ color, mode = 'normal', }: Props) => { + rowCount = 2133440; + columnCount = 12; + sizeInBytes = 29321728; + totalSqlQueries = 987654321; + queryCountLast30Days = 987654321; + uniqueUserCountLast30Days = 98765; + lastUpdatedMs = Date.now(); + const isTooltipMode = mode === 'tooltip-content'; const displayedColor = isTooltipMode ? '' : color ?? ANTD_GRAY[7]; const statsViews = [ - !!rowCount && ( - ( - - - {isExpanded ? formatNumberWithoutAbbreviation(rowCount) : countFormatter(rowCount)} rows - {!!columnCount && ( - <> - ,{' '} - - {isExpanded - ? formatNumberWithoutAbbreviation(columnCount) - : countFormatter(columnCount)} - {' '} - columns - - )} - - )} - /> - ), - !!sizeInBytes && ( - - - - - ), - (!!queryCountLast30Days || !!totalSqlQueries) && ( - - - {formatNumberWithoutAbbreviation(queryCountLast30Days || totalSqlQueries)}{' '} - {queryCountLast30Days ? <>queries last month : <>monthly queries} - - ), - !!uniqueUserCountLast30Days && ( - - - {formatNumberWithoutAbbreviation(uniqueUserCountLast30Days)} unique users - - ), + , + , + , + , !!lastUpdatedMs && ( { - const formattedBytes = formatBytes(bytes); - return ( - - {formattedBytes.number} {formattedBytes.unit} - - ); -}; diff --git a/datahub-web-react/src/app/entity/dataset/shared/QueryCountStat.tsx b/datahub-web-react/src/app/entity/dataset/shared/QueryCountStat.tsx new file mode 100644 index 0000000000000..052c22bc527d0 --- /dev/null +++ b/datahub-web-react/src/app/entity/dataset/shared/QueryCountStat.tsx @@ -0,0 +1,34 @@ +import React from 'react'; +import { ConsoleSqlOutlined } from '@ant-design/icons'; +import { formatNumberWithoutAbbreviation } from '../../../shared/formatNumber'; +import { countFormatter, needsFormatting } from '../../../../utils/formatter'; +import ExpandingStat from './ExpandingStat'; +import StatText from './StatText'; + +type Props = { + color: string; + disabled: boolean; + totalSqlQueries?: number | null; + queryCountLast30Days?: number | null; +}; + +const QueryCountStat = ({ color, disabled, totalSqlQueries, queryCountLast30Days }: Props) => { + const queryCount = queryCountLast30Days || totalSqlQueries; + + if (!queryCount) return null; + + return ( + ( + + + {isExpanded ? formatNumberWithoutAbbreviation(queryCount) : countFormatter(queryCount)}{' '} + {queryCountLast30Days ? <>queries last month : <>monthly queries} + + )} + /> + ); +}; + +export default QueryCountStat; diff --git a/datahub-web-react/src/app/entity/dataset/shared/RowCountStat.tsx b/datahub-web-react/src/app/entity/dataset/shared/RowCountStat.tsx new file mode 100644 index 0000000000000..8fba81acad9fe --- /dev/null +++ b/datahub-web-react/src/app/entity/dataset/shared/RowCountStat.tsx @@ -0,0 +1,45 @@ +import React from 'react'; +import { TableOutlined } from '@ant-design/icons'; +import { formatNumberWithoutAbbreviation } from '../../../shared/formatNumber'; +import { countFormatter, needsFormatting } from '../../../../utils/formatter'; +import ExpandingStat from './ExpandingStat'; +import StatText from './StatText'; + +type Props = { + color: string; + disabled: boolean; + rowCount?: number | null; + columnCount?: number | null; +}; + +const RowCountStat = ({ color, disabled, rowCount, columnCount }: Props) => { + if (!rowCount) return null; + + return ( + ( + + + + {isExpanded ? formatNumberWithoutAbbreviation(rowCount) : countFormatter(rowCount as number)} + {' '} + rows + {!!columnCount && ( + <> + ,{' '} + + {isExpanded + ? formatNumberWithoutAbbreviation(columnCount) + : countFormatter(columnCount)} + {' '} + columns + + )} + + )} + /> + ); +}; + +export default RowCountStat; diff --git a/datahub-web-react/src/app/entity/dataset/shared/StatText.tsx b/datahub-web-react/src/app/entity/dataset/shared/StatText.tsx new file mode 100644 index 0000000000000..266fef577bb0c --- /dev/null +++ b/datahub-web-react/src/app/entity/dataset/shared/StatText.tsx @@ -0,0 +1,7 @@ +import styled from 'styled-components'; + +const StatText = styled.span<{ color: string }>` + color: ${(props) => props.color}; +`; + +export default StatText; diff --git a/datahub-web-react/src/app/entity/dataset/shared/UserCountStat.tsx b/datahub-web-react/src/app/entity/dataset/shared/UserCountStat.tsx new file mode 100644 index 0000000000000..691924baa9467 --- /dev/null +++ b/datahub-web-react/src/app/entity/dataset/shared/UserCountStat.tsx @@ -0,0 +1,31 @@ +import React from 'react'; +import { TeamOutlined } from '@ant-design/icons'; +import { formatNumberWithoutAbbreviation } from '../../../shared/formatNumber'; +import { countFormatter, needsFormatting } from '../../../../utils/formatter'; +import ExpandingStat from './ExpandingStat'; +import StatText from './StatText'; + +type Props = { + color: string; + disabled: boolean; + userCount?: number | null; +}; + +const UserCountStat = ({ color, disabled, userCount }: Props) => { + if (!userCount) return null; + + return ( + ( + + + {isExpanded ? formatNumberWithoutAbbreviation(userCount) : countFormatter(userCount)} unique + users + + )} + /> + ); +}; + +export default UserCountStat; diff --git a/datahub-web-react/src/app/preview/DefaultPreviewCard.tsx b/datahub-web-react/src/app/preview/DefaultPreviewCard.tsx index 18b7c3c852c53..8a5109aac1010 100644 --- a/datahub-web-react/src/app/preview/DefaultPreviewCard.tsx +++ b/datahub-web-react/src/app/preview/DefaultPreviewCard.tsx @@ -17,6 +17,7 @@ import { ParentNodesResult, EntityPath, DataProduct, + EntityType, } from '../../types.generated'; import TagTermGroup from '../shared/tags/TagTermGroup'; import { ANTD_GRAY } from '../entity/shared/constants'; @@ -230,6 +231,22 @@ export default function DefaultPreviewCard({ previewType, paths, }: Props) { + // eslint-disable-next-line no-param-reassign + topUsers = []; + topUsers.push({ + type: EntityType.CorpUser, + urn: 'something', + properties: { + active: true, + fullName: 'yosh', + displayName: 'yosh display name', + firstName: 'yoshf', + lastName: 'yoshl', + title: 'yosht', + }, + username: 'yoshi', + __typename: 'CorpUser', + }); // sometimes these lists will be rendered inside an entity container (for example, in the case of impact analysis) // in those cases, we may want to enrich the preview w/ context about the container entity const { entityData } = useEntityData(); diff --git a/datahub-web-react/src/app/search/autoComplete/AutoCompleteTooltipContent.tsx b/datahub-web-react/src/app/search/autoComplete/AutoCompleteTooltipContent.tsx index dfe32c7805a9b..682c047fc38cc 100644 --- a/datahub-web-react/src/app/search/autoComplete/AutoCompleteTooltipContent.tsx +++ b/datahub-web-react/src/app/search/autoComplete/AutoCompleteTooltipContent.tsx @@ -1,6 +1,7 @@ import { FolderOpenOutlined } from '@ant-design/icons'; import React from 'react'; import styled from 'styled-components'; +// eslint-disable-next-line @typescript-eslint/no-unused-vars import { Dataset, Entity, EntityType } from '../../../types.generated'; import { DatasetStatsSummary } from '../../entity/dataset/shared/DatasetStatsSummary'; import { useEntityRegistry } from '../../useEntityRegistry'; @@ -45,14 +46,14 @@ export default function AutoCompleteTooltipContent({ entity }: Props) { {displayName} {entity.type === EntityType.Dataset && ( )} From a043255edb29c42efefdb9176a9abf593e1883fb Mon Sep 17 00:00:00 2001 From: Josh Eilers Date: Fri, 30 Jun 2023 10:18:45 -0700 Subject: [PATCH 05/16] hide left separators --- .../shared/components/styled/StatsSummary.tsx | 44 ++++++++++++------- 1 file changed, 27 insertions(+), 17 deletions(-) diff --git a/datahub-web-react/src/app/entity/shared/components/styled/StatsSummary.tsx b/datahub-web-react/src/app/entity/shared/components/styled/StatsSummary.tsx index 8c273a9e5658d..b4427dbac722c 100644 --- a/datahub-web-react/src/app/entity/shared/components/styled/StatsSummary.tsx +++ b/datahub-web-react/src/app/entity/shared/components/styled/StatsSummary.tsx @@ -7,33 +7,43 @@ type Props = { }; const StatsContainer = styled.div` - margin-top: 8px; + position: relative; +`; + +const StatsLeftBorderHider = styled.div` + position: absolute; + left: -10px; + border: 2px solid red; + z-index: 1; + height: 100%; +`; + +const StatsListContainer = styled.div` display: flex; flex-wrap: wrap; - align-items: center; - gap: 5px; + gap: 10px; + margin-top: 8px; + margin-left: -10px; `; -const StatDivider = styled.div` - padding-left: 5px; - margin-right: 5px; - border-right: 1px solid ${ANTD_GRAY[4]}; - height: 21px; +const StatContainer = styled.div` + /* Flex needed so the child stats can animate */ + display: flex; + padding-left: 10px; + border-left: 1px solid ${ANTD_GRAY[4]}; `; export const StatsSummary = ({ stats }: Props) => { return ( - <> + + {!!stats.length && ( - - {stats.map((statView, index) => ( - <> - {statView} - {index < stats.length - 1 && } - + + {stats.map((statView) => ( + {statView} ))} - + )} - + ); }; From 7616af984abb3fa921ae40dd9b295e493965b0e5 Mon Sep 17 00:00:00 2001 From: Josh Eilers Date: Fri, 30 Jun 2023 10:21:24 -0700 Subject: [PATCH 06/16] use an overflow approach to hide the left borders --- .../entity/shared/components/styled/StatsSummary.tsx | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/datahub-web-react/src/app/entity/shared/components/styled/StatsSummary.tsx b/datahub-web-react/src/app/entity/shared/components/styled/StatsSummary.tsx index b4427dbac722c..5df286e953558 100644 --- a/datahub-web-react/src/app/entity/shared/components/styled/StatsSummary.tsx +++ b/datahub-web-react/src/app/entity/shared/components/styled/StatsSummary.tsx @@ -7,15 +7,7 @@ type Props = { }; const StatsContainer = styled.div` - position: relative; -`; - -const StatsLeftBorderHider = styled.div` - position: absolute; - left: -10px; - border: 2px solid red; - z-index: 1; - height: 100%; + overflow: hidden; `; const StatsListContainer = styled.div` @@ -36,7 +28,6 @@ const StatContainer = styled.div` export const StatsSummary = ({ stats }: Props) => { return ( - {!!stats.length && ( {stats.map((statView) => ( From cff923291bf8541d2626ce40ecf678e0c220a861 Mon Sep 17 00:00:00 2001 From: Josh Eilers Date: Fri, 30 Jun 2023 10:32:58 -0700 Subject: [PATCH 07/16] proper stat filtering --- .../entity/dataset/shared/ByteCountStat.tsx | 12 +++---- .../dataset/shared/DatasetStatsSummary.tsx | 31 +++++++++++++------ .../entity/dataset/shared/RowCountStat.tsx | 4 +-- .../entity/dataset/shared/UserCountStat.tsx | 4 +-- 4 files changed, 28 insertions(+), 23 deletions(-) diff --git a/datahub-web-react/src/app/entity/dataset/shared/ByteCountStat.tsx b/datahub-web-react/src/app/entity/dataset/shared/ByteCountStat.tsx index 5774d85ea51e9..af8c997aad8cb 100644 --- a/datahub-web-react/src/app/entity/dataset/shared/ByteCountStat.tsx +++ b/datahub-web-react/src/app/entity/dataset/shared/ByteCountStat.tsx @@ -8,23 +8,21 @@ import StatText from './StatText'; type Props = { color: string; disabled: boolean; - bytes?: number | null; + sizeInBytes: number; }; -export const ByteCountStat = ({ color, disabled, bytes }: Props) => { - if (!bytes) return null; - - const formattedBytes = formatBytes(bytes); +export const ByteCountStat = ({ color, disabled, sizeInBytes }: Props) => { + const formattedBytes = formatBytes(sizeInBytes); return ( ( {isExpanded ? ( <> - {formatNumberWithoutAbbreviation(bytes)} Bytes + {formatNumberWithoutAbbreviation(sizeInBytes)} Bytes ) : ( <> diff --git a/datahub-web-react/src/app/entity/dataset/shared/DatasetStatsSummary.tsx b/datahub-web-react/src/app/entity/dataset/shared/DatasetStatsSummary.tsx index b5b2ee58fe098..1b2b94fac6099 100644 --- a/datahub-web-react/src/app/entity/dataset/shared/DatasetStatsSummary.tsx +++ b/datahub-web-react/src/app/entity/dataset/shared/DatasetStatsSummary.tsx @@ -51,15 +51,26 @@ export const DatasetStatsSummary = ({ const displayedColor = isTooltipMode ? '' : color ?? ANTD_GRAY[7]; const statsViews = [ - , - , - , - , + !!rowCount && ( + + ), + !!sizeInBytes && , + (!!queryCountLast30Days || !!totalSqlQueries) && ( + + ), + !!uniqueUserCountLast30Days && ( + + ), !!lastUpdatedMs && ( ), - ].filter((stat) => stat); + ].filter(Boolean); return <>{statsViews.length > 0 && }; }; diff --git a/datahub-web-react/src/app/entity/dataset/shared/RowCountStat.tsx b/datahub-web-react/src/app/entity/dataset/shared/RowCountStat.tsx index 8fba81acad9fe..c3e27bc1641b5 100644 --- a/datahub-web-react/src/app/entity/dataset/shared/RowCountStat.tsx +++ b/datahub-web-react/src/app/entity/dataset/shared/RowCountStat.tsx @@ -8,13 +8,11 @@ import StatText from './StatText'; type Props = { color: string; disabled: boolean; - rowCount?: number | null; + rowCount: number; columnCount?: number | null; }; const RowCountStat = ({ color, disabled, rowCount, columnCount }: Props) => { - if (!rowCount) return null; - return ( { - if (!userCount) return null; - return ( Date: Fri, 30 Jun 2023 10:49:27 -0700 Subject: [PATCH 08/16] back out some test code --- .../src/app/entity/dataset/DatasetEntity.tsx | 6 +++--- .../src/app/entity/dataset/preview/Preview.tsx | 7 +++---- .../autoComplete/AutoCompleteTooltipContent.tsx | 11 +++++------ 3 files changed, 11 insertions(+), 13 deletions(-) diff --git a/datahub-web-react/src/app/entity/dataset/DatasetEntity.tsx b/datahub-web-react/src/app/entity/dataset/DatasetEntity.tsx index 243383666f10d..cf9e70643aea7 100644 --- a/datahub-web-react/src/app/entity/dataset/DatasetEntity.tsx +++ b/datahub-web-react/src/app/entity/dataset/DatasetEntity.tsx @@ -293,9 +293,9 @@ export class DatasetEntity implements Entity { insights={result.insights} externalUrl={data.properties?.externalUrl} statsSummary={data.statsSummary} - rowCount={2133440} - columnCount={12} - sizeInBytes={29321728} + rowCount={(data as any).lastProfile?.length && (data as any).lastProfile[0].rowCount} + columnCount={(data as any).lastProfile?.length && (data as any).lastProfile[0].columnCount} + sizeInBytes={(data as any).lastProfile?.length && (data as any).lastProfile[0].sizeInBytes} lastUpdatedMs={ (data as any).lastOperation?.length && (data as any).lastOperation[0].lastUpdatedTimestamp } diff --git a/datahub-web-react/src/app/entity/dataset/preview/Preview.tsx b/datahub-web-react/src/app/entity/dataset/preview/Preview.tsx index b5fee05529129..6a31e5cd19fbc 100644 --- a/datahub-web-react/src/app/entity/dataset/preview/Preview.tsx +++ b/datahub-web-react/src/app/entity/dataset/preview/Preview.tsx @@ -46,7 +46,6 @@ export const Preview = ({ columnCount, sizeInBytes, statsSummary, - // eslint-disable-next-line @typescript-eslint/no-unused-vars lastUpdatedMs, }: { urn: string; @@ -108,9 +107,9 @@ export const Preview = ({ rowCount={rowCount} columnCount={columnCount} sizeInBytes={sizeInBytes} - queryCountLast30Days={172} - uniqueUserCountLast30Days={1} - lastUpdatedMs={Date.now()} + queryCountLast30Days={statsSummary?.queryCountLast30Days} + uniqueUserCountLast30Days={statsSummary?.uniqueUserCountLast30Days} + lastUpdatedMs={lastUpdatedMs} /> } /> diff --git a/datahub-web-react/src/app/search/autoComplete/AutoCompleteTooltipContent.tsx b/datahub-web-react/src/app/search/autoComplete/AutoCompleteTooltipContent.tsx index 682c047fc38cc..dfe32c7805a9b 100644 --- a/datahub-web-react/src/app/search/autoComplete/AutoCompleteTooltipContent.tsx +++ b/datahub-web-react/src/app/search/autoComplete/AutoCompleteTooltipContent.tsx @@ -1,7 +1,6 @@ import { FolderOpenOutlined } from '@ant-design/icons'; import React from 'react'; import styled from 'styled-components'; -// eslint-disable-next-line @typescript-eslint/no-unused-vars import { Dataset, Entity, EntityType } from '../../../types.generated'; import { DatasetStatsSummary } from '../../entity/dataset/shared/DatasetStatsSummary'; import { useEntityRegistry } from '../../useEntityRegistry'; @@ -46,14 +45,14 @@ export default function AutoCompleteTooltipContent({ entity }: Props) { {displayName} {entity.type === EntityType.Dataset && ( )} From 109e4408f98a1bea0fcfef73aeb1a6b5ac78933e Mon Sep 17 00:00:00 2001 From: Josh Eilers Date: Fri, 30 Jun 2023 13:53:31 -0700 Subject: [PATCH 09/16] more componetization --- .../entity/chart/shared/ChartStatsSummary.tsx | 84 +++++------------- .../shared/DashboardStatsSummary.tsx | 87 +++++-------------- .../dataset/shared/DatasetStatsSummary.tsx | 14 +-- .../shared/components/styled/StatsSummary.tsx | 13 +-- .../components/styled/stat}/ByteCountStat.tsx | 10 +-- .../components/styled/stat/ChartCountStat.tsx | 29 +++++++ .../styled/stat/LastUpdatedStat.tsx | 44 ++++++++++ .../styled/stat}/QueryCountStat.tsx | 8 +- .../components/styled/stat}/RowCountStat.tsx | 13 ++- .../components/styled/stat}/StatText.tsx | 0 .../components/styled/stat}/UserCountStat.tsx | 12 +-- .../components/styled/stat/ViewCountStat.tsx | 27 ++++++ .../HorizontalExpander.tsx} | 4 +- 13 files changed, 178 insertions(+), 167 deletions(-) rename datahub-web-react/src/app/entity/{dataset/shared => shared/components/styled/stat}/ByteCountStat.tsx (78%) create mode 100644 datahub-web-react/src/app/entity/shared/components/styled/stat/ChartCountStat.tsx create mode 100644 datahub-web-react/src/app/entity/shared/components/styled/stat/LastUpdatedStat.tsx rename datahub-web-react/src/app/entity/{dataset/shared => shared/components/styled/stat}/QueryCountStat.tsx (78%) rename datahub-web-react/src/app/entity/{dataset/shared => shared/components/styled/stat}/RowCountStat.tsx (71%) rename datahub-web-react/src/app/entity/{dataset/shared => shared/components/styled/stat}/StatText.tsx (100%) rename datahub-web-react/src/app/entity/{dataset/shared => shared/components/styled/stat}/UserCountStat.tsx (63%) create mode 100644 datahub-web-react/src/app/entity/shared/components/styled/stat/ViewCountStat.tsx rename datahub-web-react/src/app/{entity/dataset/shared/ExpandingStat.tsx => shared/HorizontalExpander.tsx} (95%) diff --git a/datahub-web-react/src/app/entity/chart/shared/ChartStatsSummary.tsx b/datahub-web-react/src/app/entity/chart/shared/ChartStatsSummary.tsx index 566a9f9db5fc8..5f3c79b355419 100644 --- a/datahub-web-react/src/app/entity/chart/shared/ChartStatsSummary.tsx +++ b/datahub-web-react/src/app/entity/chart/shared/ChartStatsSummary.tsx @@ -1,22 +1,11 @@ +/* eslint-disable no-param-reassign */ import React from 'react'; -import styled from 'styled-components'; -import { Popover, Tooltip } from 'antd'; -import { ClockCircleOutlined, EyeOutlined, TeamOutlined, QuestionCircleOutlined } from '@ant-design/icons'; -import { formatNumberWithoutAbbreviation } from '../../../shared/formatNumber'; import { ANTD_GRAY } from '../../shared/constants'; -import { toLocalDateTimeString, toRelativeTimeString } from '../../../shared/time/timeUtils'; import { StatsSummary } from '../../shared/components/styled/StatsSummary'; -import { countFormatter, needsFormatting } from '../../../../utils/formatter'; -import ExpandingStat from '../../dataset/shared/ExpandingStat'; - -const StatText = styled.span` - color: ${ANTD_GRAY[8]}; -`; - -const HelpIcon = styled(QuestionCircleOutlined)` - color: ${ANTD_GRAY[7]}; - padding-left: 4px; -`; +import ChartCountStat from '../../shared/components/styled/stat/ChartCountStat'; +import ViewCountStat from '../../shared/components/styled/stat/ViewCountStat'; +import UserCountStat from '../../shared/components/styled/stat/UserCountStat'; +import LastUpdatedStat from '../../shared/components/styled/stat/LastUpdatedStat'; type Props = { chartCount?: number | null; @@ -33,55 +22,22 @@ export const ChartStatsSummary = ({ lastUpdatedMs, createdMs, }: Props) => { + chartCount = 2133440; + viewCount = 987654321; + uniqueUserCountLast30Days = 98765; + lastUpdatedMs = Date.now(); + createdMs = Date.now(); + + const color = ANTD_GRAY[7]; + const statsViews = [ - (!!chartCount && ( - ( - - {isExpanded ? formatNumberWithoutAbbreviation(chartCount) : countFormatter(chartCount)}{' '} - charts - - )} - /> - )) || - undefined, - (!!viewCount && ( - - - {formatNumberWithoutAbbreviation(viewCount)} views - - )) || - undefined, - (!!uniqueUserCountLast30Days && ( - - - {formatNumberWithoutAbbreviation(uniqueUserCountLast30Days)} unique users - - )) || - undefined, - (!!lastUpdatedMs && ( - - {createdMs &&
Created on {toLocalDateTimeString(createdMs)}.
} -
- Changed on {toLocalDateTimeString(lastUpdatedMs)}.{' '} - - - -
- - } - > - - - Changed {toRelativeTimeString(lastUpdatedMs)} - - - )) || - undefined, - ].filter((stat) => stat !== undefined); + !!chartCount && , + !!viewCount && , + !!uniqueUserCountLast30Days && , + !!lastUpdatedMs && ( + + ), + ].filter(Boolean); return <>{statsViews.length > 0 && }; }; diff --git a/datahub-web-react/src/app/entity/dashboard/shared/DashboardStatsSummary.tsx b/datahub-web-react/src/app/entity/dashboard/shared/DashboardStatsSummary.tsx index e8fb4c16aca9c..f49d425e50c40 100644 --- a/datahub-web-react/src/app/entity/dashboard/shared/DashboardStatsSummary.tsx +++ b/datahub-web-react/src/app/entity/dashboard/shared/DashboardStatsSummary.tsx @@ -1,22 +1,11 @@ +/* eslint-disable no-param-reassign */ import React from 'react'; -import styled from 'styled-components'; -import { Popover, Tooltip } from 'antd'; -import { ClockCircleOutlined, EyeOutlined, TeamOutlined, QuestionCircleOutlined } from '@ant-design/icons'; -import { formatNumberWithoutAbbreviation } from '../../../shared/formatNumber'; import { ANTD_GRAY } from '../../shared/constants'; -import { toLocalDateTimeString, toRelativeTimeString } from '../../../shared/time/timeUtils'; import { StatsSummary } from '../../shared/components/styled/StatsSummary'; -import { countFormatter, needsFormatting } from '../../../../utils/formatter'; -import ExpandingStat from '../../dataset/shared/ExpandingStat'; - -const StatText = styled.span` - color: ${ANTD_GRAY[8]}; -`; - -const HelpIcon = styled(QuestionCircleOutlined)` - color: ${ANTD_GRAY[7]}; - padding-left: 4px; -`; +import ChartCountStat from '../../shared/components/styled/stat/ChartCountStat'; +import ViewCountStat from '../../shared/components/styled/stat/ViewCountStat'; +import UserCountStat from '../../shared/components/styled/stat/UserCountStat'; +import LastUpdatedStat from '../../shared/components/styled/stat/LastUpdatedStat'; type Props = { chartCount?: number | null; @@ -33,55 +22,27 @@ export const DashboardStatsSummary = ({ lastUpdatedMs, createdMs, }: Props) => { + chartCount = 2133440; + viewCount = 987654321; + uniqueUserCountLast30Days = 98765; + lastUpdatedMs = Date.now(); + createdMs = Date.now(); + + const color = ANTD_GRAY[7]; + const statsViews = [ - (!!chartCount && ( - ( - - {isExpanded ? formatNumberWithoutAbbreviation(chartCount) : countFormatter(chartCount)}{' '} - charts - - )} + !!chartCount && , + !!viewCount && , + !!uniqueUserCountLast30Days && , + !!lastUpdatedMs && ( + - )) || - undefined, - (!!viewCount && ( - - - {formatNumberWithoutAbbreviation(viewCount)} views - - )) || - undefined, - (!!uniqueUserCountLast30Days && ( - - - {formatNumberWithoutAbbreviation(uniqueUserCountLast30Days)} unique users - - )) || - undefined, - (!!lastUpdatedMs && ( - - {createdMs &&
Created on {toLocalDateTimeString(createdMs)}.
} -
- Changed on {toLocalDateTimeString(lastUpdatedMs)}.{' '} - - - -
- - } - > - - - Changed {toRelativeTimeString(lastUpdatedMs)} - - - )) || - undefined, - ].filter((stat) => stat !== undefined); + ), + ].filter(Boolean); return <>{statsViews.length > 0 && }; }; diff --git a/datahub-web-react/src/app/entity/dataset/shared/DatasetStatsSummary.tsx b/datahub-web-react/src/app/entity/dataset/shared/DatasetStatsSummary.tsx index 1b2b94fac6099..88468cbc06c48 100644 --- a/datahub-web-react/src/app/entity/dataset/shared/DatasetStatsSummary.tsx +++ b/datahub-web-react/src/app/entity/dataset/shared/DatasetStatsSummary.tsx @@ -6,11 +6,11 @@ import { ClockCircleOutlined } from '@ant-design/icons'; import { ANTD_GRAY } from '../../shared/constants'; import { toLocalDateTimeString, toRelativeTimeString } from '../../../shared/time/timeUtils'; import { StatsSummary } from '../../shared/components/styled/StatsSummary'; -import { ByteCountStat } from './ByteCountStat'; -import QueryCountStat from './QueryCountStat'; -import StatText from './StatText'; -import RowCountStat from './RowCountStat'; -import UserCountStat from './UserCountStat'; +import RowCountStat from '../../shared/components/styled/stat/RowCountStat'; +import ByteCountStat from '../../shared/components/styled/stat/ByteCountStat'; +import QueryCountStat from '../../shared/components/styled/stat/QueryCountStat'; +import UserCountStat from '../../shared/components/styled/stat/UserCountStat'; +import StatText from '../../shared/components/styled/stat/StatText'; const PopoverContent = styled.div` max-width: 300px; @@ -39,6 +39,7 @@ export const DatasetStatsSummary = ({ color, mode = 'normal', }: Props) => { + // todo - remove rowCount = 2133440; columnCount = 12; sizeInBytes = 29321728; @@ -71,9 +72,12 @@ export const DatasetStatsSummary = ({ !!uniqueUserCountLast30Days && ( ), + // todo - consolidate this with the LastUpdatedStat + // it's weird having a tooltip embedded in a popover !!lastUpdatedMs && ( Data was last updated in the source platform on{' '} diff --git a/datahub-web-react/src/app/entity/shared/components/styled/StatsSummary.tsx b/datahub-web-react/src/app/entity/shared/components/styled/StatsSummary.tsx index 5df286e953558..5a56b7f7b65d6 100644 --- a/datahub-web-react/src/app/entity/shared/components/styled/StatsSummary.tsx +++ b/datahub-web-react/src/app/entity/shared/components/styled/StatsSummary.tsx @@ -8,9 +8,6 @@ type Props = { const StatsContainer = styled.div` overflow: hidden; -`; - -const StatsListContainer = styled.div` display: flex; flex-wrap: wrap; gap: 10px; @@ -28,13 +25,9 @@ const StatContainer = styled.div` export const StatsSummary = ({ stats }: Props) => { return ( - {!!stats.length && ( - - {stats.map((statView) => ( - {statView} - ))} - - )} + {stats.map((statView) => ( + {statView} + ))} ); }; diff --git a/datahub-web-react/src/app/entity/dataset/shared/ByteCountStat.tsx b/datahub-web-react/src/app/entity/shared/components/styled/stat/ByteCountStat.tsx similarity index 78% rename from datahub-web-react/src/app/entity/dataset/shared/ByteCountStat.tsx rename to datahub-web-react/src/app/entity/shared/components/styled/stat/ByteCountStat.tsx index af8c997aad8cb..03aaaf5b94dd1 100644 --- a/datahub-web-react/src/app/entity/dataset/shared/ByteCountStat.tsx +++ b/datahub-web-react/src/app/entity/shared/components/styled/stat/ByteCountStat.tsx @@ -1,9 +1,9 @@ import React from 'react'; import { HddOutlined } from '@ant-design/icons'; -import { formatBytes, formatNumberWithoutAbbreviation } from '../../../shared/formatNumber'; -import ExpandingStat from './ExpandingStat'; -import { needsFormatting } from '../../../../utils/formatter'; import StatText from './StatText'; +import { formatBytes, formatNumberWithoutAbbreviation } from '../../../../../shared/formatNumber'; +import { needsFormatting } from '../../../../../../utils/formatter'; +import HorizontalExpander from '../../../../../shared/HorizontalExpander'; type Props = { color: string; @@ -11,11 +11,11 @@ type Props = { sizeInBytes: number; }; -export const ByteCountStat = ({ color, disabled, sizeInBytes }: Props) => { +const ByteCountStat = ({ color, disabled, sizeInBytes }: Props) => { const formattedBytes = formatBytes(sizeInBytes); return ( - ( diff --git a/datahub-web-react/src/app/entity/shared/components/styled/stat/ChartCountStat.tsx b/datahub-web-react/src/app/entity/shared/components/styled/stat/ChartCountStat.tsx new file mode 100644 index 0000000000000..2967e01679d52 --- /dev/null +++ b/datahub-web-react/src/app/entity/shared/components/styled/stat/ChartCountStat.tsx @@ -0,0 +1,29 @@ +import React from 'react'; +import { TableOutlined } from '@ant-design/icons'; +import StatText from './StatText'; +import HorizontalExpander from '../../../../../shared/HorizontalExpander'; +import { countFormatter, needsFormatting } from '../../../../../../utils/formatter'; +import { formatNumberWithoutAbbreviation } from '../../../../../shared/formatNumber'; + +type Props = { + color: string; + chartCount: number; +}; + +const ChartCountStat = ({ color, chartCount }: Props) => { + return ( + ( + + {/* todo - what icon here? */} + + {isExpanded ? formatNumberWithoutAbbreviation(chartCount) : countFormatter(chartCount)}{' '} + charts + + )} + /> + ); +}; + +export default ChartCountStat; diff --git a/datahub-web-react/src/app/entity/shared/components/styled/stat/LastUpdatedStat.tsx b/datahub-web-react/src/app/entity/shared/components/styled/stat/LastUpdatedStat.tsx new file mode 100644 index 0000000000000..33248412d9770 --- /dev/null +++ b/datahub-web-react/src/app/entity/shared/components/styled/stat/LastUpdatedStat.tsx @@ -0,0 +1,44 @@ +import { Popover, Tooltip } from 'antd'; +import React from 'react'; +import styled from 'styled-components'; +import { ClockCircleOutlined, QuestionCircleOutlined } from '@ant-design/icons'; +import { toLocalDateTimeString, toRelativeTimeString } from '../../../../../shared/time/timeUtils'; +import StatText from './StatText'; + +type Props = { + color: string; + entityLabel: 'chart' | 'dashboard'; + lastUpdatedMs: number; + createdMs?: number | null; +}; + +const HelpIcon = styled(QuestionCircleOutlined)<{ color: string }>` + color: ${(props) => props.color}; + padding-left: 4px; +`; + +const LastUpdatedStat = ({ color, entityLabel, lastUpdatedMs, createdMs }: Props) => { + return ( + + {createdMs &&
Created on {toLocalDateTimeString(createdMs)}.
} +
+ Changed on {toLocalDateTimeString(lastUpdatedMs)}.{' '} + + + +
+ + } + > + + + Changed {toRelativeTimeString(lastUpdatedMs)} + + + ); +}; + +export default LastUpdatedStat; diff --git a/datahub-web-react/src/app/entity/dataset/shared/QueryCountStat.tsx b/datahub-web-react/src/app/entity/shared/components/styled/stat/QueryCountStat.tsx similarity index 78% rename from datahub-web-react/src/app/entity/dataset/shared/QueryCountStat.tsx rename to datahub-web-react/src/app/entity/shared/components/styled/stat/QueryCountStat.tsx index 052c22bc527d0..897b5a06a4720 100644 --- a/datahub-web-react/src/app/entity/dataset/shared/QueryCountStat.tsx +++ b/datahub-web-react/src/app/entity/shared/components/styled/stat/QueryCountStat.tsx @@ -1,9 +1,9 @@ import React from 'react'; import { ConsoleSqlOutlined } from '@ant-design/icons'; -import { formatNumberWithoutAbbreviation } from '../../../shared/formatNumber'; -import { countFormatter, needsFormatting } from '../../../../utils/formatter'; -import ExpandingStat from './ExpandingStat'; import StatText from './StatText'; +import HorizontalExpander from '../../../../../shared/HorizontalExpander'; +import { countFormatter, needsFormatting } from '../../../../../../utils/formatter'; +import { formatNumberWithoutAbbreviation } from '../../../../../shared/formatNumber'; type Props = { color: string; @@ -18,7 +18,7 @@ const QueryCountStat = ({ color, disabled, totalSqlQueries, queryCountLast30Days if (!queryCount) return null; return ( - ( diff --git a/datahub-web-react/src/app/entity/dataset/shared/RowCountStat.tsx b/datahub-web-react/src/app/entity/shared/components/styled/stat/RowCountStat.tsx similarity index 71% rename from datahub-web-react/src/app/entity/dataset/shared/RowCountStat.tsx rename to datahub-web-react/src/app/entity/shared/components/styled/stat/RowCountStat.tsx index c3e27bc1641b5..24ab3caf95ff7 100644 --- a/datahub-web-react/src/app/entity/dataset/shared/RowCountStat.tsx +++ b/datahub-web-react/src/app/entity/shared/components/styled/stat/RowCountStat.tsx @@ -1,9 +1,9 @@ import React from 'react'; import { TableOutlined } from '@ant-design/icons'; -import { formatNumberWithoutAbbreviation } from '../../../shared/formatNumber'; -import { countFormatter, needsFormatting } from '../../../../utils/formatter'; -import ExpandingStat from './ExpandingStat'; import StatText from './StatText'; +import HorizontalExpander from '../../../../../shared/HorizontalExpander'; +import { countFormatter, needsFormatting } from '../../../../../../utils/formatter'; +import { formatNumberWithoutAbbreviation } from '../../../../../shared/formatNumber'; type Props = { color: string; @@ -14,15 +14,12 @@ type Props = { const RowCountStat = ({ color, disabled, rowCount, columnCount }: Props) => { return ( - ( - - {isExpanded ? formatNumberWithoutAbbreviation(rowCount) : countFormatter(rowCount as number)} - {' '} - rows + {isExpanded ? formatNumberWithoutAbbreviation(rowCount) : countFormatter(rowCount)} rows {!!columnCount && ( <> ,{' '} diff --git a/datahub-web-react/src/app/entity/dataset/shared/StatText.tsx b/datahub-web-react/src/app/entity/shared/components/styled/stat/StatText.tsx similarity index 100% rename from datahub-web-react/src/app/entity/dataset/shared/StatText.tsx rename to datahub-web-react/src/app/entity/shared/components/styled/stat/StatText.tsx diff --git a/datahub-web-react/src/app/entity/dataset/shared/UserCountStat.tsx b/datahub-web-react/src/app/entity/shared/components/styled/stat/UserCountStat.tsx similarity index 63% rename from datahub-web-react/src/app/entity/dataset/shared/UserCountStat.tsx rename to datahub-web-react/src/app/entity/shared/components/styled/stat/UserCountStat.tsx index a3898838f9a18..69198b688e045 100644 --- a/datahub-web-react/src/app/entity/dataset/shared/UserCountStat.tsx +++ b/datahub-web-react/src/app/entity/shared/components/styled/stat/UserCountStat.tsx @@ -1,19 +1,19 @@ import React from 'react'; import { TeamOutlined } from '@ant-design/icons'; -import { formatNumberWithoutAbbreviation } from '../../../shared/formatNumber'; -import { countFormatter, needsFormatting } from '../../../../utils/formatter'; -import ExpandingStat from './ExpandingStat'; import StatText from './StatText'; +import HorizontalExpander from '../../../../../shared/HorizontalExpander'; +import { countFormatter, needsFormatting } from '../../../../../../utils/formatter'; +import { formatNumberWithoutAbbreviation } from '../../../../../shared/formatNumber'; type Props = { color: string; - disabled: boolean; + disabled?: boolean; userCount: number; }; -const UserCountStat = ({ color, disabled, userCount }: Props) => { +const UserCountStat = ({ color, disabled = false, userCount }: Props) => { return ( - ( diff --git a/datahub-web-react/src/app/entity/shared/components/styled/stat/ViewCountStat.tsx b/datahub-web-react/src/app/entity/shared/components/styled/stat/ViewCountStat.tsx new file mode 100644 index 0000000000000..e9ac59bd4354a --- /dev/null +++ b/datahub-web-react/src/app/entity/shared/components/styled/stat/ViewCountStat.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import { EyeOutlined } from '@ant-design/icons'; +import StatText from './StatText'; +import HorizontalExpander from '../../../../../shared/HorizontalExpander'; +import { countFormatter, needsFormatting } from '../../../../../../utils/formatter'; +import { formatNumberWithoutAbbreviation } from '../../../../../shared/formatNumber'; + +type Props = { + color: string; + viewCount: number; +}; + +const ViewCountStat = ({ color, viewCount }: Props) => { + return ( + ( + + + {isExpanded ? formatNumberWithoutAbbreviation(viewCount) : countFormatter(viewCount)} views + + )} + /> + ); +}; + +export default ViewCountStat; diff --git a/datahub-web-react/src/app/entity/dataset/shared/ExpandingStat.tsx b/datahub-web-react/src/app/shared/HorizontalExpander.tsx similarity index 95% rename from datahub-web-react/src/app/entity/dataset/shared/ExpandingStat.tsx rename to datahub-web-react/src/app/shared/HorizontalExpander.tsx index 57b60e0466728..ebdffcb0b1629 100644 --- a/datahub-web-react/src/app/entity/dataset/shared/ExpandingStat.tsx +++ b/datahub-web-react/src/app/shared/HorizontalExpander.tsx @@ -8,7 +8,7 @@ const ExpandingStatContainer = styled.span<{ disabled: boolean; expanded: boolea transition: width 250ms ease; `; -const ExpandingStat = ({ +const HorizontalExpander = ({ disabled = false, render, }: { @@ -45,4 +45,4 @@ const ExpandingStat = ({ ); }; -export default ExpandingStat; +export default HorizontalExpander; From 8c9dfe594d744f08e99405cc249c15e041c3af2a Mon Sep 17 00:00:00 2001 From: Josh Eilers Date: Fri, 30 Jun 2023 14:14:47 -0700 Subject: [PATCH 10/16] last updated stat --- .../entity/chart/shared/ChartStatsSummary.tsx | 4 +-- .../shared/DashboardStatsSummary.tsx | 9 +---- .../dataset/shared/DatasetStatsSummary.tsx | 28 ++------------- .../styled/stat/LastUpdatedStat.tsx | 34 +++++++++---------- 4 files changed, 21 insertions(+), 54 deletions(-) diff --git a/datahub-web-react/src/app/entity/chart/shared/ChartStatsSummary.tsx b/datahub-web-react/src/app/entity/chart/shared/ChartStatsSummary.tsx index 5f3c79b355419..a04a427a9e990 100644 --- a/datahub-web-react/src/app/entity/chart/shared/ChartStatsSummary.tsx +++ b/datahub-web-react/src/app/entity/chart/shared/ChartStatsSummary.tsx @@ -34,9 +34,7 @@ export const ChartStatsSummary = ({ !!chartCount && , !!viewCount && , !!uniqueUserCountLast30Days && , - !!lastUpdatedMs && ( - - ), + !!lastUpdatedMs && , ].filter(Boolean); return <>{statsViews.length > 0 && }; diff --git a/datahub-web-react/src/app/entity/dashboard/shared/DashboardStatsSummary.tsx b/datahub-web-react/src/app/entity/dashboard/shared/DashboardStatsSummary.tsx index f49d425e50c40..6d3ec8df19471 100644 --- a/datahub-web-react/src/app/entity/dashboard/shared/DashboardStatsSummary.tsx +++ b/datahub-web-react/src/app/entity/dashboard/shared/DashboardStatsSummary.tsx @@ -34,14 +34,7 @@ export const DashboardStatsSummary = ({ !!chartCount && , !!viewCount && , !!uniqueUserCountLast30Days && , - !!lastUpdatedMs && ( - - ), + !!lastUpdatedMs && , ].filter(Boolean); return <>{statsViews.length > 0 && }; diff --git a/datahub-web-react/src/app/entity/dataset/shared/DatasetStatsSummary.tsx b/datahub-web-react/src/app/entity/dataset/shared/DatasetStatsSummary.tsx index 88468cbc06c48..a819db3f15656 100644 --- a/datahub-web-react/src/app/entity/dataset/shared/DatasetStatsSummary.tsx +++ b/datahub-web-react/src/app/entity/dataset/shared/DatasetStatsSummary.tsx @@ -1,20 +1,12 @@ /* eslint-disable no-param-reassign */ import React from 'react'; -import styled from 'styled-components/macro'; -import { Popover } from 'antd'; -import { ClockCircleOutlined } from '@ant-design/icons'; import { ANTD_GRAY } from '../../shared/constants'; -import { toLocalDateTimeString, toRelativeTimeString } from '../../../shared/time/timeUtils'; import { StatsSummary } from '../../shared/components/styled/StatsSummary'; import RowCountStat from '../../shared/components/styled/stat/RowCountStat'; import ByteCountStat from '../../shared/components/styled/stat/ByteCountStat'; import QueryCountStat from '../../shared/components/styled/stat/QueryCountStat'; import UserCountStat from '../../shared/components/styled/stat/UserCountStat'; -import StatText from '../../shared/components/styled/stat/StatText'; - -const PopoverContent = styled.div` - max-width: 300px; -`; +import LastUpdatedStat from '../../shared/components/styled/stat/LastUpdatedStat'; type Props = { rowCount?: number | null; @@ -72,24 +64,8 @@ export const DatasetStatsSummary = ({ !!uniqueUserCountLast30Days && ( ), - // todo - consolidate this with the LastUpdatedStat - // it's weird having a tooltip embedded in a popover !!lastUpdatedMs && ( - - Data was last updated in the source platform on{' '} - {toLocalDateTimeString(lastUpdatedMs)} - - } - > - - - Updated {toRelativeTimeString(lastUpdatedMs)} - - + ), ].filter(Boolean); diff --git a/datahub-web-react/src/app/entity/shared/components/styled/stat/LastUpdatedStat.tsx b/datahub-web-react/src/app/entity/shared/components/styled/stat/LastUpdatedStat.tsx index 33248412d9770..7077d7f1336a1 100644 --- a/datahub-web-react/src/app/entity/shared/components/styled/stat/LastUpdatedStat.tsx +++ b/datahub-web-react/src/app/entity/shared/components/styled/stat/LastUpdatedStat.tsx @@ -1,41 +1,41 @@ -import { Popover, Tooltip } from 'antd'; +import { Popover } from 'antd'; import React from 'react'; import styled from 'styled-components'; -import { ClockCircleOutlined, QuestionCircleOutlined } from '@ant-design/icons'; +import { ClockCircleOutlined } from '@ant-design/icons'; import { toLocalDateTimeString, toRelativeTimeString } from '../../../../../shared/time/timeUtils'; import StatText from './StatText'; type Props = { color: string; - entityLabel: 'chart' | 'dashboard'; + disabled?: boolean; lastUpdatedMs: number; createdMs?: number | null; }; -const HelpIcon = styled(QuestionCircleOutlined)<{ color: string }>` - color: ${(props) => props.color}; - padding-left: 4px; +const PopoverContent = styled.div` + max-width: 300px; `; -const LastUpdatedStat = ({ color, entityLabel, lastUpdatedMs, createdMs }: Props) => { +const LastUpdatedStat = ({ color, disabled = false, lastUpdatedMs, createdMs }: Props) => { return ( - {createdMs &&
Created on {toLocalDateTimeString(createdMs)}.
} -
- Changed on {toLocalDateTimeString(lastUpdatedMs)}.{' '} - - - -
- + + Changed {toLocalDateTimeString(lastUpdatedMs)} + {createdMs && ( + <> +
+ Created on {toLocalDateTimeString(createdMs)} + + )} + } > - Changed {toRelativeTimeString(lastUpdatedMs)} + Updated {toRelativeTimeString(lastUpdatedMs)} ); From 9c9f2fa3d1b04d15b439761becc4eb4c53fd3131 Mon Sep 17 00:00:00 2001 From: Josh Eilers Date: Fri, 30 Jun 2023 14:16:52 -0700 Subject: [PATCH 11/16] revert test code --- .../src/app/entity/chart/shared/ChartStatsSummary.tsx | 7 ------- .../entity/dashboard/shared/DashboardStatsSummary.tsx | 7 ------- .../app/entity/dataset/shared/DatasetStatsSummary.tsx | 10 ---------- 3 files changed, 24 deletions(-) diff --git a/datahub-web-react/src/app/entity/chart/shared/ChartStatsSummary.tsx b/datahub-web-react/src/app/entity/chart/shared/ChartStatsSummary.tsx index a04a427a9e990..2b34390667a4d 100644 --- a/datahub-web-react/src/app/entity/chart/shared/ChartStatsSummary.tsx +++ b/datahub-web-react/src/app/entity/chart/shared/ChartStatsSummary.tsx @@ -1,4 +1,3 @@ -/* eslint-disable no-param-reassign */ import React from 'react'; import { ANTD_GRAY } from '../../shared/constants'; import { StatsSummary } from '../../shared/components/styled/StatsSummary'; @@ -22,12 +21,6 @@ export const ChartStatsSummary = ({ lastUpdatedMs, createdMs, }: Props) => { - chartCount = 2133440; - viewCount = 987654321; - uniqueUserCountLast30Days = 98765; - lastUpdatedMs = Date.now(); - createdMs = Date.now(); - const color = ANTD_GRAY[7]; const statsViews = [ diff --git a/datahub-web-react/src/app/entity/dashboard/shared/DashboardStatsSummary.tsx b/datahub-web-react/src/app/entity/dashboard/shared/DashboardStatsSummary.tsx index 6d3ec8df19471..0dc58aac821d9 100644 --- a/datahub-web-react/src/app/entity/dashboard/shared/DashboardStatsSummary.tsx +++ b/datahub-web-react/src/app/entity/dashboard/shared/DashboardStatsSummary.tsx @@ -1,4 +1,3 @@ -/* eslint-disable no-param-reassign */ import React from 'react'; import { ANTD_GRAY } from '../../shared/constants'; import { StatsSummary } from '../../shared/components/styled/StatsSummary'; @@ -22,12 +21,6 @@ export const DashboardStatsSummary = ({ lastUpdatedMs, createdMs, }: Props) => { - chartCount = 2133440; - viewCount = 987654321; - uniqueUserCountLast30Days = 98765; - lastUpdatedMs = Date.now(); - createdMs = Date.now(); - const color = ANTD_GRAY[7]; const statsViews = [ diff --git a/datahub-web-react/src/app/entity/dataset/shared/DatasetStatsSummary.tsx b/datahub-web-react/src/app/entity/dataset/shared/DatasetStatsSummary.tsx index a819db3f15656..83584a77cae44 100644 --- a/datahub-web-react/src/app/entity/dataset/shared/DatasetStatsSummary.tsx +++ b/datahub-web-react/src/app/entity/dataset/shared/DatasetStatsSummary.tsx @@ -1,4 +1,3 @@ -/* eslint-disable no-param-reassign */ import React from 'react'; import { ANTD_GRAY } from '../../shared/constants'; import { StatsSummary } from '../../shared/components/styled/StatsSummary'; @@ -31,15 +30,6 @@ export const DatasetStatsSummary = ({ color, mode = 'normal', }: Props) => { - // todo - remove - rowCount = 2133440; - columnCount = 12; - sizeInBytes = 29321728; - totalSqlQueries = 987654321; - queryCountLast30Days = 987654321; - uniqueUserCountLast30Days = 98765; - lastUpdatedMs = Date.now(); - const isTooltipMode = mode === 'tooltip-content'; const displayedColor = isTooltipMode ? '' : color ?? ANTD_GRAY[7]; From 110361e3ced9db3399c1a9e3940cf419f9ab1367 Mon Sep 17 00:00:00 2001 From: Josh Eilers Date: Fri, 30 Jun 2023 14:21:23 -0700 Subject: [PATCH 12/16] remove left dividers --- .../shared/components/styled/StatsSummary.tsx | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/datahub-web-react/src/app/entity/shared/components/styled/StatsSummary.tsx b/datahub-web-react/src/app/entity/shared/components/styled/StatsSummary.tsx index 5a56b7f7b65d6..5df286e953558 100644 --- a/datahub-web-react/src/app/entity/shared/components/styled/StatsSummary.tsx +++ b/datahub-web-react/src/app/entity/shared/components/styled/StatsSummary.tsx @@ -8,6 +8,9 @@ type Props = { const StatsContainer = styled.div` overflow: hidden; +`; + +const StatsListContainer = styled.div` display: flex; flex-wrap: wrap; gap: 10px; @@ -25,9 +28,13 @@ const StatContainer = styled.div` export const StatsSummary = ({ stats }: Props) => { return ( - {stats.map((statView) => ( - {statView} - ))} + {!!stats.length && ( + + {stats.map((statView) => ( + {statView} + ))} + + )} ); }; From c4f947d1bfa084ab05d316463190b69b3984d4ac Mon Sep 17 00:00:00 2001 From: Josh Eilers Date: Fri, 30 Jun 2023 14:23:42 -0700 Subject: [PATCH 13/16] margin --- .../src/app/entity/shared/components/styled/StatsSummary.tsx | 2 +- .../entity/shared/components/styled/stat/ChartCountStat.tsx | 3 --- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/datahub-web-react/src/app/entity/shared/components/styled/StatsSummary.tsx b/datahub-web-react/src/app/entity/shared/components/styled/StatsSummary.tsx index 5df286e953558..ac8f8b3d998d6 100644 --- a/datahub-web-react/src/app/entity/shared/components/styled/StatsSummary.tsx +++ b/datahub-web-react/src/app/entity/shared/components/styled/StatsSummary.tsx @@ -8,13 +8,13 @@ type Props = { const StatsContainer = styled.div` overflow: hidden; + margin-top: 8px; `; const StatsListContainer = styled.div` display: flex; flex-wrap: wrap; gap: 10px; - margin-top: 8px; margin-left: -10px; `; diff --git a/datahub-web-react/src/app/entity/shared/components/styled/stat/ChartCountStat.tsx b/datahub-web-react/src/app/entity/shared/components/styled/stat/ChartCountStat.tsx index 2967e01679d52..3ba23a8607fce 100644 --- a/datahub-web-react/src/app/entity/shared/components/styled/stat/ChartCountStat.tsx +++ b/datahub-web-react/src/app/entity/shared/components/styled/stat/ChartCountStat.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import { TableOutlined } from '@ant-design/icons'; import StatText from './StatText'; import HorizontalExpander from '../../../../../shared/HorizontalExpander'; import { countFormatter, needsFormatting } from '../../../../../../utils/formatter'; @@ -16,8 +15,6 @@ const ChartCountStat = ({ color, chartCount }: Props) => { disabled={!needsFormatting(chartCount)} render={(isExpanded) => ( - {/* todo - what icon here? */} - {isExpanded ? formatNumberWithoutAbbreviation(chartCount) : countFormatter(chartCount)}{' '} charts From 65781f2282059f44626f234a08c82624715dd707 Mon Sep 17 00:00:00 2001 From: Josh Eilers Date: Fri, 30 Jun 2023 14:27:27 -0700 Subject: [PATCH 14/16] remove more test code --- .../src/app/preview/DefaultPreviewCard.tsx | 17 ----------------- 1 file changed, 17 deletions(-) diff --git a/datahub-web-react/src/app/preview/DefaultPreviewCard.tsx b/datahub-web-react/src/app/preview/DefaultPreviewCard.tsx index 8a5109aac1010..18b7c3c852c53 100644 --- a/datahub-web-react/src/app/preview/DefaultPreviewCard.tsx +++ b/datahub-web-react/src/app/preview/DefaultPreviewCard.tsx @@ -17,7 +17,6 @@ import { ParentNodesResult, EntityPath, DataProduct, - EntityType, } from '../../types.generated'; import TagTermGroup from '../shared/tags/TagTermGroup'; import { ANTD_GRAY } from '../entity/shared/constants'; @@ -231,22 +230,6 @@ export default function DefaultPreviewCard({ previewType, paths, }: Props) { - // eslint-disable-next-line no-param-reassign - topUsers = []; - topUsers.push({ - type: EntityType.CorpUser, - urn: 'something', - properties: { - active: true, - fullName: 'yosh', - displayName: 'yosh display name', - firstName: 'yoshf', - lastName: 'yoshl', - title: 'yosht', - }, - username: 'yoshi', - __typename: 'CorpUser', - }); // sometimes these lists will be rendered inside an entity container (for example, in the case of impact analysis) // in those cases, we may want to enrich the preview w/ context about the container entity const { entityData } = useEntityData(); From a7ec6ee4cdac5029dec699187bc17f2f77bf334e Mon Sep 17 00:00:00 2001 From: Josh Eilers Date: Tue, 1 Aug 2023 13:06:25 -0700 Subject: [PATCH 15/16] better handling of overflow css --- .../src/app/shared/HorizontalExpander.tsx | 35 ++++++++++++------- 1 file changed, 23 insertions(+), 12 deletions(-) diff --git a/datahub-web-react/src/app/shared/HorizontalExpander.tsx b/datahub-web-react/src/app/shared/HorizontalExpander.tsx index ebdffcb0b1629..8433198c8ca5b 100644 --- a/datahub-web-react/src/app/shared/HorizontalExpander.tsx +++ b/datahub-web-react/src/app/shared/HorizontalExpander.tsx @@ -1,27 +1,38 @@ import React, { ReactNode, useEffect, useRef, useState } from 'react'; import styled from 'styled-components'; -const ExpandingStatContainer = styled.span<{ disabled: boolean; expanded: boolean; width: string }>` - overflow: ${(props) => (props.expanded ? 'visible' : 'hidden')}; +type Props = { + disabled?: boolean; + render: (isExpanded: boolean) => ReactNode; +}; + +const TRANSITION_TIMING = 250; + +const ExpandingStatContainer = styled.span<{ disabled: boolean; overflow: 'visible' | 'hidden'; width: string }>` + overflow: ${(props) => props.overflow}; white-space: nowrap; width: ${(props) => props.width}; - transition: width 250ms ease; + transition: width ${TRANSITION_TIMING}ms ease; `; -const HorizontalExpander = ({ - disabled = false, - render, -}: { - disabled?: boolean; - render: (isExpanded: boolean) => ReactNode; -}) => { +const HorizontalExpander = ({ disabled = false, render }: Props) => { const contentRef = useRef(null); const [width, setWidth] = useState('inherit'); const [isExpanded, setIsExpanded] = useState(false); + const [overflow, setOverflow] = useState<'visible' | 'hidden'>('hidden'); useEffect(() => { - if (!contentRef.current) return; + if (!contentRef.current) return () => {}; + setWidth(`${contentRef.current.offsetWidth}px`); + + const timer = window.setTimeout(() => { + setOverflow(isExpanded ? 'visible' : 'hidden'); + }, TRANSITION_TIMING); + + return () => { + window.clearTimeout(timer); + }; }, [isExpanded]); const onMouseEnter = () => { @@ -35,7 +46,7 @@ const HorizontalExpander = ({ return ( Date: Tue, 1 Aug 2023 14:10:40 -0700 Subject: [PATCH 16/16] full width stats in search cards --- .../src/app/preview/DefaultPreviewCard.tsx | 251 ++++++++++-------- .../src/app/shared/tags/DataProductLink.tsx | 2 - .../src/app/shared/tags/DomainLink.tsx | 2 - .../src/app/shared/tags/tag/Tag.tsx | 1 - .../src/app/shared/tags/term/StyledTerm.tsx | 2 - 5 files changed, 134 insertions(+), 124 deletions(-) diff --git a/datahub-web-react/src/app/preview/DefaultPreviewCard.tsx b/datahub-web-react/src/app/preview/DefaultPreviewCard.tsx index 952e8592cf4c1..e947a3cbe7c77 100644 --- a/datahub-web-react/src/app/preview/DefaultPreviewCard.tsx +++ b/datahub-web-react/src/app/preview/DefaultPreviewCard.tsx @@ -37,11 +37,22 @@ import { EntityHealth } from '../entity/shared/containers/profile/header/EntityH const PreviewContainer = styled.div` display: flex; - width: 100%; + flex-direction: column; + flex: 1; +`; + +const FirstRow = styled.div` + display: flex; + flex: 1; justify-content: space-between; align-items: center; `; +const SecondRow = styled.div` + display: flex; + flex: 1; +`; + const LeftColumn = styled.div<{ expandWidth: boolean }>` max-width: ${(props) => (props.expandWidth ? '100%' : '60%')}; `; @@ -263,129 +274,135 @@ export default function DefaultPreviewCard({ return ( - - - - - - {previewType === PreviewType.HOVER_CARD ? ( - - {name || ' '} - - ) : ( - - {name || ' '} - + + + + + + + {previewType === PreviewType.HOVER_CARD ? ( + + {name || ' '} + + ) : ( + + {name || ' '} + + )} + + {deprecation?.deprecated && ( + )} - - {deprecation?.deprecated && ( - - )} - {health && health.length && } - {externalUrl && ( - - )} - + {health && health.length && } + {externalUrl && ( + + )} + - {degree !== undefined && degree !== null && ( - - {getNumberWithOrdinal(degree)} - + {degree !== undefined && degree !== null && ( + + {getNumberWithOrdinal(degree)} + + )} + {!!degree && entityCount && } + + + {paths && paths.length > 0 && } + {description && description.length > 0 && ( + + { + onPreventMouseDown(e); + setDescriptionExpanded(!descriptionExpanded); + }} + > + {descriptionExpanded ? 'Show Less' : 'Show More'} + + ) : undefined + } + > + {description} + + )} - {!!degree && entityCount && } - - - {paths && paths.length > 0 && } - {description && description.length > 0 && ( - - { - onPreventMouseDown(e); - setDescriptionExpanded(!descriptionExpanded); - }} - > - {descriptionExpanded ? 'Show Less' : 'Show More'} - - ) : undefined - } - > - {description} - - - )} - {(dataProduct || domain || hasGlossaryTerms || hasTags) && ( - - {/* if there's a domain and dataProduct, show dataProduct */} - {dataProduct && } - {!dataProduct && domain && } - {(dataProduct || domain) && hasGlossaryTerms && } - {hasGlossaryTerms && } - {((hasGlossaryTerms && hasTags) || ((dataProduct || domain) && hasTags)) && } - {hasTags && } - - )} - {subHeader} - {insightViews.length > 0 && ( - - {insightViews.map((insightView, index) => ( - - {insightView} - {index < insightViews.length - 1 && } - - ))} - - )} - - {shouldShowRightColumn && ( - - {topUsers && topUsers?.length > 0 && ( - <> + {(dataProduct || domain || hasGlossaryTerms || hasTags) && ( + + {/* if there's a domain and dataProduct, show dataProduct */} + {dataProduct && } + {!dataProduct && domain && } + {(dataProduct || domain) && hasGlossaryTerms && } + {hasGlossaryTerms && } + {((hasGlossaryTerms && hasTags) || ((dataProduct || domain) && hasTags)) && ( + + )} + {hasTags && } + + )} + {insightViews.length > 0 && ( + + {insightViews.map((insightView, index) => ( + + {insightView} + {index < insightViews.length - 1 && } + + ))} + + )} + + {shouldShowRightColumn && ( + + {topUsers && topUsers?.length > 0 && ( + <> + + Top Users +
+ +
+ + + )} + {(topUsers?.length || 0) > 0 && (owners?.length || 0) > 0 && ( + + )} + {owners && owners?.length > 0 && ( - Top Users + Owners
- + owner.owner)} max={2} />
- - )} - {(topUsers?.length || 0) > 0 && (owners?.length || 0) > 0 && } - {owners && owners?.length > 0 && ( - - Owners -
- owner.owner)} max={2} /> -
- - )} - - )} + )} + + )} + + {subHeader} ); } diff --git a/datahub-web-react/src/app/shared/tags/DataProductLink.tsx b/datahub-web-react/src/app/shared/tags/DataProductLink.tsx index 7d31048e62b84..9c4261149584b 100644 --- a/datahub-web-react/src/app/shared/tags/DataProductLink.tsx +++ b/datahub-web-react/src/app/shared/tags/DataProductLink.tsx @@ -10,12 +10,10 @@ import { ANTD_GRAY } from '../../entity/shared/constants'; const DomainLinkContainer = styled(Link)` display: inline-block; - margin-bottom: 8px; `; const DomainWrapper = styled.span` display: inline-block; - margin-bottom: 8px; `; const StyledTag = styled(Tag)<{ fontSize?: number }>` diff --git a/datahub-web-react/src/app/shared/tags/DomainLink.tsx b/datahub-web-react/src/app/shared/tags/DomainLink.tsx index 1c14b71369ed6..02ceba4e71929 100644 --- a/datahub-web-react/src/app/shared/tags/DomainLink.tsx +++ b/datahub-web-react/src/app/shared/tags/DomainLink.tsx @@ -10,12 +10,10 @@ import { ANTD_GRAY } from '../../entity/shared/constants'; const DomainLinkContainer = styled(Link)` display: inline-block; - margin-bottom: 8px; `; const DomainWrapper = styled.span` display: inline-block; - margin-bottom: 8px; `; const StyledTag = styled(Tag)<{ fontSize?: number }>` diff --git a/datahub-web-react/src/app/shared/tags/tag/Tag.tsx b/datahub-web-react/src/app/shared/tags/tag/Tag.tsx index 2288238091776..d3bc876fce9ec 100644 --- a/datahub-web-react/src/app/shared/tags/tag/Tag.tsx +++ b/datahub-web-react/src/app/shared/tags/tag/Tag.tsx @@ -11,7 +11,6 @@ import { TagProfileDrawer } from '../TagProfileDrawer'; const TagLink = styled.span` display: inline-block; - margin-bottom: 8px; `; const highlightMatchStyle = { background: '#ffe58f', padding: '0' }; diff --git a/datahub-web-react/src/app/shared/tags/term/StyledTerm.tsx b/datahub-web-react/src/app/shared/tags/term/StyledTerm.tsx index 464dc17ac6027..2c1b53422fb6e 100644 --- a/datahub-web-react/src/app/shared/tags/term/StyledTerm.tsx +++ b/datahub-web-react/src/app/shared/tags/term/StyledTerm.tsx @@ -8,12 +8,10 @@ import TermContent from './TermContent'; const TermLink = styled(Link)` display: inline-block; - margin-bottom: 8px; `; const TermWrapper = styled.span` display: inline-block; - margin-bottom: 8px; `; interface Props {