1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-08-27 13:49:10 +02:00

feat: group id clickable in event search

This commit is contained in:
sjaanus 2025-07-02 12:26:27 +03:00
parent bb473001c0
commit a9dea450b3
No known key found for this signature in database
GPG Key ID: 20E007C0248BA7FF
4 changed files with 60 additions and 1 deletions

View File

@ -6,6 +6,7 @@ import { Link } from 'react-router-dom';
import { styled } from '@mui/material';
import type { EventSchema } from 'openapi';
import { useUiFlag } from 'hooks/useUiFlag';
import { useLocation } from 'react-router-dom';
interface IEventCardProps {
entry: EventSchema;
@ -74,17 +75,41 @@ export const StyledCodeSection = styled('div')(({ theme }) => ({
const EventCard = ({ entry }: IEventCardProps) => {
const { locationSettings } = useLocationSettings();
const eventGroupingEnabled = useUiFlag('eventGrouping');
const location = useLocation();
const createdAtFormatted = formatDateYMDHMS(
entry.createdAt,
locationSettings.locale,
);
const getGroupIdLink = () => {
const searchParams = new URLSearchParams(location.search);
searchParams.set('groupId', `IS:${entry.groupId}`);
return `${location.pathname}?${searchParams.toString()}`;
};
return (
<StyledContainerListItem>
<dl>
<StyledDefinitionTerm>Event id:</StyledDefinitionTerm>
<dd>{entry.id}</dd>
<ConditionallyRender
condition={
!eventGroupingEnabled && entry.groupId !== undefined
}
show={
<>
<StyledDefinitionTerm>
Transaction id:
</StyledDefinitionTerm>
<dd>
<Link to={getGroupIdLink()}>
{entry.groupId}
</Link>
</dd>
</>
}
/>
<StyledDefinitionTerm>Changed at:</StyledDefinitionTerm>
<dd>{createdAtFormatted}</dd>
<StyledDefinitionTerm>Event:</StyledDefinitionTerm>

View File

@ -10,6 +10,7 @@ import { EventSchemaType, type FeatureSearchResponseSchema } from 'openapi';
import type { ProjectSchema } from 'openapi';
import { useEventCreators } from 'hooks/api/getters/useEventCreators/useEventCreators';
import { useEnvironments } from 'hooks/api/getters/useEnvironments/useEnvironments';
import { useLocation } from 'react-router-dom';
export const useEventLogFilters = (
projects: ProjectSchema[],
@ -17,9 +18,14 @@ export const useEventLogFilters = (
) => {
const { environments } = useEnvironments();
const { eventCreators } = useEventCreators();
const location = useLocation();
const [availableFilters, setAvailableFilters] = useState<IFilterItem[]>([]);
useEffect(() => {
const searchParams = new URLSearchParams(location.search);
const hasGroupId = searchParams.has('groupId');
const groupIdValue = searchParams.get('groupId');
const projectOptions =
projects?.map((project: ProjectSchema) => ({
label: project.name,
@ -50,6 +56,16 @@ export const useEventLogFilters = (
value: env.name,
})) ?? [];
const groupIdOptions =
hasGroupId && groupIdValue
? [
{
label: groupIdValue.replace(/^IS:/, ''), // Remove IS: prefix for display
value: groupIdValue,
},
]
: [];
const availableFilters: IFilterItem[] = [
{
label: 'Date From',
@ -87,6 +103,19 @@ export const useEventLogFilters = (
singularOperators: ['IS'],
pluralOperators: ['IS_ANY_OF'],
},
...(hasGroupId
? ([
{
label: 'Group ID',
icon: 'link',
options: groupIdOptions,
filterKey: 'groupId',
singularOperators: ['IS'],
pluralOperators: ['IS_ANY_OF'],
persistent: false,
},
] as IFilterItem[])
: []),
...(projectOptions.length > 1
? ([
{
@ -131,6 +160,7 @@ export const useEventLogFilters = (
JSON.stringify(projects),
JSON.stringify(eventCreators),
JSON.stringify(environments),
location.search,
]);
return availableFilters;

View File

@ -73,7 +73,7 @@ export const useEventLogSearch = (
type: FilterItemParam,
environment: FilterItemParam,
id: StringParam,
groupId: StringParam,
groupId: FilterItemParam,
...extraParameters(logType),
};

View File

@ -46,6 +46,10 @@ export interface EventSchema {
* @nullable
*/
ip?: string | null;
/**
* The event group ID.
*/
groupId?: string;
/**
* The concise, human-readable name of the event.
* @nullable