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:
parent
bb473001c0
commit
a9dea450b3
@ -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>
|
||||
|
@ -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;
|
||||
|
@ -73,7 +73,7 @@ export const useEventLogSearch = (
|
||||
type: FilterItemParam,
|
||||
environment: FilterItemParam,
|
||||
id: StringParam,
|
||||
groupId: StringParam,
|
||||
groupId: FilterItemParam,
|
||||
...extraParameters(logType),
|
||||
};
|
||||
|
||||
|
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user