mirror of
https://github.com/Unleash/unleash.git
synced 2025-05-26 01:17:00 +02:00
Adds sticky pagination to the event log:  This PR uses the sticky pagination bar that we use on other tables to navigate the event search results. ## Decisions / discussion points The trickiest issue here is how we calculate the next and previous page offsets. This is tricky because we don't expose the page number to the API, but the raw offset itself. This abstraction makes it possible to set an offset that isn't a multiple of the page size. Say the page size is 25. If you manually set an offset of 30 (through changing the URL), what do you expect should happen when you: - load the page? Should you see results 31 to 55? 26 to 50? - go to the next page? Should your next offset be 55 or 50? - previous page: should your previous page offset be 5? 25? 0? The current implementation has taken what I thought would be the easiest way out: If your offset is between two multiples of the page size, we'll consider it to be the lower of the two. - The next page's offset is the next multiple of the page size that is higher than the current offset (50 in the example above). - The previous page's offset will be not the nearest lower page size, but the one below. So if you set offset 35 and page size 25, your next page will take you back to 0 (as if the offset was 25). We could instead update the API to accept `page` instead of offset, but that wouldn't align with how other tables do it. Comparing to the global flags table, if you set an offset that isn't a multiple of the page size, we force the offset to 0. We can look at handling it like that in a follow-up, though I'd argue that forcing it to be the next lower multiple of the page size would make more sense. One issue that appears when you can set custom offsets is that the little "showing x-y items out of z" gets out of whack (because it only operates on multiples of the page size (seemingly))  ## The Event Log as a table While we haven't used the HTML `table` element to render the event log, I would argue that it _is_ actually a table. It displays tabular data. Each card (row) has an id, a project, etc. The current implementation forces the event log search to act as a table state manager, but we could transform the event list into an events table to better align the pagination handling. The best part? We can keep the exact same design too. A table doesn't have to _look_ like a table to be a table.
245 lines
7.9 KiB
TypeScript
245 lines
7.9 KiB
TypeScript
import { Switch, FormControlLabel, useMediaQuery } from '@mui/material';
|
|
import EventJson from 'component/events/EventJson/EventJson';
|
|
import { PageContent } from 'component/common/PageContent/PageContent';
|
|
import { PageHeader } from 'component/common/PageHeader/PageHeader';
|
|
import EventCard from 'component/events/EventCard/EventCard';
|
|
import { useEventSettings } from 'hooks/useEventSettings';
|
|
import { useState, useEffect } from 'react';
|
|
import { Search } from 'component/common/Search/Search';
|
|
import theme from 'themes/theme';
|
|
import { useLegacyEventSearch } from 'hooks/api/getters/useEventSearch/useLegacyEventSearch';
|
|
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
|
import { useOnVisible } from 'hooks/useOnVisible';
|
|
import { styled } from '@mui/system';
|
|
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
|
|
import { useUiFlag } from 'hooks/useUiFlag';
|
|
import { EventLogFilters } from './EventLogFilters';
|
|
import type { EventSchema } from 'openapi';
|
|
import { useEventLogSearch } from './useEventLogSearch';
|
|
import { StickyPaginationBar } from 'component/common/Table/StickyPaginationBar/StickyPaginationBar';
|
|
|
|
interface IEventLogProps {
|
|
title: string;
|
|
project?: string;
|
|
feature?: string;
|
|
}
|
|
|
|
const StyledEventsList = styled('ul')(({ theme }) => ({
|
|
listStyleType: 'none',
|
|
margin: 0,
|
|
padding: 0,
|
|
display: 'grid',
|
|
gap: theme.spacing(2),
|
|
}));
|
|
|
|
const StyledFilters = styled(EventLogFilters)({
|
|
padding: 0,
|
|
});
|
|
|
|
const EventResultWrapper = styled('div')(({ theme }) => ({
|
|
padding: theme.spacing(2, 4, 4, 4),
|
|
display: 'flex',
|
|
flexFlow: 'column',
|
|
gap: theme.spacing(1),
|
|
}));
|
|
|
|
const NewEventLog = ({ title, project, feature }: IEventLogProps) => {
|
|
const {
|
|
events,
|
|
total,
|
|
loading,
|
|
tableState,
|
|
setTableState,
|
|
filterState,
|
|
pagination,
|
|
} = useEventLogSearch(
|
|
project
|
|
? { type: 'project', projectId: project }
|
|
: feature
|
|
? { type: 'flag', flagName: feature }
|
|
: { type: 'global' },
|
|
);
|
|
|
|
const setSearchValue = (query = '') => {
|
|
setTableState({ query });
|
|
};
|
|
const { eventSettings, setEventSettings } = useEventSettings();
|
|
const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
|
|
|
|
const onShowData = () => {
|
|
setEventSettings((prev) => ({ showData: !prev.showData }));
|
|
};
|
|
|
|
const searchInputField = (
|
|
<Search
|
|
onChange={setSearchValue}
|
|
initialValue={tableState.query || ''}
|
|
debounceTime={500}
|
|
/>
|
|
);
|
|
|
|
const showDataSwitch = (
|
|
<FormControlLabel
|
|
label='Full events'
|
|
control={
|
|
<Switch
|
|
checked={eventSettings.showData}
|
|
onChange={onShowData}
|
|
color='primary'
|
|
/>
|
|
}
|
|
/>
|
|
);
|
|
|
|
const resultComponent = () => {
|
|
if (loading) {
|
|
return <p>Loading...</p>;
|
|
} else if (events.length === 0) {
|
|
return <p>No events found.</p>;
|
|
} else {
|
|
return (
|
|
<StyledEventsList>
|
|
{events.map((entry) => (
|
|
<ConditionallyRender
|
|
key={entry.id}
|
|
condition={eventSettings.showData}
|
|
show={() => <EventJson entry={entry} />}
|
|
elseShow={() => <EventCard entry={entry} />}
|
|
/>
|
|
))}
|
|
</StyledEventsList>
|
|
);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<PageContent
|
|
bodyClass={'no-padding'}
|
|
header={
|
|
<PageHeader
|
|
title={`${title} (${total})`}
|
|
actions={
|
|
<>
|
|
{showDataSwitch}
|
|
{!isSmallScreen && searchInputField}
|
|
</>
|
|
}
|
|
>
|
|
{isSmallScreen && searchInputField}
|
|
</PageHeader>
|
|
}
|
|
>
|
|
<EventResultWrapper>
|
|
<StyledFilters
|
|
logType={project ? 'project' : feature ? 'flag' : 'global'}
|
|
state={filterState}
|
|
onChange={setTableState}
|
|
/>
|
|
{resultComponent()}
|
|
</EventResultWrapper>
|
|
<ConditionallyRender
|
|
condition={total > 25}
|
|
show={
|
|
<StickyPaginationBar
|
|
totalItems={total}
|
|
pageSize={pagination.pageSize}
|
|
pageIndex={pagination.currentPage}
|
|
fetchPrevPage={pagination.prevPage}
|
|
fetchNextPage={pagination.nextPage}
|
|
setPageLimit={pagination.setPageLimit}
|
|
/>
|
|
}
|
|
/>
|
|
</PageContent>
|
|
);
|
|
};
|
|
|
|
export const LegacyEventLog = ({ title, project, feature }: IEventLogProps) => {
|
|
const [query, setQuery] = useState('');
|
|
const { events, totalEvents, fetchNextPage } = useLegacyEventSearch(
|
|
project,
|
|
feature,
|
|
query,
|
|
);
|
|
const fetchNextPageRef = useOnVisible<HTMLDivElement>(fetchNextPage);
|
|
const { eventSettings, setEventSettings } = useEventSettings();
|
|
const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
|
|
|
|
// Cache the previous search results so that we can show those while
|
|
// fetching new results for a new search query in the background.
|
|
const [cache, setCache] = useState<EventSchema[]>();
|
|
useEffect(() => events && setCache(events), [events]);
|
|
|
|
const onShowData = () => {
|
|
setEventSettings((prev) => ({ showData: !prev.showData }));
|
|
};
|
|
|
|
const searchInputField = <Search onChange={setQuery} debounceTime={500} />;
|
|
|
|
const showDataSwitch = (
|
|
<FormControlLabel
|
|
label='Full events'
|
|
control={
|
|
<Switch
|
|
checked={eventSettings.showData}
|
|
onChange={onShowData}
|
|
color='primary'
|
|
/>
|
|
}
|
|
/>
|
|
);
|
|
|
|
const count = events?.length || 0;
|
|
const totalCount = totalEvents || 0;
|
|
const countText = `${count} of ${totalCount}`;
|
|
|
|
return (
|
|
<PageContent
|
|
header={
|
|
<PageHeader
|
|
title={`${title} (${countText})`}
|
|
actions={
|
|
<>
|
|
{showDataSwitch}
|
|
{!isSmallScreen && searchInputField}
|
|
</>
|
|
}
|
|
>
|
|
{isSmallScreen && searchInputField}
|
|
</PageHeader>
|
|
}
|
|
>
|
|
<ConditionallyRender
|
|
condition={Boolean(cache && cache.length === 0)}
|
|
show={<p>No events found.</p>}
|
|
/>
|
|
<ConditionallyRender
|
|
condition={Boolean(cache && cache.length > 0)}
|
|
show={
|
|
<StyledEventsList>
|
|
{cache?.map((entry) => (
|
|
<ConditionallyRender
|
|
key={entry.id}
|
|
condition={eventSettings.showData}
|
|
show={() => <EventJson entry={entry} />}
|
|
elseShow={() => <EventCard entry={entry} />}
|
|
/>
|
|
))}
|
|
</StyledEventsList>
|
|
}
|
|
/>
|
|
<div ref={fetchNextPageRef} />
|
|
</PageContent>
|
|
);
|
|
};
|
|
|
|
export const EventLog = (props: IEventLogProps) => {
|
|
const { isEnterprise } = useUiConfig();
|
|
const showFilters = useUiFlag('newEventSearch') && isEnterprise();
|
|
if (showFilters) {
|
|
return <NewEventLog {...props} />;
|
|
} else {
|
|
return <LegacyEventLog {...props} />;
|
|
}
|
|
};
|