Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-09 00:18:00 +01:00
Code Issues Projects Releases Wiki Activity

Merge branch 'main' into fix/performance-problem-on-dashboard

Browse Source
This commit is contained in:
Thomas Heartman 2025-02-07 11:23:41 +01:00
commit 02fa92f5e1
No known key found for this signature in database
GPG Key ID: BD1F880DAED1EE78
2 changed files with 64 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
frontend/src/component/events/EventTimeline/EventTimelineHeader/EventTimelineHeader.tsx
View File

@ -94,6 +94,27 @@ export const EventTimelineHeader = ({
/> />
); );
const TimeSpanFilter = () => (
<StyledFilter
select
size='small'
variant='outlined'
value={timeSpan.key}
onChange={(e) =>
setTimeSpan(
timeSpanOptions.find(({ key }) => key === e.target.value) ||
timeSpanOptions[0],
)
}
>
{timeSpanOptions.map(({ key, label }) => (
<MenuItem key={key} value={key}>
{label}
</MenuItem>
))}
</StyledFilter>
);
return ( return (
<> <>
<StyledCol> <StyledCol>
@ -102,49 +123,37 @@ export const EventTimelineHeader = ({
{totalEvents === 1 ? '' : 's'} {totalEvents === 1 ? '' : 's'}
<HelpIcon tooltip='These are key events per environment across all your projects. For more details, visit the event log.' /> <HelpIcon tooltip='These are key events per environment across all your projects. For more details, visit the event log.' />
</StyledTimelineEventsCount> </StyledTimelineEventsCount>
<StyledFilter {!frontendHeaderRefactor && <TimeSpanFilter />}
select </StyledCol>
size='small' <StyledCol>
variant='outlined' {frontendHeaderRefactor ? (
value={timeSpan.key} <>
onChange={(e) => <TimeSpanFilter />
setTimeSpan( <EnvironmentFilter />
timeSpanOptions.find( </>
({ key }) => key === e.target.value, ) : (
) || timeSpanOptions[0], <>
) <EventTimelineHeaderTip />
} <EnvironmentFilter />
> <Tooltip title='Hide event timeline' arrow>
{timeSpanOptions.map(({ key, label }) => ( <IconButton
<MenuItem key={key} value={key}> aria-label='close'
{label} size='small'
</MenuItem> onClick={() => {
))} trackEvent('event-timeline', {
</StyledFilter> props: {
{frontendHeaderRefactor && <EnvironmentFilter />} eventType: 'close',
},
});
setOpen(false);
}}
>
<CloseIcon />
</IconButton>
</Tooltip>
</>
)}
</StyledCol> </StyledCol>
{!frontendHeaderRefactor && (
<StyledCol>
<EventTimelineHeaderTip />
<EnvironmentFilter />
<Tooltip title='Hide event timeline' arrow>
<IconButton
aria-label='close'
size='small'
onClick={() => {
trackEvent('event-timeline', {
props: {
eventType: 'close',
},
});
setOpen(false);
}}
>
<CloseIcon />
</IconButton>
</Tooltip>
</StyledCol>
)}
</> </>
); );
}; };

21
frontend/src/component/personalDashboard/PersonalDashboard.tsx
View File

@ -71,12 +71,17 @@ const StyledAccordionSummary = styled(AccordionSummary)(({ theme }) => ({
'&>.MuiAccordionSummary-content.MuiAccordionSummary-content': { '&>.MuiAccordionSummary-content.MuiAccordionSummary-content': {
margin: '0', margin: '0',
}, },
"&[aria-expanded='true']": {
// only add the border when it's open
borderBottom: `1px solid ${theme.palette.divider}`,
},
})); }));
const StyledAccordionSummaryWithBorder = styled(StyledAccordionSummary)(
({ theme }) => ({
"&[aria-expanded='true']": {
// only add the border when it's open
borderBottom: `1px solid ${theme.palette.divider}`,
},
}),
);
const StyledAccordionDetails = styled(AccordionDetails)({ const StyledAccordionDetails = styled(AccordionDetails)({
padding: 0, padding: 0,
}); });
@ -170,7 +175,7 @@ const FlagPanel = () => {
expanded={expandFlags ?? true} expanded={expandFlags ?? true}
onChange={() => toggleSectionState('flags')} onChange={() => toggleSectionState('flags')}
> >
<StyledAccordionSummary <StyledAccordionSummaryWithBorder
expandIcon={<ExpandMore titleAccess='Toggle flags section' />} expandIcon={<ExpandMore titleAccess='Toggle flags section' />}
id='flags-panel-header' id='flags-panel-header'
aria-controls='flags-panel-content' aria-controls='flags-panel-content'
@ -183,7 +188,7 @@ const FlagPanel = () => {
Feature flags you have created or favorited Feature flags you have created or favorited
</AccordionSummarySubtitle> </AccordionSummarySubtitle>
</AccordionSummaryText> </AccordionSummaryText>
</StyledAccordionSummary> </StyledAccordionSummaryWithBorder>
<StyledAccordionDetails> <StyledAccordionDetails>
<MyFlags <MyFlags
hasProjects={projects?.length > 0} hasProjects={projects?.length > 0}
@ -227,7 +232,7 @@ const ProjectPanel = () => {
expanded={expandProjects ?? true} expanded={expandProjects ?? true}
onChange={() => toggleSectionState('projects')} onChange={() => toggleSectionState('projects')}
> >
<StyledAccordionSummary <StyledAccordionSummaryWithBorder
expandIcon={ expandIcon={
<ExpandMore titleAccess='Toggle projects section' /> <ExpandMore titleAccess='Toggle projects section' />
} }
@ -241,7 +246,7 @@ const ProjectPanel = () => {
are a member of are a member of
</AccordionSummarySubtitle> </AccordionSummarySubtitle>
</AccordionSummaryText> </AccordionSummaryText>
</StyledAccordionSummary> </StyledAccordionSummaryWithBorder>
<StyledAccordionDetails> <StyledAccordionDetails>
<MyProjects <MyProjects
owners={personalDashboard?.projectOwners ?? []} owners={personalDashboard?.projectOwners ?? []}