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',
justifyContent: 'flex-end',
gap: theme.spacing(2),
width: '100%',
}));
const ChartContainer = styled('div')(({ theme }) => ({
@ -157,6 +156,14 @@ const ChartContainer = styled('div')(({ theme }) => ({
const StyledExposure = styled(FlagExposure)({
alignItems: 'center',
justifySelf: 'start',
});
const ExposureAndMetricsRow = styled('div')({
display: 'flex',
flexFlow: 'row',
justifyContent: 'space-between',
width: '100%',
});
export const FlagMetricsChart: FC<{
@ -174,24 +181,26 @@ export const FlagMetricsChart: FC<{
return (
<ChartContainer>
<ExposureAndSelectors>
<ExposureAndMetricsRow>
<StyledExposure
project={flag.project}
flagName={flag.name}
onArchive={onArchive}
/>
{environment ? (
<EnvironmentSelect
environment={environment}
setEnvironment={setEnvironment}
activeEnvironments={activeEnvironments}
<MetricsSelectors>
{environment ? (
<EnvironmentSelect
environment={environment}
setEnvironment={setEnvironment}
activeEnvironments={activeEnvironments}
/>
) : null}
<FeatureMetricsHours
hoursBack={hoursBack}
setHoursBack={setHoursBack}
/>
) : null}
<FeatureMetricsHours
hoursBack={hoursBack}
setHoursBack={setHoursBack}
/>
</ExposureAndSelectors>
</MetricsSelectors>
</ExposureAndMetricsRow>
{noData ? (
<PlaceholderFlagMetricsChart />