diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetrics.tsx b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetrics.tsx index b69469d3e2df..2bf2375d186f 100644 --- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetrics.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetrics.tsx @@ -79,7 +79,14 @@ export const FeatureMetrics = () => { .filter((metric) => selectedApplications.includes(metric.appName), ) || [], - ); + ).map((metric) => ({ + ...metric, + appName: + selectedApplications.length > 1 + ? 'all selected' + : metric.appName, + selectedApplications, + })); }, [ cachedMetrics, selectedEnvironment, diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsTable/ApplicationsCell.tsx b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsTable/ApplicationsCell.tsx new file mode 100644 index 000000000000..c5096a86e6b0 --- /dev/null +++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsTable/ApplicationsCell.tsx @@ -0,0 +1,45 @@ +import { VFC } from 'react'; +import { styled, Typography } from '@mui/material'; +import { TooltipLink } from 'component/common/TooltipLink/TooltipLink'; +import { TextCell } from 'component/common/Table/cells/TextCell/TextCell'; + +const StyledTag = styled(Typography)(({ theme }) => ({ + fontSize: theme.fontSizes.smallerBody, +})); + +interface IFeatureTagCellProps { + row: { + original: { + appName: string; + selectedApplications: string[]; + }; + }; +} + +export const ApplicationsCell: VFC = ({ row }) => { + if ( + row.original.selectedApplications && + row.original.selectedApplications.length > 1 + ) { + return ( + + + {row.original.selectedApplications.map( + (appName) => ( + + {appName} + + ), + )} + + } + > + {row.original.appName} + + + ); + } + return {row.original.appName}; +}; diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsTable/FeatureMetricsTable.tsx b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsTable/FeatureMetricsTable.tsx index be18ce1a1a9c..18698bd45605 100644 --- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsTable/FeatureMetricsTable.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsTable/FeatureMetricsTable.tsx @@ -9,6 +9,7 @@ import { useMemo } from 'react'; import { TextCell } from 'component/common/Table/cells/TextCell/TextCell'; import theme from 'themes/theme'; import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns'; +import { ApplicationsCell } from './ApplicationsCell'; interface IFeatureMetricsTableProps { metrics: IFeatureMetricsRaw[]; @@ -103,6 +104,7 @@ const COLUMNS = [ { Header: 'Application', accessor: 'appName', + Cell: ApplicationsCell, }, { Header: 'Environment',