Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-07-26 13:48:33 +02:00
Code Issues Projects Releases Wiki Activity

Fix/metrics chip adhock improvement (#7976)

Browse Source 
On flag metrics page
This commit is contained in:
Tymoteusz Czech 2024-08-26 12:28:21 +02:00 committed by GitHub
parent 499c9cebfd
commit 80a9591d37
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 17 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetrics.tsx
View File

@ -40,21 +40,19 @@ export const FeatureMetrics = () => {
featureId, featureId,
query.hoursBack || FEATURE_METRIC_HOURS_BACK_DEFAULT, query.hoursBack || FEATURE_METRIC_HOURS_BACK_DEFAULT,
); );
const defaultApplication = Array.from(applications)[0];
const allApplications = Array.from(applications);
const defaultApplication = allApplications[0];
const { environment: selectedEnvironment, hoursBack } = query; const { environment: selectedEnvironment, hoursBack } = query;
const selectedApplications = query.applications.filter( const selectedApplications = query.applications.filter(
(item) => item !== null, (item) => item !== null,
) as string[]; ) as string[];
useEffect(() => { useEffect(() => {
if ( if (query.applications && query.applications.length === 0) {
query.applications && setQuery({ applications: allApplications });
query.applications.length === 0 &&
defaultApplication
) {
setQuery({ applications: [defaultApplication] });
} }
}, [JSON.stringify(Array.from(applications))]); }, [JSON.stringify(allApplications)]);
const allSelected = [...applications].every((element) => const allSelected = [...applications].every((element) =>
selectedApplications.includes(element), selectedApplications.includes(element),
@ -100,7 +98,7 @@ export const FeatureMetrics = () => {
return ( return (
<PageContent> <PageContent>
<Grid container component='header' spacing={2}> <Grid container component='header' spacing={2}>
<Grid item xs={12} md={5}> <Grid item xs={12} md={4}>
<ConditionallyRender <ConditionallyRender
condition={environments.size > 0} condition={environments.size > 0}
show={ show={
@ -115,7 +113,7 @@ export const FeatureMetrics = () => {
} }
/> />
</Grid> </Grid>
<Grid item xs={12} md={5}> <Grid item xs={12} md={6}>
<ConditionallyRender <ConditionallyRender
condition={applications.size > 0} condition={applications.size > 0}
show={ show={

19
frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChips/FeatureMetricsChips.tsx
View File

@ -64,6 +64,15 @@ export const FeatureMetricsChips = ({
<div> <div>
<StyledTitle>{title}</StyledTitle> <StyledTitle>{title}</StyledTitle>
<StyledList> <StyledList>
{toggleValues && values.size > 1 && (
<Button
size={'small'}
onClick={toggleValues}
aria-pressed={allSelected}
>
{allSelected ? 'Unselect' : 'Select all'}
</Button>
)}
{sortedValues.map((val) => ( {sortedValues.map((val) => (
<StyledItem key={val}> <StyledItem key={val}>
<Chip <Chip
@ -74,16 +83,6 @@ export const FeatureMetricsChips = ({
/> />
</StyledItem> </StyledItem>
))} ))}
{toggleValues && values.size > 1 && (
<Button
size={'small'}
onClick={toggleValues}
aria-pressed={allSelected}
>
{allSelected ? 'Unselect' : 'Select all'}
</Button>
)}
</StyledList> </StyledList>
</div> </div>
); );