diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetrics.tsx b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetrics.tsx index 44c10c5164..7d0545f527 100644 --- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetrics.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetrics.tsx @@ -40,6 +40,7 @@ export const FeatureMetrics = () => { const selectedApplications = query.applications.filter( (item) => item !== null, ) as string[]; + const allSelected = selectedApplications.length === applications.size; const { featureMetrics } = useFeatureMetricsRaw(featureId, hoursBack); @@ -97,6 +98,17 @@ export const FeatureMetrics = () => { title='Applications' values={applications} selectedValues={selectedApplications} + toggleValues={() => { + if (allSelected) { + setQuery({ + applications: [defaultApplication], + }); + } else { + setQuery({ + applications: [...applications], + }); + } + }} toggleValue={(value) => { if (selectedApplications.includes(value)) { setQuery({ diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChips/FeatureMetricsChips.tsx b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChips/FeatureMetricsChips.tsx index 5ddc312af8..6d1118153a 100644 --- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChips/FeatureMetricsChips.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChips/FeatureMetricsChips.tsx @@ -1,4 +1,4 @@ -import { Chip, styled } from '@mui/material'; +import { Chip, Button, styled } from '@mui/material'; import { useMemo } from 'react'; import { focusable } from 'themes/themeStyles'; @@ -7,6 +7,7 @@ interface IFeatureMetricsChipsProps { values: Set; selectedValues: string[]; toggleValue: (value: string) => void; + toggleValues?: () => void; } const StyledTitle = styled('h2')(({ theme }) => ({ @@ -24,6 +25,7 @@ const StyledList = styled('ul')(({ theme }) => ({ listStyleType: 'none', padding: 0, minHeight: '100%', + alignItems: 'center', })); const StyledItem = styled('li')(({ theme }) => ({ @@ -41,10 +43,12 @@ export const FeatureMetricsChips = ({ values, selectedValues, toggleValue, + toggleValues, }: IFeatureMetricsChipsProps) => { const onClick = (value: string) => () => { toggleValue(value); }; + const allSelected = values.size === selectedValues.length; const sortedValues = useMemo(() => { return Array.from(values).sort((valueA, valueB) => { @@ -66,6 +70,16 @@ export const FeatureMetricsChips = ({ /> ))} + + {toggleValues && ( + + )} );