1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-09 00:18:00 +01:00

chore: move flag activity info to the left (#8411)

Shifts the display of the activity info to the left instead of cramming
it in next to metrics selectors.

![image](https://github.com/user-attachments/assets/baaafd02-c0d8-40ec-92a0-9b22e7d377d8)
This commit is contained in:
Thomas Heartman 2024-10-10 09:22:26 +02:00 committed by GitHub
parent 42d5eeb7e5
commit 2ae9589e67
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -141,11 +141,10 @@ const EnvironmentSelect: FC<{
); );
}; };
const ExposureAndSelectors = styled(Box)(({ theme }) => ({ const MetricsSelectors = styled(Box)(({ theme }) => ({
display: 'flex', display: 'flex',
justifyContent: 'flex-end', justifyContent: 'flex-end',
gap: theme.spacing(2), gap: theme.spacing(2),
width: '100%',
})); }));
const ChartContainer = styled('div')(({ theme }) => ({ const ChartContainer = styled('div')(({ theme }) => ({
@ -157,6 +156,14 @@ const ChartContainer = styled('div')(({ theme }) => ({
const StyledExposure = styled(FlagExposure)({ const StyledExposure = styled(FlagExposure)({
alignItems: 'center', alignItems: 'center',
justifySelf: 'start',
});
const ExposureAndMetricsRow = styled('div')({
display: 'flex',
flexFlow: 'row',
justifyContent: 'space-between',
width: '100%',
}); });
export const FlagMetricsChart: FC<{ export const FlagMetricsChart: FC<{
@ -174,12 +181,13 @@ export const FlagMetricsChart: FC<{
return ( return (
<ChartContainer> <ChartContainer>
<ExposureAndSelectors> <ExposureAndMetricsRow>
<StyledExposure <StyledExposure
project={flag.project} project={flag.project}
flagName={flag.name} flagName={flag.name}
onArchive={onArchive} onArchive={onArchive}
/> />
<MetricsSelectors>
{environment ? ( {environment ? (
<EnvironmentSelect <EnvironmentSelect
environment={environment} environment={environment}
@ -191,7 +199,8 @@ export const FlagMetricsChart: FC<{
hoursBack={hoursBack} hoursBack={hoursBack}
setHoursBack={setHoursBack} setHoursBack={setHoursBack}
/> />
</ExposureAndSelectors> </MetricsSelectors>
</ExposureAndMetricsRow>
{noData ? ( {noData ? (
<PlaceholderFlagMetricsChart /> <PlaceholderFlagMetricsChart />